@oslokommune/punkt-css 15.3.1 → 15.4.2

package/dist/css/pkt-docs.css

@@ -14410,7 +14410,7 @@ a:active, a.pkt-link--active,
 .pkt-link--external::after {
   display: inline-block;
   content: " ";
-  --svg: url(https://punkt-cdn.oslo.kommune.no/15.3/icons/new-window-small.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/15.4/icons/new-window-small.svg);
   background-image: var(--svg);
   background-repeat: no-repeat;
   background-size: 18px 18px;
@@ -18452,7 +18452,7 @@ div.pkt-btn:not([data-disabled]):active, .pkt-btn:enabled:active, .pkt-btn:activ
   outline-color: var(--pkt-color-input-border-hover);
 }
 .pkt-input-check__input-checkbox:indeterminate[type=checkbox]:not([role=switch]) {
-  --svg: url(https://punkt-cdn.oslo.kommune.no/15.3/icons/minus-sign.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/15.4/icons/minus-sign.svg);
   position: relative;
   background-color: var(--pkt-color-input-border-normal);
 }
@@ -18478,7 +18478,7 @@ div.pkt-btn:not([data-disabled]):active, .pkt-btn:enabled:active, .pkt-btn:activ
   filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(271deg) brightness(105%) contrast(101%);
 }
 .pkt-input-check__input-checkbox:checked[type=checkbox] {
-  --svg: url(https://punkt-cdn.oslo.kommune.no/15.3/icons/check-medium.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/15.4/icons/check-medium.svg);
   position: relative;
   background-color: var(--pkt-color-input-border-normal);
 }
@@ -18536,7 +18536,7 @@ div.pkt-btn:not([data-disabled]):active, .pkt-btn:enabled:active, .pkt-btn:activ
   cursor: not-allowed;
 }
 .pkt-input-check__input-checkbox:disabled[type=checkbox][role=switch]:checked:after {
-  --svg: url(https://punkt-cdn.oslo.kommune.no/15.3/icons/check-medium.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/15.4/icons/check-medium.svg);
   --pkt-color-input-check-border: var(--pkt-color-input-border-normal);
   filter: grayscale(100%) brightness(400%);
 }
@@ -18754,7 +18754,7 @@ pkt-select {
 }
 .pkt-input:is(select):not([multiple]), .pkt-textinput__input:is(select):not([multiple]), .pkt-select select:is(select):not([multiple]),
 .pkt-select: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%;
@@ -20878,6 +20878,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) {
@@ -20913,17 +20914,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,
@@ -20946,6 +20947,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;
 }
@@ -21219,6 +21222,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;
@@ -21354,6 +21364,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;
 }
@@ -21419,7 +21452,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;
@@ -23854,6 +23887,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);
@@ -23869,9 +23905,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;
@@ -23879,6 +23912,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;