@sellmate/design-system 0.0.17 → 0.0.18

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

@@ -80,9 +80,9 @@ const SdDatePicker = class {
         this.isOpen = false;
     };
     render() {
-        return (h(Host, { key: 'f445a752123f1a1a7f8d28ca7472a8ffabda9441', class: "sd-date-picker" }, h("sd-input", { key: '85662ea61b192562311af23f67c1a1ad05636813', ref: el => (this.inputEl = el), value: this.date, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", inputStyle: {
+        return (h(Host, { key: '84beddb7facbc2eaabc5b606392b30f5c1601eb6', class: "sd-date-picker" }, h("sd-input", { key: 'e8110cae23aaa71047762850ab1ac0ecad39fbf8', ref: el => (this.inputEl = el), value: this.date, 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: '41634f9170073fbde5e44c55b5985da90763f819', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: 'ce630583ef81cd72ad1b8fdaab7cab2d1df278cb', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: '55d4c73a3e17991ebf68495d7bed96399857de1e', class: "sd-date-picker__menu" }, h("div", { key: '0800e3a37eec27bb8a8c59a2ebd8ffdbf4e813a7', class: "sd-date-picker__header" }, h("div", { key: '1518b578ad87a0f5875d980d1c974492f32714e3', class: "year-nav" }, h("button", { key: 'e70f1d4e73650c7bccb1629b679ca366717e5506', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, h("sd-icon", { key: 'f679a54b76e304d08c132d6784575831a5d5d61b', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: '634dcbfe81d328cbc0460958208dc17aaf218158', class: "year-nav__current" }, this.currentYear), h("button", { key: '7e7cef51d7b47b7280cfff4234b88394708ea01a', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, h("sd-icon", { key: '8a6fc4a40f567d2d1ffef5dbc08de5148203970c', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '8fad6e92b899a0cb38398ec2f4036b959377d99b', class: "month-nav" }, h("button", { key: '3180c35ad42239a6a97480a4db860182b98724f3', type: "button", name: "prev-month", title: "Previous       ", onClick: () => this.handleUpdateMonth('prev') }, h("sd-icon", { key: '6ccef0b13fde4124e0e14959687f60dab753ae51', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: 'db7db67a1a77f02451bc0a7c97e87e3cd6c9d453', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), h("button", { key: '5df06269331e9f7ee1cb4801bfd713d433f00af4', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, h("sd-icon", { key: '65b0f49b205e9aa38a46cbe672665b31c9ffe542', name: "arrowRight", size: "12", color: "#CCCCCC" })))), h("div", { key: '68f3c05f2ffb57b7fc032209dd709e5eaa6fcbdd', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("div", { key: day, class: "day" }, day)))), h("div", { key: '452c22746ace6b3923acf4912edba2509a56b369', class: "sd-date-picker__body" }, [
+            }, onClick: () => this.openMenu() }, h("sd-icon", { key: '9668799fd1b978b8d84228cbce66020ecf9c953a', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: 'bdd3d055e108d0965fd33b39521e45d398d56657', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: '32c9bf2c90f65d7341a06f1aa885eaf5830b790d', class: "sd-date-picker__menu" }, h("div", { key: '998be0bcd3acedce805fa64b6b1d627751c7a021', class: "sd-date-picker__header" }, h("div", { key: 'fbcc16d1a914086eac22ec0769041a7cfb68c4ac', class: "year-nav" }, h("button", { key: 'a0483c5a5c11b96e4d04a8705eaeb834a67aabc1', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, h("sd-icon", { key: '417934cc7f8d3a26a1ab7f7d06c4a19cc8f71838', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: '9cc39d471b835312480483054b11bfb3a524a8a4', class: "year-nav__current" }, this.currentYear), h("button", { key: '9963b625be6c33c9a7d6c4aabce8aeac04a5e5d8', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, h("sd-icon", { key: '0414b554e1ae46b414d0829bbbbbd109241a1f0e', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '9eab999da7ef2a34f375f96ff799bf75500866da', class: "month-nav" }, h("button", { key: 'ba70f14d3344474b5faaa0778ce1838f00235880', type: "button", name: "prev-month", title: "Previous       ", onClick: () => this.handleUpdateMonth('prev') }, h("sd-icon", { key: '3c69117050d690d06071040b7b110f28368d4b2b', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: 'a3f85e24150dcfd644ac98f4075fc63b39cc389a', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), h("button", { key: '4a2e1c80dad428397120cf226807491474b9fef0', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, h("sd-icon", { key: '11f19f794d230afb29854717520dab17b90bf6e2', name: "arrowRight", size: "12", color: "#CCCCCC" })))), h("div", { key: '0dc4fb36b3395f3f626726ffc2c564b7efa7bf1f', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("div", { key: day, class: "day" }, day)))), h("div", { key: '973a4f62ac5588ad8398e668dfa9a1a5808e2860', 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: '3d95128a2a654e38ceae60e6b89482a454488286', class: "sd-date-range-picker" }, h("sd-input", { key: '4f170abfe6214ffa1044020b2cd59a9219f3ef09', 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: '7b5927d900306fe0dd51931ccc606f8cc4799298', class: "sd-date-range-picker" }, h("sd-input", { key: 'a88ecd162f6bf66d6a81b008d990741c85836702', 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: '7c12c7e3331638f333efdea4bcd3d452eb032561', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: '7312ab4a79877de6d6be3edaa404e0b9c52e28d8', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: '20a485d128de2b2d0a8043cb5fe0de990364bbd8', class: "sd-date-range-picker__menu" }, h("div", { key: '19a0489246b5dccc183f3d3a040086a6a2c565f3', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, h("button", { key: '1f9c5f1188234e2306c033e8e67f9a106b3b39bc', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, h("sd-icon", { key: '52805839d2092886fe4f07c9f95a2e948b00c917', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("div", { key: 'e9f323504223ccfbc4b5703346a310e58d1621c3', class: "header-label" }, this.prevYear), h("button", { key: '810c6fb9eaa16291550455ac1099c15da7b80ed6', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, h("sd-icon", { key: '44cf361ed854292f90c954522c356e17d5a45d29', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '4cc859482a2c010261b64b8ce15f5c754a2234fd', 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: '22dd8cf3231fd7409cf37474c839d08230daaf0d', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: 'a5067d11416437d885a42745e95f614c8b85030d', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: 'c4478289503f76363051fec4ea48eab63400da24', class: "sd-date-range-picker__menu" }, h("div", { key: '5aa461caf52b0cbcab7e9390b50988c410cac7cb', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, h("button", { key: '9ee59b3d4d08ab1bb22f1ca9a99b658d25163f2b', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, h("sd-icon", { key: '7478ca20ece1d0720c93ab809408af069c3a51e6', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("div", { key: '221890339d4c692250a5c204c8ebffd7fff86f12', class: "header-label" }, this.prevYear), h("button", { key: 'ccc70fdb3fe6a50460d8156590927edeed0f2eba', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, h("sd-icon", { key: 'e70523f34340c4948d014d861c5be107385e7181', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: 'ab67de7e6bcc992486bf030b5c648a22265ed411', 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-guide.entry.js

@@ -79,7 +79,7 @@ const SdGuide = class {
     render() {
         // const { name: iconName, size: iconSize, color: iconColor } = this.getGuidIcon();
         const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];
-        return (h(Host, { key: 'e7148c94652d2e5a05a8fbdcdccd4b5189787061' }, h("sd-button", { key: '37cfdf20a31e5b0694cfbeabf068534a4dca0a7a', ref: el => (this.guideRef = el), class: this.guideClass, variant: this.popupShow ? 'primary' : 'outline', label: GUIDE_LABEL[this.type], size: "sm", color: "grey_45", icon: iconName, iconColor: iconColor, iconSize: iconSize,
+        return (h(Host, { key: 'e6db8a6f508122254393eb1d9a1ccb5f10192e50' }, h("sd-button", { key: 'df737688c5eb29485eaec14894a051824d7c1c9b', ref: el => (this.guideRef = el), class: this.guideClass, variant: this.popupShow ? 'primary' : 'outline', label: GUIDE_LABEL[this.type], size: "sm", color: "grey_45", icon: iconName, iconColor: iconColor, iconSize: iconSize,
             // buttonStyle={{
             //  height: '28px',
             //  minHeight: '28px',
@@ -91,9 +91,9 @@ const SdGuide = class {
             //  fontWeight: '400',
             //  backgroundColor: 'var(--guide-background)',
             // }}
-            onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (h("sd-portal", { key: '00581c68ec13b7da4126d4467fc989037983cc40', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: '387ab5da8f3cebb18fb0efd4905be983dde04078', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, h("sd-button", { key: '929be3f65eed31422f40f9785abdfc1b8d658a26', class: "sd-guide__popup__close", icon: "close", color: colors.grey_65, size: "md", variant: "ghost", noHover: true,
+            onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (h("sd-portal", { key: 'badde689ee0f6cdd0c3c0406894761be779e079e', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: '5ac87ededf1b8b0ad1d5145551b74e0f2868b8a9', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, h("sd-button", { key: '6e56ea467fdad7037c8331c5a35184530101962e', 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: '6cf04080dc39b2e69cc960d832934dfd2f6e5230', class: "sd-guide__popup__header" }, h("sd-icon", { key: 'aed951b851f54d1afb8b3a1b37f47099d3df674b', name: "helpOutline", size: 24, color: colors.green_65 }), h("h3", { key: '485cfad889037e280cdd32d5616ab682f87159b1', class: "sd-guide__popup__title" }, this.label || GUIDE_LABEL[this.type])), h("ul", { key: '56b75b1d4fa43a7b08d4752a5360951a1e19dfa1', class: "sd-guide__popup__list" }, this.renderListItem(this.message)))))));
+            onSdClick: this.closeDropdown }), h("div", { key: '81414d84ee3314912035adce13afd8f559099b72', class: "sd-guide__popup__header" }, h("sd-icon", { key: 'a90da4a81d2da7065bfa3335c26efd834bd941b3', name: "helpOutline", size: 24, color: colors.green_65 }), h("h3", { key: 'f01358a92ec297782f8ab394c3fa56277d2a9af1', class: "sd-guide__popup__title" }, this.label || GUIDE_LABEL[this.type])), h("ul", { key: '9d0c130e6fdfaa3016199029d0fef5ea153153ed', class: "sd-guide__popup__list" }, this.renderListItem(this.message)))))));
     }
     // 현재 2depth까지만 스타일 적용
     renderListItem(message, depth = 0) {

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

@@ -81,12 +81,12 @@ const SdPagination = class {
         }
     }
     render() {
-        return (h("div", { key: 'ae962ed1dfbcb79c23c402d52d0a83822b54d4b3', class: this.paginationClasses }, h("div", { key: 'efa0dfbcc8d71d2b9ff5b02334a3d1e119a7f469', 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: 'c73e80cca3ae34331a653f40fcea9f21853729bc', class: this.paginationClasses }, h("div", { key: '0c1be2da1bbb9ca12ed44739c45c083da9b94657', 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: 'f0bd3b291453696e22a34f182a852a2a092874f2', class: "append-btns" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n)))), h("div", { key: '866070b571aab944f6f7521b72479c5b26fca000', class: "append-btns" }, this.renderNextButtons())));
     }
     static get watchers() { return {
         "currentPage": ["onPropChange"],
@@ -127,11 +127,11 @@ const SdTooltip = class {
             : {
                 onClick: () => (console.log('click tooltip'), (this.showTooltip = !this.showTooltip)),
             };
-        return (h(Fragment, { key: 'db5f9498990b6cc3941a1f276dc7b437f00ae3b1' }, 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: '19e133936ac7d7efc95292c0053a6eace81e7ccb', parentRef: this.buttonEl, onSdClose: () => this.handleClose(), placement: this.placement }, h("div", { key: '2d0fed8f8f2f3e6dfe860c78f4c1af99f595e4d4', class: {
+        return (h(Fragment, { key: '888e359c993244c0175ee8526015b9e142110973' }, 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: 'bd304ee555a79fac52fcd03d6c27ba158800b531', parentRef: this.buttonEl, onSdClose: () => this.handleClose(), placement: this.placement }, h("div", { key: '1c7fb484df8836ffc456029d9b394c249ab19d9d', class: {
                 'sd-tooltip-menu': true,
                 [`sd-tooltip-menu--${this.placement}`]: true,
                 'sd-tooltip-menu--with-close': this.useClose,
-            } }, h("i", { key: '6ec7ba058e541d65eae3b5100ca8eb741a04d814', class: `sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '550d0629d949f9da13117c3c569e886b44e8b9bd' })), h("div", { key: '4a1fc247b84457ee8c962804ca91bd93b4de8948', class: "sd-tooltip-menu__content" }, h("slot", { key: '444c621343b3eeba8f89e85f06b9b66e39b626b1' }, this.el.textContent)), this.useClose && (h("div", { key: '570364c37b97299922b4c52192d52d1e0e20228d', class: "sd-tooltip-menu__close-button" }, h("button", { key: '0e126ad1ed0238e8adbf7a82132e28c90bffa1a5', onClick: () => this.handleClose() }, h("sd-icon", { key: '796643e7a212b7a65f81671c46e2b992fe1ae0d1', name: "close", size: "12", color: "#AAAAAA" })))))))));
+            } }, h("i", { key: 'ea7c760b17635a7c09604d99f7d4216970c072db', class: `sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '92994ac4e8834bae876a9702f38d074dd697abee' })), h("div", { key: '979090bd76ae1a1e5a331faa03d9f670b646ec77', class: "sd-tooltip-menu__content" }, h("slot", { key: '273376d5996f788c50c6a0f5093ec766d8bb3b24' }, this.el.textContent)), this.useClose && (h("div", { key: 'a45363689d51ebdb68294ecd1b0a163a1175efe3', class: "sd-tooltip-menu__close-button" }, h("button", { key: 'b9e73e19e0e03410fdcd71924a31217b6b58bca3', onClick: () => this.handleClose() }, h("sd-icon", { key: '75d7590ef875d3aa035af095bd6cc84a61fb2a43', name: "close", size: "12", color: "#AAAAAA" })))))))));
     }
 };
 SdTooltip.style = sdTooltipCss;

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

@@ -37,11 +37,11 @@ const SdPopover = class {
         this.showPopover = false;
     };
     render() {
-        return (h(Fragment, { key: 'fb877e8d016d13fb33b49a1a4dbfed9fc01b1336' }, 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: () => (console.log('click popover'), (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: () => (console.log('click popover'), (this.showPopover = !this.showPopover)) })), this.showPopover && (h("sd-tooltip-portal", { key: '02208721da61cb84086a57c823f8e31775fdbd5e', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, h("div", { key: '3f3c4fc690dac5061bda08af37121e2b98374979', class: {
+        return (h(Fragment, { key: 'dffadde8218c26c620b641a5d95799fbfe08b34b' }, 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: () => (console.log('click popover'), (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: () => (console.log('click popover'), (this.showPopover = !this.showPopover)) })), this.showPopover && (h("sd-tooltip-portal", { key: '6cb7de8b74b9be12131a730a2d02bd304e3524e7', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, h("div", { key: '901d1fc65e9d94c29acca872c55b02128835f4de', class: {
                 'sd-popover-menu': true,
                 [`sd-popover-menu--${this.placement}`]: true,
                 [this.menuClass]: !!this.menuClass,
-            } }, h("i", { key: '6f0df95bafc2cbf564fd0e5a133c89f03c3a924b', class: `sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '535acee0be86db4ed58d6cc1631732541f1e475e' })), h("div", { key: 'd4366800a8cbd5a1f9630344a5ca4241b0eaa8dd', class: "sd-popover-menu__content" }, this.menuTitle && h("div", { key: '1cd9de3129988c5d26be0ded5b03520ab591cb9a', class: "sd-popover-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: '5aae57948bd5e0fd98e73a8ae504b77ce6cdbe07', class: "sd-popover-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: '814ac9ba0b2cf4367bb4cd5e688fa5433fee7126', 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: 'a21ad0a5e28f8609b2f9d9accd0be5d81ed9de5b', class: "sd-popover-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: '10738ec0926ea5fbc0b30b5c8c08b6cc37bf47d3', name: "close", size: "12", color: "#AAAAAA" }))))))));
+            } }, h("i", { key: '6465c9decc572754469759e6f9ba237e6098c245', class: `sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '8f65907035de80f0ac721df90a76c8cff706892e' })), h("div", { key: 'a7dedd510101561be1137fcb1f8c43dca2d13383', class: "sd-popover-menu__content" }, this.menuTitle && h("div", { key: '425038b84031c4082348d7a2d5bc3384f4ce87ea', class: "sd-popover-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: '0a07d84656579a773924b0b066c9dbd48d44c6b3', class: "sd-popover-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: 'b2daa7b83fbe582cbb829fa8b2bd8e73d3947b48', 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: '3ceae5f183e487f30570a471bdfada588519ac30', class: "sd-popover-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: '7fe6275cc500f8e963766bdfedc3f3b8a79a3609', name: "close", size: "12", color: "#AAAAAA" }))))))));
     }
     static get watchers() { return {
         "show": ["watchShowHandler"]

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

@@ -206,10 +206,10 @@ const SdTable = class {
         }))))));
     }
     render() {
-        return (h(Host, { key: '1cd1557ebe1c4c725be8a057c9d8df9cda11408f' }, h("div", { key: '977a603df44e4ce551e03edaf868c306126e5fb8', class: "sd-table__wrapper", style: {
+        return (h(Host, { key: 'c728250d385b4827eb4ba01f5f196f31d821a47a' }, h("div", { key: '53bae364e8b2e57e4da21a96f423260e4daa1258', class: "sd-table__wrapper", style: {
                 '--table-width': this.width,
                 '--table-height': this.height,
-            } }, h("div", { key: '144113aece88e6c13b3fc9fc38a77a43e49a5c10', class: "sd-table__container" }, h("div", { key: '035d74a22b20c6a3b6ebf0008f23c4581e461b1c', class: "sd-table__middle" }, h("table", { key: 'df8bc651e78ea05df59a01a3bd9b48a92246474c', part: "table", class: this.sdTableClasses }, this.renderHeader(), this.renderBody())), h("div", { key: 'db2c20fde5a53ba65be056d1c6188229fa7cb4e6', class: "sd-table__bottom" })), this.pagination && this.innerRows.length > 0 && (h("div", { key: '770d12ab7f492f203b4aeb4345afb690929ccf48', class: "sd-table__pagination" }, h("sd-pagination", { key: '67bc429e682655046403d7808b4ba601b03fcd5f', currentPage: this.currentPage, lastPage: this.lastPageNumber, onPageChange: (e) => {
+            } }, h("div", { key: '335f39cb9f01adce0b619d201cd8157c6abd6d77', class: "sd-table__container" }, h("div", { key: '0e8679571f1b06675a263a356cc2c7e7e9bcf38a', class: "sd-table__middle" }, h("table", { key: 'cdc472d67359460e73a52057dd9dc0793ff907a9', part: "table", class: this.sdTableClasses }, this.renderHeader(), this.renderBody())), h("div", { key: '183446192b9724ef85fbcbcaded436d9247f52e0', class: "sd-table__bottom" })), this.pagination && this.innerRows.length > 0 && (h("div", { key: 'd1d36cd90c3513bada8b86e38f637f318c0595ed', class: "sd-table__pagination" }, h("sd-pagination", { key: 'c6bba92b076e77f83577772ccbe54e7fc14e52dd', currentPage: this.currentPage, lastPage: this.lastPageNumber, onPageChange: (e) => {
                 this.currentPage = e.detail;
                 this.sdPageChange.emit(this.currentPage);
             } }))))));

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

@@ -43,7 +43,7 @@ const SdTag = class {
     }
     render() {
         const tagClasses = this.getTagClasses();
-        return (h("span", { key: 'eff57a253b788f0435525cae9a15881cce8a08a0', class: tagClasses, style: {
+        return (h("span", { key: '42250b22292bd0f6d6ffd4dc46ceda624a7001ba', 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-select/sd-select.d.ts

@@ -5,8 +5,9 @@ export interface SelectOption {
     label: string;
     disabled?: boolean;
 }
+export type SelectGroupOptionType = 'group' | 'subgroup' | 'item';
 export interface SelectOptionGroup extends SelectOption {
-    type: 'group' | 'subgroup' | 'item';
+    type: SelectGroupOptionType;
     parent?: string;
 }
 export interface SelectStyleProps {

package/dist/types/components/sd-select-multiple-group/sd-select-multiple-group.d.ts

@@ -61,11 +61,14 @@ export declare class SdSelectMultipleGroup extends BaseDropdownEvent {
         isSelected: boolean | null;
     }) => void;
     private filterOptions;
+    private addParentGroups;
     private getSelectedOption;
     private handleDropdownScroll;
     private getNativeInputElement;
     private handleOptionSelection;
+    private getAllItemsUnderOption;
     private isAllChildrenSelected;
+    private getChildrenOptions;
     closeDropdown(): void;
     private scrollToOption;
     render(): any;

package/dist/types/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.d.ts

@@ -11,6 +11,11 @@ export declare class SdSelectOptionGroup {
     };
     disabled: boolean;
     useCheckbox: boolean;
+    useIndicator?: boolean;
+    countInfo?: {
+        selectedCount: number;
+        totalCount: number;
+    };
     isHovered: boolean;
     isDisabled(): Promise<boolean>;
     optionClick: EventEmitter<{

package/dist/types/components.d.ts

@@ -531,6 +531,10 @@ export namespace Components {
         "useCheckbox": boolean;
     }
     interface SdSelectOptionGroup {
+        /**
+          * @default {   selectedCount: 0,   totalCount: 0,  }
+         */
+        "countInfo"?: { selectedCount: number; totalCount: number };
         /**
           * @default false
          */
@@ -551,6 +555,10 @@ export namespace Components {
           * @default false
          */
         "useCheckbox": boolean;
+        /**
+          * @default true
+         */
+        "useIndicator"?: boolean;
     }
     interface SdTable {
         "bodyCellRenderer"?: (
@@ -1614,6 +1622,10 @@ declare namespace LocalJSX {
         "useCheckbox"?: boolean;
     }
     interface SdSelectOptionGroup {
+        /**
+          * @default {   selectedCount: 0,   totalCount: 0,  }
+         */
+        "countInfo"?: { selectedCount: number; totalCount: number };
         /**
           * @default false
          */
@@ -1639,6 +1651,10 @@ declare namespace LocalJSX {
           * @default false
          */
         "useCheckbox"?: boolean;
+        /**
+          * @default true
+         */
+        "useIndicator"?: boolean;
     }
     interface SdTable {
         "bodyCellRenderer"?: (