@studious-creative/yumekit 0.1.0

package/dist/components/y-switch.js

@@ -0,0 +1,353 @@
+class YumeSwitch extends HTMLElement {
+    static formAssociated = true;
+
+    static get observedAttributes() {
+        return [
+            "checked",
+            "disabled",
+            "animate",
+            "toggle-label",
+            "label-display",
+            "label-position",
+            "size",
+            "value",
+        ];
+    }
+
+    constructor() {
+        super();
+        this._internals = this.attachInternals();
+        this.attachShadow({ mode: "open" });
+    }
+
+    connectedCallback() {
+        if (!this.hasAttribute("size")) this.setAttribute("size", "medium");
+        if (!this.hasAttribute("label-display"))
+            this.setAttribute("label-display", "true");
+        if (!this.hasAttribute("label-position"))
+            this.setAttribute("label-position", "top");
+        if (!this.hasAttribute("animate")) this.setAttribute("animate", "true");
+
+        this.render();
+        this.mirrorToggleLabels();
+
+        const sw = this.shadowRoot.querySelector(".switch");
+        sw.addEventListener("click", () => this.toggle());
+        sw.addEventListener("keydown", (e) => {
+            if (e.key === " " || e.key === "Enter") {
+                e.preventDefault();
+                this.toggle();
+            }
+        });
+    }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue !== newValue) {
+            this.update();
+        }
+    }
+
+    get checked() {
+        return this.hasAttribute("checked");
+    }
+
+    set checked(val) {
+        if (val) this.setAttribute("checked", "");
+        else this.removeAttribute("checked");
+        this.update();
+    }
+
+    get value() {
+        return this.getAttribute("value") || "on";
+    }
+
+    set value(val) {
+        this.setAttribute("value", val);
+        this.update();
+    }
+
+    toggle() {
+        if (this.hasAttribute("disabled")) return;
+        this.checked = !this.checked;
+        this.dispatchEvent(
+            new Event("change", { bubbles: true, composed: true }),
+        );
+    }
+
+    labelTag(pos) {
+        const labelPos = this.getAttribute("label-position");
+        const shouldRender =
+            (pos === "top" && (labelPos === "top" || labelPos === "left")) ||
+            (pos === "bottom" &&
+                (labelPos === "bottom" || labelPos === "right"));
+        return shouldRender ? `<label><slot name="label"></slot></label>` : "";
+    }
+
+    mirrorToggleLabels() {
+        requestAnimationFrame(() => {
+            const toggle = this.shadowRoot?.querySelector(".toggle");
+            if (!toggle) return;
+
+            toggle.innerHTML = "";
+
+            const offSlot = this.querySelector('[slot="off-label"]');
+            const onSlot = this.querySelector('[slot="on-label"]');
+
+            const fallbackOff = document.createTextNode("Off");
+            const fallbackOn = document.createTextNode("On");
+
+            const offClone = offSlot?.cloneNode(true) || fallbackOff;
+            const onClone = onSlot?.cloneNode(true) || fallbackOn;
+
+            const offWrapper = document.createElement("span");
+            offWrapper.className = "off";
+            offWrapper.appendChild(offClone);
+
+            const onWrapper = document.createElement("span");
+            onWrapper.className = "on";
+            onWrapper.appendChild(onClone);
+
+            toggle.appendChild(offWrapper);
+            toggle.appendChild(onWrapper);
+        });
+    }
+
+    update() {
+        this.updateSizeStyles();
+        this.updateTogglePosition();
+        this.updateToggleLabelDisplay();
+        this.updateLabelDisplay();
+        this.updateDirection();
+        this.updateAria();
+        this.updateFormValue();
+        this.mirrorToggleLabels();
+    }
+
+    updateSizeStyles() {
+        const size = this.getAttribute("size") || "medium";
+        const heightMap = { small: "24px", medium: "32px", large: "40px" };
+        const widthMap = { small: "44px", medium: "56px", large: "72px" };
+        const fontMap = {
+            small: "var(--font-size-small)",
+            medium: "var(--font-size-label)",
+            large: "var(--font-size-h4)",
+        };
+        this.style.setProperty("--switch-height", heightMap[size]);
+        this.style.setProperty("--switch-width-fixed", widthMap[size]);
+        this.style.setProperty(
+            "--toggle-size",
+            "calc(var(--switch-height) - (var(--switch-padding) * 2) - (var(--component-switch-border-width, 0px) * 2))",
+        );
+        this.style.setProperty("--switch-font-size", fontMap[size]);
+    }
+
+    updateTogglePosition() {
+        const isChecked = this.checked;
+        const showToggleLabels =
+            this.hasAttribute("toggle-label") &&
+            this.getAttribute("toggle-label") !== "false";
+        this.style.setProperty(
+            "--toggle-x",
+            isChecked
+                ? showToggleLabels
+                    ? "100%"
+                    : "calc(var(--switch-width) - var(--toggle-size) - (var(--switch-padding) * 2) - (var(--component-switch-border-width, 0px) * 2))"
+                : "0",
+        );
+        this.style.setProperty(
+            "--toggle-bg",
+            isChecked
+                ? "var(--primary-content--)"
+                : "var(--base-content-light)",
+        );
+        this.style.setProperty(
+            "--toggle-transition",
+            this.getAttribute("animate") === "false"
+                ? "none"
+                : "transform 0.25s ease, background 0.25s ease",
+        );
+    }
+
+    updateLabelDisplay() {
+        const showLabels = this.getAttribute("label-display") !== "false";
+        const showToggleLabels =
+            this.hasAttribute("toggle-label") &&
+            this.getAttribute("toggle-label") !== "false";
+        this.style.setProperty(
+            "--show-labels",
+            showLabels && showToggleLabels ? "flex" : "none",
+        );
+    }
+
+    updateToggleLabelDisplay() {
+        const showToggleLabels =
+            this.hasAttribute("toggle-label") &&
+            this.getAttribute("toggle-label") !== "false";
+        this.style.setProperty(
+            "--show-toggle-label",
+            showToggleLabels ? "inline-flex" : "none",
+        );
+        this.style.setProperty(
+            "--switch-width",
+            showToggleLabels ? "max-content" : "var(--switch-width-fixed)",
+        );
+        this.style.setProperty(
+            "--toggle-width",
+            showToggleLabels ? "auto" : "var(--toggle-size)",
+        );
+        this.style.setProperty(
+            "--toggle-padding",
+            showToggleLabels ? "0 var(--spacing-small)" : "0",
+        );
+        this.style.setProperty(
+            "--toggle-radius",
+            showToggleLabels
+                ? "var(--component-switch-border-radius)"
+                : "9999px",
+        );
+    }
+
+    updateDirection() {
+        const pos = this.getAttribute("label-position");
+        const directionMap = {
+            top: "column",
+            bottom: "column-reverse",
+            left: "row-reverse",
+            right: "row",
+        };
+        this.style.setProperty("--switch-dir", directionMap[pos] || "column");
+    }
+
+    updateAria() {
+        const sw = this.shadowRoot?.querySelector(".switch");
+        if (sw) {
+            sw.setAttribute("aria-checked", this.checked);
+            sw.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+        }
+    }
+
+    updateFormValue() {
+        this._internals.setFormValue(this.checked ? this.value : "");
+    }
+
+    render() {
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: inline-flex;
+                    flex-direction: var(--switch-dir, column);
+                    align-items: center;
+                    gap: var(--spacing-x-small);
+                    font-family: var(--font-family-body);
+                    --switch-padding: var(--component-switch-padding, 2px);
+                    --show-labels: flex;
+                    --show-toggle-label: none;
+                    --switch-width: max-content;
+                    --toggle-width: auto;
+                    --toggle-padding: 0 var(--spacing-small);
+                    --toggle-radius: var(--component-switch-border-radius);
+                }
+
+                .label {
+                    font-size: var(--font-size-label);
+                    color: var(--base-content--);
+                }
+
+                .switch {
+                    position: relative;
+                    display: inline-flex;
+                    align-items: center;
+                    background: var(--base-background-component);
+                    border: var(--component-switch-border-width) solid var(--base-background-border);
+                    border-radius: var(--component-switch-border-radius);
+                    cursor: pointer;
+                    height: var(--switch-height);
+                    font-size: var(--switch-font-size);
+                    box-sizing: border-box;
+                    padding: var(--switch-padding);
+                    width: var(--switch-width, max-content);
+                }
+
+                .track {
+                    display: flex;
+                    align-items: center;
+                    height: 100%;
+                    position: relative;
+                    z-index: 0;
+                }
+
+                .label-content {
+                    flex: 0 0 auto;
+                    align-items: center;
+                    justify-content: center;
+                    padding: 0 var(--spacing-small);
+                    white-space: nowrap;
+                    position: relative;
+                    z-index: 0;
+                    color: var(--base-content-light);
+                    display: var(--show-labels, flex);
+                }
+
+                .toggle {
+                    position: absolute;
+                    top: var(--switch-padding);
+                    bottom: var(--switch-padding);
+                    left: var(--switch-padding);
+                    height: calc(100% - (var(--switch-padding) + var(--switch-padding)));
+                    width: var(--toggle-width, auto);
+                    background: var(--toggle-bg, var(--base-content-light));
+                    color: var(--base-background-component);
+                    border-radius: var(--toggle-radius, var(--component-switch-border-radius));
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    padding: var(--toggle-padding, 0 var(--spacing-small));
+                    font-weight: 500;
+                    z-index: 1;
+                    white-space: nowrap;
+                    transform: translateX(var(--toggle-x, 0));
+                    transition: var(--toggle-transition, transform 0.25s ease, background 0.25s ease);
+                }
+
+                .toggle .on,
+                .toggle .off {
+                    display: none;
+                }
+
+                :host([checked]) .toggle .on {
+                    display: var(--show-toggle-label, none);
+                }
+
+                :host(:not([checked])) .toggle .off {
+                    display: var(--show-toggle-label, none);
+                }
+
+
+                :host([animate="false"]) .toggle {
+                    transition: none !important;
+                }
+            </style>
+
+            ${this.labelTag("top")}
+
+            <div class="switch" part="switch" tabindex="0" role="switch" aria-checked="${this.checked}" aria-disabled="${this.disabled}">
+                <div class="track">
+                    <div class="label-content"><slot name="off-label">Off</slot></div>
+                    <div class="label-content"><slot name="on-label">On</slot></div>
+                </div>
+                <div class="toggle" part="toggle">
+                    <span class="off"></span>
+                    <span class="on"></span>
+                </div>
+            </div>
+
+            ${this.labelTag("bottom")}
+        `;
+
+        this.update();
+    }
+}
+
+if (!customElements.get("y-switch")) {
+    customElements.define("y-switch", YumeSwitch);
+}

package/dist/components/y-table.js

@@ -0,0 +1,323 @@
+/* ================================================================== */
+/*  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, #333)"
+                : "var(--component-table-color-light, #bbb)";
+        const bottomColor =
+            dir === "desc"
+                ? "var(--component-table-color, #333)"
+                : "var(--component-table-color-light, #bbb)";
+
+        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, #000);
+            }
+
+            .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, #ccc);
+                user-select: none;
+            }
+
+            thead th.sortable {
+                cursor: pointer;
+            }
+
+            thead th.sortable:hover {
+                background: var(--component-table-hover-background, #f5f5f5);
+            }
+
+            .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, #ccc);
+            }
+
+            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, #f9f9f9);
+                }`
+                    : ""
+            }
+
+            tbody tr:hover {
+                background: var(--component-table-active-background, #eee);
+            }
+        `;
+        this.shadowRoot.appendChild(style);
+
+        const wrapper = document.createElement("div");
+        wrapper.className = "table-wrapper";
+
+        const table = document.createElement("table");
+        table.setAttribute("role", "grid");
+
+        const thead = document.createElement("thead");
+        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");
+            columns.forEach((col, colIdx) => {
+                const td = document.createElement("td");
+                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 };