@fremtind/jokul 3.6.0 → 3.7.0

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

@@ -0,0 +1,123 @@
+@use "sass:color";
+@use "../../core/jkl";
+
+$_slider-rounded: jkl.rem(100px);
+
+@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 {
+    --jkl-slider-bg: var(--jkl-color-background-container-low);
+    --jkl-slider-pill: var(--jkl-color-background-container-high);
+    --jkl-slider-text: var(--jkl-color-text-default);
+    --jkl-slider-text--active: var(--jkl-color-text-default);
+    --jkl-slider-focus-color: var(--jkl-color-border-action);
+    --jkl-slider-hover-color: var(--jkl-color-border-action);
+
+    @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-8;
+
+        @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-2 jkl.$spacing-16;
+        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/styles/components/toggle-switch/toggle-switch.scss

@@ -0,0 +1,137 @@
+@charset "UTF-8";
+@use "../../core/jkl";
+@use "./toggle-slider";
+
+@include jkl.comfortable-density-variables {
+    @include jkl.declare-font-variables("jkl-toggle", "body");
+
+    --jkl-toggle-switch-height: #{jkl.rem(28px)};
+    --jkl-toggle-switch-width: #{jkl.rem(48px)};
+    --jkl-toggle-switch-knob-size: #{jkl.rem(20px)};
+    --jkl-toggle-switch-indicator-spacing: 0;
+    --jkl-toggle-switch-help-label-spacing: var(--jkl-unit-02);
+}
+
+@include jkl.compact-density-variables {
+    @include jkl.declare-font-variables("jkl-toggle", "small");
+
+    --jkl-toggle-switch-height: #{jkl.rem(20px)};
+    --jkl-toggle-switch-width: #{jkl.rem(36px)};
+    --jkl-toggle-switch-knob-size: #{jkl.rem(12px)};
+    --jkl-toggle-switch-indicator-spacing: #{jkl.rem(-2px)};
+    --jkl-toggle-switch-help-label-spacing: 0;
+}
+
+.jkl-toggle-switch {
+    --border-width: #{jkl.rem(1px)};
+    --switch-padding: #{jkl.rem(4px)};
+    --knob-position: 0;
+    --switch-border-color: var(--jkl-color-border-action);
+    --indicator-color: var(--jkl-color-background-container-high);
+    --knob-border-color: var(--jkl-color-border-action);
+    --knob-color: var(--jkl-color-background-container-high);
+    --text-color: var(--jkl-color-text-default);
+    --icon-color: var(--jkl-color-text-inverted);
+
+    background: transparent;
+    color: var(--text-color);
+    padding: 0;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+
+    display: flex;
+    flex-direction: row-reverse;
+    align-items: center;
+    gap: var(--jkl-unit-10);
+    touch-action: none; // Forhindrer at siden flytter på seg når man drar i toggle
+
+    @include jkl.use-font-variables("jkl-toggle");
+    @include jkl.reset-outline;
+
+    @include jkl.forced-colors-mode {
+        border-color: transparent;
+        border-style: none;
+    }
+
+    &[aria-pressed="true"],
+    [aria-checked="true"] > & {
+        --indicator-color: var(--jkl-color-background-container-inverted);
+        --knob-color: var(--jkl-color-text-inverted);
+        --knob-position: calc(
+            var(--jkl-toggle-switch-width) - var(--jkl-toggle-switch-knob-size) -
+                var(--switch-padding) * 2
+        );
+    }
+
+    &[disabled] {
+        cursor: revert;
+
+        --text-color: var(--jkl-color-text-subdued);
+        --switch-border-color: var(--jkl-color-border-subdued);
+        --knob-border-color: var(--jkl-color-border-subdued);
+
+        &[aria-pressed="true"],
+        [aria-checked="true"] > & {
+            --indicator-color: var(--jkl-color-border-subdued);
+        }
+    }
+}
+
+.jkl-toggle-switch-widget {
+    position: relative;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: var(--jkl-toggle-switch-height);
+    width: var(--jkl-toggle-switch-width);
+    border-radius: 9999px;
+    border: var(--border-width) solid var(--switch-border-color);
+    overflow: hidden;
+    user-select: none;
+    padding: var(--switch-padding);
+    background-color: var(--indicator-color);
+    pointer-events: none;
+
+    @include jkl.forced-colors-mode {
+        border: jkl.rem(1px) solid ButtonText;
+    }
+
+    .jkl-toggle-switch:focus-visible & {
+        @include jkl.focus-outline;
+    }
+
+    &__slider {
+        position: relative;
+        box-sizing: border-box;
+        height: var(--jkl-toggle-switch-knob-size);
+        width: var(--jkl-toggle-switch-knob-size);
+        color: var(--icon-color);
+
+        @include jkl.motion;
+        transition-property: translate;
+        translate: var(--knob-position);
+    }
+
+    &__knob {
+        position: absolute;
+        inset: 0;
+        border-radius: 9999px;
+        border: var(--border-width) solid var(--knob-border-color);
+        background-color: var(--knob-color);
+    }
+
+    &__indicator {
+        position: absolute;
+        top: 50%;
+        right: 100%;
+        margin-right: var(--jkl-toggle-switch-indicator-spacing);
+        transform: translate(0, -50%);
+
+        & > .jkl-icon__icon {
+            // Uten dette får ikonet feil alignment. Mulig bug i ikonpakken?
+            position: absolute;
+            inset: 0;
+        }
+    }
+}

package/styles/components/tooltip/_index.scss

@@ -0,0 +1,3 @@
+@forward "tooltip";
+@forward "popuptip";
+@use "../icon" as icon;

package/styles/components/tooltip/popuptip.scss

@@ -0,0 +1,5 @@
+.jkl-popuptip {
+    &__content-wrapper:focus {
+        outline: none;
+    }
+}

package/styles/components/tooltip/tooltip.scss

@@ -0,0 +1,87 @@
+@charset "UTF-8";
+@use "../../core/jkl";
+
+$_tooltip-border-width: jkl.rem(1px);
+$_focus-ring-distance: jkl.rem(
+    -1px
+); // Negativ margin for å unngå subpixel mellomrom mellom border og box-shadow
+$_focus-ring-width: jkl.rem(2px);
+
+@include jkl.comfortable-density-variables {
+    --content-padding: #{jkl.$unit-20};
+
+    @include jkl.small-device {
+        --content-padding: #{jkl.$unit-15};
+    }
+}
+
+@include jkl.compact-density-variables {
+    --content-padding: #{jkl.$unit-10};
+}
+
+.jkl-tooltip-trigger {
+    all: unset;
+
+    &:focus {
+        @include jkl.keyboard-navigation {
+            @include jkl.no-grow-bold;
+        }
+    }
+}
+
+.jkl-tooltip-content {
+    --background-color: var(--jkl-color-background-container-inverted);
+
+    @include jkl.text-style("small");
+    background-color: var(--background-color);
+    color: var(--jkl-color-text-inverted);
+    display: inline-block;
+    min-width: min-content;
+    max-width: min(
+        jkl.rem(310px),
+        100%
+    ); // 10px mindre enn smaleste støttede skjerm
+    padding: var(--content-padding);
+    position: absolute;
+    z-index: jkl.$z-index--floating;
+
+    @include jkl.forced-colors-mode {
+        border: 1px solid CanvasText;
+    }
+}
+
+.jkl-tooltip-question-button {
+    @include jkl.motion("exit", "snappy");
+    transition-property: color;
+    cursor: pointer;
+    position: relative;
+    background-color: transparent;
+    padding: 0;
+    display: inline-flex;
+    align-items: center;
+    color: var(--jkl-color-text-interactive);
+    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/styles/components-beta/description-list/_index.scss

@@ -0,0 +1 @@
+@forward "description-list";

package/styles/components-beta/description-list/description-list.scss

@@ -0,0 +1,80 @@
+@use "../../core/jkl";
+
+.jkl-description-list--beta {
+    --spacing: 0;
+
+    container: description-list / inline-size;
+    display: grid;
+    grid-template-columns: 1fr;
+    column-gap: 1em;
+
+    &[data-alignment="justified"] {
+        --spacing: var(--jkl-spacing-xs);
+        grid-template-columns: 1fr max-content;
+
+        .title,
+        .value {
+            grid-row: 1;
+        }
+
+        .value {
+            text-align: end;
+        }
+    }
+
+    &[data-alignment="horizontal"] {
+        --spacing: var(--jkl-spacing-xs);
+        grid-template-columns: max-content 1fr;
+    }
+
+    &[data-alignment="vertical"] {
+        --spacing: var(--jkl-spacing-s);
+    }
+
+    .jkl-description-list-item--beta {
+        display: grid;
+        grid-template-columns: subgrid;
+        grid-column: 1 / -1;
+
+        @container description-list (width < 30ch) {
+            grid-template-columns: 1fr;
+            --spacing: var(--jkl-spacing-s);
+
+            .title,
+            .value {
+                grid-row: unset;
+            }
+
+            .value {
+                text-align: start;
+            }
+        }
+
+        &:not(:last-of-type) {
+            margin-block-end: var(--spacing);
+        }
+
+        .title {
+            font-weight: bold;
+        }
+
+        dd {
+            margin-inline-start: 0;
+
+            &.support-text {
+                grid-column: 1 / -1;
+                color: var(--jkl-color-text-subdued);
+            }
+        }
+    }
+
+    &[data-separators="true"] {
+        > * {
+            &:not(:last-of-type) {
+                --spacing: var(--jkl-spacing-s);
+                border-block-end: 1px solid var(--jkl-color-border-separator);
+                padding-block-end: var(--spacing);
+            }
+        }
+    }
+}

package/styles/components-beta/link-list/_index.scss

@@ -0,0 +1,2 @@
+@forward "link-list";
+@use "../../components/icon";

package/styles/components-beta/link-list/link-list.scss

@@ -0,0 +1,81 @@
+@use "../../core/jkl";
+
+.jkl-link-list--beta {
+    --border: 1px solid var(--jkl-color-border-separator);
+    --text-color: var(--jkl-color-text-default);
+
+    @include jkl.text-style("body");
+
+    .jkl-link-list-title {
+        margin-block-end: var(--jkl-unit-10);
+        @include jkl.text-style("small");
+    }
+
+    & ul {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        padding: 0;
+        margin: 0;
+        height: min-content;
+    }
+
+    & .jkl-link-list-item {
+        display: flex;
+
+        &:not(:last-of-type) {
+            .jkl-link-list-link {
+                border-block-end: var(--border);
+            }
+        }
+    }
+
+    & .jkl-link-list-link {
+        display: flex;
+        align-items: center;
+        gap: var(--jkl-unit-20);
+        width: 100%;
+        text-decoration: none;
+        color: var(--text-color);
+        text-wrap: balance;
+        box-sizing: border-box;
+    }
+
+    &:has(ul) {
+        .jkl-link-list-title {
+            margin-inline-start: var(--jkl-unit-05);
+        }
+    }
+
+    & ul {
+        border-radius: var(--jkl-unit-05);
+        overflow: hidden;
+        background: var(--jkl-color-background-container-low);
+
+        .jkl-link-list-link {
+            justify-content: space-between;
+            padding: var(--jkl-unit-20);
+
+
+            @include jkl.motion("standard", "productive");
+            transition-property: background;
+
+            &::after {
+                content: "arrow_forward" / "";
+                font-family: "Fremtind Material Symbols";
+                font-weight: 300;
+
+                @include jkl.motion("standard", "productive");
+                transition-property: translate;
+            }
+
+            &:is(:hover, :focus-visible) {
+                background: var(--jkl-color-background-interactive-selected);
+
+                &::after {
+                    translate: 4px 0;
+                }
+            }
+        }
+    }
+}

package/styles/components-beta/nav-link/_index.scss

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

package/styles/components-beta/nav-link/navlink.scss

@@ -0,0 +1,66 @@
+@use "../../core/jkl/index" as jkl;
+
+.jkl-navlink--beta {
+    --border-radius: 4px;
+    --separator: 1px solid var(--jkl-color-border-separator);
+
+    display: grid;
+    grid-template-columns: 1fr auto;
+    align-items: center;
+    column-gap: 2em;
+    color: inherit;
+    text-decoration: none;
+    background-color: var(--jkl-color-background-container-low);
+    padding: var(--jkl-spacing-s);
+    border-radius: 0;
+
+    @include jkl.text-style("body");
+
+    @include jkl.motion("easeInBounceOut", "productive");
+    transition-property: background-color;
+
+    .title,
+    .description {
+        grid-column: 1;
+    }
+
+    &:has(.description) {
+        .title {
+            font-weight: bold;
+        }
+    }
+
+    &::after {
+        content: "arrow_forward" / "";
+        font-family: "Fremtind Material Symbols";
+        align-self: center;
+        grid-column: 2;
+        grid-row: 1 / span 999;
+        translate: 0;
+
+        @include jkl.motion("easeInBounceOut", "productive");
+        transition-property: translate;
+    }
+
+    &:hover, &:focus-visible {
+        background-color: var(--jkl-color-background-interactive-selected);
+
+        &::after {
+            translate: 4px 0;
+        }
+    }
+
+    &:first-of-type {
+        border-start-start-radius: var(--border-radius);
+        border-start-end-radius: var(--border-radius);
+    }
+
+    &:last-of-type {
+        border-end-start-radius: var(--border-radius);
+        border-end-end-radius: var(--border-radius);
+    }
+
+    &:has( + .jkl-navlink--beta) {
+        border-block-end: var(--separator);
+    }
+}

package/styles/components-beta/search/_index.scss

@@ -0,0 +1,4 @@
+@forward "search";
+@forward "search-with-submit-button";
+@use "../../components/icon/index" as icon;
+@use "../../components/input-group/index" as input-group;

package/styles/components-beta/search/search-with-submit-button.scss

@@ -0,0 +1,37 @@
+@use "../../core/jkl/index" as jkl;
+@use "../../shared/input/shared-input-styles" as shared;
+
+.jkl-search--beta:has(button.jkl-search-submit){
+    display: grid;
+    grid-template-columns: 1fr max-content;
+    align-items: end;
+
+    .input-wrapper {
+        border-inline-end: 0;
+        border-radius: 3px 0 0 3px;
+    }
+
+    button.jkl-search-submit {
+        height: var(--jkl-text-input-height);
+        border-radius: 0 3px 3px 0;
+        border: var(--border);
+        border-inline-start: 0;
+        min-width: unset;
+
+        &::before {
+            content: "";
+            position: absolute;
+            width: 1px;
+            inset: 0;
+            inset-block: 20%;
+            background-color: var(--jkl-color-border-separator);
+
+            @include jkl.motion;
+            transition-property: inset;
+        }
+
+        &:hover::before {
+            inset-block: 0;
+        }
+    }
+}