@oslokommune/punkt-css 16.26.3 → 17.0.0

package/dist/scss/components/_inputwrapper.scss

@@ -43,7 +43,7 @@ pkt-input-wrapper {
   &__helptext-container {
     display: flex;
     flex-direction: column;
-    gap: map.get(variables.$spacing, 'size-4');
+    gap: map.get(variables.$spacing, 'size-8');
   }
   &__helptext {
     width: min(100%, 31rem);
@@ -71,6 +71,11 @@ pkt-input-wrapper {
     }
 
     &-expandable {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: map.get(variables.$spacing, 'size-4');
+
       &-heading {
         margin: 0;
         @include typography.get-text('pkt-txt-18-medium');
@@ -80,7 +85,6 @@ pkt-input-wrapper {
         display: block;
         border-left: 2px solid var(--pkt-color-text-body-dark);
         padding: map.get(variables.$spacing, 'size-8') map.get(variables.$spacing, 'size-16');
-        margin-bottom: map.get(variables.$spacing, 'size-4');
       }
 
       &-closed {
@@ -135,17 +139,32 @@ pkt-input-wrapper {
     margin-right: 8px;
   }
 
-  // Alert
   .pkt-alert {
     width: min(100%, 31rem);
     margin: 0 0 0.5rem 0;
+  }
+
+  // Alert — stretch to match field width (fieldset uses align-items: flex-start)
+  &__alert-wrapper {
+    align-self: stretch;
+    max-width: min(100%, 31rem);
 
-    &--error {
-      margin: 0.5rem 0 0.5rem 0;
+    .pkt-alert {
+      width: 100%;
+      margin: 0;
     }
   }
 
-  // Tag
+  &:has(.pkt-input--fullwidth) &__alert-wrapper {
+    max-width: none;
+  }
+
+  &__fieldset > .pkt-alert {
+    align-self: stretch;
+    width: auto;
+    max-width: min(100%, 31rem);
+  }
+
   .pkt-tag {
     margin-left: 8px;
   }
@@ -212,6 +231,43 @@ pkt-input-wrapper {
       outline: none;
     }
   }
+
+  // medium = base styles above; only compact sizes get modifier classes
+  &--small,
+  &--xsmall {
+    .pkt-inputwrapper__helptext-container {
+      gap: map.get(variables.$spacing, 'size-4');
+    }
+
+    .pkt-inputwrapper__helptext,
+    .pkt-inputwrapper__helptext > .pkt-btn,
+    .pkt-inputwrapper__helptext-expandable .pkt-btn {
+      @include typography.get-text('pkt-txt-12-light');
+    }
+
+    .pkt-inputwrapper__helptext-expandable-heading {
+      @include typography.get-text('pkt-txt-16-medium');
+    }
+
+    .pkt-inputwrapper__fieldset {
+      gap: map.get(variables.$spacing, 'size-4');
+    }
+  }
+
+  &--small {
+    .pkt-inputwrapper__label,
+    .pkt-inputwrapper__legend {
+      @include typography.get-text('pkt-txt-16-medium');
+    }
+  }
+
+  // xsmall: wrapper chrome only — field scale lives on .pkt-input--xsmall / .pkt-combobox__input--xsmall
+  &--xsmall {
+    .pkt-inputwrapper__label,
+    .pkt-inputwrapper__legend {
+      @include typography.get-text('pkt-txt-14-medium');
+    }
+  }
 }
 
 [data-mode='dark'] .pkt-inputwrapper {

package/dist/scss/components/_modal.scss

@@ -236,11 +236,7 @@ $pkt-modal-padding-sides: map.get(variables.$spacing, 'size-40');
   }
 }
 
-// Prevent scroll when modal is open
-body.pkt-modal--open {
-  overflow: hidden;
-  scrollbar-gutter: stable;
-}
+// Scroll lock removed from here. Is now shared with other components through shared-utils
 
 //  SIZES
 .pkt-modal--small {

package/dist/scss/components/_searchinput.scss

@@ -1,4 +1,3 @@
-/* Common styles for all inputs */
 @use 'sass:map';
 @use '../abstracts/variables';
 @use '../abstracts/functions';
@@ -9,9 +8,49 @@
 
   @include typography.get-text('pkt-txt-18-light');
 
+  &--small {
+    @include typography.get-text('pkt-txt-16-light');
+
+    .pkt-inputwrapper__label {
+      @include typography.get-text('pkt-txt-16-medium');
+    }
+
+    .pkt-searchinput__suggestion {
+      padding: 0.75rem;
+      @include typography.get-text('pkt-txt-16-light');
+    }
+
+    .pkt-searchinput__suggestion-title {
+      @include typography.get-text('pkt-txt-16-medium');
+    }
+  }
+
+  &--xsmall {
+    @include typography.get-text('pkt-txt-14-light');
+
+    .pkt-inputwrapper__label {
+      @include typography.get-text('pkt-txt-14-medium');
+    }
+
+    .pkt-searchinput__suggestion {
+      padding: 0.5rem;
+      @include typography.get-text('pkt-txt-14-light');
+    }
+
+    .pkt-searchinput__suggestion-title {
+      @include typography.get-text('pkt-txt-14-medium');
+    }
+  }
+
   &__field {
     width: min(100%, 31rem);
     display: flex;
+    align-items: stretch;
+
+    .pkt-input {
+      flex: 1;
+      min-width: 0;
+    }
   }
 
   &--fullwidth &__field {
@@ -35,10 +74,15 @@
     gap: 0.5rem;
   }
 
-  &--local .pkt-input {
+  &--local .pkt-input__container--medium .pkt-input {
     padding: 0.5rem 0 0.5rem 1rem;
   }
 
+  &--local .pkt-input__container--small .pkt-input,
+  &--local .pkt-input__container--xsmall .pkt-input {
+    padding-right: 0;
+  }
+
   &--local &__button {
     &:disabled {
       border-color: var(--pkt-color-input-border-disabled);
@@ -64,9 +108,21 @@
   &--global &__suggestions {
     width: min(calc(100% - 3rem), 28rem);
   }
+  &--global.pkt-searchinput--small &__suggestions {
+    width: min(calc(100% - 2.625rem), 28rem);
+  }
+  &--global.pkt-searchinput--xsmall &__suggestions {
+    width: min(calc(100% - 2.25rem), 28rem);
+  }
   &--local-with-button &__suggestions {
     width: min(calc(100% - 3.5rem), 27.5rem);
   }
+  &--local-with-button.pkt-searchinput--small &__suggestions {
+    width: min(calc(100% - 3.125rem), 27.5rem);
+  }
+  &--local-with-button.pkt-searchinput--xsmall &__suggestions {
+    width: min(calc(100% - 2.75rem), 27.5rem);
+  }
   &--fullwidth &__suggestions {
     width: 100%;
   }

package/dist/scss/components/_textarea.scss

@@ -0,0 +1,48 @@
+/*
+ * Textarea component
+ *
+ * Base field styles (border, states, min-height) live in _input.scss on .pkt-input:is(textarea).
+ * Wrapper label/helptext scale lives in _inputwrapper.scss (--small / --xsmall).
+ * Counter stays in normal flow below the field for all sizes (see textarea.astro).
+ */
+@use 'sass:map';
+@use '../abstracts/variables';
+@use '../abstracts/mixins/typography';
+
+// Match textinput: cap at 31rem; field fills the wrapper.
+// React: .pkt-inputwrapper is the outer box. Elements: pkt-textarea is the flex child and
+// shrink-wraps unless capped here — inner .pkt-inputwrapper width: 100% then resolves correctly.
+pkt-textarea:not([fullwidth]):has(textarea.pkt-input:not([cols])) {
+  width: min(31rem, 100%);
+}
+
+pkt-textarea[fullwidth] {
+  width: 100%;
+}
+
+.pkt-inputwrapper:has(textarea.pkt-input:not(.pkt-input--fullwidth):not([cols])) {
+  width: min(31rem, 100%);
+}
+
+.pkt-inputwrapper:has(textarea.pkt-input--fullwidth) {
+  width: 100%;
+}
+
+textarea.pkt-input {
+  &:not(.pkt-input--fullwidth):not([cols]) {
+    width: 100%;
+  }
+
+  &--small,
+  &--xsmall {
+    padding: map.get(variables.$spacing, 'size-8') map.get(variables.$spacing, 'size-16');
+  }
+
+  &--small {
+    @include typography.get-text('pkt-txt-16-light');
+  }
+
+  &--xsmall {
+    @include typography.get-text('pkt-txt-14-light');
+  }
+}

package/dist/scss/components/_timepicker.scss

@@ -1,13 +1,39 @@
 /* Component: pkt-timepicker */
 
-@use 'sass:map';
-@use '../abstracts/variables';
 @use '../abstracts/mixins/typography';
 
 pkt-timepicker {
   display: block;
 }
 
+/// Size overrides for small / xsmall. Base .pkt-input__container styles use medium (48px).
+@mixin timepicker-field-size($min-height, $text-style, $icon-size, $padding-inline: 0.5rem) {
+  .pkt-input__container {
+    min-height: $min-height;
+
+    .pkt-timepicker__input,
+    .pkt-timepicker__separator {
+      @include typography.get-text($text-style);
+    }
+
+    button.pkt-timepicker__button {
+      padding: 0 $padding-inline;
+
+      pkt-icon,
+      .pkt-icon,
+      svg {
+        width: $icon-size;
+        height: $icon-size;
+      }
+    }
+
+    .pkt-timepicker__icon {
+      padding: 0 $padding-inline 0 0;
+      height: $icon-size;
+    }
+  }
+}
+
 .pkt-timepicker,
 pkt-timepicker {
   &__anchor {
@@ -15,35 +41,43 @@ pkt-timepicker {
   }
 
   .pkt-input__container {
+    min-height: 3rem;
+    align-items: center;
     border: 2px solid var(--pkt-color-input-border-normal);
     background-color: var(--pkt-color-input-background-normal);
     width: fit-content;
     padding: 0 0 0 1rem;
 
+    // Composite layout: one bordered row, segments without individual borders/heights.
+    .pkt-timepicker__input,
+    .pkt-timepicker__separator,
+    .pkt-input-icon,
+    .pkt-timepicker__button {
+      border: 0;
+      height: auto;
+      min-height: 0;
+      padding-top: 0;
+      padding-bottom: 0;
+      flex: 0 0 auto;
+    }
+
     .pkt-input,
     .pkt-input-icon,
     .pkt-input-separator {
       border: 0;
-      min-height: auto;
     }
 
-    &:hover {
-      border-color: var(--pkt-color-input-border-active);
+    .pkt-timepicker__input,
+    .pkt-timepicker__separator {
+      @include typography.get-text('pkt-txt-18-light');
     }
 
-    &:focus-within {
-      border-color: var(--pkt-color-input-border-active);
-      outline: 2px solid var(--pkt-color-input-border-active);
+    .pkt-timepicker__input {
+      padding-inline: 0;
     }
 
-    &:has(input:disabled) {
-      border-color: var(--pkt-color-input-border-disabled);
-      background-color: var(--pkt-color-surface-default-gray);
-
-      .pkt-timepicker__icon,
-      .pkt-timepicker__button {
-        --fg-color: var(--pkt-color-input-text-disabled);
-      }
+    .pkt-timepicker__separator {
+      padding: 0;
     }
 
     button.pkt-timepicker__button {
@@ -51,7 +85,8 @@ pkt-timepicker {
       padding: 0 0.75rem;
 
       pkt-icon,
-      .pkt-icon {
+      .pkt-icon,
+      svg {
         width: 1.5rem;
         height: 1.5rem;
       }
@@ -70,6 +105,49 @@ pkt-timepicker {
         margin-left: 0.25rem;
       }
     }
+
+    .pkt-timepicker__icon {
+      align-self: center;
+      pointer-events: none;
+      padding: 0 0.75rem 0 0;
+      height: 1.5rem;
+      width: -webkit-min-content;
+      width: -moz-min-content;
+      width: min-content;
+
+      > svg,
+      svg {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    &:hover {
+      border-color: var(--pkt-color-input-border-active);
+    }
+
+    &:focus-within {
+      border-color: var(--pkt-color-input-border-active);
+      outline: 2px solid var(--pkt-color-input-border-active);
+    }
+
+    &:has(input:disabled) {
+      border-color: var(--pkt-color-input-border-disabled);
+      background-color: var(--pkt-color-surface-default-gray);
+
+      .pkt-timepicker__icon,
+      .pkt-timepicker__button {
+        --fg-color: var(--pkt-color-input-text-disabled);
+      }
+    }
+  }
+
+  &--small {
+    @include timepicker-field-size(2.625rem, 'pkt-txt-16-light', 1.25rem);
+  }
+
+  &--xsmall {
+    @include timepicker-field-size(2.25rem, 'pkt-txt-14-light', 1.125rem);
   }
 
   // Stepper variant: no left padding — the prev button takes that space
@@ -77,7 +155,6 @@ pkt-timepicker {
     padding-left: 0;
   }
 
-  // Fullwidth modifier
   &--fullwidth {
     .pkt-timepicker__anchor,
     .pkt-input__container {
@@ -137,7 +214,6 @@ pkt-timepicker {
   &__input {
     width: 1.5rem;
     text-align: center;
-    padding: 0.5rem 0;
 
     &::-webkit-inner-spin-button,
     &::-webkit-outer-spin-button {
@@ -150,24 +226,9 @@ pkt-timepicker {
   }
 
   &__separator {
-    @include typography.get-text('pkt-txt-18');
-
-    padding: 0.25rem 0 0.5rem;
     user-select: none;
   }
 
-  &__icon {
-    height: auto;
-    padding: 0 0.75rem 0 0;
-    pointer-events: none;
-
-    pkt-icon,
-    .pkt-icon {
-      width: 1.5rem;
-      height: 1.5rem;
-    }
-  }
-
   &-popup {
     position: absolute;
     top: 100%;

package/dist/scss/elements/_button.scss

@@ -1,6 +1,6 @@
 /* Button element!
  *
- * Size: small, medium, large
+ * Size: xsmall, small, medium, large
  * Skin: primary, secondary, tertiary
  * State: normal, focus, hover, active, disabled
  * Variant: label-only, icon-left, icon-right, icon-only
@@ -23,14 +23,23 @@ $-sizes: (
     'height': 3rem,
     'line-height': 1.1,
   ),
-  'small': (
+  'xsmall': (
     'text-class': 'pkt-txt-14-medium',
-    'padding': 0 0.5rem,
+    'padding': 0 0.75rem,
+    'padding-icon-only': 0 0.4375rem,
+    'icon-size': 1.125rem,
+    'height': 2.25rem,
+    'line-height': 1.1,
+  ),
+  'small': (
+    'text-class': 'pkt-txt-16-medium',
+    'padding': 0 1rem,
     'padding-icon-only': 0 0.5625rem,
     'icon-size': 1.25rem,
     'height': 2.625rem,
     'line-height': 1.1,
   ),
+
   'large': (
     'text-class': 'pkt-txt-24-medium',
     'padding': 0 1rem,

package/dist/scss/elements/_input.scss

@@ -20,11 +20,34 @@ pkt-select {
   color: var(--pkt-color-input-text-normal);
   margin: 0;
   padding: 0.5rem 1rem;
+  min-height: 3rem;
 
   @include typography.get-text('pkt-txt-18-light');
 
-  &:not(&-compact) {
-    min-height: 3rem;
+  &--small:not(:is(textarea, .pkt-timepicker__input, .pkt-datepicker__input)) {
+    min-height: 2.625rem;
+    padding: map.get(variables.$spacing, 'size-6') map.get(variables.$spacing, 'size-16');
+    @include typography.get-text('pkt-txt-16-light');
+
+    &:not(select[multiple]) {
+      height: 2.625rem;
+    }
+  }
+
+  &--xsmall:not(:is(textarea, .pkt-timepicker__input, .pkt-datepicker__input)) {
+    min-height: 2.25rem;
+    padding: map.get(variables.$spacing, 'size-4') map.get(variables.$spacing, 'size-12');
+    @include typography.get-text('pkt-txt-14-light');
+
+    &:not(select[multiple]) {
+      height: 2.25rem;
+    }
+  }
+
+  // Native inputs should not use flex layout (breaks composite prefix/suffix rows)
+  input.pkt-input,
+  select.pkt-input {
+    display: block;
   }
 
   &-compact#{&} {
@@ -38,7 +61,11 @@ pkt-select {
     }
   }
 
-  &:not(textarea[cols]):not(input[size]):not(&--fullwidth):not(.pkt-datepicker__input:not(.pkt-datepicker--multiple)),
+  // Default field width cap (31rem). Exclusions:
+  // - textarea: width set in _textarea.scss (needs wrapper/host, not this rule)
+  // - [cols]: native HTML width; browser sizes from character count — do not override
+  // - input[size]: same escape hatch for text inputs
+  &:not(:is(textarea)):not(input[size]):not(&--fullwidth):not(.pkt-datepicker__input:not(.pkt-datepicker--multiple)),
   &__container:not(:is(:has(.pkt-datepicker__input:not(.pkt-datepicker--multiple)))):not(:is(:has(textarea[cols]))):not(
       :is(:has(input[size]))
     ):not(:is(:has(&--fullwidth))):not(:is(:has(.pkt-timepicker__input))) {
@@ -60,8 +87,9 @@ pkt-select {
     width: 100%;
   }
 
-  &:is(textarea) {
-    min-height: map.get(variables.$spacing, 'size-128');
+  // Med rows-attributt styrer rows høyden alene
+  &:is(textarea:not([rows])) {
+    min-height: map.get(variables.$spacing, 'size-148');
   }
 
   &:is(select) {
@@ -78,6 +106,25 @@ pkt-select {
       background-size:
         1.5rem auto,
         100%;
+
+      // Nestet her for å vinne over @extend-utvidede baseselektorer (f.eks. .pkt-select select)
+      &.pkt-input--small {
+        background-size:
+          1.25rem auto,
+          100%;
+        background-position: right 0.5rem top 50%;
+        padding: map.get(variables.$spacing, 'size-6') 2.5rem map.get(variables.$spacing, 'size-6')
+          map.get(variables.$spacing, 'size-16');
+      }
+
+      &.pkt-input--xsmall {
+        background-size:
+          1.125rem auto,
+          100%;
+        background-position: right 0.5rem top 50%;
+        padding: map.get(variables.$spacing, 'size-4') 2.25rem map.get(variables.$spacing, 'size-4')
+          map.get(variables.$spacing, 'size-12');
+      }
     }
 
     option {
@@ -93,7 +140,6 @@ pkt-select {
     opacity: 1; // 1
   }
 
-  // states
   &:hover,
   &.pkt-input--hover {
     border-color: var(--pkt-color-input-border-hover);
@@ -196,6 +242,95 @@ pkt-select {
     padding: 0.5rem 0;
   }
 
+  // Composite fields (prefix / suffix): size the row as one unit — do not fix height on each child
+  &__container--small {
+    align-items: stretch;
+
+    .pkt-input-prefix,
+    .pkt-input-suffix,
+    .pkt-input-icon {
+      height: auto;
+      min-height: 2.625rem;
+      @include typography.get-text('pkt-txt-16-light');
+    }
+
+    .pkt-input-prefix {
+      padding: map.get(variables.$spacing, 'size-6') 0 map.get(variables.$spacing, 'size-6')
+        map.get(variables.$spacing, 'size-16');
+    }
+
+    .pkt-input-suffix {
+      padding: map.get(variables.$spacing, 'size-6') map.get(variables.$spacing, 'size-16')
+        map.get(variables.$spacing, 'size-6') 0;
+    }
+
+    input.pkt-input,
+    select.pkt-input {
+      height: auto;
+      min-height: 2.625rem;
+      flex: 1 1 auto;
+      min-width: 0;
+      padding: map.get(variables.$spacing, 'size-6') map.get(variables.$spacing, 'size-16');
+      @include typography.get-text('pkt-txt-16-light');
+    }
+
+    .pkt-input-icon svg,
+    .pkt-input-suffix svg {
+      width: 1.25rem;
+      height: 1.25rem;
+    }
+
+    .pkt-input-suffix::before {
+      height: 1.25rem;
+    }
+  }
+
+  &__container--xsmall {
+    align-items: stretch;
+
+    .pkt-input-prefix,
+    .pkt-input-suffix,
+    .pkt-input-icon {
+      height: auto;
+      min-height: 2.25rem;
+      @include typography.get-text('pkt-txt-14-light');
+    }
+
+    .pkt-input-prefix {
+      padding: map.get(variables.$spacing, 'size-4') 0 map.get(variables.$spacing, 'size-4')
+        map.get(variables.$spacing, 'size-12');
+    }
+
+    .pkt-input-suffix {
+      padding: map.get(variables.$spacing, 'size-4') map.get(variables.$spacing, 'size-12')
+        map.get(variables.$spacing, 'size-4') 0;
+    }
+
+    input.pkt-input,
+    select.pkt-input {
+      height: auto;
+      min-height: 2.25rem;
+      flex: 1 1 auto;
+      min-width: 0;
+      padding: map.get(variables.$spacing, 'size-4') map.get(variables.$spacing, 'size-12');
+      @include typography.get-text('pkt-txt-14-light');
+    }
+
+    .pkt-input-icon {
+      padding: map.get(variables.$spacing, 'size-4') map.get(variables.$spacing, 'size-8');
+    }
+
+    .pkt-input-icon svg,
+    .pkt-input-suffix svg {
+      width: 1.125rem;
+      height: 1.125rem;
+    }
+
+    .pkt-input-suffix::before {
+      height: 1.125rem;
+    }
+  }
+
   &--counter-error,
   &--counter-error:focus {
     border-color: var(--pkt-color-input-border-error);
@@ -233,7 +368,6 @@ pkt-select {
       margin: 0;
     }
 
-    //states
     & input:focus {
       outline: none;
       box-shadow: none;