@sellmate/design-system 1.0.21 → 1.0.22

package/hydrate/index.js

@@ -5514,8 +5514,103 @@ const size = {
 		icon: "24"
 	}
 };
+const border = {
+	disabled: "#CCCCCC"
+};
+const dropdown = {
+	xs: {
+		minWidth: "60"
+	},
+	sm: {
+		minWidth: "76"
+	},
+	md: {
+		minWidth: "106"
+	}
+};
+const bg = {
+	disabled: "#E1E1E1"
+};
+const content = {
+	disabled: "#888888"
+};
+const brand = {
+	strong: {
+		bg: {
+			"default": "#025497",
+			hover: "#004177"
+		},
+		content: "#FFFFFF",
+		dropdown: {
+			divider: "#006AC1"
+		}
+	},
+	subtle: {
+		bg: {
+			"default": "#1F8AE1",
+			hover: "#006AC1"
+		},
+		content: "#FFFFFF",
+		dropdown: {
+			divider: "#5CB0F3"
+		}
+	},
+	outline: {
+		bg: {
+			"default": "#FFFFFF",
+			hover: "#EAF5FE"
+		},
+		border: "#025497",
+		content: "#025497"
+	}
+};
+const neutral = {
+	subtle: {
+		bg: {
+			"default": "#FFFFFF",
+			hover: "#EEEEEE"
+		},
+		content: "#333333"
+	},
+	outline: {
+		bg: {
+			"default": "#FFFFFF",
+			hover: "#EEEEEE"
+		},
+		border: "#888888",
+		content: "#333333"
+	}
+};
+const danger = {
+	strong: {
+		bg: {
+			"default": "#E30000",
+			hover: "#AD0000"
+		},
+		content: "#FFFFFF",
+		dropdown: {
+			divider: "#FF7C7C"
+		}
+	},
+	outline: {
+		bg: {
+			"default": "#FFFFFF",
+			hover: "#FCEFEF"
+		},
+		border: "#E30000",
+		content: "#E30000"
+	}
+};
 var buttonTokens = {
-	size: size};
+	size: size,
+	border: border,
+	dropdown: dropdown,
+	bg: bg,
+	content: content,
+	brand: brand,
+	neutral: neutral,
+	danger: danger
+};
 
 const sdButtonCss = () => `sd-button{display:inline-flex;width:fit-content;height:fit-content}.sd-button{--sd-button-height:34px;--sd-button-padding-x:20px;--sd-button-gap:8px;--sd-button-font-family:inherit;--sd-button-font-size:16px;--sd-button-font-weight:500;--sd-button-text-decoration:none;--sd-button-label-min-width:auto;--sd-button-icon-only-size:var(--sd-button-height);text-decoration:none;cursor:pointer;border-radius:var(--sd-button-radius-default, 4px);transition:all 0.2s ease-in-out;position:relative;overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;border:none;padding:0 var(--sd-button-padding-x);min-width:var(--sd-button-min-width, auto);min-height:var(--sd-button-height);font-family:var(--sd-button-font-family);font-size:var(--sd-button-font-size);font-weight:var(--sd-button-font-weight);text-decoration:var(--sd-button-text-decoration)}.sd-button--xs{--sd-button-height:var(--sd-button-xs-height, 24px);--sd-button-padding-x:var(--sd-button-xs-padding-x, 8px);--sd-button-gap:var(--sd-button-xs-gap, 4px);--sd-button-font-family:var(--sd-button-xs-typography-font-family, inherit);--sd-button-font-size:var(--sd-button-xs-typography-font-size, 12px);--sd-button-font-weight:var(--sd-button-xs-typography-font-weight, 500);--sd-button-text-decoration:var(--sd-button-xs-typography-text-decoration, none);--sd-button-label-min-width:var(--sd-button-label-xs-min-width, auto);--sd-button-icon-only-size:var(--sd-button-icon-only-xs-width, var(--sd-button-height));line-height:20px}.sd-button--sm{--sd-button-height:var(--sd-button-sm-height, 28px);--sd-button-padding-x:var(--sd-button-sm-padding-x, 12px);--sd-button-gap:var(--sd-button-sm-gap, 6px);--sd-button-font-family:var(--sd-button-sm-typography-font-family, inherit);--sd-button-font-size:var(--sd-button-sm-typography-font-size, 12px);--sd-button-font-weight:var(--sd-button-sm-typography-font-weight, 500);--sd-button-text-decoration:var(--sd-button-sm-typography-text-decoration, none);--sd-button-label-min-width:var(--sd-button-label-sm-min-width, auto);--sd-button-icon-only-size:var(--sd-button-icon-only-sm-width, var(--sd-button-height));line-height:20px}.sd-button--md{--sd-button-height:var(--sd-button-md-height, 34px);--sd-button-padding-x:var(--sd-button-md-padding-x, 20px);--sd-button-gap:var(--sd-button-md-gap, 8px);--sd-button-font-family:var(--sd-button-md-typography-font-family, inherit);--sd-button-font-size:var(--sd-button-md-typography-font-size, 16px);--sd-button-font-weight:var(--sd-button-md-typography-font-weight, 500);--sd-button-text-decoration:var(--sd-button-md-typography-text-decoration, none);--sd-button-label-min-width:var(--sd-button-label-md-min-width, auto);--sd-button-icon-only-size:var(--sd-button-icon-only-md-width, var(--sd-button-height));line-height:26px}.sd-button--lg{--sd-button-height:var(--sd-button-lg-height, 62px);--sd-button-padding-x:var(--sd-button-lg-padding-x, 28px);--sd-button-gap:var(--sd-button-lg-gap, 12px);--sd-button-font-family:var(--sd-button-lg-typography-font-family, inherit);--sd-button-font-size:var(--sd-button-lg-typography-font-size, 18px);--sd-button-font-weight:var(--sd-button-lg-typography-font-weight, 500);--sd-button-text-decoration:var(--sd-button-lg-typography-text-decoration, none);--sd-button-label-min-width:var(--sd-button-label-lg-min-width, auto);--sd-button-icon-only-size:var(--sd-button-icon-only-lg-width, var(--sd-button-height));line-height:30px}.sd-button--has-label{--sd-button-min-width:var(--sd-button-label-min-width, auto)}.sd-button--primary{background-color:var(--button-color);color:white;transition:filter 0.2s ease}.sd-button--primary::before{content:"";position:absolute;inset:0;background:#000000;opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--primary:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.25}.sd-button--outline{background:white;border:var(--sd-button-border-width-default, 1px) solid var(--button-color);color:var(--button-color)}.sd-button--outline::before{content:"";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--outline:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--outline .sd-button__content{position:relative;z-index:1}.sd-button--ghost{background-color:transparent;color:var(--button-color);border-color:transparent}.sd-button--ghost::before{content:"";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--ghost:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--ghost .sd-button__content{position:relative;z-index:1}.sd-button--disabled{border:var(--sd-button-border-width-default, 1px) solid var(--sd-button-border-disabled, #CCCCCC);background:var(--sd-button-bg-disabled, #E1E1E1);color:var(--sd-button-content-disabled, #888888);cursor:not-allowed !important}.sd-button--icon-only{padding:0;width:var(--sd-button-icon-only-size, var(--sd-button-height));min-width:var(--sd-button-icon-only-size, var(--sd-button-height));height:var(--sd-button-icon-only-size, var(--sd-button-height))}.sd-button--no-hover:hover::before{opacity:0 !important}.sd-button .sd-button__content{display:inline-flex;align-items:center;justify-content:center;gap:var(--sd-button-gap);z-index:1;font-weight:inherit}`;
 
@@ -5599,6 +5694,290 @@ class SdButton {
     }; }
 }
 
+const BUTTON_FOCUS_RING_COLOR = '#0075FF';
+const PRESET_DEFAULT_COLORS = {
+    primary: buttonTokens.brand.strong.bg.default,
+    secondary: buttonTokens.brand.subtle.bg.default,
+    primary_outline: buttonTokens.brand.outline.bg.default,
+    neutral: buttonTokens.neutral.subtle.bg.default,
+    neutral_outline: buttonTokens.neutral.outline.bg.default,
+    danger: buttonTokens.danger.strong.bg.default,
+    danger_outline: buttonTokens.danger.outline.bg.default,
+};
+const BUTTON_CONFIG = {
+    primary_xs: {
+        variant: 'primary',
+        size: 'xs',
+        color: PRESET_DEFAULT_COLORS.primary,
+    },
+    secondary_xs: {
+        variant: 'primary',
+        size: 'xs',
+        color: PRESET_DEFAULT_COLORS.secondary,
+    },
+    primary_outline_xs: {
+        variant: 'outline',
+        size: 'xs',
+        color: PRESET_DEFAULT_COLORS.primary_outline,
+    },
+    neutral_xs: {
+        variant: 'primary',
+        size: 'xs',
+        color: PRESET_DEFAULT_COLORS.neutral,
+    },
+    neutral_outline_xs: {
+        variant: 'outline',
+        size: 'xs',
+        color: PRESET_DEFAULT_COLORS.neutral_outline,
+    },
+    danger_xs: {
+        variant: 'primary',
+        size: 'xs',
+        color: PRESET_DEFAULT_COLORS.danger,
+    },
+    danger_outline_xs: {
+        variant: 'outline',
+        size: 'xs',
+        color: PRESET_DEFAULT_COLORS.danger_outline,
+    },
+    primary_sm: {
+        variant: 'primary',
+        size: 'sm',
+        color: PRESET_DEFAULT_COLORS.primary,
+    },
+    secondary_sm: {
+        variant: 'primary',
+        size: 'sm',
+        color: PRESET_DEFAULT_COLORS.secondary,
+    },
+    primary_outline_sm: {
+        variant: 'outline',
+        size: 'sm',
+        color: PRESET_DEFAULT_COLORS.primary_outline,
+    },
+    neutral_sm: {
+        variant: 'primary',
+        size: 'sm',
+        color: PRESET_DEFAULT_COLORS.neutral,
+    },
+    neutral_outline_sm: {
+        variant: 'outline',
+        size: 'sm',
+        color: PRESET_DEFAULT_COLORS.neutral_outline,
+    },
+    danger_sm: {
+        variant: 'primary',
+        size: 'sm',
+        color: PRESET_DEFAULT_COLORS.danger,
+    },
+    danger_outline_sm: {
+        variant: 'outline',
+        size: 'sm',
+        color: PRESET_DEFAULT_COLORS.danger_outline,
+    },
+    primary_md: {
+        variant: 'primary',
+        size: 'md',
+        color: PRESET_DEFAULT_COLORS.primary,
+    },
+    secondary_md: {
+        variant: 'primary',
+        size: 'md',
+        color: PRESET_DEFAULT_COLORS.secondary,
+    },
+    primary_outline_md: {
+        variant: 'outline',
+        size: 'md',
+        color: PRESET_DEFAULT_COLORS.primary_outline,
+    },
+    neutral_md: {
+        variant: 'primary',
+        size: 'md',
+        color: PRESET_DEFAULT_COLORS.neutral,
+    },
+    neutral_outline_md: {
+        variant: 'outline',
+        size: 'md',
+        color: PRESET_DEFAULT_COLORS.neutral_outline,
+    },
+    danger_md: {
+        variant: 'primary',
+        size: 'md',
+        color: PRESET_DEFAULT_COLORS.danger,
+    },
+    danger_outline_md: {
+        variant: 'outline',
+        size: 'md',
+        color: PRESET_DEFAULT_COLORS.danger_outline,
+    },
+    primary_lg: {
+        variant: 'primary',
+        size: 'lg',
+        color: PRESET_DEFAULT_COLORS.primary,
+    },
+    secondary_lg: {
+        variant: 'primary',
+        size: 'lg',
+        color: PRESET_DEFAULT_COLORS.secondary,
+    },
+    primary_outline_lg: {
+        variant: 'outline',
+        size: 'lg',
+        color: PRESET_DEFAULT_COLORS.primary_outline,
+    },
+    neutral_lg: {
+        variant: 'primary',
+        size: 'lg',
+        color: PRESET_DEFAULT_COLORS.neutral,
+    },
+    neutral_outline_lg: {
+        variant: 'outline',
+        size: 'lg',
+        color: PRESET_DEFAULT_COLORS.neutral_outline,
+    },
+    danger_lg: {
+        variant: 'primary',
+        size: 'lg',
+        color: PRESET_DEFAULT_COLORS.danger,
+    },
+    danger_outline_lg: {
+        variant: 'outline',
+        size: 'lg',
+        color: PRESET_DEFAULT_COLORS.danger_outline,
+    },
+};
+const BUTTON_ICON_SIZES = {
+    xs: Number(buttonTokens.size.xs.icon),
+    sm: Number(buttonTokens.size.sm.icon),
+    md: Number(buttonTokens.size.md.icon),
+    lg: Number(buttonTokens.size.lg.icon),
+};
+const PRESET_HOVER_BACKGROUNDS$1 = {
+    primary: buttonTokens.brand.strong.bg.hover,
+    secondary: buttonTokens.brand.subtle.bg.hover,
+    primary_outline: buttonTokens.brand.outline.bg.hover,
+    neutral: buttonTokens.neutral.subtle.bg.hover,
+    neutral_outline: buttonTokens.neutral.outline.bg.hover,
+    danger: buttonTokens.danger.strong.bg.hover,
+    danger_outline: buttonTokens.danger.outline.bg.hover,
+};
+const PRESET_CONTENT_COLORS$1 = {
+    primary: buttonTokens.brand.strong.content,
+    secondary: buttonTokens.brand.subtle.content,
+    primary_outline: buttonTokens.brand.outline.content,
+    neutral: buttonTokens.neutral.subtle.content,
+    neutral_outline: buttonTokens.neutral.outline.content,
+    danger: buttonTokens.danger.strong.content,
+    danger_outline: buttonTokens.danger.outline.content,
+};
+const PRESET_BORDER_COLORS$1 = {
+    primary: 'transparent',
+    secondary: 'transparent',
+    primary_outline: buttonTokens.brand.outline.border,
+    neutral: 'transparent',
+    neutral_outline: buttonTokens.neutral.outline.border,
+    danger: 'transparent',
+    danger_outline: buttonTokens.danger.outline.border,
+};
+const DISABLED_CONTENT = buttonTokens.content.disabled;
+const SIZE_SUFFIX_PATTERN = /_(xs|sm|md|lg)$/;
+const isButtonV2Name = (value) => value in BUTTON_CONFIG;
+const getPresetName = (value) => value.replace(SIZE_SUFFIX_PATTERN, '');
+
+const sdButtonV2Css = () => `sd-button-v2{display:inline-flex;width:fit-content;height:fit-content}.sd-button-v2{--sd-button-v2-height:34px;--sd-button-v2-padding-x:20px;--sd-button-v2-gap:8px;--sd-button-v2-font-family:inherit;--sd-button-v2-font-size:16px;--sd-button-v2-font-weight:500;--sd-button-v2-text-decoration:none;--sd-button-v2-label-min-width:auto;--sd-button-v2-icon-only-size:var(--sd-button-v2-height);--sd-button-v2-bg:#025497;--sd-button-v2-bg-hover:#004177;--sd-button-v2-border:transparent;--sd-button-v2-content:#ffffff;display:inline-flex;align-items:center;justify-content:center;min-height:var(--sd-button-v2-height);min-width:var(--sd-button-v2-min-width, auto);padding:0 var(--sd-button-v2-padding-x);border:var(--sd-button-border-width-default, 1px) solid var(--sd-button-v2-border);border-radius:var(--sd-button-radius-default, 4px);background:var(--sd-button-v2-bg);color:var(--sd-button-v2-content);cursor:pointer;box-sizing:border-box;font-family:var(--sd-button-v2-font-family);font-size:var(--sd-button-v2-font-size);font-weight:var(--sd-button-v2-font-weight);line-height:1;text-decoration:var(--sd-button-v2-text-decoration);transition:background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;white-space:nowrap;-webkit-user-select:none;user-select:none}.sd-button-v2:hover:not(.sd-button-v2--disabled){background:var(--sd-button-v2-bg-hover)}.sd-button-v2:focus-visible{outline:0;box-shadow:0 0 0 2px var(--sd-button-v2-accent)}.sd-button-v2--xs{--sd-button-v2-height:var(--sd-button-xs-height, 24px);--sd-button-v2-padding-x:var(--sd-button-xs-padding-x, 8px);--sd-button-v2-gap:var(--sd-button-xs-gap, 4px);--sd-button-v2-font-family:var(--sd-button-xs-typography-font-family, inherit);--sd-button-v2-font-size:var(--sd-button-xs-typography-font-size, 12px);--sd-button-v2-font-weight:var(--sd-button-xs-typography-font-weight, 500);--sd-button-v2-text-decoration:var(--sd-button-xs-typography-text-decoration, none);--sd-button-v2-label-min-width:var(--sd-button-label-xs-min-width, auto);--sd-button-v2-icon-only-size:var(--sd-button-icon-only-xs-width, var(--sd-button-v2-height))}.sd-button-v2--sm{--sd-button-v2-height:var(--sd-button-sm-height, 28px);--sd-button-v2-padding-x:var(--sd-button-sm-padding-x, 12px);--sd-button-v2-gap:var(--sd-button-sm-gap, 6px);--sd-button-v2-font-family:var(--sd-button-sm-typography-font-family, inherit);--sd-button-v2-font-size:var(--sd-button-sm-typography-font-size, 12px);--sd-button-v2-font-weight:var(--sd-button-sm-typography-font-weight, 500);--sd-button-v2-text-decoration:var(--sd-button-sm-typography-text-decoration, none);--sd-button-v2-label-min-width:var(--sd-button-label-sm-min-width, auto);--sd-button-v2-icon-only-size:var(--sd-button-icon-only-sm-width, var(--sd-button-v2-height))}.sd-button-v2--md{--sd-button-v2-height:var(--sd-button-md-height, 34px);--sd-button-v2-padding-x:var(--sd-button-md-padding-x, 20px);--sd-button-v2-gap:var(--sd-button-md-gap, 8px);--sd-button-v2-font-family:var(--sd-button-md-typography-font-family, inherit);--sd-button-v2-font-size:var(--sd-button-md-typography-font-size, 16px);--sd-button-v2-font-weight:var(--sd-button-md-typography-font-weight, 500);--sd-button-v2-text-decoration:var(--sd-button-md-typography-text-decoration, none);--sd-button-v2-label-min-width:var(--sd-button-label-md-min-width, auto);--sd-button-v2-icon-only-size:var(--sd-button-icon-only-md-width, var(--sd-button-v2-height))}.sd-button-v2--lg{--sd-button-v2-height:var(--sd-button-lg-height, 62px);--sd-button-v2-padding-x:var(--sd-button-lg-padding-x, 28px);--sd-button-v2-gap:var(--sd-button-lg-gap, 12px);--sd-button-v2-font-family:var(--sd-button-lg-typography-font-family, inherit);--sd-button-v2-font-size:var(--sd-button-lg-typography-font-size, 18px);--sd-button-v2-font-weight:var(--sd-button-lg-typography-font-weight, 500);--sd-button-v2-text-decoration:var(--sd-button-lg-typography-text-decoration, none);--sd-button-v2-label-min-width:var(--sd-button-label-lg-min-width, auto);--sd-button-v2-icon-only-size:var(--sd-button-icon-only-lg-width, var(--sd-button-v2-height))}.sd-button-v2--has-label{--sd-button-v2-min-width:var(--sd-button-v2-label-min-width, auto)}.sd-button-v2--icon-only{width:var(--sd-button-v2-icon-only-size, var(--sd-button-v2-height));min-width:var(--sd-button-v2-icon-only-size, var(--sd-button-v2-height));height:var(--sd-button-v2-icon-only-size, var(--sd-button-v2-height));padding:0}.sd-button-v2--icon-only .sd-button-v2__content{gap:0}.sd-button-v2--disabled{border-color:var(--sd-button-border-disabled, #CCCCCC);background:var(--sd-button-bg-disabled, #E1E1E1);color:var(--sd-button-content-disabled, #888888);cursor:not-allowed}.sd-button-v2 .sd-button-v2__content{display:inline-flex;align-items:center;justify-content:center;gap:var(--sd-button-v2-gap)}.sd-button-v2 .sd-button-v2__label{font:inherit}`;
+
+class SdButtonV2 {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.click = createEvent(this, "sdClick");
+    }
+    name = 'primary_sm';
+    label = '';
+    icon;
+    ariaLabel = '';
+    disabled = false;
+    type = 'button';
+    click;
+    hasWarnedMissingAriaLabel = false;
+    handleClick = (event) => {
+        if (this.disabled) {
+            event.preventDefault();
+            return;
+        }
+        this.click.emit(event);
+    };
+    get resolvedConfig() {
+        if (!isButtonV2Name(this.name)) {
+            throw new Error(`Invalid sd-button-v2 name: ${this.name}`);
+        }
+        const config = BUTTON_CONFIG[this.name];
+        const preset = getPresetName(this.name);
+        return {
+            config,
+            preset,
+        };
+    }
+    getButtonClasses(preset, size, hasLabel, iconOnly) {
+        const classes = ['sd-button-v2', `sd-button-v2--${preset}`, `sd-button-v2--${size}`];
+        if (this.disabled) {
+            classes.push('sd-button-v2--disabled');
+        }
+        if (iconOnly) {
+            classes.push('sd-button-v2--icon-only');
+        }
+        if (hasLabel) {
+            classes.push('sd-button-v2--has-label');
+        }
+        return classes.join(' ');
+    }
+    componentWillRender() {
+        this.warnIfMissingAriaLabel();
+    }
+    warnIfMissingAriaLabel() {
+        const iconOnly = !this.label && Boolean(this.icon);
+        const missingAriaLabel = iconOnly && !this.ariaLabel.trim();
+        if (!missingAriaLabel) {
+            this.hasWarnedMissingAriaLabel = false;
+            return;
+        }
+        if (this.hasWarnedMissingAriaLabel) {
+            return;
+        }
+        console.warn(`[sd-button-v2] icon-only buttons require \`ariaLabel\`. Received name="${this.name}" icon="${this.icon}".`);
+        this.hasWarnedMissingAriaLabel = true;
+    }
+    render() {
+        const { config, preset } = this.resolvedConfig;
+        const hasLabel = Boolean(this.label);
+        const iconOnly = !this.label && Boolean(this.icon);
+        const accessibleName = iconOnly && this.ariaLabel.trim() ? this.ariaLabel : undefined;
+        const iconColor = this.disabled ? DISABLED_CONTENT : PRESET_CONTENT_COLORS$1[preset];
+        return (hAsync("button", { key: 'f1c9355390568831fa0c4c7289e62e701e0174c2', class: this.getButtonClasses(preset, config.size, hasLabel, iconOnly), type: this.type, disabled: this.disabled, "aria-label": accessibleName, style: {
+                '--sd-button-v2-bg': config.variant === 'primary' ? config.color : '#FFFFFF',
+                '--sd-button-v2-bg-hover': PRESET_HOVER_BACKGROUNDS$1[preset],
+                '--sd-button-v2-border': PRESET_BORDER_COLORS$1[preset],
+                '--sd-button-v2-content': PRESET_CONTENT_COLORS$1[preset],
+                '--sd-button-v2-accent': BUTTON_FOCUS_RING_COLOR,
+            }, onClick: this.handleClick }, hAsync("span", { key: '2845fbd556f326db93a27b802faa96ec60345f63', class: "sd-button-v2__content" }, this.icon && (hAsync("sd-icon", { key: '5d90b15cbcd0c1cea10a5dc251fd13e6a0099fb0', class: "sd-button-v2__icon", name: this.icon, size: BUTTON_ICON_SIZES[config.size], color: iconColor })), this.label && hAsync("span", { key: '76facbfe83402fd0e5b17c1b7d4132665d8aaf5b', class: "sd-button-v2__label" }, this.label))));
+    }
+    static get style() { return sdButtonV2Css(); }
+    static get cmpMeta() { return {
+        "$flags$": 512,
+        "$tagName$": "sd-button-v2",
+        "$members$": {
+            "name": [1],
+            "label": [1],
+            "icon": [1],
+            "ariaLabel": [1, "aria-label"],
+            "disabled": [4],
+            "type": [1]
+        },
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": []
+    }; }
+}
+
 const sdCardCss = () => `sd-card{display:block;height:fit-content}sd-card .sd-card{border-radius:8px;background:white}sd-card .sd-card--bordered{border:1px solid #E1E1E1}`;
 
 class SdCard {
@@ -5608,7 +5987,7 @@ class SdCard {
     bordered = false;
     sdClass = '';
     render() {
-        return (hAsync(Fragment, { key: '155504b50cb1c21fc1f847af8a9e8b685f7881ef' }, hAsync("div", { key: 'c461e3e40da44586da5e02ad508bf59942a9e82a', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, hAsync("slot", { key: '0c0ee023155c08c565c3496c44699a900666b084' }))));
+        return (hAsync(Fragment, { key: 'a4f5635186614df68acf04c502f804c9f0c77df5' }, hAsync("div", { key: '99af2c33f69d069e108f7f122a6e7762ea918276', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, hAsync("slot", { key: '287c27708b9b80a9f04bfff87abdb65022762a6d' }))));
     }
     static get style() { return sdCardCss(); }
     static get cmpMeta() { return {
@@ -5924,7 +6303,7 @@ class SdDatePicker {
         this.isOpen = false;
     };
     render() {
-        return (hAsync("div", { key: 'bb17d32f08d998e599c90cf1a7a35b17e19d3dc4', class: { 'sd-date-picker': true, 'sd-date-picker--disabled': this.disabled } }, hAsync("sd-input", { key: 'ae028d5999a8df40a83b0d77d2dd5c2e0d0d8eb0', ref: el => (this.inputEl = el), value: this.value, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-picker__input", onClick: () => this.openMenu() }, hAsync("sd-icon", { key: 'fbb954703d19161ab4507696a21278d5b4962b25', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (hAsync("sd-portal", { key: 'a335d5d317718e30be14fdb4aa1a63cb1347b929', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, hAsync("div", { key: '38deef7127db10c91a51b8d6cb017d85fce25888', class: "sd-date-picker__menu" }, hAsync("div", { key: 'f2ef8eb33086103df65b434360ecc1aac2949bf9', class: "sd-date-picker__header" }, hAsync("div", { key: '8b949551a157de1e2ded7f1de621ccacd136126e', class: "year-nav" }, hAsync("button", { key: 'b1bbd712094885223c21f030c32914d14f3904c2', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, hAsync("sd-icon", { key: '7bb6f5f216d02cde59eff87fcaebc32eccbaac25', name: "arrowLeft", size: "12", color: "#CCCCCC" })), hAsync("span", { key: '645c12556fe1b9f1d1c8f7c4cfe73c3b65ad7431', class: "year-nav__current" }, this.currentYear), hAsync("button", { key: 'f6cb58c23effd1aa0566aaacf41170482f03df51', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, hAsync("sd-icon", { key: 'e92ef17b8d50e5115a159d2dd984e738a920f065', name: "arrowRight", size: "12", color: "#CCCCCC" }))), hAsync("div", { key: '73018a9ca04929f4be017631e8e49a73cef71855', class: "month-nav" }, hAsync("button", { key: '0983ca35486b8ad29c09740848b4288b602d0cd9', type: "button", name: "prev-month", title: "Previous       ", onClick: () => this.handleUpdateMonth('prev') }, hAsync("sd-icon", { key: '2c9257564786287f825c83391f3e05745c23cf9a', name: "arrowLeft", size: "12", color: "#CCCCCC" })), hAsync("span", { key: '0b9e048eeea62c452671b74db468aa5587e8ddbf', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), hAsync("button", { key: '3ead15a341d5e361e7fb9b1cb2842e5a38b0e03c', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, hAsync("sd-icon", { key: 'a3dbd8606dd51f72f1c315f2eea7ff089a95e6fa', name: "arrowRight", size: "12", color: "#CCCCCC" })))), hAsync("div", { key: '6bbadc79157ae64bf492a965b78d014dcd968ea6', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (hAsync("div", { key: day, class: "day" }, day)))), hAsync("div", { key: '972c00769b40eff8015b68e0a9479a6c7c6009db', class: "sd-date-picker__body" }, [
+        return (hAsync("div", { key: '97baf5202e2702032b5d9035c5b07b3dafa658fa', class: { 'sd-date-picker': true, 'sd-date-picker--disabled': this.disabled } }, hAsync("sd-input", { key: 'bba605148eec6f88829bcfff21cb1ac6efae815d', ref: el => (this.inputEl = el), value: this.value, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-picker__input", onClick: () => this.openMenu() }, hAsync("sd-icon", { key: '4c927154407efd9319b56327d83ee2012206b216', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (hAsync("sd-portal", { key: 'edc06ceeead0cab9ee3b2394097838e03aeb8703', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, hAsync("div", { key: 'cb71ba6e5517afa0e1e0477599449101b21ece65', class: "sd-date-picker__menu" }, hAsync("div", { key: 'bdace5b8e99cbd4271ba76dace05f2af4d059d37', class: "sd-date-picker__header" }, hAsync("div", { key: '3fc557c6119af299b813610e9b6ef6cd9104a302', class: "year-nav" }, hAsync("button", { key: '82b7928c460b6bb3a163cf576977d4694fa63fdc', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, hAsync("sd-icon", { key: 'b0eda3985494f99de52c85714b13ef45b90ef9db', name: "arrowLeft", size: "12", color: "#CCCCCC" })), hAsync("span", { key: '24245489b718b3fb15603e9da628651b1af8b752', class: "year-nav__current" }, this.currentYear), hAsync("button", { key: '458570d7e08af35d2c467398b89a9cb9c200141f', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, hAsync("sd-icon", { key: '5f01f94d7499b0c79f2936249a295b92dfa1476d', name: "arrowRight", size: "12", color: "#CCCCCC" }))), hAsync("div", { key: '5d1551a4149998430fd5c0262000c21e8de76a9b', class: "month-nav" }, hAsync("button", { key: '0690296a789d67e5dc1b1ce7b882a261f1724a46', type: "button", name: "prev-month", title: "Previous       ", onClick: () => this.handleUpdateMonth('prev') }, hAsync("sd-icon", { key: '3ed6809573e28c9a40a4f26331669ce66245c076', name: "arrowLeft", size: "12", color: "#CCCCCC" })), hAsync("span", { key: '5ae4ed6249269ba5a1d24ab986ec7c371fa356f4', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), hAsync("button", { key: '7bada1fba8abf6e483969cc5388cd333b03e8e19', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, hAsync("sd-icon", { key: '559eec3f67ff8b47f601928d5bb9ca2064cb1c6a', name: "arrowRight", size: "12", color: "#CCCCCC" })))), hAsync("div", { key: '5191a48970a3e9f044eaf4851e2e5d507763fe71', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (hAsync("div", { key: day, class: "day" }, day)))), hAsync("div", { key: 'c124a70d9e1c3dd73c63c8ef3fd513a9cb6c24c8', class: "sd-date-picker__body" }, [
             ...this.calendar.prevMonthDays,
             ...this.calendar.days,
             ...this.calendar.afterMonthDays,
@@ -6116,10 +6495,10 @@ class SdDateRangePicker {
         this.setHoverDate(hoverDate);
     }
     render() {
-        return (hAsync("div", { key: '96cd4e99ae976517e7b24c5ff3046af976adc5cb', class: {
+        return (hAsync("div", { key: 'e0eaf7463e91d3afed6ff977deb20d122e837fd4', class: {
                 'sd-date-range-picker': true,
                 'sd-date-range-picker--disabled': this.disabled,
-            } }, hAsync("sd-input", { key: 'a84838a1a84d990b289f0b753ccf3e2f45da4770', ref: el => (this.inputEl = el), value: !!this.dateRange[0] ? `${this.dateRange[0]} ~ ${this.dateRange[1]}` : '', label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-range-picker__input", onClick: () => this.openMenu() }, hAsync("sd-icon", { key: 'd926c672dcf457a68ebe644b32c90a03ba29b175', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (hAsync("sd-portal", { key: '0af519c7ac2ade00972e23b9ecb0344989d87f51', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.closeMenu }, hAsync("div", { key: 'd9109e573215092c6b386ae27ac7377c4347df4c', class: "sd-date-range-picker__menu" }, hAsync("div", { key: 'ca4743a26ed0571bc3b63218a32a113e50dbd81a', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, hAsync("button", { key: '6f0fe1ede6d171e749a241fbeec32056250709b9', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, hAsync("sd-icon", { key: '821526a069a845f271b0e5db607f747efe4e610c', name: "arrowLeft", size: "12", color: "#CCCCCC" })), hAsync("div", { key: 'e9402009c8b034953d7ff4be5a4eea64d7fed21d', class: "header-label" }, this.prevYear), hAsync("button", { key: 'b752631ab64e32a4a39c13898cc3db5e25897c4b', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, hAsync("sd-icon", { key: '62c6e0004ff1a0d8f260e11b9d17ea7ccca942ee', name: "arrowRight", size: "12", color: "#CCCCCC" }))), hAsync("div", { key: '3a05a7e02664be8d9dfb85d0bada03a2d352af12', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index) => (hAsync(Fragment, null, index === 1 && hAsync("div", { class: "separator" }), hAsync("div", { key: index, class: "calendar-container" }, hAsync("div", { class: "calendar-header" }, hAsync("button", { type: "button", name: "month", title: "Month", class: index === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index === 0 ? 'prev' : 'next') }, hAsync("sd-icon", { name: index === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index === 0
+            } }, hAsync("sd-input", { key: '301a5133f5a6bcb5bd66fed546528808a96b822a', ref: el => (this.inputEl = el), value: !!this.dateRange[0] ? `${this.dateRange[0]} ~ ${this.dateRange[1]}` : '', label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-range-picker__input", onClick: () => this.openMenu() }, hAsync("sd-icon", { key: 'ef7e9e74957d994a2e7a374f849ef1a5f03fe501', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (hAsync("sd-portal", { key: '0eb793bbc67d0da80bfdbb9d5e8c89857a9bd13d', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.closeMenu }, hAsync("div", { key: '6e7f6d3c0ba5d60cec929ff87f2b16c6fd1123ae', class: "sd-date-range-picker__menu" }, hAsync("div", { key: 'bbc3b2117e226e86ad18e90d9549dfa33b8faa18', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, hAsync("button", { key: 'e5246cbd684096c113a9568d42a4a86555fd55b0', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, hAsync("sd-icon", { key: '84281ab72847d7fe9352be583465b810854f2cfb', name: "arrowLeft", size: "12", color: "#CCCCCC" })), hAsync("div", { key: '9d9394eea9a82bdcdc7918af50e98909610ab5e2', class: "header-label" }, this.prevYear), hAsync("button", { key: '6f05a7477293b129561b1bdaa5fca46224f41af9', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, hAsync("sd-icon", { key: '746bc40e5d0bb72e9aa712012d411f20b459b80a', name: "arrowRight", size: "12", color: "#CCCCCC" }))), hAsync("div", { key: '96a2c1674152f5ee31b29734b1471940b4d0f4b4', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index) => (hAsync(Fragment, null, index === 1 && hAsync("div", { class: "separator" }), hAsync("div", { key: index, class: "calendar-container" }, hAsync("div", { class: "calendar-header" }, hAsync("button", { type: "button", name: "month", title: "Month", class: index === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index === 0 ? 'prev' : 'next') }, hAsync("sd-icon", { name: index === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index === 0
             ? `${this.prevYear}.${String(this.prevMonth).padStart(2, '0')}`
             : `${this.nextYear}.${String(this.nextMonth).padStart(2, '0')}`), hAsync("div", { class: "calendar-days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (hAsync("sd-date-box", { key: day, date: day, disabled: true, class: "day" })))), hAsync("div", { class: "calendar-body mt-12pxr grid grid-cols-7 gap-y-8pxr" }, [...calendar.prevMonthDays, ...calendar.days, ...calendar.afterMonthDays].map((day, idx) => (hAsync("sd-date-box", { key: `prev${day}_${idx}`, date: !day ? '' : Number(day), selected: this.dateRange.some(date => date === this.formatDate(index, Number(day))), type: this.getDateBoxType(this.formatDate(index, Number(day))), isToday: today === this.formatDate(index, Number(day)), disabled: !day ? true : this.isDisabledDate(this.formatDate(index, Number(day))), inRange: this.isDateInRange(this.formatDate(index, Number(day))), isStartDate: this.dateRange[0] === this.formatDate(index, Number(day)), isEndDate: this.dateRange[1] === this.formatDate(index, Number(day)), onSdClick: () => this.handleDateClick(index, Number(day)), onSdMouseOver: () => this.handleDateHover(index, Number(day)) }))))))))))))));
     }
@@ -6151,6 +6530,377 @@ class SdDateRangePicker {
     }; }
 }
 
+class DropdownManager {
+    static instance;
+    activeDropdowns = new Set();
+    static getInstance() {
+        if (!DropdownManager.instance) {
+            DropdownManager.instance = new DropdownManager();
+        }
+        return DropdownManager.instance;
+    }
+    register(component) {
+        this.activeDropdowns.add(component);
+    }
+    unregister(component) {
+        this.activeDropdowns.delete(component);
+    }
+    openDropdown(targetComponent) {
+        // 다른 모든 드롭다운 닫기
+        this.activeDropdowns.forEach(component => {
+            if (component !== targetComponent && component.isOpen) {
+                component.closeDropdown();
+            }
+        });
+    }
+    closeAllDropdowns() {
+        this.activeDropdowns.forEach(component => {
+            if (component.isOpen) {
+                component.closeDropdown();
+            }
+        });
+    }
+}
+const dropdownManager = DropdownManager.getInstance();
+
+// 여러 select를 동시에 사용할때에 이벤트 리스너의 등록이 충돌나는 문제를 해결하기 위한 Base class
+// 각 드롭다운 컴포넌트는 이 클래스를 상속 및 구현 필요
+// 기본적으로 click, keydown 추상 이벤트를 구현해야하고
+// isOpen가 true일때에만 이벤트 등록 그외에는 이벤트 클리닝을 수행
+// 추후 필요한 이벤트는 이곳에 추가하여 추가 구현 후 사용
+// 별도로 드롭다운 전용의 Base class가 아닌 공통적으로 사용할 수 있는 Base class가 필요할지 검토 필요
+class BaseDropdownEvent {
+    documentClickHandler;
+    documentKeydownHandler;
+    // 컴포넌트 생명주기에서 호출할 메서드들
+    initializeEvent() {
+        dropdownManager.register(this);
+        this.initializeEventHandlers();
+    }
+    cleanupEvent() {
+        dropdownManager.unregister(this);
+        this.cleanup();
+    }
+    initializeEventHandlers() {
+        this.documentClickHandler = (event) => this.handleDocumentClick(event);
+        this.documentKeydownHandler = (event) => this.handleDocumentKeydown(event);
+    }
+    addGlobalEventListeners() {
+        if (this.documentClickHandler) {
+            document.addEventListener('click', this.documentClickHandler);
+        }
+        if (this.documentKeydownHandler) {
+            document.addEventListener('keydown', this.documentKeydownHandler);
+        }
+    }
+    removeGlobalEventListeners() {
+        if (this.documentClickHandler) {
+            document.removeEventListener('click', this.documentClickHandler);
+        }
+        if (this.documentKeydownHandler) {
+            document.removeEventListener('keydown', this.documentKeydownHandler);
+        }
+    }
+    onDropdownToggle(isOpen) {
+        if (isOpen && !this.disabled) {
+            dropdownManager.openDropdown(this);
+            this.addGlobalEventListeners();
+        }
+        else {
+            this.removeGlobalEventListeners();
+        }
+    }
+    cleanup() {
+        this.removeGlobalEventListeners();
+    }
+    closeDropdown() {
+        this.isOpen = false;
+    }
+}
+
+const color = {
+	bg: {
+		accent: {
+			"default": "#0075FF"}},
+	text: {
+		secondary: "#333333",
+		inverse: "#FFFFFF"
+	}};
+var systemTokens = {
+	color: color
+};
+
+const UNSUPPORTED_DROPDOWN_BUTTON_NAMES = new Set([
+    'neutral_xs',
+    'neutral_sm',
+    'neutral_md',
+]);
+const DROPDOWN_BUTTON_NAMES = Object.keys(BUTTON_CONFIG).filter((name) => !name.endsWith('_lg') && !UNSUPPORTED_DROPDOWN_BUTTON_NAMES.has(name));
+const DROPDOWN_BUTTON_CONFIG = Object.fromEntries(DROPDOWN_BUTTON_NAMES.map(name => [name, BUTTON_CONFIG[name]]));
+const DROPDOWN_BUTTON_MIN_WIDTHS = {
+    xs: buttonTokens.dropdown.xs.minWidth,
+    sm: buttonTokens.dropdown.sm.minWidth,
+    md: buttonTokens.dropdown.md.minWidth,
+};
+const PRESET_HOVER_BACKGROUNDS = PRESET_HOVER_BACKGROUNDS$1;
+const PRESET_CONTENT_COLORS = PRESET_CONTENT_COLORS$1;
+const PRESET_BORDER_COLORS = PRESET_BORDER_COLORS$1;
+const PRESET_DIVIDER_COLORS = {
+    primary: buttonTokens.brand.strong.dropdown.divider,
+    secondary: buttonTokens.brand.subtle.dropdown.divider,
+    primary_outline: PRESET_BORDER_COLORS.primary_outline,
+    neutral: buttonTokens.neutral.outline.border,
+    neutral_outline: PRESET_BORDER_COLORS.neutral_outline,
+    danger: buttonTokens.danger.strong.dropdown.divider,
+    danger_outline: PRESET_BORDER_COLORS.danger_outline,
+};
+const MENU_ITEM_COLOR = systemTokens.color.text.secondary;
+const MENU_ITEM_ACTIVE_BACKGROUND = systemTokens.color.bg.accent.default;
+const MENU_ITEM_ACTIVE_COLOR = systemTokens.color.text.inverse;
+const PRESET_MENU_ITEM_COLORS = {
+    primary: MENU_ITEM_COLOR,
+    secondary: MENU_ITEM_COLOR,
+    primary_outline: MENU_ITEM_COLOR,
+    neutral: MENU_ITEM_COLOR,
+    neutral_outline: MENU_ITEM_COLOR,
+    danger: MENU_ITEM_COLOR,
+    danger_outline: MENU_ITEM_COLOR,
+};
+const PRESET_MENU_ITEM_ACTIVE_BACKGROUNDS = {
+    primary: MENU_ITEM_ACTIVE_BACKGROUND,
+    secondary: MENU_ITEM_ACTIVE_BACKGROUND,
+    primary_outline: MENU_ITEM_ACTIVE_BACKGROUND,
+    neutral: MENU_ITEM_ACTIVE_BACKGROUND,
+    neutral_outline: MENU_ITEM_ACTIVE_BACKGROUND,
+    danger: MENU_ITEM_ACTIVE_BACKGROUND,
+    danger_outline: MENU_ITEM_ACTIVE_BACKGROUND,
+};
+const PRESET_MENU_ITEM_ACTIVE_COLORS = {
+    primary: MENU_ITEM_ACTIVE_COLOR,
+    secondary: MENU_ITEM_ACTIVE_COLOR,
+    primary_outline: MENU_ITEM_ACTIVE_COLOR,
+    neutral: MENU_ITEM_ACTIVE_COLOR,
+    neutral_outline: MENU_ITEM_ACTIVE_COLOR,
+    danger: MENU_ITEM_ACTIVE_COLOR,
+    danger_outline: MENU_ITEM_ACTIVE_COLOR,
+};
+const DROPDOWN_DISABLED_BACKGROUND = buttonTokens.bg.disabled;
+const DROPDOWN_DISABLED_CONTENT = buttonTokens.content.disabled;
+const DROPDOWN_DISABLED_BORDER = buttonTokens.border.disabled;
+const isDropdownButtonName = (value) => value in DROPDOWN_BUTTON_CONFIG;
+const getDropdownButtonPreset = (value) => getPresetName(value);
+
+const sdDropdownButtonCss = () => `sd-dropdown-button{display:inline-flex;width:fit-content;height:fit-content}.sd-dropdown-button{display:inline-flex;position:relative}.sd-dropdown-button__trigger{--sd-dropdown-button-height:var(--sd-button-md-height, 34px);--sd-dropdown-button-padding-x:var(--sd-button-md-padding-x, 20px);--sd-dropdown-button-gap:var(--sd-button-md-gap, 8px);--sd-dropdown-button-font-family:var(--sd-button-md-typography-font-family, inherit);--sd-dropdown-button-font-size:var(--sd-button-md-typography-font-size, 12px);--sd-dropdown-button-font-weight:var(--sd-button-md-typography-font-weight, 500);--sd-dropdown-button-text-decoration:var(--sd-button-md-typography-text-decoration, none);--sd-dropdown-button-bg:#025497;--sd-dropdown-button-bg-hover:#004177;--sd-dropdown-button-border:transparent;--sd-dropdown-button-content:#ffffff;--sd-dropdown-button-divider:#006ac1;--sd-dropdown-button-accent:#006ac1;--sd-dropdown-button-min-width:106px;--sd-dropdown-button-disabled-bg:var(--sd-button-bg-disabled, $grey_30);--sd-dropdown-button-disabled-content:var(--sd-button-content-disabled, $grey_65);--sd-dropdown-button-disabled-border:var(--sd-button-border-disabled, $grey_45);display:inline-flex;align-items:stretch;justify-content:space-between;min-width:var(--sd-dropdown-button-min-width);min-height:var(--sd-dropdown-button-height);padding:0;border:var(--sd-button-border-width-default, 1px) solid var(--sd-dropdown-button-border);border-radius:var(--sd-button-radius-default, 4px);background:var(--sd-dropdown-button-bg);color:var(--sd-dropdown-button-content);cursor:pointer;box-sizing:border-box;font-family:var(--sd-dropdown-button-font-family);font-size:var(--sd-dropdown-button-font-size);font-weight:var(--sd-dropdown-button-font-weight);line-height:1;text-decoration:var(--sd-dropdown-button-text-decoration);transition:background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;white-space:nowrap}.sd-dropdown-button__trigger:hover:not(.sd-dropdown-button__trigger--disabled){background:var(--sd-dropdown-button-bg-hover)}.sd-dropdown-button__trigger:focus-visible{outline:0;box-shadow:0 0 0 2px var(--sd-dropdown-button-accent)}.sd-dropdown-button__trigger--xs{--sd-dropdown-button-height:var(--sd-button-xs-height, 24px);--sd-dropdown-button-padding-x:var(--sd-button-xs-padding-x, 8px);--sd-dropdown-button-gap:var(--sd-button-xs-gap, 4px);--sd-dropdown-button-font-family:var(--sd-button-xs-typography-font-family, inherit);--sd-dropdown-button-font-size:var(--sd-button-xs-typography-font-size, 12px);--sd-dropdown-button-font-weight:var(--sd-button-xs-typography-font-weight, 500);--sd-dropdown-button-text-decoration:var(--sd-button-xs-typography-text-decoration, none)}.sd-dropdown-button__trigger--sm{--sd-dropdown-button-height:var(--sd-button-sm-height, 28px);--sd-dropdown-button-padding-x:var(--sd-button-sm-padding-x, 12px);--sd-dropdown-button-gap:var(--sd-button-sm-gap, 6px);--sd-dropdown-button-font-family:var(--sd-button-sm-typography-font-family, inherit);--sd-dropdown-button-font-size:var(--sd-button-sm-typography-font-size, 12px);--sd-dropdown-button-font-weight:var(--sd-button-sm-typography-font-weight, 500);--sd-dropdown-button-text-decoration:var(--sd-button-sm-typography-text-decoration, none)}.sd-dropdown-button__trigger--md{--sd-dropdown-button-height:var(--sd-button-md-height, 34px);--sd-dropdown-button-padding-x:var(--sd-button-md-padding-x, 20px);--sd-dropdown-button-gap:var(--sd-button-md-gap, 8px);--sd-dropdown-button-font-family:var(--sd-button-md-typography-font-family, inherit);--sd-dropdown-button-font-size:var(--sd-button-md-typography-font-size, 16px);--sd-dropdown-button-font-weight:var(--sd-button-md-typography-font-weight, 500);--sd-dropdown-button-text-decoration:var(--sd-button-md-typography-text-decoration, none)}.sd-dropdown-button__trigger--disabled{border-color:var(--sd-dropdown-button-disabled-border);background:var(--sd-dropdown-button-disabled-bg);color:var(--sd-dropdown-button-disabled-content);cursor:not-allowed}.sd-dropdown-button__trigger--disabled .sd-dropdown-button__trigger-divider{background:var(--sd-dropdown-button-disabled-border)}.sd-dropdown-button__trigger-label,.sd-dropdown-button__trigger-icon{display:inline-flex;align-items:center;justify-content:center}.sd-dropdown-button__trigger-label{flex:1 1 auto;min-width:0;padding:0 var(--sd-dropdown-button-padding-x)}.sd-dropdown-button__trigger-divider{align-self:stretch;width:1px;height:auto;background:var(--sd-dropdown-button-divider);opacity:0.9}.sd-dropdown-button__trigger-icon{flex:0 0 auto;min-width:calc(var(--sd-dropdown-button-height) - 2px);padding:0 calc(var(--sd-dropdown-button-gap) + 2px)}.sd-dropdown-button__menu{display:grid;width:max-content;min-width:max-content;max-width:calc(100vw - 24px);padding:4px 0;border:0;border-radius:4px;background:#FFFFFF;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1019607843);box-sizing:border-box;overflow:hidden}.sd-dropdown-button__menu-item{display:inline-flex;align-items:center;gap:8px;min-height:28px;width:100%;padding:0 12px;border:0;border-radius:0;background:transparent;color:var(--sd-dropdown-button-menu-item-color);cursor:pointer;box-sizing:border-box;font:inherit;text-align:left;transition:background-color 0.15s ease, color 0.15s ease}.sd-dropdown-button__menu-item--active{background:var(--sd-dropdown-button-menu-item-active-bg);color:var(--sd-dropdown-button-menu-item-active-color)}.sd-dropdown-button__menu-item--disabled{color:var(--sd-dropdown-button-disabled-content);cursor:not-allowed}.sd-dropdown-button__menu-item-icon{flex:0 0 auto}.sd-dropdown-button__menu-item-label{display:inline-flex;align-items:center;min-width:0;white-space:nowrap;font-size:12px}`;
+
+class SdDropdownButton extends BaseDropdownEvent {
+    constructor(hostRef) {
+        super();
+        registerInstance(this, hostRef);
+        this.click = createEvent(this, "sdClick");
+        this.dropDownShow = createEvent(this, "sdDropDownShow");
+    }
+    get el() { return getElement(this); }
+    name = 'primary_sm';
+    label = '';
+    items = [];
+    disabled = false;
+    isOpen = false;
+    itemIndex = -1;
+    triggerRef;
+    menuRef;
+    click;
+    dropDownShow;
+    handleOpenChange(isOpen) {
+        this.onDropdownToggle(isOpen);
+        this.dropDownShow.emit({ isOpen });
+        if (!isOpen) {
+            this.itemIndex = -1;
+        }
+    }
+    componentWillLoad() {
+        this.initializeEvent();
+    }
+    disconnectedCallback() {
+        this.cleanupEvent();
+    }
+    async sdOpen() {
+        if (this.disabled || this.items.length === 0)
+            return;
+        this.isOpen = true;
+    }
+    async sdClose() {
+        this.closeDropdown();
+    }
+    closeDropdown = () => {
+        this.isOpen = false;
+    };
+    handleDocumentClick(event) {
+        const target = event.target;
+        if (!target)
+            return;
+        if (this.el.contains(target))
+            return;
+        if (this.menuRef?.contains(target))
+            return;
+        this.closeDropdown();
+    }
+    handleDocumentKeydown(event) {
+        if (!this.isOpen)
+            return;
+        const targetKeys = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'];
+        if (!targetKeys.includes(event.key))
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        switch (event.key) {
+            case 'ArrowDown':
+                this.itemIndex = this.getNextEnabledIndex(1);
+                break;
+            case 'ArrowUp':
+                this.itemIndex = this.getNextEnabledIndex(-1);
+                break;
+            case 'Enter':
+                if (this.itemIndex < 0)
+                    return;
+                this.selectItem(this.items[this.itemIndex]);
+                break;
+            case 'Escape':
+                this.closeDropdown();
+                break;
+        }
+    }
+    get resolvedConfig() {
+        if (!isDropdownButtonName(this.name)) {
+            throw new Error(`Invalid sd-dropdown-button name: ${this.name}`);
+        }
+        const config = DROPDOWN_BUTTON_CONFIG[this.name];
+        const preset = getDropdownButtonPreset(this.name);
+        return {
+            config,
+            preset,
+        };
+    }
+    getNextEnabledIndex(direction) {
+        const enabledIndices = this.items.reduce((acc, item, index) => {
+            if (!item.disabled) {
+                acc.push(index);
+            }
+            return acc;
+        }, []);
+        if (enabledIndices.length === 0) {
+            return -1;
+        }
+        const currentPosition = enabledIndices.indexOf(this.itemIndex);
+        if (currentPosition === -1) {
+            return direction === 1 ? enabledIndices[0] : enabledIndices[enabledIndices.length - 1];
+        }
+        const nextPosition = (currentPosition + direction + enabledIndices.length) % enabledIndices.length;
+        return enabledIndices[nextPosition];
+    }
+    toggleDropdown = (event) => {
+        event.stopPropagation();
+        if (this.disabled || this.items.length === 0) {
+            return;
+        }
+        this.isOpen = !this.isOpen;
+    };
+    selectItem(item, event) {
+        event?.stopPropagation();
+        if (!item || item.disabled) {
+            return;
+        }
+        this.click.emit(item.value);
+        this.closeDropdown();
+    }
+    getTriggerClasses(preset, size, disabled, isOpen) {
+        const classes = [
+            'sd-dropdown-button__trigger',
+            `sd-dropdown-button__trigger--${preset}`,
+            `sd-dropdown-button__trigger--${size}`,
+        ];
+        if (disabled) {
+            classes.push('sd-dropdown-button__trigger--disabled');
+        }
+        if (isOpen) {
+            classes.push('sd-dropdown-button__trigger--open');
+        }
+        return classes.join(' ');
+    }
+    getMenuItemClasses(isActive, isDisabled) {
+        const classes = ['sd-dropdown-button__menu-item'];
+        if (isActive) {
+            classes.push('sd-dropdown-button__menu-item--active');
+        }
+        if (isDisabled) {
+            classes.push('sd-dropdown-button__menu-item--disabled');
+        }
+        return classes.join(' ');
+    }
+    renderDropdown(preset) {
+        if (!this.isOpen || !this.triggerRef)
+            return null;
+        return (hAsync("sd-portal", { open: this.isOpen, parentRef: this.triggerRef, onSdClose: this.closeDropdown }, hAsync("div", { class: "sd-dropdown-button__menu", role: "menu", ref: el => (this.menuRef = el), style: {
+                '--sd-dropdown-button-menu-item-color': PRESET_MENU_ITEM_COLORS[preset],
+                '--sd-dropdown-button-menu-item-active-bg': PRESET_MENU_ITEM_ACTIVE_BACKGROUNDS[preset],
+                '--sd-dropdown-button-menu-item-active-color': PRESET_MENU_ITEM_ACTIVE_COLORS[preset],
+                '--sd-dropdown-button-menu-border': PRESET_BORDER_COLORS[preset] === 'transparent'
+                    ? PRESET_DIVIDER_COLORS[preset]
+                    : PRESET_BORDER_COLORS[preset],
+            } }, this.items.map((item, index) => {
+            const isActive = this.itemIndex === index && !item.disabled;
+            const iconColor = item.disabled
+                ? DROPDOWN_DISABLED_CONTENT
+                : isActive
+                    ? PRESET_MENU_ITEM_ACTIVE_COLORS[preset]
+                    : PRESET_MENU_ITEM_COLORS[preset];
+            return (hAsync("button", { type: "button", role: "menuitem", class: this.getMenuItemClasses(isActive, Boolean(item.disabled)), disabled: item.disabled, onClick: event => this.selectItem(item, event), onMouseEnter: () => {
+                    if (!item.disabled) {
+                        this.itemIndex = index;
+                    }
+                } }, item.icon && (hAsync("sd-icon", { class: "sd-dropdown-button__menu-item-icon", name: item.icon, size: 12, color: iconColor })), hAsync("span", { class: "sd-dropdown-button__menu-item-label", innerHTML: item.label })));
+        }))));
+    }
+    render() {
+        const { config, preset } = this.resolvedConfig;
+        const chevronColor = this.disabled ? DROPDOWN_DISABLED_CONTENT : PRESET_CONTENT_COLORS[preset];
+        return (hAsync("div", { key: '0bd454e599c8eb56b88f63a5f74e1d9db4b568f9', class: "sd-dropdown-button" }, hAsync("button", { key: '804dd19dc0d49969e89d0742e71f61fe610e3f3d', type: "button", class: this.getTriggerClasses(preset, config.size, this.disabled, this.isOpen), disabled: this.disabled, "aria-haspopup": "menu", "aria-expanded": String(this.isOpen), onClick: this.toggleDropdown, ref: el => (this.triggerRef = el), style: {
+                '--sd-dropdown-button-min-width': `${DROPDOWN_BUTTON_MIN_WIDTHS[config.size]}px`,
+                '--sd-dropdown-button-bg': config.color,
+                '--sd-dropdown-button-bg-hover': PRESET_HOVER_BACKGROUNDS[preset],
+                '--sd-dropdown-button-border': PRESET_BORDER_COLORS[preset],
+                '--sd-dropdown-button-content': PRESET_CONTENT_COLORS[preset],
+                '--sd-dropdown-button-divider': PRESET_DIVIDER_COLORS[preset],
+                '--sd-dropdown-button-accent': BUTTON_FOCUS_RING_COLOR,
+                '--sd-dropdown-button-disabled-bg': DROPDOWN_DISABLED_BACKGROUND,
+                '--sd-dropdown-button-disabled-content': DROPDOWN_DISABLED_CONTENT,
+                '--sd-dropdown-button-disabled-border': DROPDOWN_DISABLED_BORDER,
+            } }, hAsync("span", { key: '038dd3ad8c7c07d3ebb435a6fec27dd31b8fdba0', class: "sd-dropdown-button__trigger-label" }, this.label), hAsync("span", { key: 'c5c2c0fffa200a4772d7e448e1a1b95745be4faa', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), hAsync("span", { key: 'a6f1db25929c10b9dc9ccbae2655eed3c67dff22', class: "sd-dropdown-button__trigger-icon", "aria-hidden": "true" }, hAsync("sd-icon", { key: '4c1533a7efd5a7d695e460bad9dfc2b8a7fe5740', name: this.isOpen ? 'arrowUp' : 'arrowDown', size: 12, color: chevronColor }))), this.renderDropdown(preset)));
+    }
+    static get watchers() { return {
+        "isOpen": [{
+                "handleOpenChange": 0
+            }]
+    }; }
+    static get style() { return sdDropdownButtonCss(); }
+    static get cmpMeta() { return {
+        "$flags$": 512,
+        "$tagName$": "sd-dropdown-button",
+        "$members$": {
+            "name": [1],
+            "label": [1],
+            "items": [16],
+            "disabled": [4],
+            "isOpen": [32],
+            "itemIndex": [32],
+            "sdOpen": [64],
+            "sdClose": [64]
+        },
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": []
+    }; }
+}
+
 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 #0075FF !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:#EEEEEE;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:12px}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__required-icon{margin-right:4px}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__text{font-size:12px;line-height:20px;color:#333333;white-space:nowrap}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__tooltip{margin-left:2px}sd-field .sd-field--has-label-inside .sd-field__wrapper .sd-field__label{margin-right:0;display:flex;align-items:center;justify-content:center;padding:3px 12px;border:1px solid #CCCCCC;border-right:none;border-radius:4px 0 0 4px;border-color:#AAAAAA;background-color:#F6F6F6}sd-field .sd-field__wrapper{width:100%;height:28px;display:flex;align-items:center;flex-flow:row nowrap;position:relative;color:#333333;cursor:pointer;-webkit-user-select:none;user-select:none}sd-field .sd-field__wrapper .sd-field__control{position:relative;width:100%;height:100%;display:flex;flex:1;border:1px solid #AAAAAA;border-radius:4px;background:white}sd-field .sd-field__wrapper .sd-field__control--label-inside{border-top-left-radius:0px;border-bottom-left-radius:0px}sd-field .sd-field--error:not(:hover) .sd-field__wrapper .sd-field__control{border:1px solid #FB4444 !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 #0075FF !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:#FB4444;font-size:12px;line-height:20px;margin-top:4px}`;
 
 const FORM_PARENT_TAGS = [
@@ -6271,15 +7021,15 @@ class SdField {
         }
     }
     render() {
-        return (hAsync("div", { key: '3c69abe493110b5665795706a9ae0e525f213aca', class: {
+        return (hAsync("div", { key: '83d20191373b759f18d25e25330ead65217dea4f', class: {
                 'sd-field': true,
                 'sd-field--has-label': !!this.label,
                 'sd-field--has-label-inside': !!this.label && this.insideLabel,
                 [this.fieldStatus]: !!this.fieldStatus,
-            } }, hAsync("div", { key: 'decc6821b7172f5ecc2343472014c08674725904', class: "sd-field__wrapper" }, this.renderLabel(this.label), hAsync("div", { key: 'ca5e93f049db10ecaaaab091fdf394ac4b55e292', class: {
+            } }, hAsync("div", { key: '2f04e19997c077c32843173c85dc04840f8fa0f6', class: "sd-field__wrapper" }, this.renderLabel(this.label), hAsync("div", { key: 'c7fa5c334cd4dc0b99919850b3059a35a77ea5c6', class: {
                 'sd-field__control': true,
                 'sd-field__control--label-inside ': !!this.label && this.insideLabel,
-            } }, hAsync("slot", { key: '7ee38983d32985f4b4a035830bcdca0e14b2cf71' }))), this.errorMsg && hAsync("div", { key: 'c2d6ef860ced48657b906806f2618594b094ea79', class: "sd-field__error-message" }, this.errorMsg)));
+            } }, hAsync("slot", { key: '15f7bd40ca6ed1667f97f6362be914e203c491af' }))), this.errorMsg && hAsync("div", { key: 'd940bca4d3074e8051bc5392aad36be4c58f88af', class: "sd-field__error-message" }, this.errorMsg)));
     }
     renderLabel(label) {
         if (!label)
@@ -6413,15 +7163,15 @@ class SdFilePicker {
     render() {
         const hasFiles = this.hasFiles();
         const displayText = this.getDisplayText();
-        return (hAsync("div", { key: '659ab6f0e1fedadfbef1838def391aab28ae6e62', class: {
+        return (hAsync("div", { key: 'dfdb1f7cc4793c23cfb1ae97464981833263421e', 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: '55ffb6c1b3ff502b555cb48a31301ac9b30701a4', 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: 'b7755876e0f327d15a886a86592cd59bd3435202', name: "attachFile", size: 16, color: this.getIconColor(), class: "sd-file-picker__icon" }), hAsync("div", { key: 'e1e2004c64166eb2b611c48ca51cc793fb90434c', ref: el => (this.fileNamesRef = el), class: {
+            }, onClick: this.handleClick, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, hAsync("input", { key: 'bd4a072a517391b63116de1561aaf6606b1a8343', 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: '12280a64236d3fd9b63a9d15be11426efdd81629', name: "attachFile", size: 16, color: this.getIconColor(), class: "sd-file-picker__icon" }), hAsync("div", { key: '935a7d98ee034d59f16b410eb1495cd009ce6024', 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-icon", { key: '0a3c122382cab2148a88fbd4fdc9ff1f7cde757b', name: "close", size: 12, color: "#888888", class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (hAsync("div", { key: '628717309bf16c0906e9ac21ecbf14a416eea8d8', class: "sd-file-picker__tooltip" }, displayText))));
+            } }, displayText), !this.disabled && hasFiles && (hAsync("sd-icon", { key: '08f38161be5d1754b4f5b1bba185a29976ffd1dd', name: "close", size: 12, color: "#888888", class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (hAsync("div", { key: 'db6edfa98b3832276b320a6f3b4e195cfaeff4d6', class: "sd-file-picker__tooltip" }, displayText))));
     }
     static get watchers() { return {
         "value": [{
@@ -6600,7 +7350,7 @@ class SdFloatingPopover {
         this.close.emit();
     }
     render() {
-        return hAsync("slot", { key: '2f33d335a7cf00ace576aed610a0e77d711a5b10' });
+        return hAsync("slot", { key: 'd8bdd90d00b52153d1144bbea871ace4888e37e4' });
     }
     static get style() { return sdFloatingPortalCss(); }
     static get cmpMeta() { return {
@@ -6757,9 +7507,9 @@ class SdGuide {
     };
     render() {
         const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];
-        return (hAsync("div", { key: '2a7d3d040d3fbe7d0c22afc62d67a848fbae67d9', class: "sd-guide", style: {
+        return (hAsync("div", { key: '3e6914fc5c99e8f95d5ed613ddd61271bc4e91f9', class: "sd-guide", style: {
                 '--sd-guide-color': GUIDE_ICON[this.type].color,
-            } }, hAsync("sd-button", { key: 'e354fa7a48aacabbd7688f9546d71ec138b4a648', ref: el => (this.guideRef = el), class: this.guideClass, variant: this.popupShow ? 'primary' : 'outline', label: this.label || GUIDE_LABEL[this.type], size: "sm", color: this.popupShow ? GUIDE_ICON[this.type].color : 'grey_45', icon: iconName, iconColor: this.popupShow ? 'white' : iconColor, iconSize: iconSize, noHover: this.popupShow, onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (hAsync("sd-portal", { key: '157583215cdba27ae493a07aaa3eb4a0e3923971', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, hAsync("div", { key: '6aaa8f4ee6f44225ee63ef740d7398e87207c0c0', style: { position: 'absolute', width: '0px', height: '0px' } }, hAsync("div", { key: '9184936963f96e2537b3713bd5ee38d0c058c72b', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, hAsync("sd-button", { key: 'a1f653f7e40f6ad4e97dca82e10d4f03843469fd', class: "sd-guide__popup__close", icon: "close", color: "grey_65", size: "md", variant: "ghost", noHover: true, onSdClick: this.closeDropdown }), hAsync("div", { key: '561433ec3fcf6f9de4badd8e24ffaffbab4e62df', class: "sd-guide__popup__header" }, hAsync("sd-icon", { key: '69aafb073fa680f8353deccb860320da083ff121', name: "helpOutline", size: 24, color: "green_65" }), hAsync("h3", { key: '71f7fcb3068d572523c6bf53276e654feb1056f6', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), hAsync("ul", { key: '407db996ded71b9a5786b1e7967349517c7eb877', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
+            } }, hAsync("sd-button", { key: 'b8e5be2cecec423cb2695c47c9493281c867dbde', 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: '7d87b81704d2912f9a4bbe22ff702063da9ca0ff', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, hAsync("div", { key: 'd34d55e52ecb3b0a72356dcd86c2127217da4af5', style: { position: 'absolute', width: '0px', height: '0px' } }, hAsync("div", { key: '396bf4845c0e9167440c623c876f895705b973e9', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, hAsync("sd-button", { key: '6a678e322df5d9daffd09188daebbbcc0e757ed9', class: "sd-guide__popup__close", icon: "close", color: "grey_65", size: "md", variant: "ghost", noHover: true, onSdClick: this.closeDropdown }), hAsync("div", { key: '8b4abeac25a09b1eb8ee8285d2afff9a0a470c6c', class: "sd-guide__popup__header" }, hAsync("sd-icon", { key: 'b6216567fa83cf131e97c10f2b9f827b13f660a3', name: "helpOutline", size: 24, color: "green_65" }), hAsync("h3", { key: '5a87da148989c89e196fee9a96bbb51e516dca4d', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), hAsync("ul", { key: 'a4ebb25ecef588ca5367006adb6aaf446fbd59a9', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
     }
     // 현재 2depth까지만 스타일 적용
     renderListItem(message, depth = 0) {
@@ -8804,7 +9554,7 @@ class SdIcon {
     }
     render() {
         const IconComponent = Icons[this.name]?.[this.size];
-        return (hAsync("i", { key: '1d6a48769c99bbfe9576016e24766b8c82ab570e', class: this.getIconClasses(), style: this.iconStyle }, hAsync(IconComponent, { key: '3fdb4195ef13656e79b402a4eae2fb0210fb3a97', color: this.resolvedColor })));
+        return (hAsync("i", { key: '2c1ef942e674d6dc85911f9a87c6859e0e86a706', class: this.getIconClasses(), style: this.iconStyle }, hAsync(IconComponent, { key: 'fa1bc7cd1cf4dc5ec2565f5bbfe65e8137673204', color: this.resolvedColor })));
     }
     static get style() { return sdIconCss(); }
     static get cmpMeta() { return {
@@ -8929,7 +9679,7 @@ class SdInput {
         }
     };
     render() {
-        return (hAsync("sd-field", { key: '87f02ba890fd952f89eb86d200318038137ba1a4', name: this.name, label: this.label, insideLabel: this.insideLabel, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, useLabelRequired: this.useLabelRequired, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, hAsync("label", { key: '0bb5824067b33c178b1f60ececdccfe0a3d5f294', class: "sd-input__content", style: { width: '100%' } }, hAsync("slot", { key: '6f67712b4ca708ba511c57379a6b5118732f146a', name: "prefix" }), hAsync("input", { key: 'b337a1161dedb41ed29a690fa963c0ac60dd0c79', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: 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: 'bf45d9fd71551dc6a3bb96cdc44512796beee923', name: "suffix" }), this.clearable && this.internalValue && (hAsync("sd-icon", { key: 'aed0a5d9115ba8b7601dc62423349bee1a9978c7', name: "close", color: "grey_65", size: "16", class: "sd-input__clear-icon", onClick: async () => {
+        return (hAsync("sd-field", { key: '757bf7b330f93ec9cd344098bdf124b999e04bb5', name: this.name, label: this.label, insideLabel: this.insideLabel, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, useLabelRequired: this.useLabelRequired, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, hAsync("label", { key: '2dde85e905d77bb6337a2ad10a9f0f872fed5e8a', class: "sd-input__content", style: { width: '100%' } }, hAsync("slot", { key: '20f47646ca476bf6ca6412ebb9e6aac0c72e7eab', name: "prefix" }), hAsync("input", { key: 'a4f4f1594c80a8d834db7d6125110b4c65ad9906', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: 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: '35c7c173d72cbc295ad8f6e12f94bfe96e9f98d1', name: "suffix" }), this.clearable && this.internalValue && (hAsync("sd-icon", { key: '82bf96b1a01516e0a7ea0dd735509511aa8a0e05', name: "close", color: "grey_65", size: "16", class: "sd-input__clear-icon", onClick: async () => {
                 this.internalValue = '';
                 await this.formField?.sdValidate();
             } })))));
@@ -8992,7 +9742,7 @@ class SdLoadingSpinner {
         return resolveColor(this.color);
     }
     render() {
-        return (hAsync(Fragment, { key: 'c3b3448fcc65334af3246f80157b195ec5595afe' }, hAsync("svg", { key: '24701b65d17e56434cf46b72dbd5acec208b5dc8', class: "sd-loading-spinner", width: "72px", height: "72px", viewBox: "25 25 50 50", style: { color: this.resolvedColor } }, hAsync("circle", { key: 'e19c68c082348d36eecd05fa561eee91182349f2', 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 {
@@ -9314,17 +10064,17 @@ class SdNumberInput {
         const inputStyles = {
             textAlign: this.useButton ? 'center' : 'right',
         };
-        return (hAsync("sd-field", { key: '7aa387eeb5850052e121931b3f8183373b4319aa', name: this.name, label: this.label, insideLabel: this.insideLabel, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, ref: el => (this.formField = el), style: inputWidth }, hAsync("label", { key: 'f5bbb6c76e32de4aefe59c6958a38e1a560f05c9', class: {
+        return (hAsync("sd-field", { key: '837e3b5c34396eb83adcf52f3242d24ad122be0a', name: this.name, label: this.label, insideLabel: this.insideLabel, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, ref: el => (this.formField = el), style: inputWidth }, hAsync("label", { key: '57000cb104bb65b1827e2cdb059bad004c236b2a', class: {
                 'sd-number-input': true,
                 [this.getInputStatus()]: true,
                 'sd-number-input--with-buttons': this.useButton,
-            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, hAsync("input", { key: 'fc26b7cf0d121025c9a748b158640e03188d72d3', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__input ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, style: inputStyles, onFocus: this.handleFocus, onBlur: this.handleBlur }), this.useButton && (hAsync("div", { key: 'c9325ea7dd19c02fead55a0d63ac0b7b16143d08', class: "sd-number-input__buttons" }, hAsync("button", { key: 'ec96811ce7046a3fe9506ca0635db97413d8283a', type: "button", class: {
+            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, hAsync("input", { key: 'da7fe761d7e2528dd299d6ee5867bc7a5e0983ee', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__input ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, style: inputStyles, onFocus: this.handleFocus, onBlur: this.handleBlur }), this.useButton && (hAsync("div", { key: '3a58c1b9da818dbe0d4d29b79816bbc81288be49', class: "sd-number-input__buttons" }, hAsync("button", { key: '507b418d1aea67247d10fcba514b51cc966b3ce9', type: "button", class: {
                 'sd-number-input__button': true,
                 'sd-number-input__button--decrement': true,
-            }, disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, hAsync("sd-icon", { key: '70311a7723356ecc88125042d366bf567b0b5a2a', name: "minus", size: 12, color: this.isDecrementDisabled() ? 'grey_45' : 'brilliantblue_70' })), hAsync("button", { key: 'b7086218dc98fec4287e4becb0d834634fd52055', type: "button", class: {
+            }, disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, hAsync("sd-icon", { key: 'e0b28e6cf9a5c9d578688e45f7db227516f6373f', name: "minus", size: 12, color: this.isDecrementDisabled() ? 'grey_45' : 'brilliantblue_70' })), hAsync("button", { key: '813bf64d160888e610da067fef9dea11375dd51b', type: "button", class: {
                 'sd-number-input__button': true,
                 'sd-number-input__button--increment': true,
-            }, disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, hAsync("sd-icon", { key: 'b945a1561978dc4bba1868fa57652e94a6bcfc34', name: "add", size: 12, color: this.isIncrementDisabled() ? 'grey_45' : 'brilliantblue_70' })))))));
+            }, disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, hAsync("sd-icon", { key: '6677d8b46b123e5534bfa8b2fcb45276d9b70782', name: "add", size: 12, color: this.isIncrementDisabled() ? 'grey_45' : 'brilliantblue_70' })))))));
     }
     static get watchers() { return {
         "value": [{
@@ -9448,12 +10198,12 @@ class SdPagination {
         }
     }
     render() {
-        return (hAsync("div", { key: 'feed08139c382f91539bc316a967ed1738529688', class: this.paginationClasses }, hAsync("div", { key: '42c908d7a685f2acab29a94d040e4f4c513fff38', 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: '1adbe18d363ff7946e900929d0dfaec1a1807d45', class: this.paginationClasses }, hAsync("div", { key: '104eb4ac5fa9e8564c8730f34aefca4e0ac31cc6', 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: '2be11ae773c0bce71ecaf53f99daff3f5b2d567d', class: "append-btns" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n)))), hAsync("div", { key: 'e596b6a182e22ae4a8e95d5babb548d3bfba373d', class: "append-btns" }, this.renderNextButtons())));
     }
     static get style() { return sdPaginationCss(); }
     static get cmpMeta() { return {
@@ -9507,11 +10257,11 @@ class SdPopover {
         this.showPopover = false;
     };
     render() {
-        return (hAsync(Fragment, { key: '883bea0d5ef88bb63b4a1a2d778aedf0bce6f000' }, 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: 'f38658d537cd8cebb84e579b02c73209e8a81d3a', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, hAsync("div", { key: '472702d7d51c08051670012fc2e930f41ad7f1b5', class: {
+        return (hAsync(Fragment, { key: '4c256f17bc8601f889d18e2b8ee9ce5b4436b75e' }, 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: 'd1a8ef964dc6b9458b47d2d2e0d1eb25662e1537', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, hAsync("div", { key: '1aef778cbd469b16fe145957ea05c0ccbc2af8e7', class: {
                 'sd-floating-menu': true,
                 [`sd-floating-menu--${this.placement}`]: true,
                 [this.menuClass]: !!this.menuClass,
-            } }, hAsync("i", { key: '1895eba14b74f393c7221db83fdf97e9a8f3a1aa', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, hAsync(TooltipArrow, { key: '4307eb8e750dc36cae5477b366a4ea08a59a5a45' })), hAsync("div", { key: '840d94cf1d4e3c63346cd48a2d47c1c0b0633046', class: "sd-floating-menu__content" }, this.menuTitle && hAsync("div", { key: 'ede807dfdb2efc2a8bf8f89ef597965092c79211', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (hAsync("div", { key: '613ea1b46810eec1958b735fc23811d66ff2ebf8', class: "sd-floating-menu__messages" }, this.messages.map(message => (hAsync("div", null, message))))), this.buttons.length > 0 && (hAsync("div", { key: '06712ed73687c0e99778d5fda6d75a4e07d815dd', class: `sd-floating-menu__buttons sd-floating-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (hAsync("sd-button", { ...button })))))), this.useClose && (hAsync("button", { key: '20d628d8d31bd6464c26f3cf5ba894c5c3a2428f', title: "close", class: "sd-floating-menu__close-button", onClick: () => this.handleClose() }, hAsync("sd-icon", { key: 'cd1dcbe02ed55a25364e88621db5ab287eb7ed8e', name: "close", size: "12", color: "gery_55" }))))))));
+            } }, hAsync("i", { key: 'ff8f07f418d3bdcaf15b7e058158b91bd1cd2185', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, hAsync(TooltipArrow, { key: '9b1fb0577a5dcdf54ec1cc60935a9c3c1aa8319c' })), hAsync("div", { key: '0bfd33f6dde24fcdca635cbee04d2bc618f15185', class: "sd-floating-menu__content" }, this.menuTitle && hAsync("div", { key: 'de381d79af2f5d976e5cbccf5ed2b60aae9e6f26', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (hAsync("div", { key: '316f3398861cc9e54f5c16bd08c7b45422857ae1', class: "sd-floating-menu__messages" }, this.messages.map(message => (hAsync("div", null, message))))), this.buttons.length > 0 && (hAsync("div", { key: '2466d39c9105310821a509cc8d493d34b27bbb7d', class: `sd-floating-menu__buttons sd-floating-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (hAsync("sd-button", { ...button })))))), this.useClose && (hAsync("button", { key: 'd9cf295dfe0a20e9f79f371292520d9c757df55d', title: "close", class: "sd-floating-menu__close-button", onClick: () => this.handleClose() }, hAsync("sd-icon", { key: '3ecc02bbfc890b1f66c57160041882c27153e44b', name: "close", size: "12", color: "gery_55" }))))))));
     }
     static get watchers() { return {
         "show": [{
@@ -9562,25 +10312,31 @@ class SdPortal {
     wrapper;
     rafId;
     isInsideClick = false;
+    handleObservedScroll = () => this.updatePosition();
     resizeObserver;
     mutationObserver;
+    scrollParents = [];
+    isObserved = false;
+    handleOpenChange() {
+        this.syncPortalState();
+    }
     componentDidLoad() {
         this.container = this.resolveContainer();
-        this.createWrapper();
-        this.moveSlotContent();
-        this.updatePosition();
-        this.observeParent();
+        this.syncPortalState();
     }
     componentDidRender() {
-        if (!this.wrapper)
-            return;
-        this.wrapper.style.display = this.open ? 'block' : 'none';
-        if (this.open)
-            this.updatePosition();
+        this.syncPortalState();
     }
     disconnectedCallback() {
         this.unobserveParent();
-        this.wrapper?.remove();
+        if (this.wrapper?.parentNode) {
+            try {
+                this.wrapper.parentNode.removeChild(this.wrapper);
+            }
+            catch {
+                // Stencil spec mock DOM can already detach the wrapper before this callback runs.
+            }
+        }
     }
     resolveContainer() {
         const el = typeof this.to === 'string' ? document.querySelector(this.to) : this.to;
@@ -9595,6 +10351,26 @@ class SdPortal {
         });
         this.container.appendChild(this.wrapper);
     }
+    ensureWrapper() {
+        if (this.wrapper)
+            return;
+        this.container ||= this.resolveContainer();
+        this.createWrapper();
+        this.moveSlotContent();
+    }
+    syncPortalState() {
+        if (!this.open) {
+            this.wrapper && (this.wrapper.style.display = 'none');
+            this.unobserveParent();
+            return;
+        }
+        this.ensureWrapper();
+        if (!this.wrapper)
+            return;
+        this.wrapper.style.display = 'block';
+        this.observeParent();
+        this.updatePosition();
+    }
     moveSlotContent() {
         if (!this.wrapper)
             return;
@@ -9636,19 +10412,57 @@ class SdPortal {
     }
     // parentRef의 이동 / 크기변경 감지
     observeParent() {
-        if (!this.parentRef)
+        if (!this.parentRef || this.isObserved)
             return;
-        this.resizeObserver = new ResizeObserver(() => this.updatePosition());
-        this.resizeObserver.observe(this.parentRef);
-        this.mutationObserver = new MutationObserver(() => this.updatePosition());
-        this.mutationObserver.observe(document.body, {
-            childList: true,
-            subtree: true,
-        });
+        this.observeScrollParents(this.parentRef);
+        if (typeof ResizeObserver !== 'undefined') {
+            this.resizeObserver = new ResizeObserver(() => this.updatePosition());
+            this.resizeObserver.observe(this.parentRef);
+        }
+        if (typeof MutationObserver !== 'undefined') {
+            this.mutationObserver = new MutationObserver(() => this.updatePosition());
+            this.mutationObserver.observe(document.body, {
+                childList: true,
+                subtree: true,
+            });
+        }
+        this.isObserved = true;
     }
     unobserveParent() {
+        if (!this.isObserved)
+            return;
+        this.unobserveScrollParents();
         this.resizeObserver?.disconnect();
+        this.resizeObserver = undefined;
         this.mutationObserver?.disconnect();
+        this.mutationObserver = undefined;
+        this.isObserved = false;
+    }
+    observeScrollParents(element) {
+        const nextScrollParents = this.getScrollParents(element);
+        nextScrollParents.forEach(parent => {
+            parent.addEventListener('scroll', this.handleObservedScroll, { passive: true });
+        });
+        this.scrollParents = nextScrollParents;
+    }
+    unobserveScrollParents() {
+        this.scrollParents.forEach(parent => {
+            parent.removeEventListener('scroll', this.handleObservedScroll);
+        });
+        this.scrollParents = [];
+    }
+    getScrollParents(element) {
+        const scrollParents = [];
+        let currentElement = element.parentElement;
+        while (currentElement) {
+            const { overflow, overflowX, overflowY } = getComputedStyle(currentElement);
+            const isScrollable = [overflow, overflowX, overflowY].some(value => /(auto|scroll|overlay)/.test(value));
+            if (isScrollable) {
+                scrollParents.push(currentElement);
+            }
+            currentElement = currentElement.parentElement;
+        }
+        return scrollParents;
     }
     // 외부 클릭 감지
     handleMouseDown(e) {
@@ -9664,8 +10478,13 @@ class SdPortal {
         this.close.emit();
     }
     render() {
-        return hAsync("slot", { key: 'ba2bf5df16f9bef0acef1ac8a08b090a23d02bc7' });
+        return hAsync("slot", { key: 'be76727404b0172e1049ae572acf4eacd4ea4a25' });
     }
+    static get watchers() { return {
+        "open": [{
+                "handleOpenChange": 0
+            }]
+    }; }
     static get cmpMeta() { return {
         "$flags$": 772,
         "$tagName$": "sd-portal",
@@ -9721,10 +10540,10 @@ class SdProgress {
         return this.statusColor[this.progressStatus];
     }
     render() {
-        return (hAsync("div", { key: '43da9dac67e760bfe53b8db11c27eef7ef0d8b3b', style: {
+        return (hAsync("div", { key: 'a11cc2a22ad1628d63882ca1e5f7f1e3715ba719', style: {
                 '--progress-color': this.progressColor,
                 '--progress-percentage': `${this.progressPercentage}%`,
-            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && hAsync("div", { key: 'af4b1c44f655546fede8ad548bddc6afb7810d2b', class: "sd-progress__label" }, this.label)));
+            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && hAsync("div", { key: 'dbc62a8fa4039127356f8b734482e1d0eb26c22b', 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, "%")));
@@ -9922,94 +10741,6 @@ class SdRadioGroup {
     }; }
 }
 
-class DropdownManager {
-    static instance;
-    activeDropdowns = new Set();
-    static getInstance() {
-        if (!DropdownManager.instance) {
-            DropdownManager.instance = new DropdownManager();
-        }
-        return DropdownManager.instance;
-    }
-    register(component) {
-        this.activeDropdowns.add(component);
-    }
-    unregister(component) {
-        this.activeDropdowns.delete(component);
-    }
-    openDropdown(targetComponent) {
-        // 다른 모든 드롭다운 닫기
-        this.activeDropdowns.forEach(component => {
-            if (component !== targetComponent && component.isOpen) {
-                component.closeDropdown();
-            }
-        });
-    }
-    closeAllDropdowns() {
-        this.activeDropdowns.forEach(component => {
-            if (component.isOpen) {
-                component.closeDropdown();
-            }
-        });
-    }
-}
-const dropdownManager = DropdownManager.getInstance();
-
-// 여러 select를 동시에 사용할때에 이벤트 리스너의 등록이 충돌나는 문제를 해결하기 위한 Base class
-// 각 드롭다운 컴포넌트는 이 클래스를 상속 및 구현 필요
-// 기본적으로 click, keydown 추상 이벤트를 구현해야하고
-// isOpen가 true일때에만 이벤트 등록 그외에는 이벤트 클리닝을 수행
-// 추후 필요한 이벤트는 이곳에 추가하여 추가 구현 후 사용
-// 별도로 드롭다운 전용의 Base class가 아닌 공통적으로 사용할 수 있는 Base class가 필요할지 검토 필요
-class BaseDropdownEvent {
-    documentClickHandler;
-    documentKeydownHandler;
-    // 컴포넌트 생명주기에서 호출할 메서드들
-    initializeEvent() {
-        dropdownManager.register(this);
-        this.initializeEventHandlers();
-    }
-    cleanupEvent() {
-        dropdownManager.unregister(this);
-        this.cleanup();
-    }
-    initializeEventHandlers() {
-        this.documentClickHandler = (event) => this.handleDocumentClick(event);
-        this.documentKeydownHandler = (event) => this.handleDocumentKeydown(event);
-    }
-    addGlobalEventListeners() {
-        if (this.documentClickHandler) {
-            document.addEventListener('click', this.documentClickHandler);
-        }
-        if (this.documentKeydownHandler) {
-            document.addEventListener('keydown', this.documentKeydownHandler);
-        }
-    }
-    removeGlobalEventListeners() {
-        if (this.documentClickHandler) {
-            document.removeEventListener('click', this.documentClickHandler);
-        }
-        if (this.documentKeydownHandler) {
-            document.removeEventListener('keydown', this.documentKeydownHandler);
-        }
-    }
-    onDropdownToggle(isOpen) {
-        if (isOpen && !this.disabled) {
-            dropdownManager.openDropdown(this);
-            this.addGlobalEventListeners();
-        }
-        else {
-            this.removeGlobalEventListeners();
-        }
-    }
-    cleanup() {
-        this.removeGlobalEventListeners();
-    }
-    closeDropdown() {
-        this.isOpen = false;
-    }
-}
-
 class SelectKeyboardNavigation {
     isSearchable;
     filteredOptions;
@@ -10391,10 +11122,10 @@ class SdSelectDropdown {
         this.isScrolled = scrollTop > 0;
     };
     render() {
-        return (hAsync("div", { key: 'ff55e2e133114accc2641a0025bdcf551eda3511', class: {
+        return (hAsync("div", { key: 'd69eabae6b1769212fb4755413de8e54ede8a213', 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: 'bfcee14aa06a9a259dd8e67013ed1074c1f9c318', 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: '7e9937e5b38a038b4b7bb0cd09ef4a69a336c673', 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": [{
@@ -10580,7 +11311,7 @@ class SdSelectMultiple extends BaseDropdownEvent {
         this.handleOptionSelection(option);
     };
     render() {
-        return (hAsync("sd-field", { key: 'e445d2c3f80d78be0e74b1f54371eb27d9c316e8', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, useLabelRequired: this.useLabelRequired, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, hAsync("div", { key: '9fad0ed744cafb9e1e5f16ee413f36edd8f2c1f3', class: {
+        return (hAsync("sd-field", { key: '9f78c7a47f580ba6d64fbc4a69e2f1f72f30e66f', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, useLabelRequired: this.useLabelRequired, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, hAsync("div", { key: 'fab43f26f83788991067096f8574421ddeb0a829', class: {
                 'sd-select-multiple': true,
                 'sd-select-multiple--open': this.isOpen,
                 'sd-select-multiple--disabled': this.disabled,
@@ -11173,7 +11904,7 @@ class SdSelectOption {
         }
     };
     render() {
-        return (hAsync("div", { key: 'a4fcca24b0bdde4f4665585c6cede84bd3b64d59', class: {
+        return (hAsync("div", { key: 'b9844296973b6e85d3c3e3652671e89f470ec7a9', class: {
                 'sd-select__option': true,
                 'sd-select__option--selected': this.isSelected,
                 'sd-select__option--disabled': !!this.option.disabled,
@@ -11259,7 +11990,7 @@ class SdSelectOptionGroup {
         }
     };
     render() {
-        return (hAsync("div", { key: '8e88aacd2c3122a563fcf78bcbe9731b6a29d8c5', class: {
+        return (hAsync("div", { key: '70ab9a558faf068cfc4eb0a5f6a29453ceedc6ec', class: {
                 'sd-select__option-group': true,
                 'sd-select__option-group--selected': !!this.isSelected,
                 'sd-select__option-group--disabled': !!this.option.disabled,
@@ -11268,10 +11999,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: 'be4bc7f2867ea5c86505bc9284ac3de46f7077f9', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (hAsync("sd-checkbox", { key: '00063ab3a6f1d4f44671ac82dd05524968bec668', 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: 'ca5dc0033231ab204a8688f98453742cdbde7d26', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (hAsync("sd-checkbox", { key: 'bba6cb9fe649f6eda82ba287f73d0142e02c53c2', value: this.isSelected, disabled: this.option.disabled, onClick: e => {
                 e.preventDefault();
                 this.handleClick(this.option, this.isSelected, e);
-            } })), hAsync("span", { key: '802c908d44bf1c0db5d64bf4c8d4bab4ebe2b87c', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (hAsync("span", { key: 'efd26a2d6e4e2662410de3755b70a2a2585ad0c4', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
+            } })), hAsync("span", { key: '7d03c080b7f5b92881389bfec787015a6ac55fa1', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (hAsync("span", { key: '7066453f92eac7549569db6854e3dc32515d80b9', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
     }
     static get style() { return sdSelectOptionGroupCss(); }
     static get cmpMeta() { return {
@@ -11320,17 +12051,17 @@ class SdSelectSearchInput {
         input?.focus({ preventScroll: true });
     }
     render() {
-        return (hAsync("div", { key: 'b19a029ef82d876c984c1f827d7a0f29bb823f5d', 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: '8e27f40e1b507f0c5cb2d4bde48750cd0089a9da', 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: '2b38a07cbc0bb0d7dd020ece45f18bdff4c262e5', 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 {
@@ -12425,10 +13156,10 @@ class SdTextarea {
     }
     render() {
         const maxLengthCounter = this.getMaxLengthCounter();
-        return (hAsync("div", { key: '888d11be57629e83e1215daddab63351a323672f', class: {
+        return (hAsync("div", { key: 'd538d3ab99c174f1fedc92c547fcba61d1097608', class: {
                 'sd-textarea': true,
                 [this.getTextareaStatus()]: true,
-            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, hAsync("div", { key: '1f91a1e435b2dba1817ce181f91bdf3829142682', class: "sd-textarea__content" }, hAsync("textarea", { key: 'd883f4cdfd56220cf4382893f94a469f7afd7ff2', 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: 'e9350d8e49eb87b2caddfc24079ece0d59c79739', class: "sd-textarea__footer" }, this.helpText !== undefined && hAsync("span", { key: 'cda9e2b8b0c15fbc7356597d4363d438688c8e4e', class: "sd-textarea__help-text" }, this.helpText), maxLengthCounter !== null && hAsync("span", { key: '491e990142e07837169e84a3fcc3e80c00bc7153', class: "sd-textarea__counter" }, maxLengthCounter)))));
+            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, hAsync("div", { key: '1f4b6059d56e673568e4662f423bf6c76b781ad7', class: "sd-textarea__content" }, hAsync("textarea", { key: '812814fdfc3044ba796830be47d5e5f93a423734', 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: '2ea2c482ea874607411d1f4ecaabb99d095122ad', class: "sd-textarea__footer" }, this.helpText !== undefined && hAsync("span", { key: 'b14afd0acf981bbbd3cef6bd7490f3a3fe9b443a', class: "sd-textarea__help-text" }, this.helpText), maxLengthCounter !== null && hAsync("span", { key: '2aa68acd081a61d22010c799621b06fa49e7b8a6', class: "sd-textarea__counter" }, maxLengthCounter)))));
     }
     static get watchers() { return {
         "value": [{
@@ -12569,7 +13300,7 @@ class SdToggle {
         this.change.emit(newValue);
     };
     render() {
-        return (hAsync("label", { key: 'c0fcd12c231fdb995b5edae756157c58b352fd0f', "aria-label": this.label || 'toggle', class: this.toggleClasses }, hAsync("input", { key: 'e50042ae04830f4c276d8140725ab62cc2d0490d', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), this.label && hAsync("span", { key: '99f9506a2dcea8cfd85aabf6b71243c116a2bf11', class: "sd-toggle__label" }, this.label), hAsync("div", { key: '424e1ae78d5684051bd7a2b3ba89f6760f773f1c', class: "sd-toggle__track" }, hAsync("div", { key: '29aab89e58022ce22f026fb694bb9b1e4531d8cf', class: "sd-toggle__thumb" }))));
+        return (hAsync("label", { key: '96e1e542413ede219dddf64f80112c1267973507', "aria-label": this.label || 'toggle', class: this.toggleClasses }, hAsync("input", { key: '301ea8516df99c351fc7162ef80db112778d55ad', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), this.label && hAsync("span", { key: '7382cf219c544aec9169a69a07856948512d2ac1', class: "sd-toggle__label" }, this.label), hAsync("div", { key: 'f9d6c5d4e94f12a64c242026974d71b8b8b140c7', class: "sd-toggle__track" }, hAsync("div", { key: '2798217a6e9766c0e6d3cc6ed333c54a0106d978', class: "sd-toggle__thumb" }))));
     }
     static get style() { return sdToggleCss(); }
     static get cmpMeta() { return {
@@ -12625,7 +13356,7 @@ class SdToggleButton {
         this.change.emit(newValue);
     };
     render() {
-        return (hAsync("label", { key: '6f8d9e738490ef344ff26a4026b9de17af68041e', class: this.buttonClasses, "aria-label": this.label || 'toggle button' }, this.label, hAsync("input", { key: '6d9d45c451301c4635e610fd70280be1fe65b316', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        return (hAsync("label", { key: '65bd84349d293e027829dc8a7e80c1bbee123b25', class: this.buttonClasses, "aria-label": this.label || 'toggle button' }, this.label, hAsync("input", { key: 'f03c1a1dd64d608766c0996539cb6422efa99ef7', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
     static get style() { return sdToggleButtonCss(); }
     static get cmpMeta() { return {
@@ -12725,11 +13456,13 @@ class SdTooltip {
 registerComponents([
   SdBadge,
   SdButton,
+  SdButtonV2,
   SdCard,
   SdCheckbox,
   SdDateBox,
   SdDatePicker,
   SdDateRangePicker,
+  SdDropdownButton,
   SdField,
   SdFilePicker,
   SdFloatingPopover,