@sellmate/design-system 1.0.0 → 1.0.2

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

@@ -1 +1 @@
-{"file":"sd-popover.js","mappings":"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","names":["SdPopover","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-popover/sd-popover.scss?tag=sd-popover","src/components/sd-popover/sd-popover.tsx"],"sourcesContent":["@import 'variables';\n\nsd-popover {\n position: relative;\n cursor: pointer;\n display: inline-flex;\n}\n","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","mappings":"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","names":["SdPopover","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-popover/sd-popover.scss?tag=sd-popover","src/components/sd-popover/sd-popover.tsx"],"sourcesContent":["@import 'variables';\n\nsd-popover {\n position: relative;\n cursor: pointer;\n display: inline-flex;\n}\n","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"],"version":3}

package/dist/components/sd-portal.js

@@ -1,4 +1,4 @@
-import { S as SdPortal$1, d as defineCustomElement$1 } from './p-DbebUQwg.js';
+import { S as SdPortal$1, d as defineCustomElement$1 } from './p-o-oFeHDX.js';
 
 const SdPortal = SdPortal$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sd-progress.js

@@ -42,10 +42,10 @@ const SdProgress$1 = /*@__PURE__*/ proxyCustomElement(class SdProgress extends H
         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/components/sd-radio-button-group.js

@@ -1,6 +1,6 @@
-import { p as proxyCustomElement, H, d as createEvent, h, t as transformTag } from './p-YLoygqPr.js';
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host, t as transformTag } from './p-YLoygqPr.js';
 
-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 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}`;
 
 const SdRadioButtonGroup$1 = /*@__PURE__*/ proxyCustomElement(class SdRadioButtonGroup extends H {
     constructor(registerHost) {
@@ -46,10 +46,10 @@ const SdRadioButtonGroup$1 = /*@__PURE__*/ proxyCustomElement(class SdRadioButto
     }
     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 style() { return sdRadioButtonGroupCss(); }

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

@@ -1 +1 @@
-{"file":"sd-radio-button-group.js","mappings":"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","names":["SdRadioButtonGroup","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-radio-button-group/sd-radio-button-group.scss?tag=sd-radio-button-group","src/components/sd-radio-button-group/sd-radio-button-group.tsx"],"sourcesContent":["@import 'variables';\n\nsd-radio-button-group {\n display: inline-block;\n\n .sd-radio-button-group {\n  display: flex;\n  flex-direction: row;\n  gap: 0;\n\n  &__option {\n   display: flex;\n   align-items: center;\n   justify-content: center;\n   cursor: pointer;\n   border: 1px solid $grey_45;\n   background-color: white;\n   color: $grey_90;\n   font-weight: 400;\n   transition: all 0.2s ease;\n   position: relative;\n   user-select: none;\n\n   input {\n    display: none;\n   }\n\n   &:not(:first-child) {\n    margin-left: -1px;\n   }\n\n   &:first-child {\n    border-radius: 4px 0 0 4px;\n   }\n\n   &:last-child {\n    border-radius: 0 4px 4px 0;\n   }\n\n   &:only-child {\n    border-radius: 4px;\n   }\n\n   &::after {\n    content: attr(data-label);\n    position: absolute;\n    font-weight: 400;\n    transition: font-weight .2s ease;\n   }\n\n   &:not(&--disabled):not(&--selected):hover {\n    background-color: $brilliantblue_75;\n    color: white;\n    border-color: $brilliantblue_75;\n    z-index: 2;\n\n    &::after {\n     font-weight: 500;\n    }\n\n   }\n\n   &--selected {\n    border-color: $brilliantblue_75;\n    color: $brilliantblue_75;\n    background-color: white;\n    z-index: 1;\n   }\n\n   &--disabled {\n    background-color: $grey_30;\n    border-color: $grey_45;\n    color: $grey_65;\n    cursor: not-allowed;\n   }\n\n   &:has(input:disabled) {\n    cursor: not-allowed;\n   }\n  }\n\n  &__label {\n   user-select: none;\n   font-weight: 500;\n   visibility: hidden;\n  }\n\n\n  &--sm {\n   .sd-radio-button-group__option {\n    padding: 4px 12px;\n    font-size: 12px;\n    line-height: 20px;\n   }\n  }\n\n  &--md {\n   .sd-radio-button-group__option {\n    padding: 4px 20px;\n    font-size: 16px;\n    line-height: 26px;\n   }\n  }\n }\n}","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","mappings":";;AAAA,MAAM,qBAAqB,GAAG,MAAM,CAAC,2/EAA2/E,CAAC;;MCaphFA,oBAAkB,iBAAAC,kBAAA,CAAA,MAAA,kBAAA,SAAAC,CAAA,CAAA;;;;;;;;AACL,IAAA,KAAK;IAEL,YAAY,GAAkB,EAAE;IAEjD,IAAI,GAAgB,IAAI;IAExB,QAAQ,GAAY,KAAK;AAEzB,IAAA,IAAI;AAGZ,IAAA,MAAM;AAEE,IAAA,iBAAiB,GAAG,CAAC,WAAuB,EAAE,cAAwB,KAAI;AACjF,QAAA,IAAI,IAAI,CAAC,QAAQ,IAAI,cAAc;YAAE;AACrC,QAAA,IAAI,CAAC,KAAK,GAAG,WAAW;AACxB,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC;AAC9B,KAAC;AAEO,IAAA,gBAAgB,CAAC,MAAmB,EAAA;AAC3C,QAAA,OAAO,IAAI,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK;;AAG3B,IAAA,gBAAgB,CAAC,MAAmB,EAAA;QAC3C,OAAO,IAAI,CAAC,QAAQ,IAAI,CAAC,CAAC,MAAM,CAAC,QAAQ;;AAGlC,IAAA,gBAAgB,CAAC,MAAmB,EAAA;AAC3C,QAAA,MAAM,OAAO,GAAG;YACf,+BAA+B;AAC/B,YAAA,IAAI,CAAC,gBAAgB,CAAC,MAAM;AAC3B,kBAAE;AACF,kBAAE,2CAA2C;SAC9C;AAED,QAAA,IAAI,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,EAAE;AAClC,YAAA,OAAO,CAAC,IAAI,CAAC,yCAAyC,CAAC;;AAGxD,QAAA,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;;IAGjB,eAAe,GAAA;QACtB,MAAM,OAAO,GAAG,CAAC,uBAAuB,EAAE,CAA0B,uBAAA,EAAA,IAAI,CAAC,IAAI,CAAE,CAAA,CAAC;AAChF,QAAA,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;;IAGjB,SAAS,GAAG,IAAI,CAAC,IAAI,IAAI,CAAyB,sBAAA,EAAA,MAAM,CAAC,UAAU,EAAE,CAAA,CAAE;IAE/E,MAAM,GAAA;AACL,QAAA,QACC,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,KAAK,EAAE,IAAI,CAAC,eAAe,EAAE,EAAE,IAAI,EAAC,YAAY,EAAA,eAAA,EAAgB,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,EAC5F,EAAA,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,MAAM,IAAG;YAC/B,MAAM,UAAU,GAAG,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC;YAChD,MAAM,UAAU,GAAG,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC;YAEhD,QACC,CACC,CAAA,OAAA,EAAA,EAAA,GAAG,EAAE,CAAS,MAAA,EAAA,MAAM,CAAC,KAAK,EAAE,EAC5B,KAAK,EAAE,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,EAAA,YAAA,EACxB,MAAM,CAAC,KAAK,IAAI,cAAc,EAAA,YAAA,EAC9B,MAAM,CAAC,KAAK,EAAA,EAExB,CACC,CAAA,OAAA,EAAA,EAAA,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,CAAC,SAAS,EACpB,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,QAAQ,EAAE,EAC9B,OAAO,EAAE,UAAU,EACnB,QAAQ,EAAE,UAAU,EACpB,OAAO,EAAE,MAAM,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,QAAQ,CAAC,EACnE,CAAA,EACD,MAAM,CAAC,KAAK,IAAI,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,8BAA8B,EAAE,EAAA,MAAM,CAAC,KAAK,CAAQ,CAC1E;SAET,CAAC,CACI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SdRadioButtonGroup","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-radio-button-group/sd-radio-button-group.scss?tag=sd-radio-button-group","src/components/sd-radio-button-group/sd-radio-button-group.tsx"],"sourcesContent":["@import 'variables';\n\nsd-radio-button-group {\n display: inline-flex;\n\n &.sd-radio-button-group {\n  flex-flow: row nowrap;\n  gap: 0;\n\n  .sd-radio-button-group__option {\n   display: flex;\n   align-items: center;\n   justify-content: center;\n   cursor: pointer;\n   border: 1px solid $grey_45;\n   background-color: white;\n   color: $grey_90;\n   font-weight: 400;\n   transition: all 0.2s ease;\n   position: relative;\n   -webkit-user-select: none;\n   user-select: none;\n\n   input {\n    display: none;\n   }\n\n   &:not(:first-child) {\n    margin-left: -1px;\n   }\n\n   &:first-child {\n    border-radius: 4px 0 0 4px;\n   }\n\n   &:last-child {\n    border-radius: 0 4px 4px 0;\n   }\n\n   &:only-child {\n    border-radius: 4px;\n   }\n\n   &::after {\n    content: attr(data-label);\n    position: absolute;\n    font-weight: 400;\n    transition: font-weight 0.2s ease;\n   }\n\n   &:not(&--disabled):not(&--selected):hover {\n    background-color: $brilliantblue_75;\n    color: white;\n    border-color: $brilliantblue_75;\n    z-index: 2;\n\n    &::after {\n     font-weight: 500;\n    }\n   }\n\n   &--selected {\n    border-color: $brilliantblue_75;\n    color: $brilliantblue_75;\n    background-color: white;\n    z-index: 1;\n   }\n\n   &--disabled {\n    background-color: $grey_30;\n    border-color: $grey_45;\n    color: $grey_65;\n    cursor: not-allowed;\n   }\n\n   &:has(input:disabled) {\n    cursor: not-allowed;\n   }\n  }\n\n  &__label {\n   -webkit-user-select: none;\n   user-select: none;\n   font-weight: 500;\n   visibility: hidden;\n  }\n\n  &--sm {\n   .sd-radio-button-group__option {\n    padding: 4px 12px;\n    font-size: 12px;\n    line-height: 20px;\n   }\n  }\n\n  &--md {\n   .sd-radio-button-group__option {\n    padding: 4px 20px;\n    font-size: 16px;\n    line-height: 26px;\n   }\n  }\n }\n}\n","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"],"version":3}

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

@@ -1,6 +1,7 @@
 import { p as proxyCustomElement, H, d as createEvent, h, t as transformTag } from './p-YLoygqPr.js';
+import { d as defineCustomElement$2 } from './p-BBVGfsbU.js';
 
-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}`;
 
 const SdRadioGroup$1 = /*@__PURE__*/ proxyCustomElement(class SdRadioGroup extends H {
     constructor(registerHost) {
@@ -14,52 +15,24 @@ const SdRadioGroup$1 = /*@__PURE__*/ proxyCustomElement(class SdRadioGroup exten
     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 (h("div", { key: '9599dded7410ed41178f6cbf93aa24897cc9b030', class: this.getGroupClasses(), role: "radiogroup" }, this.radioOptions.map((option, index) => {
-            const isSelected = this.isOptionSelected(option);
-            const isDisabled = this.isOptionDisabled(option);
-            return (h("label", { key: `radio-${index}`, class: this.getRadioClasses(option), role: "radio", "aria-checked": isSelected.toString(), "aria-disabled": isDisabled.toString(), "aria-label": option.label || 'radio option' }, h("input", { type: "radio", name: groupName, value: option.value.toString(), checked: isSelected, disabled: isDisabled, onInput: () => this.handleRadioChange(option.value, option.disabled) }), option.label && h("span", { class: "sd-radio-group__label" }, option.label)));
+        return (h("div", { key: '264fed43fa10c8869762dab2b0530989e7901178', class: this.getGroupClasses(), role: "radiogroup" }, this.radioOptions.map(option => {
+            return (h("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 {
@@ -71,8 +44,7 @@ const SdRadioGroup$1 = /*@__PURE__*/ proxyCustomElement(class SdRadioGroup exten
         "radioOptions": [1040],
         "direction": [1],
         "disabled": [4],
-        "name": [1],
-        "selectedValue": [32]
+        "groupName": [1, "group-name"]
     }, undefined, {
         "value": ["valueChanged"]
     }]);
@@ -80,13 +52,18 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["sd-radio-group"];
+    const components = ["sd-radio-group", "sd-radio"];
     components.forEach(tagName => { switch (tagName) {
         case "sd-radio-group":
             if (!customElements.get(transformTag(tagName))) {
                 customElements.define(transformTag(tagName), SdRadioGroup$1);
             }
             break;
+        case "sd-radio":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$2();
+            }
+            break;
     } });
 }
 

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

@@ -1 +1 @@
-{"file":"sd-radio-group.js","mappings":"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","names":["SdRadioGroup","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-radio-group/sd-radio-group.scss?tag=sd-radio-group","src/components/sd-radio-group/sd-radio-group.tsx"],"sourcesContent":["@import 'variables';\n\nsd-radio-group {\n display: inline-block;\n\n .sd-radio-group {\n  display: flex;\n\n  &--vertical {\n   flex-direction: column;\n   gap: 8px;\n  }\n\n  &--horizontal {\n   flex-direction: row;\n   align-items: center;\n   gap: 20px;\n  }\n\n  &__option {\n   width: fit-content;\n   display: flex;\n   align-items: center;\n   gap: 8px;\n   font-weight: 400;\n   font-size: 12px;\n   line-height: 20px;\n   cursor: pointer;\n\n   &:has(input:disabled) {\n    cursor: not-allowed;\n   }\n\n   input {\n    position: relative;\n    appearance: none;\n    margin: 0;\n    width: 16px;\n    height: 16px;\n    border: 1px solid $grey_65;\n    border-radius: 50%;\n    cursor: pointer;\n    accent-color: $brilliantblue_75;\n    background-color: white;\n\n    &:checked {\n     border-color: $brilliantblue_75;\n     background-color: white;\n    }\n\n    &:checked::before {\n     content: '';\n     position: absolute;\n     top: 50%;\n     left: 50%;\n     transform: translate(-50%, -50%);\n     width: 10px;\n     height: 10px;\n     border-radius: 50%;\n     background-color: $brilliantblue_75;\n    }\n\n    &:disabled {\n     cursor: not-allowed;\n     border-color: $grey_45;\n     background-color: $grey_20;\n    }\n\n    &:disabled:checked::before {\n     background-color: $grey_45;\n    }\n\n    &:not(:disabled):hover {\n     border-color: $brilliantblue_75;\n     background-color: $brilliantblue_25;\n    }\n   }\n  }\n\n  &__label {\n   font-size: 12px;\n   color: $grey_90;\n   line-height: 20px;\n   user-select: none;\n  }\n\n  &__option--disabled {\n   cursor: not-allowed;\n\n   .sd-radio-group__label {\n    color: $grey_65;\n   }\n  }\n }\n}","import { Component, Prop, h, EventEmitter, Event, State, Watch } 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-group',\n styleUrl: 'sd-radio-group.scss',\n})\nexport class SdRadioGroup {\n @Prop({ mutable: true, reflect: true }) value!: RadioValue;\n\n @Prop({ mutable: true }) radioOptions: RadioOption[] = [];\n\n @Prop() direction: 'horizonal' | 'vertical' = 'vertical';\n\n @Prop() disabled: boolean = false;\n\n @Prop() name?: string;\n\n @State() private selectedValue!: RadioValue;\n\n @Event({ eventName: 'sdUpdate' })\n change!: EventEmitter<RadioValue>;\n\n componentWillLoad() {\n  if (this.value) {\n   this.selectedValue = this.value;\n  }\n }\n\n @Watch('value')\n valueChanged(newValue: RadioValue) {\n  this.selectedValue = newValue;\n }\n\n private handleRadioChange = (optionValue: RadioValue, optionDisabled?: boolean) => {\n  if (this.disabled || optionDisabled) return;\n  this.selectedValue = optionValue;\n  this.value = optionValue;\n  this.change.emit(optionValue);\n };\n\n private isOptionSelected(option: RadioOption): boolean {\n  return this.selectedValue === option.value;\n }\n\n private isOptionDisabled(option: RadioOption): boolean {\n  return this.disabled || !!option.disabled;\n }\n\n private getRadioClasses(option: RadioOption): string {\n  const classes = [\n   'sd-radio-group__option',\n   this.isOptionSelected(option)\n    ? 'sd-radio-group__option--selected'\n    : 'sd-radio-group__option--unselected',\n  ];\n\n  if (this.isOptionDisabled(option)) {\n   classes.push('sd-radio-group__option--disabled');\n  }\n\n  return classes.join(' ');\n }\n\n private getGroupClasses(): string {\n  const classes = ['sd-radio-group', `sd-radio-group--${this.direction}`];\n  return classes.join(' ');\n }\n\n render() {\n  const groupName = this.name || `sd-radio-group-${Math.random().toString(36).substring(2, 11)}`;\n\n  return (\n   <div\n    class={this.getGroupClasses()}\n    role=\"radiogroup\"\n    // aria-disabled={this.disabled.toString()}\n   >\n    {this.radioOptions.map((option, index) => {\n     const isSelected = this.isOptionSelected(option);\n     const isDisabled = this.isOptionDisabled(option);\n\n     return (\n      <label\n       key={`radio-${index}`}\n       class={this.getRadioClasses(option)}\n       role=\"radio\"\n       aria-checked={isSelected.toString()}\n       aria-disabled={isDisabled.toString()}\n       aria-label={option.label || 'radio option'}\n      >\n       <input\n        type=\"radio\"\n        name={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-group__label\">{option.label}</span>}\n      </label>\n     );\n    })}\n   </div>\n  );\n }\n}\n"],"version":3}
+{"file":"sd-radio-group.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,MAAM,CAAC,0xCAA0xC,CAAC;;MCa7yCA,cAAY,iBAAAC,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;;;;;;;;AACgB,IAAA,KAAK;IAEpB,YAAY,GAAkB,EAAE;IAEjD,SAAS,GAA8B,UAAU;IAEjD,QAAQ,GAAY,KAAK;AAEzB,IAAA,SAAS;AAGjB,IAAA,MAAM;AAGN,IAAA,YAAY,CAAC,QAAoB,EAAA;AAChC,QAAA,IAAI,CAAC,KAAK,GAAG,QAAQ;;AAGd,IAAA,iBAAiB,GAAG,CAAC,WAAuB,KAAI;QACvD,IAAI,IAAI,CAAC,QAAQ;YAAE;AAEnB,QAAA,IAAI,CAAC,KAAK,GAAG,WAAW;AACxB,QAAA,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,WAAW,CAAC;AAC/B,KAAC;IAEO,eAAe,GAAA;QACtB,MAAM,OAAO,GAAG,CAAC,gBAAgB,EAAE,CAAmB,gBAAA,EAAA,IAAI,CAAC,SAAS,CAAE,CAAA,CAAC;AACvE,QAAA,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;;IAGzB,MAAM,GAAA;AACL,QAAA,QACC,4DAAK,KAAK,EAAE,IAAI,CAAC,eAAe,EAAE,EAAE,IAAI,EAAC,YAAY,EAAA,EACnD,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,MAAM,IAAG;AAC/B,YAAA,QACC,CAAA,CAAA,UAAA,EAAA,EACC,GAAG,EAAE,CAAS,MAAA,EAAA,MAAM,CAAC,KAAK,EAAE,EAC5B,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,EACzB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,CAAC,MAAM,CAAC,QAAQ,EAC5C,UAAU,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,EACzD,CAAA;SAEH,CAAC,CACG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SdRadioGroup","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-radio-group/sd-radio-group.scss?tag=sd-radio-group","src/components/sd-radio-group/sd-radio-group.tsx"],"sourcesContent":["@import 'variables';\n@import '../sd-radio/sd-radio.scss';\n\nsd-radio-group {\n display: inline-block;\n\n .sd-radio-group {\n  display: flex;\n\n  &--vertical {\n   flex-direction: column;\n   gap: 8px;\n  }\n\n  &--horizontal {\n   flex-direction: row;\n   align-items: center;\n   gap: 20px;\n  }\n\n  // &__option {\n  //  width: fit-content;\n  //  display: flex;\n  //  align-items: center;\n  //  gap: 8px;\n  //  font-weight: 400;\n  //  font-size: 12px;\n  //  line-height: 20px;\n  //  cursor: pointer;\n\n  //  &:has(input:disabled) {\n  //   cursor: not-allowed;\n  //  }\n\n  //  input {\n  //   position: relative;\n  //   appearance: none;\n  //   margin: 0;\n  //   width: 16px;\n  //   height: 16px;\n  //   border: 1px solid $grey_65;\n  //   border-radius: 50%;\n  //   cursor: pointer;\n  //   accent-color: $brilliantblue_75;\n  //   background-color: white;\n\n  //   &:checked {\n  //    border-color: $brilliantblue_75;\n  //    background-color: white;\n  //   }\n\n  //   &:checked::before {\n  //    content: '';\n  //    position: absolute;\n  //    top: 50%;\n  //    left: 50%;\n  //    transform: translate(-50%, -50%);\n  //    width: 10px;\n  //    height: 10px;\n  //    border-radius: 50%;\n  //    background-color: $brilliantblue_75;\n  //   }\n\n  //   &:disabled {\n  //    cursor: not-allowed;\n  //    border-color: $grey_45;\n  //    background-color: $grey_20;\n  //   }\n\n  //   &:disabled:checked::before {\n  //    background-color: $grey_45;\n  //   }\n\n  //   &:not(:disabled):hover {\n  //    border-color: $brilliantblue_75;\n  //    background-color: $brilliantblue_25;\n  //   }\n  //  }\n  // }\n\n  // &__label {\n  //  font-size: 12px;\n  //  color: $grey_90;\n  //  line-height: 20px;\n  //  -webkit-user-select: none;\n  //  user-select: none;\n  // }\n\n  // &__option--disabled {\n  //  cursor: not-allowed;\n\n  //  .sd-radio-group__label {\n  //   color: $grey_65;\n  //  }\n  // }\n }\n}\n","import { Component, Prop, h, EventEmitter, Event, Watch } from '@stencil/core';\nimport { RadioValue } from '../sd-radio/sd-radio';\n\nexport type RadioOption = {\n label: string;\n value: RadioValue;\n disabled?: boolean;\n};\n\n@Component({\n tag: 'sd-radio-group',\n styleUrl: 'sd-radio-group.scss',\n})\nexport class SdRadioGroup {\n @Prop({ mutable: true, reflect: true }) value!: RadioValue;\n\n @Prop({ mutable: true }) radioOptions: RadioOption[] = [];\n\n @Prop() direction: 'horizontal' | 'vertical' = 'vertical';\n\n @Prop() disabled: boolean = false;\n\n @Prop() groupName?: string;\n\n @Event({ eventName: 'sdUpdate' })\n change!: EventEmitter<RadioValue>;\n\n @Watch('value')\n valueChanged(newValue: RadioValue) {\n  this.value = newValue;\n }\n\n private handleRadioChange = (optionValue: RadioValue) => {\n  if (this.disabled) return;\n\n  this.value = optionValue;\n  this.change?.emit(optionValue);\n };\n\n private getGroupClasses(): string {\n  const classes = ['sd-radio-group', `sd-radio-group--${this.direction}`];\n  return classes.join(' ');\n }\n\n render() {\n  return (\n   <div class={this.getGroupClasses()} role=\"radiogroup\">\n    {this.radioOptions.map(option => {\n     return (\n      <sd-radio\n       key={`radio-${option.value}`}\n       val={String(option.value)}\n       value={this.value}\n       label={option.label}\n       disabled={this.disabled || !!option.disabled}\n       onSdUpdate={({ detail }) => this.handleRadioChange(detail)}\n      />\n     );\n    })}\n   </div>\n  );\n }\n}\n"],"version":3}

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

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SdRadio extends Components.SdRadio, HTMLElement {}
+export const SdRadio: {
+    prototype: SdRadio;
+    new (): SdRadio;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/sd-radio.js

@@ -0,0 +1,9 @@
+import { S as SdRadio$1, d as defineCustomElement$1 } from './p-BBVGfsbU.js';
+
+const SdRadio = SdRadio$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SdRadio, defineCustomElement };
+//# sourceMappingURL=sd-radio.js.map
+
+//# sourceMappingURL=sd-radio.js.map

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

@@ -0,0 +1 @@
+{"file":"sd-radio.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/sd-select-dropdown.js

@@ -1,4 +1,4 @@
-import { S as SdSelectDropdown$1, d as defineCustomElement$1 } from './p-s4Mg_xSz.js';
+import { S as SdSelectDropdown$1, d as defineCustomElement$1 } from './p-CZ0RizvY.js';
 
 const SdSelectDropdown = SdSelectDropdown$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sd-select-multiple-group.js

@@ -1,15 +1,15 @@
 import { p as proxyCustomElement, d as createEvent, h, F as Fragment, t as transformTag } from './p-YLoygqPr.js';
 import { B as BaseDropdownEvent, S as SelectKeyboardNavigation } from './p-Dt-KAeBx.js';
-import { d as defineCustomElement$b } from './p-CdGD6AqM.js';
-import { d as defineCustomElement$a } from './p-UZEmuyIR.js';
-import { d as defineCustomElement$9 } from './p-CpRkV7pg.js';
-import { d as defineCustomElement$8 } from './p-CVMprLsE.js';
-import { d as defineCustomElement$7 } from './p-DnQF6htq.js';
-import { d as defineCustomElement$6 } from './p-D54IEoI6.js';
-import { d as defineCustomElement$5 } from './p-DbebUQwg.js';
-import { d as defineCustomElement$4 } from './p-zvZtN3nR.js';
-import { d as defineCustomElement$3 } from './p-RhBqdixM.js';
-import { d as defineCustomElement$2 } from './p-7xekTQRB.js';
+import { d as defineCustomElement$b } from './p-B-HVIIWo.js';
+import { d as defineCustomElement$a } from './p-ldcuoYNT.js';
+import { d as defineCustomElement$9 } from './p-COJpIimp.js';
+import { d as defineCustomElement$8 } from './p-CmghyzXg.js';
+import { d as defineCustomElement$7 } from './p-Sw7TJWkF.js';
+import { d as defineCustomElement$6 } from './p-B9qGa5dx.js';
+import { d as defineCustomElement$5 } from './p-o-oFeHDX.js';
+import { d as defineCustomElement$4 } from './p-DBzZUOVq.js';
+import { d as defineCustomElement$3 } from './p-9E-u4GN-.js';
+import { d as defineCustomElement$2 } from './p-Dtljyq_t.js';
 
 const sdSelectMultipleGroupCss = () => `.sd-select-multiple-group__dropdown{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-select-multiple-group__dropdown::-webkit-scrollbar{opacity:0;background:#e5e5e5}.sd-select-multiple-group__dropdown::-webkit-scrollbar:horizontal{height:8px}.sd-select-multiple-group__dropdown::-webkit-scrollbar:vertical{width:8px}.sd-select-multiple-group__dropdown::-webkit-scrollbar-thumb{height:80px;background-color:#cccccc;border-radius:4px}.sd-select-multiple-group__dropdown::-webkit-scrollbar-track{background-color:transparent}.sd-select-multiple-group__dropdown .sd-select-multiple-group__option-placeholder{height:48px;display:flex;align-items:center;padding:8px 16px;font-size:12px;line-height:0;text-align:left;color:#888888}sd-select-multiple-group{display:inline-flex;flex-flow:column nowrap;width:fit-content;height:fit-content}sd-select-multiple-group:focus,sd-select-multiple-group:focus-visible,sd-select-multiple-group:focus-within{outline:none !important}sd-select-multiple-group .sd-select-multiple-group{width:100%}sd-select-multiple-group .sd-select-multiple-group .sd-select-multiple-group__trigger{padding:4px 20px 4px 12px;display:flex;width:100%;align-items:center}sd-select-multiple-group .sd-select-multiple-group .sd-select-multiple-group__trigger .sd-select-multiple-group__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400}sd-select-multiple-group .sd-select-multiple-group .sd-select-multiple-group__trigger .sd-select-multiple-group__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}sd-select-multiple-group .sd-select-multiple-group .sd-select-multiple-group__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease}sd-select-multiple-group .sd-select-multiple-group .sd-select-multiple-group__arrow--open{transform:rotate(180deg)}.sd-select-multiple-group__dropdown{width:var(--select-width, 200px);max-height:var(--select-dropdown-height, 260px);padding-bottom:2px;background-color:white;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);border-radius:4px;overflow-y:auto;color:#333333;opacity:0.5;transition:opacity 0.15s ease-in}.sd-select-multiple-group__dropdown--ready{opacity:1}`;
 
@@ -405,7 +405,7 @@ const SdSelectMultipleGroup$1 = /*@__PURE__*/ proxyCustomElement(class SdSelectM
         });
     }
     render() {
-        return (h("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' } }, h("div", { key: '80c1db9cd2c47e4acfece06a9b23896cc0acef88', class: {
+        return (h("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' } }, h("div", { key: '9db18413433f62c0530c6189cbcd6e11e12fc8ae', class: {
                 'sd-select-multiple-group': true,
                 'sd-select-multiple-group--open': this.isOpen,
                 'sd-select-multiple-group--disabled': this.disabled,

package/dist/components/sd-select-multiple.js

@@ -1,16 +1,16 @@
 import { p as proxyCustomElement, d as createEvent, h, t as transformTag } from './p-YLoygqPr.js';
 import { B as BaseDropdownEvent, S as SelectKeyboardNavigation } from './p-Dt-KAeBx.js';
-import { d as defineCustomElement$c } from './p-CdGD6AqM.js';
-import { d as defineCustomElement$b } from './p-UZEmuyIR.js';
-import { d as defineCustomElement$a } from './p-CpRkV7pg.js';
-import { d as defineCustomElement$9 } from './p-CVMprLsE.js';
-import { d as defineCustomElement$8 } from './p-DnQF6htq.js';
-import { d as defineCustomElement$7 } from './p-D54IEoI6.js';
-import { d as defineCustomElement$6 } from './p-DbebUQwg.js';
-import { d as defineCustomElement$5 } from './p-s4Mg_xSz.js';
-import { d as defineCustomElement$4 } from './p-JF61vPAh.js';
-import { d as defineCustomElement$3 } from './p-RhBqdixM.js';
-import { d as defineCustomElement$2 } from './p-7xekTQRB.js';
+import { d as defineCustomElement$c } from './p-B-HVIIWo.js';
+import { d as defineCustomElement$b } from './p-ldcuoYNT.js';
+import { d as defineCustomElement$a } from './p-COJpIimp.js';
+import { d as defineCustomElement$9 } from './p-CmghyzXg.js';
+import { d as defineCustomElement$8 } from './p-Sw7TJWkF.js';
+import { d as defineCustomElement$7 } from './p-B9qGa5dx.js';
+import { d as defineCustomElement$6 } from './p-o-oFeHDX.js';
+import { d as defineCustomElement$5 } from './p-CZ0RizvY.js';
+import { d as defineCustomElement$4 } from './p-BsBjOh8u.js';
+import { d as defineCustomElement$3 } from './p-9E-u4GN-.js';
+import { d as defineCustomElement$2 } from './p-Dtljyq_t.js';
 
 const sdSelectMultipleCss = () => `sd-select-multiple{display:inline-flex;flex-flow:column nowrap;width:fit-content;height:fit-content}sd-select-multiple *:focus,sd-select-multiple *:focus-visible,sd-select-multiple *:focus-within{outline:none !important}sd-select-multiple .sd-select-multiple{width:100%}sd-select-multiple .sd-select-multiple .sd-select-multiple__trigger{padding:4px 28px 4px 12px;display:flex;width:100%;align-items:center}sd-select-multiple .sd-select-multiple .sd-select-multiple__trigger .sd-select-multiple__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400;text-align:left}sd-select-multiple .sd-select-multiple .sd-select-multiple__trigger .sd-select-multiple__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}sd-select-multiple .sd-select-multiple__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease;margin-left:8px}sd-select-multiple .sd-select-multiple__arrow--open{transform:rotate(180deg)}`;
 
@@ -164,7 +164,7 @@ const SdSelectMultiple$1 = /*@__PURE__*/ proxyCustomElement(class SdSelectMultip
         this.handleOptionSelection(option);
     };
     render() {
-        return (h("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' } }, h("div", { key: '0d90b8368287d7e67a384234a976da5d387b065b', class: {
+        return (h("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' } }, h("div", { key: 'aa86839508c103bbe70287877020ec3eb82b7190', class: {
                 'sd-select-multiple': true,
                 'sd-select-multiple--open': this.isOpen,
                 'sd-select-multiple--disabled': this.disabled,

package/dist/components/sd-select-option-group.js

@@ -1,4 +1,4 @@
-import { S as SdSelectOptionGroup$1, d as defineCustomElement$1 } from './p-zvZtN3nR.js';
+import { S as SdSelectOptionGroup$1, d as defineCustomElement$1 } from './p-DBzZUOVq.js';
 
 const SdSelectOptionGroup = SdSelectOptionGroup$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sd-select-option.js

@@ -1,4 +1,4 @@
-import { S as SdSelectOption$1, d as defineCustomElement$1 } from './p-JF61vPAh.js';
+import { S as SdSelectOption$1, d as defineCustomElement$1 } from './p-BsBjOh8u.js';
 
 const SdSelectOption = SdSelectOption$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sd-select-search-input.js

@@ -1,4 +1,4 @@
-import { S as SdSelectSearchInput$1, d as defineCustomElement$1 } from './p-RhBqdixM.js';
+import { S as SdSelectSearchInput$1, d as defineCustomElement$1 } from './p-9E-u4GN-.js';
 
 const SdSelectSearchInput = SdSelectSearchInput$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sd-select.js

@@ -1,4 +1,4 @@
-import { S as SdSelect$1, d as defineCustomElement$1 } from './p-D2movWkD.js';
+import { S as SdSelect$1, d as defineCustomElement$1 } from './p-DYLnDz12.js';
 
 const SdSelect = SdSelect$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sd-table.js

@@ -1,18 +1,18 @@
 import { p as proxyCustomElement, H, d as createEvent, e as readTask, h, c as Host, t as transformTag } from './p-YLoygqPr.js';
-import { d as defineCustomElement$f } from './p-CdGD6AqM.js';
-import { d as defineCustomElement$e } from './p-UZEmuyIR.js';
-import { d as defineCustomElement$d } from './p-CpRkV7pg.js';
-import { d as defineCustomElement$c } from './p-CVMprLsE.js';
-import { d as defineCustomElement$b } from './p-DnQF6htq.js';
-import { d as defineCustomElement$a } from './p-D54IEoI6.js';
-import { d as defineCustomElement$9 } from './p-DdKGhMHk.js';
-import { d as defineCustomElement$8 } from './p-DxSmO6Tr.js';
-import { d as defineCustomElement$7 } from './p-DbebUQwg.js';
-import { d as defineCustomElement$6 } from './p-D2movWkD.js';
-import { d as defineCustomElement$5 } from './p-s4Mg_xSz.js';
-import { d as defineCustomElement$4 } from './p-JF61vPAh.js';
-import { d as defineCustomElement$3 } from './p-RhBqdixM.js';
-import { d as defineCustomElement$2 } from './p-7xekTQRB.js';
+import { d as defineCustomElement$f } from './p-B-HVIIWo.js';
+import { d as defineCustomElement$e } from './p-ldcuoYNT.js';
+import { d as defineCustomElement$d } from './p-COJpIimp.js';
+import { d as defineCustomElement$c } from './p-CmghyzXg.js';
+import { d as defineCustomElement$b } from './p-Sw7TJWkF.js';
+import { d as defineCustomElement$a } from './p-B9qGa5dx.js';
+import { d as defineCustomElement$9 } from './p-D1kEesx2.js';
+import { d as defineCustomElement$8 } from './p-CuHSbj5E.js';
+import { d as defineCustomElement$7 } from './p-o-oFeHDX.js';
+import { d as defineCustomElement$6 } from './p-DYLnDz12.js';
+import { d as defineCustomElement$5 } from './p-CZ0RizvY.js';
+import { d as defineCustomElement$4 } from './p-BsBjOh8u.js';
+import { d as defineCustomElement$3 } from './p-9E-u4GN-.js';
+import { d as defineCustomElement$2 } from './p-Dtljyq_t.js';
 
 const sdTableCss = () => `.sd-table__wrapper .sd-table__container .sd-table__middle{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar{opacity:0;background:#e5e5e5}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar:horizontal{height:8px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar:vertical{width:8px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar-thumb{height:80px;background-color:#cccccc;border-radius:4px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar-track{background-color:transparent}.sd-table__wrapper{height:var(--table-height, auto);width:var(--table-width, 100%);color:#222222}.sd-table__wrapper .sd-table__container{width:100%;height:var(--table-container-height, auto);display:flex;flex-direction:column;position:relative;border:1px solid #e1e1e1;border-radius:8px;font-size:12px;overflow:hidden;background:#ffffff}.sd-table__wrapper .sd-table__container .sd-table__middle{overflow:auto;will-change:scroll-position;min-height:var(--table-container-height, auto)}.sd-table__wrapper .sd-table__container .sd-table__middle--scrollable{height:var(--table-container-height, auto)}.sd-table__wrapper .sd-table__container .sd-table__middle--loading{overflow:hidden !important;pointer-events:none}.sd-table__wrapper .sd-table__container .sd-table__middle--loading__spinner{position:absolute;top:0;left:0;width:100%;height:var(--table-container-height, 100%);min-height:var(--table-container-height, 100%);background:rgba(255, 255, 255, 0.6);z-index:200;display:flex;align-items:center;justify-content:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table{background-color:white;display:table;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll{position:relative;height:var(--total-virtual-height, --table-container-height, auto)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll tr:not([aria-hidden=true]){width:100%}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll tr[aria-hidden=true]{padding:0;border:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll tr[aria-hidden=true]:not(.sd-table__virtual-row-spacer) td{display:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable td.sd-td--selected,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable th.sd-th--selected{position:relative;width:52px !important;max-width:52px !important;min-width:52px !important;padding:0 10px 0 24px;text-align:left}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable td.sd-td--selected sd-checkbox label,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable th.sd-th--selected sd-checkbox label{position:relative}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable td.sd-td--selected sd-checkbox label:before,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable th.sd-th--selected sd-checkbox label:before{content:"";position:absolute;inset:-6px}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-header thead{position:sticky;top:0;z-index:120}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-left,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-right{position:sticky;background-color:#f5faff;z-index:110 !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-left,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-right{position:sticky;background-color:white;z-index:100 !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-left{left:var(--sticky-left-offset, 0)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-right{right:var(--sticky-right-offset, 0)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-cell{position:sticky;z-index:102;background-color:#f5faff}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-cell{position:sticky;z-index:101;background-color:white}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left td.sticky-left-edge{overflow:visible}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge:after,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left td.sticky-left-edge:after{content:"";position:absolute;top:0;left:100%;right:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset 12px 0 20px -25px;opacity:1;pointer-events:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right td.sticky-right-edge{overflow:visible}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge:after,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right td.sticky-right-edge:after{content:"";position:absolute;top:0;left:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset -12px 0 20px -25px;opacity:1;pointer-events:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--no-data thead{opacity:0.4}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--no-data thead tr th.sd-th{border-bottom:1px solid rgba(225, 225, 225, 0.4) !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-td,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-th,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table .sd-th__content--label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead{height:36px}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr{width:100%}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th{background:#f5faff;height:36px;padding:0 16px;font-weight:500;vertical-align:middle;border-bottom:1px solid #e1e1e1;-webkit-user-select:none;user-select:none;position:relative}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content{display:flex;flex-flow:row nowrap;align-items:center;gap:4px}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--left{justify-content:flex-start}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--center{justify-content:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--right{justify-content:flex-end}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__resizer{position:absolute;top:50%;right:0;transform:translateY(-50%);width:4px;height:16px;cursor:col-resize;z-index:3;border-left:1px solid #cccccc;border-right:1px solid #cccccc}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td{height:44px;padding:0 16px;border-bottom:1px solid #e1e1e1;background:white;vertical-align:middle}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--left{text-align:left}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--center{text-align:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--right{text-align:right}.sd-table__wrapper .sd-table__container .sd-table__bottom{background:transparent;text-align:center;display:flex;align-items:center;justify-content:center;flex:1;min-height:240px;translate:0 -10%;pointer-events:none}.sd-table__wrapper .sd-table__container .sd-table__bottom .sd-table__no-data{font-size:12px;color:#888888}.sd-table__wrapper .sd-table__pagination{position:relative;background:#f9f9f9;height:48px;display:flex;align-items:center;justify-content:center;border:1px solid #e1e1e1;border-top:none;border-radius:8px}.sd-table__wrapper .sd-table__pagination sd-select{position:absolute;right:10px;top:50%;transform:translateY(-50%)}.sd-table__wrapper .sd-table__virtual-spacer,.sd-table__wrapper .sd-table__virtual-row-spacer{padding:0 !important}.sd-table__wrapper .sd-table__virtual-spacer td,.sd-table__wrapper .sd-table__virtual-row-spacer td{padding:0 !important;border:none}.sd-table__wrapper .sd-table__virtual-spacer .sd-table__skeleton,.sd-table__wrapper .sd-table__virtual-row-spacer .sd-table__skeleton{width:100%;height:100%;background-image:repeating-linear-gradient(0deg, rgba(246, 246, 246, 0.3) 0px, rgba(225, 225, 225, 0.5) calc(var(--row-height, 44px) / 2), rgba(246, 246, 246, 0.3) var(--row-height, 44px));background-size:100% 200%;animation:skeleton-loading 1.5s ease-in-out infinite;position:relative}.sd-table__wrapper .sd-table__virtual-spacer .sd-table__skeleton::before,.sd-table__wrapper .sd-table__virtual-row-spacer .sd-table__skeleton::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-image:repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--row-height, 44px) - 1px), #e1e1e1 calc(var(--row-height, 44px) - 1px), #e1e1e1 var(--row-height, 44px));pointer-events:none}.sd-table__wrapper .sd-table__skeleton-cell{width:100%;height:20px;background:linear-gradient(90deg, rgba(246, 246, 246, 0.3) 0%, rgba(225, 225, 225, 0.5) 50%, rgba(246, 246, 246, 0.3) 100%);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px}@keyframes skeleton-loading{0%{background-position:0% 0%}50%{background-position:100% 100%}100%{background-position:0% 0%}}`;
 
@@ -662,16 +662,16 @@ const SdTable$1 = /*@__PURE__*/ proxyCustomElement(class SdTable extends H {
             }, "aria-hidden": "true" }, h("div", { class: "sd-table__skeleton-cell" })));
     }
     render() {
-        return (h(Host, { key: 'e6ec01e7493b69bab1bf2766d9c322cee388b274' }, h("div", { key: 'cc717d111a6ce64c34b6a23b1feb9cc8933a0438', class: "sd-table__wrapper", style: {
+        return (h(Host, { key: 'd9944a23c05504be55e6ac1926c0982967ea26c3' }, h("div", { key: 'ab16b21be017394b9be38c65c31ffafcfb5d1699', class: "sd-table__wrapper", style: {
                 '--table-width': this.width,
                 '--table-height': this.height,
-            } }, h("div", { key: '0c89a798a475bb25c10c5959b5e50c81f01503c4', class: "sd-table__container", style: {
+            } }, h("div", { key: 'fe5bc2a359a2c100432213679e897b01b5c14c52', class: "sd-table__container", style: {
                 '--table-container-height': `calc(${this.height} - ${this.pagination && this.innerRows.length > 0 ? 48 : 0}px)`,
-            } }, h("div", { key: 'e83ee499928d95e719ffca0411a422deeed162d0', class: {
+            } }, h("div", { key: '61a7e17e93ce3427c65fc9e3dece30838720640d', class: {
                 'sd-table__middle': true,
                 'sd-table__middle--scrollable': this.paginatedRows.length > 0,
                 'sd-table__middle--loading': this.isLoading,
-            } }, this.isLoading && (h("div", { key: '30d8283122a21484e0029128e637fdd9a5c6ae8c', class: "sd-table__middle--loading__spinner" }, h("sd-loading-spinner", { key: '92911a08fa4d0776712e8c30be2f16d59d512cbc' }))), h("table", { key: '209eb39f61bb46e9027046be619da492be2b080e', part: "table", class: this.sdTableClasses }, this.renderHead(), this.renderBody())), !this.paginatedRows.length && (h("div", { key: 'cb1fccb96bb51a4e14d40c2ff286f17d8bc8ce11', class: "sd-table__bottom" }, h("div", { key: '9149ee50257114145d14e0666239f72dcfc5b01a', class: "sd-table__no-data" }, h("slot", { key: 'a5ead23bc5a2e32418473f6f6737f3b156177842', name: "no-data" }, this.noDataLabel))))), this.pagination && this.innerRows.length > 0 && (h("div", { key: 'd5482e1bb04d20579a88841bf8d885d08c1593b1', class: "sd-table__pagination" }, h("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 && (h("sd-select", { key: 'dfb3ba8654e33dc334392f37189f422d6a1f1416', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdUpdate: (e) => this.changeRowsPerPage(e.detail.value) })))))));
+            } }, this.isLoading && (h("div", { key: 'ad87480a5c5e62330fe21a03d16b4d2c61f144dc', class: "sd-table__middle--loading__spinner" }, h("sd-loading-spinner", { key: 'd1232190a8b326504f6d016fb72ac706a25a3697' }))), h("table", { key: 'a24fe9f8fca8fac2f80c23662311baf332abe508', part: "table", class: this.sdTableClasses }, this.renderHead(), this.renderBody())), !this.paginatedRows.length && (h("div", { key: '6efc9f3210295cd98b2a3ce550df4c9af99d8d2a', class: "sd-table__bottom" }, h("div", { key: 'c568913f977026f3be8c7bec8a6ee448ad1e5a33', class: "sd-table__no-data" }, h("slot", { key: '5906d9ad73bb4ab7311ab5b78b91d877653e2031', name: "no-data" }, this.noDataLabel))))), this.pagination && this.innerRows.length > 0 && (h("div", { key: 'f736e90da9697044655d02dc0f2bfa2c19538d50', class: "sd-table__pagination" }, h("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 && (h("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"],

package/dist/components/sd-tabs.js

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, d as createEvent, h, t as transformTag } from './p-YLoygqPr.js';
-import { d as defineCustomElement$2 } from './p-DssRJcAn.js';
+import { d as defineCustomElement$2 } from './p-VrppUi4Q.js';
 
 const sdTabsCss = () => `sd-tabs{display:inline-block}sd-tabs .sd-tabs{display:flex;flex-direction:row;gap:4px;border-bottom:1px solid #0075ff}sd-tabs .sd-tabs__tab{display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;border:1px solid #cccccc;border-bottom:none;border-radius:4px 4px 0 0;background-color:#f6f6f6;color:#888888;font-weight:400;transition:all 0.2s ease;position:relative;user-select:none}sd-tabs .sd-tabs__tab::before{content:"";position:absolute;inset:0;opacity:0;transition:all 0.3s}sd-tabs .sd-tabs__tab--selected{border-color:#0075ff;color:#0075ff;background-color:white}sd-tabs .sd-tabs__tab--selected .sd-tabs__label::before{font-weight:700}sd-tabs .sd-tabs__tab--selected:hover::before{background-color:#0075ff;opacity:0.15}sd-tabs .sd-tabs__tab--unselected:hover::before{background-color:#888888;opacity:0.15}sd-tabs .sd-tabs__label{user-select:none;font-weight:700;visibility:hidden;position:relative}sd-tabs .sd-tabs__label::before{content:attr(data-label);visibility:visible;position:absolute;inset:0;font-weight:400;transition:font-weight 0.2s ease}sd-tabs .sd-tabs--md .sd-tabs__tab{padding:12px 32px;font-size:12px;line-height:20px}sd-tabs .sd-tabs--sm .sd-tabs__tab{padding:8px 20px;font-size:12px;line-height:16px}sd-tabs .sd-tabs--sub{gap:32px;border-bottom:none}sd-tabs .sd-tabs--sub .sd-tabs__tab{border:none;border-radius:0;background-color:transparent;color:#222222;font-weight:400;padding:0 0 2px 0;position:relative}sd-tabs .sd-tabs--sub .sd-tabs__tab::before{content:"";position:absolute;top:100%;left:0;right:0;height:1px;width:100%;background-color:#0075ff;opacity:0;transition:opacity 0.2s ease}sd-tabs .sd-tabs--sub .sd-tabs__tab::after{font-weight:400}sd-tabs .sd-tabs--sub .sd-tabs__tab--selected{color:#0075ff;background-color:transparent}sd-tabs .sd-tabs--sub .sd-tabs__tab--selected::before{opacity:1}sd-tabs .sd-tabs--sub .sd-tabs__tab--selected::after{font-weight:700}`;
 
@@ -53,7 +53,7 @@ const SdTabs$1 = /*@__PURE__*/ proxyCustomElement(class SdTabs extends H {
         return { bgColor: '#E5E5E5', textColor: '#737373' };
     }
     render() {
-        return (h("div", { key: '1f9b39d82a7a98bb9dffd522d9f703b41682ae71', class: this.getContainerClasses() }, this.tabs.map((tab, index) => {
+        return (h("div", { key: '94f5cca8addf2b30907ba17a1b729c4904fd42cf', class: this.getContainerClasses() }, this.tabs.map((tab, index) => {
             const badgeColors = this.getBadgeColors(tab);
             return (h("div", { key: `tab-${index}`, class: this.getTabClasses(tab), "aria-label": tab.label || 'tab', onClick: () => this.handleTabClick(tab.value) }, h("span", { "data-label": tab.label, class: "sd-tabs__label" }, tab.label), tab.badge && (h("sd-tag", { size: this.size, label: tab.badge.toString(), bgColor: badgeColors.bgColor, textColor: badgeColors.textColor, rounded: false }))));
         })));

package/dist/components/sd-tag.js

@@ -1,4 +1,4 @@
-import { S as SdTag$1, d as defineCustomElement$1 } from './p-DssRJcAn.js';
+import { S as SdTag$1, d as defineCustomElement$1 } from './p-VrppUi4Q.js';
 
 const SdTag = SdTag$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sd-textarea.js

@@ -93,10 +93,10 @@ const SdTextarea$1 = /*@__PURE__*/ proxyCustomElement(class SdTextarea extends H
             }
             : {};
         const maxLengthCounter = this.getMaxLengthCounter();
-        return (h(Host, { key: 'db95720b6b96d950d6435b1881f95d58c6bc4637', style: textareaWidth, class: {
+        return (h(Host, { key: 'e7dcaad4d684e27a8407bb8f577f8b77be9af07c', style: textareaWidth, class: {
                 'sd-textarea': true,
                 [this.getTextareaStatus()]: true,
-            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("div", { key: '3dae36a9b56837fa7d770f295359d8ed9aa2a3e4', class: "sd-textarea__content" }, h("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() && (h("div", { key: 'b0de9e449897f2a8d1e6a7204d2383551d3ae2e4', class: "sd-textarea__footer" }, this.helpText !== undefined && h("span", { key: 'b4528beb70095d70a030a70f451c59e511865fcb', class: "sd-textarea__help-text" }, this.helpText), maxLengthCounter !== null && h("span", { key: 'ce2d33888c7bd85ea240ce00851aec7ecd945adc', class: "sd-textarea__counter" }, maxLengthCounter)))));
+            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("div", { key: '8c7eb8c3859467d50455a6158db3f06940233d5e', class: "sd-textarea__content" }, h("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() && (h("div", { key: '4638ad00f1101c84614c9eb3cc0eb31e539d3e03', class: "sd-textarea__footer" }, this.helpText !== undefined && h("span", { key: '6761ae655b4298a6b4154e4f2b8a8883b1eeaa70', class: "sd-textarea__help-text" }, this.helpText), maxLengthCounter !== null && h("span", { key: 'dc74b623c8469312b805970c42d0c38c9b2d95ad', class: "sd-textarea__counter" }, maxLengthCounter)))));
     }
     static get watchers() { return {
         "value": ["valueChanged"],

package/dist/components/sd-toast-message.js

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, d as createEvent, h, c as Host, t as transformTag } from './p-YLoygqPr.js';
 import { r as resolveColor } from './p-DcGvp3RM.js';
-import { d as defineCustomElement$3 } from './p-CdGD6AqM.js';
-import { d as defineCustomElement$2 } from './p-DnQF6htq.js';
+import { d as defineCustomElement$3 } from './p-B-HVIIWo.js';
+import { d as defineCustomElement$2 } from './p-Sw7TJWkF.js';
 
 const sdToastMessageCss = () => `.sd-toast-message.sc-sd-toast-message{display:flex;width:fit-content;align-items:center;gap:16px;padding:12px 24px;border-radius:4px;background-color:var(--sd-toast-bg);color:var(--sd-toast-text);transition:opacity 0.2s ease, visibility 0.2s ease;box-shadow:2px 2px 8px 2px rgba(0, 0, 0, 0.2)}.sd-toast-message--hidden.sc-sd-toast-message{opacity:0;visibility:hidden;pointer-events:none}.sd-toast-message__icon.sc-sd-toast-message{display:flex;align-items:center;flex-shrink:0}.sd-toast-message__content.sc-sd-toast-message{display:flex;flex:1}.sd-toast-message__message.sc-sd-toast-message{font-size:14px;line-height:20px;font-weight:400}.sd-toast-message__link.sc-sd-toast-message{font-size:14px;line-height:20px;color:var(--sd-toast-text);text-decoration:underline;cursor:pointer;transition:opacity 0.2s ease;margin-left:4px}.sd-toast-message__link.sc-sd-toast-message:hover{opacity:0.8}.sd-toast-message__button.sc-sd-toast-message{flex-shrink:0}.sd-toast-message__button.sc-sd-toast-message button.sc-sd-toast-message{color:var(--button-text-color, inherit) !important}.sd-toast-message__close.sc-sd-toast-message{display:flex;align-items:center;justify-content:center;padding:4px;background-color:transparent;border:none;cursor:pointer;transition:opacity 0.2s ease;flex-shrink:0}.sd-toast-message__close.sc-sd-toast-message:hover{opacity:0.7}.sd-toast-message__close.sc-sd-toast-message:active{opacity:0.5}`;
 
@@ -52,10 +52,10 @@ const SdToastMessage$1 = /*@__PURE__*/ proxyCustomElement(class SdToastMessage e
             background: resolveColor(colorTokens.background),
             text: resolveColor(colorTokens.text),
         };
-        return (h(Host, { key: 'edd60b2a74bae15c88131baedaa3e913dc5326ae', style: {
+        return (h(Host, { key: '6b1a8a827b4e1a09ef648f83ef707a7020b953ee', style: {
                 '--sd-toast-bg': colors.background,
                 '--sd-toast-text': colors.text,
-            } }, h("div", { key: 'b41ad15e9fe7520ee8fbf683f6d95e327c59ac6c', class: this.getContainerClasses(), role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (h("div", { key: 'def78fc8bc05ead9b97144dccc4f105fad953477', class: "sd-toast-message__icon" }, h("sd-icon", { key: 'a01368892d295aee0339fa027663bffe31fb2c2b', name: this.icon, size: 16, color: colors.text }))), h("div", { key: 'f0c6d32da360c2135aee2374b1091c27bddf4d22', class: "sd-toast-message__content" }, h("span", { key: '0f1f7d81154470ad9bcc3d8d4c1ed0c0994da7bb', class: "sd-toast-message__message" }, this.message)), this.link && (h("a", { key: '2a4f7b21940e2234653a18e8a677aba9586d18e3', href: this.link, class: "sd-toast-message__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (h("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 && (h("button", { key: '4bfae7573d5a5204c29d5ef0e2dc71e9a7622d62', type: "button", class: "sd-toast-message__close", onClick: this.handleClose, "aria-label": "Close", title: "Close" }, h("sd-icon", { key: '7ac20a34965ee46c8af76c6c862a69269a73f1a2', name: "close", size: 12, color: colors.text }))))));
+            } }, h("div", { key: 'd442a1ae33c605af863d014e61eaf0a26ba991f7', class: this.getContainerClasses(), role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (h("div", { key: '477651acf80d39aecf5b47d79955aaa990815821', class: "sd-toast-message__icon" }, h("sd-icon", { key: '8563a3a93cdf4e42df02b2e42305f0cba843b6e0', name: this.icon, size: 16, color: colors.text }))), h("div", { key: 'ff283cf84d91688ab29a70c96e19122d3c2a48bf', class: "sd-toast-message__content" }, h("span", { key: '96fa4dbf914710e1dbd5df0df860bb3b912370d9', class: "sd-toast-message__message" }, this.message)), this.link && (h("a", { key: '824c896f3483d19bf6d0e1f233576101a45a123b', href: this.link, class: "sd-toast-message__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (h("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 && (h("button", { key: '1aa66861462bd07f5cc76e8fdaa4e24d2adeff25', type: "button", class: "sd-toast-message__close", onClick: this.handleClose, "aria-label": "Close", title: "Close" }, h("sd-icon", { key: '8b8ecf1a65ae6c4ac0f8132d1f19800960244828', name: "close", size: 12, color: colors.text }))))));
     }
     static get style() { return sdToastMessageCss(); }
 }, [770, "sd-toast-message", {