@innovaccer/design-system 4.22.0 → 4.24.0

package/css/src/components/chatBubble.module.css

@@ -9,7 +9,7 @@
   height: var(--spacing-10);
   border-radius: var(--border-radius-full);
   margin: 0 var(--spacing-20);
-  background: var(--inverse-lightest);
+  background: var(--inverse-lighter);
 }
 
 .ChatBubble-box--noSuccess {
@@ -51,3 +51,8 @@
 .ChatBubble-actionBarWrapper {
   flex: 0 0 auto;
 }
+
+.ChatBubble-actionBarWrapper--hidden {
+  width: 0;
+  overflow: hidden;
+}

package/css/src/components/chatInput.module.css

@@ -2,13 +2,15 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  border: var(--border-width-2-5) solid var(--secondary);
+  border: var(--border-width-2-5) solid var(--secondary-dark);
   padding: var(--spacing-20);
   border-radius: var(--border-radius-10);
   background: var(--white);
   max-width: 100%;
   min-width: var(--spacing-640);
-  transition: all var(--duration--slow-01) var(--standard-productive-curve);
+  transition: background-color var(--duration--slow-01) var(--standard-productive-curve),
+    border-color var(--duration--slow-01) var(--standard-productive-curve),
+    outline var(--duration--slow-01) var(--standard-productive-curve);
   max-height: var(--spacing-440);
   position: relative;
   box-sizing: border-box;
@@ -70,7 +72,8 @@
 .ChatInput-actions {
   display: flex;
   flex-shrink: 0;
-  transition: all var(--duration--slow-01) var(--standard-productive-curve);
+  transition: margin var(--duration--slow-01) var(--standard-productive-curve),
+    width var(--duration--slow-01) var(--standard-productive-curve);
   margin-left: var(--spacing-20);
   align-items: center;
 }
@@ -81,3 +84,11 @@
   margin-top: var(--spacing-20);
   margin-left: 0;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .ChatInput,
+  .ChatInput-actions,
+  .ChatInput-textarea {
+    transition: none;
+  }
+}

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

@@ -160,8 +160,7 @@
   background: var(--secondary);
 }
 
-.Chip--input:focus-visible,
-.Chip--input:focus {
+.Chip--input:focus-visible {
   outline: var(--border-width-05) solid var(--primary-focus);
   outline-offset: var(--spacing-05);
 }
@@ -178,7 +177,8 @@
 }
 
 .Chip-icon--right:focus-visible {
-  outline: var(--spacing-05) solid var(--primary-focus);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .Chip-icon--right:hover {
@@ -198,7 +198,8 @@
 }
 
 .Chip-icon--selected:focus-visible {
-  outline: var(--spacing-05) solid var(--primary-focus);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .Chip-icon--selected:hover {
@@ -219,3 +220,37 @@
 .Chip-icon--clear {
   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/chipInput.module.css

@@ -1,5 +1,6 @@
 .ChipInput {
   display: flex;
+  box-sizing: border-box;
   border-radius: var(--border-radius-10);
   box-shadow: inset 0 0 0 var(--spacing-2-5) var(--secondary);
   background: var(--white);
@@ -9,23 +10,19 @@
 
 .ChipInput--regular {
   padding-left: 10px;
-  padding-right: 10px;
+  padding-right: var(--spacing-15);
 }
 
 .ChipInput--small {
+  align-items: center;
+  min-height: var(--spacing-60);
   padding-left: var(--spacing-20);
-  padding-right: var(--spacing-20);
-}
-
-.ChipInput:focus,
-.ChipInput:focus-visible {
-  outline: var(--border-width-05) solid var(--primary-focus);
-  outline-offset: var(--spacing-05);
+  padding-right: var(--spacing-10);
 }
 
 .ChipInput:hover {
   background: var(--secondary-lighter);
-  border-color: var(--secondary-dark);
+  box-shadow: inset 0 0 0 var(--spacing-2-5) var(--secondary-dark);
 }
 
 .ChipInput:focus-within {
@@ -34,12 +31,12 @@
 
 .ChipInput--disabled {
   background: var(--secondary-lightest);
-  border-color: var(--secondary-light);
+  box-shadow: inset 0 0 0 var(--spacing-2-5) var(--secondary-light);
   pointer-events: none;
 }
 
 .ChipInput--withChips {
-  padding-right: var(--spacing-20);
+  padding-right: 0;
 }
 
 .ChipInput--error {
@@ -53,15 +50,18 @@
   flex-wrap: wrap;
 }
 
-.ChipInput-border:focus-within {
+.ChipInput--small .ChipInput-wrapper {
+  min-height: var(--spacing-60);
+}
+
+.ChipInput-border--focusRing {
   border-radius: var(--border-radius-10);
   outline: var(--border-width-05) solid var(--primary-focus);
   outline-offset: var(--spacing-05);
 }
 
-.ChipInput-border--error:focus-within {
-  outline: var(--border-width-05) solid var(--primary-focus);
-  outline-offset: var(--spacing-05);
+.ChipInput-border--error.ChipInput-border--focusRing {
+  box-shadow: var(--shadow-spread) var(--alert-shadow);
 }
 
 .ChipInput-input {
@@ -105,8 +105,9 @@
 }
 
 .ChipInput-icon--small {
+  flex-shrink: 0;
+  align-self: center;
   margin-left: var(--spacing-15);
-  margin-top: var(--spacing-15);
   height: var(--spacing-30);
 }
 
@@ -126,5 +127,6 @@
 
 .ChipInput-icon:focus,
 .ChipInput-icon:focus-visible {
-  outline: var(--spacing-05) solid var(--secondary-shadow);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }

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

@@ -18,6 +18,10 @@
 
 .Dropdown-input {
   min-width: unset !important;
+  background: transparent;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  height: 36px;
 }
 
 .Dropdown-input,
@@ -27,6 +31,10 @@
   outline: none !important;
 }
 
+.Dropdown-input:hover {
+  background-color: var(--secondary-lightest);
+}
+
 .Dropdown-section {
   display: flex;
   justify-content: space-between;
@@ -60,6 +68,8 @@
 .Option {
   display: flex;
   transition: var(--duration--fast-01) var(--standard-productive-curve);
+  color: var(--text);
+  cursor: pointer;
 }
 
 .Option,
@@ -85,25 +95,28 @@
   padding-bottom: var(--spacing-15);
 }
 
-.Option--active,
-.Option-checkbox--active {
+.Option--interactive:hover,
+.Option-checkbox--interactive:hover {
   background-color: var(--secondary-lightest);
-  cursor: pointer;
 }
 
-.Option--active:hover,
-.Option-checkbox--active:hover {
-  background-color: var(--secondary-lighter);
+.Option--interactive:hover:active,
+.Option-checkbox--interactive:hover:active {
+  background-color: var(--secondary-light);
 }
 
-.Option--active:active,
-.Option-checkbox--active:active {
-  background-color: var(--secondary-light);
-  cursor: pointer;
+.Option:focus,
+.Option:focus-visible,
+.Option-checkbox:focus,
+.Option-checkbox:focus-visible {
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: calc(-1 * var(--border-width-05));
 }
 
-.Option--active {
-  transition: var(--standard-productive-curve);
+.OptionWrapper:focus,
+.OptionWrapper:focus-visible {
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: calc(-1 * var(--border-width-05));
 }
 
 .Option-loading {
@@ -114,11 +127,17 @@
   background-color: var(--primary-lightest);
 }
 
-.Option--selected:hover {
+.Option--selected:focus,
+.Option--selected:focus-visible {
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: calc(-1 * var(--border-width-05));
+}
+
+.Option--selected.Option--interactive:hover {
   background-color: var(--primary-lighter);
 }
 
-.Option--selected:active {
+.Option--selected.Option--interactive:active {
   background-color: var(--primary-lighter);
   color: var(--primary-darker);
 }
@@ -138,6 +157,16 @@
   overflow: hidden;
   display: flex;
   flex-direction: column;
+  flex: 1;
+  min-width: 0;
+}
+
+.Option-checkIcon {
+  display: flex;
+  flex-shrink: 0;
+  align-self: center;
+  margin-left: auto;
+  padding-left: var(--spacing-20);
 }
 
 .OptionCheckbox .Checkbox-label {
@@ -172,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/dropdownButton.module.css

@@ -46,7 +46,7 @@
 }
 
 .DropdownButton--placeholder {
-  color: var(--text-subtle);
+  color: var(--text);
 }
 
 .DropdownButton:hover {
@@ -54,9 +54,11 @@
   color: var(--text);
 }
 
-.DropdownButton:focus {
+.DropdownButton:focus-visible {
   background-color: var(--secondary-light);
-  box-shadow: var(--shadow-spread) var(--secondary-shadow);
+  box-shadow: none;
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .DropdownButton:active,

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

@@ -2,16 +2,30 @@
   position: relative;
   width: 100%;
 }
+
+.EditableChipInput:focus-visible {
+  outline: none;
+}
 .EditableChipInput-default {
+  box-sizing: border-box;
   display: flex;
   align-items: center;
   padding-left: var(--spacing-30);
   border-left: var(--border-width-2-5) solid transparent;
   min-height: var(--spacing-80);
   flex-wrap: wrap;
+  border-radius: var(--border-radius-10);
+  transition: var(--duration--fast-01) var(--standard-productive-curve);
+  cursor: pointer;
+}
+
+.EditableChipInput-default--small {
+  min-height: var(--spacing-60);
+  padding-left: var(--spacing-20);
 }
 
 .EditableChipInput-defaultWithChips {
+  box-sizing: border-box;
   display: flex;
   align-items: center;
   padding-left: var(--spacing-20);
@@ -20,17 +34,50 @@
   padding-bottom: var(--spacing-2-5);
   max-width: calc(100% - 28px);
   flex-wrap: wrap;
+  border-radius: var(--border-radius-10);
+  transition: var(--duration--fast-01) var(--standard-productive-curve);
+  cursor: pointer;
+}
+
+.EditableChipInput-defaultWithChips--small {
+  min-height: var(--spacing-60);
+  padding-top: 0;
+  padding-bottom: 0;
 }
 
 .EditableChipInput-defaultWithChips:hover,
 .EditableChipInput-default:hover {
-  background-color: var(--secondary-lightest);
+  background-color: var(--secondary-lighter);
+  box-shadow: inset 0 0 0 var(--spacing-2-5) var(--secondary-dark);
+}
+
+.EditableChipInput:focus-visible .EditableChipInput-default,
+.EditableChipInput:focus-visible .EditableChipInput-defaultWithChips {
+  background: var(--white);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
+  box-shadow: inset 0 0 0 var(--spacing-2-5) var(--secondary);
 }
 
 .EditableChipInput-chipInput {
   padding-left: var(--spacing-20);
 }
 
+.EditableChipInput-chip--regular {
+  margin: var(--spacing-05);
+}
+
+.EditableChipInput-chip--small {
+  margin-left: var(--spacing-05);
+  margin-right: var(--spacing-05);
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.EditableChipInput-placeholder--small {
+  padding-top: 0;
+}
+
 .EditableChipInput-actions {
   position: absolute;
   display: flex;

package/css/src/components/editableDropdown.module.css

@@ -2,10 +2,63 @@
   width: 100%;
 }
 
+.EditableDropdown:focus-visible {
+  outline: none;
+}
+
 .EditableDropdown-default {
   display: flex;
   align-items: center;
+  justify-content: space-between;
   box-sizing: border-box;
   height: var(--spacing-80);
   padding-left: var(--spacing-30);
+  padding-right: var(--spacing-20);
+  border-radius: var(--border-radius-10);
+  transition: var(--duration--fast-01) var(--standard-productive-curve);
+  cursor: pointer;
+  border: var(--border-width-2-5) solid transparent;
+}
+
+.EditableDropdown-wrapper {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
+  align-items: center;
+}
+
+.EditableDropdown-text {
+  text-align: left;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--text);
+  font-size: var(--font-size);
+  line-height: var(--font-height);
+  font-weight: var(--font-weight-normal);
+}
+
+.EditableDropdown-text--subtle {
+  color: var(--text-subtle);
+}
+
+.EditableDropdown-icon {
+  visibility: hidden;
+}
+
+.EditableDropdown-default:hover .EditableDropdown-icon,
+.EditableDropdown:focus-visible .EditableDropdown-icon {
+  visibility: visible;
+}
+
+.EditableDropdown-default:hover {
+  background: var(--secondary);
+}
+
+.EditableDropdown:focus-visible .EditableDropdown-default {
+  background: var(--secondary-light);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
+  border-radius: var(--border-radius-10);
 }

package/css/src/components/editableInput.module.css

@@ -5,6 +5,10 @@
   width: 100%;
 }
 
+.EditableInput:focus-visible {
+  outline: none;
+}
+
 .EditableInput-actions {
   position: absolute;
   display: flex;
@@ -27,6 +31,21 @@
   white-space: nowrap;
   display: flex;
   align-items: center;
+  border-radius: var(--border-radius-10);
+  transition: var(--duration--fast-01) var(--standard-productive-curve);
+  cursor: pointer;
+}
+
+.EditableInput-default:hover {
+  background: var(--secondary-lighter);
+  border-color: var(--secondary-dark);
+}
+
+.EditableInput:focus-visible .EditableInput-default {
+  background: var(--white);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
+  border-color: transparent;
 }
 
 .EditableInput-default--regular {
@@ -50,3 +69,15 @@
   min-width: var(--spacing-240) !important;
   width: 100%;
 }
+
+.EditableInput-errorIcon--regular {
+  margin-right: var(--spacing-20);
+  margin-top: var(--spacing-10);
+  margin-bottom: var(--spacing-10);
+}
+
+.EditableInput-errorIcon--tiny {
+  margin-right: var(--spacing-10);
+  margin-top: var(--spacing-05);
+  margin-bottom: var(--spacing-05);
+}