@fremtind/jokul 0.12.0 → 0.13.0

package/src/components/tabs/styles/tabs.scss

@@ -0,0 +1,89 @@
+@charset "UTF-8";
+@use "../../../core/jkl";
+
+@include jkl.comfortable-density-variables {
+    --jkl-tab-padding: var(--jkl-spacing-8) var(--jkl-spacing-40) var(--jkl-spacing-12) var(--jkl-spacing-2);
+
+    @include jkl.declare-font-variables("jkl-tab", "body");
+    @include jkl.small-device {
+        --jkl-tab-padding: var(--jkl-spacing-8) var(--jkl-spacing-24) var(--jkl-spacing-12) var(--jkl-spacing-2);
+    }
+}
+
+@include jkl.compact-density-variables {
+    @include jkl.declare-font-variables("jkl-tab", "small");
+
+    --jkl-tab-padding: var(--jkl-spacing-2) var(--jkl-spacing-32) var(--jkl-spacing-4) 0;
+}
+
+.jkl-tabs {
+    scroll-snap-type: x proximity;
+    overflow-x: scroll;
+    overflow-y: hidden;
+
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+        display: none;
+    }
+}
+
+.jkl-tablist {
+    --text-color: var(--jkl-color-text-interactive);
+    --line-color: var(--jkl-color-border-separator);
+    --indicator-color: var(--jkl-color-border-separator-hover);
+
+    position: relative;
+    display: inline-flex;
+    flex-direction: row;
+    padding: 0;
+    margin: 0;
+    border-bottom: 1px solid var(--line-color);
+    min-width: fit-content;
+    width: 100%;
+
+    &__indicator {
+        position: absolute;
+        height: 2px;
+        background-color: var(--indicator-color);
+        @include jkl.motion("standard", "lazy");
+        transition-property: left, width;
+        will-change: left, width;
+
+        @include jkl.forced-colors-mode {
+            background-color: Highlight;
+        }
+    }
+
+    @include jkl.forced-colors-mode {
+        border-color: GrayText;
+    }
+}
+
+.jkl-tab {
+    @include jkl.use-font-variables("jkl-tab");
+    color: var(--text-color);
+    padding: var(--jkl-tab-padding);
+    border: none;
+    background-color: transparent;
+    cursor: pointer;
+    position: relative;
+    scroll-margin-inline-start: var(--jkl-spacing-16);
+    scroll-snap-align: start;
+    text-decoration: none;
+    white-space: nowrap;
+
+    @include jkl.reset-outline;
+
+    &:hover {
+        --text-color: var(--jkl-color-text-interactive-hover);
+    }
+
+    &:focus-visible {
+        @include jkl.focus-outline($offset: -2px);
+    }
+
+    &[aria-selected="true"] {
+        @include jkl.no-grow-bold;
+    }
+}

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

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

package/src/components/toast/styles/toast.css

@@ -0,0 +1,222 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 23 Sep 2024 08:51:40 GMT
+ */
+:root,
+[data-layout-density=comfortable],
+[data-density=comfortable] {
+  --jkl-toast-padding: 1rem;
+}
+@media (width >= 0) and (max-width: 679px) {
+  :root,
+  [data-layout-density=comfortable],
+  [data-density=comfortable] {
+    --jkl-toast-padding: 0.75rem;
+  }
+}
+
+[data-layout-density=compact],
+[data-density=compact] {
+  --jkl-toast-padding: 0.5rem;
+}
+
+.jkl-toast-region {
+  z-index: 10000;
+  background: transparent;
+  display: flex;
+  justify-content: center;
+  position: fixed;
+  bottom: 1.5rem;
+  right: 0;
+  left: 0;
+  width: 100%;
+  pointer-events: none;
+}
+.jkl-toast-region__toasts {
+  min-width: 18rem;
+  pointer-events: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+}
+.jkl-toast-region--left {
+  justify-content: flex-start;
+  left: 1.5rem;
+}
+
+.jkl-toast {
+  --background-color: var(--jkl-color-background-container-high);
+  --text-color: var(--jkl-color-text-default);
+  color: var(--text-color);
+  background-color: var(--background-color);
+  border-radius: 4px;
+  box-sizing: border-box;
+  display: grid;
+  align-items: start;
+  overflow: hidden;
+  width: 100%;
+  max-width: min(30rem, 85vw);
+  padding: var(--jkl-toast-padding);
+  padding-top: 0;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  font-weight: 400;
+  --jkl-icon-weight: 300;
+}
+@media (min-width: 680px) {
+  .jkl-toast {
+    font-size: 1.25rem;
+    line-height: 2rem;
+    font-weight: 400;
+    --jkl-icon-weight: 300;
+  }
+}
+@media (width >= 0) and (max-width: 679px) {
+  .jkl-toast {
+    grid-template-areas: "progress progress" "icon dismiss" "content content";
+  }
+}
+@media (min-width: 680px) {
+  .jkl-toast {
+    grid-template-areas: "progress progress progress" "icon content dismiss";
+    grid-template-columns: auto 1fr auto;
+  }
+}
+.jkl-toast__progress {
+  grid-area: progress;
+  margin-bottom: 1rem;
+  margin-inline: calc(-1 * var(--jkl-toast-padding));
+}
+.jkl-toast__progress .jkl-countdown {
+  --bar-color: var(--text-color);
+  --track-color: transparent;
+  border-radius: 0;
+}
+.jkl-toast__icon {
+  grid-area: icon;
+  width: 1.5rem;
+  margin-right: 1rem;
+}
+@media screen and (forced-colors: active) {
+  .jkl-toast__icon {
+    stroke: CanvasText;
+  }
+  .jkl-toast__icon svg, .jkl-toast__icon path {
+    stroke: CanvasText;
+  }
+}
+.jkl-toast__content {
+  grid-area: content;
+}
+.jkl-toast__message {
+  margin-top: -0.125rem;
+}
+.jkl-toast__title {
+  margin: 0 0 0.25rem 0;
+  font-size: 1.125rem;
+  line-height: 1.5rem;
+  font-weight: 700;
+  --jkl-icon-weight: 500;
+}
+@media (min-width: 680px) {
+  .jkl-toast__title {
+    font-size: 1.3125rem;
+    line-height: 1.75rem;
+    font-weight: 700;
+    --jkl-icon-weight: 500;
+  }
+}
+.jkl-toast__title ~ .jkl-toast__message {
+  margin-top: 0;
+}
+.jkl-toast__dismiss-button {
+  grid-area: dismiss;
+  justify-self: end;
+  position: relative;
+  margin-left: var(--jkl-toast-gap);
+  background-color: transparent;
+  padding: 0;
+  cursor: pointer;
+  color: inherit;
+}
+@media screen and (forced-colors: active) {
+  .jkl-toast__dismiss-button {
+    stroke: ButtonText;
+  }
+  .jkl-toast__dismiss-button svg, .jkl-toast__dismiss-button path {
+    stroke: ButtonText;
+  }
+}
+@media screen and (forced-colors: active) {
+  .jkl-toast__dismiss-button {
+    background-color: ButtonFace;
+  }
+}
+.jkl-toast__dismiss-button::after {
+  --tap-increment: calc((2.75rem - 1.25rem) / 2 * -1);
+  content: "";
+  position: absolute;
+  inset: var(--tap-increment) var(--tap-increment) var(--tap-increment) var(--tap-increment);
+  border-radius: 0.1875rem;
+}
+.jkl-toast--info, .jkl-toast--warning, .jkl-toast--error, .jkl-toast--success {
+  --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-u3r4y1r 200ms ease-out forwards;
+}
+
+.jkl-toast[data-animation=exiting] {
+  animation: jkl-exiting-u3r4y2h 150ms ease-in forwards;
+}
+
+@keyframes jkl-entering-u3r4y1r {
+  from {
+    opacity: 0;
+    transform: translate3d(0, 50%, 0);
+  }
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+@keyframes jkl-exiting-u3r4y2h {
+  from {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    opacity: 0;
+    transform: translate3d(0, 50%, 0);
+  }
+}

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

@@ -0,0 +1 @@
+:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-toast-padding:1rem}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-toast-padding:0.75rem}}[data-density=compact],[data-layout-density=compact]{--jkl-toast-padding:0.5rem}.jkl-toast-region{background:#0000;bottom:1.5rem;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:1rem;min-width:18rem;pointer-events:auto}.jkl-toast-region--left{justify-content:flex-start;left:1.5rem}.jkl-toast{--background-color:var(--jkl-color-background-container-high);--text-color:var(--jkl-color-text-default);align-items:start;background-color:var(--background-color);border-radius:4px;box-sizing:border-box;color:var(--text-color);display:grid;font-size:1.125rem;font-weight:400;line-height:1.75rem;max-width:min(30rem,85vw);overflow:hidden;padding:var(--jkl-toast-padding);padding-top:0;width:100%;--jkl-icon-weight:300}@media (min-width:680px){.jkl-toast{font-size:1.25rem;font-weight:400;line-height:2rem;--jkl-icon-weight:300}}@media (width >= 0) and (max-width:679px){.jkl-toast{grid-template-areas:"progress progress" "icon dismiss" "content content"}}@media (min-width:680px){.jkl-toast{grid-template-areas:"progress progress progress" "icon content dismiss";grid-template-columns:auto 1fr auto}}.jkl-toast__progress{grid-area:progress;margin-bottom:1rem;margin-inline:calc(var(--jkl-toast-padding)*-1)}.jkl-toast__progress .jkl-countdown{--bar-color:var(--text-color);--track-color:#0000;border-radius:0}.jkl-toast__icon{grid-area:icon;margin-right:1rem;width:1.5rem}@media screen and (forced-colors:active){.jkl-toast__icon,.jkl-toast__icon path,.jkl-toast__icon svg{stroke:CanvasText}}.jkl-toast__content{grid-area:content}.jkl-toast__message{margin-top:-.125rem}.jkl-toast__title{font-size:1.125rem;font-weight:700;line-height:1.5rem;margin:0 0 .25rem;--jkl-icon-weight:500}@media (min-width:680px){.jkl-toast__title{font-size:1.3125rem;font-weight:700;line-height:1.75rem;--jkl-icon-weight:500}}.jkl-toast__title~.jkl-toast__message{margin-top:0}.jkl-toast__dismiss-button{background-color:initial;color:inherit;cursor:pointer;grid-area:dismiss;justify-self:end;margin-left:var(--jkl-toast-gap);padding:0;position:relative}@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-increment:-0.75rem;border-radius:.1875rem;content:"";inset:var(--tap-increment) var(--tap-increment) var(--tap-increment) var(--tap-increment);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-u3r4y1r .2s ease-out forwards}.jkl-toast[data-animation=exiting]{animation:jkl-exiting-u3r4y2h .15s ease-in forwards}@keyframes jkl-entering-u3r4y1r{0%{opacity:0;transform:translate3d(0,50%,0)}to{opacity:1;transform:translateZ(0)}}@keyframes jkl-exiting-u3r4y2h{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,50%,0)}}

package/src/components/toast/styles/toast.scss

@@ -0,0 +1,214 @@
+@charset "UTF-8";
+@use "sass:string";
+@use "../../../core/jkl";
+@use "../../../core/jkl/colors";
+
+@include jkl.comfortable-density-variables {
+    --jkl-toast-padding: #{jkl.$spacing-16};
+
+    @include jkl.small-device {
+        --jkl-toast-padding: #{jkl.$spacing-12};
+    }
+}
+
+@include jkl.compact-density-variables {
+    --jkl-toast-padding: #{jkl.$spacing-8};
+}
+
+.jkl-toast-region {
+    z-index: jkl.$z-index--floating;
+    background: transparent;
+    display: flex;
+    justify-content: center;
+    position: fixed;
+    bottom: jkl.$spacing-24;
+    right: 0;
+    left: 0;
+    width: 100%;
+    pointer-events: none;
+
+    &__toasts {
+        min-width: 18rem;
+        pointer-events: auto;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: jkl.$spacing-16;
+    }
+
+    &--left {
+        justify-content: flex-start;
+        left: jkl.$spacing-24;
+    }
+}
+
+.jkl-toast {
+    --background-color: var(--jkl-color-background-container-high);
+    --text-color: var(--jkl-color-text-default);
+
+    color: var(--text-color);
+    background-color: var(--background-color);
+    border-radius: 4px;
+    box-sizing: border-box;
+    display: grid;
+    align-items: start;
+    overflow: hidden;
+    width: 100%;
+    max-width: min(30rem, 85vw);
+    padding: var(--jkl-toast-padding);
+    padding-top: 0;
+
+    @include jkl.text-style("body");
+
+    @include jkl.small-device {
+        grid-template-areas:
+            "progress progress"
+            "icon dismiss"
+            "content content";
+    }
+
+    @include jkl.from-medium-device {
+        grid-template-areas:
+            "progress progress progress"
+            "icon content dismiss";
+        grid-template-columns: auto 1fr auto;
+    }
+
+    &__progress {
+        grid-area: progress;
+        margin-bottom: jkl.$spacing-16;
+        margin-inline: calc(-1 * var(--jkl-toast-padding)); // Motvirk padding for å gå kant i kant.
+
+        .jkl-countdown {
+            --bar-color: var(--text-color);
+            --track-color: transparent;
+            border-radius: 0;
+        }
+    }
+
+    &__icon {
+        grid-area: icon;
+        width: jkl.$spacing-24;
+        margin-right: jkl.$spacing-16;
+        @include jkl.forced-colors-svg-fallback($stroke: CanvasText);
+    }
+
+    &__content {
+        grid-area: content;
+    }
+
+    &__message {
+        margin-top: jkl.rem(-2px); // Offset for å aligne med ikon hvis uten tittel.
+    }
+
+    &__title {
+        margin: 0 0 jkl.$spacing-4 0;
+        @include jkl.text-style("heading-4");
+
+        & ~ .jkl-toast__message {
+            margin-top: 0; // Unset offset satt for å aligne med ikon hvis uten tittel.
+        }
+    }
+
+    &__dismiss-button {
+        grid-area: dismiss;
+        justify-self: end;
+        position: relative;
+        margin-left: var(--jkl-toast-gap);
+
+        background-color: transparent;
+        padding: 0;
+        cursor: pointer;
+
+        color: inherit;
+        @include jkl.forced-colors-svg-fallback($stroke: ButtonText);
+        @include jkl.forced-colors-mode {
+            background-color: ButtonFace;
+        }
+
+        // Sørg for å ha en stor nok touch target.
+        &::after {
+            --tap-increment: calc((#{jkl.rem(44px)} - #{jkl.rem(20px)}) / 2 * -1);
+            content: "";
+            position: absolute;
+            inset: var(--tap-increment) var(--tap-increment) var(--tap-increment) var(--tap-increment);
+            border-radius: jkl.rem(3px);
+        }
+    }
+
+    &--info,
+    &--warning,
+    &--error,
+    &--success {
+        --text-color: var(--jkl-color-text-on-alert);
+    }
+
+    &--info {
+        --background-color: var(--jkl-color-background-alert-info);
+    }
+
+    &--warning {
+        --background-color: var(--jkl-color-background-alert-warning);
+    }
+
+    &--error {
+        --background-color: var(--jkl-color-background-alert-error);
+    }
+
+    &--success {
+        --background-color: var(--jkl-color-background-alert-success);
+    }
+
+    @include jkl.forced-colors-mode {
+        border: 2px solid CanvasText;
+
+        &--info {
+            border-style: dotted;
+        }
+
+        &--warning {
+            border-style: dashed;
+        }
+
+        &--error {
+            border-style: double;
+            border-width: 4px;
+        }
+    }
+}
+
+$_entering: jkl-entering-#{string.unique-id()};
+$_exiting: jkl-exiting-#{string.unique-id()};
+
+.jkl-toast[data-animation="entering"],
+.jkl-toast[data-animation="queued"] {
+    animation: $_entering jkl.timing("polite") jkl.easing("entrance") forwards;
+}
+
+.jkl-toast[data-animation="exiting"] {
+    animation: $_exiting jkl.timing("productive") jkl.easing("exit") forwards;
+}
+
+@keyframes #{$_entering} {
+    from {
+        opacity: 0;
+        transform: translate3d(0, 50%, 0);
+    }
+
+    to {
+        opacity: 1;
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+@keyframes #{$_exiting} {
+    from {
+        opacity: 1;
+        transform: translate3d(0, 0, 0);
+    }
+
+    to {
+        opacity: 0;
+        transform: translate3d(0, 50%, 0);
+    }
+}

package/src/components/toggle-switch/styles/_index.scss

@@ -0,0 +1 @@
+@forward "toggle-switch";

package/src/components/toggle-switch/styles/_toggle-slider.scss

@@ -0,0 +1,132 @@
+@use "sass:color";
+@use "../../../core/jkl";
+
+$_slider-rounded: jkl.rem(100px);
+
+@include jkl.light-mode-variables {
+    --jkl-slider-bg: #{jkl.$color-varde};
+    --jkl-slider-pill: #{jkl.$color-snohvit};
+    --jkl-slider-pill-text: #{jkl.$color-granitt};
+    --jkl-slider-pill-text--active: #{jkl.$color-svart};
+    --jkl-slider-focus-color: #{jkl.$color-svart};
+    --jkl-slider-hover-color: #{jkl.$color-svart};
+}
+
+@include jkl.dark-mode-variables {
+    --jkl-slider-bg: #{jkl.$color-fjellgra};
+    --jkl-slider-pill: #{jkl.$color-granitt};
+    --jkl-slider-pill-text: #{jkl.$color-snohvit};
+    --jkl-slider-pill-text--active: #{jkl.$color-hvit};
+    --jkl-slider-focus-color: #{jkl.$color-svaberg};
+    --jkl-slider-hover-color: #{jkl.$color-hvit};
+}
+
+@include jkl.comfortable-density-variables {
+    @include jkl.declare-font-variables("jkl-slider", "body");
+
+    --jkl-slider-legend-font-size: var(--jkl-body-font-size);
+    --jkl-slider-legend-line-height: var(--jkl-body-line-height);
+    --jkl-slider-legend-font-weight: #{jkl.$typography-weight-bold};
+}
+
+@include jkl.compact-density-variables {
+    @include jkl.declare-font-variables("jkl-slider", "small");
+
+    --jkl-slider-legend-font-size: var(--jkl-small-font-size);
+    --jkl-slider-legend-line-height: var(--jkl-small-line-height);
+    --jkl-slider-legend-font-weight: #{jkl.$typography-weight-bold};
+}
+
+.jkl-toggle-slider {
+    @include jkl.use-font-variables("jkl-slider");
+
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: flex-start;
+    width: 100%;
+    flex-direction: column;
+    user-select: none;
+
+    html:not([data-mousenavigation]):not([data-touchnavigation]) &:focus-within {
+        .jkl-toggle-slider__pill {
+            box-shadow: inset 0 0 0 jkl.rem(2px) var(--jkl-slider-focus-color);
+        }
+    }
+
+    &__legend {
+        margin-bottom: jkl.$spacing-xs;
+        @include jkl.use-font-variables("jkl-slider-legend");
+
+        &--sr-only {
+            @include jkl.screenreader-only;
+        }
+    }
+
+    &__inputs {
+        $_slider-offset: 2px;
+        display: flex;
+        position: relative;
+        overflow: hidden;
+        background-color: var(--jkl-slider-bg);
+        border-radius: $_slider-rounded;
+        border: $_slider-offset solid var(--jkl-slider-bg);
+    }
+
+    &__input {
+        position: absolute;
+        opacity: 0;
+    }
+
+    &__label {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 1;
+        cursor: pointer;
+        padding: jkl.$spacing-3xs jkl.$spacing-m;
+        color: var(--jkl-slider-pill-text);
+        -webkit-tap-highlight-color: transparent;
+
+        /* Prevent really short labels to look like circles */
+        min-width: 30px;
+
+        &:hover {
+            color: var(--jkl-slider-hover-color);
+        }
+
+        &--selected {
+            @include jkl.no-grow-bold;
+            color: var(--jkl-slider-pill-text--active);
+        }
+    }
+
+    &__pill {
+        height: 100%;
+        background-color: var(--jkl-slider-pill);
+        position: absolute;
+        transition-property: width, transform;
+        border-radius: $_slider-rounded;
+        @include jkl.motion(standard, expressive);
+    }
+
+    @include jkl.from-medium-device {
+        flex-direction: row;
+        align-items: center;
+
+        &__legend {
+            margin-bottom: 0;
+            margin-right: 1.2em;
+        }
+    }
+
+    @include jkl.forced-colors-mode {
+        & .jkl-toggle-slider__inputs {
+            background-color: Canvas;
+        }
+
+        & .jkl-toggle-slider__pill {
+            background-color: ButtonFace;
+        }
+    }
+}

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

@@ -105,6 +105,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
   transition-duration: 100ms;
   transition-property: color;
   cursor: pointer;
+  position: relative;
   background-color: transparent;
   padding: 0;
   display: inline-flex;
@@ -112,6 +113,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
   color: var(--button-color);
   transform: translateY(max(0.16em, 0.25rem));
   font-size: 1.2em;
+  border-radius: 9999px;
   outline: 0;
   border-style: none;
   outline-style: none;
@@ -133,4 +135,17 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
 }
 .jkl-tooltip-question-button:hover {
   --button-color: var(--jkl-color-text-interactive-hover);
+}
+.jkl-tooltip-question-button:focus-visible {
+  outline: 2px solid var(--jkl-color-border-action);
+  outline-offset: 0;
+}
+.jkl-tooltip-question-button::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  translate: -50% -50%;
+  min-width: 44px;
+  min-height: 44px;
 }