@limetech/lime-elements 37.78.0 → 37.78.2

package/dist/collection/components/shortcut/shortcut.css

@@ -93,46 +93,12 @@
 
 a {
   all: unset;
-  transition: color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);
-  cursor: pointer;
-  color: var(--mdc-theme-on-surface);
-  background-color: var(--shortcut-background-color, var(--lime-elevated-surface-background-color));
-  box-shadow: var(--button-shadow-normal);
   text-align: center;
   height: calc(100% - 1rem);
   width: calc(100% - 1rem);
   padding: 0.5rem;
   border-radius: var(--shortcut-border-radius, 1rem);
-}
-a:hover, a:focus, a:focus-visible {
-  will-change: color, background-color, box-shadow, transform;
-}
-a:hover {
-  transform: translate3d(0, -0.04rem, 0);
-  color: var(--mdc-theme-on-surface);
   background-color: var(--shortcut-background-color, var(--lime-elevated-surface-background-color));
-  box-shadow: var(--button-shadow-hovered);
-}
-a:active {
-  --limel-clickable-transform-timing-function: cubic-bezier(
-      0.83,
-      -0.15,
-      0.49,
-      1.16
-  );
-  transform: translate3d(0, 0.05rem, 0);
-  box-shadow: var(--button-shadow-pressed);
-}
-a:hover, a:active {
-  --limel-clickable-transition-speed: 0.2s;
-  --limel-clickable-transform-speed: 0.16s;
-}
-a:focus {
-  outline: none;
-}
-a:focus-visible {
-  outline: none;
-  box-shadow: var(--shadow-depth-8-focused);
 }
 
 limel-icon {
@@ -158,4 +124,69 @@ limel-badge {
   position: absolute;
   top: -0.25rem;
   right: 0.125rem;
+}
+
+limel-3d-hover-effect-glow {
+  border-radius: var(--shortcut-border-radius, 1rem);
+}
+
+:host(limel-shortcut) {
+  isolation: isolate;
+  transform-style: preserve-3d;
+  perspective: 1000px;
+}
+@media (prefers-reduced-motion) {
+  :host(limel-shortcut) {
+    perspective: 2000px;
+  }
+}
+
+a {
+  position: relative;
+  transition-duration: 0.8s;
+  transition-property: transform, box-shadow, background-color;
+  transition-timing-function: ease-out;
+  transform: scale3d(1, 1, 1) rotate3d(0, 0, 0, 0deg);
+  cursor: pointer;
+  box-shadow: var(--button-shadow-normal);
+}
+a:focus {
+  outline: none;
+}
+a:hover, a:focus, a:focus-visible, a:focus-within {
+  will-change: background-color, box-shadow, transform;
+}
+a:hover, a:focus, a:focus-visible, a:active {
+  transition-duration: 0.2s;
+}
+a:hover, a:focus-visible {
+  box-shadow: var(--button-shadow-hovered), var(--shadow-depth-16);
+}
+a:hover {
+  transform: scale3d(1.01, 1.01, 1.01) rotate3d(var(--limel-3d-hover-effect-rotate3d));
+}
+a:focus-visible {
+  outline: none;
+  transform: scale3d(1.01, 1.01, 1.01);
+}
+a:hover limel-3d-hover-effect-glow {
+  --limel-3d-hover-effect-glow-opacity: 0.5;
+}
+@media (prefers-reduced-motion) {
+  a:hover limel-3d-hover-effect-glow {
+    --limel-3d-hover-effect-glow-opacity: 0.2;
+  }
+}
+a:hover, a:focus-visible {
+  box-shadow: var(--button-shadow-hovered), var(--shadow-depth-16);
+}
+a:active {
+  transform: scale3d(1, 1, 1) rotate3d(0, 0, 0, 0deg);
+  box-shadow: var(--button-shadow-pressed);
+}
+a:focus-visible {
+  box-shadow: var(--shadow-depth-8-focused), var(--button-shadow-hovered);
+}
+a:focus-visible:active {
+  box-shadow: var(--shadow-depth-8-focused), var(--button-shadow-pressed);
 }

package/dist/collection/components/shortcut/shortcut.js

@@ -1,4 +1,5 @@
-import { h } from '@stencil/core';
+import { h, Host } from '@stencil/core';
+import { getMouseEventHandlers } from '../../util/3d-tilt-hover-effect';
 /**
  * This component can be used on places such as a start page or a dashboard.
  * Clicking on the component should navigate the user to a new screen,
@@ -44,13 +45,14 @@ export class Shortcut {
     this.badge = undefined;
     this.link = undefined;
   }
+  componentWillLoad() {
+    const { handleMouseEnter, handleMouseLeave } = getMouseEventHandlers(this.host);
+    this.handleMouseEnter = handleMouseEnter;
+    this.handleMouseLeave = handleMouseLeave;
+  }
   render() {
     var _a, _b, _c;
-    return [
-      h("a", { "aria-disabled": this.disabled, href: (_a = this.link) === null || _a === void 0 ? void 0 : _a.href, target: (_b = this.link) === null || _b === void 0 ? void 0 : _b.target, tabindex: "0", "aria-label": this.getAriaLabel(), title: (_c = this.link) === null || _c === void 0 ? void 0 : _c.title }, h("limel-icon", { name: this.icon })),
-      this.renderLabel(),
-      this.renderNotification(),
-    ];
+    return (h(Host, { onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("a", { "aria-disabled": this.disabled, href: (_a = this.link) === null || _a === void 0 ? void 0 : _a.href, target: (_b = this.link) === null || _b === void 0 ? void 0 : _b.target, tabindex: "0", "aria-label": this.getAriaLabel(), title: (_c = this.link) === null || _c === void 0 ? void 0 : _c.title }, h("limel-icon", { name: this.icon }), h("limel-3d-hover-effect-glow", null)), this.renderLabel(), this.renderNotification()));
   }
   static get is() { return "limel-shortcut"; }
   static get encapsulation() { return "shadow"; }
@@ -158,5 +160,6 @@ export class Shortcut {
       }
     };
   }
+  static get elementRef() { return "host"; }
 }
 //# sourceMappingURL=shortcut.js.map

package/dist/collection/components/shortcut/shortcut.js.map

@@ -1 +1 @@
-{"version":3,"file":"shortcut.js","sourceRoot":"","sources":["../../../src/components/shortcut/shortcut.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAGnD;;;;;;;;;;;;;GAaG;AAOH,MAAM,OAAO,QAAQ;;IAiDT,gBAAW,GAAG,GAAG,EAAE;MACvB,IAAI,IAAI,CAAC,KAAK,EAAE;QACZ,OAAO,2BAAkB,MAAM,IAAE,IAAI,CAAC,KAAK,CAAQ,CAAC;OACvD;IACL,CAAC,CAAC;IAEM,iBAAY,GAAG,GAAG,EAAE;;MACxB,IAAI,IAAI,CAAC,KAAK,KAAI,MAAA,IAAI,CAAC,IAAI,0CAAE,KAAK,CAAA,EAAE;QAChC,OAAO,IAAI,CAAC,KAAK,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;OAC9C;MAED,IAAI,IAAI,CAAC,KAAK,EAAE;QACZ,OAAO,IAAI,CAAC,KAAK,CAAC;OACrB;MAED,IAAI,MAAA,IAAI,CAAC,IAAI,0CAAE,KAAK,EAAE;QAClB,OAAO,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;OAC1B;MAED,OAAO,SAAS,CAAC;IACrB,CAAC,CAAC;IAEM,uBAAkB,GAAG,GAAG,EAAE;MAC9B,IAAI,IAAI,CAAC,KAAK,EAAE;QACZ,OAAO,mBAAa,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI,CAAC;OAC7C;IACL,CAAC,CAAC;;iBAhEsB,IAAI;oBAMA,KAAK;;;;EAe1B,MAAM;;IACT,OAAO;MACH,0BACmB,IAAI,CAAC,QAAQ,EAC5B,IAAI,EAAE,MAAA,IAAI,CAAC,IAAI,0CAAE,IAAI,EACrB,MAAM,EAAE,MAAA,IAAI,CAAC,IAAI,0CAAE,MAAM,EACzB,QAAQ,EAAC,GAAG,gBACA,IAAI,CAAC,YAAY,EAAE,EAC/B,KAAK,EAAE,MAAA,IAAI,CAAC,IAAI,0CAAE,KAAK;QAEvB,kBAAY,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,CAC/B;MACJ,IAAI,CAAC,WAAW,EAAE;MAClB,IAAI,CAAC,kBAAkB,EAAE;KAC5B,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BJ","sourcesContent":["import { Component, Prop, h } from '@stencil/core';\nimport { Link } from '../../global/shared-types/link.types';\n\n/**\n * This component can be used on places such as a start page or a dashboard.\n * Clicking on the component should navigate the user to a new screen,\n * to which you need to provide a URL, by specifying an `href` for the `link` property.\n *\n * By default, this navigation will happen within the same browser tab.\n * However, it is possible to override that behavior, by specifying a `target`\n * for the `link` property\n *\n * @exampleComponent limel-example-shortcut\n * @exampleComponent limel-example-shortcut-notification\n * @exampleComponent limel-example-shortcut-styling\n * @exampleComponent limel-example-shortcut-with-click-handler\n */\n\n@Component({\n    tag: 'limel-shortcut',\n    shadow: true,\n    styleUrl: 'shortcut.scss',\n})\nexport class Shortcut {\n    /**\n     * Name of icon for the shortcut.\n     */\n    @Prop({ reflect: true })\n    public icon: string;\n\n    /**\n     * The text to show below the shortcut. Long label will be truncated.\n     */\n    @Prop({ reflect: true })\n    public label?: string = null;\n\n    /**\n     * Set to `true` if shortcut is disabled.\n     */\n    @Prop({ reflect: true })\n    public disabled?: boolean = false;\n\n    /**\n     * If specified, will display a notification badge\n     * on the shortcut.\n     */\n    @Prop({ reflect: true })\n    public badge?: number | string;\n\n    /**\n     * If supplied, the shortcut will be a clickable link.\n     */\n    @Prop()\n    public link?: Link;\n\n    public render() {\n        return [\n            <a\n                aria-disabled={this.disabled}\n                href={this.link?.href}\n                target={this.link?.target}\n                tabindex=\"0\"\n                aria-label={this.getAriaLabel()}\n                title={this.link?.title}\n            >\n                <limel-icon name={this.icon} />\n            </a>,\n            this.renderLabel(),\n            this.renderNotification(),\n        ];\n    }\n\n    private renderLabel = () => {\n        if (this.label) {\n            return <span aria-hidden=\"true\">{this.label}</span>;\n        }\n    };\n\n    private getAriaLabel = () => {\n        if (this.label && this.link?.title) {\n            return this.label + '. ' + this.link.title;\n        }\n\n        if (this.label) {\n            return this.label;\n        }\n\n        if (this.link?.title) {\n            return this.link.title;\n        }\n\n        return undefined;\n    };\n\n    private renderNotification = () => {\n        if (this.badge) {\n            return <limel-badge label={this.badge} />;\n        }\n    };\n}\n"]}
+{"version":3,"file":"shortcut.js","sourceRoot":"","sources":["../../../src/components/shortcut/shortcut.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAElE,OAAO,EAAE,qBAAqB,EAAE,MAAM,iCAAiC,CAAC;AAExE;;;;;;;;;;;;;GAaG;AAOH,MAAM,OAAO,QAAQ;;IAqET,gBAAW,GAAG,GAAG,EAAE;MACvB,IAAI,IAAI,CAAC,KAAK,EAAE;QACZ,OAAO,2BAAkB,MAAM,IAAE,IAAI,CAAC,KAAK,CAAQ,CAAC;OACvD;IACL,CAAC,CAAC;IAEM,iBAAY,GAAG,GAAG,EAAE;;MACxB,IAAI,IAAI,CAAC,KAAK,KAAI,MAAA,IAAI,CAAC,IAAI,0CAAE,KAAK,CAAA,EAAE;QAChC,OAAO,IAAI,CAAC,KAAK,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;OAC9C;MAED,IAAI,IAAI,CAAC,KAAK,EAAE;QACZ,OAAO,IAAI,CAAC,KAAK,CAAC;OACrB;MAED,IAAI,MAAA,IAAI,CAAC,IAAI,0CAAE,KAAK,EAAE;QAClB,OAAO,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;OAC1B;MAED,OAAO,SAAS,CAAC;IACrB,CAAC,CAAC;IAEM,uBAAkB,GAAG,GAAG,EAAE;MAC9B,IAAI,IAAI,CAAC,KAAK,EAAE;QACZ,OAAO,mBAAa,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI,CAAC;OAC7C;IACL,CAAC,CAAC;;iBApFsB,IAAI;oBAMA,KAAK;;;;EAqB1B,iBAAiB;IACpB,MAAM,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,GAAG,qBAAqB,CAChE,IAAI,CAAC,IAAI,CACZ,CAAC;IACF,IAAI,CAAC,gBAAgB,GAAG,gBAAgB,CAAC;IACzC,IAAI,CAAC,gBAAgB,GAAG,gBAAgB,CAAC;EAC7C,CAAC;EAEM,MAAM;;IACT,OAAO,CACH,EAAC,IAAI,IACD,YAAY,EAAE,IAAI,CAAC,gBAAgB,EACnC,YAAY,EAAE,IAAI,CAAC,gBAAgB;MAEnC,0BACmB,IAAI,CAAC,QAAQ,EAC5B,IAAI,EAAE,MAAA,IAAI,CAAC,IAAI,0CAAE,IAAI,EACrB,MAAM,EAAE,MAAA,IAAI,CAAC,IAAI,0CAAE,MAAM,EACzB,QAAQ,EAAC,GAAG,gBACA,IAAI,CAAC,YAAY,EAAE,EAC/B,KAAK,EAAE,MAAA,IAAI,CAAC,IAAI,0CAAE,KAAK;QAEvB,kBAAY,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI;QAC/B,qCAA8B,CAC9B;MACH,IAAI,CAAC,WAAW,EAAE;MAClB,IAAI,CAAC,kBAAkB,EAAE,CACvB,CACV,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BJ","sourcesContent":["import { Component, Prop, h, Element, Host } from '@stencil/core';\nimport { Link } from '../../global/shared-types/link.types';\nimport { getMouseEventHandlers } from '../../util/3d-tilt-hover-effect';\n\n/**\n * This component can be used on places such as a start page or a dashboard.\n * Clicking on the component should navigate the user to a new screen,\n * to which you need to provide a URL, by specifying an `href` for the `link` property.\n *\n * By default, this navigation will happen within the same browser tab.\n * However, it is possible to override that behavior, by specifying a `target`\n * for the `link` property\n *\n * @exampleComponent limel-example-shortcut\n * @exampleComponent limel-example-shortcut-notification\n * @exampleComponent limel-example-shortcut-styling\n * @exampleComponent limel-example-shortcut-with-click-handler\n */\n\n@Component({\n    tag: 'limel-shortcut',\n    shadow: true,\n    styleUrl: 'shortcut.scss',\n})\nexport class Shortcut {\n    /**\n     * Name of icon for the shortcut.\n     */\n    @Prop({ reflect: true })\n    public icon: string;\n\n    /**\n     * The text to show below the shortcut. Long label will be truncated.\n     */\n    @Prop({ reflect: true })\n    public label?: string = null;\n\n    /**\n     * Set to `true` if shortcut is disabled.\n     */\n    @Prop({ reflect: true })\n    public disabled?: boolean = false;\n\n    /**\n     * If specified, will display a notification badge\n     * on the shortcut.\n     */\n    @Prop({ reflect: true })\n    public badge?: number | string;\n\n    /**\n     * If supplied, the shortcut will be a clickable link.\n     */\n    @Prop()\n    public link?: Link;\n\n    @Element()\n    private host: HTMLElement;\n\n    private handleMouseEnter: () => void;\n    private handleMouseLeave: () => void;\n\n    public componentWillLoad() {\n        const { handleMouseEnter, handleMouseLeave } = getMouseEventHandlers(\n            this.host,\n        );\n        this.handleMouseEnter = handleMouseEnter;\n        this.handleMouseLeave = handleMouseLeave;\n    }\n\n    public render() {\n        return (\n            <Host\n                onMouseEnter={this.handleMouseEnter}\n                onMouseLeave={this.handleMouseLeave}\n            >\n                <a\n                    aria-disabled={this.disabled}\n                    href={this.link?.href}\n                    target={this.link?.target}\n                    tabindex=\"0\"\n                    aria-label={this.getAriaLabel()}\n                    title={this.link?.title}\n                >\n                    <limel-icon name={this.icon} />\n                    <limel-3d-hover-effect-glow />\n                </a>\n                {this.renderLabel()}\n                {this.renderNotification()}\n            </Host>\n        );\n    }\n\n    private renderLabel = () => {\n        if (this.label) {\n            return <span aria-hidden=\"true\">{this.label}</span>;\n        }\n    };\n\n    private getAriaLabel = () => {\n        if (this.label && this.link?.title) {\n            return this.label + '. ' + this.link.title;\n        }\n\n        if (this.label) {\n            return this.label;\n        }\n\n        if (this.link?.title) {\n            return this.link.title;\n        }\n\n        return undefined;\n    };\n\n    private renderNotification = () => {\n        if (this.badge) {\n            return <limel-badge label={this.badge} />;\n        }\n    };\n}\n"]}

package/dist/collection/components/text-editor/text-editor.css

@@ -300,7 +300,7 @@ label {
   font-size: 0.65rem;
   letter-spacing: var(--mdc-typography-subtitle1-letter-spacing, 0.009375em);
 }
-:host(limel-text-editor[required]) label::after {
+:host(limel-text-editor[required]:not([required=false])) label::after {
   content: "*";
 }
 

package/dist/collection/style/mixins.scss

@@ -457,42 +457,6 @@ $clickable-normal-state-transitions: (
     white-space: nowrap;
 }
 
-// This mixin designed to enhance the visual effects,
-// when the `tiltFollowingTheCursor` utility function from `3d-tilt-hover-effect.ts`
-// is implemented in a component.
-// This adds styles to a `<div class"limel-3d-hover-effect-glow" />`, needed to create
-// a glow effect on a 3D element when the parent element is hovered.
-// when the `tiltFollowingTheCursor` utility function from `3d-tilt-hover-effect.ts`
-// Parts of these styles are controlled by the `titleFollowingTheCursor` function.
-@mixin limel-3d-hover-effect-glow($the3dElement, $border-radius) {
-    .limel-3d-hover-effect-glow {
-        transition:
-            background 0.4s ease,
-            opacity 0.4s ease;
-        pointer-events: none;
-
-        position: absolute;
-        inset: 0;
-        border-radius: $border-radius;
-
-        opacity: 0.1;
-        #{$the3dElement}:hover & {
-            opacity: 0.5;
-            @media (prefers-reduced-motion) {
-                opacity: 0.2;
-            }
-        }
-
-        background-image: radial-gradient(
-            circle at var(--limel-3d-hover-effect-glow-position, 50% -20%),
-            rgb(var(--color-white), 0.3),
-            rgb(var(--color-white), 0)
-        );
-
-        mix-blend-mode: plus-lighter;
-    }
-}
-
 // These mixins below are designed to apply the necessary visual effects,
 // when the `tiltFollowingTheCursor` utility function from `3d-tilt-hover-effect.ts`
 // is implemented in a component.
@@ -545,6 +509,15 @@ $clickable-normal-state-transitions: (
         outline: none;
         transform: scale3d(1.01, 1.01, 1.01);
     }
+
+    &:hover {
+        limel-3d-hover-effect-glow {
+            --limel-3d-hover-effect-glow-opacity: 0.5;
+            @media (prefers-reduced-motion) {
+                --limel-3d-hover-effect-glow-opacity: 0.2;
+            }
+        }
+    }
 }
 
 @mixin the-3d-element--clickable {

package/dist/collection/util/3d-tilt-hover-effect.js

@@ -46,11 +46,7 @@
  *   @include the-3d-element--clickable;
  *   ```
  * - **For the glow effect**:
- *   Add a `<div class="limel-3d-hover-effect-glow" />` inside "the-3d-element",
- *   and use the following SCSS mixin:
- *   ```scss
- *   @include limel-3d-hover-effect-glow($selector, $border-radius);
- *   ```
+ *   Add a `<limel-3d-hover-effect-glow />` inside "the-3d-element".
  *
  * 3. **Initialize in your component**:
  *

package/dist/collection/util/3d-tilt-hover-effect.js.map

@@ -1 +1 @@
-{"version":3,"file":"3d-tilt-hover-effect.js","sourceRoot":"","sources":["../../src/util/3d-tilt-hover-effect.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable tsdoc/syntax */\n/**\n * Utility functions for creating a 3D tilt hover effect.\n *\n * This module provides functions to enable a 3D tilt effect for consumer components,\n * allowing elements to visually follow the cursor's position and tilt towards it.\n * It also includes a glow effect for added interactivity.\n *\n * ## Usage\n *\n * 1. **Import the utility**:\n *\n * ```tsx\n * import { getMouseEventHandlers } from './path/to/3d-tilt-hover-effect';\n * ```\n *\n * 2. **Define the structure of your component**:\n *\n * To enable the 3D tilt effect, the host element of your component should act as\n * the \"parent-of-the-3d-element\", and a nested child element should act as\n * \"the-3d-element\" (the interactive element). This structure is necessary\n * to properly isolate the 3D transformations and maintain visual fidelity.\n *\n * For example:\n *\n * ```tsx\n * <Host>\n *     <section class=\"the-3d-element\">\n *         <!-- Your component content -->\n *     </section>\n * </Host>\n * ```\n *\n * Apply the required SCSS mixins to these elements:\n *\n * - **On the host element**:\n *   ```scss\n *   @include parent-of-the-3d-element;\n *   ```\n * - **On the nested \"interactive\" element**:\n *   ```scss\n *   @include the-3d-element;\n *   ```\n * - **For clickable interactive elements**:\n *   ```scss\n *   @include the-3d-element--clickable;\n *   ```\n * - **For the glow effect**:\n *   Add a `<div class=\"limel-3d-hover-effect-glow\" />` inside \"the-3d-element\",\n *   and use the following SCSS mixin:\n *   ```scss\n *   @include limel-3d-hover-effect-glow($selector, $border-radius);\n *   ```\n *\n * 3. **Initialize in your component**:\n *\n * Use `getMouseEventHandlers()` to attach the required mouse event listeners\n * to the \"interactive element\" (`the-3d-element`). For example:\n *\n * ```tsx\n * @Element()\n * private host: HTMLElement;\n *\n * private handleMouseEnter: () => void;\n * private handleMouseLeave: () => void;\n *\n * public componentWillLoad() {\n *     const { handleMouseEnter, handleMouseLeave } = getMouseEventHandlers(\n *         this.host.querySelector('.the-3d-element'),\n *     );\n *     this.handleMouseEnter = handleMouseEnter;\n *     this.handleMouseLeave = handleMouseLeave;\n * }\n * ```\n *\n * 4. **Attach event handlers in your render method**:\n *\n * ```tsx\n * public render() {\n *     return (\n *         <Host>\n *             <section\n *                 class=\"the-3d-element\"\n *                 onMouseEnter={this.handleMouseEnter}\n *                 onMouseLeave={this.handleMouseLeave}\n *             >\n *                 <!-- Your component content -->\n *                 <div class=\"limel-3d-hover-effect-glow\" />\n *             </section>\n *         </Host>\n *     );\n * }\n * ```\n *\n * ## Styling Notes\n *\n * - The host element (`parent-of-the-3d-element`) must have these styles:\n *   ```scss\n *   @include parent-of-the-3d-element;\n *   ```\n * - The nested \"interactive element\" (`the-3d-element`) should have:\n *   ```scss\n *   @include the-3d-element;\n *   ```\n * - For components like Card or Info Tile, using a nested \"interactive element\"\n *   is the only way to achieve the 3D effect, as the host serves as the parent\n *   and must maintain proper isolation for the effect.\n */\n/* eslint-enable tsdoc/syntax */\n\nexport const MOUSE_SCALE_FACTOR = 100;\nexport const SCALING_BASE = 50;\nexport const ROTATION_DEGREE_MULTIPLIER = 1.6;\nexport const GLOW_POSITION_MULTIPLIER = 2;\nexport const CENTER_DIVISOR = 2;\n\nexport const tiltFollowingTheCursor =\n    (the3dElementBounds: DOMRect, element: HTMLElement) => (e: MouseEvent) => {\n        const mouseX = e.clientX;\n        const mouseY = e.clientY;\n        const leftX = mouseX - the3dElementBounds.x;\n        const topY = mouseY - the3dElementBounds.y;\n        const center = {\n            x: leftX - the3dElementBounds.width / CENTER_DIVISOR,\n            y: topY - the3dElementBounds.height / CENTER_DIVISOR,\n        };\n        const distance = Math.sqrt(\n            center.x ** CENTER_DIVISOR + center.y ** CENTER_DIVISOR,\n        );\n\n        const scalingFactor = Math.sqrt(\n            Math.min(the3dElementBounds.width, the3dElementBounds.height) /\n                SCALING_BASE,\n        );\n\n        const rotate3d = `\n            ${center.y / (MOUSE_SCALE_FACTOR * scalingFactor)},\n            ${-center.x / (MOUSE_SCALE_FACTOR * scalingFactor)},\n            0,\n            ${(Math.log(distance) * ROTATION_DEGREE_MULTIPLIER) / scalingFactor}deg\n        `;\n        element.style.setProperty('--limel-3d-hover-effect-rotate3d', rotate3d);\n\n        const glowPosition = `\n            ${center.x * GLOW_POSITION_MULTIPLIER + the3dElementBounds.width / CENTER_DIVISOR}px\n            ${center.y * GLOW_POSITION_MULTIPLIER + the3dElementBounds.height / CENTER_DIVISOR}px\n        `;\n        element.style.setProperty(\n            '--limel-3d-hover-effect-glow-position',\n            glowPosition,\n        );\n    };\n\nexport const getMouseEventHandlers = (element: HTMLElement) => {\n    let tiltCallback: (e: MouseEvent) => void;\n\n    const handleMouseEnter = () => {\n        const bounds = element.getBoundingClientRect();\n        tiltCallback = tiltFollowingTheCursor(bounds, element);\n        document.addEventListener('mousemove', tiltCallback);\n    };\n\n    const handleMouseLeave = () => {\n        document.removeEventListener('mousemove', tiltCallback);\n        element.style.removeProperty('--limel-3d-hover-effect-rotate3d');\n        element.style.removeProperty('--limel-3d-hover-effect-glow-position');\n    };\n\n    return {\n        handleMouseEnter: handleMouseEnter,\n        handleMouseLeave: handleMouseLeave,\n    };\n};\n"]}
+{"version":3,"file":"3d-tilt-hover-effect.js","sourceRoot":"","sources":["../../src/util/3d-tilt-hover-effect.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable tsdoc/syntax */\n/**\n * Utility functions for creating a 3D tilt hover effect.\n *\n * This module provides functions to enable a 3D tilt effect for consumer components,\n * allowing elements to visually follow the cursor's position and tilt towards it.\n * It also includes a glow effect for added interactivity.\n *\n * ## Usage\n *\n * 1. **Import the utility**:\n *\n * ```tsx\n * import { getMouseEventHandlers } from './path/to/3d-tilt-hover-effect';\n * ```\n *\n * 2. **Define the structure of your component**:\n *\n * To enable the 3D tilt effect, the host element of your component should act as\n * the \"parent-of-the-3d-element\", and a nested child element should act as\n * \"the-3d-element\" (the interactive element). This structure is necessary\n * to properly isolate the 3D transformations and maintain visual fidelity.\n *\n * For example:\n *\n * ```tsx\n * <Host>\n *     <section class=\"the-3d-element\">\n *         <!-- Your component content -->\n *     </section>\n * </Host>\n * ```\n *\n * Apply the required SCSS mixins to these elements:\n *\n * - **On the host element**:\n *   ```scss\n *   @include parent-of-the-3d-element;\n *   ```\n * - **On the nested \"interactive\" element**:\n *   ```scss\n *   @include the-3d-element;\n *   ```\n * - **For clickable interactive elements**:\n *   ```scss\n *   @include the-3d-element--clickable;\n *   ```\n * - **For the glow effect**:\n *   Add a `<limel-3d-hover-effect-glow />` inside \"the-3d-element\".\n *\n * 3. **Initialize in your component**:\n *\n * Use `getMouseEventHandlers()` to attach the required mouse event listeners\n * to the \"interactive element\" (`the-3d-element`). For example:\n *\n * ```tsx\n * @Element()\n * private host: HTMLElement;\n *\n * private handleMouseEnter: () => void;\n * private handleMouseLeave: () => void;\n *\n * public componentWillLoad() {\n *     const { handleMouseEnter, handleMouseLeave } = getMouseEventHandlers(\n *         this.host.querySelector('.the-3d-element'),\n *     );\n *     this.handleMouseEnter = handleMouseEnter;\n *     this.handleMouseLeave = handleMouseLeave;\n * }\n * ```\n *\n * 4. **Attach event handlers in your render method**:\n *\n * ```tsx\n * public render() {\n *     return (\n *         <Host>\n *             <section\n *                 class=\"the-3d-element\"\n *                 onMouseEnter={this.handleMouseEnter}\n *                 onMouseLeave={this.handleMouseLeave}\n *             >\n *                 <!-- Your component content -->\n *                 <div class=\"limel-3d-hover-effect-glow\" />\n *             </section>\n *         </Host>\n *     );\n * }\n * ```\n *\n * ## Styling Notes\n *\n * - The host element (`parent-of-the-3d-element`) must have these styles:\n *   ```scss\n *   @include parent-of-the-3d-element;\n *   ```\n * - The nested \"interactive element\" (`the-3d-element`) should have:\n *   ```scss\n *   @include the-3d-element;\n *   ```\n * - For components like Card or Info Tile, using a nested \"interactive element\"\n *   is the only way to achieve the 3D effect, as the host serves as the parent\n *   and must maintain proper isolation for the effect.\n */\n/* eslint-enable tsdoc/syntax */\n\nexport const MOUSE_SCALE_FACTOR = 100;\nexport const SCALING_BASE = 50;\nexport const ROTATION_DEGREE_MULTIPLIER = 1.6;\nexport const GLOW_POSITION_MULTIPLIER = 2;\nexport const CENTER_DIVISOR = 2;\n\nexport const tiltFollowingTheCursor =\n    (the3dElementBounds: DOMRect, element: HTMLElement) => (e: MouseEvent) => {\n        const mouseX = e.clientX;\n        const mouseY = e.clientY;\n        const leftX = mouseX - the3dElementBounds.x;\n        const topY = mouseY - the3dElementBounds.y;\n        const center = {\n            x: leftX - the3dElementBounds.width / CENTER_DIVISOR,\n            y: topY - the3dElementBounds.height / CENTER_DIVISOR,\n        };\n        const distance = Math.sqrt(\n            center.x ** CENTER_DIVISOR + center.y ** CENTER_DIVISOR,\n        );\n\n        const scalingFactor = Math.sqrt(\n            Math.min(the3dElementBounds.width, the3dElementBounds.height) /\n                SCALING_BASE,\n        );\n\n        const rotate3d = `\n            ${center.y / (MOUSE_SCALE_FACTOR * scalingFactor)},\n            ${-center.x / (MOUSE_SCALE_FACTOR * scalingFactor)},\n            0,\n            ${(Math.log(distance) * ROTATION_DEGREE_MULTIPLIER) / scalingFactor}deg\n        `;\n        element.style.setProperty('--limel-3d-hover-effect-rotate3d', rotate3d);\n\n        const glowPosition = `\n            ${center.x * GLOW_POSITION_MULTIPLIER + the3dElementBounds.width / CENTER_DIVISOR}px\n            ${center.y * GLOW_POSITION_MULTIPLIER + the3dElementBounds.height / CENTER_DIVISOR}px\n        `;\n        element.style.setProperty(\n            '--limel-3d-hover-effect-glow-position',\n            glowPosition,\n        );\n    };\n\nexport const getMouseEventHandlers = (element: HTMLElement) => {\n    let tiltCallback: (e: MouseEvent) => void;\n\n    const handleMouseEnter = () => {\n        const bounds = element.getBoundingClientRect();\n        tiltCallback = tiltFollowingTheCursor(bounds, element);\n        document.addEventListener('mousemove', tiltCallback);\n    };\n\n    const handleMouseLeave = () => {\n        document.removeEventListener('mousemove', tiltCallback);\n        element.style.removeProperty('--limel-3d-hover-effect-rotate3d');\n        element.style.removeProperty('--limel-3d-hover-effect-glow-position');\n    };\n\n    return {\n        handleMouseEnter: handleMouseEnter,\n        handleMouseLeave: handleMouseLeave,\n    };\n};\n"]}

package/dist/esm/{3d-tilt-hover-effect-a76fcd43.js → 3d-tilt-hover-effect-05648b3c.js}

@@ -46,11 +46,7 @@
  *   @include the-3d-element--clickable;
  *   ```
  * - **For the glow effect**:
- *   Add a `<div class="limel-3d-hover-effect-glow" />` inside "the-3d-element",
- *   and use the following SCSS mixin:
- *   ```scss
- *   @include limel-3d-hover-effect-glow($selector, $border-radius);
- *   ```
+ *   Add a `<limel-3d-hover-effect-glow />` inside "the-3d-element".
  *
  * 3. **Initialize in your component**:
  *
@@ -157,4 +153,4 @@ const getMouseEventHandlers = (element) => {
 
 export { getMouseEventHandlers as g };
 
-//# sourceMappingURL=3d-tilt-hover-effect-a76fcd43.js.map
+//# sourceMappingURL=3d-tilt-hover-effect-05648b3c.js.map

package/dist/esm/3d-tilt-hover-effect-05648b3c.js.map

@@ -0,0 +1 @@
+{"file":"3d-tilt-hover-effect-05648b3c.js","mappings":"AAAA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuGA;AAEO,MAAM,kBAAkB,GAAG,GAAG,CAAC;AAC/B,MAAM,YAAY,GAAG,EAAE,CAAC;AACxB,MAAM,0BAA0B,GAAG,GAAG,CAAC;AACvC,MAAM,wBAAwB,GAAG,CAAC,CAAC;AACnC,MAAM,cAAc,GAAG,CAAC,CAAC;AAEzB,MAAM,sBAAsB,GAC/B,CAAC,kBAA2B,EAAE,OAAoB,KAAK,CAAC,CAAa;EACjE,MAAM,MAAM,GAAG,CAAC,CAAC,OAAO,CAAC;EACzB,MAAM,MAAM,GAAG,CAAC,CAAC,OAAO,CAAC;EACzB,MAAM,KAAK,GAAG,MAAM,GAAG,kBAAkB,CAAC,CAAC,CAAC;EAC5C,MAAM,IAAI,GAAG,MAAM,GAAG,kBAAkB,CAAC,CAAC,CAAC;EAC3C,MAAM,MAAM,GAAG;IACX,CAAC,EAAE,KAAK,GAAG,kBAAkB,CAAC,KAAK,GAAG,cAAc;IACpD,CAAC,EAAE,IAAI,GAAG,kBAAkB,CAAC,MAAM,GAAG,cAAc;GACvD,CAAC;EACF,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CACtB,MAAM,CAAC,CAAC,IAAI,cAAc,GAAG,MAAM,CAAC,CAAC,IAAI,cAAc,CAC1D,CAAC;EAEF,MAAM,aAAa,GAAG,IAAI,CAAC,IAAI,CAC3B,IAAI,CAAC,GAAG,CAAC,kBAAkB,CAAC,KAAK,EAAE,kBAAkB,CAAC,MAAM,CAAC;IACzD,YAAY,CACnB,CAAC;EAEF,MAAM,QAAQ,GAAG;cACX,MAAM,CAAC,CAAC,IAAI,kBAAkB,GAAG,aAAa,CAAC;cAC/C,CAAC,MAAM,CAAC,CAAC,IAAI,kBAAkB,GAAG,aAAa,CAAC;;cAEhD,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,GAAG,0BAA0B,IAAI,aAAa;SACtE,CAAC;EACF,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,kCAAkC,EAAE,QAAQ,CAAC,CAAC;EAExE,MAAM,YAAY,GAAG;cACf,MAAM,CAAC,CAAC,GAAG,wBAAwB,GAAG,kBAAkB,CAAC,KAAK,GAAG,cAAc;cAC/E,MAAM,CAAC,CAAC,GAAG,wBAAwB,GAAG,kBAAkB,CAAC,MAAM,GAAG,cAAc;SACrF,CAAC;EACF,OAAO,CAAC,KAAK,CAAC,WAAW,CACrB,uCAAuC,EACvC,YAAY,CACf,CAAC;AACN,CAAC,CAAC;MAEO,qBAAqB,GAAG,CAAC,OAAoB;EACtD,IAAI,YAAqC,CAAC;EAE1C,MAAM,gBAAgB,GAAG;IACrB,MAAM,MAAM,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC;IAC/C,YAAY,GAAG,sBAAsB,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACvD,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC;GACxD,CAAC;EAEF,MAAM,gBAAgB,GAAG;IACrB,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC;IACxD,OAAO,CAAC,KAAK,CAAC,cAAc,CAAC,kCAAkC,CAAC,CAAC;IACjE,OAAO,CAAC,KAAK,CAAC,cAAc,CAAC,uCAAuC,CAAC,CAAC;GACzE,CAAC;EAEF,OAAO;IACH,gBAAgB,EAAE,gBAAgB;IAClC,gBAAgB,EAAE,gBAAgB;GACrC,CAAC;AACN;;;;","names":[],"sources":["./src/util/3d-tilt-hover-effect.ts"],"sourcesContent":["/* eslint-disable tsdoc/syntax */\n/**\n * Utility functions for creating a 3D tilt hover effect.\n *\n * This module provides functions to enable a 3D tilt effect for consumer components,\n * allowing elements to visually follow the cursor's position and tilt towards it.\n * It also includes a glow effect for added interactivity.\n *\n * ## Usage\n *\n * 1. **Import the utility**:\n *\n * ```tsx\n * import { getMouseEventHandlers } from './path/to/3d-tilt-hover-effect';\n * ```\n *\n * 2. **Define the structure of your component**:\n *\n * To enable the 3D tilt effect, the host element of your component should act as\n * the \"parent-of-the-3d-element\", and a nested child element should act as\n * \"the-3d-element\" (the interactive element). This structure is necessary\n * to properly isolate the 3D transformations and maintain visual fidelity.\n *\n * For example:\n *\n * ```tsx\n * <Host>\n *     <section class=\"the-3d-element\">\n *         <!-- Your component content -->\n *     </section>\n * </Host>\n * ```\n *\n * Apply the required SCSS mixins to these elements:\n *\n * - **On the host element**:\n *   ```scss\n *   @include parent-of-the-3d-element;\n *   ```\n * - **On the nested \"interactive\" element**:\n *   ```scss\n *   @include the-3d-element;\n *   ```\n * - **For clickable interactive elements**:\n *   ```scss\n *   @include the-3d-element--clickable;\n *   ```\n * - **For the glow effect**:\n *   Add a `<limel-3d-hover-effect-glow />` inside \"the-3d-element\".\n *\n * 3. **Initialize in your component**:\n *\n * Use `getMouseEventHandlers()` to attach the required mouse event listeners\n * to the \"interactive element\" (`the-3d-element`). For example:\n *\n * ```tsx\n * @Element()\n * private host: HTMLElement;\n *\n * private handleMouseEnter: () => void;\n * private handleMouseLeave: () => void;\n *\n * public componentWillLoad() {\n *     const { handleMouseEnter, handleMouseLeave } = getMouseEventHandlers(\n *         this.host.querySelector('.the-3d-element'),\n *     );\n *     this.handleMouseEnter = handleMouseEnter;\n *     this.handleMouseLeave = handleMouseLeave;\n * }\n * ```\n *\n * 4. **Attach event handlers in your render method**:\n *\n * ```tsx\n * public render() {\n *     return (\n *         <Host>\n *             <section\n *                 class=\"the-3d-element\"\n *                 onMouseEnter={this.handleMouseEnter}\n *                 onMouseLeave={this.handleMouseLeave}\n *             >\n *                 <!-- Your component content -->\n *                 <div class=\"limel-3d-hover-effect-glow\" />\n *             </section>\n *         </Host>\n *     );\n * }\n * ```\n *\n * ## Styling Notes\n *\n * - The host element (`parent-of-the-3d-element`) must have these styles:\n *   ```scss\n *   @include parent-of-the-3d-element;\n *   ```\n * - The nested \"interactive element\" (`the-3d-element`) should have:\n *   ```scss\n *   @include the-3d-element;\n *   ```\n * - For components like Card or Info Tile, using a nested \"interactive element\"\n *   is the only way to achieve the 3D effect, as the host serves as the parent\n *   and must maintain proper isolation for the effect.\n */\n/* eslint-enable tsdoc/syntax */\n\nexport const MOUSE_SCALE_FACTOR = 100;\nexport const SCALING_BASE = 50;\nexport const ROTATION_DEGREE_MULTIPLIER = 1.6;\nexport const GLOW_POSITION_MULTIPLIER = 2;\nexport const CENTER_DIVISOR = 2;\n\nexport const tiltFollowingTheCursor =\n    (the3dElementBounds: DOMRect, element: HTMLElement) => (e: MouseEvent) => {\n        const mouseX = e.clientX;\n        const mouseY = e.clientY;\n        const leftX = mouseX - the3dElementBounds.x;\n        const topY = mouseY - the3dElementBounds.y;\n        const center = {\n            x: leftX - the3dElementBounds.width / CENTER_DIVISOR,\n            y: topY - the3dElementBounds.height / CENTER_DIVISOR,\n        };\n        const distance = Math.sqrt(\n            center.x ** CENTER_DIVISOR + center.y ** CENTER_DIVISOR,\n        );\n\n        const scalingFactor = Math.sqrt(\n            Math.min(the3dElementBounds.width, the3dElementBounds.height) /\n                SCALING_BASE,\n        );\n\n        const rotate3d = `\n            ${center.y / (MOUSE_SCALE_FACTOR * scalingFactor)},\n            ${-center.x / (MOUSE_SCALE_FACTOR * scalingFactor)},\n            0,\n            ${(Math.log(distance) * ROTATION_DEGREE_MULTIPLIER) / scalingFactor}deg\n        `;\n        element.style.setProperty('--limel-3d-hover-effect-rotate3d', rotate3d);\n\n        const glowPosition = `\n            ${center.x * GLOW_POSITION_MULTIPLIER + the3dElementBounds.width / CENTER_DIVISOR}px\n            ${center.y * GLOW_POSITION_MULTIPLIER + the3dElementBounds.height / CENTER_DIVISOR}px\n        `;\n        element.style.setProperty(\n            '--limel-3d-hover-effect-glow-position',\n            glowPosition,\n        );\n    };\n\nexport const getMouseEventHandlers = (element: HTMLElement) => {\n    let tiltCallback: (e: MouseEvent) => void;\n\n    const handleMouseEnter = () => {\n        const bounds = element.getBoundingClientRect();\n        tiltCallback = tiltFollowingTheCursor(bounds, element);\n        document.addEventListener('mousemove', tiltCallback);\n    };\n\n    const handleMouseLeave = () => {\n        document.removeEventListener('mousemove', tiltCallback);\n        element.style.removeProperty('--limel-3d-hover-effect-rotate3d');\n        element.style.removeProperty('--limel-3d-hover-effect-glow-position');\n    };\n\n    return {\n        handleMouseEnter: handleMouseEnter,\n        handleMouseLeave: handleMouseLeave,\n    };\n};\n"],"version":3}

package/dist/esm/lime-elements.js

@@ -17,7 +17,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy(JSON.parse("[[\"limel-text-editor\",[[17,\"limel-text-editor\",{\"contentType\":[1,\"content-type\"],\"language\":[513],\"disabled\":[516],\"readonly\":[516],\"helperText\":[513,\"helper-text\"],\"placeholder\":[513],\"label\":[513],\"invalid\":[516],\"value\":[513],\"customElements\":[16],\"triggers\":[16],\"required\":[516],\"allowResize\":[516,\"allow-resize\"],\"ui\":[513]}]]],[\"limel-file\",[[1,\"limel-file\",{\"value\":[16],\"label\":[513],\"required\":[516],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"accept\":[513],\"language\":[1]}]]],[\"limel-card\",[[1,\"limel-card\",{\"heading\":[513],\"subheading\":[513],\"image\":[16],\"icon\":[513],\"value\":[1],\"actions\":[16],\"clickable\":[516],\"orientation\":[513]}]]],[\"limel-picker\",[[1,\"limel-picker\",{\"disabled\":[4],\"readonly\":[516],\"label\":[1],\"searchLabel\":[1,\"search-label\"],\"helperText\":[513,\"helper-text\"],\"leadingIcon\":[1,\"leading-icon\"],\"emptyResultMessage\":[1,\"empty-result-message\"],\"required\":[4],\"invalid\":[516],\"value\":[16],\"searcher\":[16],\"allItems\":[16],\"multiple\":[4],\"delimiter\":[513],\"actions\":[16],\"actionPosition\":[1,\"action-position\"],\"actionScrollBehavior\":[1,\"action-scroll-behavior\"],\"badgeIcons\":[516,\"badge-icons\"],\"items\":[32],\"textValue\":[32],\"loading\":[32],\"chips\":[32]}]]],[\"limel-split-button\",[[17,\"limel-split-button\",{\"label\":[513],\"primary\":[516],\"icon\":[513],\"disabled\":[516],\"loading\":[516],\"loadingFailed\":[516,\"loading-failed\"],\"items\":[16]}]]],[\"limel-file-viewer\",[[1,\"limel-file-viewer\",{\"url\":[513],\"filename\":[513],\"alt\":[513],\"allowFullscreen\":[516,\"allow-fullscreen\"],\"allowOpenInNewTab\":[516,\"allow-open-in-new-tab\"],\"allowDownload\":[516,\"allow-download\"],\"language\":[1],\"officeViewer\":[513,\"office-viewer\"],\"actions\":[16],\"isFullscreen\":[32],\"fileType\":[32],\"loading\":[32],\"fileUrl\":[32]}]]],[\"limel-color-picker\",[[1,\"limel-color-picker\",{\"value\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"tooltipLabel\":[513,\"tooltip-label\"],\"required\":[516],\"readonly\":[516],\"isOpen\":[32]}]]],[\"limel-date-picker\",[[1,\"limel-date-picker\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"placeholder\":[513],\"helperText\":[513,\"helper-text\"],\"required\":[516],\"value\":[16],\"type\":[513],\"format\":[513],\"language\":[513],\"formatter\":[16],\"internalFormat\":[32],\"showPortal\":[32]}]]],[\"limel-dock\",[[1,\"limel-dock\",{\"dockItems\":[16],\"dockFooterItems\":[16],\"accessibleLabel\":[513,\"accessible-label\"],\"expanded\":[516],\"allowResize\":[516,\"allow-resize\"],\"mobileBreakPoint\":[514,\"mobile-break-point\"],\"useMobileLayout\":[32]}]]],[\"limel-snackbar\",[[1,\"limel-snackbar\",{\"open\":[516],\"message\":[1],\"timeout\":[514],\"actionText\":[1,\"action-text\"],\"dismissible\":[4],\"multiline\":[4],\"language\":[1],\"offset\":[32],\"isOpen\":[32],\"closing\":[32],\"show\":[64]},[[0,\"changeOffset\",\"onChangeIndex\"]]]]],[\"limel-tab-panel\",[[1,\"limel-tab-panel\",{\"tabs\":[1040]}]]],[\"limel-select\",[[1,\"limel-select\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"required\":[516],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"value\":[16],\"options\":[16],\"multiple\":[4],\"menuOpen\":[32]}]]],[\"limel-button-group\",[[1,\"limel-button-group\",{\"value\":[16],\"disabled\":[516],\"selectedButtonId\":[32]}]]],[\"limel-chart\",[[1,\"limel-chart\",{\"language\":[513],\"accessibleLabel\":[513,\"accessible-label\"],\"accessibleItemsLabel\":[513,\"accessible-items-label\"],\"items\":[16],\"type\":[513],\"orientation\":[513],\"maxValue\":[514,\"max-value\"],\"axisIncrement\":[514,\"axis-increment\"],\"loading\":[516]}]]],[\"limel-collapsible-section\",[[1,\"limel-collapsible-section\",{\"isOpen\":[1540,\"is-open\"],\"header\":[513],\"actions\":[16]}]]],[\"limel-help\",[[1,\"limel-help\",{\"value\":[1],\"trigger\":[1],\"readMoreLink\":[16],\"openDirection\":[513,\"open-direction\"],\"isOpen\":[32]}]]],[\"limel-table\",[[1,\"limel-table\",{\"data\":[16],\"columns\":[16],\"mode\":[1],\"layout\":[1],\"pageSize\":[2,\"page-size\"],\"totalRows\":[2,\"total-rows\"],\"sorting\":[16],\"activeRow\":[1040],\"movableColumns\":[4,\"movable-columns\"],\"loading\":[4],\"page\":[2],\"emptyMessage\":[1,\"empty-message\"],\"aggregates\":[16],\"selectable\":[4],\"selection\":[16]}]]],[\"limel-info-tile\",[[1,\"limel-info-tile\",{\"value\":[520],\"icon\":[1],\"label\":[513],\"prefix\":[513],\"suffix\":[513],\"disabled\":[516],\"badge\":[520],\"loading\":[516],\"link\":[16],\"progress\":[16]}]]],[\"limel-switch\",[[1,\"limel-switch\",{\"label\":[513],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"value\":[516],\"helperText\":[513,\"helper-text\"],\"readonlyLabels\":[16],\"fieldId\":[32]}]]],[\"limel-dialog\",[[1,\"limel-dialog\",{\"heading\":[1],\"fullscreen\":[516],\"open\":[1540],\"closingActions\":[16]}]]],[\"limel-progress-flow\",[[1,\"limel-progress-flow\",{\"flowItems\":[16],\"disabled\":[4],\"readonly\":[4]}]]],[\"limel-shortcut\",[[1,\"limel-shortcut\",{\"icon\":[513],\"label\":[513],\"disabled\":[516],\"badge\":[520],\"link\":[16]}]]],[\"limel-banner\",[[1,\"limel-banner\",{\"message\":[513],\"icon\":[513],\"isOpen\":[32],\"open\":[64],\"close\":[64]}]]],[\"limel-callout\",[[1,\"limel-callout\",{\"heading\":[513],\"icon\":[513],\"type\":[513],\"language\":[1]}]]],[\"limel-slider\",[[1,\"limel-slider\",{\"disabled\":[516],\"readonly\":[516],\"factor\":[514],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"unit\":[513],\"value\":[514],\"valuemax\":[514],\"valuemin\":[514],\"step\":[514],\"percentageClass\":[32]}]]],[\"limel-code-editor\",[[1,\"limel-code-editor\",{\"value\":[1],\"language\":[1],\"readonly\":[4],\"lineNumbers\":[4,\"line-numbers\"],\"fold\":[4],\"lint\":[4],\"colorScheme\":[1,\"color-scheme\"],\"random\":[32]}]]],[\"limel-config\",[[1,\"limel-config\",{\"config\":[16]}]]],[\"limel-flex-container\",[[1,\"limel-flex-container\",{\"direction\":[513],\"justify\":[513],\"align\":[513],\"reverse\":[516]}]]],[\"limel-form\",[[1,\"limel-form\",{\"schema\":[16],\"value\":[16],\"disabled\":[4],\"propsFactory\":[16],\"transformErrors\":[16],\"errors\":[16]}]]],[\"limel-grid\",[[1,\"limel-grid\"]]],[\"limel-prosemirror-adapter\",[[17,\"limel-prosemirror-adapter\",{\"contentType\":[1,\"content-type\"],\"value\":[1],\"language\":[513],\"disabled\":[516],\"customElements\":[16],\"triggerCharacters\":[16],\"view\":[32],\"actionBarItems\":[32],\"link\":[32],\"isLinkMenuOpen\":[32]}]]],[\"limel-color-picker-palette\",[[17,\"limel-color-picker-palette\",{\"value\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"required\":[516]}]]],[\"limel-dock-button\",[[0,\"limel-dock-button\",{\"item\":[16],\"expanded\":[516],\"useMobileLayout\":[516,\"use-mobile-layout\"],\"isOpen\":[32]}]]],[\"limel-icon-button\",[[17,\"limel-icon-button\",{\"icon\":[513],\"elevated\":[516],\"label\":[513],\"disabled\":[516]}]]],[\"limel-tab-bar\",[[1,\"limel-tab-bar\",{\"tabs\":[1040],\"canScrollLeft\":[32],\"canScrollRight\":[32]},[[9,\"resize\",\"handleWindowResize\"]]]]],[\"limel-checkbox\",[[1,\"limel-checkbox\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"checked\":[516],\"indeterminate\":[516],\"required\":[516],\"readonlyLabels\":[16],\"modified\":[32]}]]],[\"limel-header\",[[1,\"limel-header\",{\"icon\":[1],\"heading\":[1],\"subheading\":[1],\"supportingText\":[1,\"supporting-text\"],\"subheadingDivider\":[1,\"subheading-divider\"]}]]],[\"limel-help-content\",[[1,\"limel-help-content\",{\"value\":[1],\"readMoreLink\":[16]}]]],[\"limel-progress-flow-item\",[[0,\"limel-progress-flow-item\",{\"item\":[16],\"disabled\":[4],\"readonly\":[4],\"currentStep\":[4,\"current-step\"]}]]],[\"limel-circular-progress\",[[1,\"limel-circular-progress\",{\"value\":[2],\"maxValue\":[2,\"max-value\"],\"prefix\":[513],\"suffix\":[1],\"displayPercentageColors\":[4,\"display-percentage-colors\"],\"size\":[513]}]]],[\"limel-flatpickr-adapter\",[[1,\"limel-flatpickr-adapter\",{\"value\":[16],\"type\":[1],\"format\":[1],\"isOpen\":[4,\"is-open\"],\"inputElement\":[16],\"language\":[1],\"formatter\":[16]}]]],[\"limel-file-dropzone_2\",[[1,\"limel-file-dropzone\",{\"accept\":[513],\"disabled\":[4],\"text\":[1],\"helperText\":[1,\"helper-text\"],\"hasFileToDrop\":[32]}],[1,\"limel-file-input\",{\"accept\":[513],\"disabled\":[516],\"multiple\":[516]}]]],[\"limel-markdown\",[[1,\"limel-markdown\",{\"value\":[1],\"whitelist\":[16]}]]],[\"limel-portal\",[[1,\"limel-portal\",{\"openDirection\":[513,\"open-direction\"],\"position\":[513],\"containerId\":[513,\"container-id\"],\"containerStyle\":[16],\"inheritParentWidth\":[516,\"inherit-parent-width\"],\"visible\":[516],\"anchor\":[16]}]]],[\"limel-icon\",[[1,\"limel-icon\",{\"size\":[513],\"name\":[513],\"badge\":[516]}]]],[\"limel-dynamic-label_2\",[[1,\"limel-dynamic-label\",{\"value\":[8],\"defaultLabel\":[16],\"labels\":[16]}],[1,\"limel-helper-line\",{\"helperText\":[513,\"helper-text\"],\"length\":[514],\"maxLength\":[514,\"max-length\"],\"invalid\":[516],\"helperTextId\":[513,\"helper-text-id\"]}]]],[\"limel-badge_3\",[[1,\"limel-badge\",{\"label\":[520]}],[1,\"limel-tooltip\",{\"elementId\":[513,\"element-id\"],\"label\":[513],\"helperLabel\":[513,\"helper-label\"],\"maxlength\":[514],\"openDirection\":[513,\"open-direction\"],\"open\":[32]}],[1,\"limel-tooltip-content\",{\"label\":[513],\"helperLabel\":[513,\"helper-label\"],\"maxlength\":[514]}]]],[\"limel-breadcrumbs_7\",[[1,\"limel-menu\",{\"items\":[16],\"disabled\":[516],\"openDirection\":[513,\"open-direction\"],\"surfaceWidth\":[513,\"surface-width\"],\"open\":[1540],\"badgeIcons\":[516,\"badge-icons\"],\"gridLayout\":[516,\"grid-layout\"],\"loading\":[516],\"currentSubMenu\":[1040],\"rootItem\":[16],\"searcher\":[16],\"emptyResultMessage\":[1,\"empty-result-message\"],\"loadingSubItems\":[32],\"searchValue\":[32],\"searchResults\":[32]}],[1,\"limel-breadcrumbs\",{\"items\":[16],\"divider\":[1]}],[17,\"limel-menu-list\",{\"items\":[16],\"badgeIcons\":[4,\"badge-icons\"],\"iconSize\":[1,\"icon-size\"],\"type\":[1],\"maxLinesSecondaryText\":[2,\"max-lines-secondary-text\"]}],[1,\"limel-input-field\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"placeholder\":[513],\"helperText\":[513,\"helper-text\"],\"prefix\":[513],\"suffix\":[513],\"required\":[516],\"value\":[513],\"trailingIcon\":[513,\"trailing-icon\"],\"leadingIcon\":[513,\"leading-icon\"],\"pattern\":[513],\"type\":[513],\"formatNumber\":[516,\"format-number\"],\"step\":[520],\"max\":[514],\"min\":[514],\"maxlength\":[514],\"minlength\":[514],\"completions\":[16],\"showLink\":[516,\"show-link\"],\"locale\":[513],\"isFocused\":[32],\"wasInvalid\":[32],\"showCompletions\":[32]}],[1,\"limel-spinner\",{\"size\":[513],\"limeBranded\":[4,\"lime-branded\"]}],[17,\"limel-list\",{\"items\":[16],\"badgeIcons\":[4,\"badge-icons\"],\"iconSize\":[1,\"icon-size\"],\"type\":[1],\"maxLinesSecondaryText\":[2,\"max-lines-secondary-text\"]}],[1,\"limel-menu-surface\",{\"open\":[4],\"allowClicksElement\":[16]}]]],[\"limel-chip_2\",[[1,\"limel-chip-set\",{\"value\":[16],\"type\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"inputType\":[513,\"input-type\"],\"maxItems\":[514,\"max-items\"],\"required\":[516],\"searchLabel\":[513,\"search-label\"],\"emptyInputOnBlur\":[516,\"empty-input-on-blur\"],\"clearAllButton\":[4,\"clear-all-button\"],\"leadingIcon\":[513,\"leading-icon\"],\"delimiter\":[513],\"autocomplete\":[513],\"language\":[1],\"editMode\":[32],\"textValue\":[32],\"blurred\":[32],\"inputChipIndexSelected\":[32],\"selectedChipIds\":[32],\"getEditMode\":[64],\"setFocus\":[64],\"emptyInput\":[64]}],[17,\"limel-chip\",{\"language\":[513],\"text\":[513],\"icon\":[1],\"image\":[16],\"link\":[16],\"badge\":[520],\"disabled\":[516],\"readonly\":[516],\"selected\":[516],\"invalid\":[516],\"removable\":[516],\"type\":[513],\"loading\":[516],\"progress\":[514],\"identifier\":[520],\"menuItems\":[16]}]]],[\"limel-button\",[[17,\"limel-button\",{\"label\":[513],\"primary\":[516],\"outlined\":[516],\"icon\":[513],\"disabled\":[516],\"loading\":[516],\"loadingFailed\":[516,\"loading-failed\"],\"justLoaded\":[32]}]]],[\"limel-linear-progress\",[[1,\"limel-linear-progress\",{\"language\":[513],\"value\":[514],\"indeterminate\":[516],\"accessibleLabel\":[513,\"accessible-label\"]}]]],[\"limel-action-bar-item_2\",[[0,\"limel-action-bar-overflow-menu\",{\"items\":[16],\"openDirection\":[513,\"open-direction\"]}],[0,\"limel-action-bar-item\",{\"item\":[16],\"isVisible\":[516,\"is-visible\"],\"selected\":[516]}]]],[\"limel-action-bar_2\",[[1,\"limel-text-editor-link-menu\",{\"link\":[16],\"language\":[513],\"isOpen\":[516,\"is-open\"]}],[1,\"limel-action-bar\",{\"actions\":[16],\"accessibleLabel\":[513,\"accessible-label\"],\"layout\":[513],\"openDirection\":[513,\"open-direction\"],\"overflowCutoff\":[32]}]]],[\"limel-popover_2\",[[1,\"limel-popover\",{\"open\":[4],\"openDirection\":[513,\"open-direction\"]}],[1,\"limel-popover-surface\",{\"contentCollection\":[16]}]]]]"), options);
+  return bootstrapLazy(JSON.parse("[[\"limel-text-editor\",[[17,\"limel-text-editor\",{\"contentType\":[1,\"content-type\"],\"language\":[513],\"disabled\":[516],\"readonly\":[516],\"helperText\":[513,\"helper-text\"],\"placeholder\":[513],\"label\":[513],\"invalid\":[516],\"value\":[513],\"customElements\":[16],\"triggers\":[16],\"required\":[516],\"allowResize\":[516,\"allow-resize\"],\"ui\":[513]}]]],[\"limel-card\",[[1,\"limel-card\",{\"heading\":[513],\"subheading\":[513],\"image\":[16],\"icon\":[513],\"value\":[1],\"actions\":[16],\"clickable\":[516],\"orientation\":[513]}]]],[\"limel-file\",[[1,\"limel-file\",{\"value\":[16],\"label\":[513],\"required\":[516],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"accept\":[513],\"language\":[1]}]]],[\"limel-picker\",[[1,\"limel-picker\",{\"disabled\":[4],\"readonly\":[516],\"label\":[1],\"searchLabel\":[1,\"search-label\"],\"helperText\":[513,\"helper-text\"],\"leadingIcon\":[1,\"leading-icon\"],\"emptyResultMessage\":[1,\"empty-result-message\"],\"required\":[4],\"invalid\":[516],\"value\":[16],\"searcher\":[16],\"allItems\":[16],\"multiple\":[4],\"delimiter\":[513],\"actions\":[16],\"actionPosition\":[1,\"action-position\"],\"actionScrollBehavior\":[1,\"action-scroll-behavior\"],\"badgeIcons\":[516,\"badge-icons\"],\"items\":[32],\"textValue\":[32],\"loading\":[32],\"chips\":[32]}]]],[\"limel-split-button\",[[17,\"limel-split-button\",{\"label\":[513],\"primary\":[516],\"icon\":[513],\"disabled\":[516],\"loading\":[516],\"loadingFailed\":[516,\"loading-failed\"],\"items\":[16]}]]],[\"limel-file-viewer\",[[1,\"limel-file-viewer\",{\"url\":[513],\"filename\":[513],\"alt\":[513],\"allowFullscreen\":[516,\"allow-fullscreen\"],\"allowOpenInNewTab\":[516,\"allow-open-in-new-tab\"],\"allowDownload\":[516,\"allow-download\"],\"language\":[1],\"officeViewer\":[513,\"office-viewer\"],\"actions\":[16],\"isFullscreen\":[32],\"fileType\":[32],\"loading\":[32],\"fileUrl\":[32]}]]],[\"limel-color-picker\",[[1,\"limel-color-picker\",{\"value\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"tooltipLabel\":[513,\"tooltip-label\"],\"required\":[516],\"readonly\":[516],\"isOpen\":[32]}]]],[\"limel-date-picker\",[[1,\"limel-date-picker\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"placeholder\":[513],\"helperText\":[513,\"helper-text\"],\"required\":[516],\"value\":[16],\"type\":[513],\"format\":[513],\"language\":[513],\"formatter\":[16],\"internalFormat\":[32],\"showPortal\":[32]}]]],[\"limel-dock\",[[1,\"limel-dock\",{\"dockItems\":[16],\"dockFooterItems\":[16],\"accessibleLabel\":[513,\"accessible-label\"],\"expanded\":[516],\"allowResize\":[516,\"allow-resize\"],\"mobileBreakPoint\":[514,\"mobile-break-point\"],\"useMobileLayout\":[32]}]]],[\"limel-snackbar\",[[1,\"limel-snackbar\",{\"open\":[516],\"message\":[1],\"timeout\":[514],\"actionText\":[1,\"action-text\"],\"dismissible\":[4],\"multiline\":[4],\"language\":[1],\"offset\":[32],\"isOpen\":[32],\"closing\":[32],\"show\":[64]},[[0,\"changeOffset\",\"onChangeIndex\"]]]]],[\"limel-tab-panel\",[[1,\"limel-tab-panel\",{\"tabs\":[1040]}]]],[\"limel-select\",[[1,\"limel-select\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"required\":[516],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"value\":[16],\"options\":[16],\"multiple\":[4],\"menuOpen\":[32]}]]],[\"limel-button-group\",[[1,\"limel-button-group\",{\"value\":[16],\"disabled\":[516],\"selectedButtonId\":[32]}]]],[\"limel-chart\",[[1,\"limel-chart\",{\"language\":[513],\"accessibleLabel\":[513,\"accessible-label\"],\"accessibleItemsLabel\":[513,\"accessible-items-label\"],\"items\":[16],\"type\":[513],\"orientation\":[513],\"maxValue\":[514,\"max-value\"],\"axisIncrement\":[514,\"axis-increment\"],\"loading\":[516]}]]],[\"limel-collapsible-section\",[[1,\"limel-collapsible-section\",{\"isOpen\":[1540,\"is-open\"],\"header\":[513],\"actions\":[16]}]]],[\"limel-help\",[[1,\"limel-help\",{\"value\":[1],\"trigger\":[1],\"readMoreLink\":[16],\"openDirection\":[513,\"open-direction\"],\"isOpen\":[32]}]]],[\"limel-info-tile\",[[1,\"limel-info-tile\",{\"value\":[520],\"icon\":[1],\"label\":[513],\"prefix\":[513],\"suffix\":[513],\"disabled\":[516],\"badge\":[520],\"loading\":[516],\"link\":[16],\"progress\":[16]}]]],[\"limel-table\",[[1,\"limel-table\",{\"data\":[16],\"columns\":[16],\"mode\":[1],\"layout\":[1],\"pageSize\":[2,\"page-size\"],\"totalRows\":[2,\"total-rows\"],\"sorting\":[16],\"activeRow\":[1040],\"movableColumns\":[4,\"movable-columns\"],\"loading\":[4],\"page\":[2],\"emptyMessage\":[1,\"empty-message\"],\"aggregates\":[16],\"selectable\":[4],\"selection\":[16]}]]],[\"limel-shortcut\",[[1,\"limel-shortcut\",{\"icon\":[513],\"label\":[513],\"disabled\":[516],\"badge\":[520],\"link\":[16]}]]],[\"limel-switch\",[[1,\"limel-switch\",{\"label\":[513],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"value\":[516],\"helperText\":[513,\"helper-text\"],\"readonlyLabels\":[16],\"fieldId\":[32]}]]],[\"limel-dialog\",[[1,\"limel-dialog\",{\"heading\":[1],\"fullscreen\":[516],\"open\":[1540],\"closingActions\":[16]}]]],[\"limel-progress-flow\",[[1,\"limel-progress-flow\",{\"flowItems\":[16],\"disabled\":[4],\"readonly\":[4]}]]],[\"limel-banner\",[[1,\"limel-banner\",{\"message\":[513],\"icon\":[513],\"isOpen\":[32],\"open\":[64],\"close\":[64]}]]],[\"limel-callout\",[[1,\"limel-callout\",{\"heading\":[513],\"icon\":[513],\"type\":[513],\"language\":[1]}]]],[\"limel-slider\",[[1,\"limel-slider\",{\"disabled\":[516],\"readonly\":[516],\"factor\":[514],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"unit\":[513],\"value\":[514],\"valuemax\":[514],\"valuemin\":[514],\"step\":[514],\"percentageClass\":[32]}]]],[\"limel-code-editor\",[[1,\"limel-code-editor\",{\"value\":[1],\"language\":[1],\"readonly\":[4],\"lineNumbers\":[4,\"line-numbers\"],\"fold\":[4],\"lint\":[4],\"colorScheme\":[1,\"color-scheme\"],\"random\":[32]}]]],[\"limel-config\",[[1,\"limel-config\",{\"config\":[16]}]]],[\"limel-flex-container\",[[1,\"limel-flex-container\",{\"direction\":[513],\"justify\":[513],\"align\":[513],\"reverse\":[516]}]]],[\"limel-form\",[[1,\"limel-form\",{\"schema\":[16],\"value\":[16],\"disabled\":[4],\"propsFactory\":[16],\"transformErrors\":[16],\"errors\":[16]}]]],[\"limel-grid\",[[1,\"limel-grid\"]]],[\"limel-prosemirror-adapter\",[[17,\"limel-prosemirror-adapter\",{\"contentType\":[1,\"content-type\"],\"value\":[1],\"language\":[513],\"disabled\":[516],\"customElements\":[16],\"triggerCharacters\":[16],\"view\":[32],\"actionBarItems\":[32],\"link\":[32],\"isLinkMenuOpen\":[32]}]]],[\"limel-color-picker-palette\",[[17,\"limel-color-picker-palette\",{\"value\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"required\":[516]}]]],[\"limel-dock-button\",[[0,\"limel-dock-button\",{\"item\":[16],\"expanded\":[516],\"useMobileLayout\":[516,\"use-mobile-layout\"],\"isOpen\":[32]}]]],[\"limel-tab-bar\",[[1,\"limel-tab-bar\",{\"tabs\":[1040],\"canScrollLeft\":[32],\"canScrollRight\":[32]},[[9,\"resize\",\"handleWindowResize\"]]]]],[\"limel-checkbox\",[[1,\"limel-checkbox\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"checked\":[516],\"indeterminate\":[516],\"required\":[516],\"readonlyLabels\":[16],\"modified\":[32]}]]],[\"limel-header\",[[1,\"limel-header\",{\"icon\":[1],\"heading\":[1],\"subheading\":[1],\"supportingText\":[1,\"supporting-text\"],\"subheadingDivider\":[1,\"subheading-divider\"]}]]],[\"limel-help-content\",[[1,\"limel-help-content\",{\"value\":[1],\"readMoreLink\":[16]}]]],[\"limel-progress-flow-item\",[[0,\"limel-progress-flow-item\",{\"item\":[16],\"disabled\":[4],\"readonly\":[4],\"currentStep\":[4,\"current-step\"]}]]],[\"limel-circular-progress\",[[1,\"limel-circular-progress\",{\"value\":[2],\"maxValue\":[2,\"max-value\"],\"prefix\":[513],\"suffix\":[1],\"displayPercentageColors\":[4,\"display-percentage-colors\"],\"size\":[513]}]]],[\"limel-flatpickr-adapter\",[[1,\"limel-flatpickr-adapter\",{\"value\":[16],\"type\":[1],\"format\":[1],\"isOpen\":[4,\"is-open\"],\"inputElement\":[16],\"language\":[1],\"formatter\":[16]}]]],[\"limel-file-dropzone_2\",[[1,\"limel-file-dropzone\",{\"accept\":[513],\"disabled\":[4],\"text\":[1],\"helperText\":[1,\"helper-text\"],\"hasFileToDrop\":[32]}],[1,\"limel-file-input\",{\"accept\":[513],\"disabled\":[516],\"multiple\":[516]}]]],[\"limel-3d-hover-effect-glow\",[[1,\"limel-3d-hover-effect-glow\"]]],[\"limel-badge_3\",[[1,\"limel-badge\",{\"label\":[520]}],[1,\"limel-tooltip\",{\"elementId\":[513,\"element-id\"],\"label\":[513],\"helperLabel\":[513,\"helper-label\"],\"maxlength\":[514],\"openDirection\":[513,\"open-direction\"],\"open\":[32]}],[1,\"limel-tooltip-content\",{\"label\":[513],\"helperLabel\":[513,\"helper-label\"],\"maxlength\":[514]}]]],[\"limel-icon-button\",[[17,\"limel-icon-button\",{\"icon\":[513],\"elevated\":[516],\"label\":[513],\"disabled\":[516]}]]],[\"limel-markdown\",[[1,\"limel-markdown\",{\"value\":[1],\"whitelist\":[16]}]]],[\"limel-portal\",[[1,\"limel-portal\",{\"openDirection\":[513,\"open-direction\"],\"position\":[513],\"containerId\":[513,\"container-id\"],\"containerStyle\":[16],\"inheritParentWidth\":[516,\"inherit-parent-width\"],\"visible\":[516],\"anchor\":[16]}]]],[\"limel-icon\",[[1,\"limel-icon\",{\"size\":[513],\"name\":[513],\"badge\":[516]}]]],[\"limel-dynamic-label_2\",[[1,\"limel-dynamic-label\",{\"value\":[8],\"defaultLabel\":[16],\"labels\":[16]}],[1,\"limel-helper-line\",{\"helperText\":[513,\"helper-text\"],\"length\":[514],\"maxLength\":[514,\"max-length\"],\"invalid\":[516],\"helperTextId\":[513,\"helper-text-id\"]}]]],[\"limel-breadcrumbs_7\",[[1,\"limel-menu\",{\"items\":[16],\"disabled\":[516],\"openDirection\":[513,\"open-direction\"],\"surfaceWidth\":[513,\"surface-width\"],\"open\":[1540],\"badgeIcons\":[516,\"badge-icons\"],\"gridLayout\":[516,\"grid-layout\"],\"loading\":[516],\"currentSubMenu\":[1040],\"rootItem\":[16],\"searcher\":[16],\"emptyResultMessage\":[1,\"empty-result-message\"],\"loadingSubItems\":[32],\"searchValue\":[32],\"searchResults\":[32]}],[1,\"limel-breadcrumbs\",{\"items\":[16],\"divider\":[1]}],[17,\"limel-menu-list\",{\"items\":[16],\"badgeIcons\":[4,\"badge-icons\"],\"iconSize\":[1,\"icon-size\"],\"type\":[1],\"maxLinesSecondaryText\":[2,\"max-lines-secondary-text\"]}],[1,\"limel-input-field\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"placeholder\":[513],\"helperText\":[513,\"helper-text\"],\"prefix\":[513],\"suffix\":[513],\"required\":[516],\"value\":[513],\"trailingIcon\":[513,\"trailing-icon\"],\"leadingIcon\":[513,\"leading-icon\"],\"pattern\":[513],\"type\":[513],\"formatNumber\":[516,\"format-number\"],\"step\":[520],\"max\":[514],\"min\":[514],\"maxlength\":[514],\"minlength\":[514],\"completions\":[16],\"showLink\":[516,\"show-link\"],\"locale\":[513],\"isFocused\":[32],\"wasInvalid\":[32],\"showCompletions\":[32]}],[1,\"limel-spinner\",{\"size\":[513],\"limeBranded\":[4,\"lime-branded\"]}],[17,\"limel-list\",{\"items\":[16],\"badgeIcons\":[4,\"badge-icons\"],\"iconSize\":[1,\"icon-size\"],\"type\":[1],\"maxLinesSecondaryText\":[2,\"max-lines-secondary-text\"]}],[1,\"limel-menu-surface\",{\"open\":[4],\"allowClicksElement\":[16]}]]],[\"limel-chip_2\",[[1,\"limel-chip-set\",{\"value\":[16],\"type\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"inputType\":[513,\"input-type\"],\"maxItems\":[514,\"max-items\"],\"required\":[516],\"searchLabel\":[513,\"search-label\"],\"emptyInputOnBlur\":[516,\"empty-input-on-blur\"],\"clearAllButton\":[4,\"clear-all-button\"],\"leadingIcon\":[513,\"leading-icon\"],\"delimiter\":[513],\"autocomplete\":[513],\"language\":[1],\"editMode\":[32],\"textValue\":[32],\"blurred\":[32],\"inputChipIndexSelected\":[32],\"selectedChipIds\":[32],\"getEditMode\":[64],\"setFocus\":[64],\"emptyInput\":[64]}],[17,\"limel-chip\",{\"language\":[513],\"text\":[513],\"icon\":[1],\"image\":[16],\"link\":[16],\"badge\":[520],\"disabled\":[516],\"readonly\":[516],\"selected\":[516],\"invalid\":[516],\"removable\":[516],\"type\":[513],\"loading\":[516],\"progress\":[514],\"identifier\":[520],\"menuItems\":[16]}]]],[\"limel-button\",[[17,\"limel-button\",{\"label\":[513],\"primary\":[516],\"outlined\":[516],\"icon\":[513],\"disabled\":[516],\"loading\":[516],\"loadingFailed\":[516,\"loading-failed\"],\"justLoaded\":[32]}]]],[\"limel-linear-progress\",[[1,\"limel-linear-progress\",{\"language\":[513],\"value\":[514],\"indeterminate\":[516],\"accessibleLabel\":[513,\"accessible-label\"]}]]],[\"limel-action-bar-item_2\",[[0,\"limel-action-bar-overflow-menu\",{\"items\":[16],\"openDirection\":[513,\"open-direction\"]}],[0,\"limel-action-bar-item\",{\"item\":[16],\"isVisible\":[516,\"is-visible\"],\"selected\":[516]}]]],[\"limel-action-bar_2\",[[1,\"limel-text-editor-link-menu\",{\"link\":[16],\"language\":[513],\"isOpen\":[516,\"is-open\"]}],[1,\"limel-action-bar\",{\"actions\":[16],\"accessibleLabel\":[513,\"accessible-label\"],\"layout\":[513],\"openDirection\":[513,\"open-direction\"],\"overflowCutoff\":[32]}]]],[\"limel-popover_2\",[[1,\"limel-popover\",{\"open\":[4],\"openDirection\":[513,\"open-direction\"]}],[1,\"limel-popover-surface\",{\"contentCollection\":[16]}]]]]"), options);
 });
 
 //# sourceMappingURL=lime-elements.js.map

package/dist/esm/limel-3d-hover-effect-glow.entry.js

@@ -0,0 +1,17 @@
+import { r as registerInstance, h } from './index-6156b4fd.js';
+
+const _3dHoverEffectGlowCss = ":host(limel-3d-hover-effect-glow){display:block;pointer-events:none;position:absolute;inset:0;mix-blend-mode:plus-lighter}div{position:absolute;inset:0;transition:background, opacity;transition-timing-function:ease-out;transition-duration:0.8s;border-radius:inherit;opacity:var(--limel-3d-hover-effect-glow-opacity, 0.1);background-image:radial-gradient(circle at var(--limel-3d-hover-effect-glow-position, 50% -20%), rgb(var(--color-white), 0.3), rgb(var(--color-white), 0))}";
+
+const HoverEffectGlowComponent = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return h("div", null);
+  }
+};
+HoverEffectGlowComponent.style = _3dHoverEffectGlowCss;
+
+export { HoverEffectGlowComponent as limel_3d_hover_effect_glow };
+
+//# sourceMappingURL=limel-3d-hover-effect-glow.entry.js.map

package/dist/esm/limel-3d-hover-effect-glow.entry.js.map

@@ -0,0 +1 @@
+{"file":"limel-3d-hover-effect-glow.entry.js","mappings":";;AAAA,MAAM,qBAAqB,GAAG,8dAA8d;;MCqB/e,wBAAwB;;;;EAC1B,MAAM;IACT,OAAO,cAAO,CAAC;GAClB;;;;;;","names":[],"sources":["./src/components/3d-hover-effect-glow/3d-hover-effect-glow.scss?tag=limel-3d-hover-effect-glow&encapsulation=shadow","./src/components/3d-hover-effect-glow/3d-hover-effect-glow.tsx"],"sourcesContent":[":host(limel-3d-hover-effect-glow) {\n    display: block;\n    pointer-events: none;\n\n    position: absolute;\n    inset: 0;\n\n    mix-blend-mode: plus-lighter;\n}\n\ndiv {\n    position: absolute;\n    inset: 0;\n\n    transition: background, opacity;\n    transition-timing-function: ease-out; // Must be the same as the 3D Element itself\n    transition-duration: 0.8s; // Must be the same as the 3D Element itself\n\n    border-radius: inherit;\n\n    opacity: var(--limel-3d-hover-effect-glow-opacity, 0.1);\n\n    background-image: radial-gradient(\n        circle at var(--limel-3d-hover-effect-glow-position, 50% -20%),\n        rgb(var(--color-white), 0.3),\n        rgb(var(--color-white), 0)\n    );\n}\n","import { Component, h } from '@stencil/core';\n/**\n * This component enhances the visual effects, when the `tiltFollowingTheCursor`\n * utility function from `3d-tilt-hover-effect.ts` is implemented in a component.\n *\n * This component should be added to the HTML structure of the consumer component.\n *\n * This component carries its own styles which are needed to create a glow effect on the\n * 3D element within the parent element, when the parent is hovered.\n *\n * The parent element must be using the `tiltFollowingTheCursor` utility function\n * imported from `3d-tilt-hover-effect.ts`. This function will dynamically\n * affect parts of the styles of this 3D glow effect.\n *\n * @private\n */\n@Component({\n    tag: 'limel-3d-hover-effect-glow',\n    shadow: true,\n    styleUrl: '3d-hover-effect-glow.scss',\n})\nexport class HoverEffectGlowComponent {\n    public render() {\n        return <div />;\n    }\n}\n"],"version":3}

package/dist/esm/limel-card.entry.js

@@ -1,9 +1,9 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-6156b4fd.js';
 import { i as isItem } from './isItem-b0459122.js';
 import { g as getIconName } from './get-icon-props-0b65f85e.js';
-import { g as getMouseEventHandlers } from './3d-tilt-hover-effect-a76fcd43.js';
+import { g as getMouseEventHandlers } from './3d-tilt-hover-effect-05648b3c.js';
 
-const cardCss = "@charset \"UTF-8\";*{box-sizing:border-box;min-width:0;min-height:0}:host(limel-card){display:flex;border-radius:var(--card-border-radius, 0.95rem)}section{box-sizing:border-box;display:flex;gap:0.5rem;flex-direction:column;border-radius:var(--card-border-radius, 0.95rem);border:1px solid rgb(var(--contrast-500));padding:0.25rem;background-color:var(--card-background-color, rgb(var(--contrast-300)))}:host(limel-card[orientation=landscape]) section{flex-direction:row}section:hover{border-color:transparent;background-color:var(--card-background-color--hovered, var(--card-background-color, rgb(var(--contrast-200))))}.body{flex-grow:1;display:flex;flex-direction:column;gap:0.5rem}img{flex-shrink:0;transition:filter 0.6s ease;object-fit:cover;border-radius:calc(var(--card-border-radius, 0.95rem) / 1.4)}:host(limel-card[orientation=portrait]) img{width:100%}:host(limel-card[orientation=landscape]) img{max-width:40%;height:100%}section:hover img,section:focus-visible img{transition-duration:0.2s;filter:saturate(1.3)}limel-markdown{padding:0.5rem 0.75rem}header{display:flex;justify-content:center;gap:0.5rem;padding:0.25rem 0.75rem}:host(limel-card[orientation=landscape]) header{padding-top:0.5rem}header:has(limel-icon){padding-left:0.25rem}header .headings{flex-grow:1;display:flex;flex-direction:column;gap:0.125rem}header limel-icon{flex-shrink:0;width:2rem}header h1{font-size:1.125rem;font-weight:500;color:var(--card-heading-color, rgb(var(--contrast-1100)));letter-spacing:-0.03125rem}header h2{font-size:0.875rem;font-weight:400;color:var(--card-subheading-color, rgb(var(--contrast-1000)))}header h1,header h2{word-break:break-word;hyphens:auto;-webkit-hyphens:auto;margin:0}limel-action-bar{--action-bar-background-color:transparent;padding:0.5rem;margin-left:auto}.limel-3d-hover-effect-glow{transition:background 0.4s ease, opacity 0.4s ease;pointer-events:none;position:absolute;inset:0;border-radius:var(--card-border-radius, 0.95rem);opacity:0.1;background-image:radial-gradient(circle at var(--limel-3d-hover-effect-glow-position, 50% -20%), rgb(var(--color-white), 0.3), rgb(var(--color-white), 0));mix-blend-mode:plus-lighter}section:hover .limel-3d-hover-effect-glow{opacity:0.5}@media (prefers-reduced-motion){section:hover .limel-3d-hover-effect-glow{opacity:0.2}}:host(limel-card){isolation:isolate;transform-style:preserve-3d;perspective:1000px}@media (prefers-reduced-motion){:host(limel-card){perspective:2000px}}section{position:relative;transition-duration:0.8s;transition-property:transform, box-shadow, background-color;transition-timing-function:ease-out;transform:scale3d(1, 1, 1) rotate3d(0, 0, 0, 0deg)}section:focus{outline:none}section:hover,section:focus,section:focus-visible,section:focus-within{will-change:background-color, box-shadow, transform}section:hover,section:focus,section:focus-visible,section:active{transition-duration:0.2s}section:hover,section:focus-visible{box-shadow:var(--button-shadow-hovered), var(--shadow-depth-16)}section:hover{transform:scale3d(1.01, 1.01, 1.01) rotate3d(var(--limel-3d-hover-effect-rotate3d))}section:focus-visible{outline:none;transform:scale3d(1.01, 1.01, 1.01)}:host(limel-card[clickable]) section{cursor:pointer;box-shadow:var(--button-shadow-normal)}:host(limel-card[clickable]) section:hover,:host(limel-card[clickable]) section:focus-visible{box-shadow:var(--button-shadow-hovered), var(--shadow-depth-16)}:host(limel-card[clickable]) section:active{transform:scale3d(1, 1, 1) rotate3d(0, 0, 0, 0deg);box-shadow:var(--button-shadow-pressed)}:host(limel-card[clickable]) section:focus-visible{box-shadow:var(--shadow-depth-8-focused), var(--button-shadow-hovered)}:host(limel-card[clickable]) section:focus-visible:active{box-shadow:var(--shadow-depth-8-focused), var(--button-shadow-pressed)}";
+const cardCss = "@charset \"UTF-8\";*{box-sizing:border-box;min-width:0;min-height:0}:host(limel-card){display:flex;border-radius:var(--card-border-radius, 0.95rem)}section{box-sizing:border-box;display:flex;gap:0.5rem;flex-direction:column;border-radius:var(--card-border-radius, 0.95rem);border:1px solid rgb(var(--contrast-500));padding:0.25rem;background-color:var(--card-background-color, rgb(var(--contrast-300)))}:host(limel-card[orientation=landscape]) section{flex-direction:row}section:hover{border-color:transparent;background-color:var(--card-background-color--hovered, var(--card-background-color, rgb(var(--contrast-200))))}.body{flex-grow:1;display:flex;flex-direction:column;gap:0.5rem}img{flex-shrink:0;transition:filter 0.6s ease;object-fit:cover;border-radius:calc(var(--card-border-radius, 0.95rem) / 1.4)}:host(limel-card[orientation=portrait]) img{width:100%}:host(limel-card[orientation=landscape]) img{max-width:40%;height:100%}section:hover img,section:focus-visible img{transition-duration:0.2s;filter:saturate(1.3)}limel-markdown{padding:0.5rem 0.75rem}header{display:flex;justify-content:center;gap:0.5rem;padding:0.25rem 0.75rem}:host(limel-card[orientation=landscape]) header{padding-top:0.5rem}header:has(limel-icon){padding-left:0.25rem}header .headings{flex-grow:1;display:flex;flex-direction:column;gap:0.125rem}header limel-icon{flex-shrink:0;width:2rem}header h1{font-size:1.125rem;font-weight:500;color:var(--card-heading-color, rgb(var(--contrast-1100)));letter-spacing:-0.03125rem}header h2{font-size:0.875rem;font-weight:400;color:var(--card-subheading-color, rgb(var(--contrast-1000)))}header h1,header h2{word-break:break-word;hyphens:auto;-webkit-hyphens:auto;margin:0}limel-action-bar{--action-bar-background-color:transparent;padding:0.5rem;margin-left:auto}limel-3d-hover-effect-glow{border-radius:var(--card-border-radius, 0.95rem)}:host(limel-card){isolation:isolate;transform-style:preserve-3d;perspective:1000px}@media (prefers-reduced-motion){:host(limel-card){perspective:2000px}}section{position:relative;transition-duration:0.8s;transition-property:transform, box-shadow, background-color;transition-timing-function:ease-out;transform:scale3d(1, 1, 1) rotate3d(0, 0, 0, 0deg)}section:focus{outline:none}section:hover,section:focus,section:focus-visible,section:focus-within{will-change:background-color, box-shadow, transform}section:hover,section:focus,section:focus-visible,section:active{transition-duration:0.2s}section:hover,section:focus-visible{box-shadow:var(--button-shadow-hovered), var(--shadow-depth-16)}section:hover{transform:scale3d(1.01, 1.01, 1.01) rotate3d(var(--limel-3d-hover-effect-rotate3d))}section:focus-visible{outline:none;transform:scale3d(1.01, 1.01, 1.01)}section:hover limel-3d-hover-effect-glow{--limel-3d-hover-effect-glow-opacity:0.5}@media (prefers-reduced-motion){section:hover limel-3d-hover-effect-glow{--limel-3d-hover-effect-glow-opacity:0.2}}:host(limel-card[clickable]) section{cursor:pointer;box-shadow:var(--button-shadow-normal)}:host(limel-card[clickable]) section:hover,:host(limel-card[clickable]) section:focus-visible{box-shadow:var(--button-shadow-hovered), var(--shadow-depth-16)}:host(limel-card[clickable]) section:active{transform:scale3d(1, 1, 1) rotate3d(0, 0, 0, 0deg);box-shadow:var(--button-shadow-pressed)}:host(limel-card[clickable]) section:focus-visible{box-shadow:var(--shadow-depth-8-focused), var(--button-shadow-hovered)}:host(limel-card[clickable]) section:focus-visible:active{box-shadow:var(--shadow-depth-8-focused), var(--button-shadow-pressed)}";
 
 const Card = class {
   constructor(hostRef) {
@@ -30,7 +30,7 @@ const Card = class {
     this.handleMouseLeave = handleMouseLeave;
   }
   render() {
-    return (h(Host, { onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("section", { tabindex: this.clickable ? 0 : '' }, this.renderImage(), h("div", { class: "body" }, this.renderHeader(), this.renderSlot(), this.renderValue(), this.renderActionBar()), h("div", { class: "limel-3d-hover-effect-glow" }))));
+    return (h(Host, { onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("section", { tabindex: this.clickable ? 0 : '' }, this.renderImage(), h("div", { class: "body" }, this.renderHeader(), this.renderSlot(), this.renderValue(), this.renderActionBar()), h("limel-3d-hover-effect-glow", null))));
   }
   renderImage() {
     if (!this.image) {

package/dist/esm/limel-card.entry.js.map

@@ -1 +1 @@
-{"file":"limel-card.entry.js","mappings":"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","names":[],"sources":["./src/components/card/card.scss?tag=limel-card&encapsulation=shadow","./src/components/card/card.tsx"],"sourcesContent":["/**\n* @prop --card-heading-color: color of the heading. Defaults to `--contrast-1100`;\n* @prop --card-subheading-color: color of the sub heading. Defaults to `--contrast-1000`;\n* @prop --card-border-radius: border radius of the card. Defaults to `0.95rem`;\n* @prop --card-background-color: background color of the card.\n* @prop --card-background-color--hovered: background color of the card, when hovered.\n*/\n\n@use '../../style/mixins';\n\n$default-border-radius: 0.95rem;\n\n* {\n    box-sizing: border-box;\n    min-width: 0;\n    min-height: 0;\n}\n\n:host(limel-card) {\n    display: flex;\n    border-radius: var(--card-border-radius, $default-border-radius);\n}\n\nsection {\n    box-sizing: border-box;\n\n    display: flex;\n    gap: 0.5rem;\n\n    flex-direction: column;\n    :host(limel-card[orientation='landscape']) & {\n        flex-direction: row;\n    }\n\n    border-radius: var(--card-border-radius, $default-border-radius);\n    border: 1px solid rgb(var(--contrast-500));\n\n    padding: 0.25rem;\n    background-color: var(--card-background-color, rgb(var(--contrast-300)));\n\n    &:hover {\n        border-color: transparent;\n        background-color: var(\n            --card-background-color--hovered,\n            var(--card-background-color, rgb(var(--contrast-200)))\n        );\n    }\n}\n\n.body {\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n    gap: 0.5rem;\n}\n\nimg {\n    flex-shrink: 0;\n    transition: filter 0.6s ease;\n    object-fit: cover;\n    border-radius: calc(\n        var(--card-border-radius, $default-border-radius) / 1.4\n    );\n    :host(limel-card[orientation='portrait']) & {\n        width: 100%;\n    }\n\n    :host(limel-card[orientation='landscape']) & {\n        max-width: 40%;\n        height: 100%;\n    }\n\n    section:hover &,\n    section:focus-visible & {\n        transition-duration: 0.2s;\n        filter: saturate(1.3);\n    }\n}\n\nlimel-markdown {\n    padding: 0.5rem 0.75rem;\n}\n\nheader {\n    display: flex;\n    justify-content: center;\n\n    gap: 0.5rem;\n\n    padding: 0.25rem 0.75rem;\n    :host(limel-card[orientation='landscape']) & {\n        padding-top: 0.5rem;\n    }\n\n    &:has(limel-icon) {\n        padding-left: 0.25rem;\n    }\n\n    .headings {\n        flex-grow: 1;\n        display: flex;\n        flex-direction: column;\n        gap: 0.125rem;\n    }\n\n    limel-icon {\n        flex-shrink: 0;\n        width: 2rem;\n    }\n\n    h1 {\n        font-size: 1.125rem;\n        font-weight: 500;\n        color: var(--card-heading-color, rgb(var(--contrast-1100)));\n        letter-spacing: -0.03125rem; // 0.5px\n    }\n\n    h2 {\n        font-size: 0.875rem;\n        font-weight: 400;\n        color: var(--card-subheading-color, rgb(var(--contrast-1000)));\n    }\n\n    h1,\n    h2 {\n        word-break: break-word;\n        hyphens: auto;\n        -webkit-hyphens: auto;\n        margin: 0;\n    }\n}\n\nlimel-action-bar {\n    --action-bar-background-color: transparent;\n    padding: 0.5rem;\n    margin-left: auto;\n}\n\n// The 3D effect\n@include mixins.limel-3d-hover-effect-glow(\n    section,\n    var(--card-border-radius, $default-border-radius)\n);\n\n:host(limel-card) {\n    @include mixins.parent-of-the-3d-element;\n}\n\nsection {\n    @include mixins.the-3d-element;\n\n    :host(limel-card[clickable]) & {\n        @include mixins.the-3d-element--clickable;\n    }\n}\n","import {\n    Component,\n    h,\n    Prop,\n    Event,\n    EventEmitter,\n    Element,\n    Host,\n} from '@stencil/core';\nimport { Image } from '../../global/shared-types/image.types';\nimport { Icon } from '../../global/shared-types/icon.types';\nimport { isItem } from '../action-bar/isItem';\nimport { getIconName } from '../icon/get-icon-props';\nimport { ListSeparator } from '../../global/shared-types/separator.types';\nimport { ActionBarItem } from '../action-bar/action-bar.types';\nimport { getMouseEventHandlers } from '../../util/3d-tilt-hover-effect';\n\n/**\n * Card is a component that displays content about a single topic,\n * in a structured way. It can contain a header, and some supporting media such\n * as an image or an icon, a body of text, or optional actions.\n *\n * @exampleComponent limel-example-card-basic\n * @exampleComponent limel-example-card-image\n * @exampleComponent limel-example-card-actions\n * @exampleComponent limel-example-card-clickable\n * @exampleComponent limel-example-card-orientation\n * @exampleComponent limel-example-card-slot\n * @exampleComponent limel-example-card-styling\n * @beta\n */\n@Component({\n    tag: 'limel-card',\n    shadow: true,\n    styleUrl: 'card.scss',\n})\nexport class Card {\n    /**\n     * Heading of the card,\n     * to provide a short title about the context.\n     */\n    @Prop({ reflect: true })\n    public heading?: string;\n\n    /**\n     * Subheading of the card\n     * to provide a short description of the context.\n     */\n    @Prop({ reflect: true })\n    public subheading?: string;\n\n    /**\n     * A hero image to display in the card,\n     * to enrich the content with visual information.\n     */\n    @Prop()\n    public image?: Image;\n\n    /**\n     * An icon, to display along with the heading and subheading.\n     */\n    @Prop({ reflect: true })\n    public icon?: string | Icon;\n\n    /**\n     * The content of the card.\n     * Supports markdown, to provide a rich text experience.\n     */\n    @Prop()\n    public value?: string;\n\n    /**\n     * Actions to display in the card,\n     * to provide the user with options to interact with the content.\n     */\n    @Prop()\n    public actions?: Array<ActionBarItem | ListSeparator> = [];\n\n    /**\n     * When true, improve the accessibility of the component and hints the user\n     * that the card can be interacted width.\n     */\n    @Prop({ reflect: true })\n    public clickable: boolean = false;\n\n    /**\n     * The orientation of the card,\n     * specially useful when the card has an image.\n     */\n    @Prop({ reflect: true })\n    public orientation: 'landscape' | 'portrait' = 'portrait';\n\n    /**\n     * Fired when a action bar item has been clicked.\n     */\n    @Event()\n    public actionSelected: EventEmitter<ActionBarItem>;\n\n    @Element()\n    private host: HTMLElement;\n\n    private handleMouseEnter: () => void;\n    private handleMouseLeave: () => void;\n\n    public componentWillLoad() {\n        const { handleMouseEnter, handleMouseLeave } = getMouseEventHandlers(\n            this.host,\n        );\n        this.handleMouseEnter = handleMouseEnter;\n        this.handleMouseLeave = handleMouseLeave;\n    }\n\n    public render() {\n        return (\n            <Host\n                onMouseEnter={this.handleMouseEnter}\n                onMouseLeave={this.handleMouseLeave}\n            >\n                <section tabindex={this.clickable ? 0 : ''}>\n                    {this.renderImage()}\n                    <div class=\"body\">\n                        {this.renderHeader()}\n                        {this.renderSlot()}\n                        {this.renderValue()}\n                        {this.renderActionBar()}\n                    </div>\n                    <div class=\"limel-3d-hover-effect-glow\" />\n                </section>\n            </Host>\n        );\n    }\n\n    private renderImage() {\n        if (!this.image) {\n            return;\n        }\n\n        return <img src={this.image.src} alt={this.image.alt} loading=\"lazy\" />;\n    }\n\n    private renderHeader() {\n        if (!this.heading && !this.subheading && !this.icon) {\n            return;\n        }\n\n        return (\n            <header>\n                {this.renderIcon()}\n                <div class=\"headings\">\n                    {this.renderHeading()}\n                    {this.renderSubheading()}\n                </div>\n            </header>\n        );\n    }\n\n    private renderIcon() {\n        const icon = getIconName(this.icon);\n        const color =\n            typeof this.icon !== 'string' ? this.icon?.color : undefined;\n\n        if (!icon) {\n            return;\n        }\n\n        return (\n            <limel-icon\n                style={{\n                    color: `${color}`,\n                }}\n                badge={true}\n                name={icon}\n            />\n        );\n    }\n\n    private renderHeading() {\n        if (!this.heading) {\n            return;\n        }\n\n        return <h1>{this.heading}</h1>;\n    }\n\n    private renderSubheading() {\n        if (!this.subheading) {\n            return;\n        }\n\n        return <h2>{this.subheading}</h2>;\n    }\n\n    private renderSlot() {\n        return <slot name=\"component\" />;\n    }\n\n    private renderValue() {\n        return <limel-markdown value={this.value} />;\n    }\n\n    private handleActionSelect = (\n        event: CustomEvent<ActionBarItem | ListSeparator>,\n    ) => {\n        event.stopPropagation();\n        if (isItem(event.detail)) {\n            this.actionSelected.emit(event.detail);\n        }\n    };\n\n    private renderActionBar() {\n        if (!this.actions.length) {\n            return;\n        }\n\n        return (\n            <limel-action-bar\n                actions={this.actions}\n                onItemSelected={this.handleActionSelect}\n            />\n        );\n    }\n}\n"],"version":3}
+{"file":"limel-card.entry.js","mappings":"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","names":[],"sources":["./src/components/card/card.scss?tag=limel-card&encapsulation=shadow","./src/components/card/card.tsx"],"sourcesContent":["/**\n* @prop --card-heading-color: color of the heading. Defaults to `--contrast-1100`;\n* @prop --card-subheading-color: color of the sub heading. Defaults to `--contrast-1000`;\n* @prop --card-border-radius: border radius of the card. Defaults to `0.95rem`;\n* @prop --card-background-color: background color of the card.\n* @prop --card-background-color--hovered: background color of the card, when hovered.\n*/\n\n@use '../../style/mixins';\n\n$default-border-radius: 0.95rem;\n\n* {\n    box-sizing: border-box;\n    min-width: 0;\n    min-height: 0;\n}\n\n:host(limel-card) {\n    display: flex;\n    border-radius: var(--card-border-radius, $default-border-radius);\n}\n\nsection {\n    box-sizing: border-box;\n\n    display: flex;\n    gap: 0.5rem;\n\n    flex-direction: column;\n    :host(limel-card[orientation='landscape']) & {\n        flex-direction: row;\n    }\n\n    border-radius: var(--card-border-radius, $default-border-radius);\n    border: 1px solid rgb(var(--contrast-500));\n\n    padding: 0.25rem;\n    background-color: var(--card-background-color, rgb(var(--contrast-300)));\n\n    &:hover {\n        border-color: transparent;\n        background-color: var(\n            --card-background-color--hovered,\n            var(--card-background-color, rgb(var(--contrast-200)))\n        );\n    }\n}\n\n.body {\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n    gap: 0.5rem;\n}\n\nimg {\n    flex-shrink: 0;\n    transition: filter 0.6s ease;\n    object-fit: cover;\n    border-radius: calc(\n        var(--card-border-radius, $default-border-radius) / 1.4\n    );\n    :host(limel-card[orientation='portrait']) & {\n        width: 100%;\n    }\n\n    :host(limel-card[orientation='landscape']) & {\n        max-width: 40%;\n        height: 100%;\n    }\n\n    section:hover &,\n    section:focus-visible & {\n        transition-duration: 0.2s;\n        filter: saturate(1.3);\n    }\n}\n\nlimel-markdown {\n    padding: 0.5rem 0.75rem;\n}\n\nheader {\n    display: flex;\n    justify-content: center;\n\n    gap: 0.5rem;\n\n    padding: 0.25rem 0.75rem;\n    :host(limel-card[orientation='landscape']) & {\n        padding-top: 0.5rem;\n    }\n\n    &:has(limel-icon) {\n        padding-left: 0.25rem;\n    }\n\n    .headings {\n        flex-grow: 1;\n        display: flex;\n        flex-direction: column;\n        gap: 0.125rem;\n    }\n\n    limel-icon {\n        flex-shrink: 0;\n        width: 2rem;\n    }\n\n    h1 {\n        font-size: 1.125rem;\n        font-weight: 500;\n        color: var(--card-heading-color, rgb(var(--contrast-1100)));\n        letter-spacing: -0.03125rem; // 0.5px\n    }\n\n    h2 {\n        font-size: 0.875rem;\n        font-weight: 400;\n        color: var(--card-subheading-color, rgb(var(--contrast-1000)));\n    }\n\n    h1,\n    h2 {\n        word-break: break-word;\n        hyphens: auto;\n        -webkit-hyphens: auto;\n        margin: 0;\n    }\n}\n\nlimel-action-bar {\n    --action-bar-background-color: transparent;\n    padding: 0.5rem;\n    margin-left: auto;\n}\n\n// The 3D effect\nlimel-3d-hover-effect-glow {\n    border-radius: var(--card-border-radius, $default-border-radius);\n}\n\n:host(limel-card) {\n    @include mixins.parent-of-the-3d-element;\n}\n\nsection {\n    @include mixins.the-3d-element;\n\n    :host(limel-card[clickable]) & {\n        @include mixins.the-3d-element--clickable;\n    }\n}\n","import {\n    Component,\n    h,\n    Prop,\n    Event,\n    EventEmitter,\n    Element,\n    Host,\n} from '@stencil/core';\nimport { Image } from '../../global/shared-types/image.types';\nimport { Icon } from '../../global/shared-types/icon.types';\nimport { isItem } from '../action-bar/isItem';\nimport { getIconName } from '../icon/get-icon-props';\nimport { ListSeparator } from '../../global/shared-types/separator.types';\nimport { ActionBarItem } from '../action-bar/action-bar.types';\nimport { getMouseEventHandlers } from '../../util/3d-tilt-hover-effect';\n\n/**\n * Card is a component that displays content about a single topic,\n * in a structured way. It can contain a header, and some supporting media such\n * as an image or an icon, a body of text, or optional actions.\n *\n * @exampleComponent limel-example-card-basic\n * @exampleComponent limel-example-card-image\n * @exampleComponent limel-example-card-actions\n * @exampleComponent limel-example-card-clickable\n * @exampleComponent limel-example-card-orientation\n * @exampleComponent limel-example-card-slot\n * @exampleComponent limel-example-card-styling\n * @beta\n */\n@Component({\n    tag: 'limel-card',\n    shadow: true,\n    styleUrl: 'card.scss',\n})\nexport class Card {\n    /**\n     * Heading of the card,\n     * to provide a short title about the context.\n     */\n    @Prop({ reflect: true })\n    public heading?: string;\n\n    /**\n     * Subheading of the card\n     * to provide a short description of the context.\n     */\n    @Prop({ reflect: true })\n    public subheading?: string;\n\n    /**\n     * A hero image to display in the card,\n     * to enrich the content with visual information.\n     */\n    @Prop()\n    public image?: Image;\n\n    /**\n     * An icon, to display along with the heading and subheading.\n     */\n    @Prop({ reflect: true })\n    public icon?: string | Icon;\n\n    /**\n     * The content of the card.\n     * Supports markdown, to provide a rich text experience.\n     */\n    @Prop()\n    public value?: string;\n\n    /**\n     * Actions to display in the card,\n     * to provide the user with options to interact with the content.\n     */\n    @Prop()\n    public actions?: Array<ActionBarItem | ListSeparator> = [];\n\n    /**\n     * When true, improve the accessibility of the component and hints the user\n     * that the card can be interacted width.\n     */\n    @Prop({ reflect: true })\n    public clickable: boolean = false;\n\n    /**\n     * The orientation of the card,\n     * specially useful when the card has an image.\n     */\n    @Prop({ reflect: true })\n    public orientation: 'landscape' | 'portrait' = 'portrait';\n\n    /**\n     * Fired when a action bar item has been clicked.\n     */\n    @Event()\n    public actionSelected: EventEmitter<ActionBarItem>;\n\n    @Element()\n    private host: HTMLElement;\n\n    private handleMouseEnter: () => void;\n    private handleMouseLeave: () => void;\n\n    public componentWillLoad() {\n        const { handleMouseEnter, handleMouseLeave } = getMouseEventHandlers(\n            this.host,\n        );\n        this.handleMouseEnter = handleMouseEnter;\n        this.handleMouseLeave = handleMouseLeave;\n    }\n\n    public render() {\n        return (\n            <Host\n                onMouseEnter={this.handleMouseEnter}\n                onMouseLeave={this.handleMouseLeave}\n            >\n                <section tabindex={this.clickable ? 0 : ''}>\n                    {this.renderImage()}\n                    <div class=\"body\">\n                        {this.renderHeader()}\n                        {this.renderSlot()}\n                        {this.renderValue()}\n                        {this.renderActionBar()}\n                    </div>\n                    <limel-3d-hover-effect-glow />\n                </section>\n            </Host>\n        );\n    }\n\n    private renderImage() {\n        if (!this.image) {\n            return;\n        }\n\n        return <img src={this.image.src} alt={this.image.alt} loading=\"lazy\" />;\n    }\n\n    private renderHeader() {\n        if (!this.heading && !this.subheading && !this.icon) {\n            return;\n        }\n\n        return (\n            <header>\n                {this.renderIcon()}\n                <div class=\"headings\">\n                    {this.renderHeading()}\n                    {this.renderSubheading()}\n                </div>\n            </header>\n        );\n    }\n\n    private renderIcon() {\n        const icon = getIconName(this.icon);\n        const color =\n            typeof this.icon !== 'string' ? this.icon?.color : undefined;\n\n        if (!icon) {\n            return;\n        }\n\n        return (\n            <limel-icon\n                style={{\n                    color: `${color}`,\n                }}\n                badge={true}\n                name={icon}\n            />\n        );\n    }\n\n    private renderHeading() {\n        if (!this.heading) {\n            return;\n        }\n\n        return <h1>{this.heading}</h1>;\n    }\n\n    private renderSubheading() {\n        if (!this.subheading) {\n            return;\n        }\n\n        return <h2>{this.subheading}</h2>;\n    }\n\n    private renderSlot() {\n        return <slot name=\"component\" />;\n    }\n\n    private renderValue() {\n        return <limel-markdown value={this.value} />;\n    }\n\n    private handleActionSelect = (\n        event: CustomEvent<ActionBarItem | ListSeparator>,\n    ) => {\n        event.stopPropagation();\n        if (isItem(event.detail)) {\n            this.actionSelected.emit(event.detail);\n        }\n    };\n\n    private renderActionBar() {\n        if (!this.actions.length) {\n            return;\n        }\n\n        return (\n            <limel-action-bar\n                actions={this.actions}\n                onItemSelected={this.handleActionSelect}\n            />\n        );\n    }\n}\n"],"version":3}