@sellmate/design-system 1.5.0 → 1.6.0

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

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-Cw-78mnC.js');
-var system = require('./system-wrt-tcOq.js');
+var index = require('./index-BGwB03Tk.js');
+var system = require('./system-CdAyz3ej.js');
 
 const popup$1 = {
 	header: {
@@ -105,7 +105,7 @@ const SdPopup = class {
             ...DEFAULT_SUBMIT_BUTTON_PROPS,
             ...this.submitButtonProps,
         };
-        return (index.h("div", { key: 'fe8ca033482913b9c8c7a62963d81d8c5c86c724', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, index.h("header", { key: 'b27afc04689384abc8cdd45e67e4765c3fef82e9', class: "sd-popup__header" }, index.h("h2", { key: '15d6cf170e483bfdea861aa7a218df8379d83be2', class: "sd-popup__title" }, this.popupTitle)), index.h("div", { key: 'daf70c8196ad95b214c978166f547a2a2fa56814', class: "sd-popup__body" }, index.h("slot", { key: 'f8f4a9f93b88404993e2c8f7155abe4756f9bdba' })), this.useFooter && (index.h("footer", { key: '38ff051abd11378ad0a83b2d634985d689e0dc27', class: "sd-popup__footer" }, index.h("div", { key: '149a3de3d7ab0703d9cec41b35af23a6eebd67de', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, index.h("slot", { key: '2507cece435fa3e00ea698bebf6c980fea081521', name: "footer-left" })), index.h("sd-button", { key: '5ae38a07e39437d6f3b8aa111258d60aa044152d', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
+        return (index.h("div", { key: '77379698e76b000368df2d2b7345010cde3df7ba', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, index.h("header", { key: 'e00d2292b718bfd21e491a09e5ea8c18fbb1a2c8', class: "sd-popup__header" }, index.h("h2", { key: 'b8bac8f58f7f916a3b6fe40a66d21318da45d4d3', class: "sd-popup__title" }, this.popupTitle)), index.h("div", { key: '56e5b653539752b9fd0fa4694f7342914cd7abc6', class: "sd-popup__body" }, index.h("slot", { key: '183fafa8179a3350817ec6e3dea12281860f7639' })), this.useFooter && (index.h("footer", { key: 'd1b7fe2d67e5f3ad3b3f8e20408271fdaab86d93', class: "sd-popup__footer" }, index.h("div", { key: '7cc5d0bd9d314942d8d5f982f1f459c56fde4bc0', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, index.h("slot", { key: 'ffb52c9d679e4ddf9e50e012f8a9aa02b0cb1f95', name: "footer-left" })), index.h("sd-button", { key: '3ab8061bf4119a9351921a41c3d9cb942c00b5d1', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
     }
 };
 SdPopup.style = sdPopupCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Cw-78mnC.js');
+var index = require('./index-BGwB03Tk.js');
 
 const SdPortal = class {
     constructor(hostRef) {

package/dist/cjs/sd-radio-button.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Cw-78mnC.js');
+var index = require('./index-BGwB03Tk.js');
 
 const radioButton = {
 	xs: {

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Cw-78mnC.js');
+var index = require('./index-BGwB03Tk.js');
 
 const radio = {
 	size: "16",

package/dist/cjs/sd-select-list-item_2.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Cw-78mnC.js');
+var index = require('./index-BGwB03Tk.js');
 var sdSelect_config = require('./sd-select.config-B19ptCT2.js');
 
 const sdSelectListItemCss = () => `sd-select-list-item{display:block}sd-select-list-item .sd-select-list-item{display:flex;align-items:center;gap:var(--list-item-gap);padding:var(--list-item-padding-y) var(--list-item-padding-right) var(--list-item-padding-y) var(--list-item-padding-left);font-size:var(--list-item-font-size);line-height:var(--list-item-line-height);font-weight:var(--list-item-font-weight);background:var(--list-item-bg);color:var(--list-item-color);cursor:default;user-select:none}sd-select-list-item .sd-select-list-item--selectable{cursor:pointer}sd-select-list-item .sd-select-list-item--depth1-group{border-top:var(--list-item-border-top);font-weight:700}sd-select-list-item .sd-select-list-item--depth2-group{font-weight:500}sd-select-list-item .sd-select-list-item--focused.sd-select-list-item--selectable:not(.sd-select-list-item--disabled){background:var(--list-item-bg-hover);color:var(--list-item-color-hover)}sd-select-list-item .sd-select-list-item--selected:not(.sd-select-list-item--group){font-weight:var(--list-item-font-weight-selected);color:var(--list-item-color-selected)}sd-select-list-item .sd-select-list-item--selected.sd-select-list-item--focused{color:var(--list-item-color-hover)}sd-select-list-item .sd-select-list-item--disabled{color:var(--list-item-color-disabled);cursor:not-allowed}sd-select-list-item .sd-select-list-item__label{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}sd-select-list-item .sd-select-list-item__count{flex-shrink:0;font-weight:500;color:var(--list-item-color-disabled)}sd-select-list-item .sd-select-list-item--group.sd-select-list-item--focused .sd-select-list-item__count{color:#ffffff}sd-select-list-item .sd-select-list-item__checkbox{flex-shrink:0}`;
@@ -79,7 +79,7 @@ const SdSelectListItem = class {
         return (
         // 키보드 네비게이션은 부모 listbox 의 ArrowUp/Down + Enter 가 담당. 항목 자체는 role=option, tabindex=-1 으로 표시.
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-        index.h("div", { key: '37189acb2854061fd120d662050fddddb396170c', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
+        index.h("div", { key: '33f5d4383d2bfac91507d72d98b8a73b380a70e8', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
                 'sd-select-list-item': true,
                 'sd-select-list-item--group': isGroup,
                 'sd-select-list-item--depth1-group': isDepth1Group,
@@ -89,7 +89,7 @@ const SdSelectListItem = class {
                 'sd-select-list-item--focused': this.isFocused,
                 'sd-select-list-item--selectable': this.isSelectable && !this.option.disabled,
                 'sd-select-list-item--disabled': !!this.option.disabled,
-            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (index.h("sd-checkbox", { key: '7cc43ed0a1c4a2019be3a7f6f60de1c7f03a6148', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, inverse: this.isFocused && this.isSelected !== false, class: "sd-select-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), index.h("span", { key: '331c7d1ded82834521f3292dc739612f24d7209e', class: "sd-select-list-item__label" }, this.option.label), this.countInfo && (index.h("span", { key: '80b34cd1a6e67719d50c62afedf23c0903259c78', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
+            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (index.h("sd-checkbox", { key: 'a93dec7a45e140d7f715a6fc823c4438c58cdd8f', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, inverse: this.isFocused && this.isSelected !== false, class: "sd-select-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), index.h("span", { key: '81b0bfdd0825b795f2638d6529e8c5fb346be6db', class: "sd-select-list-item__label" }, this.option.label), this.countInfo && (index.h("span", { key: '2e1425a5d6ab9082a30b4d9079be1d4104d95fc2', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
     }
 };
 SdSelectListItem.style = sdSelectListItemCss();
@@ -142,15 +142,15 @@ const SdSelectListItemSearch = class {
             clearTimeout(this.debounceTimer);
     }
     render() {
-        return (index.h("div", { key: 'a8b62b61ec6a0afd69de50b8df02e57de2a04c8c', class: {
+        return (index.h("div", { key: '8c0c85ac9c382e2978e32924c33a580a4fac3485', class: {
                 'sd-select-list-item-search': true,
                 'sd-select-list-item-search--scrolled': this.isScrolled,
-            } }, index.h("div", { key: '2b04a677a8b4e3212eff83c07609a4b7d89799c1', class: "sd-select-list-item-search__inner" }, index.h("sd-icon", { key: 'c0c51d4b0150fee7151c7e2bcc5aaf8428d31043', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), index.h("input", { key: '85d2309cbb037851053c34baeca5f59c690c0881', ref: el => {
+            } }, index.h("div", { key: '92425ff6eab4cf16f96f45dabb8f07c27ad9e747', class: "sd-select-list-item-search__inner" }, index.h("sd-icon", { key: '253a40e4e624e828e351d08c1f05fb2d098c8b9b', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), index.h("input", { key: 'b38735ae6e75b9fe19ceb3038c5b873ad42760ef', ref: el => {
                 this.inputEl = el;
-            }, type: "text", class: "sd-select-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), index.h("button", { key: '564b6ae6dbab1fa5f4f6d977fa9fd52bb9114873', type: "button", class: {
+            }, type: "text", class: "sd-select-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), index.h("button", { key: '8045fef5d1821ea60ac261ee07f7eddf8a7a189d', type: "button", class: {
                 'sd-select-list-item-search__clear': true,
                 'sd-select-list-item-search__clear--hidden': this.searchText === '',
-            }, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, index.h("sd-icon", { key: '8ae0f92f8762681cc4c2a6fc11340498b8b01c98', name: "close", size: 12, color: "#888888" })))));
+            }, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, index.h("sd-icon", { key: '110c0420fd17c51055cfc1815a528cf7c385d91e', name: "close", size: 12, color: "#888888" })))));
     }
 };
 SdSelectListItemSearch.style = sdSelectListItemSearchCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Cw-78mnC.js');
+var index = require('./index-BGwB03Tk.js');
 var index$1 = require('./index-BUvXpPc3.js');
 var sdSelect_config = require('./sd-select.config-B19ptCT2.js');
 
@@ -265,15 +265,15 @@ const SdSelect = class {
                 this.closeDropdown();
             },
         };
-        return (index.h("sd-field", { key: '21849c194994f51c36b2fa5eafd606230b21e365', 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, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
+        return (index.h("sd-field", { key: '3c188cbdd8c612e78780d18c03acc382d32080c9', 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, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
                 this.hovered = true;
             }, onMouseLeave: () => {
                 this.hovered = false;
-            } }, index.h("div", { key: 'bcba54ed8d325a540d14af14c9b3bf332f631ce8', class: "sd-select", ref: el => {
+            } }, index.h("div", { key: 'be596d399856ed966408ba1525fea9dbdf8fcc7e', class: "sd-select", ref: el => {
                 this.triggerRef = el;
-            } }, index.h("sd-select-trigger", { key: '72e361ca6e162eee56b82398902e89226e980d3d', ref: el => {
+            } }, index.h("sd-select-trigger", { key: 'f8a29b1ac2469c60af8c7101d05157674566f00f', ref: el => {
                 this.triggerComponentRef = el;
-            }, displayText: this.displayText, placeholder: this.placeholder ?? '선택', disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (index.h("sd-portal", { key: '0ff55857cbc146db57caa53d560752d0fae8413b', ...portalProps }, index.h("sd-select-listbox", { key: '20c103309dc7f2eaf4bee6abae271606b64ace8b', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, useSearch: this.useSearch, useSelectAll: this.useSelectAll, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
+            }, displayText: this.displayText, placeholder: this.placeholder ?? '선택', disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (index.h("sd-portal", { key: '3cef3f95f69b09d0e4e8f6b01615df4cca031cff', ...portalProps }, index.h("sd-select-listbox", { key: 'e8833c547aa2e8084754c7a439d3860df5c97e5b', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, useSearch: this.useSearch, useSelectAll: this.useSelectAll, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
     }
     static get watchers() { return {
         "isOpen": [{
@@ -637,9 +637,9 @@ const SdSelectListbox = class {
             '--listbox-max-height': this.maxHeight ?? '260px',
             '--listbox-radius': `${sdSelect_config.LIST_BOX_LAYOUT.radius}px`,
         };
-        return (index.h("div", { key: '1834dbfee219988e78ad47d3640ebafb9983298c', class: "sd-select-listbox", style: cssVars }, this.showSearch && (index.h("sd-select-list-item-search", { key: '28fbfce57184f2a8c090d628c5b33cecf9337c3c', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), index.h("div", { key: 'b7430d72cdb26cad59b226af8cf98d796645390c', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
+        return (index.h("div", { key: '7505e221ddb890880f0ba5088c3fdc76700e3b2f', class: "sd-select-listbox", style: cssVars }, this.showSearch && (index.h("sd-select-list-item-search", { key: '54b97ad40c5e7abe92b478689d09337843736652', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), index.h("div", { key: 'f7417f923cc34cbb2c2a56ae70ed54701d013d3d', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
                 this.listEl = el;
-            } }, this.showSelectAll && (index.h("sd-select-list-item", { key: '8f159cdef838c0f39bb7aad1717a88c04c75dbda', option: SdSelectListbox.SELECT_ALL_OPTION, depth: 1, isSelected: this.selectAllState, isFocused: this.isOptionFocused(SdSelectListbox.SELECT_ALL_OPTION), useCheckbox: true, onSdListItemClick: this.handleSelectAllClick, onMouseEnter: () => this.handleOptionHover(SdSelectListbox.SELECT_ALL_OPTION) })), this.isEmpty ? (index.h("div", { class: "sd-select-listbox__empty" }, sdSelect_config.EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (index.h("sd-select-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) })))))));
+            } }, this.showSelectAll && (index.h("sd-select-list-item", { key: '5e8cfcb1f9f0953b9eaa6fc73de992b52a0a23d7', option: SdSelectListbox.SELECT_ALL_OPTION, depth: 1, isSelected: this.selectAllState, isFocused: this.isOptionFocused(SdSelectListbox.SELECT_ALL_OPTION), useCheckbox: true, onSdListItemClick: this.handleSelectAllClick, onMouseEnter: () => this.handleOptionHover(SdSelectListbox.SELECT_ALL_OPTION) })), this.isEmpty ? (index.h("div", { class: "sd-select-listbox__empty" }, sdSelect_config.EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (index.h("sd-select-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) })))))));
     }
     static get watchers() { return {
         "searchKeyword": [{
@@ -699,7 +699,7 @@ const SdSelectTrigger = class {
                 ? sdSelect_config.SELECT_COLORS.icon.disabled
                 : sdSelect_config.SELECT_COLORS.icon.default,
         };
-        return (index.h("div", { key: '645d8e7ff5065664a3510b127628cb54d97fb613', ref: el => {
+        return (index.h("div", { key: '3a97ed909e3088528714682050a3986081e19433', ref: el => {
                 this.triggerEl = el;
             }, role: "button", "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', tabindex: this.disabled ? -1 : 0, class: {
                 'sd-select-trigger': true,
@@ -710,7 +710,7 @@ const SdSelectTrigger = class {
                     e.preventDefault();
                     this.handleClick();
                 }
-            }, onFocus: this.handleFocus, onBlur: this.handleBlur }, index.h("div", { key: '515dda6d98ad09b0854e0ef0e04f0bf8c9592d1a', class: "sd-select-trigger__content" }, index.h("span", { key: '9d92577675d0c7e6ba32174ae0cdd754788dbccb', class: "sd-select-trigger__text" }, hasValue ? this.displayText : (this.placeholder ?? '선택')), index.h("sd-icon", { key: '347532a73d9ff2929d9f716fb8d2e314af7d7069', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
+            }, onFocus: this.handleFocus, onBlur: this.handleBlur }, index.h("div", { key: '986faba7d79980f0bcd10fff32495d2100e1805f', class: "sd-select-trigger__content" }, index.h("span", { key: 'c51b268186de7cdabcf06ac3d540ccb570c9e865', class: "sd-select-trigger__text" }, hasValue ? this.displayText : (this.placeholder ?? '선택')), index.h("sd-icon", { key: '8a03b400d5aef2e0ca9aeb4b1f6122db2932455a', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
                 'sd-select-trigger__icon': true,
                 'sd-select-trigger__icon--open': this.isOpen,
             } }))));

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Cw-78mnC.js');
+var index = require('./index-BGwB03Tk.js');
 
 var switchTokens = {
 	"switch": {
@@ -102,7 +102,7 @@ const SdSwitch = class {
             '--sd-switch-line-height': `${SWITCH_TYPOGRAPHY.lineHeight}px`,
             '--sd-switch-text-decoration': SWITCH_TYPOGRAPHY.textDecoration,
         };
-        return (index.h("label", { key: '3d9449733d73dcbd2d7a95505b6afd930a43a114', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, index.h("input", { key: 'f8d35ea743b5f85697d9d4de8fe915ce2d8f7b56', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), index.h("div", { key: 'b62a6bfa60c488270184698610337926b688baff', class: "sd-switch__track" }, index.h("div", { key: 'da7764fe4a4202366fe0a922de687ece121eb73f', class: "sd-switch__knob" })), this.label && index.h("span", { key: '924c2939f0cb2196ff69be560e1c7f113590c73b', class: "sd-switch__label" }, this.label)));
+        return (index.h("label", { key: '04674e9fc781ac58b2e68ae30cb90c948de8b5e3', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, index.h("input", { key: 'b87970c38aa2ccbe3d8f91414c96c2f05aaaa818', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), index.h("div", { key: 'd87bcaf8b16d17401215dd962875dc585f747d65', class: "sd-switch__track" }, index.h("div", { key: '408a034cd6b063d9cd968f647995cc77dfdd0577', class: "sd-switch__knob" })), this.label && index.h("span", { key: '58d7ab18329007eac2e23b0fcda66a841e4df0c2', class: "sd-switch__label" }, this.label)));
     }
 };
 SdSwitch.style = sdSwitchCss();

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

@@ -1,10 +1,10 @@
 'use strict';
 
-var index = require('./index-Cw-78mnC.js');
+var index = require('./index-BGwB03Tk.js');
 var constants = require('./constants-DJRV1upE.js');
-var sdTable_config = require('./sd-table.config-DqgNOdXO.js');
-require('./component.table-qOFez3z3.js');
-require('./system-wrt-tcOq.js');
+var sdTable_config = require('./sd-table.config-BjJW74Zx.js');
+require('./component.table-DIxmbGBT.js');
+require('./system-CdAyz3ej.js');
 
 let urlAlphabet =
   'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict';
@@ -19,7 +19,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) {
@@ -44,7 +44,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;
@@ -104,8 +104,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이 사용된다.
@@ -258,9 +256,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);
@@ -600,7 +595,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 ? sdTable_config.TABLE_SELECTABLE_COLUMN_WIDTH : 0);
         const rightOffset = this.columnWidths
             .filter((_, i) => i >=
             this.columns.filter(c => c.visible !== false).length -
@@ -750,36 +745,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) {
@@ -875,26 +840,27 @@ const SdTable = class {
             '--table-body-font-size': `${sdTable_config.TABLE_BODY_TYPOGRAPHY.fontSize}px`,
             '--table-body-line-height': `${sdTable_config.TABLE_BODY_TYPOGRAPHY.lineHeight}px`,
             '--table-body-text-decoration': sdTable_config.TABLE_BODY_TYPOGRAPHY.textDecoration,
+            '--table-selectable-width': `${sdTable_config.TABLE_SELECTABLE_COLUMN_WIDTH}px`,
         };
-        return (index.h(index.Host, { key: '9ee5b528b330f9edf406ff40ec089136c0807653', style: hostStyle }, index.h("div", { key: '9ac6cbba84b7ef7d0897474168748811fb15af92', class: "sd-table__container", style: {
+        return (index.h(index.Host, { key: '4596e04bd57aca00fa6378fd26ce33a06a795eaf', style: hostStyle }, index.h("div", { key: '11a20d327410b0be659cede32917164e036e796c', class: "sd-table__container", style: {
                 '--table-width': this.width,
                 '--table-height': effectiveTableHeight,
                 '--table-container-height': `calc(${effectiveTableHeight} - ${paginationHeight}px)`,
-            } }, index.h("div", { key: '11f916debfd443e1d243bfa2335dbb0a3cb094bc', class: {
+            } }, index.h("div", { key: 'f4f3acf584dc4eacdae25b11aa2b62b73ffab949', class: {
                 'sd-table__wrapper': true,
-                'sd-table__wrapper--radius-use-top': this.radius === 'useTop',
-            } }, index.h("div", { key: '3cad3d86f731a3edc0d2b5a680bcaf6ad6be7399', class: {
+                'sd-table__wrapper--use-top': this.useTop,
+            } }, index.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 && (index.h("div", { key: '6f0aac84dcb3d9ca721ed82cd45214b3956d3f94', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, index.h("sd-circle-progress", { key: '8bb6b8025fceee6ef856efd9cafefe925fc95272', indeterminate: true }))), isNoData && (index.h(index.h.Fragment, null, index.h("div", { key: '69e6e22b68261832a299de470c8ca7f5a16205dd', class: "sd-table__no-data-header-overlay" }), index.h("div", { key: 'c797a2d41c752698bed1f034beefddc4bf8b951d', class: "sd-table__no-data" }, index.h("div", { key: '0f0306bc89b5d9046de2aec935822eab0c3ca36c', class: "sd-table__no-data-content", ref: el => {
+            } }, this.isLoading && (index.h("div", { key: 'a696933a70799ba282fc743281d0af27fd691a2e', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, index.h("sd-circle-progress", { key: 'cba6ac47367ef6499bf338b9b757ee74fdd7e6c1', indeterminate: true }))), isNoData && (index.h(index.h.Fragment, null, index.h("div", { key: '6e22156bf5b0fb9814d9bf9cad57506758c6284b', class: "sd-table__no-data-header-overlay" }), index.h("div", { key: 'b72f9fabcc8acb8e700ad55acc4d7aff08355a1c', class: "sd-table__no-data" }, index.h("div", { key: '43f271a8803121362f16e8153748328658f073ec', class: "sd-table__no-data-content", ref: el => {
                 this.noDataContentEl = el;
                 if (el)
                     this.syncNoDataContentObserver();
-            } }, index.h("slot", { key: '042671d4c65c4031a756da386ed010146c17f736', name: "no-data" }, index.h("span", { key: '5994f656dbea3fd1dea69c105907b188658f8c41' }, this.resolvedNoDataLabel)))))), index.h("table", { key: '16bb3a7c6b32e5312eda79015cd7d90bef37bdff', class: this.tableClasses }, this.autoThead ? (index.h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }, index.h("sd-thead", { rows: this.rows ?? [] }))) : (index.h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange })), this.autoTbody ? (index.h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }, index.h("sd-tbody", { rows: this.rows ?? [] }, this.renderAutoRows()))) : (index.h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }))))), this.pagination &&
+            } }, index.h("slot", { key: '4b8533115bbc81962b80c9c2533fe4b44a87193c', name: "no-data" }, index.h("span", { key: 'd94c4f7cf9eca7901b99434f712480a7b20c869a' }, this.resolvedNoDataLabel)))))), index.h("table", { key: 'a9a353aca09124ed8a82fcd2f8a0a7de09b234f5', class: this.tableClasses }, this.autoThead ? (index.h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }, index.h("sd-thead", { rows: this.rows ?? [] }))) : (index.h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange })), this.autoTbody ? (index.h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }, index.h("sd-tbody", { rows: this.rows ?? [] }, this.renderAutoRows()))) : (index.h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }))))), this.pagination &&
             this.pagination.rowsPerPage > 0 &&
             this.rowCount > 0 &&
-            !this.useVirtualScroll && (index.h("div", { key: '6c3ee5d93fb395154c4c42c914669af535c1a5bc', class: "sd-table__pagination" }, index.h("sd-pagination", { key: '46053012374e1255037706a8fa4d068dbc60f2d9', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (index.h("sd-select", { key: 'df04b19e857e823be8237148d84456d492575ce3', value: this.useInternalPagination
+            !this.useVirtualScroll && (index.h("div", { key: '8afeb9398c3d7540a54b9a3660fb9685ae1cddca', class: "sd-table__pagination" }, index.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 && (index.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/cjs/{sd-table.config-DqgNOdXO.js → sd-table.config-BjJW74Zx.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-var component_table = require('./component.table-qOFez3z3.js');
-var system = require('./system-wrt-tcOq.js');
+var component_table = require('./component.table-DIxmbGBT.js');
+var system = require('./system-CdAyz3ej.js');
 
 // ── Header Tokens ──
 const TABLE_HEADER_LAYOUT = {
@@ -50,9 +50,12 @@ const TABLE_BORDER = {
 };
 const TABLE_SEPARATOR = {
     color: component_table.tableTokens.table.separator.color,
-    width: component_table.tableTokens.table.separator.Width,
+    width: component_table.tableTokens.table.separator.width.default,
+    denseWidth: component_table.tableTokens.table.separator.width.dense,
 };
 const TABLE_RADIUS = component_table.tableTokens.table.radius;
+// ── Selectable Column ──
+const TABLE_SELECTABLE_COLUMN_WIDTH = 48;
 // ── Header Icon Color Defaults ──
 const ICON_DEFAULT_COLOR = {
     pageEdit: system.systemTokens.color.darkblue.strong,
@@ -73,6 +76,7 @@ exports.TABLE_HEADER_LAYOUT = TABLE_HEADER_LAYOUT;
 exports.TABLE_HEADER_RESIZING_BAR = TABLE_HEADER_RESIZING_BAR;
 exports.TABLE_HEADER_TYPOGRAPHY = TABLE_HEADER_TYPOGRAPHY;
 exports.TABLE_RADIUS = TABLE_RADIUS;
+exports.TABLE_SELECTABLE_COLUMN_WIDTH = TABLE_SELECTABLE_COLUMN_WIDTH;
 exports.TABLE_SEPARATOR = TABLE_SEPARATOR;
 exports.resolveSortIconName = resolveSortIconName;
 exports.resolveTableIconColor = resolveTableIconColor;

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Cw-78mnC.js');
+var index = require('./index-BGwB03Tk.js');
 
 const tab = {
 	main: {
@@ -188,7 +188,7 @@ const SdTabs = class {
         };
     }
     render() {
-        return (index.h("div", { key: '181916a72512a6802a06dc56fca418a806d18a0e', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index$1) => {
+        return (index.h("div", { key: '92384577bf4ce85de90ae05a32e44715e595fe16', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index$1) => {
             const badgeName = this.getBadgeName(tab);
             return (index.h("div", { key: `tab-${index$1}`, 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/cjs/sd-tag.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Cw-78mnC.js');
+var index = require('./index-BGwB03Tk.js');
 
 const tag = {
 	xs: {

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Cw-78mnC.js');
+var index = require('./index-BGwB03Tk.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}`;
@@ -158,7 +158,7 @@ const SdTd = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '91c033a0c4c3a6c3c9b29c0be99912c5ac1283ee', class: { [`align-${this.align}`]: Boolean(this.align) } }, index.h("slot", { key: 'abfbc911c707012bc7d924e328ba07d71b96f9a9' })));
+        return (index.h(index.Host, { key: '1d7123e1f35cfb513a1fa89b4d60f8dde7715a2f', class: { [`align-${this.align}`]: Boolean(this.align) } }, index.h("slot", { key: 'f7b9266106a6df93e2101ca9a324035960281a6f' })));
     }
     static get watchers() { return {
         "field": [{

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Cw-78mnC.js');
+var index = require('./index-BGwB03Tk.js');
 
 const textLink = {
 	gap: "4",

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Cw-78mnC.js');
+var index = require('./index-BGwB03Tk.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: 'c80d46b63f50591d4d92b810c0625701e4741e3a', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
+        return (index.h("div", { key: '1de55d255b75842f52e3f0a147a69493ed1a7de5', 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-Cw-78mnC.js');
+var index = require('./index-BGwB03Tk.js');
 
 const toast = {
 	icon: "16",
@@ -84,12 +84,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 (index.h("div", { key: '82579581897d7845b95456ccb5e2a1745c84bcc5', style: {
+        return (index.h("div", { key: '735fa3f949ee4c7d0178f999c02e90c829c133b4', style: {
                 '--sd-toast-bg': typeConfig.bg,
                 '--sd-toast-text': typeConfig.content,
                 '--sd-toast-icon': iconColor,
                 '--sd-toast-link': linkColor,
-            } }, index.h("div", { key: '5f41392a25dee4e53917255453c97c2203940f21', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: '8f38f7c9842ec295510135589a63994011a856f4', class: "sd-toast__icon" }, index.h("sd-icon", { key: '62ef897ddfc3b47fe7b640d430d0baf95bdb5b51', name: this.icon, size: iconSize, color: iconColor }))), index.h("div", { key: 'f6db6cb9776cb41400c9a9052cdea94990245298', class: "sd-toast__content" }, index.h("span", { key: 'fbd7cdd72422e9ad08f99302b4dcd607d058926f', class: "sd-toast__message" }, this.message)), this.link && (index.h("a", { key: 'f599928ad9d0d7536086d7dd2d1ce65b429fd8f4', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (index.h("sd-button", { key: '2be68a412c4b6b9dac64dbd89447c4905fa7512f', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (index.h("sd-ghost-button", { key: '065030362b37383ee7ae31e9b8a771b160427cbe', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
+            } }, index.h("div", { key: '4e483d858c3268bde838ddc5c5c9cb5065855326', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: '007eded85c508bdd2da05b1c9d489ff2d03a4df9', class: "sd-toast__icon" }, index.h("sd-icon", { key: '099d5556f4b0a11f5162cb76a6166a2d662d9590', name: this.icon, size: iconSize, color: iconColor }))), index.h("div", { key: '3825916248bc2385fe87c8aeb6d741b59738246f', class: "sd-toast__content" }, index.h("span", { key: 'fba817baf33179296f50d3fe4147cc99c38fbb83', class: "sd-toast__message" }, this.message)), this.link && (index.h("a", { key: '39667765a9a72c761f0b464f78c7652e60e6dd16', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (index.h("sd-button", { key: '3da2f9a5daf53de4400bfec79654b5795c3b6af4', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (index.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/cjs/sd-toggle.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Cw-78mnC.js');
+var index = require('./index-BGwB03Tk.js');
 
 const toggle = {
 	height: "28",
@@ -120,7 +120,7 @@ const SdToggle = class {
             '--sd-toggle-content-select': TOGGLE_COLORS.content.select,
             '--sd-toggle-content-disabled': TOGGLE_COLORS.content.disabled,
         };
-        return (index.h("label", { key: 'c5c8b9448dabb6619e80fd55b11f94bf78706994', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, index.h("input", { key: 'bd43e7f286da217653461ec3128998c5f5a821d9', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        return (index.h("label", { key: 'f1b1b68270d523f7f3e40c8145f35e93df269d73', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, index.h("input", { key: '7e07c190916e19ffe8744f6b491e92e6bf8efd36', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
 };
 SdToggle.style = sdToggleCss();

package/dist/cjs/{system-wrt-tcOq.js → system-CdAyz3ej.js}

@@ -13,6 +13,9 @@ const color = {
 		accent: "#0075FF",
 		inverse: "#FFFFFF"
 	},
+	divider: {
+		"default": "#E1E1E1"
+	},
 	blue: {
 		strong: "#0075FF"},
 	darkblue: {

package/dist/cjs/{tooltipArrow-BjSFKIUq.js → tooltipArrow-COD-SNZL.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Cw-78mnC.js');
+var index = require('./index-BGwB03Tk.js');
 
 const TooltipArrow = (props) => (index.h("svg", { width: "16", height: "12", viewBox: "0 0 16 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, index.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/collection/collection-manifest.json

@@ -28,6 +28,7 @@
     "components/sd-date-range-picker/sd-date-range-picker-calendar/sd-date-range-picker-calendar.js",
     "components/sd-portal/sd-portal.js",
     "components/sd-field/sd-field.js",
+    "components/sd-divider/sd-divider.js",
     "components/sd-dropdown-button/sd-dropdown-button.js",
     "components/sd-file-picker/sd-file-picker.js",
     "components/sd-floating-portal/sd-floating-portal.js",

package/dist/collection/components/sd-divider/sd-divider.config.js

@@ -0,0 +1,4 @@
+import systemTokens from "../../tokens/generated/system.json";
+export const DIVIDER_COLORS = {
+    default: systemTokens.color.divider.default,
+};

package/dist/collection/components/sd-divider/sd-divider.css

@@ -0,0 +1,25 @@
+sd-divider {
+  flex-shrink: 0;
+  line-height: 0;
+}
+
+:where(sd-divider:not([vertical])) {
+  display: block;
+  width: 100%;
+  height: 1px;
+}
+
+:where(sd-divider[vertical]) {
+  display: inline-block;
+  align-self: stretch;
+  width: 1px;
+}
+
+sd-divider hr {
+  display: block;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  border: 0;
+  background-color: var(--sd-divider-color);
+}

package/dist/collection/components/sd-divider/sd-divider.js

@@ -0,0 +1,47 @@
+import { Host, h } from "@stencil/core";
+import { DIVIDER_COLORS } from "./sd-divider.config";
+export class SdDivider {
+    /** true면 수직 분할선, false면 수평 분할선 */
+    vertical = false;
+    render() {
+        const hostStyle = {
+            '--sd-divider-color': DIVIDER_COLORS.default,
+        };
+        return (h(Host, { key: '92e9f5ef8d6d382e1e2a62f3421feaf1bc27aab7', style: hostStyle }, h("hr", { key: '40827e6308a258e6de4a438c53d4de9465a6d0a1', "aria-orientation": this.vertical ? 'vertical' : 'horizontal' })));
+    }
+    static get is() { return "sd-divider"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sd-divider.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sd-divider.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "vertical": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "true\uBA74 \uC218\uC9C1 \uBD84\uD560\uC120, false\uBA74 \uC218\uD3C9 \uBD84\uD560\uC120"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "vertical",
+                "defaultValue": "false"
+            }
+        };
+    }
+}

package/dist/collection/components/sd-dropdown-button/sd-dropdown-button.config.js

@@ -11,11 +11,11 @@ export const PRESET_HOVER_BACKGROUNDS = BUTTON_PRESET_HOVER_BACKGROUNDS;
 export const PRESET_CONTENT_COLORS = BUTTON_PRESET_CONTENT_COLORS;
 export const PRESET_BORDER_COLORS = BUTTON_PRESET_BORDER_COLORS;
 export const PRESET_DIVIDER_COLORS = {
-    primary: buttonTokens.button.brand.strong.dropdown.divider,
-    secondary: buttonTokens.button.brand.subtle.dropdown.divider,
+    primary: buttonTokens.button.dropdown.brand.strong.split,
+    secondary: buttonTokens.button.dropdown.brand.subtle.split,
     primary_outline: PRESET_BORDER_COLORS.primary_outline,
     neutral_outline: PRESET_BORDER_COLORS.neutral_outline,
-    danger: buttonTokens.button.danger.strong.dropdown.divider,
+    danger: buttonTokens.button.dropdown.danger.strong.split,
     danger_outline: PRESET_BORDER_COLORS.danger_outline,
 };
 const MENU_ITEM_COLOR = systemTokens.color.fg.secondary;