@limetech/lime-elements 37.71.0 → 37.72.1

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

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

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

@@ -0,0 +1 @@
+{"version":3,"names":["cardCss","Card","this","handleActionSelect","event","stopPropagation","isItem","detail","actionSelected","emit","componentWillLoad","handleMouseEnter","handleMouseLeave","getMouseEventHandlers","host","render","h","Host","onMouseEnter","onMouseLeave","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    &: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"],"mappings":"4KAAA,MAAMA,EAAU,ksH,MCoCHC,EAAI,M,wEAoKLC,KAAAC,mBACJC,IAEAA,EAAMC,kBACN,GAAIC,EAAOF,EAAMG,QAAS,CACtBL,KAAKM,eAAeC,KAAKL,EAAMG,O,+HAjIiB,G,eAO5B,M,iBAOmB,U,CAcxCG,oBACH,MAAMC,iBAAEA,EAAgBC,iBAAEA,GAAqBC,EAC3CX,KAAKY,MAETZ,KAAKS,iBAAmBA,EACxBT,KAAKU,iBAAmBA,C,CAGrBG,SACH,OACIC,EAACC,EAAI,CACDC,aAAchB,KAAKS,iBACnBQ,aAAcjB,KAAKU,kBAEnBI,EAAA,WAASI,SAAUlB,KAAKmB,UAAY,EAAI,IACnCnB,KAAKoB,cACNN,EAAA,OAAKO,MAAM,QACNrB,KAAKsB,eACLtB,KAAKuB,aACLvB,KAAKwB,cACLxB,KAAKyB,mBAEVX,EAAA,OAAKO,MAAM,gC,CAMnBD,cACJ,IAAKpB,KAAK0B,MAAO,CACb,M,CAGJ,OAAOZ,EAAA,OAAKa,IAAK3B,KAAK0B,MAAMC,IAAKC,IAAK5B,KAAK0B,MAAME,IAAKC,QAAQ,Q,CAG1DP,eACJ,IAAKtB,KAAK8B,UAAY9B,KAAK+B,aAAe/B,KAAKgC,KAAM,CACjD,M,CAGJ,OACIlB,EAAA,cACKd,KAAKiC,aACNnB,EAAA,OAAKO,MAAM,YACNrB,KAAKkC,gBACLlC,KAAKmC,oB,CAMdF,a,MACJ,MAAMD,EAAOI,EAAYpC,KAAKgC,MAC9B,MAAMK,SACKrC,KAAKgC,OAAS,UAAWM,EAAAtC,KAAKgC,QAAI,MAAAM,SAAA,SAAAA,EAAED,MAAQE,UAEvD,IAAKP,EAAM,CACP,M,CAGJ,OACIlB,EAAA,cACI0B,MAAO,CACHH,MAAO,GAAGA,KAEdI,MAAO,KACPC,KAAMV,G,CAKVE,gBACJ,IAAKlC,KAAK8B,QAAS,CACf,M,CAGJ,OAAOhB,EAAA,UAAKd,KAAK8B,Q,CAGbK,mBACJ,IAAKnC,KAAK+B,WAAY,CAClB,M,CAGJ,OAAOjB,EAAA,UAAKd,KAAK+B,W,CAGbR,aACJ,OAAOT,EAAA,QAAM4B,KAAK,a,CAGdlB,cACJ,OAAOV,EAAA,kBAAgB6B,MAAO3C,KAAK2C,O,CAY/BlB,kBACJ,IAAKzB,KAAK4C,QAAQC,OAAQ,CACtB,M,CAGJ,OACI/B,EAAA,oBACI8B,QAAS5C,KAAK4C,QACdE,eAAgB9C,KAAKC,oB"}

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

@@ -456,3 +456,117 @@ $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;
+            @media (prefers-reduced-motion) {
+                opacity: 0.2;
+            }
+        }
+
+        background-image: radial-gradient(
+            circle at var(--limel-3d-hover-effect-glow-position, 50% -20%),
+            rgb(var(--color-white), 0.3),
+            rgb(var(--color-white), 0)
+        );
+
+        mix-blend-mode: plus-lighter;
+    }
+}
+
+// These mixins below are designed to apply the necessary visual effects,
+// when the `tiltFollowingTheCursor` utility function from `3d-tilt-hover-effect.ts`
+// is implemented in a component.
+@mixin parent-of-the-3d-element {
+    isolation: isolate;
+    transform-style: preserve-3d;
+
+    perspective: 1000px;
+    @media (prefers-reduced-motion) {
+        perspective: 2000px;
+    }
+}
+
+@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);
+
+    &:focus {
+        outline: none;
+    }
+
+    &: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), var(--shadow-depth-16);
+    }
+
+    &:hover {
+        transform: scale3d(1.01, 1.01, 1.01)
+            rotate3d(var(--limel-3d-hover-effect-rotate3d));
+    }
+    &:focus-visible {
+        outline: none;
+        transform: scale3d(1.01, 1.01, 1.01);
+    }
+}
+
+@mixin the-3d-element--clickable {
+    cursor: pointer;
+    box-shadow: var(--button-shadow-normal);
+
+    &:hover,
+    &:focus-visible {
+        // seems repetitive. But it's required for some scenarios, like for info tiles.
+        box-shadow: var(--button-shadow-hovered), var(--shadow-depth-16);
+    }
+
+    &:active {
+        transform: scale3d(1, 1, 1) rotate3d(0, 0, 0, 0deg);
+        box-shadow: var(--button-shadow-pressed);
+    }
+
+    &:focus-visible {
+        box-shadow: var(--shadow-depth-8-focused), var(--button-shadow-hovered);
+    }
+
+    &:focus-visible:active {
+        box-shadow: var(--shadow-depth-8-focused), var(--button-shadow-pressed);
+    }
+}

package/dist/scss/mixins.scss

@@ -456,3 +456,117 @@ $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;
+            @media (prefers-reduced-motion) {
+                opacity: 0.2;
+            }
+        }
+
+        background-image: radial-gradient(
+            circle at var(--limel-3d-hover-effect-glow-position, 50% -20%),
+            rgb(var(--color-white), 0.3),
+            rgb(var(--color-white), 0)
+        );
+
+        mix-blend-mode: plus-lighter;
+    }
+}
+
+// These mixins below are designed to apply the necessary visual effects,
+// when the `tiltFollowingTheCursor` utility function from `3d-tilt-hover-effect.ts`
+// is implemented in a component.
+@mixin parent-of-the-3d-element {
+    isolation: isolate;
+    transform-style: preserve-3d;
+
+    perspective: 1000px;
+    @media (prefers-reduced-motion) {
+        perspective: 2000px;
+    }
+}
+
+@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);
+
+    &:focus {
+        outline: none;
+    }
+
+    &: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), var(--shadow-depth-16);
+    }
+
+    &:hover {
+        transform: scale3d(1.01, 1.01, 1.01)
+            rotate3d(var(--limel-3d-hover-effect-rotate3d));
+    }
+    &:focus-visible {
+        outline: none;
+        transform: scale3d(1.01, 1.01, 1.01);
+    }
+}
+
+@mixin the-3d-element--clickable {
+    cursor: pointer;
+    box-shadow: var(--button-shadow-normal);
+
+    &:hover,
+    &:focus-visible {
+        // seems repetitive. But it's required for some scenarios, like for info tiles.
+        box-shadow: var(--button-shadow-hovered), var(--shadow-depth-16);
+    }
+
+    &:active {
+        transform: scale3d(1, 1, 1) rotate3d(0, 0, 0, 0deg);
+        box-shadow: var(--button-shadow-pressed);
+    }
+
+    &:focus-visible {
+        box-shadow: var(--shadow-depth-8-focused), var(--button-shadow-hovered);
+    }
+
+    &:focus-visible:active {
+        box-shadow: var(--shadow-depth-8-focused), var(--button-shadow-pressed);
+    }
+}

package/dist/types/components/card/card.d.ts

@@ -61,6 +61,10 @@ export declare class Card {
    * Fired when a action bar item has been clicked.
    */
   actionSelected: EventEmitter<ActionBarItem>;
+  private host;
+  private handleMouseEnter;
+  private handleMouseLeave;
+  componentWillLoad(): void;
   render(): any;
   private renderImage;
   private renderHeader;

package/dist/types/components/info-tile/info-tile.d.ts

@@ -74,7 +74,11 @@ export declare class InfoTile {
    * Colors change with intervals of 10 %.
    */
   progress?: InfoTileProgress;
-  render(): any[];
+  private host;
+  private handleMouseEnter;
+  private handleMouseLeave;
+  componentWillLoad(): void;
+  render(): any;
   private checkProps;
   private renderPrefix;
   private renderValue;

package/dist/types/components/markdown/markdown-parser.d.ts

@@ -14,6 +14,14 @@ import { CustomElementDefinition } from '../../global/shared-types/custom-elemen
  * @returns The resulting HTML.
  */
 export declare function markdownToHTML(text: string, options?: markdownToHTMLOptions): Promise<string>;
+/**
+ * Sanitizes a given HTML string by removing dangerous tags and attributes.
+ *
+ * @param html - The string containing HTML to sanitize.
+ * @param whitelist - Optional whitelist of custom components.
+ * @returns The sanitized HTML string.
+ */
+export declare function sanitizeHTML(html: string, whitelist?: CustomElementDefinition[]): Promise<string>;
 /**
  * Options for markdownToHTML.
  */

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

@@ -0,0 +1,118 @@
+/**
+ * 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.
+ */
+export declare const MOUSE_SCALE_FACTOR = 100;
+export declare const SCALING_BASE = 50;
+export declare const ROTATION_DEGREE_MULTIPLIER = 1.6;
+export declare const GLOW_POSITION_MULTIPLIER = 2;
+export declare const CENTER_DIVISOR = 2;
+export declare const tiltFollowingTheCursor: (the3dElementBounds: DOMRect, element: HTMLElement) => (e: MouseEvent) => void;
+export declare const getMouseEventHandlers: (element: HTMLElement) => {
+  handleMouseEnter: () => void;
+  handleMouseLeave: () => void;
+};
+//# sourceMappingURL=3d-tilt-hover-effect.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "37.71.0",
+  "version": "37.72.1",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",
@@ -88,14 +88,15 @@
     "prettier": "^3.3.3",
     "prosemirror-example-setup": "^1.2.3",
     "prosemirror-markdown": "^1.13.1",
-    "prosemirror-schema-basic": "^1.2.3",
     "prosemirror-model": ">=1.22.1",
+    "prosemirror-schema-basic": "^1.2.3",
     "prosemirror-tables": "^1.5.0",
     "puppeteer": "^19.11.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-shadow-dom-retarget-events": "^1.1.0",
     "rehype-external-links": "^3.0.0",
+    "rehype-parse": "^9.0.1",
     "rehype-raw": "^7.0.0",
     "rehype-sanitize": "^6.0.0",
     "rehype-stringify": "^10.0.1",