@sellmate/design-system 1.28.0 → 1.29.0

package/dist/esm/sd-switch.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-DDNBPrZh.js';
+import { r as registerInstance, c as createEvent, h } from './index-Dz490Ukt.js';
 
 var switchTokens = {
 	"switch": {
@@ -107,7 +107,7 @@ const SdSwitch = class {
             '--sd-switch-line-height': `${SWITCH_TYPOGRAPHY.lineHeight}px`,
             '--sd-switch-text-decoration': SWITCH_TYPOGRAPHY.textDecoration,
         };
-        return (h("label", { key: '0dd7063a45e2adc589e2e8dfc7cdb5c0c585aeac', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, h("input", { key: '01b94b14edd1571b8e21ba5a8bb72a0bd151b3a2', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), h("div", { key: '6c6bfaa3909ed885811f3e2af402d3a16c9b75e2', class: "sd-switch__track" }, h("div", { key: 'd3861a5c67779b7e871d7a2f45b20439648402cc', class: "sd-switch__knob" })), this.label && h("span", { key: '25c5198adb208b1016e9eb5bf01eaa6fb501ebe5', class: "sd-switch__label" }, this.label)));
+        return (h("label", { key: '96321de1da84594a8c4fc760c44e49f12168be13', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, h("input", { key: '5c89628f13ef22e19fadc53eea7e42428e783e83', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), h("div", { key: '11aa858c208ae5fb7c0f782e857abced64bcb0c3', class: "sd-switch__track" }, h("div", { key: '9fc34ece3e66ca3c60824e44123d98a4179924ee', class: "sd-switch__knob" })), this.label && h("span", { key: '1439b0ef2b5511560e5737452d1d21e74801e325', class: "sd-switch__label" }, this.label)));
     }
 };
 SdSwitch.style = sdSwitchCss();

package/dist/esm/sd-tabs.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-DDNBPrZh.js';
+import { r as registerInstance, c as createEvent, h } from './index-Dz490Ukt.js';
 
 const tab = {
 	main: {
@@ -205,7 +205,7 @@ const SdTabs = class {
         };
     }
     render() {
-        return (h("div", { key: 'a844eb9710ff03e3878225aa8dc5e14ed270efde', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
+        return (h("div", { key: '4306137f9dd004ec5ef43b8bdd9e3614adab23ed', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
             const badgeName = this.getBadgeName(tab);
             return (h("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 === ' ') {

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-DDNBPrZh.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-Dz490Ukt.js';
 
 const textLink = {
 	sm: {

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-DDNBPrZh.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-Dz490Ukt.js';
 
 const DEFAULT_DURATION = 4000;
 const DEFAULT_MAX_VISIBLE = 3;
@@ -241,7 +241,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 (h("div", { key: '005ce1d424e17b13a685c99e49d2eeda295d4346', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
+        return (h("div", { key: '9d0347cd5aba313c4e5cddaf7ecd9eaa3be096c8', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
                 this.expanded = true;
                 this.pauseTimers();
             }, onMouseLeave: () => {

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-DDNBPrZh.js';
+import { r as registerInstance, c as createEvent, h } from './index-Dz490Ukt.js';
 
 const toast = {
 	icon: "16",
@@ -91,12 +91,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 (h("div", { key: '434d4e58eed6589ed5cceb9df4c131a0594055e6', style: {
+        return (h("div", { key: 'c402e2eabab8b2d229cc40550d2ffb7c601ad992', style: {
                 '--sd-toast-bg': typeConfig.bg,
                 '--sd-toast-text': typeConfig.content,
                 '--sd-toast-icon': iconColor,
                 '--sd-toast-link': linkColor,
-            } }, h("div", { key: '51209146aa46961d9a673417b72e96e1aef3f53b', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (h("div", { key: 'a2b10d38936b85174d0315cae7bee2115ae06aba', class: "sd-toast__icon" }, h("sd-icon", { key: '96243916be0cf117a0f85801de8294eec8f7900b', name: this.icon, size: iconSize, color: iconColor }))), h("div", { key: 'bb5b2363aafb9322a356f7e0e94acd5b2723f8d2', class: "sd-toast__content" }, h("span", { key: '25535fc30123491e5cea78ae17ee8e32c2c8b986', class: "sd-toast__message" }, this.message)), this.link && (h("a", { key: 'bf110d2492ae38fbac422f7fbf6177bbd56fae2d', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (h("sd-button", { key: 'f8543c13d11222bac64dd4eab79cda0eaf78a396', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (h("sd-ghost-button", { key: 'c9ccf9348f116c3a5b22d649407c281cb22c09ab', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
+            } }, h("div", { key: 'a6dbbc079649181799f434f7158791ec1e52fd4a', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (h("div", { key: 'c8210c48776c0722ed025049ebfce5eb8477df0a', class: "sd-toast__icon" }, h("sd-icon", { key: 'ee99941287447694a3aa700281bacdbb5d9605bc', name: this.icon, size: iconSize, color: iconColor }))), h("div", { key: 'f4be8a8599e84bb75aeaa5414cf6ff2cd063e391', class: "sd-toast__content" }, h("span", { key: 'af60e01cf1be615fd3b462885c9060445e49c809', class: "sd-toast__message" }, this.message)), this.link && (h("a", { key: 'cd7bbe3ef56e6f475d4182118321645b444c2334', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (h("sd-button", { key: '87c9a38fead8416d36850ff9247d02a962e92f27', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (h("sd-ghost-button", { key: '1af5e0ffa26a26574bb9935fdeb01192895c32eb', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
     }
 };
 SdToast.style = sdToastCss();

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-DDNBPrZh.js';
+import { r as registerInstance, c as createEvent, h } from './index-Dz490Ukt.js';
 
 const toggle = {
 	height: "28",
@@ -121,7 +121,7 @@ const SdToggle = class {
             '--sd-toggle-content-select': TOGGLE_COLORS.content.select,
             '--sd-toggle-content-disabled': TOGGLE_COLORS.content.disabled,
         };
-        return (h("label", { key: 'e60aa1379566c4586ea4f7e852425f8829e806d1', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, h("input", { key: '9f2260749b392c0c72ad2a53b515f0b886e62c3a', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        return (h("label", { key: '26ca7c70bf68964bc7bd0fd321912ee49dfc5c73', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, h("input", { key: '5189d6d9f234921d78a0bd3cdded8256ad273702', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
 };
 SdToggle.style = sdToggleCss();

package/dist/esm/{system-BJfiMC9H.js → system-Bth2l1cy.js}

@@ -19,13 +19,7 @@ const color = {
 	},
 	divider: {
 		"default": "#E1E1E1"
-	},
-	blue: {
-		strong: "#0075FF"},
-	darkblue: {
-		strong: "#006AC1"},
-	grey: {
-		strong: "#737373"}};
+	}};
 const shadow = {
 	spread: {
 		md: {

package/dist/esm/{tooltipArrow-blL0aWPE.js → tooltipArrow-CEHVt90h.js}

@@ -1,4 +1,4 @@
-import { h } from './index-DDNBPrZh.js';
+import { h } from './index-Dz490Ukt.js';
 
 const TooltipArrow = (props) => (h("svg", { width: "16", height: "12", viewBox: "0 0 16 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, 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/esm/{useDatePicker-DoUg--aq.js → useDatePicker-BG0lUGJG.js}

@@ -1,4 +1,4 @@
-import { d as datepickerTokens } from './component.datepicker-laVsm9VM.js';
+import { d as datepickerTokens } from './component.datepicker-BOxGhKKP.js';
 
 const CALENDAR_LAYOUT = {
     bg: datepickerTokens.datepicker.calendar.bg,

package/dist/types/components/sd-confirm-modal/sd-confirm-modal.d.ts

@@ -2,8 +2,8 @@ import { EventEmitter } from '../../stencil-public-runtime';
 import { type ConfirmModalMainButton, type ConfirmModalType, type TagName } from './sd-confirm-modal.config';
 export declare class SdConfirmModal {
     el: HTMLElement;
-    private hasSlottedContent;
-    private customContentRef?;
+    private hasTagSlot;
+    private hasOptionSlot;
     private slotObserver?;
     /** 모달 타입 (아이콘·버튼 색상 결정) */
     type: ConfirmModalType;
@@ -21,14 +21,12 @@ export declare class SdConfirmModal {
     mainButtonLabel: string;
     /** 취소 버튼 레이블 (없으면 취소 버튼 미표시) */
     subButtonLabel: string;
-    /** 콘텐츠 박스에 표시할 태그 프리셋 */
+    /** 콘텐츠 박스 tag 슬롯 기본 태그 프리셋 (slot="tag" 미지정 시) */
     tagPreset: TagName;
-    /** 콘텐츠 박스에 표시할 태그 레이블 */
+    /** 콘텐츠 박스 tag 슬롯 기본 태그 레이블 (slot="tag" 미지정 시) */
     tagLabel: string;
-    /** 콘텐츠 박스에 표시할 텍스트 (tagLabel 없을 때 사용) */
+    /** 콘텐츠 박스 option 슬롯 기본 텍스트 (slot="option" 미지정 시) */
     slotLabel: string;
-    /** 콘텐츠 박스에 직접 삽입할 HTMLElement */
-    tagContents?: HTMLElement;
     /** 닫기 버튼 클릭 시 발생합니다. */
     close: EventEmitter<void>;
     /** 취소 버튼 클릭 시 발생합니다. */
@@ -37,12 +35,14 @@ export declare class SdConfirmModal {
     ok: EventEmitter<void>;
     componentWillLoad(): void;
     componentDidLoad(): void;
-    componentDidRender(): void;
     disconnectedCallback(): void;
     private get resolvedType();
     private get resolvedMainButton();
-    private get hasTagContent();
-    private get showContentBox();
+    /** tag 위치 콘텐츠 박스 표시 여부 (tagLabel fallback 또는 slot="tag") */
+    private get showTagBox();
+    /** option 위치(bottomMessage 아래) 표시 여부 (slotLabel fallback 또는 slot="option") */
+    private get showOption();
+    /** light-DOM 에 slot="tag" / slot="option" 콘텐츠가 있는지 감지 */
     private syncHasSlottedContent;
     render(): any;
 }

package/dist/types/components/sd-key-value-table/sd-key-value-table.config.d.ts

@@ -5,6 +5,8 @@ export declare const KEY_VALUE_TABLE_LAYOUT: {
     borderRadius: number;
     thPaddingX: number;
     padding: number;
+    tdPaddingX: number;
+    tdPaddingXWide: number;
     helpIconSize: number;
     requiredIconSize: number;
     gap: number;
@@ -100,8 +102,25 @@ export type SdKeyValueField = (FieldBase & {
     type: 'file-picker';
     options?: SdKeyValueFilePickerOptions;
 });
-export interface SdKeyValueChangeDetail {
-    name: string;
-    value: unknown;
+/**
+ * field type별 `sdChange`로 올라오는 값 타입.
+ * - `string`: input · textarea · select · radio · date-picker
+ * - `number`: number-input
+ * - `boolean`: checkbox
+ * - `string[]`: date-range-picker
+ */
+export type SdKeyValueFieldValue = string | number | boolean | string[];
+/**
+ * `sdChange` 이벤트 detail.
+ * 제네릭 `V`에 폼 값 형태(`{ [name]: value }`)를 넘기면 `name`/`value`/`values`가 정밀하게 타이핑됩니다.
+ * 미지정 시 `value`는 {@link SdKeyValueFieldValue} 유니온으로 잡힙니다.
+ */
+export interface SdKeyValueChangeDetail<V extends Record<string, SdKeyValueFieldValue> = Record<string, SdKeyValueFieldValue>> {
+    /** 변경된 field의 name */
+    name: Extract<keyof V, string>;
+    /** 변경된 field의 새 값 */
+    value: V[Extract<keyof V, string>];
+    /** 변경이 반영된 전체 값 객체 (`{ [name]: value }`). controlled 패턴에서 그대로 상태에 반영하면 됩니다. */
+    values: V;
 }
 export {};

package/dist/types/components/sd-key-value-table/sd-key-value-table.d.ts

@@ -6,6 +6,12 @@ export declare class SdKeyValueTable {
      * 한 row에 여러 field를 넣으면 [th|td|th|td...] 형태로 렌더.
      */
     fields: SdKeyValueField[][];
+    /**
+     * field name을 key로 하는 값 객체 (`{ [name]: value }`).
+     * 지정 시 해당 field의 값으로 사용되며, field별 `options.value`보다 우선합니다.
+     * `sdChange`의 `detail.values`와 함께 controlled 패턴으로 사용합니다.
+     */
+    values: Record<string, unknown>;
     /**
      * true이면 테이블 우측에 검색 버튼 패널을 표시. 클릭 시 `sdSearch` 이벤트 emit.
      */
@@ -17,11 +23,13 @@ export declare class SdKeyValueTable {
      * - 'full': 상하단 모두 radius 0 (요소 사이에 끼워 쓸 때)
      */
     radius: 'default' | 'useTop' | 'full';
-    /** 필드 값이 변경될 때 `{ name, value }` 형태로 발생합니다. */
+    /** 필드 값이 변경될 때 `{ name, value, values }` 형태로 발생합니다. `values`는 갱신된 전체 값 객체입니다. */
     change: EventEmitter<SdKeyValueChangeDetail>;
     /** search 패널의 검색 버튼 클릭 시 발생합니다. */
     searchEvent: EventEmitter<void>;
     private emit;
+    /** values prop이 해당 field를 가지면 그 값을, 없으면 field.options.value를 사용. */
+    private resolveOptions;
     private handleSearchClick;
     private renderField;
     private renderHelpIcon;

package/dist/types/components/sd-modal-container/sd-modal-container.config.d.ts

@@ -13,7 +13,10 @@ export interface ConfirmModalOptions {
     tagPreset?: TagName;
     tagLabel?: string;
     slotLabel?: string;
+    /** 콘텐츠 박스 tag 위치에 직접 삽입할 HTMLElement (slot="tag") */
     tagContents?: HTMLElement;
+    /** 콘텐츠 박스 option 위치에 직접 삽입할 HTMLElement (slot="option") */
+    optionContents?: HTMLElement;
     persistent?: boolean;
 }
 export interface LoadingModalOptions {

package/dist/types/components/sd-modal-container/sd-modal-container.d.ts

@@ -31,6 +31,8 @@ export declare class SdModalContainer {
     private createLoadingModal;
     private applyLoadingProps;
     private applyProps;
+    /** confirm 모달의 named slot(tag/option) 위치에 HTMLElement 를 light-DOM 으로 주입한다. */
+    private setSlotContent;
     private handleBackdropClick;
     /**
      * 모달이 열릴 때 트리거 요소(버튼 등)에 남아 있던 포커스를 모달 내부로