@sellmate/design-system 1.20.1 → 1.22.0

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXm0PH2A.js');
+var index = require('./index-C-F-JEv_.js');
 
 const textLink = {
 	sm: {
@@ -118,14 +118,23 @@ const SdTextLink = class {
         index.registerInstance(this, hostRef);
         this.click = index.createEvent(this, "sdClick", 7);
     }
+    /** 표시할 레이블 텍스트 */
     label = '';
+    /** 좌측 아이콘명 */
     icon = '';
+    /** 좌측 아이콘 색상 */
     iconColor = '';
+    /** 레이블 span에 추가할 클래스 */
     labelClass = '';
+    /** 우측 화살표 타입 */
     rightArrow = 'none';
+    /** 밑줄 스타일 여부 */
     underline = false;
+    /** 비활성 상태 여부 */
     disabled = false;
+    /** 텍스트 크기 */
     size = 'sm';
+    /** 클릭 시 발생합니다. */
     click;
     handleClick = () => {
         if (this.disabled)
@@ -147,7 +156,7 @@ const SdTextLink = class {
             '--sd-text-link-text-decoration': typo.textDecoration,
             ...(this.disabled ? { '--sd-text-link-color': TEXT_LINK_COLORS.content.disabled } : {}),
         };
-        return (index.h("span", { key: '74e9dd05f3efa3ecfec4edca1b74c29bb7207894', role: "button", tabindex: this.disabled ? -1 : 0, class: {
+        return (index.h("span", { key: '1b58c27c2754182b1fc6249e7e4bf52f42d1d11d', role: "button", tabindex: this.disabled ? -1 : 0, class: {
                 'sd-text-link': true,
                 'sd-text-link--disabled': this.disabled,
             }, style: cssVars, onClick: this.handleClick, onKeyDown: e => {
@@ -155,13 +164,13 @@ const SdTextLink = class {
                     e.preventDefault();
                     this.handleClick();
                 }
-            } }, this.icon && (index.h("sd-icon", { key: 'e60be0764adf889af988fd887582776d44239e07', name: this.icon, size: sizeConfig.iconSize, color: iconColor, class: "sd-text-link__icon" })), index.h("span", { key: '17996ef0620948fe1660945e68c9bb55e62fc982', class: labelClassName }, this.label), this.rightArrow && this.rightArrow !== 'none' && (index.h("span", { key: 'b9cfc03d4295beb9956f661032ea3fd1d9acfbe9', class: "sd-text-link__arrow", style: {
+            } }, this.icon && (index.h("sd-icon", { key: '85076e7cf4873b527606aa737c2899233dcc3d9f', name: this.icon, size: sizeConfig.iconSize, color: iconColor, class: "sd-text-link__icon" })), index.h("span", { key: '75b16e64155770ccdb889497caea6b4240b2e8c0', class: labelClassName }, this.label), this.rightArrow && this.rightArrow !== 'none' && (index.h("span", { key: '8dd32b1b640a8e81f306b0387f783a4c1435abd6', class: "sd-text-link__arrow", style: {
                 width: `${TEXT_LINK_ARROW.arrowFrame}px`,
                 height: `${TEXT_LINK_ARROW.arrowFrame}px`,
                 display: 'inline-flex',
                 alignItems: 'center',
                 justifyContent: 'center',
-            } }, index.h("sd-icon", { key: '6c2e4640a767acd5e66089e7e78f27c0fb8a0955', name: this.rightArrow === 'chevron' ? 'chevronRight' : 'caretRight', size: TEXT_LINK_ARROW.arrowIconSize, color: arrowColor })))));
+            } }, index.h("sd-icon", { key: '605572568dd4c2b6dcde9c932d5593e5fdb916a4', name: this.rightArrow === 'chevron' ? 'chevronRight' : 'caretRight', size: TEXT_LINK_ARROW.arrowIconSize, color: arrowColor })))));
     }
 };
 SdTextLink.style = sdTextLinkCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXm0PH2A.js');
+var index = require('./index-C-F-JEv_.js');
 
 const DEFAULT_DURATION = 4000;
 const DEFAULT_MAX_VISIBLE = 3;
@@ -21,15 +21,22 @@ const SdToastContainer = class {
         this.toastDismiss = index.createEvent(this, "sdToastDismiss", 7);
     }
     get el() { return index.getElement(this); }
+    /** 토스트 표시 위치 */
     position = 'bottom-center';
+    /** 동시에 표시할 최대 토스트 수 */
     maxVisible = DEFAULT_MAX_VISIBLE;
+    /** 자동 닫힘 지연 시간 (ms, 0이면 자동 닫힘 없음) */
     defaultDuration = DEFAULT_DURATION;
+    /** z-index */
     zIndex = DEFAULT_Z_INDEX;
     toasts = [];
     expanded = false;
     toastRefs = new Map();
+    /** 토스트가 표시될 때 발생합니다. */
     toastShow;
+    /** 토스트가 제거될 때 발생합니다. */
     toastDismiss;
+    /** 토스트를 생성하고 ID를 반환합니다. */
     async create(options) {
         const id = `toast-${++toastIdCounter}`;
         const entry = { id, options, state: 'entering' };
@@ -54,9 +61,11 @@ const SdToastContainer = class {
         this.toastShow.emit({ id });
         return id;
     }
+    /** 지정한 ID의 토스트를 닫습니다. */
     async dismiss(id) {
         this.startDismiss(id);
     }
+    /** 모든 토스트를 닫습니다. */
     async dismissAll() {
         (this.toasts || []).forEach(t => this.startDismiss(t.id));
     }
@@ -234,7 +243,7 @@ const SdToastContainer = class {
         const activeToasts = toasts.filter(t => t.state !== 'exiting').reverse();
         const indexMap = new Map();
         activeToasts.forEach((t, i) => indexMap.set(t.id, i));
-        return (index.h("div", { key: 'f5b2cb8f4d1286bbd8f7cd648916294397ed4742', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
+        return (index.h("div", { key: 'b75aeffdddcd16267169ae99305ef5f475f53950', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
                 this.expanded = true;
                 this.pauseTimers();
             }, onMouseLeave: () => {

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXm0PH2A.js');
+var index = require('./index-C-F-JEv_.js');
 
 const toast = {
 	icon: "16",
@@ -68,14 +68,23 @@ const SdToast = class {
         this.close = index.createEvent(this, "sdClose", 7);
         this.buttonClick = index.createEvent(this, "sdButtonClick", 7);
     }
+    /** 좌측 아이콘명 */
     icon;
+    /** 표시할 메시지 */
     message;
+    /** 우측 링크 URL */
     link;
+    /** 링크 표시 레이블 (없으면 URL 표시) */
     linkLabel;
+    /** 우측 버튼 레이블 */
     buttonLabel;
+    /** 닫기 버튼 표시 여부 */
     useClose = false;
+    /** 토스트 타입 (색상/아이콘 프리셋) */
     type = 'default';
+    /** 닫기 버튼 클릭 또는 자동 닫힘 시 발생합니다. */
     close;
+    /** 우측 버튼 클릭 시 발생합니다. */
     buttonClick;
     render() {
         const typeConfig = TOAST_TYPE_CONFIG[this.type] ?? TOAST_TYPE_CONFIG.default;
@@ -84,12 +93,12 @@ const SdToast = class {
         const linkColor = typeConfig.linkColor ?? typeConfig.content;
         const useDefaultCloseIntent = ['default', 'caution', 'info'].includes(this.type);
         const buttonName = TOAST_BUTTON_NAME_BY_TYPE[this.type] ?? TOAST_BUTTON_NAME_BY_TYPE.default;
-        return (index.h("div", { key: '45a278a76dde70b17794763fa35365ac8d634194', style: {
+        return (index.h("div", { key: 'ee54d9d9821821e0c422725c94d465f1e2df7bc6', style: {
                 '--sd-toast-bg': typeConfig.bg,
                 '--sd-toast-text': typeConfig.content,
                 '--sd-toast-icon': iconColor,
                 '--sd-toast-link': linkColor,
-            } }, index.h("div", { key: 'eb00957c65514153867322942ed111d24622c75b', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: 'd30f442041ea963e86f8558f3ed07ceb28049ae9', class: "sd-toast__icon" }, index.h("sd-icon", { key: '04e57935a4fe4344f3eb1338cfc436bef449805e', name: this.icon, size: iconSize, color: iconColor }))), index.h("div", { key: '02270cd25d409d44bbd1d7932b074494d2cbeca1', class: "sd-toast__content" }, index.h("span", { key: '5f180c70d130fc04b16901c69a399f6effa328b9', class: "sd-toast__message" }, this.message)), this.link && (index.h("a", { key: '4fd2adab87dbdaae94c21483f66256ce773ae965', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (index.h("sd-button", { key: '2c60553150114d6d5b99a2e86b35b4a85c4a34a4', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (index.h("sd-ghost-button", { key: 'c3e01391b713286b65a05352dd39ab98790564f8', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
+            } }, index.h("div", { key: 'b258e4b49fe530c778c0003516a2ad159805158a', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: '850a02dd996c7d1ca214b887e0d3d9899972e319', class: "sd-toast__icon" }, index.h("sd-icon", { key: '50d2817b160bd767a509956338347ee09a34a845', name: this.icon, size: iconSize, color: iconColor }))), index.h("div", { key: '0200da1ef6cfa9fcafa4cacf08998a33847038dc', class: "sd-toast__content" }, index.h("span", { key: 'af039afb2f457acded350ae2323e0bc59765a09e', class: "sd-toast__message" }, this.message)), this.link && (index.h("a", { key: '98fdcf360ca632e9f919e01ab0dce8369a1ebe79', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (index.h("sd-button", { key: '45202c0f969ab64e50265ee81f34fc14def26ce2', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (index.h("sd-ghost-button", { key: '48f30258527ae7a8a96db9609f096f5d216246ff', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
     }
 };
 SdToast.style = sdToastCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXm0PH2A.js');
+var index = require('./index-C-F-JEv_.js');
 
 const toggle = {
 	height: "28",
@@ -76,9 +76,13 @@ const SdToggle = class {
         index.registerInstance(this, hostRef);
         this.change = index.createEvent(this, "sdUpdate", 7);
     }
+    /** 현재 선택 상태 */
     value = false;
+    /** 표시할 레이블 텍스트 */
     label = '';
+    /** 비활성 상태 여부 */
     disabled = false;
+    /** 상태가 변경될 때 발생합니다. */
     change;
     get toggleClasses() {
         const classes = ['sd-toggle'];
@@ -120,7 +124,7 @@ const SdToggle = class {
             '--sd-toggle-content-select': TOGGLE_COLORS.content.select,
             '--sd-toggle-content-disabled': TOGGLE_COLORS.content.disabled,
         };
-        return (index.h("label", { key: '9ef981165b998f43ec23f3bb1cf0ef385962d7fb', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, index.h("input", { key: '6b6d2a89f43036f624c7bc291b2c5aa7a93c8f0a', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        return (index.h("label", { key: '1a03763c5cfcb5159b69e62a9db9893297082e2b', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, index.h("input", { key: '099cbbb02ebf283883ab7fe748f605491ae84808', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
 };
 SdToggle.style = sdToggleCss();

package/dist/cjs/{tooltipArrow-D3P3JC08.js → tooltipArrow-26hYtSrD.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXm0PH2A.js');
+var index = require('./index-C-F-JEv_.js');
 
 const TooltipArrow = (props) => (index.h("svg", { width: "16", height: "12", viewBox: "0 0 16 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, index.h("path", { d: "M8.83205 10.7519C8.43623 11.3457 7.56377 11.3457 7.16795 10.7519L1.04907e-06 -1.39876e-06L16 0L8.83205 10.7519Z", fill: "currentColor" })));
 

package/dist/collection/components/assets/CaretDown.js

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
 export const CaretDown = (props) => {
     const { size = 24, ...rest } = props;
-    return (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("path", { d: "M11.8033 17.754L2.72757 6.40942C2.59557 6.24442 2.71304 6 2.92435 6H21.0757C21.287 6 21.4045 6.24442 21.2725 6.40942L12.1968 17.754C12.0959 17.8801 11.9041 17.8801 11.8033 17.754Z", fill: "currentColor", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round" })));
+    return (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("path", { d: "M19.2188 8.25C19.9555 8.25 20.2813 9.44246 19.7061 10.0342L12.4874 17.46C12.2028 17.7526 11.7974 17.7526 11.5127 17.46L4.294 10.0342C3.71879 9.44247 4.04461 8.25 4.7813 8.25H19.2188Z", fill: "currentColor" })));
 };

package/dist/collection/components/assets/CaretLeft.js

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
 export const CaretLeft = (props) => {
     const { size = 24, ...rest } = props;
-    return (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("path", { d: "M6.24594 12.1968L17.5905 21.2725C17.7555 21.4045 18 21.287 18 21.0757V2.92435C18 2.71304 17.7555 2.59557 17.5905 2.72757L6.24594 11.8033C6.11984 11.9041 6.11984 12.0959 6.24594 12.1968Z", fill: "currentColor", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round" })));
+    return (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("path", { d: "M14.1423 4.29416C14.7698 3.71888 16.0358 4.04475 16.0358 4.78146V19.219C16.0358 19.9557 14.7698 20.2815 14.1423 19.7063L6.26827 12.4865C5.95813 12.2019 5.95791 11.7975 6.26827 11.5129L14.1423 4.29416Z", fill: "currentColor" })));
 };

package/dist/collection/components/assets/CaretRight.js

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
 export const CaretRight = (props) => {
     const { size = 24, ...rest } = props;
-    return (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("path", { d: "M17.754 12.1968L6.40942 21.2725C6.24442 21.4045 6 21.287 6 21.0757L6 2.92435C6 2.71304 6.24442 2.59557 6.40942 2.72757L17.754 11.8033C17.8801 11.9041 17.8801 12.0959 17.754 12.1968Z", fill: "currentColor", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round" })));
+    return (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("path", { d: "M8.25 4.78127C8.25 4.04456 9.44248 3.71871 10.0342 4.29397L17.46 11.5127C17.7526 11.7973 17.7526 12.2027 17.46 12.4873L10.0342 19.7061C9.44249 20.2814 8.25 19.9555 8.25 19.2188V4.78127Z", fill: "currentColor" })));
 };

package/dist/collection/components/assets/CaretUp.js

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
 export const CaretUp = (props) => {
     const { size = 24, ...rest } = props;
-    return (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("path", { d: "M11.8033 6.24594L2.72757 17.5905C2.59557 17.7555 2.71304 18 2.92435 18H21.0757C21.287 18 21.4045 17.7555 21.2725 17.5905L12.1968 6.24594C12.0959 6.11984 11.9041 6.11984 11.8033 6.24594Z", fill: "currentColor", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round" })));
+    return (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("path", { d: "M11.6252 6.44362C11.8583 6.27919 12.1422 6.27906 12.3752 6.44362L12.4865 6.5403L19.7063 13.9651C20.2815 14.5568 19.9557 15.7503 19.219 15.7503H4.78146C4.04475 15.7503 3.71888 14.5568 4.29416 13.9651L11.5129 6.5403L11.6252 6.44362Z", fill: "currentColor" })));
 };

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

@@ -5,11 +5,17 @@ const DEFAULT_BUTTON_PROPS = {
     label: '확인',
 };
 export class SdActionModal {
+    /** 모달 헤더에 표시할 제목 */
     modalTitle = '';
+    /** 하단 확인 버튼의 props (없으면 footer 미표시) */
     buttonProps;
+    /** 모달 너비 (숫자면 px, 문자열이면 그대로 적용) */
     width;
+    /** 모달 높이 (숫자면 px, 문자열이면 그대로 적용) */
     height;
+    /** 닫기 버튼 클릭 시 발생 */
     close;
+    /** 확인 버튼 클릭 시 발생 */
     ok;
     render() {
         const cssVars = {
@@ -39,7 +45,7 @@ export class SdActionModal {
         if (this.height != null && this.height !== '') {
             sizeStyle.height = typeof this.height === 'number' ? `${this.height}px` : this.height;
         }
-        return (h("div", { key: '91a94a7058a38f4433809705cf2fefdc3bbaefa9', class: "sd-action-modal", style: { ...cssVars, ...sizeStyle } }, h("header", { key: 'e47efbc4183c9cff34d0ed66aab69521efb9e9e5', class: "sd-action-modal__header" }, h("h2", { key: '7a54d5f4decb8d6d599808feafca68e548cf173e', class: "sd-action-modal__title" }, this.modalTitle), h("div", { key: '621c4a86ef0ba69833b84515c74d4972f0a6cc42', class: "sd-action-modal__header-sub" }, h("slot", { key: 'f7453ed96822804094c239cef05638934aed288e', name: "header-sub-title" })), h("sd-ghost-button", { key: '29cee49b27b6f261d719e6856f8b38a9fa590bf4', class: "sd-action-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), h("div", { key: '610840c291b3a26a82146549220ff1be470eafc2', class: "sd-action-modal__body" }, h("slot", { key: '7d390550e2ba1ae27409fb64beccf4f33f744aad', name: "body" })), (this.buttonProps != null || this.buttonProps != undefined) && (h("footer", { key: 'c835a2fb96066b393a8833d492d03adc2806cb07', class: "sd-action-modal__footer" }, h("div", { key: 'b46ed9f18f9e760bd5159260e2cf4b3f27d8dd23', class: "sd-action-modal__footer-sub" }, h("slot", { key: '4b9cce3c5b44b7921e82cb813a87ca5e76cd4928', name: "bottom-sub-content" })), h("sd-button", { key: '6cf14c10ef064a1c5993a48ef9f921069d6d70f6', ...DEFAULT_BUTTON_PROPS, ...this.buttonProps, onSdClick: () => this.ok.emit() })))));
+        return (h("div", { key: '1bed831bf4534b5936d151d9cf085dda4657295f', class: "sd-action-modal", style: { ...cssVars, ...sizeStyle } }, h("header", { key: '2e5855be8128695e85e397acc91432d573572a12', class: "sd-action-modal__header" }, h("h2", { key: '1551d022b29288f38c1288c595d66acffb7cd81a', class: "sd-action-modal__title" }, this.modalTitle), h("div", { key: '8d4ec549ebebc6b2d61ad3c9dc4808d0275d3c55', class: "sd-action-modal__header-sub" }, h("slot", { key: 'aac69288e31316de16c6cdd8a5b5641b5afc2f5a', name: "header-sub-title" })), h("sd-ghost-button", { key: 'd48d05b60cdc53e5d71e7694149b2e2e77c0cde8', class: "sd-action-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), h("div", { key: 'abd5db2432dea9639bfa91fb3f3019105a47e409', class: "sd-action-modal__body" }, h("slot", { key: 'debfb64dd617e6d027b9acdea2081141ad78ff5d', name: "body" })), (this.buttonProps != null || this.buttonProps != undefined) && (h("footer", { key: '9cf1510e0ce5aea2e5b4e504e832073f533e166e', class: "sd-action-modal__footer" }, h("div", { key: '677d0e26fe8d416419fd247c808206955df82b16', class: "sd-action-modal__footer-sub" }, h("slot", { key: '24e400c96a0fec93ea76d2a037432901e3050618', name: "bottom-sub-content" })), h("sd-button", { key: 'b52c5c7837a06f25738533dc769f5daff1169696', ...DEFAULT_BUTTON_PROPS, ...this.buttonProps, onSdClick: () => this.ok.emit() })))));
     }
     static get is() { return "sd-action-modal"; }
     static get originalStyleUrls() {
@@ -66,7 +72,7 @@ export class SdActionModal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uBAA8\uB2EC \uD5E4\uB354\uC5D0 \uD45C\uC2DC\uD560 \uC81C\uBAA9"
                 },
                 "getter": false,
                 "setter": false,
@@ -93,7 +99,7 @@ export class SdActionModal {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD558\uB2E8 \uD655\uC778 \uBC84\uD2BC\uC758 props (\uC5C6\uC73C\uBA74 footer \uBBF8\uD45C\uC2DC)"
                 },
                 "getter": false,
                 "setter": false
@@ -110,7 +116,7 @@ export class SdActionModal {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uBAA8\uB2EC \uB108\uBE44 (\uC22B\uC790\uBA74 px, \uBB38\uC790\uC5F4\uC774\uBA74 \uADF8\uB300\uB85C \uC801\uC6A9)"
                 },
                 "getter": false,
                 "setter": false,
@@ -129,7 +135,7 @@ export class SdActionModal {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uBAA8\uB2EC \uB192\uC774 (\uC22B\uC790\uBA74 px, \uBB38\uC790\uC5F4\uC774\uBA74 \uADF8\uB300\uB85C \uC801\uC6A9)"
                 },
                 "getter": false,
                 "setter": false,
@@ -147,7 +153,7 @@ export class SdActionModal {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB2EB\uAE30 \uBC84\uD2BC \uD074\uB9AD \uC2DC \uBC1C\uC0DD"
                 },
                 "complexType": {
                     "original": "void",
@@ -162,7 +168,7 @@ export class SdActionModal {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD655\uC778 \uBC84\uD2BC \uD074\uB9AD \uC2DC \uBC1C\uC0DD"
                 },
                 "complexType": {
                     "original": "void",

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

@@ -1,10 +1,11 @@
 import { h } from "@stencil/core";
 import { BADGE_COLOR_MAP } from "./sd-badge.config";
 export class SdBadge {
+    /** 뱃지 색상 */
     color = 'blue';
     render() {
         const resolvedColor = BADGE_COLOR_MAP[this.color] ?? BADGE_COLOR_MAP.blue;
-        return (h("div", { key: '161a6ab81185300e392e2a8cd54146185a8a6216', class: "sd-badge", style: { '--sd-badge-color': resolvedColor } }, h("div", { key: '30f9ed293d34e78caf0d832da0ea5f6ce2caf1c3', class: "sd-badge__dot" })));
+        return (h("div", { key: '72a1ff1775b431b12a0765416d50256a91e34180', class: "sd-badge", style: { '--sd-badge-color': resolvedColor } }, h("div", { key: '427bc1c523aff73dc52edf729a414b26f52faf68', class: "sd-badge__dot" })));
     }
     static get is() { return "sd-badge"; }
     static get originalStyleUrls() {
@@ -38,7 +39,7 @@ export class SdBadge {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uBC43\uC9C0 \uC0C9\uC0C1"
                 },
                 "getter": false,
                 "setter": false,