@fremtind/jokul 4.6.1 → 4.7.1

package/styles/components/select/select.scss

@@ -141,17 +141,18 @@
         }
 
         &__options-menu {
-            position: absolute;
-            left: jkl.rem(-1px);
-            right: jkl.rem(-1px);
-            top: 100%;
-            z-index: jkl.$z-index--dropdown;
-
             background-color: var(--jkl-color-background-container-high);
             border: jkl.rem(2px) solid var(--jkl-color-border-input-focus);
-            border-top: none;
-            border-radius: 0 0 var(--border-radius) var(--border-radius);
             box-sizing: border-box;
+            // Strekker seg ut over kantene på trigger-knappen for å dekke
+            // den 1px brede borderen, slik at listen visuelt henger sammen
+            // med inputfeltet.
+            margin-inline: jkl.rem(-1px);
+            width: calc(100% + #{jkl.rem(2px)});
+            // Definerer egne tokens her fordi listen rendres i en portal og
+            // ikke arver kaskaderte custom properties fra `.jkl-select`.
+            --min-option-height: min(var(--jkl-unit-60), 3rem);
+            --option-padding: var(--jkl-unit-05) 0.75em;
 
             overflow-y: auto;
             // Sett makshøyde på listen til høyden av (maxShownOptions + 0.5) ganger høyden på ett enlinjes valg
@@ -160,9 +161,23 @@
                     var(--min-option-height)
             );
 
-            transition-property: height;
+            // Standard: lista ligger under triggeren — flat topp, runde
+            // bunnhjørner, ingen border på toppen som ville duplisert
+            // knappens border.
+            &[data-popover-placement="bottom"] {
+                border-top: none;
+                border-radius: 0 0 var(--jkl-border-radius-s)
+                    var(--jkl-border-radius-s);
+            }
 
-            @include jkl.motion;
+            // Når `flip` snur lista over knappen byttes flat side og runde
+            // hjørner, slik at lista og knappen fortsatt henger sammen
+            // visuelt.
+            &[data-popover-placement="top"] {
+                border-bottom: none;
+                border-radius: var(--jkl-border-radius-s)
+                    var(--jkl-border-radius-s) 0 0;
+            }
         }
 
         &__option-wrapper {
@@ -218,8 +233,6 @@
         &--open {
             .jkl-select__search-input,
             .jkl-select__button {
-                border-bottom-left-radius: 0;
-                border-bottom-right-radius: 0;
                 border-color: var(--jkl-color-border-input-focus);
                 background-color: var(--jkl-color-background-container-high);
                 box-shadow: 0 0 0 jkl.rem(1px)
@@ -229,6 +242,24 @@
                     transform: translateY(calc(-50% + #{jkl.rem(-3px)}));
                 }
             }
+
+            // Lista ligger under (default): flat bunn på input/knapp.
+            .jkl-select__outer-wrapper[data-popover-placement="bottom"] {
+                .jkl-select__search-input,
+                .jkl-select__button {
+                    border-bottom-left-radius: 0;
+                    border-bottom-right-radius: 0;
+                }
+            }
+
+            // Lista ligger over: flat topp på input/knapp.
+            .jkl-select__outer-wrapper[data-popover-placement="top"] {
+                .jkl-select__search-input,
+                .jkl-select__button {
+                    border-top-left-radius: 0;
+                    border-top-right-radius: 0;
+                }
+            }
         }
 
         &--invalid {
@@ -256,21 +287,88 @@
                     border-color: Highlight;
                 }
             }
+        }
+    }
 
-            & .jkl-select__option {
-                color: CanvasText;
+    // Options rendres i portal og er ikke descendants av `.jkl-select`,
+    // så forced-colors-reglene må stå på topp-nivå for å treffe dem.
+    @include jkl.forced-colors-mode {
+        .jkl-select__option {
+            color: CanvasText;
 
-                border-top: 1px solid Canvas;
-                border-bottom: 1px solid Canvas;
+            border-top: 1px solid Canvas;
+            border-bottom: 1px solid Canvas;
 
-                &:hover,
-                &:focus {
-                    border-top: 1px solid SelectedItem;
-                    border-bottom: 1px solid SelectedItem;
+            &:hover,
+            &:focus {
+                border-top: 1px solid SelectedItem;
+                border-bottom: 1px solid SelectedItem;
 
-                    @include jkl.no-grow-bold;
-                }
+                @include jkl.no-grow-bold;
             }
         }
     }
+
+    // Listen rendres i en portal via `Popover`. Vi nøytraliserer Popover sin
+    // standard padding/bakgrunn/skygge slik at `.jkl-select__options-menu`
+    // selv styrer ramme og bakgrunn — også når Select brukes inne i en
+    // Card, ExpandablePanel eller andre containere med overflow-clip.
+    // Select skal følge samme lagdeling som andre dropdown-/menykomponenter
+    // (Combobox, Datepicker, Menu) og ikke arve Popover sitt floating-nivå.
+    .jkl-popover.jkl-select__popover {
+        background: none;
+        box-shadow: none;
+        border-radius: 0;
+        z-index: jkl.$z-index--dropdown;
+    }
+
+    // Mild fade + slide-in når lista mounter i portalen. Animeres på
+    // selve listbox-en — ikke på popover-wrapperen — fordi wrapperen
+    // bærer floating-ui sin posisjonerings-`transform`. Hadde vi animert
+    // wrapperen ville `translateY` overstyrt floating-ui's transform i
+    // animasjonsvinduet, og lista ville blinket i (0,0).
+    @media (prefers-reduced-motion: no-preference) {
+        .jkl-select__options-menu {
+            animation: jkl-select-options-menu-in
+                var(--jkl-motion-timing-snappy)
+                var(--jkl-motion-easing-standard);
+
+            // Når lista flippes opp animerer vi fra motsatt retning slik
+            // at bevegelsen alltid kommer fra triggeren.
+            &[data-popover-placement="top"] {
+                animation-name: jkl-select-options-menu-in-from-top;
+            }
+        }
+    }
+
+    @keyframes jkl-select-options-menu-in {
+        from {
+            opacity: 0;
+            transform: translateY(jkl.rem(-4px));
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+
+    @keyframes jkl-select-options-menu-in-from-top {
+        from {
+            opacity: 0;
+            transform: translateY(jkl.rem(4px));
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+
+    // Options rendres i en portal og er ikke lenger descendants av
+    // `.jkl-select`, så regelen `.jkl-select & *:focus-visible { outline:
+    // none }` treffer dem ikke. Vi gjenoppretter fokus-visualiseringen
+    // (background-color via &:focus) ved å eksplisitt fjerne den native
+    // outlinen på options i portalen.
+    .jkl-select__option:focus-visible {
+        outline: none;
+    }
 }

package/styles/components/system-message/system-message.css

@@ -3,8 +3,6 @@
  */
 @layer jokul.components {
   .jkl-system-message {
-    --jkl-system-message-icon-height: var(--jkl-unit-30);
-    --jkl-system-message-icon-padding: 0.1875rem 0 0 0;
     --jkl-system-message-content-padding: var(--jkl-unit-30);
     --jkl-system-message-dismiss-button-size: var(--jkl-unit-40);
     --jkl-system-message-dismiss-button-margin: -0.40625rem -1.125rem -0.40625rem
@@ -19,19 +17,18 @@
     box-sizing: border-box;
   }
   .jkl-system-message__content {
+    font-size: var(--jkl-font-size-3);
+    line-height: var(--jkl-line-height-tight);
+    font-weight: 400;
+    --jkl-icon-weight: 300;
     box-sizing: border-box;
     padding: var(--jkl-system-message-content-padding);
     display: grid;
     grid-template-columns: min-content 1fr min-content;
-    align-items: flex-start;
+    align-items: start;
     width: 100%;
     margin: 0 auto;
   }
-  .jkl-system-message__icon {
-    height: var(--jkl-system-message-icon-height);
-    margin: var(--jkl-system-message-icon-padding);
-    flex-shrink: 0;
-  }
   @media screen and (forced-colors: active) {
     .jkl-system-message__icon {
       stroke: CanvasText;
@@ -41,10 +38,6 @@
     }
   }
   .jkl-system-message__message {
-    font-size: var(--jkl-font-size-3);
-    line-height: var(--jkl-line-height-tight);
-    font-weight: 400;
-    --jkl-icon-weight: 300;
     margin: var(--jkl-system-message-message-margin);
   }
   .jkl-system-message__dismiss-button {
@@ -54,8 +47,6 @@
     display: grid;
     place-content: center;
     position: relative;
-    flex-shrink: 0;
-    margin-top: 0.1875rem;
     color: inherit;
   }
   .jkl-system-message__dismiss-button::after {
@@ -126,7 +117,7 @@
     margin-bottom: 0;
   }
   .jkl-system-message--dismissed {
-    animation: jkl-dismiss-u3q9pup 400ms forwards;
+    animation: jkl-dismiss-usgzp54 400ms forwards;
     transition: block 400ms 400ms;
   }
   .jkl-system-message--info {
@@ -156,7 +147,7 @@
       border-width: 4px;
     }
   }
-  @keyframes jkl-dismiss-u3q9pup {
+  @keyframes jkl-dismiss-usgzp54 {
     from {
       opacity: 1;
       transform: translateY(0);

package/styles/components/system-message/system-message.min.css

@@ -1 +1 @@
-@layer jokul.components{.jkl-system-message{--jkl-system-message-icon-height:var(--jkl-unit-30);--jkl-system-message-icon-padding:0.1875rem 0 0 0;--jkl-system-message-content-padding:var(--jkl-unit-30);--jkl-system-message-dismiss-button-size:var(--jkl-unit-40);--jkl-system-message-dismiss-button-margin:-0.40625rem -1.125rem -0.40625rem auto;--jkl-system-message-message-margin:0 var(--jkl-spacing-20);--background-color:var(--jkl-color-background-alert-neutral);--text-color:var(--jkl-color-text-on-alert);background-color:var(--background-color);box-sizing:border-box;color:var(--text-color);transition-behavior:allow-discrete;width:100%}.jkl-system-message__content{align-items:flex-start;box-sizing:border-box;display:grid;grid-template-columns:-webkit-min-content 1fr -webkit-min-content;grid-template-columns:min-content 1fr min-content;margin:0 auto;padding:var(--jkl-system-message-content-padding);width:100%}.jkl-system-message__icon{flex-shrink:0;height:var(--jkl-system-message-icon-height);margin:var(--jkl-system-message-icon-padding)}@media screen and (forced-colors:active){.jkl-system-message__icon,.jkl-system-message__icon path,.jkl-system-message__icon svg{stroke:CanvasText}}.jkl-system-message__message{font-size:var(--jkl-font-size-3);font-weight:400;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:300;margin:var(--jkl-system-message-message-margin)}.jkl-system-message__dismiss-button{background-color:transparent;color:inherit;cursor:pointer;display:grid;flex-shrink:0;margin-top:.1875rem;padding:0;place-content:center;position:relative}.jkl-system-message__dismiss-button:after{content:"";display:block;height:var(--jkl-system-message-dismiss-button-size);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--jkl-system-message-dismiss-button-size)}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button,.jkl-system-message__dismiss-button path,.jkl-system-message__dismiss-button svg{stroke:ButtonText}.jkl-system-message__dismiss-button{background-color:ButtonFace}}.jkl-system-message__dismiss-button{border-style:none;outline:0;outline-style:none}.jkl-system-message__dismiss-button:active,.jkl-system-message__dismiss-button:focus,.jkl-system-message__dismiss-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button{border-style:revert;outline:revert;outline-style:revert}.jkl-system-message__dismiss-button:active,.jkl-system-message__dismiss-button:focus,.jkl-system-message__dismiss-button:hover{outline:revert;outline-style:revert}}.jkl-system-message__dismiss-button:hover{color:var(--jkl-color-text-interactive-hover)}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button:hover{stroke:ButtonText}.jkl-system-message__dismiss-button:hover path,.jkl-system-message__dismiss-button:hover svg{stroke:ButtonText}}.jkl-system-message__dismiss-button:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button:focus-visible{outline:2px solid ButtonText;outline-offset:2px}}.jkl-system-message__message,.jkl-system-message__message:last-child{margin-bottom:0}.jkl-system-message--dismissed{animation:jkl-dismiss-u3q9pup .4s forwards;transition:block .4s .4s}.jkl-system-message--info{--background-color:var(--jkl-color-background-alert-info)}.jkl-system-message--warning{--background-color:var(--jkl-color-background-alert-warning)}.jkl-system-message--error{--background-color:var(--jkl-color-background-alert-error)}.jkl-system-message--success{--background-color:var(--jkl-color-background-alert-success)}@media screen and (forced-colors:active){.jkl-system-message{border:2px solid CanvasText}.jkl-system-message--info{border-style:dotted}.jkl-system-message--warning{border-style:dashed}.jkl-system-message--error{border-style:double;border-width:4px}}@keyframes jkl-dismiss-u3q9pup{0%{display:block;filter:saturate(1);opacity:1;transform:translateY(0)}to{display:none;filter:saturate(.7);opacity:0;transform:translateY(-10%)}}}
+@layer jokul.components{.jkl-system-message{--jkl-system-message-content-padding:var(--jkl-unit-30);--jkl-system-message-dismiss-button-size:var(--jkl-unit-40);--jkl-system-message-dismiss-button-margin:-0.40625rem -1.125rem -0.40625rem auto;--jkl-system-message-message-margin:0 var(--jkl-spacing-20);--background-color:var(--jkl-color-background-alert-neutral);--text-color:var(--jkl-color-text-on-alert);background-color:var(--background-color);box-sizing:border-box;color:var(--text-color);transition-behavior:allow-discrete;width:100%}.jkl-system-message__content{font-size:var(--jkl-font-size-3);font-weight:400;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:300;align-items:start;box-sizing:border-box;display:grid;grid-template-columns:-webkit-min-content 1fr -webkit-min-content;grid-template-columns:min-content 1fr min-content;margin:0 auto;padding:var(--jkl-system-message-content-padding);width:100%}@media screen and (forced-colors:active){.jkl-system-message__icon,.jkl-system-message__icon path,.jkl-system-message__icon svg{stroke:CanvasText}}.jkl-system-message__message{margin:var(--jkl-system-message-message-margin)}.jkl-system-message__dismiss-button{background-color:transparent;color:inherit;cursor:pointer;display:grid;padding:0;place-content:center;position:relative}.jkl-system-message__dismiss-button:after{content:"";display:block;height:var(--jkl-system-message-dismiss-button-size);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--jkl-system-message-dismiss-button-size)}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button,.jkl-system-message__dismiss-button path,.jkl-system-message__dismiss-button svg{stroke:ButtonText}.jkl-system-message__dismiss-button{background-color:ButtonFace}}.jkl-system-message__dismiss-button{border-style:none;outline:0;outline-style:none}.jkl-system-message__dismiss-button:active,.jkl-system-message__dismiss-button:focus,.jkl-system-message__dismiss-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button{border-style:revert;outline:revert;outline-style:revert}.jkl-system-message__dismiss-button:active,.jkl-system-message__dismiss-button:focus,.jkl-system-message__dismiss-button:hover{outline:revert;outline-style:revert}}.jkl-system-message__dismiss-button:hover{color:var(--jkl-color-text-interactive-hover)}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button:hover{stroke:ButtonText}.jkl-system-message__dismiss-button:hover path,.jkl-system-message__dismiss-button:hover svg{stroke:ButtonText}}.jkl-system-message__dismiss-button:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button:focus-visible{outline:2px solid ButtonText;outline-offset:2px}}.jkl-system-message__message,.jkl-system-message__message:last-child{margin-bottom:0}.jkl-system-message--dismissed{animation:jkl-dismiss-usgzp54 .4s forwards;transition:block .4s .4s}.jkl-system-message--info{--background-color:var(--jkl-color-background-alert-info)}.jkl-system-message--warning{--background-color:var(--jkl-color-background-alert-warning)}.jkl-system-message--error{--background-color:var(--jkl-color-background-alert-error)}.jkl-system-message--success{--background-color:var(--jkl-color-background-alert-success)}@media screen and (forced-colors:active){.jkl-system-message{border:2px solid CanvasText}.jkl-system-message--info{border-style:dotted}.jkl-system-message--warning{border-style:dashed}.jkl-system-message--error{border-style:double;border-width:4px}}@keyframes jkl-dismiss-usgzp54{0%{display:block;filter:saturate(1);opacity:1;transform:translateY(0)}to{display:none;filter:saturate(.7);opacity:0;transform:translateY(-10%)}}}

package/styles/components/system-message/system-message.scss

@@ -8,8 +8,6 @@ $_dismiss-animation-duration: jkl.timing("lazy");
 
 @layer jokul.components {
     .jkl-system-message {
-        --jkl-system-message-icon-height: var(--jkl-unit-30);
-        --jkl-system-message-icon-padding: #{jkl.rem(3px)} 0 0 0;
         --jkl-system-message-content-padding: var(--jkl-unit-30);
         --jkl-system-message-dismiss-button-size: var(--jkl-unit-40);
         --jkl-system-message-dismiss-button-margin: -#{jkl.rem(
@@ -27,25 +25,21 @@ $_dismiss-animation-duration: jkl.timing("lazy");
         box-sizing: border-box;
 
         &__content {
+            @include jkl.text-style("text-medium");
             box-sizing: border-box;
             padding: var(--jkl-system-message-content-padding);
             display: grid;
             grid-template-columns: min-content 1fr min-content;
-            align-items: flex-start;
+            align-items: start;
             width: 100%;
             margin: 0 auto;
         }
 
         &__icon {
-            height: var(--jkl-system-message-icon-height);
-            margin: var(--jkl-system-message-icon-padding);
-            flex-shrink: 0;
-
             @include jkl.forced-colors-svg-fallback($stroke: CanvasText);
         }
 
         &__message {
-            @include jkl.text-style("text-medium");
             margin: var(--jkl-system-message-message-margin);
         }
 
@@ -56,8 +50,6 @@ $_dismiss-animation-duration: jkl.timing("lazy");
             display: grid;
             place-content: center;
             position: relative;
-            flex-shrink: 0;
-            margin-top: jkl.rem(3px); // visual alignment with text
             color: inherit;
 
             // Sørg for å ha en stor nok touch target.

package/styles/components/toast/toast.css

@@ -135,12 +135,12 @@
   }
   .jkl-toast[data-animation=entering],
   .jkl-toast[data-animation=queued] {
-    animation: jkl-entering-ux5jwdd 200ms ease-out forwards;
+    animation: jkl-entering-u19c75a 200ms ease-out forwards;
   }
   .jkl-toast[data-animation=exiting] {
-    animation: jkl-exiting-ux5jwdr 150ms ease-in forwards;
+    animation: jkl-exiting-u19c75h 150ms ease-in forwards;
   }
-  @keyframes jkl-entering-ux5jwdd {
+  @keyframes jkl-entering-u19c75a {
     from {
       opacity: 0;
       transform: translate3d(0, 50%, 0);
@@ -150,7 +150,7 @@
       transform: translate3d(0, 0, 0);
     }
   }
-  @keyframes jkl-exiting-ux5jwdr {
+  @keyframes jkl-exiting-u19c75h {
     from {
       opacity: 1;
       transform: translate3d(0, 0, 0);

package/styles/components/toast/toast.min.css

@@ -1 +1 @@
-@layer jokul.components{.jkl-toast-region{background:transparent;bottom:var(--jkl-unit-30);display:flex;justify-content:center;left:0;pointer-events:none;position:fixed;right:0;width:100%;z-index:10000}.jkl-toast-region__toasts{align-items:center;display:flex;flex-direction:column;gap:var(--jkl-unit-20);min-width:18rem;pointer-events:auto}.jkl-toast-region--left{justify-content:flex-start;left:var(--jkl-unit-30)}.jkl-toast{--background-color:var(--jkl-color-background-container-high);--text-color:var(--jkl-color-text-default);--jkl-toast-padding:var(--jkl-unit-20);align-items:start;background-color:var(--background-color);border-radius:4px;box-sizing:border-box;color:var(--text-color);font-size:var(--jkl-font-size-3);font-weight:400;line-height:var(--jkl-line-height-relaxed);overflow:hidden;padding:var(--jkl-toast-padding);position:relative;width:clamp(15em,100%,min(30rem,85vw));--jkl-icon-weight:300}.jkl-toast__progress{--bar-color:var(--text-color);--track-color:transparent;border-radius:0;inset:0 0 auto;position:absolute}@media screen and (forced-colors:active){.jkl-toast__icon,.jkl-toast__icon path,.jkl-toast__icon svg{stroke:CanvasText}}.jkl-toast:not(:has(.jkl-toast__title)) .jkl-toast__icon{-webkit-margin-before:.0625rem;margin-block-start:.0625rem}.jkl-toast:has(.jkl-toast__title) .jkl-toast__icon{-webkit-margin-before:0;margin-block-start:0}.jkl-toast__content{flex-basis:100vw;flex-grow:1}.jkl-toast__action{margin-top:var(--jkl-unit-15)}.jkl-toast__title{font-size:var(--jkl-font-size-4);font-weight:700;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:400}.jkl-toast__dismiss-button{background-color:transparent;color:inherit;cursor:pointer;padding:0}@media screen and (forced-colors:active){.jkl-toast__dismiss-button,.jkl-toast__dismiss-button path,.jkl-toast__dismiss-button svg{stroke:ButtonText}.jkl-toast__dismiss-button{background-color:ButtonFace}}.jkl-toast__dismiss-button:after{--tap-size:44px;content:"";inset:calc((var(--tap-size) - 100%)/2*-1);position:absolute}.jkl-toast--error,.jkl-toast--info,.jkl-toast--success,.jkl-toast--warning{--text-color:var(--jkl-color-text-on-alert)}.jkl-toast--info{--background-color:var(--jkl-color-background-alert-info)}.jkl-toast--warning{--background-color:var(--jkl-color-background-alert-warning)}.jkl-toast--error{--background-color:var(--jkl-color-background-alert-error)}.jkl-toast--success{--background-color:var(--jkl-color-background-alert-success)}@media screen and (forced-colors:active){.jkl-toast{border:2px solid CanvasText}.jkl-toast--info{border-style:dotted}.jkl-toast--warning{border-style:dashed}.jkl-toast--error{border-style:double;border-width:4px}}.jkl-toast[data-animation=entering],.jkl-toast[data-animation=queued]{animation:jkl-entering-ux5jwdd .2s ease-out forwards}.jkl-toast[data-animation=exiting]{animation:jkl-exiting-ux5jwdr .15s ease-in forwards}@keyframes jkl-entering-ux5jwdd{0%{opacity:0;transform:translate3d(0,50%,0)}to{opacity:1;transform:translateZ(0)}}@keyframes jkl-exiting-ux5jwdr{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,50%,0)}}}
+@layer jokul.components{.jkl-toast-region{background:transparent;bottom:var(--jkl-unit-30);display:flex;justify-content:center;left:0;pointer-events:none;position:fixed;right:0;width:100%;z-index:10000}.jkl-toast-region__toasts{align-items:center;display:flex;flex-direction:column;gap:var(--jkl-unit-20);min-width:18rem;pointer-events:auto}.jkl-toast-region--left{justify-content:flex-start;left:var(--jkl-unit-30)}.jkl-toast{--background-color:var(--jkl-color-background-container-high);--text-color:var(--jkl-color-text-default);--jkl-toast-padding:var(--jkl-unit-20);align-items:start;background-color:var(--background-color);border-radius:4px;box-sizing:border-box;color:var(--text-color);font-size:var(--jkl-font-size-3);font-weight:400;line-height:var(--jkl-line-height-relaxed);overflow:hidden;padding:var(--jkl-toast-padding);position:relative;width:clamp(15em,100%,min(30rem,85vw));--jkl-icon-weight:300}.jkl-toast__progress{--bar-color:var(--text-color);--track-color:transparent;border-radius:0;inset:0 0 auto;position:absolute}@media screen and (forced-colors:active){.jkl-toast__icon,.jkl-toast__icon path,.jkl-toast__icon svg{stroke:CanvasText}}.jkl-toast:not(:has(.jkl-toast__title)) .jkl-toast__icon{-webkit-margin-before:.0625rem;margin-block-start:.0625rem}.jkl-toast:has(.jkl-toast__title) .jkl-toast__icon{-webkit-margin-before:0;margin-block-start:0}.jkl-toast__content{flex-basis:100vw;flex-grow:1}.jkl-toast__action{margin-top:var(--jkl-unit-15)}.jkl-toast__title{font-size:var(--jkl-font-size-4);font-weight:700;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:400}.jkl-toast__dismiss-button{background-color:transparent;color:inherit;cursor:pointer;padding:0}@media screen and (forced-colors:active){.jkl-toast__dismiss-button,.jkl-toast__dismiss-button path,.jkl-toast__dismiss-button svg{stroke:ButtonText}.jkl-toast__dismiss-button{background-color:ButtonFace}}.jkl-toast__dismiss-button:after{--tap-size:44px;content:"";inset:calc((var(--tap-size) - 100%)/2*-1);position:absolute}.jkl-toast--error,.jkl-toast--info,.jkl-toast--success,.jkl-toast--warning{--text-color:var(--jkl-color-text-on-alert)}.jkl-toast--info{--background-color:var(--jkl-color-background-alert-info)}.jkl-toast--warning{--background-color:var(--jkl-color-background-alert-warning)}.jkl-toast--error{--background-color:var(--jkl-color-background-alert-error)}.jkl-toast--success{--background-color:var(--jkl-color-background-alert-success)}@media screen and (forced-colors:active){.jkl-toast{border:2px solid CanvasText}.jkl-toast--info{border-style:dotted}.jkl-toast--warning{border-style:dashed}.jkl-toast--error{border-style:double;border-width:4px}}.jkl-toast[data-animation=entering],.jkl-toast[data-animation=queued]{animation:jkl-entering-u19c75a .2s ease-out forwards}.jkl-toast[data-animation=exiting]{animation:jkl-exiting-u19c75h .15s ease-in forwards}@keyframes jkl-entering-u19c75a{0%{opacity:0;transform:translate3d(0,50%,0)}to{opacity:1;transform:translateZ(0)}}@keyframes jkl-exiting-u19c75h{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,50%,0)}}}

package/styles/components/typography/_index.scss

@@ -0,0 +1,2 @@
+@forward "text";
+@forward "title";

package/styles/components/typography/text.css

@@ -0,0 +1,52 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+@layer jokul.components {
+  :where(.jkl-text) {
+    font-weight: var(--jkl-typography-weight-normal);
+    line-height: var(--jkl-line-height-relaxed);
+  }
+  .jkl-text[data-text-size] {
+    margin-block: 0;
+  }
+  .jkl-text[data-text-size=xs] {
+    font-size: var(--jkl-font-size-1);
+    line-height: var(--jkl-line-height-tight);
+    font-weight: 400;
+    --jkl-icon-weight: 300;
+  }
+  .jkl-text[data-text-size=s] {
+    font-size: var(--jkl-font-size-2);
+    line-height: var(--jkl-line-height-relaxed);
+    font-weight: 400;
+    --jkl-icon-weight: 300;
+    --jkl-icon-size: 1.2em;
+  }
+  .jkl-text[data-text-size=m] {
+    font-size: var(--jkl-font-size-3);
+    line-height: var(--jkl-line-height-relaxed);
+    font-weight: 400;
+    --jkl-icon-weight: 300;
+  }
+  .jkl-text[data-text-size=l] {
+    font-size: var(--jkl-font-size-5);
+    line-height: var(--jkl-line-height-relaxed);
+    font-weight: 400;
+    --jkl-icon-weight: 300;
+  }
+  .jkl-text[data-bold],
+  strong.jkl-text[data-text-size] {
+    font-weight: var(--jkl-typography-weight-bold);
+    --jkl-icon-weight: 400;
+  }
+  .jkl-text[data-short] {
+    line-height: var(--jkl-line-height-tight);
+  }
+  :is(code, kbd, samp, var).jkl-text {
+    font-family: "Fremtind Grotesk Mono", "Adjusted Courier New Fallback", -apple-system, BlinkMacSystemFont, monospace;
+  }
+  label.jkl-text {
+    display: block;
+    margin-block-end: var(--jkl-spacing-8);
+  }
+}

package/styles/components/typography/text.min.css

@@ -0,0 +1 @@
+@layer jokul.components{:where(.jkl-text){font-weight:var(--jkl-typography-weight-normal);line-height:var(--jkl-line-height-relaxed)}.jkl-text[data-text-size]{margin-block:0}.jkl-text[data-text-size=xs]{font-size:var(--jkl-font-size-1);font-weight:400;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:300}.jkl-text[data-text-size=s]{font-size:var(--jkl-font-size-2);font-weight:400;line-height:var(--jkl-line-height-relaxed);--jkl-icon-weight:300;--jkl-icon-size:1.2em}.jkl-text[data-text-size=m]{font-size:var(--jkl-font-size-3);font-weight:400;line-height:var(--jkl-line-height-relaxed);--jkl-icon-weight:300}.jkl-text[data-text-size=l]{font-size:var(--jkl-font-size-5);font-weight:400;line-height:var(--jkl-line-height-relaxed);--jkl-icon-weight:300}.jkl-text[data-bold],strong.jkl-text[data-text-size]{font-weight:var(--jkl-typography-weight-bold);--jkl-icon-weight:400}.jkl-text[data-short]{line-height:var(--jkl-line-height-tight)}:is(code,kbd,samp,var).jkl-text{font-family:Fremtind Grotesk Mono,Adjusted Courier New Fallback,-apple-system,BlinkMacSystemFont,monospace}label.jkl-text{display:block;-webkit-margin-after:var(--jkl-spacing-8);margin-block-end:var(--jkl-spacing-8)}}

package/styles/components/typography/text.scss

@@ -0,0 +1,55 @@
+@use "../../core/jkl";
+
+// Hver `size` mapper til en komplett tekst-stil fra `$text-styles` i
+// `core/jkl/_typography.scss` — både font-size, line-height, font-weight
+// og ikon-variabler settes via `jkl.text-style`-mixinen.
+$_size-styles: (
+    "xs": "text-micro",
+    "s": "paragraph-small",
+    "m": "paragraph-medium",
+    "l": "paragraph-large",
+);
+
+@layer jokul.components {
+    :where(.jkl-text) {
+        font-weight: var(--jkl-typography-weight-normal);
+        line-height: var(--jkl-line-height-relaxed);
+    }
+
+    // Scope margin-resetten til komponenten via `data-text-size` så vi ikke
+    // overstyrer margin på elementer som bare bruker `.jkl-text` som
+    // hjelpeklasse.
+    .jkl-text[data-text-size] {
+        margin-block: 0;
+    }
+
+    @each $name, $style in $_size-styles {
+        .jkl-text[data-text-size="#{$name}"] {
+            @include jkl.text-style($style);
+        }
+    }
+
+    // `bold` og `<strong>` skal sette både font-weight og ikon-weight
+    // (samme mønster som `.jkl-bold` og `.jkl strong`). Spesifisiteten må
+    // være lik eller høyere enn `.jkl-text[data-text-size="…"]` som ellers
+    // tvinger normal weight via `jkl.text-style`-mixinen.
+    .jkl-text[data-bold],
+    strong.jkl-text[data-text-size] {
+        font-weight: var(--jkl-typography-weight-bold);
+        --jkl-icon-weight: #{jkl.$icon-weight-bold};
+    }
+
+    .jkl-text[data-short] {
+        line-height: var(--jkl-line-height-tight);
+    }
+
+    :is(code, kbd, samp, var).jkl-text {
+        @include jkl.use-font-family("Fremtind Grotesk Mono");
+    }
+
+    // Labels er blokk-nivå og har bunnmarg til feltet de beskriver.
+    label.jkl-text {
+        display: block;
+        margin-block-end: var(--jkl-spacing-8);
+    }
+}

package/styles/components/typography/title.css

@@ -0,0 +1,70 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+@layer jokul.components {
+  :where(.jkl-title) {
+    font-weight: var(--jkl-typography-weight-normal);
+    line-height: var(--jkl-line-height-tight);
+  }
+  .jkl-title[data-text-size] {
+    margin-block: 0;
+  }
+  .jkl-title[data-text-size=xs],
+  .jkl-heading-xs {
+    font-size: var(--jkl-font-size-4);
+    line-height: var(--jkl-line-height-tight);
+    font-weight: 700;
+    --jkl-icon-weight: 400;
+  }
+  :where(.jkl-heading-xs) {
+    margin-block: 0;
+  }
+  .jkl-title[data-text-size=s],
+  .jkl-heading-s {
+    font-size: var(--jkl-font-size-5);
+    line-height: var(--jkl-line-height-tight);
+    font-weight: 700;
+    --jkl-icon-weight: 400;
+  }
+  :where(.jkl-heading-s) {
+    margin-block: 0;
+  }
+  .jkl-title[data-text-size=m],
+  .jkl-heading-m {
+    font-size: var(--jkl-font-size-6);
+    line-height: var(--jkl-line-height-tight);
+    font-weight: 700;
+    --jkl-icon-weight: 400;
+  }
+  :where(.jkl-heading-m) {
+    margin-block: 0;
+  }
+  .jkl-title[data-text-size=l],
+  .jkl-heading-l {
+    font-size: var(--jkl-font-size-7);
+    line-height: var(--jkl-line-height-tight);
+    font-weight: 400;
+    --jkl-icon-weight: 300;
+  }
+  :where(.jkl-heading-l) {
+    margin-block: 0;
+  }
+  .jkl-title[data-text-size=xl],
+  .jkl-heading-xl {
+    font-size: var(--jkl-font-size-8);
+    line-height: var(--jkl-line-height-tight);
+    font-weight: 400;
+    --jkl-icon-weight: 300;
+  }
+  :where(.jkl-heading-xl) {
+    margin-block: 0;
+  }
+  :is(label, legend).jkl-title[data-text-size] {
+    font-weight: var(--jkl-typography-weight-normal);
+    line-height: var(--jkl-line-height-relaxed);
+  }
+  label.jkl-title[data-text-size] {
+    display: block;
+    margin-block-end: var(--jkl-spacing-8);
+  }
+}

package/styles/components/typography/title.min.css

@@ -0,0 +1 @@
+@layer jokul.components{:where(.jkl-title){font-weight:var(--jkl-typography-weight-normal);line-height:var(--jkl-line-height-tight)}.jkl-title[data-text-size]{margin-block:0}.jkl-heading-xs,.jkl-title[data-text-size=xs]{font-size:var(--jkl-font-size-4);font-weight:700;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:400}:where(.jkl-heading-xs){margin-block:0}.jkl-heading-s,.jkl-title[data-text-size=s]{font-size:var(--jkl-font-size-5);font-weight:700;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:400}:where(.jkl-heading-s){margin-block:0}.jkl-heading-m,.jkl-title[data-text-size=m]{font-size:var(--jkl-font-size-6);font-weight:700;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:400}:where(.jkl-heading-m){margin-block:0}.jkl-heading-l,.jkl-title[data-text-size=l]{font-size:var(--jkl-font-size-7);font-weight:400;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:300}:where(.jkl-heading-l){margin-block:0}.jkl-heading-xl,.jkl-title[data-text-size=xl]{font-size:var(--jkl-font-size-8);font-weight:400;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:300}:where(.jkl-heading-xl){margin-block:0}:is(label,legend).jkl-title[data-text-size]{font-weight:var(--jkl-typography-weight-normal);line-height:var(--jkl-line-height-relaxed)}label.jkl-title[data-text-size]{display:block;-webkit-margin-after:var(--jkl-spacing-8);margin-block-end:var(--jkl-spacing-8)}}

package/styles/components/typography/title.scss

@@ -0,0 +1,58 @@
+@use "../../core/jkl";
+
+// Hver `size` mapper til en komplett tekst-stil fra `$text-styles` i
+// `core/jkl/_typography.scss` — både font-size, line-height, font-weight
+// og ikon-variabler settes via `jkl.text-style`-mixinen.
+$_size-styles: (
+    "xs": "heading-5",
+    "s": "heading-4",
+    "m": "heading-3",
+    "l": "heading-2",
+    "xl": "heading-1",
+);
+
+@layer jokul.components {
+    :where(.jkl-title) {
+        font-weight: var(--jkl-typography-weight-normal);
+        line-height: var(--jkl-line-height-tight);
+    }
+
+    // Scope margin-resetten til komponenten via `data-text-size` så vi ikke
+    // overstyrer margin på elementer som bare bruker `.jkl-title` som
+    // hjelpeklasse.
+    .jkl-title[data-text-size] {
+        margin-block: 0;
+    }
+
+    // Genererer både komponent-regler og ekvivalente hjelpeklasser fra
+    // samme kilde slik at de ikke drifter fra hverandre.
+    // `.jkl-heading-<size>` tilsvarer `<Title size="<size>">` brukt på et
+    // vilkårlig element.
+    @each $name, $style in $_size-styles {
+        .jkl-title[data-text-size="#{$name}"],
+        .jkl-heading-#{$name} {
+            @include jkl.text-style($style);
+        }
+
+        :where(.jkl-heading-#{$name}) {
+            margin-block: 0;
+        }
+    }
+
+    // Skjema-elementer skal ikke arve heading sine fete font-weight og
+    // tight line-height. De er tekst som beskriver et skjemafelt eller en
+    // gruppe, ikke strukturelle overskrifter. Spesifisiteten må matche
+    // `.jkl-title[data-text-size="…"]` (0,2,0) for å overstyre den.
+    :is(label, legend).jkl-title[data-text-size] {
+        font-weight: var(--jkl-typography-weight-normal);
+        line-height: var(--jkl-line-height-relaxed);
+    }
+
+    // Labels er blokk-nivå og har bunnmarg til feltet de beskriver.
+    // Spesifisiteten her (0,2,1) overstyrer `.jkl-title[data-text-size]`
+    // som ellers nullstiller margin via `margin-block: 0`.
+    label.jkl-title[data-text-size] {
+        display: block;
+        margin-block-end: var(--jkl-spacing-8);
+    }
+}

package/styles/core/core.css

@@ -1138,7 +1138,7 @@
     --jkl-icon-weight: 300;
     --jkl-icon-size: 1.2em;
   }
-  .jkl-title {
+  .jkl-title:not([data-text-size]) {
     font-size: var(--jkl-font-size-8);
     line-height: var(--jkl-line-height-tight);
     font-weight: 400;