@sellmate/design-system 1.0.59 → 1.0.61

package/dist/collection/components/sd-radio/sd-radio.css

@@ -1,38 +1,53 @@
 sd-radio {
   display: inline-flex;
   width: fit-content;
+  height: var(--sd-radio-line-height);
+  line-height: 0;
 }
 sd-radio .sd-radio {
   cursor: pointer;
-  height: 20px;
   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 label {
-  display: inline-flex;
-  width: fit-content;
-  align-items: center;
-  gap: 8px;
-  cursor: pointer;
+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 label input {
-  display: inline-block;
+sd-radio .sd-radio__circle {
   position: relative;
-  appearance: none;
-  margin: 0;
-  width: 16px;
-  height: 16px;
-  border: 1px solid #888888;
+  width: var(--sd-radio-size);
+  height: var(--sd-radio-size);
   border-radius: 50%;
-  accent-color: #0075FF;
-  background-color: white;
-  cursor: pointer;
+  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 label input:checked {
-  border-color: #0075FF;
-  background-color: white;
+sd-radio .sd-radio--checked .sd-radio__circle {
+  border-color: var(--sd-radio-checked-border);
 }
-sd-radio .sd-radio label input:checked::before {
+sd-radio .sd-radio--checked .sd-radio__circle::after {
   content: "";
   position: absolute;
   top: 50%;
@@ -41,25 +56,15 @@ sd-radio .sd-radio label input:checked::before {
   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;
+  background: var(--sd-radio-checked-dot);
 }
 sd-radio .sd-radio--disabled {
-  cursor: not-allowed !important;
+  cursor: not-allowed;
 }
-sd-radio .sd-radio--disabled label {
-  cursor: not-allowed !important;
+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 label input {
-  cursor: not-allowed !important;
+sd-radio .sd-radio--disabled.sd-radio--checked .sd-radio__circle::after {
+  background: var(--sd-radio-disabled-dot);
 }

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

@@ -1,27 +1,53 @@
 import { h } from "@stencil/core";
+import { RADIO_COLORS, RADIO_LAYOUT, RADIO_TYPOGRAPHY } from "./sd-radio.config";
 export class SdRadio {
     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 (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() }, h("label", { key: `radio-${this.val}` }, 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 && (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 (h("label", { key: '72b116f38c66acee8e68a839c3f062293d65129c', class: this.radioClasses, style: cssVars, "aria-checked": this.isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, 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 }), h("span", { key: '49ce92b075290f8aca715466456f4b7cdf3017e2', class: "sd-radio__circle" }), this.label && h("span", { key: '99d2ce0d53daf5d8ef232f6984ef42e605a68541', class: "sd-radio__label" }, this.label)));
     }
     static get is() { return "sd-radio"; }
     static get originalStyleUrls() {
@@ -61,26 +87,6 @@ export class SdRadio {
                 "reflect": false,
                 "attribute": "value"
             },
-            "disabled": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "disabled",
-                "defaultValue": "false"
-            },
             "val": {
                 "type": "any",
                 "mutable": false,
@@ -106,6 +112,26 @@ export class SdRadio {
                 "reflect": false,
                 "attribute": "val"
             },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
             "label": {
                 "type": "string",
                 "mutable": false,
@@ -151,4 +177,10 @@ export class SdRadio {
                 }
             }];
     }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "valueChanged"
+            }];
+    }
 }

package/dist/collection/components/sd-radio-button-group/sd-radio-button-group.js

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

package/dist/collection/components/sd-radio-group/sd-radio-group.css

@@ -1,38 +1,53 @@
 sd-radio {
   display: inline-flex;
   width: fit-content;
+  height: var(--sd-radio-line-height);
+  line-height: 0;
 }
 sd-radio .sd-radio {
   cursor: pointer;
-  height: 20px;
   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 label {
-  display: inline-flex;
-  width: fit-content;
-  align-items: center;
-  gap: 8px;
-  cursor: pointer;
+sd-radio .sd-radio > input {
+  position: absolute;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  pointer-events: none;
 }
-sd-radio .sd-radio label input {
-  display: inline-block;
+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;
-  appearance: none;
-  margin: 0;
-  width: 16px;
-  height: 16px;
-  border: 1px solid #888888;
+  width: var(--sd-radio-size);
+  height: var(--sd-radio-size);
   border-radius: 50%;
-  accent-color: #0075FF;
-  background-color: white;
-  cursor: pointer;
+  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 label input:checked {
-  border-color: #0075FF;
-  background-color: white;
+sd-radio .sd-radio--checked .sd-radio__circle {
+  border-color: var(--sd-radio-checked-border);
 }
-sd-radio .sd-radio label input:checked::before {
+sd-radio .sd-radio--checked .sd-radio__circle::after {
   content: "";
   position: absolute;
   top: 50%;
@@ -41,27 +56,17 @@ sd-radio .sd-radio label input:checked::before {
   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;
+  background: var(--sd-radio-checked-dot);
 }
 sd-radio .sd-radio--disabled {
-  cursor: not-allowed !important;
+  cursor: not-allowed;
 }
-sd-radio .sd-radio--disabled label {
-  cursor: not-allowed !important;
+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 label input {
-  cursor: not-allowed !important;
+sd-radio .sd-radio--disabled.sd-radio--checked .sd-radio__circle::after {
+  background: var(--sd-radio-disabled-dot);
 }
 
 sd-radio-group {

package/dist/collection/components/sd-radio-group/sd-radio-group.js

@@ -22,7 +22,7 @@ export class SdRadioGroup {
         return classes.join(' ');
     }
     render() {
-        return (h("div", { key: '82979426bafc24b48858588ad186dfe069616883', class: this.getGroupClasses(), role: "radiogroup" }, this.options.map(option => {
+        return (h("div", { key: '4c34a3ab6790818e17c8452fa3233e7c720b8246', class: this.getGroupClasses(), role: "radiogroup" }, this.options.map(option => {
             return (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/collection/components/sd-select/sd-select-dropdown/sd-select-dropdown.js

@@ -144,10 +144,10 @@ export class SdSelectDropdown {
         this.isScrolled = scrollTop > 0;
     };
     render() {
-        return (h("div", { key: '47a99b4faac3adb110a548860ef094ba3bd4630a', class: {
+        return (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 && (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) => (h("slot", { name: `option-${option.value}` }, h("sd-select-option", { option: option, index: index, isSelected: this.isOptionSelected(option.value), isFocused: index === this.itemIndex, onOptionClick: ({ detail }) => this.optionClick.emit(detail), useCheckbox: this.useCheckbox }))))) : (h("slot", { name: "option-placeholder" }, h("div", { class: 'sd-select-option-placeholder' }, this.optionPlaceholder)))));
+            }, style: this.dropdownSize, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (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) => (h("slot", { name: `option-${option.value}` }, h("sd-select-option", { option: option, index: index, isSelected: this.isOptionSelected(option.value), isFocused: index === this.itemIndex, onOptionClick: ({ detail }) => this.optionClick.emit(detail), useCheckbox: this.useCheckbox }))))) : (h("slot", { name: "option-placeholder" }, h("div", { class: 'sd-select-option-placeholder' }, this.optionPlaceholder)))));
     }
     static get is() { return "sd-select-dropdown"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-select/sd-select-option/sd-select-option.js

@@ -24,7 +24,7 @@ export class SdSelectOption {
         }
     };
     render() {
-        return (h("div", { key: 'b9844296973b6e85d3c3e3652671e89f470ec7a9', class: {
+        return (h("div", { key: '1e4afa2db7fcf6e8baddd533763536973d32c51d', class: {
                 'sd-select__option': true,
                 'sd-select__option--selected': this.isSelected,
                 'sd-select__option--disabled': !!this.option.disabled,

package/dist/collection/components/sd-select/sd-select-search-input/sd-select-search-input.js

@@ -16,17 +16,17 @@ export class SdSelectSearchInput {
         input?.focus({ preventScroll: true });
     }
     render() {
-        return (h("div", { key: '2d211645dc4041411e187f248a260a23b7c544f6', class: {
+        return (h("div", { key: '356f1b606a50d6a247793aebd1609f509a08784e', class: {
                 'sd-select-search-input': true,
                 'sd-select-search-input--scrolled': !!this.isScrolled,
-            }, onClick: event => event.stopPropagation() }, h("sd-input", { key: 'c609af0ab36359c8ccaea5827821dbc509d13eac', ref: el => (this.searchRef = el), value: this.searchText, placeholder: "\uAC80\uC0C9", clearable: true, inputStyle: { 'padding-left': '8px' }, autofocus: true, onSdUpdate: event => {
+            }, onClick: event => event.stopPropagation() }, h("sd-input", { key: '99162b5eeb831b771666246ecbd223c0a1b93d9c', ref: el => (this.searchRef = el), value: this.searchText, placeholder: "\uAC80\uC0C9", clearable: true, inputStyle: { 'padding-left': '8px' }, autofocus: true, onSdUpdate: event => {
                 this.searchInput.emit(String(event?.detail));
             }, onSdFocus: () => {
                 this.searchFocus.emit();
             }, onKeyDown: event => {
                 if (event.code === 'Enter')
                     event.stopPropagation();
-            } }, h("sd-icon", { key: '96a511b1f8625c883ec50d5e2985ff396d7b57c7', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
+            } }, h("sd-icon", { key: 'e8929cfab6ab5a483531c939de1b4c0c11f1b145', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
     }
     static get is() { return "sd-select-search-input"; }
     static get originalStyleUrls() {

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

@@ -141,7 +141,7 @@ export class SdSelect extends BaseDropdownEvent {
         }
     };
     render() {
-        return (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) }, h("div", { key: '460a8a23247e24a02bd25470105598914029e205', class: {
+        return (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) }, h("div", { key: '148f21e1a19cf4f4b9e61b4192d631d85dbc57a4', class: {
                 'sd-select': true,
                 'sd-select--disabled': this.disabled,
                 'sd-select--error': !!this.error,

package/dist/collection/components/sd-select-group/sd-select-group.js

@@ -270,7 +270,7 @@ export class SdSelectGroup extends BaseDropdownEvent {
         });
     }
     render() {
-        return (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' } }, h("div", { key: '55c8f062080befa65986e29d3b7835146150302a', class: {
+        return (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' } }, h("div", { key: 'b6db700cb68d1eaa1a99f959d3fd78c0e2088c3d', class: {
                 'sd-select-group': true,
                 'sd-select-group--open': this.isOpen,
                 'sd-select-group--disabled': this.disabled,

package/dist/collection/components/sd-select-multiple/sd-select-multiple.js

@@ -150,7 +150,7 @@ export class SdSelectMultiple extends BaseDropdownEvent {
         this.handleOptionSelection(option);
     };
     render() {
-        return (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) }, h("div", { key: 'd0e5ac84ad2aeb947b02b5a2cd4fbb66bf6e9419', class: {
+        return (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) }, h("div", { key: '192dd606eaa8a7642dfaf28f342701694cbbc237', class: {
                 'sd-select-multiple': true,
                 'sd-select-multiple--open': this.isOpen,
                 'sd-select-multiple--disabled': this.disabled,

package/dist/collection/components/sd-select-multiple-group/sd-select-multiple-group.js

@@ -392,7 +392,7 @@ export class SdSelectMultipleGroup extends BaseDropdownEvent {
         });
     }
     render() {
-        return (h("sd-field", { key: '350c7b2df807166a1439a2151f0f168385adac4a', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, h("div", { key: 'cce989263e1c7dcb38216e734aabe6eea643676a', class: {
+        return (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' } }, 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/collection/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.js

@@ -39,7 +39,7 @@ export class SdSelectOptionGroup {
         }
     };
     render() {
-        return (h("div", { key: '9742c10ec20db29db941ac58666eb662b7b4275e', class: {
+        return (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,
@@ -48,10 +48,10 @@ export class SdSelectOptionGroup {
                 'sd-select__option-group--group': this.option.type === 'group',
                 'sd-select__option-group--subgroup': this.option.type === 'subgroup',
                 'sd-select__option-group--item': this.option.type === 'item',
-            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, h("div", { key: 'e09a53d6c7e9897266a6b7b2ba2725afd2d45f67', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (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) }, h("div", { key: 'c856a933ddfa7084741cbb65d2075f3b59404ae7', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (h("sd-checkbox", { key: '455dde9674811174fb4b939ca37b5128085cd65d', value: this.isSelected, disabled: this.option.disabled, onClick: e => {
                 e.preventDefault();
                 this.handleClick(this.option, this.isSelected, e);
-            } })), h("span", { key: '5bd439162ed1ac623a8bec83e31c924294c61b75', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (h("span", { key: '39a6367f373ffd7403eb37a40e119e1534e79d22', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
+            } })), h("span", { key: '0255e9f2da18d3da01843ec61c9bc75150efcc4a', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (h("span", { key: '73c0a138d3e38f4fc8c8e94230aea82c89a7cb84', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
     }
     static get is() { return "sd-select-option-group"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-select-v2/sd-select-v2-list-item/sd-select-v2-list-item.js

@@ -64,7 +64,7 @@ export class SdSelectV2ListItem {
         if (isDepth1Group) {
             cssVars['--list-item-border-top'] = `${LIST_ITEM_COLORS.depth1.borderWidth}px solid ${LIST_ITEM_COLORS.depth1.border}`;
         }
-        return (h("div", { key: 'a7d424f1b7025cd41273a0264cdc1f973ff13061', class: {
+        return (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,
@@ -74,7 +74,7 @@ export class SdSelectV2ListItem {
                 'sd-select-v2-list-item--focused': this.isFocused,
                 'sd-select-v2-list-item--selectable': this.isSelectable && !this.option.disabled,
                 'sd-select-v2-list-item--disabled': !!this.option.disabled,
-            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (h("sd-checkbox", { key: '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 })), h("span", { key: '6f0df85e664b797547d2f24038f5112767b3fa67', class: "sd-select-v2-list-item__label" }, this.option.label), this.countInfo && (h("span", { key: '04e862cc16406c1fd3e27e716c33f54d72f7d80d', class: "sd-select-v2-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
+            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (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 })), h("span", { key: '1dc78dcbffc3f3826fac7a9a3b8aa300c3754de6', class: "sd-select-v2-list-item__label" }, this.option.label), this.countInfo && (h("span", { key: '5b96136bc54b241359e60849ebd1e792eb749c0d', class: "sd-select-v2-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
     }
     static get is() { return "sd-select-v2-list-item"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-select-v2/sd-select-v2-list-item-search/sd-select-v2-list-item-search.js

@@ -41,12 +41,12 @@ export class SdSelectV2ListItemSearch {
             clearTimeout(this.debounceTimer);
     }
     render() {
-        return (h("div", { key: '87f0a8fc24fe4b80cd29f63ca4f269b242a35f56', class: {
+        return (h("div", { key: '8ccebea10b658edba2c417893f2a939a7361ef1b', class: {
                 'sd-select-v2-list-item-search': true,
                 'sd-select-v2-list-item-search--scrolled': this.isScrolled,
-            } }, h("div", { key: '980ad86deb07ae25373c8802caa46febbdc1d8f6', class: "sd-select-v2-list-item-search__inner" }, h("sd-icon", { key: '9e9fc2104743c1ec7790cffffb955135908b36e7', name: "search", size: 16, color: "grey_70", class: "sd-select-v2-list-item-search__icon" }), h("input", { key: '601668bfaffcba5285375e845d0b2ef59238f1a8', ref: el => {
+            } }, h("div", { key: '4007afb556220e746c2379f643afb38445345853', class: "sd-select-v2-list-item-search__inner" }, h("sd-icon", { key: '1afc1ef8aa6f3d26ee1001212ac9ea7d0bf3d1e4', name: "search", size: 16, color: "grey_70", class: "sd-select-v2-list-item-search__icon" }), 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 && (h("button", { key: '56973c7d365f9734b2135aa406651edd372f9789', type: "button", class: "sd-select-v2-list-item-search__clear", onClick: this.handleClear }, 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 && (h("button", { key: '150d5aca71d6ac6277917177ed4e4e157e4ba33f', type: "button", class: "sd-select-v2-list-item-search__clear", onClick: this.handleClear }, h("sd-icon", { key: 'f0397c023e5dd5972eb6dfd20f9fb1ac1027fb2f', name: "close", size: 12, color: "#888888" }))))));
     }
     static get is() { return "sd-select-v2-list-item-search"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-select-v2/sd-select-v2-listbox/sd-select-v2-listbox.css

@@ -18,7 +18,7 @@ sd-select-v2-listbox .sd-select-v2-listbox__list {
   flex: 1;
   min-height: 0;
   overflow-y: auto;
-  padding-bottom: var(--listbox-padding-bottom);
+  padding-bottom: 0;
 }
 sd-select-v2-listbox .sd-select-v2-listbox__empty {
   padding: 12px;

package/dist/collection/components/sd-select-v2/sd-select-v2-listbox/sd-select-v2-listbox.js

@@ -281,9 +281,8 @@ export class SdSelectV2Listbox {
             '--listbox-max-width': this.maxWidth,
             '--listbox-max-height': this.maxHeight,
             '--listbox-radius': `${LIST_BOX_LAYOUT.radius}px`,
-            '--listbox-padding-bottom': `${LIST_BOX_LAYOUT.paddingBottom}px`,
         };
-        return (h("div", { key: 'c04974ad387df3d23efbf27afdb6cc92f24a744e', class: "sd-select-v2-listbox", style: cssVars }, this.showSearch && (h("sd-select-v2-list-item-search", { key: 'b8ef69dc0a35cc2110665095feea58d4132a6bad', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), h("div", { key: 'd8a2f04f1dbbd8fde39203ac52a1bd220097495d', class: "sd-select-v2-listbox__list", onScroll: this.handleScroll, ref: el => {
+        return (h("div", { key: '92289973077789bd6f9657bb5b2e5567845bdc19', class: "sd-select-v2-listbox", style: cssVars }, this.showSearch && (h("sd-select-v2-list-item-search", { key: 'a26b9ba36f42165ab80347ea4f0194b98746a9a6', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), h("div", { key: 'd563a179278ec5c6eaa0b4c71d18cc5055bbebb5', class: "sd-select-v2-listbox__list", onScroll: this.handleScroll, ref: el => {
                 this.listEl = el;
             } }, this.isEmpty ? (h("div", { class: "sd-select-v2-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (h("sd-select-v2-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) })))))));
     }

package/dist/collection/components/sd-select-v2/sd-select-v2-trigger/sd-select-v2-trigger.js

@@ -28,11 +28,11 @@ export class SdSelectV2Trigger {
                 ? SELECT_COLORS.icon.disabled
                 : SELECT_COLORS.icon.default,
         };
-        return (h("div", { key: '9bbda5c8b8b359f6df1079f9f5b1b170472ba7d3', class: {
+        return (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 }, h("div", { key: 'b129a7bcbdae8b6873f0b9f97cf37f69829de36a', class: "sd-select-v2-trigger__content" }, h("span", { key: 'fff9c48504e54ea4bedd1494c3d321197f9b0e8d', class: "sd-select-v2-trigger__text" }, hasValue ? this.displayText : this.placeholder), h("sd-icon", { key: 'd3e88a0de9fc773a3f5e3c173159ba2feff1ba67', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
+            }, style: cssVars, onClick: this.handleClick }, h("div", { key: 'e08360c05f765ccc0c9dbefe8e402a66edd1c242', class: "sd-select-v2-trigger__content" }, h("span", { key: 'dc00441e24e17b9bb28a36892ff3564d4bb40a42', class: "sd-select-v2-trigger__text" }, hasValue ? this.displayText : this.placeholder), 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/collection/components/sd-select-v2/sd-select-v2.config.js

@@ -75,8 +75,7 @@ export const LIST_ITEM_COLORS = {
 };
 // ── ListBox Tokens ──
 export const LIST_BOX_LAYOUT = {
-    radius: listBoxTokens.radius,
-    paddingBottom: listBoxTokens.paddingBottom,
+    radius: listBoxTokens.listBox.radius,
 };
 // ── Constants ──
 export const SEARCH_THRESHOLD = 11;

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

@@ -206,13 +206,13 @@ export class SdSelectV2 {
                 this.closeDropdown();
             },
         };
-        return (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 (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;
-            } }, h("div", { key: '4231e75590fec54915d580d7a4f6248232bca365', class: "sd-select-v2", ref: el => {
+            } }, h("div", { key: '994150030e4e7d87650de8dc8fd7b44d57c3b62b', class: "sd-select-v2", ref: el => {
                 this.triggerRef = el;
-            } }, 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) && (h("sd-portal", { key: 'de609975a56d52e542fc46a4d367b74bdcaa7e7b', ...portalProps }, 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) })))));
+            } }, 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) && (h("sd-portal", { key: '0a1214c3f2fcc6c34afa2f5168c64edb305048ea', ...portalProps }, 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 is() { return "sd-select-v2"; }
     static get originalStyleUrls() {

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

@@ -759,16 +759,16 @@ export class SdTable {
         return (h("td", { key: `virtual-${position}-spacer-${rowIdx}`, class: "sd-table__virtual-spacer", style: this.getSpacerCellStyle(spacerWidth), "aria-hidden": "true" }, h("div", { class: "sd-table__skeleton-cell" })));
     }
     render() {
-        return (h(Fragment, { key: 'f3e4930d36d080fd546dddc1e80190b831e93012' }, h("div", { key: 'ad2f798951631319190d93f83e25b87f871e58de', class: "sd-table__wrapper", style: {
+        return (h(Fragment, { key: 'cc7236bc2511f0b7c6bd31610e005c558e4dda81' }, h("div", { key: 'c78feb1d4ba89c8340660405598c8892d660078d', class: "sd-table__wrapper", style: {
                 '--table-width': this.width,
                 '--table-height': this.height,
-            } }, h("div", { key: 'c4b6d4080f1416d1c88ab1413c66848bdafe9019', class: "sd-table__container", style: {
+            } }, h("div", { key: 'e127e5e51cfa1b930a79d031ff4fbffac3cf8b69', class: "sd-table__container", style: {
                 '--table-container-height': `calc(${this.height} - ${this.pagination && this.innerRows.length > 0 ? 48 : 0}px)`,
-            } }, h("div", { key: '3aacc27970b0c6d8b700063c0af7c57175e2cb22', class: {
+            } }, 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 && (h("div", { key: '25fca304a4e8ebf43aeeff20de3e3446d25e1ffb', class: "sd-table__middle--loading__spinner" }, h("sd-loading-spinner", { key: '48b0adad60cf422b884557b53097c28a4f0b8879' }))), h("table", { key: 'ec4328a1f43c865de642cc5814fbdef6a374b7e3', part: "table", class: this.sdTableClasses }, this.renderHead(), this.renderBody())), !this.paginatedRows.length && (h("div", { key: 'ba362ecb9fb8134a15ff3d0a3b8e6a523e94166a', class: "sd-table__bottom" }, h("div", { key: 'ca5c2e0b19a1e301ac159588436ef24eecfb6365', class: "sd-table__no-data" }, h("slot", { key: '68564a60a05833ba87743212d7189eef6e179fb4', name: "no-data" }, this.noDataLabel))))), this.pagination && this.innerRows.length > 0 && (h("div", { key: '88c3c7362234c20a60f6437ecd79d4c75b2caa6e', class: "sd-table__pagination" }, h("sd-pagination", { key: 'c3c8c435fcb752f2b1139981bb764cf4dfb153ab', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (h("sd-select", { key: '03801039397a31321e5af96c2bd2d2900151240e', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdUpdate: (e) => this.changeRowsPerPage(e.detail.value) })))))));
+            } }, this.isLoading && (h("div", { key: '52c9d3a0b83bf786980cb6561b39234d3f1697ad', class: "sd-table__middle--loading__spinner" }, h("sd-loading-spinner", { key: '60d8f10a4f35e509969190ab23713057f9fb1efb' }))), h("table", { key: 'fd25840b4aeddd456d97c7397541da58c8d0aed9', part: "table", class: this.sdTableClasses }, this.renderHead(), this.renderBody())), !this.paginatedRows.length && (h("div", { key: '5d1ed19126eb328a78ff50e701392b0d18208030', class: "sd-table__bottom" }, h("div", { key: 'e3cc512088e0bf7f6ec9699c1ce948910d621e45', class: "sd-table__no-data" }, h("slot", { key: 'a5285e5d607a66a6e9f7993c6a82dc9bd6d53a08', name: "no-data" }, this.noDataLabel))))), this.pagination && this.innerRows.length > 0 && (h("div", { key: '1a57bf7960624ebfd80005cd320d0d29ed7b6123', class: "sd-table__pagination" }, 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 && (h("sd-select", { key: '6a0bdf472ed0dfca4c57725635c50bf1a375f11c', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdUpdate: (e) => this.changeRowsPerPage(e.detail.value) })))))));
     }
     static get is() { return "sd-table"; }
     static get originalStyleUrls() {