@sellmate/design-system 1.0.62 → 1.0.64

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

@@ -1,8 +1,9 @@
 import { h } from "@stencil/core";
-export class SdRadioButtonGroup {
+import { RADIO_BUTTON_COLORS, RADIO_BUTTON_LAYOUT, RADIO_BUTTON_SIZES, } from "./sd-radio-button.config";
+export class SdRadioButton {
     value;
     options = [];
-    size = 'md';
+    size = 'sm';
     disabled = false;
     name;
     change;
@@ -20,37 +21,67 @@ export class SdRadioButtonGroup {
     }
     getButtonClasses(option) {
         const classes = [
-            'sd-radio-button-group__option',
+            'sd-radio-button__option',
             this.isOptionSelected(option)
-                ? 'sd-radio-button-group__option--selected'
-                : 'sd-radio-button-group__option--unselected',
+                ? 'sd-radio-button__option--selected'
+                : 'sd-radio-button__option--unselected',
         ];
         if (this.isOptionDisabled(option)) {
-            classes.push('sd-radio-button-group__option--disabled');
+            classes.push('sd-radio-button__option--disabled');
         }
         return classes.join(' ');
     }
     getGroupClasses() {
-        const classes = ['sd-radio-button-group', `sd-radio-button-group--${this.size}`];
+        const classes = ['sd-radio-button', `sd-radio-button--${this.size}`];
         return classes.join(' ');
     }
-    groupName = this.name || `sd-radio-button-group-${crypto.randomUUID()}`;
+    _groupName;
+    get groupName() {
+        if (!this._groupName) {
+            this._groupName = this.name || `sd-radio-button-${crypto.randomUUID()}`;
+        }
+        return this._groupName;
+    }
     render() {
-        return (h("div", { key: '14c605d7b034dd83a33cdf34f58bf77201dfc74f', class: this.getGroupClasses(), role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.options.map(option => {
+        const sizeTokens = RADIO_BUTTON_SIZES[this.size];
+        const cssVars = {
+            '--sd-radio-button-height': `${sizeTokens.height}px`,
+            '--sd-radio-button-padding-x': `${sizeTokens.paddingX}px`,
+            '--sd-radio-button-font-family': sizeTokens.fontFamily,
+            '--sd-radio-button-font-weight': sizeTokens.fontWeight,
+            '--sd-radio-button-font-size': `${sizeTokens.fontSize}px`,
+            '--sd-radio-button-line-height': `${sizeTokens.lineHeight}px`,
+            '--sd-radio-button-text-decoration': sizeTokens.textDecoration,
+            '--sd-radio-button-radius': `${RADIO_BUTTON_LAYOUT.radius}px`,
+            '--sd-radio-button-border-width': `${RADIO_BUTTON_LAYOUT.borderWidth}px`,
+            '--sd-radio-button-group-gap': `${RADIO_BUTTON_LAYOUT.groupGap}px`,
+            '--sd-radio-button-border-default': RADIO_BUTTON_COLORS.border.default,
+            '--sd-radio-button-border-select': RADIO_BUTTON_COLORS.border.select,
+            '--sd-radio-button-border-disabled': RADIO_BUTTON_COLORS.border.disabled,
+            '--sd-radio-button-bg-default': RADIO_BUTTON_COLORS.bg.default,
+            '--sd-radio-button-bg-hover': RADIO_BUTTON_COLORS.bg.hover,
+            '--sd-radio-button-bg-select': RADIO_BUTTON_COLORS.bg.select,
+            '--sd-radio-button-bg-disabled': RADIO_BUTTON_COLORS.bg.disabled,
+            '--sd-radio-button-content-default': RADIO_BUTTON_COLORS.content.default,
+            '--sd-radio-button-content-hover': RADIO_BUTTON_COLORS.content.hover,
+            '--sd-radio-button-content-select': RADIO_BUTTON_COLORS.content.select,
+            '--sd-radio-button-content-disabled': RADIO_BUTTON_COLORS.content.disabled,
+        };
+        return (h("div", { key: '05bda776e2747aca3d7fca0286e3fa4062d7669b', class: this.getGroupClasses(), style: cssVars, 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)));
+            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__label" }, option.label)));
         })));
     }
-    static get is() { return "sd-radio-button-group"; }
+    static get is() { return "sd-radio-button"; }
     static get originalStyleUrls() {
         return {
-            "$": ["sd-radio-button-group.scss"]
+            "$": ["sd-radio-button.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["sd-radio-button-group.css"]
+            "$": ["sd-radio-button.css"]
         };
     }
     static get properties() {
@@ -90,8 +121,8 @@ export class SdRadioButtonGroup {
                     "references": {
                         "RadioOption": {
                             "location": "local",
-                            "path": "/Users/meijing/Documents/sellmate/frontend/design-system/packages/stencil/src/components/sd-radio-button-group/sd-radio-button-group.tsx",
-                            "id": "src/components/sd-radio-button-group/sd-radio-button-group.tsx::RadioOption"
+                            "path": "/Users/meijing/Documents/sellmate/frontend/design-system/packages/stencil/src/components/sd-radio-button/sd-radio-button.tsx",
+                            "id": "src/components/sd-radio-button/sd-radio-button.tsx::RadioOption"
                         }
                     }
                 },
@@ -109,8 +140,8 @@ export class SdRadioButtonGroup {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'sm' | 'md'",
-                    "resolved": "\"md\" | \"sm\"",
+                    "original": "'xs' | 'sm'",
+                    "resolved": "\"sm\" | \"xs\"",
                     "references": {}
                 },
                 "required": false,
@@ -123,7 +154,7 @@ export class SdRadioButtonGroup {
                 "setter": false,
                 "reflect": false,
                 "attribute": "size",
-                "defaultValue": "'md'"
+                "defaultValue": "'sm'"
             },
             "disabled": {
                 "type": "boolean",

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: 'c2e248441cf6825fae9649ab3c3d01ab171ccb85', class: {
+        return (h("div", { key: 'fdfad8ab2f1f6a26da8ad0ca0dcd17bfed7dcf9d', 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: '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)))));
+            }, style: this.dropdownSize, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (h("sd-select-search-input", { key: '74cfba89d85a980c6c8074150bdba91387b9c115', 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: '1e4afa2db7fcf6e8baddd533763536973d32c51d', class: {
+        return (h("div", { key: '1366665f3ca8c37b23e6b6e9cfc5293c48ed5ed3', 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: '356f1b606a50d6a247793aebd1609f509a08784e', class: {
+        return (h("div", { key: '36003b7e0e7d8a3df224b18257d4d6b1712d47da', class: {
                 'sd-select-search-input': true,
                 'sd-select-search-input--scrolled': !!this.isScrolled,
-            }, 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 => {
+            }, onClick: event => event.stopPropagation() }, h("sd-input", { key: '3b6f80d033a7903cb8e3692a2eebe0ab991e8d68', 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: 'e8929cfab6ab5a483531c939de1b4c0c11f1b145', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
+            } }, h("sd-icon", { key: '7c453e87ba6b384c5be7bb142697ba43c0d1a20b', 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.css

@@ -17,6 +17,10 @@ sd-select .sd-select .sd-select__trigger {
   width: 100%;
   height: 100%;
   align-items: center;
+  cursor: pointer;
+}
+.sd-field--disabled sd-select .sd-select .sd-select__trigger {
+  cursor: not-allowed;
 }
 sd-select .sd-select .sd-select__trigger .sd-select__value {
   flex: 1;

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

@@ -23,6 +23,7 @@ export class SdSelect extends BaseDropdownEvent {
     searchable = false;
     // props - label
     label = '';
+    labelWidth = '';
     addonLabel = '';
     icon = undefined;
     labelTooltip = '';
@@ -141,7 +142,7 @@ export class SdSelect extends BaseDropdownEvent {
         }
     };
     render() {
-        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: {
+        return (h("sd-field", { key: 'd96961fe4c425c3f0fcb1c2f438c8b70c510b632', label: this.label, labelWidth: this.labelWidth, 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: '0113ffb76ea79cbe3b77dff85d8186a5b994e7b6', class: {
                 'sd-select': true,
                 'sd-select--disabled': this.disabled,
                 'sd-select--error': !!this.error,
@@ -400,6 +401,26 @@ export class SdSelect extends BaseDropdownEvent {
                 "attribute": "label",
                 "defaultValue": "''"
             },
+            "labelWidth": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-width",
+                "defaultValue": "''"
+            },
             "addonLabel": {
                 "type": "string",
                 "mutable": false,

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

@@ -27,6 +27,10 @@ sd-select-group .sd-select-group .sd-select-group__trigger {
   width: 100%;
   height: 100%;
   align-items: center;
+  cursor: pointer;
+}
+.sd-field--disabled sd-select-group .sd-select-group .sd-select-group__trigger {
+  cursor: not-allowed;
 }
 sd-select-group .sd-select-group .sd-select-group__trigger .sd-select-group__value {
   flex: 1;

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

@@ -23,6 +23,7 @@ export class SdSelectGroup extends BaseDropdownEvent {
     searchable = false;
     // props - label
     label = '';
+    labelWidth = '';
     addonLabel = '';
     icon = undefined;
     labelTooltip = '';
@@ -270,7 +271,7 @@ export class SdSelectGroup extends BaseDropdownEvent {
         });
     }
     render() {
-        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: {
+        return (h("sd-field", { key: '1e6a0f9947f5d137bb65844fe666c07b4eefb2f7', label: this.label, labelWidth: this.labelWidth, 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: '62dcd2f37c2eda0e51f2e77de36ece6ab592c4ce', class: {
                 'sd-select-group': true,
                 'sd-select-group--open': this.isOpen,
                 'sd-select-group--disabled': this.disabled,
@@ -543,6 +544,26 @@ export class SdSelectGroup extends BaseDropdownEvent {
                 "attribute": "label",
                 "defaultValue": "''"
             },
+            "labelWidth": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-width",
+                "defaultValue": "''"
+            },
             "addonLabel": {
                 "type": "string",
                 "mutable": false,

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

@@ -16,6 +16,10 @@ sd-select-multiple .sd-select-multiple .sd-select-multiple__trigger {
   display: flex;
   width: 100%;
   align-items: center;
+  cursor: pointer;
+}
+.sd-field--disabled sd-select-multiple .sd-select-multiple .sd-select-multiple__trigger {
+  cursor: not-allowed;
 }
 sd-select-multiple .sd-select-multiple .sd-select-multiple__trigger .sd-select-multiple__value {
   flex: 1;

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

@@ -26,6 +26,7 @@ export class SdSelectMultiple extends BaseDropdownEvent {
     useCheckbox = false;
     // props - label
     label = '';
+    labelWidth = '';
     icon = undefined;
     labelTooltip = '';
     labelTooltipProps = null;
@@ -150,7 +151,7 @@ export class SdSelectMultiple extends BaseDropdownEvent {
         this.handleOptionSelection(option);
     };
     render() {
-        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: {
+        return (h("sd-field", { key: 'f5dda40563661955aa194d841ca89628afd496cb', label: this.label, labelWidth: this.labelWidth, 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: '81541d9adabfea7c3af1c22ed419036f56e1a353', class: {
                 'sd-select-multiple': true,
                 'sd-select-multiple--open': this.isOpen,
                 'sd-select-multiple--disabled': this.disabled,
@@ -457,6 +458,26 @@ export class SdSelectMultiple extends BaseDropdownEvent {
                 "attribute": "label",
                 "defaultValue": "''"
             },
+            "labelWidth": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-width",
+                "defaultValue": "''"
+            },
             "icon": {
                 "type": "unknown",
                 "mutable": false,

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

@@ -26,6 +26,10 @@ sd-select-multiple-group .sd-select-multiple-group .sd-select-multiple-group__tr
   display: flex;
   width: 100%;
   align-items: center;
+  cursor: pointer;
+}
+.sd-field--disabled sd-select-multiple-group .sd-select-multiple-group .sd-select-multiple-group__trigger {
+  cursor: not-allowed;
 }
 sd-select-multiple-group .sd-select-multiple-group .sd-select-multiple-group__trigger .sd-select-multiple-group__value {
   flex: 1;

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

@@ -26,6 +26,7 @@ export class SdSelectMultipleGroup extends BaseDropdownEvent {
     allCheckOptionLabel = '전체';
     // props - label
     label = '';
+    labelWidth = '';
     icon = undefined;
     labelTooltip = '';
     labelTooltipProps = null;
@@ -392,7 +393,7 @@ export class SdSelectMultipleGroup extends BaseDropdownEvent {
         });
     }
     render() {
-        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: {
+        return (h("sd-field", { key: 'e7d00571a19a83e8d243d0c4f7433d931d4a2304', label: this.label, labelWidth: this.labelWidth, 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: '8c7288d853fed5bb829f1ef90af5e96a512c11b3', class: {
                 'sd-select-multiple-group': true,
                 'sd-select-multiple-group--open': this.isOpen,
                 'sd-select-multiple-group--disabled': this.disabled,
@@ -730,6 +731,26 @@ export class SdSelectMultipleGroup extends BaseDropdownEvent {
                 "attribute": "label",
                 "defaultValue": "''"
             },
+            "labelWidth": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-width",
+                "defaultValue": "''"
+            },
             "icon": {
                 "type": "unknown",
                 "mutable": false,

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: 'd39aa4744aa498f8b2f7c77502f2c4f56e670296', class: {
+        return (h("div", { key: 'c1dd7d0232fff281261792ecb2137a1f09bc364d', 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: 'c856a933ddfa7084741cbb65d2075f3b59404ae7', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (h("sd-checkbox", { key: '455dde9674811174fb4b939ca37b5128085cd65d', 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: 'a8ce6f2c13ea558413e61426dfbaa75e616f5687', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (h("sd-checkbox", { key: '3c53ea6005aa1288a4eae148bd9d6ed4573f0404', value: this.isSelected, disabled: this.option.disabled, onClick: e => {
                 e.preventDefault();
                 this.handleClick(this.option, this.isSelected, e);
-            } })), 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})`)))));
+            } })), h("span", { key: 'c28aea2bf78120a42d6884c322cc2cf77713a6cb', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (h("span", { key: '6a51641a8c9da9957f1428a721de9ce2a1a2a86b', 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: '8cd297b8d4ff1a7ef5c64bcaefef9cc54b3de357', class: {
+        return (h("div", { key: '2c6431785cccc79e4ce7eb0252877f18e799bb03', 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: '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, ")"))));
+            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (h("sd-checkbox", { key: '88751dff8393de63ff2762bf6a52f685b478cbe2', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, inverse: this.isFocused && this.isSelected !== false, class: "sd-select-v2-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), h("span", { key: '09d711dbd6181ac2da194813cd8d298061428c8e', class: "sd-select-v2-list-item__label" }, this.option.label), this.countInfo && (h("span", { key: '8d0e113be506cfefa1994ee8a43efa7b6f09c707', 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.css

@@ -52,4 +52,8 @@ sd-select-v2-list-item-search .sd-select-v2-list-item-search__clear {
 }
 sd-select-v2-list-item-search .sd-select-v2-list-item-search__clear:hover {
   background: #F0F0F0;
+}
+sd-select-v2-list-item-search .sd-select-v2-list-item-search__clear--hidden {
+  visibility: hidden;
+  pointer-events: none;
 }

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

@@ -41,12 +41,15 @@ export class SdSelectV2ListItemSearch {
             clearTimeout(this.debounceTimer);
     }
     render() {
-        return (h("div", { key: '8ccebea10b658edba2c417893f2a939a7361ef1b', class: {
+        return (h("div", { key: '10f081acd51cad3b6632b2afcd5017c02fe2ed57', class: {
                 'sd-select-v2-list-item-search': true,
                 'sd-select-v2-list-item-search--scrolled': this.isScrolled,
-            } }, 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 => {
+            } }, h("div", { key: '585f29e2826841874e88ce01fa08306cffb39033', class: "sd-select-v2-list-item-search__inner" }, h("sd-icon", { key: 'fe3d85e03b2e7302102babd3736e7aea0b08fcee', name: "search", size: 16, color: "grey_70", class: "sd-select-v2-list-item-search__icon" }), h("input", { key: '62913d0721cf6171bc7dc52fb6548410fa87527e', 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: '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" }))))));
+            }, 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() }), h("button", { key: '986ea74f6b02e65f138665f2afd19fa10f7f430a', type: "button", class: {
+                'sd-select-v2-list-item-search__clear': true,
+                'sd-select-v2-list-item-search__clear--hidden': !this.searchText,
+            }, onClick: this.handleClear, tabindex: this.searchText ? 0 : -1, "aria-hidden": this.searchText ? 'false' : 'true' }, h("sd-icon", { key: '344bbbb25eab6a6a3f4cce5cde8d9a10e9b13f25', 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

@@ -4,10 +4,9 @@ sd-select-v2-listbox {
 sd-select-v2-listbox .sd-select-v2-listbox {
   display: flex;
   flex-direction: column;
-  min-width: var(--listbox-trigger-width);
+  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);
@@ -18,7 +17,7 @@ sd-select-v2-listbox .sd-select-v2-listbox__list {
   flex: 1;
   min-height: 0;
   overflow-y: auto;
-  padding-bottom: 0;
+  padding-bottom: var(--listbox-padding-bottom);
 }
 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,8 +281,9 @@ 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: '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 => {
+        return (h("div", { key: 'd3f41c72aa6d013efff695f2435e72482f25a28f', class: "sd-select-v2-listbox", style: cssVars }, this.showSearch && (h("sd-select-v2-list-item-search", { key: '6586d230d0eb3466cf30d644b3ebe94482e91847', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), h("div", { key: '9de0cfc6d458f48a3770fa61dfc019411cfd96bb', 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: '02e382b2a1867fa8816c11e2d07bb042a15027fb', class: {
+        return (h("div", { key: '906bfdacc9ec8028d61335dd8a6eb9fa887ccd2d', 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: '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: {
+            }, style: cssVars, onClick: this.handleClick }, h("div", { key: '3688fb32fbc996ce423a92007d1208b950f7baba', class: "sd-select-v2-trigger__content" }, h("span", { key: '1c38cf28cb536aa93541e1bfd0b3736ba8b59782', class: "sd-select-v2-trigger__text" }, hasValue ? this.displayText : this.placeholder), h("sd-icon", { key: '9bfc7681e142766eeaa42dd801c8ff88dec61861', 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

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

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

@@ -13,6 +13,7 @@ export class SdSelectV2 {
     dropdownHeight = '260px';
     disabled = false;
     label = '';
+    labelWidth = '';
     addonLabel = '';
     error = false;
     hint = '';
@@ -206,13 +207,13 @@ export class SdSelectV2 {
                 this.closeDropdown();
             },
         };
-        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: () => {
+        return (h("sd-field", { key: 'c9f08598c8f9852ab4000f056621dfef238e16de', name: this.fieldName || this.internalName, label: this.label, labelWidth: this.labelWidth, 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: '994150030e4e7d87650de8dc8fd7b44d57c3b62b', class: "sd-select-v2", ref: el => {
+            } }, h("div", { key: '302103a425963e5d577b01ad179d5af82e6f30b1', class: "sd-select-v2", ref: el => {
                 this.triggerRef = el;
-            } }, 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) })))));
+            } }, h("sd-select-v2-trigger", { key: 'a22bca400e5d10ee29e569da04d36b9291a1dade', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '0df4ad35bb284298708a0c1e11ce0e3c28d16ed8', ...portalProps }, h("sd-select-v2-listbox", { key: '90c18612d553342be091a30e05194bab91407c76', 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() {
@@ -406,6 +407,26 @@ export class SdSelectV2 {
                 "attribute": "label",
                 "defaultValue": "''"
             },
+            "labelWidth": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-width",
+                "defaultValue": "''"
+            },
             "addonLabel": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/sd-switch/sd-switch.config.js

@@ -0,0 +1,23 @@
+import switchTokens from "../../tokens/generated/component.switch.json";
+export const SWITCH_LAYOUT = {
+    width: Number(switchTokens.switch.width),
+    height: Number(switchTokens.switch.height),
+    paddingXY: Number(switchTokens.switch.paddingXY),
+    radius: Number(switchTokens.switch.radius),
+    knobSize: Number(switchTokens.switch.knob.size),
+    gap: Number(switchTokens.switch.gap),
+};
+export const SWITCH_COLORS = {
+    knobBg: switchTokens.switch.knob.bg,
+    bgOn: switchTokens.switch.bg.on,
+    bgOff: switchTokens.switch.bg.off,
+    bgDisabledOn: switchTokens.switch.bg.disabled.on,
+    bgDisabledOff: switchTokens.switch.bg.disabled.off,
+};
+export const SWITCH_TYPOGRAPHY = {
+    fontFamily: switchTokens.switch.label.typography.fontFamily,
+    fontWeight: switchTokens.switch.label.typography.fontWeight,
+    fontSize: Number(switchTokens.switch.label.typography.fontSize),
+    lineHeight: Number(switchTokens.switch.label.typography.lineHeight),
+    textDecoration: switchTokens.switch.label.typography.textDecoration,
+};