@innovaccer/design-system 4.24.0 → 4.25.0

package/CHANGELOG.md

@@ -1,3 +1,42 @@
+## 4.25.0 (2026-05-19)
+
+### Highlights
+
+- Added responsive behavior to PageHeader and DatePicker patterns; improved Table interactions and refined a11y across Chip, Input, and Header components.
+
+### Breaking changes
+
+NA
+
+### Migration guide
+
+NA
+
+### Deprecations
+
+NA
+
+### Features
+
+- feat(table): update dropdown single click dragging movement in table component (da364d866)
+- feat(pageheader): add responsive behavior for pageheader component (3a95c6c3e)
+
+### Fixes
+
+- fix(input): update alignment of input clear icon (7f85ab1e3)
+- fix(chip): update a11y role for chip component (3f943673f)
+- fix(table): update table resizable behaviour (4cbe3b253)
+- fix(pattern): add responsive behavior in datepicker story pattern (4add940d5)
+- fix(header): update heading hierarchy (eb7cbc1e0)
+- fix(chip): update a11y attributes for nested interactive elements (6768fcc40)
+- fix(chip): update a11y attributes for nested interactive elements (eb172bd7d)
+
+### Improvements
+
+- style(icons): change stroke color from #DD2D38 to #CA1822 in AISparkle (4bebed62e)
+
+---
+
 ## 4.24.0 (2026-04-24)
 
 ### Highlights

package/css/dist/index.css

@@ -3459,9 +3459,6 @@ body {
   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: -moz-fit-content;
   width: fit-content;
   justify-content: space-between;
@@ -3475,11 +3472,9 @@ body {
 
 .Chip-size--regular {
   height: var(--spacing-60);
-  padding-left: var(--spacing-20);
 }
 .Chip-size--small {
   height: 20px;
-  padding-left: var(--spacing-15);
 }
 
 .Chip-wrapper {
@@ -3487,6 +3482,29 @@ body {
   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;
@@ -3520,7 +3538,7 @@ body {
   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);
 }
@@ -3548,7 +3566,7 @@ body {
   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);
 }
@@ -3577,7 +3595,7 @@ body {
   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);
 }
@@ -3618,7 +3636,7 @@ body {
   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);
 }
@@ -3668,14 +3686,14 @@ body {
   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;
 }
 
@@ -4309,6 +4327,16 @@ body {
   }
 }
 
+.DatePicker-content {
+  display: flex;
+}
+
+@media (max-width: 576px) {
+  .DatePicker-content {
+    flex-direction: column;
+  }
+}
+
 .DateRangePicker {
   display: flex;
 }
@@ -4334,6 +4362,11 @@ body {
 }
 
 @media (max-width: 576px) {
+  .DateRangePicker--left,
+  .DateRangePicker--right {
+    flex-direction: column;
+  }
+
   .DateRangePicker-input {
     padding: 0;
   }
@@ -6193,8 +6226,7 @@ body {
   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);
 }
@@ -6212,8 +6244,7 @@ body {
   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);
@@ -6233,8 +6264,7 @@ body {
   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);
 }
@@ -6270,8 +6300,7 @@ body {
   }
 
   .HorizontalNav-menu--active:active,
-  .HorizontalNav-menu--active:focus-visible:active,
-  .HorizontalNav-menu--active:focus:active {
+  .HorizontalNav-menu--active:focus-visible:active {
     border-color: Highlight;
     box-shadow: none;
   }
@@ -6660,6 +6689,7 @@ body {
   cursor: pointer;
   color: var(--inverse-lighter);
   border-radius: var(--border-radius-full);
+  box-sizing: content-box;
 }
 
 .Input-iconWrapper--right:focus-visible .Input-icon--right {
@@ -8444,6 +8474,10 @@ body {
   border-bottom: none;
 }
 
+.PageHeader-bottom--withTabs {
+  margin-top: var(--spacing-30);
+}
+
 .PageHeader .Row {
   width: 100%;
 }
@@ -8471,16 +8505,11 @@ body {
 }
 
 .PageHeader-navigationWrapper {
-  margin-top: var(--spacing-10);
+  margin-top: var(--spacing-30);
 }
 
-.PageHeader .PageHeader-navigationWrapper {
-  justify-content: center;
-  align-items: center;
-  margin-top: 0 !important;
-  padding-right: var(--spacing-20);
-  padding-left: var(--spacing-20);
-  display: flex;
+.PageHeader-navigationWrapper--noMargin {
+  margin-top: 0;
 }
 
 .PageHeader-title {
@@ -8495,6 +8524,102 @@ body {
   padding-left: var(--spacing-20);
 }
 
+/* =====================================================
+   Responsive main header row
+   ===================================================== */
+
+/* Base: flex layout — used by all variants */
+.PageHeader-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: start;
+  width: 100%;
+}
+
+.PageHeader-group--title {
+  flex: 1 1 auto;
+  min-width: 0;
+  order: 1;
+}
+
+/* Center-nav group — navigation/stepper in center position */
+.PageHeader-group--center {
+  flex: 0 0 auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0 var(--spacing-20);
+  min-width: 0;
+  order: 2;
+}
+
+/* Actions / right-side group */
+.PageHeader-group--actions {
+  flex: 0 0 auto;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  align-items: center;
+  padding-left: var(--spacing-20);
+  row-gap: var(--spacing-30);
+  order: 3;
+}
+
+/* Default (full): CSS Grid for true 3-col centering */
+.PageHeader-row--withCenter {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  align-items: start;
+}
+
+/* Ghost: center nav stays in the grid for measurement but is invisible and out of flow.
+   Used when collision detection moves the nav to PageHeader-bottom. */
+.PageHeader-group--center--ghost {
+  position: absolute;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+/* All stacked: flex marker on the row + full-width children */
+.PageHeader-row--allStacked {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.PageHeader-group--title--stacked {
+  flex: 0 0 100%;
+  order: 1;
+}
+
+.PageHeader-group--actions--stacked {
+  flex: 0 0 100%;
+  order: 2;
+  padding-left: 0;
+  padding-top: var(--spacing-10);
+  justify-content: flex-start;
+}
+
+/* =====================================================
+   Level 1: inter-section spacing when right group wraps
+   ===================================================== */
+
+/* At < 576 px, the actions group sits between title and nav/stepper/tabs.
+   For level 1 headers that have actions, increase the gap to 12 px so all
+   three sections (title, actions, nav) have consistent breathing room. */
+@media (max-width: 575px) {
+  .PageHeader-group--actions--level1Responsive {
+    padding-top: var(--spacing-30);
+  }
+
+  .PageHeader-bottom--level1Responsive {
+    margin-top: var(--spacing-30);
+  }
+
+  .PageHeader-navigationWrapper--noMarginSm {
+    margin-top: 0;
+  }
+}
+
 /* pagination */
 
 .Pagination {