@fremtind/jokul 0.27.3 → 0.27.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 (189) hide show
  1. package/README.md +9 -2
  2. package/build/build-stats.html +1 -1
  3. package/build/cjs/components/card/Card.cjs.map +1 -1
  4. package/build/cjs/components/card/CardImage.cjs.map +1 -1
  5. package/build/cjs/components/combobox/Combobox.cjs +1 -1
  6. package/build/cjs/components/combobox/Combobox.cjs.map +1 -1
  7. package/build/cjs/components/datepicker/DatePicker.cjs +1 -1
  8. package/build/cjs/components/datepicker/DatePicker.cjs.map +1 -1
  9. package/build/cjs/components/datepicker/internal/Calendar.cjs +1 -1
  10. package/build/cjs/components/datepicker/internal/Calendar.cjs.map +1 -1
  11. package/build/cjs/components/expander/Expander.cjs +1 -1
  12. package/build/cjs/components/expander/Expander.cjs.map +1 -1
  13. package/build/cjs/components/feedback/questions/ContactQuestion.cjs.map +1 -1
  14. package/build/cjs/components/flex/Flex.cjs.map +1 -1
  15. package/build/cjs/components/input-group/SupportLabel.cjs +1 -1
  16. package/build/cjs/components/input-group/SupportLabel.cjs.map +1 -1
  17. package/build/cjs/components/link-list/LinkList.cjs +1 -1
  18. package/build/cjs/components/link-list/LinkList.cjs.map +1 -1
  19. package/build/cjs/components/menu/MenuItem.cjs +1 -1
  20. package/build/cjs/components/menu/MenuItem.cjs.map +1 -1
  21. package/build/cjs/components/menu/MenuItemCheckbox.cjs +1 -1
  22. package/build/cjs/components/menu/MenuItemCheckbox.cjs.map +1 -1
  23. package/build/cjs/components/message/DismissButton.cjs +1 -1
  24. package/build/cjs/components/message/DismissButton.cjs.map +1 -1
  25. package/build/cjs/components/message/Message.cjs +1 -1
  26. package/build/cjs/components/message/Message.cjs.map +1 -1
  27. package/build/cjs/components/modal/Modal.cjs +1 -1
  28. package/build/cjs/components/modal/Modal.cjs.map +1 -1
  29. package/build/cjs/components/pagination/Pagination.cjs +1 -1
  30. package/build/cjs/components/pagination/Pagination.cjs.map +1 -1
  31. package/build/cjs/components/radio-panel/RadioPanel.cjs +1 -1
  32. package/build/cjs/components/radio-panel/RadioPanel.cjs.map +1 -1
  33. package/build/cjs/components/select/NativeSelect.cjs +1 -1
  34. package/build/cjs/components/select/NativeSelect.cjs.map +1 -1
  35. package/build/cjs/components/select/Select.cjs +1 -1
  36. package/build/cjs/components/select/Select.cjs.map +1 -1
  37. package/build/cjs/components/system-message/common/DismissButton.cjs +1 -1
  38. package/build/cjs/components/system-message/common/DismissButton.cjs.map +1 -1
  39. package/build/cjs/components/system-message/common/MessageIcon.cjs +1 -1
  40. package/build/cjs/components/system-message/common/MessageIcon.cjs.map +1 -1
  41. package/build/cjs/components/table/ExpandableTableRow.cjs +1 -1
  42. package/build/cjs/components/table/ExpandableTableRow.cjs.map +1 -1
  43. package/build/cjs/components/table/TableHeader.cjs +1 -1
  44. package/build/cjs/components/table/TableHeader.cjs.map +1 -1
  45. package/build/cjs/components/table/TablePagination.cjs +1 -1
  46. package/build/cjs/components/table/TablePagination.cjs.map +1 -1
  47. package/build/cjs/components/tag/Tag.cjs +1 -1
  48. package/build/cjs/components/tag/Tag.cjs.map +1 -1
  49. package/build/cjs/components/text-input/BaseTextInput.cjs.map +1 -1
  50. package/build/cjs/components/text-input/BaseTextInput.d.cts +2 -2
  51. package/build/cjs/components/toast/Toast.cjs +1 -1
  52. package/build/cjs/components/toast/Toast.cjs.map +1 -1
  53. package/build/cjs/components/toggle-switch/ToggleSwitch.cjs +1 -1
  54. package/build/cjs/components/toggle-switch/ToggleSwitch.cjs.map +1 -1
  55. package/build/cjs/components/toggle-switch/ToggleSwitch.d.cts +1 -1
  56. package/build/cjs/components/tooltip/PopupTip.cjs +1 -1
  57. package/build/cjs/components/tooltip/PopupTip.cjs.map +1 -1
  58. package/build/cjs/components/tooltip/PopupTip.d.cts +1 -1
  59. package/build/es/components/card/Card.js.map +1 -1
  60. package/build/es/components/card/CardImage.js.map +1 -1
  61. package/build/es/components/combobox/Combobox.js +1 -1
  62. package/build/es/components/combobox/Combobox.js.map +1 -1
  63. package/build/es/components/datepicker/DatePicker.js +1 -1
  64. package/build/es/components/datepicker/DatePicker.js.map +1 -1
  65. package/build/es/components/datepicker/internal/Calendar.js +1 -1
  66. package/build/es/components/datepicker/internal/Calendar.js.map +1 -1
  67. package/build/es/components/expander/Expander.js +1 -1
  68. package/build/es/components/expander/Expander.js.map +1 -1
  69. package/build/es/components/feedback/questions/ContactQuestion.js.map +1 -1
  70. package/build/es/components/flex/Flex.js.map +1 -1
  71. package/build/es/components/input-group/SupportLabel.js +1 -1
  72. package/build/es/components/input-group/SupportLabel.js.map +1 -1
  73. package/build/es/components/link-list/LinkList.js +1 -1
  74. package/build/es/components/link-list/LinkList.js.map +1 -1
  75. package/build/es/components/menu/MenuItem.js +1 -1
  76. package/build/es/components/menu/MenuItem.js.map +1 -1
  77. package/build/es/components/menu/MenuItemCheckbox.js +1 -1
  78. package/build/es/components/menu/MenuItemCheckbox.js.map +1 -1
  79. package/build/es/components/message/DismissButton.js +1 -1
  80. package/build/es/components/message/DismissButton.js.map +1 -1
  81. package/build/es/components/message/Message.js +1 -1
  82. package/build/es/components/message/Message.js.map +1 -1
  83. package/build/es/components/modal/Modal.js +1 -1
  84. package/build/es/components/modal/Modal.js.map +1 -1
  85. package/build/es/components/pagination/Pagination.js +1 -1
  86. package/build/es/components/pagination/Pagination.js.map +1 -1
  87. package/build/es/components/radio-panel/RadioPanel.js +1 -1
  88. package/build/es/components/radio-panel/RadioPanel.js.map +1 -1
  89. package/build/es/components/select/NativeSelect.js +1 -1
  90. package/build/es/components/select/NativeSelect.js.map +1 -1
  91. package/build/es/components/select/Select.js +1 -1
  92. package/build/es/components/select/Select.js.map +1 -1
  93. package/build/es/components/system-message/common/DismissButton.js +1 -1
  94. package/build/es/components/system-message/common/DismissButton.js.map +1 -1
  95. package/build/es/components/system-message/common/MessageIcon.js +1 -1
  96. package/build/es/components/system-message/common/MessageIcon.js.map +1 -1
  97. package/build/es/components/table/ExpandableTableRow.js +1 -1
  98. package/build/es/components/table/ExpandableTableRow.js.map +1 -1
  99. package/build/es/components/table/TableHeader.js +1 -1
  100. package/build/es/components/table/TableHeader.js.map +1 -1
  101. package/build/es/components/table/TablePagination.js +1 -1
  102. package/build/es/components/table/TablePagination.js.map +1 -1
  103. package/build/es/components/tag/Tag.js +1 -1
  104. package/build/es/components/tag/Tag.js.map +1 -1
  105. package/build/es/components/text-input/BaseTextInput.d.ts +2 -2
  106. package/build/es/components/text-input/BaseTextInput.js.map +1 -1
  107. package/build/es/components/toast/Toast.js +1 -1
  108. package/build/es/components/toast/Toast.js.map +1 -1
  109. package/build/es/components/toggle-switch/ToggleSwitch.d.ts +1 -1
  110. package/build/es/components/toggle-switch/ToggleSwitch.js +1 -1
  111. package/build/es/components/toggle-switch/ToggleSwitch.js.map +1 -1
  112. package/build/es/components/tooltip/PopupTip.d.ts +1 -1
  113. package/build/es/components/tooltip/PopupTip.js +1 -1
  114. package/build/es/components/tooltip/PopupTip.js.map +1 -1
  115. package/package.json +2 -2
  116. package/styles/components/accordion/accordion.css +13 -5
  117. package/styles/components/accordion/accordion.min.css +7 -1
  118. package/styles/components/accordion/accordion.scss +17 -6
  119. package/styles/components/button/button.css +2 -2
  120. package/styles/components/button/button.min.css +1 -1
  121. package/styles/components/button/button.scss +2 -1
  122. package/styles/components/card/card.css +3 -1
  123. package/styles/components/card/card.scss +3 -1
  124. package/styles/components/checkbox/checkbox.css +4 -4
  125. package/styles/components/checkbox/checkbox.min.css +1 -1
  126. package/styles/components/checkbox/checkbox.scss +15 -5
  127. package/styles/components/combobox/combobox.css +4 -2
  128. package/styles/components/combobox/combobox.scss +20 -7
  129. package/styles/components/datepicker/_calendar.scss +6 -3
  130. package/styles/components/datepicker/datepicker.css +6 -3
  131. package/styles/components/datepicker/datepicker.scss +2 -1
  132. package/styles/components/feedback/feedback.css +2 -2
  133. package/styles/components/feedback/feedback.min.css +1 -1
  134. package/styles/components/feedback/feedback.scss +4 -1
  135. package/styles/components/icon/icon.scss +2 -2
  136. package/styles/components/input-group/_labels.scss +13 -5
  137. package/styles/components/input-group/input-group.css +2 -2
  138. package/styles/components/input-group/input-group.min.css +1 -1
  139. package/styles/components/input-group/input-group.scss +4 -1
  140. package/styles/components/link/link.scss +14 -2
  141. package/styles/components/list/list.scss +21 -6
  142. package/styles/components/loader/loader.css +6 -6
  143. package/styles/components/loader/loader.min.css +1 -1
  144. package/styles/components/loader/skeleton-loader.css +5 -5
  145. package/styles/components/loader/skeleton-loader.min.css +1 -1
  146. package/styles/components/loader/skeleton-loader.scss +2 -1
  147. package/styles/components/logo/logo.scss +12 -4
  148. package/styles/components/menu/menu.scss +2 -1
  149. package/styles/components/message/message.css +6 -3
  150. package/styles/components/message/message.min.css +1 -1
  151. package/styles/components/message/message.scss +11 -4
  152. package/styles/components/progress-bar/progress-bar.css +2 -2
  153. package/styles/components/progress-bar/progress-bar.min.css +1 -1
  154. package/styles/components/radio-button/radio-button.css +2 -2
  155. package/styles/components/radio-button/radio-button.min.css +1 -1
  156. package/styles/components/radio-button/radio-button.scss +24 -9
  157. package/styles/components/radio-panel/radio-panel.css +2 -2
  158. package/styles/components/radio-panel/radio-panel.min.css +1 -1
  159. package/styles/components/radio-panel/radio-panel.scss +2 -1
  160. package/styles/components/select/select.css +6 -3
  161. package/styles/components/select/select.scss +20 -7
  162. package/styles/components/system-message/system-message.css +2 -2
  163. package/styles/components/system-message/system-message.min.css +1 -1
  164. package/styles/components/system-message/system-message.scss +8 -3
  165. package/styles/components/table/_table-cell.scss +10 -4
  166. package/styles/components/table/_table-head.scss +2 -1
  167. package/styles/components/table/_table-row.scss +21 -9
  168. package/styles/components/tabs/tabs.css +6 -3
  169. package/styles/components/tabs/tabs.scss +6 -3
  170. package/styles/components/text-input/text-input.css +4 -2
  171. package/styles/components/text-input/text-input.scss +19 -8
  172. package/styles/components/toast/toast.css +7 -5
  173. package/styles/components/toast/toast.min.css +1 -1
  174. package/styles/components/toast/toast.scss +11 -4
  175. package/styles/components/toggle-switch/_toggle-slider.scss +2 -1
  176. package/styles/components/toggle-switch/toggle-switch.css +2 -1
  177. package/styles/components/toggle-switch/toggle-switch.scss +2 -1
  178. package/styles/components/tooltip/tooltip.scss +7 -2
  179. package/styles/core/_spacing.scss +12 -3
  180. package/styles/core/core.scss +7 -2
  181. package/styles/core/jkl/_convert.scss +4 -1
  182. package/styles/core/jkl/_helpers.scss +7 -1
  183. package/styles/core/jkl/_ornaments.scss +3 -1
  184. package/styles/core/jkl/_spacing.scss +4 -1
  185. package/styles/core/jkl/_tokens.scss +12 -4
  186. package/styles/core/jkl/_typography.scss +14 -6
  187. package/styles/fonts/webfonts.scss +14 -7
  188. package/styles/styles.css +86 -57
  189. package/styles/styles.min.css +7 -1
@@ -17,15 +17,15 @@
17
17
  animation: 2500ms linear infinite;
18
18
  }
19
19
  .jkl-loader__dot--left {
20
- animation-name: jkl-loader-left-spin-urslpy6;
20
+ animation-name: jkl-loader-left-spin-uhfnhvo;
21
21
  margin-right: 1.71em;
22
22
  }
23
23
  .jkl-loader__dot--middle {
24
- animation-name: jkl-loader-middle-spin-urslpyz;
24
+ animation-name: jkl-loader-middle-spin-uhfnhw8;
25
25
  margin-right: 1.9em;
26
26
  }
27
27
  .jkl-loader__dot--right {
28
- animation-name: jkl-loader-right-spin-urslpz3;
28
+ animation-name: jkl-loader-right-spin-uhfnhx4;
29
29
  }
30
30
  @media screen and (forced-colors: active) {
31
31
  .jkl-loader__dot {
@@ -53,7 +53,7 @@
53
53
  margin-right: 0.3em;
54
54
  }
55
55
 
56
- @keyframes jkl-loader-left-spin-urslpy6 {
56
+ @keyframes jkl-loader-left-spin-uhfnhvo {
57
57
  0% {
58
58
  transform: rotate(0) scale(0);
59
59
  }
@@ -67,7 +67,7 @@
67
67
  transform: rotate(180deg) scale(0);
68
68
  }
69
69
  }
70
- @keyframes jkl-loader-middle-spin-urslpyz {
70
+ @keyframes jkl-loader-middle-spin-uhfnhw8 {
71
71
  0% {
72
72
  transform: rotate(20deg) scale(0);
73
73
  }
@@ -84,7 +84,7 @@
84
84
  transform: rotate(200deg) scale(0);
85
85
  }
86
86
  }
87
- @keyframes jkl-loader-right-spin-urslpz3 {
87
+ @keyframes jkl-loader-right-spin-uhfnhx4 {
88
88
  0% {
89
89
  transform: rotate(40deg) scale(0);
90
90
  }
@@ -1 +1 @@
1
- .jkl-loader{display:flex}.jkl-loader--inline{display:inline-flex}.jkl-loader__dot{animation:2.5s linear infinite;background-color:currentColor;display:block;height:.9em;transform-origin:center;width:.9em}.jkl-loader__dot--left{animation-name:jkl-loader-left-spin-urslpy6;margin-right:1.71em}.jkl-loader__dot--middle{animation-name:jkl-loader-middle-spin-urslpyz;margin-right:1.9em}.jkl-loader__dot--right{animation-name:jkl-loader-right-spin-urslpz3}@media screen and (forced-colors:active){.jkl-loader__dot{background-color:CanvasText}}.jkl-button .jkl-loader>.jkl-loader__dot,.jkl-loader--medium>.jkl-loader__dot{height:.35em;width:.35em}.jkl-button .jkl-loader>.jkl-loader__dot--left,.jkl-loader--medium>.jkl-loader__dot--left{margin-right:.585em}.jkl-button .jkl-loader>.jkl-loader__dot--middle,.jkl-loader--medium>.jkl-loader__dot--middle{margin-right:.65em}.jkl-loader--small>.jkl-loader__dot{height:.25em;width:.25em}.jkl-loader--small>.jkl-loader__dot--left{margin-right:.27em}.jkl-loader--small>.jkl-loader__dot--middle{margin-right:.3em}@keyframes jkl-loader-left-spin-urslpy6{0%{transform:rotate(0) scale(0)}30%{transform:rotate(90deg) scale(1)}70%{transform:rotate(180deg) scale(0)}to{transform:rotate(180deg) scale(0)}}@keyframes jkl-loader-middle-spin-urslpyz{0%{transform:rotate(20deg) scale(0)}10%{transform:rotate(20deg) scale(0)}40%{transform:rotate(110deg) scale(1.4)}85%{transform:rotate(200deg) scale(0)}to{transform:rotate(200deg) scale(0)}}@keyframes jkl-loader-right-spin-urslpz3{0%{transform:rotate(40deg) scale(0)}20%{transform:rotate(40deg) scale(0)}50%{transform:rotate(130deg) scale(1)}to{transform:rotate(220deg) scale(0)}}
1
+ .jkl-loader{display:flex}.jkl-loader--inline{display:inline-flex}.jkl-loader__dot{animation:2.5s linear infinite;background-color:currentColor;display:block;height:.9em;transform-origin:center;width:.9em}.jkl-loader__dot--left{animation-name:jkl-loader-left-spin-uhfnhvo;margin-right:1.71em}.jkl-loader__dot--middle{animation-name:jkl-loader-middle-spin-uhfnhw8;margin-right:1.9em}.jkl-loader__dot--right{animation-name:jkl-loader-right-spin-uhfnhx4}@media screen and (forced-colors:active){.jkl-loader__dot{background-color:CanvasText}}.jkl-button .jkl-loader>.jkl-loader__dot,.jkl-loader--medium>.jkl-loader__dot{height:.35em;width:.35em}.jkl-button .jkl-loader>.jkl-loader__dot--left,.jkl-loader--medium>.jkl-loader__dot--left{margin-right:.585em}.jkl-button .jkl-loader>.jkl-loader__dot--middle,.jkl-loader--medium>.jkl-loader__dot--middle{margin-right:.65em}.jkl-loader--small>.jkl-loader__dot{height:.25em;width:.25em}.jkl-loader--small>.jkl-loader__dot--left{margin-right:.27em}.jkl-loader--small>.jkl-loader__dot--middle{margin-right:.3em}@keyframes jkl-loader-left-spin-uhfnhvo{0%{transform:rotate(0) scale(0)}30%{transform:rotate(90deg) scale(1)}70%{transform:rotate(180deg) scale(0)}to{transform:rotate(180deg) scale(0)}}@keyframes jkl-loader-middle-spin-uhfnhw8{0%{transform:rotate(20deg) scale(0)}10%{transform:rotate(20deg) scale(0)}40%{transform:rotate(110deg) scale(1.4)}85%{transform:rotate(200deg) scale(0)}to{transform:rotate(200deg) scale(0)}}@keyframes jkl-loader-right-spin-uhfnhx4{0%{transform:rotate(40deg) scale(0)}20%{transform:rotate(40deg) scale(0)}50%{transform:rotate(130deg) scale(1)}to{transform:rotate(220deg) scale(0)}}
@@ -36,7 +36,7 @@
36
36
  bottom: 0;
37
37
  width: 12.5rem;
38
38
  background: linear-gradient(89.17deg, rgba(249, 249, 249, 0) 0.8%, var(--jkl-skeleton-sweeper-color) 50.09%, rgba(249, 249, 249, 0) 96.31%);
39
- animation: var(--jkl-skeleton-sweep-duration) ease infinite jkl-sweep-u1qz1b4;
39
+ animation: var(--jkl-skeleton-sweep-duration) ease infinite jkl-sweep-ucf8c6b;
40
40
  }
41
41
  @media (width >= 0) and (max-width: 679px) {
42
42
  .jkl-skeleton-animation {
@@ -67,7 +67,7 @@
67
67
  @media screen and (forced-colors: active) {
68
68
  .jkl-skeleton-element {
69
69
  border: 1px solid CanvasText;
70
- animation: 2s ease infinite jkl-blink-u1qz1bf;
70
+ animation: 2s ease infinite jkl-blink-ucf8c6q;
71
71
  }
72
72
  }
73
73
 
@@ -123,11 +123,11 @@
123
123
  }
124
124
  @media screen and (forced-colors: active) {
125
125
  .jkl-skeleton-table {
126
- animation: 2s ease-in-out infinite jkl-blink-u1qz1bf;
126
+ animation: 2s ease-in-out infinite jkl-blink-ucf8c6q;
127
127
  }
128
128
  }
129
129
 
130
- @keyframes jkl-sweep-u1qz1b4 {
130
+ @keyframes jkl-sweep-ucf8c6b {
131
131
  0% {
132
132
  transform: translateX(calc(0vw - 200px));
133
133
  }
@@ -135,7 +135,7 @@
135
135
  transform: translateX(calc(100vw + 400px));
136
136
  }
137
137
  }
138
- @keyframes jkl-blink-u1qz1bf {
138
+ @keyframes jkl-blink-ucf8c6q {
139
139
  0% {
140
140
  opacity: 1;
141
141
  }
@@ -1 +1 @@
1
- @media screen and (prefers-color-scheme:light){:root{--jkl-skeleton-element-color:#e0dbd4;--jkl-skeleton-sweeper-color:#f9f9f9}}[data-theme=light]{--jkl-skeleton-element-color:#e0dbd4;--jkl-skeleton-sweeper-color:#f9f9f9}@media screen and (prefers-color-scheme:dark){:root{--jkl-skeleton-element-color:#636060;--jkl-skeleton-sweeper-color:#1b1917}}[data-theme=dark]{--jkl-skeleton-element-color:#636060;--jkl-skeleton-sweeper-color:#1b1917}.jkl-skeleton-animation{--jkl-skeleton-sweep-duration:3s;overflow:hidden;position:relative}.jkl-skeleton-animation:after{animation:var(--jkl-skeleton-sweep-duration) ease infinite jkl-sweep-u1qz1b4;background:linear-gradient(89.17deg,hsla(0,0%,98%,0) .8%,var(--jkl-skeleton-sweeper-color) 50.09%,hsla(0,0%,98%,0) 96.31%);bottom:0;content:" ";position:absolute;top:0;width:12.5rem}@media (width >= 0) and (max-width:679px){.jkl-skeleton-animation{width:9.375rem}}@media screen and (prefers-reduced-motion:reduce){.jkl-skeleton-animation:after{background:none}}@media screen and (forced-colors:active){.jkl-skeleton-animation:after{animation:none}}.jkl-skeleton-animation--compact:after{width:9.375rem}.jkl-skeleton-element{background-color:var(--jkl-skeleton-element-color);border-radius:.125rem}.jkl-skeleton-element--circle{border-radius:50%}@media screen and (forced-colors:active){.jkl-skeleton-element{animation:jkl-blink-u1qz1bf 2s ease infinite;border:1px solid CanvasText}}.jkl-skeleton-input{display:flex;flex-direction:column;gap:.75rem}.jkl-skeleton-input__checkbox{display:flex;flex-direction:row;flex-wrap:nowrap;gap:.5rem}@media (width >= 0) and (max-width:679px){.jkl-skeleton-input{gap:.5rem}}.jkl-skeleton-input--compact:after{gap:.5rem}.jkl-skeleton-table{display:flex;flex-direction:column}.jkl-skeleton-table__header,.jkl-skeleton-table__row{border-bottom:1px solid var(--jkl-skeleton-element-color);display:flex;flex-direction:row;justify-content:space-between}.jkl-skeleton-table__header{padding:.75rem .5rem}.jkl-skeleton-table__row{padding:1rem .5rem}@media (width >= 0) and (max-width:679px){.jkl-skeleton-table__header{padding:.5rem .25rem}.jkl-skeleton-table__row{padding:.75rem .25rem}}.jkl-skeleton-table--compact::after__header{padding:.5rem .25rem}.jkl-skeleton-table--compact::after__row{padding:.75rem .25rem}@media screen and (forced-colors:active){.jkl-skeleton-table{animation:jkl-blink-u1qz1bf 2s ease-in-out infinite}}@keyframes jkl-sweep-u1qz1b4{0%{transform:translateX(-200px)}80%,to{transform:translateX(calc(100vw + 400px))}}@keyframes jkl-blink-u1qz1bf{0%{opacity:1}40%,50%{opacity:.3}70%,to{opacity:1}}
1
+ @media screen and (prefers-color-scheme:light){:root{--jkl-skeleton-element-color:#e0dbd4;--jkl-skeleton-sweeper-color:#f9f9f9}}[data-theme=light]{--jkl-skeleton-element-color:#e0dbd4;--jkl-skeleton-sweeper-color:#f9f9f9}@media screen and (prefers-color-scheme:dark){:root{--jkl-skeleton-element-color:#636060;--jkl-skeleton-sweeper-color:#1b1917}}[data-theme=dark]{--jkl-skeleton-element-color:#636060;--jkl-skeleton-sweeper-color:#1b1917}.jkl-skeleton-animation{--jkl-skeleton-sweep-duration:3s;overflow:hidden;position:relative}.jkl-skeleton-animation:after{animation:var(--jkl-skeleton-sweep-duration) ease infinite jkl-sweep-ucf8c6b;background:linear-gradient(89.17deg,hsla(0,0%,98%,0) .8%,var(--jkl-skeleton-sweeper-color) 50.09%,hsla(0,0%,98%,0) 96.31%);bottom:0;content:" ";position:absolute;top:0;width:12.5rem}@media (width >= 0) and (max-width:679px){.jkl-skeleton-animation{width:9.375rem}}@media screen and (prefers-reduced-motion:reduce){.jkl-skeleton-animation:after{background:none}}@media screen and (forced-colors:active){.jkl-skeleton-animation:after{animation:none}}.jkl-skeleton-animation--compact:after{width:9.375rem}.jkl-skeleton-element{background-color:var(--jkl-skeleton-element-color);border-radius:.125rem}.jkl-skeleton-element--circle{border-radius:50%}@media screen and (forced-colors:active){.jkl-skeleton-element{animation:jkl-blink-ucf8c6q 2s ease infinite;border:1px solid CanvasText}}.jkl-skeleton-input{display:flex;flex-direction:column;gap:.75rem}.jkl-skeleton-input__checkbox{display:flex;flex-direction:row;flex-wrap:nowrap;gap:.5rem}@media (width >= 0) and (max-width:679px){.jkl-skeleton-input{gap:.5rem}}.jkl-skeleton-input--compact:after{gap:.5rem}.jkl-skeleton-table{display:flex;flex-direction:column}.jkl-skeleton-table__header,.jkl-skeleton-table__row{border-bottom:1px solid var(--jkl-skeleton-element-color);display:flex;flex-direction:row;justify-content:space-between}.jkl-skeleton-table__header{padding:.75rem .5rem}.jkl-skeleton-table__row{padding:1rem .5rem}@media (width >= 0) and (max-width:679px){.jkl-skeleton-table__header{padding:.5rem .25rem}.jkl-skeleton-table__row{padding:.75rem .25rem}}.jkl-skeleton-table--compact::after__header{padding:.5rem .25rem}.jkl-skeleton-table--compact::after__row{padding:.75rem .25rem}@media screen and (forced-colors:active){.jkl-skeleton-table{animation:jkl-blink-ucf8c6q 2s ease-in-out infinite}}@keyframes jkl-sweep-ucf8c6b{0%{transform:translateX(-200px)}80%,to{transform:translateX(calc(100vw + 400px))}}@keyframes jkl-blink-ucf8c6q{0%{opacity:1}40%,50%{opacity:.3}70%,to{opacity:1}}
@@ -33,7 +33,8 @@ $_blink-animation-name: jkl-blink-#{string.unique-id()};
33
33
  var(--jkl-skeleton-sweeper-color) 50.09%,
34
34
  rgb(249 249 249 / 0%) 96.31%
35
35
  );
36
- animation: var(--jkl-skeleton-sweep-duration) ease infinite $_sweep-animation-name;
36
+ animation: var(--jkl-skeleton-sweep-duration) ease infinite
37
+ $_sweep-animation-name;
37
38
  }
38
39
 
39
40
  @include jkl.small-device {
@@ -13,7 +13,10 @@
13
13
  color: var(--jkl-logo-color);
14
14
 
15
15
  // I valget mellom å følge merkevaren og å være lesbar velger vi å være lesbar.
16
- @include jkl.forced-colors-svg-fallback($stroke: CanvasText, $fill: CanvasText);
16
+ @include jkl.forced-colors-svg-fallback(
17
+ $stroke: CanvasText,
18
+ $fill: CanvasText
19
+ );
17
20
 
18
21
  &__F {
19
22
  transform-origin: 30px 132px; /* Is connected to the viewbox of the logo, change at your own risk */
@@ -45,7 +48,8 @@
45
48
 
46
49
  &--animated {
47
50
  & .jkl-logo__F {
48
- transition: transform jkl.timing("expressive") jkl.timing("energetic") cubic-bezier(0.5, 0, 0.62, 1);
51
+ transition: transform jkl.timing("expressive")
52
+ jkl.timing("energetic") cubic-bezier(0.5, 0, 0.62, 1);
49
53
  }
50
54
 
51
55
  & .jkl-logo__F-line {
@@ -53,7 +57,8 @@
53
57
  }
54
58
 
55
59
  & .jkl-logo__remtind {
56
- transition: opacity jkl.timing("expressive") jkl.timing("energetic") ease-in,
60
+ transition: opacity jkl.timing("expressive") jkl.timing("energetic")
61
+ ease-in,
57
62
  transform jkl.timing("expressive") ease;
58
63
  }
59
64
  }
@@ -69,7 +74,10 @@
69
74
  color: var(--logo-stamp-color);
70
75
 
71
76
  // I valget mellom å følge merkevaren og å være lesbar velger vi å være lesbar.
72
- @include jkl.forced-colors-svg-fallback($stroke: CanvasText, $fill: CanvasText);
77
+ @include jkl.forced-colors-svg-fallback(
78
+ $stroke: CanvasText,
79
+ $fill: CanvasText
80
+ );
73
81
 
74
82
  &--animated {
75
83
  .jkl-logo-stamp__text {
@@ -30,6 +30,7 @@
30
30
  }
31
31
 
32
32
  & &[data-placement="bottom-start"] {
33
- box-shadow: rgba(0 0 0 / 20%) 0 -1px 2px 0, rgba(0 0 0 / 14%) -1px 2px 2px 0, rgba(0 0 0 / 12%) 3px 1px 5px 0;
33
+ box-shadow: rgba(0 0 0 / 20%) 0 -1px 2px 0,
34
+ rgba(0 0 0 / 14%) -1px 2px 2px 0, rgba(0 0 0 / 12%) 3px 1px 5px 0;
34
35
  }
35
36
  }
@@ -132,7 +132,10 @@
132
132
  }
133
133
  }
134
134
  .jkl-message__dismiss-button::after {
135
- --tap-increment: calc((var(--jkl-message-dismiss-button-size) - 1.25rem) / 2 * -1);
135
+ --tap-increment: calc(
136
+ (var(--jkl-message-dismiss-button-size) - 1.25rem) / 2 *
137
+ - 1
138
+ );
136
139
  content: "";
137
140
  position: absolute;
138
141
  inset: var(--tap-increment) var(--tap-increment) var(--tap-increment) var(--tap-increment);
@@ -168,7 +171,7 @@
168
171
  --background-color: var(--jkl-color-background-alert-success);
169
172
  }
170
173
  .jkl-message--dismissed {
171
- animation: jkl-dismiss-uc2f4ew 400ms ease-in-out forwards;
174
+ animation: jkl-dismiss-u1i2opb 400ms ease-in-out forwards;
172
175
  transition: visibility 0ms 400ms;
173
176
  visibility: hidden;
174
177
  }
@@ -188,7 +191,7 @@
188
191
  }
189
192
  }
190
193
 
191
- @keyframes jkl-dismiss-uc2f4ew {
194
+ @keyframes jkl-dismiss-u1i2opb {
192
195
  from {
193
196
  opacity: 1;
194
197
  transform: translate3d(0, 0, 0);
@@ -1 +1 @@
1
- :root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-message-content-font-size:var(--jkl-body-font-size);--jkl-message-content-line-height:var(--jkl-body-line-height);--jkl-message-content-font-weight:var(--jkl-body-font-weight);--jkl-message-title-font-size:var(--jkl-heading-4-font-size);--jkl-message-title-line-height:var(--jkl-heading-4-line-height);--jkl-message-title-font-weight:var(--jkl-heading-4-font-weight);--jkl-message-icon-size:1.5rem;--jkl-message-icon-left:1rem;--jkl-message-icon-top:1.5rem;--jkl-message-title-margin:0 0 0.25rem 0;--jkl-message-dismiss-button-size:2.75rem;--jkl-message-gap:0.75rem;--jkl-message-padding:1rem 0.75rem}@media (min-width:680px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-message-gap:1rem;--jkl-message-padding:1.5rem 1rem}}[data-density=compact],[data-layout-density=compact]{--jkl-message-content-font-size:var(--jkl-small-font-size);--jkl-message-content-line-height:var(--jkl-small-line-height);--jkl-message-content-font-weight:var(--jkl-small-font-weight);--jkl-message-title-font-size:var(--jkl-heading-5-font-size);--jkl-message-title-line-height:var(--jkl-heading-5-line-height);--jkl-message-title-font-weight:var(--jkl-heading-5-font-weight);--jkl-message-icon-size:1.25rem;--jkl-message-icon-left:0.375rem;--jkl-message-icon-top:0.875rem;--jkl-message-dismiss-button-size:2rem;--jkl-message-gap:0.5rem;--jkl-message-padding:0.75rem 0.5rem}.jkl-message{--background-color:var(--jkl-color-background-alert-neutral);--text-color:var(--jkl-color-text-on-alert);align-items:start;background-color:var(--background-color);border-radius:.25rem;box-sizing:border-box;color:var(--text-color);display:grid;grid-template-areas:"icon content dismiss";grid-template-columns:auto 1fr auto;max-width:35rem;padding:var(--jkl-message-padding);width:100%}.jkl-message__icon{grid-area:icon;margin-right:var(--jkl-message-gap);width:var(--jkl-message-icon-size)}@media screen and (forced-colors:active){.jkl-message__icon,.jkl-message__icon path,.jkl-message__icon svg{stroke:CanvasText}}.jkl-message__content{grid-area:content}.jkl-message__message{font-size:var(--jkl-message-content-font-size);font-weight:var(--jkl-message-content-font-weight);line-height:var(--jkl-message-content-line-height);margin-top:-.125rem}.jkl-message__title{font-size:var(--jkl-message-title-font-size);font-weight:var(--jkl-message-title-font-weight);line-height:var(--jkl-message-title-line-height);margin:var(--jkl-message-title-margin)}.jkl-message__title~.jkl-message__message{margin-top:0}.jkl-message__dismiss-button{background-color:transparent;border-style:none;color:inherit;cursor:pointer;grid-area:dismiss;justify-self:end;margin-left:var(--jkl-message-gap);outline:0;outline-style:none;padding:0;position:relative}.jkl-message__dismiss-button:active,.jkl-message__dismiss-button:focus,.jkl-message__dismiss-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-message__dismiss-button{border-style:revert;outline:revert;outline-style:revert}.jkl-message__dismiss-button:active,.jkl-message__dismiss-button:focus,.jkl-message__dismiss-button:hover{outline:revert;outline-style:revert}}@media screen and (forced-colors:active){.jkl-message__dismiss-button,.jkl-message__dismiss-button path,.jkl-message__dismiss-button svg{stroke:ButtonText}.jkl-message__dismiss-button{background-color:ButtonFace}}.jkl-message__dismiss-button:after{--tap-increment:calc((var(--jkl-message-dismiss-button-size) - 1.25rem)/2*-1);content:"";inset:var(--tap-increment) var(--tap-increment) var(--tap-increment) var(--tap-increment);position:absolute}.jkl-message__dismiss-button:hover{color:#636060}@media screen and (forced-colors:active){.jkl-message__dismiss-button:hover{stroke:ButtonText}.jkl-message__dismiss-button:hover path,.jkl-message__dismiss-button:hover svg{stroke:ButtonText}}.jkl-message__dismiss-button:focus-visible{outline:2px solid var(--jkl-color-border-action);outline-offset:0}.jkl-message--full{max-width:100%}.jkl-message--info{--background-color:var(--jkl-color-background-alert-info)}.jkl-message--warning{--background-color:var(--jkl-color-background-alert-warning)}.jkl-message--error{--background-color:var(--jkl-color-background-alert-error)}.jkl-message--success{--background-color:var(--jkl-color-background-alert-success)}.jkl-message--dismissed{animation:jkl-dismiss-uc2f4ew .4s ease-in-out forwards;transition:visibility 0s .4s;visibility:hidden}@media screen and (forced-colors:active){.jkl-message{border:2px solid CanvasText}.jkl-message--info{border-style:dotted}.jkl-message--warning{border-style:dashed}.jkl-message--error{border-style:double;border-width:4px}}@keyframes jkl-dismiss-uc2f4ew{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,-50%,0)}}.jkl-form-error-message{padding-bottom:2.5rem}
1
+ :root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-message-content-font-size:var(--jkl-body-font-size);--jkl-message-content-line-height:var(--jkl-body-line-height);--jkl-message-content-font-weight:var(--jkl-body-font-weight);--jkl-message-title-font-size:var(--jkl-heading-4-font-size);--jkl-message-title-line-height:var(--jkl-heading-4-line-height);--jkl-message-title-font-weight:var(--jkl-heading-4-font-weight);--jkl-message-icon-size:1.5rem;--jkl-message-icon-left:1rem;--jkl-message-icon-top:1.5rem;--jkl-message-title-margin:0 0 0.25rem 0;--jkl-message-dismiss-button-size:2.75rem;--jkl-message-gap:0.75rem;--jkl-message-padding:1rem 0.75rem}@media (min-width:680px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-message-gap:1rem;--jkl-message-padding:1.5rem 1rem}}[data-density=compact],[data-layout-density=compact]{--jkl-message-content-font-size:var(--jkl-small-font-size);--jkl-message-content-line-height:var(--jkl-small-line-height);--jkl-message-content-font-weight:var(--jkl-small-font-weight);--jkl-message-title-font-size:var(--jkl-heading-5-font-size);--jkl-message-title-line-height:var(--jkl-heading-5-line-height);--jkl-message-title-font-weight:var(--jkl-heading-5-font-weight);--jkl-message-icon-size:1.25rem;--jkl-message-icon-left:0.375rem;--jkl-message-icon-top:0.875rem;--jkl-message-dismiss-button-size:2rem;--jkl-message-gap:0.5rem;--jkl-message-padding:0.75rem 0.5rem}.jkl-message{--background-color:var(--jkl-color-background-alert-neutral);--text-color:var(--jkl-color-text-on-alert);align-items:start;background-color:var(--background-color);border-radius:.25rem;box-sizing:border-box;color:var(--text-color);display:grid;grid-template-areas:"icon content dismiss";grid-template-columns:auto 1fr auto;max-width:35rem;padding:var(--jkl-message-padding);width:100%}.jkl-message__icon{grid-area:icon;margin-right:var(--jkl-message-gap);width:var(--jkl-message-icon-size)}@media screen and (forced-colors:active){.jkl-message__icon,.jkl-message__icon path,.jkl-message__icon svg{stroke:CanvasText}}.jkl-message__content{grid-area:content}.jkl-message__message{font-size:var(--jkl-message-content-font-size);font-weight:var(--jkl-message-content-font-weight);line-height:var(--jkl-message-content-line-height);margin-top:-.125rem}.jkl-message__title{font-size:var(--jkl-message-title-font-size);font-weight:var(--jkl-message-title-font-weight);line-height:var(--jkl-message-title-line-height);margin:var(--jkl-message-title-margin)}.jkl-message__title~.jkl-message__message{margin-top:0}.jkl-message__dismiss-button{background-color:transparent;border-style:none;color:inherit;cursor:pointer;grid-area:dismiss;justify-self:end;margin-left:var(--jkl-message-gap);outline:0;outline-style:none;padding:0;position:relative}.jkl-message__dismiss-button:active,.jkl-message__dismiss-button:focus,.jkl-message__dismiss-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-message__dismiss-button{border-style:revert;outline:revert;outline-style:revert}.jkl-message__dismiss-button:active,.jkl-message__dismiss-button:focus,.jkl-message__dismiss-button:hover{outline:revert;outline-style:revert}}@media screen and (forced-colors:active){.jkl-message__dismiss-button,.jkl-message__dismiss-button path,.jkl-message__dismiss-button svg{stroke:ButtonText}.jkl-message__dismiss-button{background-color:ButtonFace}}.jkl-message__dismiss-button:after{--tap-increment:calc((var(--jkl-message-dismiss-button-size) - 1.25rem)/2*-1);content:"";inset:var(--tap-increment) var(--tap-increment) var(--tap-increment) var(--tap-increment);position:absolute}.jkl-message__dismiss-button:hover{color:#636060}@media screen and (forced-colors:active){.jkl-message__dismiss-button:hover{stroke:ButtonText}.jkl-message__dismiss-button:hover path,.jkl-message__dismiss-button:hover svg{stroke:ButtonText}}.jkl-message__dismiss-button:focus-visible{outline:2px solid var(--jkl-color-border-action);outline-offset:0}.jkl-message--full{max-width:100%}.jkl-message--info{--background-color:var(--jkl-color-background-alert-info)}.jkl-message--warning{--background-color:var(--jkl-color-background-alert-warning)}.jkl-message--error{--background-color:var(--jkl-color-background-alert-error)}.jkl-message--success{--background-color:var(--jkl-color-background-alert-success)}.jkl-message--dismissed{animation:jkl-dismiss-u1i2opb .4s ease-in-out forwards;transition:visibility 0s .4s;visibility:hidden}@media screen and (forced-colors:active){.jkl-message{border:2px solid CanvasText}.jkl-message--info{border-style:dotted}.jkl-message--warning{border-style:dashed}.jkl-message--error{border-style:double;border-width:4px}}@keyframes jkl-dismiss-u1i2opb{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,-50%,0)}}.jkl-form-error-message{padding-bottom:2.5rem}
@@ -71,7 +71,9 @@ $_dismiss-hover-color: jkl.$color-stein;
71
71
  &__message {
72
72
  @include jkl.use-font-variables("jkl-message-content");
73
73
 
74
- margin-top: jkl.rem(-2px); // Offset for å aligne med ikon hvis uten tittel.
74
+ margin-top: jkl.rem(
75
+ -2px
76
+ ); // Offset for å aligne med ikon hvis uten tittel.
75
77
  }
76
78
 
77
79
  &__title {
@@ -103,10 +105,14 @@ $_dismiss-hover-color: jkl.$color-stein;
103
105
 
104
106
  // Sørg for å ha en stor nok touch target.
105
107
  &::after {
106
- --tap-increment: calc((var(--jkl-message-dismiss-button-size) - #{jkl.rem(20px)}) / 2 * -1);
108
+ --tap-increment: calc(
109
+ (var(--jkl-message-dismiss-button-size) - #{jkl.rem(20px)}) / 2 *
110
+ - 1
111
+ );
107
112
  content: "";
108
113
  position: absolute;
109
- inset: var(--tap-increment) var(--tap-increment) var(--tap-increment) var(--tap-increment);
114
+ inset: var(--tap-increment) var(--tap-increment)
115
+ var(--tap-increment) var(--tap-increment);
110
116
  }
111
117
 
112
118
  &:hover {
@@ -140,7 +146,8 @@ $_dismiss-hover-color: jkl.$color-stein;
140
146
  }
141
147
 
142
148
  &--dismissed {
143
- animation: $_dismiss-animation-name $_dismiss-animation-duration ease-in-out forwards;
149
+ animation: $_dismiss-animation-name $_dismiss-animation-duration
150
+ ease-in-out forwards;
144
151
  transition: visibility 0ms $_dismiss-animation-duration;
145
152
  visibility: hidden;
146
153
  }
@@ -37,11 +37,11 @@
37
37
  }
38
38
 
39
39
  .jkl-countdown__tracker {
40
- animation: jkl-downcount-u4asdgy var(--duration) linear forwards;
40
+ animation: jkl-downcount-uo4haz1 var(--duration) linear forwards;
41
41
  animation-play-state: var(--play-state, running);
42
42
  }
43
43
 
44
- @keyframes jkl-downcount-u4asdgy {
44
+ @keyframes jkl-downcount-uo4haz1 {
45
45
  from {
46
46
  width: 100%;
47
47
  }
@@ -1 +1 @@
1
- .jkl-countdown,.jkl-progress-bar{--track-color:var(--jkl-color-border-separator);--bar-color:var(--jkl-color-border-input-focus);--bar-height:0.25rem;background-color:var(--track-color);border-radius:6.25rem;height:var(--bar-height);overflow:hidden;width:100%}.jkl-countdown__tracker,.jkl-progress-bar__tracker{background-color:var(--bar-color);display:block;height:var(--bar-height)}@media screen and (forced-colors:active){.jkl-countdown,.jkl-progress-bar{background-color:Canvas}.jkl-countdown__tracker,.jkl-progress-bar__tracker{background-color:CanvasText}}.jkl-progress-bar__tracker{transition-duration:.15s;transition-property:width;transition-timing-function:ease}.jkl-countdown__tracker{animation:jkl-downcount-u4asdgy var(--duration) linear forwards;animation-play-state:var(--play-state,running)}@keyframes jkl-downcount-u4asdgy{0%{width:100%}to{width:0}}
1
+ .jkl-countdown,.jkl-progress-bar{--track-color:var(--jkl-color-border-separator);--bar-color:var(--jkl-color-border-input-focus);--bar-height:0.25rem;background-color:var(--track-color);border-radius:6.25rem;height:var(--bar-height);overflow:hidden;width:100%}.jkl-countdown__tracker,.jkl-progress-bar__tracker{background-color:var(--bar-color);display:block;height:var(--bar-height)}@media screen and (forced-colors:active){.jkl-countdown,.jkl-progress-bar{background-color:Canvas}.jkl-countdown__tracker,.jkl-progress-bar__tracker{background-color:CanvasText}}.jkl-progress-bar__tracker{transition-duration:.15s;transition-property:width;transition-timing-function:ease}.jkl-countdown__tracker{animation:jkl-downcount-uo4haz1 var(--duration) linear forwards;animation-play-state:var(--play-state,running)}@keyframes jkl-downcount-uo4haz1{0%{width:100%}to{width:0}}
@@ -44,7 +44,7 @@
44
44
  --jkl-radio-button-label-font-weight: var(--jkl-small-font-weight);
45
45
  }
46
46
 
47
- @keyframes jkl-dot-in-u9ahwiq {
47
+ @keyframes jkl-dot-in-uws9slo {
48
48
  0% {
49
49
  transform: scale(0.8);
50
50
  }
@@ -87,7 +87,7 @@
87
87
  }
88
88
  .jkl-radio-button__input:checked + .jkl-radio-button__label > .jkl-radio-button__dot::after {
89
89
  --dot-color: var(--jkl-color-border-action);
90
- animation: jkl-dot-in-u9ahwiq 150ms ease;
90
+ animation: jkl-dot-in-uws9slo 150ms ease;
91
91
  }
92
92
  @media screen and (forced-colors: active) {
93
93
  .jkl-radio-button__input:checked + .jkl-radio-button__label > .jkl-radio-button__dot::after {
@@ -1 +1 @@
1
- :root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-radio-button-height:3rem;--jkl-radio-button-line-height:2rem;--jkl-radio-button-size:1.5rem;--jkl-radio-button-text-margin:0.5rem 0;--jkl-radio-button-text-transform:translate3d(0,0.0625rem,0);--jkl-radio-button-dot-margin:0.75rem 0.5rem 0.75rem 0;--jkl-radio-button-dot-size:1rem;--jkl-radio-button-label-font-size:var(--jkl-body-font-size);--jkl-radio-button-label-line-height:var(--jkl-body-line-height);--jkl-radio-button-label-font-weight:var(--jkl-body-font-weight)}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-radio-button-height:2.5rem;--jkl-radio-button-line-height:1.75rem;--jkl-radio-button-size:1.5rem;--jkl-radio-button-text-margin:0.5rem 0;--jkl-radio-button-text-transform:translateZ(0);--jkl-radio-button-dot-margin:0.625rem 0.5rem 0.625rem 0;--jkl-radio-button-dot-size:1rem}}[data-density=compact],[data-layout-density=compact]{--jkl-radio-button-height:1.75rem;--jkl-radio-button-line-height:1.5rem;--jkl-radio-button-size:1.125rem;--jkl-radio-button-text-margin:0.25rem 0;--jkl-radio-button-text-transform:translateZ(0);--jkl-radio-button-dot-margin:0.4375rem 0.5rem 0.4375rem 0;--jkl-radio-button-dot-size:0.625rem;--jkl-radio-button-label-font-size:var(--jkl-small-font-size);--jkl-radio-button-label-line-height:var(--jkl-small-line-height);--jkl-radio-button-label-font-weight:var(--jkl-small-font-weight)}@keyframes jkl-dot-in-u9ahwiq{0%{transform:scale(.8)}to{transform:scale(1)}}.jkl-radio-button{--ring-color:var(--jkl-color-border-action);--dot-color:transparent;--background-color:transparent;--text-color:var(--jkl-color-text-default);border-style:none;color:var(--text-color);display:flex;min-height:var(--jkl-radio-button-height);outline:0;outline-style:none;position:relative}.jkl-radio-button:active,.jkl-radio-button:focus,.jkl-radio-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-radio-button{border-style:revert;outline:revert;outline-style:revert}.jkl-radio-button:active,.jkl-radio-button:focus,.jkl-radio-button:hover{outline:revert;outline-style:revert}}.jkl-radio-button__input{opacity:0;position:absolute;top:-6px}.jkl-radio-button__input:checked+.jkl-radio-button__label>.jkl-radio-button__dot:after{--dot-color:var(--jkl-color-border-action);animation:jkl-dot-in-u9ahwiq .15s ease}@media screen and (forced-colors:active){.jkl-radio-button__input:checked+.jkl-radio-button__label>.jkl-radio-button__dot:after{background-color:ButtonText}}.jkl-radio-button--error .jkl-radio-button__input:checked+.jkl-radio-button__label>.jkl-radio-button__dot:after{--background-color:var(--jkl-color-background-alert-error);--dot-color:var(--jkl-color-text-on-alert)}.jkl-radio-button__input:focus-visible+.jkl-radio-button__label{--background-color:var(--jkl-color-background-input-focus)}.jkl-radio-button__input:focus-visible+.jkl-radio-button__label>.jkl-radio-button__dot{outline:2px solid var(--jkl-color-border-action);outline-offset:2px}.jkl-radio-button--error .jkl-radio-button__input:focus-visible+.jkl-radio-button__label{--background-color:var(--jkl-color-background-alert-error);--dot-color:var(--jkl-color-text-on-alert)}.jkl-radio-button__label{align-items:flex-start;cursor:pointer;display:flex;font-size:var(--jkl-radio-button-label-font-size);font-weight:var(--jkl-radio-button-label-font-weight);line-height:var(--jkl-radio-button-label-line-height)}.jkl-radio-button__label:hover>.jkl-radio-button__dot{outline:1px solid var(--ring-color)}.jkl-radio-button__label:active>.jkl-radio-button__dot .jkl-radio-button__label:after{scale:.9}.jkl-radio-button__dot{background-color:var(--background-color);border:.0625rem solid var(--ring-color);border-radius:50%;box-sizing:border-box;display:inline-block;flex-shrink:0;height:var(--jkl-radio-button-size);margin:var(--jkl-radio-button-dot-margin);position:relative;transition-duration:.15s;transition-property:background-color,outline;transition-timing-function:ease;width:var(--jkl-radio-button-size)}.jkl-radio-button__dot:after{background-color:var(--dot-color);border-radius:50%;content:"";height:var(--jkl-radio-button-dot-size);left:50%;position:absolute;scale:1;top:50%;transition-duration:.15s;transition-property:transform;transition-timing-function:ease;translate:-50% -50%;width:var(--jkl-radio-button-dot-size)}@media screen and (forced-colors:active){.jkl-radio-button__dot{border:1px solid ButtonText;outline:revert}}.jkl-radio-button__text{display:inline-block;margin:var(--jkl-radio-button-text-margin);transform:var(--jkl-radio-button-text-transform)}.jkl-radio-button--error{--background-color:var(--jkl-color-background-alert-error)}.jkl-radio-button--inline{display:inline-flex;margin-right:1.5rem;margin-top:unset}.jkl-radio-button+.jkl-form-support-label{margin-bottom:.5rem;margin-left:calc(var(--jkl-radio-button-size) + .5rem);margin-top:-.375rem}
1
+ :root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-radio-button-height:3rem;--jkl-radio-button-line-height:2rem;--jkl-radio-button-size:1.5rem;--jkl-radio-button-text-margin:0.5rem 0;--jkl-radio-button-text-transform:translate3d(0,0.0625rem,0);--jkl-radio-button-dot-margin:0.75rem 0.5rem 0.75rem 0;--jkl-radio-button-dot-size:1rem;--jkl-radio-button-label-font-size:var(--jkl-body-font-size);--jkl-radio-button-label-line-height:var(--jkl-body-line-height);--jkl-radio-button-label-font-weight:var(--jkl-body-font-weight)}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-radio-button-height:2.5rem;--jkl-radio-button-line-height:1.75rem;--jkl-radio-button-size:1.5rem;--jkl-radio-button-text-margin:0.5rem 0;--jkl-radio-button-text-transform:translateZ(0);--jkl-radio-button-dot-margin:0.625rem 0.5rem 0.625rem 0;--jkl-radio-button-dot-size:1rem}}[data-density=compact],[data-layout-density=compact]{--jkl-radio-button-height:1.75rem;--jkl-radio-button-line-height:1.5rem;--jkl-radio-button-size:1.125rem;--jkl-radio-button-text-margin:0.25rem 0;--jkl-radio-button-text-transform:translateZ(0);--jkl-radio-button-dot-margin:0.4375rem 0.5rem 0.4375rem 0;--jkl-radio-button-dot-size:0.625rem;--jkl-radio-button-label-font-size:var(--jkl-small-font-size);--jkl-radio-button-label-line-height:var(--jkl-small-line-height);--jkl-radio-button-label-font-weight:var(--jkl-small-font-weight)}@keyframes jkl-dot-in-uws9slo{0%{transform:scale(.8)}to{transform:scale(1)}}.jkl-radio-button{--ring-color:var(--jkl-color-border-action);--dot-color:transparent;--background-color:transparent;--text-color:var(--jkl-color-text-default);border-style:none;color:var(--text-color);display:flex;min-height:var(--jkl-radio-button-height);outline:0;outline-style:none;position:relative}.jkl-radio-button:active,.jkl-radio-button:focus,.jkl-radio-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-radio-button{border-style:revert;outline:revert;outline-style:revert}.jkl-radio-button:active,.jkl-radio-button:focus,.jkl-radio-button:hover{outline:revert;outline-style:revert}}.jkl-radio-button__input{opacity:0;position:absolute;top:-6px}.jkl-radio-button__input:checked+.jkl-radio-button__label>.jkl-radio-button__dot:after{--dot-color:var(--jkl-color-border-action);animation:jkl-dot-in-uws9slo .15s ease}@media screen and (forced-colors:active){.jkl-radio-button__input:checked+.jkl-radio-button__label>.jkl-radio-button__dot:after{background-color:ButtonText}}.jkl-radio-button--error .jkl-radio-button__input:checked+.jkl-radio-button__label>.jkl-radio-button__dot:after{--background-color:var(--jkl-color-background-alert-error);--dot-color:var(--jkl-color-text-on-alert)}.jkl-radio-button__input:focus-visible+.jkl-radio-button__label{--background-color:var(--jkl-color-background-input-focus)}.jkl-radio-button__input:focus-visible+.jkl-radio-button__label>.jkl-radio-button__dot{outline:2px solid var(--jkl-color-border-action);outline-offset:2px}.jkl-radio-button--error .jkl-radio-button__input:focus-visible+.jkl-radio-button__label{--background-color:var(--jkl-color-background-alert-error);--dot-color:var(--jkl-color-text-on-alert)}.jkl-radio-button__label{align-items:flex-start;cursor:pointer;display:flex;font-size:var(--jkl-radio-button-label-font-size);font-weight:var(--jkl-radio-button-label-font-weight);line-height:var(--jkl-radio-button-label-line-height)}.jkl-radio-button__label:hover>.jkl-radio-button__dot{outline:1px solid var(--ring-color)}.jkl-radio-button__label:active>.jkl-radio-button__dot .jkl-radio-button__label:after{scale:.9}.jkl-radio-button__dot{background-color:var(--background-color);border:.0625rem solid var(--ring-color);border-radius:50%;box-sizing:border-box;display:inline-block;flex-shrink:0;height:var(--jkl-radio-button-size);margin:var(--jkl-radio-button-dot-margin);position:relative;transition-duration:.15s;transition-property:background-color,outline;transition-timing-function:ease;width:var(--jkl-radio-button-size)}.jkl-radio-button__dot:after{background-color:var(--dot-color);border-radius:50%;content:"";height:var(--jkl-radio-button-dot-size);left:50%;position:absolute;scale:1;top:50%;transition-duration:.15s;transition-property:transform;transition-timing-function:ease;translate:-50% -50%;width:var(--jkl-radio-button-dot-size)}@media screen and (forced-colors:active){.jkl-radio-button__dot{border:1px solid ButtonText;outline:revert}}.jkl-radio-button__text{display:inline-block;margin:var(--jkl-radio-button-text-margin);transform:var(--jkl-radio-button-text-transform)}.jkl-radio-button--error{--background-color:var(--jkl-color-background-alert-error)}.jkl-radio-button--inline{display:inline-flex;margin-right:1.5rem;margin-top:unset}.jkl-radio-button+.jkl-form-support-label{margin-bottom:.5rem;margin-left:calc(var(--jkl-radio-button-size) + .5rem);margin-top:-.375rem}
@@ -14,12 +14,17 @@ $_radio-button-dot-animation-name: jkl-dot-in-#{string.unique-id()};
14
14
  --jkl-radio-button-height: #{$_radio-button-height};
15
15
  --jkl-radio-button-line-height: #{$_radio-button-line-height};
16
16
  --jkl-radio-button-size: #{$_radio-button-size};
17
- --jkl-radio-button-text-margin: #{(($_radio-button-height - $_radio-button-line-height) * 0.5)} 0;
17
+ --jkl-radio-button-text-margin: #{(
18
+ ($_radio-button-height - $_radio-button-line-height) * 0.5
19
+ )} 0;
18
20
  --jkl-radio-button-text-transform: translate3d(0, #{jkl.rem(1px)}, 0);
19
- --jkl-radio-button-dot-margin: #{(($_radio-button-height - $_radio-button-size) * 0.5)} #{jkl.$spacing-xs} #{(
21
+ --jkl-radio-button-dot-margin: #{(
22
+ ($_radio-button-height - $_radio-button-size) * 0.5
23
+ )} #{jkl.$spacing-xs} #{(
20
24
  ($_radio-button-height - $_radio-button-size) * 0.5
21
25
  )} 0;
22
- --jkl-radio-button-dot-size: #{$_radio-button-size - (2 * $_radio-button-dot-padding)};
26
+ --jkl-radio-button-dot-size: #{$_radio-button-size -
27
+ (2 * $_radio-button-dot-padding)};
23
28
 
24
29
  @include jkl.declare-font-variables("jkl-radio-button-label", "body");
25
30
 
@@ -33,8 +38,11 @@ $_radio-button-dot-animation-name: jkl-dot-in-#{string.unique-id()};
33
38
  --jkl-radio-button-size: #{$_mobile-radio-button-size};
34
39
  --jkl-radio-button-text-margin: #{jkl.$spacing-8} 0;
35
40
  --jkl-radio-button-text-transform: translate3d(0, 0, 0);
36
- --jkl-radio-button-dot-margin: #{jkl.rem(10px)} #{jkl.$spacing-xs} #{jkl.rem(10px)} 0;
37
- --jkl-radio-button-dot-size: #{$_mobile-radio-button-size - (2 * $_radio-button-dot-padding)};
41
+ --jkl-radio-button-dot-margin: #{jkl.rem(10px)} #{jkl.$spacing-xs} #{jkl.rem(
42
+ 10px
43
+ )} 0;
44
+ --jkl-radio-button-dot-size: #{$_mobile-radio-button-size -
45
+ (2 * $_radio-button-dot-padding)};
38
46
  }
39
47
  }
40
48
 
@@ -48,8 +56,11 @@ $_radio-button-dot-animation-name: jkl-dot-in-#{string.unique-id()};
48
56
  --jkl-radio-button-size: #{$_compact-radio-button-size};
49
57
  --jkl-radio-button-text-margin: #{jkl.$spacing-4} 0;
50
58
  --jkl-radio-button-text-transform: translate3d(0, 0, 0);
51
- --jkl-radio-button-dot-margin: #{jkl.rem(7px)} #{jkl.$spacing-xs} #{jkl.rem(7px)} 0;
52
- --jkl-radio-button-dot-size: #{$_compact-radio-button-size - (2 * $_radio-button-dot-padding)};
59
+ --jkl-radio-button-dot-margin: #{jkl.rem(7px)} #{jkl.$spacing-xs} #{jkl.rem(
60
+ 7px
61
+ )} 0;
62
+ --jkl-radio-button-dot-size: #{$_compact-radio-button-size -
63
+ (2 * $_radio-button-dot-padding)};
53
64
 
54
65
  @include jkl.declare-font-variables("jkl-radio-button-label", "small");
55
66
  }
@@ -88,14 +99,18 @@ $_radio-button-dot-animation-name: jkl-dot-in-#{string.unique-id()};
88
99
  &:checked {
89
100
  + .jkl-radio-button__label > .jkl-radio-button__dot::after {
90
101
  --dot-color: var(--jkl-color-border-action);
91
- animation: $_radio-button-dot-animation-name jkl.timing("productive") ease;
102
+ animation: $_radio-button-dot-animation-name
103
+ jkl.timing("productive") ease;
92
104
 
93
105
  @include jkl.forced-colors-mode {
94
106
  background-color: ButtonText;
95
107
  }
96
108
  }
97
109
 
98
- .jkl-radio-button--error & + .jkl-radio-button__label > .jkl-radio-button__dot::after {
110
+ .jkl-radio-button--error
111
+ &
112
+ + .jkl-radio-button__label
113
+ > .jkl-radio-button__dot::after {
99
114
  --background-color: var(--jkl-color-background-alert-error);
100
115
  --dot-color: var(--jkl-color-text-on-alert);
101
116
  }
@@ -2,7 +2,7 @@
2
2
  * Do not edit directly
3
3
  * Generated on Mon, 23 Sep 2024 08:51:40 GMT
4
4
  */
5
- @keyframes jkl-dot-in-uzad8wc {
5
+ @keyframes jkl-dot-in-utkmwn9 {
6
6
  0% {
7
7
  transform: scale(0.8);
8
8
  }
@@ -68,7 +68,7 @@
68
68
  }
69
69
  }
70
70
  .jkl-radio-panel__input:checked + .jkl-radio-panel__dot::after {
71
- animation: jkl-dot-in-uzad8wc 150ms ease;
71
+ animation: jkl-dot-in-utkmwn9 150ms ease;
72
72
  }
73
73
  .jkl-radio-panel__main-label {
74
74
  padding-block: 1.5rem;
@@ -1 +1 @@
1
- @keyframes jkl-dot-in-uzad8wc{0%{transform:scale(.8)}to{transform:scale(1)}}.jkl-radio-panel{--outer-border-color:var(--jkl-color-border-input);--outer-border-thickness:0.0625rem;--dot-color:transparent;--ring-color:transparent;border-radius:4px;cursor:pointer;outline:var(--outer-border-thickness) solid var(--outer-border-color);padding-left:1rem}.jkl-radio-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-radio-panel__input{opacity:0;position:absolute;top:-6px}.jkl-radio-panel__dot{background-color:var(--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__dot:after{background-color:var(--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__dot{border:1px solid ButtonText}}.jkl-radio-panel__input:checked+.jkl-radio-panel__dot:after{animation:jkl-dot-in-uzad8wc .15s ease}.jkl-radio-panel__main-label{padding-block:1.5rem}.jkl-radio-panel__extra-label{align-self:stretch;margin-left:1rem;margin-right:1rem}.jkl-radio-panel__extra-label>:first-child{padding-right:1rem}.jkl-radio-panel__extra-label--text{align-items:center;display:flex;height:100%}.jkl-radio-panel__content{cursor:default;display:none;padding-right:1.5rem}.jkl-radio-panel:has(:checked) .jkl-radio-panel__content[data-open=true],.jkl-radio-panel__content[data-alwaysOpen=true]{display:block;margin-bottom:24px}.jkl-radio-panel:has(:checked),.jkl-radio-panel:has(:focus-visible),.jkl-radio-panel:hover{--outer-border-color:var(--jkl-color-border-separator-hover);--outer-border-thickness:0.125rem}.jkl-radio-panel:has(:checked){--dot-color:var(--jkl-color-border-action)}[aria-invalid=true] .jkl-radio-panel{--ring-color:var(--jkl-color-background-alert-error)}[aria-invalid=true] .jkl-radio-panel:has(:checked){--dot-color:var(--jkl-color-text-on-alert)}
1
+ @keyframes jkl-dot-in-utkmwn9{0%{transform:scale(.8)}to{transform:scale(1)}}.jkl-radio-panel{--outer-border-color:var(--jkl-color-border-input);--outer-border-thickness:0.0625rem;--dot-color:transparent;--ring-color:transparent;border-radius:4px;cursor:pointer;outline:var(--outer-border-thickness) solid var(--outer-border-color);padding-left:1rem}.jkl-radio-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-radio-panel__input{opacity:0;position:absolute;top:-6px}.jkl-radio-panel__dot{background-color:var(--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__dot:after{background-color:var(--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__dot{border:1px solid ButtonText}}.jkl-radio-panel__input:checked+.jkl-radio-panel__dot:after{animation:jkl-dot-in-utkmwn9 .15s ease}.jkl-radio-panel__main-label{padding-block:1.5rem}.jkl-radio-panel__extra-label{align-self:stretch;margin-left:1rem;margin-right:1rem}.jkl-radio-panel__extra-label>:first-child{padding-right:1rem}.jkl-radio-panel__extra-label--text{align-items:center;display:flex;height:100%}.jkl-radio-panel__content{cursor:default;display:none;padding-right:1.5rem}.jkl-radio-panel:has(:checked) .jkl-radio-panel__content[data-open=true],.jkl-radio-panel__content[data-alwaysOpen=true]{display:block;margin-bottom:24px}.jkl-radio-panel:has(:checked),.jkl-radio-panel:has(:focus-visible),.jkl-radio-panel:hover{--outer-border-color:var(--jkl-color-border-separator-hover);--outer-border-thickness:0.125rem}.jkl-radio-panel:has(:checked){--dot-color:var(--jkl-color-border-action)}[aria-invalid=true] .jkl-radio-panel{--ring-color:var(--jkl-color-background-alert-error)}[aria-invalid=true] .jkl-radio-panel:has(:checked){--dot-color:var(--jkl-color-text-on-alert)}
@@ -81,7 +81,8 @@ $_radio-panel-dot-animation-name: jkl-dot-in-#{string.unique-id()};
81
81
 
82
82
  &__input:checked + &__dot {
83
83
  &::after {
84
- animation: $_radio-panel-dot-animation-name jkl.timing("productive") ease;
84
+ animation: $_radio-panel-dot-animation-name jkl.timing("productive")
85
+ ease;
85
86
  }
86
87
  }
87
88
 
@@ -82,7 +82,8 @@
82
82
  [data-density=comfortable] {
83
83
  --jkl-select-input-height: 3rem;
84
84
  --jkl-select-arrow-right: 0.5rem;
85
- --jkl-select-button-padding: 0.5rem 2.25rem 0.5rem 0.75rem;
85
+ --jkl-select-button-padding: 0.5rem 2.25rem 0.5rem
86
+ 0.75rem;
86
87
  --jkl-select-search-input-padding: var(--jkl-select-button-padding);
87
88
  --jkl-select-native-padding: 0 2.5rem 0 0.5rem;
88
89
  --jkl-select-option-padding: 0.5rem 0.75rem;
@@ -102,9 +103,11 @@
102
103
  [data-density=compact] {
103
104
  --jkl-select-input-height: 2rem;
104
105
  --jkl-select-arrow-right: 0.25rem;
105
- --jkl-select-button-padding: 0.25rem 2rem 0.25rem 0.5rem;
106
+ --jkl-select-button-padding: 0.25rem 2rem 0.25rem
107
+ 0.5rem;
106
108
  --jkl-select-search-input-padding: 0.25rem 0.5rem;
107
- --jkl-select-native-padding: 0.25rem 1.5rem 0.25rem 0.25rem;
109
+ --jkl-select-native-padding: 0.25rem 1.5rem 0.25rem
110
+ 0.25rem;
108
111
  --jkl-select-option-padding: 0.25rem 0.5rem;
109
112
  --jkl-select-font-size: var(--jkl-small-font-size);
110
113
  --jkl-select-line-height: var(--jkl-small-line-height);
@@ -55,7 +55,8 @@ $_select-search-input-selection-color--inverted: color.scale(
55
55
  @include jkl.comfortable-density-variables {
56
56
  --jkl-select-input-height: #{jkl.rem(48px)};
57
57
  --jkl-select-arrow-right: #{jkl.$spacing-8};
58
- --jkl-select-button-padding: #{jkl.$spacing-8} #{jkl.rem(36px)} #{jkl.$spacing-8} #{jkl.$spacing-12};
58
+ --jkl-select-button-padding: #{jkl.$spacing-8} #{jkl.rem(36px)} #{jkl.$spacing-8}
59
+ #{jkl.$spacing-12};
59
60
  --jkl-select-search-input-padding: var(--jkl-select-button-padding);
60
61
  --jkl-select-native-padding: 0 #{jkl.$spacing-40} 0 #{jkl.$spacing-8};
61
62
  --jkl-select-option-padding: #{jkl.$spacing-8} #{jkl.$spacing-12};
@@ -70,9 +71,11 @@ $_select-search-input-selection-color--inverted: color.scale(
70
71
  @include jkl.compact-density-variables {
71
72
  --jkl-select-input-height: #{jkl.rem(32px)};
72
73
  --jkl-select-arrow-right: #{jkl.rem(4px)};
73
- --jkl-select-button-padding: #{jkl.$spacing-4} #{jkl.$spacing-32} #{jkl.$spacing-4} #{jkl.$spacing-8};
74
+ --jkl-select-button-padding: #{jkl.$spacing-4} #{jkl.$spacing-32} #{jkl.$spacing-4}
75
+ #{jkl.$spacing-8};
74
76
  --jkl-select-search-input-padding: #{jkl.$spacing-4} #{jkl.$spacing-8};
75
- --jkl-select-native-padding: #{jkl.$spacing-4} #{jkl.$spacing-24} #{jkl.$spacing-4} #{jkl.$spacing-4};
77
+ --jkl-select-native-padding: #{jkl.$spacing-4} #{jkl.$spacing-24} #{jkl.$spacing-4}
78
+ #{jkl.$spacing-4};
76
79
  --jkl-select-option-padding: #{jkl.$spacing-4} #{jkl.$spacing-8};
77
80
 
78
81
  @include jkl.declare-font-variables("jkl-select", "small");
@@ -128,7 +131,9 @@ $_select-search-input-selection-color--inverted: color.scale(
128
131
  background-color: var(--jkl-select-search-input-selection-color);
129
132
 
130
133
  [data-theme="dark"] & {
131
- background-color: var(--jkl-select-search-input-selection-color);
134
+ background-color: var(
135
+ --jkl-select-search-input-selection-color
136
+ );
132
137
  }
133
138
  }
134
139
  }
@@ -194,7 +199,10 @@ $_select-search-input-selection-color--inverted: color.scale(
194
199
  transition-property: transform, color;
195
200
  @include jkl.motion;
196
201
 
197
- @include jkl.forced-colors-svg-fallback($stroke: CanvasText, $fill: CanvasText);
202
+ @include jkl.forced-colors-svg-fallback(
203
+ $stroke: CanvasText,
204
+ $fill: CanvasText
205
+ );
198
206
  }
199
207
 
200
208
  &__options-menu {
@@ -212,7 +220,10 @@ $_select-search-input-selection-color--inverted: color.scale(
212
220
 
213
221
  overflow-y: auto;
214
222
  // Sett makshøyde på listen til høyden av (maxShownOptions + 0.5) ganger høyden på ett enlinjes valg
215
- max-height: calc(calc(var(--jkl-select-max-shown-options, 5) + 0.5) * var(--jkl-select-input-height));
223
+ max-height: calc(
224
+ calc(var(--jkl-select-max-shown-options, 5) + 0.5) *
225
+ var(--jkl-select-input-height)
226
+ );
216
227
 
217
228
  transition-property: height;
218
229
  @include jkl.motion;
@@ -295,7 +306,9 @@ $_select-search-input-selection-color--inverted: color.scale(
295
306
 
296
307
  /* Color of text selection */
297
308
  .jkl-select__search-input::selection {
298
- background-color: var(--jkl-select-search-input-error-selection-color);
309
+ background-color: var(
310
+ --jkl-select-search-input-error-selection-color
311
+ );
299
312
  }
300
313
  }
301
314
 
@@ -135,7 +135,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-system-message
135
135
  margin-bottom: 0;
136
136
  }
137
137
  .jkl-system-message--dismissed {
138
- animation: jkl-dismiss-u2a132v 400ms ease-in forwards;
138
+ animation: jkl-dismiss-urtxaru 400ms ease-in forwards;
139
139
  transition: visibility 0ms 400ms;
140
140
  visibility: hidden;
141
141
  }
@@ -167,7 +167,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-system-message
167
167
  }
168
168
  }
169
169
 
170
- @keyframes jkl-dismiss-u2a132v {
170
+ @keyframes jkl-dismiss-urtxaru {
171
171
  from {
172
172
  opacity: 1;
173
173
  transform: translate3d(0, 0, 0);
@@ -1 +1 @@
1
- :root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-system-message-icon-height:1.5rem;--jkl-system-message-icon-padding:0.1875rem 0 0 0;--jkl-system-message-content-padding:1.5rem;--jkl-system-message-dismiss-button-size:2.75rem;--jkl-system-message-dismiss-button-margin:-0.40625rem -1.125rem -0.40625rem auto;--jkl-system-message-message-margin:0 1rem;--jkl-system-message-message-font-size:var(--jkl-body-font-size);--jkl-system-message-message-line-height:var(--jkl-body-line-height);--jkl-system-message-message-font-weight:var(--jkl-body-font-weight)}[data-density=compact],[data-layout-density=compact]{--jkl-system-message-icon-height:1.25rem;--jkl-system-message-icon-padding:0.0625rem 0 0 0;--jkl-system-message-content-padding:0.5rem;--jkl-system-message-dismiss-button-size:2rem;--jkl-system-message-dismiss-button-margin:-0.1875rem -0.375rem -0.28125rem auto;--jkl-system-message-message-margin:0 0.75rem;--jkl-system-message-message-font-size:var(--jkl-small-font-size);--jkl-system-message-message-line-height:var(--jkl-small-line-height);--jkl-system-message-message-font-weight:var(--jkl-small-font-weight)}.jkl-system-message{--background-color:var(--jkl-color-background-alert-neutral);--text-color:var(--jkl-color-text-on-alert);background-color:var(--background-color);box-sizing:border-box;color:var(--text-color);width:100%}.jkl-system-message__content{align-items:flex-start;box-sizing:border-box;display:flex;margin:0 auto;padding:var(--jkl-system-message-content-padding);width:100%}.jkl-system-message__icon{align-self:flex-start;flex-shrink:0;height:var(--jkl-system-message-icon-height);margin:var(--jkl-system-message-icon-padding)}@media screen and (forced-colors:active){.jkl-system-message__icon,.jkl-system-message__icon path,.jkl-system-message__icon svg{stroke:CanvasText}}.jkl-system-message__message{font-size:var(--jkl-system-message-message-font-size);font-weight:var(--jkl-system-message-message-font-weight);line-height:var(--jkl-system-message-message-line-height);margin:var(--jkl-system-message-message-margin)}.jkl-system-message__dismiss-button{align-items:center;align-self:flex-start;background-color:transparent;border-style:none;color:inherit;cursor:pointer;display:flex;flex-shrink:0;height:var(--jkl-system-message-dismiss-button-size);justify-content:center;margin:var(--jkl-system-message-dismiss-button-margin);outline:0;outline-style:none;padding:0;width:var(--jkl-system-message-dismiss-button-size)}.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}}@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:hover{color:#636060}@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}}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-system-message__dismiss-button:focus{outline:2px solid #1b1917}@media screen and (forced-colors:active){html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-system-message__dismiss-button:focus{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-u2a132v .4s ease-in forwards;transition:visibility 0s .4s;visibility:hidden}.jkl-system-message--info{--background-color:var(--jkl-color-background-alert-info)}.jkl-system-message--warning{--background-color:var(--jkl-color-background-alert-warning)}.jkl-system-message--error{--background-color:var(--jkl-color-background-alert-error)}.jkl-system-message--success{--background-color:var(--jkl-color-background-alert-success)}@media screen and (forced-colors:active){.jkl-system-message{border:2px solid CanvasText}.jkl-system-message--info{border-style:dotted}.jkl-system-message--warning{border-style:dashed}.jkl-system-message--error{border-style:double;border-width:4px}}@keyframes jkl-dismiss-u2a132v{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,-50%,0)}}
1
+ :root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-system-message-icon-height:1.5rem;--jkl-system-message-icon-padding:0.1875rem 0 0 0;--jkl-system-message-content-padding:1.5rem;--jkl-system-message-dismiss-button-size:2.75rem;--jkl-system-message-dismiss-button-margin:-0.40625rem -1.125rem -0.40625rem auto;--jkl-system-message-message-margin:0 1rem;--jkl-system-message-message-font-size:var(--jkl-body-font-size);--jkl-system-message-message-line-height:var(--jkl-body-line-height);--jkl-system-message-message-font-weight:var(--jkl-body-font-weight)}[data-density=compact],[data-layout-density=compact]{--jkl-system-message-icon-height:1.25rem;--jkl-system-message-icon-padding:0.0625rem 0 0 0;--jkl-system-message-content-padding:0.5rem;--jkl-system-message-dismiss-button-size:2rem;--jkl-system-message-dismiss-button-margin:-0.1875rem -0.375rem -0.28125rem auto;--jkl-system-message-message-margin:0 0.75rem;--jkl-system-message-message-font-size:var(--jkl-small-font-size);--jkl-system-message-message-line-height:var(--jkl-small-line-height);--jkl-system-message-message-font-weight:var(--jkl-small-font-weight)}.jkl-system-message{--background-color:var(--jkl-color-background-alert-neutral);--text-color:var(--jkl-color-text-on-alert);background-color:var(--background-color);box-sizing:border-box;color:var(--text-color);width:100%}.jkl-system-message__content{align-items:flex-start;box-sizing:border-box;display:flex;margin:0 auto;padding:var(--jkl-system-message-content-padding);width:100%}.jkl-system-message__icon{align-self:flex-start;flex-shrink:0;height:var(--jkl-system-message-icon-height);margin:var(--jkl-system-message-icon-padding)}@media screen and (forced-colors:active){.jkl-system-message__icon,.jkl-system-message__icon path,.jkl-system-message__icon svg{stroke:CanvasText}}.jkl-system-message__message{font-size:var(--jkl-system-message-message-font-size);font-weight:var(--jkl-system-message-message-font-weight);line-height:var(--jkl-system-message-message-line-height);margin:var(--jkl-system-message-message-margin)}.jkl-system-message__dismiss-button{align-items:center;align-self:flex-start;background-color:transparent;border-style:none;color:inherit;cursor:pointer;display:flex;flex-shrink:0;height:var(--jkl-system-message-dismiss-button-size);justify-content:center;margin:var(--jkl-system-message-dismiss-button-margin);outline:0;outline-style:none;padding:0;width:var(--jkl-system-message-dismiss-button-size)}.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}}@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:hover{color:#636060}@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}}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-system-message__dismiss-button:focus{outline:2px solid #1b1917}@media screen and (forced-colors:active){html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-system-message__dismiss-button:focus{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-urtxaru .4s ease-in forwards;transition:visibility 0s .4s;visibility:hidden}.jkl-system-message--info{--background-color:var(--jkl-color-background-alert-info)}.jkl-system-message--warning{--background-color:var(--jkl-color-background-alert-warning)}.jkl-system-message--error{--background-color:var(--jkl-color-background-alert-error)}.jkl-system-message--success{--background-color:var(--jkl-color-background-alert-success)}@media screen and (forced-colors:active){.jkl-system-message{border:2px solid CanvasText}.jkl-system-message--info{border-style:dotted}.jkl-system-message--warning{border-style:dashed}.jkl-system-message--error{border-style:double;border-width:4px}}@keyframes jkl-dismiss-urtxaru{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,-50%,0)}}
@@ -13,7 +13,9 @@ $_dismiss-hover-color: jkl.$color-stein;
13
13
  --jkl-system-message-icon-padding: #{jkl.rem(3px)} 0 0 0;
14
14
  --jkl-system-message-content-padding: #{jkl.$spacing-l};
15
15
  --jkl-system-message-dismiss-button-size: #{jkl.rem(44px)};
16
- --jkl-system-message-dismiss-button-margin: -#{jkl.rem(6.5px)} -#{jkl.rem(18px)} -#{jkl.rem(6.5px)} auto;
16
+ --jkl-system-message-dismiss-button-margin: -#{jkl.rem(6.5px)} -#{jkl.rem(
17
+ 18px
18
+ )} -#{jkl.rem(6.5px)} auto;
17
19
  --jkl-system-message-message-margin: 0 #{jkl.$spacing-m};
18
20
  @include jkl.declare-font-variables("jkl-system-message-message", "body");
19
21
  }
@@ -23,7 +25,9 @@ $_dismiss-hover-color: jkl.$color-stein;
23
25
  --jkl-system-message-icon-padding: #{jkl.rem(1px)} 0 0 0;
24
26
  --jkl-system-message-content-padding: #{jkl.$spacing-xs};
25
27
  --jkl-system-message-dismiss-button-size: #{jkl.rem(32px)};
26
- --jkl-system-message-dismiss-button-margin: -#{jkl.rem(3px)} -#{jkl.rem(6px)} -#{jkl.rem(4.5px)} auto;
28
+ --jkl-system-message-dismiss-button-margin: -#{jkl.rem(3px)} -#{jkl.rem(
29
+ 6px
30
+ )} -#{jkl.rem(4.5px)} auto;
27
31
  --jkl-system-message-message-margin: 0 #{jkl.$spacing-s};
28
32
  @include jkl.declare-font-variables("jkl-system-message-message", "small");
29
33
  }
@@ -106,7 +110,8 @@ $_dismiss-hover-color: jkl.$color-stein;
106
110
  }
107
111
 
108
112
  &--dismissed {
109
- animation: $_dismiss-animation-name jkl.timing("lazy") jkl.easing("exit") forwards;
113
+ animation: $_dismiss-animation-name jkl.timing("lazy")
114
+ jkl.easing("exit") forwards;
110
115
  transition: visibility 0ms jkl.timing("lazy");
111
116
  visibility: hidden;
112
117
  }