@fremtind/jokul 0.38.0 → 0.40.0

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 (87) hide show
  1. package/build/build-stats.html +1 -1
  2. package/build/cjs/components/expander/Expander.cjs +1 -1
  3. package/build/cjs/components/expander/Expander.cjs.map +1 -1
  4. package/build/cjs/components/file-input/File.cjs +1 -1
  5. package/build/cjs/components/file-input/File.cjs.map +1 -1
  6. package/build/cjs/components/icon/icons/OpenInNewIcon.cjs +2 -0
  7. package/build/cjs/components/icon/icons/OpenInNewIcon.cjs.map +1 -0
  8. package/build/cjs/components/icon/icons/OpenInNewIcon.d.cts +2 -0
  9. package/build/cjs/components/icon/index.cjs +1 -1
  10. package/build/cjs/components/icon/index.d.cts +4 -3
  11. package/build/cjs/components/index.cjs +1 -1
  12. package/build/cjs/components/link/Link.cjs +1 -1
  13. package/build/cjs/components/link/Link.cjs.map +1 -1
  14. package/build/cjs/components/link/NavLink.cjs +1 -1
  15. package/build/cjs/components/link/NavLink.cjs.map +1 -1
  16. package/build/cjs/core/index.cjs +1 -1
  17. package/build/cjs/core/index.d.cts +1 -0
  18. package/build/cjs/core/tailwind/colors.cjs +2 -0
  19. package/build/cjs/core/tailwind/colors.cjs.map +1 -0
  20. package/build/cjs/core/tailwind/colors.d.cts +40 -0
  21. package/build/cjs/core/tailwind/tailwindPreset.cjs +2 -0
  22. package/build/cjs/core/tailwind/tailwindPreset.cjs.map +1 -0
  23. package/build/cjs/core/tailwind/tailwindPreset.d.cts +3 -0
  24. package/build/cjs/hooks/useScreen/useScreen.cjs +1 -1
  25. package/build/cjs/hooks/useScreen/useScreen.cjs.map +1 -1
  26. package/build/cjs/index.cjs +1 -1
  27. package/build/es/components/expander/Expander.js +1 -1
  28. package/build/es/components/expander/Expander.js.map +1 -1
  29. package/build/es/components/file-input/File.js +1 -1
  30. package/build/es/components/file-input/File.js.map +1 -1
  31. package/build/es/components/icon/icons/OpenInNewIcon.d.ts +2 -0
  32. package/build/es/components/icon/icons/OpenInNewIcon.js +2 -0
  33. package/build/es/components/icon/icons/OpenInNewIcon.js.map +1 -0
  34. package/build/es/components/icon/index.d.ts +4 -3
  35. package/build/es/components/icon/index.js +1 -1
  36. package/build/es/components/index.js +1 -1
  37. package/build/es/components/link/Link.js +1 -1
  38. package/build/es/components/link/Link.js.map +1 -1
  39. package/build/es/components/link/NavLink.js +1 -1
  40. package/build/es/components/link/NavLink.js.map +1 -1
  41. package/build/es/core/index.d.ts +1 -0
  42. package/build/es/core/index.js +1 -1
  43. package/build/es/core/tailwind/colors.d.ts +40 -0
  44. package/build/es/core/tailwind/colors.js +2 -0
  45. package/build/es/core/tailwind/colors.js.map +1 -0
  46. package/build/es/core/tailwind/tailwindPreset.d.ts +3 -0
  47. package/build/es/core/tailwind/tailwindPreset.js +2 -0
  48. package/build/es/core/tailwind/tailwindPreset.js.map +1 -0
  49. package/build/es/hooks/useScreen/useScreen.js +1 -1
  50. package/build/es/hooks/useScreen/useScreen.js.map +1 -1
  51. package/build/es/index.js +1 -1
  52. package/package.json +3 -2
  53. package/styles/components/button/button.css +2 -2
  54. package/styles/components/button/button.min.css +1 -1
  55. package/styles/components/checkbox/checkbox.css +4 -4
  56. package/styles/components/checkbox/checkbox.min.css +1 -1
  57. package/styles/components/feedback/feedback.css +2 -2
  58. package/styles/components/feedback/feedback.min.css +1 -1
  59. package/styles/components/input-group/input-group.css +2 -2
  60. package/styles/components/input-group/input-group.min.css +1 -1
  61. package/styles/components/input-panel/checkbox-panel.css +2 -2
  62. package/styles/components/input-panel/checkbox-panel.min.css +1 -1
  63. package/styles/components/input-panel/radio-panel.css +2 -2
  64. package/styles/components/input-panel/radio-panel.min.css +1 -1
  65. package/styles/components/link/_index.scss +1 -0
  66. package/styles/components/link/link.css +11 -129
  67. package/styles/components/link/link.min.css +1 -1
  68. package/styles/components/link/link.scss +16 -115
  69. package/styles/components/link/nav-link.css +66 -0
  70. package/styles/components/link/nav-link.min.css +1 -0
  71. package/styles/components/link/nav-link.scss +60 -0
  72. package/styles/components/loader/loader.css +6 -6
  73. package/styles/components/loader/loader.min.css +1 -1
  74. package/styles/components/loader/skeleton-loader.css +5 -5
  75. package/styles/components/loader/skeleton-loader.min.css +1 -1
  76. package/styles/components/message/message.css +2 -2
  77. package/styles/components/message/message.min.css +1 -1
  78. package/styles/components/progress-bar/progress-bar.css +2 -2
  79. package/styles/components/progress-bar/progress-bar.min.css +1 -1
  80. package/styles/components/radio-button/radio-button.css +2 -2
  81. package/styles/components/radio-button/radio-button.min.css +1 -1
  82. package/styles/components/system-message/system-message.css +2 -2
  83. package/styles/components/system-message/system-message.min.css +1 -1
  84. package/styles/components/toast/toast.css +4 -4
  85. package/styles/components/toast/toast.min.css +1 -1
  86. package/styles/styles.css +68 -122
  87. package/styles/styles.min.css +1 -1
@@ -1 +1 @@
1
- :root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-button-padding-block:0.5rem;--jkl-button-padding-text:calc(var(--jkl-unit-10)*3);--jkl-button-padding-icon:calc(var(--jkl-unit-10)*2);--jkl-button-padding-icon-button:0.5rem;--jkl-button-padding-tertiary-inline:calc(var(--jkl-unit-10)*0.5);--jkl-button-padding-ghost-inline:0.5rem;--jkl-button-font-size:1.125rem;--jkl-button-line-height:1.75rem}@media (min-width:680px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-button-font-size:1.25rem;--jkl-button-line-height:2rem}}[data-density=compact],[data-layout-density=compact]{--jkl-button-padding-block:calc(var(--jkl-unit-10)*0.5);--jkl-button-padding-text:calc(var(--jkl-unit-10)*1.5);--jkl-button-padding-icon:0.5rem;--jkl-button-padding-icon-button:calc(var(--jkl-unit-10)*0.5);--jkl-button-padding-tertiary-inline:calc(var(--jkl-unit-10)*0.25);--jkl-button-padding-ghost-inline:calc(var(--jkl-unit-10)*0.5);--jkl-button-font-size:1rem;--jkl-button-line-height:1.5rem}@media (min-width:680px){[data-density=compact],[data-layout-density=compact]{--jkl-button-font-size:1rem;--jkl-button-line-height:1.5rem;--jkl-button-icon-weight:500}}.jkl-button{--jkl-icon-weight:var(--jkl-button-icon-weight,initial);--text-color:var(--jkl-color-text-default);--background-color:#0000;--border-radius:0;--border-width:0.0625rem;background-color:var(--background-color);border:unset;color:var(--text-color);cursor:pointer;display:inline-block;font-size:var(--jkl-button-font-size);font-weight:700;line-height:var(--jkl-button-line-height);text-decoration:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;border-radius:var(--border-radius);max-width:100%;overflow:hidden;padding-block:var(--jkl-button-padding-block);padding-inline:var(--jkl-button-padding-text);position:relative;transition-duration:.15s;transition-property:scale;transition-timing-function:ease}.jkl-button:has(.jkl-icon:first-child){-webkit-padding-start:var(--jkl-button-padding-icon);padding-inline-start:var(--jkl-button-padding-icon)}.jkl-button:has(.jkl-icon:last-child){-webkit-padding-end:var(--jkl-button-padding-icon);padding-inline-end:var(--jkl-button-padding-icon)}.jkl-button:has(.jkl-icon:first-child):has(.jkl-icon:last-child){padding-inline:var(--jkl-button-padding-icon-button)}.jkl-button__label{align-items:center;display:flex;flex-direction:row;gap:calc(var(--jkl-unit-10)*.25);pointer-events:none;transition-duration:.25s;transition-property:translate;transition-timing-function:ease;width:100%}.jkl-button__loader{left:50%;opacity:0;pointer-events:none;position:absolute;top:50%;transition-duration:.25s;transition-property:opacity,translate;transition-timing-function:ease;translate:-50% 350%}.jkl-button__text{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.jkl-button[data-loading=true] .jkl-button__label{translate:0 -120%}.jkl-button[data-loading=true] .jkl-button__loader{opacity:1;translate:-50% -50%}.jkl-button:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-button:before{background-color:var(--text-color);border-radius:9999px;content:"";display:block;height:1rem;left:var(--jkl-touch-xcoord,50%);opacity:0;pointer-events:none;position:absolute;top:var(--jkl-touch-ycoord,50%);transform-origin:center;translate:-100%,-100%;width:1rem}html[data-touchnavigation] .jkl-button.jkl-button--pressed:before{animation:jkl-tertiary-flash-ugnhpwb .25s cubic-bezier(.6,.2,.35,1)}:not([data-touchnavigation]) .jkl-button--primary:hover,:not([data-touchnavigation]) .jkl-button--secondary:hover,:not([data-touchnavigation]) .jkl-button--tertiary:hover{scale:1.05;transform-origin:center}.jkl-button--primary,.jkl-button--secondary{--border-radius:999px}.jkl-button--primary{--background-color:var(--jkl-color-background-action);--text-color:var(--jkl-color-text-on-action)}.jkl-button--secondary:after{border:var(--border-width) solid var(--text-color);border-radius:var(--border-radius);content:"";inset:0;position:absolute}.jkl-button--tertiary,.jkl-button--tertiary:has(.jkl-icon:first-child),.jkl-button--tertiary:has(.jkl-icon:last-child){padding-inline:var(--jkl-button-padding-tertiary-inline)}.jkl-button--tertiary:after,.jkl-button--tertiary:has(.jkl-icon:first-child):after,.jkl-button--tertiary:has(.jkl-icon:last-child):after{border-bottom:var(--border-width) solid var(--text-color);border-radius:var(--border-radius);content:"";inset:0;position:absolute}.jkl-button--tertiary:focus-visible,.jkl-button--tertiary:has(.jkl-icon:first-child):focus-visible,.jkl-button--tertiary:has(.jkl-icon:first-child):hover,.jkl-button--tertiary:has(.jkl-icon:last-child):focus-visible,.jkl-button--tertiary:has(.jkl-icon:last-child):hover,.jkl-button--tertiary:hover{--border-width:0.125rem}.jkl-button--ghost,.jkl-button--ghost:has(.jkl-icon:first-child),.jkl-button--ghost:has(.jkl-icon:last-child){border-radius:.25rem;padding-inline:var(--jkl-button-padding-ghost-inline);transition-duration:.15s;transition-property:background-color;transition-timing-function:ease}.jkl-button--ghost:has(.jkl-icon:first-child):hover,.jkl-button--ghost:has(.jkl-icon:last-child):hover,.jkl-button--ghost:hover{--background-color:var(--jkl-color-background-interactive-hover)}@keyframes jkl-tertiary-flash-ugnhpwb{0%{opacity:.5;scale:1}to{opacity:0;scale:8}}
1
+ :root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-button-padding-block:0.5rem;--jkl-button-padding-text:calc(var(--jkl-unit-10)*3);--jkl-button-padding-icon:calc(var(--jkl-unit-10)*2);--jkl-button-padding-icon-button:0.5rem;--jkl-button-padding-tertiary-inline:calc(var(--jkl-unit-10)*0.5);--jkl-button-padding-ghost-inline:0.5rem;--jkl-button-font-size:1.125rem;--jkl-button-line-height:1.75rem}@media (min-width:680px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-button-font-size:1.25rem;--jkl-button-line-height:2rem}}[data-density=compact],[data-layout-density=compact]{--jkl-button-padding-block:calc(var(--jkl-unit-10)*0.5);--jkl-button-padding-text:calc(var(--jkl-unit-10)*1.5);--jkl-button-padding-icon:0.5rem;--jkl-button-padding-icon-button:calc(var(--jkl-unit-10)*0.5);--jkl-button-padding-tertiary-inline:calc(var(--jkl-unit-10)*0.25);--jkl-button-padding-ghost-inline:calc(var(--jkl-unit-10)*0.5);--jkl-button-font-size:1rem;--jkl-button-line-height:1.5rem}@media (min-width:680px){[data-density=compact],[data-layout-density=compact]{--jkl-button-font-size:1rem;--jkl-button-line-height:1.5rem;--jkl-button-icon-weight:500}}.jkl-button{--jkl-icon-weight:var(--jkl-button-icon-weight,initial);--text-color:var(--jkl-color-text-default);--background-color:#0000;--border-radius:0;--border-width:0.0625rem;background-color:var(--background-color);border:unset;color:var(--text-color);cursor:pointer;display:inline-block;font-size:var(--jkl-button-font-size);font-weight:700;line-height:var(--jkl-button-line-height);text-decoration:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;border-radius:var(--border-radius);max-width:100%;overflow:hidden;padding-block:var(--jkl-button-padding-block);padding-inline:var(--jkl-button-padding-text);position:relative;transition-duration:.15s;transition-property:scale;transition-timing-function:ease}.jkl-button:has(.jkl-icon:first-child){-webkit-padding-start:var(--jkl-button-padding-icon);padding-inline-start:var(--jkl-button-padding-icon)}.jkl-button:has(.jkl-icon:last-child){-webkit-padding-end:var(--jkl-button-padding-icon);padding-inline-end:var(--jkl-button-padding-icon)}.jkl-button:has(.jkl-icon:first-child):has(.jkl-icon:last-child){padding-inline:var(--jkl-button-padding-icon-button)}.jkl-button__label{align-items:center;display:flex;flex-direction:row;gap:calc(var(--jkl-unit-10)*.25);pointer-events:none;transition-duration:.25s;transition-property:translate;transition-timing-function:ease;width:100%}.jkl-button__loader{left:50%;opacity:0;pointer-events:none;position:absolute;top:50%;transition-duration:.25s;transition-property:opacity,translate;transition-timing-function:ease;translate:-50% 350%}.jkl-button__text{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.jkl-button[data-loading=true] .jkl-button__label{translate:0 -120%}.jkl-button[data-loading=true] .jkl-button__loader{opacity:1;translate:-50% -50%}.jkl-button:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-button:before{background-color:var(--text-color);border-radius:9999px;content:"";display:block;height:1rem;left:var(--jkl-touch-xcoord,50%);opacity:0;pointer-events:none;position:absolute;top:var(--jkl-touch-ycoord,50%);transform-origin:center;translate:-100%,-100%;width:1rem}html[data-touchnavigation] .jkl-button.jkl-button--pressed:before{animation:jkl-tertiary-flash-u3mqo3i .25s cubic-bezier(.6,.2,.35,1)}:not([data-touchnavigation]) .jkl-button--primary:hover,:not([data-touchnavigation]) .jkl-button--secondary:hover,:not([data-touchnavigation]) .jkl-button--tertiary:hover{scale:1.05;transform-origin:center}.jkl-button--primary,.jkl-button--secondary{--border-radius:999px}.jkl-button--primary{--background-color:var(--jkl-color-background-action);--text-color:var(--jkl-color-text-on-action)}.jkl-button--secondary:after{border:var(--border-width) solid var(--text-color);border-radius:var(--border-radius);content:"";inset:0;position:absolute}.jkl-button--tertiary,.jkl-button--tertiary:has(.jkl-icon:first-child),.jkl-button--tertiary:has(.jkl-icon:last-child){padding-inline:var(--jkl-button-padding-tertiary-inline)}.jkl-button--tertiary:after,.jkl-button--tertiary:has(.jkl-icon:first-child):after,.jkl-button--tertiary:has(.jkl-icon:last-child):after{border-bottom:var(--border-width) solid var(--text-color);border-radius:var(--border-radius);content:"";inset:0;position:absolute}.jkl-button--tertiary:focus-visible,.jkl-button--tertiary:has(.jkl-icon:first-child):focus-visible,.jkl-button--tertiary:has(.jkl-icon:first-child):hover,.jkl-button--tertiary:has(.jkl-icon:last-child):focus-visible,.jkl-button--tertiary:has(.jkl-icon:last-child):hover,.jkl-button--tertiary:hover{--border-width:0.125rem}.jkl-button--ghost,.jkl-button--ghost:has(.jkl-icon:first-child),.jkl-button--ghost:has(.jkl-icon:last-child){border-radius:.25rem;padding-inline:var(--jkl-button-padding-ghost-inline);transition-duration:.15s;transition-property:background-color;transition-timing-function:ease}.jkl-button--ghost:has(.jkl-icon:first-child):hover,.jkl-button--ghost:has(.jkl-icon:last-child):hover,.jkl-button--ghost:hover{--background-color:var(--jkl-color-background-interactive-hover)}@keyframes jkl-tertiary-flash-u3mqo3i{0%{opacity:.5;scale:1}to{opacity:0;scale:8}}
@@ -32,7 +32,7 @@
32
32
  --jkl-checkbox-line-height: 1.5rem;
33
33
  }
34
34
 
35
- @keyframes jkl-checkbox-checked-u2kyha6 {
35
+ @keyframes jkl-checkbox-checked-u536km6 {
36
36
  0% {
37
37
  width: 0;
38
38
  height: 0;
@@ -46,7 +46,7 @@
46
46
  height: 58%;
47
47
  }
48
48
  }
49
- @keyframes jkl-checkbox-indeterminate-u2kyhae {
49
+ @keyframes jkl-checkbox-indeterminate-u536kmy {
50
50
  0% {
51
51
  width: 0;
52
52
  }
@@ -74,11 +74,11 @@
74
74
  top: -6px;
75
75
  }
76
76
  .jkl-checkbox__input:checked + .jkl-checkbox__label .jkl-checkbox__check-mark::after {
77
- animation: jkl-checkbox-checked-u2kyha6 150ms ease-in-out forwards;
77
+ animation: jkl-checkbox-checked-u536km6 150ms ease-in-out forwards;
78
78
  opacity: 1;
79
79
  }
80
80
  .jkl-checkbox__input:indeterminate:not(:checked) + .jkl-checkbox__label .jkl-checkbox__indeterminate-mark::after {
81
- animation: jkl-checkbox-indeterminate-u2kyhae 150ms ease-in-out forwards;
81
+ animation: jkl-checkbox-indeterminate-u536kmy 150ms ease-in-out forwards;
82
82
  opacity: 1;
83
83
  }
84
84
  .jkl-checkbox__input:focus-visible + .jkl-checkbox__label {
@@ -1 +1 @@
1
- :root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-checkbox-font-size:var(--jkl-body-font-size);--jkl-checkbox-line-height:var(--jkl-body-line-height);--jkl-checkbox-font-weight:var(--jkl-body-font-weight);--jkl-checkbox-height:3rem;--jkl-checkbox-box-size:1.5rem;--jkl-checkbox-line-height:2rem}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-checkbox-height:2.5rem;--jkl-checkbox-box-size:1.5rem;--jkl-checkbox-line-height:1.75rem}}[data-density=compact],[data-layout-density=compact]{--jkl-checkbox-font-size:var(--jkl-small-font-size);--jkl-checkbox-line-height:var(--jkl-small-line-height);--jkl-checkbox-font-weight:var(--jkl-small-font-weight);--jkl-checkbox-height:1.75rem;--jkl-checkbox-box-size:1.125rem;--jkl-checkbox-line-height:1.5rem}@keyframes jkl-checkbox-checked-u2kyha6{0%{height:0;width:0}40%{height:0;width:18%}to{height:58%;width:18%}}@keyframes jkl-checkbox-indeterminate-u2kyhae{0%{width:0}to{width:66%}}.jkl-checkbox{--box-color:var(--jkl-color-border-action);--check-color:var(--jkl-color-border-action);--text-color:var(--jkl-color-text-default);--background-color:#0000;color:var(--text-color);display:flex;flex-wrap:wrap;font-size:var(--jkl-checkbox-font-size);font-weight:var(--jkl-checkbox-font-weight);line-height:var(--jkl-checkbox-line-height);min-height:var(--jkl-checkbox-height);position:relative}.jkl-checkbox__input{opacity:0;position:absolute;top:-6px}.jkl-checkbox__input:checked+.jkl-checkbox__label .jkl-checkbox__check-mark:after{animation:jkl-checkbox-checked-u2kyha6 .15s ease-in-out forwards;opacity:1}.jkl-checkbox__input:indeterminate:not(:checked)+.jkl-checkbox__label .jkl-checkbox__indeterminate-mark:after{animation:jkl-checkbox-indeterminate-u2kyhae .15s ease-in-out forwards;opacity:1}.jkl-checkbox__input:focus-visible+.jkl-checkbox__label{color:var(--jkl-checkbox-focus-color)}.jkl-checkbox__input:focus-visible+.jkl-checkbox__label>.jkl-checkbox__mark{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-checkbox__input:disabled+.jkl-checkbox__label{color:var(--jkl-checkbox-disabled-color)}.jkl-checkbox__input:active{--background-color:var(--jkl-color-background-input-focus)}.jkl-checkbox__label{cursor:pointer;display:flex;flex-shrink:0;max-width:100%;min-width:0}.jkl-checkbox__label:active .jkl-checkbox__mark,.jkl-checkbox__label:hover .jkl-checkbox__mark{outline:1px solid var(--box-color)}.jkl-checkbox__text{margin:calc((var(--jkl-checkbox-height) - var(--jkl-checkbox-line-height))*.5) 0;transition-duration:.15s;transition-property:color;transition-timing-function:ease;translate:0 .0625rem}.jkl-checkbox__mark{box-sizing:border-box;height:var(--jkl-checkbox-box-size);margin-block:calc((var(--jkl-checkbox-height) - var(--jkl-checkbox-box-size))*.5);position:relative;width:var(--jkl-checkbox-box-size);-webkit-margin-end:var(--jkl-unit-10);align-self:flex-start;background-color:var(--background-color);border:1px solid;border-color:var(--box-color);border-radius:0;flex-shrink:0;margin-inline-end:var(--jkl-unit-10);outline:none;transition-duration:.15s;transition-property:background-color;transition-timing-function:ease}@media screen and (forced-colors:active){.jkl-checkbox__mark{border:1px solid ButtonText;outline:revert}}.jkl-checkbox__check-mark:after{border-bottom:.125rem solid var(--check-color);border-left-width:.125rem;border-left:0 solid var(--check-color);border-right:.125rem solid var(--check-color);border-top-width:.125rem;border-top:0 solid var(--check-color);bottom:42%;content:"";display:block;height:58%;left:18%;opacity:0;position:absolute;transform:rotate(45deg);transform-origin:bottom left;transition-duration:.15s;transition-property:opacity,border-color;transition-timing-function:ease;width:18%}@media screen and (forced-colors:active){.jkl-checkbox__check-mark:after{border-color:ButtonText}}.jkl-checkbox__indeterminate-mark:after{--width:66%;--thickness:0.125rem;border-bottom:solid var(--thickness) var(--check-color);bottom:calc(50% - var(--thickness)/2);content:"";display:block;left:calc((100% - var(--width))/2);opacity:0;position:absolute;transition-duration:.15s;transition-property:opacity,border-color;transition-timing-function:ease;width:var(--width)}@media screen and (forced-colors:active){.jkl-checkbox__indeterminate-mark:after{border-color:ButtonText}}.jkl-checkbox--inline{display:inline-flex}.jkl-checkbox--inline:not(:last-of-type){margin-right:calc(var(--jkl-unit-10)*3)}.jkl-checkbox--error{--background-color:var(--jkl-color-background-alert-error);--check-color:var(--jkl-color-text-on-alert)}
1
+ :root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-checkbox-font-size:var(--jkl-body-font-size);--jkl-checkbox-line-height:var(--jkl-body-line-height);--jkl-checkbox-font-weight:var(--jkl-body-font-weight);--jkl-checkbox-height:3rem;--jkl-checkbox-box-size:1.5rem;--jkl-checkbox-line-height:2rem}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-checkbox-height:2.5rem;--jkl-checkbox-box-size:1.5rem;--jkl-checkbox-line-height:1.75rem}}[data-density=compact],[data-layout-density=compact]{--jkl-checkbox-font-size:var(--jkl-small-font-size);--jkl-checkbox-line-height:var(--jkl-small-line-height);--jkl-checkbox-font-weight:var(--jkl-small-font-weight);--jkl-checkbox-height:1.75rem;--jkl-checkbox-box-size:1.125rem;--jkl-checkbox-line-height:1.5rem}@keyframes jkl-checkbox-checked-u536km6{0%{height:0;width:0}40%{height:0;width:18%}to{height:58%;width:18%}}@keyframes jkl-checkbox-indeterminate-u536kmy{0%{width:0}to{width:66%}}.jkl-checkbox{--box-color:var(--jkl-color-border-action);--check-color:var(--jkl-color-border-action);--text-color:var(--jkl-color-text-default);--background-color:#0000;color:var(--text-color);display:flex;flex-wrap:wrap;font-size:var(--jkl-checkbox-font-size);font-weight:var(--jkl-checkbox-font-weight);line-height:var(--jkl-checkbox-line-height);min-height:var(--jkl-checkbox-height);position:relative}.jkl-checkbox__input{opacity:0;position:absolute;top:-6px}.jkl-checkbox__input:checked+.jkl-checkbox__label .jkl-checkbox__check-mark:after{animation:jkl-checkbox-checked-u536km6 .15s ease-in-out forwards;opacity:1}.jkl-checkbox__input:indeterminate:not(:checked)+.jkl-checkbox__label .jkl-checkbox__indeterminate-mark:after{animation:jkl-checkbox-indeterminate-u536kmy .15s ease-in-out forwards;opacity:1}.jkl-checkbox__input:focus-visible+.jkl-checkbox__label{color:var(--jkl-checkbox-focus-color)}.jkl-checkbox__input:focus-visible+.jkl-checkbox__label>.jkl-checkbox__mark{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-checkbox__input:disabled+.jkl-checkbox__label{color:var(--jkl-checkbox-disabled-color)}.jkl-checkbox__input:active{--background-color:var(--jkl-color-background-input-focus)}.jkl-checkbox__label{cursor:pointer;display:flex;flex-shrink:0;max-width:100%;min-width:0}.jkl-checkbox__label:active .jkl-checkbox__mark,.jkl-checkbox__label:hover .jkl-checkbox__mark{outline:1px solid var(--box-color)}.jkl-checkbox__text{margin:calc((var(--jkl-checkbox-height) - var(--jkl-checkbox-line-height))*.5) 0;transition-duration:.15s;transition-property:color;transition-timing-function:ease;translate:0 .0625rem}.jkl-checkbox__mark{box-sizing:border-box;height:var(--jkl-checkbox-box-size);margin-block:calc((var(--jkl-checkbox-height) - var(--jkl-checkbox-box-size))*.5);position:relative;width:var(--jkl-checkbox-box-size);-webkit-margin-end:var(--jkl-unit-10);align-self:flex-start;background-color:var(--background-color);border:1px solid;border-color:var(--box-color);border-radius:0;flex-shrink:0;margin-inline-end:var(--jkl-unit-10);outline:none;transition-duration:.15s;transition-property:background-color;transition-timing-function:ease}@media screen and (forced-colors:active){.jkl-checkbox__mark{border:1px solid ButtonText;outline:revert}}.jkl-checkbox__check-mark:after{border-bottom:.125rem solid var(--check-color);border-left-width:.125rem;border-left:0 solid var(--check-color);border-right:.125rem solid var(--check-color);border-top-width:.125rem;border-top:0 solid var(--check-color);bottom:42%;content:"";display:block;height:58%;left:18%;opacity:0;position:absolute;transform:rotate(45deg);transform-origin:bottom left;transition-duration:.15s;transition-property:opacity,border-color;transition-timing-function:ease;width:18%}@media screen and (forced-colors:active){.jkl-checkbox__check-mark:after{border-color:ButtonText}}.jkl-checkbox__indeterminate-mark:after{--width:66%;--thickness:0.125rem;border-bottom:solid var(--thickness) var(--check-color);bottom:calc(50% - var(--thickness)/2);content:"";display:block;left:calc((100% - var(--width))/2);opacity:0;position:absolute;transition-duration:.15s;transition-property:opacity,border-color;transition-timing-function:ease;width:var(--width)}@media screen and (forced-colors:active){.jkl-checkbox__indeterminate-mark:after{border-color:ButtonText}}.jkl-checkbox--inline{display:inline-flex}.jkl-checkbox--inline:not(:last-of-type){margin-right:calc(var(--jkl-unit-10)*3)}.jkl-checkbox--error{--background-color:var(--jkl-color-background-alert-error);--check-color:var(--jkl-color-text-on-alert)}
@@ -2,7 +2,7 @@
2
2
  * Do not edit directly
3
3
  * Generated on Wed, 18 Dec 2024 12:25:37 GMT
4
4
  */
5
- @keyframes jkl-show-un99wjg {
5
+ @keyframes jkl-show-u0pc4ve {
6
6
  from {
7
7
  transform: translate3d(0, 0.5rem, 0);
8
8
  opacity: 0;
@@ -37,7 +37,7 @@
37
37
  }
38
38
  }
39
39
  .jkl-feedback__fade-in {
40
- animation: jkl-show-un99wjg 0.25s ease-out;
40
+ animation: jkl-show-u0pc4ve 0.25s ease-out;
41
41
  }
42
42
  .jkl-feedback__buttons {
43
43
  display: flex;
@@ -1 +1 @@
1
- @keyframes jkl-show-un99wjg{0%{opacity:0;transform:translate3d(0,.5rem,0)}}.jkl-feedback{max-width:34.375rem}.jkl-feedback__submit-wrapper{transition-duration:.25s;transition-property:height;transition-timing-function:ease;width:100%}.jkl-feedback__submit-wrapper--hidden{display:none}.jkl-feedback__step-counter{color:var(--jkl-color-text-subdued);font-size:1.125rem;font-weight:400;line-height:1.75rem;margin-bottom:calc(var(--jkl-unit-10)*2);--jkl-icon-weight:300}@media (min-width:680px){.jkl-feedback__step-counter{font-size:1.25rem;font-weight:400;line-height:2rem;--jkl-icon-weight:300}}.jkl-feedback__fade-in{animation:jkl-show-un99wjg .25s ease-out}.jkl-feedback__buttons{display:flex}.jkl-feedback-smileys{display:flex;flex-wrap:nowrap;gap:.75rem;justify-content:space-between;margin-top:.5rem;max-width:22.5rem;width:100%}.jkl-feedback-smiley-option{color:var(--jkl-color-text-subdued);cursor:pointer;display:inline-block;height:2.5rem;position:relative;transform:translateZ(0);transition-duration:.15s;transition-property:transform,color;transition-timing-function:ease;width:2.5rem}@media screen and (forced-colors:active){.jkl-feedback-smiley-option,.jkl-feedback-smiley-option path,.jkl-feedback-smiley-option svg{stroke:ButtonFace;fill:ButtonText}}.jkl-feedback-smiley-option:after,.jkl-feedback-smiley-option:before{border-radius:50%;content:"";opacity:0;position:absolute;transition-duration:.15s;transition-property:opacity;transition-timing-function:ease}.jkl-feedback-smiley-option:after{box-shadow:0 0 0 .125rem currentColor;inset:-.125rem -.125rem -.125rem -.125rem}.jkl-feedback-smiley-option:before{box-shadow:0 .125rem 1.875rem #0000001a;inset:0}.jkl-feedback-smiley-option:hover{color:var(--jkl-color-text-default)}input:checked+.jkl-feedback-smiley-option{color:var(--jkl-color-text-default);transform:translate3d(0,-20%,0)}html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus+.jkl-feedback-smiley-option:after,input:checked+.jkl-feedback-smiley-option:before{opacity:1}
1
+ @keyframes jkl-show-u0pc4ve{0%{opacity:0;transform:translate3d(0,.5rem,0)}}.jkl-feedback{max-width:34.375rem}.jkl-feedback__submit-wrapper{transition-duration:.25s;transition-property:height;transition-timing-function:ease;width:100%}.jkl-feedback__submit-wrapper--hidden{display:none}.jkl-feedback__step-counter{color:var(--jkl-color-text-subdued);font-size:1.125rem;font-weight:400;line-height:1.75rem;margin-bottom:calc(var(--jkl-unit-10)*2);--jkl-icon-weight:300}@media (min-width:680px){.jkl-feedback__step-counter{font-size:1.25rem;font-weight:400;line-height:2rem;--jkl-icon-weight:300}}.jkl-feedback__fade-in{animation:jkl-show-u0pc4ve .25s ease-out}.jkl-feedback__buttons{display:flex}.jkl-feedback-smileys{display:flex;flex-wrap:nowrap;gap:.75rem;justify-content:space-between;margin-top:.5rem;max-width:22.5rem;width:100%}.jkl-feedback-smiley-option{color:var(--jkl-color-text-subdued);cursor:pointer;display:inline-block;height:2.5rem;position:relative;transform:translateZ(0);transition-duration:.15s;transition-property:transform,color;transition-timing-function:ease;width:2.5rem}@media screen and (forced-colors:active){.jkl-feedback-smiley-option,.jkl-feedback-smiley-option path,.jkl-feedback-smiley-option svg{stroke:ButtonFace;fill:ButtonText}}.jkl-feedback-smiley-option:after,.jkl-feedback-smiley-option:before{border-radius:50%;content:"";opacity:0;position:absolute;transition-duration:.15s;transition-property:opacity;transition-timing-function:ease}.jkl-feedback-smiley-option:after{box-shadow:0 0 0 .125rem currentColor;inset:-.125rem -.125rem -.125rem -.125rem}.jkl-feedback-smiley-option:before{box-shadow:0 .125rem 1.875rem #0000001a;inset:0}.jkl-feedback-smiley-option:hover{color:var(--jkl-color-text-default)}input:checked+.jkl-feedback-smiley-option{color:var(--jkl-color-text-default);transform:translate3d(0,-20%,0)}html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus+.jkl-feedback-smiley-option:after,input:checked+.jkl-feedback-smiley-option:before{opacity:1}
@@ -78,7 +78,7 @@
78
78
  --color: var(--jkl-color-text-default);
79
79
  }
80
80
  .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 {
81
- animation: 400ms cubic-bezier(0, 0, 0.3, 1) 250ms jkl-support-icon-entrance-u89t4ae forwards;
81
+ animation: 400ms cubic-bezier(0, 0, 0.3, 1) 250ms jkl-support-icon-entrance-u3ghnzf forwards;
82
82
  }
83
83
  .jkl-form-support-label--sr-only {
84
84
  border: 0 !important;
@@ -153,7 +153,7 @@
153
153
  white-space: nowrap !important; /* 3 */
154
154
  }
155
155
 
156
- @keyframes jkl-support-icon-entrance-u89t4ae {
156
+ @keyframes jkl-support-icon-entrance-u3ghnzf {
157
157
  0% {
158
158
  margin-right: 0;
159
159
  opacity: 0;
@@ -1 +1 @@
1
- .jkl-field-group{border-style:none}.jkl-field-group,.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}.jkl-field-group,.jkl-field-group:active,.jkl-field-group:focus,.jkl-field-group:hover{outline:revert;outline-style:revert}}.jkl-dormant-form-support-label{display:none;opacity:0;pointer-events:none}:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-form-support-label-font-size:var(--jkl-small-font-size);--jkl-form-support-label-line-height:var(--jkl-small-line-height);--jkl-form-support-label-font-weight:var(--jkl-small-font-weight);--jkl-form-support-label-margin:0.5rem 0 0;--jkl-form-support-label-icon-size:1.25rem;--jkl-form-support-label-icon-margin:0 -1.25rem -0.375rem 0}[data-density=compact],[data-layout-density=compact]{--jkl-form-support-label-icon-size:1.375rem;--jkl-form-support-label-icon-margin:0 -1.375rem -0.3125rem 0}.jkl-form-support-label{--color:var(--jkl-color-text-subdued);color:var(--color);display:flex;font-size:var(--jkl-form-support-label-font-size);font-weight:var(--jkl-form-support-label-font-weight);line-height:var(--jkl-form-support-label-line-height);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{stroke:CanvasText;fill:Canvas}}.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-u89t4ae .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}:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-label-small-margin:0 0 0.25rem 0;--jkl-label-medium-margin:0 0 0.5rem 0;--jkl-label-large-margin:0 0 1rem -0.0625rem;--jkl-label-small-font-size:var(--jkl-small-font-size);--jkl-label-small-line-height:var(--jkl-small-line-height);--jkl-label-small-font-weight:var(--jkl-small-font-weight);--jkl-label-medium-font-size:var(--jkl-body-font-size);--jkl-label-medium-line-height:var(--jkl-body-line-height);--jkl-label-medium-font-weight:var(--jkl-body-font-weight);--jkl-label-large-font-size:var(--jkl-heading-2-font-size);--jkl-label-large-line-height:var(--jkl-heading-2-line-height);--jkl-label-large-font-weight:var(--jkl-heading-2-font-weight)}[data-density=compact],[data-layout-density=compact]{--jkl-label-small-margin:0 0 0.25rem 0;--jkl-label-medium-margin:0 0 0.5rem 0;--jkl-label-large-margin:0 0 0.75rem -0.0625rem}.jkl-label{color:var(--jkl-color-text-default);display:block;margin-left:0}.jkl-label--small{font-size:var(--jkl-label-small-font-size);font-weight:var(--jkl-label-small-font-weight);line-height:var(--jkl-label-small-line-height);margin:var(--jkl-label-small-margin)}.jkl-label--medium{font-size:var(--jkl-label-medium-font-size);font-weight:var(--jkl-label-medium-font-weight);line-height:var(--jkl-label-medium-line-height);margin:var(--jkl-label-medium-margin)}.jkl-label--large{font-size:var(--jkl-label-large-font-size);font-weight:var(--jkl-label-large-font-weight);line-height:var(--jkl-label-large-line-height);margin:var(--jkl-label-large-margin)}.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}@keyframes jkl-support-icon-entrance-u89t4ae{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)}}@media screen and (forced-colors:active){.jkl-text-input-action-button,.jkl-text-input-action-button path,.jkl-text-input-action-button svg{stroke:ButtonText;fill:ButtonFace}}
1
+ .jkl-field-group{border-style:none}.jkl-field-group,.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}.jkl-field-group,.jkl-field-group:active,.jkl-field-group:focus,.jkl-field-group:hover{outline:revert;outline-style:revert}}.jkl-dormant-form-support-label{display:none;opacity:0;pointer-events:none}:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-form-support-label-font-size:var(--jkl-small-font-size);--jkl-form-support-label-line-height:var(--jkl-small-line-height);--jkl-form-support-label-font-weight:var(--jkl-small-font-weight);--jkl-form-support-label-margin:0.5rem 0 0;--jkl-form-support-label-icon-size:1.25rem;--jkl-form-support-label-icon-margin:0 -1.25rem -0.375rem 0}[data-density=compact],[data-layout-density=compact]{--jkl-form-support-label-icon-size:1.375rem;--jkl-form-support-label-icon-margin:0 -1.375rem -0.3125rem 0}.jkl-form-support-label{--color:var(--jkl-color-text-subdued);color:var(--color);display:flex;font-size:var(--jkl-form-support-label-font-size);font-weight:var(--jkl-form-support-label-font-weight);line-height:var(--jkl-form-support-label-line-height);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{stroke:CanvasText;fill:Canvas}}.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-u3ghnzf .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}:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-label-small-margin:0 0 0.25rem 0;--jkl-label-medium-margin:0 0 0.5rem 0;--jkl-label-large-margin:0 0 1rem -0.0625rem;--jkl-label-small-font-size:var(--jkl-small-font-size);--jkl-label-small-line-height:var(--jkl-small-line-height);--jkl-label-small-font-weight:var(--jkl-small-font-weight);--jkl-label-medium-font-size:var(--jkl-body-font-size);--jkl-label-medium-line-height:var(--jkl-body-line-height);--jkl-label-medium-font-weight:var(--jkl-body-font-weight);--jkl-label-large-font-size:var(--jkl-heading-2-font-size);--jkl-label-large-line-height:var(--jkl-heading-2-line-height);--jkl-label-large-font-weight:var(--jkl-heading-2-font-weight)}[data-density=compact],[data-layout-density=compact]{--jkl-label-small-margin:0 0 0.25rem 0;--jkl-label-medium-margin:0 0 0.5rem 0;--jkl-label-large-margin:0 0 0.75rem -0.0625rem}.jkl-label{color:var(--jkl-color-text-default);display:block;margin-left:0}.jkl-label--small{font-size:var(--jkl-label-small-font-size);font-weight:var(--jkl-label-small-font-weight);line-height:var(--jkl-label-small-line-height);margin:var(--jkl-label-small-margin)}.jkl-label--medium{font-size:var(--jkl-label-medium-font-size);font-weight:var(--jkl-label-medium-font-weight);line-height:var(--jkl-label-medium-line-height);margin:var(--jkl-label-medium-margin)}.jkl-label--large{font-size:var(--jkl-label-large-font-size);font-weight:var(--jkl-label-large-font-weight);line-height:var(--jkl-label-large-line-height);margin:var(--jkl-label-large-margin)}.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}@keyframes jkl-support-icon-entrance-u3ghnzf{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)}}@media screen and (forced-colors:active){.jkl-text-input-action-button,.jkl-text-input-action-button path,.jkl-text-input-action-button svg{stroke:ButtonText;fill:ButtonFace}}
@@ -62,7 +62,7 @@
62
62
  --outer-border-thickness: 0.125rem;
63
63
  }
64
64
 
65
- @keyframes jkl-checkbox-checked-u8kha6o {
65
+ @keyframes jkl-checkbox-checked-u7qquz9 {
66
66
  0% {
67
67
  width: 0;
68
68
  height: 0;
@@ -125,7 +125,7 @@
125
125
  }
126
126
  }
127
127
  .jkl-checkbox-panel:has(:checked) .jkl-checkbox-panel__decorator::after {
128
- animation: jkl-checkbox-checked-u8kha6o 150ms ease-in-out forwards;
128
+ animation: jkl-checkbox-checked-u7qquz9 150ms ease-in-out forwards;
129
129
  opacity: 1;
130
130
  }
131
131
  .jkl-checkbox-panel:has([aria-invalid=true]) {
@@ -1 +1 @@
1
- .jkl-input-panel{--outer-border-color:var(--jkl-color-border-input);--outer-border-thickness:0.0625rem;--background-color:#0000;background-color:var(--background-color);border-radius:4px;box-shadow:inset 0 0 0 var(--outer-border-thickness) var(--outer-border-color);cursor:pointer;padding-left:1rem}.jkl-input-panel__input{opacity:0;position:absolute;top:-6px}.jkl-input-panel__label{align-items:center;cursor:pointer;display:grid;gap:.5rem;grid-template-columns:-webkit-min-content fit-content(30%) 1fr;grid-template-columns:min-content fit-content(30%) 1fr}.jkl-input-panel__main-label{padding-block:1.5rem}.jkl-input-panel__extra-label{align-self:stretch;margin-left:1rem;margin-right:1rem}.jkl-input-panel__extra-label>:first-child{padding-right:1rem}.jkl-input-panel__extra-label--text{align-items:center;display:flex;height:100%}.jkl-input-panel__content{cursor:default;height:0;overflow:hidden;padding-right:1.5rem}.jkl-input-panel:has([aria-expanded=true]) .jkl-input-panel__content,.jkl-input-panel__content[data-alwaysopen=true]{height:auto;padding-bottom:24px}.jkl-input-panel:has(:focus-visible){outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-input-panel:has(:checked){--background-color:var(--jkl-color-background-container-high)}.jkl-input-panel:hover{--outer-border-color:var(--jkl-color-border-separator-hover);--outer-border-thickness:0.125rem}@keyframes jkl-checkbox-checked-u8kha6o{0%{height:0;width:0}40%{height:0;width:18%}to{height:58%;width:18%}}.jkl-checkbox-panel{--checkbox-background-color:#0000;--checkbox-box-color:var(--jkl-color-border-action);--checkbox-check-color:var(--jkl-color-border-action)}.jkl-checkbox-panel__decorator{background-color:var(--checkbox-background-color);border:1px solid;border-color:var(--checkbox-box-color);border-radius:0;box-sizing:border-box;height:var(--jkl-checkbox-box-size);outline:none;position:relative;transition-duration:.15s;transition-property:background-color;transition-timing-function:ease;width:var(--jkl-checkbox-box-size)}@media screen and (forced-colors:active){.jkl-checkbox-panel__decorator{border:1px solid ButtonText;outline:revert}}.jkl-checkbox-panel__decorator:after{border-bottom:.125rem solid var(--checkbox-check-color);border-left-width:.125rem;border-left:0 solid var(--checkbox-check-color);border-right:.125rem solid var(--checkbox-check-color);border-top-width:.125rem;border-top:0 solid var(--checkbox-check-color);bottom:42%;content:"";display:block;height:58%;left:18%;opacity:0;position:absolute;transform:rotate(45deg);transform-origin:bottom left;transition-duration:.15s;transition-property:opacity,border-color;transition-timing-function:ease;width:18%}@media screen and (forced-colors:active){.jkl-checkbox-panel__decorator:after{border-color:ButtonText}}.jkl-checkbox-panel:has(:checked) .jkl-checkbox-panel__decorator:after{animation:jkl-checkbox-checked-u8kha6o .15s ease-in-out forwards;opacity:1}.jkl-checkbox-panel:has([aria-invalid=true]){--checkbox-background-color:var(--jkl-color-background-alert-error);--checkbox-check-color:var(--jkl-color-text-on-alert)}
1
+ .jkl-input-panel{--outer-border-color:var(--jkl-color-border-input);--outer-border-thickness:0.0625rem;--background-color:#0000;background-color:var(--background-color);border-radius:4px;box-shadow:inset 0 0 0 var(--outer-border-thickness) var(--outer-border-color);cursor:pointer;padding-left:1rem}.jkl-input-panel__input{opacity:0;position:absolute;top:-6px}.jkl-input-panel__label{align-items:center;cursor:pointer;display:grid;gap:.5rem;grid-template-columns:-webkit-min-content fit-content(30%) 1fr;grid-template-columns:min-content fit-content(30%) 1fr}.jkl-input-panel__main-label{padding-block:1.5rem}.jkl-input-panel__extra-label{align-self:stretch;margin-left:1rem;margin-right:1rem}.jkl-input-panel__extra-label>:first-child{padding-right:1rem}.jkl-input-panel__extra-label--text{align-items:center;display:flex;height:100%}.jkl-input-panel__content{cursor:default;height:0;overflow:hidden;padding-right:1.5rem}.jkl-input-panel:has([aria-expanded=true]) .jkl-input-panel__content,.jkl-input-panel__content[data-alwaysopen=true]{height:auto;padding-bottom:24px}.jkl-input-panel:has(:focus-visible){outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-input-panel:has(:checked){--background-color:var(--jkl-color-background-container-high)}.jkl-input-panel:hover{--outer-border-color:var(--jkl-color-border-separator-hover);--outer-border-thickness:0.125rem}@keyframes jkl-checkbox-checked-u7qquz9{0%{height:0;width:0}40%{height:0;width:18%}to{height:58%;width:18%}}.jkl-checkbox-panel{--checkbox-background-color:#0000;--checkbox-box-color:var(--jkl-color-border-action);--checkbox-check-color:var(--jkl-color-border-action)}.jkl-checkbox-panel__decorator{background-color:var(--checkbox-background-color);border:1px solid;border-color:var(--checkbox-box-color);border-radius:0;box-sizing:border-box;height:var(--jkl-checkbox-box-size);outline:none;position:relative;transition-duration:.15s;transition-property:background-color;transition-timing-function:ease;width:var(--jkl-checkbox-box-size)}@media screen and (forced-colors:active){.jkl-checkbox-panel__decorator{border:1px solid ButtonText;outline:revert}}.jkl-checkbox-panel__decorator:after{border-bottom:.125rem solid var(--checkbox-check-color);border-left-width:.125rem;border-left:0 solid var(--checkbox-check-color);border-right:.125rem solid var(--checkbox-check-color);border-top-width:.125rem;border-top:0 solid var(--checkbox-check-color);bottom:42%;content:"";display:block;height:58%;left:18%;opacity:0;position:absolute;transform:rotate(45deg);transform-origin:bottom left;transition-duration:.15s;transition-property:opacity,border-color;transition-timing-function:ease;width:18%}@media screen and (forced-colors:active){.jkl-checkbox-panel__decorator:after{border-color:ButtonText}}.jkl-checkbox-panel:has(:checked) .jkl-checkbox-panel__decorator:after{animation:jkl-checkbox-checked-u7qquz9 .15s ease-in-out forwards;opacity:1}.jkl-checkbox-panel:has([aria-invalid=true]){--checkbox-background-color:var(--jkl-color-background-alert-error);--checkbox-check-color:var(--jkl-color-text-on-alert)}
@@ -62,7 +62,7 @@
62
62
  --outer-border-thickness: 0.125rem;
63
63
  }
64
64
 
65
- @keyframes jkl-dot-in-uxabob3 {
65
+ @keyframes jkl-dot-in-u2g3cqz {
66
66
  0% {
67
67
  transform: scale(0.8);
68
68
  }
@@ -110,7 +110,7 @@
110
110
  }
111
111
  }
112
112
  .jkl-radio-panel__input:checked + .jkl-radio-panel__decorator::after {
113
- animation: jkl-dot-in-uxabob3 150ms ease;
113
+ animation: jkl-dot-in-u2g3cqz 150ms ease;
114
114
  }
115
115
  .jkl-radio-panel:has(:checked) {
116
116
  --radio-dot-color: var(--jkl-color-border-action);
@@ -1 +1 @@
1
- .jkl-input-panel{--outer-border-color:var(--jkl-color-border-input);--outer-border-thickness:0.0625rem;--background-color:#0000;background-color:var(--background-color);border-radius:4px;box-shadow:inset 0 0 0 var(--outer-border-thickness) var(--outer-border-color);cursor:pointer;padding-left:1rem}.jkl-input-panel__input{opacity:0;position:absolute;top:-6px}.jkl-input-panel__label{align-items:center;cursor:pointer;display:grid;gap:.5rem;grid-template-columns:-webkit-min-content fit-content(30%) 1fr;grid-template-columns:min-content fit-content(30%) 1fr}.jkl-input-panel__main-label{padding-block:1.5rem}.jkl-input-panel__extra-label{align-self:stretch;margin-left:1rem;margin-right:1rem}.jkl-input-panel__extra-label>:first-child{padding-right:1rem}.jkl-input-panel__extra-label--text{align-items:center;display:flex;height:100%}.jkl-input-panel__content{cursor:default;height:0;overflow:hidden;padding-right:1.5rem}.jkl-input-panel:has([aria-expanded=true]) .jkl-input-panel__content,.jkl-input-panel__content[data-alwaysopen=true]{height:auto;padding-bottom:24px}.jkl-input-panel:has(:focus-visible){outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-input-panel:has(:checked){--background-color:var(--jkl-color-background-container-high)}.jkl-input-panel:hover{--outer-border-color:var(--jkl-color-border-separator-hover);--outer-border-thickness:0.125rem}@keyframes jkl-dot-in-uxabob3{0%{transform:scale(.8)}to{transform:scale(1)}}.jkl-radio-panel{--radio-dot-color:#0000;--radio-ring-color:#0000}.jkl-radio-panel__decorator{background-color:var(--radio-ring-color);border:.0625rem solid var(--jkl-color-border-action);border-radius:50%;cursor:pointer;display:inline-block;height:1.5rem;position:relative;transition-duration:.15s;transition-property:background-color,outline;transition-timing-function:ease;width:1.5rem}.jkl-radio-panel__decorator:after{background-color:var(--radio-dot-color);border-radius:50%;content:"";height:1rem;left:50%;position:absolute;scale:1;top:50%;transition-duration:.15s;transition-property:transform;transition-timing-function:ease;translate:-50% -50%;width:1rem}@media screen and (forced-colors:active){.jkl-radio-panel__decorator{border:1px solid ButtonText}}.jkl-radio-panel__input:checked+.jkl-radio-panel__decorator:after{animation:jkl-dot-in-uxabob3 .15s ease}.jkl-radio-panel:has(:checked){--radio-dot-color:var(--jkl-color-border-action)}[aria-invalid=true] .jkl-radio-panel{--radio-ring-color:var(--jkl-color-background-alert-error)}[aria-invalid=true] .jkl-radio-panel:has(:checked){--radio-dot-color:var(--jkl-color-text-on-alert)}
1
+ .jkl-input-panel{--outer-border-color:var(--jkl-color-border-input);--outer-border-thickness:0.0625rem;--background-color:#0000;background-color:var(--background-color);border-radius:4px;box-shadow:inset 0 0 0 var(--outer-border-thickness) var(--outer-border-color);cursor:pointer;padding-left:1rem}.jkl-input-panel__input{opacity:0;position:absolute;top:-6px}.jkl-input-panel__label{align-items:center;cursor:pointer;display:grid;gap:.5rem;grid-template-columns:-webkit-min-content fit-content(30%) 1fr;grid-template-columns:min-content fit-content(30%) 1fr}.jkl-input-panel__main-label{padding-block:1.5rem}.jkl-input-panel__extra-label{align-self:stretch;margin-left:1rem;margin-right:1rem}.jkl-input-panel__extra-label>:first-child{padding-right:1rem}.jkl-input-panel__extra-label--text{align-items:center;display:flex;height:100%}.jkl-input-panel__content{cursor:default;height:0;overflow:hidden;padding-right:1.5rem}.jkl-input-panel:has([aria-expanded=true]) .jkl-input-panel__content,.jkl-input-panel__content[data-alwaysopen=true]{height:auto;padding-bottom:24px}.jkl-input-panel:has(:focus-visible){outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-input-panel:has(:checked){--background-color:var(--jkl-color-background-container-high)}.jkl-input-panel:hover{--outer-border-color:var(--jkl-color-border-separator-hover);--outer-border-thickness:0.125rem}@keyframes jkl-dot-in-u2g3cqz{0%{transform:scale(.8)}to{transform:scale(1)}}.jkl-radio-panel{--radio-dot-color:#0000;--radio-ring-color:#0000}.jkl-radio-panel__decorator{background-color:var(--radio-ring-color);border:.0625rem solid var(--jkl-color-border-action);border-radius:50%;cursor:pointer;display:inline-block;height:1.5rem;position:relative;transition-duration:.15s;transition-property:background-color,outline;transition-timing-function:ease;width:1.5rem}.jkl-radio-panel__decorator:after{background-color:var(--radio-dot-color);border-radius:50%;content:"";height:1rem;left:50%;position:absolute;scale:1;top:50%;transition-duration:.15s;transition-property:transform;transition-timing-function:ease;translate:-50% -50%;width:1rem}@media screen and (forced-colors:active){.jkl-radio-panel__decorator{border:1px solid ButtonText}}.jkl-radio-panel__input:checked+.jkl-radio-panel__decorator:after{animation:jkl-dot-in-u2g3cqz .15s ease}.jkl-radio-panel:has(:checked){--radio-dot-color:var(--jkl-color-border-action)}[aria-invalid=true] .jkl-radio-panel{--radio-ring-color:var(--jkl-color-background-alert-error)}[aria-invalid=true] .jkl-radio-panel:has(:checked){--radio-dot-color:var(--jkl-color-text-on-alert)}
@@ -1 +1,2 @@
1
1
  @forward "link";
2
+ @forward "nav-link";
@@ -1,153 +1,35 @@
1
- @charset "UTF-8";
2
1
  /**
3
2
  * Do not edit directly
4
3
  * Generated on Wed, 18 Dec 2024 12:25:37 GMT
5
4
  */
6
- @media screen and (prefers-color-scheme: light) {
7
- :root {
8
- --jkl-link-color: #1b1917;
9
- --jkl-link-hover-color: #636060;
10
- --jkl-link-active-color: #1b1917;
11
- }
12
- }
13
- [data-theme=light] {
14
- --jkl-link-color: #1b1917;
15
- --jkl-link-hover-color: #636060;
16
- --jkl-link-active-color: #1b1917;
17
- }
18
-
19
- @media screen and (prefers-color-scheme: dark) {
20
- :root {
21
- --jkl-link-color: #f9f9f9;
22
- --jkl-link-hover-color: #c8c5c3;
23
- --jkl-link-active-color: #f9f9f9;
24
- }
25
- }
26
- [data-theme=dark] {
27
- --jkl-link-color: #f9f9f9;
28
- --jkl-link-hover-color: #c8c5c3;
29
- --jkl-link-active-color: #f9f9f9;
30
- }
31
-
32
5
  .jkl-link {
33
- color: var(--jkl-link-color);
34
- background-image: linear-gradient(to bottom, var(--jkl-link-color) 0%, var(--jkl-link-color) 100%);
6
+ --link-color: var(--jkl-color-text-default);
7
+ color: var(--link-color);
8
+ outline: none;
9
+ text-decoration: none;
10
+ display: inline-flex;
11
+ align-items: center;
12
+ gap: 0.09375rem;
13
+ }
14
+ .jkl-link__content {
35
15
  background-position: 0 calc(100% - (0.125rem - 0.0625rem));
36
16
  background-size: 0.0625rem 0.0625rem;
37
17
  background-repeat: repeat-x;
38
18
  transition-timing-function: ease;
39
19
  transition-duration: 75ms;
40
20
  transition-property: color;
41
- outline: none;
42
- text-decoration: none;
43
- /* Show arrow after external links, or links opening
44
- in a new window or tab: */
21
+ background-image: linear-gradient(to bottom, var(--link-color) 0%, var(--link-color) 100%);
45
22
  }
46
23
  .jkl-link:hover:not(:focus) {
47
- color: var(--jkl-link-hover-color);
48
- background-image: linear-gradient(to bottom, var(--jkl-link-hover-color) 0%, var(--jkl-link-hover-color) 100%);
49
- }
50
- .jkl-link:hover {
51
- background-image: linear-gradient(to bottom, var(--jkl-link-hover-color) 0%, var(--jkl-link-hover-color) 100%);
24
+ --link-color: var(--jkl-color-text-subdued);
52
25
  }
53
26
  .jkl-link:focus-visible {
54
27
  outline: 3px solid var(--jkl-color-border-action);
55
28
  outline-offset: 0;
56
29
  }
57
- .jkl-link:active {
58
- background-position: 0 calc(100% - (0.125rem - 0.0625rem));
59
- }
60
- .jkl-link[target=_blank]::after, .jkl-link--external::after {
61
- content: "↗";
62
- content: "↗"/"";
63
- alt: " ";
64
- }
65
30
  @media screen and (forced-colors: active) {
66
31
  .jkl-link {
67
32
  outline: revert;
68
33
  text-decoration: revert;
69
34
  }
70
- }
71
-
72
- .jkl-nav-link {
73
- color: var(--jkl-link-color);
74
- box-sizing: border-box;
75
- font-weight: 400;
76
- text-decoration: none;
77
- position: relative;
78
- }
79
- .jkl-nav-link {
80
- outline: 0;
81
- border-style: none;
82
- outline-style: none;
83
- }
84
- .jkl-nav-link:active, .jkl-nav-link:hover, .jkl-nav-link:focus {
85
- outline: 0;
86
- outline-style: none;
87
- }
88
- @media screen and (forced-colors: active) {
89
- .jkl-nav-link {
90
- outline: revert;
91
- border-style: revert;
92
- outline-style: revert;
93
- }
94
- .jkl-nav-link:active, .jkl-nav-link:hover, .jkl-nav-link:focus {
95
- outline: revert;
96
- outline-style: revert;
97
- }
98
- }
99
- .jkl-nav-link::after {
100
- content: "→";
101
- content: "→"/"";
102
- alt: " ";
103
- transition-timing-function: ease;
104
- transition-duration: 150ms;
105
- transition-property: padding-left, padding-right;
106
- display: inline;
107
- margin-left: -0.2em;
108
- padding-left: 0.35em;
109
- padding-right: 0.35em;
110
- }
111
- .jkl-nav-link:hover:not(:focus) {
112
- color: var(--jkl-link-hover-color);
113
- }
114
- .jkl-nav-link:hover:not(:focus)::after {
115
- padding-left: 0.7em;
116
- padding-right: 0;
117
- }
118
- .jkl-nav-link:focus-visible {
119
- outline: 3px solid var(--jkl-color-border-action);
120
- outline-offset: 0;
121
- }
122
- .jkl-nav-link:focus-visible::after {
123
- padding-left: 0.7em;
124
- padding-right: 0;
125
- }
126
- .jkl-nav-link--active {
127
- --jkl-icon-weight: 500;
128
- font-weight: 700;
129
- letter-spacing: -0.014em;
130
- }
131
-
132
- .jkl-nav-link--back {
133
- padding-right: 0;
134
- padding-left: 0.3em;
135
- margin-left: -0.3em;
136
- }
137
- .jkl-nav-link--back::after {
138
- display: none;
139
- }
140
- .jkl-nav-link--back::before {
141
- content: "←";
142
- content: "←"/"";
143
- alt: " ";
144
- transition-timing-function: ease;
145
- transition-duration: 150ms;
146
- transform: translateX(0);
147
- transition-property: transform;
148
- display: inline-block;
149
- padding-right: 0.25rem;
150
- }
151
- .jkl-nav-link--back:hover::before, .jkl-nav-link--back:focus-visible::before {
152
- transform: translateX(-33%);
153
35
  }
@@ -1 +1 @@
1
- @charset "UTF-8";@media screen and (prefers-color-scheme:light){:root{--jkl-link-color:#1b1917;--jkl-link-hover-color:#636060;--jkl-link-active-color:#1b1917}}[data-theme=light]{--jkl-link-color:#1b1917;--jkl-link-hover-color:#636060;--jkl-link-active-color:#1b1917}@media screen and (prefers-color-scheme:dark){:root{--jkl-link-color:#f9f9f9;--jkl-link-hover-color:#c8c5c3;--jkl-link-active-color:#f9f9f9}}[data-theme=dark]{--jkl-link-color:#f9f9f9;--jkl-link-hover-color:#c8c5c3;--jkl-link-active-color:#f9f9f9}.jkl-link{background-image:linear-gradient(to bottom,var(--jkl-link-color) 0,var(--jkl-link-color) 100%);background-position:0 calc(100% - .0625rem);background-repeat:repeat-x;background-size:.0625rem .0625rem;color:var(--jkl-link-color);outline:none;text-decoration:none;transition-duration:75ms;transition-property:color;transition-timing-function:ease}.jkl-link:hover:not(:focus){color:var(--jkl-link-hover-color)}.jkl-link:hover,.jkl-link:hover:not(:focus){background-image:linear-gradient(to bottom,var(--jkl-link-hover-color) 0,var(--jkl-link-hover-color) 100%)}.jkl-link:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:0}.jkl-link:active{background-position:0 calc(100% - .0625rem)}.jkl-link--external:after,.jkl-link[target=_blank]:after{content:"↗";content:"↗"/"";alt:" "}@media screen and (forced-colors:active){.jkl-link{outline:revert;-webkit-text-decoration:revert;text-decoration:revert}}.jkl-nav-link{border-style:none;box-sizing:border-box;color:var(--jkl-link-color);font-weight:400;position:relative;text-decoration:none}.jkl-nav-link,.jkl-nav-link:active,.jkl-nav-link:focus,.jkl-nav-link:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-nav-link{border-style:revert}.jkl-nav-link,.jkl-nav-link:active,.jkl-nav-link:focus,.jkl-nav-link:hover{outline:revert;outline-style:revert}}.jkl-nav-link:after{content:"→";content:"→"/"";alt:" ";display:inline;margin-left:-.2em;padding-left:.35em;padding-right:.35em;transition-duration:.15s;transition-property:padding-left,padding-right;transition-timing-function:ease}.jkl-nav-link:hover:not(:focus){color:var(--jkl-link-hover-color)}.jkl-nav-link:hover:not(:focus):after{padding-left:.7em;padding-right:0}.jkl-nav-link:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:0}.jkl-nav-link:focus-visible:after{padding-left:.7em;padding-right:0}.jkl-nav-link--active{--jkl-icon-weight:500;font-weight:700;letter-spacing:-.014em}.jkl-nav-link--back{margin-left:-.3em;padding-left:.3em;padding-right:0}.jkl-nav-link--back:after{display:none}.jkl-nav-link--back:before{content:"←";content:"←"/"";alt:" ";display:inline-block;padding-right:.25rem;transform:translateX(0);transition-duration:.15s;transition-property:transform;transition-timing-function:ease}.jkl-nav-link--back:focus-visible:before,.jkl-nav-link--back:hover:before{transform:translateX(-33%)}
1
+ .jkl-link{--link-color:var(--jkl-color-text-default);align-items:center;color:var(--link-color);display:inline-flex;gap:.09375rem;outline:none;text-decoration:none}.jkl-link__content{background-image:linear-gradient(to bottom,var(--link-color) 0,var(--link-color) 100%);background-position:0 calc(100% - .0625rem);background-repeat:repeat-x;background-size:.0625rem .0625rem;transition-duration:75ms;transition-property:color;transition-timing-function:ease}.jkl-link:hover:not(:focus){--link-color:var(--jkl-color-text-subdued)}.jkl-link:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:0}@media screen and (forced-colors:active){.jkl-link{outline:revert;-webkit-text-decoration:revert;text-decoration:revert}}
@@ -4,55 +4,21 @@
4
4
  background-image: linear-gradient(to bottom, $color 0%, $color 100%);
5
5
  }
6
6
 
7
- $_right-arrow: "\2192"; // unicode right arrow
8
- $_left-arrow: "\2190"; // unicode left arrow
9
- $_north-east-arrow: "\2197"; // unicode north east arrow (up/right)
10
-
11
7
  $_link-underline-thickness: jkl.rem(1px);
12
8
  $_link-underline-thickness--focus: jkl.rem(2px);
13
9
 
14
- @include jkl.light-mode-variables {
15
- --jkl-link-color: #{jkl.$color-granitt};
16
- --jkl-link-hover-color: #{jkl.$color-stein};
17
- --jkl-link-active-color: #{jkl.$color-granitt};
18
- }
19
- @include jkl.dark-mode-variables {
20
- --jkl-link-color: #{jkl.$color-snohvit};
21
- --jkl-link-hover-color: #{jkl.$color-svaberg};
22
- --jkl-link-active-color: #{jkl.$color-snohvit};
23
- }
24
-
25
10
  .jkl-link {
26
- color: var(--jkl-link-color);
27
- @include _underline-gradient(var(--jkl-link-color));
28
- background-position: 0
29
- calc(
30
- 100% -
31
- (
32
- #{$_link-underline-thickness--focus} - #{$_link-underline-thickness}
33
- )
34
- );
35
- background-size: $_link-underline-thickness $_link-underline-thickness;
36
- background-repeat: repeat-x;
37
- @include jkl.motion("standard", "energetic");
38
- transition-property: color;
11
+ --link-color: var(--jkl-color-text-default);
12
+
13
+ color: var(--link-color);
39
14
  outline: none;
40
15
  text-decoration: none;
41
16
 
42
- &:hover:not(:focus) {
43
- color: var(--jkl-link-hover-color);
44
- @include _underline-gradient(var(--jkl-link-hover-color));
45
- }
46
-
47
- &:hover {
48
- @include _underline-gradient(var(--jkl-link-hover-color));
49
- }
50
-
51
- &:focus-visible {
52
- @include jkl.focus-outline($offset: 0);
53
- }
17
+ display: inline-flex;
18
+ align-items: center;
19
+ gap: jkl.rem(1.5px);
54
20
 
55
- &:active {
21
+ &__content {
56
22
  background-position: 0
57
23
  calc(
58
24
  100% -
@@ -60,90 +26,25 @@ $_link-underline-thickness--focus: jkl.rem(2px);
60
26
  #{$_link-underline-thickness--focus} - #{$_link-underline-thickness}
61
27
  )
62
28
  );
63
- }
64
-
65
- /* Show arrow after external links, or links opening
66
- in a new window or tab: */
67
- &[target="_blank"],
68
- &--external {
69
- &::after {
70
- @include jkl.decorative($content: $_north-east-arrow);
71
- }
72
- }
73
-
74
- @include jkl.forced-colors-mode {
75
- outline: revert;
76
- text-decoration: revert;
77
- }
78
- }
79
-
80
- .jkl-nav-link {
81
- color: var(--jkl-link-color);
82
-
83
- box-sizing: border-box;
84
- font-weight: jkl.$typography-weight-normal;
85
- text-decoration: none;
86
- position: relative;
29
+ background-size: $_link-underline-thickness $_link-underline-thickness;
30
+ background-repeat: repeat-x;
87
31
 
88
- @include jkl.reset-outline;
32
+ @include jkl.motion("standard", "energetic");
33
+ transition-property: color;
89
34
 
90
- &::after {
91
- @include jkl.decorative($content: $_right-arrow);
92
- @include jkl.motion;
93
- transition-property: padding-left, padding-right;
94
- display: inline;
95
- margin-left: -0.2em;
96
- padding-left: 0.35em;
97
- padding-right: 0.35em;
35
+ @include _underline-gradient(var(--link-color));
98
36
  }
99
37
 
100
38
  &:hover:not(:focus) {
101
- color: var(--jkl-link-hover-color);
102
-
103
- &::after {
104
- padding-left: 0.7em;
105
- padding-right: 0;
106
- }
39
+ --link-color: var(--jkl-color-text-subdued);
107
40
  }
108
41
 
109
42
  &:focus-visible {
110
43
  @include jkl.focus-outline($offset: 0);
111
-
112
- &::after {
113
- padding-left: 0.7em;
114
- padding-right: 0;
115
- }
116
- }
117
-
118
- &--active {
119
- @include jkl.no-grow-bold;
120
- }
121
- }
122
-
123
- .jkl-nav-link--back {
124
- padding-right: 0;
125
-
126
- $left-arrow-focus-margin: 0.3em; // Unngå at border ved tastaturfokus "kapper" pila
127
- padding-left: $left-arrow-focus-margin;
128
- margin-left: -#{$left-arrow-focus-margin};
129
-
130
- &::after {
131
- display: none;
132
- }
133
-
134
- &::before {
135
- @include jkl.decorative($content: $_left-arrow);
136
- @include jkl.motion;
137
- transform: translateX(0);
138
- transition-property: transform;
139
- display: inline-block;
140
- padding-right: jkl.rem(4px);
141
44
  }
142
45
 
143
- &:hover,
144
- &:focus-visible {
145
- &::before {
146
- transform: translateX(-33%);
147
- }
46
+ @include jkl.forced-colors-mode {
47
+ outline: revert;
48
+ text-decoration: revert;
148
49
  }
149
50
  }
@@ -0,0 +1,66 @@
1
+ /**
2
+ * Do not edit directly
3
+ * Generated on Wed, 18 Dec 2024 12:25:37 GMT
4
+ */
5
+ .jkl-nav-link {
6
+ color: var(--jkl-color-text-default);
7
+ box-sizing: border-box;
8
+ font-weight: 400;
9
+ text-decoration: none;
10
+ position: relative;
11
+ display: inline-flex;
12
+ align-items: center;
13
+ gap: 0.09375rem;
14
+ padding-right: 0.15rem;
15
+ margin-right: -0.15rem;
16
+ }
17
+ .jkl-nav-link {
18
+ outline: 0;
19
+ border-style: none;
20
+ outline-style: none;
21
+ }
22
+ .jkl-nav-link:active, .jkl-nav-link:hover, .jkl-nav-link:focus {
23
+ outline: 0;
24
+ outline-style: none;
25
+ }
26
+ @media screen and (forced-colors: active) {
27
+ .jkl-nav-link {
28
+ outline: revert;
29
+ border-style: revert;
30
+ outline-style: revert;
31
+ }
32
+ .jkl-nav-link:active, .jkl-nav-link:hover, .jkl-nav-link:focus {
33
+ outline: revert;
34
+ outline-style: revert;
35
+ }
36
+ }
37
+ .jkl-nav-link:hover:not(:focus) {
38
+ color: var(--jkl-color-text-subdued);
39
+ }
40
+ .jkl-nav-link:focus-visible {
41
+ outline: 3px solid var(--jkl-color-border-action);
42
+ outline-offset: 0;
43
+ }
44
+ .jkl-nav-link:focus-visible .jkl-nav-link__icon, .jkl-nav-link:hover:not(:focus) .jkl-nav-link__icon {
45
+ transform: translateX(0.3rem);
46
+ }
47
+ .jkl-nav-link__icon {
48
+ transition-timing-function: ease;
49
+ transition-duration: 150ms;
50
+ transition-property: transform;
51
+ }
52
+ .jkl-nav-link--active {
53
+ --jkl-icon-weight: 500;
54
+ font-weight: 700;
55
+ letter-spacing: -0.014em;
56
+ }
57
+ .jkl-nav-link--back {
58
+ padding-right: 0;
59
+ margin-right: 0;
60
+ padding-left: 0.15rem;
61
+ margin-left: -0.15rem;
62
+ }
63
+ .jkl-nav-link--back:focus-visible .jkl-nav-link__icon, .jkl-nav-link--back:hover:not(:focus) .jkl-nav-link__icon {
64
+ padding-left: 0;
65
+ transform: translateX(-0.3rem);
66
+ }
@@ -0,0 +1 @@
1
+ .jkl-nav-link{align-items:center;border-style:none;box-sizing:border-box;color:var(--jkl-color-text-default);display:inline-flex;font-weight:400;gap:.09375rem;margin-right:-.15rem;padding-right:.15rem;position:relative;text-decoration:none}.jkl-nav-link,.jkl-nav-link:active,.jkl-nav-link:focus,.jkl-nav-link:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-nav-link{border-style:revert}.jkl-nav-link,.jkl-nav-link:active,.jkl-nav-link:focus,.jkl-nav-link:hover{outline:revert;outline-style:revert}}.jkl-nav-link:hover:not(:focus){color:var(--jkl-color-text-subdued)}.jkl-nav-link:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:0}.jkl-nav-link:focus-visible .jkl-nav-link__icon,.jkl-nav-link:hover:not(:focus) .jkl-nav-link__icon{transform:translateX(.3rem)}.jkl-nav-link__icon{transition-duration:.15s;transition-property:transform;transition-timing-function:ease}.jkl-nav-link--active{--jkl-icon-weight:500;font-weight:700;letter-spacing:-.014em}.jkl-nav-link--back{margin-left:-.15rem;margin-right:0;padding-left:.15rem;padding-right:0}.jkl-nav-link--back:focus-visible .jkl-nav-link__icon,.jkl-nav-link--back:hover:not(:focus) .jkl-nav-link__icon{padding-left:0;transform:translateX(-.3rem)}