@fremtind/jokul 5.2.3 → 6.0.0-next.0

package/styles/components/file/file.css

@@ -4,69 +4,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;
@@ -79,50 +47,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);

package/styles/components/file/file.min.css

@@ -1 +1 @@
-@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-aspect-ratio:1;--jkl-file-gap:var(--jkl-unit-10) var(--jkl-unit-20);--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;--bg:#0000;--transition-time:var(--jkl-motion-timing-expressive)}.jkl-file__content{align-items:center;background:var(--bg);border:var(--border);border-radius:var(--border-radius);color:var(--text-color);display:grid;gap:var(--jkl-file-gap);grid-template-areas:"image text button";grid-template-columns:var(--jkl-file-thumbnail-width) 1fr var(--jkl-file-button-width);height:-webkit-fit-content;height:fit-content;padding:var(--jkl-file-padding);transition-duration:var(--jkl-motion-timing-snappy);transition-property:background-color,border-color,color;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-file__content__name{font:var(--jkl-text-style-paragraph-small);grid-area:text;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{align-items:center;anchor-name:--thumb;anchor-scope:all;aspect-ratio:var(--jkl-file-thumbnail-aspect-ratio);background:var(--jkl-color-background-page);border-radius:2px;container-type:inline-size;display:flex;grid-area:image;justify-content:center;max-height:var(--jkl-file-thumbnail-max-height);object-fit:cover;outline:1px solid color-mix(in srgb,currentColor 3%,#0000);overflow:hidden;position:relative;width:100%}.jkl-file__content__thumbnail:after,.jkl-file__content__thumbnail:before{position:absolute;z-index:1}.jkl-file__content__thumbnail:after{animation:spin 5s linear infinite forwards;aspect-ratio:1;background:var(--text-color);border-radius:1px;content:""/"Laster opp";height:25%;position-anchor:--thumb;position-area:center;scale:0;transition:display var(--transition-time) allow-discrete ease-in,scale var(--transition-time) ease-in}@starting-style{.jkl-file__content__thumbnail:after{scale:0}}.jkl-file__content__thumbnail img{opacity:1;transition:opacity var(--transition-time) ease-in-out}.jkl-file__content__thumbnail img[src]{height:100%;object-fit:cover;width:100%}.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-areas:"image image" "text button";grid-template-columns:1fr var(--jkl-file-button-width);grid-template-rows:var(--jkl-file-thumbnail-max-height) auto}.jkl-file:not([data-state*=loading]) .jkl-file__content__thumbnail:not(:has(img[src])):before{content:attr(data-filetype);font:var(--jkl-text-style-paragraph-small)}.jkl-file[data-state=loading]:not(:has(.jkl-file__support-label)) .jkl-file__content__thumbnail img{opacity:0}.jkl-file[data-state=loading]:not(:has(.jkl-file__support-label)) .jkl-file__content__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)}@keyframes spin{0%{transform:rotate(0turn)}to{transform:rotate(1turn)}}}
+@layer jokul.components{.jkl-file{--jkl-file-padding:var(--jkl-unit-10);--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);--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:var(--jkl-border-radius-s);--bg:#0000;--transition-time:var(--jkl-motion-timing-expressive)}.jkl-file__thumbnail{align-items:center;anchor-name:--thumb;anchor-scope:all;aspect-ratio:var(--jkl-file-thumbnail-aspect-ratio);background:var(--jkl-color-background-page);border-radius:var(--jkl-border-radius-xs);display:flex;flex-shrink:0;height:auto;justify-content:center;max-height:var(--jkl-file-thumbnail-max-height);outline:1px solid color-mix(in srgb,currentColor 3%,#0000);overflow:hidden;position:relative;width:var(--jkl-file-thumbnail-width)}.jkl-file__thumbnail:after{animation:spin 5s linear infinite forwards;aspect-ratio:1;background:var(--text-color);border-radius:1px;content:""/"Laster opp";height:25%;position:absolute;position-anchor:--thumb;position-area:center;scale:0;transition:display var(--transition-time) allow-discrete ease-in,scale var(--transition-time) ease-in;z-index:1}@starting-style{.jkl-file__thumbnail:after{scale:0}}.jkl-file__thumbnail img{opacity:1;transition:opacity var(--transition-time) ease-in-out}.jkl-file__thumbnail img[src]{min-height:100%;min-width:100%;object-fit:cover;object-position:center}.jkl-file__content{background:var(--bg);border:var(--border);border-radius:var(--border-radius);color:var(--text-color);height:-webkit-fit-content;height:fit-content;padding:var(--jkl-file-padding);transition-duration:var(--jkl-motion-timing-snappy);transition-property:background-color,border-color,color;transition-timing-function:var(--jkl-motion-easing-standard)}.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{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/10}.jkl-file:not([data-state*=loading]) .jkl-file__thumbnail:not(:has(img[src])):before{content:attr(data-filetype);font:var(--jkl-text-style-paragraph-small);position:absolute;z-index:1}.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__thumbnail:after{display:block;scale:1}.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)}.jkl-file[data-state=error] .jkl-file__content{border-color:var(--jkl-color-error-border-default)}@keyframes spin{0%{transform:rotate(0turn)}to{transform:rotate(1turn)}}}

package/styles/components/file/file.scss

@@ -3,80 +3,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: #{jkl.$motion-timing-expressive};
 
-        &__content {
-            @include jkl.motion(
-                "standard",
-                "snappy",
-                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;
-
-            &__name {
-                @include jkl.text-style("paragraph-small");
-                grid-area: text;
-                /* stylelint-disable-next-line declaration-property-value-keyword-no-deprecated */
-                word-break: break-word;
-
-                &__size {
-                    word-break: keep-all;
-                }
-            }
-
-            &__delete {
-                aspect-ratio: 1;
-                grid-area: button;
-            }
-
         &__thumbnail {
-            width: 100%;
+            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);
 
-            &::before, &::after {
+            &::after {
                 position: absolute;
                 z-index: 1;
-            }
-
-            &::after {
                 content: "" / "Laster opp";
                 position-anchor: --thumb;
                 position-area: center;
@@ -98,63 +55,93 @@
                 transition:  opacity var(--transition-time) ease-in-out;
 
                 &[src] {
-                    width: 100%;
-                    height: 100%;
+                    min-width: 100%;
+                    min-height: 100%;
                     object-fit: cover;
+                    object-position: center;
                 }
             }
         }
-    }
+
+        &__content {
+            @include jkl.motion(
+                "standard",
+                "snappy",
+                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;
+
+            &:not(:has(.jkl-file__thumbnail)):has(.jkl-file__button) {
+                --jkl-file-padding: 0 var(--jkl-unit-10);
+            }
+        }
+
+        &__info {
+            flex-grow: 999;
+        }
+
+        &__name {
+            /* stylelint-disable-next-line declaration-property-value-keyword-no-deprecated */
+            word-break: break-word;
+        }
+
+        &__size {
+            word-break: keep-all;
+        }
+
+        &__button {
+            aspect-ratio: 1;
+            flex-shrink: 0;
+        }
+
 
         // Card view
         &[class*="card"] {
             --jkl-file-thumbnail-width: 100%;
-            --jkl-file-thumbnail-aspect-ratio: 16/9;
-
-            .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;
         }
 
         // If the file is not an image
         &:not([data-state*="loading"]) {
-            .jkl-file__content__thumbnail:not(:has(img[src]))::before {
+            .jkl-file__thumbnail:not(:has(img[src]))::before {
                 @include jkl.text-style("paragraph-small");
+                position: absolute;
+                z-index: 1;
 
                 content: attr(data-filetype);
             }
         }
 
-    // Loading state
-    &[data-state="loading"]:not(:has(.jkl-file__support-label)) {
-        .jkl-file__content__thumbnail {
-            img {
-                opacity: 0;
-            }
+        // Loading state
+        &[data-state="loading"]:not(:has(.jkl-file__support-label)) {
+            .jkl-file__thumbnail {
+                img {
+                    opacity: 0;
+                }
 
-            &::after {
-                display: block;
-                scale: 1;
+                &::after {
+                    display: block;
+                    scale: 1;
+                }
             }
         }
-    }
 
         // Error state
         &[data-state="error"] {
-            --bg: var(--jkl-color-error-background-container);
-
             &,
             a,
             a:hover,
             button,
             span {
                 --text-color: var(--jkl-color-error-text-default);
-                --link-color: var(--text-color);
-                --jkl-color-border-strong: currentColor;
             }
 
             .jkl-file__content {

package/styles/components/file-input/file-input.css

@@ -5,69 +5,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;
@@ -80,50 +48,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);
@@ -351,22 +340,22 @@
     animation: 2500ms linear infinite;
   }
   .jkl-loader__dot--left {
-    animation-name: jkl-loader-left-spin-u5b1bd9;
+    animation-name: jkl-loader-left-spin-ucgrd6s;
     margin-right: calc(var(--jkl-loader-spacing) * 0.9);
   }
   .jkl-loader__dot--middle {
-    animation-name: jkl-loader-middle-spin-u5b1bde;
+    animation-name: jkl-loader-middle-spin-ucgrd6t;
     margin-right: var(--jkl-loader-spacing);
   }
   .jkl-loader__dot--right {
-    animation-name: jkl-loader-right-spin-u5b1be8;
+    animation-name: jkl-loader-right-spin-ucgrd7a;
   }
   @media screen and (forced-colors: active) {
     .jkl-loader__dot {
       background-color: CanvasText;
     }
   }
-  @keyframes jkl-loader-left-spin-u5b1bd9 {
+  @keyframes jkl-loader-left-spin-ucgrd6s {
     0% {
       transform: rotate(0) scale(0);
     }
@@ -380,7 +369,7 @@
       transform: rotate(180deg) scale(0);
     }
   }
-  @keyframes jkl-loader-middle-spin-u5b1bde {
+  @keyframes jkl-loader-middle-spin-ucgrd6t {
     0% {
       transform: rotate(20deg) scale(0);
     }
@@ -397,7 +386,7 @@
       transform: rotate(200deg) scale(0);
     }
   }
-  @keyframes jkl-loader-right-spin-u5b1be8 {
+  @keyframes jkl-loader-right-spin-ucgrd7a {
     0% {
       transform: rotate(40deg) scale(0);
     }
@@ -437,7 +426,7 @@
   @media screen and (forced-colors: active) {
     .jkl-skeleton-element {
       border: 1px solid CanvasText;
-      animation: 2s ease infinite jkl-blink-u5b1bf2;
+      animation: 2s ease infinite jkl-blink-ucgrd80;
     }
   }
   .jkl-skeleton-input {
@@ -485,10 +474,10 @@
   }
   @media screen and (forced-colors: active) {
     .jkl-skeleton-table {
-      animation: 2s ease-in-out infinite jkl-blink-u5b1bf2;
+      animation: 2s ease-in-out infinite jkl-blink-ucgrd80;
     }
   }
-  @keyframes jkl-blink-u5b1bf2 {
+  @keyframes jkl-blink-ucgrd80 {
     0% {
       opacity: 1;
     }