@sellmate/design-system 1.0.70 → 1.0.72

package/dist/cjs/sd-select-dropdown_2.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-B2QvhbC3.js');
+var index = require('./index-Dptupbm0.js');
 
 const sdSelectDropdownCss = () => `.sd-select-dropdown .sd-select-option-placeholder{height:48px;display:flex;align-items:center;padding:8px 16px;font-size:12px;line-height:0;text-align:left;color:#888888}.sd-select-dropdown{overflow:auto;min-width:fit-content;width:var(--select-dropdown-width, 200px);max-height:var(--select-dropdown-height, 260px);padding-bottom:2px;background-color:white;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);border-radius:4px;overflow-y:auto;color:#333333;display:flex;flex-direction:column;opacity:0.5;transition:opacity 0.15s ease-in}.sd-select-dropdown--ready{opacity:1}`;
 
@@ -155,10 +155,10 @@ const SdSelectDropdown = class {
         this.isScrolled = scrollTop > 0;
     };
     render() {
-        return (index.h("div", { key: '4d593edbf6e4480e171963aad54ceb2f489f189b', class: {
+        return (index.h("div", { key: 'a831a99130074fa072534d76f4b0db7169d906e2', class: {
                 'sd-select-dropdown': true,
                 'sd-select-dropdown--ready': this.isDropdownReady,
-            }, style: this.dropdownSize, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (index.h("sd-select-search-input", { key: 'ecea9b4ba816c6b0dcc8303f957f4b297251f65c', ref: el => (this.searchRef = el), isScrolled: this.isScrolled, searchText: this.searchText, onSdSearchInput: (event) => (this.searchText = event.detail || ''), onSdSearchFocus: () => (this.itemIndex = -1) })), this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index$1) => (index.h("slot", { name: `option-${option.value}` }, index.h("sd-select-option", { option: option, index: index$1, isSelected: this.isOptionSelected(option.value), isFocused: index$1 === this.itemIndex, onOptionClick: ({ detail }) => this.optionClick.emit(detail), useCheckbox: this.useCheckbox }))))) : (index.h("slot", { name: "option-placeholder" }, index.h("div", { class: 'sd-select-option-placeholder' }, this.optionPlaceholder)))));
+            }, style: this.dropdownSize, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (index.h("sd-select-search-input", { key: 'f09a5575454c30387aeac9996d15625d7581a367', ref: el => (this.searchRef = el), isScrolled: this.isScrolled, searchText: this.searchText, onSdSearchInput: (event) => (this.searchText = event.detail || ''), onSdSearchFocus: () => (this.itemIndex = -1) })), this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index$1) => (index.h("slot", { name: `option-${option.value}` }, index.h("sd-select-option", { option: option, index: index$1, isSelected: this.isOptionSelected(option.value), isFocused: index$1 === this.itemIndex, onOptionClick: ({ detail }) => this.optionClick.emit(detail), useCheckbox: this.useCheckbox }))))) : (index.h("slot", { name: "option-placeholder" }, index.h("div", { class: 'sd-select-option-placeholder' }, this.optionPlaceholder)))));
     }
     static get watchers() { return {
         "filteredOptions": [{
@@ -205,7 +205,7 @@ const SdSelectOption = class {
         }
     };
     render() {
-        return (index.h("div", { key: '02e314232067bfb8f9bd882c01ae1462fa492cbf', class: {
+        return (index.h("div", { key: '413176678e27ad80c3ba51f8e32681f017d210ac', class: {
                 'sd-select__option': true,
                 'sd-select__option--selected': this.isSelected,
                 'sd-select__option--disabled': !!this.option.disabled,

package/dist/cjs/sd-select-group.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-B2QvhbC3.js');
+var index = require('./index-Dptupbm0.js');
 var index$1 = require('./index-BUvXpPc3.js');
 var baseDropdownEvent = require('./base-dropdown-event-BTPlZ1KF.js');
 var selectKeyboardNavigation = require('./select-keyboard-navigation-CErfIrGV.js');
@@ -277,7 +277,7 @@ const SdSelectGroup = class extends baseDropdownEvent.BaseDropdownEvent {
         });
     }
     render() {
-        return (index.h("sd-field", { key: '698b76ed0785f475a099fac99e3564b20c252c01', label: this.label, labelWidth: this.labelWidth, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, addonLabel: this.addonLabel, addonAlign: this.addonAlign, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, index.h("div", { key: 'aa449fda5e32d0519792dc2e713d3c59658c86fa', class: {
+        return (index.h("sd-field", { key: 'd4d80ad428cc1eb5a1d6878354c213bd25ea944a', label: this.label, labelWidth: this.labelWidth, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, addonLabel: this.addonLabel, addonAlign: this.addonAlign, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, index.h("div", { key: '1f9a8c1c9e34635ce7c1f91fc8d456b84a668c63', class: {
                 'sd-select-group': true,
                 'sd-select-group--open': this.isOpen,
                 'sd-select-group--disabled': this.disabled,

package/dist/cjs/sd-select-multiple-group.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-B2QvhbC3.js');
+var index = require('./index-Dptupbm0.js');
 var index$1 = require('./index-BUvXpPc3.js');
 var baseDropdownEvent = require('./base-dropdown-event-BTPlZ1KF.js');
 var selectKeyboardNavigation = require('./select-keyboard-navigation-CErfIrGV.js');

package/dist/cjs/sd-select-multiple.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-B2QvhbC3.js');
+var index = require('./index-Dptupbm0.js');
 var selectKeyboardNavigation = require('./select-keyboard-navigation-CErfIrGV.js');
 var baseDropdownEvent = require('./base-dropdown-event-BTPlZ1KF.js');
 var index$1 = require('./index-BUvXpPc3.js');
@@ -156,7 +156,7 @@ const SdSelectMultiple = class extends baseDropdownEvent.BaseDropdownEvent {
         this.handleOptionSelection(option);
     };
     render() {
-        return (index.h("sd-field", { key: '92f9f1efeb25431700b376300ba8f21120456a68', label: this.label, labelWidth: this.labelWidth, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, index.h("div", { key: '48adb7f279b77d1637e6a1790d1448d7d7306a7a', class: {
+        return (index.h("sd-field", { key: '6fc9d0059e91044ef8e40881276bbef857ef1225', label: this.label, labelWidth: this.labelWidth, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, index.h("div", { key: 'b2591c655dc27b1db16e8f40c0a33997acbee35b', class: {
                 'sd-select-multiple': true,
                 'sd-select-multiple--open': this.isOpen,
                 'sd-select-multiple--disabled': this.disabled,

package/dist/cjs/sd-select-option-group.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-B2QvhbC3.js');
+var index = require('./index-Dptupbm0.js');
 
 const sdSelectOptionGroupCss = () => `sd-select-option-group{display:block;height:fit-content}sd-select-option-group .sd-select__option-group{display:flex;padding:4px 12px;padding-left:12px;font-size:12px;line-height:20px;cursor:pointer}sd-select-option-group .sd-select__option-group.sd-select__option-group--group:not(.sd-select__option-group--use-checkbox),sd-select-option-group .sd-select__option-group.sd-select__option-group--subgroup:not(.sd-select__option-group--use-checkbox){cursor:default !important}sd-select-option-group .sd-select__option-group.sd-select__option-group--group{background-color:#F5FAFF !important;color:#333333 !important;font-weight:700}sd-select-option-group .sd-select__option-group.sd-select__option-group--subgroup{padding-left:20px;background-color:#F9F9F9 !important;color:#333333 !important;font-weight:500}sd-select-option-group .sd-select__option-group.sd-select__option-group--item{padding-left:28px}sd-select-option-group .sd-select__option-group sd-checkbox__bg{border-color:#888888}sd-select-option-group .sd-select__option-group__label-wrapper{display:flex;width:100%;column-gap:8px;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}sd-select-option-group .sd-select__option-group__label-wrapper sd-checkbox{flex-shrink:0}sd-select-option-group .sd-select__option-group__label-wrapper .sd-select__option-group-label{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}sd-select-option-group .sd-select__option-group__label-wrapper .sd-select__option-group__count-indicator{width:fit-content;flex-shrink:0;font-size:12px;font-weight:500;color:#888888}sd-select-option-group .sd-select__option-group--focused{background-color:#E6F1FF}sd-select-option-group .sd-select__option-group--selected.sd-select__option-group--item:not(:hover):not(.sd-select__option-group--use-checkbox),sd-select-option-group .sd-select__option-group--focused.sd-select__option-group--item:not(:hover):not(.sd-select__option-group--use-checkbox){color:#0075FF;font-weight:700}sd-select-option-group .sd-select__option-group--disabled{color:#AAAAAA;cursor:not-allowed}sd-select-option-group .sd-select__option-group:hover:not(.sd-select__option-group--disabled){background-color:#0075FF;color:white}sd-select-option-group .sd-select__option-group:hover.sd-select__option-group--selected:not(.sd-select__option-group--group):not(.sd-select__option-group--subgroup) sd-checkbox .sd-checkbox__bg{border-color:white !important}`;
 
@@ -48,7 +48,7 @@ const SdSelectOptionGroup = class {
         }
     };
     render() {
-        return (index.h("div", { key: '748c32883a0262612daf9bafc0617563c77254f8', class: {
+        return (index.h("div", { key: '647a7be115df96fe30d3b69d3b09ee45d229d86c', class: {
                 'sd-select__option-group': true,
                 'sd-select__option-group--selected': !!this.isSelected,
                 'sd-select__option-group--disabled': !!this.option.disabled,
@@ -57,10 +57,10 @@ const SdSelectOptionGroup = class {
                 'sd-select__option-group--group': this.option.type === 'group',
                 'sd-select__option-group--subgroup': this.option.type === 'subgroup',
                 'sd-select__option-group--item': this.option.type === 'item',
-            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, index.h("div", { key: '5a8f15864a69887a7d2e2ec5b18b96b1f7bde809', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (index.h("sd-checkbox", { key: '202f92f4aac644802a58354d08b29451c9af863f', value: this.isSelected, disabled: this.option.disabled, onClick: e => {
+            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, index.h("div", { key: 'b1b1697c34e57667203992f8e4e6e9438f204dea', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (index.h("sd-checkbox", { key: 'b67bec9cfd93739348f7d6c3e93945c28171e752', value: this.isSelected, disabled: this.option.disabled, onClick: e => {
                 e.preventDefault();
                 this.handleClick(this.option, this.isSelected, e);
-            } })), index.h("span", { key: 'f9dc667e7d251a5efcf7391ec4f533a5e21276c9', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (index.h("span", { key: '2cd863d5bbdb1a9b5312c6eb7aa3be08a2093460', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
+            } })), index.h("span", { key: 'a65090e487a45acec39155aa6df00a1500249e20', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (index.h("span", { key: '5024421742568127097655bcb39af70b61cc3403', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
     }
 };
 SdSelectOptionGroup.style = sdSelectOptionGroupCss();

package/dist/cjs/sd-select-v2-list-item_4.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-B2QvhbC3.js');
+var index = require('./index-Dptupbm0.js');
 
 const select = {
 	paddingX: "12",
@@ -238,7 +238,7 @@ const SdSelectV2ListItem = class {
         if (isDepth1Group) {
             cssVars['--list-item-border-top'] = `${LIST_ITEM_COLORS.depth1.borderWidth}px solid ${LIST_ITEM_COLORS.depth1.border}`;
         }
-        return (index.h("div", { key: 'ad8ea94f02d9e114915e4115237aed32d89e93d9', class: {
+        return (index.h("div", { key: '62974a8d1442730ca752b3fc11f151c4a5be4ad1', class: {
                 'sd-select-v2-list-item': true,
                 'sd-select-v2-list-item--group': isGroup,
                 'sd-select-v2-list-item--depth1-group': isDepth1Group,
@@ -248,7 +248,7 @@ const SdSelectV2ListItem = class {
                 'sd-select-v2-list-item--focused': this.isFocused,
                 'sd-select-v2-list-item--selectable': this.isSelectable && !this.option.disabled,
                 'sd-select-v2-list-item--disabled': !!this.option.disabled,
-            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (index.h("sd-checkbox", { key: 'c3c5be89457efbd465ebcb89e304aaefaa85e245', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, inverse: this.isFocused && this.isSelected !== false, class: "sd-select-v2-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), index.h("span", { key: 'ce5b528ec88cd6c862fe0df36cf1b46f054bcc0e', class: "sd-select-v2-list-item__label" }, this.option.label), this.countInfo && (index.h("span", { key: 'e0120384115bb93819675335a574aeb072d0232c', class: "sd-select-v2-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
+            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (index.h("sd-checkbox", { key: 'cf29df3617e45f3b9415b8da1beed7ba5918b8cd', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, inverse: this.isFocused && this.isSelected !== false, class: "sd-select-v2-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), index.h("span", { key: '478e566c74c0078ef72b90d836f67156e905bbac', class: "sd-select-v2-list-item__label" }, this.option.label), this.countInfo && (index.h("span", { key: '0cde990cb1fff4898581c8c7d321c8669dfac226', class: "sd-select-v2-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
     }
 };
 SdSelectV2ListItem.style = sdSelectV2ListItemCss();
@@ -301,15 +301,15 @@ const SdSelectV2ListItemSearch = class {
             clearTimeout(this.debounceTimer);
     }
     render() {
-        return (index.h("div", { key: '77b7f0742212b03108d5da3a1384766bc58da3ce', class: {
+        return (index.h("div", { key: '75c6b01fbe256bca732553a27711fa7197535688', class: {
                 'sd-select-v2-list-item-search': true,
                 'sd-select-v2-list-item-search--scrolled': this.isScrolled,
-            } }, index.h("div", { key: 'bf2086a00ca7924c3b13b28b056a1ee2351cce3d', class: "sd-select-v2-list-item-search__inner" }, index.h("sd-icon", { key: '471c08d7b293003958e1e0be9c4521b8663c860b', name: "search", size: 16, color: "grey_70", class: "sd-select-v2-list-item-search__icon" }), index.h("input", { key: 'b17d8610b73c3701711b5def9b34320156c5f554', ref: el => {
+            } }, index.h("div", { key: 'b66cd053b89942f3de55feecdd0eee79b863eb0d', class: "sd-select-v2-list-item-search__inner" }, index.h("sd-icon", { key: 'bed6f00452187d1087b6bb4653c04e8babeaa277', name: "search", size: 16, color: "grey_70", class: "sd-select-v2-list-item-search__icon" }), index.h("input", { key: '4c29192547fcf9ec2563b7d843b8e77a3eb900b1', ref: el => {
                 this.inputEl = el;
-            }, type: "text", class: "sd-select-v2-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), index.h("button", { key: '5b8c48df700862476b37b7c24741ee0f9b284c02', type: "button", class: {
+            }, type: "text", class: "sd-select-v2-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), index.h("button", { key: '55f94ce6eb29cec10897259b894c3460d766268e', type: "button", class: {
                 'sd-select-v2-list-item-search__clear': true,
                 'sd-select-v2-list-item-search__clear--hidden': !this.searchText,
-            }, onClick: this.handleClear, tabindex: this.searchText ? 0 : -1, "aria-hidden": this.searchText ? 'false' : 'true' }, index.h("sd-icon", { key: 'cbcec76b7eb4e400e7154cc652512a36c0660d45', name: "close", size: 12, color: "#888888" })))));
+            }, onClick: this.handleClear, tabindex: this.searchText ? 0 : -1, "aria-hidden": this.searchText ? 'false' : 'true' }, index.h("sd-icon", { key: 'a7332ec5ecebf522797bb6db1fdc385c0dfa1abe', name: "close", size: 12, color: "#888888" })))));
     }
 };
 SdSelectV2ListItemSearch.style = sdSelectV2ListItemSearchCss();
@@ -608,7 +608,7 @@ const SdSelectV2Listbox = class {
             '--listbox-max-height': this.maxHeight,
             '--listbox-radius': `${LIST_BOX_LAYOUT.radius}px`,
         };
-        return (index.h("div", { key: '17ebae1a1589245944d7db5a05f2c011ad13e391', class: "sd-select-v2-listbox", style: cssVars }, this.showSearch && (index.h("sd-select-v2-list-item-search", { key: '181ddd3a11ebe3b81353d66111459c7929c5af0b', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), index.h("div", { key: '91114e82f60a6bdeb74142d6d7abea2871e6678e', class: "sd-select-v2-listbox__list", onScroll: this.handleScroll, ref: el => {
+        return (index.h("div", { key: 'd4d80ebd565436cd929961a2f9ce50adf92c124b', class: "sd-select-v2-listbox", style: cssVars }, this.showSearch && (index.h("sd-select-v2-list-item-search", { key: 'bd549975fe6187aa7e77e718c8d2ba4a6d6e33de', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), index.h("div", { key: '4ac6a1512781942fef3e42d6ca32762962df1836', class: "sd-select-v2-listbox__list", onScroll: this.handleScroll, ref: el => {
                 this.listEl = el;
             } }, this.isEmpty ? (index.h("div", { class: "sd-select-v2-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (index.h("sd-select-v2-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) })))))));
     }
@@ -670,13 +670,13 @@ const SdSelectV2Trigger = class {
                 ? SELECT_COLORS.icon.disabled
                 : SELECT_COLORS.icon.default,
         };
-        return (index.h("div", { key: 'e5c4db3cfbaa29c0af7efd0376a972dee0e9db56', ref: el => {
+        return (index.h("div", { key: '7c4f60c972c17b5954cbf0d0cc7ee38c8e6c16a3', ref: el => {
                 this.triggerEl = el;
             }, tabindex: this.disabled ? -1 : 0, class: {
                 'sd-select-v2-trigger': true,
                 'sd-select-v2-trigger--open': this.isOpen,
                 'sd-select-v2-trigger--disabled': this.disabled,
-            }, style: cssVars, onClick: this.handleClick, onFocus: this.handleFocus, onBlur: this.handleBlur }, index.h("div", { key: '76a946a587f6245f8a21ecbf25c5a21895f35970', class: "sd-select-v2-trigger__content" }, index.h("span", { key: '3224e13cc49371e7bcd8095a8b08bd62d4f8b295', class: "sd-select-v2-trigger__text" }, hasValue ? this.displayText : this.placeholder), index.h("sd-icon", { key: 'ea81dc671b63b14040292ed2ff4084a9c9fc6fca', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
+            }, style: cssVars, onClick: this.handleClick, onFocus: this.handleFocus, onBlur: this.handleBlur }, index.h("div", { key: 'de5f5a44626fce29c5a83cf0a14dd03352d40b57', class: "sd-select-v2-trigger__content" }, index.h("span", { key: 'a36a013e9ef359160c2b9d24b42ee6f228aca302', class: "sd-select-v2-trigger__text" }, hasValue ? this.displayText : this.placeholder), index.h("sd-icon", { key: '4bfcfce96fbe2008517ee26d7802d4492292faa5', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
                 'sd-select-v2-trigger__icon': true,
                 'sd-select-v2-trigger__icon--open': this.isOpen,
             } }))));

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-B2QvhbC3.js');
+var index = require('./index-Dptupbm0.js');
 var baseDropdownEvent = require('./base-dropdown-event-BTPlZ1KF.js');
 var selectKeyboardNavigation = require('./select-keyboard-navigation-CErfIrGV.js');
 var index$1 = require('./index-BUvXpPc3.js');

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-B2QvhbC3.js');
+var index = require('./index-Dptupbm0.js');
 
 var switchTokens = {
 	"switch": {
@@ -102,7 +102,7 @@ const SdSwitch = class {
             '--sd-switch-line-height': `${SWITCH_TYPOGRAPHY.lineHeight}px`,
             '--sd-switch-text-decoration': SWITCH_TYPOGRAPHY.textDecoration,
         };
-        return (index.h("label", { key: '730eacd9dbc035c76ff99396caf13b37ecc19c86', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, index.h("input", { key: '2cb2e4ba617d6f9f2d86a56ac6cc134a43cd1594', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), index.h("div", { key: 'b67a6243d2af4b89e433e44047da3336e87da9f9', class: "sd-switch__track" }, index.h("div", { key: 'a99cf1e298cd3ed474cb7f94a48332475fe68641', class: "sd-switch__knob" })), this.label && index.h("span", { key: '084960a8dce47c47b17f807aa46acea3a08aa53b', class: "sd-switch__label" }, this.label)));
+        return (index.h("label", { key: 'ac6a35d06ddd04bc94369014ff586766dd745bbb', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, index.h("input", { key: '9ebc810e93c9dfa3bf7407f279dadbada579196e', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), index.h("div", { key: '7add76be99645d6434e95305f6318fac7da0de57', class: "sd-switch__track" }, index.h("div", { key: 'ed90778aa4dcd6f0853029579c36cfdb8640afcf', class: "sd-switch__knob" })), this.label && index.h("span", { key: '70e3ddf819e77da4c693a4853ddb7f392381964e', class: "sd-switch__label" }, this.label)));
     }
 };
 SdSwitch.style = sdSwitchCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-B2QvhbC3.js');
+var index = require('./index-Dptupbm0.js');
 var constants = require('./constants-DJRV1upE.js');
 
 const urlAlphabet =
@@ -520,24 +520,24 @@ const SdTable = class {
     }
     render() {
         const resolvedTableId = this.getResolvedTableId();
-        return (index.h(index.Host, { key: 'd2a43d075579bf4ffc53949fb074afaf9987113d' }, index.h("div", { key: '3e6b69b3ab38281c1763ab779d66b0916b2cb295', class: "sd-table__container", style: {
+        return (index.h(index.Host, { key: '0b90643721a90b7bb59a6c31f6edeb313849b973' }, index.h("div", { key: 'e55fe4f476dbea4888a168861e7e6d6951d7d489', class: "sd-table__container", style: {
                 '--table-width': this.width,
                 '--table-height': this.height,
                 '--table-container-height': `calc(${this.height || '100%'} - ${this.pagination && this.rowCount > 0 && !this.useVirtualScroll ? 48 : 0}px)`,
-            } }, index.h("div", { key: '60ac7f5d53cdfbb0225dd3ed57be4788e6b7ff2b', class: {
+            } }, index.h("div", { key: 'de18a900037a7b2f619dd22981c30ed76f5a8111', class: {
                 'sd-table__clip': true,
                 'sd-table__clip--has-pagination': !!(this.pagination &&
                     this.pagination.rowsPerPage > 0 &&
                     this.rowCount > 0 &&
                     !this.useVirtualScroll),
-            } }, index.h("div", { key: 'ea4144995650e283bf62de067fe792e1b7d90eb1', class: {
+            } }, index.h("div", { key: '028e0982d415033adaf420ee6b953241c8f3dbec', class: {
                 'sd-table__wrapper': true,
                 'sd-table__wrapper--loading': this.isLoading,
                 'sd-table__wrapper--no-data': this.rowCount === 0 && !this.isLoading,
-            } }, this.isLoading && (index.h("div", { key: '36fd919bbf313d4d5a62d657223ce7e68bd7678d', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, index.h("sd-circle-progress", { key: '5854fbf9090072e1caf5d4a497fe35403c4c8c21', indeterminate: true }))), this.rowCount === 0 && !this.isLoading && (index.h("div", { key: '210bc0045bacd05d4134f96716f74c5893c494dd', class: "sd-table__no-data" }, index.h("slot", { key: 'a2aabac27057d00a6352230d23a9c776a99818b5', name: "no-data" }, index.h("span", { key: 'd030f9abc7bc3afd8cb70433513a8875ae3eecb2' }, this.resolvedNoDataLabel)))), index.h("table", { key: '731208435f8e018b74f2a0670e4c4f68f4c7fd58', class: this.tableClasses }, index.h("slot", { key: 'd12bbe4ed17e9c0d781c50c6b4161c7bddec3480', name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }), index.h("slot", { key: '555d63d8f0ad56d49bcc09451b893e05cc7110cd', name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange })))), this.pagination &&
+            } }, this.isLoading && (index.h("div", { key: '8c9110c9c2c26cddbbed8e1f2782ecfaafd3679c', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, index.h("sd-circle-progress", { key: '51b61f91b0ecebf63fe3e65b94012963f0375e5c', indeterminate: true }))), this.rowCount === 0 && !this.isLoading && (index.h("div", { key: '0a7a45049014869b8164b081a251218d3c814e87', class: "sd-table__no-data" }, index.h("slot", { key: 'd4b6219e5dcaaa22be3360f7f0f05a8b32533890', name: "no-data" }, index.h("span", { key: 'c76848aad8a1d3967f3cd239090e97266e46ab3e' }, this.resolvedNoDataLabel)))), index.h("table", { key: '2b560d112402549c7043b337d944b0de88c3ba0e', class: this.tableClasses }, index.h("slot", { key: '1c4583148df6a585f389c1bed0426fa4a3cb4899', name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }), index.h("slot", { key: 'a5d983106de61c829f9cbeb541d1908fee48468c', name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange })))), this.pagination &&
             this.pagination.rowsPerPage > 0 &&
             this.rowCount > 0 &&
-            !this.useVirtualScroll && (index.h("div", { key: '83b1c554f574013c8a93707f99d4224c581d485c', class: "sd-table__pagination" }, index.h("sd-pagination", { key: '425c036f79001e4d7f012dc528d2c2ecec25ed9b', 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-v2", { key: '1c7c6ddacdd24cfa0cef627cd8ba06fe2466d415', value: this.useInternalPagination
+            !this.useVirtualScroll && (index.h("div", { key: '004355d84e2cfc2fd38a9d4811f14fd66dc5c21b', class: "sd-table__pagination" }, index.h("sd-pagination", { key: '463586c7e57782a7989962f73cb3d4e8c04f5bce', 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-v2", { key: '1f26de447da63ef0c4a24ffb49666a0687db9991', 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-tabs.cjs.entry.js

@@ -1,8 +1,121 @@
 'use strict';
 
-var index = require('./index-B2QvhbC3.js');
+var index = require('./index-Dptupbm0.js');
 
-const sdTabsCss = () => `sd-tabs{display:inline-block;width:100%}sd-tabs .sd-tabs{display:flex;flex-direction:row;gap:4px;border-bottom:1px solid #0075FF}sd-tabs .sd-tabs__tab{display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;border:1px solid #CCCCCC;border-bottom:none;border-radius:4px 4px 0 0;background-color:#F6F6F6;color:#888888;font-weight:400;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.3s}sd-tabs .sd-tabs__tab--selected{border-color:#0075FF;color:#0075FF;background-color:white}sd-tabs .sd-tabs__tab--selected .sd-tabs__label::before{font-weight:700}sd-tabs .sd-tabs__tab--selected:hover::before{background-color:#0075FF;opacity:0.15}sd-tabs .sd-tabs__tab--unselected:hover::before{background-color:#888888;opacity:0.15}sd-tabs .sd-tabs__label{user-select:none;font-weight:700;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:400;transition:font-weight 0.2s ease}sd-tabs .sd-tabs--md .sd-tabs__tab{padding:12px 32px;font-size:12px;line-height:20px}sd-tabs .sd-tabs--sm .sd-tabs__tab{padding:8px 20px;font-size:12px;line-height:16px}sd-tabs .sd-tabs--sub{gap:32px;border-bottom:none}sd-tabs .sd-tabs--sub .sd-tabs__tab{border:none;border-radius:0;background-color:transparent;color:#222222;font-weight:400;padding:0 0 2px 0;position:relative}sd-tabs .sd-tabs--sub .sd-tabs__tab::before{content:"";position:absolute;top:100%;left:0;right:0;height:1px;width:100%;background-color:#0075FF;opacity:0;transition:opacity 0.2s ease}sd-tabs .sd-tabs--sub .sd-tabs__tab::after{font-weight:400}sd-tabs .sd-tabs--sub .sd-tabs__tab--selected{color:#0075FF;background-color:transparent}sd-tabs .sd-tabs--sub .sd-tabs__tab--selected::before{opacity:1}sd-tabs .sd-tabs--sub .sd-tabs__tab--selected::after{font-weight:700}`;
+const tab = {
+	main: {
+		lg: {
+			height: "44",
+			paddingX: "32"
+		},
+		md: {
+			height: "36",
+			paddingX: "24"
+		},
+		gap: "8",
+		container: {
+			gap: "4"
+		},
+		radius: "6",
+		border: {
+			width: "1"
+		},
+		selected: {
+			bg: "#FFFFFF",
+			text: "#0075FF",
+			border: "#0075FF",
+			typography: {
+				fontWeight: "700"}
+		},
+		"default": {
+			bg: "#F6F6F6",
+			text: "#888888",
+			border: "#CCCCCC",
+			typography: {
+				fontFamily: "Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif",
+				fontWeight: "400",
+				fontSize: "12",
+				lineHeight: "20"}
+		}
+	},
+	sub: {
+		selected: {
+			text: "#0075FF",
+			line: "#0075FF",
+			typography: {
+				fontWeight: "700"}
+		},
+		"default": {
+			text: "#222222",
+			typography: {
+				fontFamily: "Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif",
+				fontWeight: "400",
+				fontSize: "12",
+				lineHeight: "20"}
+		},
+		border: {
+			width: "1"
+		},
+		gap: "24",
+		content: {
+			gap: "4"
+		}
+	}
+};
+var tabTokens = {
+	tab: tab
+};
+
+const TAB_MAIN_LAYOUT = {
+    md: {
+        height: Number(tabTokens.tab.main.md.height),
+        paddingX: Number(tabTokens.tab.main.md.paddingX),
+    },
+    lg: {
+        height: Number(tabTokens.tab.main.lg.height),
+        paddingX: Number(tabTokens.tab.main.lg.paddingX),
+    },
+    gap: Number(tabTokens.tab.main.gap),
+    containerGap: Number(tabTokens.tab.main.container.gap),
+    radius: Number(tabTokens.tab.main.radius),
+    borderWidth: Number(tabTokens.tab.main.border.width),
+};
+const TAB_MAIN_COLORS = {
+    selected: {
+        bg: tabTokens.tab.main.selected.bg,
+        text: tabTokens.tab.main.selected.text,
+        border: tabTokens.tab.main.selected.border,
+    },
+    default: {
+        bg: tabTokens.tab.main.default.bg,
+        text: tabTokens.tab.main.default.text,
+        border: tabTokens.tab.main.default.border,
+    },
+};
+const TAB_MAIN_TYPOGRAPHY = {
+    selected: tabTokens.tab.main.selected.typography,
+    default: tabTokens.tab.main.default.typography,
+};
+const TAB_SUB_LAYOUT = {
+    gap: Number(tabTokens.tab.sub.gap),
+    contentGap: Number(tabTokens.tab.sub.content.gap),
+    borderWidth: Number(tabTokens.tab.sub.border.width),
+};
+const TAB_SUB_COLORS = {
+    selected: {
+        text: tabTokens.tab.sub.selected.text,
+        line: tabTokens.tab.sub.selected.line,
+    },
+    default: {
+        text: tabTokens.tab.sub.default.text,
+    },
+};
+const TAB_SUB_TYPOGRAPHY = {
+    selected: tabTokens.tab.sub.selected.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 SdTabs = class {
     constructor(hostRef) {
@@ -14,17 +127,12 @@ const SdTabs = class {
     size = 'md';
     isSub = false;
     update;
-    componentWillLoad() {
-        if (this.value !== undefined && this.value !== null) {
-            this.value = this.value;
-        }
-    }
     valueChanged(newValue) {
         this.value = newValue;
     }
-    handleTabClick = (tabValue) => {
-        this.value = tabValue;
-        this.update.emit(tabValue);
+    handleTabClick = (tab) => {
+        this.value = tab.value;
+        this.update.emit(tab.value);
     };
     isTabSelected(tab) {
         return this.value === tab.value;
@@ -37,20 +145,52 @@ const SdTabs = class {
         return classes.join(' ');
     }
     getContainerClasses() {
-        const classes = ['sd-tabs', `sd-tabs--${this.size}`];
-        if (this.isSub) {
+        const classes = ['sd-tabs', `sd-tabs--${this.size ?? 'md'}`];
+        if (this.isSub)
             classes.push('sd-tabs--sub');
-        }
         return classes.join(' ');
     }
     getBadgeName(tab) {
         const color = this.isTabSelected(tab) ? 'blue' : 'grey';
         return `square_xs_${color}`;
     }
+    buildCssVars() {
+        const mainSize = TAB_MAIN_LAYOUT[this.size ?? 'md'];
+        return {
+            '--sd-tabs-main-height': `${mainSize.height}px`,
+            '--sd-tabs-main-padding-x': `${mainSize.paddingX}px`,
+            '--sd-tabs-main-gap': `${TAB_MAIN_LAYOUT.gap}px`,
+            '--sd-tabs-main-container-gap': `${TAB_MAIN_LAYOUT.containerGap}px`,
+            '--sd-tabs-main-radius': `${TAB_MAIN_LAYOUT.radius}px`,
+            '--sd-tabs-main-border-width': `${TAB_MAIN_LAYOUT.borderWidth}px`,
+            '--sd-tabs-main-selected-bg': TAB_MAIN_COLORS.selected.bg,
+            '--sd-tabs-main-selected-text': TAB_MAIN_COLORS.selected.text,
+            '--sd-tabs-main-selected-border': TAB_MAIN_COLORS.selected.border,
+            '--sd-tabs-main-default-bg': TAB_MAIN_COLORS.default.bg,
+            '--sd-tabs-main-default-text': TAB_MAIN_COLORS.default.text,
+            '--sd-tabs-main-default-border': TAB_MAIN_COLORS.default.border,
+            '--sd-tabs-main-font-family': TAB_MAIN_TYPOGRAPHY.default.fontFamily,
+            '--sd-tabs-main-font-size': `${TAB_MAIN_TYPOGRAPHY.default.fontSize}px`,
+            '--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-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,
+            '--sd-tabs-sub-selected-line': TAB_SUB_COLORS.selected.line,
+            '--sd-tabs-sub-default-text': TAB_SUB_COLORS.default.text,
+            '--sd-tabs-sub-font-family': TAB_SUB_TYPOGRAPHY.default.fontFamily,
+            '--sd-tabs-sub-font-size': `${TAB_SUB_TYPOGRAPHY.default.fontSize}px`,
+            '--sd-tabs-sub-line-height': `${TAB_SUB_TYPOGRAPHY.default.lineHeight}px`,
+            '--sd-tabs-sub-font-weight-default': TAB_SUB_TYPOGRAPHY.default.fontWeight,
+            '--sd-tabs-sub-font-weight-selected': TAB_SUB_TYPOGRAPHY.selected.fontWeight,
+        };
+    }
     render() {
-        return (index.h("div", { key: '85326c946694a115b466f07395872429c467d72f', class: this.getContainerClasses() }, this.tabs.map((tab, index$1) => {
+        return (index.h("div", { key: '390edfad274caa06df38af9d04580015a1744a44', 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}`, class: this.getTabClasses(tab), "aria-label": tab.label || 'tab', onClick: () => this.handleTabClick(tab.value) }, index.h("span", { "data-label": tab.label, class: "sd-tabs__label" }, tab.label), tab.badge && index.h("sd-tag", { name: badgeName, label: tab.badge.toString() })));
+            return (index.h("div", { key: `tab-${index$1}`, class: this.getTabClasses(tab), "aria-label": tab.label || 'tab', onClick: () => this.handleTabClick(tab) }, index.h("span", { "data-label": tab.label, class: "sd-tabs__label" }, tab.label), tab.badge !== undefined && tab.badge !== null && tab.badge !== '' && (index.h("sd-tag", { name: badgeName, label: tab.badge.toString() }))));
         })));
     }
     static get watchers() { return {

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-B2QvhbC3.js');
+var index = require('./index-Dptupbm0.js');
 
 const tag = {
 	xs: {
@@ -172,7 +172,7 @@ const SdTag = class {
     render() {
         const config = this.resolvedConfig;
         const iconNode = this.renderIcon(config.icon, config.iconSize);
-        return (index.h("span", { key: '3e3bf735f8d832e75f1061eac69ccd8972b9f40f', class: "sd-tag", style: {
+        return (index.h("span", { key: 'da19900d267d2b2f000e1790133966a7976bcded', class: "sd-tag", style: {
                 '--sd-tag-background': config.background,
                 '--sd-tag-content': config.content,
                 '--sd-tag-height': config.height,
@@ -182,7 +182,7 @@ const SdTag = class {
                 '--sd-tag-font-weight': config.fontWeight,
                 '--sd-tag-line-height': config.lineHeight,
                 '--sd-tag-radius': config.radius,
-            }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, index.h("span", { key: 'a06237d1d29bb64b4b830294f5385a9b9b909624', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
+            }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, index.h("span", { key: 'e426021988395058367872ac23658586b2895764', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
     }
 };
 SdTag.style = sdTagCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-B2QvhbC3.js');
+var index = require('./index-Dptupbm0.js');
 var constants = require('./constants-DJRV1upE.js');
 
 const sdTbodyCss = () => `:host{display:contents}:host *{box-sizing:border-box}.tbody{display:table-row-group}.tbody--empty .tbody__no-data-row{display:table-row}.tbody--empty .tbody__no-data-cell{display:table-cell;padding:0;border-bottom:none}`;
@@ -49,7 +49,7 @@ const SdTbody = class {
     }
     render() {
         const hasRows = this.rows.length > 0;
-        return (index.h(index.Host, { key: '82a437ddf0cb3c34877b9dbcb47b5406c20a0c0e', slot: `${this.tableId}-body` }, index.h("tbody", { key: '0f0257720491c781eda0479fb0c08d7dffc4f734', class: { 'tbody': true, 'tbody--empty': !hasRows } }, hasRows ? ([
+        return (index.h(index.Host, { key: 'e4c64dbf97185bbc6eaec4b883c65dc8ebd34ece', slot: `${this.tableId}-body` }, index.h("tbody", { key: 'b2fb886684a5a6055d3af659bba75dd9bc801b73', class: { 'tbody': true, 'tbody--empty': !hasRows } }, hasRows ? ([
             this.topSpacerHeight > 0 && (index.h("tr", { key: "spacer-top", class: "tbody__spacer", style: { height: `${this.topSpacerHeight}px`, display: 'block' } })),
             index.h("slot", null),
             this.bottomSpacerHeight > 0 && (index.h("tr", { key: "spacer-bottom", class: "tbody__spacer", style: { height: `${this.bottomSpacerHeight}px`, display: 'block' } })),

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-B2QvhbC3.js');
+var index = require('./index-Dptupbm0.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}`;
@@ -42,7 +42,7 @@ const SdTd = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'c6ddb546268b573694b827509ebdfe74fff8a15a', class: { [`align-${this.align}`]: Boolean(this.align) } }, index.h("slot", { key: '0b59fb8a0cfa1ef628f50496af96aa2f39fdc89a' })));
+        return (index.h(index.Host, { key: '672c967273dac405ed4a47fa5939463265075681', class: { [`align-${this.align}`]: Boolean(this.align) } }, index.h("slot", { key: 'c15e572fdf4a8c68fff8b69b586dfbf9f01dce1b' })));
     }
     static get watchers() { return {
         "field": [{

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-B2QvhbC3.js');
+var index = require('./index-Dptupbm0.js');
 
 const textLink = {
 	gap: "4",
@@ -73,16 +73,16 @@ const SdTextLink = class {
             '--sd-text-link-text-decoration': typo.textDecoration,
             ...(this.disabled ? { '--sd-text-link-color': TEXT_LINK_COLORS.content.disabled } : {}),
         };
-        return (index.h("span", { key: 'c485091d0a9d7f8aa946ac54d96baab50bcaa3c7', class: {
+        return (index.h("span", { key: '1128254cddacf5869f320ce2b788b06646f27d7f', class: {
                 'sd-text-link': true,
                 'sd-text-link--disabled': this.disabled,
-            }, style: cssVars, onClick: this.handleClick }, this.icon && (index.h("sd-icon", { key: '98a2df9a2ba9b5d77eb73c0989cdf38383cfcd15', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), index.h("span", { key: '3c6867611e0d970855897b06f7e9368a8588ff76', class: labelClassName }, this.label), this.useArrow && (index.h("span", { key: '460bebf92782560d64e41b47ea9ef42b66cc08c0', class: "sd-text-link__arrow", style: {
+            }, style: cssVars, onClick: this.handleClick }, this.icon && (index.h("sd-icon", { key: '52c069d637a2ccf9cd4e7bd1ab3a62ea981d2e1e', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), index.h("span", { key: '99a09359c75c2eb6c2e2ef6b9e3b87d92c3f7810', class: labelClassName }, this.label), this.useArrow && (index.h("span", { key: 'c7e77454d9d002c0e043dc71a418c65ecd60cff5', class: "sd-text-link__arrow", style: {
                 width: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
                 height: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
                 display: 'inline-flex',
                 alignItems: 'center',
                 justifyContent: 'center',
-            } }, index.h("sd-icon", { key: 'fee7c74359e683829ad3fa802191b651aa9e94da', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
+            } }, index.h("sd-icon", { key: '677c88823b02084449cd2dec83cc6bd27dfb8006', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
     }
 };
 SdTextLink.style = sdTextLinkCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-B2QvhbC3.js');
+var index = require('./index-Dptupbm0.js');
 var index$1 = require('./index-BUvXpPc3.js');
 var component_textinput = require('./component.textinput-BpXDeZPD.js');
 
@@ -130,7 +130,7 @@ const SdTextarea = class {
             '--sd-system-size-field-sm-height': 'auto',
             '--sd-system-radius-field-sm': `${TEXTAREA_TOKENS.radius}px`,
         };
-        return (index.h("sd-field", { key: '9f456eb1b18d0d83fb40f0b6b66125d587bcb4c6', 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), style: cssVars }, index.h("div", { key: 'f201962ed64908c97d24923b62e97c33b356170a', class: "sd-textarea__content" }, index.h("textarea", { key: '826e4b3c4743dbf16387b68317bd09ca7c75746d', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, autofocus: this.autoFocus, maxLength: this.maxLength, rows: this.rows, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.textareaStyle }))));
+        return (index.h("sd-field", { key: '1f0a9119fae56ef1fc7c558635e042239644ec22', 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), style: cssVars }, index.h("div", { key: '8ef4635e280dd8dc2c0b7c0e7c3feef5b1c66c40', class: "sd-textarea__content" }, index.h("textarea", { key: 'd9e2a569cbe36cb8f4c812eec19f375e41f70108', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, autofocus: this.autoFocus, maxLength: this.maxLength, rows: this.rows, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.textareaStyle }))));
     }
     static get watchers() { return {
         "value": [{