@sellmate/design-system 1.0.78 → 1.2.0

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

@@ -1,57 +1,81 @@
 import { h } from "@stencil/core";
-import buttonTokens from "../../tokens/generated/component.button.json";
-import { resolveColor } from "../../utils/color";
-const ICON_SIZES = {
-    xs: Number(buttonTokens.button.xs.icon),
-    sm: Number(buttonTokens.button.sm.icon),
-    md: Number(buttonTokens.button.md.icon),
-    lg: Number(buttonTokens.button.lg.icon),
-};
+import { Icons } from "../assets/index";
+import { BUTTON_CONFIG, BUTTON_FOCUS_RING_COLOR, BUTTON_ICON_SIZES, PRESET_BORDER_COLORS, PRESET_CONTENT_COLORS, PRESET_HOVER_BACKGROUNDS, getPresetName, isButtonName, } from "./sd-button.config";
+const isValidIcon = (icon) => icon != null && icon in Icons;
 export class SdButton {
-    el;
-    variant = 'primary';
-    size = 'sm';
-    color = '#025497';
+    name = 'primary_sm';
     label = '';
+    icon;
+    rightIcon;
+    ariaLabel = '';
     disabled = false;
     type = 'button';
-    icon;
-    iconColor;
-    iconSize;
-    iconRight;
-    noHover = false;
-    sdClass = '';
     click;
+    hasWarnedMissingAriaLabel = false;
     handleClick = (event) => {
         if (this.disabled) {
+            event.preventDefault();
             return;
         }
         this.click.emit(event);
     };
-    getButtonClasses() {
-        const classes = ['sd-button'];
-        classes.push(`sd-button--${this.variant}`);
-        classes.push(`sd-button--${this.size}`);
-        classes.push(`sd-button--color-${this.color}`);
+    get resolvedName() {
+        const name = this.name || 'primary_sm';
+        if (!isButtonName(name)) {
+            throw new Error(`Invalid sd-button name: "${name}"`);
+        }
+        return name;
+    }
+    get resolvedConfig() {
+        const name = this.resolvedName;
+        return {
+            config: BUTTON_CONFIG[name],
+            preset: getPresetName(name),
+        };
+    }
+    getButtonClasses(preset, size, hasLabel, iconOnly) {
+        const classes = ['sd-button', `sd-button--${preset}`, `sd-button--${size}`];
         if (this.disabled) {
             classes.push('sd-button--disabled');
         }
-        if (this.label) {
-            classes.push('sd-button--has-label');
-        }
-        if (!this.label && (this.icon || this.iconRight)) {
+        if (iconOnly) {
             classes.push('sd-button--icon-only');
         }
-        if (this.noHover) {
-            classes.push('sd-button--no-hover');
+        if (hasLabel) {
+            classes.push('sd-button--has-label');
         }
         return classes.join(' ');
     }
+    componentWillRender() {
+        this.warnIfMissingAriaLabel();
+    }
+    warnIfMissingAriaLabel() {
+        const iconOnly = this.label === '' && (isValidIcon(this.icon) || isValidIcon(this.rightIcon));
+        const missingAriaLabel = iconOnly && this.ariaLabel.trim() === '';
+        if (!missingAriaLabel) {
+            this.hasWarnedMissingAriaLabel = false;
+            return;
+        }
+        if (this.hasWarnedMissingAriaLabel) {
+            return;
+        }
+        console.warn(`[sd-button] icon-only buttons require \`ariaLabel\`. Received name="${this.name}" icon="${this.icon ?? this.rightIcon}".`);
+        this.hasWarnedMissingAriaLabel = true;
+    }
     render() {
-        const buttonClasses = this.getButtonClasses();
-        // 유틸로 색상 키 -> HEX 매핑 (없으면 원본 그대로)
-        const resolvedColor = resolveColor(this.color);
-        return (h("button", { key: 'b18b0e46ec5a26e35fd0c782c975c1e3f94c7bea', class: `${buttonClasses} ${this.sdClass}`, type: this.type, disabled: this.disabled, style: { '--button-color': resolvedColor }, onClick: this.handleClick }, h("div", { key: '3364b81ca9323e88b56ccde7783417416ecec4a0', class: "sd-button__content" }, this.icon && (h("sd-icon", { key: 'dbe12d21483f50cab4e7284fc340e5b02ec6578d', class: "sd-button__icon sd-button__icon--left", name: this.icon, size: this.iconSize ?? ICON_SIZES[this.size], color: this.iconColor ?? (this.variant === 'primary' ? '#fff' : resolvedColor) })), this.label && h("div", { key: '793b3ef70ff8fbe7a043baf3b00097ab0c3bb59b', class: "sd-button__label" }, this.label), this.iconRight && (h("sd-icon", { key: '9b35739d4c18c38f9487c806d4becc312146bed4', class: "sd-button__icon sd-button__icon--right", name: this.iconRight, size: ICON_SIZES[this.size], color: this.variant === 'primary' ? '#fff' : resolvedColor })))));
+        const { config, preset } = this.resolvedConfig;
+        const hasLabel = Boolean(this.label);
+        const validIcon = isValidIcon(this.icon) ? this.icon : undefined;
+        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: {
+                '--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)" })))));
     }
     static get is() { return "sd-button"; }
     static get originalStyleUrls() {
@@ -66,43 +90,18 @@ export class SdButton {
     }
     static get properties() {
         return {
-            "variant": {
+            "name": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "ButtonVariant",
-                    "resolved": "\"ghost\" | \"outline\" | \"primary\" | undefined",
+                    "original": "ButtonName",
+                    "resolved": "\"danger_lg\" | \"danger_md\" | \"danger_outline_lg\" | \"danger_outline_md\" | \"danger_outline_sm\" | \"danger_outline_xs\" | \"danger_sm\" | \"danger_xs\" | \"neutral_outline_lg\" | \"neutral_outline_md\" | \"neutral_outline_sm\" | \"neutral_outline_xs\" | \"primary_lg\" | \"primary_md\" | \"primary_outline_lg\" | \"primary_outline_md\" | \"primary_outline_sm\" | \"primary_outline_xs\" | \"primary_sm\" | \"primary_xs\" | \"secondary_lg\" | \"secondary_md\" | \"secondary_sm\" | \"secondary_xs\"",
                     "references": {
-                        "ButtonVariant": {
-                            "location": "local",
-                            "path": "/Users/meijing/Documents/sellmate/frontend/design-system/packages/stencil/src/components/sd-button/sd-button.tsx",
-                            "id": "src/components/sd-button/sd-button.tsx::ButtonVariant"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "variant",
-                "defaultValue": "'primary'"
-            },
-            "size": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "ButtonSize",
-                    "resolved": "\"lg\" | \"md\" | \"sm\" | \"xs\"",
-                    "references": {
-                        "ButtonSize": {
-                            "location": "local",
-                            "path": "/Users/meijing/Documents/sellmate/frontend/design-system/packages/stencil/src/components/sd-button/sd-button.tsx",
-                            "id": "src/components/sd-button/sd-button.tsx::ButtonSize"
+                        "ButtonName": {
+                            "location": "import",
+                            "path": "./sd-button.config",
+                            "id": "src/components/sd-button/sd-button.config.ts::ButtonName",
+                            "referenceLocation": "ButtonName"
                         }
                     }
                 },
@@ -115,28 +114,8 @@ export class SdButton {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "size",
-                "defaultValue": "'sm'"
-            },
-            "color": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "color",
-                "defaultValue": "'#025497'"
+                "attribute": "name",
+                "defaultValue": "'primary_sm'"
             },
             "label": {
                 "type": "string",
@@ -158,52 +137,12 @@ export class SdButton {
                 "attribute": "label",
                 "defaultValue": "''"
             },
-            "disabled": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "disabled",
-                "defaultValue": "false"
-            },
-            "type": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'button' | 'submit' | 'reset'",
-                    "resolved": "\"button\" | \"reset\" | \"submit\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "type",
-                "defaultValue": "'button'"
-            },
             "icon": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
                     "original": "IconName",
-                    "resolved": "\"add\" | \"alert\" | \"alignKorean\" | \"archive\" | \"arrowDown\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"attachFile\" | \"barcode\" | \"bell\" | \"board\" | \"box\" | \"camera\" | \"cancelFill\" | \"cancelOutline\" | \"caretDown\" | \"caretLeft\" | \"caretRight\" | \"caretUp\" | \"check\" | \"checkFill\" | \"checkOutline\" | \"chevronDown\" | \"chevronLeft\" | \"chevronLeftEnd\" | \"chevronRight\" | \"chevronRightEnd\" | \"chevronUp\" | \"clockFill\" | \"clockOutline\" | \"close\" | \"copy\" | \"dashboard\" | \"date\" | \"download\" | \"drag\" | \"edit\" | \"etc\" | \"event\" | \"global\" | \"helpFill\" | \"helpOutline\" | \"history\" | \"imageFill\" | \"imageOutline\" | \"inline\" | \"line\" | \"location\" | \"logout\" | \"minus\" | \"new\" | \"notificationFill\" | \"notificationOutline\" | \"notion\" | \"outline\" | \"pageEdit\" | \"pageMove\" | \"pdf\" | \"print\" | \"remove\" | \"reset\" | \"robot\" | \"row\" | \"save\" | \"search\" | \"setting\" | \"star\" | \"synchronize\" | \"updown\" | \"user\" | \"visibilityOff\" | \"visibilityOn\" | \"warehouseFill\" | \"warehouseOutline\" | \"warningFill\" | \"warningOutline\" | \"youtube\" | undefined",
+                    "resolved": "\"add\" | \"alert\" | \"alignKorean\" | \"archive\" | \"arrowDown\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"attachFile\" | \"barcode\" | \"bell\" | \"board\" | \"box\" | \"camera\" | \"cancelFill\" | \"cancelOutline\" | \"caretDown\" | \"caretLeft\" | \"caretRight\" | \"caretUp\" | \"check\" | \"checkFill\" | \"checkOutline\" | \"checkboxCheck\" | \"checkboxIndeterminate\" | \"chevronDown\" | \"chevronLeft\" | \"chevronLeftEnd\" | \"chevronRight\" | \"chevronRightEnd\" | \"chevronUp\" | \"clockFill\" | \"clockOutline\" | \"close\" | \"copy\" | \"dashboard\" | \"date\" | \"download\" | \"drag\" | \"edit\" | \"etc\" | \"event\" | \"global\" | \"helpFill\" | \"helpOutline\" | \"history\" | \"imageFill\" | \"imageOutline\" | \"inline\" | \"line\" | \"location\" | \"logout\" | \"minus\" | \"new\" | \"notificationFill\" | \"notificationOutline\" | \"notion\" | \"outline\" | \"pageEdit\" | \"pageMove\" | \"pdf\" | \"print\" | \"remove\" | \"reset\" | \"robot\" | \"row\" | \"save\" | \"search\" | \"setting\" | \"star\" | \"synchronize\" | \"updown\" | \"user\" | \"visibilityOff\" | \"visibilityOn\" | \"warehouseFill\" | \"warehouseOutline\" | \"warningFill\" | \"warningOutline\" | \"youtube\" | undefined",
                     "references": {
                         "IconName": {
                             "location": "global",
@@ -222,32 +161,18 @@ export class SdButton {
                 "reflect": false,
                 "attribute": "icon"
             },
-            "iconColor": {
+            "rightIcon": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "icon-color"
-            },
-            "iconSize": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number | undefined",
-                    "references": {}
+                    "original": "IconName",
+                    "resolved": "\"add\" | \"alert\" | \"alignKorean\" | \"archive\" | \"arrowDown\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"attachFile\" | \"barcode\" | \"bell\" | \"board\" | \"box\" | \"camera\" | \"cancelFill\" | \"cancelOutline\" | \"caretDown\" | \"caretLeft\" | \"caretRight\" | \"caretUp\" | \"check\" | \"checkFill\" | \"checkOutline\" | \"checkboxCheck\" | \"checkboxIndeterminate\" | \"chevronDown\" | \"chevronLeft\" | \"chevronLeftEnd\" | \"chevronRight\" | \"chevronRightEnd\" | \"chevronUp\" | \"clockFill\" | \"clockOutline\" | \"close\" | \"copy\" | \"dashboard\" | \"date\" | \"download\" | \"drag\" | \"edit\" | \"etc\" | \"event\" | \"global\" | \"helpFill\" | \"helpOutline\" | \"history\" | \"imageFill\" | \"imageOutline\" | \"inline\" | \"line\" | \"location\" | \"logout\" | \"minus\" | \"new\" | \"notificationFill\" | \"notificationOutline\" | \"notion\" | \"outline\" | \"pageEdit\" | \"pageMove\" | \"pdf\" | \"print\" | \"remove\" | \"reset\" | \"robot\" | \"row\" | \"save\" | \"search\" | \"setting\" | \"star\" | \"synchronize\" | \"updown\" | \"user\" | \"visibilityOff\" | \"visibilityOn\" | \"warehouseFill\" | \"warehouseOutline\" | \"warningFill\" | \"warningOutline\" | \"youtube\" | undefined",
+                    "references": {
+                        "IconName": {
+                            "location": "global",
+                            "id": "global::IconName"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,
@@ -258,23 +183,18 @@ export class SdButton {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "icon-size"
+                "attribute": "right-icon"
             },
-            "iconRight": {
+            "ariaLabel": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "IconName",
-                    "resolved": "\"add\" | \"alert\" | \"alignKorean\" | \"archive\" | \"arrowDown\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"attachFile\" | \"barcode\" | \"bell\" | \"board\" | \"box\" | \"camera\" | \"cancelFill\" | \"cancelOutline\" | \"caretDown\" | \"caretLeft\" | \"caretRight\" | \"caretUp\" | \"check\" | \"checkFill\" | \"checkOutline\" | \"chevronDown\" | \"chevronLeft\" | \"chevronLeftEnd\" | \"chevronRight\" | \"chevronRightEnd\" | \"chevronUp\" | \"clockFill\" | \"clockOutline\" | \"close\" | \"copy\" | \"dashboard\" | \"date\" | \"download\" | \"drag\" | \"edit\" | \"etc\" | \"event\" | \"global\" | \"helpFill\" | \"helpOutline\" | \"history\" | \"imageFill\" | \"imageOutline\" | \"inline\" | \"line\" | \"location\" | \"logout\" | \"minus\" | \"new\" | \"notificationFill\" | \"notificationOutline\" | \"notion\" | \"outline\" | \"pageEdit\" | \"pageMove\" | \"pdf\" | \"print\" | \"remove\" | \"reset\" | \"robot\" | \"row\" | \"save\" | \"search\" | \"setting\" | \"star\" | \"synchronize\" | \"updown\" | \"user\" | \"visibilityOff\" | \"visibilityOn\" | \"warehouseFill\" | \"warehouseOutline\" | \"warningFill\" | \"warningOutline\" | \"youtube\" | undefined",
-                    "references": {
-                        "IconName": {
-                            "location": "global",
-                            "id": "global::IconName"
-                        }
-                    }
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -282,9 +202,10 @@ export class SdButton {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "icon-right"
+                "attribute": "aria-label",
+                "defaultValue": "''"
             },
-            "noHover": {
+            "disabled": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -301,16 +222,23 @@ export class SdButton {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "no-hover",
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
-            "sdClass": {
+            "type": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "ButtonType",
+                    "resolved": "\"button\" | \"reset\" | \"submit\"",
+                    "references": {
+                        "ButtonType": {
+                            "location": "import",
+                            "path": "./sd-button.config",
+                            "id": "src/components/sd-button/sd-button.config.ts::ButtonType",
+                            "referenceLocation": "ButtonType"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
@@ -321,8 +249,8 @@ export class SdButton {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "sd-class",
-                "defaultValue": "''"
+                "attribute": "type",
+                "defaultValue": "'button'"
             }
         };
     }
@@ -349,5 +277,4 @@ export class SdButton {
                 }
             }];
     }
-    static get elementRef() { return "el"; }
 }

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

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 import { useDatePicker } from "../../modules/useDatePicker";
-import { today } from "../../utils/date";
 import { resolveColor } from "../../utils/color";
+import { today } from "../../utils/date";
 const DEFAULT_COLORS = [
     'brilliantblue_75',
     'red_60',
@@ -48,29 +48,29 @@ export class SdCalendar {
         this.viewChange.emit({ year: newYear, month: newMonth });
     }
     handleDateClick(day) {
-        if (!day)
+        if (day === 0)
             return;
         const date = this.dateUtil.formatDate(this.currentYear, this.currentMonth, day);
         this.value = date;
         this.select.emit(date);
     }
     isDisabledDate(date) {
-        if (!this.selectable)
+        if (this.selectable === undefined)
             return false;
         const [startSelectable, endSelectable] = this.selectable;
-        if (startSelectable && endSelectable) {
+        if (startSelectable !== '' && endSelectable !== '') {
             return date < startSelectable || date > endSelectable;
         }
-        if (startSelectable) {
+        if (startSelectable !== '') {
             return date < startSelectable;
         }
-        if (endSelectable) {
+        if (endSelectable !== '') {
             return date > endSelectable;
         }
         return false;
     }
     getEventColor(eventName) {
-        if (this.eventColors?.[eventName]) {
+        if (this.eventColors?.[eventName] !== undefined && this.eventColors[eventName] !== '') {
             return resolveColor(this.eventColors[eventName]);
         }
         const allEventNames = this.getAllEventNames();
@@ -100,24 +100,24 @@ export class SdCalendar {
         // eventsRevision 참조로 events/eventColors 변경 시 re-render 보장
         void this.eventsRevision;
         const allEventNames = this.getAllEventNames();
-        return (h("div", { key: '149ca9ae588a7bd2d70ecf1bf13cc639c99f7da9', class: "sd-calendar" }, h("div", { key: '65f58d53fbaf35cee16007bad0b5e56dd208393e', class: "sd-calendar__header" }, h("div", { key: '76709fd094edaece5ede720a983d1103801ba76d', class: "year-nav" }, h("button", { key: '6d46cfa4cb1d12507ba7570cb6c0bb88bcba3402', type: "button", name: "prev-year", title: "Previous Year", onClick: () => {
+        return (h("div", { key: '3c3a6af518a3e96dd5d5d553ab2a00b9dd882221', class: "sd-calendar" }, h("div", { key: '660e96fcefe539b69ae7b69bb7a7eb209f40b02f', class: "sd-calendar__header" }, h("div", { key: '609b4d2e552adb526deefbf0719284c94ab01c21', class: "year-nav" }, h("button", { key: 'dc80f2e4fa441b9ed2e0a475f7982e7339c0cda7', type: "button", name: "prev-year", title: "Previous Year", onClick: () => {
                 this.currentYear = this.currentYear - 1;
                 this.viewChange.emit({ year: this.currentYear, month: this.currentMonth });
-            } }, h("sd-icon", { key: '1319ec1fa0f2533a5d02853cb7638b1f1c10e050', name: "arrowLeft", size: "12", color: "grey_45" })), h("span", { key: '678b705cd95dc499975e071f1607f26bdd50c36d', class: "year-nav__current" }, this.currentYear), h("button", { key: '1f5c3a0cd6108da5ed1beb10bd6af4ea5f22cf4c', type: "button", name: "next-year", title: "Next Year", onClick: () => {
+            } }, h("sd-icon", { key: 'ff62edabb67364704a4bfbcfc6f1658ad3d72408', name: "arrowLeft", size: "12", color: "grey_45" })), h("span", { key: '0829c746b8537196652e7c40b3babea14ae8053e', class: "year-nav__current" }, this.currentYear), h("button", { key: '3d288e5091445f2ed429de4aebb0d03f29eb6cc8', type: "button", name: "next-year", title: "Next Year", onClick: () => {
                 this.currentYear = this.currentYear + 1;
                 this.viewChange.emit({ year: this.currentYear, month: this.currentMonth });
-            } }, h("sd-icon", { key: '9dff93aef0996c3679a6a8c93c0fce1ea390f4aa', name: "arrowRight", size: "12", color: "grey_45" }))), h("div", { key: '9a6840420da580096fbf24d2c4df656114e23e6e', class: "month-nav" }, h("button", { key: '94bf7598e5b80d6deb407f607034ed6e9f88151f', type: "button", name: "prev-month", title: "Previous Month", onClick: () => this.handleUpdateMonth('prev') }, h("sd-icon", { key: '4ab19da5f6a12bf37b3c4d9aac4e2283762799e8', name: "arrowLeft", size: "12", color: "grey_45" })), h("span", { key: 'c207959595c107cae05a7cbe1d169357b063a29d', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), h("button", { key: 'fe319c8b26d9259bcba2b1f251bb827977e6afdc', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, h("sd-icon", { key: 'af5bb1c06058b6ce22c8d7ffacace2f558bdb013', name: "arrowRight", size: "12", color: "grey_45" })))), h("div", { key: 'ca66c0d7744970364f7d5e11e61014471df3325b', class: "sd-calendar__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("div", { key: day, class: "day" }, day)))), h("div", { key: '9d42c252b8b42754aedc64156ec1dbe45200cef0', class: { 'sd-calendar__body': true, 'sd-calendar__body--has-events': !!this.events } }, [
+            } }, h("sd-icon", { key: '5546ced1930082c68035db8b506b6ef2e953e305', name: "arrowRight", size: "12", color: "grey_45" }))), h("div", { key: '1db95c9f31c1a11b58a6f1ce4a13b9d6388f7994', class: "month-nav" }, h("button", { key: '2c5659945f3e0807a57ba22eb34576184e6ebf50', type: "button", name: "prev-month", title: "Previous Month", onClick: () => this.handleUpdateMonth('prev') }, h("sd-icon", { key: '7994e2bf63fc45ffb7d29b49ad279223a1a12a98', name: "arrowLeft", size: "12", color: "grey_45" })), h("span", { key: 'a8afd7592b3fba13a4560387bb759f4858273a85', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), h("button", { key: 'b3d21b13823bd674c43c1782b66df38010fcfa59', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, h("sd-icon", { key: '8605340fe8128b6a55328c97dc84481092009c76', name: "arrowRight", size: "12", color: "grey_45" })))), h("div", { key: '9312ff7f3af76aced7189f121c71ff252a92a71d', class: "sd-calendar__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("div", { key: day, class: "day" }, day)))), h("div", { key: 'cb93d417204b3bad65074e06e491038fe06b1389', class: { 'sd-calendar__body': true, 'sd-calendar__body--has-events': !!this.events } }, [
             ...this.calendar.prevMonthDays,
             ...this.calendar.days,
             ...this.calendar.afterMonthDays,
         ].map((day, idx) => {
             const formattedDate = this.dateUtil.formatDate(this.currentYear, this.currentMonth, Number(day));
-            const dateEvents = day ? this.getEventsForDate(formattedDate) : [];
+            const dateEvents = day !== 0 ? this.getEventsForDate(formattedDate) : [];
             const uniqueEvents = [...new Set(dateEvents)];
-            return (h("div", { class: "sd-calendar__cell", key: `${day}_${idx}` }, h("sd-date-box", { date: !day ? '' : Number(day), selected: this.value === formattedDate, isToday: today === formattedDate, disabled: !day ? true : this.isDisabledDate(formattedDate), onClick: !this.isDisabledDate(formattedDate) && day
+            return (h("div", { class: "sd-calendar__cell", key: `${day}_${idx}` }, h("sd-date-box", { date: day === 0 ? '' : Number(day), selected: this.value === formattedDate, isToday: today === formattedDate, disabled: day === 0 ? true : this.isDisabledDate(formattedDate), onClick: !this.isDisabledDate(formattedDate) && day !== 0
                     ? () => this.handleDateClick(Number(day))
-                    : undefined }), this.events && (h("div", { class: "sd-calendar__dots" }, uniqueEvents.map(eventName => (h("span", { key: eventName, class: "sd-calendar__dot", style: { backgroundColor: this.getEventColor(eventName) } })))))));
-        })), allEventNames.length > 0 && (h("div", { key: 'dac97204484b1def1fd3d73939ef64ef6969bce2', class: "sd-calendar__legend" }, allEventNames.map(name => (h("div", { key: name, class: "sd-calendar__legend-item" }, h("span", { class: "sd-calendar__legend-dot", style: { backgroundColor: this.getEventColor(name) } }), h("span", { class: "sd-calendar__legend-label" }, name))))))));
+                    : undefined }), this.events !== undefined && (h("div", { class: "sd-calendar__dots" }, uniqueEvents.map(eventName => (h("span", { key: eventName, class: "sd-calendar__dot", style: { backgroundColor: this.getEventColor(eventName) } })))))));
+        })), allEventNames.length > 0 && (h("div", { key: '0556e06bcd0bab75b61c60181d9b203cb6ad4741', class: "sd-calendar__legend" }, allEventNames.map(name => (h("div", { key: name, class: "sd-calendar__legend-item" }, h("span", { class: "sd-calendar__legend-dot", style: { backgroundColor: this.getEventColor(name) } }), h("span", { class: "sd-calendar__legend-label" }, name))))))));
     }
     static get is() { return "sd-calendar"; }
     static get encapsulation() { return "scoped"; }

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

@@ -3,7 +3,7 @@ export class SdCard {
     bordered = false;
     sdClass = '';
     render() {
-        return (h(Fragment, { key: 'ce09898d7396b093f0f292700d5d6bd8b6249ad3' }, h("div", { key: 'df584d42ecf16b8ea3618238fb58e77cb7e80d9e', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, h("slot", { key: 'e031effb829371ca8c001bcc5596b4c9d01c8951' }))));
+        return (h(Fragment, { key: '2700ffa3af5b6b35882c396a838d9da2e866ee4b' }, h("div", { key: '3d3aeaac318fc089c42ae4348bc72015d4476276', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, h("slot", { key: 'e72f00bc8c209644baf5f431ce485fb5b691f354' }))));
     }
     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: '0e4a142753f8ceda6356c184f1f227e9f11b8a43', class: this.checkboxClasses, style: cssVars }, h("input", { key: '53f7bac2fbc2c197ddcc2bb3cd0779598155af4c', type: "checkbox", ref: el => {
+        return (h("label", { key: '6b1ad950ce2f0b8e734efab6889a46064f7ef32a', class: this.checkboxClasses, style: cssVars }, h("input", { key: 'ee2fd70d61db2a5de6eab26dc07128e6158540e5', type: "checkbox", ref: el => {
                 this.inputEl = el;
-            }, value: this.val, checked: !!this.isChecked, disabled: this.disabled, onChange: this.handleChange, name: this.val?.toString() || 'checkbox', "aria-label": this.label || 'checkbox', "aria-checked": this.isChecked === null ? 'mixed' : this.isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }), h("div", { key: '0725d9e2ed16bec52b6340c9633ffed021558560', class: "sd-checkbox__bg" }, this.isChecked !== false ? (h("sd-icon", { name: this.isChecked === true ? 'check' : 'minus', size: Number(CHECKBOX_LAYOUT.iconSize), color: this.disabled
+            }, value: this.val, checked: !!this.isChecked, disabled: this.disabled, onChange: this.handleChange, name: this.val?.toString() || 'checkbox', "aria-label": this.label || 'checkbox', "aria-checked": this.isChecked === null ? 'mixed' : this.isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }), h("div", { key: '234e0e4100da6f1a5f65fb4f32cb4d8e1ba018fd', class: "sd-checkbox__bg" }, this.isChecked !== false ? (h("sd-icon", { name: this.isChecked === true ? 'checkboxCheck' : 'checkboxIndeterminate', size: Number(CHECKBOX_LAYOUT.iconSize), color: this.disabled
                 ? CHECKBOX_COLORS.checked.iconDisabled
                 : this.inverse
                     ? CHECKBOX_COLORS.checked.iconInverse
-                    : CHECKBOX_COLORS.checked.icon })) : null), this.label && h("span", { key: 'dcb8b972e88aa06d0a338ce8d2e2b86a0fbd8f3f', class: "sd-checkbox__label" }, this.label)));
+                    : CHECKBOX_COLORS.checked.icon })) : null), this.label && h("span", { key: '15afb8e3b31201febd15bb85d24ee9c9b246d1d0', class: "sd-checkbox__label" }, this.label)));
     }
     static get 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: 'a821268b6bc2d04bd311b238009b750424e04e72', class: {
+        return (h("span", { key: '0addb8566b639d05921b9320b99abab7f1d67899', class: {
                 'sd-chip': true,
                 [`sd-chip--${state}`]: true,
                 'sd-chip--disabled': this.disabled,
                 'sd-chip--editable': !this.disabled,
-            }, role: this.disabled ? undefined : 'button', tabIndex: this.disabled || this.isEditing ? -1 : 0, "aria-disabled": this.disabled ? 'true' : undefined, style: cssVars, onClick: this.handleChipClick, onKeyDown: this.handleChipKeyDown }, this.isEditing ? (h("span", { key: "chip-input", ref: el => (this.inputEl = el), class: "sd-chip__input", contentEditable: !this.disabled, "data-placeholder": this.placeholder, spellcheck: false, onInput: this.handleInputChange, onKeyDown: this.handleInputKeyDown, onBlur: this.handleInputBlur, onPaste: this.handlePaste, onClick: event => event.stopPropagation() })) : ([
+            }, role: this.disabled ? undefined : 'button', tabIndex: this.disabled || this.isEditing ? -1 : 0, "aria-disabled": this.disabled ? 'true' : undefined, style: cssVars, onClick: this.handleChipClick, onKeyDown: this.handleChipKeyDown }, this.isEditing ? (h("span", { key: "chip-input", ref: el => (this.inputEl = el), class: "sd-chip__input", role: "textbox", tabindex: this.disabled ? -1 : 0, contentEditable: !this.disabled, "data-placeholder": this.placeholder, spellcheck: false, onInput: this.handleInputChange, onKeyDown: this.handleInputKeyDown, onBlur: this.handleInputBlur, onPaste: this.handlePaste, onClick: event => event.stopPropagation() })) : ([
             h("span", { key: "chip-label", class: "sd-chip__label" }, this.internalValue),
             !this.disabled && (h("sd-ghost-button", { key: "chip-remove", class: "sd-chip__remove", icon: "close", size: "xxs", ariaLabel: "remove", onClick: this.handleRemoveClick })),
         ])));

package/dist/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: '9a4424e79b095c240b2dd53c8655b9a4cccaf581', style: hostStyle }, h("svg", { key: '37ca87d4c4aa6ab6b84a4301225d775f1998c0c1', class: "sd-circle-progress", viewBox: `0 0 ${CIRCLE_PROGRESS_VIEWBOX_SIZE} ${CIRCLE_PROGRESS_VIEWBOX_SIZE}`, xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: '372f7031310dddba431323b0527c273311a498e3', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), h("circle", { key: 'def6ff7573e4c4a08648f35f7cb545d6b8064f6d', class: "sd-circle-progress__arc", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH, "stroke-linecap": "round", style: arcStyle })), showPercent && (h("span", { key: '13d6345672fdafaf6a1e1eef9f5987179a99c3ae', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && h("span", { key: 'c42e2fa2826284017e530e967975e45277ae9ee3', class: "sd-circle-progress__label" }, this.label)));
+        return (h(Host, { key: 'f92bf4d6e4f1133c4465a4fec7b2bad4549a6d06', style: hostStyle }, h("svg", { key: '669fa503cc6007f48f35474b08e4359de695026d', class: "sd-circle-progress", viewBox: `0 0 ${CIRCLE_PROGRESS_VIEWBOX_SIZE} ${CIRCLE_PROGRESS_VIEWBOX_SIZE}`, xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: '020c7d840a6592d7705b65b14d27e3b5752629bf', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), h("circle", { key: 'e409da4a5c34adcd8744f16040ae9d5d6019a415', class: "sd-circle-progress__arc", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH, "stroke-linecap": "round", style: arcStyle })), showPercent && (h("span", { key: '91c0b91e69293b67c8a0ad67a6d4b9e9db5c6d4a', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && h("span", { key: '03a5bee22a2e2f1b4ba75dbeca2ef5b4b9840aeb', class: "sd-circle-progress__label" }, this.label)));
     }
     static get is() { return "sd-circle-progress"; }
     static get originalStyleUrls() {

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

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { CONFIRM_MODAL_ICON_MAP, CONFIRM_MODAL_ICON_COLOR, CONFIRM_MODAL_DEFAULT_BUTTON, TITLE_ICON_SIZE, SUB_BUTTON_PRESET, } from "./sd-confirm-modal.config";
+import { CONFIRM_MODAL_DEFAULT_BUTTON, CONFIRM_MODAL_ICON_COLOR, CONFIRM_MODAL_ICON_MAP, SUB_BUTTON_PRESET, TITLE_ICON_SIZE, } from "./sd-confirm-modal.config";
 export class SdConfirmModal {
     el;
     hasSlottedContent = false;
@@ -46,14 +46,18 @@ export class SdConfirmModal {
     disconnectedCallback() {
         this.slotObserver?.disconnect();
     }
+    get resolvedType() {
+        return this.type ?? 'positive';
+    }
     get resolvedMainButton() {
-        return this.mainButtonName ?? CONFIRM_MODAL_DEFAULT_BUTTON[this.type];
+        return this.mainButtonName ?? CONFIRM_MODAL_DEFAULT_BUTTON[this.resolvedType];
     }
     get hasTagContent() {
-        return !!(this.tagLabel || this.slotLabel);
+        return ((this.tagLabel !== undefined && this.tagLabel !== '') ||
+            (this.slotLabel !== undefined && this.slotLabel !== ''));
     }
     get showContentBox() {
-        return !!this.tagContents || this.hasTagContent || this.hasSlottedContent;
+        return this.tagContents != null || this.hasTagContent || this.hasSlottedContent;
     }
     syncHasSlottedContent() {
         const hasSlottedContent = Array.from(this.el.childNodes).some(node => !(node.nodeType === Node.ELEMENT_NODE &&
@@ -65,11 +69,12 @@ export class SdConfirmModal {
         }
     }
     render() {
-        const iconName = CONFIRM_MODAL_ICON_MAP[this.type];
-        const iconColor = CONFIRM_MODAL_ICON_COLOR[this.type];
-        return (h("div", { key: '4ef44b1b2a86914eae3fc59e3c383b12646d1d0c', class: "sd-confirm-modal" }, h("sd-ghost-button", { key: 'aa62624aaf76a23eb4f1d30b846e6054f3cf001c', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (h("sd-icon", { key: 'd1329b8e71d455357790a4aa5f73547142830532', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), h("h2", { key: '2c5e0f902327c5eb663e6ccc5057e22e2be11c03', class: `sd-confirm-modal__title ${this.titleClass}` }, this.modalTitle), h("div", { key: '1917ef85f9f06de3dd321d664d4022dd4a1524ff', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (h("div", { key: 'afa7e6671f4849b7a90317664d07d3c04178c554', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg }))))), this.showContentBox && (h("div", { key: 'd4c06bfdd2222212b1cf8e3ec86ccaca4c394394', class: "sd-confirm-modal__content-box" }, this.tagContents ? (h("div", { class: "sd-confirm-modal__custom-content", ref: el => {
+        const type = this.resolvedType;
+        const iconName = CONFIRM_MODAL_ICON_MAP[type];
+        const iconColor = CONFIRM_MODAL_ICON_COLOR[type];
+        return (h("div", { key: '234455d93cbf02e5e70f78803914a8d91fbc4506', class: "sd-confirm-modal" }, h("sd-ghost-button", { key: '298f5279400b19159a8c08d2c739ab27cf88811c', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (h("sd-icon", { key: '41d01e92ff59cea05a367797ebde71cd13baed1f', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), h("h2", { key: 'd6b65e3a858a96f628602101adaaee2b62727df4', class: `sd-confirm-modal__title ${this.titleClass ?? ''}` }, this.modalTitle), h("div", { key: 'ed708bffc95467faabf70a9c2beec46fc1ba090c', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (h("div", { key: 'e7a996bef926fa3741ed9f2ecc930a6961f4c6e4', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg }))))), this.showContentBox && (h("div", { key: 'b4ab9cc0cf91166d4e34a7b4726d62c3463a9766', class: "sd-confirm-modal__content-box" }, this.tagContents ? (h("div", { class: "sd-confirm-modal__custom-content", ref: el => {
                 this.customContentRef = el;
-            } })) : (h("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && h("sd-tag", { name: this.tagPreset, label: this.tagLabel }), this.slotLabel && (h("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (h("div", { key: '8af201f6b6b08991ba31db2f2e59ee44a7b10d50', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg })))))), h("div", { key: '733f478a57a68bd9d4cc6563558bc0fafbfa5b9a', class: "sd-confirm-modal__button" }, this.subButtonLabel && (h("sd-button-v2", { key: 'a7be74a833fbd012d14e79b570a4d97e3a495a52', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), h("sd-button-v2", { key: 'e09be98a918aafd291a7b12c221b70e72ba14ab9', name: this.resolvedMainButton, label: this.mainButtonLabel, onSdClick: () => this.ok.emit() }))));
+            } })) : (h("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && h("sd-tag", { name: this.tagPreset ?? 'square_sm_grey', label: this.tagLabel }), this.slotLabel && (h("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (h("div", { key: '1dd63a93ecd0eae9ecfb61a3b98f1e6d1ac2b4b3', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg })))))), h("div", { key: 'e22a5fc951054808bc70962e104eb3951b65ca61', class: "sd-confirm-modal__button" }, this.subButtonLabel && (h("sd-button", { key: 'c1f23f043eead651e71943c7e76585b9b7fe964a', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), h("sd-button", { key: '63952e8b1c2d912fed6489760c97a787eaf2a90d', name: this.resolvedMainButton, label: this.mainButtonLabel ?? '확인', onSdClick: () => this.ok.emit() }))));
     }
     static get is() { return "sd-confirm-modal"; }
     static get originalStyleUrls() {