@fremtind/jokul 3.5.2 → 3.6.0

package/styles/components/segmented-control/segmented-control.scss

@@ -1,99 +0,0 @@
-@charset "UTF-8";
-@use "../../core/jkl";
-@use "../../components/radio-button";
-
-@include jkl.comfortable-density-variables {
-    --jkl-segmented-controls-padding: #{jkl.$unit-02};
-    --jkl-segmented-controls-margin: 1.5ch;
-
-    @include jkl.declare-font-variables("jkl-segmented-control", "body");
-}
-
-@include jkl.compact-density-variables {
-    --jkl-segmented-controls-padding: 0;
-    --jkl-segmented-controls-margin: 1ch;
-
-    @include jkl.declare-font-variables("jkl-segmented-control", "small");
-}
-
-.jkl-segmented-control {
-    @include jkl.use-font-variables("jkl-segmented-control");
-
-    @include jkl.small-device {
-        @include jkl.declare-font-variables("jkl-segmented-control", "small");
-    }
-
-    .jkl-segmented-control-legend {
-        margin-block-end: 0.25lh;
-    }
-
-    .jkl-segmented-control-item {
-        --jkl-segmented-control-border-width: 1px;
-        --jkl-segmented-controls-border-radius: 2lh;
-
-        cursor: pointer;
-        position: relative;
-        display: inline-flex;
-        align-items: center;
-        background-color: var(--jkl-color-background-interactive);
-        border: var(--jkl-segmented-control-border-width) solid var(--jkl-color-border-separator);
-        border-radius: 0; // Gjør det enklere å behandle separering senere
-        margin-inline-end: calc(var(--jkl-segmented-control-border-width) * -1);
-        margin-block-end: 0.5lh;
-
-        @include jkl.motion("easeInBounceOut", "expressive", border background);
-
-        label {
-            cursor: pointer;
-            padding-block: var(--jkl-segmented-controls-padding);
-            padding-inline: 1ch 1.5ch;
-        }
-
-        &:hover {
-            background-color: var(--jkl-color-background-interactive-hover);
-            border-color: var(--jkl-color-border-separator-hover);
-            z-index: 2;
-        }
-
-        &:has(input:checked) {
-            background-color: var(--jkl-color-background-container-high);
-            border-color: var(--jkl-color-border-separator);
-            z-index: 1;
-        }
-
-        // Kontrollerer border og margin på separerte items + border-radius til neste sibling
-        &:has(input[data-separated="true"]) {
-            border-radius: var(--jkl-segmented-controls-border-radius);
-            margin-inline-start: var(--jkl-segmented-controls-margin);
-
-            &:first-of-type {
-                margin-inline-start: 0;
-            }
-
-            + span + .jkl-segmented-control-item {
-                border-end-start-radius: var(--jkl-segmented-controls-border-radius);
-                border-start-start-radius: var(--jkl-segmented-controls-border-radius);
-
-                margin-inline-start: var(--jkl-segmented-controls-margin);
-            }
-        }
-
-        // Første element skal alltid ha border-radius på starten
-        &:first-of-type {
-            border-end-start-radius: var(--jkl-segmented-controls-border-radius);
-            border-start-start-radius: var(--jkl-segmented-controls-border-radius);
-        }
-
-        // Siste element skal alltid ha border-radius på slutten
-        &:last-of-type {
-            border-end-end-radius: var(--jkl-segmented-controls-border-radius);
-            border-start-end-radius: var(--jkl-segmented-controls-border-radius);
-        }
-
-        // Dersom nærmeste sibling er separert skal slutten ha border radius
-        &:has(+ span + .jkl-segmented-control-item > input[data-separated="true"]) {
-            border-end-end-radius: var(--jkl-segmented-controls-border-radius);
-            border-start-end-radius: var(--jkl-segmented-controls-border-radius);
-        }
-    }
-}

package/styles/components/select/_index.scss

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

package/styles/components/select/select.scss

@@ -1,299 +0,0 @@
-@charset "UTF-8";
-@use "sass:color";
-@use "sass:math";
-@use "../../core/jkl";
-@use "../../core/jkl/colors";
-
-@include jkl.compact-density-variables {
-    --jkl-select-input-height: #{jkl.$unit-40};
-    --jkl-select-arrow-right: #{jkl.$unit-05};
-    --jkl-select-button-padding: #{jkl.$unit-05} #{jkl.$unit-40} #{jkl.$unit-05}
-        #{jkl.$unit-10};
-    --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-arrow-right: #{jkl.$unit-10};
-    --jkl-select-button-padding: #{jkl.$unit-10} #{jkl.rem(36px)} #{jkl.$unit-10}
-        #{jkl.$unit-15};
-    --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 {
-    display: block;
-    position: relative;
-
-    @include jkl.reset-outline;
-
-    & *:focus-visible {
-        outline: none;
-    }
-
-    & .jkl-tooltip-question-button:focus {
-        @include jkl.focus-outline($offset: 0);
-    }
-
-    & select {
-        appearance: none;
-
-        &::ms-expand {
-            display: none;
-        }
-
-        &:-moz-focusring {
-            color: transparent;
-            text-shadow: 0 0 0 var(--jkl-color-text-subdued);
-        }
-
-        & option {
-            font-weight: normal;
-            font-family: sans-serif;
-            color: var(--jkl-color-text-subdued);
-            background-color: var(--jkl-color-background-container-high);
-        }
-    }
-
-    &__outer-wrapper {
-        position: relative;
-        width: 15rem;
-        min-width: 7rem;
-        max-width: 100%;
-    }
-
-    &__search-input {
-        box-sizing: border-box;
-        padding: var(--jkl-select-search-input-padding);
-        color: var(--jkl-color-text-subdued);
-    }
-
-    &__search-input,
-    &__button {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        background-color: transparent;
-        color: var(--jkl-color-text-subdued);
-        cursor: pointer;
-
-        height: var(--jkl-select-input-height);
-        border-radius: jkl.rem(3px);
-        border: jkl.rem(1px) solid var(--jkl-color-border-input);
-        box-shadow: 0 0 0 jkl.rem(1px) transparent;
-        text-align: left;
-        width: 100%;
-
-        transition-property: color, border-color, box-shadow;
-
-        @include jkl.motion;
-        @include jkl.use-font-variables("jkl-select");
-
-        &--active-value {
-            color: var(--jkl-color-text-default);
-        }
-
-        &:hover {
-            border-color: var(--jkl-color-border-input-focus);
-            box-shadow: 0 0 0 jkl.rem(1px) var(--jkl-color-border-input-focus);
-
-            & ~ .jkl-select__arrow {
-                transform: translateY(calc(-50% + #{jkl.rem(3px)}));
-            }
-        }
-
-        &:focus-visible {
-            outline: none;
-        }
-    }
-
-    @include jkl.keyboard-navigation {
-        &__search-input,
-        &__button {
-            &:focus-visible,
-            &:has(:focus-visible) {
-                @include jkl.focus-outline;
-            }
-        }
-
-        &:has(:focus-visible) {
-            .jkl-select__button,
-            .jkl-select__search-input {
-                @include jkl.focus-outline;
-            }
-        }
-    }
-
-    &__button {
-        padding: var(--jkl-select-button-padding);
-    }
-
-    & select.jkl-select__button {
-        padding: var(--jkl-select-native-padding);
-    }
-
-    &__arrow {
-        pointer-events: none;
-        position: absolute;
-        right: var(--jkl-select-arrow-right);
-        top: 50%;
-        color: var(--jkl-color-text-default);
-
-        transform: translateY(-50%);
-        transition-property: transform, color;
-
-        @include jkl.motion;
-        @include jkl.forced-colors-svg-fallback(
-            $stroke: CanvasText,
-            $fill: CanvasText
-        );
-
-        .jkl-select:has([aria-invalid="true"]) & {
-            color: var(--jkl-color-text-on-alert);
-        }
-    }
-
-    &__options-menu {
-        position: absolute;
-        left: jkl.rem(-1px);
-        right: jkl.rem(-1px);
-        top: 100%;
-        z-index: jkl.$z-index--dropdown;
-
-        background-color: var(--jkl-color-background-container-high);
-        border: jkl.rem(2px) solid var(--jkl-color-border-input-focus);
-        border-top: none;
-        border-radius: 0 0 jkl.rem(3px) jkl.rem(3px);
-        box-sizing: border-box;
-
-        overflow-y: auto;
-        // Sett makshøyde på listen til høyden av (maxShownOptions + 0.5) ganger høyden på ett enlinjes valg
-        max-height: calc(
-            calc(var(--jkl-select-max-shown-options, 5) + 0.5) *
-                var(--jkl-select-input-height)
-        );
-
-        transition-property: height;
-
-        @include jkl.motion;
-    }
-
-    &__option-wrapper {
-        margin: 0;
-        padding: 0;
-
-        list-style-type: none;
-        -webkit-overflow-scrolling: touch;
-    }
-
-    &__option {
-        color: unset;
-        border: 0; // removes native styling
-        width: 100%;
-        background-color: inherit;
-        min-height: var(--jkl-select-input-height);
-        text-align: left;
-        transition-property: color, background-color;
-        position: relative;
-        padding: var(--jkl-select-option-padding);
-        cursor: pointer;
-
-        @include jkl.motion;
-        @include jkl.use-font-variables("jkl-select");
-
-        /* For å unngå "dobbel" markering skrur vi av markering på hover i React-
-        komponenten med data-focus="controlled". Uten dette satt vil valgene
-        markeres ved hover som normalt. */
-        &:focus,
-        :not([data-focus="controlled"]) > &:hover {
-            color: var(--jkl-color-text-default);
-            background-color: var(--jkl-color-background-interactive-hover);
-        }
-
-        &-description {
-            color: var(--jkl-color-text-subdued);
-            display: block;
-            width: 100%;
-
-            @include jkl.text-style("small");
-        }
-    }
-
-    /* --------
-       VARIANTS
-       -------- */
-
-    &--inline {
-        display: inline-block;
-        vertical-align: top;
-    }
-
-    &--open {
-        .jkl-select__search-input,
-        .jkl-select__button {
-            border-bottom-left-radius: 0;
-            border-bottom-right-radius: 0;
-            border-color: var(--jkl-color-border-input-focus);
-            background-color: var(--jkl-color-background-container-high);
-            box-shadow: 0 0 0 jkl.rem(1px) var(--jkl-color-border-input-focus);
-
-            &:hover ~ .jkl-select__arrow {
-                transform: translateY(calc(-50% + #{jkl.rem(-3px)}));
-            }
-        }
-    }
-
-    &--invalid {
-        .jkl-select__search-input,
-        .jkl-select__button {
-            background-color: var(--jkl-color-background-alert-error);
-            color: var(--jkl-color-text-on-alert-subdued);
-
-            &--active-value {
-                color: revert;
-            }
-        }
-    }
-
-    @include jkl.forced-colors-mode {
-        // Vi er en button (hvis ikke native) og får ButtonText, men vi later som vi er en select, og den har CanvasText
-        & .jkl-select__button,
-        & .jkl-select__search-input {
-            color: CanvasText;
-            border: 2px solid ButtonText;
-            background-color: Canvas;
-            outline: revert;
-
-            &:hover {
-                border-color: Highlight;
-            }
-        }
-
-        & .jkl-select__option {
-            color: CanvasText;
-
-            border-top: 1px solid Canvas;
-            border-bottom: 1px solid Canvas;
-
-            &:hover,
-            &:focus {
-                border-top: 1px solid SelectedItem;
-                border-bottom: 1px solid SelectedItem;
-
-                @include jkl.no-grow-bold;
-            }
-        }
-    }
-}

package/styles/components/summary-table/_index.scss

@@ -1 +0,0 @@
-@forward "summary-table";

package/styles/components/summary-table/development/summary-table-example.scss

@@ -1,10 +0,0 @@
-@use "../../core/jkl";
-
-.summary-table-example {
-    max-width: 500px;
-    width: 100%;
-
-    &__custom-row {
-        color: var(--jkl-color-text-subdued);
-    }
-}

package/styles/components/summary-table/summary-table.scss

@@ -1,49 +0,0 @@
-@charset "UTF-8";
-@use "../../core/jkl";
-
-@layer jokul.components {
-    .jkl-summary-table {
-        display: flex;
-        flex-direction: column;
-        overflow-wrap: anywhere;
-        width: 100%;
-
-        tr {
-            display: flex;
-            justify-content: space-between;
-            padding-bottom: jkl.$spacing-8;
-        }
-
-        th,
-        td {
-            flex-basis: 50%;
-            padding-right: jkl.$spacing-16;
-
-            &:first-child {
-                text-align: left;
-            }
-
-            &:last-child {
-                text-align: right;
-                padding-right: 0;
-            }
-        }
-
-        & > tbody {
-            th {
-                font-weight: jkl.$typography-weight-normal;
-            }
-        }
-
-        & > tfoot {
-            border-top: jkl.rem(1px) solid var(--jkl-color-border-separator-strong);
-            border-bottom: jkl.rem(1px) solid var(--jkl-color-border-separator-strong);
-            padding-top: jkl.$spacing-8;
-
-            th,
-            td {
-                font-weight: jkl.$typography-weight-bold;
-            }
-        }
-    }
-}

package/styles/components/system-message/_index.scss

@@ -1,2 +0,0 @@
-@forward "system-message";
-@use "../icon";

package/styles/components/system-message/system-message.scss

@@ -1,177 +0,0 @@
-@charset "UTF-8";
-@use "sass:string";
-@use "../../core/jkl";
-@use "../../core/jkl/colors";
-
-$_dismiss-animation-name: jkl-dismiss-#{string.unique-id()};
-$_dismiss-animation-duration: jkl.timing("lazy");
-
-@include jkl.comfortable-density-variables {
-    --jkl-system-message-icon-height: #{jkl.rem(24px)};
-    --jkl-system-message-icon-padding: #{jkl.rem(3px)} 0 0 0;
-    --jkl-system-message-content-padding: #{jkl.$spacing-24};
-    --jkl-system-message-dismiss-button-size: #{jkl.rem(44px)};
-    --jkl-system-message-dismiss-button-margin: -#{jkl.rem(6.5px)} -#{jkl.rem(
- 18px)
-}
-
--#{jkl.rem(6.5px)} auto;
---jkl-system-message-message-margin: 0 #{jkl.$spacing-16};
-
-@include jkl.declare-font-variables("jkl-system-message-message", "body");
-}
-
-@include jkl.compact-density-variables {
-    --jkl-system-message-icon-height: #{jkl.rem(20px)};
-    --jkl-system-message-icon-padding: #{jkl.rem(1px)} 0 0 0;
-    --jkl-system-message-content-padding: #{jkl.$spacing-8};
-    --jkl-system-message-dismiss-button-size: #{jkl.rem(32px)};
-    --jkl-system-message-dismiss-button-margin: -#{jkl.rem(3px)} -#{jkl.rem(
- 6px)
-}
-
--#{jkl.rem(4.5px)} auto;
---jkl-system-message-message-margin: 0 #{jkl.$spacing-12};
-
-@include jkl.declare-font-variables("jkl-system-message-message", "small");
-}
-
-.jkl-system-message {
-    --background-color: var(--jkl-color-background-alert-neutral);
-    --text-color: var(--jkl-color-text-on-alert);
-
-    width: 100%;
-    background-color: var(--background-color);
-    color: var(--text-color);
-    transition-behavior: allow-discrete;
-    box-sizing: border-box;
-
-    &__content {
-        box-sizing: border-box;
-        padding: var(--jkl-system-message-content-padding);
-        display: grid;
-        grid-template-columns: min-content 1fr min-content;
-        align-items: flex-start;
-        width: 100%;
-        margin: 0 auto;
-    }
-
-    &__icon {
-        height: var(--jkl-system-message-icon-height);
-        margin: var(--jkl-system-message-icon-padding);
-        flex-shrink: 0;
-
-        @include jkl.forced-colors-svg-fallback($stroke: CanvasText);
-    }
-
-    &__message {
-        @include jkl.use-font-variables("jkl-system-message-message");
-        margin: var(--jkl-system-message-message-margin);
-    }
-
-    &__dismiss-button {
-        background-color: transparent;
-        padding: 0;
-        cursor: pointer;
-        display: grid;
-        place-content: center;
-        position: relative;
-        flex-shrink: 0;
-        margin-top: jkl.rem(3px); // visual alignment with text
-        color: inherit;
-
-        // Sørg for å ha en stor nok touch target.
-        &::after {
-            content: "";
-            position: absolute;
-            display: block;
-            width: var(--jkl-system-message-dismiss-button-size);
-            height: var(--jkl-system-message-dismiss-button-size);
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-        }
-
-        @include jkl.forced-colors-svg-fallback($stroke: ButtonText);
-
-        @include jkl.forced-colors-mode {
-            background-color: ButtonFace;
-        }
-
-        @include jkl.reset-outline;
-
-        &:hover {
-            color: var(--jkl-color-text-interactive-hover);
-
-            @include jkl.forced-colors-svg-fallback($stroke: ButtonText);
-        }
-
-        &:focus-visible {
-            @include jkl.focus-outline;
-
-            @include jkl.forced-colors-mode {
-                outline: 2px solid ButtonText;
-                outline-offset: 2px;
-            }
-        }
-    }
-
-    &__message,
-    &__message:last-child {
-        margin-bottom: 0;
-    }
-
-    &--dismissed {
-        animation: $_dismiss-animation-name jkl.timing("lazy") forwards;
-        transition: block jkl.timing("lazy") jkl.timing("lazy");
-    }
-
-    &--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;
-        }
-    }
-}
-
-@keyframes #{$_dismiss-animation-name} {
-    from {
-        opacity: 1;
-        transform: translateY(0);
-        filter: saturate(1);
-        display: block;
-    }
-
-    to {
-        opacity: 0;
-        transform: translateY(-10%);
-        filter: saturate(0.7);
-        display: none;
-    }
-}

package/styles/components/table/_index.scss

@@ -1,6 +0,0 @@
-@forward "table";
-@use "../expander" as expander;
-@use "../icon" as icon;
-
-// TablePagination avhenger av en del stiler, men komponenten
-// kan heller skilles ut til en egen "pakke"

package/styles/components/table/_table-caption.scss

@@ -1,7 +0,0 @@
-@use "../../core/jkl";
-
-.jkl-table-caption {
-    &--sr-only {
-        @include jkl.screenreader-only;
-    }
-}