@sellmate/design-system 0.0.48 → 0.0.50

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

@@ -89,11 +89,11 @@ export class SdInput {
                 '--input-width': typeof this.width === 'number' ? `${this.width}px` : this.width,
             }
             : {};
-        return (h(Host, { key: '87a102220530a2e06620619967f1925f193b4794', style: inputWidth }, this.label && h("div", { key: 'dec1ef5b27dadc7b2c6c0e9f5dab978b338b5a45', class: "sd-input__label" }, this.label), h("label", { key: '72ba8b8b0019fd1bfc222207df4b42735457873d', class: {
+        return (h(Host, { key: '0fc9bec4559137ede7daa7f2da5df00595991d5a', style: inputWidth }, this.label && h("div", { key: '3fd4e7d08aca431d7743ec4249a221c77f2fefd1', class: "sd-input__label" }, this.label), h("label", { key: 'bc80c41ffcb1312261b1139dcd0c390db32932df', class: {
                 'sd-input': true,
                 [this.getInputStatus()]: true,
                 'sd-input--barcode': !!this.barcode,
-            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, h("slot", { key: '7745177f5638351670adb3610325d44df156826e', name: "prefix" }), h("input", { key: '976949537b8071a409d94e93f803128946d73d48', ref: el => (this.nativeEl = el), class: `sd-input__native_element ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onChange: this.handleChange, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event) }), h("slot", { key: 'b62387e0c2122cfb9f5599a108d54682df59fef6', name: "suffix" }), this.clearable && this.internalValue && (h("sd-icon", { key: 'b860d9c2387adf97d7317bba550b169ac9f4ac49', name: "close", color: "#888", class: "sd-input__clear-icon", onClick: () => {
+            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, h("slot", { key: 'b1df6c52c2dc92adde26cd535b008d35bc1c73d2', name: "prefix" }), h("input", { key: '5c02cca10b415521d569151c3b05cd9b2ae4b9b7', ref: el => (this.nativeEl = el), class: `sd-input__native_element ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onChange: this.handleChange, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event) }), h("slot", { key: 'f85912a8f17712d0a4950a68d10d885556a1de44', name: "suffix" }), this.clearable && this.internalValue && (h("sd-icon", { key: '3087e7d22f06e2b29d17b37d2e95bdcbcc511bd4', name: "close", color: "#888", class: "sd-input__clear-icon", onClick: () => {
                 this.internalValue = '';
                 this.sdChange?.emit(this.internalValue);
                 this.sdInput?.emit(this.internalValue);

package/dist/collection/components/sd-loading-spinner/sd-loading-spinner.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class SdLoadingSpinner {
     render() {
-        return (h(Host, { key: '54446b42c83eff572c2d0d63c367a7e407d722a5' }, h("svg", { key: '92ad1f0446dc5912a656512d09ab4b8b3b262156', class: "sd-loading-spinner text-positive", width: "72px", height: "72px", viewBox: "25 25 50 50" }, h("circle", { key: 'b9b0c2ea5233fb5f5c784d0262c6ba526dc00622', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
+        return (h(Host, { key: 'd064701b25e190fc5b7feefb542cbc7d30afc3f3' }, h("svg", { key: 'ec37a9ebea3e5b48817c687fae543186bb3cf29a', class: "sd-loading-spinner text-positive", width: "72px", height: "72px", viewBox: "25 25 50 50" }, h("circle", { key: '0b61caa65955019ddb08ed52a51718cf3f55a6e3', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
     }
     static get is() { return "sd-loading-spinner"; }
     static get originalStyleUrls() {

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

@@ -67,12 +67,12 @@ export class SdPagination {
         }
     }
     render() {
-        return (h("div", { key: '3b65d74d4b70b8b3292a20daa5d89ffb7d9a66e7', class: this.paginationClasses }, h("div", { key: 'a3be2b1c24ac6ac7ecde25223d9208e63e558bf3', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "pagination-info" }, h("span", { class: "current-page" }, this.currentPage), h("span", null, "/"), h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
+        return (h("div", { key: 'c8c241301297c8281d02643f5a31c97f77706fff', class: this.paginationClasses }, h("div", { key: '12ca5b852a648b168928934729d2215f6648bcc1', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "pagination-info" }, h("span", { class: "current-page" }, this.currentPage), h("span", null, "/"), h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (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)))), h("div", { key: '9c145c18eacc2ab0115d162cbb50e5ad3ea62c80', class: "append-btns" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n)))), h("div", { key: '0ff537ba6e5985be1e055f5b9eab5dd86dd11624', class: "append-btns" }, this.renderNextButtons())));
     }
     static get is() { return "sd-pagination"; }
     static get originalStyleUrls() {

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

@@ -30,11 +30,11 @@ export class SdPopover {
         this.showPopover = false;
     };
     render() {
-        return (h(Fragment, { key: '60031ca070a366a90f74d93908ec956076b4e8be' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })), this.showPopover && (h("sd-tooltip-portal", { key: '199246e3638600c05ae9f9cab99c00540f2525ef', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, h("div", { key: '204b3dcf316277e5b2ce4fab3273c7726f1485c7', class: {
+        return (h(Fragment, { key: '596dfc584e73c7d7093e15a91046e14b7801138a' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })), this.showPopover && (h("sd-tooltip-portal", { key: '9bf784d6946cd5fd8b6ecfd3a6e9d976f44a2a90', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, h("div", { key: '409afdeee8e96ce019594cd2aaa16034e4339a35', class: {
                 'sd-popover-menu': true,
                 [`sd-popover-menu--${this.placement}`]: true,
                 [this.menuClass]: !!this.menuClass,
-            } }, h("i", { key: '344b1aace077490124078499dbcc08c3bc9af92d', class: `sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: 'be3b82a87f9292d44177927330e0b7d7b1ba2c0f' })), h("div", { key: 'ac1223f53514958384fa1b3e7f3bad84933436cd', class: "sd-popover-menu__content" }, this.menuTitle && h("div", { key: 'a191a3fa975ff94711a6bbc7ab2fdc4bea0d5f9c', class: "sd-popover-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: 'a830419f35e0cdf43cf4059d1a815d4b169a4625', class: "sd-popover-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: 'd66775a5ec5899caa040e0ae53a1bce0eea3c167', class: `sd-popover-menu__buttons sd-popover-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (h("sd-button", { ...button })))))), this.useClose && (h("button", { key: '19f1f43ec6908e51f3f5b07268f0c59c3f1db1fe', class: "sd-popover-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: 'b658485e35e837c50886da6cf911d1b9d8f81ff1', name: "close", size: "12", color: "#AAAAAA" }))))))));
+            } }, h("i", { key: '2ff3545fb7b13c11d4f128616a68f0a230087447', class: `sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '3da84311b01c95d92b91327ce66e49e1d0243b37' })), h("div", { key: 'aa861155d8c9194dffafd8b834e58108995f33ed', class: "sd-popover-menu__content" }, this.menuTitle && h("div", { key: '534c0871ff6b909c87eba179be23c7e2fa4ce0e9', class: "sd-popover-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: 'a601e50189ca95fa007e68edf64c1a0aa1e990d0', class: "sd-popover-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: '63ee5c3dcdf167e0b35b5ed96a516b91ff007355', class: `sd-popover-menu__buttons sd-popover-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (h("sd-button", { ...button })))))), this.useClose && (h("button", { key: '6f8f0a6dfd113603105652686b5426e3a0313d4e', class: "sd-popover-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: '9f1aedb7e6e9e519fa890856ea9c185e393f5f43', name: "close", size: "12", color: "#AAAAAA" }))))))));
     }
     static get is() { return "sd-popover"; }
     static get encapsulation() { return "shadow"; }

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

@@ -113,7 +113,7 @@ export class SdPortal {
         this.sdClose.emit();
     }
     render() {
-        return h("slot", { key: 'b24b7f844564365e887dc8cee8b98e26a94961cd' });
+        return h("slot", { key: '2f6a1908864a2b5bbe86127fbf41b6b44a599666' });
     }
     static get is() { return "sd-portal"; }
     static get properties() {

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

@@ -13,10 +13,10 @@ export class SdProgress {
         error: '#FB4444',
     };
     render() {
-        return (h(Host, { key: 'e5a1be5c3343e0645db107b076fac36d1a935ca7', style: {
+        return (h(Host, { key: 'fa4a0bdd1e76231bc3ff349c5e94a18f1d747bf4', style: {
                 '--progress-color': this.statusColor[this.status],
                 '--progress-percentage': `${this.percentage}%`,
-            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && h("div", { key: 'd2676df17ad3474f88d3c0972802a7b373b5652e', class: "sd-progress__label" }, this.label)));
+            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && h("div", { key: '2c356835e29ec88765f0be0efbe9ee416f1e27ea', class: "sd-progress__label" }, this.label)));
     }
     renderBarProgress() {
         return (h("div", { class: `sd-progress__bar sd-progress__bar--${this.status}` }, h("div", { class: ['sd-progress__bar__percent', this.percentage < 100 ? 'proceed' : ''].join(' ') }), h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--left" }, this.percentage, "%"), h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--right" }, this.percentage, "%")));

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

@@ -0,0 +1,76 @@
+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;
+}
+sd-radio-group .sd-radio-group__option {
+  width: fit-content;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 20px;
+  cursor: pointer;
+}
+sd-radio-group .sd-radio-group__option:has(input:disabled) {
+  cursor: default;
+}
+sd-radio-group .sd-radio-group__option input {
+  position: relative;
+  appearance: none;
+  margin: 0;
+  width: 16px;
+  height: 16px;
+  border: 1px solid #888888;
+  border-radius: 50%;
+  cursor: pointer;
+  accent-color: #0075ff;
+  background-color: white;
+}
+sd-radio-group .sd-radio-group__option input:checked {
+  border-color: #0075ff;
+  background-color: white;
+}
+sd-radio-group .sd-radio-group__option 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-group .sd-radio-group__option input:disabled {
+  cursor: default;
+  border-color: #cccccc;
+  background-color: #eeeeee;
+}
+sd-radio-group .sd-radio-group__option input:disabled:checked::before {
+  background-color: #cccccc;
+}
+sd-radio-group .sd-radio-group__option input:not(:disabled):hover {
+  border-color: #0075ff;
+  background-color: #d9eaff;
+}
+sd-radio-group .sd-radio-group__label {
+  font-size: 12px;
+  color: #333333;
+  line-height: 20px;
+  user-select: none;
+}
+sd-radio-group .sd-radio-group__option--disabled .sd-radio-group__label {
+  color: #888888;
+}

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

@@ -0,0 +1,214 @@
+import { h } from "@stencil/core";
+export class SdRadioGroup {
+    value;
+    radioOptions = [];
+    direction = 'vertical';
+    disabled = false;
+    name;
+    selectedValue;
+    sdChange;
+    componentWillLoad() {
+        if (this.value) {
+            this.selectedValue = this.value;
+        }
+    }
+    valueChanged(newValue) {
+        this.selectedValue = newValue;
+    }
+    handleRadioChange = (optionValue, optionDisabled) => {
+        if (this.disabled || optionDisabled)
+            return;
+        this.selectedValue = optionValue;
+        this.value = optionValue;
+        this.sdChange.emit(optionValue);
+    };
+    isOptionSelected(option) {
+        return this.selectedValue === option.value;
+    }
+    isOptionDisabled(option) {
+        return this.disabled || !!option.disabled;
+    }
+    getRadioClasses(option) {
+        const classes = [
+            'sd-radio-group__option',
+            this.isOptionSelected(option)
+                ? 'sd-radio-group__option--selected'
+                : 'sd-radio-group__option--unselected',
+        ];
+        if (this.isOptionDisabled(option)) {
+            classes.push('sd-radio-group__option--disabled');
+        }
+        return classes.join(' ');
+    }
+    getGroupClasses() {
+        const classes = ['sd-radio-group', `sd-radio-group--${this.direction}`];
+        return classes.join(' ');
+    }
+    render() {
+        const groupName = this.name || `sd-radio-group-${Math.random().toString(36).substring(2, 11)}`;
+        return (h("div", { key: 'd8f9d161395e7125bb65411ee6831e7e290900ba', class: this.getGroupClasses(), role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.radioOptions.map((option, index) => {
+            const isSelected = this.isOptionSelected(option);
+            const isDisabled = this.isOptionDisabled(option);
+            return (h("label", { key: `radio-${index}`, class: this.getRadioClasses(option), role: "radio", "aria-checked": isSelected.toString(), "aria-disabled": isDisabled.toString(), "aria-label": option.label || 'radio option' }, h("input", { type: "radio", name: groupName, value: option.value.toString(), checked: isSelected, disabled: isDisabled, onInput: () => this.handleRadioChange(option.value, option.disabled) }), option.label && h("span", { class: "sd-radio-group__label" }, option.label)));
+        })));
+    }
+    static get is() { return "sd-radio-group"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sd-radio-group.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sd-radio-group.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "any",
+                "mutable": true,
+                "complexType": {
+                    "original": "RadioValue",
+                    "resolved": "boolean | number | string",
+                    "references": {
+                        "RadioValue": {
+                            "location": "local",
+                            "path": "C:/Users/KimMeeKyeong/Documents/sellmate/frontend/design-system/packages/stencil/src/components/sd-radio-group/sd-radio-group.tsx",
+                            "id": "src/components/sd-radio-group/sd-radio-group.tsx::RadioValue"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value"
+            },
+            "radioOptions": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "RadioOption[]",
+                    "resolved": "RadioOption[]",
+                    "references": {
+                        "RadioOption": {
+                            "location": "local",
+                            "path": "C:/Users/KimMeeKyeong/Documents/sellmate/frontend/design-system/packages/stencil/src/components/sd-radio-group/sd-radio-group.tsx",
+                            "id": "src/components/sd-radio-group/sd-radio-group.tsx::RadioOption"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "direction": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'horizonal' | 'vertical'",
+                    "resolved": "\"horizonal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "direction",
+                "defaultValue": "'vertical'"
+            },
+            "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"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "selectedValue": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "sdChange",
+                "name": "sdChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "RadioValue",
+                    "resolved": "boolean | number | string",
+                    "references": {
+                        "RadioValue": {
+                            "location": "local",
+                            "path": "C:/Users/KimMeeKyeong/Documents/sellmate/frontend/design-system/packages/stencil/src/components/sd-radio-group/sd-radio-group.tsx",
+                            "id": "src/components/sd-radio-group/sd-radio-group.tsx::RadioValue"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "valueChanged"
+            }];
+    }
+}
+//# sourceMappingURL=sd-radio-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sd-radio-group.js","sourceRoot":"","sources":["../../../src/components/sd-radio-group/sd-radio-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, EventEmitter, Event, State, Watch } from '@stencil/core';\r\n\r\nexport type RadioValue = string | number | boolean;\r\nexport type RadioOption = {\r\n label: string;\r\n value: RadioValue;\r\n disabled?: boolean;\r\n};\r\n\r\n@Component({\r\n tag: 'sd-radio-group',\r\n styleUrl: 'sd-radio-group.scss',\r\n})\r\nexport class SdRadioGroup {\r\n @Prop({ mutable: true, reflect: true }) value!: RadioValue;\r\n\r\n @Prop({ mutable: true }) radioOptions: RadioOption[] = [];\r\n\r\n @Prop() direction: 'horizonal' | 'vertical' = 'vertical';\r\n\r\n @Prop() disabled: boolean = false;\r\n\r\n @Prop() name?: string;\r\n\r\n @State() private selectedValue!: RadioValue;\r\n\r\n @Event()\r\n sdChange!: EventEmitter<RadioValue>;\r\n\r\n componentWillLoad() {\r\n  if (this.value) {\r\n   this.selectedValue = this.value;\r\n  }\r\n }\r\n\r\n @Watch('value')\r\n valueChanged(newValue: RadioValue) {\r\n  this.selectedValue = newValue;\r\n }\r\n\r\n private handleRadioChange = (optionValue: RadioValue, optionDisabled?: boolean) => {\r\n  if (this.disabled || optionDisabled) return;\r\n  this.selectedValue = optionValue;\r\n  this.value = optionValue;\r\n  this.sdChange.emit(optionValue);\r\n };\r\n\r\n private isOptionSelected(option: RadioOption): boolean {\r\n  return this.selectedValue === option.value;\r\n }\r\n\r\n private isOptionDisabled(option: RadioOption): boolean {\r\n  return this.disabled || !!option.disabled;\r\n }\r\n\r\n private getRadioClasses(option: RadioOption): string {\r\n  const classes = [\r\n   'sd-radio-group__option',\r\n   this.isOptionSelected(option)\r\n    ? 'sd-radio-group__option--selected'\r\n    : 'sd-radio-group__option--unselected',\r\n  ];\r\n\r\n  if (this.isOptionDisabled(option)) {\r\n   classes.push('sd-radio-group__option--disabled');\r\n  }\r\n\r\n  return classes.join(' ');\r\n }\r\n\r\n private getGroupClasses(): string {\r\n  const classes = ['sd-radio-group', `sd-radio-group--${this.direction}`];\r\n  return classes.join(' ');\r\n }\r\n\r\n render() {\r\n  const groupName = this.name || `sd-radio-group-${Math.random().toString(36).substring(2, 11)}`;\r\n\r\n  return (\r\n   <div class={this.getGroupClasses()} role=\"radiogroup\" aria-disabled={this.disabled.toString()}>\r\n    {this.radioOptions.map((option, index) => {\r\n     const isSelected = this.isOptionSelected(option);\r\n     const isDisabled = this.isOptionDisabled(option);\r\n\r\n     return (\r\n      <label\r\n       key={`radio-${index}`}\r\n       class={this.getRadioClasses(option)}\r\n       role=\"radio\"\r\n       aria-checked={isSelected.toString()}\r\n       aria-disabled={isDisabled.toString()}\r\n       aria-label={option.label || 'radio option'}\r\n      >\r\n       <input\r\n        type=\"radio\"\r\n        name={groupName}\r\n        value={option.value.toString()}\r\n        checked={isSelected}\r\n        disabled={isDisabled}\r\n        onInput={() => this.handleRadioChange(option.value, option.disabled)}\r\n       />\r\n       {option.label && <span class=\"sd-radio-group__label\">{option.label}</span>}\r\n      </label>\r\n     );\r\n    })}\r\n   </div>\r\n  );\r\n }\r\n}\r\n"]}

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

@@ -24,7 +24,7 @@ export class SdSelectOption {
         }
     };
     render() {
-        return (h(Host, { key: 'f1874b4e539573ddaa48cb2bdc9d13ea96bf350e' }, h("div", { key: '5a3bbd66f6623a1c02d5e1295bb974e82883b8a1', class: {
+        return (h(Host, { key: '7cf5b51057f8eb7ad7cf7143225bcd842e5fa231' }, h("div", { key: 'ab9e02db38a0717b9aeb85890b150a6e59a9f7ee', class: {
                 'sd-select__option': true,
                 'sd-select__option--selected': this.isSelected,
                 'sd-select__option--disabled': !!this.option.disabled,

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

@@ -208,11 +208,11 @@ export class SdSelectMultiple extends BaseDropdownEvent {
             '--select-width': this.width || '200px',
             '--select-dropdown-height': this.dropdownHeight || '260px',
         };
-        return (h(Host, { key: '0e488c3906b12e73abc6e6216e14b2b4e6a130c8', style: style }, h("div", { key: '714a95f446631269a19e44d098ef0dc81c7c6fd5', class: {
+        return (h(Host, { key: '356e513b8d7e856ed22d5358027b163463d55c1d', style: style }, h("div", { key: '3a75650badea618ed89899de57fbd25c020df6d0', class: {
                 'sd-select-multiple': true,
                 'sd-select-multiple--open': this.isOpen,
                 'sd-select-multiple--disabled': this.disabled,
-            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), h("div", { key: '08912b8586c926107cbcaed28b73bd6eb94d47d9', class: "sd-select-multiple__container" }, this.renderTrigger(), this.renderDropdown()))));
+            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), h("div", { key: 'e42235a132e3c13e9a996206ab7f58698ab97fe1', class: "sd-select-multiple__container" }, this.renderTrigger(), this.renderDropdown()))));
     }
     renderLabel(label) {
         if (!label)

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: 'e96411f172ed4ed5359fef2a124bf49df88e10ec', class: {
+        return (h("div", { key: '2d1e55e35c77246a2df6856b2e7053cc21aabfc5', 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: 'fa9464cac1ee58b46b983f17882eeb847e3dc9b7', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (h("sd-checkbox", { key: 'f9a7ab839d566671d6ee9e7164424d307a81f2d6', checked: 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: '33ce9985f9c94502d103d81b3678abdb732dfadb', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (h("sd-checkbox", { key: '262ec7ac68b981b5a69c21a5785c2c4ff5db7966', checked: this.isSelected, disabled: this.option.disabled, onClick: e => {
                 e.preventDefault();
                 this.handleClick(this.option, this.isSelected, e);
-            } })), h("span", { key: 'ee27fb5e2d14acf898c7ce1e22b8cbffe59cec31', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (h("span", { key: 'aaf9552da0a665ac34848ab5649d5993133394c4', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
+            } })), h("span", { key: 'f9c89b082413da5914e166d53e1fd9bc269395ce', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (h("span", { key: 'eaec735454f0b3c102397352d7863662fa933b24', 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-table/sd-tbody/sd-tbody.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class SdTbody {
     render() {
-        return (h(Host, { key: 'b94310b0ad1566cf9ccbac3ccdc5fbcdd2e53f8c' }, h("slot", { key: '382fb835aa4516adad374443556084703b8560c3' })));
+        return (h(Host, { key: 'aa5030bb9713c355685de66e15db8b702744c0bc' }, h("slot", { key: '2bfed556b78fc92f8f6b4c574f976a7f0a3c36a8' })));
     }
     static get is() { return "sd-tbody"; }
     static get originalStyleUrls() {

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

@@ -5,11 +5,11 @@ export class SdTd {
     tdStyle;
     tdClass;
     render() {
-        return (h(Host, { key: '87c947cf0092ac524cdfed0be5f1703685a64db6', role: "cell", class: {
+        return (h(Host, { key: '6459518995f28a8138b3f669876c90dd24e610c2', role: "cell", class: {
                 'sd-td': true,
                 [`sd-td--${this.align}`]: true,
                 [this.tdClass || '']: Boolean(this.tdClass),
-            }, style: this.tdStyle }, h("slot", { key: '4369629e345d8cc5bb17166d6877dba421522e4d' })));
+            }, style: this.tdStyle }, h("slot", { key: 'bf51d35dee9adb6a88b29a6c51be9f73ae1ab3b5' })));
     }
     static get is() { return "sd-td"; }
     static get originalStyleUrls() {

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

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class SdTh {
     render() {
-        return (h(Host, { key: 'cf30b704166adc6d7de5ade8d455d34ecf575199', role: "columnheader" }, h("slot", { key: '7863306b924a749aba5ba55f70b8b3d5c205d133' })));
+        return (h(Host, { key: 'a9adef2bdfd7dd0a52a55fffb40db6511db5747e', role: "columnheader" }, h("slot", { key: 'd4af30df5d6a4a9140a9d10e0f3948de088f8c18' })));
     }
     static get is() { return "sd-th"; }
     static get originalStyleUrls() {

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

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class SdTr {
     render() {
-        return (h(Host, { key: '2cfec32649fa440cb44f83392c439e58dcb24644', role: "row" }, h("slot", { key: '0146af3690a7a6445b65893f86e0b9e5cd1d8a02' })));
+        return (h(Host, { key: '18a0e95b7264b495bd15aeb7c3a704dac938e140', role: "row" }, h("slot", { key: '83ac4ded200f5e7b18a01d2055859e1093e34d6c' })));
     }
     static get is() { return "sd-tr"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-table-backup/sd-table-backup.css

@@ -40,12 +40,27 @@
 .sd-table__wrapper .sd-table__container .sd-table__middle {
   overflow: auto;
   will-change: scroll-position;
+  min-height: var(--table-container-height, auto);
 }
 .sd-table__wrapper .sd-table__container .sd-table__middle--scrollable {
   height: var(--table-container-height, auto);
 }
 .sd-table__wrapper .sd-table__container .sd-table__middle--loading {
   overflow: hidden !important;
+  pointer-events: none;
+}
+.sd-table__wrapper .sd-table__container .sd-table__middle--loading__spinner {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: var(--table-container-height, 100%);
+  min-height: var(--table-container-height, 100%);
+  background: rgba(255, 255, 255, 0.6);
+  z-index: 200;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 .sd-table__wrapper .sd-table__container .sd-table__middle .sd-table {
   background-color: white;
@@ -203,19 +218,6 @@
   border-left: 1px solid #cccccc;
   border-right: 1px solid #cccccc;
 }
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody .sd-table__loading {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: var(--table-width, 100%);
-  height: var(--table-container-height, 100%);
-  min-height: var(--table-container-height, 100%);
-  background: rgba(255, 255, 255, 0.6);
-  z-index: 200;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
 .sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td {
   height: 44px;
   padding: 0 16px;
@@ -259,11 +261,11 @@
 }
 .sd-table__wrapper .sd-table__virtual-spacer,
 .sd-table__wrapper .sd-table__virtual-row-spacer {
-  padding: 0;
+  padding: 0 !important;
 }
 .sd-table__wrapper .sd-table__virtual-spacer td,
 .sd-table__wrapper .sd-table__virtual-row-spacer td {
-  padding: 0;
+  padding: 0 !important;
   border: none;
 }
 .sd-table__wrapper .sd-table__virtual-spacer .sd-table__skeleton,