@fremtind/jokul 3.5.2 → 3.6.0

package/styles/components/checkbox-panel/checkbox-panel.scss

@@ -1,95 +0,0 @@
-@use "../../core/jkl" as jkl;
-@use "sass:string";
-@use "../input-panel/input-panel";
-@use "../checkbox/checkbox.scss";
-
-$_checkbox-checked-animation-name: jkl-checkbox-checked-#{string.unique-id()};
-
-@keyframes #{$_checkbox-checked-animation-name} {
-    0% {
-        width: 0;
-        height: 0;
-    }
-
-    40% {
-        width: 18%;
-        height: 0;
-    }
-
-    100% {
-        width: 18%;
-        height: 58%;
-    }
-}
-
-@layer jokul.components {
-    .jkl-checkbox-panel {
-        --checkbox-background-color: transparent;
-        --checkbox-box-color: var(--jkl-color-border-action);
-        --checkbox-check-color: var(--jkl-color-border-action);
-
-        // The box
-        &__decorator {
-            box-sizing: border-box;
-            height: var(--jkl-checkbox-box-size);
-            width: var(--jkl-checkbox-box-size);
-            position: relative;
-
-            outline: none;
-            border-radius: 0; // fixes rounded corners in iOS Safari
-            border: 1px solid;
-            border-color: var(--checkbox-box-color);
-            background-color: var(--checkbox-background-color);
-
-            @include jkl.motion;
-            transition-property: background-color;
-
-            @include jkl.forced-colors-mode {
-                outline: revert;
-                border: 1px solid ButtonText;
-            }
-
-            // The check
-            &::after {
-                content: "";
-                position: absolute;
-                transform-origin: bottom left;
-                bottom: 42%;
-                left: 18%;
-
-                display: block;
-                width: 18%;
-                height: 58%;
-                transform: rotate(45deg);
-
-                border: solid jkl.rem(2px) var(--checkbox-check-color);
-                border-left-width: 0;
-                border-top-width: 0;
-
-                opacity: 0;
-
-                @include jkl.motion;
-                transition-property: opacity, border-color;
-
-                @include jkl.forced-colors-mode {
-                    border-color: ButtonText;
-                }
-            }
-        }
-
-        &:has(:checked) &__decorator {
-            &::after {
-                animation: $_checkbox-checked-animation-name
-                    jkl.timing("productive") ease-in-out forwards;
-                opacity: 1;
-            }
-        }
-
-        &:has([aria-invalid="true"]) {
-            --checkbox-background-color: var(
-                --jkl-color-background-alert-error
-            );
-            --checkbox-check-color: var(--jkl-color-text-on-alert);
-        }
-    }
-}

package/styles/components/checkbox-panel/development/styles.scss

@@ -1,27 +0,0 @@
-@use "../../core/jkl/" as jkl;
-
-.input-panel-example {
-    &__season-tag {
-        position: absolute;
-        top: calc(-50% - 2px);
-        right: 2px;
-
-        @include jkl.from-medium-device {
-            top: 2px;
-        }
-    }
-
-    &__custom-label {
-        position: relative;
-        height: 100%;
-        width: 100%;
-
-        &--small {
-            font-size: 0.8em;
-        }
-
-        &--bold {
-            font-weight: bold;
-        }
-    }
-}

package/styles/components/chip/_index.scss

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

package/styles/components/chip/chip.scss

@@ -1,104 +0,0 @@
-@charset "UTF-8";
-@use "../../core/jkl";
-
-@include jkl.compact-density-variables {
-    --padding-inline-s: #{jkl.$unit-10};
-    --padding-inline-l: #{jkl.$unit-15};
-    --padding-icon-s: #{jkl.$unit-05};
-    --padding-icon-l: #{jkl.$unit-10};
-    --height-l: #{jkl.$unit-40};
-    --height-s: #{jkl.$unit-30};
-    --gap-s: #{jkl.$unit-02};
-    --gap-l: #{jkl.$unit-05};
-}
-
-@include jkl.comfortable-density-variables {
-    --padding-inline-s: #{jkl.$unit-15};
-    --padding-inline-l: #{jkl.$unit-20};
-    --padding-icon-s: #{jkl.$unit-10};
-    --padding-icon-l: #{jkl.$unit-15};
-    --height-l: #{jkl.$unit-50};
-    --height-s: #{jkl.$unit-40};
-    --gap-s: #{jkl.$unit-05};
-    --gap-l: #{jkl.$unit-10};
-}
-
-.jkl-chip {
-    --text-color: var(--jkl-color-text-default);
-    --border-color: var(--jkl-color-border-separator);
-    --background-color: transparent;
-    --border-width: #{jkl.rem(1px)};
-
-    @include jkl.text-style("heading-5");
-    cursor: pointer;
-    position: relative;
-    background-color: var(--background-color);
-    color: var(--text-color);
-    border: var(--border-width) solid var(--border-color);
-    border-radius: 99999px;
-    display: inline-flex;
-    align-items: center;
-    text-align: initial;
-    white-space: nowrap;
-    gap: var(--gap, var(--gap-s));
-    padding: 0 var(--padding-inline, var(--padding-inline-s));
-    min-height: var(--height, var(--height-s));
-
-    @include jkl.forced-colors-mode {
-        border: 2px none CanvasText;
-        border-bottom-style: dotted;
-    }
-
-    &::after {
-        content: "";
-        opacity: 0;
-        position: absolute;
-        inset: 0;
-        border-radius: inherit;
-        background-color: var(--text-color);
-
-        @include jkl.motion("standard", "productive", opacity);
-    }
-
-    &:focus-visible {
-        @include jkl.focus-outline;
-    }
-
-    &:hover {
-        &::after {
-            opacity: 0.15;
-        }
-    }
-
-    &--filter {
-        &[aria-pressed="true"] {
-            --background-color: var(--jkl-color-background-action);
-            --text-color: var(--jkl-color-text-on-action);
-            --border-color: var(--text-color);
-
-            @include jkl.forced-colors-mode {
-                forced-color-adjust: none;
-                --background-color: CanvasText;
-                --text-color: Canvas;
-            }
-        }
-    }
-
-    &--small {
-        --padding-inline: var(--padding-inline-s);
-        --gap: var(--gap-s);
-        --padding-icon: var(--padding-icon-s);
-        --height: var(--height-s);
-    }
-
-    &--large {
-        --padding-inline: var(--padding-inline-l);
-        --gap: var(--gap-l);
-        --padding-icon: var(--padding-icon-l);
-        --height: var(--height-l);
-    }
-
-    &:has(.jkl-icon) {
-        padding-inline-end: var(--padding-icon);
-    }
-}

package/styles/components/combobox/_index.scss

@@ -1,6 +0,0 @@
-@forward "combobox";
-@use "../icon" as icon;
-@use "../icon-button" as icon-button;
-@use "../input-group" as input-group;
-@use "../tag" as tag;
-@use "../tooltip" as tooltip;

package/styles/components/combobox/combobox.scss

@@ -1,238 +0,0 @@
-@use "sass:color";
-@use "sass:math";
-@use "../../core/jkl";
-@use "../../core/jkl/colors";
-
-@include jkl.comfortable-density-variables {
-    @include jkl.declare-font-variables("jkl-combobox", "body");
-
-    --jkl-combobox-button-padding: #{jkl.$unit-10};
-    --jkl-combobox-button-active-value-padding: #{jkl.$unit-10};
-    --jkl-combobox-input-height: #{jkl.rem(48px)};
-    --jkl-combobox-actions-right: #{jkl.$unit-10};
-    --jkl-combobox-actions-top: #{jkl.rem(4px)};
-    --jkl-combobox-chips-gap: 4px;
-    --jkl-combobox-search-input-padding: var(--jkl-combobox-button-padding);
-    --jkl-combobox-native-padding: 0 #{jkl.$unit-50} 0 #{jkl.$unit-10};
-    --jkl-combobox-option-padding: #{jkl.$unit-10} #{jkl.$unit-15};
-    --jkl-combobox-option-line-height: 2rem;
-    --jkl-combobox-input-padding: #{jkl.rem(60px)};
-    --jkl-combobox-search-input-height: #{jkl.rem(28px)};
-
-    @include jkl.small-device {
-        --jkl-combobox-input-height: #{jkl.rem(44px)};
-    }
-}
-
-@include jkl.compact-density-variables {
-    @include jkl.declare-font-variables("jkl-combobox", "small");
-
-    --jkl-combobox-button-padding: #{jkl.$unit-05};
-    --jkl-combobox-button-active-value-padding: #{jkl.$unit-05} #{jkl.$unit-10};
-    --jkl-combobox-input-height: #{jkl.rem(32px)};
-    --jkl-combobox-actions-right: #{jkl.rem(0)};
-    --jkl-combobox-actions-top: #{jkl.rem(1px)};
-    --jkl-combobox-chips-gap: 1px;
-    --jkl-combobox-search-input-padding: #{jkl.$unit-05} #{jkl.$unit-10};
-    --jkl-combobox-native-padding: #{jkl.$unit-30} #{jkl.$unit-05} #{jkl.$unit-05};
-    --jkl-combobox-option-padding: #{jkl.$unit-05} #{jkl.$unit-10};
-    --jkl-combobox-option-line-height: 1.5rem;
-    --jkl-combobox-input-padding: #{jkl.$unit-15};
-    --jkl-combobox-search-input-height: #{jkl.rem(20px)};
-}
-
-.jkl-combobox {
-    position: relative;
-
-    @include jkl.reset-outline;
-
-    & .jkl-combobox__option:focus {
-        outline: none;
-    }
-
-    &__wrapper {
-        position: relative;
-        max-width: 100%;
-        display: flex;
-        gap: 1ch;
-        cursor: pointer;
-
-        padding: var(--jkl-combobox-button-padding);
-        border-radius: jkl.rem(3px);
-        border: jkl.rem(1px) solid var(--jkl-color-border-input);
-        box-shadow: 0 0 0 jkl.rem(1px) transparent;
-
-        @include jkl.motion;
-        transition-property: color, border-color, box-shadow;
-
-        &--active-value {
-            padding: var(--jkl-combobox-button-active-value-padding);
-        }
-
-        @include jkl.keyboard-navigation {
-            &:has(:focus-visible) {
-                @include jkl.focus-outline;
-                background-color: var(--jkl-color-background-input-focus);
-            }
-        }
-
-        &:has(.jkl-icon-button:focus-visible) {
-            outline: none;
-        }
-
-        &:hover {
-            border-color: var(--jkl-color-border-input-focus);
-            box-shadow: 0 0 0 jkl.rem(1px) var(--jkl-color-border-input-focus);
-
-            & ~ .jkl-combobox__arrow {
-                transform: translateY(calc(-50% + #{jkl.rem(3px)}));
-            }
-        }
-    }
-
-    &__button {
-        padding: 0;
-    }
-
-    &__button,
-    &__search-input {
-        @include jkl.use-font-variables("jkl-combobox");
-        width: 100%;
-        overflow: hidden;
-        text-overflow: ellipsis;
-
-        background-color: var(--jkl-color-background-input-base);
-        color: var(--jkl-color-text-default);
-        cursor: pointer;
-        text-align: left;
-        display: flex;
-
-        @include jkl.motion;
-        transition-property: color, border-color, box-shadow;
-    }
-
-    &__search-input {
-        border: none;
-        outline: none;
-        align-self: end;
-        flex: 1 1 1ch;
-        max-height: var(--jkl-combobox-search-input-height);
-    }
-
-    &__arrow {
-        pointer-events: none;
-        transform: translateY(-50%);
-
-        @include jkl.motion;
-        transition-property: transform, color;
-
-        @include jkl.forced-colors-svg-fallback($stroke: CanvasText,
-            $fill: CanvasText);
-    }
-
-    &__menu {
-        @include jkl.motion;
-        transition-property: height;
-        top: 100%;
-        overflow-y: auto;
-        position: absolute;
-        color: var(--jkl-color-text-default);
-        z-index: jkl.$z-index--dropdown;
-        left: jkl.rem(-1px);
-        right: jkl.rem(-1px);
-        background-color: var(--jkl-color-background-container-high);
-        border: jkl.rem(2px) solid var(--jkl-color-border-input-focus);
-        border-radius: 0 0 jkl.rem(3px) jkl.rem(3px);
-        box-sizing: border-box;
-        max-height: calc(calc(var(--jkl-combobox-max-shown-options, 5) + 0.5) * var(--jkl-combobox-input-height));
-    }
-
-    &__option {
-        @include jkl.use-font-variables("jkl-combobox-text");
-        @include jkl.motion;
-        display: flex;
-        align-items: center;
-        border: 0;
-        background-color: var(--jkl-color-background-interactive);
-        transition-property: color, background-color;
-        cursor: pointer;
-        padding: var(--jkl-combobox-option-padding);
-        width: 100%;
-        text-align: left;
-        line-height: var(--jkl-combobox-option-line-height);
-
-        &:focus,
-        &:hover {
-            background-color: var(--jkl-color-background-interactive-hover);
-        }
-
-        &-description {
-            @include jkl.text-style("small");
-            color: var(--jkl-color-text-subdued);
-            display: block;
-            width: 100%;
-        }
-    }
-
-    &__option--selected {
-        justify-content: space-between;
-    }
-
-    &__no-option {
-        padding: var(--jkl-combobox-option-padding);
-    }
-
-    &__actions {
-        display: flex;
-        gap: jkl.$unit-05;
-        margin-block-start: var(--jkl-combobox-actions-top);
-    }
-
-    &__chips {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-        gap: var(--jkl-combobox-chips-gap);
-        width: 100%;
-
-        .jkl-chip {
-            white-space: break-spaces;
-
-            .jkl-tooltip-trigger {
-                font-weight: 700;
-            }
-        }
-    }
-
-    &--invalid {
-        .jkl-combobox__search-input,
-        .jkl-combobox__wrapper {
-            background-color: var(--jkl-color-background-alert-error);
-        }
-
-        .jkl-combobox__search-input,
-        .jkl-combobox__button,
-        .jkl-combobox__wrapper {
-            color: var(--jkl-color-text-on-alert);
-        }
-    }
-
-    &--menu-closed {
-        .jkl-combobox__search-input {
-            position: absolute;
-            background-color: transparent;
-            width: 94%;
-            padding-right: 0;
-        }
-    }
-
-    &--menu-open {
-        .jkl-combobox__wrapper:hover .jkl-combobox__actions {
-            transform: translateY(#{jkl.rem(-3px)});
-        }
-
-        .jkl-combobox__search-input {
-            cursor: text;
-        }
-    }
-}

package/styles/components/cookie-consent/_index.scss

@@ -1,5 +0,0 @@
-@forward "cookie-consent";
-@use "../button" as button;
-@use "../checkbox" as checkbox;
-@use "../list" as list;
-@use "../modal" as modal;

package/styles/components/cookie-consent/cookie-consent.scss

@@ -1,31 +0,0 @@
-@charset "UTF-8";
-@use "../../core/jkl";
-
-$_card-corner-radius: jkl.rem(2px);
-$_container-width: jkl.rem(660px);
-$_container-width--compact: jkl.rem(320px);
-
-.jkl-cookie-consent-modal {
-    position: fixed;
-    z-index: jkl.$z-index--modal !important;
-
-    &[aria-hidden="true"] {
-        display: none;
-    }
-
-    & > .jkl-cookie-consent-modal__overlay {
-        position: fixed;
-        background: rgb(0 0 0 / 30%);
-        inset: 0;
-        transition: 0.2s;
-    }
-
-    &__info-text {
-        @include jkl.text-style("small");
-    }
-
-    &__checkbox {
-        margin-bottom: jkl.$unit-10;
-        margin-top: jkl.$unit-30;
-    }
-}

package/styles/components/countdown/_index.scss

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

package/styles/components/countdown/countdown.scss

@@ -1,25 +0,0 @@
-@use "sass:string";
-@use "../../shared/track/track" as track;
-
-$_downcount: jkl-downcount-#{string.unique-id()};
-
-@layer jokul.components {
-    .jkl-countdown {
-        @include track.track;
-
-        &__tracker {
-            animation: $_downcount var(--duration) linear forwards;
-            animation-play-state: var(--play-state, running);
-        }
-    }
-
-    @keyframes #{$_downcount} {
-        from {
-            width: 100%;
-        }
-
-        to {
-            width: 0%;
-        }
-    }
-}

package/styles/components/datepicker/_calendar-date-button.scss

@@ -1,85 +0,0 @@
-@use "../../core/jkl";
-
-@include jkl.comfortable-density-variables {
-    --jkl-calendar-date-size: #{jkl.rem(38px)};
-
-    @include jkl.declare-font-variables("jkl-calendar-date", "body");
-
-    @include jkl.small-device {
-        --jkl-calendar-date-size: #{jkl.rem(36px)};
-
-        @include jkl.declare-font-variables("jkl-calendar-date", "small");
-    }
-
-    // Custom tweaks for iPhone SE
-    @include jkl.screen-to(375px) {
-        --jkl-calendar-date-size: #{jkl.rem(32px)};
-    }
-}
-
-@include jkl.compact-density-variables {
-    --jkl-calendar-date-size: #{jkl.rem(32px)};
-
-    @include jkl.declare-font-variables("jkl-calendar-date", "small");
-}
-
-.jkl-calendar-date-button {
-    @include jkl.use-font-variables("jkl-calendar-date");
-    appearance: none;
-    position: relative;
-
-    box-sizing: border-box;
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    height: var(--jkl-calendar-date-size);
-    width: var(--jkl-calendar-date-size);
-    border-radius: 50%;
-    background-color: transparent;
-    color: var(--jkl-color);
-
-    margin: var(--jkl-calendar-date-margin);
-
-    padding: 0;
-    padding-top: jkl.$unit-02; // adjust visual alignment of text
-
-    @include jkl.motion("entrance", "energetic");
-    transition-property: color, background-color, box-shadow;
-
-    @include jkl.reset-outline;
-
-    &[data-adjacent="true"] {
-        @include jkl.text-style("small");
-        padding: 0; // reset vertical alignment of text
-        color: var(--jkl-color-text-subdued);
-    }
-
-    &[aria-current="date"] {
-        font-weight: jkl.$typography-weight-bold;
-    }
-
-    // Other dates
-    &:hover:not(:disabled) {
-        background-color: var(--jkl-color-background-interactive-hover);
-        cursor: pointer;
-    }
-
-    // Selected date
-    &[aria-pressed="true"] {
-        background-color: var(--jkl-color-background-container-inverted);
-        color: var(--jkl-color-text-inverted);
-        cursor: pointer;
-
-        &:hover {
-            color: var(--jkl-color);
-        }
-    }
-
-    &:disabled {
-        color: color(from var(--jkl-color-text-subdued) srgb r g b / 70%);
-    }
-
-    &:focus-visible {
-        @include jkl.focus-outline;
-    }
-}

package/styles/components/datepicker/_calendar-navigation-dropdown.scss

@@ -1,52 +0,0 @@
-@use "../../core/jkl";
-
-.jkl-calendar-navigation-dropdown {
-    // Størrelsen til medium ikon
-    --chevron-size: #{jkl.rem(24px)};
-
-    display: inline-flex;
-    align-items: center;
-
-    & > * {
-        cursor: pointer;
-    }
-
-    &__select {
-        appearance: none;
-
-        @include jkl.text-style("small") {
-            font-weight: jkl.$typography-weight-bold;
-        }
-        background-color: transparent;
-        color: inherit;
-        border-radius: 0;
-        border: none;
-        text-align: end;
-        text-align-last: end;
-        height: jkl.rem(40px);
-        margin: 0;
-        padding: 0;
-        padding-inline-end: var(--chevron-size);
-
-        @include jkl.reset-outline;
-
-        & option {
-            color: var(--jkl-color-text-default);
-            background-color: var(--jkl-color-background-container-high);
-            text-align: left;
-        }
-
-        &:focus-visible {
-            @include jkl.focus-outline;
-        }
-    }
-
-    &__chevron {
-        margin-left: calc(var(--chevron-size) * -1);
-        pointer-events: none;
-    }
-
-    & + & {
-        margin-inline-start: var(--jkl-unit-10);
-    }
-}

package/styles/components/datepicker/_calendar-navigation.scss

@@ -1,12 +0,0 @@
-@use "../../core/jkl";
-
-.jkl-calendar-navigation {
-    border: 0;
-    padding: 0;
-    margin: 0;
-    display: flex;
-    box-sizing: border-box;
-    width: 100%;
-    justify-content: space-between;
-    align-items: center;
-}