@sellmate/design-system 1.29.0 → 1.31.0

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

@@ -1,7 +1,7 @@
 import { h, Fragment } from "@stencil/core";
 import { today, addDays } from "../../../utils/date";
 import { useDatePicker } from "../../../modules/useDatePicker";
-import { CALENDAR_LAYOUT, RANGE_LAYOUT, WEEK_LABELS } from "../sd-date-range-picker.config";
+import { CALENDAR_LAYOUT, RANGE_LAYOUT, TIME_LAYOUT, WEEK_LABELS, } from "../sd-date-range-picker.config";
 export class SdDateRangePickerCalendar {
     /** 선택된 날짜 범위 [시작일, 종료일] */
     value = null;
@@ -9,11 +9,20 @@ export class SdDateRangePickerCalendar {
     selectable;
     /** 최대 선택 가능 일 수 */
     maxRange;
+    /** 시간(시:분) 선택 푸터 사용 여부 */
+    useTimePicker = false;
     currentYear;
     currentMonth;
     pendingStart = '';
     hoverDate = '';
     displayValue = null;
+    // 시:분은 2자리 미만도 허용하기 위해 문자열로 관리하고 emit/blur 시 패딩한다
+    startHour = '00';
+    startMinute = '00';
+    endHour = '00';
+    endMinute = '00';
+    /** 직접 emit한 값이 value prop으로 되돌아오는 에코를 구분해 시간 입력 clobber를 막는다 */
+    lastEmitted = '';
     /** 날짜 범위 선택 시 발생합니다. */
     select;
     /** 달력 뷰가 변경될 때 발생합니다. */
@@ -26,13 +35,31 @@ export class SdDateRangePickerCalendar {
         this.syncFromValue();
     }
     syncFromValue() {
-        const base = this.value?.[0] || today;
+        // 자신이 emit한 값이 그대로 돌아온 경우(에코)에는 시간 입력 상태를 건드리지 않는다
+        if (this.useTimePicker && JSON.stringify(this.value) === this.lastEmitted)
+            return;
+        const start = this.splitDateTime(this.value?.[0]);
+        const end = this.splitDateTime(this.value?.[1]);
+        const base = start.date || today;
         const [year, month] = base.split('-').map(Number);
         this.currentYear = year;
         this.currentMonth = month;
         this.pendingStart = '';
         this.hoverDate = '';
-        this.displayValue = this.value ? [this.value[0], this.value[1]] : null;
+        // displayValue는 날짜 부분만 보관 — 캘린더 그리드 로직은 시간과 무관하게 동작한다
+        this.displayValue = this.value ? [start.date, end.date] : null;
+        this.startHour = start.hour;
+        this.startMinute = start.minute;
+        this.endHour = end.hour;
+        this.endMinute = end.minute;
+    }
+    /** "YYYY-MM-DD HH:mm" 또는 "YYYY-MM-DD"를 날짜/시/분으로 분리한다 */
+    splitDateTime(v) {
+        if (v == null || v === '')
+            return { date: '', hour: '00', minute: '00' };
+        const [date = '', time = ''] = v.split(' ');
+        const [hour = '00', minute = '00'] = time.split(':');
+        return { date, hour, minute };
     }
     get rightYear() {
         return this.currentMonth === 12 ? this.currentYear + 1 : this.currentYear;
@@ -139,13 +166,69 @@ export class SdDateRangePickerCalendar {
             this.pendingStart = cell.date;
             this.displayValue = null;
             this.hoverDate = '';
+            // 새 범위 선택을 시작하면 시작=00:00, 종료=23:59(하루 전체)로 초기화한다
+            if (this.useTimePicker) {
+                this.startHour = '00';
+                this.startMinute = '00';
+                this.endHour = '23';
+                this.endMinute = '59';
+            }
             return;
         }
         const newRange = [this.pendingStart, cell.date];
         this.pendingStart = '';
         this.hoverDate = '';
         this.displayValue = newRange;
-        this.select.emit(newRange);
+        this.emitRange(newRange[0], newRange[1]);
+    }
+    /** 날짜 범위(+ useTimePicker면 시:분)를 결합해 sdSelect로 emit한다 */
+    emitRange(startDate, endDate) {
+        const range = this.useTimePicker
+            ? [
+                `${startDate} ${this.pad(this.startHour)}:${this.pad(this.startMinute)}`,
+                `${endDate} ${this.pad(this.endHour)}:${this.pad(this.endMinute)}`,
+            ]
+            : [startDate, endDate];
+        this.lastEmitted = JSON.stringify(range);
+        this.select.emit(range);
+    }
+    pad(v) {
+        return String(Number(v) || 0).padStart(2, '0');
+    }
+    /** 시:분 입력 — 숫자만/2자리로 제한하고 범위(시 0~23, 분 0~59)로 클램프한다 */
+    handleTimeInput(which, part, event) {
+        const input = event.target;
+        const digits = input.value.replace(/\D/g, '').slice(0, 2);
+        const max = part === 'h' ? 23 : 59;
+        const next = digits !== '' && Number(digits) > max ? String(max) : digits;
+        input.value = next;
+        this.setTimePart(which, part, next);
+        // 범위가 확정된 상태면 실시간으로 재emit한다
+        if (this.displayValue != null && this.displayValue[0] !== '' && this.displayValue[1] !== '') {
+            this.emitRange(this.displayValue[0], this.displayValue[1]);
+        }
+    }
+    handleTimeBlur(which, part) {
+        this.setTimePart(which, part, this.pad(this.getTimePart(which, part)));
+    }
+    getTimePart(which, part) {
+        if (which === 'start')
+            return part === 'h' ? this.startHour : this.startMinute;
+        return part === 'h' ? this.endHour : this.endMinute;
+    }
+    setTimePart(which, part, value) {
+        if (which === 'start') {
+            if (part === 'h')
+                this.startHour = value;
+            else
+                this.startMinute = value;
+        }
+        else {
+            if (part === 'h')
+                this.endHour = value;
+            else
+                this.endMinute = value;
+        }
     }
     handleDayHover(cell) {
         if (!cell.inCurrentMonth)
@@ -211,6 +294,22 @@ export class SdDateRangePickerCalendar {
                 }, disabled: !cell.inCurrentMonth || isDisabled, tabindex: !cell.inCurrentMonth ? -1 : undefined, "aria-hidden": !cell.inCurrentMonth ? 'true' : undefined, onClick: () => this.handleDayClick(cell), onMouseEnter: () => this.handleDayHover(cell) }, h("span", { class: "sd-date-range-picker-calendar__day-circle" }, cell.inCurrentMonth ? cell.day : '')));
         }))));
     }
+    renderTimeSection(which, date, suffix) {
+        const active = date !== '';
+        const [year = '', month = '', day = ''] = active ? date.split('-') : [];
+        const hour = which === 'start' ? this.startHour : this.endHour;
+        const minute = which === 'start' ? this.startMinute : this.endMinute;
+        const renderNum = (n, strip) => (h("span", { class: "sd-date-range-picker-calendar__time-num" }, active && n !== '' ? (strip ? String(Number(n)) : n) : '-'));
+        return (h("div", { class: {
+                'sd-date-range-picker-calendar__time-section': true,
+                'sd-date-range-picker-calendar__time-section--active': active,
+            } }, h("div", { class: "sd-date-range-picker-calendar__time-date" }, renderNum(year, false), h("span", { class: "sd-date-range-picker-calendar__time-unit" }, "\uB144"), renderNum(month, true), h("span", { class: "sd-date-range-picker-calendar__time-unit" }, "\uC6D4"), renderNum(day, true), h("span", { class: "sd-date-range-picker-calendar__time-unit" }, "\uC77C")), h("div", { class: "sd-date-range-picker-calendar__time-input-group" }, h("input", { type: "text", inputMode: "numeric", maxLength: 2, class: "sd-date-range-picker-calendar__time-input", placeholder: "--", "aria-label": `${suffix} 시`, disabled: !active, value: active ? hour : '', onInput: e => this.handleTimeInput(which, 'h', e), onBlur: () => this.handleTimeBlur(which, 'h') }), h("span", { class: "sd-date-range-picker-calendar__time-colon" }, ":"), h("input", { type: "text", inputMode: "numeric", maxLength: 2, class: "sd-date-range-picker-calendar__time-input", placeholder: "--", "aria-label": `${suffix} 분`, disabled: !active, value: active ? minute : '', onInput: e => this.handleTimeInput(which, 'm', e), onBlur: () => this.handleTimeBlur(which, 'm') })), h("span", { class: "sd-date-range-picker-calendar__time-suffix" }, suffix)));
+    }
+    renderTimeFooter() {
+        const startDate = this.pendingStart || this.displayValue?.[0] || '';
+        const endDate = this.displayValue?.[1] || '';
+        return (h(Fragment, null, h("span", { class: "sd-date-range-picker-calendar__time-divider", "aria-hidden": "true" }), h("div", { class: "sd-date-range-picker-calendar__time" }, this.renderTimeSection('start', startDate, '부터'), this.renderTimeSection('end', endDate, '까지'))));
+    }
     render() {
         const cssVars = {
             '--calendar-bg': CALENDAR_LAYOUT.bg,
@@ -243,8 +342,31 @@ export class SdDateRangePickerCalendar {
             '--range-height': `${RANGE_LAYOUT.height}px`,
             '--range-panel-gap': `${RANGE_LAYOUT.panelGap}px`,
             '--range-divider': RANGE_LAYOUT.divider,
+            '--time-bg-default': TIME_LAYOUT.bgDefault,
+            '--time-bg-selected': TIME_LAYOUT.bgSelected,
+            '--time-date-label': TIME_LAYOUT.dateLabel,
+            '--time-date-unit': TIME_LAYOUT.dateUnit,
+            '--time-date-gap': `${TIME_LAYOUT.dateGap}px`,
+            '--time-radius': `${TIME_LAYOUT.radius}px`,
+            '--time-padding-x': `${TIME_LAYOUT.paddingX}px`,
+            '--time-padding-y': `${TIME_LAYOUT.paddingY}px`,
+            '--time-gap': `${TIME_LAYOUT.gap}px`,
+            '--time-section-gap': `${TIME_LAYOUT.sectionGap}px`,
+            '--time-unit-gap': `${TIME_LAYOUT.unitGap}px`,
+            '--time-font-size': `${TIME_LAYOUT.fontSize}px`,
+            '--time-line-height': `${TIME_LAYOUT.lineHeight}px`,
+            '--time-font-weight': TIME_LAYOUT.fontWeight,
+            '--time-input-height': `${TIME_LAYOUT.input.height}px`,
+            '--time-input-radius': `${TIME_LAYOUT.input.radius}px`,
+            '--time-input-border': TIME_LAYOUT.input.border,
+            '--time-input-border-focus': TIME_LAYOUT.input.borderFocus,
+            '--time-input-text': TIME_LAYOUT.input.text,
+            '--time-input-placeholder': TIME_LAYOUT.input.placeholder,
         };
-        return (h(Fragment, { key: '21999354836fc4068eecc9d115fb4c5e28a8f411' }, h("div", { key: '1bc993c9e5cb6f02152591c3f70b68fb580a392b', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), h("div", { key: '09564bf7c14a55c7be56726fefbb6cec793df783', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), h("span", { key: '5d8910e7c463c33ad8719a293a616b7f50095532', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
+        return (h(Fragment, { key: '7d368d23f2c9d2b28c847a7fee5de474edc350f0' }, h("div", { key: '6d97bfa728eb65c46d21f53c3b046b1a0c7d2ff6', class: {
+                'sd-date-range-picker-calendar': true,
+                'sd-date-range-picker-calendar--with-time': this.useTimePicker,
+            }, style: cssVars }, this.renderYearNav(), h("div", { key: '45b4a2488f6e73814d3a6be9710d7c14fd2e8130', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), h("span", { key: 'f1d741f8684ca213d30f559e7f6fc5a4388bbac1', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)), this.useTimePicker && this.renderTimeFooter())));
     }
     static get is() { return "sd-date-range-picker-calendar"; }
     static get originalStyleUrls() {
@@ -312,6 +434,26 @@ export class SdDateRangePickerCalendar {
                 "setter": false,
                 "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"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "use-time-picker",
+                "defaultValue": "false"
             }
         };
     }
@@ -321,7 +463,11 @@ export class SdDateRangePickerCalendar {
             "currentMonth": {},
             "pendingStart": {},
             "hoverDate": {},
-            "displayValue": {}
+            "displayValue": {},
+            "startHour": {},
+            "startMinute": {},
+            "endHour": {},
+            "endMinute": {}
         };
     }
     static get events() {

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

@@ -8,3 +8,30 @@ export const RANGE_LAYOUT = {
     panelGap: datepickerTokens.datepicker.calendar.range.panelGap,
     divider: datepickerTokens.datepicker.calendar.range.divider,
 };
+const timeTokens = datepickerTokens.datepicker.calendar.time;
+/** 시간(시:분) 선택 푸터 레이아웃 토큰 */
+export const TIME_LAYOUT = {
+    bgDefault: timeTokens.bg.default,
+    bgSelected: timeTokens.bg.selected,
+    dateLabel: timeTokens.date.label,
+    dateUnit: timeTokens.date.unit,
+    dateGap: timeTokens.date.gap,
+    radius: timeTokens.radius,
+    paddingX: timeTokens.paddingX,
+    paddingY: timeTokens.paddingY,
+    gap: timeTokens.gap,
+    sectionGap: timeTokens.section.gap,
+    unitGap: timeTokens.unit.gap,
+    fontSize: timeTokens.typography.fontSize,
+    lineHeight: timeTokens.typography.lineHeight,
+    fontWeight: timeTokens.typography.fontWeight,
+    // 시:분 입력 박스는 datepicker 필드(sm) 토큰을 재사용한다
+    input: {
+        height: DATEPICKER_SIZE_MAP.sm.height,
+        radius: DATEPICKER_SIZE_MAP.sm.radius,
+        border: DATEPICKER_COLORS.border.default,
+        borderFocus: DATEPICKER_COLORS.border.focus,
+        text: DATEPICKER_COLORS.text.default,
+        placeholder: DATEPICKER_COLORS.text.disabled,
+    },
+};

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: 'b19941ad314f31fccf77ea0dd3373f9e3362ecd2', style: hostStyle }, h("hr", { key: 'bbc765fc901298fbacb8323fecd8fd1ca4683d19', "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: '7474477aa89e459e5f31cc085e855db6d1851822', 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: '9bea489357731d9630753e552a73e98ff85a47d8', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: '582b762cea494f2987381eebfcdd9cab9c6dd3e0', class: "sd-field__main" }, h("div", { key: '24f1b2ffa75077573178de296be26c48d5f36958', 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: 'ace4b56d75bbaff3335694b6549b383a023d9125', class: "sd-field__addon" }, this.icon && (h("sd-icon", { key: 'aba7a6c3834f73be2c1be1e82f4673aad317c383', 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: '4a3776fc53bc003cc5b54696a8353668ce306a0c' })), 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,