@sellmate/design-system 1.0.50 → 1.0.51

package/hydrate/index.js

@@ -1382,9 +1382,9 @@ var createEvent = (ref, name, flags) => {
   return {
     emit: (detail) => {
       return emitEvent(elm, name, {
-        bubbles: true,
-        composed: true,
-        cancelable: true,
+        bubbles: !!(flags & 4 /* Bubbles */),
+        composed: !!(flags & 2 /* Composed */),
+        cancelable: !!(flags & 1 /* Cancellable */),
         detail
       });
     }
@@ -4808,8 +4808,8 @@ const sdActionModalCss = () => `sd-action-modal{display:block;width:fit-content;
 class SdActionModal {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.close = createEvent(this, "sdClose");
-        this.ok = createEvent(this, "sdOk");
+        this.close = createEvent(this, "sdClose", 7);
+        this.ok = createEvent(this, "sdOk", 7);
     }
     modalTitle = '';
     buttonLabel = '확인';
@@ -4982,9 +4982,9 @@ const sdBarcodeInputCss = () => `sd-icon{display:inline-block;line-height:0}sd-i
 class SdBarcodeInput {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.input = createEvent(this, "sdUpdate");
-        this.focus = createEvent(this, "sdFocus");
-        this.blur = createEvent(this, "sdBlur");
+        this.input = createEvent(this, "sdUpdate", 7);
+        this.focus = createEvent(this, "sdFocus", 7);
+        this.blur = createEvent(this, "sdBlur", 7);
     }
     get host() { return getElement(this); }
     value = null;
@@ -5523,7 +5523,7 @@ const ICON_SIZES = {
 class SdButton {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.click = createEvent(this, "sdClick");
+        this.click = createEvent(this, "sdClick", 7);
     }
     get el() { return getElement(this); }
     variant = 'primary';
@@ -5764,7 +5764,7 @@ const sdButtonV2Css = () => `sd-button-v2{display:inline-flex;width:fit-content;
 class SdButtonV2 {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.click = createEvent(this, "sdClick");
+        this.click = createEvent(this, "sdClick", 7);
     }
     name = 'primary_sm';
     label = '';
@@ -5923,8 +5923,8 @@ const DEFAULT_COLORS = [
 class SdCalendar {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.select = createEvent(this, "sdSelect");
-        this.viewChange = createEvent(this, "sdViewChange");
+        this.select = createEvent(this, "sdSelect", 7);
+        this.viewChange = createEvent(this, "sdViewChange", 7);
     }
     value = null;
     selectable;
@@ -6161,7 +6161,7 @@ const sdCheckboxCss = () => `sd-checkbox{display:block;height:var(--sd-checkbox-
 class SdCheckbox {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.update = createEvent(this, "sdUpdate");
+        this.update = createEvent(this, "sdUpdate", 7);
     }
     get el() { return getElement(this); }
     /** 현재 선택 상태 또는 배열 형태의 값 */
@@ -6298,9 +6298,9 @@ const sdConfirmModalCss = () => `sd-confirm-modal{display:block;width:fit-conten
 class SdConfirmModal {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.close = createEvent(this, "sdClose");
-        this.cancel = createEvent(this, "sdCancel");
-        this.ok = createEvent(this, "sdOk");
+        this.close = createEvent(this, "sdClose", 7);
+        this.cancel = createEvent(this, "sdCancel", 7);
+        this.ok = createEvent(this, "sdOk", 7);
     }
     get el() { return getElement(this); }
     hasSlottedContent = false;
@@ -6402,8 +6402,8 @@ const sdDateBoxCss = () => `.sd-date-box.sc-sd-date-box{display:flex;align-items
 class SdDateBox {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.click = createEvent(this, "sdClick");
-        this.mouseOver = createEvent(this, "sdMouseOver");
+        this.click = createEvent(this, "sdClick", 7);
+        this.mouseOver = createEvent(this, "sdMouseOver", 7);
     }
     date = null;
     disabled = false;
@@ -6466,8 +6466,8 @@ const sdDatePickerCss = () => `.sd-date-picker.sc-sd-date-picker{width:100%;disp
 class SdDatePicker {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.update = createEvent(this, "sdUpdate");
-        this.viewChange = createEvent(this, "sdViewChange");
+        this.update = createEvent(this, "sdUpdate", 7);
+        this.viewChange = createEvent(this, "sdViewChange", 7);
     }
     get el() { return getElement(this); }
     value = null;
@@ -6521,8 +6521,8 @@ const sdDateRangePickerCss = () => `sd-date-range-picker.sc-sd-date-range-picker
 class SdDateRangePicker {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.update = createEvent(this, "sdUpdate");
-        this.viewChange = createEvent(this, "sdViewChange");
+        this.update = createEvent(this, "sdUpdate", 7);
+        this.viewChange = createEvent(this, "sdViewChange", 7);
     }
     get el() { return getElement(this); }
     value = ['', ''];
@@ -6878,8 +6878,8 @@ class SdDropdownButton extends BaseDropdownEvent {
     constructor(hostRef) {
         super();
         registerInstance(this, hostRef);
-        this.click = createEvent(this, "sdClick");
-        this.dropDownShow = createEvent(this, "sdDropDownShow");
+        this.click = createEvent(this, "sdClick", 7);
+        this.dropDownShow = createEvent(this, "sdDropDownShow", 7);
     }
     get el() { return getElement(this); }
     name = 'primary_sm';
@@ -7104,7 +7104,19 @@ class SdDropdownButton extends BaseDropdownEvent {
 }
 
 const field = {
+	label: {
+		sm: {
+			height: "28",
+			gap: "6",
+			icon: "12",
+			typography: {
+				fontWeight: "700",
+				fontSize: "12",
+				lineHeight: "20"
+			}
+		}},
 	addonLabel: {
+		gap: "6",
 		paddingX: "12",
 		typography: {
 			fontWeight: "500",
@@ -7114,14 +7126,16 @@ const field = {
 		bg: "#F6F6F6",
 		border: {
 			"default": "#AAAAAA",
-			disabled: "#CCCCCC"}
+			disabled: "#CCCCCC",
+			width: "1"
+		}
 	}
 };
 var fieldTokens = {
 	field: field
 };
 
-const sdFieldCss = () => `sd-field{display:inline-flex;flex-flow:column nowrap;height:fit-content;width:100%}sd-field .sd-field *:focus,sd-field .sd-field *:focus-visible,sd-field .sd-field *:focus-within{outline:none !important}sd-field .sd-field:not(.sd-field--disabled):hover .sd-field__control{border:1px solid var(--sd-system-color-field-border-hover) !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field.sd-field--disabled{cursor:not-allowed}sd-field .sd-field.sd-field--disabled .sd-field__wrapper{cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__label-inside{border-color:#CCCCCC;color:#888888;cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__control{background-color:#E1E1E1;border-color:#CCCCCC;color:#888888;cursor:not-allowed !important}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label{display:flex;align-items:center;margin-right:var(--sd-system-space-field-sm-gap)}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__icon{margin-right:6px}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__text{font-size:12px;line-height:20px;color:var(--sd-system-color-field-text-default);white-space:nowrap}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__tooltip{margin-left:2px}sd-field .sd-field--has-addon .sd-field__control .sd-field__addon{display:flex;align-items:center;white-space:nowrap;padding:0 var(--sd-field-addon-padding-x);font-size:var(--sd-field-addon-font-size);line-height:var(--sd-field-addon-line-height);font-weight:var(--sd-field-addon-font-weight);background:var(--sd-field-addon-bg);border-right:1px solid var(--sd-field-addon-border-color);border-radius:calc(var(--sd-system-radius-field-sm) - 1px) 0 0 calc(var(--sd-system-radius-field-sm) - 1px)}sd-field .sd-field__wrapper{width:100%;height:var(--sd-system-size-field-sm-height);display:flex;align-items:center;flex-flow:row nowrap;position:relative;color:var(--sd-system-color-field-text-default);cursor:pointer;-webkit-user-select:none;user-select:none}sd-field .sd-field__wrapper .sd-field__control{position:relative;height:100%;display:flex;flex:1;min-width:0;border:1px solid var(--sd-system-color-field-border-default);border-radius:var(--sd-system-radius-field-sm);background:var(--sd-system-color-field-bg-default)}sd-field .sd-field--error:not(:hover) .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-danger) !important}sd-field .sd-field.sd-field--focus .sd-field__wrapper .sd-field__control,sd-field .sd-field.sd-field--hover .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-focus) !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field.sd-field--pass .sd-field__wrapper .sd-field__control{border:1px solid #2BCE6C !important}sd-field .sd-field .sd-field__error-message{color:var(--sd-textinput-input-text-error-message);font-size:var(--sd-textinput-input-error-message-typography-font-size);line-height:var(--sd-textinput-input-error-message-typography-line-height);margin-top:var(--sd-textinput-input-contents-gap)}sd-field .sd-field .sd-field__hint{color:var(--sd-textinput-input-text-hint);font-size:var(--sd-textinput-input-hint-typography-font-size);line-height:var(--sd-textinput-input-hint-typography-line-height);margin-top:var(--sd-textinput-input-contents-gap)}`;
+const sdFieldCss = () => `sd-field{display:inline-flex;flex-flow:column nowrap;height:fit-content;width:100%}sd-field .sd-field *:focus,sd-field .sd-field *:focus-visible,sd-field .sd-field *:focus-within{outline:none !important}sd-field .sd-field:not(.sd-field--disabled):hover .sd-field__control{border:1px solid var(--sd-system-color-field-border-hover) !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field.sd-field--disabled{cursor:not-allowed}sd-field .sd-field.sd-field--disabled .sd-field__wrapper{cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__label-inside{border-color:#CCCCCC;color:#888888;cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__control{background-color:#E1E1E1;border-color:#CCCCCC;color:#888888;cursor:not-allowed !important}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label{display:flex;align-items:center;height:var(--sd-field-label-height);margin-right:var(--sd-system-space-field-sm-gap)}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__icon{margin-right:var(--sd-field-label-gap)}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__text{font-size:var(--sd-field-label-font-size);line-height:var(--sd-field-label-line-height);font-weight:var(--sd-field-label-font-weight);color:var(--sd-system-color-field-text-default);white-space:nowrap}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__tooltip{margin-left:var(--sd-field-label-gap)}sd-field .sd-field--has-addon .sd-field__control{gap:var(--sd-field-addon-gap)}sd-field .sd-field--has-addon .sd-field__control .sd-field__addon{display:flex;align-items:center;white-space:nowrap;padding:0 var(--sd-field-addon-padding-x);font-size:var(--sd-field-addon-font-size);line-height:var(--sd-field-addon-line-height);font-weight:var(--sd-field-addon-font-weight);background:var(--sd-field-addon-bg);border-right:var(--sd-field-addon-border-width) solid var(--sd-field-addon-border-color);border-radius:calc(var(--sd-system-radius-field-sm) - 1px) 0 0 calc(var(--sd-system-radius-field-sm) - 1px)}sd-field .sd-field__wrapper{width:100%;height:var(--sd-system-size-field-sm-height);display:flex;align-items:center;flex-flow:row nowrap;position:relative;color:var(--sd-system-color-field-text-default);cursor:pointer;-webkit-user-select:none;user-select:none}sd-field .sd-field__wrapper .sd-field__control{position:relative;height:100%;display:flex;flex:1;min-width:0;border:1px solid var(--sd-system-color-field-border-default);border-radius:var(--sd-system-radius-field-sm);background:var(--sd-system-color-field-bg-default)}sd-field .sd-field--error:not(:hover) .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-danger) !important}sd-field .sd-field.sd-field--focus .sd-field__wrapper .sd-field__control,sd-field .sd-field.sd-field--hover .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-focus) !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field.sd-field--pass .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-success) !important}sd-field .sd-field .sd-field__error-message{color:var(--sd-textinput-input-text-error-message);font-size:var(--sd-textinput-input-error-message-typography-font-size);line-height:var(--sd-textinput-input-error-message-typography-line-height);margin-top:var(--sd-textinput-input-contents-gap)}sd-field .sd-field .sd-field__hint{color:var(--sd-textinput-input-text-hint);font-size:var(--sd-textinput-input-hint-typography-font-size);line-height:var(--sd-textinput-input-hint-typography-line-height);margin-top:var(--sd-textinput-input-contents-gap)}`;
 
 const FORM_PARENT_TAGS = [
     'sd-select',
@@ -7132,6 +7146,7 @@ const FORM_PARENT_TAGS = [
     'sd-textarea',
     'sd-number-input',
     'sd-select-v2',
+    'sd-file-picker',
 ];
 class SdField {
     constructor(hostRef) {
@@ -7248,32 +7263,49 @@ class SdField {
     render() {
         const addon = this.addonLabel;
         const addonTokens = fieldTokens.field.addonLabel;
-        const addonCssVars = addon ? {
-            '--sd-field-addon-padding-x': `${addonTokens.paddingX}px`,
-            '--sd-field-addon-font-size': `${addonTokens.typography.fontSize}px`,
-            '--sd-field-addon-line-height': `${addonTokens.typography.lineHeight}px`,
-            '--sd-field-addon-font-weight': addonTokens.typography.fontWeight,
-            '--sd-field-addon-bg': addonTokens.bg,
-            '--sd-field-addon-border-color': this.disabled
-                ? addonTokens.border.disabled
-                : addonTokens.border.default,
-        } : {};
-        return (hAsync("div", { key: 'cb0844dfad82a3287253598ace0e70e761ca2cdd', class: {
+        const labelTokens = fieldTokens.field.label.sm;
+        const labelCssVars = this.label
+            ? {
+                '--sd-field-label-height': `${labelTokens.height}px`,
+                '--sd-field-label-gap': `${labelTokens.gap}px`,
+                '--sd-field-label-font-size': `${labelTokens.typography.fontSize}px`,
+                '--sd-field-label-line-height': `${labelTokens.typography.lineHeight}px`,
+                '--sd-field-label-font-weight': labelTokens.typography.fontWeight,
+            }
+            : {};
+        const addonCssVars = addon
+            ? {
+                '--sd-field-addon-padding-x': `${addonTokens.paddingX}px`,
+                '--sd-field-addon-font-size': `${addonTokens.typography.fontSize}px`,
+                '--sd-field-addon-line-height': `${addonTokens.typography.lineHeight}px`,
+                '--sd-field-addon-font-weight': addonTokens.typography.fontWeight,
+                '--sd-field-addon-bg': addonTokens.bg,
+                '--sd-field-addon-border-color': this.disabled
+                    ? addonTokens.border.disabled
+                    : addonTokens.border.default,
+                '--sd-field-addon-gap': `${addonTokens.gap}px`,
+                '--sd-field-addon-border-width': `${addonTokens.border.width}px`,
+            }
+            : {};
+        return (hAsync("div", { key: 'e37722a9afbd78654328954262d4bc458634170a', class: {
                 'sd-field': true,
                 'sd-field--has-label': !!this.label,
                 'sd-field--has-addon': !!addon,
                 [this.fieldStatus]: !!this.fieldStatus,
-            }, style: addonCssVars }, hAsync("div", { key: '788b8352737f10eec26195931cd22a405607b2af', class: "sd-field__wrapper" }, this.renderLabel(this.label), hAsync("div", { key: 'e3164e47bbeec19e7b150c3e2a7ef75a96896db4', class: {
+            }, style: { ...labelCssVars, ...addonCssVars } }, hAsync("div", { key: '38440e5f21fba28ff49fd00bfd20189af9c43707', class: "sd-field__wrapper" }, this.renderLabel(this.label), hAsync("div", { key: 'b6d65e0db6667cbe9b4dd85ec72f9ecd08afa291', class: {
                 'sd-field__control': true,
                 'sd-field__control--has-addon': !!addon,
-            }, style: this.width ? { width: typeof this.width === 'number' ? `${this.width}px` : this.width, flex: 'none' } : {} }, addon && (hAsync("div", { key: '12baae30b329494312e8fe3160556717f1f8d979', class: "sd-field__addon" }, addon)), hAsync("slot", { key: 'f231342560a5b45448ddc6ad370cce414ca68052' }))), (this.errorMsg || this.errorMessage)
-            ? hAsync("div", { class: "sd-field__error-message" }, this.errorMsg || this.errorMessage)
-            : this.hint && hAsync("div", { class: "sd-field__hint" }, this.hint)));
+            }, style: this.width
+                ? {
+                    width: typeof this.width === 'number' ? `${this.width}px` : this.width,
+                    flex: 'none',
+                }
+                : {} }, addon && hAsync("div", { key: '71a50d839dbbd7075c1f7f7b2daad0308ebc1225', class: "sd-field__addon" }, addon), hAsync("slot", { key: '5c0696834e82eddde81c6603d26373a745a1febb' }))), this.errorMsg || this.errorMessage ? (hAsync("div", { class: "sd-field__error-message" }, this.errorMsg || this.errorMessage)) : (this.hint && hAsync("div", { class: "sd-field__hint" }, this.hint))));
     }
     renderLabel(label) {
         if (!label)
             return null;
-        return (hAsync("label", { class: "sd-field__label" }, this.icon && (hAsync("sd-icon", { name: this.icon.name, size: this.icon.size ?? 10, color: this.icon.color, rotate: this.icon.rotate, class: "sd-field__label__icon" })), hAsync("div", { class: "sd-field__label__text" }, label), this.labelTooltip && (hAsync("sd-tooltip", { class: "sd-field__label__tooltip", ...this.labelTooltipProps }, hAsync("div", { slot: "content" }, this.labelTooltip)))));
+        return (hAsync("label", { class: "sd-field__label" }, this.icon && (hAsync("sd-icon", { name: this.icon.name, size: this.icon.size ?? Number(fieldTokens.field.label.sm.icon), color: this.icon.color, rotate: this.icon.rotate, class: "sd-field__label__icon" })), hAsync("div", { class: "sd-field__label__text" }, label), this.labelTooltip && (hAsync("sd-tooltip", { class: "sd-field__label__tooltip", ...this.labelTooltipProps }, this.labelTooltip))));
     }
     static get style() { return sdFieldCss(); }
     static get cmpMeta() { return {
@@ -7307,12 +7339,56 @@ class SdField {
     }; }
 }
 
-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)}`;
 
 class SdFilePicker {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.update = createEvent(this, "sdUpdate");
+        this.update = createEvent(this, "sdUpdate", 7);
+        this.reject = createEvent(this, "sdReject", 7);
     }
     get el() { return getElement(this); }
     value = null;
@@ -7321,12 +7397,31 @@ class SdFilePicker {
     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;
     }
@@ -7336,6 +7431,47 @@ class SdFilePicker {
     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;
@@ -7343,11 +7479,19 @@ class SdFilePicker {
             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);
@@ -7369,13 +7513,6 @@ class SdFilePicker {
             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;
@@ -7399,23 +7536,36 @@ class SdFilePicker {
         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 (hAsync("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) }, hAsync("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 }), hAsync("sd-icon", { key: 'bf0efeaf7aac37cc8fed9a1f6dca8179be053506', name: "attachFile", size: 16, color: this.getIconColor(), class: "sd-file-picker__icon" }), hAsync("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 = (hAsync("div", { class: "sd-file-picker__content", onClick: this.handleClick }, hAsync("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 }), hAsync("sd-icon", { name: "attachFile", size: Number(FILE_PICKER_LAYOUT.iconSize), color: this.getIconColor(), class: "sd-file-picker__icon" }), hAsync("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 && (hAsync("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 && (hAsync("div", { key: '54b4337797351ba86b391a020fa5260e807ff27e', class: "sd-file-picker__tooltip" }, displayText))));
+            } }, displayText), !this.disabled && hasFiles && (hAsync("sd-ghost-button", { icon: "close", size: "xxs", disabled: this.disabled, class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (hAsync("div", { class: "sd-file-picker__tooltip" }, displayText))));
+        if (this.inline) {
+            return (hAsync("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 (hAsync("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": [{
@@ -7433,9 +7583,28 @@ class SdFilePicker {
             "inline": [4],
             "multiple": [4],
             "accept": [1],
+            "maxFileSize": [8, "max-file-size"],
+            "maxTotalSize": [8, "max-total-size"],
+            "maxFiles": [8, "max-files"],
+            "name": [1],
+            "label": [1],
+            "addonLabel": [1, "addon-label"],
+            "hint": [1],
+            "errorMessage": [1, "error-message"],
+            "width": [8],
+            "rules": [16],
+            "error": [1028],
+            "status": [1],
+            "icon": [16],
+            "labelTooltip": [1, "label-tooltip"],
+            "labelTooltipProps": [16],
+            "focused": [1028],
+            "hovered": [1028],
             "internalValue": [32],
-            "hovered": [32],
-            "showTooltip": [32]
+            "showTooltip": [32],
+            "sdValidate": [64],
+            "sdReset": [64],
+            "sdResetValidate": [64]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -7448,7 +7617,7 @@ const sdFloatingPortalCss = () => `.sd-floating-menu{width:fit-content;padding:1
 class SdFloatingPopover {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.close = createEvent(this, "sdClose");
+        this.close = createEvent(this, "sdClose", 7);
     }
     get el() { return getElement(this); }
     to = 'body';
@@ -7594,7 +7763,7 @@ class SdFloatingPopover {
         this.close.emit();
     }
     render() {
-        return hAsync("slot", { key: '4eecedc457f691ec888cd27da4f28aef73d14f73' });
+        return hAsync("slot", { key: '025daba88b77d9e250893b20261bfce08f37e332' });
     }
     static get style() { return sdFloatingPortalCss(); }
     static get cmpMeta() { return {
@@ -7617,8 +7786,8 @@ class SdFloatingPopover {
 class SdForm {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.submitSuccess = createEvent(this, "sdSubmit");
-        this.submitFail = createEvent(this, "sdValidationError");
+        this.submitSuccess = createEvent(this, "sdSubmit", 7);
+        this.submitFail = createEvent(this, "sdValidationError", 7);
     }
     formClass = '';
     fields = [];
@@ -7791,7 +7960,7 @@ const sdGhostButtonCss = () => `sd-ghost-button{display:inline-flex;width:fit-co
 class SdGhostButton {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.click = createEvent(this, "sdClick");
+        this.click = createEvent(this, "sdClick", 7);
     }
     icon;
     size = 'sm';
@@ -7827,7 +7996,7 @@ class SdGhostButton {
             ? GHOST_BUTTON_DISABLED_ICON
             : GHOST_BUTTON_CONTENT_COLORS[this.intent];
         const accessibleName = this.ariaLabel.trim() || undefined;
-        return (hAsync("button", { key: '616698f4a8efbae1013d1f962cadedf72575789a', class: {
+        return (hAsync("button", { key: '8d6aa7e82d3e3f31638e98870283723fdb87e0e2', class: {
                 'sd-ghost-button': true,
                 'sd-ghost-button--disabled': this.disabled,
             }, type: "button", disabled: this.disabled, "aria-label": accessibleName, style: {
@@ -7836,7 +8005,7 @@ class SdGhostButton {
                 '--sd-ghost-button-hover-bg': GHOST_BUTTON_HOVER_BG_COLORS[this.intent],
                 '--sd-ghost-button-hover-opacity': GHOST_BUTTON_HOVER_OPACITY,
                 '--sd-ghost-button-accent': GHOST_BUTTON_FOCUS_RING_COLOR,
-            }, onClick: this.handleClick }, hAsync("sd-icon", { key: 'b8203a9ba9a6f385503289f299225e5df468ae8f', name: this.icon, size: sizeConfig.icon, color: contentColor })));
+            }, onClick: this.handleClick }, hAsync("sd-icon", { key: 'd858b173e3f93c49703b31cde6be4fa81440ae7a', name: this.icon, size: sizeConfig.icon, color: contentColor })));
     }
     static get style() { return sdGhostButtonCss(); }
     static get cmpMeta() { return {
@@ -7908,9 +8077,9 @@ class SdGuide {
     };
     render() {
         const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];
-        return (hAsync("div", { key: '1105258bc9d9d4d8d0c209ad735bb445e29ec0a0', class: "sd-guide", style: {
+        return (hAsync("div", { key: 'd98a48deb586592dbb379acb4e3725a97601dccd', class: "sd-guide", style: {
                 '--sd-guide-color': GUIDE_ICON[this.type].color,
-            } }, hAsync("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 && (hAsync("sd-portal", { key: 'd5a4cf958f0428606d21d7b0f1e2fc9a9820e374', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, hAsync("div", { key: 'be20ea71204a52c31d8cfc16a6dcb973542dd2d6', style: { position: 'absolute', width: '0px', height: '0px' } }, hAsync("div", { key: '344111896761d721cc35e453cc3cf13cb4d6547b', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, hAsync("sd-button", { key: '984f743925fa2cae64b93103da38d6cbba0109fc', class: "sd-guide__popup__close", icon: "close", color: "grey_65", size: "md", variant: "ghost", noHover: true, onSdClick: this.closeDropdown }), hAsync("div", { key: 'ae8d5c7e00035e81ebe39359ca0809c78688dd7d', class: "sd-guide__popup__header" }, hAsync("sd-icon", { key: '7527b4a66b314279d3cdddfc448a2d7e00f25ac4', name: "helpOutline", size: 24, color: "green_65" }), hAsync("h3", { key: 'fe99c45c4a4b9fa970adbbb4d6f7902ce863b318', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), hAsync("ul", { key: '00ad86270d3639796fa3d6df3c763be899082d0b', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
+            } }, hAsync("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 && (hAsync("sd-portal", { key: '56bda42619f3f10fbdc428e3d11abc1a4a812029', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, hAsync("div", { key: 'a73954469eb2f711ece68c8b17fe2d197b4fd515', style: { position: 'absolute', width: '0px', height: '0px' } }, hAsync("div", { key: 'bf07222fe61b7121d99f0ae39e1e7ffb539db1de', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, hAsync("sd-button", { key: 'c9b8d6c2a311e7a83e9c8b2568b3010e5619ad51', class: "sd-guide__popup__close", icon: "close", color: "grey_65", size: "md", variant: "ghost", noHover: true, onSdClick: this.closeDropdown }), hAsync("div", { key: 'da280eb73610cb0f70c5adbf10e413ea4d8a4629', class: "sd-guide__popup__header" }, hAsync("sd-icon", { key: 'ec73b6ed0777b464208e9bf94d96b044d8770714', name: "helpOutline", size: 24, color: "green_65" }), hAsync("h3", { key: '18a221c3dedb1882479c2a567b3c870d7dfd157b', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), hAsync("ul", { key: '5a8abec7b5c3246a5eb6a7ec45a3c16a05ccab72', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
     }
     // 현재 2depth까지만 스타일 적용
     renderListItem(message, depth = 0) {
@@ -8501,9 +8670,9 @@ const sdInputCss = () => `sd-icon{display:inline-block;line-height:0}sd-icon .sd
 class SdInput {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.input = createEvent(this, "sdUpdate");
-        this.focus = createEvent(this, "sdFocus");
-        this.blur = createEvent(this, "sdBlur");
+        this.input = createEvent(this, "sdUpdate", 7);
+        this.focus = createEvent(this, "sdFocus", 7);
+        this.blur = createEvent(this, "sdBlur", 7);
     }
     get host() { return getElement(this); }
     value = null;
@@ -8607,12 +8776,12 @@ class SdInput {
             '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
             '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
         };
-        return (hAsync("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 }, hAsync("label", { key: 'e4cf6f84306a8ddde595c317173c98c3ab00d51f', class: "sd-input__content" }, hAsync("slot", { key: 'd59f97019d7830fe8a050ed0ddcb212e6f8ceead', name: "prefix" }), hAsync("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 }), hAsync("slot", { key: '3bc1dd7c7034556c7c5baa4ceb02240e0062e995', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && (hAsync("sd-ghost-button", { key: '0edf50176fe97d8a8cd0f0b92c0ebe538c85d740', icon: "close", ariaLabel: "close", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
+        return (hAsync("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 }, hAsync("label", { key: '67b37ad7d802c11f9fc1bb372371040a267b9fb9', class: "sd-input__content" }, hAsync("slot", { key: '0068eac35163a12efe74288eb7a0871bf1bbbf81', name: "prefix" }), hAsync("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 }), hAsync("slot", { key: 'faa652d843aaba6229961566590ea564604fd183', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && (hAsync("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' && (hAsync("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' && (hAsync("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;
@@ -8679,7 +8848,7 @@ class SdLoadingSpinner {
         return resolveColor(this.color);
     }
     render() {
-        return (hAsync(Fragment, { key: '0cfc7069d024e08cfad7b4f6479b8ba2835428c2' }, hAsync("svg", { key: 'fe4c1e68baa60142eaceaaef6e4df88c79b626b2', class: "sd-loading-spinner", width: "72px", height: "72px", viewBox: "25 25 50 50", style: { color: this.resolvedColor } }, hAsync("circle", { key: '3e923b3a138d7aafc9b8cabcd884610addd916c1', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
+        return (hAsync(Fragment, { key: '1a4edb8be9cc83ab900cd615ee30958d9822e98b' }, hAsync("svg", { key: '634070026b58303bf3423b10f37ed6603179b9b1', class: "sd-loading-spinner", width: "72px", height: "72px", viewBox: "25 25 50 50", style: { color: this.resolvedColor } }, hAsync("circle", { key: 'fda3f7e4f787176f6030e19a3f2c1dd59326d35a', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
     }
     static get style() { return sdLoadingSpinnerCss(); }
     static get cmpMeta() { return {
@@ -8694,7 +8863,7 @@ class SdLoadingSpinner {
     }; }
 }
 
-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;
@@ -9045,9 +9214,9 @@ const sdNumberInputCss = () => `sd-number-input{display:inline-flex}sd-number-in
 class SdNumberInput {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.update = createEvent(this, "sdUpdate");
-        this.focus = createEvent(this, "sdFocus");
-        this.blur = createEvent(this, "sdBlur");
+        this.update = createEvent(this, "sdUpdate", 7);
+        this.focus = createEvent(this, "sdFocus", 7);
+        this.blur = createEvent(this, "sdBlur", 7);
     }
     get el() { return getElement(this); }
     size = 'sm';
@@ -9318,12 +9487,12 @@ class SdNumberInput {
             '--sd-textinput-input-hint-typography-line-height': `${NUMBER_INPUT_HINT.typography.lineHeight}px`,
             '--sd-textinput-input-contents-gap': `${NUMBER_INPUT_CONTENTS_GAP}px`,
         };
-        return (hAsync("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 }, hAsync("div", { key: '35ad9cb4ff6db3354b87aedd503a0ddd4c7493b2', class: "sd-number-input__content" }, this.useButton && (hAsync("button", { key: 'f18fc88a39608857ddf6028b6fb12a500c0c4cab', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, hAsync("sd-icon", { key: 'd55e76ddf3bc3e07102307c392f6ba3037335246', name: "minus", size: iconSize, color: this.isDecrementDisabled()
+        return (hAsync("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 }, hAsync("div", { key: '7ba690b017d58326640083feb4f88ab74e20f7e3', class: "sd-number-input__content" }, this.useButton && (hAsync("button", { key: '0eb3ccd26428fce21d74b1e2f06258b054337017', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, hAsync("sd-icon", { key: '4af528aa82ddc6f8abbee1fa8617f5fefc77f41b', name: "minus", size: iconSize, color: this.isDecrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
-                : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && (hAsync("span", { key: '328f58b6b34b9dff32d722ac55f88e76bfa24b31', class: "sd-number-input__prefix" }, this.inputPrefix)), hAsync("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 && (hAsync("span", { key: 'f524a85295c29dc02b6803d5a145d24d6d7c3f1b', class: "sd-number-input__prefix" }, this.inputPrefix)), hAsync("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 && (hAsync("span", { key: 'cbe0be362ae8e5d5db11f32ae689964e3a1fc57f', class: "sd-number-input__suffix" }, this.inputSuffix)), this.useButton && (hAsync("button", { key: '4bcdfafd3ca67a5ddcbcaa8ad63c80ba75104811', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, hAsync("sd-icon", { key: '2df5dac96b6e60d108e1769a1e3d7c2045c15886', name: "add", size: iconSize, color: this.isIncrementDisabled()
+            } }), this.inputSuffix && (hAsync("span", { key: '35a1cd706a87cf9320262b12aab7679cbb9eb7f2', class: "sd-number-input__suffix" }, this.inputSuffix)), this.useButton && (hAsync("button", { key: 'a818bf380ac32291155bf8a3c35cf9b9a007ec5e', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, hAsync("sd-icon", { key: '0d2e75fb5ebada9aa0846e807695d31f29b18647', name: "add", size: iconSize, color: this.isIncrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
                 : NUMBER_INPUT_STEPPER.icon.default }))))));
     }
@@ -9392,7 +9561,7 @@ const PER_PAGE = 10;
 class SdPagination {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.pageChange = createEvent(this, "sdPageChange");
+        this.pageChange = createEvent(this, "sdPageChange", 7);
     }
     currentPage = 1;
     lastPage = 1;
@@ -9454,12 +9623,12 @@ class SdPagination {
         }
     }
     render() {
-        return (hAsync("div", { key: '9b8ab3ae0c63267ab7933087cd85b2fd2f6f5697', class: this.paginationClasses }, hAsync("div", { key: '963f072a708ad1800492ce5467e17af8648f6171', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (hAsync("div", { class: "pagination-info" }, hAsync("span", { class: "current-page" }, this.currentPage), hAsync("span", null, "/"), hAsync("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (hAsync("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
+        return (hAsync("div", { key: 'd370dfd96244d439f83aa6f283ea3601b51ca8f1', class: this.paginationClasses }, hAsync("div", { key: '4287df0cbd99892e643b1e68ce051ac119c758d2', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (hAsync("div", { class: "pagination-info" }, hAsync("span", { class: "current-page" }, this.currentPage), hAsync("span", null, "/"), hAsync("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (hAsync("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)))), hAsync("div", { key: '5a0f5b9d866e873420ef6e29e0650e5884c2ab7c', class: "append-btns" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n)))), hAsync("div", { key: 'ad51e05546d929ac01898e93ab4285018837394a', class: "append-btns" }, this.renderNextButtons())));
     }
     static get style() { return sdPaginationCss(); }
     static get cmpMeta() { return {
@@ -9531,14 +9700,14 @@ class SdPopover {
         this.showPopover = false;
     };
     render() {
-        return (hAsync(Fragment, { key: 'ab94ec74dc1c6d4982e6420c20c72d045cb91e10' }, this.label ? (hAsync("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) })) : (hAsync("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 && (hAsync("sd-floating-portal", { key: '7cacc11be5463e66f0642ed080b8e27534724aad', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement, offset: this.popoverOffset }, hAsync("div", { key: '192366a56cbbbd4ddf60378cb948afd742e738f9', class: {
+        return (hAsync(Fragment, { key: '6a0b64ce442f1bd1dc76f22a160172a87a63a1d8' }, this.label ? (hAsync("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) })) : (hAsync("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 && (hAsync("sd-floating-portal", { key: 'e8d39da8af440c81773805331ab97a0105124d81', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement, offset: this.popoverOffset }, hAsync("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,
-            } }, hAsync("i", { key: '5a29695140891de8987d0c61c67b38b11cc84f8d', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, hAsync(TooltipArrow, { key: '98a9c7333df57d4655c87d3a0949a0f445e96d47' })), hAsync("div", { key: '6c822d0c1f441f31f58724c13b2fe2cd5f5346f3', class: "sd-floating-menu__content" }, this.menuTitle && hAsync("div", { key: 'effca66c7bfe59a3a25375d622b8f9bef124c01c', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (hAsync("div", { key: '66b655bb2d0520f2f390e5ef8ffee7d4b8aa5e4e', class: "sd-floating-menu__messages" }, this.messages.map(message => (hAsync("div", null, message))))), this.buttons.length > 0 && (hAsync("div", { key: '354a08c2c58eeb2347ef6c8e6acbd13639eb827d', class: `sd-floating-menu__buttons sd-floating-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (hAsync("sd-button", { ...button })))))), this.useClose && (hAsync("sd-ghost-button", { key: '3ee62dc5c099d94ff998c91125f54e72bdd2dc18', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xs", onClick: () => this.handleClose() })))))));
+            } }, hAsync("i", { key: '8052d9f446b03770c22857048c88048f0bc982cd', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, hAsync(TooltipArrow, { key: 'f6266c4da625b539f9864da6b09599a5b4bf07cb' })), hAsync("div", { key: '8de90282dae5ba223b6495c1f5ef9baaac88ed17', class: "sd-floating-menu__content" }, this.menuTitle && hAsync("div", { key: '79e26ede34d97abce06bfda8dc1bd29122c2e1ac', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (hAsync("div", { key: 'a25d8a379e373e136363a3bce19be76fd2fba182', class: "sd-floating-menu__messages" }, this.messages.map(message => (hAsync("div", null, message))))), this.buttons.length > 0 && (hAsync("div", { key: '9cf61069c654a2d884ae0660ec6ffceb563e3617', class: `sd-floating-menu__buttons sd-floating-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (hAsync("sd-button", { ...button })))))), this.useClose && (hAsync("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": [{
@@ -9576,7 +9745,7 @@ class SdPopover {
 class SdPortal {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.close = createEvent(this, "sdClose");
+        this.close = createEvent(this, "sdClose", 3);
     }
     get hostEl() { return getElement(this); }
     to = 'body';
@@ -9798,7 +9967,7 @@ class SdPortal {
         this.close.emit();
     }
     render() {
-        return hAsync("slot", { key: '4f303830ccd316e27880d300a953cf7fe5fe5e36' });
+        return hAsync("slot", { key: 'c1e05f5d7c809418279e4ded8bbb8c4b29703bb1' });
     }
     static get watchers() { return {
         "open": [{
@@ -9861,10 +10030,10 @@ class SdProgress {
         return this.statusColor[this.progressStatus];
     }
     render() {
-        return (hAsync("div", { key: 'ded78b5df0eb9233f7a920d20a2b3d270f2259eb', style: {
+        return (hAsync("div", { key: 'f5b723807c29b9e4a742febaf7d2f984f9de61d5', style: {
                 '--progress-color': this.progressColor,
                 '--progress-percentage': `${this.progressPercentage}%`,
-            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && hAsync("div", { key: '6249a64c5d0d3c2462fc3e6222698d9088a9fbfb', class: "sd-progress__label" }, this.label)));
+            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && hAsync("div", { key: '369e1b7805414b8a2fa5e44f4746435335a251cb', class: "sd-progress__label" }, this.label)));
     }
     renderBarProgress() {
         return (hAsync("div", { class: `sd-progress__bar sd-progress__bar--${this.progressStatus}` }, hAsync("div", { class: ['sd-progress__bar__percent', this.progressPercentage < 100 ? 'proceed' : ''].join(' ') }), hAsync("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--left" }, this.progressPercentage, "%"), hAsync("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--right" }, this.progressPercentage, "%")));
@@ -9900,7 +10069,7 @@ const sdRadioCss = () => `sd-radio{display:inline-flex;width:fit-content}sd-radi
 class SdRadio {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.update = createEvent(this, "sdUpdate");
+        this.update = createEvent(this, "sdUpdate", 7);
     }
     value;
     disabled = false;
@@ -9946,7 +10115,7 @@ const sdRadioButtonGroupCss = () => `sd-radio-button-group{display:inline-flex;w
 class SdRadioButtonGroup {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.change = createEvent(this, "sdUpdate");
+        this.change = createEvent(this, "sdUpdate", 7);
     }
     value;
     options = [];
@@ -10012,7 +10181,7 @@ const sdRadioGroupCss = () => `sd-radio{display:inline-flex;width:fit-content}sd
 class SdRadioGroup {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.change = createEvent(this, "sdUpdate");
+        this.change = createEvent(this, "sdUpdate", 7);
     }
     value;
     options = [];
@@ -10095,8 +10264,8 @@ class SdSelect extends BaseDropdownEvent {
     constructor(hostRef) {
         super();
         registerInstance(this, hostRef);
-        this.update = createEvent(this, "sdUpdate");
-        this.dropDownShow = createEvent(this, "sdDropDownShow");
+        this.update = createEvent(this, "sdUpdate", 7);
+        this.dropDownShow = createEvent(this, "sdDropDownShow", 7);
     }
     get el() { return getElement(this); }
     // props
@@ -10300,9 +10469,9 @@ const sdSelectDropdownCss = () => `.sd-select-dropdown .sd-select-option-placeho
 class SdSelectDropdown {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.optionClick = createEvent(this, "sdOptionClick");
-        this.optionFiltered = createEvent(this, "sdOptionFiltered");
-        this.scroll = createEvent(this, "sdScroll");
+        this.optionClick = createEvent(this, "sdOptionClick", 7);
+        this.optionFiltered = createEvent(this, "sdOptionFiltered", 7);
+        this.scroll = createEvent(this, "sdScroll", 7);
     }
     itemIndex;
     value = null;
@@ -10448,10 +10617,10 @@ class SdSelectDropdown {
         this.isScrolled = scrollTop > 0;
     };
     render() {
-        return (hAsync("div", { key: '7aae611f7e409ae7e1285922d0cf921a740df0c0', class: {
+        return (hAsync("div", { key: '47a99b4faac3adb110a548860ef094ba3bd4630a', class: {
                 'sd-select-dropdown': true,
                 'sd-select-dropdown--ready': this.isDropdownReady,
-            }, style: this.dropdownSize, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (hAsync("sd-select-search-input", { key: '25def5c05698732910a5c411a7f5d5165d421453', ref: el => (this.searchRef = el), isScrolled: this.isScrolled, searchText: this.searchText, onSdSearchInput: (event) => (this.searchText = event.detail || ''), onSdSearchFocus: () => (this.itemIndex = -1) })), this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index) => (hAsync("slot", { name: `option-${option.value}` }, hAsync("sd-select-option", { option: option, index: index, isSelected: this.isOptionSelected(option.value), isFocused: index === this.itemIndex, onOptionClick: ({ detail }) => this.optionClick.emit(detail), useCheckbox: this.useCheckbox }))))) : (hAsync("slot", { name: "option-placeholder" }, hAsync("div", { class: 'sd-select-option-placeholder' }, this.optionPlaceholder)))));
+            }, style: this.dropdownSize, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (hAsync("sd-select-search-input", { key: '0ed08c8a422d7d0be26ffcd68a424700feb6d66f', ref: el => (this.searchRef = el), isScrolled: this.isScrolled, searchText: this.searchText, onSdSearchInput: (event) => (this.searchText = event.detail || ''), onSdSearchFocus: () => (this.itemIndex = -1) })), this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index) => (hAsync("slot", { name: `option-${option.value}` }, hAsync("sd-select-option", { option: option, index: index, isSelected: this.isOptionSelected(option.value), isFocused: index === this.itemIndex, onOptionClick: ({ detail }) => this.optionClick.emit(detail), useCheckbox: this.useCheckbox }))))) : (hAsync("slot", { name: "option-placeholder" }, hAsync("div", { class: 'sd-select-option-placeholder' }, this.optionPlaceholder)))));
     }
     static get watchers() { return {
         "filteredOptions": [{
@@ -10498,8 +10667,8 @@ class SdSelectGroup extends BaseDropdownEvent {
     constructor(hostRef) {
         super();
         registerInstance(this, hostRef);
-        this.update = createEvent(this, "sdUpdate");
-        this.dropDownShow = createEvent(this, "sdDropDownShow");
+        this.update = createEvent(this, "sdUpdate", 7);
+        this.dropDownShow = createEvent(this, "sdDropDownShow", 7);
     }
     get el() { return getElement(this); }
     // props
@@ -10762,7 +10931,7 @@ class SdSelectGroup extends BaseDropdownEvent {
         });
     }
     render() {
-        return (hAsync("sd-field", { key: '43023a143ed08a3f06bc1abd55d64302947f17f9', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, addonLabel: this.addonLabel, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, hAsync("div", { key: 'bf9e7710b06dbca0d260df64f696559640d6cfcb', class: {
+        return (hAsync("sd-field", { key: 'a0269e6ebfce2363c451fdb6afbe3979265ffb52', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, addonLabel: this.addonLabel, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, hAsync("div", { key: '55c8f062080befa65986e29d3b7835146150302a', class: {
                 'sd-select-group': true,
                 'sd-select-group--open': this.isOpen,
                 'sd-select-group--disabled': this.disabled,
@@ -10866,8 +11035,8 @@ class SdSelectMultiple extends BaseDropdownEvent {
     constructor(hostRef) {
         super();
         registerInstance(this, hostRef);
-        this.update = createEvent(this, "sdUpdate");
-        this.dropDownShow = createEvent(this, "sdDropDownShow");
+        this.update = createEvent(this, "sdUpdate", 7);
+        this.dropDownShow = createEvent(this, "sdDropDownShow", 7);
     }
     get el() { return getElement(this); }
     // props
@@ -11010,7 +11179,7 @@ class SdSelectMultiple extends BaseDropdownEvent {
         this.handleOptionSelection(option);
     };
     render() {
-        return (hAsync("sd-field", { key: '52a829d1c59c4083a809e028687c1f9693f6dcf5', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, hAsync("div", { key: '80c36ebc81388a0ffa1c2593386123335715c8a9', class: {
+        return (hAsync("sd-field", { key: 'c2509aa07a6d69bd24bca0afd708d92db47e8084', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, hAsync("div", { key: 'd0e5ac84ad2aeb947b02b5a2cd4fbb66bf6e9419', class: {
                 'sd-select-multiple': true,
                 'sd-select-multiple--open': this.isOpen,
                 'sd-select-multiple--disabled': this.disabled,
@@ -11087,8 +11256,8 @@ class SdSelectMultipleGroup extends BaseDropdownEvent {
     constructor(hostRef) {
         super();
         registerInstance(this, hostRef);
-        this.update = createEvent(this, "sdUpdate");
-        this.dropDownShow = createEvent(this, "sdDropDownShow");
+        this.update = createEvent(this, "sdUpdate", 7);
+        this.dropDownShow = createEvent(this, "sdDropDownShow", 7);
     }
     get el() { return getElement(this); }
     // props
@@ -11580,7 +11749,7 @@ const sdSelectOptionCss = () => `sd-select-option{display:block;height:fit-conte
 class SdSelectOption {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.optionClick = createEvent(this, "optionClick");
+        this.optionClick = createEvent(this, "optionClick", 7);
     }
     get el() { return getElement(this); }
     option;
@@ -11606,7 +11775,7 @@ class SdSelectOption {
         }
     };
     render() {
-        return (hAsync("div", { key: '7341b944b2ca7246e04a279ee9a0e6a823f43091', class: {
+        return (hAsync("div", { key: 'b9844296973b6e85d3c3e3652671e89f470ec7a9', class: {
                 'sd-select__option': true,
                 'sd-select__option--selected': this.isSelected,
                 'sd-select__option--disabled': !!this.option.disabled,
@@ -11651,7 +11820,7 @@ const sdSelectOptionGroupCss = () => `sd-select-option-group{display:block;heigh
 class SdSelectOptionGroup {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.optionClick = createEvent(this, "optionClick");
+        this.optionClick = createEvent(this, "optionClick", 7);
     }
     get el() { return getElement(this); }
     option;
@@ -11692,7 +11861,7 @@ class SdSelectOptionGroup {
         }
     };
     render() {
-        return (hAsync("div", { key: '25fd7924d08648733a4986534a60fe0383e1511b', class: {
+        return (hAsync("div", { key: '9742c10ec20db29db941ac58666eb662b7b4275e', class: {
                 'sd-select__option-group': true,
                 'sd-select__option-group--selected': !!this.isSelected,
                 'sd-select__option-group--disabled': !!this.option.disabled,
@@ -11701,10 +11870,10 @@ class SdSelectOptionGroup {
                 'sd-select__option-group--group': this.option.type === 'group',
                 'sd-select__option-group--subgroup': this.option.type === 'subgroup',
                 'sd-select__option-group--item': this.option.type === 'item',
-            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, hAsync("div", { key: '2e530e5e1a3f13ca50a86bcfa684fd3b90daf397', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (hAsync("sd-checkbox", { key: '9046261abe407a94dc7863ccdac28c776e04effd', value: this.isSelected, disabled: this.option.disabled, onClick: e => {
+            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, hAsync("div", { key: 'e09a53d6c7e9897266a6b7b2ba2725afd2d45f67', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (hAsync("sd-checkbox", { key: '4b1d68eade6a25b44ad8c28c7bbaaf894d3b6158', value: this.isSelected, disabled: this.option.disabled, onClick: e => {
                 e.preventDefault();
                 this.handleClick(this.option, this.isSelected, e);
-            } })), hAsync("span", { key: '6bb7fba5a8fd4ba22f52d040b836b7796b641ce5', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (hAsync("span", { key: 'd44db76484c2e596eb9ee9378a7b238a042a8b6b', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
+            } })), hAsync("span", { key: '5bd439162ed1ac623a8bec83e31c924294c61b75', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (hAsync("span", { key: '39a6367f373ffd7403eb37a40e119e1534e79d22', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
     }
     static get style() { return sdSelectOptionGroupCss(); }
     static get cmpMeta() { return {
@@ -11734,8 +11903,8 @@ const sdSelectSearchInputCss = () => `sd-select-search-input{position:sticky;top
 class SdSelectSearchInput {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.searchInput = createEvent(this, "sdSearchInput");
-        this.searchFocus = createEvent(this, "sdSearchFocus");
+        this.searchInput = createEvent(this, "sdSearchInput", 7);
+        this.searchFocus = createEvent(this, "sdSearchFocus", 7);
     }
     isScrolled = false;
     searchText = '';
@@ -11753,17 +11922,17 @@ class SdSelectSearchInput {
         input?.focus({ preventScroll: true });
     }
     render() {
-        return (hAsync("div", { key: 'a344e235d317bb36270da0442d574425282438ad', class: {
+        return (hAsync("div", { key: '2d211645dc4041411e187f248a260a23b7c544f6', class: {
                 'sd-select-search-input': true,
                 'sd-select-search-input--scrolled': !!this.isScrolled,
-            }, onClick: event => event.stopPropagation() }, hAsync("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() }, hAsync("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();
-            } }, hAsync("sd-icon", { key: '18f8c09f864c23a43c35533fa0dac8f40c27829c', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
+            } }, hAsync("sd-icon", { key: '96a511b1f8625c883ec50d5e2985ff396d7b57c7', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
     }
     static get style() { return sdSelectSearchInputCss(); }
     static get cmpMeta() { return {
@@ -11786,8 +11955,8 @@ const sdSelectV2Css = () => `sd-select-v2{display:inline-flex}sd-select-v2 sd-po
 class SdSelectV2 {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.update = createEvent(this, "sdUpdate");
-        this.dropDownShow = createEvent(this, "sdDropDownShow");
+        this.update = createEvent(this, "sdUpdate", 7);
+        this.dropDownShow = createEvent(this, "sdDropDownShow", 7);
     }
     static VIEWPORT_PADDING = 20;
     static PORTAL_OFFSET_Y = 4;
@@ -11994,13 +12163,13 @@ class SdSelectV2 {
                 this.closeDropdown();
             },
         };
-        return (hAsync("sd-field", { key: '4a2253174ec791043f98ecca8703670b8423beaf', name: this.fieldName || this.internalName, label: this.label, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
+        return (hAsync("sd-field", { key: '85614fb127c63bec86a17e73ac1942aefbc62ad1', name: this.fieldName || this.internalName, label: this.label, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
                 this.hovered = true;
             }, onMouseLeave: () => {
                 this.hovered = false;
-            } }, hAsync("div", { key: 'a1cf728f0d8f133ed5766c5f9adb3a955e8927ca', class: "sd-select-v2", ref: el => {
+            } }, hAsync("div", { key: '4231e75590fec54915d580d7a4f6248232bca365', class: "sd-select-v2", ref: el => {
                 this.triggerRef = el;
-            } }, hAsync("sd-select-v2-trigger", { key: 'b939f8fe711b253b00a094a9c60f4f67892b166f', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: '9a50037ca13cd754f820d6f2f6052f9c4928feb7', ...portalProps }, hAsync("sd-select-v2-listbox", { key: 'e6e5b14376647bf4204bab2b65f6468b85b768c1', name: this.name, options: this.options, value: this.value, emitValue: this.emitValue, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
+            } }, hAsync("sd-select-v2-trigger", { key: '4e75ec1af0ba09ba8cd63c795e527035114037a9', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: 'de609975a56d52e542fc46a4d367b74bdcaa7e7b', ...portalProps }, hAsync("sd-select-v2-listbox", { key: '7d2fff4a3877701a68e422aa29e4f5a18e1d033c', name: this.name, options: this.options, value: this.value, emitValue: this.emitValue, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
     }
     static get watchers() { return {
         "isOpen": [{
@@ -12208,7 +12377,7 @@ const sdSelectV2ListItemCss = () => `sd-select-v2-list-item{display:block}sd-sel
 class SdSelectV2ListItem {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.listItemClick = createEvent(this, "sdListItemClick");
+        this.listItemClick = createEvent(this, "sdListItemClick", 7);
     }
     option;
     depth = 1;
@@ -12273,7 +12442,7 @@ class SdSelectV2ListItem {
         if (isDepth1Group) {
             cssVars['--list-item-border-top'] = `${LIST_ITEM_COLORS.depth1.borderWidth}px solid ${LIST_ITEM_COLORS.depth1.border}`;
         }
-        return (hAsync("div", { key: '5c11caeeb2a5d8e13f47098adb32af0d771a9b00', class: {
+        return (hAsync("div", { key: 'a7d424f1b7025cd41273a0264cdc1f973ff13061', class: {
                 'sd-select-v2-list-item': true,
                 'sd-select-v2-list-item--group': isGroup,
                 'sd-select-v2-list-item--depth1-group': isDepth1Group,
@@ -12283,7 +12452,7 @@ class SdSelectV2ListItem {
                 'sd-select-v2-list-item--focused': this.isFocused,
                 'sd-select-v2-list-item--selectable': this.isSelectable && !this.option.disabled,
                 'sd-select-v2-list-item--disabled': !!this.option.disabled,
-            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (hAsync("sd-checkbox", { key: 'fe911e3eb7b3ce57a1c6ff88007c9322070712b5', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, class: "sd-select-v2-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), hAsync("span", { key: 'c2fcc803ca012f6a1f708b8a959e2dc5e724ae65', class: "sd-select-v2-list-item__label" }, this.option.label), this.countInfo && (hAsync("span", { key: 'efd3d5c4328e0b0f3dfc8176e93f80c8d73cf3b4', class: "sd-select-v2-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
+            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (hAsync("sd-checkbox", { key: 'bbcd2a4ce4b0a2efdc06647a7b2d6c1f0875667c', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, class: "sd-select-v2-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), hAsync("span", { key: '6f0df85e664b797547d2f24038f5112767b3fa67', class: "sd-select-v2-list-item__label" }, this.option.label), this.countInfo && (hAsync("span", { key: '04e862cc16406c1fd3e27e716c33f54d72f7d80d', class: "sd-select-v2-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
     }
     static get style() { return sdSelectV2ListItemCss(); }
     static get cmpMeta() { return {
@@ -12308,8 +12477,8 @@ const sdSelectV2ListItemSearchCss = () => `sd-select-v2-list-item-search{display
 class SdSelectV2ListItemSearch {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.searchFilter = createEvent(this, "sdSearchFilter");
-        this.searchFocus = createEvent(this, "sdSearchFocus");
+        this.searchFilter = createEvent(this, "sdSearchFilter", 7);
+        this.searchFocus = createEvent(this, "sdSearchFocus", 7);
     }
     isScrolled = false;
     searchText = '';
@@ -12351,12 +12520,12 @@ class SdSelectV2ListItemSearch {
             clearTimeout(this.debounceTimer);
     }
     render() {
-        return (hAsync("div", { key: '76aabf7d27484909131a5a019b091a9162cf579e', class: {
+        return (hAsync("div", { key: '87f0a8fc24fe4b80cd29f63ca4f269b242a35f56', class: {
                 'sd-select-v2-list-item-search': true,
                 'sd-select-v2-list-item-search--scrolled': this.isScrolled,
-            } }, hAsync("div", { key: 'add67bf72a66f391e59d5b36a0132c8ce3104a72', class: "sd-select-v2-list-item-search__inner" }, hAsync("sd-icon", { key: '631a0335fac05e7188132a2c04adcab70b4f8e0f', name: "search", size: 16, color: "grey_70", class: "sd-select-v2-list-item-search__icon" }), hAsync("input", { key: '206ea8ce226bf5a9a39da20643dec26682752f56', ref: el => {
+            } }, hAsync("div", { key: '980ad86deb07ae25373c8802caa46febbdc1d8f6', class: "sd-select-v2-list-item-search__inner" }, hAsync("sd-icon", { key: '9e9fc2104743c1ec7790cffffb955135908b36e7', name: "search", size: 16, color: "grey_70", class: "sd-select-v2-list-item-search__icon" }), hAsync("input", { key: '601668bfaffcba5285375e845d0b2ef59238f1a8', ref: el => {
                 this.inputEl = el;
-            }, type: "text", class: "sd-select-v2-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), this.searchText && (hAsync("button", { key: '6d1aa5a22f358da1f702c1a4c44acf561bdc2d5f', type: "button", class: "sd-select-v2-list-item-search__clear", onClick: this.handleClear }, hAsync("sd-icon", { key: 'a1ec717b949e539bf32701a604e098ffa4c9e783', name: "close", size: 12, color: "#888888" }))))));
+            }, type: "text", class: "sd-select-v2-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), this.searchText && (hAsync("button", { key: '56973c7d365f9734b2135aa406651edd372f9789', type: "button", class: "sd-select-v2-list-item-search__clear", onClick: this.handleClear }, hAsync("sd-icon", { key: '84161963570776fe9ecfb519d654fe00aa4e7c6a', name: "close", size: 12, color: "#888888" }))))));
     }
     static get style() { return sdSelectV2ListItemSearchCss(); }
     static get cmpMeta() { return {
@@ -12378,7 +12547,7 @@ const sdSelectV2ListboxCss = () => `sd-select-v2-listbox{display:block}sd-select
 class SdSelectV2Listbox {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.optionSelect = createEvent(this, "sdOptionSelect");
+        this.optionSelect = createEvent(this, "sdOptionSelect", 7);
     }
     name = 'default';
     options = [];
@@ -12662,7 +12831,7 @@ class SdSelectV2Listbox {
             '--listbox-radius': `${LIST_BOX_LAYOUT.radius}px`,
             '--listbox-padding-bottom': `${LIST_BOX_LAYOUT.paddingBottom}px`,
         };
-        return (hAsync("div", { key: '7728feee63a4e282220abfefcf79a0225255d3e0', class: "sd-select-v2-listbox", style: cssVars }, this.showSearch && (hAsync("sd-select-v2-list-item-search", { key: '0c2cbd8ba7ec612307a94962bae3d07655ec6554', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), hAsync("div", { key: 'e0b594dbc86e9dee867fd9573fc84228f5cb48ec', class: "sd-select-v2-listbox__list", onScroll: this.handleScroll, ref: el => {
+        return (hAsync("div", { key: 'c04974ad387df3d23efbf27afdb6cc92f24a744e', class: "sd-select-v2-listbox", style: cssVars }, this.showSearch && (hAsync("sd-select-v2-list-item-search", { key: 'b8ef69dc0a35cc2110665095feea58d4132a6bad', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), hAsync("div", { key: 'd8a2f04f1dbbd8fde39203ac52a1bd220097495d', class: "sd-select-v2-listbox__list", onScroll: this.handleScroll, ref: el => {
                 this.listEl = el;
             } }, this.isEmpty ? (hAsync("div", { class: "sd-select-v2-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (hAsync("sd-select-v2-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) })))))));
     }
@@ -12698,7 +12867,7 @@ const sdSelectV2TriggerCss = () => `sd-select-v2-trigger{display:block;width:100
 class SdSelectV2Trigger {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.triggerClick = createEvent(this, "sdTriggerClick");
+        this.triggerClick = createEvent(this, "sdTriggerClick", 7);
     }
     displayText = '';
     placeholder = '선택';
@@ -12727,11 +12896,11 @@ class SdSelectV2Trigger {
                 ? SELECT_COLORS.icon.disabled
                 : SELECT_COLORS.icon.default,
         };
-        return (hAsync("div", { key: 'c26c6817d3df7db251e3043e44504b70a6232dd1', class: {
+        return (hAsync("div", { key: '9bbda5c8b8b359f6df1079f9f5b1b170472ba7d3', class: {
                 'sd-select-v2-trigger': true,
                 'sd-select-v2-trigger--open': this.isOpen,
                 'sd-select-v2-trigger--disabled': this.disabled,
-            }, style: cssVars, onClick: this.handleClick }, hAsync("div", { key: '2c99a628d315f1bfe999429f816a21ea62dab6ae', class: "sd-select-v2-trigger__content" }, hAsync("span", { key: 'fd9ccefa586982ac1695a3f16cf83bc3d1e11719', class: "sd-select-v2-trigger__text" }, hasValue ? this.displayText : this.placeholder), hAsync("sd-icon", { key: '1c7e82fb106945a537931726795d3440e71714c8', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
+            }, style: cssVars, onClick: this.handleClick }, hAsync("div", { key: 'b129a7bcbdae8b6873f0b9f97cf37f69829de36a', class: "sd-select-v2-trigger__content" }, hAsync("span", { key: 'fff9c48504e54ea4bedd1494c3d321197f9b0e8d', class: "sd-select-v2-trigger__text" }, hasValue ? this.displayText : this.placeholder), hAsync("sd-icon", { key: 'd3e88a0de9fc773a3f5e3c173159ba2feff1ba67', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
                 'sd-select-v2-trigger__icon': true,
                 'sd-select-v2-trigger__icon--open': this.isOpen,
             } }))));
@@ -12757,9 +12926,9 @@ const sdTableCss = () => `.sd-table__wrapper{height:var(--table-height, auto);wi
 class SdTable {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.sdSelectChange = createEvent(this, "sdSelectChange");
-        this.sdPageChange = createEvent(this, "sdPageChange");
-        this.sdRowsPerPageChange = createEvent(this, "sdRowsPerPageChange");
+        this.sdSelectChange = createEvent(this, "sdSelectChange", 7);
+        this.sdPageChange = createEvent(this, "sdPageChange", 7);
+        this.sdRowsPerPageChange = createEvent(this, "sdRowsPerPageChange", 7);
     }
     get el() { return getElement(this); }
     columns;
@@ -13609,7 +13778,7 @@ const sdTabsCss = () => `sd-tabs{display:inline-block;width:100%;border-bottom:1
 class SdTabs {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.update = createEvent(this, "sdUpdate");
+        this.update = createEvent(this, "sdUpdate", 7);
     }
     value;
     tabs = [];
@@ -13845,7 +14014,7 @@ class SdTag {
     render() {
         const config = this.resolvedConfig;
         const iconNode = this.renderIcon(config.icon, config.iconSize);
-        return (hAsync("span", { key: '1cfaeb97f648f8929cdaf6bd5650e400f47cb207', class: "sd-tag", style: {
+        return (hAsync("span", { key: '0a1fe7d5e6a3fcdf3a392e1e8d16032139116c7e', class: "sd-tag", style: {
                 '--sd-tag-background': config.background,
                 '--sd-tag-content': config.content,
                 '--sd-tag-height': config.height,
@@ -13855,7 +14024,7 @@ class SdTag {
                 '--sd-tag-font-weight': config.fontWeight,
                 '--sd-tag-line-height': config.lineHeight,
                 '--sd-tag-radius': config.radius,
-            }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, hAsync("span", { key: 'c858d07e4b33f9d142a7d2719399374c37785fe3', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
+            }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, hAsync("span", { key: '405deaf8fa66c9ea703035211ff2274d2dc78884', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
     }
     static get style() { return sdTagCss(); }
     static get cmpMeta() { return {
@@ -13926,7 +14095,7 @@ const sdTextLinkCss = () => `sd-text-link{display:inline-flex}sd-text-link .sd-t
 class SdTextLink {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.click = createEvent(this, "sdClick");
+        this.click = createEvent(this, "sdClick", 7);
     }
     label = '';
     icon = '';
@@ -13957,16 +14126,16 @@ class SdTextLink {
             '--sd-text-link-text-decoration': typo.textDecoration,
             '--sd-text-link-color': contentColor,
         };
-        return (hAsync("span", { key: '518661e48081a4c128667608ebda9a1dca1b19c0', class: {
+        return (hAsync("span", { key: '8eadcc89bb334780afa4997f0fcfa6492636f641', class: {
                 'sd-text-link': true,
                 'sd-text-link--disabled': this.disabled,
-            }, style: cssVars, onClick: this.handleClick }, this.icon && (hAsync("sd-icon", { key: 'b73b19f38036987ab312e8ce9960280fa863a44e', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), hAsync("span", { key: 'a61877f0c9740259fa81344b41f43de50d76d582', class: "sd-text-link__label" }, this.label), this.useArrow && (hAsync("span", { key: '2887c482820bff0dcbd3e753f979b242b765e5b9', class: "sd-text-link__arrow", style: {
+            }, style: cssVars, onClick: this.handleClick }, this.icon && (hAsync("sd-icon", { key: 'a4e9ecae685a9a07e9b09cbd44d5132fd9c9961b', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), hAsync("span", { key: '2c7de496aa3e1ac5be85d9920d0673aebc8738f0', class: "sd-text-link__label" }, this.label), this.useArrow && (hAsync("span", { key: '735ee80a90f1f2bb8c5d009cea60664c4760aef7', class: "sd-text-link__arrow", style: {
                 width: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
                 height: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
                 display: 'inline-flex',
                 alignItems: 'center',
                 justifyContent: 'center',
-            } }, hAsync("sd-icon", { key: 'da303224cde569553d8eca8e6215761640ea2470', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
+            } }, hAsync("sd-icon", { key: '61f57de237b92461ea387ad0bd71bbbb7d7cd08c', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
     }
     static get style() { return sdTextLinkCss(); }
     static get cmpMeta() { return {
@@ -13991,9 +14160,9 @@ const sdTextareaCss = () => `sd-textarea{display:block}sd-textarea .sd-textarea{
 class SdTextarea {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.input = createEvent(this, "sdUpdate");
-        this.focus = createEvent(this, "sdFocus");
-        this.blur = createEvent(this, "sdBlur");
+        this.input = createEvent(this, "sdUpdate", 7);
+        this.focus = createEvent(this, "sdFocus", 7);
+        this.blur = createEvent(this, "sdBlur", 7);
     }
     get host() { return getElement(this); }
     value = null;
@@ -14070,10 +14239,10 @@ class SdTextarea {
     }
     render() {
         const maxLengthCounter = this.getMaxLengthCounter();
-        return (hAsync("div", { key: 'cd47db7305c089848a3385932945a99cd3932ebb', class: {
+        return (hAsync("div", { key: '05fa25ff5bc2a8a0927fbc5301c1404a92e26d5c', class: {
                 'sd-textarea': true,
                 [this.getTextareaStatus()]: true,
-            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, hAsync("div", { key: '2768eed1797ecc42e3e9d7a15416f93fa8eb211f', class: "sd-textarea__content" }, hAsync("textarea", { key: '91af1337c1209d9798728912a7eae52acf02b6ca', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, autofocus: this.autoFocus, maxLength: this.maxLength, onInput: this.handleInput.bind(this), onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event) })), this.hasFooter() && (hAsync("div", { key: '9d4e2e72a87beb9e95009c8824165f136e2b194c', class: "sd-textarea__footer" }, this.helpText !== undefined && hAsync("span", { key: 'e420045dbb4cd253125594ea7230818281aa920f', class: "sd-textarea__help-text" }, this.helpText), maxLengthCounter !== null && hAsync("span", { key: '3658f7f91c21e301f0fe5b69226a6380d500fbca', class: "sd-textarea__counter" }, maxLengthCounter)))));
+            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, hAsync("div", { key: 'a15fabde4ef35369129cb638aa0a680f4c8e231c', class: "sd-textarea__content" }, hAsync("textarea", { key: '1967728740bfa9b749040eefbd813116f281db91', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, autofocus: this.autoFocus, maxLength: this.maxLength, onInput: this.handleInput.bind(this), onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event) })), this.hasFooter() && (hAsync("div", { key: 'ad466295bab42461aeb7a29e81ca147cc473cbea', class: "sd-textarea__footer" }, this.helpText !== undefined && hAsync("span", { key: 'd3ad4c9ae5e16114b2b1216ae643c5a53b7bd02a', class: "sd-textarea__help-text" }, this.helpText), maxLengthCounter !== null && hAsync("span", { key: 'bd8ee146625f96e4b19b15247ca72a3b0816d2a9', class: "sd-textarea__counter" }, maxLengthCounter)))));
     }
     static get watchers() { return {
         "value": [{
@@ -14151,7 +14320,7 @@ const sdToastCss = () => `sd-toast{display:block;width:fit-content;height:fit-co
 class SdToast {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.close = createEvent(this, "sdClose");
+        this.close = createEvent(this, "sdClose", 7);
     }
     icon;
     message;
@@ -14163,10 +14332,10 @@ class SdToast {
     render() {
         const typeConfig = TOAST_TYPE_CONFIG[this.type] ?? TOAST_TYPE_CONFIG.default;
         const iconSize = Number(TOAST_LAYOUT.iconSize);
-        return (hAsync("div", { key: '9f9332b868ad1ae09854a6eeb7dc0935d412147c', style: {
+        return (hAsync("div", { key: '630fa227d71315f8e0e61bb19d0f37ca8363b856', style: {
                 '--sd-toast-bg': typeConfig.bg,
                 '--sd-toast-text': typeConfig.content,
-            } }, hAsync("div", { key: '762ac3406fd9d98dc4583244de6744f1e2c6eec6', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (hAsync("div", { key: '8f7f2ce05c5e0f26b5d4af17284cc67ae35c9677', class: "sd-toast__icon" }, hAsync("sd-icon", { key: '456de7bdf8b1ed1c11ec35d73b7b78ee7fd2c9d8', name: this.icon, size: iconSize, color: typeConfig.content }))), hAsync("div", { key: 'a4feb91f9a79023413f01f79e2012dc9f9af0d3b', class: "sd-toast__content" }, hAsync("span", { key: '091acd520b42f2cd2d0ae199ea540ce9d3a3f59f', class: "sd-toast__message" }, this.message)), this.link && (hAsync("a", { key: 'f1738019a27b9f6f98c17183c7acdcbee9f6e00e', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.useClose && (hAsync("sd-ghost-button", { key: '8cfb8c54a20d71fdc17f9bf8ba5fe6d6ce028ed3', class: "sd-toast__close", icon: "close", ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
+            } }, hAsync("div", { key: '49fd9cb53f3c12aa372b44191ccd9f09cc159deb', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (hAsync("div", { key: 'c57ccceb89350863b19f00b7d725c20ddde33789', class: "sd-toast__icon" }, hAsync("sd-icon", { key: 'f17a78f7e326005117d69dddcb03e8c0a1443efe', name: this.icon, size: iconSize, color: typeConfig.content }))), hAsync("div", { key: '713c2c40003b17f29c6921826b4ef3a68d201761', class: "sd-toast__content" }, hAsync("span", { key: '50e48da188d6ab805d7cce55705be5da19207724', class: "sd-toast__message" }, this.message)), this.link && (hAsync("a", { key: 'f04fa2c7386cfb1655bfcfd76e6c1dcb1c5c1ea4', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.useClose && (hAsync("sd-ghost-button", { key: '994248033b0d762693a9bacded1454ae1b66c770', class: "sd-toast__close", icon: "close", ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
     }
     static get style() { return sdToastCss(); }
     static get cmpMeta() { return {
@@ -14201,8 +14370,8 @@ let toastIdCounter = 0;
 class SdToastContainer {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.toastShow = createEvent(this, "sdToastShow");
-        this.toastDismiss = createEvent(this, "sdToastDismiss");
+        this.toastShow = createEvent(this, "sdToastShow", 7);
+        this.toastDismiss = createEvent(this, "sdToastDismiss", 7);
     }
     get el() { return getElement(this); }
     position = 'bottom-center';
@@ -14418,7 +14587,7 @@ class SdToastContainer {
         const activeToasts = toasts.filter(t => t.state !== 'exiting').reverse();
         const indexMap = new Map();
         activeToasts.forEach((t, i) => indexMap.set(t.id, i));
-        return (hAsync("div", { key: '5de5a655a8077dea7b691eaafb47a2fd9ebad6f0', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
+        return (hAsync("div", { key: '857b7a794e3dd945d706744519456ad033672760', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
                 this.expanded = true;
                 this.pauseTimers();
             }, onMouseLeave: () => {
@@ -14463,7 +14632,7 @@ const sdToggleCss = () => `sd-toggle{display:inline-block;height:20px;line-heigh
 class SdToggle {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.change = createEvent(this, "sdUpdate");
+        this.change = createEvent(this, "sdUpdate", 7);
     }
     value = false;
     label = '';
@@ -14493,7 +14662,7 @@ class SdToggle {
         this.change.emit(newValue);
     };
     render() {
-        return (hAsync("label", { key: '698daae860db5fbc4771e135ddc2bcb6b7401d3f', "aria-label": this.label || 'toggle', class: this.toggleClasses }, hAsync("input", { key: 'fe54c7e2ae289fc24dca6c33b7ceb16780bf249f', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), this.label && hAsync("span", { key: '5063162161ebaa9d1d2773aac3fdf3d482f4219a', class: "sd-toggle__label" }, this.label), hAsync("div", { key: 'f320af2c5a89fab80e5cc90cbbd0dd88dee93cea', class: "sd-toggle__track" }, hAsync("div", { key: 'a96f3f836d11e3a24e78a580797dc03e92e335b6', class: "sd-toggle__thumb" }))));
+        return (hAsync("label", { key: '2a50a4c8bd89f40db18b78ad5e5ed5885596f0d0', "aria-label": this.label || 'toggle', class: this.toggleClasses }, hAsync("input", { key: 'cfdea2ecd3d5946f3b4264d05da09af6e82ca4cd', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), this.label && hAsync("span", { key: 'f27cc85d92d47649f31e096ba09894c85a934c52', class: "sd-toggle__label" }, this.label), hAsync("div", { key: '4a19cae7fdc7e3b12e03281e31b8b3a2a4cfc88b', class: "sd-toggle__track" }, hAsync("div", { key: 'e99a72c39e20e8ea6b4d2df14e74c592b3b0eb22', class: "sd-toggle__thumb" }))));
     }
     static get style() { return sdToggleCss(); }
     static get cmpMeta() { return {
@@ -14515,7 +14684,7 @@ const sdToggleButtonCss = () => `sd-toggle-button{display:inline-block;line-heig
 class SdToggleButton {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.change = createEvent(this, "sdUpdate");
+        this.change = createEvent(this, "sdUpdate", 7);
     }
     value = false;
     label = '';
@@ -14549,7 +14718,7 @@ class SdToggleButton {
         this.change.emit(newValue);
     };
     render() {
-        return (hAsync("label", { key: '3f5747da955bf4838f95a11c52677c269e627513', class: this.buttonClasses, "aria-label": this.label || 'toggle button' }, this.label, hAsync("input", { key: '3fcf184d64abec88674a999982aee09f8670c311', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        return (hAsync("label", { key: '964590e261c212de41cae1cbb6e7e2054182d1f6', class: this.buttonClasses, "aria-label": this.label || 'toggle button' }, this.label, hAsync("input", { key: 'f1bfd190408a6e2899cdcd1d66688b94a8d2ecc0', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
     static get style() { return sdToggleButtonCss(); }
     static get cmpMeta() { return {
@@ -14592,7 +14761,7 @@ const TOOLTIP_TYPE_CONFIG = {
     accent: { bg: tooltipTokens.tooltip.accent.bg, content: tooltipTokens.tooltip.accent.content },
 };
 
-const sdTooltipCss = () => `sd-tooltip{visibility:hidden !important;display:inline-flex}sd-tooltip.visible{visibility:visible !important}sd-tooltip .sd-tooltip{position:relative;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}`;
+const sdTooltipCss = () => `sd-tooltip{visibility:hidden !important;display:inline-flex}sd-tooltip.visible{visibility:visible !important}sd-tooltip .sd-tooltip-trigger{display:inline-flex;position:relative;cursor:pointer;align-items:center;justify-content:center}`;
 
 class SdTooltip {
     constructor(hostRef) {
@@ -14677,14 +14846,14 @@ class SdTooltip {
         const toggleTooltip = () => (this.showTooltip = !this.showTooltip);
         const divTrigger = trigger === 'hover' ? hoverTrigger : this.label ? {} : { onClick: toggleTooltip };
         const buttonClickTrigger = trigger === 'click' && this.label ? { onSdClick: toggleTooltip } : {};
-        return (hAsync(Fragment, { key: '7e3dfc0d59b38a483e8384ed52d70e0f4f4f7131' }, hAsync("div", { key: '19b2b9ad1f936ea356baec15b0b3cb45c983cd47', class: this.sdClass, ...divTrigger }, this.label ? (hAsync("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: icon, size: this.buttonSize ?? 'sm', color: color, variant: this.buttonVariant ?? 'primary', class: "sd-tooltip", ...buttonClickTrigger })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (hAsync("sd-floating-portal", { key: '4cfb1f9a16c962fd75bc8b419ea1b76495b32926', parentRef: this.buttonEl, onSdClose: this.handleClose.bind(this), placement: placement, offset: this.tooltipOffset }, hAsync("div", { key: '81f043186ed76dc205c87facea044aecc92222ad', ref: el => (this.menuEl = el), class: {
+        return (hAsync(Fragment, { key: '45662c35d1eb8cd1f23e0c62646a02fd244fee13' }, hAsync("div", { key: '7f04bfcc31aecad132ce95eeb1a6d936f79189ee', class: `sd-tooltip-trigger ${this.sdClass || ''}`, ...divTrigger }, this.label ? (hAsync("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: icon, size: this.buttonSize ?? 'sm', color: color, variant: this.buttonVariant ?? 'primary', class: "sd-tooltip", ...buttonClickTrigger })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (hAsync("sd-floating-portal", { key: '95c16d600733dca5f40d06b222b422bd48ddb2dd', parentRef: this.buttonEl, onSdClose: this.handleClose.bind(this), placement: placement, offset: this.tooltipOffset }, hAsync("div", { key: '84b63cb44fbe9e7a81e033acde6be32b72ed24ba', ref: el => (this.menuEl = el), class: {
                 'sd-floating-menu': true,
                 [`sd-floating-menu--${tooltipType}`]: true,
                 [`sd-floating-menu--${placement}`]: true,
             }, style: {
                 '--sd-floating-bg': typeConfig.bg,
                 '--sd-floating-content': typeConfig.content,
-            }, onMouseEnter: () => this.show(), onMouseLeave: () => this.startHideTimer() }, hAsync("i", { key: '6fa21e81b5de268176ea49c02c7712f8c916ba2e', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, hAsync(TooltipArrow, { key: '3592d2d2306257b778ecd2092a140c3926792c89' })), hAsync("div", { key: '0439204e3e8ba3f05b48929ee1db0dadff5d586c', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }))))));
+            }, onMouseEnter: () => this.show(), onMouseLeave: () => this.startHideTimer() }, hAsync("i", { key: 'c05e9ecb128e780f3596e8e17b6796255e21b61e', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, hAsync(TooltipArrow, { key: 'fa56346eb836456d4a646cd2d3959e2c4c98c2d7' })), hAsync("div", { key: '926e918d55db0f79e5e776b341fe4d0d6b0bf574', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }))))));
     }
     static get style() { return sdTooltipCss(); }
     static get cmpMeta() { return {