@innovaccer/design-system 4.23.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

@@ -95,3 +95,11 @@
 .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/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

@@ -198,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

@@ -116,3 +116,11 @@
 .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

@@ -196,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;
 }