@innovaccer/design-system 4.22.0 → 4.24.0

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

@@ -20,6 +20,7 @@
   z-index: 5;
   overflow-x: hidden;
   -ms-overflow-style: none;
+  scrollbar-width: none;
   border-right: var(--border-width-7-5) solid var(--secondary);
 }
 
@@ -71,6 +72,8 @@
   display: flex;
   flex: 0 0 auto;
   overflow-x: auto;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
   border-bottom: var(--border);
 }
 
@@ -102,7 +105,11 @@
   flex-direction: column;
   flex-grow: 1;
   overflow-x: auto;
-  overflow-y: overlay;
+  overflow-y: auto;
+}
+
+.Grid-rowGroup {
+  display: contents;
 }
 
 .Grid-rowWrapper {
@@ -237,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 {
@@ -259,6 +274,11 @@
   background: var(--primary);
 }
 
+.Grid-cellResize:focus-visible {
+  background: var(--primary);
+  outline: none;
+}
+
 .Grid-reorderHighlighter {
   position: absolute;
   height: 100%;
@@ -478,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 */
@@ -497,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)));
 }
 
@@ -519,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 */
@@ -538,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)));
 }
 
@@ -550,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,
@@ -564,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,
@@ -580,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,
@@ -594,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

@@ -50,7 +50,7 @@
 .HorizontalNav-menu--active:focus {
   background-color: var(--primary-ultra-light);
   outline: var(--border-width-05) solid var(--primary-focus);
-  outline-offset: var(--spacing-05);
+  outline-offset: var(--spacing-10);
 }
 
 .HorizontalNav-menu--active:hover {
@@ -95,3 +95,18 @@
 .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,
+  .HorizontalNav-menu--active:focus:active {
+    border-color: Highlight;
+    box-shadow: none;
+  }
+}

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

@@ -58,7 +58,6 @@
 
 .Input--error:focus-within {
   border-color: var(--alert);
-  box-shadow: var(--shadow-spread) var(--alert-shadow);
 }
 
 .Input--error:focus-within .Input-icon--left {

package/css/src/components/label.module.css

@@ -33,6 +33,18 @@
   color: var(--text-disabled);
 }
 
+.Label-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;
+}
+
 .Label-requiredIndicator {
   height: var(--spacing-15);
   width: var(--spacing-15);

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,42 @@
   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 {
+  background: none;
+  border-top: none;
+  border-left: none;
+  border-right: none;
+  padding: 0;
+  cursor: pointer;
+  font-family: inherit;
 }
 
 .Link--default-disabled {
@@ -61,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;
+}

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

@@ -49,7 +49,6 @@
   background-color: var(--secondary-lightest);
 }
 
-.Listbox-item--option:focus,
 .Listbox-item--option:focus-visible {
   outline: var(--border-width-05) solid var(--primary-focus);
   outline-offset: calc(-1 * var(--border-width-05));
@@ -60,14 +59,30 @@
 }
 
 .Listbox-item--selected {
+  position: relative;
   background: color-mod(var(--primary-lightest) a(var(--opacity-12)));
 }
 
+.Listbox-item--selected::before {
+  content: '';
+  position: absolute;
+  top: var(--spacing-10);
+  left: var(--spacing-10);
+  width: var(--spacing-20);
+  height: var(--spacing-20);
+  background-color: var(--primary);
+  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)));
 }
 
-.Listbox-item--selected:focus,
 .Listbox-item--selected:focus-visible {
   outline: var(--border-width-05) solid var(--primary-focus);
   outline-offset: calc(-1 * var(--border-width-05));
@@ -87,7 +102,6 @@
   background-color: var(--secondary-lightest);
 }
 
-.Listbox-item--resource:focus,
 .Listbox-item--resource:focus-visible {
   outline: var(--border-width-05) solid var(--primary-focus);
   outline-offset: calc(-1 * var(--border-width-05));
@@ -98,12 +112,28 @@
 }
 
 .Listbox-item--activated {
+  position: relative;
   background: var(--primary-lightest);
 }
 
+.Listbox-item--activated::before {
+  content: '';
+  position: absolute;
+  top: var(--spacing-10);
+  left: var(--spacing-10);
+  width: var(--spacing-20);
+  height: var(--spacing-20);
+  background-color: var(--primary);
+  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,
 .Listbox-item--description:focus-visible {
   outline: none;
 }
@@ -117,20 +147,94 @@
 
 /* Listbox type - draggable  */
 
-.Listbox-item--draggable:focus {
+.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));
 }
 
 .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;
+  }
+}