@fremtind/jokul 1.4.1 → 1.5.1

package/styles/components/list/list.scss

@@ -22,100 +22,102 @@
 
 @include jkl.light-mode-variables {
     --jkl-list-marker-cross: #{_cross(
-            jkl.$color-functional-error,
-            jkl.$color-granitt
-        )};
+        jkl.$color-functional-error,
+        jkl.$color-granitt
+    )};
     --jkl-list-marker-check: #{_check(
-            jkl.$color-functional-success,
-            jkl.$color-granitt
-        )};
+        jkl.$color-functional-success,
+        jkl.$color-granitt
+    )};
     --jkl-list-text-color: #{jkl.$color-granitt};
 }
 
 @include jkl.dark-mode-variables {
     --jkl-list-marker-cross: #{_cross(
-            jkl.$color-functional-error-dark,
-            jkl.$color-granitt
-        )};
+        jkl.$color-functional-error-dark,
+        jkl.$color-granitt
+    )};
     --jkl-list-marker-check: #{_check(
-            jkl.$color-functional-success-dark,
-            jkl.$color-granitt
-        )};
+        jkl.$color-functional-success-dark,
+        jkl.$color-granitt
+    )};
     --jkl-list-text-color: #{jkl.$color-snohvit};
 }
 
-.jkl-list {
-    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;
+@layer jokul.components {
+    .jkl-list {
+        list-style-type: "\2022";
+        padding-left: jkl.$unit-20;
+        margin: 0;
 
         & > .jkl-list__item {
-            padding-left: revert;
-            list-style: decimal;
+            & > .jkl-list {
+                margin: jkl.$unit-10 0;
+            }
         }
 
-        & & > .jkl-list__item {
-            list-style: lower-alpha;
+        &:has(.jkl-list__item--iconed) {
+            padding: 0;
         }
-    }
 
-    &__item {
-        color: var(--jkl-list-text-color);
-        padding-left: jkl.$unit-15;
+        &--ordered {
+            padding-left: revert;
 
-        &::marker {
-            color: var(--jkl-list-text-color);
-        }
+            & > .jkl-list__item {
+                padding-left: revert;
+                list-style: decimal;
+            }
 
-        &--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.
+            & & > .jkl-list__item {
+                list-style: lower-alpha;
             }
         }
 
-        &--check::before {
-            @include jkl.decorative($content: "\2713");
-            background-image: var(--jkl-list-marker-check);
-        }
+        &__item {
+            color: var(--jkl-list-text-color);
+            padding-left: jkl.$unit-15;
 
-        &--cross::before {
-            @include jkl.decorative($content: "\274C");
-            background-image: var(--jkl-list-marker-cross);
-        }
-    }
+            &::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.
+                }
+            }
 
-    @include jkl.forced-colors-mode {
-        & .jkl-list__item {
             &--check::before {
-                background-image: _check(CanvasText, Canvas);
+                @include jkl.decorative($content: "\2713");
+                background-image: var(--jkl-list-marker-check);
             }
 
             &--cross::before {
-                background-image: _cross(CanvasText, Canvas);
+                @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/loader.css

@@ -1,100 +1,103 @@
 /**
- * Do not edit directly
- * Generated on Wed, 18 Dec 2024 12:25:37 GMT
+ * Do not edit directly, this file was auto-generated.
  */
-.jkl-loader {
-  display: flex;
-}
-.jkl-loader--inline {
-  display: inline-flex;
-}
-.jkl-loader__dot {
-  display: block;
-  transform-origin: center;
-  background-color: currentColor;
-  height: 0.9em;
-  width: 0.9em;
-  animation: 2500ms linear infinite;
-}
-.jkl-loader__dot--left {
-  animation-name: jkl-loader-left-spin-u66zm3c;
-  margin-right: 1.71em;
-}
-.jkl-loader__dot--middle {
-  animation-name: jkl-loader-middle-spin-u66zm3o;
-  margin-right: 1.9em;
-}
-.jkl-loader__dot--right {
-  animation-name: jkl-loader-right-spin-u66zm3v;
-}
-@media screen and (forced-colors: active) {
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+@layer jokul.components {
+  .jkl-loader {
+    display: flex;
+  }
+  .jkl-loader--inline {
+    display: inline-flex;
+  }
   .jkl-loader__dot {
-    background-color: CanvasText;
-  }
-}
-.jkl-button .jkl-loader > .jkl-loader__dot, .jkl-loader--medium > .jkl-loader__dot {
-  height: 0.35em;
-  width: 0.35em;
-}
-.jkl-button .jkl-loader > .jkl-loader__dot--left, .jkl-loader--medium > .jkl-loader__dot--left {
-  margin-right: 0.585em;
-}
-.jkl-button .jkl-loader > .jkl-loader__dot--middle, .jkl-loader--medium > .jkl-loader__dot--middle {
-  margin-right: 0.65em;
-}
-.jkl-loader--small > .jkl-loader__dot {
-  height: 0.25em;
-  width: 0.25em;
-}
-.jkl-loader--small > .jkl-loader__dot--left {
-  margin-right: 0.27em;
-}
-.jkl-loader--small > .jkl-loader__dot--middle {
-  margin-right: 0.3em;
-}
-
-@keyframes jkl-loader-left-spin-u66zm3c {
-  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 jkl-loader-middle-spin-u66zm3o {
-  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 jkl-loader-right-spin-u66zm3v {
-  0% {
-    transform: rotate(40deg) scale(0);
-  }
-  20% {
-    transform: rotate(40deg) scale(0);
-  }
-  50% {
-    transform: rotate(130deg) scale(1);
-  }
-  100% {
-    transform: rotate(220deg) scale(0);
+    display: block;
+    transform-origin: center;
+    background-color: currentColor;
+    height: 0.9em;
+    width: 0.9em;
+    animation: 2500ms linear infinite;
+  }
+  .jkl-loader__dot--left {
+    animation-name: jkl-loader-left-spin-uk5tuot;
+    margin-right: 1.71em;
+  }
+  .jkl-loader__dot--middle {
+    animation-name: jkl-loader-middle-spin-uk5tups;
+    margin-right: 1.9em;
+  }
+  .jkl-loader__dot--right {
+    animation-name: jkl-loader-right-spin-uk5tuqq;
+  }
+  @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: 0.35em;
+    width: 0.35em;
+  }
+  .jkl-button .jkl-loader > .jkl-loader__dot--left, .jkl-loader--medium > .jkl-loader__dot--left {
+    margin-right: 0.585em;
+  }
+  .jkl-button .jkl-loader > .jkl-loader__dot--middle, .jkl-loader--medium > .jkl-loader__dot--middle {
+    margin-right: 0.65em;
+  }
+  .jkl-loader--small > .jkl-loader__dot {
+    height: 0.25em;
+    width: 0.25em;
+  }
+  .jkl-loader--small > .jkl-loader__dot--left {
+    margin-right: 0.27em;
+  }
+  .jkl-loader--small > .jkl-loader__dot--middle {
+    margin-right: 0.3em;
+  }
+  @keyframes jkl-loader-left-spin-uk5tuot {
+    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 jkl-loader-middle-spin-uk5tups {
+    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 jkl-loader-right-spin-uk5tuqq {
+    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/loader.min.css

@@ -1 +1 @@
-.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-u66zm3c;margin-right:1.71em}.jkl-loader__dot--middle{animation-name:jkl-loader-middle-spin-u66zm3o;margin-right:1.9em}.jkl-loader__dot--right{animation-name:jkl-loader-right-spin-u66zm3v}@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-u66zm3c{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-u66zm3o{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-u66zm3v{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-uk5tuot;margin-right:1.71em}.jkl-loader__dot--middle{animation-name:jkl-loader-middle-spin-uk5tups;margin-right:1.9em}.jkl-loader__dot--right{animation-name:jkl-loader-right-spin-uk5tuqq}@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-uk5tuot{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-uk5tups{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-uk5tuqq{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

@@ -15,122 +15,125 @@ $_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()};
 
-.jkl-loader {
-    display: flex;
+@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
+        &--inline {
+            display: inline-flex;
         }
 
-        &--middle {
-            animation-name: $_loader-middle-animation-name;
-            margin-right: $_loader-spacing--large;
+        &__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;
+            }
         }
 
-        &--right {
-            animation-name: $_loader-right-animation-name;
-        }
+        .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;
+            }
 
-        @include jkl.forced-colors-mode {
-            background-color: CanvasText;
+            &--middle {
+                margin-right: $_loader-spacing--medium;
+            }
         }
-    }
 
-    .jkl-button & > .jkl-loader__dot,
-    &--medium > .jkl-loader__dot {
-        height: $_loader-dot-size--medium;
-        width: $_loader-dot-size--medium;
+        &--small > .jkl-loader__dot {
+            height: $_loader-dot-size--small;
+            width: $_loader-dot-size--small;
 
-        &--left {
-            margin-right: $_loader-spacing--medium * 0.9;
-        }
+            &--left {
+                margin-right: $_loader-spacing--small * 0.9;
+            }
 
-        &--middle {
-            margin-right: $_loader-spacing--medium;
+            &--middle {
+                margin-right: $_loader-spacing--small;
+            }
         }
     }
 
-    &--small > .jkl-loader__dot {
-        height: $_loader-dot-size--small;
-        width: $_loader-dot-size--small;
-
-        &--left {
-            margin-right: $_loader-spacing--small * 0.9;
+    @keyframes #{$_loader-left-animation-name} {
+        0% {
+            transform: rotate(0) scale(0);
         }
 
-        &--middle {
-            margin-right: $_loader-spacing--small;
+        30% {
+            transform: rotate(90deg) scale(1);
         }
-    }
-}
-
-@keyframes #{$_loader-left-animation-name} {
-    0% {
-        transform: rotate(0) scale(0);
-    }
-
-    30% {
-        transform: rotate(90deg) scale(1);
-    }
 
-    70% {
-        transform: rotate(180deg) scale(0);
-    }
+        70% {
+            transform: rotate(180deg) scale(0);
+        }
 
-    100% {
-        transform: rotate(180deg) scale(0);
+        100% {
+            transform: rotate(180deg) scale(0);
+        }
     }
-}
 
-@keyframes #{$_loader-middle-animation-name} {
-    0% {
-        transform: rotate(20deg) scale(0);
-    }
+    @keyframes #{$_loader-middle-animation-name} {
+        0% {
+            transform: rotate(20deg) scale(0);
+        }
 
-    10% {
-        transform: rotate(20deg) scale(0);
-    }
+        10% {
+            transform: rotate(20deg) scale(0);
+        }
 
-    40% {
-        transform: rotate(110deg) scale(1.4);
-    }
+        40% {
+            transform: rotate(110deg) scale(1.4);
+        }
 
-    85% {
-        transform: rotate(200deg) scale(0);
-    }
+        85% {
+            transform: rotate(200deg) scale(0);
+        }
 
-    100% {
-        transform: rotate(200deg) scale(0);
+        100% {
+            transform: rotate(200deg) scale(0);
+        }
     }
-}
 
-@keyframes #{$_loader-right-animation-name} {
-    0% {
-        transform: rotate(40deg) scale(0);
-    }
+    @keyframes #{$_loader-right-animation-name} {
+        0% {
+            transform: rotate(40deg) scale(0);
+        }
 
-    20% {
-        transform: rotate(40deg) scale(0);
-    }
+        20% {
+            transform: rotate(40deg) scale(0);
+        }
 
-    50% {
-        transform: rotate(130deg) scale(1);
-    }
+        50% {
+            transform: rotate(130deg) scale(1);
+        }
 
-    100% {
-        transform: rotate(220deg) scale(0);
+        100% {
+            transform: rotate(220deg) scale(0);
+        }
     }
 }