@sellmate/design-system 1.27.1 → 1.29.0

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-BZg-6aSz.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: 'dded99ece17ee7308da9c7183a725493f705caf2', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, h("input", { key: '8ca9b17fbbd97cdfe351f06fa5dba7efb22faf39', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), h("div", { key: 'dffb2503df8755076218fc24ce974ed5cccb37c3', class: "sd-switch__track" }, h("div", { key: '52b8d7b125bf3a2fdddbcfe4690933432cb0ff29', class: "sd-switch__knob" })), this.label && h("span", { key: 'e4e62e02aa1d7336bf1de5add45ed0b2dbecbcd1', 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-BZg-6aSz.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: 'd5df329922f73444775ec827ce8cf3850c369131', 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-BZg-6aSz.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-BZg-6aSz.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: '17526924c57e06a77725f66233f5b5360097fac0', 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-BZg-6aSz.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: '124b32e52e9dfd7a09ac67ffb8032bf2217e9c05', 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: '54eddcc1fe8a0eab427a084e589c0f9a2e0412bf', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (h("div", { key: '0ff05c4e7cb8dda2f2732cd09bfc586cb21020b6', class: "sd-toast__icon" }, h("sd-icon", { key: '41e1e259ef605454ee680bbd3228c418f013283e', name: this.icon, size: iconSize, color: iconColor }))), h("div", { key: '7db4e1bc0ce80bd1887476ac728a7999cb4fee93', class: "sd-toast__content" }, h("span", { key: '88925dfa075a5da813466a74a0f5fa4cb61e3bc9', class: "sd-toast__message" }, this.message)), this.link && (h("a", { key: '068aaf887a6fe8c18f7db6e513778d862e09bd56', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (h("sd-button", { key: 'fb066d2cfaad7668aec48caafc6eb6d6e19ebaee', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (h("sd-ghost-button", { key: 'e610479efe5034a222aa98d19232682243214ee0', 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-BZg-6aSz.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: '2b988ca6148da376d9af21538b03764423cb3a0a', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, h("input", { key: 'b1bd161b88a627ba296197902d46181925511c70', 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-BAi-pktU.js → tooltipArrow-CEHVt90h.js}

@@ -1,4 +1,4 @@
-import { h } from './index-BZg-6aSz.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-circle-progress/sd-circle-progress.d.ts

@@ -8,6 +8,8 @@ export declare class SdCircleProgress {
     type: CircleProgressType;
     /** 원 하단에 표시할 레이블 텍스트 */
     label?: string;
+    /** true면 퍼센트를 원 아래가 아닌 원 가운데에 표시 */
+    innerValue: boolean;
     private get clampedValue();
     render(): any;
 }

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-file-picker/sd-file-picker.config.d.ts

@@ -29,3 +29,9 @@ export declare const FILE_PICKER_COLORS: {
         disabled: string;
     };
 };
+export declare const FILE_PICKER_LIST_BOX: {
+    radius: string;
+    bg: string;
+    chipPadding: string;
+    chipGap: string;
+};

package/dist/types/components/sd-file-picker/sd-file-picker.d.ts

@@ -14,6 +14,8 @@ export declare class SdFilePicker implements ComponentInterface {
     inline: boolean;
     /** 다중 파일 선택 여부 */
     multiple: boolean;
+    /** multiple 파일 목록을 필드 아래 칩 대신, caret(▼) 클릭 시 열리는 리스트박스 카드로 표시 */
+    useMultipleListBox: boolean;
     /** 허용할 파일 타입 (input accept 속성과 동일) */
     accept?: string;
     /** 파일 한 개의 최대 크기 (bytes) */
@@ -56,9 +58,13 @@ export declare class SdFilePicker implements ComponentInterface {
     hovered: boolean;
     private internalValue;
     private showTooltip;
+    private isListboxOpen;
+    private listboxWidth;
     private fileInputRef?;
     private fileNamesRef?;
+    private contentRef?;
     private formField?;
+    private static readonly VIEWPORT_PADDING;
     /** 파일 선택 또는 삭제 시 현재 파일 값을 전달합니다. */
     update: EventEmitter<File[] | File | null>;
     /** 파일이 크기·개수 제한을 초과하여 거부됐을 때 발생합니다. */
@@ -80,11 +86,15 @@ export declare class SdFilePicker implements ComponentInterface {
     private handleFileChange;
     private handleClear;
     private handleClick;
+    /** caret(▼) 클릭 시 파일 목록 리스트박스를 토글한다. */
+    private handleListboxToggle;
+    private closeListbox;
     private hasFiles;
     private hasChips;
     private getDisplayText;
     private handleChipRemove;
     private renderChipList;
+    private renderListbox;
     private checkOverflow;
     private getIconColor;
     render(): any;

package/dist/types/components/sd-guide/sd-guide.config.d.ts

@@ -25,7 +25,6 @@ export declare const GUIDE_CONFIG: {
         readonly paddingX: `${string}px`;
         readonly paddingY: `${string}px`;
         readonly gap: `${string}px`;
-        readonly rowGap: `${string}px`;
         readonly bodyGap: `${string}px`;
         readonly titleGap: `${string}px`;
         readonly radius: `${string}px`;

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-loading-modal/sd-loading-modal.d.ts

@@ -17,6 +17,8 @@ export declare class SdLoadingModal {
     progress?: number;
     /** 버튼 클릭 시 발생합니다. */
     click: EventEmitter<void>;
+    /** 닫기 버튼 클릭 시 발생합니다. (error 상태에서만 노출) */
+    close: EventEmitter<void>;
     private get resolvedState();
     private get resolvedMessage();
     private get resolvedButtonLabel();

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;
     /**
      * 모달이 열릴 때 트리거 요소(버튼 등)에 남아 있던 포커스를 모달 내부로