@sellmate/design-system 1.27.1 → 1.28.0

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DsYLSqCp.js');
+var index = require('./index-D12oddge.js');
 var component_overlay = require('./component.overlay-CBhFnzM2.js');
 var system = require('./system-MjrAugX-.js');
 
@@ -104,7 +104,7 @@ const SdPopup = class {
             ...DEFAULT_SUBMIT_BUTTON_PROPS,
             ...this.submitButtonProps,
         };
-        return (index.h("div", { key: 'cc0381250b37b498e93fd7f8d932ad95ff802bcc', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, index.h("header", { key: '07b4378a9c8d292f73e0a6307ec2b6335087cc9f', class: "sd-popup__header" }, index.h("h2", { key: 'a17318a803d2d825e0a85f43ff436944424bb213', class: "sd-popup__title" }, this.popupTitle)), index.h("div", { key: 'f2147c40fbd425565f6e61e62e2da2d97eacb27a', class: "sd-popup__body" }, index.h("slot", { key: '5600679290a775e53e838fd5ea2d9cfc1008130f' })), this.useFooter && (index.h("footer", { key: '2bfa07724438b8afa03a0654359ab760498ef7dc', class: "sd-popup__footer" }, index.h("div", { key: 'd70c88b18b23bd8d1b3f6d4899d65b25e378b9aa', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, index.h("slot", { key: '42d7108b390bf460398dcbc128a837784ba5c544', name: "footer-left" })), index.h("sd-button", { key: '0525a19c52caef0dcaf0eb2783391132d53d18db', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
+        return (index.h("div", { key: 'f138f3d792295a6e1cb3894033547176cfd03163', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, index.h("header", { key: '7ff26c89a03cd79d5abe83513d96ae5f40b83869', class: "sd-popup__header" }, index.h("h2", { key: 'd9d3282b60b5b6baa5c2b1568c13db5847e9f9af', class: "sd-popup__title" }, this.popupTitle)), index.h("div", { key: 'a296adcd58df30f4915b2523931c5b9eb4588e5d', class: "sd-popup__body" }, index.h("slot", { key: 'aaf4dfc93d5664ca19a8071e3f37bf8a5857e471' })), this.useFooter && (index.h("footer", { key: '1afb1b638fa8bfa69f5d4bc87fca538800614312', class: "sd-popup__footer" }, index.h("div", { key: '7539bc751847a03fef6ec1e15587b346ffb19c83', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, index.h("slot", { key: '66fbec51d23bd1a203159f6c968935034a4c086c', name: "footer-left" })), index.h("sd-button", { key: '8d236d5fcd9b5fdae1c27ade7bff6bc605ef8bde', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
     }
 };
 SdPopup.style = sdPopupCss();

package/dist/cjs/sd-radio-button.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DsYLSqCp.js');
+var index = require('./index-D12oddge.js');
 
 const radioButton = {
 	xs: {

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DsYLSqCp.js');
+var index = require('./index-D12oddge.js');
 
 const radio = {
 	size: "16",
@@ -33,8 +33,7 @@ const radio = {
 	label: {
 		"default": "#222222",
 		disabled: "#888888"
-	}
-};
+	}};
 var radioTokens = {
 	radio: radio
 };

package/dist/cjs/sd-select-list-item_2.cjs.entry.js

@@ -1,9 +1,10 @@
 'use strict';
 
-var index = require('./index-DsYLSqCp.js');
-var sdSelect_config = require('./sd-select.config-C9Ohe1QA.js');
+var index = require('./index-D12oddge.js');
+var sdSelect_config = require('./sd-select.config-omyxekRa.js');
 var sanitizeInlineHtml = require('./sanitize-inline-html-CRCAeQ46.js');
-require('./component.listItem-Bnh0r_CA.js');
+require('./component.listItem-cAO_ppOz.js');
+require('./component.listBox-MHAv4Yy7.js');
 
 const sdSelectListItemCss = () => `sd-select-list-item{display:block}sd-select-list-item .sd-select-list-item{display:flex;align-items:center;gap:var(--list-item-gap);padding:var(--list-item-padding-y) var(--list-item-padding-right) var(--list-item-padding-y) var(--list-item-padding-left);font-size:var(--list-item-font-size);line-height:var(--list-item-line-height);font-weight:var(--list-item-font-weight);background:var(--list-item-bg);color:var(--list-item-color);cursor:default;user-select:none}sd-select-list-item .sd-select-list-item--selectable{cursor:pointer}sd-select-list-item .sd-select-list-item--depth1-group{border-top:var(--list-item-border-top);font-weight:700}sd-select-list-item .sd-select-list-item--depth2-group{font-weight:500}sd-select-list-item .sd-select-list-item--focused.sd-select-list-item--selectable:not(.sd-select-list-item--disabled){background:var(--list-item-bg-hover);color:var(--list-item-color-hover)}sd-select-list-item .sd-select-list-item--selected:not(.sd-select-list-item--group){font-weight:var(--list-item-font-weight-selected);color:var(--list-item-color-selected)}sd-select-list-item .sd-select-list-item--selected.sd-select-list-item--focused{color:var(--list-item-color-hover)}sd-select-list-item .sd-select-list-item--disabled{color:var(--list-item-color-disabled);cursor:not-allowed}sd-select-list-item .sd-select-list-item__label{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}sd-select-list-item .sd-select-list-item__count{flex-shrink:0;font-weight:500;color:var(--list-item-color-disabled)}sd-select-list-item .sd-select-list-item--group.sd-select-list-item--focused .sd-select-list-item__count{color:#ffffff}sd-select-list-item .sd-select-list-item__checkbox{flex-shrink:0}`;
 
@@ -88,7 +89,7 @@ const SdSelectListItem = class {
         return (
         // 키보드 네비게이션은 부모 listbox 의 ArrowUp/Down + Enter 가 담당. 항목 자체는 role=option, tabindex=-1 으로 표시.
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-        index.h("div", { key: 'dd2c4cbd210ed70c00a954a9c6da6923ea76c91e', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
+        index.h("div", { key: '0e0a07c33c9e6718771ba8cc27d62e4909434562', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
                 'sd-select-list-item': true,
                 'sd-select-list-item--group': isGroup,
                 'sd-select-list-item--depth1-group': isDepth1Group,
@@ -98,7 +99,7 @@ const SdSelectListItem = class {
                 'sd-select-list-item--focused': this.isFocused,
                 'sd-select-list-item--selectable': this.isSelectable && !this.option.disabled,
                 'sd-select-list-item--disabled': !!this.option.disabled,
-            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (index.h("sd-checkbox", { key: '18fb5ec3ccd00aa34c974975324bb214aa4d38f8', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, inverse: this.isFocused && this.isSelected !== false, class: "sd-select-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), sdSelect_config.isHtmlLabel(this.option.label) ? (index.h("span", { class: "sd-select-list-item__label", ref: el => el && (el.innerHTML = sanitizeInlineHtml.sanitizeInlineHtml(this.option.label)) })) : (index.h("span", { class: "sd-select-list-item__label" }, this.option.label)), this.countInfo && (index.h("span", { key: '70ee48fdece9e38db3bf9450a5d82ad6db4ec985', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
+            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (index.h("sd-checkbox", { key: 'd3078da8737c28b279f2057c06266710af6191cd', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, inverse: this.isFocused && this.isSelected !== false, class: "sd-select-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), sdSelect_config.isHtmlLabel(this.option.label) ? (index.h("span", { class: "sd-select-list-item__label", ref: el => el && (el.innerHTML = sanitizeInlineHtml.sanitizeInlineHtml(this.option.label)) })) : (index.h("span", { class: "sd-select-list-item__label" }, this.option.label)), this.countInfo && (index.h("span", { key: '36b88dbda0d2bbd27b5df60eaaa855ebe77e0905', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
     }
 };
 SdSelectListItem.style = sdSelectListItemCss();
@@ -155,15 +156,15 @@ const SdSelectListItemSearch = class {
             clearTimeout(this.debounceTimer);
     }
     render() {
-        return (index.h("div", { key: '951bb1f2507918c057bb88bd8254a8b4bc4b6018', class: {
+        return (index.h("div", { key: '6caac256fb6b1fc3e7b3fc7f7ee66b163737f944', class: {
                 'sd-select-list-item-search': true,
                 'sd-select-list-item-search--scrolled': this.isScrolled,
-            } }, index.h("div", { key: '32164db917f4ccadb301c00e77d8296d0ef59e7d', class: "sd-select-list-item-search__inner" }, index.h("sd-icon", { key: '9493497b5b8b7274c31bac9e865a1949c0cd4493', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), index.h("input", { key: '3917e46b5e6ad55ab7481655fe31d7a3b29632f6', ref: el => {
+            } }, index.h("div", { key: '3193b47072cb73c4400e606aa8dbd4553e178738', class: "sd-select-list-item-search__inner" }, index.h("sd-icon", { key: '6165dae71933cbdf5c66d533d4cae43ae95f7bd4', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), index.h("input", { key: 'd0526a3a20e220068a4b4cb489af060c80952325', ref: el => {
                 this.inputEl = el;
-            }, type: "text", class: "sd-select-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), index.h("button", { key: '93c11a138545e9480aae3dd0ed961fe613fc1b14', type: "button", class: {
+            }, type: "text", class: "sd-select-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), index.h("button", { key: 'e139b3ddab9ac793bfcf44480161a1d0c501a861', type: "button", class: {
                 'sd-select-list-item-search__clear': true,
                 'sd-select-list-item-search__clear--hidden': this.searchText === '',
-            }, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, index.h("sd-icon", { key: 'dead91d16ab3af88a4a94ee061b9ca1c1336f2f7', name: "close", size: 12, color: "#888888" })))));
+            }, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, index.h("sd-icon", { key: '4d29274a17767dec92bb6052196832272ab215df', name: "close", size: 12, color: "#888888" })))));
     }
 };
 SdSelectListItemSearch.style = sdSelectListItemSearchCss();

package/dist/cjs/{sd-select.config-C9Ohe1QA.js → sd-select.config-omyxekRa.js}

@@ -1,6 +1,7 @@
 'use strict';
 
-var component_listItem = require('./component.listItem-Bnh0r_CA.js');
+var component_listItem = require('./component.listItem-cAO_ppOz.js');
+var component_listBox = require('./component.listBox-MHAv4Yy7.js');
 
 const select = {
 	sm: {
@@ -80,7 +81,7 @@ const LIST_ITEM_COLORS = {
     }};
 // ── ListBox Tokens ──
 const LIST_BOX_LAYOUT = {
-    radius: component_listItem.listBoxTokens.listBox.radius,
+    radius: component_listBox.listBoxTokens.listBox.radius,
 };
 // ── Constants ──
 const SEARCH_THRESHOLD = 11;

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

@@ -1,10 +1,11 @@
 'use strict';
 
-var index = require('./index-DsYLSqCp.js');
+var index = require('./index-D12oddge.js');
 var index$1 = require('./index-BUvXpPc3.js');
-var sdSelect_config = require('./sd-select.config-C9Ohe1QA.js');
+var sdSelect_config = require('./sd-select.config-omyxekRa.js');
 var sanitizeInlineHtml = require('./sanitize-inline-html-CRCAeQ46.js');
-require('./component.listItem-Bnh0r_CA.js');
+require('./component.listItem-cAO_ppOz.js');
+require('./component.listBox-MHAv4Yy7.js');
 
 const sdSelectCss = () => `sd-select{display:inline-flex}sd-select sd-portal{display:none}sd-select .sd-select{position:relative;width:100%;height:100%}`;
 
@@ -296,15 +297,15 @@ const SdSelect = class {
                 this.closeDropdown();
             },
         };
-        return (index.h("sd-field", { key: '426e5777a976da591726108e8a19c27822151c34', 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, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
+        return (index.h("sd-field", { key: '2272f300b9aa6645dd772d06694e728f9abcea28', 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, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
                 this.hovered = true;
             }, onMouseLeave: () => {
                 this.hovered = false;
-            } }, index.h("div", { key: '2e47d100a63bd6445f452701409cf05efabb30e0', class: "sd-select", ref: el => {
+            } }, index.h("div", { key: 'b9c769146720634abb4d018d022e28749ef0b939', class: "sd-select", ref: el => {
                 this.triggerRef = el;
-            } }, index.h("sd-select-trigger", { key: '65763371f56bae558f927189931b567e5ca73df6', ref: el => {
+            } }, index.h("sd-select-trigger", { key: '792bbee6e36298a306d720bc15bff61d5bba7545', ref: el => {
                 this.triggerComponentRef = el;
-            }, displayText: this.displayText, placeholder: this.placeholder ?? '선택', disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (index.h("sd-portal", { key: '98518c875649c8e38c15565d9bfccf9c0b0eeb9a', ...portalProps }, index.h("sd-select-listbox", { key: 'be8e2c814bd30a57ee20b0a0b378f3809ffef26a', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, useSearch: this.useSearch, useSelectAll: this.useSelectAll, triggerWidth: this.dropdownWidth || this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
+            }, displayText: this.displayText, placeholder: this.placeholder ?? '선택', disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (index.h("sd-portal", { key: 'c70299735ea4f9fd257a0b3384e728bbf9fc9d97', ...portalProps }, index.h("sd-select-listbox", { key: 'd0dbfc0382131e998f54d6a0cb04fc6b1a9128c8', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, useSearch: this.useSearch, useSelectAll: this.useSelectAll, triggerWidth: this.dropdownWidth || this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
     }
     static get watchers() { return {
         "isOpen": [{
@@ -681,9 +682,9 @@ const SdSelectListbox = class {
             '--listbox-max-height': this.maxHeight ?? '260px',
             '--listbox-radius': `${sdSelect_config.LIST_BOX_LAYOUT.radius}px`,
         };
-        return (index.h("div", { key: '0e322ab6384a37b9ea83883e8012799f157ec833', class: "sd-select-listbox", style: cssVars }, this.showSearch && (index.h("sd-select-list-item-search", { key: '12d35a6ab654d4ce0cf504c0d1b1b6e4cc7eac78', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), index.h("div", { key: 'ba99682e9c486fe0efa02a888166a06a600c189e', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
+        return (index.h("div", { key: '4de15e4c150ee542656ee3f73aa41dd32379748f', class: "sd-select-listbox", style: cssVars }, this.showSearch && (index.h("sd-select-list-item-search", { key: 'cb656ccafc2833b438f14ac48ca8686684212ead', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), index.h("div", { key: '5ffaefb63605c4319810046e9d40aa5fcb4754de', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
                 this.listEl = el;
-            } }, this.showSelectAll && (index.h("sd-select-list-item", { key: '8f66c32cc3f8287d04ad7081e71903ccb4467b4f', option: SdSelectListbox.SELECT_ALL_OPTION, depth: 1, isSelected: this.selectAllState, isFocused: this.isOptionFocused(SdSelectListbox.SELECT_ALL_OPTION), useCheckbox: true, onSdListItemClick: this.handleSelectAllClick, onMouseEnter: () => this.handleOptionHover(SdSelectListbox.SELECT_ALL_OPTION) })), this.isEmpty ? (index.h("div", { class: "sd-select-listbox__empty" }, sdSelect_config.EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (index.h("sd-select-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) })))))));
+            } }, this.showSelectAll && (index.h("sd-select-list-item", { key: 'e1d3f7a37a037b386aae50cceb61e2b79d37453e', option: SdSelectListbox.SELECT_ALL_OPTION, depth: 1, isSelected: this.selectAllState, isFocused: this.isOptionFocused(SdSelectListbox.SELECT_ALL_OPTION), useCheckbox: true, onSdListItemClick: this.handleSelectAllClick, onMouseEnter: () => this.handleOptionHover(SdSelectListbox.SELECT_ALL_OPTION) })), this.isEmpty ? (index.h("div", { class: "sd-select-listbox__empty" }, sdSelect_config.EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (index.h("sd-select-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) })))))));
     }
     static get watchers() { return {
         "searchKeyword": [{
@@ -751,7 +752,7 @@ const SdSelectTrigger = class {
                 ? sdSelect_config.SELECT_COLORS.icon.disabled
                 : sdSelect_config.SELECT_COLORS.icon.default,
         };
-        return (index.h("div", { key: 'a261a38ab844572d693bdb736e8c6c5df8b2b0c6', ref: el => {
+        return (index.h("div", { key: '33e639898a581e8556e1e9c966f14cb863246c35', ref: el => {
                 this.triggerEl = el;
             }, role: "button", "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', tabindex: this.disabled ? -1 : 0, class: {
                 'sd-select-trigger': true,
@@ -762,7 +763,7 @@ const SdSelectTrigger = class {
                     e.preventDefault();
                     this.handleClick();
                 }
-            }, onFocus: this.handleFocus, onBlur: this.handleBlur }, index.h("div", { key: 'c8255f624c101fa984d7dc081231f0ce957f8707', class: "sd-select-trigger__content" }, hasValue && sdSelect_config.isHtmlLabel(this.displayText) ? (index.h("span", { class: "sd-select-trigger__text", ref: el => el && (el.innerHTML = sanitizeInlineHtml.sanitizeInlineHtml(this.displayText)) })) : (index.h("span", { class: "sd-select-trigger__text" }, hasValue ? this.displayText : (this.placeholder ?? '선택'))), index.h("sd-icon", { key: 'bf2145a098a31eba8a5210eb265fb252b84c9e0b', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
+            }, onFocus: this.handleFocus, onBlur: this.handleBlur }, index.h("div", { key: 'a935f82879727eb212422c875b16e5fbf01460ba', class: "sd-select-trigger__content" }, hasValue && sdSelect_config.isHtmlLabel(this.displayText) ? (index.h("span", { class: "sd-select-trigger__text", ref: el => el && (el.innerHTML = sanitizeInlineHtml.sanitizeInlineHtml(this.displayText)) })) : (index.h("span", { class: "sd-select-trigger__text" }, hasValue ? this.displayText : (this.placeholder ?? '선택'))), index.h("sd-icon", { key: 'e98e8e317aa86a960674b21714ca90cfa3920197', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
                 'sd-select-trigger__icon': true,
                 'sd-select-trigger__icon--open': this.isOpen,
             } }))));

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DsYLSqCp.js');
+var index = require('./index-D12oddge.js');
 
 var switchTokens = {
 	"switch": {
@@ -109,7 +109,7 @@ const SdSwitch = class {
             '--sd-switch-line-height': `${SWITCH_TYPOGRAPHY.lineHeight}px`,
             '--sd-switch-text-decoration': SWITCH_TYPOGRAPHY.textDecoration,
         };
-        return (index.h("label", { key: 'dded99ece17ee7308da9c7183a725493f705caf2', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, index.h("input", { key: '8ca9b17fbbd97cdfe351f06fa5dba7efb22faf39', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), index.h("div", { key: 'dffb2503df8755076218fc24ce974ed5cccb37c3', class: "sd-switch__track" }, index.h("div", { key: '52b8d7b125bf3a2fdddbcfe4690933432cb0ff29', class: "sd-switch__knob" })), this.label && index.h("span", { key: 'e4e62e02aa1d7336bf1de5add45ed0b2dbecbcd1', class: "sd-switch__label" }, this.label)));
+        return (index.h("label", { key: '0dd7063a45e2adc589e2e8dfc7cdb5c0c585aeac', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, index.h("input", { key: '01b94b14edd1571b8e21ba5a8bb72a0bd151b3a2', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), index.h("div", { key: '6c6bfaa3909ed885811f3e2af402d3a16c9b75e2', class: "sd-switch__track" }, index.h("div", { key: 'd3861a5c67779b7e871d7a2f45b20439648402cc', class: "sd-switch__knob" })), this.label && index.h("span", { key: '25c5198adb208b1016e9eb5bf01eaa6fb501ebe5', class: "sd-switch__label" }, this.label)));
     }
 };
 SdSwitch.style = sdSwitchCss();

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

@@ -1,9 +1,9 @@
 'use strict';
 
-var index = require('./index-DsYLSqCp.js');
+var index = require('./index-D12oddge.js');
 var constants = require('./constants-DJRV1upE.js');
-var sdTable_config = require('./sd-table.config-DzC55sap.js');
-require('./component.table-BrI3b--h.js');
+var sdTable_config = require('./sd-table.config-DFy_S4bc.js');
+require('./component.table-POXY492T.js');
 require('./system-MjrAugX-.js');
 
 let urlAlphabet =
@@ -880,25 +880,25 @@ const SdTable = class {
             '--table-selectable-width': `${sdTable_config.TABLE_SELECTABLE_COLUMN_WIDTH}px`,
             '--table-host-height': hostHeight,
         };
-        return (index.h(index.Host, { key: 'b90b9865f78c2b42c3c13ad27ed968dd97827eb6', style: hostStyle }, index.h("div", { key: '2eb291b03b219a3abb4da5967c6d0f43195b458e', class: "sd-table__container", style: {
+        return (index.h(index.Host, { key: 'e4f8c5d93a6fdae077abab4641ea4ea883249cae', style: hostStyle }, index.h("div", { key: '4af67aafb4cadc6de00ae92884e7d3585d85990b', class: "sd-table__container", style: {
                 '--table-width': this.width,
                 '--pagination-height': `${paginationHeight}px`,
-            } }, index.h("div", { key: '999feaffbf82db9233416a1d66974e8859b9b3a0', class: {
+            } }, index.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',
-            } }, index.h("div", { key: 'ff0a04325ab9fe1ba5e6b25f52bb8265226fbba4', class: {
+            } }, index.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 && (index.h("div", { key: '1a4dbf4a721240b3395230997c18c8ef989bbffc', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, index.h("sd-circle-progress", { key: '793a6772ef4c792e7f50c2ad90d43bdfbdde11a0', indeterminate: true }))), isNoData && (index.h(index.h.Fragment, null, index.h("div", { key: '13b76f695edddfa3d4a13bcb1091f95cafb1ae17', class: "sd-table__no-data-header-overlay" }), index.h("div", { key: 'f271bfa20d06cba0cc6c5fe6b5af5c874c1e0682', class: "sd-table__no-data" }, index.h("div", { key: '6791f70e0b4cd1226bdcc16414249ad178b70396', class: "sd-table__no-data-content", ref: el => {
+            } }, this.isLoading && (index.h("div", { key: 'e59045daf43b2ac2e34a77e6b3532d5f6b18d1f5', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, index.h("sd-circle-progress", { key: '88023a5a6a25fef9f643e9c25a822adc292d8dff', indeterminate: true }))), isNoData && (index.h(index.h.Fragment, null, index.h("div", { key: 'd532beb284595d75086b9fd529ecd23c8ca9f03d', class: "sd-table__no-data-header-overlay" }), index.h("div", { key: 'f0d1047870fdb069bfc89caf14e52c14c664e57e', class: "sd-table__no-data" }, index.h("div", { key: '827123263a6dfaef37a59f6773e1385d4fc56579', class: "sd-table__no-data-content", ref: el => {
                 this.noDataContentEl = el;
                 if (el)
                     this.syncNoDataContentObserver();
-            } }, index.h("slot", { key: '9cba0ff5c5ea3b4c78ccdb961de9cfe3ef2ac1e9', name: "no-data" }, index.h("span", { key: '1022372f37f1564b0d636c888a17cb5ab5ac2e35' }, this.resolvedNoDataLabel)))))), index.h("table", { key: 'e3d8c7dec8b3c76896b3063266dd5450bbfa7c13', class: this.tableClasses }, this.autoThead ? (index.h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }, index.h("sd-thead", { rows: this.rows ?? [] }))) : (index.h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange })), this.autoTbody ? (index.h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }, index.h("sd-tbody", { rows: this.rows ?? [] }, this.renderAutoRows()))) : (index.h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }))))), this.pagination &&
+            } }, index.h("slot", { key: '208dec9639a23e294eb8b2d806a0bc4a33fbfee7', name: "no-data" }, index.h("span", { key: '7afeda8315328ffb550bbf977ad8c68aaf7ea8cb' }, this.resolvedNoDataLabel)))))), index.h("table", { key: '66fc88a1ce062da02512fa4ec8f147cb8a24c876', class: this.tableClasses }, this.autoThead ? (index.h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }, index.h("sd-thead", { rows: this.rows ?? [] }))) : (index.h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange })), this.autoTbody ? (index.h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }, index.h("sd-tbody", { rows: this.rows ?? [] }, this.renderAutoRows()))) : (index.h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }))))), this.pagination &&
             this.pagination.rowsPerPage > 0 &&
             this.rowCount > 0 &&
-            !this.useVirtualScroll && (index.h("div", { key: '5410b53a9182f97406a0992464bc3435eb8439b1', class: "sd-table__pagination" }, index.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 && (index.h("sd-select", { key: 'd2b98c053c6d63f0bbea73d66779dfa5c1828b5a', value: this.useInternalPagination
+            !this.useVirtualScroll && (index.h("div", { key: '98a0feac03369f0fb49db1378b0a1bdc84b4cf8e', class: "sd-table__pagination" }, index.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 && (index.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/cjs/{sd-table.config-DzC55sap.js → sd-table.config-DFy_S4bc.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var component_table = require('./component.table-BrI3b--h.js');
+var component_table = require('./component.table-POXY492T.js');
 var system = require('./system-MjrAugX-.js');
 
 // ── Header Tokens ──
@@ -31,10 +31,11 @@ const TABLE_BODY_LAYOUT = {
     },
     dense: {
         height: component_table.tableTokens.table.body.dense.height,
-        paddingY: component_table.tableTokens.table.body.dense.paddingY,
+        paddingY: component_table.tableTokens.table.body.paddingY.dense,
     },
-    paddingX: component_table.tableTokens.table.body.paddingX.default,
-    framePadding: component_table.tableTokens.table.body.paddingX.frame,
+    paddingX: component_table.tableTokens.table.body.paddingX.wide,
+    densePaddingX: component_table.tableTokens.table.body.paddingX.default,
+    framePadding: component_table.tableTokens.table.body.paddingX.default,
 };
 const TABLE_BODY_TYPOGRAPHY = {
     fontFamily: component_table.tableTokens.table.body.typography.fontFamily,

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DsYLSqCp.js');
+var index = require('./index-D12oddge.js');
 
 const tab = {
 	main: {
@@ -207,7 +207,7 @@ const SdTabs = class {
         };
     }
     render() {
-        return (index.h("div", { key: 'd5df329922f73444775ec827ce8cf3850c369131', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index$1) => {
+        return (index.h("div", { key: 'a844eb9710ff03e3878225aa8dc5e14ed270efde', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index$1) => {
             const badgeName = this.getBadgeName(tab);
             return (index.h("div", { key: `tab-${index$1}`, 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/cjs/sd-td.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DsYLSqCp.js');
+var index = require('./index-D12oddge.js');
 var constants = require('./constants-DJRV1upE.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}`;
@@ -167,7 +167,7 @@ const SdTd = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '2fce45ffda30fd75a0c0ef2ff0de5896c409c108', class: { [`align-${this.align}`]: Boolean(this.align) } }, index.h("slot", { key: '3e2131547d544d01c745017f3375a26df35a9d6e' })));
+        return (index.h(index.Host, { key: 'b2037351ddf7c9a8998befd477ffb81b7f204c99', class: { [`align-${this.align}`]: Boolean(this.align) } }, index.h("slot", { key: 'f9d2bd1433c737fc6cb209f45e773c5317cf3cde' })));
     }
     static get watchers() { return {
         "field": [{

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DsYLSqCp.js');
+var index = require('./index-D12oddge.js');
 
 const textLink = {
 	sm: {

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DsYLSqCp.js');
+var index = require('./index-D12oddge.js');
 
 const DEFAULT_DURATION = 4000;
 const DEFAULT_MAX_VISIBLE = 3;
@@ -243,7 +243,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 (index.h("div", { key: '17526924c57e06a77725f66233f5b5360097fac0', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
+        return (index.h("div", { key: '005ce1d424e17b13a685c99e49d2eeda295d4346', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
                 this.expanded = true;
                 this.pauseTimers();
             }, onMouseLeave: () => {

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DsYLSqCp.js');
+var index = require('./index-D12oddge.js');
 
 const toast = {
 	icon: "16",
@@ -93,12 +93,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 (index.h("div", { key: '124b32e52e9dfd7a09ac67ffb8032bf2217e9c05', style: {
+        return (index.h("div", { key: '434d4e58eed6589ed5cceb9df4c131a0594055e6', style: {
                 '--sd-toast-bg': typeConfig.bg,
                 '--sd-toast-text': typeConfig.content,
                 '--sd-toast-icon': iconColor,
                 '--sd-toast-link': linkColor,
-            } }, index.h("div", { key: '54eddcc1fe8a0eab427a084e589c0f9a2e0412bf', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: '0ff05c4e7cb8dda2f2732cd09bfc586cb21020b6', class: "sd-toast__icon" }, index.h("sd-icon", { key: '41e1e259ef605454ee680bbd3228c418f013283e', name: this.icon, size: iconSize, color: iconColor }))), index.h("div", { key: '7db4e1bc0ce80bd1887476ac728a7999cb4fee93', class: "sd-toast__content" }, index.h("span", { key: '88925dfa075a5da813466a74a0f5fa4cb61e3bc9', class: "sd-toast__message" }, this.message)), this.link && (index.h("a", { key: '068aaf887a6fe8c18f7db6e513778d862e09bd56', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (index.h("sd-button", { key: 'fb066d2cfaad7668aec48caafc6eb6d6e19ebaee', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (index.h("sd-ghost-button", { key: 'e610479efe5034a222aa98d19232682243214ee0', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
+            } }, index.h("div", { key: '51209146aa46961d9a673417b72e96e1aef3f53b', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: 'a2b10d38936b85174d0315cae7bee2115ae06aba', class: "sd-toast__icon" }, index.h("sd-icon", { key: '96243916be0cf117a0f85801de8294eec8f7900b', name: this.icon, size: iconSize, color: iconColor }))), index.h("div", { key: 'bb5b2363aafb9322a356f7e0e94acd5b2723f8d2', class: "sd-toast__content" }, index.h("span", { key: '25535fc30123491e5cea78ae17ee8e32c2c8b986', class: "sd-toast__message" }, this.message)), this.link && (index.h("a", { key: 'bf110d2492ae38fbac422f7fbf6177bbd56fae2d', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (index.h("sd-button", { key: 'f8543c13d11222bac64dd4eab79cda0eaf78a396', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (index.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/cjs/sd-toggle.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DsYLSqCp.js');
+var index = require('./index-D12oddge.js');
 
 const toggle = {
 	height: "28",
@@ -123,7 +123,7 @@ const SdToggle = class {
             '--sd-toggle-content-select': TOGGLE_COLORS.content.select,
             '--sd-toggle-content-disabled': TOGGLE_COLORS.content.disabled,
         };
-        return (index.h("label", { key: '2b988ca6148da376d9af21538b03764423cb3a0a', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, index.h("input", { key: 'b1bd161b88a627ba296197902d46181925511c70', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        return (index.h("label", { key: 'e60aa1379566c4586ea4f7e852425f8829e806d1', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, index.h("input", { key: '9f2260749b392c0c72ad2a53b515f0b886e62c3a', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
 };
 SdToggle.style = sdToggleCss();

package/dist/cjs/{tooltipArrow-FLiD3ceS.js → tooltipArrow-Dda4ik0V.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DsYLSqCp.js');
+var index = require('./index-D12oddge.js');
 
 const TooltipArrow = (props) => (index.h("svg", { width: "16", height: "12", viewBox: "0 0 16 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, index.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/collection/components/sd-circle-progress/sd-circle-progress.css

@@ -34,6 +34,18 @@ sd-circle-progress .sd-circle-progress__label {
   font-weight: 400;
   line-height: 20px;
 }
+sd-circle-progress {
+  /* innerValue 모드: 퍼센트를 원 가운데에 오버레이 */
+}
+sd-circle-progress[inner-value] {
+  position: relative;
+}
+sd-circle-progress[inner-value] .sd-circle-progress__percent {
+  position: absolute;
+  top: 40px;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
 sd-circle-progress {
   /* indeterminate 모드: 회전 + dasharray grow/shrink 애니메이션 */
 }

package/dist/collection/components/sd-circle-progress/sd-circle-progress.js

@@ -9,6 +9,8 @@ export class SdCircleProgress {
     type = 'primary';
     /** 원 하단에 표시할 레이블 텍스트 */
     label;
+    /** true면 퍼센트를 원 아래가 아닌 원 가운데에 표시 */
+    innerValue = false;
     get clampedValue() {
         if (!Number.isFinite(this.value))
             return 0;
@@ -31,7 +33,7 @@ export class SdCircleProgress {
         }
         const c = CIRCLE_PROGRESS_VIEWBOX_SIZE / 2;
         const showPercent = !this.indeterminate;
-        return (h(Host, { key: '49f42179ae3f58775dda407b2a0fe3ad01baf2b8', style: hostStyle }, h("svg", { key: 'f2bcc5ae953409481b823fc7dd754f1e68bc47d8', class: "sd-circle-progress", viewBox: `0 0 ${CIRCLE_PROGRESS_VIEWBOX_SIZE} ${CIRCLE_PROGRESS_VIEWBOX_SIZE}`, xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: '1dbbe8d19a29cd271c8fa483497ca085ee10831f', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), h("circle", { key: '86e6514b2986e5574a78e15e0e3299d8cde858cc', class: "sd-circle-progress__arc", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH, "stroke-linecap": "round", style: arcStyle })), showPercent && (h("span", { key: '38d0dfc1f810acbe086852b24d83af2d4f707f2a', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && h("span", { key: 'b10ae78d8b3894b89f0096bea66773006bf526e9', class: "sd-circle-progress__label" }, this.label)));
+        return (h(Host, { key: '869ec15d8df4b3e240b70599d8ba72618cda4c87', style: hostStyle }, h("svg", { key: '446fa350f3c7e225e455f5f6c12b4aab45d20287', class: "sd-circle-progress", viewBox: `0 0 ${CIRCLE_PROGRESS_VIEWBOX_SIZE} ${CIRCLE_PROGRESS_VIEWBOX_SIZE}`, xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: 'c3555674067f60ab1a1458d789d62fc9bbc8015f', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), h("circle", { key: '62716c5645d957be08ea0e0818e47edda2c9e471', class: "sd-circle-progress__arc", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH, "stroke-linecap": "round", style: arcStyle })), showPercent && (h("span", { key: 'b56d75c0c40cb82d4c4c87161913b28063a9d369', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && h("span", { key: '65cfb5cd0426c7cbf5ee7aefeaf675471abccaaf', class: "sd-circle-progress__label" }, this.label)));
     }
     static get is() { return "sd-circle-progress"; }
     static get originalStyleUrls() {
@@ -131,6 +133,26 @@ export class SdCircleProgress {
                 "setter": false,
                 "reflect": false,
                 "attribute": "label"
+            },
+            "innerValue": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "true\uBA74 \uD37C\uC13C\uD2B8\uB97C \uC6D0 \uC544\uB798\uAC00 \uC544\uB2CC \uC6D0 \uAC00\uC6B4\uB370\uC5D0 \uD45C\uC2DC"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "inner-value",
+                "defaultValue": "false"
             }
         };
     }

package/dist/collection/components/sd-file-picker/sd-file-picker.config.js

@@ -1,5 +1,6 @@
 import filePickerTokens from "../../tokens/generated/component.filepicker.json";
 import fieldTokens from "../../tokens/generated/component.field.json";
+import listBoxTokens from "../../tokens/generated/component.listBox.json";
 const fp = filePickerTokens.filepicker;
 export const FILE_PICKER_LAYOUT = {
     height: fp.sm.height,
@@ -22,3 +23,11 @@ export const FILE_PICKER_COLORS = {
         disabled: fp.icon.disabled,
     },
 };
+// useMultipleListBox 모드에서 파일 칩을 담는 floating 리스트박스 카드
+// (sd-select-listbox 와 동일한 배경/radius/그림자 토큰 사용)
+export const FILE_PICKER_LIST_BOX = {
+    radius: listBoxTokens.listBox.radius,
+    bg: listBoxTokens.listBox.bg,
+    chipPadding: listBoxTokens.listBox.chip.paddingXY,
+    chipGap: listBoxTokens.listBox.chip.gap,
+};

package/dist/collection/components/sd-file-picker/sd-file-picker.css

@@ -62,6 +62,24 @@ sd-file-picker {
   opacity: 0.7;
 }
 
+.sd-file-picker__caret {
+  flex-shrink: 0;
+  cursor: pointer;
+  transition: transform 0.15s ease;
+}
+.sd-file-picker__caret--open {
+  transform: rotate(180deg);
+}
+
+.sd-file-picker__listbox {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  box-sizing: border-box;
+  max-width: 100%;
+  box-shadow: 2px 2px 12px 2px rgba(0, 0, 0, 0.1);
+}
+
 .sd-file-picker__input {
   display: none;
 }