@oslokommune/punkt-css 16.14.0 → 16.15.0

package/CHANGELOG.md

@@ -5,6 +5,23 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
 
 ---
 
+## [16.15.0](https://github.com/oslokommune/punkt/compare/16.14.0...16.15.0) (2026-05-11)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+Ingen
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
 ## [16.14.0](https://github.com/oslokommune/punkt/compare/16.13.3...16.14.0) (2026-05-08)
 
 ### ⚠ BREAKING CHANGES

package/dist/css/components/fileupload.css

@@ -1,7 +1,7 @@
 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],
@@ -16,16 +16,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,
@@ -47,11 +53,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);
@@ -200,6 +206,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 {
@@ -220,15 +228,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;
@@ -237,21 +245,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%;
@@ -267,13 +275,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 {
@@ -293,40 +294,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 {
@@ -405,7 +399,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;
@@ -422,8 +415,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;
@@ -432,7 +431,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;
@@ -518,32 +517,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,
@@ -565,10 +571,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 {
@@ -612,17 +623,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 {
@@ -660,23 +660,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;
@@ -711,23 +711,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;
+  }
+  99% {
+    width: 1.2em;
   }
-  .pkt-fileupload__queue-display__item__title {
-    -webkit-line-clamp: 2;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
+}
+@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%;
 }
@@ -745,23 +784,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;
@@ -769,22 +817,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);
 }
 
@@ -793,61 +864,75 @@ 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;
 }