@sellmate/design-system 1.0.37 → 1.0.39

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: '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' } }, index.h("div", { key: '5305172cc578dffde8a2d2d6749195f15346aa01', 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-group.cjs.entry.js

@@ -397,7 +397,7 @@ const SdSelectMultipleGroup = class extends baseDropdownEvent.BaseDropdownEvent
         });
     }
     render() {
-        return (index.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' } }, index.h("div", { key: '74b6191fa2b0efbeca0e22ec606489bb661d0692', class: {
+        return (index.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' } }, index.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/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: '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) }, index.h("div", { key: '7363e68efb6a226c692da41fc0232d2c85e4442e', 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: '33914eb635e7ff2543b7e025df9dcadd0775616f', 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: '53d4ceaf83bbf3c093a67a5cae2a4225e42ebffc', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (index.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) }, 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: '52f1efee24d5ec49e5327355227f50a9710d4261', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (index.h("span", { key: '9a6059929bb305c470532f1ee787390495c516c1', 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: '68c45b6a345a90fe1b44d1c744cb27881ddca772', 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: '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 })), index.h("span", { key: '939299b58c52bfc8626723d63f03e915f2be89c8', class: "sd-select-v2-list-item__label" }, this.option.label), this.countInfo && (index.h("span", { key: '59598495bb83488f5e4a0b0005f80c7bfa00bdf3', 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: '6a58d3109bba6cf63f08e3d035570f95847389b0', 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: '9f4229f0c21a85964f3264ead376cf05b548b1b3', class: "sd-select-v2-list-item-search__inner" }, index.h("sd-icon", { key: '7f02ec472bc56398e961e20c2499e3469a3b94d1', name: "search", size: 16, color: "grey_70", class: "sd-select-v2-list-item-search__icon" }), index.h("input", { key: 'c9211570ff1b852dcce6fececa00b0660c13b94f', 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: '0a0e6a5e8a0c0f3584e2af1f1e2f5f82cc719fad', type: "button", class: "sd-select-v2-list-item-search__clear", onClick: this.handleClear }, index.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 && (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: '9e944831366c0e956f114e3d590c21646dd76f53', class: "sd-select-v2-listbox", style: cssVars }, this.showSearch && (index.h("sd-select-v2-list-item-search", { key: '6df5c653e7ed89b1723096801b57cfc4e105e801', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), index.h("div", { key: '546a982cc6d86a9ff32475343ad24e56e05dd4f3', 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: '08fbbecf31f525dc0006885add05dfe9dfd5f824', 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: '779f9adca7582017678d5962951a0a3fce920cbd', class: "sd-select-v2-trigger__addon" }, this.addonLabel)), index.h("div", { key: '509665beee7dc4925586f01d0c70d61f5f79c20c', class: "sd-select-v2-trigger__content" }, index.h("span", { key: '3e43164ab1288b6e04a9953d4c6fd670a35454c5', class: "sd-select-v2-trigger__text" }, hasValue ? this.displayText : this.placeholder), index.h("sd-icon", { key: '16278796b2dcb4b410cc31cbcf453e90620477eb', 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

@@ -31,6 +31,7 @@ const SdSelectV2 = class {
     labelTooltip = '';
     labelTooltipProps = null;
     emitValue = false;
+    width = '100%';
     isOpen = false;
     isAnimatingOut = false;
     triggerWidth = '200px';
@@ -76,7 +77,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)
@@ -159,8 +160,8 @@ 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) {
@@ -168,7 +169,7 @@ const SdSelectV2 = class {
         }
         else {
             this.value = this.emitValue ? option.value : option;
-            this.emitUpdate(this.value, option);
+            this.emitUpdate(this.value);
             this.closeDropdown();
         }
     };
@@ -190,7 +191,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);
@@ -198,7 +199,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() {
@@ -214,9 +215,20 @@ 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: 'ce2edb18ea0c3343e17238c1be200905abac3d88', 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: 'fit-content', minWidth: '80px' } }, index.h("div", { key: '1e4e3d5292a1ff8034288b0a0867d4b9317d5325', class: "sd-select-v2", ref: el => { this.triggerRef = el; } }, index.h("sd-select-v2-trigger", { key: '9d82bcc05bbd051a9972cb3a1f5d439088bf2797', 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: '728e31e470708b31cc363b78ef8d1a226cdae004', ...portalProps }, index.h("sd-select-v2-listbox", { key: '98b03c61d4cc5586e43b0284a669ae8a48cbc3c8', 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: '4e3e1aa95a4e566948bf63526763cf0125fc6564', name: this.fieldName || this.internalName, label: this.label, addonLabel: this.addonLabel, 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: '661fd9580419ef011386750aa1356b4ab1f19fed', class: "sd-select-v2", ref: el => {
+                this.triggerRef = el;
+            } }, index.h("sd-select-v2-trigger", { key: '5d267da7bc6c0b2cf0031416f541dad3cd1cf861', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (index.h("sd-portal", { key: 'd5a8edf2cc94d9271bc4369022ffe3801650dbd4', ...portalProps }, index.h("sd-select-v2-listbox", { key: 'c1051423145b1a9aaea420635b3ae596d5983011', 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-tabs.cjs.entry.js

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

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: '69257f7c4c7531bf41fa829da3c577321172e631', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
+        return (index.h("div", { key: 'ae174f148eb5191be7d4ad6704c77568f4b5abb2', 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: 'c9469c933c89fb16001177a4fa654ae05f211616', style: {
+        return (index.h("div", { key: 'fb12707835d196216266d9d3451c0b78b3d5c910', style: {
                 '--sd-toast-bg': typeConfig.bg,
                 '--sd-toast-text': typeConfig.content,
-            } }, index.h("div", { key: '0e40d2cfa0626a7b1aa1626c80e0c7076b97c4c0', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: 'ef6df6b3fa9fb2cc4b8401a44babd30270ddde87', class: "sd-toast__icon" }, index.h("sd-icon", { key: '7e09a2c28883baa733c211681823b95ce02f4efb', name: this.icon, size: iconSize, color: typeConfig.content }))), index.h("div", { key: 'ebeeddc53b16fb72199af974fcf5e8e2be7c8f41', class: "sd-toast__content" }, index.h("span", { key: 'ce828a5e22e42123d5da09a46d4a8a7a27f35703', class: "sd-toast__message" }, this.message)), this.link && (index.h("a", { key: '1671f384cfa0ea3b3f8a4010e42eb8aa1cbe8fc3', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.useClose && (index.h("button", { key: '6738c45beaa874e1296b5bb35936a4985b50eaeb', type: "button", class: "sd-toast__close", onClick: () => this.close.emit(), "aria-label": "Close", title: "Close" }, index.h("sd-icon", { key: '9069b6e6aa551f6e04923608f6bc12ec02f65e41', name: "close", size: iconSize, color: 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 }))))));
     }
 };
 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: '8d312658ab775bc778b382fec209b0c2f062fac8', class: this.buttonClasses, "aria-label": this.label || 'toggle button' }, this.label, index.h("input", { key: '9fc36c158cabbe5aa2ee951635566efa2be7580e', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        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 })));
     }
 };
 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: 'bbb579fc0ab7b950c6c2275b9d7e0bf6771f38e8', "aria-label": this.label || 'toggle', class: this.toggleClasses }, index.h("input", { key: '02f71df5eddaf3223a99f51287f7bfd86373e8ab', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), this.label && index.h("span", { key: '49060a3fb1c606cd676047f3ab4c41855aebfc0e', class: "sd-toggle__label" }, this.label), index.h("div", { key: '14a9fb46f79f60587a4cfe0c1540fe1226bf6cd5', class: "sd-toggle__track" }, index.h("div", { key: '1a4180d5c94b7834677aa3e8169ec2f6e60b2700', class: "sd-toggle__thumb" }))));
+        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" }))));
     }
 };
 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

@@ -5,7 +5,6 @@
     "components/sd-checkbox/sd-checkbox.js",
     "components/sd-date-box/sd-date-box.js",
     "components/sd-form/sd-form.js",
-    "components/sd-modal-card/sd-modal-card.js",
     "components/sd-radio/sd-radio.js",
     "components/sd-radio-button-group/sd-radio-button-group.js",
     "components/sd-radio-group/sd-radio-group.js",
@@ -16,6 +15,7 @@
     "components/sd-badge/sd-badge.js",
     "components/sd-button-v2/sd-button-v2.js",
     "components/sd-card/sd-card.js",
+    "components/sd-confirm-modal/sd-confirm-modal.js",
     "components/sd-date-picker/sd-date-picker.js",
     "components/sd-date-range-picker/sd-date-range-picker.js",
     "components/sd-portal/sd-portal.js",
@@ -27,6 +27,8 @@
     "components/sd-icon/sd-icon.js",
     "components/sd-input/sd-input.js",
     "components/sd-loading-spinner/sd-loading-spinner.js",
+    "components/sd-modal-container/sd-modal-container.js",
+    "components/sd-notice-modal/sd-notice-modal.js",
     "components/sd-number-input/sd-number-input.js",
     "components/sd-pagination/sd-pagination.js",
     "components/sd-popover/sd-popover.js",

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

@@ -5,7 +5,7 @@ export class SdBadge {
     label = '';
     render() {
         const resolvedColor = BADGE_COLOR_MAP[this.color] ?? BADGE_COLOR_MAP.blue;
-        return (h("div", { key: '58dcc44b3e0bc3e248508176ca19b3c66d30fd9f', class: "sd-badge", style: { '--sd-badge-color': resolvedColor } }, h("div", { key: 'deb6d20d33d0e4f614bc8283d21725f1c1911a07', class: "sd-badge__dot" }), h("div", { key: '47d1084381e76eb14e9ddaa380a15f8e87a8f1f8', class: "sd-badge__label" }, this.label)));
+        return (h("div", { key: '2326b8dc9bf6da9ab601dced34113bc62e99c4de', class: "sd-badge", style: { '--sd-badge-color': resolvedColor } }, h("div", { key: '40366f078c74d07515a456ae3dcd9bdb02fe5f7b', class: "sd-badge__dot" }), h("div", { key: 'b2e03701635521a46d5a0dda4b489800f6f92cf9', class: "sd-badge__label" }, this.label)));
     }
     static get is() { return "sd-badge"; }
     static get originalStyleUrls() {

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

@@ -61,13 +61,13 @@ export class SdButtonV2 {
         const hasLabel = Boolean(this.label);
         const iconOnly = !this.label && Boolean(this.icon);
         const accessibleName = iconOnly && this.ariaLabel.trim() ? this.ariaLabel : undefined;
-        return (h("button", { key: 'bd0c68550b9372b5fda70e90bd7f7f83c37861cc', class: this.getButtonClasses(preset, config.size, hasLabel, iconOnly), type: this.type, disabled: this.disabled, "aria-label": accessibleName, style: {
+        return (h("button", { key: '248e85751b7f7f1cdb770e4f4c1466fa8736f024', class: this.getButtonClasses(preset, config.size, hasLabel, iconOnly), type: this.type, disabled: this.disabled, "aria-label": accessibleName, style: {
                 '--sd-button-v2-bg': config.variant === 'primary' ? config.color : '#FFFFFF',
                 '--sd-button-v2-bg-hover': PRESET_HOVER_BACKGROUNDS[preset],
                 '--sd-button-v2-border': PRESET_BORDER_COLORS[preset],
                 '--sd-button-v2-content': PRESET_CONTENT_COLORS[preset],
                 '--sd-button-v2-accent': BUTTON_FOCUS_RING_COLOR,
-            }, onClick: this.handleClick }, h("span", { key: '59ef03ee76cc7d4ea85aefe1e32692562b233292', class: "sd-button-v2__content" }, this.icon && (h("sd-icon", { key: 'eae0c177bab7e0dbe8702cb3e4d161e8415d9b61', class: "sd-button-v2__icon", name: this.icon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-v2-current-content)" })), this.label && h("span", { key: '2244da58987418174c25f44c0300923ebdb04c86', class: "sd-button-v2__label" }, this.label))));
+            }, onClick: this.handleClick }, h("span", { key: '0b68fdf9711cd26d6f143fec848d3e16e32c81e2', class: "sd-button-v2__content" }, this.icon && (h("sd-icon", { key: '26bffa7135658f790e65a8b0aa32af055ea269f2', class: "sd-button-v2__icon", name: this.icon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-v2-current-content)" })), this.label && h("span", { key: '5016092b05b4f068f823ae8dbd6a47ea23763086', class: "sd-button-v2__label" }, this.label))));
     }
     static get is() { return "sd-button-v2"; }
     static get originalStyleUrls() {

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

@@ -3,7 +3,7 @@ export class SdCard {
     bordered = false;
     sdClass = '';
     render() {
-        return (h(Fragment, { key: '5469668df656a5992d9b3ac2a166bc9e39b8619d' }, h("div", { key: '95b883e6cc86fcaa8add6cbd029b5e4d1ed2759c', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, h("slot", { key: 'a09be5de9f8e0edab7e60045dffb39e52f9c545f' }))));
+        return (h(Fragment, { key: '01df653d1718aab046ee74275f13c926fbf05573' }, h("div", { key: '82dcf247f0f718328fa4f1c3548becff1c1d6fd3', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, h("slot", { key: '33b518500426f3abd40ee4a5719c8f784bfeb65a' }))));
     }
     static get is() { return "sd-card"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-confirm-modal/sd-confirm-modal.config.js

@@ -0,0 +1,17 @@
+import modalTokens from "../../tokens/generated/component.modal.json";
+export const CONFIRM_MODAL_DEFAULT_BUTTON = {
+    positive: 'primary_md',
+    negative: 'danger_md',
+};
+export const CONFIRM_MODAL_ICON_MAP = {
+    positive: 'notificationOutline',
+    negative: 'warningOutline',
+};
+export const CONFIRM_MODAL_ICON_COLOR = {
+    positive: modalTokens.modal.confirm.positive.icon,
+    negative: modalTokens.modal.confirm.negative.icon,
+};
+export const TITLE_ICON_SIZE = Number(modalTokens.modal.title.icon);
+export const CLOSE_ICON_SIZE = Number(modalTokens.modal.close.size);
+export const CLOSE_ICON_COLOR = modalTokens.modal.close.color;
+export const SUB_BUTTON_PRESET = 'neutral_outline_md';

package/dist/collection/components/sd-confirm-modal/sd-confirm-modal.css

@@ -0,0 +1,67 @@
+sd-confirm-modal {
+  display: block;
+  width: fit-content;
+  min-width: 520px;
+}
+sd-confirm-modal .sd-confirm-modal {
+  position: relative;
+  padding: var(--sd-modal-modal-padding-y) var(--sd-modal-modal-padding-x);
+  border-radius: var(--sd-modal-modal-radius);
+  box-shadow: 4px 4px 24px 4px rgba(0, 0, 0, 0.2);
+  background: var(--sd-modal-modal-bg);
+}
+sd-confirm-modal .sd-confirm-modal__close-button {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  cursor: pointer;
+}
+sd-confirm-modal .sd-confirm-modal__icon {
+  display: block;
+  width: var(--sd-modal-modal-title-icon);
+  height: var(--sd-modal-modal-title-icon);
+  margin: 0 auto var(--sd-modal-modal-title-gap) auto;
+}
+sd-confirm-modal .sd-confirm-modal__title {
+  color: var(--sd-modal-modal-title-color);
+  font-size: var(--sd-modal-modal-title-typography-font-size);
+  font-weight: var(--sd-modal-modal-title-typography-font-weight);
+  line-height: var(--sd-modal-modal-title-typography-line-height);
+  text-align: center;
+  margin: 0 0 var(--sd-modal-modal-body-gap) 0;
+}
+sd-confirm-modal .sd-confirm-modal__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sd-modal-modal-body-gap);
+}
+sd-confirm-modal .sd-confirm-modal__message-text {
+  color: var(--sd-modal-modal-message-color);
+  font-size: var(--sd-modal-modal-message-typography-font-size);
+  font-weight: var(--sd-modal-modal-message-typography-font-weight);
+  line-height: var(--sd-modal-modal-message-typography-line-height);
+  text-align: center;
+  margin: 0;
+}
+sd-confirm-modal .sd-confirm-modal__content-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 12px 16px;
+  border: 1px solid #e1e1e1;
+  border-radius: 8px;
+  background: white;
+}
+sd-confirm-modal .sd-confirm-modal__slot-label {
+  font-size: 14px;
+  font-weight: 700;
+  line-height: var(--sd-modal-modal-message-typography-line-height);
+  color: var(--sd-modal-modal-message-color);
+}
+sd-confirm-modal .sd-confirm-modal__button {
+  display: flex;
+  justify-content: center;
+  gap: var(--sd-modal-modal-button-gap);
+  margin-top: 32px;
+}