@fremtind/jokul 0.11.0 → 0.12.1

package/src/components/message/styles/message.scss

@@ -0,0 +1,180 @@
+@charset "UTF-8";
+@use "sass:string";
+@use "../../../core/jkl";
+
+$_dismiss-animation-duration: jkl.timing("lazy");
+$_message-width: jkl.rem(560px);
+$_message-width--compact: jkl.rem(440px);
+
+$_dismiss-animation-name: jkl-dismiss-#{string.unique-id()};
+$_dismiss-hover-color: jkl.$color-stein;
+
+@include jkl.comfortable-density-variables {
+    @include jkl.declare-font-variables("jkl-message-content", "body");
+    @include jkl.declare-font-variables("jkl-message-title", "heading-4");
+
+    --jkl-message-icon-size: #{jkl.rem(24px)};
+    --jkl-message-icon-left: #{jkl.rem(16px)};
+    --jkl-message-icon-top: #{jkl.rem(24px)};
+    --jkl-message-title-margin: 0 0 #{jkl.$spacing-4} 0;
+    --jkl-message-dismiss-button-size: #{jkl.rem(44px)};
+    --jkl-message-gap: #{jkl.$spacing-12};
+    --jkl-message-padding: #{jkl.$spacing-16} #{jkl.$spacing-12};
+
+    @include jkl.from-medium-device {
+        --jkl-message-gap: #{jkl.$spacing-16};
+        --jkl-message-padding: #{jkl.$spacing-24} #{jkl.$spacing-16};
+    }
+}
+
+@include jkl.compact-density-variables {
+    @include jkl.declare-font-variables("jkl-message-content", "small");
+    @include jkl.declare-font-variables("jkl-message-title", "heading-5");
+
+    --jkl-message-icon-size: #{jkl.rem(20px)};
+    --jkl-message-icon-left: #{jkl.rem(6px)};
+    --jkl-message-icon-top: #{jkl.rem(14px)};
+    --jkl-message-dismiss-button-size: #{jkl.rem(32px)};
+    --jkl-message-gap: #{jkl.$spacing-8};
+    --jkl-message-padding: #{jkl.$spacing-12} #{jkl.$spacing-8};
+}
+
+.jkl-message {
+    --background-color: var(--jkl-color-background-alert-neutral);
+    --text-color: var(--jkl-color-text-on-alert);
+
+    width: 100%;
+    max-width: $_message-width;
+    padding: var(--jkl-message-padding);
+    background-color: var(--background-color);
+    color: var(--text-color);
+    border-radius: jkl.rem(4px);
+    box-sizing: border-box;
+
+    display: grid;
+    align-items: start;
+    grid-template-areas: "icon content dismiss";
+    grid-template-columns: auto 1fr auto;
+
+    &__icon {
+        grid-area: icon;
+        width: var(--jkl-message-icon-size);
+        margin-right: var(--jkl-message-gap);
+
+        @include jkl.forced-colors-svg-fallback($stroke: CanvasText);
+    }
+
+    &__content {
+        grid-area: content;
+    }
+
+    &__message {
+        @include jkl.use-font-variables("jkl-message-content");
+
+        margin-top: jkl.rem(-2px); // Offset for å aligne med ikon hvis uten tittel.
+    }
+
+    &__title {
+        @include jkl.use-font-variables("jkl-message-title");
+        margin: var(--jkl-message-title-margin);
+
+        & ~ .jkl-message__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-message-gap);
+
+        background-color: transparent;
+        padding: 0;
+        cursor: pointer;
+
+        color: inherit;
+
+        @include jkl.reset-outline;
+        @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((var(--jkl-message-dismiss-button-size) - #{jkl.rem(20px)}) / 2 * -1);
+            content: "";
+            position: absolute;
+            inset: var(--tap-increment) var(--tap-increment) var(--tap-increment) var(--tap-increment);
+        }
+
+        &:hover {
+            color: $_dismiss-hover-color;
+            @include jkl.forced-colors-svg-fallback($stroke: ButtonText);
+        }
+
+        &:focus-visible {
+            @include jkl.focus-outline(0);
+        }
+    }
+
+    &--full {
+        max-width: 100%;
+    }
+
+    &--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);
+    }
+
+    &--dismissed {
+        animation: $_dismiss-animation-name $_dismiss-animation-duration ease-in-out forwards;
+        transition: visibility 0ms $_dismiss-animation-duration;
+        visibility: hidden;
+    }
+
+    @include jkl.forced-colors-mode {
+        border: 2px solid CanvasText;
+
+        &--info {
+            border-style: dotted;
+        }
+
+        &--warning {
+            border-style: dashed;
+        }
+
+        &--error {
+            border-style: double;
+            border-width: 4px;
+        }
+    }
+}
+
+@keyframes #{$_dismiss-animation-name} {
+    from {
+        opacity: 1;
+        transform: translate3d(0, 0, 0);
+    }
+
+    to {
+        opacity: 0;
+        transform: translate3d(0, -50%, 0);
+    }
+}
+
+.jkl-form-error-message {
+    padding-bottom: jkl.$spacing-40;
+}

package/src/components/radio-button/styles/radio-button.css

@@ -44,7 +44,7 @@
   --jkl-radio-button-label-font-weight: var(--jkl-small-font-weight);
 }
 
-@keyframes jkl-dot-in-usj5g8g {
+@keyframes jkl-dot-in-uk98adt {
   0% {
     transform: scale(0.8);
   }
@@ -87,7 +87,7 @@
 }
 .jkl-radio-button__input:checked + .jkl-radio-button__label > .jkl-radio-button__dot::after {
   --dot-color: var(--jkl-color-border-action);
-  animation: jkl-dot-in-usj5g8g 150ms ease;
+  animation: jkl-dot-in-uk98adt 150ms ease;
 }
 @media screen and (forced-colors: active) {
   .jkl-radio-button__input:checked + .jkl-radio-button__label > .jkl-radio-button__dot::after {

package/src/components/radio-button/styles/radio-button.min.css

@@ -1 +1 @@
-:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-radio-button-height:3rem;--jkl-radio-button-line-height:2rem;--jkl-radio-button-size:1.5rem;--jkl-radio-button-text-margin:0.5rem 0;--jkl-radio-button-text-transform:translate3d(0,0.0625rem,0);--jkl-radio-button-dot-margin:0.75rem 0.5rem 0.75rem 0;--jkl-radio-button-dot-size:1rem;--jkl-radio-button-label-font-size:var(--jkl-body-font-size);--jkl-radio-button-label-line-height:var(--jkl-body-line-height);--jkl-radio-button-label-font-weight:var(--jkl-body-font-weight)}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-radio-button-height:2.5rem;--jkl-radio-button-line-height:1.75rem;--jkl-radio-button-size:1.5rem;--jkl-radio-button-text-margin:0.5rem 0;--jkl-radio-button-text-transform:translateZ(0);--jkl-radio-button-dot-margin:0.625rem 0.5rem 0.625rem 0;--jkl-radio-button-dot-size:1rem}}[data-density=compact],[data-layout-density=compact]{--jkl-radio-button-height:1.75rem;--jkl-radio-button-line-height:1.5rem;--jkl-radio-button-size:1.125rem;--jkl-radio-button-text-margin:0.25rem 0;--jkl-radio-button-text-transform:translateZ(0);--jkl-radio-button-dot-margin:0.4375rem 0.5rem 0.4375rem 0;--jkl-radio-button-dot-size:0.625rem;--jkl-radio-button-label-font-size:var(--jkl-small-font-size);--jkl-radio-button-label-line-height:var(--jkl-small-line-height);--jkl-radio-button-label-font-weight:var(--jkl-small-font-weight)}@keyframes jkl-dot-in-usj5g8g{0%{transform:scale(.8)}to{transform:scale(1)}}.jkl-radio-button{--ring-color:var(--jkl-color-border-action);--dot-color:#0000;--background-color:#0000;--text-color:var(--jkl-color-text-default);border-style:none;color:var(--text-color);display:flex;min-height:var(--jkl-radio-button-height);position:relative}.jkl-radio-button,.jkl-radio-button:active,.jkl-radio-button:focus,.jkl-radio-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-radio-button{border-style:revert}.jkl-radio-button,.jkl-radio-button:active,.jkl-radio-button:focus,.jkl-radio-button:hover{outline:revert;outline-style:revert}}.jkl-radio-button__input{opacity:0;position:absolute;top:-6px}.jkl-radio-button__input:checked+.jkl-radio-button__label>.jkl-radio-button__dot:after{--dot-color:var(--jkl-color-border-action);animation:jkl-dot-in-usj5g8g .15s ease}@media screen and (forced-colors:active){.jkl-radio-button__input:checked+.jkl-radio-button__label>.jkl-radio-button__dot:after{background-color:ButtonText}}.jkl-radio-button--error .jkl-radio-button__input:checked+.jkl-radio-button__label{--background-color:var(--jkl-color-background-alert-error);--dot-color:var(--jkl-color-text-on-alert)}.jkl-radio-button__input:focus-visible+.jkl-radio-button__label{--background-color:var(--jkl-color-background-input-focus)}.jkl-radio-button__input:focus-visible+.jkl-radio-button__label>.jkl-radio-button__dot{outline:2px solid var(--jkl-color-border-action);outline-offset:2px}.jkl-radio-button--error .jkl-radio-button__input:focus-visible+.jkl-radio-button__label{--background-color:var(--jkl-color-background-alert-error);--dot-color:var(--jkl-color-text-on-alert)}.jkl-radio-button__label{align-items:flex-start;cursor:pointer;display:flex;font-size:var(--jkl-radio-button-label-font-size);font-weight:var(--jkl-radio-button-label-font-weight);line-height:var(--jkl-radio-button-label-line-height)}.jkl-radio-button__label:hover>.jkl-radio-button__dot{outline:1px solid var(--ring-color)}.jkl-radio-button__label:active>.jkl-radio-button__dot .jkl-radio-button__label:after{scale:.9}.jkl-radio-button__dot{background-color:var(--background-color);border:.0625rem solid var(--ring-color);border-radius:50%;box-sizing:border-box;display:inline-block;flex-shrink:0;height:var(--jkl-radio-button-size);margin:var(--jkl-radio-button-dot-margin);position:relative;transition-duration:.15s;transition-property:background-color,outline;transition-timing-function:ease;width:var(--jkl-radio-button-size)}.jkl-radio-button__dot:after{background-color:var(--dot-color);border-radius:50%;content:"";height:var(--jkl-radio-button-dot-size);left:50%;position:absolute;scale:1;top:50%;transition-duration:.15s;transition-property:transform;transition-timing-function:ease;translate:-50% -50%;width:var(--jkl-radio-button-dot-size)}@media screen and (forced-colors:active){.jkl-radio-button__dot{border:1px solid ButtonText;outline:revert}}.jkl-radio-button__text{display:inline-block;margin:var(--jkl-radio-button-text-margin);transform:var(--jkl-radio-button-text-transform)}.jkl-radio-button--error{--background-color:var(--jkl-color-background-alert-error)}.jkl-radio-button--inline{display:inline-flex;margin-right:1.5rem;margin-top:unset}.jkl-radio-button+.jkl-form-support-label{margin-bottom:.5rem;margin-left:calc(var(--jkl-radio-button-size) + .5rem);margin-top:-.375rem}
+:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-radio-button-height:3rem;--jkl-radio-button-line-height:2rem;--jkl-radio-button-size:1.5rem;--jkl-radio-button-text-margin:0.5rem 0;--jkl-radio-button-text-transform:translate3d(0,0.0625rem,0);--jkl-radio-button-dot-margin:0.75rem 0.5rem 0.75rem 0;--jkl-radio-button-dot-size:1rem;--jkl-radio-button-label-font-size:var(--jkl-body-font-size);--jkl-radio-button-label-line-height:var(--jkl-body-line-height);--jkl-radio-button-label-font-weight:var(--jkl-body-font-weight)}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-radio-button-height:2.5rem;--jkl-radio-button-line-height:1.75rem;--jkl-radio-button-size:1.5rem;--jkl-radio-button-text-margin:0.5rem 0;--jkl-radio-button-text-transform:translateZ(0);--jkl-radio-button-dot-margin:0.625rem 0.5rem 0.625rem 0;--jkl-radio-button-dot-size:1rem}}[data-density=compact],[data-layout-density=compact]{--jkl-radio-button-height:1.75rem;--jkl-radio-button-line-height:1.5rem;--jkl-radio-button-size:1.125rem;--jkl-radio-button-text-margin:0.25rem 0;--jkl-radio-button-text-transform:translateZ(0);--jkl-radio-button-dot-margin:0.4375rem 0.5rem 0.4375rem 0;--jkl-radio-button-dot-size:0.625rem;--jkl-radio-button-label-font-size:var(--jkl-small-font-size);--jkl-radio-button-label-line-height:var(--jkl-small-line-height);--jkl-radio-button-label-font-weight:var(--jkl-small-font-weight)}@keyframes jkl-dot-in-uk98adt{0%{transform:scale(.8)}to{transform:scale(1)}}.jkl-radio-button{--ring-color:var(--jkl-color-border-action);--dot-color:#0000;--background-color:#0000;--text-color:var(--jkl-color-text-default);border-style:none;color:var(--text-color);display:flex;min-height:var(--jkl-radio-button-height);position:relative}.jkl-radio-button,.jkl-radio-button:active,.jkl-radio-button:focus,.jkl-radio-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-radio-button{border-style:revert}.jkl-radio-button,.jkl-radio-button:active,.jkl-radio-button:focus,.jkl-radio-button:hover{outline:revert;outline-style:revert}}.jkl-radio-button__input{opacity:0;position:absolute;top:-6px}.jkl-radio-button__input:checked+.jkl-radio-button__label>.jkl-radio-button__dot:after{--dot-color:var(--jkl-color-border-action);animation:jkl-dot-in-uk98adt .15s ease}@media screen and (forced-colors:active){.jkl-radio-button__input:checked+.jkl-radio-button__label>.jkl-radio-button__dot:after{background-color:ButtonText}}.jkl-radio-button--error .jkl-radio-button__input:checked+.jkl-radio-button__label{--background-color:var(--jkl-color-background-alert-error);--dot-color:var(--jkl-color-text-on-alert)}.jkl-radio-button__input:focus-visible+.jkl-radio-button__label{--background-color:var(--jkl-color-background-input-focus)}.jkl-radio-button__input:focus-visible+.jkl-radio-button__label>.jkl-radio-button__dot{outline:2px solid var(--jkl-color-border-action);outline-offset:2px}.jkl-radio-button--error .jkl-radio-button__input:focus-visible+.jkl-radio-button__label{--background-color:var(--jkl-color-background-alert-error);--dot-color:var(--jkl-color-text-on-alert)}.jkl-radio-button__label{align-items:flex-start;cursor:pointer;display:flex;font-size:var(--jkl-radio-button-label-font-size);font-weight:var(--jkl-radio-button-label-font-weight);line-height:var(--jkl-radio-button-label-line-height)}.jkl-radio-button__label:hover>.jkl-radio-button__dot{outline:1px solid var(--ring-color)}.jkl-radio-button__label:active>.jkl-radio-button__dot .jkl-radio-button__label:after{scale:.9}.jkl-radio-button__dot{background-color:var(--background-color);border:.0625rem solid var(--ring-color);border-radius:50%;box-sizing:border-box;display:inline-block;flex-shrink:0;height:var(--jkl-radio-button-size);margin:var(--jkl-radio-button-dot-margin);position:relative;transition-duration:.15s;transition-property:background-color,outline;transition-timing-function:ease;width:var(--jkl-radio-button-size)}.jkl-radio-button__dot:after{background-color:var(--dot-color);border-radius:50%;content:"";height:var(--jkl-radio-button-dot-size);left:50%;position:absolute;scale:1;top:50%;transition-duration:.15s;transition-property:transform;transition-timing-function:ease;translate:-50% -50%;width:var(--jkl-radio-button-dot-size)}@media screen and (forced-colors:active){.jkl-radio-button__dot{border:1px solid ButtonText;outline:revert}}.jkl-radio-button__text{display:inline-block;margin:var(--jkl-radio-button-text-margin);transform:var(--jkl-radio-button-text-transform)}.jkl-radio-button--error{--background-color:var(--jkl-color-background-alert-error)}.jkl-radio-button--inline{display:inline-flex;margin-right:1.5rem;margin-top:unset}.jkl-radio-button+.jkl-form-support-label{margin-bottom:.5rem;margin-left:calc(var(--jkl-radio-button-size) + .5rem);margin-top:-.375rem}

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;
 }

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

@@ -1 +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);font-size:1rem;font-weight:400;line-height:1.5rem;--jkl-icon-weight:300;background-color:var(--background-color);color:var(--text-color);display:inline-block;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)}
+: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);font-size:1rem;font-weight:400;line-height:1.5rem;--jkl-icon-weight:300;background-color:var(--background-color);color:var(--text-color);display:inline-block;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-radius:9999px;border-style:none;color:var(--button-color);cursor:pointer;display:inline-flex;font-size:1.2em;outline:0;outline-style:none;padding:0;position:relative;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)}.jkl-tooltip-question-button:focus-visible{outline:2px solid var(--jkl-color-border-action);outline-offset:0}.jkl-tooltip-question-button:after{content:"";left:50%;min-height:44px;min-width:44px;position:absolute;top:50%;translate:-50% -50%}

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

@@ -89,6 +89,7 @@ $_focus-ring-width: jkl.rem(2px);
     @include jkl.motion("exit", "snappy");
     transition-property: color;
     cursor: pointer;
+    position: relative;
     background-color: transparent;
     padding: 0;
     display: inline-flex;
@@ -96,10 +97,25 @@ $_focus-ring-width: jkl.rem(2px);
     color: var(--button-color);
     transform: translateY(max(0.16em, jkl.rem(4px))); // Cap på 4px
     font-size: 1.2em;
+    border-radius: 9999px;
 
     @include jkl.reset-outline;
 
     &:hover {
         --button-color: var(--jkl-color-text-interactive-hover);
     }
+
+    &:focus-visible {
+        @include jkl.focus-outline(0);
+    }
+
+    &::after {
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        translate: -50% -50%;
+        min-width: 44px;
+        min-height: 44px;
+    }
 }

package/build/NativeSelect-BxgwmRDc.cjs

@@ -1,2 +0,0 @@
-"use strict";const e=require("react/jsx-runtime"),n=require("./clsx-E3yX_9sL.cjs"),o=require("react");require("./cjs/hooks/useScreen/useScreen.js");const s=require("./cjs/hooks/useId/useId.js");require("./cjs/components/icon/Icon.js");const t=require("./cjs/components/icon/icons/animated/ArrowVerticalAnimated.js");require("./cjs/components/icon/icons/animated/ArrowHorizontalAnimated.js"),require("./cjs/components/icon/icons/animated/PlusRemoveAnimated.js"),require("./cjs/components/icon/icons/ArrowDownIcon.js"),require("./cjs/components/icon/icons/ArrowLeftIcon.js"),require("./cjs/components/icon/icons/ArrowNorthEastIcon.js"),require("./cjs/components/icon/icons/ArrowRightIcon.js"),require("./cjs/components/icon/icons/ArrowUpIcon.js"),require("./cjs/components/icon/icons/CalendarIcon.js"),require("./cjs/components/icon/icons/CheckIcon.js"),require("./cjs/components/icon/icons/ChevronDownIcon.js"),require("./cjs/components/icon/icons/ChevronLeftIcon.js"),require("./cjs/components/icon/icons/ChevronRightIcon.js"),require("./cjs/components/icon/icons/ChevronUpIcon.js"),require("./cjs/components/icon/icons/CloseIcon.js"),require("./cjs/components/icon/icons/CopyIcon.js"),require("./cjs/components/icon/icons/DotsIcon.js"),require("./cjs/components/icon/icons/DragIcon.js"),require("./cjs/components/icon/icons/ErrorIcon.js"),require("./cjs/components/icon/icons/GreenCheckIcon.js"),require("./cjs/components/icon/icons/HamburgerIcon.js"),require("./cjs/components/icon/icons/InfoIcon.js"),require("./cjs/components/icon/icons/LinkIcon.js"),require("./cjs/components/icon/icons/PlusIcon.js"),require("./cjs/components/icon/icons/QuestionIcon.js"),require("./cjs/components/icon/icons/RedCrossIcon.js"),require("./cjs/components/icon/icons/SearchIcon.js"),require("./cjs/components/icon/icons/SuccessIcon.js"),require("./cjs/components/icon/icons/WarningIcon.js"),require("./cjs/components/icon/icons/MinusIcon.js"),require("./cjs/components/icon/icons/ThumbDownIcon.js"),require("./cjs/components/icon/icons/ThumbUpIcon.js"),require("./cjs/components/icon/icons/TrashCanIcon.js"),require("./cjs/components/icon/icons/PenIcon.js"),require("./cjs/components/button/Button.js"),require("./cjs/components/card/Card.js"),require("./cjs/components/card/CardImage.js"),require("./cjs/components/card/NavCard.js"),require("./cjs/components/checkbox/Checkbox.js"),require("./cjs/components/combobox/Combobox.js"),require("./cjs/components/cookie-consent/CookieConsentContext.js"),require("react-dom"),require("./cjs/components/modal/Modal.js"),require("react-a11y-dialog"),require("./cjs/components/list/List.js"),require("./cjs/components/list/ListItem.js"),require("./cjs/components/datepicker/DatePicker.js"),require("./cjs/components/icon-button/IconButton.js"),require("./cjs/components/tooltip/Tooltip.js"),require("./cjs/components/tooltip/TooltipContent.js"),require("./cjs/components/tooltip/TooltipTrigger.js");const c=require("./cjs/components/input-group/InputGroup.js");require("./cjs/components/link/Link.js"),require("./cjs/components/link/NavLink.js"),require("./cjs/components/link-list/LinkList.js"),require("./cjs/components/popover/Popover.js"),require("./cjs/components/radio-button/RadioButton.js"),require("./cjs/components/radio-button/radioGroupContext.js"),require("./cjs/components/radio-button/BaseRadioButton.js");const r=require("./cjs/hooks/useAnimatedHeight/useAnimatedHeight.js"),i=require("./cjs/hooks/usePreviousValue/usePreviousValue.js"),l=require("./cjs/hooks/useListNavigation/useListNavigation.js");require("./cjs/components/tag/Tag.js"),require("./cjs/components/text-input/BaseTextArea.js"),require("./cjs/components/text-input/BaseTextInput.js"),require("./cjs/components/text-input/TextArea.js"),require("./cjs/components/text-input/TextInput.js"),require("./cjs/utilities/polymorphism/SlotComponent.js");const a=require("./cjs/utilities/valuePair.js"),u=require("./cjs/components/select/select-utils.js"),p=()=>{},j=o.forwardRef(((j,d)=>{const{id:m,name:v,items:b,value:f,label:k,labelProps:q,onChange:h,onBlur:g,onFocus:w,className:x,helpLabel:y,errorLabel:I,invalid:_,searchable:C=!1,inline:L=!1,defaultPrompt:P="Velg",density:N,width:D,maxShownOptions:A=5,style:E,...S}=j,T=s.useId(m||"jkl-select",{generateSuffix:!m}),$=`${T}_label`,V=`${T}_button`,R=`${T}_search-input`,[B,F]=o.useState(!1),M=o.useCallback((()=>{F((e=>!e))}),[]),G=!!C,H=G&&B,[K,U]=o.useState(""),O=o.useCallback((e=>!!e.label.toLowerCase().includes(K.toLowerCase())||"function"==typeof C&&C(K,e)),[C,K]),z=o.useMemo((()=>b.map(a.getValuePair).map((e=>{const n=!G||""===K||O(e);return{...e,visible:n}}))),[b,G,K,O]),Q=o.useMemo((()=>!(typeof f>"u")&&b.some((e=>"string"==typeof e?e===f:e.value===f))),[f,b]),[W,J]=o.useState(Q&&void 0!==f?f:""),X=""!==W,Y=o.useMemo((()=>{var e;return(null==(e=z.find((e=>e.value===W)))?void 0:e.label)||P}),[z,W,P]),Z=o.useRef(null),ee=o.useCallback((e=>{Z.current=e,d&&("function"==typeof d?d(e):d.current=e),e&&J(e.value)}),[Z,d]),ne=i.usePreviousValue(f);o.useEffect((()=>{f!==ne&&J(typeof f>"u"||!Q?"":f)}),[J,f,ne,Q]);const oe=o.useCallback((e=>{const n=e.value;U(""),J(n),M()}),[U,J,M]),se=i.usePreviousValue(W);o.useEffect((()=>{typeof se>"u"||se===W||W===f||(h&&h({type:"change",target:{name:v,value:W}}),Z.current&&Z.current.dispatchEvent(new Event("change",{bubbles:!0})))}),[h,v,f,W,se]);const te=o.useRef(null),ce=o.useRef(!1),re=o.useRef(null),ie=o.useRef(null),le=o.useCallback(((e,n)=>{if(e&&!G){const e=n.current;e&&u.focusSelected(e,W)}else e?re.current&&re.current.focus():ce.current&&ie.current&&ie.current.focus()}),[G,W]),[ae]=r.useAnimatedHeight(B,{onFirstVisible:le,onTransitionEnd:le});l.useListNavigation({ref:ae});const ue=o.useCallback((e=>{var n;const o=te.current;o&&o.contains(e.relatedTarget)||(G&&U(""),g&&(g({type:"blur",target:{name:v,value:W}}),null==(n=Z.current)||n.dispatchEvent(new Event("focusout",{bubbles:!0}))),ce.current=!1,F(!1))}),[g,G,v,W]),pe=o.useCallback((()=>{ce.current||(w&&w({type:"change",target:{name:v,value:W}}),ce.current=!0)}),[w,W,v]),je=o.useCallback((e=>{e.target.focus({preventScroll:!0})}),[]);o.useEffect((()=>{const e=Z.current,n=re.current,o=ie.current,s=te.current;return null==e||e.addEventListener("focus",(()=>{H?null==n||n.focus():null==o||o.focus()})),null==e||e.addEventListener("blur",(function(e){s&&s.contains(e.relatedTarget)&&e.preventDefault()})),()=>{null==e||e.removeEventListener("focus",(()=>{H?null==n||n.focus():null==o||o.focus()})),null==e||e.removeEventListener("blur",(function(e){s&&s.contains(e.relatedTarget)&&e.preventDefault()}))}}),[H]);const de=o.useCallback((e=>{"ArrowDown"!==e.key&&" "!==e.key||B?"Escape"===e.key&&(e.preventDefault(),e.stopPropagation(),F(!1)):(e.preventDefault(),e.stopPropagation(),F(!0))}),[F,B]),me=o.useCallback((e=>{if("ArrowDown"===e.key){e.preventDefault(),e.stopPropagation();const n=ae.current;n&&(G?u.focusSelected(n,void 0):u.focusSelected(n,W))}else if("Escape"===e.key)e.preventDefault(),e.stopPropagation(),F(!1);else if("Tab"!==e.key||e.shiftKey)"Enter"===e.key&&B&&(e.preventDefault(),e.stopPropagation());else{const n=ae.current;n&&(e.preventDefault(),e.stopPropagation(),u.focusSelected(n,W))}}),[F,ae,W,G,B]),ve=o.useCallback((e=>{if("Tab"===e.key)e.preventDefault(),e.stopPropagation(),e.shiftKey&&re.current?re.current.focus():ie.current&&(J(e.currentTarget.value),F(!1),ie.current.focus());else if("ArrowUp"===e.key&&ae.current&&re.current){const n=ae.current.querySelector('[role="option"]:not([hidden])');e.currentTarget.id===(null==n?void 0:n.id)&&re.current&&re.current.focus()}}),[F,ae]);return o.useEffect((()=>{const e=e=>{"Escape"===e.key&&B&&F(!1)};return typeof window<"u"&&B&&window.addEventListener("keydown",e),()=>{typeof window<"u"&&window.removeEventListener("keydown",e)}}),[F,B]),e.jsxs(e.Fragment,{children:[e.jsxs("select",{name:v,tabIndex:-1,"data-testid":"jkl-native-select",className:"jkl-sr-only","aria-hidden":!0,ref:ee,value:W,onChange:p,children:[e.jsx("option",{value:""})," ",z.map((n=>e.jsx("option",{hidden:!n.visible,value:n.value,children:n.label},`${T}-opt-${n.value}`)))]}),e.jsx(c.InputGroup,{ref:te,"data-testid":"jkl-select",className:n.clsx("jkl-select",x,{"jkl-select--inline":L,"jkl-select--open":B&&z.some((e=>e.visible)),"jkl-select--no-value":!X,"jkl-select--invalid":!!I||_}),...S,id:G?R:V,style:{"--jkl-select-max-shown-options":A,...E},density:N,label:k,labelProps:{id:$,srOnly:L,...q,htmlFor:G?R:V},helpLabel:y,errorLabel:I,render:o=>e.jsxs("div",{className:"jkl-select__outer-wrapper",style:{width:D},children:[G&&e.jsx("input",{...o,id:R,hidden:!H,ref:re,placeholder:"Søk",value:K,onChange:e=>U(e.target.value),"data-testid":"jkl-select__search-input",className:"jkl-select__search-input","aria-autocomplete":"list","aria-activedescendant":X?`${T}__${u.toLower(W)}`:void 0,"aria-controls":T,"aria-expanded":B,role:"combobox",onKeyDown:me,onBlur:ue,onFocus:pe,onClick:e=>{e.stopPropagation()}}),e.jsx("button",{...o,id:V,ref:ie,hidden:H,type:"button",name:`${v}-btn`,className:n.clsx("jkl-select__button",{"jkl-select__button--active-value":!!W}),"data-testid":"jkl-select__button","aria-label":`${Y||"Velg"},${k}`,"aria-expanded":B,"aria-controls":T,onBlur:ue,onFocus:pe,onKeyDown:de,onClick:M,onMouseDown:e=>{var n;e.preventDefault(),null==(n=ie.current)||n.focus()},children:Y}),e.jsx("div",{id:T,ref:ae,role:"listbox",className:"jkl-select__options-menu",hidden:!B||z.every((e=>!e.visible)),"aria-labelledby":$,tabIndex:-1,"data-focus":"controlled",children:z.map(((n,o)=>n.visible?e.jsxs("button",{hidden:!n.visible,type:"button",id:`${T}__${u.toLower(n.value)}`,className:"jkl-select__option","data-testid":"jkl-select__option","aria-selected":n.value===W,role:"option",value:n.value,"data-testautoid":`jkl-select__option-${o}`,onBlur:ue,onFocus:pe,onKeyDown:ve,onClick:e=>{e.preventDefault(),oe(n)},onMouseOver:je,children:[n.label,n.description?e.jsx("span",{className:"jkl-select__option-description",children:n.description}):null]},`${T}-${n.value}`):null))}),e.jsx(t.ArrowVerticalAnimated,{variant:"medium",pointingDown:!B,className:"jkl-select__arrow"})]})})]})}));j.displayName="Select";const d=o.forwardRef(((o,s)=>{const{label:r,className:i,density:l,errorLabel:u,helpLabel:p,inline:j,invalid:d,items:m,labelProps:v,placeholder:b="Velg",selectClassName:f,supportLabelProps:k,tooltipProps:q,value:h,width:g,...w}=o,x={label:r,density:l,errorLabel:u,helpLabel:p,labelProps:v,inline:j,supportLabelProps:k,tooltipProps:q};return e.jsx(c.InputGroup,{...x,"data-testid":"jkl-select",className:n.clsx("jkl-select",i,{"jkl-select--inline":j,"jkl-select--invalid":!!u||d}),render:o=>e.jsxs("div",{className:"jkl-select__outer-wrapper",style:{width:g},children:[e.jsxs("select",{ref:s,className:n.clsx("jkl-select__button",f,{"jkl-select__button--active-value":!!h}),defaultValue:h?void 0:"",value:h,...o,...w,children:[b&&!h&&e.jsx("option",{disabled:!0,value:"",children:b}),m.map(a.getValuePair).map((n=>e.jsx("option",{"data-testid":"jkl-select__option",className:"jkl-select__option",value:n.value,children:n.label},n.value)))]}),e.jsx(t.ArrowVerticalAnimated,{variant:"medium",pointingDown:!0,className:"jkl-select__arrow"})]})})}));d.displayName="NativeSelect",exports.NativeSelect=d,exports.Select=j;
-//# sourceMappingURL=NativeSelect-BxgwmRDc.cjs.map

package/build/NativeSelect-DwtOOfyt.js

@@ -1,2 +0,0 @@
-import{jsxs as e,Fragment as o,jsx as n}from"react/jsx-runtime";import{c as t}from"./clsx-BeLtu-UY.js";import{forwardRef as s,useState as i,useCallback as r,useMemo as c,useRef as a,useEffect as l}from"react";import"./es/hooks/useScreen/useScreen.js";import{useId as p}from"./es/hooks/useId/useId.js";import"./es/components/icon/Icon.js";import{ArrowVerticalAnimated as u}from"./es/components/icon/icons/animated/ArrowVerticalAnimated.js";import"./es/components/icon/icons/animated/ArrowHorizontalAnimated.js";import"./es/components/icon/icons/animated/PlusRemoveAnimated.js";import"./es/components/icon/icons/ArrowDownIcon.js";import"./es/components/icon/icons/ArrowLeftIcon.js";import"./es/components/icon/icons/ArrowNorthEastIcon.js";import"./es/components/icon/icons/ArrowRightIcon.js";import"./es/components/icon/icons/ArrowUpIcon.js";import"./es/components/icon/icons/CalendarIcon.js";import"./es/components/icon/icons/CheckIcon.js";import"./es/components/icon/icons/ChevronDownIcon.js";import"./es/components/icon/icons/ChevronLeftIcon.js";import"./es/components/icon/icons/ChevronRightIcon.js";import"./es/components/icon/icons/ChevronUpIcon.js";import"./es/components/icon/icons/CloseIcon.js";import"./es/components/icon/icons/CopyIcon.js";import"./es/components/icon/icons/DotsIcon.js";import"./es/components/icon/icons/DragIcon.js";import"./es/components/icon/icons/ErrorIcon.js";import"./es/components/icon/icons/GreenCheckIcon.js";import"./es/components/icon/icons/HamburgerIcon.js";import"./es/components/icon/icons/InfoIcon.js";import"./es/components/icon/icons/LinkIcon.js";import"./es/components/icon/icons/PlusIcon.js";import"./es/components/icon/icons/QuestionIcon.js";import"./es/components/icon/icons/RedCrossIcon.js";import"./es/components/icon/icons/SearchIcon.js";import"./es/components/icon/icons/SuccessIcon.js";import"./es/components/icon/icons/WarningIcon.js";import"./es/components/icon/icons/MinusIcon.js";import"./es/components/icon/icons/ThumbDownIcon.js";import"./es/components/icon/icons/ThumbUpIcon.js";import"./es/components/icon/icons/TrashCanIcon.js";import"./es/components/icon/icons/PenIcon.js";import"./es/components/button/Button.js";import"./es/components/card/Card.js";import"./es/components/card/CardImage.js";import"./es/components/card/NavCard.js";import"./es/components/checkbox/Checkbox.js";import"./es/components/combobox/Combobox.js";import"./es/components/cookie-consent/CookieConsentContext.js";import"react-dom";import"./es/components/modal/Modal.js";import"react-a11y-dialog";import"./es/components/list/List.js";import"./es/components/list/ListItem.js";import"./es/components/datepicker/DatePicker.js";import"./es/components/icon-button/IconButton.js";import"./es/components/tooltip/Tooltip.js";import"./es/components/tooltip/TooltipContent.js";import"./es/components/tooltip/TooltipTrigger.js";import{InputGroup as m}from"./es/components/input-group/InputGroup.js";import"./es/components/link/Link.js";import"./es/components/link/NavLink.js";import"./es/components/link-list/LinkList.js";import"./es/components/popover/Popover.js";import"./es/components/radio-button/RadioButton.js";import"./es/components/radio-button/radioGroupContext.js";import"./es/components/radio-button/BaseRadioButton.js";import{useAnimatedHeight as d}from"./es/hooks/useAnimatedHeight/useAnimatedHeight.js";import{usePreviousValue as j}from"./es/hooks/usePreviousValue/usePreviousValue.js";import{useListNavigation as v}from"./es/hooks/useListNavigation/useListNavigation.js";import"./es/components/tag/Tag.js";import"./es/components/text-input/BaseTextArea.js";import"./es/components/text-input/BaseTextInput.js";import"./es/components/text-input/TextArea.js";import"./es/components/text-input/TextInput.js";import"./es/utilities/polymorphism/SlotComponent.js";import{getValuePair as b}from"./es/utilities/valuePair.js";import{focusSelected as f,toLower as h}from"./es/components/select/select-utils.js";const k=()=>{},g=s(((s,g)=>{const{id:w,name:y,items:I,value:_,label:C,labelProps:L,onChange:x,onBlur:N,onFocus:P,className:D,helpLabel:A,errorLabel:T,invalid:E,searchable:S=!1,inline:$=!1,defaultPrompt:B="Velg",density:V,width:R,maxShownOptions:F=5,style:H,...K}=s,M=p(w||"jkl-select",{generateSuffix:!w}),G=`${M}_label`,U=`${M}_button`,O=`${M}_search-input`,[q,z]=i(!1),Q=r((()=>{z((e=>!e))}),[]),W=!!S,J=W&&q,[X,Y]=i(""),Z=r((e=>!!e.label.toLowerCase().includes(X.toLowerCase())||"function"==typeof S&&S(X,e)),[S,X]),ee=c((()=>I.map(b).map((e=>{const o=!W||""===X||Z(e);return{...e,visible:o}}))),[I,W,X,Z]),oe=c((()=>!(typeof _>"u")&&I.some((e=>"string"==typeof e?e===_:e.value===_))),[_,I]),[ne,te]=i(oe&&void 0!==_?_:""),se=""!==ne,ie=c((()=>{var e;return(null==(e=ee.find((e=>e.value===ne)))?void 0:e.label)||B}),[ee,ne,B]),re=a(null),ce=r((e=>{re.current=e,g&&("function"==typeof g?g(e):g.current=e),e&&te(e.value)}),[re,g]),ae=j(_);l((()=>{_!==ae&&te(typeof _>"u"||!oe?"":_)}),[te,_,ae,oe]);const le=r((e=>{const o=e.value;Y(""),te(o),Q()}),[Y,te,Q]),pe=j(ne);l((()=>{typeof pe>"u"||pe===ne||ne===_||(x&&x({type:"change",target:{name:y,value:ne}}),re.current&&re.current.dispatchEvent(new Event("change",{bubbles:!0})))}),[x,y,_,ne,pe]);const ue=a(null),me=a(!1),de=a(null),je=a(null),ve=r(((e,o)=>{if(e&&!W){const e=o.current;e&&f(e,ne)}else e?de.current&&de.current.focus():me.current&&je.current&&je.current.focus()}),[W,ne]),[be]=d(q,{onFirstVisible:ve,onTransitionEnd:ve});v({ref:be});const fe=r((e=>{var o;const n=ue.current;n&&n.contains(e.relatedTarget)||(W&&Y(""),N&&(N({type:"blur",target:{name:y,value:ne}}),null==(o=re.current)||o.dispatchEvent(new Event("focusout",{bubbles:!0}))),me.current=!1,z(!1))}),[N,W,y,ne]),he=r((()=>{me.current||(P&&P({type:"change",target:{name:y,value:ne}}),me.current=!0)}),[P,ne,y]),ke=r((e=>{e.target.focus({preventScroll:!0})}),[]);l((()=>{const e=re.current,o=de.current,n=je.current,t=ue.current;return null==e||e.addEventListener("focus",(()=>{J?null==o||o.focus():null==n||n.focus()})),null==e||e.addEventListener("blur",(function(e){t&&t.contains(e.relatedTarget)&&e.preventDefault()})),()=>{null==e||e.removeEventListener("focus",(()=>{J?null==o||o.focus():null==n||n.focus()})),null==e||e.removeEventListener("blur",(function(e){t&&t.contains(e.relatedTarget)&&e.preventDefault()}))}}),[J]);const ge=r((e=>{"ArrowDown"!==e.key&&" "!==e.key||q?"Escape"===e.key&&(e.preventDefault(),e.stopPropagation(),z(!1)):(e.preventDefault(),e.stopPropagation(),z(!0))}),[z,q]),we=r((e=>{if("ArrowDown"===e.key){e.preventDefault(),e.stopPropagation();const o=be.current;o&&f(o,W?void 0:ne)}else if("Escape"===e.key)e.preventDefault(),e.stopPropagation(),z(!1);else if("Tab"!==e.key||e.shiftKey)"Enter"===e.key&&q&&(e.preventDefault(),e.stopPropagation());else{const o=be.current;o&&(e.preventDefault(),e.stopPropagation(),f(o,ne))}}),[z,be,ne,W,q]),ye=r((e=>{if("Tab"===e.key)e.preventDefault(),e.stopPropagation(),e.shiftKey&&de.current?de.current.focus():je.current&&(te(e.currentTarget.value),z(!1),je.current.focus());else if("ArrowUp"===e.key&&be.current&&de.current){const o=be.current.querySelector('[role="option"]:not([hidden])');e.currentTarget.id===(null==o?void 0:o.id)&&de.current&&de.current.focus()}}),[z,be]);return l((()=>{const e=e=>{"Escape"===e.key&&q&&z(!1)};return typeof window<"u"&&q&&window.addEventListener("keydown",e),()=>{typeof window<"u"&&window.removeEventListener("keydown",e)}}),[z,q]),e(o,{children:[e("select",{name:y,tabIndex:-1,"data-testid":"jkl-native-select",className:"jkl-sr-only","aria-hidden":!0,ref:ce,value:ne,onChange:k,children:[n("option",{value:""})," ",ee.map((e=>n("option",{hidden:!e.visible,value:e.value,children:e.label},`${M}-opt-${e.value}`)))]}),n(m,{ref:ue,"data-testid":"jkl-select",className:t("jkl-select",D,{"jkl-select--inline":$,"jkl-select--open":q&&ee.some((e=>e.visible)),"jkl-select--no-value":!se,"jkl-select--invalid":!!T||E}),...K,id:W?O:U,style:{"--jkl-select-max-shown-options":F,...H},density:V,label:C,labelProps:{id:G,srOnly:$,...L,htmlFor:W?O:U},helpLabel:A,errorLabel:T,render:o=>e("div",{className:"jkl-select__outer-wrapper",style:{width:R},children:[W&&n("input",{...o,id:O,hidden:!J,ref:de,placeholder:"Søk",value:X,onChange:e=>Y(e.target.value),"data-testid":"jkl-select__search-input",className:"jkl-select__search-input","aria-autocomplete":"list","aria-activedescendant":se?`${M}__${h(ne)}`:void 0,"aria-controls":M,"aria-expanded":q,role:"combobox",onKeyDown:we,onBlur:fe,onFocus:he,onClick:e=>{e.stopPropagation()}}),n("button",{...o,id:U,ref:je,hidden:J,type:"button",name:`${y}-btn`,className:t("jkl-select__button",{"jkl-select__button--active-value":!!ne}),"data-testid":"jkl-select__button","aria-label":`${ie||"Velg"},${C}`,"aria-expanded":q,"aria-controls":M,onBlur:fe,onFocus:he,onKeyDown:ge,onClick:Q,onMouseDown:e=>{var o;e.preventDefault(),null==(o=je.current)||o.focus()},children:ie}),n("div",{id:M,ref:be,role:"listbox",className:"jkl-select__options-menu",hidden:!q||ee.every((e=>!e.visible)),"aria-labelledby":G,tabIndex:-1,"data-focus":"controlled",children:ee.map(((o,t)=>o.visible?e("button",{hidden:!o.visible,type:"button",id:`${M}__${h(o.value)}`,className:"jkl-select__option","data-testid":"jkl-select__option","aria-selected":o.value===ne,role:"option",value:o.value,"data-testautoid":`jkl-select__option-${t}`,onBlur:fe,onFocus:he,onKeyDown:ye,onClick:e=>{e.preventDefault(),le(o)},onMouseOver:ke,children:[o.label,o.description?n("span",{className:"jkl-select__option-description",children:o.description}):null]},`${M}-${o.value}`):null))}),n(u,{variant:"medium",pointingDown:!q,className:"jkl-select__arrow"})]})})]})}));g.displayName="Select";const w=s(((o,s)=>{const{label:i,className:r,density:c,errorLabel:a,helpLabel:l,inline:p,invalid:d,items:j,labelProps:v,placeholder:f="Velg",selectClassName:h,supportLabelProps:k,tooltipProps:g,value:w,width:y,...I}=o;return n(m,{label:i,density:c,errorLabel:a,helpLabel:l,labelProps:v,inline:p,supportLabelProps:k,tooltipProps:g,"data-testid":"jkl-select",className:t("jkl-select",r,{"jkl-select--inline":p,"jkl-select--invalid":!!a||d}),render:o=>e("div",{className:"jkl-select__outer-wrapper",style:{width:y},children:[e("select",{ref:s,className:t("jkl-select__button",h,{"jkl-select__button--active-value":!!w}),defaultValue:w?void 0:"",value:w,...o,...I,children:[f&&!w&&n("option",{disabled:!0,value:"",children:f}),j.map(b).map((e=>n("option",{"data-testid":"jkl-select__option",className:"jkl-select__option",value:e.value,children:e.label},e.value)))]}),n(u,{variant:"medium",pointingDown:!0,className:"jkl-select__arrow"})]})})}));w.displayName="NativeSelect";export{w as N,g as S};
-//# sourceMappingURL=NativeSelect-DwtOOfyt.js.map