@fremtind/jokul 1.4.0 → 1.5.0

package/styles/components/icon-button/icon-button.scss

@@ -1,36 +1,38 @@
 @charset "UTF-8";
 @use "../../core/jkl";
 
-.jkl-icon-button {
-    background-color: transparent;
-    cursor: pointer;
-    color: inherit;
-    position: relative;
-    transition-property: box-shadow;
-    padding: 0;
+@layer jokul.components {
+    .jkl-icon-button {
+        background-color: transparent;
+        cursor: pointer;
+        color: inherit;
+        position: relative;
+        transition-property: box-shadow;
+        padding: 0;
 
-    @include jkl.motion(focus, snappy);
-    @include jkl.reset-outline;
+        @include jkl.motion(focus, snappy);
+        @include jkl.reset-outline;
 
-    .jkl-icon {
-        display: flex;
-        align-items: center;
+        .jkl-icon {
+            display: flex;
+            align-items: center;
 
-        &--animated {
-            display: revert;
+            &--animated {
+                display: revert;
+            }
         }
-    }
 
-    &:focus-visible {
-        @include jkl.focus-outline;
-    }
+        &:focus-visible {
+            @include jkl.focus-outline;
+        }
 
-    &:hover {
-        color: var(--jkl-color-text-interactive-hover);
-    }
+        &:hover {
+            color: var(--jkl-color-text-interactive-hover);
+        }
 
-    @include jkl.forced-colors-mode {
-        border: none;
-        background: none;
+        @include jkl.forced-colors-mode {
+            border: none;
+            background: none;
+        }
     }
 }

package/styles/components/image/image.css

@@ -1,30 +1,34 @@
 /**
- * Do not edit directly
- * Generated on Wed, 18 Dec 2024 12:25:37 GMT
+ * Do not edit directly, this file was auto-generated.
  */
-.jkl-image {
-  display: block;
-  overflow: hidden;
-  position: relative;
-}
-.jkl-image__placeholder {
-  filter: blur(20px);
-}
-.jkl-image__image {
-  transition-timing-function: ease;
-  transition-duration: 400ms;
-  transition-property: opacity;
-  opacity: 1;
-}
-.jkl-image__image, .jkl-image__placeholder {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate3d(-50%, -50%, 0);
-  object-fit: cover;
-}
-.jkl-image--loading .jkl-image__image {
-  opacity: 0;
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+@layer jokul.components {
+  .jkl-image {
+    display: block;
+    overflow: hidden;
+    position: relative;
+  }
+  .jkl-image__placeholder {
+    filter: blur(20px);
+  }
+  .jkl-image__image {
+    transition-timing-function: ease;
+    transition-duration: 400ms;
+    transition-property: opacity;
+    opacity: 1;
+  }
+  .jkl-image__image, .jkl-image__placeholder {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate3d(-50%, -50%, 0);
+    object-fit: cover;
+  }
+  .jkl-image--loading .jkl-image__image {
+    opacity: 0;
+  }
 }

package/styles/components/image/image.min.css

@@ -1 +1 @@
-.jkl-image{display:block;overflow:hidden;position:relative}.jkl-image__placeholder{filter:blur(20px)}.jkl-image__image{opacity:1;transition-duration:.4s;transition-property:opacity;transition-timing-function:ease}.jkl-image__image,.jkl-image__placeholder{height:100%;left:50%;object-fit:cover;position:absolute;top:50%;transform:translate3d(-50%,-50%,0);width:100%}.jkl-image--loading .jkl-image__image{opacity:0}
+@layer jokul.components{.jkl-image{display:block;overflow:hidden;position:relative}.jkl-image__placeholder{filter:blur(20px)}.jkl-image__image{opacity:1;transition-duration:.4s;transition-property:opacity;transition-timing-function:ease}.jkl-image__image,.jkl-image__placeholder{height:100%;left:50%;object-fit:cover;position:absolute;top:50%;transform:translate3d(-50%,-50%,0);width:100%}.jkl-image--loading .jkl-image__image{opacity:0}}

package/styles/components/image/image.scss

@@ -1,35 +1,37 @@
 @charset "UTF-8";
 @use "../../core/jkl";
 
-.jkl-image {
-    display: block;
-    overflow: hidden;
-    position: relative;
+@layer jokul.components {
+    .jkl-image {
+        display: block;
+        overflow: hidden;
+        position: relative;
 
-    &__placeholder {
-        filter: blur(20px);
-    }
+        &__placeholder {
+            filter: blur(20px);
+        }
 
-    &__image {
-        @include jkl.motion("standard", "lazy");
-        transition-property: opacity;
-        opacity: 1;
-    }
+        &__image {
+            @include jkl.motion("standard", "lazy");
+            transition-property: opacity;
+            opacity: 1;
+        }
 
-    &__image,
-    &__placeholder {
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate3d(-50%, -50%, 0);
-        object-fit: cover;
-    }
+        &__image,
+        &__placeholder {
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate3d(-50%, -50%, 0);
+            object-fit: cover;
+        }
 
-    &--loading {
-        .jkl-image__image {
-            opacity: 0;
+        &--loading {
+            .jkl-image__image {
+                opacity: 0;
+            }
         }
     }
 }

package/styles/components/input-group/input-group.css

@@ -1,6 +1,8 @@
 /**
- * Do not edit directly
- * Generated on Wed, 18 Dec 2024 12:25:37 GMT
+ * Do not edit directly, this file was auto-generated.
+ */
+/**
+ * Do not edit directly, this file was auto-generated.
  */
 .jkl-field-group {
   outline: 0;
@@ -78,7 +80,7 @@
   --color: var(--jkl-color-text-default);
 }
 .jkl-form-support-label--error .jkl-form-support-label__icon, .jkl-form-support-label--warning .jkl-form-support-label__icon, .jkl-form-support-label--success .jkl-form-support-label__icon {
-  animation: 400ms cubic-bezier(0, 0, 0.3, 1) 250ms jkl-support-icon-entrance-u5r4xoq forwards;
+  animation: 400ms cubic-bezier(0, 0, 0.3, 1) 250ms jkl-support-icon-entrance-uh81j2w forwards;
 }
 .jkl-form-support-label--sr-only {
   border: 0 !important;
@@ -153,7 +155,7 @@
   white-space: nowrap !important; /* 3 */
 }
 
-@keyframes jkl-support-icon-entrance-u5r4xoq {
+@keyframes jkl-support-icon-entrance-uh81j2w {
   0% {
     margin-right: 0;
     opacity: 0;

package/styles/components/input-group/input-group.min.css

@@ -1 +1 @@
-.jkl-field-group{border-style:none}.jkl-field-group,.jkl-field-group:active,.jkl-field-group:focus,.jkl-field-group:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-field-group{border-style:revert}.jkl-field-group,.jkl-field-group:active,.jkl-field-group:focus,.jkl-field-group:hover{outline:revert;outline-style:revert}}.jkl-dormant-form-support-label{display:none;opacity:0;pointer-events:none}:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-form-support-label-font-size:var(--jkl-small-font-size);--jkl-form-support-label-line-height:var(--jkl-small-line-height);--jkl-form-support-label-font-weight:var(--jkl-small-font-weight);--jkl-form-support-label-margin:0.5rem 0 0;--jkl-form-support-label-icon-size:1.25rem;--jkl-form-support-label-icon-margin:0 -1.25rem -0.375rem 0}[data-density=compact],[data-layout-density=compact]{--jkl-form-support-label-icon-size:1.375rem;--jkl-form-support-label-icon-margin:0 -1.375rem -0.3125rem 0}.jkl-form-support-label{--color:var(--jkl-color-text-subdued);color:var(--color);display:flex;font-size:var(--jkl-form-support-label-font-size);font-weight:var(--jkl-form-support-label-font-weight);line-height:var(--jkl-form-support-label-line-height);margin:var(--jkl-form-support-label-margin);transition-delay:.15s;transition-duration:.4s;transition-property:color;transition-timing-function:ease}.jkl-form-support-label__icon,.jkl-form-support-label__icon.jkl-icon{height:var(--jkl-form-support-label-icon-size);margin:var(--jkl-form-support-label-icon-margin);opacity:0}@media screen and (forced-colors:active){.jkl-form-support-label__icon,.jkl-form-support-label__icon path,.jkl-form-support-label__icon svg,.jkl-form-support-label__icon.jkl-icon,.jkl-form-support-label__icon.jkl-icon path,.jkl-form-support-label__icon.jkl-icon svg{stroke:CanvasText;fill:Canvas}}.jkl-form-support-label--error,.jkl-form-support-label--success,.jkl-form-support-label--warning{--color:var(--jkl-color-text-default)}.jkl-form-support-label--error .jkl-form-support-label__icon,.jkl-form-support-label--success .jkl-form-support-label__icon,.jkl-form-support-label--warning .jkl-form-support-label__icon{animation:jkl-support-icon-entrance-u5r4xoq .4s cubic-bezier(0,0,.3,1) .25s forwards}.jkl-form-support-label--sr-only{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-label-small-margin:0 0 0.25rem 0;--jkl-label-medium-margin:0 0 0.5rem 0;--jkl-label-large-margin:0 0 1rem -0.0625rem;--jkl-label-small-font-size:var(--jkl-small-font-size);--jkl-label-small-line-height:var(--jkl-small-line-height);--jkl-label-small-font-weight:var(--jkl-small-font-weight);--jkl-label-medium-font-size:var(--jkl-body-font-size);--jkl-label-medium-line-height:var(--jkl-body-line-height);--jkl-label-medium-font-weight:var(--jkl-body-font-weight);--jkl-label-large-font-size:var(--jkl-heading-2-font-size);--jkl-label-large-line-height:var(--jkl-heading-2-line-height);--jkl-label-large-font-weight:var(--jkl-heading-2-font-weight)}[data-density=compact],[data-layout-density=compact]{--jkl-label-small-margin:0 0 0.25rem 0;--jkl-label-medium-margin:0 0 0.5rem 0;--jkl-label-large-margin:0 0 0.75rem -0.0625rem}.jkl-label{color:var(--jkl-color-text-default);display:block;margin-left:0}.jkl-label--small{font-size:var(--jkl-label-small-font-size);font-weight:var(--jkl-label-small-font-weight);line-height:var(--jkl-label-small-line-height);margin:var(--jkl-label-small-margin)}.jkl-label--medium{font-size:var(--jkl-label-medium-font-size);font-weight:var(--jkl-label-medium-font-weight);line-height:var(--jkl-label-medium-line-height);margin:var(--jkl-label-medium-margin)}.jkl-label--large{font-size:var(--jkl-label-large-font-size);font-weight:var(--jkl-label-large-font-weight);line-height:var(--jkl-label-large-line-height);margin:var(--jkl-label-large-margin)}.jkl-label--sr-only{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}@keyframes jkl-support-icon-entrance-u5r4xoq{0%{margin-right:0;opacity:0;transform:scale(1)}30%{margin-right:.5rem}50%{opacity:1}70%{transform:scale(1.1)}85%{transform:scale(.9)}to{margin-right:.5rem;opacity:1;transform:scale(1)}}@media screen and (forced-colors:active){.jkl-text-input-action-button,.jkl-text-input-action-button path,.jkl-text-input-action-button svg{stroke:ButtonText;fill:ButtonFace}}
+.jkl-field-group{border-style:none}.jkl-field-group,.jkl-field-group:active,.jkl-field-group:focus,.jkl-field-group:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-field-group{border-style:revert}.jkl-field-group,.jkl-field-group:active,.jkl-field-group:focus,.jkl-field-group:hover{outline:revert;outline-style:revert}}.jkl-dormant-form-support-label{display:none;opacity:0;pointer-events:none}:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-form-support-label-font-size:var(--jkl-small-font-size);--jkl-form-support-label-line-height:var(--jkl-small-line-height);--jkl-form-support-label-font-weight:var(--jkl-small-font-weight);--jkl-form-support-label-margin:0.5rem 0 0;--jkl-form-support-label-icon-size:1.25rem;--jkl-form-support-label-icon-margin:0 -1.25rem -0.375rem 0}[data-density=compact],[data-layout-density=compact]{--jkl-form-support-label-icon-size:1.375rem;--jkl-form-support-label-icon-margin:0 -1.375rem -0.3125rem 0}.jkl-form-support-label{--color:var(--jkl-color-text-subdued);color:var(--color);display:flex;font-size:var(--jkl-form-support-label-font-size);font-weight:var(--jkl-form-support-label-font-weight);line-height:var(--jkl-form-support-label-line-height);margin:var(--jkl-form-support-label-margin);transition-delay:.15s;transition-duration:.4s;transition-property:color;transition-timing-function:ease}.jkl-form-support-label__icon,.jkl-form-support-label__icon.jkl-icon{height:var(--jkl-form-support-label-icon-size);margin:var(--jkl-form-support-label-icon-margin);opacity:0}@media screen and (forced-colors:active){.jkl-form-support-label__icon,.jkl-form-support-label__icon path,.jkl-form-support-label__icon svg,.jkl-form-support-label__icon.jkl-icon,.jkl-form-support-label__icon.jkl-icon path,.jkl-form-support-label__icon.jkl-icon svg{stroke:CanvasText;fill:Canvas}}.jkl-form-support-label--error,.jkl-form-support-label--success,.jkl-form-support-label--warning{--color:var(--jkl-color-text-default)}.jkl-form-support-label--error .jkl-form-support-label__icon,.jkl-form-support-label--success .jkl-form-support-label__icon,.jkl-form-support-label--warning .jkl-form-support-label__icon{animation:jkl-support-icon-entrance-uh81j2w .4s cubic-bezier(0,0,.3,1) .25s forwards}.jkl-form-support-label--sr-only{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-label-small-margin:0 0 0.25rem 0;--jkl-label-medium-margin:0 0 0.5rem 0;--jkl-label-large-margin:0 0 1rem -0.0625rem;--jkl-label-small-font-size:var(--jkl-small-font-size);--jkl-label-small-line-height:var(--jkl-small-line-height);--jkl-label-small-font-weight:var(--jkl-small-font-weight);--jkl-label-medium-font-size:var(--jkl-body-font-size);--jkl-label-medium-line-height:var(--jkl-body-line-height);--jkl-label-medium-font-weight:var(--jkl-body-font-weight);--jkl-label-large-font-size:var(--jkl-heading-2-font-size);--jkl-label-large-line-height:var(--jkl-heading-2-line-height);--jkl-label-large-font-weight:var(--jkl-heading-2-font-weight)}[data-density=compact],[data-layout-density=compact]{--jkl-label-small-margin:0 0 0.25rem 0;--jkl-label-medium-margin:0 0 0.5rem 0;--jkl-label-large-margin:0 0 0.75rem -0.0625rem}.jkl-label{color:var(--jkl-color-text-default);display:block;margin-left:0}.jkl-label--small{font-size:var(--jkl-label-small-font-size);font-weight:var(--jkl-label-small-font-weight);line-height:var(--jkl-label-small-line-height);margin:var(--jkl-label-small-margin)}.jkl-label--medium{font-size:var(--jkl-label-medium-font-size);font-weight:var(--jkl-label-medium-font-weight);line-height:var(--jkl-label-medium-line-height);margin:var(--jkl-label-medium-margin)}.jkl-label--large{font-size:var(--jkl-label-large-font-size);font-weight:var(--jkl-label-large-font-weight);line-height:var(--jkl-label-large-line-height);margin:var(--jkl-label-large-margin)}.jkl-label--sr-only{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}@keyframes jkl-support-icon-entrance-uh81j2w{0%{margin-right:0;opacity:0;transform:scale(1)}30%{margin-right:.5rem}50%{opacity:1}70%{transform:scale(1.1)}85%{transform:scale(.9)}to{margin-right:.5rem;opacity:1;transform:scale(1)}}@media screen and (forced-colors:active){.jkl-text-input-action-button,.jkl-text-input-action-button path,.jkl-text-input-action-button svg{stroke:ButtonText;fill:ButtonFace}}

package/styles/components/link/link.css

@@ -1,7 +1,9 @@
 @charset "UTF-8";
 /**
- * Do not edit directly
- * Generated on Wed, 18 Dec 2024 12:25:37 GMT
+ * Do not edit directly, this file was auto-generated.
+ */
+/**
+ * Do not edit directly, this file was auto-generated.
  */
 .jkl-link {
   --link-color: var(--jkl-color-text-default);

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

@@ -1,6 +1,8 @@
 /**
- * Do not edit directly
- * Generated on Wed, 18 Dec 2024 12:25:37 GMT
+ * Do not edit directly, this file was auto-generated.
+ */
+/**
+ * Do not edit directly, this file was auto-generated.
  */
 :root,
 [data-layout-density=comfortable],

package/styles/components/list/list.css

@@ -1,7 +1,9 @@
 @charset "UTF-8";
 /**
- * Do not edit directly
- * Generated on Wed, 18 Dec 2024 12:25:37 GMT
+ * Do not edit directly, this file was auto-generated.
+ */
+/**
+ * Do not edit directly, this file was auto-generated.
  */
 /*
  * NOTE: These icon also exists as a copy in the jkl-icons-react package.
@@ -34,66 +36,68 @@
   --jkl-list-text-color: #f9f9f9;
 }
 
-.jkl-list {
-  list-style-type: "•";
-  padding-left: calc(var(--jkl-unit-10) * 2);
-  margin: 0;
-}
-.jkl-list > .jkl-list__item > .jkl-list {
-  margin: 0.5rem 0;
-}
-.jkl-list:has(.jkl-list__item--iconed) {
-  padding: 0;
-}
-.jkl-list--ordered {
-  padding-left: revert;
-}
-.jkl-list--ordered > .jkl-list__item {
-  padding-left: revert;
-  list-style: decimal;
-}
-.jkl-list--ordered .jkl-list--ordered > .jkl-list__item {
-  list-style: lower-alpha;
-}
-.jkl-list__item {
-  color: var(--jkl-list-text-color);
-  padding-left: calc(var(--jkl-unit-10) * 1.5);
-}
-.jkl-list__item::marker {
-  color: var(--jkl-list-text-color);
-}
-.jkl-list__item--iconed {
-  display: flex;
-  list-style: none;
-  position: relative;
-  padding-left: 0;
-}
-.jkl-list__item--iconed::before {
-  text-indent: -9999px;
-  background-size: contain;
-  width: 1em;
-  height: 1em;
-  flex-shrink: 0;
-  margin-right: 0.5em;
-  margin-top: 0.2em;
-}
-.jkl-list__item--check::before {
-  content: "✓";
-  content: "✓"/"";
-  alt: " ";
-  background-image: var(--jkl-list-marker-check);
-}
-.jkl-list__item--cross::before {
-  content: "❌";
-  content: "❌"/"";
-  alt: " ";
-  background-image: var(--jkl-list-marker-cross);
-}
-@media screen and (forced-colors: active) {
-  .jkl-list .jkl-list__item--check::before {
-    background-image: 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='CanvasText'/%3E%3Cpath d='M4.75 11l2.35 2.36 7.84-7.84' stroke='Canvas' stroke-width='1.5'/%3E%3C/svg%3E%0A");
+@layer jokul.components {
+  .jkl-list {
+    list-style-type: "•";
+    padding-left: calc(var(--jkl-unit-10) * 2);
+    margin: 0;
+  }
+  .jkl-list > .jkl-list__item > .jkl-list {
+    margin: 0.5rem 0;
+  }
+  .jkl-list:has(.jkl-list__item--iconed) {
+    padding: 0;
+  }
+  .jkl-list--ordered {
+    padding-left: revert;
+  }
+  .jkl-list--ordered > .jkl-list__item {
+    padding-left: revert;
+    list-style: decimal;
+  }
+  .jkl-list--ordered .jkl-list--ordered > .jkl-list__item {
+    list-style: lower-alpha;
+  }
+  .jkl-list__item {
+    color: var(--jkl-list-text-color);
+    padding-left: calc(var(--jkl-unit-10) * 1.5);
+  }
+  .jkl-list__item::marker {
+    color: var(--jkl-list-text-color);
+  }
+  .jkl-list__item--iconed {
+    display: flex;
+    list-style: none;
+    position: relative;
+    padding-left: 0;
+  }
+  .jkl-list__item--iconed::before {
+    text-indent: -9999px;
+    background-size: contain;
+    width: 1em;
+    height: 1em;
+    flex-shrink: 0;
+    margin-right: 0.5em;
+    margin-top: 0.2em;
+  }
+  .jkl-list__item--check::before {
+    content: "✓";
+    content: "✓"/"";
+    alt: " ";
+    background-image: var(--jkl-list-marker-check);
+  }
+  .jkl-list__item--cross::before {
+    content: "❌";
+    content: "❌"/"";
+    alt: " ";
+    background-image: var(--jkl-list-marker-cross);
   }
-  .jkl-list .jkl-list__item--cross::before {
-    background-image: 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='CanvasText'/%3E%3Cpath fill='Canvas' d='M5.54 12.68l7.14-7.1.84.85-7.13 7.09z'/%3E%3Cpath fill='Canvas' d='M12.67 13.47l-7.13-7.1.85-.83 7.13 7.1z'/%3E%3C/svg%3E%0A");
+  @media screen and (forced-colors: active) {
+    .jkl-list .jkl-list__item--check::before {
+      background-image: 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='CanvasText'/%3E%3Cpath d='M4.75 11l2.35 2.36 7.84-7.84' stroke='Canvas' stroke-width='1.5'/%3E%3C/svg%3E%0A");
+    }
+    .jkl-list .jkl-list__item--cross::before {
+      background-image: 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='CanvasText'/%3E%3Cpath fill='Canvas' d='M5.54 12.68l7.14-7.1.84.85-7.13 7.09z'/%3E%3Cpath fill='Canvas' d='M12.67 13.47l-7.13-7.1.85-.83 7.13 7.1z'/%3E%3C/svg%3E%0A");
+    }
   }
 }

package/styles/components/list/list.min.css

@@ -1 +1 @@
-@charset "UTF-8";@media screen and (prefers-color-scheme:light){:root{--jkl-list-marker-cross:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' fill='none'%3E%3Ccircle cx='9.5' cy='9.5' r='8.75' fill='%23f6b3b3'/%3E%3Cpath fill='%231b1917' d='m5.54 12.68 7.14-7.1.84.85-7.13 7.09z'/%3E%3Cpath fill='%231b1917' d='m12.67 13.47-7.13-7.1.85-.83 7.13 7.1z'/%3E%3C/svg%3E");--jkl-list-marker-check:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' fill='none'%3E%3Ccircle cx='9.5' cy='9.5' r='9.5' fill='%23acd3b5'/%3E%3Cpath stroke='%231b1917' stroke-width='1.5' d='m4.75 11 2.35 2.36 7.84-7.84'/%3E%3C/svg%3E");--jkl-list-text-color:#1b1917}}[data-theme=light]{--jkl-list-marker-cross:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' fill='none'%3E%3Ccircle cx='9.5' cy='9.5' r='8.75' fill='%23f6b3b3'/%3E%3Cpath fill='%231b1917' d='m5.54 12.68 7.14-7.1.84.85-7.13 7.09z'/%3E%3Cpath fill='%231b1917' d='m12.67 13.47-7.13-7.1.85-.83 7.13 7.1z'/%3E%3C/svg%3E");--jkl-list-marker-check:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' fill='none'%3E%3Ccircle cx='9.5' cy='9.5' r='9.5' fill='%23acd3b5'/%3E%3Cpath stroke='%231b1917' stroke-width='1.5' d='m4.75 11 2.35 2.36 7.84-7.84'/%3E%3C/svg%3E");--jkl-list-text-color:#1b1917}@media screen and (prefers-color-scheme:dark){:root{--jkl-list-marker-cross:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' fill='none'%3E%3Ccircle cx='9.5' cy='9.5' r='8.75' fill='%23de9e9e'/%3E%3Cpath fill='%231b1917' d='m5.54 12.68 7.14-7.1.84.85-7.13 7.09z'/%3E%3Cpath fill='%231b1917' d='m12.67 13.47-7.13-7.1.85-.83 7.13 7.1z'/%3E%3C/svg%3E");--jkl-list-marker-check:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' fill='none'%3E%3Ccircle cx='9.5' cy='9.5' r='9.5' fill='%2394b79b'/%3E%3Cpath stroke='%231b1917' stroke-width='1.5' d='m4.75 11 2.35 2.36 7.84-7.84'/%3E%3C/svg%3E");--jkl-list-text-color:#f9f9f9}}[data-theme=dark]{--jkl-list-marker-cross:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' fill='none'%3E%3Ccircle cx='9.5' cy='9.5' r='8.75' fill='%23de9e9e'/%3E%3Cpath fill='%231b1917' d='m5.54 12.68 7.14-7.1.84.85-7.13 7.09z'/%3E%3Cpath fill='%231b1917' d='m12.67 13.47-7.13-7.1.85-.83 7.13 7.1z'/%3E%3C/svg%3E");--jkl-list-marker-check:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' fill='none'%3E%3Ccircle cx='9.5' cy='9.5' r='9.5' fill='%2394b79b'/%3E%3Cpath stroke='%231b1917' stroke-width='1.5' d='m4.75 11 2.35 2.36 7.84-7.84'/%3E%3C/svg%3E");--jkl-list-text-color:#f9f9f9}.jkl-list{list-style-type:"•";margin:0;padding-left:calc(var(--jkl-unit-10)*2)}.jkl-list>.jkl-list__item>.jkl-list{margin:.5rem 0}.jkl-list:has(.jkl-list__item--iconed){padding:0}.jkl-list--ordered{padding-left:revert}.jkl-list--ordered>.jkl-list__item{list-style:decimal;padding-left:revert}.jkl-list--ordered .jkl-list--ordered>.jkl-list__item{list-style:lower-alpha}.jkl-list__item{color:var(--jkl-list-text-color);padding-left:calc(var(--jkl-unit-10)*1.5)}.jkl-list__item::marker{color:var(--jkl-list-text-color)}.jkl-list__item--iconed{display:flex;list-style:none;padding-left:0;position:relative}.jkl-list__item--iconed:before{background-size:contain;flex-shrink:0;height:1em;margin-right:.5em;margin-top:.2em;text-indent:-9999px;width:1em}.jkl-list__item--check:before{content:"✓";content:"✓"/"";alt:" ";background-image:var(--jkl-list-marker-check)}.jkl-list__item--cross:before{content:"❌";content:"❌"/"";alt:" ";background-image:var(--jkl-list-marker-cross)}@media screen and (forced-colors:active){.jkl-list .jkl-list__item--check:before{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' fill='none'%3E%3Ccircle cx='9.5' cy='9.5' r='9.5' fill='canvastext'/%3E%3Cpath stroke='canvas' stroke-width='1.5' d='m4.75 11 2.35 2.36 7.84-7.84'/%3E%3C/svg%3E")}.jkl-list .jkl-list__item--cross:before{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' fill='none'%3E%3Ccircle cx='9.5' cy='9.5' r='8.75' fill='canvastext'/%3E%3Cpath fill='canvas' d='m5.54 12.68 7.14-7.1.84.85-7.13 7.09z'/%3E%3Cpath fill='canvas' d='m12.67 13.47-7.13-7.1.85-.83 7.13 7.1z'/%3E%3C/svg%3E")}}
+@charset "UTF-8";@media screen and (prefers-color-scheme:light){:root{--jkl-list-marker-cross:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' fill='none'%3E%3Ccircle cx='9.5' cy='9.5' r='8.75' fill='%23f6b3b3'/%3E%3Cpath fill='%231b1917' d='m5.54 12.68 7.14-7.1.84.85-7.13 7.09z'/%3E%3Cpath fill='%231b1917' d='m12.67 13.47-7.13-7.1.85-.83 7.13 7.1z'/%3E%3C/svg%3E");--jkl-list-marker-check:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' fill='none'%3E%3Ccircle cx='9.5' cy='9.5' r='9.5' fill='%23acd3b5'/%3E%3Cpath stroke='%231b1917' stroke-width='1.5' d='m4.75 11 2.35 2.36 7.84-7.84'/%3E%3C/svg%3E");--jkl-list-text-color:#1b1917}}[data-theme=light]{--jkl-list-marker-cross:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' fill='none'%3E%3Ccircle cx='9.5' cy='9.5' r='8.75' fill='%23f6b3b3'/%3E%3Cpath fill='%231b1917' d='m5.54 12.68 7.14-7.1.84.85-7.13 7.09z'/%3E%3Cpath fill='%231b1917' d='m12.67 13.47-7.13-7.1.85-.83 7.13 7.1z'/%3E%3C/svg%3E");--jkl-list-marker-check:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' fill='none'%3E%3Ccircle cx='9.5' cy='9.5' r='9.5' fill='%23acd3b5'/%3E%3Cpath stroke='%231b1917' stroke-width='1.5' d='m4.75 11 2.35 2.36 7.84-7.84'/%3E%3C/svg%3E");--jkl-list-text-color:#1b1917}@media screen and (prefers-color-scheme:dark){:root{--jkl-list-marker-cross:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' fill='none'%3E%3Ccircle cx='9.5' cy='9.5' r='8.75' fill='%23de9e9e'/%3E%3Cpath fill='%231b1917' d='m5.54 12.68 7.14-7.1.84.85-7.13 7.09z'/%3E%3Cpath fill='%231b1917' d='m12.67 13.47-7.13-7.1.85-.83 7.13 7.1z'/%3E%3C/svg%3E");--jkl-list-marker-check:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' fill='none'%3E%3Ccircle cx='9.5' cy='9.5' r='9.5' fill='%2394b79b'/%3E%3Cpath stroke='%231b1917' stroke-width='1.5' d='m4.75 11 2.35 2.36 7.84-7.84'/%3E%3C/svg%3E");--jkl-list-text-color:#f9f9f9}}[data-theme=dark]{--jkl-list-marker-cross:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' fill='none'%3E%3Ccircle cx='9.5' cy='9.5' r='8.75' fill='%23de9e9e'/%3E%3Cpath fill='%231b1917' d='m5.54 12.68 7.14-7.1.84.85-7.13 7.09z'/%3E%3Cpath fill='%231b1917' d='m12.67 13.47-7.13-7.1.85-.83 7.13 7.1z'/%3E%3C/svg%3E");--jkl-list-marker-check:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' fill='none'%3E%3Ccircle cx='9.5' cy='9.5' r='9.5' fill='%2394b79b'/%3E%3Cpath stroke='%231b1917' stroke-width='1.5' d='m4.75 11 2.35 2.36 7.84-7.84'/%3E%3C/svg%3E");--jkl-list-text-color:#f9f9f9}@layer jokul.components{.jkl-list{list-style-type:"•";margin:0;padding-left:calc(var(--jkl-unit-10)*2)}.jkl-list>.jkl-list__item>.jkl-list{margin:.5rem 0}.jkl-list:has(.jkl-list__item--iconed){padding:0}.jkl-list--ordered{padding-left:revert}.jkl-list--ordered>.jkl-list__item{list-style:decimal;padding-left:revert}.jkl-list--ordered .jkl-list--ordered>.jkl-list__item{list-style:lower-alpha}.jkl-list__item{color:var(--jkl-list-text-color);padding-left:calc(var(--jkl-unit-10)*1.5)}.jkl-list__item::marker{color:var(--jkl-list-text-color)}.jkl-list__item--iconed{display:flex;list-style:none;padding-left:0;position:relative}.jkl-list__item--iconed:before{background-size:contain;flex-shrink:0;height:1em;margin-right:.5em;margin-top:.2em;text-indent:-9999px;width:1em}.jkl-list__item--check:before{content:"✓";content:"✓"/"";alt:" ";background-image:var(--jkl-list-marker-check)}.jkl-list__item--cross:before{content:"❌";content:"❌"/"";alt:" ";background-image:var(--jkl-list-marker-cross)}@media screen and (forced-colors:active){.jkl-list .jkl-list__item--check:before{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' fill='none'%3E%3Ccircle cx='9.5' cy='9.5' r='9.5' fill='canvastext'/%3E%3Cpath stroke='canvas' stroke-width='1.5' d='m4.75 11 2.35 2.36 7.84-7.84'/%3E%3C/svg%3E")}.jkl-list .jkl-list__item--cross:before{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' fill='none'%3E%3Ccircle cx='9.5' cy='9.5' r='8.75' fill='canvastext'/%3E%3Cpath fill='canvas' d='m5.54 12.68 7.14-7.1.84.85-7.13 7.09z'/%3E%3Cpath fill='canvas' d='m12.67 13.47-7.13-7.1.85-.83 7.13 7.1z'/%3E%3C/svg%3E")}}}

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);
+                }
             }
         }
     }