@fremtind/jokul 1.4.1 → 1.5.1

package/styles/components/summary-table/summary-table.scss

@@ -1,57 +1,59 @@
 @charset "UTF-8";
 @use "../../core/jkl";
 
-@include jkl.light-mode-variables {
-    --jkl-summary-table-border-color: #{jkl.$color-granitt};
-}
-
-@include jkl.dark-mode-variables {
-    --jkl-summary-table-border-color: #{jkl.$color-svaberg};
-}
+@layer jokul.components {
+    @include jkl.light-mode-variables {
+        --jkl-summary-table-border-color: #{jkl.$color-granitt};
+    }
 
-.jkl-summary-table {
-    display: flex;
-    flex-direction: column;
-    overflow-wrap: anywhere;
-    width: 100%;
+    @include jkl.dark-mode-variables {
+        --jkl-summary-table-border-color: #{jkl.$color-svaberg};
+    }
 
-    tr {
+    .jkl-summary-table {
         display: flex;
-        justify-content: space-between;
-        padding-bottom: jkl.$spacing-8;
-    }
+        flex-direction: column;
+        overflow-wrap: anywhere;
+        width: 100%;
+
+        tr {
+            display: flex;
+            justify-content: space-between;
+            padding-bottom: jkl.$spacing-8;
+        }
 
-    th,
-    td {
-        flex-basis: 50%;
-        padding-right: jkl.$spacing-16;
+        th,
+        td {
+            flex-basis: 50%;
+            padding-right: jkl.$spacing-16;
 
-        &:first-child {
-            text-align: left;
-        }
+            &:first-child {
+                text-align: left;
+            }
 
-        &:last-child {
-            text-align: right;
-            padding-right: 0;
+            &:last-child {
+                text-align: right;
+                padding-right: 0;
+            }
         }
-    }
 
-    & > tbody {
-        th {
-            font-weight: jkl.$typography-weight-normal;
+        & > tbody {
+            th {
+                font-weight: jkl.$typography-weight-normal;
+            }
         }
-    }
 
-    & > tfoot {
-        border-top: jkl.rem(1px) solid jkl.$color-granitt;
-        border-top: jkl.rem(1px) solid var(--jkl-summary-table-border-color);
-        border-bottom: jkl.rem(1px) solid jkl.$color-granitt;
-        border-bottom: jkl.rem(1px) solid var(--jkl-summary-table-border-color);
-        padding-top: jkl.$spacing-8;
-
-        th,
-        td {
-            font-weight: jkl.$typography-weight-bold;
+        & > tfoot {
+            border-top: jkl.rem(1px) solid jkl.$color-granitt;
+            border-top: jkl.rem(1px) solid var(--jkl-summary-table-border-color);
+            border-bottom: jkl.rem(1px) solid jkl.$color-granitt;
+            border-bottom: jkl.rem(1px) solid var(--jkl-summary-table-border-color);
+            padding-top: jkl.$spacing-8;
+
+            th,
+            td {
+                font-weight: jkl.$typography-weight-bold;
+            }
         }
     }
-}
+}

package/styles/components/system-message/system-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],
@@ -145,7 +147,7 @@
   margin-bottom: 0;
 }
 .jkl-system-message--dismissed {
-  animation: jkl-dismiss-uo22lay 400ms forwards;
+  animation: jkl-dismiss-u9ib09u 400ms forwards;
   transition: block 400ms 400ms;
 }
 .jkl-system-message--info {
@@ -176,7 +178,7 @@
   }
 }
 
-@keyframes jkl-dismiss-uo22lay {
+@keyframes jkl-dismiss-u9ib09u {
   from {
     opacity: 1;
     transform: translateY(0);

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

@@ -1 +1 @@
-:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-system-message-icon-height:1.5rem;--jkl-system-message-icon-padding:0.1875rem 0 0 0;--jkl-system-message-content-padding:1.5rem;--jkl-system-message-dismiss-button-size:2.75rem;--jkl-system-message-dismiss-button-margin:-0.40625rem -1.125rem -0.40625rem auto;--jkl-system-message-message-margin:0 1rem;--jkl-system-message-message-font-size:var(--jkl-body-font-size);--jkl-system-message-message-line-height:var(--jkl-body-line-height);--jkl-system-message-message-font-weight:var(--jkl-body-font-weight)}[data-density=compact],[data-layout-density=compact]{--jkl-system-message-icon-height:1.25rem;--jkl-system-message-icon-padding:0.0625rem 0 0 0;--jkl-system-message-content-padding:0.5rem;--jkl-system-message-dismiss-button-size:2rem;--jkl-system-message-dismiss-button-margin:-0.1875rem -0.375rem -0.28125rem auto;--jkl-system-message-message-margin:0 0.75rem;--jkl-system-message-message-font-size:var(--jkl-small-font-size);--jkl-system-message-message-line-height:var(--jkl-small-line-height);--jkl-system-message-message-font-weight:var(--jkl-small-font-weight)}.jkl-system-message{--background-color:var(--jkl-color-background-alert-neutral);--text-color:var(--jkl-color-text-on-alert);background-color:var(--background-color);box-sizing:border-box;color:var(--text-color);transition-behavior:allow-discrete;width:100%}.jkl-system-message__content{align-items:flex-start;box-sizing:border-box;display:grid;grid-template-columns:-webkit-min-content 1fr -webkit-min-content;grid-template-columns:min-content 1fr min-content;margin:0 auto;padding:var(--jkl-system-message-content-padding);width:100%}.jkl-system-message__icon{flex-shrink:0;height:var(--jkl-system-message-icon-height);margin:var(--jkl-system-message-icon-padding)}@media screen and (forced-colors:active){.jkl-system-message__icon,.jkl-system-message__icon path,.jkl-system-message__icon svg{stroke:CanvasText}}.jkl-system-message__message{font-size:var(--jkl-system-message-message-font-size);font-weight:var(--jkl-system-message-message-font-weight);line-height:var(--jkl-system-message-message-line-height);margin:var(--jkl-system-message-message-margin)}.jkl-system-message__dismiss-button{background-color:initial;color:inherit;cursor:pointer;display:grid;flex-shrink:0;margin-top:.1875rem;padding:0;place-content:center;position:relative}.jkl-system-message__dismiss-button:after{content:"";display:block;height:var(--jkl-system-message-dismiss-button-size);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--jkl-system-message-dismiss-button-size)}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button,.jkl-system-message__dismiss-button path,.jkl-system-message__dismiss-button svg{stroke:ButtonText}.jkl-system-message__dismiss-button{background-color:ButtonFace}}.jkl-system-message__dismiss-button{border-style:none;outline:0;outline-style:none}.jkl-system-message__dismiss-button:active,.jkl-system-message__dismiss-button:focus,.jkl-system-message__dismiss-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button{border-style:revert;outline:revert;outline-style:revert}.jkl-system-message__dismiss-button:active,.jkl-system-message__dismiss-button:focus,.jkl-system-message__dismiss-button:hover{outline:revert;outline-style:revert}}.jkl-system-message__dismiss-button:hover{color:#636060}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button:hover,.jkl-system-message__dismiss-button:hover path,.jkl-system-message__dismiss-button:hover svg{stroke:ButtonText}}.jkl-system-message__dismiss-button:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button:focus-visible{outline:2px solid ButtonText;outline-offset:2px}}.jkl-system-message__message,.jkl-system-message__message:last-child{margin-bottom:0}.jkl-system-message--dismissed{animation:jkl-dismiss-uo22lay .4s forwards;transition:block .4s .4s}.jkl-system-message--info{--background-color:var(--jkl-color-background-alert-info)}.jkl-system-message--warning{--background-color:var(--jkl-color-background-alert-warning)}.jkl-system-message--error{--background-color:var(--jkl-color-background-alert-error)}.jkl-system-message--success{--background-color:var(--jkl-color-background-alert-success)}@media screen and (forced-colors:active){.jkl-system-message{border:2px solid CanvasText}.jkl-system-message--info{border-style:dotted}.jkl-system-message--warning{border-style:dashed}.jkl-system-message--error{border-style:double;border-width:4px}}@keyframes jkl-dismiss-uo22lay{0%{display:block;filter:saturate(1);opacity:1;transform:translateY(0)}to{display:none;filter:saturate(.7);opacity:0;transform:translateY(-10%)}}
+:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-system-message-icon-height:1.5rem;--jkl-system-message-icon-padding:0.1875rem 0 0 0;--jkl-system-message-content-padding:1.5rem;--jkl-system-message-dismiss-button-size:2.75rem;--jkl-system-message-dismiss-button-margin:-0.40625rem -1.125rem -0.40625rem auto;--jkl-system-message-message-margin:0 1rem;--jkl-system-message-message-font-size:var(--jkl-body-font-size);--jkl-system-message-message-line-height:var(--jkl-body-line-height);--jkl-system-message-message-font-weight:var(--jkl-body-font-weight)}[data-density=compact],[data-layout-density=compact]{--jkl-system-message-icon-height:1.25rem;--jkl-system-message-icon-padding:0.0625rem 0 0 0;--jkl-system-message-content-padding:0.5rem;--jkl-system-message-dismiss-button-size:2rem;--jkl-system-message-dismiss-button-margin:-0.1875rem -0.375rem -0.28125rem auto;--jkl-system-message-message-margin:0 0.75rem;--jkl-system-message-message-font-size:var(--jkl-small-font-size);--jkl-system-message-message-line-height:var(--jkl-small-line-height);--jkl-system-message-message-font-weight:var(--jkl-small-font-weight)}.jkl-system-message{--background-color:var(--jkl-color-background-alert-neutral);--text-color:var(--jkl-color-text-on-alert);background-color:var(--background-color);box-sizing:border-box;color:var(--text-color);transition-behavior:allow-discrete;width:100%}.jkl-system-message__content{align-items:flex-start;box-sizing:border-box;display:grid;grid-template-columns:-webkit-min-content 1fr -webkit-min-content;grid-template-columns:min-content 1fr min-content;margin:0 auto;padding:var(--jkl-system-message-content-padding);width:100%}.jkl-system-message__icon{flex-shrink:0;height:var(--jkl-system-message-icon-height);margin:var(--jkl-system-message-icon-padding)}@media screen and (forced-colors:active){.jkl-system-message__icon,.jkl-system-message__icon path,.jkl-system-message__icon svg{stroke:CanvasText}}.jkl-system-message__message{font-size:var(--jkl-system-message-message-font-size);font-weight:var(--jkl-system-message-message-font-weight);line-height:var(--jkl-system-message-message-line-height);margin:var(--jkl-system-message-message-margin)}.jkl-system-message__dismiss-button{background-color:initial;color:inherit;cursor:pointer;display:grid;flex-shrink:0;margin-top:.1875rem;padding:0;place-content:center;position:relative}.jkl-system-message__dismiss-button:after{content:"";display:block;height:var(--jkl-system-message-dismiss-button-size);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--jkl-system-message-dismiss-button-size)}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button,.jkl-system-message__dismiss-button path,.jkl-system-message__dismiss-button svg{stroke:ButtonText}.jkl-system-message__dismiss-button{background-color:ButtonFace}}.jkl-system-message__dismiss-button{border-style:none;outline:0;outline-style:none}.jkl-system-message__dismiss-button:active,.jkl-system-message__dismiss-button:focus,.jkl-system-message__dismiss-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button{border-style:revert;outline:revert;outline-style:revert}.jkl-system-message__dismiss-button:active,.jkl-system-message__dismiss-button:focus,.jkl-system-message__dismiss-button:hover{outline:revert;outline-style:revert}}.jkl-system-message__dismiss-button:hover{color:#636060}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button:hover,.jkl-system-message__dismiss-button:hover path,.jkl-system-message__dismiss-button:hover svg{stroke:ButtonText}}.jkl-system-message__dismiss-button:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button:focus-visible{outline:2px solid ButtonText;outline-offset:2px}}.jkl-system-message__message,.jkl-system-message__message:last-child{margin-bottom:0}.jkl-system-message--dismissed{animation:jkl-dismiss-u9ib09u .4s forwards;transition:block .4s .4s}.jkl-system-message--info{--background-color:var(--jkl-color-background-alert-info)}.jkl-system-message--warning{--background-color:var(--jkl-color-background-alert-warning)}.jkl-system-message--error{--background-color:var(--jkl-color-background-alert-error)}.jkl-system-message--success{--background-color:var(--jkl-color-background-alert-success)}@media screen and (forced-colors:active){.jkl-system-message{border:2px solid CanvasText}.jkl-system-message--info{border-style:dotted}.jkl-system-message--warning{border-style:dashed}.jkl-system-message--error{border-style:double;border-width:4px}}@keyframes jkl-dismiss-u9ib09u{0%{display:block;filter:saturate(1);opacity:1;transform:translateY(0)}to{display:none;filter:saturate(.7);opacity:0;transform:translateY(-10%)}}

package/styles/components/table/table.css

@@ -1,7 +1,9 @@
 @charset "UTF-8";
 /**
- * Do not edit directly
- * Generated on Wed, 18 Dec 2024 12:25:37 GMT
+ * Do not edit directly, this file was auto-generated.
+ */
+/**
+ * Do not edit directly, this file was auto-generated.
  */
 .jkl-table-caption--sr-only {
   border: 0 !important;

package/styles/components/tabs/tabs.css

@@ -1,141 +1,138 @@
 /**
- * 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-tab-padding: var(--jkl-unit-10) var(--jkl-unit-50) var(--jkl-unit-15)
-      var(--jkl-unit-02);
-  --jkl-tab-padding-inline-end: var(--jkl-unit-50);
-  --jkl-tab-font-size: var(--jkl-body-font-size);
-  --jkl-tab-line-height: var(--jkl-body-line-height);
-  --jkl-tab-font-weight: var(--jkl-body-font-weight);
-}
-@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-tab-padding: var(--jkl-unit-10) var(--jkl-unit-30)
-        var(--jkl-unit-15) var(--jkl-unit-02);
-    --jkl-tab-padding-inline-end: var(--jkl-unit-30);
-  }
-}
-
-[data-layout-density=compact],
-[data-density=compact] {
-  --jkl-tab-font-size: var(--jkl-small-font-size);
-  --jkl-tab-line-height: var(--jkl-small-line-height);
-  --jkl-tab-font-weight: var(--jkl-small-font-weight);
-  --jkl-tab-padding: var(--jkl-unit-02) var(--jkl-unit-40) var(--jkl-unit-05)
-      0;
-  --jkl-tab-padding-inline-end: var(--jkl-unit-40);
-}
-
-.jkl-tabs {
-  width: 100%;
-}
-
-.jkl-tablist {
-  --text-color: var(--jkl-color-text-interactive);
-  --line-color: var(--jkl-color-border-separator);
-  --indicator-color: var(--jkl-color-border-separator-hover);
-  scroll-snap-type: x proximity;
-  overflow: scroll hidden;
-  scrollbar-width: none;
-  position: relative;
-  display: inline-flex;
-  flex-direction: row;
-  padding: 0;
-  margin: 0;
-  border-bottom: 1px solid var(--line-color);
-  width: fit-content;
-  max-width: 100%;
-}
-@media screen and (forced-colors: active) {
+    --jkl-tab-padding: var(--jkl-unit-10) var(--jkl-unit-50) var(--jkl-unit-15) var(--jkl-unit-02);
+    --jkl-tab-padding-inline-end: var(--jkl-unit-50);
+    --jkl-tab-font-size: var(--jkl-body-font-size);
+    --jkl-tab-line-height: var(--jkl-body-line-height);
+    --jkl-tab-font-weight: var(--jkl-body-font-weight);
+  }
+  @media (width >= 0) and (max-width: 679px) {
+    :root,
+    [data-layout-density=comfortable],
+    [data-density=comfortable] {
+      --jkl-tab-padding: var(--jkl-unit-10) var(--jkl-unit-30) var(--jkl-unit-15) var(--jkl-unit-02);
+      --jkl-tab-padding-inline-end: var(--jkl-unit-30);
+    }
+  }
+  [data-layout-density=compact],
+  [data-density=compact] {
+    --jkl-tab-font-size: var(--jkl-small-font-size);
+    --jkl-tab-line-height: var(--jkl-small-line-height);
+    --jkl-tab-font-weight: var(--jkl-small-font-weight);
+    --jkl-tab-padding: var(--jkl-unit-02) var(--jkl-unit-40) var(--jkl-unit-05) 0;
+    --jkl-tab-padding-inline-end: var(--jkl-unit-40);
+  }
+  .jkl-tabs {
+    width: 100%;
+  }
   .jkl-tablist {
-    border-color: GrayText;
-  }
-}
-.jkl-tablist::-webkit-scrollbar {
-  display: none;
-}
-@supports (position-anchor: --active-tab) {
-  .jkl-tablist::after {
-    content: "";
-    position: absolute;
-    position-anchor: --active-tab;
-    height: 2px;
-    width: calc(anchor-size(inline) - var(--jkl-tab-padding-inline-end));
-    inset-block-start: calc(anchor(end) - 2px);
-    inset-inline-start: calc(anchor(--active-tab start));
-    background-color: var(--indicator-color);
-    transition-timing-function: ease;
-    transition-duration: 400ms;
-  }
-}
-
-.jkl-tab {
-  font-size: var(--jkl-tab-font-size);
-  line-height: var(--jkl-tab-line-height);
-  font-weight: var(--jkl-tab-font-weight);
-  color: var(--text-color);
-  padding: var(--jkl-tab-padding);
-  border: none;
-  background-color: transparent;
-  cursor: pointer;
-  position: relative;
-  scroll-margin-inline-start: var(--jkl-unit-20);
-  scroll-snap-align: start;
-  text-decoration: none;
-  white-space: nowrap;
-}
-.jkl-tab {
-  outline: 0;
-  border-style: none;
-  outline-style: none;
-}
-.jkl-tab:active, .jkl-tab:hover, .jkl-tab:focus {
-  outline: 0;
-  outline-style: none;
-}
-@media screen and (forced-colors: active) {
+    --text-color: var(--jkl-color-text-interactive);
+    --line-color: var(--jkl-color-border-separator);
+    --indicator-color: var(--jkl-color-border-separator-hover);
+    scroll-snap-type: x proximity;
+    overflow: scroll hidden;
+    scrollbar-width: none;
+    position: relative;
+    display: inline-flex;
+    flex-direction: row;
+    padding: 0;
+    margin: 0;
+    border-bottom: 1px solid var(--line-color);
+    width: fit-content;
+    max-width: 100%;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-tablist {
+      border-color: GrayText;
+    }
+  }
+  .jkl-tablist::-webkit-scrollbar {
+    display: none;
+  }
+  @supports (position-anchor: --active-tab) {
+    .jkl-tablist::after {
+      content: "";
+      position: absolute;
+      position-anchor: --active-tab;
+      height: 2px;
+      width: calc(anchor-size(inline) - var(--jkl-tab-padding-inline-end));
+      inset-block-start: calc(anchor(end) - 2px);
+      inset-inline-start: calc(anchor(--active-tab start));
+      background-color: var(--indicator-color);
+      transition-timing-function: ease;
+      transition-duration: 400ms;
+    }
+  }
   .jkl-tab {
-    outline: revert;
-    border-style: revert;
-    outline-style: revert;
+    font-size: var(--jkl-tab-font-size);
+    line-height: var(--jkl-tab-line-height);
+    font-weight: var(--jkl-tab-font-weight);
+    color: var(--text-color);
+    padding: var(--jkl-tab-padding);
+    border: none;
+    background-color: transparent;
+    cursor: pointer;
+    position: relative;
+    scroll-margin-inline-start: var(--jkl-unit-20);
+    scroll-snap-align: start;
+    text-decoration: none;
+    white-space: nowrap;
+  }
+  .jkl-tab {
+    outline: 0;
+    border-style: none;
+    outline-style: none;
   }
   .jkl-tab:active, .jkl-tab:hover, .jkl-tab:focus {
-    outline: revert;
-    outline-style: revert;
-  }
-}
-.jkl-tab:hover {
-  --text-color: var(--jkl-color-text-interactive-hover);
-}
-.jkl-tab:focus-visible {
-  outline: 3px solid var(--jkl-color-border-action);
-  outline-offset: -2px;
-}
-.jkl-tab[aria-selected=true] {
-  anchor-name: --active-tab;
-  --jkl-icon-weight: 400;
-  font-weight: 700;
-  letter-spacing: -0.014em;
-}
-@supports not (position-anchor: --active-tab) {
+    outline: 0;
+    outline-style: none;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-tab {
+      outline: revert;
+      border-style: revert;
+      outline-style: revert;
+    }
+    .jkl-tab:active, .jkl-tab:hover, .jkl-tab:focus {
+      outline: revert;
+      outline-style: revert;
+    }
+  }
+  .jkl-tab:hover {
+    --text-color: var(--jkl-color-text-interactive-hover);
+  }
+  .jkl-tab:focus-visible {
+    outline: 3px solid var(--jkl-color-border-action);
+    outline-offset: -2px;
+  }
   .jkl-tab[aria-selected=true] {
-    position: relative;
+    anchor-name: --active-tab;
+    --jkl-icon-weight: 400;
+    font-weight: 700;
+    letter-spacing: -0.014em;
   }
-  .jkl-tab[aria-selected=true]::after {
-    content: "";
-    position: absolute;
-    height: 2px;
-    width: calc(100% - var(--jkl-tab-padding-inline-end));
-    inset-block-end: 0;
-    inset-inline-start: 0;
-    background-color: var(--indicator-color);
-    transition-timing-function: ease;
-    transition-duration: 400ms;
+  @supports not (position-anchor: --active-tab) {
+    .jkl-tab[aria-selected=true] {
+      position: relative;
+    }
+    .jkl-tab[aria-selected=true]::after {
+      content: "";
+      position: absolute;
+      height: 2px;
+      width: calc(100% - var(--jkl-tab-padding-inline-end));
+      inset-block-end: 0;
+      inset-inline-start: 0;
+      background-color: var(--indicator-color);
+      transition-timing-function: ease;
+      transition-duration: 400ms;
+    }
   }
 }

package/styles/components/tabs/tabs.min.css

@@ -1 +1 @@
-:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-tab-padding:var(--jkl-unit-10) var(--jkl-unit-50) var(--jkl-unit-15) var(--jkl-unit-02);--jkl-tab-padding-inline-end:var(--jkl-unit-50);--jkl-tab-font-size:var(--jkl-body-font-size);--jkl-tab-line-height:var(--jkl-body-line-height);--jkl-tab-font-weight:var(--jkl-body-font-weight)}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-tab-padding:var(--jkl-unit-10) var(--jkl-unit-30) var(--jkl-unit-15) var(--jkl-unit-02);--jkl-tab-padding-inline-end:var(--jkl-unit-30)}}[data-density=compact],[data-layout-density=compact]{--jkl-tab-font-size:var(--jkl-small-font-size);--jkl-tab-line-height:var(--jkl-small-line-height);--jkl-tab-font-weight:var(--jkl-small-font-weight);--jkl-tab-padding:var(--jkl-unit-02) var(--jkl-unit-40) var(--jkl-unit-05) 0;--jkl-tab-padding-inline-end:var(--jkl-unit-40)}.jkl-tabs{width:100%}.jkl-tablist{--text-color:var(--jkl-color-text-interactive);--line-color:var(--jkl-color-border-separator);--indicator-color:var(--jkl-color-border-separator-hover);border-bottom:1px solid var(--line-color);display:inline-flex;flex-direction:row;margin:0;max-width:100%;overflow:scroll hidden;padding:0;position:relative;scroll-snap-type:x proximity;scrollbar-width:none;width:-webkit-fit-content;width:fit-content}@media screen and (forced-colors:active){.jkl-tablist{border-color:GrayText}}.jkl-tablist::-webkit-scrollbar{display:none}@supports (position-anchor:--active-tab){.jkl-tablist:after{content:"";position:absolute;position-anchor:--active-tab;background-color:var(--indicator-color);height:2px;inset-block-start:calc(anchor(end) - 2px);inset-inline-start:calc(anchor(--active-tab start));transition-duration:.4s;transition-timing-function:ease;width:calc(anchor-size(inline) - var(--jkl-tab-padding-inline-end))}}.jkl-tab{background-color:initial;border:none;border-style:none;color:var(--text-color);cursor:pointer;font-size:var(--jkl-tab-font-size);font-weight:var(--jkl-tab-font-weight);line-height:var(--jkl-tab-line-height);padding:var(--jkl-tab-padding);position:relative;scroll-margin-inline-start:var(--jkl-unit-20);scroll-snap-align:start;text-decoration:none;white-space:nowrap}.jkl-tab,.jkl-tab:active,.jkl-tab:focus,.jkl-tab:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-tab{border-style:revert}.jkl-tab,.jkl-tab:active,.jkl-tab:focus,.jkl-tab:hover{outline:revert;outline-style:revert}}.jkl-tab:hover{--text-color:var(--jkl-color-text-interactive-hover)}.jkl-tab:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:-2px}.jkl-tab[aria-selected=true]{anchor-name:--active-tab;--jkl-icon-weight:400;font-weight:700;letter-spacing:-.014em}@supports not (position-anchor:--active-tab){.jkl-tab[aria-selected=true]{position:relative}.jkl-tab[aria-selected=true]:after{background-color:var(--indicator-color);content:"";height:2px;inset-block-end:0;inset-inline-start:0;position:absolute;transition-duration:.4s;transition-timing-function:ease;width:calc(100% - var(--jkl-tab-padding-inline-end))}}
+@layer jokul.components{:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-tab-padding:var(--jkl-unit-10) var(--jkl-unit-50) var(--jkl-unit-15) var(--jkl-unit-02);--jkl-tab-padding-inline-end:var(--jkl-unit-50);--jkl-tab-font-size:var(--jkl-body-font-size);--jkl-tab-line-height:var(--jkl-body-line-height);--jkl-tab-font-weight:var(--jkl-body-font-weight)}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-tab-padding:var(--jkl-unit-10) var(--jkl-unit-30) var(--jkl-unit-15) var(--jkl-unit-02);--jkl-tab-padding-inline-end:var(--jkl-unit-30)}}[data-density=compact],[data-layout-density=compact]{--jkl-tab-font-size:var(--jkl-small-font-size);--jkl-tab-line-height:var(--jkl-small-line-height);--jkl-tab-font-weight:var(--jkl-small-font-weight);--jkl-tab-padding:var(--jkl-unit-02) var(--jkl-unit-40) var(--jkl-unit-05) 0;--jkl-tab-padding-inline-end:var(--jkl-unit-40)}.jkl-tabs{width:100%}.jkl-tablist{--text-color:var(--jkl-color-text-interactive);--line-color:var(--jkl-color-border-separator);--indicator-color:var(--jkl-color-border-separator-hover);border-bottom:1px solid var(--line-color);display:inline-flex;flex-direction:row;margin:0;max-width:100%;overflow:scroll hidden;padding:0;position:relative;scroll-snap-type:x proximity;scrollbar-width:none;width:-webkit-fit-content;width:fit-content}@media screen and (forced-colors:active){.jkl-tablist{border-color:GrayText}}.jkl-tablist::-webkit-scrollbar{display:none}@supports (position-anchor:--active-tab){.jkl-tablist:after{content:"";position:absolute;position-anchor:--active-tab;background-color:var(--indicator-color);height:2px;inset-block-start:calc(anchor(end) - 2px);inset-inline-start:calc(anchor(--active-tab start));transition-duration:.4s;transition-timing-function:ease;width:calc(anchor-size(inline) - var(--jkl-tab-padding-inline-end))}}.jkl-tab{background-color:initial;border:none;border-style:none;color:var(--text-color);cursor:pointer;font-size:var(--jkl-tab-font-size);font-weight:var(--jkl-tab-font-weight);line-height:var(--jkl-tab-line-height);padding:var(--jkl-tab-padding);position:relative;scroll-margin-inline-start:var(--jkl-unit-20);scroll-snap-align:start;text-decoration:none;white-space:nowrap}.jkl-tab,.jkl-tab:active,.jkl-tab:focus,.jkl-tab:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-tab{border-style:revert}.jkl-tab,.jkl-tab:active,.jkl-tab:focus,.jkl-tab:hover{outline:revert;outline-style:revert}}.jkl-tab:hover{--text-color:var(--jkl-color-text-interactive-hover)}.jkl-tab:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:-2px}.jkl-tab[aria-selected=true]{anchor-name:--active-tab;--jkl-icon-weight:400;font-weight:700;letter-spacing:-.014em}@supports not (position-anchor:--active-tab){.jkl-tab[aria-selected=true]{position:relative}.jkl-tab[aria-selected=true]:after{background-color:var(--indicator-color);content:"";height:2px;inset-block-end:0;inset-inline-start:0;position:absolute;transition-duration:.4s;transition-timing-function:ease;width:calc(100% - var(--jkl-tab-padding-inline-end))}}}

package/styles/components/tabs/tabs.scss

@@ -1,117 +1,114 @@
 @charset "UTF-8";
 @use "../../core/jkl";
 
-@include jkl.comfortable-density-variables {
-    --jkl-tab-padding: var(--jkl-unit-10) var(--jkl-unit-50) var(--jkl-unit-15)
-        var(--jkl-unit-02);
-    --jkl-tab-padding-inline-end: var(--jkl-unit-50);
+@layer jokul.components {
+    @include jkl.comfortable-density-variables {
+        --jkl-tab-padding: var(--jkl-unit-10) var(--jkl-unit-50) var(--jkl-unit-15) var(--jkl-unit-02);
+        --jkl-tab-padding-inline-end: var(--jkl-unit-50);
 
-    @include jkl.declare-font-variables("jkl-tab", "body");
+        @include jkl.declare-font-variables("jkl-tab", "body");
 
-    @include jkl.small-device {
-        --jkl-tab-padding: var(--jkl-unit-10) var(--jkl-unit-30)
-            var(--jkl-unit-15) var(--jkl-unit-02);
-        --jkl-tab-padding-inline-end: var(--jkl-unit-30);
-    }
-}
-
-@include jkl.compact-density-variables {
-    @include jkl.declare-font-variables("jkl-tab", "small");
-
-    --jkl-tab-padding: var(--jkl-unit-02) var(--jkl-unit-40) var(--jkl-unit-05)
-        0;
-    --jkl-tab-padding-inline-end: var(--jkl-unit-40);
-}
-
-.jkl-tabs {
-    width: 100%;
-}
-
-.jkl-tablist {
-    --text-color: var(--jkl-color-text-interactive);
-    --line-color: var(--jkl-color-border-separator);
-    --indicator-color: var(--jkl-color-border-separator-hover);
-
-    scroll-snap-type: x proximity;
-    overflow: scroll hidden;
-    scrollbar-width: none;
-    position: relative;
-    display: inline-flex;
-    flex-direction: row;
-    padding: 0;
-    margin: 0;
-    border-bottom: 1px solid var(--line-color);
-    width: fit-content;
-    max-width: 100%;
-
-    @include jkl.forced-colors-mode {
-        border-color: GrayText;
+        @include jkl.small-device {
+            --jkl-tab-padding: var(--jkl-unit-10) var(--jkl-unit-30) var(--jkl-unit-15) var(--jkl-unit-02);
+            --jkl-tab-padding-inline-end: var(--jkl-unit-30);
+        }
     }
 
-    &::-webkit-scrollbar {
-        display: none;
-    }
+    @include jkl.compact-density-variables {
+        @include jkl.declare-font-variables("jkl-tab", "small");
 
-    @supports (position-anchor: --active-tab) {
-        &::after {
-            content: "";
-            position: absolute;
-            position-anchor: --active-tab;
-            height: 2px;
-            width: calc(
-                anchor-size(inline) - var(--jkl-tab-padding-inline-end)
-            );
-            inset-block-start: calc(anchor(end) - 2px);
-            inset-inline-start: calc(anchor(--active-tab start));
-            background-color: var(--indicator-color);
-
-            @include jkl.motion("standard", "lazy");
-        }
-    }
-}
-
-.jkl-tab {
-    @include jkl.use-font-variables("jkl-tab");
-    color: var(--text-color);
-    padding: var(--jkl-tab-padding);
-    border: none;
-    background-color: transparent;
-    cursor: pointer;
-    position: relative;
-    scroll-margin-inline-start: var(--jkl-unit-20);
-    scroll-snap-align: start;
-    text-decoration: none;
-    white-space: nowrap;
-
-    @include jkl.reset-outline;
-
-    &:hover {
-        --text-color: var(--jkl-color-text-interactive-hover);
+        --jkl-tab-padding: var(--jkl-unit-02) var(--jkl-unit-40) var(--jkl-unit-05) 0;
+        --jkl-tab-padding-inline-end: var(--jkl-unit-40);
     }
 
-    &:focus-visible {
-        @include jkl.focus-outline($offset: -2px);
+    .jkl-tabs {
+        width: 100%;
     }
 
-    &[aria-selected="true"] {
-        anchor-name: --active-tab;
-
-        @include jkl.no-grow-bold;
+    .jkl-tablist {
+        --text-color: var(--jkl-color-text-interactive);
+        --line-color: var(--jkl-color-border-separator);
+        --indicator-color: var(--jkl-color-border-separator-hover);
+
+        scroll-snap-type: x proximity;
+        overflow: scroll hidden;
+        scrollbar-width: none;
+        position: relative;
+        display: inline-flex;
+        flex-direction: row;
+        padding: 0;
+        margin: 0;
+        border-bottom: 1px solid var(--line-color);
+        width: fit-content;
+        max-width: 100%;
+
+        @include jkl.forced-colors-mode {
+            border-color: GrayText;
+        }
 
-        @supports not (position-anchor: --active-tab) {
-            position: relative;
+        &::-webkit-scrollbar {
+            display: none;
+        }
 
+        @supports (position-anchor: --active-tab) {
             &::after {
                 content: "";
                 position: absolute;
+                position-anchor: --active-tab;
                 height: 2px;
-                width: calc(100% - var(--jkl-tab-padding-inline-end));
-                inset-block-end: 0;
-                inset-inline-start: 0;
+                width: calc(anchor-size(inline) - var(--jkl-tab-padding-inline-end));
+                inset-block-start: calc(anchor(end) - 2px);
+                inset-inline-start: calc(anchor(--active-tab start));
                 background-color: var(--indicator-color);
 
                 @include jkl.motion("standard", "lazy");
             }
         }
     }
-}
+
+    .jkl-tab {
+        @include jkl.use-font-variables("jkl-tab");
+        color: var(--text-color);
+        padding: var(--jkl-tab-padding);
+        border: none;
+        background-color: transparent;
+        cursor: pointer;
+        position: relative;
+        scroll-margin-inline-start: var(--jkl-unit-20);
+        scroll-snap-align: start;
+        text-decoration: none;
+        white-space: nowrap;
+
+        @include jkl.reset-outline;
+
+        &:hover {
+            --text-color: var(--jkl-color-text-interactive-hover);
+        }
+
+        &:focus-visible {
+            @include jkl.focus-outline($offset: -2px);
+        }
+
+        &[aria-selected="true"] {
+            anchor-name: --active-tab;
+
+            @include jkl.no-grow-bold;
+
+            @supports not (position-anchor: --active-tab) {
+                position: relative;
+
+                &::after {
+                    content: "";
+                    position: absolute;
+                    height: 2px;
+                    width: calc(100% - var(--jkl-tab-padding-inline-end));
+                    inset-block-end: 0;
+                    inset-inline-start: 0;
+                    background-color: var(--indicator-color);
+
+                    @include jkl.motion("standard", "lazy");
+                }
+            }
+        }
+    }
+}