@sellmate/design-system 1.0.78 → 1.2.0

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h } from './index-Cnwbjz1F.js';
+import { r as registerInstance, c as createEvent, h } from './index-0U6dRjlq.js';
 import { u as useDatePicker, t as today } from './useDatePicker-DTrMR0rx.js';
-import { r as resolveColor } from './resolveColor-BxPyZJaz.js';
+import { r as resolveColor } from './resolveColor-Ce0cmS4R.js';
 
 const sdCalendarCss = () => `.sd-calendar.sc-sd-calendar{width:304px;box-sizing:border-box;border-radius:8px;padding:24px 19px;background:white}.sd-calendar.sc-sd-calendar .sd-calendar__header.sc-sd-calendar{display:flex;flex-flow:row nowrap;align-items:center;gap:20px;font-size:14px;padding:0 5px;height:24px;line-height:24px}.sd-calendar.sc-sd-calendar .sd-calendar__header.sc-sd-calendar .year-nav.sc-sd-calendar,.sd-calendar.sc-sd-calendar .sd-calendar__header.sc-sd-calendar .month-nav.sc-sd-calendar{display:flex;flex-flow:row nowrap;align-items:center;gap:12px}.sd-calendar.sc-sd-calendar .sd-calendar__header.sc-sd-calendar .year-nav.sc-sd-calendar button.sc-sd-calendar,.sd-calendar.sc-sd-calendar .sd-calendar__header.sc-sd-calendar .month-nav.sc-sd-calendar button.sc-sd-calendar{background:none;border:none;cursor:pointer;margin:0;padding:0}.sd-calendar.sc-sd-calendar .sd-calendar__header.sc-sd-calendar .year-nav__current.sc-sd-calendar{width:40px;text-align:center}.sd-calendar.sc-sd-calendar .sd-calendar__header.sc-sd-calendar .month-nav__current.sc-sd-calendar{width:100px;text-align:center}.sd-calendar.sc-sd-calendar .sd-calendar__days.sc-sd-calendar{margin-top:8px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));column-gap:10px;padding:0 5px}.sd-calendar.sc-sd-calendar .sd-calendar__days.sc-sd-calendar .day.sc-sd-calendar{width:28px;height:20px;font-size:12px;line-height:20px;text-align:center;color:#888888}.sd-calendar.sc-sd-calendar .sd-calendar__body.sc-sd-calendar{margin-top:12px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));grid-auto-rows:min-content}.sd-calendar.sc-sd-calendar .sd-calendar__cell.sc-sd-calendar{display:flex;flex-direction:column;align-items:center}.sd-calendar.sc-sd-calendar .sd-calendar__dots.sc-sd-calendar{display:flex;flex-wrap:wrap;gap:2px;justify-content:center;align-items:center;min-height:8px;max-width:28px}.sd-calendar.sc-sd-calendar .sd-calendar__dot.sc-sd-calendar{width:5px;height:5px;border-radius:50%;display:inline-block}.sd-calendar.sc-sd-calendar .sd-calendar__legend.sc-sd-calendar{display:flex;flex-wrap:wrap;gap:8px 12px;margin-top:16px;padding:12px 5px 0;border-top:1px solid #E5E5E5}.sd-calendar.sc-sd-calendar .sd-calendar__legend-item.sc-sd-calendar{display:flex;align-items:center;gap:4px}.sd-calendar.sc-sd-calendar .sd-calendar__legend-dot.sc-sd-calendar{width:6px;height:6px;border-radius:50%;display:inline-block;flex-shrink:0}.sd-calendar.sc-sd-calendar .sd-calendar__legend-label.sc-sd-calendar{font-size:11px;color:#888888;line-height:1}`;
 
@@ -55,29 +55,29 @@ const SdCalendar = class {
         this.viewChange.emit({ year: newYear, month: newMonth });
     }
     handleDateClick(day) {
-        if (!day)
+        if (day === 0)
             return;
         const date = this.dateUtil.formatDate(this.currentYear, this.currentMonth, day);
         this.value = date;
         this.select.emit(date);
     }
     isDisabledDate(date) {
-        if (!this.selectable)
+        if (this.selectable === undefined)
             return false;
         const [startSelectable, endSelectable] = this.selectable;
-        if (startSelectable && endSelectable) {
+        if (startSelectable !== '' && endSelectable !== '') {
             return date < startSelectable || date > endSelectable;
         }
-        if (startSelectable) {
+        if (startSelectable !== '') {
             return date < startSelectable;
         }
-        if (endSelectable) {
+        if (endSelectable !== '') {
             return date > endSelectable;
         }
         return false;
     }
     getEventColor(eventName) {
-        if (this.eventColors?.[eventName]) {
+        if (this.eventColors?.[eventName] !== undefined && this.eventColors[eventName] !== '') {
             return resolveColor(this.eventColors[eventName]);
         }
         const allEventNames = this.getAllEventNames();
@@ -105,24 +105,24 @@ const SdCalendar = class {
     }
     render() {
         const allEventNames = this.getAllEventNames();
-        return (h("div", { key: '149ca9ae588a7bd2d70ecf1bf13cc639c99f7da9', class: "sd-calendar" }, h("div", { key: '65f58d53fbaf35cee16007bad0b5e56dd208393e', class: "sd-calendar__header" }, h("div", { key: '76709fd094edaece5ede720a983d1103801ba76d', class: "year-nav" }, h("button", { key: '6d46cfa4cb1d12507ba7570cb6c0bb88bcba3402', type: "button", name: "prev-year", title: "Previous Year", onClick: () => {
+        return (h("div", { key: '3c3a6af518a3e96dd5d5d553ab2a00b9dd882221', class: "sd-calendar" }, h("div", { key: '660e96fcefe539b69ae7b69bb7a7eb209f40b02f', class: "sd-calendar__header" }, h("div", { key: '609b4d2e552adb526deefbf0719284c94ab01c21', class: "year-nav" }, h("button", { key: 'dc80f2e4fa441b9ed2e0a475f7982e7339c0cda7', type: "button", name: "prev-year", title: "Previous Year", onClick: () => {
                 this.currentYear = this.currentYear - 1;
                 this.viewChange.emit({ year: this.currentYear, month: this.currentMonth });
-            } }, h("sd-icon", { key: '1319ec1fa0f2533a5d02853cb7638b1f1c10e050', name: "arrowLeft", size: "12", color: "grey_45" })), h("span", { key: '678b705cd95dc499975e071f1607f26bdd50c36d', class: "year-nav__current" }, this.currentYear), h("button", { key: '1f5c3a0cd6108da5ed1beb10bd6af4ea5f22cf4c', type: "button", name: "next-year", title: "Next Year", onClick: () => {
+            } }, h("sd-icon", { key: 'ff62edabb67364704a4bfbcfc6f1658ad3d72408', name: "arrowLeft", size: "12", color: "grey_45" })), h("span", { key: '0829c746b8537196652e7c40b3babea14ae8053e', class: "year-nav__current" }, this.currentYear), h("button", { key: '3d288e5091445f2ed429de4aebb0d03f29eb6cc8', type: "button", name: "next-year", title: "Next Year", onClick: () => {
                 this.currentYear = this.currentYear + 1;
                 this.viewChange.emit({ year: this.currentYear, month: this.currentMonth });
-            } }, h("sd-icon", { key: '9dff93aef0996c3679a6a8c93c0fce1ea390f4aa', name: "arrowRight", size: "12", color: "grey_45" }))), h("div", { key: '9a6840420da580096fbf24d2c4df656114e23e6e', class: "month-nav" }, h("button", { key: '94bf7598e5b80d6deb407f607034ed6e9f88151f', type: "button", name: "prev-month", title: "Previous Month", onClick: () => this.handleUpdateMonth('prev') }, h("sd-icon", { key: '4ab19da5f6a12bf37b3c4d9aac4e2283762799e8', name: "arrowLeft", size: "12", color: "grey_45" })), h("span", { key: 'c207959595c107cae05a7cbe1d169357b063a29d', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), h("button", { key: 'fe319c8b26d9259bcba2b1f251bb827977e6afdc', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, h("sd-icon", { key: 'af5bb1c06058b6ce22c8d7ffacace2f558bdb013', name: "arrowRight", size: "12", color: "grey_45" })))), h("div", { key: 'ca66c0d7744970364f7d5e11e61014471df3325b', class: "sd-calendar__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("div", { key: day, class: "day" }, day)))), h("div", { key: '9d42c252b8b42754aedc64156ec1dbe45200cef0', class: { 'sd-calendar__body': true, 'sd-calendar__body--has-events': !!this.events } }, [
+            } }, h("sd-icon", { key: '5546ced1930082c68035db8b506b6ef2e953e305', name: "arrowRight", size: "12", color: "grey_45" }))), h("div", { key: '1db95c9f31c1a11b58a6f1ce4a13b9d6388f7994', class: "month-nav" }, h("button", { key: '2c5659945f3e0807a57ba22eb34576184e6ebf50', type: "button", name: "prev-month", title: "Previous Month", onClick: () => this.handleUpdateMonth('prev') }, h("sd-icon", { key: '7994e2bf63fc45ffb7d29b49ad279223a1a12a98', name: "arrowLeft", size: "12", color: "grey_45" })), h("span", { key: 'a8afd7592b3fba13a4560387bb759f4858273a85', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), h("button", { key: 'b3d21b13823bd674c43c1782b66df38010fcfa59', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, h("sd-icon", { key: '8605340fe8128b6a55328c97dc84481092009c76', name: "arrowRight", size: "12", color: "grey_45" })))), h("div", { key: '9312ff7f3af76aced7189f121c71ff252a92a71d', class: "sd-calendar__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("div", { key: day, class: "day" }, day)))), h("div", { key: 'cb93d417204b3bad65074e06e491038fe06b1389', class: { 'sd-calendar__body': true, 'sd-calendar__body--has-events': !!this.events } }, [
             ...this.calendar.prevMonthDays,
             ...this.calendar.days,
             ...this.calendar.afterMonthDays,
         ].map((day, idx) => {
             const formattedDate = this.dateUtil.formatDate(this.currentYear, this.currentMonth, Number(day));
-            const dateEvents = day ? this.getEventsForDate(formattedDate) : [];
+            const dateEvents = day !== 0 ? this.getEventsForDate(formattedDate) : [];
             const uniqueEvents = [...new Set(dateEvents)];
-            return (h("div", { class: "sd-calendar__cell", key: `${day}_${idx}` }, h("sd-date-box", { date: !day ? '' : Number(day), selected: this.value === formattedDate, isToday: today === formattedDate, disabled: !day ? true : this.isDisabledDate(formattedDate), onClick: !this.isDisabledDate(formattedDate) && day
+            return (h("div", { class: "sd-calendar__cell", key: `${day}_${idx}` }, h("sd-date-box", { date: day === 0 ? '' : Number(day), selected: this.value === formattedDate, isToday: today === formattedDate, disabled: day === 0 ? true : this.isDisabledDate(formattedDate), onClick: !this.isDisabledDate(formattedDate) && day !== 0
                     ? () => this.handleDateClick(Number(day))
-                    : undefined }), this.events && (h("div", { class: "sd-calendar__dots" }, uniqueEvents.map(eventName => (h("span", { key: eventName, class: "sd-calendar__dot", style: { backgroundColor: this.getEventColor(eventName) } })))))));
-        })), allEventNames.length > 0 && (h("div", { key: 'dac97204484b1def1fd3d73939ef64ef6969bce2', class: "sd-calendar__legend" }, allEventNames.map(name => (h("div", { key: name, class: "sd-calendar__legend-item" }, h("span", { class: "sd-calendar__legend-dot", style: { backgroundColor: this.getEventColor(name) } }), h("span", { class: "sd-calendar__legend-label" }, name))))))));
+                    : undefined }), this.events !== undefined && (h("div", { class: "sd-calendar__dots" }, uniqueEvents.map(eventName => (h("span", { key: eventName, class: "sd-calendar__dot", style: { backgroundColor: this.getEventColor(eventName) } })))))));
+        })), allEventNames.length > 0 && (h("div", { key: '0556e06bcd0bab75b61c60181d9b203cb6ad4741', class: "sd-calendar__legend" }, allEventNames.map(name => (h("div", { key: name, class: "sd-calendar__legend-item" }, h("span", { class: "sd-calendar__legend-dot", style: { backgroundColor: this.getEventColor(name) } }), h("span", { class: "sd-calendar__legend-label" }, name))))))));
     }
     static get watchers() { return {
         "value": [{

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, F as Fragment } from './index-Cnwbjz1F.js';
+import { r as registerInstance, h, F as Fragment } from './index-0U6dRjlq.js';
 
 const sdCardCss = () => `sd-card{display:block;height:fit-content}sd-card .sd-card{border-radius:8px;background:white}sd-card .sd-card--bordered{border:1px solid #E1E1E1}`;
 
@@ -9,7 +9,7 @@ const SdCard = class {
     bordered = false;
     sdClass = '';
     render() {
-        return (h(Fragment, { key: 'ce09898d7396b093f0f292700d5d6bd8b6249ad3' }, h("div", { key: 'df584d42ecf16b8ea3618238fb58e77cb7e80d9e', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, h("slot", { key: 'e031effb829371ca8c001bcc5596b4c9d01c8951' }))));
+        return (h(Fragment, { key: '2700ffa3af5b6b35882c396a838d9da2e866ee4b' }, h("div", { key: '3d3aeaac318fc089c42ae4348bc72015d4476276', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, h("slot", { key: 'e72f00bc8c209644baf5f431ce485fb5b691f354' }))));
     }
 };
 SdCard.style = sdCardCss();

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-Cnwbjz1F.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-0U6dRjlq.js';
 
 const checkbox = {
 	size: "16",
@@ -188,13 +188,13 @@ const SdCheckbox = class {
             '--sd-checkbox-inverse-icon': CHECKBOX_COLORS.checked.iconInverse,
             '--sd-checkbox-inverse-label': CHECKBOX_COLORS.labelInverse,
         };
-        return (h("label", { key: '0e4a142753f8ceda6356c184f1f227e9f11b8a43', class: this.checkboxClasses, style: cssVars }, h("input", { key: '53f7bac2fbc2c197ddcc2bb3cd0779598155af4c', type: "checkbox", ref: el => {
+        return (h("label", { key: '6b1ad950ce2f0b8e734efab6889a46064f7ef32a', class: this.checkboxClasses, style: cssVars }, h("input", { key: 'ee2fd70d61db2a5de6eab26dc07128e6158540e5', type: "checkbox", ref: el => {
                 this.inputEl = el;
-            }, value: this.val, checked: !!this.isChecked, disabled: this.disabled, onChange: this.handleChange, name: this.val?.toString() || 'checkbox', "aria-label": this.label || 'checkbox', "aria-checked": this.isChecked === null ? 'mixed' : this.isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }), h("div", { key: '0725d9e2ed16bec52b6340c9633ffed021558560', class: "sd-checkbox__bg" }, this.isChecked !== false ? (h("sd-icon", { name: this.isChecked === true ? 'check' : 'minus', size: Number(CHECKBOX_LAYOUT.iconSize), color: this.disabled
+            }, value: this.val, checked: !!this.isChecked, disabled: this.disabled, onChange: this.handleChange, name: this.val?.toString() || 'checkbox', "aria-label": this.label || 'checkbox', "aria-checked": this.isChecked === null ? 'mixed' : this.isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }), h("div", { key: '234e0e4100da6f1a5f65fb4f32cb4d8e1ba018fd', class: "sd-checkbox__bg" }, this.isChecked !== false ? (h("sd-icon", { name: this.isChecked === true ? 'checkboxCheck' : 'checkboxIndeterminate', size: Number(CHECKBOX_LAYOUT.iconSize), color: this.disabled
                 ? CHECKBOX_COLORS.checked.iconDisabled
                 : this.inverse
                     ? CHECKBOX_COLORS.checked.iconInverse
-                    : CHECKBOX_COLORS.checked.icon })) : null), this.label && h("span", { key: 'dcb8b972e88aa06d0a338ce8d2e2b86a0fbd8f3f', class: "sd-checkbox__label" }, this.label)));
+                    : CHECKBOX_COLORS.checked.icon })) : null), this.label && h("span", { key: '15afb8e3b31201febd15bb85d24ee9c9b246d1d0', class: "sd-checkbox__label" }, this.label)));
     }
     static get watchers() { return {
         "value": [{

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-Cnwbjz1F.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-0U6dRjlq.js';
 
 const chip = {
 	height: "24",
@@ -251,7 +251,7 @@ const SdChip = class {
         });
     }
     unregisterFromForm() {
-        if (!this.name)
+        if (this.name === '')
             return;
         const formEl = this.el.closest('sd-form');
         formEl?.componentOnReady().then(form => {
@@ -289,12 +289,12 @@ const SdChip = class {
             '--sd-chip-font-weight': typography.fontWeight,
             '--sd-chip-line-height': typography.lineHeight,
         };
-        return (h("span", { key: 'a821268b6bc2d04bd311b238009b750424e04e72', class: {
+        return (h("span", { key: '0addb8566b639d05921b9320b99abab7f1d67899', class: {
                 'sd-chip': true,
                 [`sd-chip--${state}`]: true,
                 'sd-chip--disabled': this.disabled,
                 'sd-chip--editable': !this.disabled,
-            }, role: this.disabled ? undefined : 'button', tabIndex: this.disabled || this.isEditing ? -1 : 0, "aria-disabled": this.disabled ? 'true' : undefined, style: cssVars, onClick: this.handleChipClick, onKeyDown: this.handleChipKeyDown }, this.isEditing ? (h("span", { key: "chip-input", ref: el => (this.inputEl = el), class: "sd-chip__input", contentEditable: !this.disabled, "data-placeholder": this.placeholder, spellcheck: false, onInput: this.handleInputChange, onKeyDown: this.handleInputKeyDown, onBlur: this.handleInputBlur, onPaste: this.handlePaste, onClick: event => event.stopPropagation() })) : ([
+            }, role: this.disabled ? undefined : 'button', tabIndex: this.disabled || this.isEditing ? -1 : 0, "aria-disabled": this.disabled ? 'true' : undefined, style: cssVars, onClick: this.handleChipClick, onKeyDown: this.handleChipKeyDown }, this.isEditing ? (h("span", { key: "chip-input", ref: el => (this.inputEl = el), class: "sd-chip__input", role: "textbox", tabindex: this.disabled ? -1 : 0, contentEditable: !this.disabled, "data-placeholder": this.placeholder, spellcheck: false, onInput: this.handleInputChange, onKeyDown: this.handleInputKeyDown, onBlur: this.handleInputBlur, onPaste: this.handlePaste, onClick: event => event.stopPropagation() })) : ([
             h("span", { key: "chip-label", class: "sd-chip__label" }, this.internalValue),
             !this.disabled && (h("sd-ghost-button", { key: "chip-remove", class: "sd-chip__remove", icon: "close", size: "xxs", ariaLabel: "remove", onClick: this.handleRemoveClick })),
         ])));

package/dist/esm/sd-circle-progress.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host } from './index-Cnwbjz1F.js';
+import { r as registerInstance, h, H as Host } from './index-0U6dRjlq.js';
 import { p as progressTokens } from './component.progress-D1vaasIp.js';
-import { s as systemTokens } from './system-CZ4ltUOw.js';
+import { s as systemTokens } from './system-GBlVDmy4.js';
 
 const spinner = {
 	color: {
@@ -70,7 +70,7 @@ const SdCircleProgress = class {
         }
         const c = CIRCLE_PROGRESS_VIEWBOX_SIZE / 2;
         const showPercent = !this.indeterminate;
-        return (h(Host, { key: '9a4424e79b095c240b2dd53c8655b9a4cccaf581', style: hostStyle }, h("svg", { key: '37ca87d4c4aa6ab6b84a4301225d775f1998c0c1', 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: '372f7031310dddba431323b0527c273311a498e3', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), h("circle", { key: 'def6ff7573e4c4a08648f35f7cb545d6b8064f6d', 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: '13d6345672fdafaf6a1e1eef9f5987179a99c3ae', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && h("span", { key: 'c42e2fa2826284017e530e967975e45277ae9ee3', class: "sd-circle-progress__label" }, this.label)));
+        return (h(Host, { key: 'f92bf4d6e4f1133c4465a4fec7b2bad4549a6d06', style: hostStyle }, h("svg", { key: '669fa503cc6007f48f35474b08e4359de695026d', 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: '020c7d840a6592d7705b65b14d27e3b5752629bf', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), h("circle", { key: 'e409da4a5c34adcd8744f16040ae9d5d6019a415', 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: '91c0b91e69293b67c8a0ad67a6d4b9e9db5c6d4a', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && h("span", { key: '03a5bee22a2e2f1b4ba75dbeca2ef5b4b9840aeb', class: "sd-circle-progress__label" }, this.label)));
     }
 };
 SdCircleProgress.style = sdCircleProgressCss();

package/dist/esm/sd-confirm-modal_2.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-Cnwbjz1F.js';
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-0U6dRjlq.js';
 import { m as modalTokens } from './component.modal-DOXMJi-V.js';
 
 const CONFIRM_MODAL_DEFAULT_BUTTON = {
@@ -73,14 +73,18 @@ const SdConfirmModal = class {
     disconnectedCallback() {
         this.slotObserver?.disconnect();
     }
+    get resolvedType() {
+        return this.type ?? 'positive';
+    }
     get resolvedMainButton() {
-        return this.mainButtonName ?? CONFIRM_MODAL_DEFAULT_BUTTON[this.type];
+        return this.mainButtonName ?? CONFIRM_MODAL_DEFAULT_BUTTON[this.resolvedType];
     }
     get hasTagContent() {
-        return !!(this.tagLabel || this.slotLabel);
+        return ((this.tagLabel !== undefined && this.tagLabel !== '') ||
+            (this.slotLabel !== undefined && this.slotLabel !== ''));
     }
     get showContentBox() {
-        return !!this.tagContents || this.hasTagContent || this.hasSlottedContent;
+        return this.tagContents != null || this.hasTagContent || this.hasSlottedContent;
     }
     syncHasSlottedContent() {
         const hasSlottedContent = Array.from(this.el.childNodes).some(node => !(node.nodeType === Node.ELEMENT_NODE &&
@@ -92,11 +96,12 @@ const SdConfirmModal = class {
         }
     }
     render() {
-        const iconName = CONFIRM_MODAL_ICON_MAP[this.type];
-        const iconColor = CONFIRM_MODAL_ICON_COLOR[this.type];
-        return (h("div", { key: '4ef44b1b2a86914eae3fc59e3c383b12646d1d0c', class: "sd-confirm-modal" }, h("sd-ghost-button", { key: 'aa62624aaf76a23eb4f1d30b846e6054f3cf001c', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (h("sd-icon", { key: 'd1329b8e71d455357790a4aa5f73547142830532', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), h("h2", { key: '2c5e0f902327c5eb663e6ccc5057e22e2be11c03', class: `sd-confirm-modal__title ${this.titleClass}` }, this.modalTitle), h("div", { key: '1917ef85f9f06de3dd321d664d4022dd4a1524ff', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (h("div", { key: 'afa7e6671f4849b7a90317664d07d3c04178c554', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg }))))), this.showContentBox && (h("div", { key: 'd4c06bfdd2222212b1cf8e3ec86ccaca4c394394', class: "sd-confirm-modal__content-box" }, this.tagContents ? (h("div", { class: "sd-confirm-modal__custom-content", ref: el => {
+        const type = this.resolvedType;
+        const iconName = CONFIRM_MODAL_ICON_MAP[type];
+        const iconColor = CONFIRM_MODAL_ICON_COLOR[type];
+        return (h("div", { key: '234455d93cbf02e5e70f78803914a8d91fbc4506', class: "sd-confirm-modal" }, h("sd-ghost-button", { key: '298f5279400b19159a8c08d2c739ab27cf88811c', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (h("sd-icon", { key: '41d01e92ff59cea05a367797ebde71cd13baed1f', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), h("h2", { key: 'd6b65e3a858a96f628602101adaaee2b62727df4', class: `sd-confirm-modal__title ${this.titleClass ?? ''}` }, this.modalTitle), h("div", { key: 'ed708bffc95467faabf70a9c2beec46fc1ba090c', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (h("div", { key: 'e7a996bef926fa3741ed9f2ecc930a6961f4c6e4', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg }))))), this.showContentBox && (h("div", { key: 'b4ab9cc0cf91166d4e34a7b4726d62c3463a9766', class: "sd-confirm-modal__content-box" }, this.tagContents ? (h("div", { class: "sd-confirm-modal__custom-content", ref: el => {
                 this.customContentRef = el;
-            } })) : (h("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && h("sd-tag", { name: this.tagPreset, label: this.tagLabel }), this.slotLabel && (h("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (h("div", { key: '8af201f6b6b08991ba31db2f2e59ee44a7b10d50', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg })))))), h("div", { key: '733f478a57a68bd9d4cc6563558bc0fafbfa5b9a', class: "sd-confirm-modal__button" }, this.subButtonLabel && (h("sd-button-v2", { key: 'a7be74a833fbd012d14e79b570a4d97e3a495a52', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), h("sd-button-v2", { key: 'e09be98a918aafd291a7b12c221b70e72ba14ab9', name: this.resolvedMainButton, label: this.mainButtonLabel, onSdClick: () => this.ok.emit() }))));
+            } })) : (h("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && h("sd-tag", { name: this.tagPreset ?? 'square_sm_grey', label: this.tagLabel }), this.slotLabel && (h("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (h("div", { key: '1dd63a93ecd0eae9ecfb61a3b98f1e6d1ac2b4b3', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg })))))), h("div", { key: 'e22a5fc951054808bc70962e104eb3951b65ca61', class: "sd-confirm-modal__button" }, this.subButtonLabel && (h("sd-button", { key: 'c1f23f043eead651e71943c7e76585b9b7fe964a', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), h("sd-button", { key: '63952e8b1c2d912fed6489760c97a787eaf2a90d', name: this.resolvedMainButton, label: this.mainButtonLabel ?? '확인', onSdClick: () => this.ok.emit() }))));
     }
 };
 SdConfirmModal.style = sdConfirmModalCss();
@@ -142,11 +147,14 @@ const SdLoadingModal = class {
     width;
     height;
     click;
+    get resolvedState() {
+        return this.state ?? 'loading';
+    }
     get resolvedMessage() {
-        return this.message || LOADING_MODAL_DEFAULT_MESSAGE[this.state];
+        return this.message || LOADING_MODAL_DEFAULT_MESSAGE[this.resolvedState];
     }
     get resolvedButtonLabel() {
-        return this.buttonLabel || LOADING_MODAL_DEFAULT_BUTTON_LABEL[this.state];
+        return this.buttonLabel || LOADING_MODAL_DEFAULT_BUTTON_LABEL[this.resolvedState];
     }
     handleClick = () => {
         this.click.emit();
@@ -176,7 +184,7 @@ const SdLoadingModal = class {
             '--sd-loading-modal-width': this.toCssSize(this.width) ?? `${LOADING_MODAL_LAYOUT.minWidth}px`,
             '--sd-loading-modal-height': this.toCssSize(this.height) ?? `${LOADING_MODAL_LAYOUT.minHeight}px`,
         };
-        return (h(Host, { key: '4245588093d82ec791b4ba7260eb3a1314c0e7a8', style: hostStyle }, h("div", { key: '4ad4c57bf68a5e33b453ed5ebb19f590f2ff8a9d', class: "sd-loading-modal" }, h("div", { key: 'bd45817bad45b9cffc9917d5f6570cb7409e8703', class: "sd-loading-modal__content" }, this.state === 'loading' ? (h("sd-circle-progress", { indeterminate: true })) : (h("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), h("div", { key: '16a09029e732058a4cdf0330e4afaf7322a88f76', class: "sd-loading-modal__message-wrapper" }, Array.isArray(this.resolvedMessage) ? (this.resolvedMessage.map(message => (h("p", { class: "sd-loading-modal__message" }, message)))) : (h("p", { class: "sd-loading-modal__message" }, this.resolvedMessage))), this.useButton && (h("div", { key: 'cdf9a51d233efcc86fa2405960f2ed304a07127b', class: "sd-loading-modal__button" }, h("sd-button-v2", { key: '36cd4b36d92fb725eb35a9d6bee7fd0c8fcf3395', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
+        return (h(Host, { key: 'a653095ef804a24fbc3c4a0e65d22971b537a9bf', style: hostStyle }, h("div", { key: '38a1a83501a707de8a431b38cd3e5525565fca5d', class: "sd-loading-modal" }, h("div", { key: '81ddeebfffa70bcc84fc3b2a02fb3d70441645c4', class: "sd-loading-modal__content" }, this.resolvedState === 'loading' ? (h("sd-circle-progress", { indeterminate: true })) : (h("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), h("div", { key: 'db87e7d46fcc6bfd07ce4191819e5e28051489b7', class: "sd-loading-modal__message-wrapper" }, Array.isArray(this.resolvedMessage) ? (this.resolvedMessage.map(message => (h("p", { class: "sd-loading-modal__message" }, message)))) : (h("p", { class: "sd-loading-modal__message" }, this.resolvedMessage))), this.useButton && (h("div", { key: '20134aca743319ea4e03e1b8a0359b92a3bdb0af', class: "sd-loading-modal__button" }, h("sd-button", { key: 'c6951624f69519d712bfdd619fd6b22216ecad87', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
     }
 };
 SdLoadingModal.style = sdLoadingModalCss();

package/dist/esm/sd-date-box.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-Cnwbjz1F.js';
+import { r as registerInstance, c as createEvent, h } from './index-0U6dRjlq.js';
 
 const sdDateBoxCss = () => `.sd-date-box.sc-sd-date-box{display:flex;align-items:center;justify-content:center;width:38px;height:36px;font-size:14px;position:relative;box-sizing:border-box;text-align:center;transition:background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);border-radius:14px}.sd-date-box.sc-sd-date-box .sd-date-box__content.sc-sd-date-box{width:28px;height:28px;border-radius:14px;position:relative}.sd-date-box.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box{position:relative;z-index:2;-webkit-user-select:none;user-select:none;line-height:28px}.sd-date-box.sd-date-box--disabled.sc-sd-date-box{color:#CCCCCC;cursor:default !important;pointer-events:none}.sd-date-box.sc-sd-date-box:not(.sd-date-box--disabled){color:#333333;cursor:pointer}.sd-date-box.sd-hoverable.sc-sd-date-box:hover .sd-date-box__content.sc-sd-date-box{background:#D9EAFF}.sd-date-box.sd-date-box--in-range.sc-sd-date-box:not(.sd-date-box--disabled) .sd-date-box__content.sc-sd-date-box::before{content:"";position:absolute;top:0;left:-5px;width:calc(100% + 10px);height:100%;background:#D9EAFF}.sd-date-box.sd-date-box--in-range.sd-date-box--type-start.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::before{left:auto !important;width:19px !important;right:-5px}.sd-date-box.sd-date-box--in-range.sd-date-box--type-end.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::before{width:19px !important}.sd-date-box.sd-date-box--in-range.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box{font-weight:500}.sd-date-box.sd-date-box--selected.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::after,.sd-date-box.sd-date-box--type-start.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::after,.sd-date-box.sd-date-box--type-end.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::after{content:"";position:absolute;inset:0;background:#0075FF;border-radius:14px;z-index:1}.sd-date-box.sd-date-box--selected.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box,.sd-date-box.sd-date-box--type-start.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box,.sd-date-box.sd-date-box--type-end.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box{color:white;font-weight:700}.sd-date-box.sd-date-box--start-date.sd-date-box--end-date.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::before{display:none !important}.sd-date-box.sd-date-box--today.sc-sd-date-box:not(.sd-date-box--selected) .sd-date-box__content.sc-sd-date-box::after{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:28px;height:28px;border:1px solid #E1E1E1 !important;border-radius:14px}`;
 
@@ -19,7 +19,7 @@ const SdDateBox = class {
     click;
     mouseOver;
     handleClickDate() {
-        if (this.disabled || !this.date)
+        if (this.disabled || this.date === undefined || this.date === '' || this.date === 0)
             return;
         if (typeof this.date === 'string')
             return;
@@ -31,7 +31,7 @@ const SdDateBox = class {
         this.mouseOver?.emit(this.date);
     }
     render() {
-        return (h("div", { key: 'b14dd7c9806828807cdfc232420a30c816ffbeb2', role: "button", tabindex: this.disabled ? -1 : 0, class: {
+        return (h("div", { key: 'ce4341db137de36e872a0e166bd89c33ac1ba91b', 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,
@@ -42,7 +42,12 @@ const SdDateBox = class {
                 'sd-date-box--in-range': this.inRange,
                 'sd-date-box--type-start': this.type === 'start',
                 'sd-date-box--type-end': this.type === 'end',
-            }, onClick: () => this.handleClickDate(), onMouseOver: () => this.handleHoverDate() }, h("div", { key: 'acb1a2d51d018913e39f8fd1fc54ab85c4ce6957', class: "sd-date-box__content" }, h("div", { key: '8c9445e4268cd254d76297ac1e775697d889f721', class: "sd-date-box__label" }, this.date))));
+            }, onClick: () => this.handleClickDate(), onKeyDown: e => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    this.handleClickDate();
+                }
+            }, onMouseOver: () => this.handleHoverDate(), onFocus: () => this.handleHoverDate() }, h("div", { key: 'e641ed011f8e7e55cc589f566163899b26503717', class: "sd-date-box__content" }, h("div", { key: 'e15a5fce460757d5cf486ec0678c2e604beab4db', class: "sd-date-box__label" }, this.date))));
     }
 };
 SdDateBox.style = sdDateBoxCss();

package/dist/esm/{sd-date-picker-calendar.entry.js → sd-date-picker-calendar_2.entry.js}

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h } from './index-Cnwbjz1F.js';
+import { r as registerInstance, c as createEvent, h } from './index-0U6dRjlq.js';
 import { u as useDatePicker, t as today } from './useDatePicker-DTrMR0rx.js';
-import { W as WEEK_LABELS, C as CALENDAR_LAYOUT } from './sd-date-picker.config-C2fDbE9d.js';
+import { W as WEEK_LABELS, C as CALENDAR_LAYOUT, a as DATEPICKER_SIZE_MAP, D as DATEPICKER_COLORS } from './sd-date-picker.config-B6cqMQaM.js';
 
 const sdDatePickerCalendarCss = () => `sd-date-picker-calendar{display:block}sd-date-picker-calendar .sd-date-picker-calendar{display:flex;flex-direction:column;gap:var(--calendar-gap);height:328px;padding:var(--calendar-padding);background:var(--calendar-bg);border-radius:var(--calendar-radius);box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2);user-select:none}sd-date-picker-calendar .sd-date-picker-calendar__header{display:flex;align-items:center;justify-content:center;gap:var(--calendar-header-gap);font-size:var(--calendar-header-font-size);line-height:var(--calendar-header-line-height);font-weight:var(--calendar-header-font-weight);color:var(--calendar-day-text)}sd-date-picker-calendar .sd-date-picker-calendar__nav-group{display:inline-flex;align-items:center;gap:var(--calendar-gap)}sd-date-picker-calendar .sd-date-picker-calendar__nav-group-month{width:100%}sd-date-picker-calendar .sd-date-picker-calendar__label{display:inline-flex;align-items:center;justify-content:center;min-width:40px;text-align:center}sd-date-picker-calendar .sd-date-picker-calendar__label-month{width:100%}sd-date-picker-calendar .sd-date-picker-calendar__divider{display:inline-block;width:1px;height:16px;background:var(--calendar-header-divider)}sd-date-picker-calendar .sd-date-picker-calendar__week{display:grid;grid-template-columns:repeat(7, var(--calendar-day-size))}sd-date-picker-calendar .sd-date-picker-calendar__week-cell{display:inline-flex;align-items:center;justify-content:center;height:20px;font-size:var(--calendar-week-font-size);line-height:var(--calendar-week-line-height);font-weight:var(--calendar-week-font-weight);color:var(--calendar-week-color)}sd-date-picker-calendar .sd-date-picker-calendar__grid{display:grid;grid-template-columns:repeat(7, var(--calendar-day-size));row-gap:var(--calendar-grid-row-gap)}sd-date-picker-calendar .sd-date-picker-calendar__day{display:inline-flex;align-items:center;justify-content:center;width:var(--calendar-day-size);height:32px;padding:0;border:none;background:transparent;cursor:pointer;font-size:var(--calendar-day-font-size);line-height:var(--calendar-day-line-height);font-weight:var(--calendar-day-font-weight);color:var(--calendar-day-text)}sd-date-picker-calendar .sd-date-picker-calendar__day-circle{display:inline-flex;align-items:center;justify-content:center;width:var(--calendar-day-circle-size);height:var(--calendar-day-circle-size);border-radius:calc(var(--calendar-day-circle-radius) * 1px);border:1px solid transparent;box-sizing:border-box}sd-date-picker-calendar .sd-date-picker-calendar__day:not(:disabled):hover .sd-date-picker-calendar__day-circle{border-radius:16px;border:1px solid var(--calendar-day-hover-border)}sd-date-picker-calendar .sd-date-picker-calendar__day--today .sd-date-picker-calendar__day-circle{font-weight:700}sd-date-picker-calendar .sd-date-picker-calendar__day--selected .sd-date-picker-calendar__day-circle{border-radius:16px;background:var(--calendar-day-select-bg);color:var(--calendar-day-select-text)}sd-date-picker-calendar .sd-date-picker-calendar__day--selected:not(:disabled):hover .sd-date-picker-calendar__day-circle{background:var(--calendar-day-select-bg);color:var(--calendar-day-select-text)}sd-date-picker-calendar .sd-date-picker-calendar__day--disabled{color:var(--calendar-day-disabled-text);background:none !important;cursor:not-allowed}sd-date-picker-calendar .sd-date-picker-calendar__day--empty{visibility:hidden;pointer-events:none}`;
 
@@ -99,9 +99,9 @@ const SdDatePickerCalendar = class {
         if (!this.selectable)
             return false;
         const [start, end] = this.selectable;
-        if (start && date < start)
+        if (start !== '' && date < start)
             return true;
-        if (end && date > end)
+        if (end !== '' && date > end)
             return true;
         return false;
     }
@@ -140,8 +140,8 @@ const SdDatePickerCalendar = class {
             '--calendar-day-font-weight': CALENDAR_LAYOUT.day.fontWeight,
             '--calendar-day-bold-font-weight': CALENDAR_LAYOUT.day.boldFontWeight,
         };
-        return (h("div", { key: 'baeaf5925dd87084b4f22445cc2fa6fe879d8faf', class: "sd-date-picker-calendar", style: cssVars }, h("div", { key: '784e0bb6698dc097d8fa9b136ec8bc1d82cfe798', class: "sd-date-picker-calendar__header" }, h("div", { key: 'e42d77c2a1c5d7c23e058b111ed87d3d27c9b465', class: "sd-date-picker-calendar__nav-group" }, h("sd-ghost-button", { key: 'fd5573590ca5c7aaf5b07a594d65f4f168d526d7', ariaLabel: "prevYear", size: "xxs", icon: "chevronLeft", onClick: this.goPrevYear }), h("span", { key: 'd8d2f3fcb2dca348c99f5a461260278ddf1ab16b', class: "sd-date-picker-calendar__label" }, this.currentYear), h("sd-ghost-button", { key: 'f134fdd299bcead5d9ce594355f1c58be057fbbe', ariaLabel: "nextYear", size: "xxs", icon: "chevronRight", onClick: this.goNextYear })), h("span", { key: '14ab983354ded802bb715516872b0148acc3cd66', class: "sd-date-picker-calendar__divider", "aria-hidden": "true" }), h("div", { key: 'f8b0754ff487c944cf95fcb2fd05c2ca596b3107', class: "sd-date-picker-calendar__nav-group sd-date-picker-calendar__nav-group-month" }, h("sd-ghost-button", { key: '47d95d368b04f1ff81c416d93ba3bb9a5481f3cb', ariaLabel: "prevMonth", size: "xxs", icon: "chevronLeft", onClick: this.goPrevMonth }), h("span", { key: 'baf40a29a0aacd3c868c0ca63035c09080f412af', class: "sd-date-picker-calendar__label sd-date-picker-calendar__label-month" }, this.currentMonth, "\uC6D4"), h("sd-ghost-button", { key: '4b8f189022d7c61072f07b23c5576410183bc801', ariaLabel: "nextMonth", size: "xxs", icon: "chevronRight", onClick: this.goNextMonth }))), h("div", { key: 'c6b4251396b957905e0462a62ca5b8475c375dd6', class: "sd-date-picker-calendar__week" }, WEEK_LABELS.map(label => (h("span", { key: label, class: "sd-date-picker-calendar__week-cell" }, label)))), h("div", { key: '76a1fe94ca8943f8cf0e7be30b8a9838a9cd22ef', class: "sd-date-picker-calendar__grid" }, this.cells.map(cell => {
-            const isSelected = cell.inCurrentMonth && !!this.value && this.value === cell.date;
+        return (h("div", { key: '5fca5d51cbe5005cde3468c10f39397831371762', class: "sd-date-picker-calendar", style: cssVars }, h("div", { key: '5b6a101b463b455bfc70f9b92665fe308f45773d', class: "sd-date-picker-calendar__header" }, h("div", { key: '3fe7a4e416c632640371f9b3cb12baf72c7eab06', class: "sd-date-picker-calendar__nav-group" }, h("sd-ghost-button", { key: '1c71cf45dae23308ff901f08b606f0cfcdc7e5b4', ariaLabel: "prevYear", size: "xxs", icon: "chevronLeft", onClick: this.goPrevYear }), h("span", { key: 'aa9863d2cac5eb5d00a0d72570b216206b669f37', class: "sd-date-picker-calendar__label" }, this.currentYear), h("sd-ghost-button", { key: '941118e0c3cd37ed5decb2e91cfa738221f74958', ariaLabel: "nextYear", size: "xxs", icon: "chevronRight", onClick: this.goNextYear })), h("span", { key: 'e630c7269a617deeaa38cace0e2a91affb558688', class: "sd-date-picker-calendar__divider", "aria-hidden": "true" }), h("div", { key: '45cfc135eeb6bf834cef92c1e36f2def4d7c2058', class: "sd-date-picker-calendar__nav-group sd-date-picker-calendar__nav-group-month" }, h("sd-ghost-button", { key: '98483c6626ea13cdb78be806feaa1748d60b6a1a', ariaLabel: "prevMonth", size: "xxs", icon: "chevronLeft", onClick: this.goPrevMonth }), h("span", { key: '9e6097a040679203117436966c246f00b94f5ff2', class: "sd-date-picker-calendar__label sd-date-picker-calendar__label-month" }, this.currentMonth, "\uC6D4"), h("sd-ghost-button", { key: '0ab7ccdae8678bb909aca74f4189a4426e51ec0b', ariaLabel: "nextMonth", size: "xxs", icon: "chevronRight", onClick: this.goNextMonth }))), h("div", { key: '07763d55d00fd6c6b3523bbbb2e994a177a5b81c', class: "sd-date-picker-calendar__week" }, WEEK_LABELS.map(label => (h("span", { key: label, class: "sd-date-picker-calendar__week-cell" }, label)))), h("div", { key: '0304efaa140a8dba320e0e6791ef886bc77ac57b', class: "sd-date-picker-calendar__grid" }, this.cells.map(cell => {
+            const isSelected = cell.inCurrentMonth && this.value !== '' && this.value === cell.date;
             const isToday = cell.inCurrentMonth && today === cell.date;
             const isDisabled = cell.inCurrentMonth && this.isDisabled(cell.date);
             return (h("button", { type: "button", key: cell.date, class: {
@@ -161,4 +161,56 @@ const SdDatePickerCalendar = class {
 };
 SdDatePickerCalendar.style = sdDatePickerCalendarCss();
 
-export { SdDatePickerCalendar as sd_date_picker_calendar };
+const sdDatePickerTriggerCss = () => `sd-date-picker-trigger{display:block;width:100%;height:100%}sd-date-picker-trigger .sd-date-picker-trigger{display:flex;align-items:center;gap:var(--trigger-gap);width:100%;height:100%;padding:0 var(--trigger-padding-x);cursor:pointer;user-select:none;overflow:hidden;border-radius:var(--trigger-radius)}sd-date-picker-trigger .sd-date-picker-trigger--disabled{cursor:not-allowed}sd-date-picker-trigger .sd-date-picker-trigger__icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}sd-date-picker-trigger .sd-date-picker-trigger__text{flex:1;min-width:var(--trigger-text-min-width, 80px);font-size:var(--trigger-font-size);line-height:var(--trigger-line-height);font-weight:var(--trigger-font-weight);color:var(--trigger-text-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}`;
+
+const SdDatePickerTrigger = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.triggerClick = createEvent(this, "sdTriggerClick", 7);
+    }
+    displayText = '';
+    placeholder = 'YYYY-MM-DD';
+    disabled = false;
+    size = 'sm';
+    triggerClick;
+    handleClick = () => {
+        if (this.disabled)
+            return;
+        this.triggerClick.emit();
+    };
+    render() {
+        const sizeTokens = DATEPICKER_SIZE_MAP[this.size] ?? DATEPICKER_SIZE_MAP.sm;
+        const hasValue = this.displayText !== '';
+        const textMinWidth = this.size === 'md' ? 104 : 80;
+        const cssVars = {
+            '--trigger-padding-x': `${sizeTokens.paddingX}px`,
+            '--trigger-gap': `${sizeTokens.gap}px`,
+            '--trigger-icon-size': `${sizeTokens.iconSize}px`,
+            '--trigger-font-size': `${sizeTokens.fontSize}px`,
+            '--trigger-line-height': `${sizeTokens.lineHeight}px`,
+            '--trigger-font-weight': sizeTokens.fontWeight,
+            '--trigger-radius': `${sizeTokens.radius}px`,
+            '--trigger-text-min-width': `${textMinWidth}px`,
+            '--trigger-text-color': this.disabled
+                ? DATEPICKER_COLORS.text.disabled
+                : hasValue
+                    ? DATEPICKER_COLORS.text.default
+                    : DATEPICKER_COLORS.text.hint,
+            '--trigger-icon-color': this.disabled
+                ? DATEPICKER_COLORS.icon.disabled
+                : DATEPICKER_COLORS.icon.default,
+        };
+        return (h("div", { key: 'df53dd75ead71167d7089daab5718c7ff1c990ae', 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 => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    this.handleClick();
+                }
+            } }, h("sd-icon", { key: '76f41c99e1695eaa191cbc81ae057e65cb78e955', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), h("span", { key: '4e1a4b2b41737f05dc1a4e642d317f5fc93bf9b2', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
+    }
+};
+SdDatePickerTrigger.style = sdDatePickerTriggerCss();
+
+export { SdDatePickerCalendar as sd_date_picker_calendar, SdDatePickerTrigger as sd_date_picker_trigger };

package/dist/esm/{sd-date-picker.config-C2fDbE9d.js → sd-date-picker.config-B6cqMQaM.js}

@@ -93,8 +93,7 @@ const datepicker = {
 			bg: "#D9EAFF",
 			height: "32",
 			panelGap: "24",
-			divider: "#E1E1E1"}
-	}
+			divider: "#E1E1E1"}}
 };
 var datepickerTokens = {
 	datepicker: datepicker