@pathscale/ui 1.1.73 → 1.1.74

package/dist/components/glass-panel/GlassPanel.classes.d.ts

@@ -27,6 +27,7 @@ export declare const CLASSES: {
         readonly ghost: "glass-panel--accent-ghost";
     };
     readonly flag: {
+        readonly liquid: "glass-panel--liquid";
         readonly transparent: "glass-panel--transparent";
         readonly glow: "glass-panel--glow";
         readonly contentCollapsed: "glass-panel__content--collapsed";

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

@@ -27,6 +27,7 @@ const CLASSES = {
         ghost: "glass-panel--accent-ghost"
     },
     flag: {
+        liquid: "glass-panel--liquid",
         transparent: "glass-panel--transparent",
         glow: "glass-panel--glow",
         contentCollapsed: "glass-panel__content--collapsed",

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

@@ -1,9 +1,11 @@
 @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);
+    border: 1px solid
+      color-mix(in srgb, var(--color-base-content) 12%, transparent);
   }
 
   .glass-panel--transparent {
@@ -12,7 +14,93 @@
   }
 
   .glass-panel--glow {
-    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-base-content) 5%, transparent);
+    box-shadow: inset 0 1px 0
+      color-mix(in srgb, var(--color-base-content) 5%, transparent);
+  }
+
+  .glass-panel--liquid {
+    overflow: hidden;
+    background: linear-gradient(
+        135deg,
+        color-mix(in srgb, white 18%, transparent),
+        transparent 38%,
+        color-mix(in srgb, white 10%, transparent) 72%,
+        transparent
+      ), color-mix(in srgb, var(--color-base-100) 12%, transparent);
+    border-color: color-mix(in srgb, var(--color-base-content) 12%, transparent);
+    box-shadow: inset 0 1px 0 color-mix(in srgb, white 38%, transparent), inset
+      0 -1px 0 color-mix(in srgb, var(--color-base-content) 5%, transparent);
+    backdrop-filter: var(--glass-panel-liquid-filter) blur(10px) saturate(1.12);
+    -webkit-backdrop-filter: var(--glass-panel-liquid-filter) blur(10px)
+      saturate(1.12);
+  }
+
+  .glass-panel--liquid::before,
+  .glass-panel--liquid::after {
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    pointer-events: none;
+    content: "";
+  }
+
+  .glass-panel--liquid::before {
+    z-index: 1;
+    background: radial-gradient(
+        circle at 18% 0%,
+        color-mix(in srgb, white 32%, transparent),
+        transparent 38%
+      ),
+      linear-gradient(
+        120deg,
+        color-mix(in srgb, white 20%, transparent),
+        transparent 22% 78%,
+        color-mix(in srgb, white 8%, transparent)
+      );
+    mix-blend-mode: screen;
+    opacity: 0.32;
+  }
+
+  .glass-panel--liquid::after {
+    z-index: 2;
+    padding: 1px;
+    background: linear-gradient(
+        145deg,
+        color-mix(in srgb, white 80%, transparent),
+        transparent 24% 72%,
+        color-mix(in srgb, var(--color-base-content) 9%, transparent)
+      )
+      border-box;
+    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+    mask-composite: exclude;
+    -webkit-mask: linear-gradient(#000 0 0) content-box,
+      linear-gradient(#000 0 0);
+    -webkit-mask-composite: xor;
+    opacity: 0.5;
+  }
+
+  .glass-panel--liquid > .glass-panel__header-button,
+  .glass-panel--liquid > .glass-panel__content {
+    position: relative;
+    z-index: 3;
+  }
+
+  .glass-panel__liquid-filter {
+    position: absolute;
+    width: 0;
+    height: 0;
+    overflow: hidden;
+    pointer-events: none;
+  }
+
+  @supports not (
+      (backdrop-filter: url("#liquid-glass-filter")) or
+      (-webkit-backdrop-filter: url("#liquid-glass-filter"))
+    ) {
+    .glass-panel--liquid {
+      backdrop-filter: blur(10px) saturate(1.12);
+      -webkit-backdrop-filter: blur(10px) saturate(1.12);
+    }
   }
 
   .glass-panel--blur-none {
@@ -99,9 +187,7 @@
     color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
     font-size: 0.875rem;
     font-weight: 500;
-    transition:
-      color 150ms ease,
-      background-color 150ms ease;
+    transition: color 150ms ease, background-color 150ms ease;
   }
 
   .glass-panel__header-button:hover {
@@ -131,9 +217,7 @@
 
   .glass-panel__content {
     display: grid;
-    transition:
-      grid-template-rows 200ms ease-in-out,
-      opacity 200ms ease-in-out;
+    transition: grid-template-rows 200ms ease-in-out, opacity 200ms ease-in-out;
   }
 
   .glass-panel__content--collapsible {

package/dist/components/glass-panel/GlassPanel.d.ts

@@ -1,9 +1,11 @@
 import "./GlassPanel.css";
 import { type JSX } from "solid-js";
-import type { IComponentBaseProps, ComponentSize, ComponentColor } from "../types";
+import type { ComponentColor, ComponentSize, IComponentBaseProps } from "../types";
 export type GlassPanelBlur = "none" | "sm" | "md" | "lg" | "xl" | "2xl";
+export type GlassPanelEffect = "default" | "liquid";
 export type GlassPanelProps = IComponentBaseProps & JSX.HTMLAttributes<HTMLDivElement> & {
     blur?: GlassPanelBlur;
+    effect?: GlassPanelEffect;
     collapsible?: boolean;
     open?: boolean;
     defaultOpen?: boolean;

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

@@ -3,10 +3,11 @@ 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>");
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg class=glass-panel__liquid-filter aria-hidden=true><defs><filter x=-12% y=-12% width=124% height=124% color-interpolation-filters=sRGB><feImage href=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cdefs%3E%3ClinearGradient id='left' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='rgb(56,128,128)'/%3E%3Cstop offset='1' stop-color='rgb(128,128,128)'/%3E%3C/linearGradient%3E%3ClinearGradient id='right' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='rgb(128,128,128)'/%3E%3Cstop offset='1' stop-color='rgb(200,128,128)'/%3E%3C/linearGradient%3E%3ClinearGradient id='top' y1='0' y2='1'%3E%3Cstop offset='0' stop-color='rgb(128,56,128)'/%3E%3Cstop offset='1' stop-color='rgb(128,128,128)'/%3E%3C/linearGradient%3E%3ClinearGradient id='bottom' y1='0' y2='1'%3E%3Cstop offset='0' stop-color='rgb(128,128,128)'/%3E%3Cstop offset='1' stop-color='rgb(128,200,128)'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='512' height='512' fill='rgb(128,128,128)'/%3E%3Crect width='96' height='512' fill='url(%23left)'/%3E%3Crect x='416' width='96' height='512' fill='url(%23right)'/%3E%3Crect width='512' height='96' fill='url(%23top)' opacity='.72'/%3E%3Crect y='416' width='512' height='96' fill='url(%23bottom)' opacity='.72'/%3E%3C/svg%3E\"x=0 y=0 width=100% height=100% preserveAspectRatio=none result=displacement-map></feImage><feDisplacementMap in=SourceGraphic in2=displacement-map scale=14 xChannelSelector=R yChannelSelector=G result=refracted></feDisplacementMap><feColorMatrix in=refracted type=saturate values=1.16>"), _tmpl$2 = /*#__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$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><div><div>");
 const GlassPanel = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
         "blur",
+        "effect",
         "collapsible",
         "open",
         "defaultOpen",
@@ -26,38 +27,63 @@ const GlassPanel = (props)=>{
         "style"
     ]);
     const contentId = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createUniqueId)();
+    const liquidFilterId = `glass-panel-liquid-${(0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createUniqueId)().replace(/[^a-zA-Z0-9_-]/g, "")}`;
     const blur = ()=>local.blur ?? "none";
     const size = ()=>local.size ?? "md";
+    const isLiquid = ()=>"liquid" === local.effect;
     const isControlled = ()=>void 0 !== local.open;
     const [internalOpen, setInternalOpen] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(local.defaultOpen ?? true);
-    const isOpen = ()=>isControlled() ? local.open : internalOpen();
+    const isOpen = ()=>isControlled() ? true === local.open : internalOpen();
     const accentKey = ()=>local.accent ?? "ghost";
     const handleToggle = ()=>{
         const next = !isOpen();
         if (!isControlled()) setInternalOpen(next);
         local.onToggle?.(next);
     };
-    const containerClasses = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.base, !local.transparent && __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.blur[blur()], 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 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 containerStyle = ()=>{
+        if (!isLiquid()) return local.style;
+        const liquidBackdropFilter = `url(#${liquidFilterId}) blur(12px) saturate(1.22)`;
+        return Object.assign({}, "object" == typeof local.style ? local.style : void 0, {
+            "--glass-panel-liquid-filter": `url(#${liquidFilterId})`,
+            "-webkit-backdrop-filter": liquidBackdropFilter,
+            "backdrop-filter": liquidBackdropFilter
+        });
+    };
     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$3(), _el$9 = _el$.firstChild, _el$0 = _el$9.firstChild;
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
                 class: containerClasses()
             }), {
             get ["data-theme"] () {
                 return local.dataTheme;
             },
+            get ["data-glass-effect"] () {
+                return isLiquid() ? "liquid" : void 0;
+            },
             get style () {
-                return local.style;
+                return containerStyle();
             }
         }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+            get when () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!local.transparent)() && isLiquid();
+            },
+            get children () {
+                var _el$2 = _tmpl$(), _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild;
+                _el$4.firstChild;
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$4, "id", liquidFilterId);
+                return _el$2;
+            }
+        }), _el$9);
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
             get when () {
                 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$6 = _tmpl$2(), _el$7 = _el$6.firstChild, _el$8 = _el$7.nextSibling;
+                (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.headerButton
                     }), {
                     onClick: handleToggle,
@@ -66,10 +92,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$7, (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$7, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
                     get when () {
                         return local.icon;
                     },
@@ -77,20 +103,21 @@ 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$7, ()=>local.title, null);
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$8, (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",
                     fill: "none",
                     viewBox: "0 0 24 24",
                     stroke: "currentColor",
                     "stroke-width": "1.5"
                 }), true, true);
-                return _el$2;
+                return _el$6;
             }
-        }), _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$9);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$9, "id", contentId);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$9, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
                 class: contentClasses()
             }), {
             get style () {
@@ -100,10 +127,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$0, (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$0, ()=>local.children);
         return _el$;
     })();
 };

package/dist/components/glass-panel/index.d.ts

@@ -1 +1 @@
-export { default, type GlassPanelProps, type GlassPanelBlur } from "./GlassPanel";
+export { default, type GlassPanelBlur, type GlassPanelEffect, type GlassPanelProps, } from "./GlassPanel";