@fremtind/jokul 0.8.1 → 0.10.0

package/src/components/text-input/styles/text-input.scss

@@ -0,0 +1,389 @@
+@charset "UTF-8";
+@use "sass:color";
+@use "../../../core/jkl";
+@use "../../../core/jkl/colors";
+
+$_text-input-height: jkl.rem(48px);
+$_text-input-height--mobile: jkl.rem(44px);
+$_text-input-height--compact: jkl.rem(32px);
+$_text-input-vertical-padding: jkl.$spacing-xs;
+$_text-input-vertical-padding--compact: jkl.$spacing-2xs;
+$_text-input-horizontal-padding: jkl.$spacing-s;
+$_text-input-horizontal-padding--compact: jkl.$spacing-xs;
+
+$_action-button-size: jkl.rem(48px);
+$_action-button-size--mobile: jkl.rem(44px);
+$_action-button-size--compact: jkl.rem(32px);
+$_action-button-icon-size: jkl.rem(20px);
+$_action-button-icon-size--compact: jkl.rem(18px);
+$_action-button-padding: jkl.$spacing-xs 0;
+$_action-button-padding--compact: 0;
+$_action-button-focus-position: jkl.rem(8px);
+$_action-button-focus-position--compact: 0;
+
+$_text-input-focus-color: jkl.$color-granitt;
+$_text-input-selection-color: color.scale(
+    $color: $_text-input-focus-color,
+    $alpha: -80%,
+);
+
+$_text-input-focus-color--inverted: jkl.$color-snohvit;
+$_text-input-selection-color--inverted: color.scale(
+    $color: $_text-input-focus-color--inverted,
+    $alpha: -75%,
+);
+
+@include jkl.light-mode-variables {
+    --jkl-text-input-border-color: #{jkl.$color-stein};
+    --jkl-text-input-text-color: #{jkl.$color-granitt};
+    --jkl-text-input-placeholder-color: #{jkl.$color-stein};
+    --jkl-text-input-unit-color: #{jkl.$color-granitt};
+    --jkl-text-input-background-color: #{jkl.$color-hvit};
+    --jkl-text-input-focus-color: #{$_text-input-focus-color};
+    --jkl-text-input-error-background-color: #{jkl.$color-feil};
+    --jkl-text-input-error-text-color: #{jkl.$color-granitt};
+    --jkl-text-input-error-placeholder-color: #{jkl.$color-stein};
+    --jkl-text-input-selection-color: #{$_text-input-selection-color};
+    --jkl-text-input-error-selection-color: #{$_text-input-selection-color};
+    --jkl-text-area-counter-count-color: #{jkl.$color-stein};
+}
+
+@include jkl.dark-mode-variables {
+    --jkl-text-input-border-color: #{jkl.$color-svaberg};
+    --jkl-text-input-text-color: #{jkl.$color-snohvit};
+    --jkl-text-input-placeholder-color: #{jkl.$color-svaberg};
+    --jkl-text-input-unit-color: #{jkl.$color-snohvit};
+    --jkl-text-input-background-color: #{jkl.$color-skifer};
+    --jkl-text-input-focus-color: #{$_text-input-focus-color--inverted};
+    --jkl-text-input-selection-color: #{$_text-input-selection-color--inverted};
+    --jkl-text-input-error-background-color: #{jkl.$color-feil};
+    --jkl-text-input-error-text-color: #{jkl.$color-granitt};
+    --jkl-text-input-error-placeholder-color: #{jkl.$color-stein};
+    --jkl-text-input-error-selection-color: #{$_text-input-selection-color};
+    --jkl-text-area-counter-count-color: #{jkl.$color-svaberg};
+}
+
+@include jkl.comfortable-density-variables {
+    @include jkl.declare-font-variables("jkl-text-input", "body");
+
+    --jkl-text-input-height: #{$_text-input-height};
+    --jkl-text-input-vertical-padding: #{$_text-input-vertical-padding};
+    --jkl-text-input-horizontal-padding: #{$_text-input-horizontal-padding};
+    --jkl-text-input-padding: var(--jkl-text-input-vertical-padding) var(--jkl-text-input-horizontal-padding);
+    --jkl-text-input-action-button-size: #{$_action-button-size};
+    --jkl-text-input-action-button-icon-size: #{$_action-button-icon-size};
+    --jkl-text-input-action-button-padding: #{$_action-button-padding};
+    --jkl-text-input-action-button-focus-position: #{$_action-button-focus-position};
+
+    @include jkl.small-device {
+        --jkl-text-input-height: #{$_text-input-height--mobile};
+        --jkl-text-input-action-button-size: #{$_action-button-size--mobile};
+    }
+}
+
+@include jkl.compact-density-variables {
+    @include jkl.declare-font-variables("jkl-text-input", "small");
+
+    --jkl-text-input-height: #{$_text-input-height--compact};
+    --jkl-text-input-vertical-padding: #{$_text-input-vertical-padding--compact};
+    --jkl-text-input-horizontal-padding: #{$_text-input-horizontal-padding--compact};
+    --jkl-text-input-padding: var(--jkl-text-input-vertical-padding) var(--jkl-text-input-horizontal-padding);
+    --jkl-text-input-action-button-size: #{$_action-button-size--compact};
+    --jkl-text-input-action-button-icon-size: #{$_action-button-icon-size--compact};
+    --jkl-text-input-action-button-padding: #{$_action-button-padding--compact};
+    --jkl-text-input-action-button-focus-position: #{$_action-button-focus-position--compact};
+}
+
+@mixin _shared-input-styles {
+    background: none;
+    -webkit-appearance: none;
+    color: var(--jkl-color);
+
+    @include jkl.use-font-variables("jkl-text-input");
+    @include jkl.reset-outline;
+    @include jkl.remove-inner-outer-button;
+
+    // Placeholder text style
+    &::placeholder {
+        opacity: 1;
+        color: var(--jkl-text-input-placeholder-color);
+    }
+
+    // Color of text selection
+    &::selection {
+        background-color: var(--jkl-text-input-selection-color);
+
+        [data-theme="dark"] & {
+            background-color: var(--jkl-text-input-selection-color);
+        }
+    }
+
+    //  Invalid state
+    &[aria-invalid="true"] {
+        color: var(--jkl-text-input-error-text-color);
+
+        &::placeholder {
+            color: var(--jkl-text-input-error-placeholder-color);
+        }
+
+        // Color of text selection
+        &::selection {
+            background-color: var(--jkl-text-input-error-selection-color);
+        }
+
+        & ~ .jkl-text-input-action-button {
+            color: var(--jkl-text-input-error-placeholder-color);
+
+            &:hover {
+                color: var(--jkl-text-input-error-text-color);
+            }
+
+            &:focus {
+                @include jkl.keyboard-navigation {
+                    &::after {
+                        box-shadow: inset 0 0 0 jkl.rem(2px) var(--jkl-text-input-error-text-color);
+                    }
+                }
+            }
+        }
+
+        & ~ .jkl-text-input__unit {
+            color: var(--jkl-text-input-error-text-color);
+        }
+    }
+}
+
+.jkl-text-input-action-button {
+    flex-shrink: 0;
+    display: flex;
+    box-sizing: border-box;
+    align-items: center;
+    justify-content: center;
+    background-color: transparent;
+    cursor: pointer;
+    padding: var(--jkl-text-input-action-button-padding);
+    height: var(--jkl-text-input-action-button-size);
+    width: var(--jkl-text-input-action-button-size);
+    color: var(--jkl-text-input-border-color);
+
+    // Unngå for langt mellomrom mellom ikon og teksten i feltet
+    margin-inline-start: calc(var(--jkl-text-input-horizontal-padding) * -1);
+
+    @include jkl.reset-outline;
+
+    .jkl-icon-button__icon {
+        height: var(--jkl-text-input-action-button-icon-size);
+        width: var(--jkl-text-input-action-button-icon-size);
+    }
+
+    &:hover {
+        color: var(--jkl-text-input-focus-color);
+
+        @include jkl.forced-colors-mode {
+            border: jkl.rem(2px) inset ButtonText;
+        }
+    }
+
+    &:focus {
+        @include jkl.keyboard-navigation {
+            position: relative;
+
+            &::after {
+                content: "";
+                position: absolute;
+                inset: var(--jkl-text-input-action-button-focus-position)
+                    var(--jkl-text-input-action-button-focus-position)
+                    var(--jkl-text-input-action-button-focus-position)
+                    var(--jkl-text-input-action-button-focus-position);
+                box-shadow: inset 0 0 0 jkl.rem(2px) var(--jkl-text-input-focus-color);
+            }
+        }
+    }
+
+    @include jkl.forced-colors-mode {
+        border: revert;
+        background-color: revert;
+    }
+
+    @include jkl.forced-colors-svg-fallback($stroke: ButtonText);
+}
+
+.jkl-text-input-wrapper {
+    border-radius: jkl.rem(3px);
+    box-sizing: border-box;
+    max-width: 100%;
+
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: var(--jkl-text-input-height);
+
+    @include jkl.use-font-variables("jkl-text-input");
+    @include jkl.motion;
+    transition-property: color, box-shadow, background-color;
+
+    color: var(--jkl-text-input-text-color);
+    box-shadow: inset 0 0 0 jkl.rem(1px) var(--jkl-text-input-border-color), 0 0 0 jkl.rem(1px) transparent;
+    background-color: transparent;
+
+    &:hover {
+        box-shadow: inset 0 0 0 jkl.rem(1px) var(--jkl-text-input-focus-color),
+            0 0 0 jkl.rem(1px) var(--jkl-text-input-focus-color);
+        border-color: var(--jkl-text-input-focus-color);
+    }
+
+    &:focus-within {
+        background-color: var(--jkl-text-input-background-color);
+        box-shadow: inset 0 0 0 jkl.rem(1px) var(--jkl-text-input-focus-color),
+            0 0 0 jkl.rem(1px) var(--jkl-text-input-focus-color);
+        border-color: var(--jkl-text-input-focus-color);
+    }
+
+    &[data-invalid="true"] {
+        background-color: var(--jkl-text-input-error-background-color);
+        color: var(--jkl-text-input-error-text-color);
+    }
+}
+
+.jkl-text-input {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+
+    &__input {
+        padding: var(--jkl-text-input-padding);
+        width: 100%;
+        @include _shared-input-styles;
+
+        &--align-right {
+            text-align: right;
+        }
+    }
+
+    &__unit {
+        padding-inline-end: var(--jkl-text-input-horizontal-padding);
+        padding-block: var(--jkl-text-input-vertical-padding);
+        color: var(--jkl-text-input-unit-color);
+    }
+
+    &__action-button {
+        margin-inline-start: calc(var(--jkl-text-input-horizontal-padding) * -1);
+    }
+
+    &--inline {
+        display: inline-block;
+        vertical-align: middle;
+        margin: jkl.rem(-2px) jkl.rem(4px);
+    }
+}
+
+.jkl-text-area {
+    height: auto;
+    width: 100%;
+
+    &__text-area {
+        scrollbar-color: var(--jkl-color) transparent; // Unngå at scrollbar ligger oppå rammen
+        box-sizing: border-box;
+        resize: none; // Fjern mulighet for resizing av feltet
+        width: 100%;
+        padding: var(--jkl-text-input-padding);
+        max-height: var(--jkl-text-input-height);
+        height: var(--jkl-text-input-height);
+        min-height: var(--jkl-text-input-height);
+
+        @include jkl.motion;
+        transition-property: height, min-height, max-height, padding;
+        @include _shared-input-styles;
+    }
+
+    .jkl-text-input-wrapper {
+        height: auto;
+        max-height: 100%;
+    }
+
+    &--start-open {
+        .jkl-text-input-wrapper {
+            max-height: 100%;
+        }
+    }
+
+    &--auto-expand {
+        .jkl-text-area__text-area {
+            overflow: hidden; // Skjul scrollbar når høyden autojusteres
+        }
+    }
+
+    &:has(.jkl-text-area__counter) {
+        $progress-bar-height: jkl.rem(4px);
+
+        .jkl-text-input-wrapper {
+            position: relative;
+
+            &[data-has-content="true"],
+            &:focus-within {
+                padding-bottom: calc(var(--jkl-text-input-height) + #{$progress-bar-height});
+            }
+        }
+
+        .jkl-text-area__counter {
+            @include jkl.motion;
+            transition-property: opacity;
+            opacity: 0;
+
+            pointer-events: none; // La brukeren klikke gjennom telleren når feltet er kollapset
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+
+            &-count {
+                padding: var(--jkl-text-input-padding);
+                color: var(--jkl-text-area-counter-count-color);
+                @include jkl.text-style("small");
+            }
+
+            &-progress {
+                background-color: transparent;
+                height: $progress-bar-height;
+                width: 100%;
+                overflow: hidden;
+
+                &::after {
+                    content: "";
+                    width: var(--progress-width, 100%);
+                    display: block;
+                    height: $progress-bar-height;
+                    background-color: var(--jkl-color);
+                    transition-property: width;
+                    @include jkl.motion("standard", "lazy");
+                }
+            }
+        }
+
+        &:focus-within .jkl-text-area__counter {
+            opacity: 1;
+            transition-delay: jkl.timing("productive"); // Vent med å fade inn til feltet er ekspandert
+        }
+
+        [aria-invalid="true"] ~ .jkl-text-area__counter {
+            color: var(--jkl-text-input-error-text-color);
+        }
+    }
+}
+
+// Nytteklasser for tekstfelt med $num antall rader
+@for $num from 3 through 10 {
+    .jkl-text-area__text-area--#{$num}-rows:focus,
+    .jkl-text-area__text-area--#{$num}-rows:not(:placeholder-shown),
+    .jkl-text-area--start-open .jkl-text-area__text-area--#{$num}-rows {
+        --height: calc(var(--jkl-text-input-line-height) * #{$num});
+        --vertical-padding: calc(var(--jkl-text-input-vertical-padding) * 2);
+
+        // (#2751) Ekspanderende får inline style med height auto,
+        //         som gir et "hopp" dersom det er en teller og vi
+        //         ikke har en minimumshøyde.
+        min-height: calc(var(--height) + var(--vertical-padding)); // (#2751)
+        height: calc(var(--height) + var(--vertical-padding));
+        max-height: 100%;
+    }
+}

package/src/components/tooltip/styles/_index.scss

@@ -0,0 +1 @@
+@forward "tooltip";

package/src/components/tooltip/styles/tooltip.css

@@ -0,0 +1,136 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 23 Sep 2024 08:51:40 GMT
+ */
+:root,
+[data-layout-density=comfortable],
+[data-density=comfortable] {
+  --jkl-tooltip-size: 1.5rem;
+  --jkl-tooltip-content-padding: 1rem;
+}
+@media (width >= 0) and (max-width: 679px) {
+  :root,
+  [data-layout-density=comfortable],
+  [data-density=comfortable] {
+    --jkl-tooltip-size: 1.25rem;
+    --jkl-tooltip-content-padding: 0.75rem;
+  }
+}
+
+[data-layout-density=compact],
+[data-density=compact] {
+  --jkl-tooltip-size: 1.25rem;
+  --jkl-tooltip-content-padding: 0.5rem;
+}
+
+.jkl-tooltip-trigger {
+  background-color: unset;
+  padding: unset;
+  color: unset;
+  outline: 0;
+  border-style: none;
+  outline-style: none;
+}
+.jkl-tooltip-trigger:active, .jkl-tooltip-trigger:hover, .jkl-tooltip-trigger:focus {
+  outline: 0;
+  outline-style: none;
+}
+@media screen and (forced-colors: active) {
+  .jkl-tooltip-trigger {
+    outline: revert;
+    border-style: revert;
+    outline-style: revert;
+  }
+  .jkl-tooltip-trigger:active, .jkl-tooltip-trigger:hover, .jkl-tooltip-trigger:focus {
+    outline: revert;
+    outline-style: revert;
+  }
+}
+html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigger:focus {
+  --jkl-icon-weight: 500;
+  font-weight: 700;
+  letter-spacing: -0.014em;
+}
+
+.jkl-tooltip-content {
+  --background-color: var(--jkl-color-background-container-inverted);
+  --text-color: var(--jkl-color-text-inverted);
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 400;
+  --jkl-icon-weight: 300;
+  background-color: var(--background-color);
+  color: var(--text-color);
+  display: inline-block;
+  min-width: min-content;
+  max-width: min(19.375rem, 100%);
+  padding: var(--jkl-tooltip-content-padding);
+  position: absolute;
+  z-index: 10000;
+}
+.jkl-tooltip-content[data-placement^=top] > .jkl-tooltip-content__arrow {
+  bottom: -0.5rem;
+}
+.jkl-tooltip-content[data-placement^=bottom] > .jkl-tooltip-content__arrow {
+  top: -0.5rem;
+}
+.jkl-tooltip-content[data-placement^=left] > .jkl-tooltip-content__arrow {
+  right: -0.5rem;
+}
+.jkl-tooltip-content[data-placement^=right] > .jkl-tooltip-content__arrow {
+  left: -0.5rem;
+}
+@media screen and (forced-colors: active) {
+  .jkl-tooltip-content {
+    border: 1px solid CanvasText;
+  }
+}
+.jkl-tooltip-content__arrow {
+  overflow: hidden;
+  position: absolute;
+  background-color: var(--background-color);
+  transform: rotate(45deg);
+  height: 1rem;
+  width: 1rem;
+}
+@media screen and (forced-colors: active) {
+  .jkl-tooltip-content__arrow {
+    background-color: CanvasText;
+  }
+}
+
+.jkl-tooltip-question-button {
+  --button-color: var(--jkl-color-text-interactive);
+  transition-timing-function: ease-in;
+  transition-duration: 100ms;
+  transition-property: color;
+  cursor: pointer;
+  background-color: transparent;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  color: var(--button-color);
+  transform: translateY(max(0.16em, 0.25rem));
+  font-size: 1.2em;
+  outline: 0;
+  border-style: none;
+  outline-style: none;
+}
+.jkl-tooltip-question-button:active, .jkl-tooltip-question-button:hover, .jkl-tooltip-question-button:focus {
+  outline: 0;
+  outline-style: none;
+}
+@media screen and (forced-colors: active) {
+  .jkl-tooltip-question-button {
+    outline: revert;
+    border-style: revert;
+    outline-style: revert;
+  }
+  .jkl-tooltip-question-button:active, .jkl-tooltip-question-button:hover, .jkl-tooltip-question-button:focus {
+    outline: revert;
+    outline-style: revert;
+  }
+}
+.jkl-tooltip-question-button:hover {
+  --button-color: var(--jkl-color-text-interactive-hover);
+}

package/src/components/tooltip/styles/tooltip.min.css

@@ -0,0 +1 @@
+:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-tooltip-size:1.5rem;--jkl-tooltip-content-padding:1rem}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-tooltip-size:1.25rem;--jkl-tooltip-content-padding:0.75rem}}[data-density=compact],[data-layout-density=compact]{--jkl-tooltip-size:1.25rem;--jkl-tooltip-content-padding:0.5rem}.jkl-tooltip-trigger{background-color:unset;border-style:none;color:unset;padding:unset}.jkl-tooltip-trigger,.jkl-tooltip-trigger:active,.jkl-tooltip-trigger:focus,.jkl-tooltip-trigger:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-tooltip-trigger{border-style:revert}.jkl-tooltip-trigger,.jkl-tooltip-trigger:active,.jkl-tooltip-trigger:focus,.jkl-tooltip-trigger:hover{outline:revert;outline-style:revert}}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigger:focus{--jkl-icon-weight:500;font-weight:700;letter-spacing:-.014em}.jkl-tooltip-content{--background-color:var(--jkl-color-background-container-inverted);--text-color:var(--jkl-color-text-inverted);--jkl-icon-weight:300;background-color:var(--background-color);color:var(--text-color);display:inline-block;font-size:1rem;font-weight:400;line-height:1.5rem;max-width:min(19.375rem,100%);min-width:-webkit-min-content;min-width:min-content;padding:var(--jkl-tooltip-content-padding);position:absolute;z-index:10000}.jkl-tooltip-content[data-placement^=top]>.jkl-tooltip-content__arrow{bottom:-.5rem}.jkl-tooltip-content[data-placement^=bottom]>.jkl-tooltip-content__arrow{top:-.5rem}.jkl-tooltip-content[data-placement^=left]>.jkl-tooltip-content__arrow{right:-.5rem}.jkl-tooltip-content[data-placement^=right]>.jkl-tooltip-content__arrow{left:-.5rem}@media screen and (forced-colors:active){.jkl-tooltip-content{border:1px solid CanvasText}}.jkl-tooltip-content__arrow{background-color:var(--background-color);height:1rem;overflow:hidden;position:absolute;transform:rotate(45deg);width:1rem}@media screen and (forced-colors:active){.jkl-tooltip-content__arrow{background-color:CanvasText}}.jkl-tooltip-question-button{--button-color:var(--jkl-color-text-interactive);align-items:center;background-color:initial;border-style:none;color:var(--button-color);cursor:pointer;display:inline-flex;font-size:1.2em;outline:0;outline-style:none;padding:0;transform:translateY(max(.16em,.25rem));transition-duration:.1s;transition-property:color;transition-timing-function:ease-in}.jkl-tooltip-question-button:active,.jkl-tooltip-question-button:focus,.jkl-tooltip-question-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-tooltip-question-button{border-style:revert}.jkl-tooltip-question-button,.jkl-tooltip-question-button:active,.jkl-tooltip-question-button:focus,.jkl-tooltip-question-button:hover{outline:revert;outline-style:revert}}.jkl-tooltip-question-button:hover{--button-color:var(--jkl-color-text-interactive-hover)}

package/src/components/tooltip/styles/tooltip.scss

@@ -0,0 +1,105 @@
+@charset "UTF-8";
+@use "../../../core/jkl";
+
+$_tooltip-border-width: jkl.rem(1px);
+$_tooltip-arrow-height: jkl.rem(8px);
+$_focus-ring-distance: jkl.rem(-1px); // Negativ margin for å unngå subpixel mellomrom mellom border og box-shadow
+$_focus-ring-width: jkl.rem(2px);
+
+@include jkl.comfortable-density-variables {
+    --jkl-tooltip-size: #{jkl.rem(24px)};
+    --jkl-tooltip-content-padding: #{jkl.$spacing-m};
+
+    @include jkl.small-device {
+        --jkl-tooltip-size: #{jkl.rem(20px)};
+        --jkl-tooltip-content-padding: #{jkl.$spacing-s};
+    }
+}
+
+@include jkl.compact-density-variables {
+    --jkl-tooltip-size: #{jkl.rem(20px)};
+    --jkl-tooltip-content-padding: #{jkl.$spacing-xs};
+}
+
+.jkl-tooltip-trigger {
+    background-color: unset;
+    padding: unset;
+    color: unset;
+
+    @include jkl.reset-outline;
+
+    &:focus {
+        @include jkl.keyboard-navigation {
+            @include jkl.no-grow-bold;
+        }
+    }
+}
+
+.jkl-tooltip-content {
+    --background-color: var(--jkl-color-background-container-inverted);
+    --text-color: var(--jkl-color-text-inverted);
+
+    @include jkl.text-style("small");
+    background-color: var(--background-color);
+    color: var(--text-color);
+    display: inline-block;
+    min-width: min-content;
+    max-width: min(jkl.rem(310px), 100%); // 10px mindre enn smaleste støttede skjerm
+    padding: var(--jkl-tooltip-content-padding);
+    position: absolute;
+    z-index: jkl.$z-index--floating;
+
+    &[data-placement^="top"] > .jkl-tooltip-content__arrow {
+        bottom: -#{$_tooltip-arrow-height};
+    }
+
+    &[data-placement^="bottom"] > .jkl-tooltip-content__arrow {
+        top: -#{$_tooltip-arrow-height};
+    }
+
+    &[data-placement^="left"] > .jkl-tooltip-content__arrow {
+        right: -#{$_tooltip-arrow-height};
+    }
+
+    &[data-placement^="right"] > .jkl-tooltip-content__arrow {
+        left: -#{$_tooltip-arrow-height};
+    }
+
+    @include jkl.forced-colors-mode {
+        border: 1px solid CanvasText;
+    }
+
+    &__arrow {
+        overflow: hidden;
+        position: absolute;
+        background-color: var(--background-color);
+        transform: rotate(45deg);
+        height: $_tooltip-arrow-height * 2;
+        width: $_tooltip-arrow-height * 2;
+
+        @include jkl.forced-colors-mode {
+            background-color: CanvasText;
+        }
+    }
+}
+
+.jkl-tooltip-question-button {
+    --button-color: var(--jkl-color-text-interactive);
+
+    @include jkl.motion("exit", "snappy");
+    transition-property: color;
+    cursor: pointer;
+    background-color: transparent;
+    padding: 0;
+    display: inline-flex;
+    align-items: center;
+    color: var(--button-color);
+    transform: translateY(max(0.16em, jkl.rem(4px))); // Cap på 4px
+    font-size: 1.2em;
+
+    @include jkl.reset-outline;
+
+    &:hover {
+        --button-color: var(--jkl-color-text-interactive-hover);
+    }
+}