@pathscale/ui 1.2.0 → 1.2.2

package/dist/components/glow-card/GlowCard.css

@@ -1,65 +1,103 @@
-.glow-card {
-  --glow-color-border: oklch(100% 0 0 / 0.3);
-  --glow-color-bg: oklch(100% 0 0 / 0.1);
-  position: relative;
-  border-radius: inherit;
-}
+@layer components {
+  .glow-card {
+    --glow-card-blur: var(--glass-blur, 11px);
+    --glow-color-border: color-mix(
+      in oklab,
+      var(--glass-highlight-color, var(--color-base-content))
+        var(--glass-border-opacity, 24%),
+      transparent
+    );
+    --glow-color-bg: color-mix(
+      in oklab,
+      var(--glass-highlight-color, var(--color-base-100))
+        var(--glass-background-opacity, 58%),
+      transparent
+    );
+    position: relative;
+    border-radius: inherit;
+    background: color-mix(
+      in oklab,
+      var(--glass-background-color, white) var(--glass-background-opacity, 38%),
+      transparent
+    );
+    border: 1px solid
+      color-mix(
+        in oklab,
+        var(--glass-border-color, white) var(--glass-border-opacity, 30%),
+        transparent
+      );
+    backdrop-filter: blur(var(--glow-card-blur))
+      saturate(var(--glass-saturation, 1.2))
+      brightness(var(--glass-brightness, 1));
+    -webkit-backdrop-filter: blur(var(--glow-card-blur))
+      saturate(var(--glass-saturation, 1.2))
+      brightness(var(--glass-brightness, 1));
+    background-clip: padding-box;
+  }
 
-.glow-card::before,
-.glow-card::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  opacity: 0;
-  transition: opacity 0.3s ease;
-  pointer-events: none;
-}
+  .glow-card--isolate {
+    isolation: isolate;
+  }
 
-.glow-card::before {
-  background: radial-gradient(
-    250px circle at var(--mouse-x) var(--mouse-y),
-    var(--glow-color-border),
-    transparent 80%
-  );
-  z-index: 1;
-  inset: -1px;
-  -webkit-mask:
-    linear-gradient(#fff 0 0) content-box,
-    linear-gradient(#fff 0 0);
-  mask:
-    linear-gradient(#fff 0 0) content-box,
-    linear-gradient(#fff 0 0);
-  -webkit-mask-composite: xor;
-  mask-composite: exclude;
-  padding: 1px;
-}
+  .glow-card::before,
+  .glow-card::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    pointer-events: none;
+  }
 
-.glow-card::after {
-  background: radial-gradient(
-    400px circle at var(--mouse-x) var(--mouse-y),
-    var(--glow-color-bg),
-    transparent 80%
-  );
-  z-index: 0;
-}
+  .glow-card::before {
+    background: radial-gradient(
+      250px circle at var(--mouse-x) var(--mouse-y),
+      var(--glow-color-border),
+      transparent 80%
+    );
+    z-index: 1;
+    inset: -1px;
+    -webkit-mask: linear-gradient(#fff 0 0) content-box,
+      linear-gradient(#fff 0 0);
+    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
+    padding: 1px;
+  }
 
-.glow-card:hover::before,
-.glow-card:hover::after {
-  opacity: 1;
-}
+  .glow-card::after {
+    background: radial-gradient(
+      400px circle at var(--mouse-x) var(--mouse-y),
+      var(--glow-color-bg),
+      transparent 80%
+    );
+    z-index: 0;
+  }
 
-[data-theme="light"] .glow-card::before {
-  --glow-color-border: oklch(30% 0.15 260 / 0.4);
-}
+  .glow-card:hover::before,
+  .glow-card:hover::after {
+    opacity: 1;
+  }
 
-[data-theme="light"] .glow-card::after {
-  --glow-color-bg: oklch(30% 0.15 260 / 0.15);
-}
+  @supports not (
+      (backdrop-filter: blur(1px)) or
+      (-webkit-backdrop-filter: blur(1px))
+    ) {
+    .glow-card {
+      background: color-mix(
+        in oklab,
+        var(--glass-background-color, white)
+          var(--glass-fallback-background-opacity, 78%),
+        transparent
+      );
+    }
+  }
 
-@media (prefers-reduced-motion: reduce) {
-  .glow-card::before,
-  .glow-card::after {
-    opacity: 0 !important;
+  @media (prefers-reduced-motion: reduce) {
+    .glow-card::before,
+    .glow-card::after {
+      opacity: 0 !important;
+    }
   }
 }

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

@@ -3,6 +3,7 @@ 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";
 import "./GlowCard.css";
+import * as __WEBPACK_EXTERNAL_MODULE__GlowCard_classes_js_68550c10__ from "./GlowCard.classes.js";
 var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
 function GlowCard(props) {
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
@@ -29,7 +30,7 @@ function GlowCard(props) {
                 return local.dataTheme;
             },
             get ["class"] () {
-                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)((0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)("glow-card isolate", local.class, local.className));
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)((0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)(__WEBPACK_EXTERNAL_MODULE__GlowCard_classes_js_68550c10__.CLASSES.base, __WEBPACK_EXTERNAL_MODULE__GlowCard_classes_js_68550c10__.CLASSES.isolate, local.class, local.className));
             },
             get style () {
                 return local.style;

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

@@ -0,0 +1,54 @@
+export declare const CLASSES: {
+    readonly base: "grid-layout";
+    readonly cols: {
+        readonly "1": "grid-cols-1";
+        readonly "2": "grid-cols-2";
+        readonly "3": "grid-cols-3";
+        readonly "4": "grid-cols-4";
+        readonly "5": "grid-cols-5";
+        readonly "6": "grid-cols-6";
+        readonly "7": "grid-cols-7";
+        readonly "8": "grid-cols-8";
+        readonly "9": "grid-cols-9";
+        readonly "10": "grid-cols-10";
+        readonly "11": "grid-cols-11";
+        readonly "12": "grid-cols-12";
+    };
+    readonly rows: {
+        readonly "1": "grid-rows-1";
+        readonly "2": "grid-rows-2";
+        readonly "3": "grid-rows-3";
+        readonly "4": "grid-rows-4";
+        readonly "5": "grid-rows-5";
+        readonly "6": "grid-rows-6";
+        readonly "7": "grid-rows-7";
+        readonly "8": "grid-rows-8";
+        readonly "9": "grid-rows-9";
+        readonly "10": "grid-rows-10";
+        readonly "11": "grid-rows-11";
+        readonly "12": "grid-rows-12";
+    };
+    readonly flow: {
+        readonly row: "grid-flow-row";
+        readonly col: "grid-flow-col";
+        readonly "row-dense": "grid-flow-row-dense";
+        readonly "col-dense": "grid-flow-col-dense";
+    };
+    readonly gap: {
+        readonly none: "gap-0";
+        readonly sm: "gap-2";
+        readonly md: "gap-4";
+        readonly lg: "gap-6";
+        readonly xl: "gap-8";
+    };
+    readonly autoCols: {
+        readonly min: "auto-cols-min";
+        readonly max: "auto-cols-max";
+        readonly fr: "auto-cols-fr";
+    };
+    readonly autoRows: {
+        readonly min: "auto-rows-min";
+        readonly max: "auto-rows-max";
+        readonly fr: "auto-rows-fr";
+    };
+};

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

@@ -0,0 +1,55 @@
+const CLASSES = {
+    base: "grid-layout",
+    cols: {
+        1: "grid-cols-1",
+        2: "grid-cols-2",
+        3: "grid-cols-3",
+        4: "grid-cols-4",
+        5: "grid-cols-5",
+        6: "grid-cols-6",
+        7: "grid-cols-7",
+        8: "grid-cols-8",
+        9: "grid-cols-9",
+        10: "grid-cols-10",
+        11: "grid-cols-11",
+        12: "grid-cols-12"
+    },
+    rows: {
+        1: "grid-rows-1",
+        2: "grid-rows-2",
+        3: "grid-rows-3",
+        4: "grid-rows-4",
+        5: "grid-rows-5",
+        6: "grid-rows-6",
+        7: "grid-rows-7",
+        8: "grid-rows-8",
+        9: "grid-rows-9",
+        10: "grid-rows-10",
+        11: "grid-rows-11",
+        12: "grid-rows-12"
+    },
+    flow: {
+        row: "grid-flow-row",
+        col: "grid-flow-col",
+        "row-dense": "grid-flow-row-dense",
+        "col-dense": "grid-flow-col-dense"
+    },
+    gap: {
+        none: "gap-0",
+        sm: "gap-2",
+        md: "gap-4",
+        lg: "gap-6",
+        xl: "gap-8"
+    },
+    autoCols: {
+        min: "auto-cols-min",
+        max: "auto-cols-max",
+        fr: "auto-cols-fr"
+    },
+    autoRows: {
+        min: "auto-rows-min",
+        max: "auto-rows-max",
+        fr: "auto-rows-fr"
+    }
+};
+export { CLASSES };

package/dist/components/grid/Grid.css

@@ -0,0 +1,5 @@
+@layer components {
+  .grid-layout {
+    display: grid;
+  }
+}

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

@@ -1,3 +1,4 @@
+import "./Grid.css";
 import { type JSX } from "solid-js";
 import type { IComponentBaseProps } from "../types";
 import type { ResponsiveProp } from "../types";

package/dist/components/grid/Grid.js

@@ -1,59 +1,10 @@
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./Grid.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";
 import * as __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__ from "../utils.js";
-const colsMap = {
-    1: "grid-cols-1",
-    2: "grid-cols-2",
-    3: "grid-cols-3",
-    4: "grid-cols-4",
-    5: "grid-cols-5",
-    6: "grid-cols-6",
-    7: "grid-cols-7",
-    8: "grid-cols-8",
-    9: "grid-cols-9",
-    10: "grid-cols-10",
-    11: "grid-cols-11",
-    12: "grid-cols-12"
-};
-const rowsMap = {
-    1: "grid-rows-1",
-    2: "grid-rows-2",
-    3: "grid-rows-3",
-    4: "grid-rows-4",
-    5: "grid-rows-5",
-    6: "grid-rows-6",
-    7: "grid-rows-7",
-    8: "grid-rows-8",
-    9: "grid-rows-9",
-    10: "grid-rows-10",
-    11: "grid-rows-11",
-    12: "grid-rows-12"
-};
-const flowMap = {
-    row: "grid-flow-row",
-    col: "grid-flow-col",
-    "row-dense": "grid-flow-row-dense",
-    "col-dense": "grid-flow-col-dense"
-};
-const gapMap = {
-    none: "gap-0",
-    sm: "gap-2",
-    md: "gap-4",
-    lg: "gap-6",
-    xl: "gap-8"
-};
-const autoColsMap = {
-    min: "auto-cols-min",
-    max: "auto-cols-max",
-    fr: "auto-cols-fr"
-};
-const autoRowsMap = {
-    min: "auto-rows-min",
-    max: "auto-rows-max",
-    fr: "auto-rows-fr"
-};
+import * as __WEBPACK_EXTERNAL_MODULE__Grid_classes_js_201311f9__ from "./Grid.classes.js";
 const Grid_Grid = (props)=>{
     const merged = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.mergeProps)({
         as: "div"
@@ -71,15 +22,14 @@ const Grid_Grid = (props)=>{
         "autoRows"
     ]);
     const resolvedChildren = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.children)(()=>local.children);
-    const classes = (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])("grid", (0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.mapResponsiveProp)(local.cols, colsMap), (0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.mapResponsiveProp)(local.rows, rowsMap), (0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.mapResponsiveProp)(local.flow, flowMap), (0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.mapResponsiveProp)(local.gap, gapMap), (0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.mapResponsiveProp)(local.autoCols, autoColsMap), (0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.mapResponsiveProp)(local.autoRows, autoRowsMap), local.class, local.className);
+    const classes = (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__Grid_classes_js_201311f9__.CLASSES.base, (0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.mapResponsiveProp)(local.cols, __WEBPACK_EXTERNAL_MODULE__Grid_classes_js_201311f9__.CLASSES.cols), (0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.mapResponsiveProp)(local.rows, __WEBPACK_EXTERNAL_MODULE__Grid_classes_js_201311f9__.CLASSES.rows), (0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.mapResponsiveProp)(local.flow, __WEBPACK_EXTERNAL_MODULE__Grid_classes_js_201311f9__.CLASSES.flow), (0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.mapResponsiveProp)(local.gap, __WEBPACK_EXTERNAL_MODULE__Grid_classes_js_201311f9__.CLASSES.gap), (0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.mapResponsiveProp)(local.autoCols, __WEBPACK_EXTERNAL_MODULE__Grid_classes_js_201311f9__.CLASSES.autoCols), (0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.mapResponsiveProp)(local.autoRows, __WEBPACK_EXTERNAL_MODULE__Grid_classes_js_201311f9__.CLASSES.autoRows), local.class, local.className);
     return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.Dynamic, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
         get component () {
             return local.as;
-        },
-        get ["class"] () {
-            return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(classes);
         }
-    }, rest, {
+    }, ()=>({
+            class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(classes)
+        }), rest, {
         get children () {
             return resolvedChildren();
         }

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

@@ -0,0 +1,3 @@
+export declare const CLASSES: {
+    readonly base: "header";
+};

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

@@ -0,0 +1,4 @@
+const CLASSES = {
+    base: "header"
+};
+export { CLASSES };

package/dist/components/header/Header.css

@@ -0,0 +1,13 @@
+@layer components {
+  .header {
+    width: 100%;
+    padding-inline: 0.5rem;
+    padding-top: 0.375rem;
+    padding-bottom: 0.25rem;
+    text-align: left;
+    font-size: 0.75rem;
+    line-height: 1rem;
+    font-weight: 500;
+    color: var(--color-muted, color-mix(in oklab, var(--color-base-content) 55%, transparent));
+  }
+}

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

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

package/dist/components/header/Header.js

@@ -0,0 +1,34 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./Header.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__Header_classes_js_7c962527__ from "./Header.classes.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
+const HeaderRoot = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    return (()=>{
+        var _el$ = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Header_classes_js_7c962527__.CLASSES.base, local.class, local.className)
+            }), {
+            "data-slot": "header",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children);
+        return _el$;
+    })();
+};
+const Header = HeaderRoot;
+const header_Header = Header;
+export { Header, HeaderRoot, header_Header as default };

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

@@ -0,0 +1 @@
+export { default, Header, HeaderRoot, type HeaderProps, type HeaderRootProps, } from "./Header";

package/dist/components/header/index.js

@@ -0,0 +1,5 @@
+import * as __WEBPACK_EXTERNAL_MODULE__Header_js_94d20122__ from "./Header.js";
+var __webpack_exports__Header = __WEBPACK_EXTERNAL_MODULE__Header_js_94d20122__.Header;
+var __webpack_exports__HeaderRoot = __WEBPACK_EXTERNAL_MODULE__Header_js_94d20122__.HeaderRoot;
+var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__Header_js_94d20122__["default"];
+export { __webpack_exports__Header as Header, __webpack_exports__HeaderRoot as HeaderRoot, __webpack_exports__default as default };

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

@@ -0,0 +1,3 @@
+export declare const CLASSES: {
+    readonly base: "icon";
+};

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

@@ -0,0 +1,4 @@
+const CLASSES = {
+    base: "icon"
+};
+export { CLASSES };

package/dist/components/icon/Icon.css

@@ -0,0 +1,10 @@
+@layer components {
+  .icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    line-height: 1;
+  }
+}
+

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

@@ -1,3 +1,4 @@
+import "./Icon.css";
 import { type JSX } from "solid-js";
 import type { IComponentBaseProps } from "../types";
 import type { ComponentColor } from "../types";

package/dist/components/icon/Icon.js

@@ -1,7 +1,8 @@
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
-import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
+import "./Icon.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__Icon_classes_js_7218ccd2__ from "./Icon.classes.js";
 var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span>");
 const Icon = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
@@ -15,17 +16,18 @@ const Icon = (props)=>{
     ]);
     const width = local.width ?? 24;
     const height = local.height ?? 24;
-    const name = local.name;
-    const sizeClass = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>`${name} w-${width / 4} h-${height / 4}`);
-    const classes = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)((0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(sizeClass(), local.className ?? local.class)));
+    const classes = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Icon_classes_js_7218ccd2__.CLASSES.base, local.name, local.class, local.className));
     return (()=>{
         var _el$ = _tmpl$();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            get ["class"] () {
-                return classes();
-            },
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+                class: classes()
+            }), {
             get style () {
-                return local.style;
+                return {
+                    width: `${width}px`,
+                    height: `${height}px`,
+                    ..."object" == typeof local.style ? local.style : {}
+                };
             },
             get ["data-theme"] () {
                 return local.dataTheme;

package/dist/components/immersive-landing/ImmersiveLanding.classes.d.ts

@@ -0,0 +1,83 @@
+export declare const CLASSES: {
+    readonly landing: {
+        readonly base: "immersive-landing";
+        readonly viewport: "immersive-landing__viewport";
+        readonly pageLayer: "immersive-landing__page-layer";
+        readonly overlay: "immersive-landing__overlay";
+        readonly versionWrap: "immersive-landing__version-wrap";
+        readonly versionLabel: "immersive-landing__version-label";
+    };
+    readonly page: {
+        readonly base: "immersive-landing-page";
+        readonly active: "immersive-landing-page--active";
+        readonly inactive: "immersive-landing-page--inactive";
+        readonly content: "immersive-landing-page__content";
+    };
+    readonly arrows: {
+        readonly button: "immersive-landing-arrows__button";
+        readonly prev: "immersive-landing-arrows__button--prev";
+        readonly next: "immersive-landing-arrows__button--next";
+        readonly icon: "immersive-landing-arrows__icon";
+    };
+    readonly navigation: {
+        readonly base: "immersive-landing-navigation";
+        readonly shell: "immersive-landing-navigation__shell";
+        readonly row: "immersive-landing-navigation__row";
+        readonly mobileArrow: "immersive-landing-navigation__mobile-arrow";
+        readonly mobileArrowDisabled: "immersive-landing-navigation__mobile-arrow--disabled";
+        readonly dots: "immersive-landing-navigation__dots";
+        readonly dot: "immersive-landing-navigation__dot";
+        readonly dotActive: "immersive-landing-navigation__dot--active";
+        readonly counter: "immersive-landing-navigation__counter";
+        readonly icon: "immersive-landing-navigation__icon";
+    };
+    readonly pwaPrompt: {
+        readonly dialog: "immersive-landing-pwa";
+        readonly card: "immersive-landing-pwa__card";
+        readonly closeButton: "immersive-landing-pwa__close";
+        readonly body: "immersive-landing-pwa__body";
+        readonly media: "immersive-landing-pwa__media";
+        readonly appIconWrap: "immersive-landing-pwa__app-icon-wrap";
+        readonly appIcon: "immersive-landing-pwa__app-icon";
+        readonly textWrap: "immersive-landing-pwa__text-wrap";
+        readonly title: "immersive-landing-pwa__title";
+        readonly description: "immersive-landing-pwa__description";
+        readonly footer: "immersive-landing-pwa__footer";
+        readonly action: "immersive-landing-pwa__action";
+    };
+    readonly firefoxBanner: {
+        readonly dialog: "immersive-landing-firefox";
+        readonly card: "immersive-landing-firefox__card";
+        readonly closeButton: "immersive-landing-firefox__close";
+        readonly body: "immersive-landing-firefox__body";
+        readonly media: "immersive-landing-firefox__media";
+        readonly iconWrap: "immersive-landing-firefox__icon-wrap";
+        readonly browserIcon: "immersive-landing-firefox__browser-icon";
+        readonly textWrap: "immersive-landing-firefox__text-wrap";
+        readonly title: "immersive-landing-firefox__title";
+        readonly description: "immersive-landing-firefox__description";
+        readonly footer: "immersive-landing-firefox__footer";
+        readonly action: "immersive-landing-firefox__action";
+    };
+    readonly cookie: {
+        readonly banner: "immersive-landing-cookie";
+        readonly bannerClosing: "immersive-landing-cookie--closing";
+        readonly container: "immersive-landing-cookie__container";
+        readonly row: "immersive-landing-cookie__row";
+        readonly message: "immersive-landing-cookie__message";
+        readonly actions: "immersive-landing-cookie__actions";
+        readonly actionButton: "immersive-landing-cookie__action-button";
+        readonly manageButton: "immersive-landing-cookie__manage-button";
+        readonly modalBackdrop: "immersive-landing-cookie__modal-backdrop";
+        readonly modalCard: "immersive-landing-cookie__modal-card";
+        readonly modalHeader: "immersive-landing-cookie__modal-header";
+        readonly modalTitle: "immersive-landing-cookie__modal-title";
+        readonly preferences: "immersive-landing-cookie__preferences";
+        readonly preferenceRow: "immersive-landing-cookie__preference-row";
+        readonly preferenceRowLocked: "immersive-landing-cookie__preference-row--locked";
+        readonly preferenceLabel: "immersive-landing-cookie__preference-label";
+        readonly toggle: "immersive-landing-cookie__toggle";
+        readonly modalFooter: "immersive-landing-cookie__modal-footer";
+        readonly saveButton: "immersive-landing-cookie__save-button";
+    };
+};