@studious-creative/yumekit 0.1.0

package/dist/components/y-card.js

@@ -0,0 +1,178 @@
+// helpers/slot-utils.js
+function hideEmptySlotContainers(shadowRoot, slotsConfig = {}) {
+    Object.entries(slotsConfig).forEach(([slotName, containerSelector]) => {
+        const slot = shadowRoot.querySelector(
+            `slot${slotName ? `[name="${slotName}"]` : ":not([name])"}`,
+        );
+        const container = shadowRoot.querySelector(containerSelector);
+
+        if (slot && container) {
+            const assigned = slot
+                .assignedNodes({ flatten: true })
+                .filter((n) => {
+                    return !(
+                        n.nodeType === Node.TEXT_NODE &&
+                        n.textContent.trim() === ""
+                    );
+                });
+
+            container.style.display = assigned.length > 0 ? "" : "none";
+        }
+    });
+}
+
+class YumeCard extends HTMLElement {
+    static get observedAttributes() {
+        return ["color", "raised"];
+    }
+
+    constructor() {
+        super();
+        this.attachShadow({ mode: "open" });
+        this.render();
+    }
+
+    connectedCallback() {
+        this.updateColorStyles();
+        this.updateElevationStyles();
+    }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue !== newValue) {
+            if (name === "color") {
+                this.updateColorStyles();
+            }
+            if (name === "raised") {
+                this.updateElevationStyles();
+            }
+            this.render();
+        }
+    }
+
+    updateColorStyles() {
+        const color = this.getAttribute("color") || "base";
+
+        const colorVars = {
+            primary: [
+                "--base-content--",
+                "--primary-background-component",
+                "--primary-background-border",
+                "--primary-background-active",
+            ],
+            secondary: [
+                "--base-content--",
+                "--secondary-background-component",
+                "--secondary-background-border",
+                "--secondary-background-active",
+            ],
+            base: [
+                "--base-content--",
+                "--base-background-component",
+                "--base-background-border",
+                "--base-background-active",
+            ],
+            success: [
+                "--base-content--",
+                "--success-background-component",
+                "--success-background-border",
+                "--success-background-active",
+            ],
+            error: [
+                "--base-content--",
+                "--error-background-component",
+                "--error-background-border",
+                "--error-background-active",
+            ],
+            warning: [
+                "--base-content--",
+                "--warning-background-component",
+                "--warning-background-border",
+                "--warning-background-active",
+            ],
+        };
+
+        const selected = colorVars[color] || colorVars.base;
+
+        this.style.setProperty("--card-content-color", `var(${selected[0]})`);
+        this.style.setProperty("--card-border-color", `var(${selected[2]})`);
+        this.style.setProperty("--card-background", `var(${selected[1]})`);
+        this.style.setProperty(
+            "--card-section-background",
+            `var(${selected[2]})`,
+        );
+    }
+
+    updateElevationStyles() {
+        const isRaised = this.hasAttribute("raised");
+
+        if (isRaised) {
+            this.style.setProperty("--card-border-width", "0");
+            this.style.setProperty("--card-box-shadow", "var(--base-shadow)");
+        } else {
+            this.style.setProperty(
+                "--card-border-width",
+                "var(--component-card-border-width)",
+            );
+            this.style.setProperty("--card-box-shadow", "none");
+        }
+    }
+
+    render() {
+        const sheet = new CSSStyleSheet();
+        sheet.replaceSync(`
+            :host {
+                display: block;
+                box-sizing: border-box;
+                background: var(--card-background, var(--base-background-component));
+                border: var(--card-border-width, var(--component-card-border-width)) solid var(--card-border-color, var(--base-background-border));
+                border-radius: var(--component-card-border-radius-outer);
+                font-family: var(--font-family-body);
+                color: var(--card-content-color, var(--base-content--));
+                box-shadow: var(--card-box-shadow, none);
+            }
+
+            .header {
+                padding: var(--component-card-padding-outer);
+                border-bottom: var(--component-card-inner-border-width) solid var(--card-border-color, var(--base-background-border));
+            }
+
+            .body {
+                padding: var(--component-card-padding-outer);
+            }
+
+            .footer {
+                padding: var(--component-card-padding-inner) var(--component-card-padding-outer);
+                border-top: var(--component-card-inner-border-width) solid var(--card-border-color, var(--base-background-border));
+            }
+
+            ::slotted(*) {
+                margin: 0;
+            }
+        `);
+
+        this.shadowRoot.adoptedStyleSheets = [sheet];
+
+        this.shadowRoot.innerHTML = `
+            <div class="header" part="header">
+                <slot name="header"></slot>
+            </div>
+            <div class="body" part="body">
+                <slot></slot>
+            </div>
+            <div class="footer" part="footer">
+                <slot name="footer"></slot>
+            </div>
+        `;
+
+        hideEmptySlotContainers(this.shadowRoot, {
+            header: ".header",
+            footer: ".footer",
+        });
+    }
+}
+
+if (!customElements.get("y-card")) {
+    customElements.define("y-card", YumeCard);
+}
+
+export { YumeCard };

package/dist/components/y-checkbox.js

@@ -0,0 +1,246 @@
+/* ================================================================== */
+/*  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.                                 */
+/* ================================================================== */
+
+
+/* ── Checkbox marks ───────────────────────────────────────────────── */
+
+const checkmark = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><polyline points="5 13 10 17 19 6" fill="none" stroke="currentColor" stroke-width="2"/></svg>`;
+
+const indeterminate = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="4" y="11" width="16" height="2" rx="1" ry="1" fill="currentColor"/></svg>`;
+
+class YumeCheckbox extends HTMLElement {
+    static formAssociated = true;
+
+    static get observedAttributes() {
+        return [
+            "checked",
+            "disabled",
+            "indeterminate",
+            "label-position",
+            "name",
+            "value",
+        ];
+    }
+
+    constructor() {
+        super();
+        this._internals = this.attachInternals();
+        this.attachShadow({ mode: "open" });
+        this.render();
+    }
+
+    connectedCallback() {
+        if (!this.hasAttribute("label-position")) {
+            this.setAttribute("label-position", "right");
+        }
+
+        this._internals.setFormValue(this.checked ? this.value : null);
+    }
+
+    attributeChangedCallback(name) {
+        if (name === "checked" || name === "value") {
+            this._internals.setFormValue(this.checked ? this.value : null);
+        }
+
+        if (name === "indeterminate") {
+            this.updateIcon();
+        }
+
+        if (name === "label-position") {
+            this.render();
+        }
+
+        this.updateState();
+    }
+
+    get checked() {
+        return this.hasAttribute("checked");
+    }
+
+    set checked(val) {
+        if (val) this.setAttribute("checked", "");
+        else this.removeAttribute("checked");
+    }
+
+    get disabled() {
+        return this.hasAttribute("disabled");
+    }
+
+    set disabled(val) {
+        if (val) this.setAttribute("disabled", "");
+        else this.removeAttribute("disabled");
+    }
+
+    get indeterminate() {
+        return this.hasAttribute("indeterminate");
+    }
+
+    set indeterminate(val) {
+        if (val) this.setAttribute("indeterminate", "");
+        else this.removeAttribute("indeterminate");
+    }
+
+    get value() {
+        return this.getAttribute("value") || "on";
+    }
+
+    set value(val) {
+        this.setAttribute("value", val);
+    }
+
+    get name() {
+        return this.getAttribute("name");
+    }
+
+    toggle() {
+        if (this.disabled) return;
+        if (this.indeterminate) {
+            this.indeterminate = false;
+            this.checked = true;
+        } else {
+            this.checked = !this.checked;
+        }
+
+        this.dispatchEvent(
+            new Event("change", { bubbles: true, composed: true }),
+        );
+    }
+
+    updateIcon() {
+        const icon = this.shadowRoot.querySelector(".icon");
+        if (!icon) return;
+
+        if (this.indeterminate) {
+            icon.innerHTML = indeterminate;
+        } else if (this.checked) {
+            icon.innerHTML = checkmark;
+        } else {
+            icon.innerHTML = "";
+        }
+    }
+
+    updateState() {
+        const box = this.shadowRoot.querySelector(".checkbox");
+        box.setAttribute(
+            "aria-checked",
+            this.indeterminate ? "mixed" : this.checked ? "true" : "false",
+        );
+        this.updateIcon();
+    }
+
+    render() {
+        const labelPosition = this.getAttribute("label-position") || "right";
+        const isDisabled = this.disabled;
+
+        const sheet = new CSSStyleSheet();
+        sheet.replaceSync(`
+            :host {
+                display: inline-flex;
+                align-items: center;
+                line-height: 1;
+                vertical-align: middle;
+                font-family: var(--font-family-body);
+                cursor: ${isDisabled ? "not-allowed" : "pointer"};
+                opacity: ${isDisabled ? "0.6" : "1"};
+            }
+
+            .wrapper {
+                display: inline-flex;
+                align-items: center;
+                gap: var(--spacing-x-small, 6px);
+                line-height: 1;
+                flex-direction: ${
+                    labelPosition === "top"
+                        ? "column"
+                        : labelPosition === "bottom"
+                          ? "column-reverse"
+                          : labelPosition === "left"
+                            ? "row-reverse"
+                            : "row"
+                };
+            }
+
+            .checkbox {
+                width: var(--component-checkbox-size, 20px);
+                height: var(--component-checkbox-size, 20px);
+                border: var(--component-inputs-border-width, 2px) solid var(--component-checkbox-border-color);
+                border-radius: var(--component-inputs-border-radius-outer, 4px);
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                background: var(--component-checkbox-background);
+                box-sizing: border-box;
+                transition: border-color 0.2s ease;
+                line-height: 0;
+            }
+
+            .checkbox:hover {
+                border-color: var(--component-checkbox-accent);
+            }
+
+            .checkbox svg {
+                width: var(--component-checkbox-icon-size, 16px);
+                height: var(--component-checkbox-icon-size, 16px);
+                stroke: var(--component-checkbox-accent);
+                display: block;
+            }
+
+            .label {
+                display: inline-flex;
+                align-items: center;
+                font-size: 0.9em;
+                line-height: 1;
+                color: var(--component-checkbox-color);
+            }
+
+            .icon {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 100%;
+                height: 100%;
+                line-height: 0;
+            }
+
+        `);
+
+        this.shadowRoot.adoptedStyleSheets = [sheet];
+
+        this.shadowRoot.innerHTML = `
+            <div class="wrapper">
+                <div class="checkbox" role="checkbox" tabindex="0">
+                    <span class="icon"></span>
+                </div>
+                <label part="label">
+                    <slot></slot>
+                </label>
+            </div>
+        `;
+
+        this.shadowRoot
+            .querySelector(".checkbox")
+            .addEventListener("click", () => this.toggle());
+        this.shadowRoot
+            .querySelector(".checkbox")
+            .addEventListener("keydown", (e) => {
+                if (e.key === " " || e.key === "Enter") {
+                    e.preventDefault();
+                    this.toggle();
+                }
+            });
+
+        this.updateState();
+    }
+}
+
+if (!customElements.get("y-checkbox")) {
+    customElements.define("y-checkbox", YumeCheckbox);
+}
+
+export { YumeCheckbox };

package/dist/components/y-dialog.js

@@ -0,0 +1,213 @@
+class YumeDialog extends HTMLElement {
+    static get observedAttributes() {
+        return ["visible", "anchor", "closable"];
+    }
+
+    constructor() {
+        super();
+        this.attachShadow({ mode: "open" });
+        this.onKeyDown = this.onKeyDown.bind(this);
+        this.onAnchorClick = this.onAnchorClick.bind(this);
+    }
+
+    connectedCallback() {
+        this.render();
+        this.setupAnchor();
+        if (this.visible) this.show();
+    }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue === newValue) return;
+        if (name === "visible") {
+            this.visible ? this.show() : this.hide();
+        }
+        if (name === "anchor") {
+            this.setupAnchor();
+        }
+        if (name === "closable") {
+            this.render();
+        }
+    }
+
+    get visible() {
+        return this.hasAttribute("visible");
+    }
+
+    set visible(val) {
+        if (val) this.setAttribute("visible", "");
+        else this.removeAttribute("visible");
+    }
+
+    get anchor() {
+        return this.getAttribute("anchor");
+    }
+
+    set anchor(id) {
+        this.setAttribute("anchor", id);
+    }
+
+    get closable() {
+        return this.hasAttribute("closable");
+    }
+    set closable(val) {
+        if (val) this.setAttribute("closable", "");
+        else this.removeAttribute("closable");
+    }
+
+    show() {
+        if (!this.shadowRoot.querySelector(".dialog")) {
+            this.render();
+        }
+
+        document.addEventListener("keydown", this.onKeyDown);
+
+        const dialog = this.shadowRoot.querySelector(".dialog");
+        if (dialog && typeof dialog.focus === "function") {
+            dialog.focus();
+        }
+    }
+
+    hide() {
+        document.removeEventListener("keydown", this.onKeyDown);
+    }
+
+    setupAnchor() {
+        if (this._anchorEl) {
+            this._anchorEl.removeEventListener("click", this.onAnchorClick);
+        }
+        if (this.anchor) {
+            const el = document.getElementById(this.anchor);
+            if (el) {
+                this._anchorEl = el;
+                this._anchorEl.addEventListener("click", this.onAnchorClick);
+            }
+        }
+    }
+
+    onAnchorClick() {
+        this.visible = !this.visible;
+    }
+
+    onKeyDown(e) {
+        if (e.key === "Escape" && this.visible) {
+            this.visible = false;
+        }
+    }
+
+    render() {
+        const style = document.createElement("style");
+        style.textContent = `
+            :host {
+                position: fixed;
+                top: 0; left: 0; right: 0; bottom: 0;
+                display: none;
+                align-items: center;
+                justify-content: center;
+                background: rgba(0,0,0,0.5);
+                z-index: 1000;
+            }
+            :host([visible]) { display: flex; }
+            .dialog {
+                background: var(--component-dialog-background);
+                border: var(--component-dialog-border-width, 1px) solid var(--component-dialog-border-color);
+                border-radius: var(--component-dialog-border-radius-outer, 4px);
+                max-width: 90%;
+                max-height: 90%;
+                display: flex;
+                flex-direction: column;
+                box-shadow: var(--component-dialog-shadow, 0 2px 10px rgba(0,0,0,0.3));
+            }
+            .header {
+                padding: var(--component-dialog-padding, var(--spacing-medium));
+                font-weight: bold;
+                border-bottom: var(--component-dialog-inner-border-width, 1px) solid var(--component-dialog-border-color);
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                gap: var(--spacing-small, 8px);
+            }
+            .header-content {
+                flex: 1;
+            }
+            .close-btn {
+                background: none;
+                border: none;
+                cursor: pointer;
+                padding: var(--spacing-x-small, 4px);
+                color: var(--component-dialog-color, #000);
+                font-size: 1.25em;
+                line-height: 1;
+                border-radius: var(--component-button-border-radius-outer, 4px);
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+            .close-btn:hover {
+                background: var(--component-dialog-hover-background, #eee);
+            }
+            .close-btn:focus-visible {
+                outline: 2px solid var(--component-dialog-accent);
+                outline-offset: -1px;
+            }
+            .body {
+                padding: var(--component-dialog-padding, var(--spacing-medium));
+                overflow: auto;
+                flex: 1;
+            }
+            .footer {
+                padding: var(--component-dialog-padding, var(--spacing-medium));
+                border-top: var(--component-dialog-inner-border-width, 1px) solid var(--component-dialog-border-color);
+                text-align: right;
+            }
+
+            ::slotted(*) {
+                margin: 0;
+            }
+        `;
+
+        this.shadowRoot.innerHTML = "";
+        this.shadowRoot.appendChild(style);
+
+        const dialog = document.createElement("div");
+        dialog.className = "dialog";
+        dialog.setAttribute("role", "dialog");
+        dialog.setAttribute("aria-modal", "true");
+        dialog.setAttribute("tabindex", "-1");
+
+        const header = document.createElement("div");
+        header.className = "header";
+
+        const headerContent = document.createElement("div");
+        headerContent.className = "header-content";
+        headerContent.innerHTML = `<slot name="header"></slot>`;
+        header.appendChild(headerContent);
+
+        if (this.closable) {
+            const closeBtn = document.createElement("button");
+            closeBtn.className = "close-btn";
+            closeBtn.setAttribute("aria-label", "Close");
+            closeBtn.innerHTML = "&#10005;";
+            closeBtn.addEventListener("click", () => {
+                this.visible = false;
+            });
+            header.appendChild(closeBtn);
+        }
+
+        const body = document.createElement("div");
+        body.className = "body";
+        body.innerHTML = `<slot name="body"></slot>`;
+
+        const footer = document.createElement("div");
+        footer.className = "footer";
+        footer.innerHTML = `<slot name="footer"></slot>`;
+
+        dialog.appendChild(header);
+        dialog.appendChild(body);
+        dialog.appendChild(footer);
+        this.shadowRoot.appendChild(dialog);
+    }
+}
+
+if (!customElements.get("y-dialog")) {
+    customElements.define("y-dialog", YumeDialog);
+}