@waggylabs/yumekit 0.4.0-beta.28 → 0.4.0-beta.30

package/dist/components/y-appbar.js

@@ -650,89 +650,22 @@ if (!customElements.get("y-button")) {
 
 // Allowlist-based SVG sanitizer — only known-safe elements and attributes are kept.
 const ALLOWED_ELEMENTS = new Set([
-    "svg",
-    "g",
-    "path",
-    "circle",
-    "ellipse",
-    "rect",
-    "line",
-    "polyline",
-    "polygon",
-    "text",
-    "tspan",
-    "defs",
-    "clippath",
-    "mask",
-    "lineargradient",
-    "radialgradient",
-    "stop",
-    "symbol",
-    "title",
-    "desc",
-    "metadata",
+    "svg", "g", "path", "circle", "ellipse", "rect", "line", "polyline",
+    "polygon", "text", "tspan", "defs", "clippath", "mask", "lineargradient",
+    "radialgradient", "stop", "symbol", "title", "desc", "metadata",
 ]);
 
 const ALLOWED_ATTRS = new Set([
-    "viewbox",
-    "xmlns",
-    "fill",
-    "stroke",
-    "stroke-width",
-    "stroke-linecap",
-    "stroke-linejoin",
-    "stroke-dasharray",
-    "stroke-dashoffset",
-    "stroke-miterlimit",
-    "stroke-opacity",
-    "fill-opacity",
-    "fill-rule",
-    "clip-rule",
-    "opacity",
-    "d",
-    "cx",
-    "cy",
-    "r",
-    "rx",
-    "ry",
-    "x",
-    "x1",
-    "x2",
-    "y",
-    "y1",
-    "y2",
-    "width",
-    "height",
-    "points",
-    "transform",
-    "id",
-    "class",
-    "clip-path",
-    "mask",
-    "offset",
-    "stop-color",
-    "stop-opacity",
-    "gradient-units",
-    "gradienttransform",
-    "gradientunits",
-    "spreadmethod",
-    "patternunits",
-    "patterntransform",
-    "font-size",
-    "font-family",
-    "font-weight",
-    "text-anchor",
-    "dominant-baseline",
-    "alignment-baseline",
-    "dx",
-    "dy",
-    "rotate",
-    "textlength",
-    "lengthadjust",
-    "display",
-    "visibility",
-    "color",
-    "vector-effect",
+    "viewbox", "xmlns", "fill", "stroke", "stroke-width", "stroke-linecap",
+    "stroke-linejoin", "stroke-dasharray", "stroke-dashoffset", "stroke-miterlimit",
+    "stroke-opacity", "fill-opacity", "fill-rule", "clip-rule", "opacity",
+    "d", "cx", "cy", "r", "rx", "ry", "x", "x1", "x2", "y", "y1", "y2",
+    "width", "height", "points", "transform", "id", "class", "clip-path", "mask",
+    "offset", "stop-color", "stop-opacity", "gradient-units", "gradienttransform",
+    "gradientunits", "spreadmethod", "patternunits", "patterntransform",
+    "font-size", "font-family", "font-weight", "text-anchor", "dominant-baseline",
+    "alignment-baseline", "dx", "dy", "rotate", "textlength", "lengthadjust",
+    "display", "visibility", "color", "vector-effect",
 ]);
 
 function sanitizeSvg(raw) {
@@ -770,9 +703,7 @@ function sanitizeSvg(raw) {
 const sanitizedSvgCache = new Map();
 
 function getCachedSvg(name) {
-    if (sanitizedSvgCache.has(name)) {
-        return sanitizedSvgCache.get(name);
-    }
+    if (sanitizedSvgCache.has(name)) return sanitizedSvgCache.get(name);
     const result = sanitizeSvg(getIcon(name));
     sanitizedSvgCache.set(name, result);
     return result;
@@ -783,6 +714,10 @@ class YumeIcon extends HTMLElement {
         return ["name", "size", "color", "label", "weight"];
     }
 
+    // -------------------------------------------------------------------------
+    // Lifecycle
+    // -------------------------------------------------------------------------
+
     constructor() {
         super();
         this.attachShadow({ mode: "open" });
@@ -797,76 +732,99 @@ class YumeIcon extends HTMLElement {
         this.render();
     }
 
-    /** The registered icon name to display. */
-    get name() {
-        return this.getAttribute("name") || "";
-    }
-    set name(val) {
-        this.setAttribute("name", val);
-    }
-
-    /** Icon size: "x-small" | "small" | "medium" | "large" | "x-large" (default "medium"). */
-    get size() {
-        return this.getAttribute("size") || "medium";
-    }
-    set size(val) {
-        this.setAttribute("size", val);
-    }
+    // -------------------------------------------------------------------------
+    // Getters / Setters
+    // -------------------------------------------------------------------------
 
     /** Color theme: "base" | "primary" | "secondary" | "success" | "warning" | "error" | "help". */
-    get color() {
-        return this.getAttribute("color") || "";
-    }
+    get color() { return this.getAttribute("color") || ""; }
     set color(val) {
         if (val) this.setAttribute("color", val);
         else this.removeAttribute("color");
     }
 
     /** Accessible label for the icon. When set, the icon gets role="img". */
-    get label() {
-        return this.getAttribute("label") || "";
-    }
+    get label() { return this.getAttribute("label") || ""; }
     set label(val) {
         if (val) this.setAttribute("label", val);
         else this.removeAttribute("label");
     }
 
+    /** The registered icon name to display. */
+    get name() { return this.getAttribute("name") || ""; }
+    set name(val) { this.setAttribute("name", val); }
+
+    /** Icon size: "x-small" | "small" | "medium" | "large" | "x-large" (default "medium"). */
+    get size() { return this.getAttribute("size") || "medium"; }
+    set size(val) { this.setAttribute("size", val); }
+
     /** Stroke weight: "thin" | "regular" | "thick". */
-    get weight() {
-        return this.getAttribute("weight") || "regular";
-    }
+    get weight() { return this.getAttribute("weight") || "regular"; }
     set weight(val) {
         if (val) this.setAttribute("weight", val);
         else this.removeAttribute("weight");
     }
 
+    // -------------------------------------------------------------------------
+    // Public
+    // -------------------------------------------------------------------------
+
+    render() {
+        const svg = getCachedSvg(this.name);
+        const sizeVal = this._getSize(this.size);
+        const colorVal = this.color ? this._getColor(this.color) : "inherit";
+        const weightVal = this._getWeight(this.weight);
+
+        this._updateAria();
+
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: inline-flex;
+                    align-items: center;
+                    justify-content: center;
+                    width: ${sizeVal};
+                    height: ${sizeVal};
+                    color: ${colorVal};
+                    line-height: 0;
+                }
+                .icon-wrapper svg {
+                    width: 100%;
+                    height: 100%;
+                }
+                ${this._getWeightCSS(weightVal)}
+            </style>
+            <span class="icon-wrapper" part="icon">${svg}</span>
+        `;
+    }
+
+    // -------------------------------------------------------------------------
+    // Private
+    // -------------------------------------------------------------------------
+
     _getColor(color) {
         const map = {
-            base: "var(--base-content--, #f7f7fa)",
-            primary: "var(--primary-content--, #0576ff)",
+            base:      "var(--base-content--, #f7f7fa)",
+            primary:   "var(--primary-content--, #0576ff)",
             secondary: "var(--secondary-content--, #04b8b8)",
-            success: "var(--success-content--, #2dba73)",
-            warning: "var(--warning-content--, #d17f04)",
-            error: "var(--error-content--, #b80421)",
-            help: "var(--help-content--, #5405ff)",
+            success:   "var(--success-content--, #2dba73)",
+            warning:   "var(--warning-content--, #d17f04)",
+            error:     "var(--error-content--, #b80421)",
+            help:      "var(--help-content--, #5405ff)",
         };
         if (map[color]) return map[color];
-        if (
-            color &&
-            (color.startsWith("#") ||
-                color.startsWith("rgb") ||
-                color.startsWith("hsl"))
-        )
+        if (color && (color.startsWith("#") || color.startsWith("rgb") || color.startsWith("hsl"))) {
             return color;
+        }
         return map.base;
     }
 
     _getSize(size) {
         const map = {
             "x-small": "var(--component-icon-size-x-small, 10px)",
-            small: "var(--component-icon-size-small, 14px)",
-            medium: "var(--component-icon-size-medium, 18px)",
-            large: "var(--component-icon-size-large, 22px)",
+            small:     "var(--component-icon-size-small, 14px)",
+            medium:    "var(--component-icon-size-medium, 18px)",
+            large:     "var(--component-icon-size-large, 22px)",
             "x-large": "var(--component-icon-size-x-large, 28px)",
         };
         return map[size] || map.medium;
@@ -874,56 +832,31 @@ class YumeIcon extends HTMLElement {
 
     _getWeight(weight) {
         const map = {
-            "x-thin": "1",
-            thin: "1.5",
-            regular: "2",
-            thick: "2.5",
+            "x-thin":  "1",
+            thin:      "1.5",
+            regular:   "2",
+            thick:     "2.5",
             "x-thick": "3",
         };
         return map[weight] || "";
     }
 
-    render() {
-        const svg = getCachedSvg(this.name);
-        const sizeVal = this._getSize(this.size);
-        const colorVal = this.color ? this._getColor(this.color) : "inherit";
-        const weightVal = this._getWeight(this.weight);
-        const label = this.label;
+    _getWeightCSS(weightVal) {
+        if (!weightVal) return "";
+        return `.icon-wrapper svg,
+                .icon-wrapper svg * { stroke-width: ${weightVal} !important; }`;
+    }
 
-        if (label) {
+    _updateAria() {
+        if (this.label) {
             this.setAttribute("role", "img");
-            this.setAttribute("aria-label", label);
+            this.setAttribute("aria-label", this.label);
             this.removeAttribute("aria-hidden");
         } else {
             this.setAttribute("aria-hidden", "true");
             this.removeAttribute("role");
             this.removeAttribute("aria-label");
         }
-
-        const weightCSS = weightVal
-            ? `.icon-wrapper svg,
-                .icon-wrapper svg * { stroke-width: ${weightVal} !important; }`
-            : "";
-
-        this.shadowRoot.innerHTML = `
-            <style>
-                :host {
-                    display: inline-flex;
-                    align-items: center;
-                    justify-content: center;
-                    width: ${sizeVal};
-                    height: ${sizeVal};
-                    color: ${colorVal};
-                    line-height: 0;
-                }
-                .icon-wrapper svg {
-                    width: 100%;
-                    height: 100%;
-                }
-                ${weightCSS}
-            </style>
-            <span class="icon-wrapper" part="icon">${svg}</span>
-        `;
     }
 }
 

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

@@ -17,9 +17,9 @@ export class YumeBadge extends HTMLElement {
     set value(val: string);
     /** The text content displayed inside the badge. */
     get value(): string;
-    getBadgeColors(color: any): any;
-    getBadgePosition(position: any, alignment: any): string;
-    getSizeAttributes(size: any): any;
-    hasTargetContent(): boolean;
     render(): void;
+    _getBadgeColors(color: any): any;
+    _getBadgePosition(position: any, alignment: any): string;
+    _getSizeAttributes(size: any): any;
+    _hasTargetContent(): boolean;
 }

package/dist/components/y-badge.js

@@ -5,6 +5,10 @@ class YumeBadge extends HTMLElement {
         return ["value", "position", "alignment", "color", "size"];
     }
 
+    // -------------------------------------------------------------------------
+    // Lifecycle
+    // -------------------------------------------------------------------------
+
     constructor() {
         super();
         this.attachShadow({ mode: "open" });
@@ -16,118 +20,44 @@ class YumeBadge extends HTMLElement {
     }
 
     attributeChangedCallback(name, oldValue, newValue) {
-        if (oldValue !== newValue) {
-            this.render();
-        }
+        if (oldValue !== newValue) this.render();
     }
 
+    // -------------------------------------------------------------------------
+    // Getters / Setters
+    // -------------------------------------------------------------------------
+
     /** Horizontal alignment of the badge: "left" | "right" (default "right"). */
-    get alignment() {
-        return this.getAttribute("alignment") || "right";
-    }
-    set alignment(val) {
-        this.setAttribute("alignment", val);
-    }
+    get alignment() { return this.getAttribute("alignment") || "right"; }
+    set alignment(val) { this.setAttribute("alignment", val); }
 
     /** Color theme: "primary" | "secondary" | "base" | "success" | "warning" | "error" | "help". */
-    get color() {
-        return this.getAttribute("color") || "primary";
-    }
-    set color(val) {
-        this.setAttribute("color", val);
-    }
+    get color() { return this.getAttribute("color") || "primary"; }
+    set color(val) { this.setAttribute("color", val); }
 
     /** Vertical position of the badge: "top" | "bottom" (default "top"). */
-    get position() {
-        return this.getAttribute("position") || "top";
-    }
-    set position(val) {
-        this.setAttribute("position", val);
-    }
+    get position() { return this.getAttribute("position") || "top"; }
+    set position(val) { this.setAttribute("position", val); }
 
     /** Badge size: "small" | "medium" | "large" (default "small"). */
-    get size() {
-        return this.getAttribute("size") || "small";
-    }
-    set size(val) {
-        this.setAttribute("size", val);
-    }
+    get size() { return this.getAttribute("size") || "small"; }
+    set size(val) { this.setAttribute("size", val); }
 
     /** The text content displayed inside the badge. */
-    get value() {
-        return this.getAttribute("value") || "";
-    }
-    set value(val) {
-        this.setAttribute("value", val);
-    }
-
-    getBadgeColors(color) {
-        const colorMap = {
-            primary: ["var(--primary-content--)", "var(--primary-content-inverse)"],
-            secondary: ["var(--secondary-content--)", "var(--secondary-content-inverse)"],
-            base: ["var(--base-content--)", "var(--base-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)"],
-        };
-        return colorMap[color] || [color, contrastTextColor(color)];
-    }
-
-    getBadgePosition(position, alignment) {
-        const offset = "var(--spacing-small, 6px)";
-        const vertical =
-            position === "top"
-                ? `top: calc(${offset} * -1);`
-                : `bottom: calc(${offset} * -1);`;
-        const horizontal =
-            alignment === "right"
-                ? `right: calc(${offset} * -1);`
-                : `left: calc(${offset} * -1);`;
-        return `${vertical} ${horizontal}`;
-    }
-
-    getSizeAttributes(size) {
-        const sizeMap = {
-            small: {
-                fontSize: "var(--font-size-small, 0.8em)",
-                padding: "var(--component-badge-padding-small)",
-                minSize: "var(--component-badge-size-small)",
-            },
-            medium: {
-                fontSize: "var(--font-size-label, 0.83em)",
-                padding: "var(--component-badge-padding-medium)",
-                minSize: "var(--component-badge-size-medium)",
-            },
-            large: {
-                fontSize: "var(--font-size-paragraph, 1em)",
-                padding: "var(--component-badge-padding-large)",
-                minSize: "var(--component-badge-size-large)",
-            },
-        };
-        return sizeMap[size] || sizeMap.small;
-    }
+    get value() { return this.getAttribute("value") || ""; }
+    set value(val) { this.setAttribute("value", val); }
 
-    hasTargetContent() {
-        return Array.from(this.childNodes).some((node) => {
-            if (node.nodeType === Node.ELEMENT_NODE) return true;
-            if (node.nodeType === Node.TEXT_NODE) {
-                return node.textContent.trim() !== "";
-            }
-            return false;
-        });
-    }
+    // -------------------------------------------------------------------------
+    // Public
+    // -------------------------------------------------------------------------
 
     render() {
-        const [badgeColor, badgeTextColor] = this.getBadgeColors(this.color);
-        const { fontSize, padding, minSize } = this.getSizeAttributes(
-            this.size,
-        );
-        const positionStyles = this.getBadgePosition(
-            this.position,
-            this.alignment,
-        );
-        const hasTarget = this.hasTargetContent();
+        const [badgeColor, badgeTextColor] = this._getBadgeColors(this.color);
+        const { fontSize, padding, minSize } = this._getSizeAttributes(this.size);
+        const hasTarget = this._hasTargetContent();
+        const positionCSS = hasTarget
+            ? this._getBadgePosition(this.position, this.alignment)
+            : "";
 
         this.shadowRoot.innerHTML = `
             <style>
@@ -138,7 +68,7 @@ class YumeBadge extends HTMLElement {
                 }
                 .badge {
                     position: ${hasTarget ? "absolute" : "static"};
-                    ${hasTarget ? positionStyles : ""}
+                    ${positionCSS}
                     background: ${badgeColor};
                     color: ${badgeTextColor};
                     font-size: ${fontSize};
@@ -162,6 +92,63 @@ class YumeBadge extends HTMLElement {
             <div class="badge" part="badge">${this.value}</div>
         `;
     }
+
+    // -------------------------------------------------------------------------
+    // Private
+    // -------------------------------------------------------------------------
+
+    _getBadgeColors(color) {
+        const colorMap = {
+            primary:   ["var(--primary-content--)",   "var(--primary-content-inverse)"],
+            secondary: ["var(--secondary-content--)", "var(--secondary-content-inverse)"],
+            base:      ["var(--base-content--)",      "var(--base-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)"],
+        };
+        return colorMap[color] || [color, contrastTextColor(color)];
+    }
+
+    _getBadgePosition(position, alignment) {
+        const offset = "var(--spacing-small, 6px)";
+        const vertical = position === "top"
+            ? `top: calc(${offset} * -1);`
+            : `bottom: calc(${offset} * -1);`;
+        const horizontal = alignment === "right"
+            ? `right: calc(${offset} * -1);`
+            : `left: calc(${offset} * -1);`;
+        return `${vertical} ${horizontal}`;
+    }
+
+    _getSizeAttributes(size) {
+        const sizeMap = {
+            small: {
+                fontSize: "var(--font-size-small, 0.8em)",
+                padding:  "var(--component-badge-padding-small)",
+                minSize:  "var(--component-badge-size-small)",
+            },
+            medium: {
+                fontSize: "var(--font-size-label, 0.83em)",
+                padding:  "var(--component-badge-padding-medium)",
+                minSize:  "var(--component-badge-size-medium)",
+            },
+            large: {
+                fontSize: "var(--font-size-paragraph, 1em)",
+                padding:  "var(--component-badge-padding-large)",
+                minSize:  "var(--component-badge-size-large)",
+            },
+        };
+        return sizeMap[size] || sizeMap.small;
+    }
+
+    _hasTargetContent() {
+        return Array.from(this.childNodes).some((node) => {
+            if (node.nodeType === Node.ELEMENT_NODE) return true;
+            if (node.nodeType === Node.TEXT_NODE) return node.textContent.trim() !== "";
+            return false;
+        });
+    }
 }
 
 if (!customElements.get("y-badge")) {

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

@@ -2,7 +2,15 @@ export class YumeCard extends HTMLElement {
     static get observedAttributes(): string[];
     connectedCallback(): void;
     attributeChangedCallback(name: any, oldValue: any, newValue: any): void;
-    updateColorStyles(): void;
-    updateElevationStyles(): void;
+    set color(val: string);
+    /** Color theme for the card surface. */
+    get color(): string;
+    set raised(val: boolean);
+    /** Whether the card uses a raised shadow instead of a border. */
+    get raised(): boolean;
     render(): void;
+    _bindSlotListeners(slotsConfig: any): void;
+    _buildStyleSheet(): CSSStyleSheet;
+    _updateColorStyles(): void;
+    _updateElevationStyles(): void;
 }