@waggylabs/yumekit 0.4.0-beta.34 → 0.4.0-beta.35

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

@@ -41,7 +41,7 @@ export class YumeAppbar extends HTMLElement {
     toggle(): void;
     render(): void;
     _buildCollapseButton(cfg: any, isCollapsed: any): HTMLElement;
-    _buildHeader(cfg: any): HTMLDivElement;
+    _buildHeader(): HTMLDivElement;
     _buildNavItem(item: any, cfg: any, isVertical: any, isCollapsed: any, menuDir: any): HTMLDivElement;
     _getBreakpointPx(): number;
     _initRender(): void;

package/dist/components/y-appbar.js

@@ -1274,7 +1274,7 @@ class YumeAppbar extends HTMLElement {
         return btn;
     }
 
-    _buildHeader(cfg) {
+    _buildHeader() {
         const header = document.createElement("div");
         header.className = "appbar-header";
         header.setAttribute("part", "header");
@@ -1666,7 +1666,7 @@ class YumeAppbar extends HTMLElement {
             `calc(${cfg.collapsedWidth} - 2 * var(--_appbar-padding) - 2 * var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) - 2 * var(--component-button-border-width, 1px))`,
         );
 
-        bar.appendChild(this._buildHeader(cfg));
+        bar.appendChild(this._buildHeader());
 
         const body = document.createElement("div");
         body.className = "appbar-body";

package/dist/components/y-panelbar.js

@@ -1,10 +1,19 @@
 class YumePanelBar extends HTMLElement {
+
+    // -------------------------------------------------------------------------
+    // Lifecycle
+    // -------------------------------------------------------------------------
+
     constructor() {
         super();
         this.attachShadow({ mode: "open" });
         this.render();
     }
 
+    // -------------------------------------------------------------------------
+    // Public
+    // -------------------------------------------------------------------------
+
     render() {
         const sheet = new CSSStyleSheet();
         sheet.replaceSync(`

package/dist/components/y-radio.js

@@ -174,7 +174,7 @@ class YumeRadio extends HTMLElement {
 
     _handleKey(e, index, radios) {
         const len = radios.length;
-        let newIndex = index;
+        let newIndex;
 
         if (e.key === "ArrowDown" || e.key === "ArrowRight") {
             e.preventDefault();

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

@@ -12,17 +12,18 @@ export class YumeTable extends HTMLElement {
     set data(val: string);
     /** Row data as a JSON string or array of objects keyed by column field names. */
     get data(): string;
+    set size(val: string);
+    /** Cell padding size: "small" | "medium" | "large" (default "medium"). */
+    get size(): string;
     set striped(val: boolean);
     /** Whether to show alternating row backgrounds. */
     get striped(): boolean;
-    set size(val: string);
-    /**
-     * Cell padding size: "small" | "medium" | "large" (default "medium").
-     */
-    get size(): string;
-    _parseAttributes(): void;
-    _onHeaderClick(field: any): void;
+    render(): void;
+    _buildBody(columns: any, rows: any): HTMLTableSectionElement;
+    _buildHeader(columns: any): HTMLTableSectionElement;
+    _buildStyles(): string;
     _getSortedData(): any[];
+    _onHeaderClick(field: any): void;
+    _parseAttributes(): void;
     _sortIcon(field: any): any;
-    render(): void;
 }

package/dist/components/y-table.js

@@ -7,6 +7,10 @@ class YumeTable extends HTMLElement {
         return ["columns", "data", "striped", "size"];
     }
 
+    // -------------------------------------------------------------------------
+    // Lifecycle
+    // -------------------------------------------------------------------------
+
     constructor() {
         super();
         this.attachShadow({ mode: "open" });
@@ -27,127 +31,136 @@ class YumeTable extends HTMLElement {
         this.render();
     }
 
+    // -------------------------------------------------------------------------
+    // Getters / Setters
+    // -------------------------------------------------------------------------
+
     /** Column definitions as a JSON string or array of { field, header?, sortable? } objects. */
-    get columns() {
-        return this.getAttribute("columns");
-    }
+    get columns() { return this.getAttribute("columns"); }
     set columns(val) {
-        this.setAttribute(
-            "columns",
-            typeof val === "string" ? val : JSON.stringify(val),
-        );
+        this.setAttribute("columns", typeof val === "string" ? val : JSON.stringify(val));
     }
 
     /** Row data as a JSON string or array of objects keyed by column field names. */
-    get data() {
-        return this.getAttribute("data");
-    }
+    get data() { return this.getAttribute("data"); }
     set data(val) {
-        this.setAttribute(
-            "data",
-            typeof val === "string" ? val : JSON.stringify(val),
-        );
+        this.setAttribute("data", typeof val === "string" ? val : JSON.stringify(val));
     }
 
+    /** Cell padding size: "small" | "medium" | "large" (default "medium"). */
+    get size() { return this.getAttribute("size") || "medium"; }
+    set size(val) { this.setAttribute("size", val); }
+
     /** Whether to show alternating row backgrounds. */
-    get striped() {
-        return this.hasAttribute("striped");
-    }
+    get striped() { return this.hasAttribute("striped"); }
     set striped(val) {
         if (val) this.setAttribute("striped", "");
         else this.removeAttribute("striped");
     }
 
-    /**
-     * Cell padding size: "small" | "medium" | "large" (default "medium").
-     */
-    get size() {
-        return this.getAttribute("size") || "medium";
-    }
-    set size(val) {
-        this.setAttribute("size", val);
-    }
+    // -------------------------------------------------------------------------
+    // Public
+    // -------------------------------------------------------------------------
 
-    _parseAttributes() {
-        try {
-            this._parsedColumns = JSON.parse(this.columns || "[]");
-        } catch {
-            this._parsedColumns = [];
-        }
-        try {
-            this._parsedData = JSON.parse(this.data || "[]");
-        } catch {
-            this._parsedData = [];
-        }
-    }
+    render() {
+        const columns = this._parsedColumns;
+        const rows = this._getSortedData();
 
-    _onHeaderClick(field) {
-        if (this._sortField === field) {
-            this._sortDir =
-                this._sortDir === "asc"
-                    ? "desc"
-                    : this._sortDir === "desc"
-                      ? "none"
-                      : "asc";
-            if (this._sortDir === "none") this._sortField = null;
-        } else {
-            this._sortField = field;
-            this._sortDir = "asc";
-        }
+        this.shadowRoot.innerHTML = "";
 
-        this.dispatchEvent(
-            new CustomEvent("sort", {
-                detail: { field: this._sortField, direction: this._sortDir },
-                bubbles: true,
-                composed: true,
-            }),
-        );
+        const style = document.createElement("style");
+        style.textContent = this._buildStyles();
+        this.shadowRoot.appendChild(style);
 
-        this.render();
-    }
+        const wrapper = document.createElement("div");
+        wrapper.className = "table-wrapper";
 
-    _getSortedData() {
-        const data = [...this._parsedData];
-        if (!this._sortField || this._sortDir === "none") return data;
+        const table = document.createElement("table");
+        table.setAttribute("role", "grid");
+        table.setAttribute("part", "table");
 
-        const dir = this._sortDir === "asc" ? 1 : -1;
-        const field = this._sortField;
+        table.appendChild(this._buildHeader(columns));
+        table.appendChild(this._buildBody(columns, rows));
 
-        return data.sort((a, b) => {
-            const aVal = a[field];
-            const bVal = b[field];
+        wrapper.appendChild(table);
+        this.shadowRoot.appendChild(wrapper);
+    }
 
-            if (aVal == null && bVal == null) return 0;
-            if (aVal == null) return 1;
-            if (bVal == null) return -1;
+    // -------------------------------------------------------------------------
+    // Private
+    // -------------------------------------------------------------------------
 
-            if (typeof aVal === "number" && typeof bVal === "number") {
-                return (aVal - bVal) * dir;
-            }
+    _buildBody(columns, rows) {
+        const tbody = document.createElement("tbody");
 
-            return String(aVal).localeCompare(String(bVal)) * dir;
+        rows.forEach((row) => {
+            const tr = document.createElement("tr");
+            tr.setAttribute("part", "row");
+            columns.forEach((col, colIdx) => {
+                const td = document.createElement("td");
+                td.setAttribute("part", "cell");
+                if (col.rowHeader || colIdx === 0) {
+                    td.classList.add("row-header");
+                }
+                td.textContent = row[col.field] ?? "";
+                tr.appendChild(td);
+            });
+            tbody.appendChild(tr);
         });
-    }
 
-    _sortIcon(field) {
-        const active = this._sortField === field;
-        const dir = active ? this._sortDir : "none";
-        if (dir === "none") return "";
-        return dir === "asc" ? arrowUp : arrowDown;
+        return tbody;
     }
 
-    render() {
-        const columns = this._parsedColumns;
-        const rows = this._getSortedData();
-        const size = this.size;
-        const striped = this.striped;
+    _buildHeader(columns) {
+        const thead = document.createElement("thead");
+        thead.setAttribute("part", "header");
+        const headerRow = document.createElement("tr");
 
-        const paddingVar = `var(--component-table-padding-${size}, 8px)`;
+        columns.forEach((col) => {
+            const th = document.createElement("th");
+            th.setAttribute("scope", "col");
 
-        this.shadowRoot.innerHTML = "";
+            const sortable = col.sortable !== false;
+            if (sortable) {
+                th.classList.add("sortable");
+                th.setAttribute(
+                    "aria-sort",
+                    this._sortField === col.field
+                        ? this._sortDir === "asc"
+                            ? "ascending"
+                            : this._sortDir === "desc"
+                                ? "descending"
+                                : "none"
+                        : "none",
+                );
+                th.addEventListener("click", () => this._onHeaderClick(col.field));
+            }
 
-        const style = document.createElement("style");
-        style.textContent = `
+            const inner = document.createElement("span");
+            inner.className = "th-content";
+            inner.textContent = col.header || col.field;
+
+            if (sortable) {
+                const icon = this._sortIcon(col.field);
+                if (icon) {
+                    const iconSpan = document.createElement("span");
+                    iconSpan.className = "sort-icon";
+                    iconSpan.innerHTML = icon;
+                    inner.appendChild(iconSpan);
+                }
+            }
+
+            th.appendChild(inner);
+            headerRow.appendChild(th);
+        });
+
+        thead.appendChild(headerRow);
+        return thead;
+    }
+
+    _buildStyles() {
+        const paddingVar = `var(--component-table-padding-${this.size}, 8px)`;
+        return `
             :host {
                 display: block;
                 font-family: var(--font-family-body, sans-serif);
@@ -209,94 +222,82 @@ class YumeTable extends HTMLElement {
                 font-weight: 400;
             }
 
-            ${
-                striped
-                    ? `tbody tr:nth-child(even) {
-                    background: var(--component-table-hover-background, #292a2b);
-                }`
-                    : ""
-            }
+            ${this.striped
+                ? `tbody tr:nth-child(even) {
+                background: var(--component-table-hover-background, #292a2b);
+            }`
+                : ""}
 
             tbody tr:hover {
                 background: var(--component-table-active-background, #46474a);
             }
         `;
-        this.shadowRoot.appendChild(style);
-
-        const wrapper = document.createElement("div");
-        wrapper.className = "table-wrapper";
-
-        const table = document.createElement("table");
-        table.setAttribute("role", "grid");
-        table.setAttribute("part", "table");
+    }
 
-        const thead = document.createElement("thead");
-        thead.setAttribute("part", "header");
-        const headerRow = document.createElement("tr");
+    _getSortedData() {
+        const data = [...this._parsedData];
+        if (!this._sortField || this._sortDir === "none") return data;
 
-        columns.forEach((col) => {
-            const th = document.createElement("th");
-            th.setAttribute("scope", "col");
+        const dir = this._sortDir === "asc" ? 1 : -1;
+        const field = this._sortField;
 
-            const sortable = col.sortable !== false;
-            if (sortable) {
-                th.classList.add("sortable");
-                th.setAttribute(
-                    "aria-sort",
-                    this._sortField === col.field
-                        ? this._sortDir === "asc"
-                            ? "ascending"
-                            : this._sortDir === "desc"
-                              ? "descending"
-                              : "none"
-                        : "none",
-                );
-                th.addEventListener("click", () =>
-                    this._onHeaderClick(col.field),
-                );
-            }
+        return data.sort((a, b) => {
+            const aVal = a[field];
+            const bVal = b[field];
 
-            const inner = document.createElement("span");
-            inner.className = "th-content";
-            inner.textContent = col.header || col.field;
+            if (aVal == null && bVal == null) return 0;
+            if (aVal == null) return 1;
+            if (bVal == null) return -1;
 
-            if (sortable) {
-                const icon = this._sortIcon(col.field);
-                if (icon) {
-                    const iconSpan = document.createElement("span");
-                    iconSpan.className = "sort-icon";
-                    iconSpan.innerHTML = icon;
-                    inner.appendChild(iconSpan);
-                }
+            if (typeof aVal === "number" && typeof bVal === "number") {
+                return (aVal - bVal) * dir;
             }
 
-            th.appendChild(inner);
-            headerRow.appendChild(th);
+            return String(aVal).localeCompare(String(bVal)) * dir;
         });
+    }
 
-        thead.appendChild(headerRow);
-        table.appendChild(thead);
+    _onHeaderClick(field) {
+        if (this._sortField === field) {
+            this._sortDir =
+                this._sortDir === "asc"
+                    ? "desc"
+                    : this._sortDir === "desc"
+                        ? "none"
+                        : "asc";
+            if (this._sortDir === "none") this._sortField = null;
+        } else {
+            this._sortField = field;
+            this._sortDir = "asc";
+        }
 
-        const tbody = document.createElement("tbody");
+        this.dispatchEvent(new CustomEvent("sort", {
+            detail: { field: this._sortField, direction: this._sortDir },
+            bubbles: true,
+            composed: true,
+        }));
 
-        rows.forEach((row) => {
-            const tr = document.createElement("tr");
-            tr.setAttribute("part", "row");
-            columns.forEach((col, colIdx) => {
-                const td = document.createElement("td");
-                td.setAttribute("part", "cell");
-                if (col.rowHeader || colIdx === 0) {
-                    td.classList.add("row-header");
-                }
-                td.textContent = row[col.field] ?? "";
-                tr.appendChild(td);
-            });
-            tbody.appendChild(tr);
-        });
+        this.render();
+    }
 
-        table.appendChild(tbody);
-        wrapper.appendChild(table);
-        this.shadowRoot.appendChild(wrapper);
+    _parseAttributes() {
+        try {
+            this._parsedColumns = JSON.parse(this.columns || "[]");
+        } catch {
+            this._parsedColumns = [];
+        }
+        try {
+            this._parsedData = JSON.parse(this.data || "[]");
+        } catch {
+            this._parsedData = [];
+        }
+    }
+
+    _sortIcon(field) {
+        const active = this._sortField === field;
+        const dir = active ? this._sortDir : "none";
+        if (dir === "none") return "";
+        return dir === "asc" ? arrowUp : arrowDown;
     }
 }
 

package/dist/components/y-tag.js

@@ -102,13 +102,13 @@ class YumeTag extends HTMLElement {
         const { color, styleType, shape, size } = this;
 
         const vars = {
-            primary: ["--primary-content--", "--primary-content-hover", "--primary-background-component", "--primary-content-inverse", "--primary-background-app"],
-            secondary: ["--secondary-content--", "--secondary-content-hover", "--secondary-background-component", "--secondary-content-inverse", "--secondary-background-app"],
-            base: ["--base-content--", "--base-content-lighter", "--base-background-component", "--base-content-inverse", "--base-background-app"],
-            success: ["--success-content--", "--success-content-hover", "--success-background-component", "--success-content-inverse", "--success-background-app"],
-            error: ["--error-content--", "--error-content-hover", "--error-background-component", "--error-content-inverse", "--error-background-app"],
-            warning: ["--warning-content--", "--warning-content-hover", "--warning-background-component", "--warning-content-inverse", "--warning-background-app"],
-            help: ["--help-content--", "--help-content-hover", "--help-background-component", "--help-content-inverse", "--help-background-app"],
+            primary: ["--primary-content--", "--primary-content-inverse", "--primary-background-app"],
+            secondary: ["--secondary-content--", "--secondary-content-inverse", "--secondary-background-app"],
+            base: ["--base-content--", "--base-content-inverse", "--base-background-app"],
+            success: ["--success-content--", "--success-content-inverse", "--success-background-app"],
+            error: ["--error-content--", "--error-content-inverse", "--error-background-app"],
+            warning: ["--warning-content--", "--warning-content-inverse", "--warning-background-app"],
+            help: ["--help-content--", "--help-content-inverse", "--help-background-app"],
         };
 
         const varEntry = vars[color];
@@ -155,7 +155,7 @@ class YumeTag extends HTMLElement {
 
         if (isCustomColor) return baseStyle + this._getCustomColorVariant(color, styleType);
 
-        const [content, , background, inverse, flatBackground] = varEntry || vars.base;
+        const [content, inverse, flatBackground] = varEntry || vars.base;
 
         const styleVariants = {
             filled: `