liqgui 0.1.0

package/dist/components/glass-button.js

@@ -0,0 +1,124 @@
+import { BaseElement } from "../core/base-element.js";
+import { glowCSS, createRipple } from "../core/glow.js";
+import { springAnimate, bouncySpring } from "../core/spring-engine.js";
+export class GlassButton extends BaseElement {
+    static get observedAttributes() {
+        return ["variant", "disabled", "loading"];
+    }
+    connectedCallback() {
+        const variant = this.getAttribute("variant") || "default";
+        this.mount(`
+            <button part="button">
+                <span class="glow"></span>
+                <span class="ripple-container"></span>
+                <span class="content">
+                    <span class="loader"></span>
+                    <slot></slot>
+                </span>
+            </button>
+        `, `
+            :host {
+                display: inline-block;
+            }
+            button {
+                position: relative;
+                padding: 0.75rem 1.5rem;
+                border-radius: 999px;
+                background: var(--lg-bg);
+                backdrop-filter: blur(var(--lg-blur));
+                border: 1px solid var(--lg-border);
+                color: inherit;
+                font: inherit;
+                font-weight: 500;
+                cursor: pointer;
+                overflow: hidden;
+                transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+            }
+            button:hover {
+                border-color: rgba(255, 255, 255, 0.5);
+                box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+            }
+            button:focus-visible {
+                outline: 2px solid var(--lg-accent-focus, #5ac8fa);
+                outline-offset: 2px;
+            }
+            button:disabled {
+                opacity: 0.5;
+                cursor: not-allowed;
+                pointer-events: none;
+            }
+            .glow { ${glowCSS("var(--lg-accent)")} }
+            button:hover .glow { opacity: 0.5; }
+            
+            /* Variants */
+            :host([variant="primary"]) button {
+                background: var(--lg-accent);
+                border-color: transparent;
+                color: white;
+            }
+            :host([variant="ghost"]) button {
+                background: transparent;
+                border-color: transparent;
+            }
+            :host([variant="ghost"]) button:hover {
+                background: rgba(255, 255, 255, 0.1);
+            }
+            :host([variant="outline"]) button {
+                background: transparent;
+            }
+            
+            /* Loading state */
+            .loader {
+                display: none;
+                width: 16px;
+                height: 16px;
+                border: 2px solid transparent;
+                border-top-color: currentColor;
+                border-radius: 50%;
+                margin-right: 8px;
+                animation: spin 0.8s linear infinite;
+            }
+            :host([loading]) .loader {
+                display: inline-block;
+            }
+            :host([loading]) button {
+                pointer-events: none;
+            }
+            
+            .content {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+            
+            @keyframes spin {
+                to { transform: rotate(360deg); }
+            }
+        `);
+        const btn = this.root.querySelector("button");
+        // Spring press animation
+        btn.addEventListener("mousedown", () => {
+            springAnimate(1, 0.95, v => btn.style.transform = `scale(${v})`, bouncySpring);
+        });
+        btn.addEventListener("mouseup", () => {
+            springAnimate(0.95, 1, v => btn.style.transform = `scale(${v})`, bouncySpring);
+        });
+        btn.addEventListener("mouseleave", () => {
+            var _a, _b;
+            springAnimate(parseFloat(((_b = (_a = btn.style.transform) === null || _a === void 0 ? void 0 : _a.match(/scale\(([\d.]+)\)/)) === null || _b === void 0 ? void 0 : _b[1]) || "1"), 1, v => btn.style.transform = `scale(${v})`, bouncySpring);
+        });
+        // Ripple effect
+        btn.addEventListener("click", (e) => {
+            if (!this.hasAttribute("disabled")) {
+                createRipple(e, btn);
+            }
+        });
+    }
+    attributeChangedCallback(name, _old, value) {
+        const btn = this.root.querySelector("button");
+        if (btn && name === "disabled") {
+            btn.disabled = value !== null;
+        }
+    }
+}
+customElements.define("glass-button", GlassButton);

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

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

package/dist/components/glass-card.js

@@ -0,0 +1,102 @@
+import { BaseElement } from "../core/base-element.js";
+import { springAnimateMulti, gentleSpring } from "../core/spring-engine.js";
+export class GlassCard extends BaseElement {
+    static get observedAttributes() {
+        return ["no-tilt", "glow"];
+    }
+    connectedCallback() {
+        this.mount(`
+            <div class="card-glow"></div>
+            <div class="card-content">
+                <slot></slot>
+            </div>
+        `, `
+            :host {
+                display: block;
+                position: relative;
+                transform-style: preserve-3d;
+                perspective: 1000px;
+            }
+            .card-content {
+                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: var(--lg-shadow);
+                padding: 1.5rem;
+                transition: transform 0.1s ease-out, box-shadow 0.3s ease;
+                overflow: hidden;
+            }
+            .card-content::before {
+                content: "";
+                position: absolute;
+                top: 0;
+                left: 0;
+                right: 0;
+                height: 1px;
+                background: linear-gradient(90deg, 
+                    transparent, 
+                    rgba(255, 255, 255, 0.5), 
+                    transparent
+                );
+            }
+            :host(:hover) .card-content {
+                box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
+            }
+            .card-glow {
+                position: absolute;
+                inset: -4px;
+                background: var(--lg-accent);
+                filter: blur(20px);
+                opacity: 0;
+                z-index: -1;
+                border-radius: var(--lg-radius);
+                transition: opacity 0.4s ease;
+            }
+            :host([glow]:hover) .card-glow {
+                opacity: 0.4;
+            }
+        `);
+        if (!this.hasAttribute("no-tilt")) {
+            this.setupTiltEffect();
+        }
+    }
+    setupTiltEffect() {
+        const card = this.root.querySelector(".card-content");
+        let targetRotateX = 0;
+        let targetRotateY = 0;
+        let currentRotateX = 0;
+        let currentRotateY = 0;
+        const handleMove = (e) => {
+            const rect = this.getBoundingClientRect();
+            const centerX = rect.left + rect.width / 2;
+            const centerY = rect.top + rect.height / 2;
+            targetRotateX = ((e.clientY - centerY) / (rect.height / 2)) * -8;
+            targetRotateY = ((e.clientX - centerX) / (rect.width / 2)) * 8;
+        };
+        const handleLeave = () => {
+            this.cancelTilt = springAnimateMulti([currentRotateX, currentRotateY], [0, 0], ([rx, ry]) => {
+                currentRotateX = rx;
+                currentRotateY = ry;
+                card.style.transform = `rotateX(${rx}deg) rotateY(${ry}deg)`;
+            }, gentleSpring);
+        };
+        // Smooth animation loop for tilt
+        const animate = () => {
+            currentRotateX += (targetRotateX - currentRotateX) * 0.1;
+            currentRotateY += (targetRotateY - currentRotateY) * 0.1;
+            card.style.transform = `rotateX(${currentRotateX}deg) rotateY(${currentRotateY}deg)`;
+            requestAnimationFrame(animate);
+        };
+        this.addEventListener("mousemove", handleMove);
+        this.addEventListener("mouseleave", handleLeave);
+        animate();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.cancelTilt) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
+}
+customElements.define("glass-card", GlassCard);

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

@@ -0,0 +1,12 @@
+import { BaseElement } from "../core/base-element.js";
+export declare class GlassDropdown extends BaseElement {
+    private isOpen;
+    private menuEl?;
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    private toggle;
+    open(): void;
+    close(): void;
+    private selectOption;
+    private focusNextOption;
+}

package/dist/components/glass-dropdown.js

@@ -0,0 +1,182 @@
+import { BaseElement } from "../core/base-element.js";
+import { motion } from "../core/motion.js";
+export class GlassDropdown extends BaseElement {
+    constructor() {
+        super(...arguments);
+        this.isOpen = false;
+    }
+    static get observedAttributes() {
+        return ["open", "disabled"];
+    }
+    connectedCallback() {
+        this.mount(`
+            <div class="dropdown">
+                <button class="trigger" aria-haspopup="listbox" aria-expanded="false">
+                    <span class="label"><slot name="trigger">Select</slot></span>
+                    <svg class="chevron" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M6 9l6 6 6-6"/>
+                    </svg>
+                </button>
+                <div class="menu" role="listbox">
+                    <slot></slot>
+                </div>
+            </div>
+        `, `
+            :host {
+                display: inline-block;
+                position: relative;
+            }
+            .dropdown {
+                position: relative;
+            }
+            .trigger {
+                display: flex;
+                align-items: center;
+                gap: 0.5rem;
+                padding: 0.75rem 1rem;
+                min-width: 180px;
+                background: var(--lg-bg);
+                backdrop-filter: blur(var(--lg-blur));
+                border: 1px solid var(--lg-border);
+                border-radius: var(--lg-radius);
+                color: inherit;
+                font: inherit;
+                cursor: pointer;
+                transition: all 0.2s ease;
+            }
+            .trigger:hover {
+                border-color: var(--lg-border-hover);
+            }
+            .trigger:focus-visible {
+                outline: 2px solid var(--lg-accent-focus);
+                outline-offset: 2px;
+            }
+            :host([disabled]) .trigger {
+                opacity: 0.5;
+                cursor: not-allowed;
+            }
+            .label {
+                flex: 1;
+                text-align: left;
+            }
+            .chevron {
+                transition: transform 0.2s ease;
+            }
+            :host([open]) .chevron {
+                transform: rotate(180deg);
+            }
+            .menu {
+                position: absolute;
+                top: calc(100% + 8px);
+                left: 0;
+                right: 0;
+                background: var(--lg-bg);
+                backdrop-filter: blur(var(--lg-blur));
+                border: 1px solid var(--lg-border);
+                border-radius: var(--lg-radius);
+                box-shadow: var(--lg-shadow);
+                padding: 0.5rem;
+                display: none;
+                flex-direction: column;
+                gap: 0.25rem;
+                z-index: 1000;
+                max-height: 300px;
+                overflow-y: auto;
+            }
+            :host([open]) .menu {
+                display: flex;
+            }
+            ::slotted(button),
+            ::slotted([role="option"]) {
+                display: block;
+                width: 100%;
+                padding: 0.6rem 0.75rem;
+                background: transparent;
+                border: none;
+                border-radius: calc(var(--lg-radius) - 8px);
+                color: inherit;
+                font: inherit;
+                text-align: left;
+                cursor: pointer;
+                transition: background 0.15s ease;
+            }
+            ::slotted(button:hover),
+            ::slotted([role="option"]:hover) {
+                background: rgba(255, 255, 255, 0.1);
+            }
+            ::slotted([aria-selected="true"]) {
+                background: rgba(255, 255, 255, 0.15);
+            }
+        `);
+        const trigger = this.root.querySelector(".trigger");
+        this.menuEl = this.root.querySelector(".menu");
+        trigger.addEventListener("click", () => {
+            if (!this.hasAttribute("disabled")) {
+                this.toggle();
+            }
+        });
+        // Close on outside click
+        document.addEventListener("click", (e) => {
+            if (!this.contains(e.target) && this.isOpen) {
+                this.close();
+            }
+        });
+        // Handle option selection
+        this.addEventListener("click", (e) => {
+            const target = e.target;
+            if (target.matches("[role='option'], button:not(.trigger)")) {
+                this.selectOption(target);
+            }
+        });
+        // Keyboard navigation
+        this.addEventListener("keydown", (e) => {
+            if (e.key === "Escape")
+                this.close();
+            if (e.key === "ArrowDown" && this.isOpen) {
+                e.preventDefault();
+                this.focusNextOption(1);
+            }
+            if (e.key === "ArrowUp" && this.isOpen) {
+                e.preventDefault();
+                this.focusNextOption(-1);
+            }
+        });
+    }
+    toggle() {
+        this.isOpen ? this.close() : this.open();
+    }
+    open() {
+        var _a;
+        this.isOpen = true;
+        this.setAttribute("open", "");
+        (_a = this.root.querySelector(".trigger")) === null || _a === void 0 ? void 0 : _a.setAttribute("aria-expanded", "true");
+        if (this.menuEl)
+            motion.scaleIn(this.menuEl, 150);
+    }
+    close() {
+        var _a;
+        this.isOpen = false;
+        this.removeAttribute("open");
+        (_a = this.root.querySelector(".trigger")) === null || _a === void 0 ? void 0 : _a.setAttribute("aria-expanded", "false");
+    }
+    selectOption(option) {
+        // Update selection
+        this.querySelectorAll("[role='option']").forEach(opt => opt.setAttribute("aria-selected", "false"));
+        option.setAttribute("aria-selected", "true");
+        // Update trigger label
+        const label = this.root.querySelector(".label slot");
+        const triggerContent = option.textContent || "";
+        this.dispatchEvent(new CustomEvent("change", {
+            detail: { value: option.dataset.value || triggerContent, label: triggerContent },
+            bubbles: true
+        }));
+        this.close();
+    }
+    focusNextOption(direction) {
+        const options = Array.from(this.querySelectorAll("[role='option'], button"));
+        const current = options.findIndex(opt => opt === document.activeElement);
+        const next = options[current + direction];
+        next === null || next === void 0 ? void 0 : next.focus();
+    }
+}
+customElements.define("glass-dropdown", GlassDropdown);

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

@@ -0,0 +1,8 @@
+import { BaseElement } from "../core/base-element.js";
+export declare class GlassInput extends BaseElement {
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    get value(): string;
+    set value(val: string);
+    attributeChangedCallback(name: string, _old: string, value: string): void;
+}

package/dist/components/glass-input.js

@@ -0,0 +1,151 @@
+import { BaseElement } from "../core/base-element.js";
+export class GlassInput extends BaseElement {
+    static get observedAttributes() {
+        return ["placeholder", "type", "value", "disabled", "error"];
+    }
+    connectedCallback() {
+        const placeholder = this.getAttribute("placeholder") || "";
+        const type = this.getAttribute("type") || "text";
+        const value = this.getAttribute("value") || "";
+        this.mount(`
+            <div class="input-wrapper">
+                <input type="${type}" placeholder="${placeholder}" value="${value}" />
+                <span class="focus-ring"></span>
+                <span class="error-icon">!</span>
+            </div>
+            <span class="error-message"><slot name="error"></slot></span>
+        `, `
+            :host {
+                display: block;
+            }
+            .input-wrapper {
+                position: relative;
+            }
+            input {
+                width: 100%;
+                padding: 0.875rem 1rem;
+                border-radius: var(--lg-radius);
+                background: var(--lg-bg);
+                backdrop-filter: blur(var(--lg-blur));
+                -webkit-backdrop-filter: blur(var(--lg-blur));
+                border: 1px solid var(--lg-border);
+                color: inherit;
+                font: inherit;
+                outline: none;
+                transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+                box-sizing: border-box;
+            }
+            input::placeholder {
+                color: rgba(255, 255, 255, 0.4);
+            }
+            input:hover {
+                border-color: rgba(255, 255, 255, 0.4);
+            }
+            input:focus {
+                border-color: var(--lg-accent-focus, #5ac8fa);
+                box-shadow: 0 0 0 3px rgba(90, 200, 250, 0.2);
+            }
+            input:disabled {
+                opacity: 0.5;
+                cursor: not-allowed;
+            }
+            
+            /* Focus ring animation */
+            .focus-ring {
+                position: absolute;
+                inset: -2px;
+                border-radius: calc(var(--lg-radius) + 2px);
+                border: 2px solid var(--lg-accent-focus, #5ac8fa);
+                opacity: 0;
+                transform: scale(0.98);
+                transition: all 0.2s ease;
+                pointer-events: none;
+            }
+            input:focus ~ .focus-ring {
+                opacity: 1;
+                transform: scale(1);
+            }
+            
+            /* Error state */
+            :host([error]) input {
+                border-color: #ff453a;
+            }
+            :host([error]) input:focus {
+                box-shadow: 0 0 0 3px rgba(255, 69, 58, 0.2);
+            }
+            .error-icon {
+                position: absolute;
+                right: 12px;
+                top: 50%;
+                transform: translateY(-50%);
+                width: 20px;
+                height: 20px;
+                background: #ff453a;
+                border-radius: 50%;
+                color: white;
+                font-size: 14px;
+                font-weight: bold;
+                display: none;
+                align-items: center;
+                justify-content: center;
+            }
+            :host([error]) .error-icon {
+                display: flex;
+            }
+            .error-message {
+                display: block;
+                color: #ff453a;
+                font-size: 0.85em;
+                margin-top: 0.5rem;
+                opacity: 0;
+                transform: translateY(-5px);
+                transition: all 0.2s ease;
+            }
+            :host([error]) .error-message {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        `);
+        // Sync input events to host
+        const input = this.root.querySelector("input");
+        input.addEventListener("input", () => {
+            this.dispatchEvent(new CustomEvent("input", {
+                detail: { value: input.value },
+                bubbles: true
+            }));
+        });
+        input.addEventListener("change", () => {
+            this.dispatchEvent(new CustomEvent("change", {
+                detail: { value: input.value },
+                bubbles: true
+            }));
+        });
+    }
+    get value() {
+        var _a;
+        return ((_a = this.root.querySelector("input")) === null || _a === void 0 ? void 0 : _a.value) || "";
+    }
+    set value(val) {
+        const input = this.root.querySelector("input");
+        if (input)
+            input.value = val;
+    }
+    attributeChangedCallback(name, _old, value) {
+        const input = this.root.querySelector("input");
+        if (!input)
+            return;
+        if (name === "disabled") {
+            input.disabled = value !== null;
+        }
+        else if (name === "placeholder") {
+            input.placeholder = value || "";
+        }
+        else if (name === "value") {
+            input.value = value || "";
+        }
+        else if (name === "type") {
+            input.type = value || "text";
+        }
+    }
+}
+customElements.define("glass-input", GlassInput);

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

@@ -0,0 +1,11 @@
+import { BaseElement } from "../core/base-element.js";
+export declare class GlassModal extends BaseElement {
+    private release?;
+    private panel?;
+    private backdrop?;
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    open(): void;
+    close(): void;
+}