@oslokommune/punkt-css 16.13.3 → 16.15.0

package/dist/scss/abstracts/mixins/_container-queries.scss

@@ -17,14 +17,16 @@
 // @param $min-width - The minimum width threshold (in rem or other CSS units)
 
 @mixin cq($container-name, $min-width) {
-  // Media query fallback for browsers without container query support
-  @media screen and (min-width: $min-width) {
-    @content;
+  @supports not (container-type: inline-size) {
+    @media screen and (min-width: $min-width) {
+      @content;
+    }
   }
 
-  // Container query for modern browsers (overrides media query when supported)
-  @container #{$container-name} (min-width: #{$min-width}) {
-    @content;
+  @supports (container-type: inline-size) {
+    @container #{$container-name} (min-width: #{$min-width}) {
+      @content;
+    }
   }
 }
 

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

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

package/dist/scss/components/_combobox.scss

@@ -203,3 +203,7 @@ pkt-combobox,
     margin-top: $-box-separator;
   }
 }
+
+.pkt-inputwrapper:not([data-navtype='pointer']) .pkt-combobox__input:focus-within {
+  outline: 4px solid var(--pkt-color-border-states-focus);
+}

package/dist/scss/components/_fileupload.scss

@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '../abstracts/variables';
 @use '../abstracts/mixins/breakpoints' as *;
+@use '../abstracts/mixins/container-queries' as *;
 @use '../abstracts/mixins/typography';
 
 $-module-name: 'pkt-fileupload';
@@ -8,7 +9,7 @@ $-module-name: 'pkt-fileupload';
 pkt-fileupload,
 .pkt-fileupload {
   display: block;
-  width: fit-content;
+  width: min(100%, 31rem);
   --fg-color: var(--pkt-color-text-body-default);
 
   // Visually hide file input but keep it accessible for screen readers
@@ -28,7 +29,8 @@ pkt-fileupload,
   // COMPONENT MODIFIERS
   // ============================================
 
-  &--full-width {
+  &--full-width,
+  &[fullwidth] {
     width: 100%;
 
     .pkt-fileupload__drop-zone,
@@ -58,7 +60,7 @@ pkt-fileupload,
     }
 
     p,
-    labe,
+    label,
     button,
     input[type='text'] {
       color: var(--pkt-color-text-action-disabled);
@@ -201,6 +203,9 @@ pkt-fileupload,
     margin-bottom: 1rem;
     row-gap: map.get(variables.$spacing, 'size-8');
 
+    container-type: inline-size;
+    container-name: queue-item;
+
     &__item__rename-input {
       // Bruker <input>, og ikke <PktInput> for å ikke måtte resette masse stiler fra PktInput. Så må settes manuelt.
       border: 2px solid var(--pkt-color-input-border-normal);
@@ -223,17 +228,14 @@ pkt-fileupload,
 
     // Thumbnail grid layout (when thumbnails are present)
     // In-progress and error items are always full width (not in grid)
-    // TODO: Find a fallback for browsers that don't support :has()
-    // TODO: pakk den inn i en :is slik at filen ikke brekkes
-    // TODO: husk å sjekke med browserstack, hvordan stilene brekker for thumbnail viewet.
-    &:has(.pkt-fileupload__queue-display__item__thumbnail) {
+    &:is(:has(.pkt-fileupload__queue-display__item__thumbnail)) {
       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) {
+      .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;
@@ -280,12 +282,6 @@ pkt-fileupload,
       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 minmax(0, 1fr) auto auto;
-      }
-
       // ----------------------------------------
       // Queue Item Elements
       // ----------------------------------------
@@ -304,35 +300,30 @@ pkt-fileupload,
         grid-row: 1;
         min-width: 0;
         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;
+        display: flex;
+        align-items: baseline;
+        flex-wrap: nowrap;
+        overflow: hidden;
       }
 
       &__actions {
-        grid-column: 1/3;
+        grid-column: 1/-1;
         grid-row: 2;
         align-self: center;
         justify-self: flex-start;
         display: flex;
         gap: 1rem;
-
-        @include bp('tablet-big-up') {
-          justify-self: end;
-          padding-left: 1rem;
-          grid-column: 4;
-          grid-row: 1;
-        }
+        flex-wrap: wrap;
       }
 
       &__filesize {
-        @include typography.get-text('pkt-txt-12');
+        @include typography.get-text('pkt-txt-14-light');
         color: var(--pkt-color-text-placeholder);
-        grid-column: 3;
-        grid-row: 1;
+        flex: 0 0 auto;
+        white-space: nowrap;
+        padding-left: 0.5rem;
       }
 
       &__cancel-button {
@@ -402,7 +393,6 @@ pkt-fileupload,
 
       &__operation-content {
         grid-column: 1 / -1;
-        grid-row: 2;
         padding: 0.75rem 1rem;
         background: var(--pkt-color-surface-default-gray);
         margin-top: 0.5rem;
@@ -418,15 +408,23 @@ pkt-fileupload,
         grid-template-columns: auto 1fr;
         align-items: flex-start;
         gap: 0.5rem;
+
+        .pkt-btn {
+          grid-row: 3;
+        }
       }
 
       &__comment-label {
+        grid-column: 1/-1;
+
+        grid-row: 1;
+
         @include typography.get-text('pkt-txt-16-medium');
       }
 
       &__comment-input {
         grid-column: 1/-1;
-        grid-row: 1;
+        grid-row: 2;
         width: 100%;
         font: inherit;
         @include typography.get-text('pkt-txt-14');
@@ -503,16 +501,24 @@ pkt-fileupload,
       &__thumbnail {
         min-width: 0;
 
-        &__image-wrapper {
+        // Same element as React: .thumbnail__image-wrapper and .pkt-btn on one <button>
+        &__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-btn__text {
+            display: block;
+            width: 100%;
+            line-height: 0;
+          }
+
           img {
             display: block;
             width: 100%;
@@ -546,10 +552,15 @@ pkt-fileupload,
         &__title {
           @include typography.get-text('pkt-txt-14');
           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; // Required for text-overflow to work in flex containers
+          overflow-wrap: anywhere;
+          word-break: break-word;
+          -webkit-line-clamp: 2;
+          line-clamp: 2;
         }
 
         &--fallback {
@@ -592,13 +603,6 @@ pkt-fileupload,
           margin: 0;
         }
 
-        .pkt-fileupload__queue-display__item__filesize {
-          @include typography.get-text('pkt-txt-12-medium');
-          color: var(--pkt-color-text-subtle);
-          grid-column: 1 / 3;
-          grid-row: 3;
-        }
-
         .pkt-fileupload__queue-display__item__cancel-button {
           grid-column: 3;
           grid-row: 1;
@@ -632,7 +636,7 @@ pkt-fileupload,
         }
 
         // Error state with progress bar (determinate upload that failed)
-        &:has(.pkt-fileupload__queue-display__item__progress--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;
 
@@ -677,28 +681,69 @@ pkt-fileupload,
           @include typography.get-text('pkt-txt-12');
           grid-column: 2;
           grid-row: 2;
+
+          &::after {
+            content: '...';
+            display: inline-block;
+            overflow: hidden;
+            vertical-align: baseline;
+            width: 0;
+            animation: pkt-fileupload-loading-dots 1.2s steps(4, end) infinite;
+          }
         }
       }
     }
   }
 }
 
-.pkt-fileupload__queue-display__item {
-  container-type: inline-size;
+@keyframes pkt-fileupload-loading-dots {
+  0%,
+  100% {
+    width: 0;
+  }
+  33% {
+    width: 0.4em;
+  }
+  66% {
+    width: 0.8em;
+  }
+  99% {
+    width: 1.2em;
+  }
 }
 
-@container (max-width: 560px) {
-  .pkt-fileupload__queue-display__item__actions {
-    flex-direction: column;
-    gap: 0.5rem;
+@media (prefers-reduced-motion: reduce) {
+  .pkt-fileupload__queue-display__item__loading-text::after {
+    animation: none;
+    width: 1.2em; // show the three dots at rest rather than stepping
   }
+}
 
-  .pkt-fileupload__queue-display__item__title {
-    -webkit-line-clamp: 2;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-  }
+// Middle-truncation for long filenames — head shrinks, tail and filesize stay fixed.
+.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;
 }
 
 // ============================================
@@ -727,71 +772,98 @@ pkt-fileupload,
 // ============================================
 // IMAGE PREVIEW MODAL
 // ============================================
+// React: `className` is merged onto <dialog class="pkt-modal … pkt-fileupload__image-preview-modal">`.
+// Elements: the same class lives on <pkt-modal>, dialog is only `.pkt-modal`.
+// Use both selector forms so lightbox sizing and header/content overrides apply everywhere.
 
 .pkt-fileupload__image-preview-modal {
-  // Reset padding from modal
+  // Reset padding from modal (docs / legacy)
   .pkt-contents {
     padding: 0;
   }
+}
 
-  // ============================================
-  // MODAL OVERRIDES to make it look like a lightbox!
-  // TODO: When we get an actual PktLightBox component, we can remove these overrides.
-  // For now, we base us on the PktModal component so we maintain the functionality and only override the styles.
-  // ============================================
+// ============================================
+// MODAL OVERRIDES to make it look like a lightbox!
+// TODO: When we get an actual PktLightBox component, we can remove these overrides.
+// ============================================
 
-  .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 {
+  // Shrink-wrap to content; beat `.pkt-modal--medium { width: … }` and full-viewport dialog defaults.
+  box-sizing: border-box;
+  width: fit-content;
+  max-width: min(92vw, 56rem);
+  max-height: min(92vh, 56rem);
+  height: auto;
+  margin: auto;
+
+  // Let the body row shrink so tall images cannot push the counter below the viewport.
+  .pkt-modal__wrapper {
+    max-height: min(92vh, 56rem);
+    min-height: 0;
+    grid-template-rows: auto minmax(0, 1fr);
+  }
 
-    .pkt-modal {
-      &__wrapper {
-        max-height: 100%;
+  .pkt-modal__container {
+    min-height: 0;
+  }
 
-        .pkt-modal__content {
-          padding: 0;
-        }
-      }
+  .pkt-modal__header {
+    text-align: left;
+  }
 
-      &__header {
-        text-align: left;
-      }
+  .pkt-modal__headingText {
+    line-height: 2rem;
+    padding: 1rem 0 0 1.5rem;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    max-width: calc(100% - 3rem);
+    background-color: transparent;
+    color: var(--pkt-color-text-body-default);
+  }
 
-      &__headingText {
-        line-height: 2rem; // sattt til 34px.
-        padding: 1rem 0 0 1.5rem;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        max-width: calc(100% - 3rem); // Leave space for close button
-        background-color: transparent;
-        color: var(--pkt-color-text-body-light);
-      }
+  .pkt-modal__container {
+    padding-top: 0;
+    background-color: transparent;
+  }
 
-      &__container {
-        padding-top: 0;
-        background-color: transparent;
-      }
+  .pkt-modal__content {
+    padding: 0 map.get(variables.$spacing, 'size-16') map.get(variables.$spacing, 'size-16');
+    // Strip scroll-hint gradients from `_modal.scss` so the image and counter stay clear.
+    background: var(--pkt-color-surface-default);
+    background-image: none;
+    box-shadow: none;
+    // Rejoin the modal flex/grid chain: visible overflow lets intrinsic image height ignore the viewport cap.
+    min-height: 0;
+    overflow: auto;
+    overscroll-behavior: contain;
+
+    // Stretch preview so inner grid `1fr` gets a real height and the image can shrink (light DOM + React).
+    .pkt-fileupload__image-preview {
+      flex: 1 1 auto;
+      min-height: 0;
+      align-self: stretch;
+      width: 100%;
+    }
+  }
 
-      &__closeButton {
-        background-color: transparent;
-        .pkt-btn {
-          color: var(--pkt-color-text-body-light);
+  .pkt-modal__closeButton {
+    background-color: transparent;
 
-          &:hover,
-          &:focus-visible {
-            color: var(--pkt-color-warm-blue-1000);
-          }
-        }
+    .pkt-btn {
+      color: var(--pkt-color-text-body-default);
+
+      &:hover,
+      &:focus-visible {
+        color: var(--pkt-color-text-action-hover);
       }
     }
+  }
 
-    &::backdrop {
-      background-color: rgba(0, 0, 0, 0.85);
-    }
+  &::backdrop {
+    background-color: rgba(0, 0, 0, 0.85);
   }
 }
 
@@ -800,69 +872,84 @@ pkt-fileupload,
   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 .';
+  // First row takes remaining space but may shrink (tall portraits); second row keeps the counter on-screen.
+  grid-template-rows: minmax(0, 1fr) auto;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
+  min-height: 0;
+  // Fallback when host layout does not pass a height down (extra safety vs. huge intrinsic size).
+  max-height: min(calc(92vh - 6rem), 56rem);
 
   &__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;
   }
 
   &__image {
     max-width: 100%;
-    max-height: fit-content;
+    max-height: 100%;
+    width: auto;
+    height: auto;
     object-fit: contain;
   }
 
   &__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-button:hover,
-    .pkt-button:focus-visible {
-      background-color: var(--pkt-color-text-action-hover);
-    }
-
     &--prev {
-      grid-area: prev;
+      grid-column: 1;
+      grid-row: 1;
       margin-left: 0.5rem;
     }
+
     &--next {
-      grid-area: next;
+      grid-column: 3;
+      grid-row: 1;
       margin-right: 0.5rem;
     }
 
-    .pkt-icon {
-      width: 24px;
-      height: 24px;
+    // Same element as React: nav BEM + `.pkt-btn--medium` — round hit target; skin from `.pkt-btn--secondary`.
+    &.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);
 
-      &:hover,
-      &:focus-visible svg {
-        --fg-color: var(--pkt-color-text-body-light);
+      .pkt-btn__icon,
+      .pkt-icon {
+        width: 1.5rem;
+        height: 1.5rem;
       }
     }
   }
 
   &__counter {
     @include typography.get-text('pkt-txt-14-medium');
-    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;
   }
 }

package/dist/scss/elements/_input.scss

@@ -99,18 +99,22 @@ pkt-select {
     border-color: var(--pkt-color-input-border-hover);
   }
 
+  // Rekkefølge er viktig
+  &:focus {
+    outline: none;
+    border-color: var(--pkt-color-input-border-active);
+  }
+
   &:focus-visible,
   &.pkt-input__textinput--focus {
-    box-shadow: 0 0 0 2px var(--pkt-color-input-border-active);
+    outline: 2px solid var(--pkt-color-input-border-active);
+    outline-offset: 0;
     border-color: var(--pkt-color-input-border-active);
-    //outline: 4px solid var(--pkt-color-border-states-focus);
-    // TODO: Hva skal vi gjøre her egentlig? Denne fjernet vi for årevis siden men kanskje vi skal ha den tilbake?
   }
 
-  &:focus {
-    outline: none;
-    box-shadow: 0 0 0 2px var(--pkt-color-input-border-active);
-    border-color: var(--pkt-color-input-border-active);
+  :is(.pkt-inputwrapper, .pkt-searchinput):not([data-navtype='pointer']) &:focus-visible {
+    outline: 4px solid var(--pkt-color-border-states-focus);
+    outline-offset: 0;
   }
 
   &:disabled,
@@ -256,6 +260,14 @@ pkt-select {
         border-color: var(--pkt-color-input-border-active);
       }
     }
+
+    :is(.pkt-inputwrapper, .pkt-searchinput):not([data-navtype='pointer']) &:focus-within {
+      outline: 4px solid var(--pkt-color-border-states-focus);
+
+      .pkt-input:focus-visible {
+        outline: none;
+      }
+    }
   }
 
   &__counter {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-css",
-  "version": "16.13.3",
+  "version": "16.15.0",
   "description": "CSS-rammeverket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -60,5 +60,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "0a14763e4a1d49a5c8dccf51dc0dfc08a6d05cb1"
+  "gitHead": "5147b31531bab9ff64963a1f091a717bb93d35cf"
 }