@sellmate/design-system 1.0.0 → 1.0.1

package/dist/collection/components/sd-loading-spinner/sd-loading-spinner.js

@@ -6,7 +6,7 @@ export class SdLoadingSpinner {
         return resolveColor(this.color);
     }
     render() {
-        return (h(Host, { key: 'aa2f775cec2d077ec5c90f56dfe6fc7c07d66ed3' }, h("svg", { key: 'eb95e64d55a79a6937eec9b34cbe3ef538c773a5', class: "sd-loading-spinner", width: "72px", height: "72px", viewBox: "25 25 50 50", style: { color: this.resolvedColor } }, h("circle", { key: '3ce95d70dcdfe3a2ad83dc5fea1226e8e3948420', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
+        return (h(Host, { key: '90e8d5b70e299835006b59d8240e0e0a526c14f7' }, h("svg", { key: '22c2e6c4a638440fd97abc82ebcba99a26a6e13c', class: "sd-loading-spinner", width: "72px", height: "72px", viewBox: "25 25 50 50", style: { color: this.resolvedColor } }, h("circle", { key: '41470486ab808e13a8d9fa0815b1a26436d6ca79', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
     }
     static get is() { return "sd-loading-spinner"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-number-input/sd-number-input.js

@@ -227,17 +227,17 @@ export class SdNumberInput {
         const inputStyles = {
             textAlign: this.useButton ? 'center' : 'right',
         };
-        return (h(Host, { key: 'cc0a8b33a183c708f4caab8b085647666f3f6a98', style: inputWidth, onFocus: this.handleFocus, onBlur: this.handleBlur }, this.useButton ? 'use buttons' : 'dont use buttons', this.label && h("div", { key: '65a9e62f1ae8d4c4f8712a93a86e5c179953d398', class: "sd-number-input__label" }, this.label), h("label", { key: '25a1617e500b5c002b540215fa59c9d419468462', class: {
+        return (h(Host, { key: '808776f5dac544141ffd67482d23a9e04c410900', style: inputWidth, onFocus: this.handleFocus, onBlur: this.handleBlur }, this.useButton ? 'use buttons' : 'dont use buttons', this.label && h("div", { key: '0c4ebbbfbe31d9d01f1652e7a2135e56c7d8bbb1', class: "sd-number-input__label" }, this.label), h("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 }, h("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 && (h("div", { key: '8929f899d9c3f06510fc7d7d9c9a33fbaf0786ac', class: "sd-number-input__buttons" }, h("button", { key: 'd3673187beb0c5941b38b78016596519bf802935', type: "button", class: {
+            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, h("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 && (h("div", { key: '4c66e1a5b8880fed901aa6656e2e49ce817ae991', class: "sd-number-input__buttons" }, h("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 }, h("sd-icon", { key: 'bd0b93c426d1dbc6ca5be932f999e0fa09538571', name: "minus", size: 12, color: this.isDecrementDisabled() ? '#CCCCCC' : '#2D8DFF' })), h("button", { key: 'b763da67109584b0c55dcfeaf3b2779c31c7caa4', type: "button", class: {
+            }, disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: 'a81ba14b5ebc2a46a2349fbb2de1015a2e1894a1', name: "minus", size: 12, color: this.isDecrementDisabled() ? '#CCCCCC' : '#2D8DFF' })), h("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 }, h("sd-icon", { key: '48c6fc62f19db50be1c23d65706b345a6d543d87', name: "add", size: 12, color: this.isIncrementDisabled() ? '#CCCCCC' : '#2D8DFF' })))))));
+            }, disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: 'c269060a857285fa060d4c4971235cc9fb4e991a', name: "add", size: 12, color: this.isIncrementDisabled() ? '#CCCCCC' : '#2D8DFF' })))))));
     }
     static get is() { return "sd-number-input"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-pagination/sd-pagination.js

@@ -68,12 +68,12 @@ export class SdPagination {
         }
     }
     render() {
-        return (h("div", { key: 'de62debd728759c709660924b2d9a5691f1e60ea', class: this.paginationClasses }, h("div", { key: '9da6071df92e8910fe19a9e20cdc38e2ef1e4fe7', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "pagination-info" }, h("span", { class: "current-page" }, this.currentPage), h("span", null, "/"), h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
+        return (h("div", { key: '7498d55ef3206deb0c3feb22cd1da426f754eb05', class: this.paginationClasses }, h("div", { key: '60918ebae391824240a8c182360751426c07c69c', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "pagination-info" }, h("span", { class: "current-page" }, this.currentPage), h("span", null, "/"), h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
                 'pagination-btn': true,
                 'pagination-btn--selected': this.currentPage === n,
             }, disabled: this.currentPage === n, style: {
                 '--pagination-btn-width': `${this.buttonWidth}px`,
-            }, onClick: () => this.handlePageChange(n) }, n)))), h("div", { key: '7951a5ea2aabf30619d21073cd728dffaf14b7bd', class: "append-btns" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n)))), h("div", { key: 'c827cf8b7d8d8013b85487891fc768dcbe172be9', class: "append-btns" }, this.renderNextButtons())));
     }
     static get is() { return "sd-pagination"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-popover/sd-popover.js

@@ -30,11 +30,11 @@ export class SdPopover {
         this.showPopover = false;
     };
     render() {
-        return (h(Fragment, { key: 'b968d7b33da86fc38d683e3af1b6cbcb3f3386dd' }, 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-floating-portal", { key: '43b0962853e830256e7b749e6e27206a74bf08f4', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, h("div", { key: '62767f979f1256937d50a6cddd5d4ddef5270005', class: {
+        return (h(Fragment, { key: '56f328cfb09847d3f5968c4ed73f805f5666e258' }, 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-floating-portal", { key: '8b6a8ce42c1464780fb089098fdda82600eefc86', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, h("div", { key: '0cbeee5bb4a514bc2e1009d5d97c27fd8a309fd2', class: {
                 'sd-floating-menu': true,
                 [`sd-floating-menu--${this.placement}`]: true,
                 [this.menuClass]: !!this.menuClass,
-            } }, h("i", { key: 'd82bdddc8945f348aebe8087390bf26d91e1e1c4', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: 'ff7ca429210d6ae88e2442299c8cea5211304e58' })), h("div", { key: '366633e5f65f76126607edb52d857e1918afb0bb', class: "sd-floating-menu__content" }, this.menuTitle && h("div", { key: '66b0783a3f5c4d30d33ecf496f4d0c051b44f3f1', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: '4f2049e9eee721f674a6c8ae4cbeb4eea9ab59bd', class: "sd-floating-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: 'da2067ba8bf0279dd914fab6124f58526edff4d4', class: `sd-floating-menu__buttons sd-floating-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (h("sd-button", { ...button })))))), this.useClose && (h("button", { key: '2aeb7b81e322472922802bcb6163d0913f0ee218', class: "sd-floating-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: '1ad55d0c8bf3c1eeedc2069f6f1bcdd75b180446', name: "close", size: "12", color: "#AAAAAA" }))))))));
+            } }, h("i", { key: 'd8f244e430aaacaaa4b124d4ae613546ca3cb04a', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: 'b5a9d9878144eb0a6093a05e0c5287d2721304d8' })), h("div", { key: '919c8ea1a1421f9db1b8f002704cb443e69b27dd', class: "sd-floating-menu__content" }, this.menuTitle && h("div", { key: '3a1bd157db78b03e894dd9234b15a1e0a42a20ad', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: '775a8c45c194fce139b78bdea6cf3ea7e1d6aebd', class: "sd-floating-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: '1da478df75490f7ba81a8463cbbeea26c6cff64d', class: `sd-floating-menu__buttons sd-floating-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (h("sd-button", { ...button })))))), this.useClose && (h("button", { key: 'ce75525effbcc448900cbea452a9787f66447444', title: "close", class: "sd-floating-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: '2dc6e721412c49ff91ea60e2355be1f0143fc7fb', name: "close", size: "12", color: "gery_55" }))))))));
     }
     static get is() { return "sd-popover"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-popover/sd-popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"sd-popover.js","sourceRoot":"","sources":["../../../src/components/sd-popover/sd-popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Fragment, Prop, State, Watch, h } from '@stencil/core';\nimport { ButtonSize, ButtonVariant } from '../sd-button/sd-button';\nimport { TooltipArrow } from '../assets/tooltipArrow';\n\n@Component({\n tag: 'sd-popover',\n styleUrl: 'sd-popover.scss',\n})\nexport class SdPopover {\n @Element() el!: HTMLElement;\n\n @Prop({ mutable: true }) show: boolean = false;\n\n @Prop({ reflect: true }) placement: 'top' | 'bottom' | 'left' | 'right' = 'bottom';\n @Prop({ reflect: true }) color: string = '#01BB4B';\n\n @Prop({ reflect: true }) icon: IconName = 'helpOutline';\n @Prop({ reflect: true }) iconSize: number = 12;\n\n @Prop() label: string = '';\n @Prop({ reflect: true }) buttonSize: ButtonSize = 'sm';\n @Prop({ reflect: true }) buttonVariant: ButtonVariant = 'primary';\n\n @Prop({ attribute: 'title', reflect: true }) menuTitle?: string;\n @Prop({ reflect: true }) messages: string[] = [];\n @Prop({ reflect: true }) buttons: {\n  [key: string]: any;\n }[] = [];\n @Prop() menuClass: string = '';\n\n @Prop() noHover: boolean = true;\n\n @Prop() useClose: boolean = false;\n\n @State() showPopover: boolean = false;\n @State() slotContent: string = '';\n\n @Watch('show')\n watchShowHandler(newValue: boolean) {\n  this.showPopover = newValue;\n }\n\n componentWillLoad() {\n  this.showPopover = this.show;\n\n  this.slotContent = this.el.innerHTML;\n }\n\n private buttonEl?: HTMLElement;\n\n private handleClose = () => {\n  this.showPopover = false;\n };\n\n render() {\n  return (\n   <Fragment>\n    {this.label ? (\n     <sd-button\n      ref={el => (this.buttonEl = el as unknown as HTMLElement)}\n      label={this.label}\n      icon={this.icon}\n      size={this.buttonSize}\n      color={this.color}\n      variant={this.buttonVariant}\n      class=\"sd-popover\"\n      onClick={() => (this.showPopover = !this.showPopover)}\n     ></sd-button>\n    ) : (\n     <sd-icon\n      ref={el => (this.buttonEl = el as unknown as HTMLElement)}\n      name={this.icon}\n      size={this.iconSize}\n      color={this.color}\n      class=\"sd-popover\"\n      onClick={() => (this.showPopover = !this.showPopover)}\n     ></sd-icon>\n    )}\n\n    {this.showPopover && (\n     <sd-floating-portal\n      parentRef={this.buttonEl}\n      onSdClose={this.handleClose}\n      placement={this.placement}\n     >\n      <div\n       class={{\n        'sd-floating-menu': true,\n        [`sd-floating-menu--${this.placement}`]: true,\n        [this.menuClass]: !!this.menuClass,\n       }}\n      >\n       <i class={`sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}`}>\n        <TooltipArrow></TooltipArrow>\n       </i>\n\n       <div class=\"sd-floating-menu__content\">\n        {this.menuTitle && <div class=\"sd-floating-menu__title\">{this.menuTitle}</div>}\n\n        {this.messages.length > 0 && (\n         <div class=\"sd-floating-menu__messages\">\n          {this.messages.map(message => (\n           <div>{message}</div>\n          ))}\n         </div>\n        )}\n\n        {this.buttons.length > 0 && (\n         <div class={`sd-floating-menu__buttons sd-floating-menu__buttons--${this.buttons.length}`}>\n          {this.buttons.map(button => (\n           <sd-button {...button} />\n          ))}\n         </div>\n        )}\n       </div>\n\n       {this.useClose && (\n        <button class=\"sd-floating-menu__close-button\" onClick={() => this.handleClose()}>\n         <sd-icon name=\"close\" size=\"12\" color=\"#AAAAAA\"></sd-icon>\n        </button>\n       )}\n      </div>\n     </sd-floating-portal>\n    )}\n   </Fragment>\n  );\n }\n}\n"]}
+{"version":3,"file":"sd-popover.js","sourceRoot":"","sources":["../../../src/components/sd-popover/sd-popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Fragment, Prop, State, Watch, h } from '@stencil/core';\nimport { ButtonSize, ButtonVariant } from '../sd-button/sd-button';\nimport { TooltipArrow } from '../assets/tooltipArrow';\n\n@Component({\n tag: 'sd-popover',\n styleUrl: 'sd-popover.scss',\n})\nexport class SdPopover {\n @Element() el!: HTMLElement;\n\n @Prop({ mutable: true }) show: boolean = false;\n\n @Prop({ reflect: true }) placement: 'top' | 'bottom' | 'left' | 'right' = 'bottom';\n @Prop({ reflect: true }) color: string = '#01BB4B';\n\n @Prop({ reflect: true }) icon: IconName = 'helpOutline';\n @Prop({ reflect: true }) iconSize: number = 12;\n\n @Prop() label: string = '';\n @Prop({ reflect: true }) buttonSize: ButtonSize = 'sm';\n @Prop({ reflect: true }) buttonVariant: ButtonVariant = 'primary';\n\n @Prop({ attribute: 'title', reflect: true }) menuTitle?: string;\n @Prop({ reflect: true }) messages: string[] = [];\n @Prop({ reflect: true }) buttons: {\n  [key: string]: any;\n }[] = [];\n @Prop() menuClass: string = '';\n\n @Prop() noHover: boolean = true;\n\n @Prop() useClose: boolean = false;\n\n @State() showPopover: boolean = false;\n @State() slotContent: string = '';\n\n @Watch('show')\n watchShowHandler(newValue: boolean) {\n  this.showPopover = newValue;\n }\n\n componentWillLoad() {\n  this.showPopover = this.show;\n\n  this.slotContent = this.el.innerHTML;\n }\n\n private buttonEl?: HTMLElement;\n\n private handleClose = () => {\n  this.showPopover = false;\n };\n\n render() {\n  return (\n   <Fragment>\n    {this.label ? (\n     <sd-button\n      ref={el => (this.buttonEl = el as unknown as HTMLElement)}\n      label={this.label}\n      icon={this.icon}\n      size={this.buttonSize}\n      color={this.color}\n      variant={this.buttonVariant}\n      class=\"sd-popover\"\n      onClick={() => (this.showPopover = !this.showPopover)}\n     ></sd-button>\n    ) : (\n     <sd-icon\n      ref={el => (this.buttonEl = el as unknown as HTMLElement)}\n      name={this.icon}\n      size={this.iconSize}\n      color={this.color}\n      class=\"sd-popover\"\n      onClick={() => (this.showPopover = !this.showPopover)}\n     ></sd-icon>\n    )}\n\n    {this.showPopover && (\n     <sd-floating-portal\n      parentRef={this.buttonEl}\n      onSdClose={this.handleClose}\n      placement={this.placement}\n     >\n      <div\n       class={{\n        'sd-floating-menu': true,\n        [`sd-floating-menu--${this.placement}`]: true,\n        [this.menuClass]: !!this.menuClass,\n       }}\n      >\n       <i class={`sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}`}>\n        <TooltipArrow></TooltipArrow>\n       </i>\n\n       <div class=\"sd-floating-menu__content\">\n        {this.menuTitle && <div class=\"sd-floating-menu__title\">{this.menuTitle}</div>}\n\n        {this.messages.length > 0 && (\n         <div class=\"sd-floating-menu__messages\">\n          {this.messages.map(message => (\n           <div>{message}</div>\n          ))}\n         </div>\n        )}\n\n        {this.buttons.length > 0 && (\n         <div class={`sd-floating-menu__buttons sd-floating-menu__buttons--${this.buttons.length}`}>\n          {this.buttons.map(button => (\n           <sd-button {...button} />\n          ))}\n         </div>\n        )}\n       </div>\n\n       {this.useClose && (\n        <button\n         title=\"close\"\n         class=\"sd-floating-menu__close-button\"\n         onClick={() => this.handleClose()}\n        >\n         <sd-icon name=\"close\" size=\"12\" color=\"gery_55\"></sd-icon>\n        </button>\n       )}\n      </div>\n     </sd-floating-portal>\n    )}\n   </Fragment>\n  );\n }\n}\n"]}

package/dist/collection/components/sd-portal/sd-portal.js

@@ -113,7 +113,7 @@ export class SdPortal {
         this.close.emit();
     }
     render() {
-        return h("slot", { key: '180911ce3dbda3a8e2576facbf0ab16b5cb0b61f' });
+        return h("slot", { key: '6181685d61b1e95116316b72208702597bba2b8e' });
     }
     static get is() { return "sd-portal"; }
     static get properties() {

package/dist/collection/components/sd-progress/sd-progress.js

@@ -33,10 +33,10 @@ export class SdProgress {
         return this.statusColor[this.progressStatus];
     }
     render() {
-        return (h(Host, { key: 'fe3875178b9b621f5cb21dc030f736df71ee8f91', style: {
+        return (h(Host, { key: '8990c8a3fb4c8bf0cb32dd4310e1e99519fca550', style: {
                 '--progress-color': this.progressColor,
                 '--progress-percentage': `${this.progressPercentage}%`,
-            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && h("div", { key: 'bd4693197e530e6a836b076772bfd02a3c91ce3a', class: "sd-progress__label" }, this.label)));
+            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && h("div", { key: '50a4d45d8658eec2b0d949b201fbf55b0d3615a4', class: "sd-progress__label" }, this.label)));
     }
     renderBarProgress() {
         return (h("div", { class: `sd-progress__bar sd-progress__bar--${this.progressStatus}` }, h("div", { class: ['sd-progress__bar__percent', this.progressPercentage < 100 ? 'proceed' : ''].join(' ') }), h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--left" }, this.progressPercentage, "%"), h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--right" }, this.progressPercentage, "%")));

package/dist/collection/components/sd-radio/sd-radio.css

@@ -0,0 +1,59 @@
+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;
+}

package/dist/collection/components/sd-radio/sd-radio.js

@@ -0,0 +1,151 @@
+import { h, Host } from "@stencil/core";
+export class SdRadio {
+    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 (h(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() }, h("label", { key: `radio-${this.val}` }, h("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 && h("span", { key: '47fd723d1ec6c6124d01341f7edbe945061dc348', class: "sd-radio-group__label" }, this.label || this.val))));
+    }
+    static get is() { return "sd-radio"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sd-radio.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sd-radio.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "any",
+                "mutable": true,
+                "complexType": {
+                    "original": "RadioValue",
+                    "resolved": "boolean | number | string",
+                    "references": {
+                        "RadioValue": {
+                            "location": "local",
+                            "path": "/Users/meijing/Documents/sellmate/frontend/design-system/packages/stencil/src/components/sd-radio/sd-radio.tsx",
+                            "id": "src/components/sd-radio/sd-radio.tsx::RadioValue"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "val": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "val"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "update",
+                "name": "sdUpdate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "RadioValue",
+                    "resolved": "boolean | number | string",
+                    "references": {
+                        "RadioValue": {
+                            "location": "local",
+                            "path": "/Users/meijing/Documents/sellmate/frontend/design-system/packages/stencil/src/components/sd-radio/sd-radio.tsx",
+                            "id": "src/components/sd-radio/sd-radio.tsx::RadioValue"
+                        }
+                    }
+                }
+            }];
+    }
+}
+//# sourceMappingURL=sd-radio.js.map

package/dist/collection/components/sd-radio/sd-radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sd-radio.js","sourceRoot":"","sources":["../../../src/components/sd-radio/sd-radio.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAQ9E,MAAM,OAAO,OAAO;IACqB,KAAK,CAAc;IAEnD,QAAQ,GAAY,KAAK,CAAC;IAE1B,GAAG,CAAU;IAEb,KAAK,CAAU;IAEW,MAAM,CAA4B;IAE5D,eAAe;QACtB,MAAM,OAAO,GAAG;YACf,UAAU;YACV,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,sBAAsB;SACvF,CAAC;QAEF,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,OAAO,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;QACpC,CAAC;QAED,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC1B,CAAC;IAEO,iBAAiB,CAAC,MAAW;QACpC,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAE1B,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;QAE9B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAI,CAAC;QACvB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC9B,CAAC;IAED,MAAM;QACL,OAAO,CACN,EAAC,IAAI,mEACQ,IAAI,CAAC,GAAG,IAAI,cAAc,kBACxB,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,mBACzD,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAC/C,KAAK,EAAE,IAAI,CAAC,eAAe,EAAE;YAE7B,aAAO,GAAG,EAAE,SAAS,IAAI,CAAC,GAAG,EAAE;gBAC9B,8DACC,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,CAAC,GAAG,EACd,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,EACvB,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAChD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,GACtD;gBACD,IAAI,CAAC,GAAG,IAAI,6DAAM,KAAK,EAAC,uBAAuB,IAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,CAAQ,CACzE,CACF,CACP,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\nexport type RadioValue = string | number | boolean;\n\n@Component({\n tag: 'sd-radio',\n styleUrl: 'sd-radio.scss',\n})\nexport class SdRadio {\n @Prop({ mutable: true, reflect: true }) value!: RadioValue;\n\n @Prop() disabled: boolean = false;\n\n @Prop() val!: string;\n\n @Prop() label?: string;\n\n @Event({ eventName: 'sdUpdate' }) update!: EventEmitter<RadioValue>;\n\n private getRadioClasses(): string {\n  const classes = [\n   'sd-radio',\n   String(this.val) === String(this.value) ? 'sd-radio--selected' : 'sd-radio--unselected',\n  ];\n\n  if (this.disabled) {\n   classes.push('sd-radio--disabled');\n  }\n\n  return classes.join(' ');\n }\n\n private handleRadioChange(detail: any) {\n  if (this.disabled) return;\n\n  console.log('detail', detail);\n\n  this.value = this.val!;\n  this.update.emit(this.value);\n }\n\n render() {\n  return (\n   <Host\n    aria-label={this.val || 'radio option'}\n    aria-checked={String(this.val) === String(this.value) ? 'true' : 'false'}\n    aria-disabled={this.disabled ? 'true' : 'false'}\n    class={this.getRadioClasses()}\n   >\n    <label key={`radio-${this.val}`}>\n     <input\n      type=\"radio\"\n      name={this.val}\n      value={String(this.val)}\n      checked={String(this.val) === String(this.value)}\n      disabled={this.disabled}\n      onInput={({ detail }) => this.handleRadioChange(detail)}\n     />\n     {this.val && <span class=\"sd-radio-group__label\">{this.label || this.val}</span>}\n    </label>\n   </Host>\n  );\n }\n}\n"]}

package/dist/collection/components/sd-radio-button-group/sd-radio-button-group.css

@@ -1,12 +1,11 @@
 sd-radio-button-group {
-  display: inline-block;
+  display: inline-flex;
 }
-sd-radio-button-group .sd-radio-button-group {
-  display: flex;
-  flex-direction: row;
+sd-radio-button-group.sd-radio-button-group {
+  flex-flow: row nowrap;
   gap: 0;
 }
-sd-radio-button-group .sd-radio-button-group__option {
+sd-radio-button-group.sd-radio-button-group .sd-radio-button-group__option {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -17,64 +16,66 @@ sd-radio-button-group .sd-radio-button-group__option {
   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__option input {
+sd-radio-button-group.sd-radio-button-group .sd-radio-button-group__option input {
   display: none;
 }
-sd-radio-button-group .sd-radio-button-group__option:not(:first-child) {
+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__option:first-child {
+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__option:last-child {
+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__option:only-child {
+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__option::after {
+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__option:not(sd-radio-button-group .sd-radio-button-group__option--disabled):not(sd-radio-button-group .sd-radio-button-group__option--selected):hover {
+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__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 {
+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__option--selected {
+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__option--disabled {
+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__option:has(input:disabled) {
+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 {
+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 {
+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 {
+sd-radio-button-group.sd-radio-button-group--md .sd-radio-button-group__option {
   padding: 4px 20px;
   font-size: 16px;
   line-height: 26px;

package/dist/collection/components/sd-radio-button-group/sd-radio-button-group.js

@@ -1,4 +1,4 @@
-import { h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 export class SdRadioButtonGroup {
     value;
     radioOptions = [];
@@ -36,10 +36,10 @@ export class SdRadioButtonGroup {
     }
     groupName = this.name || `sd-radio-button-group-${crypto.randomUUID()}`;
     render() {
-        return (h("div", { key: '9fe1be694f1c30e4aa71a0be00218b1c5fa4db01', class: this.getGroupClasses(), role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.radioOptions.map(option => {
+        return (h(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 (h("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 }, h("input", { type: "radio", name: this.groupName, value: option.value.toString(), checked: isSelected, disabled: isDisabled, onInput: () => this.handleRadioChange(option.value, option.disabled) }), option.label && h("span", { class: "sd-radio-button-group__label" }, option.label)));
+            return (h("label", { key: `radio-${option.value}`, class: this.getButtonClasses(option), "aria-label": option.label || 'radio option', "data-label": option.label }, h("input", { type: "radio", name: this.groupName, value: option.value.toString(), checked: isSelected, disabled: isDisabled, onInput: () => this.handleRadioChange(option.value, option.disabled) }), option.label && h("span", { class: "sd-radio-button-group__label" }, option.label)));
         })));
     }
     static get is() { return "sd-radio-button-group"; }

package/dist/collection/components/sd-radio-button-group/sd-radio-button-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"sd-radio-button-group.js","sourceRoot":"","sources":["../../../src/components/sd-radio-button-group/sd-radio-button-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, EventEmitter, Event } from '@stencil/core';\n\nexport type RadioValue = string | number | boolean;\nexport type RadioOption = {\n label: string;\n value: RadioValue;\n disabled?: boolean;\n};\n\n@Component({\n tag: 'sd-radio-button-group',\n styleUrl: 'sd-radio-button-group.scss',\n})\nexport class SdRadioButtonGroup {\n @Prop({ mutable: true }) value!: RadioValue;\n\n @Prop({ mutable: true }) radioOptions: RadioOption[] = [];\n\n @Prop() size: 'sm' | 'md' = 'md';\n\n @Prop() disabled: boolean = false;\n\n @Prop() name?: string;\n\n @Event({ eventName: 'sdUpdate' })\n change!: EventEmitter<RadioValue>;\n\n private handleRadioChange = (optionValue: RadioValue, optionDisabled?: boolean) => {\n  if (this.disabled || optionDisabled) return;\n  this.value = optionValue;\n  this.change.emit(optionValue);\n };\n\n private isOptionSelected(option: RadioOption): boolean {\n  return this.value === option.value;\n }\n\n private isOptionDisabled(option: RadioOption): boolean {\n  return this.disabled || !!option.disabled;\n }\n\n private getButtonClasses(option: RadioOption): string {\n  const classes = [\n   'sd-radio-button-group__option',\n   this.isOptionSelected(option)\n    ? 'sd-radio-button-group__option--selected'\n    : 'sd-radio-button-group__option--unselected',\n  ];\n\n  if (this.isOptionDisabled(option)) {\n   classes.push('sd-radio-button-group__option--disabled');\n  }\n\n  return classes.join(' ');\n }\n\n private getGroupClasses(): string {\n  const classes = ['sd-radio-button-group', `sd-radio-button-group--${this.size}`];\n  return classes.join(' ');\n }\n\n private groupName = this.name || `sd-radio-button-group-${crypto.randomUUID()}`;\n\n render() {\n  return (\n   <div class={this.getGroupClasses()} role=\"radiogroup\" aria-disabled={this.disabled.toString()}>\n    {this.radioOptions.map(option => {\n     const isSelected = this.isOptionSelected(option);\n     const isDisabled = this.isOptionDisabled(option);\n\n     return (\n      <label\n       key={`radio-${option.value}`}\n       class={this.getButtonClasses(option)}\n       role=\"radio\"\n       aria-checked={isSelected.toString()}\n       aria-disabled={isDisabled.toString()}\n       aria-label={option.label || 'radio option'}\n       data-label={option.label}\n      >\n       <input\n        type=\"radio\"\n        name={this.groupName}\n        value={option.value.toString()}\n        checked={isSelected}\n        disabled={isDisabled}\n        onInput={() => this.handleRadioChange(option.value, option.disabled)}\n       />\n       {option.label && <span class=\"sd-radio-button-group__label\">{option.label}</span>}\n      </label>\n     );\n    })}\n   </div>\n  );\n }\n}\n"]}
+{"version":3,"file":"sd-radio-button-group.js","sourceRoot":"","sources":["../../../src/components/sd-radio-button-group/sd-radio-button-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, EventEmitter, Event, Host } from '@stencil/core';\n\nexport type RadioValue = string | number | boolean;\nexport type RadioOption = {\n label: string;\n value: RadioValue;\n disabled?: boolean;\n};\n\n@Component({\n tag: 'sd-radio-button-group',\n styleUrl: 'sd-radio-button-group.scss',\n})\nexport class SdRadioButtonGroup {\n @Prop({ mutable: true }) value!: RadioValue;\n\n @Prop({ mutable: true }) radioOptions: RadioOption[] = [];\n\n @Prop() size: 'sm' | 'md' = 'md';\n\n @Prop() disabled: boolean = false;\n\n @Prop() name?: string;\n\n @Event({ eventName: 'sdUpdate' })\n change!: EventEmitter<RadioValue>;\n\n private handleRadioChange = (optionValue: RadioValue, optionDisabled?: boolean) => {\n  if (this.disabled || optionDisabled) return;\n  this.value = optionValue;\n  this.change.emit(optionValue);\n };\n\n private isOptionSelected(option: RadioOption): boolean {\n  return this.value === option.value;\n }\n\n private isOptionDisabled(option: RadioOption): boolean {\n  return this.disabled || !!option.disabled;\n }\n\n private getButtonClasses(option: RadioOption): string {\n  const classes = [\n   'sd-radio-button-group__option',\n   this.isOptionSelected(option)\n    ? 'sd-radio-button-group__option--selected'\n    : 'sd-radio-button-group__option--unselected',\n  ];\n\n  if (this.isOptionDisabled(option)) {\n   classes.push('sd-radio-button-group__option--disabled');\n  }\n\n  return classes.join(' ');\n }\n\n private getGroupClasses(): string {\n  const classes = ['sd-radio-button-group', `sd-radio-button-group--${this.size}`];\n  return classes.join(' ');\n }\n\n private groupName = this.name || `sd-radio-button-group-${crypto.randomUUID()}`;\n\n render() {\n  return (\n   <Host class={this.getGroupClasses()} role=\"radiogroup\" aria-disabled={this.disabled.toString()}>\n    {this.radioOptions.map(option => {\n     const isSelected = this.isOptionSelected(option);\n     const isDisabled = this.isOptionDisabled(option);\n\n     return (\n      <label\n       key={`radio-${option.value}`}\n       class={this.getButtonClasses(option)}\n       aria-label={option.label || 'radio option'}\n       data-label={option.label}\n      >\n       <input\n        type=\"radio\"\n        name={this.groupName}\n        value={option.value.toString()}\n        checked={isSelected}\n        disabled={isDisabled}\n        onInput={() => this.handleRadioChange(option.value, option.disabled)}\n       />\n       {option.label && <span class=\"sd-radio-button-group__label\">{option.label}</span>}\n      </label>\n     );\n    })}\n   </Host>\n  );\n }\n}\n"]}

package/dist/collection/components/sd-radio-group/sd-radio-group.css

@@ -1,32 +1,16 @@
-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 {
+  display: inline-flex;
 }
-sd-radio-group .sd-radio-group--horizontal {
-  flex-direction: row;
-  align-items: center;
-  gap: 20px;
+sd-radio.sd-radio {
+  cursor: pointer;
 }
-sd-radio-group .sd-radio-group__option {
-  width: fit-content;
+sd-radio.sd-radio label {
   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 {
+sd-radio.sd-radio label input {
   position: relative;
   appearance: none;
   margin: 0;
@@ -34,15 +18,15 @@ sd-radio-group .sd-radio-group__option input {
   height: 16px;
   border: 1px solid #888888;
   border-radius: 50%;
-  cursor: pointer;
   accent-color: #0075ff;
   background-color: white;
+  cursor: pointer;
 }
-sd-radio-group .sd-radio-group__option input:checked {
+sd-radio.sd-radio label input:checked {
   border-color: #0075ff;
   background-color: white;
 }
-sd-radio-group .sd-radio-group__option input:checked::before {
+sd-radio.sd-radio label input:checked::before {
   content: "";
   position: absolute;
   top: 50%;
@@ -53,27 +37,39 @@ sd-radio-group .sd-radio-group__option input:checked::before {
   border-radius: 50%;
   background-color: #0075ff;
 }
-sd-radio-group .sd-radio-group__option input:disabled {
-  cursor: not-allowed;
+sd-radio.sd-radio label input:disabled {
   border-color: #cccccc;
   background-color: #eeeeee;
 }
-sd-radio-group .sd-radio-group__option input:disabled:checked::before {
+sd-radio.sd-radio label input:disabled:checked::before {
   background-color: #cccccc;
 }
-sd-radio-group .sd-radio-group__option input:not(:disabled):hover {
+sd-radio.sd-radio label 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.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__option--disabled {
-  cursor: not-allowed;
+sd-radio-group .sd-radio-group--vertical {
+  flex-direction: column;
+  gap: 8px;
 }
-sd-radio-group .sd-radio-group__option--disabled .sd-radio-group__label {
-  color: #888888;
+sd-radio-group .sd-radio-group--horizontal {
+  flex-direction: row;
+  align-items: center;
+  gap: 20px;
 }