@oslokommune/punkt-css 18.3.1 → 18.5.0

package/dist/css/pkt-components.css

@@ -457,6 +457,10 @@ pkt-alert {
 /*
  * Back link component
  */
+pkt-backlink {
+  display: block;
+}
+
 .pkt-back-link .pkt-link {
   display: inline-flex;
   align-items: center;
@@ -543,6 +547,10 @@ pkt-alert {
 /* 
  * Breadcrumbs component
  */
+pkt-breadcrumbs {
+  display: block;
+}
+
 .pkt-breadcrumbs {
   position: relative;
   letter-spacing: -0.2px;
@@ -667,6 +675,7 @@ pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker .pkt-input {
 .pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker .pkt-input:is(select),
 pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker .pkt-input:is(select) {
   text-align: right;
+  width: auto;
 }
 .pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker > .pkt-cal-input-year,
 pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker > .pkt-cal-input-year {
@@ -858,15 +867,9 @@ pkt-card {
 .pkt-card.pkt-card--padding-none {
   padding: 0;
 }
-.pkt-card .pkt-card__heading h1,
-.pkt-card .pkt-card__heading h2,
-.pkt-card .pkt-card__heading h3,
-.pkt-card .pkt-card__heading h4,
-.pkt-card .pkt-card__heading h5 {
+.pkt-card.pkt-card .pkt-card__heading {
   padding: 0;
   margin: 0;
-  font-size: 1.875rem;
-  font-weight: 400;
   margin-block-end: 0.5rem;
   hyphens: auto;
   overflow-wrap: break-word;
@@ -876,19 +879,23 @@ pkt-card {
   text-underline-offset: 0.15em;
 }
 .pkt-card p.pkt-card__subheading {
+  letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 1.25rem;
+  line-height: 2rem;
   padding: 0;
   margin: 0;
-  line-height: unset;
   margin-block-end: 1rem;
-  font-size: 1.25rem;
-  font-weight: 300;
   hyphens: auto;
   overflow-wrap: break-word;
 }
 .pkt-card .pkt-card__metadata {
+  letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 1rem;
+  line-height: 1.5rem;
   margin-block-start: 1rem;
   margin-block-end: 0;
-  line-height: unset;
   gap: 0.5rem;
 }
 .pkt-card .pkt-card__metadata-lead {
@@ -937,6 +944,21 @@ pkt-card {
   max-height: 400px;
   max-width: 400px;
 }
+.pkt-card.pkt-card--zoom .pkt-card__image img {
+  transform: scale(1);
+  transition: transform 0.5s ease-in-out;
+}
+.pkt-card.pkt-card--zoom:hover .pkt-card__image img, .pkt-card.pkt-card--zoom:focus-within .pkt-card__image img {
+  transform: scale(1.1);
+}
+@media (prefers-reduced-motion: reduce) {
+  .pkt-card.pkt-card--zoom .pkt-card__image img {
+    transition: none;
+  }
+  .pkt-card.pkt-card--zoom:hover .pkt-card__image img, .pkt-card.pkt-card--zoom:focus-within .pkt-card__image img {
+    transform: none;
+  }
+}
 .pkt-card.pkt-card--horizontal .pkt-card__image {
   max-width: 400px;
   margin-inline-end: 2rem;
@@ -966,6 +988,46 @@ pkt-card {
     aspect-ratio: 19/10;
   }
 }
+.pkt-card.pkt-card .pkt-card__image.pkt-card__image-aspect-auto {
+  aspect-ratio: auto;
+}
+.pkt-card.pkt-card .pkt-card__image.pkt-card__image-aspect-auto img {
+  height: auto;
+}
+.pkt-card.pkt-card .pkt-card__image.pkt-card__image-aspect-1-1 {
+  aspect-ratio: 1;
+}
+.pkt-card.pkt-card .pkt-card__image.pkt-card__image-aspect-4-3 {
+  aspect-ratio: 4/3;
+}
+.pkt-card.pkt-card .pkt-card__image.pkt-card__image-aspect-3-2 {
+  aspect-ratio: 3/2;
+}
+.pkt-card.pkt-card .pkt-card__image.pkt-card__image-aspect-16-9 {
+  aspect-ratio: 16/9;
+}
+.pkt-card.pkt-card .pkt-card__image.pkt-card__image-aspect-19-10 {
+  aspect-ratio: 19/10;
+}
+.pkt-card.pkt-card .pkt-card__image.pkt-card__image-restricted {
+  aspect-ratio: auto;
+}
+.pkt-card.pkt-card .pkt-card__image.pkt-card__image-restricted img {
+  width: 100%;
+  height: 12.5rem;
+  object-fit: cover;
+  object-position: center;
+}
+@media screen and (min-width: 48rem) {
+  .pkt-card.pkt-card .pkt-card__image.pkt-card__image-restricted img {
+    height: 14.375rem;
+  }
+}
+@media screen and (min-width: 64rem) {
+  .pkt-card.pkt-card .pkt-card__image.pkt-card__image-restricted img {
+    height: 18.125rem;
+  }
+}
 .pkt-card .pkt-card__wrapper .pkt-card__link::before {
   content: "";
   position: absolute;
@@ -1290,6 +1352,15 @@ pkt-combobox {
   line-height: 1.375rem;
 }
 
+pkt-consent {
+  display: inline;
+}
+
+pkt-date-tags,
+pkt-datepicker-popup {
+  display: block;
+}
+
 .pkt-datepicker,
 pkt-datepicker {
   display: block;
@@ -2334,6 +2405,11 @@ pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal::backdrop {
  *   --pkt-footer-fg           tekstfarge
  *   --pkt-footer-link-hover   hover-farge på lenker (default: text-action-active)
  */
+pkt-footer,
+pkt-footer-simple {
+  display: block;
+}
+
 .pkt-footer,
 .pkt-footer-simple {
   display: block;
@@ -2617,6 +2693,10 @@ a.pkt-footer-simple__link:hover {
 /* 
  * Header component
  */
+pkt-header {
+  display: block;
+}
+
 .pkt-header {
   background-color: var(--pkt-color-background-default);
   border-bottom: 1px solid var(--pkt-color-border-subtle);
@@ -2938,6 +3018,10 @@ a.pkt-footer-simple__link:hover {
  * `$mobile-height` is the logo height on mobile (the service header drops to
  * 32px, the global header to 3.2rem).
  */
+pkt-header-global {
+  display: block;
+}
+
 .pkt-header-global-spacer {
   height: 6.5rem;
 }
@@ -3177,6 +3261,10 @@ a.pkt-footer-simple__link:hover {
 /*
  * Header menu (global mega menu)
  */
+pkt-header-menu {
+  display: block;
+}
+
 .pkt-header-menu {
   display: none;
   background-color: var(--pkt-color-background-default);
@@ -3762,6 +3850,10 @@ a.pkt-footer-simple__link:hover {
  * override downward. --mobile blocks come after --tablet so they win on
  * source order when both are present.
  */
+pkt-header-service {
+  display: block;
+}
+
 .pkt-header-service-spacer {
   height: 6.5rem;
 }
@@ -4244,6 +4336,10 @@ a.pkt-footer-simple__link:hover {
 /*
  * Header User Menu component
  */
+pkt-header-user-menu {
+  display: block;
+}
+
 .pkt-header-service__user-menu::after {
   content: "";
   position: absolute;
@@ -4379,6 +4475,9 @@ pkt-heading {
   font-weight: 600;
   line-height: 1.2;
 }
+.pkt-heading.pkt-heading {
+  margin-block: 0;
+}
 .pkt-heading--xlarge {
   letter-spacing: -0.2px;
   font-weight: 400;
@@ -4547,6 +4646,10 @@ pkt-icon > svg {
 }
 
 /* inputwrapper */
+pkt-helptext {
+  display: block;
+}
+
 pkt-input-wrapper {
   display: block;
 }
@@ -5105,6 +5208,13 @@ pkt-listbox {
 /*
  * Loader component
  */
+pkt-loader {
+  display: block;
+}
+pkt-loader[inline] {
+  display: inline-block;
+}
+
 .pkt-loader {
   color: currentColor;
   width: fit-content;
@@ -5241,6 +5351,10 @@ pkt-listbox {
 /*
  * Modal component
  */
+pkt-modal {
+  display: contents;
+}
+
 .pkt-modal {
   border: none;
   padding: 0;
@@ -5638,6 +5752,10 @@ pkt-messagebox {
   top: -15px;
 }
 
+pkt-progressbar {
+  display: block;
+}
+
 .pkt-progressbar {
   --pkt-progress-width: 0%;
   --pkt-progress-label-width: 5rem;
@@ -5696,6 +5814,10 @@ pkt-messagebox {
   transition: margin-left 0.5s ease;
 }
 
+pkt-searchinput {
+  display: block;
+}
+
 .pkt-searchinput {
   position: relative;
   letter-spacing: -0.2px;