@studious-creative/yumekit 0.1.0

package/dist/components/y-tabs.js

@@ -0,0 +1,283 @@
+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(--spacing-large);
+                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("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("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");
+        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.js

@@ -0,0 +1,186 @@
+/* ================================================================== */
+/*  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.                                 */
+/* ================================================================== */
+
+
+/* ── Close / remove ───────────────────────────────────────────────── */
+
+const close = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="14" height="14" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"><line x1="6" y1="6" x2="14" y2="14" /><line x1="14" y1="6" x2="6" y2="14" /></svg>`;
+
+class YumeTag extends HTMLElement {
+    static get observedAttributes() {
+        return ["removable", "color", "style-type", "shape"];
+    }
+
+    constructor() {
+        super();
+        this.attachShadow({ mode: "open" });
+        this.render();
+    }
+
+    connectedCallback() {
+        this.render();
+    }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue !== newValue) this.render();
+    }
+
+    render() {
+        const removable = this.hasAttribute("removable");
+        const color = this.getAttribute("color") || "base";
+        const styleType = this.getAttribute("style-type") || "filled";
+        const shape = this.getAttribute("shape") || "square";
+
+        const style = document.createElement("style");
+        style.textContent = this.getStyle(color, styleType, shape);
+
+        this.shadowRoot.innerHTML = "";
+        this.shadowRoot.appendChild(style);
+        this.shadowRoot.innerHTML += `
+            <span class="tag">
+                <slot></slot>
+                ${
+                    removable
+                        ? `
+                    <button class="remove" aria-label="Remove tag">
+                        ${close}
+                    </button>
+                `
+                        : ""
+                }
+            </span>
+        `;
+
+        if (removable) {
+            this.shadowRoot
+                .querySelector(".remove")
+                .addEventListener("click", (e) => {
+                    e.stopPropagation();
+                    this.dispatchEvent(
+                        new CustomEvent("remove", {
+                            bubbles: true,
+                            composed: true,
+                        }),
+                    );
+                });
+        }
+    }
+
+    getStyle(color, styleType, shape) {
+        const vars = {
+            primary: [
+                "--primary-content--",
+                "--primary-content-hover",
+                "--primary-background-component",
+            ],
+            secondary: [
+                "--secondary-content--",
+                "--secondary-content-hover",
+                "--secondary-background-component",
+            ],
+            base: [
+                "--base-content--",
+                "--base-content-lighter",
+                "--base-background-component",
+            ],
+            success: [
+                "--success-content--",
+                "--success-content-hover",
+                "--success-background-component",
+            ],
+            error: [
+                "--error-content--",
+                "--error-content-hover",
+                "--error-background-component",
+            ],
+            warning: [
+                "--warning-content--",
+                "--warning-content-hover",
+                "--warning-background-component",
+            ],
+            help: [
+                "--help-content--",
+                "--help-content-hover",
+                "--help-background-component",
+            ],
+        };
+
+        const [content, hover, background] = vars[color] || vars.base;
+
+        const borderRadius =
+            shape === "round"
+                ? "var(--component-tag-border-radius-circle)"
+                : "var(--component-tag-border-radius-square)";
+
+        const baseStyle = `
+            :host {
+                display: inline-block;
+                font-family: var(--font-family-body, sans-serif);
+                font-size: var(--font-size-label, 0.83em);
+            }
+            .tag {
+                display: inline-flex;
+                align-items: center;
+                gap: var(--spacing-2x-small);
+                padding: 0 var(--component-tag-padding-medium, var(--spacing-x-small));
+                border: 1px solid transparent;
+                transition: background-color 0.2s, color 0.2s;
+                border-radius: ${borderRadius};
+            }
+            .remove {
+                all: unset;
+                cursor: pointer;
+                display: flex;
+                align-items: center;
+            }
+            .remove svg {
+                pointer-events: none;
+            }
+        `;
+
+        const styleVariants = {
+            filled: `
+                .tag {
+                    background: var(${content});
+                    color: var(${background});
+                }
+                .remove {
+                    color: var(${background});
+                }
+            `,
+            outlined: `
+                .tag {
+                    border: 1px solid var(${content});
+                    background: transparent;
+                    color: var(${content});
+                }
+                .remove {
+                    color: var(${content});
+                }
+            `,
+            flat: `
+                .tag {
+                    background: transparent;
+                    color: var(${content});
+                }
+                .remove {
+                    color: var(${content});
+                }
+            `,
+        };
+
+        return baseStyle + (styleVariants[styleType] || styleVariants.filled);
+    }
+}
+
+if (!customElements.get("y-tag")) {
+    customElements.define("y-tag", YumeTag);
+}
+
+export { YumeTag };

package/dist/components/y-theme.js

@@ -0,0 +1,84 @@
+class YumeTheme extends HTMLElement {
+    static defaultVariablesLoaded = false;
+    static defaultVariablesCSS = "";
+
+    static get observedAttributes() {
+        return ["theme-path"];
+    }
+
+    constructor() {
+        super();
+        this.attachShadow({ mode: "open" });
+    }
+
+    connectedCallback() {
+        this.loadDefaultVariables().then(() => {
+            const themePath = this.getAttribute("theme-path");
+            this.loadTheme(themePath);
+        });
+    }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === "theme-path" && oldValue !== newValue) {
+            this.loadTheme(newValue);
+        }
+    }
+
+    async loadDefaultVariables() {
+        if (!YumeTheme.defaultVariablesLoaded) {
+            try {
+                const variablesUrl = new URL(
+                    "styles/variables.css",
+                    document.baseURI,
+                );
+                const response = await fetch(variablesUrl.href);
+                YumeTheme.defaultVariablesCSS = await response.text();
+                YumeTheme.defaultVariablesLoaded = true;
+            } catch (e) {
+                console.error(
+                    "Failed to load default variables from styles/variables.css:",
+                    e,
+                );
+            }
+        }
+        return Promise.resolve();
+    }
+
+    async loadTheme(themePath) {
+        let themeCSS = "";
+        if (themePath) {
+            try {
+                const themeUrl = new URL(themePath, document.baseURI);
+                const response = await fetch(themeUrl.href);
+                themeCSS = await response.text();
+            } catch (e) {
+                console.error(`Failed to load theme from ${themePath}:`, e);
+            }
+        }
+
+        const combinedCSS = `
+        <style>
+          ${YumeTheme.defaultVariablesCSS}
+        </style>
+        ${themeCSS ? `<style>${themeCSS}</style>` : ""}
+      `;
+
+        this.shadowRoot.innerHTML = `${combinedCSS}<slot></slot>`;
+        this.applyVariablesToHost(YumeTheme.defaultVariablesCSS + themeCSS);
+    }
+
+    applyVariablesToHost(cssText) {
+        const regex = /--([\w-]+):\s*([^;]+);/g;
+        let match;
+
+        while ((match = regex.exec(cssText)) !== null) {
+            this.style.setProperty(`--${match[1]}`, match[2].trim());
+        }
+    }
+}
+
+if (!customElements.get("y-theme")) {
+    customElements.define("y-theme", YumeTheme);
+}
+
+export { YumeTheme };