@sellmate/design-system 1.0.0 → 1.0.2

package/hydrate/index.mjs

@@ -3792,7 +3792,7 @@ class SdBadge {
     label = '';
     render() {
         const resolvedColor = resolveColor(this.color);
-        return (hAsync(Host, { key: '8e74db398e9dafb57d276ef22ee8ab5891526e15', style: { '--sd-badge-color': resolvedColor } }, hAsync("div", { key: '23d4800224630f028e26b43e672ec6a33b4d2f28', class: `sd-badge sd-badge--${this.size}` }, hAsync("div", { key: '376446696e366a9b6e1f816a45fcf073ef967c6d', class: "sd-badge__dot" }), hAsync("div", { key: '750ab1c9792fa8174cf5ecdeb0c709bfaff2294a', class: "sd-badge__label" }, this.label))));
+        return (hAsync(Host, { key: '8eb13329f88c90812a23ba041a5700380094bacc', style: { '--sd-badge-color': resolvedColor } }, hAsync("div", { key: 'aab9f3bf7db3938719b67caca19bc8df9afceb95', class: `sd-badge sd-badge--${this.size}` }, hAsync("div", { key: '0ecea50ca06c4c9925ccb4bcde1faa0f85289c29', class: "sd-badge__dot" }), hAsync("div", { key: '8458b333558c33d7950ccb4354a7207e4d059671', class: "sd-badge__label" }, this.label))));
     }
     static get style() { return sdBadgeCss(); }
     static get cmpMeta() { return {
@@ -3889,7 +3889,7 @@ class SdCard {
     bordered = true;
     cardClassName = '';
     render() {
-        return (hAsync(Host, { key: 'f7012e01206131628820f41ede93ce68cb121fe4', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.cardClassName}` }, hAsync("slot", { key: '5b978729afb2cf6fef8a8ad696029ef09dbb0dd9' })));
+        return (hAsync(Host, { key: '3182001dcfc5347e3995a31d8e333e01f285df5a', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.cardClassName}` }, hAsync("slot", { key: 'e2824b9cd65b9c4ba668f7f3ba933a361405b822' })));
     }
     static get style() { return sdCardCss(); }
     static get cmpMeta() { return {
@@ -4203,7 +4203,7 @@ class SdDatePicker {
         this.isOpen = false;
     };
     render() {
-        return (hAsync(Host, { key: '4eccf6134d01546c9a47ddc3806233dd68195a8a', class: { 'sd-date-picker': true, 'sd-date-picker--disabled': this.disabled } }, hAsync("sd-input", { key: 'f1c015db2efd3801792266d7abb6391e2751c225', ref: el => (this.inputEl = el), value: this.value, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-picker__input", onClick: () => this.openMenu() }, hAsync("sd-icon", { key: '671f3d5166618228d2018477b4b9f1b3c13fa312', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (hAsync("sd-portal", { key: 'ca295d75db67328d189fefd16e3598f0a4b1b5fe', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, hAsync("div", { key: 'c9b0d87465936760ecf0453cfb5dad00247b7612', class: "sd-date-picker__menu" }, hAsync("div", { key: 'fac0f5d91634d394cecda4c1a149103e12e210c6', class: "sd-date-picker__header" }, hAsync("div", { key: '2f55a9ec84e74135a7c1f8c1925f557ad85e43a8', class: "year-nav" }, hAsync("button", { key: '811d3eab71e03c23214d3da2e829d62af73c8828', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, hAsync("sd-icon", { key: '60bb560ea0aedc61a6ba7565b4f8daf95a33c9cf', name: "arrowLeft", size: "12", color: "#CCCCCC" })), hAsync("span", { key: '976c256e704793d39e98a3e80ac0eb536a32b361', class: "year-nav__current" }, this.currentYear), hAsync("button", { key: '32ecf743b29434b1aeb9ef72d49a2254acd4e514', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, hAsync("sd-icon", { key: 'a70f679e27d00db53047b387fa9d16520cb0369f', name: "arrowRight", size: "12", color: "#CCCCCC" }))), hAsync("div", { key: '1d5e17dd8b4c0081a2cda2991e8e0055f0c4d24d', class: "month-nav" }, hAsync("button", { key: '3fa7edc4eb796e298b12ea64ac1aa0d83bf6ddb1', type: "button", name: "prev-month", title: "Previous       ", onClick: () => this.handleUpdateMonth('prev') }, hAsync("sd-icon", { key: '3d6ed03bb28a1ccb711c97d31ff6d667ada8c410', name: "arrowLeft", size: "12", color: "#CCCCCC" })), hAsync("span", { key: '5b3b1c05eb303ff7cb4a7ad599abd45747822589', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), hAsync("button", { key: '6718f389605d55f7c08934360171b61a28e2646d', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, hAsync("sd-icon", { key: '8216564c82d61220f8d99bc9759a83994839a836', name: "arrowRight", size: "12", color: "#CCCCCC" })))), hAsync("div", { key: 'd3e9f16ec52b5ba82af3c5349966402c271ddb00', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (hAsync("div", { key: day, class: "day" }, day)))), hAsync("div", { key: 'a2b2b56fefcecc67a06b5db9ae0a7767cca163f5', class: "sd-date-picker__body" }, [
+        return (hAsync(Host, { key: '9e98df6d7c18ca302385b2305ad1224819f51a48', class: { 'sd-date-picker': true, 'sd-date-picker--disabled': this.disabled } }, hAsync("sd-input", { key: '647c796797c4fca9d1d7560258acb0ad0529aa4b', ref: el => (this.inputEl = el), value: this.value, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-picker__input", onClick: () => this.openMenu() }, hAsync("sd-icon", { key: 'ee168dc3a5494de5140f524bacf65cfe8b92c666', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (hAsync("sd-portal", { key: '9edef448710cb08c9c80ce5d70e23fc286eff656', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, hAsync("div", { key: 'f717e1a9505ebe9b991707f45fc374cf456dfb87', class: "sd-date-picker__menu" }, hAsync("div", { key: '597e7523a0ee808e13c7ce54983abb391f27b259', class: "sd-date-picker__header" }, hAsync("div", { key: 'f46e44f7336d6332190d5c92b654faa34da71fcb', class: "year-nav" }, hAsync("button", { key: 'c2e849c39d6ffcc144fb5cac20224f497f3698b8', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, hAsync("sd-icon", { key: '454a351069797007019657f1239aab5f2b0be482', name: "arrowLeft", size: "12", color: "#CCCCCC" })), hAsync("span", { key: '7cd18da8a3e2220b583f0cb35eca4096f8770275', class: "year-nav__current" }, this.currentYear), hAsync("button", { key: 'd589b992604fcd958a342de1cfa548a2cee51c36', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, hAsync("sd-icon", { key: 'fca1aecf9cfcfe0aa350cfe7a39837524aeebf4f', name: "arrowRight", size: "12", color: "#CCCCCC" }))), hAsync("div", { key: '2d62f23c487d673e0efcfa8bacff56f8076c90de', class: "month-nav" }, hAsync("button", { key: '83149c7f67f68972b662981464db444e75cf3513', type: "button", name: "prev-month", title: "Previous       ", onClick: () => this.handleUpdateMonth('prev') }, hAsync("sd-icon", { key: '039d63c5770614e29305ecda288d7f26ec2f74cc', name: "arrowLeft", size: "12", color: "#CCCCCC" })), hAsync("span", { key: '97be0d41c505853e6ebb3f5481b81e6f3f1694c2', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), hAsync("button", { key: '02f53526b005c29a7118f3a7bf93691262c57421', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, hAsync("sd-icon", { key: '16552dcf8dea941badad716f90c86f968cfdf312', name: "arrowRight", size: "12", color: "#CCCCCC" })))), hAsync("div", { key: 'c4e35720676d4fc0bd7b8903082f24f00b34036d', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (hAsync("div", { key: day, class: "day" }, day)))), hAsync("div", { key: 'b69032b67e0bcc6885a789c2ce1b181abf68979a', class: "sd-date-picker__body" }, [
             ...this.calendar.prevMonthDays,
             ...this.calendar.days,
             ...this.calendar.afterMonthDays,
@@ -4395,10 +4395,10 @@ class SdDateRangePicker {
         this.setHoverDate(hoverDate);
     }
     render() {
-        return (hAsync(Host, { key: '1ac991910d1613bf142520081212be747bbeafd4', class: {
+        return (hAsync(Host, { key: '475b3135158233bce6f200f47c860790b3b68933', class: {
                 'sd-date-range-picker': true,
                 'sd-date-range-picker--disabled': this.disabled,
-            } }, hAsync("sd-input", { key: 'a9088dd29923544f749e09678856376dc8606f7d', ref: el => (this.inputEl = el), value: !!this.dateRange[0] ? `${this.dateRange[0]} ~ ${this.dateRange[1]}` : '', label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-range-picker__input", onClick: () => this.openMenu() }, hAsync("sd-icon", { key: '866ba94372f088fab53a01e0f13fc883356f6586', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (hAsync("sd-portal", { key: '95ab0375cf56201bd285c522844d7fa387ae7fc9', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.closeMenu }, hAsync("div", { key: 'fc7bb357b66b7e70ce3351ab6861b778a00eb6d8', class: "sd-date-range-picker__menu" }, hAsync("div", { key: '852ff12fdb66c008b92d7c2e828a6a7a952e7afe', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, hAsync("button", { key: '980cb27f0c9e1629b5cf85060b47845db0e1f9b7', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, hAsync("sd-icon", { key: '7bc19cc051ff2af8fadf4eb7b389456fae03f060', name: "arrowLeft", size: "12", color: "#CCCCCC" })), hAsync("div", { key: '4836b382280bf948afa7ed85eeb024052fd86aab', class: "header-label" }, this.prevYear), hAsync("button", { key: 'fe7b4f50bb0515c8dd294274792dbbe3baca3af7', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, hAsync("sd-icon", { key: '2f86e0b14db96213954cf17282bcc66ed0b80ded', name: "arrowRight", size: "12", color: "#CCCCCC" }))), hAsync("div", { key: '0d63ed5aef2ede30dd88dd25b3314e4ec8ae79ce', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index) => (hAsync(Fragment, null, index === 1 && hAsync("div", { class: "separator" }), hAsync("div", { key: index, class: "calendar-container" }, hAsync("div", { class: "calendar-header" }, hAsync("button", { type: "button", name: "month", title: "Month", class: index === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index === 0 ? 'prev' : 'next') }, hAsync("sd-icon", { name: index === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index === 0
+            } }, hAsync("sd-input", { key: 'c6cd9405fbcc12fc772720a64b979b6ad88fe51c', ref: el => (this.inputEl = el), value: !!this.dateRange[0] ? `${this.dateRange[0]} ~ ${this.dateRange[1]}` : '', label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-range-picker__input", onClick: () => this.openMenu() }, hAsync("sd-icon", { key: '75abee918222b6e5123d3aef220f1f54cbcd63eb', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (hAsync("sd-portal", { key: '87025f908882e4199336c053f8d80de32e43764b', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.closeMenu }, hAsync("div", { key: '28c20713fe1c90610a85ca957a3cf11eb919f322', class: "sd-date-range-picker__menu" }, hAsync("div", { key: '3bfdbd8cbdc09ea4b63bf8d90e90f9b41411d2e6', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, hAsync("button", { key: 'a553069fe691b3a2498c2d4d6479746eac6e57de', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, hAsync("sd-icon", { key: '8781d59f7a8e5f3207f989c54bd5dbfcec53c616', name: "arrowLeft", size: "12", color: "#CCCCCC" })), hAsync("div", { key: '9453881cff191a277235e99a1f7c1846ddb4fb27', class: "header-label" }, this.prevYear), hAsync("button", { key: '0dcd78e180e6c57cdc6be30cd5715beec902b826', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, hAsync("sd-icon", { key: '84165b81ceba4f9da6858cea81ca0c166acc5709', name: "arrowRight", size: "12", color: "#CCCCCC" }))), hAsync("div", { key: '7f57af4b26543946d4cddd2a8dff4e679c8e84da', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index) => (hAsync(Fragment, null, index === 1 && hAsync("div", { class: "separator" }), hAsync("div", { key: index, class: "calendar-container" }, hAsync("div", { class: "calendar-header" }, hAsync("button", { type: "button", name: "month", title: "Month", class: index === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index === 0 ? 'prev' : 'next') }, hAsync("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')}`), hAsync("div", { class: "calendar-days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (hAsync("sd-date-box", { key: day, date: day, disabled: true, class: "day" })))), hAsync("div", { class: "calendar-body mt-12pxr grid grid-cols-7 gap-y-8pxr" }, [...calendar.prevMonthDays, ...calendar.days, ...calendar.afterMonthDays].map((day, idx) => (hAsync("sd-date-box", { key: `prev${day}_${idx}`, date: !day ? '' : Number(day), selected: this.dateRange.some(date => date === this.formatDate(index, Number(day))), type: this.getDateBoxType(this.formatDate(index, Number(day))), isToday: today === this.formatDate(index, Number(day)), disabled: !day ? true : this.isDisabledDate(this.formatDate(index, Number(day))), inRange: this.isDateInRange(this.formatDate(index, Number(day))), isStartDate: this.dateRange[0] === this.formatDate(index, Number(day)), isEndDate: this.dateRange[1] === this.formatDate(index, Number(day)), onClick: () => this.handleDateClick(index, Number(day)), onMouseOver: () => this.handleDateHover(index, Number(day)) }))))))))))))));
     }
@@ -4428,7 +4428,7 @@ class SdDateRangePicker {
     }; }
 }
 
-const sdFieldCss = () => `.sd-field{display:inline-flex;flex-flow:column nowrap;height:fit-content;width:fit-content}.sd-field *:focus,.sd-field *:focus-visible,.sd-field *:focus-within{outline:none !important}.sd-field:not(.sd-field--disabled):hover .sd-field__control{border:1px solid #0075ff !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}.sd-field.sd-field--disabled{cursor:not-allowed}.sd-field.sd-field--disabled .sd-field__wrapper{cursor:not-allowed !important}.sd-field.sd-field--disabled .sd-field__wrapper .sd-field__label-inside{border-color:#cccccc;color:#888888;cursor:not-allowed !important}.sd-field.sd-field--disabled .sd-field__wrapper .sd-field__control{background-color:#eeeeee;border-color:#cccccc;color:#888888;cursor:not-allowed !important}.sd-field--has-label .sd-field__wrapper .sd-field__label{display:flex;align-items:center;margin-right:12px}.sd-field--has-label .sd-field__wrapper .sd-field__label__required-icon{margin-right:4px}.sd-field--has-label .sd-field__wrapper .sd-field__label__text{font-size:12px;line-height:20px;color:#333333;white-space:nowrap}.sd-field--has-label .sd-field__wrapper .sd-field__label__tooltip{margin-left:2px}.sd-field--has-label-inside .sd-field__wrapper .sd-field__label{margin-right:0;display:flex;align-items:center;justify-content:center;padding:3px 12px;border:1px solid #cccccc;border-right:none;border-radius:4px 0 0 4px;border-color:#aaaaaa;background-color:#f6f6f6}.sd-field__wrapper{width:var(--field-width, 200px);height:28px;display:flex;align-items:center;flex-flow:row nowrap;position:relative;color:#333333;cursor:pointer;-webkit-user-select:none;user-select:none}.sd-field__wrapper .sd-field__control{position:relative;width:100%;height:100%;display:flex;flex:1;border:1px solid #aaaaaa;border-radius:4px;background:white}.sd-field__wrapper .sd-field__control--label-inside{border-top-left-radius:0px;border-bottom-left-radius:0px}.sd-field--error:not(:hover) .sd-field__wrapper .sd-field__control{border:1px solid #fb4444 !important}.sd-field.sd-field--focus .sd-field__wrapper .sd-field__control,.sd-field.sd-field--hover .sd-field__wrapper .sd-field__control{border:1px solid #0075ff !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}.sd-field .sd-field__error-message{color:#fb4444;font-size:12px;line-height:20px;margin-top:4px}`;
+const sdFieldCss = () => `.sd-field{display:inline-flex;flex-flow:column nowrap;height:fit-content;width:100%}.sd-field *:focus,.sd-field *:focus-visible,.sd-field *:focus-within{outline:none !important}.sd-field:not(.sd-field--disabled):hover .sd-field__control{border:1px solid #0075ff !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}.sd-field.sd-field--disabled{cursor:not-allowed}.sd-field.sd-field--disabled .sd-field__wrapper{cursor:not-allowed !important}.sd-field.sd-field--disabled .sd-field__wrapper .sd-field__label-inside{border-color:#cccccc;color:#888888;cursor:not-allowed !important}.sd-field.sd-field--disabled .sd-field__wrapper .sd-field__control{background-color:#eeeeee;border-color:#cccccc;color:#888888;cursor:not-allowed !important}.sd-field--has-label .sd-field__wrapper .sd-field__label{display:flex;align-items:center;margin-right:12px}.sd-field--has-label .sd-field__wrapper .sd-field__label__required-icon{margin-right:4px}.sd-field--has-label .sd-field__wrapper .sd-field__label__text{font-size:12px;line-height:20px;color:#333333;white-space:nowrap}.sd-field--has-label .sd-field__wrapper .sd-field__label__tooltip{margin-left:2px}.sd-field--has-label-inside .sd-field__wrapper .sd-field__label{margin-right:0;display:flex;align-items:center;justify-content:center;padding:3px 12px;border:1px solid #cccccc;border-right:none;border-radius:4px 0 0 4px;border-color:#aaaaaa;background-color:#f6f6f6}.sd-field__wrapper{width:var(--field-width, 200px);height:28px;display:flex;align-items:center;flex-flow:row nowrap;position:relative;color:#333333;cursor:pointer;-webkit-user-select:none;user-select:none}.sd-field__wrapper .sd-field__control{position:relative;width:100%;height:100%;display:flex;flex:1;border:1px solid #aaaaaa;border-radius:4px;background:white}.sd-field__wrapper .sd-field__control--label-inside{border-top-left-radius:0px;border-bottom-left-radius:0px}.sd-field--error:not(:hover) .sd-field__wrapper .sd-field__control{border:1px solid #fb4444 !important}.sd-field.sd-field--focus .sd-field__wrapper .sd-field__control,.sd-field.sd-field--hover .sd-field__wrapper .sd-field__control{border:1px solid #0075ff !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}.sd-field .sd-field__error-message{color:#fb4444;font-size:12px;line-height:20px;margin-top:4px}`;
 
 const FORM_PARENT_TAGS = [
     'sd-select',
@@ -4495,10 +4495,10 @@ class SdField {
         return null;
     }
     registerToForm() {
-        if (!this.rules || this.rules.length === 0) {
-            console.warn('[sd-form-field] rules prop is required for sd-form integration');
-            return;
-        }
+        // if (!this.rules || this.rules.length === 0) {
+        //  console.warn('[sd-form-field] rules prop is required for sd-form integration');
+        //  return;
+        // }
         const formEl = this.el.closest('sd-form');
         if (!formEl)
             return;
@@ -4547,15 +4547,15 @@ class SdField {
         }
     }
     render() {
-        return (hAsync(Host, { key: '16609b3313318dfc4db917a32bd44e6e2cb2f4e7', class: {
+        return (hAsync(Host, { key: '8d4368c9802a01a58872ae1467d6183bb6a1d1d3', class: {
                 'sd-field': true,
                 'sd-field--has-label': !!this.label,
                 'sd-field--has-label-inside': !!this.label && this.insideLabel,
                 [this.fieldStatus]: !!this.fieldStatus,
-            } }, hAsync("div", { key: '5c3056123cb54f8d6c26406ae76b13219d289f9c', class: "sd-field__wrapper" }, this.renderLabel(this.label), hAsync("div", { key: '786bcd6ec3651bb226013474fae112c592ec6890', class: {
+            } }, hAsync("div", { key: '86a8ae1ee6f2b56bbff2a0dda2f4c87e8cec74bd', class: "sd-field__wrapper" }, this.renderLabel(this.label), hAsync("div", { key: 'c32b068f6459d326af29e2666a3ff17882c02c11', class: {
                 'sd-field__control': true,
                 'sd-field__control--label-inside ': !!this.label && this.insideLabel,
-            } }, hAsync("slot", { key: '60ae2f97cc7225930df9d17958fe78d3dd8e01e3' }))), this.errorMsg && hAsync("div", { key: '4984f7e64c6c6611063c46b5c7ea21a0ae0b5343', class: "sd-field__error-message" }, this.errorMsg)));
+            } }, hAsync("slot", { key: 'a636756df1b20b4fa0b785cba57e96a7695ff103' }))), this.errorMsg && hAsync("div", { key: 'da410dd97d83a910d6819410878349144ed1af0e', class: "sd-field__error-message" }, this.errorMsg)));
     }
     renderLabel(label) {
         if (!label)
@@ -4591,7 +4591,7 @@ class SdField {
     }; }
 }
 
-const sdFilePickerCss = () => `sd-file-picker{display:inline-flex}.sd-file-picker{display:inline-flex;align-items:center;max-width:var(--picker-width, 100%);height:28px;gap:8px;padding:4px 8px;border:1px solid #aaaaaa;border-radius:4px;background-color:#ffffff;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;vertical-align:middle}.sd-file-picker__text{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:400;font-size:12px;line-height:20px;color:#aaaaaa}.sd-file-picker__text--active{color:#222222}.sd-file-picker__text--placeholder{color:#aaaaaa}.sd-file-picker__icon{flex-shrink:0}.sd-file-picker__clear-icon{flex-shrink:0;cursor:pointer;transition:opacity 0.2s ease}.sd-file-picker__clear-icon:hover{opacity:0.7}.sd-file-picker__input{display:none}.sd-file-picker__tooltip{position:absolute;top:calc(100% - 4px);left:50%;transform:translate(-50%);z-index:1000;white-space:nowrap;padding:8px 12px;background:rgba(0, 0, 0, 0.8);color:white;font-size:12px;line-height:18px;border-radius:4px;pointer-events:none}.sd-file-picker:hover:not(.sd-file-picker--inline):not(.sd-file-picker--disabled){background-color:#f6f6f6}.sd-file-picker--active:not(.sd-file-picker--inline):not(.sd-file-picker--disabled){background-color:#ffffff}.sd-file-picker--active:not(.sd-file-picker--inline):not(.sd-file-picker--disabled) .sd-file-picker__text{color:#222222}.sd-file-picker--disabled:not(.sd-file-picker--inline){background-color:#eeeeee;border-color:#cccccc;cursor:not-allowed !important}.sd-file-picker--disabled:not(.sd-file-picker--inline) .sd-file-picker__text{color:#888888}.sd-file-picker--inline{border:none;background-color:transparent;padding:0;height:auto}.sd-file-picker--inline .sd-file-picker__text{color:#aaaaaa}.sd-file-picker--inline:hover:not(.sd-file-picker--disabled) .sd-file-picker__text{color:#737373}.sd-file-picker--inline.sd-file-picker--active:not(.sd-file-picker--disabled) .sd-file-picker__text--active{color:#222222}.sd-file-picker--inline.sd-file-picker--disabled .sd-file-picker__text{color:#cccccc}`;
+const sdFilePickerCss = () => `sd-file-picker{display:inline-flex;width:100%}.sd-file-picker{display:inline-flex;width:100%;align-items:center;max-width:var(--picker-width, 100%);height:28px;gap:8px;padding:4px 8px;border:1px solid #aaaaaa;border-radius:4px;background-color:#ffffff;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;vertical-align:middle}.sd-file-picker__text{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:400;font-size:12px;line-height:20px;color:#aaaaaa}.sd-file-picker__text--active{color:#222222}.sd-file-picker__text--placeholder{color:#aaaaaa}.sd-file-picker__icon{flex-shrink:0}.sd-file-picker__clear-icon{flex-shrink:0;cursor:pointer;transition:opacity 0.2s ease}.sd-file-picker__clear-icon:hover{opacity:0.7}.sd-file-picker__input{display:none}.sd-file-picker__tooltip{position:absolute;top:calc(100% - 4px);left:50%;transform:translate(-50%);z-index:1000;white-space:nowrap;padding:8px 12px;background:rgba(0, 0, 0, 0.8);color:white;font-size:12px;line-height:18px;border-radius:4px;pointer-events:none}.sd-file-picker:hover:not(.sd-file-picker--inline):not(.sd-file-picker--disabled){background-color:#f6f6f6}.sd-file-picker--active:not(.sd-file-picker--inline):not(.sd-file-picker--disabled){background-color:#ffffff}.sd-file-picker--active:not(.sd-file-picker--inline):not(.sd-file-picker--disabled) .sd-file-picker__text{color:#222222}.sd-file-picker--disabled:not(.sd-file-picker--inline){background-color:#eeeeee;border-color:#cccccc;cursor:not-allowed !important}.sd-file-picker--disabled:not(.sd-file-picker--inline) .sd-file-picker__text{color:#888888}.sd-file-picker--inline{border:none;background-color:transparent;padding:0;height:auto}.sd-file-picker--inline .sd-file-picker__text{color:#aaaaaa}.sd-file-picker--inline:hover:not(.sd-file-picker--disabled) .sd-file-picker__text{color:#737373}.sd-file-picker--inline.sd-file-picker--active:not(.sd-file-picker--disabled) .sd-file-picker__text--active{color:#222222}.sd-file-picker--inline.sd-file-picker--disabled .sd-file-picker__text{color:#cccccc}`;
 
 class SdFilePicker {
     constructor(hostRef) {
@@ -4605,7 +4605,6 @@ class SdFilePicker {
     inline = false;
     multiple = false;
     accept;
-    width;
     internalValue = null;
     hovered = false;
     showTooltip = false;
@@ -4690,15 +4689,15 @@ class SdFilePicker {
     render() {
         const hasFiles = this.hasFiles();
         const displayText = this.getDisplayText();
-        return (hAsync("div", { key: 'dac7726e25ba3bf4afa0da022cb3e472a8891cec', class: {
+        return (hAsync("div", { key: 'a41d17071dc1c54af38a25c143f7df3a2f8d8f83', class: {
                 'sd-file-picker': true,
                 [this.getStatusClass()]: true,
                 'sd-file-picker--inline': this.inline,
-            }, onClick: this.handleClick, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, hAsync("input", { key: '1ab733ebf6d98ad792b7b6d06f562b014504a2fe', ref: el => (this.fileInputRef = el), type: "file", class: "sd-file-picker__input", disabled: this.disabled, multiple: this.multiple, accept: this.accept, onInput: this.handleFileChange, "aria-label": this.placeholder }), hAsync("sd-icon", { key: 'c82214c83107f01314de1eb380a421fc80af043f', name: "attachFile", size: 16, color: this.getIconColor(), class: "sd-file-picker__icon" }), hAsync("div", { key: '11f5bfca6d50fd4e78c902ddc52995b3ed399b21', ref: el => (this.fileNamesRef = el), class: {
+            }, onClick: this.handleClick, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, hAsync("input", { key: '31bd3ccd4fc132037b67d189478af6dcb5bf9c4a', ref: el => (this.fileInputRef = el), type: "file", class: "sd-file-picker__input", disabled: this.disabled, multiple: this.multiple, accept: this.accept, onInput: this.handleFileChange, "aria-label": this.placeholder }), hAsync("sd-icon", { key: 'a422d6902ec05313365d2832f1f77e7100dcf9c7', name: "attachFile", size: 16, color: this.getIconColor(), class: "sd-file-picker__icon" }), hAsync("div", { key: 'c0ef65e1d2f5e2eea86d4047b990932d711e68bb', ref: el => (this.fileNamesRef = el), class: {
                 'sd-file-picker__text': true,
                 'sd-file-picker__text--placeholder': !hasFiles,
                 'sd-file-picker__text--active': hasFiles,
-            } }, displayText), !this.disabled && hasFiles && (hAsync("sd-icon", { key: 'e429e10a285f12e16d1fa362e51903f12119bf3b', name: "close", size: 12, color: "#888888", class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (hAsync("div", { key: '1a7c924eed094fdb070ed5711a9b09aeea8f3c56', class: "sd-file-picker__tooltip" }, displayText))));
+            } }, displayText), !this.disabled && hasFiles && (hAsync("sd-icon", { key: 'b57318271a1282655a6c7f90247f6e6a1813bceb', name: "close", size: 12, color: "#888888", class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (hAsync("div", { key: 'cc913b203d72fb0240ea22d7d266953c5ef31476', class: "sd-file-picker__tooltip" }, displayText))));
     }
     static get watchers() { return {
         "value": ["valueChanged"]
@@ -4714,7 +4713,6 @@ class SdFilePicker {
             "inline": [4],
             "multiple": [4],
             "accept": [1],
-            "width": [8],
             "internalValue": [32],
             "hovered": [32],
             "showTooltip": [32]
@@ -4876,7 +4874,7 @@ class SdFloatingPopover {
         this.close.emit();
     }
     render() {
-        return hAsync("slot", { key: 'f2000891d7d3bd71982f591bf953d1421f67fb5e' });
+        return hAsync("slot", { key: '770ec3be9d1e2b830eaebfde37a664feafc3da3b' });
     }
     static get style() { return sdFloatingPortalCss(); }
     static get cmpMeta() { return {
@@ -5031,9 +5029,9 @@ class SdGuide {
     };
     render() {
         const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];
-        return (hAsync(Host, { key: 'a7a284528f1bf4c24cbf4c645c600bfdb8ac3397', style: {
+        return (hAsync(Host, { key: '3e9133e450e136c9fb34e5107d2f7fc41ee9b8fe', style: {
                 '--sd-guide-color': GUIDE_ICON[this.type].color,
-            } }, hAsync("sd-button", { key: '7a31bb752942f693d77e687b7ee433772f0fb968', 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, onClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (hAsync("sd-portal", { key: 'b90a2c0594d2b9a09aad39954400fc648b14b776', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, hAsync("div", { key: '5f74f1b359de72ce3224a6d85971dc599e9eca11', style: { position: 'absolute', width: '0px', height: '0px' } }, hAsync("div", { key: 'c7f0fea72dec238904e6ec696f0de8d7b4d99139', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, hAsync("sd-button", { key: '91d375b51051cc6689d57a22615ece587592d4cd', class: "sd-guide__popup__close", icon: "close", color: "grey_65", size: "md", variant: "ghost", noHover: true, onClick: this.closeDropdown }), hAsync("div", { key: '182d31b38da2082c18ed6d25d6879e8e5d5fc839', class: "sd-guide__popup__header" }, hAsync("sd-icon", { key: '21a45f953f436528e8a5a0d08af988cb7cbbbf0c', name: "helpOutline", size: 24, color: "green_65" }), hAsync("h3", { key: 'f6f24e6584b585fb6719327fed01bff87df8b9b9', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), hAsync("ul", { key: '87fc85b3bb2bdd0e902bd7dc81cd6e36447d5241', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
+            } }, hAsync("sd-button", { key: '9d7180ecba36835ea168f1744600447249566e4f', 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, onClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (hAsync("sd-portal", { key: '0e1bd7d6d660ae241a335da1a86c2f00974a0474', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, hAsync("div", { key: 'ca98debbce9293bb484511e4ff61c81e81278ca9', style: { position: 'absolute', width: '0px', height: '0px' } }, hAsync("div", { key: 'edbdd10359823ff83b381f8dd36103439a96bb0d', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, hAsync("sd-button", { key: '5422758a3fc4d1580355f483bfdf5701e5480e20', class: "sd-guide__popup__close", icon: "close", color: "grey_65", size: "md", variant: "ghost", noHover: true, onClick: this.closeDropdown }), hAsync("div", { key: '10f3b78d9b18961680df80a2a11f036404ce9cfb', class: "sd-guide__popup__header" }, hAsync("sd-icon", { key: '75f0a7094b5c02ae9f0c174f02414bc4a2175863', name: "helpOutline", size: 24, color: "green_65" }), hAsync("h3", { key: '5f0beea41676ea92a7fdeea7ad63aa10882da241', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), hAsync("ul", { key: 'd3f018859c31e5aa0ae3e55dd0be9bedc4d33e25', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
     }
     // 현재 2depth까지만 스타일 적용
     renderListItem(message, depth = 0) {
@@ -7078,7 +7076,7 @@ class SdIcon {
     }
     render() {
         const IconComponent = Icons[this.name]?.[this.size];
-        return (hAsync("i", { key: '851c9b6fd0ac6bc9393a21e95184e158bced5fe6', class: this.getIconClasses(), style: this.iconStyle }, hAsync(IconComponent, { key: 'a10dcad82179ba12a9e9754b0b2cdd1ef548b4a5', color: this.resolvedColor })));
+        return (hAsync("i", { key: '1c418bee61e2b1e7286c15cb489953cd6969639c', class: this.getIconClasses(), style: this.iconStyle }, hAsync(IconComponent, { key: 'cf93af4d1a911a6da2bef0cdfea104cb74627ec8', color: this.resolvedColor })));
     }
     static get style() { return sdIconCss(); }
     static get cmpMeta() { return {
@@ -7241,7 +7239,7 @@ class SdInput {
                 '--input-width': typeof this.width === 'number' ? `${this.width}px` : this.width,
             }
             : {};
-        return (hAsync("sd-field", { key: '78d338ae57d61752e8cb691197c3882f32ccfc16', name: this.name, label: this.label, insideLabel: this.insideLabel, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, useLabelRequired: this.useLabelRequired, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: inputWidth, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, hAsync("label", { key: '180c948116cb0a644d2696a46a8040cd5f19010d', class: "sd-input__content", style: { width: '100%' } }, hAsync("slot", { key: '4ead5aaaa62ac8c93d6207e04d5555e56f096a58', name: "prefix" }), hAsync("input", { key: 'd5bce7f062c7550f6204f5df416122fe8e4a40f0', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), hAsync("slot", { key: '9ab6a7556416dd5dbfea6b83f90b337366935b49', name: "suffix" }), this.clearable && this.internalValue && (hAsync("sd-icon", { key: '7a803590e461dc740feb8bb55fd69c6dc11f3b62', name: "close", color: "grey_65", size: "16", class: "sd-input__clear-icon", onClick: async () => {
+        return (hAsync("sd-field", { key: '1ea8809ec8f05e9713b26022014400811f3c4da2', name: this.name, label: this.label, insideLabel: this.insideLabel, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, useLabelRequired: this.useLabelRequired, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: inputWidth, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, hAsync("label", { key: 'f0f266bf75953342785b8296e40f7ca86018a75d', class: "sd-input__content", style: { width: '100%' } }, hAsync("slot", { key: '2fa7295a91e35292d794879432195e9cb76bce1a', name: "prefix" }), hAsync("input", { key: '5529de166855c571c385fb479f6dbfec148a6771', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), hAsync("slot", { key: '5ae1f154e1ac870c8629ebf4b2007274d591018d', name: "suffix" }), this.clearable && this.internalValue && (hAsync("sd-icon", { key: '57f515d933010326bd7f64ef74beb37df3fa7ba7', name: "close", color: "grey_65", size: "16", class: "sd-input__clear-icon", onClick: async () => {
                 this.internalValue = '';
                 await this.formField?.sdValidate();
             } })))));
@@ -7300,7 +7298,7 @@ class SdLoadingSpinner {
         return resolveColor(this.color);
     }
     render() {
-        return (hAsync(Host, { key: 'aa2f775cec2d077ec5c90f56dfe6fc7c07d66ed3' }, hAsync("svg", { key: 'eb95e64d55a79a6937eec9b34cbe3ef538c773a5', class: "sd-loading-spinner", width: "72px", height: "72px", viewBox: "25 25 50 50", style: { color: this.resolvedColor } }, hAsync("circle", { key: '3ce95d70dcdfe3a2ad83dc5fea1226e8e3948420', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
+        return (hAsync(Host, { key: '90e8d5b70e299835006b59d8240e0e0a526c14f7' }, hAsync("svg", { key: '22c2e6c4a638440fd97abc82ebcba99a26a6e13c', class: "sd-loading-spinner", width: "72px", height: "72px", viewBox: "25 25 50 50", style: { color: this.resolvedColor } }, hAsync("circle", { key: '41470486ab808e13a8d9fa0815b1a26436d6ca79', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
     }
     static get style() { return sdLoadingSpinnerCss(); }
     static get cmpMeta() { return {
@@ -7616,17 +7614,17 @@ class SdNumberInput {
         const inputStyles = {
             textAlign: this.useButton ? 'center' : 'right',
         };
-        return (hAsync(Host, { key: 'cc0a8b33a183c708f4caab8b085647666f3f6a98', style: inputWidth, onFocus: this.handleFocus, onBlur: this.handleBlur }, this.useButton ? 'use buttons' : 'dont use buttons', this.label && hAsync("div", { key: '65a9e62f1ae8d4c4f8712a93a86e5c179953d398', class: "sd-number-input__label" }, this.label), hAsync("label", { key: '25a1617e500b5c002b540215fa59c9d419468462', class: {
+        return (hAsync(Host, { key: '808776f5dac544141ffd67482d23a9e04c410900', style: inputWidth, onFocus: this.handleFocus, onBlur: this.handleBlur }, this.useButton ? 'use buttons' : 'dont use buttons', this.label && hAsync("div", { key: '0c4ebbbfbe31d9d01f1652e7a2135e56c7d8bbb1', class: "sd-number-input__label" }, this.label), hAsync("label", { key: 'c25ba6871d48f13a082f04a42e0d412e806031fc', class: {
                 'sd-number-input': true,
                 [this.getInputStatus()]: true,
                 'sd-number-input--with-buttons': this.useButton,
-            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, hAsync("input", { key: '3cdbc6d5f59a6eaa3766e38768c718ca69a2b111', ref: el => (this.nativeEl = el), class: `sd-number-input__input ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, style: inputStyles }), this.useButton && (hAsync("div", { key: '8929f899d9c3f06510fc7d7d9c9a33fbaf0786ac', class: "sd-number-input__buttons" }, hAsync("button", { key: 'd3673187beb0c5941b38b78016596519bf802935', type: "button", class: {
+            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, hAsync("input", { key: 'f2c88d5209f1886de1c7f89af8e7b1778bdc2ac1', ref: el => (this.nativeEl = el), class: `sd-number-input__input ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, style: inputStyles }), this.useButton && (hAsync("div", { key: '4c66e1a5b8880fed901aa6656e2e49ce817ae991', class: "sd-number-input__buttons" }, hAsync("button", { key: '39e2935eae836c7f209deebaa2c5ad79d8643920', type: "button", class: {
                 'sd-number-input__button': true,
                 'sd-number-input__button--decrement': true,
-            }, disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, hAsync("sd-icon", { key: 'bd0b93c426d1dbc6ca5be932f999e0fa09538571', name: "minus", size: 12, color: this.isDecrementDisabled() ? '#CCCCCC' : '#2D8DFF' })), hAsync("button", { key: 'b763da67109584b0c55dcfeaf3b2779c31c7caa4', type: "button", class: {
+            }, disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, hAsync("sd-icon", { key: 'a81ba14b5ebc2a46a2349fbb2de1015a2e1894a1', name: "minus", size: 12, color: this.isDecrementDisabled() ? '#CCCCCC' : '#2D8DFF' })), hAsync("button", { key: '2f2e8948470c699124b99e6862bf112bb79d7721', type: "button", class: {
                 'sd-number-input__button': true,
                 'sd-number-input__button--increment': true,
-            }, disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, hAsync("sd-icon", { key: '48c6fc62f19db50be1c23d65706b345a6d543d87', name: "add", size: 12, color: this.isIncrementDisabled() ? '#CCCCCC' : '#2D8DFF' })))))));
+            }, disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, hAsync("sd-icon", { key: 'c269060a857285fa060d4c4971235cc9fb4e991a', name: "add", size: 12, color: this.isIncrementDisabled() ? '#CCCCCC' : '#2D8DFF' })))))));
     }
     static get watchers() { return {
         "value": ["valueChanged"],
@@ -7740,12 +7738,12 @@ class SdPagination {
         }
     }
     render() {
-        return (hAsync("div", { key: 'de62debd728759c709660924b2d9a5691f1e60ea', class: this.paginationClasses }, hAsync("div", { key: '9da6071df92e8910fe19a9e20cdc38e2ef1e4fe7', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (hAsync("div", { class: "pagination-info" }, hAsync("span", { class: "current-page" }, this.currentPage), hAsync("span", null, "/"), hAsync("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (hAsync("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
+        return (hAsync("div", { key: '7498d55ef3206deb0c3feb22cd1da426f754eb05', class: this.paginationClasses }, hAsync("div", { key: '60918ebae391824240a8c182360751426c07c69c', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (hAsync("div", { class: "pagination-info" }, hAsync("span", { class: "current-page" }, this.currentPage), hAsync("span", null, "/"), hAsync("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (hAsync("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)))), hAsync("div", { key: '7951a5ea2aabf30619d21073cd728dffaf14b7bd', class: "append-btns" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n)))), hAsync("div", { key: 'c827cf8b7d8d8013b85487891fc768dcbe172be9', class: "append-btns" }, this.renderNextButtons())));
     }
     static get style() { return sdPaginationCss(); }
     static get cmpMeta() { return {
@@ -7799,11 +7797,11 @@ class SdPopover {
         this.showPopover = false;
     };
     render() {
-        return (hAsync(Fragment, { key: 'b968d7b33da86fc38d683e3af1b6cbcb3f3386dd' }, this.label ? (hAsync("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) })) : (hAsync("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 && (hAsync("sd-floating-portal", { key: '43b0962853e830256e7b749e6e27206a74bf08f4', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, hAsync("div", { key: '62767f979f1256937d50a6cddd5d4ddef5270005', class: {
+        return (hAsync(Fragment, { key: '56f328cfb09847d3f5968c4ed73f805f5666e258' }, this.label ? (hAsync("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) })) : (hAsync("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 && (hAsync("sd-floating-portal", { key: '8b6a8ce42c1464780fb089098fdda82600eefc86', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, hAsync("div", { key: '0cbeee5bb4a514bc2e1009d5d97c27fd8a309fd2', class: {
                 'sd-floating-menu': true,
                 [`sd-floating-menu--${this.placement}`]: true,
                 [this.menuClass]: !!this.menuClass,
-            } }, hAsync("i", { key: 'd82bdddc8945f348aebe8087390bf26d91e1e1c4', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, hAsync(TooltipArrow, { key: 'ff7ca429210d6ae88e2442299c8cea5211304e58' })), hAsync("div", { key: '366633e5f65f76126607edb52d857e1918afb0bb', class: "sd-floating-menu__content" }, this.menuTitle && hAsync("div", { key: '66b0783a3f5c4d30d33ecf496f4d0c051b44f3f1', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (hAsync("div", { key: '4f2049e9eee721f674a6c8ae4cbeb4eea9ab59bd', class: "sd-floating-menu__messages" }, this.messages.map(message => (hAsync("div", null, message))))), this.buttons.length > 0 && (hAsync("div", { key: 'da2067ba8bf0279dd914fab6124f58526edff4d4', class: `sd-floating-menu__buttons sd-floating-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (hAsync("sd-button", { ...button })))))), this.useClose && (hAsync("button", { key: '2aeb7b81e322472922802bcb6163d0913f0ee218', class: "sd-floating-menu__close-button", onClick: () => this.handleClose() }, hAsync("sd-icon", { key: '1ad55d0c8bf3c1eeedc2069f6f1bcdd75b180446', name: "close", size: "12", color: "#AAAAAA" }))))))));
+            } }, hAsync("i", { key: 'd8f244e430aaacaaa4b124d4ae613546ca3cb04a', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, hAsync(TooltipArrow, { key: 'b5a9d9878144eb0a6093a05e0c5287d2721304d8' })), hAsync("div", { key: '919c8ea1a1421f9db1b8f002704cb443e69b27dd', class: "sd-floating-menu__content" }, this.menuTitle && hAsync("div", { key: '3a1bd157db78b03e894dd9234b15a1e0a42a20ad', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (hAsync("div", { key: '775a8c45c194fce139b78bdea6cf3ea7e1d6aebd', class: "sd-floating-menu__messages" }, this.messages.map(message => (hAsync("div", null, message))))), this.buttons.length > 0 && (hAsync("div", { key: '1da478df75490f7ba81a8463cbbeea26c6cff64d', class: `sd-floating-menu__buttons sd-floating-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (hAsync("sd-button", { ...button })))))), this.useClose && (hAsync("button", { key: 'ce75525effbcc448900cbea452a9787f66447444', title: "close", class: "sd-floating-menu__close-button", onClick: () => this.handleClose() }, hAsync("sd-icon", { key: '2dc6e721412c49ff91ea60e2355be1f0143fc7fb', name: "close", size: "12", color: "gery_55" }))))))));
     }
     static get watchers() { return {
         "show": ["watchShowHandler"]
@@ -7954,7 +7952,7 @@ class SdPortal {
         this.close.emit();
     }
     render() {
-        return hAsync("slot", { key: '180911ce3dbda3a8e2576facbf0ab16b5cb0b61f' });
+        return hAsync("slot", { key: '6181685d61b1e95116316b72208702597bba2b8e' });
     }
     static get cmpMeta() { return {
         "$flags$": 772,
@@ -8011,10 +8009,10 @@ class SdProgress {
         return this.statusColor[this.progressStatus];
     }
     render() {
-        return (hAsync(Host, { key: 'fe3875178b9b621f5cb21dc030f736df71ee8f91', style: {
+        return (hAsync(Host, { key: '8990c8a3fb4c8bf0cb32dd4310e1e99519fca550', style: {
                 '--progress-color': this.progressColor,
                 '--progress-percentage': `${this.progressPercentage}%`,
-            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && hAsync("div", { key: 'bd4693197e530e6a836b076772bfd02a3c91ce3a', class: "sd-progress__label" }, this.label)));
+            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && hAsync("div", { key: '50a4d45d8658eec2b0d949b201fbf55b0d3615a4', class: "sd-progress__label" }, this.label)));
     }
     renderBarProgress() {
         return (hAsync("div", { class: `sd-progress__bar sd-progress__bar--${this.progressStatus}` }, hAsync("div", { class: ['sd-progress__bar__percent', this.progressPercentage < 100 ? 'proceed' : ''].join(' ') }), hAsync("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--left" }, this.progressPercentage, "%"), hAsync("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--right" }, this.progressPercentage, "%")));
@@ -8045,7 +8043,55 @@ class SdProgress {
     }; }
 }
 
-const sdRadioButtonGroupCss = () => `sd-radio-button-group{display:inline-block}sd-radio-button-group .sd-radio-button-group{display:flex;flex-direction:row;gap:0}sd-radio-button-group .sd-radio-button-group__option{display:flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid #cccccc;background-color:white;color:#333333;font-weight:400;transition:all 0.2s ease;position:relative;user-select:none}sd-radio-button-group .sd-radio-button-group__option input{display:none}sd-radio-button-group .sd-radio-button-group__option:not(:first-child){margin-left:-1px}sd-radio-button-group .sd-radio-button-group__option:first-child{border-radius:4px 0 0 4px}sd-radio-button-group .sd-radio-button-group__option:last-child{border-radius:0 4px 4px 0}sd-radio-button-group .sd-radio-button-group__option:only-child{border-radius:4px}sd-radio-button-group .sd-radio-button-group__option::after{content:attr(data-label);position:absolute;font-weight:400;transition:font-weight 0.2s ease}sd-radio-button-group .sd-radio-button-group__option:not(sd-radio-button-group .sd-radio-button-group__option--disabled):not(sd-radio-button-group .sd-radio-button-group__option--selected):hover{background-color:#0075ff;color:white;border-color:#0075ff;z-index:2}sd-radio-button-group .sd-radio-button-group__option:not(sd-radio-button-group .sd-radio-button-group__option--disabled):not(sd-radio-button-group .sd-radio-button-group__option--selected):hover::after{font-weight:500}sd-radio-button-group .sd-radio-button-group__option--selected{border-color:#0075ff;color:#0075ff;background-color:white;z-index:1}sd-radio-button-group .sd-radio-button-group__option--disabled{background-color:#e1e1e1;border-color:#cccccc;color:#888888;cursor:not-allowed}sd-radio-button-group .sd-radio-button-group__option:has(input:disabled){cursor:not-allowed}sd-radio-button-group .sd-radio-button-group__label{user-select:none;font-weight:500;visibility:hidden}sd-radio-button-group .sd-radio-button-group--sm .sd-radio-button-group__option{padding:4px 12px;font-size:12px;line-height:20px}sd-radio-button-group .sd-radio-button-group--md .sd-radio-button-group__option{padding:4px 20px;font-size:16px;line-height:26px}`;
+const sdRadioCss = () => `sd-radio{display:inline-flex}sd-radio.sd-radio{cursor:pointer}sd-radio.sd-radio label{display:flex;align-items:center;gap:8px;cursor:pointer}sd-radio.sd-radio label input{position:relative;appearance:none;margin:0;width:16px;height:16px;border:1px solid #888888;border-radius:50%;accent-color:#0075ff;background-color:white;cursor:pointer}sd-radio.sd-radio label input:checked{border-color:#0075ff;background-color:white}sd-radio.sd-radio label input:checked::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:10px;height:10px;border-radius:50%;background-color:#0075ff}sd-radio.sd-radio label input:disabled{border-color:#cccccc;background-color:#eeeeee}sd-radio.sd-radio label input:disabled:checked::before{background-color:#cccccc}sd-radio.sd-radio label input:not(:disabled):hover{border-color:#0075ff;background-color:#d9eaff}sd-radio.sd-radio--disabled{cursor:not-allowed !important}sd-radio.sd-radio--disabled label{cursor:not-allowed !important}sd-radio.sd-radio--disabled label input{cursor:not-allowed !important}`;
+
+class SdRadio {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.update = createEvent(this, "sdUpdate");
+    }
+    value;
+    disabled = false;
+    val;
+    label;
+    update;
+    getRadioClasses() {
+        const classes = [
+            'sd-radio',
+            String(this.val) === String(this.value) ? 'sd-radio--selected' : 'sd-radio--unselected',
+        ];
+        if (this.disabled) {
+            classes.push('sd-radio--disabled');
+        }
+        return classes.join(' ');
+    }
+    handleRadioChange(detail) {
+        if (this.disabled)
+            return;
+        console.log('detail', detail);
+        this.value = this.val;
+        this.update.emit(this.value);
+    }
+    render() {
+        return (hAsync(Host, { key: 'f288b8077193d0c1614b3c25fb9f3ebbedf0f9be', "aria-label": this.val || 'radio option', "aria-checked": String(this.val) === String(this.value) ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', class: this.getRadioClasses() }, hAsync("label", { key: `radio-${this.val}` }, hAsync("input", { key: '0f5e1cad59ec2a2c20247bec1341e58b11477699', type: "radio", name: this.val, value: String(this.val), checked: String(this.val) === String(this.value), disabled: this.disabled, onInput: ({ detail }) => this.handleRadioChange(detail) }), this.val && hAsync("span", { key: '47fd723d1ec6c6124d01341f7edbe945061dc348', class: "sd-radio-group__label" }, this.label || this.val))));
+    }
+    static get style() { return sdRadioCss(); }
+    static get cmpMeta() { return {
+        "$flags$": 768,
+        "$tagName$": "sd-radio",
+        "$members$": {
+            "value": [1544],
+            "disabled": [4],
+            "val": [1],
+            "label": [1]
+        },
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": [["value", "value"]]
+    }; }
+}
+
+const sdRadioButtonGroupCss = () => `sd-radio-button-group{display:inline-flex}sd-radio-button-group.sd-radio-button-group{flex-flow:row nowrap;gap:0}sd-radio-button-group.sd-radio-button-group .sd-radio-button-group__option{display:flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid #cccccc;background-color:white;color:#333333;font-weight:400;transition:all 0.2s ease;position:relative;-webkit-user-select:none;user-select:none}sd-radio-button-group.sd-radio-button-group .sd-radio-button-group__option input{display:none}sd-radio-button-group.sd-radio-button-group .sd-radio-button-group__option:not(:first-child){margin-left:-1px}sd-radio-button-group.sd-radio-button-group .sd-radio-button-group__option:first-child{border-radius:4px 0 0 4px}sd-radio-button-group.sd-radio-button-group .sd-radio-button-group__option:last-child{border-radius:0 4px 4px 0}sd-radio-button-group.sd-radio-button-group .sd-radio-button-group__option:only-child{border-radius:4px}sd-radio-button-group.sd-radio-button-group .sd-radio-button-group__option::after{content:attr(data-label);position:absolute;font-weight:400;transition:font-weight 0.2s ease}sd-radio-button-group.sd-radio-button-group .sd-radio-button-group__option:not(sd-radio-button-group.sd-radio-button-group .sd-radio-button-group__option--disabled):not(sd-radio-button-group.sd-radio-button-group .sd-radio-button-group__option--selected):hover{background-color:#0075ff;color:white;border-color:#0075ff;z-index:2}sd-radio-button-group.sd-radio-button-group .sd-radio-button-group__option:not(sd-radio-button-group.sd-radio-button-group .sd-radio-button-group__option--disabled):not(sd-radio-button-group.sd-radio-button-group .sd-radio-button-group__option--selected):hover::after{font-weight:500}sd-radio-button-group.sd-radio-button-group .sd-radio-button-group__option--selected{border-color:#0075ff;color:#0075ff;background-color:white;z-index:1}sd-radio-button-group.sd-radio-button-group .sd-radio-button-group__option--disabled{background-color:#e1e1e1;border-color:#cccccc;color:#888888;cursor:not-allowed}sd-radio-button-group.sd-radio-button-group .sd-radio-button-group__option:has(input:disabled){cursor:not-allowed}sd-radio-button-group.sd-radio-button-group__label{-webkit-user-select:none;user-select:none;font-weight:500;visibility:hidden}sd-radio-button-group.sd-radio-button-group--sm .sd-radio-button-group__option{padding:4px 12px;font-size:12px;line-height:20px}sd-radio-button-group.sd-radio-button-group--md .sd-radio-button-group__option{padding:4px 20px;font-size:16px;line-height:26px}`;
 
 class SdRadioButtonGroup {
     constructor(hostRef) {
@@ -8088,10 +8134,10 @@ class SdRadioButtonGroup {
     }
     groupName = this.name || `sd-radio-button-group-${crypto.randomUUID()}`;
     render() {
-        return (hAsync("div", { key: '9fe1be694f1c30e4aa71a0be00218b1c5fa4db01', class: this.getGroupClasses(), role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.radioOptions.map(option => {
+        return (hAsync(Host, { key: '32517b5b2ead37b85464a19dbb944eb2a3b65a90', class: this.getGroupClasses(), role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.radioOptions.map(option => {
             const isSelected = this.isOptionSelected(option);
             const isDisabled = this.isOptionDisabled(option);
-            return (hAsync("label", { key: `radio-${option.value}`, class: this.getButtonClasses(option), role: "radio", "aria-checked": isSelected.toString(), "aria-disabled": isDisabled.toString(), "aria-label": option.label || 'radio option', "data-label": option.label }, hAsync("input", { type: "radio", name: this.groupName, value: option.value.toString(), checked: isSelected, disabled: isDisabled, onInput: () => this.handleRadioChange(option.value, option.disabled) }), option.label && hAsync("span", { class: "sd-radio-button-group__label" }, option.label)));
+            return (hAsync("label", { key: `radio-${option.value}`, class: this.getButtonClasses(option), "aria-label": option.label || 'radio option', "data-label": option.label }, hAsync("input", { type: "radio", name: this.groupName, value: option.value.toString(), checked: isSelected, disabled: isDisabled, onInput: () => this.handleRadioChange(option.value, option.disabled) }), option.label && hAsync("span", { class: "sd-radio-button-group__label" }, option.label)));
         })));
     }
     static get style() { return sdRadioButtonGroupCss(); }
@@ -8111,7 +8157,7 @@ class SdRadioButtonGroup {
     }; }
 }
 
-const sdRadioGroupCss = () => `sd-radio-group{display:inline-block}sd-radio-group .sd-radio-group{display:flex}sd-radio-group .sd-radio-group--vertical{flex-direction:column;gap:8px}sd-radio-group .sd-radio-group--horizontal{flex-direction:row;align-items:center;gap:20px}sd-radio-group .sd-radio-group__option{width:fit-content;display:flex;align-items:center;gap:8px;font-weight:400;font-size:12px;line-height:20px;cursor:pointer}sd-radio-group .sd-radio-group__option:has(input:disabled){cursor:not-allowed}sd-radio-group .sd-radio-group__option input{position:relative;appearance:none;margin:0;width:16px;height:16px;border:1px solid #888888;border-radius:50%;cursor:pointer;accent-color:#0075ff;background-color:white}sd-radio-group .sd-radio-group__option input:checked{border-color:#0075ff;background-color:white}sd-radio-group .sd-radio-group__option input:checked::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:10px;height:10px;border-radius:50%;background-color:#0075ff}sd-radio-group .sd-radio-group__option input:disabled{cursor:not-allowed;border-color:#cccccc;background-color:#eeeeee}sd-radio-group .sd-radio-group__option input:disabled:checked::before{background-color:#cccccc}sd-radio-group .sd-radio-group__option input:not(:disabled):hover{border-color:#0075ff;background-color:#d9eaff}sd-radio-group .sd-radio-group__label{font-size:12px;color:#333333;line-height:20px;user-select:none}sd-radio-group .sd-radio-group__option--disabled{cursor:not-allowed}sd-radio-group .sd-radio-group__option--disabled .sd-radio-group__label{color:#888888}`;
+const sdRadioGroupCss = () => `sd-radio{display:inline-flex}sd-radio.sd-radio{cursor:pointer}sd-radio.sd-radio label{display:flex;align-items:center;gap:8px;cursor:pointer}sd-radio.sd-radio label input{position:relative;appearance:none;margin:0;width:16px;height:16px;border:1px solid #888888;border-radius:50%;accent-color:#0075ff;background-color:white;cursor:pointer}sd-radio.sd-radio label input:checked{border-color:#0075ff;background-color:white}sd-radio.sd-radio label input:checked::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:10px;height:10px;border-radius:50%;background-color:#0075ff}sd-radio.sd-radio label input:disabled{border-color:#cccccc;background-color:#eeeeee}sd-radio.sd-radio label input:disabled:checked::before{background-color:#cccccc}sd-radio.sd-radio label input:not(:disabled):hover{border-color:#0075ff;background-color:#d9eaff}sd-radio.sd-radio--disabled{cursor:not-allowed !important}sd-radio.sd-radio--disabled label{cursor:not-allowed !important}sd-radio.sd-radio--disabled label input{cursor:not-allowed !important}sd-radio-group{display:inline-block}sd-radio-group .sd-radio-group{display:flex}sd-radio-group .sd-radio-group--vertical{flex-direction:column;gap:8px}sd-radio-group .sd-radio-group--horizontal{flex-direction:row;align-items:center;gap:20px}`;
 
 class SdRadioGroup {
     constructor(hostRef) {
@@ -8122,52 +8168,24 @@ class SdRadioGroup {
     radioOptions = [];
     direction = 'vertical';
     disabled = false;
-    name;
-    selectedValue;
+    groupName;
     change;
-    componentWillLoad() {
-        if (this.value) {
-            this.selectedValue = this.value;
-        }
-    }
     valueChanged(newValue) {
-        this.selectedValue = newValue;
+        this.value = newValue;
     }
-    handleRadioChange = (optionValue, optionDisabled) => {
-        if (this.disabled || optionDisabled)
+    handleRadioChange = (optionValue) => {
+        if (this.disabled)
             return;
-        this.selectedValue = optionValue;
         this.value = optionValue;
-        this.change.emit(optionValue);
+        this.change?.emit(optionValue);
     };
-    isOptionSelected(option) {
-        return this.selectedValue === option.value;
-    }
-    isOptionDisabled(option) {
-        return this.disabled || !!option.disabled;
-    }
-    getRadioClasses(option) {
-        const classes = [
-            'sd-radio-group__option',
-            this.isOptionSelected(option)
-                ? 'sd-radio-group__option--selected'
-                : 'sd-radio-group__option--unselected',
-        ];
-        if (this.isOptionDisabled(option)) {
-            classes.push('sd-radio-group__option--disabled');
-        }
-        return classes.join(' ');
-    }
     getGroupClasses() {
         const classes = ['sd-radio-group', `sd-radio-group--${this.direction}`];
         return classes.join(' ');
     }
     render() {
-        const groupName = this.name || `sd-radio-group-${Math.random().toString(36).substring(2, 11)}`;
-        return (hAsync("div", { key: '9599dded7410ed41178f6cbf93aa24897cc9b030', class: this.getGroupClasses(), role: "radiogroup" }, this.radioOptions.map((option, index) => {
-            const isSelected = this.isOptionSelected(option);
-            const isDisabled = this.isOptionDisabled(option);
-            return (hAsync("label", { key: `radio-${index}`, class: this.getRadioClasses(option), role: "radio", "aria-checked": isSelected.toString(), "aria-disabled": isDisabled.toString(), "aria-label": option.label || 'radio option' }, hAsync("input", { type: "radio", name: groupName, value: option.value.toString(), checked: isSelected, disabled: isDisabled, onInput: () => this.handleRadioChange(option.value, option.disabled) }), option.label && hAsync("span", { class: "sd-radio-group__label" }, option.label)));
+        return (hAsync("div", { key: '264fed43fa10c8869762dab2b0530989e7901178', class: this.getGroupClasses(), role: "radiogroup" }, this.radioOptions.map(option => {
+            return (hAsync("sd-radio", { key: `radio-${option.value}`, val: String(option.value), value: this.value, label: option.label, disabled: this.disabled || !!option.disabled, onSdUpdate: ({ detail }) => this.handleRadioChange(detail) }));
         })));
     }
     static get watchers() { return {
@@ -8182,8 +8200,7 @@ class SdRadioGroup {
             "radioOptions": [1040],
             "direction": [1],
             "disabled": [4],
-            "name": [1],
-            "selectedValue": [32]
+            "groupName": [1, "group-name"]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -8444,7 +8461,7 @@ class SdSelect extends BaseDropdownEvent {
         }
     };
     render() {
-        return (hAsync("sd-field", { key: '507736637b3b7acee4bfef07eac7175c5e196c86', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, useLabelRequired: this.useLabelRequired, insideLabel: this.insideLabel, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, hAsync("div", { key: 'd905202201f5977d04a929af507653900af3ee75', class: {
+        return (hAsync("sd-field", { key: '5c638efb68498690a30a855e3a337fac0e6e7810', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, useLabelRequired: this.useLabelRequired, insideLabel: this.insideLabel, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, hAsync("div", { key: 'e14a4f235235fdafa94f645eac0c18091080c8e9', class: {
                 'sd-select': true,
                 'sd-select--disabled': this.disabled,
                 'sd-select--error': !!this.error,
@@ -8662,10 +8679,10 @@ class SdSelectDropdown {
         this.isScrolled = scrollTop > 0;
     };
     render() {
-        return (hAsync(Host, { key: 'de06f67bf93dce6db12fee6bce3c6b11b7ee375f', style: this.dropdownSize }, hAsync("div", { key: '42510dd6a21f1aa224f5141555c02729d09a6baf', class: {
+        return (hAsync(Host, { key: 'bfb74ca8fece27f39c48185cd087ee1efaf52cd9', style: this.dropdownSize }, hAsync("div", { key: 'c1c9f7cf52432c48e080969d2324676310d7e7f9', class: {
                 'sd-select-dropdown': true,
                 'sd-select-dropdown--ready': this.isDropdownReady,
-            }, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (hAsync("sd-select-search-input", { key: '2177a7ad0dc3ea5ded63103a55e03b9b0d4d3913', 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) => (hAsync("slot", { name: `option-${option.value}` }, hAsync("sd-select-option", { option: option, index: index, isSelected: this.isOptionSelected(option.value), isFocused: index === this.itemIndex, onOptionClick: ({ detail }) => this.optionClick.emit(detail), useCheckbox: this.useCheckbox }))))) : (hAsync("slot", { name: "option-placeholder" }, hAsync("div", { class: 'sd-select-option-placeholder' }, this.optionPlaceholder))))));
+            }, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (hAsync("sd-select-search-input", { key: 'c5d42ef925fba369b5b0361b7327fa3a1954d602', 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) => (hAsync("slot", { name: `option-${option.value}` }, hAsync("sd-select-option", { option: option, index: index, isSelected: this.isOptionSelected(option.value), isFocused: index === this.itemIndex, onOptionClick: ({ detail }) => this.optionClick.emit(detail), useCheckbox: this.useCheckbox }))))) : (hAsync("slot", { name: "option-placeholder" }, hAsync("div", { class: 'sd-select-option-placeholder' }, this.optionPlaceholder))))));
     }
     static get watchers() { return {
         "filteredOptions": ["filteredOptionsChanged"],
@@ -8847,7 +8864,7 @@ class SdSelectMultiple extends BaseDropdownEvent {
         this.handleOptionSelection(option);
     };
     render() {
-        return (hAsync("sd-field", { key: 'cc40c09b8c1ea2aa049d12857c6cc80cd5a5966b', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, useLabelRequired: this.useLabelRequired, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, hAsync("div", { key: '0d90b8368287d7e67a384234a976da5d387b065b', class: {
+        return (hAsync("sd-field", { key: '67a0bebbd4ad8ae405db1c9c1d0b9701a9b904f8', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, useLabelRequired: this.useLabelRequired, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, hAsync("div", { key: 'aa86839508c103bbe70287877020ec3eb82b7190', class: {
                 'sd-select-multiple': true,
                 'sd-select-multiple--open': this.isOpen,
                 'sd-select-multiple--disabled': this.disabled,
@@ -9307,7 +9324,7 @@ class SdSelectMultipleGroup extends BaseDropdownEvent {
         });
     }
     render() {
-        return (hAsync("sd-field", { key: '7ec71405f801265b0abf2d381491a65454c540cd', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, useLabelRequired: this.useLabelRequired, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, hAsync("div", { key: '80c1db9cd2c47e4acfece06a9b23896cc0acef88', class: {
+        return (hAsync("sd-field", { key: 'd809854ea5ad2aeebe2c6ffbedba19d6b62bb7be', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, useLabelRequired: this.useLabelRequired, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, hAsync("div", { key: '9db18413433f62c0530c6189cbcd6e11e12fc8ae', class: {
                 'sd-select-multiple-group': true,
                 'sd-select-multiple-group--open': this.isOpen,
                 'sd-select-multiple-group--disabled': this.disabled,
@@ -9431,7 +9448,7 @@ class SdSelectOption {
         }
     };
     render() {
-        return (hAsync(Host, { key: '33542be792e3345ee693a6064f9398ecd1fceda1' }, hAsync("div", { key: '408d402f5e4a845ebb896f78a557ac93ca414eaa', class: {
+        return (hAsync(Host, { key: '8324a5b292d922c4ba1104fe245863321fd222d4' }, hAsync("div", { key: 'ead9b6abf8193019d3f97dd5a1ea67ea9a735c01', class: {
                 'sd-select__option': true,
                 'sd-select__option--selected': this.isSelected,
                 'sd-select__option--disabled': !!this.option.disabled,
@@ -9517,7 +9534,7 @@ class SdSelectOptionGroup {
         }
     };
     render() {
-        return (hAsync("div", { key: '9ba2c1d9963ae5b20d8823ed4e1054f4b1ea1164', class: {
+        return (hAsync("div", { key: 'd9b8a7728bd175b90cf39a8d293ab86010e39302', class: {
                 'sd-select__option-group': true,
                 'sd-select__option-group--selected': !!this.isSelected,
                 'sd-select__option-group--disabled': !!this.option.disabled,
@@ -9526,10 +9543,10 @@ class SdSelectOptionGroup {
                 '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) }, hAsync("div", { key: '6576ff206863a28062566b816cd81955f1890ec2', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (hAsync("sd-checkbox", { key: 'ad1367ec16aff35a09bc1ca62d4981a29ad0c20e', 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) }, hAsync("div", { key: '9c4d02a88c42f2cd7c84bf9a44bc871bb021a26b', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (hAsync("sd-checkbox", { key: '7a40633ffff063a0a75359127a1ccd4d86b4a163', value: this.isSelected, disabled: this.option.disabled, onClick: e => {
                 e.preventDefault();
                 this.handleClick(this.option, this.isSelected, e);
-            } })), hAsync("span", { key: 'a51e3950353966056edd756259d3224bd588c78b', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (hAsync("span", { key: 'ed003ff2d7616096a4759b253718e5fc5a09c007', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
+            } })), hAsync("span", { key: '825638fd80e7cc41b7c0ba7af39b34df453ef729', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (hAsync("span", { key: 'fe7149a3e3a8bc94bf434b065133ba26a1698778', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
     }
     static get style() { return sdSelectOptionGroupCss(); }
     static get cmpMeta() { return {
@@ -9578,17 +9595,17 @@ class SdSelectSearchInput {
         input?.focus({ preventScroll: true });
     }
     render() {
-        return (hAsync("div", { key: '199b6bdb1da143241f5e2cf797cc0f484b38aac0', class: {
+        return (hAsync("div", { key: '82fd2b838c46c47b51b93a23e5a837708fb944b1', class: {
                 'sd-select-search-input': true,
                 'sd-select-search-input--scrolled': !!this.isScrolled,
-            }, onClick: event => event.stopPropagation() }, hAsync("sd-input", { key: 'c768d0a2324f3ea40cff3eb049ddfad3cddcb882', ref: el => (this.searchRef = el), value: this.searchText, placeholder: "\uAC80\uC0C9", clearable: true, inputStyle: { 'padding-left': '8px' }, autofocus: true, onSdUpdate: event => {
+            }, onClick: event => event.stopPropagation() }, hAsync("sd-input", { key: 'fc0821ce63f445bed3dfce51668ece1831914f86', ref: el => (this.searchRef = el), value: this.searchText, placeholder: "\uAC80\uC0C9", clearable: true, inputStyle: { 'padding-left': '8px' }, autofocus: true, onSdUpdate: event => {
                 this.searchInput.emit(String(event?.detail));
             }, onSdFocus: () => {
                 this.searchFocus.emit();
             }, onKeyDown: event => {
                 if (event.code === 'Enter')
                     event.stopPropagation();
-            } }, hAsync("sd-icon", { key: '21062cf3032b5488487b61a08753de01a5de7b98', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
+            } }, hAsync("sd-icon", { key: '6a9b19f5910132be045e3a2cc33546307e3d5cb9', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
     }
     static get style() { return sdSelectSearchInputCss(); }
     static get cmpMeta() { return {
@@ -10251,16 +10268,16 @@ class SdTable {
             }, "aria-hidden": "true" }, hAsync("div", { class: "sd-table__skeleton-cell" })));
     }
     render() {
-        return (hAsync(Host, { key: 'e6ec01e7493b69bab1bf2766d9c322cee388b274' }, hAsync("div", { key: 'cc717d111a6ce64c34b6a23b1feb9cc8933a0438', class: "sd-table__wrapper", style: {
+        return (hAsync(Host, { key: 'd9944a23c05504be55e6ac1926c0982967ea26c3' }, hAsync("div", { key: 'ab16b21be017394b9be38c65c31ffafcfb5d1699', class: "sd-table__wrapper", style: {
                 '--table-width': this.width,
                 '--table-height': this.height,
-            } }, hAsync("div", { key: '0c89a798a475bb25c10c5959b5e50c81f01503c4', class: "sd-table__container", style: {
+            } }, hAsync("div", { key: 'fe5bc2a359a2c100432213679e897b01b5c14c52', class: "sd-table__container", style: {
                 '--table-container-height': `calc(${this.height} - ${this.pagination && this.innerRows.length > 0 ? 48 : 0}px)`,
-            } }, hAsync("div", { key: 'e83ee499928d95e719ffca0411a422deeed162d0', class: {
+            } }, hAsync("div", { key: '61a7e17e93ce3427c65fc9e3dece30838720640d', class: {
                 'sd-table__middle': true,
                 'sd-table__middle--scrollable': this.paginatedRows.length > 0,
                 'sd-table__middle--loading': this.isLoading,
-            } }, this.isLoading && (hAsync("div", { key: '30d8283122a21484e0029128e637fdd9a5c6ae8c', class: "sd-table__middle--loading__spinner" }, hAsync("sd-loading-spinner", { key: '92911a08fa4d0776712e8c30be2f16d59d512cbc' }))), hAsync("table", { key: '209eb39f61bb46e9027046be619da492be2b080e', part: "table", class: this.sdTableClasses }, this.renderHead(), this.renderBody())), !this.paginatedRows.length && (hAsync("div", { key: 'cb1fccb96bb51a4e14d40c2ff286f17d8bc8ce11', class: "sd-table__bottom" }, hAsync("div", { key: '9149ee50257114145d14e0666239f72dcfc5b01a', class: "sd-table__no-data" }, hAsync("slot", { key: 'a5ead23bc5a2e32418473f6f6737f3b156177842', name: "no-data" }, this.noDataLabel))))), this.pagination && this.innerRows.length > 0 && (hAsync("div", { key: 'd5482e1bb04d20579a88841bf8d885d08c1593b1', class: "sd-table__pagination" }, hAsync("sd-pagination", { key: '65425eff37a1f2c1add27b8923cd86fe8d98ba98', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (hAsync("sd-select", { key: 'dfb3ba8654e33dc334392f37189f422d6a1f1416', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdUpdate: (e) => this.changeRowsPerPage(e.detail.value) })))))));
+            } }, this.isLoading && (hAsync("div", { key: 'ad87480a5c5e62330fe21a03d16b4d2c61f144dc', class: "sd-table__middle--loading__spinner" }, hAsync("sd-loading-spinner", { key: 'd1232190a8b326504f6d016fb72ac706a25a3697' }))), hAsync("table", { key: 'a24fe9f8fca8fac2f80c23662311baf332abe508', part: "table", class: this.sdTableClasses }, this.renderHead(), this.renderBody())), !this.paginatedRows.length && (hAsync("div", { key: '6efc9f3210295cd98b2a3ce550df4c9af99d8d2a', class: "sd-table__bottom" }, hAsync("div", { key: 'c568913f977026f3be8c7bec8a6ee448ad1e5a33', class: "sd-table__no-data" }, hAsync("slot", { key: '5906d9ad73bb4ab7311ab5b78b91d877653e2031', name: "no-data" }, this.noDataLabel))))), this.pagination && this.innerRows.length > 0 && (hAsync("div", { key: 'f736e90da9697044655d02dc0f2bfa2c19538d50', class: "sd-table__pagination" }, hAsync("sd-pagination", { key: '2f4cda699cecb5289f5de73c72038a4b4ae316e7', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (hAsync("sd-select", { key: '9b7853ce859b3b5129fb459dddfea97fc75ffe78', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdUpdate: (e) => this.changeRowsPerPage(e.detail.value) })))))));
     }
     static get watchers() { return {
         "columns": ["handleColumnsChange"],
@@ -10364,7 +10381,7 @@ class SdTabs {
         return { bgColor: '#E5E5E5', textColor: '#737373' };
     }
     render() {
-        return (hAsync("div", { key: '1f9b39d82a7a98bb9dffd522d9f703b41682ae71', class: this.getContainerClasses() }, this.tabs.map((tab, index) => {
+        return (hAsync("div", { key: '94f5cca8addf2b30907ba17a1b729c4904fd42cf', class: this.getContainerClasses() }, this.tabs.map((tab, index) => {
             const badgeColors = this.getBadgeColors(tab);
             return (hAsync("div", { key: `tab-${index}`, class: this.getTabClasses(tab), "aria-label": tab.label || 'tab', onClick: () => this.handleTabClick(tab.value) }, hAsync("span", { "data-label": tab.label, class: "sd-tabs__label" }, tab.label), tab.badge && (hAsync("sd-tag", { size: this.size, label: tab.badge.toString(), bgColor: badgeColors.bgColor, textColor: badgeColors.textColor, rounded: false }))));
         })));
@@ -10431,7 +10448,7 @@ class SdTag {
     }
     render() {
         const tagClasses = this.getTagClasses();
-        return (hAsync("span", { key: '2a25443d15ad9d0c9205455e80cf236d02cec6d9', class: tagClasses, style: {
+        return (hAsync("span", { key: '44457ea67e6c6bc78f134df71beb8d16cc069f41', class: tagClasses, style: {
                 '--tag-bg-color': this.bgColor,
                 '--tag-text-color': this.textColor,
             }, "aria-label": this.label || 'tag' }, this.renderContent()));
@@ -10544,10 +10561,10 @@ class SdTextarea {
             }
             : {};
         const maxLengthCounter = this.getMaxLengthCounter();
-        return (hAsync(Host, { key: 'db95720b6b96d950d6435b1881f95d58c6bc4637', style: textareaWidth, class: {
+        return (hAsync(Host, { key: 'e7dcaad4d684e27a8407bb8f577f8b77be9af07c', style: textareaWidth, class: {
                 'sd-textarea': true,
                 [this.getTextareaStatus()]: true,
-            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, hAsync("div", { key: '3dae36a9b56837fa7d770f295359d8ed9aa2a3e4', class: "sd-textarea__content" }, hAsync("textarea", { key: 'b9e4ff3cffc1b06e4ef6e5ffee240579c80c6d94', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, autofocus: this.autoFocus, maxLength: this.maxLength, onInput: this.handleInput.bind(this), onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event) })), this.hasFooter() && (hAsync("div", { key: 'b0de9e449897f2a8d1e6a7204d2383551d3ae2e4', class: "sd-textarea__footer" }, this.helpText !== undefined && hAsync("span", { key: 'b4528beb70095d70a030a70f451c59e511865fcb', class: "sd-textarea__help-text" }, this.helpText), maxLengthCounter !== null && hAsync("span", { key: 'ce2d33888c7bd85ea240ce00851aec7ecd945adc', class: "sd-textarea__counter" }, maxLengthCounter)))));
+            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, hAsync("div", { key: '8c7eb8c3859467d50455a6158db3f06940233d5e', class: "sd-textarea__content" }, hAsync("textarea", { key: 'e0f6d9157c8742d6c7936576e0790c8d468768c3', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, autofocus: this.autoFocus, maxLength: this.maxLength, onInput: this.handleInput.bind(this), onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event) })), this.hasFooter() && (hAsync("div", { key: '4638ad00f1101c84614c9eb3cc0eb31e539d3e03', class: "sd-textarea__footer" }, this.helpText !== undefined && hAsync("span", { key: '6761ae655b4298a6b4154e4f2b8a8883b1eeaa70', class: "sd-textarea__help-text" }, this.helpText), maxLengthCounter !== null && hAsync("span", { key: 'dc74b623c8469312b805970c42d0c38c9b2d95ad', class: "sd-textarea__counter" }, maxLengthCounter)))));
     }
     static get watchers() { return {
         "value": ["valueChanged"],
@@ -10625,10 +10642,10 @@ class SdToastMessage {
             background: resolveColor(colorTokens.background),
             text: resolveColor(colorTokens.text),
         };
-        return (hAsync(Host, { key: 'edd60b2a74bae15c88131baedaa3e913dc5326ae', style: {
+        return (hAsync(Host, { key: '6b1a8a827b4e1a09ef648f83ef707a7020b953ee', style: {
                 '--sd-toast-bg': colors.background,
                 '--sd-toast-text': colors.text,
-            } }, hAsync("div", { key: 'b41ad15e9fe7520ee8fbf683f6d95e327c59ac6c', class: this.getContainerClasses(), role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (hAsync("div", { key: 'def78fc8bc05ead9b97144dccc4f105fad953477', class: "sd-toast-message__icon" }, hAsync("sd-icon", { key: 'a01368892d295aee0339fa027663bffe31fb2c2b', name: this.icon, size: 16, color: colors.text }))), hAsync("div", { key: 'f0c6d32da360c2135aee2374b1091c27bddf4d22', class: "sd-toast-message__content" }, hAsync("span", { key: '0f1f7d81154470ad9bcc3d8d4c1ed0c0994da7bb', class: "sd-toast-message__message" }, this.message)), this.link && (hAsync("a", { key: '2a4f7b21940e2234653a18e8a677aba9586d18e3', href: this.link, class: "sd-toast-message__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (hAsync("sd-button", { key: 'd399961349429bee81fa395c555879fabef86136', class: `sd-toast-message__button ${this.type === 'basicLight' ? 'text-white' : ''}`, label: this.buttonLabel, variant: "primary", color: this.type === 'basicLight' ? 'oceanblue_75' : 'white', size: "sm", onClick: this.handleButtonClick, style: this.type !== 'basicLight' ? { '--button-text-color': resolveColor('grey_95') } : {} })), this.useClose && (hAsync("button", { key: '4bfae7573d5a5204c29d5ef0e2dc71e9a7622d62', type: "button", class: "sd-toast-message__close", onClick: this.handleClose, "aria-label": "Close", title: "Close" }, hAsync("sd-icon", { key: '7ac20a34965ee46c8af76c6c862a69269a73f1a2', name: "close", size: 12, color: colors.text }))))));
+            } }, hAsync("div", { key: 'd442a1ae33c605af863d014e61eaf0a26ba991f7', class: this.getContainerClasses(), role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (hAsync("div", { key: '477651acf80d39aecf5b47d79955aaa990815821', class: "sd-toast-message__icon" }, hAsync("sd-icon", { key: '8563a3a93cdf4e42df02b2e42305f0cba843b6e0', name: this.icon, size: 16, color: colors.text }))), hAsync("div", { key: 'ff283cf84d91688ab29a70c96e19122d3c2a48bf', class: "sd-toast-message__content" }, hAsync("span", { key: '96fa4dbf914710e1dbd5df0df860bb3b912370d9', class: "sd-toast-message__message" }, this.message)), this.link && (hAsync("a", { key: '824c896f3483d19bf6d0e1f233576101a45a123b', href: this.link, class: "sd-toast-message__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (hAsync("sd-button", { key: '74797bcfb36d5f04bcfead15cb431c709ec4654e', class: `sd-toast-message__button ${this.type === 'basicLight' ? 'text-white' : ''}`, label: this.buttonLabel, variant: "primary", color: this.type === 'basicLight' ? 'oceanblue_75' : 'white', size: "sm", onClick: this.handleButtonClick, style: this.type !== 'basicLight' ? { '--button-text-color': resolveColor('grey_95') } : {} })), this.useClose && (hAsync("button", { key: '1aa66861462bd07f5cc76e8fdaa4e24d2adeff25', type: "button", class: "sd-toast-message__close", onClick: this.handleClose, "aria-label": "Close", title: "Close" }, hAsync("sd-icon", { key: '8b8ecf1a65ae6c4ac0f8132d1f19800960244828', name: "close", size: 12, color: colors.text }))))));
     }
     static get style() { return sdToastMessageCss(); }
     static get cmpMeta() { return {
@@ -10685,7 +10702,7 @@ class SdToggle {
         this.change.emit(newValue);
     };
     render() {
-        return (hAsync("label", { key: 'ca85bc0493aff9ff17108696ddb8af29734b00f5', "aria-label": this.label || 'toggle', class: this.toggleClasses }, hAsync("input", { key: 'b99a4fa0d557968e50b302332778faaf1b46f8cc', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), this.label && hAsync("span", { key: 'e62ca806b95463c7807f82ace61b4aa0affec962', class: "sd-toggle__label" }, this.label), hAsync("div", { key: '6923da9a043df0d0d7fc0ecf2fe175857279e9b3', class: "sd-toggle__track" }, hAsync("div", { key: '090dfbcf308f26b8e200d0e2cd69d44b0f5cb8bf', class: "sd-toggle__thumb" }))));
+        return (hAsync("label", { key: 'c874dbaa2a3f3743b7f3c93a6af4efd63660f3b2', "aria-label": this.label || 'toggle', class: this.toggleClasses }, hAsync("input", { key: 'da204ac9048128501f68b3dac55c9b30bbc0cd83', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), this.label && hAsync("span", { key: '5eeb06d12bf94610a10e6000a7d0f3c750bb918f', class: "sd-toggle__label" }, this.label), hAsync("div", { key: 'bf0dd0fab7ced78f4a5728d4d1b9c8995ad1130a', class: "sd-toggle__track" }, hAsync("div", { key: '92c08a823a1b9d28814e812b7660d33ea7238a32', class: "sd-toggle__thumb" }))));
     }
     static get style() { return sdToggleCss(); }
     static get cmpMeta() { return {
@@ -10741,7 +10758,7 @@ class SdToggleButton {
         this.change.emit(newValue);
     };
     render() {
-        return (hAsync("label", { key: '9eb4abcfe8f3894198c8d8643150daa507e6f0e9', class: this.buttonClasses, "aria-label": this.label || 'toggle button' }, this.label, hAsync("input", { key: 'e3d952af461da0fac978b8ce6bd55a6990907fb3', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        return (hAsync("label", { key: '56d11c1aad1514aa11919403e81d8b4959b1bf82', class: this.buttonClasses, "aria-label": this.label || 'toggle button' }, this.label, hAsync("input", { key: 'c4316f336ea6f27b90b437e39f0410f3da052a79', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
     static get style() { return sdToggleButtonCss(); }
     static get cmpMeta() { return {
@@ -10852,6 +10869,7 @@ registerComponents([
   SdPopover,
   SdPortal,
   SdProgress,
+  SdRadio,
   SdRadioButtonGroup,
   SdRadioGroup,
   SdSelect,