@schukai/monster 4.148.9 → 4.149.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 (205) hide show
  1. package/package.json +1 -1
  2. package/source/components/accessibility/stylesheet/locale-picker.mjs +61 -1
  3. package/source/components/content/image-editor.mjs +79 -11
  4. package/source/components/content/style/copy.pcss +1 -1
  5. package/source/components/content/stylesheet/camera-capture.mjs +1 -1
  6. package/source/components/content/stylesheet/copy.mjs +1 -1
  7. package/source/components/content/stylesheet/fetch-box.mjs +1 -1
  8. package/source/components/content/stylesheet/viewer.mjs +61 -1
  9. package/source/components/data/kpi-tile.mjs +5 -3
  10. package/source/components/data/metric-graph.mjs +22 -20
  11. package/source/components/data/metric.mjs +20 -18
  12. package/source/components/data/style/kpi-tile.pcss +65 -43
  13. package/source/components/data/style/metric-graph.pcss +35 -18
  14. package/source/components/data/style/metric.pcss +35 -28
  15. package/source/components/data/stylesheet/kpi-tile.mjs +61 -1
  16. package/source/components/data/stylesheet/metric-graph.mjs +61 -1
  17. package/source/components/data/stylesheet/metric.mjs +61 -1
  18. package/source/components/datatable/columnbar.mjs +4 -2
  19. package/source/components/datatable/datatable.mjs +73 -15
  20. package/source/components/datatable/filter/date-range.mjs +61 -61
  21. package/source/components/datatable/filter/date-time.mjs +5 -1
  22. package/source/components/datatable/filter/range.mjs +3 -3
  23. package/source/components/datatable/filter/select-operator.mjs +7 -1
  24. package/source/components/datatable/filter/text-operator.mjs +11 -3
  25. package/source/components/datatable/filter.mjs +16 -0
  26. package/source/components/datatable/pagination.mjs +2 -2
  27. package/source/components/datatable/style/column-bar.pcss +115 -23
  28. package/source/components/datatable/style/datatable.pcss +257 -29
  29. package/source/components/datatable/style/embedded-pagination.pcss +63 -34
  30. package/source/components/datatable/style/filter-button.pcss +1 -1
  31. package/source/components/datatable/style/filter-controls-defaults.pcss +49 -3
  32. package/source/components/datatable/style/filter-select.pcss +4 -1
  33. package/source/components/datatable/style/filter.pcss +18 -1
  34. package/source/components/datatable/stylesheet/change-button.mjs +61 -1
  35. package/source/components/datatable/stylesheet/column-bar.mjs +69 -1
  36. package/source/components/datatable/stylesheet/dataset.mjs +61 -1
  37. package/source/components/datatable/stylesheet/datatable.mjs +71 -1
  38. package/source/components/datatable/stylesheet/embedded-pagination.mjs +1 -1
  39. package/source/components/datatable/stylesheet/filter-button.mjs +1 -1
  40. package/source/components/datatable/stylesheet/filter-controls-defaults.mjs +1 -1
  41. package/source/components/datatable/stylesheet/filter-select.mjs +61 -1
  42. package/source/components/datatable/stylesheet/filter.mjs +61 -1
  43. package/source/components/datatable/stylesheet/pagination.mjs +67 -1
  44. package/source/components/datatable/stylesheet/save-button.mjs +61 -1
  45. package/source/components/datatable/stylesheet/status.mjs +61 -1
  46. package/source/components/form/action-button.mjs +2 -1
  47. package/source/components/form/button-bar.mjs +7 -2
  48. package/source/components/form/context-error.mjs +4 -3
  49. package/source/components/form/context-help.mjs +10 -4
  50. package/source/components/form/context-hint.mjs +1 -1
  51. package/source/components/form/context-info.mjs +1 -1
  52. package/source/components/form/context-note.mjs +1 -1
  53. package/source/components/form/context-success.mjs +1 -1
  54. package/source/components/form/context-warning.mjs +1 -1
  55. package/source/components/form/control-bar.mjs +300 -14
  56. package/source/components/form/credential-button.mjs +4 -2
  57. package/source/components/form/digits.mjs +28 -1
  58. package/source/components/form/field-set.mjs +30 -0
  59. package/source/components/form/login.mjs +13 -10
  60. package/source/components/form/password.mjs +6 -0
  61. package/source/components/form/popper-button.mjs +1 -1
  62. package/source/components/form/quantity.mjs +14 -6
  63. package/source/components/form/register-wizard.mjs +46 -26
  64. package/source/components/form/select.mjs +17 -10
  65. package/source/components/form/sheet.mjs +13 -2
  66. package/source/components/form/style/action-button.pcss +131 -5
  67. package/source/components/form/style/button-bar.pcss +204 -3
  68. package/source/components/form/style/control-bar.pcss +254 -26
  69. package/source/components/form/style/digits.pcss +7 -6
  70. package/source/components/form/style/input-group.pcss +65 -1
  71. package/source/components/form/style/login.pcss +1 -1
  72. package/source/components/form/style/mixin/field-set-layout.pcss +8 -0
  73. package/source/components/form/style/password.pcss +25 -1
  74. package/source/components/form/style/popper-button.pcss +1 -0
  75. package/source/components/form/style/quantity.pcss +11 -20
  76. package/source/components/form/style/select.pcss +52 -7
  77. package/source/components/form/style/sheet.pcss +70 -1
  78. package/source/components/form/style/state-button.pcss +5 -2
  79. package/source/components/form/style/toggle-switch.pcss +7 -4
  80. package/source/components/form/stylesheet/action-button.mjs +63 -1
  81. package/source/components/form/stylesheet/button-bar.mjs +153 -1
  82. package/source/components/form/stylesheet/button.mjs +61 -1
  83. package/source/components/form/stylesheet/control-bar.mjs +163 -1
  84. package/source/components/form/stylesheet/digits.mjs +1 -1
  85. package/source/components/form/stylesheet/field-layout.mjs +1 -1
  86. package/source/components/form/stylesheet/field-set.mjs +1 -1
  87. package/source/components/form/stylesheet/form.mjs +1 -1
  88. package/source/components/form/stylesheet/input-group.mjs +15 -1
  89. package/source/components/form/stylesheet/login.mjs +1 -1
  90. package/source/components/form/stylesheet/password.mjs +7 -1
  91. package/source/components/form/stylesheet/popper-button.mjs +61 -1
  92. package/source/components/form/stylesheet/quantity.mjs +1 -1
  93. package/source/components/form/stylesheet/register-wizard.mjs +1 -1
  94. package/source/components/form/stylesheet/select.mjs +3 -1
  95. package/source/components/form/stylesheet/sheet.mjs +1 -1
  96. package/source/components/form/stylesheet/state-button.mjs +3 -1
  97. package/source/components/form/stylesheet/toggle-switch.mjs +1 -1
  98. package/source/components/form/stylesheet/wizard.mjs +1 -1
  99. package/source/components/form/util/floating-ui.mjs +35 -7
  100. package/source/components/host/call-button.mjs +3 -1
  101. package/source/components/host/stylesheet/call-button.mjs +61 -1
  102. package/source/components/host/stylesheet/host.mjs +1 -1
  103. package/source/components/host/stylesheet/toggle-button.mjs +61 -1
  104. package/source/components/layout/full-screen.mjs +31 -23
  105. package/source/components/layout/iframe.mjs +5 -1
  106. package/source/components/layout/popper.mjs +34 -4
  107. package/source/components/layout/style/full-screen.pcss +94 -23
  108. package/source/components/layout/style/split-panel.pcss +57 -5
  109. package/source/components/layout/style/tabs.pcss +277 -47
  110. package/source/components/layout/style/vertical-tabs.pcss +147 -0
  111. package/source/components/layout/stylesheet/collapse.mjs +61 -1
  112. package/source/components/layout/stylesheet/details.mjs +61 -1
  113. package/source/components/layout/stylesheet/full-screen.mjs +23 -1
  114. package/source/components/layout/stylesheet/overlay.mjs +1 -1
  115. package/source/components/layout/stylesheet/panel.mjs +1 -1
  116. package/source/components/layout/stylesheet/slider.mjs +1 -1
  117. package/source/components/layout/stylesheet/split-panel.mjs +17 -1
  118. package/source/components/layout/stylesheet/tabs.mjs +97 -1
  119. package/source/components/layout/stylesheet/vertical-tabs.mjs +33 -95
  120. package/source/components/layout/tabs.mjs +63 -0
  121. package/source/components/layout/vertical-tabs.mjs +63 -0
  122. package/source/components/navigation/stylesheet/site-navigation.mjs +1 -1
  123. package/source/components/navigation/stylesheet/table-of-content.mjs +1 -1
  124. package/source/components/navigation/stylesheet/wizard-navigation.mjs +1 -1
  125. package/source/components/navigation/table-of-content.mjs +13 -0
  126. package/source/components/notify/style/notify.pcss +1 -2
  127. package/source/components/notify/stylesheet/message.mjs +1 -1
  128. package/source/components/notify/stylesheet/notify.mjs +1 -1
  129. package/source/components/state/style/log.pcss +1 -0
  130. package/source/components/state/style/state.pcss +5 -1
  131. package/source/components/state/stylesheet/log.mjs +1 -1
  132. package/source/components/state/stylesheet/state.mjs +7 -1
  133. package/source/components/style/button.css +61 -205
  134. package/source/components/style/button.pcss +78 -34
  135. package/source/components/style/common.css +1 -170
  136. package/source/components/style/common.pcss +5 -9
  137. package/source/components/style/form.css +1 -49
  138. package/source/components/style/form.pcss +24 -6
  139. package/source/components/style/link.css +1 -39
  140. package/source/components/style/link.pcss +8 -16
  141. package/source/components/style/mixin/button.pcss +19 -10
  142. package/source/components/style/mixin/property.pcss +8 -0
  143. package/source/components/style/mixin/skeleton.pcss +11 -5
  144. package/source/components/style/normalize.css +1 -144
  145. package/source/components/style/normalize.pcss +5 -5
  146. package/source/components/style/property.css +1 -387
  147. package/source/components/style/skeleton.css +1 -198
  148. package/source/components/style/skeleton.pcss +8 -2
  149. package/source/components/style/theme-modern.css +74 -0
  150. package/source/components/style/theme-modern.pcss +498 -0
  151. package/source/components/stylesheet/button.mjs +61 -1
  152. package/source/components/stylesheet/common.mjs +1 -1
  153. package/source/components/stylesheet/form.mjs +1 -1
  154. package/source/components/stylesheet/link.mjs +1 -1
  155. package/source/components/stylesheet/normalize.mjs +1 -1
  156. package/source/components/stylesheet/property.mjs +1 -1
  157. package/source/components/stylesheet/skeleton.mjs +1 -1
  158. package/source/components/stylesheet/theme-modern.mjs +110 -0
  159. package/source/components/time/stylesheet/day.mjs +61 -1
  160. package/source/components/time/stylesheet/month-calendar.mjs +61 -1
  161. package/source/components/time/timeline/stylesheet/appointment.mjs +61 -1
  162. package/source/components/time/timeline/stylesheet/segment.mjs +61 -1
  163. package/source/components/tree-menu/style/tree-menu.pcss +26 -37
  164. package/source/components/tree-menu/stylesheet/tree-menu.mjs +1 -1
  165. package/test/cases/components/content/image-editor.mjs +19 -0
  166. package/test/cases/components/datatable/accessibility-defaults.mjs +112 -0
  167. package/test/cases/components/datatable/filter-availability.mjs +37 -0
  168. package/test/cases/components/datatable/filter-date-range-layout.mjs +40 -0
  169. package/test/cases/components/datatable/filter-select-operator.mjs +118 -0
  170. package/test/cases/components/datatable/mobile-layout.mjs +203 -0
  171. package/test/cases/components/datatable/responsive-breakpoint.mjs +41 -0
  172. package/test/cases/components/datatable/selection.mjs +149 -0
  173. package/test/cases/components/form/action-button-style.mjs +85 -0
  174. package/test/cases/components/form/button-bar.mjs +222 -3
  175. package/test/cases/components/form/context-theme-colors.mjs +59 -0
  176. package/test/cases/components/form/control-bar.mjs +228 -3
  177. package/test/cases/components/form/control-heights.mjs +103 -0
  178. package/test/cases/components/form/digits-accessibility.mjs +65 -0
  179. package/test/cases/components/form/field-set.mjs +54 -0
  180. package/test/cases/components/form/floating-ui.mjs +74 -0
  181. package/test/cases/components/form/input-group.mjs +61 -28
  182. package/test/cases/components/form/login.mjs +47 -0
  183. package/test/cases/components/form/password.mjs +63 -0
  184. package/test/cases/components/form/popper-button.mjs +30 -15
  185. package/test/cases/components/form/quantity-accessibility.mjs +46 -0
  186. package/test/cases/components/form/register-wizard.mjs +79 -0
  187. package/test/cases/components/form/select.mjs +94 -2
  188. package/test/cases/components/form/sheet.mjs +56 -2
  189. package/test/cases/components/host/toggle-button.mjs +50 -0
  190. package/test/cases/components/layout/full-screen.mjs +60 -0
  191. package/test/cases/components/layout/iframe-accessibility.mjs +44 -0
  192. package/test/cases/components/layout/popper.mjs +128 -0
  193. package/test/cases/components/layout/slit-panel.mjs +30 -1
  194. package/test/cases/components/layout/tabs.mjs +93 -0
  195. package/test/cases/components/navigation/table-of-content.mjs +18 -0
  196. package/test/cases/components/state/state-style.mjs +31 -0
  197. package/test/cases/components/style/action-menu.mjs +74 -0
  198. package/test/cases/components/style/form-controls.mjs +37 -0
  199. package/test/cases/components/style/kpi-tile.mjs +60 -0
  200. package/test/cases/components/style/legacy-theme-compatibility.mjs +137 -0
  201. package/test/cases/components/style/metric-layout.mjs +94 -0
  202. package/test/cases/components/style/skeleton.mjs +69 -0
  203. package/test/cases/components/style/theme-component-catalog.mjs +853 -0
  204. package/test/cases/components/style/theme-modern.mjs +439 -0
  205. package/test/cases/components/style/theme-review-regressions.mjs +41 -0
package/source/components/content/stylesheet/fetch-box.mjs CHANGED
@@ -25,7 +25,7 @@ try {
25
25
  FetchBoxStyleSheet.insertRule(
26
26
  `
27
27
  @layer fetchbox {
28
- [data-monster-role=control]{outline:none}[data-monster-role=control].flex{display:flex;flex-direction:row;align-items:center}:host{display:block}:after,:before,:root{--monster-font-family:-apple-system,BlinkMacSystemFont,\"Quicksand\",\"Segoe UI\",\"Roboto\",\"Oxygen\",\"Ubuntu\",\"Cantarell\",\"Fira Sans\",\"Droid Sans\",\"Helvetica Neue\",Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\";--monster-font-family-monospace:\"Consolas\",\"Courier New\",\"Roboto Mono\",\"Source Code Pro\",\"Fira Mono\",monospace;--monster-font-size-min:15px;--monster-font-size-base:16px;--monster-font-size-max:16px;--monster-font-scale:1;--monster-font-scale-hi-dpi:1.25;--monster-font-scale-xhi-dpi:1.25;--monster-font-size-fluid:clamp(var(--monster-font-size-min),calc(var(--monster-font-size-min) + 0.1vw),var(--monster-font-size-max))}@media (min-resolution:1.5dppx){:after,:before,:root{--monster-font-scale:var(--monster-font-scale-hi-dpi,1.1)}}@media (min-resolution:3dppx){:after,:before,:root{--monster-font-scale:var(--monster-font-scale-xhi-dpi,1.18)}}:after,:before,:root{--monster-color-primary-1:var(--monster-color-gray-6);--monster-color-primary-2:var(--monster-color-gray-6);--monster-color-primary-3:var(--monster-color-cinnamon-1);--monster-color-primary-4:var(--monster-color-cinnamon-1);--monster-bg-color-primary-1:var(--monster-color-gray-1);--monster-bg-color-primary-2:var(--monster-color-gray-2);--monster-bg-color-primary-3:var(--monster-color-gray-6);--monster-bg-color-primary-4:var(--monster-color-gray-4)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-primary-1:var(--monster-color-gray-1);--monster-color-primary-2:var(--monster-color-gray-1);--monster-color-primary-3:var(--monster-color-gray-6);--monster-color-primary-4:var(--monster-color-gray-6);--monster-bg-color-primary-1:var(--monster-color-gray-6);--monster-bg-color-primary-2:var(--monster-color-gray-3);--monster-bg-color-primary-3:var(--monster-color-gray-2);--monster-bg-color-primary-4:var(--monster-color-gray-1)}}:after,:before,:root{--monster-color-secondary-1:var(--monster-color-red-4);--monster-color-secondary-2:var(--monster-color-red-4);--monster-color-secondary-3:var(--monster-color-red-1);--monster-color-secondary-4:var(--monster-color-red-1);--monster-bg-color-secondary-1:var(--monster-color-gray-1);--monster-bg-color-secondary-2:var(--monster-color-red-2);--monster-bg-color-secondary-3:var(--monster-color-red-3);--monster-bg-color-secondary-4:var(--monster-color-red-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-secondary-1:var(--monster-color-red-1);--monster-color-secondary-2:var(--monster-color-red-1);--monster-color-secondary-3:var(--monster-color-red-6);--monster-color-secondary-4:var(--monster-color-red-4);--monster-bg-color-secondary-1:var(--monster-color-gray-6);--monster-bg-color-secondary-2:var(--monster-color-red-3);--monster-bg-color-secondary-3:var(--monster-color-red-2);--monster-bg-color-secondary-4:var(--monster-color-red-1)}}:after,:before,:root{--monster-color-tertiary-1:var(--monster-color-magenta-4);--monster-color-tertiary-2:var(--monster-color-magenta-4);--monster-color-tertiary-3:var(--monster-color-magenta-6);--monster-color-tertiary-4:var(--monster-color-magenta-1);--monster-bg-color-tertiary-1:var(--monster-color-gray-1);--monster-bg-color-tertiary-2:var(--monster-color-magenta-1);--monster-bg-color-tertiary-3:var(--monster-color-magenta-2);--monster-bg-color-tertiary-4:var(--monster-color-magenta-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-tertiary-1:var(--monster-color-magenta-1);--monster-color-tertiary-2:var(--monster-color-magenta-6);--monster-color-tertiary-3:var(--monster-color-magenta-4);--monster-color-tertiary-4:var(--monster-color-magenta-4);--monster-bg-color-tertiary-1:var(--monster-color-gray-6);--monster-bg-color-tertiary-2:var(--monster-color-magenta-2);--monster-bg-color-tertiary-3:var(--monster-color-magenta-1);--monster-bg-color-tertiary-4:var(--monster-color-magenta-1)}}:after,:before,:root{--monster-color-destructive-1:var(--monster-color-red-1);--monster-color-destructive-2:var(--monster-color-red-4);--monster-color-destructive-3:var(--monster-color-red-6);--monster-color-destructive-4:var(--monster-color-red-1);--monster-bg-color-destructive-1:var(--monster-color-red-4);--monster-bg-color-destructive-2:var(--monster-color-gray-1);--monster-bg-color-destructive-3:var(--monster-color-red-2);--monster-bg-color-destructive-4:var(--monster-color-red-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-destructive-1:var(--monster-color-red-1);--monster-color-destructive-2:var(--monster-color-red-3);--monster-color-destructive-3:var(--monster-color-red-4);--monster-color-destructive-4:var(--monster-color-red-1);--monster-bg-color-destructive-1:var(--monster-color-red-5);--monster-bg-color-destructive-2:var(--monster-color-gray-6);--monster-bg-color-destructive-3:var(--monster-color-red-1);--monster-bg-color-destructive-4:var(--monster-color-red-4)}}:after,:before,:root{--monster-color-danger-1:var(--monster-color-raspberry-1);--monster-color-danger-2:var(--monster-color-raspberry-4);--monster-color-danger-3:var(--monster-color-raspberry-6);--monster-color-danger-4:var(--monster-color-raspberry-1);--monster-bg-color-danger-1:var(--monster-color-raspberry-4);--monster-bg-color-danger-2:var(--monster-color-gray-1);--monster-bg-color-danger-3:var(--monster-color-raspberry-2);--monster-bg-color-danger-4:var(--monster-color-raspberry-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-danger-1:var(--monster-color-raspberry-1);--monster-color-danger-2:var(--monster-color-raspberry-3);--monster-color-danger-3:var(--monster-color-raspberry-4);--monster-color-danger-4:var(--monster-color-raspberry-1);--monster-bg-color-danger-1:var(--monster-color-raspberry-5);--monster-bg-color-danger-2:var(--monster-color-gray-6);--monster-bg-color-danger-3:var(--monster-color-raspberry-1);--monster-bg-color-danger-4:var(--monster-color-raspberry-4)}}:after,:before,:root{--monster-color-success-1:var(--monster-color-green-1);--monster-color-success-2:var(--monster-color-green-4);--monster-color-success-3:var(--monster-color-green-6);--monster-color-success-4:var(--monster-color-green-1);--monster-bg-color-success-1:var(--monster-color-green-3);--monster-bg-color-success-2:var(--monster-color-gray-1);--monster-bg-color-success-3:var(--monster-color-green-2);--monster-bg-color-success-4:var(--monster-color-green-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-success-1:var(--monster-color-green-1);--monster-color-success-2:var(--monster-color-green-2);--monster-color-success-3:var(--monster-color-green-4);--monster-color-success-4:var(--monster-color-green-1);--monster-bg-color-success-1:var(--monster-color-green-5);--monster-bg-color-success-2:var(--monster-color-gray-6);--monster-bg-color-success-3:var(--monster-color-green-1);--monster-bg-color-success-4:var(--monster-color-green-3)}}:after,:before,:root{--monster-color-warning-1:var(--monster-color-orange-1);--monster-color-warning-2:var(--monster-color-orange-4);--monster-color-warning-3:var(--monster-color-orange-6);--monster-color-warning-4:var(--monster-color-orange-1);--monster-bg-color-warning-1:var(--monster-color-orange-3);--monster-bg-color-warning-2:var(--monster-color-gray-1);--monster-bg-color-warning-3:var(--monster-color-orange-2);--monster-bg-color-warning-4:var(--monster-color-orange-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-warning-1:var(--monster-color-orange-1);--monster-color-warning-2:var(--monster-color-orange-3);--monster-color-warning-3:var(--monster-color-orange-4);--monster-color-warning-4:var(--monster-color-orange-1);--monster-bg-color-warning-1:var(--monster-color-orange-5);--monster-bg-color-warning-2:var(--monster-color-gray-6);--monster-bg-color-warning-3:var(--monster-color-orange-1);--monster-bg-color-warning-4:var(--monster-color-orange-3)}}:after,:before,:root{--monster-color-error-1:var(--monster-color-red-1);--monster-color-error-2:var(--monster-color-red-4);--monster-color-error-3:var(--monster-color-red-6);--monster-color-error-4:var(--monster-color-red-1);--monster-bg-color-error-1:var(--monster-color-red-4);--monster-bg-color-error-2:var(--monster-color-gray-1);--monster-bg-color-error-3:var(--monster-color-red-2);--monster-bg-color-error-4:var(--monster-color-red-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-error-1:var(--monster-color-red-1);--monster-color-error-2:var(--monster-color-red-3);--monster-color-error-3:var(--monster-color-red-4);--monster-color-error-4:var(--monster-color-red-1);--monster-bg-color-error-1:var(--monster-color-red-5);--monster-bg-color-error-2:var(--monster-color-gray-6);--monster-bg-color-error-3:var(--monster-color-red-1);--monster-bg-color-error-4:var(--monster-color-red-4)}}:after,:before,:root{--monster-color-selection-1:var(--monster-color-gray-6);--monster-color-selection-2:var(--monster-color-gray-6);--monster-color-selection-3:var(--monster-color-gray-6);--monster-color-selection-4:var(--monster-color-gray-1);--monster-bg-color-selection-1:var(--monster-color-yellow-2);--monster-bg-color-selection-2:var(--monster-color-yellow-1);--monster-bg-color-selection-3:var(--monster-color-yellow-2);--monster-bg-color-selection-4:var(--monster-color-yellow-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-selection-1:var(--monster-color-gray-6);--monster-color-selection-2:var(--monster-color-gray-6);--monster-color-selection-3:var(--monster-color-gray-6);--monster-color-selection-4:var(--monster-color-gray-1);--monster-bg-color-selection-1:var(--monster-color-yellow-2);--monster-bg-color-selection-2:var(--monster-color-yellow-1);--monster-bg-color-selection-3:var(--monster-color-yellow-2);--monster-bg-color-selection-4:var(--monster-color-yellow-6)}}:after,:before,:root{--monster-color-primary-disabled-1:var(--monster-color-gray-4);--monster-color-primary-disabled-2:var(--monster-color-gray-4);--monster-color-primary-disabled-3:var(--monster-color-gray-4);--monster-color-primary-disabled-4:var(--monster-color-gray-4);--monster-bg-color-primary-disabled-1:var(--monster-color-gray-1);--monster-bg-color-primary-disabled-2:var(--monster-color-gray-2);--monster-bg-color-primary-disabled-3:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-4:var(--monster-color-gray-6);--monster-color-gradient-1:#833ab4;--monster-color-gradient-2:#fd1d1d;--monster-color-gradient-3:#fcb045}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-primary-disabled-1:var(--monster-color-gray-4);--monster-color-primary-disabled-2:var(--monster-color-gray-4);--monster-color-primary-disabled-3:var(--monster-color-gray-3);--monster-color-primary-disabled-4:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-1:var(--monster-color-gray-6);--monster-bg-color-primary-disabled-2:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-3:var(--monster-color-gray-2);--monster-bg-color-primary-disabled-4:var(--monster-color-gray-1);--monster-color-gradient-1:#ffe0b2;--monster-color-gradient-2:#ad8275;--monster-color-gradient-3:#771ba3}}:after,:before,:root{--monster-box-shadow-1:none;--monster-box-shadow-2:-1px 1px 10px 1px hsla(0,0%,76%,.61);--monster-text-shadow:none;--monster-theme-control-bg-color:var(--monster-color-seashell-1);--monster-theme-control-color:var(--monster-color-seashell-6);--monster-theme-control-hover-color:var(--monster-color-seashell-6);--monster-theme-control-hover-bg-color:var(--monster-color-seashell-2);--monster-theme-control-border-width:2px;--monster-theme-control-border-style:solid;--monster-theme-control-border-radius:0;--monster-theme-control-border-color:var(--monster-color-primary-1)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-theme-control-bg-color:var(--monster-color-gray-5);--monster-theme-control-color:var(--monster-color-gray-1);--monster-theme-control-border-color:var(--monster-color-gray-3);--monster-theme-control-hover-color:var(--monster-color-gray-1);--monster-theme-control-hover-bg-color:var(--monster-color-gray-6)}}:after,:before,:root{--monster-theme-on-color:var(--monster-color-green-1);--monster-theme-on-bg-color:var(--monster-color-green-5);--monster-theme-off-color:var(--monster-color-gray-1);--monster-theme-off-bg-color:var(--monster-color-gray-4)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-theme-on-color:var(--monster-color-gray-6);--monster-theme-on-bg-color:var(--monster-color-gray-1);--monster-theme-off-color:var(--monster-color-gray-1);--monster-theme-off-bg-color:var(--monster-color-gray-5)}}:after,:before,:root{--monster-border-style:solid;--monster-border-width:3px;--monster-border-radius:0;--monster-outline-width:1px;--monster-popper-witharrrow-distance:-4px;--monster-z-index-default:0;--monster-z-index-outline:10;--monster-z-index-dropdown:200;--monster-z-index-dropdown-overlay:210;--monster-z-index-sticky:300;--monster-z-index-sticky-overlay:310;--monster-z-index-fixed:400;--monster-z-index-fixed-overlay:410;--monster-z-index-modal-backdrop:500;--monster-z-index-modal-backdrop-overlay:510;--monster-z-index-offcanvas:600;--monster-z-index-offcanvas-overlay:610;--monster-z-index-modal:700;--monster-z-index-modal-overlay:710;--monster-z-index-popover:800;--monster-z-index-popover-overlay:810;--monster-z-index-tooltip:800;--monster-z-index-tooltip-overlay:910;--monster-space-0:0;--monster-space-1:2px;--monster-space-2:4px;--monster-space-3:6px;--monster-space-4:10px;--monster-space-5:16px;--monster-space-6:26px;--monster-space-7:42px;--monster-breakpoint-0:480px;--monster-breakpoint-4:480px;--monster-breakpoint-7:768px;--monster-breakpoint-9:992px;--monster-breakpoint-12:1200px;--monster-dragger-width:2px;--monster-dragger-handle-width:4px;--monster-dragger-handle-height:50px}.monster-skeleton-col-10{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-color-50:rgba(from var(--monster-color-pink-2) 255 255 255/0.5);--monster-skeleton-height:100%;--monster-skeleton-width:10%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0%,var(--monster-skeleton-color-50) 40%,transparent 70%)}.monster-skeleton-col-10,.monster-skeleton-col-20{background-image:var(--monster-skeleton);background-size:var(--monster-skeleton-width) var(--monster-skeleton-height);background-repeat:no-repeat;background-position:0 0;color:var(--monster-skeleton-color);min-height:1px}.monster-skeleton-col-20{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-color-50:rgba(from var(--monster-color-pink-2) 255 255 255/0.5);--monster-skeleton-height:100%;--monster-skeleton-width:20%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0%,var(--monster-skeleton-color-50) 40%,transparent 70%)}.monster-skeleton-col-30{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-color-50:rgba(from var(--monster-color-pink-2) 255 255 255/0.5);--monster-skeleton-height:100%;--monster-skeleton-width:30%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0%,var(--monster-skeleton-color-50) 40%,transparent 70%)}.monster-skeleton-col-30,.monster-skeleton-col-40{background-image:var(--monster-skeleton);background-size:var(--monster-skeleton-width) var(--monster-skeleton-height);background-repeat:no-repeat;background-position:0 0;color:var(--monster-skeleton-color);min-height:1px}.monster-skeleton-col-40{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-color-50:rgba(from var(--monster-color-pink-2) 255 255 255/0.5);--monster-skeleton-height:100%;--monster-skeleton-width:40%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0%,var(--monster-skeleton-color-50) 40%,transparent 70%)}.monster-skeleton-col-50{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-color-50:rgba(from var(--monster-color-pink-2) 255 255 255/0.5);--monster-skeleton-height:100%;--monster-skeleton-width:50%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0%,var(--monster-skeleton-color-50) 40%,transparent 70%)}.monster-skeleton-col-50,.monster-skeleton-col-60{background-image:var(--monster-skeleton);background-size:var(--monster-skeleton-width) var(--monster-skeleton-height);background-repeat:no-repeat;background-position:0 0;color:var(--monster-skeleton-color);min-height:1px}.monster-skeleton-col-60{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-color-50:rgba(from var(--monster-color-pink-2) 255 255 255/0.5);--monster-skeleton-height:100%;--monster-skeleton-width:60%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0%,var(--monster-skeleton-color-50) 40%,transparent 70%)}.monster-skeleton-col-70{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-color-50:rgba(from var(--monster-color-pink-2) 255 255 255/0.5);--monster-skeleton-height:100%;--monster-skeleton-width:70%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0%,var(--monster-skeleton-color-50) 40%,transparent 70%)}.monster-skeleton-col-70,.monster-skeleton-col-80{background-image:var(--monster-skeleton);background-size:var(--monster-skeleton-width) var(--monster-skeleton-height);background-repeat:no-repeat;background-position:0 0;color:var(--monster-skeleton-color);min-height:1px}.monster-skeleton-col-80{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-color-50:rgba(from var(--monster-color-pink-2) 255 255 255/0.5);--monster-skeleton-height:100%;--monster-skeleton-width:80%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0%,var(--monster-skeleton-color-50) 40%,transparent 70%)}.monster-skeleton-col-90{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-color-50:rgba(from var(--monster-color-pink-2) 255 255 255/0.5);--monster-skeleton-height:100%;--monster-skeleton-width:90%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0%,var(--monster-skeleton-color-50) 40%,transparent 70%)}.monster-skeleton-col-100,.monster-skeleton-col-90{background-image:var(--monster-skeleton);background-size:var(--monster-skeleton-width) var(--monster-skeleton-height);background-repeat:no-repeat;background-position:0 0;color:var(--monster-skeleton-color);min-height:1px}.monster-skeleton-col-100{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-color-50:rgba(from var(--monster-color-pink-2) 255 255 255/0.5);--monster-skeleton-height:100%;--monster-skeleton-width:100%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0%,var(--monster-skeleton-color-50) 40%,transparent 70%)}.monster-skeleton-animated{animation:shimmer 4.25s linear infinite forwards;border-radius:4px}@keyframes shimmer{0%,to{filter:brightness(.81)}50%{filter:brightness(.45)}}[data-monster-role=control]{display:flex;flex-direction:column;height:100%;width:100%;min-height:1rem;min-width:1rem;box-sizing:border-box}[data-monster-visible=false]{display:none}[data-monster-visible=true]{height:100%}:host{display:inline-block;min-width:1rem;min-height:1rem;height:100%;box-sizing:border-box}.monster-skeleton-animated{height:100%;min-height:1rem}
28
+ [data-monster-role=control]{outline:none}[data-monster-role=control].flex{display:flex;flex-direction:row;align-items:center}:host{display:block}:after,:before,:root{--monster-font-family:-apple-system,BlinkMacSystemFont,\"Quicksand\",\"Segoe UI\",\"Roboto\",\"Oxygen\",\"Ubuntu\",\"Cantarell\",\"Fira Sans\",\"Droid Sans\",\"Helvetica Neue\",Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\";--monster-font-family-monospace:\"Consolas\",\"Courier New\",\"Roboto Mono\",\"Source Code Pro\",\"Fira Mono\",monospace;--monster-font-size-min:15px;--monster-font-size-base:16px;--monster-font-size-max:16px;--monster-font-scale:1;--monster-font-scale-hi-dpi:1.25;--monster-font-scale-xhi-dpi:1.25;--monster-font-size-fluid:clamp(var(--monster-font-size-min),calc(var(--monster-font-size-min) + 0.1vw),var(--monster-font-size-max))}@media (min-resolution:1.5dppx){:after,:before,:root{--monster-font-scale:var(--monster-font-scale-hi-dpi,1.1)}}@media (min-resolution:3dppx){:after,:before,:root{--monster-font-scale:var(--monster-font-scale-xhi-dpi,1.18)}}:after,:before,:root{--monster-color-primary-1:var(--monster-color-gray-6);--monster-color-primary-2:var(--monster-color-gray-6);--monster-color-primary-3:var(--monster-color-cinnamon-1);--monster-color-primary-4:var(--monster-color-cinnamon-1);--monster-bg-color-primary-1:var(--monster-color-gray-1);--monster-bg-color-primary-2:var(--monster-color-gray-2);--monster-bg-color-primary-3:var(--monster-color-gray-6);--monster-bg-color-primary-4:var(--monster-color-gray-4)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-primary-1:var(--monster-color-gray-1);--monster-color-primary-2:var(--monster-color-gray-1);--monster-color-primary-3:var(--monster-color-gray-6);--monster-color-primary-4:var(--monster-color-gray-6);--monster-bg-color-primary-1:var(--monster-color-gray-6);--monster-bg-color-primary-2:var(--monster-color-gray-3);--monster-bg-color-primary-3:var(--monster-color-gray-2);--monster-bg-color-primary-4:var(--monster-color-gray-1)}}:after,:before,:root{--monster-color-secondary-1:var(--monster-color-red-4);--monster-color-secondary-2:var(--monster-color-red-4);--monster-color-secondary-3:var(--monster-color-red-1);--monster-color-secondary-4:var(--monster-color-red-1);--monster-bg-color-secondary-1:var(--monster-color-gray-1);--monster-bg-color-secondary-2:var(--monster-color-red-2);--monster-bg-color-secondary-3:var(--monster-color-red-3);--monster-bg-color-secondary-4:var(--monster-color-red-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-secondary-1:var(--monster-color-red-1);--monster-color-secondary-2:var(--monster-color-red-1);--monster-color-secondary-3:var(--monster-color-red-6);--monster-color-secondary-4:var(--monster-color-red-4);--monster-bg-color-secondary-1:var(--monster-color-gray-6);--monster-bg-color-secondary-2:var(--monster-color-red-3);--monster-bg-color-secondary-3:var(--monster-color-red-2);--monster-bg-color-secondary-4:var(--monster-color-red-1)}}:after,:before,:root{--monster-color-tertiary-1:var(--monster-color-magenta-4);--monster-color-tertiary-2:var(--monster-color-magenta-4);--monster-color-tertiary-3:var(--monster-color-magenta-6);--monster-color-tertiary-4:var(--monster-color-magenta-1);--monster-bg-color-tertiary-1:var(--monster-color-gray-1);--monster-bg-color-tertiary-2:var(--monster-color-magenta-1);--monster-bg-color-tertiary-3:var(--monster-color-magenta-2);--monster-bg-color-tertiary-4:var(--monster-color-magenta-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-tertiary-1:var(--monster-color-magenta-1);--monster-color-tertiary-2:var(--monster-color-magenta-6);--monster-color-tertiary-3:var(--monster-color-magenta-4);--monster-color-tertiary-4:var(--monster-color-magenta-4);--monster-bg-color-tertiary-1:var(--monster-color-gray-6);--monster-bg-color-tertiary-2:var(--monster-color-magenta-2);--monster-bg-color-tertiary-3:var(--monster-color-magenta-1);--monster-bg-color-tertiary-4:var(--monster-color-magenta-1)}}:after,:before,:root{--monster-color-destructive-1:var(--monster-color-red-1);--monster-color-destructive-2:var(--monster-color-red-4);--monster-color-destructive-3:var(--monster-color-red-6);--monster-color-destructive-4:var(--monster-color-red-1);--monster-bg-color-destructive-1:var(--monster-color-red-4);--monster-bg-color-destructive-2:var(--monster-color-gray-1);--monster-bg-color-destructive-3:var(--monster-color-red-2);--monster-bg-color-destructive-4:var(--monster-color-red-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-destructive-1:var(--monster-color-red-1);--monster-color-destructive-2:var(--monster-color-red-3);--monster-color-destructive-3:var(--monster-color-red-4);--monster-color-destructive-4:var(--monster-color-red-1);--monster-bg-color-destructive-1:var(--monster-color-red-5);--monster-bg-color-destructive-2:var(--monster-color-gray-6);--monster-bg-color-destructive-3:var(--monster-color-red-1);--monster-bg-color-destructive-4:var(--monster-color-red-4)}}:after,:before,:root{--monster-color-danger-1:var(--monster-color-raspberry-1);--monster-color-danger-2:var(--monster-color-raspberry-4);--monster-color-danger-3:var(--monster-color-raspberry-6);--monster-color-danger-4:var(--monster-color-raspberry-1);--monster-bg-color-danger-1:var(--monster-color-raspberry-4);--monster-bg-color-danger-2:var(--monster-color-gray-1);--monster-bg-color-danger-3:var(--monster-color-raspberry-2);--monster-bg-color-danger-4:var(--monster-color-raspberry-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-danger-1:var(--monster-color-raspberry-1);--monster-color-danger-2:var(--monster-color-raspberry-3);--monster-color-danger-3:var(--monster-color-raspberry-4);--monster-color-danger-4:var(--monster-color-raspberry-1);--monster-bg-color-danger-1:var(--monster-color-raspberry-5);--monster-bg-color-danger-2:var(--monster-color-gray-6);--monster-bg-color-danger-3:var(--monster-color-raspberry-1);--monster-bg-color-danger-4:var(--monster-color-raspberry-4)}}:after,:before,:root{--monster-color-success-1:var(--monster-color-green-1);--monster-color-success-2:var(--monster-color-green-4);--monster-color-success-3:var(--monster-color-green-6);--monster-color-success-4:var(--monster-color-green-1);--monster-bg-color-success-1:var(--monster-color-green-3);--monster-bg-color-success-2:var(--monster-color-gray-1);--monster-bg-color-success-3:var(--monster-color-green-2);--monster-bg-color-success-4:var(--monster-color-green-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-success-1:var(--monster-color-green-1);--monster-color-success-2:var(--monster-color-green-2);--monster-color-success-3:var(--monster-color-green-4);--monster-color-success-4:var(--monster-color-green-1);--monster-bg-color-success-1:var(--monster-color-green-5);--monster-bg-color-success-2:var(--monster-color-gray-6);--monster-bg-color-success-3:var(--monster-color-green-1);--monster-bg-color-success-4:var(--monster-color-green-3)}}:after,:before,:root{--monster-color-warning-1:var(--monster-color-orange-1);--monster-color-warning-2:var(--monster-color-orange-4);--monster-color-warning-3:var(--monster-color-orange-6);--monster-color-warning-4:var(--monster-color-orange-1);--monster-bg-color-warning-1:var(--monster-color-orange-3);--monster-bg-color-warning-2:var(--monster-color-gray-1);--monster-bg-color-warning-3:var(--monster-color-orange-2);--monster-bg-color-warning-4:var(--monster-color-orange-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-warning-1:var(--monster-color-orange-1);--monster-color-warning-2:var(--monster-color-orange-3);--monster-color-warning-3:var(--monster-color-orange-4);--monster-color-warning-4:var(--monster-color-orange-1);--monster-bg-color-warning-1:var(--monster-color-orange-5);--monster-bg-color-warning-2:var(--monster-color-gray-6);--monster-bg-color-warning-3:var(--monster-color-orange-1);--monster-bg-color-warning-4:var(--monster-color-orange-3)}}:after,:before,:root{--monster-color-error-1:var(--monster-color-red-1);--monster-color-error-2:var(--monster-color-red-4);--monster-color-error-3:var(--monster-color-red-6);--monster-color-error-4:var(--monster-color-red-1);--monster-bg-color-error-1:var(--monster-color-red-4);--monster-bg-color-error-2:var(--monster-color-gray-1);--monster-bg-color-error-3:var(--monster-color-red-2);--monster-bg-color-error-4:var(--monster-color-red-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-error-1:var(--monster-color-red-1);--monster-color-error-2:var(--monster-color-red-3);--monster-color-error-3:var(--monster-color-red-4);--monster-color-error-4:var(--monster-color-red-1);--monster-bg-color-error-1:var(--monster-color-red-5);--monster-bg-color-error-2:var(--monster-color-gray-6);--monster-bg-color-error-3:var(--monster-color-red-1);--monster-bg-color-error-4:var(--monster-color-red-4)}}:after,:before,:root{--monster-color-selection-1:var(--monster-color-gray-6);--monster-color-selection-2:var(--monster-color-gray-6);--monster-color-selection-3:var(--monster-color-gray-6);--monster-color-selection-4:var(--monster-color-gray-1);--monster-bg-color-selection-1:var(--monster-color-yellow-2);--monster-bg-color-selection-2:var(--monster-color-yellow-1);--monster-bg-color-selection-3:var(--monster-color-yellow-2);--monster-bg-color-selection-4:var(--monster-color-yellow-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-selection-1:var(--monster-color-gray-6);--monster-color-selection-2:var(--monster-color-gray-6);--monster-color-selection-3:var(--monster-color-gray-6);--monster-color-selection-4:var(--monster-color-gray-1);--monster-bg-color-selection-1:var(--monster-color-yellow-2);--monster-bg-color-selection-2:var(--monster-color-yellow-1);--monster-bg-color-selection-3:var(--monster-color-yellow-2);--monster-bg-color-selection-4:var(--monster-color-yellow-6)}}:after,:before,:root{--monster-color-primary-disabled-1:var(--monster-color-gray-4);--monster-color-primary-disabled-2:var(--monster-color-gray-4);--monster-color-primary-disabled-3:var(--monster-color-gray-4);--monster-color-primary-disabled-4:var(--monster-color-gray-4);--monster-bg-color-primary-disabled-1:var(--monster-color-gray-1);--monster-bg-color-primary-disabled-2:var(--monster-color-gray-2);--monster-bg-color-primary-disabled-3:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-4:var(--monster-color-gray-6);--monster-color-gradient-1:#833ab4;--monster-color-gradient-2:#fd1d1d;--monster-color-gradient-3:#fcb045}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-primary-disabled-1:var(--monster-color-gray-4);--monster-color-primary-disabled-2:var(--monster-color-gray-4);--monster-color-primary-disabled-3:var(--monster-color-gray-3);--monster-color-primary-disabled-4:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-1:var(--monster-color-gray-6);--monster-bg-color-primary-disabled-2:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-3:var(--monster-color-gray-2);--monster-bg-color-primary-disabled-4:var(--monster-color-gray-1);--monster-color-gradient-1:#ffe0b2;--monster-color-gradient-2:#ad8275;--monster-color-gradient-3:#771ba3}}:after,:before,:root{--monster-box-shadow-1:none;--monster-box-shadow-2:-1px 1px 10px 1px hsla(0,0%,76%,.61);--monster-text-shadow:none;--monster-theme-control-bg-color:var(--monster-color-seashell-1);--monster-theme-control-color:var(--monster-color-seashell-6);--monster-theme-control-hover-color:var(--monster-color-seashell-6);--monster-theme-control-hover-bg-color:var(--monster-color-seashell-2);--monster-theme-control-border-width:2px;--monster-theme-control-border-style:solid;--monster-theme-control-border-radius:0;--monster-theme-control-border-color:var(--monster-color-primary-1)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-theme-control-bg-color:var(--monster-color-gray-5);--monster-theme-control-color:var(--monster-color-gray-1);--monster-theme-control-border-color:var(--monster-color-gray-3);--monster-theme-control-hover-color:var(--monster-color-gray-1);--monster-theme-control-hover-bg-color:var(--monster-color-gray-6)}}:after,:before,:root{--monster-theme-on-color:var(--monster-color-green-1);--monster-theme-on-bg-color:var(--monster-color-green-5);--monster-theme-off-color:var(--monster-color-gray-1);--monster-theme-off-bg-color:var(--monster-color-gray-4)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-theme-on-color:var(--monster-color-gray-6);--monster-theme-on-bg-color:var(--monster-color-gray-1);--monster-theme-off-color:var(--monster-color-gray-1);--monster-theme-off-bg-color:var(--monster-color-gray-5)}}:after,:before,:root{--monster-border-style:solid;--monster-border-width:3px;--monster-border-radius:0;--monster-outline-width:1px;--monster-focus-ring-width:2px;--monster-focus-ring-style:solid;--monster-focus-ring-color:var(--monster-color-blue-4);--monster-focus-ring-offset:2px}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-focus-ring-color:var(--monster-color-yellow-2)}}:after,:before,:root{--monster-popper-witharrrow-distance:-4px;--monster-z-index-default:0;--monster-z-index-outline:10;--monster-z-index-dropdown:200;--monster-z-index-dropdown-overlay:210;--monster-z-index-sticky:300;--monster-z-index-sticky-overlay:310;--monster-z-index-fixed:400;--monster-z-index-fixed-overlay:410;--monster-z-index-modal-backdrop:500;--monster-z-index-modal-backdrop-overlay:510;--monster-z-index-offcanvas:600;--monster-z-index-offcanvas-overlay:610;--monster-z-index-modal:700;--monster-z-index-modal-overlay:710;--monster-z-index-popover:800;--monster-z-index-popover-overlay:810;--monster-z-index-tooltip:800;--monster-z-index-tooltip-overlay:910;--monster-space-0:0;--monster-space-1:2px;--monster-space-2:4px;--monster-space-3:6px;--monster-space-4:10px;--monster-space-5:16px;--monster-space-6:26px;--monster-space-7:42px;--monster-breakpoint-0:480px;--monster-breakpoint-4:480px;--monster-breakpoint-7:768px;--monster-breakpoint-9:992px;--monster-breakpoint-12:1200px;--monster-dragger-width:2px;--monster-dragger-handle-width:4px;--monster-dragger-handle-height:50px}.monster-skeleton-col-10{--monster-skeleton-color:var(--monster-skeleton-fill,var(--monster-bg-color-primary-3));--monster-skeleton-color-50:color-mix(in srgb,var(--monster-skeleton-color) 50%,transparent);--monster-skeleton-height:100%;--monster-skeleton-width:10%;--monster-skeleton:linear-gradient(99deg,transparent 0%,var(--monster-skeleton-color-50) 18%,var(--monster-skeleton-color) 48%,var(--monster-skeleton-color-50) 78%,transparent 100%)}.monster-skeleton-col-10,.monster-skeleton-col-20{background-image:var(--monster-skeleton);background-size:var(--monster-skeleton-width) var(--monster-skeleton-height);background-repeat:no-repeat;background-position:0 0;color:var(--monster-skeleton-color);min-height:1px}.monster-skeleton-col-20{--monster-skeleton-color:var(--monster-skeleton-fill,var(--monster-bg-color-primary-3));--monster-skeleton-color-50:color-mix(in srgb,var(--monster-skeleton-color) 50%,transparent);--monster-skeleton-height:100%;--monster-skeleton-width:20%;--monster-skeleton:linear-gradient(99deg,transparent 0%,var(--monster-skeleton-color-50) 18%,var(--monster-skeleton-color) 48%,var(--monster-skeleton-color-50) 78%,transparent 100%)}.monster-skeleton-col-30{--monster-skeleton-color:var(--monster-skeleton-fill,var(--monster-bg-color-primary-3));--monster-skeleton-color-50:color-mix(in srgb,var(--monster-skeleton-color) 50%,transparent);--monster-skeleton-height:100%;--monster-skeleton-width:30%;--monster-skeleton:linear-gradient(99deg,transparent 0%,var(--monster-skeleton-color-50) 18%,var(--monster-skeleton-color) 48%,var(--monster-skeleton-color-50) 78%,transparent 100%)}.monster-skeleton-col-30,.monster-skeleton-col-40{background-image:var(--monster-skeleton);background-size:var(--monster-skeleton-width) var(--monster-skeleton-height);background-repeat:no-repeat;background-position:0 0;color:var(--monster-skeleton-color);min-height:1px}.monster-skeleton-col-40{--monster-skeleton-color:var(--monster-skeleton-fill,var(--monster-bg-color-primary-3));--monster-skeleton-color-50:color-mix(in srgb,var(--monster-skeleton-color) 50%,transparent);--monster-skeleton-height:100%;--monster-skeleton-width:40%;--monster-skeleton:linear-gradient(99deg,transparent 0%,var(--monster-skeleton-color-50) 18%,var(--monster-skeleton-color) 48%,var(--monster-skeleton-color-50) 78%,transparent 100%)}.monster-skeleton-col-50{--monster-skeleton-color:var(--monster-skeleton-fill,var(--monster-bg-color-primary-3));--monster-skeleton-color-50:color-mix(in srgb,var(--monster-skeleton-color) 50%,transparent);--monster-skeleton-height:100%;--monster-skeleton-width:50%;--monster-skeleton:linear-gradient(99deg,transparent 0%,var(--monster-skeleton-color-50) 18%,var(--monster-skeleton-color) 48%,var(--monster-skeleton-color-50) 78%,transparent 100%)}.monster-skeleton-col-50,.monster-skeleton-col-60{background-image:var(--monster-skeleton);background-size:var(--monster-skeleton-width) var(--monster-skeleton-height);background-repeat:no-repeat;background-position:0 0;color:var(--monster-skeleton-color);min-height:1px}.monster-skeleton-col-60{--monster-skeleton-color:var(--monster-skeleton-fill,var(--monster-bg-color-primary-3));--monster-skeleton-color-50:color-mix(in srgb,var(--monster-skeleton-color) 50%,transparent);--monster-skeleton-height:100%;--monster-skeleton-width:60%;--monster-skeleton:linear-gradient(99deg,transparent 0%,var(--monster-skeleton-color-50) 18%,var(--monster-skeleton-color) 48%,var(--monster-skeleton-color-50) 78%,transparent 100%)}.monster-skeleton-col-70{--monster-skeleton-color:var(--monster-skeleton-fill,var(--monster-bg-color-primary-3));--monster-skeleton-color-50:color-mix(in srgb,var(--monster-skeleton-color) 50%,transparent);--monster-skeleton-height:100%;--monster-skeleton-width:70%;--monster-skeleton:linear-gradient(99deg,transparent 0%,var(--monster-skeleton-color-50) 18%,var(--monster-skeleton-color) 48%,var(--monster-skeleton-color-50) 78%,transparent 100%)}.monster-skeleton-col-70,.monster-skeleton-col-80{background-image:var(--monster-skeleton);background-size:var(--monster-skeleton-width) var(--monster-skeleton-height);background-repeat:no-repeat;background-position:0 0;color:var(--monster-skeleton-color);min-height:1px}.monster-skeleton-col-80{--monster-skeleton-color:var(--monster-skeleton-fill,var(--monster-bg-color-primary-3));--monster-skeleton-color-50:color-mix(in srgb,var(--monster-skeleton-color) 50%,transparent);--monster-skeleton-height:100%;--monster-skeleton-width:80%;--monster-skeleton:linear-gradient(99deg,transparent 0%,var(--monster-skeleton-color-50) 18%,var(--monster-skeleton-color) 48%,var(--monster-skeleton-color-50) 78%,transparent 100%)}.monster-skeleton-col-90{--monster-skeleton-color:var(--monster-skeleton-fill,var(--monster-bg-color-primary-3));--monster-skeleton-color-50:color-mix(in srgb,var(--monster-skeleton-color) 50%,transparent);--monster-skeleton-height:100%;--monster-skeleton-width:90%;--monster-skeleton:linear-gradient(99deg,transparent 0%,var(--monster-skeleton-color-50) 18%,var(--monster-skeleton-color) 48%,var(--monster-skeleton-color-50) 78%,transparent 100%)}.monster-skeleton-col-100,.monster-skeleton-col-90{background-image:var(--monster-skeleton);background-size:var(--monster-skeleton-width) var(--monster-skeleton-height);background-repeat:no-repeat;background-position:0 0;color:var(--monster-skeleton-color);min-height:1px}.monster-skeleton-col-100{--monster-skeleton-color:var(--monster-skeleton-fill,var(--monster-bg-color-primary-3));--monster-skeleton-color-50:color-mix(in srgb,var(--monster-skeleton-color) 50%,transparent);--monster-skeleton-height:100%;--monster-skeleton-width:100%;--monster-skeleton:linear-gradient(99deg,transparent 0%,var(--monster-skeleton-color-50) 18%,var(--monster-skeleton-color) 48%,var(--monster-skeleton-color-50) 78%,transparent 100%)}.monster-skeleton-animated{animation:shimmer 4.25s linear infinite forwards;border-radius:4px}@keyframes shimmer{0%,to{filter:brightness(.81)}50%{filter:brightness(.45)}}@media (prefers-reduced-motion:reduce){.monster-skeleton-animated{animation:none}}[data-monster-role=control]{display:flex;flex-direction:column;height:100%;width:100%;min-height:1rem;min-width:1rem;box-sizing:border-box}[data-monster-visible=false]{display:none}[data-monster-visible=true]{height:100%}:host{display:inline-block;min-width:1rem;min-height:1rem;height:100%;box-sizing:border-box}.monster-skeleton-animated{height:100%;min-height:1rem}
29
29
  }`,
30
30
  0,
31
31
  );
package/source/components/content/stylesheet/viewer.mjs CHANGED
@@ -25,7 +25,67 @@ try {
25
25
  ViewerStyleSheet.insertRule(
26
26
  `
27
27
  @layer viewer {
28
- :where(html){line-height:1.15;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}:where(h1){font-size:2em;margin-block-end:.67em;margin-block-start:.67em}:where(dl,ol,ul) :where(dl,ol,ul){margin-block-end:0;margin-block-start:0}:where(hr){box-sizing:content-box;color:inherit;height:0}:where(abbr[title]){text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}:where(b,strong){font-weight:bolder}:where(code,kbd,pre,samp){font-family:monospace,monospace;font-size:1em}:where(small){font-size:80%}:where(table){border-color:currentColor;text-indent:0}:where(button,input,select){margin:0}:where(button){text-transform:none}:where(button,input:is([type=button i],[type=reset i],[type=submit i])){-webkit-appearance:button}:where(progress){vertical-align:baseline}:where(select){text-transform:none}:where(textarea){margin:0}:where(input[type=search i]){-webkit-appearance:textfield;outline-offset:-2px}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}:where(button,input:is([type=button i],[type=color i],[type=reset i],[type=submit i]))::-moz-focus-inner{border-style:none;padding:0}:where(button,input:is([type=button i],[type=color i],[type=reset i],[type=submit i]))::-moz-focusring{outline:1px dotted ButtonText}:where(:-moz-ui-invalid){box-shadow:none}:where(dialog){background-color:#fff;border:solid;color:#000;height:-moz-fit-content;height:fit-content;left:0;margin:auto;padding:1em;position:absolute;right:0;width:-moz-fit-content;width:fit-content}:where(dialog:not([open])){display:none}:where(summary){display:list-item}html{height:100%}body,html{min-height:calc(100vh - 40px)}body{box-sizing:border-box;margin:0;padding:0;word-break:break-word}body:focus-visible{outline:none}:focus-visible{outline:none}button{background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1)}.monster-button-primary,button{width:-webkit-fill-available;width:-moz-available;width:stretch;font-size:1rem;font-weight:400;line-height:1.5;text-align:center;text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;border-width:var(--monster-border-width);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);box-shadow:var(--monster-box-shadow-1);padding:.375rem .75rem;outline:none;background-position:50%;position:relative;overflow:hidden;font-family:var(--monster-font-family),sans-serif;display:flex;align-items:center;justify-content:center;gap:.4rem}.monster-button-primary{color:var(--monster-color-primary-4);background-color:var(--monster-bg-color-primary-4);border-color:var(--monster-bg-color-primary-4)}.monster-button-secondary{border-width:var(--monster-border-width);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);color:var(--monster-color-secondary-4);background-color:var(--monster-bg-color-secondary-4);border-color:var(--monster-bg-color-secondary-4)}.monster-button-secondary,.monster-button-tertiary{width:-webkit-fill-available;width:-moz-available;width:stretch;font-size:1rem;font-weight:400;line-height:1.5;text-align:center;text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-shadow:var(--monster-box-shadow-1);padding:.375rem .75rem;outline:none;background-position:50%;position:relative;overflow:hidden;font-family:var(--monster-font-family),sans-serif;display:flex;align-items:center;justify-content:center;gap:.4rem}.monster-button-tertiary{border-width:var(--monster-border-width);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);color:var(--monster-color-tertiary-4);background-color:var(--monster-bg-color-tertiary-4);border-color:var(--monster-bg-color-tertiary-4)}.monster-button-outline-primary{border-width:var(--monster-border-width);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);color:var(--monster-bg-color-primary-4);background-color:var(--monster-color-primary-4);border-color:var(--monster-bg-color-primary-4)}.monster-button-outline-primary,.monster-button-outline-secondary{width:-webkit-fill-available;width:-moz-available;width:stretch;font-size:1rem;font-weight:400;line-height:1.5;text-align:center;text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-shadow:var(--monster-box-shadow-1);padding:.375rem .75rem;outline:none;background-position:50%;position:relative;overflow:hidden;font-family:var(--monster-font-family),sans-serif;display:flex;align-items:center;justify-content:center;gap:.4rem}.monster-button-outline-secondary{border-width:var(--monster-border-width);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);color:var(--monster-bg-color-secondary-4);background-color:var(--monster-color-secondary-4);border-color:var(--monster-bg-color-secondary-4)}.monster-button-outline-tertiary{width:-webkit-fill-available;width:-moz-available;width:stretch;font-size:1rem;font-weight:400;line-height:1.5;text-align:center;text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;border-width:var(--monster-border-width);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);box-shadow:var(--monster-box-shadow-1);padding:.375rem .75rem;outline:none;background-position:50%;position:relative;overflow:hidden;font-family:var(--monster-font-family),sans-serif;display:flex;align-items:center;justify-content:center;gap:.4rem;color:var(--monster-bg-color-tertiary-4);background-color:var(--monster-color-tertiary-4);border-color:var(--monster-bg-color-tertiary-4)}button:hover{transition:background .8s,color .25s .0833333333s;box-shadow:var(--monster-box-shadow-2)}button:disabled{cursor:not-allowed}button:active{transition:background .8s,color .25s .0833333333s;box-shadow:var(--monster-box-shadow-2);z-index:var(--monster-z-index-outline)}.monster-button-bar,.monster-button-group{display:flex;justify-content:space-between;align-content:center;flex-wrap:nowrap;flex-direction:row;align-items:stretch}.monster-button-group{box-sizing:border-box;gap:0;margin:1rem 0}.monster-button-group>:not(:last-child){margin-right:calc(var(--monster-border-width)*-1)}.monster-button-group :hover{box-shadow:none}button:focus{outline:1px dashed var(--monster-color-selection-4);outline-offset:2px;z-index:var(--monster-z-index-outline)}@media (prefers-color-scheme:light){button:focus{outline:1px dashed var(--monster-color-selection-3);outline-offset:2px;z-index:var(--monster-z-index-outline)}}[data-monster-role=control]{outline:none;width:100%;box-sizing:border-box}[data-monster-role=control].flex{display:flex;flex-direction:row;align-items:center}:host{display:block;box-sizing:border-box}:after,:before,:root{--monster-font-family:-apple-system,BlinkMacSystemFont,\"Quicksand\",\"Segoe UI\",\"Roboto\",\"Oxygen\",\"Ubuntu\",\"Cantarell\",\"Fira Sans\",\"Droid Sans\",\"Helvetica Neue\",Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\";--monster-font-family-monospace:\"Consolas\",\"Courier New\",\"Roboto Mono\",\"Source Code Pro\",\"Fira Mono\",monospace;--monster-font-size-min:15px;--monster-font-size-base:16px;--monster-font-size-max:16px;--monster-font-scale:1;--monster-font-scale-hi-dpi:1.25;--monster-font-scale-xhi-dpi:1.25;--monster-font-size-fluid:clamp(var(--monster-font-size-min),calc(var(--monster-font-size-min) + 0.1vw),var(--monster-font-size-max))}@media (min-resolution:1.5dppx){:after,:before,:root{--monster-font-scale:var(--monster-font-scale-hi-dpi,1.1)}}@media (min-resolution:3dppx){:after,:before,:root{--monster-font-scale:var(--monster-font-scale-xhi-dpi,1.18)}}:after,:before,:root{--monster-color-primary-1:var(--monster-color-gray-6);--monster-color-primary-2:var(--monster-color-gray-6);--monster-color-primary-3:var(--monster-color-cinnamon-1);--monster-color-primary-4:var(--monster-color-cinnamon-1);--monster-bg-color-primary-1:var(--monster-color-gray-1);--monster-bg-color-primary-2:var(--monster-color-gray-2);--monster-bg-color-primary-3:var(--monster-color-gray-6);--monster-bg-color-primary-4:var(--monster-color-gray-4)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-primary-1:var(--monster-color-gray-1);--monster-color-primary-2:var(--monster-color-gray-1);--monster-color-primary-3:var(--monster-color-gray-6);--monster-color-primary-4:var(--monster-color-gray-6);--monster-bg-color-primary-1:var(--monster-color-gray-6);--monster-bg-color-primary-2:var(--monster-color-gray-3);--monster-bg-color-primary-3:var(--monster-color-gray-2);--monster-bg-color-primary-4:var(--monster-color-gray-1)}}:after,:before,:root{--monster-color-secondary-1:var(--monster-color-red-4);--monster-color-secondary-2:var(--monster-color-red-4);--monster-color-secondary-3:var(--monster-color-red-1);--monster-color-secondary-4:var(--monster-color-red-1);--monster-bg-color-secondary-1:var(--monster-color-gray-1);--monster-bg-color-secondary-2:var(--monster-color-red-2);--monster-bg-color-secondary-3:var(--monster-color-red-3);--monster-bg-color-secondary-4:var(--monster-color-red-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-secondary-1:var(--monster-color-red-1);--monster-color-secondary-2:var(--monster-color-red-1);--monster-color-secondary-3:var(--monster-color-red-6);--monster-color-secondary-4:var(--monster-color-red-4);--monster-bg-color-secondary-1:var(--monster-color-gray-6);--monster-bg-color-secondary-2:var(--monster-color-red-3);--monster-bg-color-secondary-3:var(--monster-color-red-2);--monster-bg-color-secondary-4:var(--monster-color-red-1)}}:after,:before,:root{--monster-color-tertiary-1:var(--monster-color-magenta-4);--monster-color-tertiary-2:var(--monster-color-magenta-4);--monster-color-tertiary-3:var(--monster-color-magenta-6);--monster-color-tertiary-4:var(--monster-color-magenta-1);--monster-bg-color-tertiary-1:var(--monster-color-gray-1);--monster-bg-color-tertiary-2:var(--monster-color-magenta-1);--monster-bg-color-tertiary-3:var(--monster-color-magenta-2);--monster-bg-color-tertiary-4:var(--monster-color-magenta-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-tertiary-1:var(--monster-color-magenta-1);--monster-color-tertiary-2:var(--monster-color-magenta-6);--monster-color-tertiary-3:var(--monster-color-magenta-4);--monster-color-tertiary-4:var(--monster-color-magenta-4);--monster-bg-color-tertiary-1:var(--monster-color-gray-6);--monster-bg-color-tertiary-2:var(--monster-color-magenta-2);--monster-bg-color-tertiary-3:var(--monster-color-magenta-1);--monster-bg-color-tertiary-4:var(--monster-color-magenta-1)}}:after,:before,:root{--monster-color-destructive-1:var(--monster-color-red-1);--monster-color-destructive-2:var(--monster-color-red-4);--monster-color-destructive-3:var(--monster-color-red-6);--monster-color-destructive-4:var(--monster-color-red-1);--monster-bg-color-destructive-1:var(--monster-color-red-4);--monster-bg-color-destructive-2:var(--monster-color-gray-1);--monster-bg-color-destructive-3:var(--monster-color-red-2);--monster-bg-color-destructive-4:var(--monster-color-red-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-destructive-1:var(--monster-color-red-1);--monster-color-destructive-2:var(--monster-color-red-3);--monster-color-destructive-3:var(--monster-color-red-4);--monster-color-destructive-4:var(--monster-color-red-1);--monster-bg-color-destructive-1:var(--monster-color-red-5);--monster-bg-color-destructive-2:var(--monster-color-gray-6);--monster-bg-color-destructive-3:var(--monster-color-red-1);--monster-bg-color-destructive-4:var(--monster-color-red-4)}}:after,:before,:root{--monster-color-danger-1:var(--monster-color-raspberry-1);--monster-color-danger-2:var(--monster-color-raspberry-4);--monster-color-danger-3:var(--monster-color-raspberry-6);--monster-color-danger-4:var(--monster-color-raspberry-1);--monster-bg-color-danger-1:var(--monster-color-raspberry-4);--monster-bg-color-danger-2:var(--monster-color-gray-1);--monster-bg-color-danger-3:var(--monster-color-raspberry-2);--monster-bg-color-danger-4:var(--monster-color-raspberry-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-danger-1:var(--monster-color-raspberry-1);--monster-color-danger-2:var(--monster-color-raspberry-3);--monster-color-danger-3:var(--monster-color-raspberry-4);--monster-color-danger-4:var(--monster-color-raspberry-1);--monster-bg-color-danger-1:var(--monster-color-raspberry-5);--monster-bg-color-danger-2:var(--monster-color-gray-6);--monster-bg-color-danger-3:var(--monster-color-raspberry-1);--monster-bg-color-danger-4:var(--monster-color-raspberry-4)}}:after,:before,:root{--monster-color-success-1:var(--monster-color-green-1);--monster-color-success-2:var(--monster-color-green-4);--monster-color-success-3:var(--monster-color-green-6);--monster-color-success-4:var(--monster-color-green-1);--monster-bg-color-success-1:var(--monster-color-green-3);--monster-bg-color-success-2:var(--monster-color-gray-1);--monster-bg-color-success-3:var(--monster-color-green-2);--monster-bg-color-success-4:var(--monster-color-green-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-success-1:var(--monster-color-green-1);--monster-color-success-2:var(--monster-color-green-2);--monster-color-success-3:var(--monster-color-green-4);--monster-color-success-4:var(--monster-color-green-1);--monster-bg-color-success-1:var(--monster-color-green-5);--monster-bg-color-success-2:var(--monster-color-gray-6);--monster-bg-color-success-3:var(--monster-color-green-1);--monster-bg-color-success-4:var(--monster-color-green-3)}}:after,:before,:root{--monster-color-warning-1:var(--monster-color-orange-1);--monster-color-warning-2:var(--monster-color-orange-4);--monster-color-warning-3:var(--monster-color-orange-6);--monster-color-warning-4:var(--monster-color-orange-1);--monster-bg-color-warning-1:var(--monster-color-orange-3);--monster-bg-color-warning-2:var(--monster-color-gray-1);--monster-bg-color-warning-3:var(--monster-color-orange-2);--monster-bg-color-warning-4:var(--monster-color-orange-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-warning-1:var(--monster-color-orange-1);--monster-color-warning-2:var(--monster-color-orange-3);--monster-color-warning-3:var(--monster-color-orange-4);--monster-color-warning-4:var(--monster-color-orange-1);--monster-bg-color-warning-1:var(--monster-color-orange-5);--monster-bg-color-warning-2:var(--monster-color-gray-6);--monster-bg-color-warning-3:var(--monster-color-orange-1);--monster-bg-color-warning-4:var(--monster-color-orange-3)}}:after,:before,:root{--monster-color-error-1:var(--monster-color-red-1);--monster-color-error-2:var(--monster-color-red-4);--monster-color-error-3:var(--monster-color-red-6);--monster-color-error-4:var(--monster-color-red-1);--monster-bg-color-error-1:var(--monster-color-red-4);--monster-bg-color-error-2:var(--monster-color-gray-1);--monster-bg-color-error-3:var(--monster-color-red-2);--monster-bg-color-error-4:var(--monster-color-red-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-error-1:var(--monster-color-red-1);--monster-color-error-2:var(--monster-color-red-3);--monster-color-error-3:var(--monster-color-red-4);--monster-color-error-4:var(--monster-color-red-1);--monster-bg-color-error-1:var(--monster-color-red-5);--monster-bg-color-error-2:var(--monster-color-gray-6);--monster-bg-color-error-3:var(--monster-color-red-1);--monster-bg-color-error-4:var(--monster-color-red-4)}}:after,:before,:root{--monster-color-selection-1:var(--monster-color-gray-6);--monster-color-selection-2:var(--monster-color-gray-6);--monster-color-selection-3:var(--monster-color-gray-6);--monster-color-selection-4:var(--monster-color-gray-1);--monster-bg-color-selection-1:var(--monster-color-yellow-2);--monster-bg-color-selection-2:var(--monster-color-yellow-1);--monster-bg-color-selection-3:var(--monster-color-yellow-2);--monster-bg-color-selection-4:var(--monster-color-yellow-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-selection-1:var(--monster-color-gray-6);--monster-color-selection-2:var(--monster-color-gray-6);--monster-color-selection-3:var(--monster-color-gray-6);--monster-color-selection-4:var(--monster-color-gray-1);--monster-bg-color-selection-1:var(--monster-color-yellow-2);--monster-bg-color-selection-2:var(--monster-color-yellow-1);--monster-bg-color-selection-3:var(--monster-color-yellow-2);--monster-bg-color-selection-4:var(--monster-color-yellow-6)}}:after,:before,:root{--monster-color-primary-disabled-1:var(--monster-color-gray-4);--monster-color-primary-disabled-2:var(--monster-color-gray-4);--monster-color-primary-disabled-3:var(--monster-color-gray-4);--monster-color-primary-disabled-4:var(--monster-color-gray-4);--monster-bg-color-primary-disabled-1:var(--monster-color-gray-1);--monster-bg-color-primary-disabled-2:var(--monster-color-gray-2);--monster-bg-color-primary-disabled-3:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-4:var(--monster-color-gray-6);--monster-color-gradient-1:#833ab4;--monster-color-gradient-2:#fd1d1d;--monster-color-gradient-3:#fcb045}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-primary-disabled-1:var(--monster-color-gray-4);--monster-color-primary-disabled-2:var(--monster-color-gray-4);--monster-color-primary-disabled-3:var(--monster-color-gray-3);--monster-color-primary-disabled-4:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-1:var(--monster-color-gray-6);--monster-bg-color-primary-disabled-2:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-3:var(--monster-color-gray-2);--monster-bg-color-primary-disabled-4:var(--monster-color-gray-1);--monster-color-gradient-1:#ffe0b2;--monster-color-gradient-2:#ad8275;--monster-color-gradient-3:#771ba3}}:after,:before,:root{--monster-box-shadow-1:none;--monster-box-shadow-2:-1px 1px 10px 1px hsla(0,0%,76%,.61);--monster-text-shadow:none;--monster-theme-control-bg-color:var(--monster-color-seashell-1);--monster-theme-control-color:var(--monster-color-seashell-6);--monster-theme-control-hover-color:var(--monster-color-seashell-6);--monster-theme-control-hover-bg-color:var(--monster-color-seashell-2);--monster-theme-control-border-width:2px;--monster-theme-control-border-style:solid;--monster-theme-control-border-radius:0;--monster-theme-control-border-color:var(--monster-color-primary-1)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-theme-control-bg-color:var(--monster-color-gray-5);--monster-theme-control-color:var(--monster-color-gray-1);--monster-theme-control-border-color:var(--monster-color-gray-3);--monster-theme-control-hover-color:var(--monster-color-gray-1);--monster-theme-control-hover-bg-color:var(--monster-color-gray-6)}}:after,:before,:root{--monster-theme-on-color:var(--monster-color-green-1);--monster-theme-on-bg-color:var(--monster-color-green-5);--monster-theme-off-color:var(--monster-color-gray-1);--monster-theme-off-bg-color:var(--monster-color-gray-4)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-theme-on-color:var(--monster-color-gray-6);--monster-theme-on-bg-color:var(--monster-color-gray-1);--monster-theme-off-color:var(--monster-color-gray-1);--monster-theme-off-bg-color:var(--monster-color-gray-5)}}:after,:before,:root{--monster-border-style:solid;--monster-border-width:3px;--monster-border-radius:0;--monster-outline-width:1px;--monster-popper-witharrrow-distance:-4px;--monster-z-index-default:0;--monster-z-index-outline:10;--monster-z-index-dropdown:200;--monster-z-index-dropdown-overlay:210;--monster-z-index-sticky:300;--monster-z-index-sticky-overlay:310;--monster-z-index-fixed:400;--monster-z-index-fixed-overlay:410;--monster-z-index-modal-backdrop:500;--monster-z-index-modal-backdrop-overlay:510;--monster-z-index-offcanvas:600;--monster-z-index-offcanvas-overlay:610;--monster-z-index-modal:700;--monster-z-index-modal-overlay:710;--monster-z-index-popover:800;--monster-z-index-popover-overlay:810;--monster-z-index-tooltip:800;--monster-z-index-tooltip-overlay:910;--monster-space-0:0;--monster-space-1:2px;--monster-space-2:4px;--monster-space-3:6px;--monster-space-4:10px;--monster-space-5:16px;--monster-space-6:26px;--monster-space-7:42px;--monster-breakpoint-0:480px;--monster-breakpoint-4:480px;--monster-breakpoint-7:768px;--monster-breakpoint-9:992px;--monster-breakpoint-12:1200px;--monster-dragger-width:2px;--monster-dragger-handle-width:4px;--monster-dragger-handle-height:50px}a,a:active,a:focus,a:hover,a:link,a:visited{color:var(--monster-color-secondary-1);text-decoration:none;outline:none;transition:color .3s ease-in-out,text-decoration-color .3s ease-in-out}a:active,a:focus,a:hover{color:var(--monster-color-primary-2);text-decoration:underline;text-decoration-color:var(--monster-color-secondary-1 );text-decoration-thickness:1px;text-underline-offset:2px}a:focus{outline:1px dashed var(--monster-color-selection-1);outline-offset:2px}@media (prefers-color-scheme:dark){a,a:active,a:focus,a:hover,a:link,a:visited{color:var(--monster-color-amber-2)}a:focus{outline:1px dashed var(--monster-color-selection-4)}}[data-monster-role=viewer]{height:inherit}
28
+ :where(html){line-height:1.15;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}:where(h1){font-size:2em;margin-block-end:.67em;margin-block-start:.67em}:where(dl,ol,ul) :where(dl,ol,ul){margin-block-end:0;margin-block-start:0}:where(hr){box-sizing:content-box;color:inherit;height:0}:where(abbr[title]){text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}:where(b,strong){font-weight:bolder}:where(code,kbd,pre,samp){font-family:monospace,monospace;font-size:1em}:where(small){font-size:80%}:where(table){border-color:currentColor;text-indent:0}:where(button,input,select){margin:0}:where(button){text-transform:none}:where(button,input:is([type=button i],[type=reset i],[type=submit i])){-webkit-appearance:button}:where(progress){vertical-align:baseline}:where(select){text-transform:none}:where(textarea){margin:0}:where(input[type=search i]){-webkit-appearance:textfield;outline-offset:-2px}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}:where(button,input:is([type=button i],[type=color i],[type=reset i],[type=submit i]))::-moz-focus-inner{border-style:none;padding:0}:where(button,input:is([type=button i],[type=color i],[type=reset i],[type=submit i]))::-moz-focusring{outline:1px dotted ButtonText}:where(:-moz-ui-invalid){box-shadow:none}:where(dialog){background-color:#fff;border:solid;color:#000;height:-moz-fit-content;height:fit-content;left:0;margin:auto;padding:1em;position:absolute;right:0;width:-moz-fit-content;width:fit-content}:where(dialog:not([open])){display:none}:where(summary){display:list-item}html{height:100%}body,html{min-height:calc(100vh - 40px)}body{box-sizing:border-box;margin:0;padding:0;word-break:break-word}:focus-visible{outline:var(--monster-focus-ring-width,2px) var(--monster-focus-ring-style,solid) var(--monster-focus-ring-color,currentColor);outline-offset:var(--monster-focus-ring-offset,2px)}button{background-color:var(
29
+ --monster-button-background-color,var(--monster-bg-color-primary-1)
30
+ );color:var(--monster-button-color,var(--monster-color-primary-1))}.monster-button-primary,button{width:-webkit-fill-available;width:-moz-available;width:stretch;font-size:1rem;font-weight:400;line-height:1.5;text-align:var(--monster-button-text-align,center);text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;border-width:var(--monster-button-border-width,var(--monster-border-width));border-radius:var(
31
+ --monster-button-border-radius,var(--monster-border-radius)
32
+ );border-style:var(--monster-button-border-style,var(--monster-border-style));box-shadow:var(--monster-button-box-shadow,var(--monster-box-shadow-1));min-height:var(
33
+ --monster-button-min-block-size,var(--monster-control-min-block-size,auto)
34
+ );padding:var(
35
+ --monster-button-padding,var(--monster-control-padding-block,.375rem) var(--monster-control-padding-inline,.75rem)
36
+ );outline:none;background-position:50%;position:relative;overflow:hidden;font-family:var(--monster-font-family),sans-serif;display:flex;align-items:center;justify-content:var(--monster-button-justify-content,center);gap:.4rem}.monster-button-primary{color:var(--monster-button-color,var(--monster-color-primary-4));background-color:var(
37
+ --monster-button-background-color,var(--monster-bg-color-primary-4)
38
+ );border-color:var(
39
+ --monster-button-border-color,var(--monster-bg-color-primary-4)
40
+ )}.monster-button-secondary{border-width:var(--monster-button-border-width,var(--monster-border-width));border-radius:var(
41
+ --monster-button-border-radius,var(--monster-border-radius)
42
+ );border-style:var(--monster-button-border-style,var(--monster-border-style));color:var(--monster-button-color,var(--monster-color-secondary-4));background-color:var(
43
+ --monster-button-background-color,var(--monster-bg-color-secondary-4)
44
+ );border-color:var(
45
+ --monster-button-border-color,var(--monster-bg-color-secondary-4)
46
+ )}.monster-button-secondary,.monster-button-tertiary{width:-webkit-fill-available;width:-moz-available;width:stretch;font-size:1rem;font-weight:400;line-height:1.5;text-align:var(--monster-button-text-align,center);text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-shadow:var(--monster-button-box-shadow,var(--monster-box-shadow-1));min-height:var(
47
+ --monster-button-min-block-size,var(--monster-control-min-block-size,auto)
48
+ );padding:var(
49
+ --monster-button-padding,var(--monster-control-padding-block,.375rem) var(--monster-control-padding-inline,.75rem)
50
+ );outline:none;background-position:50%;position:relative;overflow:hidden;font-family:var(--monster-font-family),sans-serif;display:flex;align-items:center;justify-content:var(--monster-button-justify-content,center);gap:.4rem}.monster-button-tertiary{border-width:var(--monster-button-border-width,var(--monster-border-width));border-radius:var(
51
+ --monster-button-border-radius,var(--monster-border-radius)
52
+ );border-style:var(--monster-button-border-style,var(--monster-border-style));color:var(--monster-button-color,var(--monster-color-tertiary-4));background-color:var(
53
+ --monster-button-background-color,var(--monster-bg-color-tertiary-4)
54
+ );border-color:var(
55
+ --monster-button-border-color,var(--monster-bg-color-tertiary-4)
56
+ )}.monster-button-destructive{border-width:var(--monster-button-border-width,var(--monster-border-width));border-radius:var(
57
+ --monster-button-border-radius,var(--monster-border-radius)
58
+ );border-style:var(--monster-button-border-style,var(--monster-border-style));color:var(--monster-button-color,var(--monster-color-destructive-1));background-color:var(
59
+ --monster-button-background-color,var(--monster-bg-color-destructive-1)
60
+ );border-color:var(
61
+ --monster-button-border-color,var(--monster-bg-color-destructive-1)
62
+ )}.monster-button-destructive,.monster-button-outline-primary{width:-webkit-fill-available;width:-moz-available;width:stretch;font-size:1rem;font-weight:400;line-height:1.5;text-align:var(--monster-button-text-align,center);text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-shadow:var(--monster-button-box-shadow,var(--monster-box-shadow-1));min-height:var(
63
+ --monster-button-min-block-size,var(--monster-control-min-block-size,auto)
64
+ );padding:var(
65
+ --monster-button-padding,var(--monster-control-padding-block,.375rem) var(--monster-control-padding-inline,.75rem)
66
+ );outline:none;background-position:50%;position:relative;overflow:hidden;font-family:var(--monster-font-family),sans-serif;display:flex;align-items:center;justify-content:var(--monster-button-justify-content,center);gap:.4rem}.monster-button-outline-primary{border-width:var(--monster-button-border-width,var(--monster-border-width));border-radius:var(
67
+ --monster-button-border-radius,var(--monster-border-radius)
68
+ );border-style:var(--monster-button-border-style,var(--monster-border-style));color:var(--monster-button-color,var(--monster-bg-color-primary-4));background-color:var(
69
+ --monster-button-background-color,var(--monster-color-primary-4)
70
+ );border-color:var(
71
+ --monster-button-border-color,var(--monster-bg-color-primary-4)
72
+ )}.monster-button-outline-secondary{border-width:var(--monster-button-border-width,var(--monster-border-width));border-radius:var(
73
+ --monster-button-border-radius,var(--monster-border-radius)
74
+ );border-style:var(--monster-button-border-style,var(--monster-border-style));color:var(--monster-button-color,var(--monster-bg-color-secondary-4));background-color:var(
75
+ --monster-button-background-color,var(--monster-color-secondary-4)
76
+ );border-color:var(
77
+ --monster-button-border-color,var(--monster-bg-color-secondary-4)
78
+ )}.monster-button-outline-secondary,.monster-button-outline-tertiary{width:-webkit-fill-available;width:-moz-available;width:stretch;font-size:1rem;font-weight:400;line-height:1.5;text-align:var(--monster-button-text-align,center);text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-shadow:var(--monster-button-box-shadow,var(--monster-box-shadow-1));min-height:var(
79
+ --monster-button-min-block-size,var(--monster-control-min-block-size,auto)
80
+ );padding:var(
81
+ --monster-button-padding,var(--monster-control-padding-block,.375rem) var(--monster-control-padding-inline,.75rem)
82
+ );outline:none;background-position:50%;position:relative;overflow:hidden;font-family:var(--monster-font-family),sans-serif;display:flex;align-items:center;justify-content:var(--monster-button-justify-content,center);gap:.4rem}.monster-button-outline-tertiary{border-width:var(--monster-button-border-width,var(--monster-border-width));border-radius:var(
83
+ --monster-button-border-radius,var(--monster-border-radius)
84
+ );border-style:var(--monster-button-border-style,var(--monster-border-style));color:var(--monster-button-color,var(--monster-bg-color-tertiary-4));background-color:var(
85
+ --monster-button-background-color,var(--monster-color-tertiary-4)
86
+ );border-color:var(
87
+ --monster-button-border-color,var(--monster-bg-color-tertiary-4)
88
+ )}button:hover{transition:background .8s,color .25s .0833333333s;box-shadow:var(--monster-box-shadow-2)}button:disabled{cursor:not-allowed}button:active{transition:background .8s,color .25s .0833333333s;box-shadow:var(--monster-box-shadow-2);z-index:var(--monster-z-index-outline)}.monster-button-bar,.monster-button-group{display:flex;justify-content:space-between;align-content:center;flex-wrap:nowrap;flex-direction:row;align-items:stretch}.monster-button-group{box-sizing:border-box;gap:0;margin:1rem 0}.monster-button-group>:not(:last-child){margin-right:calc(var(--monster-border-width)*-1)}.monster-button-group :hover{box-shadow:none}button:focus-visible{outline:var(--monster-focus-ring-width,2px) var(--monster-focus-ring-style,solid) var(--monster-focus-ring-color,currentColor);outline-offset:var(--monster-focus-ring-offset,2px);z-index:var(--monster-z-index-outline)}[data-monster-role=control]{outline:none;width:100%;box-sizing:border-box}[data-monster-role=control].flex{display:flex;flex-direction:row;align-items:center}:host{display:block;box-sizing:border-box}:after,:before,:root{--monster-font-family:-apple-system,BlinkMacSystemFont,\"Quicksand\",\"Segoe UI\",\"Roboto\",\"Oxygen\",\"Ubuntu\",\"Cantarell\",\"Fira Sans\",\"Droid Sans\",\"Helvetica Neue\",Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\";--monster-font-family-monospace:\"Consolas\",\"Courier New\",\"Roboto Mono\",\"Source Code Pro\",\"Fira Mono\",monospace;--monster-font-size-min:15px;--monster-font-size-base:16px;--monster-font-size-max:16px;--monster-font-scale:1;--monster-font-scale-hi-dpi:1.25;--monster-font-scale-xhi-dpi:1.25;--monster-font-size-fluid:clamp(var(--monster-font-size-min),calc(var(--monster-font-size-min) + 0.1vw),var(--monster-font-size-max))}@media (min-resolution:1.5dppx){:after,:before,:root{--monster-font-scale:var(--monster-font-scale-hi-dpi,1.1)}}@media (min-resolution:3dppx){:after,:before,:root{--monster-font-scale:var(--monster-font-scale-xhi-dpi,1.18)}}:after,:before,:root{--monster-color-primary-1:var(--monster-color-gray-6);--monster-color-primary-2:var(--monster-color-gray-6);--monster-color-primary-3:var(--monster-color-cinnamon-1);--monster-color-primary-4:var(--monster-color-cinnamon-1);--monster-bg-color-primary-1:var(--monster-color-gray-1);--monster-bg-color-primary-2:var(--monster-color-gray-2);--monster-bg-color-primary-3:var(--monster-color-gray-6);--monster-bg-color-primary-4:var(--monster-color-gray-4)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-primary-1:var(--monster-color-gray-1);--monster-color-primary-2:var(--monster-color-gray-1);--monster-color-primary-3:var(--monster-color-gray-6);--monster-color-primary-4:var(--monster-color-gray-6);--monster-bg-color-primary-1:var(--monster-color-gray-6);--monster-bg-color-primary-2:var(--monster-color-gray-3);--monster-bg-color-primary-3:var(--monster-color-gray-2);--monster-bg-color-primary-4:var(--monster-color-gray-1)}}:after,:before,:root{--monster-color-secondary-1:var(--monster-color-red-4);--monster-color-secondary-2:var(--monster-color-red-4);--monster-color-secondary-3:var(--monster-color-red-1);--monster-color-secondary-4:var(--monster-color-red-1);--monster-bg-color-secondary-1:var(--monster-color-gray-1);--monster-bg-color-secondary-2:var(--monster-color-red-2);--monster-bg-color-secondary-3:var(--monster-color-red-3);--monster-bg-color-secondary-4:var(--monster-color-red-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-secondary-1:var(--monster-color-red-1);--monster-color-secondary-2:var(--monster-color-red-1);--monster-color-secondary-3:var(--monster-color-red-6);--monster-color-secondary-4:var(--monster-color-red-4);--monster-bg-color-secondary-1:var(--monster-color-gray-6);--monster-bg-color-secondary-2:var(--monster-color-red-3);--monster-bg-color-secondary-3:var(--monster-color-red-2);--monster-bg-color-secondary-4:var(--monster-color-red-1)}}:after,:before,:root{--monster-color-tertiary-1:var(--monster-color-magenta-4);--monster-color-tertiary-2:var(--monster-color-magenta-4);--monster-color-tertiary-3:var(--monster-color-magenta-6);--monster-color-tertiary-4:var(--monster-color-magenta-1);--monster-bg-color-tertiary-1:var(--monster-color-gray-1);--monster-bg-color-tertiary-2:var(--monster-color-magenta-1);--monster-bg-color-tertiary-3:var(--monster-color-magenta-2);--monster-bg-color-tertiary-4:var(--monster-color-magenta-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-tertiary-1:var(--monster-color-magenta-1);--monster-color-tertiary-2:var(--monster-color-magenta-6);--monster-color-tertiary-3:var(--monster-color-magenta-4);--monster-color-tertiary-4:var(--monster-color-magenta-4);--monster-bg-color-tertiary-1:var(--monster-color-gray-6);--monster-bg-color-tertiary-2:var(--monster-color-magenta-2);--monster-bg-color-tertiary-3:var(--monster-color-magenta-1);--monster-bg-color-tertiary-4:var(--monster-color-magenta-1)}}:after,:before,:root{--monster-color-destructive-1:var(--monster-color-red-1);--monster-color-destructive-2:var(--monster-color-red-4);--monster-color-destructive-3:var(--monster-color-red-6);--monster-color-destructive-4:var(--monster-color-red-1);--monster-bg-color-destructive-1:var(--monster-color-red-4);--monster-bg-color-destructive-2:var(--monster-color-gray-1);--monster-bg-color-destructive-3:var(--monster-color-red-2);--monster-bg-color-destructive-4:var(--monster-color-red-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-destructive-1:var(--monster-color-red-1);--monster-color-destructive-2:var(--monster-color-red-3);--monster-color-destructive-3:var(--monster-color-red-4);--monster-color-destructive-4:var(--monster-color-red-1);--monster-bg-color-destructive-1:var(--monster-color-red-5);--monster-bg-color-destructive-2:var(--monster-color-gray-6);--monster-bg-color-destructive-3:var(--monster-color-red-1);--monster-bg-color-destructive-4:var(--monster-color-red-4)}}:after,:before,:root{--monster-color-danger-1:var(--monster-color-raspberry-1);--monster-color-danger-2:var(--monster-color-raspberry-4);--monster-color-danger-3:var(--monster-color-raspberry-6);--monster-color-danger-4:var(--monster-color-raspberry-1);--monster-bg-color-danger-1:var(--monster-color-raspberry-4);--monster-bg-color-danger-2:var(--monster-color-gray-1);--monster-bg-color-danger-3:var(--monster-color-raspberry-2);--monster-bg-color-danger-4:var(--monster-color-raspberry-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-danger-1:var(--monster-color-raspberry-1);--monster-color-danger-2:var(--monster-color-raspberry-3);--monster-color-danger-3:var(--monster-color-raspberry-4);--monster-color-danger-4:var(--monster-color-raspberry-1);--monster-bg-color-danger-1:var(--monster-color-raspberry-5);--monster-bg-color-danger-2:var(--monster-color-gray-6);--monster-bg-color-danger-3:var(--monster-color-raspberry-1);--monster-bg-color-danger-4:var(--monster-color-raspberry-4)}}:after,:before,:root{--monster-color-success-1:var(--monster-color-green-1);--monster-color-success-2:var(--monster-color-green-4);--monster-color-success-3:var(--monster-color-green-6);--monster-color-success-4:var(--monster-color-green-1);--monster-bg-color-success-1:var(--monster-color-green-3);--monster-bg-color-success-2:var(--monster-color-gray-1);--monster-bg-color-success-3:var(--monster-color-green-2);--monster-bg-color-success-4:var(--monster-color-green-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-success-1:var(--monster-color-green-1);--monster-color-success-2:var(--monster-color-green-2);--monster-color-success-3:var(--monster-color-green-4);--monster-color-success-4:var(--monster-color-green-1);--monster-bg-color-success-1:var(--monster-color-green-5);--monster-bg-color-success-2:var(--monster-color-gray-6);--monster-bg-color-success-3:var(--monster-color-green-1);--monster-bg-color-success-4:var(--monster-color-green-3)}}:after,:before,:root{--monster-color-warning-1:var(--monster-color-orange-1);--monster-color-warning-2:var(--monster-color-orange-4);--monster-color-warning-3:var(--monster-color-orange-6);--monster-color-warning-4:var(--monster-color-orange-1);--monster-bg-color-warning-1:var(--monster-color-orange-3);--monster-bg-color-warning-2:var(--monster-color-gray-1);--monster-bg-color-warning-3:var(--monster-color-orange-2);--monster-bg-color-warning-4:var(--monster-color-orange-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-warning-1:var(--monster-color-orange-1);--monster-color-warning-2:var(--monster-color-orange-3);--monster-color-warning-3:var(--monster-color-orange-4);--monster-color-warning-4:var(--monster-color-orange-1);--monster-bg-color-warning-1:var(--monster-color-orange-5);--monster-bg-color-warning-2:var(--monster-color-gray-6);--monster-bg-color-warning-3:var(--monster-color-orange-1);--monster-bg-color-warning-4:var(--monster-color-orange-3)}}:after,:before,:root{--monster-color-error-1:var(--monster-color-red-1);--monster-color-error-2:var(--monster-color-red-4);--monster-color-error-3:var(--monster-color-red-6);--monster-color-error-4:var(--monster-color-red-1);--monster-bg-color-error-1:var(--monster-color-red-4);--monster-bg-color-error-2:var(--monster-color-gray-1);--monster-bg-color-error-3:var(--monster-color-red-2);--monster-bg-color-error-4:var(--monster-color-red-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-error-1:var(--monster-color-red-1);--monster-color-error-2:var(--monster-color-red-3);--monster-color-error-3:var(--monster-color-red-4);--monster-color-error-4:var(--monster-color-red-1);--monster-bg-color-error-1:var(--monster-color-red-5);--monster-bg-color-error-2:var(--monster-color-gray-6);--monster-bg-color-error-3:var(--monster-color-red-1);--monster-bg-color-error-4:var(--monster-color-red-4)}}:after,:before,:root{--monster-color-selection-1:var(--monster-color-gray-6);--monster-color-selection-2:var(--monster-color-gray-6);--monster-color-selection-3:var(--monster-color-gray-6);--monster-color-selection-4:var(--monster-color-gray-1);--monster-bg-color-selection-1:var(--monster-color-yellow-2);--monster-bg-color-selection-2:var(--monster-color-yellow-1);--monster-bg-color-selection-3:var(--monster-color-yellow-2);--monster-bg-color-selection-4:var(--monster-color-yellow-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-selection-1:var(--monster-color-gray-6);--monster-color-selection-2:var(--monster-color-gray-6);--monster-color-selection-3:var(--monster-color-gray-6);--monster-color-selection-4:var(--monster-color-gray-1);--monster-bg-color-selection-1:var(--monster-color-yellow-2);--monster-bg-color-selection-2:var(--monster-color-yellow-1);--monster-bg-color-selection-3:var(--monster-color-yellow-2);--monster-bg-color-selection-4:var(--monster-color-yellow-6)}}:after,:before,:root{--monster-color-primary-disabled-1:var(--monster-color-gray-4);--monster-color-primary-disabled-2:var(--monster-color-gray-4);--monster-color-primary-disabled-3:var(--monster-color-gray-4);--monster-color-primary-disabled-4:var(--monster-color-gray-4);--monster-bg-color-primary-disabled-1:var(--monster-color-gray-1);--monster-bg-color-primary-disabled-2:var(--monster-color-gray-2);--monster-bg-color-primary-disabled-3:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-4:var(--monster-color-gray-6);--monster-color-gradient-1:#833ab4;--monster-color-gradient-2:#fd1d1d;--monster-color-gradient-3:#fcb045}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-primary-disabled-1:var(--monster-color-gray-4);--monster-color-primary-disabled-2:var(--monster-color-gray-4);--monster-color-primary-disabled-3:var(--monster-color-gray-3);--monster-color-primary-disabled-4:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-1:var(--monster-color-gray-6);--monster-bg-color-primary-disabled-2:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-3:var(--monster-color-gray-2);--monster-bg-color-primary-disabled-4:var(--monster-color-gray-1);--monster-color-gradient-1:#ffe0b2;--monster-color-gradient-2:#ad8275;--monster-color-gradient-3:#771ba3}}:after,:before,:root{--monster-box-shadow-1:none;--monster-box-shadow-2:-1px 1px 10px 1px hsla(0,0%,76%,.61);--monster-text-shadow:none;--monster-theme-control-bg-color:var(--monster-color-seashell-1);--monster-theme-control-color:var(--monster-color-seashell-6);--monster-theme-control-hover-color:var(--monster-color-seashell-6);--monster-theme-control-hover-bg-color:var(--monster-color-seashell-2);--monster-theme-control-border-width:2px;--monster-theme-control-border-style:solid;--monster-theme-control-border-radius:0;--monster-theme-control-border-color:var(--monster-color-primary-1)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-theme-control-bg-color:var(--monster-color-gray-5);--monster-theme-control-color:var(--monster-color-gray-1);--monster-theme-control-border-color:var(--monster-color-gray-3);--monster-theme-control-hover-color:var(--monster-color-gray-1);--monster-theme-control-hover-bg-color:var(--monster-color-gray-6)}}:after,:before,:root{--monster-theme-on-color:var(--monster-color-green-1);--monster-theme-on-bg-color:var(--monster-color-green-5);--monster-theme-off-color:var(--monster-color-gray-1);--monster-theme-off-bg-color:var(--monster-color-gray-4)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-theme-on-color:var(--monster-color-gray-6);--monster-theme-on-bg-color:var(--monster-color-gray-1);--monster-theme-off-color:var(--monster-color-gray-1);--monster-theme-off-bg-color:var(--monster-color-gray-5)}}:after,:before,:root{--monster-border-style:solid;--monster-border-width:3px;--monster-border-radius:0;--monster-outline-width:1px;--monster-focus-ring-width:2px;--monster-focus-ring-style:solid;--monster-focus-ring-color:var(--monster-color-blue-4);--monster-focus-ring-offset:2px}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-focus-ring-color:var(--monster-color-yellow-2)}}:after,:before,:root{--monster-popper-witharrrow-distance:-4px;--monster-z-index-default:0;--monster-z-index-outline:10;--monster-z-index-dropdown:200;--monster-z-index-dropdown-overlay:210;--monster-z-index-sticky:300;--monster-z-index-sticky-overlay:310;--monster-z-index-fixed:400;--monster-z-index-fixed-overlay:410;--monster-z-index-modal-backdrop:500;--monster-z-index-modal-backdrop-overlay:510;--monster-z-index-offcanvas:600;--monster-z-index-offcanvas-overlay:610;--monster-z-index-modal:700;--monster-z-index-modal-overlay:710;--monster-z-index-popover:800;--monster-z-index-popover-overlay:810;--monster-z-index-tooltip:800;--monster-z-index-tooltip-overlay:910;--monster-space-0:0;--monster-space-1:2px;--monster-space-2:4px;--monster-space-3:6px;--monster-space-4:10px;--monster-space-5:16px;--monster-space-6:26px;--monster-space-7:42px;--monster-breakpoint-0:480px;--monster-breakpoint-4:480px;--monster-breakpoint-7:768px;--monster-breakpoint-9:992px;--monster-breakpoint-12:1200px;--monster-dragger-width:2px;--monster-dragger-handle-width:4px;--monster-dragger-handle-height:50px}a,a:active,a:focus-visible,a:hover,a:link,a:visited{color:var(--monster-color-secondary-1);text-decoration:none;outline:none;transition:color .3s ease-in-out,text-decoration-color .3s ease-in-out}a:active,a:focus-visible,a:hover{color:var(--monster-color-primary-2);text-decoration:underline;text-decoration-color:var(--monster-color-secondary-1 );text-decoration-thickness:1px;text-underline-offset:2px}a:focus-visible{outline:var(--monster-focus-ring-width,2px) var(--monster-focus-ring-style,solid) var(--monster-focus-ring-color,currentColor);outline-offset:var(--monster-focus-ring-offset,2px)}[data-monster-role=viewer]{height:inherit}
29
89
  }`,
30
90
  0,
31
91
  );
package/source/components/data/kpi-tile.mjs CHANGED
@@ -102,9 +102,11 @@ function getTemplate() {
102
102
  return `
103
103
  <div data-monster-role="control" part="control">
104
104
  <div class="top" data-monster-role="top" part="top" data-monster-replace="path:values.top">—</div>
105
- <div data-monster-role="main" part="main" data-monster-replace="path:values.main">—</div>
106
- <div style="width: 100%; height: 0;" part="divider"></div>
107
- <div data-monster-role="small" part="small" data-monster-replace="path:values.small">—</div>
105
+ <div class="kpi-value" part="value">
106
+ <div data-monster-role="main" part="main" data-monster-replace="path:values.main">—</div>
107
+ <div class="kpi-divider" part="divider"></div>
108
+ <div data-monster-role="small" part="small" data-monster-replace="path:values.small">—</div>
109
+ </div>
108
110
  <div data-monster-role="bottom" part="bottom" data-monster-replace="path:values.bottom">—</div>
109
111
  </div>`;
110
112
  }
package/source/components/data/metric-graph.mjs CHANGED
@@ -444,26 +444,28 @@ function getTemplate() {
444
444
  part="metric-value"
445
445
  aria-live="polite">—</div>
446
446
 
447
- <div id="metric-subtext" class="metric-subtext" part="metric-subtext">
448
- <span data-monster-replace="path:labels.subtext | ??:— ">—</span><br>
449
- <span class="metric-subtext-value">
450
- <strong data-monster-replace="path:values.secondary | ??:—">—</strong>
451
- </span>
452
- </div>
453
-
454
- <div part="metric-graph" class="metric-graph">
455
- <svg viewBox="0 0 100 30"
456
- preserveAspectRatio="none"
457
- role="img"
458
- aria-labelledby="metric-graph-desc"
459
- focusable="false"
460
- xmlns="http://www.w3.org/2000/svg"
461
- data-monster-replace="path:values.points | call:toGraph">
462
- </svg>
463
- <span id="metric-graph-desc" class="visually-hidden"
464
- data-monster-replace="path:aria.graph | ??:Graphische Darstellung der Kennzahl">
465
- Graphische Darstellung
466
- </span>
447
+ <div class="metric-footer" part="footer">
448
+ <div id="metric-subtext" class="metric-subtext" part="metric-subtext">
449
+ <span data-monster-replace="path:labels.subtext | ??:— ">—</span><br>
450
+ <span class="metric-subtext-value">
451
+ <strong data-monster-replace="path:values.secondary | ??:—">—</strong>
452
+ </span>
453
+ </div>
454
+
455
+ <div part="metric-graph" class="metric-graph">
456
+ <svg viewBox="0 0 100 30"
457
+ preserveAspectRatio="none"
458
+ role="img"
459
+ aria-labelledby="metric-graph-desc"
460
+ focusable="false"
461
+ xmlns="http://www.w3.org/2000/svg"
462
+ data-monster-replace="path:values.points | call:toGraph">
463
+ </svg>
464
+ <span id="metric-graph-desc" class="visually-hidden"
465
+ data-monster-replace="path:aria.graph | ??:Graphische Darstellung der Kennzahl">
466
+ Graphische Darstellung
467
+ </span>
468
+ </div>
467
469
  </div>
468
470
  </div>
469
471
 
package/source/components/data/metric.mjs CHANGED
@@ -158,24 +158,26 @@ function getTemplate() {
158
158
  <div id="metric-value" class="metric-value"
159
159
  data-monster-replace="path:values.main" part="metric-value">—</div>
160
160
 
161
- <div id="metric-subtext" class="metric-subtext" part="metric-subtext">
162
- <span data-monster-replace="path:labels.subtext | ??:— ">—</span><br>
163
- <span class="metric-subtext-value">
164
- <strong data-monster-replace="path:values.secondary | ??:—">—</strong>
165
- </span>
166
- </div>
167
-
168
- <div id="metric-change-text" part="metric-change"
169
- data-monster-attributes="style path:values.direction | tostring | prefix:--arrow-direction\\:\\ : | suffix:deg,
170
- class path:classes.change | prefix:metric-change\\ :">
171
- <span class="arrow">
172
- <svg viewBox="0 0 24 24" width="16" height="16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
173
- <path d="M12 4v16m0 0l-6-6m6 6l6-6"
174
- stroke="currentColor" stroke-width="2"
175
- fill="none" stroke-linecap="round" stroke-linejoin="round"/>
176
- </svg>
177
- </span>
178
- <span data-monster-replace="path:values.change | ??:—"></span>
161
+ <div class="metric-footer" part="footer">
162
+ <div id="metric-subtext" class="metric-subtext" part="metric-subtext">
163
+ <span data-monster-replace="path:labels.subtext | ??:— ">—</span><br>
164
+ <span class="metric-subtext-value">
165
+ <strong data-monster-replace="path:values.secondary | ??:—">—</strong>
166
+ </span>
167
+ </div>
168
+
169
+ <div id="metric-change-text" part="metric-change"
170
+ data-monster-attributes="style path:values.direction | tostring | prefix:--arrow-direction\\:\\ : | suffix:deg,
171
+ class path:classes.change | prefix:metric-change\\ :">
172
+ <span class="arrow">
173
+ <svg viewBox="0 0 24 24" width="16" height="16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
174
+ <path d="M12 4v16m0 0l-6-6m6 6l6-6"
175
+ stroke="currentColor" stroke-width="2"
176
+ fill="none" stroke-linecap="round" stroke-linejoin="round"/>
177
+ </svg>
178
+ </span>
179
+ <span data-monster-replace="path:values.change | ??:—"></span>
180
+ </div>
179
181
  </div>
180
182
  </div>
181
183
 
package/source/components/data/style/kpi-tile.pcss CHANGED
@@ -15,45 +15,57 @@
15
15
 
16
16
  [data-monster-role="control"] {
17
17
  user-select: none;
18
- display: flex;
19
-
20
- width: 8rem;
21
-
18
+ display: grid;
19
+ background: var(--monster-theme-surface, var(--monster-bg-color-primary-3));
20
+ color: var(--monster-theme-text, var(--monster-color-primary-3));
21
+ border: 1px solid var(--monster-theme-border, var(--monster-color-border-1));
22
+ border-radius: var(--monster-border-radius);
23
+ box-shadow: var(--monster-box-shadow-1);
24
+ width: 15rem;
25
+ height: 12rem;
22
26
  box-sizing: border-box;
23
- padding: 0;
27
+ grid-template-rows: 2.75rem 2.5rem minmax(0, 1fr);
28
+ padding: 1rem;
24
29
  margin: 0;
25
-
26
- text-align: center;
27
- flex-direction: column;
28
- align-items: center;
29
- flex-wrap: nowrap;
30
-
31
-
30
+ text-align: left;
31
+ align-items: flex-start;
32
32
  }
33
33
 
34
34
  [data-monster-role="top"] {
35
- background-color: var(--monster-bg-color-primary-2);
36
-
37
- color: var(--monster-color-primary-2);
38
- font-size: 1.2rem;
35
+ background-color: inherit;
36
+ color: inherit;
37
+ font-size: 0.9rem;
39
38
  font-weight: bold;
40
- text-transform: uppercase;
41
-
42
- width: 8rem;
43
-
39
+ hyphens: none;
40
+ line-height: 1.4;
41
+ overflow-wrap: normal;
42
+ text-transform: none;
43
+ width: 100%;
44
+ word-break: normal;
44
45
  box-sizing: border-box;
45
46
  padding: 0;
46
47
  margin: 0;
47
48
  }
48
49
 
50
+ .kpi-value {
51
+ align-items: baseline;
52
+ align-self: start;
53
+ display: flex;
54
+ gap: 0.375rem;
55
+ min-width: 0;
56
+ }
57
+
58
+ .kpi-divider {
59
+ display: none;
60
+ }
61
+
49
62
  [data-monster-role="main"] {
50
63
  font-size: 2rem;
51
64
  font-weight: bold;
52
- color: var(--monster-color-secondary-1);
53
- background-color: var(--monster-bg-color-primary-1);
54
-
55
- width: 8rem;
56
-
65
+ color: var(--monster-theme-accent, var(--monster-color-secondary-1));
66
+ background-color: inherit;
67
+ line-height: 1.2;
68
+ width: auto;
57
69
  box-sizing: border-box;
58
70
  padding: 0;
59
71
  margin: 0;
@@ -61,11 +73,10 @@
61
73
 
62
74
  [data-monster-role="small"] {
63
75
  font-size: 0.8rem;
64
- color: var(--monster-color-primary-1);
65
- background-color: var(--monster-bg-color-primary-1);
66
-
67
- width: 8rem;
68
-
76
+ color: var(--monster-theme-text-secondary, var(--monster-color-primary-2));
77
+ background-color: inherit;
78
+ line-height: 1.4;
79
+ width: auto;
69
80
  box-sizing: border-box;
70
81
  padding: 0;
71
82
  margin: 0;
@@ -73,30 +84,42 @@
73
84
 
74
85
 
75
86
  [data-monster-role="bottom"] {
76
- background-color: var(--monster-bg-color-secondary-1);
77
- color: var(--monster-color-secondary-2);
78
- padding: 0.2rem 0;
79
- margin: 0.5rem 0;
80
- width: 8rem;
81
- font-size: 1rem;
82
- text-align: center;
83
- height: 1.5rem;
87
+ align-self: end;
88
+ background-color: inherit;
89
+ color: var(--monster-theme-text-secondary, var(--monster-color-primary-2));
90
+ padding: 0.5rem 0 0.25rem;
91
+ margin: 0;
92
+ width: 100%;
93
+ font-size: 0.8rem;
94
+ line-height: 1.4;
95
+ text-align: left;
96
+ height: auto;
97
+ box-sizing: border-box;
84
98
  }
85
99
 
86
100
  [data-monster-role="bottom"]:not(:empty) {
87
- border-top: 1px solid var(--monster-color-secondary-1);
88
- height: calc(1.5rem - 1px);
101
+ border-top: 1px solid var(--monster-theme-border, var(--monster-color-border-1));
102
+ height: auto;
89
103
  }
90
104
 
91
105
  :host(.small) [data-monster-role="control"] {
106
+ background: transparent;
107
+ border: 0;
108
+ border-radius: 0;
109
+ box-shadow: none;
110
+ display: flex;
92
111
  flex-flow: row;
93
112
  flex-wrap: wrap;
94
-
95
113
  gap: 0 4px;
96
-
114
+ height: auto;
115
+ padding: 0;
97
116
  width: fit-content;
98
117
  }
99
118
 
119
+ :host(.small) .kpi-value {
120
+ display: contents;
121
+ }
122
+
100
123
  :host(.small) [data-monster-role="control"] > div {
101
124
  text-align: left;
102
125
  width: auto;
@@ -156,4 +179,3 @@
156
179
  :host(.small) div[data-monster-role="bottom"]:empty {
157
180
  display: none;
158
181
  }
159
-
package/source/components/data/style/metric-graph.pcss CHANGED
@@ -7,25 +7,33 @@
7
7
 
8
8
 
9
9
 
10
+ :host {
11
+ display: flex;
12
+ justify-content: center;
13
+ width: 100%;
14
+ }
15
+
10
16
  .metric-card {
11
- background: var(--monster-bg-color-primary-3);
12
- color: var(--monster-color-primary-3);
13
- border-radius: 10px;
17
+ background: var(--monster-theme-surface, var(--monster-bg-color-primary-3));
18
+ color: var(--monster-theme-text, var(--monster-color-primary-3));
19
+ border: 1px solid var(--monster-theme-border, var(--monster-color-border-1));
20
+ border-radius: var(--monster-border-radius);
21
+ box-sizing: border-box;
22
+ display: grid;
23
+ grid-template-rows: 2.75rem 2.5rem minmax(0, 1fr);
14
24
  padding: 1rem;
15
- box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
25
+ box-shadow: var(--monster-box-shadow-1);
16
26
  width: 15rem;
17
-
18
- height: calc(11rem - 2rem);
19
-
27
+ height: 12rem;
20
28
  }
21
29
 
22
30
  .metric-header {
23
31
  display: flex;
24
32
  align-items: center;
25
- margin-bottom: 0.5rem;
33
+ margin: 0;
26
34
  font-weight: bold;
27
- color: var(--monster-color-primary-3);
28
- background-color: var(--monster-bg-color-primary-3);
35
+ color: inherit;
36
+ background-color: inherit;
29
37
  }
30
38
 
31
39
  .metric-icon {
@@ -40,24 +48,33 @@
40
48
  }
41
49
 
42
50
  .metric-value {
51
+ align-self: start;
43
52
  font-size: 1.5rem;
44
53
  font-weight: bold;
45
- color: var(--monster-color-primary-3);
46
- background-color: var(--monster-bg-color-primary-3);
47
- margin-bottom: 0.25rem;
54
+ color: inherit;
55
+ background-color: inherit;
56
+ margin: 0;
57
+ }
58
+
59
+ .metric-footer {
60
+ align-content: end;
61
+ display: grid;
62
+ gap: 0.25rem;
63
+ min-height: 0;
64
+ padding-block-end: 0.25rem;
48
65
  }
49
66
 
50
67
  .metric-subtext {
51
68
  font-size: 0.8rem;
52
- color: var(--monster-color-primary-3);
53
- background-color: var(--monster-bg-color-primary-3);
54
- margin-bottom: 0.5rem;
69
+ color: var(--monster-theme-text-secondary, var(--monster-color-primary-3));
70
+ background-color: inherit;
71
+ margin: 0;
55
72
  }
56
73
 
57
74
 
58
75
  .metric-graph {
59
76
  height: 30px;
60
- margin-top: 0.5rem;
77
+ margin: 0;
61
78
  width: 100%;
62
79
  }
63
80
 
@@ -65,6 +82,6 @@
65
82
  aspect-ratio: 1 / 1;
66
83
  width: 100%;
67
84
  height: 100%;
68
- stroke: var(--monster-color-primary-3);
85
+ stroke: var(--monster-theme-accent, var(--monster-color-secondary-1));
69
86
  fill: none;
70
87
  }