Add limel-3d-hover-effect-glow as a @private internal component & use it

etc/lime-elements.api.md

@@ -146,6 +146,8 @@ export interface ColumnSorter {
 //
 // @public (undocumented)
 export namespace Components {
+    export interface Limel3dHoverEffectGlow {
+    }
     export interface LimelActionBar {
         "accessibleLabel"?: string;
         "actions": Array<ActionBarItem | ListSeparator>;
@@ -981,6 +983,8 @@ export type InputType = 'date' | 'datetime-local' | 'email' | 'month' | 'number'
 namespace JSX_2 {
     // (undocumented)
     interface IntrinsicElements {
+        // (undocumented)
+        "limel-3d-hover-effect-glow": Limel3dHoverEffectGlow;
         // (undocumented)
         "limel-action-bar": LimelActionBar;
         // (undocumented)
@@ -1132,6 +1136,8 @@ namespace JSX_2 {
         // (undocumented)
         "limel-tooltip-content": LimelTooltipContent;
     }
+    interface Limel3dHoverEffectGlow {
+    }
     interface LimelActionBar {
         "accessibleLabel"?: string;
         "actions"?: Array<ActionBarItem | ListSeparator>;

src/components/3d-hover-effect-glow/3d-hover-effect-glow.scss

@@ -0,0 +1,28 @@
+: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; // Must be the same as the 3D Element itself
+    transition-duration: 0.8s; // Must be the same as the 3D Element itself
+
+    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)
+    );
+}

src/components/3d-hover-effect-glow/3d-hover-effect-glow.tsx

@@ -0,0 +1,26 @@
+import { Component, 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
+ */
+@Component({
+    tag: 'limel-3d-hover-effect-glow',
+    shadow: true,
+    styleUrl: '3d-hover-effect-glow.scss',
+})
+export class HoverEffectGlowComponent {
+    public render() {
+        return <div />;
+    }
+}

src/components/card/card.scss

@@ -137,10 +137,9 @@ limel-action-bar {
 }
 
 // The 3D effect
-@include mixins.limel-3d-hover-effect-glow(
-    section,
-    var(--card-border-radius, $default-border-radius)
-);
+limel-3d-hover-effect-glow {
+    border-radius: var(--card-border-radius, $default-border-radius);
+}
 
 :host(limel-card) {
     @include mixins.parent-of-the-3d-element;

src/components/card/card.tsx

@@ -124,7 +124,7 @@ export class Card {
                         {this.renderValue()}
                         {this.renderActionBar()}
                     </div>
-                    <div class="limel-3d-hover-effect-glow" />
+                    <limel-3d-hover-effect-glow />
                 </section>
             </Host>
         );

src/components/info-tile/info-tile.scss

@@ -334,10 +334,9 @@ $l: 62.5rem; //1000px
 }
 
 // The 3D effect
-@include mixins.limel-3d-hover-effect-glow(
-    a,
-    var(--info-tile-border-radius, 1rem)
-);
+limel-3d-hover-effect-glow {
+    border-radius: var(--info-tile-border-radius, 1rem);
+}
 
 :host(limel-info-tile) {
     @include mixins.parent-of-the-3d-element;

src/components/info-tile/info-tile.tsx

@@ -165,7 +165,7 @@ export class InfoTile {
                     {this.renderLabel()}
                 </a>
                 {this.renderNotification()}
-                <div class="limel-3d-hover-effect-glow" />
+                <limel-3d-hover-effect-glow />
             </Host>
         );
     }

src/components/shortcut/shortcut.scss

@@ -40,24 +40,17 @@
 
 a {
     all: unset;
-    @include mixins.is-elevated-clickable(
-        $background-color: var(
-                --shortcut-background-color,
-                var(--lime-elevated-surface-background-color)
-            ),
-        $background-color--hovered: var(
-                --shortcut-background-color,
-                var(--lime-elevated-surface-background-color)
-            )
-    );
-    @include mixins.visualize-keyboard-focus;
     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 {
@@ -82,3 +75,18 @@ limel-badge {
     top: -0.25rem;
     right: 0.125rem;
 }
+
+// The 3D effect
+limel-3d-hover-effect-glow {
+    border-radius: var(--shortcut-border-radius, 1rem);
+}
+
+:host(limel-shortcut) {
+    @include mixins.parent-of-the-3d-element;
+}
+
+a {
+    @include mixins.the-3d-element;
+
+    @include mixins.the-3d-element--clickable;
+}

src/components/shortcut/shortcut.tsx

@@ -1,5 +1,6 @@
-import { Component, Prop, h } from '@stencil/core';
+import { Component, Prop, h, Element, Host } from '@stencil/core';
 import { Link } from '../../global/shared-types/link.types';
+import { getMouseEventHandlers } from '../../util/3d-tilt-hover-effect';
 
 /**
  * This component can be used on places such as a start page or a dashboard.
@@ -53,21 +54,41 @@ export class Shortcut {
     @Prop()
     public link?: Link;
 
+    @Element()
+    private host: HTMLElement;
+
+    private handleMouseEnter: () => void;
+    private handleMouseLeave: () => void;
+
+    public componentWillLoad() {
+        const { handleMouseEnter, handleMouseLeave } = getMouseEventHandlers(
+            this.host,
+        );
+        this.handleMouseEnter = handleMouseEnter;
+        this.handleMouseLeave = handleMouseLeave;
+    }
+
     public render() {
-        return [
-            <a
-                aria-disabled={this.disabled}
-                href={this.link?.href}
-                target={this.link?.target}
-                tabindex="0"
-                aria-label={this.getAriaLabel()}
-                title={this.link?.title}
+        return (
+            <Host
+                onMouseEnter={this.handleMouseEnter}
+                onMouseLeave={this.handleMouseLeave}
             >
-                <limel-icon name={this.icon} />
-            </a>,
-            this.renderLabel(),
-            this.renderNotification(),
-        ];
+                <a
+                    aria-disabled={this.disabled}
+                    href={this.link?.href}
+                    target={this.link?.target}
+                    tabindex="0"
+                    aria-label={this.getAriaLabel()}
+                    title={this.link?.title}
+                >
+                    <limel-icon name={this.icon} />
+                    <limel-3d-hover-effect-glow />
+                </a>
+                {this.renderLabel()}
+                {this.renderNotification()}
+            </Host>
+        );
     }
 
     private renderLabel = () => {

src/style/mixins.scss

@@ -457,42 +457,6 @@ $clickable-normal-state-transitions: (
     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.
@@ -545,6 +509,15 @@ $clickable-normal-state-transitions: (
         outline: none;
         transform: scale3d(1.01, 1.01, 1.01);
     }
+
+    &:hover {
+        limel-3d-hover-effect-glow {
+            --limel-3d-hover-effect-glow-opacity: 0.5;
+            @media (prefers-reduced-motion) {
+                --limel-3d-hover-effect-glow-opacity: 0.2;
+            }
+        }
+    }
 }
 
 @mixin the-3d-element--clickable {

src/util/3d-tilt-hover-effect.ts

@@ -46,11 +46,7 @@
  *   @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);
- *   ```
+ *   Add a `<limel-3d-hover-effect-glow />` inside "the-3d-element".
  *
  * 3. **Initialize in your component**:
  *