@studious-creative/yumekit 0.1.0

package/dist/components/y-toast.js

@@ -0,0 +1,335 @@
+// helpers/slot-utils.js
+
+/**
+ * Resolve a CSS custom-property value to a concrete color string.
+ * Reads from the given element's computed style.
+ * @param {string} varExpr — e.g. "var(--primary-content--)"
+ * @param {HTMLElement} el — element to resolve against
+ * @returns {string} — resolved color or fallback
+ */
+function resolveCSSColor(varExpr, el) {
+    const match = varExpr.match(/var\(\s*(--[^,)]+)/);
+    if (!match) return varExpr;
+    const val = getComputedStyle(el).getPropertyValue(match[1]).trim();
+    return val || varExpr;
+}
+
+/**
+ * Parse a CSS color string (#hex, rgb(), etc.) to {r, g, b}.
+ * Returns null if it can't parse.
+ */
+function parseColor(colorStr) {
+    // #RGB, #RRGGBB, #RRGGBBAA
+    const hexMatch = colorStr.match(
+        /^#([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i,
+    );
+    if (hexMatch) {
+        let hex = hexMatch[1];
+        if (hex.length <= 4) {
+            hex = hex
+                .split("")
+                .map((c) => c + c)
+                .join("");
+        }
+        return {
+            r: parseInt(hex.slice(0, 2), 16),
+            g: parseInt(hex.slice(2, 4), 16),
+            b: parseInt(hex.slice(4, 6), 16),
+        };
+    }
+    // rgb(r, g, b) or rgba(r, g, b, a)
+    const rgbMatch = colorStr.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/);
+    if (rgbMatch) {
+        return {
+            r: parseInt(rgbMatch[1], 10),
+            g: parseInt(rgbMatch[2], 10),
+            b: parseInt(rgbMatch[3], 10),
+        };
+    }
+    return null;
+}
+
+/**
+ * Compute relative luminance of an {r,g,b} color (0-255 range).
+ * Returns a value between 0 (black) and 1 (white).
+ */
+function luminance({ r, g, b }) {
+    const [rs, gs, bs] = [r, g, b].map((c) => {
+        c /= 255;
+        return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+    });
+    return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
+}
+
+/**
+ * Given a background color string, return a CSS value for best contrast text.
+ * Uses WCAG relative luminance to pick dark or light, referencing theme tokens
+ * (--neutral-black / --neutral-white) with hardcoded fallbacks.
+ * @param {string} bgColor — any CSS color string (#hex, rgb(), etc.)
+ * @returns {string} CSS var() expression for contrasting text color
+ */
+function contrastTextColor(bgColor) {
+    const parsed = parseColor(bgColor);
+    if (!parsed) return "var(--neutral-white, #ffffff)";
+    return luminance(parsed) > 0.179
+        ? "var(--neutral-black, #000000)"
+        : "var(--neutral-white, #ffffff)";
+}
+
+class YumeToast extends HTMLElement {
+    static get observedAttributes() {
+        return ["position", "duration", "max"];
+    }
+
+    constructor() {
+        super();
+        this.attachShadow({ mode: "open" });
+        this._queue = [];
+    }
+
+    connectedCallback() {
+        this.render();
+    }
+
+    attributeChangedCallback(name, oldVal, newVal) {
+        if (oldVal === newVal) return;
+        this.render();
+    }
+
+    get position() {
+        return this.getAttribute("position") || "bottom-right";
+    }
+    set position(val) {
+        this.setAttribute("position", val);
+    }
+
+    get duration() {
+        return parseInt(this.getAttribute("duration") ?? "4000", 10);
+    }
+    set duration(val) {
+        this.setAttribute("duration", String(val));
+    }
+
+    get max() {
+        return parseInt(this.getAttribute("max") ?? "5", 10);
+    }
+    set max(val) {
+        this.setAttribute("max", String(val));
+    }
+
+    /**
+     * Show a toast notification.
+     * @param {Object} opts
+     * @param {string} opts.message  — Required text content.
+     * @param {string} [opts.color]  — base|primary|secondary|success|warning|error|help (default base).
+     * @param {number} [opts.duration] — Override container-level duration for this toast.
+     * @param {boolean} [opts.dismissible] — Show a close button (default true).
+     * @param {string} [opts.icon] — Optional Font Awesome class e.g. "fas fa-check".
+     * @returns {HTMLElement} The toast element (for manual removal).
+     */
+    show(opts = {}) {
+        const {
+            message = "",
+            color = "base",
+            duration = this.duration,
+            dismissible = true,
+            icon = null,
+        } = opts;
+
+        const container = this.shadowRoot.querySelector(".toast-container");
+        if (!container) return null;
+
+        const existing = container.querySelectorAll(".toast");
+        if (existing.length >= this.max) {
+            this._removeToast(existing[0]);
+        }
+
+        const toast = document.createElement("div");
+        toast.className = `toast color-${color}`;
+        toast.setAttribute("role", "alert");
+        toast.setAttribute("aria-live", "assertive");
+
+        const bgVar = this._getColorBg(color);
+        const resolvedBg = resolveCSSColor(bgVar, this);
+        const textColor = contrastTextColor(resolvedBg);
+        toast.style.backgroundColor = bgVar;
+        toast.style.color = textColor;
+
+        if (icon) {
+            const iconEl = document.createElement("i");
+            iconEl.className = `toast-icon ${icon}`;
+            toast.appendChild(iconEl);
+        }
+
+        const msg = document.createElement("span");
+        msg.className = "toast-message";
+        msg.textContent = message;
+        toast.appendChild(msg);
+
+        if (dismissible) {
+            const btn = document.createElement("button");
+            btn.className = "toast-close";
+            btn.setAttribute("aria-label", "Dismiss");
+            btn.innerHTML = "&#215;";
+            btn.addEventListener("click", () => this._removeToast(toast));
+            toast.appendChild(btn);
+        }
+
+        container.appendChild(toast);
+
+        // Trigger enter animation (next frame)
+        requestAnimationFrame(() => {
+            toast.classList.add("visible");
+        });
+
+        if (duration > 0) {
+            toast._timeout = setTimeout(
+                () => this._removeToast(toast),
+                duration,
+            );
+        }
+
+        this.dispatchEvent(
+            new CustomEvent("y-toast-show", {
+                detail: { message, color },
+                bubbles: true,
+            }),
+        );
+
+        return toast;
+    }
+
+    clear() {
+        const container = this.shadowRoot.querySelector(".toast-container");
+        if (!container) return;
+        container
+            .querySelectorAll(".toast")
+            .forEach((t) => this._removeToast(t));
+    }
+
+    _removeToast(toast) {
+        if (!toast || toast._removing) return;
+        toast._removing = true;
+        clearTimeout(toast._timeout);
+        toast.classList.remove("visible");
+        toast.classList.add("exit");
+        toast.addEventListener(
+            "transitionend",
+            () => {
+                toast.remove();
+                this.dispatchEvent(
+                    new CustomEvent("y-toast-dismiss", { bubbles: true }),
+                );
+            },
+            { once: true },
+        );
+        // Fallback if transition doesn't fire
+        setTimeout(() => {
+            if (toast.parentNode) {
+                toast.remove();
+            }
+        }, 350);
+    }
+
+    _getPositionStyles() {
+        const pos = this.position;
+        const base = `position: fixed; z-index: 10000; display: flex; flex-direction: column; gap: var(--spacing-small, 6px); pointer-events: none; max-width: 420px; min-width: 280px;`;
+        const pad = `var(--component-toast-offset, var(--spacing-x-large, 16px))`;
+
+        const map = {
+            "top-right": `${base} top: ${pad}; right: ${pad}; align-items: flex-end;`,
+            "top-left": `${base} top: ${pad}; left: ${pad}; align-items: flex-start;`,
+            "top-center": `${base} top: ${pad}; left: 50%; transform: translateX(-50%); align-items: center;`,
+            "bottom-right": `${base} bottom: ${pad}; right: ${pad}; align-items: flex-end;`,
+            "bottom-left": `${base} bottom: ${pad}; left: ${pad}; align-items: flex-start;`,
+            "bottom-center": `${base} bottom: ${pad}; left: 50%; transform: translateX(-50%); align-items: center;`,
+        };
+
+        return map[pos] || map["bottom-right"];
+    }
+
+    // "base" inverts the page: light content on dark, dark on light.
+    _getColorBg(color) {
+        const map = {
+            base: "var(--base-content--, #fff)",
+            primary: "var(--primary-content--, #0070f3)",
+            secondary: "var(--secondary-content--, #6c757d)",
+            success: "var(--success-content--, #28a745)",
+            warning: "var(--warning-content--, #ffc107)",
+            error: "var(--error-content--, #dc3545)",
+            help: "var(--help-content--, #6f42c1)",
+        };
+        return map[color] || map.base;
+    }
+
+    render() {
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    font-family: var(--font-family-body, sans-serif);
+                }
+
+                .toast-container {
+                    ${this._getPositionStyles()}
+                }
+
+                .toast {
+                    pointer-events: auto;
+                    display: flex;
+                    align-items: center;
+                    gap: var(--spacing-medium, 8px);
+                    padding: var(--component-toast-padding, var(--spacing-medium, 8px));
+                    border-radius: var(--component-toast-border-radius, var(--radii-small, 4px));
+                    font-size: var(--font-size-paragraph, 1em);
+                    line-height: 1.4;
+                    opacity: 0;
+                    transform: translateY(8px);
+                    transition: opacity 0.25s ease, transform 0.25s ease;
+                    box-shadow: var(--base-shadow, 0 2px 6px rgba(0,0,0,0.15));
+                }
+
+                .toast.visible {
+                    opacity: 1;
+                    transform: translateY(0);
+                }
+
+                .toast.exit {
+                    opacity: 0;
+                    transform: translateY(-8px);
+                }
+
+                .toast-icon {
+                    flex-shrink: 0;
+                    font-size: 1.1em;
+                }
+
+                .toast-message {
+                    flex: 1;
+                }
+
+                .toast-close {
+                    flex-shrink: 0;
+                    align-self: flex-start;
+                    background: none;
+                    border: none;
+                    color: inherit;
+                    font-size: 1.2em;
+                    cursor: pointer;
+                    padding: 0 0 0 var(--spacing-small, 6px);
+                    opacity: 0.7;
+                    line-height: 1;
+                }
+                .toast-close:hover {
+                    opacity: 1;
+                }
+            </style>
+            <div class="toast-container"></div>
+        `;
+    }
+}
+
+if (!customElements.get("y-toast")) {
+    customElements.define("y-toast", YumeToast);
+}
+
+export { YumeToast };

package/dist/components/y-tooltip.js

@@ -0,0 +1,320 @@
+// helpers/slot-utils.js
+
+/**
+ * Resolve a CSS custom-property value to a concrete color string.
+ * Reads from the given element's computed style.
+ * @param {string} varExpr — e.g. "var(--primary-content--)"
+ * @param {HTMLElement} el — element to resolve against
+ * @returns {string} — resolved color or fallback
+ */
+function resolveCSSColor(varExpr, el) {
+    const match = varExpr.match(/var\(\s*(--[^,)]+)/);
+    if (!match) return varExpr;
+    const val = getComputedStyle(el).getPropertyValue(match[1]).trim();
+    return val || varExpr;
+}
+
+/**
+ * Parse a CSS color string (#hex, rgb(), etc.) to {r, g, b}.
+ * Returns null if it can't parse.
+ */
+function parseColor(colorStr) {
+    // #RGB, #RRGGBB, #RRGGBBAA
+    const hexMatch = colorStr.match(
+        /^#([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i,
+    );
+    if (hexMatch) {
+        let hex = hexMatch[1];
+        if (hex.length <= 4) {
+            hex = hex
+                .split("")
+                .map((c) => c + c)
+                .join("");
+        }
+        return {
+            r: parseInt(hex.slice(0, 2), 16),
+            g: parseInt(hex.slice(2, 4), 16),
+            b: parseInt(hex.slice(4, 6), 16),
+        };
+    }
+    // rgb(r, g, b) or rgba(r, g, b, a)
+    const rgbMatch = colorStr.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/);
+    if (rgbMatch) {
+        return {
+            r: parseInt(rgbMatch[1], 10),
+            g: parseInt(rgbMatch[2], 10),
+            b: parseInt(rgbMatch[3], 10),
+        };
+    }
+    return null;
+}
+
+/**
+ * Compute relative luminance of an {r,g,b} color (0-255 range).
+ * Returns a value between 0 (black) and 1 (white).
+ */
+function luminance({ r, g, b }) {
+    const [rs, gs, bs] = [r, g, b].map((c) => {
+        c /= 255;
+        return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+    });
+    return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
+}
+
+/**
+ * Given a background color string, return a CSS value for best contrast text.
+ * Uses WCAG relative luminance to pick dark or light, referencing theme tokens
+ * (--neutral-black / --neutral-white) with hardcoded fallbacks.
+ * @param {string} bgColor — any CSS color string (#hex, rgb(), etc.)
+ * @returns {string} CSS var() expression for contrasting text color
+ */
+function contrastTextColor(bgColor) {
+    const parsed = parseColor(bgColor);
+    if (!parsed) return "var(--neutral-white, #ffffff)";
+    return luminance(parsed) > 0.179
+        ? "var(--neutral-black, #000000)"
+        : "var(--neutral-white, #ffffff)";
+}
+
+class YumeTooltip extends HTMLElement {
+    static get observedAttributes() {
+        return ["text", "position", "delay", "color"];
+    }
+
+    constructor() {
+        super();
+        this.attachShadow({ mode: "open" });
+        this._showTimeout = null;
+        this._hideTimeout = null;
+        this._visible = false;
+        this._onMouseEnter = this._onMouseEnter.bind(this);
+        this._onMouseLeave = this._onMouseLeave.bind(this);
+        this._onFocusIn = this._onFocusIn.bind(this);
+        this._onFocusOut = this._onFocusOut.bind(this);
+        this._onKeyDown = this._onKeyDown.bind(this);
+    }
+
+    connectedCallback() {
+        this.render();
+        this.addEventListener("mouseenter", this._onMouseEnter);
+        this.addEventListener("mouseleave", this._onMouseLeave);
+        this.addEventListener("focusin", this._onFocusIn);
+        this.addEventListener("focusout", this._onFocusOut);
+        document.addEventListener("keydown", this._onKeyDown);
+    }
+
+    disconnectedCallback() {
+        this.removeEventListener("mouseenter", this._onMouseEnter);
+        this.removeEventListener("mouseleave", this._onMouseLeave);
+        this.removeEventListener("focusin", this._onFocusIn);
+        this.removeEventListener("focusout", this._onFocusOut);
+        document.removeEventListener("keydown", this._onKeyDown);
+        clearTimeout(this._showTimeout);
+        clearTimeout(this._hideTimeout);
+    }
+
+    attributeChangedCallback(name, oldVal, newVal) {
+        if (oldVal === newVal) return;
+        this.render();
+    }
+
+    get text() {
+        return this.getAttribute("text") || "";
+    }
+    set text(val) {
+        this.setAttribute("text", val);
+    }
+
+    get position() {
+        return this.getAttribute("position") || "top";
+    }
+    set position(val) {
+        this.setAttribute("position", val);
+    }
+
+    get delay() {
+        return parseInt(this.getAttribute("delay") ?? "200", 10);
+    }
+    set delay(val) {
+        this.setAttribute("delay", String(val));
+    }
+
+    get color() {
+        return this.getAttribute("color") || "base";
+    }
+    set color(val) {
+        this.setAttribute("color", val);
+    }
+
+    show() {
+        clearTimeout(this._hideTimeout);
+        this._showTimeout = setTimeout(() => {
+            this._visible = true;
+            const tip = this.shadowRoot.querySelector(".tooltip");
+            if (tip) {
+                const bg = this._getBg();
+                const resolvedBg = resolveCSSColor(bg, this);
+                tip.style.color = contrastTextColor(resolvedBg);
+                tip.classList.add("visible");
+            }
+        }, this.delay);
+    }
+
+    hide() {
+        clearTimeout(this._showTimeout);
+        this._visible = false;
+        const tip = this.shadowRoot.querySelector(".tooltip");
+        if (tip) tip.classList.remove("visible");
+    }
+
+    _onMouseEnter() {
+        this.show();
+    }
+    _onMouseLeave() {
+        this.hide();
+    }
+    _onFocusIn() {
+        this.show();
+    }
+    _onFocusOut() {
+        this.hide();
+    }
+    _onKeyDown(e) {
+        if (e.key === "Escape" && this._visible) {
+            this.hide();
+        }
+    }
+
+    _getBg() {
+        const map = {
+            base: "var(--base-content--, #555)",
+            primary: "var(--primary-content--, #0070f3)",
+            secondary: "var(--secondary-content--, #6c757d)",
+            success: "var(--success-content--, #28a745)",
+            warning: "var(--warning-content--, #ffc107)",
+            error: "var(--error-content--, #dc3545)",
+            help: "var(--help-content--, #6f42c1)",
+        };
+        return map[this.color] || map.base;
+    }
+
+    render() {
+        const pos = this.position;
+        const bg = this._getBg();
+        const resolvedBg = resolveCSSColor(bg, this);
+        const fg = contrastTextColor(resolvedBg);
+
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: inline-block;
+                    position: relative;
+                    font-family: var(--font-family-body, sans-serif);
+                }
+
+                .trigger {
+                    display: inline-block;
+                }
+
+                .tooltip {
+                    position: absolute;
+                    z-index: 9999;
+                    white-space: nowrap;
+                    pointer-events: none;
+                    opacity: 0;
+                    transform: scale(0.95);
+                    transition: opacity 0.15s ease, transform 0.15s ease;
+                    padding: var(--component-tooltip-padding, var(--spacing-x-small, 4px)) var(--component-tooltip-padding-h, var(--spacing-medium, 8px));
+                    border-radius: var(--component-tooltip-border-radius, var(--radii-small, 4px));
+                    font-size: var(--font-size-small, 0.8em);
+                    background: ${bg};
+                    color: ${fg};
+                    line-height: 1.4;
+                }
+
+                .tooltip.visible {
+                    opacity: 1;
+                    transform: scale(1);
+                }
+
+                .tooltip::after {
+                    content: "";
+                    position: absolute;
+                    border: 5px solid transparent;
+                }
+
+                .tooltip.top {
+                    bottom: 100%;
+                    left: 50%;
+                    transform: translateX(-50%) scale(0.95);
+                    margin-bottom: 6px;
+                }
+                .tooltip.top.visible {
+                    transform: translateX(-50%) scale(1);
+                }
+                .tooltip.top::after {
+                    top: 100%;
+                    left: 50%;
+                    transform: translateX(-50%);
+                    border-top-color: ${bg};
+                }
+
+                .tooltip.bottom {
+                    top: 100%;
+                    left: 50%;
+                    transform: translateX(-50%) scale(0.95);
+                    margin-top: 6px;
+                }
+                .tooltip.bottom.visible {
+                    transform: translateX(-50%) scale(1);
+                }
+                .tooltip.bottom::after {
+                    bottom: 100%;
+                    left: 50%;
+                    transform: translateX(-50%);
+                    border-bottom-color: ${bg};
+                }
+
+                .tooltip.left {
+                    right: 100%;
+                    top: 50%;
+                    transform: translateY(-50%) scale(0.95);
+                    margin-right: 6px;
+                }
+                .tooltip.left.visible {
+                    transform: translateY(-50%) scale(1);
+                }
+                .tooltip.left::after {
+                    left: 100%;
+                    top: 50%;
+                    transform: translateY(-50%);
+                    border-left-color: ${bg};
+                }
+
+                .tooltip.right {
+                    left: 100%;
+                    top: 50%;
+                    transform: translateY(-50%) scale(0.95);
+                    margin-left: 6px;
+                }
+                .tooltip.right.visible {
+                    transform: translateY(-50%) scale(1);
+                }
+                .tooltip.right::after {
+                    right: 100%;
+                    top: 50%;
+                    transform: translateY(-50%);
+                    border-right-color: ${bg};
+                }
+            </style>
+            <slot class="trigger"></slot>
+            <div class="tooltip ${pos}" role="tooltip">${this.text}</div>
+        `;
+    }
+}
+
+if (!customElements.get("y-tooltip")) {
+    customElements.define("y-tooltip", YumeTooltip);
+}
+
+export { YumeTooltip };