@jobber/components 6.20.4 → 6.20.5

package/dist/Chip-cjs.js

@@ -100,7 +100,8 @@ const Chip = ({ ariaLabel, disabled, heading, invalid, label, value, testID, onC
                 React.createElement(Typography.Typography, { size: "base" },
                     label,
                     React.createElement("span", { ref: labelRef, className: styles$1.chipLabelRef })),
-                !labelFullyVisible && (React.createElement("div", { className: styles$1.truncateGradient, "data-testid": "ATL-Chip-Truncation-Gradient" }))),
+                !labelFullyVisible && (React.createElement("div", { className: styles$1.truncateGradient, "data-testid": "ATL-Chip-Truncation-Gradient" },
+                    React.createElement("span", null)))),
             suffix)));
 };
 function getTooltipMessage(labelFullyVisible, headingFullyVisible, label, heading) {

package/dist/Chip-es.js

@@ -98,7 +98,8 @@ const Chip = ({ ariaLabel, disabled, heading, invalid, label, value, testID, onC
                 React.createElement(Typography, { size: "base" },
                     label,
                     React.createElement("span", { ref: labelRef, className: styles$1.chipLabelRef })),
-                !labelFullyVisible && (React.createElement("div", { className: styles$1.truncateGradient, "data-testid": "ATL-Chip-Truncation-Gradient" }))),
+                !labelFullyVisible && (React.createElement("div", { className: styles$1.truncateGradient, "data-testid": "ATL-Chip-Truncation-Gradient" },
+                    React.createElement("span", null)))),
             suffix)));
 };
 function getTooltipMessage(labelFullyVisible, headingFullyVisible, label, heading) {

package/dist/styles.css

@@ -2914,6 +2914,7 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
 .ln-ky9jFiLI-.CMvHum0PGzY- {
   --chip-border-color: var(--color-critical);
   --chip-base-bg-color: var(--color-critical--surface);
+  --chip-base-hover-bg-color: var(--color-interactive--background--hover);
 }
 
 /* If these change, please update InternalChip.css focus-visible rules */
@@ -2923,12 +2924,12 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
 .ln-ky9jFiLI-.CMvHum0PGzY-:hover,
 .ln-ky9jFiLI-.CMvHum0PGzY-:focus-visible {
   --chip-border-color: var(--color-critical);
-  --chip-base-hover-bg-color: var(--color-interactive--background--hover);
 }
 
 .ln-ky9jFiLI- {
   --chip-border-color: var(--color-border--interactive);
   --chip-base-bg-color: var(--color-surface);
+  --chip-base-hover-bg-color: var(--color-interactive--background);
 }
 
 /* If these change, please update InternalChip.css focus-visible rules */
@@ -2936,7 +2937,6 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
 .ln-ky9jFiLI-:focus-visible,
 .ln-ky9jFiLI-:hover {
   --chip-border-color: var(--chip-base-bg-color);
-  --chip-base-hover-bg-color: var(--color-interactive--background);
 }
 
 .CMvHum0PGzY-._3uJEejbZvig-,
@@ -3001,22 +3001,57 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   width: 16px;
   width: var(--space-base);
   height: 100%;
+}
+
+.H3-SjXQhoS4- > span {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 10%;
+  background-color: var(--chip-base-bg-color);
+}
+
+.H3-SjXQhoS4-::before,
+.H3-SjXQhoS4-::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  transition: opacity 200ms;
+  transition: opacity var(--timing-base);
+}
+
+.H3-SjXQhoS4-::before {
   background: linear-gradient(
     to left,
-    var(--chip-base-bg-color) 5%,
+    var(--chip-base-bg-color) 10%,
     rgba(255, 255, 255, 0)
   );
-  transition: all 200ms;
-  transition: all var(--timing-base);
+  opacity: 1;
 }
 
-.FJNLweTKlm4-:focus-visible .H3-SjXQhoS4-,
-.FJNLweTKlm4-:hover .H3-SjXQhoS4- {
+.H3-SjXQhoS4-::after {
   background: linear-gradient(
     to left,
-    var(--chip-base-hover-bg-color) 5%,
+    var(--chip-base-hover-bg-color) 10%,
     rgba(255, 255, 255, 0)
   );
+  opacity: 0;
+}
+
+.FJNLweTKlm4-:hover .H3-SjXQhoS4-::before,
+.FJNLweTKlm4-:focus .H3-SjXQhoS4-::before,
+.FJNLweTKlm4-:focus-visible .H3-SjXQhoS4-::before {
+  opacity: 0;
+}
+
+.FJNLweTKlm4-:hover .H3-SjXQhoS4-::after,
+.FJNLweTKlm4-:focus .H3-SjXQhoS4-::after,
+.FJNLweTKlm4-:focus-visible .H3-SjXQhoS4-::after {
+  opacity: 1;
 }
 
 .rYoQfOpWeMk- {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.20.4",
+  "version": "6.20.5",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -489,5 +489,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "a9e854f0c5c4de234f7d318fe25dbacd7912312a"
+  "gitHead": "eaa4f8ec36f4d3b1af72d56413c2cdaa3060e900"
 }