@limetech/lime-elements 37.69.1 → 37.70.1

package/dist/lime-elements/p-ca929a0e.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as r,h as i}from"./p-443111b3.js";import{i as o}from"./p-91741e79.js";import{g as a}from"./p-2f777fdb.js";const t='@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 n=class{constructor(i){e(this,i);this.actionSelected=r(this,"actionSelected",7);this.handleActionSelect=e=>{e.stopPropagation();if(o(e.detail)){this.actionSelected.emit(e.detail)}};this.heading=undefined;this.subheading=undefined;this.image=undefined;this.icon=undefined;this.value=undefined;this.actions=[];this.clickable=false;this.orientation="portrait"}render(){return i("section",{tabindex:this.clickable?0:""},this.renderImage(),i("div",{class:"body"},this.renderHeader(),this.renderSlot(),this.renderValue(),this.renderActionBar()))}renderImage(){if(!this.image){return}return i("img",{src:this.image.src,alt:this.image.alt,loading:"lazy"})}renderHeader(){if(!this.heading&&!this.subheading&&!this.icon){return}return i("header",null,this.renderIcon(),i("div",{class:"headings"},this.renderHeading(),this.renderSubheading()))}renderIcon(){var e;const r=a(this.icon);const o=typeof this.icon!=="string"?(e=this.icon)===null||e===void 0?void 0:e.color:undefined;if(!r){return}return i("limel-icon",{style:{color:`${o}`},badge:true,name:r})}renderHeading(){if(!this.heading){return}return i("h1",null,this.heading)}renderSubheading(){if(!this.subheading){return}return i("h2",null,this.subheading)}renderSlot(){return i("slot",{name:"component"})}renderValue(){return i("limel-markdown",{value:this.value})}renderActionBar(){if(!this.actions.length){return}return i("limel-action-bar",{actions:this.actions,onItemSelected:this.handleActionSelect})}};n.style=t;export{n as limel_card};
+//# sourceMappingURL=p-ca929a0e.entry.js.map

package/dist/lime-elements/p-ca929a0e.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["cardCss","Card","this","handleActionSelect","event","stopPropagation","isItem","detail","actionSelected","emit","render","h","tabindex","clickable","renderImage","class","renderHeader","renderSlot","renderValue","renderActionBar","image","src","alt","loading","heading","subheading","icon","renderIcon","renderHeading","renderSubheading","getIconName","color","_a","undefined","style","badge","name","value","actions","length","onItemSelected"],"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"],"mappings":"0HAAA,MAAMA,EAAU,gnG,MC2BHC,EAAI,M,wEAgJLC,KAAAC,mBACJC,IAEAA,EAAMC,kBACN,GAAIC,EAAOF,EAAMG,QAAS,CACtBL,KAAKM,eAAeC,KAAKL,EAAMG,O,+HA7GiB,G,eAO5B,M,iBAOmB,U,CAQxCG,SACH,OACIC,EAAA,WAASC,SAAUV,KAAKW,UAAY,EAAI,IACnCX,KAAKY,cACNH,EAAA,OAAKI,MAAM,QACNb,KAAKc,eACLd,KAAKe,aACLf,KAAKgB,cACLhB,KAAKiB,mB,CAMdL,cACJ,IAAKZ,KAAKkB,MAAO,CACb,M,CAGJ,OAAOT,EAAA,OAAKU,IAAKnB,KAAKkB,MAAMC,IAAKC,IAAKpB,KAAKkB,MAAME,IAAKC,QAAQ,Q,CAG1DP,eACJ,IAAKd,KAAKsB,UAAYtB,KAAKuB,aAAevB,KAAKwB,KAAM,CACjD,M,CAGJ,OACIf,EAAA,cACKT,KAAKyB,aACNhB,EAAA,OAAKI,MAAM,YACNb,KAAK0B,gBACL1B,KAAK2B,oB,CAMdF,a,MACJ,MAAMD,EAAOI,EAAY5B,KAAKwB,MAC9B,MAAMK,SACK7B,KAAKwB,OAAS,UAAWM,EAAA9B,KAAKwB,QAAI,MAAAM,SAAA,SAAAA,EAAED,MAAQE,UAEvD,IAAKP,EAAM,CACP,M,CAGJ,OACIf,EAAA,cACIuB,MAAO,CACHH,MAAO,GAAGA,KAEdI,MAAO,KACPC,KAAMV,G,CAKVE,gBACJ,IAAK1B,KAAKsB,QAAS,CACf,M,CAGJ,OAAOb,EAAA,UAAKT,KAAKsB,Q,CAGbK,mBACJ,IAAK3B,KAAKuB,WAAY,CAClB,M,CAGJ,OAAOd,EAAA,UAAKT,KAAKuB,W,CAGbR,aACJ,OAAON,EAAA,QAAMyB,KAAK,a,CAGdlB,cACJ,OAAOP,EAAA,kBAAgB0B,MAAOnC,KAAKmC,O,CAY/BlB,kBACJ,IAAKjB,KAAKoC,QAAQC,OAAQ,CACtB,M,CAGJ,OACI5B,EAAA,oBACI2B,QAASpC,KAAKoC,QACdE,eAAgBtC,KAAKC,oB"}

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

@@ -456,3 +456,98 @@ $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,3 +456,98 @@ $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/types/components/text-editor/prosemirror-adapter/prosemirror-adapter.d.ts

@@ -68,7 +68,7 @@ export declare class ProsemirrorAdapter {
   componentDidLoad(): void;
   connectedCallback(): void;
   disconnectedCallback(): void;
-  render(): any[];
+  render(): any;
   renderLinkMenu(): any;
   private setupContentConverter;
   private getActionBarItems;
@@ -84,7 +84,7 @@ export declare class ProsemirrorAdapter {
   private handleCancelLinkMenu;
   private handleSaveLinkMenu;
   private handleLinkChange;
-  setFocus(): void;
+  private handleFocus;
   private handleNewLinkSelection;
   private handleOpenLinkMenu;
   private changeEmitter;

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

@@ -0,0 +1,93 @@
+/**
+ * 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

package/package.json

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