@fremtind/jokul 1.4.1 → 1.5.1

package/styles/components/checkbox/checkbox.css

@@ -1,191 +1,193 @@
 /**
- * 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-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) {
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+@layer jokul.components {
   :root,
   [data-layout-density=comfortable],
   [data-density=comfortable] {
-    --jkl-checkbox-height: 2.5rem;
+    --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: 1.75rem;
-  }
-}
-
-[data-layout-density=compact],
-[data-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-u9ylohs {
-  0% {
-    width: 0;
-    height: 0;
-  }
-  40% {
-    width: 18%;
-    height: 0;
+    --jkl-checkbox-line-height: 2rem;
   }
-  100% {
-    width: 18%;
-    height: 58%;
+  @media (width >= 0) and (max-width: 679px) {
+    :root,
+    [data-layout-density=comfortable],
+    [data-density=comfortable] {
+      --jkl-checkbox-height: 2.5rem;
+      --jkl-checkbox-box-size: 1.5rem;
+      --jkl-checkbox-line-height: 1.75rem;
+    }
+  }
+  [data-layout-density=compact],
+  [data-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-udrzh3s {
+    0% {
+      width: 0;
+      height: 0;
+    }
+    40% {
+      width: 18%;
+      height: 0;
+    }
+    100% {
+      width: 18%;
+      height: 58%;
+    }
+  }
+  @keyframes jkl-checkbox-indeterminate-udrzh48 {
+    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;
+    font-size: var(--jkl-checkbox-font-size);
+    line-height: var(--jkl-checkbox-line-height);
+    font-weight: var(--jkl-checkbox-font-weight);
+    display: flex;
+    flex-wrap: wrap;
+    min-height: var(--jkl-checkbox-height);
+    color: var(--text-color);
+    position: relative;
+  }
+  .jkl-checkbox__input {
+    position: absolute;
+    opacity: 0;
+    top: var(--jkl-checkbox-box-size);
+    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-udrzh3s 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-udrzh48 150ms 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 {
+    display: flex;
+    min-width: 0;
+    max-width: 100%;
+    cursor: pointer;
+    flex-shrink: 0;
+  }
+  .jkl-checkbox__label:hover .jkl-checkbox__mark, .jkl-checkbox__label:active .jkl-checkbox__mark {
+    outline: 1px solid var(--box-color);
+  }
+  .jkl-checkbox__text {
+    margin: calc((var(--jkl-checkbox-height) - var(--jkl-checkbox-line-height)) * 0.5) 0;
+    translate: 0 0.0625rem;
+    transition-timing-function: ease;
+    transition-duration: 150ms;
+    transition-property: color;
   }
-}
-@keyframes jkl-checkbox-indeterminate-u9yloih {
-  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;
-  font-size: var(--jkl-checkbox-font-size);
-  line-height: var(--jkl-checkbox-line-height);
-  font-weight: var(--jkl-checkbox-font-weight);
-  display: flex;
-  flex-wrap: wrap;
-  min-height: var(--jkl-checkbox-height);
-  color: var(--text-color);
-  position: relative;
-}
-.jkl-checkbox__input {
-  position: absolute;
-  opacity: 0;
-  top: var(--jkl-checkbox-box-size);
-  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-u9ylohs 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-u9yloih 150ms 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 {
-  display: flex;
-  min-width: 0;
-  max-width: 100%;
-  cursor: pointer;
-  flex-shrink: 0;
-}
-.jkl-checkbox__label:hover .jkl-checkbox__mark, .jkl-checkbox__label:active .jkl-checkbox__mark {
-  outline: 1px solid var(--box-color);
-}
-.jkl-checkbox__text {
-  margin: calc((var(--jkl-checkbox-height) - var(--jkl-checkbox-line-height)) * 0.5) 0;
-  translate: 0 0.0625rem;
-  transition-timing-function: ease;
-  transition-duration: 150ms;
-  transition-property: color;
-}
-.jkl-checkbox__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;
-  outline: none;
-  border-radius: 0;
-  border: 1px solid;
-  border-color: var(--box-color);
-  background-color: var(--background-color);
-  transition-timing-function: ease;
-  transition-duration: 150ms;
-  transition-property: background-color;
-}
-@media screen and (forced-colors: active) {
   .jkl-checkbox__mark {
-    outline: revert;
-    border: 1px solid ButtonText;
-  }
-}
-.jkl-checkbox__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 0.125rem var(--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) {
+    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;
+    outline: none;
+    border-radius: 0;
+    border: 1px solid;
+    border-color: var(--box-color);
+    background-color: var(--background-color);
+    transition-timing-function: ease;
+    transition-duration: 150ms;
+    transition-property: background-color;
+  }
+  @media screen and (forced-colors: active) {
+    .jkl-checkbox__mark {
+      outline: revert;
+      border: 1px solid ButtonText;
+    }
+  }
   .jkl-checkbox__check-mark::after {
-    border-color: ButtonText;
-  }
-}
-.jkl-checkbox__indeterminate-mark::after {
-  --width: 66%;
-  --thickness: 0.125rem;
-  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;
-  transition-timing-function: ease;
-  transition-duration: 150ms;
-  transition-property: opacity, border-color;
-}
-@media screen and (forced-colors: active) {
+    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(--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__check-mark::after {
+      border-color: ButtonText;
+    }
+  }
   .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);
+    --width: 66%;
+    --thickness: 0.125rem;
+    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;
+    transition-timing-function: ease;
+    transition-duration: 150ms;
+    transition-property: opacity, border-color;
+  }
+  @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.min.css

@@ -1 +1 @@
-: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-u9ylohs{0%{height:0;width:0}40%{height:0;width:18%}to{height:58%;width:18%}}@keyframes jkl-checkbox-indeterminate-u9yloih{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-u9ylohs .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-u9yloih .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-udrzh3s{0%{height:0;width:0}40%{height:0;width:18%}to{height:58%;width:18%}}@keyframes jkl-checkbox-indeterminate-udrzh48{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-udrzh3s .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-udrzh48 .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)}}