@oslokommune/punkt-css 13.21.0 → 14.0.0

package/dist/scss/abstracts/mixins/_container-queries.scss

@@ -0,0 +1,37 @@
+// Container Queries mixin
+//
+// Provides container queries with media query fallback for browsers without support.
+// Container queries allow components to respond to their container's size rather than the viewport.
+//
+// Usage:
+//   .my-component {
+//     container-type: inline-size;
+//     container-name: my-container;
+//
+//     @include cq('my-container', 48rem) {
+//       // Styles for containers >= 768px wide
+//     }
+//   }
+//
+// @param $container-name - The name of the container to query
+// @param $min-width - The minimum width threshold (in rem or other CSS units)
+
+@mixin cq($container-name, $min-width) {
+  // Media query fallback for browsers without container query support
+  @media screen and (min-width: $min-width) {
+    @content;
+  }
+
+  // Container query for modern browsers (overrides media query when supported)
+  @container #{$container-name} (min-width: #{$min-width}) {
+    @content;
+  }
+}
+
+// Common breakpoint values (matching the bp mixin values)
+$cq-bp-mobile: 0rem; // 0px
+$cq-bp-phablet: 35.938rem; // 575px
+$cq-bp-tablet: 48rem; // 768px
+$cq-bp-tablet-big: 64rem; // 1024px
+$cq-bp-laptop: 80rem; // 1280px
+$cq-bp-desktop: 100rem; // 1600px

package/dist/scss/abstracts/mixins/_index.scss

@@ -1,2 +1,3 @@
 @forward 'breakpoints';
+@forward 'container-queries';
 @forward 'typography';

package/dist/scss/abstracts/variables/_index.scss

@@ -6,7 +6,7 @@
 @forward 'spacing';
 
 // Default icon path
-$icon-path: 'https://punkt-cdn.oslo.kommune.no/13.21/icons' !default;
+$icon-path: 'https://punkt-cdn.oslo.kommune.no/14.0/icons' !default;
 
 // Borders
 $border-width: (

package/dist/scss/base/_typography.scss

@@ -62,6 +62,9 @@ a,
   &.pkt-link--hover {
     color: var(--pkt-color-text-action-active);
     text-decoration: underline;
+    svg {
+      --fg-color: currentColor;
+    }
   }
 
   // focus
@@ -95,7 +98,7 @@ a,
 
 .pkt-link {
   &__icon {
-    --fg-color: var(--pkt-color-text-action-normal);
+    --fg-color: currentColor;
     width: 1.5rem;
     height: 1.5rem;
     flex-shrink: 0;

package/dist/scss/components/_card.scss

@@ -256,15 +256,15 @@ pkt-card {
   &--outlined,
   &--outlined-beige {
     background-color: var(--pkt-color-background-default);
-    outline-offset: -4px;
+    outline-offset: -2px;
   }
 
   &--outlined {
-    outline: 4px solid var(--pkt-color-grays-gray-100);
+    outline: 2px solid var(--pkt-color-grays-gray-100);
   }
 
   &--outlined-beige {
-    outline: 4px solid var(--pkt-color-brand-light-beige-1000);
+    outline: 2px solid var(--pkt-color-brand-light-beige-1000);
   }
 
   &--gray {

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

@@ -0,0 +1,211 @@
+@use 'sass:map';
+@use '../abstracts/variables';
+@use '../abstracts/mixins/breakpoints' as *;
+@use '../abstracts/mixins/' as *;
+
+.pkt-header-service.pkt-header-service--mobile {
+  grid-template-rows: map.get(variables.$spacing, 'size-64') auto;
+  grid-template-columns: 1fr auto;
+
+  @include bp('laptop-up') {
+    grid-template-rows: map.get(variables.$spacing, 'size-72') auto;
+  }
+
+  .pkt-header-service {
+    &--compact {
+      grid-template-rows: map.get(variables.$spacing, 'size-64') auto;
+    }
+
+    &__logo-area,
+    &__content,
+    &__user {
+      column-gap: map.get(variables.$spacing, 'size-16');
+    }
+
+    &__logo-area {
+      grid-column: 1;
+      grid-row: 1;
+    }
+
+    &__content {
+      grid-column: 2;
+      grid-row: 1;
+      padding-right: map.get(variables.$spacing, 'size-16');
+    }
+
+    &__user {
+      grid-column: 1 / -1;
+      grid-row: 2;
+      justify-self: stretch;
+      padding: 0;
+    }
+
+    &__logo {
+      svg {
+        height: map.get(variables.$spacing, 'size-32');
+      }
+    }
+
+    &__service-name {
+      @include get-text('pkt-txt-16-medium');
+    }
+
+    &__mobile-menu {
+      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%;
+    }
+
+    &__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;
+    }
+
+    &__slot-container.is-open {
+      .pkt-header-service__slot-content {
+        position: absolute;
+        top: map.get(variables.$spacing, 'size-64');
+        left: 0;
+        right: 0;
+        max-width: 100vw;
+
+        @include bp('laptop-up') {
+          top: map.get(variables.$spacing, 'size-72');
+        }
+      }
+    }
+
+    &__search-container {
+      &.is-open {
+        .pkt-header-service__mobile-menu {
+          position: absolute;
+          top: map.get(variables.$spacing, 'size-64');
+          left: 0;
+          right: 0;
+
+          @include bp('laptop-up') {
+            top: map.get(variables.$spacing, 'size-72');
+          }
+        }
+      }
+    }
+
+    &__search-input {
+      padding: 1rem;
+    }
+  }
+}
+
+.pkt-header-service.pkt-header-service--mobile,
+.pkt-header-service.pkt-header-service--tablet {
+  .pkt-header-service {
+    &__slot-container.is-open .pkt-header-service__slot-content,
+    &__search-container.is-open .pkt-header-service__mobile-menu,
+    &__mobile-menu.is-open {
+      background-color: var(--pkt-color-background-default);
+      z-index: 100;
+      border-top: 1px solid var(--pkt-color-border-subtle, #f2f2f2);
+      border-bottom: 1px solid var(--pkt-color-border-subtle, #f2f2f2);
+
+      &::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 1.25rem;
+        pointer-events: none;
+        background: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.06));
+        transform: translateY(100%);
+        z-index: 101;
+      }
+    }
+
+    &__slot-container.is-open .pkt-header-service__slot-content {
+      height: max-content;
+      max-height: calc(100dvh - var(--pkt-header-height));
+      overflow: visible;
+
+      &,
+      & > .pkt-contents {
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        &,
+        > ul {
+          margin-left: 0;
+          gap: map.get(variables.$spacing, 'size-24');
+          > * {
+            margin-left: 0;
+          }
+        }
+      }
+      .pkt-contents {
+        padding: 2rem;
+        overflow-y: auto;
+        -webkit-overflow-scrolling: touch;
+      }
+    }
+  }
+}
+
+.pkt-header-service.pkt-header-service--tablet:not(.pkt-header-service--mobile) {
+  .pkt-header-service {
+    &__slot-content {
+      display: none;
+    }
+
+    &__slot-container,
+    &__search-container {
+      position: relative;
+
+      &.is-open {
+        .pkt-header-service__slot-content,
+        .pkt-header-service__mobile-menu {
+          display: block;
+          position: absolute;
+          top: 100%;
+          left: 0;
+          min-width: 19rem;
+          width: fit-content;
+          max-width: 100%;
+          right: auto;
+          border: 2px solid var(--pkt-color-border-subtle);
+
+          &.align-right {
+            left: auto;
+            right: 0;
+          }
+        }
+      }
+    }
+
+    &__search-input {
+      padding: 1rem;
+    }
+  }
+}

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

@@ -0,0 +1,378 @@
+/*
+ * HeaderService component
+ * Uses container queries with media query fallback for responsive behavior
+ */
+
+@use 'sass:map';
+@use '../abstracts/variables';
+@use '../abstracts/mixins/breakpoints' as *;
+@use '../abstracts/mixins/container-queries' as *;
+@use '../abstracts/mixins/' as *;
+
+@mixin header-cq($min-width) {
+  @include cq('header-service', $min-width) {
+    @content;
+  }
+}
+
+.pkt-header-service-spacer {
+  height: 80px;
+
+  @include header-cq($cq-bp-tablet) {
+    height: map.get(variables.$spacing, 'size-88');
+  }
+
+  @include header-cq($cq-bp-laptop) {
+    height: map.get(variables.$spacing, 'size-104');
+  }
+
+  &--mobile {
+    height: 80px;
+  }
+
+  &--has-user {
+    height: 128px;
+
+    @include header-cq($cq-bp-tablet) {
+      height: map.get(variables.$spacing, 'size-88');
+    }
+
+    @include header-cq($cq-bp-laptop) {
+      height: map.get(variables.$spacing, 'size-104');
+    }
+
+    &.pkt-header-service-spacer--mobile {
+      height: 128px;
+    }
+  }
+
+  &--compact {
+    height: map.get(variables.$spacing, 'size-64');
+
+    @include header-cq($cq-bp-tablet) {
+      height: map.get(variables.$spacing, 'size-64');
+    }
+
+    @include header-cq($cq-bp-laptop) {
+      height: map.get(variables.$spacing, 'size-72');
+    }
+
+    &.pkt-header-service-spacer--mobile {
+      height: map.get(variables.$spacing, 'size-64');
+    }
+  }
+
+  &--compact#{&}--has-user {
+    height: 104px;
+
+    @include header-cq($cq-bp-tablet) {
+      height: map.get(variables.$spacing, 'size-64');
+    }
+
+    @include header-cq($cq-bp-laptop) {
+      height: map.get(variables.$spacing, 'size-72');
+    }
+
+    &.pkt-header-service-spacer--mobile {
+      height: 104px;
+    }
+  }
+}
+
+.pkt-header-service {
+  --pkt-header-height: #{map.get(variables.$spacing, 'size-72')};
+
+  position: relative;
+
+  @include header-cq($cq-bp-tablet) {
+    --pkt-header-height: #{map.get(variables.$spacing, 'size-88')};
+  }
+
+  @include header-cq($cq-bp-laptop) {
+    --pkt-header-height: #{map.get(variables.$spacing, 'size-104')};
+  }
+
+  &--compact {
+    --pkt-header-height: #{map.get(variables.$spacing, 'size-64')};
+
+    @include header-cq($cq-bp-laptop) {
+      --pkt-header-height: #{map.get(variables.$spacing, 'size-72')};
+    }
+  }
+
+  &--mobile {
+    --pkt-header-height: #{map.get(variables.$spacing, 'size-64')};
+
+    @include bp('laptop-up') {
+      --pkt-header-height: #{map.get(variables.$spacing, 'size-72')};
+    }
+  }
+
+  background-color: var(--pkt-color-background-default);
+  container-type: inline-size;
+  container-name: header-service;
+  display: grid;
+  align-items: center;
+  grid-template-columns: 1fr auto auto;
+  grid-template-rows: map.get(variables.$spacing, 'size-72') auto;
+  column-gap: map.get(variables.$spacing, 'size-16');
+
+  @include header-cq($cq-bp-tablet) {
+    grid-template-rows: map.get(variables.$spacing, 'size-88') auto;
+    column-gap: map.get(variables.$spacing, 'size-24');
+  }
+
+  @include header-cq($cq-bp-laptop) {
+    grid-template-rows: map.get(variables.$spacing, 'size-104') auto;
+    column-gap: map.get(variables.$spacing, 'size-32');
+  }
+
+  &--compact {
+    grid-template-rows: map.get(variables.$spacing, 'size-72') auto;
+  }
+
+  &--fixed {
+    width: 100vw;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 10;
+  }
+
+  &--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 {
+    display: inline-flex;
+    column-gap: map.get(variables.$spacing, 'size-24');
+    min-width: 0;
+
+    @include header-cq($cq-bp-laptop) {
+      column-gap: map.get(variables.$spacing, 'size-32');
+    }
+  }
+
+  &__logo-area {
+    grid-column: 1;
+    grid-row: 1;
+    align-items: center;
+    display: inline-flex;
+    padding-left: map.get(variables.$spacing, 'size-16');
+
+    @include header-cq($cq-bp-laptop) {
+      padding-left: map.get(variables.$spacing, 'size-32');
+    }
+  }
+
+  &__content,
+  &__user {
+    grid-row: 1;
+    align-items: center;
+
+    .pkt-header-service__user-button .pkt-btn__text {
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .pkt-link {
+      @include get-text('pkt-txt-18-medium');
+    }
+  }
+
+  &__content {
+    grid-column: 2;
+  }
+
+  &__user {
+    grid-column: 3;
+    justify-self: end;
+    padding-right: map.get(variables.$spacing, 'size-16');
+
+    @include header-cq($cq-bp-laptop) {
+      padding-right: map.get(variables.$spacing, 'size-32');
+    }
+  }
+
+  &__logo {
+    --fg-color: var(--pkt-color-text-body-default);
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+
+    a,
+    button {
+      display: flex;
+      align-items: center;
+    }
+
+    svg {
+      height: map.get(variables.$spacing, 'size-40');
+      .pkt-header-service__logo-area--without-service & {
+        height: map.get(variables.$spacing, 'size-64');
+      }
+    }
+  }
+
+  &__service-name {
+    @include get-text('pkt-txt-22-medium');
+
+    padding-top: 4px;
+    white-space: normal;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-width: 0;
+
+    text-wrap: balance;
+  }
+
+  &__service-link {
+    color: var(--pkt-color-text-body-default);
+
+    .pkt-link {
+      text-decoration: none;
+    }
+  }
+
+  .pkt-link {
+    text-decoration: none;
+
+    &--active {
+      text-decoration: underline;
+      text-underline-position: from-font;
+    }
+
+    &:active {
+      text-decoration: underline;
+      text-underline-position: from-font;
+    }
+
+    &:hover {
+      text-decoration: underline;
+      text-underline-position: from-font;
+    }
+
+    &.pkt-header-service--mobile {
+      @include get-text('pkt-txt-16-medium');
+    }
+  }
+
+  &__search-input {
+    background-color: var(--pkt-color-background-default);
+    .pkt-input-icon:not(button) svg {
+      margin-left: 0;
+    }
+  }
+
+  &__slot-container,
+  &__search-container {
+    display: flex;
+    flex-direction: row;
+    align-items: baseline;
+  }
+
+  &__slot-container,
+  &__slot-container .pkt-contents {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    > * + * {
+      margin-left: map.get(variables.$spacing, 'size-32');
+    }
+
+    > .pkt-link + .pkt-link,
+    > pkt-link + pkt-link,
+    > a + a {
+      margin-left: map.get(variables.$spacing, 'size-24');
+    }
+  }
+
+  &__user-container,
+  &__search-container,
+  &__slot-container,
+  &__user-menu,
+  &__mobile-menu {
+    &.is-open {
+      z-index: 100;
+    }
+  }
+
+  &__user-container {
+    position: relative;
+  }
+
+  &__user-button {
+    max-width: 28.5rem;
+
+    .pkt-btn__text {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      min-width: 0;
+      flex: 1 1 auto;
+    }
+  }
+
+  &__user-menu,
+  &__slot-menu {
+    position: absolute;
+    right: 0;
+    width: max(15.5rem, 100%);
+    max-width: min(32rem, 90vw);
+  }
+
+  &__logout-button {
+    flex: 0 0 auto;
+  }
+
+  &__mobile-menu-container {
+    grid-column: 1 / -1;
+    grid-row: 2;
+  }
+
+  &__mobile-menu {
+    overflow: hidden;
+    max-height: 0;
+    opacity: 0;
+    transform: translateY(-6px);
+    transition:
+      max-height 200ms ease,
+      opacity 150ms ease,
+      transform 200ms ease;
+    will-change: max-height, transform;
+    pointer-events: none;
+  }
+
+  &__mobile-menu.is-open {
+    max-height: calc(100dvh - var(--pkt-header-height) - #{map.get(variables.$spacing, 'size-56')});
+    opacity: 1;
+    overflow: visible;
+    pointer-events: auto;
+    transform: translateY(0);
+    > * {
+      max-height: calc(100dvh - var(--pkt-header-height) - #{map.get(variables.$spacing, 'size-56')});
+      overflow-y: auto;
+      -webkit-overflow-scrolling: touch;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    &__mobile-menu {
+      transition: none;
+      transform: none;
+    }
+  }
+}