@sellmate/design-system 1.4.0 → 1.5.0

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

@@ -265,15 +265,15 @@ const SdSelect = class {
                 this.closeDropdown();
             },
         };
-        return (index.h("sd-field", { key: 'c433e21047632ae1e7901e11f6f9d83070f8d83c', 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: '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: () => {
                 this.hovered = true;
             }, onMouseLeave: () => {
                 this.hovered = false;
-            } }, index.h("div", { key: 'f04f2f331c27745035c35d96d5262398065589a8', class: "sd-select", ref: el => {
+            } }, index.h("div", { key: 'bcba54ed8d325a540d14af14c9b3bf332f631ce8', class: "sd-select", ref: el => {
                 this.triggerRef = el;
-            } }, index.h("sd-select-trigger", { key: 'b66e83ff248618c815b155f27445f3da9e91361b', ref: el => {
+            } }, index.h("sd-select-trigger", { key: '72e361ca6e162eee56b82398902e89226e980d3d', 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: 'bd5b46d8e4849d235e39a9d9cfc549fdbe260076', ...portalProps }, index.h("sd-select-listbox", { key: '81266da14ee4e59b4cedd4b364c18fea4d3c4f7f', 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: '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) })))));
     }
     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: '4173255a866459bf0aeb98d517263d12f1c39fa5', class: "sd-select-listbox", style: cssVars }, this.showSearch && (index.h("sd-select-list-item-search", { key: '79e7d48d7234ebfd32d3cd242822dfa93a73c151', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), index.h("div", { key: '22981c1e049d0d526af06bb5b563de5130c14477', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
+        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 => {
                 this.listEl = el;
-            } }, this.showSelectAll && (index.h("sd-select-list-item", { key: '7acd37c5663bb101d6853cbd6629a78d402d6cde', 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: '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) })))))));
     }
     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: '6694f35a396f368d5df9860db30d817beddb8bec', ref: el => {
+        return (index.h("div", { key: '645d8e7ff5065664a3510b127628cb54d97fb613', 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: 'd8ff247ca362a8fc3677d9803261343a1e891298', class: "sd-select-trigger__content" }, index.h("span", { key: 'cd81a7c7c135372aad80fa9391b160337632643c', class: "sd-select-trigger__text" }, hasValue ? this.displayText : (this.placeholder ?? '선택')), index.h("sd-icon", { key: '838c12e2a9ce06036eee766ffd2f88f3215b8420', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
+            }, 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: {
                 'sd-select-trigger__icon': true,
                 'sd-select-trigger__icon--open': this.isOpen,
             } }))));

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

@@ -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: 'ebb195a1bb93ae476b4bf3e697623809d626eed6', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, index.h("input", { key: 'a6de6298d35c54ad83dc6285b90e67c8d3564d15', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), index.h("div", { key: '7881f46be572edcfc82888564a7f85ad4207dd8e', class: "sd-switch__track" }, index.h("div", { key: 'c08c9d5894a6f9ddf3ecdaaa9253628478479043', class: "sd-switch__knob" })), this.label && index.h("span", { key: '4e01b185502829d8fb647d3eafaaf6565489b2f3', class: "sd-switch__label" }, this.label)));
+        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)));
     }
 };
 SdSwitch.style = sdSwitchCss();

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

@@ -2,9 +2,9 @@
 
 var index = require('./index-Cw-78mnC.js');
 var constants = require('./constants-DJRV1upE.js');
-var sdTable_config = require('./sd-table.config-B7psrvV4.js');
+var sdTable_config = require('./sd-table.config-DqgNOdXO.js');
 require('./component.table-qOFez3z3.js');
-require('./system-VmZRYp6V.js');
+require('./system-wrt-tcOq.js');
 
 let urlAlphabet =
   'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict';
@@ -236,6 +236,10 @@ const SdTable = class {
         if (this.pagination?.rowsPerPage != null) {
             this.innerRowsPerPage = this.pagination.rowsPerPage;
         }
+        // host element 에 자식 컴포넌트(sd-thead/sd-tbody/sd-tr) 가 직접 접근하는 internal sync helpers 를 monkey-patch.
+        // 28개 메서드 전체를 typed interface 로 노출하면 코드 비용이 크고, 어차피 internal 이라 외부 사용자가 호출하지 않는다.
+        // 정식 @Method 노출로 옮기는 작업은 별도 이슈로 분리.
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const el = this.el;
         el.isRowSelectedSync = this.isRowSelectedSync.bind(this);
         el.updateRowSelectSync = this.updateRowSelectSync.bind(this);
@@ -352,7 +356,6 @@ const SdTable = class {
             }
         });
     }
-    // light DOM(manual mode 자식)과 shadow DOM(autoThead/autoTbody fallback) 양쪽 모두에서 자식을 찾는다.
     queryChildEl(selector) {
         return (this.el.querySelector(selector) ??
             this.el.shadowRoot?.querySelector(selector) ??
@@ -380,12 +383,12 @@ const SdTable = class {
     refreshChildrenSelection() {
         const thead = this.queryChildEl('sd-thead');
         thead?.refreshSelection?.();
-        this.queryAllTr().forEach(tr => tr?.refreshSelection?.());
+        this.queryAllTr().forEach(tr => tr.refreshSelection?.());
     }
     refreshChildrenConfig() {
         const thead = this.queryChildEl('sd-thead');
         thead?.refreshConfig?.();
-        this.queryAllTr().forEach(tr => tr?.refreshConfig?.());
+        this.queryAllTr().forEach(tr => tr.refreshConfig?.());
     }
     maybeEmitVirtualReachEnd(start, end) {
         const threshold = Math.max(1, this.virtualEndThreshold);
@@ -417,6 +420,7 @@ const SdTable = class {
         this.vsEnd = end;
         const topHeight = start * this.effectiveRowHeight;
         const bottomHeight = Math.max(0, (this.rowCount - end) * this.effectiveRowHeight);
+        // setSpacersSync 는 sd-tbody 가 host element 에 monkey-patch 하는 internal sync helper.
         const tbody = this.queryChildEl('sd-tbody');
         tbody?.setSpacersSync?.(topHeight, bottomHeight);
         if (rangeChanged) {
@@ -537,7 +541,7 @@ const SdTable = class {
         this.updateRowsVisibility();
     }
     updateRowsVisibility() {
-        this.queryAllTr().forEach(tr => tr?.updateVisibility?.());
+        this.queryAllTr().forEach(tr => tr.updateVisibility?.());
     }
     changeRowsPerPage(perPage) {
         const changedRowsPerPage = perPage != null && perPage !== '' ? Number(perPage) : 0;
@@ -576,7 +580,7 @@ const SdTable = class {
             this.columnWidths = this.columnWidths.map((width, idx) => (idx === index ? newWidth : width));
             const thead = this.queryChildEl('sd-thead');
             thead?.setColumnWidths?.(this.columnWidths);
-            this.queryAllTr().forEach(tr => tr?.setColumnWidths?.(this.columnWidths));
+            this.queryAllTr().forEach(tr => tr.setColumnWidths?.(this.columnWidths));
             const stickyRightCount = this.stickyColumn?.right || 0;
             const visibleColCount = this.columns.filter(c => c.visible !== false).length;
             const isRightStickyEdgeResizer = stickyRightCount > 0 && index === visibleColCount - stickyRightCount;
@@ -631,9 +635,8 @@ const SdTable = class {
     // 경우가 있어, sd-tr의 @State (spansVersion)을 통해 재렌더를 강제한다.
     requestAllTrUpdate() {
         this.queryAllTr().forEach(tr => {
-            const trAny = tr;
-            if (typeof trAny.bumpSpansVersion === 'function') {
-                trAny.bumpSpansVersion();
+            if (typeof tr.bumpSpansVersion === 'function') {
+                tr.bumpSpansVersion();
             }
             else {
                 index.forceUpdate(tr);
@@ -873,25 +876,25 @@ const SdTable = class {
             '--table-body-line-height': `${sdTable_config.TABLE_BODY_TYPOGRAPHY.lineHeight}px`,
             '--table-body-text-decoration': sdTable_config.TABLE_BODY_TYPOGRAPHY.textDecoration,
         };
-        return (index.h(index.Host, { key: '2b7c1eaf862c45c73751af6035a022e8ce0314b4', style: hostStyle }, index.h("div", { key: '35851e539eef8ff69ff03bd31f5d55d95eb8bf7a', class: "sd-table__container", style: {
+        return (index.h(index.Host, { key: '9ee5b528b330f9edf406ff40ec089136c0807653', style: hostStyle }, index.h("div", { key: '9ac6cbba84b7ef7d0897474168748811fb15af92', class: "sd-table__container", style: {
                 '--table-width': this.width,
                 '--table-height': effectiveTableHeight,
                 '--table-container-height': `calc(${effectiveTableHeight} - ${paginationHeight}px)`,
-            } }, index.h("div", { key: 'e3bf5576fd1b1ee9ffab5d240de904204f4288d5', class: {
+            } }, index.h("div", { key: '11f916debfd443e1d243bfa2335dbb0a3cb094bc', class: {
                 'sd-table__wrapper': true,
                 'sd-table__wrapper--radius-use-top': this.radius === 'useTop',
-            } }, index.h("div", { key: 'a67ebcb802a3ed443cca1fc33a00787642e08e84', class: {
+            } }, index.h("div", { key: '3cad3d86f731a3edc0d2b5a680bcaf6ad6be7399', 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: '2cdaff94dab50598c05364930dd3e763a6f2f79a', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, index.h("sd-circle-progress", { key: '49211d7555a38996d3fd9cfce0df50bb626fa1d6', indeterminate: true }))), isNoData && (index.h(index.h.Fragment, null, index.h("div", { key: '3da9d42ecedbdc63858a06040f0e22d265a8183b', class: "sd-table__no-data-header-overlay" }), index.h("div", { key: '20b5d8be682572a4ddbce21b6cd265894d014499', class: "sd-table__no-data" }, index.h("div", { key: 'a024fa084f4a137a70fe176cee6918b4f701fd42', class: "sd-table__no-data-content", ref: el => {
+            } }, 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.noDataContentEl = el;
                 if (el)
                     this.syncNoDataContentObserver();
-            } }, index.h("slot", { key: '9603eefa63fd5bc05dfa132c6be2302497d4c228', name: "no-data" }, index.h("span", { key: '0dad4e143d8251e375f748d1e5e1a77909fab164' }, this.resolvedNoDataLabel)))))), index.h("table", { key: '83325a8970f18bb9cf7a78dc665d16a24edc18da', 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: '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 &&
             this.pagination.rowsPerPage > 0 &&
             this.rowCount > 0 &&
-            !this.useVirtualScroll && (index.h("div", { key: '935b0f916cbc1de29a7f6b3805a5a3c25eaba467', class: "sd-table__pagination" }, index.h("sd-pagination", { key: '7faad5d0b2efe652a9ed989910551aa8bc5592ec', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (index.h("sd-select", { key: 'd514c41459a60ac47ffcd476a635c47386232c50', value: this.useInternalPagination
+            !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.innerRowsPerPage
                 : this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", emitValue: true, onSdUpdate: e => {
                 if (!this.isRowsPerPageValue(e.detail))

package/dist/cjs/{sd-table.config-B7psrvV4.js → sd-table.config-DqgNOdXO.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var component_table = require('./component.table-qOFez3z3.js');
-var system = require('./system-VmZRYp6V.js');
+var system = require('./system-wrt-tcOq.js');
 
 // ── Header Tokens ──
 const TABLE_HEADER_LAYOUT = {

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

@@ -188,7 +188,7 @@ const SdTabs = class {
         };
     }
     render() {
-        return (index.h("div", { key: '880f1aa80c29f2d578ffe2d5e5e5e0c008c898d3', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index$1) => {
+        return (index.h("div", { key: '181916a72512a6802a06dc56fca418a806d18a0e', 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

@@ -186,6 +186,8 @@ const SdTag = class {
     name = 'square_sm_grey';
     label = '';
     icon;
+    // 아이콘이 좌측 배치되는 게 자연스러운 default. prop 이름 변경(isRight 등)은 public API breaking 이라 별도 이슈로 분리.
+    // eslint-disable-next-line stencil/ban-default-true
     isLeft = true;
     componentWillLoad() {
         this.name = this.name ?? 'square_sm_grey';
@@ -207,7 +209,7 @@ const SdTag = class {
     render() {
         const config = this.resolvedConfig;
         const iconNode = this.renderIcon(config.icon, config.iconSize);
-        return (index.h("span", { key: '57f3c3f9ad53059fabff205cb44ffa3d1da9a711', class: "sd-tag", style: {
+        return (index.h("span", { key: 'c8b8b88e2c83401bb9d3e05004b0517d7e4a3a6a', class: "sd-tag", style: {
                 '--sd-tag-background': config.background,
                 '--sd-tag-content': config.content,
                 '--sd-tag-height': config.height,
@@ -217,7 +219,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: '3360f36d18f073cd24699b6b8db2e731fda351ac', 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: '67094b09ab1d7b7e865c9f6b8017f8c5c3f8274a', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
     }
 };
 SdTag.style = sdTagCss();

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

@@ -158,7 +158,7 @@ const SdTd = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '505b602b609050870e7e80df9157dbc50d0cb8c1', class: { [`align-${this.align}`]: Boolean(this.align) } }, index.h("slot", { key: '9910f02d98ce5e115b2a380954dd0a994f9f1c12' })));
+        return (index.h(index.Host, { key: '91c033a0c4c3a6c3c9b29c0be99912c5ac1283ee', class: { [`align-${this.align}`]: Boolean(this.align) } }, index.h("slot", { key: 'abfbc911c707012bc7d924e328ba07d71b96f9a9' })));
     }
     static get watchers() { return {
         "field": [{

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

@@ -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: 'bc3c9591b6453eed7df462841e29784c29b3aeef', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
+        return (index.h("div", { key: 'c80d46b63f50591d4d92b810c0625701e4741e3a', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
                 this.expanded = true;
                 this.pauseTimers();
             }, onMouseLeave: () => {

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

@@ -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: 'db3ffaf51dc96c39c05558017f25929c679a59df', style: {
+        return (index.h("div", { key: '82579581897d7845b95456ccb5e2a1745c84bcc5', style: {
                 '--sd-toast-bg': typeConfig.bg,
                 '--sd-toast-text': typeConfig.content,
                 '--sd-toast-icon': iconColor,
                 '--sd-toast-link': linkColor,
-            } }, index.h("div", { key: '92344f5bb95b0d4787591207f2e017d7dd177091', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: '991db58b2cb019dd3a787e000e9d8813014bbb09', class: "sd-toast__icon" }, index.h("sd-icon", { key: '24d53cd77fdea82ec07663a8968493ec2b794751', name: this.icon, size: iconSize, color: iconColor }))), index.h("div", { key: '70cfad4ef389cca798be9baeac99bfc41efcc615', class: "sd-toast__content" }, index.h("span", { key: '5927023435b17dc25ee07630fc4ae4568aadd9b9', class: "sd-toast__message" }, this.message)), this.link && (index.h("a", { key: '410c024fd81ebcc78175c1855a86f590566d1a81', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (index.h("sd-button", { key: 'd85287e7ef796a11f850a0ce5cde87f5881fa5c9', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (index.h("sd-ghost-button", { key: '55a6bf6457bd89254f6eb01072d46a0edbb8b510', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
+            } }, 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() })))));
     }
 };
 SdToast.style = sdToastCss();

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

@@ -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: 'b16577aa25863a9dc337314d9059328799c1cd1e', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, index.h("input", { key: '6130825b74df8a573f4e062671fd694508759e82', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        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 })));
     }
 };
 SdToggle.style = sdToggleCss();

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

@@ -19,7 +19,18 @@ const color = {
 		strong: "#006AC1"},
 	grey: {
 		strong: "#737373"}};
+const shadow = {
+	spread: {
+		md: {
+			x: "0",
+			y: "0",
+			blur: "24",
+			spread: "0",
+			color: "rgba(34,34,34,0.2)"}
+	}};
 var systemTokens = {
-	color: color};
+	color: color,
+	shadow: shadow
+};
 
 exports.systemTokens = systemTokens;

package/dist/collection/collection-manifest.json

@@ -16,11 +16,12 @@
     "components/sd-badge/sd-badge.js",
     "components/sd-barcode-input/sd-barcode-input.js",
     "components/sd-calendar/sd-calendar.js",
+    "components/sd-callout/sd-callout.js",
+    "components/sd-icon/sd-icon.js",
     "components/sd-card/sd-card.js",
     "components/sd-chip/sd-chip.js",
     "components/sd-circle-progress/sd-circle-progress.js",
     "components/sd-confirm-modal/sd-confirm-modal.js",
-    "components/sd-icon/sd-icon.js",
     "components/sd-tag/sd-tag.js",
     "components/sd-date-picker/sd-date-picker-trigger/sd-date-picker-trigger.js",
     "components/sd-date-picker/sd-date-picker.js",

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

@@ -10,9 +10,11 @@ sd-calendar .sd-calendar {
   padding: var(--calendar-padding);
   background: var(--calendar-bg);
   border-radius: var(--calendar-radius);
-  box-shadow: 2px 2px 12px 2px rgba(0, 0, 0, 0.2);
   user-select: none;
 }
+sd-calendar .sd-calendar--elevated {
+  box-shadow: 2px 2px 12px 2px rgba(0, 0, 0, 0.2);
+}
 sd-calendar .sd-calendar__header {
   display: flex;
   align-items: center;

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

@@ -6,6 +6,7 @@ export class SdCalendar {
     value = null;
     selectable;
     events;
+    elevated = false;
     currentYear;
     currentMonth;
     update;
@@ -172,7 +173,7 @@ export class SdCalendar {
         const eventMap = this.eventMap;
         const legend = this.legendItems;
         const hasEvents = (this.events?.length ?? 0) > 0;
-        return (h("div", { key: '79cfdb58f8d44085c87cfea6458e60654bfa09bb', class: "sd-calendar", style: cssVars }, h("div", { key: '065620bcd155de11ef2272720de57ef6fcd9fd20', class: "sd-calendar__header" }, h("div", { key: 'ae27c8fe51c44137932b18cc83b64dcce7e2bbaa', class: "sd-calendar__nav-group" }, h("sd-ghost-button", { key: '8207f6d77705999419f451db032c059564ea0c17', ariaLabel: "prevYear", size: "xxs", icon: "chevronLeft", onClick: this.goPrevYear }), h("span", { key: 'b5bf63784dd06c3ce5a4d4c5514fea22efb08793', class: "sd-calendar__label" }, this.currentYear), h("sd-ghost-button", { key: '14512de68825e3b158704c3084306029ade8fcc1', ariaLabel: "nextYear", size: "xxs", icon: "chevronRight", onClick: this.goNextYear })), h("span", { key: 'e37eb90d72c2e64b8ebb1da4ddf3fccb7ff18cc3', class: "sd-calendar__divider", "aria-hidden": "true" }), h("div", { key: '07b1696b663ddb992e5a8d8b5ab98205ba136d9d', class: "sd-calendar__nav-group sd-calendar__nav-group-month" }, h("sd-ghost-button", { key: 'b742889a44643d3e4d3b6da90784923c40e5a07f', ariaLabel: "prevMonth", size: "xxs", icon: "chevronLeft", onClick: this.goPrevMonth }), h("span", { key: 'c97402106312c3a6eb220798263ba818419e7d27', class: "sd-calendar__label sd-calendar__label-month" }, this.currentMonth, "\uC6D4"), h("sd-ghost-button", { key: '55411b1328acb781d71a7a84996d2a29886612cd', ariaLabel: "nextMonth", size: "xxs", icon: "chevronRight", onClick: this.goNextMonth }))), h("div", { key: 'd10b03d31be412b545999d7e70bd9a349e5f1880', class: "sd-calendar__week" }, WEEK_LABELS.map(label => (h("span", { key: label, class: "sd-calendar__week-cell" }, label)))), h("div", { key: '0b8f82db3753fe08435b07dee695d49a192786c0', class: "sd-calendar__grid" }, this.cells.map(cell => {
+        return (h("div", { key: '0ed0317b3cecffea4015de8688888e0ab2a38586', class: { 'sd-calendar': true, 'sd-calendar--elevated': this.elevated }, style: cssVars }, h("div", { key: 'b915f275a31617711d06d98c8a4d9369ddd36af5', class: "sd-calendar__header" }, h("div", { key: 'cd3b625e4e26af4b11f6af8b22c02099e8ab68a5', class: "sd-calendar__nav-group" }, h("sd-ghost-button", { key: 'e0ebfed48a7fdb61fd082371e7247176c02a8fb1', ariaLabel: "prevYear", size: "xxs", icon: "chevronLeft", onClick: this.goPrevYear }), h("span", { key: '6bfebc94dce54ca472ad5b3e03a7630e32676c3f', class: "sd-calendar__label" }, this.currentYear), h("sd-ghost-button", { key: '2e42ad52cd7d1b5d3502d578347c997910f3efc3', ariaLabel: "nextYear", size: "xxs", icon: "chevronRight", onClick: this.goNextYear })), h("span", { key: '95be4ab5e03d7378e82006221f190ffd55659cf1', class: "sd-calendar__divider", "aria-hidden": "true" }), h("div", { key: 'edce7cf91a873cdaeed68e50372bdfa20af7507d', class: "sd-calendar__nav-group sd-calendar__nav-group-month" }, h("sd-ghost-button", { key: '9ba274e9db32177d30d8c218303384855b7a3f60', ariaLabel: "prevMonth", size: "xxs", icon: "chevronLeft", onClick: this.goPrevMonth }), h("span", { key: 'bc113063e769fe12c2a39732cd82060752b7d9eb', class: "sd-calendar__label sd-calendar__label-month" }, this.currentMonth, "\uC6D4"), h("sd-ghost-button", { key: '52cfde203e06334c5eee85abc9d82d6889bf511c', ariaLabel: "nextMonth", size: "xxs", icon: "chevronRight", onClick: this.goNextMonth }))), h("div", { key: '9ae80aee03a4e6392a1d9a4ef28e565db20faea3', class: "sd-calendar__week" }, WEEK_LABELS.map(label => (h("span", { key: label, class: "sd-calendar__week-cell" }, label)))), h("div", { key: '7c47907311ea24f1af030931b8efd11955e55436', class: "sd-calendar__grid" }, this.cells.map(cell => {
             const isSelected = cell.inCurrentMonth && this.value !== '' && this.value === cell.date;
             const isToday = cell.inCurrentMonth && today === cell.date;
             const isDisabled = cell.inCurrentMonth && this.isDisabled(cell.date);
@@ -185,8 +186,8 @@ export class SdCalendar {
                     'sd-calendar__day--disabled': isDisabled,
                 }, disabled: !cell.inCurrentMonth || isDisabled, tabindex: !cell.inCurrentMonth ? -1 : undefined, "aria-hidden": !cell.inCurrentMonth ? 'true' : undefined, onClick: () => cell.inCurrentMonth && this.handleDayClick(cell) }, h("span", { class: "sd-calendar__day-circle" }, cell.inCurrentMonth ? cell.day : ''), hasEvents && (h("span", { class: "sd-calendar__dot-row", "aria-hidden": "true" }, dayEvents?.map((ev, i) => (h("span", { key: `${ev.color}|${ev.label}|${i}`, class: "sd-calendar__dot", style: { backgroundColor: ev.color } })))))));
         })), legend.length > 0 && [
-            h("span", { key: 'a837c5956da658561fcbd2e646b0abbb0fa84a20', class: "sd-calendar__divider-bottom", "aria-hidden": "true" }),
-            h("div", { key: '190b9947e5ecd627fad03b40c58c2e0c8719daaa', class: "sd-calendar__legend" }, legend.map(item => (h("span", { key: `${item.color}|${item.label}`, class: "sd-calendar__legend-item" }, h("span", { class: "sd-calendar__legend-dot", style: { backgroundColor: item.color }, "aria-hidden": "true" }), h("span", { class: "sd-calendar__legend-label" }, item.label))))),
+            h("span", { key: '4ba064cad3188db8342f51ca017e4bf5af8aa460', class: "sd-calendar__divider-bottom", "aria-hidden": "true" }),
+            h("div", { key: 'ac132a1f1f948e618ee75d4c01a1c99a0dfc2c0a', class: "sd-calendar__legend" }, legend.map(item => (h("span", { key: `${item.color}|${item.label}`, class: "sd-calendar__legend-item" }, h("span", { class: "sd-calendar__legend-dot", style: { backgroundColor: item.color }, "aria-hidden": "true" }), h("span", { class: "sd-calendar__legend-label" }, item.label))))),
         ]));
     }
     static get is() { return "sd-calendar"; }
@@ -262,6 +263,26 @@ export class SdCalendar {
                 },
                 "getter": false,
                 "setter": false
+            },
+            "elevated": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "elevated",
+                "defaultValue": "false"
             }
         };
     }

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

@@ -0,0 +1,45 @@
+import calloutTokens from "../../tokens/generated/component.callout.json";
+const { callout } = calloutTokens;
+export const CALLOUT_LAYOUT = {
+    radius: `${callout.radius}px`,
+    borderWidth: `${callout.border.width}px`,
+    bodyPaddingX: `${callout.body.paddingX}px`,
+    bodyPaddingY: `${callout.body.paddingY}px`,
+    bodyGap: `${callout.body.gap}px`,
+    titlePaddingX: `${callout.danger.title.paddingX}px`,
+    titleGap: `${callout.danger.title.gap}px`,
+    titleIconSize: Number(callout.danger.title.icon),
+};
+export const CALLOUT_TYPOGRAPHY = {
+    body: {
+        fontFamily: callout.body.typography.fontFamily,
+        fontSize: `${callout.body.typography.fontSize}px`,
+        fontWeight: callout.body.typography.fontWeight,
+        lineHeight: `${callout.body.typography.lineHeight}px`,
+    },
+    title: {
+        fontFamily: callout.danger.title.typography.fontFamily,
+        fontSize: `${callout.danger.title.typography.fontSize}px`,
+        fontWeight: callout.danger.title.typography.fontWeight,
+        lineHeight: `${callout.danger.title.typography.lineHeight}px`,
+    },
+};
+export const CALLOUT_TYPE_CONFIG = {
+    default: {
+        bg: callout.default.bg,
+        border: callout.default.border,
+        content: callout.default.content,
+    },
+    danger: {
+        bg: callout.danger.bg,
+        border: callout.danger.border,
+        content: callout.danger.content,
+        titleBg: callout.danger.title.bg,
+        titleColor: callout.danger.title.color,
+    },
+};
+export const DANGER_TITLE_LABEL = '주의사항';
+export const TYPE_ICON = {
+    default: undefined,
+    danger: 'warningFill',
+};

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

@@ -0,0 +1,87 @@
+@charset "UTF-8";
+sd-callout {
+  display: block;
+  width: fit-content;
+}
+sd-callout .sd-callout {
+  display: inline-flex;
+  align-items: stretch;
+  width: fit-content;
+  border: var(--sd-callout-border-width) solid var(--sd-callout-border);
+  border-radius: var(--sd-callout-radius);
+  background-color: var(--sd-callout-bg);
+  color: var(--sd-callout-content);
+  overflow: hidden;
+}
+sd-callout .sd-callout__title {
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: center;
+  justify-content: center;
+  gap: var(--sd-callout-title-gap);
+  padding: 8px var(--sd-callout-title-padding-x);
+  background-color: var(--sd-callout-title-bg);
+  color: var(--sd-callout-title-color);
+  font-family: var(--sd-callout-title-font-family);
+  font-size: var(--sd-callout-title-font-size);
+  font-weight: var(--sd-callout-title-font-weight);
+  line-height: var(--sd-callout-title-line-height);
+  flex-shrink: 0;
+}
+sd-callout .sd-callout__title-text {
+  white-space: nowrap;
+}
+sd-callout .sd-callout__body {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: var(--sd-callout-body-gap);
+  padding: var(--sd-callout-body-padding-y) var(--sd-callout-body-padding-x);
+  font-family: var(--sd-callout-body-font-family);
+  font-size: var(--sd-callout-body-font-size);
+  font-weight: var(--sd-callout-body-font-weight);
+  line-height: var(--sd-callout-body-line-height);
+}
+sd-callout .sd-callout__list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: var(--sd-callout-body-gap);
+}
+sd-callout .sd-callout__list__item {
+  display: flex;
+  align-items: flex-start;
+  color: var(--sd-callout-content);
+}
+sd-callout .sd-callout__list__item p {
+  margin: 0;
+  padding: 0;
+  flex: 1;
+  min-width: 0;
+  word-break: break-word;
+}
+sd-callout .sd-callout__list__item::before {
+  display: block;
+  flex-shrink: 0;
+  text-align: center;
+  color: var(--sd-callout-content);
+  font-size: var(--sd-callout-body-font-size);
+  font-weight: var(--sd-callout-body-font-weight);
+  line-height: var(--sd-callout-body-line-height);
+}
+sd-callout .sd-callout__list__item--depth-1::before {
+  content: "-";
+  width: 24px;
+}
+sd-callout .sd-callout__list__item--depth-2 {
+  padding-left: 32px;
+}
+sd-callout .sd-callout__list__item--depth-2::before {
+  content: "•";
+  width: 24px;
+}