@fremtind/jokul 0.45.1 → 0.45.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (44) hide show
  1. package/README.md +10 -0
  2. package/build/build-stats.html +1 -1
  3. package/build/cjs/components/card/stories/Card.stories.cjs +2 -0
  4. package/build/cjs/components/card/stories/Card.stories.cjs.map +1 -0
  5. package/build/cjs/components/card/stories/Card.stories.d.cts +24 -0
  6. package/build/es/components/card/stories/Card.stories.d.ts +24 -0
  7. package/build/es/components/card/stories/Card.stories.js +2 -0
  8. package/build/es/components/card/stories/Card.stories.js.map +1 -0
  9. package/build/style.css +1 -0
  10. package/package.json +2 -2
  11. package/styles/components/button/button.css +2 -2
  12. package/styles/components/button/button.min.css +1 -1
  13. package/styles/components/checkbox/checkbox.css +4 -4
  14. package/styles/components/checkbox/checkbox.min.css +1 -1
  15. package/styles/components/checkbox-panel/checkbox-panel.css +2 -2
  16. package/styles/components/checkbox-panel/checkbox-panel.min.css +1 -1
  17. package/styles/components/cookie-consent/_index.scss +1 -1
  18. package/styles/components/countdown/countdown.css +2 -2
  19. package/styles/components/countdown/countdown.min.css +1 -1
  20. package/styles/components/feedback/feedback.css +2 -2
  21. package/styles/components/feedback/feedback.min.css +1 -1
  22. package/styles/components/input-group/input-group.css +2 -2
  23. package/styles/components/input-group/input-group.min.css +1 -1
  24. package/styles/components/loader/loader.css +6 -6
  25. package/styles/components/loader/loader.min.css +1 -1
  26. package/styles/components/loader/skeleton-loader.css +5 -5
  27. package/styles/components/loader/skeleton-loader.min.css +1 -1
  28. package/styles/components/message/message.css +2 -2
  29. package/styles/components/message/message.min.css +1 -1
  30. package/styles/components/nav-link/nav-link.scss +5 -5
  31. package/styles/components/progress-bar/progress-bar.css +1 -1
  32. package/styles/components/progress-bar/progress-bar.min.css +1 -1
  33. package/styles/components/radio-button/radio-button.css +2 -2
  34. package/styles/components/radio-button/radio-button.min.css +1 -1
  35. package/styles/components/radio-panel/radio-panel.css +2 -2
  36. package/styles/components/radio-panel/radio-panel.min.css +1 -1
  37. package/styles/components/system-message/system-message.css +2 -2
  38. package/styles/components/system-message/system-message.min.css +1 -1
  39. package/styles/components/text-input/text-input.scss +2 -2
  40. package/styles/components/toast/toast.css +6 -6
  41. package/styles/components/toast/toast.min.css +1 -1
  42. package/styles/components/toast/toast.scss +2 -2
  43. package/styles/styles.css +40 -40
  44. package/styles/styles.min.css +1 -1
@@ -1 +1 @@
1
- :root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-radio-button-height:3rem;--jkl-radio-button-line-height:2rem;--jkl-radio-button-size:1.5rem;--jkl-radio-button-text-margin:0.5rem 0;--jkl-radio-button-text-transform:translate3d(0,0.0625rem,0);--jkl-radio-button-dot-margin:0.75rem 0.5rem 0.75rem 0;--jkl-radio-button-dot-size:1rem;--jkl-radio-button-label-font-size:var(--jkl-body-font-size);--jkl-radio-button-label-line-height:var(--jkl-body-line-height);--jkl-radio-button-label-font-weight:var(--jkl-body-font-weight)}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-radio-button-height:2.5rem;--jkl-radio-button-line-height:1.75rem;--jkl-radio-button-size:1.5rem;--jkl-radio-button-text-margin:0.5rem 0;--jkl-radio-button-text-transform:translateZ(0);--jkl-radio-button-dot-margin:0.625rem 0.5rem 0.625rem 0;--jkl-radio-button-dot-size:1rem}}[data-density=compact],[data-layout-density=compact]{--jkl-radio-button-height:1.75rem;--jkl-radio-button-line-height:1.5rem;--jkl-radio-button-size:1.125rem;--jkl-radio-button-text-margin:calc(var(--jkl-unit-10)*0.5) 0;--jkl-radio-button-text-transform:translateZ(0);--jkl-radio-button-dot-margin:0.4375rem 0.5rem 0.4375rem 0;--jkl-radio-button-dot-size:0.625rem;--jkl-radio-button-label-font-size:var(--jkl-small-font-size);--jkl-radio-button-label-line-height:var(--jkl-small-line-height);--jkl-radio-button-label-font-weight:var(--jkl-small-font-weight)}@keyframes jkl-dot-in-ua158s8{0%{transform:scale(.8)}to{transform:scale(1)}}.jkl-radio-button{--ring-color:var(--jkl-color-border-action);--dot-color:#0000;--background-color:#0000;--text-color:var(--jkl-color-text-default);border-style:none;color:var(--text-color);display:flex;min-height:var(--jkl-radio-button-height);position:relative}.jkl-radio-button,.jkl-radio-button:active,.jkl-radio-button:focus,.jkl-radio-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-radio-button{border-style:revert}.jkl-radio-button,.jkl-radio-button:active,.jkl-radio-button:focus,.jkl-radio-button:hover{outline:revert;outline-style:revert}}.jkl-radio-button__input{opacity:0;position:absolute;top:-6px}.jkl-radio-button__input:checked+.jkl-radio-button__label>.jkl-radio-button__dot:after{--dot-color:var(--jkl-color-border-action);animation:jkl-dot-in-ua158s8 .15s ease}@media screen and (forced-colors:active){.jkl-radio-button__input:checked+.jkl-radio-button__label>.jkl-radio-button__dot:after{background-color:ButtonText}}.jkl-radio-button--error .jkl-radio-button__input:checked+.jkl-radio-button__label>.jkl-radio-button__dot:after{--background-color:var(--jkl-color-background-alert-error);--dot-color:var(--jkl-color-text-on-alert)}.jkl-radio-button__input:focus-visible+.jkl-radio-button__label{--background-color:var(--jkl-color-background-input-focus)}.jkl-radio-button__input:focus-visible+.jkl-radio-button__label>.jkl-radio-button__dot{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-radio-button--error .jkl-radio-button__input:focus-visible+.jkl-radio-button__label{--background-color:var(--jkl-color-background-alert-error);--dot-color:var(--jkl-color-text-on-alert)}.jkl-radio-button__label{align-items:flex-start;cursor:pointer;display:flex;font-size:var(--jkl-radio-button-label-font-size);font-weight:var(--jkl-radio-button-label-font-weight);line-height:var(--jkl-radio-button-label-line-height)}.jkl-radio-button__label:hover>.jkl-radio-button__dot{outline:1px solid var(--ring-color)}.jkl-radio-button__label:active>.jkl-radio-button__dot .jkl-radio-button__label:after{scale:.9}.jkl-radio-button__dot{background-color:var(--background-color);border:.0625rem solid var(--ring-color);border-radius:50%;box-sizing:border-box;display:inline-block;flex-shrink:0;height:var(--jkl-radio-button-size);margin:var(--jkl-radio-button-dot-margin);position:relative;transition-duration:.15s;transition-property:background-color,outline;transition-timing-function:ease;width:var(--jkl-radio-button-size)}.jkl-radio-button__dot:after{background-color:var(--dot-color);border-radius:50%;content:"";height:var(--jkl-radio-button-dot-size);left:50%;position:absolute;scale:1;top:50%;transition-duration:.15s;transition-property:transform;transition-timing-function:ease;translate:-50% -50%;width:var(--jkl-radio-button-dot-size)}@media screen and (forced-colors:active){.jkl-radio-button__dot{border:1px solid ButtonText;outline:revert}}.jkl-radio-button__text{display:inline-block;margin:var(--jkl-radio-button-text-margin);transform:var(--jkl-radio-button-text-transform)}.jkl-radio-button--error{--background-color:var(--jkl-color-background-alert-error)}.jkl-radio-button--inline{display:inline-flex;margin-right:1.5rem;margin-top:unset}.jkl-radio-button+.jkl-form-support-label{margin-bottom:.5rem;margin-left:calc(var(--jkl-radio-button-size) + .5rem);margin-top:-.375rem}
1
+ :root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-radio-button-height:3rem;--jkl-radio-button-line-height:2rem;--jkl-radio-button-size:1.5rem;--jkl-radio-button-text-margin:0.5rem 0;--jkl-radio-button-text-transform:translate3d(0,0.0625rem,0);--jkl-radio-button-dot-margin:0.75rem 0.5rem 0.75rem 0;--jkl-radio-button-dot-size:1rem;--jkl-radio-button-label-font-size:var(--jkl-body-font-size);--jkl-radio-button-label-line-height:var(--jkl-body-line-height);--jkl-radio-button-label-font-weight:var(--jkl-body-font-weight)}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-radio-button-height:2.5rem;--jkl-radio-button-line-height:1.75rem;--jkl-radio-button-size:1.5rem;--jkl-radio-button-text-margin:0.5rem 0;--jkl-radio-button-text-transform:translateZ(0);--jkl-radio-button-dot-margin:0.625rem 0.5rem 0.625rem 0;--jkl-radio-button-dot-size:1rem}}[data-density=compact],[data-layout-density=compact]{--jkl-radio-button-height:1.75rem;--jkl-radio-button-line-height:1.5rem;--jkl-radio-button-size:1.125rem;--jkl-radio-button-text-margin:calc(var(--jkl-unit-10)*0.5) 0;--jkl-radio-button-text-transform:translateZ(0);--jkl-radio-button-dot-margin:0.4375rem 0.5rem 0.4375rem 0;--jkl-radio-button-dot-size:0.625rem;--jkl-radio-button-label-font-size:var(--jkl-small-font-size);--jkl-radio-button-label-line-height:var(--jkl-small-line-height);--jkl-radio-button-label-font-weight:var(--jkl-small-font-weight)}@keyframes jkl-dot-in-ubuphkc{0%{transform:scale(.8)}to{transform:scale(1)}}.jkl-radio-button{--ring-color:var(--jkl-color-border-action);--dot-color:#0000;--background-color:#0000;--text-color:var(--jkl-color-text-default);border-style:none;color:var(--text-color);display:flex;min-height:var(--jkl-radio-button-height);position:relative}.jkl-radio-button,.jkl-radio-button:active,.jkl-radio-button:focus,.jkl-radio-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-radio-button{border-style:revert}.jkl-radio-button,.jkl-radio-button:active,.jkl-radio-button:focus,.jkl-radio-button:hover{outline:revert;outline-style:revert}}.jkl-radio-button__input{opacity:0;position:absolute;top:-6px}.jkl-radio-button__input:checked+.jkl-radio-button__label>.jkl-radio-button__dot:after{--dot-color:var(--jkl-color-border-action);animation:jkl-dot-in-ubuphkc .15s ease}@media screen and (forced-colors:active){.jkl-radio-button__input:checked+.jkl-radio-button__label>.jkl-radio-button__dot:after{background-color:ButtonText}}.jkl-radio-button--error .jkl-radio-button__input:checked+.jkl-radio-button__label>.jkl-radio-button__dot:after{--background-color:var(--jkl-color-background-alert-error);--dot-color:var(--jkl-color-text-on-alert)}.jkl-radio-button__input:focus-visible+.jkl-radio-button__label{--background-color:var(--jkl-color-background-input-focus)}.jkl-radio-button__input:focus-visible+.jkl-radio-button__label>.jkl-radio-button__dot{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-radio-button--error .jkl-radio-button__input:focus-visible+.jkl-radio-button__label{--background-color:var(--jkl-color-background-alert-error);--dot-color:var(--jkl-color-text-on-alert)}.jkl-radio-button__label{align-items:flex-start;cursor:pointer;display:flex;font-size:var(--jkl-radio-button-label-font-size);font-weight:var(--jkl-radio-button-label-font-weight);line-height:var(--jkl-radio-button-label-line-height)}.jkl-radio-button__label:hover>.jkl-radio-button__dot{outline:1px solid var(--ring-color)}.jkl-radio-button__label:active>.jkl-radio-button__dot .jkl-radio-button__label:after{scale:.9}.jkl-radio-button__dot{background-color:var(--background-color);border:.0625rem solid var(--ring-color);border-radius:50%;box-sizing:border-box;display:inline-block;flex-shrink:0;height:var(--jkl-radio-button-size);margin:var(--jkl-radio-button-dot-margin);position:relative;transition-duration:.15s;transition-property:background-color,outline;transition-timing-function:ease;width:var(--jkl-radio-button-size)}.jkl-radio-button__dot:after{background-color:var(--dot-color);border-radius:50%;content:"";height:var(--jkl-radio-button-dot-size);left:50%;position:absolute;scale:1;top:50%;transition-duration:.15s;transition-property:transform;transition-timing-function:ease;translate:-50% -50%;width:var(--jkl-radio-button-dot-size)}@media screen and (forced-colors:active){.jkl-radio-button__dot{border:1px solid ButtonText;outline:revert}}.jkl-radio-button__text{display:inline-block;margin:var(--jkl-radio-button-text-margin);transform:var(--jkl-radio-button-text-transform)}.jkl-radio-button--error{--background-color:var(--jkl-color-background-alert-error)}.jkl-radio-button--inline{display:inline-flex;margin-right:1.5rem;margin-top:unset}.jkl-radio-button+.jkl-form-support-label{margin-bottom:.5rem;margin-left:calc(var(--jkl-radio-button-size) + .5rem);margin-top:-.375rem}
@@ -62,7 +62,7 @@
62
62
  --outer-border-thickness: 0.125rem;
63
63
  }
64
64
 
65
- @keyframes jkl-dot-in-u8ubwri {
65
+ @keyframes jkl-dot-in-ubh88pa {
66
66
  0% {
67
67
  transform: scale(0.8);
68
68
  }
@@ -110,7 +110,7 @@
110
110
  }
111
111
  }
112
112
  .jkl-radio-panel__input:checked + .jkl-radio-panel__decorator::after {
113
- animation: jkl-dot-in-u8ubwri 150ms ease;
113
+ animation: jkl-dot-in-ubh88pa 150ms ease;
114
114
  }
115
115
  .jkl-radio-panel:has(:checked) {
116
116
  --radio-dot-color: var(--jkl-color-border-action);
@@ -1 +1 @@
1
- .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-dot-in-u8ubwri{0%{transform:scale(.8)}to{transform:scale(1)}}.jkl-radio-panel{--radio-dot-color:#0000;--radio-ring-color:#0000}.jkl-radio-panel__decorator{background-color:var(--radio-ring-color);border:.0625rem solid var(--jkl-color-border-action);border-radius:50%;cursor:pointer;display:inline-block;height:1.5rem;position:relative;transition-duration:.15s;transition-property:background-color,outline;transition-timing-function:ease;width:1.5rem}.jkl-radio-panel__decorator:after{background-color:var(--radio-dot-color);border-radius:50%;content:"";height:1rem;left:50%;position:absolute;scale:1;top:50%;transition-duration:.15s;transition-property:transform;transition-timing-function:ease;translate:-50% -50%;width:1rem}@media screen and (forced-colors:active){.jkl-radio-panel__decorator{border:1px solid ButtonText}}.jkl-radio-panel__input:checked+.jkl-radio-panel__decorator:after{animation:jkl-dot-in-u8ubwri .15s ease}.jkl-radio-panel:has(:checked){--radio-dot-color:var(--jkl-color-border-action)}[aria-invalid=true] .jkl-radio-panel{--radio-ring-color:var(--jkl-color-background-alert-error)}[aria-invalid=true] .jkl-radio-panel:has(:checked){--radio-dot-color:var(--jkl-color-text-on-alert)}
1
+ .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-dot-in-ubh88pa{0%{transform:scale(.8)}to{transform:scale(1)}}.jkl-radio-panel{--radio-dot-color:#0000;--radio-ring-color:#0000}.jkl-radio-panel__decorator{background-color:var(--radio-ring-color);border:.0625rem solid var(--jkl-color-border-action);border-radius:50%;cursor:pointer;display:inline-block;height:1.5rem;position:relative;transition-duration:.15s;transition-property:background-color,outline;transition-timing-function:ease;width:1.5rem}.jkl-radio-panel__decorator:after{background-color:var(--radio-dot-color);border-radius:50%;content:"";height:1rem;left:50%;position:absolute;scale:1;top:50%;transition-duration:.15s;transition-property:transform;transition-timing-function:ease;translate:-50% -50%;width:1rem}@media screen and (forced-colors:active){.jkl-radio-panel__decorator{border:1px solid ButtonText}}.jkl-radio-panel__input:checked+.jkl-radio-panel__decorator:after{animation:jkl-dot-in-ubh88pa .15s ease}.jkl-radio-panel:has(:checked){--radio-dot-color:var(--jkl-color-border-action)}[aria-invalid=true] .jkl-radio-panel{--radio-ring-color:var(--jkl-color-background-alert-error)}[aria-invalid=true] .jkl-radio-panel:has(:checked){--radio-dot-color:var(--jkl-color-text-on-alert)}
@@ -144,7 +144,7 @@
144
144
  margin-bottom: 0;
145
145
  }
146
146
  .jkl-system-message--dismissed {
147
- animation: jkl-dismiss-uu8fb11 400ms ease-in forwards;
147
+ animation: jkl-dismiss-uuz8xp2 400ms ease-in forwards;
148
148
  transition: visibility 0ms 400ms;
149
149
  visibility: hidden;
150
150
  }
@@ -176,7 +176,7 @@
176
176
  }
177
177
  }
178
178
 
179
- @keyframes jkl-dismiss-uu8fb11 {
179
+ @keyframes jkl-dismiss-uuz8xp2 {
180
180
  from {
181
181
  opacity: 1;
182
182
  transform: translate3d(0, 0, 0);
@@ -1 +1 @@
1
- :root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-system-message-icon-height:1.5rem;--jkl-system-message-icon-padding:0.1875rem 0 0 0;--jkl-system-message-content-padding:1.5rem;--jkl-system-message-dismiss-button-size:2.75rem;--jkl-system-message-dismiss-button-margin:-0.40625rem -1.125rem -0.40625rem auto;--jkl-system-message-message-margin:0 1rem;--jkl-system-message-message-font-size:var(--jkl-body-font-size);--jkl-system-message-message-line-height:var(--jkl-body-line-height);--jkl-system-message-message-font-weight:var(--jkl-body-font-weight)}[data-density=compact],[data-layout-density=compact]{--jkl-system-message-icon-height:1.25rem;--jkl-system-message-icon-padding:0.0625rem 0 0 0;--jkl-system-message-content-padding:0.5rem;--jkl-system-message-dismiss-button-size:2rem;--jkl-system-message-dismiss-button-margin:-0.1875rem -0.375rem -0.28125rem auto;--jkl-system-message-message-margin:0 0.75rem;--jkl-system-message-message-font-size:var(--jkl-small-font-size);--jkl-system-message-message-line-height:var(--jkl-small-line-height);--jkl-system-message-message-font-weight:var(--jkl-small-font-weight)}.jkl-system-message{--background-color:var(--jkl-color-background-alert-neutral);--text-color:var(--jkl-color-text-on-alert);background-color:var(--background-color);box-sizing:border-box;color:var(--text-color);width:100%}.jkl-system-message__content{align-items:flex-start;box-sizing:border-box;display:grid;grid-template-columns:-webkit-min-content 1fr -webkit-min-content;grid-template-columns:min-content 1fr min-content;margin:0 auto;padding:var(--jkl-system-message-content-padding);width:100%}.jkl-system-message__icon{flex-shrink:0;height:var(--jkl-system-message-icon-height);margin:var(--jkl-system-message-icon-padding)}@media screen and (forced-colors:active){.jkl-system-message__icon,.jkl-system-message__icon path,.jkl-system-message__icon svg{stroke:CanvasText}}.jkl-system-message__message{font-size:var(--jkl-system-message-message-font-size);font-weight:var(--jkl-system-message-message-font-weight);line-height:var(--jkl-system-message-message-line-height);margin:var(--jkl-system-message-message-margin)}.jkl-system-message__dismiss-button{background-color:initial;color:inherit;cursor:pointer;display:grid;flex-shrink:0;margin-top:.1875rem;padding:0;place-content:center;position:relative}.jkl-system-message__dismiss-button:after{content:"";display:block;height:var(--jkl-system-message-dismiss-button-size);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--jkl-system-message-dismiss-button-size)}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button,.jkl-system-message__dismiss-button path,.jkl-system-message__dismiss-button svg{stroke:ButtonText}.jkl-system-message__dismiss-button{background-color:ButtonFace}}.jkl-system-message__dismiss-button{border-style:none;outline:0;outline-style:none}.jkl-system-message__dismiss-button:active,.jkl-system-message__dismiss-button:focus,.jkl-system-message__dismiss-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button{border-style:revert;outline:revert;outline-style:revert}.jkl-system-message__dismiss-button:active,.jkl-system-message__dismiss-button:focus,.jkl-system-message__dismiss-button:hover{outline:revert;outline-style:revert}}.jkl-system-message__dismiss-button:hover{color:#636060}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button:hover,.jkl-system-message__dismiss-button:hover path,.jkl-system-message__dismiss-button:hover svg{stroke:ButtonText}}.jkl-system-message__dismiss-button:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button:focus-visible{outline:2px solid ButtonText;outline-offset:2px}}.jkl-system-message__message,.jkl-system-message__message:last-child{margin-bottom:0}.jkl-system-message--dismissed{animation:jkl-dismiss-uu8fb11 .4s ease-in forwards;transition:visibility 0s .4s;visibility:hidden}.jkl-system-message--info{--background-color:var(--jkl-color-background-alert-info)}.jkl-system-message--warning{--background-color:var(--jkl-color-background-alert-warning)}.jkl-system-message--error{--background-color:var(--jkl-color-background-alert-error)}.jkl-system-message--success{--background-color:var(--jkl-color-background-alert-success)}@media screen and (forced-colors:active){.jkl-system-message{border:2px solid CanvasText}.jkl-system-message--info{border-style:dotted}.jkl-system-message--warning{border-style:dashed}.jkl-system-message--error{border-style:double;border-width:4px}}@keyframes jkl-dismiss-uu8fb11{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,-50%,0)}}
1
+ :root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-system-message-icon-height:1.5rem;--jkl-system-message-icon-padding:0.1875rem 0 0 0;--jkl-system-message-content-padding:1.5rem;--jkl-system-message-dismiss-button-size:2.75rem;--jkl-system-message-dismiss-button-margin:-0.40625rem -1.125rem -0.40625rem auto;--jkl-system-message-message-margin:0 1rem;--jkl-system-message-message-font-size:var(--jkl-body-font-size);--jkl-system-message-message-line-height:var(--jkl-body-line-height);--jkl-system-message-message-font-weight:var(--jkl-body-font-weight)}[data-density=compact],[data-layout-density=compact]{--jkl-system-message-icon-height:1.25rem;--jkl-system-message-icon-padding:0.0625rem 0 0 0;--jkl-system-message-content-padding:0.5rem;--jkl-system-message-dismiss-button-size:2rem;--jkl-system-message-dismiss-button-margin:-0.1875rem -0.375rem -0.28125rem auto;--jkl-system-message-message-margin:0 0.75rem;--jkl-system-message-message-font-size:var(--jkl-small-font-size);--jkl-system-message-message-line-height:var(--jkl-small-line-height);--jkl-system-message-message-font-weight:var(--jkl-small-font-weight)}.jkl-system-message{--background-color:var(--jkl-color-background-alert-neutral);--text-color:var(--jkl-color-text-on-alert);background-color:var(--background-color);box-sizing:border-box;color:var(--text-color);width:100%}.jkl-system-message__content{align-items:flex-start;box-sizing:border-box;display:grid;grid-template-columns:-webkit-min-content 1fr -webkit-min-content;grid-template-columns:min-content 1fr min-content;margin:0 auto;padding:var(--jkl-system-message-content-padding);width:100%}.jkl-system-message__icon{flex-shrink:0;height:var(--jkl-system-message-icon-height);margin:var(--jkl-system-message-icon-padding)}@media screen and (forced-colors:active){.jkl-system-message__icon,.jkl-system-message__icon path,.jkl-system-message__icon svg{stroke:CanvasText}}.jkl-system-message__message{font-size:var(--jkl-system-message-message-font-size);font-weight:var(--jkl-system-message-message-font-weight);line-height:var(--jkl-system-message-message-line-height);margin:var(--jkl-system-message-message-margin)}.jkl-system-message__dismiss-button{background-color:initial;color:inherit;cursor:pointer;display:grid;flex-shrink:0;margin-top:.1875rem;padding:0;place-content:center;position:relative}.jkl-system-message__dismiss-button:after{content:"";display:block;height:var(--jkl-system-message-dismiss-button-size);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--jkl-system-message-dismiss-button-size)}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button,.jkl-system-message__dismiss-button path,.jkl-system-message__dismiss-button svg{stroke:ButtonText}.jkl-system-message__dismiss-button{background-color:ButtonFace}}.jkl-system-message__dismiss-button{border-style:none;outline:0;outline-style:none}.jkl-system-message__dismiss-button:active,.jkl-system-message__dismiss-button:focus,.jkl-system-message__dismiss-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button{border-style:revert;outline:revert;outline-style:revert}.jkl-system-message__dismiss-button:active,.jkl-system-message__dismiss-button:focus,.jkl-system-message__dismiss-button:hover{outline:revert;outline-style:revert}}.jkl-system-message__dismiss-button:hover{color:#636060}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button:hover,.jkl-system-message__dismiss-button:hover path,.jkl-system-message__dismiss-button:hover svg{stroke:ButtonText}}.jkl-system-message__dismiss-button:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button:focus-visible{outline:2px solid ButtonText;outline-offset:2px}}.jkl-system-message__message,.jkl-system-message__message:last-child{margin-bottom:0}.jkl-system-message--dismissed{animation:jkl-dismiss-uuz8xp2 .4s ease-in forwards;transition:visibility 0s .4s;visibility:hidden}.jkl-system-message--info{--background-color:var(--jkl-color-background-alert-info)}.jkl-system-message--warning{--background-color:var(--jkl-color-background-alert-warning)}.jkl-system-message--error{--background-color:var(--jkl-color-background-alert-error)}.jkl-system-message--success{--background-color:var(--jkl-color-background-alert-success)}@media screen and (forced-colors:active){.jkl-system-message{border:2px solid CanvasText}.jkl-system-message--info{border-style:dotted}.jkl-system-message--warning{border-style:dashed}.jkl-system-message--error{border-style:double;border-width:4px}}@keyframes jkl-dismiss-uuz8xp2{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,-50%,0)}}
@@ -211,11 +211,11 @@ $_text-input-selection-color--inverted: color.scale(
211
211
  }
212
212
 
213
213
  > .jkl-icon-button:focus-visible {
214
+ @include jkl.focus-outline($offset: -8px);
215
+
214
216
  @include jkl.forced-colors-mode {
215
217
  --jkl-color-border-action: ButtonText;
216
218
  }
217
-
218
- @include jkl.focus-outline($offset: -8px);
219
219
  }
220
220
 
221
221
  > .jkl-text-input-action-button {
@@ -59,12 +59,12 @@
59
59
  max-width: min(30rem, 85vw);
60
60
  padding: var(--jkl-toast-padding);
61
61
  padding-top: 0;
62
+ grid-template-areas: "progress progress progress" "icon content dismiss";
63
+ grid-template-columns: auto 1fr auto;
62
64
  font-size: 1.125rem;
63
65
  line-height: 1.75rem;
64
66
  font-weight: 400;
65
67
  --jkl-icon-weight: 300;
66
- grid-template-areas: "progress progress progress" "icon content dismiss";
67
- grid-template-columns: auto 1fr auto;
68
68
  }
69
69
  @media (min-width: 680px) {
70
70
  .jkl-toast {
@@ -185,14 +185,14 @@
185
185
 
186
186
  .jkl-toast[data-animation=entering],
187
187
  .jkl-toast[data-animation=queued] {
188
- animation: jkl-entering-uodg1e5 200ms ease-out forwards;
188
+ animation: jkl-entering-uphyht7 200ms ease-out forwards;
189
189
  }
190
190
 
191
191
  .jkl-toast[data-animation=exiting] {
192
- animation: jkl-exiting-uodg1ei 150ms ease-in forwards;
192
+ animation: jkl-exiting-uphyhu5 150ms ease-in forwards;
193
193
  }
194
194
 
195
- @keyframes jkl-entering-uodg1e5 {
195
+ @keyframes jkl-entering-uphyht7 {
196
196
  from {
197
197
  opacity: 0;
198
198
  transform: translate3d(0, 50%, 0);
@@ -202,7 +202,7 @@
202
202
  transform: translate3d(0, 0, 0);
203
203
  }
204
204
  }
205
- @keyframes jkl-exiting-uodg1ei {
205
+ @keyframes jkl-exiting-uphyhu5 {
206
206
  from {
207
207
  opacity: 1;
208
208
  transform: translate3d(0, 0, 0);
@@ -1 +1 @@
1
- :root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-toast-padding:calc(var(--jkl-unit-10)*2)}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-toast-padding:calc(var(--jkl-unit-10)*1.5)}}[data-density=compact],[data-layout-density=compact]{--jkl-toast-padding:0.5rem}.jkl-toast-region{background:#0000;bottom:calc(var(--jkl-unit-10)*3);display:flex;justify-content:center;left:0;pointer-events:none;position:fixed;right:0;width:100%;z-index:10000}.jkl-toast-region__toasts{align-items:center;display:flex;flex-direction:column;gap:calc(var(--jkl-unit-10)*2);min-width:18rem;pointer-events:auto}.jkl-toast-region--left{justify-content:flex-start;left:calc(var(--jkl-unit-10)*3)}.jkl-toast{--background-color:var(--jkl-color-background-container-high);--text-color:var(--jkl-color-text-default);align-items:start;background-color:var(--background-color);border-radius:4px;box-sizing:border-box;color:var(--text-color);display:grid;font-size:1.125rem;font-weight:400;line-height:1.75rem;max-width:min(30rem,85vw);overflow:hidden;padding:var(--jkl-toast-padding);padding-top:0;width:100%;--jkl-icon-weight:300;grid-template-areas:"progress progress progress" "icon content dismiss";grid-template-columns:auto 1fr auto}@media (min-width:680px){.jkl-toast{font-size:1.25rem;font-weight:400;line-height:2rem;--jkl-icon-weight:300}}.jkl-toast__progress{grid-area:progress;margin-bottom:calc(var(--jkl-unit-10)*2);margin-inline:calc(var(--jkl-toast-padding)*-1)}.jkl-toast__progress .jkl-countdown{--bar-color:var(--text-color);--track-color:#0000;border-radius:0}.jkl-toast__icon{grid-area:icon;margin-right:calc(var(--jkl-unit-10)*1.5)}@media screen and (forced-colors:active){.jkl-toast__icon,.jkl-toast__icon path,.jkl-toast__icon svg{stroke:CanvasText}}.jkl-toast__content{grid-area:content}.jkl-toast__message{margin-top:-.125rem}.jkl-toast__title{font-size:1.125rem;font-weight:700;line-height:1.5rem;margin:0 0 calc(var(--jkl-unit-10)*.5) 0;--jkl-icon-weight:500}@media (min-width:680px){.jkl-toast__title{font-size:1.3125rem;font-weight:700;line-height:1.75rem;--jkl-icon-weight:500}}.jkl-toast__title~.jkl-toast__message{margin-top:0}.jkl-toast__dismiss-button{background-color:initial;color:inherit;cursor:pointer;grid-area:dismiss;justify-self:end;margin-left:var(--jkl-toast-gap);padding:0;position:relative}@media screen and (forced-colors:active){.jkl-toast__dismiss-button,.jkl-toast__dismiss-button path,.jkl-toast__dismiss-button svg{stroke:ButtonText}.jkl-toast__dismiss-button{background-color:ButtonFace}}.jkl-toast__dismiss-button:after{--tap-increment:-0.75rem;border-radius:.1875rem;content:"";inset:var(--tap-increment) var(--tap-increment) var(--tap-increment) var(--tap-increment);position:absolute}.jkl-toast--error,.jkl-toast--info,.jkl-toast--success,.jkl-toast--warning{--text-color:var(--jkl-color-text-on-alert)}.jkl-toast--info{--background-color:var(--jkl-color-background-alert-info)}.jkl-toast--warning{--background-color:var(--jkl-color-background-alert-warning)}.jkl-toast--error{--background-color:var(--jkl-color-background-alert-error)}.jkl-toast--success{--background-color:var(--jkl-color-background-alert-success)}@media screen and (forced-colors:active){.jkl-toast{border:2px solid CanvasText}.jkl-toast--info{border-style:dotted}.jkl-toast--warning{border-style:dashed}.jkl-toast--error{border-style:double;border-width:4px}}.jkl-toast[data-animation=entering],.jkl-toast[data-animation=queued]{animation:jkl-entering-uodg1e5 .2s ease-out forwards}.jkl-toast[data-animation=exiting]{animation:jkl-exiting-uodg1ei .15s ease-in forwards}@keyframes jkl-entering-uodg1e5{0%{opacity:0;transform:translate3d(0,50%,0)}to{opacity:1;transform:translateZ(0)}}@keyframes jkl-exiting-uodg1ei{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,50%,0)}}
1
+ :root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-toast-padding:calc(var(--jkl-unit-10)*2)}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-toast-padding:calc(var(--jkl-unit-10)*1.5)}}[data-density=compact],[data-layout-density=compact]{--jkl-toast-padding:0.5rem}.jkl-toast-region{background:#0000;bottom:calc(var(--jkl-unit-10)*3);display:flex;justify-content:center;left:0;pointer-events:none;position:fixed;right:0;width:100%;z-index:10000}.jkl-toast-region__toasts{align-items:center;display:flex;flex-direction:column;gap:calc(var(--jkl-unit-10)*2);min-width:18rem;pointer-events:auto}.jkl-toast-region--left{justify-content:flex-start;left:calc(var(--jkl-unit-10)*3)}.jkl-toast{--background-color:var(--jkl-color-background-container-high);--text-color:var(--jkl-color-text-default);align-items:start;background-color:var(--background-color);border-radius:4px;box-sizing:border-box;color:var(--text-color);display:grid;font-size:1.125rem;font-weight:400;grid-template-areas:"progress progress progress" "icon content dismiss";grid-template-columns:auto 1fr auto;line-height:1.75rem;max-width:min(30rem,85vw);overflow:hidden;padding:var(--jkl-toast-padding);padding-top:0;width:100%;--jkl-icon-weight:300}@media (min-width:680px){.jkl-toast{font-size:1.25rem;font-weight:400;line-height:2rem;--jkl-icon-weight:300}}.jkl-toast__progress{grid-area:progress;margin-bottom:calc(var(--jkl-unit-10)*2);margin-inline:calc(var(--jkl-toast-padding)*-1)}.jkl-toast__progress .jkl-countdown{--bar-color:var(--text-color);--track-color:#0000;border-radius:0}.jkl-toast__icon{grid-area:icon;margin-right:calc(var(--jkl-unit-10)*1.5)}@media screen and (forced-colors:active){.jkl-toast__icon,.jkl-toast__icon path,.jkl-toast__icon svg{stroke:CanvasText}}.jkl-toast__content{grid-area:content}.jkl-toast__message{margin-top:-.125rem}.jkl-toast__title{font-size:1.125rem;font-weight:700;line-height:1.5rem;margin:0 0 calc(var(--jkl-unit-10)*.5) 0;--jkl-icon-weight:500}@media (min-width:680px){.jkl-toast__title{font-size:1.3125rem;font-weight:700;line-height:1.75rem;--jkl-icon-weight:500}}.jkl-toast__title~.jkl-toast__message{margin-top:0}.jkl-toast__dismiss-button{background-color:initial;color:inherit;cursor:pointer;grid-area:dismiss;justify-self:end;margin-left:var(--jkl-toast-gap);padding:0;position:relative}@media screen and (forced-colors:active){.jkl-toast__dismiss-button,.jkl-toast__dismiss-button path,.jkl-toast__dismiss-button svg{stroke:ButtonText}.jkl-toast__dismiss-button{background-color:ButtonFace}}.jkl-toast__dismiss-button:after{--tap-increment:-0.75rem;border-radius:.1875rem;content:"";inset:var(--tap-increment) var(--tap-increment) var(--tap-increment) var(--tap-increment);position:absolute}.jkl-toast--error,.jkl-toast--info,.jkl-toast--success,.jkl-toast--warning{--text-color:var(--jkl-color-text-on-alert)}.jkl-toast--info{--background-color:var(--jkl-color-background-alert-info)}.jkl-toast--warning{--background-color:var(--jkl-color-background-alert-warning)}.jkl-toast--error{--background-color:var(--jkl-color-background-alert-error)}.jkl-toast--success{--background-color:var(--jkl-color-background-alert-success)}@media screen and (forced-colors:active){.jkl-toast{border:2px solid CanvasText}.jkl-toast--info{border-style:dotted}.jkl-toast--warning{border-style:dashed}.jkl-toast--error{border-style:double;border-width:4px}}.jkl-toast[data-animation=entering],.jkl-toast[data-animation=queued]{animation:jkl-entering-uphyht7 .2s ease-out forwards}.jkl-toast[data-animation=exiting]{animation:jkl-exiting-uphyhu5 .15s ease-in forwards}@keyframes jkl-entering-uphyht7{0%{opacity:0;transform:translate3d(0,50%,0)}to{opacity:1;transform:translateZ(0)}}@keyframes jkl-exiting-uphyhu5{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,50%,0)}}
@@ -58,13 +58,13 @@
58
58
  padding: var(--jkl-toast-padding);
59
59
  padding-top: 0;
60
60
 
61
- @include jkl.text-style("body");
62
-
63
61
  grid-template-areas:
64
62
  "progress progress progress"
65
63
  "icon content dismiss";
66
64
  grid-template-columns: auto 1fr auto;
67
65
 
66
+ @include jkl.text-style("body");
67
+
68
68
  &__progress {
69
69
  grid-area: progress;
70
70
  margin-bottom: jkl.$unit-20;
package/styles/styles.css CHANGED
@@ -1102,7 +1102,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-area__tex
1102
1102
  --color: var(--jkl-color-text-default);
1103
1103
  }
1104
1104
  .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 {
1105
- animation: 400ms cubic-bezier(0, 0, 0.3, 1) 250ms jkl-support-icon-entrance-uj9rdaq forwards;
1105
+ animation: 400ms cubic-bezier(0, 0, 0.3, 1) 250ms jkl-support-icon-entrance-us0sx6r forwards;
1106
1106
  }
1107
1107
  .jkl-form-support-label--sr-only {
1108
1108
  border: 0 !important;
@@ -1177,7 +1177,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-area__tex
1177
1177
  white-space: nowrap !important; /* 3 */
1178
1178
  }
1179
1179
 
1180
- @keyframes jkl-support-icon-entrance-uj9rdaq {
1180
+ @keyframes jkl-support-icon-entrance-us0sx6r {
1181
1181
  0% {
1182
1182
  margin-right: 0;
1183
1183
  opacity: 0;
@@ -1526,7 +1526,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
1526
1526
  opacity: 0.15;
1527
1527
  }
1528
1528
  html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
1529
- animation: cubic-bezier(0.6, 0.2, 0.35, 1) 250ms jkl-tertiary-flash-uj9rdbf;
1529
+ animation: cubic-bezier(0.6, 0.2, 0.35, 1) 250ms jkl-tertiary-flash-us0sx7q;
1530
1530
  }
1531
1531
  .jkl-button--primary, .jkl-button--secondary, .jkl-button--ghost {
1532
1532
  --border-radius: 999px;
@@ -1568,7 +1568,7 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
1568
1568
  --background-color: var(--jkl-color-background-interactive-hover);
1569
1569
  }
1570
1570
 
1571
- @keyframes jkl-tertiary-flash-uj9rdbf {
1571
+ @keyframes jkl-tertiary-flash-us0sx7q {
1572
1572
  0% {
1573
1573
  opacity: 0.5;
1574
1574
  scale: 1;
@@ -1593,15 +1593,15 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
1593
1593
  animation: 2500ms linear infinite;
1594
1594
  }
1595
1595
  .jkl-loader__dot--left {
1596
- animation-name: jkl-loader-left-spin-uj9rdbs;
1596
+ animation-name: jkl-loader-left-spin-us0sx8h;
1597
1597
  margin-right: 1.71em;
1598
1598
  }
1599
1599
  .jkl-loader__dot--middle {
1600
- animation-name: jkl-loader-middle-spin-uj9rdch;
1600
+ animation-name: jkl-loader-middle-spin-us0sx8i;
1601
1601
  margin-right: 1.9em;
1602
1602
  }
1603
1603
  .jkl-loader__dot--right {
1604
- animation-name: jkl-loader-right-spin-uj9rdct;
1604
+ animation-name: jkl-loader-right-spin-us0sx95;
1605
1605
  }
1606
1606
  @media screen and (forced-colors: active) {
1607
1607
  .jkl-loader__dot {
@@ -1629,7 +1629,7 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
1629
1629
  margin-right: 0.3em;
1630
1630
  }
1631
1631
 
1632
- @keyframes jkl-loader-left-spin-uj9rdbs {
1632
+ @keyframes jkl-loader-left-spin-us0sx8h {
1633
1633
  0% {
1634
1634
  transform: rotate(0) scale(0);
1635
1635
  }
@@ -1643,7 +1643,7 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
1643
1643
  transform: rotate(180deg) scale(0);
1644
1644
  }
1645
1645
  }
1646
- @keyframes jkl-loader-middle-spin-uj9rdch {
1646
+ @keyframes jkl-loader-middle-spin-us0sx8i {
1647
1647
  0% {
1648
1648
  transform: rotate(20deg) scale(0);
1649
1649
  }
@@ -1660,7 +1660,7 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
1660
1660
  transform: rotate(200deg) scale(0);
1661
1661
  }
1662
1662
  }
1663
- @keyframes jkl-loader-right-spin-uj9rdct {
1663
+ @keyframes jkl-loader-right-spin-us0sx95 {
1664
1664
  0% {
1665
1665
  transform: rotate(40deg) scale(0);
1666
1666
  }
@@ -1708,7 +1708,7 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
1708
1708
  bottom: 0;
1709
1709
  width: 12.5rem;
1710
1710
  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%);
1711
- animation: var(--jkl-skeleton-sweep-duration) ease infinite jkl-sweep-uj9rddn;
1711
+ animation: var(--jkl-skeleton-sweep-duration) ease infinite jkl-sweep-us0sx9v;
1712
1712
  }
1713
1713
  @media (width >= 0) and (max-width: 679px) {
1714
1714
  .jkl-skeleton-animation {
@@ -1739,7 +1739,7 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
1739
1739
  @media screen and (forced-colors: active) {
1740
1740
  .jkl-skeleton-element {
1741
1741
  border: 1px solid CanvasText;
1742
- animation: 2s ease infinite jkl-blink-uj9rddo;
1742
+ animation: 2s ease infinite jkl-blink-us0sxaa;
1743
1743
  }
1744
1744
  }
1745
1745
 
@@ -1795,11 +1795,11 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
1795
1795
  }
1796
1796
  @media screen and (forced-colors: active) {
1797
1797
  .jkl-skeleton-table {
1798
- animation: 2s ease-in-out infinite jkl-blink-uj9rddo;
1798
+ animation: 2s ease-in-out infinite jkl-blink-us0sxaa;
1799
1799
  }
1800
1800
  }
1801
1801
 
1802
- @keyframes jkl-sweep-uj9rddn {
1802
+ @keyframes jkl-sweep-us0sx9v {
1803
1803
  0% {
1804
1804
  transform: translateX(calc(0vw - 200px));
1805
1805
  }
@@ -1807,7 +1807,7 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
1807
1807
  transform: translateX(calc(100vw + 400px));
1808
1808
  }
1809
1809
  }
1810
- @keyframes jkl-blink-uj9rddo {
1810
+ @keyframes jkl-blink-us0sxaa {
1811
1811
  0% {
1812
1812
  opacity: 1;
1813
1813
  }
@@ -2271,7 +2271,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-nav-card:focus
2271
2271
  --jkl-checkbox-line-height: 1.5rem;
2272
2272
  }
2273
2273
 
2274
- @keyframes jkl-checkbox-checked-uj9rde7 {
2274
+ @keyframes jkl-checkbox-checked-us0sxb2 {
2275
2275
  0% {
2276
2276
  width: 0;
2277
2277
  height: 0;
@@ -2285,7 +2285,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-nav-card:focus
2285
2285
  height: 58%;
2286
2286
  }
2287
2287
  }
2288
- @keyframes jkl-checkbox-indeterminate-uj9rdei {
2288
+ @keyframes jkl-checkbox-indeterminate-us0sxbo {
2289
2289
  0% {
2290
2290
  width: 0;
2291
2291
  }
@@ -2313,11 +2313,11 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-nav-card:focus
2313
2313
  top: -6px;
2314
2314
  }
2315
2315
  .jkl-checkbox__input:checked + .jkl-checkbox__label .jkl-checkbox__check-mark::after {
2316
- animation: jkl-checkbox-checked-uj9rde7 150ms ease-in-out forwards;
2316
+ animation: jkl-checkbox-checked-us0sxb2 150ms ease-in-out forwards;
2317
2317
  opacity: 1;
2318
2318
  }
2319
2319
  .jkl-checkbox__input:indeterminate:not(:checked) + .jkl-checkbox__label .jkl-checkbox__indeterminate-mark::after {
2320
- animation: jkl-checkbox-indeterminate-uj9rdei 150ms ease-in-out forwards;
2320
+ animation: jkl-checkbox-indeterminate-us0sxbo 150ms ease-in-out forwards;
2321
2321
  opacity: 1;
2322
2322
  }
2323
2323
  .jkl-checkbox__input:focus-visible + .jkl-checkbox__label {
@@ -2488,7 +2488,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-nav-card:focus
2488
2488
  --outer-border-thickness: 0.125rem;
2489
2489
  }
2490
2490
 
2491
- @keyframes jkl-checkbox-checked-uj9rdfg {
2491
+ @keyframes jkl-checkbox-checked-us0sxbv {
2492
2492
  0% {
2493
2493
  width: 0;
2494
2494
  height: 0;
@@ -2551,7 +2551,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-nav-card:focus
2551
2551
  }
2552
2552
  }
2553
2553
  .jkl-checkbox-panel:has(:checked) .jkl-checkbox-panel__decorator::after {
2554
- animation: jkl-checkbox-checked-uj9rdfg 150ms ease-in-out forwards;
2554
+ animation: jkl-checkbox-checked-us0sxbv 150ms ease-in-out forwards;
2555
2555
  opacity: 1;
2556
2556
  }
2557
2557
  .jkl-checkbox-panel:has([aria-invalid=true]) {
@@ -3247,11 +3247,11 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrap
3247
3247
  }
3248
3248
  }
3249
3249
  .jkl-countdown__tracker {
3250
- animation: jkl-downcount-uj9rdgf var(--duration) linear forwards;
3250
+ animation: jkl-downcount-us0sxbw var(--duration) linear forwards;
3251
3251
  animation-play-state: var(--play-state, running);
3252
3252
  }
3253
3253
 
3254
- @keyframes jkl-downcount-uj9rdgf {
3254
+ @keyframes jkl-downcount-us0sxbw {
3255
3255
  from {
3256
3256
  width: 100%;
3257
3257
  }
@@ -3920,7 +3920,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrap
3920
3920
  padding: 1rem 0 2.5rem 0;
3921
3921
  }
3922
3922
 
3923
- @keyframes jkl-show-uj9rdha {
3923
+ @keyframes jkl-show-us0sxcv {
3924
3924
  from {
3925
3925
  transform: translate3d(0, 0.5rem, 0);
3926
3926
  opacity: 0;
@@ -3955,7 +3955,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrap
3955
3955
  }
3956
3956
  }
3957
3957
  .jkl-feedback__fade-in {
3958
- animation: jkl-show-uj9rdha 0.25s ease-out;
3958
+ animation: jkl-show-us0sxcv 0.25s ease-out;
3959
3959
  }
3960
3960
  .jkl-feedback__buttons {
3961
3961
  display: flex;
@@ -4197,7 +4197,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
4197
4197
  --background-color: var(--jkl-color-background-alert-success);
4198
4198
  }
4199
4199
  .jkl-message--dismissed {
4200
- animation: jkl-dismiss-uj9rdhb 400ms ease-in-out forwards;
4200
+ animation: jkl-dismiss-us0sxcy 400ms ease-in-out forwards;
4201
4201
  transition: visibility 0ms 400ms;
4202
4202
  visibility: hidden;
4203
4203
  }
@@ -4217,7 +4217,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
4217
4217
  }
4218
4218
  }
4219
4219
 
4220
- @keyframes jkl-dismiss-uj9rdhb {
4220
+ @keyframes jkl-dismiss-us0sxcy {
4221
4221
  from {
4222
4222
  opacity: 1;
4223
4223
  transform: translate3d(0, 0, 0);
@@ -4273,7 +4273,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
4273
4273
  --jkl-radio-button-label-font-weight: var(--jkl-small-font-weight);
4274
4274
  }
4275
4275
 
4276
- @keyframes jkl-dot-in-uj9rdhn {
4276
+ @keyframes jkl-dot-in-us0sxcz {
4277
4277
  0% {
4278
4278
  transform: scale(0.8);
4279
4279
  }
@@ -4318,7 +4318,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
4318
4318
  }
4319
4319
  .jkl-radio-button__input:checked + .jkl-radio-button__label > .jkl-radio-button__dot::after {
4320
4320
  --dot-color: var(--jkl-color-border-action);
4321
- animation: jkl-dot-in-uj9rdhn 150ms ease;
4321
+ animation: jkl-dot-in-us0sxcz 150ms ease;
4322
4322
  }
4323
4323
  @media screen and (forced-colors: active) {
4324
4324
  .jkl-radio-button__input:checked + .jkl-radio-button__label > .jkl-radio-button__dot::after {
@@ -5133,7 +5133,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:fo
5133
5133
  transition-duration: 150ms;
5134
5134
  }
5135
5135
 
5136
- @keyframes jkl-downcount-uj9rdia {
5136
+ @keyframes jkl-downcount-us0sxdt {
5137
5137
  from {
5138
5138
  width: 100%;
5139
5139
  }
@@ -5141,7 +5141,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:fo
5141
5141
  width: 0%;
5142
5142
  }
5143
5143
  }
5144
- @keyframes jkl-dot-in-uj9rdib {
5144
+ @keyframes jkl-dot-in-us0sxem {
5145
5145
  0% {
5146
5146
  transform: scale(0.8);
5147
5147
  }
@@ -5189,7 +5189,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:fo
5189
5189
  }
5190
5190
  }
5191
5191
  .jkl-radio-panel__input:checked + .jkl-radio-panel__decorator::after {
5192
- animation: jkl-dot-in-uj9rdib 150ms ease;
5192
+ animation: jkl-dot-in-us0sxem 150ms ease;
5193
5193
  }
5194
5194
  .jkl-radio-panel:has(:checked) {
5195
5195
  --radio-dot-color: var(--jkl-color-border-action);
@@ -5401,7 +5401,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:fo
5401
5401
  margin-bottom: 0;
5402
5402
  }
5403
5403
  .jkl-system-message--dismissed {
5404
- animation: jkl-dismiss-uj9rdil 400ms ease-in forwards;
5404
+ animation: jkl-dismiss-us0sxf4 400ms ease-in forwards;
5405
5405
  transition: visibility 0ms 400ms;
5406
5406
  visibility: hidden;
5407
5407
  }
@@ -5433,7 +5433,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:fo
5433
5433
  }
5434
5434
  }
5435
5435
 
5436
- @keyframes jkl-dismiss-uj9rdil {
5436
+ @keyframes jkl-dismiss-us0sxf4 {
5437
5437
  from {
5438
5438
  opacity: 1;
5439
5439
  transform: translate3d(0, 0, 0);
@@ -6177,12 +6177,12 @@ html:not([data-mousenavigation]) .jkl-table-pagination__previous:focus, html:not
6177
6177
  max-width: min(30rem, 85vw);
6178
6178
  padding: var(--jkl-toast-padding);
6179
6179
  padding-top: 0;
6180
+ grid-template-areas: "progress progress progress" "icon content dismiss";
6181
+ grid-template-columns: auto 1fr auto;
6180
6182
  font-size: 1.125rem;
6181
6183
  line-height: 1.75rem;
6182
6184
  font-weight: 400;
6183
6185
  --jkl-icon-weight: 300;
6184
- grid-template-areas: "progress progress progress" "icon content dismiss";
6185
- grid-template-columns: auto 1fr auto;
6186
6186
  }
6187
6187
  @media (min-width: 680px) {
6188
6188
  .jkl-toast {
@@ -6303,14 +6303,14 @@ html:not([data-mousenavigation]) .jkl-table-pagination__previous:focus, html:not
6303
6303
 
6304
6304
  .jkl-toast[data-animation=entering],
6305
6305
  .jkl-toast[data-animation=queued] {
6306
- animation: jkl-entering-uj9rdj8 200ms ease-out forwards;
6306
+ animation: jkl-entering-us0sxfw 200ms ease-out forwards;
6307
6307
  }
6308
6308
 
6309
6309
  .jkl-toast[data-animation=exiting] {
6310
- animation: jkl-exiting-uj9rdjd 150ms ease-in forwards;
6310
+ animation: jkl-exiting-us0sxgb 150ms ease-in forwards;
6311
6311
  }
6312
6312
 
6313
- @keyframes jkl-entering-uj9rdj8 {
6313
+ @keyframes jkl-entering-us0sxfw {
6314
6314
  from {
6315
6315
  opacity: 0;
6316
6316
  transform: translate3d(0, 50%, 0);
@@ -6320,7 +6320,7 @@ html:not([data-mousenavigation]) .jkl-table-pagination__previous:focus, html:not
6320
6320
  transform: translate3d(0, 0, 0);
6321
6321
  }
6322
6322
  }
6323
- @keyframes jkl-exiting-uj9rdjd {
6323
+ @keyframes jkl-exiting-us0sxgb {
6324
6324
  from {
6325
6325
  opacity: 1;
6326
6326
  transform: translate3d(0, 0, 0);