@designsystem-se/af 34.1.0 → 34.2.1-beta.0

package/dist/collection/components/_header/header-avatar/header-avatar.js

@@ -54,7 +54,7 @@ export class NavigationAvatar {
         if (this.afShowPlaceholderImage) {
             this.afHideImage = true;
         }
-        return (h("div", { key: 'f0a6f919473f79842a1a5e8b420ebd28b5d69ddf', class: "digi-header-avatar" }, !this.afHideImage && this.afIsLoggedIn && (h("digi-media-image", { key: 'f9d7affc8b4fe35cc4ed34363fafb7dbefd68d15', class: 'digi-header-avatar__image', "af-height": "32", "af-width": "32", afUnlazy: true, "af-src": this.afSrc, afAlt: this.afAlt })), this.afShowPlaceholderImage && this.afIsLoggedIn && (h(this.currentAvatar, { key: '5e983a612f4f96444669a02715e27a0e39c3d5f4' }, h("title", { key: '4d366e241b7deac81ecadb841a0071cafd373fb4' }, this.afPlacerholderTitle))), this.afIsLoggedIn && (h("span", { key: '63a9b8cf263d9ba5ab7a251f2b1d49f4393d118f', class: "digi-header-avatar__name" }, this.setCurrentLoginName())), !this.afIsLoggedIn && (h(this.currentAvatar, { key: '36e6121136e826baa23bee042f99a1a429d93a1b' }, h("title", { key: '2083da06ed9647cebe92afa9b0df14b0289acdae' }, this.afPlacerholderTitle))), !this.afIsLoggedIn && h("slot", { key: '2a712f2fb05ece1a9a31cef3f9d8cd2e322ee288' })));
+        return (h("div", { key: '64fe3bc01a24616c897731922c27e80d1b5b0f36', class: "digi-header-avatar" }, !this.afHideImage && this.afIsLoggedIn && (h("digi-media-image", { key: 'e3eaae1d160a92b2dcb665bfab6a525139946570', class: 'digi-header-avatar__image', "af-height": "32", "af-width": "32", afUnlazy: true, "af-src": this.afSrc, afAlt: this.afAlt })), this.afShowPlaceholderImage && this.afIsLoggedIn && (h("span", { key: '79721c8dafb2c882636d59afb6105ae830349d19', class: "digi-header-avatar__icon digi-header-avatar__icon-logged-in" }, h(this.currentAvatar, { key: 'fd721ba027a41c5f8f1f0222eb8cbfcf35db423b' }, h("title", { key: '1abe7f2022bf622309d8f575e260f1bce4d9802c' }, this.afPlacerholderTitle)))), this.afIsLoggedIn && (h("span", { key: '4df36de8d4cbbeb97178a7136aa499f82e024168', class: "digi-header-avatar__name" }, this.setCurrentLoginName())), !this.afIsLoggedIn && (h("span", { key: '4b20ae2fe652a7ac62603c698bbc993ac8b1556e', class: "digi-header-avatar__icon digi-header-avatar__icon-logged-out" }, h(this.currentAvatar, { key: '2089f8c7549d092d54077c6e7304aa9cf5abf5b7' }, h("title", { key: '5c1f76f3e0fd461d626eafafb6a1bc4c5619057b' }, this.afPlacerholderTitle)))), !this.afIsLoggedIn && h("slot", { key: 'b5de2480dcd323bfce343d9576b63b6347f50958' })));
     }
     static get is() { return "digi-header-avatar"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/_header/header-navigation/header-navigation.css

@@ -2,280 +2,16 @@
 v2.0 | 20110126
 License: none (public domain)
 */
-.digi--util--fs--xs {
-  font-size: var(--digi--global--typography--font-size--small) !important;
-}
-
-.digi--util--fs--s {
-  font-size: calc(var(--digi--global--typography--font-size--small) + 1px) !important;
-}
-
-.digi--util--fs--m {
-  font-size: var(--digi--global--typography--font-size--base) !important;
-}
-
-.digi--util--fs--l {
-  font-size: var(--digi--global--typography--font-size--large) !important;
-}
-
-.digi--util--fw--sb {
-  font-weight: var(--digi--global--typography--font-weight--semibold) !important;
-}
-
-.digi--util--pt--1 {
-  padding-top: var(--digi--global--spacing--smallest-2) !important;
-}
-
-.digi--util--pt--10 {
-  padding-top: var(--digi--global--spacing--smallest) !important;
-}
-
-.digi--util--pt--20 {
-  padding-top: var(--digi--global--spacing--base) !important;
-}
-
-.digi--util--pt--30 {
-  padding-top: var(--digi--global--spacing--largest-2) !important;
-}
-
-.digi--util--pt--40 {
-  padding-top: var(--digi--global--spacing--largest-4) !important;
-}
-
-.digi--util--pt--50 {
-  padding-top: 2.5rem !important;
-}
-
-.digi--util--pt--60 {
-  padding-top: var(--digi--global--spacing--largest-5) !important;
-}
-
-.digi--util--pt--70 {
-  padding-top: var(--digi--global--spacing--largest-6) !important;
-}
-
-.digi--util--pt--80 {
-  padding-top: 4.5rem !important;
-}
-
-.digi--util--pt--90 {
-  padding-top: 5rem !important;
-}
-
-.digi--util--pb--1 {
-  padding-bottom: var(--digi--global--spacing--smallest-2) !important;
-}
-
-.digi--util--pb--10 {
-  padding-bottom: var(--digi--global--spacing--smallest) !important;
-}
-
-.digi--util--pb--20 {
-  padding-bottom: var(--digi--global--spacing--base) !important;
-}
-
-.digi--util--pb--30 {
-  padding-bottom: var(--digi--global--spacing--largest-2) !important;
-}
-
-.digi--util--pb--40 {
-  padding-bottom: var(--digi--global--spacing--largest-4) !important;
-}
-
-.digi--util--pb--50 {
-  padding-bottom: 2.5rem !important;
-}
-
-.digi--util--pb--60 {
-  padding-bottom: var(--digi--global--spacing--largest-5) !important;
-}
-
-.digi--util--pb--70 {
-  padding-bottom: var(--digi--global--spacing--largest-6) !important;
-}
-
-.digi--util--pb--80 {
-  padding-bottom: 4.5rem !important;
-}
-
-.digi--util--pb--90 {
-  padding-bottom: 5rem !important;
-}
-
-.digi--util--p--1 {
-  padding: var(--digi--global--spacing--smallest-2) !important;
-}
-
-.digi--util--p--10 {
-  padding: var(--digi--global--spacing--smallest) !important;
-}
-
-.digi--util--p--20 {
-  padding: var(--digi--global--spacing--base) !important;
-}
-
-.digi--util--p--30 {
-  padding: var(--digi--global--spacing--largest-2) !important;
-}
-
-.digi--util--p--40 {
-  padding: var(--digi--global--spacing--largest-4) !important;
-}
-
-.digi--util--p--50 {
-  padding: 2.5rem !important;
-}
-
-.digi--util--p--60 {
-  padding: var(--digi--global--spacing--largest-5) !important;
-}
-
-.digi--util--p--70 {
-  padding: var(--digi--global--spacing--largest-6) !important;
-}
-
-.digi--util--p--80 {
-  padding: 4.5rem !important;
-}
-
-.digi--util--p--90 {
-  padding: 5rem !important;
-}
-
-.digi--util--ptb--1 {
-  padding-top: var(--digi--global--spacing--smallest-2) !important;
-  padding-bottom: var(--digi--global--spacing--smallest-2) !important;
-}
-
-.digi--util--ptb--10 {
-  padding-top: var(--digi--global--spacing--smallest) !important;
-  padding-bottom: var(--digi--global--spacing--smallest) !important;
-}
-
-.digi--util--ptb--20 {
-  padding-top: var(--digi--global--spacing--base) !important;
-  padding-bottom: var(--digi--global--spacing--base) !important;
-}
-
-.digi--util--ptb--30 {
-  padding-top: var(--digi--global--spacing--largest-2) !important;
-  padding-bottom: var(--digi--global--spacing--largest-2) !important;
-}
-
-.digi--util--ptb--40 {
-  padding-top: var(--digi--global--spacing--largest-4) !important;
-  padding-bottom: var(--digi--global--spacing--largest-4) !important;
-}
-
-.digi--util--ptb--50 {
-  padding-top: 2.5rem !important;
-  padding-bottom: 2.5rem !important;
-}
-
-.digi--util--ptb--60 {
-  padding-top: var(--digi--global--spacing--largest-5) !important;
-  padding-bottom: var(--digi--global--spacing--largest-5) !important;
-}
-
-.digi--util--ptb--70 {
-  padding-top: var(--digi--global--spacing--largest-6) !important;
-  padding-bottom: var(--digi--global--spacing--largest-6) !important;
-}
-
-.digi--util--ptb--80 {
-  padding-top: 4.5rem !important;
-  padding-bottom: 4.5rem !important;
-}
-
-.digi--util--ptb--90 {
-  padding-top: 5rem !important;
-  padding-bottom: 5rem !important;
-}
-
-.digi--util--plr--1 {
-  padding-left: var(--digi--global--spacing--smallest-2) !important;
-  padding-right: var(--digi--global--spacing--smallest-2) !important;
-}
-
-.digi--util--plr--10 {
-  padding-left: var(--digi--global--spacing--smallest) !important;
-  padding-right: var(--digi--global--spacing--smallest) !important;
-}
-
-.digi--util--plr--20 {
-  padding-left: var(--digi--global--spacing--base) !important;
-  padding-right: var(--digi--global--spacing--base) !important;
-}
-
-.digi--util--plr--30 {
-  padding-left: var(--digi--global--spacing--largest-2) !important;
-  padding-right: var(--digi--global--spacing--largest-2) !important;
-}
-
-.digi--util--plr--40 {
-  padding-left: var(--digi--global--spacing--largest-4) !important;
-  padding-right: var(--digi--global--spacing--largest-4) !important;
-}
-
-.digi--util--plr--50 {
-  padding-left: 2.5rem !important;
-  padding-right: 2.5rem !important;
-}
-
-.digi--util--plr--60 {
-  padding-left: var(--digi--global--spacing--largest-5) !important;
-  padding-right: var(--digi--global--spacing--largest-5) !important;
-}
-
-.digi--util--plr--70 {
-  padding-left: var(--digi--global--spacing--largest-6) !important;
-  padding-right: var(--digi--global--spacing--largest-6) !important;
-}
-
-.digi--util--plr--80 {
-  padding-left: 4.5rem !important;
-  padding-right: 4.5rem !important;
-}
-
-.digi--util--plr--90 {
-  padding-left: 5rem !important;
-  padding-right: 5rem !important;
-}
-
-.digi--util--sr-only {
-  border: 0;
-  clip: rect(1px, 1px, 1px, 1px);
-  -webkit-clip-path: inset(50%);
-  clip-path: inset(50%);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-  white-space: nowrap;
-}
-
-.digi--util--hidden {
-  display: none;
-}
-
-/** Do not touch! Autogenerated 
-* @prop --digi--header--border-color: var(--digi--color--border--neutral-4);
-* @prop --digi--header--close-button--padding: var(--digi--padding--smaller);
-* @prop --digi--header--backdrop--background-color: rgba(0, 0, 0, 0.7);
-*/
 :host {
-  --digi--header--border-color: var(--digi--color--border--neutral-4);
+  --digi--header--border-color: var(--digi--color--divider--secondary);
   --digi--header--close-button--padding: var(--digi--padding--smaller);
-  --digi--header--backdrop--background-color: rgba(0, 0, 0, 0.7);
   display: block;
 }
 :host .digi-header-navigation {
   z-index: 99;
 }
 :host .digi-header-navigation__backdrop {
-  background-color: var(--digi--header--backdrop--background-color);
+  background: rgba(0, 0, 0, 0.7);
   width: 100%;
   height: 100%;
   position: fixed;
@@ -285,7 +21,7 @@ License: none (public domain)
 :host .digi-header-navigation__wrapper {
   display: none;
   grid-area: nav;
-  background-color: var(--digi--color--background--neutral-8);
+  background-color: var(--digi--color--background--secondary-muted);
   border-bottom: var(--digi--header--border-width) solid var(--digi--header--border-color);
 }
 :host .digi-header-navigation--visible .digi-header-navigation__wrapper {
@@ -343,12 +79,8 @@ License: none (public domain)
   display: block;
   text-decoration: none;
   color: inherit;
-  padding: 1rem;
-}
-:host .digi-header-navigation__navigation-link--active-link {
-  font-weight: 600;
-  box-shadow: inset 0 -4px 0 0 #95C23E;
+  padding: var(--digi--padding--medium);
 }
 :host .digi-header-navigation__navigation-link:hover {
-  background-color: var(--digi--color--background--neutral-6);
+  background-color: var(--digi--color--background--interactive--hover--quarternary);
 }

package/dist/collection/components/_header/header-navigation/header-navigation.js

@@ -153,10 +153,10 @@ export class HeaderNavigation {
         };
     }
     render() {
-        return (h("div", { key: '466744f558b849c128d50d4d0139eaf5a3734771', class: Object.assign({ 'digi-header-navigation': true }, this.cssModifiers) }, h("digi-util-breakpoint-observer", { key: 'c7a3e2127b1f4cb1a5996f129b6605a2f5bf3e9c', onAfOnChange: (e) => (this.isMobile =
-                e.detail.value === UtilBreakpointObserverBreakpoints.SMALL) }, h("digi-util-keydown-handler", { key: '479ec7596c9b0f933ef3e95bdd4e4f5086793bd9', onAfOnEsc: (e) => this.escHandler(e), onAfOnTab: (e) => this.tabHandler(e), onAfOnShiftTab: (e) => this.shiftHandler(e) }, h("div", { key: '97e08e1032c9dc36b605ccefe42471ca8ebca24b' }, this.isMobile && (h("div", { key: '4b4ed23818b926d90d8f9ef83680e9dace653426', class: "digi-header-navigation__backdrop", onClick: (e) => this.backdropClickHandler(e) })), h("nav", { key: '8d8c2a78e114b5c1652cb1ac7d82508eb317d77c', class: "digi-header-navigation__wrapper", "aria-label": this.afNavAriaLabel, "af-centered": this.afCentered, ref: (el) => {
+        return (h("div", { key: 'fb9799e806c7d3206d7ddcf49ad0bd8e7ca6ffe2', class: Object.assign({ 'digi-header-navigation': true }, this.cssModifiers) }, h("digi-util-breakpoint-observer", { key: '562777731f122a7a2912e5b1775bb562b774ff71', onAfOnChange: (e) => (this.isMobile =
+                e.detail.value === UtilBreakpointObserverBreakpoints.SMALL) }, h("digi-util-keydown-handler", { key: '7c84be7716a54d1d83e54ef6526d038e356a4fd2', onAfOnEsc: (e) => this.escHandler(e), onAfOnTab: (e) => this.tabHandler(e), onAfOnShiftTab: (e) => this.shiftHandler(e) }, h("div", { key: '4afd16f7da455f883f77dab67de218a8a950116f' }, this.isMobile && (h("div", { key: 'c35304399f6fabb8d030555cff53fffa147c27c4', class: "digi-header-navigation__backdrop", onClick: (e) => this.backdropClickHandler(e) })), h("nav", { key: 'b55416c51335f005d3670e3cac4e3918a118b790', class: "digi-header-navigation__wrapper", "aria-label": this.afNavAriaLabel, "af-centered": this.afCentered, ref: (el) => {
                 this._wrapper = el;
-            } }, this.isMobile && (h("digi-button", { key: 'bcc310f3bd30cd2269ec7a9f926a526b9447147e', onClick: (e) => this.closeHandler(e), "af-variation": "function", "af-aria-label": this.afCloseButtonAriaLabel, class: "digi-header-navigation__close-button" }, this.afCloseButtonText, h("digi-icon-x", { key: '2b16ee3def72ff04568e65226635bd9ed736e5ad', slot: "icon-secondary" }))), this.afCentered !== HeaderCenterContentWidth.DEFAULT ? (h("digi-layout-container", { "af-max-width": this.afCentered }, h("div", { role: "list", class: "digi-header-navigation__inner" }, h("slot", null)))) : (h("div", { role: "list", class: "digi-header-navigation__inner" }, h("slot", null)))))))));
+            } }, this.isMobile && (h("digi-button", { key: '6ef4bc09d8c93f1077b1c3e2fc962c02b0f4b012', onClick: (e) => this.closeHandler(e), "af-variation": "function", "af-aria-label": this.afCloseButtonAriaLabel, class: "digi-header-navigation__close-button" }, this.afCloseButtonText, h("digi-icon-x", { key: '8ede0075c443e4c818591a4bc9c708e0433fffef', slot: "icon-secondary" }))), this.afCentered !== HeaderCenterContentWidth.DEFAULT ? (h("digi-layout-container", { "af-max-width": this.afCentered }, h("div", { role: "list", class: "digi-header-navigation__inner" }, h("slot", null)))) : (h("div", { role: "list", class: "digi-header-navigation__inner" }, h("slot", null)))))))));
     }
     static get is() { return "digi-header-navigation"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/_header/header-navigation-item/header-navigation-item.css

@@ -2,290 +2,22 @@
 v2.0 | 20110126
 License: none (public domain)
 */
-.digi--util--fs--xs {
-  font-size: var(--digi--global--typography--font-size--small) !important;
-}
-
-.digi--util--fs--s {
-  font-size: calc(var(--digi--global--typography--font-size--small) + 1px) !important;
-}
-
-.digi--util--fs--m {
-  font-size: var(--digi--global--typography--font-size--base) !important;
-}
-
-.digi--util--fs--l {
-  font-size: var(--digi--global--typography--font-size--large) !important;
-}
-
-.digi--util--fw--sb {
-  font-weight: var(--digi--global--typography--font-weight--semibold) !important;
-}
-
-.digi--util--pt--1 {
-  padding-top: var(--digi--global--spacing--smallest-2) !important;
-}
-
-.digi--util--pt--10 {
-  padding-top: var(--digi--global--spacing--smallest) !important;
-}
-
-.digi--util--pt--20 {
-  padding-top: var(--digi--global--spacing--base) !important;
-}
-
-.digi--util--pt--30 {
-  padding-top: var(--digi--global--spacing--largest-2) !important;
-}
-
-.digi--util--pt--40 {
-  padding-top: var(--digi--global--spacing--largest-4) !important;
-}
-
-.digi--util--pt--50 {
-  padding-top: 2.5rem !important;
-}
-
-.digi--util--pt--60 {
-  padding-top: var(--digi--global--spacing--largest-5) !important;
-}
-
-.digi--util--pt--70 {
-  padding-top: var(--digi--global--spacing--largest-6) !important;
-}
-
-.digi--util--pt--80 {
-  padding-top: 4.5rem !important;
-}
-
-.digi--util--pt--90 {
-  padding-top: 5rem !important;
-}
-
-.digi--util--pb--1 {
-  padding-bottom: var(--digi--global--spacing--smallest-2) !important;
-}
-
-.digi--util--pb--10 {
-  padding-bottom: var(--digi--global--spacing--smallest) !important;
-}
-
-.digi--util--pb--20 {
-  padding-bottom: var(--digi--global--spacing--base) !important;
-}
-
-.digi--util--pb--30 {
-  padding-bottom: var(--digi--global--spacing--largest-2) !important;
-}
-
-.digi--util--pb--40 {
-  padding-bottom: var(--digi--global--spacing--largest-4) !important;
-}
-
-.digi--util--pb--50 {
-  padding-bottom: 2.5rem !important;
-}
-
-.digi--util--pb--60 {
-  padding-bottom: var(--digi--global--spacing--largest-5) !important;
-}
-
-.digi--util--pb--70 {
-  padding-bottom: var(--digi--global--spacing--largest-6) !important;
-}
-
-.digi--util--pb--80 {
-  padding-bottom: 4.5rem !important;
-}
-
-.digi--util--pb--90 {
-  padding-bottom: 5rem !important;
-}
-
-.digi--util--p--1 {
-  padding: var(--digi--global--spacing--smallest-2) !important;
-}
-
-.digi--util--p--10 {
-  padding: var(--digi--global--spacing--smallest) !important;
-}
-
-.digi--util--p--20 {
-  padding: var(--digi--global--spacing--base) !important;
-}
-
-.digi--util--p--30 {
-  padding: var(--digi--global--spacing--largest-2) !important;
-}
-
-.digi--util--p--40 {
-  padding: var(--digi--global--spacing--largest-4) !important;
-}
-
-.digi--util--p--50 {
-  padding: 2.5rem !important;
-}
-
-.digi--util--p--60 {
-  padding: var(--digi--global--spacing--largest-5) !important;
-}
-
-.digi--util--p--70 {
-  padding: var(--digi--global--spacing--largest-6) !important;
-}
-
-.digi--util--p--80 {
-  padding: 4.5rem !important;
-}
-
-.digi--util--p--90 {
-  padding: 5rem !important;
-}
-
-.digi--util--ptb--1 {
-  padding-top: var(--digi--global--spacing--smallest-2) !important;
-  padding-bottom: var(--digi--global--spacing--smallest-2) !important;
-}
-
-.digi--util--ptb--10 {
-  padding-top: var(--digi--global--spacing--smallest) !important;
-  padding-bottom: var(--digi--global--spacing--smallest) !important;
-}
-
-.digi--util--ptb--20 {
-  padding-top: var(--digi--global--spacing--base) !important;
-  padding-bottom: var(--digi--global--spacing--base) !important;
-}
-
-.digi--util--ptb--30 {
-  padding-top: var(--digi--global--spacing--largest-2) !important;
-  padding-bottom: var(--digi--global--spacing--largest-2) !important;
-}
-
-.digi--util--ptb--40 {
-  padding-top: var(--digi--global--spacing--largest-4) !important;
-  padding-bottom: var(--digi--global--spacing--largest-4) !important;
-}
-
-.digi--util--ptb--50 {
-  padding-top: 2.5rem !important;
-  padding-bottom: 2.5rem !important;
-}
-
-.digi--util--ptb--60 {
-  padding-top: var(--digi--global--spacing--largest-5) !important;
-  padding-bottom: var(--digi--global--spacing--largest-5) !important;
-}
-
-.digi--util--ptb--70 {
-  padding-top: var(--digi--global--spacing--largest-6) !important;
-  padding-bottom: var(--digi--global--spacing--largest-6) !important;
-}
-
-.digi--util--ptb--80 {
-  padding-top: 4.5rem !important;
-  padding-bottom: 4.5rem !important;
-}
-
-.digi--util--ptb--90 {
-  padding-top: 5rem !important;
-  padding-bottom: 5rem !important;
-}
-
-.digi--util--plr--1 {
-  padding-left: var(--digi--global--spacing--smallest-2) !important;
-  padding-right: var(--digi--global--spacing--smallest-2) !important;
-}
-
-.digi--util--plr--10 {
-  padding-left: var(--digi--global--spacing--smallest) !important;
-  padding-right: var(--digi--global--spacing--smallest) !important;
-}
-
-.digi--util--plr--20 {
-  padding-left: var(--digi--global--spacing--base) !important;
-  padding-right: var(--digi--global--spacing--base) !important;
-}
-
-.digi--util--plr--30 {
-  padding-left: var(--digi--global--spacing--largest-2) !important;
-  padding-right: var(--digi--global--spacing--largest-2) !important;
-}
-
-.digi--util--plr--40 {
-  padding-left: var(--digi--global--spacing--largest-4) !important;
-  padding-right: var(--digi--global--spacing--largest-4) !important;
-}
-
-.digi--util--plr--50 {
-  padding-left: 2.5rem !important;
-  padding-right: 2.5rem !important;
-}
-
-.digi--util--plr--60 {
-  padding-left: var(--digi--global--spacing--largest-5) !important;
-  padding-right: var(--digi--global--spacing--largest-5) !important;
-}
-
-.digi--util--plr--70 {
-  padding-left: var(--digi--global--spacing--largest-6) !important;
-  padding-right: var(--digi--global--spacing--largest-6) !important;
-}
-
-.digi--util--plr--80 {
-  padding-left: 4.5rem !important;
-  padding-right: 4.5rem !important;
-}
-
-.digi--util--plr--90 {
-  padding-left: 5rem !important;
-  padding-right: 5rem !important;
-}
-
-.digi--util--sr-only {
-  border: 0;
-  clip: rect(1px, 1px, 1px, 1px);
-  -webkit-clip-path: inset(50%);
-  clip-path: inset(50%);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-  white-space: nowrap;
-}
-
-.digi--util--hidden {
-  display: none;
-}
-
-/** Do not touch! Autogenerated 
-* @prop --digi--header-navigation-item--font-family: var(--digi--global--typography--font-family--default);
-* @prop --digi--header-navigation-item--font-size: var(--digi--typography--body--font-size--desktop);
-* @prop --digi--header-navigation-item--color: var(--digi--color--text--primary);
-* @prop --digi--header-navigation-item--color-hover: var(--digi--color--text--link);
-* @prop --digi--header-navigation-item--color-active: var(--digi--color--text--link);
-*/
 :host {
   --digi--header-navigation-item--font-family: var(--digi--global--typography--font-family--default);
   --digi--header-navigation-item--font-size: var(--digi--typography--body--font-size--desktop);
-  --digi--header-navigation-item--color: var(--digi--color--text--primary);
-  --digi--header-navigation-item--color-hover: var(--digi--color--text--link);
-  --digi--header-navigation-item--color-active: var(--digi--color--text--link);
-  --digi--header-navigation-item-indicator--inactive--color: var(--digi--color--background--neutral-8);
-  --digi--header-navigation-item-indicator--inactive-hover--color: var(--digi--color--background--neutral-6);
-  --digi--header-navigation-item-indicator--active--color: var(--digi--leaf-500);
+  --digi--header-navigation-item--color: var(--digi--color--text--interactive--tertiary);
+  --digi--header-navigation-item--color-hover: var(--digi--color--text--interactive--primary);
+  --digi--header-navigation-item--color-active: var(--digi--color--text--interactive--primary);
+  --digi--header-navigation-item-indicator--inactive--color: var(--digi--color--background--secondary-muted);
+  --digi--header-navigation-item-indicator--inactive-hover--color: var(--digi--color--background--interactive--hover--quarternary);
+  --digi--header-navigation-item-indicator--active--color: var(--digi--color--marking--navigation--selected);
   display: block;
-  --INDICATOR-COLOR: var(
-    --digi--header-navigation-item-indicator--inactive--color
-  );
+  --INDICATOR-COLOR: var(--digi--header-navigation-item-indicator--inactive--color);
 }
 :host ::slotted(a) {
   display: block;
   text-decoration: none;
-  color: inherit;
-  padding: 1rem;
+  padding: var(--digi--padding--medium);
   color: var(--digi--header-navigation-item--color);
   font-family: var(--digi--header-navigation-item--font-family);
   font-size: var(--digi--header-navigation-item--font-size);
@@ -293,19 +25,15 @@ License: none (public domain)
 :host ::slotted(a:hover),
 :host ::slotted(a:active),
 :host ::slotted(a:focus-visible) {
-  background-color: var(--digi--color--background--neutral-6);
+  background-color: var(--digi--header-navigation-item-indicator--inactive-hover--color);
   color: var(--digi--header-navigation-item--color-hover);
   text-decoration: underline;
 }
 :host ::slotted(a:hover) + .digi-header-navigation-item-indicator {
-  --INDICATOR-COLOR: var(
-    --digi--header-navigation-item-indicator--inactive-hover--color
-  );
+  --INDICATOR-COLOR: var(--digi--header-navigation-item-indicator--inactive-hover--color);
 }
 :host ::slotted(a:hover) + .digi-header-navigation-item-indicator--active {
-  --INDICATOR-COLOR: var(
-    --digi--header-navigation-item-indicator--active--color
-  );
+  --INDICATOR-COLOR: var(--digi--header-navigation-item-indicator--active--color);
 }
 :host ::slotted(a:focus-visible) {
   outline: 2px solid black;
@@ -319,9 +47,7 @@ License: none (public domain)
   background-color: var(--INDICATOR-COLOR);
 }
 .digi-header-navigation-item-indicator--active {
-  --INDICATOR-COLOR: var(
-    --digi--header-navigation-item-indicator--active--color
-  );
+  --INDICATOR-COLOR: var(--digi--header-navigation-item-indicator--active--color);
 }
 
 .digi-header-navigation-item--active ::slotted(a) {

package/dist/collection/components/_header/header-navigation-item/header-navigation-item.js

@@ -15,7 +15,7 @@ export class HeaderNavigationItem {
         };
     }
     render() {
-        return (h("div", { key: 'f2b3d1a422eef5c01dd6c4e6c5837590ca99d174', role: "listitem", class: Object.assign({ 'digi-header-navigation-item': true }, this.cssModifiers) }, h("slot", { key: '534a3b60765e7872d8738a778e6f4d1f6da96922' }), h("div", { key: 'bd18424c88956d1b555032afbda0250dc69e2368', class: Object.assign({ 'digi-header-navigation-item-indicator': true }, this.cssModifiers) })));
+        return (h("div", { key: '2da8031ab1a04399c649122865b19b085ad0f816', role: "listitem", class: Object.assign({ 'digi-header-navigation-item': true }, this.cssModifiers) }, h("slot", { key: 'ee3a995a79159ca84e881d1040e98c9f27ccf6e4' }), h("div", { key: '7295781cf81a2c899dc1f7a9a577ada093782796', class: Object.assign({ 'digi-header-navigation-item-indicator': true }, this.cssModifiers) })));
     }
     static get is() { return "digi-header-navigation-item"; }
     static get encapsulation() { return "scoped"; }