@limetech/lime-elements 37.78.0 → 37.78.1

package/dist/cjs/limel-shortcut.cjs.entry.js

@@ -3,8 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d1052409.js');
+const _3dTiltHoverEffect = require('./3d-tilt-hover-effect-ef81ae4c.js');
 
-const shortcutCss = "@charset \"UTF-8\";:host(limel-shortcut){--badge-text-color:var(\n      --shortcut-badge-text-color,\n      rgb(var(--color-white))\n  );--badge-background-color:var(\n      --shortcut-badge-background-color,\n      rgb(var(--color-red-default))\n  );position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;row-gap:0.0625rem}:host(limel-shortcut) *{box-sizing:border-box}:host(limel-shortcut[disabled]) a{opacity:0.5;box-shadow:unset;cursor:not-allowed}a{all:unset;transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--mdc-theme-on-surface);background-color:var(--shortcut-background-color, var(--lime-elevated-surface-background-color));box-shadow:var(--button-shadow-normal);text-align:center;height:calc(100% - 1rem);width:calc(100% - 1rem);padding:0.5rem;border-radius:var(--shortcut-border-radius, 1rem)}a:hover,a:focus,a:focus-visible{will-change:color, background-color, box-shadow, transform}a:hover{transform:translate3d(0, -0.04rem, 0);color:var(--mdc-theme-on-surface);background-color:var(--shortcut-background-color, var(--lime-elevated-surface-background-color));box-shadow:var(--button-shadow-hovered)}a:active{--limel-clickable-transform-timing-function:cubic-bezier(\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)}a:hover,a:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}a:focus{outline:none}a:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}limel-icon{display:flex;height:100%;width:100%;justify-content:center;color:var(--shortcut-icon-color, rgb(var(--contrast-1000)));border-radius:var(--shortcut-border-radius, 1rem)}span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%;color:var(--shortcut-label-color, rgb(var(--contrast-1100)));font-size:0.75rem;text-align:center}limel-badge{position:absolute;top:-0.25rem;right:0.125rem}";
+const shortcutCss = "@charset \"UTF-8\";:host(limel-shortcut){--badge-text-color:var(\n      --shortcut-badge-text-color,\n      rgb(var(--color-white))\n  );--badge-background-color:var(\n      --shortcut-badge-background-color,\n      rgb(var(--color-red-default))\n  );position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;row-gap:0.0625rem}:host(limel-shortcut) *{box-sizing:border-box}:host(limel-shortcut[disabled]) a{opacity:0.5;box-shadow:unset;cursor:not-allowed}a{all:unset;text-align:center;height:calc(100% - 1rem);width:calc(100% - 1rem);padding:0.5rem;border-radius:var(--shortcut-border-radius, 1rem);background-color:var(--shortcut-background-color, var(--lime-elevated-surface-background-color))}limel-icon{display:flex;height:100%;width:100%;justify-content:center;color:var(--shortcut-icon-color, rgb(var(--contrast-1000)));border-radius:var(--shortcut-border-radius, 1rem)}span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%;color:var(--shortcut-label-color, rgb(var(--contrast-1100)));font-size:0.75rem;text-align:center}limel-badge{position:absolute;top:-0.25rem;right:0.125rem}limel-3d-hover-effect-glow{border-radius:var(--shortcut-border-radius, 1rem)}:host(limel-shortcut){isolation:isolate;transform-style:preserve-3d;perspective:1000px}@media (prefers-reduced-motion){:host(limel-shortcut){perspective:2000px}}a{position:relative;transition-duration:0.8s;transition-property:transform, box-shadow, background-color;transition-timing-function:ease-out;transform:scale3d(1, 1, 1) rotate3d(0, 0, 0, 0deg);cursor:pointer;box-shadow:var(--button-shadow-normal)}a:focus{outline:none}a:hover,a:focus,a:focus-visible,a:focus-within{will-change:background-color, box-shadow, transform}a:hover,a:focus,a:focus-visible,a:active{transition-duration:0.2s}a:hover,a:focus-visible{box-shadow:var(--button-shadow-hovered), var(--shadow-depth-16)}a:hover{transform:scale3d(1.01, 1.01, 1.01) rotate3d(var(--limel-3d-hover-effect-rotate3d))}a:focus-visible{outline:none;transform:scale3d(1.01, 1.01, 1.01)}a:hover limel-3d-hover-effect-glow{--limel-3d-hover-effect-glow-opacity:0.5}@media (prefers-reduced-motion){a:hover limel-3d-hover-effect-glow{--limel-3d-hover-effect-glow-opacity:0.2}}a:hover,a:focus-visible{box-shadow:var(--button-shadow-hovered), var(--shadow-depth-16)}a:active{transform:scale3d(1, 1, 1) rotate3d(0, 0, 0, 0deg);box-shadow:var(--button-shadow-pressed)}a:focus-visible{box-shadow:var(--shadow-depth-8-focused), var(--button-shadow-hovered)}a:focus-visible:active{box-shadow:var(--shadow-depth-8-focused), var(--button-shadow-pressed)}";
 
 const Shortcut = class {
   constructor(hostRef) {
@@ -38,14 +39,16 @@ const Shortcut = class {
     this.badge = undefined;
     this.link = undefined;
   }
+  componentWillLoad() {
+    const { handleMouseEnter, handleMouseLeave } = _3dTiltHoverEffect.getMouseEventHandlers(this.host);
+    this.handleMouseEnter = handleMouseEnter;
+    this.handleMouseLeave = handleMouseLeave;
+  }
   render() {
     var _a, _b, _c;
-    return [
-      index.h("a", { "aria-disabled": this.disabled, href: (_a = this.link) === null || _a === void 0 ? void 0 : _a.href, target: (_b = this.link) === null || _b === void 0 ? void 0 : _b.target, tabindex: "0", "aria-label": this.getAriaLabel(), title: (_c = this.link) === null || _c === void 0 ? void 0 : _c.title }, index.h("limel-icon", { name: this.icon })),
-      this.renderLabel(),
-      this.renderNotification(),
-    ];
+    return (index.h(index.Host, { onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, index.h("a", { "aria-disabled": this.disabled, href: (_a = this.link) === null || _a === void 0 ? void 0 : _a.href, target: (_b = this.link) === null || _b === void 0 ? void 0 : _b.target, tabindex: "0", "aria-label": this.getAriaLabel(), title: (_c = this.link) === null || _c === void 0 ? void 0 : _c.title }, index.h("limel-icon", { name: this.icon }), index.h("limel-3d-hover-effect-glow", null)), this.renderLabel(), this.renderNotification()));
   }
+  get host() { return index.getElement(this); }
 };
 Shortcut.style = shortcutCss;
 

package/dist/cjs/limel-shortcut.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"limel-shortcut.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,WAAW,GAAG,+rEAA+rE;;MCuBtsE,QAAQ;;;IAiDT,gBAAW,GAAG;MAClB,IAAI,IAAI,CAAC,KAAK,EAAE;QACZ,OAAOA,iCAAkB,MAAM,IAAE,IAAI,CAAC,KAAK,CAAQ,CAAC;OACvD;KACJ,CAAC;IAEM,iBAAY,GAAG;;MACnB,IAAI,IAAI,CAAC,KAAK,KAAI,MAAA,IAAI,CAAC,IAAI,0CAAE,KAAK,CAAA,EAAE;QAChC,OAAO,IAAI,CAAC,KAAK,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;OAC9C;MAED,IAAI,IAAI,CAAC,KAAK,EAAE;QACZ,OAAO,IAAI,CAAC,KAAK,CAAC;OACrB;MAED,IAAI,MAAA,IAAI,CAAC,IAAI,0CAAE,KAAK,EAAE;QAClB,OAAO,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;OAC1B;MAED,OAAO,SAAS,CAAC;KACpB,CAAC;IAEM,uBAAkB,GAAG;MACzB,IAAI,IAAI,CAAC,KAAK,EAAE;QACZ,OAAOA,yBAAa,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI,CAAC;OAC7C;KACJ,CAAC;;iBAhEsB,IAAI;oBAMA,KAAK;;;;EAe1B,MAAM;;IACT,OAAO;MACHA,gCACmB,IAAI,CAAC,QAAQ,EAC5B,IAAI,EAAE,MAAA,IAAI,CAAC,IAAI,0CAAE,IAAI,EACrB,MAAM,EAAE,MAAA,IAAI,CAAC,IAAI,0CAAE,MAAM,EACzB,QAAQ,EAAC,GAAG,gBACA,IAAI,CAAC,YAAY,EAAE,EAC/B,KAAK,EAAE,MAAA,IAAI,CAAC,IAAI,0CAAE,KAAK,IAEvBA,wBAAY,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,CAC/B;MACJ,IAAI,CAAC,WAAW,EAAE;MAClB,IAAI,CAAC,kBAAkB,EAAE;KAC5B,CAAC;GACL;;;;;;","names":["h"],"sources":["./src/components/shortcut/shortcut.scss?tag=limel-shortcut&encapsulation=shadow","./src/components/shortcut/shortcut.tsx"],"sourcesContent":["/**\n* @prop --shortcut-border-radius: defines the radius of corners of the shortcut. Defaults to `1rem`\n* @prop --shortcut-icon-color: defines the fill color of the shortcut icon. Defaults to `--contrast-1000`\n* @prop --shortcut-label-color: defines the color of the shortcut label. Defaults to `--contrast-1100`\n* @prop --shortcut-background-color: defines the backgrounds color of the shortcut icon. Defaults to `--lime-elevated-surface-background-color`\n* @prop --shortcut-badge-text-color: Text color of the notification badge. Defaults to `--color-white`\n* @prop --shortcut-badge-background-color: Background color of the notification badge. Defaults to `--color-red-default`\n*/\n\n@use '../../style/mixins';\n\n:host(limel-shortcut) {\n    --badge-text-color: var(\n        --shortcut-badge-text-color,\n        rgb(var(--color-white))\n    );\n    --badge-background-color: var(\n        --shortcut-badge-background-color,\n        rgb(var(--color-red-default))\n    );\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    row-gap: 0.0625rem; //1px\n\n    * {\n        box-sizing: border-box;\n    }\n}\n\n:host(limel-shortcut[disabled]) {\n    a {\n        opacity: 0.5;\n        box-shadow: unset;\n        cursor: not-allowed;\n    }\n}\n\na {\n    all: unset;\n    @include mixins.is-elevated-clickable(\n        $background-color: var(\n                --shortcut-background-color,\n                var(--lime-elevated-surface-background-color)\n            ),\n        $background-color--hovered: var(\n                --shortcut-background-color,\n                var(--lime-elevated-surface-background-color)\n            )\n    );\n    @include mixins.visualize-keyboard-focus;\n    text-align: center;\n\n    height: calc(100% - 1rem);\n    width: calc(100% - 1rem);\n    padding: 0.5rem;\n\n    border-radius: var(--shortcut-border-radius, 1rem);\n}\n\nlimel-icon {\n    display: flex;\n    height: 100%;\n    width: 100%;\n    justify-content: center;\n    color: var(--shortcut-icon-color, rgb(var(--contrast-1000)));\n    border-radius: var(--shortcut-border-radius, 1rem);\n}\n\nspan {\n    @include mixins.truncate-text;\n    width: 100%;\n    color: var(--shortcut-label-color, rgb(var(--contrast-1100)));\n    font-size: 0.75rem;\n    text-align: center;\n}\n\nlimel-badge {\n    position: absolute;\n    top: -0.25rem;\n    right: 0.125rem;\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { Link } from '../../global/shared-types/link.types';\n\n/**\n * This component can be used on places such as a start page or a dashboard.\n * Clicking on the component should navigate the user to a new screen,\n * to which you need to provide a URL, by specifying an `href` for the `link` property.\n *\n * By default, this navigation will happen within the same browser tab.\n * However, it is possible to override that behavior, by specifying a `target`\n * for the `link` property\n *\n * @exampleComponent limel-example-shortcut\n * @exampleComponent limel-example-shortcut-notification\n * @exampleComponent limel-example-shortcut-styling\n * @exampleComponent limel-example-shortcut-with-click-handler\n */\n\n@Component({\n    tag: 'limel-shortcut',\n    shadow: true,\n    styleUrl: 'shortcut.scss',\n})\nexport class Shortcut {\n    /**\n     * Name of icon for the shortcut.\n     */\n    @Prop({ reflect: true })\n    public icon: string;\n\n    /**\n     * The text to show below the shortcut. Long label will be truncated.\n     */\n    @Prop({ reflect: true })\n    public label?: string = null;\n\n    /**\n     * Set to `true` if shortcut is disabled.\n     */\n    @Prop({ reflect: true })\n    public disabled?: boolean = false;\n\n    /**\n     * If specified, will display a notification badge\n     * on the shortcut.\n     */\n    @Prop({ reflect: true })\n    public badge?: number | string;\n\n    /**\n     * If supplied, the shortcut will be a clickable link.\n     */\n    @Prop()\n    public link?: Link;\n\n    public render() {\n        return [\n            <a\n                aria-disabled={this.disabled}\n                href={this.link?.href}\n                target={this.link?.target}\n                tabindex=\"0\"\n                aria-label={this.getAriaLabel()}\n                title={this.link?.title}\n            >\n                <limel-icon name={this.icon} />\n            </a>,\n            this.renderLabel(),\n            this.renderNotification(),\n        ];\n    }\n\n    private renderLabel = () => {\n        if (this.label) {\n            return <span aria-hidden=\"true\">{this.label}</span>;\n        }\n    };\n\n    private getAriaLabel = () => {\n        if (this.label && this.link?.title) {\n            return this.label + '. ' + this.link.title;\n        }\n\n        if (this.label) {\n            return this.label;\n        }\n\n        if (this.link?.title) {\n            return this.link.title;\n        }\n\n        return undefined;\n    };\n\n    private renderNotification = () => {\n        if (this.badge) {\n            return <limel-badge label={this.badge} />;\n        }\n    };\n}\n"],"version":3}
+{"file":"limel-shortcut.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,WAAW,GAAG,qjFAAqjF;;MCwB5jF,QAAQ;;;IAqET,gBAAW,GAAG;MAClB,IAAI,IAAI,CAAC,KAAK,EAAE;QACZ,OAAOA,iCAAkB,MAAM,IAAE,IAAI,CAAC,KAAK,CAAQ,CAAC;OACvD;KACJ,CAAC;IAEM,iBAAY,GAAG;;MACnB,IAAI,IAAI,CAAC,KAAK,KAAI,MAAA,IAAI,CAAC,IAAI,0CAAE,KAAK,CAAA,EAAE;QAChC,OAAO,IAAI,CAAC,KAAK,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;OAC9C;MAED,IAAI,IAAI,CAAC,KAAK,EAAE;QACZ,OAAO,IAAI,CAAC,KAAK,CAAC;OACrB;MAED,IAAI,MAAA,IAAI,CAAC,IAAI,0CAAE,KAAK,EAAE;QAClB,OAAO,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;OAC1B;MAED,OAAO,SAAS,CAAC;KACpB,CAAC;IAEM,uBAAkB,GAAG;MACzB,IAAI,IAAI,CAAC,KAAK,EAAE;QACZ,OAAOA,yBAAa,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI,CAAC;OAC7C;KACJ,CAAC;;iBApFsB,IAAI;oBAMA,KAAK;;;;EAqB1B,iBAAiB;IACpB,MAAM,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,GAAGC,wCAAqB,CAChE,IAAI,CAAC,IAAI,CACZ,CAAC;IACF,IAAI,CAAC,gBAAgB,GAAG,gBAAgB,CAAC;IACzC,IAAI,CAAC,gBAAgB,GAAG,gBAAgB,CAAC;GAC5C;EAEM,MAAM;;IACT,QACID,QAACE,UAAI,IACD,YAAY,EAAE,IAAI,CAAC,gBAAgB,EACnC,YAAY,EAAE,IAAI,CAAC,gBAAgB,IAEnCF,gCACmB,IAAI,CAAC,QAAQ,EAC5B,IAAI,EAAE,MAAA,IAAI,CAAC,IAAI,0CAAE,IAAI,EACrB,MAAM,EAAE,MAAA,IAAI,CAAC,IAAI,0CAAE,MAAM,EACzB,QAAQ,EAAC,GAAG,gBACA,IAAI,CAAC,YAAY,EAAE,EAC/B,KAAK,EAAE,MAAA,IAAI,CAAC,IAAI,0CAAE,KAAK,IAEvBA,wBAAY,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,EAC/BA,2CAA8B,CAC9B,EACH,IAAI,CAAC,WAAW,EAAE,EAClB,IAAI,CAAC,kBAAkB,EAAE,CACvB,EACT;GACL;;;;;;;","names":["h","getMouseEventHandlers","Host"],"sources":["./src/components/shortcut/shortcut.scss?tag=limel-shortcut&encapsulation=shadow","./src/components/shortcut/shortcut.tsx"],"sourcesContent":["/**\n* @prop --shortcut-border-radius: defines the radius of corners of the shortcut. Defaults to `1rem`\n* @prop --shortcut-icon-color: defines the fill color of the shortcut icon. Defaults to `--contrast-1000`\n* @prop --shortcut-label-color: defines the color of the shortcut label. Defaults to `--contrast-1100`\n* @prop --shortcut-background-color: defines the backgrounds color of the shortcut icon. Defaults to `--lime-elevated-surface-background-color`\n* @prop --shortcut-badge-text-color: Text color of the notification badge. Defaults to `--color-white`\n* @prop --shortcut-badge-background-color: Background color of the notification badge. Defaults to `--color-red-default`\n*/\n\n@use '../../style/mixins';\n\n:host(limel-shortcut) {\n    --badge-text-color: var(\n        --shortcut-badge-text-color,\n        rgb(var(--color-white))\n    );\n    --badge-background-color: var(\n        --shortcut-badge-background-color,\n        rgb(var(--color-red-default))\n    );\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    row-gap: 0.0625rem; //1px\n\n    * {\n        box-sizing: border-box;\n    }\n}\n\n:host(limel-shortcut[disabled]) {\n    a {\n        opacity: 0.5;\n        box-shadow: unset;\n        cursor: not-allowed;\n    }\n}\n\na {\n    all: unset;\n    text-align: center;\n\n    height: calc(100% - 1rem);\n    width: calc(100% - 1rem);\n    padding: 0.5rem;\n\n    border-radius: var(--shortcut-border-radius, 1rem);\n    background-color: var(\n        --shortcut-background-color,\n        var(--lime-elevated-surface-background-color)\n    );\n}\n\nlimel-icon {\n    display: flex;\n    height: 100%;\n    width: 100%;\n    justify-content: center;\n    color: var(--shortcut-icon-color, rgb(var(--contrast-1000)));\n    border-radius: var(--shortcut-border-radius, 1rem);\n}\n\nspan {\n    @include mixins.truncate-text;\n    width: 100%;\n    color: var(--shortcut-label-color, rgb(var(--contrast-1100)));\n    font-size: 0.75rem;\n    text-align: center;\n}\n\nlimel-badge {\n    position: absolute;\n    top: -0.25rem;\n    right: 0.125rem;\n}\n\n// The 3D effect\nlimel-3d-hover-effect-glow {\n    border-radius: var(--shortcut-border-radius, 1rem);\n}\n\n:host(limel-shortcut) {\n    @include mixins.parent-of-the-3d-element;\n}\n\na {\n    @include mixins.the-3d-element;\n\n    @include mixins.the-3d-element--clickable;\n}\n","import { Component, Prop, h, Element, Host } from '@stencil/core';\nimport { Link } from '../../global/shared-types/link.types';\nimport { getMouseEventHandlers } from '../../util/3d-tilt-hover-effect';\n\n/**\n * This component can be used on places such as a start page or a dashboard.\n * Clicking on the component should navigate the user to a new screen,\n * to which you need to provide a URL, by specifying an `href` for the `link` property.\n *\n * By default, this navigation will happen within the same browser tab.\n * However, it is possible to override that behavior, by specifying a `target`\n * for the `link` property\n *\n * @exampleComponent limel-example-shortcut\n * @exampleComponent limel-example-shortcut-notification\n * @exampleComponent limel-example-shortcut-styling\n * @exampleComponent limel-example-shortcut-with-click-handler\n */\n\n@Component({\n    tag: 'limel-shortcut',\n    shadow: true,\n    styleUrl: 'shortcut.scss',\n})\nexport class Shortcut {\n    /**\n     * Name of icon for the shortcut.\n     */\n    @Prop({ reflect: true })\n    public icon: string;\n\n    /**\n     * The text to show below the shortcut. Long label will be truncated.\n     */\n    @Prop({ reflect: true })\n    public label?: string = null;\n\n    /**\n     * Set to `true` if shortcut is disabled.\n     */\n    @Prop({ reflect: true })\n    public disabled?: boolean = false;\n\n    /**\n     * If specified, will display a notification badge\n     * on the shortcut.\n     */\n    @Prop({ reflect: true })\n    public badge?: number | string;\n\n    /**\n     * If supplied, the shortcut will be a clickable link.\n     */\n    @Prop()\n    public link?: Link;\n\n    @Element()\n    private host: HTMLElement;\n\n    private handleMouseEnter: () => void;\n    private handleMouseLeave: () => void;\n\n    public componentWillLoad() {\n        const { handleMouseEnter, handleMouseLeave } = getMouseEventHandlers(\n            this.host,\n        );\n        this.handleMouseEnter = handleMouseEnter;\n        this.handleMouseLeave = handleMouseLeave;\n    }\n\n    public render() {\n        return (\n            <Host\n                onMouseEnter={this.handleMouseEnter}\n                onMouseLeave={this.handleMouseLeave}\n            >\n                <a\n                    aria-disabled={this.disabled}\n                    href={this.link?.href}\n                    target={this.link?.target}\n                    tabindex=\"0\"\n                    aria-label={this.getAriaLabel()}\n                    title={this.link?.title}\n                >\n                    <limel-icon name={this.icon} />\n                    <limel-3d-hover-effect-glow />\n                </a>\n                {this.renderLabel()}\n                {this.renderNotification()}\n            </Host>\n        );\n    }\n\n    private renderLabel = () => {\n        if (this.label) {\n            return <span aria-hidden=\"true\">{this.label}</span>;\n        }\n    };\n\n    private getAriaLabel = () => {\n        if (this.label && this.link?.title) {\n            return this.label + '. ' + this.link.title;\n        }\n\n        if (this.label) {\n            return this.label;\n        }\n\n        if (this.link?.title) {\n            return this.link.title;\n        }\n\n        return undefined;\n    };\n\n    private renderNotification = () => {\n        if (this.badge) {\n            return <limel-badge label={this.badge} />;\n        }\n    };\n}\n"],"version":3}

package/dist/cjs/loader.cjs.js

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

package/dist/collection/collection-manifest.json

@@ -1,5 +1,6 @@
 {
   "entries": [
+    "./components/3d-hover-effect-glow/3d-hover-effect-glow.js",
     "./components/action-bar/action-bar.js",
     "./components/action-bar/action-bar-item/action-bar-item.js",
     "./components/action-bar/action-bar-item/action-bar-overflow-menu.js",

package/dist/collection/components/3d-hover-effect-glow/3d-hover-effect-glow.css

@@ -0,0 +1,18 @@
+:host(limel-3d-hover-effect-glow) {
+  display: block;
+  pointer-events: none;
+  position: absolute;
+  inset: 0;
+  mix-blend-mode: plus-lighter;
+}
+
+div {
+  position: absolute;
+  inset: 0;
+  transition: background, opacity;
+  transition-timing-function: ease-out;
+  transition-duration: 0.8s;
+  border-radius: inherit;
+  opacity: var(--limel-3d-hover-effect-glow-opacity, 0.1);
+  background-image: radial-gradient(circle at var(--limel-3d-hover-effect-glow-position, 50% -20%), rgb(var(--color-white), 0.3), rgb(var(--color-white), 0));
+}

package/dist/collection/components/3d-hover-effect-glow/3d-hover-effect-glow.js

@@ -0,0 +1,34 @@
+import { h } from '@stencil/core';
+/**
+ * This component enhances the visual effects, when the `tiltFollowingTheCursor`
+ * utility function from `3d-tilt-hover-effect.ts` is implemented in a component.
+ *
+ * This component should be added to the HTML structure of the consumer component.
+ *
+ * This component carries its own styles which are needed to create a glow effect on the
+ * 3D element within the parent element, when the parent is hovered.
+ *
+ * The parent element must be using the `tiltFollowingTheCursor` utility function
+ * imported from `3d-tilt-hover-effect.ts`. This function will dynamically
+ * affect parts of the styles of this 3D glow effect.
+ *
+ * @private
+ */
+export class HoverEffectGlowComponent {
+  render() {
+    return h("div", null);
+  }
+  static get is() { return "limel-3d-hover-effect-glow"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["3d-hover-effect-glow.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["3d-hover-effect-glow.css"]
+    };
+  }
+}
+//# sourceMappingURL=3d-hover-effect-glow.js.map

package/dist/collection/components/3d-hover-effect-glow/3d-hover-effect-glow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"3d-hover-effect-glow.js","sourceRoot":"","sources":["../../../src/components/3d-hover-effect-glow/3d-hover-effect-glow.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAC7C;;;;;;;;;;;;;;GAcG;AAMH,MAAM,OAAO,wBAAwB;EAC1B,MAAM;IACT,OAAO,cAAO,CAAC;EACnB,CAAC;;;;;;;;;CACJ","sourcesContent":["import { Component, h } from '@stencil/core';\n/**\n * This component enhances the visual effects, when the `tiltFollowingTheCursor`\n * utility function from `3d-tilt-hover-effect.ts` is implemented in a component.\n *\n * This component should be added to the HTML structure of the consumer component.\n *\n * This component carries its own styles which are needed to create a glow effect on the\n * 3D element within the parent element, when the parent is hovered.\n *\n * The parent element must be using the `tiltFollowingTheCursor` utility function\n * imported from `3d-tilt-hover-effect.ts`. This function will dynamically\n * affect parts of the styles of this 3D glow effect.\n *\n * @private\n */\n@Component({\n    tag: 'limel-3d-hover-effect-glow',\n    shadow: true,\n    styleUrl: '3d-hover-effect-glow.scss',\n})\nexport class HoverEffectGlowComponent {\n    public render() {\n        return <div />;\n    }\n}\n"]}

package/dist/collection/components/card/card.css

@@ -169,23 +169,8 @@ limel-action-bar {
   margin-left: auto;
 }
 
-.limel-3d-hover-effect-glow {
-  transition: background 0.4s ease, opacity 0.4s ease;
-  pointer-events: none;
-  position: absolute;
-  inset: 0;
+limel-3d-hover-effect-glow {
   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) {
@@ -225,6 +210,14 @@ section:focus-visible {
   outline: none;
   transform: scale3d(1.01, 1.01, 1.01);
 }
+section:hover limel-3d-hover-effect-glow {
+  --limel-3d-hover-effect-glow-opacity: 0.5;
+}
+@media (prefers-reduced-motion) {
+  section:hover limel-3d-hover-effect-glow {
+    --limel-3d-hover-effect-glow-opacity: 0.2;
+  }
+}
 :host(limel-card[clickable]) section {
   cursor: pointer;
   box-shadow: var(--button-shadow-normal);

package/dist/collection/components/card/card.js

@@ -39,7 +39,7 @@ export class Card {
     this.handleMouseLeave = handleMouseLeave;
   }
   render() {
-    return (h(Host, { onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("section", { tabindex: this.clickable ? 0 : '' }, this.renderImage(), h("div", { class: "body" }, this.renderHeader(), this.renderSlot(), this.renderValue(), this.renderActionBar()), h("div", { class: "limel-3d-hover-effect-glow" }))));
+    return (h(Host, { onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("section", { tabindex: this.clickable ? 0 : '' }, this.renderImage(), h("div", { class: "body" }, this.renderHeader(), this.renderSlot(), this.renderValue(), this.renderActionBar()), h("limel-3d-hover-effect-glow", null))));
   }
   renderImage() {
     if (!this.image) {

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

@@ -1 +1 @@
-{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../src/components/card/card.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    h,\n    Prop,\n    Event,\n    EventEmitter,\n    Element,\n    Host,\n} from '@stencil/core';\nimport { Image } from '../../global/shared-types/image.types';\nimport { Icon } from '../../global/shared-types/icon.types';\nimport { isItem } from '../action-bar/isItem';\nimport { getIconName } from '../icon/get-icon-props';\nimport { ListSeparator } from '../../global/shared-types/separator.types';\nimport { ActionBarItem } from '../action-bar/action-bar.types';\nimport { getMouseEventHandlers } from '../../util/3d-tilt-hover-effect';\n\n/**\n * Card is a component that displays content about a single topic,\n * in a structured way. It can contain a header, and some supporting media such\n * as an image or an icon, a body of text, or optional actions.\n *\n * @exampleComponent limel-example-card-basic\n * @exampleComponent limel-example-card-image\n * @exampleComponent limel-example-card-actions\n * @exampleComponent limel-example-card-clickable\n * @exampleComponent limel-example-card-orientation\n * @exampleComponent limel-example-card-slot\n * @exampleComponent limel-example-card-styling\n * @beta\n */\n@Component({\n    tag: 'limel-card',\n    shadow: true,\n    styleUrl: 'card.scss',\n})\nexport class Card {\n    /**\n     * Heading of the card,\n     * to provide a short title about the context.\n     */\n    @Prop({ reflect: true })\n    public heading?: string;\n\n    /**\n     * Subheading of the card\n     * to provide a short description of the context.\n     */\n    @Prop({ reflect: true })\n    public subheading?: string;\n\n    /**\n     * A hero image to display in the card,\n     * to enrich the content with visual information.\n     */\n    @Prop()\n    public image?: Image;\n\n    /**\n     * An icon, to display along with the heading and subheading.\n     */\n    @Prop({ reflect: true })\n    public icon?: string | Icon;\n\n    /**\n     * The content of the card.\n     * Supports markdown, to provide a rich text experience.\n     */\n    @Prop()\n    public value?: string;\n\n    /**\n     * Actions to display in the card,\n     * to provide the user with options to interact with the content.\n     */\n    @Prop()\n    public actions?: Array<ActionBarItem | ListSeparator> = [];\n\n    /**\n     * When true, improve the accessibility of the component and hints the user\n     * that the card can be interacted width.\n     */\n    @Prop({ reflect: true })\n    public clickable: boolean = false;\n\n    /**\n     * The orientation of the card,\n     * specially useful when the card has an image.\n     */\n    @Prop({ reflect: true })\n    public orientation: 'landscape' | 'portrait' = 'portrait';\n\n    /**\n     * Fired when a action bar item has been clicked.\n     */\n    @Event()\n    public actionSelected: EventEmitter<ActionBarItem>;\n\n    @Element()\n    private host: HTMLElement;\n\n    private handleMouseEnter: () => void;\n    private handleMouseLeave: () => void;\n\n    public componentWillLoad() {\n        const { handleMouseEnter, handleMouseLeave } = getMouseEventHandlers(\n            this.host,\n        );\n        this.handleMouseEnter = handleMouseEnter;\n        this.handleMouseLeave = handleMouseLeave;\n    }\n\n    public render() {\n        return (\n            <Host\n                onMouseEnter={this.handleMouseEnter}\n                onMouseLeave={this.handleMouseLeave}\n            >\n                <section tabindex={this.clickable ? 0 : ''}>\n                    {this.renderImage()}\n                    <div class=\"body\">\n                        {this.renderHeader()}\n                        {this.renderSlot()}\n                        {this.renderValue()}\n                        {this.renderActionBar()}\n                    </div>\n                    <div class=\"limel-3d-hover-effect-glow\" />\n                </section>\n            </Host>\n        );\n    }\n\n    private renderImage() {\n        if (!this.image) {\n            return;\n        }\n\n        return <img src={this.image.src} alt={this.image.alt} loading=\"lazy\" />;\n    }\n\n    private renderHeader() {\n        if (!this.heading && !this.subheading && !this.icon) {\n            return;\n        }\n\n        return (\n            <header>\n                {this.renderIcon()}\n                <div class=\"headings\">\n                    {this.renderHeading()}\n                    {this.renderSubheading()}\n                </div>\n            </header>\n        );\n    }\n\n    private renderIcon() {\n        const icon = getIconName(this.icon);\n        const color =\n            typeof this.icon !== 'string' ? this.icon?.color : undefined;\n\n        if (!icon) {\n            return;\n        }\n\n        return (\n            <limel-icon\n                style={{\n                    color: `${color}`,\n                }}\n                badge={true}\n                name={icon}\n            />\n        );\n    }\n\n    private renderHeading() {\n        if (!this.heading) {\n            return;\n        }\n\n        return <h1>{this.heading}</h1>;\n    }\n\n    private renderSubheading() {\n        if (!this.subheading) {\n            return;\n        }\n\n        return <h2>{this.subheading}</h2>;\n    }\n\n    private renderSlot() {\n        return <slot name=\"component\" />;\n    }\n\n    private renderValue() {\n        return <limel-markdown value={this.value} />;\n    }\n\n    private handleActionSelect = (\n        event: CustomEvent<ActionBarItem | ListSeparator>,\n    ) => {\n        event.stopPropagation();\n        if (isItem(event.detail)) {\n            this.actionSelected.emit(event.detail);\n        }\n    };\n\n    private renderActionBar() {\n        if (!this.actions.length) {\n            return;\n        }\n\n        return (\n            <limel-action-bar\n                actions={this.actions}\n                onItemSelected={this.handleActionSelect}\n            />\n        );\n    }\n}\n"]}
+{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../src/components/card/card.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    h,\n    Prop,\n    Event,\n    EventEmitter,\n    Element,\n    Host,\n} from '@stencil/core';\nimport { Image } from '../../global/shared-types/image.types';\nimport { Icon } from '../../global/shared-types/icon.types';\nimport { isItem } from '../action-bar/isItem';\nimport { getIconName } from '../icon/get-icon-props';\nimport { ListSeparator } from '../../global/shared-types/separator.types';\nimport { ActionBarItem } from '../action-bar/action-bar.types';\nimport { getMouseEventHandlers } from '../../util/3d-tilt-hover-effect';\n\n/**\n * Card is a component that displays content about a single topic,\n * in a structured way. It can contain a header, and some supporting media such\n * as an image or an icon, a body of text, or optional actions.\n *\n * @exampleComponent limel-example-card-basic\n * @exampleComponent limel-example-card-image\n * @exampleComponent limel-example-card-actions\n * @exampleComponent limel-example-card-clickable\n * @exampleComponent limel-example-card-orientation\n * @exampleComponent limel-example-card-slot\n * @exampleComponent limel-example-card-styling\n * @beta\n */\n@Component({\n    tag: 'limel-card',\n    shadow: true,\n    styleUrl: 'card.scss',\n})\nexport class Card {\n    /**\n     * Heading of the card,\n     * to provide a short title about the context.\n     */\n    @Prop({ reflect: true })\n    public heading?: string;\n\n    /**\n     * Subheading of the card\n     * to provide a short description of the context.\n     */\n    @Prop({ reflect: true })\n    public subheading?: string;\n\n    /**\n     * A hero image to display in the card,\n     * to enrich the content with visual information.\n     */\n    @Prop()\n    public image?: Image;\n\n    /**\n     * An icon, to display along with the heading and subheading.\n     */\n    @Prop({ reflect: true })\n    public icon?: string | Icon;\n\n    /**\n     * The content of the card.\n     * Supports markdown, to provide a rich text experience.\n     */\n    @Prop()\n    public value?: string;\n\n    /**\n     * Actions to display in the card,\n     * to provide the user with options to interact with the content.\n     */\n    @Prop()\n    public actions?: Array<ActionBarItem | ListSeparator> = [];\n\n    /**\n     * When true, improve the accessibility of the component and hints the user\n     * that the card can be interacted width.\n     */\n    @Prop({ reflect: true })\n    public clickable: boolean = false;\n\n    /**\n     * The orientation of the card,\n     * specially useful when the card has an image.\n     */\n    @Prop({ reflect: true })\n    public orientation: 'landscape' | 'portrait' = 'portrait';\n\n    /**\n     * Fired when a action bar item has been clicked.\n     */\n    @Event()\n    public actionSelected: EventEmitter<ActionBarItem>;\n\n    @Element()\n    private host: HTMLElement;\n\n    private handleMouseEnter: () => void;\n    private handleMouseLeave: () => void;\n\n    public componentWillLoad() {\n        const { handleMouseEnter, handleMouseLeave } = getMouseEventHandlers(\n            this.host,\n        );\n        this.handleMouseEnter = handleMouseEnter;\n        this.handleMouseLeave = handleMouseLeave;\n    }\n\n    public render() {\n        return (\n            <Host\n                onMouseEnter={this.handleMouseEnter}\n                onMouseLeave={this.handleMouseLeave}\n            >\n                <section tabindex={this.clickable ? 0 : ''}>\n                    {this.renderImage()}\n                    <div class=\"body\">\n                        {this.renderHeader()}\n                        {this.renderSlot()}\n                        {this.renderValue()}\n                        {this.renderActionBar()}\n                    </div>\n                    <limel-3d-hover-effect-glow />\n                </section>\n            </Host>\n        );\n    }\n\n    private renderImage() {\n        if (!this.image) {\n            return;\n        }\n\n        return <img src={this.image.src} alt={this.image.alt} loading=\"lazy\" />;\n    }\n\n    private renderHeader() {\n        if (!this.heading && !this.subheading && !this.icon) {\n            return;\n        }\n\n        return (\n            <header>\n                {this.renderIcon()}\n                <div class=\"headings\">\n                    {this.renderHeading()}\n                    {this.renderSubheading()}\n                </div>\n            </header>\n        );\n    }\n\n    private renderIcon() {\n        const icon = getIconName(this.icon);\n        const color =\n            typeof this.icon !== 'string' ? this.icon?.color : undefined;\n\n        if (!icon) {\n            return;\n        }\n\n        return (\n            <limel-icon\n                style={{\n                    color: `${color}`,\n                }}\n                badge={true}\n                name={icon}\n            />\n        );\n    }\n\n    private renderHeading() {\n        if (!this.heading) {\n            return;\n        }\n\n        return <h1>{this.heading}</h1>;\n    }\n\n    private renderSubheading() {\n        if (!this.subheading) {\n            return;\n        }\n\n        return <h2>{this.subheading}</h2>;\n    }\n\n    private renderSlot() {\n        return <slot name=\"component\" />;\n    }\n\n    private renderValue() {\n        return <limel-markdown value={this.value} />;\n    }\n\n    private handleActionSelect = (\n        event: CustomEvent<ActionBarItem | ListSeparator>,\n    ) => {\n        event.stopPropagation();\n        if (isItem(event.detail)) {\n            this.actionSelected.emit(event.detail);\n        }\n    };\n\n    private renderActionBar() {\n        if (!this.actions.length) {\n            return;\n        }\n\n        return (\n            <limel-action-bar\n                actions={this.actions}\n                onItemSelected={this.handleActionSelect}\n            />\n        );\n    }\n}\n"]}

package/dist/collection/components/info-tile/info-tile.css

@@ -338,23 +338,8 @@ limel-linear-progress {
     --icon-max-size: 3rem;
   }
 }
-.limel-3d-hover-effect-glow {
-  transition: background 0.4s ease, opacity 0.4s ease;
-  pointer-events: none;
-  position: absolute;
-  inset: 0;
+limel-3d-hover-effect-glow {
   border-radius: var(--info-tile-border-radius, 1rem);
-  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;
-}
-a:hover .limel-3d-hover-effect-glow {
-  opacity: 0.5;
-}
-@media (prefers-reduced-motion) {
-  a:hover .limel-3d-hover-effect-glow {
-    opacity: 0.2;
-  }
 }
 
 :host(limel-info-tile) {
@@ -394,6 +379,14 @@ a:focus-visible {
   outline: none;
   transform: scale3d(1.01, 1.01, 1.01);
 }
+a:hover limel-3d-hover-effect-glow {
+  --limel-3d-hover-effect-glow-opacity: 0.5;
+}
+@media (prefers-reduced-motion) {
+  a:hover limel-3d-hover-effect-glow {
+    --limel-3d-hover-effect-glow-opacity: 0.2;
+  }
+}
 a.is-clickable {
   cursor: pointer;
   box-shadow: var(--button-shadow-normal);

package/dist/collection/components/info-tile/info-tile.js

@@ -99,7 +99,7 @@ export class InfoTile {
         '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" })));
+      } }, 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("limel-3d-hover-effect-glow", null)));
   }
   checkProps(propValue) {
     return !propValue ? '' : propValue + ' ';

package/dist/collection/components/info-tile/info-tile.js.map

@@ -1 +1 @@
-{"version":3,"file":"info-tile.js","sourceRoot":"","sources":["../../../src/components/info-tile/info-tile.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Element, Host } from '@stencil/core';\nimport { InfoTileProgress } from '../info-tile/info-tile.types';\nimport { Link } from '../../global/shared-types/link.types';\nimport { getMouseEventHandlers } from '../../util/3d-tilt-hover-effect';\n\n/**\n * This component can be used on places such as a start page or a dashboard.\n * It offers features for visualizing aggregated data along with supplementary\n * information.\n *\n * If clicking on the component should navigate the user to\n * a new screen or web page, you need to provide a URL,\n * using the `link` property.\n *\n * @exampleComponent limel-example-info-tile\n * @exampleComponent limel-example-info-tile-badge\n * @exampleComponent limel-example-info-tile-progress\n * @exampleComponent limel-example-info-tile-loading\n * @exampleComponent limel-example-info-tile-styling\n */\n@Component({\n    tag: 'limel-info-tile',\n    shadow: true,\n    styleUrl: 'info-tile.scss',\n})\nexport class InfoTile {\n    /**\n     * A piece of text or number that is the main piece of information\n     * which the component is intended to visualize.\n     */\n    @Prop({ reflect: true })\n    public value: number | string;\n\n    /**\n     * Name of icon for the info tile.\n     */\n    @Prop()\n    public icon?: string;\n\n    /**\n     * The text to show below the info tile. Long labels will be truncated.\n     */\n    @Prop({ reflect: true })\n    public label?: string = null;\n\n    /**\n     * A string of text that is visually placed before the value.\n     */\n    @Prop({ reflect: true })\n    public prefix?: string;\n\n    /**\n     * A string of text that is visually placed after the value.\n     */\n    @Prop({ reflect: true })\n    public suffix?: string;\n\n    /**\n     * Set to `true` if info tile is disabled.\n     */\n    @Prop({ reflect: true })\n    public disabled? = false;\n\n    /**\n     * If supplied, the info tile will display a notification badge.\n     */\n    @Prop({ reflect: true })\n    public badge?: number | string;\n\n    /**\n     * Set to `true` to put the component in the `loading` state.\n     * This does _not_ disable the link. To do so, the\n     * `disabled` property should be set to `true` as well.\n     */\n    @Prop({ reflect: true })\n    public loading? = false;\n\n    /**\n     * If supplied, the info tile will be a clickable link.\n     *\n     * Supplying a value also adds an elevated effect using a shadow,\n     * as well as `cursor: pointer`, which appears on hover.\n     * While we strongly recommend supplying a link whenever the\n     * component should act as a link, if this is not possible, and\n     * you need to provide interaction through a click handler,\n     * you can still get the correct styling by supplying a `Link`\n     * object with the `href` property set to `'#'`.\n     */\n    @Prop()\n    public link?: Link;\n\n    /**\n     * Properties of the optional circular progress bar.\n     *\n     * Defaults:\n     * - `maxValue`: 100\n     * - `suffix`: %\n     * - `displayPercentageColors`: false\n     *\n     * Colors change with intervals of 10 %.\n     */\n    @Prop()\n    public progress?: InfoTileProgress;\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        const extendedAriaLabel =\n            this.checkProps(this?.prefix) +\n            this.value +\n            ' ' +\n            this.checkProps(this?.suffix) +\n            this.checkProps(this?.label) +\n            '. ' +\n            this.checkProps(this?.progress?.prefix) +\n            this.checkProps(this?.progress?.value) +\n            this.checkProps(this?.progress?.suffix) +\n            this.checkProps(this?.link?.title);\n\n        const link = !this.disabled ? this.link?.href : '#';\n\n        return (\n            <Host\n                onMouseEnter={this.handleMouseEnter}\n                onMouseLeave={this.handleMouseLeave}\n            >\n                <a\n                    title={this.link?.title}\n                    href={link}\n                    target={this.link?.target}\n                    tabindex=\"0\"\n                    aria-label={extendedAriaLabel}\n                    aria-disabled={this.disabled}\n                    aria-busy={this.loading ? 'true' : 'false'}\n                    aria-live=\"polite\"\n                    class={{\n                        'is-clickable': !!this.link?.href && !this.disabled,\n                        'has-circular-progress':\n                            !!this.progress?.value ||\n                            this.progress?.value === 0,\n                    }}\n                >\n                    {this.renderIcon()}\n                    {this.renderProgress()}\n                    <div class=\"value-group\">\n                        {this.renderPrefix()}\n                        <div class=\"value-and-suffix\">\n                            {this.renderValue()}\n                            {this.renderSuffix()}\n                        </div>\n                        {this.renderSpinner()}\n                    </div>\n                    {this.renderLabel()}\n                </a>\n                {this.renderNotification()}\n                <div class=\"limel-3d-hover-effect-glow\" />\n            </Host>\n        );\n    }\n\n    private checkProps(propValue) {\n        return !propValue ? '' : propValue + ' ';\n    }\n\n    private renderPrefix = () => {\n        if (this.prefix) {\n            return <span class=\"prefix\">{this.prefix}</span>;\n        }\n    };\n\n    private renderValue = () => {\n        const characterCount = (this.value ?? '').toString().length;\n\n        if (!this.value && this.loading) {\n            return <span class=\"value\">···</span>;\n        }\n\n        if (this.value) {\n            return (\n                <span\n                    class={{\n                        value: true,\n                        [`ch-${characterCount}`]: true,\n                    }}\n                >\n                    {this.value}\n                </span>\n            );\n        }\n    };\n\n    private renderSuffix = () => {\n        if (this.suffix) {\n            return <span class=\"suffix\">{this.suffix}</span>;\n        }\n    };\n\n    private renderIcon = () => {\n        if (this.icon) {\n            return <limel-icon class=\"icon\" name={this.icon} />;\n        }\n    };\n\n    private renderProgress = () => {\n        if (this.progress?.value || this.progress?.value === 0) {\n            return (\n                <limel-circular-progress\n                    class=\"progress\"\n                    prefix={this.progress.prefix}\n                    value={this.progress.value}\n                    suffix={this.progress.suffix}\n                    maxValue={this.progress.maxValue}\n                    displayPercentageColors={\n                        this.progress.displayPercentageColors\n                    }\n                />\n            );\n        }\n    };\n\n    private renderLabel = () => {\n        if (this.label) {\n            return <span class=\"label\">{this.label}</span>;\n        }\n    };\n\n    private renderNotification = () => {\n        if (this.badge) {\n            return <limel-badge label={this.badge} />;\n        }\n    };\n\n    private renderSpinner = () => {\n        if (this.loading) {\n            return <limel-linear-progress indeterminate={true} />;\n        }\n    };\n}\n"]}
+{"version":3,"file":"info-tile.js","sourceRoot":"","sources":["../../../src/components/info-tile/info-tile.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Element, Host } from '@stencil/core';\nimport { InfoTileProgress } from '../info-tile/info-tile.types';\nimport { Link } from '../../global/shared-types/link.types';\nimport { getMouseEventHandlers } from '../../util/3d-tilt-hover-effect';\n\n/**\n * This component can be used on places such as a start page or a dashboard.\n * It offers features for visualizing aggregated data along with supplementary\n * information.\n *\n * If clicking on the component should navigate the user to\n * a new screen or web page, you need to provide a URL,\n * using the `link` property.\n *\n * @exampleComponent limel-example-info-tile\n * @exampleComponent limel-example-info-tile-badge\n * @exampleComponent limel-example-info-tile-progress\n * @exampleComponent limel-example-info-tile-loading\n * @exampleComponent limel-example-info-tile-styling\n */\n@Component({\n    tag: 'limel-info-tile',\n    shadow: true,\n    styleUrl: 'info-tile.scss',\n})\nexport class InfoTile {\n    /**\n     * A piece of text or number that is the main piece of information\n     * which the component is intended to visualize.\n     */\n    @Prop({ reflect: true })\n    public value: number | string;\n\n    /**\n     * Name of icon for the info tile.\n     */\n    @Prop()\n    public icon?: string;\n\n    /**\n     * The text to show below the info tile. Long labels will be truncated.\n     */\n    @Prop({ reflect: true })\n    public label?: string = null;\n\n    /**\n     * A string of text that is visually placed before the value.\n     */\n    @Prop({ reflect: true })\n    public prefix?: string;\n\n    /**\n     * A string of text that is visually placed after the value.\n     */\n    @Prop({ reflect: true })\n    public suffix?: string;\n\n    /**\n     * Set to `true` if info tile is disabled.\n     */\n    @Prop({ reflect: true })\n    public disabled? = false;\n\n    /**\n     * If supplied, the info tile will display a notification badge.\n     */\n    @Prop({ reflect: true })\n    public badge?: number | string;\n\n    /**\n     * Set to `true` to put the component in the `loading` state.\n     * This does _not_ disable the link. To do so, the\n     * `disabled` property should be set to `true` as well.\n     */\n    @Prop({ reflect: true })\n    public loading? = false;\n\n    /**\n     * If supplied, the info tile will be a clickable link.\n     *\n     * Supplying a value also adds an elevated effect using a shadow,\n     * as well as `cursor: pointer`, which appears on hover.\n     * While we strongly recommend supplying a link whenever the\n     * component should act as a link, if this is not possible, and\n     * you need to provide interaction through a click handler,\n     * you can still get the correct styling by supplying a `Link`\n     * object with the `href` property set to `'#'`.\n     */\n    @Prop()\n    public link?: Link;\n\n    /**\n     * Properties of the optional circular progress bar.\n     *\n     * Defaults:\n     * - `maxValue`: 100\n     * - `suffix`: %\n     * - `displayPercentageColors`: false\n     *\n     * Colors change with intervals of 10 %.\n     */\n    @Prop()\n    public progress?: InfoTileProgress;\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        const extendedAriaLabel =\n            this.checkProps(this?.prefix) +\n            this.value +\n            ' ' +\n            this.checkProps(this?.suffix) +\n            this.checkProps(this?.label) +\n            '. ' +\n            this.checkProps(this?.progress?.prefix) +\n            this.checkProps(this?.progress?.value) +\n            this.checkProps(this?.progress?.suffix) +\n            this.checkProps(this?.link?.title);\n\n        const link = !this.disabled ? this.link?.href : '#';\n\n        return (\n            <Host\n                onMouseEnter={this.handleMouseEnter}\n                onMouseLeave={this.handleMouseLeave}\n            >\n                <a\n                    title={this.link?.title}\n                    href={link}\n                    target={this.link?.target}\n                    tabindex=\"0\"\n                    aria-label={extendedAriaLabel}\n                    aria-disabled={this.disabled}\n                    aria-busy={this.loading ? 'true' : 'false'}\n                    aria-live=\"polite\"\n                    class={{\n                        'is-clickable': !!this.link?.href && !this.disabled,\n                        'has-circular-progress':\n                            !!this.progress?.value ||\n                            this.progress?.value === 0,\n                    }}\n                >\n                    {this.renderIcon()}\n                    {this.renderProgress()}\n                    <div class=\"value-group\">\n                        {this.renderPrefix()}\n                        <div class=\"value-and-suffix\">\n                            {this.renderValue()}\n                            {this.renderSuffix()}\n                        </div>\n                        {this.renderSpinner()}\n                    </div>\n                    {this.renderLabel()}\n                </a>\n                {this.renderNotification()}\n                <limel-3d-hover-effect-glow />\n            </Host>\n        );\n    }\n\n    private checkProps(propValue) {\n        return !propValue ? '' : propValue + ' ';\n    }\n\n    private renderPrefix = () => {\n        if (this.prefix) {\n            return <span class=\"prefix\">{this.prefix}</span>;\n        }\n    };\n\n    private renderValue = () => {\n        const characterCount = (this.value ?? '').toString().length;\n\n        if (!this.value && this.loading) {\n            return <span class=\"value\">···</span>;\n        }\n\n        if (this.value) {\n            return (\n                <span\n                    class={{\n                        value: true,\n                        [`ch-${characterCount}`]: true,\n                    }}\n                >\n                    {this.value}\n                </span>\n            );\n        }\n    };\n\n    private renderSuffix = () => {\n        if (this.suffix) {\n            return <span class=\"suffix\">{this.suffix}</span>;\n        }\n    };\n\n    private renderIcon = () => {\n        if (this.icon) {\n            return <limel-icon class=\"icon\" name={this.icon} />;\n        }\n    };\n\n    private renderProgress = () => {\n        if (this.progress?.value || this.progress?.value === 0) {\n            return (\n                <limel-circular-progress\n                    class=\"progress\"\n                    prefix={this.progress.prefix}\n                    value={this.progress.value}\n                    suffix={this.progress.suffix}\n                    maxValue={this.progress.maxValue}\n                    displayPercentageColors={\n                        this.progress.displayPercentageColors\n                    }\n                />\n            );\n        }\n    };\n\n    private renderLabel = () => {\n        if (this.label) {\n            return <span class=\"label\">{this.label}</span>;\n        }\n    };\n\n    private renderNotification = () => {\n        if (this.badge) {\n            return <limel-badge label={this.badge} />;\n        }\n    };\n\n    private renderSpinner = () => {\n        if (this.loading) {\n            return <limel-linear-progress indeterminate={true} />;\n        }\n    };\n}\n"]}

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

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

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

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