@fremtind/jokul 1.4.1 → 1.5.1

package/styles/components/checkbox/checkbox.scss

@@ -3,237 +3,246 @@
 @use "../../core/jkl";
 @use "../../core/jkl/colors";
 
-@include jkl.comfortable-density-variables {
-    @include jkl.declare-font-variables("jkl-checkbox", "body");
+@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-height: #{jkl.rem(48px)};
         --jkl-checkbox-box-size: #{jkl.rem(24px)};
-        --jkl-checkbox-line-height: #{jkl.rem(28px)};
-    }
-}
+        --jkl-checkbox-line-height: #{jkl.rem(32px)};
 
-@include jkl.compact-density-variables {
-    @include jkl.declare-font-variables("jkl-checkbox", "small");
+        @include jkl.small-device {
+            --jkl-checkbox-height: #{jkl.rem(40px)};
+            --jkl-checkbox-box-size: #{jkl.rem(24px)};
+            --jkl-checkbox-line-height: #{jkl.rem(28px)};
+        }
+    }
 
-    --jkl-checkbox-height: #{jkl.rem(28px)};
-    --jkl-checkbox-box-size: #{jkl.rem(18px)};
-    --jkl-checkbox-line-height: #{jkl.rem(24px)};
-}
+    @include jkl.compact-density-variables {
+        @include jkl.declare-font-variables("jkl-checkbox", "small");
 
-$_checkbox-checked-animation-name: jkl-checkbox-checked-#{string.unique-id()};
-$_checkbox-indeterminate-animation-name: jkl-checkbox-indeterminate-#{string.unique-id(
+        --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;
-    }
+    @keyframes #{$_checkbox-checked-animation-name} {
+        0% {
+            width: 0;
+            height: 0;
+        }
 
-    40% {
-        width: 18%;
-        height: 0;
-    }
+        40% {
+            width: 18%;
+            height: 0;
+        }
 
-    100% {
-        width: 18%;
-        height: 58%;
+        100% {
+            width: 18%;
+            height: 58%;
+        }
     }
-}
 
-@keyframes #{$_checkbox-indeterminate-animation-name} {
-    0% {
-        width: 0;
-    }
+    @keyframes #{$_checkbox-indeterminate-animation-name} {
+        0% {
+            width: 0;
+        }
 
-    100% {
-        width: 66%;
+        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;
+    .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;
+            &: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);
+            &:focus-visible + .jkl-checkbox__label {
+                color: var(--jkl-checkbox-focus-color);
 
-            & > .jkl-checkbox__mark {
-                @include jkl.focus-outline;
+                & > .jkl-checkbox__mark {
+                    @include jkl.focus-outline;
+                }
             }
-        }
 
-        &:disabled + .jkl-checkbox__label {
-            color: var(--jkl-checkbox-disabled-color);
-        }
+            &:disabled + .jkl-checkbox__label {
+                color: var(--jkl-checkbox-disabled-color);
+            }
 
-        &:active {
-            --background-color: var(--jkl-color-background-input-focus);
+            &: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);
+        &__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);
+        &__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;
-    }
+            @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;
+        &__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%;
+        // 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);
+                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;
+                border: solid jkl.rem(2px) var(--check-color);
+                border-left-width: 0;
+                border-top-width: 0;
 
-            opacity: 0;
+                opacity: 0;
 
-            @include jkl.motion;
-            transition-property: opacity, border-color;
+                @include jkl.motion;
+                transition-property: opacity, border-color;
 
-            @include jkl.forced-colors-mode {
-                border-color: ButtonText;
+                @include jkl.forced-colors-mode {
+                    border-color: ButtonText;
+                }
             }
         }
-    }
 
-    // This is the indeterminate marker
-    &__indeterminate-mark {
-        &::after {
-            --width: 66%;
-            --thickness: #{jkl.rem(2px)};
+        // 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);
+                content: "";
+                position: absolute;
+                bottom: calc(50% - var(--thickness) / 2);
+                left: calc((100% - var(--width)) / 2);
 
-            display: block;
-            width: var(--width);
+                display: block;
+                width: var(--width);
 
-            border-bottom: solid var(--thickness) var(--check-color);
+                border-bottom: solid var(--thickness) var(--check-color);
 
-            opacity: 0;
+                opacity: 0;
 
-            @include jkl.motion;
-            transition-property: opacity, border-color;
+                @include jkl.motion;
+                transition-property: opacity, border-color;
 
-            @include jkl.forced-colors-mode {
-                border-color: ButtonText;
+                @include jkl.forced-colors-mode {
+                    border-color: ButtonText;
+                }
             }
         }
-    }
 
-    &--inline {
-        display: inline-flex;
+        &--inline {
+            display: inline-flex;
 
-        &:not(:last-of-type) {
-            margin-right: jkl.$unit-30;
+            &: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);
+        &--error {
+            --background-color: var(--jkl-color-background-alert-error);
+            --check-color: var(--jkl-color-text-on-alert);
+        }
     }
 }

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

@@ -1,6 +1,8 @@
 /**
- * Do not edit directly
- * Generated on Wed, 18 Dec 2024 12:25:37 GMT
+ * Do not edit directly, this file was auto-generated.
+ */
+/**
+ * Do not edit directly, this file was auto-generated.
  */
 .jkl-input-panel {
   --outer-border-color: var(--jkl-color-border-input);
@@ -62,7 +64,7 @@
   --outer-border-thickness: 0.125rem;
 }
 
-@keyframes jkl-checkbox-checked-uggsrqu {
+@keyframes jkl-checkbox-checked-ub3y1c5 {
   0% {
     width: 0;
     height: 0;
@@ -76,59 +78,63 @@
     height: 58%;
   }
 }
-.jkl-checkbox-panel {
-  --checkbox-background-color: transparent;
-  --checkbox-box-color: var(--jkl-color-border-action);
-  --checkbox-check-color: var(--jkl-color-border-action);
-}
-.jkl-checkbox-panel__decorator {
-  box-sizing: border-box;
-  height: var(--jkl-checkbox-box-size);
-  width: var(--jkl-checkbox-box-size);
-  position: relative;
-  outline: none;
-  border-radius: 0;
-  border: 1px solid;
-  border-color: var(--checkbox-box-color);
-  background-color: var(--checkbox-background-color);
-  transition-timing-function: ease;
-  transition-duration: 150ms;
-  transition-property: background-color;
-}
-@media screen and (forced-colors: active) {
+@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);
+  }
   .jkl-checkbox-panel__decorator {
-    outline: revert;
-    border: 1px solid ButtonText;
+    box-sizing: border-box;
+    height: var(--jkl-checkbox-box-size);
+    width: var(--jkl-checkbox-box-size);
+    position: relative;
+    outline: none;
+    border-radius: 0;
+    border: 1px solid;
+    border-color: var(--checkbox-box-color);
+    background-color: var(--checkbox-background-color);
+    transition-timing-function: ease;
+    transition-duration: 150ms;
+    transition-property: background-color;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-checkbox-panel__decorator {
+      outline: revert;
+      border: 1px solid ButtonText;
+    }
   }
-}
-.jkl-checkbox-panel__decorator::after {
-  content: "";
-  position: absolute;
-  transform-origin: bottom left;
-  bottom: 42%;
-  left: 18%;
-  display: block;
-  width: 18%;
-  height: 58%;
-  transform: rotate(45deg);
-  border: solid 0.125rem var(--checkbox-check-color);
-  border-left-width: 0;
-  border-top-width: 0;
-  opacity: 0;
-  transition-timing-function: ease;
-  transition-duration: 150ms;
-  transition-property: opacity, border-color;
-}
-@media screen and (forced-colors: active) {
   .jkl-checkbox-panel__decorator::after {
-    border-color: ButtonText;
+    content: "";
+    position: absolute;
+    transform-origin: bottom left;
+    bottom: 42%;
+    left: 18%;
+    display: block;
+    width: 18%;
+    height: 58%;
+    transform: rotate(45deg);
+    border: solid 0.125rem var(--checkbox-check-color);
+    border-left-width: 0;
+    border-top-width: 0;
+    opacity: 0;
+    transition-timing-function: ease;
+    transition-duration: 150ms;
+    transition-property: opacity, border-color;
+  }
+  @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-ub3y1c5 150ms 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);
   }
-}
-.jkl-checkbox-panel:has(:checked) .jkl-checkbox-panel__decorator::after {
-  animation: jkl-checkbox-checked-uggsrqu 150ms 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.min.css

@@ -1 +1,3 @@
-.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);cursor:pointer;padding-left:1rem}.jkl-input-panel__input{opacity:0;position:absolute;top:-6px}.jkl-input-panel__label{align-items:center;cursor:pointer;display:grid;gap:.5rem;grid-template-columns:-webkit-min-content fit-content(30%) 1fr;grid-template-columns:min-content fit-content(30%) 1fr}.jkl-input-panel__main-label{padding-block:1.5rem}.jkl-input-panel__extra-label{align-self:stretch;margin-left:1rem;margin-right:1rem}.jkl-input-panel__extra-label>:first-child{padding-right:1rem}.jkl-input-panel__extra-label--text{align-items:center;display:flex;height:100%}.jkl-input-panel__content{cursor:default;height:0;overflow:hidden;padding-right:1.5rem}.jkl-input-panel:has([aria-expanded=true]) .jkl-input-panel__content,.jkl-input-panel__content[data-alwaysopen=true]{height:auto;padding-bottom:24px}.jkl-input-panel:has(:focus-visible){outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-input-panel:has(:checked){--background-color:var(--jkl-color-background-container-high)}.jkl-input-panel:hover{--outer-border-color:var(--jkl-color-border-separator-hover);--outer-border-thickness:0.125rem}@keyframes jkl-checkbox-checked-uggsrqu{0%{height:0;width:0}40%{height:0;width:18%}to{height:58%;width:18%}}.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-uggsrqu .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)}
+.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);cursor:pointer;padding-left:1rem}.jkl-input-panel__input{opacity:0;position:absolute;top:-6px}.jkl-input-panel__label{align-items:center;cursor:pointer;display:grid;gap:.5rem;grid-template-columns:-webkit-min-content fit-content(30%) 1fr;grid-template-columns:min-content fit-content(30%) 1fr}.jkl-input-panel__main-label{padding-block:1.5rem}.jkl-input-panel__extra-label{align-self:stretch;margin-left:1rem;margin-right:1rem}.jkl-input-panel__extra-label>:first-child{padding-right:1rem}.jkl-input-panel__extra-label--text{align-items:center;display:flex;height:100%}.jkl-input-panel__content{cursor:default;height:0;overflow:hidden;padding-right:1.5rem}.jkl-input-panel:has([aria-expanded=true]) .jkl-input-panel__content,.jkl-input-panel__content[data-alwaysopen=true]{height:auto;padding-bottom:24px}.jkl-input-panel:has(:focus-visible){outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-input-panel:has(:checked){--background-color:var(--jkl-color-background-container-high)}.jkl-input-panel:hover{--outer-border-color:var(--jkl-color-border-separator-hover);--outer-border-thickness:0.125rem}@keyframes jkl-checkbox-checked-ub3y1c5{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-ub3y1c5 .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)}}