@bundle-stats/ui 4.23.0-beta.10 → 4.23.0-beta.11

package/lib/ui/textarea/textarea.module.css

@@ -4,7 +4,9 @@
   color: var(--color-text-light);
   width: 100%;
   resize: vertical;
-  transition: var(--transition-out);
+  transition-property: color, border-color;
+  transition-duration: var(--transition-duration-out);
+  transition-timing-function: var(--transition-timing-function);
   appearance: none;
   outline: none;
 }
@@ -28,7 +30,7 @@
 .root:focus {
   border-color: var(--color-outline-dark);
   color: inherit;
-  transition: var(--transition-in);
+  transition-duration: var(--transition-duration-in);
 }
 
 .root[readonly=''] {

package/lib/ui/tooltip/tooltip.module.css

@@ -22,12 +22,14 @@
   filter: drop-shadow(var(--shadow-layer));
   will-change: filter;
   opacity: 0;
-  transition: var(--transition-out);
+  transition-property: opacity;
+  transition-duration: var(--transition-duration-out);
+  transition-timing-function: var(--transition-timing-function);
 }
 
 .tooltip[data-enter] {
   opacity: 1;
-  transition: var(--transition-in);
+  transition-duration: var(--transition-duration-in);
 }
 
 .tooltip[data-leave] {

package/lib/utils/portal.js

@@ -1,10 +1,26 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getCreatePortalElement = void 0;
+exports.usePortalRoot = exports.getCreatePortalElement = void 0;
+const react_1 = require("react");
 const getCreatePortalElement = (className) => (element) => {
     const portalElement = element.ownerDocument.createElement('div');
     portalElement.className = className;
     return portalElement;
 };
 exports.getCreatePortalElement = getCreatePortalElement;
+const usePortalRoot = (className) => {
+    const [portalRoot, setPortalRoot] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        const element = document.createElement('div');
+        element.className = className;
+        document.body.appendChild(element);
+        setPortalRoot(element);
+        return () => {
+            element.remove();
+            setPortalRoot(null);
+        };
+    }, [className]);
+    return portalRoot;
+};
+exports.usePortalRoot = usePortalRoot;
 //# sourceMappingURL=portal.js.map

package/lib/utils/portal.js.map

@@ -1 +1 @@
-{"version":3,"file":"portal.js","sourceRoot":"","sources":["../../src/utils/portal.ts"],"names":[],"mappings":";;;AAIO,MAAM,sBAAsB,GAAG,CAAC,SAAiB,EAAE,EAAE,CAAC,CAAC,OAAoB,EAAE,EAAE;IACpF,MAAM,aAAa,GAAG,OAAO,CAAC,aAAa,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACjE,aAAa,CAAC,SAAS,GAAG,SAAS,CAAC;IACpC,OAAO,aAAa,CAAC;AACvB,CAAC,CAAC;AAJW,QAAA,sBAAsB,0BAIjC"}
+{"version":3,"file":"portal.js","sourceRoot":"","sources":["../../src/utils/portal.ts"],"names":[],"mappings":";;;AAAA,iCAA4C;AAMrC,MAAM,sBAAsB,GAAG,CAAC,SAAiB,EAAE,EAAE,CAAC,CAAC,OAAoB,EAAE,EAAE;IACpF,MAAM,aAAa,GAAG,OAAO,CAAC,aAAa,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACjE,aAAa,CAAC,SAAS,GAAG,SAAS,CAAC;IACpC,OAAO,aAAa,CAAC;AACvB,CAAC,CAAC;AAJW,QAAA,sBAAsB,0BAIjC;AAOK,MAAM,aAAa,GAAG,CAAC,SAAiB,EAAsB,EAAE;IACrE,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAqB,IAAI,CAAC,CAAC;IAEvE,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC9C,OAAO,CAAC,SAAS,GAAG,SAAS,CAAC;QAC9B,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QACnC,aAAa,CAAC,OAAO,CAAC,CAAC;QAEvB,OAAO,GAAG,EAAE;YACV,OAAO,CAAC,MAAM,EAAE,CAAC;YACjB,aAAa,CAAC,IAAI,CAAC,CAAC;QACtB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,OAAO,UAAU,CAAC;AACpB,CAAC,CAAC;AAhBW,QAAA,aAAa,iBAgBxB"}

package/lib-esm/app/app.js

@@ -2,6 +2,7 @@ import React, { useContext, useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import isEmpty from 'lodash/isEmpty';
 import { HashRouter, NavLink, Route, Switch, useLocation } from 'react-router-dom';
+import { PortalContext } from 'ariakit/portal';
 import { COMPONENT } from '@bundle-stats/utils';
 import { URLS } from '../constants';
 import { BundleAssets } from '../components/bundle-assets';
@@ -18,6 +19,7 @@ import { Stack } from '../layout/stack';
 import { Container } from '../ui/container';
 import { Tabs } from '../ui/tabs';
 import { QueryStateProvider, useComponentQueryState } from '../query-state';
+import { usePortalRoot } from '../utils/portal';
 import I18N from '../i18n';
 import { Header } from './header';
 import css from './app.module.css';
@@ -94,6 +96,13 @@ const PackagesRoute = () => {
     return (React.createElement(Container, null,
         React.createElement(BundlePackages, { jobs: jobs, setState: setQueryState, ...queryState })));
 };
+const RaisedOverlaysProvider = ({ children }) => {
+    const portalRoot = usePortalRoot(css.raisedOverlaysPortal);
+    return React.createElement(PortalContext.Provider, { value: portalRoot }, children);
+};
+RaisedOverlaysProvider.propTypes = {
+    children: PropTypes.node.isRequired,
+};
 const AppComponent = ({ version, jobs }) => {
     if ((jobs === null || jobs === void 0 ? void 0 : jobs.length) === 0) {
         return (React.createElement(Layout, { version: version },
@@ -102,11 +111,12 @@ const AppComponent = ({ version, jobs }) => {
     }
     return (React.createElement(JobsProvider, { jobs: jobs },
         React.createElement(Layout, { jobs: jobs, version: version },
-            React.createElement(Container, { className: css.metricChangeLegendContainer },
-                React.createElement(FlexStack, { justifyContent: "flex-end" },
-                    React.createElement(MetricChangeLegend, null))),
-            React.createElement(Container, { className: css.summaryContainer },
-                React.createElement(Summary, { data: jobs[0].summary, showSummaryItemDelta: jobs.length !== 1, showSummaryItemBaseline: (jobs === null || jobs === void 0 ? void 0 : jobs.length) !== 1 })),
+            React.createElement(RaisedOverlaysProvider, null,
+                React.createElement(Container, { className: css.metricChangeLegendContainer },
+                    React.createElement(FlexStack, { justifyContent: "flex-end" },
+                        React.createElement(MetricChangeLegend, null))),
+                React.createElement(Container, { className: css.summaryContainer },
+                    React.createElement(Summary, { data: jobs[0].summary, showSummaryItemDelta: jobs.length !== 1, showSummaryItemBaseline: (jobs === null || jobs === void 0 ? void 0 : jobs.length) !== 1 }))),
             React.createElement(Container, { className: css.tabsContainer },
                 React.createElement(Tabs, { className: css.tabs },
                     React.createElement(Tabs.Item, { as: NavLink, exact: true, to: URLS.OVERVIEW, activeClassName: css.tabActive }, I18N.OVERVIEW),

package/lib-esm/app/app.js.map

@@ -1 +1 @@
-{"version":3,"file":"app.js","sourceRoot":"","sources":["../../src/app/app.jsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"app.js","sourceRoot":"","sources":["../../src/app/app.jsx"],"names":[],"mappings":"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"}

package/lib-esm/app/app.module.css

@@ -27,6 +27,11 @@
   padding-bottom: var(--space-xxsmall);
 }
 
+/** legend and summary overlays: above the sticky tabs, below the header */
+.raisedOverlaysPortal {
+  --layer-overlay: calc(var(--layer-xhigh) + 2);
+}
+
 .tabsContainer {
   border-bottom: 1px solid var(--color-outline);
   background: var(--color-light);
@@ -38,12 +43,12 @@
 
 .tabActive {
   color: var(--color-accent);
-  transition: var(--transition-in);
+  transition-duration: var(--transition-duration-in);
 }
 
 .tabActive::after {
   opacity: 1;
-  transition: var(--transition-in);
+  transition-duration: var(--transition-duration-in);
 }
 
 .tabsContent {
@@ -70,7 +75,7 @@
   .tabsContainer {
     position: sticky;
     top: var(--header-height);
-    /** above the overlays (tooltips, hovercards, dropdowns) */
+    /** above the overlays (tooltips, hovercards, dropdowns), except the legend and summary overlays */
     z-index: var(--layer-xhigh);
   }
 }

package/lib-esm/components/entry-info/entry-info.module.css

@@ -29,6 +29,7 @@
 .contentWrapper {
   flex: 1 1 auto;
   overflow: auto;
+  overscroll-behavior: contain;
 }
 
 /** header */

package/lib-esm/components/metrics-display-selector/metrics-display-selector.module.css

@@ -27,10 +27,12 @@
 
 .dropdownItemIcon {
   opacity: 0;
-  transition: var(--transition-out);
+  transition-property: opacity;
+  transition-duration: var(--transition-duration-out);
+  transition-timing-function: var(--transition-timing-function);
 }
 
 .dropdownItemActive .dropdownItemIcon {
   opacity: 1;
-  transition: var(--transition-in);
+  transition-duration: var(--transition-duration-in);
 }

package/lib-esm/components/metrics-treemap/tile/tile.module.css

@@ -12,8 +12,9 @@
   font-size: var(--size-small);
   line-height: var(--line-height-heading);
   text-align: left;
-  transition: var(--transition-out);
   transition-property: opacity, background-color;
+  transition-duration: var(--transition-duration-out);
+  transition-timing-function: var(--transition-timing-function);
 }
 
 .root::before {
@@ -92,14 +93,14 @@
 
 .root::before {
   color: var(--color-highlight);
-  transition: var(--transition-out);
   transition-property: opacity;
+  transition-duration: var(--transition-duration-out);
+  transition-timing-function: var(--transition-timing-function);
   opacity: 0.6;
 }
 
 .root:hover::before {
-  transition: var(--transition-in);
-  transition-property: opacity;
+  transition-duration: var(--transition-duration-in);
   opacity: 0.8;
 }
 

package/lib-esm/components/metrics-treemap/tile-group/tile-group.module.css

@@ -5,8 +5,9 @@
 
 /** Tile group size variation */
 .root {
-  transition: var(--transition-out);
-  transition-property: background-color, outline;
+  transition-property: background-color, outline-color;
+  transition-duration: var(--transition-duration-out);
+  transition-timing-function: var(--transition-timing-function);
 }
 
 /** Tile group nested variation */
@@ -19,8 +20,7 @@
 .root.nested:has(> [data-treemap-tile]:hover) {
   background-color: rgba(27, 26, 33, 0.06);
   outline: 1px solid rgba(255, 255, 255, 1);
-  transition: var(--transition-in);
-  transition-property: background-color, outline;
+  transition-duration: var(--transition-duration-in);
 }
 
 .nested.tileGroup--NEGATIVE {
@@ -51,7 +51,9 @@
 .nested.tileGroup--POSITIVE > .tileGroup--NO_CHANGE:has(> [data-treemap-tile-group-title]:hover),
 .nested.tileGroup--POSITIVE > .tileGroup--NO_CHANGE:has(> [data-treemap-tile]:hover),
 .nested.tileGroup--NEGATIVE > .tileGroup--NO_CHANGE:has(> [data-treemap-tile-group-title]:hover),
-.nested.tileGroup--NEGATIVE > .tileGroup--NEGATIVE > .tileGroup--NO_CHANGE:has(> [data-treemap-tile]:hover) {
+.nested.tileGroup--NEGATIVE
+  > .tileGroup--NEGATIVE
+  > .tileGroup--NO_CHANGE:has(> [data-treemap-tile]:hover) {
   background-color: var(--color-background);
   background-image: linear-gradient(rgba(27, 26, 33, 0.1), rgba(27, 26, 33, 0.1));
 }

package/lib-esm/components/metrics-treemap/tile-group-title/tile-group-title.module.css

@@ -5,7 +5,8 @@
 
 .tileGroupTitleContent {
   width: 100%;
-  padding: var(--space-xxxsmall) calc(var(--space-xxxsmall) / 2) var(--space-xxxsmall) var(--space-xxsmall);
+  padding: var(--space-xxxsmall) calc(var(--space-xxxsmall) / 2) var(--space-xxxsmall)
+    var(--space-xxsmall);
   border-radius: var(--radius-xsmall);
   display: flex;
   align-items: center;
@@ -29,13 +30,8 @@
   color: var(--color-text-light);
 }
 
-.root {
-  transition: var(--transition-out);
-}
-
 .root:hover .tileGroupTitleText {
   text-decoration: underline;
-  transition: var(--transition-in);
 }
 
 /** Fill variation */

package/lib-esm/components/run-info/run-info.module.css

@@ -43,7 +43,6 @@
   line-height: inherit;
 }
 
-
 .delta {
   font-weight: bold;
   font-size: var(--size-small);
@@ -62,10 +61,11 @@
 .titleTooltipIcon[aria-controls=''] {
   opacity: 0;
   visibility: hidden;
+  /* delay hiding until the fade-out completes */
   transition:
-    opacity var(--transition-duration-out) ease-out,
-    color var(--transition-duration-out) ease-out,
-    visibility 0s;
+    opacity var(--transition-duration-out) var(--transition-timing-function),
+    color var(--transition-duration-out) var(--transition-timing-function),
+    visibility 0s linear var(--transition-duration-out);
 }
 
 .root:hover .titleHoverCardIcon span,
@@ -73,8 +73,8 @@
   opacity: 1;
   visibility: visible;
   transition:
-    opacity var(--transition-duration-in) ease-in,
-    color var(--transition-duration-in) ease-in,
+    opacity var(--transition-duration-in) var(--transition-timing-function),
+    color var(--transition-duration-in) var(--transition-timing-function),
     visibility 0s;
 }
 

package/lib-esm/components/sort-button/sort-button.module.css

@@ -28,7 +28,7 @@
 
 .directionActive {
   color: var(--color-text);
-  transition: var(--transition-in);
+  transition-duration: var(--transition-duration-in);
 }
 
 .direction:hover,
@@ -69,6 +69,9 @@
 .direction {
   pointer-events: none;
   opacity: 0;
+  transition-property: color, opacity;
+  transition-duration: var(--transition-duration-out);
+  transition-timing-function: var(--transition-timing-function);
 }
 
 .active .direction,
@@ -77,5 +80,5 @@
 .interactive:hover:focus .direction {
   pointer-events: auto;
   opacity: 1;
-  transition: var(--transition-in);
+  transition-duration: var(--transition-duration-in);
 }

package/lib-esm/components/summary/summary.module.css

@@ -42,14 +42,16 @@
   bottom: calc(0px - var(--space-xsmall));
   left: calc(0px - var(--space-xsmall));
   opacity: 0;
-  transition: var(--transition-out);
+  transition-property: opacity;
+  transition-duration: var(--transition-duration-out);
+  transition-timing-function: var(--transition-timing-function);
 }
 
 .item:focus::before,
 .item:active::before,
 .item:hover::before {
   opacity: 1;
-  transition: var(--transition-in);
+  transition-duration: var(--transition-duration-in);
 }
 
 .item + .item::after {
@@ -63,7 +65,9 @@
   top: var(--space-xxsmall);
   bottom: var(--space-xxsmall);
   opacity: 1;
-  transition: var(--transition-out);
+  transition-property: opacity;
+  transition-duration: var(--transition-duration-out);
+  transition-timing-function: var(--transition-timing-function);
 }
 
 .item:focus::after,
@@ -73,5 +77,5 @@
 .item:active + .item::after,
 .item:hover + .item::after {
   opacity: 0;
-  transition: var(--transition-in);
+  transition-duration: var(--transition-duration-in);
 }

package/lib-esm/css/default.css

@@ -61,7 +61,9 @@ code {
 
 a {
   color: var(--color-accent);
-  transition: var(--transition-out);
+  transition-property: color;
+  transition-duration: var(--transition-duration-out);
+  transition-timing-function: var(--transition-timing-function);
 }
 
 a:focus,
@@ -69,5 +71,5 @@ a:active,
 a:hover {
   color: var(--color-accent-dark);
   outline: none;
-  transition: var(--transition-in);
+  transition-duration: var(--transition-duration-in);
 }

package/lib-esm/css/variables.css

@@ -190,12 +190,15 @@ body {
   --color-outline-danger: var(--color-red-100);
 
   --color-backdrop: rgba(0, 0, 0, 0.05);
-  --color-shadow: rgba(0, 0, 0, 0.25);
+  --color-shadow: rgba(0, 0, 0, 0.1);
 
+  /**
+   * Transitions: set `transition-property` explicitly on the base rule, use the `out` duration
+   * on the base rule and switch only `transition-duration` to `in` on the active/hover rule
+   */
   --transition-duration-in: 120ms;
   --transition-duration-out: 80ms;
-  --transition-in: all var(--transition-duration-in) ease-in;
-  --transition-out: all var(--transition-duration-out) ease-out;
+  --transition-timing-function: ease-out;
 
   --layer-xlow: 1;
   --layer-low: 10;

package/lib-esm/layout/box/box.module.css

@@ -18,14 +18,16 @@
 }
 
 .outlineHover {
-  transition: var(--transition-out);
+  transition-property: border-color;
+  transition-duration: var(--transition-duration-out);
+  transition-timing-function: var(--transition-timing-function);
 }
 
 .outlineHover:focus,
 .outlineHover:active,
 .outlineHover:hover {
   border-color: var(--color-outline-dark);
-  transition: var(--transition-in);
+  transition-duration: var(--transition-duration-in);
 }
 
 .padding-xxxsmall {

package/lib-esm/ui/button/button.module.css

@@ -19,7 +19,9 @@
   font-family: var(--font-family);
   line-height: var(--line-height);
   white-space: nowrap;
-  transition: var(--transition-out);
+  transition-property: color, background-color, border-color;
+  transition-duration: var(--transition-duration-out);
+  transition-timing-function: var(--transition-timing-function);
 }
 
 a.root {
@@ -31,7 +33,7 @@ a.root {
 .root:active {
   outline: none;
   color: var(--color-text-light);
-  transition: var(--transition-in);
+  transition-duration: var(--transition-duration-in);
 }
 
 .glyph {

package/lib-esm/ui/copy-to-clipboard/copy-to-clipboard.module.css

@@ -6,10 +6,12 @@
 
 /** done state */
 .root svg {
-  transition: var(--transition-out);
+  transition-property: color;
+  transition-duration: var(--transition-duration-out);
+  transition-timing-function: var(--transition-timing-function);
 }
 
 .done svg {
   color: var(--color-success);
-  transition: var(--transition-in);
+  transition-duration: var(--transition-duration-in);
 }

package/lib-esm/ui/dialog/dialog.module.css

@@ -9,12 +9,14 @@
   justify-content: center;
   z-index: var(--layer-xxhigh);
   opacity: 0;
-  transition: var(--transition-out);
+  transition-property: opacity;
+  transition-duration: var(--transition-duration-out);
+  transition-timing-function: var(--transition-timing-function);
 }
 
 .backdrop[data-enter] {
   opacity: 1;
-  transition: var(--transition-in);
+  transition-duration: var(--transition-duration-in);
 }
 
 .backdrop[data-leave] {
@@ -39,17 +41,20 @@
   width: calc(100vw - 2 * var(--dialog-padding));
   position: relative;
   border-radius: var(--radius-medium);
-  padding: var(--dialog-padding);
+  border: 1px solid var(--color-outline);
+  padding: calc(var(--dialog-padding) - 1px);
   background: var(--color-background);
   box-shadow: 0 0 var(--space-medium) var(--color-shadow);
   z-index: var(--layer-xxhigh);
   opacity: 0;
-  transition: var(--transition-out);
+  transition-property: opacity;
+  transition-duration: var(--transition-duration-out);
+  transition-timing-function: var(--transition-timing-function);
 }
 
 .dialog[data-enter] {
   opacity: 1;
-  transition: var(--transition-in);
+  transition-duration: var(--transition-duration-in);
 }
 
 .digalog[data-leave] {
@@ -91,6 +96,7 @@
   );
   padding-bottom: 0.3em; /* extra space to compensate for the title line-height and allow to show focus state correctly on buttons */
   overflow: auto;
+  overscroll-behavior: contain;
 }
 
 /** Width variation */

package/lib-esm/ui/dropdown/dropdown.module.css

@@ -11,21 +11,24 @@
   left: 0;
   top: 100%;
   border-radius: var(--radius-small);
+  border: 1px solid var(--color-outline);
   box-shadow: var(--shadow-layer);
   background: var(--color-background);
   min-width: 16em;
   z-index: var(--layer-overlay);
-  padding: var(--space-xxxsmall);
+  padding: calc(var(--space-xxxsmall) - 1px);
   color: var(--color-text-light);
   font-size: var(--size-small);
   line-height: var(--line-height);
   opacity: 0;
-  transition: var(--transition-out);
+  transition-property: opacity;
+  transition-duration: var(--transition-duration-out);
+  transition-timing-function: var(--transition-timing-function);
 }
 
 .dropdown[data-enter] {
   opacity: 1;
-  transition: var(--transition-in);
+  transition-duration: var(--transition-duration-in);
 }
 
 .dropdown[data-leave] {
@@ -51,7 +54,9 @@
   text-align: left;
   text-decoration: none;
   cursor: default;
-  transition: var(--transition-out);
+  transition-property: color, background-color;
+  transition-duration: var(--transition-duration-out);
+  transition-timing-function: var(--transition-timing-function);
 }
 
 .item[data-active-item],
@@ -60,7 +65,7 @@
 .item:active {
   background: var(--color-highlight);
   color: var(--color-text);
-  transition: var(--transition-in);
+  transition-duration: var(--transition-duration-in);
 }
 
 .itemActive {

package/lib-esm/ui/filters/filters.module.css

@@ -42,14 +42,16 @@
   font-size: var(--size-small);
   line-height: var(--space-small);
   color: var(--color-text-ultra-light);
-  transition: var(--transition-out);
+  transition-property: color, border-color;
+  transition-duration: var(--transition-duration-out);
+  transition-timing-function: var(--transition-timing-function);
 }
 
 .filterSingle:focus,
 .filterSingle:active,
 .filterSingle:hover {
   border-color: var(--color-outline-dark);
-  transition: var(--transition-in);
+  transition-duration: var(--transition-duration-in);
 }
 
 /** Filter group */

package/lib-esm/ui/hover-card/hover-card.module.css

@@ -7,7 +7,9 @@
   color: inherit;
   cursor: default;
   text-decoration: none;
-  transition: var(--transition-out);
+  transition-property: color;
+  transition-duration: var(--transition-duration-out);
+  transition-timing-function: var(--transition-timing-function);
 }
 
 .anchor:focus,
@@ -15,12 +17,13 @@
 .anchor:hover {
   color: var(--color-accent-dark);
   outline: 0;
-  transition: var(--transition-in);
+  transition-duration: var(--transition-duration-in);
 }
 
 .hoverCard {
   z-index: var(--layer-overlay);
-  padding: var(--space-small);
+  padding: calc(var(--space-small) - 1px);
+  border: 1px solid var(--color-outline);
   border-radius: var(--radius-medium);
   width: calc(100vw - 2 * var(--space-small));
   max-width: 340px;
@@ -30,12 +33,14 @@
   background: var(--color-light);
   font-size: var(--size-small);
   opacity: 0;
-  transition: var(--transition-out);
+  transition-property: opacity;
+  transition-duration: var(--transition-duration-out);
+  transition-timing-function: var(--transition-timing-function);
 }
 
 .hoverCard[data-enter] {
   opacity: 1;
-  transition: var(--transition-in);
+  transition-duration: var(--transition-duration-in);
 }
 
 .hoverCard[data-leave] {