@studious-creative/yumekit 0.1.9 → 0.1.10

package/dist/components/y-avatar.js

@@ -1,6 +1,32 @@
+/**
+ * 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 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 YumeAvatar extends HTMLElement {
     static get observedAttributes() {
-        return ["src", "alt", "size", "shape"];
+        return ["src", "alt", "size", "shape", "color"];
     }
 
     constructor() {
@@ -19,7 +45,9 @@ class YumeAvatar extends HTMLElement {
         const src = this.getAttribute("src");
         const altRaw = this.getAttribute("alt") || "AN";
         const shape = this.getAttribute("shape") || "circle";
+        const color = this.getAttribute("color") || "primary";
         const borderRadius = `var(--component-avatar-border-radius-${shape}, 9999px)`;
+        const [bgColor, textColor] = getColorVarPair(color);
 
         let dimensions;
         const size = this.getAttribute("size") || "medium";
@@ -68,8 +96,8 @@ class YumeAvatar extends HTMLElement {
             width: 100%;
             height: 100%;
             border-radius: ${borderRadius};
-            background-color: var(--primary-content--, #0576ff);
-            color: var(--primary-background-component, #0c0c0d);
+            background-color: ${bgColor};
+            color: ${textColor};
             display: flex;
             align-items: center;
             justify-content: center;

package/dist/components/y-card.js

@@ -1,3 +1,12 @@
+/**
+ * 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]
+ */
+
 // helpers/slot-utils.js
 function hideEmptySlotContainers(shadowRoot, slotsConfig = {}) {
     Object.entries(slotsConfig).forEach(([slotName, containerSelector]) => {

package/dist/components/y-dialog.js

@@ -208,6 +208,22 @@ class YumeDialog extends HTMLElement {
         dialog.appendChild(body);
         dialog.appendChild(footer);
         this.shadowRoot.appendChild(dialog);
+
+        // Hide slot containers that have no slotted content
+        const hideIfEmpty = (wrapper) => {
+            const slot = wrapper.querySelector("slot");
+            if (!slot) return;
+            const update = () => {
+                const hasContent =
+                    slot.assignedNodes({ flatten: true }).length > 0;
+                wrapper.style.display = hasContent ? "" : "none";
+            };
+            slot.addEventListener("slotchange", update);
+            update();
+        };
+        if (!this.closable) hideIfEmpty(header);
+        hideIfEmpty(body);
+        hideIfEmpty(footer);
     }
 }
 

package/dist/components/y-progress.d.ts

@@ -31,7 +31,6 @@ export class YumeProgress extends HTMLElement {
      */
     decrement(): void;
     get percentage(): number;
-    getBarColor(color: any): any;
     getSizeVar(size: any): any;
     getLabel(): string;
     render(): void;

package/dist/components/y-progress.js

@@ -1,3 +1,29 @@
+/**
+ * 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 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 YumeProgress extends HTMLElement {
     static get observedAttributes() {
         return [
@@ -154,19 +180,6 @@ class YumeProgress extends HTMLElement {
         return Math.max(0, Math.min(100, pct));
     }
 
-    getBarColor(color) {
-        const colorMap = {
-            primary: "var(--primary-content--)",
-            secondary: "var(--secondary-content--)",
-            base: "var(--base-content--)",
-            success: "var(--success-content--)",
-            warning: "var(--warning-content--)",
-            error: "var(--error-content--)",
-            help: "var(--help-content--)",
-        };
-        return colorMap[color] || color;
-    }
-
     getSizeVar(size) {
         const map = {
             small: "var(--component-progress-size-small)",
@@ -194,7 +207,7 @@ class YumeProgress extends HTMLElement {
     render() {
         const isIndeterminate = this.indeterminate;
         const pct = this.percentage;
-        const barColor = this.getBarColor(this.color);
+        const [barColor, barTextColor] = getColorVarPair(this.color, null);
         const sizeVar = this.getSizeVar(this.size);
         const isDisabled = this.disabled;
         const showLabel = this.labelDisplay && !isIndeterminate;
@@ -272,7 +285,7 @@ class YumeProgress extends HTMLElement {
                 }
 
                 .value-label--bar {
-                    color: var(--base-background-component);
+                    color: ${barTextColor};
                     width: calc(100% / (${pct || 1} / 100));
                 }
 

package/dist/components/y-theme.js

@@ -56,7 +56,12 @@ class YumeTheme extends HTMLElement {
         }
 
         this.shadowRoot.innerHTML = `
-            <style>${variablesCSS}</style>
+            <style>
+                ${variablesCSS}
+                :host {
+                    font-family: var(--font-family-body, sans-serif);
+                }
+            </style>
             ${themeCSS ? `<style>${themeCSS}</style>` : ""}
             <slot></slot>
         `;

package/dist/components/y-toast.d.ts

@@ -29,6 +29,5 @@ export class YumeToast extends HTMLElement {
     clear(): void;
     _removeToast(toast: any): void;
     _getPositionStyles(): any;
-    _getColorBg(color: any): any;
     render(): void;
 }

package/dist/components/y-toast.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 YumeToast extends HTMLElement {
@@ -150,11 +98,9 @@ class YumeToast extends HTMLElement {
         toast.setAttribute("aria-live", "assertive");
         toast.setAttribute("part", "toast");
 
-        const bgVar = this._getColorBg(color);
-        const resolvedBg = resolveCSSColor(bgVar, this);
-        const textColor = contrastTextColor(resolvedBg);
-        toast.style.backgroundColor = bgVar;
-        toast.style.color = textColor;
+        const [bg, fg] = getColorVarPair(color);
+        toast.style.backgroundColor = bg;
+        toast.style.color = fg;
 
         if (icon) {
             const iconEl = document.createElement("y-icon");
@@ -253,20 +199,6 @@ class YumeToast extends HTMLElement {
         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>

package/dist/components/y-tooltip.d.ts

@@ -21,6 +21,5 @@ export class YumeTooltip extends HTMLElement {
     get color(): string;
     show(): void;
     hide(): void;
-    _getBg(): any;
     render(): void;
 }

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,