@sellmate/design-system 1.0.78 → 1.1.0

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

@@ -0,0 +1,301 @@
+import { h } from "@stencil/core";
+import { KEY_VALUE_TABLE_LAYOUT, KEY_VALUE_TABLE_COLORS, KEY_VALUE_TABLE_TYPOGRAPHY, } from "./sd-key-value-table.config";
+export class SdKeyValueTable {
+    /**
+     * 2차원 배열. 외부 배열 = row, 내부 배열 = 한 row에 들어가는 [th|td] field들.
+     * 한 row에 여러 field를 넣으면 [th|td|th|td...] 형태로 렌더.
+     */
+    fields = [];
+    /**
+     * true이면 테이블 우측에 검색 버튼 패널을 표시. 클릭 시 `sdSearch` 이벤트 emit.
+     */
+    search = false;
+    /**
+     * true이면 테이블 상단 border-radius를 0으로 처리.
+     * 다른 요소(헤더, 탭 등) 하단에 붙여 쓸 때 사용.
+     */
+    useTop = false;
+    change;
+    searchEvent;
+    emit = (name, value) => {
+        this.change.emit({ name, value });
+    };
+    handleSearchClick = () => {
+        this.searchEvent.emit();
+    };
+    renderField(field) {
+        const onSdUpdate = (e) => this.emit(field.name, e.detail);
+        switch (field.type) {
+            case 'input':
+                return h("sd-input", { width: "100%", ...(field.options ?? {}), onSdUpdate: onSdUpdate });
+            case 'textarea':
+                return h("sd-textarea", { width: "100%", ...(field.options ?? {}), onSdUpdate: onSdUpdate });
+            case 'number-input':
+                return h("sd-number-input", { width: "100%", ...(field.options ?? {}), onSdUpdate: onSdUpdate });
+            case 'select':
+                return h("sd-select", { width: "100%", ...(field.options ?? {}), onSdUpdate: onSdUpdate });
+            case 'radio': {
+                const { value, direction, ...rest } = field.options ?? {};
+                return (h("sd-radio-group", { ...rest, value: value, direction: direction ?? 'horizontal', onSdUpdate: onSdUpdate }));
+            }
+            case 'checkbox': {
+                const { value, ...rest } = field.options ?? {};
+                return h("sd-checkbox", { ...rest, value: value, onSdUpdate: onSdUpdate });
+            }
+            case 'date-picker':
+                return h("sd-date-picker", { width: "100%", ...(field.options ?? {}), onSdUpdate: onSdUpdate });
+            case 'date-range-picker':
+                return (h("sd-date-range-picker", { width: "100%", ...(field.options ?? {}), onSdUpdate: onSdUpdate }));
+            case 'file-picker':
+                return h("sd-file-picker", { width: "100%", ...(field.options ?? {}), onSdUpdate: onSdUpdate });
+            case 'text':
+            default:
+                return h("span", { class: "sd-key-value-table__text" }, field.options?.value ?? '');
+        }
+    }
+    renderHelpIcon(helpText) {
+        return (h("span", { class: "sd-key-value-table__help" }, h("sd-tooltip", { icon: "helpOutline", iconSize: KEY_VALUE_TABLE_LAYOUT.helpIconSize, color: KEY_VALUE_TABLE_COLORS.helpIcon, trigger: "hover" }, helpText)));
+    }
+    /**
+     * 같은 컬럼 인덱스의 thRowSpan에 의해 가려지는 위치를 자동 계산.
+     * `skip[r][c] === true` 이면 row r의 c번째 field는 th 셀을 렌더하지 않음.
+     */
+    computeAutoSkipTh() {
+        const skips = this.fields.map(row => row.map(() => false));
+        this.fields.forEach((row, r) => {
+            row.forEach((f, c) => {
+                const span = f.thRowSpan && f.thRowSpan > 1 ? f.thRowSpan : 1;
+                if (span <= 1)
+                    return;
+                for (let dr = 1; dr < span; dr++) {
+                    const targetRow = skips[r + dr];
+                    if (targetRow && c < targetRow.length) {
+                        targetRow[c] = true;
+                    }
+                }
+            });
+        });
+        return skips;
+    }
+    /**
+     * 모든 row를 훑어 전체 컬럼 수를 계산.
+     * th/td 자체와 thColSpan/tdColSpan, hideTh, thRowSpan(autoSkip)을 모두 반영.
+     */
+    computeMaxCols(autoSkip) {
+        let max = 0;
+        this.fields.forEach((row, r) => {
+            let cols = 0;
+            row.forEach((f, c) => {
+                let thCols;
+                if (f.hideTh)
+                    thCols = 0;
+                else if (autoSkip[r]?.[c])
+                    thCols = 1;
+                else
+                    thCols = f.thColSpan && f.thColSpan > 1 ? f.thColSpan : 1;
+                const tdCols = f.tdColSpan && f.tdColSpan > 1 ? f.tdColSpan : 1;
+                cols += thCols + tdCols;
+            });
+            if (cols > max)
+                max = cols;
+        });
+        return max;
+    }
+    renderTh(field, r, c) {
+        const thRowSpan = field.thRowSpan && field.thRowSpan > 1 ? field.thRowSpan : undefined;
+        const thColSpan = field.thColSpan && field.thColSpan > 1 ? field.thColSpan : undefined;
+        const classObj = { 'sd-key-value-table__th': true };
+        if (typeof field.thClass === 'string') {
+            classObj[field.thClass] = true;
+        }
+        else if (Array.isArray(field.thClass)) {
+            field.thClass.forEach(cls => (classObj[cls] = true));
+        }
+        return (h("th", { key: `th-${r}-${c}`, class: classObj, style: field.thStyle, scope: "row", rowSpan: thRowSpan, colSpan: thColSpan }, h("div", { class: "sd-key-value-table__th-inner" }, h("span", { class: "sd-key-value-table__label" }, field.label, field.required && (h("sd-icon", { class: "sd-key-value-table__required", name: "star", size: KEY_VALUE_TABLE_LAYOUT.requiredIconSize, color: KEY_VALUE_TABLE_COLORS.required, label: "required" }))), field.helpText && this.renderHelpIcon(field.helpText))));
+    }
+    renderTd(field, r, c) {
+        const tdRowSpan = field.tdRowSpan && field.tdRowSpan > 1 ? field.tdRowSpan : undefined;
+        const tdColSpan = field.tdColSpan && field.tdColSpan > 1 ? field.tdColSpan : undefined;
+        return (h("td", { key: `td-${r}-${c}`, class: "sd-key-value-table__td", rowSpan: tdRowSpan, colSpan: tdColSpan }, h("div", { class: "sd-key-value-table__td-inner" }, h("slot", { name: `field-${field.name}` }, this.renderField(field)))));
+    }
+    warnDuplicateNames() {
+        const seen = new Set();
+        const dups = new Set();
+        this.fields.forEach(row => row.forEach(f => {
+            if (seen.has(f.name))
+                dups.add(f.name);
+            else
+                seen.add(f.name);
+        }));
+        if (dups.size > 0) {
+            console.warn(`[sd-key-value-table] Duplicate field name(s) detected: ${[...dups].join(', ')}. ` +
+                `Slot names ("field-{name}") and sdChange events rely on unique names.`);
+        }
+    }
+    render() {
+        if (!this.fields.length)
+            return null;
+        const cssVars = {
+            '--sd-kvt-row-height': `${KEY_VALUE_TABLE_LAYOUT.rowHeight}px`,
+            '--sd-kvt-th-width': `${KEY_VALUE_TABLE_LAYOUT.thWidth}px`,
+            '--sd-kvt-radius': `${KEY_VALUE_TABLE_LAYOUT.borderRadius}px`,
+            '--sd-kvt-padding-x': `${KEY_VALUE_TABLE_LAYOUT.paddingX}px`,
+            '--sd-kvt-padding-y': `${KEY_VALUE_TABLE_LAYOUT.paddingY}px`,
+            '--sd-kvt-gap': `${KEY_VALUE_TABLE_LAYOUT.gap}px`,
+            '--sd-kvt-label-gap': `${KEY_VALUE_TABLE_LAYOUT.labelGap}px`,
+            '--sd-kvt-border-width': `${KEY_VALUE_TABLE_LAYOUT.borderWidth}px`,
+            '--sd-kvt-border-color': KEY_VALUE_TABLE_COLORS.border,
+            '--sd-kvt-th-bg': KEY_VALUE_TABLE_COLORS.thBg,
+            '--sd-kvt-th-color': KEY_VALUE_TABLE_COLORS.thLabel,
+            '--sd-kvt-required-color': KEY_VALUE_TABLE_COLORS.required,
+            '--sd-kvt-td-bg': KEY_VALUE_TABLE_COLORS.tdBg,
+            '--sd-kvt-td-color': KEY_VALUE_TABLE_COLORS.tdText,
+            '--sd-kvt-label-font-family': KEY_VALUE_TABLE_TYPOGRAPHY.labelFontFamily,
+            '--sd-kvt-label-font-size': `${KEY_VALUE_TABLE_TYPOGRAPHY.labelFontSize}px`,
+            '--sd-kvt-label-font-weight': `${KEY_VALUE_TABLE_TYPOGRAPHY.labelFontWeight}`,
+            '--sd-kvt-label-line-height': `${KEY_VALUE_TABLE_TYPOGRAPHY.labelLineHeight}px`,
+            '--sd-kvt-td-font-family': KEY_VALUE_TABLE_TYPOGRAPHY.tdFontFamily,
+            '--sd-kvt-td-font-size': `${KEY_VALUE_TABLE_TYPOGRAPHY.tdFontSize}px`,
+            '--sd-kvt-td-font-weight': `${KEY_VALUE_TABLE_TYPOGRAPHY.tdFontWeight}`,
+            '--sd-kvt-td-line-height': `${KEY_VALUE_TABLE_TYPOGRAPHY.tdLineHeight}px`,
+            '--sd-kvt-search-bg': KEY_VALUE_TABLE_COLORS.searchBg,
+            '--sd-kvt-search-padding-x': `${KEY_VALUE_TABLE_LAYOUT.searchPaddingX}px`,
+        };
+        this.warnDuplicateNames();
+        const autoSkip = this.computeAutoSkipTh();
+        const maxCols = this.computeMaxCols(autoSkip);
+        const tableEl = (h("table", { class: {
+                'sd-key-value-table': true,
+                'sd-key-value-table--use-top': this.useTop,
+            }, style: cssVars }, h("colgroup", null, Array.from({ length: maxCols }, (_, i) => (h("col", { key: `col-${i}`, style: i % 2 === 0 ? { width: `${KEY_VALUE_TABLE_LAYOUT.thWidth}px` } : undefined })))), h("tbody", null, this.fields.map((row, r) => (h("tr", { class: "sd-key-value-table__row", key: `row-${r}` }, row.map((field, c) => {
+            const showTh = !field.hideTh && !autoSkip[r][c];
+            return [showTh ? this.renderTh(field, r, c) : null, this.renderTd(field, r, c)];
+        })))))));
+        if (!this.search)
+            return tableEl;
+        return (h("div", { class: {
+                'sd-key-value-table__wrapper': true,
+                'sd-key-value-table__wrapper--use-top': this.useTop,
+            }, style: cssVars }, tableEl, h("div", { class: "sd-key-value-table__search-panel" }, h("sd-button", { label: "\uAC80\uC0C9", name: "neutral_outline_md", onSdClick: this.handleSearchClick }))));
+    }
+    static get is() { return "sd-key-value-table"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sd-key-value-table.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sd-key-value-table.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "fields": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SdKeyValueField[][]",
+                    "resolved": "SdKeyValueField[][]",
+                    "references": {
+                        "SdKeyValueField": {
+                            "location": "import",
+                            "path": "./sd-key-value-table.config",
+                            "id": "src/components/sd-key-value-table/sd-key-value-table.config.ts::SdKeyValueField",
+                            "referenceLocation": "SdKeyValueField"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "2\uCC28\uC6D0 \uBC30\uC5F4. \uC678\uBD80 \uBC30\uC5F4 = row, \uB0B4\uBD80 \uBC30\uC5F4 = \uD55C row\uC5D0 \uB4E4\uC5B4\uAC00\uB294 [th|td] field\uB4E4.\n\uD55C row\uC5D0 \uC5EC\uB7EC field\uB97C \uB123\uC73C\uBA74 [th|td|th|td...] \uD615\uD0DC\uB85C \uB80C\uB354."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "search": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "true\uC774\uBA74 \uD14C\uC774\uBE14 \uC6B0\uCE21\uC5D0 \uAC80\uC0C9 \uBC84\uD2BC \uD328\uB110\uC744 \uD45C\uC2DC. \uD074\uB9AD \uC2DC `sdSearch` \uC774\uBCA4\uD2B8 emit."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "search",
+                "defaultValue": "false"
+            },
+            "useTop": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "true\uC774\uBA74 \uD14C\uC774\uBE14 \uC0C1\uB2E8 border-radius\uB97C 0\uC73C\uB85C \uCC98\uB9AC.\n\uB2E4\uB978 \uC694\uC18C(\uD5E4\uB354, \uD0ED \uB4F1) \uD558\uB2E8\uC5D0 \uBD99\uC5EC \uC4F8 \uB54C \uC0AC\uC6A9."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "use-top",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "change",
+                "name": "sdChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "SdKeyValueChangeDetail",
+                    "resolved": "SdKeyValueChangeDetail",
+                    "references": {
+                        "SdKeyValueChangeDetail": {
+                            "location": "import",
+                            "path": "./sd-key-value-table.config",
+                            "id": "src/components/sd-key-value-table/sd-key-value-table.config.ts::SdKeyValueChangeDetail",
+                            "referenceLocation": "SdKeyValueChangeDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "searchEvent",
+                "name": "sdSearch",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}

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

@@ -28,7 +28,7 @@ export class SdLinearProgress {
             clipPath: `inset(0 ${100 - this.clampedValue}% 0 0)`,
         };
         const valueText = `${Math.round(this.clampedValue)}%`;
-        return (h(Host, { key: 'c7f2324ff98e1ec6e0d1d6c7a3328dd383a1abab', style: hostStyle }, h("div", { key: 'cff100404519c4114c0dd1240715beafb91acf1f', class: 'sd-linear-progress__track' }, h("div", { key: '1c7fdff123778a40cd0c3f3310141ac369205352', class: 'sd-linear-progress__fill', style: fillStyle }), !this.indeterminate && (h("span", { key: 'ae0b515a9bb9d5561d603fa8e88c144603af8af5', class: 'sd-linear-progress__value sd-linear-progress__value--on-track' }, valueText)), !this.indeterminate && (h("span", { key: '5d7cdf9daccd9729729bec7bc65456b5727d4738', class: 'sd-linear-progress__value sd-linear-progress__value--on-fill', style: valueOnFillStyle }, valueText))), this.label && h("span", { key: 'd131eeb581e33f40878b47541f662aca269a6759', class: 'sd-linear-progress__label' }, this.label)));
+        return (h(Host, { key: '58849d88024bc69ab0260bdf32f461fdfb87c93c', style: hostStyle }, h("div", { key: 'a4370fbc94bdf7b51d4a27f85ca86606c3770cdb', class: 'sd-linear-progress__track' }, h("div", { key: 'e270357433247981f8374a0345cb2d3ba8d4cfca', class: 'sd-linear-progress__fill', style: fillStyle }), !this.indeterminate && (h("span", { key: 'baa77fe44a7129330e8fe70b8aa2e8bc6fd4b703', class: 'sd-linear-progress__value sd-linear-progress__value--on-track' }, valueText)), !this.indeterminate && (h("span", { key: '46a73b233ea34c1d9ac242140abe3b1e5831d484', class: 'sd-linear-progress__value sd-linear-progress__value--on-fill', style: valueOnFillStyle }, valueText))), this.label && h("span", { key: '91d5c9cc27960c7448706e641028bcc8f893b805', class: 'sd-linear-progress__label' }, this.label)));
     }
     static get is() { return "sd-linear-progress"; }
     static get originalStyleUrls() {

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

@@ -10,10 +10,10 @@ export class SdLoadingContainer {
         this.visible = false;
     }
     render() {
-        return (h("div", { key: 'a83b33262d59ecba12b7db9ed6bfe9f1fea4a54a', class: {
+        return (h("div", { key: '1c684984ec7203edb4206690026cf8085bfadcfb', class: {
                 'sd-loading-container': true,
                 'sd-loading-container--visible': this.visible,
-            }, "aria-hidden": this.visible ? 'false' : 'true' }, h("div", { key: '64631929afd47606df0d397747495d2a11d62932', class: "sd-loading-container__backdrop" }), h("div", { key: '4a304e0fb66f720b57da1e4de03fa9aa5468d5d4', class: "sd-loading-container__content" }, h("sd-circle-progress", { key: '3981cb8e994384279a812864037a8e9cec34cc35', indeterminate: true, type: "inverse" }), this.message && (h("p", { key: '8adec0ef2424fa3ea30a58b27efa6344ada94070', class: "sd-loading-container__message" }, this.message)))));
+            }, "aria-hidden": this.visible ? 'false' : 'true' }, h("div", { key: '42a7d3b6c0f562cbfd1a0928a3df4df3cc962299', class: "sd-loading-container__backdrop" }), h("div", { key: 'ce11d0950e5047eb47ae87f41bf7c049a2e18cbc', class: "sd-loading-container__content" }, h("sd-circle-progress", { key: 'e6f63c78da63cf660942137e73cef389789e83b0', indeterminate: true, type: "inverse" }), this.message && (h("p", { key: '139b648a8a8007a050f6e81374930f92d676707c', class: "sd-loading-container__message" }, this.message)))));
     }
     static get is() { return "sd-loading-container"; }
     static get originalStyleUrls() {

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

@@ -8,11 +8,14 @@ export class SdLoadingModal {
     width;
     height;
     click;
+    get resolvedState() {
+        return this.state ?? 'loading';
+    }
     get resolvedMessage() {
-        return this.message || LOADING_MODAL_DEFAULT_MESSAGE[this.state];
+        return this.message || LOADING_MODAL_DEFAULT_MESSAGE[this.resolvedState];
     }
     get resolvedButtonLabel() {
-        return this.buttonLabel || LOADING_MODAL_DEFAULT_BUTTON_LABEL[this.state];
+        return this.buttonLabel || LOADING_MODAL_DEFAULT_BUTTON_LABEL[this.resolvedState];
     }
     handleClick = () => {
         this.click.emit();
@@ -42,7 +45,7 @@ export class SdLoadingModal {
             '--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: '4245588093d82ec791b4ba7260eb3a1314c0e7a8', style: hostStyle }, h("div", { key: '4ad4c57bf68a5e33b453ed5ebb19f590f2ff8a9d', class: "sd-loading-modal" }, h("div", { key: 'bd45817bad45b9cffc9917d5f6570cb7409e8703', 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("div", { key: '16a09029e732058a4cdf0330e4afaf7322a88f76', class: "sd-loading-modal__message-wrapper" }, Array.isArray(this.resolvedMessage) ? (this.resolvedMessage.map(message => (h("p", { class: "sd-loading-modal__message" }, message)))) : (h("p", { class: "sd-loading-modal__message" }, this.resolvedMessage))), this.useButton && (h("div", { key: 'cdf9a51d233efcc86fa2405960f2ed304a07127b', class: "sd-loading-modal__button" }, h("sd-button-v2", { key: '36cd4b36d92fb725eb35a9d6bee7fd0c8fcf3395', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
+        return (h(Host, { key: 'a653095ef804a24fbc3c4a0e65d22971b537a9bf', style: hostStyle }, h("div", { key: '38a1a83501a707de8a431b38cd3e5525565fca5d', class: "sd-loading-modal" }, h("div", { key: '81ddeebfffa70bcc84fc3b2a02fb3d70441645c4', class: "sd-loading-modal__content" }, this.resolvedState === '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("div", { key: 'db87e7d46fcc6bfd07ce4191819e5e28051489b7', class: "sd-loading-modal__message-wrapper" }, Array.isArray(this.resolvedMessage) ? (this.resolvedMessage.map(message => (h("p", { class: "sd-loading-modal__message" }, message)))) : (h("p", { class: "sd-loading-modal__message" }, this.resolvedMessage))), this.useButton && (h("div", { key: '20134aca743319ea4e03e1b8a0359b92a3bdb0af', class: "sd-loading-modal__button" }, h("sd-button", { key: 'c6951624f69519d712bfdd619fd6b22216ecad87', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
     }
     static get is() { return "sd-loading-modal"; }
     static get originalStyleUrls() {

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

@@ -7,12 +7,16 @@ sd-number-input .sd-number-input__content {
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
+  gap: var(--sd-number-input-padding-x);
   color: var(--sd-number-input-text-color);
   font-size: var(--sd-number-input-font-size);
   line-height: var(--sd-number-input-line-height);
   font-weight: var(--sd-number-input-font-weight);
   padding: 0 var(--sd-number-input-padding-x);
 }
+sd-number-input .sd-number-input__content--no-stepper {
+  padding: 0 calc(var(--sd-number-input-padding-x) * 2);
+}
 sd-number-input .sd-number-input__content .sd-number-input__native {
   width: 100%;
   height: 100%;
@@ -31,6 +35,9 @@ sd-number-input .sd-number-input__content .sd-number-input__native[disabled] {
   cursor: not-allowed;
   color: var(--sd-number-input-disabled-color);
 }
+sd-number-input .sd-number-input__content .sd-number-input__native[readonly] {
+  color: var(--sd-system-color-field-text-read-only);
+}
 sd-number-input .sd-number-input__content .sd-number-input__native::placeholder {
   color: var(--sd-number-input-placeholder-color);
 }

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

@@ -272,12 +272,15 @@ 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: '7f4012ec048ab69f3c6b241c7fc103fd798572ca', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, 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: '975c0800b1fd6e4ab3502fc966db8917fe60bb3e', class: "sd-number-input__content" }, this.useButton && (h("button", { key: 'f2a630109b883740362dd2946ceeeaa93bbfeb36', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: 'dcd539c5035b1363edacadf7ed9c1096ef24714a', name: "minus", size: iconSize, color: this.isDecrementDisabled()
+        return (h("sd-field", { key: 'ea9194c50e91def94838d1e886e934944a1fd78d', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, 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: '4e65dcfe630b21a7683afebf595f66aca04f5c8c', class: {
+                'sd-number-input__content': true,
+                'sd-number-input__content--no-stepper': !this.useButton,
+            } }, this.useButton && (h("button", { key: 'ee387b4a602007b98e1ebd8cb1ab9a0dd11dfc9d', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: 'a98dd85c4a0c160e8668731d79b4718d8acb989f', name: "minus", size: iconSize, color: this.isDecrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
-                : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && (h("span", { key: '5acf113c5e60dd5f77fb1206a60d4b5ce14e2b7f', class: "sd-number-input__prefix" }, this.inputPrefix)), h("input", { key: '5dd0f9ba9643fce07de811b2a93c8763a3d84b2c', 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: 'b49392e692e2349fd9620d39b15c8531bc5ae240', class: "sd-number-input__prefix" }, this.inputPrefix)), h("input", { key: '7128b540d479d6500cfa05782c49b0e06cd999e7', 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: 'aa7e4dbb29d7e8de4e94f0411f2f4b622411a60a', class: "sd-number-input__suffix" }, this.inputSuffix)), this.useButton && (h("button", { key: '40deeadfcfe87cb61f09ee2959b6afb5757ff56b', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: 'b8ffcbbf663bacb7249e696d3eabf8b9ac832ddc', name: "add", size: iconSize, color: this.isIncrementDisabled()
+            } }), this.inputSuffix && (h("span", { key: 'e9902ba6872e4a10bcd1106c588e231973632f51', class: "sd-number-input__suffix" }, this.inputSuffix)), this.useButton && (h("button", { key: '297ad8b506e904ba27f3f19beebe7fa503950f7b', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: '2f74f2a161d6700981f33b3d1df3bad76b3df87b', 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

@@ -83,13 +83,13 @@ export class SdPagination {
             '--sd-pagination-bg-selected': PAGINATION_COLORS.bgSelected,
             '--sd-pagination-item-width': `${this.buttonWidth}px`,
         };
-        return (h("div", { key: 'e648886fbec4723b7be767d9e1bfc04004cca234', class: {
+        return (h("div", { key: '0a99cc2b09de2f2a893fe88eaee535dc2f39505d', class: {
                 'sd-pagination': true,
                 'sd-pagination--simple': this.simple,
-            }, style: cssVars }, h("div", { key: '43ff8b8f6682c4d2b70c5085a6d3199de1d01596', class: "sd-pagination__group sd-pagination__group--prev" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "sd-pagination__info" }, h("span", { class: "sd-pagination__current" }, this.currentPage), h("span", { class: "sd-pagination__divider" }, "/"), h("span", { class: "sd-pagination__last" }, this.lastPage))) : (h("div", { class: "sd-pagination__numbers" }, this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
+            }, style: cssVars }, h("div", { key: 'ba4e726a23e572c788c8c68689e656a07f21f46e', class: "sd-pagination__group sd-pagination__group--prev" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "sd-pagination__info" }, h("span", { class: "sd-pagination__current" }, this.currentPage), h("span", { class: "sd-pagination__divider" }, "/"), h("span", { class: "sd-pagination__last" }, this.lastPage))) : (h("div", { class: "sd-pagination__numbers" }, this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
                 'sd-pagination__item': true,
                 'sd-pagination__item--selected': this.currentPage === n,
-            }, onClick: () => this.handlePageChange(n) }, n))))), h("div", { key: '1975d14028485438a728b23d717abfcde8722fcf', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n))))), h("div", { key: 'e3276583ab382b988ac2961e8c67c431d5c4495e', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
     }
     static get is() { return "sd-pagination"; }
     static get originalStyleUrls() {