@sellmate/design-system 1.0.61 → 1.0.63

package/dist/esm/{sd-select-v2.entry.js → sd-pagination_2.entry.js}

@@ -1,6 +1,91 @@
-import { r as registerInstance, c as createEvent, g as getElement, h } from './index-DsU722JF.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, a as getElement } from './index-BqHL8W3c.js';
 import { n as nanoid } from './index-CCwNgVmC.js';
 
+const sdPaginationCss = () => `.sd-pagination{display:flex;flex-flow:row nowrap;align-items:center;justify-content:center;gap:8px;color:#555555;width:100%;font-size:12px}.sd-pagination .prepend-btns{display:flex;flex-flow:row nowrap;align-items:center;gap:8px;width:60px}.sd-pagination .prepend-btns button{width:26px;height:26px;border:0;background:none}.sd-pagination .prepend-btns button:hover{border:1px solid #006AC1;border-radius:14px}.sd-pagination .append-btns{display:flex;flex-flow:row nowrap;align-items:center;gap:8px;width:60px}.sd-pagination .append-btns button{width:26px;height:26px;border:0;background:none}.sd-pagination .append-btns button:hover{border:1px solid #006AC1;border-radius:14px}.sd-pagination .pagination-btn{display:flex;align-items:center;justify-content:center;border-radius:14px;outline:none;border:none;cursor:pointer;height:26px;color:#555555;width:var(--pagination-btn-width, 26px)}.sd-pagination .pagination-btn--selected{background-color:#006AC1;color:white}.sd-pagination .pagination-btn:hover{border:1px solid #006AC1}.sd-pagination--simple .pagination-info{line-height:26px;display:flex;flex-flow:row nowrap;align-items:center;gap:8px}.sd-pagination--simple .pagination-info .current-page,.sd-pagination--simple .pagination-info .last-page{padding:0 2px}`;
+
+const BUTTON_WIDTH = {
+    1: 26,
+    2: 36,
+    3: 42,
+    4: 50,
+    5: 58,
+};
+const PER_PAGE = 10;
+const SdPagination = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.pageChange = createEvent(this, "sdPageChange", 7);
+    }
+    currentPage = 1;
+    lastPage = 1;
+    simple = false;
+    pageChange;
+    get paginationClasses() {
+        const classes = ['sd-pagination'];
+        if (this.simple) {
+            classes.push('sd-pagination--simple');
+        }
+        return classes.join(' ');
+    }
+    get pageNumbers() {
+        const start = Math.floor((this.currentPage - 1) / PER_PAGE) * PER_PAGE + 1;
+        const end = Math.min(start + PER_PAGE - 1, this.lastPage);
+        return Array.from({ length: end - start + 1 }, (_, i) => start + i);
+    }
+    get buttonWidth() {
+        const lastPageNum = this.pageNumbers.at(-1) ?? 1;
+        const maxPageLength = lastPageNum.toString().length;
+        return BUTTON_WIDTH[maxPageLength] || BUTTON_WIDTH[1];
+    }
+    handlePageChange(page) {
+        if (page < 1 || page > this.lastPage)
+            return;
+        this.currentPage = page;
+        this.pageChange.emit(page);
+    }
+    handleGroupChange(direction) {
+        const delta = direction === 'forward' ? PER_PAGE : -PER_PAGE;
+        const newPage = Math.min(Math.max(this.currentPage + delta, 1), this.lastPage);
+        this.handlePageChange(newPage);
+    }
+    get isFirstGroup() {
+        return this.currentPage <= PER_PAGE;
+    }
+    get isLastGroup() {
+        const startPageGroup = Math.floor((this.currentPage - 1) / PER_PAGE) * PER_PAGE + 1;
+        return startPageGroup + PER_PAGE - 1 >= this.lastPage;
+    }
+    renderPrevButtons() {
+        if (this.simple) {
+            if (this.currentPage <= 1)
+                return null;
+            return (h(Fragment, null, h("button", { "aria-label": "Go to first page", onClick: () => this.handlePageChange(1) }, h("sd-icon", { name: "chevronLeftEnd", size: "12", color: "#222222" })), h("button", { "aria-label": "Go to previous page", onClick: () => this.handlePageChange(this.currentPage - 1) }, h("sd-icon", { name: "arrowLeft", size: "12", color: "#222222" }))));
+        }
+        if (!this.isFirstGroup) {
+            return (h(Fragment, null, h("button", { "aria-label": "Go to first page", onClick: () => this.handlePageChange(1) }, h("sd-icon", { name: "chevronLeftEnd", size: "12", color: "#222222" })), h("button", { "aria-label": "Go to previous page group", onClick: () => this.handleGroupChange('backward') }, h("sd-icon", { name: "arrowLeft", size: "12", color: "#222222" }))));
+        }
+    }
+    renderNextButtons() {
+        if (this.simple) {
+            if (this.currentPage >= this.lastPage)
+                return null;
+            return (h(Fragment, null, h("button", { "aria-label": "Go to next page", onClick: () => this.handlePageChange(this.currentPage + 1) }, h("sd-icon", { name: "arrowRight", size: "12", color: "#222222" })), h("button", { "aria-label": "Go to last page", onClick: () => this.handlePageChange(this.lastPage) }, h("sd-icon", { name: "chevronRightEnd", size: "12", color: "#222222" }))));
+        }
+        if (!this.isLastGroup) {
+            return (h(Fragment, null, h("button", { "aria-label": "Go to next page group", onClick: () => this.handleGroupChange('forward') }, h("sd-icon", { name: "arrowRight", size: "12", color: "#222222" })), h("button", { "aria-label": "Go to last page", onClick: () => this.handlePageChange(this.lastPage) }, h("sd-icon", { name: "chevronRightEnd", size: "12", color: "#222222" }))));
+        }
+    }
+    render() {
+        return (h("div", { key: '5136947eb1aa1539d240af359eec8763d708906b', class: this.paginationClasses }, h("div", { key: '3114f336a27b4f3bf6249fd82649b9d21831a57a', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "pagination-info" }, h("span", { class: "current-page" }, this.currentPage), h("span", null, "/"), h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
+                'pagination-btn': true,
+                'pagination-btn--selected': this.currentPage === n,
+            }, disabled: this.currentPage === n, style: {
+                '--pagination-btn-width': `${this.buttonWidth}px`,
+            }, onClick: () => this.handlePageChange(n) }, n)))), h("div", { key: 'a85d2e89389d2638e797873e18717d1079a8b156', class: "append-btns" }, this.renderNextButtons())));
+    }
+};
+SdPagination.style = sdPaginationCss();
+
 const sdSelectV2Css = () => `sd-select-v2{display:inline-flex}sd-select-v2 sd-portal{display:none}sd-select-v2 .sd-select-v2{position:relative;width:100%;height:100%}`;
 
 const SdSelectV2 = class {
@@ -214,13 +299,13 @@ const SdSelectV2 = class {
                 this.closeDropdown();
             },
         };
-        return (h("sd-field", { key: '3bce41792a627708e9a947649106fdeaf63bf12f', name: this.fieldName || this.internalName, label: this.label, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
+        return (h("sd-field", { key: 'b2a7f6ff2b4844069703400d68e9e736689d130a', name: this.fieldName || this.internalName, label: this.label, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
                 this.hovered = true;
             }, onMouseLeave: () => {
                 this.hovered = false;
-            } }, h("div", { key: '994150030e4e7d87650de8dc8fd7b44d57c3b62b', class: "sd-select-v2", ref: el => {
+            } }, h("div", { key: 'f832e4df90c6874c56e1f0ec5b109a7a77f3d0d1', class: "sd-select-v2", ref: el => {
                 this.triggerRef = el;
-            } }, h("sd-select-v2-trigger", { key: 'ff1d052c318bdec6d870bcc707fc33e40bc41f9c', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '0a1214c3f2fcc6c34afa2f5168c64edb305048ea', ...portalProps }, h("sd-select-v2-listbox", { key: 'c3888dbe740611633a95ef8b58024bdfa558f15b', name: this.name, options: this.options, value: this.value, emitValue: this.emitValue, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
+            } }, h("sd-select-v2-trigger", { key: '9f2eaff8ca1ece8bec8fe635372e961a42ec0f80', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '2b8c31b66ac81a51dbd7657d5bbeeeaeb3ff0c83', ...portalProps }, h("sd-select-v2-listbox", { key: '8d16190fff39d403c74966e197c09afb55e9b9f8', name: this.name, options: this.options, value: this.value, emitValue: this.emitValue, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
     }
     static get watchers() { return {
         "isOpen": [{
@@ -230,4 +315,4 @@ const SdSelectV2 = class {
 };
 SdSelectV2.style = sdSelectV2Css();
 
-export { SdSelectV2 as sd_select_v2 };
+export { SdPagination as sd_pagination, SdSelectV2 as sd_select_v2 };

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, g as getElement, h, F as Fragment } from './index-DsU722JF.js';
-import { T as TooltipArrow } from './tooltipArrow-CJuzsrdH.js';
+import { r as registerInstance, a as getElement, h, F as Fragment } from './index-BqHL8W3c.js';
+import { T as TooltipArrow } from './tooltipArrow-BcsrQx1U.js';
 
 const popover = {
 	bg: "#07284A"};
@@ -54,14 +54,14 @@ const SdPopover = class {
         this.showPopover = false;
     };
     render() {
-        return (h(Fragment, { key: '8b4e44957bff5bdb075568b15612b31fb42eaffc' }, 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", onSdClick: () => (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: 'e4b676771effb4a51593c6ae0a23f15bd34878a3', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement, offset: this.popoverOffset }, h("div", { key: 'c74dea7df660a3e8285f813d9cfe490c144f3093', class: {
+        return (h(Fragment, { key: 'e953f3dfbc34a7e6b4eee3b90bd9344d4ef7d8a2' }, 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", onSdClick: () => (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: '23128c3d7b03a236026a1557c441ff1ddaae7033', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement, offset: this.popoverOffset }, h("div", { key: '620f97e29104979fd203f943bb516ea31696d737', class: {
                 'sd-floating-menu': true,
                 'sd-floating-menu--popover': true,
                 [`sd-floating-menu--${this.placement}`]: true,
                 [this.menuClass]: !!this.menuClass,
             }, style: {
                 '--sd-floating-bg': popoverTokens.popover.bg,
-            } }, h("i", { key: '7ff2cfecec309217bf1b5ad1f523e37737798120', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: 'df1696d49eb0894805e59f3d0c1112be20e94d84' })), h("div", { key: '0c4babf4b592f5457bdc83f72316a9e718e075aa', class: "sd-floating-menu__content" }, this.menuTitle && h("div", { key: '4a8c4fb114b15068b49f5c6546080e8667ea12fe', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: '47646cb9cb596afcf3bf38e2b08cdef7074ff658', class: "sd-floating-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: '939eb40eba7beda3aac32abcdcb9f6cd75fb6b45', class: `sd-floating-menu__buttons sd-floating-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (h("sd-button", { ...button })))))), this.useClose && (h("sd-ghost-button", { key: 'fb73a35c3db25d2cde16aeb10f14005e82121c6a', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xs", onClick: () => this.handleClose() })))))));
+            } }, h("i", { key: '027cd73af66a6a5161361625502496f8c9183e9d', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '0db7efc9eaaecd48af55f7b46fa1c90eb0027d86' })), h("div", { key: 'd007d9041093593b155df32d1f6420f401baf1fa', class: "sd-floating-menu__content" }, this.menuTitle && h("div", { key: '0746608da07343147896c59a9e8e27e15cd9fae2', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: '76a1c19fe4871a7a0d5bd6fc2ee5228453aab5f2', class: "sd-floating-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: 'ccfdc3a653b9a6fb0ea8ffb8dcb538638ae83e33', class: `sd-floating-menu__buttons sd-floating-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (h("sd-button", { ...button })))))), this.useClose && (h("sd-ghost-button", { key: '6b53a200fdab5175b8346e1b916677a02a4ac0ad', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xs", onClick: () => this.handleClose() })))))));
     }
     static get watchers() { return {
         "show": [{

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, g as getElement, h } from './index-DsU722JF.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-BqHL8W3c.js';
 
 const SdPortal = class {
     constructor(hostRef) {
@@ -225,7 +225,7 @@ const SdPortal = class {
         this.close.emit();
     }
     render() {
-        return h("slot", { key: '07cb09b04ab2567afb15b9ae2cc189875f4b55b4' });
+        return h("slot", { key: 'e9862350592ae8ea0741b4639a94e288f0b302f2' });
     }
     static get watchers() { return {
         "open": [{

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-DsU722JF.js';
+import { r as registerInstance, h } from './index-BqHL8W3c.js';
 
 const sdProgressCss = () => `sd-progress{display:block}sd-progress .sd-progress__bar{position:relative;width:100%;height:20px;overflow:hidden;border-radius:4px;background-color:#EEEEEE;text-align:center}sd-progress .sd-progress__bar__percent{width:var(--progress-percentage);height:100%;border-radius:4px;background-color:var(--progress-color, #0075FF);transition:all 0.5s}sd-progress .sd-progress__bar__percent.proceed{border-top-right-radius:50%}sd-progress .sd-progress__bar__indicator{position:absolute;left:0;top:0;height:20px;width:100%;background-color:#EEEEEE;font-size:12px;font-weight:700;line-height:20px;z-index:1}sd-progress .sd-progress__bar__indicator--left{color:var(--progress-color, #0075FF);clip-path:inset(0 0 0 var(--progress-percentage))}sd-progress .sd-progress__bar__indicator--right{color:white;background-color:var(--progress-color, #0075FF);clip-path:inset(0 calc(100% - var(--progress-percentage)) 0 0)}sd-progress .sd-progress__spinner{display:flex;flex-direction:column;align-items:center;justify-content:center}sd-progress .sd-progress__spinner svg{transform:rotate(-90deg)}sd-progress .sd-progress__spinner__label{margin-top:8px;font-size:16px;color:var(--progress-color, #0075FF)}sd-progress .sd-progress__label{margin-top:4px;font-size:12px;color:#222222;text-align:center}`;
 
@@ -39,10 +39,10 @@ const SdProgress = class {
         return this.statusColor[this.progressStatus];
     }
     render() {
-        return (h("div", { key: 'f50623b8a78ce370c5b36e0fc5ac6e04bb5e029c', style: {
+        return (h("div", { key: '3afe47c0dd65ddb5a03c15591430febaa8947417', style: {
                 '--progress-color': this.progressColor,
                 '--progress-percentage': `${this.progressPercentage}%`,
-            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && h("div", { key: '5a6414ee55f7d3300a9cc06e86376bfd1a123a64', class: "sd-progress__label" }, this.label)));
+            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && h("div", { key: 'd5bf1e43002f7b16f5b609e9b3cb7cc9d417a246', 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/esm/sd-radio-button.entry.js

@@ -0,0 +1,180 @@
+import { r as registerInstance, c as createEvent, h } from './index-BqHL8W3c.js';
+
+const radioButton = {
+	xs: {
+		height: "24",
+		paddingX: "8",
+		typography: {
+			fontFamily: "Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif",
+			fontSize: "12",
+			fontWeight: "500",
+			textDecoration: "none",
+			lineHeight: "20"
+		}
+	},
+	sm: {
+		height: "28",
+		paddingX: "12",
+		typography: {
+			fontFamily: "Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif",
+			fontSize: "12",
+			fontWeight: "500",
+			textDecoration: "none",
+			lineHeight: "20"
+		}
+	},
+	radius: "4",
+	border: {
+		width: "1",
+		"default": "#CCCCCC",
+		select: "#0075FF",
+		disabled: "#CCCCCC"
+	},
+	bg: {
+		"default": "#FFFFFF",
+		hover: "#0075FF",
+		select: "#FFFFFF",
+		disabled: "#E1E1E1"
+	},
+	content: {
+		"default": "#555555",
+		hover: "#FFFFFF",
+		select: "#0075FF",
+		disabled: "#888888"
+	},
+	group: {
+		gap: "-1"
+	}
+};
+var radioButtonTokens = {
+	radioButton: radioButton
+};
+
+const RADIO_BUTTON_SIZES = {
+    xs: {
+        height: Number(radioButtonTokens.radioButton.xs.height),
+        paddingX: Number(radioButtonTokens.radioButton.xs.paddingX),
+        fontSize: Number(radioButtonTokens.radioButton.xs.typography.fontSize),
+        lineHeight: Number(radioButtonTokens.radioButton.xs.typography.lineHeight),
+        fontWeight: radioButtonTokens.radioButton.xs.typography.fontWeight,
+        fontFamily: radioButtonTokens.radioButton.xs.typography.fontFamily,
+        textDecoration: radioButtonTokens.radioButton.xs.typography.textDecoration,
+    },
+    sm: {
+        height: Number(radioButtonTokens.radioButton.sm.height),
+        paddingX: Number(radioButtonTokens.radioButton.sm.paddingX),
+        fontSize: Number(radioButtonTokens.radioButton.sm.typography.fontSize),
+        lineHeight: Number(radioButtonTokens.radioButton.sm.typography.lineHeight),
+        fontWeight: radioButtonTokens.radioButton.sm.typography.fontWeight,
+        fontFamily: radioButtonTokens.radioButton.sm.typography.fontFamily,
+        textDecoration: radioButtonTokens.radioButton.sm.typography.textDecoration,
+    },
+};
+const RADIO_BUTTON_LAYOUT = {
+    radius: Number(radioButtonTokens.radioButton.radius),
+    borderWidth: Number(radioButtonTokens.radioButton.border.width),
+    groupGap: Number(radioButtonTokens.radioButton.group.gap),
+};
+const RADIO_BUTTON_COLORS = {
+    border: {
+        default: radioButtonTokens.radioButton.border.default,
+        select: radioButtonTokens.radioButton.border.select,
+        disabled: radioButtonTokens.radioButton.border.disabled,
+    },
+    bg: {
+        default: radioButtonTokens.radioButton.bg.default,
+        hover: radioButtonTokens.radioButton.bg.hover,
+        select: radioButtonTokens.radioButton.bg.select,
+        disabled: radioButtonTokens.radioButton.bg.disabled,
+    },
+    content: {
+        default: radioButtonTokens.radioButton.content.default,
+        hover: radioButtonTokens.radioButton.content.hover,
+        select: radioButtonTokens.radioButton.content.select,
+        disabled: radioButtonTokens.radioButton.content.disabled,
+    },
+};
+
+const sdRadioButtonCss = () => `sd-radio-button{display:inline-flex;width:fit-content;height:fit-content}.sd-radio-button{display:inline-flex;flex-flow:row nowrap;gap:0}.sd-radio-button__option{display:flex;align-items:center;justify-content:center;position:relative;box-sizing:border-box;height:var(--sd-radio-button-height);padding:0 var(--sd-radio-button-padding-x);border:var(--sd-radio-button-border-width) solid var(--sd-radio-button-border-default);background-color:var(--sd-radio-button-bg-default);color:var(--sd-radio-button-content-default);font-family:var(--sd-radio-button-font-family);font-weight:var(--sd-radio-button-font-weight);font-size:var(--sd-radio-button-font-size);line-height:var(--sd-radio-button-line-height);text-decoration:var(--sd-radio-button-text-decoration);cursor:pointer;user-select:none;-webkit-user-select:none;transition:background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease}.sd-radio-button__option input{display:none}.sd-radio-button__option:not(:first-child){margin-left:var(--sd-radio-button-group-gap)}.sd-radio-button__option:first-child{border-top-left-radius:var(--sd-radio-button-radius);border-bottom-left-radius:var(--sd-radio-button-radius)}.sd-radio-button__option:last-child{border-top-right-radius:var(--sd-radio-button-radius);border-bottom-right-radius:var(--sd-radio-button-radius)}.sd-radio-button__option:only-child{border-radius:var(--sd-radio-button-radius)}.sd-radio-button__option--selected{background-color:var(--sd-radio-button-bg-select);border-color:var(--sd-radio-button-border-select);color:var(--sd-radio-button-content-select);z-index:1}.sd-radio-button__option:hover:not(.sd-radio-button__option--disabled){background-color:var(--sd-radio-button-bg-hover);border-color:var(--sd-radio-button-border-select);color:var(--sd-radio-button-content-hover);z-index:2}.sd-radio-button__option--disabled{background-color:var(--sd-radio-button-bg-disabled);border-color:var(--sd-radio-button-border-disabled);color:var(--sd-radio-button-content-disabled);cursor:not-allowed}.sd-radio-button__label{user-select:none;-webkit-user-select:none}`;
+
+const SdRadioButton = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.change = createEvent(this, "sdUpdate", 7);
+    }
+    value;
+    options = [];
+    size = 'sm';
+    disabled = false;
+    name;
+    change;
+    handleRadioChange = (optionValue, optionDisabled) => {
+        if (this.disabled || optionDisabled)
+            return;
+        this.value = optionValue;
+        this.change.emit(optionValue);
+    };
+    isOptionSelected(option) {
+        return this.value === option.value;
+    }
+    isOptionDisabled(option) {
+        return this.disabled || !!option.disabled;
+    }
+    getButtonClasses(option) {
+        const classes = [
+            'sd-radio-button__option',
+            this.isOptionSelected(option)
+                ? 'sd-radio-button__option--selected'
+                : 'sd-radio-button__option--unselected',
+        ];
+        if (this.isOptionDisabled(option)) {
+            classes.push('sd-radio-button__option--disabled');
+        }
+        return classes.join(' ');
+    }
+    getGroupClasses() {
+        const classes = ['sd-radio-button', `sd-radio-button--${this.size}`];
+        return classes.join(' ');
+    }
+    _groupName;
+    get groupName() {
+        if (!this._groupName) {
+            this._groupName = this.name || `sd-radio-button-${crypto.randomUUID()}`;
+        }
+        return this._groupName;
+    }
+    render() {
+        const sizeTokens = RADIO_BUTTON_SIZES[this.size];
+        const cssVars = {
+            '--sd-radio-button-height': `${sizeTokens.height}px`,
+            '--sd-radio-button-padding-x': `${sizeTokens.paddingX}px`,
+            '--sd-radio-button-font-family': sizeTokens.fontFamily,
+            '--sd-radio-button-font-weight': sizeTokens.fontWeight,
+            '--sd-radio-button-font-size': `${sizeTokens.fontSize}px`,
+            '--sd-radio-button-line-height': `${sizeTokens.lineHeight}px`,
+            '--sd-radio-button-text-decoration': sizeTokens.textDecoration,
+            '--sd-radio-button-radius': `${RADIO_BUTTON_LAYOUT.radius}px`,
+            '--sd-radio-button-border-width': `${RADIO_BUTTON_LAYOUT.borderWidth}px`,
+            '--sd-radio-button-group-gap': `${RADIO_BUTTON_LAYOUT.groupGap}px`,
+            '--sd-radio-button-border-default': RADIO_BUTTON_COLORS.border.default,
+            '--sd-radio-button-border-select': RADIO_BUTTON_COLORS.border.select,
+            '--sd-radio-button-border-disabled': RADIO_BUTTON_COLORS.border.disabled,
+            '--sd-radio-button-bg-default': RADIO_BUTTON_COLORS.bg.default,
+            '--sd-radio-button-bg-hover': RADIO_BUTTON_COLORS.bg.hover,
+            '--sd-radio-button-bg-select': RADIO_BUTTON_COLORS.bg.select,
+            '--sd-radio-button-bg-disabled': RADIO_BUTTON_COLORS.bg.disabled,
+            '--sd-radio-button-content-default': RADIO_BUTTON_COLORS.content.default,
+            '--sd-radio-button-content-hover': RADIO_BUTTON_COLORS.content.hover,
+            '--sd-radio-button-content-select': RADIO_BUTTON_COLORS.content.select,
+            '--sd-radio-button-content-disabled': RADIO_BUTTON_COLORS.content.disabled,
+        };
+        return (h("div", { key: '05bda776e2747aca3d7fca0286e3fa4062d7669b', class: this.getGroupClasses(), style: cssVars, role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.options.map(option => {
+            const isSelected = this.isOptionSelected(option);
+            const isDisabled = this.isOptionDisabled(option);
+            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__label" }, option.label)));
+        })));
+    }
+};
+SdRadioButton.style = sdRadioButtonCss();
+
+export { SdRadioButton as sd_radio_button };

package/dist/esm/sd-radio-group.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-DsU722JF.js';
+import { r as registerInstance, c as createEvent, h } from './index-BqHL8W3c.js';
 
 const sdRadioGroupCss = () => `sd-radio{display:inline-flex;width:fit-content;height:var(--sd-radio-line-height);line-height:0}sd-radio .sd-radio{cursor:pointer;display:inline-flex;align-items:center;gap:var(--sd-radio-gap);height:var(--sd-radio-line-height);max-height:var(--sd-radio-line-height)}sd-radio .sd-radio>input{position:absolute;width:0;height:0;opacity:0;pointer-events:none}sd-radio .sd-radio>input:focus-visible+.sd-radio__circle{box-shadow:0 0 0 2px white, 0 0 0 4px var(--sd-radio-checked-border);outline:none}sd-radio .sd-radio__circle{position:relative;width:var(--sd-radio-size);height:var(--sd-radio-size);border-radius:50%;border:var(--sd-radio-border-width) solid var(--sd-radio-unchecked-border);box-sizing:border-box;background:var(--sd-radio-unchecked-bg);display:inline-flex;flex-shrink:0}sd-radio .sd-radio__label{font-size:var(--sd-radio-font-size);font-weight:var(--sd-radio-font-weight);color:var(--sd-radio-label-color);line-height:var(--sd-radio-line-height)}sd-radio .sd-radio:hover:not(.sd-radio--disabled) .sd-radio__circle{background:var(--sd-radio-unchecked-bg-hover);border-color:var(--sd-radio-unchecked-border-hover)}sd-radio .sd-radio--checked .sd-radio__circle{border-color:var(--sd-radio-checked-border)}sd-radio .sd-radio--checked .sd-radio__circle::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:10px;height:10px;border-radius:50%;background:var(--sd-radio-checked-dot)}sd-radio .sd-radio--disabled{cursor:not-allowed}sd-radio .sd-radio--disabled .sd-radio__circle{background:var(--sd-radio-disabled-bg);border-color:var(--sd-radio-disabled-border)}sd-radio .sd-radio--disabled.sd-radio--checked .sd-radio__circle::after{background:var(--sd-radio-disabled-dot)}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}`;
 

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-DsU722JF.js';
+import { r as registerInstance, c as createEvent, h } from './index-BqHL8W3c.js';
 
 const radio = {
 	size: "16",
@@ -8,9 +8,12 @@ const radio = {
 		fontWeight: "400",
 		fontSize: "12",
 		lineHeight: "20"},
+	bg: {
+		"default": "#FFFFFF",
+		disabled: "#E1E1E1"
+	},
 	unchecked: {
 		bg: {
-			"default": "#FFFFFF",
 			hover: "#D9EAFF"
 		},
 		border: {
@@ -26,9 +29,6 @@ const radio = {
 			"default": "#0075FF"
 		}
 	},
-	bg: {
-		disabled: "#E1E1E1"
-	},
 	border: {
 		disabled: "#CCCCCC"
 	},
@@ -55,7 +55,7 @@ const RADIO_TYPOGRAPHY = {
 };
 const RADIO_COLORS = {
     unchecked: {
-        bg: radioTokens.radio.unchecked.bg.default,
+        bg: radioTokens.radio.bg.default,
         bgHover: radioTokens.radio.unchecked.bg.hover,
         border: radioTokens.radio.unchecked.border.default,
         borderHover: radioTokens.radio.unchecked.border.hover,

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-DsU722JF.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-BqHL8W3c.js';
 
 const sdSelectDropdownCss = () => `.sd-select-dropdown .sd-select-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-dropdown{overflow:auto;min-width:fit-content;width:var(--select-dropdown-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;display:flex;flex-direction:column;opacity:0.5;transition:opacity 0.15s ease-in}.sd-select-dropdown--ready{opacity:1}`;
 
@@ -153,10 +153,10 @@ const SdSelectDropdown = class {
         this.isScrolled = scrollTop > 0;
     };
     render() {
-        return (h("div", { key: 'c2e248441cf6825fae9649ab3c3d01ab171ccb85', class: {
+        return (h("div", { key: 'fdfad8ab2f1f6a26da8ad0ca0dcd17bfed7dcf9d', class: {
                 'sd-select-dropdown': true,
                 'sd-select-dropdown--ready': this.isDropdownReady,
-            }, style: this.dropdownSize, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (h("sd-select-search-input", { key: 'a6e9b0b74dbcd50d75bbfa51d452881298e9f439', ref: el => (this.searchRef = el), isScrolled: this.isScrolled, searchText: this.searchText, onSdSearchInput: (event) => (this.searchText = event.detail || ''), onSdSearchFocus: () => (this.itemIndex = -1) })), this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index) => (h("slot", { name: `option-${option.value}` }, h("sd-select-option", { option: option, index: index, isSelected: this.isOptionSelected(option.value), isFocused: index === this.itemIndex, onOptionClick: ({ detail }) => this.optionClick.emit(detail), useCheckbox: this.useCheckbox }))))) : (h("slot", { name: "option-placeholder" }, h("div", { class: 'sd-select-option-placeholder' }, this.optionPlaceholder)))));
+            }, style: this.dropdownSize, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (h("sd-select-search-input", { key: '74cfba89d85a980c6c8074150bdba91387b9c115', ref: el => (this.searchRef = el), isScrolled: this.isScrolled, searchText: this.searchText, onSdSearchInput: (event) => (this.searchText = event.detail || ''), onSdSearchFocus: () => (this.itemIndex = -1) })), this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index) => (h("slot", { name: `option-${option.value}` }, h("sd-select-option", { option: option, index: index, isSelected: this.isOptionSelected(option.value), isFocused: index === this.itemIndex, onOptionClick: ({ detail }) => this.optionClick.emit(detail), useCheckbox: this.useCheckbox }))))) : (h("slot", { name: "option-placeholder" }, h("div", { class: 'sd-select-option-placeholder' }, this.optionPlaceholder)))));
     }
     static get watchers() { return {
         "filteredOptions": [{
@@ -203,7 +203,7 @@ const SdSelectOption = class {
         }
     };
     render() {
-        return (h("div", { key: '1e4afa2db7fcf6e8baddd533763536973d32c51d', class: {
+        return (h("div", { key: '1366665f3ca8c37b23e6b6e9cfc5293c48ed5ed3', class: {
                 'sd-select__option': true,
                 'sd-select__option--selected': this.isSelected,
                 'sd-select__option--disabled': !!this.option.disabled,

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

@@ -1,9 +1,9 @@
-import { r as registerInstance, c as createEvent, g as getElement, h, F as Fragment } from './index-DsU722JF.js';
+import { r as registerInstance, c as createEvent, a as getElement, h, F as Fragment } from './index-BqHL8W3c.js';
 import { n as nanoid } from './index-CCwNgVmC.js';
 import { B as BaseDropdownEvent } from './base-dropdown-event-CRdYeSBK.js';
 import { S as SelectKeyboardNavigation } from './select-keyboard-navigation-Cy6HMEsK.js';
 
-const sdSelectGroupCss = () => `.sd-select-group__dropdown .sd-select-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-group{display:inline-flex;flex-flow:column nowrap;width:fit-content;height:fit-content}sd-select-group:focus,sd-select-group:focus-visible,sd-select-group:focus-within{outline:none !important}sd-select-group .sd-select-group{width:100%}sd-select-group .sd-select-group .sd-select-group__trigger{padding:4px 28px 4px 12px;display:flex;width:100%;height:100%;align-items:center}sd-select-group .sd-select-group .sd-select-group__trigger .sd-select-group__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-group .sd-select-group .sd-select-group__trigger .sd-select-group__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}sd-select-group .sd-select-group .sd-select-group__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease}sd-select-group .sd-select-group .sd-select-group__arrow--open{transform:rotate(180deg)}.sd-select-group__dropdown{overflow:auto;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-group__dropdown--ready{opacity:1}`;
+const sdSelectGroupCss = () => `.sd-select-group__dropdown .sd-select-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-group{display:inline-flex;flex-flow:column nowrap;width:fit-content;height:fit-content}sd-select-group:focus,sd-select-group:focus-visible,sd-select-group:focus-within{outline:none !important}sd-select-group .sd-select-group{width:100%}sd-select-group .sd-select-group .sd-select-group__trigger{padding:4px 28px 4px 12px;display:flex;width:100%;height:100%;align-items:center;cursor:pointer}.sd-field--disabled sd-select-group .sd-select-group .sd-select-group__trigger{cursor:not-allowed}sd-select-group .sd-select-group .sd-select-group__trigger .sd-select-group__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-group .sd-select-group .sd-select-group__trigger .sd-select-group__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}sd-select-group .sd-select-group .sd-select-group__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease}sd-select-group .sd-select-group .sd-select-group__arrow--open{transform:rotate(180deg)}.sd-select-group__dropdown{overflow:auto;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-group__dropdown--ready{opacity:1}`;
 
 const SdSelectGroup = class extends BaseDropdownEvent {
     constructor(hostRef) {
@@ -273,7 +273,7 @@ const SdSelectGroup = class extends BaseDropdownEvent {
         });
     }
     render() {
-        return (h("sd-field", { key: '205ef7aabb819067026cf0f0dfa2bc62f3e1d3dc', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, addonLabel: this.addonLabel, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, h("div", { key: 'b6db700cb68d1eaa1a99f959d3fd78c0e2088c3d', class: {
+        return (h("sd-field", { key: 'b1b62a2e99fda1f0fbc4f8b3ede5af95a9ed09aa', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, addonLabel: this.addonLabel, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, h("div", { key: '91f30fd84c70010030813f2d0cd9e86939e185d7', class: {
                 'sd-select-group': true,
                 'sd-select-group--open': this.isOpen,
                 'sd-select-group--disabled': this.disabled,

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

@@ -1,9 +1,9 @@
-import { r as registerInstance, c as createEvent, g as getElement, h, F as Fragment } from './index-DsU722JF.js';
+import { r as registerInstance, c as createEvent, a as getElement, h, F as Fragment } from './index-BqHL8W3c.js';
 import { n as nanoid } from './index-CCwNgVmC.js';
 import { B as BaseDropdownEvent } from './base-dropdown-event-CRdYeSBK.js';
 import { S as SelectKeyboardNavigation } from './select-keyboard-navigation-Cy6HMEsK.js';
 
-const sdSelectMultipleGroupCss = () => `.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{overflow:auto;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}`;
+const sdSelectMultipleGroupCss = () => `.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;cursor:pointer}.sd-field--disabled sd-select-multiple-group .sd-select-multiple-group .sd-select-multiple-group__trigger{cursor:not-allowed}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{overflow:auto;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}`;
 
 const SdSelectMultipleGroup = class extends BaseDropdownEvent {
     constructor(hostRef) {

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

@@ -1,9 +1,9 @@
-import { r as registerInstance, c as createEvent, g as getElement, h } from './index-DsU722JF.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-BqHL8W3c.js';
 import { S as SelectKeyboardNavigation } from './select-keyboard-navigation-Cy6HMEsK.js';
 import { B as BaseDropdownEvent } from './base-dropdown-event-CRdYeSBK.js';
 import { n as nanoid } from './index-CCwNgVmC.js';
 
-const sdSelectMultipleCss = () => `sd-select-multiple{display:inline-flex;flex-flow:column nowrap;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)}`;
+const sdSelectMultipleCss = () => `sd-select-multiple{display:inline-flex;flex-flow:column nowrap;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;cursor:pointer}.sd-field--disabled sd-select-multiple .sd-select-multiple .sd-select-multiple__trigger{cursor:not-allowed}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)}`;
 
 const SdSelectMultiple = class extends BaseDropdownEvent {
     constructor(hostRef) {
@@ -153,7 +153,7 @@ const SdSelectMultiple = class extends BaseDropdownEvent {
         this.handleOptionSelection(option);
     };
     render() {
-        return (h("sd-field", { key: '1e3954ff06d55a6feb8ff70cbba35e11a1b4863e', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, h("div", { key: '192dd606eaa8a7642dfaf28f342701694cbbc237', class: {
+        return (h("sd-field", { key: 'e372aab1dafc730f22c6d58cbd39d651e65a66dc', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, h("div", { key: 'a73dc6abd9a05f888c39d2176f72275a329ccae0', class: {
                 'sd-select-multiple': true,
                 'sd-select-multiple--open': this.isOpen,
                 'sd-select-multiple--disabled': this.disabled,

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, g as getElement, h } from './index-DsU722JF.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-BqHL8W3c.js';
 
 const sdSelectOptionGroupCss = () => `sd-select-option-group{display:block;height:fit-content}sd-select-option-group .sd-select__option-group{display:flex;padding:4px 12px;padding-left:12px;font-size:12px;line-height:20px;cursor:pointer}sd-select-option-group .sd-select__option-group.sd-select__option-group--group:not(.sd-select__option-group--use-checkbox),sd-select-option-group .sd-select__option-group.sd-select__option-group--subgroup:not(.sd-select__option-group--use-checkbox){cursor:default !important}sd-select-option-group .sd-select__option-group.sd-select__option-group--group{background-color:#F5FAFF !important;color:#333333 !important;font-weight:700}sd-select-option-group .sd-select__option-group.sd-select__option-group--subgroup{padding-left:20px;background-color:#F9F9F9 !important;color:#333333 !important;font-weight:500}sd-select-option-group .sd-select__option-group.sd-select__option-group--item{padding-left:28px}sd-select-option-group .sd-select__option-group sd-checkbox__bg{border-color:#888888}sd-select-option-group .sd-select__option-group__label-wrapper{display:flex;width:100%;column-gap:8px;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}sd-select-option-group .sd-select__option-group__label-wrapper sd-checkbox{flex-shrink:0}sd-select-option-group .sd-select__option-group__label-wrapper .sd-select__option-group-label{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}sd-select-option-group .sd-select__option-group__label-wrapper .sd-select__option-group__count-indicator{width:fit-content;flex-shrink:0;font-size:12px;font-weight:500;color:#888888}sd-select-option-group .sd-select__option-group--focused{background-color:#E6F1FF}sd-select-option-group .sd-select__option-group--selected.sd-select__option-group--item:not(:hover):not(.sd-select__option-group--use-checkbox),sd-select-option-group .sd-select__option-group--focused.sd-select__option-group--item:not(:hover):not(.sd-select__option-group--use-checkbox){color:#0075FF;font-weight:700}sd-select-option-group .sd-select__option-group--disabled{color:#AAAAAA;cursor:not-allowed}sd-select-option-group .sd-select__option-group:hover:not(.sd-select__option-group--disabled){background-color:#0075FF;color:white}sd-select-option-group .sd-select__option-group:hover.sd-select__option-group--selected:not(.sd-select__option-group--group):not(.sd-select__option-group--subgroup) sd-checkbox .sd-checkbox__bg{border-color:white !important}`;
 
@@ -46,7 +46,7 @@ const SdSelectOptionGroup = class {
         }
     };
     render() {
-        return (h("div", { key: 'd39aa4744aa498f8b2f7c77502f2c4f56e670296', class: {
+        return (h("div", { key: 'c1dd7d0232fff281261792ecb2137a1f09bc364d', class: {
                 'sd-select__option-group': true,
                 'sd-select__option-group--selected': !!this.isSelected,
                 'sd-select__option-group--disabled': !!this.option.disabled,
@@ -55,10 +55,10 @@ const SdSelectOptionGroup = class {
                 'sd-select__option-group--group': this.option.type === 'group',
                 'sd-select__option-group--subgroup': this.option.type === 'subgroup',
                 'sd-select__option-group--item': this.option.type === 'item',
-            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, h("div", { key: 'c856a933ddfa7084741cbb65d2075f3b59404ae7', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (h("sd-checkbox", { key: '455dde9674811174fb4b939ca37b5128085cd65d', value: this.isSelected, disabled: this.option.disabled, onClick: e => {
+            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, h("div", { key: 'a8ce6f2c13ea558413e61426dfbaa75e616f5687', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (h("sd-checkbox", { key: '3c53ea6005aa1288a4eae148bd9d6ed4573f0404', value: this.isSelected, disabled: this.option.disabled, onClick: e => {
                 e.preventDefault();
                 this.handleClick(this.option, this.isSelected, e);
-            } })), h("span", { key: '0255e9f2da18d3da01843ec61c9bc75150efcc4a', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (h("span", { key: '73c0a138d3e38f4fc8c8e94230aea82c89a7cb84', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
+            } })), h("span", { key: 'c28aea2bf78120a42d6884c322cc2cf77713a6cb', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (h("span", { key: '6a51641a8c9da9957f1428a721de9ce2a1a2a86b', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
     }
 };
 SdSelectOptionGroup.style = sdSelectOptionGroupCss();