@sellmate/design-system 1.28.0 → 1.31.0

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

@@ -6,6 +6,12 @@ export class SdKeyValueTable {
      * 한 row에 여러 field를 넣으면 [th|td|th|td...] 형태로 렌더.
      */
     fields = [];
+    /**
+     * field name을 key로 하는 값 객체 (`{ [name]: value }`).
+     * 지정 시 해당 field의 값으로 사용되며, field별 `options.value`보다 우선합니다.
+     * `sdChange`의 `detail.values`와 함께 controlled 패턴으로 사용합니다.
+     */
+    values = {};
     /**
      * true이면 테이블 우측에 검색 버튼 패널을 표시. 클릭 시 `sdSearch` 이벤트 emit.
      */
@@ -17,44 +23,57 @@ export class SdKeyValueTable {
      * - 'full': 상하단 모두 radius 0 (요소 사이에 끼워 쓸 때)
      */
     radius = 'default';
-    /** 필드 값이 변경될 때 `{ name, value }` 형태로 발생합니다. */
+    /** 필드 값이 변경될 때 `{ name, value, values }` 형태로 발생합니다. `values`는 갱신된 전체 값 객체입니다. */
     change;
     /** search 패널의 검색 버튼 클릭 시 발생합니다. */
     searchEvent;
     emit = (name, value) => {
-        this.change.emit({ name, value });
+        this.change.emit({
+            name,
+            value: value,
+            values: { ...this.values, [name]: value },
+        });
     };
+    /** values prop이 해당 field를 가지면 그 값을, 없으면 field.options.value를 사용. */
+    resolveOptions(field) {
+        const options = { ...(field.options ?? {}) };
+        if (Object.prototype.hasOwnProperty.call(this.values, field.name)) {
+            options.value = this.values[field.name];
+        }
+        return options;
+    }
     handleSearchClick = () => {
         this.searchEvent.emit();
     };
     renderField(field) {
         const onSdUpdate = (e) => this.emit(field.name, e.detail);
+        const options = this.resolveOptions(field);
         switch (field.type) {
             case 'input':
-                return h("sd-input", { width: "100%", ...(field.options ?? {}), onSdUpdate: onSdUpdate });
+                return h("sd-input", { width: "100%", ...options, onSdUpdate: onSdUpdate });
             case 'textarea':
-                return h("sd-textarea", { width: "100%", ...(field.options ?? {}), onSdUpdate: onSdUpdate });
+                return h("sd-textarea", { width: "100%", ...options, onSdUpdate: onSdUpdate });
             case 'number-input':
-                return h("sd-number-input", { width: "100%", ...(field.options ?? {}), onSdUpdate: onSdUpdate });
+                return h("sd-number-input", { width: "100%", ...options, onSdUpdate: onSdUpdate });
             case 'select':
-                return h("sd-select", { width: "100%", ...(field.options ?? {}), onSdUpdate: onSdUpdate });
+                return h("sd-select", { width: "100%", ...options, onSdUpdate: onSdUpdate });
             case 'radio': {
-                const { value, direction, ...rest } = field.options ?? {};
+                const { value, direction, ...rest } = options;
                 return (h("sd-radio-group", { ...rest, value: value, direction: direction ?? 'horizontal', onSdUpdate: onSdUpdate }));
             }
             case 'checkbox': {
-                const { value, ...rest } = field.options ?? {};
+                const { value, ...rest } = options;
                 return h("sd-checkbox", { ...rest, value: value, onSdUpdate: onSdUpdate });
             }
             case 'date-picker':
-                return h("sd-date-picker", { width: "100%", ...(field.options ?? {}), onSdUpdate: onSdUpdate });
+                return h("sd-date-picker", { width: "100%", ...options, onSdUpdate: onSdUpdate });
             case 'date-range-picker':
-                return (h("sd-date-range-picker", { width: "100%", ...(field.options ?? {}), onSdUpdate: onSdUpdate }));
+                return h("sd-date-range-picker", { width: "100%", ...options, onSdUpdate: onSdUpdate });
             case 'file-picker':
-                return h("sd-file-picker", { width: "100%", ...(field.options ?? {}), onSdUpdate: onSdUpdate });
+                return h("sd-file-picker", { width: "100%", ...options, onSdUpdate: onSdUpdate });
             case 'text':
             default:
-                return h("span", { class: "sd-key-value-table__text" }, field.options?.value ?? '');
+                return h("span", { class: "sd-key-value-table__text" }, options.value ?? '');
         }
     }
     renderHelpIcon(helpText) {
@@ -143,7 +162,13 @@ export class SdKeyValueTable {
     renderTd(field, r, c) {
         const tdRowSpan = field.tdRowSpan != null && field.tdRowSpan > 1 ? field.tdRowSpan : undefined;
         const tdColSpan = field.tdColSpan != null && 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)))));
+        // text 타입(및 미지정 기본값)은 읽기 전용 콘텐츠라 넓은 paddingX(wide) 적용.
+        // 폼 필드 셀은 default paddingX 유지.
+        const isText = field.type == null || field.type === 'text';
+        return (h("td", { key: `td-${r}-${c}`, class: {
+                'sd-key-value-table__td': true,
+                'sd-key-value-table__td--text': isText,
+            }, 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();
@@ -168,6 +193,8 @@ export class SdKeyValueTable {
             '--sd-kvt-radius': `${KEY_VALUE_TABLE_LAYOUT.borderRadius}px`,
             '--sd-kvt-th-padding-x': `${KEY_VALUE_TABLE_LAYOUT.thPaddingX}px`,
             '--sd-kvt-padding': `${KEY_VALUE_TABLE_LAYOUT.padding}px`,
+            '--sd-kvt-td-padding-x': `${KEY_VALUE_TABLE_LAYOUT.tdPaddingX}px`,
+            '--sd-kvt-td-padding-x-wide': `${KEY_VALUE_TABLE_LAYOUT.tdPaddingXWide}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`,
@@ -260,6 +287,29 @@ export class SdKeyValueTable {
                 "setter": false,
                 "defaultValue": "[]"
             },
+            "values": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Record<string, unknown>",
+                    "resolved": "string | unknown",
+                    "references": {
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "field name\uC744 key\uB85C \uD558\uB294 \uAC12 \uAC1D\uCCB4 (`{ [name]: value }`).\n\uC9C0\uC815 \uC2DC \uD574\uB2F9 field\uC758 \uAC12\uC73C\uB85C \uC0AC\uC6A9\uB418\uBA70, field\uBCC4 `options.value`\uBCF4\uB2E4 \uC6B0\uC120\uD569\uB2C8\uB2E4.\n`sdChange`\uC758 `detail.values`\uC640 \uD568\uAED8 controlled \uD328\uD134\uC73C\uB85C \uC0AC\uC6A9\uD569\uB2C8\uB2E4."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{}"
+            },
             "search": {
                 "type": "boolean",
                 "mutable": false,
@@ -311,11 +361,11 @@ export class SdKeyValueTable {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "\uD544\uB4DC \uAC12\uC774 \uBCC0\uACBD\uB420 \uB54C `{ name, value }` \uD615\uD0DC\uB85C \uBC1C\uC0DD\uD569\uB2C8\uB2E4."
+                    "text": "\uD544\uB4DC \uAC12\uC774 \uBCC0\uACBD\uB420 \uB54C `{ name, value, values }` \uD615\uD0DC\uB85C \uBC1C\uC0DD\uD569\uB2C8\uB2E4. `values`\uB294 \uAC31\uC2E0\uB41C \uC804\uCCB4 \uAC12 \uAC1D\uCCB4\uC785\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "SdKeyValueChangeDetail",
-                    "resolved": "SdKeyValueChangeDetail",
+                    "resolved": "SdKeyValueChangeDetail<Record<string, SdKeyValueFieldValue>>",
                     "references": {
                         "SdKeyValueChangeDetail": {
                             "location": "import",

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

@@ -31,7 +31,7 @@ export class SdLinearProgress {
             clipPath: `inset(0 ${100 - this.clampedValue}% 0 0)`,
         };
         const valueText = `${Math.round(this.clampedValue)}%`;
-        return (h(Host, { key: 'c87705d4ca2e7d61de15412af8df8fe32aec6e56', style: hostStyle }, h("div", { key: '0343b5d209cf49e7d25bb7ede349eae791890e29', class: "sd-linear-progress__track" }, h("div", { key: '7771c6589c061d7bba7eb2ae88e1752d80912357', class: "sd-linear-progress__fill", style: fillStyle }), !this.indeterminate && (h("span", { key: '66f85b9d5f87d7c2aeafd6eadcdc3fb1739124c9', class: "sd-linear-progress__value sd-linear-progress__value--on-track" }, valueText)), !this.indeterminate && (h("span", { key: 'd8581b453770e4c8db55abddc6c57f9b90701786', class: "sd-linear-progress__value sd-linear-progress__value--on-fill", style: valueOnFillStyle }, valueText))), this.label && h("span", { key: '4223bfa7292cc9adeb9dca1ce18ee45cefc8d670', class: "sd-linear-progress__label" }, this.label)));
+        return (h(Host, { key: 'bb8b4b933b609a42d1c342b7b480d32a48527321', style: hostStyle }, h("div", { key: 'd127baf4c4cf49d5c6e04ada72636c9d3fd81733', class: "sd-linear-progress__track" }, h("div", { key: '6251da38b070cf9f064b22ed1ecb694da41f63ec', class: "sd-linear-progress__fill", style: fillStyle }), !this.indeterminate && (h("span", { key: '7b15d0383e4cc391a22e4fc7e2a85bc6cd076f80', class: "sd-linear-progress__value sd-linear-progress__value--on-track" }, valueText)), !this.indeterminate && (h("span", { key: '8755f23a83aede79a141a14b73337eacca0fc10d', class: "sd-linear-progress__value sd-linear-progress__value--on-fill", style: valueOnFillStyle }, valueText))), this.label && h("span", { key: 'c874dd1ca0cb86c90a84c318790639c0f4283255', 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

@@ -32,10 +32,10 @@ export class SdLoadingContainer {
         this.prevBodyOverflow = null;
     }
     render() {
-        return (h("div", { key: 'c2dad1bed0e513341a447f164fecbb2f879ed523', class: {
+        return (h("div", { key: 'c7821d4c50651217e48f424cbdfb9a32006afda4', class: {
                 'sd-loading-container': true,
                 'sd-loading-container--visible': this.visible,
-            }, "aria-hidden": this.visible ? 'false' : 'true' }, h("div", { key: '254c3cb5eeb25b6c69b3812fbaada2a26d6620e0', class: "sd-loading-container__backdrop" }), h("div", { key: '58ca4033b25302d8a7ea3f25e6b5e8aa7ce9f51c', class: "sd-loading-container__content" }, h("sd-circle-progress", { key: 'c8d48fa1814186a674d3f7c8b63bcd26541299ba', indeterminate: true, type: "inverse" }), this.message && h("p", { key: '899a5f32ceecb23b4f88b750aa634106bb42b394', class: "sd-loading-container__message" }, this.message))));
+            }, "aria-hidden": this.visible ? 'false' : 'true' }, h("div", { key: 'f7674699f3dd15edd74fc3224203b59ad2a96735', class: "sd-loading-container__backdrop" }), h("div", { key: 'cd361e1a1f470109298459cc2872be104e382015', class: "sd-loading-container__content" }, h("sd-circle-progress", { key: 'c856a1e9ab203040dd8bf0d01dbdf151718aaa3e', indeterminate: true, type: "inverse" }), this.message && h("p", { key: '8af15dba086fb024b652db5f776d384f00fd9cf7', 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

@@ -60,7 +60,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: '71bec4b63fc71720dfc10daecab4e63b8fc12b68', style: hostStyle }, h("div", { key: '20f67d5f61a7c7150b236ebe13fecb345b5a20be', class: "sd-loading-modal" }, this.resolvedState === 'error' && (h("sd-ghost-button", { key: '395097aa0cbf7c277f7669bdc01fe756316ba4a0', class: "sd-loading-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), h("div", { key: '6942b24672bf59b7c7f34bab0cce38b3d0e477f7', class: "sd-loading-modal__content" }, this.resolvedState === 'loading' ? (this.progress !== undefined ? (h("sd-circle-progress", { value: this.progress })) : (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: '5dd0e24f06c8283b1baa7eeadf6547a96ecc784e', 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.showButton && (h("div", { key: 'b686ab5f29a9a61520ba5a43f9d214f37c1a90d7', class: "sd-loading-modal__button" }, h("sd-button", { key: '2378b8f300538c9aab8775a526104acd6089b580', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
+        return (h(Host, { key: 'c6b6406cc751cfc007f6fbff72580a22b2975c03', style: hostStyle }, h("div", { key: '139b7397598768e526275dc8b508a333ba1e6058', class: "sd-loading-modal" }, this.resolvedState === 'error' && (h("sd-ghost-button", { key: '098c693d5da0c333fb06309be5371a5e8a6c3016', class: "sd-loading-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), h("div", { key: 'f072a17c4c8e47e296cbf52d34414a32efa6aaa1', class: "sd-loading-modal__content" }, this.resolvedState === 'loading' ? (this.progress !== undefined ? (h("sd-circle-progress", { value: this.progress })) : (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: 'a2c501cfee2181b2a7dda2544e03bf1a709baaf3', 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.showButton && (h("div", { key: 'e9d1beef80bf8fa4a0647802ce4a6e023e74bc12', class: "sd-loading-modal__button" }, h("sd-button", { key: '63a64f356fc09cbaf56ff715d04c97b208f63945', 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-modal-container/sd-modal-container.js

@@ -249,7 +249,21 @@ export class SdModalContainer {
         if (this.hasOwnProp(options, 'bottomMessage'))
             el.bottomMessage = options.bottomMessage ?? [];
         if (this.hasOwnProp(options, 'tagContents'))
-            el.tagContents = options.tagContents;
+            this.setSlotContent(el, 'tag', options.tagContents);
+        if (this.hasOwnProp(options, 'optionContents')) {
+            this.setSlotContent(el, 'option', options.optionContents);
+        }
+    }
+    /** confirm 모달의 named slot(tag/option) 위치에 HTMLElement 를 light-DOM 으로 주입한다. */
+    setSlotContent(el, slot, content) {
+        Array.from(el.children).forEach(child => {
+            if (child.getAttribute('slot') === slot)
+                child.remove();
+        });
+        if (content) {
+            content.setAttribute('slot', slot);
+            el.appendChild(content);
+        }
     }
     handleBackdropClick(id) {
         if (!isTopInteractiveModal(id))

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

@@ -15,6 +15,8 @@ export class SdNumberInput {
     useButton = false;
     /** 소수점 입력 허용 여부 */
     useDecimal = false;
+    /** 소수점 이하 최대 자리수 (useDecimal일 때만 적용, 초과 입력한 소수부는 잘라냄) */
+    maxDecimalLength;
     /** 입력 값 */
     value = null;
     /** 레이블 텍스트 */
@@ -95,6 +97,31 @@ export class SdNumberInput {
         const result = isNegative ? '-' + formatted : formatted;
         return decPart !== undefined && decPart !== '' ? result + '.' + decPart : String(result);
     }
+    /** useDecimal이면서 유효한 maxDecimalLength가 있을 때만 소수점 이하 제한 자리수를 반환합니다. */
+    getDecimalLimit() {
+        if (!this.useDecimal ||
+            this.maxDecimalLength === undefined ||
+            !Number.isFinite(this.maxDecimalLength)) {
+            return undefined;
+        }
+        return Math.max(0, Math.floor(this.maxDecimalLength));
+    }
+    /** 소수부를 제한 자리수로 잘라낸 문자열을 반환합니다(반올림하지 않고 잘라냄). */
+    truncateToDecimalLimit(cleaned, limit) {
+        if (!cleaned.includes('.'))
+            return cleaned;
+        const [intPart, fractionPart = ''] = cleaned.split('.');
+        const truncatedFraction = fractionPart.slice(0, limit);
+        return truncatedFraction === '' ? intPart : `${intPart}.${truncatedFraction}`;
+    }
+    /** 숫자값의 소수부를 제한 자리수로 잘라냅니다(제한이 없으면 원본 그대로). */
+    applyDecimalLimit(value) {
+        const decimalLimit = this.getDecimalLimit();
+        if (decimalLimit === undefined)
+            return value;
+        const parsed = parseFloat(this.truncateToDecimalLimit(value.toString(), decimalLimit));
+        return isNaN(parsed) ? value : parsed;
+    }
     parseInput(input) {
         if (input.trim() === '')
             return null;
@@ -102,12 +129,15 @@ export class SdNumberInput {
         if (!/^-?(\d+\.?\d*|\d*\.\d+)$/.test(cleaned)) {
             return null;
         }
-        const parsed = parseFloat(cleaned);
-        if (isNaN(parsed))
-            return null;
         if (!this.useDecimal && cleaned.includes('.')) {
             return null;
         }
+        // useDecimal이면서 maxDecimalLength가 설정된 경우 소수부를 제한 자리수로 잘라냄(반올림 아님)
+        const decimalLimit = this.getDecimalLimit();
+        const normalized = decimalLimit !== undefined ? this.truncateToDecimalLimit(cleaned, decimalLimit) : cleaned;
+        const parsed = parseFloat(normalized);
+        if (isNaN(parsed))
+            return null;
         return parsed;
     }
     clampMinMax(value) {
@@ -262,6 +292,7 @@ export class SdNumberInput {
         if (nextVal > this.max) {
             nextVal = this.max;
         }
+        nextVal = this.applyDecimalLimit(nextVal);
         if (nextVal === currentVal)
             return;
         this.internalValue = nextVal;
@@ -274,6 +305,7 @@ export class SdNumberInput {
         if (nextVal < this.min) {
             nextVal = this.min;
         }
+        nextVal = this.applyDecimalLimit(nextVal);
         if (nextVal === currentVal)
             return;
         this.internalValue = nextVal;
@@ -314,15 +346,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: '9e82f7ec1e40c7f435233d1d8e05fdd2de0c2712', 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, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: 'b5f2e1c32bbba8147a72edf2dfe42f591d81d6f7', class: {
+        return (h("sd-field", { key: 'ffa6befb9565a33e762fce231c29d7a2f663eb08', 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, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: '2fb1686b071fd69c65fc0c908807c029edc3b253', class: {
                 'sd-number-input__content': true,
                 'sd-number-input__content--no-stepper': !this.useButton,
-            } }, this.useButton && (h("button", { key: '07e053c769556282da7595ba7d185db7c9af19a2', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: '95b48b8a0fa45ff60b3097d24405b48e4776b928', name: "minus", size: iconSize, color: this.isDecrementDisabled()
+            } }, this.useButton && (h("button", { key: '6b2464867bb0224f4fbcb50ea4e4bfc5386474ba', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: 'f65e9144ad93f4ba8d293b5af1bf9fd1286e7520', name: "minus", size: iconSize, color: this.isDecrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
-                : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && h("span", { key: '2381fade9767b593d5f6848bc411c3244a6f9da2', class: "sd-number-input__prefix" }, this.inputPrefix), h("input", { key: '00b886990e9c1155c20ee404eda26777e56d31c2', 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: '3d89b3557f961f36b429e3cf4ae247098a412b30', class: "sd-number-input__prefix" }, this.inputPrefix), h("input", { key: 'c5c503b634aee3b0c8d81f855b5de1d0abe35eac', 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: '5254313e957f3ded4139f047b588e38222c33975', class: "sd-number-input__suffix" }, this.inputSuffix), this.useButton && (h("button", { key: 'f7389a1c5869460791249f579b3195b3583255fe', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: 'b272b62e2ce27a1e5ecb86738af6eacb89b0d6c6', name: "add", size: iconSize, color: this.isIncrementDisabled()
+            } }), this.inputSuffix && h("span", { key: '15177064a4daab2ede3af4f8758912da266f1c29', class: "sd-number-input__suffix" }, this.inputSuffix), this.useButton && (h("button", { key: 'dcc1fbfe7c4e7eaa6db95fe7dc9a34f4b82ade8b', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: '58eee48f37c0e942a3734a9275a9d459bc9bc420', name: "add", size: iconSize, color: this.isIncrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
                 : NUMBER_INPUT_STEPPER.icon.default }))))));
     }
@@ -466,6 +498,25 @@ export class SdNumberInput {
                 "attribute": "use-decimal",
                 "defaultValue": "false"
             },
+            "maxDecimalLength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\uC18C\uC218\uC810 \uC774\uD558 \uCD5C\uB300 \uC790\uB9AC\uC218 (useDecimal\uC77C \uB54C\uB9CC \uC801\uC6A9, \uCD08\uACFC \uC785\uB825\uD55C \uC18C\uC218\uBD80\uB294 \uC798\uB77C\uB0C4)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-decimal-length"
+            },
             "value": {
                 "type": "any",
                 "mutable": true,

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

@@ -88,13 +88,13 @@ export class SdPagination {
             '--sd-pagination-bg-selected': PAGINATION_COLORS.bgSelected,
             '--sd-pagination-item-width': `${this.buttonWidth}px`,
         };
-        return (h("div", { key: '4a67cbb9ed9d3cafbd3d9f99562948e3b3840210', class: {
+        return (h("div", { key: '0b5a2e9aec83e6f6a8de3426e57b3f9a53623652', class: {
                 'sd-pagination': true,
                 'sd-pagination--simple': this.simple,
-            }, style: cssVars }, h("div", { key: 'f0cc77abd3b03a1525f52fbcd2587b6ad9cd468d', 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: 'aa53d0366ae4678950ecd3917fd0d7011dd9608d', 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: 'c4053f5917345cf1e7fcea9f3c2fa0d6b5fa7a3f', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n))))), h("div", { key: '1aa72933c849af4fc886cc4e5f8962710c6c40bf', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
     }
     static get is() { return "sd-pagination"; }
     static get originalStyleUrls() {

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

@@ -0,0 +1,41 @@
+import popoverTokens from "../../tokens/generated/component.popover.json";
+const t = popoverTokens.popover;
+/** 제목-아이콘 간격 */
+export const POPOVER_TITLE_GAP = t.title.gap;
+/** 제목 좌측 아이콘 크기 */
+export const POPOVER_TITLE_ICON_SIZE = t.title.leadingIcon;
+/**
+ * popoverType별 색상·버튼 매핑.
+ * - default·accent: 하단 버튼 primary(solid) / danger: danger outline / warning: neutral outline
+ * - default: 다크 배경 + 흰색 텍스트 / danger·warning·accent: 라이트 배경 + 타입 색상 제목 + light 계열 본문·링크 색상
+ */
+export const POPOVER_TYPE_CONFIG = {
+    default: {
+        bg: t.default.bg,
+        title: t.default.title,
+        description: t.default.description,
+        subAction: t.default.subAction,
+        buttonName: 'primary_xs',
+    },
+    danger: {
+        bg: t.danger.bg,
+        title: t.danger.title,
+        description: t.light.description,
+        subAction: t.light.subAction,
+        buttonName: 'danger_outline_xs',
+    },
+    warning: {
+        bg: t.warning.bg,
+        title: t.warning.title,
+        description: t.light.description,
+        subAction: t.light.subAction,
+        buttonName: 'neutral_outline_xs',
+    },
+    accent: {
+        bg: t.accent.bg,
+        title: t.accent.title,
+        description: t.light.description,
+        subAction: t.light.subAction,
+        buttonName: 'primary_xs',
+    },
+};