@sellmate/design-system 1.3.0 → 1.5.0

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

@@ -186,6 +186,8 @@ const SdTag = class {
     name = 'square_sm_grey';
     label = '';
     icon;
+    // 아이콘이 좌측 배치되는 게 자연스러운 default. prop 이름 변경(isRight 등)은 public API breaking 이라 별도 이슈로 분리.
+    // eslint-disable-next-line stencil/ban-default-true
     isLeft = true;
     componentWillLoad() {
         this.name = this.name ?? 'square_sm_grey';
@@ -207,7 +209,7 @@ const SdTag = class {
     render() {
         const config = this.resolvedConfig;
         const iconNode = this.renderIcon(config.icon, config.iconSize);
-        return (index.h("span", { key: '57f3c3f9ad53059fabff205cb44ffa3d1da9a711', class: "sd-tag", style: {
+        return (index.h("span", { key: 'c8b8b88e2c83401bb9d3e05004b0517d7e4a3a6a', class: "sd-tag", style: {
                 '--sd-tag-background': config.background,
                 '--sd-tag-content': config.content,
                 '--sd-tag-height': config.height,
@@ -217,7 +219,7 @@ const SdTag = class {
                 '--sd-tag-font-weight': config.fontWeight,
                 '--sd-tag-line-height': config.lineHeight,
                 '--sd-tag-radius': config.radius,
-            }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, index.h("span", { key: '3360f36d18f073cd24699b6b8db2e731fda351ac', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
+            }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, index.h("span", { key: '67094b09ab1d7b7e865c9f6b8017f8c5c3f8274a', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
     }
 };
 SdTag.style = sdTagCss();

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: '7d51ea5f02ba2df099f4440be26c2f0be8a73a6b', class: { [`align-${this.align}`]: Boolean(this.align) } }, index.h("slot", { key: '9a6a634e2bcd206ec9099c6be738c3853d0cbebf' })));
+        return (index.h(index.Host, { key: '91c033a0c4c3a6c3c9b29c0be99912c5ac1283ee', class: { [`align-${this.align}`]: Boolean(this.align) } }, index.h("slot", { key: 'abfbc911c707012bc7d924e328ba07d71b96f9a9' })));
     }
     static get watchers() { return {
         "field": [{
@@ -174,7 +183,7 @@ const SdTd = class {
                 "handleDividerChange": 0
             }],
         "useFrame": [{
-                "handleUseFieldChange": 0
+                "handleUseFrameChange": 0
             }]
     }; }
 };

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: 'bc3c9591b6453eed7df462841e29784c29b3aeef', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
+        return (index.h("div", { key: 'c80d46b63f50591d4d92b810c0625701e4741e3a', 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: 'db3ffaf51dc96c39c05558017f25929c679a59df', style: {
+        return (index.h("div", { key: '82579581897d7845b95456ccb5e2a1745c84bcc5', style: {
                 '--sd-toast-bg': typeConfig.bg,
                 '--sd-toast-text': typeConfig.content,
                 '--sd-toast-icon': iconColor,
                 '--sd-toast-link': linkColor,
-            } }, 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() })))));
+            } }, index.h("div", { key: '5f41392a25dee4e53917255453c97c2203940f21', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: '8f38f7c9842ec295510135589a63994011a856f4', class: "sd-toast__icon" }, index.h("sd-icon", { key: '62ef897ddfc3b47fe7b640d430d0baf95bdb5b51', name: this.icon, size: iconSize, color: iconColor }))), index.h("div", { key: 'f6db6cb9776cb41400c9a9052cdea94990245298', class: "sd-toast__content" }, index.h("span", { key: 'fbd7cdd72422e9ad08f99302b4dcd607d058926f', class: "sd-toast__message" }, this.message)), this.link && (index.h("a", { key: 'f599928ad9d0d7536086d7dd2d1ce65b429fd8f4', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (index.h("sd-button", { key: '2be68a412c4b6b9dac64dbd89447c4905fa7512f', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (index.h("sd-ghost-button", { key: '065030362b37383ee7ae31e9b8a771b160427cbe', 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: '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 })));
+        return (index.h("label", { key: 'c5c8b9448dabb6619e80fd55b11f94bf78706994', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, index.h("input", { key: 'bd43e7f286da217653461ec3128998c5f5a821d9', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
 };
 SdToggle.style = sdToggleCss();

package/dist/cjs/{system-VmZRYp6V.js → system-wrt-tcOq.js}

@@ -19,7 +19,18 @@ const color = {
 		strong: "#006AC1"},
 	grey: {
 		strong: "#737373"}};
+const shadow = {
+	spread: {
+		md: {
+			x: "0",
+			y: "0",
+			blur: "24",
+			spread: "0",
+			color: "rgba(34,34,34,0.2)"}
+	}};
 var systemTokens = {
-	color: color};
+	color: color,
+	shadow: shadow
+};
 
 exports.systemTokens = systemTokens;

package/dist/collection/collection-manifest.json

@@ -16,11 +16,12 @@
     "components/sd-badge/sd-badge.js",
     "components/sd-barcode-input/sd-barcode-input.js",
     "components/sd-calendar/sd-calendar.js",
+    "components/sd-callout/sd-callout.js",
+    "components/sd-icon/sd-icon.js",
     "components/sd-card/sd-card.js",
     "components/sd-chip/sd-chip.js",
     "components/sd-circle-progress/sd-circle-progress.js",
     "components/sd-confirm-modal/sd-confirm-modal.js",
-    "components/sd-icon/sd-icon.js",
     "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",

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

@@ -10,9 +10,11 @@ sd-calendar .sd-calendar {
   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--elevated {
+  box-shadow: 2px 2px 12px 2px rgba(0, 0, 0, 0.2);
+}
 sd-calendar .sd-calendar__header {
   display: flex;
   align-items: center;
@@ -122,7 +124,9 @@ sd-calendar .sd-calendar__dot-row {
   flex-wrap: wrap;
   justify-content: center;
   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);
 }

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

@@ -6,6 +6,7 @@ export class SdCalendar {
     value = null;
     selectable;
     events;
+    elevated = false;
     currentYear;
     currentMonth;
     update;
@@ -171,7 +172,8 @@ export class SdCalendar {
         };
         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 hasEvents = (this.events?.length ?? 0) > 0;
+        return (h("div", { key: '0ed0317b3cecffea4015de8688888e0ab2a38586', class: { 'sd-calendar': true, 'sd-calendar--elevated': this.elevated }, style: cssVars }, h("div", { key: 'b915f275a31617711d06d98c8a4d9369ddd36af5', class: "sd-calendar__header" }, h("div", { key: 'cd3b625e4e26af4b11f6af8b22c02099e8ab68a5', class: "sd-calendar__nav-group" }, h("sd-ghost-button", { key: 'e0ebfed48a7fdb61fd082371e7247176c02a8fb1', ariaLabel: "prevYear", size: "xxs", icon: "chevronLeft", onClick: this.goPrevYear }), h("span", { key: '6bfebc94dce54ca472ad5b3e03a7630e32676c3f', class: "sd-calendar__label" }, this.currentYear), h("sd-ghost-button", { key: '2e42ad52cd7d1b5d3502d578347c997910f3efc3', ariaLabel: "nextYear", size: "xxs", icon: "chevronRight", onClick: this.goNextYear })), h("span", { key: '95be4ab5e03d7378e82006221f190ffd55659cf1', class: "sd-calendar__divider", "aria-hidden": "true" }), h("div", { key: 'edce7cf91a873cdaeed68e50372bdfa20af7507d', class: "sd-calendar__nav-group sd-calendar__nav-group-month" }, h("sd-ghost-button", { key: '9ba274e9db32177d30d8c218303384855b7a3f60', ariaLabel: "prevMonth", size: "xxs", icon: "chevronLeft", onClick: this.goPrevMonth }), h("span", { key: 'bc113063e769fe12c2a39732cd82060752b7d9eb', class: "sd-calendar__label sd-calendar__label-month" }, this.currentMonth, "\uC6D4"), h("sd-ghost-button", { key: '52cfde203e06334c5eee85abc9d82d6889bf511c', ariaLabel: "nextMonth", size: "xxs", icon: "chevronRight", onClick: this.goNextMonth }))), h("div", { key: '9ae80aee03a4e6392a1d9a4ef28e565db20faea3', class: "sd-calendar__week" }, WEEK_LABELS.map(label => (h("span", { key: label, class: "sd-calendar__week-cell" }, label)))), h("div", { key: '7c47907311ea24f1af030931b8efd11955e55436', 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);
@@ -182,10 +184,10 @@ export class SdCalendar {
                     '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 } })))))));
+                }, 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 : ''), hasEvents && (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))))),
+            h("span", { key: '4ba064cad3188db8342f51ca017e4bf5af8aa460', class: "sd-calendar__divider-bottom", "aria-hidden": "true" }),
+            h("div", { key: 'ac132a1f1f948e618ee75d4c01a1c99a0dfc2c0a', 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"; }
@@ -261,6 +263,26 @@ export class SdCalendar {
                 },
                 "getter": false,
                 "setter": false
+            },
+            "elevated": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "elevated",
+                "defaultValue": "false"
             }
         };
     }

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

@@ -0,0 +1,45 @@
+import calloutTokens from "../../tokens/generated/component.callout.json";
+const { callout } = calloutTokens;
+export const CALLOUT_LAYOUT = {
+    radius: `${callout.radius}px`,
+    borderWidth: `${callout.border.width}px`,
+    bodyPaddingX: `${callout.body.paddingX}px`,
+    bodyPaddingY: `${callout.body.paddingY}px`,
+    bodyGap: `${callout.body.gap}px`,
+    titlePaddingX: `${callout.danger.title.paddingX}px`,
+    titleGap: `${callout.danger.title.gap}px`,
+    titleIconSize: Number(callout.danger.title.icon),
+};
+export const CALLOUT_TYPOGRAPHY = {
+    body: {
+        fontFamily: callout.body.typography.fontFamily,
+        fontSize: `${callout.body.typography.fontSize}px`,
+        fontWeight: callout.body.typography.fontWeight,
+        lineHeight: `${callout.body.typography.lineHeight}px`,
+    },
+    title: {
+        fontFamily: callout.danger.title.typography.fontFamily,
+        fontSize: `${callout.danger.title.typography.fontSize}px`,
+        fontWeight: callout.danger.title.typography.fontWeight,
+        lineHeight: `${callout.danger.title.typography.lineHeight}px`,
+    },
+};
+export const CALLOUT_TYPE_CONFIG = {
+    default: {
+        bg: callout.default.bg,
+        border: callout.default.border,
+        content: callout.default.content,
+    },
+    danger: {
+        bg: callout.danger.bg,
+        border: callout.danger.border,
+        content: callout.danger.content,
+        titleBg: callout.danger.title.bg,
+        titleColor: callout.danger.title.color,
+    },
+};
+export const DANGER_TITLE_LABEL = '주의사항';
+export const TYPE_ICON = {
+    default: undefined,
+    danger: 'warningFill',
+};

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

@@ -0,0 +1,87 @@
+@charset "UTF-8";
+sd-callout {
+  display: block;
+  width: fit-content;
+}
+sd-callout .sd-callout {
+  display: inline-flex;
+  align-items: stretch;
+  width: fit-content;
+  border: var(--sd-callout-border-width) solid var(--sd-callout-border);
+  border-radius: var(--sd-callout-radius);
+  background-color: var(--sd-callout-bg);
+  color: var(--sd-callout-content);
+  overflow: hidden;
+}
+sd-callout .sd-callout__title {
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: center;
+  justify-content: center;
+  gap: var(--sd-callout-title-gap);
+  padding: 8px var(--sd-callout-title-padding-x);
+  background-color: var(--sd-callout-title-bg);
+  color: var(--sd-callout-title-color);
+  font-family: var(--sd-callout-title-font-family);
+  font-size: var(--sd-callout-title-font-size);
+  font-weight: var(--sd-callout-title-font-weight);
+  line-height: var(--sd-callout-title-line-height);
+  flex-shrink: 0;
+}
+sd-callout .sd-callout__title-text {
+  white-space: nowrap;
+}
+sd-callout .sd-callout__body {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: var(--sd-callout-body-gap);
+  padding: var(--sd-callout-body-padding-y) var(--sd-callout-body-padding-x);
+  font-family: var(--sd-callout-body-font-family);
+  font-size: var(--sd-callout-body-font-size);
+  font-weight: var(--sd-callout-body-font-weight);
+  line-height: var(--sd-callout-body-line-height);
+}
+sd-callout .sd-callout__list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: var(--sd-callout-body-gap);
+}
+sd-callout .sd-callout__list__item {
+  display: flex;
+  align-items: flex-start;
+  color: var(--sd-callout-content);
+}
+sd-callout .sd-callout__list__item p {
+  margin: 0;
+  padding: 0;
+  flex: 1;
+  min-width: 0;
+  word-break: break-word;
+}
+sd-callout .sd-callout__list__item::before {
+  display: block;
+  flex-shrink: 0;
+  text-align: center;
+  color: var(--sd-callout-content);
+  font-size: var(--sd-callout-body-font-size);
+  font-weight: var(--sd-callout-body-font-weight);
+  line-height: var(--sd-callout-body-line-height);
+}
+sd-callout .sd-callout__list__item--depth-1::before {
+  content: "-";
+  width: 24px;
+}
+sd-callout .sd-callout__list__item--depth-2 {
+  padding-left: 32px;
+}
+sd-callout .sd-callout__list__item--depth-2::before {
+  content: "•";
+  width: 24px;
+}

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

@@ -0,0 +1,114 @@
+import { h } from "@stencil/core";
+import { CALLOUT_LAYOUT, CALLOUT_TYPE_CONFIG, CALLOUT_TYPOGRAPHY, DANGER_TITLE_LABEL, TYPE_ICON, } from "./sd-callout.config";
+import { sanitizeInlineHtml } from "../../utils/html/sanitize-inline-html";
+export class SdCallout {
+    type = 'default';
+    message = [];
+    get calloutStyle() {
+        const typeConfig = CALLOUT_TYPE_CONFIG[this.type] ?? CALLOUT_TYPE_CONFIG.default;
+        return {
+            '--sd-callout-bg': typeConfig.bg,
+            '--sd-callout-border': typeConfig.border,
+            '--sd-callout-border-width': CALLOUT_LAYOUT.borderWidth,
+            '--sd-callout-content': typeConfig.content,
+            '--sd-callout-radius': CALLOUT_LAYOUT.radius,
+            '--sd-callout-body-padding-x': CALLOUT_LAYOUT.bodyPaddingX,
+            '--sd-callout-body-padding-y': CALLOUT_LAYOUT.bodyPaddingY,
+            '--sd-callout-body-gap': CALLOUT_LAYOUT.bodyGap,
+            '--sd-callout-body-font-family': CALLOUT_TYPOGRAPHY.body.fontFamily,
+            '--sd-callout-body-font-size': CALLOUT_TYPOGRAPHY.body.fontSize,
+            '--sd-callout-body-font-weight': CALLOUT_TYPOGRAPHY.body.fontWeight,
+            '--sd-callout-body-line-height': CALLOUT_TYPOGRAPHY.body.lineHeight,
+            '--sd-callout-title-bg': typeConfig.titleBg ?? 'transparent',
+            '--sd-callout-title-color': typeConfig.titleColor ?? 'inherit',
+            '--sd-callout-title-padding-x': CALLOUT_LAYOUT.titlePaddingX,
+            '--sd-callout-title-gap': CALLOUT_LAYOUT.titleGap,
+            '--sd-callout-title-font-family': CALLOUT_TYPOGRAPHY.title.fontFamily,
+            '--sd-callout-title-font-size': CALLOUT_TYPOGRAPHY.title.fontSize,
+            '--sd-callout-title-font-weight': CALLOUT_TYPOGRAPHY.title.fontWeight,
+            '--sd-callout-title-line-height': CALLOUT_TYPOGRAPHY.title.lineHeight,
+        };
+    }
+    renderListItem(msg, depth = 0) {
+        if (Array.isArray(msg)) {
+            return msg.flatMap(m => this.renderListItem(m, depth + 1));
+        }
+        return [this.renderLi(msg, depth)];
+    }
+    renderLi = (msg, depth) => {
+        const safeDepth = Math.min(Math.max(depth, 1), 2);
+        return (h("li", { class: `sd-callout__list__item sd-callout__list__item--depth-${safeDepth}` }, h("p", { innerHTML: sanitizeInlineHtml(msg) })));
+    };
+    renderBody() {
+        return h("ul", { class: "sd-callout__list" }, this.renderListItem(this.message));
+    }
+    renderTitle() {
+        const iconName = TYPE_ICON[this.type];
+        const titleColor = CALLOUT_TYPE_CONFIG[this.type].titleColor;
+        return (h("div", { class: "sd-callout__title" }, iconName && (h("sd-icon", { name: iconName, size: CALLOUT_LAYOUT.titleIconSize, color: titleColor })), h("span", { class: "sd-callout__title-text" }, DANGER_TITLE_LABEL)));
+    }
+    render() {
+        const showTitle = this.type === 'danger';
+        return (h("div", { key: 'ce91120e7c71907e6c07728554e340ad552d6e34', class: "sd-callout", style: this.calloutStyle, role: "note" }, showTitle && this.renderTitle(), h("div", { key: '56b55c2fed40e59023856029b8c86c35b29d26e5', class: "sd-callout__body" }, this.renderBody())));
+    }
+    static get is() { return "sd-callout"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sd-callout.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sd-callout.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "CalloutType",
+                    "resolved": "\"danger\" | \"default\"",
+                    "references": {
+                        "CalloutType": {
+                            "location": "import",
+                            "path": "./sd-callout.config",
+                            "id": "src/components/sd-callout/sd-callout.config.ts::CalloutType",
+                            "referenceLocation": "CalloutType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "type",
+                "defaultValue": "'default'"
+            },
+            "message": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(string | string[])[]",
+                    "resolved": "(string | string[])[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            }
+        };
+    }
+}

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

@@ -3,7 +3,7 @@ export class SdCard {
     bordered = false;
     sdClass = '';
     render() {
-        return (h(Fragment, { key: '61c364f88b03eb56b60c660a58533f417d209e6a' }, h("div", { key: 'dee3671e757c273ffec06a15a0191a798280522c', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, h("slot", { key: 'f991bf5df95f8c1bac417aa4e70f40cf68624fb8' }))));
+        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

@@ -67,7 +67,12 @@ export class SdCheckbox {
                 this.hasWarnedMissingVal = true;
             }
             const valueSet = new Set(this.value);
-            valueSet.has(this.val) ? valueSet.delete(this.val) : valueSet.add(this.val);
+            if (valueSet.has(this.val)) {
+                valueSet.delete(this.val);
+            }
+            else {
+                valueSet.add(this.val);
+            }
             newValue = Array.from(valueSet);
         }
         else if (this.value === null) {
@@ -100,13 +105,13 @@ export class SdCheckbox {
             '--sd-checkbox-inverse-icon': CHECKBOX_COLORS.checked.iconInverse,
             '--sd-checkbox-inverse-label': CHECKBOX_COLORS.labelInverse,
         };
-        return (h("label", { key: '6fb506c448a5968d403f779d113fd60857901982', class: this.checkboxClasses, style: cssVars }, h("input", { key: 'fb08f531416255b8886d2bd2c21c3f62e8a9d47d', type: "checkbox", ref: el => {
+        return (h("label", { key: '1e1ba8ab22e34327cfdfb8d236aba0e1ff2806f6', class: this.checkboxClasses, style: cssVars }, h("input", { key: '82b852e0fb3ca94c460b7181ae1c575b361ddd4d', 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: '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
+            }, 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: 'e7a32ccbb915c857d188fecde0b388e15edebdfb', 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: '92bc308561b0a7653926d751d029d80c38844b07', class: "sd-checkbox__label" }, this.label)));
+                    : CHECKBOX_COLORS.checked.icon })) : null), this.label && h("span", { key: '396b7aa27a10428e5d9d24a3f523c3a384d4e463', class: "sd-checkbox__label" }, this.label)));
     }
     static get is() { return "sd-checkbox"; }
     static get originalStyleUrls() {

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

@@ -205,7 +205,7 @@ export class SdChip {
             '--sd-chip-font-weight': typography.fontWeight,
             '--sd-chip-line-height': typography.lineHeight,
         };
-        return (h("span", { key: '3cd683af3aed7cc6e549c5fc5da1e00cda2dc2a0', class: {
+        return (h("span", { key: '0addb8566b639d05921b9320b99abab7f1d67899', class: {
                 'sd-chip': true,
                 [`sd-chip--${state}`]: true,
                 'sd-chip--disabled': this.disabled,

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: 'd4ace6f784fd64a45baa746870a84a88b4911cf8', style: hostStyle }, h("svg", { key: '08aef376ac746abf1a9b404e37703a862f956a08', class: "sd-circle-progress", viewBox: `0 0 ${CIRCLE_PROGRESS_VIEWBOX_SIZE} ${CIRCLE_PROGRESS_VIEWBOX_SIZE}`, xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: '42411ef6f92f6427309d92dfad84ad7dc8f8c3bb', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), h("circle", { key: 'a0ae53ce4dfd557e980155cd0ff22ba064fe32dc', class: "sd-circle-progress__arc", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH, "stroke-linecap": "round", style: arcStyle })), showPercent && (h("span", { key: '0917cfd3aa460872fa4c35da61530e01080d6937', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && h("span", { key: '051756bc7b20e87205b21c735b2827a81c2a17c9', class: "sd-circle-progress__label" }, this.label)));
+        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,4 +1,5 @@
 import { h } from "@stencil/core";
+import { sanitizeInlineHtml } from "../../utils/html/sanitize-inline-html";
 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;
@@ -72,9 +73,9 @@ export class SdConfirmModal {
         const type = this.resolvedType;
         const iconName = CONFIRM_MODAL_ICON_MAP[type];
         const iconColor = CONFIRM_MODAL_ICON_COLOR[type];
-        return (h("div", { key: '6dc337947f7c05799cf7c97d45b0df84c7976196', class: "sd-confirm-modal" }, h("sd-ghost-button", { key: 'b584cc4bc00191f8488be7265249922110d57d90', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (h("sd-icon", { key: '470716bef879befd1d6746bc27c10fb74d61a2b6', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), h("h2", { key: '5b0113f13b219a2e14c5d45397c293baafc28a2c', class: `sd-confirm-modal__title ${this.titleClass ?? ''}` }, this.modalTitle), h("div", { key: 'cee18d1afde384523ca0f96f4138b8854f89cb5c', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (h("div", { key: 'b9466be3cbb635c9b8c0a50d7023b70fa31d9f0f', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg }))))), this.showContentBox && (h("div", { key: 'f3ea52c0261a63e75b42175c2e7c602e02f82636', class: "sd-confirm-modal__content-box" }, this.tagContents ? (h("div", { class: "sd-confirm-modal__custom-content", ref: el => {
+        return (h("div", { key: 'f9a1d63c1cd047969c72d0e71ccd3b1cf30bac15', class: "sd-confirm-modal" }, h("sd-ghost-button", { key: '8f1e4ec22a12ad9347c8c8c843f6dbb91591b289', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (h("sd-icon", { key: '8adada47e2dc0a6677cdf004ca8cad8794123d03', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), h("h2", { key: 'ddc0636d2cd8333aa0d5a3f242dbf2d57759fc5b', class: `sd-confirm-modal__title ${this.titleClass ?? ''}` }, this.modalTitle), h("div", { key: '66d4c779f4269824937306ca34a0b51e6208d03f', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (h("div", { key: '87634b26cba0fb24115f0cd59fcc7956f9fde53c', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) }))))), this.showContentBox && (h("div", { key: '0b495d1393cf029e8b07f9041c51e344ff7cb5da', class: "sd-confirm-modal__content-box" }, this.tagContents ? (h("div", { class: "sd-confirm-modal__custom-content", ref: el => {
                 this.customContentRef = el;
-            } })) : (h("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && h("sd-tag", { name: this.tagPreset ?? 'square_sm_grey', label: this.tagLabel }), this.slotLabel && (h("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (h("div", { key: 'fa33e4f68a1c36e197ff6a6f5629005fbbebcbc3', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg })))))), h("div", { key: '378162e9e44cefc4e61113ba927545040e6a6c6c', class: "sd-confirm-modal__button" }, this.subButtonLabel && (h("sd-button", { key: '8fb93a086c4a42063f53ed533be2774de31db81e', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), h("sd-button", { key: '304c80915c9a7a685bddcf2d5edf4f56119860e8', name: this.resolvedMainButton, label: this.mainButtonLabel ?? '확인', onSdClick: () => this.ok.emit() }))));
+            } })) : (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: '09d34f47a466e4277f1bb2215a3b087bc78e240d', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) })))))), h("div", { key: '2a62193311791f84b6eca22a49cff8a0fc65d5a7', class: "sd-confirm-modal__button" }, this.subButtonLabel && (h("sd-button", { key: '4c800376dec7ca035b2aaaaac00738851829108d', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), h("sd-button", { key: 'dcb473b7b6ce29983d89df6c288526071962ac01', name: this.resolvedMainButton, label: this.mainButtonLabel ?? '확인', onSdClick: () => this.ok.emit() }))));
     }
     static get is() { return "sd-confirm-modal"; }
     static get originalStyleUrls() {