@sellmate/design-system 1.0.36 → 1.0.38

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

@@ -46,14 +46,14 @@ const SdPopover = class {
         this.showPopover = false;
     };
     render() {
-        return (h(Fragment, { key: '5503def56cb2dfa1e7374dc8d2968df5c0268f5f' }, this.label ? (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) })) : (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 && (h("sd-floating-portal", { key: 'ccd8b25cc328a78e66315745cd39e849abc1e2a1', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, h("div", { key: 'b1359221e2bb9a7bfa36526620734c149ef2d3fe', class: {
+        return (h(Fragment, { key: '583cb5e2f7cb123dc1a11edeff0e6f6075e95950' }, this.label ? (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) })) : (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 && (h("sd-floating-portal", { key: 'a0a4242a6cd1925a29b2e7be27f50b20377120de', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, h("div", { key: '251ddf3c159ae0f79c32643da7e1bef3d25caeeb', 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,
-            } }, h("i", { key: 'f580b4344ae76e817e689889c9432b95e20a673d', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: 'b0afd933d6782a31a30f3146f65590228efe22a3' })), h("div", { key: '97d42bf0a82251015a44437115fe1c3ebd517fd4', class: "sd-floating-menu__content" }, this.menuTitle && h("div", { key: '87573bec4894f55e537ac8d311e6bcc78343f034', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: '58e7ef0535df0f10d7691bfe9794fd79b24a185d', class: "sd-floating-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: 'bfbf4325963d09c22bcac0dbe1817360fed6d3bf', class: `sd-floating-menu__buttons sd-floating-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (h("sd-button", { ...button })))))), this.useClose && (h("button", { key: 'beec3d7985e50ab056254883bb79621689ce12d8', title: "close", class: "sd-floating-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: '88709a46eee690e0d00667ea0e03ee21eedc8f46', name: "close", size: popoverTokens.popover.close.icon, color: popoverTokens.popover.close.color }))))))));
+            } }, h("i", { key: '4ce84717389086099d17ac8c69519d4dfd707d64', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: 'da5b99c7236bd9e6199971121cafc2537b5d96ee' })), h("div", { key: 'cc5dc4fc0abb24b4e515eae7031c812bf1178633', class: "sd-floating-menu__content" }, this.menuTitle && h("div", { key: '818f93a2a9820422652df595e0fd027873f6a93d', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: '4f9cd0152c8f3697f419b63e73170a95def35a7b', class: "sd-floating-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: 'd1fe902b212315eab787b73ac3f38b0bf67f7955', class: `sd-floating-menu__buttons sd-floating-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (h("sd-button", { ...button })))))), this.useClose && (h("button", { key: 'b043c92f872ef490715ee9735a413835d9350e32', title: "close", class: "sd-floating-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: '19b5e26bec245315ff2d1187b7559bcf592a2490', name: "close", size: popoverTokens.popover.close.icon, color: popoverTokens.popover.close.color }))))))));
     }
     static get watchers() { return {
         "show": [{

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

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

package/dist/esm/sd-radio-button-group.entry.js

@@ -43,7 +43,7 @@ const SdRadioButtonGroup = class {
     }
     groupName = this.name || `sd-radio-button-group-${crypto.randomUUID()}`;
     render() {
-        return (h("div", { key: 'aa32ede3f18631ded3608ce415e7d9e6e365ca97', class: this.getGroupClasses(), role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.radioOptions.map(option => {
+        return (h("div", { key: '05df370841cb40291e350df3c7edf6b75be01f14', class: this.getGroupClasses(), role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.radioOptions.map(option => {
             const isSelected = this.isOptionSelected(option);
             const isDisabled = this.isOptionDisabled(option);
             return (h("label", { key: `radio-${option.value}`, class: this.getButtonClasses(option), "aria-label": option.label || 'radio option', "data-label": option.label }, h("input", { type: "radio", name: this.groupName, value: option.value.toString(), checked: isSelected, disabled: isDisabled, onInput: () => this.handleRadioChange(option.value, option.disabled) }), option.label && h("span", { class: "sd-radio-button-group__label" }, option.label)));

package/dist/esm/sd-radio-group.entry.js

@@ -27,7 +27,7 @@ const SdRadioGroup = class {
         return classes.join(' ');
     }
     render() {
-        return (h("div", { key: '77ac0af3226b888547fd9fcb4f05a3cc402f6d09', class: this.getGroupClasses(), role: "radiogroup" }, this.radioOptions.map(option => {
+        return (h("div", { key: '264fed43fa10c8869762dab2b0530989e7901178', class: this.getGroupClasses(), role: "radiogroup" }, this.radioOptions.map(option => {
             return (h("sd-radio", { key: `radio-${option.value}`, val: String(option.value), value: this.value, label: option.label, disabled: this.disabled || !!option.disabled, onSdUpdate: ({ detail }) => this.handleRadioChange(detail) }));
         })));
     }

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

@@ -273,7 +273,7 @@ const SdSelectGroup = class extends BaseDropdownEvent {
         });
     }
     render() {
-        return (h("sd-field", { key: '556e32fc52193819e4350aea52ff2e7a842f5b83', 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' } }, h("div", { key: '5305172cc578dffde8a2d2d6749195f15346aa01', class: {
+        return (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' } }, h("div", { key: '05d7ced4e332e5ab2f66b44b517f4e59b12ecf64', class: {
                 'sd-select-group': true,
                 'sd-select-group--open': this.isOpen,
                 'sd-select-group--disabled': this.disabled,

package/dist/esm/sd-select-multiple-group.entry.js

@@ -395,7 +395,7 @@ const SdSelectMultipleGroup = class extends BaseDropdownEvent {
         });
     }
     render() {
-        return (h("sd-field", { key: '5da73b169260119c81b46c2c65524398fedada9f', 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), style: { '--field-width': this.width || '200px' } }, h("div", { key: '74b6191fa2b0efbeca0e22ec606489bb661d0692', class: {
+        return (h("sd-field", { key: '350c7b2df807166a1439a2151f0f168385adac4a', 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), style: { '--field-width': this.width || '200px' } }, h("div", { key: 'cce989263e1c7dcb38216e734aabe6eea643676a', class: {
                 'sd-select-multiple-group': true,
                 'sd-select-multiple-group--open': this.isOpen,
                 'sd-select-multiple-group--disabled': this.disabled,

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

@@ -153,7 +153,7 @@ const SdSelectMultiple = class extends BaseDropdownEvent {
         this.handleOptionSelection(option);
     };
     render() {
-        return (h("sd-field", { key: '5f7d815436077813dc20a84791ebb9f95d15b136', 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) }, h("div", { key: '7363e68efb6a226c692da41fc0232d2c85e4442e', class: {
+        return (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) }, h("div", { key: '8b57b5500a152853db07de205ab006f7a92f30a8', class: {
                 'sd-select-multiple': true,
                 'sd-select-multiple--open': this.isOpen,
                 'sd-select-multiple--disabled': this.disabled,

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

@@ -46,7 +46,7 @@ const SdSelectOptionGroup = class {
         }
     };
     render() {
-        return (h("div", { key: '33914eb635e7ff2543b7e025df9dcadd0775616f', class: {
+        return (h("div", { key: '7581caff61d1257d653b6f58b8d76c21225b3cc5', class: {
                 'sd-select__option-group': true,
                 'sd-select__option-group--selected': !!this.isSelected,
                 'sd-select__option-group--disabled': !!this.option.disabled,
@@ -55,10 +55,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) }, h("div", { key: '53d4ceaf83bbf3c093a67a5cae2a4225e42ebffc', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (h("sd-checkbox", { key: 'e8c805485f204b715deca7f519422f7961c370ca', 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) }, h("div", { key: 'ddb33f6afaa6bc6d6dd3dc494f6ec74b9c023a42', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (h("sd-checkbox", { key: '14f2c7fc347718d2909e5006bf2500a9a51b0a66', value: this.isSelected, disabled: this.option.disabled, onClick: e => {
                 e.preventDefault();
                 this.handleClick(this.option, this.isSelected, e);
-            } })), h("span", { key: '52f1efee24d5ec49e5327355227f50a9710d4261', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (h("span", { key: '9a6059929bb305c470532f1ee787390495c516c1', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
+            } })), h("span", { key: '99415ed662cc2f8f29d31e3811eb4496f8fcac47', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (h("span", { key: 'a3c7dc6455a94ecd4587f8b13b4d1f10e3b58819', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
     }
 };
 SdSelectOptionGroup.style = sdSelectOptionGroupCss();

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

@@ -71,7 +71,7 @@ const SdSelectV2ListItem = class {
         if (isDepth1Group) {
             cssVars['--list-item-border-top'] = `${LIST_ITEM_COLORS.depth1.borderWidth}px solid ${LIST_ITEM_COLORS.depth1.border}`;
         }
-        return (h("div", { key: '68c45b6a345a90fe1b44d1c744cb27881ddca772', class: {
+        return (h("div", { key: '0abaaaf9e87dd7faa5ca7566d54367fc1a883d6e', class: {
                 'sd-select-v2-list-item': true,
                 'sd-select-v2-list-item--group': isGroup,
                 'sd-select-v2-list-item--depth1-group': isDepth1Group,
@@ -81,7 +81,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 && (h("sd-checkbox", { key: '8eda4135c2d3a6a79efe48eb39d7ada530543be2', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, class: "sd-select-v2-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), h("span", { key: '939299b58c52bfc8626723d63f03e915f2be89c8', class: "sd-select-v2-list-item__label" }, this.option.label), this.countInfo && (h("span", { key: '59598495bb83488f5e4a0b0005f80c7bfa00bdf3', class: "sd-select-v2-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
+            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (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 })), h("span", { key: '588434f01076bc963ca733eabf62a74795788c07', class: "sd-select-v2-list-item__label" }, this.option.label), this.countInfo && (h("span", { key: '6238cac7c3da53813eb8e65f98167874947625af', class: "sd-select-v2-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
     }
 };
 SdSelectV2ListItem.style = sdSelectV2ListItemCss();
@@ -143,12 +143,12 @@ const SdSelectV2ListItemSearch = class {
             clearTimeout(this.debounceTimer);
     }
     render() {
-        return (h("div", { key: '6a58d3109bba6cf63f08e3d035570f95847389b0', class: {
+        return (h("div", { key: '0b97d37d739a22f488b313cfcc6e210c19cd3b7f', class: {
                 'sd-select-v2-list-item-search': true,
                 'sd-select-v2-list-item-search--scrolled': this.isScrolled,
-            } }, h("div", { key: '9f4229f0c21a85964f3264ead376cf05b548b1b3', class: "sd-select-v2-list-item-search__inner" }, h("sd-icon", { key: '7f02ec472bc56398e961e20c2499e3469a3b94d1', name: "search", size: 16, color: "grey_70", class: "sd-select-v2-list-item-search__icon" }), h("input", { key: 'c9211570ff1b852dcce6fececa00b0660c13b94f', ref: el => {
+            } }, h("div", { key: 'c0667cb553c481507149baa6da6b07cdc3ed69c4', class: "sd-select-v2-list-item-search__inner" }, h("sd-icon", { key: '0a9f76e5f8bb9a202ca921d076552f7ca8868528', name: "search", size: 16, color: "grey_70", class: "sd-select-v2-list-item-search__icon" }), h("input", { key: 'ac3dffc2b22f14ed356c92f64f8d1d46e57040f7', 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 && (h("button", { key: '0a0e6a5e8a0c0f3584e2af1f1e2f5f82cc719fad', type: "button", class: "sd-select-v2-list-item-search__clear", onClick: this.handleClear }, h("sd-icon", { key: '2874ce9881ffe6d0e71c0b9fb95f533def0cea6b', 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 && (h("button", { key: 'c81a0a057ad862603c3ccb627102182898fd004f', type: "button", class: "sd-select-v2-list-item-search__clear", onClick: this.handleClear }, h("sd-icon", { key: 'b65fcc15d27b3feafba27944dada2c9ed844b870', name: "close", size: 12, color: "#888888" }))))));
     }
 };
 SdSelectV2ListItemSearch.style = sdSelectV2ListItemSearchCss();

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

@@ -130,7 +130,7 @@ const SdSelectV2Listbox = class {
             '--listbox-radius': `${LIST_BOX_LAYOUT.radius}px`,
             '--listbox-padding-bottom': `${LIST_BOX_LAYOUT.paddingBottom}px`,
         };
-        return (h("div", { key: '9e944831366c0e956f114e3d590c21646dd76f53', class: "sd-select-v2-listbox", style: cssVars }, this.showSearch && (h("sd-select-v2-list-item-search", { key: '6df5c653e7ed89b1723096801b57cfc4e105e801', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), h("div", { key: '546a982cc6d86a9ff32475343ad24e56e05dd4f3', class: "sd-select-v2-listbox__list", onScroll: this.handleScroll }, this.isEmpty ? (h("div", { class: "sd-select-v2-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (h("sd-select-v2-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick })))))));
+        return (h("div", { key: '0f92a96e763d00ee241cdca62b3b7ccad90c811a', class: "sd-select-v2-listbox", style: cssVars }, this.showSearch && (h("sd-select-v2-list-item-search", { key: '7c85122be46cc77db8c28c8b3cf072bfd445d56d', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), h("div", { key: '08a4a00208e70bc77cddec12f6ad71ed8cad0071', class: "sd-select-v2-listbox__list", onScroll: this.handleScroll }, this.isEmpty ? (h("div", { class: "sd-select-v2-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (h("sd-select-v2-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick })))))));
     }
 };
 SdSelectV2Listbox.style = sdSelectV2ListboxCss();
@@ -172,11 +172,11 @@ const SdSelectV2Trigger = class {
                 ? SELECT_COLORS.addonLabel.border.disabled
                 : SELECT_COLORS.addonLabel.border.default,
         };
-        return (h("div", { key: '08fbbecf31f525dc0006885add05dfe9dfd5f824', class: {
+        return (h("div", { key: '00f76c08c517d52499f1c75315ba1d9b0f7f6a06', 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 && (h("div", { key: '779f9adca7582017678d5962951a0a3fce920cbd', class: "sd-select-v2-trigger__addon" }, this.addonLabel)), h("div", { key: '509665beee7dc4925586f01d0c70d61f5f79c20c', class: "sd-select-v2-trigger__content" }, h("span", { key: '3e43164ab1288b6e04a9953d4c6fd670a35454c5', class: "sd-select-v2-trigger__text" }, hasValue ? this.displayText : this.placeholder), h("sd-icon", { key: '16278796b2dcb4b410cc31cbcf453e90620477eb', name: "arrowDown", size: 12, color: "var(--trigger-icon-color)", class: {
+            }, style: cssVars, onClick: this.handleClick }, this.addonLabel && (h("div", { key: 'bca73972b68ae98abc92cb882f65ef5622fc6d49', class: "sd-select-v2-trigger__addon" }, this.addonLabel)), h("div", { key: 'ae66f445590c28064b8cdf0d4048c1c009759291', class: "sd-select-v2-trigger__content" }, h("span", { key: 'e08841d7f17a24142f652d3929017786c37ad486', class: "sd-select-v2-trigger__text" }, hasValue ? this.displayText : this.placeholder), h("sd-icon", { key: '5e4ea15d1ec3e066daff92ecf012087789ba7b87', 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/esm/sd-select-v2.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, g as getElement, h } from './index-B8tGP77V.js';
 import { n as nanoid } from './index-CCwNgVmC.js';
 
-const sdSelectV2Css = () => `sd-select-v2{display:inline-flex}sd-select-v2 .sd-select-v2{position:relative;width:100%;height:100%}`;
+const sdSelectV2Css = () => `sd-select-v2{display:inline-flex}sd-select-v2 sd-portal{display:none}sd-select-v2 .sd-select-v2{position:relative;width:100%;height:100%}`;
 
 const SdSelectV2 = class {
     constructor(hostRef) {
@@ -11,12 +11,12 @@ const SdSelectV2 = class {
     }
     static VIEWPORT_PADDING = 20;
     static PORTAL_OFFSET_Y = 4;
+    static CLOSE_ANIMATION_DURATION = 150;
     get el() { return getElement(this); }
     name = 'default';
     value = null;
     options = [];
     placeholder = '선택';
-    width = '200px';
     maxDropdownWidth = '640px';
     dropdownHeight = '260px';
     disabled = false;
@@ -29,7 +29,9 @@ const SdSelectV2 = class {
     labelTooltip = '';
     labelTooltipProps = null;
     emitValue = false;
+    width = '100%';
     isOpen = false;
+    isAnimatingOut = false;
     triggerWidth = '200px';
     resolvedDropdownHeight = '260px';
     resolvedMaxDropdownWidth = '640px';
@@ -38,6 +40,7 @@ const SdSelectV2 = class {
     update;
     dropDownShow;
     triggerRef;
+    closeAnimationTimer;
     internalName = nanoid();
     watchIsOpen(newValue) {
         this.focused = newValue;
@@ -129,12 +132,31 @@ const SdSelectV2 = class {
         }
         return undefined;
     }
+    closeDropdown() {
+        if (!this.isOpen)
+            return;
+        this.isOpen = false;
+        this.isAnimatingOut = true;
+        if (this.closeAnimationTimer)
+            clearTimeout(this.closeAnimationTimer);
+        this.closeAnimationTimer = setTimeout(() => {
+            this.isAnimatingOut = false;
+        }, SdSelectV2.CLOSE_ANIMATION_DURATION);
+    }
     handleTriggerClick = () => {
         if (this.triggerRef) {
             this.triggerWidth = `${this.triggerRef.offsetWidth}px`;
         }
         this.updateDropdownViewportConstraints();
-        this.isOpen = !this.isOpen;
+        if (this.isOpen) {
+            this.closeDropdown();
+        }
+        else {
+            if (this.closeAnimationTimer)
+                clearTimeout(this.closeAnimationTimer);
+            this.isAnimatingOut = false;
+            this.isOpen = true;
+        }
     };
     emitUpdate(value, option) {
         this.update.emit(this.emitValue ? value : { value, option });
@@ -146,7 +168,7 @@ const SdSelectV2 = class {
         else {
             this.value = this.emitValue ? option.value : option;
             this.emitUpdate(this.value, option);
-            this.isOpen = false;
+            this.closeDropdown();
         }
     };
     handleMultiSelect(option) {
@@ -183,15 +205,17 @@ const SdSelectV2 = class {
     }
     disconnectedCallback() {
         window.removeEventListener('resize', this.handleViewportResize);
+        if (this.closeAnimationTimer)
+            clearTimeout(this.closeAnimationTimer);
     }
     render() {
         const portalProps = {
             open: this.isOpen,
             parentRef: this.triggerRef,
             viewportPadding: SdSelectV2.VIEWPORT_PADDING,
-            onSdClose: () => { this.isOpen = false; },
+            onSdClose: () => { this.closeDropdown(); },
         };
-        return (h("sd-field", { key: '3b134bfdbbe60e73168f6f63b11c89609852ca7c', 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: this.width } }, h("div", { key: 'bd53a6103bf586f860c5c93d8ecbcb62193d77f2', class: "sd-select-v2", ref: el => { this.triggerRef = el; } }, h("sd-select-v2-trigger", { key: '6d9830fbd740015479cf5b0c8e5ab7d0314f82fc', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, isOpen: this.isOpen, addonLabel: this.addonLabel, onSdTriggerClick: this.handleTriggerClick })), this.isOpen && (h("sd-portal", { key: '48dcc2e80d51806ca4e145fcdbd5c664c0f936a4', ...portalProps }, h("sd-select-v2-listbox", { key: '4dfd4d0f8143d87da4a8e4b2f08200b2e617ca04', 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 (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' } }, h("div", { key: '06762f1ec63d1a7a5a52a3fb80bdd22deb2d5447', class: "sd-select-v2", ref: el => { this.triggerRef = el; } }, 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) && (h("sd-portal", { key: '57c0e77f7f55b98c0df60028aa7fc52bb0575925', ...portalProps }, 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) })))));
     }
     static get watchers() { return {
         "isOpen": [{

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

@@ -47,7 +47,7 @@ const SdTabs = class {
         return `square_${this.size}_${color}`;
     }
     render() {
-        return (h("div", { key: '2639d2c5900510b4d393dd502a5bcc4c765fe250', class: this.getContainerClasses() }, this.tabs.map((tab, index) => {
+        return (h("div", { key: 'c179db82ee130f4ccbdca7cb1af7b156ad174df8', class: this.getContainerClasses() }, this.tabs.map((tab, index) => {
             const badgeName = this.getBadgeName(tab);
             return (h("div", { key: `tab-${index}`, class: this.getTabClasses(tab), "aria-label": tab.label || 'tab', onClick: () => this.handleTabClick(tab.value) }, h("span", { "data-label": tab.label, class: "sd-tabs__label" }, tab.label), tab.badge && (h("sd-tag", { name: badgeName, label: tab.badge.toString() }))));
         })));

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

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

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

@@ -55,10 +55,10 @@ const SdToast = class {
     render() {
         const typeConfig = TOAST_TYPE_CONFIG[this.type] ?? TOAST_TYPE_CONFIG.default;
         const iconSize = Number(TOAST_LAYOUT.iconSize);
-        return (h("div", { key: 'c9469c933c89fb16001177a4fa654ae05f211616', style: {
+        return (h("div", { key: 'fb12707835d196216266d9d3451c0b78b3d5c910', style: {
                 '--sd-toast-bg': typeConfig.bg,
                 '--sd-toast-text': typeConfig.content,
-            } }, h("div", { key: '0e40d2cfa0626a7b1aa1626c80e0c7076b97c4c0', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (h("div", { key: 'ef6df6b3fa9fb2cc4b8401a44babd30270ddde87', class: "sd-toast__icon" }, h("sd-icon", { key: '7e09a2c28883baa733c211681823b95ce02f4efb', name: this.icon, size: iconSize, color: typeConfig.content }))), h("div", { key: 'ebeeddc53b16fb72199af974fcf5e8e2be7c8f41', class: "sd-toast__content" }, h("span", { key: 'ce828a5e22e42123d5da09a46d4a8a7a27f35703', class: "sd-toast__message" }, this.message)), this.link && (h("a", { key: '1671f384cfa0ea3b3f8a4010e42eb8aa1cbe8fc3', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.useClose && (h("button", { key: '6738c45beaa874e1296b5bb35936a4985b50eaeb', type: "button", class: "sd-toast__close", onClick: () => this.close.emit(), "aria-label": "Close", title: "Close" }, h("sd-icon", { key: '9069b6e6aa551f6e04923608f6bc12ec02f65e41', name: "close", size: iconSize, color: typeConfig.content }))))));
+            } }, h("div", { key: '5d02fbcc7640d40431d8a10d0ff966cbdc208564', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (h("div", { key: 'a0d31efadb3ece5d4491118b127dd6c824bce31a', class: "sd-toast__icon" }, h("sd-icon", { key: '6a6bf80ed9378d8b8c2b057dab5afeaf4ba638f7', name: this.icon, size: iconSize, color: typeConfig.content }))), h("div", { key: '2024f644815a136e44f96d58d97aea7f25623f2c', class: "sd-toast__content" }, h("span", { key: '0d903bb1c6e6d0518d1f6f71ece3e7a71efbe636', class: "sd-toast__message" }, this.message)), this.link && (h("a", { key: '574b52ba0bbd5f37657084b70f1b6818d06e77fe', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.useClose && (h("button", { key: '55c489e0c52879c229734f01a2ddf9c1206e0bfc', type: "button", class: "sd-toast__close", onClick: () => this.close.emit(), "aria-label": "Close", title: "Close" }, h("sd-icon", { key: 'd726e7d65a169024fbfdc924375f81b70caebf75', name: "close", size: iconSize, color: typeConfig.content }))))));
     }
 };
 SdToast.style = sdToastCss();

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

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

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

@@ -35,7 +35,7 @@ const SdToggle = class {
         this.change.emit(newValue);
     };
     render() {
-        return (h("label", { key: 'bbb579fc0ab7b950c6c2275b9d7e0bf6771f38e8', "aria-label": this.label || 'toggle', class: this.toggleClasses }, h("input", { key: '02f71df5eddaf3223a99f51287f7bfd86373e8ab', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), this.label && h("span", { key: '49060a3fb1c606cd676047f3ab4c41855aebfc0e', class: "sd-toggle__label" }, this.label), h("div", { key: '14a9fb46f79f60587a4cfe0c1540fe1226bf6cd5', class: "sd-toggle__track" }, h("div", { key: '1a4180d5c94b7834677aa3e8169ec2f6e60b2700', class: "sd-toggle__thumb" }))));
+        return (h("label", { key: 'f6501486607b113d7ca127193eb7fdbcbac00260', "aria-label": this.label || 'toggle', class: this.toggleClasses }, h("input", { key: 'e63d90a710779cd3d6b90c865716c9efc43c81d2', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), this.label && h("span", { key: '10675257acc33a71f7ed76ea9474879f04acc0e0', class: "sd-toggle__label" }, this.label), h("div", { key: 'ec67a74eb272b24739867b50b5fe89f62995719a', class: "sd-toggle__track" }, h("div", { key: '57c785afe9cecc62a17ca3fa7eb6663d302d9c56', class: "sd-toggle__thumb" }))));
     }
 };
 SdToggle.style = sdToggleCss();

package/dist/types/components/sd-confirm-modal/sd-confirm-modal.config.d.ts

@@ -0,0 +1,14 @@
+import type { TagName } from '../sd-tag/sd-tag.config';
+import type { ButtonV2Name } from '../sd-button-v2/sd-button-v2.config';
+export type ConfirmModalType = 'positive' | 'negative';
+export type PositiveMainButton = 'primary_md' | 'primary_outline_md';
+export type NegativeMainButton = 'danger_md' | 'danger_outline_md';
+export type ConfirmModalMainButton = PositiveMainButton | NegativeMainButton;
+export declare const CONFIRM_MODAL_DEFAULT_BUTTON: Record<ConfirmModalType, ConfirmModalMainButton>;
+export declare const CONFIRM_MODAL_ICON_MAP: Record<ConfirmModalType, IconName>;
+export declare const CONFIRM_MODAL_ICON_COLOR: Record<ConfirmModalType, string>;
+export declare const TITLE_ICON_SIZE: number;
+export declare const CLOSE_ICON_SIZE: number;
+export declare const CLOSE_ICON_COLOR: string;
+export declare const SUB_BUTTON_PRESET: ButtonV2Name;
+export type { TagName, ButtonV2Name };

package/dist/types/components/sd-confirm-modal/sd-confirm-modal.d.ts

@@ -0,0 +1,31 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { type ConfirmModalType, type ConfirmModalMainButton, type TagName } from './sd-confirm-modal.config';
+export declare class SdConfirmModal {
+    el: HTMLElement;
+    private hasSlottedContent;
+    private customContentRef?;
+    private slotObserver?;
+    type: ConfirmModalType;
+    modalTitle: string;
+    titleClass: string;
+    topMessage: string[];
+    bottomMessage: string[];
+    mainButtonName?: ConfirmModalMainButton;
+    mainButtonLabel: string;
+    subButtonLabel: string;
+    tagPreset?: TagName;
+    tagLabel: string;
+    slotLabel: string;
+    tagContents?: HTMLElement;
+    close: EventEmitter<void>;
+    confirm: EventEmitter<void>;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    componentDidRender(): void;
+    disconnectedCallback(): void;
+    private get resolvedMainButton();
+    private get hasTagContent();
+    private get showContentBox();
+    private syncHasSlottedContent;
+    render(): any;
+}

package/dist/types/components/sd-dropdown-button/sd-dropdown-button.d.ts

@@ -7,10 +7,13 @@ export declare class SdDropdownButton extends BaseDropdownEvent {
     label: string;
     items: DropdownButtonItem[];
     disabled: boolean;
+    private static readonly CLOSE_ANIMATION_DURATION;
     isOpen: boolean;
+    isAnimatingOut: boolean;
     itemIndex: number;
     private triggerRef?;
     private menuRef?;
+    private closeAnimationTimer?;
     click: EventEmitter<DropdownButtonValue>;
     dropDownShow: EventEmitter<{
         isOpen: boolean;

package/dist/types/components/sd-modal-container/sd-modal-container.config.d.ts

@@ -0,0 +1,45 @@
+import type { ConfirmModalType, ConfirmModalMainButton } from '../sd-confirm-modal/sd-confirm-modal.config';
+import type { TagName } from '../sd-tag/sd-tag.config';
+export interface ConfirmModalOptions {
+    type?: ConfirmModalType;
+    title?: string;
+    titleClass?: string;
+    topMessage?: string[];
+    bottomMessage?: string[];
+    mainButtonName?: ConfirmModalMainButton;
+    mainButtonLabel?: string;
+    subButtonLabel?: string;
+    tagPreset?: TagName;
+    tagLabel?: string;
+    slotLabel?: string;
+    tagContents?: HTMLElement;
+    persistent?: boolean;
+}
+export interface NoticeModalOptions {
+    title?: string;
+    titleClass?: string;
+    topMessage?: string[];
+    bottomMessage?: string[];
+    mainButtonLabel?: string;
+    subButtonLabel?: string;
+    tagPreset?: TagName;
+    tagLabel?: string;
+    slotLabel?: string;
+    tagContents?: HTMLElement;
+    persistent?: boolean;
+}
+export interface ModalEntry {
+    id: string;
+    modalEl: HTMLElement;
+    chain: ModalDialogChainLike;
+    persistent: boolean;
+    closing: boolean;
+    dismissTimerId?: ReturnType<typeof setTimeout>;
+}
+export interface ModalDialogChainLike {
+    _triggerOk(): void;
+    _triggerCancel(): void;
+}
+export interface SdModalGlobalOptions {
+    zIndex?: number;
+}

package/dist/types/components/sd-modal-container/sd-modal-container.d.ts

@@ -0,0 +1,27 @@
+import type { ConfirmModalOptions, NoticeModalOptions, ModalEntry, ModalDialogChainLike } from './sd-modal-container.config';
+export declare class SdModalContainer {
+    el: HTMLElement;
+    entries: ModalEntry[];
+    isVisible: boolean;
+    isBackdropVisible: boolean;
+    private contentRef?;
+    private containerDismissTimerId?;
+    handleKeydown(e: KeyboardEvent): void;
+    open(options: ConfirmModalOptions, chain: ModalDialogChainLike): Promise<string>;
+    openNotice(options: NoticeModalOptions, chain: ModalDialogChainLike): Promise<string>;
+    update(id: string, props: Partial<ConfirmModalOptions & NoticeModalOptions>): Promise<void>;
+    private createConfirmModal;
+    private applyProps;
+    private createNoticeModal;
+    private applyNoticeProps;
+    private handleBackdropClick;
+    private shakeModal;
+    disconnectedCallback(): void;
+    private getTopEntry;
+    private requestDismiss;
+    private finalizeDismiss;
+    private waitForModalReady;
+    private hasOwnProp;
+    private setAttr;
+    render(): any;
+}

package/dist/types/components/sd-notice-modal/sd-notice-modal.config.d.ts

@@ -0,0 +1,5 @@
+import { CLOSE_ICON_SIZE, CLOSE_ICON_COLOR, type TagName } from '../sd-confirm-modal/sd-confirm-modal.config';
+import type { ButtonV2Name } from '../sd-button-v2/sd-button-v2.config';
+export declare const NOTICE_BUTTON_PRESET: ButtonV2Name;
+export { CLOSE_ICON_SIZE, CLOSE_ICON_COLOR, };
+export type { TagName, ButtonV2Name };

package/dist/types/components/sd-notice-modal/sd-notice-modal.d.ts

@@ -0,0 +1,28 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { type TagName } from './sd-notice-modal.config';
+export declare class SdNoticeModal {
+    el: HTMLElement;
+    private hasSlottedContent;
+    private customContentRef?;
+    private slotObserver?;
+    modalTitle: string;
+    titleClass: string;
+    topMessage: string[];
+    bottomMessage: string[];
+    mainButtonLabel: string;
+    subButtonLabel: string;
+    tagPreset?: TagName;
+    tagLabel: string;
+    slotLabel: string;
+    tagContents?: HTMLElement;
+    close: EventEmitter<void>;
+    confirm: EventEmitter<void>;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    componentDidRender(): void;
+    disconnectedCallback(): void;
+    private get hasTagContent();
+    private get showContentBox();
+    private syncHasSlottedContent;
+    render(): any;
+}

package/dist/types/components/sd-portal/sd-portal.d.ts

@@ -12,6 +12,7 @@ export declare class SdPortal {
     private wrapper?;
     private rafId?;
     private isInsideClick;
+    private closeTransitionTimer?;
     private readonly handleObservedScroll;
     private resizeObserver?;
     private mutationObserver?;

package/dist/types/components/sd-select-v2/sd-select-v2.d.ts

@@ -5,12 +5,12 @@ import type { SdTooltipProps } from '../sd-tooltip/sd-tooltip.config';
 export declare class SdSelectV2 {
     private static readonly VIEWPORT_PADDING;
     private static readonly PORTAL_OFFSET_Y;
+    private static readonly CLOSE_ANIMATION_DURATION;
     el: HTMLElement;
     name: SelectV2Name;
     value: SelectV2Value;
     options: SelectV2Option[];
     placeholder: string;
-    width: string;
     maxDropdownWidth: string;
     dropdownHeight: string;
     disabled: boolean;
@@ -23,7 +23,9 @@ export declare class SdSelectV2 {
     labelTooltip: string;
     labelTooltipProps: SdTooltipProps | null;
     emitValue: boolean;
+    width: string;
     private isOpen;
+    private isAnimatingOut;
     private triggerWidth;
     private resolvedDropdownHeight;
     private resolvedMaxDropdownWidth;
@@ -34,6 +36,7 @@ export declare class SdSelectV2 {
         isOpen: boolean;
     }>;
     private triggerRef?;
+    private closeAnimationTimer?;
     private internalName;
     watchIsOpen(newValue: boolean): void;
     private get isMulti();
@@ -46,6 +49,7 @@ export declare class SdSelectV2 {
     private updateDropdownViewportConstraints;
     private handleViewportResize;
     private findOriginalOption;
+    private closeDropdown;
     private handleTriggerClick;
     private emitUpdate;
     private handleOptionSelect;