@oslokommune/punkt-css 16.26.3 → 17.0.1

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/base/_typography.scss

@@ -53,7 +53,7 @@ a,
   }
 
   // visited
-  &:visited:not(.pkt-linkcard):not(.pkt-btn):not(.pkt-tabs__link) {
+  &:visited:not(.pkt-linkcard, .pkt-btn, .pkt-tabs__link):not(:hover) {
     color: inherit;
   }
 
@@ -135,9 +135,7 @@ a,
     align-self: center;
   }
 
-  &--external:hover::after,
-  &:hover:not(.pkt-btn) pkt-icon,
-  &:hover:not(.pkt-btn) .pkt-icon {
+  &--external:hover::after {
     // #1f42aa
     filter: brightness(0) saturate(100%) invert(16%) sepia(99%) saturate(2420%) hue-rotate(222deg) brightness(93%)
       contrast(90%);
@@ -160,7 +158,9 @@ button.pkt-link {
       filter: brightness(0) saturate(100%) invert(100%);
     }
 
-    &--external:hover::after {
+    &--external:hover::after,
+    &:hover:not(.pkt-btn) pkt-icon,
+    &:hover:not(.pkt-btn) .pkt-icon  {
       // #b3f5ff
       filter: brightness(0) saturate(100%) invert(80%) sepia(54%) saturate(502%) hue-rotate(173deg) brightness(109%)
         contrast(105%);

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');
@@ -123,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 {
@@ -143,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;
+      }
+    }
   }
 }