@oslokommune/punkt-css 16.26.2 → 17.0.0

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

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

package/dist/scss/abstracts/variables/_spacing.scss

@@ -18,6 +18,7 @@ $spacing: (
   'size-88': 5.5rem,
   'size-104': 6.5rem,
   'size-128': 8rem,
+  'size-148': 9.25rem,
   /* deprecated */
   'size-5': 0.3125rem,
   'size-10': 0.625rem,

package/dist/scss/components/_accordion.scss

@@ -130,8 +130,8 @@ pkt-accordion[compact] {
 }
 // Accordion item
 .pkt-accordion-item {
-  color: var(--pkt-color-brand-dark-blue-1000);
-  background-color: var(--pkt-color-brand-neutrals-white);
+  color: var(--pkt-color-text-body-default);
+  background-color: var(--pkt-color-background-default);
   transition: transform 0.3s;
   appearance: none;
   text-align: left;
@@ -220,17 +220,13 @@ pkt-accordion[compact] {
   }
 }
 
-// "plus-minus" skin
-//
-// Minimal-chrome accordion used in dense surfaces like the global mega
-// menu. The chevron is replaced with a plus icon when collapsed and a
-// minus icon when expanded — both icons live in the DOM so the swap is
-// purely CSS, no JS state needed.
 .pkt-accordion--plus-minus,
-pkt-accordion[skin='plus-minus'] {
+pkt-accordion[skin='plus-minus']::part(container) {
   row-gap: 0;
 }
 
+.pkt-accordion--plus-minus .pkt-accordion-item,
+pkt-accordion[skin='plus-minus'] .pkt-accordion-item,
 .pkt-accordion-item--plus-minus,
 pkt-accordion-item[skin='plus-minus'] > .pkt-accordion-item {
   background-color: transparent;
@@ -245,14 +241,14 @@ pkt-accordion-item[skin='plus-minus'] > .pkt-accordion-item {
       text-decoration: underline;
 
       .pkt-accordion-item__icon {
-        transform: none;
+        transform: none !important;
       }
     }
   }
 
   > .pkt-accordion-item__content {
     padding: map.get(variables.$spacing, 'size-16');
-    background-color: var(--pkt-color-brand-neutrals-200);
+    background-color: var(--pkt-color-background-subtle);
   }
 
   .pkt-accordion-item__icon--plus,

package/dist/scss/components/_alert.scss

@@ -8,7 +8,7 @@
 
 $-module-name: 'pkt-alert';
 
-// Spacing
+$-spacing-6: map.get(variables.$spacing, 'size-6');
 $-spacing-8: map.get(variables.$spacing, 'size-8');
 $-spacing-12: map.get(variables.$spacing, 'size-12');
 $-spacing-16: map.get(variables.$spacing, 'size-16');
@@ -63,13 +63,6 @@ pkt-alert {
     grid-row: 1/2;
     grid-column: 2/3;
   }
-
-  @media (max-width: 768px) {
-    .pkt-alert__text {
-      grid-row: 2 / 3;
-      grid-column: 1 / -1;
-    }
-  }
 }
 
 .pkt-alert {
@@ -130,16 +123,21 @@ pkt-alert {
   }
 }
 
+// 24×24 icon — used for standalone compact alerts and field errors on medium inputs
+.pkt-alert--small,
 .pkt-alert--compact {
-  padding: $-spacing-12 $-spacing-16;
+  display: flex;
+  min-height: 3rem;
+  padding: $-spacing-8 $-spacing-12;
 
   .pkt-alert__grid {
     gap: $-spacing-8;
+    width: 100%;
   }
 
   .pkt-alert__icon {
-    width: 1.375rem;
-    height: 1.375rem;
+    width: 1.5rem;
+    height: 1.5rem;
   }
 
   .pkt-alert__title {
@@ -150,3 +148,28 @@ pkt-alert {
     @include get-text('pkt-txt-16-light');
   }
 }
+
+// 20×20 icon — used for field errors on small/xsmall inputs
+.pkt-alert--xsmall {
+  display: flex;
+  min-height: 2.5rem;
+  padding: $-spacing-6 $-spacing-12;
+
+  .pkt-alert__grid {
+    gap: $-spacing-6;
+    width: 100%;
+  }
+
+  .pkt-alert__icon {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  .pkt-alert__title {
+    @include get-text('pkt-txt-14-medium');
+  }
+
+  .pkt-alert__text {
+    @include get-text('pkt-txt-14-light');
+  }
+}

package/dist/scss/components/_calendar.scss

@@ -57,6 +57,9 @@ pkt-calendar {
     td {
       padding: 0;
     }
+    .pkt-btn {
+      padding: 0;
+    }
     button,
     div {
       aspect-ratio: 1 / 1;

package/dist/scss/components/_combobox.scss

@@ -74,6 +74,32 @@ pkt-combobox,
         width: 100%;
       }
 
+      &--small {
+        min-height: 2.625rem;
+        padding: 0.375rem 2.5rem 0.375rem 0.375rem;
+        @include typography.get-text('pkt-txt-16-light');
+
+        .pkt-combobox__arrow-icon svg {
+          width: 1.25rem;
+          height: 1.25rem;
+        }
+      }
+
+      &--xsmall {
+        min-height: 2.25rem;
+        padding: 0.25rem 2.25rem 0.25rem 0.25rem;
+        @include typography.get-text('pkt-txt-14-light');
+
+        .pkt-combobox__arrow-icon {
+          padding: 0.25rem 0.5rem;
+        }
+
+        .pkt-combobox__arrow-icon svg {
+          width: 1.125rem;
+          height: 1.125rem;
+        }
+      }
+
       &:hover:not(&--disabled):not(&--error) {
         border-color: var(--pkt-color-input-border-hover);
 
@@ -207,3 +233,51 @@ pkt-combobox,
 .pkt-inputwrapper:not([data-navtype='pointer']) .pkt-combobox__input:focus-within {
   outline: 4px solid var(--pkt-color-border-states-focus);
 }
+
+// Dropdown scale follows input wrapper size (small / xsmall combobox fields)
+.pkt-inputwrapper--small,
+.pkt-inputwrapper--xsmall {
+  .pkt-listbox {
+    .pkt-listbox__option:not(.pkt-listbox__search) {
+      padding: map.get(variables.$spacing, 'size-8') map.get(variables.$spacing, 'size-16');
+      @include typography.get-text('pkt-txt-16-light');
+    }
+
+    .pkt-listbox__empty,
+    .pkt-listbox__banner {
+      padding: map.get(variables.$spacing, 'size-8') map.get(variables.$spacing, 'size-16');
+      @include typography.get-text('pkt-txt-16-light');
+    }
+
+    .pkt-listbox__search input {
+      padding: map.get(variables.$spacing, 'size-8') map.get(variables.$spacing, 'size-12');
+      @include typography.get-text('pkt-txt-16-light');
+    }
+  }
+}
+
+.pkt-inputwrapper--xsmall {
+  .pkt-listbox {
+    .pkt-listbox__option:not(.pkt-listbox__search) {
+      padding: map.get(variables.$spacing, 'size-6') map.get(variables.$spacing, 'size-12');
+      @include typography.get-text('pkt-txt-14-light');
+    }
+
+    .pkt-listbox__empty,
+    .pkt-listbox__banner {
+      padding: map.get(variables.$spacing, 'size-6') map.get(variables.$spacing, 'size-12');
+      @include typography.get-text('pkt-txt-14-light');
+    }
+
+    .pkt-listbox__banner-icon,
+    .pkt-listbox__search-icon .pkt-icon {
+      width: 1.125rem;
+      height: 1.125rem;
+    }
+
+    .pkt-listbox__search input {
+      padding: map.get(variables.$spacing, 'size-6') map.get(variables.$spacing, 'size-8');
+      @include typography.get-text('pkt-txt-14-light');
+    }
+  }
+}

package/dist/scss/components/_datepicker.scss

@@ -1,6 +1,4 @@
-// Datepicker wrapper & input styles
-// Primary selectors use CSS classes (framework-agnostic).
-// Element selectors kept for backward compatibility with web components.
+@use '../abstracts/mixins/typography';
 
 .pkt-datepicker,
 pkt-datepicker {
@@ -122,25 +120,94 @@ pkt-datepicker-multiple {
   -webkit-appearance: none;
 }
 
-// Firefox specific styles :(
-@-moz-document url-prefix() {
+.pkt-datepicker__input.pkt-input--fullwidth.pkt-datepicker--multiple {
+  flex: 1;
+  min-width: 0;
+}
+
+@mixin datepicker-field-size(
+  $segment-min-height,
+  $text-style,
+  $icon-size,
+  $input-width,
+  $button-width,
+  $line-height: null
+) {
+  .pkt-datepicker__inputs {
+    .pkt-input,
+    .pkt-input-prefix,
+    .pkt-input-suffix,
+    .pkt-input-icon,
+    .pkt-input-separator {
+      min-height: $segment-min-height;
+    }
+
+    .pkt-datepicker__input,
+    .pkt-input-prefix,
+    .pkt-input-separator {
+      @include typography.get-text($text-style);
+
+      @if $line-height {
+        line-height: $line-height;
+      }
+    }
+
+    button.pkt-input-icon {
+      padding-left: 0.5rem;
+      padding-right: 0.5rem;
+
+      pkt-icon,
+      .pkt-icon,
+      svg {
+        width: $icon-size;
+        height: $icon-size;
+      }
+    }
+
+    @supports not (-moz-appearance: none) {
+      .pkt-datepicker__input:not(.pkt-datepicker--multiple):not(.pkt-input--fullwidth) {
+        width: $input-width;
+      }
+
+      .pkt-datepicker__input:not(.pkt-datepicker--multiple):not(.pkt-datepicker--range) {
+        max-width: calc(100% - $button-width);
+      }
+    }
+  }
+}
+
+.pkt-datepicker--small {
+  @include datepicker-field-size(2.375rem, 'pkt-txt-16-light', 1.25rem, 7.3rem, 2.5rem);
+}
+
+.pkt-datepicker--xsmall {
+  @include datepicker-field-size(2rem, 'pkt-txt-14-light', 1.125rem, 6.5rem, 2rem, $line-height: 1rem);
+}
+
+@supports (-moz-appearance: none) {
   .pkt-datepicker__inputs {
     .pkt-datepicker__input {
       padding-right: 0.5rem;
     }
     .pkt-datepicker__input:not(.pkt-datepicker--multiple) {
-      width: 10.5rem;
-      max-width: calc(100%);
+      width: auto;
+      max-width: 100%;
     }
     .pkt-datepicker__input.pkt-input--fullwidth:not(.pkt-datepicker--multiple) {
       width: auto;
       flex: 1;
     }
-    button.pkt-input-icon {
+    .pkt-input__container:has(.pkt-datepicker__input[type='date']) button.pkt-input-icon {
       display: none;
     }
     input.pkt-datepicker__input:has(~ button):not(:has(~ .pkt-input-separator)):not(:has(~ .pkt-input-prefix)) {
       border-right-width: 2px !important;
     }
+
+    @media screen and (max-width: 30rem) {
+      .pkt-input__container .pkt-datepicker__input.pkt-datepicker--range {
+        justify-self: start;
+      }
+    }
   }
 }

package/dist/scss/components/_footer.scss

@@ -1,176 +1,203 @@
 /*
- * Footer element
+ * Footer: pkt-footer (sekundær + global) og pkt-footer-simple (kompakt + global)
+ *
+ *   --pkt-footer-bg           bakgrunn (default: grå sekundær)
+ *   --pkt-footer-fg           tekstfarge
+ *   --pkt-footer-link-hover   hover-farge på lenker (default: text-action-active)
  */
 
 @use 'sass:map';
 @use '../abstracts/variables';
-@use '../abstracts/mixins/breakpoints' as *;
+@use '../abstracts/mixins/container-queries' as *;
 @use '../abstracts/mixins/typography';
 
-$-footer-bg-color: var(--pkt-color-surface-strong-dark-blue);
-$-footer-color: var(--pkt-color-text-body-default);
-$-footer-max-width: map.get(variables.$breakpoints, 'laptop');
-$-footer-icon-r-margin: map.get(variables.$spacing, 'size-8');
-$-footer-link-b-margin: map.get(variables.$spacing, 'size-16');
+$-footer-content-max-width: 75rem;
+
+.pkt-footer,
+.pkt-footer-simple {
+  display: block;
+  width: 100%;
+  container-type: inline-size;
+  container-name: pkt-footer;
+}
 
 .pkt-footer {
-  padding: map.get(variables.$spacing, 'size-40') map.get(variables.$spacing, 'size-24');
-  background-color: $-footer-bg-color;
-  color: $-footer-color;
-  display: flex;
-  align-items: center;
-
-  @include typography.get-text('pkt-txt-18-light');
-  @include bp('laptop-up') {
-    padding: map.get(variables.$spacing, 'size-56') map.get(variables.$spacing, 'size-24');
-    justify-content: center;
-  }
+  &__band {
+    background-color: var(--pkt-footer-bg, var(--pkt-color-background-subtle, #f9f9f9));
+    color: var(--pkt-footer-fg, var(--pkt-color-text-body-default, #2a2859));
 
-  &__container {
-    max-width: $-footer-max-width;
-  }
+    @include typography.get-text('pkt-txt-16-light');
 
-  &__title {
-    margin-bottom: map.get(variables.$spacing, 'size-32');
-    margin-top: 0;
-    color: $-footer-color;
-    @include typography.get-text('pkt-txt-24-medium');
-  }
+    @include cq('pkt-footer', $cq-bp-tablet-big) {
+      @include typography.get-text('pkt-txt-18-light');
+    }
 
-  // tekstfelt
-  &__text:last-child {
-    margin-bottom: 0;
-    margin-top: map.get(variables.$spacing, 'size-32');
-  }
+    &--global {
+      --pkt-footer-bg: var(--pkt-color-surface-strong-dark-blue, #2a2859);
+      --pkt-footer-fg: var(--pkt-color-text-body-light, #fff);
+      --pkt-footer-link-hover: var(--pkt-color-brand-blue-1000, #6fe9ff);
+    }
 
-  &__text:not(:last-child) {
-    margin-bottom: map.get(variables.$spacing, 'size-32');
-    margin-top: 0;
-  }
+    a {
+      color: inherit;
+      text-decoration: underline;
+      text-underline-position: from-font;
 
-  // Lenkelisten
-  &__list {
-    padding: 0;
-    margin: 0;
-    list-style: none;
-  }
+      &:hover {
+        // !important fordi grunnstilene våre er altfor spesifikke...
+        color: var(--pkt-footer-link-hover, var(--pkt-color-text-action-active, currentColor)) !important;
+      }
+    }
+
+    h2 {
+      margin: 0 0 map.get(variables.$spacing, 'size-16');
+      color: inherit;
 
-  &__list-item {
-    word-break: break-word;
+      @include typography.get-text('pkt-txt-20-medium');
+
+      @include cq('pkt-footer', $cq-bp-tablet) {
+        @include typography.get-text('pkt-txt-22-medium');
+      }
 
-    &:not(:last-child) {
-      margin-bottom: $-footer-link-b-margin;
+      @include cq('pkt-footer', $cq-bp-tablet-big) {
+        @include typography.get-text('pkt-txt-24-medium');
+      }
     }
 
-    @include bp('laptop-up') {
-      margin-bottom: 0;
+    p {
+      margin: 0 0 map.get(variables.$spacing, 'size-16');
     }
   }
 
-  &__link {
-    display: flex;
-    text-decoration: none !important;
+  &__inner {
+    max-width: $-footer-content-max-width;
+    margin: 0 auto;
+    padding: map.get(variables.$spacing, 'size-52') map.get(variables.$spacing, 'size-16');
 
-    &:hover .pkt-footer__link-icon {
-      --fg-color: currentColor;
+    @include cq('pkt-footer', $cq-bp-tablet) {
+      padding: map.get(variables.$spacing, 'size-52') map.get(variables.$spacing, 'size-32');
     }
-  }
 
-  &__link-icon {
-    --fg-color: currentColor;
-    width: 24px;
-    height: 24px;
-    margin-right: $-footer-icon-r-margin;
-    flex-shrink: 0;
-
-    @include bp('laptop-up') {
-      margin-top: 0;
+    &--compact {
+      padding-top: map.get(variables.$spacing, 'size-32');
+      padding-bottom: map.get(variables.$spacing, 'size-32');
     }
   }
 
-  // Social media ikoner og språklenke
-  &__social {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: flex-start;
+  &__sections {
+    display: grid;
+    grid-template-columns: 1fr;
     gap: map.get(variables.$spacing, 'size-32');
-    margin-top: map.get(variables.$spacing, 'size-40');
 
-    &:hover .pkt-footer__link-icon {
-      --fg-color: currentColor;
-    }
-
-    @include bp('laptop-up') {
-      align-items: flex-end;
-      justify-content: end;
+    @include cq('pkt-footer', $cq-bp-tablet) {
+      grid-template-columns: repeat(3, 1fr);
+      column-gap: map.get(variables.$spacing, 'size-32');
+      row-gap: map.get(variables.$spacing, 'size-52');
     }
+  }
 
-    &-language {
-      @include bp('laptop-up') {
-        justify-self: flex-start;
-      }
-    }
+  &__link-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: map.get(variables.$spacing, 'size-16');
 
-    &-icon {
-      --fg-color: currentColor;
-      width: 24px;
-      height: 24px;
+    > li {
+      word-break: break-word;
     }
+  }
 
-    &-icon-link:not(:last-child) {
-      margin-right: map.get(variables.$spacing, 'size-16');
-    }
+  &__link-domain {
+    white-space: nowrap;
   }
-}
 
-// Simple footer
+  &__bottom {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: map.get(variables.$spacing, 'size-32');
+    margin-top: map.get(variables.$spacing, 'size-16');
 
-.pkt-footer-simple {
-  padding: map.get(variables.$spacing, 'size-32') map.get(variables.$spacing, 'size-24');
-  background-color: $-footer-bg-color;
-  color: $-footer-color;
-  display: flex;
-  align-items: center;
-
-  @include typography.get-text('pkt-txt-18-light');
-  @include bp('laptop-up') {
-    justify-content: center;
+    @include cq('pkt-footer', $cq-bp-tablet) {
+      grid-column: -2 / -1;
+      margin-top: 0;
+    }
   }
 
-  &__container {
-    max-width: $-footer-max-width;
+  &__sections + &__bottom {
+    margin-top: map.get(variables.$spacing, 'size-32');
   }
 
-  // Lenkelisten
-  &__list {
-    padding: 0;
-    margin: 0;
+  &__bottom-links {
     list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-wrap: wrap;
+    gap: map.get(variables.$spacing, 'size-16') map.get(variables.$spacing, 'size-32');
   }
 
-  &__list-item {
-    @include bp('laptop-up') {
-      display: inline-flex;
+  &__some {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    gap: map.get(variables.$spacing, 'size-16');
+
+    @include cq('pkt-footer', $cq-bp-tablet) {
+      gap: map.get(variables.$spacing, 'size-24');
     }
 
-    &:not(:last-child) {
-      margin-bottom: $-footer-link-b-margin;
+    a {
+      display: inline-flex;
 
-      @include bp('laptop-up') {
-        margin-bottom: 0;
-        margin-right: map.get(variables.$spacing, 'size-32');
+      &:has(.pkt-footer__some-icon) {
+        text-decoration: none;
       }
     }
   }
 
-  &__link {
+  &__some-icon {
+    --fg-color: currentColor;
+    width: 2rem;
+    height: 2rem;
+  }
+
+  &__sections + &__consent {
+    margin-top: map.get(variables.$spacing, 'size-32');
+  }
+}
+
+.pkt-footer-simple {
+  &__list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
     display: flex;
-    text-decoration: none !important;
+    flex-direction: column;
+    gap: map.get(variables.$spacing, 'size-16');
+
+    @include cq('pkt-footer', $cq-bp-tablet) {
+      flex-direction: row;
+      flex-wrap: wrap;
+      justify-content: center;
+      gap: map.get(variables.$spacing, 'size-16') map.get(variables.$spacing, 'size-32');
+    }
+  }
+
+  @at-root a#{&}__link {
+    display: inline-flex;
     align-items: flex-start;
+    gap: map.get(variables.$spacing, 'size-8');
+    color: inherit;
+    text-decoration: none;
 
-    &:hover .pkt-footer__link-icon {
-      --fg-color: currentColor;
+    &:hover {
+      text-decoration: underline;
+      text-underline-position: from-font;
     }
   }
 
@@ -178,11 +205,10 @@ $-footer-link-b-margin: map.get(variables.$spacing, 'size-16');
     --fg-color: currentColor;
     width: 24px;
     height: 24px;
-    margin-right: $-footer-icon-r-margin;
     flex-shrink: 0;
+  }
 
-    @include bp('laptop-up') {
-      margin-top: 0;
-    }
+  &__link-domain {
+    white-space: nowrap;
   }
 }