@sellmate/design-system 1.0.50 → 1.0.51

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

@@ -1,13 +1,57 @@
 'use strict';
 
-var index = require('./index-Qvv0fGgj.js');
+var index = require('./index-BQt-JC6r.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}`;
+const filepicker = {
+	height: "28",
+	paddingX: "12",
+	gap: "8",
+	radius: "4",
+	typography: {
+		fontWeight: "400",
+		fontSize: "12",
+		lineHeight: "20"},
+	size: {
+		icon: "16"
+	},
+	text: {
+		"default": "#222222",
+		placeholder: "#AAAAAA",
+		disabled: "#888888"
+	},
+	icon: {
+		disabled: "#BBBBBB"
+	}
+};
+var filePickerTokens = {
+	filepicker: filepicker
+};
+
+const fp = filePickerTokens.filepicker;
+const FILE_PICKER_LAYOUT = {
+    height: fp.height,
+    paddingX: fp.paddingX,
+    gap: fp.gap,
+    radius: fp.radius,
+    fontSize: fp.typography.fontSize,
+    lineHeight: fp.typography.lineHeight,
+    fontWeight: fp.typography.fontWeight,
+    iconSize: fp.size.icon};
+const FILE_PICKER_COLORS = {
+    text: fp.text,
+    icon: {
+        default: '#888888', // TODO: 토큰 반영 후 교체
+        disabled: fp.icon.disabled,
+    },
+};
+
+const sdFilePickerCss = () => `sd-file-picker{display:inline-flex;width:100%}.sd-file-picker__content{width:100%;height:100%;display:flex;align-items:center;padding:0 var(--sd-file-picker-padding-x);gap:var(--sd-file-picker-gap);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:var(--sd-file-picker-font-weight);font-size:var(--sd-file-picker-font-size);line-height:var(--sd-file-picker-line-height);color:var(--sd-file-picker-placeholder-color)}.sd-file-picker__text--active{color:var(--sd-file-picker-text-color)}.sd-file-picker__text--placeholder{color:var(--sd-file-picker-placeholder-color)}.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-field--disabled .sd-file-picker__content{cursor:not-allowed}.sd-field--disabled .sd-file-picker__text{color:var(--sd-file-picker-disabled-color)}.sd-file-picker--inline .sd-file-picker__content{border:none;background-color:transparent;padding:0;height:auto}.sd-file-picker--inline .sd-file-picker__text{color:var(--sd-file-picker-placeholder-color)}.sd-file-picker--inline:hover:not(.sd-file-picker--inline-disabled) .sd-file-picker__text{color:var(--sd-file-picker-text-color)}.sd-file-picker--inline .sd-file-picker__text--active{color:var(--sd-file-picker-text-color)}.sd-file-picker--inline.sd-file-picker--inline-disabled .sd-file-picker__content{cursor:not-allowed}.sd-file-picker--inline.sd-file-picker--inline-disabled .sd-file-picker__text{color:var(--sd-file-picker-disabled-color)}`;
 
 const SdFilePicker = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.update = index.createEvent(this, "sdUpdate");
+        this.update = index.createEvent(this, "sdUpdate", 7);
+        this.reject = index.createEvent(this, "sdReject", 7);
     }
     get el() { return index.getElement(this); }
     value = null;
@@ -16,12 +60,31 @@ const SdFilePicker = class {
     inline = false;
     multiple = false;
     accept;
-    internalValue = null;
+    maxFileSize;
+    maxTotalSize;
+    maxFiles;
+    // sd-field 패스스루 props
+    name = '';
+    label = '';
+    addonLabel = '';
+    hint = '';
+    errorMessage = '';
+    width = '';
+    rules;
+    error = false;
+    status;
+    icon = undefined;
+    labelTooltip = '';
+    labelTooltipProps = null;
+    focused = false;
     hovered = false;
+    internalValue = null;
     showTooltip = false;
     fileInputRef;
     fileNamesRef;
+    formField;
     update;
+    reject;
     valueChanged(newValue) {
         this.internalValue = newValue;
     }
@@ -31,6 +94,47 @@ const SdFilePicker = class {
     componentDidUpdate() {
         this.checkOverflow();
     }
+    async sdValidate() {
+        return this.formField?.sdValidate() ?? Promise.resolve(true);
+    }
+    async sdReset() {
+        const clearedValue = this.multiple ? [] : null;
+        this.value = clearedValue;
+        this.internalValue = clearedValue;
+        if (this.fileInputRef) {
+            this.fileInputRef.value = '';
+        }
+        await this.formField?.sdReset();
+    }
+    async sdResetValidate() {
+        await this.formField?.sdResetValidation();
+    }
+    toBytes(value) {
+        if (value == null)
+            return undefined;
+        return typeof value === 'string' ? Number(value) : value;
+    }
+    validateFiles(files) {
+        const maxFileSize = this.toBytes(this.maxFileSize);
+        const maxTotalSize = this.toBytes(this.maxTotalSize);
+        const maxFiles = this.maxFiles != null ? Number(this.maxFiles) : undefined;
+        if (maxFiles != null && files.length > maxFiles) {
+            return { accepted: [], rejected: files, reason: 'max-files' };
+        }
+        if (maxFileSize != null) {
+            const oversized = files.filter(f => f.size > maxFileSize);
+            if (oversized.length > 0) {
+                return { accepted: [], rejected: oversized, reason: 'max-file-size' };
+            }
+        }
+        if (maxTotalSize != null) {
+            const totalSize = files.reduce((sum, f) => sum + f.size, 0);
+            if (totalSize > maxTotalSize) {
+                return { accepted: [], rejected: files, reason: 'max-total-size' };
+            }
+        }
+        return { accepted: files, rejected: [] };
+    }
     handleFileChange = (event) => {
         const input = event.target;
         const files = input.files;
@@ -38,11 +142,19 @@ const SdFilePicker = class {
             return;
         }
         const fileArray = Array.from(files);
+        const { accepted, rejected, reason } = this.validateFiles(fileArray);
+        if (reason) {
+            this.reject?.emit({ files: rejected, reason });
+            if (this.fileInputRef) {
+                this.fileInputRef.value = '';
+            }
+            return;
+        }
         if (this.multiple) {
-            this.internalValue = fileArray;
+            this.internalValue = accepted;
         }
         else {
-            this.internalValue = fileArray[0];
+            this.internalValue = accepted[0];
         }
         this.value = this.internalValue;
         this.update?.emit(this.value);
@@ -64,13 +176,6 @@ const SdFilePicker = class {
             return;
         this.fileInputRef?.click();
     };
-    getStatusClass() {
-        if (this.disabled)
-            return 'sd-file-picker--disabled';
-        if (this.hasFiles())
-            return 'sd-file-picker--active';
-        return '';
-    }
     hasFiles() {
         if (!this.internalValue)
             return false;
@@ -94,23 +199,36 @@ const SdFilePicker = class {
         this.showTooltip = isOverflowing;
     }
     getIconColor() {
-        if (this.disabled) {
-            return this.inline ? 'grey_45' : 'grey_55';
-        }
-        return 'grey_70';
+        return this.disabled ? FILE_PICKER_COLORS.icon.disabled : FILE_PICKER_COLORS.icon.default;
     }
     render() {
         const hasFiles = this.hasFiles();
         const displayText = this.getDisplayText();
-        return (index.h("div", { key: 'b30f68abd7b5954ed60843fb436963306b3c9d58', class: {
-                'sd-file-picker': true,
-                [this.getStatusClass()]: true,
-                'sd-file-picker--inline': this.inline,
-            }, onClick: this.handleClick, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, index.h("input", { key: '6b0432850bc995ced5a87d2db33d5c669bb9f53d', ref: el => (this.fileInputRef = el), type: "file", class: "sd-file-picker__input", disabled: this.disabled, multiple: this.multiple, accept: this.accept, onInput: this.handleFileChange, "aria-label": this.placeholder }), index.h("sd-icon", { key: 'bf0efeaf7aac37cc8fed9a1f6dca8179be053506', name: "attachFile", size: 16, color: this.getIconColor(), class: "sd-file-picker__icon" }), index.h("div", { key: '7b8cdf49421b152f1cc14360a93b0b8a088e6125', ref: el => (this.fileNamesRef = el), class: {
+        const cssVars = {
+            '--sd-file-picker-font-size': `${FILE_PICKER_LAYOUT.fontSize}px`,
+            '--sd-file-picker-line-height': `${FILE_PICKER_LAYOUT.lineHeight}px`,
+            '--sd-file-picker-font-weight': FILE_PICKER_LAYOUT.fontWeight,
+            '--sd-file-picker-padding-x': `${FILE_PICKER_LAYOUT.paddingX}px`,
+            '--sd-file-picker-gap': `${FILE_PICKER_LAYOUT.gap}px`,
+            '--sd-file-picker-text-color': FILE_PICKER_COLORS.text.default,
+            '--sd-file-picker-placeholder-color': FILE_PICKER_COLORS.text.placeholder,
+            '--sd-file-picker-disabled-color': FILE_PICKER_COLORS.text.disabled,
+            // sd-field 시스템 변수 override
+            '--sd-system-size-field-sm-height': `${FILE_PICKER_LAYOUT.height}px`,
+            '--sd-system-radius-field-sm': `${FILE_PICKER_LAYOUT.radius}px`,
+        };
+        const content = (index.h("div", { class: "sd-file-picker__content", onClick: this.handleClick }, index.h("input", { ref: el => (this.fileInputRef = el), type: "file", class: "sd-file-picker__input", disabled: this.disabled, multiple: this.multiple, accept: this.accept, onInput: this.handleFileChange, "aria-label": this.placeholder }), index.h("sd-icon", { name: "attachFile", size: Number(FILE_PICKER_LAYOUT.iconSize), color: this.getIconColor(), class: "sd-file-picker__icon" }), index.h("div", { ref: el => (this.fileNamesRef = el), class: {
                 'sd-file-picker__text': true,
                 'sd-file-picker__text--placeholder': !hasFiles,
                 'sd-file-picker__text--active': hasFiles,
-            } }, displayText), !this.disabled && hasFiles && (index.h("sd-ghost-button", { key: '73386aa53e838065297d444310a33e32e0cb7c8a', icon: "close", size: "xxs", disabled: this.disabled, class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (index.h("div", { key: '54b4337797351ba86b391a020fa5260e807ff27e', class: "sd-file-picker__tooltip" }, displayText))));
+            } }, displayText), !this.disabled && hasFiles && (index.h("sd-ghost-button", { icon: "close", size: "xxs", disabled: this.disabled, class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (index.h("div", { class: "sd-file-picker__tooltip" }, displayText))));
+        if (this.inline) {
+            return (index.h("div", { class: {
+                    'sd-file-picker--inline': true,
+                    'sd-file-picker--inline-disabled': this.disabled,
+                }, style: cssVars, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, content));
+        }
+        return (index.h("sd-field", { name: this.name, 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, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, content));
     }
     static get watchers() { return {
         "value": [{

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

@@ -1,12 +1,12 @@
 'use strict';
 
-var index = require('./index-Qvv0fGgj.js');
+var index = require('./index-BQt-JC6r.js');
 
 const SdForm = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.submitSuccess = index.createEvent(this, "sdSubmit");
-        this.submitFail = index.createEvent(this, "sdValidationError");
+        this.submitSuccess = index.createEvent(this, "sdSubmit", 7);
+        this.submitFail = index.createEvent(this, "sdValidationError", 7);
     }
     formClass = '';
     fields = [];

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Qvv0fGgj.js');
+var index = require('./index-BQt-JC6r.js');
 
 const sdGuideCss = () => `@charset "UTF-8";sd-button{display:inline-flex;width:fit-content;height:fit-content}.sd-button{--sd-button-height:34px;--sd-button-padding-x:20px;--sd-button-gap:8px;--sd-button-font-family:inherit;--sd-button-font-size:16px;--sd-button-font-weight:500;--sd-button-text-decoration:none;--sd-button-label-min-width:auto;--sd-button-icon-only-size:var(--sd-button-height);text-decoration:none;cursor:pointer;border-radius:var(--sd-button-radius-default, 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;padding:0 var(--sd-button-padding-x);min-width:var(--sd-button-min-width, auto);min-height:var(--sd-button-height);font-family:var(--sd-button-font-family);font-size:var(--sd-button-font-size);font-weight:var(--sd-button-font-weight);text-decoration:var(--sd-button-text-decoration)}.sd-button--xs{--sd-button-height:var(--sd-button-xs-height, 24px);--sd-button-padding-x:var(--sd-button-xs-padding-x, 8px);--sd-button-gap:var(--sd-button-xs-gap, 4px);--sd-button-font-family:var(--sd-button-xs-typography-font-family, inherit);--sd-button-font-size:var(--sd-button-xs-typography-font-size, 12px);--sd-button-font-weight:var(--sd-button-xs-typography-font-weight, 500);--sd-button-text-decoration:var(--sd-button-xs-typography-text-decoration, none);--sd-button-label-min-width:var(--sd-button-label-xs-min-width, auto);--sd-button-icon-only-size:var(--sd-button-icon-only-xs-width, var(--sd-button-height));line-height:20px}.sd-button--sm{--sd-button-height:var(--sd-button-sm-height, 28px);--sd-button-padding-x:var(--sd-button-sm-padding-x, 12px);--sd-button-gap:var(--sd-button-sm-gap, 6px);--sd-button-font-family:var(--sd-button-sm-typography-font-family, inherit);--sd-button-font-size:var(--sd-button-sm-typography-font-size, 12px);--sd-button-font-weight:var(--sd-button-sm-typography-font-weight, 500);--sd-button-text-decoration:var(--sd-button-sm-typography-text-decoration, none);--sd-button-label-min-width:var(--sd-button-label-sm-min-width, auto);--sd-button-icon-only-size:var(--sd-button-icon-only-sm-width, var(--sd-button-height));line-height:20px}.sd-button--md{--sd-button-height:var(--sd-button-md-height, 34px);--sd-button-padding-x:var(--sd-button-md-padding-x, 20px);--sd-button-gap:var(--sd-button-md-gap, 8px);--sd-button-font-family:var(--sd-button-md-typography-font-family, inherit);--sd-button-font-size:var(--sd-button-md-typography-font-size, 16px);--sd-button-font-weight:var(--sd-button-md-typography-font-weight, 500);--sd-button-text-decoration:var(--sd-button-md-typography-text-decoration, none);--sd-button-label-min-width:var(--sd-button-label-md-min-width, auto);--sd-button-icon-only-size:var(--sd-button-icon-only-md-width, var(--sd-button-height));line-height:26px}.sd-button--lg{--sd-button-height:var(--sd-button-lg-height, 62px);--sd-button-padding-x:var(--sd-button-lg-padding-x, 28px);--sd-button-gap:var(--sd-button-lg-gap, 12px);--sd-button-font-family:var(--sd-button-lg-typography-font-family, inherit);--sd-button-font-size:var(--sd-button-lg-typography-font-size, 18px);--sd-button-font-weight:var(--sd-button-lg-typography-font-weight, 500);--sd-button-text-decoration:var(--sd-button-lg-typography-text-decoration, none);--sd-button-label-min-width:var(--sd-button-label-lg-min-width, auto);--sd-button-icon-only-size:var(--sd-button-icon-only-lg-width, var(--sd-button-height));line-height:30px}.sd-button--has-label{--sd-button-min-width:var(--sd-button-label-min-width, auto)}.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:var(--sd-button-border-width-default, 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:var(--sd-button-border-width-default, 1px) solid var(--sd-button-border-disabled, #CCCCCC);background:var(--sd-button-bg-disabled, #E1E1E1);color:var(--sd-button-content-disabled, #888888);cursor:not-allowed !important}.sd-button--icon-only{padding:0;width:var(--sd-button-icon-only-size, var(--sd-button-height));min-width:var(--sd-button-icon-only-size, var(--sd-button-height));height:var(--sd-button-icon-only-size, var(--sd-button-height))}.sd-button--no-hover:hover::before{opacity:0 !important}.sd-button .sd-button__content{display:inline-flex;align-items:center;justify-content:center;gap:var(--sd-button-gap);z-index:1;font-weight:inherit}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,9 +55,9 @@ const SdGuide = class {
     };
     render() {
         const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];
-        return (index.h("div", { key: '1105258bc9d9d4d8d0c209ad735bb445e29ec0a0', class: "sd-guide", style: {
+        return (index.h("div", { key: 'd98a48deb586592dbb379acb4e3725a97601dccd', class: "sd-guide", style: {
                 '--sd-guide-color': GUIDE_ICON[this.type].color,
-            } }, index.h("sd-button", { key: '68b032fc6c5cb145002f7c982939a9f8f98b0039', 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 && (index.h("sd-portal", { key: 'd5a4cf958f0428606d21d7b0f1e2fc9a9820e374', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, index.h("div", { key: 'be20ea71204a52c31d8cfc16a6dcb973542dd2d6', style: { position: 'absolute', width: '0px', height: '0px' } }, index.h("div", { key: '344111896761d721cc35e453cc3cf13cb4d6547b', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, index.h("sd-button", { key: '984f743925fa2cae64b93103da38d6cbba0109fc', class: "sd-guide__popup__close", icon: "close", color: "grey_65", size: "md", variant: "ghost", noHover: true, onSdClick: this.closeDropdown }), index.h("div", { key: 'ae8d5c7e00035e81ebe39359ca0809c78688dd7d', class: "sd-guide__popup__header" }, index.h("sd-icon", { key: '7527b4a66b314279d3cdddfc448a2d7e00f25ac4', name: "helpOutline", size: 24, color: "green_65" }), index.h("h3", { key: 'fe99c45c4a4b9fa970adbbb4d6f7902ce863b318', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), index.h("ul", { key: '00ad86270d3639796fa3d6df3c763be899082d0b', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
+            } }, index.h("sd-button", { key: '35b3215ac7d73f2ae9375ab46b2981b314769fdd', 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 && (index.h("sd-portal", { key: '56bda42619f3f10fbdc428e3d11abc1a4a812029', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, index.h("div", { key: 'a73954469eb2f711ece68c8b17fe2d197b4fd515', style: { position: 'absolute', width: '0px', height: '0px' } }, index.h("div", { key: 'bf07222fe61b7121d99f0ae39e1e7ffb539db1de', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, index.h("sd-button", { key: 'c9b8d6c2a311e7a83e9c8b2568b3010e5619ad51', class: "sd-guide__popup__close", icon: "close", color: "grey_65", size: "md", variant: "ghost", noHover: true, onSdClick: this.closeDropdown }), index.h("div", { key: 'da280eb73610cb0f70c5adbf10e413ea4d8a4629', class: "sd-guide__popup__header" }, index.h("sd-icon", { key: 'ec73b6ed0777b464208e9bf94d96b044d8770714', name: "helpOutline", size: 24, color: "green_65" }), index.h("h3", { key: '18a221c3dedb1882479c2a567b3c870d7dfd157b', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), index.h("ul", { key: '5a8abec7b5c3246a5eb6a7ec45a3c16a05ccab72', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
     }
     // 현재 2depth까지만 스타일 적용
     renderListItem(message, depth = 0) {

package/dist/cjs/sd-input_2.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Qvv0fGgj.js');
+var index = require('./index-BQt-JC6r.js');
 var index$1 = require('./index-BUvXpPc3.js');
 var component_textinput = require('./component.textinput-DIDZPtYE.js');
 
@@ -36,9 +36,9 @@ const sdInputCss = () => `sd-icon{display:inline-block;line-height:0}sd-icon .sd
 const SdInput = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.input = index.createEvent(this, "sdUpdate");
-        this.focus = index.createEvent(this, "sdFocus");
-        this.blur = index.createEvent(this, "sdBlur");
+        this.input = index.createEvent(this, "sdUpdate", 7);
+        this.focus = index.createEvent(this, "sdFocus", 7);
+        this.blur = index.createEvent(this, "sdBlur", 7);
     }
     get host() { return index.getElement(this); }
     value = null;
@@ -142,12 +142,12 @@ const SdInput = class {
             '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
             '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
         };
-        return (index.h("sd-field", { key: '00cffcf0886042fbc10be8a3521fbe46f2a29911', name: this.name, 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, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, index.h("label", { key: 'e4cf6f84306a8ddde595c317173c98c3ab00d51f', class: "sd-input__content" }, index.h("slot", { key: 'd59f97019d7830fe8a050ed0ddcb212e6f8ceead', name: "prefix" }), index.h("input", { key: 'e949741fe2e5f6919e1a0ee07d06c8adb3ff433f', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : this.type, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), index.h("slot", { key: '3bc1dd7c7034556c7c5baa4ceb02240e0062e995', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && (index.h("sd-ghost-button", { key: '0edf50176fe97d8a8cd0f0b92c0ebe538c85d740', icon: "close", ariaLabel: "close", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
+        return (index.h("sd-field", { key: '942bba44bffb9c047ce07c07c9cefd02b6b50e62', name: this.name, 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, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, index.h("label", { key: '67b37ad7d802c11f9fc1bb372371040a267b9fb9', class: "sd-input__content" }, index.h("slot", { key: '0068eac35163a12efe74288eb7a0871bf1bbbf81', name: "prefix" }), index.h("input", { key: '5c48d3c102ff8cb01a98a60a2128bdd5422aa032', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : this.type, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), index.h("slot", { key: 'faa652d843aaba6229961566590ea564604fd183', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && (index.h("sd-ghost-button", { key: '2935121a60b1cdbb2d1fdfc83d29fdad5da796c3', icon: "close", ariaLabel: "close", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
                 if (this.disabled)
                     return;
                 this.internalValue = '';
                 await this.formField?.sdValidate();
-            } })), this.type === 'password' && (index.h("sd-ghost-button", { key: '0b58e8a381931f03f98917c368160538347336c5', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled, class: "sd-input__password-icon", onClick: () => {
+            } })), this.type === 'password' && (index.h("sd-ghost-button", { key: '800f789b3cff3b8b32fe2c048f8fabe332f69d66', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled, class: "sd-input__password-icon", onClick: () => {
                 if (this.disabled)
                     return;
                 this.passwordVisible = !this.passwordVisible;
@@ -169,8 +169,8 @@ const sdSelectSearchInputCss = () => `sd-select-search-input{position:sticky;top
 const SdSelectSearchInput = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.searchInput = index.createEvent(this, "sdSearchInput");
-        this.searchFocus = index.createEvent(this, "sdSearchFocus");
+        this.searchInput = index.createEvent(this, "sdSearchInput", 7);
+        this.searchFocus = index.createEvent(this, "sdSearchFocus", 7);
     }
     isScrolled = false;
     searchText = '';
@@ -188,17 +188,17 @@ const SdSelectSearchInput = class {
         input?.focus({ preventScroll: true });
     }
     render() {
-        return (index.h("div", { key: 'a344e235d317bb36270da0442d574425282438ad', class: {
+        return (index.h("div", { key: '2d211645dc4041411e187f248a260a23b7c544f6', class: {
                 'sd-select-search-input': true,
                 'sd-select-search-input--scrolled': !!this.isScrolled,
-            }, onClick: event => event.stopPropagation() }, index.h("sd-input", { key: 'ae43752f3ab36cd25e0231db74120fa46eaecc31', ref: el => (this.searchRef = el), value: this.searchText, placeholder: "\uAC80\uC0C9", clearable: true, inputStyle: { 'padding-left': '8px' }, autofocus: true, onSdUpdate: event => {
+            }, onClick: event => event.stopPropagation() }, index.h("sd-input", { key: 'c609af0ab36359c8ccaea5827821dbc509d13eac', ref: el => (this.searchRef = el), value: this.searchText, placeholder: "\uAC80\uC0C9", clearable: true, inputStyle: { 'padding-left': '8px' }, autofocus: true, onSdUpdate: event => {
                 this.searchInput.emit(String(event?.detail));
             }, onSdFocus: () => {
                 this.searchFocus.emit();
             }, onKeyDown: event => {
                 if (event.code === 'Enter')
                     event.stopPropagation();
-            } }, index.h("sd-icon", { key: '18f8c09f864c23a43c35533fa0dac8f40c27829c', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
+            } }, index.h("sd-icon", { key: '96a511b1f8625c883ec50d5e2985ff396d7b57c7', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
     }
 };
 SdSelectSearchInput.style = sdSelectSearchInputCss();

package/dist/cjs/sd-loading-spinner_3.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Qvv0fGgj.js');
+var index = require('./index-BQt-JC6r.js');
 var resolveColor = require('./resolveColor-LhfOKtTZ.js');
 var baseDropdownEvent = require('./base-dropdown-event-BTPlZ1KF.js');
 var selectKeyboardNavigation = require('./select-keyboard-navigation-CErfIrGV.js');
@@ -17,7 +17,7 @@ const SdLoadingSpinner = class {
         return resolveColor.resolveColor(this.color);
     }
     render() {
-        return (index.h(index.Fragment, { key: '0cfc7069d024e08cfad7b4f6479b8ba2835428c2' }, index.h("svg", { key: 'fe4c1e68baa60142eaceaaef6e4df88c79b626b2', class: "sd-loading-spinner", width: "72px", height: "72px", viewBox: "25 25 50 50", style: { color: this.resolvedColor } }, index.h("circle", { key: '3e923b3a138d7aafc9b8cabcd884610addd916c1', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
+        return (index.h(index.Fragment, { key: '1a4edb8be9cc83ab900cd615ee30958d9822e98b' }, index.h("svg", { key: '634070026b58303bf3423b10f37ed6603179b9b1', class: "sd-loading-spinner", width: "72px", height: "72px", viewBox: "25 25 50 50", style: { color: this.resolvedColor } }, index.h("circle", { key: 'fda3f7e4f787176f6030e19a3f2c1dd59326d35a', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
     }
 };
 SdLoadingSpinner.style = sdLoadingSpinnerCss();
@@ -35,7 +35,7 @@ const PER_PAGE = 10;
 const SdPagination = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.pageChange = index.createEvent(this, "sdPageChange");
+        this.pageChange = index.createEvent(this, "sdPageChange", 7);
     }
     currentPage = 1;
     lastPage = 1;
@@ -97,12 +97,12 @@ const SdPagination = class {
         }
     }
     render() {
-        return (index.h("div", { key: '9b8ab3ae0c63267ab7933087cd85b2fd2f6f5697', class: this.paginationClasses }, index.h("div", { key: '963f072a708ad1800492ce5467e17af8648f6171', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (index.h("div", { class: "pagination-info" }, index.h("span", { class: "current-page" }, this.currentPage), index.h("span", null, "/"), index.h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (index.h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
+        return (index.h("div", { key: 'd370dfd96244d439f83aa6f283ea3601b51ca8f1', class: this.paginationClasses }, index.h("div", { key: '4287df0cbd99892e643b1e68ce051ac119c758d2', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (index.h("div", { class: "pagination-info" }, index.h("span", { class: "current-page" }, this.currentPage), index.h("span", null, "/"), index.h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (index.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)))), index.h("div", { key: '5a0f5b9d866e873420ef6e29e0650e5884c2ab7c', class: "append-btns" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n)))), index.h("div", { key: 'ad51e05546d929ac01898e93ab4285018837394a', class: "append-btns" }, this.renderNextButtons())));
     }
 };
 SdPagination.style = sdPaginationCss();
@@ -113,8 +113,8 @@ const SdSelect = class extends baseDropdownEvent.BaseDropdownEvent {
     constructor(hostRef) {
         super();
         index.registerInstance(this, hostRef);
-        this.update = index.createEvent(this, "sdUpdate");
-        this.dropDownShow = index.createEvent(this, "sdDropDownShow");
+        this.update = index.createEvent(this, "sdUpdate", 7);
+        this.dropDownShow = index.createEvent(this, "sdDropDownShow", 7);
     }
     get el() { return index.getElement(this); }
     // props

package/dist/cjs/sd-modal-container.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-Qvv0fGgj.js');
+var index = require('./index-BQt-JC6r.js');
 
-const sdModalContainerCss = () => `sd-modal-container{display:block}sd-modal-container .sd-modal-container{position:fixed;inset:0;z-index:var(--sd-modal-container-z-index, 10000);display:flex;align-items:center;justify-content:center}sd-modal-container .sd-modal-container__backdrop{position:absolute;inset:0;background:rgba(0, 0, 0, 0.4);opacity:0;transition:opacity 0.3s ease-out}sd-modal-container .sd-modal-container__backdrop--visible{opacity:1}sd-modal-container .sd-modal-container__content{position:relative;z-index:1;display:grid;place-items:center}sd-modal-container .sd-modal-container__content>*{grid-row:1;grid-column:1}sd-modal-container .sd-modal-container__modal{opacity:0;transform:scale(0);transition:opacity 0.3s ease-out, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)}sd-modal-container .sd-modal-container__modal--visible{opacity:1;transform:scale(1)}sd-modal-container .sd-modal-container__modal--shake{animation:modal-shake 0.3s ease-out}@keyframes modal-shake{0%,100%{transform:scale(1)}25%{transform:scale(1.03)}50%{transform:scale(0.97)}75%{transform:scale(1.01)}}`;
+const sdModalContainerCss = () => `sd-modal-container{display:block}sd-modal-container .sd-modal-container{position:fixed;inset:0;z-index:var(--sd-modal-container-z-index, 9999);display:flex;align-items:center;justify-content:center}sd-modal-container .sd-modal-container__backdrop{position:absolute;inset:0;background:rgba(0, 0, 0, 0.4);opacity:0;transition:opacity 0.3s ease-out}sd-modal-container .sd-modal-container__backdrop--visible{opacity:1}sd-modal-container .sd-modal-container__content{position:relative;z-index:1;display:grid;place-items:center}sd-modal-container .sd-modal-container__content>*{grid-row:1;grid-column:1}sd-modal-container .sd-modal-container__modal{opacity:0;transform:scale(0);transition:opacity 0.3s ease-out, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)}sd-modal-container .sd-modal-container__modal--visible{opacity:1;transform:scale(1)}sd-modal-container .sd-modal-container__modal--shake{animation:modal-shake 0.3s ease-out}@keyframes modal-shake{0%,100%{transform:scale(1)}25%{transform:scale(1.03)}50%{transform:scale(0.97)}75%{transform:scale(1.01)}}`;
 
 let modalIdCounter = 0;
 const ANIMATION_DURATION = 350;

package/dist/cjs/sd-number-input.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Qvv0fGgj.js');
+var index = require('./index-BQt-JC6r.js');
 var index$1 = require('./index-BUvXpPc3.js');
 
 const numberInput = {
@@ -115,9 +115,9 @@ const sdNumberInputCss = () => `sd-number-input{display:inline-flex}sd-number-in
 const SdNumberInput = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.update = index.createEvent(this, "sdUpdate");
-        this.focus = index.createEvent(this, "sdFocus");
-        this.blur = index.createEvent(this, "sdBlur");
+        this.update = index.createEvent(this, "sdUpdate", 7);
+        this.focus = index.createEvent(this, "sdFocus", 7);
+        this.blur = index.createEvent(this, "sdBlur", 7);
     }
     get el() { return index.getElement(this); }
     size = 'sm';
@@ -388,12 +388,12 @@ const SdNumberInput = class {
             '--sd-textinput-input-hint-typography-line-height': `${NUMBER_INPUT_HINT.typography.lineHeight}px`,
             '--sd-textinput-input-contents-gap': `${NUMBER_INPUT_CONTENTS_GAP}px`,
         };
-        return (index.h("sd-field", { key: '20d010b26dc955dcbf30e908a3ebab33644f1e3c', name: this.name, 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, status: this.status, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, index.h("div", { key: '35ad9cb4ff6db3354b87aedd503a0ddd4c7493b2', class: "sd-number-input__content" }, this.useButton && (index.h("button", { key: 'f18fc88a39608857ddf6028b6fb12a500c0c4cab', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, index.h("sd-icon", { key: 'd55e76ddf3bc3e07102307c392f6ba3037335246', name: "minus", size: iconSize, color: this.isDecrementDisabled()
+        return (index.h("sd-field", { key: 'c09a48d9c0bfb0eb6c4327e63ff190b4fee7eff9', name: this.name, 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, status: this.status, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, index.h("div", { key: '7ba690b017d58326640083feb4f88ab74e20f7e3', class: "sd-number-input__content" }, this.useButton && (index.h("button", { key: '0eb3ccd26428fce21d74b1e2f06258b054337017', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, index.h("sd-icon", { key: '4af528aa82ddc6f8abbee1fa8617f5fefc77f41b', name: "minus", size: iconSize, color: this.isDecrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
-                : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && (index.h("span", { key: '328f58b6b34b9dff32d722ac55f88e76bfa24b31', class: "sd-number-input__prefix" }, this.inputPrefix)), index.h("input", { key: '1b63561986e1433b8c111487de607d74462881c2', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__native ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
+                : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && (index.h("span", { key: 'f524a85295c29dc02b6803d5a145d24d6d7c3f1b', class: "sd-number-input__prefix" }, this.inputPrefix)), index.h("input", { key: '4f3c539cb82745b317ebc2e17f2852a5b386ba6b', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__native ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
                 textAlign: this.useButton ? 'center' : 'right',
                 ...this.inputStyle,
-            } }), this.inputSuffix && (index.h("span", { key: 'cbe0be362ae8e5d5db11f32ae689964e3a1fc57f', class: "sd-number-input__suffix" }, this.inputSuffix)), this.useButton && (index.h("button", { key: '4bcdfafd3ca67a5ddcbcaa8ad63c80ba75104811', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, index.h("sd-icon", { key: '2df5dac96b6e60d108e1769a1e3d7c2045c15886', name: "add", size: iconSize, color: this.isIncrementDisabled()
+            } }), this.inputSuffix && (index.h("span", { key: '35a1cd706a87cf9320262b12aab7679cbb9eb7f2', class: "sd-number-input__suffix" }, this.inputSuffix)), this.useButton && (index.h("button", { key: 'a818bf380ac32291155bf8a3c35cf9b9a007ec5e', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, index.h("sd-icon", { key: '0d2e75fb5ebada9aa0846e807695d31f29b18647', name: "add", size: iconSize, color: this.isIncrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
                 : NUMBER_INPUT_STEPPER.icon.default }))))));
     }

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

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-Qvv0fGgj.js');
-var tooltipArrow = require('./tooltipArrow-Mb2Dhc7T.js');
+var index = require('./index-BQt-JC6r.js');
+var tooltipArrow = require('./tooltipArrow-CRCpqOYA.js');
 
 const popover = {
 	bg: "#07284A"};
@@ -56,14 +56,14 @@ const SdPopover = class {
         this.showPopover = false;
     };
     render() {
-        return (index.h(index.Fragment, { key: 'ab94ec74dc1c6d4982e6420c20c72d045cb91e10' }, this.label ? (index.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) })) : (index.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 && (index.h("sd-floating-portal", { key: '7cacc11be5463e66f0642ed080b8e27534724aad', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement, offset: this.popoverOffset }, index.h("div", { key: '192366a56cbbbd4ddf60378cb948afd742e738f9', class: {
+        return (index.h(index.Fragment, { key: '6a0b64ce442f1bd1dc76f22a160172a87a63a1d8' }, this.label ? (index.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) })) : (index.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 && (index.h("sd-floating-portal", { key: 'e8d39da8af440c81773805331ab97a0105124d81', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement, offset: this.popoverOffset }, index.h("div", { key: 'f608e4dc384f48a9f52133055b718e305d1e9f86', 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,
-            } }, index.h("i", { key: '5a29695140891de8987d0c61c67b38b11cc84f8d', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, index.h(tooltipArrow.TooltipArrow, { key: '98a9c7333df57d4655c87d3a0949a0f445e96d47' })), index.h("div", { key: '6c822d0c1f441f31f58724c13b2fe2cd5f5346f3', class: "sd-floating-menu__content" }, this.menuTitle && index.h("div", { key: 'effca66c7bfe59a3a25375d622b8f9bef124c01c', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (index.h("div", { key: '66b655bb2d0520f2f390e5ef8ffee7d4b8aa5e4e', class: "sd-floating-menu__messages" }, this.messages.map(message => (index.h("div", null, message))))), this.buttons.length > 0 && (index.h("div", { key: '354a08c2c58eeb2347ef6c8e6acbd13639eb827d', class: `sd-floating-menu__buttons sd-floating-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (index.h("sd-button", { ...button })))))), this.useClose && (index.h("sd-ghost-button", { key: '3ee62dc5c099d94ff998c91125f54e72bdd2dc18', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xs", onClick: () => this.handleClose() })))))));
+            } }, index.h("i", { key: '8052d9f446b03770c22857048c88048f0bc982cd', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, index.h(tooltipArrow.TooltipArrow, { key: 'f6266c4da625b539f9864da6b09599a5b4bf07cb' })), index.h("div", { key: '8de90282dae5ba223b6495c1f5ef9baaac88ed17', class: "sd-floating-menu__content" }, this.menuTitle && index.h("div", { key: '79e26ede34d97abce06bfda8dc1bd29122c2e1ac', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (index.h("div", { key: 'a25d8a379e373e136363a3bce19be76fd2fba182', class: "sd-floating-menu__messages" }, this.messages.map(message => (index.h("div", null, message))))), this.buttons.length > 0 && (index.h("div", { key: '9cf61069c654a2d884ae0660ec6ffceb563e3617', class: `sd-floating-menu__buttons sd-floating-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (index.h("sd-button", { ...button })))))), this.useClose && (index.h("sd-ghost-button", { key: '14ef6918e763521ff4db0a0f05e1598e767f257d', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xs", onClick: () => this.handleClose() })))))));
     }
     static get watchers() { return {
         "show": [{

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

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-Qvv0fGgj.js');
+var index = require('./index-BQt-JC6r.js');
 
 const SdPortal = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.close = index.createEvent(this, "sdClose");
+        this.close = index.createEvent(this, "sdClose", 3);
     }
     get hostEl() { return index.getElement(this); }
     to = 'body';
@@ -227,7 +227,7 @@ const SdPortal = class {
         this.close.emit();
     }
     render() {
-        return index.h("slot", { key: '4f303830ccd316e27880d300a953cf7fe5fe5e36' });
+        return index.h("slot", { key: 'c1e05f5d7c809418279e4ded8bbb8c4b29703bb1' });
     }
     static get watchers() { return {
         "open": [{

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Qvv0fGgj.js');
+var index = require('./index-BQt-JC6r.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}`;
 
@@ -41,10 +41,10 @@ const SdProgress = class {
         return this.statusColor[this.progressStatus];
     }
     render() {
-        return (index.h("div", { key: 'ded78b5df0eb9233f7a920d20a2b3d270f2259eb', style: {
+        return (index.h("div", { key: 'f5b723807c29b9e4a742febaf7d2f984f9de61d5', style: {
                 '--progress-color': this.progressColor,
                 '--progress-percentage': `${this.progressPercentage}%`,
-            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && index.h("div", { key: '6249a64c5d0d3c2462fc3e6222698d9088a9fbfb', class: "sd-progress__label" }, this.label)));
+            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && index.h("div", { key: '369e1b7805414b8a2fa5e44f4746435335a251cb', class: "sd-progress__label" }, this.label)));
     }
     renderBarProgress() {
         return (index.h("div", { class: `sd-progress__bar sd-progress__bar--${this.progressStatus}` }, index.h("div", { class: ['sd-progress__bar__percent', this.progressPercentage < 100 ? 'proceed' : ''].join(' ') }), index.h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--left" }, this.progressPercentage, "%"), index.h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--right" }, this.progressPercentage, "%")));

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

@@ -1,13 +1,13 @@
 'use strict';
 
-var index = require('./index-Qvv0fGgj.js');
+var index = require('./index-BQt-JC6r.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}`;
 
 const SdRadioButtonGroup = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.change = index.createEvent(this, "sdUpdate");
+        this.change = index.createEvent(this, "sdUpdate", 7);
     }
     value;
     options = [];

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

@@ -1,13 +1,13 @@
 'use strict';
 
-var index = require('./index-Qvv0fGgj.js');
+var index = require('./index-BQt-JC6r.js');
 
 const sdRadioGroupCss = () => `sd-radio{display:inline-flex;width:fit-content}sd-radio .sd-radio{cursor:pointer;height:20px;display:inline-flex;align-items:center}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}`;
 
 const SdRadioGroup = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.change = index.createEvent(this, "sdUpdate");
+        this.change = index.createEvent(this, "sdUpdate", 7);
     }
     value;
     options = [];

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

@@ -1,13 +1,13 @@
 'use strict';
 
-var index = require('./index-Qvv0fGgj.js');
+var index = require('./index-BQt-JC6r.js');
 
 const sdRadioCss = () => `sd-radio{display:inline-flex;width:fit-content}sd-radio .sd-radio{cursor:pointer;height:20px;display:inline-flex;align-items:center}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}`;
 
 const SdRadio = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.update = index.createEvent(this, "sdUpdate");
+        this.update = index.createEvent(this, "sdUpdate", 7);
     }
     value;
     disabled = false;