liqgui 0.1.0 → 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 bymehul
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/components/glass-button.js

@@ -1,6 +1,6 @@
 import { BaseElement } from "../core/base-element.js";
 import { glowCSS, createRipple } from "../core/glow.js";
-import { springAnimate, bouncySpring } from "../core/spring-engine.js";
+import { springAnimate, snappySpring } from "../core/spring-engine.js";
 export class GlassButton extends BaseElement {
     static get observedAttributes() {
         return ["variant", "disabled", "loading"];
@@ -33,13 +33,14 @@ export class GlassButton extends BaseElement {
                 cursor: pointer;
                 overflow: hidden;
                 transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+                will-change: transform; 
             }
             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: 2px solid var(--lg-accent-focus);
                 outline-offset: 2px;
             }
             button:disabled {
@@ -98,14 +99,14 @@ export class GlassButton extends BaseElement {
         const btn = this.root.querySelector("button");
         // Spring press animation
         btn.addEventListener("mousedown", () => {
-            springAnimate(1, 0.95, v => btn.style.transform = `scale(${v})`, bouncySpring);
+            springAnimate(1, 0.96, v => btn.style.transform = `scale(${v})`, snappySpring);
         });
         btn.addEventListener("mouseup", () => {
-            springAnimate(0.95, 1, v => btn.style.transform = `scale(${v})`, bouncySpring);
+            springAnimate(0.96, 1, v => btn.style.transform = `scale(${v})`, snappySpring);
         });
         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);
+            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})`, snappySpring);
         });
         // Ripple effect
         btn.addEventListener("click", (e) => {

package/dist/components/glass-modal.js

@@ -34,6 +34,7 @@ export class GlassModal extends BaseElement {
                 background: rgba(0, 0, 0, 0.6);
                 backdrop-filter: blur(4px);
                 -webkit-backdrop-filter: blur(4px);
+                will-change: opacity;
             }
             .panel {
                 position: relative;
@@ -44,7 +45,8 @@ export class GlassModal extends BaseElement {
                 border: 1px solid var(--lg-border);
                 box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
                 padding: 2rem;
-                min-width: 320px;
+                width: min(100% - 2rem, 500px);
+                min-width: min(320px, 90vw);
                 max-width: 90vw;
                 max-height: 85vh;
                 overflow: auto;

package/dist/components/glass-tabs.js

@@ -29,10 +29,14 @@ export class GlassTabs extends BaseElement {
                 position: absolute;
                 top: 0.25rem;
                 bottom: 0.25rem;
+                left: 0;
+                width: 1px; /* Base width for scaling */
                 background: rgba(255, 255, 255, 0.15);
                 border-radius: calc(var(--lg-radius) - 4px);
                 transition: none;
                 pointer-events: none;
+                transform-origin: 0 0;
+                will-change: transform;
             }
             ::slotted(button) {
                 position: relative;
@@ -50,6 +54,10 @@ export class GlassTabs extends BaseElement {
             ::slotted(button:hover) {
                 opacity: 1;
             }
+            ::slotted(button:focus-visible) {
+                 outline: none;
+                 background: rgba(255, 255, 255, 0.1);
+            }
             ::slotted(button[aria-selected="true"]) {
                 opacity: 1;
             }
@@ -76,21 +84,33 @@ export class GlassTabs extends BaseElement {
         // Animate indicator
         const rect = tab.getBoundingClientRect();
         const containerRect = this.getBoundingClientRect();
-        const left = rect.left - containerRect.left - 4; // Subtract padding
+        const relativeLeft = rect.left - containerRect.left;
         const width = rect.width;
+        // We want to animate from current transform to new transform
+        // New transform: translate(relativeLeft px) scaleX(width)
+        // Note: The indicator has base width 1px, so scaleX = target 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`;
+            // Get current transform values
+            const style = window.getComputedStyle(this.indicator);
+            const matrix = new DOMMatrix(style.transform);
+            const currentX = matrix.e;
+            const currentScale = matrix.a;
+            springAnimate(currentX, relativeLeft, v => {
+                const currentWidth = parseFloat(this.indicator.getAttribute('data-width') || '0');
+                // We need to synchronize the two animations, but springAnimate runs independently.
+                // A better approach for concurrent related springs is needed, 
+                // but for now we'll rely on the fact that both use the same physics config.
+                this.indicator.style.transform = `translateX(${v}px) scaleX(${currentWidth})`;
             }, snappySpring);
-            springAnimate(currentWidth, width, v => {
-                this.indicator.style.width = `${v}px`;
+            springAnimate(currentScale, width, v => {
+                const currentPos = new DOMMatrix(getComputedStyle(this.indicator).transform).e;
+                this.indicator.setAttribute('data-width', v.toString());
+                this.indicator.style.transform = `translateX(${currentPos}px) scaleX(${v})`;
             }, snappySpring);
         }
         else if (this.indicator) {
-            this.indicator.style.left = `${left}px`;
-            this.indicator.style.width = `${width}px`;
+            this.indicator.setAttribute('data-width', width.toString());
+            this.indicator.style.transform = `translateX(${relativeLeft}px) scaleX(${width})`;
         }
         // Dispatch event
         this.dispatchEvent(new CustomEvent("change", {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "liqgui",
-    "version": "0.1.0",
+    "version": "0.1.1",
     "description": "Premium glassmorphism component library with spring physics animations",
     "type": "module",
     "main": "./dist/index.js",

package/src/styles/tokens.css

@@ -33,7 +33,8 @@ CSS
 
   /* Default accent */
   --lg-accent: var(--lg-accent-blue);
-  --lg-accent-focus: #5ac8fa;
+  --lg-accent-focus: rgba(90, 200, 250, 0.5);
+  --lg-focus-ring: 0 0 0 4px var(--lg-accent-focus);
 
   /* Typography */
   --lg-font: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif;