@sellmate/design-system 1.4.0 → 1.5.0

package/hydrate/index.js

@@ -6718,7 +6718,7 @@ const CALENDAR_LAYOUT = {
 };
 const WEEK_LABELS = ['일', '월', '화', '수', '목', '금', '토'];
 
-const sdCalendarCss = () => `sd-calendar{display:block}sd-calendar .sd-calendar{display:flex;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;align-items:center;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__nav-group{display:inline-flex;align-items:center;gap:var(--calendar-gap)}sd-calendar .sd-calendar__nav-group-month{width:100%}sd-calendar .sd-calendar__label{display:inline-flex;align-items:center;justify-content:center;min-width:40px;text-align:center}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, var(--calendar-day-size))}sd-calendar .sd-calendar__week-cell{display:inline-flex;align-items:center;justify-content:center;height:20px;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__grid{display:grid;grid-template-columns:repeat(7, var(--calendar-day-size));row-gap:var(--calendar-grid-row-gap)}sd-calendar .sd-calendar__day{display:inline-flex;flex-direction:column;align-items:center;justify-content:flex-start;width:var(--calendar-day-size);min-height:var(--calendar-day-circle-size);padding:0;border:none;background:transparent;cursor:pointer;font-size:var(--calendar-day-font-size);line-height:var(--calendar-day-line-height);font-weight:var(--calendar-day-font-weight);color:var(--calendar-day-text)}sd-calendar .sd-calendar__day-circle{display:inline-flex;align-items:center;justify-content:center;width:var(--calendar-day-circle-size);height:var(--calendar-day-circle-size);border-radius:calc(var(--calendar-day-circle-radius) * 1px);border:1px solid transparent;box-sizing:border-box}sd-calendar .sd-calendar__day:not(:disabled):hover .sd-calendar__day-circle{border-radius:16px;border:1px solid var(--calendar-day-hover-border)}sd-calendar .sd-calendar__day--today .sd-calendar__day-circle{font-weight:700}sd-calendar .sd-calendar__day--selected .sd-calendar__day-circle{border-radius:16px;background:var(--calendar-day-select-bg);color:var(--calendar-day-select-text)}sd-calendar .sd-calendar__day--selected:not(:disabled):hover .sd-calendar__day-circle{background:var(--calendar-day-select-bg);color:var(--calendar-day-select-text)}sd-calendar .sd-calendar__day--disabled{color:var(--calendar-day-disabled-text);background:none !important;cursor:not-allowed}sd-calendar .sd-calendar__day--empty{visibility:hidden;pointer-events:none}sd-calendar .sd-calendar__dot-row{display:flex;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)}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__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;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:inline-flex;align-items:center;gap:var(--calendar-legend-gap)}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{display:inline-block}`;
+const sdCalendarCss = () => `sd-calendar{display:block}sd-calendar .sd-calendar{display:flex;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);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;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__nav-group{display:inline-flex;align-items:center;gap:var(--calendar-gap)}sd-calendar .sd-calendar__nav-group-month{width:100%}sd-calendar .sd-calendar__label{display:inline-flex;align-items:center;justify-content:center;min-width:40px;text-align:center}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, var(--calendar-day-size))}sd-calendar .sd-calendar__week-cell{display:inline-flex;align-items:center;justify-content:center;height:20px;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__grid{display:grid;grid-template-columns:repeat(7, var(--calendar-day-size));row-gap:var(--calendar-grid-row-gap)}sd-calendar .sd-calendar__day{display:inline-flex;flex-direction:column;align-items:center;justify-content:flex-start;width:var(--calendar-day-size);min-height:var(--calendar-day-circle-size);padding:0;border:none;background:transparent;cursor:pointer;font-size:var(--calendar-day-font-size);line-height:var(--calendar-day-line-height);font-weight:var(--calendar-day-font-weight);color:var(--calendar-day-text)}sd-calendar .sd-calendar__day-circle{display:inline-flex;align-items:center;justify-content:center;width:var(--calendar-day-circle-size);height:var(--calendar-day-circle-size);border-radius:calc(var(--calendar-day-circle-radius) * 1px);border:1px solid transparent;box-sizing:border-box}sd-calendar .sd-calendar__day:not(:disabled):hover .sd-calendar__day-circle{border-radius:16px;border:1px solid var(--calendar-day-hover-border)}sd-calendar .sd-calendar__day--today .sd-calendar__day-circle{font-weight:700}sd-calendar .sd-calendar__day--selected .sd-calendar__day-circle{border-radius:16px;background:var(--calendar-day-select-bg);color:var(--calendar-day-select-text)}sd-calendar .sd-calendar__day--selected:not(:disabled):hover .sd-calendar__day-circle{background:var(--calendar-day-select-bg);color:var(--calendar-day-select-text)}sd-calendar .sd-calendar__day--disabled{color:var(--calendar-day-disabled-text);background:none !important;cursor:not-allowed}sd-calendar .sd-calendar__day--empty{visibility:hidden;pointer-events:none}sd-calendar .sd-calendar__dot-row{display:flex;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)}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__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;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:inline-flex;align-items:center;gap:var(--calendar-legend-gap)}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{display:inline-block}`;
 
 class SdCalendar {
     constructor(hostRef) {
@@ -6729,6 +6729,7 @@ class SdCalendar {
     value = null;
     selectable;
     events;
+    elevated = false;
     currentYear;
     currentMonth;
     update;
@@ -6895,7 +6896,7 @@ class SdCalendar {
         const eventMap = this.eventMap;
         const legend = this.legendItems;
         const hasEvents = (this.events?.length ?? 0) > 0;
-        return (hAsync("div", { key: '79cfdb58f8d44085c87cfea6458e60654bfa09bb', class: "sd-calendar", style: cssVars }, hAsync("div", { key: '065620bcd155de11ef2272720de57ef6fcd9fd20', class: "sd-calendar__header" }, hAsync("div", { key: 'ae27c8fe51c44137932b18cc83b64dcce7e2bbaa', class: "sd-calendar__nav-group" }, hAsync("sd-ghost-button", { key: '8207f6d77705999419f451db032c059564ea0c17', ariaLabel: "prevYear", size: "xxs", icon: "chevronLeft", onClick: this.goPrevYear }), hAsync("span", { key: 'b5bf63784dd06c3ce5a4d4c5514fea22efb08793', class: "sd-calendar__label" }, this.currentYear), hAsync("sd-ghost-button", { key: '14512de68825e3b158704c3084306029ade8fcc1', ariaLabel: "nextYear", size: "xxs", icon: "chevronRight", onClick: this.goNextYear })), hAsync("span", { key: 'e37eb90d72c2e64b8ebb1da4ddf3fccb7ff18cc3', class: "sd-calendar__divider", "aria-hidden": "true" }), hAsync("div", { key: '07b1696b663ddb992e5a8d8b5ab98205ba136d9d', class: "sd-calendar__nav-group sd-calendar__nav-group-month" }, hAsync("sd-ghost-button", { key: 'b742889a44643d3e4d3b6da90784923c40e5a07f', ariaLabel: "prevMonth", size: "xxs", icon: "chevronLeft", onClick: this.goPrevMonth }), hAsync("span", { key: 'c97402106312c3a6eb220798263ba818419e7d27', class: "sd-calendar__label sd-calendar__label-month" }, this.currentMonth, "\uC6D4"), hAsync("sd-ghost-button", { key: '55411b1328acb781d71a7a84996d2a29886612cd', ariaLabel: "nextMonth", size: "xxs", icon: "chevronRight", onClick: this.goNextMonth }))), hAsync("div", { key: 'd10b03d31be412b545999d7e70bd9a349e5f1880', class: "sd-calendar__week" }, WEEK_LABELS.map(label => (hAsync("span", { key: label, class: "sd-calendar__week-cell" }, label)))), hAsync("div", { key: '0b8f82db3753fe08435b07dee695d49a192786c0', class: "sd-calendar__grid" }, this.cells.map(cell => {
+        return (hAsync("div", { key: '0ed0317b3cecffea4015de8688888e0ab2a38586', class: { 'sd-calendar': true, 'sd-calendar--elevated': this.elevated }, style: cssVars }, hAsync("div", { key: 'b915f275a31617711d06d98c8a4d9369ddd36af5', class: "sd-calendar__header" }, hAsync("div", { key: 'cd3b625e4e26af4b11f6af8b22c02099e8ab68a5', class: "sd-calendar__nav-group" }, hAsync("sd-ghost-button", { key: 'e0ebfed48a7fdb61fd082371e7247176c02a8fb1', ariaLabel: "prevYear", size: "xxs", icon: "chevronLeft", onClick: this.goPrevYear }), hAsync("span", { key: '6bfebc94dce54ca472ad5b3e03a7630e32676c3f', class: "sd-calendar__label" }, this.currentYear), hAsync("sd-ghost-button", { key: '2e42ad52cd7d1b5d3502d578347c997910f3efc3', ariaLabel: "nextYear", size: "xxs", icon: "chevronRight", onClick: this.goNextYear })), hAsync("span", { key: '95be4ab5e03d7378e82006221f190ffd55659cf1', class: "sd-calendar__divider", "aria-hidden": "true" }), hAsync("div", { key: 'edce7cf91a873cdaeed68e50372bdfa20af7507d', class: "sd-calendar__nav-group sd-calendar__nav-group-month" }, hAsync("sd-ghost-button", { key: '9ba274e9db32177d30d8c218303384855b7a3f60', ariaLabel: "prevMonth", size: "xxs", icon: "chevronLeft", onClick: this.goPrevMonth }), hAsync("span", { key: 'bc113063e769fe12c2a39732cd82060752b7d9eb', class: "sd-calendar__label sd-calendar__label-month" }, this.currentMonth, "\uC6D4"), hAsync("sd-ghost-button", { key: '52cfde203e06334c5eee85abc9d82d6889bf511c', ariaLabel: "nextMonth", size: "xxs", icon: "chevronRight", onClick: this.goNextMonth }))), hAsync("div", { key: '9ae80aee03a4e6392a1d9a4ef28e565db20faea3', class: "sd-calendar__week" }, WEEK_LABELS.map(label => (hAsync("span", { key: label, class: "sd-calendar__week-cell" }, label)))), hAsync("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);
@@ -6908,8 +6909,8 @@ class SdCalendar {
                     '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) }, hAsync("span", { class: "sd-calendar__day-circle" }, cell.inCurrentMonth ? cell.day : ''), hasEvents && (hAsync("span", { class: "sd-calendar__dot-row", "aria-hidden": "true" }, dayEvents?.map((ev, i) => (hAsync("span", { key: `${ev.color}|${ev.label}|${i}`, class: "sd-calendar__dot", style: { backgroundColor: ev.color } })))))));
         })), legend.length > 0 && [
-            hAsync("span", { key: 'a837c5956da658561fcbd2e646b0abbb0fa84a20', class: "sd-calendar__divider-bottom", "aria-hidden": "true" }),
-            hAsync("div", { key: '190b9947e5ecd627fad03b40c58c2e0c8719daaa', class: "sd-calendar__legend" }, legend.map(item => (hAsync("span", { key: `${item.color}|${item.label}`, class: "sd-calendar__legend-item" }, hAsync("span", { class: "sd-calendar__legend-dot", style: { backgroundColor: item.color }, "aria-hidden": "true" }), hAsync("span", { class: "sd-calendar__legend-label" }, item.label))))),
+            hAsync("span", { key: '4ba064cad3188db8342f51ca017e4bf5af8aa460', class: "sd-calendar__divider-bottom", "aria-hidden": "true" }),
+            hAsync("div", { key: 'ac132a1f1f948e618ee75d4c01a1c99a0dfc2c0a', class: "sd-calendar__legend" }, legend.map(item => (hAsync("span", { key: `${item.color}|${item.label}`, class: "sd-calendar__legend-item" }, hAsync("span", { class: "sd-calendar__legend-dot", style: { backgroundColor: item.color }, "aria-hidden": "true" }), hAsync("span", { class: "sd-calendar__legend-label" }, item.label))))),
         ]));
     }
     static get watchers() { return {
@@ -6925,6 +6926,7 @@ class SdCalendar {
             "value": [1025],
             "selectable": [16],
             "events": [16],
+            "elevated": [4],
             "currentYear": [32],
             "currentMonth": [32]
         },
@@ -6934,6 +6936,225 @@ class SdCalendar {
     }; }
 }
 
+const callout$1 = {
+	radius: "8",
+	border: {
+		width: "1"
+	},
+	body: {
+		gap: "2",
+		typography: {
+			fontFamily: "Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif",
+			fontSize: "12",
+			fontWeight: "400",
+			lineHeight: "20"},
+		paddingX: "12",
+		paddingY: "8"
+	},
+	"default": {
+		bg: "#F9F9F9",
+		border: "#E1E1E1",
+		content: "#555555"
+	},
+	danger: {
+		bg: "#FCEFEF",
+		border: "#FFB5B5",
+		content: "#222222",
+		title: {
+			bg: "#FB4444",
+			paddingX: "24",
+			gap: "2",
+			typography: {
+				fontFamily: "Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif",
+				fontWeight: "700",
+				fontSize: "16",
+				lineHeight: "26"
+			},
+			color: "#FFFFFF",
+			icon: "24"
+		}
+	}
+};
+var calloutTokens = {
+	callout: callout$1
+};
+
+const { callout } = calloutTokens;
+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),
+};
+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`,
+    },
+};
+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,
+    },
+};
+const DANGER_TITLE_LABEL = '주의사항';
+const TYPE_ICON = {
+    default: undefined,
+    danger: 'warningFill',
+};
+
+const ALLOWED_INLINE_TAGS = new Set(['B', 'STRONG', 'I', 'EM', 'BR', 'SPAN']);
+const DROP_CONTENT_TAGS = new Set([
+    'SCRIPT',
+    'STYLE',
+    'IFRAME',
+    'OBJECT',
+    'EMBED',
+    'META',
+    'LINK',
+    'BASE',
+    'NOSCRIPT',
+]);
+const escapeHtml = (value) => value
+    .replaceAll('&', '&')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;')
+    .replaceAll("'", '&#39;');
+const createSanitizerTemplate = () => {
+    if (typeof document === 'undefined') {
+        return null;
+    }
+    return document.createElement('template');
+};
+const sanitizeNode = (node, doc) => {
+    if (node.nodeType === Node.COMMENT_NODE) {
+        node.remove();
+        return;
+    }
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+        return;
+    }
+    const element = node;
+    const tagName = element.tagName;
+    if (DROP_CONTENT_TAGS.has(tagName)) {
+        element.remove();
+        return;
+    }
+    Array.from(element.childNodes).forEach(child => sanitizeNode(child));
+    Array.from(element.attributes).forEach(attr => element.removeAttribute(attr.name));
+    if (ALLOWED_INLINE_TAGS.has(tagName)) {
+        return;
+    }
+    const parent = element.parentNode;
+    if (parent == null) {
+        return;
+    }
+    while (element.firstChild) {
+        parent.insertBefore(element.firstChild, element);
+    }
+    parent.removeChild(element);
+};
+const sanitizeInlineHtml = (value) => {
+    const template = createSanitizerTemplate();
+    if (template == null) {
+        return escapeHtml(value);
+    }
+    template.innerHTML = value;
+    Array.from(template.content.childNodes).forEach(child => sanitizeNode(child));
+    return template.innerHTML;
+};
+
+const sdCalloutCss = () => `@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}`;
+
+class SdCallout {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    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 (hAsync("li", { class: `sd-callout__list__item sd-callout__list__item--depth-${safeDepth}` }, hAsync("p", { innerHTML: sanitizeInlineHtml(msg) })));
+    };
+    renderBody() {
+        return hAsync("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 (hAsync("div", { class: "sd-callout__title" }, iconName && (hAsync("sd-icon", { name: iconName, size: CALLOUT_LAYOUT.titleIconSize, color: titleColor })), hAsync("span", { class: "sd-callout__title-text" }, DANGER_TITLE_LABEL)));
+    }
+    render() {
+        const showTitle = this.type === 'danger';
+        return (hAsync("div", { key: 'ce91120e7c71907e6c07728554e340ad552d6e34', class: "sd-callout", style: this.calloutStyle, role: "note" }, showTitle && this.renderTitle(), hAsync("div", { key: '56b55c2fed40e59023856029b8c86c35b29d26e5', class: "sd-callout__body" }, this.renderBody())));
+    }
+    static get style() { return sdCalloutCss(); }
+    static get cmpMeta() { return {
+        "$flags$": 512,
+        "$tagName$": "sd-callout",
+        "$members$": {
+            "type": [513],
+            "message": [16]
+        },
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": [["type", "type"]]
+    }; }
+}
+
 const sdCardCss = () => `sd-card{display:block;height:fit-content}sd-card .sd-card{border-radius:8px;background:white}sd-card .sd-card--bordered{border:1px solid #E1E1E1}`;
 
 class SdCard {
@@ -6943,7 +7164,7 @@ class SdCard {
     bordered = false;
     sdClass = '';
     render() {
-        return (hAsync(Fragment, { key: '61c364f88b03eb56b60c660a58533f417d209e6a' }, hAsync("div", { key: 'dee3671e757c273ffec06a15a0191a798280522c', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, hAsync("slot", { key: 'f991bf5df95f8c1bac417aa4e70f40cf68624fb8' }))));
+        return (hAsync(Fragment, { key: '2700ffa3af5b6b35882c396a838d9da2e866ee4b' }, hAsync("div", { key: '3d3aeaac318fc089c42ae4348bc72015d4476276', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, hAsync("slot", { key: 'e72f00bc8c209644baf5f431ce485fb5b691f354' }))));
     }
     static get style() { return sdCardCss(); }
     static get cmpMeta() { return {
@@ -7114,7 +7335,12 @@ 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) {
@@ -7147,13 +7373,13 @@ class SdCheckbox {
             '--sd-checkbox-inverse-icon': CHECKBOX_COLORS.checked.iconInverse,
             '--sd-checkbox-inverse-label': CHECKBOX_COLORS.labelInverse,
         };
-        return (hAsync("label", { key: '6fb506c448a5968d403f779d113fd60857901982', class: this.checkboxClasses, style: cssVars }, hAsync("input", { key: 'fb08f531416255b8886d2bd2c21c3f62e8a9d47d', type: "checkbox", ref: el => {
+        return (hAsync("label", { key: '1e1ba8ab22e34327cfdfb8d236aba0e1ff2806f6', class: this.checkboxClasses, style: cssVars }, hAsync("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' }), hAsync("div", { key: 'e49eb38375ba680e08510f83a15ce8a6bbecd4b8', class: "sd-checkbox__bg" }, this.isChecked !== false ? (hAsync("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' }), hAsync("div", { key: 'e7a32ccbb915c857d188fecde0b388e15edebdfb', class: "sd-checkbox__bg" }, this.isChecked !== false ? (hAsync("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 && hAsync("span", { key: '92bc308561b0a7653926d751d029d80c38844b07', class: "sd-checkbox__label" }, this.label)));
+                    : CHECKBOX_COLORS.checked.icon })) : null), this.label && hAsync("span", { key: '396b7aa27a10428e5d9d24a3f523c3a384d4e463', class: "sd-checkbox__label" }, this.label)));
     }
     static get watchers() { return {
         "value": [{
@@ -7467,7 +7693,7 @@ class SdChip {
             '--sd-chip-font-weight': typography.fontWeight,
             '--sd-chip-line-height': typography.lineHeight,
         };
-        return (hAsync("span", { key: '3cd683af3aed7cc6e549c5fc5da1e00cda2dc2a0', class: {
+        return (hAsync("span", { key: '0addb8566b639d05921b9320b99abab7f1d67899', class: {
                 'sd-chip': true,
                 [`sd-chip--${state}`]: true,
                 'sd-chip--disabled': this.disabled,
@@ -7559,8 +7785,19 @@ 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
+};
 
 const CIRCLE_PROGRESS_LABEL_COLOR = progressTokens.progress.color.label;
 const CIRCLE_PROGRESS_PERCENT_ZERO_COLOR = systemTokens.color.fg.tertiary;
@@ -7620,7 +7857,7 @@ class SdCircleProgress {
         }
         const c = CIRCLE_PROGRESS_VIEWBOX_SIZE / 2;
         const showPercent = !this.indeterminate;
-        return (hAsync(Host, { key: 'd4ace6f784fd64a45baa746870a84a88b4911cf8', style: hostStyle }, hAsync("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" }, hAsync("circle", { key: '42411ef6f92f6427309d92dfad84ad7dc8f8c3bb', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), hAsync("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 && (hAsync("span", { key: '0917cfd3aa460872fa4c35da61530e01080d6937', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && hAsync("span", { key: '051756bc7b20e87205b21c735b2827a81c2a17c9', class: "sd-circle-progress__label" }, this.label)));
+        return (hAsync(Host, { key: 'f92bf4d6e4f1133c4465a4fec7b2bad4549a6d06', style: hostStyle }, hAsync("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" }, hAsync("circle", { key: '020c7d840a6592d7705b65b14d27e3b5752629bf', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), hAsync("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 && (hAsync("span", { key: '91c0b91e69293b67c8a0ad67a6d4b9e9db5c6d4a', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && hAsync("span", { key: '03a5bee22a2e2f1b4ba75dbeca2ef5b4b9840aeb', class: "sd-circle-progress__label" }, this.label)));
     }
     static get style() { return sdCircleProgressCss(); }
     static get cmpMeta() { return {
@@ -7736,9 +7973,9 @@ class SdConfirmModal {
         const type = this.resolvedType;
         const iconName = CONFIRM_MODAL_ICON_MAP[type];
         const iconColor = CONFIRM_MODAL_ICON_COLOR[type];
-        return (hAsync("div", { key: '6dc337947f7c05799cf7c97d45b0df84c7976196', class: "sd-confirm-modal" }, hAsync("sd-ghost-button", { key: 'b584cc4bc00191f8488be7265249922110d57d90', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (hAsync("sd-icon", { key: '470716bef879befd1d6746bc27c10fb74d61a2b6', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), hAsync("h2", { key: '5b0113f13b219a2e14c5d45397c293baafc28a2c', class: `sd-confirm-modal__title ${this.titleClass ?? ''}` }, this.modalTitle), hAsync("div", { key: 'cee18d1afde384523ca0f96f4138b8854f89cb5c', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (hAsync("div", { key: 'b9466be3cbb635c9b8c0a50d7023b70fa31d9f0f', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (hAsync("p", { class: "sd-confirm-modal__message-text", innerHTML: msg }))))), this.showContentBox && (hAsync("div", { key: 'f3ea52c0261a63e75b42175c2e7c602e02f82636', class: "sd-confirm-modal__content-box" }, this.tagContents ? (hAsync("div", { class: "sd-confirm-modal__custom-content", ref: el => {
+        return (hAsync("div", { key: 'f9a1d63c1cd047969c72d0e71ccd3b1cf30bac15', class: "sd-confirm-modal" }, hAsync("sd-ghost-button", { key: '8f1e4ec22a12ad9347c8c8c843f6dbb91591b289', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (hAsync("sd-icon", { key: '8adada47e2dc0a6677cdf004ca8cad8794123d03', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), hAsync("h2", { key: 'ddc0636d2cd8333aa0d5a3f242dbf2d57759fc5b', class: `sd-confirm-modal__title ${this.titleClass ?? ''}` }, this.modalTitle), hAsync("div", { key: '66d4c779f4269824937306ca34a0b51e6208d03f', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (hAsync("div", { key: '87634b26cba0fb24115f0cd59fcc7956f9fde53c', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (hAsync("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) }))))), this.showContentBox && (hAsync("div", { key: '0b495d1393cf029e8b07f9041c51e344ff7cb5da', class: "sd-confirm-modal__content-box" }, this.tagContents ? (hAsync("div", { class: "sd-confirm-modal__custom-content", ref: el => {
                 this.customContentRef = el;
-            } })) : (hAsync("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && hAsync("sd-tag", { name: this.tagPreset ?? 'square_sm_grey', label: this.tagLabel }), this.slotLabel && (hAsync("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (hAsync("div", { key: 'fa33e4f68a1c36e197ff6a6f5629005fbbebcbc3', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (hAsync("p", { class: "sd-confirm-modal__message-text", innerHTML: msg })))))), hAsync("div", { key: '378162e9e44cefc4e61113ba927545040e6a6c6c', class: "sd-confirm-modal__button" }, this.subButtonLabel && (hAsync("sd-button", { key: '8fb93a086c4a42063f53ed533be2774de31db81e', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), hAsync("sd-button", { key: '304c80915c9a7a685bddcf2d5edf4f56119860e8', name: this.resolvedMainButton, label: this.mainButtonLabel ?? '확인', onSdClick: () => this.ok.emit() }))));
+            } })) : (hAsync("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && (hAsync("sd-tag", { name: this.tagPreset ?? 'square_sm_grey', label: this.tagLabel })), this.slotLabel && (hAsync("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (hAsync("div", { key: '09d34f47a466e4277f1bb2215a3b087bc78e240d', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (hAsync("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) })))))), hAsync("div", { key: '2a62193311791f84b6eca22a49cff8a0fc65d5a7', class: "sd-confirm-modal__button" }, this.subButtonLabel && (hAsync("sd-button", { key: '4c800376dec7ca035b2aaaaac00738851829108d', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), hAsync("sd-button", { key: 'dcb473b7b6ce29983d89df6c288526071962ac01', name: this.resolvedMainButton, label: this.mainButtonLabel ?? '확인', onSdClick: () => this.ok.emit() }))));
     }
     static get style() { return sdConfirmModalCss(); }
     static get cmpMeta() { return {
@@ -7964,9 +8201,9 @@ class SdDatePicker {
             '--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
             '--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
         };
-        return (hAsync("sd-field", { key: '825c845ea1ada63a9f21cfc43aad04a598325c13', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: 'b9dd1a8df29f340ad67331dbebd3ec71b79d128a', class: "sd-date-picker", ref: el => {
+        return (hAsync("sd-field", { key: '35d821e9a21a09e4b2dc0d47f9a95d895c4f9dc4', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: '21fe3c0ab5dff10265139111de741216fb06e4e4', class: "sd-date-picker", ref: el => {
                 this.triggerRef = el;
-            } }, hAsync("sd-date-picker-trigger", { key: 'b9bed57fa4a2b06b004ec5a1b723ed5af25fda19', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: '776e0ce183edd9c7903ce1a75208addc47c20408', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, hAsync("sd-calendar", { key: 'f86b502f6b17ee9ff262c1a64e1b0e24defc1660', value: this.value, selectable: this.selectable, onSdUpdate: this.handleSelect, onSdViewChange: this.handleViewChange })))));
+            } }, hAsync("sd-date-picker-trigger", { key: 'b9fd9b90afa512aefdd4b227c66d0b4660b69318', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: 'b6e439d2b507922cc2e345fe1fba856d77441cbc', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, hAsync("sd-calendar", { key: 'ae09060fec5542b9e30d051133f4bca3c772f5d9', elevated: true, value: this.value, selectable: this.selectable, onSdUpdate: this.handleSelect, onSdViewChange: this.handleViewChange })))));
     }
     static get watchers() { return {
         "isOpen": [{
@@ -8049,7 +8286,7 @@ class SdDatePickerTrigger {
                 ? DATEPICKER_COLORS.icon.disabled
                 : DATEPICKER_COLORS.icon.default,
         };
-        return (hAsync("div", { key: '57a23626b1a392be20dccead71b792590fab61b8', role: "button", tabindex: this.disabled ? -1 : 0, class: {
+        return (hAsync("div", { key: 'df53dd75ead71167d7089daab5718c7ff1c990ae', role: "button", tabindex: this.disabled ? -1 : 0, class: {
                 'sd-date-picker-trigger': true,
                 'sd-date-picker-trigger--disabled': this.disabled,
             }, style: cssVars, onClick: this.handleClick, onKeyDown: e => {
@@ -8057,7 +8294,7 @@ class SdDatePickerTrigger {
                     e.preventDefault();
                     this.handleClick();
                 }
-            } }, hAsync("sd-icon", { key: 'd4bb58eb97f9f2b98c27315547a85b019530ce5e', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), hAsync("span", { key: '25222882fa966eb5d6ead15e62b65af26586afbd', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
+            } }, hAsync("sd-icon", { key: '76f41c99e1695eaa191cbc81ae057e65cb78e955', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), hAsync("span", { key: '4e1a4b2b41737f05dc1a4e642d317f5fc93bf9b2', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
     }
     static get style() { return sdDatePickerTriggerCss(); }
     static get cmpMeta() { return {
@@ -8477,7 +8714,7 @@ class SdDateRangePickerCalendar {
             '--range-panel-gap': `${RANGE_LAYOUT.panelGap}px`,
             '--range-divider': RANGE_LAYOUT.divider,
         };
-        return (hAsync(Fragment, { key: 'f871d59077f63aa2f7d1bbe857a9ff095331c82d' }, hAsync("div", { key: '47f4782b315450f07bccec8697d8e98a83e44faf', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), hAsync("div", { key: 'cf0eb07920b298f2fce001cc8246d51e1174c27d', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), hAsync("span", { key: 'e1d060092eb3b73c890bf0d62f6485ca2a09e187', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
+        return (hAsync(Fragment, { key: 'b4082936889d6bed77917d9b06aafa3c80d413a7' }, hAsync("div", { key: 'baf10fa376bf32982816258f950edf65d5622a99', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), hAsync("div", { key: 'bacc88f756b64f4382b1c8c648269bb2c233dc54', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), hAsync("span", { key: 'dcebf3cd120e2e606784c365c309d4c48296a5ae', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
     }
     static get watchers() { return {
         "value": [{
@@ -8833,12 +9070,12 @@ class SdDropdownButton extends BaseDropdownEvent {
                     if (!item.disabled) {
                         this.itemIndex = index;
                     }
-                } }, item.icon && (hAsync("sd-icon", { class: "sd-dropdown-button__menu-item-icon", name: item.icon, size: 12, color: "var(--sd-dropdown-button-menu-item-current-color)" })), hAsync("span", { class: "sd-dropdown-button__menu-item-label", innerHTML: item.label })));
+                } }, item.icon && (hAsync("sd-icon", { class: "sd-dropdown-button__menu-item-icon", name: item.icon, size: 12, color: "var(--sd-dropdown-button-menu-item-current-color)" })), hAsync("span", { class: "sd-dropdown-button__menu-item-label", innerHTML: sanitizeInlineHtml(item.label) })));
         })))));
     }
     render() {
         const { config, preset } = this.resolvedConfig;
-        return (hAsync("div", { key: 'ac9063bf34834043d2c786b81fa487f004d54462', class: "sd-dropdown-button" }, hAsync("button", { key: 'cff62ed70794e18627b03c22d54accab9248b235', type: "button", class: this.getTriggerClasses(preset, config.size, this.disabled, this.isOpen), disabled: this.disabled, "aria-haspopup": "menu", "aria-expanded": String(this.isOpen), onClick: this.toggleDropdown, ref: el => (this.triggerRef = el), style: {
+        return (hAsync("div", { key: '69cc705c92386162bfe3eaaec92d60c5daedd673', class: "sd-dropdown-button" }, hAsync("button", { key: 'c054cd7f979a5b5d7e6266fc098722b13f6419f6', type: "button", class: this.getTriggerClasses(preset, config.size, this.disabled, this.isOpen), disabled: this.disabled, "aria-haspopup": "menu", "aria-expanded": String(this.isOpen), onClick: this.toggleDropdown, ref: el => (this.triggerRef = el), style: {
                 '--sd-dropdown-button-bg': config.color,
                 '--sd-dropdown-button-bg-hover': PRESET_HOVER_BACKGROUNDS[preset],
                 '--sd-dropdown-button-border': PRESET_BORDER_COLORS[preset],
@@ -8848,10 +9085,10 @@ class SdDropdownButton extends BaseDropdownEvent {
                 '--sd-dropdown-button-disabled-bg': DROPDOWN_DISABLED_BACKGROUND,
                 '--sd-dropdown-button-disabled-content': DROPDOWN_DISABLED_TEXT,
                 '--sd-dropdown-button-disabled-border': DROPDOWN_DISABLED_BORDER,
-            } }, hAsync("span", { key: '8c3c382c1b23f63be23936cca44175950fd636b8', class: "sd-dropdown-button__trigger-label" }, this.label), hAsync("span", { key: '4b1e74dd6b5c680e07ef3b8391279ef4d9bb750d', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), hAsync("span", { key: '1018c43a428abe211536f4f3f8069b70a7ff1845', class: {
+            } }, hAsync("span", { key: 'de889d149ece2a5856dc37940cc8f8cc612546d7', class: "sd-dropdown-button__trigger-label" }, this.label), hAsync("span", { key: '8ae62fe45e6f292f4269da090adda28c6fd47854', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), hAsync("span", { key: 'c2bc641416469fc2a375f07cb68f36e1c782ba48', class: {
                 'sd-dropdown-button__trigger-icon': true,
                 'sd-dropdown-button__trigger-icon--open': this.isOpen,
-            }, "aria-hidden": "true" }, hAsync("sd-icon", { key: '64248aa427db42e8c8ef65d806befaeab0943059', name: "chevronDown", size: DROPDOWN_CHEVRON_ICON_SIZE[config.size], color: "var(--sd-dropdown-button-current-content)" }))), this.renderDropdown(preset)));
+            }, "aria-hidden": "true" }, hAsync("sd-icon", { key: '46111923f6a95fdd789aa9493a6941218e1fe0f5', name: "chevronDown", size: DROPDOWN_CHEVRON_ICON_SIZE[config.size], color: "var(--sd-dropdown-button-current-content)" }))), this.renderDropdown(preset)));
     }
     static get watchers() { return {
         "isOpen": [{
@@ -9124,20 +9361,20 @@ class SdField {
                     : {}),
             }
             : {};
-        return (hAsync("div", { key: 'fa7d46fb1cdfa572c19fe5014c5f2df6579537fa', class: {
+        return (hAsync("div", { key: '1cc135c77708546f23b699bf337c018f6c4d315e', class: {
                 'sd-field': true,
                 'sd-field--has-label': this.label !== '',
                 'sd-field--has-addon': addon !== '',
                 [this.fieldStatus]: this.fieldStatus !== '',
-            }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars } }, hAsync("div", { key: '92d544710c5f49f17342c2c5d9f4e499e995b3b2', class: "sd-field__wrapper" }, this.renderLabel(this.label), hAsync("div", { key: '1740f6d0c385311cf714b7e64fd7f5513f758c3e', class: "sd-field__main", style: this.width !== '' && this.width !== 0
+            }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars } }, hAsync("div", { key: '506ace23aa27ad50a8ad60dcf6c71a0bdf04d7af', class: "sd-field__wrapper" }, this.renderLabel(this.label), hAsync("div", { key: '41b77a52c21eef8c38127362423378f1b9a6cb77', class: "sd-field__main", style: this.width !== '' && this.width !== 0
                 ? {
                     width: typeof this.width === 'number' ? `${this.width}px` : this.width,
                     flex: 'none',
                 }
-                : {} }, hAsync("div", { key: '1364e46db78dc55b1139035296d2e6f33cb8fbb6', class: {
+                : {} }, hAsync("div", { key: '1f3c5f2009a0d96b8a3544c58b96f7ecc4ddee6b', class: {
                 'sd-field__control': true,
                 'sd-field__control--has-addon': addon !== '',
-            } }, addon && hAsync("div", { key: '638c670ec084e51af7d9ec566c93e00a3d158eef', class: "sd-field__addon" }, addon), hAsync("slot", { key: 'e1b00ee9db0a0e8dade33166dc908183304bc37f' })), this.errorMsg !== '' || this.errorMessage !== '' ? (hAsync("div", { class: "sd-field__error-message" }, this.errorMsg !== '' ? this.errorMsg : this.errorMessage)) : (this.hint !== '' && hAsync("div", { class: "sd-field__hint" }, this.hint))))));
+            } }, addon && hAsync("div", { key: '39a28adaa959b89d3724672910157662e50b35ed', class: "sd-field__addon" }, addon), hAsync("slot", { key: '0c9360e8644df658c389554c13a04bc22985e84d' })), this.errorMsg !== '' || this.errorMessage !== '' ? (hAsync("div", { class: "sd-field__error-message" }, this.errorMsg !== '' ? this.errorMsg : this.errorMessage)) : (this.hint !== '' && hAsync("div", { class: "sd-field__hint" }, this.hint))))));
     }
     renderLabel(label) {
         if (label == null || label === '')
@@ -9623,7 +9860,7 @@ class SdFloatingPopover {
         }
     }
     render() {
-        return hAsync("slot", { key: 'c4543ebf24c83fc67bdda0340adb00f02761b62e' });
+        return hAsync("slot", { key: '5b469964bfbbdf1d40c6d7c88a266d655fe3e029' });
     }
     static get style() { return sdFloatingPortalCss(); }
     static get cmpMeta() { return {
@@ -10110,10 +10347,10 @@ class SdGuide {
         const buttonClasses = ['sd-guide__button', `sd-guide__button--type-${this.type ?? 'tip'}`];
         if (isActive)
             buttonClasses.push('sd-guide__button--active');
-        return (hAsync("div", { key: '9d5ad3049230e61d1aae3cd9270dd84f89fb5b1c', class: "sd-guide", style: this.guideStyle }, hAsync("sd-button", { key: 'ac55b4d96f64695a0fbfedf7bf0e451b7afdc499', ref: el => (this.guideRef = el), class: buttonClasses.join(' '), name: isActive ? 'primary_sm' : 'neutral_outline_sm', label: this.label || defaultLabel, icon: iconName, onSdClick: this.handleClickGuide }), this.popupShow && (hAsync("sd-portal", { key: 'df51b29383f7449720d8700387bb44fbd4dbebba', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, hAsync("div", { key: '265390b48b9d37e9c7f92e19ef124da3faae6590', style: { position: 'absolute', width: '0px', height: '0px' } }, hAsync("div", { key: 'b45c101ac8dd6e4d490661b377979226335defa2', class: "sd-guide__popup", style: {
+        return (hAsync("div", { key: 'ea4f220faf6165f7650360f74a19d9f781b81489', class: "sd-guide", style: this.guideStyle }, hAsync("sd-button", { key: 'c90eaa6cc42a9a2f20b8fc79db16697db0cf2ff2', ref: el => (this.guideRef = el), class: buttonClasses.join(' '), name: isActive ? 'primary_sm' : 'neutral_outline_sm', label: this.label || defaultLabel, icon: iconName, onSdClick: this.handleClickGuide }), this.popupShow && (hAsync("sd-portal", { key: '21f57a739141ffa36f3b799a2688ca5b3c1bd428', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, hAsync("div", { key: '2a803402b120509ef8b6de361f360a7b5b96e9db', style: { position: 'absolute', width: '0px', height: '0px' } }, hAsync("div", { key: '3e591b85ac24ea1db37bdaaf130f983d70ef2f36', class: "sd-guide__popup", style: {
                 ...this.guideStyle,
                 width: this.popupWidth != null ? this.popupWidth + 'px' : '426px',
-            } }, hAsync("sd-ghost-button", { key: 'd91722fedd8cd4f74e673964c90b1840ccfcd8e1', class: "sd-guide__popup__close", icon: "close", ariaLabel: "close", size: "sm", onSdClick: this.closeDropdown }), hAsync("div", { key: 'b7bb7ffa79363939f4b6144d48732e686ec5e365', class: "sd-guide__popup__header" }, hAsync("sd-icon", { key: 'cfe42d9139cdae8a90ce81af3dbc7636dc56b380', name: iconName, size: 24, color: popupIconColor }), hAsync("h3", { key: '9724df2304c13c36e21a6e1ef3be7d4b0f5e5454', class: "sd-guide__popup__title" }, this.popupTitle || defaultLabel)), hAsync("ul", { key: '8f5eec181c32b7d0220963ce57e82e952094ad36', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
+            } }, hAsync("sd-ghost-button", { key: '1aa20f7bd3a1ba45c4932a67a8c1e67d6e068702', class: "sd-guide__popup__close", icon: "close", ariaLabel: "close", size: "sm", onSdClick: this.closeDropdown }), hAsync("div", { key: 'e48378d1731e0b9fcd5990cb908ae3af236d0346', class: "sd-guide__popup__header" }, hAsync("sd-icon", { key: 'c8c71c7c2f0fdb25e3741415c1f1fae1a8d4d3d2', name: iconName, size: 24, color: popupIconColor }), hAsync("h3", { key: '4996225c27fbeae4fd9b4d68d6e493d87225d427', class: "sd-guide__popup__title" }, this.popupTitle || defaultLabel)), hAsync("ul", { key: 'edb2d35594b47f19f2e847ba546fac0fc19b21b4', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
     }
     // 현재 2depth까지만 스타일 적용
     renderListItem(message, depth = 0) {
@@ -10128,7 +10365,7 @@ class SdGuide {
         return listItems;
     }
     renderLi = (message, depth) => {
-        return (hAsync("li", { class: `sd-guide__popup__list__item sd-guide__popup__list__item--depth-${depth}` }, hAsync("p", { innerHTML: message })));
+        return (hAsync("li", { class: `sd-guide__popup__list__item sd-guide__popup__list__item--depth-${depth}` }, hAsync("p", { innerHTML: sanitizeInlineHtml(message) })));
     };
     static get style() { return sdGuideCss(); }
     static get cmpMeta() { return {
@@ -10614,12 +10851,12 @@ class SdInput {
             '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
             '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
         };
-        return (hAsync("sd-field", { key: 'c24b885ef9ca21fb69c1b67f2619896d4bd56155', 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, readonly: this.readonly, 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 }, hAsync("label", { key: '45a5669d2c8d7d571f50152f81139cedc8a2db3b', class: "sd-input__content" }, hAsync("slot", { key: 'c1d032ee22344725e1d041c2351dd7785a8b6b5d', name: "prefix" }), hAsync("input", { key: '8433abb36e666a7546870a9e3b77325e9c39551a', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : (this.type ?? 'text'), value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), hAsync("slot", { key: '9f5eef3c48f88b90be2c821b1d43e2e9a9f91441', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && !this.readonly && (hAsync("sd-ghost-button", { key: '62ab3e8e02a9db5424e573542dc10bde5a9fc4b8', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
+        return (hAsync("sd-field", { key: 'e6e58ebc18e458f1d52a3f8afcd0892bfd8ffa45', 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, readonly: this.readonly, 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 }, hAsync("label", { key: '9bdcdf6e515a57e9cd72e263bcd8d2c59aac22c9', class: "sd-input__content" }, hAsync("slot", { key: '0273119e456386ba23c361ef1e826b4d2d9bf1be', name: "prefix" }), hAsync("input", { key: 'ad61c8ff1372f6163f2e742cf31884363e8fd31f', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : (this.type ?? 'text'), value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), hAsync("slot", { key: 'e68578946f23fff0e4abc3f9919d12b3d624b5f8', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && !this.readonly && (hAsync("sd-ghost-button", { key: '3c64ce859d71dbd57800a4a34b6a09696f90ff60', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
                 if (this.disabled || this.readonly)
                     return;
                 this.internalValue = '';
                 await this.formField?.sdValidate();
-            } })), this.type === 'password' && (hAsync("sd-ghost-button", { key: '0a16665e73a674c7208c7f488b50442c353e3fde', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled || this.readonly, class: "sd-input__password-icon", onClick: () => {
+            } })), this.type === 'password' && (hAsync("sd-ghost-button", { key: 'db4c66f0b3e91d780262ec7320fc15ffc32e622d', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled || this.readonly, class: "sd-input__password-icon", onClick: () => {
                 if (this.disabled || this.readonly)
                     return;
                 this.passwordVisible = !this.passwordVisible;
@@ -11030,7 +11267,7 @@ class SdLinearProgress {
             clipPath: `inset(0 ${100 - this.clampedValue}% 0 0)`,
         };
         const valueText = `${Math.round(this.clampedValue)}%`;
-        return (hAsync(Host, { key: '6fb48662dc2c921237a387c748bbc529ba5ea77f', style: hostStyle }, hAsync("div", { key: 'e8fa0fdf4ac3ceeaae74fff6194c1f66b9138bc7', class: 'sd-linear-progress__track' }, hAsync("div", { key: '7016850214e73fc6a9079e8f54674976d0320adf', class: 'sd-linear-progress__fill', style: fillStyle }), !this.indeterminate && (hAsync("span", { key: '154b18f54d79ddbacf720370dc9ace94508c6667', class: 'sd-linear-progress__value sd-linear-progress__value--on-track' }, valueText)), !this.indeterminate && (hAsync("span", { key: '555e41d961ad7d061ac71347e998641d104f499d', class: 'sd-linear-progress__value sd-linear-progress__value--on-fill', style: valueOnFillStyle }, valueText))), this.label && hAsync("span", { key: 'f90f3df3b959aee549fab33a62a85d6df6ba8410', class: 'sd-linear-progress__label' }, this.label)));
+        return (hAsync(Host, { key: 'ae56f969b9d4cd6e6e4d697d919ad122e2e4dad7', style: hostStyle }, hAsync("div", { key: '86af10d7d1e6e343700a1c161745599ec863b3d7', class: 'sd-linear-progress__track' }, hAsync("div", { key: '46d5dfe06e82facc5dc83977584bc93970b7fd28', class: 'sd-linear-progress__fill', style: fillStyle }), !this.indeterminate && (hAsync("span", { key: 'd1ae1220a482c50bc770a22ccbc45ccb66ebfc27', class: 'sd-linear-progress__value sd-linear-progress__value--on-track' }, valueText)), !this.indeterminate && (hAsync("span", { key: '39bc3af718e0797c5e06cda62ee8a6047f303a34', class: 'sd-linear-progress__value sd-linear-progress__value--on-fill', style: valueOnFillStyle }, valueText))), this.label && hAsync("span", { key: '944ca6d50f6588894e97265a8ef0484f3e676981', class: 'sd-linear-progress__label' }, this.label)));
     }
     static get style() { return sdLinearProgressCss(); }
     static get cmpMeta() { return {
@@ -11064,10 +11301,10 @@ class SdLoadingContainer {
         this.visible = false;
     }
     render() {
-        return (hAsync("div", { key: '08675a9dc0b1c11c42fb65a414f0fed88d03f1b0', class: {
+        return (hAsync("div", { key: '0b6c91593d615ac39f8a4fc30df8466969ae4d9b', class: {
                 'sd-loading-container': true,
                 'sd-loading-container--visible': this.visible,
-            }, "aria-hidden": this.visible ? 'false' : 'true' }, hAsync("div", { key: '4a10e9009d824bef1bf2f9930941931dc1fef43a', class: "sd-loading-container__backdrop" }), hAsync("div", { key: '88edd1c19f5d22057e1e14f1e6bd10e23f45ec7b', class: "sd-loading-container__content" }, hAsync("sd-circle-progress", { key: 'b9c67678d799e429ec6cb2d3094da7bcc4cea150', indeterminate: true, type: "inverse" }), this.message && (hAsync("p", { key: 'ce016465e9d8b20f2121e8846bff75bbad5d7d94', class: "sd-loading-container__message" }, this.message)))));
+            }, "aria-hidden": this.visible ? 'false' : 'true' }, hAsync("div", { key: 'de41bd4fe1c824c9517d000b91abb817ea58e90c', class: "sd-loading-container__backdrop" }), hAsync("div", { key: '4de64a1540a0af9c955bbea5d4c83c129e6846ea', class: "sd-loading-container__content" }, hAsync("sd-circle-progress", { key: 'ae2955bc1d40123f06e7c9e107afe4b46c3b0175', indeterminate: true, type: "inverse" }), this.message && (hAsync("p", { key: '6c58c3fd4074edd48cdd0d21eef15c49c94626db', class: "sd-loading-container__message" }, this.message)))));
     }
     static get style() { return sdLoadingContainerCss(); }
     static get cmpMeta() { return {
@@ -11163,7 +11400,7 @@ class SdLoadingModal {
             '--sd-loading-modal-width': this.toCssSize(this.width) ?? `${LOADING_MODAL_LAYOUT.minWidth}px`,
             '--sd-loading-modal-height': this.toCssSize(this.height) ?? `${LOADING_MODAL_LAYOUT.minHeight}px`,
         };
-        return (hAsync(Host, { key: '3d792e07772b93de139fa505f061004b037ed05b', style: hostStyle }, hAsync("div", { key: '8b63d47c502bdd66f893a484c4af36d2e8302081', class: "sd-loading-modal" }, hAsync("div", { key: '5b35a93e1aed2e8d9f5eebfcbe0222c4f38b5536', class: "sd-loading-modal__content" }, this.resolvedState === 'loading' ? (hAsync("sd-circle-progress", { indeterminate: true })) : (hAsync("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), hAsync("div", { key: '591bae1563f4b5c5dc8bce22161d99929fb18ce5', class: "sd-loading-modal__message-wrapper" }, Array.isArray(this.resolvedMessage) ? (this.resolvedMessage.map(message => (hAsync("p", { class: "sd-loading-modal__message" }, message)))) : (hAsync("p", { class: "sd-loading-modal__message" }, this.resolvedMessage))), this.useButton && (hAsync("div", { key: '577acd55fb35229459990f7f1ca4f710c26c51d4', class: "sd-loading-modal__button" }, hAsync("sd-button", { key: 'cda4f1b9a8bee1897efb53671c0f715858377ba7', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
+        return (hAsync(Host, { key: 'e4b95f8fcd666e0b616d193c40f7b57313527a78', style: hostStyle }, hAsync("div", { key: '397f63795ab8523cb41a989c7fc0e2187ceb3d18', class: "sd-loading-modal" }, hAsync("div", { key: '1c2f6f16dbc8fe3b76db29707602b3df6de1380e', class: "sd-loading-modal__content" }, this.resolvedState === 'loading' ? (hAsync("sd-circle-progress", { indeterminate: true })) : (hAsync("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), hAsync("div", { key: '439302e28cd4843f86f2060c66fe3e5c358ec379', class: "sd-loading-modal__message-wrapper" }, Array.isArray(this.resolvedMessage) ? (this.resolvedMessage.map(message => (hAsync("p", { class: "sd-loading-modal__message" }, message)))) : (hAsync("p", { class: "sd-loading-modal__message" }, this.resolvedMessage))), this.useButton && (hAsync("div", { key: 'a6facf71c52d242ff521adbf7f9161c51431cf9d', class: "sd-loading-modal__button" }, hAsync("sd-button", { key: '26d66b9ccf569bbf7bd9d3819fb0380eced791a2', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
     }
     static get style() { return sdLoadingModalCss(); }
     static get cmpMeta() { return {
@@ -11954,15 +12191,15 @@ class SdNumberInput {
             '--sd-textinput-input-hint-typography-line-height': `${NUMBER_INPUT_HINT.typography.lineHeight}px`,
             '--sd-textinput-input-contents-gap': `${NUMBER_INPUT_CONTENTS_GAP}px`,
         };
-        return (hAsync("sd-field", { key: '3ed260707f7e1b1a88d1407bb4b3c1965b302bcf', 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, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: '889cd4055b46e0727aed2b78f2a8bbeeca88cfed', class: {
+        return (hAsync("sd-field", { key: 'b32943cd55dad7d6bb4fc1a18812360c2ab01a83', 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, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: '050395b8ab3bd77ff5f786b3de182b7a35b8b01f', class: {
                 'sd-number-input__content': true,
                 'sd-number-input__content--no-stepper': !this.useButton,
-            } }, this.useButton && (hAsync("button", { key: '5213f04a1db8a779762ae41672fd016388a06aa7', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, hAsync("sd-icon", { key: '76910ba2b46a78eb2e4aaf7241eeb7aa1223c92a', name: "minus", size: iconSize, color: this.isDecrementDisabled()
+            } }, this.useButton && (hAsync("button", { key: 'e76188a1f1f76450227328854ee3048d7b2b9e85', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, hAsync("sd-icon", { key: '544e5a41790302df564ca0a3e83e2f9052c3f290', name: "minus", size: iconSize, color: this.isDecrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
-                : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && hAsync("span", { key: '273b809ff5bd5ebb2e8cd09a9df3f6f84167aeb2', class: "sd-number-input__prefix" }, this.inputPrefix), hAsync("input", { key: '72917348a5ded30f5d8c4066af8e56d50de67db0', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__native ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
+                : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && hAsync("span", { key: '34e8c9af864332b8614e3c9a5d2cf94310a2555d', class: "sd-number-input__prefix" }, this.inputPrefix), hAsync("input", { key: '07e0484ad473e010d9ba8f971875bd463585ca47', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__native ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
                 textAlign: this.useButton ? 'center' : 'right',
                 ...this.inputStyle,
-            } }), this.inputSuffix && hAsync("span", { key: '232aa43852396a617e49403d30b4514aaf896740', class: "sd-number-input__suffix" }, this.inputSuffix), this.useButton && (hAsync("button", { key: 'f9dab4cd21deb933e72a8ad906cafbbf1cae1e5a', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, hAsync("sd-icon", { key: '73208aca8e5e9be431ba03b4755053c74ec70296', name: "add", size: iconSize, color: this.isIncrementDisabled()
+            } }), this.inputSuffix && hAsync("span", { key: '990a3e1dc5cfeaa8e1823391e0bb0218ce4cfb02', class: "sd-number-input__suffix" }, this.inputSuffix), this.useButton && (hAsync("button", { key: 'd2496ab718cf44fd658c871086d8e67c66380668', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, hAsync("sd-icon", { key: 'fcab0109e01a1c683bf09349cb699534eaa1a8d1', name: "add", size: iconSize, color: this.isIncrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
                 : NUMBER_INPUT_STEPPER.icon.default }))))));
     }
@@ -12169,13 +12406,13 @@ class SdPagination {
             '--sd-pagination-bg-selected': PAGINATION_COLORS.bgSelected,
             '--sd-pagination-item-width': `${this.buttonWidth}px`,
         };
-        return (hAsync("div", { key: '251d9b3bcff3cf985d62b1a8717f622d209b3fa1', class: {
+        return (hAsync("div", { key: 'b16a4c0ff75913e80fdb9a539d8afb714931a531', class: {
                 'sd-pagination': true,
                 'sd-pagination--simple': this.simple,
-            }, style: cssVars }, hAsync("div", { key: 'd143917676ccd97c1f4fc8e7220857d543efa5fd', class: "sd-pagination__group sd-pagination__group--prev" }, this.renderPrevButtons()), this.simple ? (hAsync("div", { class: "sd-pagination__info" }, hAsync("span", { class: "sd-pagination__current" }, this.currentPage), hAsync("span", { class: "sd-pagination__divider" }, "/"), hAsync("span", { class: "sd-pagination__last" }, this.lastPage))) : (hAsync("div", { class: "sd-pagination__numbers" }, this.pageNumbers.map(n => (hAsync("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
+            }, style: cssVars }, hAsync("div", { key: '42d019164c409d09d13b94845c9ee99ece41a8f3', class: "sd-pagination__group sd-pagination__group--prev" }, this.renderPrevButtons()), this.simple ? (hAsync("div", { class: "sd-pagination__info" }, hAsync("span", { class: "sd-pagination__current" }, this.currentPage), hAsync("span", { class: "sd-pagination__divider" }, "/"), hAsync("span", { class: "sd-pagination__last" }, this.lastPage))) : (hAsync("div", { class: "sd-pagination__numbers" }, this.pageNumbers.map(n => (hAsync("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
                 'sd-pagination__item': true,
                 'sd-pagination__item--selected': this.currentPage === n,
-            }, onClick: () => this.handlePageChange(n) }, n))))), hAsync("div", { key: 'e58053cef21c57d88f5b1357101507418b2db002', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n))))), hAsync("div", { key: '9695ce3aaede66529547151800fede0f5413e7d8', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
     }
     static get style() { return sdPaginationCss(); }
     static get cmpMeta() { return {
@@ -12326,6 +12563,7 @@ var popupTokens = {
 };
 
 const { popup } = popupTokens;
+const shadowSpreadMd = systemTokens.shadow.spread.md;
 const POPUP_LAYOUT = {
     bodyBg: popup.bg,
 };
@@ -12342,7 +12580,6 @@ const POPUP_HEADER = {
     fontWeight: popup.header.typography.fontWeight,
     fontSize: Number(popup.header.typography.fontSize),
     lineHeight: Number(popup.header.typography.lineHeight),
-    // TODO: 토큰 반영 후 교체
     height: 50,
     paddingX: 16,
     paddingY: 10,
@@ -12352,11 +12589,9 @@ const POPUP_FOOTER = {
     paddingX: Number(popup.footer.paddingX),
     paddingY: Number(popup.footer.paddingY),
     gap: Number(popup.footer.gap),
-    // TODO: 토큰 반영 후 교체
     height: 52,
     slotHeight: 36,
-    // TODO: shadow/spread/md 토큰 반영 후 교체
-    shadow: '0 -2px 8px 0 rgba(0, 0, 0, 0.08)',
+    shadow: `${shadowSpreadMd.x}px ${shadowSpreadMd.y}px ${shadowSpreadMd.blur}px ${shadowSpreadMd.spread}px ${shadowSpreadMd.color}`,
 };
 
 const sdPopupCss = () => `sd-popup{display:block;width:100%;height:100%}sd-popup .sd-popup{display:flex;flex-direction:column;width:100%;height:100%;background:var(--sd-popup-bg);overflow:hidden;box-sizing:border-box}sd-popup .sd-popup__header{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:100%;height:var(--sd-popup-header-height);padding:var(--sd-popup-header-padding-y) var(--sd-popup-header-padding-x);background:var(--sd-popup-header-bg);box-sizing:border-box}sd-popup .sd-popup__title{margin:0;color:var(--sd-popup-header-title-color);font-family:var(--sd-popup-header-font-family);font-weight:var(--sd-popup-header-font-weight);font-size:var(--sd-popup-header-font-size);line-height:var(--sd-popup-header-line-height);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}sd-popup .sd-popup__body{flex:1 1 auto;min-height:0;overflow:auto}sd-popup .sd-popup__footer{display:flex;align-items:center;flex-shrink:0;width:100%;height:var(--sd-popup-footer-height);padding:var(--sd-popup-footer-padding-y) var(--sd-popup-footer-padding-x);gap:var(--sd-popup-footer-gap);background:var(--sd-popup-footer-bg);box-shadow:var(--sd-popup-footer-shadow);box-sizing:border-box;position:relative;z-index:1}sd-popup .sd-popup__footer-slot{display:flex;align-items:center;height:var(--sd-popup-footer-slot-height)}sd-popup .sd-popup__footer-slot--left{justify-content:flex-start;flex:1 1 auto;min-width:0}sd-popup .sd-popup__footer-slot:empty{display:none}sd-popup .sd-popup__submit{flex-shrink:0;margin-left:auto}`;
@@ -12372,6 +12607,8 @@ class SdPopup {
     }
     popupTitle = '';
     type = 'default';
+    // 기본 footer 표시가 자연스러운 UX. prop 이름 변경(hideFooter 등)은 public API breaking 이라 별도 이슈로 분리.
+    // eslint-disable-next-line stencil/ban-default-true
     useFooter = true;
     submitButtonProps;
     submit;
@@ -12399,7 +12636,7 @@ class SdPopup {
             ...DEFAULT_SUBMIT_BUTTON_PROPS,
             ...this.submitButtonProps,
         };
-        return (hAsync("div", { key: '0c9f1cd261fa533044309342cfbaae8f5b87ae31', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, hAsync("header", { key: 'd8aa4db4d150419f5653fd93e204cc4bd865c35e', class: "sd-popup__header" }, hAsync("h2", { key: 'fce95fce48a91c3a2b60f0b1169113cd2ff157d6', class: "sd-popup__title" }, this.popupTitle)), hAsync("div", { key: 'c730895828c14a6a80fe6bebecb08f386cc84a78', class: "sd-popup__body" }, hAsync("slot", { key: 'f3402c32fdc55794fb2c877a41c9f73e3c0d6d9f' })), this.useFooter && (hAsync("footer", { key: '4b04ebc0dccc07dd9466c06c940d3444346603ba', class: "sd-popup__footer" }, hAsync("div", { key: '78b35347121652d647e3601e6c6164e8e21288ca', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, hAsync("slot", { key: '98836c28e7de97466cf4285c0458a8709c3788bb', name: "footer-left" })), hAsync("sd-button", { key: 'd9ab45765c66a2f86aec2df9fc056fa1f4605259', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
+        return (hAsync("div", { key: 'fe8ca033482913b9c8c7a62963d81d8c5c86c724', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, hAsync("header", { key: 'b27afc04689384abc8cdd45e67e4765c3fef82e9', class: "sd-popup__header" }, hAsync("h2", { key: '15d6cf170e483bfdea861aa7a218df8379d83be2', class: "sd-popup__title" }, this.popupTitle)), hAsync("div", { key: 'daf70c8196ad95b214c978166f547a2a2fa56814', class: "sd-popup__body" }, hAsync("slot", { key: 'f8f4a9f93b88404993e2c8f7155abe4756f9bdba' })), this.useFooter && (hAsync("footer", { key: '38ff051abd11378ad0a83b2d634985d689e0dc27', class: "sd-popup__footer" }, hAsync("div", { key: '149a3de3d7ab0703d9cec41b35af23a6eebd67de', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, hAsync("slot", { key: '2507cece435fa3e00ea698bebf6c980fea081521', name: "footer-left" })), hAsync("sd-button", { key: '5ae38a07e39437d6f3b8aa111258d60aa044152d', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
     }
     static get style() { return sdPopupCss(); }
     static get cmpMeta() { return {
@@ -12642,7 +12879,7 @@ class SdPortal {
         this.close.emit();
     }
     render() {
-        return hAsync("slot", { key: '1f46253fe0f70fda84643e8d3025c1fd47090f5c' });
+        return hAsync("slot", { key: 'a227fa8a0639de7fd3a014762998692151284f87' });
     }
     static get watchers() { return {
         "open": [{
@@ -13320,15 +13557,15 @@ class SdSelect {
                 this.closeDropdown();
             },
         };
-        return (hAsync("sd-field", { key: 'c433e21047632ae1e7901e11f6f9d83070f8d83c', 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, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
+        return (hAsync("sd-field", { key: '21849c194994f51c36b2fa5eafd606230b21e365', 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, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
                 this.hovered = true;
             }, onMouseLeave: () => {
                 this.hovered = false;
-            } }, hAsync("div", { key: 'f04f2f331c27745035c35d96d5262398065589a8', class: "sd-select", ref: el => {
+            } }, hAsync("div", { key: 'bcba54ed8d325a540d14af14c9b3bf332f631ce8', class: "sd-select", ref: el => {
                 this.triggerRef = el;
-            } }, hAsync("sd-select-trigger", { key: 'b66e83ff248618c815b155f27445f3da9e91361b', ref: el => {
+            } }, hAsync("sd-select-trigger", { key: '72e361ca6e162eee56b82398902e89226e980d3d', ref: el => {
                 this.triggerComponentRef = el;
-            }, displayText: this.displayText, placeholder: this.placeholder ?? '선택', disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: 'bd5b46d8e4849d235e39a9d9cfc549fdbe260076', ...portalProps }, hAsync("sd-select-listbox", { key: '81266da14ee4e59b4cedd4b364c18fea4d3c4f7f', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, useSearch: this.useSearch, useSelectAll: this.useSelectAll, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
+            }, displayText: this.displayText, placeholder: this.placeholder ?? '선택', disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: '0ff55857cbc146db57caa53d560752d0fae8413b', ...portalProps }, hAsync("sd-select-listbox", { key: '20c103309dc7f2eaf4bee6abae271606b64ace8b', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, useSearch: this.useSearch, useSelectAll: this.useSelectAll, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
     }
     static get watchers() { return {
         "isOpen": [{
@@ -13620,7 +13857,7 @@ class SdSelectListItem {
         return (
         // 키보드 네비게이션은 부모 listbox 의 ArrowUp/Down + Enter 가 담당. 항목 자체는 role=option, tabindex=-1 으로 표시.
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-        hAsync("div", { key: '93e8bf04e69d9e6f066952570ed06076bdd17e57', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
+        hAsync("div", { key: '37189acb2854061fd120d662050fddddb396170c', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
                 'sd-select-list-item': true,
                 'sd-select-list-item--group': isGroup,
                 'sd-select-list-item--depth1-group': isDepth1Group,
@@ -13630,7 +13867,7 @@ class SdSelectListItem {
                 'sd-select-list-item--focused': this.isFocused,
                 'sd-select-list-item--selectable': this.isSelectable && !this.option.disabled,
                 'sd-select-list-item--disabled': !!this.option.disabled,
-            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (hAsync("sd-checkbox", { key: '2b6a17361c2e5c65c6dac21895ef397cadeec9a3', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, inverse: this.isFocused && this.isSelected !== false, class: "sd-select-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), hAsync("span", { key: '158e45d52b3b5394f7c4e2ffff97d23f83ce5e49', class: "sd-select-list-item__label" }, this.option.label), this.countInfo && (hAsync("span", { key: '48adac9df92cd19f5e2b39bed828a9ad7c22c945', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
+            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (hAsync("sd-checkbox", { key: '7cc43ed0a1c4a2019be3a7f6f60de1c7f03a6148', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, inverse: this.isFocused && this.isSelected !== false, class: "sd-select-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), hAsync("span", { key: '331c7d1ded82834521f3292dc739612f24d7209e', class: "sd-select-list-item__label" }, this.option.label), this.countInfo && (hAsync("span", { key: '80b34cd1a6e67719d50c62afedf23c0903259c78', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
     }
     static get style() { return sdSelectListItemCss(); }
     static get cmpMeta() { return {
@@ -13698,15 +13935,15 @@ class SdSelectListItemSearch {
             clearTimeout(this.debounceTimer);
     }
     render() {
-        return (hAsync("div", { key: '0b8e55a2f39d72bc6fc5c7d8c6262c9fffb52ba7', class: {
+        return (hAsync("div", { key: 'a8b62b61ec6a0afd69de50b8df02e57de2a04c8c', class: {
                 'sd-select-list-item-search': true,
                 'sd-select-list-item-search--scrolled': this.isScrolled,
-            } }, hAsync("div", { key: '30c4f5d6c8002579da129cebb06c026c278fb555', class: "sd-select-list-item-search__inner" }, hAsync("sd-icon", { key: 'be9076a1fd6d7fd9a1990fd9e32aebd04c1bc4b4', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), hAsync("input", { key: 'c9400184f607d0385e5e8c25615e1a955256c6f4', ref: el => {
+            } }, hAsync("div", { key: '2b04a677a8b4e3212eff83c07609a4b7d89799c1', class: "sd-select-list-item-search__inner" }, hAsync("sd-icon", { key: 'c0c51d4b0150fee7151c7e2bcc5aaf8428d31043', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), hAsync("input", { key: '85d2309cbb037851053c34baeca5f59c690c0881', ref: el => {
                 this.inputEl = el;
-            }, type: "text", class: "sd-select-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), hAsync("button", { key: 'dcb18eff068dea3fcb9144c4dfd4500806f68753', type: "button", class: {
+            }, type: "text", class: "sd-select-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), hAsync("button", { key: '564b6ae6dbab1fa5f4f6d977fa9fd52bb9114873', type: "button", class: {
                 'sd-select-list-item-search__clear': true,
                 'sd-select-list-item-search__clear--hidden': this.searchText === '',
-            }, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, hAsync("sd-icon", { key: 'beb2cf23258aa1eaff2c9fdb63dae99570691af1', name: "close", size: 12, color: "#888888" })))));
+            }, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, hAsync("sd-icon", { key: '8ae0f92f8762681cc4c2a6fc11340498b8b01c98', name: "close", size: 12, color: "#888888" })))));
     }
     static get style() { return sdSelectListItemSearchCss(); }
     static get cmpMeta() { return {
@@ -14077,9 +14314,9 @@ class SdSelectListbox {
             '--listbox-max-height': this.maxHeight ?? '260px',
             '--listbox-radius': `${LIST_BOX_LAYOUT.radius}px`,
         };
-        return (hAsync("div", { key: '4173255a866459bf0aeb98d517263d12f1c39fa5', class: "sd-select-listbox", style: cssVars }, this.showSearch && (hAsync("sd-select-list-item-search", { key: '79e7d48d7234ebfd32d3cd242822dfa93a73c151', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), hAsync("div", { key: '22981c1e049d0d526af06bb5b563de5130c14477', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
+        return (hAsync("div", { key: '1834dbfee219988e78ad47d3640ebafb9983298c', class: "sd-select-listbox", style: cssVars }, this.showSearch && (hAsync("sd-select-list-item-search", { key: '28fbfce57184f2a8c090d628c5b33cecf9337c3c', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), hAsync("div", { key: 'b7430d72cdb26cad59b226af8cf98d796645390c', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
                 this.listEl = el;
-            } }, this.showSelectAll && (hAsync("sd-select-list-item", { key: '7acd37c5663bb101d6853cbd6629a78d402d6cde', option: SdSelectListbox.SELECT_ALL_OPTION, depth: 1, isSelected: this.selectAllState, isFocused: this.isOptionFocused(SdSelectListbox.SELECT_ALL_OPTION), useCheckbox: true, onSdListItemClick: this.handleSelectAllClick, onMouseEnter: () => this.handleOptionHover(SdSelectListbox.SELECT_ALL_OPTION) })), this.isEmpty ? (hAsync("div", { class: "sd-select-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (hAsync("sd-select-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) })))))));
+            } }, this.showSelectAll && (hAsync("sd-select-list-item", { key: '8f159cdef838c0f39bb7aad1717a88c04c75dbda', option: SdSelectListbox.SELECT_ALL_OPTION, depth: 1, isSelected: this.selectAllState, isFocused: this.isOptionFocused(SdSelectListbox.SELECT_ALL_OPTION), useCheckbox: true, onSdListItemClick: this.handleSelectAllClick, onMouseEnter: () => this.handleOptionHover(SdSelectListbox.SELECT_ALL_OPTION) })), this.isEmpty ? (hAsync("div", { class: "sd-select-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (hAsync("sd-select-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) })))))));
     }
     static get watchers() { return {
         "searchKeyword": [{
@@ -14160,7 +14397,7 @@ class SdSelectTrigger {
                 ? SELECT_COLORS.icon.disabled
                 : SELECT_COLORS.icon.default,
         };
-        return (hAsync("div", { key: '6694f35a396f368d5df9860db30d817beddb8bec', ref: el => {
+        return (hAsync("div", { key: '645d8e7ff5065664a3510b127628cb54d97fb613', ref: el => {
                 this.triggerEl = el;
             }, role: "button", "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', tabindex: this.disabled ? -1 : 0, class: {
                 'sd-select-trigger': true,
@@ -14171,7 +14408,7 @@ class SdSelectTrigger {
                     e.preventDefault();
                     this.handleClick();
                 }
-            }, onFocus: this.handleFocus, onBlur: this.handleBlur }, hAsync("div", { key: 'd8ff247ca362a8fc3677d9803261343a1e891298', class: "sd-select-trigger__content" }, hAsync("span", { key: 'cd81a7c7c135372aad80fa9391b160337632643c', class: "sd-select-trigger__text" }, hasValue ? this.displayText : (this.placeholder ?? '선택')), hAsync("sd-icon", { key: '838c12e2a9ce06036eee766ffd2f88f3215b8420', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
+            }, onFocus: this.handleFocus, onBlur: this.handleBlur }, hAsync("div", { key: '515dda6d98ad09b0854e0ef0e04f0bf8c9592d1a', class: "sd-select-trigger__content" }, hAsync("span", { key: '9d92577675d0c7e6ba32174ae0cdd754788dbccb', class: "sd-select-trigger__text" }, hasValue ? this.displayText : (this.placeholder ?? '선택')), hAsync("sd-icon", { key: '347532a73d9ff2929d9f716fb8d2e314af7d7069', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
                 'sd-select-trigger__icon': true,
                 'sd-select-trigger__icon--open': this.isOpen,
             } }))));
@@ -14293,7 +14530,7 @@ class SdSwitch {
             '--sd-switch-line-height': `${SWITCH_TYPOGRAPHY.lineHeight}px`,
             '--sd-switch-text-decoration': SWITCH_TYPOGRAPHY.textDecoration,
         };
-        return (hAsync("label", { key: 'ebb195a1bb93ae476b4bf3e697623809d626eed6', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, hAsync("input", { key: 'a6de6298d35c54ad83dc6285b90e67c8d3564d15', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), hAsync("div", { key: '7881f46be572edcfc82888564a7f85ad4207dd8e', class: "sd-switch__track" }, hAsync("div", { key: 'c08c9d5894a6f9ddf3ecdaaa9253628478479043', class: "sd-switch__knob" })), this.label && hAsync("span", { key: '4e01b185502829d8fb647d3eafaaf6565489b2f3', class: "sd-switch__label" }, this.label)));
+        return (hAsync("label", { key: '3d9449733d73dcbd2d7a95505b6afd930a43a114', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, hAsync("input", { key: 'f8d35ea743b5f85697d9d4de8fe915ce2d8f7b56', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), hAsync("div", { key: 'b62a6bfa60c488270184698610337926b688baff', class: "sd-switch__track" }, hAsync("div", { key: 'da7764fe4a4202366fe0a922de687ece121eb73f', class: "sd-switch__knob" })), this.label && hAsync("span", { key: '924c2939f0cb2196ff69be560e1c7f113590c73b', class: "sd-switch__label" }, this.label)));
     }
     static get style() { return sdSwitchCss(); }
     static get cmpMeta() { return {
@@ -14617,6 +14854,10 @@ class SdTable {
         if (this.pagination?.rowsPerPage != null) {
             this.innerRowsPerPage = this.pagination.rowsPerPage;
         }
+        // host element 에 자식 컴포넌트(sd-thead/sd-tbody/sd-tr) 가 직접 접근하는 internal sync helpers 를 monkey-patch.
+        // 28개 메서드 전체를 typed interface 로 노출하면 코드 비용이 크고, 어차피 internal 이라 외부 사용자가 호출하지 않는다.
+        // 정식 @Method 노출로 옮기는 작업은 별도 이슈로 분리.
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const el = this.el;
         el.isRowSelectedSync = this.isRowSelectedSync.bind(this);
         el.updateRowSelectSync = this.updateRowSelectSync.bind(this);
@@ -14733,7 +14974,6 @@ class SdTable {
             }
         });
     }
-    // light DOM(manual mode 자식)과 shadow DOM(autoThead/autoTbody fallback) 양쪽 모두에서 자식을 찾는다.
     queryChildEl(selector) {
         return (this.el.querySelector(selector) ??
             this.el.shadowRoot?.querySelector(selector) ??
@@ -14761,12 +15001,12 @@ class SdTable {
     refreshChildrenSelection() {
         const thead = this.queryChildEl('sd-thead');
         thead?.refreshSelection?.();
-        this.queryAllTr().forEach(tr => tr?.refreshSelection?.());
+        this.queryAllTr().forEach(tr => tr.refreshSelection?.());
     }
     refreshChildrenConfig() {
         const thead = this.queryChildEl('sd-thead');
         thead?.refreshConfig?.();
-        this.queryAllTr().forEach(tr => tr?.refreshConfig?.());
+        this.queryAllTr().forEach(tr => tr.refreshConfig?.());
     }
     maybeEmitVirtualReachEnd(start, end) {
         const threshold = Math.max(1, this.virtualEndThreshold);
@@ -14798,6 +15038,7 @@ class SdTable {
         this.vsEnd = end;
         const topHeight = start * this.effectiveRowHeight;
         const bottomHeight = Math.max(0, (this.rowCount - end) * this.effectiveRowHeight);
+        // setSpacersSync 는 sd-tbody 가 host element 에 monkey-patch 하는 internal sync helper.
         const tbody = this.queryChildEl('sd-tbody');
         tbody?.setSpacersSync?.(topHeight, bottomHeight);
         if (rangeChanged) {
@@ -14918,7 +15159,7 @@ class SdTable {
         this.updateRowsVisibility();
     }
     updateRowsVisibility() {
-        this.queryAllTr().forEach(tr => tr?.updateVisibility?.());
+        this.queryAllTr().forEach(tr => tr.updateVisibility?.());
     }
     changeRowsPerPage(perPage) {
         const changedRowsPerPage = perPage != null && perPage !== '' ? Number(perPage) : 0;
@@ -14957,7 +15198,7 @@ class SdTable {
             this.columnWidths = this.columnWidths.map((width, idx) => (idx === index ? newWidth : width));
             const thead = this.queryChildEl('sd-thead');
             thead?.setColumnWidths?.(this.columnWidths);
-            this.queryAllTr().forEach(tr => tr?.setColumnWidths?.(this.columnWidths));
+            this.queryAllTr().forEach(tr => tr.setColumnWidths?.(this.columnWidths));
             const stickyRightCount = this.stickyColumn?.right || 0;
             const visibleColCount = this.columns.filter(c => c.visible !== false).length;
             const isRightStickyEdgeResizer = stickyRightCount > 0 && index === visibleColCount - stickyRightCount;
@@ -15012,9 +15253,8 @@ class SdTable {
     // 경우가 있어, sd-tr의 @State (spansVersion)을 통해 재렌더를 강제한다.
     requestAllTrUpdate() {
         this.queryAllTr().forEach(tr => {
-            const trAny = tr;
-            if (typeof trAny.bumpSpansVersion === 'function') {
-                trAny.bumpSpansVersion();
+            if (typeof tr.bumpSpansVersion === 'function') {
+                tr.bumpSpansVersion();
             }
         });
     }
@@ -15251,25 +15491,25 @@ class SdTable {
             '--table-body-line-height': `${TABLE_BODY_TYPOGRAPHY.lineHeight}px`,
             '--table-body-text-decoration': TABLE_BODY_TYPOGRAPHY.textDecoration,
         };
-        return (hAsync(Host, { key: '2b7c1eaf862c45c73751af6035a022e8ce0314b4', style: hostStyle }, hAsync("div", { key: '35851e539eef8ff69ff03bd31f5d55d95eb8bf7a', class: "sd-table__container", style: {
+        return (hAsync(Host, { key: '9ee5b528b330f9edf406ff40ec089136c0807653', style: hostStyle }, hAsync("div", { key: '9ac6cbba84b7ef7d0897474168748811fb15af92', class: "sd-table__container", style: {
                 '--table-width': this.width,
                 '--table-height': effectiveTableHeight,
                 '--table-container-height': `calc(${effectiveTableHeight} - ${paginationHeight}px)`,
-            } }, hAsync("div", { key: 'e3bf5576fd1b1ee9ffab5d240de904204f4288d5', class: {
+            } }, hAsync("div", { key: '11f916debfd443e1d243bfa2335dbb0a3cb094bc', class: {
                 'sd-table__wrapper': true,
                 'sd-table__wrapper--radius-use-top': this.radius === 'useTop',
-            } }, hAsync("div", { key: 'a67ebcb802a3ed443cca1fc33a00787642e08e84', class: {
+            } }, hAsync("div", { key: '3cad3d86f731a3edc0d2b5a680bcaf6ad6be7399', class: {
                 'sd-table__scroll-container': true,
                 'sd-table__scroll-container--loading': this.isLoading,
                 'sd-table__scroll-container--no-data': isNoData,
-            } }, this.isLoading && (hAsync("div", { key: '2cdaff94dab50598c05364930dd3e763a6f2f79a', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, hAsync("sd-circle-progress", { key: '49211d7555a38996d3fd9cfce0df50bb626fa1d6', indeterminate: true }))), isNoData && (hAsync(hAsync.Fragment, null, hAsync("div", { key: '3da9d42ecedbdc63858a06040f0e22d265a8183b', class: "sd-table__no-data-header-overlay" }), hAsync("div", { key: '20b5d8be682572a4ddbce21b6cd265894d014499', class: "sd-table__no-data" }, hAsync("div", { key: 'a024fa084f4a137a70fe176cee6918b4f701fd42', class: "sd-table__no-data-content", ref: el => {
+            } }, this.isLoading && (hAsync("div", { key: '6f0aac84dcb3d9ca721ed82cd45214b3956d3f94', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, hAsync("sd-circle-progress", { key: '8bb6b8025fceee6ef856efd9cafefe925fc95272', indeterminate: true }))), isNoData && (hAsync(hAsync.Fragment, null, hAsync("div", { key: '69e6e22b68261832a299de470c8ca7f5a16205dd', class: "sd-table__no-data-header-overlay" }), hAsync("div", { key: 'c797a2d41c752698bed1f034beefddc4bf8b951d', class: "sd-table__no-data" }, hAsync("div", { key: '0f0306bc89b5d9046de2aec935822eab0c3ca36c', class: "sd-table__no-data-content", ref: el => {
                 this.noDataContentEl = el;
                 if (el)
                     this.syncNoDataContentObserver();
-            } }, hAsync("slot", { key: '9603eefa63fd5bc05dfa132c6be2302497d4c228', name: "no-data" }, hAsync("span", { key: '0dad4e143d8251e375f748d1e5e1a77909fab164' }, this.resolvedNoDataLabel)))))), hAsync("table", { key: '83325a8970f18bb9cf7a78dc665d16a24edc18da', class: this.tableClasses }, this.autoThead ? (hAsync("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }, hAsync("sd-thead", { rows: this.rows ?? [] }))) : (hAsync("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange })), this.autoTbody ? (hAsync("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }, hAsync("sd-tbody", { rows: this.rows ?? [] }, this.renderAutoRows()))) : (hAsync("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }))))), this.pagination &&
+            } }, hAsync("slot", { key: '042671d4c65c4031a756da386ed010146c17f736', name: "no-data" }, hAsync("span", { key: '5994f656dbea3fd1dea69c105907b188658f8c41' }, this.resolvedNoDataLabel)))))), hAsync("table", { key: '16bb3a7c6b32e5312eda79015cd7d90bef37bdff', class: this.tableClasses }, this.autoThead ? (hAsync("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }, hAsync("sd-thead", { rows: this.rows ?? [] }))) : (hAsync("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange })), this.autoTbody ? (hAsync("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }, hAsync("sd-tbody", { rows: this.rows ?? [] }, this.renderAutoRows()))) : (hAsync("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }))))), this.pagination &&
             this.pagination.rowsPerPage > 0 &&
             this.rowCount > 0 &&
-            !this.useVirtualScroll && (hAsync("div", { key: '935b0f916cbc1de29a7f6b3805a5a3c25eaba467', class: "sd-table__pagination" }, hAsync("sd-pagination", { key: '7faad5d0b2efe652a9ed989910551aa8bc5592ec', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (hAsync("sd-select", { key: 'd514c41459a60ac47ffcd476a635c47386232c50', value: this.useInternalPagination
+            !this.useVirtualScroll && (hAsync("div", { key: '6c3ee5d93fb395154c4c42c914669af535c1a5bc', class: "sd-table__pagination" }, hAsync("sd-pagination", { key: '46053012374e1255037706a8fa4d068dbc60f2d9', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (hAsync("sd-select", { key: 'df04b19e857e823be8237148d84456d492575ce3', value: this.useInternalPagination
                 ? this.innerRowsPerPage
                 : this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", emitValue: true, onSdUpdate: e => {
                 if (!this.isRowsPerPageValue(e.detail))
@@ -15561,7 +15801,7 @@ class SdTabs {
         };
     }
     render() {
-        return (hAsync("div", { key: '880f1aa80c29f2d578ffe2d5e5e5e0c008c898d3', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
+        return (hAsync("div", { key: '181916a72512a6802a06dc56fca418a806d18a0e', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
             const badgeName = this.getBadgeName(tab);
             return (hAsync("div", { key: `tab-${index}`, role: "tab", tabindex: 0, "aria-selected": tab.value === this.value ? 'true' : 'false', class: this.getTabClasses(tab), "aria-label": tab.label || 'tab', onClick: () => this.handleTabClick(tab), onKeyDown: e => {
                     if (e.key === 'Enter' || e.key === ' ') {
@@ -15776,6 +16016,8 @@ class SdTag {
     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';
@@ -15797,7 +16039,7 @@ class SdTag {
     render() {
         const config = this.resolvedConfig;
         const iconNode = this.renderIcon(config.icon, config.iconSize);
-        return (hAsync("span", { key: '57f3c3f9ad53059fabff205cb44ffa3d1da9a711', class: "sd-tag", style: {
+        return (hAsync("span", { key: 'c8b8b88e2c83401bb9d3e05004b0517d7e4a3a6a', class: "sd-tag", style: {
                 '--sd-tag-background': config.background,
                 '--sd-tag-content': config.content,
                 '--sd-tag-height': config.height,
@@ -15807,7 +16049,7 @@ class SdTag {
                 '--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, hAsync("span", { key: '3360f36d18f073cd24699b6b8db2e731fda351ac', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
+            }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, hAsync("span", { key: '67094b09ab1d7b7e865c9f6b8017f8c5c3f8274a', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
     }
     static get style() { return sdTagCss(); }
     static get cmpMeta() { return {
@@ -15875,9 +16117,9 @@ class SdTbody {
         }
     }
     render() {
-        return (hAsync(Host, { key: 'bdb686445ce324c6254891a385d6175c8cac06df', slot: `${this.tableId}-body` }, hAsync("tbody", { key: '21a7772f0d43a358d9ae17459f0ff296324bfd82', class: { tbody: true } }, [
+        return (hAsync(Host, { key: 'a3d0ee1c1820474e97e430ba91f48e12ee0e252d', slot: `${this.tableId}-body` }, hAsync("tbody", { key: 'bbd5b9acf02150b146c9b25d07f2e7a9dd347921', class: { tbody: true } }, [
             this.topSpacerHeight > 0 && (hAsync("tr", { key: "spacer-top", class: "tbody__spacer", style: { height: `${this.topSpacerHeight}px`, display: 'block' } })),
-            hAsync("slot", { key: 'e38d8fe5d67a91d3fa5a25be98195da104660005' }),
+            hAsync("slot", { key: 'f0ec0aa4d7e7190fc93d96afe5591004174fff63' }),
             this.bottomSpacerHeight > 0 && (hAsync("tr", { key: "spacer-bottom", class: "tbody__spacer", style: { height: `${this.bottomSpacerHeight}px`, display: 'block' } })),
         ])));
     }
@@ -16052,7 +16294,7 @@ class SdTd {
         }
     }
     render() {
-        return (hAsync(Host, { key: '505b602b609050870e7e80df9157dbc50d0cb8c1', class: { [`align-${this.align}`]: Boolean(this.align) } }, hAsync("slot", { key: '9910f02d98ce5e115b2a380954dd0a994f9f1c12' })));
+        return (hAsync(Host, { key: '91c033a0c4c3a6c3c9b29c0be99912c5ac1283ee', class: { [`align-${this.align}`]: Boolean(this.align) } }, hAsync("slot", { key: 'abfbc911c707012bc7d924e328ba07d71b96f9a9' })));
     }
     static get watchers() { return {
         "field": [{
@@ -16336,7 +16578,7 @@ class SdTextarea {
             '--sd-system-size-field-sm-height': 'auto',
             '--sd-system-radius-field-sm': `${TEXTAREA_TOKENS.radius}px`,
         };
-        return (hAsync("sd-field", { key: '404175c94949c2510082df905c53e97ab835369c', 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, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: 'ca92dfe613b2c006ecc4021bb2f07a2e4b04239a', class: "sd-textarea__content" }, hAsync("textarea", { key: 'a6d2bbdb9c88766182728cf3eb30ce7691fb048f', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readOnly: this.readonly, autofocus: this.autoFocus, maxLength: this.maxLength, rows: this.rows, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.textareaStyle }))));
+        return (hAsync("sd-field", { key: 'd877d2598cad84c2bf495e76e0cc1d087f52cc8e', 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, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: 'c4e864b958b806d4ecc293bd47375dabe0b9e825', class: "sd-textarea__content" }, hAsync("textarea", { key: '8d12c0178392c07150f0fdde5bab4c0e91534efb', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readOnly: this.readonly, autofocus: this.autoFocus, maxLength: this.maxLength, rows: this.rows, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.textareaStyle }))));
     }
     static get watchers() { return {
         "value": [{
@@ -16552,16 +16794,16 @@ class SdThead {
             '--table-border-color': TABLE_BORDER.color,
             '--table-border-width': `${TABLE_BORDER.width}px`,
         };
-        return (hAsync(Host, { key: 'c2852fc7d6fe9e8116fabbbcc140f4db8319bfdc', slot: `${this.tableId}-head`, style: headStyle }, hAsync("thead", { key: '970cb1c96145326f38b79636a72982b0e9c81fa0', class: {
+        return (hAsync(Host, { key: '234ca55bb2507aef21df976066e5ce377c2e9e89', slot: `${this.tableId}-head`, style: headStyle }, hAsync("thead", { key: 'fecd6b54f72a8643b663c3af1988eed60300d08d', class: {
                 'thead': true,
                 'thead--sticky': this._stickyHeader,
-            } }, hAsync("tr", { key: '839fb6e9fd68ef10dea1f1d470a6b3e707475a8d', class: "tr" }, this._selectable && (hAsync("th", { key: 'd669372261627013bc1b39157139d180b3d1a6c1', class: {
+            } }, hAsync("tr", { key: '21d56c50076d3340733b7fa0a8e569fec005e415', class: "tr" }, this._selectable && (hAsync("th", { key: 'ace570ae2157ae63a21ec6ba60d8b8898dd0c33c', class: {
                 'th': true,
                 'th--selected': true,
                 'sticky-left': true,
                 'sticky-left-edge': stickyLeftCount === 0,
                 'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
-            }, style: { '--sticky-left-offset': '0px' } }, hAsync("sd-checkbox", { key: '6263984430b4aa53e6ac24fb0f6a6c05838a71d5', value: this.getIsAllChecked(), disabled: safeRows.length === 0, onSdUpdate: (e) => this.handleSelectAll(e.detail) }))), stickyLeftCols.map((col, idx) => (hAsync("th", { key: col.name, class: {
+            }, style: { '--sticky-left-offset': '0px' } }, hAsync("sd-checkbox", { key: '4b30536f427b9985355c4e22b6b532a3033306c0', value: this.getIsAllChecked(), disabled: safeRows.length === 0, onSdUpdate: (e) => this.handleSelectAll(e.detail) }))), stickyLeftCols.map((col, idx) => (hAsync("th", { key: col.name, class: {
                 'th': true,
                 [`${col.thClass}`]: Boolean(col.thClass),
                 'sticky-left': true,
@@ -16712,12 +16954,12 @@ class SdToast {
         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 (hAsync("div", { key: 'db3ffaf51dc96c39c05558017f25929c679a59df', style: {
+        return (hAsync("div", { key: '82579581897d7845b95456ccb5e2a1745c84bcc5', style: {
                 '--sd-toast-bg': typeConfig.bg,
                 '--sd-toast-text': typeConfig.content,
                 '--sd-toast-icon': iconColor,
                 '--sd-toast-link': linkColor,
-            } }, hAsync("div", { key: '92344f5bb95b0d4787591207f2e017d7dd177091', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (hAsync("div", { key: '991db58b2cb019dd3a787e000e9d8813014bbb09', class: "sd-toast__icon" }, hAsync("sd-icon", { key: '24d53cd77fdea82ec07663a8968493ec2b794751', name: this.icon, size: iconSize, color: iconColor }))), hAsync("div", { key: '70cfad4ef389cca798be9baeac99bfc41efcc615', class: "sd-toast__content" }, hAsync("span", { key: '5927023435b17dc25ee07630fc4ae4568aadd9b9', class: "sd-toast__message" }, this.message)), this.link && (hAsync("a", { key: '410c024fd81ebcc78175c1855a86f590566d1a81', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (hAsync("sd-button", { key: 'd85287e7ef796a11f850a0ce5cde87f5881fa5c9', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (hAsync("sd-ghost-button", { key: '55a6bf6457bd89254f6eb01072d46a0edbb8b510', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
+            } }, hAsync("div", { key: '5f41392a25dee4e53917255453c97c2203940f21', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (hAsync("div", { key: '8f38f7c9842ec295510135589a63994011a856f4', class: "sd-toast__icon" }, hAsync("sd-icon", { key: '62ef897ddfc3b47fe7b640d430d0baf95bdb5b51', name: this.icon, size: iconSize, color: iconColor }))), hAsync("div", { key: 'f6db6cb9776cb41400c9a9052cdea94990245298', class: "sd-toast__content" }, hAsync("span", { key: 'fbd7cdd72422e9ad08f99302b4dcd607d058926f', class: "sd-toast__message" }, this.message)), this.link && (hAsync("a", { key: 'f599928ad9d0d7536086d7dd2d1ce65b429fd8f4', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (hAsync("sd-button", { key: '2be68a412c4b6b9dac64dbd89447c4905fa7512f', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (hAsync("sd-ghost-button", { key: '065030362b37383ee7ae31e9b8a771b160427cbe', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
     }
     static get style() { return sdToastCss(); }
     static get cmpMeta() { return {
@@ -16970,7 +17212,7 @@ class SdToastContainer {
         const activeToasts = toasts.filter(t => t.state !== 'exiting').reverse();
         const indexMap = new Map();
         activeToasts.forEach((t, i) => indexMap.set(t.id, i));
-        return (hAsync("div", { key: 'bc3c9591b6453eed7df462841e29784c29b3aeef', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
+        return (hAsync("div", { key: 'c80d46b63f50591d4d92b810c0625701e4741e3a', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
                 this.expanded = true;
                 this.pauseTimers();
             }, onMouseLeave: () => {
@@ -17128,7 +17370,7 @@ class SdToggle {
             '--sd-toggle-content-select': TOGGLE_COLORS.content.select,
             '--sd-toggle-content-disabled': TOGGLE_COLORS.content.disabled,
         };
-        return (hAsync("label", { key: 'b16577aa25863a9dc337314d9059328799c1cd1e', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, hAsync("input", { key: '6130825b74df8a573f4e062671fd694508759e82', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        return (hAsync("label", { key: 'c5c8b9448dabb6619e80fd55b11f94bf78706994', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, hAsync("input", { key: 'bd43e7f286da217653461ec3128998c5f5a821d9', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
     static get style() { return sdToggleCss(); }
     static get cmpMeta() { return {
@@ -17258,14 +17500,14 @@ class SdTooltip {
         const hasLabel = this.label !== undefined && this.label !== '';
         const divTrigger = trigger === 'hover' ? hoverTrigger : hasLabel ? {} : { onClick: toggleTooltip };
         const buttonClickTrigger = trigger === 'click' && hasLabel ? { onSdClick: toggleTooltip } : {};
-        return (hAsync(Fragment, { key: 'ef33f9f183820d684f2805e40134a81f7149fc16' }, hAsync("div", { key: 'dd931825c55b0ee748c7ef45f15be0d6de37ad23', class: `sd-tooltip-trigger ${this.sdClass !== undefined && this.sdClass !== '' ? this.sdClass : ''}`, ...divTrigger }, hasLabel ? (hAsync("sd-button", { ref: el => (this.buttonEl = el), name: this.name ?? 'primary_sm', label: this.label, icon: icon, rightIcon: this.rightIcon, ariaLabel: this.ariaLabel, disabled: this.disabled, type: this.type ?? 'button', class: "sd-tooltip", ...buttonClickTrigger })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (hAsync("sd-floating-portal", { key: '443dbbe8f0b9a66aaae9b8482a3f615d2d41e8ec', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.tooltipOffset }, hAsync("div", { key: '040bde0321b1fd35014db976aeaddc515d87c807', ref: el => (this.menuEl = el), class: {
+        return (hAsync(Fragment, { key: 'c7ed53cfd1505b394353a9a37d0fe012cdf29217' }, hAsync("div", { key: 'd31332c8717dd954bb1c79bb9d0fd974f74d6e73', class: `sd-tooltip-trigger ${this.sdClass !== undefined && this.sdClass !== '' ? this.sdClass : ''}`, ...divTrigger }, hasLabel ? (hAsync("sd-button", { ref: el => (this.buttonEl = el), name: this.name ?? 'primary_sm', label: this.label, icon: icon, rightIcon: this.rightIcon, ariaLabel: this.ariaLabel, disabled: this.disabled, type: this.type ?? 'button', class: "sd-tooltip", ...buttonClickTrigger })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (hAsync("sd-floating-portal", { key: 'a63971f2fa15e9ef8a6294a2284284e7d7154a8f', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.tooltipOffset }, hAsync("div", { key: 'dc3259612bf303b320fdc849bbb83f224f410737', ref: el => (this.menuEl = el), class: {
                 'sd-floating-menu': true,
                 [`sd-floating-menu--${tooltipType}`]: true,
                 [`sd-floating-menu--${placement}`]: true,
             }, style: {
                 '--sd-floating-bg': typeConfig.bg,
                 '--sd-floating-content': typeConfig.content,
-            }, onMouseEnter: () => this.show(), onMouseLeave: () => this.startHideTimer() }, hAsync("i", { key: 'e802c09cc13ec3db29704197fa402588bf97d670', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, hAsync(TooltipArrow, { key: 'b698fbdba2cee74955f65ed7b04abeea8ccabee5' })), hAsync("div", { key: '97e856c543a8cdb880daae9ed0e461f5fd0f2b44', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }))))));
+            }, onMouseEnter: () => this.show(), onMouseLeave: () => this.startHideTimer() }, hAsync("i", { key: '8b3d132320c27710c9346f5313ee7c173df4275e', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, hAsync(TooltipArrow, { key: '66e90298fa62b7660e3d785abd024e9acae38fe3' })), hAsync("div", { key: '115d0ee83abb2d9ca607759f009c47acd34196e2', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }))))));
     }
     static get style() { return sdTooltipCss(); }
     static get cmpMeta() { return {
@@ -17619,6 +17861,7 @@ registerComponents([
   SdBarcodeInput,
   SdButton,
   SdCalendar,
+  SdCallout,
   SdCard,
   SdCheckbox,
   SdChip,