@studious-creative/yumekit 0.1.0

package/dist/components/y-appbar.js

@@ -0,0 +1,1378 @@
+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--, #1D1D1D));
+            background: var(--background-color, #F1F6FA);
+            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",
+            ],
+            secondary: [
+                "--secondary-content--",
+                "--secondary-content-hover",
+                "--secondary-content-active",
+                "--secondary-background-component",
+                "--secondary-background-hover",
+                "--secondary-background-active",
+            ],
+            base: [
+                "--base-content--",
+                "--base-content-lighter",
+                "--base-content-lightest",
+                "--base-background-component",
+                "--base-background-hover",
+                "--base-background-active",
+            ],
+            success: [
+                "--success-content--",
+                "--success-content-hover",
+                "--success-content-active",
+                "--success-background-component",
+                "--success-background-hover",
+                "--success-background-active",
+            ],
+            error: [
+                "--error-content--",
+                "--error-content-hover",
+                "--error-content-active",
+                "--error-background-component",
+                "--error-background-hover",
+                "--error-background-active",
+            ],
+            warning: [
+                "--warning-content--",
+                "--warning-content-hover",
+                "--warning-content-active",
+                "--warning-background-component",
+                "--warning-background-hover",
+                "--warning-background-active",
+            ],
+            help: [
+                "--help-content--",
+                "--help-content-hover",
+                "--help-content-active",
+                "--help-background-component",
+                "--help-background-hover",
+                "--help-background-active",
+            ],
+        };
+
+        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]}, rgba(241,246,250,1))`,
+                "--border-color": `var(${colorVars[color][0]}, rgba(29,29,29,1))`,
+                "--text-color": `var(${colorVars[color][0]}, rgba(29,29,29,1))`,
+            },
+            filled: {
+                "--background-color": `var(${colorVars[color][0]}, rgba(29,29,29,1))`,
+                "--border-color": `var(${colorVars[color][0]}, rgba(29,29,29,1))`,
+                "--text-color": `var(${colorVars[color][3]}, rgba(241,246,250,1))`,
+            },
+            flat: {
+                "--background-color": `var(${colorVars[color][3]},rgba(241,246,250,1))`,
+                "--border-color": `var(${colorVars[color][3]},rgba(241,246,250,1))`,
+                "--text-color": `var(${colorVars[color][0]},rgba(29,29,29,1))`,
+            },
+        };
+
+        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]}, rgba(215,219,222,1))`,
+            );
+            this.button.style.setProperty(
+                "--hover-text-color",
+                `var(${colorVars[color][3]}, rgba(241,246,250,1))`,
+            );
+            this.button.style.setProperty(
+                "--hover-border-color",
+                `var(${colorVars[color][1]}, rgba(215,219,222,1))`,
+            );
+            this.button.style.setProperty(
+                "--focus-background-color",
+                `var(${colorVars[color][2]}, rgba(188,192,195,1))`,
+            );
+            this.button.style.setProperty(
+                "--focus-text-color",
+                `var(${colorVars[color][3]}, rgba(241,246,250,1))`,
+            );
+            this.button.style.setProperty(
+                "--focus-border-color",
+                `var(${colorVars[color][2]}, rgba(188,192,195,1))`,
+            );
+            this.button.style.setProperty(
+                "--active-background-color",
+                `var(${colorVars[color][0]}, rgba(29,29,29,1))`,
+            );
+            this.button.style.setProperty(
+                "--active-text-color",
+                `var(${colorVars[color][3]}, rgba(241,246,250,1))`,
+            );
+            this.button.style.setProperty(
+                "--active-border-color",
+                `var(${colorVars[color][0]}, rgba(29,29,29,1))`,
+            );
+        } else {
+            const borderColor = `var(${colorVars[color][0]}, rgba(29,29,29,1))`;
+
+            this.button.style.setProperty(
+                "--hover-background-color",
+                `var(${colorVars[color][4]}, rgba(215,219,222,1))`,
+            );
+            this.button.style.setProperty(
+                "--hover-text-color",
+                `var(${colorVars[color][0]}, rgba(29,29,29,1))`,
+            );
+            this.button.style.setProperty(
+                "--focus-background-color",
+                `var(${colorVars[color][5]}, rgba(188,192,195,1))`,
+            );
+            this.button.style.setProperty(
+                "--focus-text-color",
+                `var(${colorVars[color][0]}, rgba(29,29,29,1))`,
+            );
+            this.button.style.setProperty(
+                "--active-background-color",
+                `var(${colorVars[color][0]}, rgba(29,29,29,1))`,
+            );
+            this.button.style.setProperty(
+                "--active-text-color",
+                `var(${colorVars[color][3]}, rgba(241,246,250,1))`,
+            );
+
+            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]}, rgba(215,219,222,1))`,
+                );
+                this.button.style.setProperty(
+                    "--focus-border-color",
+                    `var(${colorVars[color][5]}, rgba(188,192,195,1))`,
+                );
+                this.button.style.setProperty(
+                    "--active-border-color",
+                    `var(${colorVars[color][0]}, rgba(29,29,29,1))`,
+                );
+            }
+        }
+
+        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);
+}
+
+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.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 = vh - menuRect.height - 10;
+            }
+        } else {
+            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(10, Math.min(top, vh - menuRect.height - 10));
+        left = Math.max(10, Math.min(left, vw - menuRect.width - 10));
+
+        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, #fff);
+                border: var(--component-menu-border-width, 1px) solid var(--component-menu-border-color, #ccc);
+                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, #000);
+                font-size: var(--font-size-button, 1em);
+            }
+
+            li.menuitem:hover {
+                background: var(--component-menu-hover-background, #eee);
+            }
+
+            ul.submenu {
+                position: absolute;
+                top: 0;
+                left: 100%;
+                display: none;
+                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");
+        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",
+            },
+            medium: {
+                padding: "var(--spacing-small, 6px)",
+                collapsedWidth: "52px",
+                bodyGap: "3px",
+                buttonSize: "medium",
+            },
+            large: {
+                padding: "var(--spacing-medium, 8px)",
+                collapsedWidth: "64px",
+                bodyGap: "4px",
+                buttonSize: "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, #fff);
+            }
+
+            :host([sticky]) {
+                position: sticky;
+                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, #333);
+            }
+            :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, #333);
+            }
+            :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, #333);
+            }
+            :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, #333);
+            }
+
+            .appbar {
+                display: flex;
+                background: var(--component-appbar-background, #111);
+                border: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #333);
+                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, #333);
+                padding-bottom: var(--_appbar-padding);
+                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, #333);
+                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, #333);
+                padding-right: var(--_appbar-padding);
+                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, #333);
+                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";
+
+        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);
+
+        header.appendChild(headerContent);
+        bar.appendChild(header);
+
+        /* --- Body: y-button nav items --- */
+        const body = document.createElement("div");
+        body.className = "appbar-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) {
+                const iconEl = document.createElement("span");
+                iconEl.slot = "left-icon";
+                iconEl.innerHTML = item.icon;
+                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;
+                });
+            }
+
+            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";
+
+        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 };