@sellmate/design-system 1.0.62 → 1.0.64

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

@@ -0,0 +1,184 @@
+import { Host, h } from "@stencil/core";
+import { LOADING_MODAL_BUTTON_PRESET, LOADING_MODAL_COLORS, LOADING_MODAL_DEFAULT_BUTTON_LABEL, LOADING_MODAL_DEFAULT_MESSAGE, LOADING_MODAL_LAYOUT, LOADING_MODAL_TYPOGRAPHY, } from "./sd-loading-modal.config";
+export class SdLoadingModal {
+    state = 'loading';
+    message = '';
+    buttonLabel = '';
+    width;
+    height;
+    click;
+    get resolvedMessage() {
+        return this.message || LOADING_MODAL_DEFAULT_MESSAGE[this.state];
+    }
+    get resolvedButtonLabel() {
+        return this.buttonLabel || LOADING_MODAL_DEFAULT_BUTTON_LABEL[this.state];
+    }
+    handleClick = () => {
+        this.click.emit();
+    };
+    toCssSize(value) {
+        if (value === undefined || value === null || value === '')
+            return undefined;
+        return typeof value === 'number' ? `${value}px` : value;
+    }
+    render() {
+        const cssVars = {
+            '--sd-loading-modal-min-width': `${LOADING_MODAL_LAYOUT.minWidth}px`,
+            '--sd-loading-modal-min-height': `${LOADING_MODAL_LAYOUT.minHeight}px`,
+            '--sd-loading-modal-gap': `${LOADING_MODAL_LAYOUT.gap}px`,
+            '--sd-loading-modal-content-size': `${LOADING_MODAL_LAYOUT.contentSize}px`,
+            '--sd-loading-modal-radius': `${LOADING_MODAL_LAYOUT.radius}px`,
+            '--sd-loading-modal-bg': LOADING_MODAL_COLORS.bg,
+            '--sd-loading-modal-message-color': LOADING_MODAL_COLORS.messageColor,
+            '--sd-loading-modal-message-font-family': LOADING_MODAL_TYPOGRAPHY.fontFamily,
+            '--sd-loading-modal-message-font-size': `${LOADING_MODAL_TYPOGRAPHY.fontSize}px`,
+            '--sd-loading-modal-message-font-weight': `${LOADING_MODAL_TYPOGRAPHY.fontWeight}`,
+            '--sd-loading-modal-message-line-height': `${LOADING_MODAL_TYPOGRAPHY.lineHeight}px`,
+            '--sd-loading-modal-error-color': LOADING_MODAL_COLORS.errorIcon,
+        };
+        const hostStyle = {
+            ...cssVars,
+            '--sd-loading-modal-width': this.toCssSize(this.width) ?? `${LOADING_MODAL_LAYOUT.minWidth}px`,
+            '--sd-loading-modal-height': this.toCssSize(this.height) ?? `${LOADING_MODAL_LAYOUT.minHeight}px`,
+        };
+        return (h(Host, { key: 'dcc53b3421a88970ce4ad8258285a896da0e400c', style: hostStyle }, h("div", { key: 'bb2319b861392c8a88587b7654f2c6227b226cc7', class: "sd-loading-modal" }, h("div", { key: 'f3064846c06d2cd1e9d2474dc16fe80773c4a8f7', class: "sd-loading-modal__content" }, this.state === 'loading' ? (h("sd-circle-progress", { indeterminate: true })) : (h("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), h("p", { key: '932c71930b4484d652266f85556e7eb2195a81c9', class: "sd-loading-modal__message" }, this.resolvedMessage), h("div", { key: 'e06cfa7729b72f881789d573f38116ac5086e062', class: "sd-loading-modal__button" }, h("sd-button-v2", { key: '63684aa367e552df0e020ce4766d6c34c1361427', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick })))));
+    }
+    static get is() { return "sd-loading-modal"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sd-loading-modal.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sd-loading-modal.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "LoadingModalState",
+                    "resolved": "\"error\" | \"loading\"",
+                    "references": {
+                        "LoadingModalState": {
+                            "location": "import",
+                            "path": "./sd-loading-modal.config",
+                            "id": "src/components/sd-loading-modal/sd-loading-modal.config.ts::LoadingModalState",
+                            "referenceLocation": "LoadingModalState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "state",
+                "defaultValue": "'loading'"
+            },
+            "message": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "message",
+                "defaultValue": "''"
+            },
+            "buttonLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "button-label",
+                "defaultValue": "''"
+            },
+            "width": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width"
+            },
+            "height": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "height"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "click",
+                "name": "sdClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}

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

@@ -11,6 +11,7 @@ export class SdNumberInput {
     useDecimal = false;
     value = null;
     label;
+    labelWidth = '';
     addonLabel = '';
     placeholder = '입력해 주세요.';
     disabled = false;
@@ -244,7 +245,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 +271,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: 'f81b01b27960130cbf6b37a29fc0ddc11750768e', name: this.name, 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, status: this.status, size: this.size, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: '0f9b5a0b966c7d51d5913c61a585ff789fa4973f', class: "sd-number-input__content" }, this.useButton && (h("button", { key: 'b037ee3062253bf229f9639dd04c7475657fabb6', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: '39a9f73a15008a481e758e663e027cd4f6454146', 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: '050334ce25bb767e7f11dca886d4aeecaa1ed3dc', class: "sd-number-input__prefix" }, this.inputPrefix)), h("input", { key: 'a72697d136eeee52ef23fee6ee2017b6dd37e54c', 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: '845202622b3377add18782d96d0af0c49caf95ec', class: "sd-number-input__suffix" }, this.inputSuffix)), this.useButton && (h("button", { key: '208c976c1b755bec0cd7efb5ceacb3e07dce3a7d', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: 'fe9848c8f044d01378dc183a80d3f81eb56a67f9', name: "add", size: iconSize, color: this.isIncrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
                 : NUMBER_INPUT_STEPPER.icon.default }))))));
     }
@@ -459,6 +459,26 @@ export class SdNumberInput {
                 "reflect": false,
                 "attribute": "label"
             },
+            "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-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;
+}