@innovaccer/design-system 4.23.0 → 4.25.0

package/css/src/components/chip.module.css

@@ -2,9 +2,6 @@
   display: flex;
   box-sizing: border-box;
   border-radius: var(--border-radius-30);
-  padding-right: var(--spacing-20);
-  padding-top: var(--spacing-05);
-  padding-bottom: var(--spacing-05);
   width: fit-content;
   justify-content: space-between;
   border-style: solid;
@@ -17,11 +14,9 @@
 
 .Chip-size--regular {
   height: var(--spacing-60);
-  padding-left: var(--spacing-20);
 }
 .Chip-size--small {
   height: 20px;
-  padding-left: var(--spacing-15);
 }
 
 .Chip-wrapper {
@@ -29,6 +24,29 @@
   align-items: center;
 }
 
+.Chip-content {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  flex: 1;
+  align-self: stretch;
+  padding-top: var(--spacing-05);
+  padding-bottom: var(--spacing-05);
+  padding-right: var(--spacing-20);
+}
+
+.Chip-content--regular {
+  padding-left: var(--spacing-20);
+}
+
+.Chip-content--small {
+  padding-left: var(--spacing-15);
+}
+
+.Chip-content:focus-visible {
+  outline: none;
+}
+
 .Chip-icon--left {
   margin-right: var(--spacing-10);
   display: flex;
@@ -62,7 +80,7 @@
   background: var(--secondary);
 }
 
-.Chip--action:focus-visible {
+.Chip--action:has(.Chip-content:focus-visible) {
   outline: var(--border-width-05) solid var(--primary-focus);
   outline-offset: var(--spacing-05);
 }
@@ -90,7 +108,7 @@
   border-color: var(--secondary-dark);
 }
 
-.Chip--selection:focus-visible {
+.Chip--selection:has(.Chip-content:focus-visible) {
   outline: var(--border-width-05) solid var(--primary-focus);
   outline-offset: var(--spacing-05);
 }
@@ -119,7 +137,7 @@
   box-shadow: inset 0 0 0 1px var(--primary);
 }
 
-.Chip-selection--selected:focus-visible {
+.Chip-selection--selected:has(.Chip-content:focus-visible) {
   outline: var(--border-width-05) solid var(--primary-focus);
   outline-offset: var(--spacing-05);
 }
@@ -160,7 +178,7 @@
   background: var(--secondary);
 }
 
-.Chip--input:focus-visible {
+.Chip--input:has(.Chip-content:focus-visible) {
   outline: var(--border-width-05) solid var(--primary-focus);
   outline-offset: var(--spacing-05);
 }
@@ -210,13 +228,47 @@
   background-color: var(--primary-light);
 }
 
-.Chip-selection--disabled:focus-visible,
+.Chip-selection--disabled:has(.Chip-content:focus-visible),
 .Chip-icon-disabled--right:focus-visible,
-.Chip-selection--selectedDisabled:focus-visible,
-.Chip-input--disabled:focus-visible {
+.Chip-selection--selectedDisabled:has(.Chip-content:focus-visible),
+.Chip-input--disabled:has(.Chip-content:focus-visible) {
   outline: none;
 }
 
-.Chip-icon--clear {
+.Chip-icon--clear .Chip-content {
   padding-right: 0;
 }
+
+@media (forced-colors: active) {
+  /* Action chips: border:0 makes them invisible — add a real border */
+  .Chip--action {
+    border: var(--border-width-2-5) solid ButtonText;
+  }
+
+  /* Input chips: border:0 makes them invisible — add a real border */
+  .Chip--input {
+    border: var(--border-width-2-5) solid ButtonText;
+  }
+
+  /* Selected state uses inset box-shadow as a double border on top of the existing border-color */
+  .Chip-selection--selected,
+  .Chip-selection--selected:hover,
+  .Chip-selection--selected:active,
+  .Chip-selection--selectedDisabled {
+    border-color: Highlight;
+    box-shadow: none;
+  }
+
+  .Chip-action--disabled,
+  .Chip-input--disabled {
+    opacity: 1;
+    color: GrayText;
+    border: var(--border-width-2-5) solid GrayText;
+  }
+
+  .Chip-selection--disabled {
+    opacity: 1;
+    color: GrayText;
+    border-color: GrayText;
+  }
+}

package/css/src/components/datePicker.module.css

@@ -0,0 +1,9 @@
+.DatePicker-content {
+  display: flex;
+}
+
+@media (max-width: 576px) {
+  .DatePicker-content {
+    flex-direction: column;
+  }
+}

package/css/src/components/dateRangePicker.module.css

@@ -23,6 +23,11 @@
 }
 
 @media (max-width: 576px) {
+  .DateRangePicker--left,
+  .DateRangePicker--right {
+    flex-direction: column;
+  }
+
   .DateRangePicker-input {
     padding: 0;
   }

package/css/src/components/dropdown.module.css

@@ -201,3 +201,10 @@
   height: fit-content;
   line-height: var(--font-height);
 }
+
+@media (forced-colors: active) {
+  .Dropdown-input:focus-within {
+    outline: var(--border-width-05) solid Highlight !important;
+    outline-offset: var(--spacing-05);
+  }
+}

package/css/src/components/dropzone.module.css

@@ -1,3 +1,15 @@
+.Dropzone-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;
+}
+
 .Dropzone {
   display: flex;
   align-items: center;
@@ -177,3 +189,27 @@
 .Dropzone-icon--error {
   fill: var(--alert);
 }
+
+@media (forced-colors: active) {
+  .Dropzone {
+    border: var(--border-width-05) dashed ButtonText;
+    background-image: none;
+    background-color: Canvas;
+  }
+
+  .Dropzone--active {
+    border: var(--border-width-05) dashed Highlight;
+    background-image: none;
+    background-color: Canvas;
+  }
+
+  .Dropzone--error {
+    border: var(--border-width-05) dashed ButtonText;
+    background-image: none;
+  }
+
+  .Dropzone--disabled {
+    border: var(--border-width-05) dashed GrayText;
+    background-image: none;
+  }
+}

package/css/src/components/grid.module.css

@@ -108,6 +108,10 @@
   overflow-y: auto;
 }
 
+.Grid-rowGroup {
+  display: contents;
+}
+
 .Grid-rowWrapper {
   display: inline-flex;
   flex-direction: column;
@@ -240,12 +244,20 @@
   overflow: hidden;
 }
 
+.Grid-cell--head .Grid-cellContent:focus-visible {
+  box-shadow: inset 0 0 0 var(--border-width-05) var(--primary-focus);
+  border-radius: var(--border-radius-10);
+}
+
 .Grid-cellResize {
   position: absolute;
   right: 0;
   width: var(--spacing-10);
   cursor: ew-resize;
   height: 100%;
+  padding-right: var(--spacing-60);
+  margin-right: calc(-1 * var(--spacing-60));
+  box-sizing: content-box;
 }
 
 .Grid-cellSortIcon {
@@ -262,6 +274,11 @@
   background: var(--primary);
 }
 
+.Grid-cellResize:focus-visible {
+  background: var(--primary);
+  outline: none;
+}
+
 .Grid-reorderHighlighter {
   position: absolute;
   height: 100%;
@@ -481,9 +498,10 @@
   background: var(--secondary-lighter);
 }
 
-.Grid--resource .Grid-row--body:focus {
+.Grid--resource .Grid-row--body:focus-visible {
   box-shadow: var(--shadow-spread) color-mod(var(--secondary) a(var(--opacity-4)));
-  outline: none;
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: calc(-1 * var(--spacing-05));
 }
 
 /* Selected States */
@@ -500,8 +518,9 @@
   background: var(--primary-lighter) !important;
 }
 
-.Grid-row--selected:focus {
-  outline: none;
+.Grid-row--selected:focus-visible {
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: calc(-1 * var(--spacing-05));
   box-shadow: var(--shadow-spread) color-mod(var(--primary) a(var(--opacity-4)));
 }
 
@@ -522,9 +541,8 @@
   background: var(--secondary-lighter);
 }
 
-.Grid--resource .Grid-row--body:focus .Grid-cellWrapper--pinned {
+.Grid--resource .Grid-row--body:focus-visible .Grid-cellWrapper--pinned {
   box-shadow: var(--shadow-spread) color-mod(var(--secondary) a(var(--opacity-4)));
-  outline: none;
 }
 
 /* Pinned Columns Selected State */
@@ -541,8 +559,7 @@
   background: var(--primary-lighter) !important;
 }
 
-.Grid-row--selected:focus .Grid-cellWrapper--pinned {
-  outline: none;
+.Grid-row--selected:focus-visible .Grid-cellWrapper--pinned {
   box-shadow: var(--shadow-spread) color-mod(var(--primary) a(var(--opacity-4)));
 }
 
@@ -553,7 +570,7 @@
 
 .Grid-row--head .Grid-cellGroup--pinned-left {
   border-style: inset;
-  border-right: var(--spacing-xs) solid rgba(213, 213, 213, var(--opacity-3));
+  border-right: var(--spacing-2-5) solid color-mod(var(--secondary-light) a(var(--opacity-3)));
   border-right-width: 4px;
   border-image: linear-gradient(
       to right,
@@ -567,7 +584,7 @@
 
 .Grid-row--head .Grid-cellGroup--pinned-right {
   border-style: inset;
-  border-left: var(--spacing-xs) solid rgba(213, 213, 213, var(--opacity-3));
+  border-left: var(--spacing-2-5) solid color-mod(var(--secondary-light) a(var(--opacity-3)));
   border-left-width: 4px;
   border-image: linear-gradient(
       to left,
@@ -583,7 +600,7 @@
 
 .Grid-cellWrapper--pinned-left {
   border-style: inset;
-  border-right: var(--spacing-xs) solid rgba(213, 213, 213, var(--opacity-3));
+  border-right: var(--spacing-2-5) solid color-mod(var(--secondary-light) a(var(--opacity-3)));
   border-right-width: 4px;
   border-image: linear-gradient(
       to right,
@@ -597,7 +614,7 @@
 
 .Grid-cellWrapper--pinned-right {
   border-style: inset;
-  border-left: var(--spacing-xs) solid rgba(213, 213, 213, var(--opacity-3));
+  border-left: var(--spacing-2-5) solid color-mod(var(--secondary-light) a(var(--opacity-3)));
   border-left-width: 4px;
   border-image: linear-gradient(
       to left,

package/css/src/components/horizontalNav.module.css

@@ -27,8 +27,7 @@
   outline: none;
 }
 
-.HorizontalNav-menu--default:focus-visible,
-.HorizontalNav-menu--default:focus {
+.HorizontalNav-menu--default:focus-visible {
   outline: var(--border-width-05) solid var(--primary-focus);
   outline-offset: var(--spacing-05);
 }
@@ -46,8 +45,7 @@
   box-shadow: 0 0 0 var(--border-width-05) var(--primary);
 }
 
-.HorizontalNav-menu--active:focus-visible,
-.HorizontalNav-menu--active:focus {
+.HorizontalNav-menu--active:focus-visible {
   background-color: var(--primary-ultra-light);
   outline: var(--border-width-05) solid var(--primary-focus);
   outline-offset: var(--spacing-10);
@@ -67,8 +65,7 @@
   color: var(--primary-darker);
 }
 
-.HorizontalNav-menu--active:focus-visible:active,
-.HorizontalNav-menu--active:focus:active {
+.HorizontalNav-menu--active:focus-visible:active {
   background-color: var(--primary-lighter);
   box-shadow: 0 0 0 var(--border-width-05) var(--primary-dark);
 }
@@ -95,3 +92,17 @@
 .HorizontalNav-pills--disabled {
   opacity: var(--opacity-10);
 }
+
+@media (forced-colors: active) {
+  /* Active nav item uses box-shadow as its visible ring — replace with a real border */
+  .HorizontalNav-menu--active {
+    border: var(--border-width-2-5) solid Highlight;
+    box-shadow: none;
+  }
+
+  .HorizontalNav-menu--active:active,
+  .HorizontalNav-menu--active:focus-visible:active {
+    border-color: Highlight;
+    box-shadow: none;
+  }
+}

package/css/src/components/input.module.css

@@ -149,6 +149,7 @@
   cursor: pointer;
   color: var(--inverse-lighter);
   border-radius: var(--border-radius-full);
+  box-sizing: content-box;
 }
 
 .Input-iconWrapper--right:focus-visible .Input-icon--right {

package/css/src/components/link.module.css

@@ -1,12 +1,24 @@
 .Link {
   text-decoration: none;
   font-weight: var(--font-weight-medium);
-  transition: var(--duration--fast-01) var(--standard-productive-curve);
+  transition: color var(--duration--fast-01) var(--standard-productive-curve),
+    border-color var(--duration--fast-01) var(--standard-productive-curve);
   box-sizing: border-box;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .Link {
+    transition: none;
+  }
+}
+
+.Link-text {
+  display: inline-flex;
+  vertical-align: middle;
   border-bottom: var(--border-width-2-5) solid currentColor;
 }
 
-.Link:focus {
+.Link:focus-visible {
   outline: var(--border-width-05) solid var(--primary-focus);
   outline-offset: var(--spacing-05);
   border-radius: var(--border-radius-10);
@@ -32,24 +44,32 @@
   border-bottom-color: transparent;
 }
 
+.Link-text--subtle {
+  border-bottom-color: transparent;
+}
+
 .Link--default:hover {
-  border-bottom: var(--border-width-2-5) solid var(--primary-dark);
   color: var(--primary-dark);
 }
 
 .Link--subtle:hover {
-  border-bottom: var(--border-width-2-5) solid var(--inverse-light);
   color: var(--inverse-light);
 }
 
+.Link--subtle:hover .Link-text--subtle {
+  border-bottom-color: currentColor;
+}
+
 .Link--default:active {
   color: var(--primary-darker);
-  border-bottom: var(--border-width-2-5) solid currentColor;
 }
 
 .Link--subtle:active {
   color: var(--inverse);
-  border-bottom: var(--border-width-2-5) solid transparent;
+}
+
+.Link--subtle:active .Link-text--subtle {
+  border-bottom-color: transparent;
 }
 
 .Link--button-reset {
@@ -71,3 +91,36 @@
   color: var(--inverse-lightest);
   pointer-events: none;
 }
+
+.Link-infoIconWrapper {
+  display: inline-flex;
+  vertical-align: middle;
+  transform: translateY(calc(-1 * var(--spacing-15)));
+  margin-left: var(--spacing-2-5);
+  width: var(--spacing-30);
+  height: var(--spacing-30);
+  box-sizing: border-box;
+  border-radius: var(--border-radius-full);
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+}
+
+.Link-infoIcon {
+  color: var(--text-subtle);
+  pointer-events: none;
+}
+
+.Link-infoIcon--default {
+  color: var(--primary);
+}
+
+.Link-infoIcon--subtle {
+  color: var(--inverse-light);
+}
+
+.Link-tooltip--disabled {
+  pointer-events: auto;
+  cursor: not-allowed;
+}

package/css/src/components/linkButton.module.css

@@ -46,7 +46,8 @@
   font-size: var(--font-size-s);
 }
 
-.LinkButton--default {
+.LinkButton--default,
+.LinkButton--default-disabled {
   color: var(--primary);
 }
 
@@ -58,21 +59,25 @@
   color: var(--primary-darker);
 }
 
-.LinkButton--default:focus,
-.LinkButton--default:focus-visible {
+.LinkButton--default:focus-visible,
+.LinkButton--default-disabled:focus-visible {
   outline: var(--border-width-05) solid var(--primary-focus);
   outline-offset: var(--spacing-05);
 }
 
-.LinkButton--default:disabled {
+.LinkButton--default-disabled {
   cursor: not-allowed;
-  pointer-events: none;
   color: var(--primary-lighter);
 }
 
+.LinkButton-infoIcon--default {
+  color: var(--text-link);
+}
+
 /* Subtle Appearance */
 
-.LinkButton--subtle {
+.LinkButton--subtle,
+.LinkButton--subtle-disabled {
   color: var(--inverse-lighter);
 }
 
@@ -84,14 +89,81 @@
   color: var(--inverse);
 }
 
-.LinkButton--subtle:focus,
-.LinkButton--subtle:focus-visible {
+.LinkButton--subtle:focus-visible,
+.LinkButton--subtle-disabled:focus-visible {
   outline: var(--border-width-05) solid var(--primary-focus);
   outline-offset: var(--spacing-05);
 }
 
-.LinkButton--subtle:disabled {
+.LinkButton--subtle-disabled {
   cursor: not-allowed;
-  pointer-events: none;
   color: var(--inverse-lightest);
 }
+
+.LinkButton-infoIcon--subtle {
+  color: var(--inverse-light);
+}
+
+.LinkButton-infoIconWrapper {
+  position: absolute;
+  top: calc(-1 * var(--spacing-05));
+  right: calc(-1 * var(--spacing-30));
+  width: var(--spacing-30);
+  height: var(--spacing-30);
+  box-sizing: border-box;
+  border-radius: var(--border-radius-full);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border: none;
+  background: transparent;
+  pointer-events: none;
+}
+
+.LinkButton-infoIconWrapper--tiny {
+  top: calc(-1 * var(--spacing-05));
+  right: calc(-1 * var(--spacing-30));
+}
+
+.LinkButton-infoIconWrapper--regularIcon {
+  top: 0px;
+  right: calc(-1 * var(--spacing-05));
+}
+
+.LinkButton-infoIconWrapper--tinyIcon {
+  top: calc(-1 * var(--spacing-05));
+  right: calc(-1 * var(--spacing-05));
+}
+
+.LinkButton-withInfo {
+  padding-right: var(--spacing-20);
+}
+
+.LinkButton-infoIconWrapper--withChildren {
+  right: calc(-1 * var(--spacing-30) + var(--spacing-20));
+}
+
+.LinkButton-infoIconWrapper--iconOnly {
+  right: calc(-1 * var(--spacing-10) + var(--spacing-20));
+}
+
+.LinkButton-infoIconWrapper--tinyIcon {
+  right: calc(-1 * var(--spacing-05) + var(--spacing-20));
+}
+
+.LinkButton-infoIcon {
+  color: inherit;
+}
+
+.LinkButton-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;
+}