@fremtind/jokul 3.5.2 → 3.6.0

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

@@ -1,128 +0,0 @@
-@charset "UTF-8";
-@use "sass:color";
-@use "sass:math";
-@use "../../core/jkl/index" as jkl;
-@use "../../core/jkl/colors";
-
-@include jkl.compact-density-variables {
-    --jkl-select-input-height: #{jkl.$unit-40};
-    --jkl-select-button-padding: #{jkl.$unit-05} #{jkl.$unit-40} #{jkl.$unit-05}
-    #{jkl.$unit-10};
-    --jkl-select-arrow-right: #{jkl.$unit-05};
-    --jkl-select-search-input-padding: #{jkl.$unit-05} #{jkl.$unit-10};
-    --jkl-select-native-padding: #{jkl.$unit-05} #{jkl.$unit-30} #{jkl.$unit-05}
-    #{jkl.$unit-05};
-    --jkl-select-option-padding: #{jkl.$unit-05} #{jkl.$unit-10};
-
-    @include jkl.declare-font-variables("jkl-select", "small");
-}
-
-@include jkl.comfortable-density-variables {
-    --jkl-select-input-height: #{jkl.$unit-60};
-    --jkl-select-button-padding: #{jkl.$unit-10} #{jkl.rem(36px)} #{jkl.$unit-10}
-    #{jkl.$unit-15};
-    --jkl-select-arrow-right: #{jkl.$unit-02};
-    --jkl-select-search-input-padding: var(--jkl-select-button-padding);
-    --jkl-select-native-padding: 0 #{jkl.$unit-50} 0 #{jkl.$unit-10};
-    --jkl-select-option-padding: #{jkl.$unit-10} #{jkl.$unit-15};
-
-    @include jkl.declare-font-variables("jkl-select", "body");
-
-    @include jkl.small-device {
-        --jkl-select-input-height: #{jkl.rem(44px)};
-    }
-}
-
-.jkl-select--beta {
-    --border-color: var(--jkl-color-border-input);
-    --background-color: var(transparent);
-    --color: var(--jkl-color-text-default);
-    --box-shadow: 0 0 0 jkl.rem(1px) transparent;
-
-    display: block;
-    position: relative;
-
-    @include jkl.reset-outline;
-
-    & *:focus-visible {
-        outline: none;
-    }
-
-    & .jkl-tooltip-question-button:focus {
-        @include jkl.focus-outline($offset: 0);
-    }
-
-    &-wrapper {
-        display: grid;
-        grid-template-columns: 1fr auto;
-        align-items: center;
-    }
-
-    & select,
-    & .jkl-icon {
-        grid-row: 1;
-    }
-
-    & select {
-        // State variables
-        background-color: var(--background-color);
-        color: var(--color);
-        border-color: var(--border-color);
-        box-shadow: var(--box-shadow);
-
-        // Mode variables
-        padding: var(--jkl-select-button-padding);
-        height: var(--jkl-select-input-height);
-
-        grid-column: 1 / -1;
-        appearance: none;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        cursor: pointer;
-        border-radius: jkl.rem(3px);
-        border: jkl.rem(1px) solid;
-        text-align: left;
-        width: 100%;
-        transition-property: color, border-color, box-shadow;
-
-        &:has(option:checked[value=""]) {
-            --color: var(--jkl-color-text-subdued);
-        }
-
-        &:hover {
-            --border-color: var(--jkl-color-border-input-focus);
-            --box-shadow: 0 0 0 jkl.rem(1px) var(--jkl-color-border-input-focus);
-        }
-
-        &:invalid {
-            --background-color: var(--jkl-color-background-alert-error);
-            --color: var(--jkl-color-text-on-alert-subdued);
-        }
-
-        &:focus-visible {
-            outline: none;
-        }
-
-        @include jkl.motion;
-        @include jkl.use-font-variables("jkl-select");
-        @include jkl.keyboard-navigation {
-            &:focus-visible,
-            &:has(:focus-visible) {
-                @include jkl.focus-outline;
-            }
-
-            &:has(:focus-visible) {
-                select {
-                    @include jkl.focus-outline;
-                }
-            }
-        }
-    }
-
-    & .jkl-icon {
-        pointer-events: none;
-        grid-column: 2;
-        padding-inline-end: var(--jkl-select-arrow-right);
-    }
-}

package/styles/components-beta/table-of-contents/_index.scss

@@ -1,2 +0,0 @@
-@forward "table-of-contents";
-@use "../../components/icon";

package/styles/components-beta/table-of-contents/table-of-contents.scss

@@ -1,88 +0,0 @@
-@use "../../core/jkl";
-
-@include jkl.comfortable-density-variables {
-    --ordered-item-padding: var(--jkl-unit-10);
-}
-
-@include jkl.compact-density-variables {
-    --ordered-item-padding: var(--jkl-unit-05);
-}
-
-.jkl-table-of-contents--beta {
-    --border: 1px solid var(--jkl-color-border-separator);
-    --text-color: var(--jkl-color-text-default);
-
-    .jkl-table-of-contents-title {
-        margin-block-end: var(--jkl-unit-05);
-        @include jkl.text-style("small");
-    }
-
-    & ol {
-        display: flex;
-        flex-direction: column;
-        width: 100%;
-        padding: 0;
-        margin: 0;
-        height: min-content;
-    }
-
-    & .jkl-table-of-contents-item {
-        display: flex;
-
-        &:not(:last-of-type) {
-            .jkl-table-of-contents-link {
-                border-block-end: var(--border);
-            }
-        }
-    }
-
-    & .jkl-table-of-contents-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(ol) {
-        .jkl-table-of-contents-title {
-            @include jkl.screenreader-only()
-        }
-    }
-
-    & ol {
-        border-block: var(--border);
-        counter-reset: table-of-contents;
-
-        &:has(.jkl-table-of-contents-link:is(:hover, :focus-visible)) {
-            --text-color: rgb(from currentColor r g b / 0.6);
-
-            .jkl-table-of-contents-link:is(:hover, :focus-visible) {
-                --text-color: rgb(from currentColor r g b / 1);
-            }
-        }
-
-        & .jkl-table-of-contents-item {
-            counter-increment: table-of-contents;
-        }
-
-        & .jkl-table-of-contents-link {
-            padding-inline-end: var(--jkl-unit-20);
-            padding-block: var(--ordered-item-padding);
-
-            @include jkl.motion("standard", "productive");
-            transition-property: color;
-
-            &::before {
-                content: counter(table-of-contents, decimal-leading-zero);
-
-                @include jkl.use-font-family("Fremtind Grotesk Mono");
-                color: inherit;
-                font-size: var(--jkl-small-font-size);
-            }
-        }
-    }
-}

package/styles/core/_layers.scss

@@ -1,3 +0,0 @@
-@layer jokul {
-    @layer resets, theme, global, components, utility;
-}

package/styles/core/core.scss

@@ -1,6 +0,0 @@
-@charset "UTF-8";
-@use "layers";
-@use "resets";
-@use "theme";
-@use "global";
-@use "utility";

package/styles/core/global/_base-class.scss

@@ -1,36 +0,0 @@
-@use "../jkl";
-
-@layer jokul.global {
-    /* Legger til støtte for fontskalering via OS-innstillinger på Apple-enheter */
-    @supports (font: -apple-system-body) {
-        :root {
-            /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
-            font: -apple-system-body;
-        }
-    }
-
-    .jkl {
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
-
-        background-color: var(--jkl-background-color);
-        color: var(--jkl-color);
-
-        @include jkl.use-font-family("Fremtind Grotesk");
-
-        strong {
-            --jkl-icon-weight: #{jkl.$icon-weight-bold};
-            font-weight: jkl.$typography-weight-bold;
-        }
-    }
-
-    @include jkl.prefers-reduced-motion {
-        *,
-        *::after,
-        *::before {
-            animation-duration: 0ms !important;
-            animation-delay: 0ms !important;
-            transition: none !important;
-        }
-    }
-}

package/styles/core/global/_index.scss

@@ -1,2 +0,0 @@
-@forward "base-class";
-@forward "top-layer";

package/styles/core/global/_top-layer.scss

@@ -1,20 +0,0 @@
-@use "../jkl";
-
-@layer jokul.global {
-    [popover] {
-        opacity: 0;
-        transition: opacity,
-            overlay allow-discrete,
-            display allow-discrete;
-
-        @include jkl.motion("standard", "productive");
-
-        &:popover-open {
-            opacity: 1;
-
-            @starting-style {
-                opacity: 0;
-            }
-        }
-    }
-}

package/styles/core/jkl/_colors.scss

@@ -1,26 +0,0 @@
-@use "sass:map";
-@use "./legacy" as *;
-
-/// @type Color
-$color-focus-color: $color-granitt;
-
-/// @type Color
-$color-focus-color--darkbg: $color-snohvit;
-
-// Varslingsfarger / Meldingsfarger.
-// Kun til bruk som bakgrunn i komponenter som gir varslinger til bruker.
-$_varslingsfarger: (
-    "suksess": var(--jkl-success),
-    "feil": var(--jkl-error),
-    "info": var(--jkl-info),
-    "advarsel": var(--jkl-warning),
-);
-
-/// Hent fargekoden til en navngitt varslingsfarge
-/// @param {"suksess" | "feil" | "info" | "advarsel"} $farge - Navn på fargen du ønsker verdien til
-/// @deprecated Bruk tokens direkte ($color-success, $color-error, $color-info, $color-warning)
-/// @return {Color} - fargekoden til den ønskede fargen
-/// @access private - forwardes ikke ut av modulen, men er tilgjengelig ved direkteimport. KUN FOR INTERN BRUK I JØKUL.
-@function varslingsfarge($farge) {
-    @return map.get($_varslingsfarger, $farge);
-}

package/styles/core/jkl/_convert.scss

@@ -1,102 +0,0 @@
-@use "sass:color";
-@use "sass:list";
-@use "sass:map";
-@use "sass:math";
-@use "sass:meta";
-@use "sass:string";
-
-/// Casts a string into a number
-/// https://hugogiraudel.com/2014/01/15/sass-string-to-number/
-/// @author Hugo Giraudel
-/// @param {String | Number} $value - Value to be parsed
-/// @return {Number} - $value converted to a number
-@function to-number($value) {
-    @if meta.type-of($value) == "number" {
-        @return $value;
-    } @else if meta.type-of($value) != "string" {
-        @warn "Value for `to-number` should be a number or a string.";
-    }
-
-    $result: 0;
-    $digits: 0;
-    $minus: string.slice($value, 1, 1) == "-";
-    $numbers: (
-        "0": 0,
-        "1": 1,
-        "2": 2,
-        "3": 3,
-        "4": 4,
-        "5": 5,
-        "6": 6,
-        "7": 7,
-        "8": 8,
-        "9": 9,
-    );
-
-    @for $i from if($minus, 2, 1) through string.length($value) {
-        $character: string.slice($value, $i, $i);
-
-        @if not(list.index(map.keys($numbers), $character) or $character == ".")
-        {
-            @return to-length(
-                if($minus, -$result, $result),
-                string.slice($value, $i)
-            );
-        }
-
-        @if $character == "." {
-            $digits: 1;
-        } @else if $digits == 0 {
-            $result: $result * 10 + map.get($numbers, $character);
-        } @else {
-            $digits: $digits * 10;
-            $result: $result + math.div(map.get($numbers, $character), $digits);
-        }
-    }
-
-    @return if($minus, -$result, $result);
-}
-
-/// Add `$unit` to `$value`
-/// @param {Number} $value - Value to add unit to
-/// @param {String} $unit - String representation of the unit
-/// @return {Number} - `$value` expressed in `$unit`
-@function to-length($value, $unit) {
-    $units: (
-        "px": 1px,
-        "cm": 1cm,
-        "mm": 1mm,
-        "%": 1%,
-        "ch": 1ch,
-        "pc": 1pc,
-        "in": 1in,
-        "em": 1em,
-        "rem": 1rem,
-        "pt": 1pt,
-        "ex": 1ex,
-        "vw": 1vw,
-        "vh": 1vh,
-        "vmin": 1vmin,
-        "vmax": 1vmax,
-    );
-
-    @if not list.index(map.keys($units), $unit) {
-        @warn "Invalid unit `#{$unit}`.";
-    }
-
-    @return $value * map.get($units, $unit);
-}
-
-/// Gjør en fargeverdi URL-safe, for eksempel til bruk i inline SVG
-/// @param {Color} $color - Sass fargetype. Kan være HEX, hsl, hsla, rgb eller rgba.
-/// @return {String} - input konvertert til en URL-safe HEX-verdi
-@function urlencodecolor($color) {
-    @if meta.type-of($color) == "color" and string.index(#{$color}, "#") == 1 {
-        $hex: string.slice(color.ie-hex-str($color), 4);
-        $converted-color: string.unquote("#{$hex}");
-
-        @return "%23" + $converted-color;
-    }
-
-    @return $color;
-}

package/styles/core/jkl/_helpers.scss

@@ -1,26 +0,0 @@
-/// Gjør flexbox litt mindre verbos. Setter display: flex; med gitt align-items og justify-content.
-/// @param {String} $align-items [center] – settes på align-items
-/// @param {String} $justify-content [center] – settes på justify-content
-/// @output display: flex og angitt align-items og justify-content
-@mixin flex($align-items: center, $justify-content: center) {
-    display: flex;
-    align-items: $align-items;
-    justify-content: $justify-content;
-}
-
-/// Samle alt som har med posisjonering å gjøre i én mixin. Alle parameternavn matcher CSS-attributtet.
-/// @param {String} $position
-/// @param {String} $top [initial]
-/// @param {String} $left [initial]
-/// @param {String} $right [initial]
-/// @param {String} $bottom [initial]
-@mixin position(
-    $position,
-    $top: initial,
-    $left: initial,
-    $right: initial,
-    $bottom: initial
-) {
-    position: $position;
-    inset: $top $right $bottom $left;
-}

package/styles/core/jkl/_index.scss

@@ -1,18 +0,0 @@
-@forward "legacy";
-@forward "colors" hide varslingsfarge;
-@forward "convert";
-@forward "helpers";
-@forward "motion";
-@forward "navigation";
-@forward "ornaments";
-@forward "reset";
-@forward "responsive-units";
-@forward "screenreader";
-@forward "screens";
-@forward "shadows";
-@forward "spacing" hide $spacing, $combinations, $positions;
-@forward "theme";
-@forward "tokens" hide $color-background-page, $color-border-subdued, $color-text-default, $color-text-subdued;
-@forward "typography" hide $text-styles;
-@forward "underline";
-@forward "z-index";

package/styles/core/jkl/_motion.scss

@@ -1,63 +0,0 @@
-@use "sass:map";
-@use "sass:list";
-
-// Oppdater verdier i motion.ts også
-$_easings: (
-    "standard": ease,
-    "entrance": ease-out,
-    "exit": ease-in,
-    "easeInBounceOut": cubic-bezier(0, 0, 0.375, 1.17),
-    "focus": cubic-bezier(0.6, 0.2, 0.35, 1),
-);
-
-/// Hent en easing til bruk i animasjoner. Se også `timing`-funksjonen og `motion`-mixinen.
-/// @param {"standard" | "entrance" | "exit" | "easeInBounceOut" | "focus"} $name - Navn på easingen du ønsker verdien til
-/// @return {String} - easingverdi til bruk i animasjoner
-/// @see timing
-/// @see motion
-@function easing($name, $easings: $_easings) {
-    @if map.has-key($easings, $name) {
-        @return map.get($easings, $name);
-    } @else {
-        @error 'Unable to find an easing named #{$name} in our supported easings.';
-    }
-}
-
-// Oppdater verdier i motion.ts også
-$_timings: (
-    "energetic": 75ms,
-    "snappy": 100ms,
-    "productive": 150ms,
-    "polite": 200ms,
-    "expressive": 250ms,
-    "lazy": 400ms,
-);
-
-/// Hent en timing til bruk i animasjoner. Se også `easing`-funksjonen og `motion`-mixinen.
-/// @param {"energetic" | "snappy" | "productive" | "expressive" | "lazy"} $mode - Navn på timingen du ønsker verdien til
-/// @return {String} - timingverdi til bruk i animasjoner
-/// @see easing
-/// @see motion
-@function timing($mode, $timings: $_timings) {
-    @if map.has-key($timings, $mode) {
-        @return map.get($timings, $mode);
-    } @else {
-        @error 'Unable to find a timing named #{$mode} in our supported timings';
-    }
-}
-
-/// Setter transition-timing-function og transition-duration, for bruk i animasjoner.
-/// Se også `timing`- og `easing`-funksjonene.
-/// @param {"standard" | "entrance" | "exit" | "easeInBounceOut" | "focus"} $name [standard] - Navn på easingen du ønsker verdien til
-/// @param {"energetic" | "snappy" | "productive" | "expressive" | "lazy"} $mode [productive] - Navn på timingen du ønsker verdien til
-/// @param $properties - Kommaseparert liste over egenskapene du ønsker å animere
-/// @see easing
-/// @see timing
-@mixin motion($name: "standard", $mode: "productive", $properties...) {
-    transition-timing-function: easing($name);
-    transition-duration: timing($mode);
-
-    @if list.length($properties) > 0 {
-        transition-property: $properties;
-    }
-}

package/styles/core/jkl/_navigation.scss

@@ -1,9 +0,0 @@
-/// Brukes for CSS som skal gjelde bare ved tastaturnavigasjon.
-/// Brukes typisk til ekstra tydelige fokus-stiler. Krever at
-/// `initTabListener()` fra core er kjørt. Se README til core.
-/// @content Innholdet plasseres i en selector som bare matcher dersom vi _ikke_ har data-mousenavigation eller data-touchnavigation på html-elementet.
-@mixin keyboard-navigation {
-    @at-root html:not([data-mousenavigation]):not([data-touchnavigation]) #{&} {
-        @content;
-    }
-}

package/styles/core/jkl/_ornaments.scss

@@ -1,28 +0,0 @@
-@use "motion";
-
-@mixin chevron($size, $color, $weight: 0.125rem, $rotate: 0, $state: closed) {
-    box-sizing: border-box;
-    width: $size;
-    height: $size;
-
-    transform-origin: 26.33% 73.66%; // places origin in center of chevron
-    transform: rotate(
-        (-45 + $rotate) * 1deg
-    ); // default orientation is pointing down
-
-    border-left: $weight solid $color;
-    border-bottom: $weight solid $color;
-    transition: transform motion.timing("lazy") ease;
-}
-
-@mixin decorative($content) {
-    // Detaljer finnes her: https://github.com/fremtind/jokul/issues/2774#issuecomment-1056575107
-    content: $content; // Fallback for nettlesere som ikke støtter ny syntaks (Firefox, Safari)
-    content: $content / ""; // Tom alternativ tekst
-    alt: " "; // WebKit-alternativ, fases ut når varianten fra speccen er støttet
-}
-
-@mixin focus-outline($offset: 3px, $thickness: 3px) {
-    outline: $thickness solid var(--jkl-color-border-action);
-    outline-offset: $offset;
-}

package/styles/core/jkl/_reset.scss

@@ -1,45 +0,0 @@
-@use "theme";
-
-/// En omfattende reset for alt av outlines og borders på interaktive elementer
-@mixin reset-outline {
-    & {
-        outline: 0;
-        border-style: none;
-        outline-style: none;
-    }
-
-    &:active,
-    &:hover,
-    &:focus {
-        outline: 0;
-        outline-style: none;
-    }
-
-    // Reset alt som er gjort over hvis brukeren har på forced-colors.
-    // Da mister vi box-shadow og er avhengig av at borders og outlines synes.
-    @include theme.forced-colors-mode {
-        outline: revert;
-        border-style: revert;
-        outline-style: revert;
-
-        &:active,
-        &:hover,
-        &:focus {
-            outline: revert;
-            outline-style: revert;
-        }
-    }
-}
-
-/// Removes increment and decrement buttons
-/// for number input fields.
-@mixin remove-inner-outer-button {
-    input[type="number"]::-webkit-outer-spin-button,
-    input[type="number"]::-webkit-inner-spin-button {
-        -webkit-appearance: none;
-    }
-
-    input[type="number"] {
-        -moz-appearance: textfield;
-    }
-}

package/styles/core/jkl/_responsive-units.scss

@@ -1,30 +0,0 @@
-@use "sass:math";
-@use "convert";
-
-/// Kalkuler riktig rem-verdi basert på en gitt pixelverdi
-/// @param {Number} $px-size - Pixelverdi, helst med unit
-/// @return {Number} - Pixelverdien konvertert til rem
-/// @example
-///     jkl.rem(16px);
-@function rem($px-size) {
-    @if $px-size == 0 {
-        @return 0;
-    }
-    $rem-size: math.div($px-size, 16px);
-    // Default font size on html element is 100%, equivalent to 16px;
-    @return convert.to-number(#{$rem-size}rem);
-}
-
-/// Calculate a responsive size value relative to a given screen size
-/// Will return a CSS rule that corresponds to the given pixel size at
-/// the given screen size and scales with changes in screen size
-/// @param {Number} $px-size - Size to calculate from, in px without unit
-/// @param {Number} $screen-width - Screen width to calculate from, in px without unit, default 1400
-/// @param {Number} $screen-height - Screen height to calculate from, in px without unit, default 900
-/// @return {Number} - Input expressed as a responsive value
-@function relative-size($px-size, $screen-width: 1400, $screen-height: 900) {
-    $hor-size: math.div($px-size, $screen-width) * 100 * 1vw;
-    $ver-size: math.div($px-size, $screen-height) * 100 * 1vh;
-
-    @return min(#{$hor-size}, #{$ver-size});
-}