@oslokommune/punkt-css 16.14.0 → 16.15.3

package/dist/css/pkt-components.css

@@ -1279,7 +1279,7 @@ pkt-datepicker-multiple {
 pkt-fileupload,
 .pkt-fileupload {
   display: block;
-  width: fit-content;
+  width: min(100%, 31rem);
   --fg-color: var(--pkt-color-text-body-default);
 }
 pkt-fileupload input[type=file],
@@ -1294,16 +1294,22 @@ pkt-fileupload input[type=file],
   white-space: nowrap;
   border: 0;
 }
-pkt-fileupload--full-width,
-.pkt-fileupload--full-width {
+pkt-fileupload--full-width, pkt-fileupload[fullwidth],
+.pkt-fileupload--full-width,
+.pkt-fileupload[fullwidth] {
   width: 100%;
 }
 pkt-fileupload--full-width .pkt-fileupload__drop-zone,
 pkt-fileupload--full-width .pkt-fileupload__queue-display,
-pkt-fileupload--full-width .pkt-fileupload__queue-display__item,
+pkt-fileupload--full-width .pkt-fileupload__queue-display__item, pkt-fileupload[fullwidth] .pkt-fileupload__drop-zone,
+pkt-fileupload[fullwidth] .pkt-fileupload__queue-display,
+pkt-fileupload[fullwidth] .pkt-fileupload__queue-display__item,
 .pkt-fileupload--full-width .pkt-fileupload__drop-zone,
 .pkt-fileupload--full-width .pkt-fileupload__queue-display,
-.pkt-fileupload--full-width .pkt-fileupload__queue-display__item {
+.pkt-fileupload--full-width .pkt-fileupload__queue-display__item,
+.pkt-fileupload[fullwidth] .pkt-fileupload__drop-zone,
+.pkt-fileupload[fullwidth] .pkt-fileupload__queue-display,
+.pkt-fileupload[fullwidth] .pkt-fileupload__queue-display__item {
   width: 100%;
 }
 pkt-fileupload--error .pkt-fileupload__drop-zone,
@@ -1325,11 +1331,11 @@ pkt-fileupload--disabled .pkt-fileupload__drop-zone__placeholder__icon svg,
   --fg-color: var(--pkt-color-text-action-disabled);
 }
 pkt-fileupload--disabled p,
-pkt-fileupload--disabled labe,
+pkt-fileupload--disabled label,
 pkt-fileupload--disabled button,
 pkt-fileupload--disabled input[type=text],
 .pkt-fileupload--disabled p,
-.pkt-fileupload--disabled labe,
+.pkt-fileupload--disabled label,
 .pkt-fileupload--disabled button,
 .pkt-fileupload--disabled input[type=text] {
   color: var(--pkt-color-text-action-disabled);
@@ -1478,6 +1484,8 @@ pkt-fileupload__queue-display,
   margin-top: 0;
   margin-bottom: 1rem;
   row-gap: 0.5rem;
+  container-type: inline-size;
+  container-name: queue-item;
 }
 pkt-fileupload__queue-display__item__rename-input,
 .pkt-fileupload__queue-display__item__rename-input {
@@ -1498,15 +1506,15 @@ pkt-fileupload__queue-display__item__rename-input:focus-visible, pkt-fileupload_
 .pkt-fileupload__queue-display__item__rename-input:active {
   border-color: var(--pkt-color-input-border-active);
 }
-pkt-fileupload__queue-display:has(.pkt-fileupload__queue-display__item__thumbnail),
-.pkt-fileupload__queue-display:has(.pkt-fileupload__queue-display__item__thumbnail) {
+pkt-fileupload__queue-display:is(:has(.pkt-fileupload__queue-display__item__thumbnail)),
+.pkt-fileupload__queue-display:is(:has(.pkt-fileupload__queue-display__item__thumbnail)) {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
   gap: 1rem;
   max-width: 100%;
 }
-pkt-fileupload__queue-display:has(.pkt-fileupload__queue-display__item__thumbnail) .pkt-fileupload__queue-display__item:has(.pkt-fileupload__queue-display__item__thumbnail),
-.pkt-fileupload__queue-display:has(.pkt-fileupload__queue-display__item__thumbnail) .pkt-fileupload__queue-display__item:has(.pkt-fileupload__queue-display__item__thumbnail) {
+pkt-fileupload__queue-display:is(:has(.pkt-fileupload__queue-display__item__thumbnail)) .pkt-fileupload__queue-display__item:is(:has(.pkt-fileupload__queue-display__item__thumbnail)),
+.pkt-fileupload__queue-display:is(:has(.pkt-fileupload__queue-display__item__thumbnail)) .pkt-fileupload__queue-display__item:is(:has(.pkt-fileupload__queue-display__item__thumbnail)) {
   border: 2px solid var(--pkt-color-border-subtle);
   display: flex;
   flex-direction: column;
@@ -1515,21 +1523,21 @@ pkt-fileupload__queue-display:has(.pkt-fileupload__queue-display__item__thumbnai
   overflow: hidden;
   justify-content: end;
 }
-pkt-fileupload__queue-display:has(.pkt-fileupload__queue-display__item__thumbnail) .pkt-fileupload__queue-display__item--in-progress,
-.pkt-fileupload__queue-display:has(.pkt-fileupload__queue-display__item__thumbnail) .pkt-fileupload__queue-display__item--in-progress {
+pkt-fileupload__queue-display:is(:has(.pkt-fileupload__queue-display__item__thumbnail)) .pkt-fileupload__queue-display__item--in-progress,
+.pkt-fileupload__queue-display:is(:has(.pkt-fileupload__queue-display__item__thumbnail)) .pkt-fileupload__queue-display__item--in-progress {
   grid-column: 1/-1;
 }
-pkt-fileupload__queue-display:has(.pkt-fileupload__queue-display__item__thumbnail) .pkt-fileupload__queue-display__item--error,
-.pkt-fileupload__queue-display:has(.pkt-fileupload__queue-display__item__thumbnail) .pkt-fileupload__queue-display__item--error {
+pkt-fileupload__queue-display:is(:has(.pkt-fileupload__queue-display__item__thumbnail)) .pkt-fileupload__queue-display__item--error,
+.pkt-fileupload__queue-display:is(:has(.pkt-fileupload__queue-display__item__thumbnail)) .pkt-fileupload__queue-display__item--error {
   grid-column: 1/-1;
 }
-pkt-fileupload__queue-display:has(.pkt-fileupload__queue-display__item__thumbnail) .pkt-fileupload__queue-display__item__thumbnail,
-.pkt-fileupload__queue-display:has(.pkt-fileupload__queue-display__item__thumbnail) .pkt-fileupload__queue-display__item__thumbnail {
+pkt-fileupload__queue-display:is(:has(.pkt-fileupload__queue-display__item__thumbnail)) .pkt-fileupload__queue-display__item__thumbnail,
+.pkt-fileupload__queue-display:is(:has(.pkt-fileupload__queue-display__item__thumbnail)) .pkt-fileupload__queue-display__item__thumbnail {
   width: 100%;
   min-width: 0;
 }
-pkt-fileupload__queue-display:has(.pkt-fileupload__queue-display__item__thumbnail) .pkt-fileupload__queue-display__item__actions,
-.pkt-fileupload__queue-display:has(.pkt-fileupload__queue-display__item__thumbnail) .pkt-fileupload__queue-display__item__actions {
+pkt-fileupload__queue-display:is(:has(.pkt-fileupload__queue-display__item__thumbnail)) .pkt-fileupload__queue-display__item__actions,
+.pkt-fileupload__queue-display:is(:has(.pkt-fileupload__queue-display__item__thumbnail)) .pkt-fileupload__queue-display__item__actions {
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -1545,13 +1553,6 @@ pkt-fileupload__queue-display__item,
   gap: 0.5rem;
   padding: 1rem;
   border: 2px solid var(--pkt-color-border-subtle);
-  container-type: inline-size;
-}
-@media screen and (min-width: 64rem) {
-  pkt-fileupload__queue-display__item,
-  .pkt-fileupload__queue-display__item {
-    grid-template-columns: auto minmax(0, 1fr) auto auto;
-  }
 }
 pkt-fileupload__queue-display__item__icon,
 .pkt-fileupload__queue-display__item__icon {
@@ -1571,40 +1572,33 @@ pkt-fileupload__queue-display__item__title,
   grid-row: 1;
   min-width: 0;
   max-width: 100%;
-  overflow: hidden;
-  white-space: normal;
-  overflow-wrap: anywhere;
-  word-break: break-word;
   align-self: center;
   margin: 0;
+  display: flex;
+  align-items: baseline;
+  flex-wrap: nowrap;
+  overflow: hidden;
 }
 pkt-fileupload__queue-display__item__actions,
 .pkt-fileupload__queue-display__item__actions {
-  grid-column: 1/3;
+  grid-column: 1/-1;
   grid-row: 2;
   align-self: center;
   justify-self: flex-start;
   display: flex;
   gap: 1rem;
-}
-@media screen and (min-width: 64rem) {
-  pkt-fileupload__queue-display__item__actions,
-  .pkt-fileupload__queue-display__item__actions {
-    justify-self: end;
-    padding-left: 1rem;
-    grid-column: 4;
-    grid-row: 1;
-  }
+  flex-wrap: wrap;
 }
 pkt-fileupload__queue-display__item__filesize,
 .pkt-fileupload__queue-display__item__filesize {
   letter-spacing: -0.2px;
-  font-weight: 400;
-  font-size: 0.75rem;
-  line-height: 1.25rem;
+  font-weight: 300;
+  font-size: 0.875rem;
+  line-height: 1.375rem;
   color: var(--pkt-color-text-placeholder);
-  grid-column: 3;
-  grid-row: 1;
+  flex: 0 0 auto;
+  white-space: nowrap;
+  padding-left: 0.5rem;
 }
 pkt-fileupload__queue-display__item__cancel-button,
 .pkt-fileupload__queue-display__item__cancel-button {
@@ -1683,7 +1677,6 @@ pkt-fileupload__queue-display__item__inline-ui .pkt-btn,
 pkt-fileupload__queue-display__item__operation-content,
 .pkt-fileupload__queue-display__item__operation-content {
   grid-column: 1/-1;
-  grid-row: 2;
   padding: 0.75rem 1rem;
   background: var(--pkt-color-surface-default-gray);
   margin-top: 0.5rem;
@@ -1700,8 +1693,14 @@ pkt-fileupload__queue-display__item__expanded-operation-ui,
   align-items: flex-start;
   gap: 0.5rem;
 }
+pkt-fileupload__queue-display__item__expanded-operation-ui .pkt-btn,
+.pkt-fileupload__queue-display__item__expanded-operation-ui .pkt-btn {
+  grid-row: 3;
+}
 pkt-fileupload__queue-display__item__comment-label,
 .pkt-fileupload__queue-display__item__comment-label {
+  grid-column: 1/-1;
+  grid-row: 1;
   letter-spacing: -0.2px;
   font-weight: 500;
   font-size: 1rem;
@@ -1710,7 +1709,7 @@ pkt-fileupload__queue-display__item__comment-label,
 pkt-fileupload__queue-display__item__comment-input,
 .pkt-fileupload__queue-display__item__comment-input {
   grid-column: 1/-1;
-  grid-row: 1;
+  grid-row: 2;
   width: 100%;
   font: inherit;
   letter-spacing: -0.2px;
@@ -1796,32 +1795,39 @@ pkt-fileupload__queue-display__item__thumbnail,
 .pkt-fileupload__queue-display__item__thumbnail {
   min-width: 0;
 }
-pkt-fileupload__queue-display__item__thumbnail__image-wrapper,
-.pkt-fileupload__queue-display__item__thumbnail__image-wrapper {
+pkt-fileupload__queue-display__item__thumbnail__image-wrapper.pkt-btn,
+.pkt-fileupload__queue-display__item__thumbnail__image-wrapper.pkt-btn {
   position: relative;
   display: block;
   width: 100%;
   height: max-content;
+  min-height: 0;
   padding: 0;
   border: 0;
   background: none;
   cursor: pointer;
 }
-pkt-fileupload__queue-display__item__thumbnail__image-wrapper img,
-.pkt-fileupload__queue-display__item__thumbnail__image-wrapper img {
+pkt-fileupload__queue-display__item__thumbnail__image-wrapper.pkt-btn .pkt-btn__text,
+.pkt-fileupload__queue-display__item__thumbnail__image-wrapper.pkt-btn .pkt-btn__text {
+  display: block;
+  width: 100%;
+  line-height: 0;
+}
+pkt-fileupload__queue-display__item__thumbnail__image-wrapper.pkt-btn img,
+.pkt-fileupload__queue-display__item__thumbnail__image-wrapper.pkt-btn img {
   display: block;
   width: 100%;
   aspect-ratio: 1;
   object-fit: cover;
 }
-pkt-fileupload__queue-display__item__thumbnail__image-wrapper:hover .pkt-fileupload__queue-display__item__thumbnail__expand-icon, pkt-fileupload__queue-display__item__thumbnail__image-wrapper:focus-visible .pkt-fileupload__queue-display__item__thumbnail__expand-icon,
-.pkt-fileupload__queue-display__item__thumbnail__image-wrapper:hover .pkt-fileupload__queue-display__item__thumbnail__expand-icon,
-.pkt-fileupload__queue-display__item__thumbnail__image-wrapper:focus-visible .pkt-fileupload__queue-display__item__thumbnail__expand-icon {
+pkt-fileupload__queue-display__item__thumbnail__image-wrapper.pkt-btn:hover .pkt-fileupload__queue-display__item__thumbnail__expand-icon, pkt-fileupload__queue-display__item__thumbnail__image-wrapper.pkt-btn:focus-visible .pkt-fileupload__queue-display__item__thumbnail__expand-icon,
+.pkt-fileupload__queue-display__item__thumbnail__image-wrapper.pkt-btn:hover .pkt-fileupload__queue-display__item__thumbnail__expand-icon,
+.pkt-fileupload__queue-display__item__thumbnail__image-wrapper.pkt-btn:focus-visible .pkt-fileupload__queue-display__item__thumbnail__expand-icon {
   background-color: var(--pkt-color-text-action-hover);
 }
-pkt-fileupload__queue-display__item__thumbnail__image-wrapper:hover .pkt-fileupload__queue-display__item__thumbnail__expand-icon svg, pkt-fileupload__queue-display__item__thumbnail__image-wrapper:focus-visible .pkt-fileupload__queue-display__item__thumbnail__expand-icon svg,
-.pkt-fileupload__queue-display__item__thumbnail__image-wrapper:hover .pkt-fileupload__queue-display__item__thumbnail__expand-icon svg,
-.pkt-fileupload__queue-display__item__thumbnail__image-wrapper:focus-visible .pkt-fileupload__queue-display__item__thumbnail__expand-icon svg {
+pkt-fileupload__queue-display__item__thumbnail__image-wrapper.pkt-btn:hover .pkt-fileupload__queue-display__item__thumbnail__expand-icon svg, pkt-fileupload__queue-display__item__thumbnail__image-wrapper.pkt-btn:focus-visible .pkt-fileupload__queue-display__item__thumbnail__expand-icon svg,
+.pkt-fileupload__queue-display__item__thumbnail__image-wrapper.pkt-btn:hover .pkt-fileupload__queue-display__item__thumbnail__expand-icon svg,
+.pkt-fileupload__queue-display__item__thumbnail__image-wrapper.pkt-btn:focus-visible .pkt-fileupload__queue-display__item__thumbnail__expand-icon svg {
   --fg-color: var(--pkt-color-text-body-light);
 }
 pkt-fileupload__queue-display__item__thumbnail__expand-icon,
@@ -1843,10 +1849,15 @@ pkt-fileupload__queue-display__item__thumbnail__title,
   font-size: 0.875rem;
   line-height: 1.375rem;
   margin-top: 0.5rem;
+  margin-bottom: 0.25rem;
+  min-width: 0;
+  max-width: 100%;
   overflow: hidden;
   white-space: nowrap;
-  text-overflow: ellipsis;
-  min-width: 0;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
 }
 pkt-fileupload__queue-display__item__thumbnail--fallback .pkt-fileupload__queue-display__item__thumbnail__title,
 .pkt-fileupload__queue-display__item__thumbnail--fallback .pkt-fileupload__queue-display__item__thumbnail__title {
@@ -1890,17 +1901,6 @@ pkt-fileupload__queue-display__item--in-progress .pkt-fileupload__queue-display_
   grid-row: 1;
   margin: 0;
 }
-pkt-fileupload__queue-display__item--in-progress .pkt-fileupload__queue-display__item__filesize, pkt-fileupload__queue-display__item--error .pkt-fileupload__queue-display__item__filesize,
-.pkt-fileupload__queue-display__item--in-progress .pkt-fileupload__queue-display__item__filesize,
-.pkt-fileupload__queue-display__item--error .pkt-fileupload__queue-display__item__filesize {
-  letter-spacing: -0.2px;
-  font-weight: 500;
-  font-size: 0.75rem;
-  line-height: 1.25rem;
-  color: var(--pkt-color-text-subtle);
-  grid-column: 1/3;
-  grid-row: 3;
-}
 pkt-fileupload__queue-display__item--in-progress .pkt-fileupload__queue-display__item__cancel-button, pkt-fileupload__queue-display__item--error .pkt-fileupload__queue-display__item__cancel-button,
 .pkt-fileupload__queue-display__item--in-progress .pkt-fileupload__queue-display__item__cancel-button,
 .pkt-fileupload__queue-display__item--error .pkt-fileupload__queue-display__item__cancel-button {
@@ -1938,23 +1938,23 @@ pkt-fileupload__queue-display__item--error .pkt-fileupload__queue-display__item_
 .pkt-fileupload__queue-display__item--error .pkt-fileupload__queue-display__item__icon {
   align-self: center;
 }
-pkt-fileupload__queue-display__item--error:has(.pkt-fileupload__queue-display__item__progress--error),
-.pkt-fileupload__queue-display__item--error:has(.pkt-fileupload__queue-display__item__progress--error) {
+pkt-fileupload__queue-display__item--error:is(:has(.pkt-fileupload__queue-display__item__progress--error)),
+.pkt-fileupload__queue-display__item--error:is(:has(.pkt-fileupload__queue-display__item__progress--error)) {
   background-color: var(--pkt-color-surface-default-faded-red);
   grid-template-rows: auto auto auto;
 }
-pkt-fileupload__queue-display__item--error:has(.pkt-fileupload__queue-display__item__progress--error) .pkt-fileupload__queue-display__item__progress,
-.pkt-fileupload__queue-display__item--error:has(.pkt-fileupload__queue-display__item__progress--error) .pkt-fileupload__queue-display__item__progress {
+pkt-fileupload__queue-display__item--error:is(:has(.pkt-fileupload__queue-display__item__progress--error)) .pkt-fileupload__queue-display__item__progress,
+.pkt-fileupload__queue-display__item--error:is(:has(.pkt-fileupload__queue-display__item__progress--error)) .pkt-fileupload__queue-display__item__progress {
   grid-column: 1/-1;
   grid-row: 2;
   margin: 0;
 }
-pkt-fileupload__queue-display__item--error:has(.pkt-fileupload__queue-display__item__progress--error) .pkt-fileupload__queue-display__item__progress .pkt-progressbar__bar,
-.pkt-fileupload__queue-display__item--error:has(.pkt-fileupload__queue-display__item__progress--error) .pkt-fileupload__queue-display__item__progress .pkt-progressbar__bar {
+pkt-fileupload__queue-display__item--error:is(:has(.pkt-fileupload__queue-display__item__progress--error)) .pkt-fileupload__queue-display__item__progress .pkt-progressbar__bar,
+.pkt-fileupload__queue-display__item--error:is(:has(.pkt-fileupload__queue-display__item__progress--error)) .pkt-fileupload__queue-display__item__progress .pkt-progressbar__bar {
   background-color: var(--pkt-color-brand-red-1000);
 }
-pkt-fileupload__queue-display__item--error:has(.pkt-fileupload__queue-display__item__progress--error) .pkt-fileupload__queue-display__item__error-message,
-.pkt-fileupload__queue-display__item--error:has(.pkt-fileupload__queue-display__item__progress--error) .pkt-fileupload__queue-display__item__error-message {
+pkt-fileupload__queue-display__item--error:is(:has(.pkt-fileupload__queue-display__item__progress--error)) .pkt-fileupload__queue-display__item__error-message,
+.pkt-fileupload__queue-display__item--error:is(:has(.pkt-fileupload__queue-display__item__progress--error)) .pkt-fileupload__queue-display__item__error-message {
   grid-column: 2/-1;
   grid-row: 3;
   text-align: right;
@@ -1989,23 +1989,62 @@ pkt-fileupload__queue-display__item--in-progress .pkt-fileupload__queue-display_
   grid-column: 2;
   grid-row: 2;
 }
-
-.pkt-fileupload__queue-display__item {
-  container-type: inline-size;
+pkt-fileupload__queue-display__item--in-progress .pkt-fileupload__queue-display__item__loading-text::after,
+.pkt-fileupload__queue-display__item--in-progress .pkt-fileupload__queue-display__item__loading-text::after {
+  content: "...";
+  display: inline-block;
+  overflow: hidden;
+  vertical-align: baseline;
+  width: 0;
+  animation: pkt-fileupload-loading-dots 1.2s steps(4, end) infinite;
 }
 
-@container (max-width: 560px) {
-  .pkt-fileupload__queue-display__item__actions {
-    flex-direction: column;
-    gap: 0.5rem;
+@keyframes pkt-fileupload-loading-dots {
+  0%, 100% {
+    width: 0;
+  }
+  33% {
+    width: 0.4em;
+  }
+  66% {
+    width: 0.8em;
   }
-  .pkt-fileupload__queue-display__item__title {
-    -webkit-line-clamp: 2;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
+  99% {
+    width: 1.2em;
   }
 }
+@media (prefers-reduced-motion: reduce) {
+  .pkt-fileupload__queue-display__item__loading-text::after {
+    animation: none;
+    width: 1.2em;
+  }
+}
+.pkt-fileupload__queue-display__item__title__head {
+  min-width: 0;
+  flex: 0 1 auto;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.pkt-fileupload__queue-display__item__title__tail {
+  flex: 0 0 auto;
+  white-space: nowrap;
+}
+
+[data-pkt-truncate-part=first]:not(.pkt-fileupload__queue-display__item__title__head) {
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.pkt-fileupload__queue-display__item__thumbnail__title:is(:has(> .pkt-fileupload__queue-display__item__title__tail)) {
+  display: flex;
+  flex-wrap: nowrap;
+  overflow: hidden;
+}
+
 .pkt-fileupload-wrapper--full-width {
   width: 100%;
 }
@@ -2023,23 +2062,32 @@ pkt-fileupload__queue-display__item--in-progress .pkt-fileupload__queue-display_
 .pkt-fileupload__image-preview-modal .pkt-contents {
   padding: 0;
 }
-.pkt-fileupload__image-preview-modal .pkt-modal {
-  max-height: 100%;
-  max-width: 100%;
-  height: 100%;
-  width: 100%;
-  margin: 0;
+
+.pkt-modal.pkt-fileupload__image-preview-modal,
+pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal {
+  box-sizing: border-box;
+  width: fit-content;
+  max-width: min(92vw, 56rem);
+  max-height: min(92vh, 56rem);
+  height: auto;
+  margin: auto;
 }
-.pkt-fileupload__image-preview-modal .pkt-modal .pkt-modal__wrapper {
-  max-height: 100%;
+.pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal__wrapper,
+pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal .pkt-modal__wrapper {
+  max-height: min(92vh, 56rem);
+  min-height: 0;
+  grid-template-rows: auto minmax(0, 1fr);
 }
-.pkt-fileupload__image-preview-modal .pkt-modal .pkt-modal__wrapper .pkt-modal__content {
-  padding: 0;
+.pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal__container,
+pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal .pkt-modal__container {
+  min-height: 0;
 }
-.pkt-fileupload__image-preview-modal .pkt-modal .pkt-modal__header {
+.pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal__header,
+pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal .pkt-modal__header {
   text-align: left;
 }
-.pkt-fileupload__image-preview-modal .pkt-modal .pkt-modal__headingText {
+.pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal__headingText,
+pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal .pkt-modal__headingText {
   line-height: 2rem;
   padding: 1rem 0 0 1.5rem;
   overflow: hidden;
@@ -2047,22 +2095,45 @@ pkt-fileupload__queue-display__item--in-progress .pkt-fileupload__queue-display_
   text-overflow: ellipsis;
   max-width: calc(100% - 3rem);
   background-color: transparent;
-  color: var(--pkt-color-text-body-light);
+  color: var(--pkt-color-text-body-default);
 }
-.pkt-fileupload__image-preview-modal .pkt-modal .pkt-modal__container {
+.pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal__container,
+pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal .pkt-modal__container {
   padding-top: 0;
   background-color: transparent;
 }
-.pkt-fileupload__image-preview-modal .pkt-modal .pkt-modal__closeButton {
+.pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal__content,
+pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal .pkt-modal__content {
+  padding: 0 1rem 1rem;
+  background: var(--pkt-color-surface-default);
+  background-image: none;
+  box-shadow: none;
+  min-height: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+}
+.pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal__content .pkt-fileupload__image-preview,
+pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal .pkt-modal__content .pkt-fileupload__image-preview {
+  flex: 1 1 auto;
+  min-height: 0;
+  align-self: stretch;
+  width: 100%;
+}
+.pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal__closeButton,
+pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal .pkt-modal__closeButton {
   background-color: transparent;
 }
-.pkt-fileupload__image-preview-modal .pkt-modal .pkt-modal__closeButton .pkt-btn {
-  color: var(--pkt-color-text-body-light);
+.pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal__closeButton .pkt-btn,
+pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal .pkt-modal__closeButton .pkt-btn {
+  color: var(--pkt-color-text-body-default);
 }
-.pkt-fileupload__image-preview-modal .pkt-modal .pkt-modal__closeButton .pkt-btn:hover, .pkt-fileupload__image-preview-modal .pkt-modal .pkt-modal__closeButton .pkt-btn:focus-visible {
-  color: var(--pkt-color-warm-blue-1000);
+.pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal__closeButton .pkt-btn:hover, .pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal__closeButton .pkt-btn:focus-visible,
+pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal .pkt-modal__closeButton .pkt-btn:hover,
+pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal .pkt-modal__closeButton .pkt-btn:focus-visible {
+  color: var(--pkt-color-text-action-hover);
 }
-.pkt-fileupload__image-preview-modal .pkt-modal::backdrop {
+.pkt-modal.pkt-fileupload__image-preview-modal::backdrop,
+pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal::backdrop {
   background-color: rgba(0, 0, 0, 0.85);
 }
 
@@ -2071,63 +2142,77 @@ pkt-fileupload__queue-display__item--in-progress .pkt-fileupload__queue-display_
   background-color: var(--pkt-color-surface-default);
   display: grid;
   grid-template-columns: auto 1fr auto;
-  grid-template-rows: 1fr auto;
-  grid-template-areas: "prev content next" ". counter .";
+  grid-template-rows: minmax(0, 1fr) auto;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
+  min-height: 0;
+  max-height: min(92vh - 6rem, 56rem);
 }
 .pkt-fileupload__image-preview__content {
-  min-height: 75vh;
-  grid-area: prev-start/prev-start/next-end/next-end;
+  min-height: 0;
+  height: 100%;
+  grid-column: 1/-1;
+  grid-row: 1;
+  z-index: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   flex: 1;
   min-width: 0;
-  max-height: 100%;
+  overflow: hidden;
 }
 .pkt-fileupload__image-preview__image {
   max-width: 100%;
-  max-height: fit-content;
+  max-height: 100%;
+  width: auto;
+  height: auto;
   object-fit: contain;
 }
-.pkt-fileupload__image-preview__nav {
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  background-color: var(--pkt-color-background-subtle);
-  z-index: 2;
-}
-.pkt-fileupload__image-preview__nav .pkt-button:hover,
-.pkt-fileupload__image-preview__nav .pkt-button:focus-visible {
-  background-color: var(--pkt-color-text-action-hover);
-}
 .pkt-fileupload__image-preview__nav--prev {
-  grid-area: prev;
+  grid-column: 1;
+  grid-row: 1;
   margin-left: 0.5rem;
 }
 .pkt-fileupload__image-preview__nav--next {
-  grid-area: next;
+  grid-column: 3;
+  grid-row: 1;
   margin-right: 0.5rem;
 }
-.pkt-fileupload__image-preview__nav .pkt-icon {
-  width: 24px;
-  height: 24px;
+.pkt-fileupload__image-preview__nav.pkt-btn {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2;
+  justify-self: center;
+  align-self: center;
+  border-radius: 50%;
+  box-sizing: border-box;
+  width: 3rem;
+  height: 3rem;
+  min-width: 3rem;
+  min-height: 3rem;
+  padding: 0;
+  background-color: var(--pkt-color-background-default);
 }
-.pkt-fileupload__image-preview__nav .pkt-icon:hover, .pkt-fileupload__image-preview__nav .pkt-icon:focus-visible svg {
-  --fg-color: var(--pkt-color-text-body-light);
+.pkt-fileupload__image-preview__nav.pkt-btn .pkt-btn__icon,
+.pkt-fileupload__image-preview__nav.pkt-btn .pkt-icon {
+  width: 1.5rem;
+  height: 1.5rem;
 }
 .pkt-fileupload__image-preview__counter {
   letter-spacing: -0.2px;
   font-weight: 500;
   font-size: 0.875rem;
   line-height: 1.375rem;
-  color: var(--pkt-color-text-body-light);
-  grid-area: counter;
+  color: var(--pkt-color-text-body-default);
+  grid-column: 1/-1;
+  grid-row: 2;
+  z-index: 1;
+  position: relative;
   justify-self: center;
+  text-align: center;
 }
 
 /*
@@ -2576,24 +2661,32 @@ pkt-fileupload__queue-display__item--in-progress .pkt-fileupload__queue-display_
 .pkt-header-service-spacer {
   height: 80px;
 }
-@media screen and (min-width: 48rem) {
-  .pkt-header-service-spacer {
-    height: 5.5rem;
+@supports not (container-type: inline-size) {
+  @media screen and (min-width: 48rem) {
+    .pkt-header-service-spacer {
+      height: 5.5rem;
+    }
   }
 }
-@container header-service (min-width: 48rem) {
-  .pkt-header-service-spacer {
-    height: 5.5rem;
+@supports (container-type: inline-size) {
+  @container header-service (min-width: 48rem) {
+    .pkt-header-service-spacer {
+      height: 5.5rem;
+    }
   }
 }
-@media screen and (min-width: 80rem) {
-  .pkt-header-service-spacer {
-    height: 6.5rem;
+@supports not (container-type: inline-size) {
+  @media screen and (min-width: 80rem) {
+    .pkt-header-service-spacer {
+      height: 6.5rem;
+    }
   }
 }
-@container header-service (min-width: 80rem) {
-  .pkt-header-service-spacer {
-    height: 6.5rem;
+@supports (container-type: inline-size) {
+  @container header-service (min-width: 80rem) {
+    .pkt-header-service-spacer {
+      height: 6.5rem;
+    }
   }
 }
 .pkt-header-service-spacer--mobile {
@@ -2602,47 +2695,63 @@ pkt-fileupload__queue-display__item--in-progress .pkt-fileupload__queue-display_
 .pkt-header-service-spacer--has-user {
   height: 7.5rem;
 }
-@media screen and (min-width: 48rem) {
-  .pkt-header-service-spacer--has-user {
-    height: 5.5rem;
+@supports not (container-type: inline-size) {
+  @media screen and (min-width: 48rem) {
+    .pkt-header-service-spacer--has-user {
+      height: 5.5rem;
+    }
   }
 }
-@container header-service (min-width: 48rem) {
-  .pkt-header-service-spacer--has-user {
-    height: 5.5rem;
+@supports (container-type: inline-size) {
+  @container header-service (min-width: 48rem) {
+    .pkt-header-service-spacer--has-user {
+      height: 5.5rem;
+    }
   }
 }
-@media screen and (min-width: 80rem) {
-  .pkt-header-service-spacer--has-user {
-    height: 6.5rem;
+@supports not (container-type: inline-size) {
+  @media screen and (min-width: 80rem) {
+    .pkt-header-service-spacer--has-user {
+      height: 6.5rem;
+    }
   }
 }
-@container header-service (min-width: 80rem) {
-  .pkt-header-service-spacer--has-user {
-    height: 6.5rem;
+@supports (container-type: inline-size) {
+  @container header-service (min-width: 80rem) {
+    .pkt-header-service-spacer--has-user {
+      height: 6.5rem;
+    }
   }
 }
 .pkt-header-service-spacer--compact {
   height: 4rem;
 }
-@media screen and (min-width: 48rem) {
-  .pkt-header-service-spacer--compact {
-    height: 4rem;
+@supports not (container-type: inline-size) {
+  @media screen and (min-width: 48rem) {
+    .pkt-header-service-spacer--compact {
+      height: 4rem;
+    }
   }
 }
-@container header-service (min-width: 48rem) {
-  .pkt-header-service-spacer--compact {
-    height: 4rem;
+@supports (container-type: inline-size) {
+  @container header-service (min-width: 48rem) {
+    .pkt-header-service-spacer--compact {
+      height: 4rem;
+    }
   }
 }
-@media screen and (min-width: 80rem) {
-  .pkt-header-service-spacer--compact {
-    height: 4.5rem;
+@supports not (container-type: inline-size) {
+  @media screen and (min-width: 80rem) {
+    .pkt-header-service-spacer--compact {
+      height: 4.5rem;
+    }
   }
 }
-@container header-service (min-width: 80rem) {
-  .pkt-header-service-spacer--compact {
-    height: 4.5rem;
+@supports (container-type: inline-size) {
+  @container header-service (min-width: 80rem) {
+    .pkt-header-service-spacer--compact {
+      height: 4.5rem;
+    }
   }
 }
 .pkt-header-service-spacer--compact.pkt-header-service-spacer--mobile {
@@ -2651,24 +2760,32 @@ pkt-fileupload__queue-display__item--in-progress .pkt-fileupload__queue-display_
 .pkt-header-service-spacer--compact.pkt-header-service-spacer--has-user {
   height: 104px;
 }
-@media screen and (min-width: 48rem) {
-  .pkt-header-service-spacer--compact.pkt-header-service-spacer--has-user {
-    height: 4rem;
+@supports not (container-type: inline-size) {
+  @media screen and (min-width: 48rem) {
+    .pkt-header-service-spacer--compact.pkt-header-service-spacer--has-user {
+      height: 4rem;
+    }
   }
 }
-@container header-service (min-width: 48rem) {
-  .pkt-header-service-spacer--compact.pkt-header-service-spacer--has-user {
-    height: 4rem;
+@supports (container-type: inline-size) {
+  @container header-service (min-width: 48rem) {
+    .pkt-header-service-spacer--compact.pkt-header-service-spacer--has-user {
+      height: 4rem;
+    }
   }
 }
-@media screen and (min-width: 80rem) {
-  .pkt-header-service-spacer--compact.pkt-header-service-spacer--has-user {
-    height: 4.5rem;
+@supports not (container-type: inline-size) {
+  @media screen and (min-width: 80rem) {
+    .pkt-header-service-spacer--compact.pkt-header-service-spacer--has-user {
+      height: 4.5rem;
+    }
   }
 }
-@container header-service (min-width: 80rem) {
-  .pkt-header-service-spacer--compact.pkt-header-service-spacer--has-user {
-    height: 4.5rem;
+@supports (container-type: inline-size) {
+  @container header-service (min-width: 80rem) {
+    .pkt-header-service-spacer--compact.pkt-header-service-spacer--has-user {
+      height: 4.5rem;
+    }
   }
 }
 .pkt-header-service-spacer--compact.pkt-header-service-spacer--has-user.pkt-header-service-spacer--mobile {
@@ -2678,37 +2795,49 @@ pkt-fileupload__queue-display__item--in-progress .pkt-fileupload__queue-display_
 .pkt-header-service {
   --pkt-header-height: 4.5rem;
 }
-@media screen and (min-width: 48rem) {
-  .pkt-header-service {
-    --pkt-header-height: 5.5rem;
+@supports not (container-type: inline-size) {
+  @media screen and (min-width: 48rem) {
+    .pkt-header-service {
+      --pkt-header-height: 5.5rem;
+    }
   }
 }
-@container header-service (min-width: 48rem) {
-  .pkt-header-service {
-    --pkt-header-height: 5.5rem;
+@supports (container-type: inline-size) {
+  @container header-service (min-width: 48rem) {
+    .pkt-header-service {
+      --pkt-header-height: 5.5rem;
+    }
   }
 }
-@media screen and (min-width: 80rem) {
-  .pkt-header-service {
-    --pkt-header-height: 6.5rem;
+@supports not (container-type: inline-size) {
+  @media screen and (min-width: 80rem) {
+    .pkt-header-service {
+      --pkt-header-height: 6.5rem;
+    }
   }
 }
-@container header-service (min-width: 80rem) {
-  .pkt-header-service {
-    --pkt-header-height: 6.5rem;
+@supports (container-type: inline-size) {
+  @container header-service (min-width: 80rem) {
+    .pkt-header-service {
+      --pkt-header-height: 6.5rem;
+    }
   }
 }
 .pkt-header-service--compact {
   --pkt-header-height: 4rem;
 }
-@media screen and (min-width: 80rem) {
-  .pkt-header-service--compact {
-    --pkt-header-height: 4.5rem;
+@supports not (container-type: inline-size) {
+  @media screen and (min-width: 80rem) {
+    .pkt-header-service--compact {
+      --pkt-header-height: 4.5rem;
+    }
   }
 }
-@container header-service (min-width: 80rem) {
-  .pkt-header-service--compact {
-    --pkt-header-height: 4.5rem;
+@supports (container-type: inline-size) {
+  @container header-service (min-width: 80rem) {
+    .pkt-header-service--compact {
+      --pkt-header-height: 4.5rem;
+    }
   }
 }
 .pkt-header-service--mobile {
@@ -2732,28 +2861,36 @@ pkt-fileupload__queue-display__item--in-progress .pkt-fileupload__queue-display_
   grid-template-rows: 4.5rem auto;
   column-gap: 0.5rem;
 }
-@media screen and (min-width: 48rem) {
-  .pkt-header-service {
-    grid-template-rows: 5.5rem auto;
-    column-gap: 1.5rem;
+@supports not (container-type: inline-size) {
+  @media screen and (min-width: 48rem) {
+    .pkt-header-service {
+      grid-template-rows: 5.5rem auto;
+      column-gap: 1.5rem;
+    }
   }
 }
-@container header-service (min-width: 48rem) {
-  .pkt-header-service {
-    grid-template-rows: 5.5rem auto;
-    column-gap: 1.5rem;
+@supports (container-type: inline-size) {
+  @container header-service (min-width: 48rem) {
+    .pkt-header-service {
+      grid-template-rows: 5.5rem auto;
+      column-gap: 1.5rem;
+    }
   }
 }
-@media screen and (min-width: 80rem) {
-  .pkt-header-service {
-    grid-template-rows: 6.5rem auto;
-    column-gap: 2rem;
+@supports not (container-type: inline-size) {
+  @media screen and (min-width: 80rem) {
+    .pkt-header-service {
+      grid-template-rows: 6.5rem auto;
+      column-gap: 2rem;
+    }
   }
 }
-@container header-service (min-width: 80rem) {
-  .pkt-header-service {
-    grid-template-rows: 6.5rem auto;
-    column-gap: 2rem;
+@supports (container-type: inline-size) {
+  @container header-service (min-width: 80rem) {
+    .pkt-header-service {
+      grid-template-rows: 6.5rem auto;
+      column-gap: 2rem;
+    }
   }
 }
 .pkt-header-service--compact {
@@ -2777,24 +2914,32 @@ pkt-fileupload__queue-display__item--in-progress .pkt-fileupload__queue-display_
   column-gap: 0.25rem;
   min-width: 0;
 }
-@media screen and (min-width: 48rem) {
-  .pkt-header-service__logo-area, .pkt-header-service__content, .pkt-header-service__user {
-    column-gap: 1.5rem;
+@supports not (container-type: inline-size) {
+  @media screen and (min-width: 48rem) {
+    .pkt-header-service__logo-area, .pkt-header-service__content, .pkt-header-service__user {
+      column-gap: 1.5rem;
+    }
   }
 }
-@container header-service (min-width: 48rem) {
-  .pkt-header-service__logo-area, .pkt-header-service__content, .pkt-header-service__user {
-    column-gap: 1.5rem;
+@supports (container-type: inline-size) {
+  @container header-service (min-width: 48rem) {
+    .pkt-header-service__logo-area, .pkt-header-service__content, .pkt-header-service__user {
+      column-gap: 1.5rem;
+    }
   }
 }
-@media screen and (min-width: 80rem) {
-  .pkt-header-service__logo-area, .pkt-header-service__content, .pkt-header-service__user {
-    column-gap: 2rem;
+@supports not (container-type: inline-size) {
+  @media screen and (min-width: 80rem) {
+    .pkt-header-service__logo-area, .pkt-header-service__content, .pkt-header-service__user {
+      column-gap: 2rem;
+    }
   }
 }
-@container header-service (min-width: 80rem) {
-  .pkt-header-service__logo-area, .pkt-header-service__content, .pkt-header-service__user {
-    column-gap: 2rem;
+@supports (container-type: inline-size) {
+  @container header-service (min-width: 80rem) {
+    .pkt-header-service__logo-area, .pkt-header-service__content, .pkt-header-service__user {
+      column-gap: 2rem;
+    }
   }
 }
 .pkt-header-service__logo-area {
@@ -2804,24 +2949,32 @@ pkt-fileupload__queue-display__item--in-progress .pkt-fileupload__queue-display_
   display: inline-flex;
   padding-left: 0.5rem;
 }
-@media screen and (min-width: 48rem) {
-  .pkt-header-service__logo-area {
-    padding-left: 1rem;
+@supports not (container-type: inline-size) {
+  @media screen and (min-width: 48rem) {
+    .pkt-header-service__logo-area {
+      padding-left: 1rem;
+    }
   }
 }
-@container header-service (min-width: 48rem) {
-  .pkt-header-service__logo-area {
-    padding-left: 1rem;
+@supports (container-type: inline-size) {
+  @container header-service (min-width: 48rem) {
+    .pkt-header-service__logo-area {
+      padding-left: 1rem;
+    }
   }
 }
-@media screen and (min-width: 80rem) {
-  .pkt-header-service__logo-area {
-    padding-left: 2rem;
+@supports not (container-type: inline-size) {
+  @media screen and (min-width: 80rem) {
+    .pkt-header-service__logo-area {
+      padding-left: 2rem;
+    }
   }
 }
-@container header-service (min-width: 80rem) {
-  .pkt-header-service__logo-area {
-    padding-left: 2rem;
+@supports (container-type: inline-size) {
+  @container header-service (min-width: 80rem) {
+    .pkt-header-service__logo-area {
+      padding-left: 2rem;
+    }
   }
 }
 .pkt-header-service__content, .pkt-header-service__user {
@@ -2848,14 +3001,18 @@ pkt-fileupload__queue-display__item--in-progress .pkt-fileupload__queue-display_
   justify-self: end;
   padding-right: 1rem;
 }
-@media screen and (min-width: 80rem) {
-  .pkt-header-service__user {
-    padding-right: 2rem;
+@supports not (container-type: inline-size) {
+  @media screen and (min-width: 80rem) {
+    .pkt-header-service__user {
+      padding-right: 2rem;
+    }
   }
 }
-@container header-service (min-width: 80rem) {
-  .pkt-header-service__user {
-    padding-right: 2rem;
+@supports (container-type: inline-size) {
+  @container header-service (min-width: 80rem) {
+    .pkt-header-service__user {
+      padding-right: 2rem;
+    }
   }
 }
 .pkt-header-service__logo {
@@ -5571,7 +5728,7 @@ 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.14/icons/chevron-thin-down.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/16.15/icons/chevron-thin-down.svg);
   background-image: var(--svg);
   background-repeat: no-repeat;
   background-position: right 0.7rem top 50%;