liqgui 0.1.0

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

@@ -0,0 +1,8 @@
+import { BaseElement } from "../core/base-element.js";
+export declare class GlassToast extends BaseElement {
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    private getIcon;
+    private dismiss;
+    static show(message: string, variant?: "success" | "error" | "warning" | "info"): HTMLElement;
+}

package/dist/components/glass-toast.js

@@ -0,0 +1,128 @@
+import { BaseElement } from "../core/base-element.js";
+import { motion } from "../core/motion.js";
+export class GlassToast extends BaseElement {
+    static get observedAttributes() {
+        return ["variant", "duration"];
+    }
+    connectedCallback() {
+        var _a;
+        const variant = this.getAttribute("variant") || "info";
+        const duration = parseInt(this.getAttribute("duration") || "4000");
+        this.mount(`
+            <div class="toast ${variant}">
+                <span class="icon">${this.getIcon(variant)}</span>
+                <div class="content">
+                    <slot></slot>
+                </div>
+                <button class="close" aria-label="Dismiss">×</button>
+                <div class="progress"></div>
+            </div>
+        `, `
+            :host {
+                position: fixed;
+                bottom: 1.5rem;
+                right: 1.5rem;
+                z-index: 10000;
+            }
+            .toast {
+                display: flex;
+                align-items: center;
+                gap: 0.75rem;
+                padding: 1rem 1.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);
+                box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
+                min-width: 280px;
+                max-width: 400px;
+                overflow: hidden;
+            }
+            .icon {
+                font-size: 1.25rem;
+                flex-shrink: 0;
+            }
+            .content {
+                flex: 1;
+                line-height: 1.4;
+            }
+            .close {
+                background: none;
+                border: none;
+                color: inherit;
+                font-size: 1.5rem;
+                cursor: pointer;
+                opacity: 0.5;
+                padding: 0;
+                line-height: 1;
+                transition: opacity 0.2s;
+            }
+            .close:hover {
+                opacity: 1;
+            }
+            .progress {
+                position: absolute;
+                bottom: 0;
+                left: 0;
+                height: 3px;
+                background: var(--accent-color, rgba(255, 255, 255, 0.5));
+                animation: progress ${duration}ms linear forwards;
+            }
+            
+            /* Variants */
+            .toast.success { --accent-color: #30d158; }
+            .toast.success .icon { color: #30d158; }
+            
+            .toast.error { --accent-color: #ff453a; }
+            .toast.error .icon { color: #ff453a; }
+            
+            .toast.warning { --accent-color: #ffd60a; }
+            .toast.warning .icon { color: #ffd60a; }
+            
+            .toast.info { --accent-color: #5ac8fa; }
+            .toast.info .icon { color: #5ac8fa; }
+            
+            @keyframes progress {
+                from { width: 100%; }
+                to { width: 0%; }
+            }
+        `);
+        // Animate in
+        const toast = this.root.querySelector(".toast");
+        motion.slideInUp(toast, 300);
+        // Close button
+        (_a = this.root.querySelector(".close")) === null || _a === void 0 ? void 0 : _a.addEventListener("click", () => this.dismiss());
+        // Auto dismiss
+        if (duration > 0) {
+            setTimeout(() => this.dismiss(), duration);
+        }
+    }
+    getIcon(variant) {
+        const icons = {
+            success: "✓",
+            error: "✕",
+            warning: "⚠",
+            info: "ℹ"
+        };
+        return icons[variant] || icons.info;
+    }
+    dismiss() {
+        const toast = this.root.querySelector(".toast");
+        if (toast) {
+            motion.slideOutDown(toast, 200).finished.then(() => this.remove());
+        }
+        else {
+            this.remove();
+        }
+    }
+    // Static helper for creating toasts
+    static show(message, variant = "info") {
+        const toast = document.createElement("glass-toast");
+        toast.setAttribute("variant", variant);
+        toast.textContent = message;
+        document.body.appendChild(toast);
+        return toast;
+    }
+}
+customElements.define("glass-toast", GlassToast);

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

@@ -0,0 +1,9 @@
+import { BaseElement } from "../core/base-element.js";
+export declare class GlassToggle extends BaseElement {
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    private updateThumb;
+    attributeChangedCallback(name: string): void;
+    get checked(): boolean;
+    set checked(value: boolean);
+}

package/dist/components/glass-toggle.js

@@ -0,0 +1,112 @@
+import { BaseElement } from "../core/base-element.js";
+import { springAnimate, bouncySpring } from "../core/spring-engine.js";
+export class GlassToggle extends BaseElement {
+    static get observedAttributes() {
+        return ["checked", "disabled"];
+    }
+    connectedCallback() {
+        this.mount(`
+            <button role="switch" aria-checked="false">
+                <span class="track">
+                    <span class="thumb"></span>
+                </span>
+                <span class="label"><slot></slot></span>
+            </button>
+        `, `
+            :host {
+                display: inline-block;
+            }
+            button {
+                display: flex;
+                align-items: center;
+                gap: 0.75rem;
+                background: none;
+                border: none;
+                color: inherit;
+                font: inherit;
+                cursor: pointer;
+                padding: 0;
+            }
+            button:focus-visible .track {
+                outline: 2px solid var(--lg-accent-focus, #5ac8fa);
+                outline-offset: 2px;
+            }
+            button:disabled {
+                opacity: 0.5;
+                cursor: not-allowed;
+            }
+            .track {
+                position: relative;
+                width: 52px;
+                height: 32px;
+                background: rgba(255, 255, 255, 0.15);
+                border-radius: 999px;
+                border: 1px solid var(--lg-border);
+                transition: background 0.3s ease;
+            }
+            .thumb {
+                position: absolute;
+                top: 3px;
+                left: 3px;
+                width: 24px;
+                height: 24px;
+                background: white;
+                border-radius: 50%;
+                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+            }
+            :host([checked]) .track {
+                background: var(--lg-accent);
+            }
+            .label {
+                user-select: none;
+            }
+        `);
+        const button = this.root.querySelector("button");
+        const thumb = this.root.querySelector(".thumb");
+        button.addEventListener("click", () => {
+            if (this.hasAttribute("disabled"))
+                return;
+            this.toggleAttribute("checked");
+        });
+        // Spring animation for thumb
+        this.updateThumb(thumb, false);
+    }
+    updateThumb(thumb, animate = true) {
+        const checked = this.hasAttribute("checked");
+        const target = checked ? 21 : 3;
+        if (animate) {
+            const current = parseFloat(thumb.style.left) || 3;
+            springAnimate(current, target, v => {
+                thumb.style.left = `${v}px`;
+            }, bouncySpring);
+        }
+        else {
+            thumb.style.left = `${target}px`;
+        }
+        const button = this.root.querySelector("button");
+        button === null || button === void 0 ? void 0 : button.setAttribute("aria-checked", String(checked));
+    }
+    attributeChangedCallback(name) {
+        if (name === "checked") {
+            const thumb = this.root.querySelector(".thumb");
+            if (thumb)
+                this.updateThumb(thumb);
+            this.dispatchEvent(new CustomEvent("change", {
+                detail: { checked: this.hasAttribute("checked") },
+                bubbles: true
+            }));
+        }
+        if (name === "disabled") {
+            const button = this.root.querySelector("button");
+            if (button)
+                button.disabled = this.hasAttribute("disabled");
+        }
+    }
+    get checked() {
+        return this.hasAttribute("checked");
+    }
+    set checked(value) {
+        this.toggleAttribute("checked", value);
+    }
+}
+customElements.define("glass-toggle", GlassToggle);

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

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

package/dist/components/glass-tooltip.js

@@ -0,0 +1,214 @@
+import { BaseElement } from "../core/base-element.js";
+export class GlassTooltip extends BaseElement {
+    static get observedAttributes() {
+        return ["position", "delay"];
+    }
+    connectedCallback() {
+        const position = this.getAttribute("position") || "top";
+        this.mount(`
+            <div class="wrapper">
+                <slot></slot>
+                <div class="tooltip ${position}" role="tooltip">
+                    <slot name="content"></slot>
+                </div>
+            </div>
+        `, `
+            :host {
+                display: inline-block;
+                position: relative;
+            }
+            .wrapper {
+                position: relative;
+                display: inline-block;
+            }
+            .tooltip {
+                position: absolute;
+                padding: 0.5rem 0.75rem;
+                background: var(--lg-bg);
+                backdrop-filter: blur(var(--lg-blur));
+                border: 1px solid var(--lg-border);
+                border-radius: calc(var(--lg-radius) / 2);
+                box-shadow: var(--lg-shadow-sm);
+                font-size: 0.875rem;
+                white-space: nowrap;
+                opacity: 0;
+                visibility: hidden;
+                transform: scale(0.9);
+                transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
+                z-index: 10000;
+                pointer-events: none;
+            }
+            .wrapper:hover .tooltip,
+            .wrapper:focus-within .tooltip {
+                opacity: 1;
+                visibility: visible;
+                transform: scale(1);
+            }
+            
+            /* Positions */
+            .tooltip.top {
+                bottom: calc(100% + 8px);
+                left: 50%;
+                transform-origin: bottom center;
+            }
+            .wrapper:hover .tooltip.top,
+            .wrapper:focus-within .tooltip.top {
+                transform: translateX(-50%) scale(1);
+            }
+            .tooltip.top:not(:hover) {
+                transform: translateX(-50%) scale(0.9);
+            }
+            
+            .tooltip.bottom {
+                top: calc(100% + 8px);
+                left: 50%;
+                transform-origin: top center;
+            }
+            .wrapper:hover .tooltip.bottom,
+            .wrapper:focus-within .tooltip.bottom {
+                transform: translateX(-50%) scale(1);
+            }
+            .tooltip.bottom:not(:hover) {
+                transform: translateX(-50%) scale(0.9);
+            }
+            
+            .tooltip.left {
+                right: calc(100% + 8px);
+                top: 50%;
+                transform-origin: right center;
+            }
+            .wrapper:hover .tooltip.left,
+            .wrapper:focus-within .tooltip.left {
+                transform: translateY(-50%) scale(1);
+            }
+            .tooltip.left:not(:hover) {
+                transform: translateY(-50%) scale(0.9);
+            }
+            
+            .tooltip.right {
+                left: calc(100% + 8px);
+                top: 50%;
+                transform-origin: left center;
+            }
+            .wrapper:hover .tooltip.right,
+            .wrapper:focus-within .tooltip.right {
+                transform: translateY(-50%) scale(1);
+            }
+            .tooltip.right:not(:hover) {
+                transform: translateY(-50%) scale(0.9);
+            }
+        `);
+    }
+}
+customElements.define("glass-tooltip", GlassTooltip);
+// Popover with click trigger
+export class GlassPopover extends BaseElement {
+    constructor() {
+        super(...arguments);
+        this.isOpen = false;
+    }
+    static get observedAttributes() {
+        return ["position", "open"];
+    }
+    connectedCallback() {
+        var _a;
+        const position = this.getAttribute("position") || "bottom";
+        this.mount(`
+            <div class="wrapper">
+                <div class="trigger">
+                    <slot name="trigger"></slot>
+                </div>
+                <div class="popover ${position}" role="dialog">
+                    <slot></slot>
+                </div>
+            </div>
+        `, `
+            :host {
+                display: inline-block;
+                position: relative;
+            }
+            .wrapper {
+                position: relative;
+            }
+            .trigger {
+                cursor: pointer;
+            }
+            .popover {
+                position: absolute;
+                min-width: 200px;
+                padding: 1rem;
+                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);
+                opacity: 0;
+                visibility: hidden;
+                transform: scale(0.95);
+                transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+                z-index: 10000;
+            }
+            :host([open]) .popover {
+                opacity: 1;
+                visibility: visible;
+                transform: scale(1);
+            }
+            
+            .popover.top {
+                bottom: calc(100% + 8px);
+                left: 50%;
+                transform-origin: bottom center;
+            }
+            :host([open]) .popover.top { transform: translateX(-50%) scale(1); }
+            .popover.top { transform: translateX(-50%) scale(0.95); }
+            
+            .popover.bottom {
+                top: calc(100% + 8px);
+                left: 50%;
+                transform-origin: top center;
+            }
+            :host([open]) .popover.bottom { transform: translateX(-50%) scale(1); }
+            .popover.bottom { transform: translateX(-50%) scale(0.95); }
+            
+            .popover.left {
+                right: calc(100% + 8px);
+                top: 50%;
+                transform-origin: right center;
+            }
+            :host([open]) .popover.left { transform: translateY(-50%) scale(1); }
+            .popover.left { transform: translateY(-50%) scale(0.95); }
+            
+            .popover.right {
+                left: calc(100% + 8px);
+                top: 50%;
+                transform-origin: left center;
+            }
+            :host([open]) .popover.right { transform: translateY(-50%) scale(1); }
+            .popover.right { transform: translateY(-50%) scale(0.95); }
+        `);
+        (_a = this.root.querySelector(".trigger")) === null || _a === void 0 ? void 0 : _a.addEventListener("click", () => this.toggle());
+        // Close on outside click
+        document.addEventListener("click", (e) => {
+            if (!this.contains(e.target) && this.isOpen) {
+                this.close();
+            }
+        });
+        // Close on Escape
+        this.addEventListener("keydown", (e) => {
+            if (e.key === "Escape")
+                this.close();
+        });
+    }
+    toggle() {
+        this.isOpen ? this.close() : this.open();
+    }
+    open() {
+        this.isOpen = true;
+        this.setAttribute("open", "");
+    }
+    close() {
+        this.isOpen = false;
+        this.removeAttribute("open");
+    }
+}
+customElements.define("glass-popover", GlassPopover);

package/dist/core/base-element.d.ts

@@ -0,0 +1,4 @@
+export declare abstract class BaseElement extends HTMLElement {
+    protected root: ShadowRoot;
+    protected mount(html: string, css: string): void;
+}

package/dist/core/base-element.js

@@ -0,0 +1,9 @@
+export class BaseElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.root = this.attachShadow({ mode: "open" });
+    }
+    mount(html, css) {
+        this.root.innerHTML = `<style>${css}</style>${html}`;
+    }
+}

package/dist/core/curves.d.ts

@@ -0,0 +1,22 @@
+export declare const liquidCurves: {
+    standard: string;
+    emphasized: string;
+    decelerate: string;
+    accelerate: string;
+    glassIn: string;
+    glassOut: string;
+    glassInOut: string;
+    elasticOut: string;
+    bounceOut: string;
+    smooth: string;
+    smoothIn: string;
+    smoothOut: string;
+};
+export declare const durations: {
+    instant: number;
+    fast: number;
+    normal: number;
+    slow: number;
+    reveal: number;
+};
+export declare function createTransition(properties: string | string[], duration?: number, curve?: string): string;

package/dist/core/curves.js

@@ -0,0 +1,32 @@
+// Easing curves
+export const liquidCurves = {
+    // Standard curves
+    standard: "cubic-bezier(0.4, 0, 0.2, 1)",
+    emphasized: "cubic-bezier(0.2, 0, 0, 1)",
+    decelerate: "cubic-bezier(0, 0, 0.2, 1)",
+    accelerate: "cubic-bezier(0.4, 0, 1, 1)",
+    // Glass curves
+    glassIn: "cubic-bezier(0.16, 1, 0.3, 1)",
+    glassOut: "cubic-bezier(0.7, 0, 0.84, 0)",
+    glassInOut: "cubic-bezier(0.87, 0, 0.13, 1)",
+    // Elastic curves
+    elasticOut: "cubic-bezier(0.34, 1.56, 0.64, 1)",
+    bounceOut: "cubic-bezier(0.34, 1.3, 0.64, 1)",
+    // Smooth
+    smooth: "cubic-bezier(0.25, 0.1, 0.25, 1)",
+    smoothIn: "cubic-bezier(0.42, 0, 1, 1)",
+    smoothOut: "cubic-bezier(0, 0, 0.58, 1)",
+};
+// Duration presets
+export const durations = {
+    instant: 100,
+    fast: 150,
+    normal: 250,
+    slow: 400,
+    reveal: 600,
+};
+// Helper to create transition strings
+export function createTransition(properties, duration = durations.normal, curve = liquidCurves.standard) {
+    const props = Array.isArray(properties) ? properties : [properties];
+    return props.map(p => `${p} ${duration}ms ${curve}`).join(", ");
+}

package/dist/core/focus-trap.d.ts

@@ -0,0 +1 @@
+export declare function trapFocus(el: HTMLElement): () => void;

package/dist/core/focus-trap.js

@@ -0,0 +1,19 @@
+export function trapFocus(el) {
+    const items = el.querySelectorAll("button,input,[tabindex]:not([tabindex='-1'])");
+    const first = items[0], last = items[items.length - 1];
+    function handler(e) {
+        if (e.key !== "Tab")
+            return;
+        if (e.shiftKey && document.activeElement === first) {
+            e.preventDefault();
+            last.focus();
+        }
+        else if (!e.shiftKey && document.activeElement === last) {
+            e.preventDefault();
+            first.focus();
+        }
+    }
+    el.addEventListener("keydown", handler);
+    first === null || first === void 0 ? void 0 : first.focus();
+    return () => el.removeEventListener("keydown", handler);
+}

package/dist/core/glow.d.ts

@@ -0,0 +1,3 @@
+export declare const glowCSS: (accent: string) => string;
+export declare function createRipple(event: MouseEvent, element: HTMLElement, color?: string): void;
+export declare function injectRippleStyles(): void;

package/dist/core/glow.js

@@ -0,0 +1,57 @@
+// Glow effect CSS
+export const glowCSS = (accent) => `
+  position: absolute;
+  inset: -2px;
+  background: ${accent};
+  filter: blur(12px);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  pointer-events: none;
+  z-index: -1;
+  border-radius: inherit;
+`;
+// Ripple effect
+export function createRipple(event, element, color = "rgba(255, 255, 255, 0.4)") {
+    const rect = element.getBoundingClientRect();
+    const size = Math.max(rect.width, rect.height) * 2;
+    const x = event.clientX - rect.left - size / 2;
+    const y = event.clientY - rect.top - size / 2;
+    const ripple = document.createElement("span");
+    ripple.style.cssText = `
+        position: absolute;
+        width: ${size}px;
+        height: ${size}px;
+        left: ${x}px;
+        top: ${y}px;
+        background: ${color};
+        border-radius: 50%;
+        transform: scale(0);
+        opacity: 1;
+        pointer-events: none;
+        animation: ripple-expand 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+    `;
+    element.style.position = "relative";
+    element.style.overflow = "hidden";
+    element.appendChild(ripple);
+    ripple.addEventListener("animationend", () => ripple.remove());
+}
+// Inject ripple keyframes
+export function injectRippleStyles() {
+    if (document.getElementById("lg-ripple-styles"))
+        return;
+    const style = document.createElement("style");
+    style.id = "lg-ripple-styles";
+    style.textContent = `
+        @keyframes ripple-expand {
+            to {
+                transform: scale(1);
+                opacity: 0;
+            }
+        }
+    `;
+    document.head.appendChild(style);
+}
+// Init on load
+if (typeof document !== "undefined") {
+    injectRippleStyles();
+}

package/dist/core/motion.d.ts

@@ -0,0 +1,12 @@
+export declare const motion: {
+    animate(element: HTMLElement, keyframes: Keyframe[], options: KeyframeAnimationOptions): Animation;
+    fadeIn(element: HTMLElement, duration?: number): Animation;
+    fadeOut(element: HTMLElement, duration?: number): Animation;
+    scaleIn(element: HTMLElement, duration?: number): Animation;
+    scaleOut(element: HTMLElement, duration?: number): Animation;
+    slideInUp(element: HTMLElement, duration?: number): Animation;
+    slideOutDown(element: HTMLElement, duration?: number): Animation;
+    blurIn(element: HTMLElement, duration?: number): Animation;
+    shimmer(element: HTMLElement): Animation;
+    pulseGlow(element: HTMLElement): Animation;
+};