npm - @sellmate/design-system - Versions diffs - 1.0.0 → 1.0.1 - Mend

@sellmate/design-system 1.0.0 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (247) hide show

package/dist/components/sd-guide.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, h, c as Host, t as transformTag } from './p-YLoygqPr.js';
-import { d as defineCustomElement$4 } from './p-CdGD6AqM.js';
-import { d as defineCustomElement$3 } from './p-DnQF6htq.js';
-import { d as defineCustomElement$2 } from './p-DbebUQwg.js';
+import { d as defineCustomElement$4 } from './p-B-HVIIWo.js';
+import { d as defineCustomElement$3 } from './p-Sw7TJWkF.js';
+import { d as defineCustomElement$2 } from './p-o-oFeHDX.js';
 const sdGuideCss = () => `@charset "UTF-8";sd-button{display:inline-flex;width:fit-content;height:fit-content}.sd-button{text-decoration:none;cursor:pointer;border-radius:4px;transition:all 0.2s ease-in-out;position:relative;overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;border:none}.sd-button--xs{padding:0 8px;font-size:12px;font-weight:500;line-height:20px;min-height:24px}.sd-button--sm{padding:0 12px;font-size:12px;font-weight:500;line-height:20px;min-height:28px}.sd-button--md{padding:0 20px;font-size:16px;font-weight:500;line-height:26px;min-height:34px}.sd-button--lg{padding:0 28px;font-size:18px;font-weight:500;line-height:30px;min-height:62px}.sd-button--primary{background-color:var(--button-color);color:white;transition:filter 0.2s ease}.sd-button--primary::before{content:"";position:absolute;inset:0;background:#000000;opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--primary:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.25}.sd-button--outline{background:white;border:1px solid var(--button-color);color:var(--button-color)}.sd-button--outline::before{content:"";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--outline:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--outline .sd-button__content{position:relative;z-index:1}.sd-button--ghost{background-color:transparent;color:var(--button-color);border-color:transparent}.sd-button--ghost::before{content:"";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--ghost:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--ghost .sd-button__content{position:relative;z-index:1}.sd-button--disabled{border:1px solid #cccccc;background:#e1e1e1;color:#888888;cursor:not-allowed !important}.sd-button--icon-only{padding:0;width:fit-content;height:fit-content;aspect-ratio:1/1}.sd-button--no-hover:hover::before{opacity:0 !important}.sd-button .sd-button__content{display:inline-flex;align-items:center;justify-content:center;gap:4px;z-index:1;font-weight:500}sd-guide{display:inline-flex;align-items:center}sd-guide .sd-guide{display:inline-flex}sd-guide .sd-guide .sd-button{padding:0 16px 0 12px;border-radius:16px;color:#333333 !important;display:flex;align-items:center;transition:none}sd-guide .sd-guide .sd-button .sd-button__content{color:#333333 !important}sd-guide .sd-guide .sd-button .sd-button__content .sd-button__label{color:#333333 !important;margin-left:4px}sd-guide .sd-guide--active .sd-button{border:1px solid #00973c}sd-guide .sd-guide--active .sd-button .sd-button__content .sd-button__label{color:white !important}.sd-guide__popup{position:relative;padding:20px 32px;border-radius:8px;box-shadow:4px 4px 24px 4px rgba(0, 0, 0, 0.1);background:white}.sd-guide__popup>.sd-guide__popup__close{position:absolute;top:12px;right:12px}.sd-guide__popup__header{display:flex;align-items:center;gap:8px;margin-bottom:12px}.sd-guide__popup__header .sd-guide__popup__title{margin-top:0;font-size:16px;font-weight:700;line-height:26px;color:#333333}.sd-guide__popup__list{width:100%;padding:0;margin:0}.sd-guide__popup__list__item{display:flex;width:100%;align-items:start;list-style:none;color:#333333;font-size:12px;font-weight:400}.sd-guide__popup__list__item p{width:100%;padding:0;margin:0;word-wrap:break-word;word-break:break-word;white-space:normal;overflow-wrap:break-word;min-width:0}.sd-guide__popup__list__item::before{display:block;content:"-";width:6px;color:#333333;font-size:12px;font-weight:400;margin-left:10px;margin-right:12px;flex-shrink:0}.sd-guide__popup__list__item--depth-2::before{content:"•"}.sd-guide__popup__list__item--depth-2{padding-left:26px}`;
@@ -59,9 +59,9 @@ const SdGuide$1 = /*@__PURE__*/ proxyCustomElement(class SdGuide extends H {
     };
     render() {
         const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];
-        return (h(Host, { key: 'a7a284528f1bf4c24cbf4c645c600bfdb8ac3397', style: {
+        return (h(Host, { key: '3e9133e450e136c9fb34e5107d2f7fc41ee9b8fe', style: {
                 '--sd-guide-color': GUIDE_ICON[this.type].color,
-            } }, h("sd-button", { key: '7a31bb752942f693d77e687b7ee433772f0fb968', ref: el => (this.guideRef = el), class: this.guideClass, variant: this.popupShow ? 'primary' : 'outline', label: this.label || GUIDE_LABEL[this.type], size: "sm", color: this.popupShow ? GUIDE_ICON[this.type].color : 'grey_45', icon: iconName, iconColor: this.popupShow ? 'white' : iconColor, iconSize: iconSize, noHover: this.popupShow, onClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (h("sd-portal", { key: 'b90a2c0594d2b9a09aad39954400fc648b14b776', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: '5f74f1b359de72ce3224a6d85971dc599e9eca11', style: { position: 'absolute', width: '0px', height: '0px' } }, h("div", { key: 'c7f0fea72dec238904e6ec696f0de8d7b4d99139', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, h("sd-button", { key: '91d375b51051cc6689d57a22615ece587592d4cd', class: "sd-guide__popup__close", icon: "close", color: "grey_65", size: "md", variant: "ghost", noHover: true, onClick: this.closeDropdown }), h("div", { key: '182d31b38da2082c18ed6d25d6879e8e5d5fc839', class: "sd-guide__popup__header" }, h("sd-icon", { key: '21a45f953f436528e8a5a0d08af988cb7cbbbf0c', name: "helpOutline", size: 24, color: "green_65" }), h("h3", { key: 'f6f24e6584b585fb6719327fed01bff87df8b9b9', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), h("ul", { key: '87fc85b3bb2bdd0e902bd7dc81cd6e36447d5241', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
+            } }, h("sd-button", { key: '9d7180ecba36835ea168f1744600447249566e4f', ref: el => (this.guideRef = el), class: this.guideClass, variant: this.popupShow ? 'primary' : 'outline', label: this.label || GUIDE_LABEL[this.type], size: "sm", color: this.popupShow ? GUIDE_ICON[this.type].color : 'grey_45', icon: iconName, iconColor: this.popupShow ? 'white' : iconColor, iconSize: iconSize, noHover: this.popupShow, onClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (h("sd-portal", { key: '0e1bd7d6d660ae241a335da1a86c2f00974a0474', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: 'ca98debbce9293bb484511e4ff61c81e81278ca9', style: { position: 'absolute', width: '0px', height: '0px' } }, h("div", { key: 'edbdd10359823ff83b381f8dd36103439a96bb0d', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, h("sd-button", { key: '5422758a3fc4d1580355f483bfdf5701e5480e20', class: "sd-guide__popup__close", icon: "close", color: "grey_65", size: "md", variant: "ghost", noHover: true, onClick: this.closeDropdown }), h("div", { key: '10f3b78d9b18961680df80a2a11f036404ce9cfb', class: "sd-guide__popup__header" }, h("sd-icon", { key: '75f0a7094b5c02ae9f0c174f02414bc4a2175863', name: "helpOutline", size: 24, color: "green_65" }), h("h3", { key: '5f0beea41676ea92a7fdeea7ad63aa10882da241', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), h("ul", { key: 'd3f018859c31e5aa0ae3e55dd0be9bedc4d33e25', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
     }
     // 현재 2depth까지만 스타일 적용
     renderListItem(message, depth = 0) {

package/dist/components/sd-icon.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { S as SdIcon$1, d as defineCustomElement$1 } from './p-DnQF6htq.js';
+import { S as SdIcon$1, d as defineCustomElement$1 } from './p-Sw7TJWkF.js';
 const SdIcon = SdIcon$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sd-input.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { S as SdInput$1, d as defineCustomElement$1 } from './p-D54IEoI6.js';
+import { S as SdInput$1, d as defineCustomElement$1 } from './p-Cp2TqeFd.js';
 const SdInput = SdInput$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sd-loading-spinner.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { S as SdLoadingSpinner$1, d as defineCustomElement$1 } from './p-DdKGhMHk.js';
+import { S as SdLoadingSpinner$1, d as defineCustomElement$1 } from './p-D1kEesx2.js';
 const SdLoadingSpinner = SdLoadingSpinner$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sd-modal-card.js CHANGED Viewed

@@ -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 sdModalCardCss = () => `sd-modal-card{display:block}sd-modal-card .sd-modal-card{position:relative;padding:40px 32px;border-radius:8px;box-shadow:4px 4px 24px 4px rgba(0, 0, 0, 0.2);background:white}sd-modal-card .sd-modal-card__close-button{position:absolute;top:16px;right:16px;cursor:pointer}sd-modal-card .sd-modal-card sd-icon.sd-modal-card__icon{display:block;width:32px;height:32px;margin:0 auto 12px auto}sd-modal-card .sd-modal-card__title{color:var(--point-color);font-size:18px;font-weight:700;line-height:30px;text-align:center;margin:0 0 20px 0}sd-modal-card .sd-modal-card__message{color:#222222;font-weight:400;font-size:12px;line-height:22px;text-align:center;margin:0}sd-modal-card .sd-modal-card__button-container{display:flex;margin:32px auto 0 auto;justify-content:center;align-items:center;gap:8px}sd-modal-card .sd-modal-card__button-container.flex-column{flex-direction:column}sd-modal-card .sd-modal-card__button-container button.sd-modal-card__button{width:89px}`;

package/dist/components/sd-number-input.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, d as createEvent, h, c as Host, t as transformTag } from './p-YLoygqPr.js';
-import { d as defineCustomElement$2 } from './p-DnQF6htq.js';
+import { d as defineCustomElement$2 } from './p-Sw7TJWkF.js';
 const sdNumberInputCss = () => `sd-icon{display:inline-block;line-height:0}sd-icon .sd-icon--rotate-90{transform:rotate(90deg)}sd-icon .sd-icon--rotate-180{transform:rotate(180deg)}sd-icon .sd-icon--rotate-270{transform:rotate(270deg)}.sd-number-input{box-sizing:border-box;display:flex;width:var(--input-width, 100%);align-items:center;height:28px;padding:4px 8px;border:1px solid #aaaaaa;border-radius:4px;color:#333333;font-size:12px;line-height:20px;background:white;position:relative}.sd-number-input--hovered{border-color:#0075ff;box-shadow:0 0 4px 0 rgba(0, 113, 255, 0.4)}.sd-number-input.sd-number-input--error{border-color:#fb4444}.sd-number-input.sd-number-input--pass{border-color:#2bce6c}.sd-number-input.sd-number-input--disabled{background-color:#eeeeee !important;border-color:#cccccc !important;cursor:not-allowed !important;box-shadow:none !important}.sd-number-input.sd-number-input--disabled .sd-number-input__input{color:#888888 !important;cursor:not-allowed !important}.sd-number-input .sd-number-input__input{display:block;width:100%;height:20px;line-height:20px;border:none;outline:none;background:transparent;font-size:inherit;color:#333333;margin-left:4px;margin-right:4px;padding-block:0;padding-inline:0;text-align:right}.sd-number-input .sd-number-input__input::placeholder{font-size:12px;height:20px;line-height:20px;color:#aaaaaa}.sd-number-input .sd-number-input__clear-icon{cursor:pointer;margin-left:8px}.sd-number-input .sd-number-input__buttons{padding:4px;display:flex;justify-content:space-between;align-items:center;position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity 0.2s ease}.sd-number-input .sd-number-input__button{width:20px;height:20px;border:none;border-radius:2px;background-color:#eff6ff;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;margin:0;transition:background-color 0.2s ease}.sd-number-input .sd-number-input__button:hover:not(:disabled){background-color:#e6f1ff}.sd-number-input .sd-number-input__button:disabled{background-color:#eeeeee;cursor:not-allowed}.sd-number-input .sd-number-input__button--decrement{border-bottom-left-radius:0;border-bottom-right-radius:0}.sd-number-input .sd-number-input__button--increment{border-top-left-radius:0;border-top-right-radius:0}.sd-number-input .sd-number-input__label{margin-bottom:8px;font-weight:500;color:#333333}sd-number-input:focus-within .sd-number-input__buttons{opacity:1;pointer-events:auto}sd-number-input:focus-within .sd-number-input{border-color:#0075ff;box-shadow:0 0 4px 0 rgba(0, 113, 255, 0.4)}`;
@@ -240,17 +240,17 @@ const SdNumberInput$1 = /*@__PURE__*/ proxyCustomElement(class SdNumberInput ext
         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 watchers() { return {
         "value": ["valueChanged"],

package/dist/components/sd-pagination.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { S as SdPagination$1, d as defineCustomElement$1 } from './p-DxSmO6Tr.js';
+import { S as SdPagination$1, d as defineCustomElement$1 } from './p-CuHSbj5E.js';
 const SdPagination = SdPagination$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sd-popover.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, h, F as Fragment, t as transformTag } from './p-YLoygqPr.js';
 import { T as TooltipArrow } from './p-BKSlQGJv.js';
-import { d as defineCustomElement$4 } from './p-CdGD6AqM.js';
-import { d as defineCustomElement$3 } from './p-CVMprLsE.js';
-import { d as defineCustomElement$2 } from './p-DnQF6htq.js';
+import { d as defineCustomElement$4 } from './p-B-HVIIWo.js';
+import { d as defineCustomElement$3 } from './p-CmghyzXg.js';
+import { d as defineCustomElement$2 } from './p-Sw7TJWkF.js';
 const sdPopoverCss = () => `sd-popover{position:relative;cursor:pointer;display:inline-flex}`;
@@ -42,11 +42,11 @@ const SdPopover$1 = /*@__PURE__*/ proxyCustomElement(class SdPopover extends H {
         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 watchers() { return {
         "show": ["watchShowHandler"]

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

	@@ -1 +1 @@
1	- {"file":"sd-popover.js","mappings":"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~~CAAA~~,~~CAAA~~,~~QAAA~~,~~EAAA~~,~~EAAA,GAAA,EAAA,0CAAA,EAAQ,~~KAAK,EAAC,gCAAgC,~~EAAC~~,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EAAA,~~EAC/E~~,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,SAAS,EAAA,CAAW,CAClD,CACT,CACI,CACc,CACrB,CACS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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}
1	+ {"file":"sd-popover.js","mappings":";;;;;;AAAA,MAAM,YAAY,GAAG,MAAM,CAAC,gEAAgE,CAAC;;MCQhFA,WAAS,iBAAAC,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;;;;;;;;IAGI,IAAI,GAAY,KAAK;IAErB,SAAS,GAAwC,QAAQ;IACzD,KAAK,GAAW,SAAS;IAEzB,IAAI,GAAa,aAAa;IAC9B,QAAQ,GAAW,EAAE;IAEtC,KAAK,GAAW,EAAE;IACD,UAAU,GAAe,IAAI;IAC7B,aAAa,GAAkB,SAAS;AAEpB,IAAA,SAAS;IAC7B,QAAQ,GAAa,EAAE;IACvB,OAAO,GAE1B,EAAE;IACA,SAAS,GAAW,EAAE;IAEtB,OAAO,GAAY,IAAI;IAEvB,QAAQ,GAAY,KAAK;IAExB,WAAW,GAAY,KAAK;IAC5B,WAAW,GAAW,EAAE;AAGjC,IAAA,gBAAgB,CAAC,QAAiB,EAAA;AACjC,QAAA,IAAI,CAAC,WAAW,GAAG,QAAQ;;IAG5B,iBAAiB,GAAA;AAChB,QAAA,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,IAAI;QAE5B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,SAAS;;AAG7B,IAAA,QAAQ;IAER,WAAW,GAAG,MAAK;AAC1B,QAAA,IAAI,CAAC,WAAW,GAAG,KAAK;AACzB,KAAC;IAED,MAAM,GAAA;QACL,QACC,EAAC,QAAQ,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACP,IAAI,CAAC,KAAK,IACV,CACC,CAAA,WAAA,EAAA,EAAA,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,QAAQ,GAAG,EAA4B,CAAC,EACzD,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,UAAU,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,KAAK,EAAC,YAAY,EAClB,OAAO,EAAE,OAAO,IAAI,CAAC,WAAW,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,EACzC,CAAA,KAEb,CACC,CAAA,SAAA,EAAA,EAAA,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,QAAQ,GAAG,EAA4B,CAAC,EACzD,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAC,YAAY,EAClB,OAAO,EAAE,OAAO,IAAI,CAAC,WAAW,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,GAC3C,CACX,EAEA,IAAI,CAAC,WAAW,KAChB,2EACC,SAAS,EAAE,IAAI,CAAC,QAAQ,EACxB,SAAS,EAAE,IAAI,CAAC,WAAW,EAC3B,SAAS,EAAE,IAAI,CAAC,SAAS,EAAA,EAEzB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACC,KAAK,EAAE;AACN,gBAAA,kBAAkB,EAAE,IAAI;AACxB,gBAAA,CAAC,qBAAqB,IAAI,CAAC,SAAS,CAAE,CAAA,GAAG,IAAI;gBAC7C,CAAC,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS;aAClC,EAAA,EAED,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAE,oDAAoD,IAAI,CAAC,SAAS,CAAA,CAAE,EAAA,EAC7E,CAAC,CAAA,YAAY,sDAAgB,CAC1B,EAEJ,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2BAA2B,EAAA,EACpC,IAAI,CAAC,SAAS,IAAI,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,yBAAyB,EAAE,EAAA,IAAI,CAAC,SAAS,CAAO,EAE7E,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,KACxB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,4BAA4B,IACrC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,OAAO,KACzB,CAAA,CAAA,KAAA,EAAA,IAAA,EAAM,OAAO,CAAO,CACpB,CAAC,CACG,CACN,EAEA,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,KACvB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAwD,qDAAA,EAAA,IAAI,CAAC,OAAO,CAAC,MAAM,CAAE,CAAA,EACvF,EAAA,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,KACvB,oBAAe,MAAM,EAAA,CAAI,CACzB,CAAC,CACG,CACN,CACI,EAEL,IAAI,CAAC,QAAQ,KACb,+DACC,KAAK,EAAC,OAAO,EACb,KAAK,EAAC,gCAAgC,EACtC,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EAAA,EAEjC,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,SAAS,EAAA,CAAW,CAClD,CACT,CACI,CACc,CACrB,CACS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"sd-radio-button-group.js","mappings":";;AAAA,MAAM,qBAAqB,GAAG,MAAM,CAAC,~~ynEAAynE~~,CAAC;;~~MCalpEA~~,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,~~CAAA~~,~~KAAA~~,EAAA,EAAA,GAAA,EAAA,0CAAA,~~EAAK~~,KAAK,EAAE,IAAI,CAAC,eAAe,EAAE,EAAE,IAAI,EAAC,YAAY,~~EAAgB~~,eAAA,~~EAAA~~,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,EAAA,~~EAC3F,~~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;~~AAEhD~~,~~YAAA,~~QACC,CACC,CAAA,OAAA,EAAA,EAAA,GAAG,EAAE,CAAS,MAAA,EAAA,MAAM,CAAC,KAAK,~~CAAE~~,~~CAAA,~~EAC5B,KAAK,EAAE,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,~~EACpC,IAAI,EAAC,OAAO,kBACE,UAAU,CAAC,QAAQ,EAAE,~~EAAA,~~eAAA~~,~~EACpB,UAAU,CAAC,QAAQ,EAAE,~~EACxB,~~YAAA,EAAA,~~MAAM,CAAC,KAAK,IAAI,cAAc,~~EAC9B~~,YAAA,~~EAAA~~,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,~~CACG~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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}
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-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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"sd-radio-group.js","mappings":";;AAAA,MAAM,eAAe,GAAG,MAAM,CAAC,~~uiDAAuiD~~,CAAC;;~~MCa1jDA~~,cAAY,iBAAAC,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;;;;;;;;AACgB,IAAA,KAAK;IAEpB,YAAY,GAAkB,EAAE;IAEjD,SAAS,~~GAA6B~~,UAAU;~~IAEhD~~,QAAQ,GAAY,KAAK;AAEzB,IAAA,~~IAAI~~;~~AAEK~~,IAAA,~~aAAa;AAG9B,IAAA,~~MAAM;~~IAEN~~,~~iBAAiB,GAAA;AAChB,QAAA,IAAI,IAAI,CAAC,KAAK,EAAE;AACf,YAAA,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK;;;AAKjC,~~IAAA,YAAY,CAAC,QAAoB,EAAA;AAChC,QAAA,IAAI,CAAC,~~aAAa~~,GAAG,QAAQ;;~~AAGtB~~,IAAA,iBAAiB,GAAG,CAAC,WAAuB,~~EAAE,cAAwB,~~KAAI;~~AACjF~~,~~QAAA,~~IAAI,IAAI,CAAC,QAAQ~~,IAAI,cAAc~~;YAAE;~~AACrC~~,QAAA,IAAI,CAAC,~~aAAa,GAAG,WAAW;AAChC,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,aAAa,KAAK,MAAM,CAAC,KAAK;;AAGnC,IAAA,gBAAgB,CAAC,MAAmB,EAAA;QAC3C,OAAO,IAAI,CAAC,QAAQ,IAAI,CAAC,CAAC,MAAM,CAAC,QAAQ;;AAGlC,IAAA,~~eAAe,CAAC,MAAmB,EAAA;AAC1C,QAAA,MAAM,OAAO,GAAG;YACf,wBAAwB;AACxB,YAAA,IAAI,CAAC,gBAAgB,CAAC,MAAM;AAC3B,kBAAE;AACF,kBAAE,oCAAoC;SACvC;AAED,QAAA,IAAI,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,EAAE;AAClC,YAAA,OAAO,CAAC,IAAI,CAAC,kCAAkC,CAAC;;AAGjD,QAAA,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;;IAGjB,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;~~QACL~~,~~MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,IAAI,CAAkB,eAAA,EAAA,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,EAAE,CAAC,CAAA,CAAE;AAE9F,~~QAAA,QACC,~~CACC~~,~~CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,~~KAAK,EAAE,IAAI,CAAC,eAAe,EAAE,~~EAC7B~~,IAAI,EAAC,YAAY,~~IAGhB~~,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,~~CAAC,~~MAAM,~~EAAE,KAAK,KAAI~~;~~YACxC~~,~~MAAM~~,~~UAAU,GAAG,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC;YAChD,MAAM,UAAU,GAAG,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC;YAEhD,~~QACC,CAAA,CAAA,~~OAAA~~,EAAA,EACC,GAAG,EAAE,~~CAAA~~,MAAA,~~EAAS~~,~~KAAK~~,~~CAAA~~,~~CAAE,EACrB,~~KAAK,EAAE,~~IAAI~~,~~CAAC~~,~~eAAe~~,CAAC,MAAM,CAAC,~~EACnC~~,~~IAAI,EAAC,OAAO,EACE,cAAA,EAAA,UAAU,~~CAAC,~~QAAQ~~,~~EAAE~~,~~EACpB,eAAA,EAAA,UAAU,CAAC,QAAQ,~~EAAE,~~EACxB~~,~~YAAA,EAAA,MAAM,~~CAAC,KAAK,~~IAAI~~,~~cAAc,EAAA,EAE1C,CAAA,CAAA,OAAA,EAAA,EACC,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,SAAS,EACf,~~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,uBAAuB,EAAE,EAAA,~~MAAM,CAAC,~~KAAK~~,~~CAAQ,CACnE~~;~~SAET~~,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\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}
1	+ {"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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

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

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

@@ -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-DD16YjVA.js';
 const SdSelectDropdown = SdSelectDropdown$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -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-FVxa2OYe.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-Cp2TqeFd.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-BfHejNRG.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 CHANGED Viewed

@@ -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-FVxa2OYe.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-Cp2TqeFd.js';
+import { d as defineCustomElement$6 } from './p-o-oFeHDX.js';
+import { d as defineCustomElement$5 } from './p-DD16YjVA.js';
+import { d as defineCustomElement$4 } from './p-BsBjOh8u.js';
+import { d as defineCustomElement$3 } from './p-BfHejNRG.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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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-BfHejNRG.js';
 const SdSelectSearchInput = SdSelectSearchInput$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sd-select.js CHANGED Viewed

@@ -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-iBNSlotR.js';
 const SdSelect = SdSelect$1;
 const defineCustomElement = defineCustomElement$1;