@sellmate/design-system 1.32.0 → 1.33.0

package/dist/types/components.d.ts

@@ -1017,6 +1017,38 @@ export namespace Components {
          */
         "split": boolean;
     }
+    interface SdExpansionItem {
+        /**
+          * body 내부 패딩 사용 여부
+          * @default true
+         */
+        "bodyPadding": boolean;
+        /**
+          * compact 높이 사용 여부
+          * @default false
+         */
+        "dense": boolean;
+        /**
+          * 중첩 단계 (1~3)
+          * @default 1
+         */
+        "depth": 1 | 2 | 3;
+        /**
+          * 토글 비활성화 여부
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * 펼침 상태
+          * @default false
+         */
+        "expanded": boolean;
+        /**
+          * 헤더에 표시할 텍스트
+          * @default ''
+         */
+        "title": string;
+    }
     interface SdField {
         /**
           * 어드온 정렬 방향
@@ -1138,7 +1170,7 @@ export namespace Components {
          */
         "status"?: 'default' | 'pass' | 'error';
         /**
-          * 필드 너비 (숫자면 px, 문자열이면 그대로 적용)
+          * 필드 너비 (숫자면 px, 문자열이면 그대로 적용). 지정하면 필드가 부모 폭을 다 먹지 않고 (레이블 + width) 만큼만 차지한다. 다른 요소와 나란히 놓으려면 부모를 flex 로 두면 된다.
           * @default ''
          */
         "width": string | number;
@@ -3216,6 +3248,10 @@ export interface SdDropdownButtonCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLSdDropdownButtonElement;
 }
+export interface SdExpansionItemCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLSdExpansionItemElement;
+}
 export interface SdFilePickerCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLSdFilePickerElement;
@@ -3631,6 +3667,23 @@ declare global {
         prototype: HTMLSdDropdownButtonElement;
         new (): HTMLSdDropdownButtonElement;
     };
+    interface HTMLSdExpansionItemElementEventMap {
+        "sdToggle": boolean;
+    }
+    interface HTMLSdExpansionItemElement extends Components.SdExpansionItem, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLSdExpansionItemElementEventMap>(type: K, listener: (this: HTMLSdExpansionItemElement, ev: SdExpansionItemCustomEvent<HTMLSdExpansionItemElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLSdExpansionItemElementEventMap>(type: K, listener: (this: HTMLSdExpansionItemElement, ev: SdExpansionItemCustomEvent<HTMLSdExpansionItemElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLSdExpansionItemElement: {
+        prototype: HTMLSdExpansionItemElement;
+        new (): HTMLSdExpansionItemElement;
+    };
     interface HTMLSdFieldElement extends Components.SdField, HTMLStencilElement {
     }
     var HTMLSdFieldElement: {
@@ -4279,6 +4332,7 @@ declare global {
         "sd-date-range-picker-calendar": HTMLSdDateRangePickerCalendarElement;
         "sd-divider": HTMLSdDividerElement;
         "sd-dropdown-button": HTMLSdDropdownButtonElement;
+        "sd-expansion-item": HTMLSdExpansionItemElement;
         "sd-field": HTMLSdFieldElement;
         "sd-file-picker": HTMLSdFilePickerElement;
         "sd-floating-portal": HTMLSdFloatingPortalElement;
@@ -5285,6 +5339,42 @@ declare namespace LocalJSX {
          */
         "split"?: boolean;
     }
+    interface SdExpansionItem {
+        /**
+          * body 내부 패딩 사용 여부
+          * @default true
+         */
+        "bodyPadding"?: boolean;
+        /**
+          * compact 높이 사용 여부
+          * @default false
+         */
+        "dense"?: boolean;
+        /**
+          * 중첩 단계 (1~3)
+          * @default 1
+         */
+        "depth"?: 1 | 2 | 3;
+        /**
+          * 토글 비활성화 여부
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * 펼침 상태
+          * @default false
+         */
+        "expanded"?: boolean;
+        /**
+          * 펼침 상태 변경 시 발생합니다.
+         */
+        "onSdToggle"?: (event: SdExpansionItemCustomEvent<boolean>) => void;
+        /**
+          * 헤더에 표시할 텍스트
+          * @default ''
+         */
+        "title"?: string;
+    }
     interface SdField {
         /**
           * 어드온 정렬 방향
@@ -5390,7 +5480,7 @@ declare namespace LocalJSX {
          */
         "status"?: 'default' | 'pass' | 'error';
         /**
-          * 필드 너비 (숫자면 px, 문자열이면 그대로 적용)
+          * 필드 너비 (숫자면 px, 문자열이면 그대로 적용). 지정하면 필드가 부모 폭을 다 먹지 않고 (레이블 + width) 만큼만 차지한다. 다른 요소와 나란히 놓으려면 부모를 flex 로 두면 된다.
           * @default ''
          */
         "width"?: string | number;
@@ -7609,6 +7699,14 @@ declare namespace LocalJSX {
         "disabled": boolean;
         "split": boolean;
     }
+    interface SdExpansionItemAttributes {
+        "title": string;
+        "expanded": boolean;
+        "dense": boolean;
+        "depth": 1 | 2 | 3;
+        "bodyPadding": boolean;
+        "disabled": boolean;
+    }
     interface SdFieldAttributes {
         "name": string;
         "error": boolean;
@@ -8048,6 +8146,7 @@ declare namespace LocalJSX {
         "sd-date-range-picker-calendar": Omit<SdDateRangePickerCalendar, keyof SdDateRangePickerCalendarAttributes> & { [K in keyof SdDateRangePickerCalendar & keyof SdDateRangePickerCalendarAttributes]?: SdDateRangePickerCalendar[K] } & { [K in keyof SdDateRangePickerCalendar & keyof SdDateRangePickerCalendarAttributes as `attr:${K}`]?: SdDateRangePickerCalendarAttributes[K] } & { [K in keyof SdDateRangePickerCalendar & keyof SdDateRangePickerCalendarAttributes as `prop:${K}`]?: SdDateRangePickerCalendar[K] };
         "sd-divider": Omit<SdDivider, keyof SdDividerAttributes> & { [K in keyof SdDivider & keyof SdDividerAttributes]?: SdDivider[K] } & { [K in keyof SdDivider & keyof SdDividerAttributes as `attr:${K}`]?: SdDividerAttributes[K] } & { [K in keyof SdDivider & keyof SdDividerAttributes as `prop:${K}`]?: SdDivider[K] };
         "sd-dropdown-button": Omit<SdDropdownButton, keyof SdDropdownButtonAttributes> & { [K in keyof SdDropdownButton & keyof SdDropdownButtonAttributes]?: SdDropdownButton[K] } & { [K in keyof SdDropdownButton & keyof SdDropdownButtonAttributes as `attr:${K}`]?: SdDropdownButtonAttributes[K] } & { [K in keyof SdDropdownButton & keyof SdDropdownButtonAttributes as `prop:${K}`]?: SdDropdownButton[K] };
+        "sd-expansion-item": Omit<SdExpansionItem, keyof SdExpansionItemAttributes> & { [K in keyof SdExpansionItem & keyof SdExpansionItemAttributes]?: SdExpansionItem[K] } & { [K in keyof SdExpansionItem & keyof SdExpansionItemAttributes as `attr:${K}`]?: SdExpansionItemAttributes[K] } & { [K in keyof SdExpansionItem & keyof SdExpansionItemAttributes as `prop:${K}`]?: SdExpansionItem[K] };
         "sd-field": Omit<SdField, keyof SdFieldAttributes> & { [K in keyof SdField & keyof SdFieldAttributes]?: SdField[K] } & { [K in keyof SdField & keyof SdFieldAttributes as `attr:${K}`]?: SdFieldAttributes[K] } & { [K in keyof SdField & keyof SdFieldAttributes as `prop:${K}`]?: SdField[K] };
         "sd-file-picker": Omit<SdFilePicker, keyof SdFilePickerAttributes> & { [K in keyof SdFilePicker & keyof SdFilePickerAttributes]?: SdFilePicker[K] } & { [K in keyof SdFilePicker & keyof SdFilePickerAttributes as `attr:${K}`]?: SdFilePickerAttributes[K] } & { [K in keyof SdFilePicker & keyof SdFilePickerAttributes as `prop:${K}`]?: SdFilePicker[K] };
         "sd-floating-portal": Omit<SdFloatingPortal, keyof SdFloatingPortalAttributes> & { [K in keyof SdFloatingPortal & keyof SdFloatingPortalAttributes]?: SdFloatingPortal[K] } & { [K in keyof SdFloatingPortal & keyof SdFloatingPortalAttributes as `attr:${K}`]?: SdFloatingPortalAttributes[K] } & { [K in keyof SdFloatingPortal & keyof SdFloatingPortalAttributes as `prop:${K}`]?: SdFloatingPortal[K] };
@@ -8115,6 +8214,7 @@ declare module "@stencil/core" {
             "sd-date-range-picker-calendar": LocalJSX.IntrinsicElements["sd-date-range-picker-calendar"] & JSXBase.HTMLAttributes<HTMLSdDateRangePickerCalendarElement>;
             "sd-divider": LocalJSX.IntrinsicElements["sd-divider"] & JSXBase.HTMLAttributes<HTMLSdDividerElement>;
             "sd-dropdown-button": LocalJSX.IntrinsicElements["sd-dropdown-button"] & JSXBase.HTMLAttributes<HTMLSdDropdownButtonElement>;
+            "sd-expansion-item": LocalJSX.IntrinsicElements["sd-expansion-item"] & JSXBase.HTMLAttributes<HTMLSdExpansionItemElement>;
             "sd-field": LocalJSX.IntrinsicElements["sd-field"] & JSXBase.HTMLAttributes<HTMLSdFieldElement>;
             "sd-file-picker": LocalJSX.IntrinsicElements["sd-file-picker"] & JSXBase.HTMLAttributes<HTMLSdFilePickerElement>;
             "sd-floating-portal": LocalJSX.IntrinsicElements["sd-floating-portal"] & JSXBase.HTMLAttributes<HTMLSdFloatingPortalElement>;