@shohojdhara/atomix 0.6.2 → 0.6.4

package/dist/forms.js

@@ -47,12 +47,23 @@ import React, { memo, forwardRef, useId, useMemo, useState, useRef, useEffect, u
     },
     DEFAULTS: {
         DISPLACEMENT_SCALE: 70,
-        BLUR_AMOUNT: 0,
-        SATURATION: 140,
-        ABERRATION_INTENSITY: 2,
+        get BLUR_AMOUNT() {
+            return .15 * this.DISPLACEMENT_SCALE;
+ // Dynamically computed based on displacement
+                },
+        get SATURATION() {
+            return 100 + .5 * this.DISPLACEMENT_SCALE;
+ // Saturate relative to intensity
+                },
+        get ABERRATION_INTENSITY() {
+            return .03 * this.DISPLACEMENT_SCALE;
+ // Scale aberration with displacement
+                },
         ELASTICITY: .15,
-        CORNER_RADIUS: 20,
-        // Default border-radius matching design system
+        get CORNER_RADIUS() {
+            return 16;
+ // Use 16 to match SCSS design system (was 20)
+                },
         PADDING: "0",
         MODE: "standard",
         OVER_LIGHT: !1,
@@ -78,6 +89,11 @@ import React, { memo, forwardRef, useId, useMemo, useState, useRef, useEffect, u
         ELASTICITY_TRANSLATION_FACTOR: .1,
         ELASTICITY_DISTANCE_THRESHOLD: 200,
         ELASTICITY_COMPRESSION_FACTOR: .3,
+        ELASTICITY_STIFFNESS: .1,
+        ELASTICITY_DAMPING: .76,
+        ELASTICITY_VELOCITY_FACTOR: .65,
+        ELASTICITY_STRETCH_RATIO: .45,
+        ELASTICITY_MAGNIFICATION_BASE: 1.02,
         // Note: This default must match the SCSS variable --atomix-radius-md
         // @see src/styles/01-settings/_settings.global.scss
         DEFAULT_CORNER_RADIUS: 16,
@@ -94,84 +110,126 @@ import React, { memo, forwardRef, useId, useMemo, useState, useRef, useEffect, u
             // Base angle for border gradients (degrees)
             ANGLE_MULTIPLIER: 1.2,
             // Multiplier for mouse influence on angle
+            VELOCITY_ANGLE_MULTIPLIER: 2.5,
+            // How much velocity affects gradient rotation
+            CHROMATIC_OFFSET: 1.5,
+            // Degree offset for chromatic rim layers
             BORDER_STOP_1: {
                 MIN: 10,
                 // Minimum percentage for border stop 1
                 BASE: 33,
                 // Base percentage for border stop 1
-                MULTIPLIER: .3
+                get MULTIPLIER() {
+                    return .009 * this.BASE;
+                }
             },
             BORDER_STOP_2: {
                 MAX: 90,
                 // Maximum percentage for border stop 2
                 BASE: 66,
                 // Base percentage for border stop 2
-                MULTIPLIER: .4
+                get MULTIPLIER() {
+                    return .006 * this.BASE;
+                }
             },
             BORDER_OPACITY: {
                 BASE_1: .12,
                 // Base opacity for border gradient 1
-                BASE_2: .4,
+                get BASE_2() {
+                    return 3.33 * this.BASE_1;
+                },
                 // Base opacity for border gradient 2
-                BASE_3: .32,
+                get BASE_3() {
+                    return 2.66 * this.BASE_1;
+                },
                 // Base opacity for border gradient 3
-                BASE_4: .6,
+                get BASE_4() {
+                    return 5 * this.BASE_1;
+                },
                 // Base opacity for border gradient 4
-                MULTIPLIER_LOW: .008,
+                get MULTIPLIER_LOW() {
+                    return .066 * this.BASE_1;
+                },
                 // Low multiplier for mouse influence on opacity
-                MULTIPLIER_HIGH: .012
+                get MULTIPLIER_HIGH() {
+                    return .1 * this.BASE_1;
+                }
             },
             CENTER_POSITION: 50,
             // Center position percentage (50%)
             HOVER_POSITION: {
                 DIVISOR_1: 2,
                 // Divisor for hover 1 position calculation
-                DIVISOR_2: 1.5,
+                get DIVISOR_2() {
+                    return .75 * this.DIVISOR_1;
+                },
                 // Divisor for hover 2 position calculation
-                MULTIPLIER_3: 1
+                get MULTIPLIER_3() {
+                    return .5 * this.DIVISOR_1;
+                }
             },
-            BASE_LAYER_MULTIPLIER: .5
+            get BASE_LAYER_MULTIPLIER() {
+                return .5;
+            }
         },
         // Gradient opacity values for hover effects
         GRADIENT_OPACITY: {
             HOVER_1: {
                 BLACK_START: .3,
                 // Start opacity for black hover 1
-                BLACK_MID: .1,
+                get BLACK_MID() {
+                    return this.BLACK_START / 3;
+                },
                 // Mid opacity for black hover 1
                 BLACK_STOP: 30,
                 // Stop percentage for black hover 1
-                BLACK_END: 60,
+                get BLACK_END() {
+                    return 2 * this.BLACK_STOP;
+                },
                 // End percentage for black hover 1
                 WHITE_START: .5,
                 // Start opacity for white hover 1
-                WHITE_STOP: 50
+                get WHITE_STOP() {
+                    return this.BLACK_END - 10;
+                }
             },
             HOVER_2: {
                 BLACK_START: .4,
                 // Start opacity for black hover 2
-                BLACK_MID: .15,
+                get BLACK_MID() {
+                    return .375 * this.BLACK_START;
+                },
                 // Mid opacity for black hover 2
                 BLACK_STOP: 40,
                 // Stop percentage for black hover 2
-                BLACK_END: 80,
+                get BLACK_END() {
+                    return 2 * this.BLACK_STOP;
+                },
                 // End percentage for black hover 2
                 WHITE_START: 1,
                 // Start opacity for white hover 2
-                WHITE_STOP: 80
+                get WHITE_STOP() {
+                    return this.BLACK_END;
+                }
             },
             HOVER_3: {
                 BLACK_START: .5,
                 // Start opacity for black hover 3
-                BLACK_MID: .2,
+                get BLACK_MID() {
+                    return .4 * this.BLACK_START;
+                },
                 // Mid opacity for black hover 3
                 BLACK_STOP: 50,
                 // Stop percentage for black hover 3
-                BLACK_END: 100,
+                get BLACK_END() {
+                    return 2 * this.BLACK_STOP;
+                },
                 // End percentage for black hover 3
                 WHITE_START: 1,
                 // Start opacity for white hover 3
-                WHITE_STOP: 100
+                get WHITE_STOP() {
+                    return this.BLACK_END;
+                }
             }
         },
         // Base and overlay gradient constants
@@ -180,34 +238,54 @@ import React, { memo, forwardRef, useId, useMemo, useState, useRef, useEffect, u
             // Gradient angle in degrees
             BLACK_START_BASE: .15,
             // Base start opacity for black
-            BLACK_START_MULTIPLIER: .003,
+            get BLACK_START_MULTIPLIER() {
+                return .02 * this.BLACK_START_BASE;
+            },
             // Multiplier for mouse X influence on start
             BLACK_MID_BASE: .1,
             // Base mid opacity for black
-            BLACK_MID_MULTIPLIER: .002,
+            get BLACK_MID_MULTIPLIER() {
+                return .02 * this.BLACK_MID_BASE;
+            },
             // Multiplier for mouse Y influence on mid
             BLACK_MID_STOP: 50,
             // Mid stop percentage
-            BLACK_END_BASE: .18,
+            get BLACK_END_BASE() {
+                return 1.2 * this.BLACK_START_BASE;
+            },
             // Base end opacity for black
-            BLACK_END_MULTIPLIER: .004,
+            get BLACK_END_MULTIPLIER() {
+                return .022 * this.BLACK_END_BASE;
+            },
             // Multiplier for mouse X influence on end
-            WHITE_OPACITY: .1
+            get WHITE_OPACITY() {
+                return .666 * this.BLACK_START_BASE;
+            }
         },
         OVERLAY_GRADIENT: {
             BLACK_START_BASE: .12,
             // Base start opacity for black overlay
-            BLACK_START_MULTIPLIER: .003,
+            get BLACK_START_MULTIPLIER() {
+                return .025 * this.BLACK_START_BASE;
+            },
             // Multiplier for mouse X influence on start
-            BLACK_MID: .06,
+            get BLACK_MID() {
+                return .5 * this.BLACK_START_BASE;
+            },
             // Mid opacity for black overlay
             BLACK_MID_STOP: 40,
             // Mid stop percentage
-            BLACK_END_BASE: .15,
+            get BLACK_END_BASE() {
+                return 1.25 * this.BLACK_START_BASE;
+            },
             // Base end opacity for black overlay
-            BLACK_END_MULTIPLIER: .003,
+            get BLACK_END_MULTIPLIER() {
+                return .02 * this.BLACK_END_BASE;
+            },
             // Multiplier for mouse Y influence on end
-            WHITE_OPACITY: .05
+            get WHITE_OPACITY() {
+                return .416 * this.BLACK_START_BASE;
+            }
         },
         // Overlay highlight constants
         OVERLAY_HIGHLIGHT: {
@@ -217,9 +295,13 @@ import React, { memo, forwardRef, useId, useMemo, useState, useRef, useEffect, u
             // Y position percentage
             WHITE_OPACITY: .4,
             // White opacity in gradient
-            STOP: 60,
+            get STOP() {
+                return 150 * this.WHITE_OPACITY;
+            },
             // Stop percentage
-            OPACITY_MULTIPLIER: .7
+            get OPACITY_MULTIPLIER() {
+                return 1.75 * this.WHITE_OPACITY;
+            }
         },
         // Displacement and aberration multipliers
         MULTIPLIERS: {
@@ -272,11 +354,7 @@ import React, { memo, forwardRef, useId, useMemo, useState, useRef, useEffect, u
             }
         }
     }
-}, {CONSTANTS: CONSTANTS$2} = ATOMIX_GLASS, calculateDistance = (pos1, pos2) => {
-    if (!pos1 || !pos2 || "number" != typeof pos1.x || "number" != typeof pos1.y || "number" != typeof pos2.x || "number" != typeof pos2.y) return 0;
-    const deltaX = pos1.x - pos2.x, deltaY = pos1.y - pos2.y;
-    return Math.sqrt(deltaX * deltaX + deltaY * deltaY);
-}, calculateElementCenter = rect => rect ? {
+}, {CONSTANTS: CONSTANTS$2} = ATOMIX_GLASS, calculateElementCenter = rect => rect ? {
     x: rect.left + rect.width / 2,
     y: rect.top + rect.height / 2
 } : {
@@ -348,7 +426,16 @@ import React, { memo, forwardRef, useId, useMemo, useState, useRef, useEffect, u
         // Silently handle errors
     }
     return CONSTANTS$2.DEFAULT_CORNER_RADIUS;
-}, lerp$1 = (a, b, t) => a + (b - a) * t, softClamp = (value, max) => max <= 0 ? 0 : max * (1 - Math.exp(-value / max)), getDisplacementMap = (mode, displacementMap, polarDisplacementMap, prominentDisplacementMap, shaderMapUrl) => {
+}, smoothstep = t => {
+    const clamped = Math.max(0, Math.min(1, t));
+    return clamped * clamped * (3 - 2 * clamped);
+}, lerp$1 = (a, b, t) => a + (b - a) * t, softClamp = (value, max) => max <= 0 ? 0 : max * (1 - Math.exp(-value / max)), calculateSpring = (current, target, velocity, stiffness = .1, damping = .8) => {
+    const newVelocity = (velocity + (target - current) * stiffness) * damping;
+    return {
+        value: current + newVelocity,
+        velocity: newVelocity
+    };
+}, getDisplacementMap = (mode, displacementMap, polarDisplacementMap, prominentDisplacementMap, shaderMapUrl) => {
     switch (mode) {
       case "standard":
         return displacementMap;
@@ -739,6 +826,9 @@ shaderTime: shaderTime, withTimeAnimation: withTimeAnimation = !1, animationSpee
             }), jsx("div", {
                 ref: contentRef,
                 className: ATOMIX_GLASS.CONTENT_CLASS,
+                style: {
+                    transform: "var(--atomix-glass-child-parallax, none)"
+                },
                 children: children
             }) ]
         })
@@ -863,51 +953,26 @@ class {
     }
 }, updateAtomixGlassStyles = (wrapperElement, containerElement, params) => {
     if (!wrapperElement && !containerElement) return;
-    const {mouseOffset: mouseOffset, globalMousePosition: globalMousePosition, glassSize: glassSize, isHovered: isHovered, isActive: isActive, isOverLight: isOverLight, baseOverLightConfig: baseOverLightConfig, effectiveBorderRadius: effectiveBorderRadius, effectiveWithoutEffects: effectiveWithoutEffects, effectiveReducedMotion: effectiveReducedMotion, elasticity: elasticity, directionalScale: directionalScale, onClick: onClick, withLiquidBlur: withLiquidBlur, blurAmount: blurAmount = ATOMIX_GLASS.DEFAULTS.BLUR_AMOUNT, saturation: saturation = ATOMIX_GLASS.DEFAULTS.SATURATION, padding: padding = ATOMIX_GLASS.DEFAULTS.PADDING, isFixedOrSticky: isFixedOrSticky = !1} = params, mouseInfluence = calculateMouseInfluence(mouseOffset), hoverIntensity = isHovered ? 1.4 : 1, activeIntensity = isActive ? 1.6 : 1, overLightConfig = {
+    if (!validateGlassSize(params.glassSize)) return;
+    const {mouseOffset: mouseOffset, globalMousePosition: globalMousePosition, glassSize: glassSize, isHovered: isHovered, isActive: isActive, isOverLight: isOverLight, baseOverLightConfig: baseOverLightConfig, effectiveBorderRadius: effectiveBorderRadius, effectiveWithoutEffects: effectiveWithoutEffects, effectiveReducedMotion: effectiveReducedMotion, elasticity: elasticity, elasticTranslation: elasticTranslation, elasticVelocity: elasticVelocity, mouseVelocity: mouseVelocity, directionalScale: directionalScale, scaleBase: scaleBase, onClick: onClick, withLiquidBlur: withLiquidBlur, blurAmount: blurAmount = ATOMIX_GLASS.DEFAULTS.BLUR_AMOUNT, saturation: saturation = ATOMIX_GLASS.DEFAULTS.SATURATION, padding: padding = ATOMIX_GLASS.DEFAULTS.PADDING, isFixedOrSticky: isFixedOrSticky = !1} = params, mouseInfluence = calculateMouseInfluence(mouseOffset), hoverIntensity = isHovered ? 1.4 : 1, activeIntensity = isActive ? 1.6 : 1, overLightConfig = {
         opacity: baseOverLightConfig.opacity * hoverIntensity * activeIntensity,
         contrast: Math.min(1.6, baseOverLightConfig.contrast + .1 * mouseInfluence),
         brightness: Math.min(1.1, baseOverLightConfig.brightness + .05 * mouseInfluence),
         shadowIntensity: Math.min(1.2, Math.max(.5, baseOverLightConfig.shadowIntensity + .2 * mouseInfluence)),
         borderOpacity: Math.min(1, Math.max(.3, baseOverLightConfig.borderOpacity + .1 * mouseInfluence)),
         saturationBoost: baseOverLightConfig.saturationBoost
-    };
-    // Calculate mouse influence
-        let computedDirectionalScale = directionalScale, elasticTranslation = {
+    }, scaleX = directionalScale.x * scaleBase, scaleY = directionalScale.y * scaleBase, transformStyle = effectiveWithoutEffects ? `scale(${scaleBase})` : `translate(${elasticTranslation.x}px, ${elasticTranslation.y}px) scaleX(${scaleX}) scaleY(${scaleY})`, stretchMagnitude = ((pos1, pos2) => {
+        if (!pos1 || !pos2 || "number" != typeof pos1.x || "number" != typeof pos1.y || "number" != typeof pos2.x || "number" != typeof pos2.y) return 0;
+        const deltaX = pos1.x - pos2.x, deltaY = pos1.y - pos2.y;
+        return Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+    })({
         x: 0,
         y: 0
-    };
-    // Calculate elastic translation and directional scale
-        if (!effectiveWithoutEffects && wrapperElement) {
-        const rect = wrapperElement.getBoundingClientRect(), center = calculateElementCenter(rect);
-        // Mouse presence and edge distance logic
-        if (globalMousePosition.x && globalMousePosition.y && validateGlassSize(glassSize)) {
-            const deltaX = globalMousePosition.x - center.x, deltaY = globalMousePosition.y - center.y, edgeDistanceX = Math.max(0, Math.abs(deltaX) - glassSize.width / 2), edgeDistanceY = Math.max(0, Math.abs(deltaY) - glassSize.height / 2), edgeDistance = calculateDistance({
-                x: edgeDistanceX,
-                y: edgeDistanceY
-            }, {
-                x: 0,
-                y: 0
-            }), rawT = edgeDistance > ATOMIX_GLASS.CONSTANTS.ACTIVATION_ZONE ? 0 : 1 - edgeDistance / ATOMIX_GLASS.CONSTANTS.ACTIVATION_ZONE, fadeInFactor = (t => {
-                const clamped = Math.max(0, Math.min(1, t));
-                return clamped * clamped * (3 - 2 * clamped);
-            })(rawT);
-            // Directional scale
-            if (elasticTranslation = {
-                x: deltaX * elasticity * .1 * fadeInFactor,
-                y: deltaY * elasticity * .1 * fadeInFactor
-            }, !isOverLight && edgeDistance <= ATOMIX_GLASS.CONSTANTS.ACTIVATION_ZONE) {
-                const centerDistance = calculateDistance(globalMousePosition, center);
-                if (centerDistance > 0) {
-                    const normalizedX = deltaX / centerDistance, normalizedY = deltaY / centerDistance, stretchIntensity = Math.min(centerDistance / 300, 1) * elasticity * rawT, scaleX = 1 + Math.abs(normalizedX) * stretchIntensity * .3 - Math.abs(normalizedY) * stretchIntensity * .15, scaleY = 1 + Math.abs(normalizedY) * stretchIntensity * .3 - Math.abs(normalizedX) * stretchIntensity * .15, softScaleX = 1 - softClamp(Math.max(0, 1 - scaleX), .2), softScaleY = 1 - softClamp(Math.max(0, 1 - scaleY), .2);
-                    computedDirectionalScale = `scaleX(${Math.max(.85, softScaleX)}) scaleY(${Math.max(.85, softScaleY)})`;
-                }
-            }
-        }
-    }
-    const transformStyle = effectiveWithoutEffects ? isActive && Boolean(onClick) ? "scale(0.98)" : "scale(1)" : `translate(${elasticTranslation.x}px, ${elasticTranslation.y}px) ${isActive && Boolean(onClick) ? "scale(0.96)" : computedDirectionalScale}`;
-    // Update Wrapper Styles (glassVars)
-        if (wrapperElement) {
-        const mx = mouseOffset.x, my = mouseOffset.y, absMx = Math.abs(mx), absMy = Math.abs(my), GRADIENT = ATOMIX_GLASS.CONSTANTS.GRADIENT, borderGradientAngle = GRADIENT.BASE_ANGLE + mx * GRADIENT.ANGLE_MULTIPLIER, borderStop1 = Math.max(GRADIENT.BORDER_STOP_1.MIN, GRADIENT.BORDER_STOP_1.BASE + my * GRADIENT.BORDER_STOP_1.MULTIPLIER), borderStop2 = Math.min(GRADIENT.BORDER_STOP_2.MAX, GRADIENT.BORDER_STOP_2.BASE + my * GRADIENT.BORDER_STOP_2.MULTIPLIER), borderOpacities = [ GRADIENT.BORDER_OPACITY.BASE_1 + absMx * GRADIENT.BORDER_OPACITY.MULTIPLIER_LOW, GRADIENT.BORDER_OPACITY.BASE_2 + absMx * GRADIENT.BORDER_OPACITY.MULTIPLIER_HIGH, GRADIENT.BORDER_OPACITY.BASE_3 + absMx * GRADIENT.BORDER_OPACITY.MULTIPLIER_LOW, GRADIENT.BORDER_OPACITY.BASE_4 + absMx * GRADIENT.BORDER_OPACITY.MULTIPLIER_HIGH ], configBorderOpacity = overLightConfig.borderOpacity, whiteColor = ATOMIX_GLASS.CONSTANTS.PALETTE.WHITE, blackColor = ATOMIX_GLASS.CONSTANTS.PALETTE.BLACK, hoverPositions = {
+    }, elasticTranslation), tensionFactor = smoothstep(stretchMagnitude / 80), lightingContrast = Math.min(1.8, overLightConfig.contrast + .2 * tensionFactor), lightingBrightness = Math.min(1.2, overLightConfig.brightness + .1 * tensionFactor);
+    // Calculate mouse influence
+        // Update Wrapper Styles (glassVars)
+    if (wrapperElement) {
+        const mx = mouseOffset.x, my = mouseOffset.y, absMx = Math.abs(mx), absMy = Math.abs(my), GRADIENT = ATOMIX_GLASS.CONSTANTS.GRADIENT, velocityRotation = (mouseVelocity.x + elasticVelocity.x) * (GRADIENT.VELOCITY_ANGLE_MULTIPLIER || 2.5), borderGradientAngle = GRADIENT.BASE_ANGLE + mx * GRADIENT.ANGLE_MULTIPLIER + velocityRotation, chromaticOffset = GRADIENT.CHROMATIC_OFFSET || 1.5, angleR = borderGradientAngle - chromaticOffset, angleB = borderGradientAngle + chromaticOffset, borderStop1 = Math.max(GRADIENT.BORDER_STOP_1.MIN, GRADIENT.BORDER_STOP_1.BASE + my * GRADIENT.BORDER_STOP_1.MULTIPLIER), borderStop2 = Math.min(GRADIENT.BORDER_STOP_2.MAX, GRADIENT.BORDER_STOP_2.BASE + my * GRADIENT.BORDER_STOP_2.MULTIPLIER), tensionGlow = 1 + .5 * tensionFactor, borderOpacities = [ (GRADIENT.BORDER_OPACITY.BASE_1 + absMx * GRADIENT.BORDER_OPACITY.MULTIPLIER_LOW) * tensionGlow, (GRADIENT.BORDER_OPACITY.BASE_2 + absMx * GRADIENT.BORDER_OPACITY.MULTIPLIER_HIGH) * tensionGlow, (GRADIENT.BORDER_OPACITY.BASE_3 + absMx * GRADIENT.BORDER_OPACITY.MULTIPLIER_LOW) * tensionGlow, (GRADIENT.BORDER_OPACITY.BASE_4 + absMx * GRADIENT.BORDER_OPACITY.MULTIPLIER_HIGH) * tensionGlow ], configBorderOpacity = overLightConfig.borderOpacity, whiteColor = ATOMIX_GLASS.CONSTANTS.PALETTE.WHITE, blackColor = ATOMIX_GLASS.CONSTANTS.PALETTE.BLACK, hoverPositions = {
             hover1: {
                 x: GRADIENT.CENTER_POSITION + mx / GRADIENT.HOVER_POSITION.DIVISOR_1,
                 y: GRADIENT.CENTER_POSITION + my / GRADIENT.HOVER_POSITION.DIVISOR_1
@@ -930,10 +995,16 @@ class {
             base: isOverLight ? overLightConfig.opacity : 0,
             over: isOverLight ? 1.1 * overLightConfig.opacity : 0
         }, style = wrapperElement.style;
-        style.setProperty("--atomix-glass-transform", transformStyle || "none"), 
-        // Gradients
-        style.setProperty("--atomix-glass-border-gradient-1", `linear-gradient(${borderGradientAngle}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${(borderOpacities[0] ?? 1) * configBorderOpacity}) ${borderStop1}%, rgba(${whiteColor}, ${(borderOpacities[1] ?? 1) * configBorderOpacity}) ${borderStop2}%, rgba(${whiteColor}, 0) 100%)`), 
-        style.setProperty("--atomix-glass-border-gradient-2", `linear-gradient(${borderGradientAngle}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${(borderOpacities[2] ?? 1) * configBorderOpacity}) ${borderStop1}%, rgba(${whiteColor}, ${(borderOpacities[3] ?? 1) * configBorderOpacity}) ${borderStop2}%, rgba(${whiteColor}, 0) 100%)`), 
+        style.setProperty("--atomix-glass-transform", transformStyle || "none");
+        // Parallax for content (liquid refraction feel)
+        const parallaxFactor = .38 + .12 * tensionFactor;
+        style.setProperty("--atomix-glass-child-parallax", `translate(${elasticTranslation.x * -parallaxFactor}px, ${elasticTranslation.y * -parallaxFactor}px)`), 
+        style.setProperty("--atomix-glass-contrast", lightingContrast.toString()), style.setProperty("--atomix-glass-brightness", lightingBrightness.toString()), 
+        // ── Chromatic Rim Lighting ──────────────────────────────────────
+        // Layer 1: Core White/Blue highlight
+        style.setProperty("--atomix-glass-border-gradient-1", `linear-gradient(${angleB}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${(borderOpacities[0] ?? 1) * configBorderOpacity}) ${borderStop1}%, rgba(${whiteColor}, ${(borderOpacities[1] ?? 1) * configBorderOpacity}) ${borderStop2}%, rgba(${whiteColor}, 0) 100%)`), 
+        // Layer 2: Subtle Red/Warm highlight (offset angle)
+        style.setProperty("--atomix-glass-border-gradient-2", `linear-gradient(${angleR}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${(borderOpacities[2] ?? 1) * configBorderOpacity}) ${borderStop1}%, rgba(${whiteColor}, ${(borderOpacities[3] ?? 1) * configBorderOpacity}) ${borderStop2}%, rgba(${whiteColor}, 0) 100%)`), 
         // Hover gradients
         style.setProperty("--atomix-glass-hover-1-gradient", isOverLight ? `radial-gradient(circle at ${hoverPositions.hover1.x}% ${hoverPositions.hover1.y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_START}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_STOP}%, rgba(${blackColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_END}%)` : `radial-gradient(circle at ${hoverPositions.hover1.x}% ${hoverPositions.hover1.y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.WHITE_STOP}%)`), 
         style.setProperty("--atomix-glass-hover-2-gradient", isOverLight ? `radial-gradient(circle at ${hoverPositions.hover2.x}% ${hoverPositions.hover2.y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_START}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_STOP}%, rgba(${blackColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_END}%)` : `radial-gradient(circle at ${hoverPositions.hover2.x}% ${hoverPositions.hover2.y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.WHITE_STOP}%)`), 
@@ -961,7 +1032,7 @@ class {
             flowBlur: blurAmount * FLOW_BLUR_MULTIPLIER
         };
         if (withLiquidBlur && rect) {
-            const mouseInfluence = calculateMouseInfluence(mouseOffset), maxBlur = blurAmount * MAX_BLUR_RELATIVE, baseBlur = Math.min(maxBlur, blurAmount + mouseInfluence * blurAmount * MOUSE_INFLUENCE_BLUR_FACTOR), edgeIntensity = mouseInfluence * EDGE_INTENSITY_MOUSE_FACTOR, edgeBlur = Math.min(maxBlur, baseBlur * (.8 + .4 * edgeIntensity)), centerIntensity = mouseInfluence * CENTER_INTENSITY_MOUSE_FACTOR, centerBlur = Math.min(maxBlur, baseBlur * (.3 + .3 * centerIntensity)), flowBlur = Math.min(maxBlur, baseBlur * FLOW_BLUR_MULTIPLIER);
+            const mouseInfluence = calculateMouseInfluence(mouseOffset), maxBlur = blurAmount * MAX_BLUR_RELATIVE, baseBlur = softClamp(blurAmount + mouseInfluence * blurAmount * MOUSE_INFLUENCE_BLUR_FACTOR, maxBlur), edgeBlur = softClamp(baseBlur * (.8 + mouseInfluence * EDGE_INTENSITY_MOUSE_FACTOR * .4), maxBlur), centerBlur = softClamp(baseBlur * (.3 + mouseInfluence * CENTER_INTENSITY_MOUSE_FACTOR * .3), maxBlur), flowBlur = softClamp(baseBlur * FLOW_BLUR_MULTIPLIER, maxBlur);
             liquidBlur = {
                 baseBlur: clampBlur(baseBlur),
                 edgeBlur: clampBlur(edgeBlur),
@@ -970,9 +1041,10 @@ class {
             };
         }
         // Backdrop filter
-                let backdropFilterString = `blur(${blurAmount}px) saturate(${saturation}%) contrast(1.05) brightness(1.05)`;
-        const dynamicSaturation = saturation + 20 * (liquidBlur.baseBlur || 0), area = rect ? rect.width * rect.height : 0;
-        backdropFilterString = !withLiquidBlur || effectiveReducedMotion || effectiveWithoutEffects || area > 18e4 ? `blur(${clampBlur(Math.max(liquidBlur.baseBlur, .8 * liquidBlur.edgeBlur, 1.1 * liquidBlur.centerBlur, .9 * liquidBlur.flowBlur))}px) saturate(${Math.min(dynamicSaturation, 200)}%) contrast(${overLightConfig.contrast}) brightness(${overLightConfig.brightness})` : `blur(${clampBlur(.4 * liquidBlur.baseBlur + .25 * liquidBlur.edgeBlur + .15 * liquidBlur.centerBlur + .2 * liquidBlur.flowBlur)}px) saturate(${Math.min(dynamicSaturation, 200)}%) contrast(${overLightConfig.contrast}) brightness(${overLightConfig.brightness})`;
+                const dynamicSaturation = saturation + 40 * tensionFactor + 15 * (liquidBlur.baseBlur || 0);
+        let backdropFilterString = "";
+        const area = rect ? rect.width * rect.height : 0;
+        backdropFilterString = !withLiquidBlur || effectiveReducedMotion || effectiveWithoutEffects || area > 18e4 ? `blur(${clampBlur(Math.max(liquidBlur.baseBlur, .8 * liquidBlur.edgeBlur, 1.1 * liquidBlur.centerBlur, .9 * liquidBlur.flowBlur))}px) saturate(${Math.min(dynamicSaturation, 250)}%) contrast(${lightingContrast}) brightness(${lightingBrightness})` : `blur(${clampBlur(.4 * liquidBlur.baseBlur + .25 * liquidBlur.edgeBlur + .15 * liquidBlur.centerBlur + .2 * liquidBlur.flowBlur)}px) saturate(${Math.min(dynamicSaturation, 250)}%) contrast(${lightingContrast}) brightness(${lightingBrightness})`;
         // Container variables
                 const style = containerElement.style;
         style.setProperty("--atomix-glass-container-padding", padding), style.setProperty("--atomix-glass-container-radius", `${effectiveBorderRadius}px`), 
@@ -1151,7 +1223,24 @@ withTimeAnimation = ATOMIX_GLASS.DEFAULTS.WITH_TIME_ANIMATION, animationSpeed: a
     }), targetGlobalMousePositionRef = useRef({
         x: 0,
         y: 0
-    }), lerpRafRef = useRef(null), lerpActiveRef = useRef(!1), [dynamicBorderRadius, setDynamicCornerRadius] = useState(CONSTANTS.DEFAULT_CORNER_RADIUS), [userPrefersReducedMotion, setUserPrefersReducedMotion] = useState(!1), [userPrefersHighContrast, setUserPrefersHighContrast] = useState(!1), [detectedOverLight, setDetectedOverLight] = useState(!1), animationFrameIdRef = useRef(null), animationStartTimeRef = useRef(0), elapsedTimeRef = useRef(0), shaderTimeRef = useRef(0), fbmConfig = useMemo((() => {
+    }), lerpRafRef = useRef(null), lerpActiveRef = useRef(!1), [dynamicBorderRadius, setDynamicCornerRadius] = useState(CONSTANTS.DEFAULT_CORNER_RADIUS), elasticTranslationRef = useRef({
+        x: 0,
+        y: 0
+    }), elasticVelocityRef = useRef({
+        x: 0,
+        y: 0
+    }), directionalScaleRef = useRef({
+        x: 1,
+        y: 1
+    }), scaleVelocityRef = useRef({
+        x: 0,
+        y: 0
+    });
+    useRef(0);
+    const mouseVelocityRef = useRef({
+        x: 0,
+        y: 0
+    }), [userPrefersReducedMotion, setUserPrefersReducedMotion] = useState(!1), [userPrefersHighContrast, setUserPrefersHighContrast] = useState(!1), [detectedOverLight, setDetectedOverLight] = useState(!1), animationFrameIdRef = useRef(null), animationStartTimeRef = useRef(0), elapsedTimeRef = useRef(0), shaderTimeRef = useRef(0), fbmConfig = useMemo((() => {
         // If quality preset is provided, use it as base
         const preset = (quality = distortionQuality, ATOMIX_GLASS.CONSTANTS.DISTORTION_QUALITY_PRESETS[quality]);
         // Override with custom values if provided
@@ -1436,57 +1525,85 @@ withTimeAnimation = ATOMIX_GLASS.DEFAULTS.WITH_TIME_ANIMATION, animationSpeed: a
             return "undefined" == typeof process || process.env, finalConfig;
         }
         return "undefined" == typeof process || process.env, baseConfig;
-    }), [ overLight, getEffectiveOverLight, isHovered, isActive, validateConfigValue, debugOverLight ]), transformStyle = useMemo((() => effectiveWithoutEffects || isActive && Boolean(onClick) ? "scale(0.98)" : "scale(1)"), [ effectiveWithoutEffects, isActive, onClick ]), updateRectRef = useRef(null), stopLerpLoop = useCallback((() => {
+    }), [ overLight, getEffectiveOverLight, isHovered, isActive, validateConfigValue, debugOverLight ]), transformStyle = useMemo((() => effectiveWithoutEffects || isActive && Boolean(onClick) ? "scale(0.99)" : "scale(1)"), [ effectiveWithoutEffects, isActive, onClick ]), updateRectRef = useRef(null), stopLerpLoop = useCallback((() => {
         lerpActiveRef.current = !1, null !== lerpRafRef.current && (cancelAnimationFrame(lerpRafRef.current), 
         lerpRafRef.current = null);
     }), []), startLerpLoop = useCallback((() => {
         if (lerpActiveRef.current) return;
-        lerpActiveRef.current = !0;
-        const LERP_T = CONSTANTS.LERP_FACTOR, tick = () => {
+        lerpActiveRef.current = !0, CONSTANTS.LERP_FACTOR;
+        // 0.08 – lower = more viscous
+        const tick = () => {
             if (!lerpActiveRef.current) return;
             if (!glassRef.current) return void (lerpActiveRef.current = !1);
-            const cur = internalMouseOffsetRef.current, tgt = targetMouseOffsetRef.current, dx = tgt.x - cur.x, dy = tgt.y - cur.y;
-            // If we're close enough, snap and park
-            if (Math.abs(dx) < .01 && Math.abs(dy) < .01) return internalMouseOffsetRef.current = {
-                ...tgt
-            }, internalGlobalMousePositionRef.current = {
-                ...targetGlobalMousePositionRef.current
-            }, 
-            // Final update and stop
-            updateAtomixGlassStyles(wrapperRef?.current || null, glassRef.current, {
-                mouseOffset: internalMouseOffsetRef.current,
-                globalMousePosition: internalGlobalMousePositionRef.current,
-                glassSize: glassSize,
-                isHovered: isHovered,
-                isActive: isActive,
-                isOverLight: overLightConfig.isOverLight,
-                baseOverLightConfig: overLightConfig,
-                effectiveBorderRadius: effectiveBorderRadius,
-                effectiveWithoutEffects: effectiveWithoutEffects,
-                effectiveReducedMotion: effectiveReducedMotion,
-                elasticity: elasticity,
-                directionalScale: isActive && Boolean(onClick) ? "scale(0.96)" : "scale(1)",
-                onClick: onClick,
-                withLiquidBlur: withLiquidBlur,
-                blurAmount: blurAmount,
-                saturation: saturation,
-                padding: padding,
-                isFixedOrSticky: isFixedOrSticky
-            }), void stopLerpLoop();
-            // Smooth step
-                        internalMouseOffsetRef.current = {
-                x: lerp$1(cur.x, tgt.x, LERP_T),
-                y: lerp$1(cur.y, tgt.y, LERP_T)
+            const cur = internalMouseOffsetRef.current, tgt = targetMouseOffsetRef.current, springX = calculateSpring(cur.x, tgt.x, mouseVelocityRef.current.x, CONSTANTS.LERP_FACTOR, CONSTANTS.ELASTICITY_DAMPING), springY = calculateSpring(cur.y, tgt.y, mouseVelocityRef.current.y, CONSTANTS.LERP_FACTOR, CONSTANTS.ELASTICITY_DAMPING);
+            internalMouseOffsetRef.current = {
+                x: springX.value,
+                y: springY.value
+            }, mouseVelocityRef.current = {
+                x: springX.velocity,
+                y: springY.velocity
             };
             const curG = internalGlobalMousePositionRef.current, tgtG = targetGlobalMousePositionRef.current;
             internalGlobalMousePositionRef.current = {
-                x: lerp$1(curG.x, tgtG.x, LERP_T),
-                y: lerp$1(curG.y, tgtG.y, LERP_T)
+                x: lerp$1(curG.x, tgtG.x, CONSTANTS.LERP_FACTOR),
+                y: lerp$1(curG.y, tgtG.y, CONSTANTS.LERP_FACTOR)
+            };
+            // ── Calculate Elastic Physics ─────────────────────────────────────
+            let targetElasticTranslation = {
+                x: 0,
+                y: 0
+            }, targetScale = {
+                x: 1,
+                y: 1
+            };
+            if (!effectiveWithoutEffects && glassRef.current) {
+                const rect = cachedRectRef.current || glassRef.current.getBoundingClientRect(), center = calculateElementCenter(rect), globalPos = internalGlobalMousePositionRef.current;
+                if (globalPos.x && globalPos.y) {
+                    const deltaX = globalPos.x - center.x, deltaY = globalPos.y - center.y, edgeDistanceX = Math.max(0, Math.abs(deltaX) - rect.width / 2), edgeDistanceY = Math.max(0, Math.abs(deltaY) - rect.height / 2), edgeDistance = Math.sqrt(edgeDistanceX * edgeDistanceX + edgeDistanceY * edgeDistanceY), activationZone = CONSTANTS.ACTIVATION_ZONE, rawT = edgeDistance > activationZone ? 0 : 1 - edgeDistance / activationZone, fadeInFactor = smoothstep(rawT);
+                    // Scale stretch logic (liquid surface tension)
+                    if (targetElasticTranslation = {
+                        x: deltaX * elasticity * CONSTANTS.ELASTICITY_TRANSLATION_FACTOR * fadeInFactor,
+                        y: deltaY * elasticity * CONSTANTS.ELASTICITY_TRANSLATION_FACTOR * fadeInFactor
+                    }, edgeDistance <= activationZone) {
+                        const centerDistance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+                        if (centerDistance > 0) {
+                            const nx = deltaX / centerDistance, ny = deltaY / centerDistance, stretchIntensity = Math.min(centerDistance / 350, 1) * elasticity * rawT, mag = 1 + .06 * stretchIntensity;
+                            targetScale = {
+                                x: mag + Math.abs(nx) * stretchIntensity * CONSTANTS.ELASTICITY_STRETCH_RATIO,
+                                y: mag + Math.abs(ny) * stretchIntensity * CONSTANTS.ELASTICITY_STRETCH_RATIO
+                            }, 
+                            // Maintain liquid volume by compressing the perpendicular axis
+                            targetScale.x -= Math.abs(ny) * stretchIntensity * .15, targetScale.y -= Math.abs(nx) * stretchIntensity * .15;
+                        }
+                    }
+                }
+            }
+            // Integrate Elastic Translation Spring
+                        const springTX = calculateSpring(elasticTranslationRef.current.x, targetElasticTranslation.x, elasticVelocityRef.current.x, CONSTANTS.ELASTICITY_STIFFNESS, CONSTANTS.ELASTICITY_DAMPING), springTY = calculateSpring(elasticTranslationRef.current.y, targetElasticTranslation.y, elasticVelocityRef.current.y, CONSTANTS.ELASTICITY_STIFFNESS, CONSTANTS.ELASTICITY_DAMPING);
+            elasticTranslationRef.current = {
+                x: springTX.value,
+                y: springTY.value
+            }, elasticVelocityRef.current = {
+                x: springTX.velocity,
+                y: springTY.velocity
+            };
+            // Integrate Scale Spring
+            const springSX = calculateSpring(directionalScaleRef.current.x, targetScale.x, scaleVelocityRef.current.x, CONSTANTS.ELASTICITY_STIFFNESS, CONSTANTS.ELASTICITY_DAMPING), springSY = calculateSpring(directionalScaleRef.current.y, targetScale.y, scaleVelocityRef.current.y, CONSTANTS.ELASTICITY_STIFFNESS, CONSTANTS.ELASTICITY_DAMPING);
+            directionalScaleRef.current = {
+                x: springSX.value,
+                y: springSY.value
+            }, scaleVelocityRef.current = {
+                x: springSX.velocity,
+                y: springSY.velocity
             }, 
             // Imperative style update
             updateAtomixGlassStyles(wrapperRef?.current || null, glassRef.current, {
                 mouseOffset: internalMouseOffsetRef.current,
                 globalMousePosition: internalGlobalMousePositionRef.current,
+                elasticTranslation: elasticTranslationRef.current,
+                elasticVelocity: elasticVelocityRef.current,
+                mouseVelocity: mouseVelocityRef.current,
+                directionalScale: directionalScaleRef.current,
                 glassSize: glassSize,
                 isHovered: isHovered,
                 isActive: isActive,
@@ -1496,17 +1613,16 @@ withTimeAnimation = ATOMIX_GLASS.DEFAULTS.WITH_TIME_ANIMATION, animationSpeed: a
                 effectiveWithoutEffects: effectiveWithoutEffects,
                 effectiveReducedMotion: effectiveReducedMotion,
                 elasticity: elasticity,
-                directionalScale: isActive && Boolean(onClick) ? "scale(0.96)" : "scale(1)",
+                scaleBase: isActive && Boolean(onClick) ? .99 : 1,
                 onClick: onClick,
                 withLiquidBlur: withLiquidBlur,
                 blurAmount: blurAmount,
                 saturation: saturation,
                 padding: padding,
                 isFixedOrSticky: isFixedOrSticky
-            }), lerpRafRef.current = requestAnimationFrame(tick);
+            }), Math.abs(mouseVelocityRef.current.x) < .001 && Math.abs(mouseVelocityRef.current.y) < .001 && Math.abs(elasticVelocityRef.current.x) < .001 && Math.abs(elasticVelocityRef.current.y) < .001 && Math.abs(scaleVelocityRef.current.x) < .001 && Math.abs(scaleVelocityRef.current.y) < .001 && Math.abs(internalMouseOffsetRef.current.x - targetMouseOffsetRef.current.x) < .001 && Math.abs(internalMouseOffsetRef.current.y - targetMouseOffsetRef.current.y) < .001 ? stopLerpLoop() : lerpRafRef.current = requestAnimationFrame(tick);
         };
- // 0.08 – lower = more viscous
-                lerpRafRef.current = requestAnimationFrame(tick);
+        lerpRafRef.current = requestAnimationFrame(tick);
     }), [ glassRef, wrapperRef, glassSize, isHovered, isActive, overLightConfig, effectiveBorderRadius, effectiveWithoutEffects, effectiveReducedMotion, elasticity, onClick, withLiquidBlur, blurAmount, saturation, padding, isFixedOrSticky, stopLerpLoop ]), handleGlobalMousePosition = useCallback((globalPos => {
         if (externalGlobalMousePosition && externalMouseOffset) return;
         if (effectiveWithoutEffects) return;
@@ -1553,6 +1669,11 @@ withTimeAnimation = ATOMIX_GLASS.DEFAULTS.WITH_TIME_ANIMATION, animationSpeed: a
         updateAtomixGlassStyles(wrapperRef?.current || null, glassRef.current, {
             mouseOffset: externalMouseOffset || internalMouseOffsetRef.current,
             globalMousePosition: externalGlobalMousePosition || internalGlobalMousePositionRef.current,
+            elasticTranslation: elasticTranslationRef.current,
+            elasticVelocity: elasticVelocityRef.current,
+            mouseVelocity: mouseVelocityRef.current,
+            directionalScale: directionalScaleRef.current,
+            scaleBase: isActive && Boolean(onClick) ? .96 : 1,
             glassSize: glassSize,
             isHovered: isHovered,
             isActive: isActive,
@@ -1562,7 +1683,6 @@ withTimeAnimation = ATOMIX_GLASS.DEFAULTS.WITH_TIME_ANIMATION, animationSpeed: a
             effectiveWithoutEffects: effectiveWithoutEffects,
             effectiveReducedMotion: effectiveReducedMotion,
             elasticity: elasticity,
-            directionalScale: isActive && Boolean(onClick) ? "scale(0.96)" : "scale(1)",
             onClick: onClick,
             withLiquidBlur: withLiquidBlur,
             blurAmount: blurAmount,
@@ -2830,7 +2950,7 @@ const PERFORMANCE_PRESET = {
         "aria-label": ariaLabel,
         "aria-describedby": ariaDescribedBy,
         "aria-disabled": !(!onClick || !effectiveWithoutEffects) || !onClick && void 0,
-        "aria-pressed": void 0,
+        "aria-pressed": onClick ? isActive : void 0,
         onKeyDown: onClick ? handleKeyDown : void 0,
         children: [ jsx(AtomixGlassContainer, {
             ref: glassRef,
@@ -3300,26 +3420,25 @@ const Radio =  memo((({label: label, checked: checked = !1, onChange: onChange,
 
 Radio.displayName = "Radio";
 
-const SelectContext =  createContext(null), SelectOption =  memo((({value: value, children: children, disabled: disabled = !1, className: className = "", style: style}) => {
-    const context = useContext(SelectContext), label = "string" == typeof children ? children : value;
-    // We assume children is the label if it's a string, or we need a way to get label.
-    // For simplicity, we use children as label for registration if it's a string.
-        if (useEffect((() => {
+const SelectContext =  createContext(null), SelectOption =  memo((({value: value, label: label, children: children, disabled: disabled = !1, className: className = "", style: style}) => {
+    const context = useContext(SelectContext), displayLabel = label || ("string" == typeof children ? children : value);
+    if (useEffect((() => {
         if (context) return context.registerOption({
             value: value,
-            label: label,
+            label: displayLabel,
             disabled: disabled
         }), () => {
             context.unregisterOption(value);
         };
-    }), [ context, value, label, disabled ]), !context) return console.warn("SelectOption must be used within a Select component"), 
+    }), [ context, value, displayLabel, disabled ]), !context) return console.warn("SelectOption must be used within a Select component"), 
     null;
-    const {selectedValue: selectedValue, onSelect: onSelect} = context, isSelected = Array.isArray(selectedValue) ? _includesInstanceProperty(selectedValue).call(selectedValue, value) : selectedValue === value;
+    const {selectedValue: selectedValue, onSelect: onSelect, focusedValue: focusedValue, id: id} = context, isSelected = Array.isArray(selectedValue) ? _includesInstanceProperty(selectedValue).call(selectedValue, value) : selectedValue === value;
     return jsx("li", {
-        className: `${SELECT_CLASSES_SELECT_ITEM} ${className}`.trim(),
+        id: id ? `${id}-opt-${value}` : void 0,
+        className: `${SELECT_CLASSES_SELECT_ITEM} ${focusedValue === value ? "is-focused" : ""} ${isSelected ? "is-selected" : ""} ${className}`.trim(),
         "data-value": value,
         onClick: e => {
-            e.preventDefault(), e.stopPropagation(), disabled || onSelect(value, label);
+            e.preventDefault(), e.stopPropagation(), disabled || onSelect(value, displayLabel);
         },
         style: style,
         role: "option",
@@ -3339,7 +3458,7 @@ const SelectContext =  createContext(null), SelectOption =  memo((({value: value
                 tabIndex: -1
             }), jsx("div", {
                 className: "c-select__item-label",
-                children: children
+                children: children || displayLabel
             }) ]
         })
     });
@@ -3395,18 +3514,18 @@ const SelectComponentBase = ({options: options, value: value, onChange: onChange
         disabled: disabled,
         invalid: invalid,
         valid: valid
-    }), [isOpen, setIsOpen] = useState(!1), [selectedLabel, setSelectedLabel] = useState(placeholder), dropdownRef = useRef(null), panelRef = useRef(null), bodyRef = useRef(null), nativeSelectRef = useRef(null), [registeredOptions, setRegisteredOptions] = useState([]), registerOption = useCallback((option => {
+    }), [isOpen, setIsOpen] = useState(!1), [focusedIndex, setFocusedIndex] = useState(-1), dropdownRef = useRef(null), panelRef = useRef(null), bodyRef = useRef(null), nativeSelectRef = useRef(null), [registeredOptions, setRegisteredOptions] = useState([]), registerOption = useCallback((option => {
         setRegisteredOptions((prev => prev.some((o => o.value === option.value)) ? prev : [ ...prev, option ]));
     }), []), unregisterOption = useCallback((value => {
         setRegisteredOptions((prev => prev.filter((o => o.value !== value))));
-    }), []), hasOptionsProp = options && options.length > 0, activeOptions = hasOptionsProp ? options : registeredOptions;
-    // Update selected label when value changes
-    useEffect((() => {
-        if (value) {
+    }), []), hasOptionsProp = options && options.length > 0, activeOptions = hasOptionsProp ? options : registeredOptions, selectedLabel = useMemo((() => {
+        if (multiple && Array.isArray(value)) return 0 === value.length ? placeholder : activeOptions.filter((opt => _includesInstanceProperty(value).call(value, opt.value))).map((opt => opt.label)).join(", ");
+        if (value && "string" == typeof value) {
             const selectedOption = activeOptions.find((opt => opt.value === value));
-            selectedOption && setSelectedLabel(selectedOption.label);
-        } else setSelectedLabel(placeholder);
-    }), [ value, activeOptions, placeholder ]), 
+            return selectedOption ? selectedOption.label : placeholder;
+        }
+        return placeholder;
+    }), [ value, activeOptions, placeholder, multiple ]);
     // Handle click outside to close dropdown
     useEffect((() => {
         const handleClickOutside = event => {
@@ -3419,31 +3538,54 @@ const SelectComponentBase = ({options: options, value: value, onChange: onChange
     }), []);
     // Toggle dropdown
     const handleToggle = () => {
-        disabled || (!isOpen && bodyRef.current && panelRef.current ? bodyRef.current.style.height = `${panelRef.current.clientHeight}px` : bodyRef.current && (bodyRef.current.style.height = "0px"), 
-        setIsOpen(!isOpen));
-    }, handleItemClick = useCallback((option => {
-        if (setSelectedLabel(option.label), setIsOpen(!1), bodyRef.current && (bodyRef.current.style.height = "0px"), 
-        nativeSelectRef.current && (nativeSelectRef.current.value = option.value), onChange) {
-            // Create a synthetic event
-            const event = {
-                target: {
-                    name: name,
-                    value: option.value
-                }
-            };
-            onChange(event);
+        if (!disabled) {
+            const nextOpen = !isOpen;
+            if (nextOpen && bodyRef.current && panelRef.current) 
+            // Set focused index to current selection or first item
+            if (bodyRef.current.style.height = `${panelRef.current.clientHeight}px`, value && !multiple && "string" == typeof value) {
+                const index = activeOptions.findIndex((opt => opt.value === value));
+                setFocusedIndex(index >= 0 ? index : 0);
+            } else if (multiple && Array.isArray(value) && value.length > 0) {
+                const index = activeOptions.findIndex((opt => _includesInstanceProperty(value).call(value, opt.value)));
+                setFocusedIndex(index >= 0 ? index : 0);
+            } else setFocusedIndex(0); else bodyRef.current && (bodyRef.current.style.height = "0px", 
+            setFocusedIndex(-1));
+            setIsOpen(nextOpen);
         }
-    }), [ onChange, name ]), onSelect = useCallback(((val, label) => {
+    }, handleItemClick = useCallback((option => {
+        let newValue;
+        if (multiple) {
+            const currentValues = Array.isArray(value) ? value : value ? [ value ] : [];
+            newValue = _includesInstanceProperty(currentValues).call(currentValues, option.value) ? currentValues.filter((v => v !== option.value)) : [ ...currentValues, option.value ];
+        } else newValue = option.value, setIsOpen(!1), bodyRef.current && (bodyRef.current.style.height = "0px");
+        onChange && (
+        // Sync native select before firing onChange
+        nativeSelectRef.current && (multiple && Array.isArray(newValue) ? Array.from(nativeSelectRef.current.options).forEach((opt => {
+            opt.selected = _includesInstanceProperty(newValue).call(newValue, opt.value);
+        })) : "string" == typeof newValue && (nativeSelectRef.current.value = newValue)), 
+        onChange({
+            target: {
+                name: name,
+                value: newValue
+            }
+        }));
+    }), [ onChange, name, multiple, value ]), onSelect = useCallback(((val, label) => {
         handleItemClick({
             value: val,
             label: label
         });
-    }), [ handleItemClick ]), contextValue = React.useMemo((() => ({
+    }), [ handleItemClick ]), focusedValue = useMemo((() => {
+        if (focusedIndex >= 0 && focusedIndex < activeOptions.length) return activeOptions[focusedIndex]?.value;
+    }), [ focusedIndex, activeOptions ]), focusedOptionId = useMemo((() => {
+        if (isOpen && focusedValue) return `${id || "select"}-opt-${focusedValue}`;
+    }), [ isOpen, focusedValue, id ]), contextValue = React.useMemo((() => ({
         registerOption: registerOption,
         unregisterOption: unregisterOption,
         selectedValue: value,
-        onSelect: onSelect
-    })), [ registerOption, unregisterOption, value, onSelect ]), selectContent = jsx(SelectContext.Provider, {
+        onSelect: onSelect,
+        focusedValue: focusedValue,
+        id: id || "select"
+    })), [ registerOption, unregisterOption, value, onSelect, focusedValue, id ]), selectContent = jsx(SelectContext.Provider, {
         value: contextValue,
         children: jsxs("div", {
             className: `${selectClass} ${isOpen ? SELECT_CLASSES_IS_OPEN : ""}`,
@@ -3491,7 +3633,12 @@ const SelectComponentBase = ({options: options, value: value, onChange: onChange
                     if (!disabled) switch (event.key) {
                       case "Enter":
                       case " ":
-                        event.preventDefault(), handleToggle();
+                        if (event.preventDefault(), isOpen) {
+                            if (focusedIndex >= 0 && focusedIndex < activeOptions.length) {
+                                const option = activeOptions[focusedIndex];
+                                option && !option.disabled && handleItemClick(option);
+                            }
+                        } else handleToggle();
                         break;
 
                       case "Escape":
@@ -3499,8 +3646,23 @@ const SelectComponentBase = ({options: options, value: value, onChange: onChange
                         break;
 
                       case "ArrowDown":
+                        event.preventDefault(), isOpen ? setFocusedIndex((prev => prev < activeOptions.length - 1 ? prev + 1 : prev)) : handleToggle();
+                        break;
+
                       case "ArrowUp":
-                        isOpen || (event.preventDefault(), handleToggle());
+                        event.preventDefault(), isOpen ? setFocusedIndex((prev => prev > 0 ? prev - 1 : 0)) : handleToggle();
+                        break;
+
+                      case "Home":
+                        isOpen && (event.preventDefault(), setFocusedIndex(0));
+                        break;
+
+                      case "End":
+                        isOpen && (event.preventDefault(), setFocusedIndex(activeOptions.length - 1));
+                        break;
+
+                      case "Tab":
+                        isOpen && (setIsOpen(!1), bodyRef.current && (bodyRef.current.style.height = "0px"));
                     }
                 },
                 "aria-disabled": disabled,
@@ -3509,7 +3671,11 @@ const SelectComponentBase = ({options: options, value: value, onChange: onChange
                 "aria-haspopup": "listbox",
                 "aria-expanded": isOpen,
                 "aria-controls": id ? `${id}-listbox` : void 0,
-                children: selectedLabel
+                "aria-activedescendant": focusedOptionId,
+                children: jsx("div", {
+                    className: "c-select__selected-text",
+                    children: selectedLabel
+                })
             }), jsx("i", {
                 className: `${SELECT_CLASSES_ICON_CARET} ${SELECT_CLASSES_TOGGLE_ICON}`
             }), jsx("div", {
@@ -3527,11 +3693,13 @@ const SelectComponentBase = ({options: options, value: value, onChange: onChange
                         id: id ? `${id}-listbox` : void 0,
                         "aria-labelledby": id,
                         children: hasOptionsProp ? options.map(((option, index) => jsx("li", {
-                            className: SELECT_CLASSES_SELECT_ITEM,
+                            id: `${id || "select"}-opt-${option.value}`,
+                            className: `${SELECT_CLASSES_SELECT_ITEM} ${focusedIndex === index ? "is-focused" : ""} ${multiple && Array.isArray(value) && _includesInstanceProperty(value).call(value, option.value) || value === option.value ? "is-selected" : ""}`,
                             "data-value": option.value,
                             onClick: () => !option.disabled && handleItemClick(option),
+                            onMouseEnter: () => setFocusedIndex(index),
                             role: "option",
-                            "aria-selected": value === option.value,
+                            "aria-selected": multiple && Array.isArray(value) && _includesInstanceProperty(value).call(value, option.value) || value === option.value,
                             "aria-disabled": option.disabled,
                             children: jsxs("label", {
                                 htmlFor: `SelectItem${index}`,
@@ -3540,7 +3708,7 @@ const SelectComponentBase = ({options: options, value: value, onChange: onChange
                                     type: "checkbox",
                                     id: `SelectItem${index}`,
                                     className: "c-checkbox__input c-select__item-input",
-                                    checked: value === option.value,
+                                    checked: multiple && Array.isArray(value) && _includesInstanceProperty(value).call(value, option.value) || value === option.value,
                                     readOnly: !0,
                                     disabled: option.disabled
                                 }), jsx("div", {
@@ -3559,10 +3727,7 @@ const SelectComponentBase = ({options: options, value: value, onChange: onChange
         // Default glass settings for select components
         const defaultGlassProps = {
             displacementScale: 60,
-            blurAmount: 1,
-            saturation: 180,
-            aberrationIntensity: .2,
-            borderRadius: 12,
+            blurAmount: 10,
             mode: "shader"
         }, glassProps = !0 === glass ? defaultGlassProps : {
             ...defaultGlassProps,