@oslokommune/punkt-css 15.3.1 → 15.4.2

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;
 }
@@ -1785,6 +1788,13 @@ pkt-fileupload__queue-display__item__thumbnail__title,
   text-overflow: ellipsis;
   min-width: 0;
 }
+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 {
+  letter-spacing: -0.2px;
+  font-weight: 400;
+  font-size: 0.75rem;
+  line-height: 1.25rem;
+}
 pkt-fileupload__queue-display__item--canceled,
 .pkt-fileupload__queue-display__item--canceled {
   opacity: 0.6;
@@ -1920,6 +1930,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 +2018,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;
@@ -4420,6 +4453,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);
@@ -4435,9 +4471,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;
@@ -4445,6 +4478,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;
@@ -5398,7 +5436,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.3/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%;