@sellmate/design-system 1.0.61 → 1.0.63

package/dist/collection/components/sd-modal-container/sd-modal-container.js

@@ -31,6 +31,15 @@ export class SdModalContainer {
         });
         return id;
     }
+    async openLoading(options, modalRef) {
+        const id = `modal-${++modalIdCounter}`;
+        const modalEl = this.createLoadingModal(id, options);
+        this.attachLoadingModalEventListeners(id, modalEl);
+        this.registerEntry(id, modalEl, modalRef, {
+            persistent: !!options.persistent,
+        });
+        return id;
+    }
     async createCustom(element, options, modalRef) {
         const id = `modal-${++modalIdCounter}`;
         element.setAttribute('data-modal-id', id);
@@ -46,6 +55,12 @@ export class SdModalContainer {
         modalEl.addEventListener('sdCancel', () => this.requestDismiss(id, 'cancel'));
         modalEl.addEventListener('sdClose', () => this.requestDismiss(id, 'close'));
     }
+    attachLoadingModalEventListeners(id, modalEl) {
+        modalEl.addEventListener('sdClick', () => {
+            const entry = (this.entries ?? []).find(item => item.id === id);
+            entry?.modalRef._triggerClick?.();
+        });
+    }
     dispatchClose(modalEl) {
         modalEl.dispatchEvent(new CustomEvent('sdClose'));
     }
@@ -88,7 +103,13 @@ export class SdModalContainer {
         const entry = (this.entries ?? []).find(e => e.id === id);
         if (!entry || entry.closing)
             return;
-        this.applyProps(entry.modalEl, props);
+        const tag = entry.modalEl.tagName.toLowerCase();
+        if (tag === 'sd-loading-modal') {
+            this.applyLoadingProps(entry.modalEl, props);
+        }
+        else {
+            this.applyProps(entry.modalEl, props);
+        }
     }
     createConfirmModal(id, options) {
         const el = document.createElement('sd-confirm-modal');
@@ -97,6 +118,28 @@ export class SdModalContainer {
         this.applyProps(el, options);
         return el;
     }
+    createLoadingModal(id, options) {
+        const el = document.createElement('sd-loading-modal');
+        el.setAttribute('data-modal-id', id);
+        el.classList.add('sd-modal-container__modal');
+        this.applyLoadingProps(el, options);
+        return el;
+    }
+    applyLoadingProps(el, options) {
+        if (this.hasOwnProp(options, 'state'))
+            this.setAttr(el, 'state', options.state);
+        if (this.hasOwnProp(options, 'message'))
+            this.setAttr(el, 'message', options.message);
+        if (this.hasOwnProp(options, 'buttonLabel')) {
+            this.setAttr(el, 'button-label', options.buttonLabel);
+        }
+        if (this.hasOwnProp(options, 'width')) {
+            this.setAttr(el, 'width', options.width != null ? String(options.width) : undefined);
+        }
+        if (this.hasOwnProp(options, 'height')) {
+            this.setAttr(el, 'height', options.height != null ? String(options.height) : undefined);
+        }
+    }
     applyProps(el, options) {
         if (this.hasOwnProp(options, 'type'))
             this.setAttr(el, 'type', options.type);
@@ -295,6 +338,43 @@ export class SdModalContainer {
                     "tags": []
                 }
             },
+            "openLoading": {
+                "complexType": {
+                    "signature": "(options: LoadingModalOptions, modalRef: ModalDialogRefLike) => Promise<string>",
+                    "parameters": [{
+                            "name": "options",
+                            "type": "LoadingModalOptions",
+                            "docs": ""
+                        }, {
+                            "name": "modalRef",
+                            "type": "ModalDialogRefLike",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "LoadingModalOptions": {
+                            "location": "import",
+                            "path": "./sd-modal-container.config",
+                            "id": "src/components/sd-modal-container/sd-modal-container.config.ts::LoadingModalOptions",
+                            "referenceLocation": "LoadingModalOptions"
+                        },
+                        "ModalDialogRefLike": {
+                            "location": "import",
+                            "path": "./sd-modal-container.config",
+                            "id": "src/components/sd-modal-container/sd-modal-container.config.ts::ModalDialogRefLike",
+                            "referenceLocation": "ModalDialogRefLike"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
             "createCustom": {
                 "complexType": {
                     "signature": "(element: HTMLElement, options: SdModalCreateOptions, modalRef: ModalDialogRefLike) => Promise<string>",
@@ -367,14 +447,14 @@ export class SdModalContainer {
             },
             "update": {
                 "complexType": {
-                    "signature": "(id: string, props: Partial<ConfirmModalOptions>) => Promise<void>",
+                    "signature": "(id: string, props: Partial<ConfirmModalOptions> | Partial<LoadingModalOptions>) => Promise<void>",
                     "parameters": [{
                             "name": "id",
                             "type": "string",
                             "docs": ""
                         }, {
                             "name": "props",
-                            "type": "{ type?: ConfirmModalType | undefined; title?: string | undefined; titleClass?: string | undefined; topMessage?: string[] | undefined; bottomMessage?: string[] | undefined; mainButtonName?: ConfirmModalMainButton | undefined; mainButtonLabel?: string | undefined; subButtonLabel?: string | undefined; tagPreset?: \"square_xs_red\" | \"square_xs_orange\" | \"square_xs_yellow\" | \"square_xs_green\" | \"square_xs_blue\" | \"square_xs_darkblue\" | \"square_xs_indigo\" | \"square_xs_grey\" | \"square_sm_red\" | \"square_sm_orange\" | \"square_sm_yellow\" | \"square_sm_green\" | \"square_sm_blue\" | \"square_sm_darkblue\" | \"square_sm_indigo\" | \"square_sm_grey\" | \"square_md_red\" | \"square_md_orange\" | \"square_md_yellow\" | \"square_md_green\" | \"square_md_blue\" | \"square_md_darkblue\" | \"square_md_indigo\" | \"square_md_grey\" | \"pill_xs_red\" | \"pill_xs_orange\" | \"pill_xs_yellow\" | \"pill_xs_green\" | \"pill_xs_blue\" | \"pill_xs_darkblue\" | \"pill_xs_indigo\" | \"pill_xs_grey\" | \"pill_sm_red\" | \"pill_sm_orange\" | \"pill_sm_yellow\" | \"pill_sm_green\" | \"pill_sm_blue\" | \"pill_sm_darkblue\" | \"pill_sm_indigo\" | \"pill_sm_grey\" | \"pill_md_red\" | \"pill_md_orange\" | \"pill_md_yellow\" | \"pill_md_green\" | \"pill_md_blue\" | \"pill_md_darkblue\" | \"pill_md_indigo\" | \"pill_md_grey\" | undefined; tagLabel?: string | undefined; slotLabel?: string | undefined; tagContents?: HTMLElement | undefined; persistent?: boolean | undefined; }",
+                            "type": "Partial<ConfirmModalOptions> | Partial<LoadingModalOptions>",
                             "docs": ""
                         }],
                     "references": {
@@ -391,6 +471,12 @@ export class SdModalContainer {
                             "path": "./sd-modal-container.config",
                             "id": "src/components/sd-modal-container/sd-modal-container.config.ts::ConfirmModalOptions",
                             "referenceLocation": "ConfirmModalOptions"
+                        },
+                        "LoadingModalOptions": {
+                            "location": "import",
+                            "path": "./sd-modal-container.config",
+                            "id": "src/components/sd-modal-container/sd-modal-container.config.ts::LoadingModalOptions",
+                            "referenceLocation": "LoadingModalOptions"
                         }
                     },
                     "return": "Promise<void>"

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

@@ -5,7 +5,6 @@ export const NUMBER_INPUT_SIZE_MAP = {
     sm: {
         height: sm.height,
         paddingX: sm.paddingX,
-        gap: sm.gap,
         radius: sm.radius,
         fontSize: sm.typography.fontSize,
         lineHeight: sm.typography.lineHeight,
@@ -14,7 +13,6 @@ export const NUMBER_INPUT_SIZE_MAP = {
     md: {
         height: md.height,
         paddingX: md.paddingX,
-        gap: md.gap,
         radius: md.radius,
         fontSize: md.typography.fontSize,
         lineHeight: md.typography.lineHeight,

package/dist/collection/components/sd-number-input/sd-number-input.css

@@ -12,7 +12,6 @@ sd-number-input .sd-number-input__content {
   line-height: var(--sd-number-input-line-height);
   font-weight: var(--sd-number-input-font-weight);
   padding: 0 var(--sd-number-input-padding-x);
-  gap: var(--sd-number-input-gap);
 }
 sd-number-input .sd-number-input__content .sd-number-input__native {
   width: 100%;

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

@@ -244,7 +244,6 @@ export class SdNumberInput {
             '--sd-number-input-line-height': `${sizeTokens.lineHeight}px`,
             '--sd-number-input-font-weight': sizeTokens.fontWeight,
             '--sd-number-input-padding-x': `${sizeTokens.paddingX}px`,
-            '--sd-number-input-gap': `${sizeTokens.gap}px`,
             '--sd-number-input-text-color': NUMBER_INPUT_COLORS.text.default,
             '--sd-number-input-placeholder-color': NUMBER_INPUT_COLORS.text.placeholder,
             '--sd-number-input-disabled-color': NUMBER_INPUT_COLORS.text.disabled,
@@ -271,12 +270,12 @@ export class SdNumberInput {
             '--sd-textinput-input-hint-typography-line-height': `${NUMBER_INPUT_HINT.typography.lineHeight}px`,
             '--sd-textinput-input-contents-gap': `${NUMBER_INPUT_CONTENTS_GAP}px`,
         };
-        return (h("sd-field", { key: 'd12c62be0352fcaa356450f7a534f3f1c684cf8e', name: this.name, label: this.label, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: 'be7463579f63800d84531ed72fe84c47de7a005c', class: "sd-number-input__content" }, this.useButton && (h("button", { key: '23f1e57fc26545bef557b1fc6d1827783ffe7144', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: '9b918e18437423e3aec20e5cb66d0d84b3e59649', name: "minus", size: iconSize, color: this.isDecrementDisabled()
+        return (h("sd-field", { key: 'e05cc16f4dde4fd82d11a811b578723af2f5b092', name: this.name, label: this.label, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: 'db4f02b5f882acfe481698745ca374874643efbd', class: "sd-number-input__content" }, this.useButton && (h("button", { key: 'c83df0e915849792427b2f3609937bb0b62aae15', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: 'b7ea0704c9d114b5e1b8eca29a408efb5e532b7e', name: "minus", size: iconSize, color: this.isDecrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
-                : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && (h("span", { key: '0793d70a0040400cc4e1f3bfe8cafaa02f42a8c2', class: "sd-number-input__prefix" }, this.inputPrefix)), h("input", { key: '31d91862988aa0ee3aabcd78a66844c37b9efac0', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__native ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
+                : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && (h("span", { key: '57ed4229c30d52b6925ebaccd816cd8496ab60c0', class: "sd-number-input__prefix" }, this.inputPrefix)), h("input", { key: 'b018a810ca085218beb7acbba0187543c8369236', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__native ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
                 textAlign: this.useButton ? 'center' : 'right',
                 ...this.inputStyle,
-            } }), this.inputSuffix && (h("span", { key: 'fab71e56d4876d0899b9744632d21fb41c344bb6', class: "sd-number-input__suffix" }, this.inputSuffix)), this.useButton && (h("button", { key: '1b1c80f63d7bd8503a9d3c2cbbd5170a44d511bf', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: 'a0073de5e46fc8463f818ac2521725fb8eb7211f', name: "add", size: iconSize, color: this.isIncrementDisabled()
+            } }), this.inputSuffix && (h("span", { key: '5db549a3cc81b98123cdec69b866b25d961f210f', class: "sd-number-input__suffix" }, this.inputSuffix)), this.useButton && (h("button", { key: '8b0b8c4ba46cf1cc5fba21f7fa8c113ca215b265', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: '77012f79ba5a3a5550af844149bb35fa1e165533', name: "add", size: iconSize, color: this.isIncrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
                 : NUMBER_INPUT_STEPPER.icon.default }))))));
     }

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

@@ -68,12 +68,12 @@ export class SdPagination {
         }
     }
     render() {
-        return (h("div", { key: '910b6487f1d2b5581116a19e4bdf4514fe961922', class: this.paginationClasses }, h("div", { key: '1109809ea6c19088617f3ed4e3c878e60071084f', 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: '5136947eb1aa1539d240af359eec8763d708906b', class: this.paginationClasses }, h("div", { key: '3114f336a27b4f3bf6249fd82649b9d21831a57a', 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: '10a0645cba99193a64fbe1f2df90bef9b19da8d5', class: "append-btns" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n)))), h("div", { key: 'a85d2e89389d2638e797873e18717d1079a8b156', class: "append-btns" }, this.renderNextButtons())));
     }
     static get is() { return "sd-pagination"; }
     static get originalStyleUrls() {
@@ -90,7 +90,7 @@ export class SdPagination {
         return {
             "currentPage": {
                 "type": "number",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "number",
                     "resolved": "number",

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

@@ -43,14 +43,14 @@ export class SdPopover {
         this.showPopover = false;
     };
     render() {
-        return (h(Fragment, { key: '8b4e44957bff5bdb075568b15612b31fb42eaffc' }, 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", onSdClick: () => (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-floating-portal", { key: 'e4b676771effb4a51593c6ae0a23f15bd34878a3', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement, offset: this.popoverOffset }, h("div", { key: 'c74dea7df660a3e8285f813d9cfe490c144f3093', class: {
+        return (h(Fragment, { key: 'e953f3dfbc34a7e6b4eee3b90bd9344d4ef7d8a2' }, 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", onSdClick: () => (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-floating-portal", { key: '23128c3d7b03a236026a1557c441ff1ddaae7033', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement, offset: this.popoverOffset }, h("div", { key: '620f97e29104979fd203f943bb516ea31696d737', class: {
                 'sd-floating-menu': true,
                 'sd-floating-menu--popover': true,
                 [`sd-floating-menu--${this.placement}`]: true,
                 [this.menuClass]: !!this.menuClass,
             }, style: {
                 '--sd-floating-bg': popoverTokens.popover.bg,
-            } }, h("i", { key: '7ff2cfecec309217bf1b5ad1f523e37737798120', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: 'df1696d49eb0894805e59f3d0c1112be20e94d84' })), h("div", { key: '0c4babf4b592f5457bdc83f72316a9e718e075aa', class: "sd-floating-menu__content" }, this.menuTitle && h("div", { key: '4a8c4fb114b15068b49f5c6546080e8667ea12fe', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: '47646cb9cb596afcf3bf38e2b08cdef7074ff658', class: "sd-floating-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: '939eb40eba7beda3aac32abcdcb9f6cd75fb6b45', class: `sd-floating-menu__buttons sd-floating-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (h("sd-button", { ...button })))))), this.useClose && (h("sd-ghost-button", { key: 'fb73a35c3db25d2cde16aeb10f14005e82121c6a', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xs", onClick: () => this.handleClose() })))))));
+            } }, h("i", { key: '027cd73af66a6a5161361625502496f8c9183e9d', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '0db7efc9eaaecd48af55f7b46fa1c90eb0027d86' })), h("div", { key: 'd007d9041093593b155df32d1f6420f401baf1fa', class: "sd-floating-menu__content" }, this.menuTitle && h("div", { key: '0746608da07343147896c59a9e8e27e15cd9fae2', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: '76a1c19fe4871a7a0d5bd6fc2ee5228453aab5f2', class: "sd-floating-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: 'ccfdc3a653b9a6fb0ea8ffb8dcb538638ae83e33', class: `sd-floating-menu__buttons sd-floating-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (h("sd-button", { ...button })))))), this.useClose && (h("sd-ghost-button", { key: '6b53a200fdab5175b8346e1b916677a02a4ac0ad', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xs", onClick: () => this.handleClose() })))))));
     }
     static get is() { return "sd-popover"; }
     static get originalStyleUrls() {

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

@@ -220,7 +220,7 @@ export class SdPortal {
         this.close.emit();
     }
     render() {
-        return h("slot", { key: '07cb09b04ab2567afb15b9ae2cc189875f4b55b4' });
+        return h("slot", { key: 'e9862350592ae8ea0741b4639a94e288f0b302f2' });
     }
     static get is() { return "sd-portal"; }
     static get properties() {

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

@@ -33,10 +33,10 @@ export class SdProgress {
         return this.statusColor[this.progressStatus];
     }
     render() {
-        return (h("div", { key: 'f50623b8a78ce370c5b36e0fc5ac6e04bb5e029c', style: {
+        return (h("div", { key: '3afe47c0dd65ddb5a03c15591430febaa8947417', style: {
                 '--progress-color': this.progressColor,
                 '--progress-percentage': `${this.progressPercentage}%`,
-            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && h("div", { key: '5a6414ee55f7d3300a9cc06e86376bfd1a123a64', class: "sd-progress__label" }, this.label)));
+            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && h("div", { key: 'd5bf1e43002f7b16f5b609e9b3cb7cc9d417a246', class: "sd-progress__label" }, this.label)));
     }
     renderBarProgress() {
         return (h("div", { class: `sd-progress__bar sd-progress__bar--${this.progressStatus}` }, h("div", { class: ['sd-progress__bar__percent', this.progressPercentage < 100 ? 'proceed' : ''].join(' ') }), h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--left" }, this.progressPercentage, "%"), h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--right" }, this.progressPercentage, "%")));

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

@@ -12,7 +12,7 @@ export const RADIO_TYPOGRAPHY = {
 };
 export const RADIO_COLORS = {
     unchecked: {
-        bg: radioTokens.radio.unchecked.bg.default,
+        bg: radioTokens.radio.bg.default,
         bgHover: radioTokens.radio.unchecked.bg.hover,
         border: radioTokens.radio.unchecked.border.default,
         borderHover: radioTokens.radio.unchecked.border.hover,

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

@@ -0,0 +1,45 @@
+import radioButtonTokens from "../../tokens/generated/component.radioButton.json";
+export const RADIO_BUTTON_SIZES = {
+    xs: {
+        height: Number(radioButtonTokens.radioButton.xs.height),
+        paddingX: Number(radioButtonTokens.radioButton.xs.paddingX),
+        fontSize: Number(radioButtonTokens.radioButton.xs.typography.fontSize),
+        lineHeight: Number(radioButtonTokens.radioButton.xs.typography.lineHeight),
+        fontWeight: radioButtonTokens.radioButton.xs.typography.fontWeight,
+        fontFamily: radioButtonTokens.radioButton.xs.typography.fontFamily,
+        textDecoration: radioButtonTokens.radioButton.xs.typography.textDecoration,
+    },
+    sm: {
+        height: Number(radioButtonTokens.radioButton.sm.height),
+        paddingX: Number(radioButtonTokens.radioButton.sm.paddingX),
+        fontSize: Number(radioButtonTokens.radioButton.sm.typography.fontSize),
+        lineHeight: Number(radioButtonTokens.radioButton.sm.typography.lineHeight),
+        fontWeight: radioButtonTokens.radioButton.sm.typography.fontWeight,
+        fontFamily: radioButtonTokens.radioButton.sm.typography.fontFamily,
+        textDecoration: radioButtonTokens.radioButton.sm.typography.textDecoration,
+    },
+};
+export const RADIO_BUTTON_LAYOUT = {
+    radius: Number(radioButtonTokens.radioButton.radius),
+    borderWidth: Number(radioButtonTokens.radioButton.border.width),
+    groupGap: Number(radioButtonTokens.radioButton.group.gap),
+};
+export const RADIO_BUTTON_COLORS = {
+    border: {
+        default: radioButtonTokens.radioButton.border.default,
+        select: radioButtonTokens.radioButton.border.select,
+        disabled: radioButtonTokens.radioButton.border.disabled,
+    },
+    bg: {
+        default: radioButtonTokens.radioButton.bg.default,
+        hover: radioButtonTokens.radioButton.bg.hover,
+        select: radioButtonTokens.radioButton.bg.select,
+        disabled: radioButtonTokens.radioButton.bg.disabled,
+    },
+    content: {
+        default: radioButtonTokens.radioButton.content.default,
+        hover: radioButtonTokens.radioButton.content.hover,
+        select: radioButtonTokens.radioButton.content.select,
+        disabled: radioButtonTokens.radioButton.content.disabled,
+    },
+};

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

@@ -0,0 +1,71 @@
+sd-radio-button {
+  display: inline-flex;
+  width: fit-content;
+  height: fit-content;
+}
+
+.sd-radio-button {
+  display: inline-flex;
+  flex-flow: row nowrap;
+  gap: 0;
+}
+.sd-radio-button__option {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  box-sizing: border-box;
+  height: var(--sd-radio-button-height);
+  padding: 0 var(--sd-radio-button-padding-x);
+  border: var(--sd-radio-button-border-width) solid var(--sd-radio-button-border-default);
+  background-color: var(--sd-radio-button-bg-default);
+  color: var(--sd-radio-button-content-default);
+  font-family: var(--sd-radio-button-font-family);
+  font-weight: var(--sd-radio-button-font-weight);
+  font-size: var(--sd-radio-button-font-size);
+  line-height: var(--sd-radio-button-line-height);
+  text-decoration: var(--sd-radio-button-text-decoration);
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
+  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+}
+.sd-radio-button__option input {
+  display: none;
+}
+.sd-radio-button__option:not(:first-child) {
+  margin-left: var(--sd-radio-button-group-gap);
+}
+.sd-radio-button__option:first-child {
+  border-top-left-radius: var(--sd-radio-button-radius);
+  border-bottom-left-radius: var(--sd-radio-button-radius);
+}
+.sd-radio-button__option:last-child {
+  border-top-right-radius: var(--sd-radio-button-radius);
+  border-bottom-right-radius: var(--sd-radio-button-radius);
+}
+.sd-radio-button__option:only-child {
+  border-radius: var(--sd-radio-button-radius);
+}
+.sd-radio-button__option--selected {
+  background-color: var(--sd-radio-button-bg-select);
+  border-color: var(--sd-radio-button-border-select);
+  color: var(--sd-radio-button-content-select);
+  z-index: 1;
+}
+.sd-radio-button__option:hover:not(.sd-radio-button__option--disabled) {
+  background-color: var(--sd-radio-button-bg-hover);
+  border-color: var(--sd-radio-button-border-select);
+  color: var(--sd-radio-button-content-hover);
+  z-index: 2;
+}
+.sd-radio-button__option--disabled {
+  background-color: var(--sd-radio-button-bg-disabled);
+  border-color: var(--sd-radio-button-border-disabled);
+  color: var(--sd-radio-button-content-disabled);
+  cursor: not-allowed;
+}
+.sd-radio-button__label {
+  user-select: none;
+  -webkit-user-select: none;
+}

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-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

@@ -270,7 +270,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: 'b1b62a2e99fda1f0fbc4f8b3ede5af95a9ed09aa', 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: '91f30fd84c70010030813f2d0cd9e86939e185d7', 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.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;