@sellmate/design-system 1.1.0 → 1.3.0

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

@@ -1,126 +1,194 @@
 import { h } from "@stencil/core";
-import { useDatePicker } from "../../modules/useDatePicker";
-import { resolveColor } from "../../utils/color";
 import { today } from "../../utils/date";
-const DEFAULT_COLORS = [
-    'brilliantblue_75',
-    'red_60',
-    'green_65',
-    'orange_60',
-    'steelblue_65',
-    'yellow_45',
-    'oceanblue_65',
-    'olive_55',
-];
+import { useDatePicker } from "../../modules/useDatePicker";
+import { CALENDAR_LAYOUT, WEEK_LABELS } from "./sd-calendar.config";
 export class SdCalendar {
     value = null;
     selectable;
     events;
-    eventColors;
     currentYear;
     currentMonth;
-    eventsRevision = 0;
-    select;
+    update;
     viewChange;
     dateUtil = useDatePicker();
+    _eventMapCache;
+    get eventMap() {
+        const cache = this._eventMapCache;
+        if (cache && cache.src === this.events)
+            return cache.map;
+        const map = new Map();
+        (this.events ?? []).forEach(g => g.dates.forEach(d => {
+            const arr = map.get(d) ?? [];
+            arr.push({ color: g.color, label: g.label });
+            map.set(d, arr);
+        }));
+        this._eventMapCache = { src: this.events, map };
+        return map;
+    }
+    get legendItems() {
+        const seen = new Set();
+        const out = [];
+        (this.events ?? []).forEach(g => {
+            const key = `${g.color}|${g.label}`;
+            if (seen.has(key))
+                return;
+            seen.add(key);
+            out.push({ color: g.color, label: g.label });
+        });
+        return out;
+    }
     componentWillLoad() {
-        this.initCalendar();
+        this.syncViewFromValue();
     }
     handleValueChange() {
-        this.initCalendar();
-    }
-    handleEventsChange() {
-        this.eventsRevision = this.eventsRevision + 1;
+        this.syncViewFromValue();
     }
-    initCalendar() {
+    syncViewFromValue() {
         const base = this.value || today;
         const [year, month] = base.split('-').map(Number);
         this.currentYear = year;
         this.currentMonth = month;
     }
-    get calendar() {
-        return this.dateUtil.createCalendar(this.currentYear, this.currentMonth);
+    formatDate(year, month, day) {
+        return `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
     }
-    handleUpdateMonth(type) {
-        const { newYear, newMonth } = this.dateUtil.calculateYearMonth(this.currentYear, this.currentMonth, type);
-        this.currentYear = newYear;
-        this.currentMonth = newMonth;
-        this.viewChange.emit({ year: newYear, month: newMonth });
-    }
-    handleDateClick(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 === undefined)
-            return false;
-        const [startSelectable, endSelectable] = this.selectable;
-        if (startSelectable !== '' && endSelectable !== '') {
-            return date < startSelectable || date > endSelectable;
+    get cells() {
+        const year = this.currentYear;
+        const month = this.currentMonth;
+        const firstDayIndex = new Date(year, month - 1, 1).getDay();
+        const daysInCurrent = new Date(year, month, 0).getDate();
+        const prevMonth = month === 1 ? 12 : month - 1;
+        const prevYear = month === 1 ? year - 1 : year;
+        const daysInPrev = new Date(prevYear, prevMonth, 0).getDate();
+        const nextMonth = month === 12 ? 1 : month + 1;
+        const nextYear = month === 12 ? year + 1 : year;
+        const cells = [];
+        for (let i = firstDayIndex - 1; i >= 0; i--) {
+            const day = daysInPrev - i;
+            cells.push({
+                date: this.formatDate(prevYear, prevMonth, day),
+                day,
+                inCurrentMonth: false,
+            });
         }
-        if (startSelectable !== '') {
-            return date < startSelectable;
+        for (let day = 1; day <= daysInCurrent; day++) {
+            cells.push({
+                date: this.formatDate(year, month, day),
+                day,
+                inCurrentMonth: true,
+            });
         }
-        if (endSelectable !== '') {
-            return date > endSelectable;
+        const remaining = (7 - (cells.length % 7)) % 7;
+        for (let day = 1; day <= remaining; day++) {
+            cells.push({
+                date: this.formatDate(nextYear, nextMonth, day),
+                day,
+                inCurrentMonth: false,
+            });
         }
-        return false;
+        return cells;
     }
-    getEventColor(eventName) {
-        if (this.eventColors?.[eventName] !== undefined && this.eventColors[eventName] !== '') {
-            return resolveColor(this.eventColors[eventName]);
-        }
-        const allEventNames = this.getAllEventNames();
-        const index = allEventNames.indexOf(eventName);
-        return resolveColor(DEFAULT_COLORS[index % DEFAULT_COLORS.length]);
+    emitViewChange() {
+        this.viewChange.emit({ year: this.currentYear, month: this.currentMonth });
     }
-    getAllEventNames() {
-        const names = new Set();
-        if (this.eventColors) {
-            for (const name of Object.keys(this.eventColors)) {
-                names.add(name);
-            }
-        }
-        if (this.events) {
-            for (const dateEvents of Object.values(this.events)) {
-                for (const name of dateEvents) {
-                    names.add(name);
-                }
-            }
-        }
-        return Array.from(names);
+    goPrevYear = (event) => {
+        event.stopPropagation();
+        this.currentYear -= 1;
+        this.emitViewChange();
+    };
+    goNextYear = (event) => {
+        event.stopPropagation();
+        this.currentYear += 1;
+        this.emitViewChange();
+    };
+    goPrevMonth = (event) => {
+        event.stopPropagation();
+        const { newYear, newMonth } = this.dateUtil.calculateYearMonth(this.currentYear, this.currentMonth, 'prev');
+        this.currentYear = newYear;
+        this.currentMonth = newMonth;
+        this.emitViewChange();
+    };
+    goNextMonth = (event) => {
+        event.stopPropagation();
+        const { newYear, newMonth } = this.dateUtil.calculateYearMonth(this.currentYear, this.currentMonth, 'next');
+        this.currentYear = newYear;
+        this.currentMonth = newMonth;
+        this.emitViewChange();
+    };
+    isDisabled(date) {
+        if (!this.selectable)
+            return false;
+        const [start, end] = this.selectable;
+        if (start !== '' && date < start)
+            return true;
+        if (end !== '' && date > end)
+            return true;
+        return false;
     }
-    getEventsForDate(date) {
-        return this.events?.[date] ?? [];
+    handleDayClick(cell) {
+        if (this.isDisabled(cell.date))
+            return;
+        this.value = cell.date;
+        this.update.emit(cell.date);
     }
     render() {
-        // eventsRevision 참조로 events/eventColors 변경 시 re-render 보장
-        void this.eventsRevision;
-        const allEventNames = this.getAllEventNames();
-        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: '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: '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 !== 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 === 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 !== 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))))))));
+        const cssVars = {
+            '--calendar-bg': CALENDAR_LAYOUT.bg,
+            '--calendar-padding': `${CALENDAR_LAYOUT.paddingXY}px`,
+            '--calendar-gap': `${CALENDAR_LAYOUT.gap}px`,
+            '--calendar-radius': `${CALENDAR_LAYOUT.radius}px`,
+            '--calendar-header-gap': `${CALENDAR_LAYOUT.header.gap}px`,
+            '--calendar-header-divider': CALENDAR_LAYOUT.header.divider,
+            '--calendar-header-font-size': `${CALENDAR_LAYOUT.header.fontSize}px`,
+            '--calendar-header-line-height': `${CALENDAR_LAYOUT.header.lineHeight}px`,
+            '--calendar-header-font-weight': CALENDAR_LAYOUT.header.fontWeight,
+            '--calendar-week-font-size': `${CALENDAR_LAYOUT.week.fontSize}px`,
+            '--calendar-week-line-height': `${CALENDAR_LAYOUT.week.lineHeight}px`,
+            '--calendar-week-font-weight': CALENDAR_LAYOUT.week.fontWeight,
+            '--calendar-week-color': CALENDAR_LAYOUT.week.color,
+            '--calendar-grid-row-gap': `${CALENDAR_LAYOUT.grid.rowGap}px`,
+            '--calendar-day-size': `${CALENDAR_LAYOUT.day.size}px`,
+            '--calendar-day-circle-size': `${CALENDAR_LAYOUT.day.circleSize}px`,
+            '--calendar-day-circle-radius': `${CALENDAR_LAYOUT.day.circleRadius}px`,
+            '--calendar-day-text': CALENDAR_LAYOUT.day.defaultText,
+            '--calendar-day-hover-text': CALENDAR_LAYOUT.day.hoverText,
+            '--calendar-day-hover-border': CALENDAR_LAYOUT.day.hoverBorder,
+            '--calendar-day-select-bg': CALENDAR_LAYOUT.day.selectBg,
+            '--calendar-day-select-text': CALENDAR_LAYOUT.day.selectText,
+            '--calendar-day-disabled-text': CALENDAR_LAYOUT.day.disabledText,
+            '--calendar-day-font-size': `${CALENDAR_LAYOUT.day.fontSize}px`,
+            '--calendar-day-line-height': `${CALENDAR_LAYOUT.day.lineHeight}px`,
+            '--calendar-day-font-weight': CALENDAR_LAYOUT.day.fontWeight,
+            '--calendar-day-bold-font-weight': CALENDAR_LAYOUT.day.boldFontWeight,
+            '--calendar-day-dot-size': `${CALENDAR_LAYOUT.day.dot.size}px`,
+            '--calendar-day-dot-gap': `${CALENDAR_LAYOUT.day.dot.gap}px`,
+            '--calendar-day-dot-padding-y': `${CALENDAR_LAYOUT.day.dot.paddingY}px`,
+            '--calendar-legend-font-size': `${CALENDAR_LAYOUT.legend.fontSize}px`,
+            '--calendar-legend-line-height': `${CALENDAR_LAYOUT.legend.lineHeight}px`,
+            '--calendar-legend-font-weight': CALENDAR_LAYOUT.legend.fontWeight,
+            '--calendar-legend-gap': `${CALENDAR_LAYOUT.legend.gap}px`,
+            '--calendar-legend-group-gap': `${CALENDAR_LAYOUT.legend.groupGap}px`,
+        };
+        const eventMap = this.eventMap;
+        const legend = this.legendItems;
+        return (h("div", { key: '66c0bec57c13af12b05f2e90fbc5e1674ab052c8', class: "sd-calendar", style: cssVars }, h("div", { key: '4df4f1c6d1ddcbe1478a69a481a228e66fc33c0a', class: "sd-calendar__header" }, h("div", { key: '378c04444b3ddcc7df92ecce0f49056e919cd8e5', class: "sd-calendar__nav-group" }, h("sd-ghost-button", { key: '47426c62a26b05a9db58144acc33770713e7fce4', ariaLabel: "prevYear", size: "xxs", icon: "chevronLeft", onClick: this.goPrevYear }), h("span", { key: '3b32e76a8a35705d820803c0b747829370079324', class: "sd-calendar__label" }, this.currentYear), h("sd-ghost-button", { key: '2e890a2cea91c9f49a03f0db3a4b943c707e312e', ariaLabel: "nextYear", size: "xxs", icon: "chevronRight", onClick: this.goNextYear })), h("span", { key: '795bb8452e75303c25a8dc6d95f819f1e42f7f49', class: "sd-calendar__divider", "aria-hidden": "true" }), h("div", { key: '6df460ec38917c51eff851732c7f37b7e09475f6', class: "sd-calendar__nav-group sd-calendar__nav-group-month" }, h("sd-ghost-button", { key: '36ef9dfdcfac5d9da08d05ca357fc9ec4100af4f', ariaLabel: "prevMonth", size: "xxs", icon: "chevronLeft", onClick: this.goPrevMonth }), h("span", { key: 'b2e0cc74570724c0d97fb2afbcb775c0794583af', class: "sd-calendar__label sd-calendar__label-month" }, this.currentMonth, "\uC6D4"), h("sd-ghost-button", { key: '4c45467356411f7a5d137c19931d8fc62084c742', ariaLabel: "nextMonth", size: "xxs", icon: "chevronRight", onClick: this.goNextMonth }))), h("div", { key: 'e1637a39795fb44bd33d138c8b244cc15b5f85f6', class: "sd-calendar__week" }, WEEK_LABELS.map(label => (h("span", { key: label, class: "sd-calendar__week-cell" }, label)))), h("div", { key: '45642dc93b1373dc760f64ba74dd931e651279dd', class: "sd-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);
+            const dayEvents = cell.inCurrentMonth ? eventMap.get(cell.date) : undefined;
+            return (h("button", { type: "button", key: cell.date, class: {
+                    'sd-calendar__day': true,
+                    'sd-calendar__day--empty': !cell.inCurrentMonth,
+                    'sd-calendar__day--today': isToday,
+                    'sd-calendar__day--selected': isSelected,
+                    'sd-calendar__day--disabled': isDisabled,
+                }, disabled: !cell.inCurrentMonth || isDisabled, tabindex: !cell.inCurrentMonth ? -1 : undefined, "aria-hidden": !cell.inCurrentMonth ? 'true' : undefined, onClick: () => cell.inCurrentMonth && this.handleDayClick(cell) }, h("span", { class: "sd-calendar__day-circle" }, cell.inCurrentMonth ? cell.day : ''), dayEvents && dayEvents.length > 0 && (h("span", { class: "sd-calendar__dot-row", "aria-hidden": "true" }, dayEvents.map((ev, i) => (h("span", { key: `${ev.color}|${ev.label}|${i}`, class: "sd-calendar__dot", style: { backgroundColor: ev.color } })))))));
+        })), legend.length > 0 && [
+            h("span", { key: '0872cb7627db7d33721fbd1e1c9a601bd3c6c3e1', class: "sd-calendar__divider-bottom", "aria-hidden": "true" }),
+            h("div", { key: 'd9c6be0684720aa9d2af24b2d0cf372a036dc8d5', class: "sd-calendar__legend" }, legend.map(item => (h("span", { key: `${item.color}|${item.label}`, class: "sd-calendar__legend-item" }, h("span", { class: "sd-calendar__legend-dot", style: { backgroundColor: item.color }, "aria-hidden": "true" }), h("span", { class: "sd-calendar__legend-label" }, item.label))))),
+        ]));
     }
     static get is() { return "sd-calendar"; }
-    static get encapsulation() { return "scoped"; }
     static get originalStyleUrls() {
         return {
             "$": ["sd-calendar.scss"]
@@ -149,7 +217,7 @@ export class SdCalendar {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true,
+                "reflect": false,
                 "attribute": "value",
                 "defaultValue": "null"
             },
@@ -174,36 +242,14 @@ export class SdCalendar {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "CalendarEvents",
-                    "resolved": "CalendarEvents | undefined",
-                    "references": {
-                        "CalendarEvents": {
-                            "location": "local",
-                            "path": "/Users/meijing/Documents/sellmate/frontend/design-system/packages/stencil/src/components/sd-calendar/sd-calendar.tsx",
-                            "id": "src/components/sd-calendar/sd-calendar.tsx::CalendarEvents"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false
-            },
-            "eventColors": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "CalendarEventColors",
-                    "resolved": "CalendarEventColors | undefined",
+                    "original": "CalendarEventGroup[]",
+                    "resolved": "CalendarEventGroup[] | undefined",
                     "references": {
-                        "CalendarEventColors": {
-                            "location": "local",
-                            "path": "/Users/meijing/Documents/sellmate/frontend/design-system/packages/stencil/src/components/sd-calendar/sd-calendar.tsx",
-                            "id": "src/components/sd-calendar/sd-calendar.tsx::CalendarEventColors"
+                        "CalendarEventGroup": {
+                            "location": "import",
+                            "path": "./sd-calendar.config",
+                            "id": "src/components/sd-calendar/sd-calendar.config.ts::CalendarEventGroup",
+                            "referenceLocation": "CalendarEventGroup"
                         }
                     }
                 },
@@ -221,14 +267,13 @@ export class SdCalendar {
     static get states() {
         return {
             "currentYear": {},
-            "currentMonth": {},
-            "eventsRevision": {}
+            "currentMonth": {}
         };
     }
     static get events() {
         return [{
-                "method": "select",
-                "name": "sdSelect",
+                "method": "update",
+                "name": "sdUpdate",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -262,12 +307,6 @@ export class SdCalendar {
         return [{
                 "propName": "value",
                 "methodName": "handleValueChange"
-            }, {
-                "propName": "events",
-                "methodName": "handleEventsChange"
-            }, {
-                "propName": "eventColors",
-                "methodName": "handleEventsChange"
             }];
     }
 }

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

@@ -3,7 +3,7 @@ export class SdCard {
     bordered = false;
     sdClass = '';
     render() {
-        return (h(Fragment, { key: '2700ffa3af5b6b35882c396a838d9da2e866ee4b' }, h("div", { key: '3d3aeaac318fc089c42ae4348bc72015d4476276', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, h("slot", { key: 'e72f00bc8c209644baf5f431ce485fb5b691f354' }))));
+        return (h(Fragment, { key: '61c364f88b03eb56b60c660a58533f417d209e6a' }, h("div", { key: 'dee3671e757c273ffec06a15a0191a798280522c', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, h("slot", { key: 'f991bf5df95f8c1bac417aa4e70f40cf68624fb8' }))));
     }
     static get is() { return "sd-card"; }
     static get originalStyleUrls() {

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

@@ -100,13 +100,13 @@ export class SdCheckbox {
             '--sd-checkbox-inverse-icon': CHECKBOX_COLORS.checked.iconInverse,
             '--sd-checkbox-inverse-label': CHECKBOX_COLORS.labelInverse,
         };
-        return (h("label", { key: '6b1ad950ce2f0b8e734efab6889a46064f7ef32a', class: this.checkboxClasses, style: cssVars }, h("input", { key: 'ee2fd70d61db2a5de6eab26dc07128e6158540e5', type: "checkbox", ref: el => {
+        return (h("label", { key: '6fb506c448a5968d403f779d113fd60857901982', class: this.checkboxClasses, style: cssVars }, h("input", { key: 'fb08f531416255b8886d2bd2c21c3f62e8a9d47d', 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: '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
+            }, 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: 'e49eb38375ba680e08510f83a15ce8a6bbecd4b8', 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: '15afb8e3b31201febd15bb85d24ee9c9b246d1d0', class: "sd-checkbox__label" }, this.label)));
+                    : CHECKBOX_COLORS.checked.icon })) : null), this.label && h("span", { key: '92bc308561b0a7653926d751d029d80c38844b07', class: "sd-checkbox__label" }, this.label)));
     }
     static get is() { return "sd-checkbox"; }
     static get originalStyleUrls() {

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

@@ -1,4 +1,4 @@
-import { h } from "@stencil/core";
+import { h, } from "@stencil/core";
 import { CHIP_COLORS, CHIP_LAYOUT, CHIP_TYPOGRAPHY } from "./sd-chip.config";
 export class SdChip {
     el;
@@ -167,7 +167,7 @@ export class SdChip {
         });
     }
     unregisterFromForm() {
-        if (!this.name)
+        if (this.name === '')
             return;
         const formEl = this.el.closest('sd-form');
         formEl?.componentOnReady().then(form => {
@@ -205,12 +205,12 @@ export class SdChip {
             '--sd-chip-font-weight': typography.fontWeight,
             '--sd-chip-line-height': typography.lineHeight,
         };
-        return (h("span", { key: '62732b07b821a995f2a9a32d433417a575b9e228', class: {
+        return (h("span", { key: '3cd683af3aed7cc6e549c5fc5da1e00cda2dc2a0', 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/collection/components/sd-circle-progress/sd-circle-progress.js

@@ -27,7 +27,7 @@ export class SdCircleProgress {
         }
         const c = CIRCLE_PROGRESS_VIEWBOX_SIZE / 2;
         const showPercent = !this.indeterminate;
-        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)));
+        return (h(Host, { key: 'd4ace6f784fd64a45baa746870a84a88b4911cf8', style: hostStyle }, h("svg", { key: '08aef376ac746abf1a9b404e37703a862f956a08', 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: '42411ef6f92f6427309d92dfad84ad7dc8f8c3bb', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), h("circle", { key: 'a0ae53ce4dfd557e980155cd0ff22ba064fe32dc', 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: '0917cfd3aa460872fa4c35da61530e01080d6937', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && h("span", { key: '051756bc7b20e87205b21c735b2827a81c2a17c9', 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

@@ -72,9 +72,9 @@ 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: '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 => {
+        return (h("div", { key: '6dc337947f7c05799cf7c97d45b0df84c7976196', class: "sd-confirm-modal" }, h("sd-ghost-button", { key: 'b584cc4bc00191f8488be7265249922110d57d90', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (h("sd-icon", { key: '470716bef879befd1d6746bc27c10fb74d61a2b6', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), h("h2", { key: '5b0113f13b219a2e14c5d45397c293baafc28a2c', class: `sd-confirm-modal__title ${this.titleClass ?? ''}` }, this.modalTitle), h("div", { key: 'cee18d1afde384523ca0f96f4138b8854f89cb5c', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (h("div", { key: 'b9466be3cbb635c9b8c0a50d7023b70fa31d9f0f', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg }))))), this.showContentBox && (h("div", { key: 'f3ea52c0261a63e75b42175c2e7c602e02f82636', 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 ?? '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() }))));
+            } })) : (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: 'fa33e4f68a1c36e197ff6a6f5629005fbbebcbc3', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg })))))), h("div", { key: '378162e9e44cefc4e61113ba927545040e6a6c6c', class: "sd-confirm-modal__button" }, this.subButtonLabel && (h("sd-button", { key: '8fb93a086c4a42063f53ed533be2774de31db81e', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), h("sd-button", { key: '304c80915c9a7a685bddcf2d5edf4f56119860e8', 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-box/sd-date-box.js

@@ -23,7 +23,7 @@ export class SdDateBox {
         this.mouseOver?.emit(this.date);
     }
     render() {
-        return (h("div", { key: '5d1e92d90bbb12e3baaf9deaeafb6777d0540106', role: "button", tabindex: this.disabled ? -1 : 0, class: {
+        return (h("div", { key: 'ab09e8112e18b04dab2d171fa6dbd8554d11e57b', 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,
@@ -34,7 +34,12 @@ export class SdDateBox {
                 '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: 'a35272c78379828e61151435157e2324938752b4', class: "sd-date-box__content" }, h("div", { key: '21177c5b59e8a85b08275e4ce97f386f8af7f082', 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: 'b7e418536d6de86ae4e8042a0fc59dece42f7489', class: "sd-date-box__content" }, h("div", { key: '41f2b2136cc60e2d1a6664852a3fadf30413de0f', class: "sd-date-box__label" }, this.date))));
     }
     static get is() { return "sd-date-box"; }
     static get encapsulation() { return "scoped"; }

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

@@ -13,7 +13,7 @@ export class SdDatePickerTrigger {
     };
     render() {
         const sizeTokens = DATEPICKER_SIZE_MAP[this.size] ?? DATEPICKER_SIZE_MAP.sm;
-        const hasValue = !!this.displayText;
+        const hasValue = this.displayText !== '';
         const textMinWidth = this.size === 'md' ? 104 : 80;
         const cssVars = {
             '--trigger-padding-x': `${sizeTokens.paddingX}px`,
@@ -33,10 +33,15 @@ export class SdDatePickerTrigger {
                 ? DATEPICKER_COLORS.icon.disabled
                 : DATEPICKER_COLORS.icon.default,
         };
-        return (h("div", { key: '449ce38199b5a3d29d88353b9375bc45eceeae89', class: {
+        return (h("div", { key: '57a23626b1a392be20dccead71b792590fab61b8', 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 }, h("sd-icon", { key: 'cc88f44660297a2fb72dfc9e4bc2387a84d55f58', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), h("span", { key: '515419e015bf396b0ddba48615238e028ccc4a6d', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
+            }, style: cssVars, onClick: this.handleClick, onKeyDown: e => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    this.handleClick();
+                }
+            } }, h("sd-icon", { key: 'd4bb58eb97f9f2b98c27315547a85b019530ce5e', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), h("span", { key: '25222882fa966eb5d6ead15e62b65af26586afbd', 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.config.js

@@ -29,41 +29,3 @@ export const DATEPICKER_COLORS = {
     icon: datepickerTokens.datepicker.icon,
     text: datepickerTokens.datepicker.text,
 };
-export const CALENDAR_LAYOUT = {
-    bg: datepickerTokens.datepicker.calendar.bg,
-    paddingXY: datepickerTokens.datepicker.calendar.paddingXY,
-    gap: datepickerTokens.datepicker.calendar.gap,
-    radius: datepickerTokens.datepicker.calendar.radius,
-    header: {
-        gap: datepickerTokens.datepicker.calendar.header.gap,
-        divider: datepickerTokens.datepicker.calendar.header.divider,
-        fontSize: datepickerTokens.datepicker.calendar.header.typography.fontSize,
-        lineHeight: datepickerTokens.datepicker.calendar.header.typography.lineHeight,
-        fontWeight: datepickerTokens.datepicker.calendar.header.typography.fontWeight,
-    },
-    week: {
-        fontSize: datepickerTokens.datepicker.calendar.week.typography.fontSize,
-        lineHeight: datepickerTokens.datepicker.calendar.week.typography.lineHeight,
-        fontWeight: datepickerTokens.datepicker.calendar.week.typography.fontWeight,
-        color: datepickerTokens.datepicker.calendar.week.color,
-    },
-    grid: {
-        rowGap: datepickerTokens.datepicker.calendar.grid.rowGap,
-    },
-    day: {
-        size: datepickerTokens.datepicker.calendar.day.width,
-        circleSize: datepickerTokens.datepicker.calendar.day.circle.size,
-        circleRadius: datepickerTokens.datepicker.calendar.day.circle.radius,
-        defaultText: datepickerTokens.datepicker.calendar.day.default.text,
-        hoverText: datepickerTokens.datepicker.calendar.day.hover.text,
-        hoverBorder: datepickerTokens.datepicker.calendar.day.hover.border,
-        selectBg: datepickerTokens.datepicker.calendar.day.select.bg,
-        selectText: datepickerTokens.datepicker.calendar.day.select.text,
-        disabledText: datepickerTokens.datepicker.calendar.day.disabled.text,
-        fontSize: datepickerTokens.datepicker.calendar.day.typography.default.fontSize,
-        lineHeight: datepickerTokens.datepicker.calendar.day.typography.default.lineHeight,
-        fontWeight: datepickerTokens.datepicker.calendar.day.typography.default.fontWeight,
-        boldFontWeight: datepickerTokens.datepicker.calendar.day.typography.bold.fontWeight,
-    },
-};
-export const WEEK_LABELS = ['일', '월', '화', '수', '목', '금', '토'];

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

@@ -69,6 +69,7 @@ export class SdDatePicker {
         }
     };
     handleSelect = (e) => {
+        e.stopPropagation();
         this.closeDropdown();
         this.value = e.detail;
         const nextValue = this.value;
@@ -92,9 +93,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: '7678d58f741276e9848e05759f5c41f576e7fe66', 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: '8b3d615b241860ec1fb314fa0eeef5f51ea32f43', class: "sd-date-picker", ref: el => {
+        return (h("sd-field", { key: '825c845ea1ada63a9f21cfc43aad04a598325c13', 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: 'b9dd1a8df29f340ad67331dbebd3ec71b79d128a', class: "sd-date-picker", ref: el => {
                 this.triggerRef = el;
-            } }, h("sd-date-picker-trigger", { key: '43185c67462cf0cb559c918e5f709723bf4d5aee', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '2cf151b52b3117de9c4d55bbc3c045b0a7b614e9', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-date-picker-calendar", { key: '9f77742d034dcb462eb1c4546b2c2a367544f97e', value: this.value, selectable: this.selectable, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
+            } }, h("sd-date-picker-trigger", { key: 'b9bed57fa4a2b06b004ec5a1b723ed5af25fda19', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '776e0ce183edd9c7903ce1a75208addc47c20408', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-calendar", { key: 'f86b502f6b17ee9ff262c1a64e1b0e24defc1660', value: this.value, selectable: this.selectable, onSdUpdate: this.handleSelect, onSdViewChange: this.handleViewChange })))));
     }
     static get is() { return "sd-date-picker"; }
     static get originalStyleUrls() {