@sellmate/design-system 0.0.49 → 0.0.51

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

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

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

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

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

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

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

@@ -213,11 +213,11 @@ const SdSelectMultiple = class extends BaseDropdownEvent {
             '--select-width': this.width || '200px',
             '--select-dropdown-height': this.dropdownHeight || '260px',
         };
-        return (h(Host, { key: '71bf4aa9bb298ddd42fa2df53ffcaa75acd17811', style: style }, h("div", { key: '9f0970babd424f097b82acab1e93d4922cd5a36e', class: {
+        return (h(Host, { key: '356e513b8d7e856ed22d5358027b163463d55c1d', style: style }, h("div", { key: '3a75650badea618ed89899de57fbd25c020df6d0', class: {
                 'sd-select-multiple': true,
                 'sd-select-multiple--open': this.isOpen,
                 'sd-select-multiple--disabled': this.disabled,
-            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), h("div", { key: '57d243584fdf590139ec3436c473d54daa477e36', class: "sd-select-multiple__container" }, this.renderTrigger(), this.renderDropdown()))));
+            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), h("div", { key: 'e42235a132e3c13e9a996206ab7f58698ab97fe1', class: "sd-select-multiple__container" }, this.renderTrigger(), this.renderDropdown()))));
     }
     renderLabel(label) {
         if (!label)

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

@@ -46,7 +46,7 @@ const SdSelectOptionGroup = class {
         }
     };
     render() {
-        return (h("div", { key: '1fb3028e6869ec0d77878dd577ad9f4f711edc38', class: {
+        return (h("div", { key: '2d1e55e35c77246a2df6856b2e7053cc21aabfc5', class: {
                 'sd-select__option-group': true,
                 'sd-select__option-group--selected': !!this.isSelected,
                 'sd-select__option-group--disabled': !!this.option.disabled,
@@ -55,10 +55,10 @@ const SdSelectOptionGroup = class {
                 'sd-select__option-group--group': this.option.type === 'group',
                 'sd-select__option-group--subgroup': this.option.type === 'subgroup',
                 'sd-select__option-group--item': this.option.type === 'item',
-            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, h("div", { key: '5d2f2564587c376d4708921e5eb68bc1d41039ab', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (h("sd-checkbox", { key: '0d4e839a0a091d47f0a07f8a248fbc71cf2b67a3', checked: 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) }, h("div", { key: '33ce9985f9c94502d103d81b3678abdb732dfadb', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (h("sd-checkbox", { key: '262ec7ac68b981b5a69c21a5785c2c4ff5db7966', checked: this.isSelected, disabled: this.option.disabled, onClick: e => {
                 e.preventDefault();
                 this.handleClick(this.option, this.isSelected, e);
-            } })), h("span", { key: '6ff97d5a3c84e97a4712d98f04b4cf5a5fef1895', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (h("span", { key: '861bc3ff0ac64af5482783e7412f1ec706fe90e4', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
+            } })), h("span", { key: 'f9c89b082413da5914e166d53e1fd9bc269395ce', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (h("span", { key: 'eaec735454f0b3c102397352d7863662fa933b24', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
     }
 };
 SdSelectOptionGroup.style = sdSelectOptionGroupCss;

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

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

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

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

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

@@ -7,7 +7,7 @@ const SdTbody = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: 'f981fe2f39d8d1f292f018fba5f6f28f6606fc12' }, h("slot", { key: 'ae556a0c16e782d1842fabc1cb54a495b88f1ce5' })));
+        return (h(Host, { key: 'aa5030bb9713c355685de66e15db8b702744c0bc' }, h("slot", { key: '2bfed556b78fc92f8f6b4c574f976a7f0a3c36a8' })));
     }
 };
 SdTbody.style = sdTbodyCss;
@@ -19,7 +19,7 @@ const SdTh = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '59aee067627e3ac7c23ea5d9f9401c19a00203bd', role: "columnheader" }, h("slot", { key: 'ea015f9ebcdccd3e08aab46af4e2a8bcb46e4a3a' })));
+        return (h(Host, { key: 'a9adef2bdfd7dd0a52a55fffb40db6511db5747e', role: "columnheader" }, h("slot", { key: 'd4af30df5d6a4a9140a9d10e0f3948de088f8c18' })));
     }
 };
 SdTh.style = sdThCss;
@@ -31,7 +31,7 @@ const SdTr = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '90de593581b21ca801462331e50126899946bf43', role: "row" }, h("slot", { key: '58eb2f9b52a36495afe40899d45bd6d1ba62b5d4' })));
+        return (h(Host, { key: '18a0e95b7264b495bd15aeb7c3a704dac938e140', role: "row" }, h("slot", { key: '83ac4ded200f5e7b18a01d2055859e1093e34d6c' })));
     }
 };
 SdTr.style = sdTrCss;

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

@@ -11,11 +11,11 @@ const SdTd = class {
     tdStyle;
     tdClass;
     render() {
-        return (h(Host, { key: '3fe3f8f4ec5b068bda0edd22ebbc5c973ae75b15', role: "cell", class: {
+        return (h(Host, { key: '6459518995f28a8138b3f669876c90dd24e610c2', role: "cell", class: {
                 'sd-td': true,
                 [`sd-td--${this.align}`]: true,
                 [this.tdClass || '']: Boolean(this.tdClass),
-            }, style: this.tdStyle }, h("slot", { key: 'f94a99bafb7723389304e01f809b3003deda067c' })));
+            }, style: this.tdStyle }, h("slot", { key: 'bf51d35dee9adb6a88b29a6c51be9f73ae1ab3b5' })));
     }
 };
 SdTd.style = sdTdCss;

package/dist/types/components/sd-radio-group/sd-radio-group.d.ts

@@ -0,0 +1,24 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type RadioValue = string | number | boolean;
+export type RadioOption = {
+    label: string;
+    value: RadioValue;
+    disabled?: boolean;
+};
+export declare class SdRadioGroup {
+    value: RadioValue;
+    radioOptions: RadioOption[];
+    direction: 'horizonal' | 'vertical';
+    disabled: boolean;
+    name?: string;
+    private selectedValue;
+    sdChange: EventEmitter<RadioValue>;
+    componentWillLoad(): void;
+    valueChanged(newValue: RadioValue): void;
+    private handleRadioChange;
+    private isOptionSelected;
+    private isOptionDisabled;
+    private getRadioClasses;
+    private getGroupClasses;
+    render(): any;
+}

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

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

package/dist/types/components.d.ts

@@ -11,6 +11,7 @@ import { Type } from "./components/sd-date-box/sd-date-box";
 import { Event } from "./stencil-public-runtime";
 import { SdModalCardButtonProps } from "./components/sd-modal-card/sd-modal-card";
 import { ButtonSize as ButtonSize1, ButtonVariant as ButtonVariant1 } from "./components/sd-button/sd-button";
+import { RadioOption, RadioValue } from "./components/sd-radio-group/sd-radio-group";
 import { SelectEvents, SelectOption } from "./components/sd-select/sd-select";
 import { SelectMultipleEvents, SelectOption as SelectOption1 } from "./types/select";
 import { SelectOptionGroup } from "./components/sd-select-multiple-group/sd-select-multiple-group";
@@ -24,6 +25,7 @@ export { Type } from "./components/sd-date-box/sd-date-box";
 export { Event } from "./stencil-public-runtime";
 export { SdModalCardButtonProps } from "./components/sd-modal-card/sd-modal-card";
 export { ButtonSize as ButtonSize1, ButtonVariant as ButtonVariant1 } from "./components/sd-button/sd-button";
+export { RadioOption, RadioValue } from "./components/sd-radio-group/sd-radio-group";
 export { SelectEvents, SelectOption } from "./components/sd-select/sd-select";
 export { SelectMultipleEvents, SelectOption as SelectOption1 } from "./types/select";
 export { SelectOptionGroup } from "./components/sd-select-multiple-group/sd-select-multiple-group";
@@ -418,6 +420,22 @@ export namespace Components {
          */
         "type": 'bar' | 'spinner';
     }
+    interface SdRadioGroup {
+        /**
+          * @default 'vertical'
+         */
+        "direction": 'horizonal' | 'vertical';
+        /**
+          * @default false
+         */
+        "disabled": boolean;
+        "name"?: string;
+        /**
+          * @default []
+         */
+        "radioOptions": RadioOption[];
+        "value": RadioValue;
+    }
     interface SdSelect {
         /**
           * @default false
@@ -810,6 +828,20 @@ export namespace Components {
     }
     interface SdTh {
     }
+    interface SdToggle {
+        /**
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * @default ''
+         */
+        "label": string;
+        /**
+          * @default false
+         */
+        "value": boolean;
+    }
     interface SdTooltip {
         /**
           * @default 'sm'
@@ -921,6 +953,10 @@ export interface SdPortalCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLSdPortalElement;
 }
+export interface SdRadioGroupCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLSdRadioGroupElement;
+}
 export interface SdSelectCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLSdSelectElement;
@@ -949,6 +985,10 @@ export interface SdTableBackupCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLSdTableBackupElement;
 }
+export interface SdToggleCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLSdToggleElement;
+}
 export interface SdTooltipPortalCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLSdTooltipPortalElement;
@@ -1155,6 +1195,23 @@ declare global {
         prototype: HTMLSdProgressElement;
         new (): HTMLSdProgressElement;
     };
+    interface HTMLSdRadioGroupElementEventMap {
+        "sdChange": RadioValue;
+    }
+    interface HTMLSdRadioGroupElement extends Components.SdRadioGroup, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLSdRadioGroupElementEventMap>(type: K, listener: (this: HTMLSdRadioGroupElement, ev: SdRadioGroupCustomEvent<HTMLSdRadioGroupElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLSdRadioGroupElementEventMap>(type: K, listener: (this: HTMLSdRadioGroupElement, ev: SdRadioGroupCustomEvent<HTMLSdRadioGroupElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLSdRadioGroupElement: {
+        prototype: HTMLSdRadioGroupElement;
+        new (): HTMLSdRadioGroupElement;
+    };
     interface HTMLSdSelectElementEventMap {
         "sdChange": SelectEvents['sdChange'];
         "dropDownShow": SelectEvents['dropDownShow'];
@@ -1314,6 +1371,23 @@ declare global {
         prototype: HTMLSdThElement;
         new (): HTMLSdThElement;
     };
+    interface HTMLSdToggleElementEventMap {
+        "sdChange": boolean;
+    }
+    interface HTMLSdToggleElement extends Components.SdToggle, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLSdToggleElementEventMap>(type: K, listener: (this: HTMLSdToggleElement, ev: SdToggleCustomEvent<HTMLSdToggleElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLSdToggleElementEventMap>(type: K, listener: (this: HTMLSdToggleElement, ev: SdToggleCustomEvent<HTMLSdToggleElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLSdToggleElement: {
+        prototype: HTMLSdToggleElement;
+        new (): HTMLSdToggleElement;
+    };
     interface HTMLSdTooltipElement extends Components.SdTooltip, HTMLStencilElement {
     }
     var HTMLSdTooltipElement: {
@@ -1360,6 +1434,7 @@ declare global {
         "sd-popover": HTMLSdPopoverElement;
         "sd-portal": HTMLSdPortalElement;
         "sd-progress": HTMLSdProgressElement;
+        "sd-radio-group": HTMLSdRadioGroupElement;
         "sd-select": HTMLSdSelectElement;
         "sd-select-multiple": HTMLSdSelectMultipleElement;
         "sd-select-multiple-group": HTMLSdSelectMultipleGroupElement;
@@ -1371,6 +1446,7 @@ declare global {
         "sd-tbody": HTMLSdTbodyElement;
         "sd-td": HTMLSdTdElement;
         "sd-th": HTMLSdThElement;
+        "sd-toggle": HTMLSdToggleElement;
         "sd-tooltip": HTMLSdTooltipElement;
         "sd-tooltip-portal": HTMLSdTooltipPortalElement;
         "sd-tr": HTMLSdTrElement;
@@ -1780,6 +1856,23 @@ declare namespace LocalJSX {
          */
         "type"?: 'bar' | 'spinner';
     }
+    interface SdRadioGroup {
+        /**
+          * @default 'vertical'
+         */
+        "direction"?: 'horizonal' | 'vertical';
+        /**
+          * @default false
+         */
+        "disabled"?: boolean;
+        "name"?: string;
+        "onSdChange"?: (event: SdRadioGroupCustomEvent<RadioValue>) => void;
+        /**
+          * @default []
+         */
+        "radioOptions"?: RadioOption[];
+        "value": RadioValue;
+    }
     interface SdSelect {
         /**
           * @default false
@@ -2193,6 +2286,21 @@ declare namespace LocalJSX {
     }
     interface SdTh {
     }
+    interface SdToggle {
+        /**
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * @default ''
+         */
+        "label"?: string;
+        "onSdChange"?: (event: SdToggleCustomEvent<boolean>) => void;
+        /**
+          * @default false
+         */
+        "value"?: boolean;
+    }
     interface SdTooltip {
         /**
           * @default 'sm'
@@ -2285,6 +2393,7 @@ declare namespace LocalJSX {
         "sd-popover": SdPopover;
         "sd-portal": SdPortal;
         "sd-progress": SdProgress;
+        "sd-radio-group": SdRadioGroup;
         "sd-select": SdSelect;
         "sd-select-multiple": SdSelectMultiple;
         "sd-select-multiple-group": SdSelectMultipleGroup;
@@ -2296,6 +2405,7 @@ declare namespace LocalJSX {
         "sd-tbody": SdTbody;
         "sd-td": SdTd;
         "sd-th": SdTh;
+        "sd-toggle": SdToggle;
         "sd-tooltip": SdTooltip;
         "sd-tooltip-portal": SdTooltipPortal;
         "sd-tr": SdTr;
@@ -2321,6 +2431,7 @@ declare module "@stencil/core" {
             "sd-popover": LocalJSX.SdPopover & JSXBase.HTMLAttributes<HTMLSdPopoverElement>;
             "sd-portal": LocalJSX.SdPortal & JSXBase.HTMLAttributes<HTMLSdPortalElement>;
             "sd-progress": LocalJSX.SdProgress & JSXBase.HTMLAttributes<HTMLSdProgressElement>;
+            "sd-radio-group": LocalJSX.SdRadioGroup & JSXBase.HTMLAttributes<HTMLSdRadioGroupElement>;
             "sd-select": LocalJSX.SdSelect & JSXBase.HTMLAttributes<HTMLSdSelectElement>;
             "sd-select-multiple": LocalJSX.SdSelectMultiple & JSXBase.HTMLAttributes<HTMLSdSelectMultipleElement>;
             "sd-select-multiple-group": LocalJSX.SdSelectMultipleGroup & JSXBase.HTMLAttributes<HTMLSdSelectMultipleGroupElement>;
@@ -2332,6 +2443,7 @@ declare module "@stencil/core" {
             "sd-tbody": LocalJSX.SdTbody & JSXBase.HTMLAttributes<HTMLSdTbodyElement>;
             "sd-td": LocalJSX.SdTd & JSXBase.HTMLAttributes<HTMLSdTdElement>;
             "sd-th": LocalJSX.SdTh & JSXBase.HTMLAttributes<HTMLSdThElement>;
+            "sd-toggle": LocalJSX.SdToggle & JSXBase.HTMLAttributes<HTMLSdToggleElement>;
             "sd-tooltip": LocalJSX.SdTooltip & JSXBase.HTMLAttributes<HTMLSdTooltipElement>;
             "sd-tooltip-portal": LocalJSX.SdTooltipPortal & JSXBase.HTMLAttributes<HTMLSdTooltipPortalElement>;
             "sd-tr": LocalJSX.SdTr & JSXBase.HTMLAttributes<HTMLSdTrElement>;