@innovaccer/design-system 4.19.2 → 4.20.0

package/CHANGELOG.md

@@ -1,3 +1,39 @@
+## 4.20.0 (2026-02-24)
+
+### Highlights
+
+- feat(a11y): add accessibility support in components (b8062d874)
+
+
+### Breaking changes
+
+NA
+
+### Migration guide
+
+NA
+
+### Deprecations
+
+NA
+
+### Features
+
+- feat(a11y): add accessibility support in components (b8062d874)
+
+### Fixes
+
+
+### Improvements
+
+NA
+
+### Documentation
+
+NA
+
+---
+
 ## 4.19.2 (2026-02-12)
 
 ### Highlights

package/css/dist/index.css

@@ -138,6 +138,9 @@
   --accent4-lightest: var(--nimbu-lightest);
   --inverse-lightest: var(--night-lightest);
 
+  /* Focus */
+  --primary-focus: var(--jal-dark);
+
   /* Ultra Light */
   --primary-ultra-light: #eef6fc;
   --success-ultra-light: #ecf7f0;
@@ -1521,7 +1524,8 @@ body {
 }
 
 .Button:focus {
-  outline: 0;
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .Button--iconAlign-right {
@@ -1620,7 +1624,8 @@ body {
 }
 
 .Button--basic:focus {
-  box-shadow: var(--shadow-spread) var(--secondary-shadow);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .Button--basic:disabled {
@@ -1641,7 +1646,8 @@ body {
 }
 
 .Button--primary:focus {
-  box-shadow: var(--shadow-spread) var(--primary-shadow);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .Button--primary:disabled {
@@ -1661,7 +1667,8 @@ body {
 }
 
 .Button--success:focus {
-  box-shadow: var(--shadow-spread) var(--primary-shadow);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .Button--success:disabled {
@@ -1681,7 +1688,8 @@ body {
 }
 
 .Button--alert:focus {
-  box-shadow: var(--shadow-spread) var(--alert-shadow);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .Button--alert:disabled {
@@ -1698,7 +1706,8 @@ body {
 }
 
 .Button--transparent:focus {
-  box-shadow: var(--shadow-spread) var(--secondary-shadow);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .Button--transparent:active {
@@ -1721,12 +1730,13 @@ body {
 }
 
 .Button--selected {
-  background: var(--primary-lightest);
+  background: var(--primary-ultra-light);
   color: var(--primary-dark);
+  box-shadow: inset 0 0 0 2px var(--primary);
 }
 
 .Button--selected:hover {
-  background: var(--primary-lighter);
+  background: var(--primary-lightest);
 }
 
 .Button--selected:active {
@@ -1735,8 +1745,9 @@ body {
 }
 
 .Button--selected:focus {
-  background: var(--primary-lightest);
-  box-shadow: var(--shadow-spread) var(--primary-shadow);
+  background: var(--primary-ultra-light);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .Button--selected:focus:active {
@@ -1744,8 +1755,9 @@ body {
 }
 
 .Button--selected:disabled {
-  background: var(--primary-lightest);
+  background: var(--primary-ultra-light);
   color: var(--primary-lighter);
+  box-shadow: inset 0 0 0 2px var(--primary-lightest);
 }
 
 .Button-text--hidden {
@@ -1761,119 +1773,122 @@ body {
 /* outlined button styles */
 
 .Button-outlined--basic {
-  border: var(--border);
   color: var(--inverse);
   background: transparent;
+  box-shadow: inset 0 0 0 1px var(--secondary);
 }
 
 .Button-outlined--basic:hover {
   background: var(--secondary-lighter);
-  border: var(--border-width-2-5) solid var(--inverse-lightest);
+  box-shadow: inset 0 0 0 1px var(--inverse-lightest);
 }
 
 .Button-outlined--basic:active {
   background: var(--secondary);
-  border: var(--border-width-2-5) solid var(--inverse-lightest);
+  box-shadow: inset 0 0 0 1px var(--inverse-lightest);
 }
 
 .Button-outlined--basic:focus {
-  border: var(--border-width-2-5) solid var(--primary);
-  box-shadow: var(--shadow-spread) var(--primary-shadow);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .Button-outlined--basic:disabled {
   color: var(--inverse-lightest);
   background: transparent;
-  border: var(--border-width-2-5) solid var(--secondary);
+  box-shadow: inset 0 0 0 1px var(--secondary);
 }
 
 .Button-outlined--selected {
   background: var(--primary-ultra-light);
   color: var(--primary-dark);
-  border: var(--border-width-2-5) solid var(--primary-lighter);
+  box-shadow: inset 0 0 0 2px var(--primary);
 }
 
 .Button-outlined--selected:hover {
   background: var(--primary-lightest);
-  border: var(--border-width-2-5) solid var(--primary-lighter);
+  box-shadow: inset 0 0 0 2px var(--primary);
 }
 
 .Button-outlined--selected:active {
   background: var(--primary-lighter);
   color: var(--primary-darker);
-  border: var(--border-width-2-5) solid var(--primary);
+  box-shadow: inset 0 0 0 2px var(--primary);
 }
 
 .Button-outlined--selected:focus {
   color: var(--primary-dark);
-  border: var(--border-width-2-5) solid var(--primary);
-  box-shadow: var(--shadow-spread) var(--primary-shadow);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
+  box-shadow: inset 0 0 0 2px var(--primary);
 }
 
 .Button-outlined--selected:disabled {
   background: var(--primary-ultra-light);
   color: var(--primary-lighter);
-  border: var(--border-width-2-5) solid var(--primary-lightest);
+  box-shadow: inset 0 0 0 2px var(--primary-lightest);
 }
 
 .Button-outlined--primary {
   background: transparent;
-  border: var(--border-width-2-5) solid var(--primary);
+  box-shadow: inset 0 0 0 1px var(--primary);
   color: var(--primary);
   mix-blend-mode: multiply;
 }
 
 .Button-outlined--primary:hover {
   background: var(--primary-ultra-light);
-  border: var(--border-width-2-5) solid var(--primary-dark);
+  box-shadow: inset 0 0 0 1px var(--primary-dark);
   color: var(--primary-dark);
 }
 
 .Button-outlined--primary:active {
   background: var(--primary-lightest);
-  border: var(--border-width-2-5) solid var(--primary-dark);
+  box-shadow: inset 0 0 0 1px var(--primary-dark);
   color: var(--primary-dark);
 }
 
 .Button-outlined--primary:focus {
-  border: var(--border-width-2-5) solid var(--primary);
-  box-shadow: var(--shadow-spread) var(--primary-shadow);
+  box-shadow: inset 0 0 0 1px var(--primary);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .Button-outlined--primary:disabled {
   background: transparent;
   color: var(--primary-lighter);
-  border: var(--border-width-2-5) solid var(--primary-lighter);
+  box-shadow: inset 0 0 0 1px var(--primary-lighter);
 }
 
 .Button-outlined--alert {
   background: transparent;
-  border: var(--border-width-2-5) solid var(--alert);
+  box-shadow: inset 0 0 0 1px var(--alert);
   color: var(--alert);
   mix-blend-mode: multiply;
 }
 
 .Button-outlined--alert:hover {
   background: var(--alert-ultra-light);
-  border: var(--border-width-2-5) solid var(--alert-dark);
+  box-shadow: inset 0 0 0 1px var(--alert-dark);
   color: var(--alert-dark);
 }
 
 .Button-outlined--alert:active {
   background: var(--alert-lightest);
-  border: var(--border-width-2-5) solid var(--alert-dark);
+  box-shadow: inset 0 0 0 1px var(--alert-dark);
   color: var(--alert-dark);
 }
 
 .Button-outlined--alert:focus {
-  border: var(--border-width-2-5) solid var(--alert);
-  box-shadow: var(--shadow-spread) var(--alert-shadow);
+  box-shadow: inset 0 0 0 1px var(--alert);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .Button-outlined--alert:disabled {
   background: transparent;
   color: var(--alert-lighter);
-  border: var(--border-width-2-5) solid var(--alert-lighter);
+  box-shadow: inset 0 0 0 1px var(--alert-lighter);
 }
 
 /* calendar */
@@ -2563,22 +2578,23 @@ body {
   outline: 0;
 }
 
-.Checkbox-input ~ .Checkbox-wrapper--default {
-  border: var(--border-width-2-5) solid var(--secondary-dark);
-  background-color: var(--shadow-0);
+.Checkbox-input:focus ~ .Checkbox-wrapper {
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
-.Checkbox-input:focus ~ .Checkbox-wrapper--default {
-  box-shadow: var(--shadow-spread) var(--secondary-shadow);
+.Checkbox-input ~ .Checkbox-wrapper--default {
+  border: var(--border-width-2-5) solid var(--inverse-lighter);
+  background-color: var(--shadow-0);
 }
 
 .Checkbox-input:hover ~ .Checkbox-wrapper--default {
-  border: var(--border-width-2-5) solid var(--inverse-lightest);
-  background-color: var(--shadow-0);
+  border: var(--border-width-2-5) solid var(--inverse-light);
+  background-color: var(--secondary-lighter);
 }
 
 .Checkbox-input:active ~ .Checkbox-wrapper--default {
-  border: var(--border-width-2-5) solid var(--inverse-lightest);
+  border: var(--border-width-2-5) solid var(--inverse-light);
   background-color: var(--secondary-light);
 }
 
@@ -2587,7 +2603,7 @@ body {
 }
 
 .Checkbox--disabled .Checkbox-wrapper--default {
-  border: var(--border-width-2-5) solid var(--secondary-light);
+  border: var(--border-width-2-5) solid var(--secondary);
   background-color: var(--secondary-lightest);
 }
 
@@ -2601,7 +2617,6 @@ body {
 
 .Checkbox-input--checked:focus ~ .Checkbox-wrapper,
 .Checkbox-input--indeterminate:focus ~ .Checkbox-wrapper {
-  box-shadow: var(--shadow-spread) var(--primary-shadow);
   background-color: var(--primary);
   border: 0;
 }
@@ -2630,10 +2645,6 @@ body {
   border: var(--border-width-2-5) solid var(--alert);
 }
 
-.Checkbox-input:focus ~ .Checkbox-wrapper--error {
-  box-shadow: var(--shadow-spread) var(--alert-shadow);
-}
-
 .Checkbox-input:hover ~ .Checkbox-wrapper--error {
   border: var(--border-width-2-5) solid var(--alert-dark);
 }
@@ -2658,7 +2669,6 @@ body {
 .Checkbox-input--checked:focus ~ .Checkbox-wrapper--error,
 .Checkbox-input--indeterminate:focus ~ .Checkbox-wrapper--error {
   border: var(--border-width-2-5) solid var(--alert);
-  box-shadow: var(--shadow-spread) var(--primary-shadow);
 }
 
 .Checkbox-input--checked:hover ~ .Checkbox-wrapper--error,
@@ -7450,7 +7460,7 @@ body {
 }
 
 .Radio-defaultWrapper {
-  border: var(--border);
+  border: var(--border-width-2-5) solid var(--inverse-lighter);
 }
 
 .Radio-errorWrapper {
@@ -7509,13 +7519,13 @@ body {
 }
 
 .Radio:hover .Radio-wrapper {
-  border: var(--border-width-2-5) solid var(--secondary-dark);
+  border: var(--border-width-2-5) solid var(--inverse-light);
   background-color: var(--secondary-lighter);
 }
 
 .Radio:active .Radio-wrapper {
   background-color: var(--secondary-light);
-  border: var(--border-width-2-5) solid var(--inverse-lightest);
+  border: var(--border-width-2-5) solid var(--inverse-light);
 }
 
 .Radio:hover .Radio-errorWrapper {
@@ -7531,29 +7541,27 @@ body {
 }
 
 .Radio:focus-within .Radio-wrapper {
-  outline: 0;
-  box-shadow: var(--shadow-spread) var(--secondary-shadow);
-  border-radius: var(--border-radius-full);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .Radio:focus-within .Radio-errorWrapper {
-  outline: 0;
-  box-shadow: var(--shadow-spread) var(--alert-shadow);
-  border-radius: var(--border-radius-full);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .Radio:focus-within .Radio-input:checked ~ .Radio-wrapper {
-  outline: 0;
-  box-shadow: var(--shadow-spread) var(--primary-shadow);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .Radio:focus-within .Radio-input:checked ~ .Radio-errorWrapper {
-  outline: 0;
-  box-shadow: var(--shadow-spread) var(--primary-shadow);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .Radio--disabled .Radio-wrapper {
-  border: var(--border-width-2-5) solid var(--secondary-light);
+  border: var(--border-width-2-5) solid var(--secondary);
   background-color: var(--secondary-lightest);
 }
 
@@ -7643,11 +7651,11 @@ body {
 }
 
 .Radio--disabled .Radio-input ~ .Radio-wrapper:focus {
-  box-shadow: none;
+  outline: none;
 }
 
 .Radio--disabled .Radio-input ~ .Radio-errorWrapper:focus {
-  box-shadow: none;
+  outline: none;
 }
 
 .SegmentedControl {
@@ -7972,9 +7980,7 @@ body {
 }
 
 .Select-trigger--filled:focus {
-  border: var(--border-width-2-5) solid var(--primary);
   background-color: var(--secondary-light);
-  box-shadow: var(--shadow-spread) var(--primary-shadow);
 }
 
 /* styleType Outlined */
@@ -7991,11 +7997,6 @@ body {
   border: var(--border-width-2-5) solid var(--secondary-dark);
 }
 
-.Select-trigger--outlined:focus {
-  border: var(--border-width-2-5) solid var(--primary);
-  box-shadow: var(--shadow-spread) var(--primary-shadow);
-}
-
 .Select-trigger--outlined:active,
 .Select-trigger--outlinedOpen {
   color: var(--inverse) !important;
@@ -8127,7 +8128,6 @@ body {
 
 .Select-trigger--error {
   border: var(--border-width-2-5) solid var(--alert) !important;
-  box-shadow: var(--shadow-spread) var(--alert-shadow);
 }
 
 .Selection-card {
@@ -8509,11 +8509,11 @@ body {
 }
 
 .Circle--primary {
-  stroke: var(--primary);
+  stroke: var(--primary-dark);
 }
 
 .Circle--secondary {
-  stroke: var(--secondary-dark);
+  stroke: var(--inverse-lighter);
 }
 
 .Circle--white {
@@ -8521,7 +8521,7 @@ body {
 }
 
 .Circle--alert {
-  stroke: var(--alert);
+  stroke: var(--alert-dark);
 }
 
 .StatusHint {