@sellmate/design-system 1.29.0 → 1.32.0

package/dist/esm/sd-date-range-picker-calendar.entry.js

@@ -1,6 +1,7 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment } from './index-Dz490Ukt.js';
-import { u as useDatePicker, t as today, W as WEEK_LABELS, C as CALENDAR_LAYOUT } from './useDatePicker-BG0lUGJG.js';
-import { d as datepickerTokens } from './component.datepicker-BOxGhKKP.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment } from './index-CdvQqvIe.js';
+import { u as useDatePicker, t as today, W as WEEK_LABELS, C as CALENDAR_LAYOUT } from './useDatePicker-DQ5Kyy_D.js';
+import { D as DATEPICKER_COLORS, a as DATEPICKER_SIZE_MAP, d as datepickerTokens } from './sd-date-picker.config-CdXJcOGr.js';
+import './component.field-DjKOoQuF.js';
 
 const RANGE_LAYOUT = {
     bg: datepickerTokens.datepicker.calendar.range.bg,
@@ -8,6 +9,33 @@ const RANGE_LAYOUT = {
     panelGap: datepickerTokens.datepicker.calendar.range.panelGap,
     divider: datepickerTokens.datepicker.calendar.range.divider,
 };
+const timeTokens = datepickerTokens.datepicker.calendar.time;
+/** 시간(시:분) 선택 푸터 레이아웃 토큰 */
+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,
+    },
+};
 
 const addDays = (inputDate, days) => {
     const [year, month, day] = inputDate.split('-').map(Number);
@@ -21,7 +49,7 @@ const addDays = (inputDate, days) => {
     return `${resultYear}-${resultMonth}-${resultDay}`;
 };
 
-const sdDateRangePickerCalendarCss = () => `sd-date-range-picker-calendar{display:block}sd-date-range-picker-calendar .sd-date-range-picker-calendar{display:flex;flex-direction:column;gap:var(--calendar-gap);height:364px;padding:var(--calendar-padding);background:var(--calendar-bg);border-radius:var(--calendar-radius);box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2);user-select:none}sd-date-range-picker-calendar .sd-date-range-picker-calendar__top-bar{position:relative;display:flex;align-items:center;justify-content:center}sd-date-range-picker-calendar .sd-date-range-picker-calendar__year-nav{display:flex;align-items:center;justify-content:center;gap:var(--calendar-gap);font-size:var(--calendar-header-font-size);line-height:var(--calendar-header-line-height);font-weight:var(--calendar-header-font-weight);color:var(--calendar-day-text)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__today-button{position:absolute;right:0;background:transparent;cursor:pointer;font-size:var(--calendar-week-font-size);font-weight:var(--calendar-header-font-weight);color:var(--calendar-day-text);min-width:37px;height:24px;line-height:24px;text-align:center}sd-date-range-picker-calendar .sd-date-range-picker-calendar__today-button:hover{text-decoration:underline}sd-date-range-picker-calendar .sd-date-range-picker-calendar__panels{display:flex;flex-direction:row;gap:var(--range-panel-gap)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__divider{flex-shrink:0;width:1px;background:var(--range-divider)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__panel{display:flex;flex-direction:column;gap:var(--calendar-gap)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__header{display:flex;flex-flow:column nowrap;align-items:center;justify-content:center;gap:var(--calendar-header-gap);font-size:var(--calendar-header-font-size);line-height:var(--calendar-header-line-height);font-weight:var(--calendar-header-font-weight);color:var(--calendar-day-text)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__nav-group{display:inline-flex;align-items:center;gap:var(--calendar-gap)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__nav-group-month{display:flex;width:100%;align-items:center;gap:var(--calendar-gap)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__label{display:inline-flex;align-items:center;justify-content:center;min-width:40px;text-align:center}sd-date-range-picker-calendar .sd-date-range-picker-calendar__label-month{flex:1}sd-date-range-picker-calendar .sd-date-range-picker-calendar__nav-placeholder{visibility:hidden;pointer-events:none}sd-date-range-picker-calendar .sd-date-range-picker-calendar__week{display:grid;grid-template-columns:repeat(7, var(--calendar-day-size))}sd-date-range-picker-calendar .sd-date-range-picker-calendar__week-cell{display:inline-flex;align-items:center;justify-content:center;height:20px;font-size:var(--calendar-week-font-size);line-height:var(--calendar-week-line-height);font-weight:var(--calendar-week-font-weight);color:var(--calendar-week-color)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__grid{display:grid;grid-template-columns:repeat(7, var(--calendar-day-size));row-gap:var(--calendar-grid-row-gap)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--calendar-day-size);height:var(--range-height);padding:0;border:none;background:transparent;cursor:pointer;font-size:var(--calendar-day-font-size);line-height:var(--calendar-day-line-height);font-weight:var(--calendar-day-font-weight);color:var(--calendar-day-text)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day-circle{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:var(--calendar-day-circle-size);height:var(--calendar-day-circle-size);border-radius:calc(var(--calendar-day-circle-radius) * 1px);border:1px solid transparent;box-sizing:border-box}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day:not(:disabled):hover .sd-date-range-picker-calendar__day-circle{border-radius:16px;border:1px solid var(--calendar-day-hover-border)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--today .sd-date-range-picker-calendar__day-circle{font-weight:700}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--in-range{background:var(--range-bg)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--range-start{background:linear-gradient(to right, transparent 50%, var(--range-bg) 50%)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--range-end{background:var(--range-bg)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--range-startsd-date-range-picker-calendar .sd-date-range-picker-calendar__day--range-end{background:transparent}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--selected .sd-date-range-picker-calendar__day-circle{border-radius:16px;background:var(--calendar-day-select-bg);color:var(--calendar-day-select-text)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--selected:not(:disabled):hover .sd-date-range-picker-calendar__day-circle{background:var(--calendar-day-select-bg);color:var(--calendar-day-select-text)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--disabled{color:var(--calendar-day-disabled-text);cursor:not-allowed}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--disabled:not(.sd-date-range-picker-calendar__day--in-range):not(.sd-date-range-picker-calendar__day--range-start):not(.sd-date-range-picker-calendar__day--range-end){background:none}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--empty{visibility:hidden;pointer-events:none;background:transparent}`;
+const sdDateRangePickerCalendarCss = () => `sd-date-range-picker-calendar{display:block}sd-date-range-picker-calendar .sd-date-range-picker-calendar{display:flex;flex-direction:column;gap:var(--calendar-gap);height:364px;padding:var(--calendar-padding);background:var(--calendar-bg);border-radius:var(--calendar-radius);box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2);user-select:none}sd-date-range-picker-calendar .sd-date-range-picker-calendar--with-time{height:auto}sd-date-range-picker-calendar .sd-date-range-picker-calendar__top-bar{position:relative;display:flex;align-items:center;justify-content:center}sd-date-range-picker-calendar .sd-date-range-picker-calendar__year-nav{display:flex;align-items:center;justify-content:center;gap:var(--calendar-gap);font-size:var(--calendar-header-font-size);line-height:var(--calendar-header-line-height);font-weight:var(--calendar-header-font-weight);color:var(--calendar-day-text)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__today-button{position:absolute;right:0;background:transparent;cursor:pointer;font-size:var(--calendar-week-font-size);font-weight:var(--calendar-header-font-weight);color:var(--calendar-day-text);min-width:37px;height:24px;line-height:24px;text-align:center}sd-date-range-picker-calendar .sd-date-range-picker-calendar__today-button:hover{text-decoration:underline}sd-date-range-picker-calendar .sd-date-range-picker-calendar__panels{display:flex;flex-direction:row;gap:var(--range-panel-gap)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__divider{flex-shrink:0;width:1px;background:var(--range-divider)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__panel{display:flex;flex-direction:column;gap:var(--calendar-gap)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__header{display:flex;flex-flow:column nowrap;align-items:center;justify-content:center;gap:var(--calendar-header-gap);font-size:var(--calendar-header-font-size);line-height:var(--calendar-header-line-height);font-weight:var(--calendar-header-font-weight);color:var(--calendar-day-text)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__nav-group{display:inline-flex;align-items:center;gap:var(--calendar-gap)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__nav-group-month{display:flex;width:100%;align-items:center;gap:var(--calendar-gap)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__label{display:inline-flex;align-items:center;justify-content:center;min-width:40px;text-align:center}sd-date-range-picker-calendar .sd-date-range-picker-calendar__label-month{flex:1}sd-date-range-picker-calendar .sd-date-range-picker-calendar__nav-placeholder{visibility:hidden;pointer-events:none}sd-date-range-picker-calendar .sd-date-range-picker-calendar__week{display:grid;grid-template-columns:repeat(7, var(--calendar-day-size))}sd-date-range-picker-calendar .sd-date-range-picker-calendar__week-cell{display:inline-flex;align-items:center;justify-content:center;height:20px;font-size:var(--calendar-week-font-size);line-height:var(--calendar-week-line-height);font-weight:var(--calendar-week-font-weight);color:var(--calendar-week-color)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__grid{display:grid;grid-template-columns:repeat(7, var(--calendar-day-size));row-gap:var(--calendar-grid-row-gap)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--calendar-day-size);height:var(--range-height);padding:0;border:none;background:transparent;cursor:pointer;font-size:var(--calendar-day-font-size);line-height:var(--calendar-day-line-height);font-weight:var(--calendar-day-font-weight);color:var(--calendar-day-text)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day-circle{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:var(--calendar-day-circle-size);height:var(--calendar-day-circle-size);border-radius:calc(var(--calendar-day-circle-radius) * 1px);border:1px solid transparent;box-sizing:border-box}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day:not(:disabled):hover .sd-date-range-picker-calendar__day-circle{border-radius:16px;border:1px solid var(--calendar-day-hover-border)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--today .sd-date-range-picker-calendar__day-circle{font-weight:700}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--in-range{background:var(--range-bg)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--range-start{background:linear-gradient(to right, transparent 50%, var(--range-bg) 50%)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--range-end{background:var(--range-bg)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--range-startsd-date-range-picker-calendar .sd-date-range-picker-calendar__day--range-end{background:transparent}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--selected .sd-date-range-picker-calendar__day-circle{border-radius:16px;background:var(--calendar-day-select-bg);color:var(--calendar-day-select-text)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--selected:not(:disabled):hover .sd-date-range-picker-calendar__day-circle{background:var(--calendar-day-select-bg);color:var(--calendar-day-select-text)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--disabled{color:var(--calendar-day-disabled-text);cursor:not-allowed}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--disabled:not(.sd-date-range-picker-calendar__day--in-range):not(.sd-date-range-picker-calendar__day--range-start):not(.sd-date-range-picker-calendar__day--range-end){background:none}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--empty{visibility:hidden;pointer-events:none;background:transparent}sd-date-range-picker-calendar .sd-date-range-picker-calendar__time-divider{width:100%;height:1px;background:var(--range-divider)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__time{display:flex;flex-direction:row;gap:var(--time-gap)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__time-section{display:flex;flex:1;align-items:center;justify-content:center;gap:var(--time-section-gap);padding:var(--time-padding-y) var(--time-padding-x);border-radius:var(--time-radius);background:var(--time-bg-default);font-size:var(--time-font-size);line-height:var(--time-line-height);font-weight:var(--time-font-weight)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__time-section--active{background:var(--time-bg-selected)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__time-date{display:inline-flex;align-items:center;gap:var(--time-date-gap)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__time-num{color:var(--time-date-label)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__time-unit{color:var(--time-date-unit)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__time-input-group{display:inline-flex;align-items:center;gap:var(--time-unit-gap)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__time-input{width:40px;height:var(--time-input-height);padding:0;border:1px solid var(--time-input-border);border-radius:var(--time-input-radius);background:var(--calendar-bg);text-align:center;font-size:var(--time-font-size);line-height:var(--time-line-height);font-weight:var(--time-font-weight);color:var(--time-input-text);box-sizing:border-box;outline:none}sd-date-range-picker-calendar .sd-date-range-picker-calendar__time-input::placeholder{color:var(--time-input-placeholder)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__time-input:focus{border-color:var(--time-input-border-focus)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__time-input:disabled{cursor:not-allowed}sd-date-range-picker-calendar .sd-date-range-picker-calendar__time-colon{color:var(--time-date-label)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__time-suffix{color:var(--time-date-unit)}`;
 
 const SdDateRangePickerCalendar = class {
     constructor(hostRef) {
@@ -35,11 +63,20 @@ const SdDateRangePickerCalendar = class {
     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;
     /** 달력 뷰가 변경될 때 발생합니다. */
@@ -52,13 +89,31 @@ const SdDateRangePickerCalendar = class {
         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;
@@ -165,13 +220,69 @@ const SdDateRangePickerCalendar = class {
             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)
@@ -237,6 +348,22 @@ const SdDateRangePickerCalendar = class {
                 }, 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,
@@ -269,8 +396,31 @@ const SdDateRangePickerCalendar = class {
             '--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 watchers() { return {
         "value": [{

package/dist/esm/sd-divider.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, H as Host } from './index-Dz490Ukt.js';
-import { s as systemTokens } from './system-Bth2l1cy.js';
+import { r as registerInstance, h, H as Host } from './index-CdvQqvIe.js';
+import { s as systemTokens } from './system-rayWyWtG.js';
 
 const DIVIDER_COLORS = {
     default: systemTokens.color.divider.default,
@@ -17,7 +17,7 @@ const SdDivider = class {
         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' })));
     }
 };
 SdDivider.style = sdDividerCss();

package/dist/esm/sd-dropdown-button.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-Dz490Ukt.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-CdvQqvIe.js';
 import { s as sanitizeInlineHtml } from './sanitize-inline-html-BE4tnQ2Z.js';
 import { B as BUTTON_CONFIG, g as getPresetName, f as buttonTokens, d as PRESET_BORDER_COLORS$1, P as PRESET_ICON_COLORS$1, c as PRESET_TEXT_COLORS$1, e as PRESET_HOVER_BACKGROUNDS$1, b as BUTTON_FOCUS_RING_COLOR } from './sd-button.config-ClMlDGkX.js';
-import { s as systemTokens } from './system-Bth2l1cy.js';
+import { s as systemTokens } from './system-rayWyWtG.js';
 
 class DropdownManager {
     static instance;

package/dist/esm/sd-field_3.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, a as getElement, h, c as createEvent, F as Fragment } from './index-Dz490Ukt.js';
+import { r as registerInstance, a as getElement, h, c as createEvent, F as Fragment } from './index-CdvQqvIe.js';
 import { f as fieldTokens } from './component.field-DjKOoQuF.js';
-import { T as TooltipArrow } from './tooltipArrow-CEHVt90h.js';
+import { T as TooltipArrow } from './tooltipArrow-BsQ__AbZ.js';
 
 const FIELD_ADDON_ALIGN_MAP = {
     start: 'flex-start',
@@ -28,7 +28,7 @@ const FIELD_LABEL_SIZE_MAP = {
     },
 };
 
-const sdFieldCss = () => `sd-field{display:inline-flex;flex-flow:column nowrap;height:fit-content;width:100%}sd-field .sd-field *:focus,sd-field .sd-field *:focus-visible,sd-field .sd-field *:focus-within{outline:none !important}sd-field .sd-field.sd-field--disabled{cursor:not-allowed}sd-field .sd-field.sd-field--disabled .sd-field__wrapper{cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__label-inside{border-color:#CCCCCC;color:#888888;cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__control{background-color:#E1E1E1;border-color:#CCCCCC;color:#888888;cursor:not-allowed !important}sd-field .sd-field.sd-field--readonly .sd-field__wrapper .sd-field__control{background-color:var(--sd-system-color-field-bg-read-only);color:var(--sd-system-color-field-text-read-only)}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label{display:flex;align-items:center;flex-shrink:0;width:var(--sd-field-label-width, auto);height:var(--sd-field-label-height);margin-right:var(--sd-field-label-margin-right)}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__icon{margin-right:var(--sd-field-label-gap);flex-shrink:0}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__text{font-size:var(--sd-field-label-font-size);line-height:var(--sd-field-label-line-height);font-weight:var(--sd-field-label-font-weight);color:var(--sd-system-color-field-text-default);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__tooltip{margin-left:var(--sd-field-label-gap);flex-shrink:0}sd-field .sd-field--has-addon .sd-field__control .sd-field__addon{display:flex;gap:var(--sd-field-addon-gap);align-items:center;justify-content:var(--sd-field-addon-justify, flex-start);white-space:nowrap;box-sizing:border-box;flex-shrink:0;width:var(--sd-field-addon-width, auto);padding:0 var(--sd-field-addon-padding-x);font-size:var(--sd-field-addon-font-size);line-height:var(--sd-field-addon-line-height);font-weight:var(--sd-field-addon-font-weight);background:var(--sd-field-addon-bg);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__wrapper{width:100%;display:flex;align-items:flex-start;flex-flow:row nowrap;position:relative;color:var(--sd-system-color-field-text-default);-webkit-user-select:none;user-select:none}sd-field .sd-field__wrapper .sd-field__main{flex:1;min-width:0;display:flex;flex-direction:column}sd-field .sd-field__wrapper .sd-field__control{position:relative;height:var(--sd-field-wrapper-height);display:flex;min-width:0;border:1px solid var(--sd-system-color-field-border-default);border-radius:var(--sd-field-control-radius);background:var(--sd-system-color-field-bg-default)}sd-field .sd-field--error .sd-field__wrapper .sd-field__control:not(:hover){border:1px solid var(--sd-system-color-field-border-danger) !important}sd-field .sd-field.sd-field--pass .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-success) !important}sd-field .sd-field:not(.sd-field--disabled):not(.sd-field--readonly) .sd-field__wrapper .sd-field__control:hover{border:1px solid var(--sd-system-color-field-border-focus) !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field.sd-field--focus:not(.sd-field--readonly) .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-focus) !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field.sd-field--borderless .sd-field__wrapper .sd-field__control,sd-field .sd-field.sd-field--borderless.sd-field--error .sd-field__wrapper .sd-field__control:not(:hover),sd-field .sd-field.sd-field--borderless.sd-field--pass .sd-field__wrapper .sd-field__control,sd-field .sd-field.sd-field--borderless:not(.sd-field--disabled):not(.sd-field--readonly) .sd-field__wrapper .sd-field__control:hover,sd-field .sd-field.sd-field--borderless.sd-field--focus:not(.sd-field--readonly) .sd-field__wrapper .sd-field__control{border-color:transparent !important;background:transparent !important;box-shadow:none !important}sd-field .sd-field .sd-field__error-message{color:var(--sd-field-error-message-color);font-size:var(--sd-field-error-message-font-size);line-height:var(--sd-field-error-message-line-height);margin-top:var(--sd-field-message-gap)}sd-field .sd-field .sd-field__hint{color:var(--sd-field-hint-color);font-size:var(--sd-field-hint-font-size);line-height:var(--sd-field-hint-line-height);margin-top:var(--sd-field-message-gap)}`;
+const sdFieldCss = () => `sd-field{display:inline-flex;flex-flow:column nowrap;height:fit-content;width:100%}sd-field .sd-field *:focus,sd-field .sd-field *:focus-visible,sd-field .sd-field *:focus-within{outline:none !important}sd-field .sd-field.sd-field--disabled{cursor:not-allowed}sd-field .sd-field.sd-field--disabled .sd-field__wrapper{cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__label-inside{border-color:#CCCCCC;color:#888888;cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__control{background-color:#E1E1E1;border-color:#CCCCCC;color:#888888;cursor:not-allowed !important}sd-field .sd-field.sd-field--readonly .sd-field__wrapper .sd-field__control{background-color:var(--sd-system-color-field-bg-read-only);color:var(--sd-system-color-field-text-read-only)}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label{display:flex;align-items:center;flex-shrink:0;width:var(--sd-field-label-width, auto);height:var(--sd-field-label-height);margin-right:var(--sd-field-label-margin-right)}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__icon{margin-right:var(--sd-field-label-gap);flex-shrink:0}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__text{font-size:var(--sd-field-label-font-size);line-height:var(--sd-field-label-line-height);font-weight:var(--sd-field-label-font-weight);color:var(--sd-system-color-field-text-default);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__tooltip{margin-left:var(--sd-field-label-gap);flex-shrink:0}sd-field .sd-field--has-addon .sd-field__control .sd-field__addon{display:flex;gap:var(--sd-field-addon-gap);align-items:center;justify-content:var(--sd-field-addon-justify, flex-start);white-space:nowrap;box-sizing:border-box;flex-shrink:0;width:var(--sd-field-addon-width, auto);padding:0 var(--sd-field-addon-padding-x);font-size:var(--sd-field-addon-font-size);line-height:var(--sd-field-addon-line-height);font-weight:var(--sd-field-addon-font-weight);background:var(--sd-field-addon-bg);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;align-items:flex-start;flex-flow:row nowrap;position:relative;color:var(--sd-system-color-field-text-default);-webkit-user-select:none;user-select:none}sd-field .sd-field__wrapper .sd-field__main{flex:1;min-width:0;display:flex;flex-direction:column}sd-field .sd-field__wrapper .sd-field__control{position:relative;height:var(--sd-field-wrapper-height);display:flex;min-width:0;border:1px solid var(--sd-system-color-field-border-default);border-radius:var(--sd-field-control-radius);background:var(--sd-system-color-field-bg-default)}sd-field .sd-field--error .sd-field__wrapper .sd-field__control:not(:hover){border:1px solid var(--sd-system-color-field-border-danger) !important}sd-field .sd-field.sd-field--pass .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-success) !important}sd-field .sd-field:not(.sd-field--disabled):not(.sd-field--readonly) .sd-field__wrapper .sd-field__control:hover{border:1px solid var(--sd-system-color-field-border-focus) !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field.sd-field--focus:not(.sd-field--readonly) .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-focus) !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field.sd-field--borderless .sd-field__wrapper .sd-field__control,sd-field .sd-field.sd-field--borderless.sd-field--error .sd-field__wrapper .sd-field__control:not(:hover),sd-field .sd-field.sd-field--borderless.sd-field--pass .sd-field__wrapper .sd-field__control,sd-field .sd-field.sd-field--borderless:not(.sd-field--disabled):not(.sd-field--readonly) .sd-field__wrapper .sd-field__control:hover,sd-field .sd-field.sd-field--borderless.sd-field--focus:not(.sd-field--readonly) .sd-field__wrapper .sd-field__control{border-color:transparent !important;background:transparent !important;box-shadow:none !important}sd-field .sd-field .sd-field__error-message{color:var(--sd-field-error-message-color);font-size:var(--sd-field-error-message-font-size);line-height:var(--sd-field-error-message-line-height);margin-top:var(--sd-field-message-gap)}sd-field .sd-field .sd-field__hint{color:var(--sd-field-hint-color);font-size:var(--sd-field-hint-font-size);line-height:var(--sd-field-hint-line-height);margin-top:var(--sd-field-message-gap)}`;
 
 const FORM_PARENT_TAGS = [
     'sd-input',
@@ -39,6 +39,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',
 ];
 const SdField = class {
@@ -80,6 +82,13 @@ const SdField = class {
     label = '';
     /** 레이블 너비 */
     labelWidth = '';
+    /**
+     * 레이블 박스 높이 (숫자면 px). 미지정 시 size별 기본값 사용.
+     * multiline 등 컨트롤 박스가 커질 때 레이블을 첫 행에 맞추기 위해 사용한다.
+     */
+    labelHeight;
+    /** 멀티라인 컨트롤 — 컨트롤 높이를 고정하지 않고 min-height만 적용한다. */
+    multiline = false;
     /** 필드 우측 어드온 레이블 */
     addonLabel = '';
     /** 어드온 정렬 방향 */
@@ -210,7 +219,11 @@ const SdField = class {
         };
         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`,
@@ -242,19 +255,20 @@ const SdField = class {
                     : {}),
             }
             : {};
-        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 === '')
@@ -445,7 +459,7 @@ const SdFloatingPopover = class {
         }
     }
     render() {
-        return h("slot", { key: '3a3234d89652728a077681775de4f8c14141ab2d' });
+        return h("slot", { key: 'f45790ba4fc45aef991a54b409acc2791342fcdf' });
     }
 };
 SdFloatingPopover.style = sdFloatingPortalCss();
@@ -486,42 +500,29 @@ const SdTooltip = class {
     trigger = 'hover';
     /** 툴팁 표시 방향 */
     placement = 'top';
-    /** 아이콘 트리거 색상 */
+    /** 기본(아이콘) 트리거 색상 */
     color = '#01BB4B';
     /** 툴팁 배경/텍스트 색상 타입 */
     tooltipType = 'default';
-    /** 아이콘 트리거 아이콘명 */
+    /** 기본(아이콘) 트리거 아이콘명. slot="anchor" 가 있으면 무시 */
     icon = 'helpOutline';
-    /** 아이콘 트리거 크기 */
+    /** 기본(아이콘) 트리거 크기 */
     iconSize = 12;
-    /** 버튼 트리거 레이블 (있으면 아이콘 대신 버튼 렌더링) */
-    label = '';
-    /** 버튼 트리거 프리셋 */
-    name = 'primary_sm';
-    /** 버튼 트리거 우측 아이콘 */
-    rightIcon;
     /** 스크린리더용 접근성 레이블 */
     ariaLabel = '';
-    /** 비활성 상태 여부 */
+    /** 비활성 — 트리거만 렌더하고 툴팁을 열지 않음 */
     disabled = false;
-    /** 버튼 type 속성 */
-    type = 'button';
     /** 툴팁 우측 상단 닫기 버튼 표시 여부 */
     useClose = false;
-    /** 트리거 래퍼(.sd-tooltip-trigger)에 추가할 클래스 */
-    sdClass = '';
     /**
      * 툴팁 본문에 표시할 메시지. 각 항목이 한 줄로 innerHTML 렌더링됩니다.
-     * (HTML 문자열 허용) 지정하지 않으면 slot 으로 전달한 내용을 본문으로 사용합니다.
+     * (HTML 문자열 허용) 지정하지 않으면 default slot 으로 전달한 내용을 본문으로 사용합니다.
      */
     message = [];
-    /** anchor 트리거 래퍼(.sd-tooltip-trigger)에 추가할 클래스. (예: Tailwind `block w-full`) */
-    triggerClass = '';
-    /** anchor 트리거 래퍼에 적용할 인라인 스타일(CSS 문자열). (예: `width:100%`) */
-    triggerStyle = '';
+    /** 트리거 래퍼(.sd-tooltip-trigger)에 추가할 클래스. (예: Tailwind `block w-full`) */
+    triggerClassName = '';
     showTooltip = false;
     slotContentHTML = '';
-    buttonEl;
     triggerEl;
     isAnchorMode = false;
     menuEl;
@@ -529,6 +530,8 @@ const SdTooltip = class {
     closeTimeout;
     static CLOSE_ANIM_MS = 150;
     openTooltip = () => {
+        if (this.disabled)
+            return;
         this.cancelHideTimer();
         this.showTooltip = true;
         if (this.menuEl) {
@@ -578,22 +581,16 @@ const SdTooltip = class {
         this.closeTooltip();
     }
     componentWillLoad() {
-        // slot="anchor" 자식이 있으면 anchor 모드(다른 컴포넌트를 트리거로 사용)
+        // slot="anchor" 자식이 있으면 anchor 모드(다른 요소를 트리거로 사용)
         this.isAnchorMode = Array.from(this.el.children).some(child => child.getAttribute('slot') === 'anchor');
         if (!this.isAnchorMode) {
-            // 레거시 모드: 슬롯 내용을 본문으로 캡처하고 자식을 비웁니다.
+            // 기본 모드: default slot 내용을 본문으로 캡처하고 자식을 비웁니다.
             this.slotContentHTML = this.el.innerHTML;
             this.el.replaceChildren();
         }
         // anchor 모드: 자식(slot="anchor")은 그대로 두어 Stencil 슬롯으로 투영합니다.
         this.el.classList.toggle('visible', true);
     }
-    componentDidRender() {
-        // CSS 문자열 스타일은 ref로 직접 적용 (속성/프로퍼티 전달 모두 호환)
-        if (this.triggerEl && this.triggerStyle !== '') {
-            this.triggerEl.setAttribute('style', this.triggerStyle);
-        }
-    }
     render() {
         const trigger = this.trigger ?? 'hover';
         const placement = this.placement ?? 'top';
@@ -601,27 +598,29 @@ const SdTooltip = class {
         const icon = this.icon ?? 'helpOutline';
         const color = this.color ?? '#01BB4B';
         const typeConfig = TOOLTIP_TYPE_CONFIG[tooltipType] ?? TOOLTIP_TYPE_CONFIG.default;
-        const hoverTrigger = {
-            onMouseEnter: () => this.openTooltip(),
-            onMouseLeave: () => !this.useClose && this.startHideTimer(),
+        // 클릭 토글: 열림은 openTooltip(타이머 정리), 닫힘은 즉시(애니메이션 없이)
+        const toggleTooltip = () => {
+            if (this.showTooltip) {
+                this.showTooltip = false;
+            }
+            else {
+                this.openTooltip();
+            }
         };
-        const toggleTooltip = () => (this.showTooltip = !this.showTooltip);
-        const hasLabel = this.label !== undefined && this.label !== '';
-        const anchorMode = this.isAnchorMode;
         const divTrigger = trigger === 'hover'
-            ? hoverTrigger
-            : anchorMode || !hasLabel
-                ? { onClick: toggleTooltip }
-                : {};
-        const buttonClickTrigger = trigger === 'click' && !anchorMode && hasLabel ? { onSdClick: toggleTooltip } : {};
-        const triggerClasses = ['sd-tooltip-trigger', this.sdClass, this.triggerClass]
+            ? {
+                onMouseEnter: () => this.openTooltip(),
+                onMouseLeave: () => !this.useClose && this.startHideTimer(),
+            }
+            : { onClick: toggleTooltip };
+        const triggerClasses = ['sd-tooltip-trigger', this.triggerClassName]
             .filter(c => c !== undefined && c !== '')
             .join(' ');
-        // anchor 모드에서는 slot 을 트리거로 쓰므로 본문은 message 로 받습니다.
+        // 본문: message 가 있으면 각 줄을 innerHTML 로, 없으면 default slot 캡처 내용 사용
         const bodyHTML = this.message && this.message.length > 0
             ? this.message.map(line => `<div>${line}</div>`).join('')
             : this.slotContentHTML;
-        return (h(Fragment, { key: '9c6adbf151f6c36536406809cf8714db7ced8d5e' }, h("div", { key: '38abb48e4f209a6ef8d587c3b0d9c9158e76f7c3', ref: el => (this.triggerEl = el), class: triggerClasses, ...divTrigger }, anchorMode ? (h("slot", { name: "anchor" })) : hasLabel ? (h("sd-button", { ref: el => (this.buttonEl = el), name: this.name ?? 'primary_sm', label: this.label, icon: icon, rightIcon: this.rightIcon, ariaLabel: this.ariaLabel, disabled: this.disabled, type: this.type ?? 'button', class: "sd-tooltip", ...buttonClickTrigger })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (h("sd-floating-portal", { key: '178f37ef8d28dcdbc527f9d3f8b2bdc45774afd4', parentRef: anchorMode ? this.triggerEl : this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.tooltipOffset }, h("div", { key: '4d2990d20f35694c95b6627d6ddee106d9b707c2', ref: el => (this.menuEl = el), class: {
+        return (h(Fragment, { key: 'd5854a26d23173e2c3493d301b0befefccd25cac' }, h("div", { key: '996d9ca989e7032f86ea3744b878b596e5947d15', ref: el => (this.triggerEl = el), class: triggerClasses, ...divTrigger }, this.isAnchorMode ? (h("slot", { name: "anchor" })) : (h("sd-icon", { name: icon, size: this.iconSize ?? 12, color: color, "aria-label": this.ariaLabel || undefined, class: "sd-tooltip" }))), this.showTooltip && (h("sd-floating-portal", { key: '5583e344bac78edbd353c759f187c387823a4304', parentRef: this.triggerEl, onSdClose: this.handleClose, placement: placement, offset: this.tooltipOffset }, h("div", { key: '446e2fbf5e0e26901e635081a1e1100c7bfb8106', ref: el => (this.menuEl = el), class: {
                 'sd-floating-menu': true,
                 [`sd-floating-menu--${tooltipType}`]: true,
                 [`sd-floating-menu--${placement}`]: true,
@@ -629,7 +628,7 @@ const SdTooltip = class {
             }, style: {
                 '--sd-floating-bg': typeConfig.bg,
                 '--sd-floating-content': typeConfig.content,
-            }, onMouseEnter: () => this.openTooltip(), onMouseLeave: () => !this.useClose && this.startHideTimer() }, h("i", { key: 'ee1366c6550c30c9a9a741763bef9a3dfe8ee4e1', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, h(TooltipArrow, { key: '7d0ea9d040b56e4a136b448144b447154372a526' })), h("div", { key: '1e62996b156a848cf0b202740602258aa8e5c6c7', class: "sd-floating-menu__content", innerHTML: bodyHTML }), this.useClose && (h("sd-ghost-button", { key: '86e6796421c16a970cee038d72386f68972733e1', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xxs", onClick: () => this.closeTooltip() })))))));
+            }, onMouseEnter: () => this.openTooltip(), onMouseLeave: () => !this.useClose && this.startHideTimer() }, h("i", { key: '0ccae56e8e88cf2ca33eeb4780fbfabd9fa33a99', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, h(TooltipArrow, { key: 'e10701628f3cb708f89fad5f910475edc30e0e50' })), h("div", { key: '3cbedf1225e4cc5bf3fad45754b7ab663e9ab5f2', class: "sd-floating-menu__content", innerHTML: bodyHTML }), this.useClose && (h("sd-ghost-button", { key: '90198241c12483bb8db4d13d5ba73ea6d3765574', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xxs", onClick: () => this.closeTooltip() })))))));
     }
 };
 SdTooltip.style = sdTooltipCss();

package/dist/esm/sd-form.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-Dz490Ukt.js';
+import { r as registerInstance, c as createEvent, h } from './index-CdvQqvIe.js';
 
 const SdForm = class {
     constructor(hostRef) {

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-Dz490Ukt.js';
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-CdvQqvIe.js';
 
 const ghostButton = {
 	xxs: {
@@ -126,6 +126,11 @@ const SdGhostButton = class {
     intent = 'default';
     /** 스크린리더용 접근성 레이블 */
     ariaLabel = '';
+    /**
+     * 토글 버튼일 때 눌림 상태 → `aria-pressed`로 반영. 미지정 시 속성 자체를 내보내지 않는다.
+     * (DOM `Element.ariaPressed`(문자열 예약 속성)와 충돌하므로 prop 이름은 `pressed`)
+     */
+    pressed;
     /** 호버 시 표시할 툴팁 텍스트 */
     tooltipText;
     /** 비활성 상태 여부 */
@@ -183,16 +188,16 @@ const SdGhostButton = class {
         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 })));
     }
 };
 SdGhostButton.style = sdGhostButtonCss();
@@ -470,7 +475,7 @@ const SdPortal = class {
         this.close.emit();
     }
     render() {
-        return h("slot", { key: '623ee5423b145701ba9dd801d44874214f7a76e3' });
+        return h("slot", { key: '8b2a674bbd8c75c150940d53c0e5204e951cbb82' });
     }
     static get watchers() { return {
         "open": [{
@@ -666,9 +671,8 @@ const SdTag = class {
     label = '';
     /** 아이콘명 */
     icon;
-    // 아이콘이 좌측 배치되는 게 자연스러운 default. prop 이름 변경(isRight 등)은 public API breaking 이라 별도 이슈로 분리.
-    /** true이면 아이콘을 레이블 왼쪽에 배치 */
-    isLeft = true;
+    /** 아이콘을 레이블 왼쪽에 배치할지 여부 (기본값 true) */
+    iconLeft = true;
     /** 태그 너비 (숫자면 px, 문자열이면 그대로 적용). 미지정 시 콘텐츠 크기(fit-content) */
     width = '';
     componentWillLoad() {
@@ -697,7 +701,7 @@ const SdTag = class {
         const config = this.resolvedConfig;
         const iconNode = this.renderIcon(config.icon, config.iconSize);
         const width = this.resolvedWidth;
-        return (h(Host, { key: '9eb41b65a887a524d22e0a2663292de1f12674f6', style: width != null ? { '--sd-tag-width': width } : undefined }, h("span", { key: '2c08b419141250c00e6ef1aec1c691c1a41434c0', class: "sd-tag", style: {
+        return (h(Host, { key: '9e893a8ec67d1baa12cdfe030d3ae15798666c0c', style: width != null ? { '--sd-tag-width': width } : undefined }, h("span", { key: 'fe6b05143032b33bec7cc95ce5355701e894d0ea', class: "sd-tag", style: {
                 '--sd-tag-background': config.background,
                 '--sd-tag-content': config.content,
                 '--sd-tag-height': config.height,
@@ -707,7 +711,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, h("span", { key: '5041322f15e5273cc3129f57958dc97fdce8c50c', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode)));
+            }, "aria-label": this.label || 'tag' }, this.icon && this.iconLeft && iconNode, h("span", { key: '9c4a07ac015672839dc5dda40d01609870979e04', class: "sd-tag__label" }, this.label), this.icon && !this.iconLeft && iconNode)));
     }
 };
 SdTag.style = sdTagCss();