@sikt/sds-header 5.0.0 → 5.1.0

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.
 
+## [5.1.0](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-header@5.0.1...@sikt/sds-header@5.1.0) (2026-03-12)
+
+### Features
+
+- prevent hover states on touch devices ([8c5f556](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/8c5f5569c8fa6aadc3395448b6c388b1692b9742))
+
+## [5.0.1](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-header@5.0.0...@sikt/sds-header@5.0.1) (2026-02-06)
+
+### Bug Fixes
+
+- **header:** left slot border even if logo do not have link ([08d1d25](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/08d1d25a803d163d3dcb07ba4b7725a4555480c9))
+
 ## [5.0.0](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-header@4.0.3...@sikt/sds-header@5.0.0) (2026-01-14)
 
 ### ⚠ BREAKING CHANGES

package/dist/index.css

@@ -29,10 +29,14 @@
   width: fit-content;
 }
 .sds-typography-link:has(.sds-header__logo):active,
-.sds-typography-link:has(.sds-header__logo):focus-visible,
-.sds-typography-link:has(.sds-header__logo):hover {
+.sds-typography-link:has(.sds-header__logo):focus-visible {
   background-color: unset;
 }
+@media (pointer: fine) {
+  .sds-typography-link:has(.sds-header__logo):hover {
+    background-color: unset;
+  }
+}
 .sds-header__content {
   align-items: center;
   display: grid;
@@ -53,7 +57,7 @@
   gap: var(--sds-space-padding-small);
   justify-self: start;
 }
-.sds-header__content-left .sds-typography-link:has(.sds-header__logo):has(+ .sds-header__content-left-item) {
+.sds-header__content-left > *:has(+ .sds-header__content-left-item) {
   border-left: 1px solid #737373;
   padding-left: var(--sds-space-padding-small);
 }

package/dist/index.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/header.pcss"],"sourcesContent":["/**\n * Do not edit directly, this file was auto-generated.\n */\n\n.sds-header {\n  align-items: center;\n  background-color: var(--sds-color-layout-background-primary);\n  color: var(--sds-color-text-primary);\n  position: relative;\n\n  --header-height: 48px;\n}\n\n@media (width >= 720px) {\n\n.sds-header {\n    --header-height: 56px\n}\n  }\n\n@media (width >= 1024px) {\n\n.sds-header {\n    --header-height: 72px\n}\n  }\n\n.sds-header__skip-link.sds-screen-reader-only--focusable:focus-within {\n    background-color: var(--sds-color-layout-background-primary);\n    position: absolute;\n    z-index: 1;\n  }\n\n.sds-typography-link:has(.sds-header__logo) {\n    background-color: unset;\n    color: inherit;\n    text-decoration: none;\n    width: -webkit-fit-content;\n    width: fit-content;\n  }\n\n.sds-typography-link:has(.sds-header__logo):active,\n    .sds-typography-link:has(.sds-header__logo):focus-visible,\n    .sds-typography-link:has(.sds-header__logo):hover {\n      background-color: unset;\n    }\n\n.sds-header__content {\n    align-items: center;\n    display: grid;\n    gap: 0 var(--sds-space-padding-small);\n    grid-template-columns: 1fr auto;\n    min-height: var(--header-height);\n    padding: 0 var(--sds-space-padding-medium);\n  }\n\n@media (width >= 1024px) {\n\n.sds-header__content {\n      grid-template-columns: 1fr auto 1fr\n  }\n    }\n\n.sds-header__content-left {\n      align-items: center;\n      display: flex;\n      flex-direction: row-reverse;\n      gap: var(--sds-space-padding-small);\n      justify-self: start;\n    }\n\n.sds-header__content-left .sds-typography-link:has(.sds-header__logo):has(+ .sds-header__content-left-item) {\n          border-left: 1px solid #737373;\n          padding-left: var(--sds-space-padding-small);\n        }\n\n.sds-header__content-mid {\n      display: none;\n    }\n\n@media (width >= 1024px) {\n\n.sds-header__content-mid {\n        display: unset\n    }\n      }\n\n.sds-header__content-right {\n      justify-self: flex-end;\n    }\n"],"mappings":";AAIA,CAAC;AACC,eAAa;AACb,oBAAkB,IAAI;AACtB,SAAO,IAAI;AACX,YAAU;AAEV,mBAAiB;AACnB;AAEA,QAAQ,WAAS;AAEjB,GAXC;AAYG,qBAAiB;AACrB;AACE;AAEF,QAAQ,WAAS;AAEjB,GAlBC;AAmBG,qBAAiB;AACrB;AACE;AAEF,CAAC,qBAAqB,CAAC,iCAAiC;AACpD,oBAAkB,IAAI;AACtB,YAAU;AACV,WAAS;AACX;AAEF,CAAC,mBAAmB,KAAK,CAAC;AACtB,oBAAkB;AAClB,SAAO;AACP,mBAAiB;AACjB,SAAO;AACP,SAAO;AACT;AAEF,CARC,mBAQmB,KAAK,CARC,iBAQiB;AACvC,CATH,mBASuB,KAAK,CATH,iBASqB;AAC3C,CAVH,mBAUuB,KAAK,CAVH,iBAUqB;AACzC,oBAAkB;AACpB;AAEJ,CAAC;AACG,eAAa;AACb,WAAS;AACT,OAAK,EAAE,IAAI;AACX,yBAAuB,IAAI;AAC3B,cAAY,IAAI;AAChB,WAAS,EAAE,IAAI;AACjB;AAEF,QAAQ,WAAS;AAEjB,GAXC;AAYK,2BAAuB,IAAI,KAAK;AACpC;AACE;AAEJ,CAAC;AACK,eAAa;AACb,WAAS;AACT,kBAAgB;AAChB,OAAK,IAAI;AACT,gBAAc;AAChB;AAEJ,CARC,yBAQyB,CAtCzB,mBAsC6C,KAAK,CAtCzB,iBAsC2C,KAAK,EAAE,CAAC;AACnE,eAAa,IAAI,MAAM;AACvB,gBAAc,IAAI;AACpB;AAER,CAAC;AACK,WAAS;AACX;AAEJ,QAAQ,WAAS;AAEjB,GANC;AAOO,aAAS;AACb;AACE;AAEN,CAAC;AACK,gBAAc;AAChB;","names":[]}
+{"version":3,"sources":["../src/header.pcss"],"sourcesContent":["/**\n * Do not edit directly, this file was auto-generated.\n */\n\n.sds-header {\n  align-items: center;\n  background-color: var(--sds-color-layout-background-primary);\n  color: var(--sds-color-text-primary);\n  position: relative;\n\n  --header-height: 48px;\n}\n\n@media (width >= 720px) {\n\n.sds-header {\n    --header-height: 56px\n}\n  }\n\n@media (width >= 1024px) {\n\n.sds-header {\n    --header-height: 72px\n}\n  }\n\n.sds-header__skip-link.sds-screen-reader-only--focusable:focus-within {\n    background-color: var(--sds-color-layout-background-primary);\n    position: absolute;\n    z-index: 1;\n  }\n\n.sds-typography-link:has(.sds-header__logo) {\n    background-color: unset;\n    color: inherit;\n    text-decoration: none;\n    width: -webkit-fit-content;\n    width: fit-content;\n  }\n\n.sds-typography-link:has(.sds-header__logo):active,\n    .sds-typography-link:has(.sds-header__logo):focus-visible {\n      background-color: unset;\n    }\n\n@media (pointer: fine) {\n      .sds-typography-link:has(.sds-header__logo):hover {\n        background-color: unset;\n      }\n    }\n\n.sds-header__content {\n    align-items: center;\n    display: grid;\n    gap: 0 var(--sds-space-padding-small);\n    grid-template-columns: 1fr auto;\n    min-height: var(--header-height);\n    padding: 0 var(--sds-space-padding-medium);\n  }\n\n@media (width >= 1024px) {\n\n.sds-header__content {\n      grid-template-columns: 1fr auto 1fr\n  }\n    }\n\n.sds-header__content-left {\n      align-items: center;\n      display: flex;\n      flex-direction: row-reverse;\n      gap: var(--sds-space-padding-small);\n      justify-self: start;\n    }\n\n.sds-header__content-left > *:has(+ .sds-header__content-left-item) {\n        border-left: 1px solid #737373;\n        padding-left: var(--sds-space-padding-small);\n      }\n\n.sds-header__content-mid {\n      display: none;\n    }\n\n@media (width >= 1024px) {\n\n.sds-header__content-mid {\n        display: unset\n    }\n      }\n\n.sds-header__content-right {\n      justify-self: flex-end;\n    }\n"],"mappings":";AAIA,CAAC;AACC,eAAa;AACb,oBAAkB,IAAI;AACtB,SAAO,IAAI;AACX,YAAU;AAEV,mBAAiB;AACnB;AAEA,QAAQ,WAAS;AAEjB,GAXC;AAYG,qBAAiB;AACrB;AACE;AAEF,QAAQ,WAAS;AAEjB,GAlBC;AAmBG,qBAAiB;AACrB;AACE;AAEF,CAAC,qBAAqB,CAAC,iCAAiC;AACpD,oBAAkB,IAAI;AACtB,YAAU;AACV,WAAS;AACX;AAEF,CAAC,mBAAmB,KAAK,CAAC;AACtB,oBAAkB;AAClB,SAAO;AACP,mBAAiB;AACjB,SAAO;AACP,SAAO;AACT;AAEF,CARC,mBAQmB,KAAK,CARC,iBAQiB;AACvC,CATH,mBASuB,KAAK,CATH,iBASqB;AACzC,oBAAkB;AACpB;AAEJ,QAAO,SAAU;AACX,GAdL,mBAcyB,KAAK,CAdL,iBAcuB;AACzC,sBAAkB;AACpB;AACF;AAEJ,CAAC;AACG,eAAa;AACb,WAAS;AACT,OAAK,EAAE,IAAI;AACX,yBAAuB,IAAI;AAC3B,cAAY,IAAI;AAChB,WAAS,EAAE,IAAI;AACjB;AAEF,QAAQ,WAAS;AAEjB,GAXC;AAYK,2BAAuB,IAAI,KAAK;AACpC;AACE;AAEJ,CAAC;AACK,eAAa;AACb,WAAS;AACT,kBAAgB;AAChB,OAAK,IAAI;AACT,gBAAc;AAChB;AAEJ,CARC,yBAQyB,EAAE,CAAC,KAAK,EAAE,CAAC;AAC7B,eAAa,IAAI,MAAM;AACvB,gBAAc,IAAI;AACpB;AAEN,CAAC;AACK,WAAS;AACX;AAEJ,QAAQ,WAAS;AAEjB,GANC;AAOO,aAAS;AACb;AACE;AAEN,CAAC;AACK,gBAAc;AAChB;","names":[]}

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Header.tsx"],"names":["_a","jsx","Logo","jsxs","Fragment","ScreenReaderOnly","Link","clsx","isValidElement","cloneElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsEa,IAAA,MAAA,GAAS,CAAC,EAYJ,KAAA;AAZI,EACrB,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,iBAAA;AAAA,IACA,SAAA;AAAA,IACA,UAAa,GAAA,MAAA;AAAA,IACb,YAAe,GAAA,mBAAA;AAAA,IACf,QAAA;AAAA,IACA,QAAW,GAAA;AAAA,GAhFb,GAsEuB,EAWlB,EAAA,IAAA,GAAA,SAAA,CAXkB,EAWlB,EAAA;AAAA,IAVH,UAAA;AAAA,IACA,SAAA;AAAA,IACA,UAAA;AAAA,IACA,WAAA;AAAA,IACA,mBAAA;AAAA,IACA,WAAA;AAAA,IACA,YAAA;AAAA,IACA,cAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GAAA,CAAA;AAhFF,EAAAA,IAAAA,GAAAA;AAmFE,EAAA,MAAM,8BACHC,cAAA,CAAAC,YAAA,EAAA,EAAK,WAAa,EAAA,QAAA,EAAU,WAAU,kBAAmB,EAAA,CAAA;AAG5D,EAAA,uBAEIC,eAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAACH,cAAA,CAAAI,wBAAA,EAAA,EAAiB,WAAW,EAAA,IAAA,EAAC,SAAU,EAAA,uBAAA,EACtC,QAAC,kBAAAJ,cAAA,CAAAK,YAAA,EAAA,EAAK,IAAM,EAAA,GAAA,CAAI,MAAe,CAAA,UAAA,CAAA,EAAA,QAAA,EAAA,YAAA,EAAa,CAC9C,EAAA,CAAA;AAAA,IACC,OAAA;AAAA,oBACAL,cAAA,CAAA,QAAA,EAAA,aAAA,CAAA,cAAA,CAAA,EAAO,SAAW,EAAAM,SAAA,CAAK,YAAc,EAAA,SAAS,CAAO,EAAA,EAAA,IAAA,CAAA,EAArD,EACC,QAAA,kBAAAJ,eAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,qBACb,EAAA,QAAA,EAAA;AAAA,sBAACA,eAAA,CAAA,KAAA,EAAA,EAAI,WAAU,0BACZ,EAAA,QAAA,EAAA;AAAA,QAAA,QAAA,IAAYK,oBAAe,CAAA,QAAQ,CAChC,GAAAC,kBAAA,CAAa,QAAUT,EAAAA,CAAAA,GAAAA,GAAA,QAAS,CAAA,KAAA,KAAT,IAAAA,GAAAA,GAAAA,GAAkB,EAAC,EAAG,WAAW,CACxD,GAAA,WAAA;AAAA,QACH,QACC,oBAAAC,cAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,iCAAiC,QAAS,EAAA,QAAA,EAAA;AAAA,OAE7D,EAAA,CAAA;AAAA,sBACCA,cAAA,CAAA,KAAA,EAAA,EAAI,SAAU,EAAA,yBAAA,EAA2B,QAAS,EAAA,CAAA;AAAA,MAClD,SACC,oBAAAA,cAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,6BAA6B,QAAU,EAAA,SAAA,EAAA;AAAA,KAAA,EAE1D,CACF,EAAA,CAAA,CAAA;AAAA,IACC;AAAA,GACH,EAAA,CAAA;AAEJ;AACA,MAAA,CAAO,WAAc,GAAA,QAAA","file":"index.js","sourcesContent":["import { Link, ScreenReaderOnly } from \"@sikt/sds-core\";\nimport { Logo } from \"@sikt/sds-logo\";\nimport { clsx } from \"clsx/lite\";\nimport {\n  AnchorHTMLAttributes,\n  HTMLAttributes,\n  ReactElement,\n  ReactNode,\n  cloneElement,\n  isValidElement,\n} from \"react\";\nimport \"./header.pcss\";\n\nexport interface HeaderProps extends HTMLAttributes<HTMLElement> {\n  className?: string;\n  /**\n   * Slot for adding content to the center of the Header.\n   *\n   * @default undefined\n   */\n  children?:\n    | ReactElement<AnchorHTMLAttributes<HTMLAnchorElement>>\n    | ReactElement<AnchorHTMLAttributes<HTMLAnchorElement>>[];\n  /**\n   * Slot for adding content above the header, like a global menu between services.\n   *\n   * @default undefined\n   */\n  topSlot?: ReactNode;\n  /**\n   * Slot for adding content to the left side of the Header.\n   *\n   * @default undefined\n   */\n  leftSlot?: ReactNode;\n  /**\n   * Slot for adding content to the right side of the Header.\n   *\n   * @default undefined\n   */\n  rightSlot?: ReactNode;\n  /**\n   * Slot for adding an `<ApplicationStatus />`.\n   *\n   * @default undefined\n   */\n  applicationStatus?: ReactNode;\n  /**\n   * Id for main content element where the skip link will anchor link.\n   *\n   * @default \"main\"\n   */\n  skipLinkId?: string;\n  /**\n   * Text for the skip link anchor link.\n   *\n   * @default \"Gå til innhold\"\n   */\n  skipLinkText?: string;\n  /**\n   * Element to wrap logotype. Can be any framework routing `<Link />`, like `next/link` or `react-router`.\n   * Should have className `sds-typography-link`.\n   * Children will be overwritten with `logoText` prop.\n   *\n   * @default undefined\n   */\n  logoLink?: ReactNode;\n  logoText?: string;\n}\n\nexport const Header = ({\n  children,\n  topSlot,\n  leftSlot,\n  rightSlot,\n  applicationStatus,\n  className,\n  skipLinkId = \"main\",\n  skipLinkText = \"Gå til innhold\",\n  logoLink,\n  logoText = \"Sikt\",\n  ...rest\n}: HeaderProps) => {\n  const logoElement = (\n    <Logo productName={logoText} className=\"sds-header__logo\" />\n  );\n\n  return (\n    <>\n      <ScreenReaderOnly isFocusable className=\"sds-header__skip-link\">\n        <Link href={`#${skipLinkId}`}>{skipLinkText}</Link>\n      </ScreenReaderOnly>\n      {topSlot}\n      <header className={clsx(\"sds-header\", className)} {...rest}>\n        <div className=\"sds-header__content\">\n          <div className=\"sds-header__content-left\">\n            {logoLink && isValidElement(logoLink)\n              ? cloneElement(logoLink, logoLink.props ?? {}, logoElement)\n              : logoElement}\n            {leftSlot && (\n              <div className=\"sds-header__content-left-item\">{leftSlot}</div>\n            )}\n          </div>\n          <div className=\"sds-header__content-mid\">{children}</div>\n          {rightSlot && (\n            <div className=\"sds-header__content-right\">{rightSlot}</div>\n          )}\n        </div>\n      </header>\n      {applicationStatus}\n    </>\n  );\n};\nHeader.displayName = \"Header\";\n"]}
+{"version":3,"sources":["../src/Header.tsx"],"names":["_a","jsx","Logo","jsxs","Fragment","ScreenReaderOnly","Link","clsx","isValidElement","cloneElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsEO,IAAM,MAAA,GAAS,CAAC,EAAA,KAYJ;AAZI,EAAA,IAAA,EAAA,GAAA,EAAA,EACrB;AAAA,IAAA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,iBAAA;AAAA,IACA,SAAA;AAAA,IACA,UAAA,GAAa,MAAA;AAAA,IACb,YAAA,GAAe,mBAAA;AAAA,IACf,QAAA;AAAA,IACA,QAAA,GAAW;AAAA,GAhFb,GAsEuB,EAAA,EAWlB,IAAA,GAAA,SAAA,CAXkB,EAAA,EAWlB;AAAA,IAVH,UAAA;AAAA,IACA,SAAA;AAAA,IACA,UAAA;AAAA,IACA,WAAA;AAAA,IACA,mBAAA;AAAA,IACA,WAAA;AAAA,IACA,YAAA;AAAA,IACA,cAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GAAA,CAAA;AAhFF,EAAA,IAAAA,GAAAA;AAmFE,EAAA,MAAM,8BACJC,cAAA,CAACC,YAAA,EAAA,EAAK,WAAA,EAAa,QAAA,EAAU,WAAU,kBAAA,EAAmB,CAAA;AAG5D,EAAA,uBACEC,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAAH,cAAA,CAACI,wBAAA,EAAA,EAAiB,WAAA,EAAW,IAAA,EAAC,SAAA,EAAU,uBAAA,EACtC,QAAA,kBAAAJ,cAAA,CAACK,YAAA,EAAA,EAAK,IAAA,EAAM,GAAA,CAAI,MAAA,CAAA,UAAA,CAAA,EAAe,QAAA,EAAA,YAAA,EAAa,CAAA,EAC9C,CAAA;AAAA,IACC,OAAA;AAAA,oBACDL,cAAA,CAAC,QAAA,EAAA,aAAA,CAAA,cAAA,CAAA,EAAO,SAAA,EAAWM,SAAA,CAAK,YAAA,EAAc,SAAS,CAAA,EAAA,EAAO,IAAA,CAAA,EAArD,EACC,QAAA,kBAAAJ,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,qBAAA,EACb,QAAA,EAAA;AAAA,sBAAAA,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,0BAAA,EACZ,QAAA,EAAA;AAAA,QAAA,QAAA,IAAYK,oBAAA,CAAe,QAAQ,CAAA,GAChCC,kBAAA,CAAa,QAAA,EAAA,CAAUT,GAAAA,GAAA,QAAA,CAAS,KAAA,KAAT,IAAA,GAAAA,GAAAA,GAAkB,EAAC,EAAG,WAAW,CAAA,GACxD,WAAA;AAAA,QACH,QAAA,oBACCC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,iCAAiC,QAAA,EAAA,QAAA,EAAS;AAAA,OAAA,EAE7D,CAAA;AAAA,sBACAA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yBAAA,EAA2B,QAAA,EAAS,CAAA;AAAA,MAClD,SAAA,oBACCA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,6BAA6B,QAAA,EAAA,SAAA,EAAU;AAAA,KAAA,EAE1D,CAAA,EAAA,CACF,CAAA;AAAA,IACC;AAAA,GAAA,EACH,CAAA;AAEJ;AACA,MAAA,CAAO,WAAA,GAAc,QAAA","file":"index.js","sourcesContent":["import { Link, ScreenReaderOnly } from \"@sikt/sds-core\";\nimport { Logo } from \"@sikt/sds-logo\";\nimport { clsx } from \"clsx/lite\";\nimport {\n  AnchorHTMLAttributes,\n  HTMLAttributes,\n  ReactElement,\n  ReactNode,\n  cloneElement,\n  isValidElement,\n} from \"react\";\nimport \"./header.pcss\";\n\nexport interface HeaderProps extends HTMLAttributes<HTMLElement> {\n  className?: string;\n  /**\n   * Slot for adding content to the center of the Header.\n   *\n   * @default undefined\n   */\n  children?:\n    | ReactElement<AnchorHTMLAttributes<HTMLAnchorElement>>\n    | ReactElement<AnchorHTMLAttributes<HTMLAnchorElement>>[];\n  /**\n   * Slot for adding content above the header, like a global menu between services.\n   *\n   * @default undefined\n   */\n  topSlot?: ReactNode;\n  /**\n   * Slot for adding content to the left side of the Header.\n   *\n   * @default undefined\n   */\n  leftSlot?: ReactNode;\n  /**\n   * Slot for adding content to the right side of the Header.\n   *\n   * @default undefined\n   */\n  rightSlot?: ReactNode;\n  /**\n   * Slot for adding an `<ApplicationStatus />`.\n   *\n   * @default undefined\n   */\n  applicationStatus?: ReactNode;\n  /**\n   * Id for main content element where the skip link will anchor link.\n   *\n   * @default \"main\"\n   */\n  skipLinkId?: string;\n  /**\n   * Text for the skip link anchor link.\n   *\n   * @default \"Gå til innhold\"\n   */\n  skipLinkText?: string;\n  /**\n   * Element to wrap logotype. Can be any framework routing `<Link />`, like `next/link` or `react-router`.\n   * Should have className `sds-typography-link`.\n   * Children will be overwritten with `logoText` prop.\n   *\n   * @default undefined\n   */\n  logoLink?: ReactNode;\n  logoText?: string;\n}\n\nexport const Header = ({\n  children,\n  topSlot,\n  leftSlot,\n  rightSlot,\n  applicationStatus,\n  className,\n  skipLinkId = \"main\",\n  skipLinkText = \"Gå til innhold\",\n  logoLink,\n  logoText = \"Sikt\",\n  ...rest\n}: HeaderProps) => {\n  const logoElement = (\n    <Logo productName={logoText} className=\"sds-header__logo\" />\n  );\n\n  return (\n    <>\n      <ScreenReaderOnly isFocusable className=\"sds-header__skip-link\">\n        <Link href={`#${skipLinkId}`}>{skipLinkText}</Link>\n      </ScreenReaderOnly>\n      {topSlot}\n      <header className={clsx(\"sds-header\", className)} {...rest}>\n        <div className=\"sds-header__content\">\n          <div className=\"sds-header__content-left\">\n            {logoLink && isValidElement(logoLink)\n              ? cloneElement(logoLink, logoLink.props ?? {}, logoElement)\n              : logoElement}\n            {leftSlot && (\n              <div className=\"sds-header__content-left-item\">{leftSlot}</div>\n            )}\n          </div>\n          <div className=\"sds-header__content-mid\">{children}</div>\n          {rightSlot && (\n            <div className=\"sds-header__content-right\">{rightSlot}</div>\n          )}\n        </div>\n      </header>\n      {applicationStatus}\n    </>\n  );\n};\nHeader.displayName = \"Header\";\n"]}

package/dist/index.mjs

@@ -1 +1 @@
-import{ScreenReaderOnly as e,Link as r}from"@sikt/sds-core";import{Logo as t}from"@sikt/sds-logo";import{clsx as i}from"clsx/lite";import{cloneElement as l,isValidElement as o}from"react";import{jsxs as a,Fragment as s,jsx as n}from"react/jsx-runtime";var c=Object.defineProperty,d=Object.defineProperties,p=Object.getOwnPropertyDescriptors,m=Object.getOwnPropertySymbols,h=Object.prototype.hasOwnProperty,f=Object.prototype.propertyIsEnumerable,k=(e,r,t)=>r in e?c(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,u=(e,r)=>{for(var t in r||(r={}))h.call(r,t)&&k(e,t,r[t]);if(m)for(var t of m(r))f.call(r,t)&&k(e,t,r[t]);return e},v=c=>{var k,v=c,{children:_,topSlot:b,leftSlot:g,rightSlot:N,applicationStatus:O,className:S,skipLinkId:x="main",skipLinkText:y="Gå til innhold",logoLink:j,logoText:L="Sikt"}=v,P=((e,r)=>{var t={};for(var i in e)h.call(e,i)&&r.indexOf(i)<0&&(t[i]=e[i]);if(null!=e&&m)for(var i of m(e))r.indexOf(i)<0&&f.call(e,i)&&(t[i]=e[i]);return t})(v,["children","topSlot","leftSlot","rightSlot","applicationStatus","className","skipLinkId","skipLinkText","logoLink","logoText"]);const w=n(t,{productName:L,className:"sds-header__logo"});return a(s,{children:[n(e,{isFocusable:!0,className:"sds-header__skip-link",children:n(r,{href:"#".concat(x),children:y})}),b,n("header",(T=u({className:i("sds-header",S)},P),I={children:a("div",{className:"sds-header__content",children:[a("div",{className:"sds-header__content-left",children:[j&&o(j)?l(j,null!=(k=j.props)?k:{},w):w,g&&n("div",{className:"sds-header__content-left-item",children:g})]}),n("div",{className:"sds-header__content-mid",children:_}),N&&n("div",{className:"sds-header__content-right",children:N})]})},d(T,p(I)))),O]});var T,I};v.displayName="Header";export{v as Header};//# sourceMappingURL=index.mjs.map
+import{ScreenReaderOnly as e,Link as r}from"@sikt/sds-core";import{Logo as t}from"@sikt/sds-logo";import{clsx as i}from"clsx/lite";import{isValidElement as l,cloneElement as o}from"react";import{jsxs as a,Fragment as s,jsx as n}from"react/jsx-runtime";var c=Object.defineProperty,d=Object.defineProperties,p=Object.getOwnPropertyDescriptors,m=Object.getOwnPropertySymbols,h=Object.prototype.hasOwnProperty,f=Object.prototype.propertyIsEnumerable,k=(e,r,t)=>r in e?c(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,u=(e,r)=>{for(var t in r||(r={}))h.call(r,t)&&k(e,t,r[t]);if(m)for(var t of m(r))f.call(r,t)&&k(e,t,r[t]);return e},v=c=>{var k,v=c,{children:_,topSlot:b,leftSlot:g,rightSlot:N,applicationStatus:O,className:S,skipLinkId:x="main",skipLinkText:y="Gå til innhold",logoLink:j,logoText:L="Sikt"}=v,P=((e,r)=>{var t={};for(var i in e)h.call(e,i)&&r.indexOf(i)<0&&(t[i]=e[i]);if(null!=e&&m)for(var i of m(e))r.indexOf(i)<0&&f.call(e,i)&&(t[i]=e[i]);return t})(v,["children","topSlot","leftSlot","rightSlot","applicationStatus","className","skipLinkId","skipLinkText","logoLink","logoText"]);const w=n(t,{productName:L,className:"sds-header__logo"});return a(s,{children:[n(e,{isFocusable:!0,className:"sds-header__skip-link",children:n(r,{href:"#".concat(x),children:y})}),b,n("header",(T=u({className:i("sds-header",S)},P),I={children:a("div",{className:"sds-header__content",children:[a("div",{className:"sds-header__content-left",children:[j&&l(j)?o(j,null!=(k=j.props)?k:{},w):w,g&&n("div",{className:"sds-header__content-left-item",children:g})]}),n("div",{className:"sds-header__content-mid",children:_}),N&&n("div",{className:"sds-header__content-right",children:N})]})},d(T,p(I)))),O]});var T,I};v.displayName="Header";export{v as Header};//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Header.tsx"],"names":["_a"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsEa,IAAA,MAAA,GAAS,CAAC,EAYJ,KAAA;AAZI,EACrB,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,iBAAA;AAAA,IACA,SAAA;AAAA,IACA,UAAa,GAAA,MAAA;AAAA,IACb,YAAe,GAAA,mBAAA;AAAA,IACf,QAAA;AAAA,IACA,QAAW,GAAA;AAAA,GAhFb,GAsEuB,EAWlB,EAAA,IAAA,GAAA,SAAA,CAXkB,EAWlB,EAAA;AAAA,IAVH,UAAA;AAAA,IACA,SAAA;AAAA,IACA,UAAA;AAAA,IACA,WAAA;AAAA,IACA,mBAAA;AAAA,IACA,WAAA;AAAA,IACA,YAAA;AAAA,IACA,cAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GAAA,CAAA;AAhFF,EAAAA,IAAAA,GAAAA;AAmFE,EAAA,MAAM,8BACH,GAAA,CAAA,IAAA,EAAA,EAAK,WAAa,EAAA,QAAA,EAAU,WAAU,kBAAmB,EAAA,CAAA;AAG5D,EAAA,uBAEI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,gBAAA,EAAA,EAAiB,WAAW,EAAA,IAAA,EAAC,SAAU,EAAA,uBAAA,EACtC,QAAC,kBAAA,GAAA,CAAA,IAAA,EAAA,EAAK,IAAM,EAAA,GAAA,CAAI,MAAe,CAAA,UAAA,CAAA,EAAA,QAAA,EAAA,YAAA,EAAa,CAC9C,EAAA,CAAA;AAAA,IACC,OAAA;AAAA,oBACA,GAAA,CAAA,QAAA,EAAA,aAAA,CAAA,cAAA,CAAA,EAAO,SAAW,EAAA,IAAA,CAAK,YAAc,EAAA,SAAS,CAAO,EAAA,EAAA,IAAA,CAAA,EAArD,EACC,QAAA,kBAAA,IAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,qBACb,EAAA,QAAA,EAAA;AAAA,sBAAC,IAAA,CAAA,KAAA,EAAA,EAAI,WAAU,0BACZ,EAAA,QAAA,EAAA;AAAA,QAAA,QAAA,IAAY,cAAe,CAAA,QAAQ,CAChC,GAAA,YAAA,CAAa,QAAUA,EAAAA,CAAAA,GAAAA,GAAA,QAAS,CAAA,KAAA,KAAT,IAAAA,GAAAA,GAAAA,GAAkB,EAAC,EAAG,WAAW,CACxD,GAAA,WAAA;AAAA,QACH,QACC,oBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,iCAAiC,QAAS,EAAA,QAAA,EAAA;AAAA,OAE7D,EAAA,CAAA;AAAA,sBACC,GAAA,CAAA,KAAA,EAAA,EAAI,SAAU,EAAA,yBAAA,EAA2B,QAAS,EAAA,CAAA;AAAA,MAClD,SACC,oBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,6BAA6B,QAAU,EAAA,SAAA,EAAA;AAAA,KAAA,EAE1D,CACF,EAAA,CAAA,CAAA;AAAA,IACC;AAAA,GACH,EAAA,CAAA;AAEJ;AACA,MAAA,CAAO,WAAc,GAAA,QAAA","file":"index.mjs","sourcesContent":["import { Link, ScreenReaderOnly } from \"@sikt/sds-core\";\nimport { Logo } from \"@sikt/sds-logo\";\nimport { clsx } from \"clsx/lite\";\nimport {\n  AnchorHTMLAttributes,\n  HTMLAttributes,\n  ReactElement,\n  ReactNode,\n  cloneElement,\n  isValidElement,\n} from \"react\";\nimport \"./header.pcss\";\n\nexport interface HeaderProps extends HTMLAttributes<HTMLElement> {\n  className?: string;\n  /**\n   * Slot for adding content to the center of the Header.\n   *\n   * @default undefined\n   */\n  children?:\n    | ReactElement<AnchorHTMLAttributes<HTMLAnchorElement>>\n    | ReactElement<AnchorHTMLAttributes<HTMLAnchorElement>>[];\n  /**\n   * Slot for adding content above the header, like a global menu between services.\n   *\n   * @default undefined\n   */\n  topSlot?: ReactNode;\n  /**\n   * Slot for adding content to the left side of the Header.\n   *\n   * @default undefined\n   */\n  leftSlot?: ReactNode;\n  /**\n   * Slot for adding content to the right side of the Header.\n   *\n   * @default undefined\n   */\n  rightSlot?: ReactNode;\n  /**\n   * Slot for adding an `<ApplicationStatus />`.\n   *\n   * @default undefined\n   */\n  applicationStatus?: ReactNode;\n  /**\n   * Id for main content element where the skip link will anchor link.\n   *\n   * @default \"main\"\n   */\n  skipLinkId?: string;\n  /**\n   * Text for the skip link anchor link.\n   *\n   * @default \"Gå til innhold\"\n   */\n  skipLinkText?: string;\n  /**\n   * Element to wrap logotype. Can be any framework routing `<Link />`, like `next/link` or `react-router`.\n   * Should have className `sds-typography-link`.\n   * Children will be overwritten with `logoText` prop.\n   *\n   * @default undefined\n   */\n  logoLink?: ReactNode;\n  logoText?: string;\n}\n\nexport const Header = ({\n  children,\n  topSlot,\n  leftSlot,\n  rightSlot,\n  applicationStatus,\n  className,\n  skipLinkId = \"main\",\n  skipLinkText = \"Gå til innhold\",\n  logoLink,\n  logoText = \"Sikt\",\n  ...rest\n}: HeaderProps) => {\n  const logoElement = (\n    <Logo productName={logoText} className=\"sds-header__logo\" />\n  );\n\n  return (\n    <>\n      <ScreenReaderOnly isFocusable className=\"sds-header__skip-link\">\n        <Link href={`#${skipLinkId}`}>{skipLinkText}</Link>\n      </ScreenReaderOnly>\n      {topSlot}\n      <header className={clsx(\"sds-header\", className)} {...rest}>\n        <div className=\"sds-header__content\">\n          <div className=\"sds-header__content-left\">\n            {logoLink && isValidElement(logoLink)\n              ? cloneElement(logoLink, logoLink.props ?? {}, logoElement)\n              : logoElement}\n            {leftSlot && (\n              <div className=\"sds-header__content-left-item\">{leftSlot}</div>\n            )}\n          </div>\n          <div className=\"sds-header__content-mid\">{children}</div>\n          {rightSlot && (\n            <div className=\"sds-header__content-right\">{rightSlot}</div>\n          )}\n        </div>\n      </header>\n      {applicationStatus}\n    </>\n  );\n};\nHeader.displayName = \"Header\";\n"]}
+{"version":3,"sources":["../src/Header.tsx"],"names":["_a"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsEO,IAAM,MAAA,GAAS,CAAC,EAAA,KAYJ;AAZI,EAAA,IAAA,EAAA,GAAA,EAAA,EACrB;AAAA,IAAA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,iBAAA;AAAA,IACA,SAAA;AAAA,IACA,UAAA,GAAa,MAAA;AAAA,IACb,YAAA,GAAe,mBAAA;AAAA,IACf,QAAA;AAAA,IACA,QAAA,GAAW;AAAA,GAhFb,GAsEuB,EAAA,EAWlB,IAAA,GAAA,SAAA,CAXkB,EAAA,EAWlB;AAAA,IAVH,UAAA;AAAA,IACA,SAAA;AAAA,IACA,UAAA;AAAA,IACA,WAAA;AAAA,IACA,mBAAA;AAAA,IACA,WAAA;AAAA,IACA,YAAA;AAAA,IACA,cAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GAAA,CAAA;AAhFF,EAAA,IAAAA,GAAAA;AAmFE,EAAA,MAAM,8BACJ,GAAA,CAAC,IAAA,EAAA,EAAK,WAAA,EAAa,QAAA,EAAU,WAAU,kBAAA,EAAmB,CAAA;AAG5D,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,gBAAA,EAAA,EAAiB,WAAA,EAAW,IAAA,EAAC,SAAA,EAAU,uBAAA,EACtC,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAM,GAAA,CAAI,MAAA,CAAA,UAAA,CAAA,EAAe,QAAA,EAAA,YAAA,EAAa,CAAA,EAC9C,CAAA;AAAA,IACC,OAAA;AAAA,oBACD,GAAA,CAAC,QAAA,EAAA,aAAA,CAAA,cAAA,CAAA,EAAO,SAAA,EAAW,IAAA,CAAK,YAAA,EAAc,SAAS,CAAA,EAAA,EAAO,IAAA,CAAA,EAArD,EACC,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,qBAAA,EACb,QAAA,EAAA;AAAA,sBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,0BAAA,EACZ,QAAA,EAAA;AAAA,QAAA,QAAA,IAAY,cAAA,CAAe,QAAQ,CAAA,GAChC,YAAA,CAAa,QAAA,EAAA,CAAUA,GAAAA,GAAA,QAAA,CAAS,KAAA,KAAT,IAAA,GAAAA,GAAAA,GAAkB,EAAC,EAAG,WAAW,CAAA,GACxD,WAAA;AAAA,QACH,QAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,iCAAiC,QAAA,EAAA,QAAA,EAAS;AAAA,OAAA,EAE7D,CAAA;AAAA,sBACA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yBAAA,EAA2B,QAAA,EAAS,CAAA;AAAA,MAClD,SAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,6BAA6B,QAAA,EAAA,SAAA,EAAU;AAAA,KAAA,EAE1D,CAAA,EAAA,CACF,CAAA;AAAA,IACC;AAAA,GAAA,EACH,CAAA;AAEJ;AACA,MAAA,CAAO,WAAA,GAAc,QAAA","file":"index.mjs","sourcesContent":["import { Link, ScreenReaderOnly } from \"@sikt/sds-core\";\nimport { Logo } from \"@sikt/sds-logo\";\nimport { clsx } from \"clsx/lite\";\nimport {\n  AnchorHTMLAttributes,\n  HTMLAttributes,\n  ReactElement,\n  ReactNode,\n  cloneElement,\n  isValidElement,\n} from \"react\";\nimport \"./header.pcss\";\n\nexport interface HeaderProps extends HTMLAttributes<HTMLElement> {\n  className?: string;\n  /**\n   * Slot for adding content to the center of the Header.\n   *\n   * @default undefined\n   */\n  children?:\n    | ReactElement<AnchorHTMLAttributes<HTMLAnchorElement>>\n    | ReactElement<AnchorHTMLAttributes<HTMLAnchorElement>>[];\n  /**\n   * Slot for adding content above the header, like a global menu between services.\n   *\n   * @default undefined\n   */\n  topSlot?: ReactNode;\n  /**\n   * Slot for adding content to the left side of the Header.\n   *\n   * @default undefined\n   */\n  leftSlot?: ReactNode;\n  /**\n   * Slot for adding content to the right side of the Header.\n   *\n   * @default undefined\n   */\n  rightSlot?: ReactNode;\n  /**\n   * Slot for adding an `<ApplicationStatus />`.\n   *\n   * @default undefined\n   */\n  applicationStatus?: ReactNode;\n  /**\n   * Id for main content element where the skip link will anchor link.\n   *\n   * @default \"main\"\n   */\n  skipLinkId?: string;\n  /**\n   * Text for the skip link anchor link.\n   *\n   * @default \"Gå til innhold\"\n   */\n  skipLinkText?: string;\n  /**\n   * Element to wrap logotype. Can be any framework routing `<Link />`, like `next/link` or `react-router`.\n   * Should have className `sds-typography-link`.\n   * Children will be overwritten with `logoText` prop.\n   *\n   * @default undefined\n   */\n  logoLink?: ReactNode;\n  logoText?: string;\n}\n\nexport const Header = ({\n  children,\n  topSlot,\n  leftSlot,\n  rightSlot,\n  applicationStatus,\n  className,\n  skipLinkId = \"main\",\n  skipLinkText = \"Gå til innhold\",\n  logoLink,\n  logoText = \"Sikt\",\n  ...rest\n}: HeaderProps) => {\n  const logoElement = (\n    <Logo productName={logoText} className=\"sds-header__logo\" />\n  );\n\n  return (\n    <>\n      <ScreenReaderOnly isFocusable className=\"sds-header__skip-link\">\n        <Link href={`#${skipLinkId}`}>{skipLinkText}</Link>\n      </ScreenReaderOnly>\n      {topSlot}\n      <header className={clsx(\"sds-header\", className)} {...rest}>\n        <div className=\"sds-header__content\">\n          <div className=\"sds-header__content-left\">\n            {logoLink && isValidElement(logoLink)\n              ? cloneElement(logoLink, logoLink.props ?? {}, logoElement)\n              : logoElement}\n            {leftSlot && (\n              <div className=\"sds-header__content-left-item\">{leftSlot}</div>\n            )}\n          </div>\n          <div className=\"sds-header__content-mid\">{children}</div>\n          {rightSlot && (\n            <div className=\"sds-header__content-right\">{rightSlot}</div>\n          )}\n        </div>\n      </header>\n      {applicationStatus}\n    </>\n  );\n};\nHeader.displayName = \"Header\";\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikt/sds-header",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "license": "UNLICENSED",
   "homepage": "https://designsystem.sikt.no/",
   "repository": {