@fremtind/jokul 5.0.0-next.0 → 5.0.0-next.2

package/styles/base.min.css

@@ -0,0 +1,2 @@
+@layer jokul{@layer resets, theme, global, components, utility}
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */@layer jokul.resets{html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}h1,h2,h3,h4,h5,h6,p{margin:0}fieldset{border:0;display:block;line-height:1;margin:0;padding:0}table{border-collapse:collapse}table,tbody,td,th,thead,tr{margin:0;padding:0}}@layer jokul.resets{.jkl [hidden]{display:none!important}}@layer jokul.theme{@font-face{font-display:fallback;font-family:Fremtind Grotesk;font-style:normal;font-weight:400;src:url(/fonts/FremtindGrotesk-Regular-Web.woff2) format("woff2"),url(/fonts/FremtindGrotesk-Regular-Web.woff) format("woff")}@font-face{ascent-override:82%;descent-override:normal;font-family:Adjusted Arial Fallback;font-style:normal;font-weight:400;line-gap-override:32%;size-adjust:104%;src:local(arial)}@font-face{font-display:fallback;font-family:Fremtind Grotesk;font-style:normal;font-weight:700;src:url(/fonts/FremtindGrotesk-Bold-Web.woff2) format("woff2"),url(/fonts/FremtindGrotesk-Bold-Web.woff) format("woff")}@font-face{ascent-override:83%;descent-override:normal;font-family:Adjusted Arial Fallback;font-style:normal;font-weight:700;line-gap-override:28%;size-adjust:108%;src:local(arial)}@font-face{font-display:fallback;font-family:Fremtind Grotesk;font-style:italic;font-weight:400;src:url(/fonts/FremtindGrotesk-Italic-Web.woff2) format("woff2"),url(/fonts/FremtindGrotesk-Italic-Web.woff) format("woff")}@font-face{ascent-override:83%;descent-override:normal;font-family:Adjusted Arial Fallback;font-style:italic;font-weight:400;line-gap-override:28%;size-adjust:106%;src:local(arial)}@font-face{font-display:fallback;font-family:Fremtind Grotesk;font-style:italic;font-weight:700;src:url(/fonts/FremtindGrotesk-BoldItalic-Web.woff2) format("woff2"),url(/fonts/FremtindGrotesk-BoldItalic-Web.woff) format("woff")}@font-face{ascent-override:83%;descent-override:normal;font-family:Adjusted Arial Fallback;font-style:italic;font-weight:700;line-gap-override:28%;size-adjust:108%;src:local(arial)}@font-face{font-display:fallback;font-family:Fremtind Grotesk Display;font-style:normal;font-weight:400;src:url(/fonts/FremtindGrotesk-Display-Web.woff2) format("woff2"),url(/fonts/FremtindGrotesk-Display-Web.woff) format("woff")}@font-face{ascent-override:76%;descent-override:normal;font-family:Adjusted Arial Display Fallback;font-style:normal;font-weight:400;line-gap-override:40%;size-adjust:102%;src:local(arial)}@font-face{font-display:fallback;font-family:Fremtind Grotesk Mono;font-style:normal;font-weight:400;src:url(/fonts/FremtindGroteskMono-Regular-Web.woff2) format("woff2"),url(/fonts/FremtindGroteskMono-Regular-Web.woff) format("woff")}@font-face{ascent-override:83%;descent-override:normal;font-family:Adjusted Courier New Fallback;font-style:normal;font-weight:400;line-gap-override:27%;size-adjust:100%;src:local(courier new)}@font-face{font-family:Fremtind Material Symbols;font-style:normal;font-weight:300 400;src:url(/fonts/Fremtind-Material-Symbols.woff2) format("woff2")}@font-face{font-family:Fremtind Material Symbols Fallback;font-style:normal;font-weight:300 400;size-adjust:0%;src:local(courier new)}}@layer jokul.theme{:root{--jkl-spacing-2: ;--jkl-spacing-4: ;--jkl-spacing-8: ;--jkl-spacing-12: ;--jkl-spacing-16: ;--jkl-spacing-24: ;--jkl-spacing-32: ;--jkl-spacing-40: ;--jkl-spacing-64: ;--jkl-spacing-104: ;--jkl-spacing-168: ;--jkl-spacing-16-24: ;--jkl-spacing-24-40: ;--jkl-spacing-24-32: ;--jkl-spacing-32-40: ;--jkl-spacing-40-64: ;--jkl-spacing-64-104: ;--jkl-spacing-104-168: ;--jkl-spacing-16-16-24: ;--jkl-spacing-16-24-32: ;--jkl-spacing-16-24-40: ;--jkl-spacing-24-24-32: ;--jkl-spacing-24-24-40: ;--jkl-spacing-24-32-40: ;--jkl-spacing-32-32-40: ;--jkl-spacing-32-40-64: ;--jkl-spacing-40-40-64: ;--jkl-spacing-40-64-104: ;--jkl-spacing-64-64-104: ;--jkl-spacing-64-104-168: ;--jkl-spacing-104-104-168: }@media (min-width:680px){:root{--jkl-spacing-16-24: ;--jkl-spacing-24-40: ;--jkl-spacing-24-32: ;--jkl-spacing-32-40: ;--jkl-spacing-40-64: ;--jkl-spacing-64-104: ;--jkl-spacing-104-168: ;--jkl-spacing-16-16-24: ;--jkl-spacing-16-24-32: ;--jkl-spacing-16-24-40: ;--jkl-spacing-24-24-32: ;--jkl-spacing-24-24-40: ;--jkl-spacing-24-32-40: ;--jkl-spacing-32-32-40: ;--jkl-spacing-32-40-64: ;--jkl-spacing-40-40-64: ;--jkl-spacing-40-64-104: ;--jkl-spacing-64-64-104: ;--jkl-spacing-64-104-168: ;--jkl-spacing-104-104-168: }}@media (min-width:1200px){:root{--jkl-spacing-16-16-24: ;--jkl-spacing-16-24-32: ;--jkl-spacing-16-24-40: ;--jkl-spacing-24-24-32: ;--jkl-spacing-24-24-40: ;--jkl-spacing-24-32-40: ;--jkl-spacing-32-32-40: ;--jkl-spacing-32-40-64: ;--jkl-spacing-40-40-64: ;--jkl-spacing-40-64-104: ;--jkl-spacing-64-64-104: ;--jkl-spacing-64-104-168: ;--jkl-spacing-104-104-168: }}}@layer jokul.theme{:root{color-scheme:light dark;--jkl-color-neutral-background-page:#f4f2ef;--jkl-color-neutral-background-page:light-dark(#f4f2ef,#1b1917);--jkl-color-neutral-background-container:#f9f9f9;--jkl-color-neutral-background-container:light-dark(#f9f9f9,#313030);--jkl-color-neutral-background-action:#1b1917;--jkl-color-neutral-background-action:light-dark(#1b1917,#f9f9f9);--jkl-color-neutral-text-default:#1b1917;--jkl-color-neutral-text-default:light-dark(#1b1917,#f9f9f9);--jkl-color-neutral-text-subdued:#636060;--jkl-color-neutral-text-subdued:light-dark(#636060,#c8c5c3);--jkl-color-neutral-text-on-action:#f9f9f9;--jkl-color-neutral-text-on-action:light-dark(#f9f9f9,#1b1917);--jkl-color-neutral-border-strong:#1b1917;--jkl-color-neutral-border-strong:light-dark(#1b1917,#f9f9f9);--jkl-color-neutral-border-default:#636060;--jkl-color-neutral-border-default:light-dark(#636060,#c8c5c3);--jkl-color-neutral-border-subdued:#c8c5c3;--jkl-color-neutral-border-subdued:light-dark(#c8c5c3,#636060);--jkl-color-accent-background-page:#f4f2ef;--jkl-color-accent-background-page:light-dark(#f4f2ef,#1b1917);--jkl-color-accent-background-container:#f9f9f9;--jkl-color-accent-background-container:light-dark(#f9f9f9,#313030);--jkl-color-accent-background-action:#1b1917;--jkl-color-accent-background-action:light-dark(#1b1917,#f9f9f9);--jkl-color-accent-text-default:#1b1917;--jkl-color-accent-text-default:light-dark(#1b1917,#f9f9f9);--jkl-color-accent-text-subdued:#636060;--jkl-color-accent-text-subdued:light-dark(#636060,#c8c5c3);--jkl-color-accent-text-on-action:#f9f9f9;--jkl-color-accent-text-on-action:light-dark(#f9f9f9,#1b1917);--jkl-color-accent-border-strong:#1b1917;--jkl-color-accent-border-strong:light-dark(#1b1917,#f9f9f9);--jkl-color-accent-border-default:#636060;--jkl-color-accent-border-default:light-dark(#636060,#c8c5c3);--jkl-color-accent-border-subdued:#c8c5c3;--jkl-color-accent-border-subdued:light-dark(#c8c5c3,#636060);--jkl-color-warning-background-page:#fcf7e8;--jkl-color-warning-background-page:light-dark(#fcf7e8,#392b10);--jkl-color-warning-background-container:#f7ebc2;--jkl-color-warning-background-container:light-dark(#f7ebc2,#5a4519);--jkl-color-warning-background-action:#b98900;--jkl-color-warning-background-action:light-dark(#b98900,#e4b63a);--jkl-color-warning-text-default:#5b4200;--jkl-color-warning-text-default:light-dark(#5b4200,#fff5d9);--jkl-color-warning-text-subdued:#8b6b22;--jkl-color-warning-text-subdued:light-dark(#8b6b22,#eedfae);--jkl-color-warning-text-on-action:#1b1917;--jkl-color-warning-text-on-action:light-dark(#1b1917,#1b1917);--jkl-color-warning-border-strong:#b98900;--jkl-color-warning-border-strong:light-dark(#b98900,#e4b63a);--jkl-color-warning-border-default:#b98900;--jkl-color-warning-border-default:light-dark(#b98900,#e4b63a);--jkl-color-warning-border-subdued:#decc8d;--jkl-color-warning-border-subdued:light-dark(#decc8d,#8b6b22);--jkl-color-success-background-page:#eef7f0;--jkl-color-success-background-page:light-dark(#eef7f0,#173122);--jkl-color-success-background-container:#d7eadb;--jkl-color-success-background-container:light-dark(#d7eadb,#234530);--jkl-color-success-background-action:#2e8c4a;--jkl-color-success-background-action:light-dark(#2e8c4a,#67b479);--jkl-color-success-text-default:#1e5d31;--jkl-color-success-text-default:light-dark(#1e5d31,#f1fbf3);--jkl-color-success-text-subdued:#507a5b;--jkl-color-success-text-subdued:light-dark(#507a5b,#c9ddce);--jkl-color-success-text-on-action:#f9f9f9;--jkl-color-success-text-on-action:light-dark(#f9f9f9,#1b1917);--jkl-color-success-border-strong:#2e8c4a;--jkl-color-success-border-strong:light-dark(#2e8c4a,#67b479);--jkl-color-success-border-default:#2e8c4a;--jkl-color-success-border-default:light-dark(#2e8c4a,#67b479);--jkl-color-success-border-subdued:#94b79b;--jkl-color-success-border-subdued:light-dark(#94b79b,#507a5b);--jkl-color-info-background-page:#eef5fe;--jkl-color-info-background-page:light-dark(#eef5fe,#162a40);--jkl-color-info-background-container:#ddebfb;--jkl-color-info-background-container:light-dark(#ddebfb,#264261);--jkl-color-info-background-action:#4aa3f0;--jkl-color-info-background-action:light-dark(#4aa3f0,#7ebef4);--jkl-color-info-text-default:#1b3b60;--jkl-color-info-text-default:light-dark(#1b3b60,#f5faff);--jkl-color-info-text-subdued:#4e6c8e;--jkl-color-info-text-subdued:light-dark(#4e6c8e,#d7e9f8);--jkl-color-info-text-on-action:#f9f9f9;--jkl-color-info-text-on-action:light-dark(#f9f9f9,#1b1917);--jkl-color-info-border-strong:#4aa3f0;--jkl-color-info-border-strong:light-dark(#4aa3f0,#7ebef4);--jkl-color-info-border-default:#4aa3f0;--jkl-color-info-border-default:light-dark(#4aa3f0,#7ebef4);--jkl-color-info-border-subdued:#a9a9ca;--jkl-color-info-border-subdued:light-dark(#a9a9ca,#4e6c8e);--jkl-color-error-background-page:#fdeeee;--jkl-color-error-background-page:light-dark(#fdeeee,#3a1c1c);--jkl-color-error-background-container:#f8d1d1;--jkl-color-error-background-container:light-dark(#f8d1d1,#5b2828);--jkl-color-error-background-action:#e84b3c;--jkl-color-error-background-action:light-dark(#e84b3c,#f27b70);--jkl-color-error-text-default:#7b1f18;--jkl-color-error-text-default:light-dark(#7b1f18,#fff1ef);--jkl-color-error-text-subdued:#a14e46;--jkl-color-error-text-subdued:light-dark(#a14e46,#f1c8c4);--jkl-color-error-text-on-action:#f9f9f9;--jkl-color-error-text-on-action:light-dark(#f9f9f9,#1b1917);--jkl-color-error-border-strong:#e84b3c;--jkl-color-error-border-strong:light-dark(#e84b3c,#f27b70);--jkl-color-error-border-default:#e84b3c;--jkl-color-error-border-default:light-dark(#e84b3c,#f27b70);--jkl-color-error-border-subdued:#de9e9e;--jkl-color-error-border-subdued:light-dark(#de9e9e,#a14e46)}:root,[data-variant=neutral]{--jkl-color-background-page:var(--jkl-color-neutral-background-page);--jkl-color-background-container:var(--jkl-color-neutral-background-container);--jkl-color-background-action:var(--jkl-color-neutral-background-action);--jkl-color-text-default:var(--jkl-color-neutral-text-default);--jkl-color-text-subdued:var(--jkl-color-neutral-text-subdued);--jkl-color-text-on-action:var(--jkl-color-neutral-text-on-action);--jkl-color-border-strong:var(--jkl-color-neutral-border-strong);--jkl-color-border-default:var(--jkl-color-neutral-border-default);--jkl-color-border-subdued:var(--jkl-color-neutral-border-subdued)}[data-variant=accent]{--jkl-color-background-page:var(--jkl-color-accent-background-page);--jkl-color-background-container:var(--jkl-color-accent-background-container);--jkl-color-background-action:var(--jkl-color-accent-background-action);--jkl-color-text-default:var(--jkl-color-accent-text-default);--jkl-color-text-subdued:var(--jkl-color-accent-text-subdued);--jkl-color-text-on-action:var(--jkl-color-accent-text-on-action);--jkl-color-border-strong:var(--jkl-color-accent-border-strong);--jkl-color-border-default:var(--jkl-color-accent-border-default);--jkl-color-border-subdued:var(--jkl-color-accent-border-subdued)}[data-theme=light]{color-scheme:light}[data-theme=dark]{color-scheme:dark}}@layer jokul.theme{[data-brand=dnb]{--jkl-color-neutral-background-page:#f8f8f8;--jkl-color-neutral-background-page:light-dark(#f8f8f8,#000);--jkl-color-neutral-background-container:#fff;--jkl-color-neutral-background-container:light-dark(#fff,#333);--jkl-color-neutral-background-action:#000;--jkl-color-neutral-background-action:light-dark(#000,#fff);--jkl-color-neutral-text-default:#000;--jkl-color-neutral-text-default:light-dark(#000,#fff);--jkl-color-neutral-text-subdued:#737373;--jkl-color-neutral-text-subdued:light-dark(#737373,#ccc);--jkl-color-neutral-text-on-action:#fff;--jkl-color-neutral-text-on-action:light-dark(#fff,#000);--jkl-color-neutral-border-strong:#000;--jkl-color-neutral-border-strong:light-dark(#000,#fff);--jkl-color-neutral-border-default:#737373;--jkl-color-neutral-border-default:light-dark(#737373,#ccc);--jkl-color-neutral-border-subdued:#ccc;--jkl-color-neutral-border-subdued:light-dark(#ccc,#737373);--jkl-color-accent-background-page:#f4f2ef;--jkl-color-accent-background-page:light-dark(#f4f2ef,#1b1917);--jkl-color-accent-background-container:#f9f9f9;--jkl-color-accent-background-container:light-dark(#f9f9f9,#313030);--jkl-color-accent-background-action:#007272;--jkl-color-accent-background-action:light-dark(#007272,#a5e1d2);--jkl-color-accent-text-default:#40342c;--jkl-color-accent-text-default:light-dark(#40342c,#f3e9e0);--jkl-color-accent-text-subdued:#6b5b4f;--jkl-color-accent-text-subdued:light-dark(#6b5b4f,#d2bdae);--jkl-color-accent-text-on-action:#f9f9f9;--jkl-color-accent-text-on-action:light-dark(#f9f9f9,#1b1917);--jkl-color-accent-border-strong:#007272;--jkl-color-accent-border-strong:light-dark(#007272,#a5e1d2);--jkl-color-accent-border-default:#007272;--jkl-color-accent-border-default:light-dark(#007272,#a5e1d2);--jkl-color-accent-border-subdued:#b3d5d5;--jkl-color-accent-border-subdued:light-dark(#b3d5d5,#d2f0e9);--jkl-color-warning-background-page:#fcf7e8;--jkl-color-warning-background-page:light-dark(#fcf7e8,#392b10);--jkl-color-warning-background-container:#f7ebc2;--jkl-color-warning-background-container:light-dark(#f7ebc2,#5a4519);--jkl-color-warning-background-action:#b98900;--jkl-color-warning-background-action:light-dark(#b98900,#e4b63a);--jkl-color-warning-text-default:#5b4200;--jkl-color-warning-text-default:light-dark(#5b4200,#fff5d9);--jkl-color-warning-text-subdued:#8b6b22;--jkl-color-warning-text-subdued:light-dark(#8b6b22,#eedfae);--jkl-color-warning-text-on-action:#1b1917;--jkl-color-warning-text-on-action:light-dark(#1b1917,#1b1917);--jkl-color-warning-border-strong:#b98900;--jkl-color-warning-border-strong:light-dark(#b98900,#e4b63a);--jkl-color-warning-border-default:#b98900;--jkl-color-warning-border-default:light-dark(#b98900,#e4b63a);--jkl-color-warning-border-subdued:#decc8d;--jkl-color-warning-border-subdued:light-dark(#decc8d,#8b6b22);--jkl-color-success-background-page:#eef7f0;--jkl-color-success-background-page:light-dark(#eef7f0,#173122);--jkl-color-success-background-container:#d7eadb;--jkl-color-success-background-container:light-dark(#d7eadb,#234530);--jkl-color-success-background-action:#2e8c4a;--jkl-color-success-background-action:light-dark(#2e8c4a,#67b479);--jkl-color-success-text-default:#1e5d31;--jkl-color-success-text-default:light-dark(#1e5d31,#f1fbf3);--jkl-color-success-text-subdued:#507a5b;--jkl-color-success-text-subdued:light-dark(#507a5b,#c9ddce);--jkl-color-success-text-on-action:#f9f9f9;--jkl-color-success-text-on-action:light-dark(#f9f9f9,#1b1917);--jkl-color-success-border-strong:#2e8c4a;--jkl-color-success-border-strong:light-dark(#2e8c4a,#67b479);--jkl-color-success-border-default:#2e8c4a;--jkl-color-success-border-default:light-dark(#2e8c4a,#67b479);--jkl-color-success-border-subdued:#94b79b;--jkl-color-success-border-subdued:light-dark(#94b79b,#507a5b);--jkl-color-info-background-page:#eef5fe;--jkl-color-info-background-page:light-dark(#eef5fe,#162a40);--jkl-color-info-background-container:#ddebfb;--jkl-color-info-background-container:light-dark(#ddebfb,#264261);--jkl-color-info-background-action:#4aa3f0;--jkl-color-info-background-action:light-dark(#4aa3f0,#7ebef4);--jkl-color-info-text-default:#1b3b60;--jkl-color-info-text-default:light-dark(#1b3b60,#f5faff);--jkl-color-info-text-subdued:#4e6c8e;--jkl-color-info-text-subdued:light-dark(#4e6c8e,#d7e9f8);--jkl-color-info-text-on-action:#f9f9f9;--jkl-color-info-text-on-action:light-dark(#f9f9f9,#1b1917);--jkl-color-info-border-strong:#4aa3f0;--jkl-color-info-border-strong:light-dark(#4aa3f0,#7ebef4);--jkl-color-info-border-default:#4aa3f0;--jkl-color-info-border-default:light-dark(#4aa3f0,#7ebef4);--jkl-color-info-border-subdued:#a9a9ca;--jkl-color-info-border-subdued:light-dark(#a9a9ca,#4e6c8e);--jkl-color-error-background-page:#fdeeee;--jkl-color-error-background-page:light-dark(#fdeeee,#3a1c1c);--jkl-color-error-background-container:#f8d1d1;--jkl-color-error-background-container:light-dark(#f8d1d1,#5b2828);--jkl-color-error-background-action:#e84b3c;--jkl-color-error-background-action:light-dark(#e84b3c,#f27b70);--jkl-color-error-text-default:#7b1f18;--jkl-color-error-text-default:light-dark(#7b1f18,#fff1ef);--jkl-color-error-text-subdued:#a14e46;--jkl-color-error-text-subdued:light-dark(#a14e46,#f1c8c4);--jkl-color-error-text-on-action:#f9f9f9;--jkl-color-error-text-on-action:light-dark(#f9f9f9,#1b1917);--jkl-color-error-border-strong:#e84b3c;--jkl-color-error-border-strong:light-dark(#e84b3c,#f27b70);--jkl-color-error-border-default:#e84b3c;--jkl-color-error-border-default:light-dark(#e84b3c,#f27b70);--jkl-color-error-border-subdued:#de9e9e;--jkl-color-error-border-subdued:light-dark(#de9e9e,#a14e46)}}@layer jokul.theme{[data-brand=eika]{--jkl-color-neutral-background-page:#f4f2ef;--jkl-color-neutral-background-page:light-dark(#f4f2ef,#1b1917);--jkl-color-neutral-background-container:#f9f9f9;--jkl-color-neutral-background-container:light-dark(#f9f9f9,#313030);--jkl-color-neutral-background-action:#1b1917;--jkl-color-neutral-background-action:light-dark(#1b1917,#f9f9f9);--jkl-color-neutral-text-default:#1b1917;--jkl-color-neutral-text-default:light-dark(#1b1917,#f9f9f9);--jkl-color-neutral-text-subdued:#636060;--jkl-color-neutral-text-subdued:light-dark(#636060,#c8c5c3);--jkl-color-neutral-text-on-action:#f9f9f9;--jkl-color-neutral-text-on-action:light-dark(#f9f9f9,#1b1917);--jkl-color-neutral-border-strong:#1b1917;--jkl-color-neutral-border-strong:light-dark(#1b1917,#f9f9f9);--jkl-color-neutral-border-default:#636060;--jkl-color-neutral-border-default:light-dark(#636060,#c8c5c3);--jkl-color-neutral-border-subdued:#c8c5c3;--jkl-color-neutral-border-subdued:light-dark(#c8c5c3,#636060);--jkl-color-accent-background-page:#f4f2ef;--jkl-color-accent-background-page:light-dark(#f4f2ef,#1b1917);--jkl-color-accent-background-container:#f9f9f9;--jkl-color-accent-background-container:light-dark(#f9f9f9,#313030);--jkl-color-accent-background-action:#90d000;--jkl-color-accent-background-action:light-dark(#90d000,#d3ec99);--jkl-color-accent-text-default:#1b1917;--jkl-color-accent-text-default:light-dark(#1b1917,#f9f9f9);--jkl-color-accent-text-subdued:#636060;--jkl-color-accent-text-subdued:light-dark(#636060,#c8c5c3);--jkl-color-accent-text-on-action:#00383d;--jkl-color-accent-text-on-action:light-dark(#00383d,#00383d);--jkl-color-accent-border-strong:#90d000;--jkl-color-accent-border-strong:light-dark(#90d000,#d3ec99);--jkl-color-accent-border-default:#90d000;--jkl-color-accent-border-default:light-dark(#90d000,#d3ec99);--jkl-color-accent-border-subdued:#d3ec99;--jkl-color-accent-border-subdued:light-dark(#d3ec99,#f4fae6);--jkl-color-warning-background-page:#fcf7e8;--jkl-color-warning-background-page:light-dark(#fcf7e8,#392b10);--jkl-color-warning-background-container:#f7ebc2;--jkl-color-warning-background-container:light-dark(#f7ebc2,#5a4519);--jkl-color-warning-background-action:#b98900;--jkl-color-warning-background-action:light-dark(#b98900,#e4b63a);--jkl-color-warning-text-default:#5b4200;--jkl-color-warning-text-default:light-dark(#5b4200,#fff5d9);--jkl-color-warning-text-subdued:#8b6b22;--jkl-color-warning-text-subdued:light-dark(#8b6b22,#eedfae);--jkl-color-warning-text-on-action:#1b1917;--jkl-color-warning-text-on-action:light-dark(#1b1917,#1b1917);--jkl-color-warning-border-strong:#b98900;--jkl-color-warning-border-strong:light-dark(#b98900,#e4b63a);--jkl-color-warning-border-default:#b98900;--jkl-color-warning-border-default:light-dark(#b98900,#e4b63a);--jkl-color-warning-border-subdued:#decc8d;--jkl-color-warning-border-subdued:light-dark(#decc8d,#8b6b22);--jkl-color-success-background-page:#eef7f0;--jkl-color-success-background-page:light-dark(#eef7f0,#173122);--jkl-color-success-background-container:#d7eadb;--jkl-color-success-background-container:light-dark(#d7eadb,#234530);--jkl-color-success-background-action:#2e8c4a;--jkl-color-success-background-action:light-dark(#2e8c4a,#67b479);--jkl-color-success-text-default:#1e5d31;--jkl-color-success-text-default:light-dark(#1e5d31,#f1fbf3);--jkl-color-success-text-subdued:#507a5b;--jkl-color-success-text-subdued:light-dark(#507a5b,#c9ddce);--jkl-color-success-text-on-action:#f9f9f9;--jkl-color-success-text-on-action:light-dark(#f9f9f9,#1b1917);--jkl-color-success-border-strong:#2e8c4a;--jkl-color-success-border-strong:light-dark(#2e8c4a,#67b479);--jkl-color-success-border-default:#2e8c4a;--jkl-color-success-border-default:light-dark(#2e8c4a,#67b479);--jkl-color-success-border-subdued:#94b79b;--jkl-color-success-border-subdued:light-dark(#94b79b,#507a5b);--jkl-color-info-background-page:#eef5fe;--jkl-color-info-background-page:light-dark(#eef5fe,#162a40);--jkl-color-info-background-container:#ddebfb;--jkl-color-info-background-container:light-dark(#ddebfb,#264261);--jkl-color-info-background-action:#4aa3f0;--jkl-color-info-background-action:light-dark(#4aa3f0,#7ebef4);--jkl-color-info-text-default:#1b3b60;--jkl-color-info-text-default:light-dark(#1b3b60,#f5faff);--jkl-color-info-text-subdued:#4e6c8e;--jkl-color-info-text-subdued:light-dark(#4e6c8e,#d7e9f8);--jkl-color-info-text-on-action:#f9f9f9;--jkl-color-info-text-on-action:light-dark(#f9f9f9,#1b1917);--jkl-color-info-border-strong:#4aa3f0;--jkl-color-info-border-strong:light-dark(#4aa3f0,#7ebef4);--jkl-color-info-border-default:#4aa3f0;--jkl-color-info-border-default:light-dark(#4aa3f0,#7ebef4);--jkl-color-info-border-subdued:#a9a9ca;--jkl-color-info-border-subdued:light-dark(#a9a9ca,#4e6c8e);--jkl-color-error-background-page:#fdeeee;--jkl-color-error-background-page:light-dark(#fdeeee,#3a1c1c);--jkl-color-error-background-container:#f8d1d1;--jkl-color-error-background-container:light-dark(#f8d1d1,#5b2828);--jkl-color-error-background-action:#e84b3c;--jkl-color-error-background-action:light-dark(#e84b3c,#f27b70);--jkl-color-error-text-default:#7b1f18;--jkl-color-error-text-default:light-dark(#7b1f18,#fff1ef);--jkl-color-error-text-subdued:#a14e46;--jkl-color-error-text-subdued:light-dark(#a14e46,#f1c8c4);--jkl-color-error-text-on-action:#f9f9f9;--jkl-color-error-text-on-action:light-dark(#f9f9f9,#1b1917);--jkl-color-error-border-strong:#e84b3c;--jkl-color-error-border-strong:light-dark(#e84b3c,#f27b70);--jkl-color-error-border-default:#e84b3c;--jkl-color-error-border-default:light-dark(#e84b3c,#f27b70);--jkl-color-error-border-subdued:#de9e9e;--jkl-color-error-border-subdued:light-dark(#de9e9e,#a14e46)}}@layer jokul.theme{[data-brand=sparebank1]{--jkl-color-neutral-background-page:#f4f2ef;--jkl-color-neutral-background-page:light-dark(#f4f2ef,#1b1917);--jkl-color-neutral-background-container:#f9f9f9;--jkl-color-neutral-background-container:light-dark(#f9f9f9,#313030);--jkl-color-neutral-background-action:#1b1917;--jkl-color-neutral-background-action:light-dark(#1b1917,#f9f9f9);--jkl-color-neutral-text-default:#1b1917;--jkl-color-neutral-text-default:light-dark(#1b1917,#f9f9f9);--jkl-color-neutral-text-subdued:#636060;--jkl-color-neutral-text-subdued:light-dark(#636060,#c8c5c3);--jkl-color-neutral-text-on-action:#f9f9f9;--jkl-color-neutral-text-on-action:light-dark(#f9f9f9,#1b1917);--jkl-color-neutral-border-strong:#1b1917;--jkl-color-neutral-border-strong:light-dark(#1b1917,#f9f9f9);--jkl-color-neutral-border-default:#636060;--jkl-color-neutral-border-default:light-dark(#636060,#c8c5c3);--jkl-color-neutral-border-subdued:#c8c5c3;--jkl-color-neutral-border-subdued:light-dark(#c8c5c3,#636060);--jkl-color-accent-background-page:#f4f2ef;--jkl-color-accent-background-page:light-dark(#f4f2ef,#1b1917);--jkl-color-accent-background-container:#f9f9f9;--jkl-color-accent-background-container:light-dark(#f9f9f9,#313030);--jkl-color-accent-background-action:#005aa4;--jkl-color-accent-background-action:light-dark(#005aa4,#9ec2e5);--jkl-color-accent-text-default:#1b1917;--jkl-color-accent-text-default:light-dark(#1b1917,#f9f9f9);--jkl-color-accent-text-subdued:#636060;--jkl-color-accent-text-subdued:light-dark(#636060,#c8c5c3);--jkl-color-accent-text-on-action:#f9f9f9;--jkl-color-accent-text-on-action:light-dark(#f9f9f9,#1b1917);--jkl-color-accent-border-strong:#005aa4;--jkl-color-accent-border-strong:light-dark(#005aa4,#9ec2e5);--jkl-color-accent-border-default:#005aa4;--jkl-color-accent-border-default:light-dark(#005aa4,#9ec2e5);--jkl-color-accent-border-subdued:#c3d9ef;--jkl-color-accent-border-subdued:light-dark(#c3d9ef,#d7e7f4);--jkl-color-warning-background-page:#fcf7e8;--jkl-color-warning-background-page:light-dark(#fcf7e8,#392b10);--jkl-color-warning-background-container:#f7ebc2;--jkl-color-warning-background-container:light-dark(#f7ebc2,#5a4519);--jkl-color-warning-background-action:#b98900;--jkl-color-warning-background-action:light-dark(#b98900,#e4b63a);--jkl-color-warning-text-default:#5b4200;--jkl-color-warning-text-default:light-dark(#5b4200,#fff5d9);--jkl-color-warning-text-subdued:#8b6b22;--jkl-color-warning-text-subdued:light-dark(#8b6b22,#eedfae);--jkl-color-warning-text-on-action:#1b1917;--jkl-color-warning-text-on-action:light-dark(#1b1917,#1b1917);--jkl-color-warning-border-strong:#b98900;--jkl-color-warning-border-strong:light-dark(#b98900,#e4b63a);--jkl-color-warning-border-default:#b98900;--jkl-color-warning-border-default:light-dark(#b98900,#e4b63a);--jkl-color-warning-border-subdued:#decc8d;--jkl-color-warning-border-subdued:light-dark(#decc8d,#8b6b22);--jkl-color-success-background-page:#eef7f0;--jkl-color-success-background-page:light-dark(#eef7f0,#173122);--jkl-color-success-background-container:#d7eadb;--jkl-color-success-background-container:light-dark(#d7eadb,#234530);--jkl-color-success-background-action:#2e8c4a;--jkl-color-success-background-action:light-dark(#2e8c4a,#67b479);--jkl-color-success-text-default:#1e5d31;--jkl-color-success-text-default:light-dark(#1e5d31,#f1fbf3);--jkl-color-success-text-subdued:#507a5b;--jkl-color-success-text-subdued:light-dark(#507a5b,#c9ddce);--jkl-color-success-text-on-action:#f9f9f9;--jkl-color-success-text-on-action:light-dark(#f9f9f9,#1b1917);--jkl-color-success-border-strong:#2e8c4a;--jkl-color-success-border-strong:light-dark(#2e8c4a,#67b479);--jkl-color-success-border-default:#2e8c4a;--jkl-color-success-border-default:light-dark(#2e8c4a,#67b479);--jkl-color-success-border-subdued:#94b79b;--jkl-color-success-border-subdued:light-dark(#94b79b,#507a5b);--jkl-color-info-background-page:#eef5fe;--jkl-color-info-background-page:light-dark(#eef5fe,#162a40);--jkl-color-info-background-container:#ddebfb;--jkl-color-info-background-container:light-dark(#ddebfb,#264261);--jkl-color-info-background-action:#4aa3f0;--jkl-color-info-background-action:light-dark(#4aa3f0,#7ebef4);--jkl-color-info-text-default:#1b3b60;--jkl-color-info-text-default:light-dark(#1b3b60,#f5faff);--jkl-color-info-text-subdued:#4e6c8e;--jkl-color-info-text-subdued:light-dark(#4e6c8e,#d7e9f8);--jkl-color-info-text-on-action:#f9f9f9;--jkl-color-info-text-on-action:light-dark(#f9f9f9,#1b1917);--jkl-color-info-border-strong:#4aa3f0;--jkl-color-info-border-strong:light-dark(#4aa3f0,#7ebef4);--jkl-color-info-border-default:#4aa3f0;--jkl-color-info-border-default:light-dark(#4aa3f0,#7ebef4);--jkl-color-info-border-subdued:#a9a9ca;--jkl-color-info-border-subdued:light-dark(#a9a9ca,#4e6c8e);--jkl-color-error-background-page:#fdeeee;--jkl-color-error-background-page:light-dark(#fdeeee,#3a1c1c);--jkl-color-error-background-container:#f8d1d1;--jkl-color-error-background-container:light-dark(#f8d1d1,#5b2828);--jkl-color-error-background-action:#e84b3c;--jkl-color-error-background-action:light-dark(#e84b3c,#f27b70);--jkl-color-error-text-default:#7b1f18;--jkl-color-error-text-default:light-dark(#7b1f18,#fff1ef);--jkl-color-error-text-subdued:#a14e46;--jkl-color-error-text-subdued:light-dark(#a14e46,#f1c8c4);--jkl-color-error-text-on-action:#f9f9f9;--jkl-color-error-text-on-action:light-dark(#f9f9f9,#1b1917);--jkl-color-error-border-strong:#e84b3c;--jkl-color-error-border-strong:light-dark(#e84b3c,#f27b70);--jkl-color-error-border-default:#e84b3c;--jkl-color-error-border-default:light-dark(#e84b3c,#f27b70);--jkl-color-error-border-subdued:#de9e9e;--jkl-color-error-border-subdued:light-dark(#de9e9e,#a14e46)}}@layer jokul.theme{:root,[data-size=medium],[data-size]{--jkl-unit-10:8px;--jkl-unit-base:8px;--jkl-font-size-1:14px;--jkl-font-size-2:16px;--jkl-font-size-3:18px;--jkl-font-size-4:20px;--jkl-font-size-5:24px;--jkl-font-size-6:28px;--jkl-font-size-7:32px;--jkl-font-size-8:40px;--jkl-font-size-9:48px;--jkl-font-size-10:56px}[data-size=small]{--jkl-unit-10:5px;--jkl-unit-base:5px;--jkl-font-size-1:12px;--jkl-font-size-2:14px;--jkl-font-size-3:16px;--jkl-font-size-4:18px;--jkl-font-size-5:20px;--jkl-font-size-6:24px;--jkl-font-size-7:28px;--jkl-font-size-8:32px;--jkl-font-size-9:40px;--jkl-font-size-10:48px}[data-size=large]{--jkl-unit-10:11px;--jkl-unit-base:11px;--jkl-font-size-1:14px;--jkl-font-size-2:16px;--jkl-font-size-3:18px;--jkl-font-size-4:20px;--jkl-font-size-5:24px;--jkl-font-size-6:28px;--jkl-font-size-7:32px;--jkl-font-size-8:40px;--jkl-font-size-9:48px;--jkl-font-size-10:56px}}@layer jokul.theme{:root,[data-size],[data-theme]{--jkl-unit-0:0;--jkl-spacing-0:0rem;--jkl-spacing-2:0.125rem;--jkl-spacing-4:0.25rem;--jkl-spacing-8:0.5rem;--jkl-spacing-12:0.75rem;--jkl-spacing-16:1rem;--jkl-spacing-24:1.5rem;--jkl-spacing-32:2rem;--jkl-spacing-40:2.5rem;--jkl-spacing-64:4rem;--jkl-spacing-104:6.5rem;--jkl-spacing-168:10.5rem;--jkl-spacing-none:0;--jkl-border-width-1:0.0625rem;--jkl-border-width-2:0.125rem;--jkl-border-width-3:0.1875rem;--jkl-border-radius-none:0;--jkl-border-radius-xs:0.25rem;--jkl-border-radius-s:0.5rem;--jkl-border-radius-m:0.75rem;--jkl-border-radius-l:1rem;--jkl-border-radius-full:9999px;--jkl-breakpoint-small:0;--jkl-breakpoint-medium:680px;--jkl-breakpoint-large:1200px;--jkl-breakpoint-xl:1600px;--jkl-motion-timing-energetic:75ms;--jkl-motion-timing-snappy:100ms;--jkl-motion-timing-productive:150ms;--jkl-motion-timing-polite:200ms;--jkl-motion-timing-expressive:250ms;--jkl-motion-timing-lazy:400ms;--jkl-motion-easing-standard:ease;--jkl-motion-easing-entrance:ease-out;--jkl-motion-easing-exit:ease-in;--jkl-motion-easing-ease-in-bounce-out:cubic-bezier(0,0,0.375,1.17);--jkl-motion-easing-focus:cubic-bezier(0.6,0.2,0.35,1);--jkl-font-weight-normal:400;--jkl-font-weight-bold:700;--jkl-font-family-regular:"Fremtind Grotesk","Adjusted Arial Fallback",Arial,sans-serif;--jkl-font-family-display:"Fremtind Grotesk Display","Adjusted Arial Display Fallback",Arial,sans-serif;--jkl-font-family-mono:"Fremtind Grotesk Mono","Adjusted Courier New Fallback",-apple-system,BlinkMacSystemFont,monospace;--jkl-line-height-flush:1;--jkl-line-height-tight:1.3;--jkl-line-height-relaxed:1.6;--jkl-unit-15:calc(var(--jkl-unit-base)*1.5);--jkl-unit-20:calc(var(--jkl-unit-base)*2);--jkl-unit-25:calc(var(--jkl-unit-base)*2.5);--jkl-unit-30:calc(var(--jkl-unit-base)*3);--jkl-unit-35:calc(var(--jkl-unit-base)*3.5);--jkl-unit-40:calc(var(--jkl-unit-base)*4);--jkl-unit-50:calc(var(--jkl-unit-base)*5);--jkl-unit-60:calc(var(--jkl-unit-base)*6);--jkl-unit-70:calc(var(--jkl-unit-base)*7);--jkl-unit-80:calc(var(--jkl-unit-base)*8);--jkl-unit-90:calc(var(--jkl-unit-base)*9);--jkl-unit-100:calc(var(--jkl-unit-base)*10);--jkl-unit-130:calc(var(--jkl-unit-base)*13);--jkl-unit-210:calc(var(--jkl-unit-base)*21);--jkl-unit-02:calc(var(--jkl-unit-base)*0.25);--jkl-unit-05:calc(var(--jkl-unit-base)*0.5);--jkl-spacing-2xs:var(--jkl-spacing-4);--jkl-spacing-xs:var(--jkl-spacing-8);--jkl-spacing-s:var(--jkl-spacing-16);--jkl-spacing-m:var(--jkl-spacing-24);--jkl-spacing-l:var(--jkl-spacing-40);--jkl-spacing-xl:var(--jkl-spacing-64);--jkl-spacing-2xl:var(--jkl-spacing-104);--jkl-text-style-title:var(--jkl-font-weight-normal) var(--jkl-font-size-10)/var(--jkl-line-height-tight) var(--jkl-font-family-regular);--jkl-text-style-title-small:var(--jkl-font-weight-normal) var(--jkl-font-size-9)/var(--jkl-line-height-tight) var(--jkl-font-family-regular);--jkl-text-style-heading-1:var(--jkl-font-weight-normal) var(--jkl-font-size-8)/var(--jkl-line-height-tight) var(--jkl-font-family-regular);--jkl-text-style-heading-2:var(--jkl-font-weight-normal) var(--jkl-font-size-7)/var(--jkl-line-height-tight) var(--jkl-font-family-regular);--jkl-text-style-heading-3:var(--jkl-font-weight-bold) var(--jkl-font-size-6)/var(--jkl-line-height-tight) var(--jkl-font-family-regular);--jkl-text-style-heading-4:var(--jkl-font-weight-bold) var(--jkl-font-size-5)/var(--jkl-line-height-tight) var(--jkl-font-family-regular);--jkl-text-style-heading-5:var(--jkl-font-weight-bold) var(--jkl-font-size-4)/var(--jkl-line-height-tight) var(--jkl-font-family-regular);--jkl-text-style-paragraph-large:var(--jkl-font-weight-normal) var(--jkl-font-size-5)/var(--jkl-line-height-relaxed) var(--jkl-font-family-regular);--jkl-text-style-paragraph-medium:var(--jkl-font-weight-normal) var(--jkl-font-size-3)/var(--jkl-line-height-relaxed) var(--jkl-font-family-regular);--jkl-text-style-paragraph-small:var(--jkl-font-weight-normal) var(--jkl-font-size-2)/var(--jkl-line-height-relaxed) var(--jkl-font-family-regular);--jkl-text-style-text-large:var(--jkl-font-weight-normal) var(--jkl-font-size-5)/var(--jkl-line-height-tight) var(--jkl-font-family-regular);--jkl-text-style-text-medium:var(--jkl-font-weight-normal) var(--jkl-font-size-3)/var(--jkl-line-height-tight) var(--jkl-font-family-regular);--jkl-text-style-text-small:var(--jkl-font-weight-normal) var(--jkl-font-size-2)/var(--jkl-line-height-tight) var(--jkl-font-family-regular);--jkl-text-style-text-micro:var(--jkl-font-weight-normal) var(--jkl-font-size-1)/var(--jkl-line-height-tight) var(--jkl-font-family-regular)}}@layer jokul.global{@supports (font:-apple-system-body){@media (pointer:coarse){:root{font:-apple-system-body}}}.jkl{--jkl-background-color:var(--jkl-color-background-page);--jkl-color:var(--jkl-color-text-default);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--jkl-background-color);color:var(--jkl-color);font-family:Fremtind Grotesk,Adjusted Arial Fallback,Arial,sans-serif}.jkl strong{font-weight:var(--jkl-font-weight-bold)}@media screen and (prefers-reduced-motion:reduce){*,:after,:before{animation-delay:0s!important;animation-duration:0s!important;transition:none!important}}}@layer jokul.global{[popover]{opacity:0;transition:opacity,overlay allow-discrete,display allow-discrete;transition-duration:var(--jkl-motion-timing-productive);transition-timing-function:var(--jkl-motion-easing-standard)}[popover]:popover-open{opacity:1}@starting-style{[popover]:popover-open{opacity:0}}}@layer jokul.utility{.jkl-body,.jkl-bold{font:var(--jkl-text-style-paragraph-medium)}.jkl-bold{font-weight:var(--jkl-font-weight-bold)}.jkl-small{font:var(--jkl-text-style-paragraph-small)}.jkl-title{font:var(--jkl-text-style-title)}.jkl-title-small{font:var(--jkl-text-style-title-small)}.jkl-heading-1{font:var(--jkl-text-style-heading-1)}.jkl-heading-2{font:var(--jkl-text-style-heading-2)}.jkl-heading-3{font:var(--jkl-text-style-heading-3)}.jkl-heading-4{font:var(--jkl-text-style-heading-4)}.jkl-heading-5{font:var(--jkl-text-style-heading-5)}.jkl-paragraph-large{font:var(--jkl-text-style-paragraph-large)}.jkl-paragraph-medium{font:var(--jkl-text-style-paragraph-medium)}.jkl-paragraph-small{font:var(--jkl-text-style-paragraph-small)}.jkl-text-large{font:var(--jkl-text-style-text-large)}.jkl-text-medium{font:var(--jkl-text-style-text-medium)}.jkl-text-small{font:var(--jkl-text-style-text-small)}.jkl-text-micro{font:var(--jkl-text-style-text-micro)}.jkl-sr-only{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}}@layer jokul.utility{.jkl-sr-only--focusable:active,.jkl-sr-only--focusable:focus{clip:auto!important;-webkit-clip-path:none!important;clip-path:none!important;height:auto!important;margin:auto!important;overflow:visible!important;white-space:normal!important;width:auto!important}}@layer jokul.utility{.jkl-spacing-2--all{margin:var(--jkl-spacing-2)}.jkl-spacing-2--top{margin-top:var(--jkl-spacing-2)}.jkl-spacing-2--bottom{margin-bottom:var(--jkl-spacing-2)}.jkl-spacing-2--left{margin-left:var(--jkl-spacing-2)}.jkl-spacing-2--right{margin-right:var(--jkl-spacing-2)}.jkl-spacing-4--all{margin:var(--jkl-spacing-4)}.jkl-spacing-4--top{margin-top:var(--jkl-spacing-4)}.jkl-spacing-4--bottom{margin-bottom:var(--jkl-spacing-4)}.jkl-spacing-4--left{margin-left:var(--jkl-spacing-4)}.jkl-spacing-4--right{margin-right:var(--jkl-spacing-4)}.jkl-spacing-8--all{margin:var(--jkl-spacing-8)}.jkl-spacing-8--top{margin-top:var(--jkl-spacing-8)}.jkl-spacing-8--bottom{margin-bottom:var(--jkl-spacing-8)}.jkl-spacing-8--left{margin-left:var(--jkl-spacing-8)}.jkl-spacing-8--right{margin-right:var(--jkl-spacing-8)}.jkl-spacing-12--all{margin:var(--jkl-spacing-12)}.jkl-spacing-12--top{margin-top:var(--jkl-spacing-12)}.jkl-spacing-12--bottom{margin-bottom:var(--jkl-spacing-12)}.jkl-spacing-12--left{margin-left:var(--jkl-spacing-12)}.jkl-spacing-12--right{margin-right:var(--jkl-spacing-12)}.jkl-spacing-16--all{margin:var(--jkl-spacing-16)}.jkl-spacing-16--top{margin-top:var(--jkl-spacing-16)}.jkl-spacing-16--bottom{margin-bottom:var(--jkl-spacing-16)}.jkl-spacing-16--left{margin-left:var(--jkl-spacing-16)}.jkl-spacing-16--right{margin-right:var(--jkl-spacing-16)}.jkl-spacing-24--all{margin:var(--jkl-spacing-24)}.jkl-spacing-24--top{margin-top:var(--jkl-spacing-24)}.jkl-spacing-24--bottom{margin-bottom:var(--jkl-spacing-24)}.jkl-spacing-24--left{margin-left:var(--jkl-spacing-24)}.jkl-spacing-24--right{margin-right:var(--jkl-spacing-24)}.jkl-spacing-32--all{margin:var(--jkl-spacing-32)}.jkl-spacing-32--top{margin-top:var(--jkl-spacing-32)}.jkl-spacing-32--bottom{margin-bottom:var(--jkl-spacing-32)}.jkl-spacing-32--left{margin-left:var(--jkl-spacing-32)}.jkl-spacing-32--right{margin-right:var(--jkl-spacing-32)}.jkl-spacing-40--all{margin:var(--jkl-spacing-40)}.jkl-spacing-40--top{margin-top:var(--jkl-spacing-40)}.jkl-spacing-40--bottom{margin-bottom:var(--jkl-spacing-40)}.jkl-spacing-40--left{margin-left:var(--jkl-spacing-40)}.jkl-spacing-40--right{margin-right:var(--jkl-spacing-40)}.jkl-spacing-64--all{margin:var(--jkl-spacing-64)}.jkl-spacing-64--top{margin-top:var(--jkl-spacing-64)}.jkl-spacing-64--bottom{margin-bottom:var(--jkl-spacing-64)}.jkl-spacing-64--left{margin-left:var(--jkl-spacing-64)}.jkl-spacing-64--right{margin-right:var(--jkl-spacing-64)}.jkl-spacing-104--all{margin:var(--jkl-spacing-104)}.jkl-spacing-104--top{margin-top:var(--jkl-spacing-104)}.jkl-spacing-104--bottom{margin-bottom:var(--jkl-spacing-104)}.jkl-spacing-104--left{margin-left:var(--jkl-spacing-104)}.jkl-spacing-104--right{margin-right:var(--jkl-spacing-104)}.jkl-spacing-168--all{margin:var(--jkl-spacing-168)}.jkl-spacing-168--top{margin-top:var(--jkl-spacing-168)}.jkl-spacing-168--bottom{margin-bottom:var(--jkl-spacing-168)}.jkl-spacing-168--left{margin-left:var(--jkl-spacing-168)}.jkl-spacing-168--right{margin-right:var(--jkl-spacing-168)}.jkl-spacing-16-24--all{margin:var(--jkl-spacing-16-24)}.jkl-spacing-16-24--top{margin-top:var(--jkl-spacing-16-24)}.jkl-spacing-16-24--bottom{margin-bottom:var(--jkl-spacing-16-24)}.jkl-spacing-16-24--left{margin-left:var(--jkl-spacing-16-24)}.jkl-spacing-16-24--right{margin-right:var(--jkl-spacing-16-24)}.jkl-spacing-24-40--all{margin:var(--jkl-spacing-24-40)}.jkl-spacing-24-40--top{margin-top:var(--jkl-spacing-24-40)}.jkl-spacing-24-40--bottom{margin-bottom:var(--jkl-spacing-24-40)}.jkl-spacing-24-40--left{margin-left:var(--jkl-spacing-24-40)}.jkl-spacing-24-40--right{margin-right:var(--jkl-spacing-24-40)}.jkl-spacing-24-32--all{margin:var(--jkl-spacing-24-32)}.jkl-spacing-24-32--top{margin-top:var(--jkl-spacing-24-32)}.jkl-spacing-24-32--bottom{margin-bottom:var(--jkl-spacing-24-32)}.jkl-spacing-24-32--left{margin-left:var(--jkl-spacing-24-32)}.jkl-spacing-24-32--right{margin-right:var(--jkl-spacing-24-32)}.jkl-spacing-32-40--all{margin:var(--jkl-spacing-32-40)}.jkl-spacing-32-40--top{margin-top:var(--jkl-spacing-32-40)}.jkl-spacing-32-40--bottom{margin-bottom:var(--jkl-spacing-32-40)}.jkl-spacing-32-40--left{margin-left:var(--jkl-spacing-32-40)}.jkl-spacing-32-40--right{margin-right:var(--jkl-spacing-32-40)}.jkl-spacing-40-64--all{margin:var(--jkl-spacing-40-64)}.jkl-spacing-40-64--top{margin-top:var(--jkl-spacing-40-64)}.jkl-spacing-40-64--bottom{margin-bottom:var(--jkl-spacing-40-64)}.jkl-spacing-40-64--left{margin-left:var(--jkl-spacing-40-64)}.jkl-spacing-40-64--right{margin-right:var(--jkl-spacing-40-64)}.jkl-spacing-64-104--all{margin:var(--jkl-spacing-64-104)}.jkl-spacing-64-104--top{margin-top:var(--jkl-spacing-64-104)}.jkl-spacing-64-104--bottom{margin-bottom:var(--jkl-spacing-64-104)}.jkl-spacing-64-104--left{margin-left:var(--jkl-spacing-64-104)}.jkl-spacing-64-104--right{margin-right:var(--jkl-spacing-64-104)}.jkl-spacing-104-168--all{margin:var(--jkl-spacing-104-168)}.jkl-spacing-104-168--top{margin-top:var(--jkl-spacing-104-168)}.jkl-spacing-104-168--bottom{margin-bottom:var(--jkl-spacing-104-168)}.jkl-spacing-104-168--left{margin-left:var(--jkl-spacing-104-168)}.jkl-spacing-104-168--right{margin-right:var(--jkl-spacing-104-168)}.jkl-spacing-16-16-24--all{margin:var(--jkl-spacing-16-16-24)}.jkl-spacing-16-16-24--top{margin-top:var(--jkl-spacing-16-16-24)}.jkl-spacing-16-16-24--bottom{margin-bottom:var(--jkl-spacing-16-16-24)}.jkl-spacing-16-16-24--left{margin-left:var(--jkl-spacing-16-16-24)}.jkl-spacing-16-16-24--right{margin-right:var(--jkl-spacing-16-16-24)}.jkl-spacing-16-24-32--all{margin:var(--jkl-spacing-16-24-32)}.jkl-spacing-16-24-32--top{margin-top:var(--jkl-spacing-16-24-32)}.jkl-spacing-16-24-32--bottom{margin-bottom:var(--jkl-spacing-16-24-32)}.jkl-spacing-16-24-32--left{margin-left:var(--jkl-spacing-16-24-32)}.jkl-spacing-16-24-32--right{margin-right:var(--jkl-spacing-16-24-32)}.jkl-spacing-16-24-40--all{margin:var(--jkl-spacing-16-24-40)}.jkl-spacing-16-24-40--top{margin-top:var(--jkl-spacing-16-24-40)}.jkl-spacing-16-24-40--bottom{margin-bottom:var(--jkl-spacing-16-24-40)}.jkl-spacing-16-24-40--left{margin-left:var(--jkl-spacing-16-24-40)}.jkl-spacing-16-24-40--right{margin-right:var(--jkl-spacing-16-24-40)}.jkl-spacing-24-24-32--all{margin:var(--jkl-spacing-24-24-32)}.jkl-spacing-24-24-32--top{margin-top:var(--jkl-spacing-24-24-32)}.jkl-spacing-24-24-32--bottom{margin-bottom:var(--jkl-spacing-24-24-32)}.jkl-spacing-24-24-32--left{margin-left:var(--jkl-spacing-24-24-32)}.jkl-spacing-24-24-32--right{margin-right:var(--jkl-spacing-24-24-32)}.jkl-spacing-24-24-40--all{margin:var(--jkl-spacing-24-24-40)}.jkl-spacing-24-24-40--top{margin-top:var(--jkl-spacing-24-24-40)}.jkl-spacing-24-24-40--bottom{margin-bottom:var(--jkl-spacing-24-24-40)}.jkl-spacing-24-24-40--left{margin-left:var(--jkl-spacing-24-24-40)}.jkl-spacing-24-24-40--right{margin-right:var(--jkl-spacing-24-24-40)}.jkl-spacing-24-32-40--all{margin:var(--jkl-spacing-24-32-40)}.jkl-spacing-24-32-40--top{margin-top:var(--jkl-spacing-24-32-40)}.jkl-spacing-24-32-40--bottom{margin-bottom:var(--jkl-spacing-24-32-40)}.jkl-spacing-24-32-40--left{margin-left:var(--jkl-spacing-24-32-40)}.jkl-spacing-24-32-40--right{margin-right:var(--jkl-spacing-24-32-40)}.jkl-spacing-32-32-40--all{margin:var(--jkl-spacing-32-32-40)}.jkl-spacing-32-32-40--top{margin-top:var(--jkl-spacing-32-32-40)}.jkl-spacing-32-32-40--bottom{margin-bottom:var(--jkl-spacing-32-32-40)}.jkl-spacing-32-32-40--left{margin-left:var(--jkl-spacing-32-32-40)}.jkl-spacing-32-32-40--right{margin-right:var(--jkl-spacing-32-32-40)}.jkl-spacing-32-40-64--all{margin:var(--jkl-spacing-32-40-64)}.jkl-spacing-32-40-64--top{margin-top:var(--jkl-spacing-32-40-64)}.jkl-spacing-32-40-64--bottom{margin-bottom:var(--jkl-spacing-32-40-64)}.jkl-spacing-32-40-64--left{margin-left:var(--jkl-spacing-32-40-64)}.jkl-spacing-32-40-64--right{margin-right:var(--jkl-spacing-32-40-64)}.jkl-spacing-40-40-64--all{margin:var(--jkl-spacing-40-40-64)}.jkl-spacing-40-40-64--top{margin-top:var(--jkl-spacing-40-40-64)}.jkl-spacing-40-40-64--bottom{margin-bottom:var(--jkl-spacing-40-40-64)}.jkl-spacing-40-40-64--left{margin-left:var(--jkl-spacing-40-40-64)}.jkl-spacing-40-40-64--right{margin-right:var(--jkl-spacing-40-40-64)}.jkl-spacing-40-64-104--all{margin:var(--jkl-spacing-40-64-104)}.jkl-spacing-40-64-104--top{margin-top:var(--jkl-spacing-40-64-104)}.jkl-spacing-40-64-104--bottom{margin-bottom:var(--jkl-spacing-40-64-104)}.jkl-spacing-40-64-104--left{margin-left:var(--jkl-spacing-40-64-104)}.jkl-spacing-40-64-104--right{margin-right:var(--jkl-spacing-40-64-104)}.jkl-spacing-64-64-104--all{margin:var(--jkl-spacing-64-64-104)}.jkl-spacing-64-64-104--top{margin-top:var(--jkl-spacing-64-64-104)}.jkl-spacing-64-64-104--bottom{margin-bottom:var(--jkl-spacing-64-64-104)}.jkl-spacing-64-64-104--left{margin-left:var(--jkl-spacing-64-64-104)}.jkl-spacing-64-64-104--right{margin-right:var(--jkl-spacing-64-64-104)}.jkl-spacing-64-104-168--all{margin:var(--jkl-spacing-64-104-168)}.jkl-spacing-64-104-168--top{margin-top:var(--jkl-spacing-64-104-168)}.jkl-spacing-64-104-168--bottom{margin-bottom:var(--jkl-spacing-64-104-168)}.jkl-spacing-64-104-168--left{margin-left:var(--jkl-spacing-64-104-168)}.jkl-spacing-64-104-168--right{margin-right:var(--jkl-spacing-64-104-168)}.jkl-spacing-104-104-168--all{margin:var(--jkl-spacing-104-104-168)}.jkl-spacing-104-104-168--top{margin-top:var(--jkl-spacing-104-104-168)}.jkl-spacing-104-104-168--bottom{margin-bottom:var(--jkl-spacing-104-104-168)}.jkl-spacing-104-104-168--left{margin-left:var(--jkl-spacing-104-104-168)}.jkl-spacing-104-104-168--right{margin-right:var(--jkl-spacing-104-104-168)}.jkl-spacing-0--all{margin:var(--jkl-spacing-0)}.jkl-spacing-0--top{margin-top:var(--jkl-spacing-0)}.jkl-spacing-0--bottom{margin-bottom:var(--jkl-spacing-0)}.jkl-spacing-0--left{margin-left:var(--jkl-spacing-0)}.jkl-spacing-0--right{margin-right:var(--jkl-spacing-0)}.jkl-spacing-none--all{margin:var(--jkl-spacing-none)}.jkl-spacing-none--top{margin-top:var(--jkl-spacing-none)}.jkl-spacing-none--bottom{margin-bottom:var(--jkl-spacing-none)}.jkl-spacing-none--left{margin-left:var(--jkl-spacing-none)}.jkl-spacing-none--right{margin-right:var(--jkl-spacing-none)}.jkl-spacing-2xs--all{margin:var(--jkl-spacing-2xs)}.jkl-spacing-2xs--top{margin-top:var(--jkl-spacing-2xs)}.jkl-spacing-2xs--bottom{margin-bottom:var(--jkl-spacing-2xs)}.jkl-spacing-2xs--left{margin-left:var(--jkl-spacing-2xs)}.jkl-spacing-2xs--right{margin-right:var(--jkl-spacing-2xs)}.jkl-spacing-xs--all{margin:var(--jkl-spacing-xs)}.jkl-spacing-xs--top{margin-top:var(--jkl-spacing-xs)}.jkl-spacing-xs--bottom{margin-bottom:var(--jkl-spacing-xs)}.jkl-spacing-xs--left{margin-left:var(--jkl-spacing-xs)}.jkl-spacing-xs--right{margin-right:var(--jkl-spacing-xs)}.jkl-spacing-s--all{margin:var(--jkl-spacing-s)}.jkl-spacing-s--top{margin-top:var(--jkl-spacing-s)}.jkl-spacing-s--bottom{margin-bottom:var(--jkl-spacing-s)}.jkl-spacing-s--left{margin-left:var(--jkl-spacing-s)}.jkl-spacing-s--right{margin-right:var(--jkl-spacing-s)}.jkl-spacing-m--all{margin:var(--jkl-spacing-m)}.jkl-spacing-m--top{margin-top:var(--jkl-spacing-m)}.jkl-spacing-m--bottom{margin-bottom:var(--jkl-spacing-m)}.jkl-spacing-m--left{margin-left:var(--jkl-spacing-m)}.jkl-spacing-m--right{margin-right:var(--jkl-spacing-m)}.jkl-spacing-l--all{margin:var(--jkl-spacing-l)}.jkl-spacing-l--top{margin-top:var(--jkl-spacing-l)}.jkl-spacing-l--bottom{margin-bottom:var(--jkl-spacing-l)}.jkl-spacing-l--left{margin-left:var(--jkl-spacing-l)}.jkl-spacing-l--right{margin-right:var(--jkl-spacing-l)}.jkl-spacing-xl--all{margin:var(--jkl-spacing-xl)}.jkl-spacing-xl--top{margin-top:var(--jkl-spacing-xl)}.jkl-spacing-xl--bottom{margin-bottom:var(--jkl-spacing-xl)}.jkl-spacing-xl--left{margin-left:var(--jkl-spacing-xl)}.jkl-spacing-xl--right{margin-right:var(--jkl-spacing-xl)}.jkl-spacing-2xl--all{margin:var(--jkl-spacing-2xl)}.jkl-spacing-2xl--top{margin-top:var(--jkl-spacing-2xl)}.jkl-spacing-2xl--bottom{margin-bottom:var(--jkl-spacing-2xl)}.jkl-spacing-2xl--left{margin-left:var(--jkl-spacing-2xl)}.jkl-spacing-2xl--right{margin-right:var(--jkl-spacing-2xl)}}

package/styles/components/autosuggest/autosuggest.css

@@ -20,15 +20,12 @@
   }
   .jkl-autosuggest__no-hits-message {
     padding: var(--jkl-autosuggest-option-padding);
-    font-size: var(--jkl-font-size-2);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
+    font: var(--jkl-text-style-text-small);
     color: var(--jkl-color-text-subdued);
   }
   .jkl-autosuggest__menu {
-    background-color: var(--jkl-color-background-container-high);
-    border: 0.125rem solid var(--jkl-color-border-input-focus);
+    background-color: var(--jkl-color-background-container);
+    border: 0.125rem solid var(--jkl-color-border-strong);
     border-top: none;
     border-radius: 0 0 var(--border-radius) var(--border-radius);
     box-sizing: border-box;
@@ -48,10 +45,7 @@
     padding: 0;
   }
   .jkl-autosuggest__item {
-    font-size: var(--jkl-font-size-2);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
+    font: var(--jkl-text-style-text-small);
     color: unset;
     display: flex;
     align-items: center;
@@ -59,8 +53,8 @@
     background-color: var(--jkl-color-background-interactive);
     min-height: var(--jkl-autosuggest-option-height);
     text-align: left;
-    transition-timing-function: ease;
-    transition-duration: 150ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
     transition-property: color, background-color;
     position: relative;
     padding: var(--jkl-autosuggest-option-padding);

package/styles/components/autosuggest/autosuggest.min.css

@@ -1 +1 @@
-@layer jokul.components{.jkl-autosuggest{--border-radius:var(--jkl-border-radius-s);--jkl-autosuggest-menu-padding:var(--jkl-unit-20) var(--jkl-unit-10) 0;--jkl-autosuggest-controller-button-width:auto;--jkl-autosuggest-controller-button-padding:0 var(--jkl-unit-15);--jkl-autosuggest-controller-button-icon-size:1.25rem;--jkl-autosuggest-option-padding:var(--jkl-unit-10) 0.75em;--jkl-autosuggest-option-height:3rem;align-items:flex-start;display:flex;flex-direction:column;position:relative}.jkl-autosuggest[aria-expanded=true] .jkl-text-input-wrapper{border-radius:var(--border-radius) var(--border-radius) 0 0}.jkl-autosuggest__no-hits-message{font-size:var(--jkl-font-size-2);font-weight:400;line-height:var(--jkl-line-height-tight);padding:var(--jkl-autosuggest-option-padding);--jkl-icon-weight:300;color:var(--jkl-color-text-subdued)}.jkl-autosuggest__menu{background-color:var(--jkl-color-background-container-high);border:.125rem solid var(--jkl-color-border-input-focus);border-radius:0 0 var(--border-radius) var(--border-radius);border-top:none;box-sizing:border-box;inset:100% -.0625rem auto;margin:0;max-height:60vh;overflow-y:auto;padding:0;position:absolute;width:calc(100% + .125rem);z-index:7000;-webkit-overflow-scrolling:touch}.jkl-autosuggest__item-list{list-style-type:none;margin:0;padding:0}.jkl-autosuggest__item{font-size:var(--jkl-font-size-2);font-weight:400;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:300;align-items:center;background-color:var(--jkl-color-background-interactive);border:0;color:unset;cursor:pointer;display:flex;min-height:var(--jkl-autosuggest-option-height);padding:var(--jkl-autosuggest-option-padding);position:relative;text-align:left;transition-duration:.15s;transition-property:color,background-color;transition-timing-function:ease}.jkl-autosuggest__item--active,.jkl-autosuggest__item:focus,.jkl-autosuggest__item:hover{background-color:var(--jkl-color-background-interactive-hover);color:var(--jkl-color-text-default)}}
+@layer jokul.components{.jkl-autosuggest{--border-radius:var(--jkl-border-radius-s);--jkl-autosuggest-menu-padding:var(--jkl-unit-20) var(--jkl-unit-10) 0;--jkl-autosuggest-controller-button-width:auto;--jkl-autosuggest-controller-button-padding:0 var(--jkl-unit-15);--jkl-autosuggest-controller-button-icon-size:1.25rem;--jkl-autosuggest-option-padding:var(--jkl-unit-10) 0.75em;--jkl-autosuggest-option-height:3rem;align-items:flex-start;display:flex;flex-direction:column;position:relative}.jkl-autosuggest[aria-expanded=true] .jkl-text-input-wrapper{border-radius:var(--border-radius) var(--border-radius) 0 0}.jkl-autosuggest__no-hits-message{color:var(--jkl-color-text-subdued);font:var(--jkl-text-style-text-small);padding:var(--jkl-autosuggest-option-padding)}.jkl-autosuggest__menu{background-color:var(--jkl-color-background-container);border:.125rem solid var(--jkl-color-border-strong);border-radius:0 0 var(--border-radius) var(--border-radius);border-top:none;box-sizing:border-box;inset:100% -.0625rem auto;margin:0;max-height:60vh;overflow-y:auto;padding:0;position:absolute;width:calc(100% + .125rem);z-index:7000;-webkit-overflow-scrolling:touch}.jkl-autosuggest__item-list{list-style-type:none;margin:0;padding:0}.jkl-autosuggest__item{align-items:center;background-color:var(--jkl-color-background-interactive);border:0;color:unset;cursor:pointer;display:flex;font:var(--jkl-text-style-text-small);min-height:var(--jkl-autosuggest-option-height);padding:var(--jkl-autosuggest-option-padding);position:relative;text-align:left;transition-duration:var(--jkl-motion-timing-productive);transition-property:color,background-color;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-autosuggest__item--active,.jkl-autosuggest__item:focus,.jkl-autosuggest__item:hover{background-color:var(--jkl-color-background-interactive-hover);color:var(--jkl-color-text-default)}}

package/styles/components/autosuggest/autosuggest.scss

@@ -1,4 +1,4 @@
-@use "../../core/jkl";
+@use "../../jkl";
 
 @layer jokul.components {
     .jkl-autosuggest {
@@ -27,8 +27,8 @@
         }
 
         &__menu {
-            background-color: var(--jkl-color-background-container-high);
-            border: jkl.rem(2px) solid var(--jkl-color-border-input-focus);
+            background-color: var(--jkl-color-background-container);
+            border: jkl.rem(2px) solid var(--jkl-color-border-strong);
             border-top: none;
             border-radius: 0 0 var(--border-radius) var(--border-radius);
             box-sizing: border-box;

package/styles/{components-beta → components/beta}/description-list/description-list.css

@@ -59,6 +59,6 @@
 }
 .jkl-description-list--beta[data-separators=true] > *:not(:last-of-type) {
   --spacing: var(--jkl-spacing-s);
-  border-block-end: 1px solid var(--jkl-color-border-separator);
+  border-block-end: 1px solid var(--jkl-color-border-subdued);
   padding-block-end: var(--spacing);
 }

package/styles/{components-beta → components/beta}/description-list/description-list.min.css

@@ -1 +1 @@
-.jkl-description-list--beta{--spacing:0;column-gap:1em;container:description-list/inline-size;display:grid;grid-template-columns:1fr}.jkl-description-list--beta[data-alignment=justified]{--spacing:var(--jkl-spacing-xs);grid-template-columns:1fr -webkit-max-content;grid-template-columns:1fr max-content}.jkl-description-list--beta[data-alignment=justified] .title,.jkl-description-list--beta[data-alignment=justified] .value{grid-row:1}.jkl-description-list--beta[data-alignment=justified] .value{text-align:end}.jkl-description-list--beta[data-alignment=horizontal]{--spacing:var(--jkl-spacing-xs);grid-template-columns:-webkit-max-content 1fr;grid-template-columns:max-content 1fr}.jkl-description-list--beta[data-alignment=vertical]{--spacing:var(--jkl-spacing-s)}.jkl-description-list--beta .jkl-description-list-item--beta{display:grid;grid-column:1/-1;grid-template-columns:subgrid}@container description-list (width < 30ch){.jkl-description-list--beta .jkl-description-list-item--beta{grid-template-columns:1fr;--spacing:var(--jkl-spacing-s)}.jkl-description-list--beta .jkl-description-list-item--beta .title,.jkl-description-list--beta .jkl-description-list-item--beta .value{grid-row:unset}.jkl-description-list--beta .jkl-description-list-item--beta .value{text-align:start}}.jkl-description-list--beta .jkl-description-list-item--beta:not(:last-of-type){-webkit-margin-after:var(--spacing);margin-block-end:var(--spacing)}.jkl-description-list--beta .jkl-description-list-item--beta .title{font-weight:700}.jkl-description-list--beta .jkl-description-list-item--beta dd{-webkit-margin-start:0;margin-inline-start:0}.jkl-description-list--beta .jkl-description-list-item--beta dd.support-text{color:var(--jkl-color-text-subdued);grid-column:1/-1}.jkl-description-list--beta[data-separators=true]>:not(:last-of-type){--spacing:var(--jkl-spacing-s);-webkit-border-after:1px solid var(--jkl-color-border-separator);border-block-end:1px solid var(--jkl-color-border-separator);-webkit-padding-after:var(--spacing);padding-block-end:var(--spacing)}
+.jkl-description-list--beta{--spacing:0;column-gap:1em;container:description-list/inline-size;display:grid;grid-template-columns:1fr}.jkl-description-list--beta[data-alignment=justified]{--spacing:var(--jkl-spacing-xs);grid-template-columns:1fr -webkit-max-content;grid-template-columns:1fr max-content}.jkl-description-list--beta[data-alignment=justified] .title,.jkl-description-list--beta[data-alignment=justified] .value{grid-row:1}.jkl-description-list--beta[data-alignment=justified] .value{text-align:end}.jkl-description-list--beta[data-alignment=horizontal]{--spacing:var(--jkl-spacing-xs);grid-template-columns:-webkit-max-content 1fr;grid-template-columns:max-content 1fr}.jkl-description-list--beta[data-alignment=vertical]{--spacing:var(--jkl-spacing-s)}.jkl-description-list--beta .jkl-description-list-item--beta{display:grid;grid-column:1/-1;grid-template-columns:subgrid}@container description-list (width < 30ch){.jkl-description-list--beta .jkl-description-list-item--beta{grid-template-columns:1fr;--spacing:var(--jkl-spacing-s)}.jkl-description-list--beta .jkl-description-list-item--beta .title,.jkl-description-list--beta .jkl-description-list-item--beta .value{grid-row:unset}.jkl-description-list--beta .jkl-description-list-item--beta .value{text-align:start}}.jkl-description-list--beta .jkl-description-list-item--beta:not(:last-of-type){-webkit-margin-after:var(--spacing);margin-block-end:var(--spacing)}.jkl-description-list--beta .jkl-description-list-item--beta .title{font-weight:700}.jkl-description-list--beta .jkl-description-list-item--beta dd{-webkit-margin-start:0;margin-inline-start:0}.jkl-description-list--beta .jkl-description-list-item--beta dd.support-text{color:var(--jkl-color-text-subdued);grid-column:1/-1}.jkl-description-list--beta[data-separators=true]>:not(:last-of-type){--spacing:var(--jkl-spacing-s);-webkit-border-after:1px solid var(--jkl-color-border-subdued);border-block-end:1px solid var(--jkl-color-border-subdued);-webkit-padding-after:var(--spacing);padding-block-end:var(--spacing)}

package/styles/{components-beta → components/beta}/description-list/description-list.scss

@@ -1,4 +1,4 @@
-@use "../../core/jkl";
+@use "../../../jkl";
 
 .jkl-description-list--beta {
     --spacing: 0;
@@ -73,7 +73,7 @@
         > * {
             &:not(:last-of-type) {
                 --spacing: var(--jkl-spacing-s);
-                border-block-end: 1px solid var(--jkl-color-border-separator);
+                border-block-end: 1px solid var(--jkl-color-border-subdued);
                 padding-block-end: var(--spacing);
             }
         }

package/styles/{components-beta → components/beta}/nav-link/navlink.css

@@ -3,22 +3,19 @@
  */
 .jkl-navlink--beta {
   --border-radius: 4px;
-  --separator: 1px solid var(--jkl-color-border-separator);
+  --separator: 1px solid var(--jkl-color-border-subdued);
   display: grid;
   grid-template-columns: 1fr auto;
   align-items: center;
   column-gap: 2em;
   color: inherit;
   text-decoration: none;
-  background-color: var(--jkl-color-background-container-low);
+  background-color: var(--jkl-color-background-page);
   padding: var(--jkl-spacing-s);
   border-radius: 0;
-  font-size: var(--jkl-font-size-3);
-  line-height: var(--jkl-line-height-relaxed);
-  font-weight: 400;
-  --jkl-icon-weight: 300;
-  transition-timing-function: cubic-bezier(0, 0, 0.375, 1.17);
-  transition-duration: 150ms;
+  font: var(--jkl-text-style-paragraph-medium);
+  transition-timing-function: var(--jkl-motion-easing-ease-in-bounce-out);
+  transition-duration: var(--jkl-motion-timing-productive);
   transition-property: background-color;
 }
 .jkl-navlink--beta .title,
@@ -34,19 +31,19 @@
   grid-row: 1/span 999;
   translate: 0;
   font-family: "Fremtind Material Symbols", "Fremtind Material Symbols Fallback", sans-serif;
-  font-variation-settings: "FILL" var(--jkl-icon-fill, 0), "GRAD" var(--jkl-icon-grade, 0), "opsz" var(--jkl-icon-opsz, 24);
+  font-variation-settings: "FILL" var(--jkl-icon-fill, 0);
   font-feature-settings: "liga";
   -webkit-font-feature-settings: "liga";
   font-size: 1.3em;
-  font-weight: var(--jkl-icon-weight, 300);
+  font-weight: 400;
   line-height: 1;
   display: inline-block;
   -webkit-font-smoothing: antialiased;
-  transition-timing-function: ease;
-  transition-duration: 75ms;
+  transition-timing-function: var(--jkl-motion-easing-standard);
+  transition-duration: var(--jkl-motion-timing-energetic);
   transition-property: font-variation-settings, transform;
-  transition-timing-function: cubic-bezier(0, 0, 0.375, 1.17);
-  transition-duration: 150ms;
+  transition-timing-function: var(--jkl-motion-easing-ease-in-bounce-out);
+  transition-duration: var(--jkl-motion-timing-productive);
   transition-property: translate;
 }
 .jkl-navlink--beta:hover, .jkl-navlink--beta:focus-visible {

package/styles/components/beta/nav-link/navlink.min.css

@@ -0,0 +1 @@
+.jkl-navlink--beta{--border-radius:4px;--separator:1px solid var(--jkl-color-border-subdued);align-items:center;background-color:var(--jkl-color-background-page);border-radius:0;color:inherit;column-gap:2em;display:grid;font:var(--jkl-text-style-paragraph-medium);grid-template-columns:1fr auto;padding:var(--jkl-spacing-s);text-decoration:none;transition-duration:var(--jkl-motion-timing-productive);transition-property:background-color;transition-timing-function:var(--jkl-motion-easing-ease-in-bounce-out)}.jkl-navlink--beta .description,.jkl-navlink--beta .title{grid-column:1}.jkl-navlink--beta:has(.description) .title{font-weight:700}.jkl-navlink--beta:after{content:"arrow_forward"/"";display:inline-block;font-family:Fremtind Material Symbols,Fremtind Material Symbols Fallback,sans-serif;font-feature-settings:"liga";-webkit-font-feature-settings:"liga";font-size:1.3em;font-variation-settings:"FILL" var(--jkl-icon-fill,0);font-weight:400;grid-column:2;grid-row:1/span 999;line-height:1;translate:0;-webkit-font-smoothing:antialiased;transition-duration:var(--jkl-motion-timing-energetic);transition-duration:var(--jkl-motion-timing-productive);transition-property:font-variation-settings,transform;transition-property:translate;transition-timing-function:var(--jkl-motion-easing-standard);transition-timing-function:var(--jkl-motion-easing-ease-in-bounce-out)}.jkl-navlink--beta:focus-visible,.jkl-navlink--beta:hover{background-color:var(--jkl-color-background-interactive-selected)}.jkl-navlink--beta:focus-visible:after,.jkl-navlink--beta:hover:after{translate:4px 0}.jkl-navlink--beta:first-of-type{border-start-end-radius:var(--border-radius);border-start-start-radius:var(--border-radius)}.jkl-navlink--beta:last-of-type{border-end-end-radius:var(--border-radius);border-end-start-radius:var(--border-radius)}.jkl-navlink--beta:has(+.jkl-navlink--beta){-webkit-border-after:var(--separator);border-block-end:var(--separator)}

package/styles/{components-beta → components/beta}/nav-link/navlink.scss

@@ -1,9 +1,9 @@
-@use "../../core/jkl/index" as jkl;
-@use "../../components/icon/base-styles" as icon;
+@use "../../../jkl";
+@use "../../icon/base-styles" as icon;
 
 .jkl-navlink--beta {
     --border-radius: 4px;
-    --separator: 1px solid var(--jkl-color-border-separator);
+    --separator: 1px solid var(--jkl-color-border-subdued);
 
     display: grid;
     grid-template-columns: 1fr auto;
@@ -11,7 +11,7 @@
     column-gap: 2em;
     color: inherit;
     text-decoration: none;
-    background-color: var(--jkl-color-background-container-low);
+    background-color: var(--jkl-color-background-page);
     padding: var(--jkl-spacing-s);
     border-radius: 0;
 

package/styles/components/beta/select/_index.scss

@@ -0,0 +1,3 @@
+@forward "select";
+@use "../../icon" as icon;
+@use "../../input-group" as input-group;

package/styles/{components-beta → components/beta}/select/select.css

@@ -2,13 +2,13 @@
  * Do not edit directly, this file was auto-generated.
  */
 .jkl-select--beta {
-  --border-color: var(--jkl-color-border-input);
-  --background-color: var(transparent);
+  --border-color: var(--jkl-color-border-default);
+  --background-color: transparent;
   --color: var(--jkl-color-text-default);
   --box-shadow: 0 0 0 jkl.rem(1px) transparent;
   --border-width: 0.0625rem;
   --button-padding: calc(var(--jkl-unit-15) - var(--border-width));
-  --arrow-right: calc(var(--jkl-unit-base) * 0.25);
+  --arrow-right: var(--jkl-unit-02);
   display: block;
   position: relative;
 }
@@ -36,7 +36,7 @@
   outline: none;
 }
 .jkl-select--beta .jkl-tooltip-question-button:focus {
-  outline: 3px solid var(--jkl-color-border-action);
+  outline: 3px solid var(--jkl-color-border-strong);
   outline-offset: 0;
 }
 .jkl-select--beta-wrapper {
@@ -70,30 +70,27 @@
   --color: var(--jkl-color-text-subdued);
 }
 .jkl-select--beta select:hover {
-  --border-color: var(--jkl-color-border-input-focus);
-  --box-shadow: 0 0 0 jkl.rem(1px) var(--jkl-color-border-input-focus);
+  --border-color: var(--jkl-color-border-strong);
+  --box-shadow: 0 0 0 jkl.rem(1px) var(--jkl-color-border-strong);
 }
 .jkl-select--beta select:invalid {
-  --background-color: var(--jkl-color-background-alert-error);
-  --color: var(--jkl-color-text-on-alert-subdued);
+  --background-color: var(--jkl-color-error-background-container);
+  --color: var(--jkl-color-error-text-subdued);
 }
 .jkl-select--beta select:focus-visible {
   outline: none;
 }
 .jkl-select--beta select {
-  transition-timing-function: ease;
-  transition-duration: 150ms;
-  font-size: var(--jkl-font-size-3);
-  line-height: var(--jkl-line-height-tight);
-  font-weight: 400;
-  --jkl-icon-weight: 300;
+  transition-timing-function: var(--jkl-motion-easing-standard);
+  transition-duration: var(--jkl-motion-timing-productive);
+  font: var(--jkl-text-style-text-medium);
 }
 html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta select:focus-visible, html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta select:has(:focus-visible) {
-  outline: 3px solid var(--jkl-color-border-action);
+  outline: 3px solid var(--jkl-color-border-strong);
   outline-offset: 3px;
 }
 html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta select:has(:focus-visible) select {
-  outline: 3px solid var(--jkl-color-border-action);
+  outline: 3px solid var(--jkl-color-border-strong);
   outline-offset: 3px;
 }
 

package/styles/components/beta/select/select.min.css

@@ -0,0 +1 @@
+.jkl-select--beta{--border-color:var(--jkl-color-border-default);--background-color:transparent;--color:var(--jkl-color-text-default);--box-shadow:0 0 0 jkl.rem(1px) transparent;--border-width:0.0625rem;--button-padding:calc(var(--jkl-unit-15) - var(--border-width));--arrow-right:var(--jkl-unit-02);border-style:none;display:block;outline:0;outline-style:none;position:relative}.jkl-select--beta:active,.jkl-select--beta:focus,.jkl-select--beta:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-select--beta{border-style:revert;outline:revert;outline-style:revert}.jkl-select--beta:active,.jkl-select--beta:focus,.jkl-select--beta:hover{outline:revert;outline-style:revert}}.jkl-select--beta :focus-visible{outline:none}.jkl-select--beta .jkl-tooltip-question-button:focus{outline:3px solid var(--jkl-color-border-strong);outline-offset:0}.jkl-select--beta-wrapper{align-items:center;display:grid;grid-template-columns:1fr auto}.jkl-select--beta .jkl-icon,.jkl-select--beta select{grid-row:1}.jkl-select--beta select{background-color:var(--background-color);box-shadow:var(--box-shadow);color:var(--color);padding:var(--button-padding);-webkit-padding-end:calc(var(--button-padding) + 1.3em);-webkit-appearance:none;appearance:none;border:var(--border-width) solid var(--border-color);border-radius:var(--jkl-border-radius-s);cursor:pointer;grid-column:1/-1;height:var(--input-height);overflow:hidden;padding-inline-end:calc(var(--button-padding) + 1.3em);text-align:left;text-overflow:ellipsis;transition-property:color,border-color,box-shadow;white-space:nowrap;width:100%}.jkl-select--beta select:has(option:checked[value=""]){--color:var(--jkl-color-text-subdued)}.jkl-select--beta select:hover{--border-color:var(--jkl-color-border-strong);--box-shadow:0 0 0 jkl.rem(1px) var(--jkl-color-border-strong)}.jkl-select--beta select:invalid{--background-color:var(--jkl-color-error-background-container);--color:var(--jkl-color-error-text-subdued)}.jkl-select--beta select:focus-visible{outline:none}.jkl-select--beta select{font:var(--jkl-text-style-text-medium);transition-duration:var(--jkl-motion-timing-productive);transition-timing-function:var(--jkl-motion-easing-standard)}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta select:focus-visible,html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta select:has(:focus-visible){outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta select:has(:focus-visible) select{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-select--beta .jkl-icon{grid-column:2;pointer-events:none;-webkit-padding-end:var(--button-padding);padding-inline-end:var(--button-padding)}

package/styles/{components-beta → components/beta}/select/select.scss

@@ -1,12 +1,11 @@
 @charset "UTF-8";
 @use "sass:color";
 @use "sass:math";
-@use "../../core/jkl/index" as jkl;
-@use "../../core/jkl/colors";
+@use "../../../jkl";
 
 .jkl-select--beta {
-    --border-color: var(--jkl-color-border-input);
-    --background-color: var(transparent);
+    --border-color: var(--jkl-color-border-default);
+    --background-color: transparent;
     --color: var(--jkl-color-text-default);
     --box-shadow: 0 0 0 jkl.rem(1px) transparent;
     --border-width: #{jkl.rem(1px)};
@@ -61,13 +60,13 @@
         }
 
         &:hover {
-            --border-color: var(--jkl-color-border-input-focus);
-            --box-shadow: 0 0 0 jkl.rem(1px) var(--jkl-color-border-input-focus);
+            --border-color: var(--jkl-color-border-strong);
+            --box-shadow: 0 0 0 jkl.rem(1px) var(--jkl-color-border-strong);
         }
 
         &:invalid {
-            --background-color: var(--jkl-color-background-alert-error);
-            --color: var(--jkl-color-text-on-alert-subdued);
+            --background-color: var(--jkl-color-error-background-container);
+            --color: var(--jkl-color-error-text-subdued);
         }
 
         &:focus-visible {
@@ -78,6 +77,7 @@
         @include jkl.text-style("text-medium");
 
         @include jkl.keyboard-navigation {
+
             &:focus-visible,
             &:has(:focus-visible) {
                 @include jkl.focus-outline;
@@ -96,4 +96,4 @@
         grid-column: 2;
         padding-inline-end: var(--button-padding);
     }
-}
+}

package/styles/components/breadcrumb/breadcrumb.css

@@ -8,7 +8,7 @@
     background-image: none;
   }
   .jkl-breadcrumb a:focus-visible {
-    outline: 3px solid var(--jkl-color-border-action);
+    outline: 3px solid var(--jkl-color-border-strong);
     outline-offset: 3px;
   }
   .jkl-breadcrumb__list {

package/styles/components/breadcrumb/breadcrumb.min.css

@@ -1 +1 @@
-@layer jokul.components{.jkl-breadcrumb a[aria-current],.jkl-breadcrumb a[aria-current] *{background-image:none;text-decoration:none}.jkl-breadcrumb a:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-breadcrumb__list{display:flex;flex-wrap:wrap;list-style:none;margin:0;-webkit-padding-start:0;padding-inline-start:0}.jkl-breadcrumb__item{cursor:pointer;margin-bottom:var(--jkl-unit-10);white-space:nowrap}.jkl-breadcrumb__item-separator{padding-left:var(--jkl-unit-10);padding-right:var(--jkl-unit-10)}}
+@layer jokul.components{.jkl-breadcrumb a[aria-current],.jkl-breadcrumb a[aria-current] *{background-image:none;text-decoration:none}.jkl-breadcrumb a:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-breadcrumb__list{display:flex;flex-wrap:wrap;list-style:none;margin:0;-webkit-padding-start:0;padding-inline-start:0}.jkl-breadcrumb__item{cursor:pointer;margin-bottom:var(--jkl-unit-10);white-space:nowrap}.jkl-breadcrumb__item-separator{padding-left:var(--jkl-unit-10);padding-right:var(--jkl-unit-10)}}

package/styles/components/breadcrumb/breadcrumb.scss

@@ -1,5 +1,5 @@
 @charset "UTF-8";
-@use "../../core/jkl";
+@use "../../jkl";
 
 @layer jokul.components {
     .jkl-breadcrumb {

package/styles/components/button/button.css

@@ -10,17 +10,15 @@
     --jkl-button-padding-icon: var(--jkl-unit-20);
     --jkl-button-padding-icon-button: var(--jkl-unit-10);
     --jkl-button-tertiary-padding-icon: var(--jkl-unit-05);
+    --jkl-button-text-ink-offset: 0.1em;
     --jkl-icon-weight: var(--jkl-icon-weight-bold);
     --text-color: var(--jkl-color-text-default);
     --background-color: transparent;
     --border-radius: 0;
     --border-width: 0.0625rem;
     display: inline-block;
-    font-size: var(--jkl-font-size-3);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
-    font-weight: 700;
+    font: var(--jkl-text-style-text-medium);
+    font-weight: var(--jkl-font-weight-bold);
     cursor: pointer;
     user-select: none;
     background: var(--background-color);
@@ -35,8 +33,8 @@
     overflow: hidden;
     max-width: 100%;
     animation: a 0.3s linear;
-    transition-timing-function: ease;
-    transition-duration: 150ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
     transition-property: background-color;
   }
   .jkl-button:has(.jkl-button__text) {
@@ -52,19 +50,19 @@
     padding-inline: var(--jkl-button-padding-icon-button);
   }
   .jkl-button__label {
-    transition-timing-function: ease;
-    transition-duration: 250ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-expressive);
     transition-property: translate;
     width: 100%;
     display: flex;
     flex-direction: row;
     align-items: center;
-    gap: calc(var(--jkl-unit-base) * 0.25);
+    gap: var(--jkl-unit-02);
     pointer-events: none;
   }
   .jkl-button__loader {
-    transition-timing-function: ease;
-    transition-duration: 250ms;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-expressive);
     transition-property: opacity, translate;
     position: absolute;
     top: 50%;
@@ -74,8 +72,11 @@
     pointer-events: none;
   }
   .jkl-button__text {
+    display: block;
     width: 100%;
     max-width: 100%;
+    padding-block-start: var(--jkl-button-text-ink-offset);
+    margin-block-start: calc(var(--jkl-button-text-ink-offset) * -1);
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -88,7 +89,7 @@
     opacity: 1;
   }
   .jkl-button:focus-visible {
-    outline: 3px solid var(--jkl-color-border-action);
+    outline: 3px solid var(--jkl-color-border-strong);
     outline-offset: 3px;
   }
   .jkl-button:hover {
@@ -96,7 +97,7 @@
   }
   @media (forced-colors: active) {
     .jkl-button:hover {
-      outline: 3px solid var(--jkl-color-border-action);
+      outline: 3px solid var(--jkl-color-border-strong);
       outline-offset: 3px;
     }
   }

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

@@ -1 +1 @@
-@layer jokul.components{.jkl-button{--jkl-button-font-size:var(--jkl-typography-body-base-font-size);--jkl-button-line-height:var(--jkl-typography-body-base-line-height);--jkl-button-padding-block:var(--jkl-unit-10);--jkl-button-padding-text:var(--jkl-unit-30);--jkl-button-padding-icon:var(--jkl-unit-20);--jkl-button-padding-icon-button:var(--jkl-unit-10);--jkl-button-tertiary-padding-icon:var(--jkl-unit-05);--jkl-icon-weight:var(--jkl-icon-weight-bold);--text-color:var(--jkl-color-text-default);--background-color:transparent;--border-radius:0;--border-width:0.0625rem;display:inline-block;font-size:var(--jkl-font-size-3);font-weight:400;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:300;background:var(--background-color);border:unset;color:var(--text-color);cursor:pointer;font-weight:700;text-decoration:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;animation:a .3s linear;border-radius:var(--border-radius);max-width:100%;overflow:hidden;padding-block:var(--jkl-button-padding-block);padding-inline:var(--jkl-button-padding-text);position:relative;transition-duration:.15s;transition-property:background-color;transition-timing-function:ease}.jkl-button:has(.jkl-button__text){min-width:9.5ch}.jkl-button:has(.jkl-icon:first-child){-webkit-padding-start:var(--jkl-button-padding-icon);padding-inline-start:var(--jkl-button-padding-icon)}.jkl-button:has(.jkl-icon:last-child){-webkit-padding-end:var(--jkl-button-padding-icon);padding-inline-end:var(--jkl-button-padding-icon)}.jkl-button:has(.jkl-icon:first-child):has(.jkl-icon:last-child){padding-inline:var(--jkl-button-padding-icon-button)}.jkl-button__label{align-items:center;display:flex;flex-direction:row;gap:calc(var(--jkl-unit-base)*.25);pointer-events:none;transition-duration:.25s;transition-property:translate;transition-timing-function:ease;width:100%}.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;width:100%}.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:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-button:hover{background-color:color-mix(in srgb,var(--background-color),var(--text-color) 15%)}@media (forced-colors:active){.jkl-button:hover{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}}.jkl-button--ghost,.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)}@media (forced-colors:active){.jkl-button--primary{border:calc(var(--border-width)*2) solid Highlight}}.jkl-button--secondary{border:var(--border-width) solid var(--text-color)}.jkl-button--tertiary{border-bottom:var(--border-width) solid var(--text-color);padding-inline:var(--jkl-button-tertiary-padding-icon)}.jkl-button--tertiary:has(.jkl-icon:first-child){padding-inline:var(--jkl-button-tertiary-padding-icon) calc(var(--jkl-button-tertiary-padding-icon)*2)}.jkl-button--tertiary:has(.jkl-icon:last-child){padding-inline:calc(var(--jkl-button-tertiary-padding-icon)*2) var(--jkl-button-tertiary-padding-icon)}}
+@layer jokul.components{.jkl-button{--jkl-button-font-size:var(--jkl-typography-body-base-font-size);--jkl-button-line-height:var(--jkl-typography-body-base-line-height);--jkl-button-padding-block:var(--jkl-unit-10);--jkl-button-padding-text:var(--jkl-unit-30);--jkl-button-padding-icon:var(--jkl-unit-20);--jkl-button-padding-icon-button:var(--jkl-unit-10);--jkl-button-tertiary-padding-icon:var(--jkl-unit-05);--jkl-button-text-ink-offset:0.1em;--jkl-icon-weight:var(--jkl-icon-weight-bold);--text-color:var(--jkl-color-text-default);--background-color:transparent;--border-radius:0;--border-width:0.0625rem;background:var(--background-color);border:unset;color:var(--text-color);cursor:pointer;display:inline-block;font:var(--jkl-text-style-text-medium);font-weight:var(--jkl-font-weight-bold);text-decoration:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;animation:a .3s linear;border-radius:var(--border-radius);max-width:100%;overflow:hidden;padding-block:var(--jkl-button-padding-block);padding-inline:var(--jkl-button-padding-text);position:relative;transition-duration:var(--jkl-motion-timing-productive);transition-property:background-color;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-button:has(.jkl-button__text){min-width:9.5ch}.jkl-button:has(.jkl-icon:first-child){-webkit-padding-start:var(--jkl-button-padding-icon);padding-inline-start:var(--jkl-button-padding-icon)}.jkl-button:has(.jkl-icon:last-child){-webkit-padding-end:var(--jkl-button-padding-icon);padding-inline-end:var(--jkl-button-padding-icon)}.jkl-button:has(.jkl-icon:first-child):has(.jkl-icon:last-child){padding-inline:var(--jkl-button-padding-icon-button)}.jkl-button__label{align-items:center;display:flex;flex-direction:row;gap:var(--jkl-unit-02);pointer-events:none;transition-duration:var(--jkl-motion-timing-expressive);transition-property:translate;transition-timing-function:var(--jkl-motion-easing-standard);width:100%}.jkl-button__loader{left:50%;opacity:0;pointer-events:none;position:absolute;top:50%;transition-duration:var(--jkl-motion-timing-expressive);transition-property:opacity,translate;transition-timing-function:var(--jkl-motion-easing-standard);translate:-50% 350%}.jkl-button__text{display:block;max-width:100%;width:100%;-webkit-padding-before:var(--jkl-button-text-ink-offset);padding-block-start:var(--jkl-button-text-ink-offset);-webkit-margin-before:calc(var(--jkl-button-text-ink-offset)*-1);margin-block-start:calc(var(--jkl-button-text-ink-offset)*-1);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:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-button:hover{background-color:color-mix(in srgb,var(--background-color),var(--text-color) 15%)}@media (forced-colors:active){.jkl-button:hover{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}}.jkl-button--ghost,.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)}@media (forced-colors:active){.jkl-button--primary{border:calc(var(--border-width)*2) solid Highlight}}.jkl-button--secondary{border:var(--border-width) solid var(--text-color)}.jkl-button--tertiary{border-bottom:var(--border-width) solid var(--text-color);padding-inline:var(--jkl-button-tertiary-padding-icon)}.jkl-button--tertiary:has(.jkl-icon:first-child){padding-inline:var(--jkl-button-tertiary-padding-icon) calc(var(--jkl-button-tertiary-padding-icon)*2)}.jkl-button--tertiary:has(.jkl-icon:last-child){padding-inline:calc(var(--jkl-button-tertiary-padding-icon)*2) var(--jkl-button-tertiary-padding-icon)}}