@sellmate/design-system 1.2.0 → 1.3.0

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

@@ -1,106 +1,167 @@
-.sd-calendar {
-  width: 304px;
-  box-sizing: border-box;
-  border-radius: 8px;
-  padding: 24px 19px;
-  background: white;
+sd-calendar {
+  display: block;
 }
-.sd-calendar .sd-calendar__header {
+sd-calendar .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 .sd-calendar__header .year-nav,
-.sd-calendar .sd-calendar__header .month-nav {
+  flex-direction: column;
+  gap: var(--calendar-gap);
+  width: 328px;
+  min-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-calendar .sd-calendar__header {
   display: flex;
-  flex-flow: row nowrap;
   align-items: center;
-  gap: 12px;
+  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-calendar .sd-calendar__header .year-nav button,
-.sd-calendar .sd-calendar__header .month-nav button {
-  background: none;
-  border: none;
-  cursor: pointer;
-  margin: 0;
-  padding: 0;
+sd-calendar .sd-calendar__nav-group {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--calendar-gap);
 }
-.sd-calendar .sd-calendar__header .year-nav__current {
-  width: 40px;
-  text-align: center;
+sd-calendar .sd-calendar__nav-group-month {
+  width: 100%;
 }
-.sd-calendar .sd-calendar__header .month-nav__current {
-  width: 100px;
+sd-calendar .sd-calendar__label {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 40px;
   text-align: center;
 }
-.sd-calendar .sd-calendar__days {
-  margin-top: 8px;
+sd-calendar .sd-calendar__label-month {
+  width: 100%;
+}
+sd-calendar .sd-calendar__divider {
+  display: inline-block;
+  width: 1px;
+  height: 16px;
+  background: var(--calendar-header-divider);
+}
+sd-calendar .sd-calendar__week {
   display: grid;
-  grid-template-columns: repeat(7, minmax(0, 1fr));
-  column-gap: 10px;
-  padding: 0 5px;
+  grid-template-columns: repeat(7, var(--calendar-day-size));
 }
-.sd-calendar .sd-calendar__days .day {
-  width: 28px;
+sd-calendar .sd-calendar__week-cell {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   height: 20px;
-  font-size: 12px;
-  line-height: 20px;
-  text-align: center;
-  color: #888888;
+  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-calendar .sd-calendar__body {
-  margin-top: 12px;
+sd-calendar .sd-calendar__grid {
   display: grid;
-  grid-template-columns: repeat(7, minmax(0, 1fr));
-  grid-auto-rows: min-content;
+  grid-template-columns: repeat(7, var(--calendar-day-size));
+  row-gap: var(--calendar-grid-row-gap);
 }
-.sd-calendar .sd-calendar__cell {
-  display: flex;
+sd-calendar .sd-calendar__day {
+  display: inline-flex;
   flex-direction: column;
   align-items: center;
+  justify-content: flex-start;
+  width: var(--calendar-day-size);
+  min-height: var(--calendar-day-circle-size);
+  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-calendar .sd-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-calendar .sd-calendar__day:not(:disabled):hover .sd-calendar__day-circle {
+  border-radius: 16px;
+  border: 1px solid var(--calendar-day-hover-border);
+}
+sd-calendar .sd-calendar__day--today .sd-calendar__day-circle {
+  font-weight: 700;
+}
+sd-calendar .sd-calendar__day--selected .sd-calendar__day-circle {
+  border-radius: 16px;
+  background: var(--calendar-day-select-bg);
+  color: var(--calendar-day-select-text);
+}
+sd-calendar .sd-calendar__day--selected:not(:disabled):hover .sd-calendar__day-circle {
+  background: var(--calendar-day-select-bg);
+  color: var(--calendar-day-select-text);
+}
+sd-calendar .sd-calendar__day--disabled {
+  color: var(--calendar-day-disabled-text);
+  background: none !important;
+  cursor: not-allowed;
+}
+sd-calendar .sd-calendar__day--empty {
+  visibility: hidden;
+  pointer-events: none;
 }
-.sd-calendar .sd-calendar__dots {
+sd-calendar .sd-calendar__dot-row {
   display: flex;
   flex-wrap: wrap;
-  gap: 2px;
   justify-content: center;
-  align-items: center;
-  min-height: 8px;
-  max-width: 28px;
+  gap: var(--calendar-day-dot-gap);
+  width: 100%;
+  padding-top: var(--calendar-day-dot-padding-y);
+  padding-bottom: var(--calendar-day-dot-padding-y);
 }
-.sd-calendar .sd-calendar__dot {
-  width: 5px;
-  height: 5px;
-  border-radius: 50%;
+sd-calendar .sd-calendar__dot {
   display: inline-block;
+  width: var(--calendar-day-dot-size);
+  height: var(--calendar-day-dot-size);
+  border-radius: 50%;
 }
-.sd-calendar .sd-calendar__legend {
+sd-calendar .sd-calendar__divider-bottom {
+  display: block;
+  width: 100%;
+  height: 1px;
+  background: var(--calendar-header-divider);
+}
+sd-calendar .sd-calendar__legend {
   display: flex;
+  align-items: center;
+  justify-content: center;
   flex-wrap: wrap;
-  gap: 8px 12px;
-  margin-top: 16px;
-  padding: 12px 5px 0;
-  border-top: 1px solid #E5E5E5;
+  column-gap: var(--calendar-legend-group-gap);
+  row-gap: 4px;
+  font-size: var(--calendar-legend-font-size);
+  line-height: var(--calendar-legend-line-height);
+  font-weight: var(--calendar-legend-font-weight);
+  color: var(--calendar-day-text);
 }
-.sd-calendar .sd-calendar__legend-item {
-  display: flex;
+sd-calendar .sd-calendar__legend-item {
+  display: inline-flex;
   align-items: center;
-  gap: 4px;
+  gap: var(--calendar-legend-gap);
 }
-.sd-calendar .sd-calendar__legend-dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
+sd-calendar .sd-calendar__legend-dot {
   display: inline-block;
+  width: var(--calendar-day-dot-size);
+  height: var(--calendar-day-dot-size);
+  border-radius: 50%;
   flex-shrink: 0;
 }
-.sd-calendar .sd-calendar__legend-label {
-  font-size: 11px;
-  color: #888888;
-  line-height: 1;
+sd-calendar .sd-calendar__legend-label {
+  display: inline-block;
 }

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