@sellmate/design-system 1.28.0 → 1.31.0

package/dist/cjs/sd-ghost-button_3.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-D12oddge.js');
+var index = require('./index-Jr8OU0y9.js');
 
 const ghostButton = {
 	xxs: {
@@ -128,6 +128,11 @@ const SdGhostButton = class {
     intent = 'default';
     /** 스크린리더용 접근성 레이블 */
     ariaLabel = '';
+    /**
+     * 토글 버튼일 때 눌림 상태 → `aria-pressed`로 반영. 미지정 시 속성 자체를 내보내지 않는다.
+     * (DOM `Element.ariaPressed`(문자열 예약 속성)와 충돌하므로 prop 이름은 `pressed`)
+     */
+    pressed;
     /** 호버 시 표시할 툴팁 텍스트 */
     tooltipText;
     /** 비활성 상태 여부 */
@@ -185,16 +190,16 @@ const SdGhostButton = class {
         const accessibleName = (this.ariaLabel ?? '').trim() || undefined;
         const tooltipText = (this.tooltipText ?? '').trim();
         const hasTooltip = tooltipText.length > 0;
-        return (index.h("button", { key: '9d2d352d36c7c34c67d8c57de6236d72727bd078', class: {
+        return (index.h("button", { key: '921a2e6e54aa3cbb0e6c14ad117d6ddcfc753618', class: {
                 'sd-ghost-button': true,
                 'sd-ghost-button--disabled': this.disabled,
-            }, type: "button", "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: this.disabled ? -1 : undefined, "aria-label": accessibleName, style: {
+            }, type: "button", "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: this.disabled ? -1 : undefined, "aria-label": accessibleName, "aria-pressed": this.pressed, style: {
                 '--sd-ghost-button-size': `${sizeConfig.size}px`,
                 '--sd-ghost-button-radius': `${GHOST_BUTTON_RADIUS[size]}px`,
                 '--sd-ghost-button-hover-bg': GHOST_BUTTON_HOVER_BG_COLORS[intent],
                 '--sd-ghost-button-hover-opacity': GHOST_BUTTON_HOVER_OPACITY,
                 '--sd-ghost-button-accent': GHOST_BUTTON_FOCUS_RING_COLOR,
-            }, onClick: this.handleClick, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur }, hasTooltip && this.isTooltipOpen && (index.h("sd-portal", { key: '1a73fb53be28a622d03e4f20be0b30e0e76bccd4', parentRef: this.hostEl, open: true, offset: [sizeConfig.size / 2, 4], placement: "top" }, index.h("div", { key: 'e4a349dbfbf2fd16eed9a46f5e2ed43935212cfe', class: "sd-ghost-button__tooltip-inner", "aria-hidden": "true" }, index.h("sd-tag", { key: '4aa1525a6da6ee72daf1815f1440d665bd1cf2c8', name: "square_xs_grey", label: tooltipText })))), index.h("sd-icon", { key: '4caac22d0d888c1998032697043e3a3761e012aa', name: this.icon, size: sizeConfig.icon, color: contentColor })));
+            }, onClick: this.handleClick, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur }, hasTooltip && this.isTooltipOpen && (index.h("sd-portal", { key: '90817207f1b8b5c1d55ce510dfb5ea90cf614bfd', parentRef: this.hostEl, open: true, offset: [sizeConfig.size / 2, 4], placement: "top" }, index.h("div", { key: '75379a80a230eb197d56df9eb3a79f4536c425d5', class: "sd-ghost-button__tooltip-inner", "aria-hidden": "true" }, index.h("sd-tag", { key: 'b7cc000adb2aaa3e9f65635d7e9cab7fceff62c3', name: "square_xs_grey", label: tooltipText })))), index.h("sd-icon", { key: '0df3fd325eb7e82b3da6427e22c05819f35d307e', name: this.icon, size: sizeConfig.icon, color: contentColor })));
     }
 };
 SdGhostButton.style = sdGhostButtonCss();
@@ -472,7 +477,7 @@ const SdPortal = class {
         this.close.emit();
     }
     render() {
-        return index.h("slot", { key: '623ee5423b145701ba9dd801d44874214f7a76e3' });
+        return index.h("slot", { key: '8b2a674bbd8c75c150940d53c0e5204e951cbb82' });
     }
     static get watchers() { return {
         "open": [{
@@ -668,9 +673,8 @@ const SdTag = class {
     label = '';
     /** 아이콘명 */
     icon;
-    // 아이콘이 좌측 배치되는 게 자연스러운 default. prop 이름 변경(isRight 등)은 public API breaking 이라 별도 이슈로 분리.
-    /** true이면 아이콘을 레이블 왼쪽에 배치 */
-    isLeft = true;
+    /** 아이콘을 레이블 왼쪽에 배치할지 여부 (기본값 true) */
+    iconLeft = true;
     /** 태그 너비 (숫자면 px, 문자열이면 그대로 적용). 미지정 시 콘텐츠 크기(fit-content) */
     width = '';
     componentWillLoad() {
@@ -699,7 +703,7 @@ const SdTag = class {
         const config = this.resolvedConfig;
         const iconNode = this.renderIcon(config.icon, config.iconSize);
         const width = this.resolvedWidth;
-        return (index.h(index.Host, { key: '37bb1fefd51f583b0a9dde9fe46cf843a48e8e13', style: width != null ? { '--sd-tag-width': width } : undefined }, index.h("span", { key: 'e996471849834802eaeff02abaadee1a2addac4f', class: "sd-tag", style: {
+        return (index.h(index.Host, { key: '9e893a8ec67d1baa12cdfe030d3ae15798666c0c', style: width != null ? { '--sd-tag-width': width } : undefined }, index.h("span", { key: 'fe6b05143032b33bec7cc95ce5355701e894d0ea', class: "sd-tag", style: {
                 '--sd-tag-background': config.background,
                 '--sd-tag-content': config.content,
                 '--sd-tag-height': config.height,
@@ -709,7 +713,7 @@ const SdTag = class {
                 '--sd-tag-font-weight': config.fontWeight,
                 '--sd-tag-line-height': config.lineHeight,
                 '--sd-tag-radius': config.radius,
-            }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, index.h("span", { key: '2e63073d1950046747521071ba5db5f9a404acef', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode)));
+            }, "aria-label": this.label || 'tag' }, this.icon && this.iconLeft && iconNode, index.h("span", { key: '9c4a07ac015672839dc5dda40d01609870979e04', class: "sd-tag__label" }, this.label), this.icon && !this.iconLeft && iconNode)));
     }
 };
 SdTag.style = sdTagCss();

package/dist/cjs/sd-guide.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-D12oddge.js');
-var system = require('./system-MjrAugX-.js');
+var index = require('./index-Jr8OU0y9.js');
+var system = require('./system-B4KkVpu2.js');
 var sanitizeInlineHtml = require('./sanitize-inline-html-CRCAeQ46.js');
 
 const guide = {

package/dist/cjs/sd-key-value-table.cjs.entry.js

@@ -1,16 +1,59 @@
 'use strict';
 
-var index = require('./index-D12oddge.js');
-var system = require('./system-MjrAugX-.js');
-var component_table = require('./component.table-POXY492T.js');
+var index = require('./index-Jr8OU0y9.js');
+var system = require('./system-B4KkVpu2.js');
 
-const t = component_table.tableTokens.table;
+const table = {
+	header: {
+		paddingX: "16",
+		gap: "4",
+		bg: "#F5FAFF",
+		typography: {
+			fontFamily: "Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif",
+			fontSize: "12",
+			lineHeight: "20"}},
+	body: {
+		typography: {
+			fontFamily: "Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif",
+			fontWeight: "400",
+			fontSize: "12",
+			lineHeight: "20"}
+	},
+	border: {
+		color: "#E1E1E1",
+		width: "1"
+	},
+	content: {
+		gap: "8"
+	},
+	radius: "8",
+	keyValue: {
+		body: {
+			paddingY: "8",
+			paddingX: {
+				"default": "8",
+				wide: "16"
+			}
+		},
+		height: "44",
+		search: {
+			paddingX: "32",
+			bg: "#F9F9F9"
+		}
+	}};
+var tableTokens = {
+	table: table
+};
+
+const t = tableTokens.table;
 const KEY_VALUE_TABLE_LAYOUT = {
     rowHeight: Number(t.keyValue.height),
     thWidth: 120,
     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),
@@ -39,7 +82,7 @@ const KEY_VALUE_TABLE_TYPOGRAPHY = {
     tdLineHeight: Number(t.body.typography.lineHeight),
 };
 
-const sdKeyValueTableCss = () => `sd-key-value-table{display:block}sd-key-value-table .sd-key-value-table__wrapper{display:flex;align-items:stretch;width:100%;border:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color);border-radius:var(--sd-kvt-radius);overflow:hidden}sd-key-value-table .sd-key-value-table__wrapper .sd-key-value-table{flex:1 1 auto;border:0;border-radius:0}sd-key-value-table .sd-key-value-table__wrapper.sd-key-value-table__wrapper--radius-useTop{border-top-left-radius:0;border-top-right-radius:0}sd-key-value-table .sd-key-value-table__wrapper.sd-key-value-table__wrapper--radius-full{border-radius:0}sd-key-value-table .sd-key-value-table__search-panel{display:flex;align-items:center;justify-content:center;flex:0 0 auto;padding:var(--sd-kvt-padding) var(--sd-kvt-search-padding-x);background:var(--sd-kvt-search-bg);border-left:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color)}sd-key-value-table .sd-key-value-table{width:100%;table-layout:fixed;border:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color);border-radius:var(--sd-kvt-radius);border-collapse:separate;border-spacing:0;overflow:hidden}sd-key-value-table .sd-key-value-table.sd-key-value-table--radius-useTop{border-top-left-radius:0;border-top-right-radius:0}sd-key-value-table .sd-key-value-table.sd-key-value-table--radius-full{border-radius:0}sd-key-value-table .sd-key-value-table__th,sd-key-value-table .sd-key-value-table__td{height:var(--sd-kvt-row-height);box-sizing:border-box;vertical-align:middle;text-align:left;font-weight:normal;border-top:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color)}sd-key-value-table .sd-key-value-table tbody>tr:first-child>.sd-key-value-table__th,sd-key-value-table .sd-key-value-table tbody>tr:first-child>.sd-key-value-table__td{border-top:0}sd-key-value-table .sd-key-value-table__th{padding:var(--sd-kvt-padding) var(--sd-kvt-th-padding-x);width:var(--sd-kvt-th-width);background:var(--sd-kvt-th-bg);color:var(--sd-kvt-th-color)}sd-key-value-table .sd-key-value-table__th-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sd-kvt-gap);width:100%;height:100%}sd-key-value-table .sd-key-value-table__label{display:inline-flex;align-items:center;gap:var(--sd-kvt-label-gap);font-family:var(--sd-kvt-label-font-family);font-size:var(--sd-kvt-label-font-size);font-weight:var(--sd-kvt-label-font-weight);line-height:var(--sd-kvt-label-line-height);color:var(--sd-kvt-th-color)}sd-key-value-table .sd-key-value-table__required{display:inline-flex;align-items:center;flex-shrink:0}sd-key-value-table .sd-key-value-table__help{display:inline-flex;align-items:center;flex-shrink:0}sd-key-value-table .sd-key-value-table__td{padding:var(--sd-kvt-padding);background:var(--sd-kvt-td-bg);color:var(--sd-kvt-td-color)}sd-key-value-table .sd-key-value-table__td-inner{display:flex;align-items:center;width:100%;height:100%}sd-key-value-table .sd-key-value-table__td-inner>slot{display:block;flex:1 1 auto;min-width:0}sd-key-value-table .sd-key-value-table__td-inner sd-input,sd-key-value-table .sd-key-value-table__td-inner sd-textarea,sd-key-value-table .sd-key-value-table__td-inner sd-number-input,sd-key-value-table .sd-key-value-table__td-inner sd-select,sd-key-value-table .sd-key-value-table__td-inner sd-date-picker,sd-key-value-table .sd-key-value-table__td-inner sd-date-range-picker,sd-key-value-table .sd-key-value-table__td-inner sd-file-picker{width:100%}sd-key-value-table .sd-key-value-table__text{font-family:var(--sd-kvt-td-font-family);font-size:var(--sd-kvt-td-font-size);font-weight:var(--sd-kvt-td-font-weight);line-height:var(--sd-kvt-td-line-height);color:var(--sd-kvt-td-color)}`;
+const sdKeyValueTableCss = () => `sd-key-value-table{display:block}sd-key-value-table .sd-key-value-table__wrapper{display:flex;align-items:stretch;width:100%;border:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color);border-radius:var(--sd-kvt-radius);overflow:hidden}sd-key-value-table .sd-key-value-table__wrapper .sd-key-value-table{flex:1 1 auto;border:0;border-radius:0}sd-key-value-table .sd-key-value-table__wrapper.sd-key-value-table__wrapper--radius-useTop{border-top-left-radius:0;border-top-right-radius:0}sd-key-value-table .sd-key-value-table__wrapper.sd-key-value-table__wrapper--radius-full{border-radius:0}sd-key-value-table .sd-key-value-table__search-panel{display:flex;align-items:center;justify-content:center;flex:0 0 auto;padding:var(--sd-kvt-padding) var(--sd-kvt-search-padding-x);background:var(--sd-kvt-search-bg);border-left:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color)}sd-key-value-table .sd-key-value-table{width:100%;table-layout:fixed;border:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color);border-radius:var(--sd-kvt-radius);border-collapse:separate;border-spacing:0;overflow:hidden}sd-key-value-table .sd-key-value-table.sd-key-value-table--radius-useTop{border-top-left-radius:0;border-top-right-radius:0}sd-key-value-table .sd-key-value-table.sd-key-value-table--radius-full{border-radius:0}sd-key-value-table .sd-key-value-table__th,sd-key-value-table .sd-key-value-table__td{height:var(--sd-kvt-row-height);box-sizing:border-box;vertical-align:middle;text-align:left;font-weight:normal;border-top:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color)}sd-key-value-table .sd-key-value-table tbody>tr:first-child>.sd-key-value-table__th,sd-key-value-table .sd-key-value-table tbody>tr:first-child>.sd-key-value-table__td{border-top:0}sd-key-value-table .sd-key-value-table__th{padding:var(--sd-kvt-padding) var(--sd-kvt-th-padding-x);width:var(--sd-kvt-th-width);background:var(--sd-kvt-th-bg);color:var(--sd-kvt-th-color)}sd-key-value-table .sd-key-value-table__th-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sd-kvt-gap);width:100%;height:100%}sd-key-value-table .sd-key-value-table__label{display:inline-flex;align-items:center;gap:var(--sd-kvt-label-gap);font-family:var(--sd-kvt-label-font-family);font-size:var(--sd-kvt-label-font-size);font-weight:var(--sd-kvt-label-font-weight);line-height:var(--sd-kvt-label-line-height);color:var(--sd-kvt-th-color)}sd-key-value-table .sd-key-value-table__required{display:inline-flex;align-items:center;flex-shrink:0}sd-key-value-table .sd-key-value-table__help{display:inline-flex;align-items:center;flex-shrink:0}sd-key-value-table .sd-key-value-table__td{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;width:100%;height:100%}sd-key-value-table .sd-key-value-table__td-inner>slot{display:block;flex:1 1 auto;min-width:0}sd-key-value-table .sd-key-value-table__td-inner sd-input,sd-key-value-table .sd-key-value-table__td-inner sd-textarea,sd-key-value-table .sd-key-value-table__td-inner sd-number-input,sd-key-value-table .sd-key-value-table__td-inner sd-select,sd-key-value-table .sd-key-value-table__td-inner sd-date-picker,sd-key-value-table .sd-key-value-table__td-inner sd-date-range-picker,sd-key-value-table .sd-key-value-table__td-inner sd-file-picker{width:100%}sd-key-value-table .sd-key-value-table__text{font-family:var(--sd-kvt-td-font-family);font-size:var(--sd-kvt-td-font-size);font-weight:var(--sd-kvt-td-font-weight);line-height:var(--sd-kvt-td-line-height);color:var(--sd-kvt-td-color)}`;
 
 const SdKeyValueTable = class {
     constructor(hostRef) {
@@ -52,6 +95,12 @@ const SdKeyValueTable = class {
      * 한 row에 여러 field를 넣으면 [th|td|th|td...] 형태로 렌더.
      */
     fields = [];
+    /**
+     * field name을 key로 하는 값 객체 (`{ [name]: value }`).
+     * 지정 시 해당 field의 값으로 사용되며, field별 `options.value`보다 우선합니다.
+     * `sdChange`의 `detail.values`와 함께 controlled 패턴으로 사용합니다.
+     */
+    values = {};
     /**
      * true이면 테이블 우측에 검색 버튼 패널을 표시. 클릭 시 `sdSearch` 이벤트 emit.
      */
@@ -63,44 +112,57 @@ const SdKeyValueTable = class {
      * - '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 index.h("sd-input", { width: "100%", ...(field.options ?? {}), onSdUpdate: onSdUpdate });
+                return index.h("sd-input", { width: "100%", ...options, onSdUpdate: onSdUpdate });
             case 'textarea':
-                return index.h("sd-textarea", { width: "100%", ...(field.options ?? {}), onSdUpdate: onSdUpdate });
+                return index.h("sd-textarea", { width: "100%", ...options, onSdUpdate: onSdUpdate });
             case 'number-input':
-                return index.h("sd-number-input", { width: "100%", ...(field.options ?? {}), onSdUpdate: onSdUpdate });
+                return index.h("sd-number-input", { width: "100%", ...options, onSdUpdate: onSdUpdate });
             case 'select':
-                return index.h("sd-select", { width: "100%", ...(field.options ?? {}), onSdUpdate: onSdUpdate });
+                return index.h("sd-select", { width: "100%", ...options, onSdUpdate: onSdUpdate });
             case 'radio': {
-                const { value, direction, ...rest } = field.options ?? {};
+                const { value, direction, ...rest } = options;
                 return (index.h("sd-radio-group", { ...rest, value: value, direction: direction ?? 'horizontal', onSdUpdate: onSdUpdate }));
             }
             case 'checkbox': {
-                const { value, ...rest } = field.options ?? {};
+                const { value, ...rest } = options;
                 return index.h("sd-checkbox", { ...rest, value: value, onSdUpdate: onSdUpdate });
             }
             case 'date-picker':
-                return index.h("sd-date-picker", { width: "100%", ...(field.options ?? {}), onSdUpdate: onSdUpdate });
+                return index.h("sd-date-picker", { width: "100%", ...options, onSdUpdate: onSdUpdate });
             case 'date-range-picker':
-                return (index.h("sd-date-range-picker", { width: "100%", ...(field.options ?? {}), onSdUpdate: onSdUpdate }));
+                return index.h("sd-date-range-picker", { width: "100%", ...options, onSdUpdate: onSdUpdate });
             case 'file-picker':
-                return index.h("sd-file-picker", { width: "100%", ...(field.options ?? {}), onSdUpdate: onSdUpdate });
+                return index.h("sd-file-picker", { width: "100%", ...options, onSdUpdate: onSdUpdate });
             case 'text':
             default:
-                return index.h("span", { class: "sd-key-value-table__text" }, field.options?.value ?? '');
+                return index.h("span", { class: "sd-key-value-table__text" }, options.value ?? '');
         }
     }
     renderHelpIcon(helpText) {
@@ -189,7 +251,13 @@ const SdKeyValueTable = class {
     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 (index.h("td", { key: `td-${r}-${c}`, class: "sd-key-value-table__td", rowSpan: tdRowSpan, colSpan: tdColSpan }, index.h("div", { class: "sd-key-value-table__td-inner" }, index.h("slot", { name: `field-${field.name}` }, this.renderField(field)))));
+        // text 타입(및 미지정 기본값)은 읽기 전용 콘텐츠라 넓은 paddingX(wide) 적용.
+        // 폼 필드 셀은 default paddingX 유지.
+        const isText = field.type == null || field.type === 'text';
+        return (index.h("td", { key: `td-${r}-${c}`, class: {
+                'sd-key-value-table__td': true,
+                'sd-key-value-table__td--text': isText,
+            }, rowSpan: tdRowSpan, colSpan: tdColSpan }, index.h("div", { class: "sd-key-value-table__td-inner" }, index.h("slot", { name: `field-${field.name}` }, this.renderField(field)))));
     }
     warnDuplicateNames() {
         const seen = new Set();
@@ -214,6 +282,8 @@ const SdKeyValueTable = class {
             '--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`,

package/dist/cjs/sd-linear-progress.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-D12oddge.js');
+var index = require('./index-Jr8OU0y9.js');
 var component_progress = require('./component.progress-DimGJZAd.js');
-var system = require('./system-MjrAugX-.js');
+var system = require('./system-B4KkVpu2.js');
 
 const LINEAR_PROGRESS_COLORS = {
     track: component_progress.progressTokens.progress.color.track,
@@ -52,7 +52,7 @@ const SdLinearProgress = class {
             clipPath: `inset(0 ${100 - this.clampedValue}% 0 0)`,
         };
         const valueText = `${Math.round(this.clampedValue)}%`;
-        return (index.h(index.Host, { key: 'c87705d4ca2e7d61de15412af8df8fe32aec6e56', style: hostStyle }, index.h("div", { key: '0343b5d209cf49e7d25bb7ede349eae791890e29', class: "sd-linear-progress__track" }, index.h("div", { key: '7771c6589c061d7bba7eb2ae88e1752d80912357', class: "sd-linear-progress__fill", style: fillStyle }), !this.indeterminate && (index.h("span", { key: '66f85b9d5f87d7c2aeafd6eadcdc3fb1739124c9', class: "sd-linear-progress__value sd-linear-progress__value--on-track" }, valueText)), !this.indeterminate && (index.h("span", { key: 'd8581b453770e4c8db55abddc6c57f9b90701786', class: "sd-linear-progress__value sd-linear-progress__value--on-fill", style: valueOnFillStyle }, valueText))), this.label && index.h("span", { key: '4223bfa7292cc9adeb9dca1ce18ee45cefc8d670', class: "sd-linear-progress__label" }, this.label)));
+        return (index.h(index.Host, { key: 'bb8b4b933b609a42d1c342b7b480d32a48527321', style: hostStyle }, index.h("div", { key: 'd127baf4c4cf49d5c6e04ada72636c9d3fd81733', class: "sd-linear-progress__track" }, index.h("div", { key: '6251da38b070cf9f064b22ed1ecb694da41f63ec', class: "sd-linear-progress__fill", style: fillStyle }), !this.indeterminate && (index.h("span", { key: '7b15d0383e4cc391a22e4fc7e2a85bc6cd076f80', class: "sd-linear-progress__value sd-linear-progress__value--on-track" }, valueText)), !this.indeterminate && (index.h("span", { key: '8755f23a83aede79a141a14b73337eacca0fc10d', class: "sd-linear-progress__value sd-linear-progress__value--on-fill", style: valueOnFillStyle }, valueText))), this.label && index.h("span", { key: 'c874dd1ca0cb86c90a84c318790639c0f4283255', class: "sd-linear-progress__label" }, this.label)));
     }
 };
 SdLinearProgress.style = sdLinearProgressCss();

package/dist/cjs/sd-loading-container.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-D12oddge.js');
+var index = require('./index-Jr8OU0y9.js');
 
 const sdLoadingContainerCss = () => `sd-loading-container .sd-loading-container{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:var(--sd-loading-container-z-index, 999);opacity:0;visibility:hidden;transition:opacity 0.2s ease, visibility 0s linear 0.2s;pointer-events:none}sd-loading-container .sd-loading-container--visible{opacity:1;visibility:visible;transition:opacity 0.2s ease, visibility 0s linear 0s;pointer-events:auto}sd-loading-container .sd-loading-container__backdrop{position:absolute;inset:0;background:rgba(0, 0, 0, 0.4)}sd-loading-container .sd-loading-container__content{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px}sd-loading-container .sd-loading-container__message{margin:0;color:#ffffff;font-size:14px;font-weight:500;line-height:22px;text-align:center;max-width:400px;word-break:keep-all}`;
 
@@ -40,10 +40,10 @@ const SdLoadingContainer = class {
         this.prevBodyOverflow = null;
     }
     render() {
-        return (index.h("div", { key: 'c2dad1bed0e513341a447f164fecbb2f879ed523', class: {
+        return (index.h("div", { key: 'c7821d4c50651217e48f424cbdfb9a32006afda4', class: {
                 'sd-loading-container': true,
                 'sd-loading-container--visible': this.visible,
-            }, "aria-hidden": this.visible ? 'false' : 'true' }, index.h("div", { key: '254c3cb5eeb25b6c69b3812fbaada2a26d6620e0', class: "sd-loading-container__backdrop" }), index.h("div", { key: '58ca4033b25302d8a7ea3f25e6b5e8aa7ce9f51c', class: "sd-loading-container__content" }, index.h("sd-circle-progress", { key: 'c8d48fa1814186a674d3f7c8b63bcd26541299ba', indeterminate: true, type: "inverse" }), this.message && index.h("p", { key: '899a5f32ceecb23b4f88b750aa634106bb42b394', class: "sd-loading-container__message" }, this.message))));
+            }, "aria-hidden": this.visible ? 'false' : 'true' }, index.h("div", { key: 'f7674699f3dd15edd74fc3224203b59ad2a96735', class: "sd-loading-container__backdrop" }), index.h("div", { key: 'cd361e1a1f470109298459cc2872be104e382015', class: "sd-loading-container__content" }, index.h("sd-circle-progress", { key: 'c856a1e9ab203040dd8bf0d01dbdf151718aaa3e', indeterminate: true, type: "inverse" }), this.message && index.h("p", { key: '8af15dba086fb024b652db5f776d384f00fd9cf7', class: "sd-loading-container__message" }, this.message))));
     }
 };
 SdLoadingContainer.style = sdLoadingContainerCss();

package/dist/cjs/sd-modal-container.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-D12oddge.js');
+var index = require('./index-Jr8OU0y9.js');
 var modalStack = require('./modal-stack-DucFLON7.js');
 
 const sdModalContainerCss = () => `sd-modal-container{display:block}sd-modal-container .sd-modal-container{position:fixed;inset:0;z-index:var(--sd-modal-container-z-index, 997);pointer-events:none}sd-modal-container .sd-modal-container__layer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}sd-modal-container .sd-modal-container__backdrop{position:absolute;inset:0;background:rgba(0, 0, 0, 0.4);opacity:0;transition:opacity 0.3s ease-out;pointer-events:none}sd-modal-container .sd-modal-container__backdrop--visible{opacity:1;pointer-events:auto}sd-modal-container .sd-modal-container__modal{position:relative;z-index:1;opacity:0;transform:scale(0);pointer-events:auto;transition:opacity 0.3s ease-out, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)}sd-modal-container .sd-modal-container__modal--visible{opacity:1;transform:scale(1)}sd-modal-container .sd-modal-container__modal--shake{animation:modal-shake 0.3s ease-out}@keyframes modal-shake{0%,100%{transform:scale(1)}25%{transform:scale(1.03)}50%{transform:scale(0.97)}75%{transform:scale(1.01)}}`;
@@ -257,7 +257,21 @@ const SdModalContainer = class {
         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 (!modalStack.isTopInteractiveModal(id))

package/dist/cjs/sd-pagination.cjs.entry.js

@@ -0,0 +1,173 @@
+'use strict';
+
+var index = require('./index-Jr8OU0y9.js');
+
+const pagination = {
+	height: "24",
+	paddingX: "6",
+	radius: "6",
+	gap: "12",
+	move: {
+		gap: "4"
+	},
+	icon: "12",
+	typography: {
+		"default": {
+			fontFamily: "Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif",
+			fontSize: "12",
+			fontWeight: "500",
+			lineHeight: "20"},
+		selected: {
+			fontWeight: "700"}
+	},
+	item: {
+		bg: {
+			hover: "#EEEEEE",
+			selected: "#E6F1FF"
+		},
+		content: {
+			"default": "#555555",
+			hover: "#004290",
+			selected: "#004290"
+		}
+	},
+	simple: {
+		gap: "8"
+	}
+};
+var paginationTokens = {
+	pagination: pagination
+};
+
+const PAGINATION_LAYOUT = {
+    height: `${paginationTokens.pagination.height}px`,
+    paddingX: `${paginationTokens.pagination.paddingX}px`,
+    radius: `${paginationTokens.pagination.radius}px`,
+    gap: `${paginationTokens.pagination.gap}px`,
+    moveGap: `${paginationTokens.pagination.move.gap}px`,
+    simpleGap: `${paginationTokens.pagination.simple.gap}px`,
+    iconSize: Number(paginationTokens.pagination.icon),
+};
+const PAGINATION_TYPOGRAPHY = {
+    fontFamily: paginationTokens.pagination.typography.default.fontFamily,
+    fontSize: `${paginationTokens.pagination.typography.default.fontSize}px`,
+    lineHeight: `${paginationTokens.pagination.typography.default.lineHeight}px`,
+    fontWeightDefault: paginationTokens.pagination.typography.default.fontWeight,
+    fontWeightSelected: paginationTokens.pagination.typography.selected.fontWeight,
+};
+const PAGINATION_COLORS = {
+    contentDefault: paginationTokens.pagination.item.content.default,
+    contentHover: paginationTokens.pagination.item.content.hover,
+    contentSelected: paginationTokens.pagination.item.content.selected,
+    bgHover: paginationTokens.pagination.item.bg.hover,
+    bgSelected: paginationTokens.pagination.item.bg.selected,
+    // TODO: 토큰 반영 후 교체 — nav 화살표 색상은 현재 토큰에 없음
+    iconDefault: '#888888',
+};
+
+const sdPaginationCss = () => `sd-pagination{display:inline-flex}.sd-pagination{display:inline-flex;align-items:center;gap:var(--sd-pagination-gap);font-family:var(--sd-pagination-font-family)}.sd-pagination__group{display:inline-flex;align-items:center;gap:var(--sd-pagination-move-gap);min-width:calc(var(--sd-pagination-height) * 2 + var(--sd-pagination-move-gap))}.sd-pagination__group--prev{justify-content:flex-end}.sd-pagination__group--next{justify-content:flex-start}.sd-pagination__numbers{display:inline-flex;align-items:center;gap:var(--sd-pagination-move-gap)}.sd-pagination__nav{display:inline-flex;align-items:center;justify-content:center;width:var(--sd-pagination-height);height:var(--sd-pagination-height);padding:0;background:transparent;border:0;border-radius:var(--sd-pagination-radius);cursor:pointer;outline:none}.sd-pagination__nav:hover{background-color:var(--sd-pagination-bg-hover)}.sd-pagination__item{display:inline-flex;align-items:center;justify-content:center;width:var(--sd-pagination-item-width);height:var(--sd-pagination-height);padding:0 var(--sd-pagination-padding-x);background:transparent;border:0;border-radius:var(--sd-pagination-radius);color:var(--sd-pagination-content);font-size:var(--sd-pagination-font-size);font-weight:var(--sd-pagination-font-weight-default);line-height:var(--sd-pagination-line-height);cursor:pointer;outline:none;box-sizing:border-box}.sd-pagination__item:hover{background-color:var(--sd-pagination-bg-hover);color:var(--sd-pagination-content-hover)}.sd-pagination__item--selected{background-color:var(--sd-pagination-bg-selected);color:var(--sd-pagination-content-selected);font-weight:var(--sd-pagination-font-weight-selected)}.sd-pagination__item--selected:hover{background-color:var(--sd-pagination-bg-selected);color:var(--sd-pagination-content-selected)}.sd-pagination__info{display:inline-flex;align-items:center;gap:var(--sd-pagination-simple-gap);height:var(--sd-pagination-height);padding:0 var(--sd-pagination-padding-x);color:var(--sd-pagination-content);font-size:var(--sd-pagination-font-size);font-weight:var(--sd-pagination-font-weight-default);line-height:var(--sd-pagination-line-height)}.sd-pagination__current{color:var(--sd-pagination-content-selected);font-weight:var(--sd-pagination-font-weight-selected)}`;
+
+const PER_PAGE = 10;
+const BUTTON_WIDTH = {
+    1: 24,
+    2: 34,
+    3: 40,
+    4: 48,
+    5: 56,
+};
+const SdPagination = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.pageChange = index.createEvent(this, "sdPageChange", 7);
+    }
+    /** 현재 페이지 번호 */
+    currentPage = 1;
+    /** 마지막 페이지 번호 */
+    lastPage = 1;
+    /** true이면 현재/마지막 페이지만 표시하는 단순 모드 */
+    simple = false;
+    /** 페이지가 변경될 때 새 페이지 번호를 전달합니다. */
+    pageChange;
+    get pageNumbers() {
+        const start = Math.floor((this.currentPage - 1) / PER_PAGE) * PER_PAGE + 1;
+        const end = Math.min(start + PER_PAGE - 1, this.lastPage);
+        return Array.from({ length: end - start + 1 }, (_, i) => start + i);
+    }
+    get buttonWidth() {
+        const lastPageNum = this.pageNumbers.at(-1) ?? 1;
+        const maxPageLength = lastPageNum.toString().length;
+        return BUTTON_WIDTH[maxPageLength] || BUTTON_WIDTH[1];
+    }
+    get isFirstGroup() {
+        return this.currentPage <= PER_PAGE;
+    }
+    get isLastGroup() {
+        const startPageGroup = Math.floor((this.currentPage - 1) / PER_PAGE) * PER_PAGE + 1;
+        return startPageGroup + PER_PAGE - 1 >= this.lastPage;
+    }
+    handlePageChange = (page) => {
+        if (page < 1 || page > this.lastPage)
+            return;
+        this.currentPage = page;
+        this.pageChange.emit(page);
+    };
+    handleGroupChange = (direction) => {
+        const delta = direction === 'forward' ? PER_PAGE : -PER_PAGE;
+        const newPage = Math.min(Math.max(this.currentPage + delta, 1), this.lastPage);
+        this.handlePageChange(newPage);
+    };
+    renderNavButton(iconName, ariaLabel, onClick) {
+        return (index.h("button", { type: "button", class: "sd-pagination__nav", "aria-label": ariaLabel, onClick: onClick }, index.h("sd-icon", { name: iconName, size: PAGINATION_LAYOUT.iconSize, color: PAGINATION_COLORS.iconDefault })));
+    }
+    renderPrevButtons() {
+        if (this.simple) {
+            if (this.currentPage <= 1)
+                return null;
+            return (index.h(index.Fragment, null, this.renderNavButton('chevronLeftEnd', 'Go to first page', () => this.handlePageChange(1)), this.renderNavButton('chevronLeft', 'Go to previous page', () => this.handlePageChange(this.currentPage - 1))));
+        }
+        if (this.isFirstGroup)
+            return null;
+        return (index.h(index.Fragment, null, this.renderNavButton('chevronLeftEnd', 'Go to first page', () => this.handlePageChange(1)), this.renderNavButton('chevronLeft', 'Go to previous page group', () => this.handleGroupChange('backward'))));
+    }
+    renderNextButtons() {
+        if (this.simple) {
+            if (this.currentPage >= this.lastPage)
+                return null;
+            return (index.h(index.Fragment, null, this.renderNavButton('chevronRight', 'Go to next page', () => this.handlePageChange(this.currentPage + 1)), this.renderNavButton('chevronRightEnd', 'Go to last page', () => this.handlePageChange(this.lastPage))));
+        }
+        if (this.isLastGroup)
+            return null;
+        return (index.h(index.Fragment, null, this.renderNavButton('chevronRight', 'Go to next page group', () => this.handleGroupChange('forward')), this.renderNavButton('chevronRightEnd', 'Go to last page', () => this.handlePageChange(this.lastPage))));
+    }
+    render() {
+        const cssVars = {
+            '--sd-pagination-height': PAGINATION_LAYOUT.height,
+            '--sd-pagination-padding-x': PAGINATION_LAYOUT.paddingX,
+            '--sd-pagination-radius': PAGINATION_LAYOUT.radius,
+            '--sd-pagination-gap': PAGINATION_LAYOUT.gap,
+            '--sd-pagination-move-gap': PAGINATION_LAYOUT.moveGap,
+            '--sd-pagination-simple-gap': PAGINATION_LAYOUT.simpleGap,
+            '--sd-pagination-font-family': PAGINATION_TYPOGRAPHY.fontFamily,
+            '--sd-pagination-font-size': PAGINATION_TYPOGRAPHY.fontSize,
+            '--sd-pagination-line-height': PAGINATION_TYPOGRAPHY.lineHeight,
+            '--sd-pagination-font-weight-default': PAGINATION_TYPOGRAPHY.fontWeightDefault,
+            '--sd-pagination-font-weight-selected': PAGINATION_TYPOGRAPHY.fontWeightSelected,
+            '--sd-pagination-content': PAGINATION_COLORS.contentDefault,
+            '--sd-pagination-content-hover': PAGINATION_COLORS.contentHover,
+            '--sd-pagination-content-selected': PAGINATION_COLORS.contentSelected,
+            '--sd-pagination-bg-hover': PAGINATION_COLORS.bgHover,
+            '--sd-pagination-bg-selected': PAGINATION_COLORS.bgSelected,
+            '--sd-pagination-item-width': `${this.buttonWidth}px`,
+        };
+        return (index.h("div", { key: '0b5a2e9aec83e6f6a8de3426e57b3f9a53623652', class: {
+                'sd-pagination': true,
+                'sd-pagination--simple': this.simple,
+            }, style: cssVars }, index.h("div", { key: 'aa53d0366ae4678950ecd3917fd0d7011dd9608d', class: "sd-pagination__group sd-pagination__group--prev" }, this.renderPrevButtons()), this.simple ? (index.h("div", { class: "sd-pagination__info" }, index.h("span", { class: "sd-pagination__current" }, this.currentPage), index.h("span", { class: "sd-pagination__divider" }, "/"), index.h("span", { class: "sd-pagination__last" }, this.lastPage))) : (index.h("div", { class: "sd-pagination__numbers" }, this.pageNumbers.map(n => (index.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))))), index.h("div", { key: '1aa72933c849af4fc886cc4e5f8962710c6c40bf', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
+    }
+};
+SdPagination.style = sdPaginationCss();
+
+exports.sd_pagination = SdPagination;