@sellmate/design-system 1.27.1 → 1.29.0

package/dist/collection/components/sd-file-picker/sd-file-picker.js

@@ -1,6 +1,6 @@
 import { h, } from "@stencil/core";
 import { nanoid } from "nanoid/non-secure";
-import { FILE_PICKER_LAYOUT, FILE_PICKER_COLORS } from "./sd-file-picker.config";
+import { FILE_PICKER_LAYOUT, FILE_PICKER_COLORS, FILE_PICKER_LIST_BOX, } from "./sd-file-picker.config";
 export class SdFilePicker {
     el;
     /** 선택된 파일 값 */
@@ -13,6 +13,8 @@ export class SdFilePicker {
     inline = false;
     /** 다중 파일 선택 여부 */
     multiple = false;
+    /** multiple 파일 목록을 필드 아래 칩 대신, caret(▼) 클릭 시 열리는 리스트박스 카드로 표시 */
+    useMultipleListBox = false;
     /** 허용할 파일 타입 (input accept 속성과 동일) */
     accept;
     /** 파일 한 개의 최대 크기 (bytes) */
@@ -56,9 +58,13 @@ export class SdFilePicker {
     hovered = false;
     internalValue = null;
     showTooltip = false;
+    isListboxOpen = false;
+    listboxWidth = '';
     fileInputRef;
     fileNamesRef;
+    contentRef;
     formField;
+    static VIEWPORT_PADDING = 20;
     /** 파일 선택 또는 삭제 시 현재 파일 값을 전달합니다. */
     update;
     /** 파일이 크기·개수 제한을 초과하여 거부됐을 때 발생합니다. */
@@ -160,6 +166,7 @@ export class SdFilePicker {
         this.value = clearedValue;
         this.internalValue = clearedValue;
         this.update?.emit(clearedValue);
+        this.isListboxOpen = false;
         if (this.fileInputRef) {
             this.fileInputRef.value = '';
         }
@@ -169,6 +176,23 @@ export class SdFilePicker {
             return;
         this.fileInputRef?.click();
     };
+    /** caret(▼) 클릭 시 파일 목록 리스트박스를 토글한다. */
+    handleListboxToggle = (event) => {
+        event.stopPropagation();
+        if (this.disabled)
+            return;
+        if (this.isListboxOpen) {
+            this.isListboxOpen = false;
+            return;
+        }
+        if (this.contentRef) {
+            this.listboxWidth = `${this.contentRef.offsetWidth}px`;
+        }
+        this.isListboxOpen = true;
+    };
+    closeListbox = () => {
+        this.isListboxOpen = false;
+    };
     hasFiles() {
         if (Array.isArray(this.internalValue)) {
             return this.internalValue.length > 0;
@@ -194,12 +218,28 @@ export class SdFilePicker {
         this.internalValue = newFiles;
         this.value = newFiles;
         this.update?.emit(this.value);
+        // 리스트박스에서 마지막 파일을 지우면 caret 이 사라지므로 함께 닫는다.
+        if (newFiles.length === 0) {
+            this.isListboxOpen = false;
+        }
     };
     renderChipList() {
         if (!this.hasChips())
             return null;
         return (h("div", { class: "sd-file-picker__chip-list" }, this.internalValue.map((file, index) => (h("sd-chip", { value: file.name, onSdRemove: () => this.handleChipRemove(index) })))));
     }
+    renderListbox() {
+        if (!this.hasChips() || !this.isListboxOpen)
+            return null;
+        const listboxStyle = {
+            width: this.listboxWidth,
+            padding: `${FILE_PICKER_LIST_BOX.chipPadding}px`,
+            gap: `${FILE_PICKER_LIST_BOX.chipGap}px`,
+            borderRadius: `${FILE_PICKER_LIST_BOX.radius}px`,
+            background: FILE_PICKER_LIST_BOX.bg,
+        };
+        return (h("sd-portal", { open: this.isListboxOpen, parentRef: this.contentRef, viewportPadding: SdFilePicker.VIEWPORT_PADDING, onSdClose: this.closeListbox }, h("div", { class: "sd-file-picker__listbox", style: listboxStyle }, this.internalValue.map((file, index) => (h("sd-chip", { value: file.name, editable: false, onSdRemove: () => this.handleChipRemove(index) }))))));
+    }
     checkOverflow() {
         if (!this.fileNamesRef)
             return;
@@ -225,21 +265,25 @@ export class SdFilePicker {
             '--sd-system-size-field-sm-height': `${FILE_PICKER_LAYOUT.height}px`,
             '--sd-system-radius-field-sm': `${FILE_PICKER_LAYOUT.radius}px`,
         };
-        const content = (h("div", { key: 'f686c8d06b3dbecc037e21f41e7f307d08349e8b', role: "button", tabindex: this.disabled ? -1 : 0, class: "sd-file-picker__content", onClick: this.handleClick, onKeyDown: e => {
+        const showListbox = this.multiple && this.useMultipleListBox;
+        const content = (h("div", { key: '932b5549b6b27e0fec8096127dd8fb09f682fe56', role: "button", tabindex: this.disabled ? -1 : 0, class: "sd-file-picker__content", ref: el => (this.contentRef = el), onClick: this.handleClick, onKeyDown: e => {
                 if (e.key === 'Enter' || e.key === ' ') {
                     e.preventDefault();
                     this.handleClick();
                 }
-            } }, h("input", { key: 'a519e5a7c253d9d9bba21401b2f83092aa8a3a91', ref: el => (this.fileInputRef = el), type: "file", class: "sd-file-picker__input", disabled: this.disabled, multiple: this.multiple, accept: this.accept, onInput: this.handleFileChange, "aria-label": this.placeholder ?? 'Click to upload' }), h("sd-icon", { key: 'b9e7548365f1d54957b6e575d3532a833e301a98', name: "attachFile", size: Number(FILE_PICKER_LAYOUT.iconSize), color: this.getIconColor(), class: "sd-file-picker__icon" }), h("div", { key: 'cb28d1c3abf0e9c30454f01bb8c81cb0ea4477af', ref: el => (this.fileNamesRef = el), class: {
+            } }, h("input", { key: 'd10a6a2bc0606954588cee4ad77898ad28cbbe75', ref: el => (this.fileInputRef = el), type: "file", class: "sd-file-picker__input", disabled: this.disabled, multiple: this.multiple, accept: this.accept, onInput: this.handleFileChange, "aria-label": this.placeholder ?? 'Click to upload' }), h("sd-icon", { key: '70102b5a6ff6606423ba36601015bccc2d48f22c', name: "attachFile", size: Number(FILE_PICKER_LAYOUT.iconSize), color: this.getIconColor(), class: "sd-file-picker__icon" }), h("div", { key: '7a0696f4f4b3ccd56c707bf2ecee59562ceb1a7b', ref: el => (this.fileNamesRef = el), class: {
                 'sd-file-picker__text': true,
                 'sd-file-picker__text--placeholder': !hasFiles,
                 'sd-file-picker__text--active': hasFiles,
-            } }, displayText), !this.disabled && hasFiles && (h("sd-ghost-button", { key: 'c97d7c306ef2087a9874a16b6e485a94c7cc571f', icon: "close", size: "xxs", ariaLabel: "clear", disabled: this.disabled, class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (h("div", { key: '293a4c75766be383a4ad6f79052111c09608e0e2', class: "sd-file-picker__tooltip" }, displayText))));
-        return (h("div", { key: '4e25add1b74a232e8786efca26f87ccb5d48f19d', class: {
+            } }, displayText), showListbox && hasFiles && !this.disabled && (h("sd-ghost-button", { key: 'a68ba1cd8dabf75279eba8993befef8dd03008ae', icon: "caretDown", size: "xxs", ariaLabel: "toggle file list", disabled: this.disabled, class: {
+                'sd-file-picker__caret': true,
+                'sd-file-picker__caret--open': this.isListboxOpen,
+            }, onClick: this.handleListboxToggle })), !this.disabled && hasFiles && (h("sd-ghost-button", { key: '6abcae4722ebbe7f888ce500774f3a749061ad4e', icon: "close", size: "xxs", ariaLabel: "clear", disabled: this.disabled, class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (h("div", { key: 'f1e3821eee58a1b126a6375a8d830a9fc9055cbe', class: "sd-file-picker__tooltip" }, displayText))));
+        return (h("div", { key: '952fbde18439ce103d62ede9e7b7a59dda408aa1', class: {
                 'sd-file-picker__wrapper': true,
                 'sd-file-picker--inline': this.inline,
                 'sd-file-picker--inline-disabled': this.inline && this.disabled,
-            }, style: cssVars }, h("sd-field", { key: 'fda8f53237f5efb4f1dec906d87851dd10c03593', borderless: this.inline, 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, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, content), this.renderChipList()));
+            }, style: cssVars }, h("sd-field", { key: '08ed598117f29d7c6977f75a73300c033bb6ec9d', borderless: this.inline, 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, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, content), this.useMultipleListBox ? this.renderListbox() : this.renderChipList()));
     }
     static get is() { return "sd-file-picker"; }
     static get originalStyleUrls() {
@@ -357,6 +401,26 @@ export class SdFilePicker {
                 "attribute": "multiple",
                 "defaultValue": "false"
             },
+            "useMultipleListBox": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "multiple \uD30C\uC77C \uBAA9\uB85D\uC744 \uD544\uB4DC \uC544\uB798 \uCE69 \uB300\uC2E0, caret(\u25BC) \uD074\uB9AD \uC2DC \uC5F4\uB9AC\uB294 \uB9AC\uC2A4\uD2B8\uBC15\uC2A4 \uCE74\uB4DC\uB85C \uD45C\uC2DC"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "use-multiple-list-box",
+                "defaultValue": "false"
+            },
             "accept": {
                 "type": "string",
                 "mutable": false,
@@ -776,7 +840,9 @@ export class SdFilePicker {
     static get states() {
         return {
             "internalValue": {},
-            "showTooltip": {}
+            "showTooltip": {},
+            "isListboxOpen": {},
+            "listboxWidth": {}
         };
     }
     static get events() {

package/dist/collection/components/sd-floating-portal/sd-floating-portal.css

@@ -9,7 +9,6 @@
   box-sizing: border-box;
   background: var(--sd-floating-bg, #07284A);
   color: var(--sd-floating-content, #FFFFFF);
-  box-shadow: 2px 2px 12px 2px rgba(0, 0, 0, 0.1);
   animation: sd-floating-fade-in 0.35s ease-out;
 }
 .sd-floating-menu--top {
@@ -114,6 +113,7 @@
 }
 .sd-floating-menu--popover {
   padding: 16px 20px;
+  box-shadow: 2px 2px 12px 2px rgba(0, 0, 0, 0.1);
 }
 .sd-floating-menu--popover .sd-floating-menu__content {
   gap: 4px;

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

@@ -173,7 +173,7 @@ export class SdFloatingPopover {
         }
     }
     render() {
-        return h("slot", { key: '487d3c23320bd5f44492e3fb84e3cb357605de39' });
+        return h("slot", { key: '3a3234d89652728a077681775de4f8c14141ab2d' });
     }
     static get is() { return "sd-floating-portal"; }
     static get originalStyleUrls() {

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

@@ -29,7 +29,6 @@ export const GUIDE_CONFIG = {
         paddingX: `${contents.paddingX}px`,
         paddingY: `${contents.paddingY}px`,
         gap: `${contents.gap}px`,
-        rowGap: `${contents.row.gap}px`,
         bodyGap: `${contents.body.gap}px`,
         titleGap: `${contents.title.gap}px`,
         radius: `${contents.radius}px`,

package/dist/collection/components/sd-guide/sd-guide.css

@@ -124,9 +124,6 @@ sd-guide {
   margin-right: 12px;
   flex-shrink: 0;
 }
-.sd-guide__popup__list__item--depth-1:not(:first-child) {
-  margin-top: var(--sd-guide-contents-row-gap);
-}
 .sd-guide__popup__list__item--depth-2 {
   margin-top: var(--sd-guide-contents-body-gap);
 }

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

@@ -60,7 +60,6 @@ export class SdGuide {
             '--sd-guide-contents-padding-x': contents.paddingX,
             '--sd-guide-contents-padding-y': contents.paddingY,
             '--sd-guide-contents-gap': contents.gap,
-            '--sd-guide-contents-row-gap': contents.rowGap,
             '--sd-guide-contents-body-gap': contents.bodyGap,
             '--sd-guide-contents-title-gap': contents.titleGap,
             '--sd-guide-contents-radius': contents.radius,
@@ -83,10 +82,10 @@ export class SdGuide {
         const buttonClasses = ['sd-guide__button', `sd-guide__button--type-${this.type ?? 'tip'}`];
         if (isActive)
             buttonClasses.push('sd-guide__button--active');
-        return (h("div", { key: 'd89a517d78a8f9624c94d320291e5a4b5bd0715d', class: "sd-guide", style: this.guideStyle }, h("sd-button", { key: '6e959f0f5fd6f816fd1cef4545852b860d30de85', ref: el => (this.guideRef = el), class: buttonClasses.join(' '), name: isActive ? 'primary_sm' : 'neutral_outline_sm', label: this.label || defaultLabel, icon: iconName, onSdClick: this.handleClickGuide }), this.popupShow && (h("sd-portal", { key: 'a837cababa5504400293729ad28e4dcd2450eeec', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: '61dd3c574495f85021495d80865e162999368f9c', class: "sd-guide__popup", style: {
+        return (h("div", { key: '7d85d4650de1bef19699cdacaceeeab69a7f221c', class: "sd-guide", style: this.guideStyle }, h("sd-button", { key: 'b4cd191ba9593ce83343097e9b24fb56d86c6859', ref: el => (this.guideRef = el), class: buttonClasses.join(' '), name: isActive ? 'primary_sm' : 'neutral_outline_sm', label: this.label || defaultLabel, icon: iconName, onSdClick: this.handleClickGuide }), this.popupShow && (h("sd-portal", { key: '2523de8af47987b2f0761c999817bf1ca595b4e6', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: '2fcc5a768d626d5ba97427ad99dc1c6155b5c36b', class: "sd-guide__popup", style: {
                 ...this.guideStyle,
                 width: this.popupWidth != null ? this.popupWidth + 'px' : '426px',
-            } }, h("sd-ghost-button", { key: 'dbf8aebd1be4b5286bf726d22e0a5f80c29e867f', class: "sd-guide__popup__close", icon: "close", ariaLabel: "close", size: "sm", onSdClick: this.closeDropdown }), h("div", { key: '5a08fa823bb8839e654d7bb2ba027df2dc68b85b', class: "sd-guide__popup__header" }, h("sd-icon", { key: '1dda43d100b4f5f3b7fa81115a1ac4bfbd584a51', name: iconName, size: 24, color: popupIconColor }), h("h3", { key: 'cfe6342f44f4e1355397ed94d6db74807f917548', class: "sd-guide__popup__title" }, this.popupTitle || defaultLabel)), h("ul", { key: '9acc2f507ed3d3d6f1fda27a9e5cf66dcc2f619d', class: "sd-guide__popup__list" }, this.renderListItem(this.message)))))));
+            } }, h("sd-ghost-button", { key: 'de6b053ff6373bf2690d0874d01692e456a38991', class: "sd-guide__popup__close", icon: "close", ariaLabel: "close", size: "sm", onSdClick: this.closeDropdown }), h("div", { key: '10f2de0819a6a97571719ca2e04101833c78f1d3', class: "sd-guide__popup__header" }, h("sd-icon", { key: 'b11478e02574f5e211cd9d2478080d2c9895cb5d', name: iconName, size: 24, color: popupIconColor }), h("h3", { key: 'ef361769bc0363ebb7215b6fbd1fdb38b2864434', class: "sd-guide__popup__title" }, this.popupTitle || defaultLabel)), h("ul", { key: '914ae5fa0fa7ae52954df58e17beb187ddc2a966', class: "sd-guide__popup__list" }, this.renderListItem(this.message)))))));
     }
     // 현재 2depth까지만 스타일 적용
     renderListItem(message, depth = 0) {

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

@@ -152,12 +152,12 @@ export class SdInput {
             '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
             '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
         };
-        return (h("sd-field", { key: '972d5e17746dc16d4e20b18bd278410fe9c13878', 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("label", { key: '31e5f2aa7a2f0acaa0bfda8b9bfb94e2d6a98ebe', class: "sd-input__content" }, h("slot", { key: '8230767a7311121fca1d3a1d64be5a04fc3c38aa', name: "prefix" }), h("input", { key: '2961c50e416a08988d3d80022883eab696de2c7c', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : (this.type ?? 'text'), value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: '6862a98c1254979e0700cd8b18b61517a4c7386a', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && !this.readonly && (h("sd-ghost-button", { key: '9aa967f89fa448df98079ba1b16fe4ea4ef81c0e', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
+        return (h("sd-field", { key: '5707ad3cdfd0194d4200899f3838e6e7ff03cb34', 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("label", { key: 'a5146f59435269a419c8273c72e7704a359108f0', class: "sd-input__content" }, h("slot", { key: 'cfa0393abc20439a7746e874215864d02d41ce17', name: "prefix" }), h("input", { key: 'bf7503a5701e237868c7be863f5d2653d074fb66', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : (this.type ?? 'text'), value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: 'bc16a709380137d6993753892e71cab33e0fc070', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && !this.readonly && (h("sd-ghost-button", { key: '4053ddc137f8d104a3e619f81ca2c99fd7e52a75', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
                 if (this.disabled || this.readonly)
                     return;
                 this.internalValue = '';
                 await this.formField?.sdValidate();
-            } })), this.type === 'password' && (h("sd-ghost-button", { key: '2dd03b4920f2e84932c6e8ddb8bbdea2070b070f', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled || this.readonly, class: "sd-input__password-icon", onClick: () => {
+            } })), this.type === 'password' && (h("sd-ghost-button", { key: '7062bbfecd4289185dc847bca0524405d6f4bbfe', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled || this.readonly, class: "sd-input__password-icon", onClick: () => {
                 if (this.disabled || this.readonly)
                     return;
                 this.passwordVisible = !this.passwordVisible;

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

@@ -7,6 +7,8 @@ export const KEY_VALUE_TABLE_LAYOUT = {
     borderRadius: Number(t.radius),
     thPaddingX: Number(t.header.paddingX),
     padding: Number(t.keyValue.body.paddingY),
+    tdPaddingX: Number(t.keyValue.body.paddingX.default),
+    tdPaddingXWide: Number(t.keyValue.body.paddingX.wide),
     helpIconSize: 16,
     requiredIconSize: 12,
     gap: Number(t.header.gap),

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

@@ -93,10 +93,14 @@ sd-key-value-table .sd-key-value-table__help {
   flex-shrink: 0;
 }
 sd-key-value-table .sd-key-value-table__td {
-  padding: var(--sd-kvt-padding);
+  padding: var(--sd-kvt-padding) var(--sd-kvt-td-padding-x);
   background: var(--sd-kvt-td-bg);
   color: var(--sd-kvt-td-color);
 }
+sd-key-value-table .sd-key-value-table__td--text {
+  padding-left: var(--sd-kvt-td-padding-x-wide);
+  padding-right: var(--sd-kvt-td-padding-x-wide);
+}
 sd-key-value-table .sd-key-value-table__td-inner {
   display: flex;
   align-items: center;

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: '8d19b1c846b14994eceb6381802b19fa92a241cb', style: hostStyle }, h("div", { key: '23d3e839b1e64a81ae86e994bf77a0e9bf53e870', class: "sd-linear-progress__track" }, h("div", { key: '92ea4d28c312e639ec038002beeea60ab39e42bb', class: "sd-linear-progress__fill", style: fillStyle }), !this.indeterminate && (h("span", { key: 'd65a8726f14302260d0fad1b3a16ba7e8588530f', class: "sd-linear-progress__value sd-linear-progress__value--on-track" }, valueText)), !this.indeterminate && (h("span", { key: '522efd6e3b6f6bbfcb8044113d2e2ae37da84dd6', class: "sd-linear-progress__value sd-linear-progress__value--on-fill", style: valueOnFillStyle }, valueText))), this.label && h("span", { key: '2933b26dc95c1962dc19829f9bf1d8e62d71b0c4', class: "sd-linear-progress__label" }, this.label)));
+        return (h(Host, { key: 'fb7aacfafc15a5570717f4ba13cd7d6a8193375a', style: hostStyle }, h("div", { key: '7a054e0cac8fcc757c15871ff4d2305a8d190fb9', class: "sd-linear-progress__track" }, h("div", { key: '35b45b58b899e4c7201bf39783d3d4c6be42ede5', class: "sd-linear-progress__fill", style: fillStyle }), !this.indeterminate && (h("span", { key: 'a9b44e03fe2446fe8dbfd9bbd6801d6b9bebfc10', class: "sd-linear-progress__value sd-linear-progress__value--on-track" }, valueText)), !this.indeterminate && (h("span", { key: '363bacb116ca51417892f9f49db58360a97899c4', class: "sd-linear-progress__value sd-linear-progress__value--on-fill", style: valueOnFillStyle }, valueText))), this.label && h("span", { key: 'c8b9c15d2eb85ca1ac46ba8983ae399661012f31', 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: '7abf314b6518ab7e6ba0ef60236a8ca6846b0cf4', class: {
+        return (h("div", { key: '89949c219d7ace3858c7539f3db4843a20a2c67e', class: {
                 'sd-loading-container': true,
                 'sd-loading-container--visible': this.visible,
-            }, "aria-hidden": this.visible ? 'false' : 'true' }, h("div", { key: '5c049ffd686654fb4c63bba829bcbe4968285a74', class: "sd-loading-container__backdrop" }), h("div", { key: '21c50b87eac65eedfe2ae475eda2c04a9b2f781d', class: "sd-loading-container__content" }, h("sd-circle-progress", { key: '1dd29e83461be200d3d23037fc8965dbba675e77', indeterminate: true, type: "inverse" }), this.message && h("p", { key: 'deb08b4813d784cf47f43648e8187b22b143dfd5', class: "sd-loading-container__message" }, this.message))));
+            }, "aria-hidden": this.visible ? 'false' : 'true' }, h("div", { key: '0c538680987653059a8baae6e6f6d2b7dabeda69', class: "sd-loading-container__backdrop" }), h("div", { key: '8b5b01c51e97d9ebdd63be32aff8f228449c1e47', class: "sd-loading-container__content" }, h("sd-circle-progress", { key: 'ccf47434cf4c7b3e948cc10741e63fe362bd9316', indeterminate: true, type: "inverse" }), this.message && h("p", { key: 'db63acff8b44e5725e9c8e29fed7d9957f18aa9d', 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.css

@@ -2,6 +2,7 @@ sd-loading-modal {
   display: inline-block;
 }
 sd-loading-modal .sd-loading-modal {
+  position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -15,6 +16,12 @@ sd-loading-modal .sd-loading-modal {
   background: var(--sd-loading-modal-bg);
   box-shadow: 4px 4px 24px 4px rgba(0, 0, 0, 0.2);
 }
+sd-loading-modal .sd-loading-modal__close {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  cursor: pointer;
+}
 sd-loading-modal .sd-loading-modal__content {
   display: flex;
   align-items: center;

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

@@ -17,6 +17,8 @@ export class SdLoadingModal {
     progress;
     /** 버튼 클릭 시 발생합니다. */
     click;
+    /** 닫기 버튼 클릭 시 발생합니다. (error 상태에서만 노출) */
+    close;
     get resolvedState() {
         return this.state ?? 'loading';
     }
@@ -58,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: '01bd677e5ef79c7fba151be5d4fb28f4de53c063', style: hostStyle }, h("div", { key: 'f1062845695886535ee1d96613db83e1a8da4b88', class: "sd-loading-modal" }, h("div", { key: 'c1ca61a82f105e5582719375506634a2ee5a538f', 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: '60039cb0c90b9450355c6545a82301797c0b65bc', 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: '0f00c197e0f320ffb2a8bebe4418307639d5ee09', class: "sd-loading-modal__button" }, h("sd-button", { key: '6d8f96e681843afe1590f9a9fcc18c4668f64d22', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
+        return (h(Host, { key: '1b22ac1569044c27867745c08d3e49325192c673', style: hostStyle }, h("div", { key: '06fbf9cb54f7753a2560b208ab634a9090d5462a', class: "sd-loading-modal" }, this.resolvedState === 'error' && (h("sd-ghost-button", { key: 'fc8e95da691cefe22b47d75cacd9e4ea36695347', class: "sd-loading-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), h("div", { key: 'ca4840db307050f8509d3a632b8f028bce18e399', 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: '11b93fc8996ca64a42f09e4688267329da8a74c9', 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: 'b75b3cb2a48167746d583e540c48746b9590efad', class: "sd-loading-modal__button" }, h("sd-button", { key: '7c298c2f62460ecb955a53e57c841a9e7244008e', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
     }
     static get is() { return "sd-loading-modal"; }
     static get originalStyleUrls() {
@@ -235,6 +237,21 @@ export class SdLoadingModal {
                     "resolved": "void",
                     "references": {}
                 }
+            }, {
+                "method": "close",
+                "name": "sdClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\uB2EB\uAE30 \uBC84\uD2BC \uD074\uB9AD \uC2DC \uBC1C\uC0DD\uD569\uB2C8\uB2E4. (error \uC0C1\uD0DC\uC5D0\uC11C\uB9CC \uB178\uCD9C)"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
             }];
     }
 }

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

@@ -314,15 +314,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: '391ac51b1c7844a81664907af4e7c063d6c4c5e4', 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: '7bdc01654f679228c9893d4438daa0a8324b1e56', class: {
+        return (h("sd-field", { key: 'abfc6fbc218ed829eabbf33476e6feb25ed0b783', 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: 'ab9f55eb4dcf8b345fae2e0546833f9d4216df1d', class: {
                 'sd-number-input__content': true,
                 'sd-number-input__content--no-stepper': !this.useButton,
-            } }, this.useButton && (h("button", { key: '57819a2fbc917ebf6fdf640e4226443cf6d138b1', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: '05c900ee4b9ccb0f2b8bf5a555f5586fe91c3c53', name: "minus", size: iconSize, color: this.isDecrementDisabled()
+            } }, this.useButton && (h("button", { key: '3a12f0c1c1963790b3337f34452d9bc200e072c1', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: 'cae2acccfb818a25a1d2c6abe8a0accdff293931', name: "minus", size: iconSize, color: this.isDecrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
-                : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && h("span", { key: 'e406fa40696f58e4a8ad4f2be2a33ecfc2f4ff3a', class: "sd-number-input__prefix" }, this.inputPrefix), h("input", { key: '3df235c03deac87a615d295d65473a487155f07c', 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: '37a2724e2973205cd9f0083d796c556aed8c50c6', class: "sd-number-input__prefix" }, this.inputPrefix), h("input", { key: '5d9bfccaa121f0bc3ecaac4d8db3023d1d03dd68', 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: 'b23bd9594ca53147d628d97b8a99512d0ecc6c82', class: "sd-number-input__suffix" }, this.inputSuffix), this.useButton && (h("button", { key: 'c4757ac52cccab448a91458ca66e7de29b5d4b5d', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: '45eadd745300df1f9bec18d7a9d6367f25ee53b7', name: "add", size: iconSize, color: this.isIncrementDisabled()
+            } }), this.inputSuffix && h("span", { key: 'ba990181e4b3d100087d20b177710f09b61f23cc', class: "sd-number-input__suffix" }, this.inputSuffix), this.useButton && (h("button", { key: '91666af2e343d3098bc020fb7266aa1e785783c3', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: '336ea010c7e9e314c98f56f4c79c86944087912e', 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

@@ -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: '2e5fdcc2d6a426be32128960131db2ed51674939', class: {
+        return (h("div", { key: '78ef11e415c8d086e0a5f582fa5b4568ed3e49a4', class: {
                 'sd-pagination': true,
                 'sd-pagination--simple': this.simple,
-            }, style: cssVars }, h("div", { key: 'a83ee12c1af9ca41e3a5773fcd840200fcb873e2', 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: '360cdb85715508d2f8155851b11928031015909c', 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: '3c98ea6c1bf5bea43baaa73a2a7db5c4fe1404e5', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n))))), h("div", { key: '3726aaab29e0347cf7ae5e2aebad268e33eb33c7', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
     }
     static get is() { return "sd-pagination"; }
     static get originalStyleUrls() {

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

@@ -40,7 +40,7 @@ export class SdPopup {
             ...DEFAULT_SUBMIT_BUTTON_PROPS,
             ...this.submitButtonProps,
         };
-        return (h("div", { key: 'cc0381250b37b498e93fd7f8d932ad95ff802bcc', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, h("header", { key: '07b4378a9c8d292f73e0a6307ec2b6335087cc9f', class: "sd-popup__header" }, h("h2", { key: 'a17318a803d2d825e0a85f43ff436944424bb213', class: "sd-popup__title" }, this.popupTitle)), h("div", { key: 'f2147c40fbd425565f6e61e62e2da2d97eacb27a', class: "sd-popup__body" }, h("slot", { key: '5600679290a775e53e838fd5ea2d9cfc1008130f' })), this.useFooter && (h("footer", { key: '2bfa07724438b8afa03a0654359ab760498ef7dc', class: "sd-popup__footer" }, h("div", { key: 'd70c88b18b23bd8d1b3f6d4899d65b25e378b9aa', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, h("slot", { key: '42d7108b390bf460398dcbc128a837784ba5c544', name: "footer-left" })), h("sd-button", { key: '0525a19c52caef0dcaf0eb2783391132d53d18db', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
+        return (h("div", { key: 'd86bb173d6fe8540e8b96f5dff4c8285cbf9ff91', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, h("header", { key: '0f006173fda3be589cdc208f382ed1898c49396a', class: "sd-popup__header" }, h("h2", { key: '62179c692f08b21e6386175b153d4f8c1013ea53', class: "sd-popup__title" }, this.popupTitle)), h("div", { key: 'a1a786d9d71f0a17eb4f3bce3a6b1ae8a1fa3367', class: "sd-popup__body" }, h("slot", { key: '40b772fd34963ef78507dddf81474eb5e1a58174' })), this.useFooter && (h("footer", { key: '40c981163f237b44764dec66205e01203a0d150d', class: "sd-popup__footer" }, h("div", { key: '0c91d37584c0bc5f74b510430a83889aea4abb93', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, h("slot", { key: '120c41484fee23d160a1fa7b5ab7cd70c1422d12', name: "footer-left" })), h("sd-button", { key: '6dadd08ab99380d0e55730888fbbd2fea88bcfe9', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
     }
     static get is() { return "sd-popup"; }
     static get originalStyleUrls() {