@sellmate/design-system 1.0.50 → 1.0.51

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

@@ -1,146 +0,0 @@
-import { r as registerInstance, c as createEvent, h } from './index-B8tGP77V.js';
-
-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");
-    }
-    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: '616698f4a8efbae1013d1f962cadedf72575789a', 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: 'b8203a9ba9a6f385503289f299225e5df468ae8f', name: this.icon, size: sizeConfig.icon, color: contentColor })));
-    }
-};
-SdGhostButton.style = sdGhostButtonCss();
-
-export { SdGhostButton as sd_ghost_button };