@sellmate/design-system 1.20.0 → 1.21.0

package/dist/cjs/sd-action-modal.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXm0PH2A.js');
+var index = require('./index-C-F-JEv_.js');
 var component_modal = require('./component.modal-BFelrSMx.js');
 
 const { modal } = component_modal.modalTokens;
@@ -39,11 +39,17 @@ const SdActionModal = class {
         this.close = index.createEvent(this, "sdClose", 7);
         this.ok = index.createEvent(this, "sdOk", 7);
     }
+    /** 모달 헤더에 표시할 제목 */
     modalTitle = '';
+    /** 하단 확인 버튼의 props (없으면 footer 미표시) */
     buttonProps;
+    /** 모달 너비 (숫자면 px, 문자열이면 그대로 적용) */
     width;
+    /** 모달 높이 (숫자면 px, 문자열이면 그대로 적용) */
     height;
+    /** 닫기 버튼 클릭 시 발생 */
     close;
+    /** 확인 버튼 클릭 시 발생 */
     ok;
     render() {
         const cssVars = {
@@ -73,7 +79,7 @@ const SdActionModal = class {
         if (this.height != null && this.height !== '') {
             sizeStyle.height = typeof this.height === 'number' ? `${this.height}px` : this.height;
         }
-        return (index.h("div", { key: '91a94a7058a38f4433809705cf2fefdc3bbaefa9', class: "sd-action-modal", style: { ...cssVars, ...sizeStyle } }, index.h("header", { key: 'e47efbc4183c9cff34d0ed66aab69521efb9e9e5', class: "sd-action-modal__header" }, index.h("h2", { key: '7a54d5f4decb8d6d599808feafca68e548cf173e', class: "sd-action-modal__title" }, this.modalTitle), index.h("div", { key: '621c4a86ef0ba69833b84515c74d4972f0a6cc42', class: "sd-action-modal__header-sub" }, index.h("slot", { key: 'f7453ed96822804094c239cef05638934aed288e', name: "header-sub-title" })), index.h("sd-ghost-button", { key: '29cee49b27b6f261d719e6856f8b38a9fa590bf4', class: "sd-action-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), index.h("div", { key: '610840c291b3a26a82146549220ff1be470eafc2', class: "sd-action-modal__body" }, index.h("slot", { key: '7d390550e2ba1ae27409fb64beccf4f33f744aad', name: "body" })), (this.buttonProps != null || this.buttonProps != undefined) && (index.h("footer", { key: 'c835a2fb96066b393a8833d492d03adc2806cb07', class: "sd-action-modal__footer" }, index.h("div", { key: 'b46ed9f18f9e760bd5159260e2cf4b3f27d8dd23', class: "sd-action-modal__footer-sub" }, index.h("slot", { key: '4b9cce3c5b44b7921e82cb813a87ca5e76cd4928', name: "bottom-sub-content" })), index.h("sd-button", { key: '6cf14c10ef064a1c5993a48ef9f921069d6d70f6', ...DEFAULT_BUTTON_PROPS, ...this.buttonProps, onSdClick: () => this.ok.emit() })))));
+        return (index.h("div", { key: '1bed831bf4534b5936d151d9cf085dda4657295f', class: "sd-action-modal", style: { ...cssVars, ...sizeStyle } }, index.h("header", { key: '2e5855be8128695e85e397acc91432d573572a12', class: "sd-action-modal__header" }, index.h("h2", { key: '1551d022b29288f38c1288c595d66acffb7cd81a', class: "sd-action-modal__title" }, this.modalTitle), index.h("div", { key: '8d4ec549ebebc6b2d61ad3c9dc4808d0275d3c55', class: "sd-action-modal__header-sub" }, index.h("slot", { key: 'aac69288e31316de16c6cdd8a5b5641b5afc2f5a', name: "header-sub-title" })), index.h("sd-ghost-button", { key: 'd48d05b60cdc53e5d71e7694149b2e2e77c0cde8', class: "sd-action-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), index.h("div", { key: 'abd5db2432dea9639bfa91fb3f3019105a47e409', class: "sd-action-modal__body" }, index.h("slot", { key: 'debfb64dd617e6d027b9acdea2081141ad78ff5d', name: "body" })), (this.buttonProps != null || this.buttonProps != undefined) && (index.h("footer", { key: '9cf1510e0ce5aea2e5b4e504e832073f533e166e', class: "sd-action-modal__footer" }, index.h("div", { key: '677d0e26fe8d416419fd247c808206955df82b16', class: "sd-action-modal__footer-sub" }, index.h("slot", { key: '24e400c96a0fec93ea76d2a037432901e3050618', name: "bottom-sub-content" })), index.h("sd-button", { key: 'b52c5c7837a06f25738533dc769f5daff1169696', ...DEFAULT_BUTTON_PROPS, ...this.buttonProps, onSdClick: () => this.ok.emit() })))));
     }
 };
 SdActionModal.style = sdActionModalCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXm0PH2A.js');
+var index = require('./index-C-F-JEv_.js');
 
 const badge = {
 	red: "#FB4444",
@@ -33,10 +33,11 @@ const SdBadge = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
+    /** 뱃지 색상 */
     color = 'blue';
     render() {
         const resolvedColor = BADGE_COLOR_MAP[this.color] ?? BADGE_COLOR_MAP.blue;
-        return (index.h("div", { key: '161a6ab81185300e392e2a8cd54146185a8a6216', class: "sd-badge", style: { '--sd-badge-color': resolvedColor } }, index.h("div", { key: '30f9ed293d34e78caf0d832da0ea5f6ce2caf1c3', class: "sd-badge__dot" })));
+        return (index.h("div", { key: '72a1ff1775b431b12a0765416d50256a91e34180', class: "sd-badge", style: { '--sd-badge-color': resolvedColor } }, index.h("div", { key: '427bc1c523aff73dc52edf729a414b26f52faf68', class: "sd-badge__dot" })));
     }
 };
 SdBadge.style = sdBadgeCss();

package/dist/cjs/sd-barcode-input.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXm0PH2A.js');
+var index = require('./index-C-F-JEv_.js');
 var index$1 = require('./index-BUvXpPc3.js');
 var component_textinput = require('./component.textinput-Bb-nU5xI.js');
 
@@ -42,38 +42,66 @@ const SdBarcodeInput = class {
         this.blur = index.createEvent(this, "sdBlur", 7);
     }
     get host() { return index.getElement(this); }
+    /** 입력값 */
     value = null;
+    /** 입력 필드 크기 */
     size = 'sm';
+    /** 필드 우측 어드온 레이블 */
     addonLabel = '';
+    /** 어드온 정렬 방향 */
     addonAlign = 'start';
+    /** 입력 placeholder */
     placeholder = '입력해 주세요.';
+    /** 비활성 상태 여부 */
     disabled = false;
+    /** 입력값 지우기 버튼 표시 여부 */
     clearable = false;
+    /** 필드 너비 (숫자면 px, 문자열이면 그대로 적용) */
     width = '';
+    /** 유효성 검사 규칙 목록 */
     rules = [];
+    /** 마운트 시 자동 포커스 여부 */
     autoFocus = false;
+    /** 필드 상태 (없으면 rules 결과로 자동 결정) */
     status;
+    /** 필드 하단 힌트 텍스트 */
     hint = '';
+    /** 에러 메시지 */
     errorMessage = '';
+    /** 네이티브 input에 추가할 클래스 */
     inputClass = '';
+    /** 읽기 전용 여부 */
     readonly = false;
+    /** 에러 상태 여부 */
     error = false;
+    /** 포커스 상태 여부 */
     focused = false;
+    /** 호버 상태 여부 */
     hovered = false;
     // props - label
+    /** 레이블 텍스트 */
     label = '';
+    /** 레이블 너비 */
     labelWidth = '';
+    /** 레이블 영역 아이콘 */
     icon = undefined;
+    /** 레이블 툴팁 텍스트 */
     labelTooltip = '';
+    /** 레이블 툴팁 상세 옵션 */
     labelTooltipProps = null;
     //  props - custom styles
+    /** 네이티브 input에 적용할 인라인 스타일 */
     inputStyle = {};
     internalValue = null;
     nativeEl = undefined;
     formField;
+    /** 폼 연동용 name 속성 */
     name = index$1.nanoid();
+    /** 입력값 변경 시 발생합니다. */
     input;
+    /** 포커스 진입 시 발생합니다. */
     focus;
+    /** 포커스 이탈 시 발생합니다. */
     blur;
     valueChanged(newValue) {
         this.internalValue = newValue;
@@ -84,18 +112,23 @@ const SdBarcodeInput = class {
             this.input?.emit(this.value);
         }
     }
+    /** 네이티브 input 엘리먼트를 반환합니다. */
     async sdGetNativeElement() {
         return this.nativeEl || null;
     }
+    /** 유효성 검사를 실행합니다. */
     async sdValidate() {
         this.formField?.sdValidate();
     }
+    /** 입력값과 유효성 상태를 초기화합니다. */
     async sdReset() {
         this.formField?.sdReset();
     }
+    /** 유효성 상태만 초기화합니다. */
     async sdResetValidate() {
         this.formField?.sdResetValidation();
     }
+    /** 입력 필드에 포커스를 이동합니다. */
     async sdFocus() {
         this.formField?.sdFocus();
     }
@@ -141,7 +174,7 @@ const SdBarcodeInput = class {
             '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
             '--sd-system-color-field-bg-default': BARCODE_INPUT_COLORS.bg.barcode,
         };
-        return (index.h("sd-field", { key: '453566ff018ea2131361fcc18d6094491d3b04dd', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, index.h("label", { key: '153174624e5ec10908df6f40711a7a37039ab67b', class: "sd-barcode-input__content" }, index.h("slot", { key: 'ce9326a5b3157ad511171f48ee95dd2ce6a6b5dd', name: "prefix" }), index.h("input", { key: '069c037e8c27575f70ebfed9c2b2e61817f202f5', name: this.name, ref: el => (this.nativeEl = el), class: `sd-barcode-input__native ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), index.h("slot", { key: '7ba3162a850e8d3d787ee44aaa807bb5be54cddc', name: "suffix" }), this.clearable && this.internalValue && (index.h("sd-ghost-button", { key: 'f12e8083d050d96b34cad2d332d5aeb08f4f3913', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-barcode-input__clear-icon", onClick: async () => {
+        return (index.h("sd-field", { key: '9f9831c9f39e4723cad6567b22155ab89856c9be', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, index.h("label", { key: '1da8ce2ef66e48f269b79f22e6751ccf18ca9cc0', class: "sd-barcode-input__content" }, index.h("slot", { key: '06850214ee5118ff3d13266c1ade37902c19f379', name: "prefix" }), index.h("input", { key: '0384b010946b635cc6b19ddb1a83be593ba5806b', name: this.name, ref: el => (this.nativeEl = el), class: `sd-barcode-input__native ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), index.h("slot", { key: '2bb5baed7b300014e52795d3a7665a580b7ff5a2', name: "suffix" }), this.clearable && this.internalValue && (index.h("sd-ghost-button", { key: 'fc586fdb39a1dc25eeba32c76aa86a653416c38e', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-barcode-input__clear-icon", onClick: async () => {
                 if (this.disabled)
                     return;
                 this.internalValue = '';

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXm0PH2A.js');
+var index = require('./index-C-F-JEv_.js');
 var sdButton_config = require('./sd-button.config-eTAJM2iW.js');
 
 const Add = (props) => {
@@ -175,7 +175,7 @@ const ClockOutline = (props) => {
 
 const Close = (props) => {
     const { size = 24, ...rest } = props;
-    return (index.h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, index.h("path", { d: "M20.0693 2.86969C20.3621 2.57688 20.837 2.57705 21.1299 2.86969C21.4228 3.16258 21.4228 3.63734 21.1299 3.93024L13.0596 11.9996L21.1299 20.0699C21.4228 20.3628 21.4228 20.8375 21.1299 21.1304C20.837 21.4232 20.3622 21.4233 20.0693 21.1304L12 13.0601L3.93067 21.1304C3.63785 21.4232 3.16303 21.4231 2.87012 21.1304C2.57723 20.8375 2.57723 20.3628 2.87012 20.0699L10.9395 11.9996L2.87012 3.93024C2.57728 3.63734 2.57725 3.16256 2.87012 2.86969C3.16303 2.57716 3.63789 2.57696 3.93067 2.86969L12 10.939L20.0693 2.86969Z", fill: "currentColor" })));
+    return (index.h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, index.h("path", { d: "M18.8281 4.11135C19.121 3.81849 19.5958 3.81854 19.8887 4.11135C20.1816 4.40424 20.1816 4.879 19.8887 5.1719L13.0596 12L19.8887 18.8291C20.1815 19.122 20.1815 19.5968 19.8887 19.8897C19.5958 20.1822 19.1209 20.1824 18.8281 19.8897L12 13.0606L5.17188 19.8897C4.87911 20.1823 4.40422 20.1821 4.11133 19.8897C3.81844 19.5968 3.81844 19.121 4.11133 18.8281L10.9385 12L4.11133 5.1719C3.81844 4.879 3.81844 4.40424 4.11133 4.11135C4.40424 3.8186 4.87903 3.81851 5.17188 4.11135L11.999 10.9395L18.8281 4.11135Z", fill: "currentColor" })));
 };
 
 const Copy = (props) => {
@@ -548,13 +548,21 @@ const SdButton = class {
         index.registerInstance(this, hostRef);
         this.click = index.createEvent(this, "sdClick", 7);
     }
+    /** 버튼 프리셋 이름 (크기와 색상 조합) */
     name = 'primary_sm';
+    /** 버튼 텍스트 레이블 */
     label = '';
+    /** 레이블 왼쪽에 표시할 아이콘 */
     icon;
+    /** 레이블 오른쪽에 표시할 아이콘 */
     rightIcon;
+    /** 아이콘 전용 버튼일 때 스크린리더용 레이블 */
     ariaLabel = '';
+    /** 비활성 상태 여부 */
     disabled = false;
+    /** 네이티브 button type 속성 */
     type = 'button';
+    /** 클릭 시 발생합니다. */
     click;
     hasWarnedMissingAriaLabel = false;
     handleClick = (event) => {
@@ -614,14 +622,14 @@ const SdButton = class {
         const validRightIcon = isValidIcon(this.rightIcon) ? this.rightIcon : undefined;
         const iconOnly = !hasLabel && Boolean(validIcon) !== Boolean(validRightIcon);
         const accessibleName = iconOnly && this.ariaLabel.trim() !== '' ? this.ariaLabel : undefined;
-        return (index.h("button", { key: 'da3228e64ba27430283d55a49d3e13b2112929b6', class: this.getButtonClasses(preset, config.size, hasLabel, iconOnly), type: this.type ?? 'button', disabled: this.disabled, "aria-label": accessibleName, style: {
+        return (index.h("button", { key: 'ea6482b86f91b26cd20ab635c357b655e92c2ec1', class: this.getButtonClasses(preset, config.size, hasLabel, iconOnly), type: this.type ?? 'button', disabled: this.disabled, "aria-label": accessibleName, style: {
                 '--sd-button-bg': config.color,
                 '--sd-button-bg-hover': sdButton_config.PRESET_HOVER_BACKGROUNDS[preset],
                 '--sd-button-border': sdButton_config.PRESET_BORDER_COLORS[preset],
                 '--sd-button-text': sdButton_config.PRESET_TEXT_COLORS[preset],
                 '--sd-button-icon': sdButton_config.PRESET_ICON_COLORS[preset],
                 '--sd-button-accent': sdButton_config.BUTTON_FOCUS_RING_COLOR,
-            }, onClick: this.handleClick }, index.h("span", { key: '22f4dac854314abb3edf3f6d4746057337d2d1c6', class: "sd-button__content" }, validIcon && (index.h("sd-icon", { key: 'cd88155fa1783071fe6bee390df47daa96133eab', class: "sd-button__icon", name: validIcon, size: sdButton_config.BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-current-icon)" })), this.label && index.h("span", { key: '27798d8db1d633ef99572982bddf40fbca415ed7', class: "sd-button__label" }, this.label), validRightIcon && (index.h("sd-icon", { key: '6393eb128f66a88b7ad1b5f2c1cec5654af07fae', class: "sd-button__icon sd-button__icon--right", name: validRightIcon, size: sdButton_config.BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-current-icon)" })))));
+            }, onClick: this.handleClick }, index.h("span", { key: 'fd0cbd15e1edf4dc599e7eb3df3dcb1ddbd4732e', class: "sd-button__content" }, validIcon && (index.h("sd-icon", { key: '5ace6d85974e1c2ecb0fcf55b0330801f78f094f', class: "sd-button__icon", name: validIcon, size: sdButton_config.BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-current-icon)" })), this.label && index.h("span", { key: 'ef1240a6acee55def8244149b0af4e0252be558c', class: "sd-button__label" }, this.label), validRightIcon && (index.h("sd-icon", { key: '127de568676734d75dd801b9ea46aa35e09b558c', class: "sd-button__icon sd-button__icon--right", name: validRightIcon, size: sdButton_config.BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-current-icon)" })))));
     }
 };
 SdButton.style = sdButtonCss();
@@ -909,6 +917,7 @@ const SdIcon = class {
     rotate;
     /** 접근성을 위한 라벨 */
     label;
+    /** 아이콘 i 엘리먼트에 적용할 인라인 스타일 */
     iconStyle = {};
     getIconClasses() {
         const classes = ['sd-icon'];

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXm0PH2A.js');
+var index = require('./index-C-F-JEv_.js');
 var useDatePicker = require('./useDatePicker-iMd6WToc.js');
 var sdDatePicker_config = require('./sd-date-picker.config-CtXmufyj.js');
 require('./component.datepicker-CUQbDSku.js');
@@ -14,13 +14,19 @@ const SdCalendar = class {
         this.update = index.createEvent(this, "sdUpdate", 7);
         this.viewChange = index.createEvent(this, "sdViewChange", 7);
     }
+    /** 선택된 날짜 (YYYY-MM-DD) */
     value = null;
+    /** 선택 가능한 날짜 범위 [시작일, 종료일] (YYYY-MM-DD, 빈 문자열이면 제한 없음) */
     selectable;
+    /** 캘린더에 표시할 이벤트 그룹 목록 */
     events;
+    /** 카드 형태의 그림자 여부 */
     elevated = false;
     currentYear;
     currentMonth;
+    /** 날짜 선택 시 선택된 날짜(YYYY-MM-DD)를 전달합니다. */
     update;
+    /** 월/년 네비게이션 변경 시 현재 보여지는 연·월을 전달합니다. */
     viewChange;
     dateUtil = useDatePicker.useDatePicker();
     _eventMapCache;
@@ -184,7 +190,7 @@ const SdCalendar = class {
         const eventMap = this.eventMap;
         const legend = this.legendItems;
         const hasEvents = (this.events?.length ?? 0) > 0;
-        return (index.h("div", { key: 'c8456b5c2b6617cef1aacd140d600458e9b05f32', class: { 'sd-calendar': true, 'sd-calendar--elevated': this.elevated }, style: cssVars }, index.h("div", { key: '9b73abcc81e28e3f791dcd3a5d1b1284b76c71b3', class: "sd-calendar__header" }, index.h("div", { key: '89e582eb5c4ad7ee7ea3e4e7d8139a25c32cd09e', class: "sd-calendar__nav-group" }, index.h("sd-ghost-button", { key: '75b3bb651ed6c840f85b50869d3d074fbdda10d7', ariaLabel: "prevYear", size: "xxs", icon: "chevronLeft", onClick: this.goPrevYear }), index.h("span", { key: '2be9c1dc4e9ab339890a8f066fc416bace8a3d6a', class: "sd-calendar__label" }, this.currentYear), index.h("sd-ghost-button", { key: 'fe38866bac1c10dc66e0392eb2d9efe7f12ba225', ariaLabel: "nextYear", size: "xxs", icon: "chevronRight", onClick: this.goNextYear })), index.h("span", { key: '7552892c7247f6a10aa7cd53dede0e2464e45647', class: "sd-calendar__divider", "aria-hidden": "true" }), index.h("div", { key: '09a142cb6e71f95c3f9c60be100441b6a5543b00', class: "sd-calendar__nav-group sd-calendar__nav-group-month" }, index.h("sd-ghost-button", { key: '12f116ed4b1f5dc57a682d1af5ef244f797cb347', ariaLabel: "prevMonth", size: "xxs", icon: "chevronLeft", onClick: this.goPrevMonth }), index.h("span", { key: '5adfc5a6469fde17d1bea030c84be29fea151601', class: "sd-calendar__label sd-calendar__label-month" }, this.currentMonth, "\uC6D4"), index.h("sd-ghost-button", { key: '1f1b44b1cd201e0ec45b696dbb70d36f3e81f21c', ariaLabel: "nextMonth", size: "xxs", icon: "chevronRight", onClick: this.goNextMonth }))), index.h("div", { key: 'b866d161ea35935cc5ead385c0b30015e9d5838d', class: "sd-calendar__week" }, useDatePicker.WEEK_LABELS.map(label => (index.h("span", { key: label, class: "sd-calendar__week-cell" }, label)))), index.h("div", { key: 'a63bf0d78122c6c2f668497a3c902d30a8e74c3f', class: "sd-calendar__grid" }, this.cells.map(cell => {
+        return (index.h("div", { key: '1ff9f894078f4b24d52c738509878ee504e02c6b', class: { 'sd-calendar': true, 'sd-calendar--elevated': this.elevated }, style: cssVars }, index.h("div", { key: 'a4e894dbf3c808ba1a2a6711997c956c8b4525c0', class: "sd-calendar__header" }, index.h("div", { key: 'd559c861937fd51cab7e4cc39cfece49bed20037', class: "sd-calendar__nav-group" }, index.h("sd-ghost-button", { key: '6b793f2a07cc9c26a8b517d7a4d0cc065305a19f', ariaLabel: "prevYear", size: "xxs", icon: "chevronLeft", onClick: this.goPrevYear }), index.h("span", { key: '324fa08a3583543a75cfd6a3cfeb8450586c9265', class: "sd-calendar__label" }, this.currentYear), index.h("sd-ghost-button", { key: 'd0951fe7bf84f58348e0ad2ed9e89531daa68242', ariaLabel: "nextYear", size: "xxs", icon: "chevronRight", onClick: this.goNextYear })), index.h("span", { key: '953a382082f5be65a1df7dab23faae8be1975bfa', class: "sd-calendar__divider", "aria-hidden": "true" }), index.h("div", { key: 'aa751f69f3864875d4e6f16a816660cb8636281f', class: "sd-calendar__nav-group sd-calendar__nav-group-month" }, index.h("sd-ghost-button", { key: '7fe05970e9385cf8b744b16abce6a536ba639d8d', ariaLabel: "prevMonth", size: "xxs", icon: "chevronLeft", onClick: this.goPrevMonth }), index.h("span", { key: '0f528c7bde86f64f482a5a6b433beef2456e5832', class: "sd-calendar__label sd-calendar__label-month" }, this.currentMonth, "\uC6D4"), index.h("sd-ghost-button", { key: '3ddbb8f64f86fda85e5f8c6963cc4e11a95e8a37', ariaLabel: "nextMonth", size: "xxs", icon: "chevronRight", onClick: this.goNextMonth }))), index.h("div", { key: 'de37bc97970b23c49757ff103f62a5ef8c3deb2a', class: "sd-calendar__week" }, useDatePicker.WEEK_LABELS.map(label => (index.h("span", { key: label, class: "sd-calendar__week-cell" }, label)))), index.h("div", { key: '218d4ff90b67bfcea0fb52984338b5bf486ec6b1', class: "sd-calendar__grid" }, this.cells.map(cell => {
             const isSelected = cell.inCurrentMonth && this.value !== '' && this.value === cell.date;
             const isToday = cell.inCurrentMonth && useDatePicker.today === cell.date;
             const isDisabled = cell.inCurrentMonth && this.isDisabled(cell.date);
@@ -197,8 +203,8 @@ const SdCalendar = class {
                     '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) }, index.h("span", { class: "sd-calendar__day-circle" }, cell.inCurrentMonth ? cell.day : ''), hasEvents && (index.h("span", { class: "sd-calendar__dot-row", "aria-hidden": "true" }, dayEvents?.map((ev, i) => (index.h("span", { key: `${ev.color}|${ev.label}|${i}`, class: "sd-calendar__dot", style: { backgroundColor: ev.color } })))))));
         })), legend.length > 0 && [
-            index.h("span", { key: '79a0c77b04cc46c5278502e7062c13e3113a8ee2', class: "sd-calendar__divider-bottom", "aria-hidden": "true" }),
-            index.h("div", { key: '7b87c016d96a48efabcbc3b684a6fea78004f790', class: "sd-calendar__legend" }, legend.map(item => (index.h("span", { key: `${item.color}|${item.label}`, class: "sd-calendar__legend-item" }, index.h("span", { class: "sd-calendar__legend-dot", style: { backgroundColor: item.color }, "aria-hidden": "true" }), index.h("span", { class: "sd-calendar__legend-label" }, item.label))))),
+            index.h("span", { key: '713522194a9052e28b970f5eb6ad34941f7b6459', class: "sd-calendar__divider-bottom", "aria-hidden": "true" }),
+            index.h("div", { key: 'fffe4cf9c14362c14e04be5cab0172c73490137f', class: "sd-calendar__legend" }, legend.map(item => (index.h("span", { key: `${item.color}|${item.label}`, class: "sd-calendar__legend-item" }, index.h("span", { class: "sd-calendar__legend-dot", style: { backgroundColor: item.color }, "aria-hidden": "true" }), index.h("span", { class: "sd-calendar__legend-label" }, item.label))))),
         ]));
     }
     static get watchers() { return {
@@ -216,10 +222,15 @@ const SdDatePickerTrigger = class {
         index.registerInstance(this, hostRef);
         this.triggerClick = index.createEvent(this, "sdTriggerClick", 7);
     }
+    /** 표시할 날짜 텍스트 */
     displayText = '';
+    /** 입력 힌트 텍스트 */
     placeholder = 'YYYY-MM-DD';
+    /** 비활성 상태 여부 */
     disabled = false;
+    /** 트리거 크기 */
     size = 'sm';
+    /** 트리거 클릭 시 발생합니다. */
     triggerClick;
     handleClick = () => {
         if (this.disabled)
@@ -248,7 +259,7 @@ const SdDatePickerTrigger = class {
                 ? sdDatePicker_config.DATEPICKER_COLORS.icon.disabled
                 : sdDatePicker_config.DATEPICKER_COLORS.icon.default,
         };
-        return (index.h("div", { key: 'ed74f03f3860fe86e7bc3b5430501b064a0288a7', role: "button", tabindex: this.disabled ? -1 : 0, class: {
+        return (index.h("div", { key: 'a8484cc7ca6fd02ea48ab033fec3da69702f4f71', 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 => {
@@ -256,7 +267,7 @@ const SdDatePickerTrigger = class {
                     e.preventDefault();
                     this.handleClick();
                 }
-            } }, index.h("sd-icon", { key: '67994572f65a0f13622deef67f89b22c083791a0', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), index.h("span", { key: '142f26e05ae2287d03a9e733b64ddf34f2ed1256', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
+            } }, index.h("sd-icon", { key: 'e87c63032774389064c56f3212882727c1091b53', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), index.h("span", { key: '3876d7e9c08771de796ab04106190baf45625f0f', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
     }
 };
 SdDatePickerTrigger.style = sdDatePickerTriggerCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXm0PH2A.js');
+var index = require('./index-C-F-JEv_.js');
 var sanitizeInlineHtml = require('./sanitize-inline-html-CRCAeQ46.js');
 
 const callout$1 = {
@@ -97,7 +97,9 @@ const SdCallout = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
+    /** 콜아웃 타입 (색상·아이콘 조합 결정) */
     type = 'default';
+    /** 표시할 메시지 목록 (문자열 배열로 중첩 리스트 표현 가능) */
     message = [];
     get calloutStyle() {
         const typeConfig = CALLOUT_TYPE_CONFIG[this.type] ?? CALLOUT_TYPE_CONFIG.default;
@@ -144,7 +146,7 @@ const SdCallout = class {
     }
     render() {
         const showTitle = this.type === 'danger';
-        return (index.h("div", { key: '545b90999ad57577156a214468102ae5090e6f3e', class: "sd-callout", style: this.calloutStyle, role: "note" }, showTitle && this.renderTitle(), index.h("div", { key: '14e021beb9b1c9deb63490e17baf9bb72caefe0d', class: "sd-callout__body" }, this.renderBody())));
+        return (index.h("div", { key: 'd608e8393a52dec8074ae6e8c4c80f59eb88891f', class: "sd-callout", style: this.calloutStyle, role: "note" }, showTitle && this.renderTitle(), index.h("div", { key: '9950ae86dab1f76b7009b89b3dcb91ebfcff978b', class: "sd-callout__body" }, this.renderBody())));
     }
 };
 SdCallout.style = sdCalloutCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXm0PH2A.js');
+var index = require('./index-C-F-JEv_.js');
 
 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}`;
 
@@ -8,10 +8,12 @@ const SdCard = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
+    /** 테두리 표시 여부 */
     bordered = false;
+    /** 카드 루트 엘리먼트에 추가할 클래스 */
     sdClass = '';
     render() {
-        return (index.h(index.Fragment, { key: 'cda3366416a347552ffe66446f9fd1267654fa75' }, index.h("div", { key: '5b29d955402031dcc82df70df25fe1146787adec', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, index.h("slot", { key: 'f2a5c548de34d6bf32de75db76686da91d605e28' }))));
+        return (index.h(index.Fragment, { key: '1f40edfdae15a66922336229ebe49c570efa2059' }, index.h("div", { key: '365233f8ee792e36b6b6f1084ed1adc79787029b', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, index.h("slot", { key: 'd015ddda7cfb610e1def605d7077d710312514d1' }))));
     }
 };
 SdCard.style = sdCardCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXm0PH2A.js');
+var index = require('./index-C-F-JEv_.js');
 
 const checkbox = {
 	size: "16",
@@ -9,9 +9,13 @@ const checkbox = {
 	gap: "8",
 	icon: "12",
 	typography: {
-		fontWeight: "400",
-		fontSize: "12",
-		lineHeight: "20"},
+		"default": {
+			fontWeight: "400",
+			fontSize: "12",
+			lineHeight: "20"},
+		selected: {
+			fontWeight: "500"}
+	},
 	unchecked: {
 		bg: {
 			"default": "#FFFFFF",
@@ -37,7 +41,8 @@ const checkbox = {
 	},
 	label: {
 		"default": "#222222",
-		inverse: "#FFFFFF"
+		inverse: "#FFFFFF",
+		disabled: "#888888"
 	},
 	bg: {
 		disabled: "#E1E1E1"
@@ -58,9 +63,10 @@ const CHECKBOX_LAYOUT = {
     iconSize: checkboxTokens.checkbox.icon,
 };
 const CHECKBOX_TYPOGRAPHY = {
-    fontSize: checkboxTokens.checkbox.typography.fontSize,
-    lineHeight: checkboxTokens.checkbox.typography.lineHeight,
-    fontWeight: checkboxTokens.checkbox.typography.fontWeight,
+    fontSize: checkboxTokens.checkbox.typography.default.fontSize,
+    lineHeight: checkboxTokens.checkbox.typography.default.lineHeight,
+    fontWeight: checkboxTokens.checkbox.typography.default.fontWeight,
+    selectedFontWeight: checkboxTokens.checkbox.typography.selected.fontWeight,
 };
 const CHECKBOX_COLORS = {
     unchecked: {
@@ -78,13 +84,14 @@ const CHECKBOX_COLORS = {
     },
     label: checkboxTokens.checkbox.label.default,
     labelInverse: checkboxTokens.checkbox.label.inverse,
+    labelDisabled: checkboxTokens.checkbox.label.disabled,
     disabled: {
         bg: checkboxTokens.checkbox.bg.disabled,
         border: checkboxTokens.checkbox.border.disabled,
     },
 };
 
-const sdCheckboxCss = () => `sd-checkbox{display:block;height:var(--sd-checkbox-line-height);line-height:0}sd-checkbox .sd-checkbox{cursor:pointer;display:inline-flex;align-items:center;gap:var(--sd-checkbox-gap);height:var(--sd-checkbox-line-height);max-height:var(--sd-checkbox-line-height)}sd-checkbox .sd-checkbox>input{position:absolute;width:0;height:0;opacity:0;pointer-events:none}sd-checkbox .sd-checkbox>input:focus-visible+.sd-checkbox__bg{box-shadow:0 0 0 2px white, 0 0 0 4px var(--sd-checkbox-checked-bg);outline:none}sd-checkbox .sd-checkbox:hover.sd-checkbox--unchecked .sd-checkbox__bg{border-color:var(--sd-checkbox-unchecked-border-hover);background:var(--sd-checkbox-unchecked-bg-hover)}sd-checkbox .sd-checkbox:hover.sd-checkbox--disabled .sd-checkbox__bg{border-color:transparent;background:var(--sd-checkbox-disabled-bg)}sd-checkbox .sd-checkbox__bg{width:var(--sd-checkbox-size);height:var(--sd-checkbox-size);border-radius:var(--sd-checkbox-radius);border:var(--sd-checkbox-border-width) solid var(--sd-checkbox-unchecked-border);box-sizing:border-box;display:inline-flex;justify-content:center;align-items:center;overflow:hidden;line-height:0}sd-checkbox .sd-checkbox__label{font-size:var(--sd-checkbox-font-size);font-weight:var(--sd-checkbox-font-weight);color:var(--sd-checkbox-label-color);line-height:var(--sd-checkbox-line-height)}sd-checkbox .sd-checkbox--checked .sd-checkbox__bg,sd-checkbox .sd-checkbox--indeterminate .sd-checkbox__bg{border-color:var(--sd-checkbox-checked-bg);background:var(--sd-checkbox-checked-bg)}sd-checkbox .sd-checkbox--checked.sd-checkbox--disabled .sd-checkbox__bg,sd-checkbox .sd-checkbox--indeterminate.sd-checkbox--disabled .sd-checkbox__bg{background:var(--sd-checkbox-disabled-bg);border-color:var(--sd-checkbox-disabled-border)}sd-checkbox .sd-checkbox--unchecked .sd-checkbox__bg{background:var(--sd-checkbox-unchecked-bg)}sd-checkbox .sd-checkbox--disabled{cursor:not-allowed}sd-checkbox .sd-checkbox--disabled .sd-checkbox__bg{background:var(--sd-checkbox-disabled-bg);border-color:var(--sd-checkbox-disabled-border)}sd-checkbox .sd-checkbox--inverse .sd-checkbox__label{color:var(--sd-checkbox-inverse-label)}sd-checkbox .sd-checkbox--inverse.sd-checkbox--unchecked .sd-checkbox__bg{background:transparent;border-color:var(--sd-checkbox-inverse-border)}sd-checkbox .sd-checkbox--inverse.sd-checkbox--checked .sd-checkbox__bg,sd-checkbox .sd-checkbox--inverse.sd-checkbox--indeterminate .sd-checkbox__bg{background:transparent;border-color:var(--sd-checkbox-inverse-border)}sd-checkbox .sd-checkbox--inverse:hover.sd-checkbox--unchecked .sd-checkbox__bg{background:rgba(255, 255, 255, 0.12);border-color:var(--sd-checkbox-inverse-border)}`;
+const sdCheckboxCss = () => `sd-checkbox{display:block;height:var(--sd-checkbox-line-height);line-height:0}sd-checkbox .sd-checkbox{cursor:pointer;display:inline-flex;align-items:center;gap:var(--sd-checkbox-gap);height:var(--sd-checkbox-line-height);max-height:var(--sd-checkbox-line-height)}sd-checkbox .sd-checkbox>input{position:absolute;width:0;height:0;opacity:0;pointer-events:none}sd-checkbox .sd-checkbox>input:focus-visible+.sd-checkbox__bg{box-shadow:0 0 0 2px white, 0 0 0 4px var(--sd-checkbox-checked-bg);outline:none}sd-checkbox .sd-checkbox:hover.sd-checkbox--unchecked .sd-checkbox__bg{border-color:var(--sd-checkbox-unchecked-border-hover);background:var(--sd-checkbox-unchecked-bg-hover)}sd-checkbox .sd-checkbox:hover.sd-checkbox--disabled .sd-checkbox__bg{border-color:transparent;background:var(--sd-checkbox-disabled-bg)}sd-checkbox .sd-checkbox__bg{width:var(--sd-checkbox-size);height:var(--sd-checkbox-size);border-radius:var(--sd-checkbox-radius);border:var(--sd-checkbox-border-width) solid var(--sd-checkbox-unchecked-border);box-sizing:border-box;display:inline-flex;justify-content:center;align-items:center;overflow:hidden;line-height:0}sd-checkbox .sd-checkbox__label{display:inline-flex;flex-direction:column;font-size:var(--sd-checkbox-font-size);font-weight:var(--sd-checkbox-font-weight);color:var(--sd-checkbox-label-color);line-height:var(--sd-checkbox-line-height)}sd-checkbox .sd-checkbox__label::after{content:attr(data-text);height:0;font-weight:var(--sd-checkbox-font-weight-selected);overflow:hidden;visibility:hidden;pointer-events:none}sd-checkbox .sd-checkbox--checked .sd-checkbox__label,sd-checkbox .sd-checkbox--indeterminate .sd-checkbox__label{font-weight:var(--sd-checkbox-font-weight-selected)}sd-checkbox .sd-checkbox--checked .sd-checkbox__bg,sd-checkbox .sd-checkbox--indeterminate .sd-checkbox__bg{border-color:var(--sd-checkbox-checked-bg);background:var(--sd-checkbox-checked-bg)}sd-checkbox .sd-checkbox--checked.sd-checkbox--disabled .sd-checkbox__bg,sd-checkbox .sd-checkbox--indeterminate.sd-checkbox--disabled .sd-checkbox__bg{background:var(--sd-checkbox-disabled-bg);border-color:var(--sd-checkbox-disabled-border)}sd-checkbox .sd-checkbox--unchecked .sd-checkbox__bg{background:var(--sd-checkbox-unchecked-bg)}sd-checkbox .sd-checkbox--disabled{cursor:not-allowed}sd-checkbox .sd-checkbox--disabled .sd-checkbox__label{color:var(--sd-checkbox-label-disabled)}sd-checkbox .sd-checkbox--disabled .sd-checkbox__bg{background:var(--sd-checkbox-disabled-bg);border-color:var(--sd-checkbox-disabled-border)}sd-checkbox .sd-checkbox--inverse .sd-checkbox__label{color:var(--sd-checkbox-inverse-label)}sd-checkbox .sd-checkbox--inverse.sd-checkbox--unchecked .sd-checkbox__bg{background:transparent;border-color:var(--sd-checkbox-inverse-border)}sd-checkbox .sd-checkbox--inverse.sd-checkbox--checked .sd-checkbox__bg,sd-checkbox .sd-checkbox--inverse.sd-checkbox--indeterminate .sd-checkbox__bg{background:transparent;border-color:var(--sd-checkbox-inverse-border)}sd-checkbox .sd-checkbox--inverse:hover.sd-checkbox--unchecked .sd-checkbox__bg{background:rgba(255, 255, 255, 0.12);border-color:var(--sd-checkbox-inverse-border)}`;
 
 const SdCheckbox = class {
     constructor(hostRef) {
@@ -183,25 +190,27 @@ const SdCheckbox = class {
             '--sd-checkbox-font-size': `${CHECKBOX_TYPOGRAPHY.fontSize}px`,
             '--sd-checkbox-line-height': `${CHECKBOX_TYPOGRAPHY.lineHeight}px`,
             '--sd-checkbox-font-weight': CHECKBOX_TYPOGRAPHY.fontWeight,
+            '--sd-checkbox-font-weight-selected': CHECKBOX_TYPOGRAPHY.selectedFontWeight,
             '--sd-checkbox-unchecked-bg': CHECKBOX_COLORS.unchecked.bg,
             '--sd-checkbox-unchecked-bg-hover': CHECKBOX_COLORS.unchecked.bgHover,
             '--sd-checkbox-unchecked-border': CHECKBOX_COLORS.unchecked.border,
             '--sd-checkbox-unchecked-border-hover': CHECKBOX_COLORS.unchecked.borderHover,
             '--sd-checkbox-checked-bg': CHECKBOX_COLORS.checked.bg,
             '--sd-checkbox-label-color': CHECKBOX_COLORS.label,
+            '--sd-checkbox-label-disabled': CHECKBOX_COLORS.labelDisabled,
             '--sd-checkbox-disabled-bg': CHECKBOX_COLORS.disabled.bg,
             '--sd-checkbox-disabled-border': CHECKBOX_COLORS.disabled.border,
             '--sd-checkbox-inverse-border': CHECKBOX_COLORS.checked.borderInverse,
             '--sd-checkbox-inverse-icon': CHECKBOX_COLORS.checked.iconInverse,
             '--sd-checkbox-inverse-label': CHECKBOX_COLORS.labelInverse,
         };
-        return (index.h("label", { key: '1e1ba8ab22e34327cfdfb8d236aba0e1ff2806f6', class: this.checkboxClasses, style: cssVars }, index.h("input", { key: '82b852e0fb3ca94c460b7181ae1c575b361ddd4d', type: "checkbox", ref: el => {
+        return (index.h("label", { key: '3fa9a68790e4a777904d1c8ec1fc18b646a2e41b', class: this.checkboxClasses, style: cssVars }, index.h("input", { key: 'ecbabd8967c8c73e0b9216157d96b5d5f07777bd', 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' }), index.h("div", { key: 'e7a32ccbb915c857d188fecde0b388e15edebdfb', class: "sd-checkbox__bg" }, this.isChecked !== false ? (index.h("sd-icon", { name: this.isChecked === true ? 'checkboxCheck' : 'checkboxIndeterminate', size: Number(CHECKBOX_LAYOUT.iconSize), color: this.disabled
+            }, value: this.val, checked: !!this.isChecked, disabled: this.disabled, onChange: this.handleChange, name: this.val?.toString() || 'checkbox', "aria-label": this.label || 'checkbox', "aria-checked": this.isChecked === null ? 'mixed' : this.isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }), index.h("div", { key: '633c38ae79790aa5745240f68253613705f804cf', class: "sd-checkbox__bg" }, this.isChecked !== false ? (index.h("sd-icon", { name: this.isChecked === true ? 'checkboxCheck' : 'checkboxIndeterminate', size: Number(CHECKBOX_LAYOUT.iconSize), color: this.disabled
                 ? CHECKBOX_COLORS.checked.iconDisabled
                 : this.inverse
                     ? CHECKBOX_COLORS.checked.iconInverse
-                    : CHECKBOX_COLORS.checked.icon })) : null), this.label && index.h("span", { key: '396b7aa27a10428e5d9d24a3f523c3a384d4e463', class: "sd-checkbox__label" }, this.label)));
+                    : CHECKBOX_COLORS.checked.icon })) : null), this.label && (index.h("span", { key: '6e46c09aa41d4d1b0dbad75b825513d6e4e08f11', class: "sd-checkbox__label", "data-text": this.label }, this.label))));
     }
     static get watchers() { return {
         "value": [{