@fremtind/jokul 1.4.1 → 1.5.1

package/styles/components/menu/menu.css

@@ -1,132 +1,134 @@
 /**
- * Do not edit directly
- * Generated on Wed, 18 Dec 2024 12:25:37 GMT
+ * Do not edit directly, this file was auto-generated.
  */
-:root,
-[data-layout-density=comfortable],
-[data-density=comfortable] {
-  --jkl-menu-item-height: 3rem;
-  --jkl-menu-item-padding: 0.5rem calc(var(--jkl-unit-10) * 3);
-  --jkl-menu-item-font-size: var(--jkl-body-font-size);
-  --jkl-menu-item-line-height: var(--jkl-body-line-height);
-  --jkl-menu-item-font-weight: var(--jkl-body-font-weight);
-}
-
-[data-layout-density=compact],
-[data-density=compact] {
-  --jkl-menu-item-height: jkl.rem(32px);
-  --jkl-menu-item-padding: calc(var(--jkl-unit-10) * 0.5) calc(var(--jkl-unit-10) * 1.5);
-  --jkl-menu-item-font-size: var(--jkl-small-font-size);
-  --jkl-menu-item-line-height: var(--jkl-small-line-height);
-  --jkl-menu-item-font-weight: var(--jkl-small-font-weight);
-}
-
-.jkl-menu-item {
-  --background-color: var(--jkl-color-background-interactive);
-  background-color: var(--background-color);
-  color: var(--jkl-color-text-default);
-  cursor: pointer;
-  text-decoration: none;
-  box-sizing: border-box;
-  user-select: none;
-  font-size: var(--jkl-menu-item-font-size);
-  line-height: var(--jkl-menu-item-line-height);
-  font-weight: var(--jkl-menu-item-font-weight);
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  width: 100%;
-  height: var(--jkl-menu-item-height);
-  padding: var(--jkl-menu-item-padding);
-}
-.jkl-menu-item {
-  outline: 0;
-  border-style: none;
-  outline-style: none;
-}
-.jkl-menu-item:active, .jkl-menu-item:hover, .jkl-menu-item:focus {
-  outline: 0;
-  outline-style: none;
-}
-@media screen and (forced-colors: active) {
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+@layer jokul.components {
+  :root,
+  [data-layout-density=comfortable],
+  [data-density=comfortable] {
+    --jkl-menu-item-height: 3rem;
+    --jkl-menu-item-padding: 0.5rem calc(var(--jkl-unit-10) * 3);
+    --jkl-menu-item-font-size: var(--jkl-body-font-size);
+    --jkl-menu-item-line-height: var(--jkl-body-line-height);
+    --jkl-menu-item-font-weight: var(--jkl-body-font-weight);
+  }
+  [data-layout-density=compact],
+  [data-density=compact] {
+    --jkl-menu-item-height: jkl.rem(32px);
+    --jkl-menu-item-padding: calc(var(--jkl-unit-10) * 0.5) calc(var(--jkl-unit-10) * 1.5);
+    --jkl-menu-item-font-size: var(--jkl-small-font-size);
+    --jkl-menu-item-line-height: var(--jkl-small-line-height);
+    --jkl-menu-item-font-weight: var(--jkl-small-font-weight);
+  }
   .jkl-menu-item {
-    outline: revert;
-    border-style: revert;
-    outline-style: revert;
+    --background-color: var(--jkl-color-background-interactive);
+    background-color: var(--background-color);
+    color: var(--jkl-color-text-default);
+    cursor: pointer;
+    text-decoration: none;
+    box-sizing: border-box;
+    user-select: none;
+    font-size: var(--jkl-menu-item-font-size);
+    line-height: var(--jkl-menu-item-line-height);
+    font-weight: var(--jkl-menu-item-font-weight);
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    width: 100%;
+    height: var(--jkl-menu-item-height);
+    padding: var(--jkl-menu-item-padding);
+  }
+  .jkl-menu-item {
+    outline: 0;
+    border-style: none;
+    outline-style: none;
   }
   .jkl-menu-item:active, .jkl-menu-item:hover, .jkl-menu-item:focus {
-    outline: revert;
-    outline-style: revert;
+    outline: 0;
+    outline-style: none;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-menu-item {
+      outline: revert;
+      border-style: revert;
+      outline-style: revert;
+    }
+    .jkl-menu-item:active, .jkl-menu-item:hover, .jkl-menu-item:focus {
+      outline: revert;
+      outline-style: revert;
+    }
+  }
+  .jkl-menu-item__content {
+    display: flex;
+    gap: calc(var(--jkl-unit-10) * 0.5);
+    justify-content: flex-start;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    flex-grow: 1;
+    flex-shrink: 1;
+    max-width: 100%;
+  }
+  .jkl-menu-item__icon {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+  .jkl-menu-item__arrow {
+    display: flex;
+    align-items: center;
+  }
+  .jkl-menu-item__chevron {
+    flex-shrink: 0;
+  }
+  .jkl-menu-item:hover, .jkl-menu-item:focus-visible {
+    --background-color: var(--jkl-color-background-interactive-hover);
   }
 }
-.jkl-menu-item__content {
-  display: flex;
-  gap: calc(var(--jkl-unit-10) * 0.5);
-  justify-content: flex-start;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  flex-grow: 1;
-  flex-shrink: 1;
-  max-width: 100%;
-}
-.jkl-menu-item__icon {
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-}
-.jkl-menu-item__arrow {
-  display: flex;
-  align-items: center;
-}
-.jkl-menu-item__chevron {
-  flex-shrink: 0;
-}
-.jkl-menu-item:hover, .jkl-menu-item:focus-visible {
-  --background-color: var(--jkl-color-background-interactive-hover);
-}
-
-.jkl-menu-divider {
-  width: 100%;
-  margin-block: 0;
-  border: none;
-  border-bottom: 0.0625rem solid var(--jkl-color-border-separator);
+@layer jokul.components {
+  .jkl-menu-divider {
+    width: 100%;
+    margin-block: 0;
+    border: none;
+    border-bottom: 0.0625rem solid var(--jkl-color-border-separator);
+  }
 }
-
-@media screen and (prefers-color-scheme: light) {
-  :root {
+@layer jokul.components {
+  @media screen and (prefers-color-scheme: light) {
+    :root {
+      --jkl-menu-border-color: transparent;
+    }
+  }
+  [data-theme=light] {
     --jkl-menu-border-color: transparent;
   }
-}
-[data-theme=light] {
-  --jkl-menu-border-color: transparent;
-}
-
-@media screen and (prefers-color-scheme: dark) {
-  :root {
+  @media screen and (prefers-color-scheme: dark) {
+    :root {
+      --jkl-menu-border-color: #f9f9f9;
+    }
+  }
+  [data-theme=dark] {
     --jkl-menu-border-color: #f9f9f9;
   }
-}
-[data-theme=dark] {
-  --jkl-menu-border-color: #f9f9f9;
-}
-
-.jkl-menu {
-  background-color: var(--jkl-color-background-container-high);
-  width: 100%;
-  max-width: 21rem;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  flex-wrap: nowrap;
-  box-shadow: 0 0.25rem 1.25rem rgba(49, 48, 48, 0.2);
-  border-radius: 0.125rem;
-  border: 2px solid var(--jkl-menu-border-color);
-  z-index: 7000;
-}
-.jkl-menu:focus-visible {
-  outline: none;
-}
-.jkl-menu .jkl-menu[data-placement=bottom-start] {
-  box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 2px 0, rgba(0, 0, 0, 0.14) -1px 2px 2px 0, rgba(0, 0, 0, 0.12) 3px 1px 5px 0;
+  .jkl-menu {
+    background-color: var(--jkl-color-background-container-high);
+    width: 100%;
+    max-width: 21rem;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    flex-wrap: nowrap;
+    box-shadow: 0 0.25rem 1.25rem rgba(49, 48, 48, 0.2);
+    border-radius: 0.125rem;
+    border: 2px solid var(--jkl-menu-border-color);
+    z-index: 7000;
+  }
+  .jkl-menu:focus-visible {
+    outline: none;
+  }
+  .jkl-menu .jkl-menu[data-placement=bottom-start] {
+    box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 2px 0, rgba(0, 0, 0, 0.14) -1px 2px 2px 0, rgba(0, 0, 0, 0.12) 3px 1px 5px 0;
+  }
 }

package/styles/components/menu/menu.min.css

@@ -1 +1 @@
-:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-menu-item-height:3rem;--jkl-menu-item-padding:0.5rem calc(var(--jkl-unit-10)*3);--jkl-menu-item-font-size:var(--jkl-body-font-size);--jkl-menu-item-line-height:var(--jkl-body-line-height);--jkl-menu-item-font-weight:var(--jkl-body-font-weight)}[data-density=compact],[data-layout-density=compact]{--jkl-menu-item-height:jkl.rem(32px);--jkl-menu-item-padding:calc(var(--jkl-unit-10)*0.5) calc(var(--jkl-unit-10)*1.5);--jkl-menu-item-font-size:var(--jkl-small-font-size);--jkl-menu-item-line-height:var(--jkl-small-line-height);--jkl-menu-item-font-weight:var(--jkl-small-font-weight)}.jkl-menu-item{--background-color:var(--jkl-color-background-interactive);align-items:center;background-color:var(--background-color);border-style:none;box-sizing:border-box;color:var(--jkl-color-text-default);cursor:pointer;display:flex;font-size:var(--jkl-menu-item-font-size);font-weight:var(--jkl-menu-item-font-weight);gap:.5rem;height:var(--jkl-menu-item-height);line-height:var(--jkl-menu-item-line-height);padding:var(--jkl-menu-item-padding);text-decoration:none;-webkit-user-select:none;user-select:none;width:100%}.jkl-menu-item,.jkl-menu-item:active,.jkl-menu-item:focus,.jkl-menu-item:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-menu-item{border-style:revert}.jkl-menu-item,.jkl-menu-item:active,.jkl-menu-item:focus,.jkl-menu-item:hover{outline:revert;outline-style:revert}}.jkl-menu-item__content{display:flex;flex-grow:1;flex-shrink:1;gap:calc(var(--jkl-unit-10)*.5);justify-content:flex-start;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.jkl-menu-item__icon{flex-shrink:0}.jkl-menu-item__arrow,.jkl-menu-item__icon{align-items:center;display:flex}.jkl-menu-item__chevron{flex-shrink:0}.jkl-menu-item:focus-visible,.jkl-menu-item:hover{--background-color:var(--jkl-color-background-interactive-hover)}.jkl-menu-divider{border:none;border-bottom:.0625rem solid var(--jkl-color-border-separator);margin-block:0;width:100%}@media screen and (prefers-color-scheme:light){:root{--jkl-menu-border-color:#0000}}[data-theme=light]{--jkl-menu-border-color:#0000}@media screen and (prefers-color-scheme:dark){:root{--jkl-menu-border-color:#f9f9f9}}[data-theme=dark]{--jkl-menu-border-color:#f9f9f9}.jkl-menu{align-items:flex-start;background-color:var(--jkl-color-background-container-high);border:2px solid var(--jkl-menu-border-color);border-radius:.125rem;box-shadow:0 .25rem 1.25rem #31303033;display:flex;flex-direction:column;flex-wrap:nowrap;max-width:21rem;width:100%;z-index:7000}.jkl-menu:focus-visible{outline:none}.jkl-menu .jkl-menu[data-placement=bottom-start]{box-shadow:0 -1px 2px 0 #0003,-1px 2px 2px 0 #00000024,3px 1px 5px 0 #0000001f}
+@layer jokul.components{:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-menu-item-height:3rem;--jkl-menu-item-padding:0.5rem calc(var(--jkl-unit-10)*3);--jkl-menu-item-font-size:var(--jkl-body-font-size);--jkl-menu-item-line-height:var(--jkl-body-line-height);--jkl-menu-item-font-weight:var(--jkl-body-font-weight)}[data-density=compact],[data-layout-density=compact]{--jkl-menu-item-height:jkl.rem(32px);--jkl-menu-item-padding:calc(var(--jkl-unit-10)*0.5) calc(var(--jkl-unit-10)*1.5);--jkl-menu-item-font-size:var(--jkl-small-font-size);--jkl-menu-item-line-height:var(--jkl-small-line-height);--jkl-menu-item-font-weight:var(--jkl-small-font-weight)}.jkl-menu-item{--background-color:var(--jkl-color-background-interactive);align-items:center;background-color:var(--background-color);border-style:none;box-sizing:border-box;color:var(--jkl-color-text-default);cursor:pointer;display:flex;font-size:var(--jkl-menu-item-font-size);font-weight:var(--jkl-menu-item-font-weight);gap:.5rem;height:var(--jkl-menu-item-height);line-height:var(--jkl-menu-item-line-height);padding:var(--jkl-menu-item-padding);text-decoration:none;-webkit-user-select:none;user-select:none;width:100%}.jkl-menu-item,.jkl-menu-item:active,.jkl-menu-item:focus,.jkl-menu-item:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-menu-item{border-style:revert}.jkl-menu-item,.jkl-menu-item:active,.jkl-menu-item:focus,.jkl-menu-item:hover{outline:revert;outline-style:revert}}.jkl-menu-item__content{display:flex;flex-grow:1;flex-shrink:1;gap:calc(var(--jkl-unit-10)*.5);justify-content:flex-start;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.jkl-menu-item__icon{flex-shrink:0}.jkl-menu-item__arrow,.jkl-menu-item__icon{align-items:center;display:flex}.jkl-menu-item__chevron{flex-shrink:0}.jkl-menu-item:focus-visible,.jkl-menu-item:hover{--background-color:var(--jkl-color-background-interactive-hover)}}@layer jokul.components{.jkl-menu-divider{border:none;border-bottom:.0625rem solid var(--jkl-color-border-separator);margin-block:0;width:100%}}@layer jokul.components{@media screen and (prefers-color-scheme:light){:root{--jkl-menu-border-color:#0000}}[data-theme=light]{--jkl-menu-border-color:#0000}@media screen and (prefers-color-scheme:dark){:root{--jkl-menu-border-color:#f9f9f9}}[data-theme=dark]{--jkl-menu-border-color:#f9f9f9}.jkl-menu{align-items:flex-start;background-color:var(--jkl-color-background-container-high);border:2px solid var(--jkl-menu-border-color);border-radius:.125rem;box-shadow:0 .25rem 1.25rem #31303033;display:flex;flex-direction:column;flex-wrap:nowrap;max-width:21rem;width:100%;z-index:7000}.jkl-menu:focus-visible{outline:none}.jkl-menu .jkl-menu[data-placement=bottom-start]{box-shadow:0 -1px 2px 0 #0003,-1px 2px 2px 0 #00000024,3px 1px 5px 0 #0000001f}}

package/styles/components/menu/menu.scss

@@ -3,34 +3,38 @@
 @use "menu-item";
 @use "menu-divider";
 
-@include jkl.light-mode-variables {
-    --jkl-menu-border-color: transparent;
-}
+@layer jokul.components {
+    @include jkl.light-mode-variables {
+        --jkl-menu-border-color: transparent;
+    }
 
-@include jkl.dark-mode-variables {
-    --jkl-menu-border-color: #{jkl.$color-snohvit};
-}
+    @include jkl.dark-mode-variables {
+        --jkl-menu-border-color: #{jkl.$color-snohvit};
+    }
 
-.jkl-menu {
-    background-color: var(--jkl-color-background-container-high);
+    .jkl-menu {
+        background-color: var(--jkl-color-background-container-high);
 
-    width: 100%;
-    max-width: jkl.rem(336px);
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    flex-wrap: nowrap;
-    box-shadow: 0 jkl.rem(4px) jkl.rem(20px) rgb(49 48 48 / 20%);
-    border-radius: jkl.rem(2px);
-    border: 2px solid var(--jkl-menu-border-color);
-    z-index: jkl.$z-index--dropdown;
+        width: 100%;
+        max-width: jkl.rem(336px);
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        flex-wrap: nowrap;
+        box-shadow: 0 jkl.rem(4px) jkl.rem(20px) rgb(49 48 48 / 20%);
+        border-radius: jkl.rem(2px);
+        border: 2px solid var(--jkl-menu-border-color);
+        z-index: jkl.$z-index--dropdown;
 
-    &:focus-visible {
-        outline: none;
-    }
+        &:focus-visible {
+            outline: none;
+        }
 
-    & &[data-placement="bottom-start"] {
-        box-shadow: rgb(0 0 0 / 20%) 0 -1px 2px 0,
-            rgb(0 0 0 / 14%) -1px 2px 2px 0, rgb(0 0 0 / 12%) 3px 1px 5px 0;
+        & &[data-placement="bottom-start"] {
+            box-shadow:
+                rgb(0 0 0 / 20%) 0 -1px 2px 0,
+                rgb(0 0 0 / 14%) -1px 2px 2px 0,
+                rgb(0 0 0 / 12%) 3px 1px 5px 0;
+        }
     }
 }

package/styles/components/message/message.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],
@@ -175,7 +177,7 @@
   --background-color: var(--jkl-color-background-alert-success);
 }
 .jkl-message--dismissed {
-  animation: jkl-dismiss-ungjl4a 400ms ease-in-out forwards;
+  animation: jkl-dismiss-ubb4zuv 400ms ease-in-out forwards;
   transition: visibility 0ms 400ms;
   visibility: hidden;
 }
@@ -195,7 +197,7 @@
   }
 }
 
-@keyframes jkl-dismiss-ungjl4a {
+@keyframes jkl-dismiss-ubb4zuv {
   from {
     opacity: 1;
     transform: translate3d(0, 0, 0);

package/styles/components/message/message.min.css

@@ -1 +1 @@
-:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-message-content-font-size:var(--jkl-body-font-size);--jkl-message-content-line-height:var(--jkl-body-line-height);--jkl-message-content-font-weight:var(--jkl-body-font-weight);--jkl-message-title-font-size:var(--jkl-heading-4-font-size);--jkl-message-title-line-height:var(--jkl-heading-4-line-height);--jkl-message-title-font-weight:var(--jkl-heading-4-font-weight);--jkl-message-icon-size:1.5rem;--jkl-message-icon-left:1rem;--jkl-message-icon-top:1.5rem;--jkl-message-title-margin:0 0 calc(var(--jkl-unit-10)*0.5) 0;--jkl-message-dismiss-button-size:2.75rem;--jkl-message-gap:calc(var(--jkl-unit-10)*1.5);--jkl-message-padding:calc(var(--jkl-unit-10)*2) calc(var(--jkl-unit-10)*1.5)}@media (min-width:680px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-message-gap:calc(var(--jkl-unit-10)*2);--jkl-message-padding:calc(var(--jkl-unit-10)*3) calc(var(--jkl-unit-10)*2)}}[data-density=compact],[data-layout-density=compact]{--jkl-message-content-font-size:var(--jkl-small-font-size);--jkl-message-content-line-height:var(--jkl-small-line-height);--jkl-message-content-font-weight:var(--jkl-small-font-weight);--jkl-message-title-font-size:var(--jkl-heading-5-font-size);--jkl-message-title-line-height:var(--jkl-heading-5-line-height);--jkl-message-title-font-weight:var(--jkl-heading-5-font-weight);--jkl-message-icon-size:1.25rem;--jkl-message-icon-left:0.375rem;--jkl-message-icon-top:0.875rem;--jkl-message-dismiss-button-size:2rem;--jkl-message-gap:0.5rem;--jkl-message-padding:calc(var(--jkl-unit-10)*1.5) 0.5rem}.jkl-message{--background-color:var(--jkl-color-background-alert-neutral);--text-color:var(--jkl-color-text-on-alert);align-items:start;background-color:var(--background-color);border-radius:.25rem;box-sizing:border-box;color:var(--text-color);display:grid;grid-template-areas:"icon content dismiss";grid-template-columns:auto 1fr auto;max-width:35rem;padding:var(--jkl-message-padding);width:100%}.jkl-message__icon{grid-area:icon;margin-right:var(--jkl-message-gap);width:var(--jkl-message-icon-size)}@media screen and (forced-colors:active){.jkl-message__icon,.jkl-message__icon path,.jkl-message__icon svg{stroke:CanvasText}}.jkl-message__content{grid-area:content}.jkl-message__message{font-size:var(--jkl-message-content-font-size);font-weight:var(--jkl-message-content-font-weight);line-height:var(--jkl-message-content-line-height);margin-top:-.125rem}.jkl-message__title{font-size:var(--jkl-message-title-font-size);font-weight:var(--jkl-message-title-font-weight);line-height:var(--jkl-message-title-line-height);margin:var(--jkl-message-title-margin)}.jkl-message__title~.jkl-message__message{margin-top:0}.jkl-message__dismiss-button{background-color:initial;border-style:none;color:inherit;cursor:pointer;display:grid;grid-area:dismiss;justify-self:end;outline:0;outline-style:none;padding:0;place-content:center;position:relative}.jkl-message__dismiss-button:active,.jkl-message__dismiss-button:focus,.jkl-message__dismiss-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-message__dismiss-button{border-style:revert}.jkl-message__dismiss-button,.jkl-message__dismiss-button:active,.jkl-message__dismiss-button:focus,.jkl-message__dismiss-button:hover{outline:revert;outline-style:revert}.jkl-message__dismiss-button,.jkl-message__dismiss-button path,.jkl-message__dismiss-button svg{stroke:ButtonText}.jkl-message__dismiss-button{background-color:ButtonFace}}.jkl-message__dismiss-button:after{content:"";display:block;height:var(--jkl-message-dismiss-button-size);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--jkl-message-dismiss-button-size)}.jkl-message__dismiss-button:hover{color:#636060}@media screen and (forced-colors:active){.jkl-message__dismiss-button:hover,.jkl-message__dismiss-button:hover path,.jkl-message__dismiss-button:hover svg{stroke:ButtonText}}.jkl-message__dismiss-button:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-message--full{max-width:100%}.jkl-message--info{--background-color:var(--jkl-color-background-alert-info)}.jkl-message--warning{--background-color:var(--jkl-color-background-alert-warning)}.jkl-message--error{--background-color:var(--jkl-color-background-alert-error)}.jkl-message--success{--background-color:var(--jkl-color-background-alert-success)}.jkl-message--dismissed{animation:jkl-dismiss-ungjl4a .4s ease-in-out forwards;transition:visibility 0s .4s;visibility:hidden}@media screen and (forced-colors:active){.jkl-message{border:2px solid CanvasText}.jkl-message--info{border-style:dotted}.jkl-message--warning{border-style:dashed}.jkl-message--error{border-style:double;border-width:4px}}@keyframes jkl-dismiss-ungjl4a{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,-50%,0)}}.jkl-form-error-message{padding-bottom:calc(var(--jkl-unit-10)*5)}
+:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-message-content-font-size:var(--jkl-body-font-size);--jkl-message-content-line-height:var(--jkl-body-line-height);--jkl-message-content-font-weight:var(--jkl-body-font-weight);--jkl-message-title-font-size:var(--jkl-heading-4-font-size);--jkl-message-title-line-height:var(--jkl-heading-4-line-height);--jkl-message-title-font-weight:var(--jkl-heading-4-font-weight);--jkl-message-icon-size:1.5rem;--jkl-message-icon-left:1rem;--jkl-message-icon-top:1.5rem;--jkl-message-title-margin:0 0 calc(var(--jkl-unit-10)*0.5) 0;--jkl-message-dismiss-button-size:2.75rem;--jkl-message-gap:calc(var(--jkl-unit-10)*1.5);--jkl-message-padding:calc(var(--jkl-unit-10)*2) calc(var(--jkl-unit-10)*1.5)}@media (min-width:680px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-message-gap:calc(var(--jkl-unit-10)*2);--jkl-message-padding:calc(var(--jkl-unit-10)*3) calc(var(--jkl-unit-10)*2)}}[data-density=compact],[data-layout-density=compact]{--jkl-message-content-font-size:var(--jkl-small-font-size);--jkl-message-content-line-height:var(--jkl-small-line-height);--jkl-message-content-font-weight:var(--jkl-small-font-weight);--jkl-message-title-font-size:var(--jkl-heading-5-font-size);--jkl-message-title-line-height:var(--jkl-heading-5-line-height);--jkl-message-title-font-weight:var(--jkl-heading-5-font-weight);--jkl-message-icon-size:1.25rem;--jkl-message-icon-left:0.375rem;--jkl-message-icon-top:0.875rem;--jkl-message-dismiss-button-size:2rem;--jkl-message-gap:0.5rem;--jkl-message-padding:calc(var(--jkl-unit-10)*1.5) 0.5rem}.jkl-message{--background-color:var(--jkl-color-background-alert-neutral);--text-color:var(--jkl-color-text-on-alert);align-items:start;background-color:var(--background-color);border-radius:.25rem;box-sizing:border-box;color:var(--text-color);display:grid;grid-template-areas:"icon content dismiss";grid-template-columns:auto 1fr auto;max-width:35rem;padding:var(--jkl-message-padding);width:100%}.jkl-message__icon{grid-area:icon;margin-right:var(--jkl-message-gap);width:var(--jkl-message-icon-size)}@media screen and (forced-colors:active){.jkl-message__icon,.jkl-message__icon path,.jkl-message__icon svg{stroke:CanvasText}}.jkl-message__content{grid-area:content}.jkl-message__message{font-size:var(--jkl-message-content-font-size);font-weight:var(--jkl-message-content-font-weight);line-height:var(--jkl-message-content-line-height);margin-top:-.125rem}.jkl-message__title{font-size:var(--jkl-message-title-font-size);font-weight:var(--jkl-message-title-font-weight);line-height:var(--jkl-message-title-line-height);margin:var(--jkl-message-title-margin)}.jkl-message__title~.jkl-message__message{margin-top:0}.jkl-message__dismiss-button{background-color:initial;border-style:none;color:inherit;cursor:pointer;display:grid;grid-area:dismiss;justify-self:end;outline:0;outline-style:none;padding:0;place-content:center;position:relative}.jkl-message__dismiss-button:active,.jkl-message__dismiss-button:focus,.jkl-message__dismiss-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-message__dismiss-button{border-style:revert}.jkl-message__dismiss-button,.jkl-message__dismiss-button:active,.jkl-message__dismiss-button:focus,.jkl-message__dismiss-button:hover{outline:revert;outline-style:revert}.jkl-message__dismiss-button,.jkl-message__dismiss-button path,.jkl-message__dismiss-button svg{stroke:ButtonText}.jkl-message__dismiss-button{background-color:ButtonFace}}.jkl-message__dismiss-button:after{content:"";display:block;height:var(--jkl-message-dismiss-button-size);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--jkl-message-dismiss-button-size)}.jkl-message__dismiss-button:hover{color:#636060}@media screen and (forced-colors:active){.jkl-message__dismiss-button:hover,.jkl-message__dismiss-button:hover path,.jkl-message__dismiss-button:hover svg{stroke:ButtonText}}.jkl-message__dismiss-button:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-message--full{max-width:100%}.jkl-message--info{--background-color:var(--jkl-color-background-alert-info)}.jkl-message--warning{--background-color:var(--jkl-color-background-alert-warning)}.jkl-message--error{--background-color:var(--jkl-color-background-alert-error)}.jkl-message--success{--background-color:var(--jkl-color-background-alert-success)}.jkl-message--dismissed{animation:jkl-dismiss-ubb4zuv .4s ease-in-out forwards;transition:visibility 0s .4s;visibility:hidden}@media screen and (forced-colors:active){.jkl-message{border:2px solid CanvasText}.jkl-message--info{border-style:dotted}.jkl-message--warning{border-style:dashed}.jkl-message--error{border-style:double;border-width:4px}}@keyframes jkl-dismiss-ubb4zuv{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,-50%,0)}}.jkl-form-error-message{padding-bottom:calc(var(--jkl-unit-10)*5)}

package/styles/components/modal/modal.css

@@ -1,120 +1,116 @@
 /**
- * Do not edit directly
- * Generated on Wed, 18 Dec 2024 12:25:37 GMT
+ * Do not edit directly, this file was auto-generated.
  */
-:root,
-[data-layout-density=comfortable],
-[data-density=comfortable] {
-  --jkl-modal-body-font-size: var(--jkl-body-font-size);
-  --jkl-modal-body-line-height: var(--jkl-body-line-height);
-  --jkl-modal-body-font-weight: var(--jkl-body-font-weight);
-  --jkl-modal-title-font-size: var(--jkl-heading-3-font-size);
-  --jkl-modal-title-line-height: var(--jkl-heading-3-line-height);
-  --jkl-modal-title-font-weight: var(--jkl-heading-3-font-weight);
-  --jkl-modal-padding: calc(var(--jkl-unit-10) * 5);
-  --jkl-modal-min-width: 13.75rem;
-  --jkl-modal-max-width: 41.25rem;
-  --jkl-modal-header-margin: 0 0 calc(var(--jkl-unit-10) * 2);
-  --jkl-modal-actions-margin: calc(var(--jkl-unit-10) * 5) 0 0 0;
-}
-@media (width >= 0) and (max-width: 679px) {
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+@layer jokul.components {
   :root,
   [data-layout-density=comfortable],
   [data-density=comfortable] {
-    --jkl-modal-padding: calc(var(--jkl-unit-10) * 4);
-    --jkl-modal-header-margin: 0 0 calc(var(--jkl-unit-10) * 1.5);
-    --jkl-modal-actions-margin: calc(var(--jkl-unit-10) * 4) 0 0 0;
+    --jkl-modal-body-font-size: var(--jkl-body-font-size);
+    --jkl-modal-body-line-height: var(--jkl-body-line-height);
+    --jkl-modal-body-font-weight: var(--jkl-body-font-weight);
+    --jkl-modal-title-font-size: var(--jkl-heading-3-font-size);
+    --jkl-modal-title-line-height: var(--jkl-heading-3-line-height);
+    --jkl-modal-title-font-weight: var(--jkl-heading-3-font-weight);
+    --jkl-modal-padding: calc(var(--jkl-unit-10) * 5);
+    --jkl-modal-min-width: 13.75rem;
+    --jkl-modal-max-width: 41.25rem;
+    --jkl-modal-header-margin: 0 0 calc(var(--jkl-unit-10) * 2);
+    --jkl-modal-actions-margin: calc(var(--jkl-unit-10) * 5) 0 0 0;
   }
-}
-
-[data-layout-density=compact],
-[data-density=compact] {
-  --jkl-modal-body-font-size: var(--jkl-small-font-size);
-  --jkl-modal-body-line-height: var(--jkl-small-line-height);
-  --jkl-modal-body-font-weight: var(--jkl-small-font-weight);
-  --jkl-modal-title-font-size: var(--jkl-heading-4-font-size);
-  --jkl-modal-title-line-height: var(--jkl-heading-4-line-height);
-  --jkl-modal-title-font-weight: var(--jkl-heading-4-font-weight);
-  --jkl-modal-padding: calc(var(--jkl-unit-10) * 3);
-  --jkl-modal-header-margin: 0 0 0.5rem;
-  --jkl-modal-actions-margin: calc(var(--jkl-unit-10) * 3) 0 0 0;
-  --jkl-modal-min-width: 13.75rem;
-}
-
-.jkl-modal-container,
-.jkl-modal-overlay {
-  position: fixed;
-  inset: 0;
-}
-
-.jkl-modal-container {
-  z-index: 9000;
-  display: flex;
-}
-.jkl-modal-container[aria-hidden=true] {
-  display: none;
-}
-
-.jkl-modal-overlay {
-  background-color: rgba(27, 25, 23, 0.8);
-}
-
-.jkl-modal {
-  margin: auto;
-  z-index: 9000;
-  position: relative;
-  background-color: var(--jkl-color-background-container-high);
-  border-radius: 0.125rem;
-  box-shadow: 0 0.25rem 0.75rem rgba(37, 42, 49, 0.03);
-  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;
-}
-@media screen and (forced-colors: active) {
-  .jkl-modal {
-    border-color: CanvasText;
+  @media (width >= 0) and (max-width: 679px) {
+    :root,
+    [data-layout-density=comfortable],
+    [data-density=comfortable] {
+      --jkl-modal-padding: calc(var(--jkl-unit-10) * 4);
+      --jkl-modal-header-margin: 0 0 calc(var(--jkl-unit-10) * 1.5);
+      --jkl-modal-actions-margin: calc(var(--jkl-unit-10) * 4) 0 0 0;
+    }
+  }
+  [data-layout-density=compact],
+  [data-density=compact] {
+    --jkl-modal-body-font-size: var(--jkl-small-font-size);
+    --jkl-modal-body-line-height: var(--jkl-small-line-height);
+    --jkl-modal-body-font-weight: var(--jkl-small-font-weight);
+    --jkl-modal-title-font-size: var(--jkl-heading-4-font-size);
+    --jkl-modal-title-line-height: var(--jkl-heading-4-line-height);
+    --jkl-modal-title-font-weight: var(--jkl-heading-4-font-weight);
+    --jkl-modal-padding: calc(var(--jkl-unit-10) * 3);
+    --jkl-modal-header-margin: 0 0 0.5rem;
+    --jkl-modal-actions-margin: calc(var(--jkl-unit-10) * 3) 0 0 0;
+    --jkl-modal-min-width: 13.75rem;
+  }
+  .jkl-modal-container,
+  .jkl-modal-overlay {
+    position: fixed;
+    inset: 0;
+  }
+  .jkl-modal-container {
+    z-index: 9000;
+    display: flex;
+  }
+  .jkl-modal-container[aria-hidden=true] {
+    display: none;
+  }
+  .jkl-modal-overlay {
+    background-color: rgba(27, 25, 23, 0.8);
   }
-}
-@media (width >= 0) and (max-width: 679px) {
   .jkl-modal {
-    margin: auto calc(var(--jkl-unit-10) * 3);
+    margin: auto;
+    z-index: 9000;
+    position: relative;
+    background-color: var(--jkl-color-background-container-high);
+    border-radius: 0.125rem;
+    box-shadow: 0 0.25rem 0.75rem rgba(37, 42, 49, 0.03);
+    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;
   }
-}
-
-.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 {
-  font-size: var(--jkl-modal-body-font-size);
-  line-height: var(--jkl-modal-body-line-height);
-  font-weight: var(--jkl-modal-body-font-weight);
-}
-
-.jkl-modal-title {
-  font-size: var(--jkl-modal-title-font-size);
-  line-height: var(--jkl-modal-title-line-height);
-  font-weight: var(--jkl-modal-title-font-weight);
-}
-
-.jkl-modal-actions {
-  margin: var(--jkl-modal-actions-margin);
-  display: flex;
-  flex-direction: column;
-  gap: calc(var(--jkl-unit-10) * 2);
-}
-@media (min-width: 680px) {
-  .jkl-modal-actions {
+  @media screen and (forced-colors: active) {
+    .jkl-modal {
+      border-color: CanvasText;
+    }
+  }
+  @media (width >= 0) and (max-width: 679px) {
+    .jkl-modal {
+      margin: auto calc(var(--jkl-unit-10) * 3);
+    }
+  }
+  .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 {
+    font-size: var(--jkl-modal-body-font-size);
+    line-height: var(--jkl-modal-body-line-height);
+    font-weight: var(--jkl-modal-body-font-weight);
+  }
+  .jkl-modal-title {
+    font-size: var(--jkl-modal-title-font-size);
+    line-height: var(--jkl-modal-title-line-height);
+    font-weight: var(--jkl-modal-title-font-weight);
+  }
+  .jkl-modal-actions {
+    margin: var(--jkl-modal-actions-margin);
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--jkl-unit-10) * 2);
+  }
+  @media (min-width: 60ch) {
+    .jkl-modal-actions {
+      flex-direction: row;
+      align-self: flex-end;
+    }
   }
 }

package/styles/components/modal/modal.min.css

@@ -1 +1 @@
-:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-modal-body-font-size:var(--jkl-body-font-size);--jkl-modal-body-line-height:var(--jkl-body-line-height);--jkl-modal-body-font-weight:var(--jkl-body-font-weight);--jkl-modal-title-font-size:var(--jkl-heading-3-font-size);--jkl-modal-title-line-height:var(--jkl-heading-3-line-height);--jkl-modal-title-font-weight:var(--jkl-heading-3-font-weight);--jkl-modal-padding:calc(var(--jkl-unit-10)*5);--jkl-modal-min-width:13.75rem;--jkl-modal-max-width:41.25rem;--jkl-modal-header-margin:0 0 calc(var(--jkl-unit-10)*2);--jkl-modal-actions-margin:calc(var(--jkl-unit-10)*5) 0 0 0}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-modal-padding:calc(var(--jkl-unit-10)*4);--jkl-modal-header-margin:0 0 calc(var(--jkl-unit-10)*1.5);--jkl-modal-actions-margin:calc(var(--jkl-unit-10)*4) 0 0 0}}[data-density=compact],[data-layout-density=compact]{--jkl-modal-body-font-size:var(--jkl-small-font-size);--jkl-modal-body-line-height:var(--jkl-small-line-height);--jkl-modal-body-font-weight:var(--jkl-small-font-weight);--jkl-modal-title-font-size:var(--jkl-heading-4-font-size);--jkl-modal-title-line-height:var(--jkl-heading-4-line-height);--jkl-modal-title-font-weight:var(--jkl-heading-4-font-weight);--jkl-modal-padding:calc(var(--jkl-unit-10)*3);--jkl-modal-header-margin:0 0 0.5rem;--jkl-modal-actions-margin:calc(var(--jkl-unit-10)*3) 0 0 0;--jkl-modal-min-width:13.75rem}.jkl-modal-container,.jkl-modal-overlay{inset:0;position:fixed}.jkl-modal-container{display:flex;z-index:9000}.jkl-modal-container[aria-hidden=true]{display:none}.jkl-modal-overlay{background-color:#1b1917cc}.jkl-modal{background-color:var(--jkl-color-background-container-high);border-radius:.125rem;box-shadow:0 .25rem .75rem #252a3108;display:flex;flex-direction:column;margin:auto;max-height:90vh;max-width:var(--jkl-modal-max-width);min-width:var(--jkl-modal-min-width);overflow:auto;padding:var(--jkl-modal-padding);position:relative;width:100%;z-index:9000}@media screen and (forced-colors:active){.jkl-modal{border-color:CanvasText}}@media (width >= 0) and (max-width:679px){.jkl-modal{margin:auto calc(var(--jkl-unit-10)*3)}}.jkl-modal-header{align-items:center;display:flex;flex-direction:row;gap:var(--jkl-modal-gap);justify-content:space-between;margin:var(--jkl-modal-header-margin)}.jkl-modal-body{font-size:var(--jkl-modal-body-font-size);font-weight:var(--jkl-modal-body-font-weight);line-height:var(--jkl-modal-body-line-height)}.jkl-modal-title{font-size:var(--jkl-modal-title-font-size);font-weight:var(--jkl-modal-title-font-weight);line-height:var(--jkl-modal-title-line-height)}.jkl-modal-actions{display:flex;flex-direction:column;gap:calc(var(--jkl-unit-10)*2);margin:var(--jkl-modal-actions-margin)}@media (min-width:680px){.jkl-modal-actions{flex-direction:row}}
+@layer jokul.components{:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-modal-body-font-size:var(--jkl-body-font-size);--jkl-modal-body-line-height:var(--jkl-body-line-height);--jkl-modal-body-font-weight:var(--jkl-body-font-weight);--jkl-modal-title-font-size:var(--jkl-heading-3-font-size);--jkl-modal-title-line-height:var(--jkl-heading-3-line-height);--jkl-modal-title-font-weight:var(--jkl-heading-3-font-weight);--jkl-modal-padding:calc(var(--jkl-unit-10)*5);--jkl-modal-min-width:13.75rem;--jkl-modal-max-width:41.25rem;--jkl-modal-header-margin:0 0 calc(var(--jkl-unit-10)*2);--jkl-modal-actions-margin:calc(var(--jkl-unit-10)*5) 0 0 0}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-modal-padding:calc(var(--jkl-unit-10)*4);--jkl-modal-header-margin:0 0 calc(var(--jkl-unit-10)*1.5);--jkl-modal-actions-margin:calc(var(--jkl-unit-10)*4) 0 0 0}}[data-density=compact],[data-layout-density=compact]{--jkl-modal-body-font-size:var(--jkl-small-font-size);--jkl-modal-body-line-height:var(--jkl-small-line-height);--jkl-modal-body-font-weight:var(--jkl-small-font-weight);--jkl-modal-title-font-size:var(--jkl-heading-4-font-size);--jkl-modal-title-line-height:var(--jkl-heading-4-line-height);--jkl-modal-title-font-weight:var(--jkl-heading-4-font-weight);--jkl-modal-padding:calc(var(--jkl-unit-10)*3);--jkl-modal-header-margin:0 0 0.5rem;--jkl-modal-actions-margin:calc(var(--jkl-unit-10)*3) 0 0 0;--jkl-modal-min-width:13.75rem}.jkl-modal-container,.jkl-modal-overlay{inset:0;position:fixed}.jkl-modal-container{display:flex;z-index:9000}.jkl-modal-container[aria-hidden=true]{display:none}.jkl-modal-overlay{background-color:#1b1917cc}.jkl-modal{background-color:var(--jkl-color-background-container-high);border-radius:.125rem;box-shadow:0 .25rem .75rem #252a3108;display:flex;flex-direction:column;margin:auto;max-height:90vh;max-width:var(--jkl-modal-max-width);min-width:var(--jkl-modal-min-width);overflow:auto;padding:var(--jkl-modal-padding);position:relative;width:100%;z-index:9000}@media screen and (forced-colors:active){.jkl-modal{border-color:CanvasText}}@media (width >= 0) and (max-width:679px){.jkl-modal{margin:auto calc(var(--jkl-unit-10)*3)}}.jkl-modal-header{align-items:center;display:flex;flex-direction:row;gap:var(--jkl-modal-gap);justify-content:space-between;margin:var(--jkl-modal-header-margin)}.jkl-modal-body{font-size:var(--jkl-modal-body-font-size);font-weight:var(--jkl-modal-body-font-weight);line-height:var(--jkl-modal-body-line-height)}.jkl-modal-title{font-size:var(--jkl-modal-title-font-size);font-weight:var(--jkl-modal-title-font-weight);line-height:var(--jkl-modal-title-line-height)}.jkl-modal-actions{display:flex;flex-direction:column;gap:calc(var(--jkl-unit-10)*2);margin:var(--jkl-modal-actions-margin)}@media (min-width:60ch){.jkl-modal-actions{align-self:flex-end;flex-direction:row}}}