@fremtind/jokul 3.6.0 → 3.7.0

package/styles/components/link-list/link-list.scss

@@ -0,0 +1,94 @@
+@use "../../core/jkl";
+
+@include jkl.comfortable-density-variables {
+    --jkl-link-list-padding: var(--jkl-unit-10);
+}
+
+@include jkl.compact-density-variables {
+    --jkl-link-list-padding: var(--jkl-unit-05);
+}
+
+.jkl-link-list {
+    --border-color: var(--jkl-color-border-separator);
+
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    padding: 0;
+    margin: 0;
+    border-bottom: jkl.rem(1px) solid var(--border-color);
+    height: min-content;
+    counter-reset: link-list;
+
+    @media (hover: hover) {
+        &:has(:focus-visible),
+        &:has(:hover) {
+            .jkl-link-list-link:not(:hover):not(:focus-visible) {
+                --text-color: var(--jkl-color-border-separator);
+            }
+        }
+    }
+}
+
+.jkl-link-list-item {
+    display: flex;
+    counter-increment: link-list;
+}
+
+.jkl-link-list-link {
+    --text-color: var(--jkl-color-text-default);
+    --icon-background: transparent;
+
+    display: flex;
+    justify-content: space-between;
+    align-items: first baseline;
+    gap: var(--jkl-unit-20);
+    padding: var(--jkl-link-list-padding) 0;
+    border-top: jkl.rem(1px) solid var(--border-color);
+    width: 100%;
+    text-decoration: none;
+    color: var(--text-color);
+    cursor: pointer;
+
+    @include jkl.motion("standard", "productive");
+    transition-property: color, border-color;
+
+    &:hover,
+    &:focus-visible {
+        --icon-background: var(--jkl-color-background-interactive-selected);
+    }
+
+    &:focus-visible {
+        --border-color: transparent;
+        z-index: 1;
+
+        @include jkl.focus-outline($offset: 0);
+    }
+
+    &__arrow {
+        border-radius: 100%;
+        background-color: var(--icon-background);
+        // Justér ikonet i forhold til tekstens baseline
+        translate: 0 17%;
+
+        @include jkl.motion("standard", "productive");
+        transition-property: color, background-color;
+    }
+
+    .jkl-link-list--ordered & {
+        justify-content: flex-start;
+        align-items: unset;
+
+        &__arrow {
+            display: none;
+        }
+
+        &::before {
+            content: counter(link-list, decimal-leading-zero);
+
+            @include jkl.use-font-family("Fremtind Grotesk Mono");
+            color: var(--text-color);
+            font-size: var(--jkl-small-font-size);
+        }
+    }
+}

package/styles/components/list/_index.scss

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

package/styles/components/list/list.scss

@@ -0,0 +1,98 @@
+@charset "UTF-8";
+@use "../../core/jkl";
+
+/*
+ * NOTE: These icon also exists as a copy in the jkl-icons-react package.
+ *       If you're here to change them, consider changing them there as well, or
+ *       finding a technical solution to sharing the SVG markup
+ */
+@include jkl.light-mode-variables {
+    --jkl-list-marker-cross: url("data:image/svg+xml,%3Csvg width='19' height='19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9.5' cy='9.5' r='8.75' fill='%23F6B3B3'/%3E%3Cpath fill='%231B1917' d='M5.54 12.68l7.14-7.1.84.85-7.13 7.09z'/%3E%3Cpath fill='%231B1917' d='M12.67 13.47l-7.13-7.1.85-.83 7.13 7.1z'/%3E%3C/svg%3E%0A");
+    --jkl-list-marker-check: url("data:image/svg+xml,%3Csvg width='19' height='19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9.5' cy='9.5' r='9.5' fill='%23ACD3B5'/%3E%3Cpath d='M4.75 11l2.35 2.36 7.84-7.84' stroke='%231B1917' stroke-width='1.5'/%3E%3C/svg%3E%0A");
+}
+
+@include jkl.dark-mode-variables {
+    --jkl-list-marker-cross: url("data:image/svg+xml,%3Csvg width='19' height='19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9.5' cy='9.5' r='8.75' fill='%23DE9E9E'/%3E%3Cpath fill='%231B1917' d='M5.54 12.68l7.14-7.1.84.85-7.13 7.09z'/%3E%3Cpath fill='%231B1917' d='M12.67 13.47l-7.13-7.1.85-.83 7.13 7.1z'/%3E%3C/svg%3E%0A");
+    --jkl-list-marker-check: url("data:image/svg+xml,%3Csvg width='19' height='19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9.5' cy='9.5' r='9.5' fill='%2394B79B'/%3E%3Cpath d='M4.75 11l2.35 2.36 7.84-7.84' stroke='%231B1917' stroke-width='1.5'/%3E%3C/svg%3E%0A");
+}
+
+@layer jokul.components {
+    .jkl-list {
+        --list-text-color: var(--jkl-color-text-default);
+
+        list-style-type: "\2022";
+        padding-left: jkl.$unit-20;
+        margin: 0;
+
+        & > .jkl-list__item {
+            & > .jkl-list {
+                margin: jkl.$unit-10 0;
+            }
+        }
+
+        &:has(.jkl-list__item--iconed) {
+            padding: 0;
+        }
+
+        &--ordered {
+            padding-left: revert;
+
+            & > .jkl-list__item {
+                padding-left: revert;
+                list-style: decimal;
+            }
+
+            & & > .jkl-list__item {
+                list-style: lower-alpha;
+            }
+        }
+
+        &__item {
+            color: var(--jkl-list-text-color);
+            padding-left: jkl.$unit-15;
+
+            &::marker {
+                color: var(--jkl-list-text-color);
+            }
+
+            &--iconed {
+                display: flex;
+                list-style: none;
+                position: relative;
+                padding-left: 0;
+
+                &::before {
+                    text-indent: -9999px;
+                    background-size: contain;
+                    width: 1em;
+                    height: 1em;
+                    flex-shrink: 0;
+                    margin-right: 0.5em;
+                    margin-top: 0.2em; // Vertical offset (using em for font-size scaling) to align icon properly with the first line.
+                }
+            }
+
+            &--check::before {
+                @include jkl.decorative($content: "\2713");
+                background-image: var(--jkl-list-marker-check);
+            }
+
+            &--cross::before {
+                @include jkl.decorative($content: "\274C");
+                background-image: var(--jkl-list-marker-cross);
+            }
+        }
+
+        @include jkl.forced-colors-mode {
+            & .jkl-list__item {
+                &--check::before {
+                    background-image: _check(CanvasText, Canvas);
+                }
+
+                &--cross::before {
+                    background-image: _cross(CanvasText, Canvas);
+                }
+            }
+        }
+    }
+}

package/styles/components/loader/_index.scss

@@ -0,0 +1,2 @@
+@forward "loader";
+@forward "skeleton-loader";

package/styles/components/loader/development/styles.scss

@@ -0,0 +1,11 @@
+.jkl-skeleton-loader-example,
+.jkl-loader-example {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 100%;
+
+    > *:not(:last-child) {
+        margin-bottom: 2rem;
+    }
+}

package/styles/components/loader/loader.css

@@ -17,15 +17,15 @@
     animation: 2500ms linear infinite;
   }
   .jkl-loader__dot--left {
-    animation-name: jkl-loader-left-spin-usj2dq5;
+    animation-name: jkl-loader-left-spin-ubl6d1x;
     margin-right: 1.71em;
   }
   .jkl-loader__dot--middle {
-    animation-name: jkl-loader-middle-spin-usj2dr2;
+    animation-name: jkl-loader-middle-spin-ubl6d2q;
     margin-right: 1.9em;
   }
   .jkl-loader__dot--right {
-    animation-name: jkl-loader-right-spin-usj2drv;
+    animation-name: jkl-loader-right-spin-ubl6d2u;
   }
   @media screen and (forced-colors: active) {
     .jkl-loader__dot {
@@ -52,7 +52,7 @@
   .jkl-loader--small > .jkl-loader__dot--middle {
     margin-right: 0.3em;
   }
-  @keyframes jkl-loader-left-spin-usj2dq5 {
+  @keyframes jkl-loader-left-spin-ubl6d1x {
     0% {
       transform: rotate(0) scale(0);
     }
@@ -66,7 +66,7 @@
       transform: rotate(180deg) scale(0);
     }
   }
-  @keyframes jkl-loader-middle-spin-usj2dr2 {
+  @keyframes jkl-loader-middle-spin-ubl6d2q {
     0% {
       transform: rotate(20deg) scale(0);
     }
@@ -83,7 +83,7 @@
       transform: rotate(200deg) scale(0);
     }
   }
-  @keyframes jkl-loader-right-spin-usj2drv {
+  @keyframes jkl-loader-right-spin-ubl6d2u {
     0% {
       transform: rotate(40deg) scale(0);
     }

package/styles/components/loader/loader.min.css

@@ -1 +1 @@
-@layer jokul.components{.jkl-loader{display:flex}.jkl-loader--inline{display:inline-flex}.jkl-loader__dot{animation:2.5s linear infinite;background-color:currentColor;display:block;height:.9em;transform-origin:center;width:.9em}.jkl-loader__dot--left{animation-name:jkl-loader-left-spin-usj2dq5;margin-right:1.71em}.jkl-loader__dot--middle{animation-name:jkl-loader-middle-spin-usj2dr2;margin-right:1.9em}.jkl-loader__dot--right{animation-name:jkl-loader-right-spin-usj2drv}@media screen and (forced-colors:active){.jkl-loader__dot{background-color:CanvasText}}.jkl-button .jkl-loader>.jkl-loader__dot,.jkl-loader--medium>.jkl-loader__dot{height:.35em;width:.35em}.jkl-button .jkl-loader>.jkl-loader__dot--left,.jkl-loader--medium>.jkl-loader__dot--left{margin-right:.585em}.jkl-button .jkl-loader>.jkl-loader__dot--middle,.jkl-loader--medium>.jkl-loader__dot--middle{margin-right:.65em}.jkl-loader--small>.jkl-loader__dot{height:.25em;width:.25em}.jkl-loader--small>.jkl-loader__dot--left{margin-right:.27em}.jkl-loader--small>.jkl-loader__dot--middle{margin-right:.3em}@keyframes jkl-loader-left-spin-usj2dq5{0%{transform:rotate(0) scale(0)}30%{transform:rotate(90deg) scale(1)}70%{transform:rotate(180deg) scale(0)}to{transform:rotate(180deg) scale(0)}}@keyframes jkl-loader-middle-spin-usj2dr2{0%{transform:rotate(20deg) scale(0)}10%{transform:rotate(20deg) scale(0)}40%{transform:rotate(110deg) scale(1.4)}85%{transform:rotate(200deg) scale(0)}to{transform:rotate(200deg) scale(0)}}@keyframes jkl-loader-right-spin-usj2drv{0%{transform:rotate(40deg) scale(0)}20%{transform:rotate(40deg) scale(0)}50%{transform:rotate(130deg) scale(1)}to{transform:rotate(220deg) scale(0)}}}
+@layer jokul.components{.jkl-loader{display:flex}.jkl-loader--inline{display:inline-flex}.jkl-loader__dot{animation:2.5s linear infinite;background-color:currentColor;display:block;height:.9em;transform-origin:center;width:.9em}.jkl-loader__dot--left{animation-name:jkl-loader-left-spin-ubl6d1x;margin-right:1.71em}.jkl-loader__dot--middle{animation-name:jkl-loader-middle-spin-ubl6d2q;margin-right:1.9em}.jkl-loader__dot--right{animation-name:jkl-loader-right-spin-ubl6d2u}@media screen and (forced-colors:active){.jkl-loader__dot{background-color:CanvasText}}.jkl-button .jkl-loader>.jkl-loader__dot,.jkl-loader--medium>.jkl-loader__dot{height:.35em;width:.35em}.jkl-button .jkl-loader>.jkl-loader__dot--left,.jkl-loader--medium>.jkl-loader__dot--left{margin-right:.585em}.jkl-button .jkl-loader>.jkl-loader__dot--middle,.jkl-loader--medium>.jkl-loader__dot--middle{margin-right:.65em}.jkl-loader--small>.jkl-loader__dot{height:.25em;width:.25em}.jkl-loader--small>.jkl-loader__dot--left{margin-right:.27em}.jkl-loader--small>.jkl-loader__dot--middle{margin-right:.3em}@keyframes jkl-loader-left-spin-ubl6d1x{0%{transform:rotate(0) scale(0)}30%{transform:rotate(90deg) scale(1)}70%{transform:rotate(180deg) scale(0)}to{transform:rotate(180deg) scale(0)}}@keyframes jkl-loader-middle-spin-ubl6d2q{0%{transform:rotate(20deg) scale(0)}10%{transform:rotate(20deg) scale(0)}40%{transform:rotate(110deg) scale(1.4)}85%{transform:rotate(200deg) scale(0)}to{transform:rotate(200deg) scale(0)}}@keyframes jkl-loader-right-spin-ubl6d2u{0%{transform:rotate(40deg) scale(0)}20%{transform:rotate(40deg) scale(0)}50%{transform:rotate(130deg) scale(1)}to{transform:rotate(220deg) scale(0)}}}

package/styles/components/loader/loader.scss

@@ -0,0 +1,139 @@
+@charset "UTF-8";
+@use "sass:string";
+@use "../../core/jkl";
+
+$_loader-dot-size--large: 0.9em;
+$_loader-dot-size--medium: 0.35em;
+$_loader-dot-size--small: 0.25em;
+
+$_loader-spacing--large: 1.9em;
+$_loader-spacing--medium: 0.65em;
+$_loader-spacing--small: 0.3em;
+
+$_loader-animation-properties: 2500ms linear infinite;
+$_loader-left-animation-name: jkl-loader-left-spin-#{string.unique-id()};
+$_loader-middle-animation-name: jkl-loader-middle-spin-#{string.unique-id()};
+$_loader-right-animation-name: jkl-loader-right-spin-#{string.unique-id()};
+
+@layer jokul.components {
+    .jkl-loader {
+        display: flex;
+
+        &--inline {
+            display: inline-flex;
+        }
+
+        &__dot {
+            display: block;
+            transform-origin: center;
+            background-color: currentColor;
+            height: $_loader-dot-size--large;
+            width: $_loader-dot-size--large;
+            animation: $_loader-animation-properties;
+
+            &--left {
+                animation-name: $_loader-left-animation-name;
+                margin-right: $_loader-spacing--large
+                    * 0.9; // for visual balance
+            }
+
+            &--middle {
+                animation-name: $_loader-middle-animation-name;
+                margin-right: $_loader-spacing--large;
+            }
+
+            &--right {
+                animation-name: $_loader-right-animation-name;
+            }
+
+            @include jkl.forced-colors-mode {
+                background-color: CanvasText;
+            }
+        }
+
+        .jkl-button & > .jkl-loader__dot,
+        &--medium > .jkl-loader__dot {
+            height: $_loader-dot-size--medium;
+            width: $_loader-dot-size--medium;
+
+            &--left {
+                margin-right: $_loader-spacing--medium * 0.9;
+            }
+
+            &--middle {
+                margin-right: $_loader-spacing--medium;
+            }
+        }
+
+        &--small > .jkl-loader__dot {
+            height: $_loader-dot-size--small;
+            width: $_loader-dot-size--small;
+
+            &--left {
+                margin-right: $_loader-spacing--small * 0.9;
+            }
+
+            &--middle {
+                margin-right: $_loader-spacing--small;
+            }
+        }
+    }
+
+    @keyframes #{$_loader-left-animation-name} {
+        0% {
+            transform: rotate(0) scale(0);
+        }
+
+        30% {
+            transform: rotate(90deg) scale(1);
+        }
+
+        70% {
+            transform: rotate(180deg) scale(0);
+        }
+
+        100% {
+            transform: rotate(180deg) scale(0);
+        }
+    }
+
+    @keyframes #{$_loader-middle-animation-name} {
+        0% {
+            transform: rotate(20deg) scale(0);
+        }
+
+        10% {
+            transform: rotate(20deg) scale(0);
+        }
+
+        40% {
+            transform: rotate(110deg) scale(1.4);
+        }
+
+        85% {
+            transform: rotate(200deg) scale(0);
+        }
+
+        100% {
+            transform: rotate(200deg) scale(0);
+        }
+    }
+
+    @keyframes #{$_loader-right-animation-name} {
+        0% {
+            transform: rotate(40deg) scale(0);
+        }
+
+        20% {
+            transform: rotate(40deg) scale(0);
+        }
+
+        50% {
+            transform: rotate(130deg) scale(1);
+        }
+
+        100% {
+            transform: rotate(220deg) scale(0);
+        }
+    }
+}

package/styles/components/loader/skeleton-loader.css

@@ -34,7 +34,7 @@
   @media screen and (forced-colors: active) {
     .jkl-skeleton-element {
       border: 1px solid CanvasText;
-      animation: 2s ease infinite jkl-blink-u03z0v3;
+      animation: 2s ease infinite jkl-blink-ukukdw9;
     }
   }
   .jkl-skeleton-input {
@@ -88,10 +88,10 @@
   }
   @media screen and (forced-colors: active) {
     .jkl-skeleton-table {
-      animation: 2s ease-in-out infinite jkl-blink-u03z0v3;
+      animation: 2s ease-in-out infinite jkl-blink-ukukdw9;
     }
   }
-  @keyframes jkl-blink-u03z0v3 {
+  @keyframes jkl-blink-ukukdw9 {
     0% {
       opacity: 1;
     }

package/styles/components/loader/skeleton-loader.min.css

@@ -1 +1 @@
-@layer jokul.components{@property --jkl-skeleton-sweeper-position{syntax:"<percentage>";initial-value:0%;inherits:true}@keyframes --jkl-skeleton-sweep{0%,67%{--jkl-skeleton-sweeper-position:0%}to{--jkl-skeleton-sweeper-position:calc(100% + var(--jkl-skeleton-sweeper-width))}}.jkl-skeleton-animation{--jkl-skeleton-element-color:var(--jkl-color-background-container-low);--jkl-skeleton-sweep-duration:4500ms;--jkl-skeleton-sweeper-width:40%;animation:var(--jkl-skeleton-sweep-duration) ease-in-out infinite --jkl-skeleton-sweep;-webkit-mask-image:linear-gradient(to right,#000 calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width)),#0000 calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width)/2),#000 var(--jkl-skeleton-sweeper-position));mask-image:linear-gradient(to right,#000 calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width)),#0000 calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width)/2),#000 var(--jkl-skeleton-sweeper-position));-webkit-mask-position:center;mask-position:center;-webkit-mask-size:100dvi 100dvb;mask-size:100dvi 100dvb}.jkl-skeleton-element{background-color:var(--jkl-skeleton-element-color);border-radius:.125rem}.jkl-skeleton-element--circle{border-radius:50%}@media screen and (forced-colors:active){.jkl-skeleton-element{animation:jkl-blink-u03z0v3 2s ease infinite;border:1px solid CanvasText}}.jkl-skeleton-input{display:flex;flex-direction:column;gap:.75rem}.jkl-skeleton-input__checkbox{display:flex;flex-direction:row;flex-wrap:nowrap;gap:.5rem}@media (width >= 0) and (max-width:679px){.jkl-skeleton-input{gap:.5rem}}.jkl-skeleton-input--compact:after{gap:.5rem}.jkl-skeleton-table{display:flex;flex-direction:column}.jkl-skeleton-table__header,.jkl-skeleton-table__row{border-bottom:1px solid var(--jkl-skeleton-element-color);display:flex;flex-direction:row;justify-content:space-between}.jkl-skeleton-table__header{padding:.75rem .5rem}.jkl-skeleton-table__row{padding:1rem .5rem}@media (width >= 0) and (max-width:679px){.jkl-skeleton-table__header{padding:.5rem .25rem}.jkl-skeleton-table__row{padding:.75rem .25rem}}.jkl-skeleton-table--compact::after__header{padding:.5rem .25rem}.jkl-skeleton-table--compact::after__row{padding:.75rem .25rem}@media screen and (forced-colors:active){.jkl-skeleton-table{animation:jkl-blink-u03z0v3 2s ease-in-out infinite}}@keyframes jkl-blink-u03z0v3{0%{opacity:1}40%,50%{opacity:.3}70%,to{opacity:1}}}
+@layer jokul.components{@property --jkl-skeleton-sweeper-position{syntax:"<percentage>";initial-value:0%;inherits:true}@keyframes --jkl-skeleton-sweep{0%,67%{--jkl-skeleton-sweeper-position:0%}to{--jkl-skeleton-sweeper-position:calc(100% + var(--jkl-skeleton-sweeper-width))}}.jkl-skeleton-animation{--jkl-skeleton-element-color:var(--jkl-color-background-container-low);--jkl-skeleton-sweep-duration:4500ms;--jkl-skeleton-sweeper-width:40%;animation:var(--jkl-skeleton-sweep-duration) ease-in-out infinite --jkl-skeleton-sweep;-webkit-mask-image:linear-gradient(to right,#000 calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width)),#0000 calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width)/2),#000 var(--jkl-skeleton-sweeper-position));mask-image:linear-gradient(to right,#000 calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width)),#0000 calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width)/2),#000 var(--jkl-skeleton-sweeper-position));-webkit-mask-position:center;mask-position:center;-webkit-mask-size:100dvi 100dvb;mask-size:100dvi 100dvb}.jkl-skeleton-element{background-color:var(--jkl-skeleton-element-color);border-radius:.125rem}.jkl-skeleton-element--circle{border-radius:50%}@media screen and (forced-colors:active){.jkl-skeleton-element{animation:jkl-blink-ukukdw9 2s ease infinite;border:1px solid CanvasText}}.jkl-skeleton-input{display:flex;flex-direction:column;gap:.75rem}.jkl-skeleton-input__checkbox{display:flex;flex-direction:row;flex-wrap:nowrap;gap:.5rem}@media (width >= 0) and (max-width:679px){.jkl-skeleton-input{gap:.5rem}}.jkl-skeleton-input--compact:after{gap:.5rem}.jkl-skeleton-table{display:flex;flex-direction:column}.jkl-skeleton-table__header,.jkl-skeleton-table__row{border-bottom:1px solid var(--jkl-skeleton-element-color);display:flex;flex-direction:row;justify-content:space-between}.jkl-skeleton-table__header{padding:.75rem .5rem}.jkl-skeleton-table__row{padding:1rem .5rem}@media (width >= 0) and (max-width:679px){.jkl-skeleton-table__header{padding:.5rem .25rem}.jkl-skeleton-table__row{padding:.75rem .25rem}}.jkl-skeleton-table--compact::after__header{padding:.5rem .25rem}.jkl-skeleton-table--compact::after__row{padding:.75rem .25rem}@media screen and (forced-colors:active){.jkl-skeleton-table{animation:jkl-blink-ukukdw9 2s ease-in-out infinite}}@keyframes jkl-blink-ukukdw9{0%{opacity:1}40%,50%{opacity:.3}70%,to{opacity:1}}}

package/styles/components/loader/skeleton-loader.scss

@@ -0,0 +1,137 @@
+@charset "UTF-8";
+@use "sass:string";
+@use "../../core/jkl";
+
+$_blink-animation-name: jkl-blink-#{string.unique-id()};
+
+@layer jokul.components {
+    @property --jkl-skeleton-sweeper-position {
+        syntax: "<percentage>";
+        initial-value: 0%;
+        inherits: true;
+    }
+
+    @keyframes --jkl-skeleton-sweep {
+        0%,
+        67% {
+            --jkl-skeleton-sweeper-position: 0%;
+        }
+
+        100% {
+            --jkl-skeleton-sweeper-position: calc(100% + var(--jkl-skeleton-sweeper-width));
+        }
+    }
+
+    .jkl-skeleton-animation {
+        --jkl-skeleton-element-color: var(--jkl-color-background-container-low);
+        --jkl-skeleton-sweep-duration: 4500ms;
+        --jkl-skeleton-sweeper-width: 40%;
+
+        mask-image: linear-gradient(to right, #000 calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width)), transparent calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width) / 2), #000 var(--jkl-skeleton-sweeper-position));
+        mask-size: 100dvi 100dvb;
+        mask-position: center;
+        animation: var(--jkl-skeleton-sweep-duration) ease-in-out infinite --jkl-skeleton-sweep;
+    }
+
+    .jkl-skeleton-element {
+        border-radius: jkl.rem(2px);
+        background-color: var(--jkl-skeleton-element-color);
+
+        &--circle {
+            border-radius: 50%;
+        }
+
+        @include jkl.forced-colors-mode {
+            border: 1px solid CanvasText;
+            // Vi kan ikke bruke "gradient-trikset" for å skape den samme effekten,
+            // så vi må tenke annerledes. Bruk gjennomsiktighet for å indikere at
+            // noe skjer.
+            animation: 2s ease infinite $_blink-animation-name;
+        }
+    }
+
+    .jkl-skeleton-input {
+        display: flex;
+        flex-direction: column;
+        gap: jkl.$spacing-12;
+
+        &__checkbox {
+            display: flex;
+            flex-direction: row;
+            flex-wrap: nowrap;
+            gap: jkl.$spacing-8;
+        }
+
+        @include jkl.small-device {
+            gap: jkl.$spacing-8;
+        }
+
+        &--compact::after {
+            gap: jkl.$spacing-8;
+        }
+    }
+
+    .jkl-skeleton-table {
+        display: flex;
+        flex-direction: column;
+
+        &__header,
+        &__row {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            border-bottom: solid 1px var(--jkl-skeleton-element-color);
+        }
+
+        &__header {
+            padding: jkl.$spacing-12 jkl.$spacing-8;
+        }
+
+        &__row {
+            padding: jkl.$spacing-16 jkl.$spacing-8;
+        }
+
+        @include jkl.small-device {
+            &__header {
+                padding: jkl.$spacing-8 jkl.$spacing-4;
+            }
+
+            &__row {
+                padding: jkl.$spacing-12 jkl.$spacing-4;
+            }
+        }
+
+        &--compact::after {
+            &__header {
+                padding: jkl.$spacing-8 jkl.$spacing-4;
+            }
+
+            &__row {
+                padding: jkl.$spacing-12 jkl.$spacing-4;
+            }
+        }
+
+        @include jkl.forced-colors-mode {
+            // Vi kan ikke bruke "gradient-trikset" for å skape den samme effekten,
+            // så vi må tenke annerledes. Bruk gjennomsiktighet for å indikere at
+            // noe skjer.
+            animation: 2s ease-in-out infinite $_blink-animation-name;
+        }
+    }
+
+    @keyframes #{$_blink-animation-name} {
+        0% {
+            opacity: 1;
+        }
+
+        40%,
+        50% {
+            opacity: 0.3;
+        }
+
+        70%,
+        100% {
+            opacity: 1;
+        }
+    }
+}

package/styles/components/logo/_index.scss

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

package/styles/components/logo/development/styles.scss

@@ -0,0 +1,9 @@
+.logo-example {
+    width: 100%;
+    height: 100%;
+}
+
+.logo-stamp-example {
+    width: 100%;
+    max-width: 16rem;
+}

package/styles/components/logo/logo.scss

@@ -0,0 +1,90 @@
+@charset "UTF-8";
+@use "../../core/jkl";
+
+@layer jokul.components {
+    .jkl-logo {
+        color: var(--jkl-color-text-default);
+
+        // I valget mellom å følge merkevaren og å være lesbar velger vi å være lesbar.
+        @include jkl.forced-colors-svg-fallback($stroke: CanvasText,
+            $fill: CanvasText,
+        );
+
+        &__F {
+            /* Is connected to the viewbox of the logo, change at your own risk */
+            transform-origin: 30px 132px;
+
+            &-line {
+                /* Must be the same as the line x1 origin, change at your own risk */
+                transform-origin: 34.3px;
+            }
+        }
+
+        &__remtind {
+            opacity: 1;
+        }
+
+        &--symbol-only {
+            & .jkl-logo__F {
+                transform: rotate(45deg);
+
+                &-line {
+                    transform: scaleX(1.5);
+                }
+            }
+
+            & .jkl-logo__remtind {
+                transition-delay: 0ms;
+                opacity: 0;
+                transform: translateX(-5%);
+            }
+        }
+
+        &--animated {
+            & .jkl-logo__F {
+                transition: transform jkl.timing("expressive") jkl.timing("energetic") cubic-bezier(0.5, 0, 0.62, 1);
+            }
+
+            & .jkl-logo__F-line {
+                transition: transform jkl.timing("expressive") ease-in;
+            }
+
+            & .jkl-logo__remtind {
+                transition:
+                    opacity jkl.timing("expressive") jkl.timing("energetic") ease-in,
+                    transform jkl.timing("expressive") ease;
+            }
+        }
+    }
+
+    .jkl-logo--centered.jkl-logo--symbol-only {
+        & .jkl-logo__F {
+            transform: translateX(35%) rotate(45deg);
+        }
+    }
+
+    .jkl-logo-stamp {
+        color: var(--logo-stamp-color);
+
+        // I valget mellom å følge merkevaren og å være lesbar velger vi å være lesbar.
+        @include jkl.forced-colors-svg-fallback($stroke: CanvasText,
+            $fill: CanvasText,
+        );
+
+        &--animated {
+            .jkl-logo-stamp__text {
+                transform-origin: 256px 256px;
+                transition-timing-function: cubic-bezier(0.75, 0, 0, 1);
+                transition-duration: jkl.timing("productive");
+                transition-property: transform;
+            }
+
+            &[data-rotate="true"] {
+                .jkl-logo-stamp__text {
+                    transition-duration: 1500ms;
+                    transform: rotate(360deg);
+                }
+            }
+        }
+    }
+}

package/styles/components/menu/_index.scss

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