@sellmate/design-system 1.0.16 → 1.0.17

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, F as Fragment } from './index-DqSa0XJ6.js';
+import { r as registerInstance, h, F as Fragment } from './index-BNCQkS1w.js';
 
 const sdCardCss = () => `sd-card{display:block;height:fit-content}sd-card .sd-card{border-radius:8px;background:white}sd-card .sd-card--bordered{border:1px solid #e1e1e1}`;
 
@@ -7,12 +7,11 @@ const SdCard = class {
         registerInstance(this, hostRef);
     }
     bordered = false;
-    cardClassName = '';
+    sdClass = '';
     render() {
-        return (h(Fragment, { key: 'a73337a98c22035fe7db605775982fdf35dd2b63' }, h("div", { key: '14c821275ad910853c3d0a138e68ea9e83f1a693', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.cardClassName}` }, h("slot", { key: '3586c061618b92800d60b5c122888b820994d113' }))));
+        return (h(Fragment, { key: '155504b50cb1c21fc1f847af8a9e8b685f7881ef' }, h("div", { key: 'c461e3e40da44586da5e02ad508bf59942a9e82a', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, h("slot", { key: '0c0ee023155c08c565c3496c44699a900666b084' }))));
     }
 };
 SdCard.style = sdCardCss();
 
 export { SdCard as sd_card };
-//# sourceMappingURL=sd-card.entry.js.map

package/dist/esm/sd-date-picker.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-DqSa0XJ6.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-BNCQkS1w.js';
 import { u as useDatePicker, t as today } from './useDatePicker-DTrMR0rx.js';
 
 const sdDatePickerCss = () => `.sd-date-picker.sc-sd-date-picker{width:100%;display:inline-block}.sd-date-picker.sc-sd-date-picker .sd-date-picker--disabled.sc-sd-date-picker .date-icon.sc-sd-date-picker{cursor:not-allowed !important;color:#888888 !important}.sd-date-picker.sc-sd-date-picker .sd-date-picker__input.sc-sd-date-picker{text-align:center !important}.sd-date-picker__menu.sc-sd-date-picker{width:304px;box-sizing:border-box;border-radius:8px;padding:24px 19px;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2);background:white}.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__header.sc-sd-date-picker{display:flex;flex-flow:row nowrap;align-items:center;gap:20px;font-size:14px;padding:0 5px;height:24px;line-height:24px}.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__header.sc-sd-date-picker .year-nav.sc-sd-date-picker,.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__header.sc-sd-date-picker .month-nav.sc-sd-date-picker{display:flex;flex-flow:row nowrap;align-items:center;gap:12px}.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__header.sc-sd-date-picker .year-nav.sc-sd-date-picker button.sc-sd-date-picker,.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__header.sc-sd-date-picker .month-nav.sc-sd-date-picker button.sc-sd-date-picker{background:none;border:none;cursor:pointer;margin:0;padding:0}.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__header.sc-sd-date-picker .year-nav__current.sc-sd-date-picker{width:40px;text-align:center}.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__header.sc-sd-date-picker .month-nav__current.sc-sd-date-picker{width:100px;text-align:center}.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__days.sc-sd-date-picker{margin-top:8px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));column-gap:10px;padding:0 5px}.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__days.sc-sd-date-picker .day.sc-sd-date-picker{width:28px;height:20px;font-size:12px;line-height:20px;text-align:center;color:#888888}.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__body.sc-sd-date-picker{margin-top:12px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr))}`;
@@ -97,4 +97,3 @@ const SdDatePicker = class {
 SdDatePicker.style = sdDatePickerCss();
 
 export { SdDatePicker as sd_date_picker };
-//# sourceMappingURL=sd-date-picker.entry.js.map

package/dist/esm/sd-file-picker.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-DqSa0XJ6.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-BNCQkS1w.js';
 
 const sdFilePickerCss = () => `sd-file-picker{display:inline-flex;width:100%}.sd-file-picker{display:inline-flex;width:100%;align-items:center;max-width:var(--picker-width, 100%);height:28px;gap:8px;padding:4px 8px;border:1px solid #aaaaaa;border-radius:4px;background-color:#ffffff;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;vertical-align:middle}.sd-file-picker__text{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:400;font-size:12px;line-height:20px;color:#aaaaaa}.sd-file-picker__text--active{color:#222222}.sd-file-picker__text--placeholder{color:#aaaaaa}.sd-file-picker__icon{flex-shrink:0}.sd-file-picker__clear-icon{flex-shrink:0;cursor:pointer;transition:opacity 0.2s ease}.sd-file-picker__clear-icon:hover{opacity:0.7}.sd-file-picker__input{display:none}.sd-file-picker__tooltip{position:absolute;top:calc(100% - 4px);left:50%;transform:translate(-50%);z-index:1000;white-space:nowrap;padding:8px 12px;background:rgba(0, 0, 0, 0.8);color:white;font-size:12px;line-height:18px;border-radius:4px;pointer-events:none}.sd-file-picker:hover:not(.sd-file-picker--inline):not(.sd-file-picker--disabled){background-color:#f6f6f6}.sd-file-picker--active:not(.sd-file-picker--inline):not(.sd-file-picker--disabled){background-color:#ffffff}.sd-file-picker--active:not(.sd-file-picker--inline):not(.sd-file-picker--disabled) .sd-file-picker__text{color:#222222}.sd-file-picker--disabled:not(.sd-file-picker--inline){background-color:#eeeeee;border-color:#cccccc;cursor:not-allowed !important}.sd-file-picker--disabled:not(.sd-file-picker--inline) .sd-file-picker__text{color:#888888}.sd-file-picker--inline{border:none;background-color:transparent;padding:0;height:auto}.sd-file-picker--inline .sd-file-picker__text{color:#aaaaaa}.sd-file-picker--inline:hover:not(.sd-file-picker--disabled) .sd-file-picker__text{color:#737373}.sd-file-picker--inline.sd-file-picker--active:not(.sd-file-picker--disabled) .sd-file-picker__text--active{color:#222222}.sd-file-picker--inline.sd-file-picker--disabled .sd-file-picker__text{color:#cccccc}`;
 
@@ -109,10 +109,11 @@ const SdFilePicker = class {
             } }, displayText), !this.disabled && hasFiles && (h("sd-icon", { key: '0a3c122382cab2148a88fbd4fdc9ff1f7cde757b', name: "close", size: 12, color: "#888888", class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (h("div", { key: '628717309bf16c0906e9ac21ecbf14a416eea8d8', class: "sd-file-picker__tooltip" }, displayText))));
     }
     static get watchers() { return {
-        "value": ["valueChanged"]
+        "value": [{
+                "valueChanged": 0
+            }]
     }; }
 };
 SdFilePicker.style = sdFilePickerCss();
 
 export { SdFilePicker as sd_file_picker };
-//# sourceMappingURL=sd-file-picker.entry.js.map

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-DqSa0XJ6.js';
+import { r as registerInstance, c as createEvent, h } from './index-BNCQkS1w.js';
 
 const SdForm = class {
     constructor(hostRef) {
@@ -70,4 +70,3 @@ const SdForm = class {
 };
 
 export { SdForm as sd_form };
-//# sourceMappingURL=sd-form.entry.js.map

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, a as getElement, h } from './index-DqSa0XJ6.js';
+import { r as registerInstance, a as getElement, h } from './index-BNCQkS1w.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;height:fit-content;width:fit-content}sd-guide .sd-guide{display:inline-flex;align-items:center;height:fit-content;width:fit-content}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}`;
 
@@ -55,7 +55,7 @@ const SdGuide = class {
         const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];
         return (h("div", { key: '2a7d3d040d3fbe7d0c22afc62d67a848fbae67d9', class: "sd-guide", style: {
                 '--sd-guide-color': GUIDE_ICON[this.type].color,
-            } }, h("sd-button", { key: '9130f229be86d72882a2f6e270ca33e2cebf859b', 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: '79f69b8923af6257fe456a8bed5411778c0ca46b', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: 'c4b798c0e3e66eb1abafa7c1aae7872c28b0be5b', style: { position: 'absolute', width: '0px', height: '0px' } }, h("div", { key: 'ca09e67a231f8d1786d7b8ff410cdf38fb58a12c', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, h("sd-button", { key: '800299db98f85865f808de807e44601819584a96', class: "sd-guide__popup__close", icon: "close", color: "grey_65", size: "md", variant: "ghost", noHover: true, onClick: this.closeDropdown }), h("div", { key: 'e907cf708ec51b3d0284afca4041915c03f2c8ee', class: "sd-guide__popup__header" }, h("sd-icon", { key: 'f19b549aa7d30dd70bd679b01d448270b8621f11', name: "helpOutline", size: 24, color: "green_65" }), h("h3", { key: 'abc78d35daea9bb4a974f05aed10e0bcc15444b7', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), h("ul", { key: 'cb20eda71c4173fd439f81767df734b33c5b6e09', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
+            } }, h("sd-button", { key: 'e354fa7a48aacabbd7688f9546d71ec138b4a648', 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, onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (h("sd-portal", { key: '157583215cdba27ae493a07aaa3eb4a0e3923971', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: '6aaa8f4ee6f44225ee63ef740d7398e87207c0c0', style: { position: 'absolute', width: '0px', height: '0px' } }, h("div", { key: '9184936963f96e2537b3713bd5ee38d0c058c72b', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, h("sd-button", { key: 'a1f653f7e40f6ad4e97dca82e10d4f03843469fd', class: "sd-guide__popup__close", icon: "close", color: "grey_65", size: "md", variant: "ghost", noHover: true, onSdClick: this.closeDropdown }), h("div", { key: '561433ec3fcf6f9de4badd8e24ffaffbab4e62df', class: "sd-guide__popup__header" }, h("sd-icon", { key: '69aafb073fa680f8353deccb860320da083ff121', name: "helpOutline", size: 24, color: "green_65" }), h("h3", { key: '71f7fcb3068d572523c6bf53276e654feb1056f6', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), h("ul", { key: '407db996ded71b9a5786b1e7967349517c7eb877', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
     }
     // 현재 2depth까지만 스타일 적용
     renderListItem(message, depth = 0) {
@@ -76,4 +76,3 @@ const SdGuide = class {
 SdGuide.style = sdGuideCss();
 
 export { SdGuide as sd_guide };
-//# sourceMappingURL=sd-guide.entry.js.map

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, a as getElement, h, F as Fragment } from './index-DqSa0XJ6.js';
-import { T as TooltipArrow } from './tooltipArrow-BZ2GZRbH.js';
+import { r as registerInstance, a as getElement, h, F as Fragment } from './index-BNCQkS1w.js';
+import { T as TooltipArrow } from './tooltipArrow-DSxHqrjN.js';
 
 const sdPopoverCss = () => `sd-popover{position:relative;cursor:pointer;display:inline-flex}`;
 
@@ -36,17 +36,18 @@ const SdPopover = class {
         this.showPopover = false;
     };
     render() {
-        return (h(Fragment, { key: '883bea0d5ef88bb63b4a1a2d778aedf0bce6f000' }, 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: '748b76d151dce05cffdd97d9803a96f14554ad3b', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, h("div", { key: '36bd2a265c89589b13e67107d57e8045a87d6b40', class: {
+        return (h(Fragment, { key: '883bea0d5ef88bb63b4a1a2d778aedf0bce6f000' }, 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: 'f38658d537cd8cebb84e579b02c73209e8a81d3a', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, h("div", { key: '472702d7d51c08051670012fc2e930f41ad7f1b5', class: {
                 'sd-floating-menu': true,
                 [`sd-floating-menu--${this.placement}`]: true,
                 [this.menuClass]: !!this.menuClass,
-            } }, h("i", { key: 'cd9b298e666ce898c83576c869e60e1e5e0bb38f', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '79012e2c547a71e2084958925445ac26a8bbf7fe' })), h("div", { key: '0664419fe24318ced7cbca2da1b9e0741c48f333', class: "sd-floating-menu__content" }, this.menuTitle && h("div", { key: 'a3f9238db85a7ca245cb5f794e1a9249742c3b42', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: '56696f99a5400276c099a8ca69f904b4a932802c', class: "sd-floating-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: 'cbdf8231857ccb20156d25758dbe2d1809e28656', 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: 'a2f249d05c6cd40d24005307d78aea95a841b0b8', title: "close", class: "sd-floating-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: '13ba057c4acf7ae65cfe8d722fe8bdb69ce506ac', name: "close", size: "12", color: "gery_55" }))))))));
+            } }, h("i", { key: '1895eba14b74f393c7221db83fdf97e9a8f3a1aa', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '4307eb8e750dc36cae5477b366a4ea08a59a5a45' })), h("div", { key: '840d94cf1d4e3c63346cd48a2d47c1c0b0633046', class: "sd-floating-menu__content" }, this.menuTitle && h("div", { key: 'ede807dfdb2efc2a8bf8f89ef597965092c79211', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: '613ea1b46810eec1958b735fc23811d66ff2ebf8', class: "sd-floating-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: '06712ed73687c0e99778d5fda6d75a4e07d815dd', 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: '20d628d8d31bd6464c26f3cf5ba894c5c3a2428f', title: "close", class: "sd-floating-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: 'cd1dcbe02ed55a25364e88621db5ab287eb7ed8e', name: "close", size: "12", color: "gery_55" }))))))));
     }
     static get watchers() { return {
-        "show": ["watchShowHandler"]
+        "show": [{
+                "watchShowHandler": 0
+            }]
     }; }
 };
 SdPopover.style = sdPopoverCss();
 
 export { SdPopover as sd_popover };
-//# sourceMappingURL=sd-popover.entry.js.map

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-DqSa0XJ6.js';
+import { r as registerInstance, h } from './index-BNCQkS1w.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}`;
 
@@ -59,4 +59,3 @@ const SdProgress = class {
 SdProgress.style = sdProgressCss();
 
 export { SdProgress as sd_progress };
-//# sourceMappingURL=sd-progress.entry.js.map

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-DqSa0XJ6.js';
+import { r as registerInstance, c as createEvent, h } from './index-BNCQkS1w.js';
 
 const sdRadioButtonGroupCss = () => `sd-radio-button-group{display:inline-flex;width:fit-content;height:fit-content}sd-radio-button-group .sd-radio-button-group{display:inline-flex;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}`;
 
@@ -53,4 +53,3 @@ const SdRadioButtonGroup = class {
 SdRadioButtonGroup.style = sdRadioButtonGroupCss();
 
 export { SdRadioButtonGroup as sd_radio_button_group };
-//# sourceMappingURL=sd-radio-button-group.entry.js.map

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-DqSa0XJ6.js';
+import { r as registerInstance, c as createEvent, h } from './index-BNCQkS1w.js';
 
 const sdRadioGroupCss = () => `sd-radio{display:inline-flex;width:fit-content;height:fit-content}sd-radio .sd-radio{cursor:pointer}sd-radio .sd-radio label{display:inline-flex;width:fit-content;align-items:center;gap:8px;cursor:pointer}sd-radio .sd-radio label input{display:inline-block;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}`;
 
@@ -32,10 +32,11 @@ const SdRadioGroup = class {
         })));
     }
     static get watchers() { return {
-        "value": ["valueChanged"]
+        "value": [{
+                "valueChanged": 0
+            }]
     }; }
 };
 SdRadioGroup.style = sdRadioGroupCss();
 
 export { SdRadioGroup as sd_radio_group };
-//# sourceMappingURL=sd-radio-group.entry.js.map

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, a as getElement, h, F as Fragment } from './index-DqSa0XJ6.js';
-import { B as BaseDropdownEvent, S as SelectKeyboardNavigation } from './select-keyboard-navigation-C2JaR3A6.js';
+import { r as registerInstance, c as createEvent, a as getElement, h, F as Fragment } from './index-BNCQkS1w.js';
+import { B as BaseDropdownEvent, n as nanoid, S as SelectKeyboardNavigation } from './select-keyboard-navigation-D8-D-mJX.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}`;
 
@@ -15,7 +15,7 @@ const SdSelectMultipleGroup = class extends BaseDropdownEvent {
     value = null;
     options = [];
     placeholder = '선택';
-    optionPlaceholder = '옵션이 없습니다.';
+    optionPlaceholder = '선택지가 없습니다.';
     width = '200px';
     dropdownHeight = '260px';
     disabled = false;
@@ -31,7 +31,6 @@ const SdSelectMultipleGroup = class extends BaseDropdownEvent {
     labelTooltip = '';
     labelTooltipProps = null;
     // props - form
-    name;
     rules = [];
     error = false;
     // props - custom styles
@@ -59,6 +58,7 @@ const SdSelectMultipleGroup = class extends BaseDropdownEvent {
     dropdownRef;
     formField;
     dropDownWidth = this.width;
+    name = nanoid();
     async sdOpen() {
         await new Promise(resolve => setTimeout(resolve, 0));
         this.isOpen = true;
@@ -393,7 +393,7 @@ const SdSelectMultipleGroup = class extends BaseDropdownEvent {
         });
     }
     render() {
-        return (h("sd-field", { key: '1656f964cda04b6b1c4d118c7204d2733306caac', 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: '59f784d6d84365d5abf05a19338bdcefa844ce18', class: {
+        return (h("sd-field", { key: 'edcc86b68474b668acce13cd04cf2e75cdc3e5cc', 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: '13b3366af18b65ac30a9e1a9a295c486351f585e', class: {
                 'sd-select-multiple-group': true,
                 'sd-select-multiple-group--open': this.isOpen,
                 'sd-select-multiple-group--disabled': this.disabled,
@@ -431,14 +431,23 @@ const SdSelectMultipleGroup = class extends BaseDropdownEvent {
             }, useCheckbox: this.useCheckbox, ...(option.type !== 'item' && { countInfo: this.getChildrenOptions(option) }) })))))) : (h("slot", { name: "option-placeholder" }, h("div", { class: 'sd-select-multiple-group__option-placeholder', style: this.optionStyle }, this.optionPlaceholder)))))));
     }
     static get watchers() { return {
-        "value": ["valueChanged"],
-        "options": ["optionsChanged"],
-        "searchText": ["searchTextChanged"],
-        "itemIndex": ["itemIndexChanged"],
-        "isOpen": ["isOpenChanged"]
+        "value": [{
+                "valueChanged": 0
+            }],
+        "options": [{
+                "optionsChanged": 0
+            }],
+        "searchText": [{
+                "searchTextChanged": 0
+            }],
+        "itemIndex": [{
+                "itemIndexChanged": 0
+            }],
+        "isOpen": [{
+                "isOpenChanged": 0
+            }]
     }; }
 };
 SdSelectMultipleGroup.style = sdSelectMultipleGroupCss();
 
 export { SdSelectMultipleGroup as sd_select_multiple_group };
-//# sourceMappingURL=sd-select-multiple-group.entry.js.map

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-DqSa0XJ6.js';
-import { B as BaseDropdownEvent, S as SelectKeyboardNavigation } from './select-keyboard-navigation-C2JaR3A6.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-BNCQkS1w.js';
+import { B as BaseDropdownEvent, n as nanoid, S as SelectKeyboardNavigation } from './select-keyboard-navigation-D8-D-mJX.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)}`;
 
@@ -15,7 +15,7 @@ const SdSelectMultiple = class extends BaseDropdownEvent {
     value = null;
     options = [];
     placeholder = '선택';
-    optionPlaceholder = '옵션이 없습니다.';
+    optionPlaceholder = '선택지가 없습니다.';
     width = '200px';
     dropdownHeight = '260px';
     autoFocus = false;
@@ -31,7 +31,6 @@ const SdSelectMultiple = class extends BaseDropdownEvent {
     labelTooltip = '';
     labelTooltipProps = null;
     // props - form
-    name;
     rules = [];
     error = false;
     optionRenderer;
@@ -47,6 +46,7 @@ const SdSelectMultiple = class extends BaseDropdownEvent {
     formField;
     filteredOptions = this.options;
     dropDownWidth = this.width;
+    name = nanoid();
     async sdOpen() {
         this.isOpen = true;
     }
@@ -149,7 +149,7 @@ const SdSelectMultiple = class extends BaseDropdownEvent {
         this.handleOptionSelection(option);
     };
     render() {
-        return (h("sd-field", { key: 'a70e7fefb98428e616d2f124923dfa7ee7a7c2e2', 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) }, h("div", { key: 'fda63e4e8dcc72aa0147b2981b49b7e28e377ee8', class: {
+        return (h("sd-field", { key: 'e445d2c3f80d78be0e74b1f54371eb27d9c316e8', 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) }, h("div", { key: '9fad0ed744cafb9e1e5f16ee413f36edd8f2c1f3', class: {
                 'sd-select-multiple': true,
                 'sd-select-multiple--open': this.isOpen,
                 'sd-select-multiple--disabled': this.disabled,
@@ -174,10 +174,11 @@ const SdSelectMultiple = class extends BaseDropdownEvent {
         return (h("sd-portal", { open: this.isOpen, parentRef: parentRef, onSdClose: this.closeDropdown }, h("sd-select-dropdown", { value: this.value, options: this.options, itemIndex: this.itemIndex, width: this.dropDownWidth, dropdownHeight: this.dropdownHeight, searchable: this.searchable, optionPlaceholder: this.optionPlaceholder, useCheckbox: this.useCheckbox, useAll: this.useAll, onSdOptionClick: ({ detail }) => this.handleOptionClick(detail), onSdOptionFiltered: ({ detail }) => (this.filteredOptions = detail) })));
     }
     static get watchers() { return {
-        "isOpen": ["isOpenChanged"]
+        "isOpen": [{
+                "isOpenChanged": 0
+            }]
     }; }
 };
 SdSelectMultiple.style = sdSelectMultipleCss();
 
 export { SdSelectMultiple as sd_select_multiple };
-//# sourceMappingURL=sd-select-multiple.entry.js.map

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-DqSa0XJ6.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-BNCQkS1w.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}`;
 
@@ -64,4 +64,3 @@ const SdSelectOptionGroup = class {
 SdSelectOptionGroup.style = sdSelectOptionGroupCss();
 
 export { SdSelectOptionGroup as sd_select_option_group };
-//# sourceMappingURL=sd-select-option-group.entry.js.map

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-DqSa0XJ6.js';
+import { r as registerInstance, c as createEvent, h } from './index-BNCQkS1w.js';
 
 const sdTabsCss = () => `sd-tabs{display:inline-block}sd-tabs .sd-tabs{display:flex;flex-direction:row;gap:4px;border-bottom:1px solid #0075ff}sd-tabs .sd-tabs__tab{display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;border:1px solid #cccccc;border-bottom:none;border-radius:4px 4px 0 0;background-color:#f6f6f6;color:#888888;font-weight:400;transition:all 0.2s ease;position:relative;user-select:none}sd-tabs .sd-tabs__tab::before{content:"";position:absolute;inset:0;opacity:0;transition:all 0.3s}sd-tabs .sd-tabs__tab--selected{border-color:#0075ff;color:#0075ff;background-color:white}sd-tabs .sd-tabs__tab--selected .sd-tabs__label::before{font-weight:700}sd-tabs .sd-tabs__tab--selected:hover::before{background-color:#0075ff;opacity:0.15}sd-tabs .sd-tabs__tab--unselected:hover::before{background-color:#888888;opacity:0.15}sd-tabs .sd-tabs__label{user-select:none;font-weight:700;visibility:hidden;position:relative}sd-tabs .sd-tabs__label::before{content:attr(data-label);visibility:visible;position:absolute;inset:0;font-weight:400;transition:font-weight 0.2s ease}sd-tabs .sd-tabs--md .sd-tabs__tab{padding:12px 32px;font-size:12px;line-height:20px}sd-tabs .sd-tabs--sm .sd-tabs__tab{padding:8px 20px;font-size:12px;line-height:16px}sd-tabs .sd-tabs--sub{gap:32px;border-bottom:none}sd-tabs .sd-tabs--sub .sd-tabs__tab{border:none;border-radius:0;background-color:transparent;color:#222222;font-weight:400;padding:0 0 2px 0;position:relative}sd-tabs .sd-tabs--sub .sd-tabs__tab::before{content:"";position:absolute;top:100%;left:0;right:0;height:1px;width:100%;background-color:#0075ff;opacity:0;transition:opacity 0.2s ease}sd-tabs .sd-tabs--sub .sd-tabs__tab::after{font-weight:400}sd-tabs .sd-tabs--sub .sd-tabs__tab--selected{color:#0075ff;background-color:transparent}sd-tabs .sd-tabs--sub .sd-tabs__tab--selected::before{opacity:1}sd-tabs .sd-tabs--sub .sd-tabs__tab--selected::after{font-weight:700}`;
 
@@ -55,10 +55,11 @@ const SdTabs = class {
         })));
     }
     static get watchers() { return {
-        "value": ["valueChanged"]
+        "value": [{
+                "valueChanged": 0
+            }]
     }; }
 };
 SdTabs.style = sdTabsCss();
 
 export { SdTabs as sd_tabs };
-//# sourceMappingURL=sd-tabs.entry.js.map

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, a as getElement, h } from './index-DqSa0XJ6.js';
+import { r as registerInstance, a as getElement, h } from './index-BNCQkS1w.js';
 
 const sdTagCss = () => `:host{display:inline-block}:host([full-width]){display:block}.sd-tag{display:inline-flex;width:100%;align-items:center;justify-content:center;gap:8px;text-decoration:none;border:1px solid transparent;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}.sd-tag__content{display:inline-block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sd-tag--custom-color{background:var(--tag-bg-color);color:var(--tag-text-color)}.sd-tag--sm{padding:0 6px;font-size:11px;line-height:18px;height:20px;border-radius:4px}.sd-tag--md{padding:0 8px;font-size:12px;font-weight:700;line-height:20px;height:24px;border-radius:4px}.sd-tag--lg{padding:0 10px;font-size:14px;font-weight:700;line-height:24px;min-height:28px;border-radius:5px}.sd-tag--rounded.sd-tag--sm{border-radius:20px}.sd-tag--rounded.sd-tag--md{border-radius:20px}.sd-tag--rounded.sd-tag--lg{border-radius:15px}`;
 
@@ -52,4 +52,3 @@ const SdTag = class {
 SdTag.style = sdTagCss();
 
 export { SdTag as sd_tag };
-//# sourceMappingURL=sd-tag.entry.js.map

package/dist/esm/sd-toast-message.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-DqSa0XJ6.js';
+import { r as registerInstance, c as createEvent, h } from './index-BNCQkS1w.js';
 import { r as resolveColor } from './resolveColor-DcGvp3RM.js';
 
 const sdToastMessageCss = () => `sd-toast-message{display:block;width:fit-content;height:fit-content}sd-toast-message .sd-toast-message{display:flex;width:fit-content;align-items:center;gap:16px;padding:12px 24px;border-radius:4px;background-color:var(--sd-toast-bg);color:var(--sd-toast-text);transition:opacity 0.2s ease, visibility 0.2s ease;box-shadow:2px 2px 8px 2px rgba(0, 0, 0, 0.2)}sd-toast-message .sd-toast-message--hidden{opacity:0;visibility:hidden;pointer-events:none}sd-toast-message .sd-toast-message__icon{display:flex;align-items:center;flex-shrink:0}sd-toast-message .sd-toast-message__content{display:flex;flex:1}sd-toast-message .sd-toast-message__message{font-size:14px;line-height:20px;font-weight:400}sd-toast-message .sd-toast-message__link{font-size:14px;line-height:20px;color:var(--sd-toast-text);text-decoration:underline;cursor:pointer;transition:opacity 0.2s ease;margin-left:4px}sd-toast-message .sd-toast-message__link:hover{opacity:0.8}sd-toast-message .sd-toast-message__button{flex-shrink:0}sd-toast-message .sd-toast-message__button button{color:var(--button-text-color, inherit) !important}sd-toast-message .sd-toast-message__close{display:flex;align-items:center;justify-content:center;padding:4px;background-color:transparent;border:none;cursor:pointer;transition:opacity 0.2s ease;flex-shrink:0}sd-toast-message .sd-toast-message__close:hover{opacity:0.7}sd-toast-message .sd-toast-message__close:active{opacity:0.5}`;
@@ -50,10 +50,9 @@ const SdToastMessage = class {
         return (h("div", { key: '5fd84c67e2766016835cfa6fb87a6624b654338d', style: {
                 '--sd-toast-bg': colors.background,
                 '--sd-toast-text': colors.text,
-            } }, h("div", { key: '00cbdacb890e65c6a4a1980933496e3a007d4c55', class: this.getContainerClasses(), role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (h("div", { key: '40a4942dafb3c7b5e720ece5af28bfbe40a05726', class: "sd-toast-message__icon" }, h("sd-icon", { key: 'a2541d653e24e33a2496a36f476a98acd81d1d9d', name: this.icon, size: 16, color: colors.text }))), h("div", { key: '09d913c231f397813f4c145577113334b4d8936c', class: "sd-toast-message__content" }, h("span", { key: '1b6ddeadab09234698824b2e07b6b3170a52b742', class: "sd-toast-message__message" }, this.message)), this.link && (h("a", { key: '2c85646a763edb49dfd4ace150b11704064ffacb', href: this.link, class: "sd-toast-message__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (h("sd-button", { key: '6a164979e3f8a7e46ab86459658d6101cd05c16b', class: `sd-toast-message__button ${this.type === 'basicLight' ? 'text-white' : ''}`, label: this.buttonLabel, variant: "primary", color: this.type === 'basicLight' ? 'oceanblue_75' : 'white', size: "sm", onClick: this.handleButtonClick, style: this.type !== 'basicLight' ? { '--button-text-color': resolveColor('grey_95') } : {} })), this.useClose && (h("button", { key: 'bf45c26e3ccaa338352401517247e4d9c8c63eee', type: "button", class: "sd-toast-message__close", onClick: this.handleClose, "aria-label": "Close", title: "Close" }, h("sd-icon", { key: 'f5e46cc9f37aab757d8a93be7d3505d3efc69be9', name: "close", size: 12, color: colors.text }))))));
+            } }, h("div", { key: '00cbdacb890e65c6a4a1980933496e3a007d4c55', class: this.getContainerClasses(), role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (h("div", { key: '40a4942dafb3c7b5e720ece5af28bfbe40a05726', class: "sd-toast-message__icon" }, h("sd-icon", { key: 'a2541d653e24e33a2496a36f476a98acd81d1d9d', name: this.icon, size: 16, color: colors.text }))), h("div", { key: '09d913c231f397813f4c145577113334b4d8936c', class: "sd-toast-message__content" }, h("span", { key: '1b6ddeadab09234698824b2e07b6b3170a52b742', class: "sd-toast-message__message" }, this.message)), this.link && (h("a", { key: '2c85646a763edb49dfd4ace150b11704064ffacb', href: this.link, class: "sd-toast-message__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (h("sd-button", { key: '5e53f5a629c3b9a1000b8606877d833eaf56de2a', class: `sd-toast-message__button ${this.type === 'basicLight' ? 'text-white' : ''}`, label: this.buttonLabel, variant: "primary", color: this.type === 'basicLight' ? 'oceanblue_75' : 'white', size: "sm", onSdClick: this.handleButtonClick, style: this.type !== 'basicLight' ? { '--button-text-color': resolveColor('grey_95') } : {} })), this.useClose && (h("button", { key: '78583506f960dab8c2e978a51de52fa0cfecc559', type: "button", class: "sd-toast-message__close", onClick: this.handleClose, "aria-label": "Close", title: "Close" }, h("sd-icon", { key: '926c90a10942c2bb2ed0815236e2857d3d46b6f6', name: "close", size: 12, color: colors.text }))))));
     }
 };
 SdToastMessage.style = sdToastMessageCss();
 
 export { SdToastMessage as sd_toast_message };
-//# sourceMappingURL=sd-toast-message.entry.js.map

package/dist/esm/sd-toggle-button.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-DqSa0XJ6.js';
+import { r as registerInstance, c as createEvent, h } from './index-BNCQkS1w.js';
 
 const sdToggleButtonCss = () => `sd-toggle-button{display:inline-block;line-height:0}.sd-toggle-button{display:inline-flex;align-items:center;justify-content:center;height:28px;padding:4px 12px;gap:6px;border-radius:14px;border:1px solid #888888;background-color:#ffffff;color:#737373;font-size:12px;line-height:20px;font-weight:400;cursor:pointer;transition:border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;white-space:nowrap;user-select:none;box-sizing:border-box}.sd-toggle-button--active{border-color:#0075ff;color:#0075ff}.sd-toggle-button--disabled{background-color:#eeeeee;border-color:#cccccc;color:#888888;cursor:not-allowed}.sd-toggle-button--disabled.sd-toggle-button--active{background-color:#eeeeee;border-color:#cccccc;color:#888888}.sd-toggle-button:hover:not(.sd-toggle-button--disabled):not(.sd-toggle-button--active){border-color:#737373}.sd-toggle-button:hover:not(.sd-toggle-button--disabled).sd-toggle-button--active{border-color:#005cc9;color:#005cc9}`;
 
@@ -45,4 +45,3 @@ const SdToggleButton = class {
 SdToggleButton.style = sdToggleButtonCss();
 
 export { SdToggleButton as sd_toggle_button };
-//# sourceMappingURL=sd-toggle-button.entry.js.map

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-DqSa0XJ6.js';
+import { r as registerInstance, c as createEvent, h } from './index-BNCQkS1w.js';
 
 const sdToggleCss = () => `sd-toggle{display:inline-block;height:20px;line-height:0}sd-toggle .sd-toggle{cursor:pointer;display:inline-flex;align-items:center;gap:8px;height:20px}sd-toggle .sd-toggle>input{display:none}sd-toggle .sd-toggle__label{font-size:12px;color:#333333;line-height:20px}sd-toggle .sd-toggle__track{width:36px;height:20px;border-radius:12px;background:#cccccc;position:relative;transition:background-color 0.2s ease}sd-toggle .sd-toggle__thumb{width:16px;height:16px;border-radius:50%;background:white;position:absolute;top:2px;left:2px;transition:transform 0.2s ease}sd-toggle .sd-toggle--checked .sd-toggle__track{background:#0075ff}sd-toggle .sd-toggle--checked .sd-toggle__thumb{transform:translateX(16px)}sd-toggle .sd-toggle--disabled{cursor:not-allowed}sd-toggle .sd-toggle--disabled.sd-toggle--checked .sd-toggle__track{background:#bbdaff}sd-toggle .sd-toggle--disabled.sd-toggle--unchecked .sd-toggle__track{background:#eeeeee}sd-toggle .sd-toggle:hover:not(.sd-toggle--disabled).sd-toggle--checked .sd-toggle__track{background:#005cc9}sd-toggle .sd-toggle:hover:not(.sd-toggle--disabled).sd-toggle--unchecked .sd-toggle__track{background:#bbbbbb}`;
 
@@ -41,4 +41,3 @@ const SdToggle = class {
 SdToggle.style = sdToggleCss();
 
 export { SdToggle as sd_toggle };
-//# sourceMappingURL=sd-toggle.entry.js.map

package/dist/esm/{select-keyboard-navigation-C2JaR3A6.js → select-keyboard-navigation-D8-D-mJX.js}

@@ -1,3 +1,15 @@
+/* @ts-self-types="./index.d.ts" */
+let urlAlphabet =
+  'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict';
+let nanoid = (size = 21) => {
+  let id = '';
+  let i = size | 0;
+  while (i--) {
+    id += urlAlphabet[(Math.random() * 64) | 0];
+  }
+  return id
+};
+
 class DropdownManager {
     static instance;
     activeDropdowns = new Set();
@@ -110,7 +122,4 @@ class SelectKeyboardNavigation {
     }
 }
 
-export { BaseDropdownEvent as B, SelectKeyboardNavigation as S };
-//# sourceMappingURL=select-keyboard-navigation-C2JaR3A6.js.map
-
-//# sourceMappingURL=select-keyboard-navigation-C2JaR3A6.js.map
+export { BaseDropdownEvent as B, SelectKeyboardNavigation as S, nanoid as n };

package/dist/{components/p-hwPQdJr0.js → esm/tooltipArrow-DSxHqrjN.js}

@@ -1,8 +1,5 @@
-import { h } from './p-CR2Jbl0B.js';
+import { h } from './index-BNCQkS1w.js';
 
 const TooltipArrow = (props) => (h("svg", { width: "16", height: "12", viewBox: "0 0 16 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, h("path", { d: "M8.83205 10.7519C8.43623 11.3457 7.56377 11.3457 7.16795 10.7519L1.04907e-06 -1.39876e-06L16 0L8.83205 10.7519Z", fill: "currentColor" })));
 
 export { TooltipArrow as T };
-//# sourceMappingURL=p-hwPQdJr0.js.map
-
-//# sourceMappingURL=p-hwPQdJr0.js.map

package/dist/esm/useDatePicker-DTrMR0rx.js

@@ -43,6 +43,3 @@ const useDatePicker = () => {
 };
 
 export { today as t, useDatePicker as u };
-//# sourceMappingURL=useDatePicker-DTrMR0rx.js.map
-
-//# sourceMappingURL=useDatePicker-DTrMR0rx.js.map

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

@@ -1,3 +1,4 @@
+import { EventEmitter } from '../../stencil-public-runtime';
 export type ButtonVariant = 'primary' | 'outline' | 'ghost';
 export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
 export declare class SdButton {
@@ -13,7 +14,9 @@ export declare class SdButton {
     iconSize?: number;
     iconRight?: IconName;
     noHover: boolean;
-    class: string;
+    sdClass: string;
+    click: EventEmitter<MouseEvent>;
+    private handleClick;
     private getButtonClasses;
     render(): any;
 }

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

@@ -1,5 +1,5 @@
 export declare class SdCard {
     bordered: boolean;
-    cardClassName?: string;
+    sdClass?: string;
     render(): any;
 }

package/dist/types/components/sd-modal-card/sd-modal-card.d.ts

@@ -16,7 +16,7 @@ export declare class SdModalCard {
     buttonFlexDirection: 'row' | 'column';
     buttonProps?: SdModalCardButtonProps[];
     message: string[];
-    modalClass: string;
+    sdClass: string;
     close: EventEmitter<MouseEvent>;
     confirm: EventEmitter<MouseEvent>;
     private get pointColor();

package/dist/types/components/sd-select-multiple/sd-select-multiple.d.ts

@@ -20,7 +20,6 @@ export declare class SdSelectMultiple extends BaseDropdownEvent {
     useLabelRequired: boolean;
     labelTooltip: string;
     labelTooltipProps: SdTooltipProps | null;
-    name?: string;
     rules?: Rule[];
     error?: boolean;
     optionRenderer?: (option: SelectOption, index: number, isSelected: boolean) => any;
@@ -34,6 +33,7 @@ export declare class SdSelectMultiple extends BaseDropdownEvent {
     private formField?;
     private filteredOptions;
     private dropDownWidth;
+    name: string;
     sdOpen(): Promise<void>;
     sdValidate(): Promise<void>;
     sdReset(): Promise<void>;

package/dist/types/components/sd-select-multiple-group/sd-select-multiple-group.d.ts

@@ -26,7 +26,6 @@ export declare class SdSelectMultipleGroup extends BaseDropdownEvent {
     useLabelRequired: boolean;
     labelTooltip: string;
     labelTooltipProps: SdTooltipProps | null;
-    name?: string;
     rules?: Rule[];
     error?: boolean;
     containerStyle: SelectStyleProps['containerStyle'];
@@ -50,6 +49,7 @@ export declare class SdSelectMultipleGroup extends BaseDropdownEvent {
     private dropdownRef?;
     private formField?;
     private dropDownWidth;
+    name: string;
     sdOpen(): Promise<void>;
     sdValidate(): Promise<void>;
     sdReset(): Promise<void>;