@fremtind/jokul 0.12.1 → 0.14.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-up8o39x 200ms ease-out forwards;
+}
+
+.jkl-toast[data-animation=exiting] {
+  animation: jkl-exiting-up8o3ag 150ms ease-in forwards;
+}
+
+@keyframes jkl-entering-up8o39x {
+  from {
+    opacity: 0;
+    transform: translate3d(0, 50%, 0);
+  }
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+@keyframes jkl-exiting-up8o3ag {
+  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-up8o39x .2s ease-out forwards}.jkl-toast[data-animation=exiting]{animation:jkl-exiting-up8o3ag .15s ease-in forwards}@keyframes jkl-entering-up8o39x{0%{opacity:0;transform:translate3d(0,50%,0)}to{opacity:1;transform:translateZ(0)}}@keyframes jkl-exiting-up8o3ag{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/build/NativeSelect-CNcZmpDZ.cjs

@@ -1,2 +0,0 @@
-"use strict";const e=require("react/jsx-runtime"),o=require("./clsx-E3yX_9sL.cjs"),n=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/feedback/feedbackContext.js"),require("./cjs/components/message/Message.js"),require("./cjs/components/message/FormErrorMessage.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/feedback/followup/followupContext.js"),require("./cjs/components/feedback/main-question/mainQuestionContext.js"),require("./cjs/components/radio-button/RadioButton.js"),require("./cjs/components/radio-button/radioGroupContext.js"),require("./cjs/components/radio-button/BaseRadioButton.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 r=require("./cjs/utilities/valuePair.js");require("./cjs/components/icon-button/IconButton.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");const i=require("./cjs/hooks/useAnimatedHeight/useAnimatedHeight.js"),l=require("./cjs/hooks/usePreviousValue/usePreviousValue.js"),a=require("./cjs/hooks/useListNavigation/useListNavigation.js");require("./cjs/components/tag/Tag.js");const u=require("./cjs/components/select/select-utils.js"),p=()=>{},j=n.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:C,searchable:_=!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,M]=n.useState(!1),F=n.useCallback((()=>{M((e=>!e))}),[]),G=!!_,H=G&&B,[K,U]=n.useState(""),O=n.useCallback((e=>!!e.label.toLowerCase().includes(K.toLowerCase())||"function"==typeof _&&_(K,e)),[_,K]),Q=n.useMemo((()=>b.map(r.getValuePair).map((e=>{const o=!G||""===K||O(e);return{...e,visible:o}}))),[b,G,K,O]),z=n.useMemo((()=>!(typeof f>"u")&&b.some((e=>"string"==typeof e?e===f:e.value===f))),[f,b]),[W,J]=n.useState(z&&void 0!==f?f:""),X=""!==W,Y=n.useMemo((()=>{var e;return(null==(e=Q.find((e=>e.value===W)))?void 0:e.label)||P}),[Q,W,P]),Z=n.useRef(null),ee=n.useCallback((e=>{Z.current=e,d&&("function"==typeof d?d(e):d.current=e),e&&J(e.value)}),[Z,d]),oe=l.usePreviousValue(f);n.useEffect((()=>{f!==oe&&J(typeof f>"u"||!z?"":f)}),[J,f,oe,z]);const ne=n.useCallback((e=>{const o=e.value;U(""),J(o),F()}),[U,J,F]),se=l.usePreviousValue(W);n.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=n.useRef(null),ce=n.useRef(!1),re=n.useRef(null),ie=n.useRef(null),le=n.useCallback(((e,o)=>{if(e&&!G){const e=o.current;e&&u.focusSelected(e,W)}else e?re.current&&re.current.focus():ce.current&&ie.current&&ie.current.focus()}),[G,W]),[ae]=i.useAnimatedHeight(B,{onFirstVisible:le,onTransitionEnd:le});a.useListNavigation({ref:ae});const ue=n.useCallback((e=>{var o;const n=te.current;n&&n.contains(e.relatedTarget)||(G&&U(""),g&&(g({type:"blur",target:{name:v,value:W}}),null==(o=Z.current)||o.dispatchEvent(new Event("focusout",{bubbles:!0}))),ce.current=!1,M(!1))}),[g,G,v,W]),pe=n.useCallback((()=>{ce.current||(w&&w({type:"change",target:{name:v,value:W}}),ce.current=!0)}),[w,W,v]),je=n.useCallback((e=>{e.target.focus({preventScroll:!0})}),[]);n.useEffect((()=>{const e=Z.current,o=re.current,n=ie.current,s=te.current;return null==e||e.addEventListener("focus",(()=>{H?null==o||o.focus():null==n||n.focus()})),null==e||e.addEventListener("blur",(function(e){s&&s.contains(e.relatedTarget)&&e.preventDefault()})),()=>{null==e||e.removeEventListener("focus",(()=>{H?null==o||o.focus():null==n||n.focus()})),null==e||e.removeEventListener("blur",(function(e){s&&s.contains(e.relatedTarget)&&e.preventDefault()}))}}),[H]);const de=n.useCallback((e=>{"ArrowDown"!==e.key&&" "!==e.key||B?"Escape"===e.key&&(e.preventDefault(),e.stopPropagation(),M(!1)):(e.preventDefault(),e.stopPropagation(),M(!0))}),[M,B]),me=n.useCallback((e=>{if("ArrowDown"===e.key){e.preventDefault(),e.stopPropagation();const o=ae.current;o&&(G?u.focusSelected(o,void 0):u.focusSelected(o,W))}else if("Escape"===e.key)e.preventDefault(),e.stopPropagation(),M(!1);else if("Tab"!==e.key||e.shiftKey)"Enter"===e.key&&B&&(e.preventDefault(),e.stopPropagation());else{const o=ae.current;o&&(e.preventDefault(),e.stopPropagation(),u.focusSelected(o,W))}}),[M,ae,W,G,B]),ve=n.useCallback((e=>{if("Tab"===e.key)e.preventDefault(),e.stopPropagation(),e.shiftKey&&re.current?re.current.focus():ie.current&&(J(e.currentTarget.value),M(!1),ie.current.focus());else if("ArrowUp"===e.key&&ae.current&&re.current){const o=ae.current.querySelector('[role="option"]:not([hidden])');e.currentTarget.id===(null==o?void 0:o.id)&&re.current&&re.current.focus()}}),[M,ae]);return n.useEffect((()=>{const e=e=>{"Escape"===e.key&&B&&M(!1)};return typeof window<"u"&&B&&window.addEventListener("keydown",e),()=>{typeof window<"u"&&window.removeEventListener("keydown",e)}}),[M,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:""})," ",Q.map((o=>e.jsx("option",{hidden:!o.visible,value:o.value,children:o.label},`${T}-opt-${o.value}`)))]}),e.jsx(c.InputGroup,{ref:te,"data-testid":"jkl-select",className:o.clsx("jkl-select",x,{"jkl-select--inline":L,"jkl-select--open":B&&Q.some((e=>e.visible)),"jkl-select--no-value":!X,"jkl-select--invalid":!!I||C}),...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:n=>e.jsxs("div",{className:"jkl-select__outer-wrapper",style:{width:D},children:[G&&e.jsx("input",{...n,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",{...n,id:V,ref:ie,hidden:H,type:"button",name:`${v}-btn`,className:o.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:F,onMouseDown:e=>{var o;e.preventDefault(),null==(o=ie.current)||o.focus()},children:Y}),e.jsx("div",{id:T,ref:ae,role:"listbox",className:"jkl-select__options-menu",hidden:!B||Q.every((e=>!e.visible)),"aria-labelledby":$,tabIndex:-1,"data-focus":"controlled",children:Q.map(((o,n)=>o.visible?e.jsxs("button",{hidden:!o.visible,type:"button",id:`${T}__${u.toLower(o.value)}`,className:"jkl-select__option","data-testid":"jkl-select__option","aria-selected":o.value===W,role:"option",value:o.value,"data-testautoid":`jkl-select__option-${n}`,onBlur:ue,onFocus:pe,onKeyDown:ve,onClick:e=>{e.preventDefault(),ne(o)},onMouseOver:je,children:[o.label,o.description?e.jsx("span",{className:"jkl-select__option-description",children:o.description}):null]},`${T}-${o.value}`):null))}),e.jsx(t.ArrowVerticalAnimated,{variant:"medium",pointingDown:!B,className:"jkl-select__arrow"})]})})]})}));j.displayName="Select";const d=n.forwardRef(((n,s)=>{const{label:i,className:l,density:a,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}=n,x={label:i,density:a,errorLabel:u,helpLabel:p,labelProps:v,inline:j,supportLabelProps:k,tooltipProps:q};return e.jsx(c.InputGroup,{...x,"data-testid":"jkl-select",className:o.clsx("jkl-select",l,{"jkl-select--inline":j,"jkl-select--invalid":!!u||d}),render:n=>e.jsxs("div",{className:"jkl-select__outer-wrapper",style:{width:g},children:[e.jsxs("select",{ref:s,className:o.clsx("jkl-select__button",f,{"jkl-select__button--active-value":!!h}),defaultValue:h?void 0:"",value:h,...n,...w,children:[b&&!h&&e.jsx("option",{disabled:!0,value:"",children:b}),m.map(r.getValuePair).map((o=>e.jsx("option",{"data-testid":"jkl-select__option",className:"jkl-select__option",value:o.value,children:o.label},o.value)))]}),e.jsx(t.ArrowVerticalAnimated,{variant:"medium",pointingDown:!0,className:"jkl-select__arrow"})]})})}));d.displayName="NativeSelect",exports.NativeSelect=d,exports.Select=j;
-//# sourceMappingURL=NativeSelect-CNcZmpDZ.cjs.map