@sellmate/design-system 1.26.1 → 1.27.1

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BuaQW9U4.js');
+var index = require('./index-DsYLSqCp.js');
 var index$1 = require('./index-BUvXpPc3.js');
 var sdSelect_config = require('./sd-select.config-C9Ohe1QA.js');
 var sanitizeInlineHtml = require('./sanitize-inline-html-CRCAeQ46.js');
@@ -296,15 +296,15 @@ const SdSelect = class {
                 this.closeDropdown();
             },
         };
-        return (index.h("sd-field", { key: '0864fe68a337d4bab526fa61570e856c8eff6d1c', 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: '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: () => {
                 this.hovered = true;
             }, onMouseLeave: () => {
                 this.hovered = false;
-            } }, index.h("div", { key: '781819ed75f47395e96fd6808766e6bb8c246fa5', class: "sd-select", ref: el => {
+            } }, index.h("div", { key: '2e47d100a63bd6445f452701409cf05efabb30e0', class: "sd-select", ref: el => {
                 this.triggerRef = el;
-            } }, index.h("sd-select-trigger", { key: '8cebad98f0cd4b333954a55857aec3fbb6f3d283', ref: el => {
+            } }, index.h("sd-select-trigger", { key: '65763371f56bae558f927189931b567e5ca73df6', 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: 'fe68f0b01256e1c1d3200f9f5fd17c2adf97f0e0', ...portalProps }, index.h("sd-select-listbox", { key: '98368524ef06a6d752f2313756a89ae6e8c05955', 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: '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) })))));
     }
     static get watchers() { return {
         "isOpen": [{
@@ -314,7 +314,7 @@ const SdSelect = class {
 };
 SdSelect.style = sdSelectCss();
 
-const sdSelectListboxCss = () => `:host{display:block}:host .sd-select-listbox{display:flex;flex-direction:column;width:var(--listbox-trigger-width);max-width:var(--listbox-max-width);max-height:var(--listbox-max-height);border-radius:var(--listbox-radius);background:white;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);overflow:hidden;outline:none}:host .sd-select-listbox__list{flex:1;min-height:0;overflow-y:auto;padding-bottom:0}:host .sd-select-listbox__empty{padding:12px;text-align:center;font-size:12px;line-height:20px;color:#888888}`;
+const sdSelectListboxCss = () => `:host{display:block}:host .sd-select-listbox{display:flex;flex-direction:column;width:var(--listbox-trigger-width);max-width:var(--listbox-max-width);max-height:var(--listbox-max-height);border-radius:var(--listbox-radius);background:white;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);overflow:hidden;outline:none}:host .sd-select-listbox__list{flex:1;min-height:0;overflow-y:auto;padding-bottom:0}:host .sd-select-listbox__list::-webkit-scrollbar{opacity:0;width:8px;background:#E5E5E5}:host .sd-select-listbox__list::-webkit-scrollbar:horizontal{height:8px}:host .sd-select-listbox__list::-webkit-scrollbar-thumb{height:80px;background-color:#CCCCCC;border-radius:4px}:host .sd-select-listbox__list::-webkit-scrollbar-track{background-color:#E5E5E5}:host .sd-select-listbox__empty{padding:12px;text-align:center;font-size:12px;line-height:20px;color:#888888}`;
 
 const SdSelectListbox = class {
     constructor(hostRef) {
@@ -681,9 +681,9 @@ const SdSelectListbox = class {
             '--listbox-max-height': this.maxHeight ?? '260px',
             '--listbox-radius': `${sdSelect_config.LIST_BOX_LAYOUT.radius}px`,
         };
-        return (index.h("div", { key: 'bb8c7f22a164d29e30d2f9da7740883daef4fc27', class: "sd-select-listbox", style: cssVars }, this.showSearch && (index.h("sd-select-list-item-search", { key: 'ac1b06b12ec20d2b9d57ca3b4074b3752b5da5e1', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), index.h("div", { key: '2c7735e7098090762f573d63c2673d6face702c1', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
+        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 => {
                 this.listEl = el;
-            } }, this.showSelectAll && (index.h("sd-select-list-item", { key: '5377511fd55f0d34056ad64707265dd2cc86afc4', 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: '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) })))))));
     }
     static get watchers() { return {
         "searchKeyword": [{
@@ -751,7 +751,7 @@ const SdSelectTrigger = class {
                 ? sdSelect_config.SELECT_COLORS.icon.disabled
                 : sdSelect_config.SELECT_COLORS.icon.default,
         };
-        return (index.h("div", { key: 'b2f140907d6e4454a3adfb9d3dd9babd9058c178', ref: el => {
+        return (index.h("div", { key: 'a261a38ab844572d693bdb736e8c6c5df8b2b0c6', 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 +762,7 @@ const SdSelectTrigger = class {
                     e.preventDefault();
                     this.handleClick();
                 }
-            }, onFocus: this.handleFocus, onBlur: this.handleBlur }, index.h("div", { key: '6803bc50c5f62dce1b1e9d874559f8ca5fca7b75', 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: '397264b3179fb6699c1ee5454f76ac9d0779488c', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
+            }, 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: {
                 '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-BuaQW9U4.js');
+var index = require('./index-DsYLSqCp.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: 'ae476f0bb6600cdb10bafd1a06ced3e60d50a2f6', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, index.h("input", { key: '765320376e0cd0ec82b980a264b979c381907f75', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), index.h("div", { key: 'f00db86513aa3da5c17a5a7e13d5928806a6fc0a', class: "sd-switch__track" }, index.h("div", { key: '12f2f817acace26a8cbfc9075e0319f3e5c2ada4', class: "sd-switch__knob" })), this.label && index.h("span", { key: '24598221b90e8ea9504ff80a464a10e3e5310e98', class: "sd-switch__label" }, this.label)));
+        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)));
     }
 };
 SdSwitch.style = sdSwitchCss();

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

@@ -1,9 +1,9 @@
 'use strict';
 
-var index = require('./index-BuaQW9U4.js');
+var index = require('./index-DsYLSqCp.js');
 var constants = require('./constants-DJRV1upE.js');
-var sdTable_config = require('./sd-table.config-B7MuRLoR.js');
-require('./component.table-DIxmbGBT.js');
+var sdTable_config = require('./sd-table.config-DzC55sap.js');
+require('./component.table-BrI3b--h.js');
 require('./system-MjrAugX-.js');
 
 let urlAlphabet =
@@ -19,7 +19,7 @@ let nanoid = (size = 21) => {
   return id
 };
 
-const sdTableCss = () => `sd-table,:host{display:block;width:100%;height:var(--table-host-height);max-width:100%;min-width:0}sd-table *,:host *{box-sizing:border-box}.sd-table__container{height:100%;width:var(--table-width, 100%);max-width:100%;min-width:0;color:#222222;display:flex;flex-direction:column}.sd-table__wrapper{width:100%;min-width:0;height:calc(100% - var(--pagination-height, 0px));border:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);border-radius:var(--table-radius, 8px);overflow:hidden}.sd-table__wrapper--radius-useTop{border-radius:0 0 var(--table-radius, 8px) var(--table-radius, 8px)}.sd-table__wrapper--radius-full{border-radius:0}.sd-table__scroll-container{width:100%;height:100%;display:flex;flex-direction:column;position:relative;font-family:var(--table-body-font-family, inherit);font-weight:var(--table-body-font-weight, 400);font-size:var(--table-body-font-size, 12px);line-height:var(--table-body-line-height, 20px);text-decoration:var(--table-body-text-decoration, none);overflow:auto;background:#FFFFFF}.sd-table__scroll-container--loading{overflow:hidden !important;pointer-events:none}.sd-table__scroll-container--no-data{overflow:hidden;pointer-events:none}.sd-table__no-data{position:absolute;top:36px;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;font-size:var(--table-body-font-size, 12px);color:#888888;pointer-events:none;z-index:200;background:rgba(255, 255, 255, 0.6)}.sd-table__no-data-header-overlay{position:absolute;top:0;left:0;right:0;height:36px;background:rgba(255, 255, 255, 0.6);z-index:210;pointer-events:none}.sd-table__no-data-content{pointer-events:auto;min-height:60px;width:100%;display:flex;align-items:center;justify-content:center}.sd-table__loading{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(255, 255, 255, 0.6);z-index:200;display:flex;align-items:center;justify-content:center;pointer-events:none}.sd-table{background-color:white;display:table;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.sd-table--selectable sd-thead,.sd-table--selectable sd-tbody{--selectable:true}.sd-table--sticky-header sd-thead thead{position:sticky;top:0;z-index:120}.sd-table--sticky-column sd-thead,.sd-table--sticky-column sd-tbody{--sticky-column:true}.sd-table--scrolled-left sd-thead,.sd-table--scrolled-left sd-tbody{--scrolled-left:true}.sd-table--scrolled-right sd-thead,.sd-table--scrolled-right sd-tbody{--scrolled-right:true}.sd-table--resizable sd-thead{--resizable:true}.sd-table--no-data sd-thead{opacity:0.4}.sd-table__pagination{position:relative;background:#F9F9F9;height:48px;display:flex;align-items:center;justify-content:center;border:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);margin-top:-1px;border-radius:var(--table-radius, 8px)}.sd-table__pagination sd-select{position:absolute;right:10px;top:50%;transform:translateY(-50%)}`;
+const sdTableCss = () => `sd-table,:host{display:block;width:100%;height:var(--table-host-height);max-width:100%;min-width:0}sd-table *,:host *{box-sizing:border-box}.sd-table__container{height:100%;width:var(--table-width, 100%);max-width:100%;min-width:0;color:#222222;display:flex;flex-direction:column}.sd-table__wrapper{width:100%;min-width:0;height:calc(100% - var(--pagination-height, 0px));border:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);border-radius:var(--table-radius, 8px);overflow:hidden}.sd-table__wrapper--radius-useTop{border-radius:0 0 var(--table-radius, 8px) var(--table-radius, 8px)}.sd-table__wrapper--radius-full{border-radius:0}.sd-table__scroll-container{width:100%;height:100%;display:flex;flex-direction:column;position:relative;font-family:var(--table-body-font-family, inherit);font-weight:var(--table-body-font-weight, 400);font-size:var(--table-body-font-size, 12px);line-height:var(--table-body-line-height, 20px);text-decoration:var(--table-body-text-decoration, none);overflow:auto;background:#FFFFFF}.sd-table__scroll-container::-webkit-scrollbar{opacity:0;width:8px;background:#E5E5E5}.sd-table__scroll-container::-webkit-scrollbar:horizontal{height:8px}.sd-table__scroll-container::-webkit-scrollbar-thumb{height:80px;background-color:#CCCCCC;border-radius:4px}.sd-table__scroll-container::-webkit-scrollbar-track{background-color:#E5E5E5}.sd-table__scroll-container--loading{overflow:hidden !important;pointer-events:none}.sd-table__scroll-container--no-data{overflow:hidden;pointer-events:none}.sd-table__no-data{position:absolute;top:36px;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;font-size:var(--table-body-font-size, 12px);color:#888888;pointer-events:none;z-index:200;background:rgba(255, 255, 255, 0.6)}.sd-table__no-data-header-overlay{position:absolute;top:0;left:0;right:0;height:36px;background:rgba(255, 255, 255, 0.6);z-index:210;pointer-events:none}.sd-table__no-data-content{pointer-events:auto;min-height:60px;width:100%;display:flex;align-items:center;justify-content:center}.sd-table__loading{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(255, 255, 255, 0.6);z-index:200;display:flex;align-items:center;justify-content:center;pointer-events:none}.sd-table{background-color:white;display:table;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.sd-table--selectable sd-thead,.sd-table--selectable sd-tbody{--selectable:true}.sd-table--sticky-header sd-thead thead{position:sticky;top:0;z-index:120}.sd-table--sticky-column sd-thead,.sd-table--sticky-column sd-tbody{--sticky-column:true}.sd-table--scrolled-left sd-thead,.sd-table--scrolled-left sd-tbody{--scrolled-left:true}.sd-table--scrolled-right sd-thead,.sd-table--scrolled-right sd-tbody{--scrolled-right:true}.sd-table--resizable sd-thead{--resizable:true}.sd-table--no-data sd-thead{opacity:0.4}.sd-table__pagination{position:relative;background:#F9F9F9;height:48px;display:flex;align-items:center;justify-content:center;border:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);margin-top:-1px;border-radius:var(--table-radius, 8px)}.sd-table__pagination sd-select{position:absolute;right:10px;top:50%;transform:translateY(-50%)}`;
 
 const SdTable = class {
     constructor(hostRef) {
@@ -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: 'd080b561e43c55d34a5f1f6571991183ebdd39b7', style: hostStyle }, index.h("div", { key: '0ef7831905dca8fde2bb8eb6cde81e1fd9706074', class: "sd-table__container", style: {
+        return (index.h(index.Host, { key: 'b90b9865f78c2b42c3c13ad27ed968dd97827eb6', style: hostStyle }, index.h("div", { key: '2eb291b03b219a3abb4da5967c6d0f43195b458e', class: "sd-table__container", style: {
                 '--table-width': this.width,
                 '--pagination-height': `${paginationHeight}px`,
-            } }, index.h("div", { key: 'c6a836574f4b4c3cd72a3718061dcf727d1ec823', class: {
+            } }, index.h("div", { key: '999feaffbf82db9233416a1d66974e8859b9b3a0', 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: '8343d8c82c4575733254ad92c968fbbb1588af1f', class: {
+            } }, index.h("div", { key: 'ff0a04325ab9fe1ba5e6b25f52bb8265226fbba4', 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: 'a6e049c2c1f5f825d874f25e184efb1915713074', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, index.h("sd-circle-progress", { key: 'ea110a9e185c3af02c9d0da3c2c36bd675952696', indeterminate: true }))), isNoData && (index.h(index.h.Fragment, null, index.h("div", { key: '56861d20b5bd57ed3f43f5774e67cc4ae7e6c947', class: "sd-table__no-data-header-overlay" }), index.h("div", { key: '19e463e0524b09ca72ba457b66f97dfd97fddf95', class: "sd-table__no-data" }, index.h("div", { key: 'ed0c669a55a562772d37d89f7f332759a73fbab6', class: "sd-table__no-data-content", ref: el => {
+            } }, 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.noDataContentEl = el;
                 if (el)
                     this.syncNoDataContentObserver();
-            } }, index.h("slot", { key: '06998e931804fb94b95df49a5c4b6c5976cefe41', name: "no-data" }, index.h("span", { key: '4f639ae85d63f516f593f2d88d788f96ba7c538f' }, this.resolvedNoDataLabel)))))), index.h("table", { key: 'a32058798111bfa84bf81279bcf424d2423cebfa', 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: '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 &&
             this.pagination.rowsPerPage > 0 &&
             this.rowCount > 0 &&
-            !this.useVirtualScroll && (index.h("div", { key: '9d1c500b147c2b11ea2df7cb095d9b28527b6902', class: "sd-table__pagination" }, index.h("sd-pagination", { key: 'c476d8326991890de9fd82311b0c90f0d4b92bb0', 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: '275dfb2c4c3bb4c76ce71c123795d967aa155bf8', value: this.useInternalPagination
+            !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.innerRowsPerPage
                 : this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", emitValue: true, onSdUpdate: e => {
                 if (!this.isRowsPerPageValue(e.detail))

package/dist/cjs/{sd-table.config-B7MuRLoR.js → sd-table.config-DzC55sap.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var component_table = require('./component.table-DIxmbGBT.js');
+var component_table = require('./component.table-BrI3b--h.js');
 var system = require('./system-MjrAugX-.js');
 
 // ── Header Tokens ──
@@ -33,8 +33,8 @@ const TABLE_BODY_LAYOUT = {
         height: component_table.tableTokens.table.body.dense.height,
         paddingY: component_table.tableTokens.table.body.dense.paddingY,
     },
-    paddingX: component_table.tableTokens.table.body.paddingX,
-    framePadding: component_table.tableTokens.table.body.frame.padding,
+    paddingX: component_table.tableTokens.table.body.paddingX.default,
+    framePadding: component_table.tableTokens.table.body.paddingX.frame,
 };
 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-BuaQW9U4.js');
+var index = require('./index-DsYLSqCp.js');
 
 const tab = {
 	main: {
@@ -207,7 +207,7 @@ const SdTabs = class {
         };
     }
     render() {
-        return (index.h("div", { key: 'f43d5e2e441e11b57d488f8fe612a4e555006c2e', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index$1) => {
+        return (index.h("div", { key: 'd5df329922f73444775ec827ce8cf3850c369131', 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-BuaQW9U4.js');
+var index = require('./index-DsYLSqCp.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: '28d45d8cd629c6cdd826834cbae719fd7c851511', class: { [`align-${this.align}`]: Boolean(this.align) } }, index.h("slot", { key: '0bab0005e4513464ad18698c111a55eb684434e9' })));
+        return (index.h(index.Host, { key: '2fce45ffda30fd75a0c0ef2ff0de5896c409c108', class: { [`align-${this.align}`]: Boolean(this.align) } }, index.h("slot", { key: '3e2131547d544d01c745017f3375a26df35a9d6e' })));
     }
     static get watchers() { return {
         "field": [{

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BuaQW9U4.js');
+var index = require('./index-DsYLSqCp.js');
 
 const textLink = {
 	sm: {
@@ -69,8 +69,7 @@ const textLink = {
 		},
 		gap: "8",
 		icon: "20"
-	}
-};
+	}};
 var textLinkTokens = {
 	textLink: textLink
 };

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BuaQW9U4.js');
+var index = require('./index-DsYLSqCp.js');
 
 const DEFAULT_DURATION = 4000;
 const DEFAULT_MAX_VISIBLE = 3;
@@ -161,9 +161,9 @@ const SdToastContainer = class {
             'top-left': { top: '20px', left: '20px' },
             'top-center': { top: '20px', left: '50%', transform: 'translateX(-50%)' },
             'top-right': { top: '20px', right: '20px' },
-            'bottom-left': { bottom: '20px', left: '20px' },
-            'bottom-center': { bottom: '20px', left: '50%', transform: 'translateX(-50%)' },
-            'bottom-right': { bottom: '20px', right: '20px' },
+            'bottom-left': { bottom: '100px', left: '20px' },
+            'bottom-center': { bottom: '100px', left: '50%', transform: 'translateX(-50%)' },
+            'bottom-right': { bottom: '100px', right: '20px' },
         };
         return { ...base, ...posMap[position] };
     }
@@ -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: '1e9af4dd46dd901ba903518c1425ce0bc723e4b4', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
+        return (index.h("div", { key: '17526924c57e06a77725f66233f5b5360097fac0', 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-BuaQW9U4.js');
+var index = require('./index-DsYLSqCp.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: '3d7a3fe3647010a8a96246ef3cdbfdf1550c0a91', style: {
+        return (index.h("div", { key: '124b32e52e9dfd7a09ac67ffb8032bf2217e9c05', style: {
                 '--sd-toast-bg': typeConfig.bg,
                 '--sd-toast-text': typeConfig.content,
                 '--sd-toast-icon': iconColor,
                 '--sd-toast-link': linkColor,
-            } }, index.h("div", { key: 'a863ff763bced7656cedc69f3598b3371fc13059', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: '7606930ad68ab81543a719db8abb61055fdaf97d', class: "sd-toast__icon" }, index.h("sd-icon", { key: '9b75fb05ab26ddab43b677482a026b5860613e07', name: this.icon, size: iconSize, color: iconColor }))), index.h("div", { key: '5fb10f690ad560f0be74b5bf6afd288318e22082', class: "sd-toast__content" }, index.h("span", { key: 'c474a5e1f215a19e47a89ba154f6149e0a875f61', class: "sd-toast__message" }, this.message)), this.link && (index.h("a", { key: 'a0dcbba791c123776ccb6de62e169359777b3bd2', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (index.h("sd-button", { key: 'b85f734cbe429207c028602b29bd5f7fa78f7910', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (index.h("sd-ghost-button", { key: '09cb6b946c18c1c079b036799272d7bc7bdb6480', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
+            } }, 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() })))));
     }
 };
 SdToast.style = sdToastCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BuaQW9U4.js');
+var index = require('./index-DsYLSqCp.js');
 
 const toggle = {
 	height: "28",
@@ -30,8 +30,7 @@ const toggle = {
 		hover: "#FFFFFF",
 		select: "#0075FF",
 		disabled: "#888888"
-	}
-};
+	}};
 var toggleTokens = {
 	toggle: toggle
 };
@@ -124,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: 'b25e66cadfeee2714f137504ad49c8bf66622f60', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, index.h("input", { key: '276f7411899bcb14db93a6f2b93cc51b5363e1c9', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        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 })));
     }
 };
 SdToggle.style = sdToggleCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BuaQW9U4.js');
+var index = require('./index-DsYLSqCp.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-action-modal/sd-action-modal.config.js

@@ -1,12 +1,14 @@
 import modalTokens from "../../tokens/generated/component.modal.json";
+import overlayTokens from "../../tokens/generated/component.overlay.json";
 const { modal } = modalTokens;
 const action = modal.action;
+const overlayHeader = overlayTokens.overlay.header;
 export const ACTION_MODAL_LAYOUT = {
     radius: Number(modal.radius),
     bg: modal.bg,
-    headerPaddingX: Number(action.header.paddingX),
-    headerPaddingY: Number(action.header.paddingY),
-    headerGap: Number(action.header.gap),
+    headerPaddingX: Number(overlayHeader.paddingX),
+    headerPaddingY: Number(overlayHeader.paddingY),
+    headerGap: Number(overlayHeader.gap),
     bodyPaddingX: Number(action.body.paddingX),
     bodyPaddingBottom: Number(action.body.paddingBottom),
     footerPaddingX: Number(action.footer.paddingX),
@@ -16,9 +18,9 @@ export const ACTION_MODAL_LAYOUT = {
     footerBorder: action.footer.border,
 };
 export const ACTION_MODAL_TITLE = {
-    color: action.title.color,
-    fontFamily: action.title.typography.fontFamily,
-    fontWeight: action.title.typography.fontWeight,
-    fontSize: Number(action.title.typography.fontSize),
-    lineHeight: Number(action.title.typography.lineHeight),
+    color: overlayHeader.title.color,
+    fontFamily: overlayHeader.title.typography.fontFamily,
+    fontWeight: overlayHeader.title.typography.fontWeight,
+    fontSize: Number(overlayHeader.title.typography.fontSize),
+    lineHeight: Number(overlayHeader.title.typography.lineHeight),
 };

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

@@ -1,4 +1,3 @@
-import spinnerTokens from "../../tokens/generated/component.spinner.json";
 import progressTokens from "../../tokens/generated/component.progress.json";
 import systemTokens from "../../tokens/generated/system.json";
 export const CIRCLE_PROGRESS_LABEL_COLOR = progressTokens.progress.color.label;
@@ -6,8 +5,8 @@ export const CIRCLE_PROGRESS_PERCENT_ZERO_COLOR = systemTokens.color.fg.tertiary
 // TODO: error/complete 색상 및 inverse 흰색은 토큰 반영 후 교체
 export const CIRCLE_PROGRESS_COLOR_MAP = {
     primary: {
-        arc: spinnerTokens.spinner.color.arc,
-        track: spinnerTokens.spinner.color.track,
+        arc: progressTokens.progress.active.color,
+        track: progressTokens.progress.color.track,
     },
     inverse: {
         arc: '#FFFFFF',
@@ -15,11 +14,11 @@ export const CIRCLE_PROGRESS_COLOR_MAP = {
     },
     error: {
         arc: '#E30000',
-        track: spinnerTokens.spinner.color.track,
+        track: progressTokens.progress.color.track,
     },
     complete: {
         arc: '#01BB4B',
-        track: spinnerTokens.spinner.color.track,
+        track: progressTokens.progress.color.track,
     },
 };
 export const CIRCLE_PROGRESS_VIEWBOX_SIZE = 80;

package/dist/collection/components/sd-dropdown-button/sd-dropdown-button.config.js

@@ -54,8 +54,8 @@ export const DROPDOWN_CHEVRON_ICON_SIZE = {
 // 버튼 자체의 min-width (px). split 여부에 따라 chevron 버튼이 추가되므로 별도 값을 지정.
 // TODO: 디자인 토큰으로 관리될 때 대체 예정
 export const DROPDOWN_BUTTON_MIN_WIDTH = {
-    xs: { default: 44, split: 60 },
-    sm: { default: 70, split: 76 },
+    xs: { default: 64, split: 72 },
+    sm: { default: 72, split: 88 },
     md: { default: 100, split: 106 },
 };
 export const DROPDOWN_DISABLED_BACKGROUND = buttonTokens.button.bg.disabled;

package/dist/collection/components/sd-field/sd-field.css

@@ -112,6 +112,11 @@ sd-field .sd-field.sd-field--focus:not(.sd-field--readonly) .sd-field__wrapper .
   border: 1px solid var(--sd-system-color-field-border-focus) !important;
   box-shadow: 0px 0px 4px 0px rgba(0, 113, 255, 0.4);
 }
+sd-field .sd-field.sd-field--borderless .sd-field__wrapper .sd-field__control, sd-field .sd-field.sd-field--borderless.sd-field--error .sd-field__wrapper .sd-field__control:not(:hover), sd-field .sd-field.sd-field--borderless.sd-field--pass .sd-field__wrapper .sd-field__control, sd-field .sd-field.sd-field--borderless:not(.sd-field--disabled):not(.sd-field--readonly) .sd-field__wrapper .sd-field__control:hover, sd-field .sd-field.sd-field--borderless.sd-field--focus:not(.sd-field--readonly) .sd-field__wrapper .sd-field__control {
+  border-color: transparent !important;
+  background: transparent !important;
+  box-shadow: none !important;
+}
 sd-field .sd-field .sd-field__error-message {
   color: var(--sd-field-error-message-color);
   font-size: var(--sd-field-error-message-font-size);

package/dist/collection/components/sd-field/sd-field.js

@@ -38,6 +38,11 @@ export class SdField {
     width = '';
     /** 필드 크기 */
     size = 'sm';
+    /**
+     * 테두리 박스 제거 (inline 컨트롤용) — border/배경/hover·focus 강조만 사라지고
+     * label·hint·errorMessage 등 나머지 필드 구성은 그대로 동작한다.
+     */
+    borderless = false;
     // props - label
     /** 레이블 텍스트 */
     label = '';
@@ -205,18 +210,19 @@ export class SdField {
                     : {}),
             }
             : {};
-        return (h("div", { key: '7673ab0d94a03bcfa42381c961e749cd083d7af0', class: {
+        return (h("div", { key: 'bce0bc8ccc19e41c2a61980bd12f07d7f8838569', class: {
                 'sd-field': true,
                 'sd-field--has-label': this.label !== '',
                 'sd-field--has-addon': addon !== '',
+                'sd-field--borderless': this.borderless,
                 [this.fieldStatus]: this.fieldStatus !== '',
-            }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars, ...messageCssVars } }, h("div", { key: '00c5056105b72f143a8c4249b8cd3b6a60fb6d1d', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: 'e99461246fa8ceadaf7a43f1c62c474caa160972', class: "sd-field__main" }, h("div", { key: '6bf754d3a167b1ca4f23d2e1d260643e278e85f6', class: {
+            }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars, ...messageCssVars } }, h("div", { key: 'c6c4e3ec6e018ebd0dc6fbbae5fbaef4ea6503e5', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: 'bd778a24325412924e0a331db592535e4b4e542b', class: "sd-field__main" }, h("div", { key: '485cfbdbfa7299cb27d84e61306d6e2cf196d071', class: {
                 'sd-field__control': true,
                 'sd-field__control--has-addon': addon !== '',
             }, style: this.width !== '' && this.width !== 0
                 ? { width: typeof this.width === 'number' ? `${this.width}px` : this.width }
-                : {} }, addon && (h("div", { key: '2d9acde5ecaeb32a94e1ba33c408160a2f2da46f', class: "sd-field__addon" }, this.icon && (h("sd-icon", { key: 'a0916124710c29478feffef96efdaffe599d4bc7', name: this.icon.name, size: this.icon.size ??
-                Number(FIELD_LABEL_SIZE_MAP[(this.size in FIELD_LABEL_SIZE_MAP ? this.size : 'sm')].icon), color: this.icon.color, rotate: this.icon.rotate })), addon)), h("slot", { key: '2e4690a4678ca40deb9e023baae24a44fd4da959' })), this.errorMsg !== '' || this.errorMessage !== '' ? (h("div", { class: "sd-field__error-message" }, this.errorMsg !== '' ? this.errorMsg : this.errorMessage)) : (this.hint !== '' && h("div", { class: "sd-field__hint" }, this.hint))))));
+                : {} }, addon && (h("div", { key: '510238ac22b7e923724cc20abf2541adbddcb594', class: "sd-field__addon" }, this.icon && (h("sd-icon", { key: '2cca5b62cbe56050acd536764c33cbc3009f740b', name: this.icon.name, size: this.icon.size ??
+                Number(FIELD_LABEL_SIZE_MAP[(this.size in FIELD_LABEL_SIZE_MAP ? this.size : 'sm')].icon), color: this.icon.color, rotate: this.icon.rotate })), addon)), h("slot", { key: '470c0d559409a11f1c5650e88a50555a4656d3f9' })), this.errorMsg !== '' || this.errorMessage !== '' ? (h("div", { class: "sd-field__error-message" }, this.errorMsg !== '' ? this.errorMsg : this.errorMessage)) : (this.hint !== '' && h("div", { class: "sd-field__hint" }, this.hint))))));
     }
     renderLabel(label) {
         if (label == null || label === '')
@@ -488,6 +494,26 @@ export class SdField {
                 "attribute": "size",
                 "defaultValue": "'sm'"
             },
+            "borderless": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\uD14C\uB450\uB9AC \uBC15\uC2A4 \uC81C\uAC70 (inline \uCEE8\uD2B8\uB864\uC6A9) \u2014 border/\uBC30\uACBD/hover\u00B7focus \uAC15\uC870\uB9CC \uC0AC\uB77C\uC9C0\uACE0\nlabel\u00B7hint\u00B7errorMessage \uB4F1 \uB098\uBA38\uC9C0 \uD544\uB4DC \uAD6C\uC131\uC740 \uADF8\uB300\uB85C \uB3D9\uC791\uD55C\uB2E4."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "borderless",
+                "defaultValue": "false"
+            },
             "label": {
                 "type": "string",
                 "mutable": false,

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

@@ -12,7 +12,7 @@ sd-file-picker {
 
 .sd-file-picker__chip-list {
   display: flex;
-  flex-direction: column;
+  flex-flow: row wrap;
   gap: 8px;
   margin-top: 8px;
 }
@@ -90,15 +90,12 @@ sd-file-picker {
 }
 
 .sd-file-picker--inline .sd-file-picker__content {
-  border: none;
-  background-color: transparent;
   padding: 0;
-  height: auto;
 }
 .sd-file-picker--inline .sd-file-picker__text {
   color: var(--sd-file-picker-placeholder-color);
 }
-.sd-file-picker--inline:hover:not(.sd-file-picker--inline-disabled) .sd-file-picker__text {
+.sd-file-picker--inline:not(.sd-file-picker--inline-disabled) .sd-file-picker__content:hover .sd-file-picker__text {
   color: var(--sd-file-picker-text-color);
 }
 .sd-file-picker--inline .sd-file-picker__text--active {

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

@@ -9,7 +9,7 @@ export class SdFilePicker {
     placeholder = 'Click to upload';
     /** 비활성 상태 여부 */
     disabled = false;
-    /** sd-field 없이 인라인으로 표시하는 모드 여부 */
+    /** 인라인 표시 — sd-field 테두리 박스만 사라지고 label/rules/hint 는 그대로 동작 */
     inline = false;
     /** 다중 파일 선택 여부 */
     multiple = false;
@@ -170,14 +170,10 @@ export class SdFilePicker {
         this.fileInputRef?.click();
     };
     hasFiles() {
-        if (this.multiple)
-            return false;
-        if (!this.internalValue)
-            return false;
         if (Array.isArray(this.internalValue)) {
             return this.internalValue.length > 0;
         }
-        return true;
+        return !!this.internalValue;
     }
     hasChips() {
         return Array.isArray(this.internalValue) && this.internalValue.length > 0;
@@ -185,6 +181,9 @@ export class SdFilePicker {
     getDisplayText() {
         if (!this.hasFiles())
             return this.placeholder ?? 'Click to upload';
+        if (this.multiple && Array.isArray(this.internalValue)) {
+            return this.internalValue.map(f => f.name).join(', ');
+        }
         return this.internalValue?.name || (this.placeholder ?? 'Click to upload');
     }
     handleChipRemove = (index) => {
@@ -226,23 +225,21 @@ export class SdFilePicker {
             '--sd-system-size-field-sm-height': `${FILE_PICKER_LAYOUT.height}px`,
             '--sd-system-radius-field-sm': `${FILE_PICKER_LAYOUT.radius}px`,
         };
-        const content = (h("div", { role: "button", tabindex: this.disabled ? -1 : 0, class: "sd-file-picker__content", onClick: this.handleClick, onKeyDown: e => {
+        const content = (h("div", { key: 'f686c8d06b3dbecc037e21f41e7f307d08349e8b', role: "button", tabindex: this.disabled ? -1 : 0, class: "sd-file-picker__content", onClick: this.handleClick, onKeyDown: e => {
                 if (e.key === 'Enter' || e.key === ' ') {
                     e.preventDefault();
                     this.handleClick();
                 }
-            } }, h("input", { ref: el => (this.fileInputRef = el), type: "file", class: "sd-file-picker__input", disabled: this.disabled, multiple: this.multiple, accept: this.accept, onInput: this.handleFileChange, "aria-label": this.placeholder ?? 'Click to upload' }), h("sd-icon", { name: "attachFile", size: Number(FILE_PICKER_LAYOUT.iconSize), color: this.getIconColor(), class: "sd-file-picker__icon" }), h("div", { ref: el => (this.fileNamesRef = el), class: {
+            } }, h("input", { key: 'a519e5a7c253d9d9bba21401b2f83092aa8a3a91', ref: el => (this.fileInputRef = el), type: "file", class: "sd-file-picker__input", disabled: this.disabled, multiple: this.multiple, accept: this.accept, onInput: this.handleFileChange, "aria-label": this.placeholder ?? 'Click to upload' }), h("sd-icon", { key: 'b9e7548365f1d54957b6e575d3532a833e301a98', name: "attachFile", size: Number(FILE_PICKER_LAYOUT.iconSize), color: this.getIconColor(), class: "sd-file-picker__icon" }), h("div", { key: 'cb28d1c3abf0e9c30454f01bb8c81cb0ea4477af', ref: el => (this.fileNamesRef = el), class: {
                 'sd-file-picker__text': true,
                 'sd-file-picker__text--placeholder': !hasFiles,
                 'sd-file-picker__text--active': hasFiles,
-            } }, displayText), !this.disabled && hasFiles && (h("sd-ghost-button", { icon: "close", size: "xxs", ariaLabel: "clear", disabled: this.disabled, class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (h("div", { class: "sd-file-picker__tooltip" }, displayText))));
-        if (this.inline) {
-            return (h("div", { class: {
-                    'sd-file-picker--inline': true,
-                    'sd-file-picker--inline-disabled': this.disabled,
-                }, style: cssVars, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, content, this.renderChipList()));
-        }
-        return (h("div", { class: "sd-file-picker__wrapper", style: cssVars }, h("sd-field", { 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, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, content), this.renderChipList()));
+            } }, displayText), !this.disabled && hasFiles && (h("sd-ghost-button", { key: 'c97d7c306ef2087a9874a16b6e485a94c7cc571f', icon: "close", size: "xxs", ariaLabel: "clear", disabled: this.disabled, class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (h("div", { key: '293a4c75766be383a4ad6f79052111c09608e0e2', class: "sd-file-picker__tooltip" }, displayText))));
+        return (h("div", { key: '4e25add1b74a232e8786efca26f87ccb5d48f19d', class: {
+                'sd-file-picker__wrapper': true,
+                'sd-file-picker--inline': this.inline,
+                'sd-file-picker--inline-disabled': this.inline && this.disabled,
+            }, style: cssVars }, h("sd-field", { key: 'fda8f53237f5efb4f1dec906d87851dd10c03593', borderless: this.inline, 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, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, content), this.renderChipList()));
     }
     static get is() { return "sd-file-picker"; }
     static get originalStyleUrls() {
@@ -332,7 +329,7 @@ export class SdFilePicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "sd-field \uC5C6\uC774 \uC778\uB77C\uC778\uC73C\uB85C \uD45C\uC2DC\uD558\uB294 \uBAA8\uB4DC \uC5EC\uBD80"
+                    "text": "\uC778\uB77C\uC778 \uD45C\uC2DC \u2014 sd-field \uD14C\uB450\uB9AC \uBC15\uC2A4\uB9CC \uC0AC\uB77C\uC9C0\uACE0 label/rules/hint \uB294 \uADF8\uB300\uB85C \uB3D9\uC791"
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/sd-floating-portal/sd-floating-portal.css

@@ -9,6 +9,7 @@
   box-sizing: border-box;
   background: var(--sd-floating-bg, #07284A);
   color: var(--sd-floating-content, #FFFFFF);
+  box-shadow: 2px 2px 12px 2px rgba(0, 0, 0, 0.1);
   animation: sd-floating-fade-in 0.35s ease-out;
 }
 .sd-floating-menu--top {