@limetech/lime-elements 37.70.4 → 37.70.5

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## [37.70.5](https://github.com/Lundalogik/lime-elements/compare/v37.70.4...v37.70.5) (2024-11-26)
+
+
+### Reverts
+
+
+* Revert "chore(util): add a utility function to create an interactive 3D effect" ([f81fdb8](https://github.com/Lundalogik/lime-elements/commit/f81fdb8add98d0deadc4d8da59593af0433da43b))
+
 ## [37.70.4](https://github.com/Lundalogik/lime-elements/compare/v37.70.3...v37.70.4) (2024-11-26)
 
 

package/dist/collection/style/mixins.scss

@@ -456,98 +456,3 @@ $clickable-normal-state-transitions: (
     clip-path: inset(50%);
     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;
-        }
-
-        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.
-@mixin parent-of-the-3d-element {
-    isolation: isolate;
-    transform-style: preserve-3d;
-    perspective: 1000px;
-}
-
-@mixin the-3d-element {
-    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);
-
-    &:hover,
-    &:focus,
-    &:focus-visible,
-    &:focus-within {
-        will-change: background-color, box-shadow, transform;
-    }
-
-    &:hover,
-    &:focus,
-    &:focus-visible,
-    &:active {
-        transition-duration: 0.2s;
-    }
-
-    &:hover,
-    &:focus-visible {
-        box-shadow: var(--button-shadow-hovered);
-    }
-
-    &:hover {
-        transform: scale3d(1.01, 1.01, 1.01)
-            rotate3d(var(--limel-3d-hover-effect-rotate3d));
-    }
-    &:focus-visible {
-        transform: scale3d(1.01, 1.01, 1.01);
-    }
-}
-
-@mixin the-3d-element--clickable {
-    cursor: pointer;
-    box-shadow: var(--button-shadow-normal);
-
-    &:active {
-        transform: scale3d(1, 1, 1) rotate3d(0, 0, 0, 0deg);
-        box-shadow: var(--button-shadow-pressed);
-    }
-
-    &:focus-visible {
-        box-shadow: var(--button-shadow-hovered), var(--shadow-depth-8-focused);
-    }
-    &:focus-visible:active {
-        box-shadow: var(--button-shadow-pressed), var(--shadow-depth-8-focused);
-    }
-}

package/dist/lime-elements/style/mixins.scss

@@ -456,98 +456,3 @@ $clickable-normal-state-transitions: (
     clip-path: inset(50%);
     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;
-        }
-
-        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.
-@mixin parent-of-the-3d-element {
-    isolation: isolate;
-    transform-style: preserve-3d;
-    perspective: 1000px;
-}
-
-@mixin the-3d-element {
-    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);
-
-    &:hover,
-    &:focus,
-    &:focus-visible,
-    &:focus-within {
-        will-change: background-color, box-shadow, transform;
-    }
-
-    &:hover,
-    &:focus,
-    &:focus-visible,
-    &:active {
-        transition-duration: 0.2s;
-    }
-
-    &:hover,
-    &:focus-visible {
-        box-shadow: var(--button-shadow-hovered);
-    }
-
-    &:hover {
-        transform: scale3d(1.01, 1.01, 1.01)
-            rotate3d(var(--limel-3d-hover-effect-rotate3d));
-    }
-    &:focus-visible {
-        transform: scale3d(1.01, 1.01, 1.01);
-    }
-}
-
-@mixin the-3d-element--clickable {
-    cursor: pointer;
-    box-shadow: var(--button-shadow-normal);
-
-    &:active {
-        transform: scale3d(1, 1, 1) rotate3d(0, 0, 0, 0deg);
-        box-shadow: var(--button-shadow-pressed);
-    }
-
-    &:focus-visible {
-        box-shadow: var(--button-shadow-hovered), var(--shadow-depth-8-focused);
-    }
-    &:focus-visible:active {
-        box-shadow: var(--button-shadow-pressed), var(--shadow-depth-8-focused);
-    }
-}

package/dist/scss/mixins.scss

@@ -456,98 +456,3 @@ $clickable-normal-state-transitions: (
     clip-path: inset(50%);
     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;
-        }
-
-        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.
-@mixin parent-of-the-3d-element {
-    isolation: isolate;
-    transform-style: preserve-3d;
-    perspective: 1000px;
-}
-
-@mixin the-3d-element {
-    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);
-
-    &:hover,
-    &:focus,
-    &:focus-visible,
-    &:focus-within {
-        will-change: background-color, box-shadow, transform;
-    }
-
-    &:hover,
-    &:focus,
-    &:focus-visible,
-    &:active {
-        transition-duration: 0.2s;
-    }
-
-    &:hover,
-    &:focus-visible {
-        box-shadow: var(--button-shadow-hovered);
-    }
-
-    &:hover {
-        transform: scale3d(1.01, 1.01, 1.01)
-            rotate3d(var(--limel-3d-hover-effect-rotate3d));
-    }
-    &:focus-visible {
-        transform: scale3d(1.01, 1.01, 1.01);
-    }
-}
-
-@mixin the-3d-element--clickable {
-    cursor: pointer;
-    box-shadow: var(--button-shadow-normal);
-
-    &:active {
-        transform: scale3d(1, 1, 1) rotate3d(0, 0, 0, 0deg);
-        box-shadow: var(--button-shadow-pressed);
-    }
-
-    &:focus-visible {
-        box-shadow: var(--button-shadow-hovered), var(--shadow-depth-8-focused);
-    }
-    &:focus-visible:active {
-        box-shadow: var(--button-shadow-pressed), var(--shadow-depth-8-focused);
-    }
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "37.70.4",
+  "version": "37.70.5",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",

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

@@ -1,124 +0,0 @@
-/**
- * Utility functions for creating a 3D tilt hover effect.
- *
- * This module provides functions that enables consumer components to display a nice 3D effect,
- * when being hovered; enabling them to follow the cursor's position and tilt towards it.
- *
- * ## What you need, to make this work
- * ### Typescript
- * 1. Import the functions:
- *
- * ```tsx
- * import {
- *     tiltFollowingTheCursor,
- *     handleMouseEnter,
- *     handleMouseLeave,
- * } from './path/to/3d-tilt-hover-effect';
- * ```
- *
- * 2. In your component, define the necessary properties:
- *
- * ```tsx
- * @Element() private element: HTMLElement;
- * private the3dElementBounds: DOMRect;
- * ```
- *
- * 3. If your component does not already have event handlers,
- * implement them using the imported functions from this file:
- *
- * ```tsx
- * private handleMouseEnter = () => {
- *     handleMouseEnter(this.element, 'section', (bounds) => {
- *         this.the3dElementBounds = bounds;
- *     }, this.tiltFollowingTheCursor);
- * };
- *
- * private handleMouseLeave = () => {
- *     handleMouseLeave(this.element, this.tiltFollowingTheCursor);
- * };
- *
- * private tiltFollowingTheCursor = (e: MouseEvent) => {
- *     tiltFollowingTheCursor(e, this.the3dElementBounds, this.element);
- * };
- * ```
- *
- * 4. Attach the event handlers to the relevant elements in your render method:
- *
- * ```tsx
- * public render() {
- *     return (
- *         <section
- *             onMouseEnter={this.handleMouseEnter}
- *             onMouseLeave={this.handleMouseLeave}
- *         >
- *             Your content here
- *         </section>
- *     );
- * }
- * ```
- *
- * :::note
- * - Ensure that the `element` and `the3dElementBounds` properties are properly
- * defined in your component.
- * - The `selector` parameter in `handleMouseEnter` should match the selector
- * of the element you want to apply the 3D effect to.
- * - The `tiltFollowingTheCursor` function calculates the 3D rotation and glow
- * position based on the cursor's position relative to the element's bounds.
- * :::
- *
- * ### HTML elements + CSS
- * 1. Add a `<div class="limel-3d-hover-effect-glow" />` element to your component's template,
- * inside the element you want to apply the 3D effect to, and preferably at the bottom of all
- * other elements within that element (to avoid the need to specifying `z-index`es).
- * 2. Add the following `mixin` to your component's SCSS file:
- * `limel-3d-hover-effect-glow($the3dElement, $border-radius);`
- *
- * and don't forget to define the `$the3dElement` variables for the mixin to work
- * (and optionally the `$border-radius`).
- * 3. Keep in mind that the `<div class="limel-3d-hover-effect-glow" />` will be
- * absolutely positioned inside the parent element, so make sure the parent element
- * has `position` set.
- * 4. Add the following `mixin` to the host element: `parent-of-the-3d-element`.
- * 5. Add the following `mixin` to the 3D element: `the-3d-element`.
- * 6. And if your element is supposed to be clickable, add this `mixin` as well: `the-3d-element--clickable`.
- *
- */
-export const MOUSE_SCALE_FACTOR = 100;
-export const ROTATION_DEGREE_MULTIPLIER = 1.6;
-export const GLOW_POSITION_MULTIPLIER = 2;
-export const CENTER_DIVISOR = 2;
-export function tiltFollowingTheCursor(e, the3dElementBounds, element) {
-  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 rotate3d = `
-        ${center.y / MOUSE_SCALE_FACTOR},
-        ${-center.x / MOUSE_SCALE_FACTOR},
-        0,
-        ${Math.log(distance) * ROTATION_DEGREE_MULTIPLIER}deg
-    `;
-  element.style.setProperty('--limel-3d-hover-effect-rotate3d', rotate3d);
-  const glowPosition = `
-        ${center.x * GLOW_POSITION_MULTIPLIER + the3dElementBounds.width / CENTER_DIVISOR}px
-    `;
-  element.style.setProperty('--limel-3d-hover-effect-glow-position', glowPosition);
-}
-export function handleMouseEnter(element, selector, setBounds, tiltCallback) {
-  const the3dElement = element.shadowRoot.querySelector(selector);
-  const bounds = the3dElement.getBoundingClientRect();
-  setBounds(bounds);
-  document.addEventListener('mousemove', tiltCallback);
-}
-export function handleMouseLeave(element, selector, tiltCallback) {
-  const the3dElement = element.shadowRoot.querySelector(selector);
-  document.removeEventListener('mousemove', tiltCallback);
-  the3dElement.style.removeProperty('--limel-3d-hover-effect-rotate3d');
-  the3dElement.style.removeProperty('--limel-3d-hover-effect-glow-position');
-}
-//# sourceMappingURL=3d-tilt-hover-effect.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"3d-tilt-hover-effect.js","sourceRoot":"","sources":["../../src/util/3d-tilt-hover-effect.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoFG;AAEH,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAC;AACtC,MAAM,CAAC,MAAM,0BAA0B,GAAG,GAAG,CAAC;AAC9C,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,CAAC;AAC1C,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,CAAC;AAEhC,MAAM,UAAU,sBAAsB,CAClC,CAAa,EACb,kBAA2B,EAC3B,OAAoB;EAEpB,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,QAAQ,GAAG;UACX,MAAM,CAAC,CAAC,GAAG,kBAAkB;UAC7B,CAAC,MAAM,CAAC,CAAC,GAAG,kBAAkB;;UAE9B,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,GAAG,0BAA0B;KACpD,CAAC;EACF,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,kCAAkC,EAAE,QAAQ,CAAC,CAAC;EAExE,MAAM,YAAY,GAAG;UACf,MAAM,CAAC,CAAC,GAAG,wBAAwB,GAAG,kBAAkB,CAAC,KAAK,GAAG,cAAc;KACpF,CAAC;EACF,OAAO,CAAC,KAAK,CAAC,WAAW,CACrB,uCAAuC,EACvC,YAAY,CACf,CAAC;AACN,CAAC;AAED,MAAM,UAAU,gBAAgB,CAC5B,OAAoB,EACpB,QAAgB,EAChB,SAAoC,EACpC,YAAqC;EAErC,MAAM,YAAY,GAAG,OAAO,CAAC,UAAU,CAAC,aAAa,CACjD,QAAQ,CACI,CAAC;EACjB,MAAM,MAAM,GAAG,YAAY,CAAC,qBAAqB,EAAE,CAAC;EACpD,SAAS,CAAC,MAAM,CAAC,CAAC;EAClB,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC;AACzD,CAAC;AAED,MAAM,UAAU,gBAAgB,CAC5B,OAAoB,EACpB,QAAgB,EAChB,YAAqC;EAErC,MAAM,YAAY,GAAG,OAAO,CAAC,UAAU,CAAC,aAAa,CACjD,QAAQ,CACI,CAAC;EACjB,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC;EACxD,YAAY,CAAC,KAAK,CAAC,cAAc,CAAC,kCAAkC,CAAC,CAAC;EACtE,YAAY,CAAC,KAAK,CAAC,cAAc,CAAC,uCAAuC,CAAC,CAAC;AAC/E,CAAC","sourcesContent":["/**\n * Utility functions for creating a 3D tilt hover effect.\n *\n * This module provides functions that enables consumer components to display a nice 3D effect,\n * when being hovered; enabling them to follow the cursor's position and tilt towards it.\n *\n * ## What you need, to make this work\n * ### Typescript\n * 1. Import the functions:\n *\n * ```tsx\n * import {\n *     tiltFollowingTheCursor,\n *     handleMouseEnter,\n *     handleMouseLeave,\n * } from './path/to/3d-tilt-hover-effect';\n * ```\n *\n * 2. In your component, define the necessary properties:\n *\n * ```tsx\n * @Element() private element: HTMLElement;\n * private the3dElementBounds: DOMRect;\n * ```\n *\n * 3. If your component does not already have event handlers,\n * implement them using the imported functions from this file:\n *\n * ```tsx\n * private handleMouseEnter = () => {\n *     handleMouseEnter(this.element, 'section', (bounds) => {\n *         this.the3dElementBounds = bounds;\n *     }, this.tiltFollowingTheCursor);\n * };\n *\n * private handleMouseLeave = () => {\n *     handleMouseLeave(this.element, this.tiltFollowingTheCursor);\n * };\n *\n * private tiltFollowingTheCursor = (e: MouseEvent) => {\n *     tiltFollowingTheCursor(e, this.the3dElementBounds, this.element);\n * };\n * ```\n *\n * 4. Attach the event handlers to the relevant elements in your render method:\n *\n * ```tsx\n * public render() {\n *     return (\n *         <section\n *             onMouseEnter={this.handleMouseEnter}\n *             onMouseLeave={this.handleMouseLeave}\n *         >\n *             Your content here\n *         </section>\n *     );\n * }\n * ```\n *\n * :::note\n * - Ensure that the `element` and `the3dElementBounds` properties are properly\n * defined in your component.\n * - The `selector` parameter in `handleMouseEnter` should match the selector\n * of the element you want to apply the 3D effect to.\n * - The `tiltFollowingTheCursor` function calculates the 3D rotation and glow\n * position based on the cursor's position relative to the element's bounds.\n * :::\n *\n * ### HTML elements + CSS\n * 1. Add a `<div class=\"limel-3d-hover-effect-glow\" />` element to your component's template,\n * inside the element you want to apply the 3D effect to, and preferably at the bottom of all\n * other elements within that element (to avoid the need to specifying `z-index`es).\n * 2. Add the following `mixin` to your component's SCSS file:\n * `limel-3d-hover-effect-glow($the3dElement, $border-radius);`\n *\n * and don't forget to define the `$the3dElement` variables for the mixin to work\n * (and optionally the `$border-radius`).\n * 3. Keep in mind that the `<div class=\"limel-3d-hover-effect-glow\" />` will be\n * absolutely positioned inside the parent element, so make sure the parent element\n * has `position` set.\n * 4. Add the following `mixin` to the host element: `parent-of-the-3d-element`.\n * 5. Add the following `mixin` to the 3D element: `the-3d-element`.\n * 6. And if your element is supposed to be clickable, add this `mixin` as well: `the-3d-element--clickable`.\n *\n */\n\nexport const MOUSE_SCALE_FACTOR = 100;\nexport const ROTATION_DEGREE_MULTIPLIER = 1.6;\nexport const GLOW_POSITION_MULTIPLIER = 2;\nexport const CENTER_DIVISOR = 2;\n\nexport function tiltFollowingTheCursor(\n    e: MouseEvent,\n    the3dElementBounds: DOMRect,\n    element: HTMLElement,\n) {\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 rotate3d = `\n        ${center.y / MOUSE_SCALE_FACTOR},\n        ${-center.x / MOUSE_SCALE_FACTOR},\n        0,\n        ${Math.log(distance) * ROTATION_DEGREE_MULTIPLIER}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    `;\n    element.style.setProperty(\n        '--limel-3d-hover-effect-glow-position',\n        glowPosition,\n    );\n}\n\nexport function handleMouseEnter(\n    element: HTMLElement,\n    selector: string,\n    setBounds: (bounds: DOMRect) => void,\n    tiltCallback: (e: MouseEvent) => void,\n) {\n    const the3dElement = element.shadowRoot.querySelector(\n        selector,\n    ) as HTMLElement;\n    const bounds = the3dElement.getBoundingClientRect();\n    setBounds(bounds);\n    document.addEventListener('mousemove', tiltCallback);\n}\n\nexport function handleMouseLeave(\n    element: HTMLElement,\n    selector: string,\n    tiltCallback: (e: MouseEvent) => void,\n) {\n    const the3dElement = element.shadowRoot.querySelector(\n        selector,\n    ) as HTMLElement;\n    document.removeEventListener('mousemove', tiltCallback);\n    the3dElement.style.removeProperty('--limel-3d-hover-effect-rotate3d');\n    the3dElement.style.removeProperty('--limel-3d-hover-effect-glow-position');\n}\n"]}

package/dist/types/util/3d-tilt-hover-effect.d.ts

@@ -1,93 +0,0 @@
-/**
- * Utility functions for creating a 3D tilt hover effect.
- *
- * This module provides functions that enables consumer components to display a nice 3D effect,
- * when being hovered; enabling them to follow the cursor's position and tilt towards it.
- *
- * ## What you need, to make this work
- * ### Typescript
- * 1. Import the functions:
- *
- * ```tsx
- * import {
- *     tiltFollowingTheCursor,
- *     handleMouseEnter,
- *     handleMouseLeave,
- * } from './path/to/3d-tilt-hover-effect';
- * ```
- *
- * 2. In your component, define the necessary properties:
- *
- * ```tsx
- * @Element() private element: HTMLElement;
- * private the3dElementBounds: DOMRect;
- * ```
- *
- * 3. If your component does not already have event handlers,
- * implement them using the imported functions from this file:
- *
- * ```tsx
- * private handleMouseEnter = () => {
- *     handleMouseEnter(this.element, 'section', (bounds) => {
- *         this.the3dElementBounds = bounds;
- *     }, this.tiltFollowingTheCursor);
- * };
- *
- * private handleMouseLeave = () => {
- *     handleMouseLeave(this.element, this.tiltFollowingTheCursor);
- * };
- *
- * private tiltFollowingTheCursor = (e: MouseEvent) => {
- *     tiltFollowingTheCursor(e, this.the3dElementBounds, this.element);
- * };
- * ```
- *
- * 4. Attach the event handlers to the relevant elements in your render method:
- *
- * ```tsx
- * public render() {
- *     return (
- *         <section
- *             onMouseEnter={this.handleMouseEnter}
- *             onMouseLeave={this.handleMouseLeave}
- *         >
- *             Your content here
- *         </section>
- *     );
- * }
- * ```
- *
- * :::note
- * - Ensure that the `element` and `the3dElementBounds` properties are properly
- * defined in your component.
- * - The `selector` parameter in `handleMouseEnter` should match the selector
- * of the element you want to apply the 3D effect to.
- * - The `tiltFollowingTheCursor` function calculates the 3D rotation and glow
- * position based on the cursor's position relative to the element's bounds.
- * :::
- *
- * ### HTML elements + CSS
- * 1. Add a `<div class="limel-3d-hover-effect-glow" />` element to your component's template,
- * inside the element you want to apply the 3D effect to, and preferably at the bottom of all
- * other elements within that element (to avoid the need to specifying `z-index`es).
- * 2. Add the following `mixin` to your component's SCSS file:
- * `limel-3d-hover-effect-glow($the3dElement, $border-radius);`
- *
- * and don't forget to define the `$the3dElement` variables for the mixin to work
- * (and optionally the `$border-radius`).
- * 3. Keep in mind that the `<div class="limel-3d-hover-effect-glow" />` will be
- * absolutely positioned inside the parent element, so make sure the parent element
- * has `position` set.
- * 4. Add the following `mixin` to the host element: `parent-of-the-3d-element`.
- * 5. Add the following `mixin` to the 3D element: `the-3d-element`.
- * 6. And if your element is supposed to be clickable, add this `mixin` as well: `the-3d-element--clickable`.
- *
- */
-export declare const MOUSE_SCALE_FACTOR = 100;
-export declare const ROTATION_DEGREE_MULTIPLIER = 1.6;
-export declare const GLOW_POSITION_MULTIPLIER = 2;
-export declare const CENTER_DIVISOR = 2;
-export declare function tiltFollowingTheCursor(e: MouseEvent, the3dElementBounds: DOMRect, element: HTMLElement): void;
-export declare function handleMouseEnter(element: HTMLElement, selector: string, setBounds: (bounds: DOMRect) => void, tiltCallback: (e: MouseEvent) => void): void;
-export declare function handleMouseLeave(element: HTMLElement, selector: string, tiltCallback: (e: MouseEvent) => void): void;
-//# sourceMappingURL=3d-tilt-hover-effect.d.ts.map