@studious-creative/yumekit 0.1.0

package/dist/components/y-drawer.js

@@ -0,0 +1,454 @@
+/* ================================================================== */
+/*  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.                                 */
+/* ================================================================== */
+
+
+/* ── Dynamic icons (parameterised — kept as functions) ────────────── */
+
+/**
+ * 3-dot grip handle for drawers.
+ * @param {boolean} horizontal – true for left/right drawers, false for top/bottom.
+ */
+function gripDots(horizontal) {
+    return `<svg xmlns="http://www.w3.org/2000/svg" width="${horizontal ? 4 : 20}" height="${horizontal ? 20 : 4}" viewBox="0 0 ${horizontal ? 4 : 20} ${horizontal ? 20 : 4}" fill="currentColor">
+            ${
+                horizontal
+                    ? `<circle cx="2" cy="4"  r="1.5"/>
+                   <circle cx="2" cy="10" r="1.5"/>
+                   <circle cx="2" cy="16" r="1.5"/>`
+                    : `<circle cx="4"  cy="2" r="1.5"/>
+                   <circle cx="10" cy="2" r="1.5"/>
+                   <circle cx="16" cy="2" r="1.5"/>`
+            }
+        </svg>`;
+}
+
+class YumeDrawer extends HTMLElement {
+    static get observedAttributes() {
+        return ["visible", "anchor", "position", "resizable"];
+    }
+
+    constructor() {
+        super();
+        this.attachShadow({ mode: "open" });
+        this._onAnchorClick = this._onAnchorClick.bind(this);
+        this._onKeyDown = this._onKeyDown.bind(this);
+        this._onResizePointerDown = this._onResizePointerDown.bind(this);
+        this._onResizePointerMove = this._onResizePointerMove.bind(this);
+        this._onResizePointerUp = this._onResizePointerUp.bind(this);
+    }
+
+    connectedCallback() {
+        this.render();
+        this._setupAnchor();
+        if (this.visible) this._show();
+    }
+
+    disconnectedCallback() {
+        this._teardownAnchor();
+        document.removeEventListener("keydown", this._onKeyDown);
+        this._cleanupResize();
+    }
+
+    attributeChangedCallback(name, oldVal, newVal) {
+        if (oldVal === newVal) return;
+        if (name === "visible") {
+            this.visible ? this._show() : this._hide();
+        }
+        if (name === "anchor") {
+            this._teardownAnchor();
+            this._setupAnchor();
+        }
+        if (name === "position") {
+            this._applyPosition();
+        }
+        if (name === "resizable") {
+            this._applyResizable();
+        }
+    }
+
+    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);
+    }
+
+    /**
+     * Which edge the drawer slides in from.
+     * Accepted values: "left" | "right" | "top" | "bottom" (default "left").
+     */
+    get position() {
+        return this.getAttribute("position") || "left";
+    }
+    set position(val) {
+        this.setAttribute("position", val);
+    }
+
+    get resizable() {
+        return this.hasAttribute("resizable");
+    }
+    set resizable(val) {
+        if (val) this.setAttribute("resizable", "");
+        else this.removeAttribute("resizable");
+    }
+
+    _setupAnchor() {
+        const id = this.anchor;
+        if (id) {
+            const el = document.getElementById(id);
+            if (el) {
+                this._anchorEl = el;
+                this._anchorEl.addEventListener("click", this._onAnchorClick);
+            }
+        }
+    }
+
+    _teardownAnchor() {
+        if (this._anchorEl) {
+            this._anchorEl.removeEventListener("click", this._onAnchorClick);
+            this._anchorEl = null;
+        }
+    }
+
+    _onAnchorClick() {
+        this.visible = !this.visible;
+    }
+
+    _show() {
+        this.style.display = "block";
+        // Force a reflow so the browser registers the initial state
+        this.offsetHeight; // eslint-disable-line no-unused-expressions
+
+        const overlay = this.shadowRoot.querySelector(".overlay");
+        const panel = this.shadowRoot.querySelector(".drawer-panel");
+
+        if (overlay) overlay.classList.add("open");
+        if (panel) {
+            panel.classList.add("open");
+            panel.focus();
+        }
+
+        document.addEventListener("keydown", this._onKeyDown);
+    }
+
+    _hide() {
+        const overlay = this.shadowRoot.querySelector(".overlay");
+        const panel = this.shadowRoot.querySelector(".drawer-panel");
+
+        if (overlay) overlay.classList.remove("open");
+        if (panel) panel.classList.remove("open");
+
+        document.removeEventListener("keydown", this._onKeyDown);
+
+        const duration = this._getTransitionDuration(panel);
+        if (duration > 0) {
+            clearTimeout(this._hideTimer);
+            this._hideTimer = setTimeout(() => {
+                if (!this.visible) this.style.display = "none";
+            }, duration);
+        } else {
+            this.style.display = "none";
+        }
+    }
+
+    _getTransitionDuration(el) {
+        if (!el) return 0;
+        const style = getComputedStyle(el);
+        const raw = style.transitionDuration || "0s";
+        const seconds = parseFloat(raw);
+        return isNaN(seconds) ? 0 : seconds * 1000;
+    }
+
+    _onKeyDown(e) {
+        if (e.key === "Escape" && this.visible) {
+            this.visible = false;
+        }
+    }
+
+    _onOverlayClick() {
+        this.visible = false;
+    }
+
+    _applyPosition() {
+        const panel = this.shadowRoot.querySelector(".drawer-panel");
+        if (!panel) return;
+        panel.setAttribute("data-position", this.position);
+    }
+
+    _applyResizable() {
+        const handle = this.shadowRoot.querySelector(".resize-handle");
+        if (!handle) return;
+        handle.style.display = this.resizable ? "flex" : "none";
+    }
+
+    _isHorizontal() {
+        return this.position === "left" || this.position === "right";
+    }
+
+    _onResizePointerDown(e) {
+        e.preventDefault();
+        this._resizing = true;
+        this._startPointer = this._isHorizontal() ? e.clientX : e.clientY;
+        const panel = this.shadowRoot.querySelector(".drawer-panel");
+        this._startSize = this._isHorizontal()
+            ? panel.offsetWidth
+            : panel.offsetHeight;
+
+        panel.style.transition = "none";
+        document.addEventListener("pointermove", this._onResizePointerMove);
+        document.addEventListener("pointerup", this._onResizePointerUp);
+    }
+
+    _onResizePointerMove(e) {
+        if (!this._resizing) return;
+        const panel = this.shadowRoot.querySelector(".drawer-panel");
+        const current = this._isHorizontal() ? e.clientX : e.clientY;
+        const delta = current - this._startPointer;
+        let newSize;
+
+        if (this.position === "left") newSize = this._startSize + delta;
+        else if (this.position === "right") newSize = this._startSize - delta;
+        else if (this.position === "top") newSize = this._startSize + delta;
+        else newSize = this._startSize - delta;
+
+        const minSize = 100;
+        newSize = Math.max(minSize, newSize);
+
+        if (this._isHorizontal()) {
+            panel.style.width = `${newSize}px`;
+        } else {
+            panel.style.height = `${newSize}px`;
+        }
+    }
+
+    _onResizePointerUp() {
+        this._resizing = false;
+        const panel = this.shadowRoot.querySelector(".drawer-panel");
+        if (panel) panel.style.transition = "";
+        document.removeEventListener("pointermove", this._onResizePointerMove);
+        document.removeEventListener("pointerup", this._onResizePointerUp);
+    }
+
+    _cleanupResize() {
+        document.removeEventListener("pointermove", this._onResizePointerMove);
+        document.removeEventListener("pointerup", this._onResizePointerUp);
+    }
+
+    _gripSVG() {
+        return gripDots(this._isHorizontal());
+    }
+
+    render() {
+        this.shadowRoot.innerHTML = "";
+
+        const style = document.createElement("style");
+        style.textContent = `
+            :host {
+                position: fixed;
+                top: 0; left: 0; right: 0; bottom: 0;
+                display: none;
+                z-index: 1000;
+            }
+            :host([visible]) {
+                display: block;
+            }
+
+            .overlay {
+                position: absolute;
+                top: 0; left: 0; right: 0; bottom: 0;
+                background: rgba(0, 0, 0, 0);
+                transition: background var(--drawer-transition-duration, 0.3s) ease;
+            }
+            .overlay.open {
+                background: rgba(0, 0, 0, 0.4);
+            }
+
+            .drawer-panel {
+                position: absolute;
+                background: var(--component-drawer-background, #fff);
+                color: var(--component-drawer-color, #000);
+                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+                overflow: hidden;
+                outline: none;
+                display: flex;
+                flex-direction: column;
+                border: none;
+                border-radius: var(--component-drawer-border-radius, 0);
+                transition: transform var(--drawer-transition-duration, 0.3s) ease;
+            }
+
+            .drawer-panel[data-position="left"],
+            .drawer-panel[data-position="right"] {
+                top: 0;
+                bottom: 0;
+                width: var(--drawer-width, 300px);
+                flex-direction: row;
+            }
+            .drawer-panel[data-position="left"] {
+                left: 0;
+                transform: translateX(-100%);
+                border-right: var(--component-drawer-border-width, 2px) solid var(--component-drawer-border-color, #ccc);
+            }
+            .drawer-panel[data-position="right"] {
+                right: 0;
+                transform: translateX(100%);
+                border-left: var(--component-drawer-border-width, 2px) solid var(--component-drawer-border-color, #ccc);
+            }
+
+            .drawer-panel[data-position="top"],
+            .drawer-panel[data-position="bottom"] {
+                left: 0;
+                right: 0;
+                height: var(--drawer-height, 300px);
+            }
+            .drawer-panel[data-position="top"] {
+                top: 0;
+                transform: translateY(-100%);
+                border-bottom: var(--component-drawer-border-width, 2px) solid var(--component-drawer-border-color, #ccc);
+            }
+            .drawer-panel[data-position="bottom"] {
+                bottom: 0;
+                transform: translateY(100%);
+                border-top: var(--component-drawer-border-width, 2px) solid var(--component-drawer-border-color, #ccc);
+            }
+
+            .drawer-panel.open { transform: translate(0, 0); }
+
+            .drawer-header {
+                padding: var(--component-drawer-padding, 1rem);
+                font-weight: bold;
+            }
+            .drawer-body {
+                padding: var(--component-drawer-padding, 1rem);
+                flex: 1;
+                overflow: auto;
+            }
+            .drawer-footer {
+                padding: var(--component-drawer-padding, 1rem);
+            }
+
+            /* Wrapper so header/body/footer stack vertically inside a row layout */
+            .drawer-content {
+                display: flex;
+                flex-direction: column;
+                flex: 1;
+                min-width: 0;
+                min-height: 0;
+                overflow: hidden;
+            }
+
+            ::slotted(*) {
+                margin: 0;
+            }
+
+            .resize-handle {
+                display: none;              /* hidden until resizable attr */
+                flex-shrink: 0;
+                align-items: center;
+                justify-content: center;
+                color: var(--component-drawer-color, #999);
+                opacity: 0.6;
+                touch-action: none;         /* needed for pointer events */
+                user-select: none;
+                transition: opacity 0.15s, background 0.15s;
+            }
+            .resize-handle:hover,
+            .resize-handle:active {
+                opacity: 1;
+                background: var(--component-drawer-hover-background, rgba(128,128,128,0.15));
+            }
+
+            .drawer-panel[data-position="left"] > .resize-handle,
+            .drawer-panel[data-position="right"] > .resize-handle {
+                width: var(--component-drawer-handle-width, 6px);
+                padding: var(--component-drawer-handle-padding, 4px);
+                cursor: ew-resize;
+            }
+            .drawer-panel[data-position="left"] > .resize-handle {
+                order: 99;
+            }
+            .drawer-panel[data-position="right"] > .resize-handle {
+                order: -1;
+            }
+
+            .drawer-panel[data-position="top"] > .resize-handle,
+            .drawer-panel[data-position="bottom"] > .resize-handle {
+                height: var(--component-drawer-handle-width, 6px);
+                padding: var(--component-drawer-handle-padding, 4px);
+                cursor: ns-resize;
+            }
+            .drawer-panel[data-position="top"] > .resize-handle {
+                order: 99;
+            }
+            .drawer-panel[data-position="bottom"] > .resize-handle {
+                order: -1;
+            }
+        `;
+        this.shadowRoot.appendChild(style);
+
+        const overlay = document.createElement("div");
+        overlay.className = "overlay";
+        overlay.addEventListener("click", () => this._onOverlayClick());
+        this.shadowRoot.appendChild(overlay);
+
+        const panel = document.createElement("div");
+        panel.className = "drawer-panel";
+        panel.setAttribute("role", "dialog");
+        panel.setAttribute("aria-modal", "true");
+        panel.setAttribute("tabindex", "-1");
+        panel.setAttribute("data-position", this.position);
+
+        const handle = document.createElement("div");
+        handle.className = "resize-handle";
+        handle.innerHTML = this._gripSVG();
+        handle.style.display = this.resizable ? "flex" : "none";
+        handle.addEventListener("pointerdown", this._onResizePointerDown);
+        panel.appendChild(handle);
+
+        const content = document.createElement("div");
+        content.className = "drawer-content";
+
+        const header = document.createElement("div");
+        header.className = "drawer-header";
+        header.innerHTML = `<slot name="header"></slot>`;
+
+        const body = document.createElement("div");
+        body.className = "drawer-body";
+        body.innerHTML = `<slot name="body"></slot>`;
+
+        const footer = document.createElement("div");
+        footer.className = "drawer-footer";
+        footer.innerHTML = `<slot name="footer"></slot>`;
+
+        content.appendChild(header);
+        content.appendChild(body);
+        content.appendChild(footer);
+        panel.appendChild(content);
+        this.shadowRoot.appendChild(panel);
+
+        if (this.visible) {
+            requestAnimationFrame(() => {
+                overlay.classList.add("open");
+                panel.classList.add("open");
+            });
+        }
+    }
+}
+
+if (!customElements.get("y-drawer")) {
+    customElements.define("y-drawer", YumeDrawer);
+}

package/dist/components/y-input.js

@@ -0,0 +1,225 @@
+class YumeInput extends HTMLElement {
+    static formAssociated = true;
+
+    static get observedAttributes() {
+        return [
+            "type",
+            "size",
+            "value",
+            "label-position",
+            "disabled",
+            "invalid",
+            "name",
+        ];
+    }
+
+    constructor() {
+        super();
+        this._internals = this.attachInternals();
+        this.attachShadow({ mode: "open" });
+        this.render();
+    }
+
+    connectedCallback() {
+        if (!this.hasAttribute("size")) {
+            this.setAttribute("size", "medium");
+        }
+        if (!this.hasAttribute("label-position")) {
+            this.setAttribute("label-position", "top");
+        }
+        this._internals.setFormValue(this.value);
+    }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue === newValue) return;
+
+        if (name === "value") {
+            if (this.input) this.input.value = newValue;
+            if (this._internals) {
+                this._internals.setFormValue(
+                    newValue,
+                    this.getAttribute("name"),
+                );
+            }
+            return;
+        }
+
+        if (name === "name") {
+            this._internals.setFormValue(this.value, newValue);
+            return;
+        }
+
+        if (name === "invalid") {
+            this.updateValidationState();
+            return;
+        }
+
+        this.render();
+    }
+
+    get value() {
+        return this.input?.value || "";
+    }
+
+    set value(val) {
+        if (this.input) this.input.value = val;
+        else this.setAttribute("value", val);
+        this._internals.setFormValue(val, this.getAttribute("name"));
+    }
+
+    checkValidity() {
+        return this.input?.checkValidity?.() ?? true;
+    }
+
+    updateValidationState() {
+        const isManuallyInvalid = this.hasAttribute("invalid");
+        const isAutomaticallyInvalid = this.input && !this.checkValidity();
+        const isInvalid = isManuallyInvalid || isAutomaticallyInvalid;
+
+        this.inputContainer?.classList.toggle("is-invalid", isInvalid);
+        this.labelWrapper?.classList.toggle("is-invalid", isInvalid);
+    }
+
+    render() {
+        const type = this.getAttribute("type") || "text";
+        const size = this.getAttribute("size") || "medium";
+        const value = this.getAttribute("value") || "";
+        const labelPosition = this.getAttribute("label-position") || "top";
+        const isDisabled = this.hasAttribute("disabled");
+        const isLabelTop = labelPosition === "top";
+
+        const paddingVar = {
+            small: "--component-inputs-padding-small",
+            medium: "--component-inputs-padding-medium",
+            large: "--component-inputs-padding-large",
+        }[size];
+
+        const sheet = new CSSStyleSheet();
+        sheet.replaceSync(`
+            :host {
+                display: block;
+                font-family: var(--font-family-body);
+                color: var(--component-input-color);
+                opacity: ${isDisabled ? "0.75" : "1"};
+                pointer-events: ${isDisabled ? "none" : "auto"};
+            }
+
+            .input-wrapper {
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                gap: var(--spacing-2x-small, 4px);
+            }
+
+            .input-container {
+                display: flex;
+                align-items: center;
+                gap: var(--spacing-x-small);
+                background: ${isDisabled ? "var(--component-input-background-disabled)" : "var(--component-input-background)"};
+                border: var(--component-inputs-border-width) solid var(--component-input-border-color);
+                border-radius: var(--component-inputs-border-radius-outer);
+                padding: var(${paddingVar});
+                box-sizing: border-box;
+                transition: border-color 0.2s ease-in-out;
+            }
+
+            .input-container.is-invalid {
+                border-color: var(--component-input-error-border-color);
+                background: var(--component-input-error-background);
+            }
+
+            .input-container.is-invalid input {
+                color: var(--component-input-error-color);
+            }
+
+            .input-container.is-invalid:hover {
+                border-color: var(--component-input-error-color);
+            }
+
+            .input-container.is-invalid:focus-within {
+                border-color: var(--component-input-error-color);
+            }
+
+            .input-container.is-invalid:focus-within input {
+                color: var(--component-input-color);
+            }
+
+            input {
+                all: unset;
+                flex: 1;
+                font-family: inherit;
+                font-size: 1em;
+                color: inherit;
+                min-width: 0;
+                min-height: 20px;
+            }
+
+            .input-container:hover {
+                border-color: var(--component-input-color);
+                transition: border-color 0.2s ease-in-out;
+            }
+
+            .input-container:focus-within {
+                border-color: var(--component-input-accent);
+            }
+
+            .label-wrapper.is-invalid ::slotted([slot="label"]) {
+                color: var(--component-input-error-color);
+            }
+
+            ::slotted([slot="label"]) {
+                font-weight: 500;
+                font-size: 0.875em;
+                color: var(--component-input-label-color);
+            }
+
+            ::slotted([slot="left-icon"]),
+            ::slotted([slot="right-icon"]) {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                color: var(--component-input-icon-color);
+            }
+        `);
+
+        this.shadowRoot.adoptedStyleSheets = [sheet];
+
+        this.shadowRoot.innerHTML = `
+            <div class="input-wrapper">
+                ${isLabelTop ? '<div class="label-wrapper"><slot name="label"></slot></div>' : ""}
+                <div class="input-container">
+                    <slot name="left-icon"></slot>
+                    <input part="input" type="${type}" value="${value}" ${isDisabled ? "disabled" : ""} />
+                    <slot name="right-icon"></slot>
+                </div>
+                ${!isLabelTop ? '<div class="label-wrapper"><slot name="label"></slot></div>' : ""}
+            </div>
+        `;
+
+        this.input = this.shadowRoot.querySelector("input");
+        this.inputContainer = this.shadowRoot.querySelector(".input-container");
+        this.labelWrapper = this.shadowRoot.querySelector(".label-wrapper");
+
+        if (!isDisabled) {
+            this.input.addEventListener("input", (e) => {
+                this.setAttribute("value", e.target.value);
+                this.dispatchEvent(
+                    new CustomEvent("input", {
+                        detail: { value: e.target.value },
+                        bubbles: true,
+                        composed: true,
+                    }),
+                );
+                this.updateValidationState();
+            });
+
+            this.updateValidationState();
+        }
+    }
+}
+
+if (!customElements.get("y-input")) {
+    customElements.define("y-input", YumeInput);
+}
+
+export { YumeInput };