@fremtind/jokul 3.5.3 → 3.6.0

package/styles/components/tag/tag.scss

@@ -1,65 +0,0 @@
-@charset "UTF-8";
-@use "../../core/jkl";
-
-@include jkl.comfortable-density-variables {
-    --jkl-tag-padding: var(--jkl-unit-05) var(--jkl-unit-10);
-    --jkl-tag-gap: var(--jkl-unit-05);
-}
-
-@include jkl.compact-density-variables {
-    --jkl-tag-padding: 0 var(--jkl-unit-05);
-    --jkl-tag-gap: var(--jkl-unit-02);
-}
-
-.jkl-tag {
-    --background-color: var(--jkl-color-background-alert-neutral);
-    --text-color: var(--jkl-color-text-on-alert);
-
-    @include jkl.text-style("heading-5");
-    background-color: var(--background-color);
-    color: var(--text-color);
-    border-radius: jkl.rem(4px);
-    display: inline-flex;
-    align-items: center;
-    white-space: nowrap;
-    padding: var(--jkl-tag-padding);
-    gap: var(--jkl-tag-gap);
-
-    &--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 none CanvasText;
-        border-bottom-style: dotted;
-
-        &--info {
-            border-style: dotted;
-        }
-
-        &--warning {
-            border-style: dashed;
-        }
-
-        &--error {
-            border-style: double;
-            border-width: 4px;
-        }
-
-        &--success {
-            border-style: solid;
-        }
-    }
-}

package/styles/components/text-area/_index.scss

@@ -1,4 +0,0 @@
-@forward "text-area";
-@use "../icon" as icon;
-@use "../icon-button" as icon-button;
-@use "../input-group" as input-group;

package/styles/components/text-area/text-area.scss

@@ -1,111 +0,0 @@
-@charset "UTF-8";
-@use "sass:color";
-@use "../../core/jkl";
-@use "../../shared/input/shared-input-styles" as shared;
-
-.jkl-text-area-wrapper {
-    @include shared.wrapper_styles;
-}
-
-.jkl-text-area {
-    height: auto;
-    width: 100%;
-
-    &__text-area {
-        scrollbar-color: var(--jkl-color) transparent; // Unngå at scrollbar ligger oppå rammen
-        box-sizing: border-box;
-        resize: none; // Fjern mulighet for resizing av feltet
-        width: 100%;
-        padding: var(--jkl-text-input-padding);
-        max-height: var(--jkl-text-input-height);
-        height: var(--jkl-text-input-height);
-        min-height: var(--jkl-text-input-height);
-
-        @include jkl.motion;
-        transition-property: height, min-height, max-height, padding;
-
-        @include shared.input-styles;
-    }
-
-    .jkl-text-area-wrapper {
-        height: auto;
-        max-height: 100%;
-    }
-
-    &--start-open {
-        .jkl-text-area-wrapper {
-            max-height: 100%;
-        }
-    }
-
-    &--auto-expand {
-        .jkl-text-area__text-area {
-            overflow: hidden; // Skjul scrollbar når høyden autojusteres
-        }
-    }
-
-    &:has(.jkl-text-area__counter) {
-        $progress-bar-height: jkl.rem(4px);
-
-        .jkl-text-area-wrapper {
-            position: relative;
-
-            &[data-has-content="true"],
-            &:focus-within {
-                padding-bottom: calc(var(--jkl-text-input-height) + #{$progress-bar-height});
-            }
-        }
-
-        .jkl-text-area__counter {
-
-            pointer-events: none; // La brukeren klikke gjennom telleren når feltet er kollapset
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            right: 0;
-
-            &-count {
-                padding: var(--jkl-text-input-padding);
-                color: var(--text-color);
-
-                @include jkl.text-style("small");
-            }
-
-            &-progress {
-                background-color: transparent;
-                height: $progress-bar-height;
-                width: 100%;
-                overflow: hidden;
-
-                &::after {
-                    content: "";
-                    width: var(--progress-width, 100%);
-                    display: block;
-                    height: $progress-bar-height;
-                    background-color: var(--border-color);
-                    transition-property: width;
-
-                    @include jkl.motion("standard", "lazy");
-                }
-            }
-        }
-    }
-}
-
-// Nytteklasser for tekstfelt med $num antall rader
-@for $num from 3 through 10 {
-
-    .jkl-text-area__text-area--#{$num}-rows:focus,
-    .jkl-text-area__text-area--#{$num}-rows:not(:placeholder-shown),
-    .jkl-text-area--start-open .jkl-text-area__text-area--#{$num}-rows {
-        --height: calc(var(--jkl-text-input-line-height) * #{$num});
-        --vertical-padding: calc(var(--jkl-text-input-vertical-padding) * 2);
-
-        // (#2751) Ekspanderende får inline style med height auto,
-        //         som gir et "hopp" dersom det er en teller og vi
-        //         ikke har en minimumshøyde.
-        min-height: calc(var(--height) + var(--vertical-padding)); // (#2751)
-        height: calc(var(--height) + var(--vertical-padding));
-        max-height: 100%;
-    }
-}

package/styles/components/text-input/_index.scss

@@ -1,4 +0,0 @@
-@forward "text-input";
-@use "../icon" as icon;
-@use "../icon-button" as icon-button;
-@use "../input-group" as input-group;

package/styles/components/text-input/text-input.scss

@@ -1,43 +0,0 @@
-@charset "UTF-8";
-@use "sass:color";
-@use "../../core/jkl";
-@use "../../core/jkl/colors";
-@use "../../shared/input/shared-input-styles" as shared;
-
-.jkl-text-input-wrapper {
-    @include shared.wrapper_styles;
-}
-
-.jkl-text-input {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-
-    &__input {
-        padding: var(--jkl-text-input-padding);
-        width: 100%;
-
-        @include shared.input-styles;
-
-        &--align-right {
-            text-align: right;
-        }
-    }
-
-    &__unit {
-        padding-inline-end: var(--jkl-text-input-horizontal-padding);
-        padding-block: var(--jkl-text-input-vertical-padding);
-    }
-
-    &__action-button {
-        margin-inline-start: calc(
-            var(--jkl-text-input-horizontal-padding) * -1
-        );
-    }
-
-    &--inline {
-        display: inline-block;
-        vertical-align: middle;
-        margin: jkl.rem(-2px) jkl.rem(4px);
-    }
-}

package/styles/components/toast/_index.scss

@@ -1,4 +0,0 @@
-@forward "toast";
-@use "../icon" as icon;
-@use "../icon-button" as icon-button;
-@use "../countdown" as countdown;

package/styles/components/toast/toast.scss

@@ -1,219 +0,0 @@
-@charset "UTF-8";
-@use "sass:string";
-@use "../../core/jkl";
-@use "../../core/jkl/colors";
-
-@include jkl.comfortable-density-variables {
-    --jkl-toast-padding: #{jkl.$unit-20};
-
-    @include jkl.small-device {
-        --jkl-toast-padding: #{jkl.$unit-15};
-    }
-}
-
-@include jkl.compact-density-variables {
-    --jkl-toast-padding: #{jkl.$unit-10};
-}
-
-.jkl-toast-region {
-    z-index: jkl.$z-index--floating;
-    background: transparent;
-    display: flex;
-    justify-content: center;
-    position: fixed;
-    bottom: jkl.$unit-30;
-    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.$unit-20;
-    }
-
-    &--left {
-        justify-content: flex-start;
-        left: jkl.$unit-30;
-    }
-}
-
-.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;
-
-    grid-template-areas:
-        "progress progress progress"
-        "icon content dismiss";
-    grid-template-columns: auto 1fr auto;
-
-    @include jkl.text-style("body");
-
-    &__progress {
-        grid-area: progress;
-        margin-bottom: jkl.$unit-20;
-        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;
-        margin-right: jkl.$unit-15;
-
-        @include jkl.forced-colors-svg-fallback($stroke: CanvasText);
-    }
-
-    &__content {
-        grid-area: content;
-    }
-
-    &__action {
-        margin-top: jkl.$spacing-12;
-    }
-
-    &__message {
-        margin-top: jkl.rem(
-            -2px
-        ); // Offset for å aligne med ikon hvis uten tittel.
-    }
-
-    &__title {
-        margin: 0 0 jkl.$unit-05 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/styles/components/toggle-switch/_index.scss

@@ -1,2 +0,0 @@
-@forward "toggle-switch";
-@use "../icon" as icon;

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

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