@limetech/lime-elements 37.70.5 → 37.72.0

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

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

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

@@ -0,0 +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"]}

package/dist/esm/3d-tilt-hover-effect-a76fcd43.js

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

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

@@ -0,0 +1 @@
+{"file":"3d-tilt-hover-effect-a76fcd43.js","mappings":"AAAA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2GA;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 `<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}

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

@@ -1,8 +1,9 @@
-import { r as registerInstance, c as createEvent, h } from './index-6156b4fd.js';
+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';
 
-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}:host(limel-card[clickable]) section{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(--card-background-color, rgb(var(--contrast-200)))}:host(limel-card[clickable]) section:focus{outline:none}:host(limel-card[clickable]) section:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}:host(limel-card[clickable]) section:hover,:host(limel-card[clickable]) section:focus,:host(limel-card[clickable]) section:focus-visible{will-change:color, background-color, box-shadow, transform}:host(limel-card[clickable]) section:hover{transform:translate3d(0, 0.01rem, 0);color:var(--mdc-theme-on-surface);background-color:var(--card-background-color--hovered, var(--card-background-color, rgb(var(--contrast-200))));box-shadow:var(--button-shadow-hovered)}:host(limel-card[clickable]) section:active{--limel-clickable-transform-timing-function:cubic-bezier(\n      0.83,\n      -0.15,\n      0.49,\n      1.16\n  );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}:host(limel-card[clickable]) section:hover,:host(limel-card[clickable]) section:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}:host(limel-card[clickable]:hover) section{border-color:transparent}.body{flex-grow:1;display:flex;flex-direction:column;gap:0.5rem}img{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}";
+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{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 Card = class {
   constructor(hostRef) {
@@ -23,8 +24,13 @@ const Card = class {
     this.clickable = false;
     this.orientation = 'portrait';
   }
+  componentWillLoad() {
+    const { handleMouseEnter, handleMouseLeave } = getMouseEventHandlers(this.host);
+    this.handleMouseEnter = handleMouseEnter;
+    this.handleMouseLeave = handleMouseLeave;
+  }
   render() {
-    return (h("section", { tabindex: this.clickable ? 0 : '' }, this.renderImage(), h("div", { class: "body" }, this.renderHeader(), this.renderSlot(), this.renderValue(), this.renderActionBar())));
+    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" }))));
   }
   renderImage() {
     if (!this.image) {
@@ -73,6 +79,7 @@ const Card = class {
     }
     return (h("limel-action-bar", { actions: this.actions, onItemSelected: this.handleActionSelect }));
   }
+  get host() { return getElement(this); }
 };
 Card.style = cardCss;
 

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

@@ -1 +1 @@
-{"file":"limel-card.entry.js","mappings":";;;;AAAA,MAAM,OAAO,GAAG,inGAAinG;;MC2BpnG,IAAI;;;;IAgJL,uBAAkB,GAAG,CACzB,KAAiD;MAEjD,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE;QACtB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;OAC1C;KACJ,CAAC;;;;;;mBA/GsD,EAAE;qBAO9B,KAAK;uBAOc,UAAU;;EAQlD,MAAM;IACT,QACI,eAAS,QAAQ,EAAE,IAAI,CAAC,SAAS,GAAG,CAAC,GAAG,EAAE,IACrC,IAAI,CAAC,WAAW,EAAE,EACnB,WAAK,KAAK,EAAC,MAAM,IACZ,IAAI,CAAC,YAAY,EAAE,EACnB,IAAI,CAAC,UAAU,EAAE,EACjB,IAAI,CAAC,WAAW,EAAE,EAClB,IAAI,CAAC,eAAe,EAAE,CACrB,CACA,EACZ;GACL;EAEO,WAAW;IACf,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MACb,OAAO;KACV;IAED,OAAO,WAAK,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,OAAO,EAAC,MAAM,GAAG,CAAC;GAC3E;EAEO,YAAY;IAChB,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MACjD,OAAO;KACV;IAED,QACI,kBACK,IAAI,CAAC,UAAU,EAAE,EAClB,WAAK,KAAK,EAAC,UAAU,IAChB,IAAI,CAAC,aAAa,EAAE,EACpB,IAAI,CAAC,gBAAgB,EAAE,CACtB,CACD,EACX;GACL;EAEO,UAAU;;IACd,MAAM,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACpC,MAAM,KAAK,GACP,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ,GAAG,MAAA,IAAI,CAAC,IAAI,0CAAE,KAAK,GAAG,SAAS,CAAC;IAEjE,IAAI,CAAC,IAAI,EAAE;MACP,OAAO;KACV;IAED,QACI,kBACI,KAAK,EAAE;QACH,KAAK,EAAE,GAAG,KAAK,EAAE;OACpB,EACD,KAAK,EAAE,IAAI,EACX,IAAI,EAAE,IAAI,GACZ,EACJ;GACL;EAEO,aAAa;IACjB,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;MACf,OAAO;KACV;IAED,OAAO,cAAK,IAAI,CAAC,OAAO,CAAM,CAAC;GAClC;EAEO,gBAAgB;IACpB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;MAClB,OAAO;KACV;IAED,OAAO,cAAK,IAAI,CAAC,UAAU,CAAM,CAAC;GACrC;EAEO,UAAU;IACd,OAAO,YAAM,IAAI,EAAC,WAAW,GAAG,CAAC;GACpC;EAEO,WAAW;IACf,OAAO,sBAAgB,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI,CAAC;GAChD;EAWO,eAAe;IACnB,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE;MACtB,OAAO;KACV;IAED,QACI,wBACI,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,cAAc,EAAE,IAAI,CAAC,kBAAkB,GACzC,EACJ;GACL;;;;;;","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    :host(limel-card[clickable]) & {\n        @include mixins.visualize-keyboard-focus;\n        @include mixins.is-flat-clickable(\n            $background-color:\n                var(--card-background-color, rgb(var(--contrast-200))),\n            $background-color--hovered:\n                var(\n                    --card-background-color--hovered,\n                    var(--card-background-color, rgb(var(--contrast-200)))\n                )\n        );\n    }\n\n    :host(limel-card[clickable]:hover) & {\n        border-color: transparent;\n    }\n}\n\n.body {\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n    gap: 0.5rem;\n}\n\nimg {\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","import { Component, h, Prop, Event, EventEmitter } 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';\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    public render() {\n        return (\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            </section>\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    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}

package/dist/esm/limel-info-tile.entry.js

@@ -1,6 +1,7 @@
-import { r as registerInstance, h } from './index-6156b4fd.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-6156b4fd.js';
+import { g as getMouseEventHandlers } from './3d-tilt-hover-effect-a76fcd43.js';
 
-const infoTileCss = "@charset \"UTF-8\";\n/**\n * Note! This file is exported to `dist/scss/` in the published\n * node module, for consumer projects to import.\n * That means this file cannot import from any file that isn't\n * also exported, keeping the same relative path.\n *\n * Or, just don't import anything, that works too.\n */\n/**\n* This can be used on a trigger element that opens a dropdown menu or a popover.\n*/\n/**\n * This mixin will mask out the content that is close to\n * the edges of a scrollable area.\n * - If the scrollable content has `overflow-y`, use `vertically`\n * as an argument for `$direction`.\n - If the scrollable content has `overflow-x`, use `horizontally`\n * as an argument for `$direction`.\n *\n * For the visual effect to work smoothly, we need to make sure that\n * the size of the fade-out edge effect is the same as the\n * internal paddings of the scrollable area. Otherwise, content of a\n * scrollable area that does not have a padding will fade out before\n * any scrolling has been done.\n * This is why this mixin already adds paddings, which automatically\n * default to the size of the fade-out effect.\n * This size defaults to `1rem`, but to override the size use\n * `--limel-top-edge-fade-height` & `--limel-bottom-edge-fade-height`\n * when `vertically` argument is set, and use\n * `--limel-left-edge-fade-width` & `--limel-right-edge-fade-width`\n * when `horizontally` argument is set.\n * Of course you can also programmatically increase and decrease the\n * size of these variables for each edge, based on the amount of\n * scrolling that has been done by the user. In this case, make sure\n * to add a custom padding where the mixin is used, to override\n * the paddings that are automatically added by the mixin in the\n * compiled CSS code.\n */\n/**\n* This mixin will add an animated underline to the bottom of an `a` elements.\n* Note that you may need to add `all: unset;` –depending on your use case–\n* before using this mixin.\n*/\n/**\n* This mixin creates a cross-browser font stack.\n* - `sans-serif` can be used for the UI of the components.\n* - `monospace` can be used for code.\n*\n* ⚠️ If we change the font stacks, we need to update\n* 1. the consumer documentation in `README.md`, and\n* 2. the CSS variables of `--kompendium-example-font-family`\n* in the `<style>` tag of `index.html`.\n*/\n/**\n* This mixin is a hack, using old CSS syntax\n* to enable you to truncate a piece of text,\n* after a certain number of lines.\n*/\n/**\n* @prop --info-tile-border-radius: defines the radius of corners of the info-tile. Defaults to `1rem`\n* @prop --info-tile-icon-color: defines the fill color of the info-tile icon. Defaults to `--contrast-1000`\n* @prop --info-tile-text-color: defines the color of the info-tile label. Defaults to `--contrast-1100`\n* @prop --info-tile-background-color: defines the backgrounds color of the info-tile icon. Defaults to `--contrast-100`\n* @prop --info-tile-badge-text-color: Text color of the notification badge. Defaults to `--color-white`\n* @prop --info-tile-badge-background-color: Background color of the notification badge. Defaults to `--color-red-default`\n* @prop --info-tile-progress-fill-color: Determines the color of the progressed section. Defaults to `--lime-primary-color`.\n* @prop --info-tile-progress-background-color: Determines the background color of the central section of the progress bar. Defaults to `--info-tile-background-color`.\n* @prop --info-tile-progress-suffix-color: Determines the color of the progress prefix. Defaults to `--contrast-1000`.\n * @prop --info-tile-progress-text-color: Determines the color of the progress value. Defaults to `--info-tile-text-color`.\n * @prop --info-tile-progress-prefix-color: Determines the color of the progress suffix. Defaults to `--contrast-1000`.\n*/\n:host(limel-info-tile) {\n  --badge-text-color: var(\n      --info-tile-badge-text-color,\n      rgb(var(--color-white))\n  );\n  --badge-background-color: var(\n      --info-tile-badge-background-color,\n      rgb(var(--color-red-default))\n  );\n  --circular-progress-text-color: var(\n      --info-tile-progress-text-color,\n      var(--info-tile-text-color)\n  );\n  --circular-progress-suffix-color: var(--info-tile-progress-suffix-color);\n  --circular-progress-prefix-color: var(--info-tile-progress-prefix-color);\n  --circular-progress-track-color: rgb(var(--contrast-800), 0.3);\n  --circular-progress-fill-color: var(--info-tile-progress-fill-color);\n  --circular-progress-background-color: var(\n      --info-tile-progress-background-color,\n      var(--info-tile-background-color)\n  );\n  --label-min-size: 0.75rem;\n  --label-preferred-size: 6cqw;\n  --label-max-size: 1rem;\n  --value-min-size: 1rem;\n  --value-preferred-size: 20cqw;\n  --value-max-size: 4rem;\n  --suffix-prefix-min-size: 0.75rem;\n  --suffix-prefix-preferred-size: 8cqw;\n  --suffix-prefix-max-size: 1.5rem;\n  --icon-min-size: 2rem;\n  --icon-preferred-size: 60cqh;\n  --icon-max-size: calc(100cqw - 0.5rem);\n  isolation: isolate;\n  container-type: size;\n  position: relative;\n  display: flex;\n  width: 100%;\n  height: 100%;\n}\n:host(limel-info-tile) * {\n  box-sizing: border-box;\n}\n\n:host(limel-info-tile[disabled]) a {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\na {\n  all: unset;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  align-items: flex-start;\n  height: 100%;\n  width: 100%;\n  flex-grow: 1;\n  padding: 0.25rem 1rem 0.5rem 1rem;\n  border-radius: var(--info-tile-border-radius, 1rem);\n  background-color: var(--info-tile-background-color, var(--lime-elevated-surface-background-color));\n}\na.is-clickable {\n  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);\n  cursor: pointer;\n  color: var(--mdc-theme-on-surface);\n  background-color: var(--info-tile-background-color, var(--lime-elevated-surface-background-color));\n  box-shadow: var(--button-shadow-normal);\n}\na.is-clickable:hover, a.is-clickable:focus, a.is-clickable:focus-visible {\n  will-change: color, background-color, box-shadow, transform;\n}\na.is-clickable:hover {\n  transform: translate3d(0, -0.04rem, 0);\n  color: var(--mdc-theme-on-surface);\n  background-color: var(--info-tile-background-color, var(--lime-elevated-surface-background-color));\n  box-shadow: var(--button-shadow-hovered);\n}\na.is-clickable:active {\n  --limel-clickable-transform-timing-function: cubic-bezier(\n      0.83,\n      -0.15,\n      0.49,\n      1.16\n  );\n  transform: translate3d(0, 0.05rem, 0);\n  box-shadow: var(--button-shadow-pressed);\n}\na.is-clickable:hover, a.is-clickable:active {\n  --limel-clickable-transition-speed: 0.2s;\n  --limel-clickable-transform-speed: 0.16s;\n}\na.is-clickable:focus {\n  outline: none;\n}\na.is-clickable:focus-visible {\n  outline: none;\n  box-shadow: var(--shadow-depth-8-focused);\n}\n\n.icon {\n  z-index: 1;\n  position: absolute;\n  top: 0.5rem;\n  right: 0.75rem;\n  padding: 0.25rem;\n  aspect-ratio: 1/1;\n  color: var(--info-tile-icon-color, rgb(var(--contrast-1000)));\n  border-radius: 0;\n  height: clamp(var(--icon-min-size), var(--icon-preferred-size), var(--icon-max-size));\n}\n@supports not (container-type: size) {\n  .icon {\n    width: max(10%, 3rem);\n  }\n}\n.has-circular-progress .icon {\n  top: unset;\n  bottom: 0.5rem;\n  --icon-min-size: 1.5rem;\n  --icon-preferred-size: 20cqh;\n}\n\n.progress {\n  position: absolute;\n  top: 0.75rem;\n  right: 0.75rem;\n  --circular-progress-size: min(\n      var(--icon-preferred-size),\n      var(--icon-max-size)\n  );\n}\n@supports not (container-type: size) {\n  .progress {\n    --circular-progress-size: initial;\n  }\n}\n\n.label {\n  z-index: 1;\n  color: var(--info-tile-text-color, rgb(var(--contrast-1100)));\n  line-height: 1.2;\n  font-size: clamp(var(--label-min-size), var(--label-preferred-size), var(--label-max-size));\n}\n@supports not (container-type: size) {\n  .label {\n    font-size: 0.875rem;\n  }\n}\n\nlimel-badge {\n  position: absolute;\n  top: -0.25rem;\n  right: -0.25rem;\n}\n\nlimel-linear-progress {\n  --lime-primary-color: var(--info-tile-text-color);\n  position: absolute;\n  inset: auto 0 0 0;\n}\n\n.value-group {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  flex-direction: column;\n  color: var(--info-tile-text-color, rgb(var(--contrast-1100)));\n}\n\n.value-and-suffix,\n.label {\n  text-shadow: 0 0 0.5rem var(--info-tile-background-color, rgb(var(--contrast-100))), 0 0 0.25rem var(--info-tile-background-color, rgb(var(--contrast-100)));\n}\n\n.value-and-suffix {\n  display: flex;\n}\n\n.prefix,\n.suffix {\n  font-size: clamp(var(--suffix-prefix-min-size), var(--suffix-prefix-preferred-size), var(--suffix-prefix-max-size));\n  opacity: 0.7;\n}\n@supports not (container-type: size) {\n  .prefix,\n  .suffix {\n    font-size: 0.75rem;\n  }\n}\n\n.prefix {\n  align-self: flex-start;\n  line-height: normal;\n  transform: translateY(40%);\n}\n\n.value {\n  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.95);\n  transform-origin: left;\n  transform: translate3d(0, 0, 0) scale(1);\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  font-weight: bold;\n  line-height: normal;\n  font-size: clamp(var(--value-min-size), var(--value-preferred-size), var(--value-max-size));\n}\n@supports not (container-type: size) {\n  .value {\n    font-size: 1.5rem;\n  }\n}\n:host(limel-info-tile[loading]) .value {\n  opacity: 0.3;\n  transform: translate3d(0, 0, 0) scale(0.9);\n}\n\n.suffix {\n  transform: translateY(10%);\n}\n\n@container (width < 8rem) {\n  .progress {\n    top: 0.25rem;\n    right: 0.25rem;\n  }\n  a {\n    padding: 0.375rem;\n    gap: 0.125rem;\n  }\n}\n@container (width < 18.75rem) {\n  .progress {\n    top: 0.5rem;\n    right: 0.5rem;\n  }\n  .icon {\n    top: 0.25rem;\n    right: 0.5rem;\n  }\n  .has-circular-progress .icon {\n    right: 0.25rem;\n    bottom: 0.25rem;\n  }\n}\n@container (width < 40.5rem) {\n  .value {\n    --value-preferred-size: 13cqw;\n  }\n  .value.ch-1, .value.ch-2, .value.ch-3, .value.ch-4 {\n    --value-preferred-size: 20cqw;\n  }\n  .value.ch-5 {\n    --value-preferred-size: 18cqw;\n  }\n  .value.ch-6 {\n    --value-preferred-size: 17cqw;\n  }\n  .value.ch-7 {\n    --value-preferred-size: 16cqw;\n  }\n  .value.ch-8 {\n    --value-preferred-size: 15cqw;\n  }\n  .value.ch-9 {\n    --value-preferred-size: 14cqw;\n  }\n}\n@container (height > 8rem) {\n  a {\n    padding-top: 0.75rem;\n    padding-bottom: 1rem;\n  }\n}\n@container (height < 8rem) and (width > 8rem) {\n  .value {\n    --value-preferred-size: 32cqh !important;\n  }\n  .suffix,\n  .prefix {\n    --suffix-prefix-preferred-size: 16cqh !important;\n  }\n}\n@container (height > 18.75rem) {\n  .progress,\n  .icon {\n    position: relative;\n    top: unset;\n    right: unset;\n  }\n  a {\n    align-items: center;\n    justify-content: center;\n  }\n  .label {\n    text-align: center;\n  }\n  .has-circular-progress .icon {\n    position: absolute;\n    top: 0.5rem;\n    right: 0.5rem;\n    --icon-max-size: 3rem;\n  }\n}";
+const infoTileCss = "@charset \"UTF-8\";\n/**\n * Note! This file is exported to `dist/scss/` in the published\n * node module, for consumer projects to import.\n * That means this file cannot import from any file that isn't\n * also exported, keeping the same relative path.\n *\n * Or, just don't import anything, that works too.\n */\n/**\n* This can be used on a trigger element that opens a dropdown menu or a popover.\n*/\n/**\n * This mixin will mask out the content that is close to\n * the edges of a scrollable area.\n * - If the scrollable content has `overflow-y`, use `vertically`\n * as an argument for `$direction`.\n - If the scrollable content has `overflow-x`, use `horizontally`\n * as an argument for `$direction`.\n *\n * For the visual effect to work smoothly, we need to make sure that\n * the size of the fade-out edge effect is the same as the\n * internal paddings of the scrollable area. Otherwise, content of a\n * scrollable area that does not have a padding will fade out before\n * any scrolling has been done.\n * This is why this mixin already adds paddings, which automatically\n * default to the size of the fade-out effect.\n * This size defaults to `1rem`, but to override the size use\n * `--limel-top-edge-fade-height` & `--limel-bottom-edge-fade-height`\n * when `vertically` argument is set, and use\n * `--limel-left-edge-fade-width` & `--limel-right-edge-fade-width`\n * when `horizontally` argument is set.\n * Of course you can also programmatically increase and decrease the\n * size of these variables for each edge, based on the amount of\n * scrolling that has been done by the user. In this case, make sure\n * to add a custom padding where the mixin is used, to override\n * the paddings that are automatically added by the mixin in the\n * compiled CSS code.\n */\n/**\n* This mixin will add an animated underline to the bottom of an `a` elements.\n* Note that you may need to add `all: unset;` –depending on your use case–\n* before using this mixin.\n*/\n/**\n* This mixin creates a cross-browser font stack.\n* - `sans-serif` can be used for the UI of the components.\n* - `monospace` can be used for code.\n*\n* ⚠️ If we change the font stacks, we need to update\n* 1. the consumer documentation in `README.md`, and\n* 2. the CSS variables of `--kompendium-example-font-family`\n* in the `<style>` tag of `index.html`.\n*/\n/**\n* This mixin is a hack, using old CSS syntax\n* to enable you to truncate a piece of text,\n* after a certain number of lines.\n*/\n/**\n* @prop --info-tile-border-radius: defines the radius of corners of the info-tile. Defaults to `1rem`\n* @prop --info-tile-icon-color: defines the fill color of the info-tile icon. Defaults to `--contrast-1000`\n* @prop --info-tile-text-color: defines the color of the info-tile label. Defaults to `--contrast-1100`\n* @prop --info-tile-background-color: defines the backgrounds color of the info-tile icon. Defaults to `--contrast-100`\n* @prop --info-tile-badge-text-color: Text color of the notification badge. Defaults to `--color-white`\n* @prop --info-tile-badge-background-color: Background color of the notification badge. Defaults to `--color-red-default`\n* @prop --info-tile-progress-fill-color: Determines the color of the progressed section. Defaults to `--lime-primary-color`.\n* @prop --info-tile-progress-background-color: Determines the background color of the central section of the progress bar. Defaults to `--info-tile-background-color`.\n* @prop --info-tile-progress-suffix-color: Determines the color of the progress prefix. Defaults to `--contrast-1000`.\n * @prop --info-tile-progress-text-color: Determines the color of the progress value. Defaults to `--info-tile-text-color`.\n * @prop --info-tile-progress-prefix-color: Determines the color of the progress suffix. Defaults to `--contrast-1000`.\n*/\n:host(limel-info-tile) {\n  --badge-text-color: var(\n      --info-tile-badge-text-color,\n      rgb(var(--color-white))\n  );\n  --badge-background-color: var(\n      --info-tile-badge-background-color,\n      rgb(var(--color-red-default))\n  );\n  --circular-progress-text-color: var(\n      --info-tile-progress-text-color,\n      var(--info-tile-text-color)\n  );\n  --circular-progress-suffix-color: var(--info-tile-progress-suffix-color);\n  --circular-progress-prefix-color: var(--info-tile-progress-prefix-color);\n  --circular-progress-track-color: rgb(var(--contrast-800), 0.3);\n  --circular-progress-fill-color: var(--info-tile-progress-fill-color);\n  --circular-progress-background-color: var(\n      --info-tile-progress-background-color,\n      var(--info-tile-background-color)\n  );\n  --label-min-size: 0.75rem;\n  --label-preferred-size: 6cqw;\n  --label-max-size: 1rem;\n  --value-min-size: 1rem;\n  --value-preferred-size: 20cqw;\n  --value-max-size: 4rem;\n  --suffix-prefix-min-size: 0.75rem;\n  --suffix-prefix-preferred-size: 8cqw;\n  --suffix-prefix-max-size: 1.5rem;\n  --icon-min-size: 2rem;\n  --icon-preferred-size: 60cqh;\n  --icon-max-size: calc(100cqw - 0.5rem);\n  container-type: size;\n  position: relative;\n  display: flex;\n  width: 100%;\n  height: 100%;\n}\n:host(limel-info-tile) * {\n  box-sizing: border-box;\n}\n\n:host(limel-info-tile[disabled]) a {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\na {\n  all: unset;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  align-items: flex-start;\n  height: 100%;\n  width: 100%;\n  flex-grow: 1;\n  padding: 0.25rem 1rem 0.5rem 1rem;\n  border-radius: var(--info-tile-border-radius, 1rem);\n  background-color: var(--info-tile-background-color, var(--lime-elevated-surface-background-color));\n}\n\n.icon {\n  z-index: 1;\n  position: absolute;\n  top: 0.5rem;\n  right: 0.75rem;\n  padding: 0.25rem;\n  aspect-ratio: 1/1;\n  color: var(--info-tile-icon-color, rgb(var(--contrast-1000)));\n  border-radius: 0;\n  height: clamp(var(--icon-min-size), var(--icon-preferred-size), var(--icon-max-size));\n}\n@supports not (container-type: size) {\n  .icon {\n    width: max(10%, 3rem);\n  }\n}\n.has-circular-progress .icon {\n  top: unset;\n  bottom: 0.5rem;\n  --icon-min-size: 1.5rem;\n  --icon-preferred-size: 20cqh;\n}\n\n.progress {\n  position: absolute;\n  top: 0.75rem;\n  right: 0.75rem;\n  --circular-progress-size: min(\n      var(--icon-preferred-size),\n      var(--icon-max-size)\n  );\n}\n@supports not (container-type: size) {\n  .progress {\n    --circular-progress-size: initial;\n  }\n}\n\n.label {\n  z-index: 1;\n  color: var(--info-tile-text-color, rgb(var(--contrast-1100)));\n  line-height: 1.2;\n  font-size: clamp(var(--label-min-size), var(--label-preferred-size), var(--label-max-size));\n}\n@supports not (container-type: size) {\n  .label {\n    font-size: 0.875rem;\n  }\n}\n\nlimel-badge {\n  position: absolute;\n  top: -0.25rem;\n  right: -0.25rem;\n}\n\nlimel-linear-progress {\n  --lime-primary-color: var(--info-tile-text-color);\n  position: absolute;\n  inset: auto 0 0 0;\n}\n\n.value-group {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  flex-direction: column;\n  color: var(--info-tile-text-color, rgb(var(--contrast-1100)));\n}\n\n.value-and-suffix,\n.label {\n  text-shadow: 0 0 0.5rem var(--info-tile-background-color, rgb(var(--contrast-100))), 0 0 0.25rem var(--info-tile-background-color, rgb(var(--contrast-100)));\n}\n\n.value-and-suffix {\n  display: flex;\n}\n\n.prefix,\n.suffix {\n  font-size: clamp(var(--suffix-prefix-min-size), var(--suffix-prefix-preferred-size), var(--suffix-prefix-max-size));\n  opacity: 0.7;\n}\n@supports not (container-type: size) {\n  .prefix,\n  .suffix {\n    font-size: 0.75rem;\n  }\n}\n\n.prefix {\n  align-self: flex-start;\n  line-height: normal;\n  transform: translateY(40%);\n}\n\n.value {\n  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.95);\n  transform-origin: left;\n  transform: translate3d(0, 0, 0) scale(1);\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  font-weight: bold;\n  line-height: normal;\n  font-size: clamp(var(--value-min-size), var(--value-preferred-size), var(--value-max-size));\n}\n@supports not (container-type: size) {\n  .value {\n    font-size: 1.5rem;\n  }\n}\n:host(limel-info-tile[loading]) .value {\n  opacity: 0.3;\n  transform: translate3d(0, 0, 0) scale(0.9);\n}\n\n.suffix {\n  transform: translateY(10%);\n}\n\n@container (width < 8rem) {\n  .progress {\n    top: 0.25rem;\n    right: 0.25rem;\n  }\n  a {\n    padding: 0.375rem;\n    gap: 0.125rem;\n  }\n}\n@container (width < 18.75rem) {\n  .progress {\n    top: 0.5rem;\n    right: 0.5rem;\n  }\n  .icon {\n    top: 0.25rem;\n    right: 0.5rem;\n  }\n  .has-circular-progress .icon {\n    right: 0.25rem;\n    bottom: 0.25rem;\n  }\n}\n@container (width < 40.5rem) {\n  .value {\n    --value-preferred-size: 13cqw;\n  }\n  .value.ch-1, .value.ch-2, .value.ch-3, .value.ch-4 {\n    --value-preferred-size: 20cqw;\n  }\n  .value.ch-5 {\n    --value-preferred-size: 18cqw;\n  }\n  .value.ch-6 {\n    --value-preferred-size: 17cqw;\n  }\n  .value.ch-7 {\n    --value-preferred-size: 16cqw;\n  }\n  .value.ch-8 {\n    --value-preferred-size: 15cqw;\n  }\n  .value.ch-9 {\n    --value-preferred-size: 14cqw;\n  }\n}\n@container (height > 8rem) {\n  a {\n    padding-top: 0.75rem;\n    padding-bottom: 1rem;\n  }\n}\n@container (height < 8rem) and (width > 8rem) {\n  .value {\n    --value-preferred-size: 32cqh !important;\n  }\n  .suffix,\n  .prefix {\n    --suffix-prefix-preferred-size: 16cqh !important;\n  }\n}\n@container (height > 18.75rem) {\n  .progress,\n  .icon {\n    position: relative;\n    top: unset;\n    right: unset;\n  }\n  a {\n    align-items: center;\n    justify-content: center;\n  }\n  .label {\n    text-align: center;\n  }\n  .has-circular-progress .icon {\n    position: absolute;\n    top: 0.5rem;\n    right: 0.5rem;\n    --icon-max-size: 3rem;\n  }\n}\n.limel-3d-hover-effect-glow {\n  transition: background 0.4s ease, opacity 0.4s ease;\n  pointer-events: none;\n  position: absolute;\n  inset: 0;\n  border-radius: var(--info-tile-border-radius, 1rem);\n  opacity: 0.1;\n  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));\n  mix-blend-mode: plus-lighter;\n}\na:hover .limel-3d-hover-effect-glow {\n  opacity: 0.5;\n}\n@media (prefers-reduced-motion) {\n  a:hover .limel-3d-hover-effect-glow {\n    opacity: 0.2;\n  }\n}\n\n:host(limel-info-tile) {\n  isolation: isolate;\n  transform-style: preserve-3d;\n  perspective: 1000px;\n}\n@media (prefers-reduced-motion) {\n  :host(limel-info-tile) {\n    perspective: 2000px;\n  }\n}\n\na {\n  position: relative;\n  transition-duration: 0.8s;\n  transition-property: transform, box-shadow, background-color;\n  transition-timing-function: ease-out;\n  transform: scale3d(1, 1, 1) rotate3d(0, 0, 0, 0deg);\n}\na:focus {\n  outline: none;\n}\na:hover, a:focus, a:focus-visible, a:focus-within {\n  will-change: background-color, box-shadow, transform;\n}\na:hover, a:focus, a:focus-visible, a:active {\n  transition-duration: 0.2s;\n}\na:hover, a:focus-visible {\n  box-shadow: var(--button-shadow-hovered), var(--shadow-depth-16);\n}\na:hover {\n  transform: scale3d(1.01, 1.01, 1.01) rotate3d(var(--limel-3d-hover-effect-rotate3d));\n}\na:focus-visible {\n  outline: none;\n  transform: scale3d(1.01, 1.01, 1.01);\n}\na.is-clickable {\n  cursor: pointer;\n  box-shadow: var(--button-shadow-normal);\n}\na.is-clickable:hover, a.is-clickable:focus-visible {\n  box-shadow: var(--button-shadow-hovered), var(--shadow-depth-16);\n}\na.is-clickable:active {\n  transform: scale3d(1, 1, 1) rotate3d(0, 0, 0, 0deg);\n  box-shadow: var(--button-shadow-pressed);\n}\na.is-clickable:focus-visible {\n  box-shadow: var(--shadow-depth-8-focused), var(--button-shadow-hovered);\n}\na.is-clickable:focus-visible:active {\n  box-shadow: var(--shadow-depth-8-focused), var(--button-shadow-pressed);\n}";
 
 const InfoTile = class {
   constructor(hostRef) {
@@ -65,6 +66,11 @@ const InfoTile = class {
     this.link = undefined;
     this.progress = undefined;
   }
+  componentWillLoad() {
+    const { handleMouseEnter, handleMouseLeave } = getMouseEventHandlers(this.host);
+    this.handleMouseEnter = handleMouseEnter;
+    this.handleMouseLeave = handleMouseLeave;
+  }
   render() {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const extendedAriaLabel = this.checkProps(this === null || this === void 0 ? void 0 : this.prefix) +
@@ -78,17 +84,16 @@ const InfoTile = class {
       this.checkProps((_c = this === null || this === void 0 ? void 0 : this.progress) === null || _c === void 0 ? void 0 : _c.suffix) +
       this.checkProps((_d = this === null || this === void 0 ? void 0 : this.link) === null || _d === void 0 ? void 0 : _d.title);
     const link = !this.disabled ? (_e = this.link) === null || _e === void 0 ? void 0 : _e.href : '#';
-    return [
-      h("a", { title: (_f = this.link) === null || _f === void 0 ? void 0 : _f.title, href: link, target: (_g = this.link) === null || _g === void 0 ? void 0 : _g.target, tabindex: "0", "aria-label": extendedAriaLabel, "aria-disabled": this.disabled, "aria-busy": this.loading ? 'true' : 'false', "aria-live": "polite", class: {
-          'is-clickable': !!((_h = this.link) === null || _h === void 0 ? void 0 : _h.href) && !this.disabled,
-          'has-circular-progress': !!((_j = this.progress) === null || _j === void 0 ? void 0 : _j.value) || ((_k = this.progress) === null || _k === void 0 ? void 0 : _k.value) === 0,
-        } }, this.renderIcon(), this.renderProgress(), h("div", { class: "value-group" }, this.renderPrefix(), h("div", { class: "value-and-suffix" }, this.renderValue(), this.renderSuffix()), this.renderSpinner()), this.renderLabel()),
-      this.renderNotification(),
-    ];
+    return (h(Host, { onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("a", { title: (_f = this.link) === null || _f === void 0 ? void 0 : _f.title, href: link, target: (_g = this.link) === null || _g === void 0 ? void 0 : _g.target, tabindex: "0", "aria-label": extendedAriaLabel, "aria-disabled": this.disabled, "aria-busy": this.loading ? 'true' : 'false', "aria-live": "polite", class: {
+        'is-clickable': !!((_h = this.link) === null || _h === void 0 ? void 0 : _h.href) && !this.disabled,
+        'has-circular-progress': !!((_j = this.progress) === null || _j === void 0 ? void 0 : _j.value) ||
+          ((_k = this.progress) === null || _k === void 0 ? void 0 : _k.value) === 0,
+      } }, this.renderIcon(), this.renderProgress(), h("div", { class: "value-group" }, this.renderPrefix(), h("div", { class: "value-and-suffix" }, this.renderValue(), this.renderSuffix()), this.renderSpinner()), this.renderLabel()), this.renderNotification(), h("div", { class: "limel-3d-hover-effect-glow" })));
   }
   checkProps(propValue) {
     return !propValue ? '' : propValue + ' ';
   }
+  get host() { return getElement(this); }
 };
 InfoTile.style = infoTileCss;