liqgui 0.1.0

package/dist/components/glass-modal.js

@@ -0,0 +1,128 @@
+import { BaseElement } from "../core/base-element.js";
+import { trapFocus } from "../core/focus-trap.js";
+import { motion } from "../core/motion.js";
+export class GlassModal extends BaseElement {
+    static get observedAttributes() {
+        return ["open"];
+    }
+    connectedCallback() {
+        var _a;
+        this.mount(`
+            <div class="backdrop"></div>
+            <div class="panel" role="dialog" aria-modal="true">
+                <button class="close-btn" aria-label="Close">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M18 6L6 18M6 6l12 12"/>
+                    </svg>
+                </button>
+                <slot></slot>
+            </div>
+        `, `
+            :host {
+                position: fixed;
+                inset: 0;
+                display: none;
+                place-items: center;
+                z-index: 9999;
+            }
+            :host([open]) {
+                display: grid;
+            }
+            .backdrop {
+                position: absolute;
+                inset: 0;
+                background: rgba(0, 0, 0, 0.6);
+                backdrop-filter: blur(4px);
+                -webkit-backdrop-filter: blur(4px);
+            }
+            .panel {
+                position: relative;
+                background: var(--lg-bg);
+                backdrop-filter: blur(var(--lg-blur));
+                -webkit-backdrop-filter: blur(var(--lg-blur));
+                border-radius: var(--lg-radius);
+                border: 1px solid var(--lg-border);
+                box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
+                padding: 2rem;
+                min-width: 320px;
+                max-width: 90vw;
+                max-height: 85vh;
+                overflow: auto;
+            }
+            .panel::before {
+                content: "";
+                position: absolute;
+                top: 0;
+                left: 0;
+                right: 0;
+                height: 1px;
+                background: linear-gradient(90deg, 
+                    transparent, 
+                    rgba(255, 255, 255, 0.4), 
+                    transparent
+                );
+            }
+            .close-btn {
+                position: absolute;
+                top: 1rem;
+                right: 1rem;
+                width: 32px;
+                height: 32px;
+                border-radius: 50%;
+                background: rgba(255, 255, 255, 0.1);
+                border: 1px solid rgba(255, 255, 255, 0.2);
+                color: inherit;
+                cursor: pointer;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                transition: all 0.2s ease;
+            }
+            .close-btn:hover {
+                background: rgba(255, 255, 255, 0.2);
+            }
+            .close-btn:focus-visible {
+                outline: 2px solid var(--lg-accent-focus, #5ac8fa);
+                outline-offset: 2px;
+            }
+        `);
+        this.panel = this.root.querySelector(".panel");
+        this.backdrop = this.root.querySelector(".backdrop");
+        // Close on backdrop click
+        this.backdrop.addEventListener("click", () => this.close());
+        // Close button
+        (_a = this.root.querySelector(".close-btn")) === null || _a === void 0 ? void 0 : _a.addEventListener("click", () => this.close());
+        // Close on Escape
+        this.addEventListener("keydown", (e) => {
+            if (e.key === "Escape")
+                this.close();
+        });
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        var _a;
+        if (name !== "open" || !this.panel || !this.backdrop)
+            return;
+        if (this.hasAttribute("open")) {
+            // Opening animation
+            motion.fadeIn(this.backdrop, 200);
+            motion.scaleIn(this.panel, 300);
+            this.release = trapFocus(this.panel);
+            document.body.style.overflow = "hidden";
+        }
+        else if (oldValue !== null) {
+            // Closing animation
+            motion.fadeOut(this.backdrop, 150);
+            motion.scaleOut(this.panel, 200);
+            (_a = this.release) === null || _a === void 0 ? void 0 : _a.call(this);
+            document.body.style.overflow = "";
+        }
+    }
+    open() {
+        this.setAttribute("open", "");
+    }
+    close() {
+        this.removeAttribute("open");
+        this.dispatchEvent(new CustomEvent("close", { bubbles: true }));
+    }
+}
+customElements.define("glass-modal", GlassModal);

package/dist/components/glass-navbar.d.ts

@@ -0,0 +1,6 @@
+import { BaseElement } from "../core/base-element.js";
+export declare class GlassNavbar extends BaseElement {
+    private lastScroll;
+    connectedCallback(): void;
+    private handleScroll;
+}

package/dist/components/glass-navbar.js

@@ -0,0 +1,84 @@
+import { BaseElement } from "../core/base-element.js";
+export class GlassNavbar extends BaseElement {
+    constructor() {
+        super(...arguments);
+        this.lastScroll = 0;
+    }
+    connectedCallback() {
+        this.mount(`
+            <nav>
+                <div class="brand"><slot name="brand"></slot></div>
+                <div class="content"><slot></slot></div>
+                <div class="actions"><slot name="actions"></slot></div>
+            </nav>
+        `, `
+            :host {
+                display: block;
+                position: sticky;
+                top: 0;
+                z-index: 100;
+                transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+            }
+            :host([hidden-nav]) {
+                transform: translateY(-100%);
+            }
+            nav {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                gap: 2rem;
+                padding: 1rem 2rem;
+                background: var(--lg-bg);
+                backdrop-filter: blur(var(--lg-blur));
+                -webkit-backdrop-filter: blur(var(--lg-blur));
+                border-bottom: 1px solid var(--lg-border);
+                transition: all 0.3s ease;
+            }
+            :host([scrolled]) nav {
+                box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
+            }
+            .brand {
+                font-weight: 700;
+                font-size: 1.2rem;
+            }
+            .content {
+                display: flex;
+                align-items: center;
+                gap: 1.5rem;
+            }
+            .actions {
+                display: flex;
+                align-items: center;
+                gap: 0.75rem;
+            }
+            ::slotted(a) {
+                text-decoration: none;
+                color: inherit;
+                opacity: 0.8;
+                transition: opacity 0.2s;
+            }
+            ::slotted(a:hover) {
+                opacity: 1;
+            }
+        `);
+        // Auto-hide on scroll
+        if (this.hasAttribute("auto-hide")) {
+            window.addEventListener("scroll", this.handleScroll.bind(this), { passive: true });
+        }
+        // Scrolled state
+        window.addEventListener("scroll", () => {
+            this.toggleAttribute("scrolled", window.scrollY > 10);
+        }, { passive: true });
+    }
+    handleScroll() {
+        const currentScroll = window.scrollY;
+        if (currentScroll > this.lastScroll && currentScroll > 100) {
+            this.setAttribute("hidden-nav", "");
+        }
+        else {
+            this.removeAttribute("hidden-nav");
+        }
+        this.lastScroll = currentScroll;
+    }
+}
+customElements.define("glass-navbar", GlassNavbar);

package/dist/components/glass-progress.d.ts

@@ -0,0 +1,12 @@
+import { BaseElement } from "../core/base-element.js";
+export declare class GlassProgress extends BaseElement {
+    static get observedAttributes(): string[];
+    get value(): number;
+    set value(v: number);
+    get max(): number;
+    connectedCallback(): void;
+    private mountLinear;
+    private mountCircular;
+    private updateProgress;
+    attributeChangedCallback(name: string): void;
+}

package/dist/components/glass-progress.js

@@ -0,0 +1,159 @@
+import { BaseElement } from "../core/base-element.js";
+export class GlassProgress extends BaseElement {
+    static get observedAttributes() {
+        return ["value", "max", "variant", "indeterminate"];
+    }
+    get value() { return parseFloat(this.getAttribute("value") || "0"); }
+    set value(v) { this.setAttribute("value", String(v)); }
+    get max() { return parseFloat(this.getAttribute("max") || "100"); }
+    connectedCallback() {
+        const variant = this.getAttribute("variant") || "linear";
+        if (variant === "circular") {
+            this.mountCircular();
+        }
+        else {
+            this.mountLinear();
+        }
+    }
+    mountLinear() {
+        this.mount(`
+            <div class="progress-track" role="progressbar" aria-valuenow="${this.value}" aria-valuemin="0" aria-valuemax="${this.max}">
+                <div class="progress-fill"></div>
+            </div>
+            <span class="progress-label"><slot></slot></span>
+        `, `
+            :host {
+                display: block;
+            }
+            .progress-track {
+                height: 6px;
+                background: rgba(255, 255, 255, 0.15);
+                border-radius: 999px;
+                overflow: hidden;
+            }
+            .progress-fill {
+                height: 100%;
+                background: var(--lg-accent);
+                border-radius: 999px;
+                transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+            }
+            :host([indeterminate]) .progress-fill {
+                width: 30% !important;
+                animation: indeterminate 1.5s ease-in-out infinite;
+            }
+            .progress-label {
+                display: block;
+                margin-top: 0.5rem;
+                font-size: 0.875rem;
+                opacity: 0.7;
+            }
+            .progress-label:empty {
+                display: none;
+            }
+            @keyframes indeterminate {
+                0% { transform: translateX(-100%); }
+                100% { transform: translateX(400%); }
+            }
+        `);
+        this.updateProgress();
+    }
+    mountCircular() {
+        const size = 80;
+        const strokeWidth = 6;
+        const radius = (size - strokeWidth) / 2;
+        const circumference = 2 * Math.PI * radius;
+        this.mount(`
+            <div class="circular-wrapper">
+                <svg class="circular-progress" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">
+                    <circle class="track" cx="${size / 2}" cy="${size / 2}" r="${radius}" />
+                    <circle class="fill" cx="${size / 2}" cy="${size / 2}" r="${radius}" 
+                        stroke-dasharray="${circumference}" 
+                        stroke-dashoffset="${circumference}" />
+                </svg>
+                <span class="circular-label"><slot></slot></span>
+            </div>
+        `, `
+            :host {
+                display: inline-block;
+            }
+            .circular-wrapper {
+                position: relative;
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+            }
+            .circular-progress {
+                transform: rotate(-90deg);
+            }
+            .track {
+                fill: none;
+                stroke: rgba(255, 255, 255, 0.15);
+                stroke-width: ${strokeWidth};
+            }
+            .fill {
+                fill: none;
+                stroke: url(#gradient) currentColor;
+                stroke-width: ${strokeWidth};
+                stroke-linecap: round;
+                transition: stroke-dashoffset 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+            }
+            :host([indeterminate]) .fill {
+                animation: circular-spin 1.5s linear infinite;
+                stroke-dashoffset: ${circumference * 0.75} !important;
+            }
+            :host([indeterminate]) .circular-progress {
+                animation: rotate 2s linear infinite;
+            }
+            .circular-label {
+                position: absolute;
+                font-size: 1rem;
+                font-weight: 600;
+            }
+            @keyframes circular-spin {
+                0% { stroke-dashoffset: ${circumference}; }
+                50% { stroke-dashoffset: ${circumference * 0.25}; }
+                100% { stroke-dashoffset: ${circumference}; }
+            }
+            @keyframes rotate {
+                100% { transform: rotate(270deg); }
+            }
+        `);
+        // Add gradient definition
+        const svg = this.root.querySelector("svg");
+        const defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
+        defs.innerHTML = `
+            <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
+                <stop offset="0%" style="stop-color:#5ac8fa" />
+                <stop offset="100%" style="stop-color:#007aff" />
+            </linearGradient>
+        `;
+        svg.prepend(defs);
+        this.updateProgress();
+    }
+    updateProgress() {
+        const percent = Math.min(100, Math.max(0, (this.value / this.max) * 100));
+        const variant = this.getAttribute("variant") || "linear";
+        if (variant === "circular") {
+            const circle = this.root.querySelector(".fill");
+            if (circle) {
+                const radius = parseFloat(circle.getAttribute("r") || "37");
+                const circumference = 2 * Math.PI * radius;
+                const offset = circumference - (percent / 100) * circumference;
+                circle.style.strokeDashoffset = String(offset);
+            }
+        }
+        else {
+            const fill = this.root.querySelector(".progress-fill");
+            if (fill)
+                fill.style.width = `${percent}%`;
+        }
+        const track = this.root.querySelector("[role='progressbar']");
+        track === null || track === void 0 ? void 0 : track.setAttribute("aria-valuenow", String(this.value));
+    }
+    attributeChangedCallback(name) {
+        if (name === "value" || name === "max") {
+            this.updateProgress();
+        }
+    }
+}
+customElements.define("glass-progress", GlassProgress);

package/dist/components/glass-slider.d.ts

@@ -0,0 +1,17 @@
+import { BaseElement } from "../core/base-element.js";
+export declare class GlassSlider extends BaseElement {
+    private track?;
+    private thumb?;
+    private fill?;
+    private isDragging;
+    static get observedAttributes(): string[];
+    get min(): number;
+    get max(): number;
+    get step(): number;
+    get value(): number;
+    set value(v: number);
+    connectedCallback(): void;
+    private setupInteraction;
+    private updateUI;
+    attributeChangedCallback(name: string): void;
+}

package/dist/components/glass-slider.js

@@ -0,0 +1,168 @@
+import { BaseElement } from "../core/base-element.js";
+import { springAnimate, snappySpring } from "../core/spring-engine.js";
+export class GlassSlider extends BaseElement {
+    constructor() {
+        super(...arguments);
+        this.isDragging = false;
+    }
+    static get observedAttributes() {
+        return ["value", "min", "max", "step", "disabled"];
+    }
+    get min() { return parseFloat(this.getAttribute("min") || "0"); }
+    get max() { return parseFloat(this.getAttribute("max") || "100"); }
+    get step() { return parseFloat(this.getAttribute("step") || "1"); }
+    get value() { return parseFloat(this.getAttribute("value") || "50"); }
+    set value(v) { this.setAttribute("value", String(v)); }
+    connectedCallback() {
+        this.mount(`
+            <div class="slider" role="slider" tabindex="0"
+                 aria-valuemin="${this.min}" 
+                 aria-valuemax="${this.max}" 
+                 aria-valuenow="${this.value}">
+                <div class="track">
+                    <div class="fill"></div>
+                </div>
+                <div class="thumb"></div>
+            </div>
+        `, `
+            :host {
+                display: block;
+                padding: 0.5rem 0;
+            }
+            .slider {
+                position: relative;
+                height: 24px;
+                display: flex;
+                align-items: center;
+                cursor: pointer;
+            }
+            .slider:focus-visible .thumb {
+                outline: 2px solid var(--lg-accent-focus, #5ac8fa);
+                outline-offset: 2px;
+            }
+            :host([disabled]) .slider {
+                opacity: 0.5;
+                cursor: not-allowed;
+            }
+            .track {
+                position: absolute;
+                left: 0;
+                right: 0;
+                height: 6px;
+                background: rgba(255, 255, 255, 0.15);
+                border-radius: 999px;
+                overflow: hidden;
+            }
+            .fill {
+                height: 100%;
+                background: var(--lg-accent);
+                border-radius: 999px;
+                transition: width 0.1s ease-out;
+            }
+            .thumb {
+                position: absolute;
+                width: 20px;
+                height: 20px;
+                background: white;
+                border-radius: 50%;
+                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+                transform: translateX(-50%);
+                transition: transform 0.1s ease;
+            }
+            .thumb:hover {
+                transform: translateX(-50%) scale(1.1);
+            }
+            .slider:active .thumb {
+                transform: translateX(-50%) scale(0.95);
+            }
+        `);
+        this.track = this.root.querySelector(".track");
+        this.thumb = this.root.querySelector(".thumb");
+        this.fill = this.root.querySelector(".fill");
+        this.updateUI(false);
+        this.setupInteraction();
+    }
+    setupInteraction() {
+        const slider = this.root.querySelector(".slider");
+        const updateFromEvent = (e) => {
+            if (this.hasAttribute("disabled"))
+                return;
+            const rect = this.track.getBoundingClientRect();
+            const clientX = "touches" in e ? e.touches[0].clientX : e.clientX;
+            const percent = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+            const rawValue = this.min + percent * (this.max - this.min);
+            const steppedValue = Math.round(rawValue / this.step) * this.step;
+            this.value = Math.max(this.min, Math.min(this.max, steppedValue));
+        };
+        slider.addEventListener("mousedown", (e) => {
+            this.isDragging = true;
+            updateFromEvent(e);
+        });
+        slider.addEventListener("touchstart", (e) => {
+            this.isDragging = true;
+            updateFromEvent(e);
+        }, { passive: true });
+        window.addEventListener("mousemove", (e) => {
+            if (this.isDragging)
+                updateFromEvent(e);
+        });
+        window.addEventListener("touchmove", (e) => {
+            if (this.isDragging)
+                updateFromEvent(e);
+        }, { passive: true });
+        window.addEventListener("mouseup", () => this.isDragging = false);
+        window.addEventListener("touchend", () => this.isDragging = false);
+        // Keyboard support
+        slider.addEventListener("keydown", (e) => {
+            const key = e.key;
+            if (this.hasAttribute("disabled"))
+                return;
+            let newValue = this.value;
+            if (key === "ArrowRight" || key === "ArrowUp") {
+                newValue = Math.min(this.max, this.value + this.step);
+            }
+            else if (key === "ArrowLeft" || key === "ArrowDown") {
+                newValue = Math.max(this.min, this.value - this.step);
+            }
+            else if (key === "Home") {
+                newValue = this.min;
+            }
+            else if (key === "End") {
+                newValue = this.max;
+            }
+            else {
+                return;
+            }
+            e.preventDefault();
+            this.value = newValue;
+        });
+    }
+    updateUI(animate = true) {
+        const percent = ((this.value - this.min) / (this.max - this.min)) * 100;
+        if (this.fill)
+            this.fill.style.width = `${percent}%`;
+        if (this.thumb) {
+            if (animate && !this.isDragging) {
+                const currentLeft = parseFloat(this.thumb.style.left) || 0;
+                springAnimate(currentLeft, percent, v => {
+                    this.thumb.style.left = `${v}%`;
+                }, snappySpring);
+            }
+            else {
+                this.thumb.style.left = `${percent}%`;
+            }
+        }
+        const slider = this.root.querySelector(".slider");
+        slider === null || slider === void 0 ? void 0 : slider.setAttribute("aria-valuenow", String(this.value));
+    }
+    attributeChangedCallback(name) {
+        if (name === "value") {
+            this.updateUI();
+            this.dispatchEvent(new CustomEvent("input", {
+                detail: { value: this.value },
+                bubbles: true
+            }));
+        }
+    }
+}
+customElements.define("glass-slider", GlassSlider);

package/dist/components/glass-tabs.d.ts

@@ -0,0 +1,7 @@
+import { BaseElement } from "../core/base-element.js";
+export declare class GlassTabs extends BaseElement {
+    private indicator?;
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    private selectTab;
+}

package/dist/components/glass-tabs.js

@@ -0,0 +1,102 @@
+import { BaseElement } from "../core/base-element.js";
+import { springAnimate, snappySpring } from "../core/spring-engine.js";
+export class GlassTabs extends BaseElement {
+    static get observedAttributes() {
+        return ["value"];
+    }
+    connectedCallback() {
+        this.mount(`
+            <div class="tabs-container">
+                <div class="indicator"></div>
+                <slot></slot>
+            </div>
+        `, `
+            :host {
+                display: inline-block;
+            }
+            .tabs-container {
+                position: relative;
+                display: flex;
+                gap: 0.25rem;
+                padding: 0.25rem;
+                background: var(--lg-bg);
+                backdrop-filter: blur(var(--lg-blur));
+                -webkit-backdrop-filter: blur(var(--lg-blur));
+                border-radius: var(--lg-radius);
+                border: 1px solid var(--lg-border);
+            }
+            .indicator {
+                position: absolute;
+                top: 0.25rem;
+                bottom: 0.25rem;
+                background: rgba(255, 255, 255, 0.15);
+                border-radius: calc(var(--lg-radius) - 4px);
+                transition: none;
+                pointer-events: none;
+            }
+            ::slotted(button) {
+                position: relative;
+                padding: 0.6rem 1.2rem;
+                border: none;
+                background: transparent;
+                color: inherit;
+                font: inherit;
+                cursor: pointer;
+                border-radius: calc(var(--lg-radius) - 4px);
+                opacity: 0.7;
+                transition: opacity 0.2s;
+                z-index: 1;
+            }
+            ::slotted(button:hover) {
+                opacity: 1;
+            }
+            ::slotted(button[aria-selected="true"]) {
+                opacity: 1;
+            }
+        `);
+        this.indicator = this.root.querySelector(".indicator");
+        // Handle tab clicks
+        this.addEventListener("click", (e) => {
+            const target = e.target;
+            if (target.tagName === "BUTTON") {
+                this.selectTab(target);
+            }
+        });
+        // Initialize first tab
+        requestAnimationFrame(() => {
+            const firstTab = this.querySelector("button");
+            if (firstTab)
+                this.selectTab(firstTab, false);
+        });
+    }
+    selectTab(tab, animate = true) {
+        // Update aria states
+        this.querySelectorAll("button").forEach(btn => btn.setAttribute("aria-selected", "false"));
+        tab.setAttribute("aria-selected", "true");
+        // Animate indicator
+        const rect = tab.getBoundingClientRect();
+        const containerRect = this.getBoundingClientRect();
+        const left = rect.left - containerRect.left - 4; // Subtract padding
+        const width = rect.width;
+        if (animate && this.indicator) {
+            const currentLeft = parseFloat(this.indicator.style.left) || 0;
+            const currentWidth = parseFloat(this.indicator.style.width) || width;
+            springAnimate(currentLeft, left, v => {
+                this.indicator.style.left = `${v}px`;
+            }, snappySpring);
+            springAnimate(currentWidth, width, v => {
+                this.indicator.style.width = `${v}px`;
+            }, snappySpring);
+        }
+        else if (this.indicator) {
+            this.indicator.style.left = `${left}px`;
+            this.indicator.style.width = `${width}px`;
+        }
+        // Dispatch event
+        this.dispatchEvent(new CustomEvent("change", {
+            detail: { value: tab.dataset.value || tab.textContent },
+            bubbles: true
+        }));
+    }
+}
+customElements.define("glass-tabs", GlassTabs);