@fremtind/jokul 4.7.1 → 4.7.2

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 (31) hide show
  1. package/package.json +1 -1
  2. package/styles/components/button/button.css +7 -2
  3. package/styles/components/button/button.min.css +1 -1
  4. package/styles/components/button/button.scss +9 -3
  5. package/styles/components/countdown/countdown.css +2 -2
  6. package/styles/components/countdown/countdown.min.css +1 -1
  7. package/styles/components/expander/expandable.css +8 -3
  8. package/styles/components/expander/expandable.min.css +1 -1
  9. package/styles/components/expander/expandable.scss +7 -5
  10. package/styles/components/feedback/feedback.css +2 -2
  11. package/styles/components/feedback/feedback.min.css +1 -1
  12. package/styles/components/file-input/file-input.css +16 -11
  13. package/styles/components/file-input/file-input.min.css +1 -1
  14. package/styles/components/input-group/input-group.css +2 -2
  15. package/styles/components/input-group/input-group.min.css +1 -1
  16. package/styles/components/loader/loader.css +6 -6
  17. package/styles/components/loader/loader.min.css +1 -1
  18. package/styles/components/loader/skeleton-loader.css +3 -3
  19. package/styles/components/loader/skeleton-loader.min.css +1 -1
  20. package/styles/components/message/message.css +2 -2
  21. package/styles/components/message/message.min.css +1 -1
  22. package/styles/components/progress-bar/progress-bar.css +1 -1
  23. package/styles/components/progress-bar/progress-bar.min.css +1 -1
  24. package/styles/components/segmented-control/segmented-control.css +2 -2
  25. package/styles/components/segmented-control/segmented-control.min.css +1 -1
  26. package/styles/components/system-message/system-message.css +2 -2
  27. package/styles/components/system-message/system-message.min.css +1 -1
  28. package/styles/components/toast/toast.css +4 -4
  29. package/styles/components/toast/toast.min.css +1 -1
  30. package/styles/styles.css +39 -29
  31. package/styles/styles.min.css +1 -1
@@ -197,7 +197,7 @@
197
197
  --color: var(--jkl-color-text-default);
198
198
  }
199
199
  .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 {
200
- animation: 400ms cubic-bezier(0, 0, 0.3, 1) 250ms jkl-support-icon-entrance-u8os2bd forwards;
200
+ animation: 400ms cubic-bezier(0, 0, 0.3, 1) 250ms jkl-support-icon-entrance-u6qg6hm forwards;
201
201
  }
202
202
  .jkl-form-support-label--sr-only {
203
203
  border: 0 !important;
@@ -263,7 +263,7 @@
263
263
  .jkl-label:has(+ .jkl-input-group-description) {
264
264
  margin-block-end: var(--jkl-spacing-4);
265
265
  }
266
- @keyframes jkl-support-icon-entrance-u8os2bd {
266
+ @keyframes jkl-support-icon-entrance-u6qg6hm {
267
267
  0% {
268
268
  margin-right: 0;
269
269
  opacity: 0;
@@ -1 +1 @@
1
- @layer jokul.components{@media screen and (prefers-color-scheme:light){:root{--jkl-radio-button-error-color:#ab2e43}}[data-theme=light]{--jkl-radio-button-error-color:#ab2e43}@media screen and (prefers-color-scheme:dark){:root{--jkl-radio-button-error-color:#d79ba5}}[data-theme=dark]{--jkl-radio-button-error-color:#d79ba5}.jkl-radio-button{border-style:none;display:flex;outline:0;outline-style:none;position:relative}.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;outline:revert;outline-style:revert}.jkl-radio-button:active,.jkl-radio-button:focus,.jkl-radio-button:hover{outline:revert;outline-style:revert}}.jkl-radio-button__input{-webkit-appearance:none;appearance:none;background:transparent;block-size:1lh;border:0;border-style:none;cursor:pointer;inline-size:1lh;inset-block-start:0;inset-inline-start:0;margin:0;outline:0;outline-style:none;padding:0;position:absolute;z-index:1}.jkl-radio-button__input:active,.jkl-radio-button__input:focus,.jkl-radio-button__input:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-radio-button__input{border-style:revert;outline:revert;outline-style:revert}.jkl-radio-button__input:active,.jkl-radio-button__input:focus,.jkl-radio-button__input:hover{outline:revert;outline-style:revert}}.jkl-radio-button__label{cursor:pointer;display:flex;font-size:var(--jkl-font-size-3);font-weight:400;line-height:var(--jkl-line-height-tight);transition-duration:.15s;transition-property:color;transition-timing-function:ease;--jkl-icon-weight:300}.jkl-radio-button__label:before{content:"radio_button_unchecked";-webkit-margin-end:.25em;display:inline-block;font-family:Fremtind Material Symbols,Fremtind Material Symbols Fallback,sans-serif;font-feature-settings:"liga";-webkit-font-feature-settings:"liga";font-size:1.3em;font-variation-settings:"FILL" var(--jkl-icon-fill,0),"GRAD" var(--jkl-icon-grade,0),"opsz" var(--jkl-icon-opsz,24);font-weight:var(--jkl-icon-weight,300);line-height:1;margin-inline-end:.25em;-webkit-font-smoothing:antialiased;transition-duration:75ms;transition-property:font-variation-settings,transform;transition-timing-function:ease}.jkl-radio-button__input:focus-visible+.jkl-radio-button__label:before{border-radius:var(--jkl-border-radius-full);outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-radio-button__input:is(:hover,:active)+.jkl-radio-button__label,.jkl-radio-button__label:active,.jkl-radio-button__label:hover{--jkl-icon-weight:400}.jkl-radio-button__input:checked+.jkl-radio-button__label:before{content:"radio_button_checked"}.jkl-radio-button__input[aria-invalid=true]+.jkl-radio-button__label:before{color:var(--jkl-radio-button-error-color)}.jkl-dormant-form-support-label+.jkl-radio-button,.jkl-form-support-label+.jkl-radio-button,.jkl-radio-button+.jkl-radio-button{margin-top:.75lh}.jkl-radio-button--inline{display:inline-flex;margin-right:var(--jkl-unit-30)}.jkl-dormant-form-support-label+.jkl-radio-button--inline,.jkl-form-support-label+.jkl-radio-button--inline,.jkl-radio-button--inline+.jkl-radio-button--inline{margin-top:0}.jkl-radio-button+.jkl-form-support-label{margin-bottom:var(--jkl-unit-base);margin-left:1.75em;margin-top:.25lh}}@layer jokul.components{.jkl-field-group{border-style:none;outline:0;outline-style:none}.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;outline:revert;outline-style:revert}.jkl-field-group:active,.jkl-field-group:focus,.jkl-field-group:hover{outline:revert;outline-style:revert}}}@layer jokul.components{.jkl-dormant-form-support-label{display:none;opacity:0;pointer-events:none}.jkl-form-support-label{--jkl-form-support-label-margin:var(--jkl-unit-10) 0 0;--jkl-form-support-label-icon-size:1.25rem;--jkl-form-support-label-icon-margin:0 -1.25rem -0.375rem 0;--color:var(--jkl-color-text-subdued);font-size:var(--jkl-font-size-2);font-weight:400;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:300;color:var(--color);display:flex;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{fill:Canvas;stroke:CanvasText}}.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-u8os2bd .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}.jkl-label{color:var(--jkl-color-text-default);display:block;margin:0 0 var(--jkl-spacing-8) 0}.jkl-label--medium,.jkl-label--small{font-size:var(--jkl-font-size-3)}.jkl-label--large,.jkl-label--medium,.jkl-label--small{font-weight:400;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:300}.jkl-label--large{font-size:var(--jkl-font-size-5)}.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}.jkl-label .jkl-help{position:relative;top:-.1ex}.jkl-input-group-description{font-size:var(--jkl-font-size-2);font-weight:400;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:300;color:var(--jkl-color-text-subdued);-webkit-margin-after:var(--jkl-spacing-8);margin-block-end:var(--jkl-spacing-8);max-inline-size:50ch;text-wrap:pretty}.jkl-label:has(+.jkl-input-group-description){-webkit-margin-after:var(--jkl-spacing-4);margin-block-end:var(--jkl-spacing-4)}@keyframes jkl-support-icon-entrance-u8os2bd{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)}}}@layer jokul.components{@media screen and (forced-colors:active){.jkl-text-input-action-button,.jkl-text-input-action-button path,.jkl-text-input-action-button svg{fill:ButtonFace;stroke:ButtonText}}}@layer jokul.theme{@media screen and (prefers-color-scheme:light){:root{--jkl-icon-grade:0}}[data-theme=light]{--jkl-icon-grade:0}@media screen and (prefers-color-scheme:dark){:root{--jkl-icon-grade:-25}}[data-theme=dark]{--jkl-icon-grade:-25}}@layer jokul.components{.jkl-icon{--jkl-icon-fill:0;display:inline-block;font-family:Fremtind Material Symbols,Fremtind Material Symbols Fallback,sans-serif;font-feature-settings:"liga";-webkit-font-feature-settings:"liga";font-size:1.3em;font-variation-settings:"FILL" var(--jkl-icon-fill,0),"GRAD" var(--jkl-icon-grade,0),"opsz" var(--jkl-icon-opsz,24);font-weight:var(--jkl-icon-weight,300);line-height:1;-webkit-font-smoothing:antialiased;transition-duration:75ms;transition-property:font-variation-settings,transform;transition-timing-function:ease}.jkl-icon--bold{--jkl-icon-weight:var(--jkl-icon-weight-bold)}.jkl-icon--filled{--jkl-icon-fill:1}.jkl-icon--animated{display:block}.jkl-icon-red-cross{background-color:var(--jkl-color-background-alert-error);border-radius:999px;box-sizing:border-box;color:var(--jkl-color-text-on-alert);display:inline-grid;font-size:1em;height:1.3em;place-items:center;width:1.3em;--jkl-icon-weight:var(--jkl-icon-weight-bold)}@media screen and (forced-colors:active){.jkl-icon-red-cross{background-color:Canvas;border:1px solid CanvasText;color:CanvasText}}.jkl-icon-green-check{background-color:var(--jkl-color-background-alert-success);border-radius:999px;box-sizing:border-box;color:var(--jkl-color-text-on-alert);display:inline-grid;font-size:1em;height:1.3em;place-items:center;width:1.3em;--jkl-icon-weight:var(--jkl-icon-weight-bold)}@media screen and (forced-colors:active){.jkl-icon-green-check{background-color:Canvas;border:1px solid CanvasText;color:CanvasText}}.jkl-animated-horizontal-arrows,.jkl-animated-vertical-arrows{height:1.3em;overflow:hidden;width:1.3em}.jkl-animated-horizontal-arrows__slider,.jkl-animated-vertical-arrows__slider{display:flex;transition-delay:83.33333ms;transition-duration:.25s;transition-property:transform;transition-timing-function:ease}.jkl-animated-horizontal-arrows__arrow,.jkl-animated-vertical-arrows__arrow{flex-shrink:0}.jkl-animated-vertical-arrows__slider{flex-direction:column;height:2.6em}.jkl-animated-vertical-arrows__slider[data-show=up]{transform:translateZ(0)}.jkl-animated-vertical-arrows__slider[data-show=down]{transform:translate3d(0,-50%,0)}.jkl-animated-horizontal-arrows__slider{flex-direction:row;width:2.6em}.jkl-animated-horizontal-arrows__slider[data-show=left]{transform:translateZ(0)}.jkl-animated-horizontal-arrows__slider[data-show=right]{transform:translate3d(-50%,0,0)}.jkl-icons-animated__plus{transform-origin:50% 50%;transition-duration:.25s;transition-property:transform;transition-timing-function:cubic-bezier(0,0,.375,1.17)}.jkl-icons-animated__plus--plus{transform:rotate(0)}.jkl-icons-animated__plus--close{transform:rotate(135deg)}.jkl-tooltip-trigger{all:unset}}@layer jokul.components{html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigger:focus{--jkl-icon-weight:400;font-weight:700;letter-spacing:-.014em}.jkl-tooltip-content{--content-padding:var(--jkl-unit-15);--background-color:var(--jkl-color-background-container-inverted);font-size:var(--jkl-font-size-2);font-weight:400;line-height:var(--jkl-line-height-relaxed);--jkl-icon-weight:300;--jkl-icon-size:1.2em;background-color:var(--background-color);color:var(--jkl-color-text-inverted);display:inline-block;max-width:min(19.375rem,100%);min-width:-webkit-min-content;min-width:min-content;padding:var(--content-padding);position:absolute;z-index:10000}@media screen and (forced-colors:active){.jkl-tooltip-content{border:1px solid CanvasText}}.jkl-tooltip-question-button{align-items:baseline;background-color:transparent;border-radius:9999px;border-style:none;color:var(--jkl-color-text-interactive);cursor:pointer;display:inline-flex;outline:0;outline-style:none;padding:0;position:relative;transform:translateY(min(.25em,.375rem));transition-duration:.1s;transition-property:color;transition-timing-function:ease-in}.jkl-tooltip-question-button:active,.jkl-tooltip-question-button:focus,.jkl-tooltip-question-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-tooltip-question-button{border-style:revert;outline:revert;outline-style:revert}.jkl-tooltip-question-button:active,.jkl-tooltip-question-button:focus,.jkl-tooltip-question-button:hover{outline:revert;outline-style:revert}}.jkl-tooltip-question-button:hover{--button-color:var(--jkl-color-text-interactive-hover)}.jkl-tooltip-question-button:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:0}.jkl-tooltip-question-button:after{content:"";left:50%;min-height:44px;min-width:44px;position:absolute;top:50%;translate:-50% -50%}}.jkl-popuptip__content-wrapper:focus{outline:none}@layer jokul.components{.jkl-segmented-control{--jkl-segmented-controls-padding:var(--jkl-unit-10) var(--jkl-unit-20);--jkl-segmented-controls-margin:1.5ch}.jkl-segmented-control .jkl-segmented-control-legend{-webkit-margin-after:.25lh;margin-block-end:.25lh}.jkl-segmented-control .jkl-segmented-control-item{--jkl-segmented-control-border-width:1px;--jkl-segmented-controls-border-radius:2lh;align-items:center;background-color:var(--jkl-color-background-interactive);border:var(--jkl-segmented-control-border-width) solid var(--jkl-color-border-separator);border-radius:0;cursor:pointer;display:inline-flex;position:relative;-webkit-margin-end:calc(var(--jkl-segmented-control-border-width)*-1);margin-inline-end:calc(var(--jkl-segmented-control-border-width)*-1);-webkit-margin-after:.5lh;margin-block-end:.5lh;transition-duration:.25s;transition-property:border background;transition-timing-function:cubic-bezier(0,0,.375,1.17)}.jkl-segmented-control .jkl-segmented-control-item label{cursor:pointer;padding:var(--jkl-segmented-controls-padding)}.jkl-segmented-control .jkl-segmented-control-item:hover{background-color:var(--jkl-color-background-interactive-hover);border-color:var(--jkl-color-border-separator-hover);z-index:2}.jkl-segmented-control .jkl-segmented-control-item:has(input:checked){background-color:var(--jkl-color-background-container-high);border-color:var(--jkl-color-border-separator);z-index:1}.jkl-segmented-control .jkl-segmented-control-item:has(input[data-separated=true]){border-radius:var(--jkl-segmented-controls-border-radius);-webkit-margin-start:var(--jkl-segmented-controls-margin);margin-inline-start:var(--jkl-segmented-controls-margin)}.jkl-segmented-control .jkl-segmented-control-item:has(input[data-separated=true]):first-of-type{-webkit-margin-start:0;margin-inline-start:0}.jkl-segmented-control .jkl-segmented-control-item:has(input[data-separated=true])+span+.jkl-segmented-control-item{border-end-start-radius:var(--jkl-segmented-controls-border-radius);border-start-start-radius:var(--jkl-segmented-controls-border-radius);-webkit-margin-start:var(--jkl-segmented-controls-margin);margin-inline-start:var(--jkl-segmented-controls-margin)}.jkl-segmented-control .jkl-segmented-control-item:first-of-type{border-end-start-radius:var(--jkl-segmented-controls-border-radius);border-start-start-radius:var(--jkl-segmented-controls-border-radius)}.jkl-segmented-control .jkl-segmented-control-item:last-of-type{border-end-end-radius:var(--jkl-segmented-controls-border-radius);border-start-end-radius:var(--jkl-segmented-controls-border-radius)}.jkl-segmented-control .jkl-segmented-control-item:has(+span+.jkl-segmented-control-item>input[data-separated=true]){border-end-end-radius:var(--jkl-segmented-controls-border-radius);border-start-end-radius:var(--jkl-segmented-controls-border-radius)}}
1
+ @layer jokul.components{@media screen and (prefers-color-scheme:light){:root{--jkl-radio-button-error-color:#ab2e43}}[data-theme=light]{--jkl-radio-button-error-color:#ab2e43}@media screen and (prefers-color-scheme:dark){:root{--jkl-radio-button-error-color:#d79ba5}}[data-theme=dark]{--jkl-radio-button-error-color:#d79ba5}.jkl-radio-button{border-style:none;display:flex;outline:0;outline-style:none;position:relative}.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;outline:revert;outline-style:revert}.jkl-radio-button:active,.jkl-radio-button:focus,.jkl-radio-button:hover{outline:revert;outline-style:revert}}.jkl-radio-button__input{-webkit-appearance:none;appearance:none;background:transparent;block-size:1lh;border:0;border-style:none;cursor:pointer;inline-size:1lh;inset-block-start:0;inset-inline-start:0;margin:0;outline:0;outline-style:none;padding:0;position:absolute;z-index:1}.jkl-radio-button__input:active,.jkl-radio-button__input:focus,.jkl-radio-button__input:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-radio-button__input{border-style:revert;outline:revert;outline-style:revert}.jkl-radio-button__input:active,.jkl-radio-button__input:focus,.jkl-radio-button__input:hover{outline:revert;outline-style:revert}}.jkl-radio-button__label{cursor:pointer;display:flex;font-size:var(--jkl-font-size-3);font-weight:400;line-height:var(--jkl-line-height-tight);transition-duration:.15s;transition-property:color;transition-timing-function:ease;--jkl-icon-weight:300}.jkl-radio-button__label:before{content:"radio_button_unchecked";-webkit-margin-end:.25em;display:inline-block;font-family:Fremtind Material Symbols,Fremtind Material Symbols Fallback,sans-serif;font-feature-settings:"liga";-webkit-font-feature-settings:"liga";font-size:1.3em;font-variation-settings:"FILL" var(--jkl-icon-fill,0),"GRAD" var(--jkl-icon-grade,0),"opsz" var(--jkl-icon-opsz,24);font-weight:var(--jkl-icon-weight,300);line-height:1;margin-inline-end:.25em;-webkit-font-smoothing:antialiased;transition-duration:75ms;transition-property:font-variation-settings,transform;transition-timing-function:ease}.jkl-radio-button__input:focus-visible+.jkl-radio-button__label:before{border-radius:var(--jkl-border-radius-full);outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-radio-button__input:is(:hover,:active)+.jkl-radio-button__label,.jkl-radio-button__label:active,.jkl-radio-button__label:hover{--jkl-icon-weight:400}.jkl-radio-button__input:checked+.jkl-radio-button__label:before{content:"radio_button_checked"}.jkl-radio-button__input[aria-invalid=true]+.jkl-radio-button__label:before{color:var(--jkl-radio-button-error-color)}.jkl-dormant-form-support-label+.jkl-radio-button,.jkl-form-support-label+.jkl-radio-button,.jkl-radio-button+.jkl-radio-button{margin-top:.75lh}.jkl-radio-button--inline{display:inline-flex;margin-right:var(--jkl-unit-30)}.jkl-dormant-form-support-label+.jkl-radio-button--inline,.jkl-form-support-label+.jkl-radio-button--inline,.jkl-radio-button--inline+.jkl-radio-button--inline{margin-top:0}.jkl-radio-button+.jkl-form-support-label{margin-bottom:var(--jkl-unit-base);margin-left:1.75em;margin-top:.25lh}}@layer jokul.components{.jkl-field-group{border-style:none;outline:0;outline-style:none}.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;outline:revert;outline-style:revert}.jkl-field-group:active,.jkl-field-group:focus,.jkl-field-group:hover{outline:revert;outline-style:revert}}}@layer jokul.components{.jkl-dormant-form-support-label{display:none;opacity:0;pointer-events:none}.jkl-form-support-label{--jkl-form-support-label-margin:var(--jkl-unit-10) 0 0;--jkl-form-support-label-icon-size:1.25rem;--jkl-form-support-label-icon-margin:0 -1.25rem -0.375rem 0;--color:var(--jkl-color-text-subdued);font-size:var(--jkl-font-size-2);font-weight:400;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:300;color:var(--color);display:flex;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{fill:Canvas;stroke:CanvasText}}.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-u6qg6hm .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}.jkl-label{color:var(--jkl-color-text-default);display:block;margin:0 0 var(--jkl-spacing-8) 0}.jkl-label--medium,.jkl-label--small{font-size:var(--jkl-font-size-3)}.jkl-label--large,.jkl-label--medium,.jkl-label--small{font-weight:400;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:300}.jkl-label--large{font-size:var(--jkl-font-size-5)}.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}.jkl-label .jkl-help{position:relative;top:-.1ex}.jkl-input-group-description{font-size:var(--jkl-font-size-2);font-weight:400;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:300;color:var(--jkl-color-text-subdued);-webkit-margin-after:var(--jkl-spacing-8);margin-block-end:var(--jkl-spacing-8);max-inline-size:50ch;text-wrap:pretty}.jkl-label:has(+.jkl-input-group-description){-webkit-margin-after:var(--jkl-spacing-4);margin-block-end:var(--jkl-spacing-4)}@keyframes jkl-support-icon-entrance-u6qg6hm{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)}}}@layer jokul.components{@media screen and (forced-colors:active){.jkl-text-input-action-button,.jkl-text-input-action-button path,.jkl-text-input-action-button svg{fill:ButtonFace;stroke:ButtonText}}}@layer jokul.theme{@media screen and (prefers-color-scheme:light){:root{--jkl-icon-grade:0}}[data-theme=light]{--jkl-icon-grade:0}@media screen and (prefers-color-scheme:dark){:root{--jkl-icon-grade:-25}}[data-theme=dark]{--jkl-icon-grade:-25}}@layer jokul.components{.jkl-icon{--jkl-icon-fill:0;display:inline-block;font-family:Fremtind Material Symbols,Fremtind Material Symbols Fallback,sans-serif;font-feature-settings:"liga";-webkit-font-feature-settings:"liga";font-size:1.3em;font-variation-settings:"FILL" var(--jkl-icon-fill,0),"GRAD" var(--jkl-icon-grade,0),"opsz" var(--jkl-icon-opsz,24);font-weight:var(--jkl-icon-weight,300);line-height:1;-webkit-font-smoothing:antialiased;transition-duration:75ms;transition-property:font-variation-settings,transform;transition-timing-function:ease}.jkl-icon--bold{--jkl-icon-weight:var(--jkl-icon-weight-bold)}.jkl-icon--filled{--jkl-icon-fill:1}.jkl-icon--animated{display:block}.jkl-icon-red-cross{background-color:var(--jkl-color-background-alert-error);border-radius:999px;box-sizing:border-box;color:var(--jkl-color-text-on-alert);display:inline-grid;font-size:1em;height:1.3em;place-items:center;width:1.3em;--jkl-icon-weight:var(--jkl-icon-weight-bold)}@media screen and (forced-colors:active){.jkl-icon-red-cross{background-color:Canvas;border:1px solid CanvasText;color:CanvasText}}.jkl-icon-green-check{background-color:var(--jkl-color-background-alert-success);border-radius:999px;box-sizing:border-box;color:var(--jkl-color-text-on-alert);display:inline-grid;font-size:1em;height:1.3em;place-items:center;width:1.3em;--jkl-icon-weight:var(--jkl-icon-weight-bold)}@media screen and (forced-colors:active){.jkl-icon-green-check{background-color:Canvas;border:1px solid CanvasText;color:CanvasText}}.jkl-animated-horizontal-arrows,.jkl-animated-vertical-arrows{height:1.3em;overflow:hidden;width:1.3em}.jkl-animated-horizontal-arrows__slider,.jkl-animated-vertical-arrows__slider{display:flex;transition-delay:83.33333ms;transition-duration:.25s;transition-property:transform;transition-timing-function:ease}.jkl-animated-horizontal-arrows__arrow,.jkl-animated-vertical-arrows__arrow{flex-shrink:0}.jkl-animated-vertical-arrows__slider{flex-direction:column;height:2.6em}.jkl-animated-vertical-arrows__slider[data-show=up]{transform:translateZ(0)}.jkl-animated-vertical-arrows__slider[data-show=down]{transform:translate3d(0,-50%,0)}.jkl-animated-horizontal-arrows__slider{flex-direction:row;width:2.6em}.jkl-animated-horizontal-arrows__slider[data-show=left]{transform:translateZ(0)}.jkl-animated-horizontal-arrows__slider[data-show=right]{transform:translate3d(-50%,0,0)}.jkl-icons-animated__plus{transform-origin:50% 50%;transition-duration:.25s;transition-property:transform;transition-timing-function:cubic-bezier(0,0,.375,1.17)}.jkl-icons-animated__plus--plus{transform:rotate(0)}.jkl-icons-animated__plus--close{transform:rotate(135deg)}.jkl-tooltip-trigger{all:unset}}@layer jokul.components{html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigger:focus{--jkl-icon-weight:400;font-weight:700;letter-spacing:-.014em}.jkl-tooltip-content{--content-padding:var(--jkl-unit-15);--background-color:var(--jkl-color-background-container-inverted);font-size:var(--jkl-font-size-2);font-weight:400;line-height:var(--jkl-line-height-relaxed);--jkl-icon-weight:300;--jkl-icon-size:1.2em;background-color:var(--background-color);color:var(--jkl-color-text-inverted);display:inline-block;max-width:min(19.375rem,100%);min-width:-webkit-min-content;min-width:min-content;padding:var(--content-padding);position:absolute;z-index:10000}@media screen and (forced-colors:active){.jkl-tooltip-content{border:1px solid CanvasText}}.jkl-tooltip-question-button{align-items:baseline;background-color:transparent;border-radius:9999px;border-style:none;color:var(--jkl-color-text-interactive);cursor:pointer;display:inline-flex;outline:0;outline-style:none;padding:0;position:relative;transform:translateY(min(.25em,.375rem));transition-duration:.1s;transition-property:color;transition-timing-function:ease-in}.jkl-tooltip-question-button:active,.jkl-tooltip-question-button:focus,.jkl-tooltip-question-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-tooltip-question-button{border-style:revert;outline:revert;outline-style:revert}.jkl-tooltip-question-button:active,.jkl-tooltip-question-button:focus,.jkl-tooltip-question-button:hover{outline:revert;outline-style:revert}}.jkl-tooltip-question-button:hover{--button-color:var(--jkl-color-text-interactive-hover)}.jkl-tooltip-question-button:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:0}.jkl-tooltip-question-button:after{content:"";left:50%;min-height:44px;min-width:44px;position:absolute;top:50%;translate:-50% -50%}}.jkl-popuptip__content-wrapper:focus{outline:none}@layer jokul.components{.jkl-segmented-control{--jkl-segmented-controls-padding:var(--jkl-unit-10) var(--jkl-unit-20);--jkl-segmented-controls-margin:1.5ch}.jkl-segmented-control .jkl-segmented-control-legend{-webkit-margin-after:.25lh;margin-block-end:.25lh}.jkl-segmented-control .jkl-segmented-control-item{--jkl-segmented-control-border-width:1px;--jkl-segmented-controls-border-radius:2lh;align-items:center;background-color:var(--jkl-color-background-interactive);border:var(--jkl-segmented-control-border-width) solid var(--jkl-color-border-separator);border-radius:0;cursor:pointer;display:inline-flex;position:relative;-webkit-margin-end:calc(var(--jkl-segmented-control-border-width)*-1);margin-inline-end:calc(var(--jkl-segmented-control-border-width)*-1);-webkit-margin-after:.5lh;margin-block-end:.5lh;transition-duration:.25s;transition-property:border background;transition-timing-function:cubic-bezier(0,0,.375,1.17)}.jkl-segmented-control .jkl-segmented-control-item label{cursor:pointer;padding:var(--jkl-segmented-controls-padding)}.jkl-segmented-control .jkl-segmented-control-item:hover{background-color:var(--jkl-color-background-interactive-hover);border-color:var(--jkl-color-border-separator-hover);z-index:2}.jkl-segmented-control .jkl-segmented-control-item:has(input:checked){background-color:var(--jkl-color-background-container-high);border-color:var(--jkl-color-border-separator);z-index:1}.jkl-segmented-control .jkl-segmented-control-item:has(input[data-separated=true]){border-radius:var(--jkl-segmented-controls-border-radius);-webkit-margin-start:var(--jkl-segmented-controls-margin);margin-inline-start:var(--jkl-segmented-controls-margin)}.jkl-segmented-control .jkl-segmented-control-item:has(input[data-separated=true]):first-of-type{-webkit-margin-start:0;margin-inline-start:0}.jkl-segmented-control .jkl-segmented-control-item:has(input[data-separated=true])+span+.jkl-segmented-control-item{border-end-start-radius:var(--jkl-segmented-controls-border-radius);border-start-start-radius:var(--jkl-segmented-controls-border-radius);-webkit-margin-start:var(--jkl-segmented-controls-margin);margin-inline-start:var(--jkl-segmented-controls-margin)}.jkl-segmented-control .jkl-segmented-control-item:first-of-type{border-end-start-radius:var(--jkl-segmented-controls-border-radius);border-start-start-radius:var(--jkl-segmented-controls-border-radius)}.jkl-segmented-control .jkl-segmented-control-item:last-of-type{border-end-end-radius:var(--jkl-segmented-controls-border-radius);border-start-end-radius:var(--jkl-segmented-controls-border-radius)}.jkl-segmented-control .jkl-segmented-control-item:has(+span+.jkl-segmented-control-item>input[data-separated=true]){border-end-end-radius:var(--jkl-segmented-controls-border-radius);border-start-end-radius:var(--jkl-segmented-controls-border-radius)}}
@@ -117,7 +117,7 @@
117
117
  margin-bottom: 0;
118
118
  }
119
119
  .jkl-system-message--dismissed {
120
- animation: jkl-dismiss-usgzp54 400ms forwards;
120
+ animation: jkl-dismiss-uedagj3 400ms forwards;
121
121
  transition: block 400ms 400ms;
122
122
  }
123
123
  .jkl-system-message--info {
@@ -147,7 +147,7 @@
147
147
  border-width: 4px;
148
148
  }
149
149
  }
150
- @keyframes jkl-dismiss-usgzp54 {
150
+ @keyframes jkl-dismiss-uedagj3 {
151
151
  from {
152
152
  opacity: 1;
153
153
  transform: translateY(0);
@@ -1 +1 @@
1
- @layer jokul.components{.jkl-system-message{--jkl-system-message-content-padding:var(--jkl-unit-30);--jkl-system-message-dismiss-button-size:var(--jkl-unit-40);--jkl-system-message-dismiss-button-margin:-0.40625rem -1.125rem -0.40625rem auto;--jkl-system-message-message-margin:0 var(--jkl-spacing-20);--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);transition-behavior:allow-discrete;width:100%}.jkl-system-message__content{font-size:var(--jkl-font-size-3);font-weight:400;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:300;align-items: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%}@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{margin:var(--jkl-system-message-message-margin)}.jkl-system-message__dismiss-button{background-color:transparent;color:inherit;cursor:pointer;display:grid;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:var(--jkl-color-text-interactive-hover)}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button:hover{stroke:ButtonText}.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-usgzp54 .4s forwards;transition:block .4s .4s}.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-usgzp54{0%{display:block;filter:saturate(1);opacity:1;transform:translateY(0)}to{display:none;filter:saturate(.7);opacity:0;transform:translateY(-10%)}}}
1
+ @layer jokul.components{.jkl-system-message{--jkl-system-message-content-padding:var(--jkl-unit-30);--jkl-system-message-dismiss-button-size:var(--jkl-unit-40);--jkl-system-message-dismiss-button-margin:-0.40625rem -1.125rem -0.40625rem auto;--jkl-system-message-message-margin:0 var(--jkl-spacing-20);--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);transition-behavior:allow-discrete;width:100%}.jkl-system-message__content{font-size:var(--jkl-font-size-3);font-weight:400;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:300;align-items: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%}@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{margin:var(--jkl-system-message-message-margin)}.jkl-system-message__dismiss-button{background-color:transparent;color:inherit;cursor:pointer;display:grid;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:var(--jkl-color-text-interactive-hover)}@media screen and (forced-colors:active){.jkl-system-message__dismiss-button:hover{stroke:ButtonText}.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-uedagj3 .4s forwards;transition:block .4s .4s}.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-uedagj3{0%{display:block;filter:saturate(1);opacity:1;transform:translateY(0)}to{display:none;filter:saturate(.7);opacity:0;transform:translateY(-10%)}}}
@@ -135,12 +135,12 @@
135
135
  }
136
136
  .jkl-toast[data-animation=entering],
137
137
  .jkl-toast[data-animation=queued] {
138
- animation: jkl-entering-u19c75a 200ms ease-out forwards;
138
+ animation: jkl-entering-usctbxi 200ms ease-out forwards;
139
139
  }
140
140
  .jkl-toast[data-animation=exiting] {
141
- animation: jkl-exiting-u19c75h 150ms ease-in forwards;
141
+ animation: jkl-exiting-usctbxk 150ms ease-in forwards;
142
142
  }
143
- @keyframes jkl-entering-u19c75a {
143
+ @keyframes jkl-entering-usctbxi {
144
144
  from {
145
145
  opacity: 0;
146
146
  transform: translate3d(0, 50%, 0);
@@ -150,7 +150,7 @@
150
150
  transform: translate3d(0, 0, 0);
151
151
  }
152
152
  }
153
- @keyframes jkl-exiting-u19c75h {
153
+ @keyframes jkl-exiting-usctbxk {
154
154
  from {
155
155
  opacity: 1;
156
156
  transform: translate3d(0, 0, 0);
@@ -1 +1 @@
1
- @layer jokul.components{.jkl-toast-region{background:transparent;bottom:var(--jkl-unit-30);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:var(--jkl-unit-20);min-width:18rem;pointer-events:auto}.jkl-toast-region--left{justify-content:flex-start;left:var(--jkl-unit-30)}.jkl-toast{--background-color:var(--jkl-color-background-container-high);--text-color:var(--jkl-color-text-default);--jkl-toast-padding:var(--jkl-unit-20);align-items:start;background-color:var(--background-color);border-radius:4px;box-sizing:border-box;color:var(--text-color);font-size:var(--jkl-font-size-3);font-weight:400;line-height:var(--jkl-line-height-relaxed);overflow:hidden;padding:var(--jkl-toast-padding);position:relative;width:clamp(15em,100%,min(30rem,85vw));--jkl-icon-weight:300}.jkl-toast__progress{--bar-color:var(--text-color);--track-color:transparent;border-radius:0;inset:0 0 auto;position:absolute}@media screen and (forced-colors:active){.jkl-toast__icon,.jkl-toast__icon path,.jkl-toast__icon svg{stroke:CanvasText}}.jkl-toast:not(:has(.jkl-toast__title)) .jkl-toast__icon{-webkit-margin-before:.0625rem;margin-block-start:.0625rem}.jkl-toast:has(.jkl-toast__title) .jkl-toast__icon{-webkit-margin-before:0;margin-block-start:0}.jkl-toast__content{flex-basis:100vw;flex-grow:1}.jkl-toast__action{margin-top:var(--jkl-unit-15)}.jkl-toast__title{font-size:var(--jkl-font-size-4);font-weight:700;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:400}.jkl-toast__dismiss-button{background-color:transparent;color:inherit;cursor:pointer;padding:0}@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-size:44px;content:"";inset:calc((var(--tap-size) - 100%)/2*-1);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-u19c75a .2s ease-out forwards}.jkl-toast[data-animation=exiting]{animation:jkl-exiting-u19c75h .15s ease-in forwards}@keyframes jkl-entering-u19c75a{0%{opacity:0;transform:translate3d(0,50%,0)}to{opacity:1;transform:translateZ(0)}}@keyframes jkl-exiting-u19c75h{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,50%,0)}}}
1
+ @layer jokul.components{.jkl-toast-region{background:transparent;bottom:var(--jkl-unit-30);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:var(--jkl-unit-20);min-width:18rem;pointer-events:auto}.jkl-toast-region--left{justify-content:flex-start;left:var(--jkl-unit-30)}.jkl-toast{--background-color:var(--jkl-color-background-container-high);--text-color:var(--jkl-color-text-default);--jkl-toast-padding:var(--jkl-unit-20);align-items:start;background-color:var(--background-color);border-radius:4px;box-sizing:border-box;color:var(--text-color);font-size:var(--jkl-font-size-3);font-weight:400;line-height:var(--jkl-line-height-relaxed);overflow:hidden;padding:var(--jkl-toast-padding);position:relative;width:clamp(15em,100%,min(30rem,85vw));--jkl-icon-weight:300}.jkl-toast__progress{--bar-color:var(--text-color);--track-color:transparent;border-radius:0;inset:0 0 auto;position:absolute}@media screen and (forced-colors:active){.jkl-toast__icon,.jkl-toast__icon path,.jkl-toast__icon svg{stroke:CanvasText}}.jkl-toast:not(:has(.jkl-toast__title)) .jkl-toast__icon{-webkit-margin-before:.0625rem;margin-block-start:.0625rem}.jkl-toast:has(.jkl-toast__title) .jkl-toast__icon{-webkit-margin-before:0;margin-block-start:0}.jkl-toast__content{flex-basis:100vw;flex-grow:1}.jkl-toast__action{margin-top:var(--jkl-unit-15)}.jkl-toast__title{font-size:var(--jkl-font-size-4);font-weight:700;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:400}.jkl-toast__dismiss-button{background-color:transparent;color:inherit;cursor:pointer;padding:0}@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-size:44px;content:"";inset:calc((var(--tap-size) - 100%)/2*-1);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-usctbxi .2s ease-out forwards}.jkl-toast[data-animation=exiting]{animation:jkl-exiting-usctbxk .15s ease-in forwards}@keyframes jkl-entering-usctbxi{0%{opacity:0;transform:translate3d(0,50%,0)}to{opacity:1;transform:translateZ(0)}}@keyframes jkl-exiting-usctbxk{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,50%,0)}}}
package/styles/styles.css CHANGED
@@ -481,7 +481,7 @@
481
481
  --color: var(--jkl-color-text-default);
482
482
  }
483
483
  .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 {
484
- animation: 400ms cubic-bezier(0, 0, 0.3, 1) 250ms jkl-support-icon-entrance-uuo87ie forwards;
484
+ animation: 400ms cubic-bezier(0, 0, 0.3, 1) 250ms jkl-support-icon-entrance-ucys3ui forwards;
485
485
  }
486
486
  .jkl-form-support-label--sr-only {
487
487
  border: 0 !important;
@@ -547,7 +547,7 @@
547
547
  .jkl-label:has(+ .jkl-input-group-description) {
548
548
  margin-block-end: var(--jkl-spacing-4);
549
549
  }
550
- @keyframes jkl-support-icon-entrance-uuo87ie {
550
+ @keyframes jkl-support-icon-entrance-ucys3ui {
551
551
  0% {
552
552
  margin-right: 0;
553
553
  opacity: 0;
@@ -766,6 +766,7 @@
766
766
  --jkl-button-padding-icon-button: var(--jkl-unit-10);
767
767
  --jkl-button-tertiary-padding-icon: var(--jkl-unit-05);
768
768
  --jkl-button-text-ink-offset: 0.1em;
769
+ --button-min-width: 9ch;
769
770
  --jkl-icon-weight: var(--jkl-icon-weight-bold);
770
771
  --text-color: var(--jkl-color-text-default);
771
772
  --background-color: transparent;
@@ -796,7 +797,10 @@
796
797
  transition-property: background-color;
797
798
  }
798
799
  .jkl-button:has(.jkl-button__text) {
799
- min-width: 9.5ch;
800
+ min-width: var(--button-min-width);
801
+ }
802
+ .jkl-button:has(.jkl-button__text):has(.jkl-icon) {
803
+ min-width: initial;
800
804
  }
801
805
  .jkl-button:has(.jkl-icon:first-child) {
802
806
  padding-inline-start: var(--jkl-button-padding-icon);
@@ -815,6 +819,7 @@
815
819
  display: flex;
816
820
  flex-direction: row;
817
821
  align-items: center;
822
+ justify-content: center;
818
823
  gap: calc(var(--jkl-unit-base) * 0.25);
819
824
  pointer-events: none;
820
825
  }
@@ -831,7 +836,7 @@
831
836
  }
832
837
  .jkl-button__text {
833
838
  display: block;
834
- width: 100%;
839
+ min-width: 0;
835
840
  max-width: 100%;
836
841
  padding-block-start: var(--jkl-button-text-ink-offset);
837
842
  margin-block-start: calc(var(--jkl-button-text-ink-offset) * -1);
@@ -904,22 +909,22 @@
904
909
  animation: 2500ms linear infinite;
905
910
  }
906
911
  .jkl-loader__dot--left {
907
- animation-name: jkl-loader-left-spin-uuo87ix;
912
+ animation-name: jkl-loader-left-spin-ucys3ve;
908
913
  margin-right: calc(var(--jkl-loader-spacing) * 0.9);
909
914
  }
910
915
  .jkl-loader__dot--middle {
911
- animation-name: jkl-loader-middle-spin-uuo87jb;
916
+ animation-name: jkl-loader-middle-spin-ucys3we;
912
917
  margin-right: var(--jkl-loader-spacing);
913
918
  }
914
919
  .jkl-loader__dot--right {
915
- animation-name: jkl-loader-right-spin-uuo87js;
920
+ animation-name: jkl-loader-right-spin-ucys3wx;
916
921
  }
917
922
  @media screen and (forced-colors: active) {
918
923
  .jkl-loader__dot {
919
924
  background-color: CanvasText;
920
925
  }
921
926
  }
922
- @keyframes jkl-loader-left-spin-uuo87ix {
927
+ @keyframes jkl-loader-left-spin-ucys3ve {
923
928
  0% {
924
929
  transform: rotate(0) scale(0);
925
930
  }
@@ -933,7 +938,7 @@
933
938
  transform: rotate(180deg) scale(0);
934
939
  }
935
940
  }
936
- @keyframes jkl-loader-middle-spin-uuo87jb {
941
+ @keyframes jkl-loader-middle-spin-ucys3we {
937
942
  0% {
938
943
  transform: rotate(20deg) scale(0);
939
944
  }
@@ -950,7 +955,7 @@
950
955
  transform: rotate(200deg) scale(0);
951
956
  }
952
957
  }
953
- @keyframes jkl-loader-right-spin-uuo87js {
958
+ @keyframes jkl-loader-right-spin-ucys3wx {
954
959
  0% {
955
960
  transform: rotate(40deg) scale(0);
956
961
  }
@@ -990,7 +995,7 @@
990
995
  @media screen and (forced-colors: active) {
991
996
  .jkl-skeleton-element {
992
997
  border: 1px solid CanvasText;
993
- animation: 2s ease infinite jkl-blink-uuo87ju;
998
+ animation: 2s ease infinite jkl-blink-ucys3xe;
994
999
  }
995
1000
  }
996
1001
  .jkl-skeleton-input {
@@ -1038,10 +1043,10 @@
1038
1043
  }
1039
1044
  @media screen and (forced-colors: active) {
1040
1045
  .jkl-skeleton-table {
1041
- animation: 2s ease-in-out infinite jkl-blink-uuo87ju;
1046
+ animation: 2s ease-in-out infinite jkl-blink-ucys3xe;
1042
1047
  }
1043
1048
  }
1044
- @keyframes jkl-blink-uuo87ju {
1049
+ @keyframes jkl-blink-ucys3xe {
1045
1050
  0% {
1046
1051
  opacity: 1;
1047
1052
  }
@@ -2145,10 +2150,10 @@
2145
2150
  }
2146
2151
  }
2147
2152
  .jkl-countdown__tracker {
2148
- animation: jkl-downcount-uuo87ky var(--duration) linear forwards;
2153
+ animation: jkl-downcount-ucys3yv var(--duration) linear forwards;
2149
2154
  animation-play-state: var(--play-state, running);
2150
2155
  }
2151
- @keyframes jkl-downcount-uuo87ky {
2156
+ @keyframes jkl-downcount-ucys3yv {
2152
2157
  from {
2153
2158
  width: 100%;
2154
2159
  }
@@ -2513,12 +2518,16 @@
2513
2518
  @layer jokul.components {
2514
2519
  .jkl-expandable {
2515
2520
  background-color: var(--jkl-color-background-container-low);
2516
- border: 1px solid transparent;
2517
2521
  border-radius: var(--border-radius);
2518
2522
  box-sizing: border-box;
2519
2523
  width: 100%;
2520
2524
  overflow: hidden;
2521
2525
  }
2526
+ @media screen and (forced-colors: active) {
2527
+ .jkl-expandable {
2528
+ border: 1px solid CanvasText;
2529
+ }
2530
+ }
2522
2531
  .jkl-expandable__content[data-expanded=true] {
2523
2532
  height: auto;
2524
2533
  }
@@ -2532,13 +2541,13 @@
2532
2541
  padding: var(--jkl-unit-20);
2533
2542
  }
2534
2543
  .jkl-expandable--stroke {
2535
- border-color: var(--jkl-color-border-separator);
2544
+ border: 1px solid var(--jkl-color-border-separator);
2536
2545
  background-color: transparent;
2537
2546
  border-radius: 0;
2538
2547
  border-radius: var(--border-top-left-radius) var(--border-top-right-radius) var(--border-bottom-right-radius) var(--border-bottom-left-radius);
2539
2548
  }
2540
2549
  .jkl-expandable__wrapper {
2541
- --border-radius: 0.25rem;
2550
+ --border-radius: var(--jkl-border-radius-m);
2542
2551
  --outline-offset: 3px;
2543
2552
  --stroke-outline-offset: 3px;
2544
2553
  --border-top-left-radius: var(--border-radius);
@@ -2593,6 +2602,7 @@
2593
2602
  text-align: left;
2594
2603
  cursor: pointer;
2595
2604
  color: var(--jkl-color);
2605
+ -webkit-tap-highlight-color: transparent;
2596
2606
  display: flex;
2597
2607
  gap: 0.5rem;
2598
2608
  align-items: center;
@@ -2662,12 +2672,12 @@
2662
2672
  --jkl-icon-size: 1.2em;
2663
2673
  }
2664
2674
  .jkl-feedback__fade-in {
2665
- animation: jkl-show-uuo87l5 0.25s ease-out;
2675
+ animation: jkl-show-ucys3ze 0.25s ease-out;
2666
2676
  }
2667
2677
  .jkl-feedback__buttons {
2668
2678
  display: flex;
2669
2679
  }
2670
- @keyframes jkl-show-uuo87l5 {
2680
+ @keyframes jkl-show-ucys3ze {
2671
2681
  from {
2672
2682
  transform: translate3d(0, 0.5rem, 0);
2673
2683
  opacity: 0;
@@ -2882,7 +2892,7 @@
2882
2892
  --background-color: var(--jkl-color-background-alert-success);
2883
2893
  }
2884
2894
  .jkl-message--dismissed {
2885
- animation: jkl-dismiss-uuo87lo 400ms ease-in-out forwards;
2895
+ animation: jkl-dismiss-ucys3zh 400ms ease-in-out forwards;
2886
2896
  transition: visibility 0ms 400ms;
2887
2897
  visibility: hidden;
2888
2898
  }
@@ -2904,7 +2914,7 @@
2904
2914
  .jkl-form-error-message {
2905
2915
  padding-bottom: calc(var(--jkl-unit-base) * 5);
2906
2916
  }
2907
- @keyframes jkl-dismiss-uuo87lo {
2917
+ @keyframes jkl-dismiss-ucys3zh {
2908
2918
  from {
2909
2919
  opacity: 1;
2910
2920
  transform: translate3d(0, 0, 0);
@@ -4580,7 +4590,7 @@
4580
4590
  transition-timing-function: ease;
4581
4591
  transition-duration: 150ms;
4582
4592
  }
4583
- @keyframes jkl-downcount-uuo87lr {
4593
+ @keyframes jkl-downcount-ucys400 {
4584
4594
  from {
4585
4595
  width: 100%;
4586
4596
  }
@@ -5084,7 +5094,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
5084
5094
  margin-bottom: 0;
5085
5095
  }
5086
5096
  .jkl-system-message--dismissed {
5087
- animation: jkl-dismiss-uuo87mz 400ms forwards;
5097
+ animation: jkl-dismiss-ucys41b 400ms forwards;
5088
5098
  transition: block 400ms 400ms;
5089
5099
  }
5090
5100
  .jkl-system-message--info {
@@ -5114,7 +5124,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
5114
5124
  border-width: 4px;
5115
5125
  }
5116
5126
  }
5117
- @keyframes jkl-dismiss-uuo87mz {
5127
+ @keyframes jkl-dismiss-ucys41b {
5118
5128
  from {
5119
5129
  opacity: 1;
5120
5130
  transform: translateY(0);
@@ -5951,12 +5961,12 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
5951
5961
  }
5952
5962
  .jkl-toast[data-animation=entering],
5953
5963
  .jkl-toast[data-animation=queued] {
5954
- animation: jkl-entering-uuo87n4 200ms ease-out forwards;
5964
+ animation: jkl-entering-ucys41s 200ms ease-out forwards;
5955
5965
  }
5956
5966
  .jkl-toast[data-animation=exiting] {
5957
- animation: jkl-exiting-uuo87nj 150ms ease-in forwards;
5967
+ animation: jkl-exiting-ucys42l 150ms ease-in forwards;
5958
5968
  }
5959
- @keyframes jkl-entering-uuo87n4 {
5969
+ @keyframes jkl-entering-ucys41s {
5960
5970
  from {
5961
5971
  opacity: 0;
5962
5972
  transform: translate3d(0, 50%, 0);
@@ -5966,7 +5976,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
5966
5976
  transform: translate3d(0, 0, 0);
5967
5977
  }
5968
5978
  }
5969
- @keyframes jkl-exiting-uuo87nj {
5979
+ @keyframes jkl-exiting-ucys42l {
5970
5980
  from {
5971
5981
  opacity: 1;
5972
5982
  transform: translate3d(0, 0, 0);