@sellmate/design-system 1.20.0 → 1.21.0

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

@@ -1,14 +1,24 @@
 import { h } from "@stencil/core";
 export class SdDateBox {
+    /** 표시할 날짜 값 */
     date = null;
+    /** 비활성 상태 여부 */
     disabled = false;
+    /** 선택된 날짜 여부 */
     selected = false;
+    /** 범위 시작일 여부 */
     isStartDate = false;
+    /** 범위 종료일 여부 */
     isEndDate = false;
+    /** 오늘 날짜 여부 */
     isToday = false;
+    /** 선택 범위 내 날짜 여부 */
     inRange = false;
+    /** 범위 선택에서의 역할 (start | end | 없음) */
     type = '';
+    /** 날짜 클릭 시 해당 날짜 값을 전달합니다. */
     click;
+    /** 날짜 hover 시 해당 날짜 값을 전달합니다. */
     mouseOver;
     handleClickDate() {
         if (this.disabled || this.date === undefined || this.date === '' || this.date === 0)
@@ -23,7 +33,7 @@ export class SdDateBox {
         this.mouseOver?.emit(this.date);
     }
     render() {
-        return (h("div", { key: 'ab09e8112e18b04dab2d171fa6dbd8554d11e57b', role: "button", tabindex: this.disabled ? -1 : 0, class: {
+        return (h("div", { key: '8b8bc2facd0f4614a6022c48bbd026390d8599e4', role: "button", tabindex: this.disabled ? -1 : 0, class: {
                 'sd-date-box': true,
                 'sd-hoverable': !this.disabled || !this.selected || this.type === '',
                 'sd-date-box--disabled': this.disabled,
@@ -39,7 +49,7 @@ export class SdDateBox {
                     e.preventDefault();
                     this.handleClickDate();
                 }
-            }, onMouseOver: () => this.handleHoverDate(), onFocus: () => this.handleHoverDate() }, h("div", { key: 'b7e418536d6de86ae4e8042a0fc59dece42f7489', class: "sd-date-box__content" }, h("div", { key: '41f2b2136cc60e2d1a6664852a3fadf30413de0f', class: "sd-date-box__label" }, this.date))));
+            }, onMouseOver: () => this.handleHoverDate(), onFocus: () => this.handleHoverDate() }, h("div", { key: 'acbd57ac0300ca143f1e75780b59b5fc107d537f', class: "sd-date-box__content" }, h("div", { key: 'aeff50640c285cfd75d5592e67c97e5ec55eb00c', class: "sd-date-box__label" }, this.date))));
     }
     static get is() { return "sd-date-box"; }
     static get encapsulation() { return "scoped"; }
@@ -67,7 +77,7 @@ export class SdDateBox {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD45C\uC2DC\uD560 \uB0A0\uC9DC \uAC12"
                 },
                 "getter": false,
                 "setter": false,
@@ -87,7 +97,7 @@ export class SdDateBox {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uBE44\uD65C\uC131 \uC0C1\uD0DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -107,7 +117,7 @@ export class SdDateBox {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC120\uD0DD\uB41C \uB0A0\uC9DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -127,7 +137,7 @@ export class SdDateBox {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uBC94\uC704 \uC2DC\uC791\uC77C \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -147,7 +157,7 @@ export class SdDateBox {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uBC94\uC704 \uC885\uB8CC\uC77C \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -167,7 +177,7 @@ export class SdDateBox {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC624\uB298 \uB0A0\uC9DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -187,7 +197,7 @@ export class SdDateBox {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC120\uD0DD \uBC94\uC704 \uB0B4 \uB0A0\uC9DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -213,7 +223,7 @@ export class SdDateBox {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uBC94\uC704 \uC120\uD0DD\uC5D0\uC11C\uC758 \uC5ED\uD560 (start | end | \uC5C6\uC74C)"
                 },
                 "getter": false,
                 "setter": false,
@@ -232,7 +242,7 @@ export class SdDateBox {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB0A0\uC9DC \uD074\uB9AD \uC2DC \uD574\uB2F9 \uB0A0\uC9DC \uAC12\uC744 \uC804\uB2EC\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "number | string | null",
@@ -247,7 +257,7 @@ export class SdDateBox {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB0A0\uC9DC hover \uC2DC \uD574\uB2F9 \uB0A0\uC9DC \uAC12\uC744 \uC804\uB2EC\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "number | string | null",

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

@@ -1,10 +1,15 @@
 import { h } from "@stencil/core";
 import { DATEPICKER_SIZE_MAP, DATEPICKER_COLORS, } from "../sd-date-picker.config";
 export class SdDatePickerTrigger {
+    /** 표시할 날짜 텍스트 */
     displayText = '';
+    /** 입력 힌트 텍스트 */
     placeholder = 'YYYY-MM-DD';
+    /** 비활성 상태 여부 */
     disabled = false;
+    /** 트리거 크기 */
     size = 'sm';
+    /** 트리거 클릭 시 발생합니다. */
     triggerClick;
     handleClick = () => {
         if (this.disabled)
@@ -33,7 +38,7 @@ export class SdDatePickerTrigger {
                 ? DATEPICKER_COLORS.icon.disabled
                 : DATEPICKER_COLORS.icon.default,
         };
-        return (h("div", { key: 'ed74f03f3860fe86e7bc3b5430501b064a0288a7', role: "button", tabindex: this.disabled ? -1 : 0, class: {
+        return (h("div", { key: 'a8484cc7ca6fd02ea48ab033fec3da69702f4f71', 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 => {
@@ -41,7 +46,7 @@ export class SdDatePickerTrigger {
                     e.preventDefault();
                     this.handleClick();
                 }
-            } }, h("sd-icon", { key: '67994572f65a0f13622deef67f89b22c083791a0', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), h("span", { key: '142f26e05ae2287d03a9e733b64ddf34f2ed1256', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
+            } }, h("sd-icon", { key: 'e87c63032774389064c56f3212882727c1091b53', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), h("span", { key: '3876d7e9c08771de796ab04106190baf45625f0f', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
     }
     static get is() { return "sd-date-picker-trigger"; }
     static get originalStyleUrls() {
@@ -68,7 +73,7 @@ export class SdDatePickerTrigger {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD45C\uC2DC\uD560 \uB0A0\uC9DC \uD14D\uC2A4\uD2B8"
                 },
                 "getter": false,
                 "setter": false,
@@ -88,7 +93,7 @@ export class SdDatePickerTrigger {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC785\uB825 \uD78C\uD2B8 \uD14D\uC2A4\uD2B8"
                 },
                 "getter": false,
                 "setter": false,
@@ -108,7 +113,7 @@ export class SdDatePickerTrigger {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uBE44\uD65C\uC131 \uC0C1\uD0DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -135,7 +140,7 @@ export class SdDatePickerTrigger {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD2B8\uB9AC\uAC70 \uD06C\uAE30"
                 },
                 "getter": false,
                 "setter": false,
@@ -154,7 +159,7 @@ export class SdDatePickerTrigger {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD2B8\uB9AC\uAC70 \uD074\uB9AD \uC2DC \uBC1C\uC0DD\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "void",

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

@@ -4,43 +4,66 @@ import { DATEPICKER_SIZE_MAP, DATEPICKER_COLORS, } from "./sd-date-picker.config
 export class SdDatePicker {
     static CLOSE_ANIMATION_DURATION = 150;
     el;
+    /** 선택된 날짜 (YYYY-MM-DD) */
     value = null;
+    /** 입력 필드 크기 */
     size = 'sm';
+    /** 날짜 미선택 시 표시할 placeholder */
     placeholder = 'YYYY-MM-DD';
+    /** 선택 가능한 날짜 범위 [시작일, 종료일] */
     selectable;
+    /** 비활성 상태 여부 */
     disabled = false;
+    /** 필드 너비 (숫자면 px, 문자열이면 그대로 적용) */
     width = '';
     // sd-field 공통 props
+    /** 레이블 텍스트 */
     label = '';
+    /** 레이블 너비 */
     labelWidth = '';
+    /** 필드 우측 어드온 레이블 */
     addonLabel = '';
+    /** 어드온 정렬 방향 */
     addonAlign = 'start';
+    /** 필드 하단 힌트 텍스트 */
     hint = '';
+    /** 에러 메시지 */
     errorMessage = '';
+    /** 유효성 검사 규칙 목록 */
     rules = [];
+    /** 에러 상태 여부 */
     error = false;
+    /** 레이블 영역 아이콘 */
     icon = undefined;
+    /** 레이블 툴팁 텍스트 */
     labelTooltip = '';
+    /** 레이블 툴팁 상세 옵션 */
     labelTooltipProps = null;
     isOpen = false;
     isAnimatingOut = false;
     focused = false;
     hovered = false;
+    /** 날짜 선택 시 선택된 날짜(YYYY-MM-DD)를 전달합니다. */
     update;
+    /** 달력 월/년 이동 시 현재 보여지는 연·월을 전달합니다. */
     viewChange;
     triggerRef;
     formField;
     closeAnimationTimer;
+    /** 폼 연동용 name 속성 */
     name = nanoid();
     watchIsOpen(newValue) {
         this.focused = newValue;
     }
+    /** 유효성 검사를 실행합니다. */
     async sdValidate() {
         return this.formField?.sdValidate();
     }
+    /** 값과 유효성 상태를 초기화합니다. */
     async sdReset() {
         return this.formField?.sdReset();
     }
+    /** 유효성 상태만 초기화합니다. */
     async sdResetValidate() {
         return this.formField?.sdResetValidation();
     }
@@ -93,9 +116,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: 'cbd8e081f56fb2fb53854cd0937fe24e5d6d9b97', 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: 'e7798ec50f7d22628a17a953ac87882160248de4', class: "sd-date-picker", ref: el => {
+        return (h("sd-field", { key: '2fc699a41a6646404e5cbd29688f14c61b466c56', 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: '33c690078e2511657bfe3747d81cc1333b021353', class: "sd-date-picker", ref: el => {
                 this.triggerRef = el;
-            } }, h("sd-date-picker-trigger", { key: 'ce203f70a001f9caa9071fb667d9bf58f57748ec', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: 'c5f875bc826fa1f899205cfefe2db57da3dd34b4', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-calendar", { key: '8626faebafac8201979e02c444279124c3261b67', elevated: true, value: this.value, selectable: this.selectable, onSdUpdate: this.handleSelect, onSdViewChange: this.handleViewChange })))));
+            } }, h("sd-date-picker-trigger", { key: 'b5248eecbf1c4e8eca4e5b23206b7bebe7034280', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: 'f89b8688a43b9c702d75b8c5587b30626c7fd2db', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-calendar", { key: '4b293972c1b860f6d85be57fb72689c94699aeae', elevated: true, value: this.value, selectable: this.selectable, onSdUpdate: this.handleSelect, onSdViewChange: this.handleViewChange })))));
     }
     static get is() { return "sd-date-picker"; }
     static get originalStyleUrls() {
@@ -122,7 +145,7 @@ export class SdDatePicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC120\uD0DD\uB41C \uB0A0\uC9DC (YYYY-MM-DD)"
                 },
                 "getter": false,
                 "setter": false,
@@ -149,7 +172,7 @@ export class SdDatePicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC785\uB825 \uD544\uB4DC \uD06C\uAE30"
                 },
                 "getter": false,
                 "setter": false,
@@ -169,7 +192,7 @@ export class SdDatePicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB0A0\uC9DC \uBBF8\uC120\uD0DD \uC2DC \uD45C\uC2DC\uD560 placeholder"
                 },
                 "getter": false,
                 "setter": false,
@@ -189,7 +212,7 @@ export class SdDatePicker {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC120\uD0DD \uAC00\uB2A5\uD55C \uB0A0\uC9DC \uBC94\uC704 [\uC2DC\uC791\uC77C, \uC885\uB8CC\uC77C]"
                 },
                 "getter": false,
                 "setter": false
@@ -206,7 +229,7 @@ export class SdDatePicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uBE44\uD65C\uC131 \uC0C1\uD0DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -226,7 +249,7 @@ export class SdDatePicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD544\uB4DC \uB108\uBE44 (\uC22B\uC790\uBA74 px, \uBB38\uC790\uC5F4\uC774\uBA74 \uADF8\uB300\uB85C \uC801\uC6A9)"
                 },
                 "getter": false,
                 "setter": false,
@@ -246,7 +269,7 @@ export class SdDatePicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB808\uC774\uBE14 \uD14D\uC2A4\uD2B8"
                 },
                 "getter": false,
                 "setter": false,
@@ -266,7 +289,7 @@ export class SdDatePicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB808\uC774\uBE14 \uB108\uBE44"
                 },
                 "getter": false,
                 "setter": false,
@@ -286,7 +309,7 @@ export class SdDatePicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD544\uB4DC \uC6B0\uCE21 \uC5B4\uB4DC\uC628 \uB808\uC774\uBE14"
                 },
                 "getter": false,
                 "setter": false,
@@ -313,7 +336,7 @@ export class SdDatePicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC5B4\uB4DC\uC628 \uC815\uB82C \uBC29\uD5A5"
                 },
                 "getter": false,
                 "setter": false,
@@ -333,7 +356,7 @@ export class SdDatePicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD544\uB4DC \uD558\uB2E8 \uD78C\uD2B8 \uD14D\uC2A4\uD2B8"
                 },
                 "getter": false,
                 "setter": false,
@@ -353,7 +376,7 @@ export class SdDatePicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC5D0\uB7EC \uBA54\uC2DC\uC9C0"
                 },
                 "getter": false,
                 "setter": false,
@@ -380,7 +403,7 @@ export class SdDatePicker {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC720\uD6A8\uC131 \uAC80\uC0AC \uADDC\uCE59 \uBAA9\uB85D"
                 },
                 "getter": false,
                 "setter": false,
@@ -398,7 +421,7 @@ export class SdDatePicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC5D0\uB7EC \uC0C1\uD0DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -423,7 +446,7 @@ export class SdDatePicker {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB808\uC774\uBE14 \uC601\uC5ED \uC544\uC774\uCF58"
                 },
                 "getter": false,
                 "setter": false,
@@ -441,7 +464,7 @@ export class SdDatePicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB808\uC774\uBE14 \uD234\uD301 \uD14D\uC2A4\uD2B8"
                 },
                 "getter": false,
                 "setter": false,
@@ -468,7 +491,7 @@ export class SdDatePicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB808\uC774\uBE14 \uD234\uD301 \uC0C1\uC138 \uC635\uC158"
                 },
                 "getter": false,
                 "setter": false,
@@ -486,7 +509,7 @@ export class SdDatePicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD3FC \uC5F0\uB3D9\uC6A9 name \uC18D\uC131"
                 },
                 "getter": false,
                 "setter": false,
@@ -513,7 +536,7 @@ export class SdDatePicker {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB0A0\uC9DC \uC120\uD0DD \uC2DC \uC120\uD0DD\uB41C \uB0A0\uC9DC(YYYY-MM-DD)\uB97C \uC804\uB2EC\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "string | null",
@@ -528,7 +551,7 @@ export class SdDatePicker {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB2EC\uB825 \uC6D4/\uB144 \uC774\uB3D9 \uC2DC \uD604\uC7AC \uBCF4\uC5EC\uC9C0\uB294 \uC5F0\u00B7\uC6D4\uC744 \uC804\uB2EC\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "{ year: number; month: number }",
@@ -552,7 +575,7 @@ export class SdDatePicker {
                     "return": "Promise<boolean | undefined>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uC720\uD6A8\uC131 \uAC80\uC0AC\uB97C \uC2E4\uD589\uD569\uB2C8\uB2E4.",
                     "tags": []
                 }
             },
@@ -569,7 +592,7 @@ export class SdDatePicker {
                     "return": "Promise<void | undefined>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uAC12\uACFC \uC720\uD6A8\uC131 \uC0C1\uD0DC\uB97C \uCD08\uAE30\uD654\uD569\uB2C8\uB2E4.",
                     "tags": []
                 }
             },
@@ -586,7 +609,7 @@ export class SdDatePicker {
                     "return": "Promise<void | undefined>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uC720\uD6A8\uC131 \uC0C1\uD0DC\uB9CC \uCD08\uAE30\uD654\uD569\uB2C8\uB2E4.",
                     "tags": []
                 }
             }

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

@@ -3,15 +3,20 @@ import { today, addDays } from "../../../utils/date";
 import { useDatePicker } from "../../../modules/useDatePicker";
 import { CALENDAR_LAYOUT, RANGE_LAYOUT, WEEK_LABELS } from "../sd-date-range-picker.config";
 export class SdDateRangePickerCalendar {
+    /** 선택된 날짜 범위 [시작일, 종료일] */
     value = null;
+    /** 선택 가능한 날짜 범위 제한 */
     selectable;
+    /** 최대 선택 가능 일 수 */
     maxRange;
     currentYear;
     currentMonth;
     pendingStart = '';
     hoverDate = '';
     displayValue = null;
+    /** 날짜 범위 선택 시 발생합니다. */
     select;
+    /** 달력 뷰가 변경될 때 발생합니다. */
     viewChange;
     dateUtil = useDatePicker();
     componentWillLoad() {
@@ -239,7 +244,7 @@ export class SdDateRangePickerCalendar {
             '--range-panel-gap': `${RANGE_LAYOUT.panelGap}px`,
             '--range-divider': RANGE_LAYOUT.divider,
         };
-        return (h(Fragment, { key: 'd46df258093b5c57d1b958efb7e52cabd4cb1eb4' }, h("div", { key: '04fc01524115d9b57462ad1eaf9281fe1c63dd84', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), h("div", { key: '91428a1dd98b7a9c534b28a9cd683f35935dfee2', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), h("span", { key: '26d4f7e3391c50340e0f45f018b02d11ad7bd23b', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
+        return (h(Fragment, { key: '351cf65dcf32acba409f32c5bfa0681989093f32' }, h("div", { key: '99f29a4e401d2ebaea0ebb55c2a4e55d55f23a7f', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), h("div", { key: '251fe254a39d7093633be176c413608abd3c47c1', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), h("span", { key: 'fb69fea401d17f3862b4a21162747161246c42e2', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
     }
     static get is() { return "sd-date-range-picker-calendar"; }
     static get originalStyleUrls() {
@@ -266,7 +271,7 @@ export class SdDateRangePickerCalendar {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC120\uD0DD\uB41C \uB0A0\uC9DC \uBC94\uC704 [\uC2DC\uC791\uC77C, \uC885\uB8CC\uC77C]"
                 },
                 "getter": false,
                 "setter": false,
@@ -284,7 +289,7 @@ export class SdDateRangePickerCalendar {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC120\uD0DD \uAC00\uB2A5\uD55C \uB0A0\uC9DC \uBC94\uC704 \uC81C\uD55C"
                 },
                 "getter": false,
                 "setter": false
@@ -301,7 +306,7 @@ export class SdDateRangePickerCalendar {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uCD5C\uB300 \uC120\uD0DD \uAC00\uB2A5 \uC77C \uC218"
                 },
                 "getter": false,
                 "setter": false,
@@ -328,7 +333,7 @@ export class SdDateRangePickerCalendar {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB0A0\uC9DC \uBC94\uC704 \uC120\uD0DD \uC2DC \uBC1C\uC0DD\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "[string, string]",
@@ -343,7 +348,7 @@ export class SdDateRangePickerCalendar {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB2EC\uB825 \uBDF0\uAC00 \uBCC0\uACBD\uB420 \uB54C \uBC1C\uC0DD\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "{ year: number; month: number }",