@jobber/components 6.111.5 → 6.111.6

package/dist/styles.css

@@ -10326,18 +10326,18 @@ input.oOrjwubmsVA- {
 
   display: grid;
   grid-template-columns: repeat(var(--segmentedControl--option-count), 1fr);
-  -ms-flex-align: center;
-      align-items: center;
+  -ms-flex-align: stretch;
+      align-items: stretch;
   position: relative;
   min-height: 40px;
   min-height: var(--segmentedControl--size);
   box-sizing: border-box;
   border: 1px solid hsl(200, 13%, 87%);
-  border: var(--border-base) solid var(--color-border--interactive);
+  border: var(--border-base) solid var(--color-border);
   border-radius: 8px;
   border-radius: var(--radius-base);
-  background-color: hsl(51, 17%, 85%);
-  background-color: var(--color-interactive--background);
+  background-color: rgba(255, 255, 255, 1);
+  background-color: var(--color-surface);
 }
 
 .V41prM1xcKI- {
@@ -10360,7 +10360,11 @@ input.oOrjwubmsVA- {
   z-index: 1;
   padding: 0 12px;
   padding: 0 var(--space-slim);
+  border-radius: 8px;
+  border-radius: var(--radius-base);
   overflow: hidden;
+  color: hsl(197, 15%, 43%);
+  color: var(--color-text--secondary);
   font-size: 14px;
   font-size: var(--typography--fontSize-base);
   font-weight: 600;
@@ -10370,6 +10374,26 @@ input.oOrjwubmsVA- {
       align-items: center;
   -ms-flex-pack: center;
       justify-content: center;
+  transition:
+    background-color 300ms ease-out,
+    color 300ms ease-out;
+  transition:
+    background-color var(--timing-slow) ease-out,
+    color var(--timing-slow) ease-out;
+}
+
+.FDDKTZkTdfM- input[type="radio"]:checked + label {
+  color: hsl(107, 58%, 33%);
+  color: var(--color-interactive);
+}
+
+/* Hover only on unselected options; selected already has a green border. */
+
+.FDDKTZkTdfM- input[type="radio"]:not(:checked) + label:hover {
+  color: hsl(107, 65%, 24%);
+  color: var(--color-interactive--hover);
+  background-color: hsl(109, 28%, 92%);
+  background-color: var(--color-interactive--background--subtle--hover);
 }
 
 .FDDKTZkTdfM- span {
@@ -10377,17 +10401,38 @@ input.oOrjwubmsVA- {
   left: 0;
   width: calc(100% / var(--segmentedControl--option-count));
   height: 100%;
+  box-sizing: border-box;
+  border: 1px solid hsl(107, 58%, 33%);
+  border: var(--border-base) solid var(--color-interactive);
   border-radius: 8px;
   border-radius: var(--radius-base);
-  outline: 1px solid hsl(200, 13%, 87%);
-  outline: var(--border-base) solid var(--color-border--interactive);
   background-color: rgba(255, 255, 255, 1);
   background-color: var(--color-surface);
-  transition: 200ms left ease;
-  transition: var(--timing-base) left ease;
+  transition: 300ms left ease-out;
+  transition: var(--timing-slow) left ease-out;
+}
+
+/* Focus ring at z-index: 2 so hover backgrounds (z-index: 1) can't cover it.
+   Negative inset aligns with the span's outer edge so the green border stays
+   visible inside the focus ring. */
+
+.FDDKTZkTdfM- span::after {
+  content: "";
+  position: absolute;
+  top: calc(-1 * 1px);
+  right: calc(-1 * 1px);
+  bottom: calc(-1 * 1px);
+  left: calc(-1 * 1px);
+  top: calc(-1 * var(--border-base));
+  right: calc(-1 * var(--border-base));
+  bottom: calc(-1 * var(--border-base));
+  left: calc(-1 * var(--border-base));
+  z-index: 2;
+  border-radius: inherit;
+  pointer-events: none;
 }
 
-.FDDKTZkTdfM- input[type="radio"]:focus-visible ~ span {
+.FDDKTZkTdfM- input[type="radio"]:focus-visible ~ span::after {
   box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px hsl(198, 12%, 57%);
   box-shadow: var(--shadow-focus);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.111.5",
+  "version": "6.111.6",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -538,5 +538,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "74ad056f656ebfec2d55cc1f52703abbd8aaaecc"
+  "gitHead": "5e13c04744e67afffde1230699b158b1d3c44fbe"
 }