@fremtind/jokul 0.12.1 → 0.14.0

package/src/components/table/styles/_table-cell.scss

@@ -0,0 +1,83 @@
+@use "../../../core/jkl";
+
+@include jkl.comfortable-density-variables {
+    @include jkl.declare-font-variables("jkl-table-cell", "body");
+
+    --jkl-table-cell-padding: #{jkl.rem(11px)} #{jkl.$spacing-xs};
+}
+
+@include jkl.compact-density-variables {
+    @include jkl.declare-font-variables("jkl-table-cell", "small");
+
+    --jkl-table-cell-padding: #{jkl.rem(5px)} #{jkl.$spacing-xs};
+}
+
+.jkl-table-cell {
+    @include jkl.use-font-variables("jkl-table-cell");
+    padding: var(--jkl-table-cell-padding);
+    position: relative;
+    text-align: left;
+    vertical-align: top;
+
+    &--vertical-align-center {
+        vertical-align: baseline;
+    }
+
+    &--align-center {
+        text-align: center;
+    }
+
+    &--align-right {
+        text-align: right;
+    }
+
+    .jkl-table--collapse-to-list &--align-right {
+        @include jkl.small-device {
+            text-align: unset;
+        }
+    }
+
+    .jkl-table--collapse-to-list[data-collapse] &--align-right {
+        text-align: unset;
+    }
+
+    @mixin _responsive-table-header {
+        content: attr(data-th);
+        display: block;
+        @include jkl.text-style("heading-5");
+    }
+
+    // only show inline text if it's not an ExpandController with text inside. if it doesn't
+    // have text inside. the text is moved inside the ExpandButton
+    .jkl-table--collapse-to-list &[data-th]:not(.jkl-table-cell--expand-without-text)::before {
+        display: none;
+
+        @include jkl.small-device {
+            @include _responsive-table-header;
+        }
+    }
+
+    .jkl-table--collapse-to-list[data-collapse] &:not(.jkl-table-cell--expand-without-text)::before {
+        @include _responsive-table-header;
+    }
+
+    .jkl-table--collapse-to-list:not([data-collapse]) &--expand-without-text .jkl-expand-button__text {
+        @include jkl.from-medium-device {
+            display: none;
+        }
+    }
+
+    .jkl-table-row-expand-button {
+        display: flex;
+        align-items: center;
+    }
+}
+
+.jkl-table-row--expandable.jkl-table-row--clickable:not(.jkl-expandable-table-row--clickable-external) {
+    &:hover,
+    html:not([data-mousenavigation]):not([data-touchnavigation]) &:focus {
+        .jkl-table-row-expand-button {
+            color: var(--expand-button-focus-color);
+        }
+    }
+}

package/src/components/table/styles/_table-head.scss

@@ -0,0 +1,35 @@
+@use "../../../core/jkl";
+
+@include jkl.light-mode-variables {
+    --jkl-table-head-sticky-color: var(--jkl-background-color);
+}
+
+@include jkl.dark-mode-variables {
+    --jkl-table-head-sticky-color: var(--jkl-background-color);
+}
+
+$_border-size: jkl.rem(-1px);
+
+.jkl-table-head {
+    &--sr-only {
+        @include jkl.screenreader-only;
+    }
+
+    &--sticky {
+        & > .jkl-table-row {
+            position: sticky;
+            top: 0;
+            z-index: 1;
+            background-color: var(--jkl-table-head-sticky-color);
+
+            border-bottom: none;
+
+            box-shadow: inset 0 0 0 #000, inset 0 $_border-size 0 var(--jkl-table-row-hover-border-color);
+            background-clip: padding-box;
+
+            // legg til litt (nesten-cirka 16px) over headingen
+            vertical-align: bottom;
+            height: 2.3em;
+        }
+    }
+}

package/src/components/table/styles/_table-header.scss

@@ -0,0 +1,76 @@
+@use "../../../core/jkl";
+
+@include jkl.comfortable-density-variables {
+    @include jkl.declare-font-variables("jkl-table-header", "body");
+
+    --jkl-table-header-padding: 0 #{jkl.$spacing-xs} #{jkl.rem(7px)} #{jkl.$spacing-xs};
+}
+
+@include jkl.compact-density-variables {
+    @include jkl.declare-font-variables("jkl-table-header", "small");
+
+    --jkl-table-header-padding: 0 #{jkl.$spacing-xs} #{jkl.rem(3px)} #{jkl.$spacing-xs};
+}
+
+.jkl-table-header {
+    @include jkl.use-font-variables("jkl-table-header");
+
+    padding: var(--jkl-table-header-padding);
+    text-align: left;
+    white-space: nowrap;
+
+    &--align-center {
+        text-align: center;
+    }
+
+    &--align-right {
+        text-align: right;
+    }
+
+    &--bold {
+        font-weight: jkl.$typography-weight-bold;
+    }
+
+    &--sortable {
+        cursor: pointer;
+        user-select: none;
+    }
+
+    &--sr-only {
+        @include jkl.screenreader-only;
+    }
+
+    &__arrows {
+        @include jkl.motion("entrance", "energetic");
+        transition-property: opacity;
+        display: inline-block;
+        margin-bottom: jkl.$spacing-2;
+        margin-left: jkl.$spacing-4;
+        vertical-align: middle;
+        opacity: 0;
+
+        // Via jkl-icon--inherit. Duplisert her for å få en konstant bredde på
+        // kolonnen så vi unngår layout shifts når man bytter kolonnen det sorteres
+        // på. Wrapperen er nødvendig for at vi skal unngå at pila animeres i det
+        // man skifter kolonne (den må være u-rendret fram til kolonnen blir sortert).
+        width: calc(1em / 20 * 24);
+
+        &--active {
+            opacity: 1;
+        }
+    }
+
+    @mixin _responsive-table-header {
+        display: none;
+    }
+
+    .jkl-table--collapse-to-list & {
+        @include jkl.small-device {
+            @include _responsive-table-header;
+        }
+    }
+
+    .jkl-table--collapse-to-list[data-collapse] & {
+        @include _responsive-table-header;
+    }
+}

package/src/components/table/styles/_table-pagination.scss

@@ -0,0 +1,121 @@
+@use "../../../core/jkl";
+
+.jkl-table-pagination {
+    display: flex;
+    gap: jkl.$spacing-16;
+    flex-direction: column;
+    width: 100%;
+
+    @include jkl.from-medium-device {
+        flex-direction: row;
+        gap: jkl.$spacing-12;
+        justify-content: space-between;
+    }
+
+    &__left {
+        flex-shrink: 1;
+    }
+
+    &__right {
+        flex-grow: 1;
+        display: flex;
+        flex-wrap: nowrap;
+    }
+
+    &__picker {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        white-space: nowrap;
+
+        &--page {
+            padding-inline-end: jkl.$spacing-24;
+            width: min(12rem, 100%);
+
+            @include jkl.from-medium-device {
+                justify-content: flex-end;
+            }
+        }
+
+        &--page &-input {
+            width: min(4rem, 100%);
+        }
+    }
+
+    &__picker-label {
+        margin-inline-end: jkl.$spacing-8;
+    }
+
+    &__nav {
+        flex-grow: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        flex-wrap: wrap;
+        gap: jkl.$spacing-16;
+
+        @include jkl.from-medium-device {
+            flex-direction: row;
+            align-items: center;
+            justify-content: flex-end;
+        }
+
+        ul {
+            list-style: none;
+            display: flex;
+            flex-wrap: nowrap;
+            margin: 0;
+            padding: 0;
+        }
+
+        li {
+            margin: 0;
+            padding: 0;
+        }
+    }
+
+    $_button-size: jkl.rem(32px);
+
+    &__previous,
+    &__next,
+    &__page {
+        background: transparent;
+        color: var(--jkl-link-color);
+        border-radius: jkl.rem(3px);
+        cursor: pointer;
+        user-select: none;
+        padding: 0;
+        height: $_button-size;
+        min-width: $_button-size;
+
+        @include jkl.reset-outline;
+
+        &:hover:not(:focus) {
+            color: var(--jkl-link-hover-color);
+        }
+
+        html:not([data-mousenavigation]) &:focus {
+            outline: jkl.rem(2px) solid var(--jkl-link-active-color);
+            // outline-offset: jkl.rem(2px);
+        }
+    }
+
+    &__previous,
+    &__next {
+        padding-top: jkl.rem(2px);
+    }
+
+    &__ellipsis {
+        text-align: center;
+        vertical-align: bottom;
+        display: inline-block;
+        height: $_button-size;
+        width: $_button-size;
+    }
+
+    &__page {
+        &--active {
+            @include jkl.no-grow-bold;
+        }
+    }
+}

package/src/components/table/styles/_table-row.scss

@@ -0,0 +1,183 @@
+@use "../../../core/jkl";
+
+$_border-size: jkl.rem(1px);
+$_focus-ring-width: jkl.rem(2px);
+
+@include jkl.light-mode-variables {
+    --jkl-table-row-border-color: #{jkl.$color-svaberg};
+    --jkl-table-row-border-none-color: #{rgba(jkl.$color-svaberg, 0)};
+    --jkl-table-row-hover-border-color: #{jkl.$color-granitt};
+    --jkl-table-row-highlight-color: #{jkl.$color-dis};
+}
+
+@include jkl.dark-mode-variables {
+    --jkl-table-row-border-color: #{jkl.$color-stein};
+    --jkl-table-row-border-none-color: #{rgba(jkl.$color-stein, 0)};
+    --jkl-table-row-hover-border-color: #{jkl.$color-snohvit};
+    --jkl-table-row-highlight-color: #{jkl.$color-fjellgra};
+}
+
+.jkl-table-row {
+    border-bottom: solid $_border-size var(--jkl-table-row-border-color);
+
+    .jkl-table-head > & {
+        border-bottom: solid $_border-size var(--jkl-table-row-hover-border-color);
+    }
+
+    /* stylelint-disable-next-line selector-not-notation */
+    :not(.jkl-table-head, .jkl-table-foot) > & {
+        border-top: solid $_border-size transparent; // Unngår vertikal shift ved hover i collapsed mobilvisning
+
+        &:hover {
+            /*
+            * Det er viktig at hover her har double border style i motsetning til default,
+            * ellers vinner ikke border-top "spesifisitetskampen" i border-collapse.
+            * Under testing i Chrome, Firefox og Safari på macOS ble border fremdeles
+            * rendret som solid. ¯\_(ツ)_/¯
+            *
+            * https://stackoverflow.com/a/36239151
+            * https://stackoverflow.com/a/4096554
+            * https://www.w3.org/TR/CSS2/tables.html#border-conflict-resolution
+            */
+            border-top: double $_border-size var(--jkl-table-row-hover-border-color);
+            border-bottom: double $_border-size var(--jkl-table-row-hover-border-color);
+        }
+    }
+
+    @mixin _responsive-table-head {
+        border-bottom: solid $_border-size var(--jkl-table-row-border-color);
+    }
+
+    .jkl-table--collapse-to-list > .jkl-table-head > & {
+        @include jkl.small-device {
+            @include _responsive-table-head;
+        }
+    }
+
+    .jkl-table--collapse-to-list[data-collapse] > .jkl-table-head > & {
+        @include _responsive-table-head;
+    }
+
+    @mixin _responsive-table-row {
+        padding-top: jkl.$spacing-s;
+        padding-bottom: jkl.$spacing-s;
+
+        &:first-of-type {
+            border-top: solid $_border-size var(--jkl-table-row-border-color);
+        }
+    }
+
+    .jkl-table--collapse-to-list :not(.jkl-table-head) > & {
+        @include jkl.small-device {
+            @include _responsive-table-row;
+        }
+    }
+
+    .jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head) > & {
+        @include _responsive-table-row;
+    }
+
+    .jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head) > &.jkl-table-row--expandable {
+        transition-property: border, padding;
+        @include jkl.motion;
+
+        &.jkl-table-row--expanded {
+            border-bottom-color: var(--jkl-table-row-border-none-color);
+        }
+
+        .jkl-table-row-expand-button {
+            margin-left: auto;
+        }
+
+        &:hover + tr {
+            background-color: var(--jkl-table-row-highlight-color);
+
+            .jkl-table-row {
+                border-bottom-color: var(--jkl-table-row-hover-border-color);
+            }
+        }
+
+        /* stylelint-disable-next-line selector-max-specificity -- selector needs to nest itself to select sub tables with the same properties */
+        & + tr & {
+            transition-property: border;
+            @include jkl.motion;
+        }
+
+        & + [aria-hidden="false"] {
+            & .jkl-table-row {
+                border-top-color: var(--jkl-table-row-border-none-color);
+            }
+        }
+    }
+
+    @mixin _responsive-table-row--hover {
+        /* Tilbakestill hacken som gir riktig border når tabellen ikke har display: block; */
+        border-top: solid $_border-size var(--jkl-table-row-hover-border-color);
+        border-bottom: solid $_border-size var(--jkl-table-row-hover-border-color);
+    }
+
+    .jkl-table--collapse-to-list :not(.jkl-table-head) > &:hover {
+        @include jkl.small-device {
+            @include _responsive-table-row--hover;
+        }
+    }
+
+    .jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head) > &:hover {
+        @include _responsive-table-row--hover;
+    }
+
+    &--clickable {
+        outline: 0;
+
+        &:hover,
+        html:not([data-mousenavigation]):not([data-touchnavigation]) &:focus {
+            cursor: pointer;
+            background-color: var(--jkl-table-row-highlight-color);
+
+            border-top: double $_border-size var(--jkl-table-row-hover-border-color);
+            border-bottom: double $_border-size var(--jkl-table-row-hover-border-color);
+        }
+
+        .jkl-table--collapse-to-list :not(.jkl-table-head) > &:hover {
+            @include jkl.small-device {
+                @include _responsive-table-row--hover;
+            }
+        }
+
+        .jkl-table--collapse-to-list[data-collapse] :not(.jkl-table-head) > &:hover {
+            @include _responsive-table-row--hover;
+        }
+
+        @include jkl.forced-colors-mode {
+            outline: revert;
+            color: ButtonText;
+
+            &:hover {
+                background-color: ButtonFace;
+            }
+        }
+    }
+
+    &--clicked {
+        background-color: var(--jkl-table-row-highlight-color);
+
+        &.jkl-table-row--expandable + [aria-hidden="false"] {
+            background-color: var(--jkl-table-row-highlight-color);
+        }
+
+        @include jkl.forced-colors-mode {
+            background-color: ButtonFace;
+        }
+    }
+}
+
+.jkl-expandable-table-row__expanded-row {
+    display: none;
+    @include jkl.motion("exit", "expressive");
+    transition-property: height;
+
+    &--expanded {
+        @include jkl.motion("entrance", "lazy");
+        display: block;
+    }
+}

package/src/components/tabs/styles/_index.scss

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

package/src/components/tabs/styles/tabs.css

@@ -0,0 +1,116 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 23 Sep 2024 08:51:40 GMT
+ */
+:root,
+[data-layout-density=comfortable],
+[data-density=comfortable] {
+  --jkl-tab-padding: var(--jkl-spacing-8) var(--jkl-spacing-40) var(--jkl-spacing-12) var(--jkl-spacing-2);
+  --jkl-tab-font-size: var(--jkl-body-font-size);
+  --jkl-tab-line-height: var(--jkl-body-line-height);
+  --jkl-tab-font-weight: var(--jkl-body-font-weight);
+}
+@media (width >= 0) and (max-width: 679px) {
+  :root,
+  [data-layout-density=comfortable],
+  [data-density=comfortable] {
+    --jkl-tab-padding: var(--jkl-spacing-8) var(--jkl-spacing-24) var(--jkl-spacing-12) var(--jkl-spacing-2);
+  }
+}
+
+[data-layout-density=compact],
+[data-density=compact] {
+  --jkl-tab-font-size: var(--jkl-small-font-size);
+  --jkl-tab-line-height: var(--jkl-small-line-height);
+  --jkl-tab-font-weight: var(--jkl-small-font-weight);
+  --jkl-tab-padding: var(--jkl-spacing-2) var(--jkl-spacing-32) var(--jkl-spacing-4) 0;
+}
+
+.jkl-tabs {
+  scroll-snap-type: x proximity;
+  overflow-x: scroll;
+  overflow-y: hidden;
+  scrollbar-width: none;
+}
+.jkl-tabs::-webkit-scrollbar {
+  display: none;
+}
+
+.jkl-tablist {
+  --text-color: var(--jkl-color-text-interactive);
+  --line-color: var(--jkl-color-border-separator);
+  --indicator-color: var(--jkl-color-border-separator-hover);
+  position: relative;
+  display: inline-flex;
+  flex-direction: row;
+  padding: 0;
+  margin: 0;
+  border-bottom: 1px solid var(--line-color);
+  min-width: fit-content;
+  width: 100%;
+}
+.jkl-tablist__indicator {
+  position: absolute;
+  height: 2px;
+  background-color: var(--indicator-color);
+  transition-timing-function: ease;
+  transition-duration: 400ms;
+  transition-property: left, width;
+  will-change: left, width;
+}
+@media screen and (forced-colors: active) {
+  .jkl-tablist__indicator {
+    background-color: Highlight;
+  }
+}
+@media screen and (forced-colors: active) {
+  .jkl-tablist {
+    border-color: GrayText;
+  }
+}
+
+.jkl-tab {
+  font-size: var(--jkl-tab-font-size);
+  line-height: var(--jkl-tab-line-height);
+  font-weight: var(--jkl-tab-font-weight);
+  color: var(--text-color);
+  padding: var(--jkl-tab-padding);
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+  position: relative;
+  scroll-margin-inline-start: var(--jkl-spacing-16);
+  scroll-snap-align: start;
+  text-decoration: none;
+  white-space: nowrap;
+  outline: 0;
+  border-style: none;
+  outline-style: none;
+}
+.jkl-tab:active, .jkl-tab:hover, .jkl-tab:focus {
+  outline: 0;
+  outline-style: none;
+}
+@media screen and (forced-colors: active) {
+  .jkl-tab {
+    outline: revert;
+    border-style: revert;
+    outline-style: revert;
+  }
+  .jkl-tab:active, .jkl-tab:hover, .jkl-tab:focus {
+    outline: revert;
+    outline-style: revert;
+  }
+}
+.jkl-tab:hover {
+  --text-color: var(--jkl-color-text-interactive-hover);
+}
+.jkl-tab:focus-visible {
+  outline: 2px solid var(--jkl-color-border-action);
+  outline-offset: -2px;
+}
+.jkl-tab[aria-selected=true] {
+  --jkl-icon-weight: 500;
+  font-weight: 700;
+  letter-spacing: -0.014em;
+}

package/src/components/tabs/styles/tabs.min.css

@@ -0,0 +1 @@
+:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-tab-padding:var(--jkl-spacing-8) var(--jkl-spacing-40) var(--jkl-spacing-12) var(--jkl-spacing-2);--jkl-tab-font-size:var(--jkl-body-font-size);--jkl-tab-line-height:var(--jkl-body-line-height);--jkl-tab-font-weight:var(--jkl-body-font-weight)}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-tab-padding:var(--jkl-spacing-8) var(--jkl-spacing-24) var(--jkl-spacing-12) var(--jkl-spacing-2)}}[data-density=compact],[data-layout-density=compact]{--jkl-tab-font-size:var(--jkl-small-font-size);--jkl-tab-line-height:var(--jkl-small-line-height);--jkl-tab-font-weight:var(--jkl-small-font-weight);--jkl-tab-padding:var(--jkl-spacing-2) var(--jkl-spacing-32) var(--jkl-spacing-4) 0}.jkl-tabs{overflow-x:scroll;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:none}.jkl-tabs::-webkit-scrollbar{display:none}.jkl-tablist{--text-color:var(--jkl-color-text-interactive);--line-color:var(--jkl-color-border-separator);--indicator-color:var(--jkl-color-border-separator-hover);border-bottom:1px solid var(--line-color);display:inline-flex;flex-direction:row;margin:0;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;padding:0;position:relative;width:100%}.jkl-tablist__indicator{background-color:var(--indicator-color);height:2px;position:absolute;transition-duration:.4s;transition-property:left,width;transition-timing-function:ease;will-change:left,width}@media screen and (forced-colors:active){.jkl-tablist__indicator{background-color:Highlight}.jkl-tablist{border-color:GrayText}}.jkl-tab{background-color:initial;border:none;color:var(--text-color);cursor:pointer;font-size:var(--jkl-tab-font-size);font-weight:var(--jkl-tab-font-weight);line-height:var(--jkl-tab-line-height);padding:var(--jkl-tab-padding);position:relative;scroll-margin-inline-start:var(--jkl-spacing-16);scroll-snap-align:start;text-decoration:none;white-space:nowrap}.jkl-tab,.jkl-tab:active,.jkl-tab:focus,.jkl-tab:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-tab{border-style:revert}.jkl-tab,.jkl-tab:active,.jkl-tab:focus,.jkl-tab:hover{outline:revert;outline-style:revert}}.jkl-tab:hover{--text-color:var(--jkl-color-text-interactive-hover)}.jkl-tab:focus-visible{outline:2px solid var(--jkl-color-border-action);outline-offset:-2px}.jkl-tab[aria-selected=true]{--jkl-icon-weight:500;font-weight:700;letter-spacing:-.014em}