@sellmate/design-system 1.2.0 → 1.4.0

package/dist/cjs/sd-td.cjs.entry.js

@@ -27,11 +27,13 @@ const SdTd = class {
         this.syncSlotName();
         this.syncSpanRegistration();
         this.syncCellClassRegistration(oldField);
+        this.syncUseFrameRegistration(oldField);
     }
     handleRowKeyChange(_newKey, oldKey) {
         this.syncSlotName();
         this.syncSpanRegistration();
         this.syncCellClassRegistration(undefined, oldKey);
+        this.syncUseFrameRegistration(undefined, oldKey);
     }
     handleSpanChange() {
         this.syncSpanRegistration();
@@ -42,15 +44,15 @@ const SdTd = class {
     handleDividerChange() {
         this.syncCellClassRegistration();
     }
-    handleUseFieldChange() {
-        this.syncUseFieldRegistration();
+    handleUseFrameChange() {
+        this.syncUseFrameRegistration();
         this.requestParentTrUpdate();
     }
     componentWillLoad() {
         this.syncSlotName();
         this.syncSpanRegistration();
         this.syncCellClassRegistration();
-        this.syncUseFieldRegistration();
+        this.syncUseFrameRegistration();
         // slot 타이밍 엇갈림 대응: 부모 sd-tr forceUpdate로 슬롯 재매칭
         const parentTr = this.el.parentElement;
         if (parentTr?.tagName?.toLowerCase() === 'sd-tr') {
@@ -61,7 +63,7 @@ const SdTd = class {
         this.syncSlotName();
         this.syncSpanRegistration();
         this.syncCellClassRegistration();
-        this.syncUseFieldRegistration();
+        this.syncUseFrameRegistration();
     }
     // React StrictMode에서는 disconnect/reconnect 사이클이 일어나면서
     // 동일 인스턴스의 componentWillLoad는 더 이상 호출되지 않는다.
@@ -69,7 +71,7 @@ const SdTd = class {
     connectedCallback() {
         this.syncSpanRegistration();
         this.syncCellClassRegistration();
-        this.syncUseFieldRegistration();
+        this.syncUseFrameRegistration();
     }
     disconnectedCallback() {
         const table = this.findTable();
@@ -126,9 +128,16 @@ const SdTd = class {
         table.registerCellClassSync(String(this.rowKey), this.field, combinedClass);
         this.requestParentTrUpdate();
     }
-    syncUseFieldRegistration() {
+    syncUseFrameRegistration(prevField, prevRowKey) {
         const table = this.findTable();
-        if (!table || this.field === '' || this.rowKey == null)
+        if (!table)
+            return;
+        const oldField = prevField ?? this.field;
+        const oldRowKey = prevRowKey ?? (this.rowKey != null ? String(this.rowKey) : undefined);
+        if (oldField !== '' && oldRowKey != null) {
+            table.unregisterUseFrameSync?.(oldRowKey, oldField);
+        }
+        if (this.field === '' || this.rowKey == null)
             return;
         if (this.useFrame) {
             table.registerUseFrameSync?.(String(this.rowKey), this.field);
@@ -149,7 +158,7 @@ const SdTd = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'ececfaf265a550ee38c5c2cc2ddd2875352deb10', class: { [`align-${this.align}`]: Boolean(this.align) } }, index.h("slot", { key: 'c4a43f9affc1938d882e63e91ac90d570efffa37' })));
+        return (index.h(index.Host, { key: '505b602b609050870e7e80df9157dbc50d0cb8c1', class: { [`align-${this.align}`]: Boolean(this.align) } }, index.h("slot", { key: '9910f02d98ce5e115b2a380954dd0a994f9f1c12' })));
     }
     static get watchers() { return {
         "field": [{
@@ -174,7 +183,7 @@ const SdTd = class {
                 "handleDividerChange": 0
             }],
         "useFrame": [{
-                "handleUseFieldChange": 0
+                "handleUseFrameChange": 0
             }]
     }; }
 };

package/dist/cjs/sd-text-link.cjs.entry.js

@@ -76,7 +76,7 @@ const SdTextLink = class {
             '--sd-text-link-text-decoration': typo.textDecoration,
             ...(this.disabled ? { '--sd-text-link-color': TEXT_LINK_COLORS.content.disabled } : {}),
         };
-        return (index.h("span", { key: '284a073ec6aca3ad91bffe084c3b84813df58772', role: "button", tabindex: this.disabled ? -1 : 0, class: {
+        return (index.h("span", { key: '11d2153cc91818c1214e21ffa14bd08249ad1116', role: "button", tabindex: this.disabled ? -1 : 0, class: {
                 'sd-text-link': true,
                 'sd-text-link--disabled': this.disabled,
             }, style: cssVars, onClick: this.handleClick, onKeyDown: e => {
@@ -84,13 +84,13 @@ const SdTextLink = class {
                     e.preventDefault();
                     this.handleClick();
                 }
-            } }, this.icon && (index.h("sd-icon", { key: '1e2021703a766769aa647f418fb4b287039d58a5', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), index.h("span", { key: 'a25f207b8bf5bc2c221f0b370159b61ba2f27040', class: labelClassName }, this.label), this.useArrow && (index.h("span", { key: 'f273671ee796224bada0d2d27fc58ff893c433e7', class: "sd-text-link__arrow", style: {
+            } }, this.icon && (index.h("sd-icon", { key: '23972d53b4968c9bdef9b54dfa785e658ba117ef', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), index.h("span", { key: '5e99a6c1151093929086ec4398b93d7db590d959', class: labelClassName }, this.label), this.useArrow && (index.h("span", { key: 'b814759278cefe229a5321556374438f281ce0f3', class: "sd-text-link__arrow", style: {
                 width: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
                 height: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
                 display: 'inline-flex',
                 alignItems: 'center',
                 justifyContent: 'center',
-            } }, index.h("sd-icon", { key: '2e499bf0c1cd57d1ffb90999daa1c38d0cf43df8', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
+            } }, index.h("sd-icon", { key: 'dfe3286eaeef9a176f5ff1a69950713e2712a550', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
     }
 };
 SdTextLink.style = sdTextLinkCss();

package/dist/cjs/sd-toast-container.cjs.entry.js

@@ -234,7 +234,7 @@ const SdToastContainer = class {
         const activeToasts = toasts.filter(t => t.state !== 'exiting').reverse();
         const indexMap = new Map();
         activeToasts.forEach((t, i) => indexMap.set(t.id, i));
-        return (index.h("div", { key: '4cf4413f350c2a1adc475c567d874252b1786e91', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
+        return (index.h("div", { key: 'bc3c9591b6453eed7df462841e29784c29b3aeef', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
                 this.expanded = true;
                 this.pauseTimers();
             }, onMouseLeave: () => {

package/dist/cjs/sd-toast.cjs.entry.js

@@ -84,12 +84,12 @@ const SdToast = class {
         const linkColor = typeConfig.linkColor ?? typeConfig.content;
         const useDefaultCloseIntent = ['default', 'caution', 'info'].includes(this.type);
         const buttonName = TOAST_BUTTON_NAME_BY_TYPE[this.type] ?? TOAST_BUTTON_NAME_BY_TYPE.default;
-        return (index.h("div", { key: 'edab2d1d8ac8222a988d38279f1a002281454f51', style: {
+        return (index.h("div", { key: 'db3ffaf51dc96c39c05558017f25929c679a59df', style: {
                 '--sd-toast-bg': typeConfig.bg,
                 '--sd-toast-text': typeConfig.content,
                 '--sd-toast-icon': iconColor,
                 '--sd-toast-link': linkColor,
-            } }, index.h("div", { key: '8dd98dd58cdf003ce031e5ae96b749a037333ce1', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: '2b78cbc4fe96cc00d444fb49956da1fe245993ef', class: "sd-toast__icon" }, index.h("sd-icon", { key: '679852c9a19046ce1d2c9a0cdb4346f6e23c77fb', name: this.icon, size: iconSize, color: iconColor }))), index.h("div", { key: '2798bd2392e9fc3c4c0375d894572da13d3d7e25', class: "sd-toast__content" }, index.h("span", { key: '76ab798742baa63b21bda60867cbeb5aa20f7957', class: "sd-toast__message" }, this.message)), this.link && (index.h("a", { key: '6eb61ca5737f9af06ad63cfcef671e46ecc8de47', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (index.h("sd-button", { key: '6c1ad7d494c7cc218b1058fec1ed3e42af0c83fc', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (index.h("sd-ghost-button", { key: '32dd9adcc951a3a852bf20540376bd4d7ced7526', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
+            } }, index.h("div", { key: '92344f5bb95b0d4787591207f2e017d7dd177091', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: '991db58b2cb019dd3a787e000e9d8813014bbb09', class: "sd-toast__icon" }, index.h("sd-icon", { key: '24d53cd77fdea82ec07663a8968493ec2b794751', name: this.icon, size: iconSize, color: iconColor }))), index.h("div", { key: '70cfad4ef389cca798be9baeac99bfc41efcc615', class: "sd-toast__content" }, index.h("span", { key: '5927023435b17dc25ee07630fc4ae4568aadd9b9', class: "sd-toast__message" }, this.message)), this.link && (index.h("a", { key: '410c024fd81ebcc78175c1855a86f590566d1a81', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (index.h("sd-button", { key: 'd85287e7ef796a11f850a0ce5cde87f5881fa5c9', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (index.h("sd-ghost-button", { key: '55a6bf6457bd89254f6eb01072d46a0edbb8b510', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
     }
 };
 SdToast.style = sdToastCss();

package/dist/cjs/sd-toggle.cjs.entry.js

@@ -120,7 +120,7 @@ const SdToggle = class {
             '--sd-toggle-content-select': TOGGLE_COLORS.content.select,
             '--sd-toggle-content-disabled': TOGGLE_COLORS.content.disabled,
         };
-        return (index.h("label", { key: '0b8273ed8f8efae70de32b92671bbd1353e877dc', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, index.h("input", { key: '2ec9909142463f8ba556ad885cb7f97bedad6b31', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        return (index.h("label", { key: 'b16577aa25863a9dc337314d9059328799c1cd1e', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, index.h("input", { key: '6130825b74df8a573f4e062671fd694508759e82', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
 };
 SdToggle.style = sdToggleCss();

package/dist/cjs/useDatePicker-dCuEgvjX.js

@@ -0,0 +1,103 @@
+'use strict';
+
+var component_datepicker = require('./component.datepicker-Cw_-oidk.js');
+
+const CALENDAR_LAYOUT = {
+    bg: component_datepicker.datepickerTokens.datepicker.calendar.bg,
+    paddingXY: component_datepicker.datepickerTokens.datepicker.calendar.paddingXY,
+    gap: component_datepicker.datepickerTokens.datepicker.calendar.gap,
+    radius: component_datepicker.datepickerTokens.datepicker.calendar.radius,
+    header: {
+        gap: component_datepicker.datepickerTokens.datepicker.calendar.header.gap,
+        divider: component_datepicker.datepickerTokens.datepicker.calendar.header.divider,
+        fontSize: component_datepicker.datepickerTokens.datepicker.calendar.header.typography.fontSize,
+        lineHeight: component_datepicker.datepickerTokens.datepicker.calendar.header.typography.lineHeight,
+        fontWeight: component_datepicker.datepickerTokens.datepicker.calendar.header.typography.fontWeight,
+    },
+    week: {
+        fontSize: component_datepicker.datepickerTokens.datepicker.calendar.week.typography.fontSize,
+        lineHeight: component_datepicker.datepickerTokens.datepicker.calendar.week.typography.lineHeight,
+        fontWeight: component_datepicker.datepickerTokens.datepicker.calendar.week.typography.fontWeight,
+        color: component_datepicker.datepickerTokens.datepicker.calendar.week.color,
+    },
+    grid: {
+        rowGap: component_datepicker.datepickerTokens.datepicker.calendar.grid.rowGap,
+    },
+    day: {
+        size: component_datepicker.datepickerTokens.datepicker.calendar.day.width,
+        circleSize: component_datepicker.datepickerTokens.datepicker.calendar.day.circle.size,
+        circleRadius: component_datepicker.datepickerTokens.datepicker.calendar.day.circle.radius,
+        defaultText: component_datepicker.datepickerTokens.datepicker.calendar.day.default.text,
+        hoverText: component_datepicker.datepickerTokens.datepicker.calendar.day.hover.text,
+        hoverBorder: component_datepicker.datepickerTokens.datepicker.calendar.day.hover.border,
+        selectBg: component_datepicker.datepickerTokens.datepicker.calendar.day.select.bg,
+        selectText: component_datepicker.datepickerTokens.datepicker.calendar.day.select.text,
+        disabledText: component_datepicker.datepickerTokens.datepicker.calendar.day.disabled.text,
+        fontSize: component_datepicker.datepickerTokens.datepicker.calendar.day.typography.default.fontSize,
+        lineHeight: component_datepicker.datepickerTokens.datepicker.calendar.day.typography.default.lineHeight,
+        fontWeight: component_datepicker.datepickerTokens.datepicker.calendar.day.typography.default.fontWeight,
+        boldFontWeight: component_datepicker.datepickerTokens.datepicker.calendar.day.typography.bold.fontWeight,
+        dot: {
+            size: component_datepicker.datepickerTokens.datepicker.calendar.day.dot.size,
+            gap: component_datepicker.datepickerTokens.datepicker.calendar.day.dot.gap,
+            paddingY: component_datepicker.datepickerTokens.datepicker.calendar.day.dot.paddingY,
+        },
+    },
+    legend: {
+        fontSize: component_datepicker.datepickerTokens.datepicker.calendar.legend.typography.fontSize,
+        lineHeight: component_datepicker.datepickerTokens.datepicker.calendar.legend.typography.lineHeight,
+        fontWeight: component_datepicker.datepickerTokens.datepicker.calendar.legend.typography.fontWeight,
+        gap: component_datepicker.datepickerTokens.datepicker.calendar.legend.gap,
+        groupGap: component_datepicker.datepickerTokens.datepicker.calendar.legend.group.gap,
+    },
+};
+const WEEK_LABELS = ['일', '월', '화', '수', '목', '금', '토'];
+
+const daysInMonth = (date) => {
+    const year = Number(date.split('-')[0]);
+    const month = Number(date.split('-')[1]);
+    const daysInMonth = new Date(year, month, 0).getDate(); // month에 0을 전달하면 전달의 마지막 날짜를 반환
+    return Array.from({ length: daysInMonth }, (_, i) => i + 1);
+};
+
+const getToday = () => {
+    const today = new Date();
+    const year = today.getFullYear();
+    const month = String(today.getMonth() + 1).padStart(2, '0');
+    const day = String(today.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
+};
+const today = getToday();
+
+const useDatePicker = () => {
+    const formatDate = (year, month, day) => {
+        return `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
+    };
+    const createCalendar = (year, month) => {
+        const days = daysInMonth(`${year}-${String(month).padStart(2, '0')}-01`);
+        const firstDayIndex = new Date(year, month - 1, 1).getDay();
+        const prevMonthDays = Array.from({ length: firstDayIndex });
+        const remainingDays = (7 - ((days.length + firstDayIndex) % 7)) % 7;
+        const afterMonthDays = Array.from({ length: remainingDays });
+        return { days, prevMonthDays, afterMonthDays };
+    };
+    const calculateYearMonth = (year, month, type) => {
+        let newYear = year;
+        let newMonth = type === 'prev' ? month - 1 : month + 1;
+        if (newMonth < 1) {
+            newYear = year - 1;
+            newMonth = 12;
+        }
+        else if (newMonth > 12) {
+            newYear = year + 1;
+            newMonth = 1;
+        }
+        return { newYear, newMonth };
+    };
+    return { formatDate, createCalendar, calculateYearMonth };
+};
+
+exports.CALENDAR_LAYOUT = CALENDAR_LAYOUT;
+exports.WEEK_LABELS = WEEK_LABELS;
+exports.today = today;
+exports.useDatePicker = useDatePicker;

package/dist/collection/collection-manifest.json

@@ -1,6 +1,5 @@
 {
   "entries": [
-    "components/sd-calendar/sd-calendar.js",
     "components/sd-checkbox/sd-checkbox.js",
     "components/sd-date-box/sd-date-box.js",
     "components/sd-date-range-picker/sd-date-range-picker.js",
@@ -16,6 +15,7 @@
     "components/sd-ghost-button/sd-ghost-button.js",
     "components/sd-badge/sd-badge.js",
     "components/sd-barcode-input/sd-barcode-input.js",
+    "components/sd-calendar/sd-calendar.js",
     "components/sd-card/sd-card.js",
     "components/sd-chip/sd-chip.js",
     "components/sd-circle-progress/sd-circle-progress.js",
@@ -24,7 +24,6 @@
     "components/sd-tag/sd-tag.js",
     "components/sd-date-picker/sd-date-picker-trigger/sd-date-picker-trigger.js",
     "components/sd-date-picker/sd-date-picker.js",
-    "components/sd-date-picker/sd-date-picker-calendar/sd-date-picker-calendar.js",
     "components/sd-date-range-picker/sd-date-range-picker-calendar/sd-date-range-picker-calendar.js",
     "components/sd-portal/sd-portal.js",
     "components/sd-field/sd-field.js",

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

@@ -39,7 +39,7 @@ export class SdActionModal {
         if (this.height != null && this.height !== '') {
             sizeStyle.height = typeof this.height === 'number' ? `${this.height}px` : this.height;
         }
-        return (h("div", { key: '278f81cf1f4ae0ca65ac6187b7fb31e4f12002f6', class: "sd-action-modal", style: { ...cssVars, ...sizeStyle } }, h("header", { key: '7d110c9a1633f0db63c3d605f4422b90b9eb1a5c', class: "sd-action-modal__header" }, h("h2", { key: 'd81100f64dec3a483d8f40b0be5069182de892c1', class: "sd-action-modal__title" }, this.modalTitle), h("div", { key: 'c90c38a33877c85837316d63aadfab5f4bee73dc', class: "sd-action-modal__header-sub" }, h("slot", { key: '98ea6a6f21d1596fa22fb7a9b37bb1169dcc6b16', name: "header-sub-title" })), h("sd-ghost-button", { key: 'dd3429279996c79dec50aef0d77cfa21f4b0392b', class: "sd-action-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), h("div", { key: 'c8621876c083c1026ddbecef875b4308ce85835e', class: "sd-action-modal__body" }, h("slot", { key: 'bcf70a5bf4af9afdb421894a4cb2abeea0e277e9', name: "body" })), (this.buttonProps != null || this.buttonProps != undefined) && (h("footer", { key: 'bc783b531cc045c360680326f826cda3ccc1bd67', class: "sd-action-modal__footer" }, h("div", { key: '20d6c7708bc3218b038c5cb4faddcc6fc58acee7', class: "sd-action-modal__footer-sub" }, h("slot", { key: '08703135da34bac499de135ed5b8e85eeb0fbc3a', name: "bottom-sub-content" })), h("sd-button", { key: 'f384e5914a78fdfcfdd0bd3ad89f7bcf20c5f8d2', ...DEFAULT_BUTTON_PROPS, ...this.buttonProps, onSdClick: () => this.ok.emit() })))));
+        return (h("div", { key: '7b59ff655bb9f7a6bc79bb948201a6a532c16b06', class: "sd-action-modal", style: { ...cssVars, ...sizeStyle } }, h("header", { key: '3e141509dc7082e08f448043573de3a8bd8e7cf0', class: "sd-action-modal__header" }, h("h2", { key: 'ba80634b72ce1168d2ab3aec12bdf2a6546ff08d', class: "sd-action-modal__title" }, this.modalTitle), h("div", { key: 'aed32008f0dcaa2deec098ca3c0c9cb1e8f6fb50', class: "sd-action-modal__header-sub" }, h("slot", { key: '32a015a006cbcf26373c64a72e4131b878c53222', name: "header-sub-title" })), h("sd-ghost-button", { key: '574d14cf2d0031dbf43cbb5999d4471a235ca72a', class: "sd-action-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), h("div", { key: '713761da4ad2217c1d762fd56bc391ddc5c9cded', class: "sd-action-modal__body" }, h("slot", { key: 'e224251b153d60cf35056b542c5d9925f4918b7f', name: "body" })), (this.buttonProps != null || this.buttonProps != undefined) && (h("footer", { key: '43d6e4ffed21704ac68689f0742f8d7a6456b0b6', class: "sd-action-modal__footer" }, h("div", { key: 'bd9cce1c5b1fb02156008a4e76c65dc8cb4385aa', class: "sd-action-modal__footer-sub" }, h("slot", { key: '4de818c9ba8fcdb159963b9c9c7ce893fa3216da', name: "bottom-sub-content" })), h("sd-button", { key: 'af9f4c1fd4c6bb482690c2545e0add53c308b95a', ...DEFAULT_BUTTON_PROPS, ...this.buttonProps, onSdClick: () => this.ok.emit() })))));
     }
     static get is() { return "sd-action-modal"; }
     static get originalStyleUrls() {

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

@@ -4,7 +4,7 @@ export class SdBadge {
     color = 'blue';
     render() {
         const resolvedColor = BADGE_COLOR_MAP[this.color] ?? BADGE_COLOR_MAP.blue;
-        return (h("div", { key: 'aba37986d6beea38fb1c5476f5187359ac2ebf0c', class: "sd-badge", style: { '--sd-badge-color': resolvedColor } }, h("div", { key: 'dd80e8d18c79eda021baf7a7f233222c9c2aa717', class: "sd-badge__dot" })));
+        return (h("div", { key: '9ae835aba8a4acde4b918eceda00441ee2c22905', class: "sd-badge", style: { '--sd-badge-color': resolvedColor } }, h("div", { key: 'c3b648845b5c138026a82a6a2c483d2a56ed2aab', class: "sd-badge__dot" })));
     }
     static get is() { return "sd-badge"; }
     static get originalStyleUrls() {

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

@@ -102,7 +102,7 @@ export class SdBarcodeInput {
             '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
             '--sd-system-color-field-bg-default': BARCODE_INPUT_COLORS.bg.barcode,
         };
-        return (h("sd-field", { key: '206beaac9acf7bf3e787b98c1e9bda602f1aa1d2', 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, status: this.status, 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("label", { key: 'ab14cdc3e65faa72ce7c549234e40ca54f441c7d', class: "sd-barcode-input__content" }, h("slot", { key: '7568acdee85fa0ae7440d7db65fd414fb1c27d1c', name: "prefix" }), h("input", { key: '388b007eb7d830083e75e6b3016c412a6922bb1a', name: this.name, ref: el => (this.nativeEl = el), class: `sd-barcode-input__native ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: '8e8d4feee62108904eb766b1917ed1e20cacc83b', name: "suffix" }), this.clearable && this.internalValue && (h("sd-ghost-button", { key: 'a9b158ebcdcb31009b13db624fb8c74d6252e20d', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-barcode-input__clear-icon", onClick: async () => {
+        return (h("sd-field", { key: '61eb9beceb57e58323c1477c71147607db834e71', 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, status: this.status, 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("label", { key: '9d4fa219af76d29b2d2e8443af1e66b980d62dd1', class: "sd-barcode-input__content" }, h("slot", { key: '044bf2c4a6e79bb0d6b2a76398107b47d1237662', name: "prefix" }), h("input", { key: '2522d0ded40b69c76872877bede00b1e4e5260d2', name: this.name, ref: el => (this.nativeEl = el), class: `sd-barcode-input__native ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: '8dc300df9f8bd7045f9c9e357925be3b7f2bdbb4', name: "suffix" }), this.clearable && this.internalValue && (h("sd-ghost-button", { key: '1b3cab2c7fe9caf973e7defff170f64b3fd35daa', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-barcode-input__clear-icon", onClick: async () => {
                 if (this.disabled)
                     return;
                 this.internalValue = '';

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

@@ -69,13 +69,13 @@ export class SdButton {
         const validRightIcon = isValidIcon(this.rightIcon) ? this.rightIcon : undefined;
         const iconOnly = !hasLabel && Boolean(validIcon) !== Boolean(validRightIcon);
         const accessibleName = iconOnly && this.ariaLabel.trim() !== '' ? this.ariaLabel : undefined;
-        return (h("button", { key: 'c9f4491915f6ba4fdbf54df19b008bd32edbf925', class: this.getButtonClasses(preset, config.size, hasLabel, iconOnly), type: this.type ?? 'button', disabled: this.disabled, "aria-label": accessibleName, style: {
+        return (h("button", { key: '3caa9dff467ec7efa748eecd736296500a222ecb', class: this.getButtonClasses(preset, config.size, hasLabel, iconOnly), type: this.type ?? 'button', disabled: this.disabled, "aria-label": accessibleName, style: {
                 '--sd-button-bg': config.color,
                 '--sd-button-bg-hover': PRESET_HOVER_BACKGROUNDS[preset],
                 '--sd-button-border': PRESET_BORDER_COLORS[preset],
                 '--sd-button-content': PRESET_CONTENT_COLORS[preset],
                 '--sd-button-accent': BUTTON_FOCUS_RING_COLOR,
-            }, onClick: this.handleClick }, h("span", { key: '44fc95645e6eea6aecee9978887f4309d9d31342', class: "sd-button__content" }, validIcon && (h("sd-icon", { key: 'ae1d9a3e8eb40ed0aecac0e70af1341ac90767c8', class: "sd-button__icon", name: validIcon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-current-icon)" })), this.label && h("span", { key: 'ab7bbf916c3b0432db6313050d7facfe919794de', class: "sd-button__label" }, this.label), validRightIcon && (h("sd-icon", { key: 'a533ef5439abe1729ccfacc9f8e44263b56434e5', class: "sd-button__icon sd-button__icon--right", name: validRightIcon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-current-icon)" })))));
+            }, onClick: this.handleClick }, h("span", { key: 'cded66e4802956c29064cbdcc12b9dd1066a45c3', class: "sd-button__content" }, validIcon && (h("sd-icon", { key: 'b989e3eb8661e16f052d5c7a292ea316a2b821df', class: "sd-button__icon", name: validIcon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-current-icon)" })), this.label && h("span", { key: '07695896bd8f11ca8753dcb171b5c7f0e7304c0d', class: "sd-button__label" }, this.label), validRightIcon && (h("sd-icon", { key: 'bfd18c0a390a955d8de99789c86ce39fb605beae', class: "sd-button__icon sd-button__icon--right", name: validRightIcon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-current-icon)" })))));
     }
     static get is() { return "sd-button"; }
     static get originalStyleUrls() {

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

@@ -0,0 +1,51 @@
+import datepickerTokens from "../../tokens/generated/component.datepicker.json";
+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,
+        dot: {
+            size: datepickerTokens.datepicker.calendar.day.dot.size,
+            gap: datepickerTokens.datepicker.calendar.day.dot.gap,
+            paddingY: datepickerTokens.datepicker.calendar.day.dot.paddingY,
+        },
+    },
+    legend: {
+        fontSize: datepickerTokens.datepicker.calendar.legend.typography.fontSize,
+        lineHeight: datepickerTokens.datepicker.calendar.legend.typography.lineHeight,
+        fontWeight: datepickerTokens.datepicker.calendar.legend.typography.fontWeight,
+        gap: datepickerTokens.datepicker.calendar.legend.gap,
+        groupGap: datepickerTokens.datepicker.calendar.legend.group.gap,
+    },
+};
+export const WEEK_LABELS = ['일', '월', '화', '수', '목', '금', '토'];

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

@@ -1,106 +1,169 @@
-.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__dots {
+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__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);
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 14px;
+  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;
 }