@studious-creative/yumekit 0.1.8 → 0.1.10

package/dist/components/y-tooltip.js

@@ -1,79 +1,27 @@
-// 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).
+ * Return a [background, foreground] CSS variable pair for a color scheme.
+ * Background is `--{color}-content--`, foreground is `--{color}-content-inverse`.
+ * @param {string} color — one of base, primary, secondary, success, warning, error, help
+ * @param {string} [fallbackColor="base"] — color to fall back to when `color` is unrecognised.
+ *   Use `null` to pass the raw `color` string through as the background instead.
+ * @returns {[string, string]} — [bg var, fg var]
  */
-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)";
+function getColorVarPair(color, fallbackColor = "base") {
+    const map = {
+        base: ["var(--base-content--)", "var(--base-content-inverse)"],
+        primary: ["var(--primary-content--)", "var(--primary-content-inverse)"],
+        secondary: [
+            "var(--secondary-content--)",
+            "var(--secondary-content-inverse)",
+        ],
+        success: ["var(--success-content--)", "var(--success-content-inverse)"],
+        warning: ["var(--warning-content--)", "var(--warning-content-inverse)"],
+        error: ["var(--error-content--)", "var(--error-content-inverse)"],
+        help: ["var(--help-content--)", "var(--help-content-inverse)"],
+    };
+    if (map[color]) return map[color];
+    if (fallbackColor === null) return [color, "var(--base-content-inverse)"];
+    return map[fallbackColor] || map.base;
 }
 
 class YumeTooltip extends HTMLElement {
@@ -152,9 +100,8 @@ class YumeTooltip extends HTMLElement {
             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);
+                const [, fg] = getColorVarPair(this.color);
+                tip.style.color = fg;
                 tip.classList.add("visible");
             }
         }, this.delay);
@@ -185,24 +132,9 @@ class YumeTooltip extends HTMLElement {
         }
     }
 
-    _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);
+        const [bg, fg] = getColorVarPair(this.color);
 
         this.shadowRoot.innerHTML = `
             <style>

package/dist/icons/all.js

@@ -49,6 +49,52 @@ var collapseLeft = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 2
 
 var comments = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\"/>\n</svg>\n";
 
+var compAppbar = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <rect x=\"2\" y=\"3\" width=\"20\" height=\"5\" rx=\"1.5\"/>\n  <line x1=\"4\" y1=\"13\" x2=\"20\" y2=\"13\"/>\n  <line x1=\"4\" y1=\"17\" x2=\"15\" y2=\"17\"/>\n  <line x1=\"4\" y1=\"21\" x2=\"10\" y2=\"21\"/>\n</svg>\n";
+
+var compAvatar = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n  <circle cx=\"12\" cy=\"10\" r=\"3\"/>\n  <path d=\"M6 20.5c0-3 2.7-5.5 6-5.5s6 2.5 6 5.5\"/>\n</svg>\n";
+
+var compBadge = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <rect x=\"2\" y=\"6\" width=\"16\" height=\"16\" rx=\"2\"/>\n  <circle cx=\"20\" cy=\"5\" r=\"3.5\"/>\n</svg>\n";
+
+var compButton = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <rect x=\"2\" y=\"7\" width=\"20\" height=\"10\" rx=\"3\"/>\n  <line x1=\"8\" y1=\"12\" x2=\"16\" y2=\"12\"/>\n</svg>\n";
+
+var compCard = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <rect x=\"3\" y=\"2\" width=\"18\" height=\"20\" rx=\"2\"/>\n  <line x1=\"3\" y1=\"8\" x2=\"21\" y2=\"8\"/>\n  <line x1=\"7\" y1=\"12\" x2=\"17\" y2=\"12\"/>\n  <line x1=\"7\" y1=\"16\" x2=\"13\" y2=\"16\"/>\n</svg>\n";
+
+var compCheckbox = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"3\"/>\n  <polyline points=\"7 12.5 10.5 16 17 8\"/>\n</svg>\n";
+
+var compDialog = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\"/>\n  <line x1=\"7\" y1=\"9\" x2=\"17\" y2=\"9\"/>\n  <line x1=\"7\" y1=\"13\" x2=\"13\" y2=\"13\"/>\n</svg>\n";
+
+var compDrawer = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <rect x=\"2\" y=\"3\" width=\"20\" height=\"18\" rx=\"2\"/>\n  <line x1=\"9\" y1=\"3\" x2=\"9\" y2=\"21\"/>\n  <line x1=\"4\" y1=\"8\" x2=\"7\" y2=\"8\"/>\n  <line x1=\"4\" y1=\"12\" x2=\"7\" y2=\"12\"/>\n</svg>\n";
+
+var compIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <path d=\"M12 2c0 5.52-4.48 10-10 10 5.52 0 10 4.48 10 10 0-5.52 4.48-10 10-10-5.52 0-10-4.48-10-10z\"/>\n</svg>\n";
+
+var compInput = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <rect x=\"2\" y=\"6\" width=\"20\" height=\"12\" rx=\"2\"/>\n  <line x1=\"6\" y1=\"10\" x2=\"6\" y2=\"14\"/>\n</svg>\n";
+
+var compMenu = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <rect x=\"3\" y=\"2\" width=\"18\" height=\"20\" rx=\"2\"/>\n  <line x1=\"7\" y1=\"7\" x2=\"17\" y2=\"7\"/>\n  <line x1=\"7\" y1=\"12\" x2=\"17\" y2=\"12\"/>\n  <line x1=\"7\" y1=\"17\" x2=\"17\" y2=\"17\"/>\n</svg>\n";
+
+var compPanelbar = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"2\"/>\n  <line x1=\"2\" y1=\"9\" x2=\"22\" y2=\"9\"/>\n  <line x1=\"2\" y1=\"16\" x2=\"22\" y2=\"16\"/>\n</svg>\n";
+
+var compProgress = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <rect x=\"2\" y=\"8\" width=\"20\" height=\"8\" rx=\"4\"/>\n  <line x1=\"6\" y1=\"12\" x2=\"13\" y2=\"12\" stroke-width=\"3\" stroke-linecap=\"round\"/>\n</svg>\n";
+
+var compRadio = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n  <circle cx=\"12\" cy=\"12\" r=\"4\" fill=\"currentColor\" stroke=\"none\"/>\n</svg>\n";
+
+var compSelect = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <rect x=\"2\" y=\"7\" width=\"20\" height=\"10\" rx=\"2\"/>\n  <line x1=\"6\" y1=\"12\" x2=\"13\" y2=\"12\"/>\n  <polyline points=\"16 10 18 13 20 10\"/>\n</svg>\n";
+
+var compSlider = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <line x1=\"2\" y1=\"12\" x2=\"22\" y2=\"12\"/>\n  <circle cx=\"15\" cy=\"12\" r=\"4\"/>\n</svg>\n";
+
+var compSwitch = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <rect x=\"2\" y=\"6\" width=\"20\" height=\"12\" rx=\"6\"/>\n  <circle cx=\"16\" cy=\"12\" r=\"4\"/>\n</svg>\n";
+
+var compTable = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <rect x=\"2\" y=\"3\" width=\"20\" height=\"18\" rx=\"2\"/>\n  <line x1=\"2\" y1=\"9\" x2=\"22\" y2=\"9\"/>\n  <line x1=\"2\" y1=\"15\" x2=\"22\" y2=\"15\"/>\n  <line x1=\"10\" y1=\"3\" x2=\"10\" y2=\"21\"/>\n</svg>\n";
+
+var compTabs = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <rect x=\"2\" y=\"9\" width=\"20\" height=\"12\" rx=\"2\"/>\n  <path d=\"M5 9V6a1.5 1.5 0 0 1 1.5-1.5h5A1.5 1.5 0 0 1 13 6v3\"/>\n  <line x1=\"16\" y1=\"6\" x2=\"20\" y2=\"6\"/>\n</svg>\n";
+
+var compTag = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <rect x=\"2\" y=\"7\" width=\"20\" height=\"10\" rx=\"5\"/>\n  <line x1=\"15\" y1=\"10\" x2=\"17\" y2=\"14\"/>\n  <line x1=\"17\" y1=\"10\" x2=\"15\" y2=\"14\"/>\n</svg>\n";
+
+var compTheme = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n  <path d=\"M12 2a10 10 0 0 1 0 20z\" fill=\"currentColor\"/>\n</svg>\n";
+
+var compToast = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <rect x=\"3\" y=\"7\" width=\"18\" height=\"10\" rx=\"2\"/>\n  <circle cx=\"8\" cy=\"12\" r=\"2\"/>\n  <line x1=\"12\" y1=\"12\" x2=\"18\" y2=\"12\"/>\n</svg>\n";
+
+var compTooltip = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <path d=\"M3 5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-5l-2 4-2-4H5a2 2 0 0 1-2-2z\"/>\n</svg>\n";
+
 var compass = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n  <polygon points=\"16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76\"/>\n</svg>\n";
 
 var diagram = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <rect x=\"3\" y=\"3\" width=\"6\" height=\"6\" rx=\"1\"/>\n  <rect x=\"15\" y=\"3\" width=\"6\" height=\"6\" rx=\"1\"/>\n  <rect x=\"9\" y=\"15\" width=\"6\" height=\"6\" rx=\"1\"/>\n  <line x1=\"6\" y1=\"9\" x2=\"6\" y2=\"15\"/>\n  <line x1=\"6\" y1=\"15\" x2=\"9\" y2=\"15\"/>\n  <line x1=\"18\" y1=\"9\" x2=\"18\" y2=\"15\"/>\n  <line x1=\"18\" y1=\"15\" x2=\"15\" y2=\"15\"/>\n</svg>\n";
@@ -128,6 +174,29 @@ registerIcons({
     close,
     "collapse-left": collapseLeft,
     comments,
+    "comp-appbar": compAppbar,
+    "comp-avatar": compAvatar,
+    "comp-badge": compBadge,
+    "comp-button": compButton,
+    "comp-card": compCard,
+    "comp-checkbox": compCheckbox,
+    "comp-dialog": compDialog,
+    "comp-drawer": compDrawer,
+    "comp-icon": compIcon,
+    "comp-input": compInput,
+    "comp-menu": compMenu,
+    "comp-panelbar": compPanelbar,
+    "comp-progress": compProgress,
+    "comp-radio": compRadio,
+    "comp-select": compSelect,
+    "comp-slider": compSlider,
+    "comp-switch": compSwitch,
+    "comp-table": compTable,
+    "comp-tabs": compTabs,
+    "comp-tag": compTag,
+    "comp-theme": compTheme,
+    "comp-toast": compToast,
+    "comp-tooltip": compTooltip,
     compass,
     diagram,
     discord,