@sellmate/design-system 1.8.0 → 1.10.0

package/dist/collection/components/sd-select/sd-select-list-item-search/sd-select-list-item-search.js

@@ -41,15 +41,15 @@ export class SdSelectListItemSearch {
             clearTimeout(this.debounceTimer);
     }
     render() {
-        return (h("div", { key: '8c0c85ac9c382e2978e32924c33a580a4fac3485', class: {
+        return (h("div", { key: '6cf78c7d616dc21a7a6e806c184322d12cacb50d', class: {
                 'sd-select-list-item-search': true,
                 'sd-select-list-item-search--scrolled': this.isScrolled,
-            } }, h("div", { key: '92425ff6eab4cf16f96f45dabb8f07c27ad9e747', class: "sd-select-list-item-search__inner" }, h("sd-icon", { key: '253a40e4e624e828e351d08c1f05fb2d098c8b9b', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), h("input", { key: 'b38735ae6e75b9fe19ceb3038c5b873ad42760ef', ref: el => {
+            } }, h("div", { key: 'dd9fa44fed1f3ec7a222dacaa710cdf32ddbe6fc', class: "sd-select-list-item-search__inner" }, h("sd-icon", { key: '2d65a81b7b6160ac4e93016adea0da43d5d01ec8', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), h("input", { key: '0d5c4bb09778518aa17a210a2d1a9eb620a1dd7b', 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() }), h("button", { key: '8045fef5d1821ea60ac261ee07f7eddf8a7a189d', 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() }), h("button", { key: 'e9708437f310788bf8b9a4d358dea9b83cc88ed8', 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' }, h("sd-icon", { key: '110c0420fd17c51055cfc1815a528cf7c385d91e', name: "close", size: 12, color: "#888888" })))));
+            }, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, h("sd-icon", { key: 'ed8b1c93809f823205f357b059a8b556e0278b1c', name: "close", size: 12, color: "#888888" })))));
     }
     static get is() { return "sd-select-list-item-search"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-select/sd-select-listbox/sd-select-listbox.js

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { LIST_BOX_LAYOUT, SEARCH_THRESHOLD, EMPTY_MESSAGE, countLeaves, filterTree, } from "../sd-select.config";
+import { LIST_BOX_LAYOUT, SEARCH_THRESHOLD, EMPTY_MESSAGE, countLeaves, filterTree, isHtmlLabel, extractText, } from "../sd-select.config";
 export class SdSelectListbox {
     type = 'default';
     options = [];
@@ -67,7 +67,10 @@ export class SdSelectListbox {
         if (this.isDepth)
             return filterTree(this.options, this.searchKeyword);
         const keyword = this.searchKeyword.toLowerCase();
-        return this.options.filter(o => o.label.toLowerCase().includes(keyword));
+        return this.options.filter(o => {
+            const labelText = isHtmlLabel(o.label) ? extractText(o.label) : o.label;
+            return labelText.toLowerCase().includes(keyword);
+        });
     }
     get isEmpty() {
         if (this.isDepth)
@@ -348,9 +351,9 @@ export class SdSelectListbox {
             '--listbox-max-height': this.maxHeight ?? '260px',
             '--listbox-radius': `${LIST_BOX_LAYOUT.radius}px`,
         };
-        return (h("div", { key: '49f10bc8511fedcc0224729593498273088e16a3', class: "sd-select-listbox", style: cssVars }, this.showSearch && (h("sd-select-list-item-search", { key: '2eab7f77c0e900f90a79b2b2e9a7e60da2349409', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), h("div", { key: '46407c47a1d24ee8d997060c2b54f2443c163700', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
+        return (h("div", { key: '6c2cbad13f8aaa8c0552068c7cbc35a147bee77d', class: "sd-select-listbox", style: cssVars }, this.showSearch && (h("sd-select-list-item-search", { key: '052d783e27e2458aa397c77fe891dad4a440f09e', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), h("div", { key: 'bba95f3c4475d01a65562ba079c8666e3325195d', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
                 this.listEl = el;
-            } }, this.showSelectAll && (h("sd-select-list-item", { key: '9c4a35e6515fb9bc9cd4feafc69a44c432b75139', 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 ? (h("div", { class: "sd-select-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (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 && (h("sd-select-list-item", { key: '2f55bbacbed71952903599db0739773176ac55fd', 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 ? (h("div", { class: "sd-select-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (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 is() { return "sd-select-listbox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/sd-select/sd-select-trigger/sd-select-trigger.js

@@ -1,5 +1,6 @@
 import { h } from "@stencil/core";
-import { SELECT_LAYOUT, SELECT_TYPOGRAPHY, SELECT_COLORS } from "../sd-select.config";
+import { SELECT_LAYOUT, SELECT_TYPOGRAPHY, SELECT_COLORS, isHtmlLabel } from "../sd-select.config";
+import { sanitizeInlineHtml } from "../../../utils/html/sanitize-inline-html";
 export class SdSelectTrigger {
     displayText = '';
     placeholder = '선택';
@@ -42,7 +43,7 @@ export class SdSelectTrigger {
                 ? SELECT_COLORS.icon.disabled
                 : SELECT_COLORS.icon.default,
         };
-        return (h("div", { key: '3a97ed909e3088528714682050a3986081e19433', ref: el => {
+        return (h("div", { key: 'b5a4f750c00889d0d9b985211063fc6b20bc2e38', 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,
@@ -53,7 +54,7 @@ export class SdSelectTrigger {
                     e.preventDefault();
                     this.handleClick();
                 }
-            }, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("div", { key: '986faba7d79980f0bcd10fff32495d2100e1805f', class: "sd-select-trigger__content" }, h("span", { key: 'c51b268186de7cdabcf06ac3d540ccb570c9e865', class: "sd-select-trigger__text" }, hasValue ? this.displayText : (this.placeholder ?? '선택')), h("sd-icon", { key: '8a03b400d5aef2e0ca9aeb4b1f6122db2932455a', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
+            }, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("div", { key: 'be0b61c0550618602ef016504fa1672f7520fa93', class: "sd-select-trigger__content" }, hasValue && isHtmlLabel(this.displayText) ? (h("span", { class: "sd-select-trigger__text", ref: el => el && (el.innerHTML = sanitizeInlineHtml(this.displayText)) })) : (h("span", { class: "sd-select-trigger__text" }, hasValue ? this.displayText : (this.placeholder ?? '선택'))), h("sd-icon", { key: '9d60c3eeae54ce6ed9609534e3530d0349d1a3ff', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
                 'sd-select-trigger__icon': true,
                 'sd-select-trigger__icon--open': this.isOpen,
             } }))));

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

@@ -3,17 +3,17 @@ import listItemTokens from "../../tokens/generated/component.listItem.json";
 import listBoxTokens from "../../tokens/generated/component.listBox.json";
 // ── Select Trigger Tokens ──
 export const SELECT_LAYOUT = {
-    height: selectTokens.select.height,
-    radius: selectTokens.select.radius,
-    borderWidth: selectTokens.select.borderWidth,
-    paddingX: selectTokens.select.paddingX,
-    gap: selectTokens.select.gap,
-    iconSize: selectTokens.select.size.icon,
+    height: selectTokens.select.sm.height,
+    radius: selectTokens.select.sm.radius,
+    borderWidth: selectTokens.select.sm.borderWidth,
+    paddingX: selectTokens.select.sm.paddingX,
+    gap: selectTokens.select.sm.gap,
+    iconSize: selectTokens.select.sm.icon,
 };
 export const SELECT_TYPOGRAPHY = {
-    fontSize: selectTokens.select.typography.fontSize,
-    lineHeight: selectTokens.select.typography.lineHeight,
-    fontWeight: selectTokens.select.typography.fontWeight,
+    fontSize: selectTokens.select.sm.typography.fontSize,
+    lineHeight: selectTokens.select.sm.typography.lineHeight,
+    fontWeight: selectTokens.select.sm.typography.fontWeight,
 };
 export const SELECT_COLORS = {
     icon: {
@@ -85,6 +85,12 @@ export const SEARCH_DEBOUNCE_MS = 1000;
 export const MAX_DROPDOWN_WIDTH = '640px';
 export const EMPTY_MESSAGE = '표시할 항목이 없습니다.';
 // ── Utilities ──
+export function isHtmlLabel(label) {
+    return /<[a-z][\s\S]*>/i.test(label);
+}
+export function extractText(html) {
+    return html.replace(/<[^>]*>/g, '');
+}
 export function countLeaves(options) {
     return options.reduce((sum, option) => {
         if (option.children) {
@@ -96,7 +102,8 @@ export function countLeaves(options) {
 export function filterTree(options, keyword) {
     const lowerKeyword = keyword.toLowerCase();
     return options.reduce((acc, option) => {
-        const selfMatch = option.label.toLowerCase().includes(lowerKeyword);
+        const labelText = isHtmlLabel(option.label) ? extractText(option.label) : option.label;
+        const selfMatch = labelText.toLowerCase().includes(lowerKeyword);
         if (option.children) {
             // 그룹: 자식은 항상 추가로 필터링한다.
             // - 자식 중 일치하는 게 있으면 그 자식들만 노출

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

@@ -93,8 +93,7 @@ export class SdSelect {
             return this.value.label ?? '';
         }
         const flat = this.flattenOptions(this.options);
-        const found = flat.find(o => o.value === this.value);
-        return found?.label ?? '';
+        return flat.find(o => o.value === this.value)?.label ?? '';
     }
     flattenOptions(options) {
         return options.flatMap(o => (o.children ? this.flattenOptions(o.children) : [o]));
@@ -254,15 +253,15 @@ export class SdSelect {
                 this.closeDropdown();
             },
         };
-        return (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: () => {
+        return (h("sd-field", { key: 'd3c3175067494715963592806a150bebadd8970c', 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;
-            } }, h("div", { key: 'be596d399856ed966408ba1525fea9dbdf8fcc7e', class: "sd-select", ref: el => {
+            } }, h("div", { key: 'c291b661a968375c341d26ac48f7ff7fd4947e3e', class: "sd-select", ref: el => {
                 this.triggerRef = el;
-            } }, h("sd-select-trigger", { key: 'f8a29b1ac2469c60af8c7101d05157674566f00f', ref: el => {
+            } }, h("sd-select-trigger", { key: '45da184f72f989d9c6be05479fec7a616f168ddf', 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) && (h("sd-portal", { key: '3cef3f95f69b09d0e4e8f6b01615df4cca031cff', ...portalProps }, 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) })))));
+            }, 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) && (h("sd-portal", { key: 'bd7a612cf9ef74e157336a8de0170cebb61074dc', ...portalProps }, h("sd-select-listbox", { key: '8117fab3ef6b2f5f77e74a234c6b21dfc2549df1', 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 is() { return "sd-select"; }
     static get originalStyleUrls() {

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

@@ -40,7 +40,7 @@ export class SdSwitch {
             '--sd-switch-line-height': `${SWITCH_TYPOGRAPHY.lineHeight}px`,
             '--sd-switch-text-decoration': SWITCH_TYPOGRAPHY.textDecoration,
         };
-        return (h("label", { key: '04674e9fc781ac58b2e68ae30cb90c948de8b5e3', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, h("input", { key: 'b87970c38aa2ccbe3d8f91414c96c2f05aaaa818', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), h("div", { key: 'd87bcaf8b16d17401215dd962875dc585f747d65', class: "sd-switch__track" }, h("div", { key: '408a034cd6b063d9cd968f647995cc77dfdd0577', class: "sd-switch__knob" })), this.label && h("span", { key: '58d7ab18329007eac2e23b0fcda66a841e4df0c2', class: "sd-switch__label" }, this.label)));
+        return (h("label", { key: '54ebe92b29a80537e2e4380ffe096a252f883d10', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, h("input", { key: 'd18abbbf293434f07ae7dfa18b983b47cac1b774', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), h("div", { key: '76fef910e632b541c0b33c508e6001529df5614f', class: "sd-switch__track" }, h("div", { key: 'a66f4ecca5787f00febe19216a93ec62916e0541', class: "sd-switch__knob" })), this.label && h("span", { key: '948d2b7afc6e171ee329752cb85f8e361f6bbed8', class: "sd-switch__label" }, this.label)));
     }
     static get is() { return "sd-switch"; }
     static get originalStyleUrls() {

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

@@ -818,24 +818,24 @@ export class SdTable {
             '--table-selectable-width': `${TABLE_SELECTABLE_COLUMN_WIDTH}px`,
             '--table-host-height': hostHeight,
         };
-        return (h(Host, { key: '57f92f3d10b928ca964c2ac9917f7dd64991591f', style: hostStyle }, h("div", { key: 'ea3de705492e1c6c7f99d251e9d6e07136c72ce1', class: "sd-table__container", style: {
+        return (h(Host, { key: '164ba96033be0195fa50e3d4d684059b9c471479', style: hostStyle }, h("div", { key: '2f1a1be73f86c72e7caa46981ee691d29bb237c7', class: "sd-table__container", style: {
                 '--table-width': this.width,
                 '--pagination-height': `${paginationHeight}px`,
-            } }, h("div", { key: '12ef88f9b81c94980806038924b194d143d3895a', class: {
+            } }, h("div", { key: '16976d24d4c21714183f9691b06c503b86388c54', class: {
                 'sd-table__wrapper': true,
                 'sd-table__wrapper--use-top': this.useTop,
-            } }, h("div", { key: 'b592db122ecf7f22903c9a49ebfb36138f7e18d6', class: {
+            } }, h("div", { key: 'fdd0dcfbff4c3a5e441d720d2e1a39a69c51f9cf', class: {
                 'sd-table__scroll-container': true,
                 'sd-table__scroll-container--loading': this.isLoading,
                 'sd-table__scroll-container--no-data': isNoData,
-            } }, this.isLoading && (h("div", { key: '5e6badf9334ed7390f19d3c5df7335ea0efa25c4', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, h("sd-circle-progress", { key: '70bd57550b67c5d737bf8c6e7984703b963637f9', indeterminate: true }))), isNoData && (h(h.Fragment, null, h("div", { key: '280a829ddf5275c62a8310d3fe6914863e6b79d5', class: "sd-table__no-data-header-overlay" }), h("div", { key: '35f7584702b61c076ebcf61d16fedb30390e7cca', class: "sd-table__no-data" }, h("div", { key: 'a67af0bf322ebfa55fc515a63b6c299676fa4aa5', class: "sd-table__no-data-content", ref: el => {
+            } }, this.isLoading && (h("div", { key: 'facb26c0d1651d4a2a6e0dee5c1b8ca73586de89', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, h("sd-circle-progress", { key: '844b92fc9fc38f95d51092b698b67b685bcba076', indeterminate: true }))), isNoData && (h(h.Fragment, null, h("div", { key: '458c8e24b85c0e7c99afe940c3d5856e63bc582a', class: "sd-table__no-data-header-overlay" }), h("div", { key: 'bd29a77ac11da7e5d513955a4c4baa0dd89a623d', class: "sd-table__no-data" }, h("div", { key: '7db0e8e3888e97638f3c78d560e844cc0f8b2944', class: "sd-table__no-data-content", ref: el => {
                 this.noDataContentEl = el;
                 if (el)
                     this.syncNoDataContentObserver();
-            } }, h("slot", { key: '5bc8cf68c461359358edddfa085ee4121d6a3c24', name: "no-data" }, h("span", { key: '01cb29dc03a084530ef47170515066da65110aa3' }, this.resolvedNoDataLabel)))))), h("table", { key: 'e0f05c5ceab477809b0b26ddf2dc7a3fc5963076', class: this.tableClasses }, this.autoThead ? (h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }, h("sd-thead", { rows: this.rows ?? [] }))) : (h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange })), this.autoTbody ? (h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }, h("sd-tbody", { rows: this.rows ?? [] }, this.renderAutoRows()))) : (h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }))))), this.pagination &&
+            } }, h("slot", { key: 'fa175041907d4af7e5e0db7cad6e9a3e16e96901', name: "no-data" }, h("span", { key: '3fae3a23d86dc543502f74574a4b5c3f026b9992' }, this.resolvedNoDataLabel)))))), h("table", { key: '9ae98e0697e045b308f7e584fb496692acade8ba', class: this.tableClasses }, this.autoThead ? (h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }, h("sd-thead", { rows: this.rows ?? [] }))) : (h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange })), this.autoTbody ? (h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }, h("sd-tbody", { rows: this.rows ?? [] }, this.renderAutoRows()))) : (h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }))))), this.pagination &&
             this.pagination.rowsPerPage > 0 &&
             this.rowCount > 0 &&
-            !this.useVirtualScroll && (h("div", { key: '6f06c639cfc61e6be21ca9b598054ad17a07b879', class: "sd-table__pagination" }, h("sd-pagination", { key: '2edf2f1b0db1a34b080c82c99da5ff416fb6a325', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (h("sd-select", { key: '427db7075794819ebe0ce11e063480e87defc8b9', value: this.useInternalPagination
+            !this.useVirtualScroll && (h("div", { key: 'a0da779351490332035ec784bc301ea2cb017afd', class: "sd-table__pagination" }, h("sd-pagination", { key: '8c3bcd06e1644afaebabd3762cdb03900f727142', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (h("sd-select", { key: '4bff157ac6e0fb5efe03663d4bbf58d67f8308b6', value: this.useInternalPagination
                 ? this.innerRowsPerPage
                 : this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", emitValue: true, onSdUpdate: e => {
                 if (!this.isRowsPerPageValue(e.detail))

package/dist/collection/components/sd-table/sd-tbody/sd-tbody.js

@@ -45,9 +45,9 @@ export class SdTbody {
         }
     }
     render() {
-        return (h(Host, { key: 'cee6094ac768af309c39500cb337d8516de6aabe', slot: `${this.tableId}-body` }, h("tbody", { key: '50d46c6b102900b18a96c1e345afb4185e59e0ae', class: { tbody: true } }, [
+        return (h(Host, { key: 'bc05db24c914d72f0480e0d6d9b594e21cf03153', slot: `${this.tableId}-body` }, h("tbody", { key: 'ba4eb8fcbc184bcd245f47093ca5acfacc3aebf3', class: { tbody: true } }, [
             this.topSpacerHeight > 0 && (h("tr", { key: "spacer-top", class: "tbody__spacer", style: { height: `${this.topSpacerHeight}px`, display: 'block' } })),
-            h("slot", { key: 'd4f8057c143b2f91146831fac2b4ba1162d36aeb' }),
+            h("slot", { key: '3c9d25b226dfb20b044a718416d3cdda13eff798' }),
             this.bottomSpacerHeight > 0 && (h("tr", { key: "spacer-bottom", class: "tbody__spacer", style: { height: `${this.bottomSpacerHeight}px`, display: 'block' } })),
         ])));
     }

package/dist/collection/components/sd-table/sd-td/sd-td.js

@@ -150,7 +150,7 @@ export class SdTd {
         }
     }
     render() {
-        return (h(Host, { key: '1d7123e1f35cfb513a1fa89b4d60f8dde7715a2f', class: { [`align-${this.align}`]: Boolean(this.align) } }, h("slot", { key: 'f7b9266106a6df93e2101ca9a324035960281a6f' })));
+        return (h(Host, { key: '95f97474c4d00a35085c558bf43593322a9f69e7', class: { [`align-${this.align}`]: Boolean(this.align) } }, h("slot", { key: 'f67d1e8b125c10446dac3abdfa0da01bfb83f470' })));
     }
     static get is() { return "sd-td"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-table/sd-thead/sd-thead.js

@@ -158,16 +158,16 @@ export class SdThead {
             '--table-border-color': TABLE_BORDER.color,
             '--table-border-width': `${TABLE_BORDER.width}px`,
         };
-        return (h(Host, { key: '2b949f43561a2cd36b82de324d3d8c0d8a1d8431', slot: `${this.tableId}-head`, style: headStyle }, h("thead", { key: '45918bfb1dc44bb0f45a0f1646bf2276b1ca74ec', class: {
+        return (h(Host, { key: '822abd0e5ff71d9e55b6478d56c9277009983deb', slot: `${this.tableId}-head`, style: headStyle }, h("thead", { key: '7c690c49eb0d9be48637b8a6e92287fac22bf377', class: {
                 'thead': true,
                 'thead--sticky': this._stickyHeader,
-            } }, h("tr", { key: '3802f86a730041ca405071b243a99c28e04558d2', class: "tr" }, this._selectable && (h("th", { key: 'd60e1323fca90516f38cedfa6fc8bf17840fad5d', class: {
+            } }, h("tr", { key: '81c64bb5b06d7e8525ebceaf6a229034e90f7a48', class: "tr" }, this._selectable && (h("th", { key: 'fe00535fb5cd54d053c17b3d3a6fa8869d483b8b', class: {
                 'th': true,
                 'th--selected': true,
                 'sticky-left': true,
                 'sticky-left-edge': stickyLeftCount === 0,
                 'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
-            }, style: { '--sticky-left-offset': '0px' } }, h("sd-checkbox", { key: '0c0b61405a8624cfc1d803f8ae8905d74d6c10f1', value: this.getIsAllChecked(), disabled: safeRows.length === 0, onSdUpdate: (e) => this.handleSelectAll(e.detail) }), h("div", { key: 'b808a627e740a9c3a9f6f03e32cf90e598fd506f', class: "th__bar" }))), stickyLeftCols.map((col, idx) => (h("th", { key: col.name, class: {
+            }, style: { '--sticky-left-offset': '0px' } }, h("sd-checkbox", { key: 'de1a3ddf9b3df06d8cc9b85431c31ff84b7b8218', value: this.getIsAllChecked(), disabled: safeRows.length === 0, onSdUpdate: (e) => this.handleSelectAll(e.detail) }), h("div", { key: 'afe516ce212b24abcb075b6e6eb661ffcb6ce297', class: "th__bar" }))), stickyLeftCols.map((col, idx) => (h("th", { key: col.name, class: {
                 'th': true,
                 [`${col.thClass}`]: Boolean(col.thClass),
                 'sticky-left': true,

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

@@ -115,4 +115,31 @@ sd-tabs .sd-tabs--sub .sd-tabs__label {
 }
 sd-tabs .sd-tabs--sub .sd-tabs__label::before {
   font-weight: var(--sd-tabs-sub-font-weight-default);
+}
+sd-tabs .sd-tabs--vertical {
+  flex-direction: column;
+  align-items: stretch;
+  width: fit-content;
+  border-bottom: none;
+  border-right: var(--sd-tabs-main-border-width) solid var(--sd-tabs-main-selected-border);
+}
+sd-tabs .sd-tabs--vertical .sd-tabs__tab {
+  justify-content: flex-start;
+  border-bottom: var(--sd-tabs-main-border-width) solid var(--sd-tabs-main-default-border);
+  border-right: none;
+  border-top-right-radius: 0;
+  border-bottom-left-radius: var(--sd-tabs-main-radius);
+}
+sd-tabs .sd-tabs--vertical .sd-tabs__tab--selected {
+  border-color: var(--sd-tabs-main-selected-border);
+}
+sd-tabs .sd-tabs--vertical.sd-tabs--sub {
+  gap: 16px;
+  border-right: none;
+}
+sd-tabs .sd-tabs--vertical.sd-tabs--sub .sd-tabs__tab {
+  justify-content: center;
+  width: 100%;
+  border: none;
+  border-radius: 0;
 }

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

@@ -5,6 +5,7 @@ export class SdTabs {
     tabs = [];
     size = 'md';
     isSub = false;
+    vertical = false;
     update;
     valueChanged(newValue) {
         this.value = newValue;
@@ -27,6 +28,8 @@ export class SdTabs {
         const classes = ['sd-tabs', `sd-tabs--${this.size ?? 'md'}`];
         if (this.isSub)
             classes.push('sd-tabs--sub');
+        if (this.vertical)
+            classes.push('sd-tabs--vertical');
         return classes.join(' ');
     }
     getBadgeName(tab) {
@@ -67,7 +70,7 @@ export class SdTabs {
         };
     }
     render() {
-        return (h("div", { key: '92384577bf4ce85de90ae05a32e44715e595fe16', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
+        return (h("div", { key: '277188138dd50992b468b35f723cc3f852ad38c3', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
             const badgeName = this.getBadgeName(tab);
             return (h("div", { key: `tab-${index}`, role: "tab", tabindex: 0, "aria-selected": tab.value === this.value ? 'true' : 'false', class: this.getTabClasses(tab), "aria-label": tab.label || 'tab', onClick: () => this.handleTabClick(tab), onKeyDown: e => {
                     if (e.key === 'Enter' || e.key === ' ') {
@@ -180,6 +183,26 @@ export class SdTabs {
                 "reflect": true,
                 "attribute": "is-sub",
                 "defaultValue": "false"
+            },
+            "vertical": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "vertical",
+                "defaultValue": "false"
             }
         };
     }

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

@@ -27,7 +27,7 @@ export class SdTag {
     render() {
         const config = this.resolvedConfig;
         const iconNode = this.renderIcon(config.icon, config.iconSize);
-        return (h("span", { key: '945a8a13f4891b5174e48e262b2a108674da7198', class: "sd-tag", style: {
+        return (h("span", { key: 'f5dd5e267ffdde104f36ec7f19390357dbf03610', class: "sd-tag", style: {
                 '--sd-tag-background': config.background,
                 '--sd-tag-content': config.content,
                 '--sd-tag-height': config.height,
@@ -37,7 +37,7 @@ export class SdTag {
                 '--sd-tag-font-weight': config.fontWeight,
                 '--sd-tag-line-height': config.lineHeight,
                 '--sd-tag-radius': config.radius,
-            }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, h("span", { key: '441932c2eb85eea471838db541fb95302527df23', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
+            }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, h("span", { key: '53c649171b1bba53bf71bbf8f382c0678f1a3a6f', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
     }
     static get is() { return "sd-tag"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-text-link/sd-text-link.config.js

@@ -1,14 +1,14 @@
 import textLinkTokens from "../../tokens/generated/component.textLink.json";
 export const TEXT_LINK_LAYOUT = {
-    gap: textLinkTokens.textLink.gap,
-    iconSize: Number(textLinkTokens.textLink.size.icon),
+    gap: textLinkTokens.textLink.sm.gap,
+    iconSize: Number(textLinkTokens.textLink.sm.icon),
     arrowFrame: 16, // TODO: 토큰 반영 후 교체
     arrowIconSize: 12, // TODO: 토큰 반영 후 교체
     arrowColor: '#888888', // TODO: 토큰 반영 후 교체 (grey_65)
 };
 export const TEXT_LINK_TYPOGRAPHY = {
-    default: textLinkTokens.textLink.typography.default,
-    underline: textLinkTokens.textLink.typography.underline,
+    default: textLinkTokens.textLink.sm.typography.default,
+    underline: textLinkTokens.textLink.sm.typography.underline,
 };
 export const TEXT_LINK_COLORS = {
     content: textLinkTokens.textLink.content,

package/dist/collection/components/sd-text-link/sd-text-link.js

@@ -5,7 +5,7 @@ export class SdTextLink {
     icon = '';
     iconColor = '';
     labelClass = '';
-    useArrow = false;
+    rightArrow = 'none';
     underline = false;
     disabled = false;
     click;
@@ -27,7 +27,7 @@ export class SdTextLink {
             '--sd-text-link-text-decoration': typo.textDecoration,
             ...(this.disabled ? { '--sd-text-link-color': TEXT_LINK_COLORS.content.disabled } : {}),
         };
-        return (h("span", { key: '23ddcce86220acc4e6c8a585e4240ecb7baee9f8', role: "button", tabindex: this.disabled ? -1 : 0, class: {
+        return (h("span", { key: '26955b1626c09a6712b42454c6fb057e3a28a5b5', role: "button", tabindex: this.disabled ? -1 : 0, class: {
                 'sd-text-link': true,
                 'sd-text-link--disabled': this.disabled,
             }, style: cssVars, onClick: this.handleClick, onKeyDown: e => {
@@ -35,13 +35,13 @@ export class SdTextLink {
                     e.preventDefault();
                     this.handleClick();
                 }
-            } }, this.icon && (h("sd-icon", { key: 'd265458a74db086efa270fd165fa5fa9855b708b', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), h("span", { key: '9cb7e5909036aea5b70496fbe5ca69ce10ab3035', class: labelClassName }, this.label), this.useArrow && (h("span", { key: '5ebe27c5929095d1799d81e930b2efa8d616f5bd', class: "sd-text-link__arrow", style: {
+            } }, this.icon && (h("sd-icon", { key: 'caa180d6b2cdc054c4c2becc486ac0bb5f1abdf7', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), h("span", { key: '65940e935169cfc2fabe1b52ec8a70111f726519', class: labelClassName }, this.label), this.rightArrow && this.rightArrow !== 'none' && (h("span", { key: 'e7c988784da2b38087f35a209f9bd912b742a688', class: "sd-text-link__arrow", style: {
                 width: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
                 height: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
                 display: 'inline-flex',
                 alignItems: 'center',
                 justifyContent: 'center',
-            } }, h("sd-icon", { key: '5fc735391386ac733b77bfac6947cccc61fad198', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
+            } }, h("sd-icon", { key: '29da741e45513a6d33876c4ed4316cb6d6418266', name: this.rightArrow === 'chevron' ? 'chevronRight' : 'caretRight', size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
     }
     static get is() { return "sd-text-link"; }
     static get originalStyleUrls() {
@@ -136,12 +136,12 @@ export class SdTextLink {
                 "attribute": "label-class",
                 "defaultValue": "''"
             },
-            "useArrow": {
-                "type": "boolean",
+            "rightArrow": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "'none' | 'chevron' | 'caret'",
+                    "resolved": "\"caret\" | \"chevron\" | \"none\"",
                     "references": {}
                 },
                 "required": false,
@@ -152,9 +152,9 @@ export class SdTextLink {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true,
-                "attribute": "use-arrow",
-                "defaultValue": "false"
+                "reflect": false,
+                "attribute": "right-arrow",
+                "defaultValue": "'none'"
             },
             "underline": {
                 "type": "boolean",

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

@@ -105,7 +105,7 @@ export class SdTextarea {
             '--sd-system-size-field-sm-height': 'auto',
             '--sd-system-radius-field-sm': `${TEXTAREA_TOKENS.radius}px`,
         };
-        return (h("sd-field", { key: '1f1a6ed592df92b4aa0aacfbc1ba8926b93b7066', 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, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: '63b4847968e5a1ceb309b7d0950da33927e25244', class: "sd-textarea__content" }, h("textarea", { key: '89d81a7792c3b5a4a1bcaa0f7bd73e0b3a0bd192', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readOnly: this.readonly, autofocus: this.autoFocus, maxLength: this.maxLength, rows: this.rows, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.textareaStyle }))));
+        return (h("sd-field", { key: '2a1cd03e4f0fa5457b3164f1b6b71d808633414c', 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, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: 'b4e25ced8e583ed3d6e8a6026db0d3a2f198acb4', class: "sd-textarea__content" }, h("textarea", { key: '4faeceee380a7ab9a4ff337d16f46c4d7f42fa50', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readOnly: this.readonly, autofocus: this.autoFocus, maxLength: this.maxLength, rows: this.rows, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.textareaStyle }))));
     }
     static get is() { return "sd-textarea"; }
     static get originalStyleUrls() {

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

@@ -17,12 +17,12 @@ export class SdToast {
         const linkColor = typeConfig.linkColor ?? typeConfig.content;
         const useDefaultCloseIntent = ['default', 'caution', 'info'].includes(this.type);
         const buttonName = TOAST_BUTTON_NAME_BY_TYPE[this.type] ?? TOAST_BUTTON_NAME_BY_TYPE.default;
-        return (h("div", { key: '735fa3f949ee4c7d0178f999c02e90c829c133b4', style: {
+        return (h("div", { key: '82c8063406a534e60c985d3c8321612077f75623', style: {
                 '--sd-toast-bg': typeConfig.bg,
                 '--sd-toast-text': typeConfig.content,
                 '--sd-toast-icon': iconColor,
                 '--sd-toast-link': linkColor,
-            } }, h("div", { key: '4e483d858c3268bde838ddc5c5c9cb5065855326', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (h("div", { key: '007eded85c508bdd2da05b1c9d489ff2d03a4df9', class: "sd-toast__icon" }, h("sd-icon", { key: '099d5556f4b0a11f5162cb76a6166a2d662d9590', name: this.icon, size: iconSize, color: iconColor }))), h("div", { key: '3825916248bc2385fe87c8aeb6d741b59738246f', class: "sd-toast__content" }, h("span", { key: 'fba817baf33179296f50d3fe4147cc99c38fbb83', class: "sd-toast__message" }, this.message)), this.link && (h("a", { key: '39667765a9a72c761f0b464f78c7652e60e6dd16', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (h("sd-button", { key: '3da2f9a5daf53de4400bfec79654b5795c3b6af4', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (h("sd-ghost-button", { key: '2578d35dc11e06178c6902cb358bcdb8ccabbf36', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
+            } }, h("div", { key: 'e83c5b7ddc0edec3fb9e29325dcb52e3295fad4d', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (h("div", { key: 'd249e5915f0c92a0a2cff43dee5c61d809ffc7f0', class: "sd-toast__icon" }, h("sd-icon", { key: '088da81d0083cc0ca72f2bf59392a72d3f2ed4de', name: this.icon, size: iconSize, color: iconColor }))), h("div", { key: '5cad9a3a81b00d8926d92d9895c4cca1389dc63b', class: "sd-toast__content" }, h("span", { key: '1fbc72aac70fbb3bb630ad10343ea2c8f76f924c', class: "sd-toast__message" }, this.message)), this.link && (h("a", { key: '769a85fa539bab8b478ef999cab615285a842085', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (h("sd-button", { key: '77612614898b6abdade4b4599987cbb90bc09c4e', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (h("sd-ghost-button", { key: '3bef6c0e7f3dec3f2b1f493f9c979a121bc897e9', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
     }
     static get is() { return "sd-toast"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-toast-container/sd-toast-container.js

@@ -216,7 +216,7 @@ export class SdToastContainer {
         const activeToasts = toasts.filter(t => t.state !== 'exiting').reverse();
         const indexMap = new Map();
         activeToasts.forEach((t, i) => indexMap.set(t.id, i));
-        return (h("div", { key: '1de55d255b75842f52e3f0a147a69493ed1a7de5', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
+        return (h("div", { key: '2b0bc86b7e2ea19a44f3c0b870ce5dec1de3a140', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
                 this.expanded = true;
                 this.pauseTimers();
             }, onMouseLeave: () => {

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

@@ -45,7 +45,7 @@ export class SdToggle {
             '--sd-toggle-content-select': TOGGLE_COLORS.content.select,
             '--sd-toggle-content-disabled': TOGGLE_COLORS.content.disabled,
         };
-        return (h("label", { key: 'f1b1b68270d523f7f3e40c8145f35e93df269d73', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, h("input", { key: '7e07c190916e19ffe8744f6b491e92e6bf8efd36', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        return (h("label", { key: 'f61e80701bc85205794aec0c960965d29b94a247', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, h("input", { key: '26a31febfdae6bebe55291d3454a177366dc3db0', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
     static get is() { return "sd-toggle"; }
     static get originalStyleUrls() {

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

@@ -84,14 +84,14 @@ export class SdTooltip {
         const hasLabel = this.label !== undefined && this.label !== '';
         const divTrigger = trigger === 'hover' ? hoverTrigger : hasLabel ? {} : { onClick: toggleTooltip };
         const buttonClickTrigger = trigger === 'click' && hasLabel ? { onSdClick: toggleTooltip } : {};
-        return (h(Fragment, { key: '0ffbc5e61b4b5ab9bf1fda1c064de63c1467bb37' }, h("div", { key: 'c74bff7fde9c1f139435c2b37f69e7ee7492ec91', class: `sd-tooltip-trigger ${this.sdClass !== undefined && this.sdClass !== '' ? this.sdClass : ''}`, ...divTrigger }, hasLabel ? (h("sd-button", { ref: el => (this.buttonEl = el), name: this.name ?? 'primary_sm', label: this.label, icon: icon, rightIcon: this.rightIcon, ariaLabel: this.ariaLabel, disabled: this.disabled, type: this.type ?? 'button', class: "sd-tooltip", ...buttonClickTrigger })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (h("sd-floating-portal", { key: '3a83a7d7a33fbdd720a52149b2a156ecc72c087b', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.tooltipOffset }, h("div", { key: 'abb63e4db76edae3df1d16d756e20a61284db87f', ref: el => (this.menuEl = el), class: {
+        return (h(Fragment, { key: 'dab010e285f9cf77097b2d18115d1c8dbb462933' }, h("div", { key: 'c49d1f8d55898cedc462fd321ab47d8a82360ae8', class: `sd-tooltip-trigger ${this.sdClass !== undefined && this.sdClass !== '' ? this.sdClass : ''}`, ...divTrigger }, hasLabel ? (h("sd-button", { ref: el => (this.buttonEl = el), name: this.name ?? 'primary_sm', label: this.label, icon: icon, rightIcon: this.rightIcon, ariaLabel: this.ariaLabel, disabled: this.disabled, type: this.type ?? 'button', class: "sd-tooltip", ...buttonClickTrigger })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (h("sd-floating-portal", { key: '53dbdd7df43e2eacf23c2e1b97bf901b225eab1e', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.tooltipOffset }, h("div", { key: '3130ace8e25b783d49fde3b682249a8cf1783cde', ref: el => (this.menuEl = el), class: {
                 'sd-floating-menu': true,
                 [`sd-floating-menu--${tooltipType}`]: true,
                 [`sd-floating-menu--${placement}`]: true,
             }, style: {
                 '--sd-floating-bg': typeConfig.bg,
                 '--sd-floating-content': typeConfig.content,
-            }, onMouseEnter: () => this.show(), onMouseLeave: () => this.startHideTimer() }, h("i", { key: 'c29052cc7ed0e514ed27a7f576585d8865728cd4', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, h(TooltipArrow, { key: '9602237020591571cd76d3afa9e1c6383f7f421f' })), h("div", { key: '29091435fa3008eaf352b831eb4345ed9d6a5d86', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }))))));
+            }, onMouseEnter: () => this.show(), onMouseLeave: () => this.startHideTimer() }, h("i", { key: '2120f9056ef18218b2ba55d5c921fef9c9a04d67', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, h(TooltipArrow, { key: '557f9ae13f101416d962a84438690078fa7bd16f' })), h("div", { key: '54fb0f3cf0f228184f2eca54a5f3364084b6f834', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }))))));
     }
     static get is() { return "sd-tooltip"; }
     static get originalStyleUrls() {

package/dist/components/index.js

@@ -1 +1 @@
-export{g as getAssetPath,r as render,s as setAssetPath,a as setNonce,b as setPlatformOptions}from"./p-pwNG5WaX.js";import{c as t}from"./p-DRVnqiWc.js";let n=null;function e(t,n){void 0!==n&&(void 0!==n.position&&t.setAttribute("position",n.position),null!=n.maxVisible&&t.setAttribute("max-visible",n.maxVisible+""),null!=n.defaultDuration&&t.setAttribute("default-duration",n.defaultDuration+""),null!=n.zIndex&&t.setAttribute("z-index",n.zIndex+""))}function o(t){return n&&document.body.contains(n)?(e(n,t),n):(n=document.createElement("sd-toast-container"),e(n,t),document.body.appendChild(n),n)}function i(t){return"function"==typeof t.create?Promise.resolve():new Promise((n=>{const e=()=>{"function"==typeof t.create?n():requestAnimationFrame(e)};requestAnimationFrame(e)}))}const c={async create(t,n,e){const{globalOptions:s,...r}=e??{},c=o(s);return await i(c),c.create({message:t,type:n,...r})},async dismiss(t){if(null!=n)return await i(n),n.dismiss(t)},async dismissAll(){if(null!=n)return await i(n),n.dismissAll()},configure(t){o(t)}},u="sd-modal-container";let d=null;const l={ok:"confirm",cancel:"cancel",close:"close"};class m{modalId;okFn;cancelFn;closeFn;clickFn;dismissedFn;containerRef;pendingActions=[];dismissRequested=!1;constructor(t,n){this.modalId=t,this.containerRef=n}onOk(t){return this.okFn=t,this}onCancel(t){return this.cancelFn=t,this}onClose(t){return this.closeFn=t,this}onClick(t){return this.clickFn=t,this}onDismissed(t){return this.dismissedFn=t,this}update(t){return this.runOrQueue((()=>{this.containerRef?.update(this.modalId,t)})),this}ok(){return this.dismiss("ok")}cancel(){return this.dismiss("cancel")}close(){return this.dismiss("close")}dismiss(t="close"){if(this.dismissRequested)return this;this.dismissRequested=!0;const n=l[t];return this.runOrQueue((()=>{this.containerRef?.dismissById(this.modalId,n)})),this}_triggerOk(){this.okFn?.()}_triggerCancel(){this.cancelFn?.()}_triggerClose(){this.closeFn?.()}_triggerClick(){this.clickFn?.()}_triggerDismissed(){this.dismissedFn?.()}_setId(t){this.modalId=t;const n=[...this.pendingActions];this.pendingActions=[],n.forEach((t=>t()))}_setContainer(t){this.containerRef=t}runOrQueue(t){""===this.modalId||null==this.containerRef?this.pendingActions.push(t):t()}}function f(){if("undefined"==typeof window||"undefined"==typeof document||"undefined"==typeof customElements)throw Error("[sdModal] Browser APIs are unavailable. Use `sdModal` only on the client.")}function h(){if(f(),function(){if(!customElements.get(u))throw Error("[sdModal] `sd-modal-container` is not registered. Call `defineCustomElements(window)` before using `sdModal`.")}(),d&&d.isConnected)return d;const t=document.createElement(u);return t.setAttribute("auto-remove",""),document.body.appendChild(t),d=t,t}async function w(t){if(await customElements.whenDefined(u),"function"==typeof t.open)return Promise.resolve();throw Error("[sdModal] `sd-modal-container` is registered but not ready to open dialogs.")}function p(){return new m("")}function y(t,n){const{component:e,persistent:s}=n,o=h(),i={persistent:s};t._setContainer(o),w(o).then((async()=>{const n=await o.createCustom(e,i,t);t._setId(n)}))}const E={confirm(t){const n=h(),e=new m("",n);return w(n).then((async()=>{const s=await n.open(t,e);e._setId(s)})),e},loading(t={}){const n=h(),e=new m("",n);return w(n).then((async()=>{const s=await n.openLoading(t,e);e._setId(s)})),e},create(t){const n=p();return y(n,t),n},configure(n){f(),t(n)}},C="sd-loading-container";let k=null;async function A(t){const n=(function(){if("undefined"==typeof window||"undefined"==typeof document||"undefined"==typeof customElements)throw Error("[sdLoading] Browser APIs are unavailable. Use `sdLoading` only on the client.")}(),function(){if(!customElements.get(C))throw Error("[sdLoading] `sd-loading-container` is not registered. Call `defineCustomElements(window)` before using `sdLoading`.")}(),k&&document.body.contains(k)||(k=document.createElement(C),document.body.appendChild(k)),k);await customElements.whenDefined(C),t(n)}const P={show(t={}){A((n=>{n.show?.(t)}))},hide(){k&&A((t=>{t.hide?.()}))}};export{y as _attachSdModalWithRef,p as _createSdModalRef,P as sdLoading,E as sdModal,c as sdToast}
+export{g as getAssetPath,r as render,s as setAssetPath,a as setNonce,b as setPlatformOptions}from"./p-siTDlOb6.js";import{c as t}from"./p-DRVnqiWc.js";let n=null;function e(t,n){void 0!==n&&(void 0!==n.position&&t.setAttribute("position",n.position),null!=n.maxVisible&&t.setAttribute("max-visible",n.maxVisible+""),null!=n.defaultDuration&&t.setAttribute("default-duration",n.defaultDuration+""),null!=n.zIndex&&t.setAttribute("z-index",n.zIndex+""))}function i(t){return n&&document.body.contains(n)?(e(n,t),n):(n=document.createElement("sd-toast-container"),e(n,t),document.body.appendChild(n),n)}function o(t){return"function"==typeof t.create?Promise.resolve():new Promise((n=>{const e=()=>{"function"==typeof t.create?n():requestAnimationFrame(e)};requestAnimationFrame(e)}))}const c={async create(t,n,e){const{globalOptions:s,...r}=e??{},c=i(s);return await o(c),c.create({message:t,type:n,...r})},async dismiss(t){if(null!=n)return await o(n),n.dismiss(t)},async dismissAll(){if(null!=n)return await o(n),n.dismissAll()},configure(t){i(t)}},u="sd-modal-container";let d=null;const l={ok:"confirm",cancel:"cancel",close:"close"};class m{modalId;okFn;cancelFn;closeFn;clickFn;dismissedFn;containerRef;pendingActions=[];dismissRequested=!1;constructor(t,n){this.modalId=t,this.containerRef=n}onOk(t){return this.okFn=t,this}onCancel(t){return this.cancelFn=t,this}onClose(t){return this.closeFn=t,this}onClick(t){return this.clickFn=t,this}onDismissed(t){return this.dismissedFn=t,this}update(t){return this.runOrQueue((()=>{this.containerRef?.update(this.modalId,t)})),this}ok(){return this.dismiss("ok")}cancel(){return this.dismiss("cancel")}close(){return this.dismiss("close")}dismiss(t="close"){if(this.dismissRequested)return this;this.dismissRequested=!0;const n=l[t];return this.runOrQueue((()=>{this.containerRef?.dismissById(this.modalId,n)})),this}_triggerOk(){this.okFn?.()}_triggerCancel(){this.cancelFn?.()}_triggerClose(){this.closeFn?.()}_triggerClick(){this.clickFn?.()}_triggerDismissed(){this.dismissedFn?.()}_setId(t){this.modalId=t;const n=[...this.pendingActions];this.pendingActions=[],n.forEach((t=>t()))}_setContainer(t){this.containerRef=t}runOrQueue(t){""===this.modalId||null==this.containerRef?this.pendingActions.push(t):t()}}function f(){if("undefined"==typeof window||"undefined"==typeof document||"undefined"==typeof customElements)throw Error("[sdModal] Browser APIs are unavailable. Use `sdModal` only on the client.")}function h(){if(f(),function(){if(!customElements.get(u))throw Error("[sdModal] `sd-modal-container` is not registered. Call `defineCustomElements(window)` before using `sdModal`.")}(),d&&d.isConnected)return d;const t=document.createElement(u);return t.setAttribute("auto-remove",""),document.body.appendChild(t),d=t,t}async function w(t){if(await customElements.whenDefined(u),"function"==typeof t.open)return Promise.resolve();throw Error("[sdModal] `sd-modal-container` is registered but not ready to open dialogs.")}function p(){return new m("")}function y(t,n){const{component:e,persistent:s}=n,i=h(),o={persistent:s};t._setContainer(i),w(i).then((async()=>{const n=await i.createCustom(e,o,t);t._setId(n)}))}const E={confirm(t){const n=h(),e=new m("",n);return w(n).then((async()=>{const s=await n.open(t,e);e._setId(s)})),e},loading(t={}){const n=h(),e=new m("",n);return w(n).then((async()=>{const s=await n.openLoading(t,e);e._setId(s)})),e},create(t){const n=p();return y(n,t),n},configure(n){f(),t(n)}},C="sd-loading-container";let k=null;async function A(t){const n=(function(){if("undefined"==typeof window||"undefined"==typeof document||"undefined"==typeof customElements)throw Error("[sdLoading] Browser APIs are unavailable. Use `sdLoading` only on the client.")}(),function(){if(!customElements.get(C))throw Error("[sdLoading] `sd-loading-container` is not registered. Call `defineCustomElements(window)` before using `sdLoading`.")}(),k&&document.body.contains(k)||(k=document.createElement(C),document.body.appendChild(k)),k);await customElements.whenDefined(C),t(n)}const P={show(t={}){A((n=>{n.show?.(t)}))},hide(){k&&A((t=>{t.hide?.()}))}};export{y as _attachSdModalWithRef,p as _createSdModalRef,P as sdLoading,E as sdModal,c as sdToast}

package/dist/components/p-0KaFFbD8.js

@@ -0,0 +1 @@
+import{p as t,H as s,c as e,h as i,t as h}from"./p-siTDlOb6.js";import{c as o,d as r,f as l,i as n,e as c,E as d,g as a}from"./p-C5wgHjtx.js";import{d as u}from"./p-CFL9Rfh8.js";import{d as m}from"./p-BNkExhYB.js";import{d as p}from"./p-DmbwfZF7.js";import{d as f}from"./p-NaAHdFVI.js";const x=t(class t extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.optionSelect=e(this,"sdOptionSelect",7)}type="default";options=[];value=null;emitValue=!1;useSearch=!1;useSelectAll=!1;triggerWidth="200px";maxWidth="640px";maxHeight="260px";searchKeyword="";isScrolled=!1;focusedIndex=-1;optionSelect;listEl;lastScrolledIndex=-1;keydownAttached=!1;suppressHover=!1;get isDepth(){return"default_depth"===this.type||"multi_depth"===this.type}get isMulti(){return"multi"===this.type||"multi_depth"===this.type}static SELECT_ALL_OPTION={value:"__select_all__",label:"전체"};get showSelectAll(){return this.useSelectAll&&this.isMulti&&this.getAllNonDisabledLeaves().length>0}getAllNonDisabledLeaves(){const t=s=>s.flatMap((s=>s.disabled?[]:s.children?t(s.children):[s]));return t(this.options)}get selectAllState(){if(!this.showSelectAll)return!1;const t=this.getAllNonDisabledLeaves();if(0===t.length)return!1;const s=this.getSelectedValues(),e=t.filter((t=>s.has(t.value))).length;return 0!==e&&(e===t.length||null)}get showSearch(){return!!this.useSearch&&(this.isDepth?o(this.options):this.options.length)>=r}get filteredOptions(){if(""===this.searchKeyword)return this.options;if(this.isDepth)return l(this.options,this.searchKeyword);const t=this.searchKeyword.toLowerCase();return this.options.filter((s=>(n(s.label)?c(s.label):s.label).toLowerCase().includes(t)))}get isEmpty(){return this.isDepth?0===o(this.filteredOptions)&&0===this.filteredOptions.length:0===this.filteredOptions.length}getSelectedValues(){return null!=this.value&&Array.isArray(this.value)?this.emitValue?new Set(this.value):new Set(this.value.map((t=>t.value))):new Set}isOptionSelected(t){return this.isMulti?this.getSelectedValues().has(t.value):this.emitValue||null==this.value||"object"!=typeof this.value||Array.isArray(this.value)?this.value===t.value:this.value.value===t.value}getGroupSelectionState(t){if(!this.isMulti||!t.children)return!1;const s=this.getSelectedValues();if(0===s.size)return!1;const e=this.collectVisibleLeaves(t);if(0===e.length)return!1;const i=e.filter((t=>s.has(t.value))).length;return 0!==i&&(i===e.length||null)}getCountInfo(t){if(!this.isMulti||!t.children)return;const s=this.getSelectedValues(),e=this.collectVisibleLeaves(t);return{selected:e.filter((t=>s.has(t.value))).length,total:e.length}}findOriginalOption(t,s){for(const e of s){if(e.value===t)return e;if(e.children){const s=this.findOriginalOption(t,e.children);if(s)return s}}}collectLeaves(t){return t.children?t.children.flatMap((t=>this.collectLeaves(t))):[t]}collectVisibleLeaves(t){if(t.disabled)return[];if(!t.children)return[t];if(0===t.children.length){const s=this.findOriginalOption(t.value,this.options);return s?this.collectLeaves(s).filter((t=>!t.disabled)):[]}return t.children.flatMap((t=>this.collectVisibleLeaves(t)))}get navigableOptions(){const s=[];this.showSelectAll&&s.push(t.SELECT_ALL_OPTION);const e=t=>{for(const i of t){const t=!!i.children;(!t||this.isMulti)&&!i.disabled&&s.push(i),t&&i.children&&i.children.length>0&&e(i.children)}};return e(this.filteredOptions),s}isSelectAllOption(s){return this.showSelectAll&&s.value===t.SELECT_ALL_OPTION.value}emitSelectAll(){if(!this.showSelectAll)return;const s=this.getAllNonDisabledLeaves();this.optionSelect.emit({option:{...t.SELECT_ALL_OPTION,children:s},leaves:s})}handleSelectAllClick=t=>{t.stopPropagation(),this.emitSelectAll()};isOptionFocused(t){if(this.focusedIndex<0)return!1;const s=this.navigableOptions[this.focusedIndex];return null!=s&&s.value===t.value}resetFocusOnFilter(){this.focusedIndex=this.navigableOptions.length>0?0:-1,this.suppressHover&&(document.removeEventListener("mousemove",this.releaseHoverSuppress,!0),this.suppressHover=!1)}handleSearchFilter=t=>{this.searchKeyword=t.detail};handleScroll=t=>{this.isScrolled=t.target.scrollTop>0};emitOptionSelect(t){this.optionSelect.emit({option:t,leaves:this.collectVisibleLeaves(t)})}handleOptionClick=t=>{t.stopPropagation(),this.emitOptionSelect(t.detail)};handleOptionHover=t=>{if(this.suppressHover)return;const s=this.navigableOptions.findIndex((s=>s.value===t.value));s>=0&&(this.focusedIndex=s)};releaseHoverSuppress=()=>{this.suppressHover=!1,document.removeEventListener("mousemove",this.releaseHoverSuppress,!0)};handleKeyDown=t=>{const s=this.navigableOptions;if("ArrowDown"===t.key){if(0===s.length)return;t.preventDefault(),t.stopPropagation(),this.focusedIndex=this.focusedIndex<0?0:(this.focusedIndex+1)%s.length,this.beginHoverSuppression()}else if("ArrowUp"===t.key){if(0===s.length)return;t.preventDefault(),t.stopPropagation(),this.focusedIndex=this.focusedIndex<=0?s.length-1:this.focusedIndex-1,this.beginHoverSuppression()}else if("Enter"===t.key){if(this.focusedIndex<0||this.focusedIndex>=s.length)return;t.preventDefault(),t.stopPropagation();const e=s[this.focusedIndex];this.isSelectAllOption(e)?this.emitSelectAll():this.emitOptionSelect(e)}};beginHoverSuppression(){this.suppressHover||(this.suppressHover=!0,document.addEventListener("mousemove",this.releaseHoverSuppress,!0))}scrollFocusedIntoView(){const t=this.listEl,s=t?.querySelector(".sd-select-list-item--focused");if(!t||!s)return;const e=t.getBoundingClientRect(),i=s.getBoundingClientRect();i.top<e.top?t.scrollTop+=i.top-e.top:i.bottom>e.bottom&&(t.scrollTop+=i.bottom-e.bottom)}connectedCallback(){this.keydownAttached||(document.addEventListener("keydown",this.handleKeyDown,!0),this.keydownAttached=!0)}disconnectedCallback(){this.keydownAttached&&(document.removeEventListener("keydown",this.handleKeyDown,!0),this.keydownAttached=!1),this.suppressHover&&(document.removeEventListener("mousemove",this.releaseHoverSuppress,!0),this.suppressHover=!1)}componentDidRender(){this.focusedIndex!==this.lastScrolledIndex&&(this.lastScrolledIndex=this.focusedIndex,this.focusedIndex>=0&&this.scrollFocusedIntoView())}renderOptions(t,s=1){return t.map((t=>{const e=!!t.children;return[i("sd-select-list-item",{option:t,depth:s,isSelected:e?this.getGroupSelectionState(t):this.isOptionSelected(t),isFocused:this.isOptionFocused(t),useCheckbox:this.isMulti,countInfo:this.getCountInfo(t),onSdListItemClick:this.handleOptionClick,onMouseEnter:()=>this.handleOptionHover(t)}),e&&t.children?this.renderOptions(t.children,s+1):null]}))}render(){return i("div",{key:"6c2cbad13f8aaa8c0552068c7cbc35a147bee77d",class:"sd-select-listbox",style:{"--listbox-trigger-width":this.triggerWidth??"200px","--listbox-max-width":this.maxWidth??"640px","--listbox-max-height":this.maxHeight??"260px","--listbox-radius":`${a.radius}px`}},this.showSearch&&i("sd-select-list-item-search",{key:"052d783e27e2458aa397c77fe891dad4a440f09e",isScrolled:this.isScrolled,onSdSearchFilter:this.handleSearchFilter}),i("div",{key:"bba95f3c4475d01a65562ba079c8666e3325195d",class:"sd-select-listbox__list",onScroll:this.handleScroll,ref:t=>{this.listEl=t}},this.showSelectAll&&i("sd-select-list-item",{key:"2f55bbacbed71952903599db0739773176ac55fd",option:t.SELECT_ALL_OPTION,depth:1,isSelected:this.selectAllState,isFocused:this.isOptionFocused(t.SELECT_ALL_OPTION),useCheckbox:!0,onSdListItemClick:this.handleSelectAllClick,onMouseEnter:()=>this.handleOptionHover(t.SELECT_ALL_OPTION)}),this.isEmpty?i("div",{class:"sd-select-listbox__empty"},d):this.isDepth?this.renderOptions(this.filteredOptions):this.filteredOptions.map((t=>i("sd-select-list-item",{option:t,depth:1,isSelected:this.isOptionSelected(t),isFocused:this.isOptionFocused(t),useCheckbox:this.isMulti,onSdListItemClick:this.handleOptionClick,onMouseEnter:()=>this.handleOptionHover(t)})))))}static get watchers(){return{searchKeyword:[{resetFocusOnFilter:0}]}}static get style(){return":host{display:block}:host .sd-select-listbox{display:flex;flex-direction:column;width:var(--listbox-trigger-width);max-width:var(--listbox-max-width);max-height:var(--listbox-max-height);border-radius:var(--listbox-radius);background:white;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);overflow:hidden;outline:none}:host .sd-select-listbox__list{flex:1;min-height:0;overflow-y:auto;padding-bottom:0}:host .sd-select-listbox__empty{padding:12px;text-align:center;font-size:12px;line-height:20px;color:#888888}"}},[513,"sd-select-listbox",{type:[1],options:[16],value:[8],emitValue:[4,"emit-value"],useSearch:[4,"use-search"],useSelectAll:[4,"use-select-all"],triggerWidth:[1,"trigger-width"],maxWidth:[1,"max-width"],maxHeight:[1,"max-height"],searchKeyword:[32],isScrolled:[32],focusedIndex:[32]},void 0,{searchKeyword:[{resetFocusOnFilter:0}]}]);function b(){"undefined"!=typeof customElements&&["sd-select-listbox","sd-checkbox","sd-icon","sd-select-list-item","sd-select-list-item-search"].forEach((t=>{switch(t){case"sd-select-listbox":customElements.get(h(t))||customElements.define(h(t),x);break;case"sd-checkbox":customElements.get(h(t))||u();break;case"sd-icon":customElements.get(h(t))||m();break;case"sd-select-list-item":customElements.get(h(t))||p();break;case"sd-select-list-item-search":customElements.get(h(t))||f()}}))}export{x as S,b as d}