@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.
- package/package.json +1 -1
- package/styles/components/button/button.css +7 -2
- package/styles/components/button/button.min.css +1 -1
- package/styles/components/button/button.scss +9 -3
- package/styles/components/countdown/countdown.css +2 -2
- package/styles/components/countdown/countdown.min.css +1 -1
- package/styles/components/expander/expandable.css +8 -3
- package/styles/components/expander/expandable.min.css +1 -1
- package/styles/components/expander/expandable.scss +7 -5
- package/styles/components/feedback/feedback.css +2 -2
- package/styles/components/feedback/feedback.min.css +1 -1
- package/styles/components/file-input/file-input.css +16 -11
- package/styles/components/file-input/file-input.min.css +1 -1
- package/styles/components/input-group/input-group.css +2 -2
- package/styles/components/input-group/input-group.min.css +1 -1
- package/styles/components/loader/loader.css +6 -6
- package/styles/components/loader/loader.min.css +1 -1
- package/styles/components/loader/skeleton-loader.css +3 -3
- package/styles/components/loader/skeleton-loader.min.css +1 -1
- package/styles/components/message/message.css +2 -2
- package/styles/components/message/message.min.css +1 -1
- package/styles/components/progress-bar/progress-bar.css +1 -1
- package/styles/components/progress-bar/progress-bar.min.css +1 -1
- package/styles/components/segmented-control/segmented-control.css +2 -2
- package/styles/components/segmented-control/segmented-control.min.css +1 -1
- package/styles/components/system-message/system-message.css +2 -2
- package/styles/components/system-message/system-message.min.css +1 -1
- package/styles/components/toast/toast.css +4 -4
- package/styles/components/toast/toast.min.css +1 -1
- package/styles/styles.css +39 -29
- 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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
138
|
+
animation: jkl-entering-usctbxi 200ms ease-out forwards;
|
|
139
139
|
}
|
|
140
140
|
.jkl-toast[data-animation=exiting] {
|
|
141
|
-
animation: jkl-exiting-
|
|
141
|
+
animation: jkl-exiting-usctbxk 150ms ease-in forwards;
|
|
142
142
|
}
|
|
143
|
-
@keyframes jkl-entering-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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:
|
|
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:
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
1046
|
+
animation: 2s ease-in-out infinite jkl-blink-ucys3xe;
|
|
1042
1047
|
}
|
|
1043
1048
|
}
|
|
1044
|
-
@keyframes jkl-blink-
|
|
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-
|
|
2153
|
+
animation: jkl-downcount-ucys3yv var(--duration) linear forwards;
|
|
2149
2154
|
animation-play-state: var(--play-state, running);
|
|
2150
2155
|
}
|
|
2151
|
-
@keyframes jkl-downcount-
|
|
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
|
|
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:
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
5964
|
+
animation: jkl-entering-ucys41s 200ms ease-out forwards;
|
|
5955
5965
|
}
|
|
5956
5966
|
.jkl-toast[data-animation=exiting] {
|
|
5957
|
-
animation: jkl-exiting-
|
|
5967
|
+
animation: jkl-exiting-ucys42l 150ms ease-in forwards;
|
|
5958
5968
|
}
|
|
5959
|
-
@keyframes jkl-entering-
|
|
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-
|
|
5979
|
+
@keyframes jkl-exiting-ucys42l {
|
|
5970
5980
|
from {
|
|
5971
5981
|
opacity: 1;
|
|
5972
5982
|
transform: translate3d(0, 0, 0);
|