@sellmate/design-system 1.0.60 → 1.0.62

package/dist/cjs/sd-loading-spinner_3.cjs.entry.js

@@ -17,7 +17,7 @@ const SdLoadingSpinner = class {
         return resolveColor.resolveColor(this.color);
     }
     render() {
-        return (index.h(index.Fragment, { key: '1a4edb8be9cc83ab900cd615ee30958d9822e98b' }, index.h("svg", { key: '634070026b58303bf3423b10f37ed6603179b9b1', class: "sd-loading-spinner", width: "72px", height: "72px", viewBox: "25 25 50 50", style: { color: this.resolvedColor } }, index.h("circle", { key: 'fda3f7e4f787176f6030e19a3f2c1dd59326d35a', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
+        return (index.h(index.Fragment, { key: 'a86933f554042c2d4b18836d37bb762d17080202' }, index.h("svg", { key: 'd0f301366f4b28855bf609dc048fdc7d76fd0433', class: "sd-loading-spinner", width: "72px", height: "72px", viewBox: "25 25 50 50", style: { color: this.resolvedColor } }, index.h("circle", { key: '64068446f4a6ec1892a00ca92da7a3f1f566891c', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
     }
 };
 SdLoadingSpinner.style = sdLoadingSpinnerCss();
@@ -97,12 +97,12 @@ const SdPagination = class {
         }
     }
     render() {
-        return (index.h("div", { key: 'd370dfd96244d439f83aa6f283ea3601b51ca8f1', class: this.paginationClasses }, index.h("div", { key: '4287df0cbd99892e643b1e68ce051ac119c758d2', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (index.h("div", { class: "pagination-info" }, index.h("span", { class: "current-page" }, this.currentPage), index.h("span", null, "/"), index.h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (index.h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
+        return (index.h("div", { key: '910b6487f1d2b5581116a19e4bdf4514fe961922', class: this.paginationClasses }, index.h("div", { key: '1109809ea6c19088617f3ed4e3c878e60071084f', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (index.h("div", { class: "pagination-info" }, index.h("span", { class: "current-page" }, this.currentPage), index.h("span", null, "/"), index.h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (index.h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
                 'pagination-btn': true,
                 'pagination-btn--selected': this.currentPage === n,
             }, disabled: this.currentPage === n, style: {
                 '--pagination-btn-width': `${this.buttonWidth}px`,
-            }, onClick: () => this.handlePageChange(n) }, n)))), index.h("div", { key: 'ad51e05546d929ac01898e93ab4285018837394a', class: "append-btns" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n)))), index.h("div", { key: '10a0645cba99193a64fbe1f2df90bef9b19da8d5', class: "append-btns" }, this.renderNextButtons())));
     }
 };
 SdPagination.style = sdPaginationCss();
@@ -248,7 +248,7 @@ const SdSelect = class extends baseDropdownEvent.BaseDropdownEvent {
         }
     };
     render() {
-        return (index.h("sd-field", { key: 'f7cd0c34188712a30389d07bde7edc7875e9923b', 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) }, index.h("div", { key: '460a8a23247e24a02bd25470105598914029e205', class: {
+        return (index.h("sd-field", { key: '33f8a4e75ab20389213be5643f479b806e8e78c3', 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) }, index.h("div", { key: '148f21e1a19cf4f4b9e61b4192d631d85dbc57a4', class: {
                 'sd-select': true,
                 'sd-select--disabled': this.disabled,
                 'sd-select--error': !!this.error,

package/dist/cjs/sd-number-input.cjs.entry.js

@@ -388,12 +388,12 @@ const SdNumberInput = class {
             '--sd-textinput-input-hint-typography-line-height': `${NUMBER_INPUT_HINT.typography.lineHeight}px`,
             '--sd-textinput-input-contents-gap': `${NUMBER_INPUT_CONTENTS_GAP}px`,
         };
-        return (index.h("sd-field", { key: 'c09a48d9c0bfb0eb6c4327e63ff190b4fee7eff9', name: this.name, 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, status: this.status, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, index.h("div", { key: '7ba690b017d58326640083feb4f88ab74e20f7e3', class: "sd-number-input__content" }, this.useButton && (index.h("button", { key: '0eb3ccd26428fce21d74b1e2f06258b054337017', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, index.h("sd-icon", { key: '4af528aa82ddc6f8abbee1fa8617f5fefc77f41b', name: "minus", size: iconSize, color: this.isDecrementDisabled()
+        return (index.h("sd-field", { key: 'd12c62be0352fcaa356450f7a534f3f1c684cf8e', name: this.name, 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, status: this.status, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, index.h("div", { key: 'be7463579f63800d84531ed72fe84c47de7a005c', class: "sd-number-input__content" }, this.useButton && (index.h("button", { key: '23f1e57fc26545bef557b1fc6d1827783ffe7144', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, index.h("sd-icon", { key: '9b918e18437423e3aec20e5cb66d0d84b3e59649', name: "minus", size: iconSize, color: this.isDecrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
-                : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && (index.h("span", { key: 'f524a85295c29dc02b6803d5a145d24d6d7c3f1b', class: "sd-number-input__prefix" }, this.inputPrefix)), index.h("input", { key: '4f3c539cb82745b317ebc2e17f2852a5b386ba6b', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__native ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
+                : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && (index.h("span", { key: '0793d70a0040400cc4e1f3bfe8cafaa02f42a8c2', class: "sd-number-input__prefix" }, this.inputPrefix)), index.h("input", { key: '31d91862988aa0ee3aabcd78a66844c37b9efac0', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__native ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
                 textAlign: this.useButton ? 'center' : 'right',
                 ...this.inputStyle,
-            } }), this.inputSuffix && (index.h("span", { key: '35a1cd706a87cf9320262b12aab7679cbb9eb7f2', class: "sd-number-input__suffix" }, this.inputSuffix)), this.useButton && (index.h("button", { key: 'a818bf380ac32291155bf8a3c35cf9b9a007ec5e', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, index.h("sd-icon", { key: '0d2e75fb5ebada9aa0846e807695d31f29b18647', name: "add", size: iconSize, color: this.isIncrementDisabled()
+            } }), this.inputSuffix && (index.h("span", { key: 'fab71e56d4876d0899b9744632d21fb41c344bb6', class: "sd-number-input__suffix" }, this.inputSuffix)), this.useButton && (index.h("button", { key: '1b1c80f63d7bd8503a9d3c2cbbd5170a44d511bf', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, index.h("sd-icon", { key: 'a0073de5e46fc8463f818ac2521725fb8eb7211f', name: "add", size: iconSize, color: this.isIncrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
                 : NUMBER_INPUT_STEPPER.icon.default }))))));
     }

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

@@ -56,14 +56,14 @@ const SdPopover = class {
         this.showPopover = false;
     };
     render() {
-        return (index.h(index.Fragment, { key: '6a0b64ce442f1bd1dc76f22a160172a87a63a1d8' }, 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: 'e8d39da8af440c81773805331ab97a0105124d81', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement, offset: this.popoverOffset }, index.h("div", { key: 'f608e4dc384f48a9f52133055b718e305d1e9f86', class: {
+        return (index.h(index.Fragment, { key: '8b4e44957bff5bdb075568b15612b31fb42eaffc' }, 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: 'e4b676771effb4a51593c6ae0a23f15bd34878a3', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement, offset: this.popoverOffset }, index.h("div", { key: 'c74dea7df660a3e8285f813d9cfe490c144f3093', 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: '8052d9f446b03770c22857048c88048f0bc982cd', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, index.h(tooltipArrow.TooltipArrow, { key: 'f6266c4da625b539f9864da6b09599a5b4bf07cb' })), index.h("div", { key: '8de90282dae5ba223b6495c1f5ef9baaac88ed17', class: "sd-floating-menu__content" }, this.menuTitle && index.h("div", { key: '79e26ede34d97abce06bfda8dc1bd29122c2e1ac', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (index.h("div", { key: 'a25d8a379e373e136363a3bce19be76fd2fba182', class: "sd-floating-menu__messages" }, this.messages.map(message => (index.h("div", null, message))))), this.buttons.length > 0 && (index.h("div", { key: '9cf61069c654a2d884ae0660ec6ffceb563e3617', 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("sd-ghost-button", { key: '14ef6918e763521ff4db0a0f05e1598e767f257d', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xs", onClick: () => this.handleClose() })))))));
+            } }, index.h("i", { key: '7ff2cfecec309217bf1b5ad1f523e37737798120', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, index.h(tooltipArrow.TooltipArrow, { key: 'df1696d49eb0894805e59f3d0c1112be20e94d84' })), index.h("div", { key: '0c4babf4b592f5457bdc83f72316a9e718e075aa', class: "sd-floating-menu__content" }, this.menuTitle && index.h("div", { key: '4a8c4fb114b15068b49f5c6546080e8667ea12fe', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (index.h("div", { key: '47646cb9cb596afcf3bf38e2b08cdef7074ff658', class: "sd-floating-menu__messages" }, this.messages.map(message => (index.h("div", null, message))))), this.buttons.length > 0 && (index.h("div", { key: '939eb40eba7beda3aac32abcdcb9f6cd75fb6b45', 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("sd-ghost-button", { key: 'fb73a35c3db25d2cde16aeb10f14005e82121c6a', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xs", onClick: () => this.handleClose() })))))));
     }
     static get watchers() { return {
         "show": [{

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

@@ -227,7 +227,7 @@ const SdPortal = class {
         this.close.emit();
     }
     render() {
-        return index.h("slot", { key: 'c1e05f5d7c809418279e4ded8bbb8c4b29703bb1' });
+        return index.h("slot", { key: '07cb09b04ab2567afb15b9ae2cc189875f4b55b4' });
     }
     static get watchers() { return {
         "open": [{

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: 'f5b723807c29b9e4a742febaf7d2f984f9de61d5', style: {
+        return (index.h("div", { key: 'f50623b8a78ce370c5b36e0fc5ac6e04bb5e029c', style: {
                 '--progress-color': this.progressColor,
                 '--progress-percentage': `${this.progressPercentage}%`,
-            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && index.h("div", { key: '369e1b7805414b8a2fa5e44f4746435335a251cb', class: "sd-progress__label" }, this.label)));
+            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && index.h("div", { key: '5a6414ee55f7d3300a9cc06e86376bfd1a123a64', 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-radio-button-group.cjs.entry.js

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

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

@@ -2,7 +2,7 @@
 
 var index = require('./index-BQt-JC6r.js');
 
-const sdRadioGroupCss = () => `sd-radio{display:inline-flex;width:fit-content}sd-radio .sd-radio{cursor:pointer;height:20px;display:inline-flex;align-items:center}sd-radio .sd-radio label{display:inline-flex;width:fit-content;align-items:center;gap:8px;cursor:pointer}sd-radio .sd-radio label input{display:inline-block;position:relative;appearance:none;margin:0;width:16px;height:16px;border:1px solid #888888;border-radius:50%;accent-color:#0075FF;background-color:white;cursor:pointer}sd-radio .sd-radio label input:checked{border-color:#0075FF;background-color:white}sd-radio .sd-radio label input:checked::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:10px;height:10px;border-radius:50%;background-color:#0075FF}sd-radio .sd-radio label input:disabled{border-color:#CCCCCC;background-color:#EEEEEE}sd-radio .sd-radio label input:disabled:checked::before{background-color:#CCCCCC}sd-radio .sd-radio label input:not(:disabled):hover{border-color:#0075FF;background-color:#D9EAFF}sd-radio .sd-radio--disabled{cursor:not-allowed !important}sd-radio .sd-radio--disabled label{cursor:not-allowed !important}sd-radio .sd-radio--disabled label input{cursor:not-allowed !important}sd-radio-group{display:inline-block}sd-radio-group .sd-radio-group{display:flex}sd-radio-group .sd-radio-group--vertical{flex-direction:column;gap:8px}sd-radio-group .sd-radio-group--horizontal{flex-direction:row;align-items:center;gap:20px}`;
+const sdRadioGroupCss = () => `sd-radio{display:inline-flex;width:fit-content;height:var(--sd-radio-line-height);line-height:0}sd-radio .sd-radio{cursor:pointer;display:inline-flex;align-items:center;gap:var(--sd-radio-gap);height:var(--sd-radio-line-height);max-height:var(--sd-radio-line-height)}sd-radio .sd-radio>input{position:absolute;width:0;height:0;opacity:0;pointer-events:none}sd-radio .sd-radio>input:focus-visible+.sd-radio__circle{box-shadow:0 0 0 2px white, 0 0 0 4px var(--sd-radio-checked-border);outline:none}sd-radio .sd-radio__circle{position:relative;width:var(--sd-radio-size);height:var(--sd-radio-size);border-radius:50%;border:var(--sd-radio-border-width) solid var(--sd-radio-unchecked-border);box-sizing:border-box;background:var(--sd-radio-unchecked-bg);display:inline-flex;flex-shrink:0}sd-radio .sd-radio__label{font-size:var(--sd-radio-font-size);font-weight:var(--sd-radio-font-weight);color:var(--sd-radio-label-color);line-height:var(--sd-radio-line-height)}sd-radio .sd-radio:hover:not(.sd-radio--disabled) .sd-radio__circle{background:var(--sd-radio-unchecked-bg-hover);border-color:var(--sd-radio-unchecked-border-hover)}sd-radio .sd-radio--checked .sd-radio__circle{border-color:var(--sd-radio-checked-border)}sd-radio .sd-radio--checked .sd-radio__circle::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:10px;height:10px;border-radius:50%;background:var(--sd-radio-checked-dot)}sd-radio .sd-radio--disabled{cursor:not-allowed}sd-radio .sd-radio--disabled .sd-radio__circle{background:var(--sd-radio-disabled-bg);border-color:var(--sd-radio-disabled-border)}sd-radio .sd-radio--disabled.sd-radio--checked .sd-radio__circle::after{background:var(--sd-radio-disabled-dot)}sd-radio-group{display:inline-block}sd-radio-group .sd-radio-group{display:flex}sd-radio-group .sd-radio-group--vertical{flex-direction:column;gap:8px}sd-radio-group .sd-radio-group--horizontal{flex-direction:row;align-items:center;gap:20px}`;
 
 const SdRadioGroup = class {
     constructor(hostRef) {
@@ -31,7 +31,7 @@ const SdRadioGroup = class {
         return classes.join(' ');
     }
     render() {
-        return (index.h("div", { key: '82979426bafc24b48858588ad186dfe069616883', class: this.getGroupClasses(), role: "radiogroup" }, this.options.map(option => {
+        return (index.h("div", { key: '4c34a3ab6790818e17c8452fa3233e7c720b8246', class: this.getGroupClasses(), role: "radiogroup" }, this.options.map(option => {
             return (index.h("sd-radio", { key: `radio-${option.value}`, val: String(option.value), value: String(this.value), label: option.label, disabled: this.disabled || !!option.disabled, onSdUpdate: ({ detail }) => this.handleRadioChange(detail) }));
         })));
     }

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

@@ -2,7 +2,79 @@
 
 var index = require('./index-BQt-JC6r.js');
 
-const sdRadioCss = () => `sd-radio{display:inline-flex;width:fit-content}sd-radio .sd-radio{cursor:pointer;height:20px;display:inline-flex;align-items:center}sd-radio .sd-radio label{display:inline-flex;width:fit-content;align-items:center;gap:8px;cursor:pointer}sd-radio .sd-radio label input{display:inline-block;position:relative;appearance:none;margin:0;width:16px;height:16px;border:1px solid #888888;border-radius:50%;accent-color:#0075FF;background-color:white;cursor:pointer}sd-radio .sd-radio label input:checked{border-color:#0075FF;background-color:white}sd-radio .sd-radio label input:checked::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:10px;height:10px;border-radius:50%;background-color:#0075FF}sd-radio .sd-radio label input:disabled{border-color:#CCCCCC;background-color:#EEEEEE}sd-radio .sd-radio label input:disabled:checked::before{background-color:#CCCCCC}sd-radio .sd-radio label input:not(:disabled):hover{border-color:#0075FF;background-color:#D9EAFF}sd-radio .sd-radio--disabled{cursor:not-allowed !important}sd-radio .sd-radio--disabled label{cursor:not-allowed !important}sd-radio .sd-radio--disabled label input{cursor:not-allowed !important}`;
+const radio = {
+	size: "16",
+	borderWidth: "1",
+	gap: "8",
+	typography: {
+		fontWeight: "400",
+		fontSize: "12",
+		lineHeight: "20"},
+	unchecked: {
+		bg: {
+			"default": "#FFFFFF",
+			hover: "#D9EAFF"
+		},
+		border: {
+			"default": "#AAAAAA",
+			hover: "#0075FF"
+		}
+	},
+	checked: {
+		border: {
+			"default": "#0075FF"
+		},
+		dot: {
+			"default": "#0075FF"
+		}
+	},
+	bg: {
+		disabled: "#E1E1E1"
+	},
+	border: {
+		disabled: "#CCCCCC"
+	},
+	dot: {
+		disabled: "#CCCCCC"
+	},
+	label: {
+		"default": "#222222"
+	}
+};
+var radioTokens = {
+	radio: radio
+};
+
+const RADIO_LAYOUT = {
+    size: radioTokens.radio.size,
+    borderWidth: radioTokens.radio.borderWidth,
+    gap: radioTokens.radio.gap,
+};
+const RADIO_TYPOGRAPHY = {
+    fontSize: radioTokens.radio.typography.fontSize,
+    lineHeight: radioTokens.radio.typography.lineHeight,
+    fontWeight: radioTokens.radio.typography.fontWeight,
+};
+const RADIO_COLORS = {
+    unchecked: {
+        bg: radioTokens.radio.unchecked.bg.default,
+        bgHover: radioTokens.radio.unchecked.bg.hover,
+        border: radioTokens.radio.unchecked.border.default,
+        borderHover: radioTokens.radio.unchecked.border.hover,
+    },
+    checked: {
+        border: radioTokens.radio.checked.border.default,
+        dot: radioTokens.radio.checked.dot.default,
+    },
+    disabled: {
+        bg: radioTokens.radio.bg.disabled,
+        border: radioTokens.radio.border.disabled,
+        dot: radioTokens.radio.dot.disabled,
+    },
+    label: radioTokens.radio.label.default,
+};
+
+const sdRadioCss = () => `sd-radio{display:inline-flex;width:fit-content;height:var(--sd-radio-line-height);line-height:0}sd-radio .sd-radio{cursor:pointer;display:inline-flex;align-items:center;gap:var(--sd-radio-gap);height:var(--sd-radio-line-height);max-height:var(--sd-radio-line-height)}sd-radio .sd-radio>input{position:absolute;width:0;height:0;opacity:0;pointer-events:none}sd-radio .sd-radio>input:focus-visible+.sd-radio__circle{box-shadow:0 0 0 2px white, 0 0 0 4px var(--sd-radio-checked-border);outline:none}sd-radio .sd-radio__circle{position:relative;width:var(--sd-radio-size);height:var(--sd-radio-size);border-radius:50%;border:var(--sd-radio-border-width) solid var(--sd-radio-unchecked-border);box-sizing:border-box;background:var(--sd-radio-unchecked-bg);display:inline-flex;flex-shrink:0}sd-radio .sd-radio__label{font-size:var(--sd-radio-font-size);font-weight:var(--sd-radio-font-weight);color:var(--sd-radio-label-color);line-height:var(--sd-radio-line-height)}sd-radio .sd-radio:hover:not(.sd-radio--disabled) .sd-radio__circle{background:var(--sd-radio-unchecked-bg-hover);border-color:var(--sd-radio-unchecked-border-hover)}sd-radio .sd-radio--checked .sd-radio__circle{border-color:var(--sd-radio-checked-border)}sd-radio .sd-radio--checked .sd-radio__circle::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:10px;height:10px;border-radius:50%;background:var(--sd-radio-checked-dot)}sd-radio .sd-radio--disabled{cursor:not-allowed}sd-radio .sd-radio--disabled .sd-radio__circle{background:var(--sd-radio-disabled-bg);border-color:var(--sd-radio-disabled-border)}sd-radio .sd-radio--disabled.sd-radio--checked .sd-radio__circle::after{background:var(--sd-radio-disabled-dot)}`;
 
 const SdRadio = class {
     constructor(hostRef) {
@@ -10,28 +82,58 @@ const SdRadio = class {
         this.update = index.createEvent(this, "sdUpdate", 7);
     }
     value;
-    disabled = false;
     val;
+    disabled = false;
     label;
     update;
-    getRadioClasses() {
-        const isSelected = String(this.val) === String(this.value);
-        const classes = ['sd-radio', isSelected ? 'sd-radio--selected' : 'sd-radio--unselected'];
+    valueChanged(newValue) {
+        this.value = newValue;
+    }
+    get isSelected() {
+        return String(this.val) === String(this.value);
+    }
+    get radioClasses() {
+        const classes = [
+            'sd-radio',
+            this.isSelected ? 'sd-radio--checked' : 'sd-radio--unchecked',
+        ];
         if (this.disabled) {
             classes.push('sd-radio--disabled');
         }
         return classes.join(' ');
     }
-    handleRadioChange() {
+    handleRadioChange = () => {
         if (this.disabled)
             return;
         this.value = this.val;
         this.update.emit(this.value);
-    }
+    };
     render() {
-        const isSelected = String(this.val) === String(this.value);
-        return (index.h("div", { key: 'e9d7875b19c108505e7dfd455432102c8035097f', "aria-label": String(this.val) || 'radio option', "aria-checked": isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', class: this.getRadioClasses() }, index.h("label", { key: `radio-${this.val}` }, index.h("input", { key: 'cc0aa88287000b77c2329bba2371e9e4404f8203', type: "radio", name: String(this.val), value: String(this.val), checked: isSelected, disabled: this.disabled, onInput: () => this.handleRadioChange() }), this.val != null && (index.h("span", { key: 'b2a371ef8bc4ccc57ffbbc6acc22bf4b9c391fc1', class: "sd-radio-group__label" }, this.label || String(this.val))))));
+        const cssVars = {
+            '--sd-radio-size': `${RADIO_LAYOUT.size}px`,
+            '--sd-radio-border-width': `${RADIO_LAYOUT.borderWidth}px`,
+            '--sd-radio-gap': `${RADIO_LAYOUT.gap}px`,
+            '--sd-radio-font-size': `${RADIO_TYPOGRAPHY.fontSize}px`,
+            '--sd-radio-line-height': `${RADIO_TYPOGRAPHY.lineHeight}px`,
+            '--sd-radio-font-weight': RADIO_TYPOGRAPHY.fontWeight,
+            '--sd-radio-unchecked-bg': RADIO_COLORS.unchecked.bg,
+            '--sd-radio-unchecked-bg-hover': RADIO_COLORS.unchecked.bgHover,
+            '--sd-radio-unchecked-border': RADIO_COLORS.unchecked.border,
+            '--sd-radio-unchecked-border-hover': RADIO_COLORS.unchecked.borderHover,
+            '--sd-radio-checked-border': RADIO_COLORS.checked.border,
+            '--sd-radio-checked-dot': RADIO_COLORS.checked.dot,
+            '--sd-radio-disabled-bg': RADIO_COLORS.disabled.bg,
+            '--sd-radio-disabled-border': RADIO_COLORS.disabled.border,
+            '--sd-radio-disabled-dot': RADIO_COLORS.disabled.dot,
+            '--sd-radio-label-color': RADIO_COLORS.label,
+        };
+        return (index.h("label", { key: '72b116f38c66acee8e68a839c3f062293d65129c', class: this.radioClasses, style: cssVars, "aria-checked": this.isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, index.h("input", { key: 'edcf50f09c198ae3fb993706dec757fd706fe0de', type: "radio", name: String(this.val), value: String(this.val), checked: this.isSelected, disabled: this.disabled, "aria-label": this.label || String(this.val), onInput: this.handleRadioChange }), index.h("span", { key: '49ce92b075290f8aca715466456f4b7cdf3017e2', class: "sd-radio__circle" }), this.label && index.h("span", { key: '99d2ce0d53daf5d8ef232f6984ef42e605a68541', class: "sd-radio__label" }, this.label)));
     }
+    static get watchers() { return {
+        "value": [{
+                "valueChanged": 0
+            }]
+    }; }
 };
 SdRadio.style = sdRadioCss();
 

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

@@ -155,10 +155,10 @@ const SdSelectDropdown = class {
         this.isScrolled = scrollTop > 0;
     };
     render() {
-        return (index.h("div", { key: '47a99b4faac3adb110a548860ef094ba3bd4630a', class: {
+        return (index.h("div", { key: 'c2e248441cf6825fae9649ab3c3d01ab171ccb85', class: {
                 'sd-select-dropdown': true,
                 'sd-select-dropdown--ready': this.isDropdownReady,
-            }, style: this.dropdownSize, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (index.h("sd-select-search-input", { key: '0ed08c8a422d7d0be26ffcd68a424700feb6d66f', ref: el => (this.searchRef = el), isScrolled: this.isScrolled, searchText: this.searchText, onSdSearchInput: (event) => (this.searchText = event.detail || ''), onSdSearchFocus: () => (this.itemIndex = -1) })), this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index$1) => (index.h("slot", { name: `option-${option.value}` }, index.h("sd-select-option", { option: option, index: index$1, isSelected: this.isOptionSelected(option.value), isFocused: index$1 === this.itemIndex, onOptionClick: ({ detail }) => this.optionClick.emit(detail), useCheckbox: this.useCheckbox }))))) : (index.h("slot", { name: "option-placeholder" }, index.h("div", { class: 'sd-select-option-placeholder' }, this.optionPlaceholder)))));
+            }, style: this.dropdownSize, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (index.h("sd-select-search-input", { key: 'a6e9b0b74dbcd50d75bbfa51d452881298e9f439', ref: el => (this.searchRef = el), isScrolled: this.isScrolled, searchText: this.searchText, onSdSearchInput: (event) => (this.searchText = event.detail || ''), onSdSearchFocus: () => (this.itemIndex = -1) })), this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index$1) => (index.h("slot", { name: `option-${option.value}` }, index.h("sd-select-option", { option: option, index: index$1, isSelected: this.isOptionSelected(option.value), isFocused: index$1 === this.itemIndex, onOptionClick: ({ detail }) => this.optionClick.emit(detail), useCheckbox: this.useCheckbox }))))) : (index.h("slot", { name: "option-placeholder" }, index.h("div", { class: 'sd-select-option-placeholder' }, this.optionPlaceholder)))));
     }
     static get watchers() { return {
         "filteredOptions": [{
@@ -205,7 +205,7 @@ const SdSelectOption = class {
         }
     };
     render() {
-        return (index.h("div", { key: 'b9844296973b6e85d3c3e3652671e89f470ec7a9', class: {
+        return (index.h("div", { key: '1e4afa2db7fcf6e8baddd533763536973d32c51d', class: {
                 'sd-select__option': true,
                 'sd-select__option--selected': this.isSelected,
                 'sd-select__option--disabled': !!this.option.disabled,

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

@@ -275,7 +275,7 @@ const SdSelectGroup = class extends baseDropdownEvent.BaseDropdownEvent {
         });
     }
     render() {
-        return (index.h("sd-field", { key: 'a0269e6ebfce2363c451fdb6afbe3979265ffb52', 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: '55c8f062080befa65986e29d3b7835146150302a', class: {
+        return (index.h("sd-field", { key: '205ef7aabb819067026cf0f0dfa2bc62f3e1d3dc', 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: 'b6db700cb68d1eaa1a99f959d3fd78c0e2088c3d', 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: '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: {
+        return (index.h("sd-field", { key: '3cc9e5b2f1062e216a0dd738dff6918084c5e3b4', 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: '60be94c561be252d6cc822e6be60a5e31390a15f', 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: 'c2509aa07a6d69bd24bca0afd708d92db47e8084', 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: 'd0e5ac84ad2aeb947b02b5a2cd4fbb66bf6e9419', class: {
+        return (index.h("sd-field", { key: '1e3954ff06d55a6feb8ff70cbba35e11a1b4863e', 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: '192dd606eaa8a7642dfaf28f342701694cbbc237', 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: '9742c10ec20db29db941ac58666eb662b7b4275e', class: {
+        return (index.h("div", { key: 'd39aa4744aa498f8b2f7c77502f2c4f56e670296', 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: 'e09a53d6c7e9897266a6b7b2ba2725afd2d45f67', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (index.h("sd-checkbox", { key: '4b1d68eade6a25b44ad8c28c7bbaaf894d3b6158', 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: 'c856a933ddfa7084741cbb65d2075f3b59404ae7', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (index.h("sd-checkbox", { key: '455dde9674811174fb4b939ca37b5128085cd65d', value: this.isSelected, disabled: this.option.disabled, onClick: e => {
                 e.preventDefault();
                 this.handleClick(this.option, this.isSelected, e);
-            } })), index.h("span", { key: '5bd439162ed1ac623a8bec83e31c924294c61b75', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (index.h("span", { key: '39a6367f373ffd7403eb37a40e119e1534e79d22', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
+            } })), index.h("span", { key: '0255e9f2da18d3da01843ec61c9bc75150efcc4a', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (index.h("span", { key: '73c0a138d3e38f4fc8c8e94230aea82c89a7cb84', 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-BQt-JC6r.js');
-var sdSelectV2_config = require('./sd-select-v2.config-BJXi4hMP.js');
+var sdSelectV2_config = require('./sd-select-v2.config-7xBJQhvx.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--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.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:0 1 auto;min-width:0;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--group.sd-select-v2-list-item--focused .sd-select-v2-list-item__count{color:#ffffff}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: 'a7d424f1b7025cd41273a0264cdc1f973ff13061', class: {
+        return (index.h("div", { key: '8cd297b8d4ff1a7ef5c64bcaefef9cc54b3de357', 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: 'bbcd2a4ce4b0a2efdc06647a7b2d6c1f0875667c', 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: '6f0df85e664b797547d2f24038f5112767b3fa67', class: "sd-select-v2-list-item__label" }, this.option.label), this.countInfo && (index.h("span", { key: '04e862cc16406c1fd3e27e716c33f54d72f7d80d', 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: '11597153f05d17fc172920a65d26d74b4b7aa239', 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: '1dc78dcbffc3f3826fac7a9a3b8aa300c3754de6', class: "sd-select-v2-list-item__label" }, this.option.label), this.countInfo && (index.h("span", { key: '5b96136bc54b241359e60849ebd1e792eb749c0d', class: "sd-select-v2-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
     }
 };
 SdSelectV2ListItem.style = sdSelectV2ListItemCss();
@@ -136,12 +136,12 @@ const SdSelectV2ListItemSearch = class {
             clearTimeout(this.debounceTimer);
     }
     render() {
-        return (index.h("div", { key: '87f0a8fc24fe4b80cd29f63ca4f269b242a35f56', class: {
+        return (index.h("div", { key: '8ccebea10b658edba2c417893f2a939a7361ef1b', class: {
                 'sd-select-v2-list-item-search': true,
                 'sd-select-v2-list-item-search--scrolled': this.isScrolled,
-            } }, index.h("div", { key: '980ad86deb07ae25373c8802caa46febbdc1d8f6', class: "sd-select-v2-list-item-search__inner" }, index.h("sd-icon", { key: '9e9fc2104743c1ec7790cffffb955135908b36e7', name: "search", size: 16, color: "grey_70", class: "sd-select-v2-list-item-search__icon" }), index.h("input", { key: '601668bfaffcba5285375e845d0b2ef59238f1a8', ref: el => {
+            } }, index.h("div", { key: '4007afb556220e746c2379f643afb38445345853', class: "sd-select-v2-list-item-search__inner" }, index.h("sd-icon", { key: '1afc1ef8aa6f3d26ee1001212ac9ea7d0bf3d1e4', name: "search", size: 16, color: "grey_70", class: "sd-select-v2-list-item-search__icon" }), index.h("input", { key: 'a32ddcc18a401217f1a624e544c56bd499b0f47e', 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, onFocus: () => this.searchFocus.emit() }), this.searchText && (index.h("button", { key: '56973c7d365f9734b2135aa406651edd372f9789', type: "button", class: "sd-select-v2-list-item-search__clear", onClick: this.handleClear }, index.h("sd-icon", { key: '84161963570776fe9ecfb519d654fe00aa4e7c6a', 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, onFocus: () => this.searchFocus.emit() }), this.searchText && (index.h("button", { key: '150d5aca71d6ac6277917177ed4e4e157e4ba33f', type: "button", class: "sd-select-v2-list-item-search__clear", onClick: this.handleClear }, index.h("sd-icon", { key: 'f0397c023e5dd5972eb6dfd20f9fb1ac1027fb2f', name: "close", size: 12, color: "#888888" }))))));
     }
 };
 SdSelectV2ListItemSearch.style = sdSelectV2ListItemSearchCss();

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

@@ -1,9 +1,9 @@
 'use strict';
 
 var index = require('./index-BQt-JC6r.js');
-var sdSelectV2_config = require('./sd-select-v2.config-BJXi4hMP.js');
+var sdSelectV2_config = require('./sd-select-v2.config-7xBJQhvx.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;outline:none}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}`;
+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;outline:none}sd-select-v2-listbox .sd-select-v2-listbox__list{flex:1;min-height:0;overflow-y:auto;padding-bottom:0}sd-select-v2-listbox .sd-select-v2-listbox__empty{padding:12px;text-align:center;font-size:12px;line-height:20px;color:#888888}`;
 
 const SdSelectV2Listbox = class {
     constructor(hostRef) {
@@ -290,9 +290,8 @@ const SdSelectV2Listbox = class {
             '--listbox-max-width': this.maxWidth,
             '--listbox-max-height': this.maxHeight,
             '--listbox-radius': `${sdSelectV2_config.LIST_BOX_LAYOUT.radius}px`,
-            '--listbox-padding-bottom': `${sdSelectV2_config.LIST_BOX_LAYOUT.paddingBottom}px`,
         };
-        return (index.h("div", { key: 'c04974ad387df3d23efbf27afdb6cc92f24a744e', class: "sd-select-v2-listbox", style: cssVars }, this.showSearch && (index.h("sd-select-v2-list-item-search", { key: 'b8ef69dc0a35cc2110665095feea58d4132a6bad', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), index.h("div", { key: 'd8a2f04f1dbbd8fde39203ac52a1bd220097495d', class: "sd-select-v2-listbox__list", onScroll: this.handleScroll, ref: el => {
+        return (index.h("div", { key: '92289973077789bd6f9657bb5b2e5567845bdc19', class: "sd-select-v2-listbox", style: cssVars }, this.showSearch && (index.h("sd-select-v2-list-item-search", { key: 'a26b9ba36f42165ab80347ea4f0194b98746a9a6', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), index.h("div", { key: 'd563a179278ec5c6eaa0b4c71d18cc5055bbebb5', class: "sd-select-v2-listbox__list", onScroll: this.handleScroll, ref: el => {
                 this.listEl = el;
             } }, 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), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) })))))));
     }
@@ -338,11 +337,11 @@ const SdSelectV2Trigger = class {
                 ? sdSelectV2_config.SELECT_COLORS.icon.disabled
                 : sdSelectV2_config.SELECT_COLORS.icon.default,
         };
-        return (index.h("div", { key: '9bbda5c8b8b359f6df1079f9f5b1b170472ba7d3', class: {
+        return (index.h("div", { key: '02e382b2a1867fa8816c11e2d07bb042a15027fb', 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 }, index.h("div", { key: 'b129a7bcbdae8b6873f0b9f97cf37f69829de36a', class: "sd-select-v2-trigger__content" }, index.h("span", { key: 'fff9c48504e54ea4bedd1494c3d321197f9b0e8d', class: "sd-select-v2-trigger__text" }, hasValue ? this.displayText : this.placeholder), index.h("sd-icon", { key: 'd3e88a0de9fc773a3f5e3c173159ba2feff1ba67', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
+            }, style: cssVars, onClick: this.handleClick }, index.h("div", { key: 'e08360c05f765ccc0c9dbefe8e402a66edd1c242', class: "sd-select-v2-trigger__content" }, index.h("span", { key: 'dc00441e24e17b9bb28a36892ff3564d4bb40a42', class: "sd-select-v2-trigger__text" }, hasValue ? this.displayText : this.placeholder), index.h("sd-icon", { key: '3d78221139a6df71aa349277ed0f8d73fbba23ba', name: "chevronDown", 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

@@ -216,13 +216,13 @@ const SdSelectV2 = class {
                 this.closeDropdown();
             },
         };
-        return (index.h("sd-field", { key: '85614fb127c63bec86a17e73ac1942aefbc62ad1', 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: () => {
+        return (index.h("sd-field", { key: '3bce41792a627708e9a947649106fdeaf63bf12f', 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: '4231e75590fec54915d580d7a4f6248232bca365', class: "sd-select-v2", ref: el => {
+            } }, index.h("div", { key: '994150030e4e7d87650de8dc8fd7b44d57c3b62b', class: "sd-select-v2", ref: el => {
                 this.triggerRef = el;
-            } }, index.h("sd-select-v2-trigger", { key: '4e75ec1af0ba09ba8cd63c795e527035114037a9', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (index.h("sd-portal", { key: 'de609975a56d52e542fc46a4d367b74bdcaa7e7b', ...portalProps }, index.h("sd-select-v2-listbox", { key: '7d2fff4a3877701a68e422aa29e4f5a18e1d033c', 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) })))));
+            } }, index.h("sd-select-v2-trigger", { key: 'ff1d052c318bdec6d870bcc707fc33e40bc41f9c', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (index.h("sd-portal", { key: '0a1214c3f2fcc6c34afa2f5168c64edb305048ea', ...portalProps }, index.h("sd-select-v2-listbox", { key: 'c3888dbe740611633a95ef8b58024bdfa558f15b', 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-BJXi4hMP.js → sd-select-v2.config-7xBJQhvx.js}

@@ -56,11 +56,11 @@ var listItemTokens = {
 	listItem: listItem
 };
 
-const paddingBottom = "4";
-const radius = "4";
+const listBox = {
+	radius: "4"};
 var listBoxTokens = {
-	paddingBottom: paddingBottom,
-	radius: radius};
+	listBox: listBox
+};
 
 // ── Select Trigger Tokens ──
 const SELECT_LAYOUT = {
@@ -117,8 +117,7 @@ const LIST_ITEM_COLORS = {
     }};
 // ── ListBox Tokens ──
 const LIST_BOX_LAYOUT = {
-    radius: listBoxTokens.radius,
-    paddingBottom: listBoxTokens.paddingBottom,
+    radius: listBoxTokens.listBox.radius,
 };
 // ── Constants ──
 const SEARCH_THRESHOLD = 11;

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

@@ -770,16 +770,16 @@ const SdTable = class {
         return (index.h("td", { key: `virtual-${position}-spacer-${rowIdx}`, class: "sd-table__virtual-spacer", style: this.getSpacerCellStyle(spacerWidth), "aria-hidden": "true" }, index.h("div", { class: "sd-table__skeleton-cell" })));
     }
     render() {
-        return (index.h(index.Fragment, { key: 'ecdabe282d89b69a6ab0071a54b4543ba0a7bd49' }, index.h("div", { key: 'f8f488a37368f232f8f477b4b256e7ece392ab66', class: "sd-table__wrapper", style: {
+        return (index.h(index.Fragment, { key: 'cc7236bc2511f0b7c6bd31610e005c558e4dda81' }, index.h("div", { key: 'c78feb1d4ba89c8340660405598c8892d660078d', class: "sd-table__wrapper", style: {
                 '--table-width': this.width,
                 '--table-height': this.height,
-            } }, index.h("div", { key: '89f207b532e6fcda6b151a5ccc3c5a5a2c1776f9', class: "sd-table__container", style: {
+            } }, index.h("div", { key: 'e127e5e51cfa1b930a79d031ff4fbffac3cf8b69', class: "sd-table__container", style: {
                 '--table-container-height': `calc(${this.height} - ${this.pagination && this.innerRows.length > 0 ? 48 : 0}px)`,
-            } }, index.h("div", { key: 'd2e2c4551d12bc263f7a3350e3e8a510b4b42510', class: {
+            } }, index.h("div", { key: 'ea47affe622b7f7c98b9c044db73f275a9c7b8ba', class: {
                 'sd-table__middle': true,
                 'sd-table__middle--scrollable': this.paginatedRows.length > 0,
                 'sd-table__middle--loading': this.isLoading,
-            } }, this.isLoading && (index.h("div", { key: '5abd8df69066b285457849070a6ebc427e6fc885', class: "sd-table__middle--loading__spinner" }, index.h("sd-loading-spinner", { key: '4d65723c26e60c6c715d954895318c1352ec89b6' }))), index.h("table", { key: 'b356f098d367132a312c1d6787ab926f49e679bf', part: "table", class: this.sdTableClasses }, this.renderHead(), this.renderBody())), !this.paginatedRows.length && (index.h("div", { key: '623462764a104fad535e744e3a7f85ea9dafcfa1', class: "sd-table__bottom" }, index.h("div", { key: '71bfc932f6a650a75f486ee49f395112fad339a9', class: "sd-table__no-data" }, index.h("slot", { key: '848935ba2e6312574c8bd39fff8bd62b4c0687f8', name: "no-data" }, this.noDataLabel))))), this.pagination && this.innerRows.length > 0 && (index.h("div", { key: '37f6231651b0250a75581fee64edfb15e4d53bc5', class: "sd-table__pagination" }, index.h("sd-pagination", { key: '2c6000fa1fe138242a81707f41d22253d31159c5', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (index.h("sd-select", { key: '9b39f456c1fc8261ae737c964b4be33f15c9329d', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdUpdate: (e) => this.changeRowsPerPage(e.detail.value) })))))));
+            } }, this.isLoading && (index.h("div", { key: '52c9d3a0b83bf786980cb6561b39234d3f1697ad', class: "sd-table__middle--loading__spinner" }, index.h("sd-loading-spinner", { key: '60d8f10a4f35e509969190ab23713057f9fb1efb' }))), index.h("table", { key: 'fd25840b4aeddd456d97c7397541da58c8d0aed9', part: "table", class: this.sdTableClasses }, this.renderHead(), this.renderBody())), !this.paginatedRows.length && (index.h("div", { key: '5d1ed19126eb328a78ff50e701392b0d18208030', class: "sd-table__bottom" }, index.h("div", { key: 'e3cc512088e0bf7f6ec9699c1ce948910d621e45', class: "sd-table__no-data" }, index.h("slot", { key: 'a5285e5d607a66a6e9f7993c6a82dc9bd6d53a08', name: "no-data" }, this.noDataLabel))))), this.pagination && this.innerRows.length > 0 && (index.h("div", { key: '1a57bf7960624ebfd80005cd320d0d29ed7b6123', class: "sd-table__pagination" }, index.h("sd-pagination", { key: 'dbc457c10036556928c3503ef84b8bfc29849342', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (index.h("sd-select", { key: '6a0bdf472ed0dfca4c57725635c50bf1a375f11c', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdUpdate: (e) => this.changeRowsPerPage(e.detail.value) })))))));
     }
     static get watchers() { return {
         "columns": [{

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

@@ -2,7 +2,7 @@
 
 var index = require('./index-BQt-JC6r.js');
 
-const sdTabsCss = () => `sd-tabs{display:inline-block;width:100%;border-bottom:1px solid #0075FF}sd-tabs .sd-tabs{display:flex;flex-direction:row;gap:4px}sd-tabs .sd-tabs__tab{display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;border:1px solid #CCCCCC;border-bottom:none;border-radius:4px 4px 0 0;background-color:#F6F6F6;color:#888888;font-weight:400;transition:all 0.2s ease;position:relative;user-select:none}sd-tabs .sd-tabs__tab::before{content:"";position:absolute;inset:0;opacity:0;transition:all 0.3s}sd-tabs .sd-tabs__tab--selected{border-color:#0075FF;color:#0075FF;background-color:white}sd-tabs .sd-tabs__tab--selected .sd-tabs__label::before{font-weight:700}sd-tabs .sd-tabs__tab--selected:hover::before{background-color:#0075FF;opacity:0.15}sd-tabs .sd-tabs__tab--unselected:hover::before{background-color:#888888;opacity:0.15}sd-tabs .sd-tabs__label{user-select:none;font-weight:700;visibility:hidden;position:relative}sd-tabs .sd-tabs__label::before{content:attr(data-label);visibility:visible;position:absolute;inset:0;font-weight:400;transition:font-weight 0.2s ease}sd-tabs .sd-tabs--md .sd-tabs__tab{padding:12px 32px;font-size:12px;line-height:20px}sd-tabs .sd-tabs--sm .sd-tabs__tab{padding:8px 20px;font-size:12px;line-height:16px}sd-tabs .sd-tabs--sub{gap:32px;border-bottom:none}sd-tabs .sd-tabs--sub .sd-tabs__tab{border:none;border-radius:0;background-color:transparent;color:#222222;font-weight:400;padding:0 0 2px 0;position:relative}sd-tabs .sd-tabs--sub .sd-tabs__tab::before{content:"";position:absolute;top:100%;left:0;right:0;height:1px;width:100%;background-color:#0075FF;opacity:0;transition:opacity 0.2s ease}sd-tabs .sd-tabs--sub .sd-tabs__tab::after{font-weight:400}sd-tabs .sd-tabs--sub .sd-tabs__tab--selected{color:#0075FF;background-color:transparent}sd-tabs .sd-tabs--sub .sd-tabs__tab--selected::before{opacity:1}sd-tabs .sd-tabs--sub .sd-tabs__tab--selected::after{font-weight:700}`;
+const sdTabsCss = () => `sd-tabs{display:inline-block;width:100%}sd-tabs .sd-tabs{display:flex;flex-direction:row;gap:4px;border-bottom:1px solid #0075FF}sd-tabs .sd-tabs__tab{display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;border:1px solid #CCCCCC;border-bottom:none;border-radius:4px 4px 0 0;background-color:#F6F6F6;color:#888888;font-weight:400;transition:all 0.2s ease;position:relative;user-select:none}sd-tabs .sd-tabs__tab::before{content:"";position:absolute;inset:0;opacity:0;transition:all 0.3s}sd-tabs .sd-tabs__tab--selected{border-color:#0075FF;color:#0075FF;background-color:white}sd-tabs .sd-tabs__tab--selected .sd-tabs__label::before{font-weight:700}sd-tabs .sd-tabs__tab--selected:hover::before{background-color:#0075FF;opacity:0.15}sd-tabs .sd-tabs__tab--unselected:hover::before{background-color:#888888;opacity:0.15}sd-tabs .sd-tabs__label{user-select:none;font-weight:700;visibility:hidden;position:relative;white-space:nowrap}sd-tabs .sd-tabs__label::before{content:attr(data-label);visibility:visible;position:absolute;inset:0;font-weight:400;transition:font-weight 0.2s ease}sd-tabs .sd-tabs--md .sd-tabs__tab{padding:12px 32px;font-size:12px;line-height:20px}sd-tabs .sd-tabs--sm .sd-tabs__tab{padding:8px 20px;font-size:12px;line-height:16px}sd-tabs .sd-tabs--sub{gap:32px;border-bottom:none}sd-tabs .sd-tabs--sub .sd-tabs__tab{border:none;border-radius:0;background-color:transparent;color:#222222;font-weight:400;padding:0 0 2px 0;position:relative}sd-tabs .sd-tabs--sub .sd-tabs__tab::before{content:"";position:absolute;top:100%;left:0;right:0;height:1px;width:100%;background-color:#0075FF;opacity:0;transition:opacity 0.2s ease}sd-tabs .sd-tabs--sub .sd-tabs__tab::after{font-weight:400}sd-tabs .sd-tabs--sub .sd-tabs__tab--selected{color:#0075FF;background-color:transparent}sd-tabs .sd-tabs--sub .sd-tabs__tab--selected::before{opacity:1}sd-tabs .sd-tabs--sub .sd-tabs__tab--selected::after{font-weight:700}`;
 
 const SdTabs = class {
     constructor(hostRef) {
@@ -48,7 +48,7 @@ const SdTabs = class {
         return `square_xs_${color}`;
     }
     render() {
-        return (index.h("div", { key: '4d8cefb01677f3788e5d6e729b81a837bd8a99d6', class: this.getContainerClasses() }, this.tabs.map((tab, index$1) => {
+        return (index.h("div", { key: 'df68b0102c4847bce978701991196b94447e82de', 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() })));
         })));