@oslokommune/punkt-css 16.26.3 → 17.0.0

package/dist/css/pkt-components.css

@@ -105,8 +105,8 @@ pkt-accordion[compact] pkt-accordion-item > .pkt-accordion-item .pkt-accordion-i
 }
 
 .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;
@@ -192,34 +192,48 @@ pkt-accordion[compact] pkt-accordion-item > .pkt-accordion-item .pkt-accordion-i
 }
 
 .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;
   border: none;
   padding: 0;
 }
+.pkt-accordion--plus-minus .pkt-accordion-item > .pkt-accordion-item__title,
+pkt-accordion[skin=plus-minus] .pkt-accordion-item > .pkt-accordion-item__title,
 .pkt-accordion-item--plus-minus > .pkt-accordion-item__title,
 pkt-accordion-item[skin=plus-minus] > .pkt-accordion-item > .pkt-accordion-item__title {
   padding: 0.5rem 1rem;
   justify-content: flex-start;
 }
+.pkt-accordion--plus-minus .pkt-accordion-item > .pkt-accordion-item__title:hover,
+pkt-accordion[skin=plus-minus] .pkt-accordion-item > .pkt-accordion-item__title:hover,
 .pkt-accordion-item--plus-minus > .pkt-accordion-item__title:hover,
 pkt-accordion-item[skin=plus-minus] > .pkt-accordion-item > .pkt-accordion-item__title:hover {
   text-decoration: underline;
 }
+.pkt-accordion--plus-minus .pkt-accordion-item > .pkt-accordion-item__title:hover .pkt-accordion-item__icon,
+pkt-accordion[skin=plus-minus] .pkt-accordion-item > .pkt-accordion-item__title:hover .pkt-accordion-item__icon,
 .pkt-accordion-item--plus-minus > .pkt-accordion-item__title:hover .pkt-accordion-item__icon,
 pkt-accordion-item[skin=plus-minus] > .pkt-accordion-item > .pkt-accordion-item__title:hover .pkt-accordion-item__icon {
-  transform: none;
+  transform: none !important;
 }
+.pkt-accordion--plus-minus .pkt-accordion-item > .pkt-accordion-item__content,
+pkt-accordion[skin=plus-minus] .pkt-accordion-item > .pkt-accordion-item__content,
 .pkt-accordion-item--plus-minus > .pkt-accordion-item__content,
 pkt-accordion-item[skin=plus-minus] > .pkt-accordion-item > .pkt-accordion-item__content {
   padding: 1rem;
-  background-color: var(--pkt-color-brand-neutrals-200);
+  background-color: var(--pkt-color-background-subtle);
 }
+.pkt-accordion--plus-minus .pkt-accordion-item .pkt-accordion-item__icon--plus,
+.pkt-accordion--plus-minus .pkt-accordion-item .pkt-accordion-item__icon--minus,
+pkt-accordion[skin=plus-minus] .pkt-accordion-item .pkt-accordion-item__icon--plus,
+pkt-accordion[skin=plus-minus] .pkt-accordion-item .pkt-accordion-item__icon--minus,
 .pkt-accordion-item--plus-minus .pkt-accordion-item__icon--plus,
 .pkt-accordion-item--plus-minus .pkt-accordion-item__icon--minus,
 pkt-accordion-item[skin=plus-minus] > .pkt-accordion-item .pkt-accordion-item__icon--plus,
@@ -227,19 +241,27 @@ pkt-accordion-item[skin=plus-minus] > .pkt-accordion-item .pkt-accordion-item__i
   transition: none;
   transform: none;
 }
+.pkt-accordion--plus-minus .pkt-accordion-item .pkt-accordion-item__icon--minus,
+pkt-accordion[skin=plus-minus] .pkt-accordion-item .pkt-accordion-item__icon--minus,
 .pkt-accordion-item--plus-minus .pkt-accordion-item__icon--minus,
 pkt-accordion-item[skin=plus-minus] > .pkt-accordion-item .pkt-accordion-item__icon--minus {
   display: none;
 }
+.pkt-accordion--plus-minus .pkt-accordion-item[open] > .pkt-accordion-item__title .pkt-accordion-item__icon--plus,
+pkt-accordion[skin=plus-minus] .pkt-accordion-item[open] > .pkt-accordion-item__title .pkt-accordion-item__icon--plus,
 .pkt-accordion-item--plus-minus[open] > .pkt-accordion-item__title .pkt-accordion-item__icon--plus,
 pkt-accordion-item[skin=plus-minus] > .pkt-accordion-item[open] > .pkt-accordion-item__title .pkt-accordion-item__icon--plus {
   display: none;
 }
+.pkt-accordion--plus-minus .pkt-accordion-item[open] > .pkt-accordion-item__title .pkt-accordion-item__icon--minus,
+pkt-accordion[skin=plus-minus] .pkt-accordion-item[open] > .pkt-accordion-item__title .pkt-accordion-item__icon--minus,
 .pkt-accordion-item--plus-minus[open] > .pkt-accordion-item__title .pkt-accordion-item__icon--minus,
 pkt-accordion-item[skin=plus-minus] > .pkt-accordion-item[open] > .pkt-accordion-item__title .pkt-accordion-item__icon--minus {
   display: inline-flex;
   transform: none;
 }
+.pkt-accordion--plus-minus .pkt-accordion-item[open] > .pkt-accordion-item__title:hover .pkt-accordion-item__icon--minus,
+pkt-accordion[skin=plus-minus] .pkt-accordion-item[open] > .pkt-accordion-item__title:hover .pkt-accordion-item__icon--minus,
 .pkt-accordion-item--plus-minus[open] > .pkt-accordion-item__title:hover .pkt-accordion-item__icon--minus,
 pkt-accordion-item[skin=plus-minus] > .pkt-accordion-item[open] > .pkt-accordion-item__title:hover .pkt-accordion-item__icon--minus {
   transform: none;
@@ -375,22 +397,30 @@ pkt-alert {
   --fg-color: var(--pkt-color-alert-close-fg);
 }
 
+.pkt-alert--small,
 .pkt-alert--compact {
-  padding: 0.75rem 1rem;
+  display: flex;
+  min-height: 3rem;
+  padding: 0.5rem 0.75rem;
 }
+.pkt-alert--small .pkt-alert__grid,
 .pkt-alert--compact .pkt-alert__grid {
   gap: 0.5rem;
+  width: 100%;
 }
+.pkt-alert--small .pkt-alert__icon,
 .pkt-alert--compact .pkt-alert__icon {
-  width: 1.375rem;
-  height: 1.375rem;
+  width: 1.5rem;
+  height: 1.5rem;
 }
+.pkt-alert--small .pkt-alert__title,
 .pkt-alert--compact .pkt-alert__title {
   letter-spacing: -0.2px;
   font-weight: 500;
   font-size: 1rem;
   line-height: 1.5rem;
 }
+.pkt-alert--small .pkt-alert__text,
 .pkt-alert--compact .pkt-alert__text {
   letter-spacing: -0.2px;
   font-weight: 300;
@@ -398,6 +428,32 @@ pkt-alert {
   line-height: 1.5rem;
 }
 
+.pkt-alert--xsmall {
+  display: flex;
+  min-height: 2.5rem;
+  padding: 0.375rem 0.75rem;
+}
+.pkt-alert--xsmall .pkt-alert__grid {
+  gap: 0.375rem;
+  width: 100%;
+}
+.pkt-alert--xsmall .pkt-alert__icon {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+.pkt-alert--xsmall .pkt-alert__title {
+  letter-spacing: -0.2px;
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 1.375rem;
+}
+.pkt-alert--xsmall .pkt-alert__text {
+  letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 0.875rem;
+  line-height: 1.375rem;
+}
+
 /*
  * Back link component
  */
@@ -700,6 +756,10 @@ pkt-calendar .pkt-cal-days {
 pkt-calendar .pkt-cal-days td {
   padding: 0;
 }
+.pkt-calendar .pkt-cal-days .pkt-btn,
+pkt-calendar .pkt-cal-days .pkt-btn {
+  padding: 0;
+}
 .pkt-calendar .pkt-cal-days button,
 .pkt-calendar .pkt-cal-days div,
 pkt-calendar .pkt-cal-days button,
@@ -1086,6 +1146,33 @@ pkt-combobox[fullwidth], pkt-combobox--fullwidth,
 .pkt-combobox__wrapper .pkt-combobox__input--fullwidth {
   width: 100%;
 }
+.pkt-combobox__wrapper .pkt-combobox__input--small {
+  min-height: 2.625rem;
+  padding: 0.375rem 2.5rem 0.375rem 0.375rem;
+  letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+.pkt-combobox__wrapper .pkt-combobox__input--small .pkt-combobox__arrow-icon svg {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+.pkt-combobox__wrapper .pkt-combobox__input--xsmall {
+  min-height: 2.25rem;
+  padding: 0.25rem 2.25rem 0.25rem 0.25rem;
+  letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 0.875rem;
+  line-height: 1.375rem;
+}
+.pkt-combobox__wrapper .pkt-combobox__input--xsmall .pkt-combobox__arrow-icon {
+  padding: 0.25rem 0.5rem;
+}
+.pkt-combobox__wrapper .pkt-combobox__input--xsmall .pkt-combobox__arrow-icon svg {
+  width: 1.125rem;
+  height: 1.125rem;
+}
 .pkt-combobox__wrapper .pkt-combobox__input:hover:not(.pkt-combobox__wrapper .pkt-combobox__input--disabled):not(.pkt-combobox__wrapper .pkt-combobox__input--error) {
   border-color: var(--pkt-color-input-border-hover);
 }
@@ -1195,6 +1282,61 @@ pkt-combobox[fullwidth], pkt-combobox--fullwidth,
   outline: 4px solid var(--pkt-color-border-states-focus);
 }
 
+.pkt-inputwrapper--small .pkt-listbox .pkt-listbox__option:not(.pkt-listbox__search),
+.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__option:not(.pkt-listbox__search) {
+  padding: 0.5rem 1rem;
+  letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+.pkt-inputwrapper--small .pkt-listbox .pkt-listbox__empty,
+.pkt-inputwrapper--small .pkt-listbox .pkt-listbox__banner,
+.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__empty,
+.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__banner {
+  padding: 0.5rem 1rem;
+  letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+.pkt-inputwrapper--small .pkt-listbox .pkt-listbox__search input,
+.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__search input {
+  padding: 0.5rem 0.75rem;
+  letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__option:not(.pkt-listbox__search) {
+  padding: 0.375rem 0.75rem;
+  letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 0.875rem;
+  line-height: 1.375rem;
+}
+.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__empty,
+.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__banner {
+  padding: 0.375rem 0.75rem;
+  letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 0.875rem;
+  line-height: 1.375rem;
+}
+.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__banner-icon,
+.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__search-icon .pkt-icon {
+  width: 1.125rem;
+  height: 1.125rem;
+}
+.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__search input {
+  padding: 0.375rem 0.5rem;
+  letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 0.875rem;
+  line-height: 1.375rem;
+}
+
 .pkt-datepicker,
 pkt-datepicker {
   display: block;
@@ -1306,24 +1448,103 @@ pkt-datepicker-multiple {
   -webkit-appearance: none;
 }
 
-@-moz-document url-prefix() {
+.pkt-datepicker__input.pkt-input--fullwidth.pkt-datepicker--multiple {
+  flex: 1;
+  min-width: 0;
+}
+
+.pkt-datepicker--small .pkt-datepicker__inputs .pkt-input,
+.pkt-datepicker--small .pkt-datepicker__inputs .pkt-input-prefix,
+.pkt-datepicker--small .pkt-datepicker__inputs .pkt-input-suffix,
+.pkt-datepicker--small .pkt-datepicker__inputs .pkt-input-icon,
+.pkt-datepicker--small .pkt-datepicker__inputs .pkt-input-separator {
+  min-height: 2.375rem;
+}
+.pkt-datepicker--small .pkt-datepicker__inputs .pkt-datepicker__input,
+.pkt-datepicker--small .pkt-datepicker__inputs .pkt-input-prefix,
+.pkt-datepicker--small .pkt-datepicker__inputs .pkt-input-separator {
+  letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+.pkt-datepicker--small .pkt-datepicker__inputs button.pkt-input-icon {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+.pkt-datepicker--small .pkt-datepicker__inputs button.pkt-input-icon pkt-icon,
+.pkt-datepicker--small .pkt-datepicker__inputs button.pkt-input-icon .pkt-icon,
+.pkt-datepicker--small .pkt-datepicker__inputs button.pkt-input-icon svg {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+@supports not (-moz-appearance: none) {
+  .pkt-datepicker--small .pkt-datepicker__inputs .pkt-datepicker__input:not(.pkt-datepicker--multiple):not(.pkt-input--fullwidth) {
+    width: 7.3rem;
+  }
+  .pkt-datepicker--small .pkt-datepicker__inputs .pkt-datepicker__input:not(.pkt-datepicker--multiple):not(.pkt-datepicker--range) {
+    max-width: calc(100% - 2.5rem);
+  }
+}
+
+.pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-input,
+.pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-input-prefix,
+.pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-input-suffix,
+.pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-input-icon,
+.pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-input-separator {
+  min-height: 2rem;
+}
+.pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-datepicker__input,
+.pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-input-prefix,
+.pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-input-separator {
+  letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 0.875rem;
+  line-height: 1.375rem;
+  line-height: 1rem;
+}
+.pkt-datepicker--xsmall .pkt-datepicker__inputs button.pkt-input-icon {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+.pkt-datepicker--xsmall .pkt-datepicker__inputs button.pkt-input-icon pkt-icon,
+.pkt-datepicker--xsmall .pkt-datepicker__inputs button.pkt-input-icon .pkt-icon,
+.pkt-datepicker--xsmall .pkt-datepicker__inputs button.pkt-input-icon svg {
+  width: 1.125rem;
+  height: 1.125rem;
+}
+@supports not (-moz-appearance: none) {
+  .pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-datepicker__input:not(.pkt-datepicker--multiple):not(.pkt-input--fullwidth) {
+    width: 6.5rem;
+  }
+  .pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-datepicker__input:not(.pkt-datepicker--multiple):not(.pkt-datepicker--range) {
+    max-width: calc(100% - 2rem);
+  }
+}
+
+@supports (-moz-appearance: none) {
   .pkt-datepicker__inputs .pkt-datepicker__input {
     padding-right: 0.5rem;
   }
   .pkt-datepicker__inputs .pkt-datepicker__input:not(.pkt-datepicker--multiple) {
-    width: 10.5rem;
+    width: auto;
     max-width: 100%;
   }
   .pkt-datepicker__inputs .pkt-datepicker__input.pkt-input--fullwidth:not(.pkt-datepicker--multiple) {
     width: auto;
     flex: 1;
   }
-  .pkt-datepicker__inputs button.pkt-input-icon {
+  .pkt-datepicker__inputs .pkt-input__container:has(.pkt-datepicker__input[type=date]) button.pkt-input-icon {
     display: none;
   }
   .pkt-datepicker__inputs 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-datepicker__inputs .pkt-input__container .pkt-datepicker__input.pkt-datepicker--range {
+      justify-self: start;
+    }
+  }
 }
 pkt-fileupload,
 .pkt-fileupload {
@@ -2265,168 +2486,291 @@ pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal::backdrop {
 }
 
 /*
- * 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)
  */
-.pkt-footer {
-  padding: 2.5rem 1.5rem;
-  background-color: var(--pkt-color-surface-strong-dark-blue);
-  color: var(--pkt-color-text-body-default);
-  display: flex;
-  align-items: center;
+.pkt-footer,
+.pkt-footer-simple {
+  display: block;
+  width: 100%;
+  container-type: inline-size;
+  container-name: pkt-footer;
+}
+
+.pkt-footer__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));
   letter-spacing: -0.2px;
   font-weight: 300;
-  font-size: 1.125rem;
-  line-height: 1.75rem;
+  font-size: 1rem;
+  line-height: 1.5rem;
 }
-@media screen and (min-width: 80rem) {
-  .pkt-footer {
-    padding: 3.5rem 1.5rem;
-    justify-content: center;
+@supports not (container-type: inline-size) {
+  @media screen and (min-width: 64rem) {
+    .pkt-footer__band {
+      letter-spacing: -0.2px;
+      font-weight: 300;
+      font-size: 1.125rem;
+      line-height: 1.75rem;
+    }
   }
 }
-.pkt-footer__container {
-  max-width: 80rem;
+@supports (container-type: inline-size) {
+  @container pkt-footer (min-width: 64rem) {
+    .pkt-footer__band {
+      letter-spacing: -0.2px;
+      font-weight: 300;
+      font-size: 1.125rem;
+      line-height: 1.75rem;
+    }
+  }
 }
-.pkt-footer__title {
-  margin-bottom: 2rem;
-  margin-top: 0;
-  color: var(--pkt-color-text-body-default);
-  letter-spacing: -0.2px;
-  font-weight: 500;
-  font-size: 1.5rem;
-  line-height: 2.25rem;
+.pkt-footer__band--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);
 }
-.pkt-footer__text:last-child {
-  margin-bottom: 0;
-  margin-top: 2rem;
+.pkt-footer__band a {
+  color: inherit;
+  text-decoration: underline;
+  text-underline-position: from-font;
 }
-.pkt-footer__text:not(:last-child) {
-  margin-bottom: 2rem;
-  margin-top: 0;
+.pkt-footer__band a:hover {
+  color: var(--pkt-footer-link-hover, var(--pkt-color-text-action-active, currentColor)) !important;
 }
-.pkt-footer__list {
-  padding: 0;
-  margin: 0;
-  list-style: none;
+.pkt-footer__band h2 {
+  margin: 0 0 1rem;
+  color: inherit;
+  letter-spacing: -0.2px;
+  font-weight: 500;
+  font-size: 1.25rem;
+  line-height: 2rem;
 }
-.pkt-footer__list-item {
-  word-break: break-word;
+@supports not (container-type: inline-size) {
+  @media screen and (min-width: 48rem) {
+    .pkt-footer__band h2 {
+      letter-spacing: -0.2px;
+      font-weight: 500;
+      font-size: 1.375rem;
+      line-height: 2.125rem;
+    }
+  }
 }
-.pkt-footer__list-item:not(:last-child) {
-  margin-bottom: 1rem;
+@supports (container-type: inline-size) {
+  @container pkt-footer (min-width: 48rem) {
+    .pkt-footer__band h2 {
+      letter-spacing: -0.2px;
+      font-weight: 500;
+      font-size: 1.375rem;
+      line-height: 2.125rem;
+    }
+  }
 }
-@media screen and (min-width: 80rem) {
-  .pkt-footer__list-item {
-    margin-bottom: 0;
+@supports not (container-type: inline-size) {
+  @media screen and (min-width: 64rem) {
+    .pkt-footer__band h2 {
+      letter-spacing: -0.2px;
+      font-weight: 500;
+      font-size: 1.5rem;
+      line-height: 2.25rem;
+    }
   }
 }
-.pkt-footer__link {
-  display: flex;
-  text-decoration: none !important;
+@supports (container-type: inline-size) {
+  @container pkt-footer (min-width: 64rem) {
+    .pkt-footer__band h2 {
+      letter-spacing: -0.2px;
+      font-weight: 500;
+      font-size: 1.5rem;
+      line-height: 2.25rem;
+    }
+  }
 }
-.pkt-footer__link:hover .pkt-footer__link-icon {
-  --fg-color: currentColor;
+.pkt-footer__band p {
+  margin: 0 0 1rem;
 }
-.pkt-footer__link-icon {
-  --fg-color: currentColor;
-  width: 24px;
-  height: 24px;
-  margin-right: 0.5rem;
-  flex-shrink: 0;
+.pkt-footer__inner {
+  max-width: 75rem;
+  margin: 0 auto;
+  padding: 3.25rem 1rem;
 }
-@media screen and (min-width: 80rem) {
-  .pkt-footer__link-icon {
-    margin-top: 0;
+@supports not (container-type: inline-size) {
+  @media screen and (min-width: 48rem) {
+    .pkt-footer__inner {
+      padding: 3.25rem 2rem;
+    }
   }
 }
-.pkt-footer__social {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: 2rem;
-  margin-top: 2.5rem;
+@supports (container-type: inline-size) {
+  @container pkt-footer (min-width: 48rem) {
+    .pkt-footer__inner {
+      padding: 3.25rem 2rem;
+    }
+  }
 }
-.pkt-footer__social:hover .pkt-footer__link-icon {
-  --fg-color: currentColor;
+.pkt-footer__inner--compact {
+  padding-top: 2rem;
+  padding-bottom: 2rem;
 }
-@media screen and (min-width: 80rem) {
-  .pkt-footer__social {
-    align-items: flex-end;
-    justify-content: end;
+.pkt-footer__sections {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 2rem;
+}
+@supports not (container-type: inline-size) {
+  @media screen and (min-width: 48rem) {
+    .pkt-footer__sections {
+      grid-template-columns: repeat(3, 1fr);
+      column-gap: 2rem;
+      row-gap: 3.25rem;
+    }
   }
 }
-@media screen and (min-width: 80rem) {
-  .pkt-footer__social-language {
-    justify-self: flex-start;
+@supports (container-type: inline-size) {
+  @container pkt-footer (min-width: 48rem) {
+    .pkt-footer__sections {
+      grid-template-columns: repeat(3, 1fr);
+      column-gap: 2rem;
+      row-gap: 3.25rem;
+    }
   }
 }
-.pkt-footer__social-icon {
-  --fg-color: currentColor;
-  width: 24px;
-  height: 24px;
+.pkt-footer__link-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
 }
-.pkt-footer__social-icon-link:not(:last-child) {
-  margin-right: 1rem;
+.pkt-footer__link-list > li {
+  word-break: break-word;
 }
-
-.pkt-footer-simple {
-  padding: 2rem 1.5rem;
-  background-color: var(--pkt-color-surface-strong-dark-blue);
-  color: var(--pkt-color-text-body-default);
+.pkt-footer__link-domain {
+  white-space: nowrap;
+}
+.pkt-footer__bottom {
   display: flex;
+  justify-content: space-between;
   align-items: center;
-  letter-spacing: -0.2px;
-  font-weight: 300;
-  font-size: 1.125rem;
-  line-height: 1.75rem;
+  gap: 2rem;
+  margin-top: 1rem;
 }
-@media screen and (min-width: 80rem) {
-  .pkt-footer-simple {
-    justify-content: center;
+@supports not (container-type: inline-size) {
+  @media screen and (min-width: 48rem) {
+    .pkt-footer__bottom {
+      grid-column: -2/-1;
+      margin-top: 0;
+    }
   }
 }
-.pkt-footer-simple__container {
-  max-width: 80rem;
+@supports (container-type: inline-size) {
+  @container pkt-footer (min-width: 48rem) {
+    .pkt-footer__bottom {
+      grid-column: -2/-1;
+      margin-top: 0;
+    }
+  }
 }
-.pkt-footer-simple__list {
-  padding: 0;
+.pkt-footer__sections + .pkt-footer__bottom {
+  margin-top: 2rem;
+}
+.pkt-footer__bottom-links {
+  list-style: none;
   margin: 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem 2rem;
+}
+.pkt-footer__some {
   list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
 }
-@media screen and (min-width: 80rem) {
-  .pkt-footer-simple__list-item {
-    display: inline-flex;
+@supports not (container-type: inline-size) {
+  @media screen and (min-width: 48rem) {
+    .pkt-footer__some {
+      gap: 1.5rem;
+    }
   }
 }
-.pkt-footer-simple__list-item:not(:last-child) {
-  margin-bottom: 1rem;
-}
-@media screen and (min-width: 80rem) {
-  .pkt-footer-simple__list-item:not(:last-child) {
-    margin-bottom: 0;
-    margin-right: 2rem;
+@supports (container-type: inline-size) {
+  @container pkt-footer (min-width: 48rem) {
+    .pkt-footer__some {
+      gap: 1.5rem;
+    }
   }
 }
-.pkt-footer-simple__link {
-  display: flex;
-  text-decoration: none !important;
-  align-items: flex-start;
+.pkt-footer__some a {
+  display: inline-flex;
 }
-.pkt-footer-simple__link:hover .pkt-footer__link-icon {
-  --fg-color: currentColor;
+.pkt-footer__some a:has(.pkt-footer__some-icon) {
+  text-decoration: none;
 }
+.pkt-footer__some-icon {
+  --fg-color: currentColor;
+  width: 2rem;
+  height: 2rem;
+}
+.pkt-footer__sections + .pkt-footer__consent {
+  margin-top: 2rem;
+}
+
+.pkt-footer-simple__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+@supports not (container-type: inline-size) {
+  @media screen and (min-width: 48rem) {
+    .pkt-footer-simple__list {
+      flex-direction: row;
+      flex-wrap: wrap;
+      justify-content: center;
+      gap: 1rem 2rem;
+    }
+  }
+}
+@supports (container-type: inline-size) {
+  @container pkt-footer (min-width: 48rem) {
+    .pkt-footer-simple__list {
+      flex-direction: row;
+      flex-wrap: wrap;
+      justify-content: center;
+      gap: 1rem 2rem;
+    }
+  }
+}
+a.pkt-footer-simple__link {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  color: inherit;
+  text-decoration: none;
+}
+a.pkt-footer-simple__link:hover {
+  text-decoration: underline;
+  text-underline-position: from-font;
+}
+
 .pkt-footer-simple__link-icon {
   --fg-color: currentColor;
   width: 24px;
   height: 24px;
-  margin-right: 0.5rem;
   flex-shrink: 0;
 }
-@media screen and (min-width: 80rem) {
-  .pkt-footer-simple__link-icon {
-    margin-top: 0;
-  }
+.pkt-footer-simple__link-domain {
+  white-space: nowrap;
 }
 
 /* 
@@ -2703,6 +3047,293 @@ pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal::backdrop {
   color: var(--pkt-color-text-body-dark);
 }
 
+/*
+ * HeaderGlobal component
+ */
+/*
+ * 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.
+ */
+/**
+ * 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`).
+ */
+/**
+ * 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).
+ */
+/**
+ * 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).
+ */
+.pkt-header-global-spacer {
+  height: 6.5rem;
+}
+.pkt-header-global-spacer--tablet {
+  height: 5.5rem;
+}
+.pkt-header-global-spacer--mobile {
+  height: 5.5rem;
+}
+.pkt-header-global-spacer--mobile.pkt-header-global-spacer--has-user {
+  height: calc(5.5rem + 3.5rem);
+}
+
+.pkt-header-global {
+  position: relative;
+  z-index: 10;
+  background-color: var(--pkt-color-background-default);
+  border-bottom: 1px solid var(--pkt-color-border-subtle);
+}
+.pkt-header-global--fixed {
+  width: 100vw;
+  position: fixed;
+  top: 0;
+  left: 0;
+}
+.pkt-header-global--sticky {
+  position: sticky;
+  top: 0;
+}
+.pkt-header-global--scroll-to-hide {
+  transform: translate3d(0, 0, 0);
+  transition: 0.5s transform ease-in-out;
+}
+.pkt-header-global--hidden {
+  transform: translate3d(0, -100%, 0);
+}
+.pkt-header-global {
+  --pkt-header-height: 6.5rem;
+}
+.pkt-header-global--tablet {
+  --pkt-header-height: 5.5rem;
+}
+.pkt-header-global--mobile {
+  --pkt-header-height: 5.5rem;
+}
+.pkt-header-global {
+  display: grid;
+  align-items: center;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  grid-template-rows: var(--pkt-header-height) auto;
+  column-gap: 1.5rem;
+}
+.pkt-header-global--tablet {
+  column-gap: 1rem;
+}
+.pkt-header-global--mobile {
+  grid-template-columns: auto minmax(0, 1fr);
+  column-gap: 0.5rem;
+}
+.pkt-header-global__logo-area {
+  grid-column: 1;
+  grid-row: 1;
+}
+.pkt-header-global__content {
+  grid-column: 2;
+  grid-row: 1;
+  justify-self: end;
+  max-width: 100%;
+}
+.pkt-header-global__user {
+  grid-column: 3;
+  grid-row: 1;
+}
+.pkt-header-global--mobile .pkt-header-global__user {
+  grid-column: 1/-1;
+  grid-row: 2;
+  justify-self: stretch;
+  padding: 0;
+}
+.pkt-header-global__logo-area {
+  align-items: center;
+  display: inline-flex;
+  padding-left: 2rem;
+}
+.pkt-header-global--tablet .pkt-header-global__logo-area {
+  padding-left: 1rem;
+}
+.pkt-header-global--mobile .pkt-header-global__logo-area {
+  padding-left: 0.5rem;
+}
+.pkt-header-global__content, .pkt-header-global__user {
+  align-items: center;
+  display: inline-flex;
+  min-width: 0;
+}
+.pkt-header-global__content {
+  column-gap: 1.5rem;
+}
+.pkt-header-global--tablet .pkt-header-global__content {
+  column-gap: 0.5rem;
+}
+.pkt-header-global--mobile .pkt-header-global__content {
+  column-gap: 0.5rem;
+  padding-right: 0.5rem;
+}
+.pkt-header-global__menu-toggle, .pkt-header-global__contact {
+  flex: 0 0 auto;
+}
+.pkt-header-global__user {
+  justify-self: end;
+  padding-right: 2rem;
+}
+.pkt-header-global--tablet:not(.pkt-header-global--mobile) .pkt-header-global__user {
+  padding-right: 1rem;
+}
+.pkt-header-global__user-container {
+  position: relative;
+  flex: 0 0 auto;
+}
+.pkt-header-global__user-container.is-open {
+  z-index: 100;
+}
+.pkt-header-global__logo {
+  --fg-color: var(--pkt-color-text-body-default);
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+}
+.pkt-header-global__logo a,
+.pkt-header-global__logo button {
+  display: flex;
+  align-items: center;
+}
+.pkt-header-global__logo svg {
+  aspect-ratio: 6/3;
+  height: 4rem;
+}
+.pkt-header-global--mobile .pkt-header-global__logo svg {
+  height: 3.2rem;
+}
+.pkt-header-global__search {
+  flex: 0 1 auto;
+  width: 22rem;
+  max-width: 100%;
+  min-width: 0;
+}
+.pkt-header-global__search .pkt-searchinput,
+.pkt-header-global__search .pkt-searchinput__field {
+  width: 100%;
+}
+.pkt-header-global__contact {
+  flex: 0 0 auto;
+  white-space: nowrap;
+}
+.pkt-header-global__user-button {
+  max-width: 20rem;
+}
+.pkt-header-global__user-button .pkt-btn__text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+  flex: 1 1 auto;
+}
+.pkt-header-global__user-menu {
+  position: absolute;
+  right: 0;
+  width: max(15.5rem, 100%);
+  max-width: min(32rem, 90vw);
+}
+.pkt-header-global__user-menu.is-open {
+  z-index: 100;
+}
+.pkt-header-global__search-toggle, .pkt-header-global__search-toggle button {
+  flex: 0 0 auto;
+  border-radius: 50%;
+}
+.pkt-header-global--mobile .pkt-header-global__menu-toggle, .pkt-header-global--mobile .pkt-header-global__menu-toggle button {
+  border-radius: 50%;
+}
+.pkt-header-global__menu, .pkt-header-global__search-panel {
+  position: fixed;
+  top: max(0px, var(--pkt-header-global-top, 0px) + 6.5rem);
+  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;
+}
+.pkt-header-global__menu--tablet, .pkt-header-global__menu--mobile, .pkt-header-global__search-panel--tablet, .pkt-header-global__search-panel--mobile {
+  top: max(0px, var(--pkt-header-global-top, 0px) + 5.5rem);
+}
+.pkt-header-global__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);
+}
+.pkt-header-global__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: 1rem;
+}
+.pkt-header-global__search-panel-inner .pkt-searchinput,
+.pkt-header-global__search-panel-inner .pkt-searchinput__field {
+  width: 100%;
+}
+
+.pkt-header-global.pkt-header-global--mobile .pkt-header-global__user-container {
+  background-color: var(--pkt-color-background-default);
+  height: 3.5rem;
+  width: 100%;
+  z-index: 99;
+}
+.pkt-header-global.pkt-header-global--mobile .pkt-header-global__user-button:is(button), .pkt-header-global.pkt-header-global--mobile .pkt-header-global__user-button button {
+  height: 100%;
+  padding: 0 1.5rem;
+  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);
+}
+.pkt-header-global.pkt-header-global--mobile .pkt-header-global__user-button:not(button) {
+  display: contents;
+}
+.pkt-header-global.pkt-header-global--mobile .pkt-header-global__user-menu {
+  max-width: 100%;
+  position: unset;
+}
+
 /*
  * Header menu (global mega menu)
  */
@@ -2711,25 +3342,30 @@ pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal::backdrop {
   background-color: var(--pkt-color-background-default);
   color: var(--pkt-color-text-body-default);
   width: 100%;
-  padding-bottom: 2rem;
-}
-@media screen and (min-width: 48rem) {
-  .pkt-header-menu {
-    padding-bottom: 0;
-  }
+  container-type: inline-size;
+  container-name: pkt-header-menu;
 }
 .pkt-header-menu--open {
   display: block;
 }
 .pkt-header-menu__services {
-  max-width: 75.25rem;
+  max-width: 75rem;
   margin: 0 auto;
   padding-top: 2rem;
   padding-bottom: 1rem;
 }
-@media screen and (min-width: 48rem) {
-  .pkt-header-menu__services {
-    padding: 3.25rem;
+@supports not (container-type: inline-size) {
+  @media screen and (min-width: 48rem) {
+    .pkt-header-menu__services {
+      padding: 3.25rem;
+    }
+  }
+}
+@supports (container-type: inline-size) {
+  @container pkt-header-menu (min-width: 48rem) {
+    .pkt-header-menu__services {
+      padding: 3.25rem;
+    }
   }
 }
 .pkt-header-menu__services-title, .pkt-header-menu__section-title {
@@ -2740,17 +3376,38 @@ pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal::backdrop {
   margin: 0 0 2rem;
   display: none;
 }
-@media screen and (min-width: 48rem) {
-  .pkt-header-menu__services-title, .pkt-header-menu__section-title {
-    display: block;
+@supports not (container-type: inline-size) {
+  @media screen and (min-width: 48rem) {
+    .pkt-header-menu__services-title, .pkt-header-menu__section-title {
+      display: block;
+    }
   }
 }
-@media screen and (min-width: 64rem) {
-  .pkt-header-menu__services-title, .pkt-header-menu__section-title {
-    letter-spacing: -0.2px;
-    font-weight: 500;
-    font-size: 1.375rem;
-    line-height: 2.125rem;
+@supports (container-type: inline-size) {
+  @container pkt-header-menu (min-width: 48rem) {
+    .pkt-header-menu__services-title, .pkt-header-menu__section-title {
+      display: block;
+    }
+  }
+}
+@supports not (container-type: inline-size) {
+  @media screen and (min-width: 64rem) {
+    .pkt-header-menu__services-title, .pkt-header-menu__section-title {
+      letter-spacing: -0.2px;
+      font-weight: 500;
+      font-size: 1.375rem;
+      line-height: 2.125rem;
+    }
+  }
+}
+@supports (container-type: inline-size) {
+  @container pkt-header-menu (min-width: 64rem) {
+    .pkt-header-menu__services-title, .pkt-header-menu__section-title {
+      letter-spacing: -0.2px;
+      font-weight: 500;
+      font-size: 1.375rem;
+      line-height: 2.125rem;
+    }
   }
 }
 .pkt-header-menu__services-title {
@@ -2764,84 +3421,166 @@ pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal::backdrop {
   grid-template-columns: 1fr;
   gap: 1.25rem;
 }
-@media screen and (min-width: 48rem) {
-  .pkt-header-menu__services-list {
-    grid-template-columns: repeat(4, 1fr);
-    row-gap: 2.5rem;
+@supports not (container-type: inline-size) {
+  @media screen and (min-width: 48rem) {
+    .pkt-header-menu__services-list {
+      grid-template-columns: repeat(4, 1fr);
+      row-gap: 2.5rem;
+    }
+  }
+}
+@supports (container-type: inline-size) {
+  @container pkt-header-menu (min-width: 48rem) {
+    .pkt-header-menu__services-list {
+      grid-template-columns: repeat(4, 1fr);
+      row-gap: 2.5rem;
+    }
   }
 }
 .pkt-header-menu__buttons {
   display: none;
-  max-width: 75.25rem;
+  max-width: 75rem;
   margin: 0 auto;
   padding-top: 2rem;
   padding-bottom: 1rem;
 }
-@media screen and (min-width: 48rem) {
-  .pkt-header-menu__buttons {
-    padding: 3.25rem;
+@supports not (container-type: inline-size) {
+  @media screen and (min-width: 48rem) {
+    .pkt-header-menu__buttons {
+      padding: 3.25rem;
+    }
   }
 }
-@media screen and (min-width: 48rem) {
-  .pkt-header-menu__buttons {
-    display: flex;
-    gap: 1rem;
-    flex-wrap: wrap;
-    padding-top: 0;
+@supports (container-type: inline-size) {
+  @container pkt-header-menu (min-width: 48rem) {
+    .pkt-header-menu__buttons {
+      padding: 3.25rem;
+    }
   }
 }
-@media screen and (min-width: 64rem) {
-  .pkt-header-menu__buttons .pkt-btn__text {
-    letter-spacing: -0.2px;
-    font-weight: 500;
-    font-size: 1.125rem;
-    line-height: 1.75rem;
+@supports not (container-type: inline-size) {
+  @media screen and (min-width: 48rem) {
+    .pkt-header-menu__buttons {
+      display: flex;
+      gap: 1rem;
+      flex-wrap: wrap;
+      padding-top: 0;
+    }
+  }
+}
+@supports (container-type: inline-size) {
+  @container pkt-header-menu (min-width: 48rem) {
+    .pkt-header-menu__buttons {
+      display: flex;
+      gap: 1rem;
+      flex-wrap: wrap;
+      padding-top: 0;
+    }
+  }
+}
+@supports not (container-type: inline-size) {
+  @media screen and (min-width: 64rem) {
+    .pkt-header-menu__buttons .pkt-btn__text {
+      letter-spacing: -0.2px;
+      font-weight: 500;
+      font-size: 1.125rem;
+      line-height: 1.75rem;
+    }
+  }
+}
+@supports (container-type: inline-size) {
+  @container pkt-header-menu (min-width: 64rem) {
+    .pkt-header-menu__buttons .pkt-btn__text {
+      letter-spacing: -0.2px;
+      font-weight: 500;
+      font-size: 1.125rem;
+      line-height: 1.75rem;
+    }
   }
 }
 .pkt-header-menu__buttons--mobile {
   padding: 0 1rem;
   display: flex;
 }
-@media screen and (min-width: 48rem) {
-  .pkt-header-menu__buttons--mobile {
-    display: none;
+@supports not (container-type: inline-size) {
+  @media screen and (min-width: 48rem) {
+    .pkt-header-menu__buttons--mobile {
+      display: none;
+    }
   }
 }
-@media screen and (min-width: 48rem) {
-  .pkt-header-menu__sections {
-    background-color: var(--pkt-color-surface-strong-gray);
+@supports (container-type: inline-size) {
+  @container pkt-header-menu (min-width: 48rem) {
+    .pkt-header-menu__buttons--mobile {
+      display: none;
+    }
   }
-  [data-mode=dark] .pkt-header-menu__sections {
-    background-color: var(--pkt-color-background-default);
+}
+@supports not (container-type: inline-size) {
+  @media screen and (min-width: 48rem) {
+    .pkt-header-menu__sections {
+      background-color: var(--pkt-color-surface-strong-gray);
+    }
+    [data-mode=dark] .pkt-header-menu__sections {
+      background-color: var(--pkt-color-background-default);
+    }
+  }
+}
+@supports (container-type: inline-size) {
+  @container pkt-header-menu (min-width: 48rem) {
+    .pkt-header-menu__sections {
+      background-color: var(--pkt-color-surface-strong-gray);
+    }
+    [data-mode=dark] .pkt-header-menu__sections {
+      background-color: var(--pkt-color-background-default);
+    }
   }
 }
 .pkt-header-menu__sections-inner {
-  max-width: 75.25rem;
+  max-width: 75rem;
   margin: 0 auto;
   padding-top: 2rem;
   padding-bottom: 1rem;
 }
-@media screen and (min-width: 48rem) {
-  .pkt-header-menu__sections-inner {
-    padding: 3.25rem;
+@supports not (container-type: inline-size) {
+  @media screen and (min-width: 48rem) {
+    .pkt-header-menu__sections-inner {
+      padding: 3.25rem;
+    }
   }
 }
-@media screen and (min-width: 48rem) {
-  .pkt-header-menu__sections-inner {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 2rem;
+@supports (container-type: inline-size) {
+  @container pkt-header-menu (min-width: 48rem) {
+    .pkt-header-menu__sections-inner {
+      padding: 3.25rem;
+    }
   }
 }
-@media screen and (min-width: 0rem) and (max-width: 47.938rem) {
-  .pkt-header-menu__section .pkt-accordion-item__title {
-    letter-spacing: -0.2px;
-    font-weight: 500;
-    font-size: 1.125rem;
-    line-height: 1.75rem;
-    padding: 1rem 0;
+@supports not (container-type: inline-size) {
+  @media screen and (min-width: 48rem) {
+    .pkt-header-menu__sections-inner {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 2rem;
+    }
+  }
+}
+@supports (container-type: inline-size) {
+  @container pkt-header-menu (min-width: 48rem) {
+    .pkt-header-menu__sections-inner {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 2rem;
+    }
   }
 }
+.pkt-header-menu__section .pkt-accordion-item__title {
+  letter-spacing: -0.2px;
+  font-weight: 500;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  padding: 0.5rem 1rem;
+}
 .pkt-header-menu__section-list {
   list-style: none;
   margin: 0;
@@ -2850,9 +3589,18 @@ pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal::backdrop {
   flex-direction: column;
   gap: 1rem;
 }
-@media screen and (min-width: 48rem) {
-  .pkt-header-menu__section-list {
-    row-gap: 1rem;
+@supports not (container-type: inline-size) {
+  @media screen and (min-width: 48rem) {
+    .pkt-header-menu__section-list {
+      row-gap: 1rem;
+    }
+  }
+}
+@supports (container-type: inline-size) {
+  @container pkt-header-menu (min-width: 48rem) {
+    .pkt-header-menu__section-list {
+      row-gap: 1rem;
+    }
   }
 }
 .pkt-header-menu__section-link {
@@ -2866,12 +3614,24 @@ pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal::backdrop {
   text-underline-position: from-font;
   line-height: 1.5;
 }
-@media screen and (min-width: 64rem) {
-  .pkt-header-menu__section-link {
-    letter-spacing: -0.2px;
-    font-weight: 300;
-    font-size: 1.125rem;
-    line-height: 1.75rem;
+@supports not (container-type: inline-size) {
+  @media screen and (min-width: 64rem) {
+    .pkt-header-menu__section-link {
+      letter-spacing: -0.2px;
+      font-weight: 300;
+      font-size: 1.125rem;
+      line-height: 1.75rem;
+    }
+  }
+}
+@supports (container-type: inline-size) {
+  @container pkt-header-menu (min-width: 64rem) {
+    .pkt-header-menu__section-link {
+      letter-spacing: -0.2px;
+      font-weight: 300;
+      font-size: 1.125rem;
+      line-height: 1.75rem;
+    }
   }
 }
 .pkt-header-menu__section-link:hover, .pkt-header-menu__section-link:focus-visible {
@@ -2891,12 +3651,24 @@ pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal::backdrop {
   font-size: 1rem;
   line-height: 1.5rem;
 }
-@media screen and (min-width: 64rem) {
-  .pkt-header-menu__service-link {
-    letter-spacing: -0.2px;
-    font-weight: 300;
-    font-size: 1.125rem;
-    line-height: 1.75rem;
+@supports not (container-type: inline-size) {
+  @media screen and (min-width: 64rem) {
+    .pkt-header-menu__service-link {
+      letter-spacing: -0.2px;
+      font-weight: 300;
+      font-size: 1.125rem;
+      line-height: 1.75rem;
+    }
+  }
+}
+@supports (container-type: inline-size) {
+  @container pkt-header-menu (min-width: 64rem) {
+    .pkt-header-menu__service-link {
+      letter-spacing: -0.2px;
+      font-weight: 300;
+      font-size: 1.125rem;
+      line-height: 1.75rem;
+    }
   }
 }
 .pkt-header-menu__service-link:hover .pkt-header-menu__service-text, .pkt-header-menu__service-link:focus-visible .pkt-header-menu__service-text {
@@ -2909,10 +3681,20 @@ pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal::backdrop {
   width: 1.5rem;
   height: 1.5rem;
 }
-@media screen and (min-width: 48rem) {
-  .pkt-header-menu__service-icon {
-    width: 2rem;
-    height: 2rem;
+@supports not (container-type: inline-size) {
+  @media screen and (min-width: 48rem) {
+    .pkt-header-menu__service-icon {
+      width: 2rem;
+      height: 2rem;
+    }
+  }
+}
+@supports (container-type: inline-size) {
+  @container pkt-header-menu (min-width: 48rem) {
+    .pkt-header-menu__service-icon {
+      width: 2rem;
+      height: 2rem;
+    }
   }
 }
 .pkt-header-menu__service-icon svg {
@@ -2923,28 +3705,49 @@ pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal::backdrop {
   min-width: 0;
 }
 .pkt-header-menu__footer {
-  max-width: 75.25rem;
+  max-width: 75rem;
   margin: 0 auto;
   padding-top: 2rem;
   padding-bottom: 1rem;
 }
-@media screen and (min-width: 48rem) {
-  .pkt-header-menu__footer {
-    padding: 3.25rem;
+@supports not (container-type: inline-size) {
+  @media screen and (min-width: 48rem) {
+    .pkt-header-menu__footer {
+      padding: 3.25rem;
+    }
+  }
+}
+@supports (container-type: inline-size) {
+  @container pkt-header-menu (min-width: 48rem) {
+    .pkt-header-menu__footer {
+      padding: 3.25rem;
+    }
   }
 }
 .pkt-header-menu__footer {
-  padding: 1.5rem 1rem 1rem;
+  padding: 1.5rem 1rem 3rem;
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
 }
-@media screen and (min-width: 48rem) {
-  .pkt-header-menu__footer {
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    padding: 2rem 3.25rem;
+@supports not (container-type: inline-size) {
+  @media screen and (min-width: 48rem) {
+    .pkt-header-menu__footer {
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      padding: 2rem 3.25rem;
+    }
+  }
+}
+@supports (container-type: inline-size) {
+  @container pkt-header-menu (min-width: 48rem) {
+    .pkt-header-menu__footer {
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      padding: 2rem 3.25rem;
+    }
   }
 }
 .pkt-header-menu__footer-list {
@@ -2955,33 +3758,66 @@ pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal::backdrop {
   flex-direction: column;
   gap: 0.75rem;
 }
-@media screen and (min-width: 48rem) {
-  .pkt-header-menu__footer-list {
-    flex-direction: row;
-    gap: 0rem;
-  }
-  .pkt-header-menu__footer-list:not(.pkt-header-menu__footer-list--social) {
-    line-height: 1;
-  }
-  .pkt-header-menu__footer-list:not(.pkt-header-menu__footer-list--social) > * {
-    border-right: 1px solid currentColor;
-    padding: 0 2rem;
-  }
-  .pkt-header-menu__footer-list:not(.pkt-header-menu__footer-list--social) > *:first-child {
-    padding-left: 0;
+@supports not (container-type: inline-size) {
+  @media screen and (min-width: 48rem) {
+    .pkt-header-menu__footer-list {
+      flex-direction: row;
+      gap: 0rem;
+    }
+    .pkt-header-menu__footer-list:not(.pkt-header-menu__footer-list--social) {
+      line-height: 1;
+    }
+    .pkt-header-menu__footer-list:not(.pkt-header-menu__footer-list--social) > * {
+      border-right: 1px solid currentColor;
+      padding: 0 2rem;
+    }
+    .pkt-header-menu__footer-list:not(.pkt-header-menu__footer-list--social) > *:first-child {
+      padding-left: 0;
+    }
+    .pkt-header-menu__footer-list:not(.pkt-header-menu__footer-list--social) > *:last-child {
+      border-right: none;
+      padding-right: 0;
+    }
   }
-  .pkt-header-menu__footer-list:not(.pkt-header-menu__footer-list--social) > *:last-child {
-    border-right: none;
-    padding-right: 0;
+}
+@supports (container-type: inline-size) {
+  @container pkt-header-menu (min-width: 48rem) {
+    .pkt-header-menu__footer-list {
+      flex-direction: row;
+      gap: 0rem;
+    }
+    .pkt-header-menu__footer-list:not(.pkt-header-menu__footer-list--social) {
+      line-height: 1;
+    }
+    .pkt-header-menu__footer-list:not(.pkt-header-menu__footer-list--social) > * {
+      border-right: 1px solid currentColor;
+      padding: 0 2rem;
+    }
+    .pkt-header-menu__footer-list:not(.pkt-header-menu__footer-list--social) > *:first-child {
+      padding-left: 0;
+    }
+    .pkt-header-menu__footer-list:not(.pkt-header-menu__footer-list--social) > *:last-child {
+      border-right: none;
+      padding-right: 0;
+    }
   }
 }
 .pkt-header-menu__footer-list--social {
   flex-direction: row;
   gap: 1rem;
 }
-@media screen and (min-width: 48rem) {
-  .pkt-header-menu__footer-list--social {
-    gap: 2rem;
+@supports not (container-type: inline-size) {
+  @media screen and (min-width: 48rem) {
+    .pkt-header-menu__footer-list--social {
+      gap: 2rem;
+    }
+  }
+}
+@supports (container-type: inline-size) {
+  @container pkt-header-menu (min-width: 48rem) {
+    .pkt-header-menu__footer-list--social {
+      gap: 2rem;
+    }
   }
 }
 .pkt-header-menu__footer-link {
@@ -2992,12 +3828,24 @@ pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal::backdrop {
   color: var(--pkt-color-text-body-default);
   text-decoration: none;
 }
-@media screen and (min-width: 64rem) {
-  .pkt-header-menu__footer-link {
-    letter-spacing: -0.2px;
-    font-weight: 300;
-    font-size: 1.125rem;
-    line-height: 1.75rem;
+@supports not (container-type: inline-size) {
+  @media screen and (min-width: 64rem) {
+    .pkt-header-menu__footer-link {
+      letter-spacing: -0.2px;
+      font-weight: 300;
+      font-size: 1.125rem;
+      line-height: 1.75rem;
+    }
+  }
+}
+@supports (container-type: inline-size) {
+  @container pkt-header-menu (min-width: 64rem) {
+    .pkt-header-menu__footer-link {
+      letter-spacing: -0.2px;
+      font-weight: 300;
+      font-size: 1.125rem;
+      line-height: 1.75rem;
+    }
   }
 }
 .pkt-header-menu__footer-link:hover, .pkt-header-menu__footer-link:focus-visible {
@@ -3015,19 +3863,43 @@ pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal::backdrop {
   height: 2rem;
 }
 .pkt-header-menu__loading, .pkt-header-menu__error {
-  max-width: 75.25rem;
+  max-width: 75rem;
   margin: 0 auto;
   padding-top: 2rem;
   padding-bottom: 1rem;
 }
-@media screen and (min-width: 48rem) {
-  .pkt-header-menu__loading, .pkt-header-menu__error {
-    padding: 3.25rem;
+@supports not (container-type: inline-size) {
+  @media screen and (min-width: 48rem) {
+    .pkt-header-menu__loading, .pkt-header-menu__error {
+      padding: 3.25rem;
+    }
+  }
+}
+@supports (container-type: inline-size) {
+  @container pkt-header-menu (min-width: 48rem) {
+    .pkt-header-menu__loading, .pkt-header-menu__error {
+      padding: 3.25rem;
+    }
   }
 }
 .pkt-header-menu__loading, .pkt-header-menu__error {
   text-align: center;
   color: var(--pkt-color-text-body-default);
+  padding-bottom: 3rem;
+}
+@supports not (container-type: inline-size) {
+  @media screen and (min-width: 48rem) {
+    .pkt-header-menu__loading, .pkt-header-menu__error {
+      padding-bottom: 3.25rem;
+    }
+  }
+}
+@supports (container-type: inline-size) {
+  @container pkt-header-menu (min-width: 48rem) {
+    .pkt-header-menu__loading, .pkt-header-menu__error {
+      padding-bottom: 3.25rem;
+    }
+  }
 }
 
 /*
@@ -3112,6 +3984,25 @@ pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal::backdrop {
   z-index: 10;
   background-color: var(--pkt-color-background-default);
   border-bottom: 1px solid var(--pkt-color-border-subtle);
+}
+.pkt-header-service--fixed {
+  width: 100vw;
+  position: fixed;
+  top: 0;
+  left: 0;
+}
+.pkt-header-service--sticky {
+  position: sticky;
+  top: 0;
+}
+.pkt-header-service--scroll-to-hide {
+  transform: translate3d(0, 0, 0);
+  transition: 0.5s transform ease-in-out;
+}
+.pkt-header-service--hidden {
+  transform: translate3d(0, -100%, 0);
+}
+.pkt-header-service {
   display: grid;
   align-items: center;
   grid-template-columns: 1fr auto auto;
@@ -3129,19 +4020,6 @@ pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal::backdrop {
 .pkt-header-service--compact {
   grid-template-rows: 4.5rem auto;
 }
-.pkt-header-service--fixed {
-  width: 100vw;
-  position: fixed;
-  top: 0;
-  left: 0;
-}
-.pkt-header-service--scroll-to-hide {
-  transform: translate3d(0, 0, 0);
-  transition: 0.5s transform ease-in-out;
-}
-.pkt-header-service--hidden {
-  transform: translate3d(0, -100%, 0);
-}
 .pkt-header-service__logo-area, .pkt-header-service__content, .pkt-header-service__user {
   display: inline-flex;
   column-gap: 2rem;
@@ -3287,7 +4165,7 @@ pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal::backdrop {
   position: relative;
 }
 .pkt-header-service__user-button {
-  max-width: 28.5rem;
+  max-width: 22.5rem;
 }
 .pkt-header-service__user-button .pkt-btn__text {
   overflow: hidden;
@@ -3346,6 +4224,28 @@ pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal::backdrop {
     grid-template-rows: 4.5rem auto;
   }
 }
+.pkt-header-service.pkt-header-service--mobile .pkt-header-service__user-container {
+  background-color: var(--pkt-color-background-default);
+  height: 3.5rem;
+  width: 100%;
+  z-index: 99;
+}
+.pkt-header-service.pkt-header-service--mobile .pkt-header-service__user-button:is(button), .pkt-header-service.pkt-header-service--mobile .pkt-header-service__user-button button {
+  height: 100%;
+  padding: 0 1.5rem;
+  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);
+}
+.pkt-header-service.pkt-header-service--mobile .pkt-header-service__user-button:not(button) {
+  display: contents;
+}
+.pkt-header-service.pkt-header-service--mobile .pkt-header-service__user-menu {
+  max-width: 100%;
+  position: unset;
+}
 .pkt-header-service.pkt-header-service--mobile .pkt-header-service--compact {
   grid-template-rows: 4rem auto;
 }
@@ -3379,28 +4279,6 @@ pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal::backdrop {
 .pkt-header-service.pkt-header-service--mobile .pkt-header-service__mobile-menu {
   background-color: var(--pkt-color-background-default);
 }
-.pkt-header-service.pkt-header-service--mobile .pkt-header-service__user-container {
-  background-color: var(--pkt-color-background-default);
-  height: 3.5rem;
-  width: 100%;
-  z-index: 99;
-}
-.pkt-header-service.pkt-header-service--mobile .pkt-header-service__user-button:is(button), .pkt-header-service.pkt-header-service--mobile .pkt-header-service__user-button button {
-  height: 100%;
-  padding: 0 1.5rem;
-  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);
-}
-.pkt-header-service.pkt-header-service--mobile .pkt-header-service__user-button:not(button) {
-  display: contents;
-}
-.pkt-header-service.pkt-header-service--mobile .pkt-header-service__user-menu {
-  max-width: 100%;
-  position: unset;
-}
 .pkt-header-service.pkt-header-service--mobile .pkt-header-service__slot-content {
   display: none;
 }
@@ -3861,7 +4739,7 @@ pkt-input-wrapper {
 .pkt-inputwrapper__helptext-container {
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
+  gap: 0.5rem;
 }
 .pkt-inputwrapper__helptext {
   width: min(100%, 31rem);
@@ -3888,6 +4766,12 @@ pkt-input-wrapper {
 .pkt-inputwrapper__helptext > *:last-child {
   margin-bottom: 0;
 }
+.pkt-inputwrapper__helptext-expandable {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.25rem;
+}
 .pkt-inputwrapper__helptext-expandable-heading {
   margin: 0;
   letter-spacing: -0.2px;
@@ -3899,7 +4783,6 @@ pkt-input-wrapper {
   display: block;
   border-left: 2px solid var(--pkt-color-text-body-dark);
   padding: 0.5rem 1rem;
-  margin-bottom: 0.25rem;
 }
 .pkt-inputwrapper__helptext-expandable-closed {
   display: none;
@@ -3946,8 +4829,21 @@ pkt-input-wrapper {
   width: min(100%, 31rem);
   margin: 0 0 0.5rem 0;
 }
-.pkt-inputwrapper .pkt-alert--error {
-  margin: 0.5rem 0 0.5rem 0;
+.pkt-inputwrapper__alert-wrapper {
+  align-self: stretch;
+  max-width: min(100%, 31rem);
+}
+.pkt-inputwrapper__alert-wrapper .pkt-alert {
+  width: 100%;
+  margin: 0;
+}
+.pkt-inputwrapper:has(.pkt-input--fullwidth) .pkt-inputwrapper__alert-wrapper {
+  max-width: none;
+}
+.pkt-inputwrapper__fieldset > .pkt-alert {
+  align-self: stretch;
+  width: auto;
+  max-width: min(100%, 31rem);
 }
 .pkt-inputwrapper .pkt-tag {
   margin-left: 8px;
@@ -3999,10 +4895,46 @@ pkt-input-wrapper {
   box-shadow: none;
   outline: none;
 }
-.pkt-inputwrapper--disabled .pkt-input__container:active .pkt-input {
-  border-right: none;
-  box-shadow: none;
-  outline: none;
+.pkt-inputwrapper--disabled .pkt-input__container:active .pkt-input {
+  border-right: none;
+  box-shadow: none;
+  outline: none;
+}
+.pkt-inputwrapper--small .pkt-inputwrapper__helptext-container, .pkt-inputwrapper--xsmall .pkt-inputwrapper__helptext-container {
+  gap: 0.25rem;
+}
+.pkt-inputwrapper--small .pkt-inputwrapper__helptext,
+.pkt-inputwrapper--small .pkt-inputwrapper__helptext > .pkt-btn,
+.pkt-inputwrapper--small .pkt-inputwrapper__helptext-expandable .pkt-btn, .pkt-inputwrapper--xsmall .pkt-inputwrapper__helptext,
+.pkt-inputwrapper--xsmall .pkt-inputwrapper__helptext > .pkt-btn,
+.pkt-inputwrapper--xsmall .pkt-inputwrapper__helptext-expandable .pkt-btn {
+  letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 0.75rem;
+  line-height: 1.25rem;
+}
+.pkt-inputwrapper--small .pkt-inputwrapper__helptext-expandable-heading, .pkt-inputwrapper--xsmall .pkt-inputwrapper__helptext-expandable-heading {
+  letter-spacing: -0.2px;
+  font-weight: 500;
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+.pkt-inputwrapper--small .pkt-inputwrapper__fieldset, .pkt-inputwrapper--xsmall .pkt-inputwrapper__fieldset {
+  gap: 0.25rem;
+}
+.pkt-inputwrapper--small .pkt-inputwrapper__label,
+.pkt-inputwrapper--small .pkt-inputwrapper__legend {
+  letter-spacing: -0.2px;
+  font-weight: 500;
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+.pkt-inputwrapper--xsmall .pkt-inputwrapper__label,
+.pkt-inputwrapper--xsmall .pkt-inputwrapper__legend {
+  letter-spacing: -0.2px;
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 1.375rem;
 }
 
 [data-mode=dark] .pkt-inputwrapper {
@@ -4666,11 +5598,6 @@ pkt-listbox {
   background-size: 100% 40px, 100% 50px, 100% 16px, 100% 16px;
 }
 
-body.pkt-modal--open {
-  overflow: hidden;
-  scrollbar-gutter: stable;
-}
-
 .pkt-modal--small {
   width: 480px;
 }
@@ -5101,7 +6028,6 @@ pkt-messagebox {
   transition: margin-left 0.5s ease;
 }
 
-/* Common styles for all inputs */
 .pkt-searchinput {
   position: relative;
   letter-spacing: -0.2px;
@@ -5109,9 +6035,64 @@ pkt-messagebox {
   font-size: 1.125rem;
   line-height: 1.75rem;
 }
+.pkt-searchinput--small {
+  letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+.pkt-searchinput--small .pkt-inputwrapper__label {
+  letter-spacing: -0.2px;
+  font-weight: 500;
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+.pkt-searchinput--small .pkt-searchinput__suggestion {
+  padding: 0.75rem;
+  letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+.pkt-searchinput--small .pkt-searchinput__suggestion-title {
+  letter-spacing: -0.2px;
+  font-weight: 500;
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+.pkt-searchinput--xsmall {
+  letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 0.875rem;
+  line-height: 1.375rem;
+}
+.pkt-searchinput--xsmall .pkt-inputwrapper__label {
+  letter-spacing: -0.2px;
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 1.375rem;
+}
+.pkt-searchinput--xsmall .pkt-searchinput__suggestion {
+  padding: 0.5rem;
+  letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 0.875rem;
+  line-height: 1.375rem;
+}
+.pkt-searchinput--xsmall .pkt-searchinput__suggestion-title {
+  letter-spacing: -0.2px;
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 1.375rem;
+}
 .pkt-searchinput__field {
   width: min(100%, 31rem);
   display: flex;
+  align-items: stretch;
+}
+.pkt-searchinput__field .pkt-input {
+  flex: 1;
+  min-width: 0;
 }
 .pkt-searchinput--fullwidth .pkt-searchinput__field {
   width: 100%;
@@ -5128,9 +6109,12 @@ pkt-messagebox {
 .pkt-searchinput--local-with-button .pkt-searchinput__field {
   gap: 0.5rem;
 }
-.pkt-searchinput--local .pkt-input {
+.pkt-searchinput--local .pkt-input__container--medium .pkt-input {
   padding: 0.5rem 0 0.5rem 1rem;
 }
+.pkt-searchinput--local .pkt-input__container--small .pkt-input, .pkt-searchinput--local .pkt-input__container--xsmall .pkt-input {
+  padding-right: 0;
+}
 .pkt-searchinput--local .pkt-searchinput__button:disabled {
   border-color: var(--pkt-color-input-border-disabled);
 }
@@ -5153,9 +6137,21 @@ pkt-messagebox {
 .pkt-searchinput--global .pkt-searchinput__suggestions {
   width: min(100% - 3rem, 28rem);
 }
+.pkt-searchinput--global.pkt-searchinput--small .pkt-searchinput__suggestions {
+  width: min(100% - 2.625rem, 28rem);
+}
+.pkt-searchinput--global.pkt-searchinput--xsmall .pkt-searchinput__suggestions {
+  width: min(100% - 2.25rem, 28rem);
+}
 .pkt-searchinput--local-with-button .pkt-searchinput__suggestions {
   width: min(100% - 3.5rem, 27.5rem);
 }
+.pkt-searchinput--local-with-button.pkt-searchinput--small .pkt-searchinput__suggestions {
+  width: min(100% - 3.125rem, 27.5rem);
+}
+.pkt-searchinput--local-with-button.pkt-searchinput--xsmall .pkt-searchinput__suggestions {
+  width: min(100% - 2.75rem, 27.5rem);
+}
 .pkt-searchinput--fullwidth .pkt-searchinput__suggestions {
   width: 100%;
 }
@@ -5899,13 +6895,40 @@ pkt-select {
   color: var(--pkt-color-input-text-normal);
   margin: 0;
   padding: 0.5rem 1rem;
+  min-height: 3rem;
   letter-spacing: -0.2px;
   font-weight: 300;
   font-size: 1.125rem;
   line-height: 1.75rem;
 }
-.pkt-input:not(.pkt-input-compact), .pkt-textinput__input:not(.pkt-input-compact) {
-  min-height: 3rem;
+.pkt-input--small:not(:is(textarea, .pkt-timepicker__input, .pkt-datepicker__input)) {
+  min-height: 2.625rem;
+  padding: 0.375rem 1rem;
+  letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+.pkt-input--small:not(:is(textarea, .pkt-timepicker__input, .pkt-datepicker__input)):not(select[multiple]) {
+  height: 2.625rem;
+}
+.pkt-input--xsmall:not(:is(textarea, .pkt-timepicker__input, .pkt-datepicker__input)) {
+  min-height: 2.25rem;
+  padding: 0.25rem 0.75rem;
+  letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 0.875rem;
+  line-height: 1.375rem;
+}
+.pkt-input--xsmall:not(:is(textarea, .pkt-timepicker__input, .pkt-datepicker__input)):not(select[multiple]) {
+  height: 2.25rem;
+}
+.pkt-input input.pkt-input, .pkt-textinput__input input.pkt-input, .pkt-input input.pkt-textinput__input, .pkt-textinput__input input.pkt-textinput__input,
+.pkt-input select.pkt-input,
+.pkt-textinput__input select.pkt-input,
+.pkt-input select.pkt-textinput__input,
+.pkt-textinput__input select.pkt-textinput__input {
+  display: block;
 }
 .pkt-input-compact.pkt-input, .pkt-input-compact.pkt-textinput__input {
   border: 0;
@@ -5920,7 +6943,7 @@ pkt-select {
   background-position: right 0 top 50%;
   padding-right: 2rem;
 }
-.pkt-input:not(textarea[cols]):not(input[size]):not(.pkt-input--fullwidth):not(.pkt-datepicker__input:not(.pkt-datepicker--multiple)), .pkt-textinput__input:not(textarea[cols]):not(input[size]):not(.pkt-input--fullwidth):not(.pkt-datepicker__input:not(.pkt-datepicker--multiple)), .pkt-input__container:not(:is(:has(.pkt-datepicker__input:not(.pkt-datepicker--multiple)))):not(:is(:has(textarea[cols]))):not(:is(:has(input[size]))):not(:is(:has(.pkt-input--fullwidth))):not(:is(:has(.pkt-timepicker__input))) {
+.pkt-input:not(:is(textarea)):not(input[size]):not(.pkt-input--fullwidth):not(.pkt-datepicker__input:not(.pkt-datepicker--multiple)), .pkt-textinput__input:not(:is(textarea)):not(input[size]):not(.pkt-input--fullwidth):not(.pkt-datepicker__input:not(.pkt-datepicker--multiple)), .pkt-input__container:not(:is(:has(.pkt-datepicker__input:not(.pkt-datepicker--multiple)))):not(:is(:has(textarea[cols]))):not(:is(:has(input[size]))):not(:is(:has(.pkt-input--fullwidth))):not(:is(:has(.pkt-timepicker__input))) {
   width: min(31rem, 100%);
 }
 .pkt-input__container:is(:has(.pkt-datepicker__input:not(.pkt-datepicker--multiple))):not(:is(:has(.pkt-input--fullwidth))) {
@@ -5932,8 +6955,8 @@ pkt-select {
 [fullwidth] .pkt-input__counter {
   width: 100%;
 }
-.pkt-input:is(textarea), .pkt-textinput__input:is(textarea) {
-  min-height: 8rem;
+.pkt-input:is(textarea:not([rows])), .pkt-textinput__input:is(textarea:not([rows])) {
+  min-height: 9.25rem;
 }
 .pkt-input:is(select), .pkt-textinput__input:is(select) {
   appearance: none;
@@ -5942,12 +6965,22 @@ pkt-select {
   padding-right: 3rem;
 }
 .pkt-input:is(select):not([multiple]), .pkt-textinput__input:is(select):not([multiple]) {
-  --svg: url(https://punkt-cdn.oslo.kommune.no/16.26/icons/chevron-thin-down.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/17.0/icons/chevron-thin-down.svg);
   background-image: var(--svg);
   background-repeat: no-repeat;
   background-position: right 0.7rem top 50%;
   background-size: 1.5rem auto, 100%;
 }
+.pkt-input:is(select):not([multiple]).pkt-input--small, .pkt-textinput__input:is(select):not([multiple]).pkt-input--small {
+  background-size: 1.25rem auto, 100%;
+  background-position: right 0.5rem top 50%;
+  padding: 0.375rem 2.5rem 0.375rem 1rem;
+}
+.pkt-input:is(select):not([multiple]).pkt-input--xsmall, .pkt-textinput__input:is(select):not([multiple]).pkt-input--xsmall {
+  background-size: 1.125rem auto, 100%;
+  background-position: right 0.5rem top 50%;
+  padding: 0.25rem 2.25rem 0.25rem 0.75rem;
+}
 .pkt-input:is(select) option, .pkt-textinput__input:is(select) option {
   background-color: var(--pkt-color-input-background-normal);
   color: var(--pkt-color-input-text-normal);
@@ -6038,6 +7071,89 @@ pkt-select {
 .pkt-input-separator {
   padding: 0.5rem 0;
 }
+.pkt-input__container--small {
+  align-items: stretch;
+}
+.pkt-input__container--small .pkt-input-prefix,
+.pkt-input__container--small .pkt-input-suffix,
+.pkt-input__container--small .pkt-input-icon {
+  height: auto;
+  min-height: 2.625rem;
+  letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+.pkt-input__container--small .pkt-input-prefix {
+  padding: 0.375rem 0 0.375rem 1rem;
+}
+.pkt-input__container--small .pkt-input-suffix {
+  padding: 0.375rem 1rem 0.375rem 0;
+}
+.pkt-input__container--small input.pkt-input, .pkt-input__container--small input.pkt-textinput__input,
+.pkt-input__container--small select.pkt-input,
+.pkt-input__container--small select.pkt-textinput__input {
+  height: auto;
+  min-height: 2.625rem;
+  flex: 1 1 auto;
+  min-width: 0;
+  padding: 0.375rem 1rem;
+  letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+.pkt-input__container--small .pkt-input-icon svg,
+.pkt-input__container--small .pkt-input-suffix svg {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+.pkt-input__container--small .pkt-input-suffix::before {
+  height: 1.25rem;
+}
+.pkt-input__container--xsmall {
+  align-items: stretch;
+}
+.pkt-input__container--xsmall .pkt-input-prefix,
+.pkt-input__container--xsmall .pkt-input-suffix,
+.pkt-input__container--xsmall .pkt-input-icon {
+  height: auto;
+  min-height: 2.25rem;
+  letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 0.875rem;
+  line-height: 1.375rem;
+}
+.pkt-input__container--xsmall .pkt-input-prefix {
+  padding: 0.25rem 0 0.25rem 0.75rem;
+}
+.pkt-input__container--xsmall .pkt-input-suffix {
+  padding: 0.25rem 0.75rem 0.25rem 0;
+}
+.pkt-input__container--xsmall input.pkt-input, .pkt-input__container--xsmall input.pkt-textinput__input,
+.pkt-input__container--xsmall select.pkt-input,
+.pkt-input__container--xsmall select.pkt-textinput__input {
+  height: auto;
+  min-height: 2.25rem;
+  flex: 1 1 auto;
+  min-width: 0;
+  padding: 0.25rem 0.75rem;
+  letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 0.875rem;
+  line-height: 1.375rem;
+}
+.pkt-input__container--xsmall .pkt-input-icon {
+  padding: 0.25rem 0.5rem;
+}
+.pkt-input__container--xsmall .pkt-input-icon svg,
+.pkt-input__container--xsmall .pkt-input-suffix svg {
+  width: 1.125rem;
+  height: 1.125rem;
+}
+.pkt-input__container--xsmall .pkt-input-suffix::before {
+  height: 1.125rem;
+}
 .pkt-input--counter-error, .pkt-input--counter-error:focus {
   border-color: var(--pkt-color-input-border-error);
   background-color: var(--pkt-color-surface-default-faded-red);
@@ -6141,6 +7257,48 @@ pkt-select {
     grid-template-columns: min-content auto 3rem;
   }
 }
+/*
+ * 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).
+ */
+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%;
+}
+textarea.pkt-input--small, textarea.pkt-input--xsmall {
+  padding: 0.5rem 1rem;
+}
+textarea.pkt-input--small {
+  letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+textarea.pkt-input--xsmall {
+  letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 0.875rem;
+  line-height: 1.375rem;
+}
+
 /* Component: pkt-timepicker */
 pkt-timepicker {
   display: block;
@@ -6152,11 +7310,28 @@ pkt-timepicker__anchor {
 }
 .pkt-timepicker .pkt-input__container,
 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;
 }
+.pkt-timepicker .pkt-input__container .pkt-timepicker__input,
+.pkt-timepicker .pkt-input__container .pkt-timepicker__separator,
+.pkt-timepicker .pkt-input__container .pkt-input-icon,
+.pkt-timepicker .pkt-input__container .pkt-timepicker__button,
+pkt-timepicker .pkt-input__container .pkt-timepicker__input,
+pkt-timepicker .pkt-input__container .pkt-timepicker__separator,
+pkt-timepicker .pkt-input__container .pkt-input-icon,
+pkt-timepicker .pkt-input__container .pkt-timepicker__button {
+  border: 0;
+  height: auto;
+  min-height: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  flex: 0 0 auto;
+}
 .pkt-timepicker .pkt-input__container .pkt-input,
 .pkt-timepicker .pkt-input__container .pkt-input-icon,
 .pkt-timepicker .pkt-input__container .pkt-input-separator,
@@ -6164,27 +7339,23 @@ pkt-timepicker .pkt-input__container .pkt-input,
 pkt-timepicker .pkt-input__container .pkt-input-icon,
 pkt-timepicker .pkt-input__container .pkt-input-separator {
   border: 0;
-  min-height: auto;
-}
-.pkt-timepicker .pkt-input__container:hover,
-pkt-timepicker .pkt-input__container:hover {
-  border-color: var(--pkt-color-input-border-active);
 }
-.pkt-timepicker .pkt-input__container:focus-within,
-pkt-timepicker .pkt-input__container:focus-within {
-  border-color: var(--pkt-color-input-border-active);
-  outline: 2px solid var(--pkt-color-input-border-active);
+.pkt-timepicker .pkt-input__container .pkt-timepicker__input,
+.pkt-timepicker .pkt-input__container .pkt-timepicker__separator,
+pkt-timepicker .pkt-input__container .pkt-timepicker__input,
+pkt-timepicker .pkt-input__container .pkt-timepicker__separator {
+  letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
 }
-.pkt-timepicker .pkt-input__container:has(input:disabled),
-pkt-timepicker .pkt-input__container:has(input:disabled) {
-  border-color: var(--pkt-color-input-border-disabled);
-  background-color: var(--pkt-color-surface-default-gray);
+.pkt-timepicker .pkt-input__container .pkt-timepicker__input,
+pkt-timepicker .pkt-input__container .pkt-timepicker__input {
+  padding-inline: 0;
 }
-.pkt-timepicker .pkt-input__container:has(input:disabled) .pkt-timepicker__icon,
-.pkt-timepicker .pkt-input__container:has(input:disabled) .pkt-timepicker__button,
-pkt-timepicker .pkt-input__container:has(input:disabled) .pkt-timepicker__icon,
-pkt-timepicker .pkt-input__container:has(input:disabled) .pkt-timepicker__button {
-  --fg-color: var(--pkt-color-input-text-disabled);
+.pkt-timepicker .pkt-input__container .pkt-timepicker__separator,
+pkt-timepicker .pkt-input__container .pkt-timepicker__separator {
+  padding: 0;
 }
 .pkt-timepicker .pkt-input__container button.pkt-timepicker__button,
 pkt-timepicker .pkt-input__container button.pkt-timepicker__button {
@@ -6193,8 +7364,10 @@ pkt-timepicker .pkt-input__container button.pkt-timepicker__button {
 }
 .pkt-timepicker .pkt-input__container button.pkt-timepicker__button pkt-icon,
 .pkt-timepicker .pkt-input__container button.pkt-timepicker__button .pkt-icon,
+.pkt-timepicker .pkt-input__container button.pkt-timepicker__button svg,
 pkt-timepicker .pkt-input__container button.pkt-timepicker__button pkt-icon,
-pkt-timepicker .pkt-input__container button.pkt-timepicker__button .pkt-icon {
+pkt-timepicker .pkt-input__container button.pkt-timepicker__button .pkt-icon,
+pkt-timepicker .pkt-input__container button.pkt-timepicker__button svg {
   width: 1.5rem;
   height: 1.5rem;
 }
@@ -6215,6 +7388,105 @@ pkt-timepicker .pkt-input__container button.pkt-timepicker__button.pkt-timepicke
 pkt-timepicker .pkt-input__container button.pkt-timepicker__button.pkt-timepicker__button--next {
   margin-left: 0.25rem;
 }
+.pkt-timepicker .pkt-input__container .pkt-timepicker__icon,
+pkt-timepicker .pkt-input__container .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;
+}
+.pkt-timepicker .pkt-input__container .pkt-timepicker__icon > svg,
+.pkt-timepicker .pkt-input__container .pkt-timepicker__icon svg,
+pkt-timepicker .pkt-input__container .pkt-timepicker__icon > svg,
+pkt-timepicker .pkt-input__container .pkt-timepicker__icon svg {
+  width: 100%;
+  height: 100%;
+}
+.pkt-timepicker .pkt-input__container:hover,
+pkt-timepicker .pkt-input__container:hover {
+  border-color: var(--pkt-color-input-border-active);
+}
+.pkt-timepicker .pkt-input__container:focus-within,
+pkt-timepicker .pkt-input__container:focus-within {
+  border-color: var(--pkt-color-input-border-active);
+  outline: 2px solid var(--pkt-color-input-border-active);
+}
+.pkt-timepicker .pkt-input__container:has(input:disabled),
+pkt-timepicker .pkt-input__container:has(input:disabled) {
+  border-color: var(--pkt-color-input-border-disabled);
+  background-color: var(--pkt-color-surface-default-gray);
+}
+.pkt-timepicker .pkt-input__container:has(input:disabled) .pkt-timepicker__icon,
+.pkt-timepicker .pkt-input__container:has(input:disabled) .pkt-timepicker__button,
+pkt-timepicker .pkt-input__container:has(input:disabled) .pkt-timepicker__icon,
+pkt-timepicker .pkt-input__container:has(input:disabled) .pkt-timepicker__button {
+  --fg-color: var(--pkt-color-input-text-disabled);
+}
+.pkt-timepicker--small .pkt-input__container,
+pkt-timepicker--small .pkt-input__container {
+  min-height: 2.625rem;
+}
+.pkt-timepicker--small .pkt-input__container .pkt-timepicker__input,
+.pkt-timepicker--small .pkt-input__container .pkt-timepicker__separator,
+pkt-timepicker--small .pkt-input__container .pkt-timepicker__input,
+pkt-timepicker--small .pkt-input__container .pkt-timepicker__separator {
+  letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+.pkt-timepicker--small .pkt-input__container button.pkt-timepicker__button,
+pkt-timepicker--small .pkt-input__container button.pkt-timepicker__button {
+  padding: 0 0.5rem;
+}
+.pkt-timepicker--small .pkt-input__container button.pkt-timepicker__button pkt-icon,
+.pkt-timepicker--small .pkt-input__container button.pkt-timepicker__button .pkt-icon,
+.pkt-timepicker--small .pkt-input__container button.pkt-timepicker__button svg,
+pkt-timepicker--small .pkt-input__container button.pkt-timepicker__button pkt-icon,
+pkt-timepicker--small .pkt-input__container button.pkt-timepicker__button .pkt-icon,
+pkt-timepicker--small .pkt-input__container button.pkt-timepicker__button svg {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+.pkt-timepicker--small .pkt-input__container .pkt-timepicker__icon,
+pkt-timepicker--small .pkt-input__container .pkt-timepicker__icon {
+  padding: 0 0.5rem 0 0;
+  height: 1.25rem;
+}
+.pkt-timepicker--xsmall .pkt-input__container,
+pkt-timepicker--xsmall .pkt-input__container {
+  min-height: 2.25rem;
+}
+.pkt-timepicker--xsmall .pkt-input__container .pkt-timepicker__input,
+.pkt-timepicker--xsmall .pkt-input__container .pkt-timepicker__separator,
+pkt-timepicker--xsmall .pkt-input__container .pkt-timepicker__input,
+pkt-timepicker--xsmall .pkt-input__container .pkt-timepicker__separator {
+  letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 0.875rem;
+  line-height: 1.375rem;
+}
+.pkt-timepicker--xsmall .pkt-input__container button.pkt-timepicker__button,
+pkt-timepicker--xsmall .pkt-input__container button.pkt-timepicker__button {
+  padding: 0 0.5rem;
+}
+.pkt-timepicker--xsmall .pkt-input__container button.pkt-timepicker__button pkt-icon,
+.pkt-timepicker--xsmall .pkt-input__container button.pkt-timepicker__button .pkt-icon,
+.pkt-timepicker--xsmall .pkt-input__container button.pkt-timepicker__button svg,
+pkt-timepicker--xsmall .pkt-input__container button.pkt-timepicker__button pkt-icon,
+pkt-timepicker--xsmall .pkt-input__container button.pkt-timepicker__button .pkt-icon,
+pkt-timepicker--xsmall .pkt-input__container button.pkt-timepicker__button svg {
+  width: 1.125rem;
+  height: 1.125rem;
+}
+.pkt-timepicker--xsmall .pkt-input__container .pkt-timepicker__icon,
+pkt-timepicker--xsmall .pkt-input__container .pkt-timepicker__icon {
+  padding: 0 0.5rem 0 0;
+  height: 1.125rem;
+}
 .pkt-timepicker--stepper .pkt-input__container,
 pkt-timepicker--stepper .pkt-input__container {
   padding-left: 0;
@@ -6280,7 +7552,6 @@ pkt-timepicker .pkt-input__container.pkt-timepicker--disabled .pkt-timepicker__i
 pkt-timepicker__input {
   width: 1.5rem;
   text-align: center;
-  padding: 0.5rem 0;
 }
 .pkt-timepicker__input::-webkit-inner-spin-button, .pkt-timepicker__input::-webkit-outer-spin-button,
 pkt-timepicker__input::-webkit-inner-spin-button,
@@ -6295,26 +7566,8 @@ pkt-timepicker__input {
 }
 .pkt-timepicker__separator,
 pkt-timepicker__separator {
-  letter-spacing: -0.2px;
-  font-weight: 400;
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-  padding: 0.25rem 0 0.5rem;
   user-select: none;
 }
-.pkt-timepicker__icon,
-pkt-timepicker__icon {
-  height: auto;
-  padding: 0 0.75rem 0 0;
-  pointer-events: none;
-}
-.pkt-timepicker__icon pkt-icon,
-.pkt-timepicker__icon .pkt-icon,
-pkt-timepicker__icon pkt-icon,
-pkt-timepicker__icon .pkt-icon {
-  width: 1.5rem;
-  height: 1.5rem;
-}
 .pkt-timepicker-popup,
 pkt-timepicker-popup {
   position: absolute;