@innovaccer/design-system 4.23.0 → 4.25.0

package/css/src/components/listbox.module.css

@@ -74,6 +74,11 @@
   clip-path: polygon(0 0, 100% 0, 0 100%);
 }
 
+.Listbox-item--tight.Listbox-item--selected::before {
+  top: var(--spacing-05);
+  left: var(--spacing-05);
+}
+
 .Listbox-item--selected:hover {
   background: color-mod(var(--primary-lighter) a(var(--opacity-12)));
 }
@@ -122,6 +127,11 @@
   clip-path: polygon(0 0, 100% 0, 0 100%);
 }
 
+.Listbox-item--tight.Listbox-item--activated::before {
+  top: var(--spacing-05);
+  left: var(--spacing-05);
+}
+
 /* Listbox type - description  */
 
 .Listbox-item--description:focus-visible {
@@ -137,6 +147,10 @@
 
 /* Listbox type - draggable  */
 
+.Listbox-item--draggable:hover {
+  background-color: var(--secondary-lightest);
+}
+
 .Listbox-item--draggable:focus-visible {
   outline: var(--border-width-05) solid var(--primary-focus);
   outline-offset: calc(-1 * var(--border-width-05));
@@ -144,13 +158,83 @@
 
 .Listbox-item--drag-icon {
   cursor: grab;
-  margin-right: var(--spacing-20);
+  padding: var(--spacing-10);
+  margin-right: calc(var(--spacing-20) - var(--spacing-10));
+  margin-left: calc(-1 * var(--spacing-10));
+  border-radius: var(--border-radius-10);
+  transition: background-color var(--duration--moderate-01) var(--standard-productive-curve),
+    color var(--duration--moderate-01) var(--standard-productive-curve),
+    box-shadow var(--duration--moderate-01) var(--standard-productive-curve);
+}
+
+.Listbox-item--drag-icon:focus-visible {
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .Listbox-item--drag-icon:hover {
+  background-color: var(--secondary);
   color: var(--inverse);
 }
 
 .Listbox-item--drag-icon:active {
+  background-color: var(--secondary-dark);
+  color: var(--primary);
+}
+
+/* Drag and reorder interaction states */
+
+.Listbox-item--sticky-picked,
+.Listbox-item--drag-picked {
+  background-color: var(--text-white);
+  box-shadow: var(--shadow-l);
+  rotate: 0.5deg;
+  cursor: grabbing;
+  z-index: 1000;
+  position: relative;
+}
+
+.Listbox-item--sticky-picked .Listbox-item--selected,
+.Listbox-item--drag-picked .Listbox-item--selected {
+  background-color: color-mod(var(--primary-lightest) a(var(--opacity-12)));
+}
+
+.Listbox-item--sticky-picked .Listbox-item--drag-icon {
+  background-color: var(--primary);
+  color: var(--text-white);
+}
+
+.Listbox-item--drag-picked .Listbox-item--drag-icon {
+  background-color: var(--primary-ultra-light);
   color: var(--primary);
+  box-shadow: inset 0 0 0 var(--border-width-2-5) var(--primary);
+}
+
+.Listbox-aria-live {
+  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;
+}
+
+@media (forced-colors: active) {
+  .Listbox-item--description:focus-visible {
+    outline: var(--border-width-05) solid Highlight;
+    outline-offset: calc(-1 * var(--border-width-05));
+  }
+
+  .Listbox-item--disabled {
+    opacity: 1;
+    color: GrayText;
+  }
+
+  .Listbox-item--selected::before,
+  .Listbox-item--activated::before {
+    background-color: Highlight;
+  }
 }

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/pageHeader.module.css

@@ -14,6 +14,10 @@
   border-bottom: none;
 }
 
+.PageHeader-bottom--withTabs {
+  margin-top: var(--spacing-30);
+}
+
 .PageHeader .Row {
   width: 100%;
 }
@@ -41,16 +45,11 @@
 }
 
 .PageHeader-navigationWrapper {
-  margin-top: var(--spacing-10);
+  margin-top: var(--spacing-30);
 }
 
-.PageHeader .PageHeader-navigationWrapper {
-  justify-content: center;
-  align-items: center;
-  margin-top: 0 !important;
-  padding-right: var(--spacing-20);
-  padding-left: var(--spacing-20);
-  display: flex;
+.PageHeader-navigationWrapper--noMargin {
+  margin-top: 0;
 }
 
 .PageHeader-title {
@@ -64,3 +63,99 @@
   justify-content: flex-end;
   padding-left: var(--spacing-20);
 }
+
+/* =====================================================
+   Responsive main header row
+   ===================================================== */
+
+/* Base: flex layout — used by all variants */
+.PageHeader-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: start;
+  width: 100%;
+}
+
+.PageHeader-group--title {
+  flex: 1 1 auto;
+  min-width: 0;
+  order: 1;
+}
+
+/* Center-nav group — navigation/stepper in center position */
+.PageHeader-group--center {
+  flex: 0 0 auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0 var(--spacing-20);
+  min-width: 0;
+  order: 2;
+}
+
+/* Actions / right-side group */
+.PageHeader-group--actions {
+  flex: 0 0 auto;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  align-items: center;
+  padding-left: var(--spacing-20);
+  row-gap: var(--spacing-30);
+  order: 3;
+}
+
+/* Default (full): CSS Grid for true 3-col centering */
+.PageHeader-row--withCenter {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  align-items: start;
+}
+
+/* Ghost: center nav stays in the grid for measurement but is invisible and out of flow.
+   Used when collision detection moves the nav to PageHeader-bottom. */
+.PageHeader-group--center--ghost {
+  position: absolute;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+/* All stacked: flex marker on the row + full-width children */
+.PageHeader-row--allStacked {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.PageHeader-group--title--stacked {
+  flex: 0 0 100%;
+  order: 1;
+}
+
+.PageHeader-group--actions--stacked {
+  flex: 0 0 100%;
+  order: 2;
+  padding-left: 0;
+  padding-top: var(--spacing-10);
+  justify-content: flex-start;
+}
+
+/* =====================================================
+   Level 1: inter-section spacing when right group wraps
+   ===================================================== */
+
+/* At < 576 px, the actions group sits between title and nav/stepper/tabs.
+   For level 1 headers that have actions, increase the gap to 12 px so all
+   three sections (title, actions, nav) have consistent breathing room. */
+@media (max-width: 575px) {
+  .PageHeader-group--actions--level1Responsive {
+    padding-top: var(--spacing-30);
+  }
+
+  .PageHeader-bottom--level1Responsive {
+    margin-top: var(--spacing-30);
+  }
+
+  .PageHeader-navigationWrapper--noMarginSm {
+    margin-top: 0;
+  }
+}

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;
+  }
+}