@ivds/core 0.1.1 → 1.0.0

package/lib/components/footer/footer.min.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/footer/footer.scss%23sass","../../../src/components/footer/_footer-mixin.scss","../../../src/components/footer/footer.scss","../../../src/base/_focus.scss"],"names":[],"mappings":"AAMA,aCCE,qDAAA,CCHF,6BDIE,CACA,kCAAA,CAIA,wCAAA,CAGA,wCAAA,CAFA,kBAAA,CACA,0DAAA,CAHA,4EAAA,CCNF,iBAMA,CDME,+CDZF,aCaI,+ECHF,CACF,CFPE,mBCcA,YAAA,CAEA,4BAAA,CADA,6CAAA,CAEA,sCCJF,CDME,+CDnBA,mBCqBE,yBAAA,CCLF,6CAEA,CACF,CDKE,8CDxBA,mBCyBE,yBCFF,CACF,CFpBE,oBC0BA,YAAA,CACA,qBAAA,CACA,2BCHF,CDKE,yBCHF,WAAA,CDMI,qBAAA,CAAA,kBAAA,CADA,UCFJ,CDME,gCAEE,2BAAA,CACA,oCAAA,CACA,2CAAA,CAHA,eCDJ,CFhCE,sBCyCA,YAAA,CACA,qBAAA,CACA,yBCNF,CDQE,4BAEE,2BAAA,CACA,mCAAA,CACA,0CAAA,CAEA,oBAAA,CALA,QAAA,CAIA,wBCLJ,CDSE,2BACE,YAAA,CACA,0BAAA,CACA,eAAA,CACA,QAAA,CACA,SCPJ,CDUE,2BACE,2BAAA,CACA,oCAAA,CACA,wCAAA,CACA,oBAAA,CACA,0ECRJ,CDUI,iCACE,UAAA,CACA,yBAAA,CACA,6BAAA,CACA,2BCRN,CC9EE,yCAGE,eAAA,CAFA,iHAAA,CACA,gDDiFJ,CC7EE,qDAEE,eAAA,CADA,YDgFJ,CFtEE,qBC6EA,YAAA,CACA,cAAA,CACA,0BCJF,CDME,0BAEE,kBAAA,CAOA,4BAAA,CAHA,oCAAA,CACA,0CAAA,CACA,2BAAA,CAPA,mBAAA,CAIA,WAAA,CAFA,sBAAA,CAOA,4NACE,CAPF,UCEJ,CDSI,gCACE,oCAAA,CACA,gCAAA,CACA,UCPN,CC7GE,wCAGE,eAAA,CAFA,iHAAA,CACA,gDDgHJ,CC5GE,oDAEE,eAAA,CADA,YD+GJ,CDGI,8BAEE,WAAA,CADA,UCAN,CFrGE,qBC6GA,kBAAA,CAIA,wCAAA,CACA,2BAAA,CANA,YAAA,CAOA,mCAAA,CAJA,yBAAA,CADA,6BAAA,CAEA,mCCDF,CDME,8CDrHA,qBCuHE,sBAAA,CADA,qBCFF,CACF,CDKE,2BACE,YAAA,CACA,cAAA,CACA,yBCHJ,CDKI,6BACE,aAAA,CACA,oBCHN,CDKM,mCACE,UAAA,CACA,yBAAA,CACA,6BAAA,CACA,2BCHR,CCzJE,2CAGE,eAAA,CAFA,iHAAA,CACA,gDD4JJ,CCxJE,uDAEE,eAAA,CADA,YD2JJ,CFxIE,oBC2IA,gDAAA,CACA,0CAAA,CACA,gDCAF,CDEE,gDACE,sCCAJ,CDGE,+CACE,wCCDJ,CDGI,qDACE,2CCDN,CDKE,8CACE,8CAAA,CACA,wCCHJ,CDKI,oDAEE,qDAAA,CADA,kDAAA,CAEA,2CCHN,CDOE,yCACE,kDAAA,CACA,oCCLJ,CF9JE,wBAGE,aAAA,CADA,2CAAA,CADA,UEkKJ","file":"footer.min.css","sourcesContent":["// Footer component styles\r\n// Core styling for the IVDS footer including grid layouts, brand identity, and social links\r\n/* stylelint-disable no-descending-specificity */\r\n\r\n@use '_footer-mixin' as footer;\r\n\r\n.ivds-footer {\r\n  @include footer.footer-base;\r\n  \r\n  // Elements\r\n  &__grid {\r\n    @include footer.footer-grid;\r\n  }\r\n  \r\n  &__brand {\r\n    @include footer.footer-brand;\r\n  }\r\n  \r\n  &__section {\r\n    @include footer.footer-section;\r\n  }\r\n  \r\n  &__social {\r\n    @include footer.footer-social;\r\n  }\r\n  \r\n  &__bottom {\r\n    @include footer.footer-bottom;\r\n  }\r\n  \r\n  // Variants\r\n  &--light {\r\n    @include footer.footer-light;\r\n  }\r\n\r\n  // Nested container support\r\n  &__container {\r\n    width: 100%;\r\n    max-width: var(--container-max-width, 1440px);\r\n    margin: 0 auto;\r\n  }\r\n}","// Footer component mixins and private styles\n/* stylelint-disable no-descending-specificity */\n\n@use '../../base/focus' as *;\n\n@mixin footer-base {\n  // Per-component CSS variable API\n  --background-color: var(--ivds-surface-strong, #121a24);\n  --color: rgba(246, 248, 251, 0.88);\n  --border-color: rgba(255, 255, 255, 0.12);\n\n  position: relative;\n  padding: var(--spacing-12, 3rem) var(--spacing-8, 2rem) var(--spacing-6, 1.5rem);\n  background-color: var(--background-color);\n  color: var(--color);\n  font-family: var(--fontFamily-primary, system-ui, sans-serif);\n  border-top: 1px solid var(--border-color);\n\n  @media (max-width: var(--breakpoint-lg, 1024px)) {\n    padding: var(--spacing-10, 2.5rem) var(--spacing-4, 1rem) var(--spacing-5, 1.25rem);\n  }\n}\n\n@mixin footer-grid($columns: 4) {\n  display: grid;\n  grid-template-columns: repeat($columns, minmax(0, 1fr));\n  gap: var(--spacing-10, 2.5rem);\n  margin-bottom: var(--spacing-10, 2.5rem);\n\n  @media (max-width: var(--breakpoint-lg, 1024px)) {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n    gap: var(--spacing-8, 2rem);\n  }\n\n  @media (max-width: var(--breakpoint-sm, 640px)) {\n    grid-template-columns: 1fr;\n  }\n}\n\n@mixin footer-brand {\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-3, 0.75rem);\n\n  &-logo {\n    height: 38px;\n    width: auto;\n    object-fit: contain;\n  }\n\n  &-description {\n    max-width: 340px;\n    color: rgba(246, 248, 251, 0.78);\n    font-size: var(--fontSize-sm, 0.875rem);\n    line-height: var(--lineHeight-relaxed, 1.625);\n  }\n}\n\n@mixin footer-section {\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-4, 1rem);\n\n  &-title {\n    margin: 0;\n    color: rgba(246, 248, 251, 0.96);\n    font-size: var(--fontSize-xs, 0.75rem);\n    font-weight: var(--fontWeight-semibold, 600);\n    text-transform: uppercase;\n    letter-spacing: 0.08em;\n  }\n\n  &-list {\n    display: grid;\n    gap: var(--spacing-2, 0.5rem);\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n\n  &-link {\n    color: rgba(246, 248, 251, 0.78);\n    font-size: var(--fontSize-sm, 0.875rem);\n    font-weight: var(--fontWeight-normal, 400);\n    text-decoration: none;\n    transition: color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);\n\n    &:hover {\n      color: #fff;\n      text-decoration: underline;\n      text-decoration-thickness: 2px;\n      text-underline-offset: 0.12em;\n    }\n\n    @include focus-ring;\n  }\n}\n\n@mixin footer-social {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--spacing-2, 0.5rem);\n\n  &-link {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 36px;\n    height: 36px;\n    border: 1px solid rgba(255, 255, 255, 0.32);\n    border-radius: var(--ivds-radius-s, 0.125rem);\n    color: rgba(246, 248, 251, 0.92);\n    background-color: transparent;\n    transition:\n      background-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease),\n      border-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease),\n      color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);\n\n    &:hover {\n      background-color: rgba(255, 255, 255, 0.09);\n      border-color: rgba(255, 255, 255, 0.45);\n      color: #fff;\n    }\n\n    @include focus-ring;\n\n    svg {\n      width: 18px;\n      height: 18px;\n    }\n  }\n}\n\n@mixin footer-bottom {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--spacing-4, 1rem);\n  padding-top: var(--spacing-6, 1.5rem);\n  border-top: 1px solid rgba(255, 255, 255, 0.16);\n  color: rgba(246, 248, 251, 0.74);\n  font-size: var(--fontSize-xs, 0.75rem);\n\n  @media (max-width: var(--breakpoint-md, 768px)) {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  &-links {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--spacing-4, 1rem);\n\n    a {\n      color: inherit;\n      text-decoration: none;\n\n      &:hover {\n        color: #fff;\n        text-decoration: underline;\n        text-decoration-thickness: 2px;\n        text-underline-offset: 0.12em;\n      }\n\n      @include focus-ring;\n    }\n  }\n}\n\n@mixin footer-light {\n  --background-color: var(--ivds-surface-base, #fff);\n  --color: var(--ivds-text-secondary, #36414f);\n  --border-color: var(--ivds-border-subtle, #e2e7ec);\n\n  .ivds-footer__section-title {\n    color: var(--ivds-text-primary, #121a24);\n  }\n\n  .ivds-footer__section-link {\n    color: var(--ivds-text-secondary, #36414f);\n\n    &:hover {\n      color: var(--color-brand-accent-700, #0b4593);\n    }\n  }\n\n  .ivds-footer__social-link {\n    border-color: var(--ivds-border-strong, #a1adba);\n    color: var(--ivds-text-secondary, #36414f);\n\n    &:hover {\n      border-color: var(--color-brand-accent-600, #1058b8);\n      background-color: var(--color-brand-accent-50, #eef4ff);\n      color: var(--color-brand-accent-700, #0b4593);\n    }\n  }\n\n  .ivds-footer__bottom {\n    border-top-color: var(--ivds-border-subtle, #e2e7ec);\n    color: var(--ivds-text-muted, #4d5968);\n  }\n}\n","// Footer component styles\r\n// Core styling for the IVDS footer including grid layouts, brand identity, and social links\r\n/* stylelint-disable no-descending-specificity */\r\n\r\n@use '_footer-mixin' as footer;\r\n\r\n.ivds-footer {\r\n  @include footer.footer-base;\r\n  \r\n  // Elements\r\n  &__grid {\r\n    @include footer.footer-grid;\r\n  }\r\n  \r\n  &__brand {\r\n    @include footer.footer-brand;\r\n  }\r\n  \r\n  &__section {\r\n    @include footer.footer-section;\r\n  }\r\n  \r\n  &__social {\r\n    @include footer.footer-social;\r\n  }\r\n  \r\n  &__bottom {\r\n    @include footer.footer-bottom;\r\n  }\r\n  \r\n  // Variants\r\n  &--light {\r\n    @include footer.footer-light;\r\n  }\r\n\r\n  // Nested container support\r\n  &__container {\r\n    width: 100%;\r\n    max-width: var(--container-max-width, 1440px);\r\n    margin: 0 auto;\r\n  }\r\n}","// Unified focus ring mixin\n// Uses outline instead of box-shadow to avoid conflicts with elevated components (Card, Modal).\n// Inspired by Helsinki Design System: 3px solid outline with 2px offset.\n\n@mixin focus-ring($offset: var(--ivds-focus-ring-offset, 2px), $width: var(--ivds-focus-ring-width, 3px), $color: var(--ivds-focus-ring-color, var(--color-brand-accent-600, #1058b8))) {\n  &:focus-visible {\n    outline: #{$width} solid #{$color};\n    outline-offset: #{$offset};\n    box-shadow: none;\n  }\n\n  &:focus:not(:focus-visible) {\n    outline: none;\n    box-shadow: none;\n  }\n}\n\n// Variant for components where the focus indicator is on a sibling element\n// (e.g., checkbox input:focus-visible + .checkbox__box)\n@mixin focus-ring-on-sibling($selector, $offset: var(--ivds-focus-ring-offset, 2px), $width: var(--ivds-focus-ring-width, 3px), $color: var(--ivds-focus-ring-color, var(--color-brand-accent-600, #1058b8))) {\n  &:focus-visible + #{$selector} {\n    outline: #{$width} solid #{$color};\n    outline-offset: #{$offset};\n    box-shadow: none;\n  }\n\n  &:focus:not(:focus-visible) + #{$selector} {\n    outline: none;\n    box-shadow: none;\n  }\n}\n"]}

package/lib/components/header/_header-mixin.scss

@@ -0,0 +1,208 @@
+// Header component mixins and private styles
+/* stylelint-disable no-descending-specificity */
+
+@use '../../base/focus' as *;
+
+@mixin header-base {
+  // Per-component CSS variable API
+  --background-color: var(--ivds-surface-base, #fff);
+  --color: var(--ivds-text-primary, #121a24);
+  --border-color: var(--ivds-border-subtle, #e2e7ec);
+  --height: 74px;
+  --height-mobile: 66px;
+  --logo-max-height: 34px;
+  --padding-block: var(--spacing-4, 1rem);
+  --padding-inline: var(--spacing-8, 2rem);
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: var(--height);
+  padding: var(--padding-block) var(--padding-inline);
+  background-color: var(--background-color);
+  border-bottom: 2px solid var(--border-color);
+  position: relative;
+  z-index: 100;
+  transition:
+    background-color var(--ivds-motion-normal, 250ms) var(--ivds-motion-ease, ease),
+    box-shadow var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);
+
+  @media (max-width: var(--breakpoint-lg, 1024px)) {
+    min-height: var(--height-mobile);
+    padding: var(--spacing-3, 0.75rem) var(--spacing-4, 1rem);
+  }
+}
+
+@mixin header-sticky {
+  position: sticky;
+  top: 0;
+  box-shadow: var(--ivds-shadow-md);
+}
+
+@mixin header-glass {
+  background-color: var(--ivds-surface-base, #fff);
+}
+
+@mixin header-scrolled {
+  box-shadow: var(--ivds-shadow-md);
+}
+
+@mixin header-brand {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-3, 0.75rem);
+  text-decoration: none;
+  color: var(--ivds-text-primary);
+  flex-shrink: 0;
+
+  &-logo {
+    height: var(--logo-max-height, 34px);
+    width: auto;
+    object-fit: contain;
+  }
+
+  &-text {
+    color: inherit;
+    font-size: var(--fontSize-xl, 1.25rem);
+    font-weight: var(--fontWeight-semibold, 600);
+    letter-spacing: -0.01em;
+    line-height: 1.15;
+  }
+}
+
+@mixin header-nav {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2, 0.5rem);
+
+  @media (max-width: var(--breakpoint-lg, 1024px)) {
+    display: none;
+  }
+
+  a {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    min-height: 48px;
+    padding: var(--spacing-2, 0.5rem) var(--spacing-2, 0.5rem);
+    border-radius: 0;
+    border-bottom: 3px solid transparent;
+    color: var(--ivds-text-secondary);
+    font-size: var(--fontSize-base, 1rem);
+    font-weight: var(--fontWeight-medium, 500);
+    text-decoration: none;
+    transition:
+      color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease),
+      border-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);
+
+    &:hover {
+      color: var(--ivds-text-primary);
+      border-color: var(--ivds-border-strong, #a1adba);
+    }
+
+    @include focus-ring;
+
+    &.ivds-header__nav-item--active {
+      color: var(--color-brand-accent-700, #0b4593);
+      border-color: var(--color-brand-accent-600, #1058b8);
+      font-weight: var(--fontWeight-semibold, 600);
+    }
+  }
+}
+
+@mixin header-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3, 0.75rem);
+}
+
+@mixin header-mobile-toggle {
+  display: none;
+
+  @media (max-width: var(--breakpoint-lg, 1024px)) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 48px;
+    height: 48px;
+    border: 2px solid var(--ivds-border-strong, #a1adba);
+    border-radius: var(--ivds-radius-s, 0.125rem);
+    background: var(--ivds-surface-base, #fff);
+    color: var(--ivds-text-primary);
+    cursor: pointer;
+
+    &:hover {
+      border-color: var(--color-brand-accent-600, #1058b8);
+      color: var(--color-brand-accent-700, #0b4593);
+    }
+
+    @include focus-ring;
+  }
+}
+
+@mixin header-dark {
+  --background-color: var(--ivds-surface-strong, #121a24);
+  --border-color: var(--ivds-border-subtle, #283443);
+
+  .ivds-header__brand-text {
+    color: var(--ivds-text-on-strong, #fff);
+  }
+
+  .ivds-header__nav a {
+    color: var(--ivds-text-muted, rgba(255, 255, 255, 0.82));
+
+    &:hover {
+      color: var(--ivds-text-on-strong, #fff);
+      border-color: var(--ivds-border-strong, rgba(255, 255, 255, 0.35));
+    }
+
+    &.ivds-header__nav-item--active {
+      color: var(--ivds-text-on-strong, #fff);
+      border-color: var(--color-brand-accent-400, #5a93f5);
+    }
+  }
+
+  .ivds-header__mobile-toggle {
+    background: transparent;
+    border-color: var(--ivds-border-strong, rgba(255, 255, 255, 0.35));
+    color: var(--ivds-text-on-strong, #fff);
+  }
+}
+
+@mixin header-universal-bar {
+  padding: var(--spacing-2, 0.5rem) var(--spacing-8, 2rem);
+  background-color: var(--ivds-surface-muted);
+  border-bottom: 1px solid var(--ivds-border-subtle);
+  color: var(--ivds-text-secondary);
+  font-size: var(--fontSize-xs, 0.75rem);
+
+  .ivds-header__container {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    gap: var(--spacing-5, 1.25rem);
+  }
+
+  a {
+    color: inherit;
+    font-weight: var(--fontWeight-medium, 500);
+    text-decoration: none;
+
+    &:hover {
+      color: var(--color-brand-accent-700, #0b4593);
+    }
+  }
+}
+
+@mixin header-action-bar {
+  padding: var(--spacing-3, 0.75rem) var(--spacing-8, 2rem);
+  background-color: var(--ivds-surface-base);
+  border-bottom: 1px solid var(--ivds-border-subtle);
+
+  .ivds-header__container {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--spacing-3, 0.75rem);
+  }
+}

package/lib/components/header/header.css

@@ -1,274 +1,201 @@
-/* Header component styles*/
-/* Provides styling for the IVDS header component with layout and branding mixins*/
+/* stylelint-disable no-descending-specificity */
+/* stylelint-disable no-descending-specificity */
 .ivds-header {
+  --background-color: var(--ivds-surface-base, #fff);
+  --color: var(--ivds-text-primary, #121a24);
+  --border-color: var(--ivds-border-subtle, #e2e7ec);
+  --height: 74px;
+  --height-mobile: 66px;
+  --logo-max-height: 34px;
+  --padding-block: var(--spacing-4, 1rem);
+  --padding-inline: var(--spacing-8, 2rem);
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: var(--spacing-4, 1rem) var(--spacing-6, 1.5rem);
-  background-color: var(--color-semantic-neutral-25, #fcfcfd);
-  border-bottom: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-200, #e2e8f0);
-  min-height: 64px;
+  min-height: var(--height);
+  padding: var(--padding-block) var(--padding-inline);
+  background-color: var(--background-color);
+  border-bottom: 2px solid var(--border-color);
   position: relative;
-  z-index: 10;
-  justify-content: space-between;
-  gap: var(--spacing-6, 1.5rem);
+  z-index: 100;
+  transition: background-color var(--ivds-motion-normal, 250ms) var(--ivds-motion-ease, ease), box-shadow var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);
 }
-@media (max-width: 768px) {
+@media (max-width: var(--breakpoint-lg, 1024px)) {
   .ivds-header {
-    flex-wrap: wrap;
+    min-height: var(--height-mobile);
     padding: var(--spacing-3, 0.75rem) var(--spacing-4, 1rem);
-    min-height: 56px;
   }
 }
-.ivds-header {
-  /* Brand area*/
-}
 .ivds-header__brand {
-  display: flex;
+  display: inline-flex;
   align-items: center;
+  gap: var(--spacing-3, 0.75rem);
+  text-decoration: none;
+  color: var(--ivds-text-primary);
   flex-shrink: 0;
 }
 .ivds-header__brand-logo {
-  height: 2rem;
+  height: var(--logo-max-height, 34px);
   width: auto;
-  margin-right: var(--spacing-3, 0.75rem);
-}
-@media (max-width: 768px) {
-  .ivds-header__brand-logo {
-    height: calc(2rem * 0.875);
-    margin-right: var(--spacing-2, 0.5rem);
-  }
+  -o-object-fit: contain;
+     object-fit: contain;
 }
 .ivds-header__brand-text {
-  font-size: var(--fontSize-lg, 1.125rem);
-  font-weight: var(--fontWeight-bold, 700);
-  color: var(--color-semantic-neutral-900, #0f172a);
-  text-decoration: none;
-  line-height: var(--lineHeight-tight, 1.25);
-}
-.ivds-header__brand-text:hover {
-  color: var(--color-brand-primary-600, #ea580c);
-}
-.ivds-header__brand-text:focus {
-  outline: 2px solid var(--color-brand-primary-500, #f97316);
-  outline-offset: 2px;
-  border-radius: var(--borderRadius-sm, 0.25rem);
-}
-@media (max-width: 768px) {
-  .ivds-header__brand-text {
-    font-size: var(--fontSize-base, 1rem);
-  }
-}
-.ivds-header {
-  /* Navigation area*/
+  color: inherit;
+  font-size: var(--fontSize-xl, 1.25rem);
+  font-weight: var(--fontWeight-semibold, 600);
+  letter-spacing: -0.01em;
+  line-height: 1.15;
 }
 .ivds-header__nav {
   display: flex;
   align-items: center;
-  gap: var(--spacing-6, 1.5rem);
-  flex: 1;
-  justify-content: center;
+  gap: var(--spacing-2, 0.5rem);
 }
-@media (max-width: 768px) {
+@media (max-width: var(--breakpoint-lg, 1024px)) {
   .ivds-header__nav {
     display: none;
   }
-  .ivds-header__nav--mobile-visible {
-    display: flex;
-    flex-basis: 100%;
-    order: 3;
-    justify-content: flex-start;
-    margin-top: var(--spacing-3, 0.75rem);
-    padding-top: var(--spacing-3, 0.75rem);
-    border-top: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-200, #e2e8f0);
-    gap: var(--spacing-4, 1rem);
-  }
 }
 .ivds-header__nav a {
-  color: var(--color-semantic-neutral-700, #374151);
-  text-decoration: none;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  min-height: 48px;
+  padding: var(--spacing-2, 0.5rem) var(--spacing-2, 0.5rem);
+  border-radius: 0;
+  border-bottom: 3px solid transparent;
+  color: var(--ivds-text-secondary);
+  font-size: var(--fontSize-base, 1rem);
   font-weight: var(--fontWeight-medium, 500);
-  font-size: var(--fontSize-sm, 0.875rem);
-  padding: var(--spacing-2, 0.5rem) var(--spacing-3, 0.75rem);
-  border-radius: var(--borderRadius-md, 0.375rem);
-  transition: all 0.15s ease-in-out;
+  text-decoration: none;
+  transition: color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease), border-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);
 }
 .ivds-header__nav a:hover {
-  color: var(--color-brand-primary-600, #ea580c);
-  background-color: var(--color-brand-primary-50, #fff7ed);
+  color: var(--ivds-text-primary);
+  border-color: var(--ivds-border-strong, #a1adba);
 }
-.ivds-header__nav a:focus {
-  outline: 2px solid var(--color-brand-primary-500, #f97316);
-  outline-offset: 2px;
+.ivds-header__nav a:focus-visible {
+  outline: var(--ivds-focus-ring-width, 3px) solid var(--ivds-focus-ring-color, var(--color-brand-accent-600, #1058b8));
+  outline-offset: var(--ivds-focus-ring-offset, 2px);
+  box-shadow: none;
 }
-.ivds-header__nav a[aria-current=page] {
-  color: var(--color-brand-primary-600, #ea580c);
-  background-color: var(--color-brand-primary-100, #fed7aa);
-  font-weight: var(--fontWeight-semibold, 600);
+.ivds-header__nav a:focus:not(:focus-visible) {
+  outline: none;
+  box-shadow: none;
 }
-.ivds-header {
-  /* Actions area*/
+.ivds-header__nav a.ivds-header__nav-item--active {
+  color: var(--color-brand-accent-700, #0b4593);
+  border-color: var(--color-brand-accent-600, #1058b8);
+  font-weight: var(--fontWeight-semibold, 600);
 }
 .ivds-header__actions {
   display: flex;
   align-items: center;
   gap: var(--spacing-3, 0.75rem);
-  flex-shrink: 0;
-}
-@media (max-width: 768px) {
-  .ivds-header__actions {
-    gap: var(--spacing-2, 0.5rem);
-  }
-}
-.ivds-header {
-  /* Mobile menu toggle button*/
 }
 .ivds-header__mobile-toggle {
   display: none;
-  background: none;
-  border: none;
-  padding: var(--spacing-2, 0.5rem);
-  cursor: pointer;
-  color: var(--color-semantic-neutral-700, #374151);
-  border-radius: var(--borderRadius-md, 0.375rem);
-}
-.ivds-header__mobile-toggle:hover {
-  background-color: var(--color-semantic-neutral-100, #f3f4f6);
 }
-.ivds-header__mobile-toggle:focus {
-  outline: 2px solid var(--color-brand-primary-500, #f97316);
-  outline-offset: 2px;
-}
-@media (max-width: 768px) {
+@media (max-width: var(--breakpoint-lg, 1024px)) {
   .ivds-header__mobile-toggle {
-    display: flex;
+    display: inline-flex;
     align-items: center;
     justify-content: center;
+    width: 48px;
+    height: 48px;
+    border: 2px solid var(--ivds-border-strong, #a1adba);
+    border-radius: var(--ivds-radius-s, 0.125rem);
+    background: var(--ivds-surface-base, #fff);
+    color: var(--ivds-text-primary);
+    cursor: pointer;
   }
-}
-.ivds-header__mobile-toggle svg {
-  width: 1.25rem;
-  height: 1.25rem;
-}
-.ivds-header {
-  /* Search area*/
-}
-.ivds-header__search {
-  flex: 1;
-  max-width: 400px;
-  margin: 0 var(--spacing-4, 1rem);
-}
-@media (max-width: 768px) {
-  .ivds-header__search {
-    display: none;
+  .ivds-header__mobile-toggle:hover {
+    border-color: var(--color-brand-accent-600, #1058b8);
+    color: var(--color-brand-accent-700, #0b4593);
   }
-  .ivds-header__search--mobile-visible {
-    display: block;
-    flex-basis: 100%;
-    order: 2;
-    margin: var(--spacing-3, 0.75rem) 0 0 0;
-    max-width: none;
+  .ivds-header__mobile-toggle:focus-visible {
+    outline: var(--ivds-focus-ring-width, 3px) solid var(--ivds-focus-ring-color, var(--color-brand-accent-600, #1058b8));
+    outline-offset: var(--ivds-focus-ring-offset, 2px);
+    box-shadow: none;
+  }
+  .ivds-header__mobile-toggle:focus:not(:focus-visible) {
+    outline: none;
+    box-shadow: none;
   }
 }
-.ivds-header {
-  /* Container wrapper*/
+.ivds-header__universal-bar {
+  padding: var(--spacing-2, 0.5rem) var(--spacing-8, 2rem);
+  background-color: var(--ivds-surface-muted);
+  border-bottom: 1px solid var(--ivds-border-subtle);
+  color: var(--ivds-text-secondary);
+  font-size: var(--fontSize-xs, 0.75rem);
 }
-.ivds-header__container {
-  max-width: 1200px;
-  margin: 0 auto;
-  width: 100%;
-  justify-content: space-between;
-  gap: var(--spacing-6, 1.5rem);
+.ivds-header__universal-bar .ivds-header__container {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: var(--spacing-5, 1.25rem);
 }
-@media (max-width: 768px) {
-  .ivds-header__container {
-    flex-wrap: wrap;
-    padding: var(--spacing-3, 0.75rem) var(--spacing-4, 1rem);
-    min-height: 56px;
-  }
+.ivds-header__universal-bar a {
+  color: inherit;
+  font-weight: var(--fontWeight-medium, 500);
+  text-decoration: none;
 }
-.ivds-header {
-  /* Variants*/
+.ivds-header__universal-bar a:hover {
+  color: var(--color-brand-accent-700, #0b4593);
+}
+.ivds-header__action-bar {
+  padding: var(--spacing-3, 0.75rem) var(--spacing-8, 2rem);
+  background-color: var(--ivds-surface-base);
+  border-bottom: 1px solid var(--ivds-border-subtle);
+}
+.ivds-header__action-bar .ivds-header__container {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--spacing-3, 0.75rem);
 }
 .ivds-header--sticky {
   position: sticky;
   top: 0;
-  z-index: 50;
-  box-shadow: var(--shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
-  backdrop-filter: blur(8px);
-  background-color: rgba(252, 252, 253, 0.95);
+  box-shadow: var(--ivds-shadow-md);
 }
-@supports not (backdrop-filter: blur(8px)) {
-  .ivds-header--sticky {
-    background-color: var(--color-semantic-neutral-25, #fcfcfd);
-  }
+.ivds-header--glass {
+  background-color: var(--ivds-surface-base, #fff);
 }
 .ivds-header--dark {
-  background-color: var(--color-semantic-neutral-900, #0f172a);
-  border-bottom-color: var(--color-semantic-neutral-700, #374151);
+  --background-color: var(--ivds-surface-strong, #121a24);
+  --border-color: var(--ivds-border-subtle, #283443);
 }
 .ivds-header--dark .ivds-header__brand-text {
-  color: var(--color-semantic-neutral-50, #f8fafc);
+  color: var(--ivds-text-on-strong, #fff);
 }
 .ivds-header--dark .ivds-header__nav a {
-  color: var(--color-semantic-neutral-50, #f8fafc);
+  color: var(--ivds-text-muted, rgba(255, 255, 255, 0.82));
 }
 .ivds-header--dark .ivds-header__nav a:hover {
-  background-color: rgba(var(--color-semantic-neutral-50, #f8fafc), 0.1);
+  color: var(--ivds-text-on-strong, #fff);
+  border-color: var(--ivds-border-strong, rgba(255, 255, 255, 0.35));
 }
-.ivds-header--transparent {
-  background-color: transparent;
-  border-bottom: none;
-  backdrop-filter: none;
+.ivds-header--dark .ivds-header__nav a.ivds-header__nav-item--active {
+  color: var(--ivds-text-on-strong, #fff);
+  border-color: var(--color-brand-accent-400, #5a93f5);
 }
-.ivds-header--transparent.ivds-header--sticky {
-  background-color: rgba(252, 252, 253, 0.95);
-  border-bottom: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-200, #e2e8f0);
-  backdrop-filter: blur(8px);
+.ivds-header--dark .ivds-header__mobile-toggle {
+  background: transparent;
+  border-color: var(--ivds-border-strong, rgba(255, 255, 255, 0.35));
+  color: var(--ivds-text-on-strong, #fff);
 }
-.ivds-header--compact {
-  padding: var(--spacing-2, 0.5rem) var(--spacing-4, 1rem);
-  min-height: 48px;
-}
-.ivds-header--compact .ivds-header__brand-logo {
-  height: 1.5rem;
-  margin-right: var(--spacing-2, 0.5rem);
-}
-.ivds-header--compact .ivds-header__brand-text {
-  font-size: var(--fontSize-base, 1rem);
-}
-.ivds-header--compact .ivds-header__nav {
-  gap: var(--spacing-4, 1rem);
-}
-.ivds-header--compact .ivds-header__nav a {
-  padding: var(--spacing-1, 0.25rem) var(--spacing-2, 0.5rem);
-  font-size: var(--fontSize-xs, 0.75rem);
-}
-.ivds-header--compact .ivds-header__actions {
-  gap: var(--spacing-2, 0.5rem);
-}
-.ivds-header {
-  /* Responsive navigation visibility*/
+.ivds-header--scrolled {
+  box-shadow: var(--ivds-shadow-md);
 }
-@media (max-width: 768px) {
-  .ivds-header--mobile-nav-open .ivds-header__nav {
-    display: flex;
-    flex-basis: 100%;
-    order: 3;
-    justify-content: flex-start;
-    margin-top: var(--spacing-3, 0.75rem);
-    padding-top: var(--spacing-3, 0.75rem);
-    border-top: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-200, #e2e8f0);
-    gap: var(--spacing-4, 1rem);
-    flex-wrap: wrap;
-  }
-}
-@media (max-width: 768px) {
-  .ivds-header--mobile-nav-open .ivds-header__search--mobile-visible {
-    display: block;
-    flex-basis: 100%;
-    order: 2;
-    margin: var(--spacing-3, 0.75rem) 0 0 0;
-    max-width: none;
-  }
+.ivds-header__container {
+  width: 100%;
+  max-width: var(--container-max-width, 1440px);
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-6, 1.5rem);
 }

package/lib/components/header/header.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/header/header.scss%23sass","../../../src/components/header/_header-mixin.scss","../../../src/components/header/header.scss","../../../src/base/_focus.scss"],"names":[],"mappings":"AAEA,gDAAA;ACDA,gDAAA;ADKA;ECCE,kDAAA;ECHF,0CDIE;EACA,kDAAA;ECHF,cAAA;EDKE,qBAAA;EACA,uBAAA;EACA,uCAAA;EACA,wCAAA;EAEA,aAAA;EACA,mBAAA;EACA,8BAAA;EACA,yBAAA;EACA,mDAAA;EACA,yCAAA;EACA,4CAAA;EACA,kBAAA;EACA,YAAA;EACA,oKAAA;ACJF;ADQE;EDvBF;IEkBE,gCAAA;IDOE,yDAAA;ECLF;AACF;AFjBE;ECwCA,oBAAA;EACA,mBAAA;EACA,8BAAA;EACA,qBAAA;EACA,+BAAA;EACA,cAAA;ACpBF;ADsBE;EACE,oCAAA;EACA,WAAA;EACA,sBAAA;KAAA,mBAAA;ACpBJ;ADuBE;EACE,cAAA;EACA,sCAAA;EACA,4CAAA;EACA,uBAAA;EACA,iBAAA;ACrBJ;AFjCE;EC2DA,aAAA;EACA,mBAAA;EACA,6BAAA;ACvBF;ADyBE;ED/DA;ICgEE,aAAA;ECtBF;AACF;ADwBE;EACE,kBAAA;EACA,oBAAA;ECtBJ,mBAAA;EDwBI,gBAAA;EACA,0DAAA;EACA,gBAAA;EACA,oCAAA;EACA,iCAAA;EACA,qCAAA;EACA,0CAAA;EACA,qBAAA;EACA,yJACE;ACvBN;AD0BI;EACE,+BAAA;EACA,gDAAA;ACxBN;ACtEE;EACE,qHAAA;EACA,kDAAA;EACA,gBAAA;ADwEJ;ACrEE;EACE,aAAA;EACA,gBAAA;ADuEJ;ADoBI;EACE,6CAAA;EACA,oDAAA;EACA,4CAAA;AClBN;AFvEE;EC+FA,aAAA;EACA,mBAAA;EACA,8BAAA;ACrBF;AFxEE;ECiGA,aAAA;ACtBF;ADwBE;EDnGA;ICoGE,oBAAA;IACA,mBAAA;IACA,uBAAA;IACA,WAAA;IACA,YAAA;IACA,oDAAA;IACA,6CAAA;IACA,0CAAA;IACA,+BAAA;IACA,eAAA;ECrBF;EDuBE;IACE,oDAAA;IACA,6CAAA;ECrBJ;EC7GA;IACE,qHAAA;IACA,kDAAA;IACA,gBAAA;ED+GF;EC5GA;IACE,aAAA;IACA,gBAAA;ED8GF;AACF;AFlGE;ECkJA,wDAAA;EACA,2CAAA;EACA,kDAAA;EACA,iCAAA;EACA,sCAAA;AC7CF;AD+CE;EACE,aAAA;EACA,yBAAA;EACA,mBAAA;EACA,8BAAA;AC7CJ;ADgDE;EACE,cAAA;EACA,0CAAA;EACA,qBAAA;AC9CJ;ADgDI;EACE,6CAAA;AC9CN;AFnHE;ECuKA,yDAAA;EACA,0CAAA;EACA,kDAAA;ACjDF;ADmDE;EACE,aAAA;EACA,mBAAA;EACA,yBAAA;EACA,8BAAA;ACjDJ;AFzHE;ECCA,gBAAA;EACA,MAAA;EACA,iCAAA;AC2HF;AF1HE;ECGA,gDAAA;AC0HF;AFzHE;ECoGA,uDAAA;EACA,kDAAA;ACwBF;ADtBE;EACE,uCAAA;ACwBJ;ADrBE;EACE,wDAAA;ACuBJ;ADrBI;EACE,uCAAA;EACA,kEAAA;ACuBN;ADpBI;EACE,uCAAA;EACA,oDAAA;ACsBN;ADlBE;EACE,uBAAA;EACA,kEAAA;EACA,uCAAA;ACoBJ;AF5IE;ECDA,iCAAA;ACgJF;AF1IE;EACE,WAAA;EACA,6CAAA;EACA,cAAA;EACA,aAAA;EACA,mBAAA;EACA,8BAAA;EACA,6BAAA;AE4IJ","file":"header.css","sourcesContent":["// Header component styles\r\n// Core styling for the IVDS header including layout, branding, and navigation\r\n/* stylelint-disable no-descending-specificity */\r\n\r\n@use '_header-mixin' as header;\r\n\r\n.ivds-header {\r\n  @include header.header-base;\r\n  \r\n  // Elements\r\n  &__brand {\r\n    @include header.header-brand;\r\n  }\r\n  \r\n  &__nav {\r\n    @include header.header-nav;\r\n  }\r\n  \r\n  &__actions {\r\n    @include header.header-actions;\r\n  }\r\n  \r\n  &__mobile-toggle {\r\n    @include header.header-mobile-toggle;\r\n  }\r\n  \r\n  &__universal-bar {\r\n    @include header.header-universal-bar;\r\n  }\r\n  \r\n  &__action-bar {\r\n    @include header.header-action-bar;\r\n  }\r\n  \r\n  // Variants\r\n  &--sticky {\r\n    @include header.header-sticky;\r\n  }\r\n  \r\n  &--glass {\r\n    @include header.header-glass;\r\n  }\r\n  \r\n  &--dark {\r\n    @include header.header-dark;\r\n  }\r\n  \r\n  &--scrolled {\r\n    @include header.header-scrolled;\r\n  }\r\n\r\n  // Nested container support (HDS style)\r\n  &__container {\r\n    width: 100%;\r\n    max-width: var(--container-max-width, 1440px);\r\n    margin: 0 auto;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    gap: var(--spacing-6, 1.5rem);\r\n  }\r\n}","// Header component mixins and private styles\n/* stylelint-disable no-descending-specificity */\n\n@use '../../base/focus' as *;\n\n@mixin header-base {\n  // Per-component CSS variable API\n  --background-color: var(--ivds-surface-base, #fff);\n  --color: var(--ivds-text-primary, #121a24);\n  --border-color: var(--ivds-border-subtle, #e2e7ec);\n  --height: 74px;\n  --height-mobile: 66px;\n  --logo-max-height: 34px;\n  --padding-block: var(--spacing-4, 1rem);\n  --padding-inline: var(--spacing-8, 2rem);\n\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  min-height: var(--height);\n  padding: var(--padding-block) var(--padding-inline);\n  background-color: var(--background-color);\n  border-bottom: 2px solid var(--border-color);\n  position: relative;\n  z-index: 100;\n  transition:\n    background-color var(--ivds-motion-normal, 250ms) var(--ivds-motion-ease, ease),\n    box-shadow var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);\n\n  @media (max-width: var(--breakpoint-lg, 1024px)) {\n    min-height: var(--height-mobile);\n    padding: var(--spacing-3, 0.75rem) var(--spacing-4, 1rem);\n  }\n}\n\n@mixin header-sticky {\n  position: sticky;\n  top: 0;\n  box-shadow: var(--ivds-shadow-md);\n}\n\n@mixin header-glass {\n  background-color: var(--ivds-surface-base, #fff);\n}\n\n@mixin header-scrolled {\n  box-shadow: var(--ivds-shadow-md);\n}\n\n@mixin header-brand {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--spacing-3, 0.75rem);\n  text-decoration: none;\n  color: var(--ivds-text-primary);\n  flex-shrink: 0;\n\n  &-logo {\n    height: var(--logo-max-height, 34px);\n    width: auto;\n    object-fit: contain;\n  }\n\n  &-text {\n    color: inherit;\n    font-size: var(--fontSize-xl, 1.25rem);\n    font-weight: var(--fontWeight-semibold, 600);\n    letter-spacing: -0.01em;\n    line-height: 1.15;\n  }\n}\n\n@mixin header-nav {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-2, 0.5rem);\n\n  @media (max-width: var(--breakpoint-lg, 1024px)) {\n    display: none;\n  }\n\n  a {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    min-height: 48px;\n    padding: var(--spacing-2, 0.5rem) var(--spacing-2, 0.5rem);\n    border-radius: 0;\n    border-bottom: 3px solid transparent;\n    color: var(--ivds-text-secondary);\n    font-size: var(--fontSize-base, 1rem);\n    font-weight: var(--fontWeight-medium, 500);\n    text-decoration: none;\n    transition:\n      color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease),\n      border-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);\n\n    &:hover {\n      color: var(--ivds-text-primary);\n      border-color: var(--ivds-border-strong, #a1adba);\n    }\n\n    @include focus-ring;\n\n    &.ivds-header__nav-item--active {\n      color: var(--color-brand-accent-700, #0b4593);\n      border-color: var(--color-brand-accent-600, #1058b8);\n      font-weight: var(--fontWeight-semibold, 600);\n    }\n  }\n}\n\n@mixin header-actions {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-3, 0.75rem);\n}\n\n@mixin header-mobile-toggle {\n  display: none;\n\n  @media (max-width: var(--breakpoint-lg, 1024px)) {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 48px;\n    height: 48px;\n    border: 2px solid var(--ivds-border-strong, #a1adba);\n    border-radius: var(--ivds-radius-s, 0.125rem);\n    background: var(--ivds-surface-base, #fff);\n    color: var(--ivds-text-primary);\n    cursor: pointer;\n\n    &:hover {\n      border-color: var(--color-brand-accent-600, #1058b8);\n      color: var(--color-brand-accent-700, #0b4593);\n    }\n\n    @include focus-ring;\n  }\n}\n\n@mixin header-dark {\n  --background-color: var(--ivds-surface-strong, #121a24);\n  --border-color: var(--ivds-border-subtle, #283443);\n\n  .ivds-header__brand-text {\n    color: var(--ivds-text-on-strong, #fff);\n  }\n\n  .ivds-header__nav a {\n    color: var(--ivds-text-muted, rgba(255, 255, 255, 0.82));\n\n    &:hover {\n      color: var(--ivds-text-on-strong, #fff);\n      border-color: var(--ivds-border-strong, rgba(255, 255, 255, 0.35));\n    }\n\n    &.ivds-header__nav-item--active {\n      color: var(--ivds-text-on-strong, #fff);\n      border-color: var(--color-brand-accent-400, #5a93f5);\n    }\n  }\n\n  .ivds-header__mobile-toggle {\n    background: transparent;\n    border-color: var(--ivds-border-strong, rgba(255, 255, 255, 0.35));\n    color: var(--ivds-text-on-strong, #fff);\n  }\n}\n\n@mixin header-universal-bar {\n  padding: var(--spacing-2, 0.5rem) var(--spacing-8, 2rem);\n  background-color: var(--ivds-surface-muted);\n  border-bottom: 1px solid var(--ivds-border-subtle);\n  color: var(--ivds-text-secondary);\n  font-size: var(--fontSize-xs, 0.75rem);\n\n  .ivds-header__container {\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n    gap: var(--spacing-5, 1.25rem);\n  }\n\n  a {\n    color: inherit;\n    font-weight: var(--fontWeight-medium, 500);\n    text-decoration: none;\n\n    &:hover {\n      color: var(--color-brand-accent-700, #0b4593);\n    }\n  }\n}\n\n@mixin header-action-bar {\n  padding: var(--spacing-3, 0.75rem) var(--spacing-8, 2rem);\n  background-color: var(--ivds-surface-base);\n  border-bottom: 1px solid var(--ivds-border-subtle);\n\n  .ivds-header__container {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: var(--spacing-3, 0.75rem);\n  }\n}\n","// Header component styles\r\n// Core styling for the IVDS header including layout, branding, and navigation\r\n/* stylelint-disable no-descending-specificity */\r\n\r\n@use '_header-mixin' as header;\r\n\r\n.ivds-header {\r\n  @include header.header-base;\r\n  \r\n  // Elements\r\n  &__brand {\r\n    @include header.header-brand;\r\n  }\r\n  \r\n  &__nav {\r\n    @include header.header-nav;\r\n  }\r\n  \r\n  &__actions {\r\n    @include header.header-actions;\r\n  }\r\n  \r\n  &__mobile-toggle {\r\n    @include header.header-mobile-toggle;\r\n  }\r\n  \r\n  &__universal-bar {\r\n    @include header.header-universal-bar;\r\n  }\r\n  \r\n  &__action-bar {\r\n    @include header.header-action-bar;\r\n  }\r\n  \r\n  // Variants\r\n  &--sticky {\r\n    @include header.header-sticky;\r\n  }\r\n  \r\n  &--glass {\r\n    @include header.header-glass;\r\n  }\r\n  \r\n  &--dark {\r\n    @include header.header-dark;\r\n  }\r\n  \r\n  &--scrolled {\r\n    @include header.header-scrolled;\r\n  }\r\n\r\n  // Nested container support (HDS style)\r\n  &__container {\r\n    width: 100%;\r\n    max-width: var(--container-max-width, 1440px);\r\n    margin: 0 auto;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    gap: var(--spacing-6, 1.5rem);\r\n  }\r\n}","// Unified focus ring mixin\n// Uses outline instead of box-shadow to avoid conflicts with elevated components (Card, Modal).\n// Inspired by Helsinki Design System: 3px solid outline with 2px offset.\n\n@mixin focus-ring($offset: var(--ivds-focus-ring-offset, 2px), $width: var(--ivds-focus-ring-width, 3px), $color: var(--ivds-focus-ring-color, var(--color-brand-accent-600, #1058b8))) {\n  &:focus-visible {\n    outline: #{$width} solid #{$color};\n    outline-offset: #{$offset};\n    box-shadow: none;\n  }\n\n  &:focus:not(:focus-visible) {\n    outline: none;\n    box-shadow: none;\n  }\n}\n\n// Variant for components where the focus indicator is on a sibling element\n// (e.g., checkbox input:focus-visible + .checkbox__box)\n@mixin focus-ring-on-sibling($selector, $offset: var(--ivds-focus-ring-offset, 2px), $width: var(--ivds-focus-ring-width, 3px), $color: var(--ivds-focus-ring-color, var(--color-brand-accent-600, #1058b8))) {\n  &:focus-visible + #{$selector} {\n    outline: #{$width} solid #{$color};\n    outline-offset: #{$offset};\n    box-shadow: none;\n  }\n\n  &:focus:not(:focus-visible) + #{$selector} {\n    outline: none;\n    box-shadow: none;\n  }\n}\n"]}