@waggylabs/yumekit 0.2.0

package/dist/components/y-appbar.js

@@ -0,0 +1,1707 @@
+import { getIcon } from '../icons/registry.js';
+
+class YumeButton extends HTMLElement {
+    static get observedAttributes() {
+        return [
+            "left-icon",
+            "right-icon",
+            "color",
+            "size",
+            "style-type",
+            "type",
+            "disabled",
+            "name",
+            "value",
+            "autofocus",
+            "form",
+            "formaction",
+            "formenctype",
+            "formmethod",
+            "formnovalidate",
+            "formtarget",
+            "aria-label",
+            "aria-pressed",
+            "aria-hidden",
+        ];
+    }
+
+    constructor() {
+        super();
+        this.attachShadow({ mode: "open" });
+        this.init();
+    }
+
+    connectedCallback() {
+        if (!this.hasAttribute("size")) {
+            this.setAttribute("size", "medium");
+        }
+
+        this.init();
+    }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+        const attributes = YumeButton.observedAttributes;
+
+        if (oldValue !== newValue && attributes.includes(name)) {
+            if (newValue === null) {
+                this.button.removeAttribute(name);
+            } else {
+                this.button.setAttribute(name, newValue);
+            }
+        }
+
+        this.init();
+
+        if (["color", "size", "style-type", "disabled"].includes(name)) {
+            this.updateStyles();
+        }
+    }
+
+    get value() {
+        if (this.hasAttribute("multiple")) {
+            return Array.from(this.selectedValues).join(",");
+        } else {
+            return this.selectedValues.size
+                ? Array.from(this.selectedValues)[0]
+                : "";
+        }
+    }
+
+    set value(newVal) {
+        if (this.hasAttribute("multiple")) {
+            if (typeof newVal === "string") {
+                this.selectedValues = new Set(
+                    newVal.split(",").map((s) => s.trim()),
+                );
+            } else if (Array.isArray(newVal)) {
+                this.selectedValues = new Set(newVal);
+            }
+        } else {
+            if (typeof newVal === "string") {
+                this.selectedValues = new Set([newVal.trim()]);
+            } else {
+                this.selectedValues = new Set();
+            }
+        }
+
+        this.setAttribute("value", newVal);
+    }
+
+    setOptions(options) {
+        this.setAttribute("options", JSON.stringify(options));
+    }
+
+    handleClick() {
+        const detail = {};
+        const eventType = this.getAttribute("data-event");
+
+        if (this.hasAttribute("disabled") || !eventType) return;
+
+        Array.from(this.attributes)
+            .filter((attr) => attr.name.startsWith("data-detail-"))
+            .forEach((attr) => {
+                const key = attr.name.replace("data-detail-", "");
+                detail[key] = attr.value;
+            });
+
+        this.dispatchEvent(
+            new CustomEvent(eventType, {
+                detail,
+                bubbles: true,
+                composed: true,
+            }),
+        );
+    }
+
+    init() {
+        this.applyStyles();
+        this.render();
+        this.proxyNativeOnClick();
+        this.addEventListeners();
+    }
+
+    proxyNativeOnClick() {
+        try {
+            Object.defineProperty(this, "onclick", {
+                get: () => this.button.onclick,
+                set: (value) => {
+                    this.button.onclick = value;
+                },
+                configurable: true,
+                enumerable: true,
+            });
+        } catch (e) {
+            console.warn("Could not redefine onclick:", e);
+        }
+    }
+
+    updateButtonAttributes() {
+        const attributes = YumeButton.observedAttributes;
+
+        attributes.forEach((attr) => {
+            if (this.hasAttribute(attr)) {
+                this.button.setAttribute(attr, this.getAttribute(attr));
+            } else {
+                this.button.removeAttribute(attr);
+            }
+        });
+    }
+
+    manageSlotVisibility(slotName, selector) {
+        const slot = slotName
+            ? this.shadowRoot.querySelector(`slot[name="${slotName}"]`)
+            : this.shadowRoot.querySelector("slot:not([name])");
+        const container = this.shadowRoot.querySelector(selector);
+
+        const updateVisibility = () => {
+            const hasContent = slot
+                .assignedNodes({ flatten: true })
+                .some(
+                    (n) =>
+                        !(
+                            n.nodeType === Node.TEXT_NODE &&
+                            n.textContent.trim() === ""
+                        ),
+                );
+            container.style.display = hasContent ? "inline-flex" : "none";
+        };
+
+        updateVisibility();
+        slot.addEventListener("slotchange", updateVisibility);
+    }
+
+    render() {
+        if (!this.button) {
+            this.button = document.createElement("button");
+            this.button.classList.add("button");
+            this.button.setAttribute("role", "button");
+            this.button.setAttribute("tabindex", "0");
+            this.button.setAttribute("part", "button");
+            this.shadowRoot.appendChild(this.button);
+        }
+
+        this.updateButtonAttributes();
+
+        if (this.hasAttribute("disabled")) {
+            this.button.setAttribute("disabled", "");
+            this.button.setAttribute("aria-disabled", "true");
+        } else {
+            this.button.removeAttribute("disabled");
+            this.button.setAttribute("aria-disabled", "false");
+        }
+
+        this.button.innerHTML = `
+          <span class="icon left-icon" part="left-icon"><slot name="left-icon"></slot></span>
+          <span class="label" part="label"><slot></slot></span>
+          <span class="icon right-icon" part="right-icon"><slot name="right-icon"></slot></span>
+      `;
+
+        this.manageSlotVisibility("left-icon", ".left-icon");
+        this.manageSlotVisibility("right-icon", ".right-icon");
+        this.manageSlotVisibility("", ".label");
+    }
+
+    applyStyles() {
+        const style = document.createElement("style");
+        style.textContent = `
+        :host {
+          display: inline-block;
+        }
+
+        @font-face {
+            font-family: "Lexend";
+            font-display: swap;
+        }
+
+        .button {
+            box-sizing: border-box;
+            display: inline-flex;
+            min-height: var(--button-min-height, var(--sizing-medium, 40px));
+            min-width: var(--button-min-width, var(--sizing-medium, 40px));
+            padding: var(--button-padding, var(--component-button-padding-medium));
+            gap: var(--button-gap, var(--component-button-padding-medium));
+            justify-content: center;
+            align-items: center;
+            position: relative;
+            overflow: hidden;
+            border-radius: var(--component-button-border-radius-outer, 4px);
+            border: var(--component-button-border-width, 1px) solid var(--border-color, var(--base-content--, #f7f7fa));
+            background: var(--background-color, #0c0c0d);
+            transition: background-color 0.1s, color 0.1s, border-color 0.1s;
+            cursor: pointer;
+            color: var(--text-color);
+            font-family: var(--font-family-body, Lexend, sans-serif);
+            font-size: var(--font-size-button, 1em);
+            line-height: 1;
+        }
+
+        .button:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        .button:hover:not(:disabled),
+        .button:hover:not(:disabled) .button-content {
+            background: var(--hover-background-color);
+            color: var(--hover-text-color);
+            border-color: var(--hover-border-color);
+        }
+        .button:focus:not(:disabled),
+        .button:focus:not(:disabled) .button-content {
+            background: var(--focus-background-color);
+            color: var(--focus-text-color);
+            border-color: var(--focus-border-color);
+        }
+        .button:active:not(:disabled),
+        .button:active:not(:disabled) .button-content {
+            background: var(--active-background-color);
+            color: var(--active-text-color);
+            border-color: var(--active-border-color);
+        }
+        .icon {
+            display: flex;
+            min-width: 16px;
+            min-height: 1em;
+            justify-content: center;
+            align-items: center;
+        }
+        .label {
+            line-height: inherit;
+            min-height: 1em;
+            align-items: center;
+        }
+      `;
+        this.shadowRoot.appendChild(style);
+    }
+
+    addEventListeners() {
+        this.button.addEventListener("focus", () => {
+            this.dispatchEvent(
+                new CustomEvent("focus", { bubbles: true, composed: true }),
+            );
+        });
+
+        this.button.addEventListener("blur", () => {
+            this.dispatchEvent(
+                new CustomEvent("blur", { bubbles: true, composed: true }),
+            );
+        });
+
+        this.button.addEventListener("keydown", (event) => {
+            this.dispatchEvent(
+                new CustomEvent("keydown", {
+                    detail: { key: event.key, code: event.code },
+                    bubbles: true,
+                    composed: true,
+                }),
+            );
+        });
+
+        this.button.addEventListener("keyup", (event) => {
+            this.dispatchEvent(
+                new CustomEvent("keyup", {
+                    detail: { key: event.key, code: event.code },
+                    bubbles: true,
+                    composed: true,
+                }),
+            );
+        });
+
+        this.button.addEventListener("click", (event) => {
+            this.handleClick();
+
+            if (this.getAttribute("type") === "submit") {
+                const form = this.closest("form");
+                if (form) {
+                    event.preventDefault();
+                    form.requestSubmit();
+                }
+            }
+        });
+    }
+
+    updateStyles() {
+        const color = this.getAttribute("color") || "base";
+        const size = this.getAttribute("size") || "medium";
+        const styleType = this.getAttribute("style-type") || "outlined";
+
+        const colorVars = {
+            primary: [
+                "--primary-content--",
+                "--primary-content-hover",
+                "--primary-content-active",
+                "--primary-background-component",
+                "--primary-background-hover",
+                "--primary-background-active",
+                "--primary-content-inverse",
+            ],
+            secondary: [
+                "--secondary-content--",
+                "--secondary-content-hover",
+                "--secondary-content-active",
+                "--secondary-background-component",
+                "--secondary-background-hover",
+                "--secondary-background-active",
+                "--secondary-content-inverse",
+            ],
+            base: [
+                "--base-content--",
+                "--base-content-lighter",
+                "--base-content-lightest",
+                "--base-background-component",
+                "--base-background-hover",
+                "--base-background-active",
+                "--base-content-inverse",
+            ],
+            success: [
+                "--success-content--",
+                "--success-content-hover",
+                "--success-content-active",
+                "--success-background-component",
+                "--success-background-hover",
+                "--success-background-active",
+                "--success-content-inverse",
+            ],
+            error: [
+                "--error-content--",
+                "--error-content-hover",
+                "--error-content-active",
+                "--error-background-component",
+                "--error-background-hover",
+                "--error-background-active",
+                "--error-content-inverse",
+            ],
+            warning: [
+                "--warning-content--",
+                "--warning-content-hover",
+                "--warning-content-active",
+                "--warning-background-component",
+                "--warning-background-hover",
+                "--warning-background-active",
+                "--warning-content-inverse",
+            ],
+            help: [
+                "--help-content--",
+                "--help-content-hover",
+                "--help-content-active",
+                "--help-background-component",
+                "--help-background-hover",
+                "--help-background-active",
+                "--help-content-inverse",
+            ],
+        };
+
+        const sizeVars = {
+            small: [
+                "--component-button-padding-small",
+                "--component-button-padding-small",
+            ],
+            medium: [
+                "--component-button-padding-medium",
+                "--component-button-padding-medium",
+            ],
+            large: [
+                "--component-button-padding-large",
+                "--component-button-padding-large",
+            ],
+        };
+
+        const styleVars = {
+            outlined: {
+                "--background-color": `var(${colorVars[color][3]}, #0c0c0d)`,
+                "--border-color": `var(${colorVars[color][0]}, #f7f7fa)`,
+                "--text-color": `var(${colorVars[color][0]}, #f7f7fa)`,
+            },
+            filled: {
+                "--background-color": `var(${colorVars[color][0]}, #f7f7fa)`,
+                "--border-color": `var(${colorVars[color][0]}, #f7f7fa)`,
+                "--text-color": `var(${colorVars[color][6]}, #0c0c0d)`,
+            },
+            flat: {
+                "--background-color": `var(${colorVars[color][3]},#0c0c0d)`,
+                "--border-color": `var(${colorVars[color][3]},#0c0c0d)`,
+                "--text-color": `var(${colorVars[color][0]},#f7f7fa)`,
+            },
+        };
+
+        const currentStyle = styleVars[styleType] || styleVars.outlined;
+        Object.entries(currentStyle).forEach(([key, value]) => {
+            this.button.style.setProperty(key, value);
+        });
+
+        if (styleType === "filled") {
+            this.button.style.setProperty(
+                "--hover-background-color",
+                `var(${colorVars[color][1]}, #292a2b)`,
+            );
+            this.button.style.setProperty(
+                "--hover-text-color",
+                `var(${colorVars[color][6]}, #0c0c0d)`,
+            );
+            this.button.style.setProperty(
+                "--hover-border-color",
+                `var(${colorVars[color][1]}, #292a2b)`,
+            );
+            this.button.style.setProperty(
+                "--focus-background-color",
+                `var(${colorVars[color][2]}, #46474a)`,
+            );
+            this.button.style.setProperty(
+                "--focus-text-color",
+                `var(${colorVars[color][6]}, #0c0c0d)`,
+            );
+            this.button.style.setProperty(
+                "--focus-border-color",
+                `var(${colorVars[color][2]}, #46474a)`,
+            );
+            this.button.style.setProperty(
+                "--active-background-color",
+                `var(${colorVars[color][0]}, #f7f7fa)`,
+            );
+            this.button.style.setProperty(
+                "--active-text-color",
+                `var(${colorVars[color][6]}, #0c0c0d)`,
+            );
+            this.button.style.setProperty(
+                "--active-border-color",
+                `var(${colorVars[color][0]}, #f7f7fa)`,
+            );
+        } else {
+            const borderColor = `var(${colorVars[color][0]}, #f7f7fa)`;
+
+            this.button.style.setProperty(
+                "--hover-background-color",
+                `var(${colorVars[color][4]}, #292a2b)`,
+            );
+            this.button.style.setProperty(
+                "--hover-text-color",
+                `var(${colorVars[color][0]}, #f7f7fa)`,
+            );
+            this.button.style.setProperty(
+                "--focus-background-color",
+                `var(${colorVars[color][5]}, #46474a)`,
+            );
+            this.button.style.setProperty(
+                "--focus-text-color",
+                `var(${colorVars[color][0]}, #f7f7fa)`,
+            );
+            this.button.style.setProperty(
+                "--active-background-color",
+                `var(${colorVars[color][0]}, #f7f7fa)`,
+            );
+            this.button.style.setProperty(
+                "--active-text-color",
+                `var(${colorVars[color][6]}, #0c0c0d)`,
+            );
+
+            if (styleType === "outlined") {
+                // Outlined buttons keep their border color across all states
+                this.button.style.setProperty(
+                    "--hover-border-color",
+                    borderColor,
+                );
+                this.button.style.setProperty(
+                    "--focus-border-color",
+                    borderColor,
+                );
+                this.button.style.setProperty(
+                    "--active-border-color",
+                    borderColor,
+                );
+            } else {
+                // Flat buttons match border to background
+                this.button.style.setProperty(
+                    "--hover-border-color",
+                    `var(${colorVars[color][4]}, #292a2b)`,
+                );
+                this.button.style.setProperty(
+                    "--focus-border-color",
+                    `var(${colorVars[color][5]}, #46474a)`,
+                );
+                this.button.style.setProperty(
+                    "--active-border-color",
+                    `var(${colorVars[color][0]}, #f7f7fa)`,
+                );
+            }
+        }
+
+        const [contentPadding, buttonPadding] =
+            sizeVars[size] || sizeVars.medium;
+        this.button.style.setProperty(
+            "--button-padding",
+            `var(${buttonPadding}, var(--component-button-padding-medium))`,
+        );
+        this.button.style.setProperty(
+            "--button-gap",
+            `var(${contentPadding}, var(--component-button-padding-medium))`,
+        );
+
+        const minSizeMapping = {
+            small: "var(--sizing-small, 32px)",
+            medium: "var(--sizing-medium, 40px)",
+            large: "var(--sizing-large, 56px)",
+        };
+        this.button.style.setProperty(
+            "--button-min-height",
+            minSizeMapping[size] || "40px",
+        );
+        this.button.style.setProperty(
+            "--button-min-width",
+            minSizeMapping[size] || "40px",
+        );
+    }
+}
+
+if (!customElements.get("y-button")) {
+    customElements.define("y-button", YumeButton);
+}
+
+// Allowlist-based SVG sanitizer — only known-safe elements and attributes are kept.
+const ALLOWED_ELEMENTS = new Set([
+    "svg",
+    "g",
+    "path",
+    "circle",
+    "ellipse",
+    "rect",
+    "line",
+    "polyline",
+    "polygon",
+    "text",
+    "tspan",
+    "defs",
+    "clippath",
+    "mask",
+    "lineargradient",
+    "radialgradient",
+    "stop",
+    "symbol",
+    "title",
+    "desc",
+    "metadata",
+]);
+
+const ALLOWED_ATTRS = new Set([
+    "viewbox",
+    "xmlns",
+    "fill",
+    "stroke",
+    "stroke-width",
+    "stroke-linecap",
+    "stroke-linejoin",
+    "stroke-dasharray",
+    "stroke-dashoffset",
+    "stroke-miterlimit",
+    "stroke-opacity",
+    "fill-opacity",
+    "fill-rule",
+    "clip-rule",
+    "opacity",
+    "d",
+    "cx",
+    "cy",
+    "r",
+    "rx",
+    "ry",
+    "x",
+    "x1",
+    "x2",
+    "y",
+    "y1",
+    "y2",
+    "width",
+    "height",
+    "points",
+    "transform",
+    "id",
+    "class",
+    "clip-path",
+    "mask",
+    "offset",
+    "stop-color",
+    "stop-opacity",
+    "gradient-units",
+    "gradienttransform",
+    "gradientunits",
+    "spreadmethod",
+    "patternunits",
+    "patterntransform",
+    "font-size",
+    "font-family",
+    "font-weight",
+    "text-anchor",
+    "dominant-baseline",
+    "alignment-baseline",
+    "dx",
+    "dy",
+    "rotate",
+    "textlength",
+    "lengthadjust",
+    "display",
+    "visibility",
+    "color",
+    "vector-effect",
+]);
+
+function sanitizeSvg(raw) {
+    if (!raw) return "";
+    const doc = new DOMParser().parseFromString(raw, "image/svg+xml");
+    const svg = doc.querySelector("svg");
+    if (!svg) return "";
+
+    const walk = (el) => {
+        for (const child of [...el.children]) {
+            if (!ALLOWED_ELEMENTS.has(child.tagName.toLowerCase())) {
+                child.remove();
+                continue;
+            }
+            for (const attr of [...child.attributes]) {
+                if (!ALLOWED_ATTRS.has(attr.name.toLowerCase())) {
+                    child.removeAttribute(attr.name);
+                }
+            }
+            walk(child);
+        }
+    };
+
+    // Sanitize the <svg> element's own attributes
+    for (const attr of [...svg.attributes]) {
+        if (!ALLOWED_ATTRS.has(attr.name.toLowerCase())) {
+            svg.removeAttribute(attr.name);
+        }
+    }
+    walk(svg);
+    return svg.outerHTML;
+}
+
+// Cache sanitized SVG markup per icon name to avoid repeated DOMParser + DOM-walk
+// on every render. The cache is naturally bounded by the number of registered icons.
+const sanitizedSvgCache = new Map();
+
+function getCachedSvg(name) {
+    if (sanitizedSvgCache.has(name)) {
+        return sanitizedSvgCache.get(name);
+    }
+    const result = sanitizeSvg(getIcon(name));
+    sanitizedSvgCache.set(name, result);
+    return result;
+}
+
+class YumeIcon extends HTMLElement {
+    static get observedAttributes() {
+        return ["name", "size", "color", "label", "weight"];
+    }
+
+    constructor() {
+        super();
+        this.attachShadow({ mode: "open" });
+    }
+
+    connectedCallback() {
+        this.render();
+    }
+
+    attributeChangedCallback(name, oldVal, newVal) {
+        if (oldVal === newVal) return;
+        this.render();
+    }
+
+    get name() {
+        return this.getAttribute("name") || "";
+    }
+    set name(val) {
+        this.setAttribute("name", val);
+    }
+
+    get size() {
+        return this.getAttribute("size") || "medium";
+    }
+    set size(val) {
+        this.setAttribute("size", val);
+    }
+
+    get color() {
+        return this.getAttribute("color") || "";
+    }
+    set color(val) {
+        if (val) this.setAttribute("color", val);
+        else this.removeAttribute("color");
+    }
+
+    get label() {
+        return this.getAttribute("label") || "";
+    }
+    set label(val) {
+        if (val) this.setAttribute("label", val);
+        else this.removeAttribute("label");
+    }
+
+    get weight() {
+        return this.getAttribute("weight") || "";
+    }
+    set weight(val) {
+        if (val) this.setAttribute("weight", val);
+        else this.removeAttribute("weight");
+    }
+
+    _getColor(color) {
+        const map = {
+            base: "var(--base-content--, #f7f7fa)",
+            primary: "var(--primary-content--, #0576ff)",
+            secondary: "var(--secondary-content--, #04b8b8)",
+            success: "var(--success-content--, #2dba73)",
+            warning: "var(--warning-content--, #d17f04)",
+            error: "var(--error-content--, #b80421)",
+            help: "var(--help-content--, #5405ff)",
+        };
+        return map[color] || map.base;
+    }
+
+    _getSize(size) {
+        const map = {
+            small: "var(--component-icon-size-small, 16px)",
+            medium: "var(--component-icon-size-medium, 24px)",
+            large: "var(--component-icon-size-large, 32px)",
+        };
+        return map[size] || map.medium;
+    }
+
+    _getWeight(weight) {
+        const map = {
+            thin: "1",
+            regular: "1.5",
+            thick: "2",
+        };
+        return map[weight] || "";
+    }
+
+    render() {
+        const svg = getCachedSvg(this.name);
+        const sizeVal = this._getSize(this.size);
+        const colorVal = this.color ? this._getColor(this.color) : "inherit";
+        const weightVal = this._getWeight(this.weight);
+        const label = this.label;
+
+        if (label) {
+            this.setAttribute("role", "img");
+            this.setAttribute("aria-label", label);
+            this.removeAttribute("aria-hidden");
+        } else {
+            this.setAttribute("aria-hidden", "true");
+            this.removeAttribute("role");
+            this.removeAttribute("aria-label");
+        }
+
+        const weightCSS = weightVal
+            ? `.icon-wrapper svg,
+                .icon-wrapper svg * { stroke-width: ${weightVal} !important; }`
+            : "";
+
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: inline-flex;
+                    align-items: center;
+                    justify-content: center;
+                    width: ${sizeVal};
+                    height: ${sizeVal};
+                    color: ${colorVal};
+                    line-height: 0;
+                }
+                .icon-wrapper svg {
+                    width: 100%;
+                    height: 100%;
+                }
+                ${weightCSS}
+            </style>
+            <span class="icon-wrapper" part="icon">${svg}</span>
+        `;
+    }
+}
+
+if (!customElements.get("y-icon")) {
+    customElements.define("y-icon", YumeIcon);
+}
+
+class YumeMenu extends HTMLElement {
+    static get observedAttributes() {
+        return ["items", "anchor", "visible", "direction", "size"];
+    }
+
+    constructor() {
+        super();
+        this.attachShadow({ mode: "open" });
+        this._onAnchorClick = this._onAnchorClick.bind(this);
+        this._onDocumentClick = this._onDocumentClick.bind(this);
+        this._onScrollOrResize = this._onScrollOrResize.bind(this);
+    }
+
+    connectedCallback() {
+        if (!this.hasAttribute("items")) this.items = [];
+        this._setupAnchor();
+        this.render();
+        document.addEventListener("click", this._onDocumentClick);
+        window.addEventListener("scroll", this._onScrollOrResize, true);
+        window.addEventListener("resize", this._onScrollOrResize);
+        this.style.position = "fixed";
+        this.style.zIndex = "1000";
+        this.style.display = "none";
+    }
+
+    disconnectedCallback() {
+        this._teardownAnchor();
+        document.removeEventListener("click", this._onDocumentClick);
+        window.removeEventListener("scroll", this._onScrollOrResize, true);
+        window.removeEventListener("resize", this._onScrollOrResize);
+    }
+
+    attributeChangedCallback(name, oldVal, newVal) {
+        if (oldVal === newVal) return;
+        if (name === "items" || name === "size") this.render();
+        if (name === "anchor") {
+            this._teardownAnchor();
+            this._setupAnchor();
+        }
+        if (name === "visible") {
+            this._updatePosition();
+        }
+        if (name === "direction") {
+            this._updatePosition();
+        }
+    }
+
+    get items() {
+        try {
+            return JSON.parse(this.getAttribute("items")) || [];
+        } catch {
+            return [];
+        }
+    }
+    set items(val) {
+        this.setAttribute("items", JSON.stringify(val));
+    }
+
+    get anchor() {
+        return this.getAttribute("anchor");
+    }
+    set anchor(val) {
+        this.setAttribute("anchor", val);
+    }
+
+    get visible() {
+        return this.hasAttribute("visible");
+    }
+    set visible(val) {
+        if (val) this.setAttribute("visible", "");
+        else this.removeAttribute("visible");
+    }
+
+    get direction() {
+        return this.getAttribute("direction") || "down";
+    }
+    set direction(val) {
+        this.setAttribute("direction", val);
+    }
+
+    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");
+    }
+
+    _createMenuList(items) {
+        const ul = document.createElement("ul");
+
+        items.forEach((item) => {
+            const li = document.createElement("li");
+            li.className = "menuitem";
+            li.setAttribute("role", "menuitem");
+            li.setAttribute("part", "menuitem");
+            li.tabIndex = 0;
+
+            const contentWrapper = document.createElement("span");
+            contentWrapper.className = "item-content";
+
+            if (item["icon-template"]) {
+                const iconTpl = this._findTemplate(item["icon-template"]);
+                if (iconTpl)
+                    contentWrapper.appendChild(iconTpl.content.cloneNode(true));
+            }
+
+            if (item.template) {
+                const textTpl = this._findTemplate(item.template);
+                if (textTpl) {
+                    contentWrapper.appendChild(textTpl.content.cloneNode(true));
+                } else {
+                    contentWrapper.textContent = item.text;
+                }
+            } else {
+                contentWrapper.textContent = item.text;
+            }
+
+            li.appendChild(contentWrapper);
+
+            if (item.url) {
+                li.addEventListener("click", () => {
+                    window.location.href = item.url;
+                });
+            }
+
+            if (item.children?.length) {
+                const indicator = document.createElement("span");
+                indicator.className = "submenu-indicator";
+                indicator.textContent = "▶";
+                li.appendChild(indicator);
+
+                const submenu = this._createMenuList(item.children);
+                submenu.classList.add("submenu");
+                submenu.setAttribute("role", "menu");
+                li.appendChild(submenu);
+            }
+
+            ul.appendChild(li);
+        });
+
+        return ul;
+    }
+
+    _findTemplate(name) {
+        return this.querySelector(`template[slot="${name}"]`);
+    }
+
+    _onAnchorClick(e) {
+        e.stopPropagation();
+        this.visible = !this.visible;
+    }
+
+    _onDocumentClick(e) {
+        const path = e.composedPath();
+        if (this._anchorEl && path.includes(this._anchorEl)) return;
+        if (path.includes(this)) return;
+        this.visible = false;
+    }
+
+    _onScrollOrResize() {
+        if (this.visible) this._updatePosition();
+    }
+
+    _setupAnchor() {
+        const id = this.anchor;
+        if (id) {
+            const root = this.getRootNode();
+            const el = root?.getElementById
+                ? root.getElementById(id)
+                : 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;
+        }
+    }
+
+    _updatePosition() {
+        if (!this.visible || !this._anchorEl) {
+            this.style.display = "none";
+            return;
+        }
+
+        const anchorRect = this._anchorEl.getBoundingClientRect();
+        const menuRect = this.getBoundingClientRect();
+        const vw = window.innerWidth;
+        const vh = window.innerHeight;
+
+        let top, left;
+
+        if (this.direction === "right") {
+            top = anchorRect.top;
+            left = anchorRect.right;
+
+            if (left + menuRect.width > vw) {
+                left = anchorRect.left - menuRect.width;
+            }
+            if (top + menuRect.height > vh) {
+                top = anchorRect.top - menuRect.height;
+            }
+        } else if (this.direction === "up") {
+            top = anchorRect.top - menuRect.height;
+            left = anchorRect.left;
+
+            if (top < 0) {
+                top = anchorRect.bottom;
+            }
+            if (left + menuRect.width > vw) {
+                left = vw - menuRect.width - 10;
+            }
+        } else if (this.direction === "left") {
+            top = anchorRect.top;
+            left = anchorRect.left - menuRect.width;
+
+            if (left < 0) {
+                left = anchorRect.right;
+            }
+            if (top + menuRect.height > vh) {
+                top = anchorRect.top - menuRect.height;
+            }
+        } else {
+            // "down" (default)
+            top = anchorRect.bottom;
+            left = anchorRect.left;
+
+            if (top + menuRect.height > vh) {
+                top = anchorRect.top - menuRect.height;
+            }
+            if (left + menuRect.width > vw) {
+                left = vw - menuRect.width - 10;
+            }
+        }
+
+        top = Math.max(0, Math.min(top, vh - menuRect.height));
+        left = Math.max(0, Math.min(left, vw - menuRect.width));
+
+        this.style.top = `${top}px`;
+        this.style.left = `${left}px`;
+        this.style.display = "block";
+    }
+
+    render() {
+        this.shadowRoot.innerHTML = "";
+
+        const paddingVar = `var(--component-button-padding-${this.size}, 0.5rem)`;
+
+        const style = document.createElement("style");
+        style.textContent = `
+            ul.menu,
+            ul.submenu {
+                list-style: none;
+                margin: 0;
+                padding: 0;
+                background: var(--component-menu-background, #0c0c0d);
+                border: var(--component-menu-border-width, 1px) solid var(--component-menu-border-color, #37383a);
+                border-radius: var(--component-menu-border-radius, 4px);
+                box-shadow: var(--component-menu-shadow, 0 2px 8px rgba(0, 0, 0, 0.15));
+                min-width: 150px;
+                max-height: 300px;
+                overflow-y: auto;
+            }
+
+            li.menuitem {
+                cursor: pointer;
+                padding: ${paddingVar};
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                white-space: nowrap;
+                color: var(--component-menu-color, #f7f7fa);
+                font-size: var(--font-size-button, 1em);
+            }
+
+            li.menuitem:hover {
+                background: var(--component-menu-hover-background, #292a2b);
+            }
+
+            ul.submenu {
+                position: absolute;
+                top: 0;
+                left: 100%;
+                display: none;
+                z-index: var(--component-menu-z-index, 1001);
+            }
+
+            li.menuitem:hover > ul.submenu {
+                display: block;
+            }
+
+            .submenu-indicator {
+                font-size: 0.75em;
+                margin-left: 0.5rem;
+                opacity: 0.6;
+            }
+
+            .item-content {
+                flex: 1;
+            }
+        `;
+        this.shadowRoot.appendChild(style);
+
+        const rootUl = this._createMenuList(this.items);
+        rootUl.classList.add("menu");
+        rootUl.setAttribute("role", "menu");
+        rootUl.setAttribute("part", "menu");
+        this.shadowRoot.appendChild(rootUl);
+    }
+}
+
+if (!customElements.get("y-menu")) {
+    customElements.define("y-menu", YumeMenu);
+}
+
+/* ================================================================== */
+/*  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.                                 */
+/* ================================================================== */
+
+/* ── Chevrons ─────────────────────────────────────────────────────── */
+
+const chevronRight = `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>`;
+
+const chevronDown = `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>`;
+
+/* ── Double chevrons (collapse / expand) ──────────────────────────── */
+
+const collapseLeft = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="11 17 6 12 11 7"/><polyline points="18 17 13 12 18 7"/></svg>`;
+
+const expandRight = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="13 17 18 12 13 7"/><polyline points="6 17 11 12 6 7"/></svg>`;
+
+class YumeAppbar extends HTMLElement {
+    static get observedAttributes() {
+        return [
+            "orientation",
+            "collapsed",
+            "items",
+            "size",
+            "menu-direction",
+            "sticky",
+        ];
+    }
+
+    constructor() {
+        super();
+        this.attachShadow({ mode: "open" });
+        this._onCollapseClick = this._onCollapseClick.bind(this);
+        this._idCounter = 0;
+    }
+
+    connectedCallback() {
+        this.render();
+    }
+
+    disconnectedCallback() {}
+
+    attributeChangedCallback(name, oldVal, newVal) {
+        if (oldVal === newVal) return;
+        this.render();
+    }
+
+    get orientation() {
+        return this.getAttribute("orientation") || "vertical";
+    }
+    set orientation(val) {
+        this.setAttribute("orientation", val);
+    }
+
+    get collapsed() {
+        return this.hasAttribute("collapsed");
+    }
+    set collapsed(val) {
+        if (val) this.setAttribute("collapsed", "");
+        else this.removeAttribute("collapsed");
+    }
+
+    get items() {
+        try {
+            return JSON.parse(this.getAttribute("items")) || [];
+        } catch {
+            return [];
+        }
+    }
+    set items(val) {
+        this.setAttribute("items", JSON.stringify(val));
+    }
+
+    get size() {
+        return this.getAttribute("size") || "medium";
+    }
+    set size(val) {
+        this.setAttribute("size", val);
+    }
+
+    /**
+     * Direction menus pop out from nav buttons:
+     * "right", "down", or unset (auto: vertical → right, horizontal → down).
+     */
+    get menuDirection() {
+        return this.getAttribute("menu-direction") || "";
+    }
+    set menuDirection(val) {
+        if (val) this.setAttribute("menu-direction", val);
+        else this.removeAttribute("menu-direction");
+    }
+
+    get sticky() {
+        const val = this.getAttribute("sticky");
+        return ["start", "end"].includes(val) ? val : false;
+    }
+    set sticky(val) {
+        if (val === "start" || val === "end") this.setAttribute("sticky", val);
+        else this.removeAttribute("sticky");
+    }
+
+    toggle() {
+        this.collapsed = !this.collapsed;
+    }
+
+    _onCollapseClick() {
+        this.toggle();
+    }
+
+    _uid(prefix) {
+        return `${prefix}-${this._idCounter++}`;
+    }
+
+    _isItemActive(item) {
+        if (item.selected) return true;
+        if (item.href) {
+            const loc = window.location;
+            const current = loc.pathname + loc.search + loc.hash;
+            return item.href === current || item.href === loc.href;
+        }
+        return false;
+    }
+
+    render() {
+        const isVertical = this.orientation === "vertical";
+        const isCollapsed = this.collapsed && isVertical;
+        const size = this.size;
+        const menuDir = this.menuDirection || (isVertical ? "right" : "down");
+
+        const sizeConfig = {
+            small: {
+                padding: "var(--spacing-x-small, 4px)",
+                collapsedWidth: "40px",
+                bodyGap: "2px",
+                buttonSize: "small",
+                iconSize: "small",
+            },
+            medium: {
+                padding: "var(--spacing-small, 6px)",
+                collapsedWidth: "52px",
+                bodyGap: "3px",
+                buttonSize: "medium",
+                iconSize: "medium",
+            },
+            large: {
+                padding: "var(--spacing-medium, 8px)",
+                collapsedWidth: "64px",
+                bodyGap: "4px",
+                buttonSize: "large",
+                iconSize: "large",
+            },
+        };
+        const cfg = sizeConfig[size] || sizeConfig.medium;
+
+        this.shadowRoot.innerHTML = "";
+        this._idCounter = 0;
+
+        const style = document.createElement("style");
+        style.textContent = `
+            :host {
+                display: block;
+                font-family: var(--font-family-body, sans-serif);
+                color: var(--component-appbar-color, #f7f7fa);
+            }
+
+            :host([sticky]) {
+                position: sticky;
+                z-index: var(--component-appbar-z-index, 100);
+            }
+            :host([orientation="vertical"][sticky="start"]),
+            :host(:not([orientation])[sticky="start"]) {
+                left: 0;
+                top: 0;
+                height: 100%;
+            }
+            :host([orientation="vertical"][sticky="end"]),
+            :host(:not([orientation])[sticky="end"]) {
+                right: 0;
+                top: 0;
+                height: 100%;
+            }
+            :host([orientation="horizontal"][sticky="start"]) {
+                top: 0;
+                left: 0;
+                width: 100%;
+            }
+            :host([orientation="horizontal"][sticky="end"]) {
+                bottom: 0;
+                left: 0;
+                width: 100%;
+            }
+
+            :host([sticky]) .appbar {
+                border-radius: 0;
+                border: none;
+            }
+            :host([orientation="vertical"][sticky="start"]) .appbar,
+            :host(:not([orientation])[sticky="start"]) .appbar {
+                border-right: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
+            }
+            :host([orientation="vertical"][sticky="end"]) .appbar,
+            :host(:not([orientation])[sticky="end"]) .appbar {
+                border-left: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
+            }
+            :host([orientation="horizontal"][sticky="start"]) .appbar {
+                border-bottom: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
+            }
+            :host([orientation="horizontal"][sticky="end"]) .appbar {
+                border-top: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
+            }
+
+            .appbar {
+                display: flex;
+                background: var(--component-appbar-background, #0c0c0d);
+                border: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
+                border-radius: var(--component-appbar-border-radius, var(--component-sidebar-border-radius, 4px));
+                overflow: visible;
+                padding: var(--_appbar-padding);
+                box-sizing: border-box;
+            }
+
+            .appbar.vertical {
+                flex-direction: column;
+                width: var(--component-appbar-width, 240px);
+                height: 100%;
+                transition: width 0.2s ease;
+            }
+            .appbar.vertical.collapsed {
+                width: var(--_appbar-collapsed-width);
+            }
+
+            .appbar.horizontal {
+                flex-direction: row;
+                width: 100%;
+                height: auto;
+                align-items: center;
+            }
+
+            .appbar-header,
+            .appbar-body,
+            .appbar-footer {
+                flex-shrink: 0;
+            }
+
+            .appbar-body {
+                flex: 1;
+                overflow-y: auto;
+                overflow-x: hidden;
+                display: flex;
+                gap: var(--_appbar-body-gap);
+            }
+
+            .appbar.vertical .appbar-body {
+                flex-direction: column;
+            }
+            .appbar.horizontal .appbar-body {
+                flex-direction: row;
+                overflow-y: hidden;
+                overflow-x: auto;
+                align-items: center;
+            }
+
+            .appbar.vertical .appbar-header {
+                border-bottom: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
+                padding: var(--_appbar-padding) 0;
+                margin-bottom: var(--_appbar-padding);
+            }
+            .appbar.vertical .appbar-footer {
+                border-top: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
+                padding-top: var(--_appbar-padding);
+                margin-top: var(--_appbar-padding);
+            }
+
+            .appbar.horizontal .appbar-header {
+                border-right: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
+                padding: var(--_appbar-padding);
+                padding-right: var(--spacing-x-large, 16px);
+                margin-right: var(--_appbar-padding);
+            }
+            .appbar.horizontal .appbar-footer {
+                border-left: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
+                padding-left: var(--_appbar-padding);
+                margin-left: var(--_appbar-padding);
+            }
+
+            .header-content {
+                display: flex;
+                align-items: center;
+                gap: var(--spacing-small, 8px);
+                overflow: hidden;
+            }
+            .appbar.horizontal .header-content,
+            .appbar.vertical .header-content {
+                flex-direction: row;
+            }
+            .logo-wrapper {
+                width: var(--_icon-col-width);
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                flex-shrink: 0;
+            }
+
+            .header-title {
+                font-weight: bold;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                font-size: var(--font-size-label, 0.9em);
+            }
+            .appbar.vertical.collapsed .header-title {
+                display: none;
+            }
+
+            .nav-item {
+                display: flex;
+                align-items: center;
+                position: relative;
+            }
+            .appbar.vertical .nav-item {
+                width: 100%;
+            }
+            .appbar.vertical .nav-item y-button {
+                display: block;
+                width: 100%;
+            }
+            .appbar.vertical .nav-item y-button::part(button),
+            .appbar.vertical .appbar-footer y-button::part(button) {
+                width: 100%;
+                justify-content: flex-start;
+                padding-left: 0;
+                padding-right: 0;
+            }
+
+            /* Fixed-width icon column — matches collapsed inner width so icons stay centred across states */
+            .appbar.vertical .nav-item y-button::part(left-icon),
+            .appbar.vertical .appbar-footer y-button::part(left-icon) {
+                width: var(--_icon-col-width);
+                display: flex;
+                justify-content: center;
+                flex-shrink: 0;
+            }
+
+            .appbar.vertical .nav-item y-button::part(right-icon) {
+                margin-left: auto;
+            }
+
+            .appbar.vertical.collapsed .nav-item y-button::part(button),
+            .appbar.vertical.collapsed .appbar-footer y-button::part(button) {
+                min-width: 0;
+            }
+            .appbar.vertical.collapsed .nav-item y-button::part(label),
+            .appbar.vertical.collapsed .appbar-footer y-button::part(label) {
+                display: none;
+            }
+            .appbar.vertical.collapsed .nav-item y-button::part(right-icon),
+            .appbar.vertical.collapsed .appbar-footer y-button::part(right-icon) {
+                display: none;
+            }
+
+            .appbar-footer {
+                display: flex;
+                flex-direction: column;
+                gap: 2px;
+            }
+            .appbar.horizontal .appbar-footer {
+                flex-direction: row;
+                align-items: center;
+            }
+            .appbar.vertical .appbar-footer y-button {
+                display: block;
+                width: 100%;
+            }
+
+            .appbar.vertical.collapsed .appbar-header,
+            .appbar.vertical.collapsed .appbar-body,
+            .appbar.vertical.collapsed .appbar-footer {
+                align-items: center;
+            }
+
+            ::slotted(*) {
+                display: block;
+            }
+        `;
+        this.shadowRoot.appendChild(style);
+
+        // Clone document stylesheets so CSS-class-based icons (e.g. Font Awesome) render in shadow DOM
+        document.querySelectorAll('link[rel="stylesheet"]').forEach((link) => {
+            this.shadowRoot.appendChild(link.cloneNode(true));
+        });
+
+        const bar = document.createElement("div");
+        bar.className = `appbar ${isVertical ? "vertical" : "horizontal"}`;
+
+        if (isCollapsed) bar.classList.add("collapsed");
+        bar.setAttribute("role", "navigation");
+        bar.style.setProperty("--_appbar-padding", cfg.padding);
+        bar.style.setProperty("--_appbar-collapsed-width", cfg.collapsedWidth);
+        bar.style.setProperty("--_appbar-body-gap", cfg.bodyGap);
+        bar.style.setProperty(
+            "--_icon-col-width",
+            `calc(${cfg.collapsedWidth} - 2 * var(--_appbar-padding) - 2 * var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)))`,
+        );
+
+        /* --- Header: logo + title --- */
+        const header = document.createElement("div");
+        header.className = "appbar-header";
+        header.setAttribute("part", "header");
+
+        const headerContent = document.createElement("div");
+        headerContent.className = "header-content";
+
+        const logoWrapper = document.createElement("div");
+        logoWrapper.className = "logo-wrapper";
+
+        const logoSlot = document.createElement("slot");
+        logoSlot.name = "logo";
+        logoWrapper.appendChild(logoSlot);
+        headerContent.appendChild(logoWrapper);
+
+        const titleWrapper = document.createElement("div");
+        titleWrapper.className = "header-title";
+
+        const titleSlot = document.createElement("slot");
+        titleSlot.name = "title";
+        titleWrapper.appendChild(titleSlot);
+        headerContent.appendChild(titleWrapper);
+
+        const headerSlot = document.createElement("slot");
+        headerSlot.name = "header";
+        header.appendChild(headerContent);
+        header.appendChild(headerSlot);
+        bar.appendChild(header);
+
+        /* --- Body: y-button nav items --- */
+        const body = document.createElement("div");
+        body.className = "appbar-body";
+        body.setAttribute("part", "body");
+
+        const navItems = this.items;
+        navItems.forEach((item) => {
+            const hasChildren = item.children?.length > 0;
+            const wrapper = document.createElement("div");
+            wrapper.className = "nav-item";
+
+            const btn = document.createElement("y-button");
+            const btnId = this._uid("appbar-btn");
+            btn.id = btnId;
+            const isActive = this._isItemActive(item);
+            btn.setAttribute("color", isActive ? "primary" : "base");
+            btn.setAttribute("style-type", "flat");
+            btn.setAttribute("size", cfg.buttonSize);
+
+            if (item.icon) {
+                if (item.icon.trim().startsWith("<")) {
+                    const iconEl = document.createElement("span");
+                    iconEl.slot = "left-icon";
+                    iconEl.setAttribute("part", "icon");
+                    iconEl.innerHTML = item.icon;
+                    btn.appendChild(iconEl);
+                } else {
+                    const iconEl = document.createElement("y-icon");
+                    iconEl.slot = "left-icon";
+                    iconEl.setAttribute("part", "icon");
+                    iconEl.setAttribute("name", item.icon);
+                    iconEl.setAttribute("size", cfg.iconSize);
+                    btn.appendChild(iconEl);
+                }
+            }
+
+            if (item.text && !isCollapsed) {
+                const label = document.createTextNode(item.text);
+                btn.appendChild(label);
+            }
+
+            if (hasChildren && !isCollapsed) {
+                const arrow = document.createElement("span");
+                arrow.slot = "right-icon";
+                arrow.innerHTML = isVertical ? chevronRight : chevronDown;
+                btn.appendChild(arrow);
+            }
+
+            if (item.href && !hasChildren) {
+                btn.addEventListener("click", () => {
+                    window.location.href = item.href;
+                });
+            }
+
+            if (item.slot) {
+                const slot = document.createElement("slot");
+                slot.name = item.slot;
+                slot.appendChild(btn);
+                wrapper.appendChild(slot);
+            } else {
+                wrapper.appendChild(btn);
+            }
+
+            if (hasChildren) {
+                const menu = document.createElement("y-menu");
+                menu.setAttribute("anchor", btnId);
+                menu.setAttribute("direction", menuDir);
+                menu.setAttribute("size", cfg.buttonSize);
+                menu.items = item.children;
+                wrapper.appendChild(menu);
+            }
+
+            body.appendChild(wrapper);
+        });
+
+        bar.appendChild(body);
+
+        /* --- Footer: slot + collapse toggle (vertical only) --- */
+        const footer = document.createElement("div");
+        footer.className = "appbar-footer";
+        footer.setAttribute("part", "footer");
+
+        const footerSlot = document.createElement("slot");
+        footerSlot.name = "footer";
+        footer.appendChild(footerSlot);
+
+        if (isVertical) {
+            const collapseBtn = document.createElement("y-button");
+            collapseBtn.setAttribute("color", "base");
+            collapseBtn.setAttribute("style-type", "flat");
+            collapseBtn.setAttribute("size", cfg.buttonSize);
+            collapseBtn.setAttribute(
+                "aria-label",
+                isCollapsed ? "Expand sidebar" : "Collapse sidebar",
+            );
+            collapseBtn.className = "collapse-btn";
+
+            const collapseIcon = document.createElement("span");
+            collapseIcon.slot = "left-icon";
+            collapseIcon.innerHTML = isCollapsed ? expandRight : collapseLeft;
+            collapseBtn.appendChild(collapseIcon);
+
+            if (!isCollapsed) {
+                const collapseLabel = document.createTextNode("Collapse");
+                collapseBtn.appendChild(collapseLabel);
+            }
+
+            collapseBtn.addEventListener("click", this._onCollapseClick);
+            footer.appendChild(collapseBtn);
+        }
+
+        bar.appendChild(footer);
+        this.shadowRoot.appendChild(bar);
+    }
+}
+
+if (!customElements.get("y-appbar")) {
+    customElements.define("y-appbar", YumeAppbar);
+}
+
+export { YumeAppbar };