@pathscale/ui 1.1.80 → 1.1.82

package/dist/components/glass-panel/GlassPanel.css

@@ -1,115 +1,180 @@
 @layer components {
   .glass-panel {
-    position: relative;
-    border-radius: 0.75rem;
-    transition: all 200ms ease-in-out;
-    background: color-mix(in srgb, var(--color-base-300) 45%, transparent);
-    border: 1px solid
-      color-mix(in srgb, var(--color-base-content) 12%, transparent);
-  }
-
-  .glass-panel--transparent {
-    background: transparent;
-    border-color: transparent;
-  }
-
-  .glass-panel--glow {
-    box-shadow: inset 0 1px 0
-      color-mix(in srgb, var(--color-base-content) 5%, transparent);
-  }
-
-  .glass-panel--liquid {
-    --glass-panel-liquid-bg: color-mix(
+    --glass-panel-blur: var(--glass-blur, 11px);
+    --glass-panel-background: color-mix(
       in oklab,
-      var(--color-base-100) 12%,
+      var(--glass-background-color, white) var(--glass-background-opacity, 38%),
       transparent
     );
-    --glass-panel-liquid-border: color-mix(
+    --glass-panel-border: color-mix(
       in oklab,
-      var(--color-base-content) 14%,
+      var(--glass-border-color, white) var(--glass-border-opacity, 30%),
       transparent
     );
-    --glass-panel-liquid-highlight: color-mix(
+    --glass-panel-highlight: color-mix(
       in oklab,
-      var(--color-base-100) 48%,
+      var(--glass-highlight-color, white) var(--glass-highlight-opacity, 80%),
       transparent
     );
-    --glass-panel-liquid-inner: color-mix(
+    --glass-panel-bottom-highlight: color-mix(
       in oklab,
-      var(--color-base-100) 10%,
+      var(--glass-highlight-color, white)
+        var(--glass-bottom-highlight-opacity, 10%),
       transparent
     );
-    --glass-panel-liquid-brightness: 1.03;
-    --glass-panel-liquid-saturation: 1.18;
-    isolation: isolate;
-    overflow: hidden;
-    background: var(--glass-panel-liquid-bg);
-    border-color: var(--glass-panel-liquid-border);
-    box-shadow:
-      inset 0 0 3px 0 var(--glass-panel-liquid-highlight),
-      inset 0 1px 10px var(--glass-panel-liquid-inner);
-    backdrop-filter: blur(1px) blur(2px)
-      brightness(var(--glass-panel-liquid-brightness, 1.08))
-      saturate(var(--glass-panel-liquid-saturation, 1.35));
-    -webkit-backdrop-filter: blur(1px) blur(2px)
-      brightness(var(--glass-panel-liquid-brightness, 1.08))
-      saturate(var(--glass-panel-liquid-saturation, 1.35));
-  }
-
-  [data-theme="dark"] .glass-panel--liquid,
-  .glass-panel--liquid[data-theme="dark"] {
-    --glass-panel-liquid-bg: color-mix(
+    --glass-panel-edge-highlight: color-mix(
+      in oklab,
+      var(--glass-highlight-color, white)
+        var(--glass-edge-highlight-opacity, 30%),
+      transparent
+    );
+    --glass-panel-depth-sheen: color-mix(
+      in oklab,
+      var(--glass-highlight-color, white) var(--glass-depth-sheen-opacity, 40%),
+      transparent
+    );
+    --glass-panel-rim-start: color-mix(
       in oklab,
-      var(--color-base-200) 22%,
+      var(--glass-rim-start-color, var(--glass-border-color, white))
+        var(--glass-rim-start-opacity, 21%),
       transparent
     );
-    --glass-panel-liquid-border: color-mix(
+    --glass-panel-rim-end: color-mix(
       in oklab,
-      var(--color-base-content) 10%,
+      var(--glass-rim-end-color, var(--glass-highlight-color, white))
+        var(--glass-rim-end-opacity, 35%),
       transparent
     );
-    --glass-panel-liquid-highlight: color-mix(
+    --glass-panel-inner-glow: rgb(
+      var(--glass-inner-glow-rgb, 255 255 255) /
+      var(--glass-inner-glow-alpha, 0.5)
+    );
+    --glass-panel-depth-top-glow: color-mix(
       in oklab,
-      var(--color-base-content) 14%,
+      var(--glass-highlight-color, white)
+        var(--glass-depth-top-glow-opacity, 8%),
       transparent
     );
-    --glass-panel-liquid-inner: color-mix(
+    --glass-panel-depth-bottom-glow: color-mix(
       in oklab,
-      var(--color-base-content) 5%,
+      var(--glass-highlight-color, white)
+        var(--glass-depth-bottom-glow-opacity, 12%),
       transparent
     );
-    --glass-panel-liquid-brightness: 0.98;
-    --glass-panel-liquid-saturation: 1.08;
+    position: relative;
+    isolation: isolate;
+    overflow: hidden;
+    border-radius: var(--glass-border-radius, 20px);
+    transition: background-color 200ms ease-in-out, border-color 200ms
+      ease-in-out, box-shadow 200ms ease-in-out, backdrop-filter 200ms
+      ease-in-out;
+    background: var(--glass-panel-background);
+    border: 1px solid var(--glass-panel-border);
+    box-shadow: var(--glass-shadow-depth, 0 8px 32px rgb(0 0 0 / 10%)), inset 0
+      1px 0 var(--glass-panel-highlight), inset 0 -1px 0
+      var(--glass-panel-bottom-highlight);
+    backdrop-filter: blur(var(--glass-panel-blur));
+    -webkit-backdrop-filter: blur(var(--glass-panel-blur));
+  }
+
+  .glass-panel::before,
+  .glass-panel::after {
+    content: "";
+    position: absolute;
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  .glass-panel::before {
+    top: 0;
+    right: 12%;
+    left: 12%;
+    height: 1px;
+    background: linear-gradient(
+      90deg,
+      transparent,
+      var(--glass-panel-highlight),
+      transparent
+    );
+  }
+
+  .glass-panel::after {
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 1px;
+    background: linear-gradient(
+      180deg,
+      var(--glass-panel-highlight),
+      transparent 45%,
+      var(--glass-panel-edge-highlight)
+    );
+  }
+
+  .glass-panel--transparent {
+    background: transparent;
+    border-color: transparent;
+    box-shadow: none;
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+
+  .glass-panel--transparent::before,
+  .glass-panel--transparent::after,
+  .glass-panel--transparent > .glass-panel__rim,
+  .glass-panel--transparent > .glass-panel__depth,
+  .glass-panel--transparent > .glass-panel__sheen {
+    display: none;
+  }
+
+  .glass-panel--glow {
+    box-shadow: var(--glass-shadow-depth, 0 8px 32px rgb(0 0 0 / 10%)), 0 0 0
+      1px
+      color-mix(
+        in oklab,
+        var(--color-primary) var(--glass-glow-ring-opacity, 10%),
+        transparent
+      ), inset 0 1px 0 var(--glass-panel-highlight), inset 0 -1px 0
+      var(--glass-panel-bottom-highlight);
+  }
+
+  .glass-panel--liquid {
+    backdrop-filter: blur(var(--glass-panel-blur))
+      saturate(var(--glass-saturation, 1.2)) brightness(var(--glass-brightness, 1));
+    -webkit-backdrop-filter: blur(var(--glass-panel-blur))
+      saturate(var(--glass-saturation, 1.2)) brightness(var(--glass-brightness, 1));
+    background-clip: padding-box;
   }
 
   .glass-panel--liquid > .glass-panel__header-button,
   .glass-panel--liquid > .glass-panel__content {
     position: relative;
-    z-index: 1;
+    z-index: 2;
   }
 
   .glass-panel--blur-none {
     backdrop-filter: none;
+    -webkit-backdrop-filter: none;
   }
 
   .glass-panel--blur-sm {
-    backdrop-filter: blur(4px);
+    --glass-panel-blur: calc(var(--glass-blur, 11px) * 0.5);
   }
 
   .glass-panel--blur-md {
-    backdrop-filter: blur(12px);
+    --glass-panel-blur: var(--glass-blur, 11px);
   }
 
   .glass-panel--blur-lg {
-    backdrop-filter: blur(16px);
+    --glass-panel-blur: calc(var(--glass-blur, 11px) * 1.25);
   }
 
   .glass-panel--blur-xl {
-    backdrop-filter: blur(24px);
+    --glass-panel-blur: calc(var(--glass-blur, 11px) * 1.5);
   }
 
   .glass-panel--blur-2xl {
-    backdrop-filter: blur(40px);
+    --glass-panel-blur: calc(var(--glass-blur, 11px) * 2);
   }
 
   .glass-panel--accent-primary,
@@ -161,6 +226,8 @@
   }
 
   .glass-panel__header-button {
+    position: relative;
+    z-index: 2;
     display: flex;
     width: 100%;
     cursor: pointer;
@@ -200,7 +267,64 @@
     transform: rotate(180deg);
   }
 
+  .glass-panel__rim,
+  .glass-panel__depth,
+  .glass-panel__sheen {
+    position: absolute;
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  .glass-panel__rim {
+    inset: 0;
+    border-radius: inherit;
+    padding: 1px;
+    background: linear-gradient(
+      180deg,
+      var(--glass-panel-rim-start) 1%,
+      var(--glass-panel-rim-end) 100%
+    );
+    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+    mask-composite: exclude;
+    -webkit-mask: linear-gradient(#fff 0 0) content-box,
+      linear-gradient(#fff 0 0);
+    -webkit-mask-composite: xor;
+  }
+
+  .glass-panel__depth {
+    inset: 1px;
+    border-radius: max(0px, calc(var(--glass-border-radius, 20px) - 1px));
+    background: radial-gradient(
+      circle at 50% 45%,
+      color-mix(
+          in oklab,
+          var(--glass-highlight-color, white)
+            var(--glass-depth-surface-opacity, 8%),
+          transparent
+        )
+        0%,
+      transparent var(--glass-depth-surface-size, 82%)
+    );
+    box-shadow: inset 0 0 var(--glass-inner-glow-blur, 10px)
+      var(--glass-inner-glow-spread, 5px) var(--glass-panel-inner-glow), inset 0
+      2px 4px 0 var(--glass-panel-depth-top-glow), inset 0 -2px 2px 0
+      var(--glass-panel-depth-bottom-glow);
+  }
+
+  .glass-panel__sheen {
+    inset: 2px;
+    border-radius: max(0px, calc(var(--glass-border-radius, 20px) - 2px));
+    background: radial-gradient(
+      circle at 30% 20%,
+      var(--glass-panel-depth-sheen) 0%,
+      transparent var(--glass-depth-sheen-size, 70%)
+    );
+    mix-blend-mode: overlay;
+  }
+
   .glass-panel__content {
+    position: relative;
+    z-index: 2;
     display: grid;
     transition: grid-template-rows 200ms ease-in-out, opacity 200ms ease-in-out;
   }
@@ -236,4 +360,18 @@
   .glass-panel__content--xl {
     padding: 1.5rem;
   }
+
+  @supports not (
+      (backdrop-filter: blur(1px)) or
+      (-webkit-backdrop-filter: blur(1px))
+    ) {
+    .glass-panel {
+      background: color-mix(
+        in oklab,
+        var(--glass-background-color, white)
+          var(--glass-fallback-background-opacity, 78%),
+        transparent
+      );
+    }
+  }
 }

package/dist/components/glass-panel/GlassPanel.js

@@ -3,135 +3,7 @@ import "./GlassPanel.css";
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
 import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
 import * as __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__ from "./GlassPanel.classes.js";
-var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<button type=button><span></span><svg><path stroke-linecap=round stroke-linejoin=round d="M19 9l-7 7-7-7">'), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><div><div>");
-const LIQUID_DEPTH_RATIO = 0.05;
-const LIQUID_RADIUS_RATIO = 0.08;
-const LIQUID_STRENGTH_RATIO = 0.5;
-const LIQUID_CHROMATIC_ABERRATION_RATIO = 0.025;
-const LIQUID_BLUR = 2;
-const getDisplacementMap = ({ height, width, radius, depth })=>`data:image/svg+xml;utf8,${encodeURIComponent(`<svg height="${height}" width="${width}" viewBox="0 0 ${width} ${height}" xmlns="http://www.w3.org/2000/svg">
-    <style>
-        .mix { mix-blend-mode: screen; }
-    </style>
-    <defs>
-        <linearGradient
-          id="Y"
-          x1="0"
-          x2="0"
-          y1="${Math.ceil(radius / height * 15)}%"
-          y2="${Math.floor(100 - radius / height * 15)}%">
-            <stop offset="0%" stop-color="#0F0" />
-            <stop offset="100%" stop-color="#000" />
-        </linearGradient>
-        <linearGradient
-          id="X"
-          x1="${Math.ceil(radius / width * 15)}%"
-          x2="${Math.floor(100 - radius / width * 15)}%"
-          y1="0"
-          y2="0">
-            <stop offset="0%" stop-color="#F00" />
-            <stop offset="100%" stop-color="#000" />
-        </linearGradient>
-    </defs>
-
-    <rect x="0" y="0" height="${height}" width="${width}" fill="#808080" />
-    <g filter="blur(2px)">
-      <rect x="0" y="0" height="${height}" width="${width}" fill="#000080" />
-      <rect
-          x="0"
-          y="0"
-          height="${height}"
-          width="${width}"
-          fill="url(#Y)"
-          class="mix"
-      />
-      <rect
-          x="0"
-          y="0"
-          height="${height}"
-          width="${width}"
-          fill="url(#X)"
-          class="mix"
-      />
-      <rect
-          x="${depth}"
-          y="${depth}"
-          height="${height - 2 * depth}"
-          width="${width - 2 * depth}"
-          fill="#808080"
-          rx="${radius}"
-          ry="${radius}"
-          filter="blur(${depth}px)"
-      />
-    </g>
-</svg>`)}`;
-const getDisplacementFilter = ({ height, width, radius, depth, strength, chromaticAberration })=>`data:image/svg+xml;utf8,${encodeURIComponent(`<svg height="${height}" width="${width}" viewBox="0 0 ${width} ${height}" xmlns="http://www.w3.org/2000/svg">
-    <defs>
-        <filter id="displace" color-interpolation-filters="sRGB">
-            <feImage x="0" y="0" height="${height}" width="${width}" href="${getDisplacementMap({
-        height,
-        width,
-        radius,
-        depth
-    })}" result="displacementMap" />
-            <feDisplacementMap
-                transform-origin="center"
-                in="SourceGraphic"
-                in2="displacementMap"
-                scale="${strength + 2 * chromaticAberration}"
-                xChannelSelector="R"
-                yChannelSelector="G"
-            />
-            <feColorMatrix
-            type="matrix"
-            values="1 0 0 0 0
-                    0 0 0 0 0
-                    0 0 0 0 0
-                    0 0 0 1 0"
-            result="displacedR"
-                    />
-            <feDisplacementMap
-                in="SourceGraphic"
-                in2="displacementMap"
-                scale="${strength + chromaticAberration}"
-                xChannelSelector="R"
-                yChannelSelector="G"
-            />
-            <feColorMatrix
-            type="matrix"
-            values="0 0 0 0 0
-                    0 1 0 0 0
-                    0 0 0 0 0
-                    0 0 0 1 0"
-            result="displacedG"
-                    />
-            <feDisplacementMap
-                    in="SourceGraphic"
-                    in2="displacementMap"
-                    scale="${strength}"
-                    xChannelSelector="R"
-                    yChannelSelector="G"
-                />
-                <feColorMatrix
-                type="matrix"
-                values="0 0 0 0 0
-                        0 0 0 0 0
-                        0 0 1 0 0
-                        0 0 0 1 0"
-                result="displacedB"
-                        />
-              <feBlend in="displacedR" in2="displacedG" mode="screen"/>
-              <feBlend in2="displacedB" mode="screen"/>
-        </filter>
-    </defs>
-</svg>`)}#displace`;
-const getPx = (value)=>{
-    const parsed = Number.parseFloat(value);
-    return Number.isFinite(parsed) ? parsed : 0;
-};
-const callEventHandler = (handler, event)=>{
-    if ("function" == typeof handler) handler(event);
-};
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<button type=button><span></span><svg><path stroke-linecap=round stroke-linejoin=round d="M19 9l-7 7-7-7">'), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><span class=glass-panel__rim aria-hidden=true></span><span class=glass-panel__depth aria-hidden=true></span><span class=glass-panel__sheen aria-hidden=true></span><div><div>");
 const GlassPanel = (props)=>{
     let rootRef;
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
@@ -156,11 +28,9 @@ const GlassPanel = (props)=>{
         "style"
     ]);
     const contentId = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createUniqueId)();
-    const blur = ()=>local.blur ?? "none";
+    const blur = ()=>local.blur ?? "md";
     const size = ()=>local.size ?? "md";
     const isLiquid = ()=>"liquid" === local.effect;
-    const [geometry, setGeometry] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)();
-    const [pressed, setPressed] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
     const isControlled = ()=>void 0 !== local.open;
     const [internalOpen, setInternalOpen] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(local.defaultOpen ?? true);
     const isOpen = ()=>isControlled() ? true === local.open : internalOpen();
@@ -170,52 +40,22 @@ const GlassPanel = (props)=>{
         if (!isControlled()) setInternalOpen(next);
         local.onToggle?.(next);
     };
-    const syncGeometry = ()=>{
-        if (!rootRef) return;
-        const rect = rootRef.getBoundingClientRect();
-        if (rect.width <= 0 || rect.height <= 0) return;
-        const style = window.getComputedStyle(rootRef);
-        setGeometry({
-            width: Math.round(rect.width),
-            height: Math.round(rect.height),
-            radius: Math.round(getPx(style.borderTopLeftRadius))
-        });
-    };
-    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onMount)(()=>{
-        syncGeometry();
-        if (!rootRef || "undefined" == typeof ResizeObserver) return;
-        const observer = new ResizeObserver(syncGeometry);
-        observer.observe(rootRef);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>observer.disconnect());
-    });
     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
         const element = rootRef;
         if (!element) return;
-        if (!isLiquid()) {
+        if (!isLiquid() || local.transparent) {
             element.style.removeProperty("backdrop-filter");
             element.style.removeProperty("-webkit-backdrop-filter");
             return;
         }
-        const nextGeometry = geometry();
-        if (!nextGeometry) return;
-        const minSide = Math.min(nextGeometry.width, nextGeometry.height);
-        const maxDepth = Math.max(1, Math.floor(minSide / 2) - 1);
-        const depth = Math.min(maxDepth, Math.max(10, Math.round(minSide * LIQUID_DEPTH_RATIO)) / (pressed() ? 0.7 : 1));
-        const filter = getDisplacementFilter({
-            ...nextGeometry,
-            radius: Math.max(nextGeometry.radius, Math.round(minSide * LIQUID_RADIUS_RATIO)),
-            depth,
-            strength: Math.round(minSide * LIQUID_STRENGTH_RATIO),
-            chromaticAberration: Math.round(minSide * LIQUID_CHROMATIC_ABERRATION_RATIO)
-        });
-        const backdropFilter = `blur(${LIQUID_BLUR / 2}px) url('${filter}') blur(${LIQUID_BLUR}px) brightness(var(--glass-panel-liquid-brightness, 1.1)) saturate(var(--glass-panel-liquid-saturation, 1.5))`;
+        const backdropFilter = "blur(var(--glass-panel-blur)) saturate(var(--glass-saturation, 1.2)) brightness(var(--glass-brightness, 1))";
         element.style.backdropFilter = backdropFilter;
         element.style.setProperty("-webkit-backdrop-filter", backdropFilter);
     });
     const containerClasses = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.base, !local.transparent && !isLiquid() && __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.blur[blur()], !local.transparent && isLiquid() && __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.flag.liquid, local.transparent && __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.flag.transparent, local.glow && __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.flag.glow, local.accent && __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.accent[accentKey()], local.class, local.className);
     const contentClasses = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.slot.content, local.collapsible && __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.flag.contentCollapsible, local.collapsible && !isOpen() && __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.flag.contentCollapsed, (!local.collapsible || isOpen()) && !(local.paddingX || local.paddingY) && __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.size[size()], local.paddingX, local.paddingY);
     return (()=>{
-        var _el$ = _tmpl$2(), _el$5 = _el$.firstChild, _el$6 = _el$5.firstChild;
+        var _el$ = _tmpl$2(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.nextSibling, _el$8 = _el$4.nextSibling, _el$9 = _el$8.firstChild;
         var _ref$ = rootRef;
         "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$) : rootRef = _el$;
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
@@ -227,18 +67,6 @@ const GlassPanel = (props)=>{
             get ["data-glass-effect"] () {
                 return isLiquid() ? "liquid" : void 0;
             },
-            onMouseDown: (event)=>{
-                callEventHandler(others.onMouseDown, event);
-                setPressed(true);
-            },
-            onMouseUp: (event)=>{
-                callEventHandler(others.onMouseUp, event);
-                setPressed(false);
-            },
-            onMouseLeave: (event)=>{
-                callEventHandler(others.onMouseLeave, event);
-                setPressed(false);
-            },
             get style () {
                 return local.style;
             }
@@ -248,8 +76,8 @@ const GlassPanel = (props)=>{
                 return local.collapsible && local.title;
             },
             get children () {
-                var _el$2 = _tmpl$(), _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling;
-                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                var _el$5 = _tmpl$(), _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling;
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
                         class: __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.slot.headerButton
                     }), {
                     onClick: handleToggle,
@@ -258,10 +86,10 @@ const GlassPanel = (props)=>{
                     },
                     "aria-controls": contentId
                 }), false, true);
-                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
                         class: __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.slot.headerLabel
                     })), false, true);
-                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
                     get when () {
                         return local.icon;
                     },
@@ -269,8 +97,8 @@ const GlassPanel = (props)=>{
                         return local.icon;
                     }
                 }), null);
-                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, ()=>local.title, null);
-                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$6, ()=>local.title, null);
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$7, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
                         class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.slot.chevron, isOpen() && __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.flag.chevronOpen)
                     }), {
                     "aria-hidden": "true",
@@ -279,11 +107,11 @@ const GlassPanel = (props)=>{
                     stroke: "currentColor",
                     "stroke-width": "1.5"
                 }), true, true);
-                return _el$2;
+                return _el$5;
             }
-        }), _el$5);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$5, "id", contentId);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+        }), _el$8);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$8, "id", contentId);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$8, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
                 class: contentClasses()
             }), {
             get style () {
@@ -293,10 +121,10 @@ const GlassPanel = (props)=>{
                 };
             }
         }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$9, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
                 class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.slot.contentInner, local.collapsible && __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.flag.contentInnerHidden)
             })), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$6, ()=>local.children);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$9, ()=>local.children);
         return _el$;
     })();
 };

package/dist/components/glow-card/GlowCard.css

@@ -1,6 +1,16 @@
 .glow-card {
-  --glow-color-border: oklch(100% 0 0 / 0.3);
-  --glow-color-bg: oklch(100% 0 0 / 0.1);
+  --glow-color-border: color-mix(
+    in oklab,
+    var(--glass-highlight-color, var(--color-base-content))
+      var(--glass-border-opacity, 24%),
+    transparent
+  );
+  --glow-color-bg: color-mix(
+    in oklab,
+    var(--glass-highlight-color, var(--color-base-100))
+      var(--glass-background-opacity, 58%),
+    transparent
+  );
   position: relative;
   border-radius: inherit;
 }
@@ -28,12 +38,8 @@
   );
   z-index: 1;
   inset: -1px;
-  -webkit-mask:
-    linear-gradient(#fff 0 0) content-box,
-    linear-gradient(#fff 0 0);
-  mask:
-    linear-gradient(#fff 0 0) content-box,
-    linear-gradient(#fff 0 0);
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
   -webkit-mask-composite: xor;
   mask-composite: exclude;
   padding: 1px;
@@ -53,14 +59,6 @@
   opacity: 1;
 }
 
-[data-theme="light"] .glow-card::before {
-  --glow-color-border: oklch(30% 0.15 260 / 0.4);
-}
-
-[data-theme="light"] .glow-card::after {
-  --glow-color-bg: oklch(30% 0.15 260 / 0.15);
-}
-
 @media (prefers-reduced-motion: reduce) {
   .glow-card::before,
   .glow-card::after {