@sellmate/design-system 1.0.78 → 1.2.0

package/dist/collection/components/sd-select/sd-select-list-item-search/sd-select-list-item-search.css

@@ -16,12 +16,12 @@ sd-select-list-item-search .sd-select-list-item-search__inner {
   align-items: center;
   gap: 6px;
   padding: 4px 8px;
-  border: 1px solid #CCCCCC;
+  border: 1px solid #cccccc;
   border-radius: 4px;
   background: white;
 }
 sd-select-list-item-search .sd-select-list-item-search__inner:focus-within {
-  border-color: #0075FF;
+  border-color: #0075ff;
 }
 sd-select-list-item-search .sd-select-list-item-search__icon {
   flex-shrink: 0;
@@ -37,7 +37,7 @@ sd-select-list-item-search .sd-select-list-item-search__input {
   min-width: 0;
 }
 sd-select-list-item-search .sd-select-list-item-search__input::placeholder {
-  color: #AAAAAA;
+  color: #aaaaaa;
 }
 sd-select-list-item-search .sd-select-list-item-search__clear {
   flex-shrink: 0;
@@ -51,7 +51,7 @@ sd-select-list-item-search .sd-select-list-item-search__clear {
   border-radius: 2px;
 }
 sd-select-list-item-search .sd-select-list-item-search__clear:hover {
-  background: #F0F0F0;
+  background: #f0f0f0;
 }
 sd-select-list-item-search .sd-select-list-item-search__clear--hidden {
   visibility: hidden;

package/dist/collection/components/sd-select/sd-select-list-item-search/sd-select-list-item-search.js

@@ -35,21 +35,21 @@ export class SdSelectListItemSearch {
         this.inputEl?.focus();
     };
     disconnectedCallback() {
-        if (this.focusRafId)
+        if (this.focusRafId !== undefined)
             cancelAnimationFrame(this.focusRafId);
-        if (this.debounceTimer)
+        if (this.debounceTimer !== undefined)
             clearTimeout(this.debounceTimer);
     }
     render() {
-        return (h("div", { key: '139aa74cb44baef15a5a75008dd291f11ad2965b', class: {
+        return (h("div", { key: '6872376ea0f47c256273f751fad367f2c49a9160', class: {
                 'sd-select-list-item-search': true,
                 'sd-select-list-item-search--scrolled': this.isScrolled,
-            } }, h("div", { key: '2df6559c3a0e769e50e72ef06828adcf595fc433', class: "sd-select-list-item-search__inner" }, h("sd-icon", { key: '20dfe4a309c7879bcdd1e5890f183a9e1eb98fae', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), h("input", { key: '825724eedf71693ce39a21f413c5a4eb6f1495e3', ref: el => {
+            } }, h("div", { key: 'f6c872e0252b6d7ba81f49938a4f5a647f0fb486', class: "sd-select-list-item-search__inner" }, h("sd-icon", { key: '49f10ed222e855ef6f0f5f12a65a74e1fec95bb5', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), h("input", { key: '76d88aa4ce7eee598db2709d2d5442465b1798cb', 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() }), h("button", { key: '20fb0c745d423b008f482a2e33e7e711ea40b5df', 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() }), h("button", { key: 'e94d1661c6ed26754d4ee7e186808ebd9f057ec9', 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' }, h("sd-icon", { key: 'ce6e4f9b5281ebb767d6542a223e425660ec01c9', name: "close", size: 12, color: "#888888" })))));
+                'sd-select-list-item-search__clear--hidden': this.searchText === '',
+            }, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, h("sd-icon", { key: 'ad89b3421ec345f47c8d67d78f20cae86869d4c1', name: "close", size: 12, color: "#888888" })))));
     }
     static get is() { return "sd-select-list-item-search"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-select/sd-select-listbox/sd-select-listbox.js

@@ -62,7 +62,7 @@ export class SdSelectListbox {
         return count >= SEARCH_THRESHOLD;
     }
     get filteredOptions() {
-        if (!this.searchKeyword)
+        if (this.searchKeyword === '')
             return this.options;
         if (this.isDepth)
             return filterTree(this.options, this.searchKeyword);
@@ -75,7 +75,7 @@ export class SdSelectListbox {
         return this.filteredOptions.length === 0;
     }
     getSelectedValues() {
-        if (!this.value || !Array.isArray(this.value))
+        if (this.value == null || !Array.isArray(this.value))
             return new Set();
         if (this.emitValue) {
             return new Set(this.value);
@@ -198,7 +198,7 @@ export class SdSelectListbox {
         // filterTree 가 매 호출마다 옵션 객체를 새로 복제하기 때문에 참조 비교
         // (=== / indexOf) 는 검색이 적용된 동안 항상 실패한다. 고유 식별자인
         // value 로 비교해야 한다.
-        return !!focused && focused.value === option.value;
+        return focused != null && focused.value === option.value;
     }
     resetFocusOnFilter() {
         // 필터가 바뀌면 이전 인덱스가 가리키던 항목이 사라질 수 있으므로
@@ -343,14 +343,14 @@ export class SdSelectListbox {
     }
     render() {
         const cssVars = {
-            '--listbox-trigger-width': this.triggerWidth,
-            '--listbox-max-width': this.maxWidth,
-            '--listbox-max-height': this.maxHeight,
+            '--listbox-trigger-width': this.triggerWidth ?? '200px',
+            '--listbox-max-width': this.maxWidth ?? '640px',
+            '--listbox-max-height': this.maxHeight ?? '260px',
             '--listbox-radius': `${LIST_BOX_LAYOUT.radius}px`,
         };
-        return (h("div", { key: 'c1582b1bc6058b78a8581511854f0878e7f39a94', class: "sd-select-listbox", style: cssVars }, this.showSearch && (h("sd-select-list-item-search", { key: '4fd2099bf8069f258596479123053a34a41c528d', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), h("div", { key: 'ff8643a308b07dbaebf627c7082a37efa6b72a10', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
+        return (h("div", { key: '8c9b1a4471bf4e535c5f156d087e1b9be76ad903', class: "sd-select-listbox", style: cssVars }, this.showSearch && (h("sd-select-list-item-search", { key: '4cc596a1ac21c9b258d5db07ecb15d566179d743', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), h("div", { key: '977e15c7987ca387cf30783741f99b322150627b', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
                 this.listEl = el;
-            } }, this.showSelectAll && (h("sd-select-list-item", { key: '30f0cfbc24304af8c704db33d0e51236971226ee', 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 ? (h("div", { class: "sd-select-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (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 && (h("sd-select-list-item", { key: 'dada5a6662b2d3fa63ed11ab1c82561d5e2d2400', 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 ? (h("div", { class: "sd-select-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (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 is() { return "sd-select-listbox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/sd-select/sd-select-trigger/sd-select-trigger.js

@@ -26,7 +26,7 @@ export class SdSelectTrigger {
         this.triggerBlur.emit();
     };
     render() {
-        const hasValue = !!this.displayText;
+        const hasValue = this.displayText !== '';
         const cssVars = {
             '--trigger-padding-x': `${SELECT_LAYOUT.paddingX}px`,
             '--trigger-gap': `${SELECT_LAYOUT.gap}px`,
@@ -42,13 +42,18 @@ export class SdSelectTrigger {
                 ? SELECT_COLORS.icon.disabled
                 : SELECT_COLORS.icon.default,
         };
-        return (h("div", { key: 'dddccfd47738e104a9c715a0c93df1882d28d704', ref: el => {
+        return (h("div", { key: '67cb0ffaf0197a3ad12c402810317801ce69d4a1', ref: el => {
                 this.triggerEl = el;
-            }, tabindex: this.disabled ? -1 : 0, class: {
+            }, role: "button", "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', tabindex: this.disabled ? -1 : 0, class: {
                 'sd-select-trigger': true,
                 'sd-select-trigger--open': this.isOpen,
                 'sd-select-trigger--disabled': this.disabled,
-            }, style: cssVars, onClick: this.handleClick, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("div", { key: '9f8572c4ec3fa02c9f94bb94a8a10358c4d6b3ae', class: "sd-select-trigger__content" }, h("span", { key: 'a4b5b27fc3a84adbd2e24981742ca45402993afb', class: "sd-select-trigger__text" }, hasValue ? this.displayText : this.placeholder), h("sd-icon", { key: '97bbcda656bae2248ca83fb2bd56373b2dd8dd41', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
+            }, style: cssVars, onClick: this.handleClick, onKeyDown: e => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    this.handleClick();
+                }
+            }, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("div", { key: '4c28c852054fd7b09e5c45c9eb13882540f66553', class: "sd-select-trigger__content" }, h("span", { key: 'df415c9ac8d00a58e5539c8c655f12ebd49208a4', class: "sd-select-trigger__text" }, hasValue ? this.displayText : (this.placeholder ?? '선택')), h("sd-icon", { key: '429008e1edaf778e8a85f945a681cd675f2489b7', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
                 'sd-select-trigger__icon': true,
                 'sd-select-trigger__icon--open': this.isOpen,
             } }))));

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

@@ -110,7 +110,7 @@ export class SdSelect {
     }
     getSelectedOptions() {
         const val = this.value;
-        if (!val || !Array.isArray(val))
+        if (val == null || !Array.isArray(val))
             return [];
         if (this.emitValue) {
             return val
@@ -254,15 +254,15 @@ export class SdSelect {
                 this.closeDropdown();
             },
         };
-        return (h("sd-field", { key: '76625e332090d20e2f66159bba5ee1b9a11320a6', 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 (h("sd-field", { key: '668df27ea03b5c2479f89649c494375bacd762ec', 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;
-            } }, h("div", { key: '8a0ae8a5e05459128409dbe21779f5e3d91b3a04', class: "sd-select", ref: el => {
+            } }, h("div", { key: '7d391d2c0719c165e9d19f5fdc34d39c374401e9', class: "sd-select", ref: el => {
                 this.triggerRef = el;
-            } }, h("sd-select-trigger", { key: '6b47231914655a8e197e3b38cd8e37c5214efc17', ref: el => {
+            } }, h("sd-select-trigger", { key: 'b09a0f9dcb0071b79a21c8184deb7d07ba54185f', 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) && (h("sd-portal", { key: 'eaed402d276cc94a1324ede9cbf09bc436f8a1db', ...portalProps }, h("sd-select-listbox", { key: 'a96f75e06d974c8fd88ac72f083fe4b0ef424a0b', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, useSearch: this.useSearch, useSelectAll: this.useSelectAll, triggerWidth: 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) && (h("sd-portal", { key: '2ae67c5e98c66c2a74ba96f4602ea14d53dd0177', ...portalProps }, h("sd-select-listbox", { key: '97ee517fa777abd4926f8105fd046e39dfeeb5ff', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, useSearch: this.useSearch, useSelectAll: this.useSelectAll, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
     }
     static get is() { return "sd-select"; }
     static get originalStyleUrls() {
@@ -656,7 +656,7 @@ export class SdSelect {
                 "mutable": false,
                 "complexType": {
                     "original": "SdTooltipProps | null",
-                    "resolved": "SdTooltipProps | null",
+                    "resolved": "SdTooltip | null",
                     "references": {
                         "SdTooltipProps": {
                             "location": "import",

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

@@ -40,7 +40,7 @@ export class SdSwitch {
             '--sd-switch-line-height': `${SWITCH_TYPOGRAPHY.lineHeight}px`,
             '--sd-switch-text-decoration': SWITCH_TYPOGRAPHY.textDecoration,
         };
-        return (h("label", { key: '54ebe92b29a80537e2e4380ffe096a252f883d10', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, h("input", { key: 'd18abbbf293434f07ae7dfa18b983b47cac1b774', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), h("div", { key: '76fef910e632b541c0b33c508e6001529df5614f', class: "sd-switch__track" }, h("div", { key: 'a66f4ecca5787f00febe19216a93ec62916e0541', class: "sd-switch__knob" })), this.label && h("span", { key: '948d2b7afc6e171ee329752cb85f8e361f6bbed8', class: "sd-switch__label" }, this.label)));
+        return (h("label", { key: 'a37c1387905456007de46a6050616b025ad06b37', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, h("input", { key: '5fcc9f72e177956e015e4cb009936edc60c4c3ec', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), h("div", { key: 'bf1fa22a94b2b245a2ddf805df4cd1c204524710', class: "sd-switch__track" }, h("div", { key: '11dafcd812c560acb7a63f7267f40f8ed67da95b', class: "sd-switch__knob" })), this.label && h("span", { key: '6609d2e33e82e843ffd5bbb2d2010de3e299f081', class: "sd-switch__label" }, this.label)));
     }
     static get is() { return "sd-switch"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-table/sd-table.config.js

@@ -42,8 +42,12 @@ export const TABLE_BODY_TYPOGRAPHY = {
 };
 // ── Frame / Border Tokens ──
 export const TABLE_BORDER = {
-    color: tableTokens.table.border.default,
-    width: tableTokens.table.border.width.width,
+    color: tableTokens.table.border.color,
+    width: tableTokens.table.border.width,
+};
+export const TABLE_SEPARATOR = {
+    color: tableTokens.table.separator.color,
+    width: tableTokens.table.separator.Width,
 };
 export const TABLE_RADIUS = tableTokens.table.radius;
 // ── Content Tokens ──

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

@@ -20,7 +20,7 @@ sd-table *,
   flex-direction: column;
 }
 
-.sd-table__clip {
+.sd-table__wrapper {
   width: 100%;
   min-width: 0;
   height: var(--table-container-height, 400px);
@@ -28,11 +28,11 @@ sd-table *,
   border-radius: var(--table-radius, 8px);
   overflow: hidden;
 }
-.sd-table__clip--has-pagination {
-  border-radius: var(--table-radius, 8px) var(--table-radius, 8px) 0 0;
+.sd-table__wrapper--radius-use-top {
+  border-radius: 0 0 var(--table-radius, 8px) var(--table-radius, 8px);
 }
 
-.sd-table__wrapper {
+.sd-table__scroll-container {
   width: 100%;
   height: 100%;
   display: flex;
@@ -46,18 +46,21 @@ sd-table *,
   overflow: auto;
   background: #FFFFFF;
 }
-.sd-table__wrapper--loading {
+.sd-table__scroll-container--loading {
   overflow: hidden !important;
   pointer-events: none;
 }
-.sd-table__wrapper--no-data {
+.sd-table__scroll-container--no-data {
   overflow: hidden;
   pointer-events: none;
 }
 
 .sd-table__no-data {
   position: absolute;
-  inset: 0;
+  top: 36px;
+  left: 0;
+  right: 0;
+  bottom: 0;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -67,9 +70,25 @@ sd-table *,
   z-index: 200;
   background: rgba(255, 255, 255, 0.6);
 }
-.sd-table__no-data ::slotted(*),
-.sd-table__no-data span {
+
+.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 {
@@ -130,8 +149,8 @@ sd-table *,
   align-items: center;
   justify-content: center;
   border: var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);
-  border-top: none;
-  border-radius: 0 0 var(--table-radius, 8px) var(--table-radius, 8px);
+  margin-top: -1px;
+  border-radius: var(--table-radius, 8px);
 }
 .sd-table__pagination sd-select {
   position: absolute;