@pathscale/ui 2.5.0 → 2.6.0

package/dist/components/toast/Toast.recipe.d.ts

@@ -65,7 +65,7 @@ export declare const CLASSES: {
         readonly icon: "toast__close-icon";
     };
 };
-export declare const componentRecipe: import("solid-layouts").Recipe<{
+export declare const componentRecipe: import("solid-layouts/solid-2").Recipe<{
     readonly component: "toast";
     readonly slots: {
         readonly root: {};

package/dist/components/toolbar/Toolbar.generated.d.ts

@@ -1,6 +1,6 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./Toolbar.css";
-import { type JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import type { UIBaseProps } from "../vocabulary";
 export type ToolbarOrientation = "horizontal" | "vertical";
 export type ToolbarRootProps = UIBaseProps & JSX.HTMLAttributes<HTMLDivElement> & {

package/dist/components/toolbar/Toolbar.generated.js

@@ -1,8 +1,8 @@
-import { insert, mergeProps, spread, template, use } from "solid-js/web";
-import { defineComponent } from "solid-layouts/application-boundary";
+import { insert, mergeProps, ref, spread, template } from "@solidjs/web";
+import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./Toolbar.css";
-import { splitProps } from "solid-js";
-import { twMerge } from "tailwind-merge";
+import { omit } from "solid-js";
+import { twMerge } from "../../lib/twMerge.js";
 import { CLASSES, componentRecipe } from "./Toolbar.recipe.js";
 var _tmpl$ = /*#__PURE__*/ template("<div>");
 const FOCUSABLE_SELECTOR = 'button:not([disabled]), a[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), [contenteditable="true"]';
@@ -18,21 +18,11 @@ const isTypingContext = (target)=>{
 };
 const getFocusableElements = (root)=>Array.from(root.querySelectorAll(FOCUSABLE_SELECTOR)).filter(isFocusableElement);
 const __solidLayoutToolbarRoot = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme",
-        "style",
-        "orientation",
-        "isAttached",
-        "onKeyDown",
-        "role",
-        "ref"
-    ]);
+    const others = omit(p, "children", "class", "dataTheme", "style", "orientation", "isAttached", "onKeyDown", "role", "ref");
     let rootRef;
-    const orientation = ()=>local.orientation ?? "horizontal";
+    const orientation = ()=>p.orientation ?? "horizontal";
     const handleKeyDown = (event)=>{
-        if ("function" == typeof local.onKeyDown) local.onKeyDown(event);
+        if ("function" == typeof p.onKeyDown) p.onKeyDown(event);
         if (event.defaultPrevented) return;
         if (isTypingContext(event.target)) return;
         const currentRoot = rootRef;
@@ -58,36 +48,34 @@ const __solidLayoutToolbarRoot = (_stable, p)=>{
         event.preventDefault();
         focusable[nextIndex]?.focus();
     };
-    return (()=>{
-        var _el$ = _tmpl$();
-        use((el)=>{
+    var _el$ = _tmpl$();
+    ref(()=>(el)=>{
             rootRef = el;
-            if ("function" == typeof local.ref) local.ref(el);
+            if ("function" == typeof p.ref) p.ref(el);
         }, _el$);
-        spread(_el$, mergeProps(others, {
-            get role () {
-                return local.role ?? "toolbar";
-            },
-            get ["aria-orientation"] () {
-                return orientation();
-            },
-            "data-slot": "toolbar",
-            get ["data-orientation"] () {
-                return orientation();
-            },
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            },
-            onKeyDown: handleKeyDown
-        }, ()=>({
-                class: twMerge(CLASSES.base, CLASSES.orientation[orientation()], local.isAttached && CLASSES.flag.attached, local.class)
-            })), false, true);
-        insert(_el$, ()=>local.children);
-        return _el$;
-    })();
+    spread(_el$, mergeProps(others, {
+        get role () {
+            return p.role ?? "toolbar";
+        },
+        get ["aria-orientation"] () {
+            return orientation();
+        },
+        "data-slot": "toolbar",
+        get ["data-orientation"] () {
+            return orientation();
+        },
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        get style () {
+            return p.style;
+        },
+        onKeyDown: handleKeyDown
+    }, ()=>({
+            class: twMerge(CLASSES.base, CLASSES.orientation[orientation()], p.isAttached && CLASSES.flag.attached, p.class)
+        })), true);
+    insert(_el$, ()=>p.children);
+    return _el$;
 };
 const ToolbarRoot = defineComponent({
     recipe: componentRecipe,

package/dist/components/toolbar/Toolbar.recipe.d.ts

@@ -8,7 +8,7 @@ export declare const CLASSES: {
         readonly attached: "toolbar--attached";
     };
 };
-export declare const componentRecipe: import("solid-layouts").Recipe<{
+export declare const componentRecipe: import("solid-layouts/solid-2").Recipe<{
     readonly component: "toolbar";
     readonly slots: {
         readonly root: {};

package/dist/components/tooltip/Tooltip.generated.d.ts

@@ -1,6 +1,6 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./Tooltip.css";
-import { type JSX } from "solid-js";
+import { type JSX } from "@solidjs/web";
 import { type OverlayPlacement } from "../_shared/overlayPosition";
 import type { UIBaseProps } from "../vocabulary";
 export type TooltipPlacement = OverlayPlacement;

package/dist/components/tooltip/Tooltip.generated.js

@@ -1,11 +1,11 @@
-import { Portal, createComponent, insert, mergeProps, spread, template, use } from "solid-js/web";
-import { defineComponent } from "solid-layouts/application-boundary";
+import { Portal, createComponent, insert, mergeProps, ref, spread, template } from "@solidjs/web";
+import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./Tooltip.css";
-import { Show, createContext, createEffect, createSignal, onCleanup, splitProps, useContext } from "solid-js";
-import { twMerge } from "tailwind-merge";
+import { Show, createContext, createEffect, createSignal, omit, onCleanup, useContext } from "solid-js";
+import { twMerge } from "../../lib/twMerge.js";
 import { createOverlayPosition } from "../_shared/overlayPosition.js";
 import { CLASSES, componentRecipe } from "./Tooltip.recipe.js";
-var _tmpl$ = /*#__PURE__*/ template("<span>"), _tmpl$2 = /*#__PURE__*/ template("<div>"), _tmpl$3 = /*#__PURE__*/ template('<svg aria-hidden=true data-slot=tooltip-arrow-svg height=12 viewBox="0 0 12 12"width=12 xmlns=http://www.w3.org/2000/svg><path d="M0 0C5.48483 8 6.5 8 12 0Z"fill=currentColor>');
+var _tmpl$ = /*#__PURE__*/ template("<span>"), _tmpl$2 = /*#__PURE__*/ template("<div>"), _tmpl$3 = /*#__PURE__*/ template('<svg aria-hidden=true data-slot=tooltip-arrow-svg height=12 viewBox="0 0 12 12"width=12><path d="M0 0C5.48483 8 6.5 8 12 0Z"fill=currentColor>');
 const TooltipContext = createContext();
 const useTooltipContext = ()=>{
     const ctx = useContext(TooltipContext);
@@ -13,42 +13,28 @@ const useTooltipContext = ()=>{
     return ctx;
 };
 const __solidLayoutTooltipRoot = (_stable, p)=>{
-    const [local, _others] = splitProps(p, [
-        "children",
-        "placement",
-        "autoFlip",
-        "sideOffset",
-        "showArrow",
-        "delay",
-        "closeDelay",
-        "open",
-        "defaultOpen",
-        "onOpenChange",
-        "dataTheme",
-        "class",
-        "style"
-    ]);
-    const [internalOpen, setInternalOpen] = createSignal(Boolean(local.defaultOpen));
+    omit(p, "children", "placement", "autoFlip", "sideOffset", "showArrow", "delay", "closeDelay", "open", "defaultOpen", "onOpenChange", "dataTheme", "class", "style");
+    const [internalOpen, setInternalOpen] = createSignal(Boolean(p.defaultOpen));
     const [triggerRef, setTriggerRef] = createSignal();
     const [contentRef, setContentRef] = createSignal();
-    const [resolvedPlacement, setResolvedPlacement] = createSignal(local.placement ?? "top");
+    const [resolvedPlacement, setResolvedPlacement] = createSignal(p.placement ?? "top");
     let delayTimer;
     let closeTimer;
-    const isControlled = ()=>void 0 !== local.open;
-    const isOpen = ()=>isControlled() ? Boolean(local.open) : internalOpen();
+    const isControlled = ()=>void 0 !== p.open;
+    const isOpen = ()=>isControlled() ? Boolean(p.open) : internalOpen();
     const setIsOpen = (v)=>{
         if (!isControlled()) setInternalOpen(v);
-        local.onOpenChange?.(v);
+        p.onOpenChange?.(v);
     };
     const openTooltip = ()=>{
         clearTimeout(closeTimer);
         clearTimeout(delayTimer);
-        delayTimer = setTimeout(()=>setIsOpen(true), local.delay ?? 0);
+        delayTimer = setTimeout(()=>setIsOpen(true), p.delay ?? 0);
     };
     const closeTooltip = ()=>{
         clearTimeout(delayTimer);
         clearTimeout(closeTimer);
-        closeTimer = setTimeout(()=>setIsOpen(false), local.closeDelay ?? 100);
+        closeTimer = setTimeout(()=>setIsOpen(false), p.closeDelay ?? 100);
     };
     onCleanup(()=>{
         clearTimeout(delayTimer);
@@ -59,34 +45,34 @@ const __solidLayoutTooltipRoot = (_stable, p)=>{
         setIsOpen,
         openTooltip,
         closeTooltip,
-        preferredPlacement: ()=>local.placement ?? "top",
+        preferredPlacement: ()=>p.placement ?? "top",
         placement: ()=>resolvedPlacement(),
         setPlacement: setResolvedPlacement,
-        autoFlip: ()=>local.autoFlip ?? true,
-        sideOffset: ()=>local.sideOffset ?? 12,
-        showArrow: ()=>Boolean(local.showArrow),
+        autoFlip: ()=>p.autoFlip ?? true,
+        sideOffset: ()=>p.sideOffset ?? 12,
+        showArrow: ()=>Boolean(p.showArrow),
         triggerRef,
         setTriggerRef,
         contentRef,
         setContentRef,
-        dataTheme: ()=>local.dataTheme
+        dataTheme: ()=>p.dataTheme
     };
-    return createComponent(TooltipContext.Provider, {
+    return createComponent(TooltipContext, {
         value: ctx,
         get children () {
             var _el$ = _tmpl$();
             spread(_el$, mergeProps(()=>({
-                    class: twMerge(CLASSES.base, local.class)
+                    class: twMerge(CLASSES.base, p.class)
                 }), {
                 "data-slot": "tooltip-root",
                 get ["data-theme"] () {
-                    return local.dataTheme;
+                    return p.dataTheme;
                 },
                 get style () {
-                    return local.style;
+                    return p.style;
                 }
-            }), false, true);
-            insert(_el$, ()=>local.children);
+            }), true);
+            insert(_el$, ()=>p.children);
             return _el$;
         }
     });
@@ -97,54 +83,43 @@ const TooltipRoot = defineComponent({
     embedded: true
 });
 const __solidLayoutTooltipTrigger = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme",
-        "style",
-        "onMouseEnter",
-        "onMouseLeave",
-        "onFocusIn",
-        "onFocusOut"
-    ]);
+    const others = omit(p, "children", "class", "dataTheme", "style", "onMouseEnter", "onMouseLeave", "onFocusIn", "onFocusOut");
     const ctx = useTooltipContext();
     const handleMouseEnter = (e)=>{
         ctx.openTooltip();
-        if ("function" == typeof local.onMouseEnter) local.onMouseEnter(e);
+        if ("function" == typeof p.onMouseEnter) p.onMouseEnter(e);
     };
     const handleMouseLeave = (e)=>{
         ctx.closeTooltip();
-        if ("function" == typeof local.onMouseLeave) local.onMouseLeave(e);
+        if ("function" == typeof p.onMouseLeave) p.onMouseLeave(e);
     };
     const handleFocusIn = (e)=>{
         ctx.openTooltip();
-        if ("function" == typeof local.onFocusIn) local.onFocusIn(e);
+        if ("function" == typeof p.onFocusIn) p.onFocusIn(e);
     };
     const handleFocusOut = (e)=>{
         ctx.setIsOpen(false);
-        if ("function" == typeof local.onFocusOut) local.onFocusOut(e);
+        if ("function" == typeof p.onFocusOut) p.onFocusOut(e);
     };
-    return (()=>{
-        var _el$2 = _tmpl$2();
-        use((el)=>ctx.setTriggerRef(el), _el$2);
-        spread(_el$2, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.slot.trigger, local.class)
-            }), {
-            "data-slot": "tooltip-trigger",
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            },
-            onMouseEnter: handleMouseEnter,
-            onMouseLeave: handleMouseLeave,
-            onFocusIn: handleFocusIn,
-            onFocusOut: handleFocusOut
-        }), false, true);
-        insert(_el$2, ()=>local.children);
-        return _el$2;
-    })();
+    var _el$2 = _tmpl$2();
+    ref(()=>(el)=>ctx.setTriggerRef(el), _el$2);
+    spread(_el$2, mergeProps(others, ()=>({
+            class: twMerge(CLASSES.slot.trigger, p.class)
+        }), {
+        "data-slot": "tooltip-trigger",
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        get style () {
+            return p.style;
+        },
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        onFocusIn: handleFocusIn,
+        onFocusOut: handleFocusOut
+    }), true);
+    insert(_el$2, ()=>p.children);
+    return _el$2;
 };
 const TooltipTrigger = defineComponent({
     recipe: componentRecipe,
@@ -152,14 +127,7 @@ const TooltipTrigger = defineComponent({
     embedded: true
 });
 const __solidLayoutTooltipContent = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme",
-        "style",
-        "onMouseEnter",
-        "onMouseLeave"
-    ]);
+    const others = omit(p, "children", "class", "dataTheme", "style", "onMouseEnter", "onMouseLeave");
     const ctx = useTooltipContext();
     const overlayPosition = createOverlayPosition({
         open: ctx.isOpen,
@@ -175,22 +143,22 @@ const __solidLayoutTooltipContent = (_stable, p)=>{
     });
     const style = ()=>{
         const overlayStyle = overlayPosition.style();
-        if ("string" == typeof local.style) return [
-            local.style,
+        if ("string" == typeof p.style) return [
+            p.style,
             Object.entries(overlayStyle).map(([key, value])=>`${key}: ${String(value)}`).join("; ")
         ].filter(Boolean).join("; ");
         return {
-            ...local.style ?? {},
+            ...p.style ?? {},
             ...overlayStyle
         };
     };
     const handleMouseEnter = (event)=>{
         ctx.openTooltip();
-        if ("function" == typeof local.onMouseEnter) local.onMouseEnter(event);
+        if ("function" == typeof p.onMouseEnter) p.onMouseEnter(event);
     };
     const handleMouseLeave = (event)=>{
         ctx.closeTooltip();
-        if ("function" == typeof local.onMouseLeave) local.onMouseLeave(event);
+        if ("function" == typeof p.onMouseLeave) p.onMouseLeave(event);
     };
     return createComponent(Show, {
         get when () {
@@ -200,11 +168,11 @@ const __solidLayoutTooltipContent = (_stable, p)=>{
             return createComponent(Portal, {
                 get children () {
                     var _el$3 = _tmpl$2();
-                    use((el)=>ctx.setContentRef(el), _el$3);
+                    ref(()=>(el)=>ctx.setContentRef(el), _el$3);
                     spread(_el$3, mergeProps(others, {
                         role: "tooltip"
                     }, ()=>({
-                            class: twMerge(CLASSES.slot.content, local.class)
+                            class: twMerge(CLASSES.slot.content, p.class)
                         }), {
                         "data-slot": "tooltip-content",
                         get ["data-placement"] () {
@@ -214,15 +182,15 @@ const __solidLayoutTooltipContent = (_stable, p)=>{
                             return ctx.isOpen() ? "true" : "false";
                         },
                         get ["data-theme"] () {
-                            return local.dataTheme ?? ctx.dataTheme();
+                            return p.dataTheme ?? ctx.dataTheme();
                         },
                         get style () {
                             return style();
                         },
                         onMouseEnter: handleMouseEnter,
                         onMouseLeave: handleMouseLeave
-                    }), false, true);
-                    insert(_el$3, ()=>local.children);
+                    }), true);
+                    insert(_el$3, ()=>p.children);
                     return _el$3;
                 }
             });
@@ -235,42 +203,35 @@ const TooltipContent = defineComponent({
     embedded: true
 });
 const __solidLayoutTooltipArrow = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme",
-        "style"
-    ]);
+    const others = omit(p, "children", "class", "dataTheme", "style");
     const ctx = useTooltipContext();
     const defaultArrow = _tmpl$3();
-    return (()=>{
-        var _el$5 = _tmpl$();
-        spread(_el$5, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.slot.arrow, local.class)
-            }), {
-            "data-slot": "tooltip-arrow",
-            get ["data-placement"] () {
-                return ctx.placement();
-            },
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            },
-            "aria-hidden": "true"
-        }), false, true);
-        insert(_el$5, createComponent(Show, {
-            get when () {
-                return local.children;
-            },
-            fallback: defaultArrow,
-            get children () {
-                return local.children;
-            }
-        }));
-        return _el$5;
-    })();
+    var _el$5 = _tmpl$();
+    spread(_el$5, mergeProps(others, ()=>({
+            class: twMerge(CLASSES.slot.arrow, p.class)
+        }), {
+        "data-slot": "tooltip-arrow",
+        get ["data-placement"] () {
+            return ctx.placement();
+        },
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        get style () {
+            return p.style;
+        },
+        "aria-hidden": "true"
+    }), true);
+    insert(_el$5, createComponent(Show, {
+        get when () {
+            return p.children;
+        },
+        fallback: defaultArrow,
+        get children () {
+            return p.children;
+        }
+    }));
+    return _el$5;
 };
 const TooltipArrow = defineComponent({
     recipe: componentRecipe,

package/dist/components/tooltip/Tooltip.recipe.d.ts

@@ -6,7 +6,7 @@ export declare const CLASSES: {
         readonly arrow: "tooltip__arrow";
     };
 };
-export declare const componentRecipe: import("solid-layouts").Recipe<{
+export declare const componentRecipe: import("solid-layouts/solid-2").Recipe<{
     readonly component: "tooltip";
     readonly slots: {
         readonly root: {};

package/dist/components/utils.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import type { ResponsiveProp } from "./types";
 export { useDesktop } from "../hooks/layout";
 export declare function wrapWithElementIfInvalid({ node, wrapper, className, }: {

package/dist/components/utils.js

@@ -1,4 +1,4 @@
-import { Dynamic, createComponent, mergeProps } from "solid-js/web";
+import { Dynamic, createComponent, mergeProps } from "@solidjs/web";
 import { breakpoints } from "./types.js";
 function isJSXElement(node) {
     return "object" == typeof node && null !== node;

package/dist/components/video-preview/VideoPreview.generated.d.ts

@@ -1,5 +1,6 @@
 import type { Component as __LayoutComponent } from "solid-js";
-import { type Accessor, type JSX } from "solid-js";
+import { type Accessor } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import type { UIBaseProps } from "../vocabulary";
 type VideoPreviewBaseProps = {
     /**

package/dist/components/video-preview/VideoPreview.generated.js

@@ -1,23 +1,16 @@
-import { createComponent, mergeProps, spread, template, use } from "solid-js/web";
-import { defineComponent } from "solid-layouts/application-boundary";
-import { Show, createEffect, onCleanup, splitProps } from "solid-js";
-import { twMerge } from "tailwind-merge";
+import { createComponent, mergeProps, ref, spread, template } from "@solidjs/web";
+import { defineComponent } from "solid-layouts/solid-2/application-boundary";
+import { Show, createEffect, omit, onCleanup } from "solid-js";
+import { twMerge } from "../../lib/twMerge.js";
 import { CLASSES, componentRecipe } from "./VideoPreview.recipe.js";
 var _tmpl$ = /*#__PURE__*/ template("<video>");
 const __solidLayoutVideoPreview = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "stream",
-        "muted",
-        "mirror",
-        "dataTheme",
-        "class",
-        "style"
-    ]);
-    const muted = ()=>local.muted ?? true;
-    const mirror = ()=>local.mirror ?? false;
+    const others = omit(p, "stream", "muted", "mirror", "dataTheme", "class", "style");
+    const muted = ()=>p.muted ?? true;
+    const mirror = ()=>p.mirror ?? false;
     return createComponent(Show, {
         get when () {
-            return local.stream();
+            return p.stream();
         },
         children: (stream)=>{
             let videoRef;
@@ -27,28 +20,26 @@ const __solidLayoutVideoPreview = (_stable, p)=>{
             onCleanup(()=>{
                 videoRef.srcObject = null;
             });
-            return (()=>{
-                var _el$ = _tmpl$();
-                var _ref$ = videoRef;
-                "function" == typeof _ref$ ? use(_ref$, _el$) : videoRef = _el$;
-                spread(_el$, mergeProps(others, {
-                    autoplay: true,
-                    playsinline: true,
-                    get muted () {
-                        return muted();
-                    },
-                    get ["data-theme"] () {
-                        return local.dataTheme;
-                    }
-                }, ()=>({
-                        class: twMerge(mirror() && CLASSES.mirror, local.class)
-                    }), {
-                    get style () {
-                        return local.style;
-                    }
-                }), false, false);
-                return _el$;
-            })();
+            var _el$ = _tmpl$();
+            var _ref$ = videoRef;
+            "function" == typeof _ref$ || Array.isArray(_ref$) ? ref(()=>_ref$, _el$) : videoRef = _el$;
+            spread(_el$, mergeProps(others, {
+                autoplay: true,
+                playsinline: true,
+                get muted () {
+                    return muted();
+                },
+                get ["data-theme"] () {
+                    return p.dataTheme;
+                }
+            }, ()=>({
+                    class: twMerge(mirror() && CLASSES.mirror, p.class)
+                }), {
+                get style () {
+                    return p.style;
+                }
+            }), false);
+            return _el$;
         }
     });
 };

package/dist/components/video-preview/VideoPreview.recipe.d.ts

@@ -1,7 +1,7 @@
 export declare const CLASSES: {
     readonly mirror: "-scale-x-100";
 };
-export declare const componentRecipe: import("solid-layouts").Recipe<{
+export declare const componentRecipe: import("solid-layouts/solid-2").Recipe<{
     readonly component: "video-preview";
     readonly slots: {
         readonly root: {};

package/dist/components/vocabulary.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 /**
  * The shared parameter vocabulary.
  *
@@ -72,6 +72,24 @@ export type Flavor = "neutral" | "primary" | "secondary" | "accent" | "destructi
 export type State = "default" | "loading" | "error" | "invalid" | "disabled" | "hidden";
 /** How much emphasis, and what shape. */
 export type Variant = "solid" | "soft" | "outline" | "ghost" | "plain";
+/**
+ * What a surface is made of.
+ *
+ * Orthogonal to `variant`, which is how much emphasis it carries. A glass card
+ * and a solid card can both be `outline`; the difference is whether the fill is
+ * a colour or a blurred view of whatever is behind it.
+ *
+ * `glass` reads the `--glass-*` family, which `src/styles/glass.ts` derives
+ * from three numbers. Every read carries a fallback, so a theme that sets none
+ * of them still renders — an undefined custom property makes CSS drop the whole
+ * declaration rather than fall back, which is how a partial set produced a card
+ * with no background at all.
+ *
+ * Only surfaces that can hold content take this. A `Button` is not made of
+ * anything: it is a control, and blurring what is behind a 32px pill reads as a
+ * smudge rather than as material.
+ */
+export type Material = "solid" | "glass";
 /** One scale, everywhere. */
 export type Size = "xs" | "sm" | "md" | "lg" | "xl";
 export type Radius = "none" | "sm" | "md" | "lg" | "full";