@sellmate/design-system 0.0.50 → 0.0.51

package/dist/esm/{sd-button_14.entry.js → sd-button_15.entry.js}

@@ -198,11 +198,11 @@ const SdGuide = class {
     };
     render() {
         const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];
-        return (h(Host, { key: 'd9bf823d000e8181c61798d9656c428c4a3cd6b6', style: {
+        return (h(Host, { key: '32cff34a733ab423b4db37aaa91f4c63152566a3', style: {
                 '--sd-guide-color': GUIDE_ICON[this.type].color,
-            } }, h("sd-button", { key: 'fd25039c644bdd6e802624f2cbef3bfb4d797220', ref: el => (this.guideRef = el), class: this.guideClass, variant: this.popupShow ? 'primary' : 'outline', label: this.label || GUIDE_LABEL[this.type], size: "sm", color: this.popupShow ? GUIDE_ICON[this.type].color : 'grey_45', icon: iconName, iconColor: this.popupShow ? 'white' : iconColor, iconSize: iconSize, noHover: this.popupShow, onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (h("sd-portal", { key: '3bb296fa9a9419534af30fe3d2e2dd1bffe2aa53', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: '2aacb47b2acedceb9114737da8d061022fea27a8', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, h("sd-button", { key: 'd4e3a1b49d15782a2b4cc50d6ebfc62ca19da555', class: "sd-guide__popup__close", icon: "close", color: colors.grey_65, size: "md", variant: "ghost", noHover: true,
+            } }, h("sd-button", { key: '7efc84462239fcab6ac7d532d75ff418bebee957', ref: el => (this.guideRef = el), class: this.guideClass, variant: this.popupShow ? 'primary' : 'outline', label: this.label || GUIDE_LABEL[this.type], size: "sm", color: this.popupShow ? GUIDE_ICON[this.type].color : 'grey_45', icon: iconName, iconColor: this.popupShow ? 'white' : iconColor, iconSize: iconSize, noHover: this.popupShow, onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (h("sd-portal", { key: '9868dd7fd8b5e42cfd6b2011c2a8679a8f9ece02', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: '974448ac29c162372a7a5e8ba12c493d4e8a2287', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, h("sd-button", { key: 'e28679c5cdeac9ca8e0b5701d4979a94a7c4f182', class: "sd-guide__popup__close", icon: "close", color: colors.grey_65, size: "md", variant: "ghost", noHover: true,
             // buttonStyle={{ padding: '0px', minHeight: '0px' }}
-            onSdClick: this.closeDropdown }), h("div", { key: 'ca5d8332066af0bac3083443488c3ebe5c064931', class: "sd-guide__popup__header" }, h("sd-icon", { key: '752a3ea8dde595e459b0681b317486c3896aa71f', name: "helpOutline", size: 24, color: colors.green_65 }), h("h3", { key: '52d5bdae6b82d9aabbf8dc98c2f05379fb8ffe7d', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), h("ul", { key: '07fe0fe4f2b9831721e95f318dfcd818ee11a415', class: "sd-guide__popup__list" }, this.renderListItem(this.message)))))));
+            onSdClick: this.closeDropdown }), h("div", { key: 'c598b70154a4b2c4a4a2790a0072eaf4f7de7099', class: "sd-guide__popup__header" }, h("sd-icon", { key: '6837f7934c24a7da2bf0558d7cdcd5effcdb5481', name: "helpOutline", size: 24, color: colors.green_65 }), h("h3", { key: '6b7b8f9d6f3602f3cd036efdd308318988ce339b', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), h("ul", { key: 'fbee7a0d4ad49cd6cac2ef5bb4617937aaff5882', class: "sd-guide__popup__list" }, this.renderListItem(this.message)))))));
     }
     // 현재 2depth까지만 스타일 적용
     renderListItem(message, depth = 0) {
@@ -2232,7 +2232,7 @@ const SdIcon = class {
     }
     render() {
         const IconComponent = Icons[this.name]?.[this.size];
-        return (h("i", { key: '856cad8bb2373b0d86734443144f79770c0715ec', class: this.getIconClasses(), style: this.iconStyle }, h(IconComponent, { key: 'd2a06ebbda1317cb72fec996b3bf3008ba171070', color: this.resolvedColor })));
+        return (h("i", { key: 'dc540c5746fedd2fed7bdf8e179b56878abe5a3b', class: this.getIconClasses(), style: this.iconStyle }, h(IconComponent, { key: 'ff1e903198b5362d8e3521c6477ddd0b96948ad9', color: this.resolvedColor })));
     }
 };
 SdIcon.style = sdIconCss;
@@ -2337,11 +2337,11 @@ const SdInput = class {
                 '--input-width': typeof this.width === 'number' ? `${this.width}px` : this.width,
             }
             : {};
-        return (h(Host, { key: '0fc9bec4559137ede7daa7f2da5df00595991d5a', style: inputWidth }, this.label && h("div", { key: '3fd4e7d08aca431d7743ec4249a221c77f2fefd1', class: "sd-input__label" }, this.label), h("label", { key: 'bc80c41ffcb1312261b1139dcd0c390db32932df', class: {
+        return (h(Host, { key: 'f793db1bf48fccad644292b06e725676568d2686', style: inputWidth }, this.label && h("div", { key: '1f59002678f46ffdfeb47a0adb9b48ad74c24191', class: "sd-input__label" }, this.label), h("label", { key: '2fa9f8744f1e6357aa864ea4b97685d35fd0e712', class: {
                 'sd-input': true,
                 [this.getInputStatus()]: true,
                 'sd-input--barcode': !!this.barcode,
-            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, h("slot", { key: 'b1df6c52c2dc92adde26cd535b008d35bc1c73d2', name: "prefix" }), h("input", { key: '5c02cca10b415521d569151c3b05cd9b2ae4b9b7', ref: el => (this.nativeEl = el), class: `sd-input__native_element ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onChange: this.handleChange, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event) }), h("slot", { key: 'f85912a8f17712d0a4950a68d10d885556a1de44', name: "suffix" }), this.clearable && this.internalValue && (h("sd-icon", { key: '3087e7d22f06e2b29d17b37d2e95bdcbcc511bd4', name: "close", color: "#888", class: "sd-input__clear-icon", onClick: () => {
+            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, h("slot", { key: '6baa7f30c5057bcd96167741b7219877a0de8b81', name: "prefix" }), h("input", { key: 'd3210037a23b3015a3650f2771f0205d3baa9af8', ref: el => (this.nativeEl = el), class: `sd-input__native_element ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onChange: this.handleChange, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event) }), h("slot", { key: '72cc3cf71cdcab1e540f68c54a7a7715cb73af83', name: "suffix" }), this.clearable && this.internalValue && (h("sd-icon", { key: '04a65fa5e2042ffad00a2cfae10d77babdeaaf28', name: "close", color: "#888", class: "sd-input__clear-icon", onClick: () => {
                 this.internalValue = '';
                 this.sdChange?.emit(this.internalValue);
                 this.sdInput?.emit(this.internalValue);
@@ -2361,7 +2361,7 @@ const SdLoadingSpinner = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: 'd064701b25e190fc5b7feefb542cbc7d30afc3f3' }, h("svg", { key: 'ec37a9ebea3e5b48817c687fae543186bb3cf29a', class: "sd-loading-spinner text-positive", width: "72px", height: "72px", viewBox: "25 25 50 50" }, h("circle", { key: '0b61caa65955019ddb08ed52a51718cf3f55a6e3', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
+        return (h(Host, { key: '7538c9986c448d666ea1993324d8fd811c2ba289' }, h("svg", { key: '7e254a0b15ecda3e480582c336b33b1020715125', class: "sd-loading-spinner text-positive", width: "72px", height: "72px", viewBox: "25 25 50 50" }, h("circle", { key: '8a6356ba2e8d42c9d1c789ba5676ca6f7485cda1', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
     }
 };
 SdLoadingSpinner.style = sdLoadingSpinnerCss;
@@ -2440,12 +2440,12 @@ const SdPagination = class {
         }
     }
     render() {
-        return (h("div", { key: 'c8c241301297c8281d02643f5a31c97f77706fff', class: this.paginationClasses }, h("div", { key: '12ca5b852a648b168928934729d2215f6648bcc1', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "pagination-info" }, h("span", { class: "current-page" }, this.currentPage), h("span", null, "/"), h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
+        return (h("div", { key: 'e3abf3098a37fe058088304eefcfa9b6abbdbcaa', class: this.paginationClasses }, h("div", { key: '19db1f5ed8fd2ab9b4f6793b474bf4dd3f48f21c', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "pagination-info" }, h("span", { class: "current-page" }, this.currentPage), h("span", null, "/"), h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
                 'pagination-btn': true,
                 'pagination-btn--selected': this.currentPage === n,
             }, disabled: this.currentPage === n, style: {
                 '--pagination-btn-width': `${this.buttonWidth}px`,
-            }, onClick: () => this.handlePageChange(n) }, n)))), h("div", { key: '0ff537ba6e5985be1e055f5b9eab5dd86dd11624', class: "append-btns" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n)))), h("div", { key: '63096633349b138d679b2a735d0e8d246dfde312', class: "append-btns" }, this.renderNextButtons())));
     }
 };
 SdPagination.style = sdPaginationCss;
@@ -2568,7 +2568,7 @@ const SdPortal = class {
         this.sdClose.emit();
     }
     render() {
-        return h("slot", { key: '2f6a1908864a2b5bbe86127fbf41b6b44a599666' });
+        return h("slot", { key: 'a2227a90c04b58d7f8c468ebc84f0627055d4da8' });
     }
 };
 
@@ -2625,7 +2625,7 @@ const SdRadioGroup = class {
     }
     render() {
         const groupName = this.name || `sd-radio-group-${Math.random().toString(36).substring(2, 11)}`;
-        return (h("div", { key: 'd8f9d161395e7125bb65411ee6831e7e290900ba', class: this.getGroupClasses(), role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.radioOptions.map((option, index) => {
+        return (h("div", { key: 'f817ced0e784c418c09c6c3e1cd6d9e045d32598', class: this.getGroupClasses(), role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.radioOptions.map((option, index) => {
             const isSelected = this.isOptionSelected(option);
             const isDisabled = this.isOptionDisabled(option);
             return (h("label", { key: `radio-${index}`, class: this.getRadioClasses(option), role: "radio", "aria-checked": isSelected.toString(), "aria-disabled": isDisabled.toString(), "aria-label": option.label || 'radio option' }, h("input", { type: "radio", name: groupName, value: option.value.toString(), checked: isSelected, disabled: isDisabled, onInput: () => this.handleRadioChange(option.value, option.disabled) }), option.label && h("span", { class: "sd-radio-group__label" }, option.label)));
@@ -2841,11 +2841,11 @@ const SdSelect = class extends BaseDropdownEvent {
             '--select-width': this.width || '200px',
             '--select-dropdown-height': this.dropdownHeight || '260px',
         };
-        return (h(Host, { key: '94880c07678eb6a478c9c80de0c42c5c7724936e', style: style }, h("div", { key: '872f918214118adb99b50533c323e9de7ca27353', class: {
+        return (h(Host, { key: 'a99d2903e6156a30aa834dea2344829edbde67cb', style: style }, h("div", { key: '39862875a121d9add2c0101d81e223d475d14abb', class: {
                 'sd-select': true,
                 'sd-select--open': this.isOpen,
                 'sd-select--disabled': this.disabled,
-            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), h("div", { key: '30e44d67c6d8b81c59c798ffa4de43337de6f195', class: "sd-select__container" }, this.renderTrigger(), this.renderDropdown()))));
+            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), h("div", { key: '6a7e4ffc442e4edfe508e60c8b578f8c8fb5e409', class: "sd-select__container" }, this.renderTrigger(), this.renderDropdown()))));
     }
     renderLabel(label) {
         if (!label)
@@ -3581,16 +3581,16 @@ const SdTable = class {
             }, "aria-hidden": "true" }, h("div", { class: "sd-table__skeleton-cell" })));
     }
     render() {
-        return (h(Host, { key: '85b4655b2ee298d535add2e43c2ef73b8c816716' }, h("div", { key: '9fc71a34045a725db9fa19fec9954d1edb90f1e4', class: "sd-table__wrapper", style: {
+        return (h(Host, { key: '1c762116fd35be7070aea38b052f8f619176cd32' }, h("div", { key: '4201639381ebbe400ab124e1ab0e2badd3ffba9e', class: "sd-table__wrapper", style: {
                 '--table-width': this.width,
                 '--table-height': this.height,
-            } }, h("div", { key: 'dcb78c1bac32c68bc5ac81beece5ee8ca74025ba', class: "sd-table__container", style: {
+            } }, h("div", { key: 'c17c7b76ab6f33faf605ad2c4f023f5f0411c847', class: "sd-table__container", style: {
                 '--table-container-height': `calc(${this.height} - ${this.pagination && this.innerRows.length > 0 ? 48 : 0}px)`,
-            } }, h("div", { key: 'e0bb087930f0cf07c06c6f5684a5b26fa5e25a02', class: {
+            } }, h("div", { key: 'd7b1e53fbbe6c8c282b6455a113aa1fb7abf0f13', class: {
                 'sd-table__middle': true,
                 'sd-table__middle--scrollable': this.paginatedRows.length > 0,
                 'sd-table__middle--loading': this.isLoading,
-            } }, this.isLoading && (h("div", { key: '4f36b5fc670aa98774e565b000cc1623a6cae0af', class: "sd-table__middle--loading__spinner" }, h("sd-loading-spinner", { key: '2e794ac56824bfad1f9f42482b75498e7f2ca70c' }))), h("table", { key: 'a4017ae90c8f932c22b26d7f81c9fc13785e52d0', part: "table", class: this.sdTableClasses }, this.renderHead(), this.renderBody())), h("div", { key: 'c7b008d66c47442d25a977d76b7b6dd266d7f008', class: "sd-table__bottom" }, !this.paginatedRows.length && (h("div", { key: '20235f4747c2396710b44d46ea1da659156bb9ca', class: "sd-table__no-data" }, h("slot", { key: '432a8669c4942eb92c4bce7f0b08cb9cb1f9f6e3', name: "no-data" }, this.noDataLabel))))), this.pagination && this.innerRows.length > 0 && (h("div", { key: 'f9f6dc05c1004b03e10ece4c091d67ca564b1633', class: "sd-table__pagination" }, h("sd-pagination", { key: 'd7efd361091fe9725e8c79289501506a779e1111', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (h("sd-select", { key: '401d35d85c2fc78094c267f27d74055108179f9e', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdChange: (e) => this.changeRowsPerPage(e.detail.value) })))))));
+            } }, this.isLoading && (h("div", { key: '3c8d66915131a8388d19c2d6101716d709f29c4a', class: "sd-table__middle--loading__spinner" }, h("sd-loading-spinner", { key: '5bd2eb67b7f16929dc4829d3ed069ee7b976f4bf' }))), h("table", { key: 'be2d1b31673397a7aebeff85827d40343970aac0', part: "table", class: this.sdTableClasses }, this.renderHead(), this.renderBody())), h("div", { key: 'f6436dc02163f34d3f9efcd6bc312561e88f3d08', class: "sd-table__bottom" }, !this.paginatedRows.length && (h("div", { key: 'b0f27e8d1b7343619c356bc0d9c074e4dbe91ff0', class: "sd-table__no-data" }, h("slot", { key: '0ea8e9e5624ce063c88b71de32ab7c4607344af9', name: "no-data" }, this.noDataLabel))))), this.pagination && this.innerRows.length > 0 && (h("div", { key: '271d506c6f9e98a6f4e69364be977e299fa4f794', class: "sd-table__pagination" }, h("sd-pagination", { key: '1bff466793f04d5c76b9682fa546a66f9546cf0a', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (h("sd-select", { key: '51731aabcbfd68cf606423e008fcc89995419803', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdChange: (e) => this.changeRowsPerPage(e.detail.value) })))))));
     }
     static get watchers() { return {
         "columns": ["handleColumnsChange"],
@@ -3602,6 +3602,47 @@ const SdTable = class {
 };
 SdTable.style = sdTableBackupCss;
 
+const sdToggleCss = "sd-toggle{display:inline-block;height:20px;line-height:0}sd-toggle .sd-toggle{cursor:pointer;display:inline-flex;align-items:center;gap:8px;height:20px}sd-toggle .sd-toggle>input{display:none}sd-toggle .sd-toggle__label{font-size:12px;color:#333333;line-height:20px}sd-toggle .sd-toggle__track{width:36px;height:20px;border-radius:12px;background:#cccccc;position:relative;transition:background-color 0.2s ease}sd-toggle .sd-toggle__thumb{width:16px;height:16px;border-radius:50%;background:white;position:absolute;top:2px;left:2px;transition:transform 0.2s ease}sd-toggle .sd-toggle--checked .sd-toggle__track{background:#0075ff}sd-toggle .sd-toggle--checked .sd-toggle__thumb{transform:translateX(16px)}sd-toggle .sd-toggle--disabled{cursor:not-allowed}sd-toggle .sd-toggle--disabled.sd-toggle--checked .sd-toggle__track{background:#bbdaff}sd-toggle .sd-toggle--disabled.sd-toggle--unchecked .sd-toggle__track{background:#eeeeee}sd-toggle .sd-toggle:hover:not(.sd-toggle--disabled).sd-toggle--checked .sd-toggle__track{background:#005cc9}sd-toggle .sd-toggle:hover:not(.sd-toggle--disabled).sd-toggle--unchecked .sd-toggle__track{background:#bbbbbb}";
+
+const SdToggle = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.sdChange = createEvent(this, "sdChange");
+    }
+    value = false;
+    label = '';
+    disabled = false;
+    isChecked = false;
+    sdChange;
+    componentWillLoad() {
+        this.updateCheckedState(this.value);
+    }
+    componentWillRender() {
+        this.updateCheckedState(this.value);
+    }
+    updateCheckedState(value) {
+        this.isChecked = value;
+    }
+    get toggleClasses() {
+        const classes = ['sd-toggle', this.isChecked ? 'sd-toggle--checked' : 'sd-toggle--unchecked'];
+        if (this.disabled) {
+            classes.push('sd-toggle--disabled');
+        }
+        return classes.join(' ');
+    }
+    handleChange = () => {
+        if (this.disabled)
+            return;
+        const newValue = !this.value;
+        this.value = newValue;
+        this.sdChange.emit(newValue);
+    };
+    render() {
+        return (h("label", { key: '8b196fae6d8931cdd39c7eea51a7f1f843f4cb75', "aria-checked": this.isChecked.toString(), "aria-disabled": this.disabled.toString(), role: "switch", "aria-label": this.label || 'toggle', class: this.toggleClasses }, h("input", { key: '4a60ce883411cb2a598d003ff264fe6659d0df02', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onInput: this.handleChange }), this.label && h("span", { key: 'c0fb2edfb1a2854c31fb6eb0a4e4169e2e409db2', class: "sd-toggle__label" }, this.label), h("div", { key: 'c9f78f892be478cbd1232722487471eae53bee8a', class: "sd-toggle__track" }, h("div", { key: 'b6388556a0d6f4b9f74e6e2684ded4cde93d6384', class: "sd-toggle__thumb" }))));
+    }
+};
+SdToggle.style = sdToggleCss;
+
 const sdTooltipCss = "sd-tooltip [slot=content]{display:none}sd-tooltip .sd-tooltip{position:relative;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.sd-tooltip-menu{width:fit-content;padding:8px 16px;border-radius:4px;font-size:12px;position:relative;box-sizing:border-box;display:flex;align-items:start;justify-content:center;gap:12px}.sd-tooltip-menu--with-close{padding-right:12px !important}.sd-tooltip-menu__arrow{position:absolute;display:flex;width:9.6px;height:7.2px}.sd-tooltip-menu__arrow svg{width:100%;height:100%}.sd-tooltip-menu__arrow--top{bottom:-7.2px;left:50%;transform:translateX(-50%)}.sd-tooltip-menu__arrow--bottom{top:-7.2px;left:50%;transform:translateX(-50%) rotate(180deg)}.sd-tooltip-menu__arrow--left{right:-7.2px;top:50%;transform:translateY(-50%) rotate(-90deg)}.sd-tooltip-menu__arrow--right{left:-7.2px;top:50%;transform:translateY(-50%) rotate(90deg)}.sd-tooltip-menu__content{line-height:20px;font-weight:500}.sd-tooltip-menu__content p{margin:0}.sd-tooltip-menu__close-button{padding-top:4px;display:flex}.sd-tooltip-menu__close-button button{padding:0;background:none;border:none;cursor:pointer}";
 
 const SdTooltip = class {
@@ -3650,20 +3691,20 @@ const SdTooltip = class {
             : {
                 onClick: () => (this.showTooltip = !this.showTooltip),
             };
-        return (h(Fragment, { key: 'ca1fc3ffdb493ee2aeb0ef9ef874a164d50a1d34' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-tooltip", ...handleTrigger })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (h("sd-tooltip-portal", { key: '840728261961211b5d12e6bf6c97aa044f97f133', parentRef: this.buttonEl, onSdClose: () => this.handleClose(), placement: this.placement }, h("div", { key: '80933fad7b61af35ba41f171848c431ee4b0ff0e', class: {
+        return (h(Fragment, { key: '44ccb9c1a2e9113160ccb516e62fbd175e139f50' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-tooltip", ...handleTrigger })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (h("sd-tooltip-portal", { key: '83f82f27164df34a1a8e0d1d8975b4f89a82691a', parentRef: this.buttonEl, onSdClose: () => this.handleClose(), placement: this.placement }, h("div", { key: '544085a133cdbbe707ec0c2be35a9a42cd2372bc', class: {
                 'sd-tooltip-menu': true,
                 [`sd-tooltip-menu--${this.type}`]: true,
                 [`sd-tooltip-menu--${this.placement}`]: true,
                 'sd-tooltip-menu--with-close': this.useClose,
                 [`bg-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,
                 [`text-${SdTooltip.COLOR_OF_TYPE[this.type].text}`]: true,
-            } }, h("i", { key: 'c166fc91a2f49840dfea98c4ca1010892e571b48', class: `sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '58a04b43a4f3333aa9e34d2c1dda7f03e9493e21', class: {
+            } }, h("i", { key: '4b335754d346d6ae244e83ccdcae25edf05a306a', class: `sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '567fc901e95b918fb0883f9c241836a10e1e58e9', class: {
                 [`text-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,
-            } })), h("div", { key: 'd49d44d196c266482974beef4da124f32ec39825', class: "sd-tooltip-menu__content", ref: el => {
+            } })), h("div", { key: '1475d6f5d76f4e3860e2524cb571eb2704460203', class: "sd-tooltip-menu__content", ref: el => {
                 if (el && this.slotContent && !el.hasChildNodes()) {
                     el.appendChild(this.slotContent.cloneNode(true));
                 }
-            } }, !this.slotContent && h("span", { key: '5543dd3bc313e033379da9b3e0c4b4f929ec899c' }, this.el.textContent)), this.useClose && (h("div", { key: 'e32069afe16667a1bbfcc2e57ef6f2888fd9a5d6', class: "sd-tooltip-menu__close-button" }, h("button", { key: '913909f8479496c9344df5d64ba3eb9e5a073658', type: "button", "aria-label": "Close tooltip", title: "Close tooltip", onClick: () => this.handleClose() }, h("sd-icon", { key: 'ebde71b66b5b805d8ca99911ecfe9e6319a1f9be', name: "close", size: "12", color: "#AAAAAA" })))))))));
+            } }, !this.slotContent && h("span", { key: 'f821b0aa74de05c7728b06a2bd78367e43703684' }, this.el.textContent)), this.useClose && (h("div", { key: '2068c369ef957cb25b9ec74e22e2c78f9ffa6232', class: "sd-tooltip-menu__close-button" }, h("button", { key: 'f61156a86ce1b3fd4f2fb97e507711f9602ac157', type: "button", "aria-label": "Close tooltip", title: "Close tooltip", onClick: () => this.handleClose() }, h("sd-icon", { key: '3ba6f3f4dc5379eb2d13aecb9ec1d5d6fdf20dec', name: "close", size: "12", color: "#AAAAAA" })))))))));
     }
 };
 SdTooltip.style = sdTooltipCss;
@@ -3817,9 +3858,9 @@ const SdTooltipPortal = class {
         this.sdClose.emit();
     }
     render() {
-        return h("slot", { key: 'b8652906919bc46c2f36710de6e65b33276bf31a' });
+        return h("slot", { key: '912ff6aba4bae810c40c95325ffb1109ddcfddbb' });
     }
 };
 
-export { SdButton as sd_button, SdCheckbox as sd_checkbox, SdGuide as sd_guide, SdIcon as sd_icon, SdInput as sd_input, SdLoadingSpinner as sd_loading_spinner, SdPagination as sd_pagination, SdPortal as sd_portal, SdRadioGroup as sd_radio_group, SdSelect as sd_select, SdSelectOption as sd_select_option, SdTable as sd_table_backup, SdTooltip as sd_tooltip, SdTooltipPortal as sd_tooltip_portal };
-//# sourceMappingURL=sd-button.sd-checkbox.sd-guide.sd-icon.sd-input.sd-loading-spinner.sd-pagination.sd-portal.sd-radio-group.sd-select.sd-select-option.sd-table-backup.sd-tooltip.sd-tooltip-portal.entry.js.map
+export { SdButton as sd_button, SdCheckbox as sd_checkbox, SdGuide as sd_guide, SdIcon as sd_icon, SdInput as sd_input, SdLoadingSpinner as sd_loading_spinner, SdPagination as sd_pagination, SdPortal as sd_portal, SdRadioGroup as sd_radio_group, SdSelect as sd_select, SdSelectOption as sd_select_option, SdTable as sd_table_backup, SdToggle as sd_toggle, SdTooltip as sd_tooltip, SdTooltipPortal as sd_tooltip_portal };
+//# sourceMappingURL=sd-button.sd-checkbox.sd-guide.sd-icon.sd-input.sd-loading-spinner.sd-pagination.sd-portal.sd-radio-group.sd-select.sd-select-option.sd-table-backup.sd-toggle.sd-tooltip.sd-tooltip-portal.entry.js.map

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

@@ -9,7 +9,7 @@ const SdCard = class {
     bordered = true;
     class = '';
     render() {
-        return (h(Host, { key: 'e9653557b36889a75002c32bde005c7b480b2f4b' }, h("div", { key: 'e34f53b49bdc412eaf82dbe21918cd6599d1d2c6', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.class}` }, h("slot", { key: 'b5d06b44a1a960fe12424f43a39647a4646610d6' }))));
+        return (h(Host, { key: 'f19b796cbe69bb22165a52864cf0eef7c8afeac1' }, h("div", { key: '2a6272608b5fca143883d477ddb7f8fdb60acb0d', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.class}` }, h("slot", { key: '60f687272faa536e182e9a65ea0c07a233194bd8' }))));
     }
 };
 SdCard.style = sdCardCss;

package/dist/esm/sd-date-picker.entry.js

@@ -80,7 +80,7 @@ const SdDatePicker = class {
         this.isOpen = false;
     };
     render() {
-        return (h(Host, { key: '3fe32fb440e95d43a7ba5ae40eebfec5b1f292f7', class: "sd-date-picker" }, h("sd-input", { key: '8aa313f14bd0305c0d28ba8e388c5c7d2ae2d3ec', ref: el => (this.inputEl = el), value: this.date, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", onClick: () => this.openMenu() }, h("sd-icon", { key: '350af44747b5f87c0e25dc01fc8aa25590363d5b', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: '1c05d0d0b9cd54bd67b1d4411bd3ad2aded758ba', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: '273c93d7b9635ebfab1350568f30da3f62996003', class: "sd-date-picker__menu" }, h("div", { key: '9da1cf5d0dc35f00018a2718787007749a84ca99', class: "sd-date-picker__header" }, h("div", { key: 'c2afcc7006276eca26d4f0d0c91350a0dee070cf', class: "year-nav" }, h("button", { key: '1b53d6e96c6f9ab93d67440450b35be096e9607b', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, h("sd-icon", { key: '7acd8f69406a83bcc9fef1745523d997d1b3f219', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: 'ad5f412960af38938d6efea1f0909293c3c6682c', class: "year-nav__current" }, this.currentYear), h("button", { key: 'fe2480d51d8a8a3b09d3d0d5e5c5c53982ebd20d', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, h("sd-icon", { key: 'e7175f73e5efcef04a2b33a2ee7a57d2b025c3d8', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '76dcf13a864dffcb6a49683b590c19efb05c7367', class: "month-nav" }, h("button", { key: '2d300218750da2716e2558ff3145337ee6bcfa80', type: "button", name: "prev-month", title: "Previous       ", onClick: () => this.handleUpdateMonth('prev') }, h("sd-icon", { key: '1972506ecb42922b6c742bd34186bdbf23f8d6b5', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: '3037310072a6dcb71f2e662fb1dcfa07d44f2a70', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), h("button", { key: '7cd60a470fd27f2028935748047f76945fc4fe99', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, h("sd-icon", { key: 'd656f3dd638cab72e94f12036e77f46b9ab31c7f', name: "arrowRight", size: "12", color: "#CCCCCC" })))), h("div", { key: '1710f916652929515916a122affda7cbdd311153', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("div", { key: day, class: "day" }, day)))), h("div", { key: '201f7499819e88f291a3889fcbe854d2e2145fde', class: "sd-date-picker__body" }, [
+        return (h(Host, { key: '6f835c6778d618a0285dc070c43022e4787e9eb6', class: "sd-date-picker" }, h("sd-input", { key: '9d09bd679c1c239ad6106464b9b6b2bd2fd164cc', ref: el => (this.inputEl = el), value: this.date, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", onClick: () => this.openMenu() }, h("sd-icon", { key: 'd3790bf739adeef7b381e983bb7426e8684b9e66', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: '6e6833f13a1ec4083f06b09ebc61e378e47599cf', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: 'd6b36f1a26904a8287bcb3b3d64981a0f628a911', class: "sd-date-picker__menu" }, h("div", { key: '37b9795686360b719b69a9a385a7e4bf27c217e5', class: "sd-date-picker__header" }, h("div", { key: 'c885554693c93eddb3d1148e12ca8610f23625a4', class: "year-nav" }, h("button", { key: '8628fca079f02183aaf07f953ebcf9e4141060f3', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, h("sd-icon", { key: '3597f373c01ff11b4dcc97e692cedc31bcd8d548', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: 'ed71145dc3a34b8ae491088f65ea43b4cd0acec3', class: "year-nav__current" }, this.currentYear), h("button", { key: 'b1bbd644e7ff7bb8141758e3b897c93f5d2c1a38', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, h("sd-icon", { key: '5a55e81f9e01f3acb73bbb7b6c6f4034430ad2a4', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '1e95092fd966e7d8c2480fd8823e8886a141c83b', class: "month-nav" }, h("button", { key: 'e49b6e1528ff2f814e021fb70a7df0425f0efb11', type: "button", name: "prev-month", title: "Previous       ", onClick: () => this.handleUpdateMonth('prev') }, h("sd-icon", { key: '4d0e61ccb0fcf006d11b48acff31593c95426acd', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: '8eacea2970a8b9f2963f4afd3f0e7aa4ee2bdca9', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), h("button", { key: 'd209068e6b0e244b572c42cdc5a3ece8ed4be0fa', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, h("sd-icon", { key: 'a067b7c5e59ae9b32f1e13e1a80b49055b451a80', name: "arrowRight", size: "12", color: "#CCCCCC" })))), h("div", { key: 'c99e6a24b1113f5c78d17586a9491053e23ee053', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("div", { key: day, class: "day" }, day)))), h("div", { key: '9e243d5edf78f0fd606e787b714ae993c549b828', class: "sd-date-picker__body" }, [
             ...this.calendar.prevMonthDays,
             ...this.calendar.days,
             ...this.calendar.afterMonthDays,

package/dist/esm/sd-date-range-picker.entry.js

@@ -155,9 +155,9 @@ const SdDateRangePicker = class {
         this.isOpen = false;
     };
     render() {
-        return (h(Host, { key: 'b5f7be556686c3bb50147ed0b28cd47698d90e5c', class: "sd-date-range-picker" }, h("sd-input", { key: 'a457ab2b61354fe100fa31e1ab357649ceef63aa', ref: el => (this.inputEl = el), value: `${this.dateRange[0]} ~ ${this.dateRange[1]}`, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", inputStyle: {
+        return (h(Host, { key: 'a546e1ab7d199688377b3852b51711b283ed9735', class: "sd-date-range-picker" }, h("sd-input", { key: 'f7edc5f8e03d0f781f906cf1abc9f6eddd93f3b6', ref: el => (this.inputEl = el), value: `${this.dateRange[0]} ~ ${this.dateRange[1]}`, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", inputStyle: {
                 margin: '0 0 0 8px',
-            }, onClick: () => this.openMenu() }, h("sd-icon", { key: 'cc068925914495e21172020763c18627d3c8e8a2', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: '0486ab86c422d98aa2e86bd4d327cc42f0e72ae9', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: '8b86d95d279d6f3036f2aacc0421ec4f715d91e7', class: "sd-date-range-picker__menu" }, h("div", { key: '0fa223b5fdc0a8195e1fbd433c235dc4473ad146', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, h("button", { key: '2d512e7ffa9461f18ca67236a0539cdabcb384ac', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, h("sd-icon", { key: 'aa23e83e33bfaaaee02f771e9aa3e7f84fe7ceae', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("div", { key: '5c6e6ea57120081b466faa827e7bb014b5d20905', class: "header-label" }, this.prevYear), h("button", { key: '51f89a92ca77a98283a883316981b7df08e1fcef', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, h("sd-icon", { key: '19a594a16b65668db23f5e77e61db7182591ac57', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '21073a5c2d4dd68aa4dce7be48eab0339dd3791d', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index) => (h(Fragment, null, index === 1 && h("div", { class: "separator" }), h("div", { key: index, class: "calendar-container" }, h("div", { class: "calendar-header" }, h("button", { type: "button", name: "month", title: "Month", class: index === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index === 0 ? 'prev' : 'next') }, h("sd-icon", { name: index === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index === 0
+            }, onClick: () => this.openMenu() }, h("sd-icon", { key: 'dbd1acab929f74afd822c9c9e2ca4bd8e6e25c02', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: '86f98f816b61f3dcb49eb284266c32dd644d1641', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: '221f126d9d4c92daf84312459b4e6aa9069b4131', class: "sd-date-range-picker__menu" }, h("div", { key: 'c3b10e8544af4e52509a90650946045c33cf909c', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, h("button", { key: '253cdb65199cff3d4344eb0a1b0920939f917a18', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, h("sd-icon", { key: '33480e0a2f498f5481908e9e1541bb1a26f2b9d2', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("div", { key: '2db9fed11f2c923a6fba475cacb72cc1865beecd', class: "header-label" }, this.prevYear), h("button", { key: '36603bc40a926337d45f60b416d6dabaaa3cfc7e', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, h("sd-icon", { key: '8d46e41a1fc5d4de945f92c5ae8842f8dd2c75cf', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '236b93e84d17746e4f8852a9beda0d398edf096b', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index) => (h(Fragment, null, index === 1 && h("div", { class: "separator" }), h("div", { key: index, class: "calendar-container" }, h("div", { class: "calendar-header" }, h("button", { type: "button", name: "month", title: "Month", class: index === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index === 0 ? 'prev' : 'next') }, h("sd-icon", { name: index === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index === 0
             ? `${this.prevYear}.${String(this.prevMonth).padStart(2, '0')}`
             : `${this.nextYear}.${String(this.nextMonth).padStart(2, '0')}`), h("div", { class: "calendar-days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("sd-date-box", { key: day, date: day, disabled: true, class: "day" })))), h("div", { class: "calendar-body mt-12pxr grid grid-cols-7 gap-y-8pxr" }, [...calendar.prevMonthDays, ...calendar.days, ...calendar.afterMonthDays].map((day, idx) => (h("sd-date-box", { key: `prev${day}_${idx}`, date: !day ? '' : Number(day), selected: this.dateRange.some(date => date ===
                 this.dateUtil.formatDate(index === 0 ? this.prevYear : this.nextYear, index === 0 ? this.prevMonth : this.nextMonth, Number(day))), type: this.getDateBoxType(this.dateUtil.formatDate(index === 0 ? this.prevYear : this.nextYear, index === 0 ? this.prevMonth : this.nextMonth, Number(day))), isToday: today ===

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

@@ -36,11 +36,11 @@ const SdPopover = class {
         this.showPopover = false;
     };
     render() {
-        return (h(Fragment, { key: '596dfc584e73c7d7093e15a91046e14b7801138a' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })), this.showPopover && (h("sd-tooltip-portal", { key: '9bf784d6946cd5fd8b6ecfd3a6e9d976f44a2a90', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, h("div", { key: '409afdeee8e96ce019594cd2aaa16034e4339a35', class: {
+        return (h(Fragment, { key: '8c7efcbf49754c518a6a9cf492b300c07ef980f5' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })), this.showPopover && (h("sd-tooltip-portal", { key: 'c61e5138ebba94a31d621ff1b3439d3c37ceb629', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, h("div", { key: 'c88706aa4e7aec4a105459e429a8cfa9313c7aa8', class: {
                 'sd-popover-menu': true,
                 [`sd-popover-menu--${this.placement}`]: true,
                 [this.menuClass]: !!this.menuClass,
-            } }, h("i", { key: '2ff3545fb7b13c11d4f128616a68f0a230087447', class: `sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '3da84311b01c95d92b91327ce66e49e1d0243b37' })), h("div", { key: 'aa861155d8c9194dffafd8b834e58108995f33ed', class: "sd-popover-menu__content" }, this.menuTitle && h("div", { key: '534c0871ff6b909c87eba179be23c7e2fa4ce0e9', class: "sd-popover-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: 'a601e50189ca95fa007e68edf64c1a0aa1e990d0', class: "sd-popover-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: '63ee5c3dcdf167e0b35b5ed96a516b91ff007355', class: `sd-popover-menu__buttons sd-popover-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (h("sd-button", { ...button })))))), this.useClose && (h("button", { key: '6f8f0a6dfd113603105652686b5426e3a0313d4e', class: "sd-popover-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: '9f1aedb7e6e9e519fa890856ea9c185e393f5f43', name: "close", size: "12", color: "#AAAAAA" }))))))));
+            } }, h("i", { key: 'f79cb7d4784bc70d89ed5a3d5fa63af3ffb94921', class: `sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: 'e5e6148d67858f972b00ec55e174685cd87c6608' })), h("div", { key: '17d4f8a35d85bf48a6155bf0581f37530c5ea492', class: "sd-popover-menu__content" }, this.menuTitle && h("div", { key: '26d5195b0cde90c8b9251622180021eb33027f6b', class: "sd-popover-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: 'd1eca72d7d97d16a6caa6a9094c93555ea0cbd53', class: "sd-popover-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: '2c8258470a30a604398f680b5d02527303d3b6c7', class: `sd-popover-menu__buttons sd-popover-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (h("sd-button", { ...button })))))), this.useClose && (h("button", { key: '480f0a2b1e9aa0f6d31257f1a13fe441c3685e2b', class: "sd-popover-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: '73d77f0e344a86c4a81c0aab4289b6fb5d3603c2', name: "close", size: "12", color: "#AAAAAA" }))))))));
     }
     static get watchers() { return {
         "show": ["watchShowHandler"]

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

@@ -19,10 +19,10 @@ const SdProgress = class {
         error: '#FB4444',
     };
     render() {
-        return (h(Host, { key: 'fa4a0bdd1e76231bc3ff349c5e94a18f1d747bf4', style: {
+        return (h(Host, { key: 'd491ac2f5e734f653a991afa1c9e25ceb9947335', style: {
                 '--progress-color': this.statusColor[this.status],
                 '--progress-percentage': `${this.percentage}%`,
-            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && h("div", { key: '2c356835e29ec88765f0be0efbe9ee416f1e27ea', class: "sd-progress__label" }, this.label)));
+            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && h("div", { key: '0741e3f5492c4f870cc9657e27d3d1a1d73bee10', class: "sd-progress__label" }, this.label)));
     }
     renderBarProgress() {
         return (h("div", { class: `sd-progress__bar sd-progress__bar--${this.status}` }, h("div", { class: ['sd-progress__bar__percent', this.percentage < 100 ? 'proceed' : ''].join(' ') }), h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--left" }, this.percentage, "%"), h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--right" }, this.percentage, "%")));

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

@@ -343,11 +343,11 @@ const SdSelectMultipleGroup = class extends BaseDropdownEvent {
             '--select-width': this.width || '200px',
             '--select-dropdown-height': this.dropdownHeight || '260px',
         };
-        return (h(Host, { key: 'bcafcfbb33940882bd7e22a6d197974194554968', style: style }, h("div", { key: 'a8547e4aa07d8ccdfbb7955f122eaa3955c5d30e', class: {
+        return (h(Host, { key: '2fb8b95f341cea6870702474d549b10b46a33551', style: style }, h("div", { key: 'f0ffc9960ae27bc1e76e3cd59592de205ae0071d', class: {
                 'sd-select-multiple-group': true,
                 'sd-select-multiple-group--open': this.isOpen,
                 'sd-select-multiple-group--disabled': this.disabled,
-            }, style: this.containerStyle, ref: el => (this.selectRef = el) }, this.renderLabel(this.label, this.labelStyle), h("div", { key: '90ba61f1d83692e2eaf430f42a1a0fd55380d774', class: "sd-select-multiple-group__container" }, this.renderTrigger(), this.renderDropdown()))));
+            }, style: this.containerStyle, ref: el => (this.selectRef = el) }, this.renderLabel(this.label, this.labelStyle), h("div", { key: '1496b603a09001a571388baade46e4d14f19e51d', class: "sd-select-multiple-group__container" }, this.renderTrigger(), this.renderDropdown()))));
     }
     renderLabel(label, labelStyle) {
         if (!label)

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

@@ -194,10 +194,10 @@ const SdTable = class {
             }, style: this.getStickyStyle(colIdx) }, h("div", { class: `sd-th__content sd-th__content--${col.align || 'left'}` }, h("slot", { name: `header-cell-${col.name}` }, h("div", { class: "sd-th__content--label" }, col.label)), col.usePageMoveIcon && h("sd-icon", { name: "pageMove", size: "12", color: "#006AC1" }), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text))))))), this.resizable && typeof window !== 'undefined' && (h("div", { class: "sd-th__resizer", onMouseDown: (evt) => this.handleResize(colIdx, evt) }))))))));
     }
     render() {
-        return (h(Host, { key: '9b6b47737ddd9b97c477fb029260bbdb5088593a' }, h("div", { key: '4235585df56fb9c83606e58d2b3ad6efc7b50259', class: "sd-table__wrapper", style: {
+        return (h(Host, { key: 'a1b686469dfc58d9c57cdc975aac423cf9404012' }, h("div", { key: '8707550d614eac9649b0bb7f9842e21ebe032c45', class: "sd-table__wrapper", style: {
                 '--table-width': this.width,
                 '--table-height': this.height,
-            } }, h("div", { key: 'ea92597b3cba31951da90d3d42a7783ef043248a', class: "sd-table__container" }, h("div", { key: '95b5ef2432643b3c1386f52344e91d17dd6ba726', class: "sd-table__middle", role: "table" }, h("div", { key: '1e834ed7ce963ff0e3bc0c22c7b5d8dcd02d754d', part: "table", class: this.sdTableClasses }, this.renderHeader(), h("sd-tbody", { key: 'f7cf5c3d5e430f4259b2dae2660c38b0b0f6d17e' }, h("slot", { key: 'b21b99f21baaf9431ce653e680a59531cc275c26' })))), h("div", { key: '3fb77951c1e27c6feb13411aa56b4ac907135e24', class: "sd-table__bottom" })), this.pagination && this.innerRows.length > 0 && (h("div", { key: 'e74003c49fa592869346f28dfd10ef6acd6a64e9', class: "sd-table__pagination" }, h("sd-pagination", { key: '0284aa186f53cac17cecc45770afce1cb1675c36', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onPageChange: (e) => {
+            } }, h("div", { key: 'df9ac71cdf2decd79714a66177ec65524ce35d5a', class: "sd-table__container" }, h("div", { key: 'c4225356f08b883c82038426d923446f85edeb2b', class: "sd-table__middle", role: "table" }, h("div", { key: '3a75336a77e732a5de56d057429f072a2c946042', part: "table", class: this.sdTableClasses }, this.renderHeader(), h("sd-tbody", { key: 'c1aa8c874dfb96e411fb0b66134c5ab098629d87' }, h("slot", { key: 'f2e40bf5c0fea78af06e3cc8be3568d21e9c4f8d' })))), h("div", { key: 'a5e9382c17261d4f11e4ab9be2b26e6154677a03', class: "sd-table__bottom" })), this.pagination && this.innerRows.length > 0 && (h("div", { key: 'f96b29f77f639184d674b3ea3ae7e28e620db1fb', class: "sd-table__pagination" }, h("sd-pagination", { key: 'e21505112e7b31904c1fde0985443f2e43544a2e', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onPageChange: (e) => {
                 if (!this.useInternalPagination) {
                     this.sdPageChange.emit(e.detail);
                 }
@@ -205,7 +205,7 @@ const SdTable = class {
                     this.currentPage = e.detail;
                     this.sdPageChange.emit(this.currentPage);
                 }
-            } }), this.useRowsPerPageSelect && (h("sd-select", { key: '23a648a6581bee5cf755afbb9146bf2090e6be65', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdChange: (e) => {
+            } }), this.useRowsPerPageSelect && (h("sd-select", { key: '32890039f67ebda027e336a31ab790141ec2c7c2', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdChange: (e) => {
                 const changedRowsPerPage = e.detail.value ? Number(e.detail.value) : 0;
                 if (!this.useInternalPagination) {
                     this.sdRowsPerPageChange.emit(changedRowsPerPage);

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

@@ -43,7 +43,7 @@ const SdTag = class {
     }
     render() {
         const tagClasses = this.getTagClasses();
-        return (h("span", { key: '982a1d00b05ea1978c001d0898b8d95a57f92ff5', class: tagClasses, style: {
+        return (h("span", { key: '3ab30b01fbf0c25426e7903ed05372399c380a01', class: tagClasses, style: {
                 '--tag-bg-color': this.bgColor,
                 '--tag-text-color': this.textColor,
             }, "aria-label": this.label || 'tag' }, this.renderContent()));

package/dist/types/components/sd-toggle/sd-toggle.d.ts

@@ -0,0 +1,14 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class SdToggle {
+    value: boolean;
+    label: string;
+    disabled: boolean;
+    private isChecked;
+    sdChange: EventEmitter<boolean>;
+    componentWillLoad(): void;
+    componentWillRender(): void;
+    private updateCheckedState;
+    private get toggleClasses();
+    private handleChange;
+    render(): any;
+}

package/dist/types/components.d.ts

@@ -828,6 +828,20 @@ export namespace Components {
     }
     interface SdTh {
     }
+    interface SdToggle {
+        /**
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * @default ''
+         */
+        "label": string;
+        /**
+          * @default false
+         */
+        "value": boolean;
+    }
     interface SdTooltip {
         /**
           * @default 'sm'
@@ -971,6 +985,10 @@ export interface SdTableBackupCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLSdTableBackupElement;
 }
+export interface SdToggleCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLSdToggleElement;
+}
 export interface SdTooltipPortalCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLSdTooltipPortalElement;
@@ -1353,6 +1371,23 @@ declare global {
         prototype: HTMLSdThElement;
         new (): HTMLSdThElement;
     };
+    interface HTMLSdToggleElementEventMap {
+        "sdChange": boolean;
+    }
+    interface HTMLSdToggleElement extends Components.SdToggle, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLSdToggleElementEventMap>(type: K, listener: (this: HTMLSdToggleElement, ev: SdToggleCustomEvent<HTMLSdToggleElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLSdToggleElementEventMap>(type: K, listener: (this: HTMLSdToggleElement, ev: SdToggleCustomEvent<HTMLSdToggleElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLSdToggleElement: {
+        prototype: HTMLSdToggleElement;
+        new (): HTMLSdToggleElement;
+    };
     interface HTMLSdTooltipElement extends Components.SdTooltip, HTMLStencilElement {
     }
     var HTMLSdTooltipElement: {
@@ -1411,6 +1446,7 @@ declare global {
         "sd-tbody": HTMLSdTbodyElement;
         "sd-td": HTMLSdTdElement;
         "sd-th": HTMLSdThElement;
+        "sd-toggle": HTMLSdToggleElement;
         "sd-tooltip": HTMLSdTooltipElement;
         "sd-tooltip-portal": HTMLSdTooltipPortalElement;
         "sd-tr": HTMLSdTrElement;
@@ -2250,6 +2286,21 @@ declare namespace LocalJSX {
     }
     interface SdTh {
     }
+    interface SdToggle {
+        /**
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * @default ''
+         */
+        "label"?: string;
+        "onSdChange"?: (event: SdToggleCustomEvent<boolean>) => void;
+        /**
+          * @default false
+         */
+        "value"?: boolean;
+    }
     interface SdTooltip {
         /**
           * @default 'sm'
@@ -2354,6 +2405,7 @@ declare namespace LocalJSX {
         "sd-tbody": SdTbody;
         "sd-td": SdTd;
         "sd-th": SdTh;
+        "sd-toggle": SdToggle;
         "sd-tooltip": SdTooltip;
         "sd-tooltip-portal": SdTooltipPortal;
         "sd-tr": SdTr;
@@ -2391,6 +2443,7 @@ declare module "@stencil/core" {
             "sd-tbody": LocalJSX.SdTbody & JSXBase.HTMLAttributes<HTMLSdTbodyElement>;
             "sd-td": LocalJSX.SdTd & JSXBase.HTMLAttributes<HTMLSdTdElement>;
             "sd-th": LocalJSX.SdTh & JSXBase.HTMLAttributes<HTMLSdThElement>;
+            "sd-toggle": LocalJSX.SdToggle & JSXBase.HTMLAttributes<HTMLSdToggleElement>;
             "sd-tooltip": LocalJSX.SdTooltip & JSXBase.HTMLAttributes<HTMLSdTooltipElement>;
             "sd-tooltip-portal": LocalJSX.SdTooltipPortal & JSXBase.HTMLAttributes<HTMLSdTooltipPortalElement>;
             "sd-tr": LocalJSX.SdTr & JSXBase.HTMLAttributes<HTMLSdTrElement>;