@innovaccer/design-system 4.22.0 → 4.24.0

package/css/src/components/metricInput.module.css

@@ -9,25 +9,21 @@
   align-items: center;
   box-sizing: border-box;
   border-radius: var(--border-radius-10);
-  border: var(--border);
+  box-shadow: inset 0 0 0 var(--border-width-2-5) var(--secondary);
   background: var(--white);
-  overflow: hidden;
   transition: var(--duration--fast-01) var(--standard-productive-curve);
 }
 
 .MetricInput--regular {
   height: var(--spacing-80);
-  padding-left: var(--spacing-30);
 }
 
 .MetricInput--large {
   height: 40px;
-  padding-left: var(--spacing-40);
 }
 
 .MetricInput--small {
   height: var(--spacing-60);
-  padding-left: var(--spacing-20);
 }
 
 .MetricInput:hover {
@@ -37,9 +33,12 @@
 
 .MetricInput:focus-within {
   background: var(--white);
-  border-color: var(--secondary);
+  box-shadow: inset 0 0 0 var(--border-width-2-5) var(--secondary);
+}
+
+.MetricInput:focus-within:not(:has(.MetricInput-arrowButton:focus-visible)) {
   outline: var(--border-width-05) solid var(--primary-focus);
-  outline-offset: var(--spacing-2-5);
+  outline-offset: var(--spacing-05);
 }
 
 .MetricInput:focus-within .MetricInput-icon {
@@ -48,13 +47,13 @@
 
 .MetricInput--disabled {
   background: var(--secondary-lightest);
-  border-color: var(--secondary-light);
+  box-shadow: inset 0 0 0 var(--border-width-2-5) var(--secondary-light);
   pointer-events: none;
 }
 
 .MetricInput--readOnly {
   background: var(--secondary-lightest);
-  border-color: var(--secondary);
+  box-shadow: inset 0 0 0 var(--border-width-2-5) var(--secondary);
   pointer-events: none;
 }
 
@@ -65,19 +64,46 @@
 .MetricInput--error,
 .MetricInput--error:hover {
   background: var(--white);
-  border-color: var(--alert);
+  box-shadow: inset 0 0 0 var(--border-width-2-5) var(--alert);
 }
 
 .MetricInput--error:focus-within {
-  border-color: var(--secondary);
+  box-shadow: inset 0 0 0 var(--border-width-2-5) var(--secondary);
+}
+
+.MetricInput--error:focus-within:not(:has(.MetricInput-arrowButton:focus-visible)) {
   outline: var(--border-width-05) solid var(--alert);
-  outline-offset: var(--spacing-2-5);
+  outline-offset: var(--spacing-05);
 }
 
 .MetricInput--error:focus-within .MetricInput-icon {
   color: var(--alert);
 }
 
+/* Content wrapper — holds icon, prefix, input, suffix */
+.MetricInput-content {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.MetricInput-content--regular {
+  padding: var(--spacing-15) var(--spacing-15);
+  gap: var(--spacing-05);
+}
+
+.MetricInput-content--large {
+  padding: var(--spacing-20) var(--spacing-15);
+  gap: var(--spacing-15);
+}
+
+.MetricInput-content--small {
+  padding: var(--spacing-10) var(--spacing-15);
+  gap: var(--spacing-05);
+}
+
 .MetricInput-input {
   display: flex;
   width: 100%;
@@ -141,23 +167,14 @@
   margin: 0;
 }
 
-.MetricInput-arrowIcons {
-  border-left: var(--border);
-  box-sizing: border-box;
-  border-radius: 0;
-  background: transparent;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  flex-shrink: 0;
-  overflow: hidden;
-}
-
+/* Arrow buttons (decrement on left, increment on right) */
 .MetricInput-arrowButton {
-  height: 50%;
-  border: none;
+  flex-shrink: 0;
+  align-self: stretch;
+  width: var(--spacing-60);
   background: var(--secondary-light);
   color: var(--inverse);
+  border: none;
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -165,7 +182,16 @@
   padding: 0;
   margin: 0;
   user-select: none;
-  overflow: hidden;
+}
+
+.MetricInput-arrowButton--left {
+  border-right: var(--border);
+  border-radius: var(--border-radius-10) 0 0 var(--border-radius-10);
+}
+
+.MetricInput-arrowButton--right {
+  border-left: var(--border);
+  border-radius: 0 var(--border-radius-10) var(--border-radius-10) 0;
 }
 
 .MetricInput-arrowButton:hover {
@@ -178,14 +204,42 @@
 
 .MetricInput-arrowButton:focus {
   outline: 0;
-  box-shadow: var(--shadow-spread) var(--secondary-shadow);
 }
 
-.MetricInput-arrowIcons--small,
-.MetricInput-arrowIcons--regular {
-  width: 20px;
-}
-
-.MetricInput-arrowIcons--large {
-  width: var(--spacing-60);
+.MetricInput-arrowButton:focus-visible {
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
+}
+
+@media (forced-colors: active) {
+  /* box-shadow is stripped — restore a real border for the wrapper boundary */
+  .MetricInput {
+    border: var(--border-width-2-5) solid ButtonText;
+    box-shadow: none;
+  }
+
+  .MetricInput--disabled {
+    border-color: GrayText;
+  }
+
+  /* Wrapper focus rings */
+  .MetricInput:focus-within:not(:has(.MetricInput-arrowButton:focus-visible)) {
+    outline: var(--border-width-05) solid Highlight;
+    outline-offset: var(--spacing-05);
+  }
+
+  .MetricInput--error:focus-within:not(:has(.MetricInput-arrowButton:focus-visible)) {
+    outline: var(--border-width-05) solid Highlight;
+    outline-offset: var(--spacing-05);
+  }
+
+  /* Arrow button states */
+  .MetricInput-arrowButton:disabled {
+    color: GrayText;
+  }
+
+  .MetricInput-arrowButton:focus-visible {
+    outline: var(--border-width-05) solid Highlight;
+    outline-offset: var(--spacing-05);
+  }
 }

package/css/src/components/modal.module.css

@@ -87,3 +87,19 @@
 .Modal-body--withPadding {
   padding-bottom: var(--spacing-40);
 }
+
+.Modal:focus {
+  outline: none;
+}
+
+.Modal-header [tabindex='-1']:focus {
+  outline: none;
+}
+
+@media (forced-colors: active) {
+  /* box-shadow is the only visual boundary; add a real border so the modal is visible */
+  .Modal {
+    border: var(--border-width-2-5) solid ButtonText;
+    box-shadow: none;
+  }
+}

package/css/src/components/navigation.module.css

@@ -115,6 +115,22 @@
   border-top: var(--border);
 }
 
+.Navigation-footerButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  border-radius: 50%;
+}
+
+.Navigation-footerButton:focus-visible {
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
+}
+
 .Navigation--collapsed .Navigation-menuIcon--footer {
   transform: rotate(180deg);
 }

package/css/src/components/segmentedControl.module.css

@@ -97,7 +97,7 @@
   outline: none;
 }
 
-.SegmentedControl-segment:focus-visible:not(.SegmentedControl-segment--selected) {
+.SegmentedControl-segment:focus-visible {
   outline: var(--border-width-05) solid var(--primary-focus);
   outline-offset: var(--spacing-05);
   border-radius: var(--border-radius-10);

package/css/src/components/select.module.css

@@ -49,7 +49,7 @@
   color: var(--text);
 }
 
-.Select-trigger--filled:focus {
+.Select-trigger--filled:focus-visible {
   background-color: var(--secondary-light);
 }
 
@@ -152,10 +152,11 @@
   cursor: pointer;
   border-radius: var(--border-radius-full);
   padding: var(--spacing-05);
+  border: none;
+  background: transparent;
 }
 
-.Select-crossButton:focus-visible,
-.Select-crossButton:focus {
+.Select-crossButton:focus-visible {
   outline: var(--spacing-05) solid var(--primary-focus);
 }
 
@@ -197,3 +198,10 @@
 .Select-trigger--error {
   border: var(--border-width-2-5) solid var(--alert) !important;
 }
+
+@media (forced-colors: active) {
+  .Select-input:focus-within {
+    outline: var(--border-width-05) solid Highlight !important;
+    outline-offset: var(--spacing-05);
+  }
+}

package/css/src/components/selectionCard.module.css

@@ -97,3 +97,41 @@
   background-color: var(--primary-lightest);
   opacity: var(--opacity-10);
 }
+
+@media (forced-colors: active) {
+  /* All states use inset box-shadow as the sole border — replace with real borders */
+  .Selection-card--default,
+  .Selection-card--default:hover,
+  .Selection-card--default:active,
+  .Selection-card--default-disabled {
+    border: var(--border-width-2-5) solid ButtonText;
+    box-shadow: none;
+  }
+
+  /* Interactive selected states — use Highlight to signal selection */
+  .Selection-card--selected,
+  .Selection-card--selected:hover,
+  .Selection-card--selected:active {
+    border: var(--border-width-2-5) solid Highlight;
+    box-shadow: none;
+  }
+
+  .Selection-card--selected-disabled {
+    border: var(--border-width-2-5) solid GrayText;
+    box-shadow: none;
+  }
+
+  .Selection-card--default:focus,
+  .Selection-card--default:focus-visible,
+  .Selection-card--selected:focus,
+  .Selection-card--selected:focus-visible {
+    outline: var(--border-width-05) solid Highlight;
+    outline-offset: var(--spacing-05);
+    box-shadow: none;
+  }
+
+  /* Disabled: suppress the focus indicator */
+  .Selection-card--disabled {
+    outline: none;
+  }
+}

package/css/src/components/sidesheet.module.css

@@ -108,3 +108,19 @@
 .Sidesheet-body--firstPage {
   animation: fadeIn var(--duration--fast-02) var(--standard-expressive-curve);
 }
+
+.Sidesheet:focus {
+  outline: none;
+}
+
+.Sidesheet-header [tabindex='-1']:focus {
+  outline: none;
+}
+
+@media (forced-colors: active) {
+  /* box-shadow is the only visual boundary; add a real left border so the panel edge is visible */
+  .Sidesheet {
+    border-left: var(--border-width-2-5) solid ButtonText;
+    box-shadow: none;
+  }
+}

package/css/src/components/slider.module.css

@@ -134,3 +134,24 @@
   outline: none;
   box-shadow: none;
 }
+
+@media (forced-colors: active) {
+  /* Handle elevation comes from box-shadow only — add a real border so it stays visible */
+  .Slider-handle {
+    border: var(--border-width-05) solid ButtonText;
+    box-shadow: none;
+  }
+
+  /* Restore focus ring on the handle (outline:none is set unconditionally) */
+  .Slider-handle:focus,
+  .Slider-handle:focus-visible {
+    outline: var(--border-width-05) solid Highlight;
+    outline-offset: var(--spacing-05);
+  }
+
+  /* Filled portion of the track */
+  .Slider-progress--inRange {
+    forced-color-adjust: none;
+    background: Highlight;
+  }
+}

package/css/src/components/switch.module.css

@@ -135,3 +135,42 @@
 .Switch-wrapper--checkedDisabled:before {
   border-color: transparent;
 }
+
+@media (forced-colors: active) {
+  .Switch-wrapper {
+    outline: var(--border-width-2-5) solid ButtonText;
+    outline-offset: calc(-1 * var(--border-width-2-5));
+    box-shadow: none;
+  }
+
+  /* Checked (enabled) track: use Highlight to distinguish on-state */
+  .Switch-wrapper--checked:not(.Switch-wrapper--checkedDisabled) {
+    background-color: Highlight;
+  }
+
+  .Switch-wrapper--checkedDisabled {
+    background-color: ButtonFace;
+    outline-color: GrayText;
+  }
+
+  /* Thumb: box-shadow is removed in forced-colors mode — ensure the existing border is visible */
+  .Switch-wrapper:before {
+    box-shadow: none;
+    border-color: ButtonText;
+  }
+
+  /* In the checked (enabled) state the thumb border is transparent — make it contrast against the track */
+  .Switch-wrapper--checked:not(.Switch-wrapper--checkedDisabled):before {
+    border-color: HighlightText;
+  }
+
+  /* Checked-disabled thumb: use GrayText so it reads as disabled */
+  .Switch-wrapper--checkedDisabled:before {
+    border-color: GrayText;
+  }
+
+  /* Unchecked-disabled thumb */
+  .Switch-wrapper--disabled:before {
+    border-color: GrayText;
+  }
+}

package/css/src/components/table.module.css

@@ -28,11 +28,42 @@
 }
 
 .Table-Header-Label--hide {
-  animation: fadeOut var(--duration--fast-02) var(--exit-productive-curve);
+  animation: tableHeaderFadeOut var(--duration--fast-02) var(--exit-productive-curve);
   animation-fill-mode: forwards;
+  pointer-events: none;
 }
 
 .Table-Header-Label--show {
   animation: fadeIn var(--duration--moderate-01) var(--entrance-productive-curve);
   animation-fill-mode: forwards;
 }
+
+@keyframes tableHeaderFadeOut {
+  from {
+    opacity: 1;
+    visibility: visible;
+  }
+  to {
+    opacity: 0;
+    visibility: hidden;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .Table-Header-Label--hide,
+  .Table-Header-Label--show {
+    animation-duration: 0.001ms;
+  }
+}
+
+.Table-srOnly {
+  position: absolute;
+  width: var(--spacing-2-5);
+  height: var(--spacing-2-5);
+  padding: 0;
+  margin: calc(-1 * var(--spacing-2-5));
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

package/css/src/components/tabs.module.css

@@ -182,3 +182,23 @@
   display: flex;
   box-sizing: border-box;
 }
+
+@media (forced-colors: active) {
+  /* Dismissible tab close icons have outline:none unconditionally — restore focus ring in forced-colors mode */
+  .DismissibleRegularTab-icon--right:focus-visible,
+  .DismissibleSmallTab-icon--right:focus-visible {
+    outline: var(--border-width-05) solid Highlight;
+  }
+
+  .Tab--active::after {
+    background-color: transparent;
+    border-top: var(--spacing-05) solid Highlight;
+    box-sizing: border-box;
+  }
+
+  /* Disabled tab pills use opacity — use GrayText instead */
+  .Tab-pills--disabled {
+    opacity: 1;
+    color: GrayText;
+  }
+}

package/css/src/components/timePicker.module.css

@@ -0,0 +1,4 @@
+.TimePicker-trigger {
+  width: calc(var(--spacing-40) * 20);
+  min-width: calc(var(--spacing-40) * 16);
+}

package/css/src/components/toast.module.css

@@ -55,6 +55,8 @@
   padding-left: var(--spacing-10);
   height: var(--spacing-60);
   box-sizing: initial;
+  background: transparent;
+  border: none;
 }
 
 .Toast-icon--info,
@@ -68,6 +70,13 @@
   color: var(--warning-darker);
 }
 
+.Toast-closeButton {
+  background: transparent;
+  border: none;
+  color: inherit;
+  padding: 0;
+}
+
 .Toast-close-icon:focus,
 .Toast-close-icon:focus-visible {
   outline: none;
@@ -187,3 +196,13 @@
   background: var(--warning-darker);
   color: var(--text-white);
 }
+
+@media (forced-colors: active) {
+  /* Close icon focus ring is conveyed via box-shadow only — replace with outline */
+  .Toast-close-icon:focus,
+  .Toast-close-icon:focus-visible {
+    outline: var(--border-width-05) solid Highlight;
+    outline-offset: var(--spacing-05);
+    box-shadow: none;
+  }
+}

package/css/src/components/tooltip.module.css

@@ -15,6 +15,7 @@
 }
 
 .Tooltip-text {
+  white-space: pre-wrap;
   word-break: break-word;
   hyphens: auto;
 }

package/css/src/components/verticalNav.module.css

@@ -74,20 +74,24 @@
   background: var(--secondary-dark);
 }
 
-.MenuItem:focus {
+.MenuItem:focus-visible {
   outline: var(--border-width-05) solid var(--primary-focus);
   outline-offset: var(--spacing-05);
 }
 
-.MenuItem--expanded:focus {
+.MenuItem:focus:not(:focus-visible) {
+  outline: none;
+}
+
+.MenuItem--expanded:focus-visible {
   clip-path: inset(-6px -6px -6px 0);
 }
 
-.MenuItem--expandedRounded:focus {
+.MenuItem--expandedRounded:focus-visible {
   clip-path: inset(-6px);
 }
 
-.MenuItem--disabled:focus {
+.MenuItem--disabled:focus-visible {
   outline: none;
 }
 
@@ -130,11 +134,15 @@
   color: var(--primary-darker);
 }
 
-.MenuItem--active:focus {
+.MenuItem--active:focus-visible {
   outline: var(--border-width-05) solid var(--primary-focus);
   outline-offset: var(--spacing-05);
 }
 
+.MenuItem--active:focus:not(:focus-visible) {
+  outline: none;
+}
+
 .MenuItem--rounded {
   border-radius: var(--border-radius-40);
 }

package/css/src/core/utilities.css

@@ -18,26 +18,3 @@
 .Overlay-container--close {
   animation-timing-function: cubic-bezier(0.4, 0.14, 1, 1);
 }
-
-::-webkit-scrollbar {
-  width: 16px;
-}
-
-::-webkit-scrollbar-thumb {
-  background: var(--secondary-dark);
-  border-radius: 8px;
-  border: 2px solid transparent;
-  background-clip: content-box;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: var(--inverse-lightest);
-  border: 2px solid transparent;
-  background-clip: content-box;
-}
-
-::-webkit-scrollbar-thumb:active {
-  background: var(--inverse-lighter);
-  border: 2px solid transparent;
-  background-clip: content-box;
-}