@sellmate/design-system 1.9.0 → 1.11.0

package/dist/esm/sd-loading-container.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-BpO2YWvq.js';
+import { r as registerInstance, h } from './index-D3yCWQNg.js';
 
 const sdLoadingContainerCss = () => `sd-loading-container .sd-loading-container{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:var(--sd-loading-container-z-index, 999);opacity:0;visibility:hidden;transition:opacity 0.2s ease, visibility 0s linear 0.2s;pointer-events:none}sd-loading-container .sd-loading-container--visible{opacity:1;visibility:visible;transition:opacity 0.2s ease, visibility 0s linear 0s;pointer-events:auto}sd-loading-container .sd-loading-container__backdrop{position:absolute;inset:0;background:rgba(0, 0, 0, 0.4)}sd-loading-container .sd-loading-container__content{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px}sd-loading-container .sd-loading-container__message{margin:0;color:#ffffff;font-size:14px;font-weight:500;line-height:22px;text-align:center;max-width:400px;word-break:keep-all}`;
 
@@ -16,10 +16,10 @@ const SdLoadingContainer = class {
         this.visible = false;
     }
     render() {
-        return (h("div", { key: '99c6d9e798862f41142f246f371a357cd604aa44', class: {
+        return (h("div", { key: '314f23e9da2ec850d62b4d4e347055669841c1fe', class: {
                 'sd-loading-container': true,
                 'sd-loading-container--visible': this.visible,
-            }, "aria-hidden": this.visible ? 'false' : 'true' }, h("div", { key: 'b836c7d283113e57d0947a178035591521dc8ee2', class: "sd-loading-container__backdrop" }), h("div", { key: '02f1ae9b17eedb29f24d0170c65ef4217f38a5b5', class: "sd-loading-container__content" }, h("sd-circle-progress", { key: '3d9c1b33693e823c4c55967d00a63eff8a2a805e', indeterminate: true, type: "inverse" }), this.message && (h("p", { key: '46c060f444506a9771507b09fd0867f763a95680', class: "sd-loading-container__message" }, this.message)))));
+            }, "aria-hidden": this.visible ? 'false' : 'true' }, h("div", { key: '541eb68218969c73e52bc8cbdb79171ee0ba908e', class: "sd-loading-container__backdrop" }), h("div", { key: '95192e0c936419248c46a57acb4c5ab63465a2f5', class: "sd-loading-container__content" }, h("sd-circle-progress", { key: '5584a90aa595d3eaffc3597604a9dc359b22bcaf', indeterminate: true, type: "inverse" }), this.message && (h("p", { key: 'e9dc0afbe43a318d7e776dd2f0bafa68ebe8536e', class: "sd-loading-container__message" }, this.message)))));
     }
 };
 SdLoadingContainer.style = sdLoadingContainerCss();

package/dist/esm/sd-modal-container.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, a as getElement, h } from './index-BpO2YWvq.js';
+import { r as registerInstance, a as getElement, h } from './index-D3yCWQNg.js';
 import { u as unregisterModal, r as registerModal, s as setModalInteractive, i as isTopInteractiveModal, a as requestCloseForModal } from './modal-stack-DRVnqiWc.js';
 
 const sdModalContainerCss = () => `sd-modal-container{display:block}sd-modal-container .sd-modal-container{position:fixed;inset:0;z-index:var(--sd-modal-container-z-index, 997);pointer-events:none}sd-modal-container .sd-modal-container__layer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}sd-modal-container .sd-modal-container__backdrop{position:absolute;inset:0;background:rgba(0, 0, 0, 0.4);opacity:0;transition:opacity 0.3s ease-out;pointer-events:none}sd-modal-container .sd-modal-container__backdrop--visible{opacity:1;pointer-events:auto}sd-modal-container .sd-modal-container__modal{position:relative;z-index:1;opacity:0;transform:scale(0);pointer-events:auto;transition:opacity 0.3s ease-out, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)}sd-modal-container .sd-modal-container__modal--visible{opacity:1;transform:scale(1)}sd-modal-container .sd-modal-container__modal--shake{animation:modal-shake 0.3s ease-out}@keyframes modal-shake{0%,100%{transform:scale(1)}25%{transform:scale(1.03)}50%{transform:scale(0.97)}75%{transform:scale(1.01)}}`;

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment, a as getElement, H as Host } from './index-BpO2YWvq.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, a as getElement, H as Host } from './index-D3yCWQNg.js';
 import { T as TABLE_ID_ATTR } from './constants-sZMi_32I.js';
 import { a as TABLE_SELECTABLE_COLUMN_WIDTH, r as resolveTableIconColor, e as resolveSortIconName, c as TABLE_BORDER, f as TABLE_HEADER_RESIZING_BAR, g as TABLE_HEADER_TYPOGRAPHY, h as TABLE_HEADER_COLORS, i as TABLE_HEADER_LAYOUT, T as TABLE_BODY_LAYOUT, j as TABLE_SEPARATOR, b as TABLE_BODY_TYPOGRAPHY } from './sd-table.config-D9meRqTx.js';
 import './component.table-D6GUzecR.js';
@@ -152,13 +152,13 @@ const SdPagination = class {
             '--sd-pagination-bg-selected': PAGINATION_COLORS.bgSelected,
             '--sd-pagination-item-width': `${this.buttonWidth}px`,
         };
-        return (h("div", { key: '36a334a05ade253a6345e82d57647a4bab0c94cf', class: {
+        return (h("div", { key: 'abfac6b075ce59ac37f747bf15729bf3879b1749', class: {
                 'sd-pagination': true,
                 'sd-pagination--simple': this.simple,
-            }, style: cssVars }, h("div", { key: '50963e0cdf4da3078020207c0115ccebfe1881d6', class: "sd-pagination__group sd-pagination__group--prev" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "sd-pagination__info" }, h("span", { class: "sd-pagination__current" }, this.currentPage), h("span", { class: "sd-pagination__divider" }, "/"), h("span", { class: "sd-pagination__last" }, this.lastPage))) : (h("div", { class: "sd-pagination__numbers" }, this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
+            }, style: cssVars }, h("div", { key: '6c8a3eb2ad708649054068a671cf156fe154fae3', class: "sd-pagination__group sd-pagination__group--prev" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "sd-pagination__info" }, h("span", { class: "sd-pagination__current" }, this.currentPage), h("span", { class: "sd-pagination__divider" }, "/"), h("span", { class: "sd-pagination__last" }, this.lastPage))) : (h("div", { class: "sd-pagination__numbers" }, this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
                 'sd-pagination__item': true,
                 'sd-pagination__item--selected': this.currentPage === n,
-            }, onClick: () => this.handlePageChange(n) }, n))))), h("div", { key: 'a0d0b565cd2b5108c997888b2536ee740b167367', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n))))), h("div", { key: 'f0013d0057e6addb6a7fae39ebddd2c4f7af5bd0', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
     }
 };
 SdPagination.style = sdPaginationCss();
@@ -213,9 +213,9 @@ const SdTbody = class {
         }
     }
     render() {
-        return (h(Host, { key: '835dc8ccba601a916fdd8466176a8ad8896c2bf7', slot: `${this.tableId}-body` }, h("tbody", { key: 'e2013dde727695abc366e4e3a1660c8a5835fe67', class: { tbody: true } }, [
+        return (h(Host, { key: 'bc05db24c914d72f0480e0d6d9b594e21cf03153', slot: `${this.tableId}-body` }, h("tbody", { key: 'ba4eb8fcbc184bcd245f47093ca5acfacc3aebf3', class: { tbody: true } }, [
             this.topSpacerHeight > 0 && (h("tr", { key: "spacer-top", class: "tbody__spacer", style: { height: `${this.topSpacerHeight}px`, display: 'block' } })),
-            h("slot", { key: '1d75d1880a9b8e0c646b93443cf708c7d4e399c7' }),
+            h("slot", { key: '3c9d25b226dfb20b044a718416d3cdda13eff798' }),
             this.bottomSpacerHeight > 0 && (h("tr", { key: "spacer-bottom", class: "tbody__spacer", style: { height: `${this.bottomSpacerHeight}px`, display: 'block' } })),
         ])));
     }
@@ -390,16 +390,16 @@ const SdThead = class {
             '--table-border-color': TABLE_BORDER.color,
             '--table-border-width': `${TABLE_BORDER.width}px`,
         };
-        return (h(Host, { key: '6984dbdc0ac520bda1aff4dcb3468d88ba4f5f47', slot: `${this.tableId}-head`, style: headStyle }, h("thead", { key: 'e2c83c062219727f33ae8b7d67c54910a2d907a0', class: {
+        return (h(Host, { key: '822abd0e5ff71d9e55b6478d56c9277009983deb', slot: `${this.tableId}-head`, style: headStyle }, h("thead", { key: '7c690c49eb0d9be48637b8a6e92287fac22bf377', class: {
                 'thead': true,
                 'thead--sticky': this._stickyHeader,
-            } }, h("tr", { key: '43ff9b8c3c7c6c2941a87defcc296936300664c8', class: "tr" }, this._selectable && (h("th", { key: '5126c20814657af0731b18359ac160717439a388', class: {
+            } }, h("tr", { key: '81c64bb5b06d7e8525ebceaf6a229034e90f7a48', class: "tr" }, this._selectable && (h("th", { key: 'fe00535fb5cd54d053c17b3d3a6fa8869d483b8b', class: {
                 'th': true,
                 'th--selected': true,
                 'sticky-left': true,
                 'sticky-left-edge': stickyLeftCount === 0,
                 'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
-            }, style: { '--sticky-left-offset': '0px' } }, h("sd-checkbox", { key: '39777a1e26376d9ed4c59ae3fcf1d6190b9007eb', value: this.getIsAllChecked(), disabled: safeRows.length === 0, onSdUpdate: (e) => this.handleSelectAll(e.detail) }), h("div", { key: 'd4212b9d4e2905cd5dfd57046e4455d12d09988d', class: "th__bar" }))), stickyLeftCols.map((col, idx) => (h("th", { key: col.name, class: {
+            }, style: { '--sticky-left-offset': '0px' } }, h("sd-checkbox", { key: 'de1a3ddf9b3df06d8cc9b85431c31ff84b7b8218', value: this.getIsAllChecked(), disabled: safeRows.length === 0, onSdUpdate: (e) => this.handleSelectAll(e.detail) }), h("div", { key: 'afe516ce212b24abcb075b6e6eb661ffcb6ce297', class: "th__bar" }))), stickyLeftCols.map((col, idx) => (h("th", { key: col.name, class: {
                 'th': true,
                 [`${col.thClass}`]: Boolean(col.thClass),
                 'sticky-left': true,

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, a as getElement, h, F as Fragment } from './index-BpO2YWvq.js';
-import { T as TooltipArrow } from './tooltipArrow-DrrY_fPj.js';
+import { r as registerInstance, c as createEvent, a as getElement, h, F as Fragment } from './index-D3yCWQNg.js';
+import { T as TooltipArrow } from './tooltipArrow-CUCfrch1.js';
 
 const popover = {
 	"default": {

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-BpO2YWvq.js';
+import { r as registerInstance, c as createEvent, h } from './index-D3yCWQNg.js';
 import { s as systemTokens } from './system-j2khhcHY.js';
 
 const popup$1 = {
@@ -103,7 +103,7 @@ const SdPopup = class {
             ...DEFAULT_SUBMIT_BUTTON_PROPS,
             ...this.submitButtonProps,
         };
-        return (h("div", { key: '77379698e76b000368df2d2b7345010cde3df7ba', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, h("header", { key: 'e00d2292b718bfd21e491a09e5ea8c18fbb1a2c8', class: "sd-popup__header" }, h("h2", { key: 'b8bac8f58f7f916a3b6fe40a66d21318da45d4d3', class: "sd-popup__title" }, this.popupTitle)), h("div", { key: '56e5b653539752b9fd0fa4694f7342914cd7abc6', class: "sd-popup__body" }, h("slot", { key: '183fafa8179a3350817ec6e3dea12281860f7639' })), this.useFooter && (h("footer", { key: 'd1b7fe2d67e5f3ad3b3f8e20408271fdaab86d93', class: "sd-popup__footer" }, h("div", { key: '7cc5d0bd9d314942d8d5f982f1f459c56fde4bc0', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, h("slot", { key: 'ffb52c9d679e4ddf9e50e012f8a9aa02b0cb1f95', name: "footer-left" })), h("sd-button", { key: '3ab8061bf4119a9351921a41c3d9cb942c00b5d1', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
+        return (h("div", { key: 'ea933af50e1ad1a29cf8d73ce70222e2f44c0bb5', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, h("header", { key: '50f1773d911175182888a98a0759b8d3d8829d2f', class: "sd-popup__header" }, h("h2", { key: '4e21a73a6e26388c6b1c814a91ee8a79bf57c576', class: "sd-popup__title" }, this.popupTitle)), h("div", { key: 'dd6ace33c6d8b3e20c0c85c95580efbf8ad6747c', class: "sd-popup__body" }, h("slot", { key: 'e40fbea5b93016131df544f32b74676d2892204e' })), this.useFooter && (h("footer", { key: '96b27f465a804859a15e9105fcd64c7205bc2143', class: "sd-popup__footer" }, h("div", { key: '6715ba330610850ea235ddde5f2da00584204286', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, h("slot", { key: '092aca3ad212b7218ce4ba247b78b7b45d9e4299', name: "footer-left" })), h("sd-button", { key: '290cd49879cc4868be69ceb60567eab57b5f26fe', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
     }
 };
 SdPopup.style = sdPopupCss();

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-BpO2YWvq.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-D3yCWQNg.js';
 
 const SdPortal = class {
     constructor(hostRef) {
@@ -225,7 +225,7 @@ const SdPortal = class {
         this.close.emit();
     }
     render() {
-        return h("slot", { key: '87fb9bf3f15d09321c6c02a1f7b4ed9084516a04' });
+        return h("slot", { key: 'f7b160cb574608fa16f6edd27d259b85787e6144' });
     }
     static get watchers() { return {
         "open": [{

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-BpO2YWvq.js';
+import { r as registerInstance, c as createEvent, h } from './index-D3yCWQNg.js';
 
 const radioButton = {
 	xs: {

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-BpO2YWvq.js';
+import { r as registerInstance, c as createEvent, h } from './index-D3yCWQNg.js';
 
 const radio = {
 	size: "16",

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-BpO2YWvq.js';
+import { r as registerInstance, c as createEvent, h } from './index-D3yCWQNg.js';
 import { g as LIST_ITEM_LAYOUT, i as isHtmlLabel, h as LIST_ITEM_TYPOGRAPHY, j as LIST_ITEM_COLORS, k as SEARCH_DEBOUNCE_MS } from './sd-select.config-DtrsLG0Z.js';
 import { s as sanitizeInlineHtml } from './sanitize-inline-html-BE4tnQ2Z.js';
 
@@ -78,7 +78,7 @@ const SdSelectListItem = class {
         return (
         // 키보드 네비게이션은 부모 listbox 의 ArrowUp/Down + Enter 가 담당. 항목 자체는 role=option, tabindex=-1 으로 표시.
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-        h("div", { key: 'f85ad121abc818e1a46d4a8d69621b62d4d42197', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
+        h("div", { key: '55ebe094653cb89d5c70916c3e0a2f4ccb5551f8', 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,
@@ -88,7 +88,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 && (h("sd-checkbox", { key: '1ba65cfb53d1f41b71081608a331171e30763213', 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 })), isHtmlLabel(this.option.label) ? (h("span", { class: "sd-select-list-item__label", ref: el => el && (el.innerHTML = sanitizeInlineHtml(this.option.label)) })) : (h("span", { class: "sd-select-list-item__label" }, this.option.label)), this.countInfo && (h("span", { key: '22b1552a6fc6c60e3c985b38bf6874067efc5ec0', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
+            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (h("sd-checkbox", { key: 'f636931bc20264db98e521b11b819610cda764cd', 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 })), isHtmlLabel(this.option.label) ? (h("span", { class: "sd-select-list-item__label", ref: el => el && (el.innerHTML = sanitizeInlineHtml(this.option.label)) })) : (h("span", { class: "sd-select-list-item__label" }, this.option.label)), this.countInfo && (h("span", { key: '89750bc08c03915b738da390f4255e7451aa9d6d', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
     }
 };
 SdSelectListItem.style = sdSelectListItemCss();
@@ -141,15 +141,15 @@ const SdSelectListItemSearch = class {
             clearTimeout(this.debounceTimer);
     }
     render() {
-        return (h("div", { key: 'fed22be7a3156cd526c006a256434c93cbb34b78', class: {
+        return (h("div", { key: '6cf78c7d616dc21a7a6e806c184322d12cacb50d', class: {
                 'sd-select-list-item-search': true,
                 'sd-select-list-item-search--scrolled': this.isScrolled,
-            } }, h("div", { key: '27dd47fc17ad02da989febef2c05f32e0310f8cf', class: "sd-select-list-item-search__inner" }, h("sd-icon", { key: 'd6cda28af6d9100f03c7378ca3e435bb0d7813eb', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), h("input", { key: 'fc3a77a9dd1171b4ef6a66c4cc27f7dfd00ac611', ref: el => {
+            } }, h("div", { key: 'dd9fa44fed1f3ec7a222dacaa710cdf32ddbe6fc', class: "sd-select-list-item-search__inner" }, h("sd-icon", { key: '2d65a81b7b6160ac4e93016adea0da43d5d01ec8', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), h("input", { key: '0d5c4bb09778518aa17a210a2d1a9eb620a1dd7b', 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: '3173d3ab47f961bc2277f729089d26656bdbdf19', 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: 'e9708437f310788bf8b9a4d358dea9b83cc88ed8', 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: '18285bbf608ea53a44f35a608d1c2bb7abc11697', name: "close", size: 12, color: "#888888" })))));
+            }, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, h("sd-icon", { key: 'ed8b1c93809f823205f357b059a8b556e0278b1c', name: "close", size: 12, color: "#888888" })))));
     }
 };
 SdSelectListItemSearch.style = sdSelectListItemSearchCss();

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-BpO2YWvq.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-D3yCWQNg.js';
 import { n as nanoid } from './index-CCwNgVmC.js';
 import { c as countLeaves, S as SEARCH_THRESHOLD, f as filterTree, i as isHtmlLabel, e as extractText, E as EMPTY_MESSAGE, L as LIST_BOX_LAYOUT, a as SELECT_COLORS, b as SELECT_TYPOGRAPHY, d as SELECT_LAYOUT } from './sd-select.config-DtrsLG0Z.js';
 import { s as sanitizeInlineHtml } from './sanitize-inline-html-BE4tnQ2Z.js';
@@ -263,15 +263,15 @@ const SdSelect = class {
                 this.closeDropdown();
             },
         };
-        return (h("sd-field", { key: '4ce9951b423a779ce291dcb674cd9c9afce7c0ee', 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: 'd3c3175067494715963592806a150bebadd8970c', 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: 'd100c33179cb3eadbdd5e6bbd6ca7425424df717', class: "sd-select", ref: el => {
+            } }, h("div", { key: 'c291b661a968375c341d26ac48f7ff7fd4947e3e', class: "sd-select", ref: el => {
                 this.triggerRef = el;
-            } }, h("sd-select-trigger", { key: 'e1e577f92cb5d5817e0c5bf92a959de505176bb2', ref: el => {
+            } }, h("sd-select-trigger", { key: '45da184f72f989d9c6be05479fec7a616f168ddf', 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: 'fc85f29e40eec288cbf8432417b012e8d1a9503f', ...portalProps }, h("sd-select-listbox", { key: '0232651347600d021bcbe89636dcdf27e31e9b5f', 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: 'bd7a612cf9ef74e157336a8de0170cebb61074dc', ...portalProps }, h("sd-select-listbox", { key: '8117fab3ef6b2f5f77e74a234c6b21dfc2549df1', 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 watchers() { return {
         "isOpen": [{
@@ -638,9 +638,9 @@ const SdSelectListbox = class {
             '--listbox-max-height': this.maxHeight ?? '260px',
             '--listbox-radius': `${LIST_BOX_LAYOUT.radius}px`,
         };
-        return (h("div", { key: 'e0547836378ca809ba48bad194a9ff307af5e23f', class: "sd-select-listbox", style: cssVars }, this.showSearch && (h("sd-select-list-item-search", { key: 'e561d5f372f1fcbf31c3bde8042e9bcd06bac0e1', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), h("div", { key: '851fb60b4063da678bcf1c3ae127f248be0c0bfe', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
+        return (h("div", { key: '6c2cbad13f8aaa8c0552068c7cbc35a147bee77d', class: "sd-select-listbox", style: cssVars }, this.showSearch && (h("sd-select-list-item-search", { key: '052d783e27e2458aa397c77fe891dad4a440f09e', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), h("div", { key: 'bba95f3c4475d01a65562ba079c8666e3325195d', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
                 this.listEl = el;
-            } }, this.showSelectAll && (h("sd-select-list-item", { key: 'a88151c3f15a35de5b9bc7b7dd4e9e7658fb18de', 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: '2f55bbacbed71952903599db0739773176ac55fd', 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 watchers() { return {
         "searchKeyword": [{
@@ -700,7 +700,7 @@ const SdSelectTrigger = class {
                 ? SELECT_COLORS.icon.disabled
                 : SELECT_COLORS.icon.default,
         };
-        return (h("div", { key: '463a86e25dbed4aaa8a785f26c5441828e9265d4', ref: el => {
+        return (h("div", { key: 'b5a4f750c00889d0d9b985211063fc6b20bc2e38', 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,
@@ -711,7 +711,7 @@ const SdSelectTrigger = class {
                     e.preventDefault();
                     this.handleClick();
                 }
-            }, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("div", { key: '0067809554f428497ee1324307cf613f03ce7f6a', class: "sd-select-trigger__content" }, hasValue && isHtmlLabel(this.displayText) ? (h("span", { class: "sd-select-trigger__text", ref: el => el && (el.innerHTML = sanitizeInlineHtml(this.displayText)) })) : (h("span", { class: "sd-select-trigger__text" }, hasValue ? this.displayText : (this.placeholder ?? '선택'))), h("sd-icon", { key: '425163158c134c003f75165f1af0b2a5add62bb6', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
+            }, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("div", { key: 'be0b61c0550618602ef016504fa1672f7520fa93', class: "sd-select-trigger__content" }, hasValue && isHtmlLabel(this.displayText) ? (h("span", { class: "sd-select-trigger__text", ref: el => el && (el.innerHTML = sanitizeInlineHtml(this.displayText)) })) : (h("span", { class: "sd-select-trigger__text" }, hasValue ? this.displayText : (this.placeholder ?? '선택'))), h("sd-icon", { key: '9d60c3eeae54ce6ed9609534e3530d0349d1a3ff', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
                 'sd-select-trigger__icon': true,
                 'sd-select-trigger__icon--open': this.isOpen,
             } }))));

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-BpO2YWvq.js';
+import { r as registerInstance, c as createEvent, h } from './index-D3yCWQNg.js';
 
 var switchTokens = {
 	"switch": {
@@ -100,7 +100,7 @@ const SdSwitch = class {
             '--sd-switch-line-height': `${SWITCH_TYPOGRAPHY.lineHeight}px`,
             '--sd-switch-text-decoration': SWITCH_TYPOGRAPHY.textDecoration,
         };
-        return (h("label", { key: '7862eed6e08c9837c50cb2a8b3ad018d9aa614e0', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, h("input", { key: 'cabab7d30e2edc9bd5f295dad96e5945ef6f0a1e', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), h("div", { key: 'ad78625af9b6ae95e46636269748ebd00f3553e3', class: "sd-switch__track" }, h("div", { key: '55b0daaf2f5fc048f38b5d52adad55786b16843e', class: "sd-switch__knob" })), this.label && h("span", { key: '99dcdf1afbbedc253469fb06392eb27532acac80', class: "sd-switch__label" }, this.label)));
+        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)));
     }
 };
 SdSwitch.style = sdSwitchCss();

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, a as getElement, d as readTask, f as forceUpdate, h, H as Host } from './index-BpO2YWvq.js';
+import { r as registerInstance, c as createEvent, a as getElement, d as readTask, f as forceUpdate, h, H as Host } from './index-D3yCWQNg.js';
 import { T as TABLE_ID_ATTR } from './constants-sZMi_32I.js';
 import { T as TABLE_BODY_LAYOUT, a as TABLE_SELECTABLE_COLUMN_WIDTH, b as TABLE_BODY_TYPOGRAPHY, c as TABLE_BORDER, d as TABLE_RADIUS } from './sd-table.config-D9meRqTx.js';
 import './component.table-D6GUzecR.js';
@@ -843,24 +843,24 @@ const SdTable = class {
             '--table-selectable-width': `${TABLE_SELECTABLE_COLUMN_WIDTH}px`,
             '--table-host-height': hostHeight,
         };
-        return (h(Host, { key: '4ff57911317dc62deffef856f33388973fa4daa7', style: hostStyle }, h("div", { key: '10ace7494c9c7af101c8409b0c2156b3cc2a289f', class: "sd-table__container", style: {
+        return (h(Host, { key: '164ba96033be0195fa50e3d4d684059b9c471479', style: hostStyle }, h("div", { key: '2f1a1be73f86c72e7caa46981ee691d29bb237c7', class: "sd-table__container", style: {
                 '--table-width': this.width,
                 '--pagination-height': `${paginationHeight}px`,
-            } }, h("div", { key: '97d0d9e3ad3184fcd10eb2850c66570ac0f2d3cf', class: {
+            } }, h("div", { key: '16976d24d4c21714183f9691b06c503b86388c54', class: {
                 'sd-table__wrapper': true,
                 'sd-table__wrapper--use-top': this.useTop,
-            } }, h("div", { key: '5317351ccca4e10af0ed6ecb5b077b4f22b95f27', class: {
+            } }, h("div", { key: 'fdd0dcfbff4c3a5e441d720d2e1a39a69c51f9cf', class: {
                 'sd-table__scroll-container': true,
                 'sd-table__scroll-container--loading': this.isLoading,
                 'sd-table__scroll-container--no-data': isNoData,
-            } }, this.isLoading && (h("div", { key: 'bb34b1fce3210ea7245bb282818dee6d35be0dac', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, h("sd-circle-progress", { key: '5a6103e03854583ef16ab45f442c2b0e9ea635f3', indeterminate: true }))), isNoData && (h(h.Fragment, null, h("div", { key: 'f2c3836bd2c69980603f93a4b241533a18a10d2c', class: "sd-table__no-data-header-overlay" }), h("div", { key: '7b44240dcd92522bd5b02da01a8868c5ba91f3bc', class: "sd-table__no-data" }, h("div", { key: '3ea50fc748f6ace4941d6d28f80acb458b07d206', class: "sd-table__no-data-content", ref: el => {
+            } }, this.isLoading && (h("div", { key: 'facb26c0d1651d4a2a6e0dee5c1b8ca73586de89', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, h("sd-circle-progress", { key: '844b92fc9fc38f95d51092b698b67b685bcba076', indeterminate: true }))), isNoData && (h(h.Fragment, null, h("div", { key: '458c8e24b85c0e7c99afe940c3d5856e63bc582a', class: "sd-table__no-data-header-overlay" }), h("div", { key: 'bd29a77ac11da7e5d513955a4c4baa0dd89a623d', class: "sd-table__no-data" }, h("div", { key: '7db0e8e3888e97638f3c78d560e844cc0f8b2944', class: "sd-table__no-data-content", ref: el => {
                 this.noDataContentEl = el;
                 if (el)
                     this.syncNoDataContentObserver();
-            } }, h("slot", { key: 'f3d20d973c6e4e416bfbecefd55e373425949602', name: "no-data" }, h("span", { key: '5fe8b1fe2a358a393e18587a3bf2a5c37294ff6b' }, this.resolvedNoDataLabel)))))), h("table", { key: 'c8b5304b4ae1828f7a3c0aaedb5b37d40c071378', class: this.tableClasses }, this.autoThead ? (h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }, h("sd-thead", { rows: this.rows ?? [] }))) : (h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange })), this.autoTbody ? (h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }, h("sd-tbody", { rows: this.rows ?? [] }, this.renderAutoRows()))) : (h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }))))), this.pagination &&
+            } }, h("slot", { key: 'fa175041907d4af7e5e0db7cad6e9a3e16e96901', name: "no-data" }, h("span", { key: '3fae3a23d86dc543502f74574a4b5c3f026b9992' }, this.resolvedNoDataLabel)))))), h("table", { key: '9ae98e0697e045b308f7e584fb496692acade8ba', class: this.tableClasses }, this.autoThead ? (h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }, h("sd-thead", { rows: this.rows ?? [] }))) : (h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange })), this.autoTbody ? (h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }, h("sd-tbody", { rows: this.rows ?? [] }, this.renderAutoRows()))) : (h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }))))), this.pagination &&
             this.pagination.rowsPerPage > 0 &&
             this.rowCount > 0 &&
-            !this.useVirtualScroll && (h("div", { key: '462bd9e4eab9ea45ec6ebf1c510c652c47659b1a', class: "sd-table__pagination" }, h("sd-pagination", { key: 'b934539ab253b1ca7ec2ffd7dfccc576762e0455', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (h("sd-select", { key: '4c636cbf4f04c189018ae32dff24444aab0d480a', value: this.useInternalPagination
+            !this.useVirtualScroll && (h("div", { key: 'a0da779351490332035ec784bc301ea2cb017afd', class: "sd-table__pagination" }, h("sd-pagination", { key: '8c3bcd06e1644afaebabd3762cdb03900f727142', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (h("sd-select", { key: '4bff157ac6e0fb5efe03663d4bbf58d67f8308b6', value: this.useInternalPagination
                 ? this.innerRowsPerPage
                 : this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", emitValue: true, onSdUpdate: e => {
                 if (!this.isRowsPerPageValue(e.detail))

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-BpO2YWvq.js';
+import { r as registerInstance, c as createEvent, h } from './index-D3yCWQNg.js';
 
 const tab = {
 	main: {
@@ -54,9 +54,15 @@ const tab = {
 		border: {
 			width: "1"
 		},
-		gap: "24",
+		gap: {
+			horizontal: "24",
+			vertical: "16"
+		},
 		content: {
 			gap: "4"
+		},
+		item: {
+			height: "20"
 		}
 	}
 };
@@ -95,9 +101,11 @@ const TAB_MAIN_TYPOGRAPHY = {
     default: tabTokens.tab.main.default.typography,
 };
 const TAB_SUB_LAYOUT = {
-    gap: Number(tabTokens.tab.sub.gap),
+    gapHorizontal: Number(tabTokens.tab.sub.gap.horizontal),
+    gapVertical: Number(tabTokens.tab.sub.gap.vertical),
     contentGap: Number(tabTokens.tab.sub.content.gap),
     borderWidth: Number(tabTokens.tab.sub.border.width),
+    itemHeight: Number(tabTokens.tab.sub.item.height),
 };
 const TAB_SUB_COLORS = {
     selected: {
@@ -113,7 +121,7 @@ const TAB_SUB_TYPOGRAPHY = {
     default: tabTokens.tab.sub.default.typography,
 };
 
-const sdTabsCss = () => `sd-tabs{display:inline-block;width:100%}sd-tabs .sd-tabs{display:flex;flex-direction:row;gap:var(--sd-tabs-main-container-gap);border-bottom:var(--sd-tabs-main-border-width) solid var(--sd-tabs-main-selected-border);font-family:var(--sd-tabs-main-font-family)}sd-tabs .sd-tabs__tab{display:flex;align-items:center;justify-content:center;gap:var(--sd-tabs-main-gap);cursor:pointer;box-sizing:border-box;height:var(--sd-tabs-main-height);padding:0 var(--sd-tabs-main-padding-x);border:var(--sd-tabs-main-border-width) solid var(--sd-tabs-main-default-border);border-bottom:none;border-top-left-radius:var(--sd-tabs-main-radius);border-top-right-radius:var(--sd-tabs-main-radius);background-color:var(--sd-tabs-main-default-bg);color:var(--sd-tabs-main-default-text);font-size:var(--sd-tabs-main-font-size);line-height:var(--sd-tabs-main-line-height);font-weight:var(--sd-tabs-main-font-weight-default);transition:all 0.2s ease;position:relative;user-select:none}sd-tabs .sd-tabs__tab::before{content:"";position:absolute;inset:0;opacity:0;transition:all 0.2s;pointer-events:none}sd-tabs .sd-tabs__tab--selected{border-color:var(--sd-tabs-main-selected-border);color:var(--sd-tabs-main-selected-text);background-color:var(--sd-tabs-main-selected-bg)}sd-tabs .sd-tabs__tab--selected .sd-tabs__label::before{font-weight:var(--sd-tabs-main-font-weight-selected)}sd-tabs .sd-tabs__tab--selected:hover::before{background-color:var(--sd-tabs-main-selected-border);opacity:0.15}sd-tabs .sd-tabs__tab--unselected:hover::before{background-color:var(--sd-tabs-main-default-text);opacity:0.15}sd-tabs .sd-tabs__label{user-select:none;font-weight:var(--sd-tabs-main-font-weight-selected);visibility:hidden;position:relative;white-space:nowrap}sd-tabs .sd-tabs__label::before{content:attr(data-label);visibility:visible;position:absolute;inset:0;font-weight:var(--sd-tabs-main-font-weight-default);transition:font-weight 0.2s ease}sd-tabs .sd-tabs--sub{gap:var(--sd-tabs-sub-gap);border-bottom:none;font-family:var(--sd-tabs-sub-font-family)}sd-tabs .sd-tabs--sub .sd-tabs__tab{height:auto;padding:0 0 var(--sd-tabs-sub-content-gap) 0;border:none;border-radius:0;background-color:transparent;color:var(--sd-tabs-sub-default-text);font-size:var(--sd-tabs-sub-font-size);line-height:var(--sd-tabs-sub-line-height);font-weight:var(--sd-tabs-sub-font-weight-default)}sd-tabs .sd-tabs--sub .sd-tabs__tab::before{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--sd-tabs-sub-border-width);width:100%;background-color:var(--sd-tabs-sub-selected-line);opacity:0;transition:opacity 0.2s ease;inset:auto 0 0 0;pointer-events:none}sd-tabs .sd-tabs--sub .sd-tabs__tab--selected{color:var(--sd-tabs-sub-selected-text);background-color:transparent}sd-tabs .sd-tabs--sub .sd-tabs__tab--selected::before{opacity:1}sd-tabs .sd-tabs--sub .sd-tabs__tab--selected .sd-tabs__label::before{font-weight:var(--sd-tabs-sub-font-weight-selected)}sd-tabs .sd-tabs--sub .sd-tabs__label{font-weight:var(--sd-tabs-sub-font-weight-selected)}sd-tabs .sd-tabs--sub .sd-tabs__label::before{font-weight:var(--sd-tabs-sub-font-weight-default)}`;
+const sdTabsCss = () => `sd-tabs{display:inline-block;width:100%}sd-tabs .sd-tabs{display:flex;flex-direction:row;gap:var(--sd-tabs-main-container-gap);border-bottom:var(--sd-tabs-main-border-width) solid var(--sd-tabs-main-selected-border);font-family:var(--sd-tabs-main-font-family)}sd-tabs .sd-tabs__tab{display:flex;align-items:center;justify-content:center;gap:var(--sd-tabs-main-gap);cursor:pointer;box-sizing:border-box;height:var(--sd-tabs-main-height);padding:0 var(--sd-tabs-main-padding-x);border:var(--sd-tabs-main-border-width) solid var(--sd-tabs-main-default-border);border-bottom:none;border-top-left-radius:var(--sd-tabs-main-radius);border-top-right-radius:var(--sd-tabs-main-radius);background-color:var(--sd-tabs-main-default-bg);color:var(--sd-tabs-main-default-text);font-size:var(--sd-tabs-main-font-size);line-height:var(--sd-tabs-main-line-height);font-weight:var(--sd-tabs-main-font-weight-default);transition:all 0.2s ease;position:relative;user-select:none}sd-tabs .sd-tabs__tab::before{content:"";position:absolute;inset:0;opacity:0;transition:all 0.2s;pointer-events:none}sd-tabs .sd-tabs__tab--selected{border-color:var(--sd-tabs-main-selected-border);color:var(--sd-tabs-main-selected-text);background-color:var(--sd-tabs-main-selected-bg)}sd-tabs .sd-tabs__tab--selected .sd-tabs__label::before{font-weight:var(--sd-tabs-main-font-weight-selected)}sd-tabs .sd-tabs__tab--selected:hover::before{background-color:var(--sd-tabs-main-selected-border);opacity:0.15}sd-tabs .sd-tabs__tab--unselected:hover::before{background-color:var(--sd-tabs-main-default-text);opacity:0.15}sd-tabs .sd-tabs__label{user-select:none;font-weight:var(--sd-tabs-main-font-weight-selected);visibility:hidden;position:relative;white-space:nowrap}sd-tabs .sd-tabs__label::before{content:attr(data-label);visibility:visible;position:absolute;inset:0;font-weight:var(--sd-tabs-main-font-weight-default);transition:font-weight 0.2s ease}sd-tabs .sd-tabs--sub{gap:var(--sd-tabs-sub-gap-horizontal);border-bottom:none;font-family:var(--sd-tabs-sub-font-family)}sd-tabs .sd-tabs--sub .sd-tabs__tab{height:var(--sd-tabs-sub-item-height);padding:0 0 var(--sd-tabs-sub-content-gap) 0;border:none;border-radius:0;background-color:transparent;color:var(--sd-tabs-sub-default-text);font-size:var(--sd-tabs-sub-font-size);line-height:var(--sd-tabs-sub-line-height);font-weight:var(--sd-tabs-sub-font-weight-default)}sd-tabs .sd-tabs--sub .sd-tabs__tab::before{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--sd-tabs-sub-border-width);width:100%;background-color:var(--sd-tabs-sub-selected-line);opacity:0;transition:opacity 0.2s ease;inset:auto 0 0 0;pointer-events:none}sd-tabs .sd-tabs--sub .sd-tabs__tab--selected{color:var(--sd-tabs-sub-selected-text);background-color:transparent}sd-tabs .sd-tabs--sub .sd-tabs__tab--selected::before{opacity:1}sd-tabs .sd-tabs--sub .sd-tabs__tab--selected .sd-tabs__label::before{font-weight:var(--sd-tabs-sub-font-weight-selected)}sd-tabs .sd-tabs--sub .sd-tabs__label{font-weight:var(--sd-tabs-sub-font-weight-selected)}sd-tabs .sd-tabs--sub .sd-tabs__label::before{font-weight:var(--sd-tabs-sub-font-weight-default)}sd-tabs .sd-tabs--vertical{flex-direction:column;align-items:stretch;width:fit-content;border-bottom:none;border-right:var(--sd-tabs-main-border-width) solid var(--sd-tabs-main-selected-border)}sd-tabs .sd-tabs--vertical .sd-tabs__tab{justify-content:flex-start;border-bottom:var(--sd-tabs-main-border-width) solid var(--sd-tabs-main-default-border);border-right:none;border-top-right-radius:0;border-bottom-left-radius:var(--sd-tabs-main-radius)}sd-tabs .sd-tabs--vertical .sd-tabs__tab--selected{border-color:var(--sd-tabs-main-selected-border)}sd-tabs .sd-tabs--vertical.sd-tabs--sub{gap:var(--sd-tabs-sub-gap-vertical);border-right:none}sd-tabs .sd-tabs--vertical.sd-tabs--sub .sd-tabs__tab{justify-content:center;width:100%;border:none;border-radius:0}`;
 
 const SdTabs = class {
     constructor(hostRef) {
@@ -124,6 +132,7 @@ const SdTabs = class {
     tabs = [];
     size = 'md';
     isSub = false;
+    vertical = false;
     update;
     valueChanged(newValue) {
         this.value = newValue;
@@ -146,6 +155,8 @@ const SdTabs = class {
         const classes = ['sd-tabs', `sd-tabs--${this.size ?? 'md'}`];
         if (this.isSub)
             classes.push('sd-tabs--sub');
+        if (this.vertical)
+            classes.push('sd-tabs--vertical');
         return classes.join(' ');
     }
     getBadgeName(tab) {
@@ -172,7 +183,9 @@ const SdTabs = class {
             '--sd-tabs-main-line-height': `${TAB_MAIN_TYPOGRAPHY.default.lineHeight}px`,
             '--sd-tabs-main-font-weight-default': TAB_MAIN_TYPOGRAPHY.default.fontWeight,
             '--sd-tabs-main-font-weight-selected': TAB_MAIN_TYPOGRAPHY.selected.fontWeight,
-            '--sd-tabs-sub-gap': `${TAB_SUB_LAYOUT.gap}px`,
+            '--sd-tabs-sub-gap-horizontal': `${TAB_SUB_LAYOUT.gapHorizontal}px`,
+            '--sd-tabs-sub-gap-vertical': `${TAB_SUB_LAYOUT.gapVertical}px`,
+            '--sd-tabs-sub-item-height': `${TAB_SUB_LAYOUT.itemHeight}px`,
             '--sd-tabs-sub-content-gap': `${TAB_SUB_LAYOUT.contentGap}px`,
             '--sd-tabs-sub-border-width': `${TAB_SUB_LAYOUT.borderWidth}px`,
             '--sd-tabs-sub-selected-text': TAB_SUB_COLORS.selected.text,
@@ -186,7 +199,7 @@ const SdTabs = class {
         };
     }
     render() {
-        return (h("div", { key: '543ca85d1e1edf809688da0636094478966f4fff', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
+        return (h("div", { key: '1c670c50ff7f5489a77043bc030fe3a65eb894ab', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
             const badgeName = this.getBadgeName(tab);
             return (h("div", { key: `tab-${index}`, role: "tab", tabindex: 0, "aria-selected": tab.value === this.value ? 'true' : 'false', class: this.getTabClasses(tab), "aria-label": tab.label || 'tab', onClick: () => this.handleTabClick(tab), onKeyDown: e => {
                     if (e.key === 'Enter' || e.key === ' ') {

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, a as getElement, f as forceUpdate, h, H as Host } from './index-BpO2YWvq.js';
+import { r as registerInstance, a as getElement, f as forceUpdate, h, H as Host } from './index-D3yCWQNg.js';
 import { T as TABLE_ID_ATTR } from './constants-sZMi_32I.js';
 
 const sdTdCss = () => `sd-td *{box-sizing:border-box}sd-td{display:contents}sd-td.align-left{text-align:left}sd-td.align-center{text-align:center}sd-td.align-right{text-align:right}`;
@@ -156,7 +156,7 @@ const SdTd = class {
         }
     }
     render() {
-        return (h(Host, { key: 'e033a5018da4dd82db1707d339fb0c78e86b017e', class: { [`align-${this.align}`]: Boolean(this.align) } }, h("slot", { key: 'd9a303a00702f867d621f142d61ded542bb1d34f' })));
+        return (h(Host, { key: '95f97474c4d00a35085c558bf43593322a9f69e7', class: { [`align-${this.align}`]: Boolean(this.align) } }, h("slot", { key: 'f67d1e8b125c10446dac3abdfa0da01bfb83f470' })));
     }
     static get watchers() { return {
         "field": [{

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-BpO2YWvq.js';
+import { r as registerInstance, c as createEvent, h } from './index-D3yCWQNg.js';
 
 const textLink = {
 	sm: {

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-BpO2YWvq.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-D3yCWQNg.js';
 
 const DEFAULT_DURATION = 4000;
 const DEFAULT_MAX_VISIBLE = 3;
@@ -232,7 +232,7 @@ const SdToastContainer = class {
         const activeToasts = toasts.filter(t => t.state !== 'exiting').reverse();
         const indexMap = new Map();
         activeToasts.forEach((t, i) => indexMap.set(t.id, i));
-        return (h("div", { key: 'b5847f65c728fb5f31bda0f6756118fa975e4987', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
+        return (h("div", { key: '2b0bc86b7e2ea19a44f3c0b870ce5dec1de3a140', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
                 this.expanded = true;
                 this.pauseTimers();
             }, onMouseLeave: () => {

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-BpO2YWvq.js';
+import { r as registerInstance, c as createEvent, h } from './index-D3yCWQNg.js';
 
 const toast = {
 	icon: "16",
@@ -82,12 +82,12 @@ const SdToast = class {
         const linkColor = typeConfig.linkColor ?? typeConfig.content;
         const useDefaultCloseIntent = ['default', 'caution', 'info'].includes(this.type);
         const buttonName = TOAST_BUTTON_NAME_BY_TYPE[this.type] ?? TOAST_BUTTON_NAME_BY_TYPE.default;
-        return (h("div", { key: '0073ea37731ad1d8a54cb45f0eee8103159cbd65', style: {
+        return (h("div", { key: '82c8063406a534e60c985d3c8321612077f75623', style: {
                 '--sd-toast-bg': typeConfig.bg,
                 '--sd-toast-text': typeConfig.content,
                 '--sd-toast-icon': iconColor,
                 '--sd-toast-link': linkColor,
-            } }, h("div", { key: 'e14f7d2d5e15630989c4cb19ed375a704a8a783a', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (h("div", { key: '72b20a3e5920cd173ea2fa05393d991d477e948b', class: "sd-toast__icon" }, h("sd-icon", { key: 'ac2c30b63ae84da53066ba0ddc2fb211ef6b8bbf', name: this.icon, size: iconSize, color: iconColor }))), h("div", { key: '605dca0bcf05059e325f0c05800c11adc55d5da5', class: "sd-toast__content" }, h("span", { key: 'ba8d91256c01bd897b177a69372f813131bd4b03', class: "sd-toast__message" }, this.message)), this.link && (h("a", { key: 'a9283bacb928dc5d92ddc2e554967928035a5fab', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (h("sd-button", { key: '87b7d6bae7f0321e9557967f856e1b5e17697d17', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (h("sd-ghost-button", { key: 'e89b2cdd29115e366bb5665a483433393eb1b420', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
+            } }, h("div", { key: 'e83c5b7ddc0edec3fb9e29325dcb52e3295fad4d', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (h("div", { key: 'd249e5915f0c92a0a2cff43dee5c61d809ffc7f0', class: "sd-toast__icon" }, h("sd-icon", { key: '088da81d0083cc0ca72f2bf59392a72d3f2ed4de', name: this.icon, size: iconSize, color: iconColor }))), h("div", { key: '5cad9a3a81b00d8926d92d9895c4cca1389dc63b', class: "sd-toast__content" }, h("span", { key: '1fbc72aac70fbb3bb630ad10343ea2c8f76f924c', class: "sd-toast__message" }, this.message)), this.link && (h("a", { key: '769a85fa539bab8b478ef999cab615285a842085', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (h("sd-button", { key: '77612614898b6abdade4b4599987cbb90bc09c4e', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (h("sd-ghost-button", { key: '3bef6c0e7f3dec3f2b1f493f9c979a121bc897e9', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
     }
 };
 SdToast.style = sdToastCss();

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-BpO2YWvq.js';
+import { r as registerInstance, c as createEvent, h } from './index-D3yCWQNg.js';
 
 const toggle = {
 	height: "28",
@@ -118,7 +118,7 @@ const SdToggle = class {
             '--sd-toggle-content-select': TOGGLE_COLORS.content.select,
             '--sd-toggle-content-disabled': TOGGLE_COLORS.content.disabled,
         };
-        return (h("label", { key: '83b94f28bd8364edefcbfbadccb258b10d01df92', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, h("input", { key: '9becc0c6a5337c6d16301e998a9a5bbd92b198a6', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        return (h("label", { key: 'f61e80701bc85205794aec0c960965d29b94a247', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, h("input", { key: '26a31febfdae6bebe55291d3454a177366dc3db0', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
 };
 SdToggle.style = sdToggleCss();

package/dist/esm/{tooltipArrow-DrrY_fPj.js → tooltipArrow-CUCfrch1.js}

@@ -1,4 +1,4 @@
-import { h } from './index-BpO2YWvq.js';
+import { h } from './index-D3yCWQNg.js';
 
 const TooltipArrow = (props) => (h("svg", { width: "16", height: "12", viewBox: "0 0 16 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, h("path", { d: "M8.83205 10.7519C8.43623 11.3457 7.56377 11.3457 7.16795 10.7519L1.04907e-06 -1.39876e-06L16 0L8.83205 10.7519Z", fill: "currentColor" })));
 

package/dist/types/components/sd-button/sd-button.config.d.ts

@@ -135,7 +135,15 @@ export declare const PRESET_HOVER_BACKGROUNDS: {
     readonly danger: string;
     readonly danger_outline: string;
 };
-export declare const PRESET_CONTENT_COLORS: {
+export declare const PRESET_TEXT_COLORS: {
+    readonly primary: string;
+    readonly secondary: string;
+    readonly primary_outline: string;
+    readonly neutral_outline: string;
+    readonly danger: string;
+    readonly danger_outline: string;
+};
+export declare const PRESET_ICON_COLORS: {
     readonly primary: string;
     readonly secondary: string;
     readonly primary_outline: string;
@@ -151,7 +159,7 @@ export declare const PRESET_BORDER_COLORS: {
     readonly danger: "transparent";
     readonly danger_outline: string;
 };
-export type ButtonPreset = keyof typeof PRESET_CONTENT_COLORS;
+export type ButtonPreset = keyof typeof PRESET_TEXT_COLORS;
 export declare const DISABLED_TEXT: string;
 export declare const DISABLED_ICON: string;
 export declare const isButtonName: (value: string) => value is ButtonName;

package/dist/types/components/sd-chip/sd-chip.config.d.ts

@@ -9,7 +9,6 @@ export declare const CHIP_COLORS: {
     bg: {
         default: string;
         error: string;
-        focus: string;
     };
     content: {
         default: string;

package/dist/types/components/sd-chip-input/sd-chip-input.config.d.ts

@@ -0,0 +1,34 @@
+export type ChipInputSize = 'sm' | 'md';
+export declare const CHIP_INPUT_SIZE_MAP: Record<ChipInputSize, {
+    minHeight: string;
+    paddingX: string;
+    paddingY: string;
+    radius: string;
+    fontSize: string;
+    lineHeight: string;
+    fontWeight: string;
+    fontFamily: string;
+}>;
+export declare const CHIP_INPUT_COLORS: {
+    border: {
+        default: string;
+        focus: string;
+        disabled: string;
+    };
+    bg: {
+        default: string;
+        disabled: string;
+    };
+    text: {
+        placeholder: string;
+    };
+};
+export declare const CHIP_INPUT_LAYOUT: {
+    borderWidth: string;
+    chipGap: string;
+};
+export declare const CHIP_INPUT_RESET: {
+    dividerColor: string;
+    iconColor: string;
+    labelColor: string;
+};