@fremtind/jokul 0.27.6 → 0.28.0

package/build/es/components/file-input/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../../src/components/file-input/utils.ts"],"sourcesContent":["/**\n * Hjelpefunksjon for å laste opp filer med progress-bar\n *\n * @param {string} url Endepunktet som skal lastes opp til\n * @param {FormData} data FormData med filen som skal lastes opp\n * @param progress Callback som blir kalt med oppdatert progresjon\n * @param {Record<string, string>} headers Eventuelle headers som skal sendes\n * med opplasingen. Her kan du f.eks. sende med CSRF-verdier.\n * @returns {T} Svaret fra endepunktet\n */\nexport async function upload<T>(\n    url: string,\n    data: FormData,\n    progress: (progress: number) => void,\n    headers?: Record<string, string>,\n): Promise<T> {\n    // I skrivende stund er det ikke mulig å hente progress med fetch. Derfor bruker vi XMLHttpRequest.\n    const xhr = new XMLHttpRequest();\n    const request = new Promise<ProgressEvent<XMLHttpRequestEventTarget>>(\n        (resolve, reject) => {\n            xhr.upload.addEventListener(\"progress\", (e) => {\n                if (e.lengthComputable && progress) {\n                    progress((e.loaded / e.total) * 100);\n                }\n            });\n\n            xhr.addEventListener(\"load\", (e) => {\n                if (xhr.status >= 400) {\n                    reject(e);\n                }\n                resolve(e);\n            });\n\n            xhr.addEventListener(\"error\", (e) => {\n                reject(e);\n            });\n\n            xhr.addEventListener(\"abort\", (e) => {\n                reject(e);\n            });\n\n            xhr.open(\"POST\", url);\n\n            Object.entries(headers || {}).forEach(([header, value]) => {\n                xhr.setRequestHeader(header, value);\n            });\n\n            xhr.send(data);\n        },\n    ).then(\n        (e) => {\n            const response: T = JSON.parse(xhr.responseText);\n            return response;\n        },\n        () => {\n            throw new Error(xhr.statusText);\n        },\n    );\n\n    return request;\n}\n"],"names":["async","upload","url","data","progress","headers","xhr","XMLHttpRequest","Promise","resolve","reject","addEventListener","e","lengthComputable","loaded","total","status","open","Object","entries","forEach","header","value","setRequestHeader","send","then","JSON","parse","responseText","Error","statusText"],"mappings":"AAUAA,eAAsBC,EAClBC,EACAC,EACAC,EACAC,GAGMC,MAAAA,EAAM,IAAIC,eA0CT,OAzCS,IAAIC,SAChB,CAACC,EAASC,KACNJ,EAAIL,OAAOU,iBAAiB,YAAaC,IACjCA,EAAEC,kBAAoBT,GACtBA,EAAUQ,EAAEE,OAASF,EAAEG,MAAS,IAAG,IAIvCT,EAAAK,iBAAiB,QAASC,IACtBN,EAAIU,QAAU,KACdN,EAAOE,GAEXH,EAAQG,EAAC,IAGTN,EAAAK,iBAAiB,SAAUC,IAC3BF,EAAOE,EAAC,IAGRN,EAAAK,iBAAiB,SAAUC,IAC3BF,EAAOE,EAAC,IAGRN,EAAAW,KAAK,OAAQf,GAEVgB,OAAAC,QAAQd,GAAW,CAAE,GAAEe,SAAQ,EAAEC,EAAQC,MACxChB,EAAAiB,iBAAiBF,EAAQC,EAAK,IAGtChB,EAAIkB,KAAKrB,EAAI,IAEnBsB,MACGb,GACuBc,KAAKC,MAAMrB,EAAIsB,gBAGvC,KACU,MAAA,IAAIC,MAAMvB,EAAIwB,WAAU,GAK1C"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fremtind/jokul",
-    "version": "0.27.6",
+    "version": "0.28.0",
     "type": "module",
     "publishConfig": {
         "access": "public"
@@ -182,6 +182,16 @@
                 "types": "./build/cjs/components/feedback/index.d.cts"
             }
         },
+        "./components/file-input": {
+            "import": {
+                "default": "./build/es/components/file-input/index.js",
+                "types": "./build/es/components/file-input/index.d.ts"
+            },
+            "require": {
+                "default": "./build/cjs/components/file-input/index.cjs",
+                "types": "./build/cjs/components/file-input/index.d.cts"
+            }
+        },
         "./components/flex": {
             "import": {
                 "default": "./build/es/components/flex/index.js",
@@ -511,5 +521,5 @@
             "@babel/preset-react"
         ]
     },
-    "gitHead": "0a6c7761bf277ab4720d6b0c1189107175f56f69"
+    "gitHead": "3d17387263c76595c6684e761f08e3d3bd6e1bb2"
 }

package/styles/components/button/button.css

@@ -136,7 +136,7 @@
   height: 1rem;
 }
 html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
-  animation: cubic-bezier(0.6, 0.2, 0.35, 1) 250ms jkl-tertiary-flash-ut8mrj0;
+  animation: cubic-bezier(0.6, 0.2, 0.35, 1) 250ms jkl-tertiary-flash-u7jdowt;
 }
 :not([data-touchnavigation]) .jkl-button--primary:hover, :not([data-touchnavigation]) .jkl-button--secondary:hover, :not([data-touchnavigation]) .jkl-button--tertiary:hover {
   scale: 1.05;
@@ -180,7 +180,7 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
   --background-color: var(--jkl-color-background-interactive-hover);
 }
 
-@keyframes jkl-tertiary-flash-ut8mrj0 {
+@keyframes jkl-tertiary-flash-u7jdowt {
   0% {
     opacity: 0.5;
     scale: 1;

package/styles/components/button/button.min.css

@@ -1 +1 @@
-.jkl .jkl-button,.jkl-button[data-density=comfortable],.jkl-button[data-layout-density=comfortable],[data-density=comfortable] .jkl-button,[data-layout-density=comfortable] .jkl-button{--padding-block:0.5rem;--padding-text:1.5rem;--padding-icon:1rem;--padding-icon-button:0.5rem;--padding-tertiary-inline:0.25rem;--padding-ghost-inline:0.5rem}.jkl-button[data-density=compact],.jkl-button[data-layout-density=compact],[data-density=compact] .jkl-button,[data-layout-density=compact] .jkl-button{--padding-block:0.25rem;--padding-text:0.75rem;--padding-icon:0.5rem;--padding-icon-button:0.25rem;--padding-tertiary-inline:0.125rem;--padding-ghost-inline:0.25rem;font-size:1rem;font-weight:400;line-height:1.5rem;--jkl-icon-weight:300;--jkl-icon-size:1.25rem;--jkl-icon-opsz:20;--jkl-icon-weight:500;font-weight:700}.jkl-button{--text-color:var(--jkl-color-text-default);--background-color:transparent;--border-radius:0;--border-width:0.0625rem;background-color:var(--background-color);border:unset;color:var(--text-color);cursor:pointer;text-decoration:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;border-radius:var(--border-radius);font-size:1.125rem;font-weight:400;line-height:1.75rem;max-width:100%;overflow:hidden;padding-block:var(--padding-block);padding-inline:var(--padding-text);position:relative;transition-duration:.15s;transition-property:scale;transition-timing-function:ease;--jkl-icon-weight:300;--jkl-icon-weight:500;font-weight:700}@media (min-width:680px){.jkl-button{font-size:1.25rem;font-weight:400;line-height:2rem;--jkl-icon-weight:300;--jkl-icon-weight:500;font-weight:700}}.jkl-button:has(.jkl-icon:first-child){padding-inline-start:var(--padding-icon)}.jkl-button:has(.jkl-icon:last-child){padding-inline-end:var(--padding-icon)}.jkl-button:has(.jkl-icon:first-child):has(.jkl-icon:last-child){padding-inline:var(--padding-icon-button)}.jkl-button__label{align-items:center;display:flex;flex-direction:row;gap:.125rem;pointer-events:none;transition-duration:.25s;transition-property:translate;transition-timing-function:ease}.jkl-button__loader{left:50%;opacity:0;pointer-events:none;position:absolute;top:50%;transition-duration:.25s;transition-property:opacity,translate;transition-timing-function:ease;translate:-50% 350%}.jkl-button__text{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.jkl-button[data-loading=true] .jkl-button__label{translate:0 -120%}.jkl-button[data-loading=true] .jkl-button__loader{opacity:1;translate:-50% -50%}.jkl-button:focus-visible{outline:2px solid var(--jkl-color-border-action);outline-offset:2px}.jkl-button:before{background-color:var(--text-color);border-radius:9999px;content:"";display:block;height:1rem;left:var(--jkl-touch-xcoord,50%);opacity:0;pointer-events:none;position:absolute;top:var(--jkl-touch-ycoord,50%);transform-origin:center;translate:-100%,-100%;width:1rem}html[data-touchnavigation] .jkl-button.jkl-button--pressed:before{animation:jkl-tertiary-flash-ut8mrj0 .25s cubic-bezier(.6,.2,.35,1)}:not([data-touchnavigation]) .jkl-button--primary:hover,:not([data-touchnavigation]) .jkl-button--secondary:hover,:not([data-touchnavigation]) .jkl-button--tertiary:hover{scale:1.05;transform-origin:center}.jkl-button--primary,.jkl-button--secondary{--border-radius:999px}.jkl-button--primary{--background-color:var(--jkl-color-background-action);--text-color:var(--jkl-color-text-on-action)}.jkl-button--secondary:after{border:var(--border-width) solid var(--text-color);border-radius:var(--border-radius);content:"";inset:0;position:absolute}.jkl-button--tertiary,.jkl-button--tertiary:has(.jkl-icon:first-child),.jkl-button--tertiary:has(.jkl-icon:last-child){padding-inline:var(--padding-tertiary-inline)}.jkl-button--tertiary:after,.jkl-button--tertiary:has(.jkl-icon:first-child):after,.jkl-button--tertiary:has(.jkl-icon:last-child):after{border-bottom:var(--border-width) solid var(--text-color);border-radius:var(--border-radius);content:"";inset:0;position:absolute}.jkl-button--tertiary:focus-visible,.jkl-button--tertiary:has(.jkl-icon:first-child):focus-visible,.jkl-button--tertiary:has(.jkl-icon:first-child):hover,.jkl-button--tertiary:has(.jkl-icon:last-child):focus-visible,.jkl-button--tertiary:has(.jkl-icon:last-child):hover,.jkl-button--tertiary:hover{--border-width:0.125rem}.jkl-button--ghost,.jkl-button--ghost:has(.jkl-icon:first-child),.jkl-button--ghost:has(.jkl-icon:last-child){border-radius:.25rem;padding-inline:var(--padding-ghost-inline);transition-duration:.15s;transition-property:background-color;transition-timing-function:ease}.jkl-button--ghost:has(.jkl-icon:first-child):hover,.jkl-button--ghost:has(.jkl-icon:last-child):hover,.jkl-button--ghost:hover{--background-color:var(--jkl-color-background-interactive-hover)}@keyframes jkl-tertiary-flash-ut8mrj0{0%{opacity:.5;scale:1}to{opacity:0;scale:8}}
+.jkl .jkl-button,.jkl-button[data-density=comfortable],.jkl-button[data-layout-density=comfortable],[data-density=comfortable] .jkl-button,[data-layout-density=comfortable] .jkl-button{--padding-block:0.5rem;--padding-text:1.5rem;--padding-icon:1rem;--padding-icon-button:0.5rem;--padding-tertiary-inline:0.25rem;--padding-ghost-inline:0.5rem}.jkl-button[data-density=compact],.jkl-button[data-layout-density=compact],[data-density=compact] .jkl-button,[data-layout-density=compact] .jkl-button{--padding-block:0.25rem;--padding-text:0.75rem;--padding-icon:0.5rem;--padding-icon-button:0.25rem;--padding-tertiary-inline:0.125rem;--padding-ghost-inline:0.25rem;font-size:1rem;font-weight:400;line-height:1.5rem;--jkl-icon-weight:300;--jkl-icon-size:1.25rem;--jkl-icon-opsz:20;--jkl-icon-weight:500;font-weight:700}.jkl-button{--text-color:var(--jkl-color-text-default);--background-color:transparent;--border-radius:0;--border-width:0.0625rem;background-color:var(--background-color);border:unset;color:var(--text-color);cursor:pointer;text-decoration:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;border-radius:var(--border-radius);font-size:1.125rem;font-weight:400;line-height:1.75rem;max-width:100%;overflow:hidden;padding-block:var(--padding-block);padding-inline:var(--padding-text);position:relative;transition-duration:.15s;transition-property:scale;transition-timing-function:ease;--jkl-icon-weight:300;--jkl-icon-weight:500;font-weight:700}@media (min-width:680px){.jkl-button{font-size:1.25rem;font-weight:400;line-height:2rem;--jkl-icon-weight:300;--jkl-icon-weight:500;font-weight:700}}.jkl-button:has(.jkl-icon:first-child){padding-inline-start:var(--padding-icon)}.jkl-button:has(.jkl-icon:last-child){padding-inline-end:var(--padding-icon)}.jkl-button:has(.jkl-icon:first-child):has(.jkl-icon:last-child){padding-inline:var(--padding-icon-button)}.jkl-button__label{align-items:center;display:flex;flex-direction:row;gap:.125rem;pointer-events:none;transition-duration:.25s;transition-property:translate;transition-timing-function:ease}.jkl-button__loader{left:50%;opacity:0;pointer-events:none;position:absolute;top:50%;transition-duration:.25s;transition-property:opacity,translate;transition-timing-function:ease;translate:-50% 350%}.jkl-button__text{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.jkl-button[data-loading=true] .jkl-button__label{translate:0 -120%}.jkl-button[data-loading=true] .jkl-button__loader{opacity:1;translate:-50% -50%}.jkl-button:focus-visible{outline:2px solid var(--jkl-color-border-action);outline-offset:2px}.jkl-button:before{background-color:var(--text-color);border-radius:9999px;content:"";display:block;height:1rem;left:var(--jkl-touch-xcoord,50%);opacity:0;pointer-events:none;position:absolute;top:var(--jkl-touch-ycoord,50%);transform-origin:center;translate:-100%,-100%;width:1rem}html[data-touchnavigation] .jkl-button.jkl-button--pressed:before{animation:jkl-tertiary-flash-u7jdowt .25s cubic-bezier(.6,.2,.35,1)}:not([data-touchnavigation]) .jkl-button--primary:hover,:not([data-touchnavigation]) .jkl-button--secondary:hover,:not([data-touchnavigation]) .jkl-button--tertiary:hover{scale:1.05;transform-origin:center}.jkl-button--primary,.jkl-button--secondary{--border-radius:999px}.jkl-button--primary{--background-color:var(--jkl-color-background-action);--text-color:var(--jkl-color-text-on-action)}.jkl-button--secondary:after{border:var(--border-width) solid var(--text-color);border-radius:var(--border-radius);content:"";inset:0;position:absolute}.jkl-button--tertiary,.jkl-button--tertiary:has(.jkl-icon:first-child),.jkl-button--tertiary:has(.jkl-icon:last-child){padding-inline:var(--padding-tertiary-inline)}.jkl-button--tertiary:after,.jkl-button--tertiary:has(.jkl-icon:first-child):after,.jkl-button--tertiary:has(.jkl-icon:last-child):after{border-bottom:var(--border-width) solid var(--text-color);border-radius:var(--border-radius);content:"";inset:0;position:absolute}.jkl-button--tertiary:focus-visible,.jkl-button--tertiary:has(.jkl-icon:first-child):focus-visible,.jkl-button--tertiary:has(.jkl-icon:first-child):hover,.jkl-button--tertiary:has(.jkl-icon:last-child):focus-visible,.jkl-button--tertiary:has(.jkl-icon:last-child):hover,.jkl-button--tertiary:hover{--border-width:0.125rem}.jkl-button--ghost,.jkl-button--ghost:has(.jkl-icon:first-child),.jkl-button--ghost:has(.jkl-icon:last-child){border-radius:.25rem;padding-inline:var(--padding-ghost-inline);transition-duration:.15s;transition-property:background-color;transition-timing-function:ease}.jkl-button--ghost:has(.jkl-icon:first-child):hover,.jkl-button--ghost:has(.jkl-icon:last-child):hover,.jkl-button--ghost:hover{--background-color:var(--jkl-color-background-interactive-hover)}@keyframes jkl-tertiary-flash-u7jdowt{0%{opacity:.5;scale:1}to{opacity:0;scale:8}}

package/styles/components/checkbox/checkbox.css

@@ -32,7 +32,7 @@
   --jkl-checkbox-line-height: 1.5rem;
 }
 
-@keyframes jkl-checkbox-checked-uhhecsi {
+@keyframes jkl-checkbox-checked-u5vfaj4 {
   0% {
     width: 0;
     height: 0;
@@ -46,7 +46,7 @@
     height: 58%;
   }
 }
-@keyframes jkl-checkbox-indeterminate-uhhecta {
+@keyframes jkl-checkbox-indeterminate-u5vfajs {
   0% {
     width: 0;
   }
@@ -74,11 +74,11 @@
   top: -6px;
 }
 .jkl-checkbox__input:checked + .jkl-checkbox__label .jkl-checkbox__check-mark::after {
-  animation: jkl-checkbox-checked-uhhecsi 150ms ease-in-out forwards;
+  animation: jkl-checkbox-checked-u5vfaj4 150ms ease-in-out forwards;
   opacity: 1;
 }
 .jkl-checkbox__input:indeterminate:not(:checked) + .jkl-checkbox__label .jkl-checkbox__indeterminate-mark::after {
-  animation: jkl-checkbox-indeterminate-uhhecta 150ms ease-in-out forwards;
+  animation: jkl-checkbox-indeterminate-u5vfajs 150ms ease-in-out forwards;
   opacity: 1;
 }
 .jkl-checkbox__input:focus-visible + .jkl-checkbox__label {

package/styles/components/checkbox/checkbox.min.css

@@ -1 +1 @@
-:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-checkbox-font-size:var(--jkl-body-font-size);--jkl-checkbox-line-height:var(--jkl-body-line-height);--jkl-checkbox-font-weight:var(--jkl-body-font-weight);--jkl-checkbox-height:3rem;--jkl-checkbox-box-size:1.5rem;--jkl-checkbox-line-height:2rem}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-checkbox-height:2.5rem;--jkl-checkbox-box-size:1.5rem;--jkl-checkbox-line-height:1.75rem}}[data-density=compact],[data-layout-density=compact]{--jkl-checkbox-font-size:var(--jkl-small-font-size);--jkl-checkbox-line-height:var(--jkl-small-line-height);--jkl-checkbox-font-weight:var(--jkl-small-font-weight);--jkl-checkbox-height:1.75rem;--jkl-checkbox-box-size:1.125rem;--jkl-checkbox-line-height:1.5rem}@keyframes jkl-checkbox-checked-uhhecsi{0%{height:0;width:0}40%{height:0;width:18%}to{height:58%;width:18%}}@keyframes jkl-checkbox-indeterminate-uhhecta{0%{width:0}to{width:66%}}.jkl-checkbox{--box-color:var(--jkl-color-border-action);--check-color:var(--jkl-color-border-action);--text-color:var(--jkl-color-text-default);--background-color:transparent;color:var(--text-color);display:flex;flex-wrap:wrap;font-size:var(--jkl-checkbox-font-size);font-weight:var(--jkl-checkbox-font-weight);line-height:var(--jkl-checkbox-line-height);min-height:var(--jkl-checkbox-height);position:relative}.jkl-checkbox__input{opacity:0;position:absolute;top:-6px}.jkl-checkbox__input:checked+.jkl-checkbox__label .jkl-checkbox__check-mark:after{animation:jkl-checkbox-checked-uhhecsi .15s ease-in-out forwards;opacity:1}.jkl-checkbox__input:indeterminate:not(:checked)+.jkl-checkbox__label .jkl-checkbox__indeterminate-mark:after{animation:jkl-checkbox-indeterminate-uhhecta .15s ease-in-out forwards;opacity:1}.jkl-checkbox__input:focus-visible+.jkl-checkbox__label{color:var(--jkl-checkbox-focus-color)}.jkl-checkbox__input:focus-visible+.jkl-checkbox__label>.jkl-checkbox__mark{--background-color:var(--jkl-color-background-input-focus);outline:2px solid var(--jkl-color-border-action);outline-offset:2px}.jkl-checkbox__input:disabled+.jkl-checkbox__label{color:var(--jkl-checkbox-disabled-color)}.jkl-checkbox__label{cursor:pointer;display:flex;flex-shrink:0;max-width:100%;min-width:0}.jkl-checkbox__label:active .jkl-checkbox__mark,.jkl-checkbox__label:hover .jkl-checkbox__mark{outline:1px solid var(--box-color)}.jkl-checkbox__label:active{--background-color:var(--jkl-color-background-input-focus)}.jkl-checkbox__text{margin:calc((var(--jkl-checkbox-height) - var(--jkl-checkbox-line-height))*.5) 0;transition-duration:.15s;transition-property:color;transition-timing-function:ease;translate:0 .0625rem}.jkl-checkbox__mark{align-self:flex-start;background-color:var(--background-color);border:1px solid;border-color:var(--box-color);border-radius:0;box-sizing:border-box;flex-shrink:0;height:var(--jkl-checkbox-box-size);margin-block:calc((var(--jkl-checkbox-height) - var(--jkl-checkbox-box-size))*.5);margin-inline-end:var(--jkl-spacing-8);outline:none;position:relative;transition-duration:.15s;transition-property:background-color;transition-timing-function:ease;width:var(--jkl-checkbox-box-size)}@media screen and (forced-colors:active){.jkl-checkbox__mark{border:1px solid ButtonText;outline:revert}}.jkl-checkbox__check-mark:after{border-bottom:.125rem solid var(--check-color);border-left-width:.125rem;border-left:0 solid var(--check-color);border-right:.125rem solid var(--check-color);border-top-width:.125rem;border-top:0 solid var(--check-color);bottom:42%;content:"";display:block;height:58%;left:18%;opacity:0;position:absolute;transform:rotate(45deg);transform-origin:bottom left;transition-duration:.15s;transition-property:opacity,border-color;transition-timing-function:ease;width:18%}@media screen and (forced-colors:active){.jkl-checkbox__check-mark:after{border-color:ButtonText}}.jkl-checkbox__indeterminate-mark:after{--width:66%;--thickness:0.125rem;border-bottom:solid var(--thickness) var(--check-color);bottom:calc(50% - var(--thickness)/2);content:"";display:block;left:calc((100% - var(--width))/2);opacity:0;position:absolute;transition-duration:.15s;transition-property:opacity,border-color;transition-timing-function:ease;width:var(--width)}@media screen and (forced-colors:active){.jkl-checkbox__indeterminate-mark:after{border-color:ButtonText}}.jkl-checkbox--inline{display:inline-flex}.jkl-checkbox--inline:not(:last-of-type){margin-right:1.5rem}.jkl-checkbox--error{--background-color:var(--jkl-color-background-alert-error);--check-color:var(--jkl-color-text-on-alert)}
+:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-checkbox-font-size:var(--jkl-body-font-size);--jkl-checkbox-line-height:var(--jkl-body-line-height);--jkl-checkbox-font-weight:var(--jkl-body-font-weight);--jkl-checkbox-height:3rem;--jkl-checkbox-box-size:1.5rem;--jkl-checkbox-line-height:2rem}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-checkbox-height:2.5rem;--jkl-checkbox-box-size:1.5rem;--jkl-checkbox-line-height:1.75rem}}[data-density=compact],[data-layout-density=compact]{--jkl-checkbox-font-size:var(--jkl-small-font-size);--jkl-checkbox-line-height:var(--jkl-small-line-height);--jkl-checkbox-font-weight:var(--jkl-small-font-weight);--jkl-checkbox-height:1.75rem;--jkl-checkbox-box-size:1.125rem;--jkl-checkbox-line-height:1.5rem}@keyframes jkl-checkbox-checked-u5vfaj4{0%{height:0;width:0}40%{height:0;width:18%}to{height:58%;width:18%}}@keyframes jkl-checkbox-indeterminate-u5vfajs{0%{width:0}to{width:66%}}.jkl-checkbox{--box-color:var(--jkl-color-border-action);--check-color:var(--jkl-color-border-action);--text-color:var(--jkl-color-text-default);--background-color:transparent;color:var(--text-color);display:flex;flex-wrap:wrap;font-size:var(--jkl-checkbox-font-size);font-weight:var(--jkl-checkbox-font-weight);line-height:var(--jkl-checkbox-line-height);min-height:var(--jkl-checkbox-height);position:relative}.jkl-checkbox__input{opacity:0;position:absolute;top:-6px}.jkl-checkbox__input:checked+.jkl-checkbox__label .jkl-checkbox__check-mark:after{animation:jkl-checkbox-checked-u5vfaj4 .15s ease-in-out forwards;opacity:1}.jkl-checkbox__input:indeterminate:not(:checked)+.jkl-checkbox__label .jkl-checkbox__indeterminate-mark:after{animation:jkl-checkbox-indeterminate-u5vfajs .15s ease-in-out forwards;opacity:1}.jkl-checkbox__input:focus-visible+.jkl-checkbox__label{color:var(--jkl-checkbox-focus-color)}.jkl-checkbox__input:focus-visible+.jkl-checkbox__label>.jkl-checkbox__mark{--background-color:var(--jkl-color-background-input-focus);outline:2px solid var(--jkl-color-border-action);outline-offset:2px}.jkl-checkbox__input:disabled+.jkl-checkbox__label{color:var(--jkl-checkbox-disabled-color)}.jkl-checkbox__label{cursor:pointer;display:flex;flex-shrink:0;max-width:100%;min-width:0}.jkl-checkbox__label:active .jkl-checkbox__mark,.jkl-checkbox__label:hover .jkl-checkbox__mark{outline:1px solid var(--box-color)}.jkl-checkbox__label:active{--background-color:var(--jkl-color-background-input-focus)}.jkl-checkbox__text{margin:calc((var(--jkl-checkbox-height) - var(--jkl-checkbox-line-height))*.5) 0;transition-duration:.15s;transition-property:color;transition-timing-function:ease;translate:0 .0625rem}.jkl-checkbox__mark{align-self:flex-start;background-color:var(--background-color);border:1px solid;border-color:var(--box-color);border-radius:0;box-sizing:border-box;flex-shrink:0;height:var(--jkl-checkbox-box-size);margin-block:calc((var(--jkl-checkbox-height) - var(--jkl-checkbox-box-size))*.5);margin-inline-end:var(--jkl-spacing-8);outline:none;position:relative;transition-duration:.15s;transition-property:background-color;transition-timing-function:ease;width:var(--jkl-checkbox-box-size)}@media screen and (forced-colors:active){.jkl-checkbox__mark{border:1px solid ButtonText;outline:revert}}.jkl-checkbox__check-mark:after{border-bottom:.125rem solid var(--check-color);border-left-width:.125rem;border-left:0 solid var(--check-color);border-right:.125rem solid var(--check-color);border-top-width:.125rem;border-top:0 solid var(--check-color);bottom:42%;content:"";display:block;height:58%;left:18%;opacity:0;position:absolute;transform:rotate(45deg);transform-origin:bottom left;transition-duration:.15s;transition-property:opacity,border-color;transition-timing-function:ease;width:18%}@media screen and (forced-colors:active){.jkl-checkbox__check-mark:after{border-color:ButtonText}}.jkl-checkbox__indeterminate-mark:after{--width:66%;--thickness:0.125rem;border-bottom:solid var(--thickness) var(--check-color);bottom:calc(50% - var(--thickness)/2);content:"";display:block;left:calc((100% - var(--width))/2);opacity:0;position:absolute;transition-duration:.15s;transition-property:opacity,border-color;transition-timing-function:ease;width:var(--width)}@media screen and (forced-colors:active){.jkl-checkbox__indeterminate-mark:after{border-color:ButtonText}}.jkl-checkbox--inline{display:inline-flex}.jkl-checkbox--inline:not(:last-of-type){margin-right:1.5rem}.jkl-checkbox--error{--background-color:var(--jkl-color-background-alert-error);--check-color:var(--jkl-color-text-on-alert)}

package/styles/components/feedback/feedback.css

@@ -2,7 +2,7 @@
  * Do not edit directly
  * Generated on Mon, 23 Sep 2024 08:51:40 GMT
  */
-@keyframes jkl-show-uchg0me {
+@keyframes jkl-show-uv34wu9 {
   from {
     transform: translate3d(0, 0.5rem, 0);
     opacity: 0;
@@ -37,7 +37,7 @@
   }
 }
 .jkl-feedback__fade-in {
-  animation: jkl-show-uchg0me 0.25s ease-out;
+  animation: jkl-show-uv34wu9 0.25s ease-out;
 }
 
 .jkl-feedback-smileys {

package/styles/components/feedback/feedback.min.css

@@ -1 +1 @@
-@keyframes jkl-show-uchg0me{0%{opacity:0;transform:translate3d(0,.5rem,0)}}.jkl-feedback{max-width:34.375rem}.jkl-feedback__submit-wrapper{transition-duration:.25s;transition-property:height;transition-timing-function:ease;width:100%}.jkl-feedback__submit-wrapper--hidden{display:none}.jkl-feedback__step-counter{color:var(--jkl-color-text-subdued);font-size:1.125rem;font-weight:400;line-height:1.75rem;margin-bottom:1rem;--jkl-icon-weight:300}@media (min-width:680px){.jkl-feedback__step-counter{font-size:1.25rem;font-weight:400;line-height:2rem;--jkl-icon-weight:300}}.jkl-feedback__fade-in{animation:jkl-show-uchg0me .25s ease-out}.jkl-feedback-smileys{display:flex;flex-wrap:nowrap;gap:.75rem;justify-content:space-between;margin-top:.5rem;max-width:22.5rem;width:100%}.jkl-feedback-smiley-option{color:var(--jkl-color-text-subdued);cursor:pointer;display:inline-block;height:2.5rem;position:relative;transform:translateZ(0);transition-duration:.15s;transition-property:transform,color;transition-timing-function:ease;width:2.5rem}@media screen and (forced-colors:active){.jkl-feedback-smiley-option,.jkl-feedback-smiley-option path,.jkl-feedback-smiley-option svg{stroke:ButtonFace;fill:ButtonText}}.jkl-feedback-smiley-option:after,.jkl-feedback-smiley-option:before{border-radius:50%;content:"";opacity:0;position:absolute;transition-duration:.15s;transition-property:opacity;transition-timing-function:ease}.jkl-feedback-smiley-option:after{box-shadow:0 0 0 .125rem currentColor;inset:-.125rem -.125rem -.125rem -.125rem}.jkl-feedback-smiley-option:before{box-shadow:0 .125rem 1.875rem rgba(0,0,0,.1);inset:0}.jkl-feedback-smiley-option:hover{color:var(--jkl-color-text-default)}input:checked+.jkl-feedback-smiley-option{color:var(--jkl-color-text-default);transform:translate3d(0,-20%,0)}input:checked+.jkl-feedback-smiley-option:before{opacity:1}html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus+.jkl-feedback-smiley-option:after{opacity:1}
+@keyframes jkl-show-uv34wu9{0%{opacity:0;transform:translate3d(0,.5rem,0)}}.jkl-feedback{max-width:34.375rem}.jkl-feedback__submit-wrapper{transition-duration:.25s;transition-property:height;transition-timing-function:ease;width:100%}.jkl-feedback__submit-wrapper--hidden{display:none}.jkl-feedback__step-counter{color:var(--jkl-color-text-subdued);font-size:1.125rem;font-weight:400;line-height:1.75rem;margin-bottom:1rem;--jkl-icon-weight:300}@media (min-width:680px){.jkl-feedback__step-counter{font-size:1.25rem;font-weight:400;line-height:2rem;--jkl-icon-weight:300}}.jkl-feedback__fade-in{animation:jkl-show-uv34wu9 .25s ease-out}.jkl-feedback-smileys{display:flex;flex-wrap:nowrap;gap:.75rem;justify-content:space-between;margin-top:.5rem;max-width:22.5rem;width:100%}.jkl-feedback-smiley-option{color:var(--jkl-color-text-subdued);cursor:pointer;display:inline-block;height:2.5rem;position:relative;transform:translateZ(0);transition-duration:.15s;transition-property:transform,color;transition-timing-function:ease;width:2.5rem}@media screen and (forced-colors:active){.jkl-feedback-smiley-option,.jkl-feedback-smiley-option path,.jkl-feedback-smiley-option svg{stroke:ButtonFace;fill:ButtonText}}.jkl-feedback-smiley-option:after,.jkl-feedback-smiley-option:before{border-radius:50%;content:"";opacity:0;position:absolute;transition-duration:.15s;transition-property:opacity;transition-timing-function:ease}.jkl-feedback-smiley-option:after{box-shadow:0 0 0 .125rem currentColor;inset:-.125rem -.125rem -.125rem -.125rem}.jkl-feedback-smiley-option:before{box-shadow:0 .125rem 1.875rem rgba(0,0,0,.1);inset:0}.jkl-feedback-smiley-option:hover{color:var(--jkl-color-text-default)}input:checked+.jkl-feedback-smiley-option{color:var(--jkl-color-text-default);transform:translate3d(0,-20%,0)}input:checked+.jkl-feedback-smiley-option:before{opacity:1}html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus+.jkl-feedback-smiley-option:after{opacity:1}

package/styles/components/file-input/_file.scss

@@ -0,0 +1,172 @@
+@use "../../core/jkl";
+@use "../../core/jkl/colors";
+
+.jkl-file {
+    --text-color: var(--jkl-color-text-default);
+
+    @include jkl.motion(
+        "standard",
+        "snappy",
+        background-color,
+        border-color,
+        color
+    );
+
+    color: var(--jkl-color-text-default);
+    margin: 0;
+    min-width: jkl.rem(240px);
+
+    display: flex;
+    flex-flow: nowrap row;
+
+    @include jkl.text-style("small");
+    @include jkl.reset-outline;
+
+    @include jkl.comfortable-density {
+        --jkl-file-padding: #{jkl.$spacing-24};
+        --jkl-file-thumbnail-size: #{jkl.rem(64px)};
+        --jkl-file-gap: #{jkl.$spacing-16};
+        --jkl-file-font-size: #{jkl.rem(20px)};
+        --jkl-file-line-height: #{jkl.rem(32px)};
+    }
+
+    @include jkl.compact-density {
+        --jkl-file-padding: #{jkl.$spacing-12};
+        --jkl-file-thumbnail-size: #{jkl.rem(44px)};
+        --jkl-file-gap: #{jkl.$spacing-8};
+        --jkl-file-font-size: #{jkl.rem(16px)};
+        --jkl-file-line-height: #{jkl.rem(24px)};
+    }
+
+    &__content {
+        display: flex;
+        flex-basis: 100%;
+        gap: 1em;
+        background-color: var(--jkl-color-background-container-high);
+        padding: var(--jkl-file-padding);
+        border-radius: jkl.rem(2px);
+        box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.05);
+        color: var(--text-color);
+
+        &--error {
+            background-color: var(--jkl-color-background-alert-error);
+        }
+
+        &--warning {
+            background-color: var(--jkl-color-background-alert-warning);
+        }
+
+        &--error,
+        &--warning {
+            --text-color: var(--jkl-color-text-on-alert);
+
+            .jkl-form-support-label {
+                --color: var(--jkl-color-text-on-alert);
+            }
+        }
+    }
+
+    &__content:not(div) {
+        cursor: pointer;
+        text-decoration: none;
+        color: var(--jkl-color-text-default);
+
+        &:hover ~ .jkl-file__description {
+            @include jkl.no-grow-bold;
+        }
+
+        @include jkl.keyboard-navigation {
+            &:focus {
+                outline: jkl.rem(2px) solid var(--jkl-color-border-input-focus);
+            }
+        }
+
+        @include jkl.forced-colors-mode {
+            outline: revert;
+            border: jkl.rem(2px) solid LinkText;
+        }
+    }
+
+    &__delete {
+        padding: 0 var(--jkl-spacing-24);
+        align-items: stretch;
+
+        &:hover {
+            background-color: var(--jkl-color-background-interactive-hover);
+        }
+    }
+
+    &__thumbnail-wrapper {
+        position: relative;
+
+        & > :nth-child(2) {
+            position: absolute;
+            inset: 0;
+            margin: auto;
+            width: 80%;
+        }
+    }
+
+    &__thumbnail {
+        width: var(--jkl-file-thumbnail-size);
+        height: var(--jkl-file-thumbnail-size);
+        flex: 0 0 var(--jkl-file-thumbnail-size);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        object-fit: contain;
+        opacity: 1;
+        border-radius: jkl.rem(4px);
+        color: var(--jkl-color-text-subdued);
+
+        @include jkl.motion;
+        transition-property: opacity;
+
+        &--selected {
+            opacity: 0.7;
+        }
+
+        &--uploading {
+            opacity: 0.4;
+        }
+    }
+
+    &__thumbnail:not(img) {
+        background: var(--jkl-color-background-container-low);
+    }
+
+    &__file-info {
+        display: flex;
+        flex-direction: column;
+        flex: 1 1 auto;
+        overflow-wrap: break-word;
+        gap: var(--jkl-spacing-8);
+    }
+
+    &__title {
+        @include jkl.text-style("heading-5");
+        overflow-wrap: anywhere;
+    }
+
+    &__name,
+    &__description {
+        font-size: var(--jkl-file-font-size);
+        line-height: var(--jkl-file-line-height);
+    }
+
+    &__name {
+        font-weight: #{jkl.$typography-weight-bold};
+    }
+
+    &__description {
+        display: flex;
+        flex-wrap: nowrap;
+        gap: jkl.$spacing-12;
+        align-items: center;
+        justify-content: flex-start;
+    }
+
+    &__support-label {
+        margin: 0;
+    }
+}

package/styles/components/file-input/_index.scss

@@ -0,0 +1 @@
+@forward "file-input";

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

@@ -0,0 +1,290 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 23 Sep 2024 08:51:40 GMT
+ */
+.jkl-file {
+  --text-color: var(--jkl-color-text-default);
+  transition-timing-function: ease;
+  transition-duration: 100ms;
+  transition-property: background-color, border-color, color;
+  color: var(--jkl-color-text-default);
+  margin: 0;
+  min-width: 15rem;
+  display: flex;
+  flex-flow: nowrap row;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 400;
+  --jkl-icon-weight: 300;
+  --jkl-icon-size: 1.25rem;
+  --jkl-icon-opsz: 20;
+  outline: 0;
+  border-style: none;
+  outline-style: none;
+}
+.jkl-file:active, .jkl-file:hover, .jkl-file:focus {
+  outline: 0;
+  outline-style: none;
+}
+@media screen and (forced-colors: active) {
+  .jkl-file {
+    outline: revert;
+    border-style: revert;
+    outline-style: revert;
+  }
+  .jkl-file:active, .jkl-file:hover, .jkl-file:focus {
+    outline: revert;
+    outline-style: revert;
+  }
+}
+.jkl .jkl-file, .jkl-file[data-layout-density=comfortable], .jkl-file[data-density=comfortable], [data-layout-density=comfortable] .jkl-file, [data-density=comfortable] .jkl-file {
+  --jkl-file-padding: 1.5rem;
+  --jkl-file-thumbnail-size: 4rem;
+  --jkl-file-gap: 1rem;
+  --jkl-file-font-size: 1.25rem;
+  --jkl-file-line-height: 2rem;
+}
+.jkl-file[data-layout-density=compact], .jkl-file[data-density=compact], [data-layout-density=compact] .jkl-file, [data-density=compact] .jkl-file {
+  --jkl-file-padding: 0.75rem;
+  --jkl-file-thumbnail-size: 2.75rem;
+  --jkl-file-gap: 0.5rem;
+  --jkl-file-font-size: 1rem;
+  --jkl-file-line-height: 1.5rem;
+}
+.jkl-file__content {
+  display: flex;
+  flex-basis: 100%;
+  gap: 1em;
+  background-color: var(--jkl-color-background-container-high);
+  padding: var(--jkl-file-padding);
+  border-radius: 0.125rem;
+  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.05);
+  color: var(--text-color);
+}
+.jkl-file__content--error {
+  background-color: var(--jkl-color-background-alert-error);
+}
+.jkl-file__content--warning {
+  background-color: var(--jkl-color-background-alert-warning);
+}
+.jkl-file__content--error, .jkl-file__content--warning {
+  --text-color: var(--jkl-color-text-on-alert);
+}
+.jkl-file__content--error .jkl-form-support-label, .jkl-file__content--warning .jkl-form-support-label {
+  --color: var(--jkl-color-text-on-alert);
+}
+.jkl-file__content:not(div) {
+  cursor: pointer;
+  text-decoration: none;
+  color: var(--jkl-color-text-default);
+}
+.jkl-file__content:not(div):hover ~ .jkl-file__description {
+  --jkl-icon-weight: 500;
+  font-weight: 700;
+  letter-spacing: -0.014em;
+}
+html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-file__content:not(div):focus {
+  outline: 0.125rem solid var(--jkl-color-border-input-focus);
+}
+
+@media screen and (forced-colors: active) {
+  .jkl-file__content:not(div) {
+    outline: revert;
+    border: 0.125rem solid LinkText;
+  }
+}
+.jkl-file__delete {
+  padding: 0 var(--jkl-spacing-24);
+  align-items: stretch;
+}
+.jkl-file__delete:hover {
+  background-color: var(--jkl-color-background-interactive-hover);
+}
+.jkl-file__thumbnail-wrapper {
+  position: relative;
+}
+.jkl-file__thumbnail-wrapper > :nth-child(2) {
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  width: 80%;
+}
+.jkl-file__thumbnail {
+  width: var(--jkl-file-thumbnail-size);
+  height: var(--jkl-file-thumbnail-size);
+  flex: 0 0 var(--jkl-file-thumbnail-size);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  object-fit: contain;
+  opacity: 1;
+  border-radius: 0.25rem;
+  color: var(--jkl-color-text-subdued);
+  transition-timing-function: ease;
+  transition-duration: 150ms;
+  transition-property: opacity;
+}
+.jkl-file__thumbnail--selected {
+  opacity: 0.7;
+}
+.jkl-file__thumbnail--uploading {
+  opacity: 0.4;
+}
+.jkl-file__thumbnail:not(img) {
+  background: var(--jkl-color-background-container-low);
+}
+.jkl-file__file-info {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  overflow-wrap: break-word;
+  gap: var(--jkl-spacing-8);
+}
+.jkl-file__title {
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 700;
+  --jkl-icon-weight: 500;
+  --jkl-icon-size: 1.25rem;
+  --jkl-icon-opsz: 20;
+  overflow-wrap: anywhere;
+}
+.jkl-file__name, .jkl-file__description {
+  font-size: var(--jkl-file-font-size);
+  line-height: var(--jkl-file-line-height);
+}
+.jkl-file__name {
+  font-weight: 700;
+}
+.jkl-file__description {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 0.75rem;
+  align-items: center;
+  justify-content: flex-start;
+}
+.jkl-file__support-label {
+  margin: 0;
+}
+
+:root,
+[data-layout-density=comfortable],
+[data-density=comfortable] {
+  --jkl-file-input-drag-font-size: var(--jkl-heading-2-font-size);
+  --jkl-file-input-drag-line-height: var(--jkl-heading-2-line-height);
+  --jkl-file-input-drag-font-weight: var(--jkl-heading-2-font-weight);
+  --jkl-file-size-hint-font-size: var(--jkl-small-font-size);
+  --jkl-file-size-hint-line-height: var(--jkl-small-line-height);
+  --jkl-file-size-hint-font-weight: var(--jkl-small-font-weight);
+  --jkl-file-input-dropzone-padding: 1.5rem;
+  --jkl-file-input-dropzone-gap: 1.5rem;
+  --jkl-file-cta-gap: 1.5rem;
+  --jkl-file-cta-with-files-gap: 0.75rem;
+  --jkl-file-list-gap: 1rem;
+}
+
+[data-layout-density=compact],
+[data-density=compact] {
+  --jkl-file-input-drag-font-size: var(--jkl-body-font-size);
+  --jkl-file-input-drag-line-height: var(--jkl-body-line-height);
+  --jkl-file-input-drag-font-weight: var(--jkl-body-font-weight);
+  --jkl-file-input-dropzone-padding: 1rem;
+  --jkl-file-input-dropzone-gap: 1rem;
+  --jkl-file-cta-gap: 0.75rem;
+  --jkl-file-cta-with-files-gap: 0.25rem;
+  --jkl-file-list-gap: 0.5rem;
+}
+
+.jkl-file-input__dropzone {
+  --border-color: var(--jkl-color-border-input);
+  --background-color: transparent;
+  border: var(--border-color) 1px dashed;
+  border-radius: 0.25rem;
+  padding: var(--jkl-file-input-dropzone-padding);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  gap: var(--jkl-file-input-dropzone-gap);
+  transition-timing-function: ease;
+  transition-duration: 150ms;
+  transition-property: background-color;
+  background-color: var(--background-color);
+}
+.jkl-file-input__dropzone--enter {
+  --border-color: var(--jkl-color-border-input-focus);
+  --background-color: var(--jkl-color-background-container-high);
+  border-style: solid;
+}
+.jkl-file-input__dropzone__drag-text {
+  font-size: var(--jkl-file-input-drag-font-size);
+  line-height: var(--jkl-file-input-drag-line-height);
+  font-weight: var(--jkl-file-input-drag-font-weight);
+}
+@media (width >= 0) and (max-width: 679px) {
+  .jkl-file-input__dropzone__drag-text {
+    display: none;
+  }
+}
+.jkl-file-input__call-to-action {
+  gap: var(--jkl-file-cta-gap);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  flex-wrap: nowrap;
+}
+html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-file-input__call-to-action:focus-within .jkl-button {
+  transform: scale(1.05);
+  outline: 2px solid var(--jkl-color-border-action);
+  outline-offset: 2px;
+}
+html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-file-input__call-to-action:focus-within .jkl-button:active {
+  transform: scale(1);
+}
+.jkl-file-input--has-files .jkl-file-input__call-to-action {
+  gap: var(--jkl-file-cta-with-files-gap);
+}
+.jkl-file-input__max-size-text {
+  font-size: var(--jkl-file-size-hint-font-size);
+  line-height: var(--jkl-file-size-hint-line-height);
+  font-weight: var(--jkl-file-size-hint-font-weight);
+  color: var(--jkl-color-text-subdued);
+}
+.jkl-file-input__files {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--jkl-file-list-gap);
+}
+.jkl-file-input--small .jkl-file-input__dropzone {
+  padding: 1rem;
+  gap: 1rem;
+  margin-bottom: 1rem;
+  justify-content: flex-start;
+  flex-direction: row;
+  max-width: fit-content;
+}
+.jkl-file-input--small .jkl-file-input__call-to-action {
+  font-size: var(--jkl-file-size-hint-font-size);
+  line-height: var(--jkl-file-size-hint-line-height);
+  font-weight: var(--jkl-file-size-hint-font-weight);
+  gap: 0.75rem;
+  flex-direction: row;
+  justify-content: flex-start;
+}
+.jkl-file-input--small .jkl-file-input__max-size-text {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
+  clip-path: inset(50%) !important; /* 2 */
+  height: 1px !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  padding: 0 !important;
+  position: absolute !important;
+  width: 1px !important;
+  white-space: nowrap !important; /* 3 */
+}

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

@@ -0,0 +1 @@
+.jkl-file{--text-color:var(--jkl-color-text-default);color:var(--jkl-color-text-default);display:flex;flex-flow:row nowrap;font-size:1rem;font-weight:400;line-height:1.5rem;margin:0;min-width:15rem;transition-duration:.1s;transition-property:background-color,border-color,color;transition-timing-function:ease;--jkl-icon-weight:300;--jkl-icon-size:1.25rem;--jkl-icon-opsz:20;border-style:none;outline:0;outline-style:none}.jkl-file:active,.jkl-file:focus,.jkl-file:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-file{border-style:revert;outline:revert;outline-style:revert}.jkl-file:active,.jkl-file:focus,.jkl-file:hover{outline:revert;outline-style:revert}}.jkl .jkl-file,.jkl-file[data-density=comfortable],.jkl-file[data-layout-density=comfortable],[data-density=comfortable] .jkl-file,[data-layout-density=comfortable] .jkl-file{--jkl-file-padding:1.5rem;--jkl-file-thumbnail-size:4rem;--jkl-file-gap:1rem;--jkl-file-font-size:1.25rem;--jkl-file-line-height:2rem}.jkl-file[data-density=compact],.jkl-file[data-layout-density=compact],[data-density=compact] .jkl-file,[data-layout-density=compact] .jkl-file{--jkl-file-padding:0.75rem;--jkl-file-thumbnail-size:2.75rem;--jkl-file-gap:0.5rem;--jkl-file-font-size:1rem;--jkl-file-line-height:1.5rem}.jkl-file__content{background-color:var(--jkl-color-background-container-high);border-radius:.125rem;box-shadow:0 0 5px 0 rgba(0,0,0,.05);color:var(--text-color);display:flex;flex-basis:100%;gap:1em;padding:var(--jkl-file-padding)}.jkl-file__content--error{background-color:var(--jkl-color-background-alert-error)}.jkl-file__content--warning{background-color:var(--jkl-color-background-alert-warning)}.jkl-file__content--error,.jkl-file__content--warning{--text-color:var(--jkl-color-text-on-alert)}.jkl-file__content--error .jkl-form-support-label,.jkl-file__content--warning .jkl-form-support-label{--color:var(--jkl-color-text-on-alert)}.jkl-file__content:not(div){color:var(--jkl-color-text-default);cursor:pointer;text-decoration:none}.jkl-file__content:not(div):hover~.jkl-file__description{--jkl-icon-weight:500;font-weight:700;letter-spacing:-.014em}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-file__content:not(div):focus{outline:.125rem solid var(--jkl-color-border-input-focus)}@media screen and (forced-colors:active){.jkl-file__content:not(div){border:.125rem solid LinkText;outline:revert}}.jkl-file__delete{align-items:stretch;padding:0 var(--jkl-spacing-24)}.jkl-file__delete:hover{background-color:var(--jkl-color-background-interactive-hover)}.jkl-file__thumbnail-wrapper{position:relative}.jkl-file__thumbnail-wrapper>:nth-child(2){inset:0;margin:auto;position:absolute;width:80%}.jkl-file__thumbnail{align-items:center;border-radius:.25rem;color:var(--jkl-color-text-subdued);display:flex;flex:0 0 var(--jkl-file-thumbnail-size);height:var(--jkl-file-thumbnail-size);justify-content:center;object-fit:contain;opacity:1;transition-duration:.15s;transition-property:opacity;transition-timing-function:ease;width:var(--jkl-file-thumbnail-size)}.jkl-file__thumbnail--selected{opacity:.7}.jkl-file__thumbnail--uploading{opacity:.4}.jkl-file__thumbnail:not(img){background:var(--jkl-color-background-container-low)}.jkl-file__file-info{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--jkl-spacing-8);overflow-wrap:break-word}.jkl-file__title{font-size:1rem;font-weight:700;line-height:1.5rem;--jkl-icon-weight:500;--jkl-icon-size:1.25rem;--jkl-icon-opsz:20;overflow-wrap:anywhere}.jkl-file__description,.jkl-file__name{font-size:var(--jkl-file-font-size);line-height:var(--jkl-file-line-height)}.jkl-file__name{font-weight:700}.jkl-file__description{align-items:center;display:flex;flex-wrap:nowrap;gap:.75rem;justify-content:flex-start}.jkl-file__support-label{margin:0}:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-file-input-drag-font-size:var(--jkl-heading-2-font-size);--jkl-file-input-drag-line-height:var(--jkl-heading-2-line-height);--jkl-file-input-drag-font-weight:var(--jkl-heading-2-font-weight);--jkl-file-size-hint-font-size:var(--jkl-small-font-size);--jkl-file-size-hint-line-height:var(--jkl-small-line-height);--jkl-file-size-hint-font-weight:var(--jkl-small-font-weight);--jkl-file-input-dropzone-padding:1.5rem;--jkl-file-input-dropzone-gap:1.5rem;--jkl-file-cta-gap:1.5rem;--jkl-file-cta-with-files-gap:0.75rem;--jkl-file-list-gap:1rem}[data-density=compact],[data-layout-density=compact]{--jkl-file-input-drag-font-size:var(--jkl-body-font-size);--jkl-file-input-drag-line-height:var(--jkl-body-line-height);--jkl-file-input-drag-font-weight:var(--jkl-body-font-weight);--jkl-file-input-dropzone-padding:1rem;--jkl-file-input-dropzone-gap:1rem;--jkl-file-cta-gap:0.75rem;--jkl-file-cta-with-files-gap:0.25rem;--jkl-file-list-gap:0.5rem}.jkl-file-input__dropzone{--border-color:var(--jkl-color-border-input);--background-color:transparent;align-items:center;background-color:var(--background-color);border:1px dashed var(--border-color);border-radius:.25rem;display:flex;flex-direction:column;flex-wrap:nowrap;gap:var(--jkl-file-input-dropzone-gap);justify-content:center;padding:var(--jkl-file-input-dropzone-padding);transition-duration:.15s;transition-property:background-color;transition-timing-function:ease}.jkl-file-input__dropzone--enter{--border-color:var(--jkl-color-border-input-focus);--background-color:var(--jkl-color-background-container-high);border-style:solid}.jkl-file-input__dropzone__drag-text{font-size:var(--jkl-file-input-drag-font-size);font-weight:var(--jkl-file-input-drag-font-weight);line-height:var(--jkl-file-input-drag-line-height)}@media (width >= 0) and (max-width:679px){.jkl-file-input__dropzone__drag-text{display:none}}.jkl-file-input__call-to-action{align-items:center;display:flex;flex-direction:column;flex-wrap:nowrap;gap:var(--jkl-file-cta-gap);justify-content:center}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-file-input__call-to-action:focus-within .jkl-button{outline:2px solid var(--jkl-color-border-action);outline-offset:2px;transform:scale(1.05)}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-file-input__call-to-action:focus-within .jkl-button:active{transform:scale(1)}.jkl-file-input--has-files .jkl-file-input__call-to-action{gap:var(--jkl-file-cta-with-files-gap)}.jkl-file-input__max-size-text{color:var(--jkl-color-text-subdued);font-size:var(--jkl-file-size-hint-font-size);font-weight:var(--jkl-file-size-hint-font-weight);line-height:var(--jkl-file-size-hint-line-height)}.jkl-file-input__files{display:flex;flex-direction:column;gap:var(--jkl-file-list-gap);list-style:none;margin:0;padding:0}.jkl-file-input--small .jkl-file-input__dropzone{flex-direction:row;gap:1rem;justify-content:flex-start;margin-bottom:1rem;max-width:-webkit-fit-content;max-width:-moz-fit-content;max-width:fit-content;padding:1rem}.jkl-file-input--small .jkl-file-input__call-to-action{flex-direction:row;font-size:var(--jkl-file-size-hint-font-size);font-weight:var(--jkl-file-size-hint-font-weight);gap:.75rem;justify-content:flex-start;line-height:var(--jkl-file-size-hint-line-height)}.jkl-file-input--small .jkl-file-input__max-size-text{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}