@innovaccer/design-system 4.23.0 → 4.24.0

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

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

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