@fremtind/jokul 1.4.1 → 1.5.1

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-ufybbya forwards;
+  animation: 400ms cubic-bezier(0, 0, 0.3, 1) 250ms jkl-support-icon-entrance-uu4gtjy forwards;
 }
 .jkl-form-support-label--sr-only {
   border: 0 !important;
@@ -153,7 +155,7 @@
   white-space: nowrap !important; /* 3 */
 }
 
-@keyframes jkl-support-icon-entrance-ufybbya {
+@keyframes jkl-support-icon-entrance-uu4gtjy {
   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-ufybbya .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-ufybbya{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-uu4gtjy .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-uu4gtjy{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,11 +1,13 @@
 @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);
-  color: var(--link-color);
+  color: inherit;
   outline: none;
   text-decoration: none;
   transition-timing-function: ease;
@@ -16,7 +18,7 @@
   text-decoration: underline;
   text-underline-offset: 0.08lh;
   text-decoration-thickness: 0.05em;
-  text-decoration-color: rgba(from currentcolor r g b/0.7);
+  text-decoration-color: rgb(from currentColor r g b/70%);
 }
 .jkl-link__icon {
   margin-inline-start: 0.2em;

package/styles/components/link/link.min.css

@@ -1 +1 @@
-@charset "UTF-8";.jkl-link{--link-color:var(--jkl-color-text-default);color:var(--link-color);outline:none;text-decoration:none;transition-duration:75ms;transition-property:color;transition-timing-function:ease}.jkl-link__content{text-decoration:underline;-webkit-text-decoration-color:rgba(from currentcolor r g b/.7);text-decoration-color:rgba(from currentcolor r g b/.7);text-decoration-thickness:.05em;text-underline-offset:.08lh}.jkl-link__icon{-webkit-margin-start:.2em;margin-inline-start:.2em;-webkit-margin-before:-.1em;margin-block-start:-.1em;vertical-align:middle}.jkl-link--external:after,.jkl-link[download]:after,.jkl-link[target=_blank]:after{--jkl-icon-fill:0;--jkl-icon-size:1em;--jkl-icon-opsz:20;content:"\e89e"/"(Åpnes i ny fane)";-webkit-margin-before:-.1em;margin-block-start:-.1em;-webkit-padding-start:.2em;display:inline-block;font-family:Fremtind Material Symbols,Fremtind Material Symbols Fallback,sans-serif;font-feature-settings:"liga";-webkit-font-feature-settings:"liga";font-size:var(--jkl-icon-size,1.5rem);font-variation-settings:"FILL" var(--jkl-icon-fill,0),"GRAD" var(--jkl-icon-grade,0),"opsz" var(--jkl-icon-opsz,24);font-weight:var(--jkl-icon-weight,300);line-height:1;padding-inline-start:.2em;vertical-align:middle;-webkit-font-smoothing:antialiased;display:inline;transition-duration:.15s;transition-property:font-variation-settings,transform;transition-timing-function:ease}.jkl-link[download]:after{content:"\f090"/"(Last ned fil)"}.jkl-link:hover:not(:focus){--link-color:var(--jkl-color-text-subdued)}.jkl-link:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:0}@media screen and (forced-colors:active){.jkl-link:hover:not(:focus){--link-color:HighLight}}
+@charset "UTF-8";.jkl-link{--link-color:var(--jkl-color-text-default);color:inherit;outline:none;text-decoration:none;transition-duration:75ms;transition-property:color;transition-timing-function:ease}.jkl-link__content{text-decoration:underline;-webkit-text-decoration-color:rgb(from currentColor r g b/70%);text-decoration-color:rgb(from currentColor r g b/70%);text-decoration-thickness:.05em;text-underline-offset:.08lh}.jkl-link__icon{-webkit-margin-start:.2em;margin-inline-start:.2em;-webkit-margin-before:-.1em;margin-block-start:-.1em;vertical-align:middle}.jkl-link--external:after,.jkl-link[download]:after,.jkl-link[target=_blank]:after{--jkl-icon-fill:0;--jkl-icon-size:1em;--jkl-icon-opsz:20;content:"\e89e"/"(Åpnes i ny fane)";-webkit-margin-before:-.1em;margin-block-start:-.1em;-webkit-padding-start:.2em;display:inline-block;font-family:Fremtind Material Symbols,Fremtind Material Symbols Fallback,sans-serif;font-feature-settings:"liga";-webkit-font-feature-settings:"liga";font-size:var(--jkl-icon-size,1.5rem);font-variation-settings:"FILL" var(--jkl-icon-fill,0),"GRAD" var(--jkl-icon-grade,0),"opsz" var(--jkl-icon-opsz,24);font-weight:var(--jkl-icon-weight,300);line-height:1;padding-inline-start:.2em;vertical-align:middle;-webkit-font-smoothing:antialiased;display:inline;transition-duration:.15s;transition-property:font-variation-settings,transform;transition-timing-function:ease}.jkl-link[download]:after{content:"\f090"/"(Last ned fil)"}.jkl-link:hover:not(:focus){--link-color:var(--jkl-color-text-subdued)}.jkl-link:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:0}@media screen and (forced-colors:active){.jkl-link:hover:not(:focus){--link-color:HighLight}}

package/styles/components/link/link.scss

@@ -4,7 +4,7 @@
 .jkl-link {
     --link-color: var(--jkl-color-text-default);
 
-    color: var(--link-color);
+    color: inherit;
     outline: none;
     text-decoration: none;
 
@@ -15,7 +15,7 @@
         text-decoration: underline;
         text-underline-offset: 0.08lh;
         text-decoration-thickness: 0.05em;
-        text-decoration-color: rgba(from currentcolor r g b / 0.7);
+        text-decoration-color: rgb(from currentColor r g b / 70%);
     }
 
     &__icon {
@@ -46,7 +46,6 @@
         content: "\feff\f090" / "(Last ned fil)";
     }
 
-
     &:hover:not(:focus) {
         --link-color: var(--jkl-color-text-subdued);
     }

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")}}}