@waggylabs/yumekit 0.2.0

package/dist/components/y-table.js

@@ -0,0 +1,327 @@
+/* ================================================================== */
+/*  Centralized SVG icon strings for the YumeKit component library.   */
+/*                                                                     */
+/*  Each static icon also lives in its own .svg file in this directory */
+/*  so it can be used standalone (e.g. <img src="…">, CSS background, */
+/*  design tools, etc.).  The strings below mirror those files — keep  */
+/*  them in sync when editing an icon.                                 */
+/* ================================================================== */
+
+
+/**
+ * Dual-arrow sort indicator for table headers.
+ * @param {string} topColor  – fill for the up-arrow triangle.
+ * @param {string} bottomColor – fill for the down-arrow triangle.
+ */
+function sortArrows(topColor, bottomColor) {
+    return `<svg class="sort-icon" xmlns="http://www.w3.org/2000/svg" width="12" height="16" viewBox="0 0 12 16" aria-hidden="true">
+            <path d="M6 1 L11 7 L1 7 Z" fill="${topColor}"/>
+            <path d="M6 15 L11 9 L1 9 Z" fill="${bottomColor}"/>
+        </svg>`;
+}
+
+class YumeTable extends HTMLElement {
+    static get observedAttributes() {
+        return ["columns", "data", "striped", "size"];
+    }
+
+    constructor() {
+        super();
+        this.attachShadow({ mode: "open" });
+        this._sortField = null;
+        this._sortDir = "none"; // "none" | "asc" | "desc"
+        this._parsedData = [];
+        this._parsedColumns = [];
+    }
+
+    connectedCallback() {
+        this._parseAttributes();
+        this.render();
+    }
+
+    attributeChangedCallback(name, oldVal, newVal) {
+        if (oldVal === newVal) return;
+        this._parseAttributes();
+        this.render();
+    }
+
+    get columns() {
+        return this.getAttribute("columns");
+    }
+    set columns(val) {
+        this.setAttribute(
+            "columns",
+            typeof val === "string" ? val : JSON.stringify(val),
+        );
+    }
+
+    get data() {
+        return this.getAttribute("data");
+    }
+    set data(val) {
+        this.setAttribute(
+            "data",
+            typeof val === "string" ? val : JSON.stringify(val),
+        );
+    }
+
+    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);
+    }
+
+    _parseAttributes() {
+        try {
+            this._parsedColumns = JSON.parse(this.columns || "[]");
+        } catch {
+            this._parsedColumns = [];
+        }
+        try {
+            this._parsedData = JSON.parse(this.data || "[]");
+        } catch {
+            this._parsedData = [];
+        }
+    }
+
+    _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.dispatchEvent(
+            new CustomEvent("sort", {
+                detail: { field: this._sortField, direction: this._sortDir },
+                bubbles: true,
+                composed: true,
+            }),
+        );
+
+        this.render();
+    }
+
+    _getSortedData() {
+        const data = [...this._parsedData];
+        if (!this._sortField || this._sortDir === "none") return data;
+
+        const dir = this._sortDir === "asc" ? 1 : -1;
+        const field = this._sortField;
+
+        return data.sort((a, b) => {
+            const aVal = a[field];
+            const bVal = b[field];
+
+            if (aVal == null && bVal == null) return 0;
+            if (aVal == null) return 1;
+            if (bVal == null) return -1;
+
+            if (typeof aVal === "number" && typeof bVal === "number") {
+                return (aVal - bVal) * dir;
+            }
+
+            return String(aVal).localeCompare(String(bVal)) * dir;
+        });
+    }
+
+    _sortIcon(field) {
+        const active = this._sortField === field;
+        const dir = active ? this._sortDir : "none";
+
+        const topColor =
+            dir === "asc"
+                ? "var(--component-table-color, #f7f7fa)"
+                : "var(--component-table-color-light, #acaeb2)";
+        const bottomColor =
+            dir === "desc"
+                ? "var(--component-table-color, #f7f7fa)"
+                : "var(--component-table-color-light, #acaeb2)";
+
+        return sortArrows(topColor, bottomColor);
+    }
+
+    render() {
+        const columns = this._parsedColumns;
+        const rows = this._getSortedData();
+        const size = this.size;
+        const striped = this.striped;
+
+        const paddingVar = `var(--component-table-padding-${size}, 8px)`;
+
+        this.shadowRoot.innerHTML = "";
+
+        const style = document.createElement("style");
+        style.textContent = `
+            :host {
+                display: block;
+                font-family: var(--font-family-body, sans-serif);
+                color: var(--component-table-color, #f7f7fa);
+            }
+
+            .table-wrapper {
+                overflow-x: auto;
+            }
+
+            table {
+                width: 100%;
+                border-collapse: collapse;
+                table-layout: auto;
+            }
+
+            thead th {
+                position: relative;
+                padding: ${paddingVar};
+                text-align: left;
+                font-weight: 500;
+                font-size: var(--font-size-paragraph, 1em);
+                white-space: nowrap;
+                background: transparent;
+                border-bottom: var(--component-table-border-width-header, 2px) solid var(--component-table-border-color, #37383a);
+                user-select: none;
+            }
+
+            thead th.sortable {
+                cursor: pointer;
+            }
+
+            thead th.sortable:hover {
+                background: var(--component-table-hover-background, #292a2b);
+            }
+
+            .th-content {
+                display: inline-flex;
+                align-items: center;
+                gap: 6px;
+            }
+
+            .sort-icon {
+                flex-shrink: 0;
+                vertical-align: middle;
+            }
+
+            tbody td {
+                padding: ${paddingVar};
+                font-size: var(--font-size-paragraph, 1em);
+                border-bottom: var(--component-table-border-width, 2px) solid var(--component-table-border-color, #37383a);
+            }
+
+            tbody tr:last-child td {
+                border-bottom: none;
+            }
+
+            tbody td.row-header {
+                font-weight: 500;
+            }
+
+            ${
+                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");
+
+        columns.forEach((col) => {
+            const th = document.createElement("th");
+            th.setAttribute("scope", "col");
+
+            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 inner = document.createElement("span");
+            inner.className = "th-content";
+            inner.textContent = col.header || col.field;
+
+            if (sortable) {
+                const iconSpan = document.createElement("span");
+                iconSpan.innerHTML = this._sortIcon(col.field);
+                inner.appendChild(iconSpan);
+            }
+
+            th.appendChild(inner);
+            headerRow.appendChild(th);
+        });
+
+        thead.appendChild(headerRow);
+        table.appendChild(thead);
+
+        const tbody = document.createElement("tbody");
+
+        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);
+        });
+
+        table.appendChild(tbody);
+        wrapper.appendChild(table);
+        this.shadowRoot.appendChild(wrapper);
+    }
+}
+
+if (!customElements.get("y-table")) {
+    customElements.define("y-table", YumeTable);
+}
+
+export { YumeTable };

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

@@ -0,0 +1,21 @@
+export class YumeTabs extends HTMLElement {
+    static get observedAttributes(): string[];
+    _activeTab: string;
+    connectedCallback(): void;
+    attributeChangedCallback(name: any, oldVal: any, newVal: any): void;
+    set options(val: any);
+    get options(): any;
+    set size(val: string);
+    get size(): string;
+    set position(val: string);
+    get position(): string;
+    activateTab(id: any): void;
+    _setupEvents(): void;
+    _handleTabKeydown(e: any, buttons: any): void;
+    _findSiblingButton(buttons: any, fromIndex: any, direction: any): any;
+    _resolveActiveTab(tabs: any): void;
+    _getStyles(): string;
+    _createTabButton(tab: any): HTMLButtonElement;
+    _createPanel(slotName: any): HTMLDivElement;
+    render(): void;
+}

package/dist/components/y-tabs.js

@@ -0,0 +1,286 @@
+class YumeTabs extends HTMLElement {
+    static get observedAttributes() {
+        return ["options", "size", "position"];
+    }
+
+    constructor() {
+        super();
+        this.attachShadow({ mode: "open" });
+        this._activeTab = "";
+    }
+
+    connectedCallback() {
+        if (!this.hasAttribute("size")) this.setAttribute("size", "medium");
+        if (!this.hasAttribute("position"))
+            this.setAttribute("position", "top");
+        this.render();
+    }
+
+    attributeChangedCallback(name, oldVal, newVal) {
+        if (
+            (name === "options" || name === "size" || name === "position") &&
+            oldVal !== newVal
+        ) {
+            this.render();
+        }
+    }
+
+    get options() {
+        try {
+            return JSON.parse(this.getAttribute("options") || "[]");
+        } catch {
+            return [];
+        }
+    }
+
+    set options(val) {
+        this.setAttribute("options", JSON.stringify(val));
+        this.render();
+    }
+
+    get size() {
+        const sz = this.getAttribute("size");
+        return ["small", "medium", "large"].includes(sz) ? sz : "medium";
+    }
+
+    set size(val) {
+        if (["small", "medium", "large"].includes(val))
+            this.setAttribute("size", val);
+        else this.setAttribute("size", "medium");
+    }
+
+    get position() {
+        const pos = this.getAttribute("position");
+        return ["top", "bottom", "left", "right"].includes(pos) ? pos : "top";
+    }
+
+    set position(val) {
+        if (["top", "bottom", "left", "right"].includes(val))
+            this.setAttribute("position", val);
+        else this.setAttribute("position", "top");
+    }
+
+    activateTab(id) {
+        const tab = this.options.find((t) => t.id === id);
+        if (!tab || tab.disabled) return;
+        if (this._activeTab === id) return;
+        this._activeTab = id;
+        this.render();
+    }
+
+    _setupEvents() {
+        const buttons = Array.from(this.shadowRoot.querySelectorAll("button"));
+        buttons.forEach((button) => {
+            if (button.disabled) return;
+            button.addEventListener("click", () =>
+                this.activateTab(button.dataset.id),
+            );
+            button.addEventListener("keydown", (e) => {
+                this._handleTabKeydown(e, buttons);
+            });
+        });
+    }
+
+    _handleTabKeydown(e, buttons) {
+        const idx = buttons.indexOf(e.currentTarget);
+        if (e.key === "ArrowRight") {
+            e.preventDefault();
+            this._findSiblingButton(buttons, idx, 1)?.focus();
+        } else if (e.key === "ArrowLeft") {
+            e.preventDefault();
+            this._findSiblingButton(buttons, idx, -1)?.focus();
+        } else if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            this.activateTab(e.currentTarget.dataset.id);
+        }
+    }
+
+    _findSiblingButton(buttons, fromIndex, direction) {
+        for (let i = 1; i <= buttons.length; i++) {
+            const b =
+                buttons[
+                    (fromIndex + i * direction + buttons.length) %
+                        buttons.length
+                ];
+            if (!b.disabled) return b;
+        }
+        return null;
+    }
+
+    _resolveActiveTab(tabs) {
+        const currentInvalid =
+            !this._activeTab ||
+            tabs.find((t) => t.id === this._activeTab)?.disabled;
+        if (tabs.length && currentInvalid) {
+            this._activeTab = tabs.find((t) => !t.disabled)?.id || "";
+        }
+    }
+
+    _getStyles() {
+        const paddingVar = `var(--component-tab-padding-${this.size})`;
+        const gapVar = `var(--component-tab-gap-${this.size})`;
+        return `
+            :host {
+                display: flex;
+                font-family: var(--component-tabs-font-family, var(--font-family-body));
+            }
+            :host([position="top"]) { flex-direction: column; }
+            :host([position="bottom"]) { flex-direction: column-reverse; }
+            :host([position="left"]) { flex-direction: row; }
+            :host([position="right"]) { flex-direction: row-reverse; }
+
+            .tablist {
+                display: flex;
+                gap: 0;
+                position: relative;
+                z-index: 1;
+            }
+            :host([position="top"])    .tablist { margin-bottom: -1px; margin-top: 0; }
+            :host([position="bottom"]) .tablist { margin-top: -1px; margin-bottom: 0; }
+            :host([position="left"])   .tablist { flex-direction: column; margin-right: -1px; margin-left: 0; }
+            :host([position="right"])  .tablist { flex-direction: column; margin-left: -1px; margin-right: 0; }
+
+            :host([position="top"])    .tablist button { border-bottom: none; }
+            :host([position="bottom"]) .tablist button { border-top: none; }
+            :host([position="left"])   .tablist button { border-right: none; }
+            :host([position="right"])  .tablist button { border-left: none; }
+
+            button {
+                background: var(--component-tabs-border-color);
+                color: var(--component-tabs-color);
+                border: var(--component-tab-border-width) solid var(--component-tabs-border-color);
+                margin: 0;
+                padding: ${paddingVar};
+                cursor: pointer;
+                font-size: var(--font-size-label);
+                display: inline-flex;
+                align-items: center;
+                gap: ${gapVar};
+                transition: background 0.2s ease;
+                outline: none;
+                font-family: inherit;
+            }
+            :host([position="top"])    .tablist button:first-child { border-top-left-radius: var(--component-tab-border-radius-outer); }
+            :host([position="top"])    .tablist button:last-child  { border-top-right-radius: var(--component-tab-border-radius-outer); }
+            :host([position="bottom"]) .tablist button:first-child { border-bottom-left-radius: var(--component-tab-border-radius-outer); }
+            :host([position="bottom"]) .tablist button:last-child  { border-bottom-right-radius: var(--component-tab-border-radius-outer); }
+            :host([position="left"])   .tablist button:first-child   { border-top-left-radius: var(--component-tab-border-radius-outer); }
+            :host([position="left"])   .tablist button:last-child    { border-bottom-left-radius: var(--component-tab-border-radius-outer); }
+            :host([position="right"])  .tablist button:first-child  { border-top-right-radius: var(--component-tab-border-radius-outer); }
+            :host([position="right"])  .tablist button:last-child   { border-bottom-right-radius: var(--component-tab-border-radius-outer); }
+
+            button[aria-selected="true"] {
+                background: var(--component-tabs-background);
+            }
+            button:focus-visible {
+                outline: 2px solid var(--component-tabs-accent);
+                outline-offset: -1px;
+            }
+            button[disabled] {
+                opacity: 0.5;
+                cursor: not-allowed;
+            }
+            .icon-slot {
+                display: inline-flex;
+                align-items: center;
+                margin: 0 4px;
+            }
+            .tabpanel {
+                position: relative;
+                z-index: 0;
+                border: var(--component-tab-border-width) solid var(--component-tabs-border-color);
+                border-radius: var(--component-tab-border-radius-outer);
+                padding: var(--component-tab-content-padding);
+                background: var(--component-tabs-background);
+            }
+            :host([position="top"])    .tabpanel { border-top-left-radius: 0; }
+            :host([position="bottom"]) .tabpanel { border-bottom-left-radius: 0; }
+            :host([position="left"])   .tabpanel { border-top-left-radius: 0; }
+            :host([position="right"])  .tabpanel { border-top-right-radius: 0; }
+            :host([position="top"])    .tabpanel { margin-top: -1px; }
+            :host([position="bottom"]) .tabpanel { margin-bottom: -1px; }
+            :host([position="left"])   .tabpanel { margin-left: -1px; }
+            :host([position="right"])  .tabpanel { margin-right: -1px; }
+        `;
+    }
+
+    _createTabButton(tab) {
+        const isActive = tab.id === this._activeTab;
+        const isDisabled = !!tab.disabled;
+        const btn = document.createElement("button");
+        btn.id = `tab-${tab.id}`;
+        btn.setAttribute("role", "tab");
+        btn.setAttribute("part", "tab");
+        btn.setAttribute("aria-selected", isActive);
+        btn.setAttribute("aria-controls", `panel-${tab.id}`);
+        btn.setAttribute("aria-disabled", isDisabled);
+
+        if (isDisabled) btn.disabled = true;
+        btn.tabIndex = isActive && !isDisabled ? 0 : -1;
+        btn.dataset.id = tab.id;
+
+        if (this.querySelector(`[slot="left-icon-${tab.id}"]`)) {
+            const leftSlot = document.createElement("slot");
+            leftSlot.name = `left-icon-${tab.id}`;
+            leftSlot.className = "icon-slot";
+            btn.appendChild(leftSlot);
+        }
+
+        const labelSpan = document.createElement("span");
+        labelSpan.textContent = tab.label;
+        btn.appendChild(labelSpan);
+
+        if (this.querySelector(`[slot="right-icon-${tab.id}"]`)) {
+            const rightSlot = document.createElement("slot");
+            rightSlot.name = `right-icon-${tab.id}`;
+            rightSlot.className = "icon-slot";
+            btn.appendChild(rightSlot);
+        }
+
+        return btn;
+    }
+
+    _createPanel(slotName) {
+        const panel = document.createElement("div");
+        panel.className = "tabpanel";
+        panel.id = `panel-${this._activeTab}`;
+        panel.setAttribute("role", "tabpanel");
+        panel.setAttribute("part", "content");
+        panel.setAttribute("aria-labelledby", `tab-${this._activeTab}`);
+
+        const contentSlot = document.createElement("slot");
+        contentSlot.name = slotName;
+        panel.appendChild(contentSlot);
+        return panel;
+    }
+
+    render() {
+        const tabs = this.options;
+        this._resolveActiveTab(tabs);
+
+        const activeDef = tabs.find((t) => t.id === this._activeTab);
+
+        this.shadowRoot.innerHTML = "";
+
+        const style = document.createElement("style");
+        style.textContent = this._getStyles();
+        this.shadowRoot.appendChild(style);
+
+        const tablist = document.createElement("div");
+        tablist.className = "tablist";
+        tablist.setAttribute("role", "tablist");
+        tablist.setAttribute("part", "tablist");
+        tabs.forEach((tab) => tablist.appendChild(this._createTabButton(tab)));
+        this.shadowRoot.appendChild(tablist);
+
+        this.shadowRoot.appendChild(this._createPanel(activeDef?.slot || ""));
+
+        this._setupEvents();
+    }
+}
+
+if (!customElements.get("y-tabs")) {
+    customElements.define("y-tabs", YumeTabs);
+}
+
+export { YumeTabs };

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

@@ -0,0 +1,7 @@
+export class YumeTag extends HTMLElement {
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    attributeChangedCallback(name: any, oldValue: any, newValue: any): void;
+    render(): void;
+    getStyle(color: any, styleType: any, shape: any, size: any): string;
+}