@fremtind/jokul 3.5.2 → 3.6.0

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

@@ -1,137 +0,0 @@
-@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

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

package/styles/components/tooltip/popuptip.scss

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

package/styles/components/tooltip/tooltip.scss

@@ -1,87 +0,0 @@
-@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

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

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

@@ -1,80 +0,0 @@
-@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

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

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

@@ -1,81 +0,0 @@
-@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

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

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

@@ -1,66 +0,0 @@
-@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

@@ -1,4 +0,0 @@
-@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

@@ -1,37 +0,0 @@
-@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;
-        }
-    }
-}

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

@@ -1,106 +0,0 @@
-@use "../../core/jkl/index" as jkl;
-@use "../../shared/input/shared-input-styles" as shared;
-
-.jkl-search--beta {
-    --icon-size: var(--jkl-text-input-height);
-    --border-radius: 3px;
-    --border: 1px solid var(--jkl-color-border-input);
-
-    width: 100%;
-
-    @include jkl.text-style("body");
-
-    input[type="search"] {
-        appearance: none;
-        padding: 0;
-        background-color: transparent;
-        height: 100%;
-        color: var(--jkl-color-text-default);
-        grid-column: 2 / 3;
-
-        @include jkl.reset-outline;
-
-        &::-webkit-search-cancel-button, &::-webkit-calendar-picker-indicator, &::-webkit-search-results-button {
-            appearance: none;
-            display: none !important;
-        }
-    }
-
-    .input-wrapper {
-        box-sizing: border-box;
-        display: grid;
-        grid-template-columns: var(--icon-size) 1fr;
-        border-radius: var(--border-radius);
-        padding-inline-end: 0;
-        height: var(--jkl-text-input-height);
-        border: var(--border);
-
-        &::before {
-            font-family: "Fremtind Material Symbols";
-            content: attr(data-icon) / "";
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            height: 100%;
-            grid-column: 1;
-        }
-
-        &:has(.clear-button) {
-            grid-template-columns: var(--icon-size) 1fr var(--icon-size);
-        }
-    }
-
-    // Nettlesere har ulik støtte for begge disse metodene, så begge må være med per 12. november 2025
-    &:has(input:not(:valid), input:placeholder-shown) {
-        .clear-button {
-            display: none;
-        }
-    }
-
-    .clear-button {
-        display: grid;
-        appearance: none;
-        background-color: transparent;
-        border: 0;
-        height: 100%;
-        padding: 0;
-        cursor: pointer;
-        color: var(--jkl-color-text-default);
-
-        &::before, &::after {
-            display: inline-grid;
-            align-items: center;
-            justify-content: center;
-            place-self: center;
-            align-self: center;
-            grid-row: 1;
-            grid-column: 1;
-        }
-
-        &::before {
-            content: "close" / "";
-            font-family: "Fremtind Material Symbols";
-            z-index: 1;
-            line-height: 1.25lh;
-        }
-
-        &::after {
-            content: "";
-            background-color: transparent;
-            height: 1.25lh;
-            aspect-ratio: 1;
-            border-radius: 100%;
-
-            @include jkl.motion;
-            transition-property: background-color;
-        }
-
-        &:hover::after {
-            background-color: var(--jkl-color-background-interactive-hover);
-        }
-
-        &:focus-visible {
-            @include jkl.focus-outline;
-        }
-    }
-}

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

@@ -1,3 +0,0 @@
-@forward "select";
-@use "../../components/icon/index" as icon;
-@use "../../components/input-group/index" as input-group;