@oslokommune/punkt-css 15.2.0 → 15.4.0

package/dist/css/pkt-components.css

@@ -1444,6 +1444,7 @@ pkt-fileupload__queue-display:has(.pkt-fileupload__queue-display__item__thumbnai
   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) {
@@ -1479,17 +1480,17 @@ pkt-fileupload__queue-display:has(.pkt-fileupload__queue-display__item__thumbnai
 pkt-fileupload__queue-display__item,
 .pkt-fileupload__queue-display__item {
   display: grid;
-  grid-template-columns: auto 1fr;
+  grid-template-columns: auto minmax(0, 1fr);
   align-items: center;
   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 1fr auto auto;
-    align-items: end;
+    grid-template-columns: auto minmax(0, 1fr) auto auto;
   }
 }
 pkt-fileupload__queue-display__item__icon,
@@ -1512,6 +1513,8 @@ pkt-fileupload__queue-display__item__title,
   max-width: 100%;
   overflow: hidden;
   white-space: normal;
+  overflow-wrap: anywhere;
+  word-break: break-word;
   align-self: center;
   margin: 0;
 }
@@ -1920,6 +1923,29 @@ pkt-fileupload__queue-display__item--in-progress .pkt-fileupload__queue-display_
   grid-row: 2;
 }
 
+.pkt-fileupload__queue-display__item {
+  container-type: inline-size;
+}
+
+@container (max-width: 560px) {
+  .pkt-fileupload__queue-display__item__actions {
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+  .pkt-fileupload__queue-display__item__title {
+    -webkit-line-clamp: 2;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+}
+.pkt-fileupload-wrapper--full-width {
+  width: 100%;
+}
+.pkt-fileupload-wrapper--full-width .pkt-inputwrapper__fieldset {
+  width: 100%;
+  align-items: stretch;
+}
 .pkt-fileupload-wrapper .pkt-inputwrapper__fieldset {
   margin-bottom: 0;
 }
@@ -1985,7 +2011,7 @@ pkt-fileupload__queue-display__item--in-progress .pkt-fileupload__queue-display_
   gap: 1rem;
 }
 .pkt-fileupload__image-preview__content {
-  height: 75vh;
+  min-height: 75vh;
   grid-area: prev-start/prev-start/next-end/next-end;
   display: flex;
   align-items: center;
@@ -4264,11 +4290,12 @@ body.pkt-modal--open {
   .pkt-modal__btn-wrapper {
     display: grid;
     grid-template-columns: 1fr;
-    justify-content: center;
+    justify-items: center;
     align-items: center;
+    gap: 0.5rem;
   }
-  .pkt-modal__btn-wrapper .pkt-btn {
-    justify-content: center;
+  .pkt-modal__btn-wrapper--buttonsFullWidthOnMobile .pkt-btn {
+    width: 100%;
   }
 }
 .pkt-modal--noShadow {
@@ -4419,6 +4446,9 @@ pkt-messagebox {
 .pkt-preview__component--fullwidth > div {
   width: 100%;
 }
+.pkt-preview__component--fullwidth > div > .pkt-fileupload, .pkt-preview__component--fullwidth > div > .pkt-fileupload-wrapper {
+  width: 100%;
+}
 .pkt-preview__component-container {
   position: relative;
   border: 2px solid var(--pkt-color-border-gray);
@@ -4434,9 +4464,6 @@ pkt-messagebox {
     flex: 1 1 0;
     min-width: 0;
   }
-  .pkt-preview__component-container .pkt-preview__component div {
-    justify-self: center;
-  }
   .pkt-preview__component-container .pkt-preview__panel {
     flex: 0 0 auto;
     min-width: 20rem;
@@ -4444,6 +4471,11 @@ pkt-messagebox {
     width: 100%;
   }
 }
+.pkt-preview__component__inner-container {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
 .pkt-preview__panel {
   display: flex;
   flex-direction: column;
@@ -5397,7 +5429,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/15.2/icons/chevron-thin-down.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/15.4/icons/chevron-thin-down.svg);
   background-image: var(--svg);
   background-repeat: no-repeat;
   background-position: right 0.7rem top 50%;