@fremtind/jokul 0.12.1 → 0.14.0

package/src/components/input-group/styles/_labels.scss

@@ -0,0 +1,142 @@
+@use "sass:string";
+@use "../../../core/jkl";
+
+.jkl-dormant-form-support-label {
+    display: none;
+    opacity: 0;
+    pointer-events: none;
+}
+
+$_support-icon-entrance-animation-name: jkl-support-icon-entrance-#{string.unique-id()};
+
+@include jkl.comfortable-density-variables {
+    @include jkl.declare-font-variables("jkl-form-support-label", "small");
+    $_icon-size: jkl.rem(20px);
+
+    --jkl-form-support-label-margin: #{jkl.$spacing-xs} 0 0;
+    --jkl-form-support-label-icon-size: #{$_icon-size};
+    --jkl-form-support-label-icon-margin: 0 -#{$_icon-size} -#{jkl.rem(6px)} 0;
+}
+
+@include jkl.compact-density-variables {
+    $_icon-size: jkl.rem(22px);
+
+    --jkl-form-support-label-icon-size: #{$_icon-size};
+    --jkl-form-support-label-icon-margin: 0 -#{$_icon-size} -#{jkl.rem(5px)} 0;
+}
+
+.jkl-form-support-label {
+    --color: var(--jkl-color-text-subdued);
+
+    @include jkl.use-font-variables("jkl-form-support-label");
+    @include jkl.motion("standard", "lazy");
+
+    display: flex;
+    margin: var(--jkl-form-support-label-margin);
+    color: var(--color);
+    transition-property: color;
+    transition-delay: jkl.timing("productive");
+
+    &__icon,
+    &__icon.jkl-icon {
+        opacity: 0;
+        height: var(--jkl-form-support-label-icon-size);
+        margin: var(--jkl-form-support-label-icon-margin);
+
+        @include jkl.forced-colors-svg-fallback($stroke: CanvasText, $fill: Canvas);
+    }
+
+    &--error,
+    &--warning,
+    &--success {
+        --color: var(--jkl-color-text-default);
+
+        .jkl-form-support-label__icon {
+            animation: jkl.timing("lazy") cubic-bezier(0, 0, 0.3, 1) jkl.timing("expressive")
+                $_support-icon-entrance-animation-name forwards;
+        }
+    }
+
+    &--sr-only {
+        @include jkl.screenreader-only;
+    }
+}
+
+@include jkl.comfortable-density-variables {
+    $_label-spacing-small: jkl.$spacing-2xs;
+    $_label-spacing-medium: jkl.$spacing-xs;
+    $_label-spacing-large: jkl.$spacing-m;
+
+    --jkl-label-small-margin: 0 0 #{$_label-spacing-small} 0;
+    --jkl-label-medium-margin: 0 0 #{$_label-spacing-medium} 0;
+    --jkl-label-large-margin: 0 0 #{$_label-spacing-large} #{jkl.rem(-1px)};
+
+    @include jkl.declare-font-variables("jkl-label-small", "small");
+    @include jkl.declare-font-variables("jkl-label-medium", "body");
+    @include jkl.declare-font-variables("jkl-label-large", "heading-2");
+}
+
+@include jkl.compact-density-variables {
+    $_label-spacing-small--compact: jkl.$spacing-2xs;
+    $_label-spacing-medium--compact: jkl.$spacing-xs;
+    $_label-spacing-large--compact: jkl.$spacing-s;
+
+    --jkl-label-small-margin: 0 0 #{$_label-spacing-small--compact} 0;
+    --jkl-label-medium-margin: 0 0 #{$_label-spacing-medium--compact} 0;
+    --jkl-label-large-margin: 0 0 #{$_label-spacing-large--compact} #{jkl.rem(-1px)};
+}
+
+.jkl-label {
+    display: block;
+    margin-left: initial;
+    color: var(--jkl-color-text-default);
+
+    &--small {
+        @include jkl.use-font-variables("jkl-label-small");
+        margin: var(--jkl-label-small-margin);
+    }
+
+    &--medium {
+        @include jkl.use-font-variables("jkl-label-medium");
+        margin: var(--jkl-label-medium-margin);
+    }
+
+    &--large {
+        @include jkl.use-font-variables("jkl-label-large");
+        margin: var(--jkl-label-large-margin);
+    }
+
+    &--sr-only {
+        @include jkl.screenreader-only;
+    }
+}
+
+@keyframes #{$_support-icon-entrance-animation-name} {
+    0% {
+        margin-right: 0;
+        opacity: 0;
+        transform: scale(1);
+    }
+
+    30% {
+        margin-right: jkl.$spacing-xs;
+    }
+
+    50% {
+        opacity: 1;
+    }
+
+    70% {
+        transform: scale(1.1);
+    }
+
+    85% {
+        transform: scale(0.9);
+    }
+
+    100% {
+        transform: scale(1);
+        opacity: 1;
+        margin-right: jkl.$spacing-xs;
+    }
+}

package/src/components/input-group/styles/input-group.css

@@ -0,0 +1,189 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 23 Sep 2024 08:51:40 GMT
+ */
+.jkl-field-group {
+  outline: 0;
+  border-style: none;
+  outline-style: none;
+}
+.jkl-field-group:active, .jkl-field-group:hover, .jkl-field-group:focus {
+  outline: 0;
+  outline-style: none;
+}
+@media screen and (forced-colors: active) {
+  .jkl-field-group {
+    outline: revert;
+    border-style: revert;
+    outline-style: revert;
+  }
+  .jkl-field-group:active, .jkl-field-group:hover, .jkl-field-group:focus {
+    outline: revert;
+    outline-style: revert;
+  }
+}
+
+.jkl-dormant-form-support-label {
+  display: none;
+  opacity: 0;
+  pointer-events: none;
+}
+
+:root,
+[data-layout-density=comfortable],
+[data-density=comfortable] {
+  --jkl-form-support-label-font-size: var(--jkl-small-font-size);
+  --jkl-form-support-label-line-height: var(--jkl-small-line-height);
+  --jkl-form-support-label-font-weight: var(--jkl-small-font-weight);
+  --jkl-form-support-label-margin: 0.5rem 0 0;
+  --jkl-form-support-label-icon-size: 1.25rem;
+  --jkl-form-support-label-icon-margin: 0 -1.25rem -0.375rem 0;
+}
+
+[data-layout-density=compact],
+[data-density=compact] {
+  --jkl-form-support-label-icon-size: 1.375rem;
+  --jkl-form-support-label-icon-margin: 0 -1.375rem -0.3125rem 0;
+}
+
+.jkl-form-support-label {
+  --color: var(--jkl-color-text-subdued);
+  font-size: var(--jkl-form-support-label-font-size);
+  line-height: var(--jkl-form-support-label-line-height);
+  font-weight: var(--jkl-form-support-label-font-weight);
+  transition-timing-function: ease;
+  transition-duration: 400ms;
+  display: flex;
+  margin: var(--jkl-form-support-label-margin);
+  color: var(--color);
+  transition-property: color;
+  transition-delay: 150ms;
+}
+.jkl-form-support-label__icon, .jkl-form-support-label__icon.jkl-icon {
+  opacity: 0;
+  height: var(--jkl-form-support-label-icon-size);
+  margin: var(--jkl-form-support-label-icon-margin);
+}
+@media screen and (forced-colors: active) {
+  .jkl-form-support-label__icon, .jkl-form-support-label__icon.jkl-icon {
+    stroke: CanvasText;
+    fill: Canvas;
+  }
+  .jkl-form-support-label__icon svg, .jkl-form-support-label__icon path, .jkl-form-support-label__icon.jkl-icon svg, .jkl-form-support-label__icon.jkl-icon path {
+    stroke: CanvasText;
+    fill: Canvas;
+  }
+}
+.jkl-form-support-label--error, .jkl-form-support-label--warning, .jkl-form-support-label--success {
+  --color: var(--jkl-color-text-default);
+}
+.jkl-form-support-label--error .jkl-form-support-label__icon, .jkl-form-support-label--warning .jkl-form-support-label__icon, .jkl-form-support-label--success .jkl-form-support-label__icon {
+  animation: 400ms cubic-bezier(0, 0, 0.3, 1) 250ms jkl-support-icon-entrance-uzqhqsq forwards;
+}
+.jkl-form-support-label--sr-only {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
+  clip-path: inset(50%) !important; /* 2 */
+  height: 1px !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  padding: 0 !important;
+  position: absolute !important;
+  width: 1px !important;
+  white-space: nowrap !important; /* 3 */
+}
+
+:root,
+[data-layout-density=comfortable],
+[data-density=comfortable] {
+  --jkl-label-small-margin: 0 0 0.25rem 0;
+  --jkl-label-medium-margin: 0 0 0.5rem 0;
+  --jkl-label-large-margin: 0 0 1rem -0.0625rem;
+  --jkl-label-small-font-size: var(--jkl-small-font-size);
+  --jkl-label-small-line-height: var(--jkl-small-line-height);
+  --jkl-label-small-font-weight: var(--jkl-small-font-weight);
+  --jkl-label-medium-font-size: var(--jkl-body-font-size);
+  --jkl-label-medium-line-height: var(--jkl-body-line-height);
+  --jkl-label-medium-font-weight: var(--jkl-body-font-weight);
+  --jkl-label-large-font-size: var(--jkl-heading-2-font-size);
+  --jkl-label-large-line-height: var(--jkl-heading-2-line-height);
+  --jkl-label-large-font-weight: var(--jkl-heading-2-font-weight);
+}
+
+[data-layout-density=compact],
+[data-density=compact] {
+  --jkl-label-small-margin: 0 0 0.25rem 0;
+  --jkl-label-medium-margin: 0 0 0.5rem 0;
+  --jkl-label-large-margin: 0 0 0.75rem -0.0625rem;
+}
+
+.jkl-label {
+  display: block;
+  margin-left: initial;
+  color: var(--jkl-color-text-default);
+}
+.jkl-label--small {
+  font-size: var(--jkl-label-small-font-size);
+  line-height: var(--jkl-label-small-line-height);
+  font-weight: var(--jkl-label-small-font-weight);
+  margin: var(--jkl-label-small-margin);
+}
+.jkl-label--medium {
+  font-size: var(--jkl-label-medium-font-size);
+  line-height: var(--jkl-label-medium-line-height);
+  font-weight: var(--jkl-label-medium-font-weight);
+  margin: var(--jkl-label-medium-margin);
+}
+.jkl-label--large {
+  font-size: var(--jkl-label-large-font-size);
+  line-height: var(--jkl-label-large-line-height);
+  font-weight: var(--jkl-label-large-font-weight);
+  margin: var(--jkl-label-large-margin);
+}
+.jkl-label--sr-only {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
+  clip-path: inset(50%) !important; /* 2 */
+  height: 1px !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  padding: 0 !important;
+  position: absolute !important;
+  width: 1px !important;
+  white-space: nowrap !important; /* 3 */
+}
+
+@keyframes jkl-support-icon-entrance-uzqhqsq {
+  0% {
+    margin-right: 0;
+    opacity: 0;
+    transform: scale(1);
+  }
+  30% {
+    margin-right: 0.5rem;
+  }
+  50% {
+    opacity: 1;
+  }
+  70% {
+    transform: scale(1.1);
+  }
+  85% {
+    transform: scale(0.9);
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+    margin-right: 0.5rem;
+  }
+}
+@media screen and (forced-colors: active) {
+  .jkl-text-input-action-button {
+    stroke: ButtonText;
+    fill: ButtonFace;
+  }
+  .jkl-text-input-action-button svg, .jkl-text-input-action-button path {
+    stroke: ButtonText;
+    fill: ButtonFace;
+  }
+}

package/src/components/input-group/styles/input-group.min.css

@@ -0,0 +1 @@
+.jkl-field-group{border-style:none}.jkl-field-group,.jkl-field-group:active,.jkl-field-group:focus,.jkl-field-group:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-field-group{border-style:revert}.jkl-field-group,.jkl-field-group:active,.jkl-field-group:focus,.jkl-field-group:hover{outline:revert;outline-style:revert}}.jkl-dormant-form-support-label{display:none;opacity:0;pointer-events:none}:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-form-support-label-font-size:var(--jkl-small-font-size);--jkl-form-support-label-line-height:var(--jkl-small-line-height);--jkl-form-support-label-font-weight:var(--jkl-small-font-weight);--jkl-form-support-label-margin:0.5rem 0 0;--jkl-form-support-label-icon-size:1.25rem;--jkl-form-support-label-icon-margin:0 -1.25rem -0.375rem 0}[data-density=compact],[data-layout-density=compact]{--jkl-form-support-label-icon-size:1.375rem;--jkl-form-support-label-icon-margin:0 -1.375rem -0.3125rem 0}.jkl-form-support-label{--color:var(--jkl-color-text-subdued);color:var(--color);display:flex;font-size:var(--jkl-form-support-label-font-size);font-weight:var(--jkl-form-support-label-font-weight);line-height:var(--jkl-form-support-label-line-height);margin:var(--jkl-form-support-label-margin);transition-delay:.15s;transition-duration:.4s;transition-property:color;transition-timing-function:ease}.jkl-form-support-label__icon,.jkl-form-support-label__icon.jkl-icon{height:var(--jkl-form-support-label-icon-size);margin:var(--jkl-form-support-label-icon-margin);opacity:0}@media screen and (forced-colors:active){.jkl-form-support-label__icon,.jkl-form-support-label__icon path,.jkl-form-support-label__icon svg,.jkl-form-support-label__icon.jkl-icon,.jkl-form-support-label__icon.jkl-icon path,.jkl-form-support-label__icon.jkl-icon svg{stroke:CanvasText;fill:Canvas}}.jkl-form-support-label--error,.jkl-form-support-label--success,.jkl-form-support-label--warning{--color:var(--jkl-color-text-default)}.jkl-form-support-label--error .jkl-form-support-label__icon,.jkl-form-support-label--success .jkl-form-support-label__icon,.jkl-form-support-label--warning .jkl-form-support-label__icon{animation:jkl-support-icon-entrance-uzqhqsq .4s cubic-bezier(0,0,.3,1) .25s forwards}.jkl-form-support-label--sr-only{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-label-small-margin:0 0 0.25rem 0;--jkl-label-medium-margin:0 0 0.5rem 0;--jkl-label-large-margin:0 0 1rem -0.0625rem;--jkl-label-small-font-size:var(--jkl-small-font-size);--jkl-label-small-line-height:var(--jkl-small-line-height);--jkl-label-small-font-weight:var(--jkl-small-font-weight);--jkl-label-medium-font-size:var(--jkl-body-font-size);--jkl-label-medium-line-height:var(--jkl-body-line-height);--jkl-label-medium-font-weight:var(--jkl-body-font-weight);--jkl-label-large-font-size:var(--jkl-heading-2-font-size);--jkl-label-large-line-height:var(--jkl-heading-2-line-height);--jkl-label-large-font-weight:var(--jkl-heading-2-font-weight)}[data-density=compact],[data-layout-density=compact]{--jkl-label-small-margin:0 0 0.25rem 0;--jkl-label-medium-margin:0 0 0.5rem 0;--jkl-label-large-margin:0 0 0.75rem -0.0625rem}.jkl-label{color:var(--jkl-color-text-default);display:block;margin-left:0}.jkl-label--small{font-size:var(--jkl-label-small-font-size);font-weight:var(--jkl-label-small-font-weight);line-height:var(--jkl-label-small-line-height);margin:var(--jkl-label-small-margin)}.jkl-label--medium{font-size:var(--jkl-label-medium-font-size);font-weight:var(--jkl-label-medium-font-weight);line-height:var(--jkl-label-medium-line-height);margin:var(--jkl-label-medium-margin)}.jkl-label--large{font-size:var(--jkl-label-large-font-size);font-weight:var(--jkl-label-large-font-weight);line-height:var(--jkl-label-large-line-height);margin:var(--jkl-label-large-margin)}.jkl-label--sr-only{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}@keyframes jkl-support-icon-entrance-uzqhqsq{0%{margin-right:0;opacity:0;transform:scale(1)}30%{margin-right:.5rem}50%{opacity:1}70%{transform:scale(1.1)}85%{transform:scale(.9)}to{margin-right:.5rem;opacity:1;transform:scale(1)}}@media screen and (forced-colors:active){.jkl-text-input-action-button,.jkl-text-input-action-button path,.jkl-text-input-action-button svg{stroke:ButtonText;fill:ButtonFace}}

package/src/components/input-group/styles/input-group.scss

@@ -0,0 +1,9 @@
+@charset "UTF-8";
+@use "../../../core/jkl";
+
+@use "field-group";
+@use "labels";
+
+.jkl-text-input-action-button {
+    @include jkl.forced-colors-svg-fallback($stroke: ButtonText, $fill: ButtonFace);
+}

package/src/components/loader/styles/loader.css

@@ -17,15 +17,15 @@
   animation: 2500ms linear infinite;
 }
 .jkl-loader__dot--left {
-  animation-name: jkl-loader-left-spin-uie17v6;
+  animation-name: jkl-loader-left-spin-u77rir0;
   margin-right: 1.71em;
 }
 .jkl-loader__dot--middle {
-  animation-name: jkl-loader-middle-spin-uie17w3;
+  animation-name: jkl-loader-middle-spin-u77rirq;
   margin-right: 1.9em;
 }
 .jkl-loader__dot--right {
-  animation-name: jkl-loader-right-spin-uie17wc;
+  animation-name: jkl-loader-right-spin-u77ris4;
 }
 @media screen and (forced-colors: active) {
   .jkl-loader__dot {
@@ -53,7 +53,7 @@
   margin-right: 0.3em;
 }
 
-@keyframes jkl-loader-left-spin-uie17v6 {
+@keyframes jkl-loader-left-spin-u77rir0 {
   0% {
     transform: rotate(0) scale(0);
   }
@@ -67,7 +67,7 @@
     transform: rotate(180deg) scale(0);
   }
 }
-@keyframes jkl-loader-middle-spin-uie17w3 {
+@keyframes jkl-loader-middle-spin-u77rirq {
   0% {
     transform: rotate(20deg) scale(0);
   }
@@ -84,7 +84,7 @@
     transform: rotate(200deg) scale(0);
   }
 }
-@keyframes jkl-loader-right-spin-uie17wc {
+@keyframes jkl-loader-right-spin-u77ris4 {
   0% {
     transform: rotate(40deg) scale(0);
   }

package/src/components/loader/styles/loader.min.css

@@ -1 +1 @@
-.jkl-loader{display:flex}.jkl-loader--inline{display:inline-flex}.jkl-loader__dot{animation:2.5s linear infinite;background-color:currentColor;display:block;height:.9em;transform-origin:center;width:.9em}.jkl-loader__dot--left{animation-name:jkl-loader-left-spin-uie17v6;margin-right:1.71em}.jkl-loader__dot--middle{animation-name:jkl-loader-middle-spin-uie17w3;margin-right:1.9em}.jkl-loader__dot--right{animation-name:jkl-loader-right-spin-uie17wc}@media screen and (forced-colors:active){.jkl-loader__dot{background-color:CanvasText}}.jkl-button .jkl-loader>.jkl-loader__dot,.jkl-loader--medium>.jkl-loader__dot{height:.35em;width:.35em}.jkl-button .jkl-loader>.jkl-loader__dot--left,.jkl-loader--medium>.jkl-loader__dot--left{margin-right:.585em}.jkl-button .jkl-loader>.jkl-loader__dot--middle,.jkl-loader--medium>.jkl-loader__dot--middle{margin-right:.65em}.jkl-loader--small>.jkl-loader__dot{height:.25em;width:.25em}.jkl-loader--small>.jkl-loader__dot--left{margin-right:.27em}.jkl-loader--small>.jkl-loader__dot--middle{margin-right:.3em}@keyframes jkl-loader-left-spin-uie17v6{0%{transform:rotate(0) scale(0)}30%{transform:rotate(90deg) scale(1)}70%{transform:rotate(180deg) scale(0)}to{transform:rotate(180deg) scale(0)}}@keyframes jkl-loader-middle-spin-uie17w3{0%{transform:rotate(20deg) scale(0)}10%{transform:rotate(20deg) scale(0)}40%{transform:rotate(110deg) scale(1.4)}85%{transform:rotate(200deg) scale(0)}to{transform:rotate(200deg) scale(0)}}@keyframes jkl-loader-right-spin-uie17wc{0%{transform:rotate(40deg) scale(0)}20%{transform:rotate(40deg) scale(0)}50%{transform:rotate(130deg) scale(1)}to{transform:rotate(220deg) scale(0)}}
+.jkl-loader{display:flex}.jkl-loader--inline{display:inline-flex}.jkl-loader__dot{animation:2.5s linear infinite;background-color:currentColor;display:block;height:.9em;transform-origin:center;width:.9em}.jkl-loader__dot--left{animation-name:jkl-loader-left-spin-u77rir0;margin-right:1.71em}.jkl-loader__dot--middle{animation-name:jkl-loader-middle-spin-u77rirq;margin-right:1.9em}.jkl-loader__dot--right{animation-name:jkl-loader-right-spin-u77ris4}@media screen and (forced-colors:active){.jkl-loader__dot{background-color:CanvasText}}.jkl-button .jkl-loader>.jkl-loader__dot,.jkl-loader--medium>.jkl-loader__dot{height:.35em;width:.35em}.jkl-button .jkl-loader>.jkl-loader__dot--left,.jkl-loader--medium>.jkl-loader__dot--left{margin-right:.585em}.jkl-button .jkl-loader>.jkl-loader__dot--middle,.jkl-loader--medium>.jkl-loader__dot--middle{margin-right:.65em}.jkl-loader--small>.jkl-loader__dot{height:.25em;width:.25em}.jkl-loader--small>.jkl-loader__dot--left{margin-right:.27em}.jkl-loader--small>.jkl-loader__dot--middle{margin-right:.3em}@keyframes jkl-loader-left-spin-u77rir0{0%{transform:rotate(0) scale(0)}30%{transform:rotate(90deg) scale(1)}70%{transform:rotate(180deg) scale(0)}to{transform:rotate(180deg) scale(0)}}@keyframes jkl-loader-middle-spin-u77rirq{0%{transform:rotate(20deg) scale(0)}10%{transform:rotate(20deg) scale(0)}40%{transform:rotate(110deg) scale(1.4)}85%{transform:rotate(200deg) scale(0)}to{transform:rotate(200deg) scale(0)}}@keyframes jkl-loader-right-spin-u77ris4{0%{transform:rotate(40deg) scale(0)}20%{transform:rotate(40deg) scale(0)}50%{transform:rotate(130deg) scale(1)}to{transform:rotate(220deg) scale(0)}}

package/src/components/loader/styles/skeleton-loader.css

@@ -36,7 +36,7 @@
   bottom: 0;
   width: 12.5rem;
   background: linear-gradient(89.17deg, rgba(249, 249, 249, 0) 0.8%, var(--jkl-skeleton-sweeper-color) 50.09%, rgba(249, 249, 249, 0) 96.31%);
-  animation: var(--jkl-skeleton-sweep-duration) ease infinite jkl-sweep-urtctcb;
+  animation: var(--jkl-skeleton-sweep-duration) ease infinite jkl-sweep-uscl0kb;
 }
 @media (width >= 0) and (max-width: 679px) {
   .jkl-skeleton-animation {
@@ -67,7 +67,7 @@
 @media screen and (forced-colors: active) {
   .jkl-skeleton-element {
     border: 1px solid CanvasText;
-    animation: 2s ease infinite jkl-blink-urtctd7;
+    animation: 2s ease infinite jkl-blink-uscl0km;
   }
 }
 
@@ -123,11 +123,11 @@
 }
 @media screen and (forced-colors: active) {
   .jkl-skeleton-table {
-    animation: 2s ease-in-out infinite jkl-blink-urtctd7;
+    animation: 2s ease-in-out infinite jkl-blink-uscl0km;
   }
 }
 
-@keyframes jkl-sweep-urtctcb {
+@keyframes jkl-sweep-uscl0kb {
   0% {
     transform: translateX(calc(0vw - 200px));
   }
@@ -135,7 +135,7 @@
     transform: translateX(calc(100vw + 400px));
   }
 }
-@keyframes jkl-blink-urtctd7 {
+@keyframes jkl-blink-uscl0km {
   0% {
     opacity: 1;
   }

package/src/components/loader/styles/skeleton-loader.min.css

@@ -1 +1 @@
-@media screen and (prefers-color-scheme:light){:root{--jkl-skeleton-element-color:#e0dbd4;--jkl-skeleton-sweeper-color:#f9f9f9}}[data-theme=light]{--jkl-skeleton-element-color:#e0dbd4;--jkl-skeleton-sweeper-color:#f9f9f9}@media screen and (prefers-color-scheme:dark){:root{--jkl-skeleton-element-color:#636060;--jkl-skeleton-sweeper-color:#1b1917}}[data-theme=dark]{--jkl-skeleton-element-color:#636060;--jkl-skeleton-sweeper-color:#1b1917}.jkl-skeleton-animation{--jkl-skeleton-sweep-duration:3s;overflow:hidden;position:relative}.jkl-skeleton-animation:after{animation:var(--jkl-skeleton-sweep-duration) ease infinite jkl-sweep-urtctcb;background:linear-gradient(89.17deg,#f9f9f900 .8%,var(--jkl-skeleton-sweeper-color) 50.09%,#f9f9f900 96.31%);bottom:0;content:" ";position:absolute;top:0;width:12.5rem}@media (width >= 0) and (max-width:679px){.jkl-skeleton-animation{width:9.375rem}}@media screen and (prefers-reduced-motion:reduce){.jkl-skeleton-animation:after{background:none}}@media screen and (forced-colors:active){.jkl-skeleton-animation:after{animation:none}}.jkl-skeleton-animation--compact:after{width:9.375rem}.jkl-skeleton-element{background-color:var(--jkl-skeleton-element-color);border-radius:.125rem}.jkl-skeleton-element--circle{border-radius:50%}@media screen and (forced-colors:active){.jkl-skeleton-element{animation:jkl-blink-urtctd7 2s ease infinite;border:1px solid CanvasText}}.jkl-skeleton-input{display:flex;flex-direction:column;gap:.75rem}.jkl-skeleton-input__checkbox{display:flex;flex-direction:row;flex-wrap:nowrap;gap:.5rem}@media (width >= 0) and (max-width:679px){.jkl-skeleton-input{gap:.5rem}}.jkl-skeleton-input--compact:after{gap:.5rem}.jkl-skeleton-table{display:flex;flex-direction:column}.jkl-skeleton-table__header,.jkl-skeleton-table__row{border-bottom:1px solid var(--jkl-skeleton-element-color);display:flex;flex-direction:row;justify-content:space-between}.jkl-skeleton-table__header{padding:.75rem .5rem}.jkl-skeleton-table__row{padding:1rem .5rem}@media (width >= 0) and (max-width:679px){.jkl-skeleton-table__header{padding:.5rem .25rem}.jkl-skeleton-table__row{padding:.75rem .25rem}}.jkl-skeleton-table--compact::after__header{padding:.5rem .25rem}.jkl-skeleton-table--compact::after__row{padding:.75rem .25rem}@media screen and (forced-colors:active){.jkl-skeleton-table{animation:jkl-blink-urtctd7 2s ease-in-out infinite}}@keyframes jkl-sweep-urtctcb{0%{transform:translateX(-200px)}80%,to{transform:translateX(calc(100vw + 400px))}}@keyframes jkl-blink-urtctd7{0%{opacity:1}40%,50%{opacity:.3}70%,to{opacity:1}}
+@media screen and (prefers-color-scheme:light){:root{--jkl-skeleton-element-color:#e0dbd4;--jkl-skeleton-sweeper-color:#f9f9f9}}[data-theme=light]{--jkl-skeleton-element-color:#e0dbd4;--jkl-skeleton-sweeper-color:#f9f9f9}@media screen and (prefers-color-scheme:dark){:root{--jkl-skeleton-element-color:#636060;--jkl-skeleton-sweeper-color:#1b1917}}[data-theme=dark]{--jkl-skeleton-element-color:#636060;--jkl-skeleton-sweeper-color:#1b1917}.jkl-skeleton-animation{--jkl-skeleton-sweep-duration:3s;overflow:hidden;position:relative}.jkl-skeleton-animation:after{animation:var(--jkl-skeleton-sweep-duration) ease infinite jkl-sweep-uscl0kb;background:linear-gradient(89.17deg,#f9f9f900 .8%,var(--jkl-skeleton-sweeper-color) 50.09%,#f9f9f900 96.31%);bottom:0;content:" ";position:absolute;top:0;width:12.5rem}@media (width >= 0) and (max-width:679px){.jkl-skeleton-animation{width:9.375rem}}@media screen and (prefers-reduced-motion:reduce){.jkl-skeleton-animation:after{background:none}}@media screen and (forced-colors:active){.jkl-skeleton-animation:after{animation:none}}.jkl-skeleton-animation--compact:after{width:9.375rem}.jkl-skeleton-element{background-color:var(--jkl-skeleton-element-color);border-radius:.125rem}.jkl-skeleton-element--circle{border-radius:50%}@media screen and (forced-colors:active){.jkl-skeleton-element{animation:jkl-blink-uscl0km 2s ease infinite;border:1px solid CanvasText}}.jkl-skeleton-input{display:flex;flex-direction:column;gap:.75rem}.jkl-skeleton-input__checkbox{display:flex;flex-direction:row;flex-wrap:nowrap;gap:.5rem}@media (width >= 0) and (max-width:679px){.jkl-skeleton-input{gap:.5rem}}.jkl-skeleton-input--compact:after{gap:.5rem}.jkl-skeleton-table{display:flex;flex-direction:column}.jkl-skeleton-table__header,.jkl-skeleton-table__row{border-bottom:1px solid var(--jkl-skeleton-element-color);display:flex;flex-direction:row;justify-content:space-between}.jkl-skeleton-table__header{padding:.75rem .5rem}.jkl-skeleton-table__row{padding:1rem .5rem}@media (width >= 0) and (max-width:679px){.jkl-skeleton-table__header{padding:.5rem .25rem}.jkl-skeleton-table__row{padding:.75rem .25rem}}.jkl-skeleton-table--compact::after__header{padding:.5rem .25rem}.jkl-skeleton-table--compact::after__row{padding:.75rem .25rem}@media screen and (forced-colors:active){.jkl-skeleton-table{animation:jkl-blink-uscl0km 2s ease-in-out infinite}}@keyframes jkl-sweep-uscl0kb{0%{transform:translateX(-200px)}80%,to{transform:translateX(calc(100vw + 400px))}}@keyframes jkl-blink-uscl0km{0%{opacity:1}40%,50%{opacity:.3}70%,to{opacity:1}}

package/src/components/logo/styles/_index.scss

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

package/src/components/logo/styles/logo.css

@@ -0,0 +1,92 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 23 Sep 2024 08:51:40 GMT
+ */
+@media screen and (prefers-color-scheme: light) {
+  :root {
+    --jkl-logo-color: #1b1917;
+  }
+}
+[data-theme=light] {
+  --jkl-logo-color: #1b1917;
+}
+
+@media screen and (prefers-color-scheme: dark) {
+  :root {
+    --jkl-logo-color: #f9f9f9;
+  }
+}
+[data-theme=dark] {
+  --jkl-logo-color: #f9f9f9;
+}
+
+.jkl-logo {
+  color: var(--jkl-logo-color);
+}
+@media screen and (forced-colors: active) {
+  .jkl-logo {
+    stroke: CanvasText;
+    fill: CanvasText;
+  }
+  .jkl-logo svg, .jkl-logo path {
+    stroke: CanvasText;
+    fill: CanvasText;
+  }
+}
+.jkl-logo__F {
+  transform-origin: 30px 132px; /* Is connected to the viewbox of the logo, change at your own risk */
+}
+.jkl-logo__F-line {
+  transform-origin: 34.3px; /* Must be the same as the line x1 origin, change at your own risk */
+}
+.jkl-logo__remtind {
+  opacity: 1;
+}
+.jkl-logo--symbol-only .jkl-logo__F {
+  transform: rotate(45deg);
+}
+.jkl-logo--symbol-only .jkl-logo__F-line {
+  transform: scaleX(1.5);
+}
+.jkl-logo--symbol-only .jkl-logo__remtind {
+  transition-delay: 0ms;
+  opacity: 0;
+  transform: translateX(-5%);
+}
+.jkl-logo--animated .jkl-logo__F {
+  transition: transform 250ms 75ms cubic-bezier(0.5, 0, 0.62, 1);
+}
+.jkl-logo--animated .jkl-logo__F-line {
+  transition: transform 250ms ease-in;
+}
+.jkl-logo--animated .jkl-logo__remtind {
+  transition: opacity 250ms 75ms ease-in, transform 250ms ease;
+}
+
+.jkl-logo--centered.jkl-logo--symbol-only .jkl-logo__F {
+  transform: translateX(35%) rotate(45deg);
+}
+
+.jkl-logo-stamp {
+  color: var(--logo-stamp-color);
+}
+@media screen and (forced-colors: active) {
+  .jkl-logo-stamp {
+    stroke: CanvasText;
+    fill: CanvasText;
+  }
+  .jkl-logo-stamp svg, .jkl-logo-stamp path {
+    stroke: CanvasText;
+    fill: CanvasText;
+  }
+}
+.jkl-logo-stamp--animated .jkl-logo-stamp__text {
+  transform-origin: 256px 256px;
+  transition-timing-function: cubic-bezier(0.75, 0, 0, 1);
+  transition-duration: 150ms;
+  transition-property: transform;
+}
+.jkl-logo-stamp--animated[data-rotate=true] .jkl-logo-stamp__text {
+  transition-duration: 1500ms;
+  transform: rotate(360deg);
+}

package/src/components/logo/styles/logo.min.css

@@ -0,0 +1 @@
+@media screen and (prefers-color-scheme:light){:root{--jkl-logo-color:#1b1917}}[data-theme=light]{--jkl-logo-color:#1b1917}@media screen and (prefers-color-scheme:dark){:root{--jkl-logo-color:#f9f9f9}}[data-theme=dark]{--jkl-logo-color:#f9f9f9}.jkl-logo{color:var(--jkl-logo-color)}@media screen and (forced-colors:active){.jkl-logo,.jkl-logo path,.jkl-logo svg{stroke:CanvasText;fill:CanvasText}}.jkl-logo__F{transform-origin:30px 132px}.jkl-logo__F-line{transform-origin:34.3px}.jkl-logo__remtind{opacity:1}.jkl-logo--symbol-only .jkl-logo__F{transform:rotate(45deg)}.jkl-logo--symbol-only .jkl-logo__F-line{transform:scaleX(1.5)}.jkl-logo--symbol-only .jkl-logo__remtind{opacity:0;transform:translateX(-5%);transition-delay:0s}.jkl-logo--animated .jkl-logo__F{transition:transform .25s cubic-bezier(.5,0,.62,1) 75ms}.jkl-logo--animated .jkl-logo__F-line{transition:transform .25s ease-in}.jkl-logo--animated .jkl-logo__remtind{transition:opacity .25s ease-in 75ms,transform .25s ease}.jkl-logo--centered.jkl-logo--symbol-only .jkl-logo__F{transform:translateX(35%) rotate(45deg)}.jkl-logo-stamp{color:var(--logo-stamp-color)}@media screen and (forced-colors:active){.jkl-logo-stamp,.jkl-logo-stamp path,.jkl-logo-stamp svg{stroke:CanvasText;fill:CanvasText}}.jkl-logo-stamp--animated .jkl-logo-stamp__text{transform-origin:256px 256px;transition-duration:.15s;transition-property:transform;transition-timing-function:cubic-bezier(.75,0,0,1)}.jkl-logo-stamp--animated[data-rotate=true] .jkl-logo-stamp__text{transform:rotate(1turn);transition-duration:1.5s}

package/src/components/logo/styles/logo.scss

@@ -0,0 +1,89 @@
+@charset "UTF-8";
+@use "../../../core/jkl";
+
+@include jkl.light-mode-variables {
+    --jkl-logo-color: #{jkl.$color-granitt};
+}
+
+@include jkl.dark-mode-variables {
+    --jkl-logo-color: #{jkl.$color-snohvit};
+}
+
+.jkl-logo {
+    color: var(--jkl-logo-color);
+
+    // I valget mellom å følge merkevaren og å være lesbar velger vi å være lesbar.
+    @include jkl.forced-colors-svg-fallback($stroke: CanvasText, $fill: CanvasText);
+
+    &__F {
+        transform-origin: 30px 132px; /* Is connected to the viewbox of the logo, change at your own risk */
+
+        &-line {
+            transform-origin: 34.3px; /* Must be the same as the line x1 origin, change at your own risk */
+        }
+    }
+
+    &__remtind {
+        opacity: 1;
+    }
+
+    &--symbol-only {
+        & .jkl-logo__F {
+            transform: rotate(45deg);
+
+            &-line {
+                transform: scaleX(1.5);
+            }
+        }
+
+        & .jkl-logo__remtind {
+            transition-delay: 0ms;
+            opacity: 0;
+            transform: translateX(-5%);
+        }
+    }
+
+    &--animated {
+        & .jkl-logo__F {
+            transition: transform jkl.timing("expressive") jkl.timing("energetic") cubic-bezier(0.5, 0, 0.62, 1);
+        }
+
+        & .jkl-logo__F-line {
+            transition: transform jkl.timing("expressive") ease-in;
+        }
+
+        & .jkl-logo__remtind {
+            transition: opacity jkl.timing("expressive") jkl.timing("energetic") ease-in,
+                transform jkl.timing("expressive") ease;
+        }
+    }
+}
+
+.jkl-logo--centered.jkl-logo--symbol-only {
+    & .jkl-logo__F {
+        transform: translateX(35%) rotate(45deg);
+    }
+}
+
+.jkl-logo-stamp {
+    color: var(--logo-stamp-color);
+
+    // I valget mellom å følge merkevaren og å være lesbar velger vi å være lesbar.
+    @include jkl.forced-colors-svg-fallback($stroke: CanvasText, $fill: CanvasText);
+
+    &--animated {
+        .jkl-logo-stamp__text {
+            transform-origin: 256px 256px;
+            transition-timing-function: cubic-bezier(0.75, 0, 0, 1);
+            transition-duration: jkl.timing("productive");
+            transition-property: transform;
+        }
+
+        &[data-rotate="true"] {
+            .jkl-logo-stamp__text {
+                transition-duration: 1500ms;
+                transform: rotate(360deg);
+            }
+        }
+    }
+}

package/src/components/message/styles/message.css

@@ -168,7 +168,7 @@
   --background-color: var(--jkl-color-background-alert-success);
 }
 .jkl-message--dismissed {
-  animation: jkl-dismiss-uuevfpl 400ms ease-in-out forwards;
+  animation: jkl-dismiss-ukystgj 400ms ease-in-out forwards;
   transition: visibility 0ms 400ms;
   visibility: hidden;
 }
@@ -188,7 +188,7 @@
   }
 }
 
-@keyframes jkl-dismiss-uuevfpl {
+@keyframes jkl-dismiss-ukystgj {
   from {
     opacity: 1;
     transform: translate3d(0, 0, 0);