@fremtind/jokul 3.6.0 → 3.7.0

package/styles/components/card/card.scss

@@ -0,0 +1,105 @@
+@charset "UTF-8";
+@use "../../core/jkl";
+
+@layer jokul.components {
+    .jkl-card {
+        --padding-s: var(--jkl-unit-05);
+        --padding-m: var(--jkl-unit-15);
+        --padding-l: var(--jkl-unit-20);
+        --padding-xl: var(--jkl-unit-30);
+        --border-radius: #{jkl.rem(4px)};
+        --border-color: transparent;
+        --border-width: #{jkl.rem(1px)};
+        --background-color: transparent;
+
+        position: relative;
+        overflow: hidden;
+        display: block;
+        background-color: var(--background-color);
+        border-radius: var(--border-radius);
+        box-sizing: border-box;
+        padding: var(--padding, var(--padding-s));
+        text-decoration: none;
+        color: var(--jkl-color-text-default);
+
+        &::after {
+            content: "";
+            position: absolute;
+            inset: 0;
+            pointer-events: none;
+            border-radius: var(--border-radius);
+            border: var(--border-width) solid var(--border-color);
+
+            @include jkl.motion("standard", "snappy", border-color, border-size);
+        }
+
+        @include jkl.from-medium-device {
+            --padding-s: var(--jkl-unit-10);
+            --padding-m: var(--jkl-unit-20);
+            --padding-l: var(--jkl-unit-30);
+            --padding-xl: var(--jkl-unit-40);
+        }
+
+        &[data-padding="s"] {
+            --padding: var(--padding-s);
+        }
+
+        &[data-padding="m"] {
+            --padding: var(--padding-m);
+        }
+
+        &[data-padding="l"] {
+            --padding: var(--padding-l);
+        }
+
+        &[data-padding="xl"] {
+            --padding: var(--padding-xl);
+        }
+
+        &--high {
+            --background-color: var(--jkl-color-background-container-high);
+        }
+
+        &--low {
+            --background-color: var(--jkl-color-background-container-low);
+        }
+
+        &--outlined {
+            --border-color: var(--jkl-color-border-separator);
+        }
+
+        &[data-clickable="true"] {
+            cursor: pointer;
+
+            &:hover {
+                --border-color: var(--jkl-color-border-separator-hover);
+                --border-width: #{jkl.rem(2px)};
+            }
+
+            &:focus-visible {
+                @include jkl.focus-outline;
+            }
+        }
+    }
+
+    .jkl-card-image {
+        --margin: calc(var(--padding, 0) * -1); // Sett negativ margin tilsvarende padding (fra Card)
+
+        width: calc(100% + 2 * var(--padding, 0));
+        aspect-ratio: var(--image-aspect-ratio, 3/2);
+        margin-inline: var(--margin, 0);
+        object-fit: cover;
+
+        &--top {
+            margin-top: var(--margin, 0);
+        }
+
+        &--bottom {
+            margin-bottom: var(--margin, 0);
+        }
+
+        &--full {
+            margin-block: var(--margin, 0);
+        }
+    }
+}

package/styles/components/checkbox/_index.scss

@@ -0,0 +1 @@
+@forward "checkbox";

package/styles/components/checkbox/checkbox.css

@@ -30,7 +30,7 @@
     --jkl-checkbox-box-size: 1.125rem;
     --jkl-checkbox-line-height: 1.5rem;
   }
-  @keyframes jkl-checkbox-checked-ui6ra6k {
+  @keyframes jkl-checkbox-checked-uwwt5n4 {
     0% {
       width: 0;
       height: 0;
@@ -44,7 +44,7 @@
       height: 58%;
     }
   }
-  @keyframes jkl-checkbox-indeterminate-ui6ra7a {
+  @keyframes jkl-checkbox-indeterminate-uwwt5o2 {
     0% {
       width: 0;
     }
@@ -73,11 +73,11 @@
     left: calc(-0.5 * var(--jkl-checkbox-box-size));
   }
   .jkl-checkbox__input:checked + .jkl-checkbox__label .jkl-checkbox__check-mark::after {
-    animation: jkl-checkbox-checked-ui6ra6k 150ms ease-in-out forwards;
+    animation: jkl-checkbox-checked-uwwt5n4 150ms ease-in-out forwards;
     opacity: 1;
   }
   .jkl-checkbox__input:indeterminate:not(:checked) + .jkl-checkbox__label .jkl-checkbox__indeterminate-mark::after {
-    animation: jkl-checkbox-indeterminate-ui6ra7a 150ms ease-in-out forwards;
+    animation: jkl-checkbox-indeterminate-uwwt5o2 150ms ease-in-out forwards;
     opacity: 1;
   }
   .jkl-checkbox__input:focus-visible + .jkl-checkbox__label {

package/styles/components/checkbox/checkbox.min.css

@@ -1 +1 @@
-@layer jokul.components{:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-checkbox-font-size:var(--jkl-body-font-size);--jkl-checkbox-line-height:var(--jkl-body-line-height);--jkl-checkbox-font-weight:var(--jkl-body-font-weight);--jkl-checkbox-height:3rem;--jkl-checkbox-box-size:1.5rem;--jkl-checkbox-line-height:2rem}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-checkbox-height:2.5rem;--jkl-checkbox-box-size:1.5rem;--jkl-checkbox-line-height:1.75rem}}[data-density=compact],[data-layout-density=compact]{--jkl-checkbox-font-size:var(--jkl-small-font-size);--jkl-checkbox-line-height:var(--jkl-small-line-height);--jkl-checkbox-font-weight:var(--jkl-small-font-weight);--jkl-checkbox-height:1.75rem;--jkl-checkbox-box-size:1.125rem;--jkl-checkbox-line-height:1.5rem}@keyframes jkl-checkbox-checked-ui6ra6k{0%{height:0;width:0}40%{height:0;width:18%}to{height:58%;width:18%}}@keyframes jkl-checkbox-indeterminate-ui6ra7a{0%{width:0}to{width:66%}}.jkl-checkbox{--box-color:var(--jkl-color-border-action);--check-color:var(--jkl-color-border-action);--text-color:var(--jkl-color-text-default);--background-color:#0000;color:var(--text-color);display:flex;flex-wrap:wrap;font-size:var(--jkl-checkbox-font-size);font-weight:var(--jkl-checkbox-font-weight);line-height:var(--jkl-checkbox-line-height);min-height:var(--jkl-checkbox-height);position:relative}.jkl-checkbox__input{left:calc(var(--jkl-checkbox-box-size)*-.5);opacity:0;position:absolute;top:var(--jkl-checkbox-box-size)}.jkl-checkbox__input:checked+.jkl-checkbox__label .jkl-checkbox__check-mark:after{animation:jkl-checkbox-checked-ui6ra6k .15s ease-in-out forwards;opacity:1}.jkl-checkbox__input:indeterminate:not(:checked)+.jkl-checkbox__label .jkl-checkbox__indeterminate-mark:after{animation:jkl-checkbox-indeterminate-ui6ra7a .15s ease-in-out forwards;opacity:1}.jkl-checkbox__input:focus-visible+.jkl-checkbox__label{color:var(--jkl-checkbox-focus-color)}.jkl-checkbox__input:focus-visible+.jkl-checkbox__label>.jkl-checkbox__mark{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-checkbox__input:disabled+.jkl-checkbox__label{color:var(--jkl-checkbox-disabled-color)}.jkl-checkbox__input:active{--background-color:var(--jkl-color-background-input-focus)}.jkl-checkbox__label{cursor:pointer;display:flex;flex-shrink:0;max-width:100%;min-width:0}.jkl-checkbox__label:active .jkl-checkbox__mark,.jkl-checkbox__label:hover .jkl-checkbox__mark{outline:1px solid var(--box-color)}.jkl-checkbox__text{margin:calc((var(--jkl-checkbox-height) - var(--jkl-checkbox-line-height))*.5) 0;transition-duration:.15s;transition-property:color;transition-timing-function:ease;translate:0 .0625rem}.jkl-checkbox__mark{box-sizing:border-box;height:var(--jkl-checkbox-box-size);margin-block:calc((var(--jkl-checkbox-height) - var(--jkl-checkbox-box-size))*.5);position:relative;width:var(--jkl-checkbox-box-size);-webkit-margin-end:var(--jkl-unit-10);align-self:flex-start;background-color:var(--background-color);border:1px solid;border-color:var(--box-color);border-radius:0;flex-shrink:0;margin-inline-end:var(--jkl-unit-10);outline:none;transition-duration:.15s;transition-property:background-color;transition-timing-function:ease}@media screen and (forced-colors:active){.jkl-checkbox__mark{border:1px solid ButtonText;outline:revert}}.jkl-checkbox__check-mark:after{border-bottom:.125rem solid var(--check-color);border-left-width:.125rem;border-left:0 solid var(--check-color);border-right:.125rem solid var(--check-color);border-top-width:.125rem;border-top:0 solid var(--check-color);bottom:42%;content:"";display:block;height:58%;left:18%;opacity:0;position:absolute;transform:rotate(45deg);transform-origin:bottom left;transition-duration:.15s;transition-property:opacity,border-color;transition-timing-function:ease;width:18%}@media screen and (forced-colors:active){.jkl-checkbox__check-mark:after{border-color:ButtonText}}.jkl-checkbox__indeterminate-mark:after{--width:66%;--thickness:0.125rem;border-bottom:solid var(--thickness) var(--check-color);bottom:calc(50% - var(--thickness)/2);content:"";display:block;left:calc((100% - var(--width))/2);opacity:0;position:absolute;transition-duration:.15s;transition-property:opacity,border-color;transition-timing-function:ease;width:var(--width)}@media screen and (forced-colors:active){.jkl-checkbox__indeterminate-mark:after{border-color:ButtonText}}.jkl-checkbox--inline{display:inline-flex}.jkl-checkbox--inline:not(:last-of-type){margin-right:calc(var(--jkl-unit-10)*3)}.jkl-checkbox--error{--background-color:var(--jkl-color-background-alert-error);--check-color:var(--jkl-color-text-on-alert)}}
+@layer jokul.components{:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-checkbox-font-size:var(--jkl-body-font-size);--jkl-checkbox-line-height:var(--jkl-body-line-height);--jkl-checkbox-font-weight:var(--jkl-body-font-weight);--jkl-checkbox-height:3rem;--jkl-checkbox-box-size:1.5rem;--jkl-checkbox-line-height:2rem}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-checkbox-height:2.5rem;--jkl-checkbox-box-size:1.5rem;--jkl-checkbox-line-height:1.75rem}}[data-density=compact],[data-layout-density=compact]{--jkl-checkbox-font-size:var(--jkl-small-font-size);--jkl-checkbox-line-height:var(--jkl-small-line-height);--jkl-checkbox-font-weight:var(--jkl-small-font-weight);--jkl-checkbox-height:1.75rem;--jkl-checkbox-box-size:1.125rem;--jkl-checkbox-line-height:1.5rem}@keyframes jkl-checkbox-checked-uwwt5n4{0%{height:0;width:0}40%{height:0;width:18%}to{height:58%;width:18%}}@keyframes jkl-checkbox-indeterminate-uwwt5o2{0%{width:0}to{width:66%}}.jkl-checkbox{--box-color:var(--jkl-color-border-action);--check-color:var(--jkl-color-border-action);--text-color:var(--jkl-color-text-default);--background-color:#0000;color:var(--text-color);display:flex;flex-wrap:wrap;font-size:var(--jkl-checkbox-font-size);font-weight:var(--jkl-checkbox-font-weight);line-height:var(--jkl-checkbox-line-height);min-height:var(--jkl-checkbox-height);position:relative}.jkl-checkbox__input{left:calc(var(--jkl-checkbox-box-size)*-.5);opacity:0;position:absolute;top:var(--jkl-checkbox-box-size)}.jkl-checkbox__input:checked+.jkl-checkbox__label .jkl-checkbox__check-mark:after{animation:jkl-checkbox-checked-uwwt5n4 .15s ease-in-out forwards;opacity:1}.jkl-checkbox__input:indeterminate:not(:checked)+.jkl-checkbox__label .jkl-checkbox__indeterminate-mark:after{animation:jkl-checkbox-indeterminate-uwwt5o2 .15s ease-in-out forwards;opacity:1}.jkl-checkbox__input:focus-visible+.jkl-checkbox__label{color:var(--jkl-checkbox-focus-color)}.jkl-checkbox__input:focus-visible+.jkl-checkbox__label>.jkl-checkbox__mark{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-checkbox__input:disabled+.jkl-checkbox__label{color:var(--jkl-checkbox-disabled-color)}.jkl-checkbox__input:active{--background-color:var(--jkl-color-background-input-focus)}.jkl-checkbox__label{cursor:pointer;display:flex;flex-shrink:0;max-width:100%;min-width:0}.jkl-checkbox__label:active .jkl-checkbox__mark,.jkl-checkbox__label:hover .jkl-checkbox__mark{outline:1px solid var(--box-color)}.jkl-checkbox__text{margin:calc((var(--jkl-checkbox-height) - var(--jkl-checkbox-line-height))*.5) 0;transition-duration:.15s;transition-property:color;transition-timing-function:ease;translate:0 .0625rem}.jkl-checkbox__mark{box-sizing:border-box;height:var(--jkl-checkbox-box-size);margin-block:calc((var(--jkl-checkbox-height) - var(--jkl-checkbox-box-size))*.5);position:relative;width:var(--jkl-checkbox-box-size);-webkit-margin-end:var(--jkl-unit-10);align-self:flex-start;background-color:var(--background-color);border:1px solid;border-color:var(--box-color);border-radius:0;flex-shrink:0;margin-inline-end:var(--jkl-unit-10);outline:none;transition-duration:.15s;transition-property:background-color;transition-timing-function:ease}@media screen and (forced-colors:active){.jkl-checkbox__mark{border:1px solid ButtonText;outline:revert}}.jkl-checkbox__check-mark:after{border-bottom:.125rem solid var(--check-color);border-left-width:.125rem;border-left:0 solid var(--check-color);border-right:.125rem solid var(--check-color);border-top-width:.125rem;border-top:0 solid var(--check-color);bottom:42%;content:"";display:block;height:58%;left:18%;opacity:0;position:absolute;transform:rotate(45deg);transform-origin:bottom left;transition-duration:.15s;transition-property:opacity,border-color;transition-timing-function:ease;width:18%}@media screen and (forced-colors:active){.jkl-checkbox__check-mark:after{border-color:ButtonText}}.jkl-checkbox__indeterminate-mark:after{--width:66%;--thickness:0.125rem;border-bottom:solid var(--thickness) var(--check-color);bottom:calc(50% - var(--thickness)/2);content:"";display:block;left:calc((100% - var(--width))/2);opacity:0;position:absolute;transition-duration:.15s;transition-property:opacity,border-color;transition-timing-function:ease;width:var(--width)}@media screen and (forced-colors:active){.jkl-checkbox__indeterminate-mark:after{border-color:ButtonText}}.jkl-checkbox--inline{display:inline-flex}.jkl-checkbox--inline:not(:last-of-type){margin-right:calc(var(--jkl-unit-10)*3)}.jkl-checkbox--error{--background-color:var(--jkl-color-background-alert-error);--check-color:var(--jkl-color-text-on-alert)}}

package/styles/components/checkbox/checkbox.scss

@@ -0,0 +1,248 @@
+@charset "UTF-8";
+@use "sass:string";
+@use "../../core/jkl";
+@use "../../core/jkl/colors";
+
+@layer jokul.components {
+    @include jkl.comfortable-density-variables {
+        @include jkl.declare-font-variables("jkl-checkbox", "body");
+
+        --jkl-checkbox-height: #{jkl.rem(48px)};
+        --jkl-checkbox-box-size: #{jkl.rem(24px)};
+        --jkl-checkbox-line-height: #{jkl.rem(32px)};
+
+        @include jkl.small-device {
+            --jkl-checkbox-height: #{jkl.rem(40px)};
+            --jkl-checkbox-box-size: #{jkl.rem(24px)};
+            --jkl-checkbox-line-height: #{jkl.rem(28px)};
+        }
+    }
+
+    @include jkl.compact-density-variables {
+        @include jkl.declare-font-variables("jkl-checkbox", "small");
+
+        --jkl-checkbox-height: #{jkl.rem(28px)};
+        --jkl-checkbox-box-size: #{jkl.rem(18px)};
+        --jkl-checkbox-line-height: #{jkl.rem(24px)};
+    }
+
+    $_checkbox-checked-animation-name: jkl-checkbox-checked-#{string.unique-id(
+        
+    )};
+    $_checkbox-indeterminate-animation-name: jkl-checkbox-indeterminate-#{string.unique-id(
+        
+    )};
+
+    @keyframes #{$_checkbox-checked-animation-name} {
+        0% {
+            width: 0;
+            height: 0;
+        }
+
+        40% {
+            width: 18%;
+            height: 0;
+        }
+
+        100% {
+            width: 18%;
+            height: 58%;
+        }
+    }
+
+    @keyframes #{$_checkbox-indeterminate-animation-name} {
+        0% {
+            width: 0;
+        }
+
+        100% {
+            width: 66%;
+        }
+    }
+
+    .jkl-checkbox {
+        --box-color: var(--jkl-color-border-action);
+        --check-color: var(--jkl-color-border-action);
+        --text-color: var(--jkl-color-text-default);
+        --background-color: transparent;
+
+        @include jkl.use-font-variables("jkl-checkbox");
+
+        display: flex;
+        flex-wrap: wrap;
+        min-height: var(--jkl-checkbox-height);
+        color: var(--text-color);
+        position: relative;
+
+        &__input {
+            // Hide native checkbox
+            position: absolute;
+            opacity: 0;
+            // Make sure that when the browser scrolls here because of focus, the control
+            // is positioned below the label so that the label becomes visible.
+            top: var(--jkl-checkbox-box-size);
+            left: calc(-0.5 * var(--jkl-checkbox-box-size));
+
+            &:checked {
+                + .jkl-checkbox__label .jkl-checkbox__check-mark::after {
+                    animation: $_checkbox-checked-animation-name
+                        jkl.timing("productive") ease-in-out forwards;
+                    opacity: 1;
+                }
+            }
+
+            &:indeterminate:not(:checked) {
+                + .jkl-checkbox__label
+                    .jkl-checkbox__indeterminate-mark::after {
+                    animation: $_checkbox-indeterminate-animation-name
+                        jkl.timing("productive") ease-in-out forwards;
+                    opacity: 1;
+                }
+            }
+
+            &:focus-visible + .jkl-checkbox__label {
+                color: var(--jkl-checkbox-focus-color);
+
+                & > .jkl-checkbox__mark {
+                    @include jkl.focus-outline;
+                }
+            }
+
+            &:disabled + .jkl-checkbox__label {
+                color: var(--jkl-checkbox-disabled-color);
+            }
+
+            &:active {
+                --background-color: var(--jkl-color-background-input-focus);
+            }
+        }
+
+        &__label {
+            display: flex;
+            min-width: 0;
+            max-width: 100%;
+            cursor: pointer;
+            flex-shrink: 0;
+
+            &:hover,
+            &:active {
+                .jkl-checkbox__mark {
+                    outline: 1px solid var(--box-color);
+                }
+            }
+        }
+
+        &__text {
+            margin: calc(
+                (
+                    var(--jkl-checkbox-height) - var(--jkl-checkbox-line-height)
+                )
+                    * 0.5
+            ) 0;
+            translate: 0 jkl.rem(1px);
+
+            @include jkl.motion;
+            transition-property: color;
+        }
+
+        &__mark {
+            box-sizing: border-box;
+            position: relative;
+            height: var(--jkl-checkbox-box-size);
+            width: var(--jkl-checkbox-box-size);
+
+            margin-block: calc(
+                (
+                    var(--jkl-checkbox-height) - var(--jkl-checkbox-box-size)
+                )
+                    * 0.5
+            );
+            margin-inline-end: var(--jkl-unit-10);
+            align-self: flex-start;
+            flex-shrink: 0; // Don't allow the mark to shrink in case of really long text
+
+            outline: none;
+            border-radius: 0; // fixes rounded corners in iOS Safari
+            border: 1px solid;
+            border-color: var(--box-color);
+            background-color: var(--background-color);
+
+            @include jkl.motion;
+            transition-property: background-color;
+
+            @include jkl.forced-colors-mode {
+                outline: revert;
+                border: 1px solid ButtonText;
+            }
+        }
+
+        // This is the check marker
+        &__check-mark {
+            &::after {
+                content: "";
+                position: absolute;
+                transform-origin: bottom left;
+                bottom: 42%;
+                left: 18%;
+
+                display: block;
+                width: 18%;
+                height: 58%;
+                transform: rotate(45deg);
+
+                border: solid jkl.rem(2px) var(--check-color);
+                border-left-width: 0;
+                border-top-width: 0;
+
+                opacity: 0;
+
+                @include jkl.motion;
+                transition-property: opacity, border-color;
+
+                @include jkl.forced-colors-mode {
+                    border-color: ButtonText;
+                }
+            }
+        }
+
+        // This is the indeterminate marker
+        &__indeterminate-mark {
+            &::after {
+                --width: 66%;
+                --thickness: #{jkl.rem(2px)};
+
+                content: "";
+                position: absolute;
+                bottom: calc(50% - var(--thickness) / 2);
+                left: calc((100% - var(--width)) / 2);
+
+                display: block;
+                width: var(--width);
+
+                border-bottom: solid var(--thickness) var(--check-color);
+
+                opacity: 0;
+
+                @include jkl.motion;
+                transition-property: opacity, border-color;
+
+                @include jkl.forced-colors-mode {
+                    border-color: ButtonText;
+                }
+            }
+        }
+
+        &--inline {
+            display: inline-flex;
+
+            &:not(:last-of-type) {
+                margin-right: jkl.$unit-30;
+            }
+        }
+
+        &--error {
+            --background-color: var(--jkl-color-background-alert-error);
+            --check-color: var(--jkl-color-text-on-alert);
+        }
+    }
+}

package/styles/components/checkbox-panel/_index.scss

@@ -0,0 +1 @@
+@forward "checkbox-panel";

package/styles/components/checkbox-panel/checkbox-panel.css

@@ -105,7 +105,7 @@
     --jkl-checkbox-box-size: 1.125rem;
     --jkl-checkbox-line-height: 1.5rem;
   }
-  @keyframes jkl-checkbox-checked-u513wc2 {
+  @keyframes jkl-checkbox-checked-uclkrrk {
     0% {
       width: 0;
       height: 0;
@@ -119,7 +119,7 @@
       height: 58%;
     }
   }
-  @keyframes jkl-checkbox-indeterminate-u513wcu {
+  @keyframes jkl-checkbox-indeterminate-uclkrsc {
     0% {
       width: 0;
     }
@@ -148,11 +148,11 @@
     left: calc(-0.5 * var(--jkl-checkbox-box-size));
   }
   .jkl-checkbox__input:checked + .jkl-checkbox__label .jkl-checkbox__check-mark::after {
-    animation: jkl-checkbox-checked-u513wc2 150ms ease-in-out forwards;
+    animation: jkl-checkbox-checked-uclkrrk 150ms ease-in-out forwards;
     opacity: 1;
   }
   .jkl-checkbox__input:indeterminate:not(:checked) + .jkl-checkbox__label .jkl-checkbox__indeterminate-mark::after {
-    animation: jkl-checkbox-indeterminate-u513wcu 150ms ease-in-out forwards;
+    animation: jkl-checkbox-indeterminate-uclkrsc 150ms ease-in-out forwards;
     opacity: 1;
   }
   .jkl-checkbox__input:focus-visible + .jkl-checkbox__label {
@@ -263,7 +263,7 @@
     --check-color: var(--jkl-color-text-on-alert);
   }
 }
-@keyframes jkl-checkbox-checked-u513wds {
+@keyframes jkl-checkbox-checked-uclkrt3 {
   0% {
     width: 0;
     height: 0;
@@ -327,7 +327,7 @@
     }
   }
   .jkl-checkbox-panel:has(:checked) .jkl-checkbox-panel__decorator::after {
-    animation: jkl-checkbox-checked-u513wds 150ms ease-in-out forwards;
+    animation: jkl-checkbox-checked-uclkrt3 150ms ease-in-out forwards;
     opacity: 1;
   }
   .jkl-checkbox-panel:has([aria-invalid=true]) {

package/styles/components/checkbox-panel/checkbox-panel.min.css

@@ -1,3 +1,3 @@
-@layer components{.jkl-input-panel{--outer-border-color:var(--jkl-color-border-input);--outer-border-thickness:0.0625rem;--background-color:#0000;background-color:var(--background-color);border-radius:4px;box-shadow:inset 0 0 0 var(--outer-border-thickness) var(--outer-border-color);display:flex;flex-direction:column;interpolate-size:allow-keywords;transition-duration:.15s;transition-property:box-shadow;transition-timing-function:ease}.jkl-input-panel__header{align-items:center;cursor:pointer;display:grid;gap:.5rem;grid-template-columns:1fr -webkit-max-content;grid-template-columns:1fr max-content;padding:var(--jkl-spacing-s) var(--jkl-spacing-m);position:relative}.jkl-input-panel__header__amount{align-items:center;display:flex;font-size:var(--jkl-checkbox-font-size);font-weight:var(--jkl-checkbox-font-weight);height:100%;line-height:var(--jkl-checkbox-line-height)}.jkl-input-panel__header .jkl-checkbox,.jkl-input-panel__header .jkl-radio-button,.jkl-input-panel__header label{position:unset}.jkl-input-panel__header label:after{block-size:100%;content:"";inline-size:100%;left:0;position:absolute;top:0}.jkl-input-panel__description{height:0;overflow:hidden;padding-inline:var(--jkl-spacing-m);-webkit-padding-after:var(--jkl-spacing-none);font-size:var(--jkl-checkbox-font-size);font-weight:var(--jkl-checkbox-font-weight);line-height:normal;line-height:var(--jkl-checkbox-line-height);padding-block-end:var(--jkl-spacing-none);transition-duration:.15s;transition-property:height;transition-timing-function:ease}.jkl-input-panel:has(:focus-visible){outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-input-panel:has(:checked),.jkl-input-panel:not([data-always-open]),.jkl-input-panel[data-always-open=true]{--background-color:var(--jkl-color-background-container-high)}.jkl-input-panel:has(:checked) .jkl-input-panel__description,.jkl-input-panel:not([data-always-open]) .jkl-input-panel__description,.jkl-input-panel[data-always-open=true] .jkl-input-panel__description{height:auto;-webkit-padding-after:var(--jkl-spacing-s);padding-block-end:var(--jkl-spacing-s)}.jkl-input-panel:has(input:hover){--outer-border-color:var(--jkl-color-border-separator-hover);--outer-border-thickness:0.125rem;cursor:pointer}}@layer jokul.components{:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-checkbox-font-size:var(--jkl-body-font-size);--jkl-checkbox-line-height:var(--jkl-body-line-height);--jkl-checkbox-font-weight:var(--jkl-body-font-weight);--jkl-checkbox-height:3rem;--jkl-checkbox-box-size:1.5rem;--jkl-checkbox-line-height:2rem}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-checkbox-height:2.5rem;--jkl-checkbox-box-size:1.5rem;--jkl-checkbox-line-height:1.75rem}}[data-density=compact],[data-layout-density=compact]{--jkl-checkbox-font-size:var(--jkl-small-font-size);--jkl-checkbox-line-height:var(--jkl-small-line-height);--jkl-checkbox-font-weight:var(--jkl-small-font-weight);--jkl-checkbox-height:1.75rem;--jkl-checkbox-box-size:1.125rem;--jkl-checkbox-line-height:1.5rem}@keyframes jkl-checkbox-checked-u513wc2{0%{height:0;width:0}40%{height:0;width:18%}to{height:58%;width:18%}}@keyframes jkl-checkbox-indeterminate-u513wcu{0%{width:0}to{width:66%}}.jkl-checkbox{--box-color:var(--jkl-color-border-action);--check-color:var(--jkl-color-border-action);--text-color:var(--jkl-color-text-default);--background-color:#0000;color:var(--text-color);display:flex;flex-wrap:wrap;font-size:var(--jkl-checkbox-font-size);font-weight:var(--jkl-checkbox-font-weight);line-height:var(--jkl-checkbox-line-height);min-height:var(--jkl-checkbox-height);position:relative}.jkl-checkbox__input{left:calc(var(--jkl-checkbox-box-size)*-.5);opacity:0;position:absolute;top:var(--jkl-checkbox-box-size)}.jkl-checkbox__input:checked+.jkl-checkbox__label .jkl-checkbox__check-mark:after{animation:jkl-checkbox-checked-u513wc2 .15s ease-in-out forwards;opacity:1}.jkl-checkbox__input:indeterminate:not(:checked)+.jkl-checkbox__label .jkl-checkbox__indeterminate-mark:after{animation:jkl-checkbox-indeterminate-u513wcu .15s ease-in-out forwards;opacity:1}.jkl-checkbox__input:focus-visible+.jkl-checkbox__label{color:var(--jkl-checkbox-focus-color)}.jkl-checkbox__input:focus-visible+.jkl-checkbox__label>.jkl-checkbox__mark{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-checkbox__input:disabled+.jkl-checkbox__label{color:var(--jkl-checkbox-disabled-color)}.jkl-checkbox__input:active{--background-color:var(--jkl-color-background-input-focus)}.jkl-checkbox__label{cursor:pointer;display:flex;flex-shrink:0;max-width:100%;min-width:0}.jkl-checkbox__label:active .jkl-checkbox__mark,.jkl-checkbox__label:hover .jkl-checkbox__mark{outline:1px solid var(--box-color)}.jkl-checkbox__text{margin:calc((var(--jkl-checkbox-height) - var(--jkl-checkbox-line-height))*.5) 0;transition-duration:.15s;transition-property:color;transition-timing-function:ease;translate:0 .0625rem}.jkl-checkbox__mark{box-sizing:border-box;height:var(--jkl-checkbox-box-size);margin-block:calc((var(--jkl-checkbox-height) - var(--jkl-checkbox-box-size))*.5);position:relative;width:var(--jkl-checkbox-box-size);-webkit-margin-end:var(--jkl-unit-10);align-self:flex-start;background-color:var(--background-color);border:1px solid;border-color:var(--box-color);border-radius:0;flex-shrink:0;margin-inline-end:var(--jkl-unit-10);outline:none;transition-duration:.15s;transition-property:background-color;transition-timing-function:ease}@media screen and (forced-colors:active){.jkl-checkbox__mark{border:1px solid ButtonText;outline:revert}}.jkl-checkbox__check-mark:after{border-bottom:.125rem solid var(--check-color);border-left-width:.125rem;border-left:0 solid var(--check-color);border-right:.125rem solid var(--check-color);border-top-width:.125rem;border-top:0 solid var(--check-color);bottom:42%;content:"";display:block;height:58%;left:18%;opacity:0;position:absolute;transform:rotate(45deg);transform-origin:bottom left;transition-duration:.15s;transition-property:opacity,border-color;transition-timing-function:ease;width:18%}@media screen and (forced-colors:active){.jkl-checkbox__check-mark:after{border-color:ButtonText}}.jkl-checkbox__indeterminate-mark:after{--width:66%;--thickness:0.125rem;border-bottom:solid var(--thickness) var(--check-color);bottom:calc(50% - var(--thickness)/2);content:"";display:block;left:calc((100% - var(--width))/2);opacity:0;position:absolute;transition-duration:.15s;transition-property:opacity,border-color;transition-timing-function:ease;width:var(--width)}@media screen and (forced-colors:active){.jkl-checkbox__indeterminate-mark:after{border-color:ButtonText}}.jkl-checkbox--inline{display:inline-flex}.jkl-checkbox--inline:not(:last-of-type){margin-right:calc(var(--jkl-unit-10)*3)}.jkl-checkbox--error{--background-color:var(--jkl-color-background-alert-error);--check-color:var(--jkl-color-text-on-alert)}}@keyframes jkl-checkbox-checked-u513wds{0%{height:0;width:0}40%{height:0;width:18%}to{height:58%;width:18%}}@layer jokul.components{.jkl-checkbox-panel{--checkbox-background-color:#0000;--checkbox-box-color:var(--jkl-color-border-action);--checkbox-check-color:var(--jkl-color-border-action)}.jkl-checkbox-panel__decorator{background-color:var(--checkbox-background-color);border:1px solid;border-color:var(--checkbox-box-color);border-radius:0;box-sizing:border-box;height:var(--jkl-checkbox-box-size);outline:none;position:relative;transition-duration:.15s;transition-property:background-color;transition-timing-function:ease;width:var(--jkl-checkbox-box-size)}@media screen and (forced-colors:active){.jkl-checkbox-panel__decorator{border:1px solid ButtonText;outline:revert}}.jkl-checkbox-panel__decorator:after{border-bottom:.125rem solid var(--checkbox-check-color);border-left-width:.125rem;border-left:0 solid var(--checkbox-check-color);border-right:.125rem solid var(--checkbox-check-color);border-top-width:.125rem;border-top:0 solid var(--checkbox-check-color);bottom:42%;content:"";display:block;height:58%;left:18%;opacity:0;position:absolute;transform:rotate(45deg);transform-origin:bottom left;transition-duration:.15s;transition-property:opacity,border-color;transition-timing-function:ease;width:18%}@media screen and (forced-colors:active){.jkl-checkbox-panel__decorator:after{border-color:ButtonText}}.jkl-checkbox-panel:has(:checked) .jkl-checkbox-panel__decorator:after{animation:jkl-checkbox-checked-u513wds .15s ease-in-out forwards;opacity:1}.jkl-checkbox-panel:has([aria-invalid=true]){--checkbox-background-color:var(
+@layer components{.jkl-input-panel{--outer-border-color:var(--jkl-color-border-input);--outer-border-thickness:0.0625rem;--background-color:#0000;background-color:var(--background-color);border-radius:4px;box-shadow:inset 0 0 0 var(--outer-border-thickness) var(--outer-border-color);display:flex;flex-direction:column;interpolate-size:allow-keywords;transition-duration:.15s;transition-property:box-shadow;transition-timing-function:ease}.jkl-input-panel__header{align-items:center;cursor:pointer;display:grid;gap:.5rem;grid-template-columns:1fr -webkit-max-content;grid-template-columns:1fr max-content;padding:var(--jkl-spacing-s) var(--jkl-spacing-m);position:relative}.jkl-input-panel__header__amount{align-items:center;display:flex;font-size:var(--jkl-checkbox-font-size);font-weight:var(--jkl-checkbox-font-weight);height:100%;line-height:var(--jkl-checkbox-line-height)}.jkl-input-panel__header .jkl-checkbox,.jkl-input-panel__header .jkl-radio-button,.jkl-input-panel__header label{position:unset}.jkl-input-panel__header label:after{block-size:100%;content:"";inline-size:100%;left:0;position:absolute;top:0}.jkl-input-panel__description{height:0;overflow:hidden;padding-inline:var(--jkl-spacing-m);-webkit-padding-after:var(--jkl-spacing-none);font-size:var(--jkl-checkbox-font-size);font-weight:var(--jkl-checkbox-font-weight);line-height:normal;line-height:var(--jkl-checkbox-line-height);padding-block-end:var(--jkl-spacing-none);transition-duration:.15s;transition-property:height;transition-timing-function:ease}.jkl-input-panel:has(:focus-visible){outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-input-panel:has(:checked),.jkl-input-panel:not([data-always-open]),.jkl-input-panel[data-always-open=true]{--background-color:var(--jkl-color-background-container-high)}.jkl-input-panel:has(:checked) .jkl-input-panel__description,.jkl-input-panel:not([data-always-open]) .jkl-input-panel__description,.jkl-input-panel[data-always-open=true] .jkl-input-panel__description{height:auto;-webkit-padding-after:var(--jkl-spacing-s);padding-block-end:var(--jkl-spacing-s)}.jkl-input-panel:has(input:hover){--outer-border-color:var(--jkl-color-border-separator-hover);--outer-border-thickness:0.125rem;cursor:pointer}}@layer jokul.components{:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-checkbox-font-size:var(--jkl-body-font-size);--jkl-checkbox-line-height:var(--jkl-body-line-height);--jkl-checkbox-font-weight:var(--jkl-body-font-weight);--jkl-checkbox-height:3rem;--jkl-checkbox-box-size:1.5rem;--jkl-checkbox-line-height:2rem}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-checkbox-height:2.5rem;--jkl-checkbox-box-size:1.5rem;--jkl-checkbox-line-height:1.75rem}}[data-density=compact],[data-layout-density=compact]{--jkl-checkbox-font-size:var(--jkl-small-font-size);--jkl-checkbox-line-height:var(--jkl-small-line-height);--jkl-checkbox-font-weight:var(--jkl-small-font-weight);--jkl-checkbox-height:1.75rem;--jkl-checkbox-box-size:1.125rem;--jkl-checkbox-line-height:1.5rem}@keyframes jkl-checkbox-checked-uclkrrk{0%{height:0;width:0}40%{height:0;width:18%}to{height:58%;width:18%}}@keyframes jkl-checkbox-indeterminate-uclkrsc{0%{width:0}to{width:66%}}.jkl-checkbox{--box-color:var(--jkl-color-border-action);--check-color:var(--jkl-color-border-action);--text-color:var(--jkl-color-text-default);--background-color:#0000;color:var(--text-color);display:flex;flex-wrap:wrap;font-size:var(--jkl-checkbox-font-size);font-weight:var(--jkl-checkbox-font-weight);line-height:var(--jkl-checkbox-line-height);min-height:var(--jkl-checkbox-height);position:relative}.jkl-checkbox__input{left:calc(var(--jkl-checkbox-box-size)*-.5);opacity:0;position:absolute;top:var(--jkl-checkbox-box-size)}.jkl-checkbox__input:checked+.jkl-checkbox__label .jkl-checkbox__check-mark:after{animation:jkl-checkbox-checked-uclkrrk .15s ease-in-out forwards;opacity:1}.jkl-checkbox__input:indeterminate:not(:checked)+.jkl-checkbox__label .jkl-checkbox__indeterminate-mark:after{animation:jkl-checkbox-indeterminate-uclkrsc .15s ease-in-out forwards;opacity:1}.jkl-checkbox__input:focus-visible+.jkl-checkbox__label{color:var(--jkl-checkbox-focus-color)}.jkl-checkbox__input:focus-visible+.jkl-checkbox__label>.jkl-checkbox__mark{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-checkbox__input:disabled+.jkl-checkbox__label{color:var(--jkl-checkbox-disabled-color)}.jkl-checkbox__input:active{--background-color:var(--jkl-color-background-input-focus)}.jkl-checkbox__label{cursor:pointer;display:flex;flex-shrink:0;max-width:100%;min-width:0}.jkl-checkbox__label:active .jkl-checkbox__mark,.jkl-checkbox__label:hover .jkl-checkbox__mark{outline:1px solid var(--box-color)}.jkl-checkbox__text{margin:calc((var(--jkl-checkbox-height) - var(--jkl-checkbox-line-height))*.5) 0;transition-duration:.15s;transition-property:color;transition-timing-function:ease;translate:0 .0625rem}.jkl-checkbox__mark{box-sizing:border-box;height:var(--jkl-checkbox-box-size);margin-block:calc((var(--jkl-checkbox-height) - var(--jkl-checkbox-box-size))*.5);position:relative;width:var(--jkl-checkbox-box-size);-webkit-margin-end:var(--jkl-unit-10);align-self:flex-start;background-color:var(--background-color);border:1px solid;border-color:var(--box-color);border-radius:0;flex-shrink:0;margin-inline-end:var(--jkl-unit-10);outline:none;transition-duration:.15s;transition-property:background-color;transition-timing-function:ease}@media screen and (forced-colors:active){.jkl-checkbox__mark{border:1px solid ButtonText;outline:revert}}.jkl-checkbox__check-mark:after{border-bottom:.125rem solid var(--check-color);border-left-width:.125rem;border-left:0 solid var(--check-color);border-right:.125rem solid var(--check-color);border-top-width:.125rem;border-top:0 solid var(--check-color);bottom:42%;content:"";display:block;height:58%;left:18%;opacity:0;position:absolute;transform:rotate(45deg);transform-origin:bottom left;transition-duration:.15s;transition-property:opacity,border-color;transition-timing-function:ease;width:18%}@media screen and (forced-colors:active){.jkl-checkbox__check-mark:after{border-color:ButtonText}}.jkl-checkbox__indeterminate-mark:after{--width:66%;--thickness:0.125rem;border-bottom:solid var(--thickness) var(--check-color);bottom:calc(50% - var(--thickness)/2);content:"";display:block;left:calc((100% - var(--width))/2);opacity:0;position:absolute;transition-duration:.15s;transition-property:opacity,border-color;transition-timing-function:ease;width:var(--width)}@media screen and (forced-colors:active){.jkl-checkbox__indeterminate-mark:after{border-color:ButtonText}}.jkl-checkbox--inline{display:inline-flex}.jkl-checkbox--inline:not(:last-of-type){margin-right:calc(var(--jkl-unit-10)*3)}.jkl-checkbox--error{--background-color:var(--jkl-color-background-alert-error);--check-color:var(--jkl-color-text-on-alert)}}@keyframes jkl-checkbox-checked-uclkrt3{0%{height:0;width:0}40%{height:0;width:18%}to{height:58%;width:18%}}@layer jokul.components{.jkl-checkbox-panel{--checkbox-background-color:#0000;--checkbox-box-color:var(--jkl-color-border-action);--checkbox-check-color:var(--jkl-color-border-action)}.jkl-checkbox-panel__decorator{background-color:var(--checkbox-background-color);border:1px solid;border-color:var(--checkbox-box-color);border-radius:0;box-sizing:border-box;height:var(--jkl-checkbox-box-size);outline:none;position:relative;transition-duration:.15s;transition-property:background-color;transition-timing-function:ease;width:var(--jkl-checkbox-box-size)}@media screen and (forced-colors:active){.jkl-checkbox-panel__decorator{border:1px solid ButtonText;outline:revert}}.jkl-checkbox-panel__decorator:after{border-bottom:.125rem solid var(--checkbox-check-color);border-left-width:.125rem;border-left:0 solid var(--checkbox-check-color);border-right:.125rem solid var(--checkbox-check-color);border-top-width:.125rem;border-top:0 solid var(--checkbox-check-color);bottom:42%;content:"";display:block;height:58%;left:18%;opacity:0;position:absolute;transform:rotate(45deg);transform-origin:bottom left;transition-duration:.15s;transition-property:opacity,border-color;transition-timing-function:ease;width:18%}@media screen and (forced-colors:active){.jkl-checkbox-panel__decorator:after{border-color:ButtonText}}.jkl-checkbox-panel:has(:checked) .jkl-checkbox-panel__decorator:after{animation:jkl-checkbox-checked-uclkrt3 .15s ease-in-out forwards;opacity:1}.jkl-checkbox-panel:has([aria-invalid=true]){--checkbox-background-color:var(
         --jkl-color-background-alert-error
     );--checkbox-check-color:var(--jkl-color-text-on-alert)}}

package/styles/components/checkbox-panel/checkbox-panel.scss

@@ -0,0 +1,95 @@
+@use "../../core/jkl" as jkl;
+@use "sass:string";
+@use "../input-panel/input-panel";
+@use "../checkbox/checkbox.scss";
+
+$_checkbox-checked-animation-name: jkl-checkbox-checked-#{string.unique-id()};
+
+@keyframes #{$_checkbox-checked-animation-name} {
+    0% {
+        width: 0;
+        height: 0;
+    }
+
+    40% {
+        width: 18%;
+        height: 0;
+    }
+
+    100% {
+        width: 18%;
+        height: 58%;
+    }
+}
+
+@layer jokul.components {
+    .jkl-checkbox-panel {
+        --checkbox-background-color: transparent;
+        --checkbox-box-color: var(--jkl-color-border-action);
+        --checkbox-check-color: var(--jkl-color-border-action);
+
+        // The box
+        &__decorator {
+            box-sizing: border-box;
+            height: var(--jkl-checkbox-box-size);
+            width: var(--jkl-checkbox-box-size);
+            position: relative;
+
+            outline: none;
+            border-radius: 0; // fixes rounded corners in iOS Safari
+            border: 1px solid;
+            border-color: var(--checkbox-box-color);
+            background-color: var(--checkbox-background-color);
+
+            @include jkl.motion;
+            transition-property: background-color;
+
+            @include jkl.forced-colors-mode {
+                outline: revert;
+                border: 1px solid ButtonText;
+            }
+
+            // The check
+            &::after {
+                content: "";
+                position: absolute;
+                transform-origin: bottom left;
+                bottom: 42%;
+                left: 18%;
+
+                display: block;
+                width: 18%;
+                height: 58%;
+                transform: rotate(45deg);
+
+                border: solid jkl.rem(2px) var(--checkbox-check-color);
+                border-left-width: 0;
+                border-top-width: 0;
+
+                opacity: 0;
+
+                @include jkl.motion;
+                transition-property: opacity, border-color;
+
+                @include jkl.forced-colors-mode {
+                    border-color: ButtonText;
+                }
+            }
+        }
+
+        &:has(:checked) &__decorator {
+            &::after {
+                animation: $_checkbox-checked-animation-name
+                    jkl.timing("productive") ease-in-out forwards;
+                opacity: 1;
+            }
+        }
+
+        &:has([aria-invalid="true"]) {
+            --checkbox-background-color: var(
+                --jkl-color-background-alert-error
+            );
+            --checkbox-check-color: var(--jkl-color-text-on-alert);
+        }
+    }
+}

package/styles/components/checkbox-panel/development/styles.scss

@@ -0,0 +1,27 @@
+@use "../../core/jkl/" as jkl;
+
+.input-panel-example {
+    &__season-tag {
+        position: absolute;
+        top: calc(-50% - 2px);
+        right: 2px;
+
+        @include jkl.from-medium-device {
+            top: 2px;
+        }
+    }
+
+    &__custom-label {
+        position: relative;
+        height: 100%;
+        width: 100%;
+
+        &--small {
+            font-size: 0.8em;
+        }
+
+        &--bold {
+            font-weight: bold;
+        }
+    }
+}

package/styles/components/chip/_index.scss

@@ -0,0 +1,2 @@
+@forward "chip";
+@use "../icon" as icon;