@fremtind/jokul 1.4.1 → 1.5.1

package/styles/components/modal/modal.scss

@@ -1,104 +1,107 @@
 @charset "UTF-8";
 @use "../../core/jkl";
 
-@include jkl.comfortable-density-variables {
-    @include jkl.declare-font-variables("jkl-modal-body", "body");
-    @include jkl.declare-font-variables("jkl-modal-title", "heading-3");
-
-    --jkl-modal-padding: #{jkl.$unit-50};
-    --jkl-modal-min-width: #{jkl.rem(220px)};
-    --jkl-modal-max-width: #{jkl.rem(660px)};
-    --jkl-modal-header-margin: 0 0 #{jkl.$unit-20};
-    --jkl-modal-actions-margin: #{jkl.$unit-50} 0 0 0;
-
-    @include jkl.small-device {
-        --jkl-modal-padding: #{jkl.$unit-40};
-        --jkl-modal-header-margin: 0 0 #{jkl.$unit-15};
-        --jkl-modal-actions-margin: #{jkl.$unit-40} 0 0 0;
+@layer jokul.components {
+    @include jkl.comfortable-density-variables {
+        @include jkl.declare-font-variables("jkl-modal-body", "body");
+        @include jkl.declare-font-variables("jkl-modal-title", "heading-3");
+
+        --jkl-modal-padding: #{jkl.$unit-50};
+        --jkl-modal-min-width: #{jkl.rem(220px)};
+        --jkl-modal-max-width: #{jkl.rem(660px)};
+        --jkl-modal-header-margin: 0 0 #{jkl.$unit-20};
+        --jkl-modal-actions-margin: #{jkl.$unit-50} 0 0 0;
+
+        @include jkl.small-device {
+            --jkl-modal-padding: #{jkl.$unit-40};
+            --jkl-modal-header-margin: 0 0 #{jkl.$unit-15};
+            --jkl-modal-actions-margin: #{jkl.$unit-40} 0 0 0;
+        }
     }
-}
 
-@include jkl.compact-density-variables {
-    @include jkl.declare-font-variables("jkl-modal-body", "small");
-    @include jkl.declare-font-variables("jkl-modal-title", "heading-4");
+    @include jkl.compact-density-variables {
+        @include jkl.declare-font-variables("jkl-modal-body", "small");
+        @include jkl.declare-font-variables("jkl-modal-title", "heading-4");
 
-    --jkl-modal-padding: #{jkl.$unit-30};
-    --jkl-modal-header-margin: 0 0 #{jkl.$unit-10};
-    --jkl-modal-actions-margin: #{jkl.$unit-30} 0 0 0;
-    --jkl-modal-min-width: #{jkl.rem(220px)};
-}
+        --jkl-modal-padding: #{jkl.$unit-30};
+        --jkl-modal-header-margin: 0 0 #{jkl.$unit-10};
+        --jkl-modal-actions-margin: #{jkl.$unit-30} 0 0 0;
+        --jkl-modal-min-width: #{jkl.rem(220px)};
+    }
 
-.jkl-modal-container,
-.jkl-modal-overlay {
-    position: fixed;
-    inset: 0;
-}
+    .jkl-modal-container,
+    .jkl-modal-overlay {
+        position: fixed;
+        inset: 0;
+    }
 
-.jkl-modal-container {
-    z-index: jkl.$z-index--modal;
-    display: flex;
+    .jkl-modal-container {
+        z-index: jkl.$z-index--modal;
+        display: flex;
 
-    &[aria-hidden="true"] {
-        display: none;
+        &[aria-hidden="true"] {
+            display: none;
+        }
     }
-}
 
-.jkl-modal-overlay {
-    background-color: rgb(27 25 23 / 80%);
-}
+    .jkl-modal-overlay {
+        background-color: rgb(27 25 23 / 80%);
+    }
 
-.jkl-modal {
-    margin: auto;
-    z-index: jkl.$z-index--modal;
-    position: relative;
+    .jkl-modal {
+        margin: auto;
+        z-index: jkl.$z-index--modal;
+        position: relative;
 
-    background-color: var(--jkl-color-background-container-high);
-    border-radius: jkl.rem(2px);
-    box-shadow: jkl.$shadow-task-card;
+        background-color: var(--jkl-color-background-container-high);
+        border-radius: jkl.rem(2px);
+        box-shadow: jkl.$shadow-task-card;
 
-    width: 100%;
-    min-width: var(--jkl-modal-min-width);
-    max-width: var(--jkl-modal-max-width);
-    max-height: 90vh;
-    overflow: auto;
+        width: 100%;
+        min-width: var(--jkl-modal-min-width);
+        max-width: var(--jkl-modal-max-width);
+        max-height: 90vh;
+        overflow: auto;
 
-    padding: var(--jkl-modal-padding);
-    display: flex;
-    flex-direction: column;
+        padding: var(--jkl-modal-padding);
+        display: flex;
+        flex-direction: column;
 
-    @include jkl.forced-colors-mode {
-        border-color: CanvasText;
-    }
+        @include jkl.forced-colors-mode {
+            border-color: CanvasText;
+        }
 
-    @include jkl.small-device {
-        margin: auto jkl.$unit-30;
+        @include jkl.small-device {
+            margin: auto jkl.$unit-30;
+        }
     }
-}
 
-.jkl-modal-header {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    margin: var(--jkl-modal-header-margin);
-    gap: var(--jkl-modal-gap);
-}
+    .jkl-modal-header {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        margin: var(--jkl-modal-header-margin);
+        gap: var(--jkl-modal-gap);
+    }
 
-.jkl-modal-body {
-    @include jkl.use-font-variables("jkl-modal-body");
-}
+    .jkl-modal-body {
+        @include jkl.use-font-variables("jkl-modal-body");
+    }
 
-.jkl-modal-title {
-    @include jkl.use-font-variables("jkl-modal-title");
-}
+    .jkl-modal-title {
+        @include jkl.use-font-variables("jkl-modal-title");
+    }
 
-.jkl-modal-actions {
-    margin: var(--jkl-modal-actions-margin);
-    display: flex;
-    flex-direction: column;
-    gap: jkl.$unit-20;
+    .jkl-modal-actions {
+        margin: var(--jkl-modal-actions-margin);
+        display: flex;
+        flex-direction: column;
+        gap: jkl.$unit-20;
 
-    @include jkl.from-medium-device {
-        flex-direction: row;
+        @include jkl.screen-from(60ch) {
+            flex-direction: row;
+            align-self: flex-end;
+        }
     }
 }

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

@@ -1,69 +1,73 @@
 /**
- * Do not edit directly
- * Generated on Wed, 18 Dec 2024 12:25:37 GMT
+ * Do not edit directly, this file was auto-generated.
  */
-.jkl-nav-link {
-  color: var(--jkl-color-text-default);
-  box-sizing: border-box;
-  font-weight: 400;
-  text-decoration: none;
-  position: relative;
-  padding-right: 0.15rem;
-  margin-right: -0.15rem;
-}
-.jkl-nav-link {
-  outline: 0;
-  border-style: none;
-  outline-style: none;
-}
-.jkl-nav-link:active, .jkl-nav-link:hover, .jkl-nav-link:focus {
-  outline: 0;
-  outline-style: none;
-}
-@media screen and (forced-colors: active) {
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+@layer jokul.components {
+  .jkl-nav-link {
+    color: var(--jkl-color-text-default);
+    box-sizing: border-box;
+    font-weight: 400;
+    text-decoration: none;
+    position: relative;
+    padding-right: 0.15rem;
+    margin-right: -0.15rem;
+  }
   .jkl-nav-link {
-    outline: revert;
-    border-style: revert;
-    outline-style: revert;
+    outline: 0;
+    border-style: none;
+    outline-style: none;
   }
   .jkl-nav-link:active, .jkl-nav-link:hover, .jkl-nav-link:focus {
-    outline: revert;
-    outline-style: revert;
+    outline: 0;
+    outline-style: none;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-nav-link {
+      outline: revert;
+      border-style: revert;
+      outline-style: revert;
+    }
+    .jkl-nav-link:active, .jkl-nav-link:hover, .jkl-nav-link:focus {
+      outline: revert;
+      outline-style: revert;
+    }
+  }
+  .jkl-nav-link:hover:not(:focus) {
+    color: var(--jkl-color-text-subdued);
+  }
+  .jkl-nav-link:focus-visible {
+    outline: 3px solid var(--jkl-color-border-action);
+    outline-offset: 0;
+  }
+  .jkl-nav-link:focus-visible .jkl-nav-link__icon, .jkl-nav-link:hover:not(:focus) .jkl-nav-link__icon {
+    transform: translateX(0.3rem);
+  }
+  .jkl-nav-link__icon {
+    margin-inline-start: 0.1em;
+    margin-block-start: -0.1em;
+    vertical-align: middle;
+    transition-timing-function: ease;
+    transition-duration: 150ms;
+    transition-property: transform;
+  }
+  .jkl-nav-link--active {
+    --jkl-icon-weight: 400;
+    font-weight: 700;
+    letter-spacing: -0.014em;
+  }
+  .jkl-nav-link--back {
+    padding-right: 0;
+    margin-right: 0;
+    padding-left: 0.15rem;
+    margin-left: -0.15rem;
+  }
+  .jkl-nav-link--back .jkl-nav-link__icon {
+    margin-inline: 0 0.1em;
+  }
+  .jkl-nav-link--back:focus-visible .jkl-nav-link__icon, .jkl-nav-link--back:hover:not(:focus) .jkl-nav-link__icon {
+    padding-left: 0;
+    transform: translateX(-0.3rem);
   }
-}
-.jkl-nav-link:hover:not(:focus) {
-  color: var(--jkl-color-text-subdued);
-}
-.jkl-nav-link:focus-visible {
-  outline: 3px solid var(--jkl-color-border-action);
-  outline-offset: 0;
-}
-.jkl-nav-link:focus-visible .jkl-nav-link__icon, .jkl-nav-link:hover:not(:focus) .jkl-nav-link__icon {
-  transform: translateX(0.3rem);
-}
-.jkl-nav-link__icon {
-  margin-inline-start: 0.1em;
-  margin-block-start: -0.1em;
-  vertical-align: middle;
-  transition-timing-function: ease;
-  transition-duration: 150ms;
-  transition-property: transform;
-}
-.jkl-nav-link--active {
-  --jkl-icon-weight: 400;
-  font-weight: 700;
-  letter-spacing: -0.014em;
-}
-.jkl-nav-link--back {
-  padding-right: 0;
-  margin-right: 0;
-  padding-left: 0.15rem;
-  margin-left: -0.15rem;
-}
-.jkl-nav-link--back .jkl-nav-link__icon {
-  margin-inline: 0 0.1em;
-}
-.jkl-nav-link--back:focus-visible .jkl-nav-link__icon, .jkl-nav-link--back:hover:not(:focus) .jkl-nav-link__icon {
-  padding-left: 0;
-  transform: translateX(-0.3rem);
 }

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

@@ -1 +1 @@
-.jkl-nav-link{border-style:none;box-sizing:border-box;color:var(--jkl-color-text-default);font-weight:400;margin-right:-.15rem;padding-right:.15rem;position:relative;text-decoration:none}.jkl-nav-link,.jkl-nav-link:active,.jkl-nav-link:focus,.jkl-nav-link:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-nav-link{border-style:revert}.jkl-nav-link,.jkl-nav-link:active,.jkl-nav-link:focus,.jkl-nav-link:hover{outline:revert;outline-style:revert}}.jkl-nav-link:hover:not(:focus){color:var(--jkl-color-text-subdued)}.jkl-nav-link:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:0}.jkl-nav-link:focus-visible .jkl-nav-link__icon,.jkl-nav-link:hover:not(:focus) .jkl-nav-link__icon{transform:translateX(.3rem)}.jkl-nav-link__icon{-webkit-margin-start:.1em;margin-inline-start:.1em;-webkit-margin-before:-.1em;margin-block-start:-.1em;transition-duration:.15s;transition-property:transform;transition-timing-function:ease;vertical-align:middle}.jkl-nav-link--active{--jkl-icon-weight:400;font-weight:700;letter-spacing:-.014em}.jkl-nav-link--back{margin-left:-.15rem;margin-right:0;padding-left:.15rem;padding-right:0}.jkl-nav-link--back .jkl-nav-link__icon{margin-inline:0 .1em}.jkl-nav-link--back:focus-visible .jkl-nav-link__icon,.jkl-nav-link--back:hover:not(:focus) .jkl-nav-link__icon{padding-left:0;transform:translateX(-.3rem)}
+@layer jokul.components{.jkl-nav-link{border-style:none;box-sizing:border-box;color:var(--jkl-color-text-default);font-weight:400;margin-right:-.15rem;padding-right:.15rem;position:relative;text-decoration:none}.jkl-nav-link,.jkl-nav-link:active,.jkl-nav-link:focus,.jkl-nav-link:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-nav-link{border-style:revert}.jkl-nav-link,.jkl-nav-link:active,.jkl-nav-link:focus,.jkl-nav-link:hover{outline:revert;outline-style:revert}}.jkl-nav-link:hover:not(:focus){color:var(--jkl-color-text-subdued)}.jkl-nav-link:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:0}.jkl-nav-link:focus-visible .jkl-nav-link__icon,.jkl-nav-link:hover:not(:focus) .jkl-nav-link__icon{transform:translateX(.3rem)}.jkl-nav-link__icon{-webkit-margin-start:.1em;margin-inline-start:.1em;-webkit-margin-before:-.1em;margin-block-start:-.1em;transition-duration:.15s;transition-property:transform;transition-timing-function:ease;vertical-align:middle}.jkl-nav-link--active{--jkl-icon-weight:400;font-weight:700;letter-spacing:-.014em}.jkl-nav-link--back{margin-left:-.15rem;margin-right:0;padding-left:.15rem;padding-right:0}.jkl-nav-link--back .jkl-nav-link__icon{margin-inline:0 .1em}.jkl-nav-link--back:focus-visible .jkl-nav-link__icon,.jkl-nav-link--back:hover:not(:focus) .jkl-nav-link__icon{padding-left:0;transform:translateX(-.3rem)}}

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

@@ -1,64 +1,66 @@
 @use "../../core/jkl";
 
-.jkl-nav-link {
-    color: var(--jkl-color-text-default);
+@layer jokul.components {
+    .jkl-nav-link {
+        color: var(--jkl-color-text-default);
 
-    box-sizing: border-box;
-    font-weight: jkl.$typography-weight-normal;
-    text-decoration: none;
-    position: relative;
+        box-sizing: border-box;
+        font-weight: jkl.$typography-weight-normal;
+        text-decoration: none;
+        position: relative;
 
-    // Unngå at border ved tastaturfokus "kapper" pila
-    $arrow-spacing: 0.15rem;
-    padding-right: $arrow-spacing;
-    margin-right: -#{$arrow-spacing};
+        // Unngå at border ved tastaturfokus "kapper" pila
+        $arrow-spacing: 0.15rem;
+        padding-right: $arrow-spacing;
+        margin-right: -#{$arrow-spacing};
 
-    @include jkl.reset-outline;
+        @include jkl.reset-outline;
 
-    &:hover:not(:focus) {
-        color: var(--jkl-color-text-subdued);
-    }
-
-    &:focus-visible {
-        @include jkl.focus-outline($offset: 0);
-    }
-
-    &:focus-visible,
-    &:hover:not(:focus) {
-        .jkl-nav-link__icon {
-            transform: translateX(0.3rem);
+        &:hover:not(:focus) {
+            color: var(--jkl-color-text-subdued);
         }
-    }
 
-    &__icon {
-        margin-inline-start: 0.1em;
-        margin-block-start: -0.1em;
-        vertical-align: middle;
+        &:focus-visible {
+            @include jkl.focus-outline($offset: 0);
+        }
 
-        @include jkl.motion;
-        transition-property: transform;
-    }
+        &:focus-visible,
+        &:hover:not(:focus) {
+            .jkl-nav-link__icon {
+                transform: translateX(0.3rem);
+            }
+        }
 
-    &--active {
-        @include jkl.no-grow-bold;
-    }
+        &__icon {
+            margin-inline-start: 0.1em;
+            margin-block-start: -0.1em;
+            vertical-align: middle;
 
-    &--back {
-        padding-right: 0;
-        margin-right: 0;
-        padding-left: $arrow-spacing;
-        margin-left: -#{$arrow-spacing};
+            @include jkl.motion;
+            transition-property: transform;
+        }
 
-        .jkl-nav-link__icon {
-            margin-inline: 0 0.1em;
+        &--active {
+            @include jkl.no-grow-bold;
         }
 
-        &:focus-visible,
-        &:hover:not(:focus) {
+        &--back {
+            padding-right: 0;
+            margin-right: 0;
+            padding-left: $arrow-spacing;
+            margin-left: -#{$arrow-spacing};
+
             .jkl-nav-link__icon {
-                padding-left: 0;
-                transform: translateX(-0.3rem);
+                margin-inline: 0 0.1em;
+            }
+
+            &:focus-visible,
+            &:hover:not(:focus) {
+                .jkl-nav-link__icon {
+                    padding-left: 0;
+                    transform: translateX(-0.3rem);
+                }
             }
         }
     }
-}
+}

package/styles/components/pagination/development/styles.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.
  */
 .pagination-example {
   display: flex;

package/styles/components/pagination/pagination.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-pagination {
   display: flex;

package/styles/components/popover/popover.css

@@ -1,28 +1,30 @@
 /**
- * Do not edit directly
- * Generated on Wed, 18 Dec 2024 12:25:37 GMT
+ * Do not edit directly, this file was auto-generated.
  */
-@media screen and (prefers-color-scheme: light) {
-  :root {
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+@layer jokul.components {
+  @media screen and (prefers-color-scheme: light) {
+    :root {
+      --jkl-datepicker-box-shadow: rgb(49 48 48 / 20%);
+    }
+  }
+  [data-theme=light] {
     --jkl-datepicker-box-shadow: rgb(49 48 48 / 20%);
   }
-}
-[data-theme=light] {
-  --jkl-datepicker-box-shadow: rgb(49 48 48 / 20%);
-}
-
-@media screen and (prefers-color-scheme: dark) {
-  :root {
+  @media screen and (prefers-color-scheme: dark) {
+    :root {
+      --jkl-datepicker-box-shadow: rgb(0 0 0 / 50%);
+    }
+  }
+  [data-theme=dark] {
     --jkl-datepicker-box-shadow: rgb(0 0 0 / 50%);
   }
-}
-[data-theme=dark] {
-  --jkl-datepicker-box-shadow: rgb(0 0 0 / 50%);
-}
-
-.jkl-popover {
-  padding: var(--popover-padding, 0);
-  z-index: 10000;
-  box-shadow: 0 4px 20px 0 var(--jkl-datepicker-box-shadow);
-  background-color: var(--jkl-color-background-container-high);
+  .jkl-popover {
+    padding: var(--popover-padding, 0);
+    z-index: 10000;
+    box-shadow: 0 4px 20px 0 var(--jkl-datepicker-box-shadow);
+    background-color: var(--jkl-color-background-container-high);
+  }
 }

package/styles/components/popover/popover.min.css

@@ -1 +1 @@
-@media screen and (prefers-color-scheme:light){:root{--jkl-datepicker-box-shadow:#31303033}}[data-theme=light]{--jkl-datepicker-box-shadow:#31303033}@media screen and (prefers-color-scheme:dark){:root{--jkl-datepicker-box-shadow:#00000080}}[data-theme=dark]{--jkl-datepicker-box-shadow:#00000080}.jkl-popover{background-color:var(--jkl-color-background-container-high);box-shadow:0 4px 20px 0 var(--jkl-datepicker-box-shadow);padding:var(--popover-padding,0);z-index:10000}
+@layer jokul.components{@media screen and (prefers-color-scheme:light){:root{--jkl-datepicker-box-shadow:#31303033}}[data-theme=light]{--jkl-datepicker-box-shadow:#31303033}@media screen and (prefers-color-scheme:dark){:root{--jkl-datepicker-box-shadow:#00000080}}[data-theme=dark]{--jkl-datepicker-box-shadow:#00000080}.jkl-popover{background-color:var(--jkl-color-background-container-high);box-shadow:0 4px 20px 0 var(--jkl-datepicker-box-shadow);padding:var(--popover-padding,0);z-index:10000}}

package/styles/components/popover/popover.scss

@@ -1,17 +1,19 @@
 @charset "UTF-8";
 @use "../../core/jkl";
 
-@include jkl.light-mode-variables {
-    --jkl-datepicker-box-shadow: rgb(49 48 48 / 20%);
-}
+@layer jokul.components {
+    @include jkl.light-mode-variables {
+        --jkl-datepicker-box-shadow: rgb(49 48 48 / 20%);
+    }
 
-@include jkl.dark-mode-variables {
-    --jkl-datepicker-box-shadow: rgb(0 0 0 / 50%);
-}
+    @include jkl.dark-mode-variables {
+        --jkl-datepicker-box-shadow: rgb(0 0 0 / 50%);
+    }
 
-.jkl-popover {
-    padding: var(--popover-padding, 0);
-    z-index: jkl.$z-index--floating;
-    box-shadow: 0 4px 20px 0 var(--jkl-datepicker-box-shadow);
-    background-color: var(--jkl-color-background-container-high);
-}
+    .jkl-popover {
+        padding: var(--popover-padding, 0);
+        z-index: jkl.$z-index--floating;
+        box-shadow: 0 4px 20px 0 var(--jkl-datepicker-box-shadow);
+        background-color: var(--jkl-color-background-container-high);
+    }
+}

package/styles/components/progress-bar/progress-bar.css

@@ -1,41 +1,44 @@
 /**
- * Do not edit directly
- * Generated on Wed, 18 Dec 2024 12:25:37 GMT
+ * Do not edit directly, this file was auto-generated.
  */
-.jkl-progress-bar {
-  --track-color: var(--jkl-color-border-separator);
-  --bar-color: var(--jkl-color-border-input-focus);
-  --bar-height: 0.25rem;
-  background-color: var(--track-color);
-  border-radius: 6.25rem;
-  height: var(--bar-height);
-  width: 100%;
-  overflow: hidden;
-}
-.jkl-progress-bar__tracker {
-  display: block;
-  height: var(--bar-height);
-  background-color: var(--bar-color);
-}
-@media screen and (forced-colors: active) {
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+@layer jokul.components {
   .jkl-progress-bar {
-    background-color: Canvas;
+    --track-color: var(--jkl-color-border-separator);
+    --bar-color: var(--jkl-color-border-input-focus);
+    --bar-height: 0.25rem;
+    background-color: var(--track-color);
+    border-radius: 6.25rem;
+    height: var(--bar-height);
+    width: 100%;
+    overflow: hidden;
   }
   .jkl-progress-bar__tracker {
-    background-color: CanvasText;
+    display: block;
+    height: var(--bar-height);
+    background-color: var(--bar-color);
   }
-}
-.jkl-progress-bar__tracker {
-  transition-property: width;
-  transition-timing-function: ease;
-  transition-duration: 150ms;
-}
-
-@keyframes jkl-downcount-um8jr86 {
-  from {
-    width: 100%;
+  @media screen and (forced-colors: active) {
+    .jkl-progress-bar {
+      background-color: Canvas;
+    }
+    .jkl-progress-bar__tracker {
+      background-color: CanvasText;
+    }
+  }
+  .jkl-progress-bar__tracker {
+    transition-property: width;
+    transition-timing-function: ease;
+    transition-duration: 150ms;
   }
-  to {
-    width: 0%;
+  @keyframes jkl-downcount-ueb596c {
+    from {
+      width: 100%;
+    }
+    to {
+      width: 0%;
+    }
   }
 }

package/styles/components/progress-bar/progress-bar.min.css

@@ -1 +1 @@
-.jkl-progress-bar{--track-color:var(--jkl-color-border-separator);--bar-color:var(--jkl-color-border-input-focus);--bar-height:0.25rem;background-color:var(--track-color);border-radius:6.25rem;height:var(--bar-height);overflow:hidden;width:100%}.jkl-progress-bar__tracker{background-color:var(--bar-color);display:block;height:var(--bar-height)}@media screen and (forced-colors:active){.jkl-progress-bar{background-color:Canvas}.jkl-progress-bar__tracker{background-color:CanvasText}}.jkl-progress-bar__tracker{transition-duration:.15s;transition-property:width;transition-timing-function:ease}@keyframes jkl-downcount-um8jr86{0%{width:100%}to{width:0}}
+@layer jokul.components{.jkl-progress-bar{--track-color:var(--jkl-color-border-separator);--bar-color:var(--jkl-color-border-input-focus);--bar-height:0.25rem;background-color:var(--track-color);border-radius:6.25rem;height:var(--bar-height);overflow:hidden;width:100%}.jkl-progress-bar__tracker{background-color:var(--bar-color);display:block;height:var(--bar-height)}@media screen and (forced-colors:active){.jkl-progress-bar{background-color:Canvas}.jkl-progress-bar__tracker{background-color:CanvasText}}.jkl-progress-bar__tracker{transition-duration:.15s;transition-property:width;transition-timing-function:ease}@keyframes jkl-downcount-ueb596c{0%{width:100%}to{width:0}}}