@oslokommune/punkt-css 16.26.3 → 17.0.0

package/dist/scss/components/_header-global.scss

@@ -0,0 +1,192 @@
+/*
+ * HeaderGlobal component
+ */
+
+@use 'sass:map';
+@use '../abstracts/variables';
+@use '../abstracts/mixins/breakpoints' as *;
+@use '../abstracts/mixins/' as *;
+@use 'header-shared' as shared;
+
+.pkt-header-global-spacer {
+  height: map.get(variables.$spacing, 'size-104');
+
+  &--tablet {
+    height: map.get(variables.$spacing, 'size-88');
+  }
+
+  &--mobile {
+    height: map.get(variables.$spacing, 'size-88');
+  }
+
+  &--mobile#{&}--has-user {
+    height: calc(#{map.get(variables.$spacing, 'size-88')} + #{map.get(variables.$spacing, 'size-56')});
+  }
+}
+
+.pkt-header-global {
+  @include shared.header-chrome;
+  @include shared.header-grid('pkt-header-global', map.get(variables.$spacing, 'size-88'));
+
+  &__logo-area {
+    align-items: center;
+    display: inline-flex;
+    padding-left: map.get(variables.$spacing, 'size-32');
+
+    .pkt-header-global--tablet & {
+      padding-left: map.get(variables.$spacing, 'size-16');
+    }
+
+    .pkt-header-global--mobile & {
+      padding-left: map.get(variables.$spacing, 'size-8');
+    }
+  }
+
+  &__content,
+  &__user {
+    align-items: center;
+    display: inline-flex;
+    min-width: 0;
+  }
+
+  &__content {
+    column-gap: map.get(variables.$spacing, 'size-24');
+
+    .pkt-header-global--tablet & {
+      column-gap: map.get(variables.$spacing, 'size-8');
+    }
+
+    .pkt-header-global--mobile & {
+      column-gap: map.get(variables.$spacing, 'size-8');
+      padding-right: map.get(variables.$spacing, 'size-8');
+    }
+  }
+
+  &__menu-toggle,
+  &__contact {
+    flex: 0 0 auto;
+  }
+
+  &__user {
+    justify-self: end;
+    padding-right: map.get(variables.$spacing, 'size-32');
+
+    .pkt-header-global--tablet:not(.pkt-header-global--mobile) & {
+      padding-right: map.get(variables.$spacing, 'size-16');
+    }
+  }
+
+  &__user-container {
+    position: relative;
+    flex: 0 0 auto;
+
+    &.is-open {
+      z-index: 100;
+    }
+  }
+
+  @include shared.header-logo(3.2rem);
+
+  &__search {
+    flex: 0 1 auto;
+    width: 22rem;
+    max-width: 100%;
+    min-width: 0;
+
+    .pkt-searchinput,
+    .pkt-searchinput__field {
+      width: 100%;
+    }
+  }
+
+  &__contact {
+    flex: 0 0 auto;
+    white-space: nowrap;
+  }
+
+  &__user-button {
+    max-width: 20rem;
+
+    .pkt-btn__text {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      min-width: 0;
+      flex: 1 1 auto;
+    }
+  }
+
+  &__user-menu {
+    position: absolute;
+    right: 0;
+    width: max(15.5rem, 100%);
+    max-width: min(32rem, 90vw);
+
+    &.is-open {
+      z-index: 100;
+    }
+  }
+
+  &__search-toggle {
+    &,
+    & button {
+      flex: 0 0 auto;
+      border-radius: 50%;
+    }
+  }
+
+  &--mobile &__menu-toggle {
+    &,
+    & button {
+      border-radius: 50%;
+    }
+  }
+
+  &__menu,
+  &__search-panel {
+    position: fixed;
+    top: max(0px, calc(var(--pkt-header-global-top, 0px) + #{map.get(variables.$spacing, 'size-104')}));
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 90;
+    background-color: rgba(0, 0, 0, 0.55);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    -webkit-overflow-scrolling: touch;
+
+    &--tablet,
+    &--mobile {
+      top: max(0px, calc(var(--pkt-header-global-top, 0px) + #{map.get(variables.$spacing, 'size-88')}));
+    }
+  }
+
+  &__menu .pkt-header-menu {
+    width: min(var(--pkt-header-global-width, 100%), 75rem);
+    margin: 0 0 0
+      calc(var(--pkt-header-global-left, 0px) + max(0px, (var(--pkt-header-global-width, 100%) - 75rem) / 2));
+    box-shadow:
+      0px 4px 6px -1px rgba(0, 0, 0, 0.1),
+      0px 2px 4px -2px rgba(0, 0, 0, 0.1);
+  }
+
+  &__search-panel-inner {
+    margin-left: var(--pkt-header-global-left, 0px);
+    width: var(--pkt-header-global-width, 100%);
+    background-color: var(--pkt-color-background-default);
+    border-bottom: 1px solid var(--pkt-color-border-subtle);
+    box-shadow:
+      0px 4px 6px -1px rgba(0, 0, 0, 0.1),
+      0px 2px 4px -2px rgba(0, 0, 0, 0.1);
+    padding: map.get(variables.$spacing, 'size-16');
+
+    .pkt-searchinput,
+    .pkt-searchinput__field {
+      width: 100%;
+    }
+  }
+}
+
+.pkt-header-global.pkt-header-global--mobile {
+  @include shared.header-mobile-user-bar('pkt-header-global');
+}

package/dist/scss/components/_header-menu.scss

@@ -4,18 +4,18 @@
 
 @use 'sass:map';
 @use '../abstracts/variables';
-@use '../abstracts/mixins/breakpoints' as *;
+@use '../abstracts/mixins/container-queries' as *;
 @use '../abstracts/mixins/typography';
 
 $pkt-header-menu-breakpoint: 48rem;
 
 @mixin pkt-header-menu-region-inner {
-  max-width: 75.25rem;
+  max-width: 75rem;
   margin: 0 auto;
   padding-top: map.get(variables.$spacing, 'size-32');
   padding-bottom: map.get(variables.$spacing, 'size-16');
 
-  @include bp('tablet-up') {
+  @include cq('pkt-header-menu', $cq-bp-tablet) {
     padding: map.get(variables.$spacing, 'size-52');
   }
 }
@@ -25,11 +25,8 @@ $pkt-header-menu-breakpoint: 48rem;
   background-color: var(--pkt-color-background-default);
   color: var(--pkt-color-text-body-default);
   width: 100%;
-  padding-bottom: map.get(variables.$spacing, 'size-32');
-
-  @include bp('tablet-up') {
-    padding-bottom: 0;
-  }
+  container-type: inline-size;
+  container-name: pkt-header-menu;
 
   &--open {
     display: block;
@@ -45,11 +42,11 @@ $pkt-header-menu-breakpoint: 48rem;
     margin: 0 0 map.get(variables.$spacing, 'size-32');
     display: none;
 
-    @include bp('tablet-up') {
+    @include cq('pkt-header-menu', $cq-bp-tablet) {
       display: block;
     }
 
-    @include bp('tablet-big-up') {
+    @include cq('pkt-header-menu', $cq-bp-tablet-big) {
       @include typography.get-text('pkt-txt-22-medium');
     }
   }
@@ -66,7 +63,7 @@ $pkt-header-menu-breakpoint: 48rem;
     grid-template-columns: 1fr;
     gap: map.get(variables.$spacing, 'size-20');
 
-    @include bp('tablet-up') {
+    @include cq('pkt-header-menu', $cq-bp-tablet) {
       grid-template-columns: repeat(4, 1fr);
       row-gap: map.get(variables.$spacing, 'size-40');
     }
@@ -76,15 +73,14 @@ $pkt-header-menu-breakpoint: 48rem;
     display: none;
 
     @include pkt-header-menu-region-inner;
-    @include bp('tablet-up') {
+    @include cq('pkt-header-menu', $cq-bp-tablet) {
       display: flex;
       gap: map.get(variables.$spacing, 'size-16');
       flex-wrap: wrap;
       padding-top: 0;
     }
 
-    // Step the button label up at the same breakpoint as the link text.
-    @include bp('tablet-big-up') {
+    @include cq('pkt-header-menu', $cq-bp-tablet-big) {
       .pkt-btn__text {
         @include typography.get-text('pkt-txt-18-medium');
       }
@@ -95,13 +91,13 @@ $pkt-header-menu-breakpoint: 48rem;
     padding: 0 map.get(variables.$spacing, 'size-16');
     display: flex;
 
-    @include bp('tablet-up') {
+    @include cq('pkt-header-menu', $cq-bp-tablet) {
       display: none;
     }
   }
 
   &__sections {
-    @include bp('tablet-up') {
+    @include cq('pkt-header-menu', $cq-bp-tablet) {
       background-color: var(--pkt-color-surface-strong-gray);
       [data-mode='dark'] & {
         background-color: var(--pkt-color-background-default);
@@ -112,7 +108,7 @@ $pkt-header-menu-breakpoint: 48rem;
   &__sections-inner {
     @include pkt-header-menu-region-inner;
 
-    @include bp('tablet-up') {
+    @include cq('pkt-header-menu', $cq-bp-tablet) {
       display: grid;
       grid-template-columns: repeat(4, 1fr);
       gap: map.get(variables.$spacing, 'size-32');
@@ -120,11 +116,9 @@ $pkt-header-menu-breakpoint: 48rem;
   }
 
   &__section {
-    @include bp('mobile-to-tablet') {
-      .pkt-accordion-item__title {
-        @include typography.get-text('pkt-txt-18-medium');
-        padding: map.get(variables.$spacing, 'size-16') 0;
-      }
+    .pkt-accordion-item__title {
+      @include typography.get-text('pkt-txt-18-medium');
+      padding: map.get(variables.$spacing, 'size-8') map.get(variables.$spacing, 'size-16');
     }
   }
 
@@ -135,7 +129,7 @@ $pkt-header-menu-breakpoint: 48rem;
     display: flex;
     flex-direction: column;
     gap: map.get(variables.$spacing, 'size-16');
-    @include bp('tablet-up') {
+    @include cq('pkt-header-menu', $cq-bp-tablet) {
       row-gap: map.get(variables.$spacing, 'size-16');
     }
   }
@@ -148,7 +142,7 @@ $pkt-header-menu-breakpoint: 48rem;
     text-underline-position: from-font;
     line-height: 1.5;
 
-    @include bp('tablet-big-up') {
+    @include cq('pkt-header-menu', $cq-bp-tablet-big) {
       @include typography.get-text('pkt-txt-18-light');
     }
 
@@ -171,7 +165,7 @@ $pkt-header-menu-breakpoint: 48rem;
 
     @include typography.get-text('pkt-txt-16-light');
 
-    @include bp('tablet-big-up') {
+    @include cq('pkt-header-menu', $cq-bp-tablet-big) {
       @include typography.get-text('pkt-txt-18-light');
     }
 
@@ -190,7 +184,7 @@ $pkt-header-menu-breakpoint: 48rem;
     width: map.get(variables.$spacing, 'size-24');
     height: map.get(variables.$spacing, 'size-24');
 
-    @include bp('tablet-up') {
+    @include cq('pkt-header-menu', $cq-bp-tablet) {
       width: map.get(variables.$spacing, 'size-32');
       height: map.get(variables.$spacing, 'size-32');
     }
@@ -208,12 +202,12 @@ $pkt-header-menu-breakpoint: 48rem;
   &__footer {
     @include pkt-header-menu-region-inner;
     padding: map.get(variables.$spacing, 'size-24') map.get(variables.$spacing, 'size-16')
-      map.get(variables.$spacing, 'size-16');
+      map.get(variables.$spacing, 'size-48');
     display: flex;
     flex-direction: column;
     gap: map.get(variables.$spacing, 'size-24');
 
-    @include bp('tablet-up') {
+    @include cq('pkt-header-menu', $cq-bp-tablet) {
       flex-direction: row;
       justify-content: space-between;
       align-items: center;
@@ -229,7 +223,7 @@ $pkt-header-menu-breakpoint: 48rem;
     flex-direction: column;
     gap: map.get(variables.$spacing, 'size-12');
 
-    @include bp('tablet-up') {
+    @include cq('pkt-header-menu', $cq-bp-tablet) {
       flex-direction: row;
       gap: map.get(variables.$spacing, 'size-0');
       &:not(.pkt-header-menu__footer-list--social) {
@@ -253,7 +247,7 @@ $pkt-header-menu-breakpoint: 48rem;
     flex-direction: row;
     gap: map.get(variables.$spacing, 'size-16');
 
-    @include bp('tablet-up') {
+    @include cq('pkt-header-menu', $cq-bp-tablet) {
       gap: map.get(variables.$spacing, 'size-32');
     }
   }
@@ -263,7 +257,7 @@ $pkt-header-menu-breakpoint: 48rem;
     color: var(--pkt-color-text-body-default);
     text-decoration: none;
 
-    @include bp('tablet-big-up') {
+    @include cq('pkt-header-menu', $cq-bp-tablet-big) {
       @include typography.get-text('pkt-txt-18-light');
     }
 
@@ -291,5 +285,10 @@ $pkt-header-menu-breakpoint: 48rem;
     @include pkt-header-menu-region-inner;
     text-align: center;
     color: var(--pkt-color-text-body-default);
+    padding-bottom: map.get(variables.$spacing, 'size-48');
+
+    @include cq('pkt-header-menu', $cq-bp-tablet) {
+      padding-bottom: map.get(variables.$spacing, 'size-52');
+    }
   }
 }

package/dist/scss/components/_header-service-mobile.scss

@@ -2,6 +2,7 @@
 @use '../abstracts/variables';
 @use '../abstracts/mixins/breakpoints' as *;
 @use '../abstracts/mixins/' as *;
+@use 'header-shared' as shared;
 
 .pkt-header-service.pkt-header-service--mobile {
   grid-template-rows: map.get(variables.$spacing, 'size-64') auto;
@@ -11,6 +12,9 @@
     grid-template-rows: map.get(variables.$spacing, 'size-72') auto;
   }
 
+  // Full-width user bar + in-flow user menu (shared with the global header).
+  @include shared.header-mobile-user-bar('pkt-header-service');
+
   .pkt-header-service {
     &--compact {
       grid-template-rows: map.get(variables.$spacing, 'size-64') auto;
@@ -54,34 +58,6 @@
       background-color: var(--pkt-color-background-default);
     }
 
-    &__user-container {
-      background-color: var(--pkt-color-background-default);
-      height: map.get(variables.$spacing, 'size-56');
-      width: 100%;
-      z-index: 99;
-    }
-
-    &__user-button {
-      &:is(button),
-      & button {
-        height: 100%;
-        padding: 0 map.get(variables.$spacing, 'size-24');
-        width: 100%;
-        max-width: 100%;
-        border: none;
-        border-top: 1px solid var(--pkt-color-border-subtle, #f2f2f2);
-        border-bottom: 1px solid var(--pkt-color-border-subtle, #f2f2f2);
-      }
-      &:not(button) {
-        display: contents;
-      }
-    }
-
-    &__user-menu {
-      max-width: 100%;
-      position: unset;
-    }
-
     &__slot-content {
       display: none;
     }

package/dist/scss/components/_header-service.scss

@@ -23,6 +23,7 @@
 @use '../abstracts/variables';
 @use '../abstracts/mixins/breakpoints' as *;
 @use '../abstracts/mixins/' as *;
+@use 'header-shared' as shared;
 
 .pkt-header-service-spacer {
   height: map.get(variables.$spacing, 'size-104');
@@ -95,10 +96,8 @@
     }
   }
 
-  position: relative;
-  z-index: 10;
-  background-color: var(--pkt-color-background-default);
-  border-bottom: 1px solid var(--pkt-color-border-subtle);
+  @include shared.header-chrome;
+
   display: grid;
   align-items: center;
   grid-template-columns: 1fr auto auto;
@@ -119,22 +118,6 @@
     grid-template-rows: map.get(variables.$spacing, 'size-72') auto;
   }
 
-  &--fixed {
-    width: 100vw;
-    position: fixed;
-    top: 0;
-    left: 0;
-  }
-
-  &--scroll-to-hide {
-    transform: translate3d(0, 0, 0);
-    transition: 0.5s transform ease-in-out;
-  }
-
-  &--hidden {
-    transform: translate3d(0, -100%, 0);
-  }
-
   &__logo-area,
   &__content,
   &__user {
@@ -311,7 +294,7 @@
   }
 
   &__user-button {
-    max-width: 28.5rem;
+    max-width: 22.5rem;
 
     .pkt-btn__text {
       overflow: hidden;

package/dist/scss/components/_header-shared.scss

@@ -0,0 +1,190 @@
+/*
+ * Shared header patterns
+ *
+ * Mixins shared by the header variants (`pkt-header-service` and
+ * `pkt-header-global`). The service header is the source of truth — these
+ * mixins are extracted from it so the global header stays aligned.
+ *
+ * This file only defines mixins; it emits no CSS on its own and therefore
+ * is not `@forward`ed from the component index.
+ */
+
+@use 'sass:map';
+@use '../abstracts/variables';
+
+/**
+ * Header chrome shared by every variant: base positioning plus the
+ * `--fixed`, `--sticky`, `--scroll-to-hide` and `--hidden` modifier states.
+ *
+ * Call inside a header base block; `&` resolves to the calling class
+ * (`.pkt-header-service` or `.pkt-header-global`).
+ */
+@mixin header-chrome {
+  position: relative;
+  z-index: 10;
+  background-color: var(--pkt-color-background-default);
+  border-bottom: 1px solid var(--pkt-color-border-subtle);
+
+  &--fixed {
+    width: 100vw;
+    position: fixed;
+    top: 0;
+    left: 0;
+  }
+
+  // Stays in the document flow (no spacer needed) but pins to the top of the
+  // viewport while its container is scrolled past.
+  &--sticky {
+    position: sticky;
+    top: 0;
+  }
+
+  &--scroll-to-hide {
+    transform: translate3d(0, 0, 0);
+    transition: 0.5s transform ease-in-out;
+  }
+
+  &--hidden {
+    transform: translate3d(0, -100%, 0);
+  }
+}
+
+/**
+ * Mobile user area shared by every variant: on small screens the user
+ * button becomes a full-width bar with top/bottom borders and the user
+ * menu renders in flow directly below it (rather than as a floating
+ * dropdown). Placement of the user area into its own row is left to the
+ * caller (grid row for the service header, a flex row for the global
+ * header).
+ *
+ * `$base` is the variant's BEM block, e.g. `pkt-header-service`.
+ */
+/**
+ * Shared header grid. Logo (col 1), a flexible content cell (col 2,
+ * right-aligned) and the user cell (col 3). Row height follows
+ * `--pkt-header-height`, which steps down at the tablet and mobile
+ * breakpoints. On mobile the grid collapses to two columns and the user
+ * cell drops to a full-width second row — the same layout the service
+ * header uses.
+ *
+ * Call inside a header base block. `$base` is the variant's BEM block.
+ * `$mobile-height` lets a variant keep a taller bar on mobile (the service
+ * header drops to 64px, the global header stays at 88px).
+ */
+@mixin header-grid($base, $mobile-height: map.get(variables.$spacing, 'size-64')) {
+  --pkt-header-height: #{map.get(variables.$spacing, 'size-104')};
+
+  &--tablet {
+    --pkt-header-height: #{map.get(variables.$spacing, 'size-88')};
+  }
+
+  &--mobile {
+    --pkt-header-height: #{$mobile-height};
+  }
+
+  display: grid;
+  align-items: center;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  grid-template-rows: var(--pkt-header-height) auto;
+  column-gap: map.get(variables.$spacing, 'size-24');
+
+  &--tablet {
+    column-gap: map.get(variables.$spacing, 'size-16');
+  }
+
+  &--mobile {
+    grid-template-columns: auto minmax(0, 1fr);
+    column-gap: map.get(variables.$spacing, 'size-8');
+  }
+
+  &__logo-area {
+    grid-column: 1;
+    grid-row: 1;
+  }
+
+  &__content {
+    grid-column: 2;
+    grid-row: 1;
+    justify-self: end;
+    max-width: 100%;
+  }
+
+  &__user {
+    grid-column: 3;
+    grid-row: 1;
+  }
+
+  // On mobile the user cell drops to its own full-width row below the bar.
+  &--mobile {
+    .#{$base}__user {
+      grid-column: 1 / -1;
+      grid-row: 2;
+      justify-self: stretch;
+      padding: 0;
+    }
+  }
+}
+
+/**
+ * Standalone Oslo logo sizing shared by header variants: 64px on
+ * desktop/tablet, shrinking to 32px on mobile (the same sizes the service
+ * header uses for its logo without a service name).
+ *
+ * Call inside a header base block; `&` resolves to the calling class.
+ * `$mobile-height` is the logo height on mobile (the service header drops to
+ * 32px, the global header to 3.2rem).
+ */
+@mixin header-logo($mobile-height: map.get(variables.$spacing, 'size-32')) {
+  &__logo {
+    --fg-color: var(--pkt-color-text-body-default);
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+
+    a,
+    button {
+      display: flex;
+      align-items: center;
+    }
+
+    svg {
+      aspect-ratio: 6 / 3;
+      height: map.get(variables.$spacing, 'size-64');
+    }
+  }
+
+  &--mobile &__logo svg {
+    height: #{$mobile-height};
+  }
+}
+
+@mixin header-mobile-user-bar($base) {
+  .#{$base}__user-container {
+    background-color: var(--pkt-color-background-default);
+    height: map.get(variables.$spacing, 'size-56');
+    width: 100%;
+    z-index: 99;
+  }
+
+  .#{$base}__user-button {
+    &:is(button),
+    & button {
+      height: 100%;
+      padding: 0 map.get(variables.$spacing, 'size-24');
+      width: 100%;
+      max-width: 100%;
+      border: none;
+      border-top: 1px solid var(--pkt-color-border-subtle, #f2f2f2);
+      border-bottom: 1px solid var(--pkt-color-border-subtle, #f2f2f2);
+    }
+
+    &:not(button) {
+      display: contents;
+    }
+  }
+
+  .#{$base}__user-menu {
+    max-width: 100%;
+    position: unset;
+  }
+}

package/dist/scss/components/_index.scss

@@ -11,6 +11,7 @@
 @forward 'fileupload';
 @forward 'footer';
 @forward 'header';
+@forward 'header-global';
 @forward 'header-menu';
 @forward 'header-service';
 @forward 'header-service-mobile';
@@ -33,4 +34,5 @@
 @forward 'tag';
 @forward 'teaserlist';
 @forward 'textinput';
+@forward 'textarea';
 @forward 'timepicker';