@innovaccer/design-system 4.24.0 → 4.25.0

package/dist/index.umd.css

@@ -3628,6 +3628,10 @@ body {
   border-bottom: none;
 }
 
+.PageHeader-bottom--withTabs {
+  margin-top: var(--spacing-30);
+}
+
 .PageHeader .Row {
   width: 100%;
 }
@@ -3655,16 +3659,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 {
@@ -3679,6 +3678,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;
+  }
+}
+
 /* breadcrumbs */
 
 .Breadcrumbs {
@@ -5066,9 +5161,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;
@@ -5082,11 +5174,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 {
@@ -5094,6 +5184,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;
@@ -5127,7 +5240,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);
 }
@@ -5155,7 +5268,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);
 }
@@ -5184,7 +5297,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);
 }
@@ -5225,7 +5338,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);
 }
@@ -5275,14 +5388,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;
 }
 
@@ -6752,6 +6865,16 @@ body {
   }
 }
 
+.DatePicker-content {
+  display: flex;
+}
+
+@media (max-width: 576px) {
+  .DatePicker-content {
+    flex-direction: column;
+  }
+}
+
 .TimePicker-trigger {
   width: calc(var(--spacing-40) * 20);
   min-width: calc(var(--spacing-40) * 16);
@@ -7358,6 +7481,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 {
@@ -10089,8 +10213,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);
 }
@@ -10108,8 +10231,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);
@@ -10129,8 +10251,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);
 }
@@ -10166,8 +10287,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;
   }
@@ -11011,6 +11131,11 @@ body {
 }
 
 @media (max-width: 576px) {
+  .DateRangePicker--left,
+  .DateRangePicker--right {
+    flex-direction: column;
+  }
+
   .DateRangePicker-input {
     padding: 0;
   }