@fremtind/jokul 5.0.4 → 5.0.5

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 (57) hide show
  1. package/build/build-stats.html +1 -1
  2. package/build/cjs/components/menu/Menu.cjs +1 -1
  3. package/build/cjs/components/menu/Menu.cjs.map +1 -1
  4. package/build/cjs/components/popover/Popover.cjs +1 -1
  5. package/build/cjs/components/popover/Popover.cjs.map +1 -1
  6. package/build/cjs/components/popover/types.d.cts +10 -0
  7. package/build/cjs/components/select/Select.cjs +1 -1
  8. package/build/cjs/components/select/Select.cjs.map +1 -1
  9. package/build/es/components/menu/Menu.js +1 -1
  10. package/build/es/components/menu/Menu.js.map +1 -1
  11. package/build/es/components/popover/Popover.js +1 -1
  12. package/build/es/components/popover/Popover.js.map +1 -1
  13. package/build/es/components/popover/types.d.ts +10 -0
  14. package/build/es/components/select/Select.js +1 -1
  15. package/build/es/components/select/Select.js.map +1 -1
  16. package/package.json +3 -1
  17. package/src/tokens/metadata/color.metadata.dark.json +165 -0
  18. package/src/tokens/metadata/color.metadata.light.json +165 -0
  19. package/src/tokens/metadata/color.metadata.saturated.dark.json +165 -0
  20. package/src/tokens/metadata/color.metadata.saturated.light.json +165 -0
  21. package/styles/components/countdown/countdown.css +2 -2
  22. package/styles/components/countdown/countdown.min.css +1 -1
  23. package/styles/components/feedback/feedback.css +2 -2
  24. package/styles/components/feedback/feedback.min.css +1 -1
  25. package/styles/components/file-input/file-input.css +9 -9
  26. package/styles/components/file-input/file-input.min.css +1 -1
  27. package/styles/components/help/help.css +2 -1
  28. package/styles/components/help/help.min.css +1 -1
  29. package/styles/components/help/help.scss +2 -1
  30. package/styles/components/input-group/input-group.css +2 -2
  31. package/styles/components/input-group/input-group.min.css +1 -1
  32. package/styles/components/loader/loader.css +6 -6
  33. package/styles/components/loader/loader.min.css +1 -1
  34. package/styles/components/loader/skeleton-loader.css +3 -3
  35. package/styles/components/loader/skeleton-loader.min.css +1 -1
  36. package/styles/components/menu/_menu-item.scss +1 -1
  37. package/styles/components/menu/menu.css +3 -2
  38. package/styles/components/menu/menu.min.css +1 -1
  39. package/styles/components/menu/menu.scss +2 -1
  40. package/styles/components/message/message.css +2 -2
  41. package/styles/components/message/message.min.css +1 -1
  42. package/styles/components/progress-bar/progress-bar.css +1 -1
  43. package/styles/components/progress-bar/progress-bar.min.css +1 -1
  44. package/styles/components/segmented-control/segmented-control.css +3 -2
  45. package/styles/components/segmented-control/segmented-control.min.css +1 -1
  46. package/styles/components/select/select.css +0 -8
  47. package/styles/components/select/select.min.css +1 -1
  48. package/styles/components/select/select.scss +0 -9
  49. package/styles/components/system-message/system-message.css +2 -2
  50. package/styles/components/system-message/system-message.min.css +1 -1
  51. package/styles/components/toast/toast.css +4 -4
  52. package/styles/components/toast/toast.min.css +1 -1
  53. package/styles/components/tooltip/tooltip.css +1 -0
  54. package/styles/components/tooltip/tooltip.min.css +1 -1
  55. package/styles/components/tooltip/tooltip.scss +1 -0
  56. package/styles/components.css +30 -35
  57. package/styles/components.min.css +1 -1
@@ -136,15 +136,8 @@
136
136
  }
137
137
 
138
138
  &__options-menu {
139
- position: absolute;
140
- left: jkl.rem(-1px);
141
- right: jkl.rem(-1px);
142
- top: 100%;
143
- z-index: jkl.$z-index--dropdown;
144
-
145
139
  background-color: var(--jkl-color-background-container);
146
140
  border: jkl.rem(2px) solid var(--jkl-color-border-strong);
147
- border-top: none;
148
141
  border-radius: 0 0 var(--border-radius) var(--border-radius);
149
142
  box-sizing: border-box;
150
143
  // Strekker seg ut over kantene på trigger-knappen for å dekke
@@ -231,8 +224,6 @@
231
224
  &--open {
232
225
  .jkl-select__search-input,
233
226
  .jkl-select__button {
234
- border-bottom-left-radius: 0;
235
- border-bottom-right-radius: 0;
236
227
  border-color: var(--jkl-color-border-strong);
237
228
  background-color: var(--jkl-color-background-container);
238
229
  box-shadow: 0 0 0 jkl.rem(1px) var(--jkl-color-border-strong);
@@ -120,7 +120,7 @@
120
120
  margin-bottom: 0;
121
121
  }
122
122
  .jkl-system-message--dismissed {
123
- animation: jkl-dismiss-uahl5h1 var(--jkl-motion-timing-lazy) forwards;
123
+ animation: jkl-dismiss-uvwo3fk var(--jkl-motion-timing-lazy) forwards;
124
124
  transition: block var(--jkl-motion-timing-lazy) var(--jkl-motion-timing-lazy);
125
125
  }
126
126
  .jkl-system-message--info {
@@ -158,7 +158,7 @@
158
158
  border-width: 4px;
159
159
  }
160
160
  }
161
- @keyframes jkl-dismiss-uahl5h1 {
161
+ @keyframes jkl-dismiss-uvwo3fk {
162
162
  from {
163
163
  opacity: 1;
164
164
  transform: translateY(0);
@@ -1 +1 @@
1
- @layer jokul.components{.jkl-system-message{--jkl-system-message-icon-height:var(--jkl-unit-30);--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-unit-20);--icon-color:var(--jkl-color-background-contrast);--background-color:var(--jkl-color-background-container);--text-color:var(--jkl-color-text-default);background-color:var(--background-color);box-sizing:border-box;color:var(--text-color);transition-behavior:allow-discrete;width:100%}.jkl-system-message__content{align-items:flex-start;box-sizing:border-box;display:grid;grid-template-columns:-webkit-min-content 1fr -webkit-min-content;grid-template-columns:min-content 1fr min-content;margin:0 auto;padding:var(--jkl-system-message-content-padding);width:100%}.jkl-system-message__icon{color:var(--icon-color);flex-shrink:0;height:var(--jkl-system-message-icon-height)}@media screen and (forced-colors:active){.jkl-system-message__icon,.jkl-system-message__icon path,.jkl-system-message__icon svg{stroke:CanvasText}}.jkl-system-message__message{font:var(--jkl-text-style-text-medium);margin:var(--jkl-system-message-message-margin)}.jkl-system-message__dismiss-button{background-color:transparent;color:inherit;display:grid;flex-shrink:0;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-subdued)}@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-strong);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-uahl5h1 var(--jkl-motion-timing-lazy) forwards;transition:block var(--jkl-motion-timing-lazy) var(--jkl-motion-timing-lazy)}.jkl-system-message--info{--background-color:var(--jkl-color-info-background-container);--text-color:var(--jkl-color-info-text-default);--icon-color:var(--jkl-color-info-background-contrast)}.jkl-system-message--warning{--background-color:var(--jkl-color-warning-background-container);--text-color:var(--jkl-color-warning-text-default);--icon-color:var(--jkl-color-warning-background-contrast)}.jkl-system-message--error{--background-color:var(--jkl-color-error-background-container);--text-color:var(--jkl-color-error-text-default);--icon-color:var(--jkl-color-error-background-contrast)}.jkl-system-message--success{--background-color:var(--jkl-color-success-background-container);--text-color:var(--jkl-color-success-text-default);--icon-color:var(--jkl-color-success-background-contrast)}@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-uahl5h1{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-icon-height:var(--jkl-unit-30);--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-unit-20);--icon-color:var(--jkl-color-background-contrast);--background-color:var(--jkl-color-background-container);--text-color:var(--jkl-color-text-default);background-color:var(--background-color);box-sizing:border-box;color:var(--text-color);transition-behavior:allow-discrete;width:100%}.jkl-system-message__content{align-items:flex-start;box-sizing:border-box;display:grid;grid-template-columns:-webkit-min-content 1fr -webkit-min-content;grid-template-columns:min-content 1fr min-content;margin:0 auto;padding:var(--jkl-system-message-content-padding);width:100%}.jkl-system-message__icon{color:var(--icon-color);flex-shrink:0;height:var(--jkl-system-message-icon-height)}@media screen and (forced-colors:active){.jkl-system-message__icon,.jkl-system-message__icon path,.jkl-system-message__icon svg{stroke:CanvasText}}.jkl-system-message__message{font:var(--jkl-text-style-text-medium);margin:var(--jkl-system-message-message-margin)}.jkl-system-message__dismiss-button{background-color:transparent;color:inherit;display:grid;flex-shrink:0;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-subdued)}@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-strong);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-uvwo3fk var(--jkl-motion-timing-lazy) forwards;transition:block var(--jkl-motion-timing-lazy) var(--jkl-motion-timing-lazy)}.jkl-system-message--info{--background-color:var(--jkl-color-info-background-container);--text-color:var(--jkl-color-info-text-default);--icon-color:var(--jkl-color-info-background-contrast)}.jkl-system-message--warning{--background-color:var(--jkl-color-warning-background-container);--text-color:var(--jkl-color-warning-text-default);--icon-color:var(--jkl-color-warning-background-contrast)}.jkl-system-message--error{--background-color:var(--jkl-color-error-background-container);--text-color:var(--jkl-color-error-text-default);--icon-color:var(--jkl-color-error-background-contrast)}.jkl-system-message--success{--background-color:var(--jkl-color-success-background-container);--text-color:var(--jkl-color-success-text-default);--icon-color:var(--jkl-color-success-background-contrast)}@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-uvwo3fk{0%{display:block;filter:saturate(1);opacity:1;transform:translateY(0)}to{display:none;filter:saturate(.7);opacity:0;transform:translateY(-10%)}}}
@@ -161,12 +161,12 @@
161
161
  }
162
162
  .jkl-toast[data-animation=entering],
163
163
  .jkl-toast[data-animation=queued] {
164
- animation: jkl-entering-u05ogc5 var(--jkl-motion-timing-polite) var(--jkl-motion-easing-entrance) forwards;
164
+ animation: jkl-entering-uhkvpon var(--jkl-motion-timing-polite) var(--jkl-motion-easing-entrance) forwards;
165
165
  }
166
166
  .jkl-toast[data-animation=exiting] {
167
- animation: jkl-exiting-u05ogd1 var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards;
167
+ animation: jkl-exiting-uhkvpoy var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards;
168
168
  }
169
- @keyframes jkl-entering-u05ogc5 {
169
+ @keyframes jkl-entering-uhkvpon {
170
170
  from {
171
171
  opacity: 0;
172
172
  transform: translate3d(0, 50%, 0);
@@ -176,7 +176,7 @@
176
176
  transform: translate3d(0, 0, 0);
177
177
  }
178
178
  }
179
- @keyframes jkl-exiting-u05ogd1 {
179
+ @keyframes jkl-exiting-uhkvpoy {
180
180
  from {
181
181
  opacity: 1;
182
182
  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);--text-color:var(--jkl-color-text-default);--border-color:transparent;--jkl-toast-padding:var(--jkl-unit-20);align-items:start;background-color:var(--background-color);border:1px solid var(--border-color);border-radius:var(--jkl-border-radius-s);box-sizing:border-box;color:var(--text-color);font:var(--jkl-text-style-paragraph-medium);overflow:hidden;padding:var(--jkl-toast-padding);position:relative;width:clamp(15em,100%,min(30rem,85vw))}.jkl-toast__progress{inset:0 0 auto;position:absolute}.jkl-toast .jkl-countdown{--track-color:transparent;--bar-color:var(--jkl-color-background-contrast);border-radius:0}@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:var(--jkl-text-style-heading-5)}.jkl-toast__dismiss-button{background-color:transparent;color:inherit;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--info{--background-color:var(--jkl-color-info-background-container);--text-color:var(--jkl-color-info-text-default);--border-color:var(--jkl-color-info-border-subdued)}.jkl-toast--info .jkl-countdown{--bar-color:var(--jkl-color-info-background-contrast)}.jkl-toast--info .jkl-toast__icon{color:var(--jkl-color-info-background-contrast)}.jkl-toast--warning{--background-color:var(--jkl-color-warning-background-container);--text-color:var(--jkl-color-warning-text-default);--border-color:var(--jkl-color-warning-border-subdued)}.jkl-toast--warning .jkl-countdown{--bar-color:var(--jkl-color-warning-background-contrast)}.jkl-toast--warning .jkl-toast__icon{color:var(--jkl-color-warning-background-contrast)}.jkl-toast--error{--background-color:var(--jkl-color-error-background-container);--text-color:var(--jkl-color-error-text-default);--border-color:var(--jkl-color-error-border-subdued)}.jkl-toast--error .jkl-countdown{--bar-color:var(--jkl-color-error-background-contrast)}.jkl-toast--error .jkl-toast__icon{color:var(--jkl-color-error-background-contrast)}.jkl-toast--success{--background-color:var(--jkl-color-success-background-container);--text-color:var(--jkl-color-success-text-default);--border-color:var(--jkl-color-success-border-subdued)}.jkl-toast--success .jkl-countdown{--bar-color:var(--jkl-color-success-background-contrast)}.jkl-toast--success .jkl-toast__icon{color:var(--jkl-color-success-background-contrast)}@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-u05ogc5 var(--jkl-motion-timing-polite) var(--jkl-motion-easing-entrance) forwards}.jkl-toast[data-animation=exiting]{animation:jkl-exiting-u05ogd1 var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards}@keyframes jkl-entering-u05ogc5{0%{opacity:0;transform:translate3d(0,50%,0)}to{opacity:1;transform:translateZ(0)}}@keyframes jkl-exiting-u05ogd1{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);--text-color:var(--jkl-color-text-default);--border-color:transparent;--jkl-toast-padding:var(--jkl-unit-20);align-items:start;background-color:var(--background-color);border:1px solid var(--border-color);border-radius:var(--jkl-border-radius-s);box-sizing:border-box;color:var(--text-color);font:var(--jkl-text-style-paragraph-medium);overflow:hidden;padding:var(--jkl-toast-padding);position:relative;width:clamp(15em,100%,min(30rem,85vw))}.jkl-toast__progress{inset:0 0 auto;position:absolute}.jkl-toast .jkl-countdown{--track-color:transparent;--bar-color:var(--jkl-color-background-contrast);border-radius:0}@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:var(--jkl-text-style-heading-5)}.jkl-toast__dismiss-button{background-color:transparent;color:inherit;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--info{--background-color:var(--jkl-color-info-background-container);--text-color:var(--jkl-color-info-text-default);--border-color:var(--jkl-color-info-border-subdued)}.jkl-toast--info .jkl-countdown{--bar-color:var(--jkl-color-info-background-contrast)}.jkl-toast--info .jkl-toast__icon{color:var(--jkl-color-info-background-contrast)}.jkl-toast--warning{--background-color:var(--jkl-color-warning-background-container);--text-color:var(--jkl-color-warning-text-default);--border-color:var(--jkl-color-warning-border-subdued)}.jkl-toast--warning .jkl-countdown{--bar-color:var(--jkl-color-warning-background-contrast)}.jkl-toast--warning .jkl-toast__icon{color:var(--jkl-color-warning-background-contrast)}.jkl-toast--error{--background-color:var(--jkl-color-error-background-container);--text-color:var(--jkl-color-error-text-default);--border-color:var(--jkl-color-error-border-subdued)}.jkl-toast--error .jkl-countdown{--bar-color:var(--jkl-color-error-background-contrast)}.jkl-toast--error .jkl-toast__icon{color:var(--jkl-color-error-background-contrast)}.jkl-toast--success{--background-color:var(--jkl-color-success-background-container);--text-color:var(--jkl-color-success-text-default);--border-color:var(--jkl-color-success-border-subdued)}.jkl-toast--success .jkl-countdown{--bar-color:var(--jkl-color-success-background-contrast)}.jkl-toast--success .jkl-toast__icon{color:var(--jkl-color-success-background-contrast)}@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-uhkvpon var(--jkl-motion-timing-polite) var(--jkl-motion-easing-entrance) forwards}.jkl-toast[data-animation=exiting]{animation:jkl-exiting-uhkvpoy var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards}@keyframes jkl-entering-uhkvpon{0%{opacity:0;transform:translate3d(0,50%,0)}to{opacity:1;transform:translateZ(0)}}@keyframes jkl-exiting-uhkvpoy{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,50%,0)}}}
@@ -17,6 +17,7 @@
17
17
  background-color: var(--background-color);
18
18
  color: var(--jkl-color-text-on-contrast);
19
19
  display: inline-block;
20
+ border-radius: var(--jkl-border-radius-s);
20
21
  min-width: min-content;
21
22
  max-width: min(19.375rem, 100%);
22
23
  padding: var(--content-padding);
@@ -1 +1 @@
1
- @layer jokul.components{.jkl-tooltip-trigger{all:unset}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigger:focus{--jkl-icon-weight:400;font-weight:var(--jkl-font-weight-bold);letter-spacing:-.014em}.jkl-tooltip-content{--content-padding:var(--jkl-unit-15);--background-color:var(--jkl-color-background-contrast);background-color:var(--background-color);color:var(--jkl-color-text-on-contrast);display:inline-block;font:var(--jkl-text-style-paragraph-small);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-default);cursor:pointer;display:inline-flex;outline:0;outline-style:none;padding:0;position:relative;transform:translateY(min(.25em,.375rem));transition-duration:var(--jkl-motion-timing-snappy);transition-property:color;transition-timing-function:var(--jkl-motion-easing-exit)}.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{color:var(--jkl-color-text-subdued)}.jkl-tooltip-question-button:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:0}.jkl-tooltip-question-button:after{content:"";left:50%;min-height:44px;min-width:44px;position:absolute;top:50%;translate:-50% -50%}}
1
+ @layer jokul.components{.jkl-tooltip-trigger{all:unset}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigger:focus{--jkl-icon-weight:400;font-weight:var(--jkl-font-weight-bold);letter-spacing:-.014em}.jkl-tooltip-content{--content-padding:var(--jkl-unit-15);--background-color:var(--jkl-color-background-contrast);background-color:var(--background-color);border-radius:var(--jkl-border-radius-s);color:var(--jkl-color-text-on-contrast);display:inline-block;font:var(--jkl-text-style-paragraph-small);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-default);cursor:pointer;display:inline-flex;outline:0;outline-style:none;padding:0;position:relative;transform:translateY(min(.25em,.375rem));transition-duration:var(--jkl-motion-timing-snappy);transition-property:color;transition-timing-function:var(--jkl-motion-easing-exit)}.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{color:var(--jkl-color-text-subdued)}.jkl-tooltip-question-button:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:0}.jkl-tooltip-question-button:after{content:"";left:50%;min-height:44px;min-width:44px;position:absolute;top:50%;translate:-50% -50%}}
@@ -24,6 +24,7 @@ $_focus-ring-width: jkl.rem(2px);
24
24
  background-color: var(--background-color);
25
25
  color: var(--jkl-color-text-on-contrast);
26
26
  display: inline-block;
27
+ border-radius: var(--jkl-border-radius-s);
27
28
  min-width: min-content;
28
29
  max-width: min(jkl.rem(310px),
29
30
  100%); // 10px mindre enn smaleste støttede skjerm
@@ -433,7 +433,7 @@
433
433
  --color: var(--jkl-color-text-default);
434
434
  }
435
435
  .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 {
436
- animation: var(--jkl-motion-timing-lazy) cubic-bezier(0, 0, 0.3, 1) var(--jkl-motion-timing-expressive) jkl-support-icon-entrance-ugips9c forwards;
436
+ animation: var(--jkl-motion-timing-lazy) cubic-bezier(0, 0, 0.3, 1) var(--jkl-motion-timing-expressive) jkl-support-icon-entrance-uumgn13 forwards;
437
437
  }
438
438
  .jkl-form-support-label--sr-only {
439
439
  border: 0 !important;
@@ -487,7 +487,7 @@
487
487
  .jkl-label:has(+ .jkl-input-group-description) {
488
488
  margin-block-end: var(--jkl-spacing-4);
489
489
  }
490
- @keyframes jkl-support-icon-entrance-ugips9c {
490
+ @keyframes jkl-support-icon-entrance-uumgn13 {
491
491
  0% {
492
492
  margin-right: 0;
493
493
  opacity: 0;
@@ -540,6 +540,7 @@
540
540
  background-color: var(--background-color);
541
541
  color: var(--jkl-color-text-on-contrast);
542
542
  display: inline-block;
543
+ border-radius: var(--jkl-border-radius-s);
543
544
  min-width: min-content;
544
545
  max-width: min(19.375rem, 100%);
545
546
  padding: var(--content-padding);
@@ -846,22 +847,22 @@
846
847
  animation: 2500ms linear infinite;
847
848
  }
848
849
  .jkl-loader__dot--left {
849
- animation-name: jkl-loader-left-spin-ugipsac;
850
+ animation-name: jkl-loader-left-spin-uumgn1i;
850
851
  margin-right: calc(var(--jkl-loader-spacing) * 0.9);
851
852
  }
852
853
  .jkl-loader__dot--middle {
853
- animation-name: jkl-loader-middle-spin-ugipsbb;
854
+ animation-name: jkl-loader-middle-spin-uumgn1z;
854
855
  margin-right: var(--jkl-loader-spacing);
855
856
  }
856
857
  .jkl-loader__dot--right {
857
- animation-name: jkl-loader-right-spin-ugipsbd;
858
+ animation-name: jkl-loader-right-spin-uumgn2n;
858
859
  }
859
860
  @media screen and (forced-colors: active) {
860
861
  .jkl-loader__dot {
861
862
  background-color: CanvasText;
862
863
  }
863
864
  }
864
- @keyframes jkl-loader-left-spin-ugipsac {
865
+ @keyframes jkl-loader-left-spin-uumgn1i {
865
866
  0% {
866
867
  transform: rotate(0) scale(0);
867
868
  }
@@ -875,7 +876,7 @@
875
876
  transform: rotate(180deg) scale(0);
876
877
  }
877
878
  }
878
- @keyframes jkl-loader-middle-spin-ugipsbb {
879
+ @keyframes jkl-loader-middle-spin-uumgn1z {
879
880
  0% {
880
881
  transform: rotate(20deg) scale(0);
881
882
  }
@@ -892,7 +893,7 @@
892
893
  transform: rotate(200deg) scale(0);
893
894
  }
894
895
  }
895
- @keyframes jkl-loader-right-spin-ugipsbd {
896
+ @keyframes jkl-loader-right-spin-uumgn2n {
896
897
  0% {
897
898
  transform: rotate(40deg) scale(0);
898
899
  }
@@ -932,7 +933,7 @@
932
933
  @media screen and (forced-colors: active) {
933
934
  .jkl-skeleton-element {
934
935
  border: 1px solid CanvasText;
935
- animation: 2s ease infinite jkl-blink-ugipsc0;
936
+ animation: 2s ease infinite jkl-blink-uumgn2s;
936
937
  }
937
938
  }
938
939
  .jkl-skeleton-input {
@@ -980,10 +981,10 @@
980
981
  }
981
982
  @media screen and (forced-colors: active) {
982
983
  .jkl-skeleton-table {
983
- animation: 2s ease-in-out infinite jkl-blink-ugipsc0;
984
+ animation: 2s ease-in-out infinite jkl-blink-uumgn2s;
984
985
  }
985
986
  }
986
- @keyframes jkl-blink-ugipsc0 {
987
+ @keyframes jkl-blink-uumgn2s {
987
988
  0% {
988
989
  opacity: 1;
989
990
  }
@@ -2121,10 +2122,10 @@
2121
2122
  }
2122
2123
  }
2123
2124
  .jkl-countdown__tracker {
2124
- animation: jkl-downcount-ugipsd8 var(--duration) linear forwards;
2125
+ animation: jkl-downcount-uumgn3u var(--duration) linear forwards;
2125
2126
  animation-play-state: var(--play-state, running);
2126
2127
  }
2127
- @keyframes jkl-downcount-ugipsd8 {
2128
+ @keyframes jkl-downcount-uumgn3u {
2128
2129
  from {
2129
2130
  width: 100%;
2130
2131
  }
@@ -2625,12 +2626,12 @@
2625
2626
  font: var(--jkl-text-style-paragraph-small);
2626
2627
  }
2627
2628
  .jkl-feedback__fade-in {
2628
- animation: jkl-show-ugipsdr 0.25s ease-out;
2629
+ animation: jkl-show-uumgn4b 0.25s ease-out;
2629
2630
  }
2630
2631
  .jkl-feedback__buttons {
2631
2632
  display: flex;
2632
2633
  }
2633
- @keyframes jkl-show-ugipsdr {
2634
+ @keyframes jkl-show-uumgn4b {
2634
2635
  from {
2635
2636
  transform: translate3d(0, 0.5rem, 0);
2636
2637
  opacity: 0;
@@ -2842,7 +2843,7 @@
2842
2843
  --icon-color: var(--jkl-color-success-background-contrast);
2843
2844
  }
2844
2845
  .jkl-message--dismissed {
2845
- animation: jkl-dismiss-ugipsdt var(--jkl-motion-timing-lazy) ease-in-out forwards;
2846
+ animation: jkl-dismiss-uumgn4l var(--jkl-motion-timing-lazy) ease-in-out forwards;
2846
2847
  transition: visibility 0ms var(--jkl-motion-timing-lazy);
2847
2848
  visibility: hidden;
2848
2849
  }
@@ -2864,7 +2865,7 @@
2864
2865
  .jkl-form-error-message {
2865
2866
  padding-bottom: var(--jkl-unit-50);
2866
2867
  }
2867
- @keyframes jkl-dismiss-ugipsdt {
2868
+ @keyframes jkl-dismiss-uumgn4l {
2868
2869
  from {
2869
2870
  opacity: 1;
2870
2871
  transform: translate3d(0, 0, 0);
@@ -3638,7 +3639,7 @@
3638
3639
  @layer jokul.components {
3639
3640
  .jkl-menu-item {
3640
3641
  --jkl-menu-item-height: var(--jkl-unit-60);
3641
- --jkl-menu-item-padding: var(--jkl-unit-15) var(--jkl-unit-30);
3642
+ --jkl-menu-item-padding: var(--jkl-unit-15) var(--jkl-unit-20);
3642
3643
  --background-color: transparent;
3643
3644
  background-color: var(--background-color);
3644
3645
  color: var(--jkl-color-text-default);
@@ -3722,9 +3723,10 @@
3722
3723
  align-items: flex-start;
3723
3724
  flex-wrap: nowrap;
3724
3725
  box-shadow: 0 0.25rem 1.25rem rgba(49, 48, 48, 0.2);
3725
- border-radius: 0.125rem;
3726
+ border-radius: var(--jkl-border-radius-s);
3726
3727
  border: 2px solid var(--border-color);
3727
3728
  z-index: 7000;
3729
+ padding-block: var(--jkl-unit-15);
3728
3730
  }
3729
3731
  .jkl-menu:focus-visible {
3730
3732
  outline: none;
@@ -4250,14 +4252,8 @@
4250
4252
  color: var(--jkl-color-error-text-default);
4251
4253
  }
4252
4254
  .jkl-select__options-menu {
4253
- position: absolute;
4254
- left: -0.0625rem;
4255
- right: -0.0625rem;
4256
- top: 100%;
4257
- z-index: 7000;
4258
4255
  background-color: var(--jkl-color-background-container);
4259
4256
  border: 0.125rem solid var(--jkl-color-border-strong);
4260
- border-top: none;
4261
4257
  border-radius: 0 0 var(--border-radius) var(--border-radius);
4262
4258
  box-sizing: border-box;
4263
4259
  margin-inline: -0.0625rem;
@@ -4320,8 +4316,6 @@
4320
4316
  }
4321
4317
  .jkl-select--open .jkl-select__search-input,
4322
4318
  .jkl-select--open .jkl-select__button {
4323
- border-bottom-left-radius: 0;
4324
- border-bottom-right-radius: 0;
4325
4319
  border-color: var(--jkl-color-border-strong);
4326
4320
  background-color: var(--jkl-color-background-container);
4327
4321
  box-shadow: 0 0 0 0.0625rem var(--jkl-color-border-strong);
@@ -4465,7 +4459,7 @@
4465
4459
  transition-timing-function: var(--jkl-motion-easing-standard);
4466
4460
  transition-duration: var(--jkl-motion-timing-productive);
4467
4461
  }
4468
- @keyframes jkl-downcount-ugipse6 {
4462
+ @keyframes jkl-downcount-uumgn5e {
4469
4463
  from {
4470
4464
  width: 100%;
4471
4465
  }
@@ -4959,7 +4953,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
4959
4953
  margin-bottom: 0;
4960
4954
  }
4961
4955
  .jkl-system-message--dismissed {
4962
- animation: jkl-dismiss-ugipsen var(--jkl-motion-timing-lazy) forwards;
4956
+ animation: jkl-dismiss-uumgn6x var(--jkl-motion-timing-lazy) forwards;
4963
4957
  transition: block var(--jkl-motion-timing-lazy) var(--jkl-motion-timing-lazy);
4964
4958
  }
4965
4959
  .jkl-system-message--info {
@@ -4997,7 +4991,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
4997
4991
  border-width: 4px;
4998
4992
  }
4999
4993
  }
5000
- @keyframes jkl-dismiss-ugipsen {
4994
+ @keyframes jkl-dismiss-uumgn6x {
5001
4995
  from {
5002
4996
  opacity: 1;
5003
4997
  transform: translateY(0);
@@ -5825,12 +5819,12 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
5825
5819
  }
5826
5820
  .jkl-toast[data-animation=entering],
5827
5821
  .jkl-toast[data-animation=queued] {
5828
- animation: jkl-entering-ugipsfm var(--jkl-motion-timing-polite) var(--jkl-motion-easing-entrance) forwards;
5822
+ animation: jkl-entering-uumgn7v var(--jkl-motion-timing-polite) var(--jkl-motion-easing-entrance) forwards;
5829
5823
  }
5830
5824
  .jkl-toast[data-animation=exiting] {
5831
- animation: jkl-exiting-ugipsg9 var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards;
5825
+ animation: jkl-exiting-uumgn84 var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards;
5832
5826
  }
5833
- @keyframes jkl-entering-ugipsfm {
5827
+ @keyframes jkl-entering-uumgn7v {
5834
5828
  from {
5835
5829
  opacity: 0;
5836
5830
  transform: translate3d(0, 50%, 0);
@@ -5840,7 +5834,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
5840
5834
  transform: translate3d(0, 0, 0);
5841
5835
  }
5842
5836
  }
5843
- @keyframes jkl-exiting-ugipsg9 {
5837
+ @keyframes jkl-exiting-uumgn84 {
5844
5838
  from {
5845
5839
  opacity: 1;
5846
5840
  transform: translate3d(0, 0, 0);
@@ -7508,11 +7502,12 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-toggle-slider:
7508
7502
  .jkl-help-popover {
7509
7503
  width: max-content;
7510
7504
  max-width: min(40ch, 80vw);
7511
- padding: var(--jkl-unit-30);
7505
+ padding: var(--jkl-unit-15);
7512
7506
  margin: var(--jkl-unit-05);
7513
7507
  position-anchor: --trigger;
7514
7508
  background-color: var(--jkl-color-background-contrast);
7515
7509
  color: var(--jkl-color-text-on-contrast);
7510
+ border-radius: var(--jkl-border-radius-s);
7516
7511
  anchor-name: --help-box;
7517
7512
  }
7518
7513
  .jkl-help-popover[data-position=top] {