@oslokommune/punkt-css 15.2.0 → 15.4.0

package/dist/scss/abstracts/variables/_index.scss

@@ -6,7 +6,7 @@
 @forward 'spacing';
 
 // Default icon path
-$icon-path: 'https://punkt-cdn.oslo.kommune.no/15.2/icons' !default;
+$icon-path: 'https://punkt-cdn.oslo.kommune.no/15.4/icons' !default;
 
 // Borders
 $border-width: (

package/dist/scss/components/_fileupload.scss

@@ -230,6 +230,7 @@ pkt-fileupload,
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
       gap: 1rem;
+      max-width: 100%;
 
       // Successfully uploaded thumbnails become grid items
       .pkt-fileupload__queue-display__item:has(.pkt-fileupload__queue-display__item__thumbnail) {
@@ -272,15 +273,16 @@ pkt-fileupload,
 
     &__item {
       display: grid;
-      grid-template-columns: auto 1fr;
+      grid-template-columns: auto minmax(0, 1fr);
       align-items: center;
       gap: 0.5rem;
       padding: map.get(variables.$spacing, 'size-16');
       border: 2px solid var(--pkt-color-border-subtle);
 
+      container-type: inline-size;
+
       @include bp('tablet-big-up') {
-        grid-template-columns: auto 1fr auto auto;
-        align-items: end;
+        grid-template-columns: auto minmax(0, 1fr) auto auto;
       }
 
       // ----------------------------------------
@@ -303,6 +305,8 @@ pkt-fileupload,
         max-width: 100%;
         overflow: hidden; // Truncate component clamps internally; this prevents layout overflow
         white-space: normal;
+        overflow-wrap: anywhere;
+        word-break: break-word;
         align-self: center;
         margin: 0;
       }
@@ -672,11 +676,38 @@ pkt-fileupload,
   }
 }
 
+.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;
+  }
+}
+
 // ============================================
 // WRAPPER INTEGRATION (InputWrapper)
 // ============================================
 
 .pkt-fileupload-wrapper {
+  &--full-width {
+    width: 100%;
+
+    .pkt-inputwrapper__fieldset {
+      width: 100%;
+      align-items: stretch;
+    }
+  }
+
   .pkt-inputwrapper__fieldset {
     margin-bottom: 0;
   }
@@ -771,7 +802,7 @@ pkt-fileupload,
   gap: 1rem;
 
   &__content {
-    height: 75vh;
+    min-height: 75vh;
     grid-area: prev-start / prev-start / next-end / next-end;
     display: flex;
     align-items: center;

package/dist/scss/components/_modal.scss

@@ -306,11 +306,14 @@ body.pkt-modal--open {
     &-wrapper {
       display: grid;
       grid-template-columns: 1fr;
-      justify-content: center;
+      justify-items: center;
       align-items: center;
+      gap: map.get(variables.$spacing, 'size-8');
 
-      .pkt-btn {
-        justify-content: center;
+      &--buttonsFullWidthOnMobile {
+        .pkt-btn {
+          width: 100%;
+        }
       }
     }
   }

package/dist/scss/components/_preview.scss

@@ -22,6 +22,10 @@
     &--fullwidth > div {
       width: 100%;
     }
+    &--fullwidth > div > .pkt-fileupload,
+    &--fullwidth > div > .pkt-fileupload-wrapper {
+      width: 100%;
+    }
     &-container {
       position: relative;
       border: 2px solid var(--pkt-color-border-gray);
@@ -33,9 +37,6 @@
         .pkt-preview__component {
           flex: 1 1 0;
           min-width: 0;
-          div {
-            justify-self: center;
-          }
         }
         .pkt-preview__panel {
           flex: 0 0 auto;
@@ -45,6 +46,11 @@
         }
       }
     }
+    &__inner-container {
+      display: flex;
+      justify-content: center;
+      width: 100%;
+    }
   }
   &__panel {
     display: flex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-css",
-  "version": "15.2.0",
+  "version": "15.4.0",
   "description": "CSS-rammeverket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -55,5 +55,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "67c9a3c4ede793c0e6bf1e4611ae29d00cf072ee"
+  "gitHead": "0323bc56dc8636595ea48dd88dd966d363aac371"
 }