@sellmate/design-system 1.8.0 → 1.10.0

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

@@ -1,7 +1,8 @@
 'use strict';
 
-var index = require('./index-BGwB03Tk.js');
-var sdSelect_config = require('./sd-select.config-B19ptCT2.js');
+var index = require('./index-C63F8C0_.js');
+var sdSelect_config = require('./sd-select.config-DrJ4LNVz.js');
+var sanitizeInlineHtml = require('./sanitize-inline-html-CRCAeQ46.js');
 
 const sdSelectListItemCss = () => `sd-select-list-item{display:block}sd-select-list-item .sd-select-list-item{display:flex;align-items:center;gap:var(--list-item-gap);padding:var(--list-item-padding-y) var(--list-item-padding-right) var(--list-item-padding-y) var(--list-item-padding-left);font-size:var(--list-item-font-size);line-height:var(--list-item-line-height);font-weight:var(--list-item-font-weight);background:var(--list-item-bg);color:var(--list-item-color);cursor:default;user-select:none}sd-select-list-item .sd-select-list-item--selectable{cursor:pointer}sd-select-list-item .sd-select-list-item--depth1-group{border-top:var(--list-item-border-top);font-weight:700}sd-select-list-item .sd-select-list-item--depth2-group{font-weight:500}sd-select-list-item .sd-select-list-item--focused.sd-select-list-item--selectable:not(.sd-select-list-item--disabled){background:var(--list-item-bg-hover);color:var(--list-item-color-hover)}sd-select-list-item .sd-select-list-item--selected:not(.sd-select-list-item--group){font-weight:var(--list-item-font-weight-selected);color:var(--list-item-color-selected)}sd-select-list-item .sd-select-list-item--selected.sd-select-list-item--focused{color:var(--list-item-color-hover)}sd-select-list-item .sd-select-list-item--disabled{color:var(--list-item-color-disabled);cursor:not-allowed}sd-select-list-item .sd-select-list-item__label{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}sd-select-list-item .sd-select-list-item__count{flex-shrink:0;font-weight:500;color:var(--list-item-color-disabled)}sd-select-list-item .sd-select-list-item--group.sd-select-list-item--focused .sd-select-list-item__count{color:#ffffff}sd-select-list-item .sd-select-list-item__checkbox{flex-shrink:0}`;
 
@@ -79,7 +80,7 @@ const SdSelectListItem = class {
         return (
         // 키보드 네비게이션은 부모 listbox 의 ArrowUp/Down + Enter 가 담당. 항목 자체는 role=option, tabindex=-1 으로 표시.
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-        index.h("div", { key: '33f5d4383d2bfac91507d72d98b8a73b380a70e8', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
+        index.h("div", { key: '55ebe094653cb89d5c70916c3e0a2f4ccb5551f8', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
                 'sd-select-list-item': true,
                 'sd-select-list-item--group': isGroup,
                 'sd-select-list-item--depth1-group': isDepth1Group,
@@ -89,7 +90,7 @@ const SdSelectListItem = class {
                 'sd-select-list-item--focused': this.isFocused,
                 'sd-select-list-item--selectable': this.isSelectable && !this.option.disabled,
                 'sd-select-list-item--disabled': !!this.option.disabled,
-            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (index.h("sd-checkbox", { key: 'a93dec7a45e140d7f715a6fc823c4438c58cdd8f', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, inverse: this.isFocused && this.isSelected !== false, class: "sd-select-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), index.h("span", { key: '81b0bfdd0825b795f2638d6529e8c5fb346be6db', class: "sd-select-list-item__label" }, this.option.label), this.countInfo && (index.h("span", { key: '2e1425a5d6ab9082a30b4d9079be1d4104d95fc2', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
+            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (index.h("sd-checkbox", { key: 'f636931bc20264db98e521b11b819610cda764cd', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, inverse: this.isFocused && this.isSelected !== false, class: "sd-select-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), sdSelect_config.isHtmlLabel(this.option.label) ? (index.h("span", { class: "sd-select-list-item__label", ref: el => el && (el.innerHTML = sanitizeInlineHtml.sanitizeInlineHtml(this.option.label)) })) : (index.h("span", { class: "sd-select-list-item__label" }, this.option.label)), this.countInfo && (index.h("span", { key: '89750bc08c03915b738da390f4255e7451aa9d6d', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
     }
 };
 SdSelectListItem.style = sdSelectListItemCss();
@@ -142,15 +143,15 @@ const SdSelectListItemSearch = class {
             clearTimeout(this.debounceTimer);
     }
     render() {
-        return (index.h("div", { key: '8c0c85ac9c382e2978e32924c33a580a4fac3485', class: {
+        return (index.h("div", { key: '6cf78c7d616dc21a7a6e806c184322d12cacb50d', class: {
                 'sd-select-list-item-search': true,
                 'sd-select-list-item-search--scrolled': this.isScrolled,
-            } }, index.h("div", { key: '92425ff6eab4cf16f96f45dabb8f07c27ad9e747', class: "sd-select-list-item-search__inner" }, index.h("sd-icon", { key: '253a40e4e624e828e351d08c1f05fb2d098c8b9b', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), index.h("input", { key: 'b38735ae6e75b9fe19ceb3038c5b873ad42760ef', ref: el => {
+            } }, index.h("div", { key: 'dd9fa44fed1f3ec7a222dacaa710cdf32ddbe6fc', class: "sd-select-list-item-search__inner" }, index.h("sd-icon", { key: '2d65a81b7b6160ac4e93016adea0da43d5d01ec8', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), index.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() }), index.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() }), index.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' }, index.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' }, index.h("sd-icon", { key: 'ed8b1c93809f823205f357b059a8b556e0278b1c', name: "close", size: 12, color: "#888888" })))));
     }
 };
 SdSelectListItemSearch.style = sdSelectListItemSearchCss();

package/dist/cjs/{sd-select.config-B19ptCT2.js → sd-select.config-DrJ4LNVz.js}

@@ -1,20 +1,22 @@
 'use strict';
 
 const select = {
-	paddingX: "12",
+	sm: {
+		paddingX: "12",
+		gap: "8",
+		typography: {
+			fontWeight: "400",
+			fontSize: "12",
+			lineHeight: "20"}},
 	icon: {
 		"default": "#888888",
 		disabled: "#BBBBBB"
 	},
-	gap: "8",
-	typography: {
-		fontWeight: "400",
-		fontSize: "12",
-		lineHeight: "20"},
 	text: {
 		"default": "#222222",
 		disabled: "#888888"
-	}};
+	}
+};
 var selectTokens = {
 	select: select
 };
@@ -69,12 +71,12 @@ var listBoxTokens = {
 
 // ── Select Trigger Tokens ──
 const SELECT_LAYOUT = {
-    paddingX: selectTokens.select.paddingX,
-    gap: selectTokens.select.gap};
+    paddingX: selectTokens.select.sm.paddingX,
+    gap: selectTokens.select.sm.gap};
 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,
 };
 const SELECT_COLORS = {
     icon: {
@@ -131,6 +133,12 @@ const SEARCH_THRESHOLD = 11;
 const SEARCH_DEBOUNCE_MS = 1000;
 const EMPTY_MESSAGE = '표시할 항목이 없습니다.';
 // ── Utilities ──
+function isHtmlLabel(label) {
+    return /<[a-z][\s\S]*>/i.test(label);
+}
+function extractText(html) {
+    return html.replace(/<[^>]*>/g, '');
+}
 function countLeaves(options) {
     return options.reduce((sum, option) => {
         if (option.children) {
@@ -142,7 +150,8 @@ function countLeaves(options) {
 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) {
             // 그룹: 자식은 항상 추가로 필터링한다.
             // - 자식 중 일치하는 게 있으면 그 자식들만 노출
@@ -175,4 +184,6 @@ exports.SELECT_COLORS = SELECT_COLORS;
 exports.SELECT_LAYOUT = SELECT_LAYOUT;
 exports.SELECT_TYPOGRAPHY = SELECT_TYPOGRAPHY;
 exports.countLeaves = countLeaves;
+exports.extractText = extractText;
 exports.filterTree = filterTree;
+exports.isHtmlLabel = isHtmlLabel;

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

@@ -1,8 +1,9 @@
 'use strict';
 
-var index = require('./index-BGwB03Tk.js');
+var index = require('./index-C63F8C0_.js');
 var index$1 = require('./index-BUvXpPc3.js');
-var sdSelect_config = require('./sd-select.config-B19ptCT2.js');
+var sdSelect_config = require('./sd-select.config-DrJ4LNVz.js');
+var sanitizeInlineHtml = require('./sanitize-inline-html-CRCAeQ46.js');
 
 const sdSelectCss = () => `sd-select{display:inline-flex}sd-select sd-portal{display:none}sd-select .sd-select{position:relative;width:100%;height:100%}`;
 
@@ -104,8 +105,7 @@ const SdSelect = class {
             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]));
@@ -265,15 +265,15 @@ const SdSelect = class {
                 this.closeDropdown();
             },
         };
-        return (index.h("sd-field", { key: '3c188cbdd8c612e78780d18c03acc382d32080c9', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
+        return (index.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;
-            } }, index.h("div", { key: 'be596d399856ed966408ba1525fea9dbdf8fcc7e', class: "sd-select", ref: el => {
+            } }, index.h("div", { key: 'c291b661a968375c341d26ac48f7ff7fd4947e3e', class: "sd-select", ref: el => {
                 this.triggerRef = el;
-            } }, index.h("sd-select-trigger", { key: 'f8a29b1ac2469c60af8c7101d05157674566f00f', ref: el => {
+            } }, index.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) && (index.h("sd-portal", { key: '3cef3f95f69b09d0e4e8f6b01615df4cca031cff', ...portalProps }, index.h("sd-select-listbox", { key: 'e8833c547aa2e8084754c7a439d3860df5c97e5b', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, useSearch: this.useSearch, useSelectAll: this.useSelectAll, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
+            }, 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: 'bd7a612cf9ef74e157336a8de0170cebb61074dc', ...portalProps }, index.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 watchers() { return {
         "isOpen": [{
@@ -356,7 +356,10 @@ const SdSelectListbox = class {
         if (this.isDepth)
             return sdSelect_config.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 = sdSelect_config.isHtmlLabel(o.label) ? sdSelect_config.extractText(o.label) : o.label;
+            return labelText.toLowerCase().includes(keyword);
+        });
     }
     get isEmpty() {
         if (this.isDepth)
@@ -637,9 +640,9 @@ const SdSelectListbox = class {
             '--listbox-max-height': this.maxHeight ?? '260px',
             '--listbox-radius': `${sdSelect_config.LIST_BOX_LAYOUT.radius}px`,
         };
-        return (index.h("div", { key: '49f10bc8511fedcc0224729593498273088e16a3', class: "sd-select-listbox", style: cssVars }, this.showSearch && (index.h("sd-select-list-item-search", { key: '2eab7f77c0e900f90a79b2b2e9a7e60da2349409', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), index.h("div", { key: '46407c47a1d24ee8d997060c2b54f2443c163700', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
+        return (index.h("div", { key: '6c2cbad13f8aaa8c0552068c7cbc35a147bee77d', class: "sd-select-listbox", style: cssVars }, this.showSearch && (index.h("sd-select-list-item-search", { key: '052d783e27e2458aa397c77fe891dad4a440f09e', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), index.h("div", { key: 'bba95f3c4475d01a65562ba079c8666e3325195d', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
                 this.listEl = el;
-            } }, this.showSelectAll && (index.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 ? (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: '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 ? (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 +702,7 @@ const SdSelectTrigger = class {
                 ? sdSelect_config.SELECT_COLORS.icon.disabled
                 : sdSelect_config.SELECT_COLORS.icon.default,
         };
-        return (index.h("div", { key: '3a97ed909e3088528714682050a3986081e19433', ref: el => {
+        return (index.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,
@@ -710,7 +713,7 @@ const SdSelectTrigger = class {
                     e.preventDefault();
                     this.handleClick();
                 }
-            }, onFocus: this.handleFocus, onBlur: this.handleBlur }, index.h("div", { key: '986faba7d79980f0bcd10fff32495d2100e1805f', class: "sd-select-trigger__content" }, index.h("span", { key: 'c51b268186de7cdabcf06ac3d540ccb570c9e865', class: "sd-select-trigger__text" }, hasValue ? this.displayText : (this.placeholder ?? '선택')), index.h("sd-icon", { key: '8a03b400d5aef2e0ca9aeb4b1f6122db2932455a', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
+            }, onFocus: this.handleFocus, onBlur: this.handleBlur }, index.h("div", { key: 'be0b61c0550618602ef016504fa1672f7520fa93', class: "sd-select-trigger__content" }, hasValue && sdSelect_config.isHtmlLabel(this.displayText) ? (index.h("span", { class: "sd-select-trigger__text", ref: el => el && (el.innerHTML = sanitizeInlineHtml.sanitizeInlineHtml(this.displayText)) })) : (index.h("span", { class: "sd-select-trigger__text" }, hasValue ? this.displayText : (this.placeholder ?? '선택'))), index.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/cjs/sd-switch.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BGwB03Tk.js');
+var index = require('./index-C63F8C0_.js');
 
 var switchTokens = {
 	"switch": {
@@ -102,7 +102,7 @@ const SdSwitch = class {
             '--sd-switch-line-height': `${SWITCH_TYPOGRAPHY.lineHeight}px`,
             '--sd-switch-text-decoration': SWITCH_TYPOGRAPHY.textDecoration,
         };
-        return (index.h("label", { key: '04674e9fc781ac58b2e68ae30cb90c948de8b5e3', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, index.h("input", { key: 'b87970c38aa2ccbe3d8f91414c96c2f05aaaa818', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), index.h("div", { key: 'd87bcaf8b16d17401215dd962875dc585f747d65', class: "sd-switch__track" }, index.h("div", { key: '408a034cd6b063d9cd968f647995cc77dfdd0577', class: "sd-switch__knob" })), this.label && index.h("span", { key: '58d7ab18329007eac2e23b0fcda66a841e4df0c2', class: "sd-switch__label" }, this.label)));
+        return (index.h("label", { key: '54ebe92b29a80537e2e4380ffe096a252f883d10', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, index.h("input", { key: 'd18abbbf293434f07ae7dfa18b983b47cac1b774', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), index.h("div", { key: '76fef910e632b541c0b33c508e6001529df5614f', class: "sd-switch__track" }, index.h("div", { key: 'a66f4ecca5787f00febe19216a93ec62916e0541', class: "sd-switch__knob" })), this.label && index.h("span", { key: '948d2b7afc6e171ee329752cb85f8e361f6bbed8', class: "sd-switch__label" }, this.label)));
     }
 };
 SdSwitch.style = sdSwitchCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BGwB03Tk.js');
+var index = require('./index-C63F8C0_.js');
 var constants = require('./constants-DJRV1upE.js');
 var sdTable_config = require('./sd-table.config-BjJW74Zx.js');
 require('./component.table-DIxmbGBT.js');
@@ -845,24 +845,24 @@ const SdTable = class {
             '--table-selectable-width': `${sdTable_config.TABLE_SELECTABLE_COLUMN_WIDTH}px`,
             '--table-host-height': hostHeight,
         };
-        return (index.h(index.Host, { key: '57f92f3d10b928ca964c2ac9917f7dd64991591f', style: hostStyle }, index.h("div", { key: 'ea3de705492e1c6c7f99d251e9d6e07136c72ce1', class: "sd-table__container", style: {
+        return (index.h(index.Host, { key: '164ba96033be0195fa50e3d4d684059b9c471479', style: hostStyle }, index.h("div", { key: '2f1a1be73f86c72e7caa46981ee691d29bb237c7', class: "sd-table__container", style: {
                 '--table-width': this.width,
                 '--pagination-height': `${paginationHeight}px`,
-            } }, index.h("div", { key: '12ef88f9b81c94980806038924b194d143d3895a', class: {
+            } }, index.h("div", { key: '16976d24d4c21714183f9691b06c503b86388c54', class: {
                 'sd-table__wrapper': true,
                 'sd-table__wrapper--use-top': this.useTop,
-            } }, index.h("div", { key: 'b592db122ecf7f22903c9a49ebfb36138f7e18d6', class: {
+            } }, index.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 && (index.h("div", { key: '5e6badf9334ed7390f19d3c5df7335ea0efa25c4', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, index.h("sd-circle-progress", { key: '70bd57550b67c5d737bf8c6e7984703b963637f9', indeterminate: true }))), isNoData && (index.h(index.h.Fragment, null, index.h("div", { key: '280a829ddf5275c62a8310d3fe6914863e6b79d5', class: "sd-table__no-data-header-overlay" }), index.h("div", { key: '35f7584702b61c076ebcf61d16fedb30390e7cca', class: "sd-table__no-data" }, index.h("div", { key: 'a67af0bf322ebfa55fc515a63b6c299676fa4aa5', class: "sd-table__no-data-content", ref: el => {
+            } }, this.isLoading && (index.h("div", { key: 'facb26c0d1651d4a2a6e0dee5c1b8ca73586de89', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, index.h("sd-circle-progress", { key: '844b92fc9fc38f95d51092b698b67b685bcba076', indeterminate: true }))), isNoData && (index.h(index.h.Fragment, null, index.h("div", { key: '458c8e24b85c0e7c99afe940c3d5856e63bc582a', class: "sd-table__no-data-header-overlay" }), index.h("div", { key: 'bd29a77ac11da7e5d513955a4c4baa0dd89a623d', class: "sd-table__no-data" }, index.h("div", { key: '7db0e8e3888e97638f3c78d560e844cc0f8b2944', class: "sd-table__no-data-content", ref: el => {
                 this.noDataContentEl = el;
                 if (el)
                     this.syncNoDataContentObserver();
-            } }, index.h("slot", { key: '5bc8cf68c461359358edddfa085ee4121d6a3c24', name: "no-data" }, index.h("span", { key: '01cb29dc03a084530ef47170515066da65110aa3' }, this.resolvedNoDataLabel)))))), index.h("table", { key: 'e0f05c5ceab477809b0b26ddf2dc7a3fc5963076', 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: 'fa175041907d4af7e5e0db7cad6e9a3e16e96901', name: "no-data" }, index.h("span", { key: '3fae3a23d86dc543502f74574a4b5c3f026b9992' }, this.resolvedNoDataLabel)))))), index.h("table", { key: '9ae98e0697e045b308f7e584fb496692acade8ba', 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: '6f06c639cfc61e6be21ca9b598054ad17a07b879', class: "sd-table__pagination" }, index.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 && (index.h("sd-select", { key: '427db7075794819ebe0ce11e063480e87defc8b9', value: this.useInternalPagination
+            !this.useVirtualScroll && (index.h("div", { key: 'a0da779351490332035ec784bc301ea2cb017afd', class: "sd-table__pagination" }, index.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 && (index.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/cjs/sd-tabs.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BGwB03Tk.js');
+var index = require('./index-C63F8C0_.js');
 
 const tab = {
 	main: {
@@ -115,7 +115,7 @@ const TAB_SUB_TYPOGRAPHY = {
     default: tabTokens.tab.sub.default.typography,
 };
 
-const sdTabsCss = () => `sd-tabs{display:inline-block;width:100%}sd-tabs .sd-tabs{display:flex;flex-direction:row;gap:var(--sd-tabs-main-container-gap);border-bottom:var(--sd-tabs-main-border-width) solid var(--sd-tabs-main-selected-border);font-family:var(--sd-tabs-main-font-family)}sd-tabs .sd-tabs__tab{display:flex;align-items:center;justify-content:center;gap:var(--sd-tabs-main-gap);cursor:pointer;box-sizing:border-box;height:var(--sd-tabs-main-height);padding:0 var(--sd-tabs-main-padding-x);border:var(--sd-tabs-main-border-width) solid var(--sd-tabs-main-default-border);border-bottom:none;border-top-left-radius:var(--sd-tabs-main-radius);border-top-right-radius:var(--sd-tabs-main-radius);background-color:var(--sd-tabs-main-default-bg);color:var(--sd-tabs-main-default-text);font-size:var(--sd-tabs-main-font-size);line-height:var(--sd-tabs-main-line-height);font-weight:var(--sd-tabs-main-font-weight-default);transition:all 0.2s ease;position:relative;user-select:none}sd-tabs .sd-tabs__tab::before{content:"";position:absolute;inset:0;opacity:0;transition:all 0.2s;pointer-events:none}sd-tabs .sd-tabs__tab--selected{border-color:var(--sd-tabs-main-selected-border);color:var(--sd-tabs-main-selected-text);background-color:var(--sd-tabs-main-selected-bg)}sd-tabs .sd-tabs__tab--selected .sd-tabs__label::before{font-weight:var(--sd-tabs-main-font-weight-selected)}sd-tabs .sd-tabs__tab--selected:hover::before{background-color:var(--sd-tabs-main-selected-border);opacity:0.15}sd-tabs .sd-tabs__tab--unselected:hover::before{background-color:var(--sd-tabs-main-default-text);opacity:0.15}sd-tabs .sd-tabs__label{user-select:none;font-weight:var(--sd-tabs-main-font-weight-selected);visibility:hidden;position:relative;white-space:nowrap}sd-tabs .sd-tabs__label::before{content:attr(data-label);visibility:visible;position:absolute;inset:0;font-weight:var(--sd-tabs-main-font-weight-default);transition:font-weight 0.2s ease}sd-tabs .sd-tabs--sub{gap:var(--sd-tabs-sub-gap);border-bottom:none;font-family:var(--sd-tabs-sub-font-family)}sd-tabs .sd-tabs--sub .sd-tabs__tab{height:auto;padding:0 0 var(--sd-tabs-sub-content-gap) 0;border:none;border-radius:0;background-color:transparent;color:var(--sd-tabs-sub-default-text);font-size:var(--sd-tabs-sub-font-size);line-height:var(--sd-tabs-sub-line-height);font-weight:var(--sd-tabs-sub-font-weight-default)}sd-tabs .sd-tabs--sub .sd-tabs__tab::before{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--sd-tabs-sub-border-width);width:100%;background-color:var(--sd-tabs-sub-selected-line);opacity:0;transition:opacity 0.2s ease;inset:auto 0 0 0;pointer-events:none}sd-tabs .sd-tabs--sub .sd-tabs__tab--selected{color:var(--sd-tabs-sub-selected-text);background-color:transparent}sd-tabs .sd-tabs--sub .sd-tabs__tab--selected::before{opacity:1}sd-tabs .sd-tabs--sub .sd-tabs__tab--selected .sd-tabs__label::before{font-weight:var(--sd-tabs-sub-font-weight-selected)}sd-tabs .sd-tabs--sub .sd-tabs__label{font-weight:var(--sd-tabs-sub-font-weight-selected)}sd-tabs .sd-tabs--sub .sd-tabs__label::before{font-weight:var(--sd-tabs-sub-font-weight-default)}`;
+const sdTabsCss = () => `sd-tabs{display:inline-block;width:100%}sd-tabs .sd-tabs{display:flex;flex-direction:row;gap:var(--sd-tabs-main-container-gap);border-bottom:var(--sd-tabs-main-border-width) solid var(--sd-tabs-main-selected-border);font-family:var(--sd-tabs-main-font-family)}sd-tabs .sd-tabs__tab{display:flex;align-items:center;justify-content:center;gap:var(--sd-tabs-main-gap);cursor:pointer;box-sizing:border-box;height:var(--sd-tabs-main-height);padding:0 var(--sd-tabs-main-padding-x);border:var(--sd-tabs-main-border-width) solid var(--sd-tabs-main-default-border);border-bottom:none;border-top-left-radius:var(--sd-tabs-main-radius);border-top-right-radius:var(--sd-tabs-main-radius);background-color:var(--sd-tabs-main-default-bg);color:var(--sd-tabs-main-default-text);font-size:var(--sd-tabs-main-font-size);line-height:var(--sd-tabs-main-line-height);font-weight:var(--sd-tabs-main-font-weight-default);transition:all 0.2s ease;position:relative;user-select:none}sd-tabs .sd-tabs__tab::before{content:"";position:absolute;inset:0;opacity:0;transition:all 0.2s;pointer-events:none}sd-tabs .sd-tabs__tab--selected{border-color:var(--sd-tabs-main-selected-border);color:var(--sd-tabs-main-selected-text);background-color:var(--sd-tabs-main-selected-bg)}sd-tabs .sd-tabs__tab--selected .sd-tabs__label::before{font-weight:var(--sd-tabs-main-font-weight-selected)}sd-tabs .sd-tabs__tab--selected:hover::before{background-color:var(--sd-tabs-main-selected-border);opacity:0.15}sd-tabs .sd-tabs__tab--unselected:hover::before{background-color:var(--sd-tabs-main-default-text);opacity:0.15}sd-tabs .sd-tabs__label{user-select:none;font-weight:var(--sd-tabs-main-font-weight-selected);visibility:hidden;position:relative;white-space:nowrap}sd-tabs .sd-tabs__label::before{content:attr(data-label);visibility:visible;position:absolute;inset:0;font-weight:var(--sd-tabs-main-font-weight-default);transition:font-weight 0.2s ease}sd-tabs .sd-tabs--sub{gap:var(--sd-tabs-sub-gap);border-bottom:none;font-family:var(--sd-tabs-sub-font-family)}sd-tabs .sd-tabs--sub .sd-tabs__tab{height:auto;padding:0 0 var(--sd-tabs-sub-content-gap) 0;border:none;border-radius:0;background-color:transparent;color:var(--sd-tabs-sub-default-text);font-size:var(--sd-tabs-sub-font-size);line-height:var(--sd-tabs-sub-line-height);font-weight:var(--sd-tabs-sub-font-weight-default)}sd-tabs .sd-tabs--sub .sd-tabs__tab::before{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--sd-tabs-sub-border-width);width:100%;background-color:var(--sd-tabs-sub-selected-line);opacity:0;transition:opacity 0.2s ease;inset:auto 0 0 0;pointer-events:none}sd-tabs .sd-tabs--sub .sd-tabs__tab--selected{color:var(--sd-tabs-sub-selected-text);background-color:transparent}sd-tabs .sd-tabs--sub .sd-tabs__tab--selected::before{opacity:1}sd-tabs .sd-tabs--sub .sd-tabs__tab--selected .sd-tabs__label::before{font-weight:var(--sd-tabs-sub-font-weight-selected)}sd-tabs .sd-tabs--sub .sd-tabs__label{font-weight:var(--sd-tabs-sub-font-weight-selected)}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}`;
 
 const SdTabs = class {
     constructor(hostRef) {
@@ -126,6 +126,7 @@ const SdTabs = class {
     tabs = [];
     size = 'md';
     isSub = false;
+    vertical = false;
     update;
     valueChanged(newValue) {
         this.value = newValue;
@@ -148,6 +149,8 @@ const SdTabs = class {
         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) {
@@ -188,7 +191,7 @@ const SdTabs = class {
         };
     }
     render() {
-        return (index.h("div", { key: '92384577bf4ce85de90ae05a32e44715e595fe16', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index$1) => {
+        return (index.h("div", { key: '277188138dd50992b468b35f723cc3f852ad38c3', 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-td.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BGwB03Tk.js');
+var index = require('./index-C63F8C0_.js');
 var constants = require('./constants-DJRV1upE.js');
 
 const sdTdCss = () => `sd-td *{box-sizing:border-box}sd-td{display:contents}sd-td.align-left{text-align:left}sd-td.align-center{text-align:center}sd-td.align-right{text-align:right}`;
@@ -158,7 +158,7 @@ const SdTd = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '1d7123e1f35cfb513a1fa89b4d60f8dde7715a2f', class: { [`align-${this.align}`]: Boolean(this.align) } }, index.h("slot", { key: 'f7b9266106a6df93e2101ca9a324035960281a6f' })));
+        return (index.h(index.Host, { key: '95f97474c4d00a35085c558bf43593322a9f69e7', class: { [`align-${this.align}`]: Boolean(this.align) } }, index.h("slot", { key: 'f67d1e8b125c10446dac3abdfa0da01bfb83f470' })));
     }
     static get watchers() { return {
         "field": [{

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

@@ -1,19 +1,19 @@
 'use strict';
 
-var index = require('./index-BGwB03Tk.js');
+var index = require('./index-C63F8C0_.js');
 
 const textLink = {
-	gap: "4",
-	size: {
-		icon: "16"
-	},
-	typography: {
-		"default": {
-			fontSize: "12",
-			textDecoration: "none"},
-		underline: {
-			fontSize: "12",
-			textDecoration: "underline"}
+	sm: {
+		gap: "4",
+		icon: "16",
+		typography: {
+			"default": {
+				fontSize: "12",
+				textDecoration: "none"},
+			underline: {
+				fontSize: "12",
+				textDecoration: "underline"}
+		}
 	},
 	content: {
 		disabled: "#888888"
@@ -28,15 +28,15 @@ var textLinkTokens = {
 };
 
 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)
 };
 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,
 };
 const TEXT_LINK_COLORS = {
     content: textLinkTokens.textLink.content,
@@ -54,7 +54,7 @@ const SdTextLink = class {
     icon = '';
     iconColor = '';
     labelClass = '';
-    useArrow = false;
+    rightArrow = 'none';
     underline = false;
     disabled = false;
     click;
@@ -76,7 +76,7 @@ const SdTextLink = class {
             '--sd-text-link-text-decoration': typo.textDecoration,
             ...(this.disabled ? { '--sd-text-link-color': TEXT_LINK_COLORS.content.disabled } : {}),
         };
-        return (index.h("span", { key: '23ddcce86220acc4e6c8a585e4240ecb7baee9f8', role: "button", tabindex: this.disabled ? -1 : 0, class: {
+        return (index.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 => {
@@ -84,13 +84,13 @@ const SdTextLink = class {
                     e.preventDefault();
                     this.handleClick();
                 }
-            } }, this.icon && (index.h("sd-icon", { key: 'd265458a74db086efa270fd165fa5fa9855b708b', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), index.h("span", { key: '9cb7e5909036aea5b70496fbe5ca69ce10ab3035', class: labelClassName }, this.label), this.useArrow && (index.h("span", { key: '5ebe27c5929095d1799d81e930b2efa8d616f5bd', class: "sd-text-link__arrow", style: {
+            } }, this.icon && (index.h("sd-icon", { key: 'caa180d6b2cdc054c4c2becc486ac0bb5f1abdf7', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), index.h("span", { key: '65940e935169cfc2fabe1b52ec8a70111f726519', class: labelClassName }, this.label), this.rightArrow && this.rightArrow !== 'none' && (index.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',
-            } }, index.h("sd-icon", { key: '5fc735391386ac733b77bfac6947cccc61fad198', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
+            } }, index.h("sd-icon", { key: '29da741e45513a6d33876c4ed4316cb6d6418266', name: this.rightArrow === 'chevron' ? 'chevronRight' : 'caretRight', size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
     }
 };
 SdTextLink.style = sdTextLinkCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BGwB03Tk.js');
+var index = require('./index-C63F8C0_.js');
 
 const DEFAULT_DURATION = 4000;
 const DEFAULT_MAX_VISIBLE = 3;
@@ -234,7 +234,7 @@ const SdToastContainer = class {
         const activeToasts = toasts.filter(t => t.state !== 'exiting').reverse();
         const indexMap = new Map();
         activeToasts.forEach((t, i) => indexMap.set(t.id, i));
-        return (index.h("div", { key: '1de55d255b75842f52e3f0a147a69493ed1a7de5', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
+        return (index.h("div", { key: '2b0bc86b7e2ea19a44f3c0b870ce5dec1de3a140', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
                 this.expanded = true;
                 this.pauseTimers();
             }, onMouseLeave: () => {

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

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

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

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

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BGwB03Tk.js');
+var index = require('./index-C63F8C0_.js');
 
 const TooltipArrow = (props) => (index.h("svg", { width: "16", height: "12", viewBox: "0 0 16 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, index.h("path", { d: "M8.83205 10.7519C8.43623 11.3457 7.56377 11.3457 7.16795 10.7519L1.04907e-06 -1.39876e-06L16 0L8.83205 10.7519Z", fill: "currentColor" })));
 

package/dist/cjs/{useDatePicker-dCuEgvjX.js → useDatePicker-iMd6WToc.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var component_datepicker = require('./component.datepicker-Cw_-oidk.js');
+var component_datepicker = require('./component.datepicker-CUQbDSku.js');
 
 const CALENDAR_LAYOUT = {
     bg: component_datepicker.datepickerTokens.datepicker.calendar.bg,

package/dist/collection/collection-manifest.json

@@ -20,6 +20,7 @@
     "components/sd-icon/sd-icon.js",
     "components/sd-card/sd-card.js",
     "components/sd-chip/sd-chip.js",
+    "components/sd-chip-input/sd-chip-input.js",
     "components/sd-circle-progress/sd-circle-progress.js",
     "components/sd-confirm-modal/sd-confirm-modal.js",
     "components/sd-tag/sd-tag.js",

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

@@ -4,7 +4,7 @@ export class SdBadge {
     color = 'blue';
     render() {
         const resolvedColor = BADGE_COLOR_MAP[this.color] ?? BADGE_COLOR_MAP.blue;
-        return (h("div", { key: '5fec3220f60c6567d1aa5de6aa3d1c7c9f9e605b', class: "sd-badge", style: { '--sd-badge-color': resolvedColor } }, h("div", { key: '892f2c5c1d004d172c06bc0871688d30e449e80f', class: "sd-badge__dot" })));
+        return (h("div", { key: '0f337c449618a6182f00d9557305f42983610a98', class: "sd-badge", style: { '--sd-badge-color': resolvedColor } }, h("div", { key: '68a559c01a6b65dab5bee08236d36bea565633a9', class: "sd-badge__dot" })));
     }
     static get is() { return "sd-badge"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-barcode-input/sd-barcode-input.js

@@ -102,7 +102,7 @@ export class SdBarcodeInput {
             '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
             '--sd-system-color-field-bg-default': BARCODE_INPUT_COLORS.bg.barcode,
         };
-        return (h("sd-field", { key: 'c009f4c33b31e9498c230e9a0f4064925a1e5757', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, 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("label", { key: 'a614817eab514a80f7132ebb92ebb0b8bb8009e4', class: "sd-barcode-input__content" }, h("slot", { key: '16a0bf4c55eafec3fb827ba8fe54f61e546fbbca', name: "prefix" }), h("input", { key: 'de9e2abcfe4b8f34084feb8691ef6c8183568932', name: this.name, ref: el => (this.nativeEl = el), class: `sd-barcode-input__native ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: 'dbfc3e2c03b20da68e80cc3855cace42aae268ec', name: "suffix" }), this.clearable && this.internalValue && (h("sd-ghost-button", { key: '05670236ffb93c7b894bdea9763d11adcab75e05', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-barcode-input__clear-icon", onClick: async () => {
+        return (h("sd-field", { key: '80a633774754f20f136ae6bd7319a7be69719155', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, 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("label", { key: 'a48fabe8c70f13337386f136e63c495aadbb4bf9', class: "sd-barcode-input__content" }, h("slot", { key: '5b192ccacd1cdb7b2736c422d56ab54cd2c90e0e', name: "prefix" }), h("input", { key: '01677b39141de0213c12160632a6b56da3671cbd', name: this.name, ref: el => (this.nativeEl = el), class: `sd-barcode-input__native ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: '55a3a9e0cfa1ea615f3ca502c3e5bdf85d9f1a3d', name: "suffix" }), this.clearable && this.internalValue && (h("sd-ghost-button", { key: '5d410c58f7ec630051a39405e966663bb7aaa64b', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-barcode-input__clear-icon", onClick: async () => {
                 if (this.disabled)
                     return;
                 this.internalValue = '';

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

@@ -144,11 +144,19 @@ export const PRESET_HOVER_BACKGROUNDS = {
     danger: buttonTokens.button.danger.strong.bg.hover,
     danger_outline: buttonTokens.button.danger.outline.bg.hover,
 };
-export const PRESET_CONTENT_COLORS = {
+export const PRESET_TEXT_COLORS = {
     primary: buttonTokens.button.brand.strong.content,
     secondary: buttonTokens.button.brand.subtle.content,
     primary_outline: buttonTokens.button.brand.outline.content,
-    neutral_outline: buttonTokens.button.neutral.outline.content,
+    neutral_outline: buttonTokens.button.neutral.outline.text,
+    danger: buttonTokens.button.danger.strong.content,
+    danger_outline: buttonTokens.button.danger.outline.content,
+};
+export const PRESET_ICON_COLORS = {
+    primary: buttonTokens.button.brand.strong.content,
+    secondary: buttonTokens.button.brand.subtle.content,
+    primary_outline: buttonTokens.button.brand.outline.content,
+    neutral_outline: buttonTokens.button.neutral.outline.icon,
     danger: buttonTokens.button.danger.strong.content,
     danger_outline: buttonTokens.button.danger.outline.content,
 };