@sellmate/design-system 1.0.38 → 1.0.40

package/dist/cjs/sd-confirm-modal_2.cjs.entry.js

@@ -60,7 +60,7 @@ const SdConfirmModal = class {
     mainButtonName;
     mainButtonLabel = '확인';
     subButtonLabel = '';
-    tagPreset;
+    tagPreset = 'square_sm_grey';
     tagLabel = '';
     slotLabel = '';
     tagContents;
@@ -96,7 +96,7 @@ const SdConfirmModal = class {
         return this.mainButtonName ?? CONFIRM_MODAL_DEFAULT_BUTTON[this.type];
     }
     get hasTagContent() {
-        return !!(this.tagLabel && this.tagPreset);
+        return !!(this.tagLabel || this.slotLabel);
     }
     get showContentBox() {
         return !!this.tagContents || this.hasTagContent || this.hasSlottedContent;
@@ -113,9 +113,9 @@ const SdConfirmModal = class {
     render() {
         const iconName = CONFIRM_MODAL_ICON_MAP[this.type];
         const iconColor = CONFIRM_MODAL_ICON_COLOR[this.type];
-        return (index.h("div", { key: '79b2bc6c82470f18097f709af199379b7f9c33e9', class: "sd-confirm-modal" }, index.h("sd-icon", { key: '20d09afc087d1f1d293295dfda2b7c0b65fca032', class: "sd-confirm-modal__close-button", name: "close", size: CLOSE_ICON_SIZE, color: CLOSE_ICON_COLOR, onClick: () => this.close.emit() }), index.h("sd-icon", { key: '7ef48200946dceef27e32bf51e2e57ee7db9e5c8', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor }), index.h("h2", { key: '7937da9ba581a59b6d33cef5c63ccaf01714cc71', class: `sd-confirm-modal__title ${this.titleClass}` }, this.modalTitle), index.h("div", { key: 'ded09b7f81f990fd5b4ce7bb78eebf4578012b41', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (index.h("div", { key: '25b0ad2313003f0fa5a119d63e80d1a96e1af5f5', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (index.h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg }))))), this.showContentBox && (index.h("div", { key: '51d76d5923a384ac82d1e4a463981ab25655037d', class: "sd-confirm-modal__content-box" }, this.tagContents ? (index.h("div", { class: "sd-confirm-modal__custom-content", ref: el => {
+        return (index.h("div", { key: '6fc7e6c41e74e44c1eb6228375a8230ffa46dab5', class: "sd-confirm-modal" }, index.h("sd-icon", { key: '79e901efb1b32fdd8d7be3bd8f33eb2d606cd25c', class: "sd-confirm-modal__close-button", name: "close", size: CLOSE_ICON_SIZE, color: CLOSE_ICON_COLOR, onClick: () => this.close.emit() }), index.h("sd-icon", { key: '8d80711f1ddea567a388b0ad7c76608f0d794fde', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor }), index.h("h2", { key: '47dcfe8774e2d14d4edc8d1c23fff413146119e6', class: `sd-confirm-modal__title ${this.titleClass}` }, this.modalTitle), index.h("div", { key: 'fb18833bd9f5cb858f2f5b05b7b45d5e0f3cdb72', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (index.h("div", { key: '9d158176578cb4374fe1ca37b62b4d61e81df6a1', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (index.h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg }))))), this.showContentBox && (index.h("div", { key: '4f781266ecdd43ac51195e1ee473d67d2bcff681', class: "sd-confirm-modal__content-box" }, this.tagContents ? (index.h("div", { class: "sd-confirm-modal__custom-content", ref: el => {
                 this.customContentRef = el;
-            } })) : (index.h("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.hasTagContent && index.h("sd-tag", { name: this.tagPreset, label: this.tagLabel }), this.slotLabel && index.h("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel))))), (this.bottomMessage ?? []).length > 0 && (index.h("div", { key: '8ef574ff752ccee7ba28cb4824fc7968bb86b344', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (index.h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg })))))), index.h("div", { key: 'bd5e3dc0bd36c33a7b47ce328121427d44d53a86', class: "sd-confirm-modal__button" }, this.subButtonLabel && (index.h("sd-button-v2", { key: 'ff8c7487883f2a4c740baa8966e641975bc4ba14', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.close.emit() })), index.h("sd-button-v2", { key: '176cfe2404deb3d57e4a87206a339f797536b51c', name: this.resolvedMainButton, label: this.mainButtonLabel, onSdClick: () => this.confirm.emit() }))));
+            } })) : (index.h("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && index.h("sd-tag", { name: this.tagPreset, label: this.tagLabel }), this.slotLabel && (index.h("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (index.h("div", { key: '04baced447a0cf11406df52b734f73ea39ff00d2', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (index.h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg })))))), index.h("div", { key: '7054a3388d93610b21152c4c3df34445b7b64cdd', class: "sd-confirm-modal__button" }, this.subButtonLabel && (index.h("sd-button-v2", { key: '25fdec9094700beaf4d6fa0dee15920d6c3c294a', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.close.emit() })), index.h("sd-button-v2", { key: '7611e5b0a187b1588026308220b09e3239f59463', name: this.resolvedMainButton, label: this.mainButtonLabel, onSdClick: () => this.confirm.emit() }))));
     }
 };
 SdConfirmModal.style = sdConfirmModalCss();
@@ -188,9 +188,9 @@ const SdNoticeModal = class {
         }
     }
     render() {
-        return (index.h("div", { key: '522489e0b0c0706b25f5e99215d8bb75e94f1596', class: "sd-notice-modal" }, index.h("sd-icon", { key: 'e6ca52391427d0f1a429feeb97337e716aae5920', class: "sd-notice-modal__close-button", name: "close", size: CLOSE_ICON_SIZE, color: CLOSE_ICON_COLOR, onClick: () => this.close.emit() }), index.h("h2", { key: '7c7f4c3ad01d421a7f75f14d93cc0ba58526bfd6', class: `sd-notice-modal__title ${this.titleClass}` }, this.modalTitle), index.h("div", { key: 'afc982ef15da5884f181e189f78a9986a467ff40', class: "sd-notice-modal__body" }, (this.topMessage ?? []).length > 0 && (index.h("div", { key: '028b03030a7a1b29ec54910807878da39f8ea156', class: "sd-notice-modal__message" }, (this.topMessage ?? []).map(msg => (index.h("p", { class: "sd-notice-modal__message-text", innerHTML: msg }))))), this.showContentBox && (index.h("div", { key: 'fa12a72c4ac271d6e57ec85415f6144f1b38b146', class: "sd-notice-modal__content-box" }, this.tagContents ? (index.h("div", { class: "sd-notice-modal__custom-content", ref: el => {
+        return (index.h("div", { key: 'bdabd03353df6668e77ea29477e79586b9ee18ad', class: "sd-notice-modal" }, index.h("sd-icon", { key: '2369161b7a25a72da40235f32f6cc006c8b060bd', class: "sd-notice-modal__close-button", name: "close", size: CLOSE_ICON_SIZE, color: CLOSE_ICON_COLOR, onClick: () => this.close.emit() }), index.h("h2", { key: '9a8b1c37f874b5299911ae5f081f692cd2bce470', class: `sd-notice-modal__title ${this.titleClass}` }, this.modalTitle), index.h("div", { key: 'c44382d6484301d3ed4081cda456628bad387f53', class: "sd-notice-modal__body" }, (this.topMessage ?? []).length > 0 && (index.h("div", { key: '81ff93a305aeb3e1fac90362e0a5158355b96d88', class: "sd-notice-modal__message" }, (this.topMessage ?? []).map(msg => (index.h("p", { class: "sd-notice-modal__message-text", innerHTML: msg }))))), this.showContentBox && (index.h("div", { key: '5d3131ed1aba498fdadf4b035df9c1b178dd1b36', class: "sd-notice-modal__content-box" }, this.tagContents ? (index.h("div", { class: "sd-notice-modal__custom-content", ref: el => {
                 this.customContentRef = el;
-            } })) : (index.h("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.hasTagContent && index.h("sd-tag", { name: this.tagPreset, label: this.tagLabel }), this.slotLabel && index.h("span", { class: "sd-notice-modal__slot-label" }, this.slotLabel))))), (this.bottomMessage ?? []).length > 0 && (index.h("div", { key: '39008c0c41e84a92b02aa310e32dacf7b1b3ea83', class: "sd-notice-modal__message" }, (this.bottomMessage ?? []).map(msg => (index.h("p", { class: "sd-notice-modal__message-text", innerHTML: msg })))))), index.h("div", { key: '54062ddaf99170af5bcf8caa1f6d80ce3f24b4b2', class: "sd-notice-modal__button" }, this.subButtonLabel && (index.h("sd-button-v2", { key: 'c0365120540bf5e7f9e43955a8099e019837e4d6', name: NOTICE_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.close.emit() })), index.h("sd-button-v2", { key: 'c51c93f72ebbe91e87aa0d0d561227f6b66b5e74', name: NOTICE_BUTTON_PRESET, label: this.mainButtonLabel, onSdClick: () => this.confirm.emit() }))));
+            } })) : (index.h("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.hasTagContent && index.h("sd-tag", { name: this.tagPreset, label: this.tagLabel }), this.slotLabel && index.h("span", { class: "sd-notice-modal__slot-label" }, this.slotLabel))))), (this.bottomMessage ?? []).length > 0 && (index.h("div", { key: '0c9e040dbcdb0873f6a4e1606ef0fa9729340860', class: "sd-notice-modal__message" }, (this.bottomMessage ?? []).map(msg => (index.h("p", { class: "sd-notice-modal__message-text", innerHTML: msg })))))), index.h("div", { key: '7fe0737620fd3583300a62eb5b55704147a7511e', class: "sd-notice-modal__button" }, this.subButtonLabel && (index.h("sd-button-v2", { key: '70f0d98a14eb0184ac08cd16aa0676e848fa035d', name: NOTICE_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.close.emit() })), index.h("sd-button-v2", { key: '54554ce5c26fa59924db03728628cca8538de081', name: NOTICE_BUTTON_PRESET, label: this.mainButtonLabel, onSdClick: () => this.confirm.emit() }))));
     }
 };
 SdNoticeModal.style = sdNoticeModalCss();

package/dist/cjs/sd-date-picker.cjs.entry.js

@@ -37,7 +37,7 @@ const SdDatePicker = class {
         this.viewChange.emit(e.detail);
     };
     render() {
-        return (index.h("div", { key: '9f1e5b391dec4623e6f628449a459ab1a6f6ec7d', class: { 'sd-date-picker': true, 'sd-date-picker--disabled': this.disabled } }, index.h("sd-input", { key: '5448efd4117535e96d1273395571e12bdf3063ea', ref: el => (this.inputEl = el), value: this.value, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-picker__input", onClick: () => this.openMenu() }, index.h("sd-icon", { key: '97191fcbf8d9b1af8553ad867b38a189c480c6d8', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (index.h("sd-portal", { key: '945477bd6ef69263a9cefae982474d6889dd8d58', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, index.h("div", { key: '270188ccf5d174be496d31abcf9d8570e37a5ff0', class: "sd-date-picker__menu" }, index.h("sd-calendar", { key: 'f9d50e345744d0ce127028edba60ba4c17dba372', value: this.value, selectable: this.selectable, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange }))))));
+        return (index.h("div", { key: '9f1e5b391dec4623e6f628449a459ab1a6f6ec7d', class: { 'sd-date-picker': true, 'sd-date-picker--disabled': this.disabled } }, index.h("sd-input", { key: '8473fc052a8e61b1b403328046b984b858a69ccd', ref: el => (this.inputEl = el), value: this.value, addonLabel: this.label, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-picker__input", onClick: () => this.openMenu() }, index.h("sd-icon", { key: 'ccc4ac16bcb3e340e574d1098d229d93bba32671', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (index.h("sd-portal", { key: '9b85074b30fc5d6e8204c1e815fe325871e8205a', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, index.h("div", { key: 'fff4a6d1d2b1c0923b74abcf453a32829ee5865a', class: "sd-date-picker__menu" }, index.h("sd-calendar", { key: 'f157822fca3dffb9fbbaa05e9d9ba67ba6a440bb', value: this.value, selectable: this.selectable, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange }))))));
     }
 };
 SdDatePicker.style = sdDatePickerCss();

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

@@ -4,18 +4,7 @@ var index = require('./index-Qvv0fGgj.js');
 var baseDropdownEvent = require('./base-dropdown-event-BTPlZ1KF.js');
 var sdButtonV2_config = require('./sd-button-v2.config-DniiNqy_.js');
 var component_button = require('./component.button-BjTPq93d.js');
-
-const color = {
-	bg: {
-		accent: {
-			"default": "#0075FF"}},
-	content: {
-		secondary: "#555555",
-		inverse: "#FFFFFF"
-	}};
-var systemTokens = {
-	color: color
-};
+var system = require('./system-lN7yOMPF.js');
 
 const DROPDOWN_BUTTON_NAMES = Object.keys(sdButtonV2_config.BUTTON_CONFIG).filter((name) => !name.endsWith('_lg'));
 const DROPDOWN_BUTTON_CONFIG = Object.fromEntries(DROPDOWN_BUTTON_NAMES.map(name => [name, sdButtonV2_config.BUTTON_CONFIG[name]]));
@@ -35,9 +24,9 @@ const PRESET_DIVIDER_COLORS = {
     danger: component_button.buttonTokens.danger.strong.dropdown.divider,
     danger_outline: PRESET_BORDER_COLORS.danger_outline,
 };
-const MENU_ITEM_COLOR = systemTokens.color.content.secondary;
-const MENU_ITEM_ACTIVE_BACKGROUND = systemTokens.color.bg.accent.default;
-const MENU_ITEM_ACTIVE_COLOR = systemTokens.color.content.inverse;
+const MENU_ITEM_COLOR = system.systemTokens.color.content.secondary;
+const MENU_ITEM_ACTIVE_BACKGROUND = system.systemTokens.color.bg.accent.default;
+const MENU_ITEM_ACTIVE_COLOR = system.systemTokens.color.content.inverse;
 const PRESET_MENU_ITEM_COLORS = {
     primary: MENU_ITEM_COLOR,
     secondary: MENU_ITEM_COLOR,

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

@@ -48,14 +48,14 @@ const SdPopover = class {
         this.showPopover = false;
     };
     render() {
-        return (index.h(index.Fragment, { key: '583cb5e2f7cb123dc1a11edeff0e6f6075e95950' }, this.label ? (index.h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onSdClick: () => (this.showPopover = !this.showPopover) })) : (index.h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })), this.showPopover && (index.h("sd-floating-portal", { key: 'a0a4242a6cd1925a29b2e7be27f50b20377120de', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, index.h("div", { key: '251ddf3c159ae0f79c32643da7e1bef3d25caeeb', class: {
+        return (index.h(index.Fragment, { key: '205b8f574ce69afcb2abef1b0d0d6ec769230783' }, this.label ? (index.h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onSdClick: () => (this.showPopover = !this.showPopover) })) : (index.h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })), this.showPopover && (index.h("sd-floating-portal", { key: 'af82589e6ed773709c83a6855c37b1ac7092b9ec', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, index.h("div", { key: 'dfee40fa54b436a43583ebdc71830e6d590e1793', class: {
                 'sd-floating-menu': true,
                 'sd-floating-menu--popover': true,
                 [`sd-floating-menu--${this.placement}`]: true,
                 [this.menuClass]: !!this.menuClass,
             }, style: {
                 '--sd-floating-bg': popoverTokens.popover.bg,
-            } }, index.h("i", { key: '4ce84717389086099d17ac8c69519d4dfd707d64', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, index.h(tooltipArrow.TooltipArrow, { key: 'da5b99c7236bd9e6199971121cafc2537b5d96ee' })), index.h("div", { key: 'cc5dc4fc0abb24b4e515eae7031c812bf1178633', class: "sd-floating-menu__content" }, this.menuTitle && index.h("div", { key: '818f93a2a9820422652df595e0fd027873f6a93d', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (index.h("div", { key: '4f9cd0152c8f3697f419b63e73170a95def35a7b', class: "sd-floating-menu__messages" }, this.messages.map(message => (index.h("div", null, message))))), this.buttons.length > 0 && (index.h("div", { key: 'd1fe902b212315eab787b73ac3f38b0bf67f7955', class: `sd-floating-menu__buttons sd-floating-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (index.h("sd-button", { ...button })))))), this.useClose && (index.h("button", { key: 'b043c92f872ef490715ee9735a413835d9350e32', title: "close", class: "sd-floating-menu__close-button", onClick: () => this.handleClose() }, index.h("sd-icon", { key: '19b5e26bec245315ff2d1187b7559bcf592a2490', name: "close", size: popoverTokens.popover.close.icon, color: popoverTokens.popover.close.color }))))))));
+            } }, index.h("i", { key: '388ac52f514ddd9247e79d20309a1de029fcd601', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, index.h(tooltipArrow.TooltipArrow, { key: '2502e1a63e3dca7e9c6d66805a9ec04e3106dd99' })), index.h("div", { key: 'e12b0df1dbdfe4b34de81ed231e1578bb5361afa', class: "sd-floating-menu__content" }, this.menuTitle && index.h("div", { key: '91f068beee3338f547157db06a0eee4f5e88355d', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (index.h("div", { key: '1283a6209c1c062d925ae1c32ba2a4f2aa98c8fa', class: "sd-floating-menu__messages" }, this.messages.map(message => (index.h("div", null, message))))), this.buttons.length > 0 && (index.h("div", { key: '130f5468eb8ac34bb02dce9a5a55c1fad17c8dcf', class: `sd-floating-menu__buttons sd-floating-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (index.h("sd-button", { ...button })))))), this.useClose && (index.h("button", { key: '330fb79d032bac9da45afec3ccf0f2ec6e3dafba', title: "close", class: "sd-floating-menu__close-button", onClick: () => this.handleClose() }, index.h("sd-icon", { key: '7ba5d1e112ac776bb29253ac2cee510d36147ced', name: "close", size: popoverTokens.popover.close.icon, color: popoverTokens.popover.close.color }))))))));
     }
     static get watchers() { return {
         "show": [{

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

@@ -41,10 +41,10 @@ const SdProgress = class {
         return this.statusColor[this.progressStatus];
     }
     render() {
-        return (index.h("div", { key: '6d111e7d5de2efd5565cc92fbef5f0d9ee8cb2ec', style: {
+        return (index.h("div", { key: '864f669831515b9c149ad579b6233e960eee79a9', style: {
                 '--progress-color': this.progressColor,
                 '--progress-percentage': `${this.progressPercentage}%`,
-            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && index.h("div", { key: '8ff2f14809c2ae3107debd1f9bcee510e2d5594f', class: "sd-progress__label" }, this.label)));
+            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && index.h("div", { key: '42920cc06b249371ec7d98c07d2185d71265a538', class: "sd-progress__label" }, this.label)));
     }
     renderBarProgress() {
         return (index.h("div", { class: `sd-progress__bar sd-progress__bar--${this.progressStatus}` }, index.h("div", { class: ['sd-progress__bar__percent', this.progressPercentage < 100 ? 'proceed' : ''].join(' ') }), index.h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--left" }, this.progressPercentage, "%"), index.h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--right" }, this.progressPercentage, "%")));

package/dist/cjs/sd-select-group.cjs.entry.js

@@ -28,7 +28,7 @@ const SdSelectGroup = class extends baseDropdownEvent.BaseDropdownEvent {
     searchable = false;
     // props - label
     label = '';
-    insideLabel = false;
+    addonLabel = '';
     icon = undefined;
     labelTooltip = '';
     labelTooltipProps = null;
@@ -275,7 +275,7 @@ const SdSelectGroup = class extends baseDropdownEvent.BaseDropdownEvent {
         });
     }
     render() {
-        return (index.h("sd-field", { key: '343870c96352644f1f32570296473d2f06a65750', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, insideLabel: this.insideLabel, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, index.h("div", { key: '05d7ced4e332e5ab2f66b44b517f4e59b12ecf64', class: {
+        return (index.h("sd-field", { key: '2ff7d25f8fd9724fead7722757f174610d7c084d', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, addonLabel: this.addonLabel, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, index.h("div", { key: '57d0ff569579bb56810891a8e50a89e8b82096ac', class: {
                 'sd-select-group': true,
                 'sd-select-group--open': this.isOpen,
                 'sd-select-group--disabled': this.disabled,

package/dist/cjs/sd-select-multiple.cjs.entry.js

@@ -155,7 +155,7 @@ const SdSelectMultiple = class extends baseDropdownEvent.BaseDropdownEvent {
         this.handleOptionSelection(option);
     };
     render() {
-        return (index.h("sd-field", { key: '8de4ef57a8dd1c6f2fd6ab9ae22fe4df3e99ed16', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, index.h("div", { key: '8b57b5500a152853db07de205ab006f7a92f30a8', class: {
+        return (index.h("sd-field", { key: '022f39a42986c29f8cab7f6801a7d2e4bbd5aaa5', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, index.h("div", { key: '93e4dd74f1b0ad76429f37c5fe6a9cffb98697d5', class: {
                 'sd-select-multiple': true,
                 'sd-select-multiple--open': this.isOpen,
                 'sd-select-multiple--disabled': this.disabled,

package/dist/cjs/sd-select-option-group.cjs.entry.js

@@ -48,7 +48,7 @@ const SdSelectOptionGroup = class {
         }
     };
     render() {
-        return (index.h("div", { key: '7581caff61d1257d653b6f58b8d76c21225b3cc5', class: {
+        return (index.h("div", { key: '70ab9a558faf068cfc4eb0a5f6a29453ceedc6ec', class: {
                 'sd-select__option-group': true,
                 'sd-select__option-group--selected': !!this.isSelected,
                 'sd-select__option-group--disabled': !!this.option.disabled,
@@ -57,10 +57,10 @@ const SdSelectOptionGroup = class {
                 'sd-select__option-group--group': this.option.type === 'group',
                 'sd-select__option-group--subgroup': this.option.type === 'subgroup',
                 'sd-select__option-group--item': this.option.type === 'item',
-            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, index.h("div", { key: 'ddb33f6afaa6bc6d6dd3dc494f6ec74b9c023a42', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (index.h("sd-checkbox", { key: '14f2c7fc347718d2909e5006bf2500a9a51b0a66', value: this.isSelected, disabled: this.option.disabled, onClick: e => {
+            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, index.h("div", { key: 'ca5dc0033231ab204a8688f98453742cdbde7d26', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (index.h("sd-checkbox", { key: 'bba6cb9fe649f6eda82ba287f73d0142e02c53c2', value: this.isSelected, disabled: this.option.disabled, onClick: e => {
                 e.preventDefault();
                 this.handleClick(this.option, this.isSelected, e);
-            } })), index.h("span", { key: '99415ed662cc2f8f29d31e3811eb4496f8fcac47', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (index.h("span", { key: 'a3c7dc6455a94ecd4587f8b13b4d1f10e3b58819', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
+            } })), index.h("span", { key: '7d03c080b7f5b92881389bfec787015a6ac55fa1', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (index.h("span", { key: '7066453f92eac7549569db6854e3dc32515d80b9', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
     }
 };
 SdSelectOptionGroup.style = sdSelectOptionGroupCss();

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

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-Qvv0fGgj.js');
-var sdSelectV2_config = require('./sd-select-v2.config-DedHbMz4.js');
+var sdSelectV2_config = require('./sd-select-v2.config-DZrPJ6OS.js');
 
 const sdSelectV2ListItemCss = () => `sd-select-v2-list-item{display:block}sd-select-v2-list-item .sd-select-v2-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-v2-list-item .sd-select-v2-list-item--selectable{cursor:pointer}sd-select-v2-list-item .sd-select-v2-list-item--depth1-group{border-top:var(--list-item-border-top);font-weight:700}sd-select-v2-list-item .sd-select-v2-list-item--depth2-group{font-weight:500}sd-select-v2-list-item .sd-select-v2-list-item--selectable:not(.sd-select-v2-list-item--disabled):hover{background:var(--list-item-bg-hover);color:var(--list-item-color-hover)}sd-select-v2-list-item .sd-select-v2-list-item--focused.sd-select-v2-list-item--selectable:not(.sd-select-v2-list-item--disabled){background:var(--list-item-bg-hover);color:var(--list-item-color-hover)}sd-select-v2-list-item .sd-select-v2-list-item--selected:not(.sd-select-v2-list-item--group){font-weight:700;color:var(--list-item-bg-hover)}sd-select-v2-list-item .sd-select-v2-list-item--selected:hover,sd-select-v2-list-item .sd-select-v2-list-item--selected.sd-select-v2-list-item--focused{color:var(--list-item-color-hover)}sd-select-v2-list-item .sd-select-v2-list-item--disabled{color:var(--list-item-color-disabled);cursor:not-allowed}sd-select-v2-list-item .sd-select-v2-list-item__label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}sd-select-v2-list-item .sd-select-v2-list-item__count{flex-shrink:0;font-weight:500;color:var(--list-item-color-disabled)}sd-select-v2-list-item .sd-select-v2-list-item__checkbox{flex-shrink:0}`;
 
@@ -73,7 +73,7 @@ const SdSelectV2ListItem = class {
         if (isDepth1Group) {
             cssVars['--list-item-border-top'] = `${sdSelectV2_config.LIST_ITEM_COLORS.depth1.borderWidth}px solid ${sdSelectV2_config.LIST_ITEM_COLORS.depth1.border}`;
         }
-        return (index.h("div", { key: '0abaaaf9e87dd7faa5ca7566d54367fc1a883d6e', class: {
+        return (index.h("div", { key: '1e828b28202b9d22cc02dff0550e37e506167f90', class: {
                 'sd-select-v2-list-item': true,
                 'sd-select-v2-list-item--group': isGroup,
                 'sd-select-v2-list-item--depth1-group': isDepth1Group,
@@ -83,7 +83,7 @@ const SdSelectV2ListItem = class {
                 'sd-select-v2-list-item--focused': this.isFocused,
                 'sd-select-v2-list-item--selectable': this.isSelectable && !this.option.disabled,
                 'sd-select-v2-list-item--disabled': !!this.option.disabled,
-            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (index.h("sd-checkbox", { key: 'd2b00059ae0792d7d162e8ea7c8f35640ab6086f', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, class: "sd-select-v2-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), index.h("span", { key: '588434f01076bc963ca733eabf62a74795788c07', class: "sd-select-v2-list-item__label" }, this.option.label), this.countInfo && (index.h("span", { key: '6238cac7c3da53813eb8e65f98167874947625af', class: "sd-select-v2-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
+            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (index.h("sd-checkbox", { key: '7f49b89aff1a269944551664bc8a51447b5b2f7e', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, class: "sd-select-v2-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), index.h("span", { key: '51aad2d06ecdf11968f3f13c632081a663a3d200', class: "sd-select-v2-list-item__label" }, this.option.label), this.countInfo && (index.h("span", { key: '1c1f5cd51460863ce41c8980dcc65cd2bb7bfee5', class: "sd-select-v2-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
     }
 };
 SdSelectV2ListItem.style = sdSelectV2ListItemCss();
@@ -145,12 +145,12 @@ const SdSelectV2ListItemSearch = class {
             clearTimeout(this.debounceTimer);
     }
     render() {
-        return (index.h("div", { key: '0b97d37d739a22f488b313cfcc6e210c19cd3b7f', class: {
+        return (index.h("div", { key: 'e7bd315d17d554aa63346f44eb8b2661994b49aa', class: {
                 'sd-select-v2-list-item-search': true,
                 'sd-select-v2-list-item-search--scrolled': this.isScrolled,
-            } }, index.h("div", { key: 'c0667cb553c481507149baa6da6b07cdc3ed69c4', class: "sd-select-v2-list-item-search__inner" }, index.h("sd-icon", { key: '0a9f76e5f8bb9a202ca921d076552f7ca8868528', name: "search", size: 16, color: "grey_70", class: "sd-select-v2-list-item-search__icon" }), index.h("input", { key: 'ac3dffc2b22f14ed356c92f64f8d1d46e57040f7', ref: el => {
+            } }, index.h("div", { key: 'ee332050907bc7e9004ff27e3f79cf816e7a44e7', class: "sd-select-v2-list-item-search__inner" }, index.h("sd-icon", { key: 'ccd929d161ba92ef4e8b008cee8866815c21f430', name: "search", size: 16, color: "grey_70", class: "sd-select-v2-list-item-search__icon" }), index.h("input", { key: 'b10e1dcf4bee6df78e917c9e4c31563e0466f38e', ref: el => {
                 this.inputEl = el;
-            }, type: "text", class: "sd-select-v2-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: () => this.searchFocus.emit() }), this.searchText && (index.h("button", { key: 'c81a0a057ad862603c3ccb627102182898fd004f', type: "button", class: "sd-select-v2-list-item-search__clear", onClick: this.handleClear }, index.h("sd-icon", { key: 'b65fcc15d27b3feafba27944dada2c9ed844b870', name: "close", size: 12, color: "#888888" }))))));
+            }, type: "text", class: "sd-select-v2-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: () => this.searchFocus.emit() }), this.searchText && (index.h("button", { key: 'fa2ee3033cff6b707a409ada6982ed596492c81d', type: "button", class: "sd-select-v2-list-item-search__clear", onClick: this.handleClear }, index.h("sd-icon", { key: '0e2cab7ca1a11c1ce60e74ac435dc55fbc375438', name: "close", size: 12, color: "#888888" }))))));
     }
 };
 SdSelectV2ListItemSearch.style = sdSelectV2ListItemSearchCss();

package/dist/cjs/sd-select-v2-listbox_2.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-Qvv0fGgj.js');
-var sdSelectV2_config = require('./sd-select-v2.config-DedHbMz4.js');
+var sdSelectV2_config = require('./sd-select-v2.config-DZrPJ6OS.js');
 
 const sdSelectV2ListboxCss = () => `sd-select-v2-listbox{display:block}sd-select-v2-listbox .sd-select-v2-listbox{display:flex;flex-direction:column;min-width:var(--listbox-trigger-width);max-width:var(--listbox-max-width);max-height:var(--listbox-max-height);width:fit-content;border-radius:var(--listbox-radius);background:white;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);overflow:hidden}sd-select-v2-listbox .sd-select-v2-listbox__list{flex:1;min-height:0;overflow-y:auto;padding-bottom:var(--listbox-padding-bottom)}sd-select-v2-listbox .sd-select-v2-listbox__empty{padding:12px;text-align:center;font-size:12px;line-height:20px;color:#888888}`;
 
@@ -132,12 +132,12 @@ const SdSelectV2Listbox = class {
             '--listbox-radius': `${sdSelectV2_config.LIST_BOX_LAYOUT.radius}px`,
             '--listbox-padding-bottom': `${sdSelectV2_config.LIST_BOX_LAYOUT.paddingBottom}px`,
         };
-        return (index.h("div", { key: '0f92a96e763d00ee241cdca62b3b7ccad90c811a', class: "sd-select-v2-listbox", style: cssVars }, this.showSearch && (index.h("sd-select-v2-list-item-search", { key: '7c85122be46cc77db8c28c8b3cf072bfd445d56d', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), index.h("div", { key: '08a4a00208e70bc77cddec12f6ad71ed8cad0071', class: "sd-select-v2-listbox__list", onScroll: this.handleScroll }, this.isEmpty ? (index.h("div", { class: "sd-select-v2-listbox__empty" }, sdSelectV2_config.EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (index.h("sd-select-v2-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick })))))));
+        return (index.h("div", { key: 'b64bc66e7f9a356e3f0cf752cba3a3c9de1928c5', class: "sd-select-v2-listbox", style: cssVars }, this.showSearch && (index.h("sd-select-v2-list-item-search", { key: '2444bdda4e2a83008d175ba9867ecad01da5ed25', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), index.h("div", { key: '6307a0fd5480c006248dee44c4e1b54dd5749895', class: "sd-select-v2-listbox__list", onScroll: this.handleScroll }, this.isEmpty ? (index.h("div", { class: "sd-select-v2-listbox__empty" }, sdSelectV2_config.EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (index.h("sd-select-v2-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick })))))));
     }
 };
 SdSelectV2Listbox.style = sdSelectV2ListboxCss();
 
-const sdSelectV2TriggerCss = () => `sd-select-v2-trigger{display:block;width:100%;height:100%}sd-select-v2-trigger .sd-select-v2-trigger{display:flex;width:100%;height:100%;cursor:pointer;user-select:none;overflow:hidden;border-radius:3px}sd-select-v2-trigger .sd-select-v2-trigger--disabled{cursor:not-allowed}sd-select-v2-trigger .sd-select-v2-trigger__addon{display:flex;align-items:center;padding:0 var(--trigger-padding-x);background:var(--trigger-addon-bg);border-right:1px solid var(--trigger-addon-border-color);font-size:var(--trigger-font-size);line-height:var(--trigger-line-height);font-weight:var(--trigger-font-weight);color:var(--trigger-color);white-space:nowrap}sd-select-v2-trigger .sd-select-v2-trigger__content{display:flex;align-items:center;gap:var(--trigger-gap);flex:1;padding:0 var(--trigger-padding-x);min-width:0}sd-select-v2-trigger .sd-select-v2-trigger__text{flex:1;font-size:var(--trigger-font-size);line-height:var(--trigger-line-height);font-weight:var(--trigger-font-weight);color:var(--trigger-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}sd-select-v2-trigger .sd-select-v2-trigger__icon{flex-shrink:0;transition:transform 0.2s ease}sd-select-v2-trigger .sd-select-v2-trigger__icon--open{transform:rotate(180deg)}`;
+const sdSelectV2TriggerCss = () => `sd-select-v2-trigger{display:block;width:100%;height:100%}sd-select-v2-trigger .sd-select-v2-trigger{display:flex;width:100%;height:100%;cursor:pointer;user-select:none;overflow:hidden;border-radius:3px}sd-select-v2-trigger .sd-select-v2-trigger--disabled{cursor:not-allowed}sd-select-v2-trigger .sd-select-v2-trigger__content{display:flex;align-items:center;gap:var(--trigger-gap);flex:1;padding:0 var(--trigger-padding-x);min-width:0}sd-select-v2-trigger .sd-select-v2-trigger__text{flex:1;font-size:var(--trigger-font-size);line-height:var(--trigger-line-height);font-weight:var(--trigger-font-weight);color:var(--trigger-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}sd-select-v2-trigger .sd-select-v2-trigger__icon{flex-shrink:0;transition:transform 0.2s ease}sd-select-v2-trigger .sd-select-v2-trigger__icon--open{transform:rotate(180deg)}`;
 
 const SdSelectV2Trigger = class {
     constructor(hostRef) {
@@ -148,7 +148,6 @@ const SdSelectV2Trigger = class {
     placeholder = '선택';
     disabled = false;
     isOpen = false;
-    addonLabel = '';
     triggerClick;
     handleClick = () => {
         if (this.disabled)
@@ -169,16 +168,12 @@ const SdSelectV2Trigger = class {
                     ? sdSelectV2_config.SELECT_COLORS.text.default
                     : sdSelectV2_config.SELECT_COLORS.icon.default,
             '--trigger-icon-color': this.disabled ? sdSelectV2_config.SELECT_COLORS.icon.disabled : sdSelectV2_config.SELECT_COLORS.icon.default,
-            '--trigger-addon-bg': sdSelectV2_config.SELECT_COLORS.addonLabel.bg,
-            '--trigger-addon-border-color': this.disabled
-                ? sdSelectV2_config.SELECT_COLORS.addonLabel.border.disabled
-                : sdSelectV2_config.SELECT_COLORS.addonLabel.border.default,
         };
-        return (index.h("div", { key: '00f76c08c517d52499f1c75315ba1d9b0f7f6a06', class: {
+        return (index.h("div", { key: '4fe2634aee7071ed48348b19dc367b1af88fd6d9', class: {
                 'sd-select-v2-trigger': true,
                 'sd-select-v2-trigger--open': this.isOpen,
                 'sd-select-v2-trigger--disabled': this.disabled,
-            }, style: cssVars, onClick: this.handleClick }, this.addonLabel && (index.h("div", { key: 'bca73972b68ae98abc92cb882f65ef5622fc6d49', class: "sd-select-v2-trigger__addon" }, this.addonLabel)), index.h("div", { key: 'ae66f445590c28064b8cdf0d4048c1c009759291', class: "sd-select-v2-trigger__content" }, index.h("span", { key: 'e08841d7f17a24142f652d3929017786c37ad486', class: "sd-select-v2-trigger__text" }, hasValue ? this.displayText : this.placeholder), index.h("sd-icon", { key: '5e4ea15d1ec3e066daff92ecf012087789ba7b87', name: "arrowDown", size: 12, color: "var(--trigger-icon-color)", class: {
+            }, style: cssVars, onClick: this.handleClick }, index.h("div", { key: 'e0f71cdd91c6e04ebe5543fb2bc87d7331735da6', class: "sd-select-v2-trigger__content" }, index.h("span", { key: '3abfbc0541569c68870addc16a7d3439d7189ab5', class: "sd-select-v2-trigger__text" }, hasValue ? this.displayText : this.placeholder), index.h("sd-icon", { key: '8fcb187f67be75cf03c0f0bde42121cba0b16a47', name: "arrowDown", size: 12, color: "var(--trigger-icon-color)", class: {
                 'sd-select-v2-trigger__icon': true,
                 'sd-select-v2-trigger__icon--open': this.isOpen,
             } }))));

package/dist/cjs/sd-select-v2.cjs.entry.js

@@ -25,13 +25,15 @@ const SdSelectV2 = class {
     label = '';
     addonLabel = '';
     error = false;
+    hint = '';
+    errorMessage = '';
     fieldName = '';
     rules = [];
     icon = undefined;
     labelTooltip = '';
     labelTooltipProps = null;
     emitValue = false;
-    width = '100%';
+    width = '';
     isOpen = false;
     isAnimatingOut = false;
     triggerWidth = '200px';
@@ -77,7 +79,7 @@ const SdSelectV2 = class {
         return found?.label ?? '';
     }
     flattenOptions(options) {
-        return options.flatMap(o => o.children ? this.flattenOptions(o.children) : [o]);
+        return options.flatMap(o => (o.children ? this.flattenOptions(o.children) : [o]));
     }
     collectLeaves(option) {
         if (!option.children)
@@ -160,17 +162,20 @@ const SdSelectV2 = class {
             this.isOpen = true;
         }
     };
-    emitUpdate(value, option) {
-        this.update.emit(this.emitValue ? value : { value, option });
+    emitUpdate(value) {
+        this.update.emit(value);
     }
     handleOptionSelect = (option) => {
         if (this.isMulti) {
             this.handleMultiSelect(option);
         }
         else {
-            this.value = this.emitValue ? option.value : option;
-            this.emitUpdate(this.value, option);
             this.closeDropdown();
+            this.value = this.emitValue ? option.value : option;
+            const nextValue = this.value;
+            requestAnimationFrame(() => {
+                this.emitUpdate(nextValue);
+            });
         }
     };
     handleMultiSelect(option) {
@@ -191,7 +196,7 @@ const SdSelectV2 = class {
                 newSelected = [...selected, ...toAdd];
             }
             this.value = this.toMultiValue(newSelected);
-            this.emitUpdate(this.value, newSelected);
+            this.emitUpdate(this.value);
         }
         else {
             const exists = selected.some(s => s.value === option.value);
@@ -199,7 +204,7 @@ const SdSelectV2 = class {
                 ? selected.filter(s => s.value !== option.value)
                 : [...selected, option];
             this.value = this.toMultiValue(newSelected);
-            this.emitUpdate(this.value, newSelected);
+            this.emitUpdate(this.value);
         }
     }
     connectedCallback() {
@@ -215,9 +220,17 @@ const SdSelectV2 = class {
             open: this.isOpen,
             parentRef: this.triggerRef,
             viewportPadding: SdSelectV2.VIEWPORT_PADDING,
-            onSdClose: () => { this.closeDropdown(); },
+            onSdClose: () => {
+                this.closeDropdown();
+            },
         };
-        return (index.h("sd-field", { key: 'e87b15f9a6698de2ea29104540c8864f3cdb2b3c', name: this.fieldName || this.internalName, label: this.label, 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; }, style: { width: /^\d+$/.test(this.width) ? `${this.width}px` : this.width, minWidth: '80px' } }, index.h("div", { key: '06762f1ec63d1a7a5a52a3fb80bdd22deb2d5447', class: "sd-select-v2", ref: el => { this.triggerRef = el; } }, index.h("sd-select-v2-trigger", { key: 'ec9a3721ff4f6fb3c762728f7ee339caab3486ab', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, isOpen: this.isOpen, addonLabel: this.addonLabel, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (index.h("sd-portal", { key: '57c0e77f7f55b98c0df60028aa7fc52bb0575925', ...portalProps }, index.h("sd-select-v2-listbox", { key: 'acc04cc0ed76920a7bbb95f3b61936cd0b415c61', name: this.name, options: this.options, value: this.value, emitValue: this.emitValue, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
+        return (index.h("sd-field", { key: '9a3a1bd2836d61ffadbe6b256907e060bc2552a6', name: this.fieldName || this.internalName, label: this.label, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
+                this.hovered = true;
+            }, onMouseLeave: () => {
+                this.hovered = false;
+            } }, index.h("div", { key: '70fcf772f6c38b8f310ccbb20004c80cab4481a9', class: "sd-select-v2", ref: el => {
+                this.triggerRef = el;
+            } }, index.h("sd-select-v2-trigger", { key: 'aef3433f65f6dae8205f8913ac2236aebb8a8013', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (index.h("sd-portal", { key: '58e8050281036e4aef645271cc2384f6ba4e50be', ...portalProps }, index.h("sd-select-v2-listbox", { key: 'ae2d57b4118aae66bd1d0d6090aebb25f773cd58', name: this.name, options: this.options, value: this.value, emitValue: this.emitValue, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
     }
     static get watchers() { return {
         "isOpen": [{

package/dist/cjs/{sd-select-v2.config-DedHbMz4.js → sd-select-v2.config-DZrPJ6OS.js}

@@ -14,13 +14,6 @@ const select = {
 	text: {
 		"default": "#222222",
 		disabled: "#888888"
-	},
-	addonLabel: {
-		bg: "#F6F6F6",
-		border: {
-			"default": "#AAAAAA",
-			disabled: "#CCCCCC"
-		}
 	}};
 var selectTokens = {
 	select: select
@@ -87,13 +80,6 @@ const SELECT_COLORS = {
         default: selectTokens.select.text.default,
         disabled: selectTokens.select.text.disabled,
     },
-    addonLabel: {
-        bg: selectTokens.select.addonLabel.bg,
-        border: {
-            default: selectTokens.select.addonLabel.border.default,
-            disabled: selectTokens.select.addonLabel.border.disabled,
-        },
-    },
 };
 // ── ListItem Tokens ──
 const LIST_ITEM_LAYOUT = {

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

@@ -0,0 +1,99 @@
+'use strict';
+
+var index = require('./index-Qvv0fGgj.js');
+
+const textLink = {
+	gap: "4",
+	size: {
+		icon: "16"
+	},
+	typography: {
+		"default": {
+			fontSize: "12",
+			fontWeight: "500",
+			textDecoration: "none",
+			lineHeight: "20"
+		},
+		underline: {
+			fontSize: "12",
+			fontWeight: "500",
+			textDecoration: "underline",
+			lineHeight: "22"
+		}
+	},
+	content: {
+		"default": "#222222",
+		disabled: "#888888"
+	},
+	icon: {
+		"default": "#006AC1",
+		disabled: "#BBBBBB"
+	}
+};
+var textLinkTokens = {
+	textLink: textLink
+};
+
+const TEXT_LINK_LAYOUT = {
+    gap: textLinkTokens.textLink.gap,
+    iconSize: Number(textLinkTokens.textLink.size.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,
+};
+const TEXT_LINK_COLORS = {
+    content: textLinkTokens.textLink.content,
+    icon: textLinkTokens.textLink.icon,
+};
+
+const sdTextLinkCss = () => `sd-text-link{display:inline-flex}sd-text-link .sd-text-link{display:inline-flex;align-items:center;gap:var(--sd-text-link-gap);cursor:pointer;user-select:none}sd-text-link .sd-text-link__label{font-size:var(--sd-text-link-font-size);font-weight:var(--sd-text-link-font-weight);line-height:var(--sd-text-link-line-height);text-decoration:var(--sd-text-link-text-decoration);color:var(--sd-text-link-color)}sd-text-link .sd-text-link:not(.sd-text-link--disabled):hover .sd-text-link__label{text-decoration:underline}sd-text-link .sd-text-link--disabled{cursor:not-allowed}`;
+
+const SdTextLink = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.click = index.createEvent(this, "sdClick");
+    }
+    label = '';
+    icon = '';
+    iconColor = '';
+    useArrow = false;
+    underline = false;
+    disabled = false;
+    click;
+    handleClick = () => {
+        if (this.disabled)
+            return;
+        this.click.emit();
+    };
+    render() {
+        const typo = this.underline ? TEXT_LINK_TYPOGRAPHY.underline : TEXT_LINK_TYPOGRAPHY.default;
+        const contentColor = this.disabled ? TEXT_LINK_COLORS.content.disabled : TEXT_LINK_COLORS.content.default;
+        const iconColor = this.disabled ? TEXT_LINK_COLORS.icon.disabled : (this.iconColor || TEXT_LINK_COLORS.icon.default);
+        const arrowColor = this.disabled ? TEXT_LINK_COLORS.icon.disabled : TEXT_LINK_LAYOUT.arrowColor;
+        const cssVars = {
+            '--sd-text-link-gap': `${TEXT_LINK_LAYOUT.gap}px`,
+            '--sd-text-link-font-size': `${typo.fontSize}px`,
+            '--sd-text-link-font-weight': typo.fontWeight,
+            '--sd-text-link-line-height': `${typo.lineHeight}px`,
+            '--sd-text-link-text-decoration': typo.textDecoration,
+            '--sd-text-link-color': contentColor,
+        };
+        return (index.h("span", { key: '85a81d70f93ced4c094baa972dd4691c5659f341', class: {
+                'sd-text-link': true,
+                'sd-text-link--disabled': this.disabled,
+            }, style: cssVars, onClick: this.handleClick }, this.icon && (index.h("sd-icon", { key: 'e9350162c38383610feca59f47a087452e586642', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), index.h("span", { key: '011b7f22e5fe897548b31d883b1c8dc1accab2c9', class: "sd-text-link__label" }, this.label), this.useArrow && (index.h("span", { key: '578d8532cf1c296a48e27c865f32052494cae5e3', 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: '33293275c5a68628298af50dafeeb22a544e9469', name: "arrowRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
+    }
+};
+SdTextLink.style = sdTextLinkCss();
+
+exports.sd_text_link = SdTextLink;

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

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

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

@@ -57,10 +57,10 @@ const SdToast = class {
     render() {
         const typeConfig = TOAST_TYPE_CONFIG[this.type] ?? TOAST_TYPE_CONFIG.default;
         const iconSize = Number(TOAST_LAYOUT.iconSize);
-        return (index.h("div", { key: 'fb12707835d196216266d9d3451c0b78b3d5c910', style: {
+        return (index.h("div", { key: 'a557c0c6b78e07eeec74dd14aa86507a8b9f37ae', style: {
                 '--sd-toast-bg': typeConfig.bg,
                 '--sd-toast-text': typeConfig.content,
-            } }, index.h("div", { key: '5d02fbcc7640d40431d8a10d0ff966cbdc208564', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: 'a0d31efadb3ece5d4491118b127dd6c824bce31a', class: "sd-toast__icon" }, index.h("sd-icon", { key: '6a6bf80ed9378d8b8c2b057dab5afeaf4ba638f7', name: this.icon, size: iconSize, color: typeConfig.content }))), index.h("div", { key: '2024f644815a136e44f96d58d97aea7f25623f2c', class: "sd-toast__content" }, index.h("span", { key: '0d903bb1c6e6d0518d1f6f71ece3e7a71efbe636', class: "sd-toast__message" }, this.message)), this.link && (index.h("a", { key: '574b52ba0bbd5f37657084b70f1b6818d06e77fe', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.useClose && (index.h("button", { key: '55c489e0c52879c229734f01a2ddf9c1206e0bfc', type: "button", class: "sd-toast__close", onClick: () => this.close.emit(), "aria-label": "Close", title: "Close" }, index.h("sd-icon", { key: 'd726e7d65a169024fbfdc924375f81b70caebf75', name: "close", size: iconSize, color: typeConfig.content }))))));
+            } }, index.h("div", { key: '027041528a39f35035c2ced8b1aa2e20e48a82bc', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: '324df178ebcae7cf429c356bc8866e03b02a5ebc', class: "sd-toast__icon" }, index.h("sd-icon", { key: '62b9b6f38ed3b62e01a71388295aa6e73eb9b934', name: this.icon, size: iconSize, color: typeConfig.content }))), index.h("div", { key: '475d4b8f5021b1d7661138abd97288697fe332c3', class: "sd-toast__content" }, index.h("span", { key: '1b7469e1f46a576cc4f8ef6d363080f020ec2c70', class: "sd-toast__message" }, this.message)), this.link && (index.h("a", { key: '3a6ed7ff07d2fb50c8178d3260ed6ef50bf0a4c8', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.useClose && (index.h("button", { key: 'f05e512d165a54cb14b716548b4677321e32478a', type: "button", class: "sd-toast__close", onClick: () => this.close.emit(), "aria-label": "Close", title: "Close" }, index.h("sd-icon", { key: 'd914147a9a74287878597579f94dda8ddd453cf7', name: "close", size: iconSize, color: typeConfig.content }))))));
     }
 };
 SdToast.style = sdToastCss();

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

@@ -41,7 +41,7 @@ const SdToggleButton = class {
         this.change.emit(newValue);
     };
     render() {
-        return (index.h("label", { key: '3fa26fc680be2568ceed35ce3e828d68c28bef28', class: this.buttonClasses, "aria-label": this.label || 'toggle button' }, this.label, index.h("input", { key: 'ac81ea350a145a166cc6cefdb341b326ce84d6f3', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        return (index.h("label", { key: 'd1570ff6c0a69dfa6ba4bd135328d93641ca6483', class: this.buttonClasses, "aria-label": this.label || 'toggle button' }, this.label, index.h("input", { key: '53224a02ab3cd75dc0685c0f11616dcfe714285a', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
 };
 SdToggleButton.style = sdToggleButtonCss();

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

@@ -37,7 +37,7 @@ const SdToggle = class {
         this.change.emit(newValue);
     };
     render() {
-        return (index.h("label", { key: 'f6501486607b113d7ca127193eb7fdbcbac00260', "aria-label": this.label || 'toggle', class: this.toggleClasses }, index.h("input", { key: 'e63d90a710779cd3d6b90c865716c9efc43c81d2', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), this.label && index.h("span", { key: '10675257acc33a71f7ed76ea9474879f04acc0e0', class: "sd-toggle__label" }, this.label), index.h("div", { key: 'ec67a74eb272b24739867b50b5fe89f62995719a', class: "sd-toggle__track" }, index.h("div", { key: '57c785afe9cecc62a17ca3fa7eb6663d302d9c56', class: "sd-toggle__thumb" }))));
+        return (index.h("label", { key: '820b6e47f94d777c0540871ea1ea0b400bbd26de', "aria-label": this.label || 'toggle', class: this.toggleClasses }, index.h("input", { key: '880fd48071d635ca229c073ee3f3b60212c00a68', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), this.label && index.h("span", { key: 'c3b8652c7347b2703d4725f543c9faa7e4143d6b', class: "sd-toggle__label" }, this.label), index.h("div", { key: '90ea67512ab0b1e6d44f02a4d12d0f4fb44b850b', class: "sd-toggle__track" }, index.h("div", { key: 'ffc0074e1f3e683cc324537957235f0bf4b80c40', class: "sd-toggle__thumb" }))));
     }
 };
 SdToggle.style = sdToggleCss();

package/dist/cjs/system-lN7yOMPF.js

@@ -0,0 +1,20 @@
+'use strict';
+
+const size = {
+	field: {
+		icon: "12"}
+};
+const color = {
+	bg: {
+		accent: {
+			"default": "#0075FF"}},
+	content: {
+		secondary: "#555555",
+		inverse: "#FFFFFF"
+	}};
+var systemTokens = {
+	size: size,
+	color: color
+};
+
+exports.systemTokens = systemTokens;

package/dist/collection/collection-manifest.json

@@ -45,6 +45,7 @@
     "components/sd-select-v2/sd-select-v2-listbox/sd-select-v2-listbox.js",
     "components/sd-select-v2/sd-select-v2-trigger/sd-select-v2-trigger.js",
     "components/sd-tag/sd-tag.js",
+    "components/sd-text-link/sd-text-link.js",
     "components/sd-textarea/sd-textarea.js",
     "components/sd-toast/sd-toast.js",
     "components/sd-toast-container/sd-toast-container.js",