@fremtind/jokul 5.1.0 → 5.2.0

package/styles/global/_base-class.scss

@@ -22,9 +22,10 @@
         color: var(--jkl-color);
 
         @include jkl.use-font-family("Jokul");
+        font-weight: var(--jkl-font-weight-normal);
 
         strong {
-            font-weight: jkl.$font-weight-bold;
+            font-weight: var(--jkl-font-weight-bold);
         }
 
         a, button:not(:disabled) {

package/styles/global/_top-layer.scss

@@ -3,11 +3,20 @@
 @layer jokul.global {
     [popover] {
         opacity: 0;
-        transition: opacity,
+
+        // Safari has not implemented the `overlay` CSS property (see
+        // [WebKit bug 276727](https://bugs.webkit.org/show_bug.cgi?id=276727)).
+        // Without `overlay allow-discrete`, the element is removed from the top layer
+        // immediately on close while the opacity transition is still running — leaving
+        // a transparent but fully interactive fixed element covering the viewport.
+        // We only apply the animated exit on browsers that support `overlay`.
+        @supports (overlay: auto) {
+            transition: opacity,
             overlay allow-discrete,
             display allow-discrete;
 
-        @include jkl.motion("standard", "productive");
+            @include jkl.motion("standard", "productive");
+        }
 
         &:popover-open {
             opacity: 1;
@@ -15,6 +24,13 @@
             @starting-style {
                 opacity: 0;
             }
+
+            // Entry transition works on all browsers since it doesn't depend on overlay.
+            @supports not (overlay: auto) {
+                transition: opacity;
+
+                @include jkl.motion("standard", "productive");
+            }
         }
     }
-}
+}

package/styles/shared/input/shared-input-styles.scss

@@ -2,8 +2,7 @@
 @use "../../jkl";
 
 @mixin wrapper-styles {
-    --jkl-text-input-padding: var(--jkl-text-input-vertical-padding)
-        var(--jkl-text-input-horizontal-padding);
+    --jkl-text-input-padding: var(--jkl-text-input-vertical-padding) var(--jkl-text-input-horizontal-padding);
     --jkl-text-input-vertical-padding: var(--jkl-unit-15);
     --jkl-text-input-horizontal-padding: var(--jkl-unit-15);
     --jkl-text-input-action-button-size: var(--jkl-unit-60);
@@ -18,6 +17,7 @@
     border-radius: var(--jkl-border-radius-s);
     box-sizing: border-box;
     max-width: 100%;
+    overflow: hidden;
 
     position: relative;
     display: flex;
@@ -29,9 +29,8 @@
 
     background-color: var(--background-color);
     color: var(--text-color);
-    box-shadow:
-        inset 0 0 0 jkl.rem(1px) var(--border-color),
-        0 0 0 jkl.rem(1px) transparent;
+    box-shadow: inset 0 0 0 jkl.rem(1px) var(--border-color),
+    0 0 0 jkl.rem(1px) transparent;
 
     &:focus-within,
     &:has([data-focused="true"]) {
@@ -49,9 +48,8 @@
     &:has([data-focused="true"]) {
         --border-color: var(--jkl-color-border-strong);
 
-        box-shadow:
-            inset 0 0 0 jkl.rem(1px) var(--border-color),
-            0 0 0 jkl.rem(1px) var(--border-color);
+        box-shadow: inset 0 0 0 jkl.rem(1px) var(--border-color),
+        0 0 0 jkl.rem(1px) var(--border-color);
 
         @include jkl.forced-colors-mode {
             border: jkl.rem(2px) solid ButtonText;
@@ -131,3 +129,27 @@
         color: var(--placeholder-color);
     }
 }
+
+@mixin input-separator {
+    --inset-size: 1ex;
+    --separator-color: var(--jkl-color-border-subdued);
+
+    position: relative;
+
+    &::before {
+        content: "";
+        position: absolute;
+        block-size: calc(100% * var(--inset-size));
+        top: 0;
+        left: 0;
+        inset-block: var(--inset-size);
+        border-inline-end: 1px solid var(--separator-color);
+        z-index: 1;
+        @include jkl.motion("standard", "productive", inset, border-color);
+    }
+
+    &:hover, &:focus-within {
+        --inset-size: 1px;
+        --separator-color: var(--jkl-color-border-subdued);
+    }
+}