@pathscale/ui 2.1.1 → 2.2.0

package/dist/components/grid/Grid.generated.d.ts

@@ -1,13 +1,13 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./Grid.css";
 import { type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
+import type { UIBaseProps } from "../vocabulary";
 import type { ResponsiveProp } from "../types";
 type GridFlow = "row" | "col" | "row-dense" | "col-dense";
 type GridSize = "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12";
 type GridGap = "none" | "sm" | "md" | "lg" | "xl";
 type AutoSize = "min" | "max" | "fr";
-export type GridProps = IComponentBaseProps & Omit<JSX.HTMLAttributes<HTMLElement>, "ref"> & {
+export type GridProps = UIBaseProps & Omit<JSX.HTMLAttributes<HTMLElement>, "ref"> & {
     as?: keyof JSX.IntrinsicElements;
     cols?: ResponsiveProp<GridSize>;
     rows?: ResponsiveProp<GridSize>;

package/dist/components/grid/Grid.generated.js

@@ -13,7 +13,6 @@ const __solidLayoutGrid = (_stable, p)=>{
     const [local, rest] = splitProps(merged, [
         "as",
         "class",
-        "className",
         "children",
         "cols",
         "rows",
@@ -23,7 +22,7 @@ const __solidLayoutGrid = (_stable, p)=>{
         "autoRows"
     ]);
     const resolvedChildren = children(()=>local.children);
-    const classes = clsx(CLASSES.base, mapResponsiveProp(local.cols, CLASSES.cols), mapResponsiveProp(local.rows, CLASSES.rows), mapResponsiveProp(local.flow, CLASSES.flow), mapResponsiveProp(local.gap, CLASSES.gap), mapResponsiveProp(local.autoCols, CLASSES.autoCols), mapResponsiveProp(local.autoRows, CLASSES.autoRows), local.class, local.className);
+    const classes = clsx(CLASSES.base, mapResponsiveProp(local.cols, CLASSES.cols), mapResponsiveProp(local.rows, CLASSES.rows), mapResponsiveProp(local.flow, CLASSES.flow), mapResponsiveProp(local.gap, CLASSES.gap), mapResponsiveProp(local.autoCols, CLASSES.autoCols), mapResponsiveProp(local.autoRows, CLASSES.autoRows), local.class);
     return createComponent(Dynamic, mergeProps({
         get component () {
             return local.as;

package/dist/components/header/Header.generated.d.ts

@@ -1,8 +1,8 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./Header.css";
 import { type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
-export type HeaderRootProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseProps;
+import type { UIBaseProps } from "../vocabulary";
+export type HeaderRootProps = JSX.HTMLAttributes<HTMLDivElement> & UIBaseProps;
 declare const HeaderRoot: __LayoutComponent<HeaderRootProps>;
 declare const Header: __LayoutComponent<HeaderRootProps>;
 export default Header;

package/dist/components/header/Header.generated.js

@@ -9,14 +9,13 @@ const __solidLayoutHeaderRoot = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "style"
     ]);
     return (()=>{
         var _el$ = _tmpl$();
         spread(_el$, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.base, local.class, local.className)
+                class: twMerge(CLASSES.base, local.class)
             }), {
             "data-slot": "header",
             get ["data-theme"] () {

package/dist/components/icon/Icon.css

@@ -1,10 +1,46 @@
 @layer components {
+  /*
+   * One custom property carries the flavour, and the base rule spends it.
+   * `inherit` is the default and resolves to `currentColor`, so an icon inside
+   * something that has already chosen a colour keeps that colour.
+   */
   .icon {
+    --icon-accent: currentColor;
+
     display: inline-flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     line-height: 1;
+    color: var(--icon-accent);
+  }
+
+  /*
+   * The placeholder. It fills the box and paints nothing on its own: the mark
+   * arrives either as the application's generated `icon-[...]` rule, which masks
+   * and paints `background-color: currentColor`, or as an inline SVG child.
+   * Either way the glyph inherits `color` from the root, which is the whole
+   * reason the flavour lives one level up.
+   */
+  .icon__glyph {
+    display: block;
+    width: 100%;
+    height: 100%;
   }
-}
 
+  .icon__glyph > svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+    fill: currentColor;
+  }
+
+  .icon--flavor-neutral { --icon-accent: var(--color-base-content); }
+  .icon--flavor-primary { --icon-accent: var(--color-primary); }
+  .icon--flavor-secondary { --icon-accent: var(--color-secondary); }
+  .icon--flavor-accent { --icon-accent: var(--color-accent); }
+  .icon--flavor-destructive { --icon-accent: var(--color-error); }
+  .icon--flavor-success { --icon-accent: var(--color-success); }
+  .icon--flavor-warning { --icon-accent: var(--color-warning); }
+  .icon--flavor-info { --icon-accent: var(--color-info); }
+}

package/dist/components/icon/Icon.generated.d.ts

@@ -1,13 +1,23 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./Icon.css";
-import type { IComponentBaseProps } from "../types";
-import type { ComponentColor } from "../types";
-export type IconProps = IComponentBaseProps & {
+import { type JSX } from "solid-js";
+import type { Flavor, UIBaseProps } from "../vocabulary";
+export type IconProps = UIBaseProps & {
+    /**
+     * The glyph, from either source.
+     *
+     * A **string** is a preload token, `lucide--copy` or the wrapped
+     * `icon-[lucide--copy]`, resolved by the CSS the consuming application's
+     * iconify build generates. A **element** is inline SVG the caller owns, which
+     * is the escape hatch for brand marks, generated art, and anything an icon set
+     * does not carry.
+     *
+     * The two cannot both apply, so they are one prop rather than two that can
+     * disagree. Which one it is, is the type.
+     */
+    src?: string | JSX.Element;
     width?: number;
     height?: number;
-    color?: ComponentColor;
-    name?: string;
+    flavor?: Flavor;
 };
-declare const Icon: __LayoutComponent<IconProps>;
 export declare const IconLayout: __LayoutComponent<IconProps>;
-export default Icon;

package/dist/components/icon/Icon.generated.js

@@ -1,39 +1,57 @@
-import { mergeProps, spread, template } from "solid-js/web";
+import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
 import { defineComponent } from "solid-layouts/application-boundary";
 import "./Icon.css";
-import { createMemo } from "solid-js";
-import { twMerge } from "tailwind-merge";
+import { Show } from "solid-js";
 import { icon } from "./Icon.recipe.js";
+import { preloadClasses } from "./Icon.interactions.js";
 var _tmpl$ = /*#__PURE__*/ template("<span>");
-const __solidLayoutIcon = ({ slot, children }, p)=>{
-    const width = p.width ?? 24;
-    const height = p.height ?? 24;
-    const classes = createMemo(()=>twMerge(slot.root.class, p.name, p.class, p.className));
-    return (()=>{
+const __solidLayoutIconLayout = (_stable, p)=>(()=>{
         var _el$ = _tmpl$();
-        spread(_el$, mergeProps(()=>slot.root, ()=>({
-                class: classes()
-            }), {
+        spread(_el$, mergeProps(()=>_stable.slot.root, {
             get style () {
                 return {
-                    width: `${width}px`,
-                    height: `${height}px`,
+                    width: `${p.width ?? 24}px`,
+                    height: `${p.height ?? 24}px`,
                     ..."object" == typeof p.style ? p.style : {}
                 };
             },
-            get ["data-theme"] () {
-                return p.dataTheme;
+            get ["data-flavor"] () {
+                return p.flavor ?? "inherit";
+            },
+            get ["data-source"] () {
+                return "string" == typeof p.src ? "preload" : "svg";
+            },
+            "aria-hidden": "true"
+        }), false, true);
+        insert(_el$, createComponent(Show, {
+            get when () {
+                return "string" == typeof p.src;
+            },
+            get fallback () {
+                return (()=>{
+                    var _el$3 = _tmpl$();
+                    spread(_el$3, mergeProps(()=>_stable.slot.glyph), false, true);
+                    insert(_el$3, ()=>p.src);
+                    return _el$3;
+                })();
+            },
+            get children () {
+                var _el$2 = _tmpl$();
+                spread(_el$2, mergeProps(()=>_stable.slot.glyph, {
+                    get classList () {
+                        return {
+                            [preloadClasses(p.src)]: true
+                        };
+                    }
+                }), false, false);
+                return _el$2;
             }
-        }), false, false);
+        }));
         return _el$;
     })();
-};
-const Icon = defineComponent({
+const IconLayout = defineComponent({
     recipe: icon,
-    layout: __solidLayoutIcon,
+    layout: __solidLayoutIconLayout,
     embedded: true
 });
-const IconLayout = Icon;
-const Icon_generated = Icon;
-export default Icon_generated;
 export { IconLayout };

package/dist/components/icon/Icon.interactions.d.ts

@@ -0,0 +1,8 @@
+/** Strip the `icon-[...]` wrapper if the caller supplied one. */
+export declare function normalizeToken(token: string): string;
+/**
+ * The class pair the application's generated CSS defines. `iconify` masks with
+ * the glyph so it takes `currentColor`; `iconify-color` would paint the glyph's
+ * own colours instead, which is not what a themed icon wants.
+ */
+export declare function preloadClasses(token: string): string;

package/dist/components/icon/Icon.interactions.js

@@ -0,0 +1,10 @@
+const WRAPPED = /^icon-\[(.+)\]$/;
+function normalizeToken(token) {
+    const wrapped = WRAPPED.exec(token.trim());
+    return wrapped ? wrapped[1] : token.trim();
+}
+function preloadClasses(token) {
+    const name = normalizeToken(token);
+    return name ? `icon-[${name}] iconify` : "iconify";
+}
+export { normalizeToken, preloadClasses };

package/dist/components/icon/Icon.recipe.d.ts

@@ -1,6 +1,13 @@
-export declare const CLASSES: {
-    readonly base: "icon";
-};
+/**
+ * An icon, from either source, with the glyph itself left to the application.
+ *
+ * The library ships the box and the colour and nothing else. `glyph` is a
+ * placeholder slot: it carries a stable class to style against, and the class
+ * that actually paints the mark is added at the call boundary, either from the
+ * token the consuming app's iconify build emitted or from the SVG the caller
+ * handed in. Nothing here bakes a glyph into the package, which is why there is
+ * no icon set in this recipe and no icon data in the shipped CSS.
+ */
 export declare const icon: import("solid-layouts").Recipe<{
     readonly component: "icon";
     readonly element: "span";
@@ -8,10 +15,24 @@ export declare const icon: import("solid-layouts").Recipe<{
         readonly root: {
             readonly base: "icon";
         };
+        readonly glyph: {
+            readonly base: "icon__glyph";
+        };
     };
     readonly props: {
-        readonly name: {};
-        readonly width: {};
-        readonly height: {};
+        readonly flavor: {
+            readonly inherit: "";
+            readonly neutral: "icon--flavor-neutral";
+            readonly primary: "icon--flavor-primary";
+            readonly secondary: "icon--flavor-secondary";
+            readonly accent: "icon--flavor-accent";
+            readonly destructive: "icon--flavor-destructive";
+            readonly success: "icon--flavor-success";
+            readonly warning: "icon--flavor-warning";
+            readonly info: "icon--flavor-info";
+        };
+    };
+    readonly defaults: {
+        readonly flavor: "inherit";
     };
 }>;

package/dist/components/icon/Icon.recipe.js

@@ -1,31 +1,59 @@
 import { recipe } from "../../lib/layouts/index.js";
-const CLASSES = {
-    base: "icon"
-};
 const icon = recipe({
     component: "icon",
     element: "span",
     slots: {
         root: {
             base: "icon"
+        },
+        glyph: {
+            base: "icon__glyph"
         }
     },
     props: {
-        name: {},
-        width: {},
-        height: {}
+        flavor: {
+            inherit: "",
+            neutral: "icon--flavor-neutral",
+            primary: "icon--flavor-primary",
+            secondary: "icon--flavor-secondary",
+            accent: "icon--flavor-accent",
+            destructive: "icon--flavor-destructive",
+            success: "icon--flavor-success",
+            warning: "icon--flavor-warning",
+            info: "icon--flavor-info"
+        }
+    },
+    defaults: {
+        flavor: "inherit"
     },
     _layouts: {
         slots: {
             root: {
                 base: "icon",
+                axes: {
+                    flavor: {
+                        inherit: "",
+                        neutral: "icon--flavor-neutral",
+                        primary: "icon--flavor-primary",
+                        secondary: "icon--flavor-secondary",
+                        accent: "icon--flavor-accent",
+                        destructive: "icon--flavor-destructive",
+                        success: "icon--flavor-success",
+                        warning: "icon--flavor-warning",
+                        info: "icon--flavor-info"
+                    }
+                }
+            },
+            glyph: {
+                base: "icon__glyph",
                 axes: {}
             }
         },
         stateKeys: [],
         slotIds: {
-            root: 0
+            root: 1,
+            glyph: 0
         }
     }
 });
-export { CLASSES, icon };
+export { icon };

package/dist/components/icon/index.d.ts

@@ -1,2 +1,3 @@
-export { default } from "./Icon.generated";
+export { IconLayout as default, IconLayout as Icon } from "./Icon.generated";
 export type { IconProps } from "./Icon.generated";
+export { icon } from "./Icon.recipe";

package/dist/components/icon/index.js

@@ -1 +1,2 @@
-export { default } from "./Icon.generated.js";
+export { IconLayout as Icon, IconLayout as default } from "./Icon.generated.js";
+export { icon } from "./Icon.recipe.js";

package/dist/components/immersive-landing/ImmersiveLanding.css

@@ -80,7 +80,7 @@
     justify-content: center;
     min-width: 48px;
     min-height: 48px;
-    border-radius: 9999px;
+    border-radius: var(--radius-pill, 9999px);
     border: 0;
     background: color-mix(in oklab, var(--color-base-content) 10%, transparent);
     cursor: pointer;
@@ -117,8 +117,8 @@
   }
 
   .immersive-landing-navigation__shell {
-    border-radius: 9999px;
-    border: 1px solid color-mix(in oklab, var(--color-base-content) 10%, transparent);
+    border-radius: var(--radius-pill, 9999px);
+    border: var(--border, 1px) solid color-mix(in oklab, var(--color-base-content) 10%, transparent);
     background: color-mix(in oklab, var(--color-base-100) 90%, transparent);
     padding: 0.375rem 0.5rem;
     backdrop-filter: blur(8px);
@@ -138,7 +138,7 @@
     justify-content: center;
     min-width: 44px;
     min-height: 44px;
-    border-radius: 9999px;
+    border-radius: var(--radius-pill, 9999px);
     border: 0;
     color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
     background: transparent;
@@ -180,7 +180,7 @@
   .immersive-landing-navigation__dot {
     width: 0.5rem;
     height: 0.5rem;
-    border-radius: 9999px;
+    border-radius: var(--radius-pill, 9999px);
     border: 0;
     background: color-mix(in oklab, var(--color-base-content) 30%, transparent);
     cursor: pointer;
@@ -220,7 +220,7 @@
   .immersive-landing-pwa__card,
   .immersive-landing-firefox__card {
     position: relative;
-    border: 1px solid var(--color-base-300);
+    border: var(--border, 1px) solid var(--color-base-300);
   }
 
   .immersive-landing-pwa__close,
@@ -303,7 +303,7 @@
     bottom: 0;
     left: 0;
     z-index: 52;
-    border-top: 1px solid color-mix(in oklab, var(--color-base-content) 10%, transparent);
+    border-top: var(--border, 1px) solid color-mix(in oklab, var(--color-base-content) 10%, transparent);
     background: color-mix(in oklab, var(--color-base-300) 95%, transparent);
     backdrop-filter: blur(8px);
     transition: transform 300ms ease, opacity 300ms ease;
@@ -367,7 +367,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    background: rgb(0 0 0 / 50%);
+    background: rgb(var(--shadow-color, 0 0 0) / 50%);
     backdrop-filter: blur(4px);
     padding: 1rem;
     animation: immersive-landing-fade-in 200ms ease;
@@ -434,8 +434,8 @@
   .immersive-landing-cookie__toggle {
     width: 2.25rem;
     height: 1.25rem;
-    border-radius: 9999px;
-    border: 1px solid color-mix(in oklab, var(--color-base-content) 24%, transparent);
+    border-radius: var(--radius-pill, 9999px);
+    border: var(--border, 1px) solid color-mix(in oklab, var(--color-base-content) 24%, transparent);
     appearance: none;
     position: relative;
     background: var(--color-base-200);
@@ -449,9 +449,9 @@
     left: 1px;
     width: 0.95rem;
     height: 0.95rem;
-    border-radius: 9999px;
+    border-radius: var(--radius-pill, 9999px);
     background: white;
-    box-shadow: 0 1px 2px rgb(0 0 0 / 25%);
+    box-shadow: 0 1px 2px rgb(var(--shadow-color, 0 0 0) / 25%);
     transition: transform 150ms ease;
   }
 

package/dist/components/immersive-landing/ImmersiveLanding.generated.js

@@ -28,7 +28,6 @@ const __solidLayoutImmersiveLanding = (_stable, p)=>{
         "overlay",
         "children",
         "class",
-        "className",
         "style",
         "pwaConfig",
         "cookieConfig",
@@ -62,7 +61,7 @@ const __solidLayoutImmersiveLanding = (_stable, p)=>{
     };
     const showNav = ()=>false !== local.showNavigation;
     const showArrowNav = ()=>false !== local.showArrows;
-    const classes = ()=>twMerge(CLASSES.landing.base, local.class, local.className);
+    const classes = ()=>twMerge(CLASSES.landing.base, local.class);
     const renderChildren = ()=>"function" == typeof local.children ? local.children(contextValue) : local.children;
     const renderOverlay = ()=>"function" == typeof local.overlay ? local.overlay(contextValue) : local.overlay;
     return createComponent(ImmersiveLandingContext.Provider, {

package/dist/components/immersive-landing/ImmersiveLandingArrows.generated.js

@@ -10,8 +10,7 @@ const __solidLayoutImmersiveLandingArrows = (_stable, p)=>{
         "onNext",
         "isFirstPage",
         "isLastPage",
-        "class",
-        "className"
+        "class"
     ]);
     const handleNext = ()=>{
         if (local.onNext) local.onNext();
@@ -28,7 +27,7 @@ const __solidLayoutImmersiveLandingArrows = (_stable, p)=>{
                 var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
                 _el$.$$click = handlePrev;
                 spread(_el$, mergeProps(()=>({
-                        class: twMerge(CLASSES.arrows.button, CLASSES.arrows.prev, local.class, local.className)
+                        class: twMerge(CLASSES.arrows.button, CLASSES.arrows.prev, local.class)
                     }), {
                     "aria-label": "Previous page"
                 }, others), false, true);
@@ -51,7 +50,7 @@ const __solidLayoutImmersiveLandingArrows = (_stable, p)=>{
                 var _el$3 = _tmpl$2(), _el$4 = _el$3.firstChild;
                 _el$3.$$click = handleNext;
                 spread(_el$3, mergeProps(()=>({
-                        class: twMerge(CLASSES.arrows.button, CLASSES.arrows.next, local.class, local.className)
+                        class: twMerge(CLASSES.arrows.button, CLASSES.arrows.next, local.class)
                     }), {
                     "aria-label": "Next page"
                 }, others), false, true);

package/dist/components/immersive-landing/ImmersiveLandingNavigation.generated.js

@@ -14,14 +14,13 @@ const __solidLayoutImmersiveLandingNavigation = (_stable, p)=>{
         "isFirstPage",
         "isLastPage",
         "class",
-        "className",
         "style"
     ]);
     const mobileArrowClasses = (disabled)=>twMerge(CLASSES.navigation.mobileArrow, disabled && CLASSES.navigation.mobileArrowDisabled);
     return (()=>{
         var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$4.firstChild, _el$6 = _el$4.nextSibling, _el$7 = _el$6.firstChild;
         spread(_el$, mergeProps(()=>({
-                class: twMerge(CLASSES.navigation.base, local.class, local.className)
+                class: twMerge(CLASSES.navigation.base, local.class)
             }), {
             "aria-label": "Page navigation",
             get style () {

package/dist/components/immersive-landing/ImmersiveLandingPage.generated.js

@@ -10,13 +10,12 @@ const __solidLayoutImmersiveLandingPage = (_stable, p)=>{
         "id",
         "children",
         "class",
-        "className",
         "style"
     ]);
     const context = useContext(ImmersiveLandingContext);
     const isActive = createMemo(()=>context?.activePage() === local.id);
     const fadeDurationMs = 200;
-    const classes = ()=>twMerge(CLASSES.page.base, isActive() ? CLASSES.page.active : CLASSES.page.inactive, local.class, local.className);
+    const classes = ()=>twMerge(CLASSES.page.base, isActive() ? CLASSES.page.active : CLASSES.page.inactive, local.class);
     return (()=>{
         var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
         spread(_el$, mergeProps({

package/dist/components/immersive-landing/components/CookieConsent.js

@@ -141,7 +141,7 @@ const CookieConsent = (props)=>{
                                 get children () {
                                     return [
                                         createComponent(button_0, mergeProps({
-                                            variant: "primary",
+                                            flavor: "primary",
                                             size: "sm"
                                         }, ()=>({
                                                 class: CLASSES.cookie.actionButton
@@ -216,7 +216,7 @@ const CookieConsent = (props)=>{
                             createComponent(button_0, {
                                 size: "sm",
                                 variant: "ghost",
-                                isIconOnly: true,
+                                width: "square",
                                 onClick: handleManageClose,
                                 get ["aria-label"] () {
                                     return texts().closeLabel;
@@ -306,7 +306,7 @@ const CookieConsent = (props)=>{
                                 }
                             }),
                             createComponent(button_0, mergeProps({
-                                variant: "primary",
+                                flavor: "primary",
                                 size: "sm"
                             }, ()=>({
                                     class: CLASSES.cookie.saveButton

package/dist/components/immersive-landing/components/FirefoxPWABanner.js

@@ -69,7 +69,7 @@ const FirefoxPWABanner = (props)=>{
                     class: CLASSES.firefoxBanner.dialog
                 })), false, true);
             insert(_el$, createComponent(card, mergeProps({
-                variant: "shadow"
+                elevation: "md"
             }, ()=>({
                     class: CLASSES.firefoxBanner.card
                 }), {
@@ -78,7 +78,7 @@ const FirefoxPWABanner = (props)=>{
                         createComponent(button_0, mergeProps({
                             size: "sm",
                             variant: "ghost",
-                            isIconOnly: true
+                            width: "square"
                         }, ()=>({
                                 class: CLASSES.firefoxBanner.closeButton
                             }), {
@@ -88,7 +88,7 @@ const FirefoxPWABanner = (props)=>{
                             },
                             get children () {
                                 return createComponent(icon, {
-                                    name: "icon-[mdi--close]",
+                                    src: "icon-[mdi--close]",
                                     width: 16,
                                     height: 16
                                 });
@@ -117,7 +117,7 @@ const FirefoxPWABanner = (props)=>{
                                                     },
                                                     get children () {
                                                         return createComponent(icon, mergeProps({
-                                                            name: "icon-[mdi--firefox]",
+                                                            src: "icon-[mdi--firefox]",
                                                             width: 40,
                                                             height: 40
                                                         }, ()=>({
@@ -165,7 +165,7 @@ const FirefoxPWABanner = (props)=>{
                             get children () {
                                 return [
                                     createComponent(button_0, mergeProps({
-                                        variant: "primary"
+                                        flavor: "primary"
                                     }, ()=>({
                                             class: CLASSES.firefoxBanner.action
                                         }), {

package/dist/components/immersive-landing/components/PWAInstallPrompt.js

@@ -84,7 +84,7 @@ const PWAInstallPrompt = (props)=>{
                     class: CLASSES.pwaPrompt.dialog
                 })), false, true);
             insert(_el$, createComponent(card, mergeProps({
-                variant: "shadow"
+                elevation: "md"
             }, ()=>({
                     class: CLASSES.pwaPrompt.card
                 }), {
@@ -93,7 +93,7 @@ const PWAInstallPrompt = (props)=>{
                         createComponent(button_0, mergeProps({
                             size: "sm",
                             variant: "ghost",
-                            isIconOnly: true
+                            width: "square"
                         }, ()=>({
                                 class: CLASSES.pwaPrompt.closeButton
                             }), {
@@ -170,7 +170,7 @@ const PWAInstallPrompt = (props)=>{
                             get children () {
                                 return [
                                     createComponent(button_0, mergeProps({
-                                        variant: "primary"
+                                        flavor: "primary"
                                     }, ()=>({
                                             class: CLASSES.pwaPrompt.action
                                         }), {