@sellmate/design-system 1.29.0 → 1.32.0

package/dist/esm/sd-time-range-picker.entry.js

@@ -0,0 +1,202 @@
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-CdvQqvIe.js';
+import { n as nanoid } from './index-CCwNgVmC.js';
+import { f as formatTimeValue, a as formatTimeDisplay, p as parseTimeValue, T as TIMEPICKER_COLORS, b as TIMEPICKER_SIZE_MAP } from './sd-time-picker.config-DUq29Nhs.js';
+import './component.field-DjKOoQuF.js';
+
+function getTimeMinutes(value) {
+    const { hour, minute } = parseTimeValue(value);
+    return hour * 60 + minute;
+}
+function normalizeTimeRangeValue(value, rangeOrder = 'strict') {
+    if (value == null)
+        return null;
+    const normalized = value.map(item => {
+        const parsed = parseTimeValue(item);
+        return formatTimeValue(parsed.hour, parsed.minute);
+    });
+    if (rangeOrder === 'strict' && getTimeMinutes(normalized[0]) > getTimeMinutes(normalized[1])) {
+        return [normalized[0], normalized[0]];
+    }
+    return normalized;
+}
+function formatTimeRangeDisplay(value, type) {
+    if (value == null || value[0] === '' || value[1] === '')
+        return '';
+    return `${formatTimeDisplay(value[0], type)} ~ ${formatTimeDisplay(value[1], type)}`;
+}
+
+const sdTimeRangePickerCss = () => `sd-time-range-picker{display:inline-flex}sd-time-range-picker sd-portal{display:none}sd-time-range-picker .sd-time-range-picker{position:relative;min-width:var(--sd-time-range-picker-min-width);width:100%;height:100%}`;
+
+const SdTimeRangePicker = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.update = createEvent(this, "sdUpdate", 7);
+        this.dropDownShow = createEvent(this, "sdDropDownShow", 7);
+    }
+    static CLOSE_ANIMATION_DURATION = 150;
+    get el() { return getElement(this); }
+    /** 선택된 시간 범위 [시작, 종료] (HH:mm) */
+    value = null;
+    /** 입력 필드 크기 */
+    size = 'sm';
+    /** 표시 타입: default(24시간) / midday(오전·오후) */
+    type = 'default';
+    /** 시간 미선택 시 표시할 placeholder */
+    placeholder = '00:00 ~ 23:59';
+    /** 비활성 상태 여부 */
+    disabled = false;
+    /** 값이 있을 때 지우기 버튼 표시 여부 */
+    clearable = false;
+    /** 오전/오후 선택 표시 여부. 지정하지 않으면 type="midday"일 때만 켜집니다. */
+    useMeridiem;
+    /** 분 증감 단위 */
+    minuteStep = 1;
+    /** 범위 순서 정책. strict는 시작 시간이 종료 시간보다 늦어지지 않도록 보정합니다. */
+    rangeOrder = 'strict';
+    /** 필드 너비 (숫자면 px, 문자열이면 그대로 적용) */
+    width = '';
+    // sd-field 공통 props
+    /** 레이블 텍스트 */
+    label = '';
+    /** 레이블 너비 */
+    labelWidth = '';
+    /** 필드 우측 어드온 레이블 */
+    addonLabel = '';
+    /** 어드온 정렬 방향 */
+    addonAlign = 'start';
+    /** 필드 하단 힌트 텍스트 */
+    hint = '';
+    /** 에러 메시지 */
+    errorMessage = '';
+    /** 유효성 검사 규칙 목록 */
+    rules = [];
+    /** 에러 상태 여부 */
+    error = false;
+    /** 필드 상태 (없으면 error/rules 결과로 자동 결정) */
+    status;
+    /** 레이블 영역 아이콘 */
+    icon = undefined;
+    /** 레이블 툴팁 텍스트 */
+    labelTooltip = '';
+    /** 레이블 툴팁 상세 옵션 */
+    labelTooltipProps = null;
+    isOpen = false;
+    isAnimatingOut = false;
+    focused = false;
+    hovered = false;
+    /** 시간 범위 선택 시 선택된 범위([시작, 종료])를 전달합니다. */
+    update;
+    /** 선택기 열림/닫힘 상태가 바뀔 때 발생합니다. */
+    dropDownShow;
+    triggerRef;
+    formField;
+    closeAnimationTimer;
+    /** 폼 연동용 name 속성 */
+    name = nanoid();
+    watchIsOpen(newValue) {
+        this.focused = newValue;
+        this.dropDownShow.emit({ isOpen: newValue });
+    }
+    valueChanged(newValue) {
+        const normalized = normalizeTimeRangeValue(newValue, this.rangeOrder);
+        if (normalized != null && JSON.stringify(normalized) !== JSON.stringify(newValue)) {
+            this.value = normalized;
+        }
+    }
+    rangeOrderChanged() {
+        this.valueChanged(this.value);
+    }
+    /** 유효성 검사를 실행합니다. */
+    async sdValidate() {
+        return this.formField?.sdValidate();
+    }
+    /** 값과 유효성 상태를 초기화합니다. */
+    async sdReset() {
+        return this.formField?.sdReset();
+    }
+    /** 유효성 상태만 초기화합니다. */
+    async sdResetValidate() {
+        return this.formField?.sdResetValidation();
+    }
+    /** 입력 필드에 포커스를 이동합니다. */
+    async sdFocus() {
+        return this.formField?.sdFocus();
+    }
+    componentWillLoad() {
+        this.valueChanged(this.value);
+    }
+    disconnectedCallback() {
+        if (this.closeAnimationTimer)
+            clearTimeout(this.closeAnimationTimer);
+    }
+    closeDropdown() {
+        if (!this.isOpen)
+            return;
+        this.isOpen = false;
+        this.isAnimatingOut = true;
+        if (this.closeAnimationTimer)
+            clearTimeout(this.closeAnimationTimer);
+        this.closeAnimationTimer = setTimeout(() => {
+            this.isAnimatingOut = false;
+        }, SdTimeRangePicker.CLOSE_ANIMATION_DURATION);
+    }
+    handleTriggerClick = () => {
+        if (this.disabled)
+            return;
+        if (this.isOpen) {
+            this.closeDropdown();
+        }
+        else {
+            if (this.closeAnimationTimer)
+                clearTimeout(this.closeAnimationTimer);
+            this.isAnimatingOut = false;
+            this.isOpen = true;
+        }
+    };
+    handleClear = (event) => {
+        event.stopPropagation();
+        this.value = null;
+        this.update.emit(null);
+    };
+    handleSelect = (event) => {
+        event.stopPropagation();
+        this.value = event.detail;
+        this.update.emit(this.value);
+    };
+    get effectiveUseMeridiem() {
+        return this.useMeridiem ?? this.type === 'midday';
+    }
+    get displayText() {
+        return formatTimeRangeDisplay(this.value, this.effectiveUseMeridiem ? 'midday' : 'default');
+    }
+    render() {
+        const sizeTokens = TIMEPICKER_SIZE_MAP[this.size] ?? TIMEPICKER_SIZE_MAP.sm;
+        const cssVars = {
+            '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
+            '--sd-system-size-field-md-height': `${sizeTokens.height}px`,
+            '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
+            '--sd-system-radius-field-md': `${sizeTokens.radius}px`,
+            '--sd-time-range-picker-min-width': `${sizeTokens.minWidth}px`,
+            '--sd-system-color-field-border-default': TIMEPICKER_COLORS.border.default,
+            '--sd-system-color-field-border-focus': TIMEPICKER_COLORS.border.focus,
+            '--sd-system-color-field-bg-default': TIMEPICKER_COLORS.bg.default,
+        };
+        return (h("sd-field", { key: 'b709c0fe129ab899b60aa75e41bc949cb82184d7', 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: '7fffb9bb91a0fa8a8fdce7704c47aea2de0b509a', class: "sd-time-range-picker", ref: el => {
+                this.triggerRef = el;
+            } }, h("sd-time-picker-trigger", { key: 'b1f42c77070fc46da93aa66e681ee9504c999d11', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, clearable: this.clearable, size: this.size, onSdTriggerClick: this.handleTriggerClick, onSdClear: this.handleClear })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: 'ad91d531c8326a7e977f8c576e1026c4d6d0115c', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-time-range-picker-selector", { key: '0df138447c01169ea3e0462d012c4917ac7f904b', value: this.value, useMeridiem: this.effectiveUseMeridiem, minuteStep: this.minuteStep, "range-order": this.rangeOrder, onSdUpdate: this.handleSelect })))));
+    }
+    static get watchers() { return {
+        "isOpen": [{
+                "watchIsOpen": 0
+            }],
+        "value": [{
+                "valueChanged": 0
+            }],
+        "rangeOrder": [{
+                "rangeOrderChanged": 0
+            }]
+    }; }
+};
+SdTimeRangePicker.style = sdTimeRangePickerCss();
+
+export { SdTimeRangePicker as sd_time_range_picker };

package/dist/esm/sd-toast-container.entry.js

@@ -1,4 +1,4 @@
-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';
 
 const DEFAULT_DURATION = 4000;
 const DEFAULT_MAX_VISIBLE = 3;
@@ -241,7 +241,7 @@ const SdToastContainer = class {
         const activeToasts = toasts.filter(t => t.state !== 'exiting').reverse();
         const indexMap = new Map();
         activeToasts.forEach((t, i) => indexMap.set(t.id, i));
-        return (h("div", { key: '9d0347cd5aba313c4e5cddaf7ecd9eaa3be096c8', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
+        return (h("div", { key: '166ac21503b08853631fddaed047ab108a99570a', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
                 this.expanded = true;
                 this.pauseTimers();
             }, onMouseLeave: () => {

package/dist/esm/sd-toast.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 toast = {
 	icon: "16",
@@ -91,12 +91,12 @@ const SdToast = class {
         const linkColor = typeConfig.linkColor ?? typeConfig.content;
         const useDefaultCloseIntent = ['default', 'caution', 'info'].includes(this.type);
         const buttonName = TOAST_BUTTON_NAME_BY_TYPE[this.type] ?? TOAST_BUTTON_NAME_BY_TYPE.default;
-        return (h("div", { key: 'c402e2eabab8b2d229cc40550d2ffb7c601ad992', style: {
+        return (h("div", { key: '5d7511c3fe5a5ef828986ff624af7c52ff087cfa', style: {
                 '--sd-toast-bg': typeConfig.bg,
                 '--sd-toast-text': typeConfig.content,
                 '--sd-toast-icon': iconColor,
                 '--sd-toast-link': linkColor,
-            } }, h("div", { key: 'a6dbbc079649181799f434f7158791ec1e52fd4a', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (h("div", { key: 'c8210c48776c0722ed025049ebfce5eb8477df0a', class: "sd-toast__icon" }, h("sd-icon", { key: 'ee99941287447694a3aa700281bacdbb5d9605bc', name: this.icon, size: iconSize, color: iconColor }))), h("div", { key: 'f4be8a8599e84bb75aeaa5414cf6ff2cd063e391', class: "sd-toast__content" }, h("span", { key: 'af60e01cf1be615fd3b462885c9060445e49c809', class: "sd-toast__message" }, this.message)), this.link && (h("a", { key: 'cd7bbe3ef56e6f475d4182118321645b444c2334', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (h("sd-button", { key: '87c9a38fead8416d36850ff9247d02a962e92f27', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (h("sd-ghost-button", { key: '1af5e0ffa26a26574bb9935fdeb01192895c32eb', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
+            } }, h("div", { key: 'c35b42d7ece2030ed0e27abb0059f9b09c4edb9e', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (h("div", { key: '015223ab3e9d4296d3782afc0c6cfd60e54289c7', class: "sd-toast__icon" }, h("sd-icon", { key: '6d8e5d73fc026df0d8f75439b926bd027ca6a008', name: this.icon, size: iconSize, color: iconColor }))), h("div", { key: 'b601081818d66910d9d2f9984bfb9a473237b065', class: "sd-toast__content" }, h("span", { key: '6a17766f5a337cbc85179dc310fb400186f35ac6', class: "sd-toast__message" }, this.message)), this.link && (h("a", { key: '80abceec8d37905073c9a8e43fcdd1a78978b5f6', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (h("sd-button", { key: '212516f32c46938d405e68dbb156cf139b39ffd8', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (h("sd-ghost-button", { key: '9fd34f93f46d9a5a25ec52e0d164bbcaf4297e2e', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
     }
 };
 SdToast.style = sdToastCss();

package/dist/esm/sd-toggle.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 toggle = {
 	height: "28",
@@ -121,7 +121,7 @@ const SdToggle = class {
             '--sd-toggle-content-select': TOGGLE_COLORS.content.select,
             '--sd-toggle-content-disabled': TOGGLE_COLORS.content.disabled,
         };
-        return (h("label", { key: '26ca7c70bf68964bc7bd0fd321912ee49dfc5c73', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, h("input", { key: '5189d6d9f234921d78a0bd3cdded8256ad273702', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        return (h("label", { key: 'f78d58c01b943a5f22ace9cb14e50b0098cc8206', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, h("input", { key: '8b8d8e09b322a5093c57129f94c49f6951d78df7', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
 };
 SdToggle.style = sdToggleCss();

package/dist/esm/{system-Bth2l1cy.js → system-rayWyWtG.js}

@@ -19,7 +19,9 @@ const color = {
 	},
 	divider: {
 		"default": "#E1E1E1"
-	}};
+	},
+	border: {
+		"default": "#E1E1E1"}};
 const shadow = {
 	spread: {
 		md: {

package/dist/esm/{tooltipArrow-CEHVt90h.js → tooltipArrow-BsQ__AbZ.js}

@@ -1,4 +1,4 @@
-import { h } from './index-Dz490Ukt.js';
+import { h } from './index-CdvQqvIe.js';
 
 const TooltipArrow = (props) => (h("svg", { width: "16", height: "12", viewBox: "0 0 16 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, h("path", { d: "M8.83205 10.7519C8.43623 11.3457 7.56377 11.3457 7.16795 10.7519L1.04907e-06 -1.39876e-06L16 0L8.83205 10.7519Z", fill: "currentColor" })));
 

package/dist/esm/{useDatePicker-BG0lUGJG.js → useDatePicker-DQ5Kyy_D.js}

@@ -1,4 +1,4 @@
-import { d as datepickerTokens } from './component.datepicker-BOxGhKKP.js';
+import { d as datepickerTokens } from './sd-date-picker.config-CdXJcOGr.js';
 
 const CALENDAR_LAYOUT = {
     bg: datepickerTokens.datepicker.calendar.bg,

package/dist/types/components/sd-checkbox/sd-checkbox.d.ts

@@ -2,8 +2,8 @@ import { EventEmitter } from '../../stencil-public-runtime';
 export type CheckedType = boolean | any[] | null;
 export declare class SdCheckbox {
     el: HTMLElement;
-    /** 현재 선택 상태 또는 배열 형태의 값 */
-    value: CheckedType;
+    /** 현재 선택 상태 또는 배열 형태의 값 (미지정 시 미선택 상태) */
+    value?: CheckedType;
     /** 배열 모드에서의 개별 값 */
     val?: any;
     /** 비활성화 여부 */

package/dist/types/components/sd-chip/sd-chip.d.ts

@@ -11,7 +11,7 @@ export declare class SdChip implements ValidatableField {
     error: boolean;
     /** 비활성 상태 여부 */
     disabled: boolean;
-    /** 인라인 편집 가능 여부 */
+    /** 인라인 편집 가능 여부 (기본값 false) */
     editable: boolean;
     /** 닫기 버튼 표시 여부 */
     showRemove: boolean;
@@ -49,8 +49,8 @@ export declare class SdChip implements ValidatableField {
     /** 네이티브 input 엘리먼트를 반환합니다. */
     sdGetNativeElement(): Promise<HTMLSpanElement | null>;
     /**
-     * SSR 환경에서 editable prop이 전달되지 않으면 undefined로 들어올 수 있으므로,
-     * false로 명시된 경우에만 편집 불가로 처리한다 (기본값 true).
+     * editable이 명시적으로 true일 때만 편집 가능으로 처리한다 (기본값 false — RN SChip과 일치).
+     * SSR 등에서 editable이 undefined로 들어와도 편집 불가로 안전하게 처리된다.
      */
     private get isEditable();
     private enterEditMode;

package/dist/types/components/sd-chip-input/sd-chip-input.d.ts

@@ -27,6 +27,8 @@ export declare class SdChipInput {
     useReset: boolean;
     /** 최대 입력 가능한 칩 개수 (없으면 제한 없음) */
     maxCount?: number;
+    /** 최대 개수·초기화 meta 위치 (end=우측 끝으로 정렬 / inline=콘텐츠에 이어서 배치) */
+    metaPlacement: 'end' | 'inline';
     /** 중복 에러 메시지에 표시할 항목 이름 (없으면 기본 메시지 사용) */
     duplicateLabel?: string;
     /** 자동완성 후보 목록 */
@@ -37,8 +39,8 @@ export declare class SdChipInput {
     recommendedItems: string[];
     /** 추천 항목 로딩 중 여부 */
     loadingRecommendedItems: boolean;
-    /** 자동완성 드롭다운 최소 너비 (숫자면 px, 문자열이면 그대로 적용. 없으면 입력 필드 너비를 사용) */
-    autocompleteMinWidth?: string | number;
+    /** 드롭다운(자동완성) 최소 너비 (숫자면 px, 문자열이면 그대로 적용. 기본값 200) */
+    dropdownMinWidth?: string | number;
     /** 레이블 텍스트 */
     label?: string;
     /** 레이블 너비 */

package/dist/types/components/sd-date-picker/sd-date-picker.d.ts

@@ -34,6 +34,8 @@ export declare class SdDatePicker {
     rules?: Rule[];
     /** 에러 상태 여부 */
     error: boolean;
+    /** 필드 상태 (없으면 error/rules 결과로 자동 결정) */
+    status?: 'default' | 'pass' | 'error';
     /** 레이블 영역 아이콘 */
     icon?: IconProps;
     /** 레이블 툴팁 텍스트 */

package/dist/types/components/sd-date-range-picker/sd-date-range-picker-calendar/sd-date-range-picker-calendar.d.ts

@@ -6,11 +6,19 @@ export declare class SdDateRangePickerCalendar {
     selectable?: [string, string];
     /** 최대 선택 가능 일 수 */
     maxRange?: number;
+    /** 시간(시:분) 선택 푸터 사용 여부 */
+    useTimePicker: boolean;
     private currentYear;
     private currentMonth;
     private pendingStart;
     private hoverDate;
     private displayValue;
+    private startHour;
+    private startMinute;
+    private endHour;
+    private endMinute;
+    /** 직접 emit한 값이 value prop으로 되돌아오는 에코를 구분해 시간 입력 clobber를 막는다 */
+    private lastEmitted;
     /** 날짜 범위 선택 시 발생합니다. */
     select: EventEmitter<[string, string]>;
     /** 달력 뷰가 변경될 때 발생합니다. */
@@ -22,6 +30,8 @@ export declare class SdDateRangePickerCalendar {
     componentWillLoad(): void;
     handleValueChange(): void;
     private syncFromValue;
+    /** "YYYY-MM-DD HH:mm" 또는 "YYYY-MM-DD"를 날짜/시/분으로 분리한다 */
+    private splitDateTime;
     private get rightYear();
     private get rightMonth();
     private formatDate;
@@ -34,10 +44,20 @@ export declare class SdDateRangePickerCalendar {
     private goToday;
     private isDisabled;
     private handleDayClick;
+    /** 날짜 범위(+ useTimePicker면 시:분)를 결합해 sdSelect로 emit한다 */
+    private emitRange;
+    private pad;
+    /** 시:분 입력 — 숫자만/2자리로 제한하고 범위(시 0~23, 분 0~59)로 클램프한다 */
+    private handleTimeInput;
+    private handleTimeBlur;
+    private getTimePart;
+    private setTimePart;
     private handleDayHover;
     private getRangeState;
     private renderHeader;
     private renderYearNav;
     private renderPanel;
+    private renderTimeSection;
+    private renderTimeFooter;
     render(): any;
 }

package/dist/types/components/sd-date-range-picker/sd-date-range-picker.config.d.ts

@@ -8,3 +8,28 @@ export declare const RANGE_LAYOUT: {
     panelGap: string;
     divider: string;
 };
+/** 시간(시:분) 선택 푸터 레이아웃 토큰 */
+export declare const TIME_LAYOUT: {
+    bgDefault: string;
+    bgSelected: string;
+    dateLabel: string;
+    dateUnit: string;
+    dateGap: string;
+    radius: string;
+    paddingX: string;
+    paddingY: string;
+    gap: string;
+    sectionGap: string;
+    unitGap: string;
+    fontSize: string;
+    lineHeight: string;
+    fontWeight: string;
+    input: {
+        height: string;
+        radius: string;
+        border: string;
+        borderFocus: string;
+        text: string;
+        placeholder: string;
+    };
+};

package/dist/types/components/sd-date-range-picker/sd-date-range-picker.d.ts

@@ -17,6 +17,11 @@ export declare class SdDateRangePicker {
     selectable?: [string, string];
     /** 최대 선택 가능한 날짜 범위 (일 단위) */
     maxRange?: number;
+    /**
+     * 시간(시:분) 선택 푸터 사용 여부.
+     * true이면 value는 "YYYY-MM-DD HH:mm" 형식이 되고, 캘린더 하단에 시작·종료 시간 입력이 표시됩니다.
+     */
+    useTimePicker: boolean;
     /** 비활성 상태 여부 */
     disabled: boolean;
     /** 필드 너비 (숫자면 px, 문자열이면 그대로 적용) */
@@ -37,6 +42,8 @@ export declare class SdDateRangePicker {
     rules?: Rule[];
     /** 에러 상태 여부 */
     error: boolean;
+    /** 필드 상태 (없으면 error/rules 결과로 자동 결정) */
+    status?: 'default' | 'pass' | 'error';
     /** 레이블 영역 아이콘 */
     icon?: IconProps;
     /** 레이블 툴팁 텍스트 */
@@ -71,6 +78,8 @@ export declare class SdDateRangePicker {
     private handleSelect;
     private handleViewChange;
     private get displayText();
+    private static readonly DEFAULT_PLACEHOLDER;
+    private get resolvedPlaceholder();
     disconnectedCallback(): void;
     render(): any;
 }

package/dist/types/components/sd-field/sd-field.d.ts

@@ -37,6 +37,13 @@ export declare class SdField implements ValidatableField {
     label: string;
     /** 레이블 너비 */
     labelWidth: string | number;
+    /**
+     * 레이블 박스 높이 (숫자면 px). 미지정 시 size별 기본값 사용.
+     * multiline 등 컨트롤 박스가 커질 때 레이블을 첫 행에 맞추기 위해 사용한다.
+     */
+    labelHeight?: number | string;
+    /** 멀티라인 컨트롤 — 컨트롤 높이를 고정하지 않고 min-height만 적용한다. */
+    multiline: boolean;
     /** 필드 우측 어드온 레이블 */
     addonLabel: string;
     /** 어드온 정렬 방향 */

package/dist/types/components/sd-file-picker/sd-file-picker.config.d.ts

@@ -1,3 +1,4 @@
+/** 기본(sm) 레이아웃 — 하위호환용 단일 export */
 export declare const FILE_PICKER_LAYOUT: {
     height: string;
     paddingX: string;
@@ -10,6 +11,33 @@ export declare const FILE_PICKER_LAYOUT: {
     iconSize: string;
     contentsGap: string;
 };
+/** size별 레이아웃 맵 */
+export declare const FILE_PICKER_LAYOUTS: {
+    readonly sm: {
+        height: string;
+        paddingX: string;
+        gap: string;
+        radius: string;
+        borderWidth: string;
+        fontSize: string;
+        lineHeight: string;
+        fontWeight: string;
+        iconSize: string;
+        contentsGap: string;
+    };
+    readonly md: {
+        height: string;
+        paddingX: string;
+        gap: string;
+        radius: string;
+        borderWidth: string;
+        fontSize: string;
+        lineHeight: string;
+        fontWeight: string;
+        iconSize: string;
+        contentsGap: string;
+    };
+};
 export declare const FILE_PICKER_COLORS: {
     border: {
         default: string;

package/dist/types/components/sd-file-picker/sd-file-picker.d.ts

@@ -1,7 +1,7 @@
 import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
 import { Rule } from '../../types/form';
 import { SdTooltipProps } from '../sd-tooltip/sd-tooltip.config';
-import { type FieldAddonAlign } from '../sd-field/sd-field.config';
+import { type FieldAddonAlign, type FieldSize } from '../sd-field/sd-field.config';
 export declare class SdFilePicker implements ComponentInterface {
     el: HTMLElement;
     /** 선택된 파일 값 */
@@ -24,6 +24,8 @@ export declare class SdFilePicker implements ComponentInterface {
     maxTotalSize?: number | string;
     /** 최대 파일 개수 */
     maxFiles?: number | string;
+    /** 필드 크기 */
+    size: FieldSize;
     /** 폼 연동용 name 속성 */
     name: string;
     /** 레이블 텍스트 */

package/dist/types/components/sd-ghost-button/sd-ghost-button.d.ts

@@ -9,6 +9,11 @@ export declare class SdGhostButton {
     intent: GhostButtonIntent;
     /** 스크린리더용 접근성 레이블 */
     ariaLabel: string;
+    /**
+     * 토글 버튼일 때 눌림 상태 → `aria-pressed`로 반영. 미지정 시 속성 자체를 내보내지 않는다.
+     * (DOM `Element.ariaPressed`(문자열 예약 속성)와 충돌하므로 prop 이름은 `pressed`)
+     */
+    pressed?: boolean;
     /** 호버 시 표시할 툴팁 텍스트 */
     tooltipText?: string;
     /** 비활성 상태 여부 */

package/dist/types/components/sd-input/sd-input.d.ts

@@ -8,7 +8,7 @@ export declare class SdInput {
     /** 입력 값 */
     value?: string | number | null;
     /** 입력 타입 */
-    type: 'text' | 'password' | 'email';
+    type: 'text' | 'password' | 'email' | 'number' | 'tel' | 'search' | 'url';
     /** 입력 크기 */
     size: InputSize;
     /** 필드 우측 어드온 레이블 */

package/dist/types/components/sd-number-input/sd-number-input.d.ts

@@ -17,6 +17,8 @@ export declare class SdNumberInput {
     useButton: boolean;
     /** 소수점 입력 허용 여부 */
     useDecimal: boolean;
+    /** 소수점 이하 최대 자리수 (useDecimal일 때만 적용, 초과 입력한 소수부는 잘라냄) */
+    maxDecimalLength?: number;
     /** 입력 값 */
     value?: string | number | null;
     /** 레이블 텍스트 */
@@ -81,6 +83,12 @@ export declare class SdNumberInput {
     blur?: EventEmitter<Event>;
     private toNumber;
     private formatWithCommas;
+    /** useDecimal이면서 유효한 maxDecimalLength가 있을 때만 소수점 이하 제한 자리수를 반환합니다. */
+    private getDecimalLimit;
+    /** 소수부를 제한 자리수로 잘라낸 문자열을 반환합니다(반올림하지 않고 잘라냄). */
+    private truncateToDecimalLimit;
+    /** 숫자값의 소수부를 제한 자리수로 잘라냅니다(제한이 없으면 원본 그대로). */
+    private applyDecimalLimit;
     private parseInput;
     private clampMinMax;
     private updateDisplay;

package/dist/types/components/sd-popover/sd-popover.config.d.ts

@@ -0,0 +1,22 @@
+import { type ButtonName } from '../sd-button/sd-button.config';
+/** 팝오버 색상 타입 (default=다크 배경 / danger·warning·accent=라이트 배경) */
+export type PopoverType = 'default' | 'danger' | 'warning' | 'accent';
+/** 제목-아이콘 간격 */
+export declare const POPOVER_TITLE_GAP: string;
+/** 제목 좌측 아이콘 크기 */
+export declare const POPOVER_TITLE_ICON_SIZE: string;
+interface PopoverTypeStyle {
+    bg: string;
+    title: string;
+    description: string;
+    subAction: string;
+    /** 하단 우측 버튼 프리셋 (button.name 미지정 시 기본값) */
+    buttonName: ButtonName;
+}
+/**
+ * popoverType별 색상·버튼 매핑.
+ * - default·accent: 하단 버튼 primary(solid) / danger: danger outline / warning: neutral outline
+ * - default: 다크 배경 + 흰색 텍스트 / danger·warning·accent: 라이트 배경 + 타입 색상 제목 + light 계열 본문·링크 색상
+ */
+export declare const POPOVER_TYPE_CONFIG: Record<PopoverType, PopoverTypeStyle>;
+export {};