@fremtind/jokul 1.4.1 → 1.5.1

package/styles/components/icon/icon.css

@@ -1,138 +1,136 @@
 /**
- * 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.theme {
+  @media screen and (prefers-color-scheme: light) {
+    :root {
+      --jkl-icon-grade: 0;
+    }
+  }
+  [data-theme=light] {
     --jkl-icon-grade: 0;
   }
-}
-[data-theme=light] {
-  --jkl-icon-grade: 0;
-}
-
-@media screen and (prefers-color-scheme: dark) {
-  :root {
+  @media screen and (prefers-color-scheme: dark) {
+    :root {
+      --jkl-icon-grade: -25;
+    }
+  }
+  [data-theme=dark] {
     --jkl-icon-grade: -25;
   }
 }
-[data-theme=dark] {
-  --jkl-icon-grade: -25;
-}
-
-.jkl-icon {
-  --jkl-icon-fill: 0;
-  font-family: "Fremtind Material Symbols", "Fremtind Material Symbols Fallback", sans-serif;
-  font-variation-settings: "FILL" var(--jkl-icon-fill, 0), "GRAD" var(--jkl-icon-grade, 0), "opsz" var(--jkl-icon-opsz, 24);
-  font-feature-settings: "liga";
-  -webkit-font-feature-settings: "liga";
-  font-size: var(--jkl-icon-size, 1.5rem);
-  font-weight: var(--jkl-icon-weight, 300);
-  line-height: 1;
-  display: inline-block;
-  -webkit-font-smoothing: antialiased;
-  transition-timing-function: ease;
-  transition-duration: 150ms;
-  transition-property: font-variation-settings, transform;
-}
-.jkl-icon--bold {
-  --jkl-icon-weight: 400;
-}
-.jkl-icon--filled {
-  --jkl-icon-fill: 1;
-}
-.jkl-icon--medium {
-  --jkl-icon-opsz: 24;
-  --jkl-icon-size: 1.5rem;
-}
-.jkl-icon--small {
-  --jkl-icon-opsz: 20;
-  --jkl-icon-size: 1.25rem;
-}
-.jkl-icon--inherit {
-  --jkl-icon-opsz: 20;
-  --jkl-icon-size: 1.2em;
-}
-.jkl-icon--animated {
-  display: block;
-}
-
-.jkl-icon-red-cross {
-  --red-cross-circle: var(--jkl-color-background-alert-error);
-  --red-cross-path: #1b1917;
-  width: 1.5rem;
-  height: 1.5rem;
-}
-.jkl-icon-red-cross path {
-  fill: var(--red-cross-path);
-}
-.jkl-icon-red-cross circle {
-  fill: var(--red-cross-circle);
-}
-
-.jkl-icon-green-check {
-  --green-check-circle: var(--jkl-color-background-alert-success);
-  --green-check-path: #1b1917;
-  width: 1.5rem;
-  height: 1.5rem;
-}
-.jkl-icon-green-check path {
-  fill: var(--green-check-path);
-}
-.jkl-icon-green-check circle {
-  fill: var(--green-check-circle);
-}
-
-.jkl-animated-horizontal-arrows,
-.jkl-animated-vertical-arrows {
-  overflow: hidden;
-  width: var(--jkl-icon-size, 1.5rem);
-  height: var(--jkl-icon-size, 1.5rem);
-}
-.jkl-animated-horizontal-arrows__slider,
-.jkl-animated-vertical-arrows__slider {
-  display: flex;
-  transition-timing-function: ease;
-  transition-duration: 250ms;
-  transition-delay: calc(250ms * 0.3333333333);
-  transition-property: transform;
-}
-.jkl-animated-horizontal-arrows__arrow,
-.jkl-animated-vertical-arrows__arrow {
-  flex-shrink: 0;
-}
-
-.jkl-animated-vertical-arrows__slider {
-  flex-direction: column;
-  height: calc(var(--jkl-icon-size, 1.5rem) * 2);
-}
-.jkl-animated-vertical-arrows__slider[data-show=up] {
-  transform: translate3d(0, 0, 0);
-}
-.jkl-animated-vertical-arrows__slider[data-show=down] {
-  transform: translate3d(0, -50%, 0);
-}
-
-.jkl-animated-horizontal-arrows__slider {
-  flex-direction: row;
-  width: calc(var(--jkl-icon-size, 1.5rem) * 2);
-}
-.jkl-animated-horizontal-arrows__slider[data-show=left] {
-  transform: translate3d(0, 0, 0);
-}
-.jkl-animated-horizontal-arrows__slider[data-show=right] {
-  transform: translate3d(-50%, 0, 0);
-}
-
-.jkl-icons-animated__plus {
-  transition-timing-function: cubic-bezier(0, 0, 0.375, 1.17);
-  transition-duration: 250ms;
-  transition-property: transform;
-  transform-origin: 50% 50%;
-}
-.jkl-icons-animated__plus--plus {
-  transform: rotate(0);
-}
-.jkl-icons-animated__plus--close {
-  transform: rotate(135deg);
+@layer jokul.components {
+  .jkl-icon {
+    --jkl-icon-fill: 0;
+    font-family: "Fremtind Material Symbols", "Fremtind Material Symbols Fallback", sans-serif;
+    font-variation-settings: "FILL" var(--jkl-icon-fill, 0), "GRAD" var(--jkl-icon-grade, 0), "opsz" var(--jkl-icon-opsz, 24);
+    font-feature-settings: "liga";
+    -webkit-font-feature-settings: "liga";
+    font-size: var(--jkl-icon-size, 1.5rem);
+    font-weight: var(--jkl-icon-weight, 300);
+    line-height: 1;
+    display: inline-block;
+    -webkit-font-smoothing: antialiased;
+    transition-timing-function: ease;
+    transition-duration: 150ms;
+    transition-property: font-variation-settings, transform;
+  }
+  .jkl-icon--bold {
+    --jkl-icon-weight: 400;
+  }
+  .jkl-icon--filled {
+    --jkl-icon-fill: 1;
+  }
+  .jkl-icon--medium {
+    --jkl-icon-opsz: 24;
+    --jkl-icon-size: 1.5rem;
+  }
+  .jkl-icon--small {
+    --jkl-icon-opsz: 20;
+    --jkl-icon-size: 1.25rem;
+  }
+  .jkl-icon--inherit {
+    --jkl-icon-opsz: 20;
+    --jkl-icon-size: 1.2em;
+  }
+  .jkl-icon--animated {
+    display: block;
+  }
+  .jkl-icon-red-cross {
+    --red-cross-circle: var(--jkl-color-background-alert-error);
+    --red-cross-path: #1B1917;
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .jkl-icon-red-cross path {
+    fill: var(--red-cross-path);
+  }
+  .jkl-icon-red-cross circle {
+    fill: var(--red-cross-circle);
+  }
+  .jkl-icon-green-check {
+    --green-check-circle: var(--jkl-color-background-alert-success);
+    --green-check-path: #1B1917;
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .jkl-icon-green-check path {
+    fill: var(--green-check-path);
+  }
+  .jkl-icon-green-check circle {
+    fill: var(--green-check-circle);
+  }
+  .jkl-animated-horizontal-arrows,
+  .jkl-animated-vertical-arrows {
+    overflow: hidden;
+    width: var(--jkl-icon-size, 1.5rem);
+    height: var(--jkl-icon-size, 1.5rem);
+  }
+  .jkl-animated-horizontal-arrows__slider,
+  .jkl-animated-vertical-arrows__slider {
+    display: flex;
+    transition-timing-function: ease;
+    transition-duration: 250ms;
+    transition-delay: calc(250ms * 0.3333333333);
+    transition-property: transform;
+  }
+  .jkl-animated-horizontal-arrows__arrow,
+  .jkl-animated-vertical-arrows__arrow {
+    flex-shrink: 0;
+  }
+  .jkl-animated-vertical-arrows__slider {
+    flex-direction: column;
+    height: calc(var(--jkl-icon-size, 1.5rem) * 2);
+  }
+  .jkl-animated-vertical-arrows__slider[data-show=up] {
+    transform: translate3d(0, 0, 0);
+  }
+  .jkl-animated-vertical-arrows__slider[data-show=down] {
+    transform: translate3d(0, -50%, 0);
+  }
+  .jkl-animated-horizontal-arrows__slider {
+    flex-direction: row;
+    width: calc(var(--jkl-icon-size, 1.5rem) * 2);
+  }
+  .jkl-animated-horizontal-arrows__slider[data-show=left] {
+    transform: translate3d(0, 0, 0);
+  }
+  .jkl-animated-horizontal-arrows__slider[data-show=right] {
+    transform: translate3d(-50%, 0, 0);
+  }
+  .jkl-icons-animated__plus {
+    transition-timing-function: cubic-bezier(0, 0, 0.375, 1.17);
+    transition-duration: 250ms;
+    transition-property: transform;
+    transform-origin: 50% 50%;
+  }
+  .jkl-icons-animated__plus--plus {
+    transform: rotate(0);
+  }
+  .jkl-icons-animated__plus--close {
+    transform: rotate(135deg);
+  }
 }

package/styles/components/icon/icon.min.css

@@ -1 +1 @@
-@media screen and (prefers-color-scheme:light){:root{--jkl-icon-grade:0}}[data-theme=light]{--jkl-icon-grade:0}@media screen and (prefers-color-scheme:dark){:root{--jkl-icon-grade:-25}}[data-theme=dark]{--jkl-icon-grade:-25}.jkl-icon{--jkl-icon-fill:0;display:inline-block;font-family:Fremtind Material Symbols,Fremtind Material Symbols Fallback,sans-serif;font-feature-settings:"liga";-webkit-font-feature-settings:"liga";font-size:var(--jkl-icon-size,1.5rem);font-variation-settings:"FILL" var(--jkl-icon-fill,0),"GRAD" var(--jkl-icon-grade,0),"opsz" var(--jkl-icon-opsz,24);font-weight:var(--jkl-icon-weight,300);line-height:1;-webkit-font-smoothing:antialiased;transition-duration:.15s;transition-property:font-variation-settings,transform;transition-timing-function:ease}.jkl-icon--bold{--jkl-icon-weight:400}.jkl-icon--filled{--jkl-icon-fill:1}.jkl-icon--medium{--jkl-icon-opsz:24;--jkl-icon-size:1.5rem}.jkl-icon--small{--jkl-icon-opsz:20;--jkl-icon-size:1.25rem}.jkl-icon--inherit{--jkl-icon-opsz:20;--jkl-icon-size:1.2em}.jkl-icon--animated{display:block}.jkl-icon-red-cross{--red-cross-circle:var(--jkl-color-background-alert-error);--red-cross-path:#1b1917;height:1.5rem;width:1.5rem}.jkl-icon-red-cross path{fill:var(--red-cross-path)}.jkl-icon-red-cross circle{fill:var(--red-cross-circle)}.jkl-icon-green-check{--green-check-circle:var(--jkl-color-background-alert-success);--green-check-path:#1b1917;height:1.5rem;width:1.5rem}.jkl-icon-green-check path{fill:var(--green-check-path)}.jkl-icon-green-check circle{fill:var(--green-check-circle)}.jkl-animated-horizontal-arrows,.jkl-animated-vertical-arrows{height:var(--jkl-icon-size,1.5rem);overflow:hidden;width:var(--jkl-icon-size,1.5rem)}.jkl-animated-horizontal-arrows__slider,.jkl-animated-vertical-arrows__slider{display:flex;transition-delay:83.33333ms;transition-duration:.25s;transition-property:transform;transition-timing-function:ease}.jkl-animated-horizontal-arrows__arrow,.jkl-animated-vertical-arrows__arrow{flex-shrink:0}.jkl-animated-vertical-arrows__slider{flex-direction:column;height:calc(var(--jkl-icon-size, 1.5rem)*2)}.jkl-animated-vertical-arrows__slider[data-show=up]{transform:translateZ(0)}.jkl-animated-vertical-arrows__slider[data-show=down]{transform:translate3d(0,-50%,0)}.jkl-animated-horizontal-arrows__slider{flex-direction:row;width:calc(var(--jkl-icon-size, 1.5rem)*2)}.jkl-animated-horizontal-arrows__slider[data-show=left]{transform:translateZ(0)}.jkl-animated-horizontal-arrows__slider[data-show=right]{transform:translate3d(-50%,0,0)}.jkl-icons-animated__plus{transform-origin:50% 50%;transition-duration:.25s;transition-property:transform;transition-timing-function:cubic-bezier(0,0,.375,1.17)}.jkl-icons-animated__plus--plus{transform:rotate(0)}.jkl-icons-animated__plus--close{transform:rotate(135deg)}
+@layer jokul.theme{@media screen and (prefers-color-scheme:light){:root{--jkl-icon-grade:0}}[data-theme=light]{--jkl-icon-grade:0}@media screen and (prefers-color-scheme:dark){:root{--jkl-icon-grade:-25}}[data-theme=dark]{--jkl-icon-grade:-25}}@layer jokul.components{.jkl-icon{--jkl-icon-fill:0;display:inline-block;font-family:Fremtind Material Symbols,Fremtind Material Symbols Fallback,sans-serif;font-feature-settings:"liga";-webkit-font-feature-settings:"liga";font-size:var(--jkl-icon-size,1.5rem);font-variation-settings:"FILL" var(--jkl-icon-fill,0),"GRAD" var(--jkl-icon-grade,0),"opsz" var(--jkl-icon-opsz,24);font-weight:var(--jkl-icon-weight,300);line-height:1;-webkit-font-smoothing:antialiased;transition-duration:.15s;transition-property:font-variation-settings,transform;transition-timing-function:ease}.jkl-icon--bold{--jkl-icon-weight:400}.jkl-icon--filled{--jkl-icon-fill:1}.jkl-icon--medium{--jkl-icon-opsz:24;--jkl-icon-size:1.5rem}.jkl-icon--small{--jkl-icon-opsz:20;--jkl-icon-size:1.25rem}.jkl-icon--inherit{--jkl-icon-opsz:20;--jkl-icon-size:1.2em}.jkl-icon--animated{display:block}.jkl-icon-red-cross{--red-cross-circle:var(--jkl-color-background-alert-error);--red-cross-path:#1b1917;height:1.5rem;width:1.5rem}.jkl-icon-red-cross path{fill:var(--red-cross-path)}.jkl-icon-red-cross circle{fill:var(--red-cross-circle)}.jkl-icon-green-check{--green-check-circle:var(--jkl-color-background-alert-success);--green-check-path:#1b1917;height:1.5rem;width:1.5rem}.jkl-icon-green-check path{fill:var(--green-check-path)}.jkl-icon-green-check circle{fill:var(--green-check-circle)}.jkl-animated-horizontal-arrows,.jkl-animated-vertical-arrows{height:var(--jkl-icon-size,1.5rem);overflow:hidden;width:var(--jkl-icon-size,1.5rem)}.jkl-animated-horizontal-arrows__slider,.jkl-animated-vertical-arrows__slider{display:flex;transition-delay:83.33333ms;transition-duration:.25s;transition-property:transform;transition-timing-function:ease}.jkl-animated-horizontal-arrows__arrow,.jkl-animated-vertical-arrows__arrow{flex-shrink:0}.jkl-animated-vertical-arrows__slider{flex-direction:column;height:calc(var(--jkl-icon-size, 1.5rem)*2)}.jkl-animated-vertical-arrows__slider[data-show=up]{transform:translateZ(0)}.jkl-animated-vertical-arrows__slider[data-show=down]{transform:translate3d(0,-50%,0)}.jkl-animated-horizontal-arrows__slider{flex-direction:row;width:calc(var(--jkl-icon-size, 1.5rem)*2)}.jkl-animated-horizontal-arrows__slider[data-show=left]{transform:translateZ(0)}.jkl-animated-horizontal-arrows__slider[data-show=right]{transform:translate3d(-50%,0,0)}.jkl-icons-animated__plus{transform-origin:50% 50%;transition-duration:.25s;transition-property:transform;transition-timing-function:cubic-bezier(0,0,.375,1.17)}.jkl-icons-animated__plus--plus{transform:rotate(0)}.jkl-icons-animated__plus--close{transform:rotate(135deg)}}

package/styles/components/icon/icon.scss

@@ -2,134 +2,138 @@
 @use "../../core/jkl";
 @use "./base-styles" as *;
 
-@include jkl.light-mode-variables {
-    --jkl-icon-grade: 0;
-}
+@layer jokul.theme {
+    @include jkl.light-mode-variables {
+        --jkl-icon-grade: 0;
+    }
 
-@include jkl.dark-mode-variables {
-    --jkl-icon-grade: -25;
+    @include jkl.dark-mode-variables {
+        --jkl-icon-grade: -25;
+    }
 }
 
-.jkl-icon {
-    --jkl-icon-fill: 0;
+@layer jokul.components {
+    .jkl-icon {
+        --jkl-icon-fill: 0;
 
-    @include base-styles;
+        @include base-styles;
 
-    &--bold {
-        --jkl-icon-weight: #{jkl.$icon-weight-bold};
-    }
+        &--bold {
+            --jkl-icon-weight: #{jkl.$icon-weight-bold};
+        }
 
-    &--filled {
-        --jkl-icon-fill: 1;
-    }
+        &--filled {
+            --jkl-icon-fill: 1;
+        }
 
-    &--medium {
-        --jkl-icon-opsz: 24;
-        --jkl-icon-size: #{jkl.rem(24px)};
-    }
+        &--medium {
+            --jkl-icon-opsz: 24;
+            --jkl-icon-size: #{jkl.rem(24px)};
+        }
 
-    &--small {
-        --jkl-icon-opsz: 20;
-        --jkl-icon-size: #{jkl.rem(20px)};
-    }
+        &--small {
+            --jkl-icon-opsz: 20;
+            --jkl-icon-size: #{jkl.rem(20px)};
+        }
 
-    &--inherit {
-        --jkl-icon-opsz: 20;
-        --jkl-icon-size: 1.2em;
-    }
+        &--inherit {
+            --jkl-icon-opsz: 20;
+            --jkl-icon-size: 1.2em;
+        }
 
-    &--animated {
-        display: block;
+        &--animated {
+            display: block;
+        }
     }
-}
 
-.jkl-icon-red-cross {
-    --red-cross-circle: var(--jkl-color-background-alert-error);
-    --red-cross-path: #{jkl.$color-brand-granitt};
+    .jkl-icon-red-cross {
+        --red-cross-circle: var(--jkl-color-background-alert-error);
+        --red-cross-path: #{jkl.$color-brand-granitt};
 
-    width: jkl.rem(24px);
-    height: jkl.rem(24px);
+        width: jkl.rem(24px);
+        height: jkl.rem(24px);
 
-    & path {
-        fill: var(--red-cross-path);
-    }
+        & path {
+            fill: var(--red-cross-path);
+        }
 
-    & circle {
-        fill: var(--red-cross-circle);
+        & circle {
+            fill: var(--red-cross-circle);
+        }
     }
-}
 
-.jkl-icon-green-check {
-    --green-check-circle: var(--jkl-color-background-alert-success);
-    --green-check-path: #{jkl.$color-brand-granitt};
+    .jkl-icon-green-check {
+        --green-check-circle: var(--jkl-color-background-alert-success);
+        --green-check-path: #{jkl.$color-brand-granitt};
 
-    width: jkl.rem(24px);
-    height: jkl.rem(24px);
+        width: jkl.rem(24px);
+        height: jkl.rem(24px);
 
-    & path {
-        fill: var(--green-check-path);
-    }
+        & path {
+            fill: var(--green-check-path);
+        }
 
-    & circle {
-        fill: var(--green-check-circle);
+        & circle {
+            fill: var(--green-check-circle);
+        }
     }
-}
 
-.jkl-animated-horizontal-arrows,
-.jkl-animated-vertical-arrows {
-    overflow: hidden;
-    width: var(--jkl-icon-size, #{jkl.rem(24px)});
-    height: var(--jkl-icon-size, #{jkl.rem(24px)});
+    .jkl-animated-horizontal-arrows,
+    .jkl-animated-vertical-arrows {
+        overflow: hidden;
+        width: var(--jkl-icon-size, #{jkl.rem(24px)});
+        height: var(--jkl-icon-size, #{jkl.rem(24px)});
 
-    &__slider {
-        display: flex;
+        &__slider {
+            display: flex;
 
-        @include jkl.motion(standard, expressive);
-        transition-delay: calc(#{jkl.timing("expressive")} * (1 / 3));
-        transition-property: transform;
-    }
+            @include jkl.motion(standard, expressive);
+            transition-delay: calc(#{jkl.timing("expressive")} * (1 / 3));
+            transition-property: transform;
+        }
 
-    &__arrow {
-        flex-shrink: 0;
+        &__arrow {
+            flex-shrink: 0;
+        }
     }
-}
 
-.jkl-animated-vertical-arrows__slider {
-    flex-direction: column;
-    height: calc(var(--jkl-icon-size, #{jkl.rem(24px)}) * 2);
+    .jkl-animated-vertical-arrows__slider {
+        flex-direction: column;
+        height: calc(var(--jkl-icon-size, #{jkl.rem(24px)}) * 2);
 
-    &[data-show="up"] {
-        transform: translate3d(0, 0, 0);
-    }
+        &[data-show="up"] {
+            transform: translate3d(0, 0, 0);
+        }
 
-    &[data-show="down"] {
-        transform: translate3d(0, -50%, 0);
+        &[data-show="down"] {
+            transform: translate3d(0, -50%, 0);
+        }
     }
-}
 
-.jkl-animated-horizontal-arrows__slider {
-    flex-direction: row;
-    width: calc(var(--jkl-icon-size, #{jkl.rem(24px)}) * 2);
+    .jkl-animated-horizontal-arrows__slider {
+        flex-direction: row;
+        width: calc(var(--jkl-icon-size, #{jkl.rem(24px)}) * 2);
 
-    &[data-show="left"] {
-        transform: translate3d(0, 0, 0);
-    }
+        &[data-show="left"] {
+            transform: translate3d(0, 0, 0);
+        }
 
-    &[data-show="right"] {
-        transform: translate3d(-50%, 0, 0);
+        &[data-show="right"] {
+            transform: translate3d(-50%, 0, 0);
+        }
     }
-}
 
-.jkl-icons-animated__plus {
-    @include jkl.motion("easeInBounceOut", "expressive");
-    transition-property: transform;
-    transform-origin: 50% 50%;
+    .jkl-icons-animated__plus {
+        @include jkl.motion("easeInBounceOut", "expressive");
+        transition-property: transform;
+        transform-origin: 50% 50%;
 
-    &--plus {
-        transform: rotate(0);
-    }
+        &--plus {
+            transform: rotate(0);
+        }
 
-    &--close {
-        transform: rotate(135deg);
+        &--close {
+            transform: rotate(135deg);
+        }
     }
 }

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

@@ -1,54 +1,58 @@
 /**
- * Do not edit directly
- * Generated on Wed, 18 Dec 2024 12:25:37 GMT
+ * Do not edit directly, this file was auto-generated.
  */
-.jkl-icon-button {
-  background-color: transparent;
-  cursor: pointer;
-  color: inherit;
-  position: relative;
-  transition-property: box-shadow;
-  padding: 0;
-  transition-timing-function: cubic-bezier(0.6, 0.2, 0.35, 1);
-  transition-duration: 100ms;
-}
-.jkl-icon-button {
-  outline: 0;
-  border-style: none;
-  outline-style: none;
-}
-.jkl-icon-button:active, .jkl-icon-button:hover, .jkl-icon-button: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-icon-button {
-    outline: revert;
-    border-style: revert;
-    outline-style: revert;
+    background-color: transparent;
+    cursor: pointer;
+    color: inherit;
+    position: relative;
+    transition-property: box-shadow;
+    padding: 0;
+    transition-timing-function: cubic-bezier(0.6, 0.2, 0.35, 1);
+    transition-duration: 100ms;
   }
-  .jkl-icon-button:active, .jkl-icon-button:hover, .jkl-icon-button:focus {
-    outline: revert;
-    outline-style: revert;
-  }
-}
-.jkl-icon-button .jkl-icon {
-  display: flex;
-  align-items: center;
-}
-.jkl-icon-button .jkl-icon--animated {
-  display: revert;
-}
-.jkl-icon-button:focus-visible {
-  outline: 3px solid var(--jkl-color-border-action);
-  outline-offset: 3px;
-}
-.jkl-icon-button:hover {
-  color: var(--jkl-color-text-interactive-hover);
-}
-@media screen and (forced-colors: active) {
   .jkl-icon-button {
-    border: none;
-    background: none;
+    outline: 0;
+    border-style: none;
+    outline-style: none;
+  }
+  .jkl-icon-button:active, .jkl-icon-button:hover, .jkl-icon-button:focus {
+    outline: 0;
+    outline-style: none;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-icon-button {
+      outline: revert;
+      border-style: revert;
+      outline-style: revert;
+    }
+    .jkl-icon-button:active, .jkl-icon-button:hover, .jkl-icon-button:focus {
+      outline: revert;
+      outline-style: revert;
+    }
+  }
+  .jkl-icon-button .jkl-icon {
+    display: flex;
+    align-items: center;
+  }
+  .jkl-icon-button .jkl-icon--animated {
+    display: revert;
+  }
+  .jkl-icon-button:focus-visible {
+    outline: 3px solid var(--jkl-color-border-action);
+    outline-offset: 3px;
+  }
+  .jkl-icon-button:hover {
+    color: var(--jkl-color-text-interactive-hover);
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-icon-button {
+      border: none;
+      background: none;
+    }
   }
 }

package/styles/components/icon-button/icon-button.min.css

@@ -1 +1 @@
-.jkl-icon-button{background-color:initial;border-style:none;color:inherit;cursor:pointer;padding:0;position:relative;transition-duration:.1s;transition-property:box-shadow;transition-timing-function:cubic-bezier(.6,.2,.35,1)}.jkl-icon-button,.jkl-icon-button:active,.jkl-icon-button:focus,.jkl-icon-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-icon-button{border-style:revert}.jkl-icon-button,.jkl-icon-button:active,.jkl-icon-button:focus,.jkl-icon-button:hover{outline:revert;outline-style:revert}}.jkl-icon-button .jkl-icon{align-items:center;display:flex}.jkl-icon-button .jkl-icon--animated{display:revert}.jkl-icon-button:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-icon-button:hover{color:var(--jkl-color-text-interactive-hover)}@media screen and (forced-colors:active){.jkl-icon-button{background:none;border:none}}
+@layer jokul.components{.jkl-icon-button{background-color:initial;border-style:none;color:inherit;cursor:pointer;padding:0;position:relative;transition-duration:.1s;transition-property:box-shadow;transition-timing-function:cubic-bezier(.6,.2,.35,1)}.jkl-icon-button,.jkl-icon-button:active,.jkl-icon-button:focus,.jkl-icon-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-icon-button{border-style:revert}.jkl-icon-button,.jkl-icon-button:active,.jkl-icon-button:focus,.jkl-icon-button:hover{outline:revert;outline-style:revert}}.jkl-icon-button .jkl-icon{align-items:center;display:flex}.jkl-icon-button .jkl-icon--animated{display:revert}.jkl-icon-button:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-icon-button:hover{color:var(--jkl-color-text-interactive-hover)}@media screen and (forced-colors:active){.jkl-icon-button{background:none;border:none}}}