@fremtind/jokul 5.2.2 → 6.0.0-next.0

package/styles/components.css

@@ -425,7 +425,7 @@
     display: inline-flex;
   }
   .jkl-form-support-label--error .jkl-form-support-label__icon, .jkl-form-support-label--warning .jkl-form-support-label__icon, .jkl-form-support-label--success .jkl-form-support-label__icon {
-    animation: var(--jkl-motion-timing-lazy) cubic-bezier(0, 0, 0.3, 1) var(--jkl-motion-timing-expressive) jkl-support-icon-entrance-uyv60yu forwards;
+    animation: var(--jkl-motion-timing-lazy) cubic-bezier(0, 0, 0.3, 1) var(--jkl-motion-timing-expressive) jkl-support-icon-entrance-ustvnfd forwards;
   }
   .jkl-form-support-label--sr-only {
     border: 0 !important;
@@ -479,7 +479,7 @@
   .jkl-label:has(+ .jkl-input-group-description) {
     margin-block-end: var(--jkl-spacing-4);
   }
-  @keyframes jkl-support-icon-entrance-uyv60yu {
+  @keyframes jkl-support-icon-entrance-ustvnfd {
     0% {
       margin-right: 0;
       opacity: 0;
@@ -839,22 +839,22 @@
     animation: 2500ms linear infinite;
   }
   .jkl-loader__dot--left {
-    animation-name: jkl-loader-left-spin-uyv60zl;
+    animation-name: jkl-loader-left-spin-ustvng5;
     margin-right: calc(var(--jkl-loader-spacing) * 0.9);
   }
   .jkl-loader__dot--middle {
-    animation-name: jkl-loader-middle-spin-uyv6104;
+    animation-name: jkl-loader-middle-spin-ustvngg;
     margin-right: var(--jkl-loader-spacing);
   }
   .jkl-loader__dot--right {
-    animation-name: jkl-loader-right-spin-uyv610e;
+    animation-name: jkl-loader-right-spin-ustvnh8;
   }
   @media screen and (forced-colors: active) {
     .jkl-loader__dot {
       background-color: CanvasText;
     }
   }
-  @keyframes jkl-loader-left-spin-uyv60zl {
+  @keyframes jkl-loader-left-spin-ustvng5 {
     0% {
       transform: rotate(0) scale(0);
     }
@@ -868,7 +868,7 @@
       transform: rotate(180deg) scale(0);
     }
   }
-  @keyframes jkl-loader-middle-spin-uyv6104 {
+  @keyframes jkl-loader-middle-spin-ustvngg {
     0% {
       transform: rotate(20deg) scale(0);
     }
@@ -885,7 +885,7 @@
       transform: rotate(200deg) scale(0);
     }
   }
-  @keyframes jkl-loader-right-spin-uyv610e {
+  @keyframes jkl-loader-right-spin-ustvnh8 {
     0% {
       transform: rotate(40deg) scale(0);
     }
@@ -925,7 +925,7 @@
   @media screen and (forced-colors: active) {
     .jkl-skeleton-element {
       border: 1px solid CanvasText;
-      animation: 2s ease infinite jkl-blink-uyv6113;
+      animation: 2s ease infinite jkl-blink-ustvnho;
     }
   }
   .jkl-skeleton-input {
@@ -973,10 +973,10 @@
   }
   @media screen and (forced-colors: active) {
     .jkl-skeleton-table {
-      animation: 2s ease-in-out infinite jkl-blink-uyv6113;
+      animation: 2s ease-in-out infinite jkl-blink-ustvnho;
     }
   }
-  @keyframes jkl-blink-uyv6113 {
+  @keyframes jkl-blink-ustvnho {
     0% {
       opacity: 1;
     }
@@ -2140,10 +2140,10 @@
     }
   }
   .jkl-countdown__tracker {
-    animation: jkl-downcount-uyv6122 var(--duration) linear forwards;
+    animation: jkl-downcount-ustvnie var(--duration) linear forwards;
     animation-play-state: var(--play-state, running);
   }
-  @keyframes jkl-downcount-uyv6122 {
+  @keyframes jkl-downcount-ustvnie {
     from {
       width: 100%;
     }
@@ -2644,12 +2644,12 @@
     font: var(--jkl-text-style-paragraph-small);
   }
   .jkl-feedback__fade-in {
-    animation: jkl-show-uyv6131 0.25s ease-out;
+    animation: jkl-show-ustvnj8 0.25s ease-out;
   }
   .jkl-feedback__buttons {
     display: flex;
   }
-  @keyframes jkl-show-uyv6131 {
+  @keyframes jkl-show-ustvnj8 {
     from {
       transform: translate3d(0, 0.5rem, 0);
       opacity: 0;
@@ -2861,7 +2861,7 @@
     --icon-color: var(--jkl-color-success-background-contrast);
   }
   .jkl-message--dismissed {
-    animation: jkl-dismiss-uyv613n var(--jkl-motion-timing-lazy) ease-in-out forwards;
+    animation: jkl-dismiss-ustvnk7 var(--jkl-motion-timing-lazy) ease-in-out forwards;
     transition: visibility 0ms var(--jkl-motion-timing-lazy);
     visibility: hidden;
   }
@@ -2883,7 +2883,7 @@
   .jkl-form-error-message {
     padding-bottom: var(--jkl-unit-50);
   }
-  @keyframes jkl-dismiss-uyv613n {
+  @keyframes jkl-dismiss-ustvnk7 {
     from {
       opacity: 1;
       transform: translate3d(0, 0, 0);
@@ -3279,69 +3279,37 @@
 @layer jokul.components {
   .jkl-file {
     --jkl-file-padding: var(--jkl-unit-10);
-    --jkl-file-thumbnail-width: var(--jkl-unit-70);
-    --jkl-file-thumbnail-max-height: var(--jkl-unit-90);
+    --jkl-file-thumbnail-max-height: var(--jkl-unit-210);
+    --jkl-file-thumbnail-width: var(--jkl-unit-60);
     --jkl-file-thumbnail-aspect-ratio: 1;
-    --jkl-file-gap: var(--jkl-unit-10) var(--jkl-unit-20);
+    --jkl-file-gap: var(--jkl-unit-10);
     --jkl-file-button-width: var(--jkl-unit-50);
     --text-color: var(--jkl-color-text-default);
     --border: 1px solid var(--jkl-color-border-subdued);
-    --border-radius: 2px;
+    --border-radius: var(--jkl-border-radius-s);
     --bg: transparent;
     --transition-time: var(--jkl-motion-timing-expressive);
   }
-  .jkl-file__content {
-    transition-timing-function: var(--jkl-motion-easing-standard);
-    transition-duration: var(--jkl-motion-timing-snappy);
-    transition-property: background-color, border-color, color;
-    color: var(--text-color);
-    padding: var(--jkl-file-padding);
-    border: var(--border);
-    border-radius: var(--border-radius);
-    background: var(--bg);
-    display: grid;
-    grid-template-columns: var(--jkl-file-thumbnail-width) 1fr var(--jkl-file-button-width);
-    grid-template-areas: "image text button";
-    gap: var(--jkl-file-gap);
-    align-items: center;
-    height: fit-content;
-  }
-  .jkl-file__content__name {
-    font: var(--jkl-text-style-paragraph-small);
-    grid-area: text;
-    /* stylelint-disable-next-line declaration-property-value-keyword-no-deprecated */
-    word-break: break-word;
-  }
-  .jkl-file__content__name__size {
-    word-break: keep-all;
-  }
-  .jkl-file__content__delete {
-    aspect-ratio: 1;
-    grid-area: button;
-  }
-  .jkl-file__content__thumbnail {
-    width: 100%;
+  .jkl-file__thumbnail {
+    flex-shrink: 0;
     aspect-ratio: var(--jkl-file-thumbnail-aspect-ratio);
-    object-fit: cover;
+    width: var(--jkl-file-thumbnail-width);
+    height: auto;
     max-height: var(--jkl-file-thumbnail-max-height);
-    grid-area: image;
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     background: var(--jkl-color-background-page);
-    border-radius: 2px;
+    border-radius: var(--jkl-border-radius-xs);
     overflow: hidden;
-    container-type: inline-size;
     anchor-name: --thumb;
     anchor-scope: all;
     outline: 1px solid color-mix(in srgb, currentColor 3%, transparent);
   }
-  .jkl-file__content__thumbnail::before, .jkl-file__content__thumbnail::after {
+  .jkl-file__thumbnail::after {
     position: absolute;
     z-index: 1;
-  }
-  .jkl-file__content__thumbnail::after {
     content: ""/"Laster opp";
     position-anchor: --thumb;
     position-area: center;
@@ -3354,50 +3322,71 @@
     transition: display var(--transition-time) allow-discrete ease-in, scale var(--transition-time) ease-in;
   }
   @starting-style {
-    .jkl-file__content__thumbnail::after {
+    .jkl-file__thumbnail::after {
       scale: 0;
     }
   }
-  .jkl-file__content__thumbnail img {
+  .jkl-file__thumbnail img {
     opacity: 1;
     transition: opacity var(--transition-time) ease-in-out;
   }
-  .jkl-file__content__thumbnail img[src] {
-    width: 100%;
-    height: 100%;
+  .jkl-file__thumbnail img[src] {
+    min-width: 100%;
+    min-height: 100%;
     object-fit: cover;
+    object-position: center;
+  }
+  .jkl-file__content {
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-snappy);
+    transition-property: background-color, border-color, color;
+    color: var(--text-color);
+    padding: var(--jkl-file-padding);
+    border: var(--border);
+    border-radius: var(--border-radius);
+    background: var(--bg);
+    height: fit-content;
+  }
+  .jkl-file__content:not(:has(.jkl-file__thumbnail)):has(.jkl-file__button) {
+    --jkl-file-padding: 0 var(--jkl-unit-10);
+  }
+  .jkl-file__info {
+    flex-grow: 999;
+  }
+  .jkl-file__name {
+    /* stylelint-disable-next-line declaration-property-value-keyword-no-deprecated */
+    word-break: break-word;
+  }
+  .jkl-file__size {
+    word-break: keep-all;
+  }
+  .jkl-file__button {
+    aspect-ratio: 1;
+    flex-shrink: 0;
   }
   .jkl-file[class*=card] {
     --jkl-file-thumbnail-width: 100%;
-    --jkl-file-thumbnail-aspect-ratio: 16/9;
-  }
-  .jkl-file[class*=card] .jkl-file__content {
-    grid-template-columns: 1fr var(--jkl-file-button-width);
-    grid-template-rows: var(--jkl-file-thumbnail-max-height) auto;
-    grid-template-areas: "image image" "text button";
+    --jkl-file-thumbnail-aspect-ratio: 16/10;
   }
-  .jkl-file:not([data-state*=loading]) .jkl-file__content__thumbnail:not(:has(img[src]))::before {
+  .jkl-file:not([data-state*=loading]) .jkl-file__thumbnail:not(:has(img[src]))::before {
     font: var(--jkl-text-style-paragraph-small);
+    position: absolute;
+    z-index: 1;
     content: attr(data-filetype);
   }
-  .jkl-file[data-state=loading]:not(:has(.jkl-file__support-label)) .jkl-file__content__thumbnail img {
+  .jkl-file[data-state=loading]:not(:has(.jkl-file__support-label)) .jkl-file__thumbnail img {
     opacity: 0;
   }
-  .jkl-file[data-state=loading]:not(:has(.jkl-file__support-label)) .jkl-file__content__thumbnail::after {
+  .jkl-file[data-state=loading]:not(:has(.jkl-file__support-label)) .jkl-file__thumbnail::after {
     display: block;
     scale: 1;
   }
-  .jkl-file[data-state=error] {
-    --bg: var(--jkl-color-error-background-container);
-  }
   .jkl-file[data-state=error],
   .jkl-file[data-state=error] a,
   .jkl-file[data-state=error] a:hover,
   .jkl-file[data-state=error] button,
   .jkl-file[data-state=error] span {
     --text-color: var(--jkl-color-error-text-default);
-    --link-color: var(--text-color);
-    --jkl-color-border-strong: currentColor;
   }
   .jkl-file[data-state=error] .jkl-file__content {
     border-color: var(--jkl-color-error-border-default);
@@ -4483,7 +4472,7 @@
     transition-timing-function: var(--jkl-motion-easing-standard);
     transition-duration: var(--jkl-motion-timing-productive);
   }
-  @keyframes jkl-downcount-uyv614f {
+  @keyframes jkl-downcount-ustvnku {
     from {
       width: 100%;
     }
@@ -4608,6 +4597,9 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
   width: 100%;
   font: var(--jkl-text-style-text-medium);
 }
+.jkl-search .jkl-input-group {
+  display: contents;
+}
 .jkl-search input[type=search] {
   appearance: none;
   padding: 0;
@@ -4664,6 +4656,11 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
 .jkl-search .input-wrapper:has(.clear-button) {
   grid-template-columns: 1.3em 1fr 1.3em;
 }
+.jkl-search .input-wrapper:has(input:focus-visible) {
+  outline: 3px solid var(--jkl-color-border-strong);
+  outline-offset: 3px;
+  background-color: var(--jkl-color-background-container);
+}
 .jkl-search:has(input:not(:valid), input:placeholder-shown) .clear-button {
   display: none;
 }
@@ -4727,6 +4724,11 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
   grid-template-columns: 1fr max-content;
   align-items: end;
 }
+.jkl-search:has(button.jkl-search-submit) .jkl-input-group-description,
+.jkl-search:has(button.jkl-search-submit) .jkl-label,
+.jkl-search:has(button.jkl-search-submit) .input-wrapper {
+  grid-column: 1/2;
+}
 .jkl-search:has(button.jkl-search-submit) .input-wrapper {
   border-inline-end: 0;
   border-top-right-radius: 0;
@@ -4984,7 +4986,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     margin-bottom: 0;
   }
   .jkl-system-message--dismissed {
-    animation: jkl-dismiss-uyv615j var(--jkl-motion-timing-lazy) forwards;
+    animation: jkl-dismiss-ustvnlj var(--jkl-motion-timing-lazy) forwards;
     transition: block var(--jkl-motion-timing-lazy) var(--jkl-motion-timing-lazy);
   }
   .jkl-system-message--info {
@@ -5022,7 +5024,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
       border-width: 4px;
     }
   }
-  @keyframes jkl-dismiss-uyv615j {
+  @keyframes jkl-dismiss-ustvnlj {
     from {
       opacity: 1;
       transform: translateY(0);
@@ -5850,12 +5852,12 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
   }
   .jkl-toast[data-animation=entering],
   .jkl-toast[data-animation=queued] {
-    animation: jkl-entering-uyv6162 var(--jkl-motion-timing-polite) var(--jkl-motion-easing-entrance) forwards;
+    animation: jkl-entering-ustvnmb var(--jkl-motion-timing-polite) var(--jkl-motion-easing-entrance) forwards;
   }
   .jkl-toast[data-animation=exiting] {
-    animation: jkl-exiting-uyv6172 var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards;
+    animation: jkl-exiting-ustvnn5 var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards;
   }
-  @keyframes jkl-entering-uyv6162 {
+  @keyframes jkl-entering-ustvnmb {
     from {
       opacity: 0;
       transform: translate3d(0, 50%, 0);
@@ -5865,7 +5867,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
       transform: translate3d(0, 0, 0);
     }
   }
-  @keyframes jkl-exiting-uyv6172 {
+  @keyframes jkl-exiting-ustvnn5 {
     from {
       opacity: 1;
       transform: translate3d(0, 0, 0);