@innovaccer/design-system 4.24.0 → 4.25.0

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

@@ -2,9 +2,6 @@
   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: fit-content;
   justify-content: space-between;
   border-style: solid;
@@ -17,11 +14,9 @@
 
 .Chip-size--regular {
   height: var(--spacing-60);
-  padding-left: var(--spacing-20);
 }
 .Chip-size--small {
   height: 20px;
-  padding-left: var(--spacing-15);
 }
 
 .Chip-wrapper {
@@ -29,6 +24,29 @@
   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;
@@ -62,7 +80,7 @@
   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);
 }
@@ -90,7 +108,7 @@
   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);
 }
@@ -119,7 +137,7 @@
   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);
 }
@@ -160,7 +178,7 @@
   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);
 }
@@ -210,14 +228,14 @@
   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;
 }
 

package/css/src/components/datePicker.module.css

@@ -0,0 +1,9 @@
+.DatePicker-content {
+  display: flex;
+}
+
+@media (max-width: 576px) {
+  .DatePicker-content {
+    flex-direction: column;
+  }
+}

package/css/src/components/dateRangePicker.module.css

@@ -23,6 +23,11 @@
 }
 
 @media (max-width: 576px) {
+  .DateRangePicker--left,
+  .DateRangePicker--right {
+    flex-direction: column;
+  }
+
   .DateRangePicker-input {
     padding: 0;
   }

package/css/src/components/horizontalNav.module.css

@@ -27,8 +27,7 @@
   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);
 }
@@ -46,8 +45,7 @@
   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);
@@ -67,8 +65,7 @@
   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);
 }
@@ -104,8 +101,7 @@
   }
 
   .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;
   }

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

@@ -149,6 +149,7 @@
   cursor: pointer;
   color: var(--inverse-lighter);
   border-radius: var(--border-radius-full);
+  box-sizing: content-box;
 }
 
 .Input-iconWrapper--right:focus-visible .Input-icon--right {

package/css/src/components/pageHeader.module.css

@@ -14,6 +14,10 @@
   border-bottom: none;
 }
 
+.PageHeader-bottom--withTabs {
+  margin-top: var(--spacing-30);
+}
+
 .PageHeader .Row {
   width: 100%;
 }
@@ -41,16 +45,11 @@
 }
 
 .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 {
@@ -64,3 +63,99 @@
   justify-content: flex-end;
   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;
+  }
+}