@fremtind/jokul 5.0.0-next.13 → 5.0.0-next.14

package/styles/components.css

@@ -432,7 +432,7 @@
     --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: var(--jkl-motion-timing-lazy) cubic-bezier(0, 0, 0.3, 1) var(--jkl-motion-timing-expressive) jkl-support-icon-entrance-uj7cado forwards;
+    animation: var(--jkl-motion-timing-lazy) cubic-bezier(0, 0, 0.3, 1) var(--jkl-motion-timing-expressive) jkl-support-icon-entrance-u5dtjp5 forwards;
   }
   .jkl-form-support-label--sr-only {
     border: 0 !important;
@@ -486,7 +486,7 @@
   .jkl-label:has(+ .jkl-input-group-description) {
     margin-block-end: var(--jkl-spacing-4);
   }
-  @keyframes jkl-support-icon-entrance-uj7cado {
+  @keyframes jkl-support-icon-entrance-u5dtjp5 {
     0% {
       margin-right: 0;
       opacity: 0;
@@ -834,22 +834,22 @@
     animation: 2500ms linear infinite;
   }
   .jkl-loader__dot--left {
-    animation-name: jkl-loader-left-spin-uj7cae5;
+    animation-name: jkl-loader-left-spin-u5dtjpo;
     margin-right: calc(var(--jkl-loader-spacing) * 0.9);
   }
   .jkl-loader__dot--middle {
-    animation-name: jkl-loader-middle-spin-uj7caf0;
+    animation-name: jkl-loader-middle-spin-u5dtjq4;
     margin-right: var(--jkl-loader-spacing);
   }
   .jkl-loader__dot--right {
-    animation-name: jkl-loader-right-spin-uj7cafb;
+    animation-name: jkl-loader-right-spin-u5dtjqo;
   }
   @media screen and (forced-colors: active) {
     .jkl-loader__dot {
       background-color: CanvasText;
     }
   }
-  @keyframes jkl-loader-left-spin-uj7cae5 {
+  @keyframes jkl-loader-left-spin-u5dtjpo {
     0% {
       transform: rotate(0) scale(0);
     }
@@ -863,7 +863,7 @@
       transform: rotate(180deg) scale(0);
     }
   }
-  @keyframes jkl-loader-middle-spin-uj7caf0 {
+  @keyframes jkl-loader-middle-spin-u5dtjq4 {
     0% {
       transform: rotate(20deg) scale(0);
     }
@@ -880,7 +880,7 @@
       transform: rotate(200deg) scale(0);
     }
   }
-  @keyframes jkl-loader-right-spin-uj7cafb {
+  @keyframes jkl-loader-right-spin-u5dtjqo {
     0% {
       transform: rotate(40deg) scale(0);
     }
@@ -920,7 +920,7 @@
   @media screen and (forced-colors: active) {
     .jkl-skeleton-element {
       border: 1px solid CanvasText;
-      animation: 2s ease infinite jkl-blink-uj7cafy;
+      animation: 2s ease infinite jkl-blink-u5dtjqq;
     }
   }
   .jkl-skeleton-input {
@@ -968,10 +968,10 @@
   }
   @media screen and (forced-colors: active) {
     .jkl-skeleton-table {
-      animation: 2s ease-in-out infinite jkl-blink-uj7cafy;
+      animation: 2s ease-in-out infinite jkl-blink-u5dtjqq;
     }
   }
-  @keyframes jkl-blink-uj7cafy {
+  @keyframes jkl-blink-u5dtjqq {
     0% {
       opacity: 1;
     }
@@ -2027,10 +2027,10 @@
     }
   }
   .jkl-countdown__tracker {
-    animation: jkl-downcount-uj7caha var(--duration) linear forwards;
+    animation: jkl-downcount-u5dtjrw var(--duration) linear forwards;
     animation-play-state: var(--play-state, running);
   }
-  @keyframes jkl-downcount-uj7caha {
+  @keyframes jkl-downcount-u5dtjrw {
     from {
       width: 100%;
     }
@@ -2369,77 +2369,66 @@
   }
 }
 @layer jokul.components {
-  .jkl-expandable {
+  .jkl-expandable-panel {
     background-color: var(--jkl-color-background-container);
     border: 1px solid transparent;
-    border-radius: var(--border-radius);
+    border-radius: var(--jkl-border-radius-s);
     box-sizing: border-box;
     width: 100%;
     overflow: hidden;
   }
-  .jkl-expandable__content[data-expanded=true] {
+  .jkl-expandable-panel__content[data-expanded=true] {
     height: auto;
   }
-  .jkl-expandable__content[data-expanded=false] {
+  .jkl-expandable-panel__content[data-expanded=false] {
     height: 0;
   }
-  .jkl-expandable[data-visible-content=true] .jkl-expander {
+  .jkl-expandable-panel[data-visible-content=true] .jkl-expander {
     border-bottom: 1px solid transparent;
   }
-  .jkl-expandable__content-wrapper {
+  .jkl-expandable-panel__content-wrapper {
     padding: var(--jkl-unit-20);
   }
-  .jkl-expandable--stroke {
+  .jkl-expandable-panel--outlined {
     border-color: var(--jkl-color-border-subdued);
     background-color: transparent;
-    border-radius: 0;
-    border-radius: var(--border-top-left-radius) var(--border-top-right-radius) var(--border-bottom-right-radius) var(--border-bottom-left-radius);
   }
-  .jkl-expandable__wrapper {
-    --border-radius: var(--jkl-border-radius-s);
+  .jkl-expandable-panel__wrapper {
     --outline-offset: 3px;
     --stroke-outline-offset: 3px;
-    --border-top-left-radius: var(--border-radius);
-    --border-top-right-radius: var(--border-radius);
-    --border-bottom-left-radius: var(--border-radius);
-    --border-bottom-right-radius: var(--border-radius);
     position: relative;
   }
-  .jkl-expandable__wrapper + .jkl-expandable__wrapper {
+  .jkl-expandable-panel__wrapper + .jkl-expandable-panel__wrapper {
     --border-top-left-radius: 0;
     --border-top-right-radius: 0;
     --stroke-outline-offset: -1px;
   }
-  .jkl-expandable__wrapper + .jkl-expandable__wrapper .jkl-expandable--stroke {
-    border-top: none;
-  }
-  .jkl-expandable__wrapper:has(+ .jkl-expandable__wrapper) {
+  .jkl-expandable-panel__wrapper:has(+ .jkl-expandable-panel__wrapper) {
     --border-bottom-left-radius: 0;
     --border-bottom-right-radius: 0;
     --stroke-outline-offset: -1px;
   }
-  .jkl-expandable__wrapper:has(.jkl-expander:focus-visible):has(.jkl-expandable--stroke) {
+  .jkl-expandable-panel__wrapper:has(.jkl-expander:focus-visible):has(.jkl-expandable-panel--outlined) {
     --outline-offset: var(--stroke-outline-offset);
   }
-  .jkl-expandable__wrapper:has(.jkl-expander:focus-visible) .jkl-expandable__focus-container {
+  .jkl-expandable-panel__wrapper:has(.jkl-expander:focus-visible) .jkl-expandable-panel__focus-container {
     outline: 3px solid var(--jkl-color-border-strong);
     outline-offset: 3px;
     outline-offset: var(--outline-offset);
   }
-  .jkl-expandable__wrapper .jkl-expander {
+  .jkl-expandable-panel__wrapper .jkl-expander {
     padding: var(--jkl-unit-20);
     width: 100%;
   }
-  .jkl-expandable__wrapper .jkl-expander__label {
+  .jkl-expandable-panel__wrapper .jkl-expander__label {
     flex-grow: 1;
   }
   @media (hover: hover) {
-    .jkl-expandable__wrapper .jkl-expander:hover {
+    .jkl-expandable-panel__wrapper .jkl-expander:hover {
       background-color: var(--jkl-color-background-container-accent);
     }
   }
-  .jkl-expandable__focus-container {
-    border-radius: var(--border-radius);
+  .jkl-expandable-panel__focus-container {
     position: absolute;
     inset: 0;
   }
@@ -2497,6 +2486,27 @@
     }
   }
 }
+@layer jokul.components {
+  .jkl-accordion {
+    background-color: var(--jkl-color-background-container);
+    border-radius: var(--jkl-border-radius-s);
+    padding-inline-start: unset;
+    list-style-type: unset;
+    overflow: clip;
+  }
+  .jkl-accordion .jkl-expandable-panel {
+    border-radius: unset;
+    border: unset;
+    background-color: transparent;
+  }
+  .jkl-accordion .jkl-expandable-panel__wrapper:not(:last-of-type) {
+    border-block-end: 1px solid var(--jkl-color-border-subdued);
+  }
+  .jkl-accordion[data-outlined=true] {
+    border: 1px solid var(--jkl-color-border-subdued);
+    background-color: transparent;
+  }
+}
 @layer jokul.components {
   .jkl-feedback {
     max-width: 34.375rem;
@@ -2516,12 +2526,12 @@
     font: var(--jkl-text-style-paragraph-small);
   }
   .jkl-feedback__fade-in {
-    animation: jkl-show-uj7cai1 0.25s ease-out;
+    animation: jkl-show-u5dtjsm 0.25s ease-out;
   }
   .jkl-feedback__buttons {
     display: flex;
   }
-  @keyframes jkl-show-uj7cai1 {
+  @keyframes jkl-show-u5dtjsm {
     from {
       transform: translate3d(0, 0.5rem, 0);
       opacity: 0;
@@ -2734,7 +2744,7 @@
     --icon-color: var(--jkl-color-success-background-contrast);
   }
   .jkl-message--dismissed {
-    animation: jkl-dismiss-uj7caid var(--jkl-motion-timing-lazy) ease-in-out forwards;
+    animation: jkl-dismiss-u5dtjt3 var(--jkl-motion-timing-lazy) ease-in-out forwards;
     transition: visibility 0ms var(--jkl-motion-timing-lazy);
     visibility: hidden;
   }
@@ -2756,7 +2766,7 @@
   .jkl-form-error-message {
     padding-bottom: var(--jkl-unit-50);
   }
-  @keyframes jkl-dismiss-uj7caid {
+  @keyframes jkl-dismiss-u5dtjt3 {
     from {
       opacity: 1;
       transform: translate3d(0, 0, 0);
@@ -3374,6 +3384,7 @@
 }
 @layer jokul.components {
   .jkl-link-list {
+    --background: var(--jkl-color-background-container);
     --border: 1px solid var(--jkl-color-border-subdued);
     --text-color: var(--jkl-color-text-default);
     font: var(--jkl-text-style-paragraph-medium);
@@ -3391,7 +3402,7 @@
     height: min-content;
     border-radius: var(--jkl-unit-05);
     overflow: hidden;
-    background-color: var(--jkl-color-background-container);
+    background-color: var(--background);
   }
   .jkl-link-list ul .jkl-link-list-link {
     display: flex;
@@ -3437,6 +3448,10 @@
     outline: 3px solid var(--jkl-color-border-strong);
     outline-offset: 3px;
   }
+  .jkl-link-list[data-outlined=true] ul {
+    border: var(--border);
+    --background: transparent;
+  }
   .jkl-link-list .jkl-link-list-item {
     display: flex;
   }
@@ -4081,7 +4096,7 @@
     transition-timing-function: var(--jkl-motion-easing-standard);
     transition-duration: var(--jkl-motion-timing-productive);
   }
-  @keyframes jkl-downcount-uj7caj9 {
+  @keyframes jkl-downcount-u5dtjts {
     from {
       width: 100%;
     }
@@ -4577,7 +4592,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     margin-bottom: 0;
   }
   .jkl-system-message--dismissed {
-    animation: jkl-dismiss-uj7cak0 var(--jkl-motion-timing-lazy) forwards;
+    animation: jkl-dismiss-u5dtjun var(--jkl-motion-timing-lazy) forwards;
     transition: block var(--jkl-motion-timing-lazy) var(--jkl-motion-timing-lazy);
   }
   .jkl-system-message--info {
@@ -4615,7 +4630,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
       border-width: 4px;
     }
   }
-  @keyframes jkl-dismiss-uj7cak0 {
+  @keyframes jkl-dismiss-u5dtjun {
     from {
       opacity: 1;
       transform: translateY(0);
@@ -5420,12 +5435,12 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
   }
   .jkl-toast[data-animation=entering],
   .jkl-toast[data-animation=queued] {
-    animation: jkl-entering-uj7cak2 var(--jkl-motion-timing-polite) var(--jkl-motion-easing-entrance) forwards;
+    animation: jkl-entering-u5dtjuy var(--jkl-motion-timing-polite) var(--jkl-motion-easing-entrance) forwards;
   }
   .jkl-toast[data-animation=exiting] {
-    animation: jkl-exiting-uj7cakq var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards;
+    animation: jkl-exiting-u5dtjvc var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards;
   }
-  @keyframes jkl-entering-uj7cak2 {
+  @keyframes jkl-entering-u5dtjuy {
     from {
       opacity: 0;
       transform: translate3d(0, 50%, 0);
@@ -5435,7 +5450,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
       transform: translate3d(0, 0, 0);
     }
   }
-  @keyframes jkl-exiting-uj7cakq {
+  @keyframes jkl-exiting-u5dtjvc {
     from {
       opacity: 1;
       transform: translate3d(0, 0, 0);