@sellmate/design-system 1.29.0 → 1.32.0

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

@@ -10,8 +10,8 @@ export class SdChip {
     error = false;
     /** 비활성 상태 여부 */
     disabled = false;
-    /** 인라인 편집 가능 여부 */
-    editable = true;
+    /** 인라인 편집 가능 여부 (기본값 false) */
+    editable = false;
     /** 닫기 버튼 표시 여부 */
     showRemove = true;
     /** 편집 중 표시할 placeholder */
@@ -96,11 +96,11 @@ export class SdChip {
         return this.inputEl ?? null;
     }
     /**
-     * SSR 환경에서 editable prop이 전달되지 않으면 undefined로 들어올 수 있으므로,
-     * false로 명시된 경우에만 편집 불가로 처리한다 (기본값 true).
+     * editable이 명시적으로 true일 때만 편집 가능으로 처리한다 (기본값 false — RN SChip과 일치).
+     * SSR 등에서 editable이 undefined로 들어와도 편집 불가로 안전하게 처리된다.
      */
     get isEditable() {
-        return this.editable !== false;
+        return this.editable === true;
     }
     enterEditMode = () => {
         if (this.disabled || this.isEditing || !this.isEditable)
@@ -234,7 +234,7 @@ export class SdChip {
             '--sd-chip-font-weight': typography.fontWeight,
             '--sd-chip-line-height': typography.lineHeight,
         };
-        return (h("span", { key: '2cd717bc842330a28bbc89a662deda16f59106ee', class: {
+        return (h("span", { key: '1dbe21611f38fdcd5670bddf6da42ae4581253e8', class: {
                 'sd-chip': true,
                 [`sd-chip--${state}`]: true,
                 'sd-chip--disabled': this.disabled,
@@ -349,13 +349,13 @@ export class SdChip {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "\uC778\uB77C\uC778 \uD3B8\uC9D1 \uAC00\uB2A5 \uC5EC\uBD80"
+                    "text": "\uC778\uB77C\uC778 \uD3B8\uC9D1 \uAC00\uB2A5 \uC5EC\uBD80 (\uAE30\uBCF8\uAC12 false)"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "editable",
-                "defaultValue": "true"
+                "defaultValue": "false"
             },
             "showRemove": {
                 "type": "boolean",

package/dist/collection/components/sd-chip-input/sd-chip-input.css

@@ -22,6 +22,9 @@ sd-chip-input .sd-chip-input__reset {
   gap: var(--sd-chip-input-reset-gap);
   flex-shrink: 0;
 }
+sd-chip-input .sd-chip-input__reset--end {
+  margin-left: auto;
+}
 sd-chip-input .sd-chip-input__divider {
   display: inline-block;
   width: 1px;

package/dist/collection/components/sd-chip-input/sd-chip-input.js

@@ -27,6 +27,8 @@ export class SdChipInput {
     useReset = false;
     /** 최대 입력 가능한 칩 개수 (없으면 제한 없음) */
     maxCount;
+    /** 최대 개수·초기화 meta 위치 (end=우측 끝으로 정렬 / inline=콘텐츠에 이어서 배치) */
+    metaPlacement = 'end';
     /** 중복 에러 메시지에 표시할 항목 이름 (없으면 기본 메시지 사용) */
     duplicateLabel;
     /** 자동완성 후보 목록 */
@@ -37,8 +39,8 @@ export class SdChipInput {
     recommendedItems = [];
     /** 추천 항목 로딩 중 여부 */
     loadingRecommendedItems = false;
-    /** 자동완성 드롭다운 최소 너비 (숫자면 px, 문자열이면 그대로 적용. 없으면 입력 필드 너비를 사용) */
-    autocompleteMinWidth;
+    /** 드롭다운(자동완성) 최소 너비 (숫자면 px, 문자열이면 그대로 적용. 기본값 200) */
+    dropdownMinWidth = 200;
     // sd-field props
     /** 레이블 텍스트 */
     label = '';
@@ -411,16 +413,16 @@ export class SdChipInput {
             ...suggestionBoxBaseStyle,
             width: `${this.chipInputRef?.offsetWidth ?? 0}px`,
         };
-        // 자동완성은 입력 중인 칩(필드) 기준으로 노출되며, 최소 너비를 유지한 채 텍스트 길이에 따라 늘어난다.
-        const autocompleteMinWidth = this.autocompleteMinWidth != null
-            ? typeof this.autocompleteMinWidth === 'number'
-                ? `${this.autocompleteMinWidth}px`
-                : this.autocompleteMinWidth
-            : `${this.fieldRef?.offsetWidth ?? 0}px`;
+        // 자동완성은 입력 중인 칩(필드) 기준으로 노출되며, 최소 너비(기본 200px)를 유지한 채 텍스트 길이에 따라 늘어난다.
+        const resolvedDropdownMinWidth = this.dropdownMinWidth == null
+            ? `${this.fieldRef?.offsetWidth ?? 0}px`
+            : typeof this.dropdownMinWidth === 'number'
+                ? `${this.dropdownMinWidth}px`
+                : this.dropdownMinWidth;
         const autocompleteBoxStyle = {
             ...suggestionBoxBaseStyle,
             width: 'max-content',
-            minWidth: autocompleteMinWidth,
+            minWidth: resolvedDropdownMinWidth,
         };
         const suggestionItemStyle = {
             display: 'flex',
@@ -448,7 +450,7 @@ export class SdChipInput {
             fontFamily: CHIP_INPUT_SUGGESTIONS.itemFontFamily,
             color: CHIP_INPUT_SUGGESTIONS.emptyColor,
         };
-        return (h("sd-field", { key: 'c5f94bcc3343549d225d8310e98d424bd74471e5', name: this.name, label: this.label, labelWidth: this.labelWidth, hint: this.hint, errorMessage: this.errorMessage, rules: [this.duplicateRule, ...(this.rules ?? [])], error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, width: this.width, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: cssVars, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("div", { key: '40a0d8d08b33ff454eae29e815afd0378b93d927', class: "sd-chip-input", ref: el => (this.chipInputRef = el), onClick: this.handleContainerClick }, (this.internalValues ?? []).map((value, i) => (h("sd-chip", { key: i, value: value, error: this.getChipError(i), disabled: this.getChipDisabled(i), editable: false, onSdRemove: () => this.handleChipRemove(i) }))), !isMaxReached && (h("div", { key: 'c40b423a77272adaded79c3bc45af2084ef76ecf', class: {
+        return (h("sd-field", { key: '7be2526c67f5eddf5a8652211e7fb47610559d84', name: this.name, label: this.label, labelWidth: this.labelWidth, hint: this.hint, errorMessage: this.errorMessage, rules: [this.duplicateRule, ...(this.rules ?? [])], error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, width: this.width, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: cssVars, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("div", { key: '07534d138b631226433ed17101de70170df269cb', class: "sd-chip-input", ref: el => (this.chipInputRef = el), onClick: this.handleContainerClick }, (this.internalValues ?? []).map((value, i) => (h("sd-chip", { key: i, value: value, error: this.getChipError(i), disabled: this.getChipDisabled(i), editable: false, onSdRemove: () => this.handleChipRemove(i) }))), !isMaxReached && (h("div", { key: '329ec02d448fe6da2b9cba977fc2e17fa86e358f', class: {
                 'sd-chip-input__field': true,
                 'sd-chip-input__field--filled': this.inputValue !== '',
                 'sd-chip-input__field--empty': this.inputValue === '' && this.internalValues.length > 0 && !this.focused,
@@ -456,12 +458,15 @@ export class SdChipInput {
                 ? this.inputValue
                 : this.internalValues.length === 0
                     ? this.placeholder
-                    : '' }, h("input", { key: '05ff9dc453577cb53a6284b9d064ef3e572bbc83', ref: el => (this.inputEl = el), class: "sd-chip-input__input", placeholder: this.internalValues.length === 0 ? this.placeholder : '', disabled: this.disabled, size: 1, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur }))), showResetArea && (
+                    : '' }, h("input", { key: 'bbe535cc1dd12db472b995bbe1c7d4ac43aa85e4', ref: el => (this.inputEl = el), class: "sd-chip-input__input", placeholder: this.internalValues.length === 0 ? this.placeholder : '', disabled: this.disabled, size: 1, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur }))), showResetArea && (
         // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-        h("div", { key: 'f2e5336974905e3b7672567b29ad4f902ed2bcdf', class: "sd-chip-input__reset",
+        h("div", { key: '2384ba5c13e27556f8135f71c43aa8dd98922850', class: {
+                'sd-chip-input__reset': true,
+                'sd-chip-input__reset--end': this.metaPlacement === 'end',
+            }, "data-placement": this.metaPlacement,
             // 리셋 버튼 클릭 시 input blur → portal unmount → refocus → 새 portal mount로
             // 두 wrapper가 body에 잠깐 겹치는 타이밍 이슈를 방지한다.
-            onMouseDown: e => e.preventDefault() }, this.inputValue === '' && h("span", { key: '65f0bcd6086029ab9637dd6c7a64524478c11e76', class: "sd-chip-input__divider" }), this.maxCount != null && (h("span", { key: 'd4702a86e9f1ca03bf74937dfb9e0c822e9722bf', class: "sd-chip-input__max-count" }, "\uCD5C\uB300 ", this.maxCount, "\uAC1C")), this.useReset && this.internalValues.length > 0 && (h("sd-text-link", { key: '70a5d27129e37e49d8d8d7f92b6ad9471575fa71', icon: "reset", iconColor: CHIP_INPUT_RESET.iconColor, label: "\uC785\uB825 \uCD08\uAE30\uD654", underline: true, disabled: this.disabled, style: { '--sd-text-link-color': CHIP_INPUT_RESET.labelColor }, onSdClick: this.handleResetInput })))), h("sd-portal", { key: '24e9ac9124c514debc6df00ed663c20ac0f92bf7', class: "sd-chip-input__autocomplete-portal", open: showAutocomplete, parentRef: this.fieldRef ?? null, viewportPadding: SdChipInput.SUGGESTIONS_VIEWPORT_PADDING, onSdClose: this.closeSuggestions }, h("div", { key: 'd0e7697fc7a8a754d6b1ce6a34c205bbc7630a81', class: "sd-chip-input__suggestions sd-chip-input__suggestions--autocomplete", role: "listbox", style: autocompleteBoxStyle }, isAutocompleteLoading && (h("div", { key: '2709073f6174ede46b5d9e4d0c72f9b2dc207c54', class: "sd-chip-input__suggestions-empty", style: suggestionEmptyStyle }, "\uBD88\uB7EC\uC624\uB294 \uC911...")), autocompleteListItems.map((item, i) => {
+            onMouseDown: e => e.preventDefault() }, this.inputValue === '' && h("span", { key: 'b332a240d13c48f31c76cf7c5afffe69b25213e5', class: "sd-chip-input__divider" }), this.maxCount != null && (h("span", { key: '70641e0b72e6aec6e02a9cfa84e7a118b24f1355', class: "sd-chip-input__max-count" }, "\uCD5C\uB300 ", this.maxCount, "\uAC1C")), this.useReset && this.internalValues.length > 0 && (h("sd-text-link", { key: '2dba93d961187b5f2a8501038ea01beb45123a5a', icon: "reset", iconColor: CHIP_INPUT_RESET.iconColor, label: "\uC785\uB825 \uCD08\uAE30\uD654", underline: true, disabled: this.disabled, style: { '--sd-text-link-color': CHIP_INPUT_RESET.labelColor }, onSdClick: this.handleResetInput })))), h("sd-portal", { key: '68eea57d431b5aafecafc785febe50ead9586652', class: "sd-chip-input__autocomplete-portal", open: showAutocomplete, parentRef: this.fieldRef ?? null, viewportPadding: SdChipInput.SUGGESTIONS_VIEWPORT_PADDING, onSdClose: this.closeSuggestions }, h("div", { key: 'face530c9604516f06ed9c304172f64fa44d42b0', class: "sd-chip-input__suggestions sd-chip-input__suggestions--autocomplete", role: "listbox", style: autocompleteBoxStyle }, isAutocompleteLoading && (h("div", { key: '1d691afb5bf3a65991bcff925bb8c6ceffa3a688', class: "sd-chip-input__suggestions-empty", style: suggestionEmptyStyle }, "\uBD88\uB7EC\uC624\uB294 \uC911...")), autocompleteListItems.map((item, i) => {
             const isSelected = (this.internalValues ?? []).includes(item);
             const isActive = i === this.activeSuggestionIndex && !isSelected;
             return (h("div", { key: item, class: {
@@ -487,7 +492,7 @@ export class SdChipInput {
                     if (!isSelected)
                         this.addChip(item);
                 } }, h("span", { style: { flex: '1' } }, item), isSelected && (h("sd-icon", { name: "check", size: "12", style: { color: '#0075FF', flexShrink: '0' } }))));
-        }))), h("sd-portal", { key: '96424b38ffe1ec646b48fdea0b65cdb9dbc2caf7', class: "sd-chip-input__recommendation-portal", open: showRecommendations, parentRef: this.chipInputRef ?? null, viewportPadding: SdChipInput.SUGGESTIONS_VIEWPORT_PADDING, onSdClose: this.closeSuggestions }, h("div", { key: '2ae809c5d03b662e98252768ac3f7ac44730dbb7', class: "sd-chip-input__suggestions", role: "listbox", style: suggestionBoxStyle }, isRecommendationLoading && (h("div", { key: '3dbf23b89e923762c0ee092f9f5f724a043bd3a6', class: "sd-chip-input__suggestions-empty", style: suggestionEmptyStyle }, "\uBD88\uB7EC\uC624\uB294 \uC911...")), h("div", { key: 'ebbccb03b333bed84a88d1ca10f0e4e142211582', style: {
+        }))), h("sd-portal", { key: '44d969fb589aad9d292725e6d5fa90da814012fe', class: "sd-chip-input__recommendation-portal", open: showRecommendations, parentRef: this.chipInputRef ?? null, viewportPadding: SdChipInput.SUGGESTIONS_VIEWPORT_PADDING, onSdClose: this.closeSuggestions }, h("div", { key: 'e87049f20b42bfe12e8127aa51133704d4bdd233', class: "sd-chip-input__suggestions", role: "listbox", style: suggestionBoxStyle }, isRecommendationLoading && (h("div", { key: '63815fc8325a93178fd8eb1b6394bb489ae1344d', class: "sd-chip-input__suggestions-empty", style: suggestionEmptyStyle }, "\uBD88\uB7EC\uC624\uB294 \uC911...")), h("div", { key: '2598ec64253198067f3b215e79d90d256a9eb562', style: {
                 display: 'flex',
                 flexWrap: 'wrap',
                 gap: '8px',
@@ -745,6 +750,26 @@ export class SdChipInput {
                 "reflect": false,
                 "attribute": "max-count"
             },
+            "metaPlacement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'end' | 'inline'",
+                    "resolved": "\"end\" | \"inline\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\uCD5C\uB300 \uAC1C\uC218\u00B7\uCD08\uAE30\uD654 meta \uC704\uCE58 (end=\uC6B0\uCE21 \uB05D\uC73C\uB85C \uC815\uB82C / inline=\uCF58\uD150\uCE20\uC5D0 \uC774\uC5B4\uC11C \uBC30\uCE58)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "meta-placement",
+                "defaultValue": "'end'"
+            },
             "duplicateLabel": {
                 "type": "string",
                 "mutable": false,
@@ -840,7 +865,7 @@ export class SdChipInput {
                 "attribute": "loading-recommended-items",
                 "defaultValue": "false"
             },
-            "autocompleteMinWidth": {
+            "dropdownMinWidth": {
                 "type": "any",
                 "mutable": false,
                 "complexType": {
@@ -852,12 +877,13 @@ export class SdChipInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "\uC790\uB3D9\uC644\uC131 \uB4DC\uB86D\uB2E4\uC6B4 \uCD5C\uC18C \uB108\uBE44 (\uC22B\uC790\uBA74 px, \uBB38\uC790\uC5F4\uC774\uBA74 \uADF8\uB300\uB85C \uC801\uC6A9. \uC5C6\uC73C\uBA74 \uC785\uB825 \uD544\uB4DC \uB108\uBE44\uB97C \uC0AC\uC6A9)"
+                    "text": "\uB4DC\uB86D\uB2E4\uC6B4(\uC790\uB3D9\uC644\uC131) \uCD5C\uC18C \uB108\uBE44 (\uC22B\uC790\uBA74 px, \uBB38\uC790\uC5F4\uC774\uBA74 \uADF8\uB300\uB85C \uC801\uC6A9. \uAE30\uBCF8\uAC12 200)"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "autocomplete-min-width"
+                "attribute": "dropdown-min-width",
+                "defaultValue": "200"
             },
             "label": {
                 "type": "string",

package/dist/collection/components/sd-circle-progress/sd-circle-progress.js

@@ -33,7 +33,7 @@ export class SdCircleProgress {
         }
         const c = CIRCLE_PROGRESS_VIEWBOX_SIZE / 2;
         const showPercent = !this.indeterminate;
-        return (h(Host, { key: '869ec15d8df4b3e240b70599d8ba72618cda4c87', style: hostStyle }, h("svg", { key: '446fa350f3c7e225e455f5f6c12b4aab45d20287', class: "sd-circle-progress", viewBox: `0 0 ${CIRCLE_PROGRESS_VIEWBOX_SIZE} ${CIRCLE_PROGRESS_VIEWBOX_SIZE}`, xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: 'c3555674067f60ab1a1458d789d62fc9bbc8015f', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), h("circle", { key: '62716c5645d957be08ea0e0818e47edda2c9e471', class: "sd-circle-progress__arc", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH, "stroke-linecap": "round", style: arcStyle })), showPercent && (h("span", { key: 'b56d75c0c40cb82d4c4c87161913b28063a9d369', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && h("span", { key: '65cfb5cd0426c7cbf5ee7aefeaf675471abccaaf', class: "sd-circle-progress__label" }, this.label)));
+        return (h(Host, { key: '7458f47e0e621f2cead4d72618edcd2bdab4b923', style: hostStyle }, h("svg", { key: 'ca0b2b99ac2e1c4a6a51b509fa37292689f4f6ff', class: "sd-circle-progress", viewBox: `0 0 ${CIRCLE_PROGRESS_VIEWBOX_SIZE} ${CIRCLE_PROGRESS_VIEWBOX_SIZE}`, xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: '61d09511593f23d1e88712fa45c341a45e34589d', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), h("circle", { key: 'a4875d4001db2ee091a41c0afe7a4afb0062c610', class: "sd-circle-progress__arc", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH, "stroke-linecap": "round", style: arcStyle })), showPercent && (h("span", { key: 'a49f13b27e1c8ee46370ff0fc7692e7d535ddca3', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && h("span", { key: '0c76f052dbccb5f2e33511afb5ff5d325e36d697', class: "sd-circle-progress__label" }, this.label)));
     }
     static get is() { return "sd-circle-progress"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-confirm-modal/sd-confirm-modal.js

@@ -87,7 +87,7 @@ export class SdConfirmModal {
         const type = this.resolvedType;
         const iconName = CONFIRM_MODAL_ICON_MAP[type];
         const iconColor = CONFIRM_MODAL_ICON_COLOR[type];
-        return (h("div", { key: '0376a60d15b1e090a6ff8d4181f8afb107d5ede3', class: "sd-confirm-modal" }, h("sd-ghost-button", { key: 'e652536ecf9a97c19a943de4ef5ebca99323a40a', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (h("sd-icon", { key: '8bb1e4a9207681ced8f06fa1919c99104a03b71c', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), h("h2", { key: '08991739402f4a1f8b4da3af3df24eec556cf88e', class: `sd-confirm-modal__title ${this.titleClass ?? ''}` }, this.modalTitle), h("div", { key: 'ba7aad2acaacc31f6e66122648c36b3398620b5b', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (h("div", { key: '6a0ccc07791d2d4c8923c1616fe9346d4a3c92c0', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) }))))), this.showTagBox && (h("div", { key: '0e380d6d5ffe607863bae04821098b7585016f96', class: "sd-confirm-modal__content-box" }, h("slot", { key: 'de4eddc19f18831bf59797bda48aa4eaea3fac6a', name: "tag", onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && (h("sd-tag", { key: 'a63cfc4baaef0a1a8e666d5dba8528b8b135c1bc', name: this.tagPreset ?? 'square_sm_grey', label: this.tagLabel }))))), (this.bottomMessage ?? []).length > 0 && (h("div", { key: '0e9ebab6b5aaf4af7282358f7ddc57dc75cd682a', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) }))))), this.showOption && (h("div", { key: 'cd8088453591b2fbda51aac93c8284e0f3c23aa9', class: "sd-confirm-modal__option" }, h("slot", { key: '4cbe1c57b47f12ba1f3cae23b55fb694f6b00787', name: "option", onSlotchange: () => this.syncHasSlottedContent() }, this.slotLabel && (h("span", { key: 'ed7e7aa05f5e32de4a361dcf8e3f2c2207dc9981', class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), h("div", { key: '069af4cfe63733e6960dd9e35888b26a06269026', class: "sd-confirm-modal__button" }, this.subButtonLabel && (h("sd-button", { key: 'a5371149596d109bede88df34736aaff88745f18', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), h("sd-button", { key: '46c0406da30bd761aa4d09f70ae9bb735b8dff5f', name: this.resolvedMainButton, label: this.mainButtonLabel ?? '확인', onSdClick: () => this.ok.emit() }))));
+        return (h("div", { key: '8d84d72de4a8194100a22c2f19190d35da8ad9d0', class: "sd-confirm-modal" }, h("sd-ghost-button", { key: '8d3c11e01819fc4b3a92ef2c00afab336b12a4d8', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (h("sd-icon", { key: 'f5013d2753d946a46666c3fc4e7e5ec79ebb5bf3', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), h("h2", { key: '88ca2b2d80ec9dfe06aa6d9ae4d65a9bf365e52e', class: `sd-confirm-modal__title ${this.titleClass ?? ''}` }, this.modalTitle), h("div", { key: 'ab9ad0c312d4155a5d8985d43c31f4ab11fc9110', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (h("div", { key: '294bea4d946392e63ec152f4a109e75fd9c5a743', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) }))))), this.showTagBox && (h("div", { key: '6ab23578df59a6c29718087fda729a256f32e725', class: "sd-confirm-modal__content-box" }, h("slot", { key: '48c21c001a4608d1b36c4a8feee99d7ee05422c7', name: "tag", onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && (h("sd-tag", { key: 'fb227ba974fc9b176e90bfa906c212099c23c98b', name: this.tagPreset ?? 'square_sm_grey', label: this.tagLabel }))))), (this.bottomMessage ?? []).length > 0 && (h("div", { key: '665429ebae13b9c71e4eeaf372c45dbb98b71aa8', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) }))))), this.showOption && (h("div", { key: '589d730c0952cd6370f96984f2d0e3c9a9fe50e6', class: "sd-confirm-modal__option" }, h("slot", { key: '23a57ca4663436aabd4f606246c80d3c3aec1ecf', name: "option", onSlotchange: () => this.syncHasSlottedContent() }, this.slotLabel && (h("span", { key: '6dead5dc544f4f1ed68a50d2619a6c10f438ea67', class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), h("div", { key: '7156c27678f8f9a6de5afdbeed191a954420f1fa', class: "sd-confirm-modal__button" }, this.subButtonLabel && (h("sd-button", { key: '02a6b6ffe4218e93ceef0dad349cd122587864df', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), h("sd-button", { key: '6441fda6cebcc24fd48715ed85909b652725788f', name: this.resolvedMainButton, label: this.mainButtonLabel ?? '확인', onSdClick: () => this.ok.emit() }))));
     }
     static get is() { return "sd-confirm-modal"; }
     static get originalStyleUrls() {

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

@@ -38,7 +38,7 @@ export class SdDatePickerTrigger {
                 ? DATEPICKER_COLORS.icon.disabled
                 : DATEPICKER_COLORS.icon.default,
         };
-        return (h("div", { key: '60a3b3ac02181faaabc1b77bdd8923069afa0af0', role: "button", tabindex: this.disabled ? -1 : 0, class: {
+        return (h("div", { key: 'b52c18bc057886ed8d6b1f5d145225a4c31f0035', role: "button", tabindex: this.disabled ? -1 : 0, class: {
                 'sd-date-picker-trigger': true,
                 'sd-date-picker-trigger--disabled': this.disabled,
             }, style: cssVars, onClick: this.handleClick, onKeyDown: e => {
@@ -46,7 +46,7 @@ export class SdDatePickerTrigger {
                     e.preventDefault();
                     this.handleClick();
                 }
-            } }, h("sd-icon", { key: 'cafd36605dcc7edb20f11c008abd7b434eb1d36e', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), h("span", { key: '6d9b6fad8b60fe8d9bcc02762b688eccc66f63b3', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
+            } }, h("sd-icon", { key: 'd653fa9a79c41b39e77a6a77afba2233a977ba29', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), h("span", { key: 'e37f745bab9ea7ac1864ce0944ffd9d1d62eecd2', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
     }
     static get is() { return "sd-date-picker-trigger"; }
     static get originalStyleUrls() {

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

@@ -33,6 +33,8 @@ export class SdDatePicker {
     rules = [];
     /** 에러 상태 여부 */
     error = false;
+    /** 필드 상태 (없으면 error/rules 결과로 자동 결정) */
+    status;
     /** 레이블 영역 아이콘 */
     icon = undefined;
     /** 레이블 툴팁 텍스트 */
@@ -116,9 +118,9 @@ export class SdDatePicker {
             '--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: 'f6fe03d9c87b8de3d33d641934b28f1e42a1b23a', 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: '0d77d31b48f1ee8f87f7e59f472b0335f19b00be', class: "sd-date-picker", ref: el => {
+        return (h("sd-field", { key: 'c3adbcb65f372a7c33350a747b29b5a35990c292', 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: 'aac9b498321c4506a6979a17de4896c4521887a1', class: "sd-date-picker", ref: el => {
                 this.triggerRef = el;
-            } }, h("sd-date-picker-trigger", { key: '003de27ec2c3c660b1c183f10af02d6d982a6069', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '719f5f0a191286d2f2d06ca41c5746f6dea569e3', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-calendar", { key: 'd4a62d31666f21f6fb9d03f09cf36d16acc1c8a9', elevated: true, value: this.value, selectable: this.selectable, onSdUpdate: this.handleSelect, onSdViewChange: this.handleViewChange })))));
+            } }, h("sd-date-picker-trigger", { key: '00a558ac1c9a5af666c62c15e18e240036e1bb34', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '142098d59d8a5df4054e7a39f4d93b0ddc06109b', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-calendar", { key: '319dc85ff9a41e8b04fdaecc1c7e9e01c953014b', elevated: true, value: this.value, selectable: this.selectable, onSdUpdate: this.handleSelect, onSdViewChange: this.handleViewChange })))));
     }
     static get is() { return "sd-date-picker"; }
     static get originalStyleUrls() {
@@ -429,6 +431,25 @@ export class SdDatePicker {
                 "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-date-range-picker/sd-date-range-picker-calendar/sd-date-range-picker-calendar.css

@@ -12,6 +12,9 @@ sd-date-range-picker-calendar .sd-date-range-picker-calendar {
   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;
@@ -181,4 +184,76 @@ 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);
 }

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() {