@oslokommune/punkt-css 13.2.3 → 13.3.1

package/dist/css/pkt.css

@@ -39,7 +39,7 @@ pre,
 code,
 kbd,
 samp {
-  font-family: monospace, monospace; /* 1 */
+  font-family: Menlo, Consolas, monospace;
   font-size: 1em; /* 2 */
 }
 
@@ -1542,7 +1542,7 @@ input[type=search]::-webkit-search-decoration {
   --pkt-color-text-action-normal: var(--pkt-color-brand-neutrals-white);
 }
 
-/* 
+/*
  * Defaults for elementer
  *
  */
@@ -1578,7 +1578,7 @@ body {
   -moz-osx-font-smoothing: grayscale;
   min-height: 100vh;
   overflow-y: auto;
-  line-height: 1.5;
+  line-height: 1.75;
   text-rendering: optimizeSpeed;
   scroll-behavior: smooth;
 }
@@ -13854,264 +13854,264 @@ body {
     row-gap: 6.25rem;
   }
 }
-.pkt-grid > .pkt-cell--left {
+.pkt-grid > .pkt-cell--left, .pkt-grid > * > .pkt-cell--left {
   justify-self: start;
 }
-.pkt-grid > .pkt-cell--center {
+.pkt-grid > .pkt-cell--center, .pkt-grid > * > .pkt-cell--center {
   justify-self: center;
 }
-.pkt-grid > .pkt-cell--right {
+.pkt-grid > .pkt-cell--right, .pkt-grid > * > .pkt-cell--right {
   justify-self: end;
 }
-.pkt-grid > .pkt-cell--top {
+.pkt-grid > .pkt-cell--top, .pkt-grid > * > .pkt-cell--top {
   align-self: self-start;
 }
-.pkt-grid > .pkt-cell--center-vertical {
+.pkt-grid > .pkt-cell--center-vertical, .pkt-grid > * > .pkt-cell--center-vertical {
   align-self: center;
 }
-.pkt-grid > .pkt-cell--bottom {
+.pkt-grid > .pkt-cell--bottom, .pkt-grid > * > .pkt-cell--bottom {
   align-self: self-end;
 }
-.pkt-grid > .pkt-cell.pkt-cell--span2 {
+.pkt-grid > .pkt-cell.pkt-cell--span2, .pkt-grid > * > .pkt-cell.pkt-cell--span2 {
   grid-column-end: span 2;
 }
-.pkt-grid > .pkt-cell.pkt-cell--span3 {
+.pkt-grid > .pkt-cell.pkt-cell--span3, .pkt-grid > * > .pkt-cell.pkt-cell--span3 {
   grid-column-end: span 3;
 }
-.pkt-grid > .pkt-cell.pkt-cell--span4 {
+.pkt-grid > .pkt-cell.pkt-cell--span4, .pkt-grid > * > .pkt-cell.pkt-cell--span4 {
   grid-column-end: span 4;
 }
-.pkt-grid > .pkt-cell.pkt-cell--span5 {
+.pkt-grid > .pkt-cell.pkt-cell--span5, .pkt-grid > * > .pkt-cell.pkt-cell--span5 {
   grid-column-end: span 5;
 }
-.pkt-grid > .pkt-cell.pkt-cell--span6 {
+.pkt-grid > .pkt-cell.pkt-cell--span6, .pkt-grid > * > .pkt-cell.pkt-cell--span6 {
   grid-column-end: span 6;
 }
-.pkt-grid > .pkt-cell.pkt-cell--span7 {
+.pkt-grid > .pkt-cell.pkt-cell--span7, .pkt-grid > * > .pkt-cell.pkt-cell--span7 {
   grid-column-end: span 7;
 }
-.pkt-grid > .pkt-cell.pkt-cell--span8 {
+.pkt-grid > .pkt-cell.pkt-cell--span8, .pkt-grid > * > .pkt-cell.pkt-cell--span8 {
   grid-column-end: span 8;
 }
-.pkt-grid > .pkt-cell.pkt-cell--span9 {
+.pkt-grid > .pkt-cell.pkt-cell--span9, .pkt-grid > * > .pkt-cell.pkt-cell--span9 {
   grid-column-end: span 9;
 }
-.pkt-grid > .pkt-cell.pkt-cell--span10 {
+.pkt-grid > .pkt-cell.pkt-cell--span10, .pkt-grid > * > .pkt-cell.pkt-cell--span10 {
   grid-column-end: span 10;
 }
-.pkt-grid > .pkt-cell.pkt-cell--span11 {
+.pkt-grid > .pkt-cell.pkt-cell--span11, .pkt-grid > * > .pkt-cell.pkt-cell--span11 {
   grid-column-end: span 11;
 }
-.pkt-grid > .pkt-cell.pkt-cell--span12 {
+.pkt-grid > .pkt-cell.pkt-cell--span12, .pkt-grid > * > .pkt-cell.pkt-cell--span12 {
   grid-column-end: span 12;
 }
 @media screen and (min-width: 0) {
-  .pkt-grid > .pkt-cell.pkt-cell--span2-mobile-up {
+  .pkt-grid > .pkt-cell.pkt-cell--span2-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--span2-mobile-up {
     grid-column-end: span 2;
   }
-  .pkt-grid > .pkt-cell.pkt-cell--span3-mobile-up {
+  .pkt-grid > .pkt-cell.pkt-cell--span3-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--span3-mobile-up {
     grid-column-end: span 3;
   }
-  .pkt-grid > .pkt-cell.pkt-cell--span4-mobile-up {
+  .pkt-grid > .pkt-cell.pkt-cell--span4-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--span4-mobile-up {
     grid-column-end: span 4;
   }
-  .pkt-grid > .pkt-cell.pkt-cell--span5-mobile-up {
+  .pkt-grid > .pkt-cell.pkt-cell--span5-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--span5-mobile-up {
     grid-column-end: span 5;
   }
-  .pkt-grid > .pkt-cell.pkt-cell--span6-mobile-up {
+  .pkt-grid > .pkt-cell.pkt-cell--span6-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--span6-mobile-up {
     grid-column-end: span 6;
   }
-  .pkt-grid > .pkt-cell.pkt-cell--span7-mobile-up {
+  .pkt-grid > .pkt-cell.pkt-cell--span7-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--span7-mobile-up {
     grid-column-end: span 7;
   }
-  .pkt-grid > .pkt-cell.pkt-cell--span8-mobile-up {
+  .pkt-grid > .pkt-cell.pkt-cell--span8-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--span8-mobile-up {
     grid-column-end: span 8;
   }
-  .pkt-grid > .pkt-cell.pkt-cell--span9-mobile-up {
+  .pkt-grid > .pkt-cell.pkt-cell--span9-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--span9-mobile-up {
     grid-column-end: span 9;
   }
-  .pkt-grid > .pkt-cell.pkt-cell--span10-mobile-up {
+  .pkt-grid > .pkt-cell.pkt-cell--span10-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--span10-mobile-up {
     grid-column-end: span 10;
   }
-  .pkt-grid > .pkt-cell.pkt-cell--span11-mobile-up {
+  .pkt-grid > .pkt-cell.pkt-cell--span11-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--span11-mobile-up {
     grid-column-end: span 11;
   }
-  .pkt-grid > .pkt-cell.pkt-cell--span12-mobile-up {
+  .pkt-grid > .pkt-cell.pkt-cell--span12-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--span12-mobile-up {
     grid-column-end: span 12;
   }
 }
 @media screen and (min-width: 36rem) {
-  .pkt-grid > .pkt-cell.pkt-cell--span2-phablet-up {
+  .pkt-grid > .pkt-cell.pkt-cell--span2-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--span2-phablet-up {
     grid-column-end: span 2;
   }
-  .pkt-grid > .pkt-cell.pkt-cell--span3-phablet-up {
+  .pkt-grid > .pkt-cell.pkt-cell--span3-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--span3-phablet-up {
     grid-column-end: span 3;
   }
-  .pkt-grid > .pkt-cell.pkt-cell--span4-phablet-up {
+  .pkt-grid > .pkt-cell.pkt-cell--span4-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--span4-phablet-up {
     grid-column-end: span 4;
   }
-  .pkt-grid > .pkt-cell.pkt-cell--span5-phablet-up {
+  .pkt-grid > .pkt-cell.pkt-cell--span5-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--span5-phablet-up {
     grid-column-end: span 5;
   }
-  .pkt-grid > .pkt-cell.pkt-cell--span6-phablet-up {
+  .pkt-grid > .pkt-cell.pkt-cell--span6-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--span6-phablet-up {
     grid-column-end: span 6;
   }
-  .pkt-grid > .pkt-cell.pkt-cell--span7-phablet-up {
+  .pkt-grid > .pkt-cell.pkt-cell--span7-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--span7-phablet-up {
     grid-column-end: span 7;
   }
-  .pkt-grid > .pkt-cell.pkt-cell--span8-phablet-up {
+  .pkt-grid > .pkt-cell.pkt-cell--span8-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--span8-phablet-up {
     grid-column-end: span 8;
   }
-  .pkt-grid > .pkt-cell.pkt-cell--span9-phablet-up {
+  .pkt-grid > .pkt-cell.pkt-cell--span9-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--span9-phablet-up {
     grid-column-end: span 9;
   }
-  .pkt-grid > .pkt-cell.pkt-cell--span10-phablet-up {
+  .pkt-grid > .pkt-cell.pkt-cell--span10-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--span10-phablet-up {
     grid-column-end: span 10;
   }
-  .pkt-grid > .pkt-cell.pkt-cell--span11-phablet-up {
+  .pkt-grid > .pkt-cell.pkt-cell--span11-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--span11-phablet-up {
     grid-column-end: span 11;
   }
-  .pkt-grid > .pkt-cell.pkt-cell--span12-phablet-up {
+  .pkt-grid > .pkt-cell.pkt-cell--span12-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--span12-phablet-up {
     grid-column-end: span 12;
   }
 }
 @media screen and (min-width: 48rem) {
-  .pkt-grid > .pkt-cell.pkt-cell--span2-tablet-up {
+  .pkt-grid > .pkt-cell.pkt-cell--span2-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--span2-tablet-up {
     grid-column-end: span 2;
   }
-  .pkt-grid > .pkt-cell.pkt-cell--span3-tablet-up {
+  .pkt-grid > .pkt-cell.pkt-cell--span3-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--span3-tablet-up {
     grid-column-end: span 3;
   }
-  .pkt-grid > .pkt-cell.pkt-cell--span4-tablet-up {
+  .pkt-grid > .pkt-cell.pkt-cell--span4-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--span4-tablet-up {
     grid-column-end: span 4;
   }
-  .pkt-grid > .pkt-cell.pkt-cell--span5-tablet-up {
+  .pkt-grid > .pkt-cell.pkt-cell--span5-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--span5-tablet-up {
     grid-column-end: span 5;
   }
-  .pkt-grid > .pkt-cell.pkt-cell--span6-tablet-up {
+  .pkt-grid > .pkt-cell.pkt-cell--span6-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--span6-tablet-up {
     grid-column-end: span 6;
   }
-  .pkt-grid > .pkt-cell.pkt-cell--span7-tablet-up {
+  .pkt-grid > .pkt-cell.pkt-cell--span7-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--span7-tablet-up {
     grid-column-end: span 7;
   }
-  .pkt-grid > .pkt-cell.pkt-cell--span8-tablet-up {
+  .pkt-grid > .pkt-cell.pkt-cell--span8-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--span8-tablet-up {
     grid-column-end: span 8;
   }
-  .pkt-grid > .pkt-cell.pkt-cell--span9-tablet-up {
+  .pkt-grid > .pkt-cell.pkt-cell--span9-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--span9-tablet-up {
     grid-column-end: span 9;
   }
-  .pkt-grid > .pkt-cell.pkt-cell--span10-tablet-up {
+  .pkt-grid > .pkt-cell.pkt-cell--span10-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--span10-tablet-up {
     grid-column-end: span 10;
   }
-  .pkt-grid > .pkt-cell.pkt-cell--span11-tablet-up {
+  .pkt-grid > .pkt-cell.pkt-cell--span11-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--span11-tablet-up {
     grid-column-end: span 11;
   }
-  .pkt-grid > .pkt-cell.pkt-cell--span12-tablet-up {
+  .pkt-grid > .pkt-cell.pkt-cell--span12-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--span12-tablet-up {
     grid-column-end: span 12;
   }
 }
 @media screen and (min-width: 64rem) {
-  .pkt-grid > .pkt-cell.pkt-cell--span2-tablet-big-up {
+  .pkt-grid > .pkt-cell.pkt-cell--span2-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--span2-tablet-big-up {
     grid-column-end: span 2;
   }
-  .pkt-grid > .pkt-cell.pkt-cell--span3-tablet-big-up {
+  .pkt-grid > .pkt-cell.pkt-cell--span3-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--span3-tablet-big-up {
     grid-column-end: span 3;
   }
-  .pkt-grid > .pkt-cell.pkt-cell--span4-tablet-big-up {
+  .pkt-grid > .pkt-cell.pkt-cell--span4-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--span4-tablet-big-up {
     grid-column-end: span 4;
   }
-  .pkt-grid > .pkt-cell.pkt-cell--span5-tablet-big-up {
+  .pkt-grid > .pkt-cell.pkt-cell--span5-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--span5-tablet-big-up {
     grid-column-end: span 5;
   }
-  .pkt-grid > .pkt-cell.pkt-cell--span6-tablet-big-up {
+  .pkt-grid > .pkt-cell.pkt-cell--span6-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--span6-tablet-big-up {
     grid-column-end: span 6;
   }
-  .pkt-grid > .pkt-cell.pkt-cell--span7-tablet-big-up {
+  .pkt-grid > .pkt-cell.pkt-cell--span7-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--span7-tablet-big-up {
     grid-column-end: span 7;
   }
-  .pkt-grid > .pkt-cell.pkt-cell--span8-tablet-big-up {
+  .pkt-grid > .pkt-cell.pkt-cell--span8-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--span8-tablet-big-up {
     grid-column-end: span 8;
   }
-  .pkt-grid > .pkt-cell.pkt-cell--span9-tablet-big-up {
+  .pkt-grid > .pkt-cell.pkt-cell--span9-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--span9-tablet-big-up {
     grid-column-end: span 9;
   }
-  .pkt-grid > .pkt-cell.pkt-cell--span10-tablet-big-up {
+  .pkt-grid > .pkt-cell.pkt-cell--span10-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--span10-tablet-big-up {
     grid-column-end: span 10;
   }
-  .pkt-grid > .pkt-cell.pkt-cell--span11-tablet-big-up {
+  .pkt-grid > .pkt-cell.pkt-cell--span11-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--span11-tablet-big-up {
     grid-column-end: span 11;
   }
-  .pkt-grid > .pkt-cell.pkt-cell--span12-tablet-big-up {
+  .pkt-grid > .pkt-cell.pkt-cell--span12-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--span12-tablet-big-up {
     grid-column-end: span 12;
   }
 }
 @media screen and (min-width: 80rem) {
-  .pkt-grid > .pkt-cell.pkt-cell--span2-laptop-up {
+  .pkt-grid > .pkt-cell.pkt-cell--span2-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--span2-laptop-up {
     grid-column-end: span 2;
   }
-  .pkt-grid > .pkt-cell.pkt-cell--span3-laptop-up {
+  .pkt-grid > .pkt-cell.pkt-cell--span3-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--span3-laptop-up {
     grid-column-end: span 3;
   }
-  .pkt-grid > .pkt-cell.pkt-cell--span4-laptop-up {
+  .pkt-grid > .pkt-cell.pkt-cell--span4-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--span4-laptop-up {
     grid-column-end: span 4;
   }
-  .pkt-grid > .pkt-cell.pkt-cell--span5-laptop-up {
+  .pkt-grid > .pkt-cell.pkt-cell--span5-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--span5-laptop-up {
     grid-column-end: span 5;
   }
-  .pkt-grid > .pkt-cell.pkt-cell--span6-laptop-up {
+  .pkt-grid > .pkt-cell.pkt-cell--span6-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--span6-laptop-up {
     grid-column-end: span 6;
   }
-  .pkt-grid > .pkt-cell.pkt-cell--span7-laptop-up {
+  .pkt-grid > .pkt-cell.pkt-cell--span7-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--span7-laptop-up {
     grid-column-end: span 7;
   }
-  .pkt-grid > .pkt-cell.pkt-cell--span8-laptop-up {
+  .pkt-grid > .pkt-cell.pkt-cell--span8-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--span8-laptop-up {
     grid-column-end: span 8;
   }
-  .pkt-grid > .pkt-cell.pkt-cell--span9-laptop-up {
+  .pkt-grid > .pkt-cell.pkt-cell--span9-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--span9-laptop-up {
     grid-column-end: span 9;
   }
-  .pkt-grid > .pkt-cell.pkt-cell--span10-laptop-up {
+  .pkt-grid > .pkt-cell.pkt-cell--span10-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--span10-laptop-up {
     grid-column-end: span 10;
   }
-  .pkt-grid > .pkt-cell.pkt-cell--span11-laptop-up {
+  .pkt-grid > .pkt-cell.pkt-cell--span11-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--span11-laptop-up {
     grid-column-end: span 11;
   }
-  .pkt-grid > .pkt-cell.pkt-cell--span12-laptop-up {
+  .pkt-grid > .pkt-cell.pkt-cell--span12-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--span12-laptop-up {
     grid-column-end: span 12;
   }
 }
 @media screen and (min-width: 100rem) {
-  .pkt-grid > .pkt-cell.pkt-cell--span2-desktop-up {
+  .pkt-grid > .pkt-cell.pkt-cell--span2-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--span2-desktop-up {
     grid-column-end: span 2;
   }
-  .pkt-grid > .pkt-cell.pkt-cell--span3-desktop-up {
+  .pkt-grid > .pkt-cell.pkt-cell--span3-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--span3-desktop-up {
     grid-column-end: span 3;
   }
-  .pkt-grid > .pkt-cell.pkt-cell--span4-desktop-up {
+  .pkt-grid > .pkt-cell.pkt-cell--span4-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--span4-desktop-up {
     grid-column-end: span 4;
   }
-  .pkt-grid > .pkt-cell.pkt-cell--span5-desktop-up {
+  .pkt-grid > .pkt-cell.pkt-cell--span5-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--span5-desktop-up {
     grid-column-end: span 5;
   }
-  .pkt-grid > .pkt-cell.pkt-cell--span6-desktop-up {
+  .pkt-grid > .pkt-cell.pkt-cell--span6-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--span6-desktop-up {
     grid-column-end: span 6;
   }
-  .pkt-grid > .pkt-cell.pkt-cell--span7-desktop-up {
+  .pkt-grid > .pkt-cell.pkt-cell--span7-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--span7-desktop-up {
     grid-column-end: span 7;
   }
-  .pkt-grid > .pkt-cell.pkt-cell--span8-desktop-up {
+  .pkt-grid > .pkt-cell.pkt-cell--span8-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--span8-desktop-up {
     grid-column-end: span 8;
   }
-  .pkt-grid > .pkt-cell.pkt-cell--span9-desktop-up {
+  .pkt-grid > .pkt-cell.pkt-cell--span9-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--span9-desktop-up {
     grid-column-end: span 9;
   }
-  .pkt-grid > .pkt-cell.pkt-cell--span10-desktop-up {
+  .pkt-grid > .pkt-cell.pkt-cell--span10-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--span10-desktop-up {
     grid-column-end: span 10;
   }
-  .pkt-grid > .pkt-cell.pkt-cell--span11-desktop-up {
+  .pkt-grid > .pkt-cell.pkt-cell--span11-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--span11-desktop-up {
     grid-column-end: span 11;
   }
-  .pkt-grid > .pkt-cell.pkt-cell--span12-desktop-up {
+  .pkt-grid > .pkt-cell.pkt-cell--span12-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--span12-desktop-up {
     grid-column-end: span 12;
   }
 }
@@ -14123,12 +14123,16 @@ body {
  * 
  */
 body {
-  color: var(--pkt-color-text-body-default);
   font-family: 'Oslo Sans', arial, sans-serif;
   font-size: 1rem;
   font-weight: 300;
   letter-spacing: normal;
-  line-height: 1.5rem;
+  line-height: 1.75rem;
+}
+
+body,
+[data-mode=dark] {
+  color: var(--pkt-color-text-body-default);
 }
 
 em {
@@ -14192,7 +14196,7 @@ a:active, a.pkt-link--active,
 }
 
 .pkt-link__icon {
-  --fg-color: currentColor;
+  --fg-color: var(--pkt-color-text-action-normal);
   width: 1.5rem;
   height: 1.5rem;
   flex-shrink: 0;
@@ -14214,7 +14218,7 @@ a:active, a.pkt-link--active,
 .pkt-link--external::after {
   display: inline-block;
   content: " ";
-  --svg: url(https://punkt-cdn.oslo.kommune.no/13.2/icons/new-window-small.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/13.3/icons/new-window-small.svg);
   background-image: var(--svg);
   background-repeat: no-repeat;
   background-size: 18px 18px;
@@ -18230,7 +18234,7 @@ div.pkt-btn:not([data-disabled]):active, .pkt-btn:enabled:active, .pkt-btn:activ
   outline-color: var(--pkt-color-input-border-hover);
 }
 .pkt-input-check__input-checkbox:checked[type=checkbox] {
-  --svg: url(https://punkt-cdn.oslo.kommune.no/13.2/icons/check-medium.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/13.3/icons/check-medium.svg);
   position: relative;
   background-color: var(--pkt-color-input-border-normal);
 }
@@ -18288,7 +18292,7 @@ div.pkt-btn:not([data-disabled]):active, .pkt-btn:enabled:active, .pkt-btn:activ
   cursor: not-allowed;
 }
 .pkt-input-check__input-checkbox:disabled[type=checkbox][role=switch]:checked:after {
-  --svg: url(https://punkt-cdn.oslo.kommune.no/13.2/icons/check-medium.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/13.3/icons/check-medium.svg);
   --pkt-color-input-check-border: var(--pkt-color-input-border-normal);
   filter: grayscale(100%) brightness(400%);
 }
@@ -18541,7 +18545,7 @@ pkt-select {
 }
 .pkt-input:is(select):not([multiple]), .pkt-textinput__input:is(select):not([multiple]), .pkt-select select:is(select):not([multiple]),
 .pkt-select:is(select):not([multiple]) {
-  --svg: url(https://punkt-cdn.oslo.kommune.no/13.2/icons/chevron-thin-down.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/13.3/icons/chevron-thin-down.svg);
   background-image: var(--svg);
   background-repeat: no-repeat;
   background-position: right 0.7rem top 50%;
@@ -19081,7 +19085,8 @@ pkt-select {
   border-collapse: collapse;
 }
 .pkt-table__header,
-.pkt-table thead {
+.pkt-table thead,
+.pkt-table thead.pkt-table__header th {
   text-align: left;
   vertical-align: top;
   font-size: 1.125rem;
@@ -19191,6 +19196,11 @@ pkt-accordion-item {
   display: block;
 }
 
+pkt-accordion,
+pkt-accordion-item {
+  display: block;
+}
+
 .pkt-accordion,
 pkt-accordion::part(container) {
   display: grid;
@@ -19206,7 +19216,9 @@ pkt-accordion::part(container):focus-visible {
 
 .pkt-accordion--borderless .pkt-accordion-item,
 pkt-accordion[skin=borderless] .pkt-accordion-item {
+  color: var(--pkt-color-text-body-default);
   border: none;
+  background-color: var(--pkt-color-background-default);
 }
 .pkt-accordion--borderless .pkt-accordion-item[open] .pkt-accordion-item__title,
 pkt-accordion[skin=borderless] .pkt-accordion-item[open] .pkt-accordion-item__title {
@@ -19215,7 +19227,9 @@ pkt-accordion[skin=borderless] .pkt-accordion-item[open] .pkt-accordion-item__ti
 
 .pkt-accordion--outlined .pkt-accordion-item,
 pkt-accordion[skin=outlined] .pkt-accordion-item {
+  color: var(--pkt-color-text-body-default);
   border: 2px solid var(--pkt-color-border-subtle);
+  background-color: var(--pkt-color-background-default);
 }
 
 pkt-accordion[skin=beige]::part(container),
@@ -20721,19 +20735,19 @@ pkt-heading {
 }
 .pkt-heading--medium {
   letter-spacing: -0.2px;
-  font-weight: 400;
+  font-weight: 500;
   font-size: 1.875rem;
   line-height: 2.75rem;
 }
 .pkt-heading--small {
   letter-spacing: -0.2px;
-  font-weight: 400;
+  font-weight: 500;
   font-size: 1.5rem;
   line-height: 2.25rem;
 }
 .pkt-heading--xsmall {
   letter-spacing: -0.2px;
-  font-weight: 400;
+  font-weight: 500;
   font-size: 1.375rem;
   line-height: 2.125rem;
 }
@@ -21275,6 +21289,7 @@ pkt-listbox {
  * Loader component
  */
 .pkt-loader {
+  color: currentColor;
   width: fit-content;
   text-align: center;
 }
@@ -21798,25 +21813,61 @@ pkt-messagebox {
 .pkt-preview .pkt-tabs {
   --pkt-tabs-bg: var(--pkt-color-surface-default-gray);
 }
-.pkt-preview__mode {
-  position: absolute;
-  top: 1rem;
-  right: 1rem;
-}
 .pkt-preview__component {
+  position: relative;
   display: flex;
   justify-content: space-around;
   align-items: center;
   min-height: 10rem;
   padding: 3rem 1rem;
-  margin: 1rem 0 0;
-  border: 0.25rem solid var(--pkt-color-surface-default-gray);
+  margin: 0;
   background-color: var(--pkt-color-background-default);
   transition: background-color 0.2s linear;
 }
 .pkt-preview__component--fullwidth > div {
   width: 100%;
 }
+.pkt-preview__component-container {
+  border: 2px solid var(--pkt-color-border-gray);
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+@media screen and (min-width: 64rem) {
+  .pkt-preview__component-container {
+    flex-direction: row;
+  }
+  .pkt-preview__component-container .pkt-preview__component {
+    flex: 1 1 0;
+    min-width: 0;
+  }
+  .pkt-preview__component-container .pkt-preview__panel {
+    flex: 0 0 auto;
+    min-width: 20rem;
+    max-width: 25rem;
+    width: 100%;
+  }
+}
+.pkt-preview__panel {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 2rem 1.5rem;
+  justify-content: space-between;
+  align-items: stretch;
+  background-color: var(--pkt-color-surface-default-gray);
+}
+.pkt-preview__panel__options {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+.pkt-preview__options {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
 .pkt-preview__opts {
   padding: 1rem;
   background-color: var(--pkt-color-surface-default-gray);
@@ -21831,14 +21882,53 @@ pkt-messagebox {
   right: 0;
   padding: 0 0.25rem 0;
 }
+.pkt-preview .hide-code-button {
+  position: absolute;
+  top: 100%;
+  margin-top: -1.5rem;
+  left: 0;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  padding-bottom: 1rem;
+  z-index: 2;
+}
 .pkt-preview__code {
+  color: var(--pkt-color-text-body-default);
   position: relative;
-  margin-bottom: 1rem;
-  font-size: 0.8rem;
 }
-.pkt-preview__code > pre {
+.pkt-preview__code-container {
+  position: relative;
+  padding: 2rem 2rem 0;
+  background-color: var(--pkt-color-grays-gray-800);
+  transition: max-height 0.5s ease;
+  max-height: 50rem;
+}
+.pkt-preview__code-container .pkt-tabs {
+  --pkt-tabs-bg: var(--pkt-color-grays-gray-800);
+}
+.pkt-preview__code-container.hide-code {
+  overflow: hidden;
+  max-height: 11.7rem;
+}
+.pkt-preview__code-container.hide-code:after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: linear-gradient(180deg, transparent 0%, transparent 93%, var(--pkt-color-grays-gray-800) 100%);
+}
+.pkt-preview__code pre {
+  max-height: 30rem;
+  overflow: auto;
   margin-top: 0 !important;
-  background-color: var(--pkt-color-surface-default-gray) !important;
+  background-color: transparent !important;
+  font-size: 1rem;
+  padding: 2rem 0;
 }
 .pkt-preview__copy {
   position: absolute;
@@ -21848,15 +21938,24 @@ pkt-messagebox {
   gap: 0.5rem;
   align-items: center;
 }
-.pkt-preview__specs {
-  background-color: var(--pkt-color-surface-default-gray);
+.pkt-preview__array-item, .pkt-preview__object-editor {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.pkt-preview__add-object {
+  text-align: right;
+  margin-top: 0.5rem;
+}
+.pkt-preview__remove-object {
+  position: absolute;
+  top: -2rem;
+  right: -0.25rem;
 }
 .pkt-preview__specs pre {
   margin-top: 0 !important;
 }
-.pkt-preview__specs h2 {
-  padding: 1rem;
-}
 
 .astro-code.github-light {
   background-color: var(--pkt-color-surface-default-gray) !important;
@@ -22269,7 +22368,7 @@ pkt-messagebox {
 .pkt-tabs__link:focus:not(:active), .pkt-tabs__link:focus-visible:not(:active), .pkt-tabs__button:focus:not(:active), .pkt-tabs__button:focus-visible:not(:active) {
   border: 0;
   box-shadow: none;
-  background-color: var(--pkt-color-surface-default-gray);
+  background-color: var(--pkt-tabs-bg);
   outline: 0.25rem solid var(--pkt-color-border-states-focus);
   outline-offset: 0;
 }
@@ -22537,6 +22636,11 @@ pkt-tag > .pkt-tag {
 .pkt-tag.pkt-tag--blue-dark.pkt-btn:hover, .pkt-tag.pkt-tag--blue-dark.pkt-btn:focus, .pkt-tag.pkt-tag--blue-dark.pkt-tag--hover {
   background-color: var(--pkt-color-brand-warm-blue-1000) !important;
   color: var(--pkt-color-brand-neutrals-200) !important;
+}
+.pkt-tag.pkt-tag--blue-dark.pkt-btn:hover,
+.pkt-tag.pkt-tag--blue-dark.pkt-btn:hover svg, .pkt-tag.pkt-tag--blue-dark.pkt-btn:focus,
+.pkt-tag.pkt-tag--blue-dark.pkt-btn:focus svg, .pkt-tag.pkt-tag--blue-dark.pkt-tag--hover,
+.pkt-tag.pkt-tag--blue-dark.pkt-tag--hover svg {
   --fg-color: var(--pkt-color-brand-neutrals-200) !important;
 }
 .pkt-tag.pkt-tag--small {