@pathscale/ui 1.1.73 → 1.1.75

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,44 @@
   }
 
   .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: color-mix(in srgb, var(--color-base-100) 4%, transparent);
+    border-color: color-mix(in srgb, var(--color-base-content) 9%, transparent);
+    box-shadow: inset 0 1px 0 color-mix(in srgb, white 18%, transparent), inset
+      0 -1px 0 color-mix(in srgb, black 7%, transparent);
+    backdrop-filter: blur(6px) saturate(1.12);
+    -webkit-backdrop-filter: blur(6px) saturate(1.12);
+  }
+
+  .glass-panel--liquid::after {
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    pointer-events: none;
+    content: "";
+  }
+
+  .glass-panel--liquid::after {
+    z-index: 1;
+    padding: 1px;
+    background: color-mix(in srgb, white 34%, 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.34;
+  }
+
+  .glass-panel--liquid > .glass-panel__header-button,
+  .glass-panel--liquid > .glass-panel__content {
+    position: relative;
+    z-index: 2;
   }
 
   .glass-panel--blur-none {
@@ -99,9 +138,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 +168,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

@@ -7,6 +7,7 @@ var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__
 const GlassPanel = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
         "blur",
+        "effect",
         "collapsible",
         "open",
         "defaultOpen",
@@ -28,16 +29,17 @@ const GlassPanel = (props)=>{
     const contentId = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createUniqueId)();
     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 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;
@@ -47,6 +49,9 @@ const GlassPanel = (props)=>{
             get ["data-theme"] () {
                 return local.dataTheme;
             },
+            get ["data-glass-effect"] () {
+                return isLiquid() ? "liquid" : void 0;
+            },
             get style () {
                 return local.style;
             }
@@ -81,6 +86,7 @@ const GlassPanel = (props)=>{
                 (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$4, (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",

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";