@sellmate/design-system 1.27.1 → 1.28.0

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

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, a as getElement, d as readTask, f as forceUpdate, h, H as Host } from './index-BZg-6aSz.js';
+import { r as registerInstance, c as createEvent, a as getElement, d as readTask, f as forceUpdate, h, H as Host } from './index-DDNBPrZh.js';
 import { T as TABLE_ID_ATTR } from './constants-sZMi_32I.js';
-import { T as TABLE_BODY_LAYOUT, a as TABLE_SELECTABLE_COLUMN_WIDTH, b as TABLE_BODY_TYPOGRAPHY, c as TABLE_BORDER, d as TABLE_RADIUS } from './sd-table.config-BbIWNUE2.js';
-import './component.table-D9tQwTWy.js';
+import { T as TABLE_BODY_LAYOUT, a as TABLE_SELECTABLE_COLUMN_WIDTH, b as TABLE_BODY_TYPOGRAPHY, c as TABLE_BORDER, d as TABLE_RADIUS } from './sd-table.config-DmOBlnsM.js';
+import './component.table-5pkzwl5N.js';
 import './system-BJfiMC9H.js';
 
 let urlAlphabet =
@@ -878,25 +878,25 @@ const SdTable = class {
             '--table-selectable-width': `${TABLE_SELECTABLE_COLUMN_WIDTH}px`,
             '--table-host-height': hostHeight,
         };
-        return (h(Host, { key: 'b90b9865f78c2b42c3c13ad27ed968dd97827eb6', style: hostStyle }, h("div", { key: '2eb291b03b219a3abb4da5967c6d0f43195b458e', class: "sd-table__container", style: {
+        return (h(Host, { key: 'e4f8c5d93a6fdae077abab4641ea4ea883249cae', style: hostStyle }, h("div", { key: '4af67aafb4cadc6de00ae92884e7d3585d85990b', class: "sd-table__container", style: {
                 '--table-width': this.width,
                 '--pagination-height': `${paginationHeight}px`,
-            } }, h("div", { key: '999feaffbf82db9233416a1d66974e8859b9b3a0', class: {
+            } }, h("div", { key: 'd88a3f49c6cd1c0798774d06b9510fa62592138f', class: {
                 'sd-table__wrapper': true,
                 'sd-table__wrapper--radius-useTop': this.radius === 'useTop',
                 'sd-table__wrapper--radius-full': this.radius === 'full',
-            } }, h("div", { key: 'ff0a04325ab9fe1ba5e6b25f52bb8265226fbba4', class: {
+            } }, h("div", { key: '891e2acca41a9224acaa1a688eedbb2defea7964', class: {
                 'sd-table__scroll-container': true,
                 'sd-table__scroll-container--loading': this.isLoading,
                 'sd-table__scroll-container--no-data': isNoData,
-            } }, this.isLoading && (h("div", { key: '1a4dbf4a721240b3395230997c18c8ef989bbffc', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, h("sd-circle-progress", { key: '793a6772ef4c792e7f50c2ad90d43bdfbdde11a0', indeterminate: true }))), isNoData && (h(h.Fragment, null, h("div", { key: '13b76f695edddfa3d4a13bcb1091f95cafb1ae17', class: "sd-table__no-data-header-overlay" }), h("div", { key: 'f271bfa20d06cba0cc6c5fe6b5af5c874c1e0682', class: "sd-table__no-data" }, h("div", { key: '6791f70e0b4cd1226bdcc16414249ad178b70396', class: "sd-table__no-data-content", ref: el => {
+            } }, this.isLoading && (h("div", { key: 'e59045daf43b2ac2e34a77e6b3532d5f6b18d1f5', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, h("sd-circle-progress", { key: '88023a5a6a25fef9f643e9c25a822adc292d8dff', indeterminate: true }))), isNoData && (h(h.Fragment, null, h("div", { key: 'd532beb284595d75086b9fd529ecd23c8ca9f03d', class: "sd-table__no-data-header-overlay" }), h("div", { key: 'f0d1047870fdb069bfc89caf14e52c14c664e57e', class: "sd-table__no-data" }, h("div", { key: '827123263a6dfaef37a59f6773e1385d4fc56579', class: "sd-table__no-data-content", ref: el => {
                 this.noDataContentEl = el;
                 if (el)
                     this.syncNoDataContentObserver();
-            } }, h("slot", { key: '9cba0ff5c5ea3b4c78ccdb961de9cfe3ef2ac1e9', name: "no-data" }, h("span", { key: '1022372f37f1564b0d636c888a17cb5ab5ac2e35' }, this.resolvedNoDataLabel)))))), h("table", { key: 'e3d8c7dec8b3c76896b3063266dd5450bbfa7c13', class: this.tableClasses }, this.autoThead ? (h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }, h("sd-thead", { rows: this.rows ?? [] }))) : (h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange })), this.autoTbody ? (h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }, h("sd-tbody", { rows: this.rows ?? [] }, this.renderAutoRows()))) : (h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }))))), this.pagination &&
+            } }, h("slot", { key: '208dec9639a23e294eb8b2d806a0bc4a33fbfee7', name: "no-data" }, h("span", { key: '7afeda8315328ffb550bbf977ad8c68aaf7ea8cb' }, this.resolvedNoDataLabel)))))), h("table", { key: '66fc88a1ce062da02512fa4ec8f147cb8a24c876', class: this.tableClasses }, this.autoThead ? (h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }, h("sd-thead", { rows: this.rows ?? [] }))) : (h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange })), this.autoTbody ? (h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }, h("sd-tbody", { rows: this.rows ?? [] }, this.renderAutoRows()))) : (h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }))))), this.pagination &&
             this.pagination.rowsPerPage > 0 &&
             this.rowCount > 0 &&
-            !this.useVirtualScroll && (h("div", { key: '5410b53a9182f97406a0992464bc3435eb8439b1', class: "sd-table__pagination" }, h("sd-pagination", { key: 'aa237fe475797dd626856f5335395bdfa870f6db', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (h("sd-select", { key: 'd2b98c053c6d63f0bbea73d66779dfa5c1828b5a', value: this.useInternalPagination
+            !this.useVirtualScroll && (h("div", { key: '98a0feac03369f0fb49db1378b0a1bdc84b4cf8e', class: "sd-table__pagination" }, h("sd-pagination", { key: 'b030119f0952a7375176775c666a16952828057b', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (h("sd-select", { key: '3873d513d3f17a3ff3ae92fcbe38132faef8e07a', value: this.useInternalPagination
                 ? this.innerRowsPerPage
                 : this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", emitValue: true, onSdUpdate: e => {
                 if (!this.isRowsPerPageValue(e.detail))

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-DDNBPrZh.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: 'a844eb9710ff03e3878225aa8dc5e14ed270efde', 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-td.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, a as getElement, f as forceUpdate, h, H as Host } from './index-BZg-6aSz.js';
+import { r as registerInstance, a as getElement, f as forceUpdate, h, H as Host } from './index-DDNBPrZh.js';
 import { T as TABLE_ID_ATTR } from './constants-sZMi_32I.js';
 
 const sdTdCss = () => `sd-td *{box-sizing:border-box}sd-td{display:contents}sd-td.align-left{text-align:left}sd-td.align-center{text-align:center}sd-td.align-right{text-align:right}`;
@@ -165,7 +165,7 @@ const SdTd = class {
         }
     }
     render() {
-        return (h(Host, { key: '2fce45ffda30fd75a0c0ef2ff0de5896c409c108', class: { [`align-${this.align}`]: Boolean(this.align) } }, h("slot", { key: '3e2131547d544d01c745017f3375a26df35a9d6e' })));
+        return (h(Host, { key: 'b2037351ddf7c9a8998befd477ffb81b7f204c99', class: { [`align-${this.align}`]: Boolean(this.align) } }, h("slot", { key: 'f9d2bd1433c737fc6cb209f45e773c5317cf3cde' })));
     }
     static get watchers() { return {
         "field": [{

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-DDNBPrZh.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-DDNBPrZh.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: '005ce1d424e17b13a685c99e49d2eeda295d4346', 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-DDNBPrZh.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: '434d4e58eed6589ed5cceb9df4c131a0594055e6', 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: '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() })))));
     }
 };
 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-DDNBPrZh.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: '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 })));
     }
 };
 SdToggle.style = sdToggleCss();

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

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

@@ -28,6 +28,7 @@ export declare const TABLE_BODY_LAYOUT: {
         paddingY: string;
     };
     paddingX: string;
+    densePaddingX: string;
     framePadding: string;
 };
 export declare const TABLE_BODY_TYPOGRAPHY: {

package/dist/types/components.d.ts

@@ -580,6 +580,11 @@ export namespace Components {
           * @default false
          */
         "indeterminate": boolean;
+        /**
+          * true면 퍼센트를 원 아래가 아닌 원 가운데에 표시
+          * @default false
+         */
+        "innerValue": boolean;
         /**
           * 원 하단에 표시할 레이블 텍스트
          */
@@ -1225,6 +1230,11 @@ export namespace Components {
           * 필드 상태 (없으면 rules 결과로 자동 결정)
          */
         "status"?: 'default' | 'pass' | 'error';
+        /**
+          * multiple 파일 목록을 필드 아래 칩 대신, caret(▼) 클릭 시 열리는 리스트박스 카드로 표시
+          * @default false
+         */
+        "useMultipleListBox": boolean;
         /**
           * 선택된 파일 값
           * @default null
@@ -3642,6 +3652,7 @@ declare global {
     };
     interface HTMLSdLoadingModalElementEventMap {
         "sdClick": void;
+        "sdClose": void;
     }
     interface HTMLSdLoadingModalElement extends Components.SdLoadingModal, HTMLStencilElement {
         addEventListener<K extends keyof HTMLSdLoadingModalElementEventMap>(type: K, listener: (this: HTMLSdLoadingModalElement, ev: SdLoadingModalCustomEvent<HTMLSdLoadingModalElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -4654,6 +4665,11 @@ declare namespace LocalJSX {
           * @default false
          */
         "indeterminate"?: boolean;
+        /**
+          * true면 퍼센트를 원 아래가 아닌 원 가운데에 표시
+          * @default false
+         */
+        "innerValue"?: boolean;
         /**
           * 원 하단에 표시할 레이블 텍스트
          */
@@ -5310,6 +5326,11 @@ declare namespace LocalJSX {
           * 필드 상태 (없으면 rules 결과로 자동 결정)
          */
         "status"?: 'default' | 'pass' | 'error';
+        /**
+          * multiple 파일 목록을 필드 아래 칩 대신, caret(▼) 클릭 시 열리는 리스트박스 카드로 표시
+          * @default false
+         */
+        "useMultipleListBox"?: boolean;
         /**
           * 선택된 파일 값
           * @default null
@@ -5701,6 +5722,10 @@ declare namespace LocalJSX {
           * 버튼 클릭 시 발생합니다.
          */
         "onSdClick"?: (event: SdLoadingModalCustomEvent<void>) => void;
+        /**
+          * 닫기 버튼 클릭 시 발생합니다. (error 상태에서만 노출)
+         */
+        "onSdClose"?: (event: SdLoadingModalCustomEvent<void>) => void;
         /**
           * sd-circle-progress에 전달할 진행률 (0–100)
          */
@@ -7206,6 +7231,7 @@ declare namespace LocalJSX {
         "value": number;
         "type": CircleProgressType;
         "label": string;
+        "innerValue": boolean;
     }
     interface SdConfirmModalAttributes {
         "type": ConfirmModalType;
@@ -7302,6 +7328,7 @@ declare namespace LocalJSX {
         "disabled": boolean;
         "inline": boolean;
         "multiple": boolean;
+        "useMultipleListBox": boolean;
         "accept": string;
         "maxFileSize": string;
         "maxTotalSize": string;