@pathscale/ui 1.2.1 → 1.2.2

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

@@ -0,0 +1,24 @@
+export declare const CLASSES: {
+    readonly base: "glass-panel";
+    readonly size: {
+        readonly xs: "glass-panel__content--xs";
+        readonly sm: "glass-panel__content--sm";
+        readonly md: "glass-panel__content--md";
+        readonly lg: "glass-panel__content--lg";
+        readonly xl: "glass-panel__content--xl";
+    };
+    readonly flag: {
+        readonly transparent: "glass-panel--transparent";
+        readonly contentCollapsed: "glass-panel__content--collapsed";
+        readonly contentCollapsible: "glass-panel__content--collapsible";
+        readonly contentInnerHidden: "glass-panel__content-inner--hidden";
+        readonly chevronOpen: "glass-panel__chevron--open";
+    };
+    readonly slot: {
+        readonly headerButton: "glass-panel__header-button";
+        readonly headerLabel: "glass-panel__header-label";
+        readonly chevron: "glass-panel__chevron";
+        readonly content: "glass-panel__content";
+        readonly contentInner: "glass-panel__content-inner";
+    };
+};

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

@@ -0,0 +1,25 @@
+const CLASSES = {
+    base: "glass-panel",
+    size: {
+        xs: "glass-panel__content--xs",
+        sm: "glass-panel__content--sm",
+        md: "glass-panel__content--md",
+        lg: "glass-panel__content--lg",
+        xl: "glass-panel__content--xl"
+    },
+    flag: {
+        transparent: "glass-panel--transparent",
+        contentCollapsed: "glass-panel__content--collapsed",
+        contentCollapsible: "glass-panel__content--collapsible",
+        contentInnerHidden: "glass-panel__content-inner--hidden",
+        chevronOpen: "glass-panel__chevron--open"
+    },
+    slot: {
+        headerButton: "glass-panel__header-button",
+        headerLabel: "glass-panel__header-label",
+        chevron: "glass-panel__chevron",
+        content: "glass-panel__content",
+        contentInner: "glass-panel__content-inner"
+    }
+};
+export { CLASSES };

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

@@ -0,0 +1,286 @@
+@layer components {
+  .glass-panel {
+    --glass-panel-blur: var(--glass-blur, 11px);
+    --glass-panel-background: color-mix(
+      in oklab,
+      var(--glass-background-color, white) var(--glass-background-opacity, 38%),
+      transparent
+    );
+    --glass-panel-border: color-mix(
+      in oklab,
+      var(--glass-border-color, white) var(--glass-border-opacity, 30%),
+      transparent
+    );
+    --glass-panel-highlight: color-mix(
+      in oklab,
+      var(--glass-highlight-color, white) var(--glass-highlight-opacity, 80%),
+      transparent
+    );
+    --glass-panel-bottom-highlight: color-mix(
+      in oklab,
+      var(--glass-highlight-color, white)
+        var(--glass-bottom-highlight-opacity, 10%),
+      transparent
+    );
+    --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(--glass-rim-start-color, var(--glass-border-color, white))
+        var(--glass-rim-start-opacity, 21%),
+      transparent
+    );
+    --glass-panel-rim-end: color-mix(
+      in oklab,
+      var(--glass-rim-end-color, var(--glass-highlight-color, white))
+        var(--glass-rim-end-opacity, 35%),
+      transparent
+    );
+    --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(--glass-highlight-color, white)
+        var(--glass-depth-top-glow-opacity, 8%),
+      transparent
+    );
+    --glass-panel-depth-bottom-glow: color-mix(
+      in oklab,
+      var(--glass-highlight-color, white)
+        var(--glass-depth-bottom-glow-opacity, 12%),
+      transparent
+    );
+    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))
+      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 > .glass-panel__header-button,
+  .glass-panel > .glass-panel__content {
+    position: relative;
+    z-index: 2;
+  }
+
+  .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__header-button {
+    display: flex;
+    width: 100%;
+    cursor: pointer;
+    user-select: none;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+    padding: 0.75rem 1rem;
+    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;
+  }
+
+  .glass-panel__header-button:hover {
+    color: color-mix(in oklab, var(--color-base-content) 80%, transparent);
+  }
+
+  .glass-panel__header-button:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+  }
+
+  .glass-panel__header-label {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .glass-panel__chevron {
+    width: 1rem;
+    height: 1rem;
+    transition: transform 200ms ease;
+  }
+
+  .glass-panel__chevron--open {
+    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 {
+    display: grid;
+    transition: grid-template-rows 200ms ease-in-out, opacity 200ms ease-in-out;
+  }
+
+  .glass-panel__content--collapsible {
+    overflow: hidden;
+  }
+
+  .glass-panel__content--collapsed {
+    opacity: 0;
+  }
+
+  .glass-panel__content-inner--hidden {
+    overflow: hidden;
+  }
+
+  .glass-panel__content--xs {
+    padding: 0.5rem;
+  }
+
+  .glass-panel__content--sm {
+    padding: 0.75rem;
+  }
+
+  .glass-panel__content--md {
+    padding: 1rem;
+  }
+
+  .glass-panel__content--lg {
+    padding: 1.25rem;
+  }
+
+  .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.d.ts

@@ -1,8 +1,7 @@
+import "./GlassPanel.css";
 import { type JSX } from "solid-js";
-import type { IComponentBaseProps, ComponentSize, ComponentColor } from "../types";
-export type GlassPanelBlur = "none" | "sm" | "md" | "lg" | "xl" | "2xl";
+import type { ComponentSize, IComponentBaseProps } from "../types";
 export type GlassPanelProps = IComponentBaseProps & JSX.HTMLAttributes<HTMLDivElement> & {
-    blur?: GlassPanelBlur;
     collapsible?: boolean;
     open?: boolean;
     defaultOpen?: boolean;
@@ -11,8 +10,6 @@ export type GlassPanelProps = IComponentBaseProps & JSX.HTMLAttributes<HTMLDivEl
     icon?: JSX.Element;
     size?: ComponentSize;
     transparent?: boolean;
-    glow?: boolean;
-    accent?: ComponentColor;
     paddingX?: string;
     paddingY?: string;
 };

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

@@ -1,37 +1,11 @@
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+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_clsx__ from "clsx";
-var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<button type=button class="flex w-full items-center justify-between gap-2 px-4 py-3 text-sm font-medium cursor-pointer select-none transition-colors duration-150 text-base-content/50 hover:text-base-content/80 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><span class="flex items-center gap-2"></span><svg fill=none viewBox="0 0 24 24"stroke=currentColor stroke-width=1.5><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 class=overflow-hidden>");
-const BLUR_MAP = {
-    none: "",
-    sm: "backdrop-blur-sm",
-    md: "backdrop-blur-md",
-    lg: "backdrop-blur-lg",
-    xl: "backdrop-blur-xl",
-    "2xl": "backdrop-blur-2xl"
-};
-const SIZE_PADDING = {
-    xs: "p-2",
-    sm: "p-3",
-    md: "p-4",
-    lg: "p-5",
-    xl: "p-6"
-};
-const ACCENT_BORDER = {
-    primary: "border-l-primary",
-    secondary: "border-l-secondary",
-    accent: "border-l-accent",
-    info: "border-l-info",
-    success: "border-l-success",
-    warning: "border-l-warning",
-    error: "border-l-error",
-    neutral: "border-l-neutral",
-    ghost: "border-l-transparent"
-};
+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><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)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
-        "blur",
         "collapsible",
         "open",
         "defaultOpen",
@@ -40,8 +14,6 @@ const GlassPanel = (props)=>{
         "icon",
         "size",
         "transparent",
-        "glow",
-        "accent",
         "paddingX",
         "paddingY",
         "children",
@@ -51,45 +23,27 @@ const GlassPanel = (props)=>{
         "style"
     ]);
     const contentId = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createUniqueId)();
-    const blur = ()=>local.blur ?? "none";
     const size = ()=>local.size ?? "md";
     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 handleToggle = ()=>{
         const next = !isOpen();
         if (!isControlled()) setInternalOpen(next);
         local.onToggle?.(next);
     };
-    const containerClasses = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("glass-panel", "rounded-xl", "transition-all duration-200 ease-in-out", (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)({
-            "bg-transparent": local.transparent,
-            [BLUR_MAP[blur()]]: !local.transparent && "none" !== blur(),
-            "border-l-2": !!local.accent,
-            [ACCENT_BORDER[local.accent ?? ""]]: !!local.accent
-        }), local.class, local.className);
-    const glassStyle = ()=>{
-        const base = {
-            ...local.style || {}
-        };
-        if (!local.transparent) {
-            base.background = "color-mix(in srgb, var(--color-base-200) 85%, transparent)";
-            base.border = "1px solid color-mix(in srgb, var(--color-base-content) 8%, transparent)";
-        }
-        if (local.glow) base["box-shadow"] = "inset 0 1px 0 color-mix(in srgb, var(--color-base-content) 5%, transparent)";
-        return base;
-    };
-    const contentClasses = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(local.paddingX || local.paddingY ? "" : SIZE_PADDING[size()], local.paddingX, local.paddingY);
+    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.flag.transparent, 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;
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            get ["class"] () {
-                return containerClasses();
-            },
+        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;
+        (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 style () {
-                return glassStyle();
+                return local.style;
             }
         }), 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, {
@@ -97,10 +51,20 @@ const GlassPanel = (props)=>{
                 return local.collapsible && local.title;
             },
             get children () {
-                var _el$2 = _tmpl$(), _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling;
-                _el$2.$$click = handleToggle;
-                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$2, "aria-controls", contentId);
-                (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, {
+                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,
+                    get ["aria-expanded"] () {
+                        return isOpen();
+                    },
+                    "aria-controls": contentId
+                }), false, true);
+                (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$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
                     get when () {
                         return local.icon;
                     },
@@ -108,39 +72,36 @@ 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__.effect)((_p$)=>{
-                    var _v$ = isOpen(), _v$2 = (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("h-4 w-4 transition-transform duration-200", (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)({
-                        "rotate-180": isOpen()
-                    }));
-                    _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$2, "aria-expanded", _p$.e = _v$);
-                    _v$2 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$4, "class", _p$.t = _v$2);
-                    return _p$;
-                }, {
-                    e: void 0,
-                    t: void 0
-                });
-                return _el$2;
+                (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",
+                    fill: "none",
+                    viewBox: "0 0 24 24",
+                    stroke: "currentColor",
+                    "stroke-width": "1.5"
+                }), true, true);
+                return _el$5;
+            }
+        }), _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 () {
+                return {
+                    "grid-template-rows": !local.collapsible || isOpen() ? "1fr" : "0fr",
+                    opacity: !local.collapsible || isOpen() ? "1" : "0"
+                };
             }
-        }), _el$5);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$5, "id", contentId);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$6, ()=>local.children);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
-            var _v$3 = `grid transition-[grid-template-rows,opacity] duration-200 ease-in-out overflow-hidden ${local.collapsible && !isOpen() ? "" : contentClasses()}`, _v$4 = !local.collapsible || isOpen() ? "1fr" : "0fr", _v$5 = !local.collapsible || isOpen() ? "1" : "0";
-            _v$3 !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$5, _p$.e = _v$3);
-            _v$4 !== _p$.t && (null != (_p$.t = _v$4) ? _el$5.style.setProperty("grid-template-rows", _v$4) : _el$5.style.removeProperty("grid-template-rows"));
-            _v$5 !== _p$.a && (null != (_p$.a = _v$5) ? _el$5.style.setProperty("opacity", _v$5) : _el$5.style.removeProperty("opacity"));
-            return _p$;
-        }, {
-            e: void 0,
-            t: void 0,
-            a: void 0
-        });
+        }), false, true);
+        (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$9, ()=>local.children);
         return _el$;
     })();
 };
 const glass_panel_GlassPanel = GlassPanel;
-(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.delegateEvents)([
-    "click"
-]);
 export { glass_panel_GlassPanel as default };

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

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

package/dist/components/glow-card/GlowCard.classes.d.ts

@@ -0,0 +1,4 @@
+export declare const CLASSES: {
+    readonly base: "glow-card";
+    readonly isolate: "glow-card--isolate";
+};

package/dist/components/glow-card/GlowCard.classes.js

@@ -0,0 +1,5 @@
+const CLASSES = {
+    base: "glow-card",
+    isolate: "glow-card--isolate"
+};
+export { CLASSES };