@sellmate/design-system 1.0.50 → 1.0.51

package/dist/esm/{sd-button_4.entry.js → sd-button_5.entry.js}

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, g as getElement, h, F as Fragment } from './index-B8tGP77V.js';
+import { r as registerInstance, c as createEvent, g as getElement, h, F as Fragment } from './index-DsU722JF.js';
 import { b as buttonTokens } from './component.button-BcM38Hvd.js';
 import { r as resolveColor } from './resolveColor-BxPyZJaz.js';
-import { T as TooltipArrow } from './tooltipArrow-Pdc3NIc9.js';
+import { T as TooltipArrow } from './tooltipArrow-CJuzsrdH.js';
 
 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}`;
 
@@ -14,7 +14,7 @@ const ICON_SIZES = {
 const SdButton = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.click = createEvent(this, "sdClick");
+        this.click = createEvent(this, "sdClick", 7);
     }
     get el() { return getElement(this); }
     variant = 'primary';
@@ -65,7 +65,19 @@ const SdButton = class {
 SdButton.style = sdButtonCss();
 
 const field = {
+	label: {
+		sm: {
+			height: "28",
+			gap: "6",
+			icon: "12",
+			typography: {
+				fontWeight: "700",
+				fontSize: "12",
+				lineHeight: "20"
+			}
+		}},
 	addonLabel: {
+		gap: "6",
 		paddingX: "12",
 		typography: {
 			fontWeight: "500",
@@ -75,14 +87,16 @@ const field = {
 		bg: "#F6F6F6",
 		border: {
 			"default": "#AAAAAA",
-			disabled: "#CCCCCC"}
+			disabled: "#CCCCCC",
+			width: "1"
+		}
 	}
 };
 var fieldTokens = {
 	field: field
 };
 
-const sdFieldCss = () => `sd-field{display:inline-flex;flex-flow:column nowrap;height:fit-content;width:100%}sd-field .sd-field *:focus,sd-field .sd-field *:focus-visible,sd-field .sd-field *:focus-within{outline:none !important}sd-field .sd-field:not(.sd-field--disabled):hover .sd-field__control{border:1px solid var(--sd-system-color-field-border-hover) !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field.sd-field--disabled{cursor:not-allowed}sd-field .sd-field.sd-field--disabled .sd-field__wrapper{cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__label-inside{border-color:#CCCCCC;color:#888888;cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__control{background-color:#E1E1E1;border-color:#CCCCCC;color:#888888;cursor:not-allowed !important}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label{display:flex;align-items:center;margin-right:var(--sd-system-space-field-sm-gap)}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__icon{margin-right:6px}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__text{font-size:12px;line-height:20px;color:var(--sd-system-color-field-text-default);white-space:nowrap}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__tooltip{margin-left:2px}sd-field .sd-field--has-addon .sd-field__control .sd-field__addon{display:flex;align-items:center;white-space:nowrap;padding:0 var(--sd-field-addon-padding-x);font-size:var(--sd-field-addon-font-size);line-height:var(--sd-field-addon-line-height);font-weight:var(--sd-field-addon-font-weight);background:var(--sd-field-addon-bg);border-right:1px solid var(--sd-field-addon-border-color);border-radius:calc(var(--sd-system-radius-field-sm) - 1px) 0 0 calc(var(--sd-system-radius-field-sm) - 1px)}sd-field .sd-field__wrapper{width:100%;height:var(--sd-system-size-field-sm-height);display:flex;align-items:center;flex-flow:row nowrap;position:relative;color:var(--sd-system-color-field-text-default);cursor:pointer;-webkit-user-select:none;user-select:none}sd-field .sd-field__wrapper .sd-field__control{position:relative;height:100%;display:flex;flex:1;min-width:0;border:1px solid var(--sd-system-color-field-border-default);border-radius:var(--sd-system-radius-field-sm);background:var(--sd-system-color-field-bg-default)}sd-field .sd-field--error:not(:hover) .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-danger) !important}sd-field .sd-field.sd-field--focus .sd-field__wrapper .sd-field__control,sd-field .sd-field.sd-field--hover .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-focus) !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field.sd-field--pass .sd-field__wrapper .sd-field__control{border:1px solid #2BCE6C !important}sd-field .sd-field .sd-field__error-message{color:var(--sd-textinput-input-text-error-message);font-size:var(--sd-textinput-input-error-message-typography-font-size);line-height:var(--sd-textinput-input-error-message-typography-line-height);margin-top:var(--sd-textinput-input-contents-gap)}sd-field .sd-field .sd-field__hint{color:var(--sd-textinput-input-text-hint);font-size:var(--sd-textinput-input-hint-typography-font-size);line-height:var(--sd-textinput-input-hint-typography-line-height);margin-top:var(--sd-textinput-input-contents-gap)}`;
+const sdFieldCss = () => `sd-field{display:inline-flex;flex-flow:column nowrap;height:fit-content;width:100%}sd-field .sd-field *:focus,sd-field .sd-field *:focus-visible,sd-field .sd-field *:focus-within{outline:none !important}sd-field .sd-field:not(.sd-field--disabled):hover .sd-field__control{border:1px solid var(--sd-system-color-field-border-hover) !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field.sd-field--disabled{cursor:not-allowed}sd-field .sd-field.sd-field--disabled .sd-field__wrapper{cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__label-inside{border-color:#CCCCCC;color:#888888;cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__control{background-color:#E1E1E1;border-color:#CCCCCC;color:#888888;cursor:not-allowed !important}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label{display:flex;align-items:center;height:var(--sd-field-label-height);margin-right:var(--sd-system-space-field-sm-gap)}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__icon{margin-right:var(--sd-field-label-gap)}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__text{font-size:var(--sd-field-label-font-size);line-height:var(--sd-field-label-line-height);font-weight:var(--sd-field-label-font-weight);color:var(--sd-system-color-field-text-default);white-space:nowrap}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__tooltip{margin-left:var(--sd-field-label-gap)}sd-field .sd-field--has-addon .sd-field__control{gap:var(--sd-field-addon-gap)}sd-field .sd-field--has-addon .sd-field__control .sd-field__addon{display:flex;align-items:center;white-space:nowrap;padding:0 var(--sd-field-addon-padding-x);font-size:var(--sd-field-addon-font-size);line-height:var(--sd-field-addon-line-height);font-weight:var(--sd-field-addon-font-weight);background:var(--sd-field-addon-bg);border-right:var(--sd-field-addon-border-width) solid var(--sd-field-addon-border-color);border-radius:calc(var(--sd-system-radius-field-sm) - 1px) 0 0 calc(var(--sd-system-radius-field-sm) - 1px)}sd-field .sd-field__wrapper{width:100%;height:var(--sd-system-size-field-sm-height);display:flex;align-items:center;flex-flow:row nowrap;position:relative;color:var(--sd-system-color-field-text-default);cursor:pointer;-webkit-user-select:none;user-select:none}sd-field .sd-field__wrapper .sd-field__control{position:relative;height:100%;display:flex;flex:1;min-width:0;border:1px solid var(--sd-system-color-field-border-default);border-radius:var(--sd-system-radius-field-sm);background:var(--sd-system-color-field-bg-default)}sd-field .sd-field--error:not(:hover) .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-danger) !important}sd-field .sd-field.sd-field--focus .sd-field__wrapper .sd-field__control,sd-field .sd-field.sd-field--hover .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-focus) !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field.sd-field--pass .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-success) !important}sd-field .sd-field .sd-field__error-message{color:var(--sd-textinput-input-text-error-message);font-size:var(--sd-textinput-input-error-message-typography-font-size);line-height:var(--sd-textinput-input-error-message-typography-line-height);margin-top:var(--sd-textinput-input-contents-gap)}sd-field .sd-field .sd-field__hint{color:var(--sd-textinput-input-text-hint);font-size:var(--sd-textinput-input-hint-typography-font-size);line-height:var(--sd-textinput-input-hint-typography-line-height);margin-top:var(--sd-textinput-input-contents-gap)}`;
 
 const FORM_PARENT_TAGS = [
     'sd-select',
@@ -93,6 +107,7 @@ const FORM_PARENT_TAGS = [
     'sd-textarea',
     'sd-number-input',
     'sd-select-v2',
+    'sd-file-picker',
 ];
 const SdField = class {
     constructor(hostRef) {
@@ -209,32 +224,49 @@ const SdField = class {
     render() {
         const addon = this.addonLabel;
         const addonTokens = fieldTokens.field.addonLabel;
-        const addonCssVars = addon ? {
-            '--sd-field-addon-padding-x': `${addonTokens.paddingX}px`,
-            '--sd-field-addon-font-size': `${addonTokens.typography.fontSize}px`,
-            '--sd-field-addon-line-height': `${addonTokens.typography.lineHeight}px`,
-            '--sd-field-addon-font-weight': addonTokens.typography.fontWeight,
-            '--sd-field-addon-bg': addonTokens.bg,
-            '--sd-field-addon-border-color': this.disabled
-                ? addonTokens.border.disabled
-                : addonTokens.border.default,
-        } : {};
-        return (h("div", { key: 'cb0844dfad82a3287253598ace0e70e761ca2cdd', class: {
+        const labelTokens = fieldTokens.field.label.sm;
+        const labelCssVars = this.label
+            ? {
+                '--sd-field-label-height': `${labelTokens.height}px`,
+                '--sd-field-label-gap': `${labelTokens.gap}px`,
+                '--sd-field-label-font-size': `${labelTokens.typography.fontSize}px`,
+                '--sd-field-label-line-height': `${labelTokens.typography.lineHeight}px`,
+                '--sd-field-label-font-weight': labelTokens.typography.fontWeight,
+            }
+            : {};
+        const addonCssVars = addon
+            ? {
+                '--sd-field-addon-padding-x': `${addonTokens.paddingX}px`,
+                '--sd-field-addon-font-size': `${addonTokens.typography.fontSize}px`,
+                '--sd-field-addon-line-height': `${addonTokens.typography.lineHeight}px`,
+                '--sd-field-addon-font-weight': addonTokens.typography.fontWeight,
+                '--sd-field-addon-bg': addonTokens.bg,
+                '--sd-field-addon-border-color': this.disabled
+                    ? addonTokens.border.disabled
+                    : addonTokens.border.default,
+                '--sd-field-addon-gap': `${addonTokens.gap}px`,
+                '--sd-field-addon-border-width': `${addonTokens.border.width}px`,
+            }
+            : {};
+        return (h("div", { key: 'e37722a9afbd78654328954262d4bc458634170a', class: {
                 'sd-field': true,
                 'sd-field--has-label': !!this.label,
                 'sd-field--has-addon': !!addon,
                 [this.fieldStatus]: !!this.fieldStatus,
-            }, style: addonCssVars }, h("div", { key: '788b8352737f10eec26195931cd22a405607b2af', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: 'e3164e47bbeec19e7b150c3e2a7ef75a96896db4', class: {
+            }, style: { ...labelCssVars, ...addonCssVars } }, h("div", { key: '38440e5f21fba28ff49fd00bfd20189af9c43707', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: 'b6d65e0db6667cbe9b4dd85ec72f9ecd08afa291', class: {
                 'sd-field__control': true,
                 'sd-field__control--has-addon': !!addon,
-            }, style: this.width ? { width: typeof this.width === 'number' ? `${this.width}px` : this.width, flex: 'none' } : {} }, addon && (h("div", { key: '12baae30b329494312e8fe3160556717f1f8d979', class: "sd-field__addon" }, addon)), h("slot", { key: 'f231342560a5b45448ddc6ad370cce414ca68052' }))), (this.errorMsg || this.errorMessage)
-            ? h("div", { class: "sd-field__error-message" }, this.errorMsg || this.errorMessage)
-            : this.hint && h("div", { class: "sd-field__hint" }, this.hint)));
+            }, style: this.width
+                ? {
+                    width: typeof this.width === 'number' ? `${this.width}px` : this.width,
+                    flex: 'none',
+                }
+                : {} }, addon && h("div", { key: '71a50d839dbbd7075c1f7f7b2daad0308ebc1225', class: "sd-field__addon" }, addon), h("slot", { key: '5c0696834e82eddde81c6603d26373a745a1febb' }))), this.errorMsg || this.errorMessage ? (h("div", { class: "sd-field__error-message" }, this.errorMsg || this.errorMessage)) : (this.hint && h("div", { class: "sd-field__hint" }, this.hint))));
     }
     renderLabel(label) {
         if (!label)
             return null;
-        return (h("label", { class: "sd-field__label" }, this.icon && (h("sd-icon", { name: this.icon.name, size: this.icon.size ?? 10, color: this.icon.color, rotate: this.icon.rotate, class: "sd-field__label__icon" })), h("div", { class: "sd-field__label__text" }, label), this.labelTooltip && (h("sd-tooltip", { class: "sd-field__label__tooltip", ...this.labelTooltipProps }, h("div", { slot: "content" }, this.labelTooltip)))));
+        return (h("label", { class: "sd-field__label" }, this.icon && (h("sd-icon", { name: this.icon.name, size: this.icon.size ?? Number(fieldTokens.field.label.sm.icon), color: this.icon.color, rotate: this.icon.rotate, class: "sd-field__label__icon" })), h("div", { class: "sd-field__label__text" }, label), this.labelTooltip && (h("sd-tooltip", { class: "sd-field__label__tooltip", ...this.labelTooltipProps }, this.labelTooltip))));
     }
 };
 SdField.style = sdFieldCss();
@@ -244,7 +276,7 @@ const sdFloatingPortalCss = () => `.sd-floating-menu{width:fit-content;padding:1
 const SdFloatingPopover = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.close = createEvent(this, "sdClose");
+        this.close = createEvent(this, "sdClose", 7);
     }
     get el() { return getElement(this); }
     to = 'body';
@@ -390,11 +422,154 @@ const SdFloatingPopover = class {
         this.close.emit();
     }
     render() {
-        return h("slot", { key: '4eecedc457f691ec888cd27da4f28aef73d14f73' });
+        return h("slot", { key: '025daba88b77d9e250893b20261bfce08f37e332' });
     }
 };
 SdFloatingPopover.style = sdFloatingPortalCss();
 
+const ghostButton = {
+	xxs: {
+		size: "16",
+		icon: "12"
+	},
+	xs: {
+		size: "24",
+		icon: "16"
+	},
+	sm: {
+		size: "28",
+		icon: "20"
+	},
+	md: {
+		size: "36",
+		icon: "24"
+	},
+	lg: {
+		size: "62",
+		icon: "36"
+	},
+	radius: "4",
+	hover: {
+		opacity: "5%"
+	},
+	icon: {
+		disabled: "#BBBBBB"
+	},
+	"default": {
+		content: "#888888",
+		hover: {
+			bg: "#222222"
+		}
+	},
+	danger: {
+		content: "#E30000",
+		hover: {
+			bg: "#E30000"
+		}
+	},
+	action: {
+		content: "#025497",
+		hover: {
+			bg: "#0075FF"
+		}
+	}
+};
+var ghostButtonTokens = {
+	ghostButton: ghostButton
+};
+
+const GHOST_BUTTON_FOCUS_RING_COLOR = '#0075FF';
+const GHOST_BUTTON_SIZES = {
+    xxs: {
+        size: Number(ghostButtonTokens.ghostButton.xxs.size),
+        icon: Number(ghostButtonTokens.ghostButton.xxs.icon),
+    },
+    xs: {
+        size: Number(ghostButtonTokens.ghostButton.xs.size),
+        icon: Number(ghostButtonTokens.ghostButton.xs.icon),
+    },
+    sm: {
+        size: Number(ghostButtonTokens.ghostButton.sm.size),
+        icon: Number(ghostButtonTokens.ghostButton.sm.icon),
+    },
+    md: {
+        size: Number(ghostButtonTokens.ghostButton.md.size),
+        icon: Number(ghostButtonTokens.ghostButton.md.icon),
+    },
+    lg: {
+        size: Number(ghostButtonTokens.ghostButton.lg.size),
+        icon: Number(ghostButtonTokens.ghostButton.lg.icon),
+    },
+};
+const GHOST_BUTTON_RADIUS = Number(ghostButtonTokens.ghostButton.radius);
+const GHOST_BUTTON_HOVER_OPACITY = ghostButtonTokens.ghostButton.hover.opacity;
+const GHOST_BUTTON_CONTENT_COLORS = {
+    default: ghostButtonTokens.ghostButton.default.content,
+    danger: ghostButtonTokens.ghostButton.danger.content,
+    action: ghostButtonTokens.ghostButton.action.content,
+};
+const GHOST_BUTTON_HOVER_BG_COLORS = {
+    default: ghostButtonTokens.ghostButton.default.hover.bg,
+    danger: ghostButtonTokens.ghostButton.danger.hover.bg,
+    action: ghostButtonTokens.ghostButton.action.hover.bg,
+};
+const GHOST_BUTTON_DISABLED_ICON = ghostButtonTokens.ghostButton.icon.disabled;
+
+const sdGhostButtonCss = () => `sd-ghost-button{display:inline-flex;width:fit-content;height:fit-content}.sd-ghost-button{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--sd-ghost-button-size);height:var(--sd-ghost-button-size);padding:0;border:none;border-radius:var(--sd-ghost-button-radius);background:transparent;cursor:pointer;box-sizing:border-box;transition:box-shadow 0.2s ease;-webkit-user-select:none;user-select:none}.sd-ghost-button::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--sd-ghost-button-hover-bg);opacity:0;transition:opacity 0.2s ease;pointer-events:none}.sd-ghost-button:hover:not(.sd-ghost-button--disabled)::before{opacity:var(--sd-ghost-button-hover-opacity)}.sd-ghost-button:focus-visible{outline:0;box-shadow:0 0 0 2px var(--sd-ghost-button-accent)}.sd-ghost-button--disabled{cursor:not-allowed}`;
+
+const SdGhostButton = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.click = createEvent(this, "sdClick", 7);
+    }
+    icon;
+    size = 'sm';
+    intent = 'default';
+    ariaLabel = '';
+    disabled = false;
+    click;
+    hasWarnedMissingAriaLabel = false;
+    handleClick = (event) => {
+        if (this.disabled) {
+            event.preventDefault();
+            return;
+        }
+        this.click.emit(event);
+    };
+    componentWillRender() {
+        this.warnIfMissingAriaLabel();
+    }
+    warnIfMissingAriaLabel() {
+        const missing = !this.ariaLabel.trim();
+        if (!missing) {
+            this.hasWarnedMissingAriaLabel = false;
+            return;
+        }
+        if (this.hasWarnedMissingAriaLabel)
+            return;
+        console.warn(`[sd-ghost-button] icon-only buttons require \`ariaLabel\`. Received icon="${this.icon}".`);
+        this.hasWarnedMissingAriaLabel = true;
+    }
+    render() {
+        const sizeConfig = GHOST_BUTTON_SIZES[this.size];
+        const contentColor = this.disabled
+            ? GHOST_BUTTON_DISABLED_ICON
+            : GHOST_BUTTON_CONTENT_COLORS[this.intent];
+        const accessibleName = this.ariaLabel.trim() || undefined;
+        return (h("button", { key: '8d6aa7e82d3e3f31638e98870283723fdb87e0e2', class: {
+                'sd-ghost-button': true,
+                'sd-ghost-button--disabled': this.disabled,
+            }, type: "button", disabled: this.disabled, "aria-label": accessibleName, style: {
+                '--sd-ghost-button-size': `${sizeConfig.size}px`,
+                '--sd-ghost-button-radius': `${GHOST_BUTTON_RADIUS}px`,
+                '--sd-ghost-button-hover-bg': GHOST_BUTTON_HOVER_BG_COLORS[this.intent],
+                '--sd-ghost-button-hover-opacity': GHOST_BUTTON_HOVER_OPACITY,
+                '--sd-ghost-button-accent': GHOST_BUTTON_FOCUS_RING_COLOR,
+            }, onClick: this.handleClick }, h("sd-icon", { key: 'd858b173e3f93c49703b31cde6be4fa81440ae7a', name: this.icon, size: sizeConfig.icon, color: contentColor })));
+    }
+};
+SdGhostButton.style = sdGhostButtonCss();
+
 const tooltip = {
 	"default": {
 		bg: "#07284A",
@@ -420,7 +595,7 @@ const TOOLTIP_TYPE_CONFIG = {
     accent: { bg: tooltipTokens.tooltip.accent.bg, content: tooltipTokens.tooltip.accent.content },
 };
 
-const sdTooltipCss = () => `sd-tooltip{visibility:hidden !important;display:inline-flex}sd-tooltip.visible{visibility:visible !important}sd-tooltip .sd-tooltip{position:relative;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}`;
+const sdTooltipCss = () => `sd-tooltip{visibility:hidden !important;display:inline-flex}sd-tooltip.visible{visibility:visible !important}sd-tooltip .sd-tooltip-trigger{display:inline-flex;position:relative;cursor:pointer;align-items:center;justify-content:center}`;
 
 const SdTooltip = class {
     constructor(hostRef) {
@@ -505,16 +680,16 @@ const SdTooltip = class {
         const toggleTooltip = () => (this.showTooltip = !this.showTooltip);
         const divTrigger = trigger === 'hover' ? hoverTrigger : this.label ? {} : { onClick: toggleTooltip };
         const buttonClickTrigger = trigger === 'click' && this.label ? { onSdClick: toggleTooltip } : {};
-        return (h(Fragment, { key: '7e3dfc0d59b38a483e8384ed52d70e0f4f4f7131' }, h("div", { key: '19b2b9ad1f936ea356baec15b0b3cb45c983cd47', class: this.sdClass, ...divTrigger }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: icon, size: this.buttonSize ?? 'sm', color: color, variant: this.buttonVariant ?? 'primary', class: "sd-tooltip", ...buttonClickTrigger })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (h("sd-floating-portal", { key: '4cfb1f9a16c962fd75bc8b419ea1b76495b32926', parentRef: this.buttonEl, onSdClose: this.handleClose.bind(this), placement: placement, offset: this.tooltipOffset }, h("div", { key: '81f043186ed76dc205c87facea044aecc92222ad', ref: el => (this.menuEl = el), class: {
+        return (h(Fragment, { key: '45662c35d1eb8cd1f23e0c62646a02fd244fee13' }, h("div", { key: '7f04bfcc31aecad132ce95eeb1a6d936f79189ee', class: `sd-tooltip-trigger ${this.sdClass || ''}`, ...divTrigger }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: icon, size: this.buttonSize ?? 'sm', color: color, variant: this.buttonVariant ?? 'primary', class: "sd-tooltip", ...buttonClickTrigger })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (h("sd-floating-portal", { key: '95c16d600733dca5f40d06b222b422bd48ddb2dd', parentRef: this.buttonEl, onSdClose: this.handleClose.bind(this), placement: placement, offset: this.tooltipOffset }, h("div", { key: '84b63cb44fbe9e7a81e033acde6be32b72ed24ba', ref: el => (this.menuEl = el), class: {
                 'sd-floating-menu': true,
                 [`sd-floating-menu--${tooltipType}`]: true,
                 [`sd-floating-menu--${placement}`]: true,
             }, style: {
                 '--sd-floating-bg': typeConfig.bg,
                 '--sd-floating-content': typeConfig.content,
-            }, onMouseEnter: () => this.show(), onMouseLeave: () => this.startHideTimer() }, h("i", { key: '6fa21e81b5de268176ea49c02c7712f8c916ba2e', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, h(TooltipArrow, { key: '3592d2d2306257b778ecd2092a140c3926792c89' })), h("div", { key: '0439204e3e8ba3f05b48929ee1db0dadff5d586c', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }))))));
+            }, onMouseEnter: () => this.show(), onMouseLeave: () => this.startHideTimer() }, h("i", { key: 'c05e9ecb128e780f3596e8e17b6796255e21b61e', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, h(TooltipArrow, { key: 'fa56346eb836456d4a646cd2d3959e2c4c98c2d7' })), h("div", { key: '926e918d55db0f79e5e776b341fe4d0d6b0bf574', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }))))));
     }
 };
 SdTooltip.style = sdTooltipCss();
 
-export { SdButton as sd_button, SdField as sd_field, SdFloatingPopover as sd_floating_portal, SdTooltip as sd_tooltip };
+export { SdButton as sd_button, SdField as sd_field, SdFloatingPopover as sd_floating_portal, SdGhostButton as sd_ghost_button, SdTooltip as sd_tooltip };

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-B8tGP77V.js';
+import { r as registerInstance, c as createEvent, h } from './index-DsU722JF.js';
 import { u as useDatePicker, t as today } from './useDatePicker-DTrMR0rx.js';
 import { r as resolveColor } from './resolveColor-BxPyZJaz.js';
 
@@ -17,8 +17,8 @@ const DEFAULT_COLORS = [
 const SdCalendar = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.select = createEvent(this, "sdSelect");
-        this.viewChange = createEvent(this, "sdViewChange");
+        this.select = createEvent(this, "sdSelect", 7);
+        this.viewChange = createEvent(this, "sdViewChange", 7);
     }
     value = null;
     selectable;

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, F as Fragment } from './index-B8tGP77V.js';
+import { r as registerInstance, h, F as Fragment } from './index-DsU722JF.js';
 
 const sdCardCss = () => `sd-card{display:block;height:fit-content}sd-card .sd-card{border-radius:8px;background:white}sd-card .sd-card--bordered{border:1px solid #E1E1E1}`;
 

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, g as getElement, h } from './index-B8tGP77V.js';
+import { r as registerInstance, c as createEvent, g as getElement, h } from './index-DsU722JF.js';
 
 const checkbox = {
 	size: "16",
@@ -76,7 +76,7 @@ const sdCheckboxCss = () => `sd-checkbox{display:block;height:var(--sd-checkbox-
 const SdCheckbox = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.update = createEvent(this, "sdUpdate");
+        this.update = createEvent(this, "sdUpdate", 7);
     }
     get el() { return getElement(this); }
     /** 현재 선택 상태 또는 배열 형태의 값 */

package/dist/esm/sd-confirm-modal.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, g as getElement, h } from './index-B8tGP77V.js';
+import { r as registerInstance, c as createEvent, g as getElement, h } from './index-DsU722JF.js';
 import { m as modalTokens } from './component.modal-mO5GcwI3.js';
 
 const CONFIRM_MODAL_DEFAULT_BUTTON = {
@@ -24,9 +24,9 @@ const sdConfirmModalCss = () => `sd-confirm-modal{display:block;width:fit-conten
 const SdConfirmModal = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.close = createEvent(this, "sdClose");
-        this.cancel = createEvent(this, "sdCancel");
-        this.ok = createEvent(this, "sdOk");
+        this.close = createEvent(this, "sdClose", 7);
+        this.cancel = createEvent(this, "sdCancel", 7);
+        this.ok = createEvent(this, "sdOk", 7);
     }
     get el() { return getElement(this); }
     hasSlottedContent = false;

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

@@ -1,12 +1,12 @@
-import { r as registerInstance, c as createEvent, h } from './index-B8tGP77V.js';
+import { r as registerInstance, c as createEvent, h } from './index-DsU722JF.js';
 
 const sdDateBoxCss = () => `.sd-date-box.sc-sd-date-box{display:flex;align-items:center;justify-content:center;width:38px;height:36px;font-size:14px;position:relative;box-sizing:border-box;text-align:center;transition:background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);border-radius:14px}.sd-date-box.sc-sd-date-box .sd-date-box__content.sc-sd-date-box{width:28px;height:28px;border-radius:14px;position:relative}.sd-date-box.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box{position:relative;z-index:2;-webkit-user-select:none;user-select:none;line-height:28px}.sd-date-box.sd-date-box--disabled.sc-sd-date-box{color:#CCCCCC;cursor:default !important;pointer-events:none}.sd-date-box.sc-sd-date-box:not(.sd-date-box--disabled){color:#333333;cursor:pointer}.sd-date-box.sd-hoverable.sc-sd-date-box:hover .sd-date-box__content.sc-sd-date-box{background:#D9EAFF}.sd-date-box.sd-date-box--in-range.sc-sd-date-box:not(.sd-date-box--disabled) .sd-date-box__content.sc-sd-date-box::before{content:"";position:absolute;top:0;left:-5px;width:calc(100% + 10px);height:100%;background:#D9EAFF}.sd-date-box.sd-date-box--in-range.sd-date-box--type-start.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::before{left:auto !important;width:19px !important;right:-5px}.sd-date-box.sd-date-box--in-range.sd-date-box--type-end.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::before{width:19px !important}.sd-date-box.sd-date-box--in-range.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box{font-weight:500}.sd-date-box.sd-date-box--selected.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::after,.sd-date-box.sd-date-box--type-start.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::after,.sd-date-box.sd-date-box--type-end.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::after{content:"";position:absolute;inset:0;background:#0075FF;border-radius:14px;z-index:1}.sd-date-box.sd-date-box--selected.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box,.sd-date-box.sd-date-box--type-start.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box,.sd-date-box.sd-date-box--type-end.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box{color:white;font-weight:700}.sd-date-box.sd-date-box--start-date.sd-date-box--end-date.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::before{display:none !important}.sd-date-box.sd-date-box--today.sc-sd-date-box:not(.sd-date-box--selected) .sd-date-box__content.sc-sd-date-box::after{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:28px;height:28px;border:1px solid #E1E1E1 !important;border-radius:14px}`;
 
 const SdDateBox = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.click = createEvent(this, "sdClick");
-        this.mouseOver = createEvent(this, "sdMouseOver");
+        this.click = createEvent(this, "sdClick", 7);
+        this.mouseOver = createEvent(this, "sdMouseOver", 7);
     }
     date = null;
     disabled = false;

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

@@ -1,12 +1,12 @@
-import { r as registerInstance, c as createEvent, g as getElement, h } from './index-B8tGP77V.js';
+import { r as registerInstance, c as createEvent, g as getElement, h } from './index-DsU722JF.js';
 
 const sdDatePickerCss = () => `.sd-date-picker.sc-sd-date-picker{width:100%;display:inline-block}.sd-date-picker.sc-sd-date-picker .sd-date-picker--disabled.sc-sd-date-picker .date-icon.sc-sd-date-picker{cursor:not-allowed !important;color:#888888 !important}.sd-date-picker.sc-sd-date-picker .sd-date-picker__input.sc-sd-date-picker{text-align:center !important}.sd-date-picker__menu.sc-sd-date-picker{border-radius:8px;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2)}`;
 
 const SdDatePicker = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.update = createEvent(this, "sdUpdate");
-        this.viewChange = createEvent(this, "sdViewChange");
+        this.update = createEvent(this, "sdUpdate", 7);
+        this.viewChange = createEvent(this, "sdViewChange", 7);
     }
     get el() { return getElement(this); }
     value = null;

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, g as getElement, h, F as Fragment } from './index-B8tGP77V.js';
+import { r as registerInstance, c as createEvent, g as getElement, h, F as Fragment } from './index-DsU722JF.js';
 import { u as useDatePicker, t as today } from './useDatePicker-DTrMR0rx.js';
 
 const addDays = (inputDate, days) => {
@@ -18,8 +18,8 @@ const sdDateRangePickerCss = () => `sd-date-range-picker.sc-sd-date-range-picker
 const SdDateRangePicker = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.update = createEvent(this, "sdUpdate");
-        this.viewChange = createEvent(this, "sdViewChange");
+        this.update = createEvent(this, "sdUpdate", 7);
+        this.viewChange = createEvent(this, "sdViewChange", 7);
     }
     get el() { return getElement(this); }
     value = ['', ''];

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, g as getElement, h } from './index-B8tGP77V.js';
+import { r as registerInstance, c as createEvent, g as getElement, h } from './index-DsU722JF.js';
 import { B as BaseDropdownEvent } from './base-dropdown-event-CRdYeSBK.js';
 import { B as BUTTON_CONFIG, g as getPresetName, c as PRESET_BORDER_COLORS$1, P as PRESET_CONTENT_COLORS$1, d as PRESET_HOVER_BACKGROUNDS$1, b as BUTTON_FOCUS_RING_COLOR } from './sd-button-v2.config-C7s1j4_P.js';
 import { b as buttonTokens } from './component.button-BcM38Hvd.js';
@@ -72,8 +72,8 @@ const SdDropdownButton = class extends BaseDropdownEvent {
     constructor(hostRef) {
         super();
         registerInstance(this, hostRef);
-        this.click = createEvent(this, "sdClick");
-        this.dropDownShow = createEvent(this, "sdDropDownShow");
+        this.click = createEvent(this, "sdClick", 7);
+        this.dropDownShow = createEvent(this, "sdDropDownShow", 7);
     }
     get el() { return getElement(this); }
     name = 'primary_sm';