@sellmate/design-system 1.28.0 → 1.31.0

package/dist/collection/components/sd-date-range-picker/sd-date-range-picker.js

@@ -14,6 +14,11 @@ export class SdDateRangePicker {
     selectable;
     /** 최대 선택 가능한 날짜 범위 (일 단위) */
     maxRange;
+    /**
+     * 시간(시:분) 선택 푸터 사용 여부.
+     * true이면 value는 "YYYY-MM-DD HH:mm" 형식이 되고, 캘린더 하단에 시작·종료 시간 입력이 표시됩니다.
+     */
+    useTimePicker = false;
     /** 비활성 상태 여부 */
     disabled = false;
     /** 필드 너비 (숫자면 px, 문자열이면 그대로 적용) */
@@ -35,6 +40,8 @@ export class SdDateRangePicker {
     rules = [];
     /** 에러 상태 여부 */
     error = false;
+    /** 필드 상태 (없으면 error/rules 결과로 자동 결정) */
+    status;
     /** 레이블 영역 아이콘 */
     icon = undefined;
     /** 레이블 툴팁 텍스트 */
@@ -94,7 +101,9 @@ export class SdDateRangePicker {
         }
     };
     handleSelect = (e) => {
-        this.closeDropdown();
+        // 시간 선택 모드에서는 사용자가 시:분을 조정할 수 있도록 드롭다운을 닫지 않고 실시간 반영만 한다
+        if (!this.useTimePicker)
+            this.closeDropdown();
         this.value = e.detail;
         const nextValue = this.value;
         requestAnimationFrame(() => {
@@ -109,6 +118,14 @@ export class SdDateRangePicker {
             return '';
         return `${this.value[0]} ~ ${this.value[1]}`;
     }
+    static DEFAULT_PLACEHOLDER = 'YYYY-MM-DD ~ YYYY-MM-DD';
+    get resolvedPlaceholder() {
+        // placeholder를 따로 지정하지 않았고 시간 선택 모드이면 시:분을 포함한 기본 placeholder를 쓴다
+        if (this.useTimePicker && this.placeholder === SdDateRangePicker.DEFAULT_PLACEHOLDER) {
+            return 'YYYY-MM-DD HH:mm ~ YYYY-MM-DD HH:mm';
+        }
+        return this.placeholder;
+    }
     disconnectedCallback() {
         if (this.closeAnimationTimer)
             clearTimeout(this.closeAnimationTimer);
@@ -122,9 +139,9 @@ export class SdDateRangePicker {
             '--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
             '--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
         };
-        return (h("sd-field", { key: '00e25ab4608b5340b8be9e1dd19050968e34b758', 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, 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: '98179e2ec90e55f83e5deff6e36fc821fc103456', class: "sd-date-range-picker", ref: el => {
+        return (h("sd-field", { key: '01098a74a5066d2328409dcdf21bb38691adf455', 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, status: this.status, disabled: this.disabled, focused: this.focused, hovered: this.hovered, 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: 'dab4a666f5c144bbcbf3848528ce246c752ab906', class: "sd-date-range-picker", ref: el => {
                 this.triggerRef = el;
-            } }, h("sd-date-picker-trigger", { key: 'fe123228a851da602f0a5a8929fc20782742a24b', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: 'ee7eb14cc09fd067a8eeb9f19bd93178378d81b2', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-date-range-picker-calendar", { key: '8dc57a29f1ecd6811fb4538a96eea823dfebe080', value: this.value, selectable: this.selectable, maxRange: this.maxRange, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
+            } }, h("sd-date-picker-trigger", { key: '5aa378df1b53a2b8cc29e159e7bda0544210a81e', displayText: this.displayText, placeholder: this.resolvedPlaceholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '8d18658004dc009d869804bdabd31155117edde3', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-date-range-picker-calendar", { key: '0bf96efeed4c567052e690a83a70f27df85ccc64', value: this.value, selectable: this.selectable, maxRange: this.maxRange, useTimePicker: this.useTimePicker, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
     }
     static get is() { return "sd-date-range-picker"; }
     static get originalStyleUrls() {
@@ -246,6 +263,26 @@ export class SdDateRangePicker {
                 "reflect": false,
                 "attribute": "max-range"
             },
+            "useTimePicker": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\uC2DC\uAC04(\uC2DC:\uBD84) \uC120\uD0DD \uD478\uD130 \uC0AC\uC6A9 \uC5EC\uBD80.\ntrue\uC774\uBA74 value\uB294 \"YYYY-MM-DD HH:mm\" \uD615\uC2DD\uC774 \uB418\uACE0, \uCE98\uB9B0\uB354 \uD558\uB2E8\uC5D0 \uC2DC\uC791\u00B7\uC885\uB8CC \uC2DC\uAC04 \uC785\uB825\uC774 \uD45C\uC2DC\uB429\uB2C8\uB2E4."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "use-time-picker",
+                "defaultValue": "false"
+            },
             "disabled": {
                 "type": "boolean",
                 "mutable": false,
@@ -458,6 +495,25 @@ export class SdDateRangePicker {
                 "attribute": "error",
                 "defaultValue": "false"
             },
+            "status": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'pass' | 'error'",
+                    "resolved": "\"default\" | \"error\" | \"pass\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\uD544\uB4DC \uC0C1\uD0DC (\uC5C6\uC73C\uBA74 error/rules \uACB0\uACFC\uB85C \uC790\uB3D9 \uACB0\uC815)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "status"
+            },
             "icon": {
                 "type": "unknown",
                 "mutable": false,

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

@@ -7,7 +7,7 @@ export class SdDivider {
         const hostStyle = {
             '--sd-divider-color': DIVIDER_COLORS.default,
         };
-        return (h(Host, { key: '73be9d4cc38b230e4cff7f8ebcdc81bd2d56e0e7', style: hostStyle }, h("hr", { key: 'a4da09faca453df8cb6ea3ed00609d4e0c238a7a', "aria-orientation": this.vertical ? 'vertical' : 'horizontal' })));
+        return (h(Host, { key: '5e25f94dbe34f19280f6952e0a1bfbf4e4816264', style: hostStyle }, h("hr", { key: 'a47f51ba0dfc15819cd5cda169554433b978eb15', "aria-orientation": this.vertical ? 'vertical' : 'horizontal' })));
     }
     static get is() { return "sd-divider"; }
     static get originalStyleUrls() {

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

@@ -73,6 +73,10 @@ sd-field .sd-field--has-addon .sd-field__control .sd-field__addon {
   border-right: var(--sd-field-addon-border-width) solid var(--sd-field-addon-border-color);
   border-radius: calc(var(--sd-field-control-radius) - 1px) 0 0 calc(var(--sd-field-control-radius) - 1px);
 }
+sd-field .sd-field--multiline .sd-field__wrapper .sd-field__control {
+  height: auto;
+  min-height: var(--sd-field-wrapper-height);
+}
 sd-field .sd-field__wrapper {
   width: 100%;
   display: flex;

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

@@ -10,6 +10,8 @@ const FORM_PARENT_TAGS = [
     'sd-file-picker',
     'sd-date-picker',
     'sd-date-range-picker',
+    'sd-time-picker',
+    'sd-time-range-picker',
     'sd-chip-input',
 ];
 export class SdField {
@@ -48,6 +50,13 @@ export class SdField {
     label = '';
     /** 레이블 너비 */
     labelWidth = '';
+    /**
+     * 레이블 박스 높이 (숫자면 px). 미지정 시 size별 기본값 사용.
+     * multiline 등 컨트롤 박스가 커질 때 레이블을 첫 행에 맞추기 위해 사용한다.
+     */
+    labelHeight;
+    /** 멀티라인 컨트롤 — 컨트롤 높이를 고정하지 않고 min-height만 적용한다. */
+    multiline = false;
     /** 필드 우측 어드온 레이블 */
     addonLabel = '';
     /** 어드온 정렬 방향 */
@@ -178,7 +187,11 @@ export class SdField {
         };
         const labelCssVars = this.label !== ''
             ? {
-                '--sd-field-label-height': `${labelTokens.height}px`,
+                '--sd-field-label-height': this.labelHeight !== undefined && this.labelHeight !== '' && this.labelHeight !== 0
+                    ? typeof this.labelHeight === 'number'
+                        ? `${this.labelHeight}px`
+                        : this.labelHeight
+                    : `${labelTokens.height}px`,
                 '--sd-field-label-gap': `${labelTokens.gap}px`,
                 '--sd-field-label-font-size': `${labelTokens.fontSize}px`,
                 '--sd-field-label-line-height': `${labelTokens.lineHeight}px`,
@@ -210,19 +223,20 @@ export class SdField {
                     : {}),
             }
             : {};
-        return (h("div", { key: 'bce0bc8ccc19e41c2a61980bd12f07d7f8838569', class: {
+        return (h("div", { key: 'd29e49fe9ecf467f0c1ed443524fac2648dc9da4', class: {
                 'sd-field': true,
                 'sd-field--has-label': this.label !== '',
                 'sd-field--has-addon': addon !== '',
+                'sd-field--multiline': this.multiline,
                 'sd-field--borderless': this.borderless,
                 [this.fieldStatus]: this.fieldStatus !== '',
-            }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars, ...messageCssVars } }, h("div", { key: 'c6c4e3ec6e018ebd0dc6fbbae5fbaef4ea6503e5', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: 'bd778a24325412924e0a331db592535e4b4e542b', class: "sd-field__main" }, h("div", { key: '485cfbdbfa7299cb27d84e61306d6e2cf196d071', class: {
+            }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars, ...messageCssVars } }, h("div", { key: '396173067f4a8ce38ea8ea9f5a6b9d76303b16fa', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: '3e4aab5e10cf52f116aabfe1a8d36a806eb03af4', class: "sd-field__main" }, h("div", { key: 'edbe4443387935e2b51469339284024429f1f0d3', class: {
                 'sd-field__control': true,
                 'sd-field__control--has-addon': addon !== '',
             }, style: this.width !== '' && this.width !== 0
                 ? { width: typeof this.width === 'number' ? `${this.width}px` : this.width }
-                : {} }, addon && (h("div", { key: '510238ac22b7e923724cc20abf2541adbddcb594', class: "sd-field__addon" }, this.icon && (h("sd-icon", { key: '2cca5b62cbe56050acd536764c33cbc3009f740b', name: this.icon.name, size: this.icon.size ??
-                Number(FIELD_LABEL_SIZE_MAP[(this.size in FIELD_LABEL_SIZE_MAP ? this.size : 'sm')].icon), color: this.icon.color, rotate: this.icon.rotate })), addon)), h("slot", { key: '470c0d559409a11f1c5650e88a50555a4656d3f9' })), this.errorMsg !== '' || this.errorMessage !== '' ? (h("div", { class: "sd-field__error-message" }, this.errorMsg !== '' ? this.errorMsg : this.errorMessage)) : (this.hint !== '' && h("div", { class: "sd-field__hint" }, this.hint))))));
+                : {} }, addon && (h("div", { key: '7ac28abf5f37b7ada42b16f81227afb5c7f8d656', class: "sd-field__addon" }, this.icon && (h("sd-icon", { key: 'd995424c6f620b090006cdbcf8645d2ff822e802', name: this.icon.name, size: this.icon.size ??
+                Number(FIELD_LABEL_SIZE_MAP[(this.size in FIELD_LABEL_SIZE_MAP ? this.size : 'sm')].icon), color: this.icon.color, rotate: this.icon.rotate })), addon)), h("slot", { key: 'd105a65b5c926b5db9dd1d68239c0a2015739aba' })), this.errorMsg !== '' || this.errorMessage !== '' ? (h("div", { class: "sd-field__error-message" }, this.errorMsg !== '' ? this.errorMsg : this.errorMessage)) : (this.hint !== '' && h("div", { class: "sd-field__hint" }, this.hint))))));
     }
     renderLabel(label) {
         if (label == null || label === '')
@@ -554,6 +568,45 @@ export class SdField {
                 "attribute": "label-width",
                 "defaultValue": "''"
             },
+            "labelHeight": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | string",
+                    "resolved": "number | string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\uB808\uC774\uBE14 \uBC15\uC2A4 \uB192\uC774 (\uC22B\uC790\uBA74 px). \uBBF8\uC9C0\uC815 \uC2DC size\uBCC4 \uAE30\uBCF8\uAC12 \uC0AC\uC6A9.\nmultiline \uB4F1 \uCEE8\uD2B8\uB864 \uBC15\uC2A4\uAC00 \uCEE4\uC9C8 \uB54C \uB808\uC774\uBE14\uC744 \uCCAB \uD589\uC5D0 \uB9DE\uCD94\uAE30 \uC704\uD574 \uC0AC\uC6A9\uD55C\uB2E4."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-height"
+            },
+            "multiline": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\uBA40\uD2F0\uB77C\uC778 \uCEE8\uD2B8\uB864 \u2014 \uCEE8\uD2B8\uB864 \uB192\uC774\uB97C \uACE0\uC815\uD558\uC9C0 \uC54A\uACE0 min-height\uB9CC \uC801\uC6A9\uD55C\uB2E4."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "multiline",
+                "defaultValue": "false"
+            },
             "addonLabel": {
                 "type": "string",
                 "mutable": false,

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

@@ -2,17 +2,24 @@ import filePickerTokens from "../../tokens/generated/component.filepicker.json";
 import fieldTokens from "../../tokens/generated/component.field.json";
 import listBoxTokens from "../../tokens/generated/component.listBox.json";
 const fp = filePickerTokens.filepicker;
-export const FILE_PICKER_LAYOUT = {
-    height: fp.sm.height,
-    paddingX: fp.sm.paddingX,
-    gap: fp.sm.gap,
-    radius: fp.sm.radius,
-    borderWidth: fp.sm.borderWidth,
-    fontSize: fp.sm.typography.fontSize,
-    lineHeight: fp.sm.typography.lineHeight,
-    fontWeight: fp.sm.typography.fontWeight,
-    iconSize: fp.sm.icon,
+const buildLayout = (s) => ({
+    height: fp[s].height,
+    paddingX: fp[s].paddingX,
+    gap: fp[s].gap,
+    radius: fp[s].radius,
+    borderWidth: fp[s].borderWidth,
+    fontSize: fp[s].typography.fontSize,
+    lineHeight: fp[s].typography.lineHeight,
+    fontWeight: fp[s].typography.fontWeight,
+    iconSize: fp[s].icon,
     contentsGap: fieldTokens.field.contents.gap,
+});
+/** 기본(sm) 레이아웃 — 하위호환용 단일 export */
+export const FILE_PICKER_LAYOUT = buildLayout('sm');
+/** size별 레이아웃 맵 */
+export const FILE_PICKER_LAYOUTS = {
+    sm: FILE_PICKER_LAYOUT,
+    md: buildLayout('md'),
 };
 export const FILE_PICKER_COLORS = {
     border: fp.border,

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, FILE_PICKER_LIST_BOX, } from "./sd-file-picker.config";
+import { FILE_PICKER_LAYOUT, FILE_PICKER_LAYOUTS, FILE_PICKER_COLORS, FILE_PICKER_LIST_BOX, } from "./sd-file-picker.config";
 export class SdFilePicker {
     el;
     /** 선택된 파일 값 */
@@ -24,6 +24,8 @@ export class SdFilePicker {
     /** 최대 파일 개수 */
     maxFiles;
     // sd-field 패스스루 props
+    /** 필드 크기 */
+    size = 'sm';
     /** 폼 연동용 name 속성 */
     name = nanoid();
     /** 레이블 텍스트 */
@@ -226,7 +228,7 @@ export class SdFilePicker {
     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) })))));
+        return (h("div", { class: "sd-file-picker__chip-list" }, this.internalValue.map((file, index) => (h("sd-chip", { value: file.name, editable: false, onSdRemove: () => this.handleChipRemove(index) })))));
     }
     renderListbox() {
         if (!this.hasChips() || !this.isListboxOpen)
@@ -252,38 +254,39 @@ export class SdFilePicker {
     render() {
         const hasFiles = this.hasFiles();
         const displayText = this.getDisplayText();
+        const layout = FILE_PICKER_LAYOUTS[this.size] ?? FILE_PICKER_LAYOUT;
         const cssVars = {
-            '--sd-file-picker-font-size': `${FILE_PICKER_LAYOUT.fontSize}px`,
-            '--sd-file-picker-line-height': `${FILE_PICKER_LAYOUT.lineHeight}px`,
-            '--sd-file-picker-font-weight': FILE_PICKER_LAYOUT.fontWeight,
-            '--sd-file-picker-padding-x': `${FILE_PICKER_LAYOUT.paddingX}px`,
-            '--sd-file-picker-gap': `${FILE_PICKER_LAYOUT.gap}px`,
+            '--sd-file-picker-font-size': `${layout.fontSize}px`,
+            '--sd-file-picker-line-height': `${layout.lineHeight}px`,
+            '--sd-file-picker-font-weight': layout.fontWeight,
+            '--sd-file-picker-padding-x': `${layout.paddingX}px`,
+            '--sd-file-picker-gap': `${layout.gap}px`,
             '--sd-file-picker-text-color': FILE_PICKER_COLORS.text.default,
             '--sd-file-picker-placeholder-color': FILE_PICKER_COLORS.text.placeholder,
             '--sd-file-picker-disabled-color': FILE_PICKER_COLORS.text.disabled,
-            // sd-field 시스템 변수 override
-            '--sd-system-size-field-sm-height': `${FILE_PICKER_LAYOUT.height}px`,
-            '--sd-system-radius-field-sm': `${FILE_PICKER_LAYOUT.radius}px`,
+            // sd-field 시스템 변수 override (size에 맞춰)
+            [`--sd-system-size-field-${this.size}-height`]: `${layout.height}px`,
+            [`--sd-system-radius-field-${this.size}`]: `${layout.radius}px`,
         };
         const showListbox = this.multiple && this.useMultipleListBox;
-        const content = (h("div", { key: '692bb28ba1adaa90317e18c6b824ab7d2287eb96', role: "button", tabindex: this.disabled ? -1 : 0, class: "sd-file-picker__content", ref: el => (this.contentRef = el), onClick: this.handleClick, onKeyDown: e => {
+        const content = (h("div", { key: 'd1c3af9860038ddb11d540af8312ad59d051524f', 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: '7a1cddff8097952c0c9eda9ae8d1b46b4a18967e', 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: '2f7dffb5bfc39efb0eace252a45aaaa23091d337', name: "attachFile", size: Number(FILE_PICKER_LAYOUT.iconSize), color: this.getIconColor(), class: "sd-file-picker__icon" }), h("div", { key: '1a6ae3daa59c7befebcfcfdcbbb2c46a32c6c40c', ref: el => (this.fileNamesRef = el), class: {
+            } }, h("input", { key: '760c38cd73d0a2a3d0832c5597c0e22bf737bb06', 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: '96ff0bf43eb3f17df92bd8834cd38a1ae36ad475', name: "attachFile", size: Number(layout.iconSize), color: this.getIconColor(), class: "sd-file-picker__icon" }), h("div", { key: '0757b8b734e21fcf7bed04d7306ee3a9d202f950', ref: el => (this.fileNamesRef = el), class: {
                 'sd-file-picker__text': true,
                 'sd-file-picker__text--placeholder': !hasFiles,
                 'sd-file-picker__text--active': hasFiles,
-            } }, displayText), showListbox && hasFiles && !this.disabled && (h("sd-ghost-button", { key: '895eafa47b1e1d851794fd471b304f8458bcac0f', icon: "caretDown", size: "xxs", ariaLabel: "toggle file list", disabled: this.disabled, class: {
+            } }, displayText), showListbox && hasFiles && !this.disabled && (h("sd-ghost-button", { key: '8e42d38452d00256147ee65e614bdeb7040917d7', 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: '38d3fe31be05ae66a170671ffb4855bce4984630', 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: 'bb94815d7149ce9f1117828f893224c8bc1dbc50', class: "sd-file-picker__tooltip" }, displayText))));
-        return (h("div", { key: '3ada174508214a9fafd4f7f228ff52eb60aa76e4', class: {
+            }, onClick: this.handleListboxToggle })), !this.disabled && hasFiles && (h("sd-ghost-button", { key: '6f65042ce5e4efa1b6ab126653d434ca77cdd790', 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: 'b41146f39c384a5954dca22f2d3da767a63ef0c0', class: "sd-file-picker__tooltip" }, displayText))));
+        return (h("div", { key: '858fea100a9317ac6806ae40699e9f5608394e10', 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: '29314b3ba5fc7c6b7d2f1a93a14381d9fb91bcfc', 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()));
+            }, style: cssVars }, h("sd-field", { key: '1b7a6a57e4e46c253bd9f77c500dabf92edc2ae0', borderless: this.inline, size: this.size, 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() {
@@ -497,6 +500,33 @@ export class SdFilePicker {
                 "reflect": false,
                 "attribute": "max-files"
             },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "FieldSize",
+                    "resolved": "\"md\" | \"sm\"",
+                    "references": {
+                        "FieldSize": {
+                            "location": "import",
+                            "path": "../sd-field/sd-field.config",
+                            "id": "src/components/sd-field/sd-field.config.ts::FieldSize",
+                            "referenceLocation": "FieldSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\uD544\uB4DC \uD06C\uAE30"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'sm'"
+            },
             "name": {
                 "type": "string",
                 "mutable": false,

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

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

package/dist/collection/components/sd-ghost-button/sd-ghost-button.js

@@ -9,6 +9,11 @@ export class SdGhostButton {
     intent = 'default';
     /** 스크린리더용 접근성 레이블 */
     ariaLabel = '';
+    /**
+     * 토글 버튼일 때 눌림 상태 → `aria-pressed`로 반영. 미지정 시 속성 자체를 내보내지 않는다.
+     * (DOM `Element.ariaPressed`(문자열 예약 속성)와 충돌하므로 prop 이름은 `pressed`)
+     */
+    pressed;
     /** 호버 시 표시할 툴팁 텍스트 */
     tooltipText;
     /** 비활성 상태 여부 */
@@ -66,16 +71,16 @@ export class SdGhostButton {
         const accessibleName = (this.ariaLabel ?? '').trim() || undefined;
         const tooltipText = (this.tooltipText ?? '').trim();
         const hasTooltip = tooltipText.length > 0;
-        return (h("button", { key: '9d2d352d36c7c34c67d8c57de6236d72727bd078', class: {
+        return (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 && (h("sd-portal", { key: '1a73fb53be28a622d03e4f20be0b30e0e76bccd4', parentRef: this.hostEl, open: true, offset: [sizeConfig.size / 2, 4], placement: "top" }, h("div", { key: 'e4a349dbfbf2fd16eed9a46f5e2ed43935212cfe', class: "sd-ghost-button__tooltip-inner", "aria-hidden": "true" }, h("sd-tag", { key: '4aa1525a6da6ee72daf1815f1440d665bd1cf2c8', name: "square_xs_grey", label: tooltipText })))), 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 && (h("sd-portal", { key: '90817207f1b8b5c1d55ce510dfb5ea90cf614bfd', parentRef: this.hostEl, open: true, offset: [sizeConfig.size / 2, 4], placement: "top" }, h("div", { key: '75379a80a230eb197d56df9eb3a79f4536c425d5', class: "sd-ghost-button__tooltip-inner", "aria-hidden": "true" }, h("sd-tag", { key: 'b7cc000adb2aaa3e9f65635d7e9cab7fceff62c3', name: "square_xs_grey", label: tooltipText })))), h("sd-icon", { key: '0df3fd325eb7e82b3da6427e22c05819f35d307e', name: this.icon, size: sizeConfig.icon, color: contentColor })));
     }
     static get is() { return "sd-ghost-button"; }
     static get originalStyleUrls() {
@@ -188,6 +193,25 @@ export class SdGhostButton {
                 "attribute": "aria-label",
                 "defaultValue": "''"
             },
+            "pressed": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\uD1A0\uAE00 \uBC84\uD2BC\uC77C \uB54C \uB20C\uB9BC \uC0C1\uD0DC \u2192 `aria-pressed`\uB85C \uBC18\uC601. \uBBF8\uC9C0\uC815 \uC2DC \uC18D\uC131 \uC790\uCCB4\uB97C \uB0B4\uBCF4\uB0B4\uC9C0 \uC54A\uB294\uB2E4.\n(DOM `Element.ariaPressed`(\uBB38\uC790\uC5F4 \uC608\uC57D \uC18D\uC131)\uC640 \uCDA9\uB3CC\uD558\uBBC0\uB85C prop \uC774\uB984\uC740 `pressed`)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-pressed"
+            },
             "tooltipText": {
                 "type": "string",
                 "mutable": false,

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: '7ec67f4433bff2a7d2f1b44935f761d79f0e8681', 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: '6c0118c2610f06d13d4a38a857bf37c7ad9508d0', class: "sd-input__content" }, h("slot", { key: '31cd8fe72ab21cb7a562accff98545fdf59efa80', name: "prefix" }), h("input", { key: '47579f31e9255bda6d5623eca8071ffdafd0ca55', 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: 'f2d6e313c8c542d88c252e26cbb2618977fda5fa', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && !this.readonly && (h("sd-ghost-button", { key: 'b24cb32d5963b244aef76e31f1c0f350d316be5c', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
+        return (h("sd-field", { key: '66c7d6a9292bf8129fea6a33d2288733c264a39f', 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: 'b429ae6e521440eb917b17b10525ff3d3767a50d', class: "sd-input__content" }, h("slot", { key: 'dc1cd825ff1bea6484eada71d5aff621f82522c2', name: "prefix" }), h("input", { key: '93bd923644ac7660c2c9be28e4c64d39d93365c3', 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: 'ec2f67a7ae01ebbaaa1f48f1e231f6fe2cfb413c', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && !this.readonly && (h("sd-ghost-button", { key: 'de33f6902ab5560e151ef13e01ef84eea14da17d', 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: '9592350fd3820fa8c8af637cb84f2d4517d6decd', 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: 'db07c28cede67dbec93454b5ea90e94f72c5f313', 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;
@@ -200,8 +200,8 @@ export class SdInput {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'text' | 'password' | 'email'",
-                    "resolved": "\"email\" | \"password\" | \"text\"",
+                    "original": "'text' | 'password' | 'email' | 'number' | 'tel' | 'search' | 'url'",
+                    "resolved": "\"email\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"url\"",
                     "references": {}
                 },
                 "required": false,

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;