@schukai/monster 4.154.11 → 5.0.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.
- package/CHANGELOG.md +13 -0
- package/package.json +1 -1
- package/source/components/accessibility/stylesheet/locale-picker.mjs +21 -23
- package/source/components/content/stylesheet/camera-capture.mjs +5 -1
- package/source/components/content/stylesheet/copy.mjs +5 -1
- package/source/components/content/stylesheet/fetch-box.mjs +60 -1
- package/source/components/content/stylesheet/viewer.mjs +21 -23
- package/source/components/content/viewer/stylesheet/html.mjs +1 -1
- package/source/components/content/viewer/stylesheet/message.mjs +1 -1
- package/source/components/data/stylesheet/kpi-tile.mjs +16 -22
- package/source/components/data/stylesheet/metric-graph.mjs +16 -22
- package/source/components/data/stylesheet/metric.mjs +16 -22
- package/source/components/datatable/stylesheet/change-button.mjs +21 -23
- package/source/components/datatable/stylesheet/column-bar.mjs +23 -25
- package/source/components/datatable/stylesheet/dataset.mjs +76 -23
- package/source/components/datatable/stylesheet/datatable.mjs +80 -27
- package/source/components/datatable/stylesheet/embedded-pagination.mjs +5 -1
- package/source/components/datatable/stylesheet/filter-button.mjs +1 -1
- package/source/components/datatable/stylesheet/filter-select.mjs +21 -23
- package/source/components/datatable/stylesheet/filter.mjs +21 -23
- package/source/components/datatable/stylesheet/pagination.mjs +21 -23
- package/source/components/datatable/stylesheet/save-button.mjs +21 -23
- package/source/components/datatable/stylesheet/status.mjs +21 -23
- package/source/components/files/style/file-manager.pcss +111 -0
- package/source/components/files/stylesheet/file-manager.mjs +3 -20
- package/source/components/form/stylesheet/action-button.mjs +9 -3
- package/source/components/form/stylesheet/button-bar.mjs +54 -41
- package/source/components/form/stylesheet/button.mjs +17 -23
- package/source/components/form/stylesheet/choice-cards.mjs +1 -1
- package/source/components/form/stylesheet/control-bar-spacer.mjs +1 -1
- package/source/components/form/stylesheet/control-bar.mjs +66 -47
- package/source/components/form/stylesheet/popper-button.mjs +16 -22
- package/source/components/form/stylesheet/quantity.mjs +1 -1
- package/source/components/form/stylesheet/select.mjs +2 -2
- package/source/components/form/stylesheet/sheet.mjs +1 -1
- package/source/components/form/stylesheet/wizard.mjs +5 -1
- package/source/components/host/stylesheet/call-button.mjs +21 -23
- package/source/components/host/stylesheet/host.mjs +5 -1
- package/source/components/host/stylesheet/toggle-button.mjs +21 -23
- package/source/components/layout/stylesheet/collapse.mjs +21 -23
- package/source/components/layout/stylesheet/details.mjs +21 -23
- package/source/components/layout/stylesheet/iframe.mjs +1 -1
- package/source/components/layout/stylesheet/overlay.mjs +5 -1
- package/source/components/layout/stylesheet/panel.mjs +5 -1
- package/source/components/layout/stylesheet/slider.mjs +5 -1
- package/source/components/layout/stylesheet/width-toggle.mjs +1 -1
- package/source/components/navigation/stylesheet/site-navigation.mjs +5 -1
- package/source/components/navigation/stylesheet/table-of-content.mjs +5 -1
- package/source/components/navigation/stylesheet/wizard-navigation.mjs +5 -1
- package/source/components/notify/stylesheet/message.mjs +1 -1
- package/source/components/notify/stylesheet/notify.mjs +1 -1
- package/source/components/state/style/thread-message.pcss +231 -0
- package/source/components/state/stylesheet/log.mjs +1 -1
- package/source/components/state/stylesheet/state.mjs +1 -1
- package/source/components/state/stylesheet/thread-message.mjs +2 -2
- package/source/components/state/stylesheet/thread.mjs +1 -1
- package/source/components/style/accessibility.css +1 -32
- package/source/components/style/badge.css +1 -147
- package/source/components/style/border.css +1 -65
- package/source/components/style/button.css +16 -22
- package/source/components/style/card.css +1 -155
- package/source/components/style/color.css +1 -166
- package/source/components/style/control.css +1 -14
- package/source/components/style/data-grid.css +1 -447
- package/source/components/style/display.css +1 -32
- package/source/components/style/floating-ui.css +1 -89
- package/source/components/style/host.css +1 -14
- package/source/components/style/icons.css +1 -1584
- package/source/components/style/popper.css +1 -101
- package/source/components/style/property.css +5 -1
- package/source/components/style/ripple.css +1 -13
- package/source/components/style/skeleton.css +56 -1
- package/source/components/style/space.css +1 -240
- package/source/components/style/spinner.css +1 -7
- package/source/components/style/table.css +1 -88
- package/source/components/style/theme-modern.css +4 -4
- package/source/components/style/theme.css +1 -388
- package/source/components/style/tree-menu.css +2 -0
- package/source/components/style/tree-menu.pcss +95 -0
- package/source/components/style/typography.css +1 -258
- package/source/components/stylesheet/button.mjs +16 -22
- package/source/components/stylesheet/icons.mjs +1 -1
- package/source/components/stylesheet/property.mjs +5 -1
- package/source/components/stylesheet/skeleton.mjs +56 -1
- package/source/components/stylesheet/spinner.mjs +1 -1
- package/source/components/stylesheet/theme-modern.mjs +4 -4
- package/source/components/stylesheet/tree-menu.mjs +3 -5
- package/source/components/time/stylesheet/day.mjs +16 -22
- package/source/components/time/timeline/stylesheet/appointment.mjs +21 -23
- package/source/components/time/timeline/stylesheet/segment.mjs +21 -23
- package/source/components/tree-menu/stylesheet/tree-menu.mjs +1 -1
- package/source/dom/customelement.mjs +49 -16
- package/source/types/version.mjs +1 -1
- package/test/cases/components/form/control-heights.mjs +2 -2
- package/test/cases/components/style/skeleton.mjs +2 -2
- package/test/cases/components/style/theme-modern.mjs +7 -13
- package/test/cases/dom/customelement.mjs +4 -8
- package/test/cases/dom/early-options-contract.mjs +40 -0
- package/test/cases/dom/options-lifecycle.mjs +216 -0
- package/test/util/early-options.mjs +84 -0
|
@@ -25,9 +25,13 @@ try {
|
|
|
25
25
|
SegmentStyleSheet.insertRule(
|
|
26
26
|
`
|
|
27
27
|
@layer segment {
|
|
28
|
-
: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}[data-monster-role=control]{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}.visually-hidden{width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.visually-hidden:not(caption){position:absolute!important}.visually-hidden-focusable:not(:focus):not(:focus-within){width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.visually-hidden-focusable:not(:focus):not(:focus-within):not(caption){position:absolute!important}@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}button{background-color:var(
|
|
28
|
+
: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(
|
|
29
|
+
var(--monster-font-size-min),
|
|
30
|
+
calc(var(--monster-font-size-min) + 0.1vw),
|
|
31
|
+
var(--monster-font-size-max)
|
|
32
|
+
)}@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}[data-monster-role=control]{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}.visually-hidden{width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.visually-hidden:not(caption){position:absolute!important}.visually-hidden-focusable:not(:focus):not(:focus-within){width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.visually-hidden-focusable:not(:focus):not(:focus-within):not(caption){position:absolute!important}@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}button{background-color:var(
|
|
29
33
|
--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{box-sizing:border-box;width:-
|
|
34
|
+
);color:var(--monster-button-color,var(--monster-color-primary-1))}.monster-button-primary,button{box-sizing:border-box;width:-moz-available;width:-webkit-fill-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
35
|
--monster-button-border-radius,var(--monster-border-radius)
|
|
32
36
|
);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
37
|
--monster-button-min-block-size,var(--monster-control-min-block-size,auto)
|
|
@@ -37,51 +41,45 @@ try {
|
|
|
37
41
|
--monster-button-background-color,var(--monster-bg-color-primary-4)
|
|
38
42
|
);border-color:var(
|
|
39
43
|
--monster-button-border-color,var(--monster-bg-color-primary-4)
|
|
40
|
-
)}.monster-button-secondary{
|
|
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(
|
|
44
|
+
)}.monster-button-secondary{color:var(--monster-button-color,var(--monster-color-secondary-4));background-color:var(
|
|
43
45
|
--monster-button-background-color,var(--monster-bg-color-secondary-4)
|
|
44
46
|
);border-color:var(
|
|
45
47
|
--monster-button-border-color,var(--monster-bg-color-secondary-4)
|
|
46
|
-
)}.monster-button-secondary,.monster-button-tertiary{box-sizing:border-box;width:-
|
|
48
|
+
)}.monster-button-secondary,.monster-button-tertiary{box-sizing:border-box;width:-moz-available;width:-webkit-fill-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(
|
|
49
|
+
--monster-button-border-radius,var(--monster-border-radius)
|
|
50
|
+
);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(
|
|
47
51
|
--monster-button-min-block-size,var(--monster-control-min-block-size,auto)
|
|
48
52
|
);padding:var(
|
|
49
53
|
--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{
|
|
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(
|
|
54
|
+
);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{color:var(--monster-button-color,var(--monster-color-tertiary-4));background-color:var(
|
|
53
55
|
--monster-button-background-color,var(--monster-bg-color-tertiary-4)
|
|
54
56
|
);border-color:var(
|
|
55
57
|
--monster-button-border-color,var(--monster-bg-color-tertiary-4)
|
|
56
|
-
)}.monster-button-destructive{
|
|
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(
|
|
58
|
+
)}.monster-button-destructive{color:var(--monster-button-color,var(--monster-color-destructive-1));background-color:var(
|
|
59
59
|
--monster-button-background-color,var(--monster-bg-color-destructive-1)
|
|
60
60
|
);border-color:var(
|
|
61
61
|
--monster-button-border-color,var(--monster-bg-color-destructive-1)
|
|
62
|
-
)}.monster-button-destructive,.monster-button-outline-primary{box-sizing:border-box;width:-
|
|
62
|
+
)}.monster-button-destructive,.monster-button-outline-primary{box-sizing:border-box;width:-moz-available;width:-webkit-fill-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(
|
|
63
|
+
--monster-button-border-radius,var(--monster-border-radius)
|
|
64
|
+
);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(
|
|
63
65
|
--monster-button-min-block-size,var(--monster-control-min-block-size,auto)
|
|
64
66
|
);padding:var(
|
|
65
67
|
--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{
|
|
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(
|
|
68
|
+
);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{color:var(--monster-button-color,var(--monster-bg-color-primary-4));background-color:var(
|
|
69
69
|
--monster-button-background-color,var(--monster-color-primary-4)
|
|
70
70
|
);border-color:var(
|
|
71
71
|
--monster-button-border-color,var(--monster-bg-color-primary-4)
|
|
72
|
-
)}.monster-button-outline-secondary{
|
|
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(
|
|
72
|
+
)}.monster-button-outline-secondary{color:var(--monster-button-color,var(--monster-bg-color-secondary-4));background-color:var(
|
|
75
73
|
--monster-button-background-color,var(--monster-color-secondary-4)
|
|
76
74
|
);border-color:var(
|
|
77
75
|
--monster-button-border-color,var(--monster-bg-color-secondary-4)
|
|
78
|
-
)}.monster-button-outline-secondary,.monster-button-outline-tertiary{box-sizing:border-box;width:-
|
|
76
|
+
)}.monster-button-outline-secondary,.monster-button-outline-tertiary{box-sizing:border-box;width:-moz-available;width:-webkit-fill-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(
|
|
77
|
+
--monster-button-border-radius,var(--monster-border-radius)
|
|
78
|
+
);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(
|
|
79
79
|
--monster-button-min-block-size,var(--monster-control-min-block-size,auto)
|
|
80
80
|
);padding:var(
|
|
81
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{
|
|
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(
|
|
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{color:var(--monster-button-color,var(--monster-bg-color-tertiary-4));background-color:var(
|
|
85
83
|
--monster-button-background-color,var(--monster-color-tertiary-4)
|
|
86
84
|
);border-color:var(
|
|
87
85
|
--monster-button-border-color,var(--monster-bg-color-tertiary-4)
|
|
@@ -31,7 +31,7 @@ try {
|
|
|
31
31
|
--monster-theme-accent-subtle,var(--monster-bg-color-secondary-2)
|
|
32
32
|
)}[data-monster-role=entry].selected:not([data-monster-state=open]) [data-monster-role=button]{color:var(
|
|
33
33
|
--monster-theme-accent,var(--monster-color-secondary-1)
|
|
34
|
-
)}[data-monster-role=entry]:hover{background-color:var(--monster-bg-color-primary-2)}[data-monster-role=control]{overflow-x:hidden;overflow-y:auto;width:100%;height:100%;scrollbar-color:transparent transparent}[data-monster-role=button]{width:100%;border:0;background:none;color:var(--monster-color-secondary-1);padding:var(--monster-tree-menu-button-padding,5px);min-block-size:var(--monster-tree-menu-button-min-block-size,auto);text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:var(--monster-tree-menu-button-align-items,normal);box-sizing:border-box;overflow:hidden;text-align:left;flex-direction:row;flex-wrap:nowrap;cursor:pointer;transition:color .3s ease-in-out}[data-monster-role=button]:active,[data-monster-role=entry]:hover [data-monster-role=button]{color:var(--monster-theme-accent-hover,var(--monster-color-secondary-2))}[data-monster-role=button]:focus-visible{outline:var(--monster-focus-ring-width) var(--monster-focus-ring-style) var(--monster-focus-ring-color);outline-offset:var(--monster-focus-ring-offset)}[data-monster-role=button] a,[data-monster-role=button] a:active,[data-monster-role=button] a:focus-visible,[data-monster-role=button] a:hover,[data-monster-role=button] a:link,[data-monster-role=button] a:visited{color:inherit;text-decoration:none;transition:color .3s ease-in-out,text-decoration-color .3s ease-in-out}[data-monster-role=button] a:active,[data-monster-role=button] a:focus-visible,[data-monster-role=button] a:hover{color:var(--monster-theme-accent-hover,var(--monster-color-secondary-2));text-decoration:underline;text-decoration-color:var(--monster-color-secondary-1);text-decoration-thickness:1px;text-underline-offset:2px}[data-monster-role=button] a:focus-visible{outline:var(--monster-focus-ring-width) var(--monster-focus-ring-style) var(--monster-focus-ring-color);outline-offset:var(--monster-focus-ring-offset)}[data-monster-role=entry][data-monster-visibility=hidden]{display:none}[data-monster-role=entry][data-monster-intend=\"0\"]{margin:0;display:flex;font-size:var(--monster-tree-menu-font-size-level-1,1rem)}[data-monster-role=entry][data-monster-intend=\"1\"]{margin:0 0 0 20px;font-size:var(--monster-tree-menu-font-size-level-2,1rem)}[data-monster-role=entry][data-monster-intend=\"2\"]{margin:0 0 0 40px;font-size:var(--monster-tree-menu-font-size-level-3,.75rem)}[data-monster-role=entry][data-monster-intend=\"3\"]{margin:0 0 0 60px;font-size:var(--monster-tree-menu-font-size-deep,.7rem)}[data-monster-role=entry][data-monster-intend=\"4\"]{margin:0 0 0 80px;font-size:var(--monster-tree-menu-font-size-deep,.65rem)}[data-monster-role=entry][data-monster-intend=\"5\"]{margin:0 0 0 100px;font-size:var(--monster-tree-menu-font-size-deep,.65rem)}[data-monster-role=entry][data-monster-intend=\"6\"]{margin:0 0 0 120px;font-size:var(--monster-tree-menu-font-size-deep,.65rem)}[data-monster-role=entry][data-monster-intend=\"7\"]{margin:0 0 0 140px;font-size:var(--monster-tree-menu-font-size-deep,.65rem)}[data-monster-role=entry][data-monster-intend=\"8\"]{margin:0 0 0 160px;font-size:var(--monster-tree-menu-font-size-deep,.65rem)}[data-monster-role=status-badges]{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg
|
|
34
|
+
)}[data-monster-role=entry]:hover{background-color:var(--monster-bg-color-primary-2)}[data-monster-role=control]{overflow-x:hidden;overflow-y:auto;width:100%;height:100%;scrollbar-color:transparent transparent}[data-monster-role=button]{width:100%;border:0;background:none;color:var(--monster-color-secondary-1);padding:var(--monster-tree-menu-button-padding,5px);min-block-size:var(--monster-tree-menu-button-min-block-size,auto);text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:var(--monster-tree-menu-button-align-items,normal);box-sizing:border-box;overflow:hidden;text-align:left;flex-direction:row;flex-wrap:nowrap;cursor:pointer;transition:color .3s ease-in-out}[data-monster-role=button]:active,[data-monster-role=entry]:hover [data-monster-role=button]{color:var(--monster-theme-accent-hover,var(--monster-color-secondary-2))}[data-monster-role=button]:focus-visible{outline:var(--monster-focus-ring-width) var(--monster-focus-ring-style) var(--monster-focus-ring-color);outline-offset:var(--monster-focus-ring-offset)}[data-monster-role=button] a,[data-monster-role=button] a:active,[data-monster-role=button] a:focus-visible,[data-monster-role=button] a:hover,[data-monster-role=button] a:link,[data-monster-role=button] a:visited{color:inherit;text-decoration:none;transition:color .3s ease-in-out,text-decoration-color .3s ease-in-out}[data-monster-role=button] a:active,[data-monster-role=button] a:focus-visible,[data-monster-role=button] a:hover{color:var(--monster-theme-accent-hover,var(--monster-color-secondary-2));text-decoration:underline;text-decoration-color:var(--monster-color-secondary-1);text-decoration-thickness:1px;text-underline-offset:2px}[data-monster-role=button] a:focus-visible{outline:var(--monster-focus-ring-width) var(--monster-focus-ring-style) var(--monster-focus-ring-color);outline-offset:var(--monster-focus-ring-offset)}[data-monster-role=entry][data-monster-visibility=hidden]{display:none}[data-monster-role=entry][data-monster-intend=\"0\"]{margin:0;display:flex;font-size:var(--monster-tree-menu-font-size-level-1,1rem)}[data-monster-role=entry][data-monster-intend=\"1\"]{margin:0 0 0 20px;font-size:var(--monster-tree-menu-font-size-level-2,1rem)}[data-monster-role=entry][data-monster-intend=\"2\"]{margin:0 0 0 40px;font-size:var(--monster-tree-menu-font-size-level-3,.75rem)}[data-monster-role=entry][data-monster-intend=\"3\"]{margin:0 0 0 60px;font-size:var(--monster-tree-menu-font-size-deep,.7rem)}[data-monster-role=entry][data-monster-intend=\"4\"]{margin:0 0 0 80px;font-size:var(--monster-tree-menu-font-size-deep,.65rem)}[data-monster-role=entry][data-monster-intend=\"5\"]{margin:0 0 0 100px;font-size:var(--monster-tree-menu-font-size-deep,.65rem)}[data-monster-role=entry][data-monster-intend=\"6\"]{margin:0 0 0 120px;font-size:var(--monster-tree-menu-font-size-deep,.65rem)}[data-monster-role=entry][data-monster-intend=\"7\"]{margin:0 0 0 140px;font-size:var(--monster-tree-menu-font-size-deep,.65rem)}[data-monster-role=entry][data-monster-intend=\"8\"]{margin:0 0 0 160px;font-size:var(--monster-tree-menu-font-size-deep,.65rem)}[data-monster-role=status-badges]{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22currentColor%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M4.646%2014.354a.5.5%200%200%201%200-.708L10.293%208%204.646%202.354a.5.5%200%200%201%20.708-.708l6%206a.5.5%200%200%201%200%20.708l-6%206a.5.5%200%200%201-.708%200%22%2F%3E%3C%2Fsvg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22currentColor%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M4.646%2014.354a.5.5%200%200%201%200-.708L10.293%208%204.646%202.354a.5.5%200%200%201%20.708-.708l6%206a.5.5%200%200%201%200%20.708l-6%206a.5.5%200%200%201-.708%200%22%2F%3E%3C%2Fsvg%3E\");-webkit-mask-size:.8em;mask-size:.8em;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center center;mask-position:center center;background-color:var(--monster-bg-color-primary-4);width:16px;min-height:16px}[data-monster-state=open] [data-monster-role=status-badges]{-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22currentColor%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M1.646%204.646a.5.5%200%200%201%20.708%200L8%2010.293l5.646-5.647a.5.5%200%200%201%20.708.708l-6%206a.5.5%200%200%201-.708%200l-6-6a.5.5%200%200%201%200-.708%22%2F%3E%3C%2Fsvg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22currentColor%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M1.646%204.646a.5.5%200%200%201%20.708%200L8%2010.293l5.646-5.647a.5.5%200%200%201%20.708.708l-6%206a.5.5%200%200%201-.708%200l-6-6a.5.5%200%200%201%200-.708%22%2F%3E%3C%2Fsvg%3E\");background-color:var(--monster-bg-color-primary-4)}[data-monster-has-children=false] [data-monster-role=status-badges]{-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22currentColor%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M4%208a.5.5%200%200%201%20.5-.5h7a.5.5%200%200%201%200%201h-7A.5.5%200%200%201%204%208%22%2F%3E%3C%2Fsvg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22currentColor%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M4%208a.5.5%200%200%201%20.5-.5h7a.5.5%200%200%201%200%201h-7A.5.5%200%200%201%204%208%22%2F%3E%3C%2Fsvg%3E\");background-color:var(--monster-bg-color-primary-4)}[data-monster-role=icon]{display:flex}[data-monster-role=icon] svg{fill:var(--monster-bg-color-primary-4);-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;min-height:16px;margin-right:5px}
|
|
35
35
|
}`,
|
|
36
36
|
0,
|
|
37
37
|
);
|
|
@@ -61,6 +61,7 @@ import { addErrorAttribute } from "./error.mjs";
|
|
|
61
61
|
|
|
62
62
|
export {
|
|
63
63
|
CustomElement,
|
|
64
|
+
OptionsNotInitializedError,
|
|
64
65
|
initMethodSymbol,
|
|
65
66
|
assembleMethodSymbol,
|
|
66
67
|
attributeObserverSymbol,
|
|
@@ -69,6 +70,34 @@ export {
|
|
|
69
70
|
updaterTransformerMethodsSymbol,
|
|
70
71
|
};
|
|
71
72
|
|
|
73
|
+
/**
|
|
74
|
+
* An options API was used before the element's option observer was created.
|
|
75
|
+
* @summary Reports an option access before CustomElement initialization.
|
|
76
|
+
* @since 5.0.0
|
|
77
|
+
*/
|
|
78
|
+
class OptionsNotInitializedError extends Error {
|
|
79
|
+
/**
|
|
80
|
+
* @param {string} method attempted options API method
|
|
81
|
+
* @param {string} component component constructor name
|
|
82
|
+
*/
|
|
83
|
+
constructor(method, component) {
|
|
84
|
+
super(
|
|
85
|
+
`${component}.${method}() requires initialized options. Do not use the options API while defaults or customization are being evaluated during construction. Use initMethodSymbol for initial options, or assembly for attribute/script configuration.`,
|
|
86
|
+
);
|
|
87
|
+
this.name = "OptionsNotInitializedError";
|
|
88
|
+
this.method = method;
|
|
89
|
+
this.component = component;
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
function requireOptionObserver(element, method) {
|
|
94
|
+
const observer = element[internalSymbol];
|
|
95
|
+
if (observer === undefined) {
|
|
96
|
+
throw new OptionsNotInitializedError(method, element.constructor.name);
|
|
97
|
+
}
|
|
98
|
+
return observer;
|
|
99
|
+
}
|
|
100
|
+
|
|
72
101
|
/**
|
|
73
102
|
* @type {symbol}
|
|
74
103
|
*/
|
|
@@ -224,12 +253,15 @@ class RevisionObserver extends Observer {
|
|
|
224
253
|
*/
|
|
225
254
|
class CustomElement extends HTMLElement {
|
|
226
255
|
/**
|
|
227
|
-
*
|
|
228
|
-
*
|
|
256
|
+
* Initializes defaults, available option attributes and customization before
|
|
257
|
+
* creating the option observer and calling initMethodSymbol. The options API
|
|
258
|
+
* must not be called while defaults or customization are being evaluated.
|
|
259
|
+
* JSON/script options and DOM rendering are handled later by base assembly.
|
|
229
260
|
*
|
|
230
261
|
* IMPORTANT: CustomControls instances are not created via the constructor, but either via a tag in the HTML or via <code>document.createElement()</code>.
|
|
231
262
|
*
|
|
232
263
|
* @throws {Error} the option attribute does not contain a valid JSON definition.
|
|
264
|
+
* @throws {OptionsNotInitializedError} an options API was called too early
|
|
233
265
|
*/
|
|
234
266
|
constructor() {
|
|
235
267
|
super();
|
|
@@ -247,9 +279,10 @@ class CustomElement extends HTMLElement {
|
|
|
247
279
|
);
|
|
248
280
|
}
|
|
249
281
|
|
|
250
|
-
|
|
282
|
+
const customization = this.customization;
|
|
283
|
+
if (customization instanceof Map) {
|
|
251
284
|
const pathfinder = new Pathfinder(options);
|
|
252
|
-
|
|
285
|
+
customization.forEach((value, key) => {
|
|
253
286
|
if (key === undefined || key === null || key === "") {
|
|
254
287
|
return;
|
|
255
288
|
}
|
|
@@ -333,6 +366,7 @@ class CustomElement extends HTMLElement {
|
|
|
333
366
|
* Unlike the defaults that expect an object, the customization is a Map.
|
|
334
367
|
* This also allows overwriting individual values in a deeper structure
|
|
335
368
|
* without having to redefine the entire structure and thus changing the defaults.
|
|
369
|
+
* Evaluated once during construction, before the options API is available.
|
|
336
370
|
* @return {Map}
|
|
337
371
|
*/
|
|
338
372
|
get customization() {
|
|
@@ -540,20 +574,17 @@ class CustomElement extends HTMLElement {
|
|
|
540
574
|
/**
|
|
541
575
|
* nested options can be specified by path `a.b.c`
|
|
542
576
|
*
|
|
543
|
-
*
|
|
544
|
-
*
|
|
545
|
-
* derived `defaults` and `customization` getters during initialization.
|
|
577
|
+
* Options are available from initMethodSymbol onwards. Attribute/script JSON
|
|
578
|
+
* is applied during assembly. The fallback only applies to initialized options.
|
|
546
579
|
*
|
|
547
580
|
* @param {string} path
|
|
548
581
|
* @param {*} defaultValue
|
|
549
582
|
* @return {*}
|
|
583
|
+
* @throws {OptionsNotInitializedError} options have not been initialized
|
|
550
584
|
* @since 1.10.0
|
|
551
585
|
*/
|
|
552
586
|
getOption(path, defaultValue = undefined) {
|
|
553
|
-
const optionObserver = this
|
|
554
|
-
if (optionObserver === undefined) {
|
|
555
|
-
return defaultValue;
|
|
556
|
-
}
|
|
587
|
+
const optionObserver = requireOptionObserver(this, "getOption");
|
|
557
588
|
|
|
558
589
|
return new Pathfinder(optionObserver.getRealSubject().options).getVia(
|
|
559
590
|
path,
|
|
@@ -568,12 +599,12 @@ class CustomElement extends HTMLElement {
|
|
|
568
599
|
* @param {*} value
|
|
569
600
|
* @return {CustomElement}
|
|
570
601
|
* @since 1.14.0
|
|
602
|
+
* @throws {OptionsNotInitializedError} options have not been initialized
|
|
571
603
|
*/
|
|
572
604
|
setOption(path, value) {
|
|
573
|
-
new Pathfinder(
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
);
|
|
605
|
+
new Pathfinder(
|
|
606
|
+
requireOptionObserver(this, "setOption").getSubject().options,
|
|
607
|
+
).setVia(path, value);
|
|
577
608
|
return this;
|
|
578
609
|
}
|
|
579
610
|
|
|
@@ -581,15 +612,17 @@ class CustomElement extends HTMLElement {
|
|
|
581
612
|
* @since 1.15.0
|
|
582
613
|
* @param {string|object} options
|
|
583
614
|
* @return {CustomElement}
|
|
615
|
+
* @throws {OptionsNotInitializedError} options have not been initialized
|
|
584
616
|
*/
|
|
585
617
|
setOptions(options) {
|
|
618
|
+
const optionObserver = requireOptionObserver(this, "setOptions");
|
|
586
619
|
if (isString(options)) {
|
|
587
620
|
options = parseOptionsJSON.call(this, options);
|
|
588
621
|
}
|
|
589
622
|
// 2024-01-21: remove this.defaults, otherwise it will overwrite
|
|
590
623
|
// the current settings that have already been made.
|
|
591
624
|
// https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/136
|
|
592
|
-
extend(
|
|
625
|
+
extend(optionObserver.getSubject().options, options);
|
|
593
626
|
|
|
594
627
|
return this;
|
|
595
628
|
}
|
package/source/types/version.mjs
CHANGED
|
@@ -46,8 +46,8 @@ describe("Form control heights", () => {
|
|
|
46
46
|
const token = "--qty-height: var(--monster-control-min-block-size, 40px)";
|
|
47
47
|
|
|
48
48
|
expect(quantitySource).to.include(token);
|
|
49
|
-
expect(quantityStyleSheet).to.
|
|
50
|
-
|
|
49
|
+
expect(quantityStyleSheet).to.match(
|
|
50
|
+
/--qty-height:var\(--monster-control-min-block-size,\s*40px\)/,
|
|
51
51
|
);
|
|
52
52
|
});
|
|
53
53
|
|
|
@@ -47,8 +47,8 @@ describe("Skeleton styles", () => {
|
|
|
47
47
|
);
|
|
48
48
|
|
|
49
49
|
for (const generatedStyle of [skeletonStyleSheet, fetchBoxStyleSheet]) {
|
|
50
|
-
expect(generatedStyle).to.
|
|
51
|
-
|
|
50
|
+
expect(generatedStyle).to.match(
|
|
51
|
+
/--monster-skeleton-color:var\(\s*--monster-skeleton-fill,\s*var\(\s*--monster-bg-color-primary-3\s*\)\s*\)/u,
|
|
52
52
|
);
|
|
53
53
|
expect(generatedStyle).to.include("transparent 0%");
|
|
54
54
|
expect(generatedStyle).to.include("transparent 100%");
|
|
@@ -186,12 +186,10 @@ describe("Modern theme stylesheet", () => {
|
|
|
186
186
|
expect(generatedCss).to.include(
|
|
187
187
|
"--monster-theme-control-border-radius:0.25rem",
|
|
188
188
|
);
|
|
189
|
-
expect(generatedCss).to.
|
|
190
|
-
|
|
191
|
-
);
|
|
192
|
-
expect(generatedCss).to.include(
|
|
193
|
-
"--monster-button-padding:0.5rem 0.875rem",
|
|
189
|
+
expect(generatedCss).to.match(
|
|
190
|
+
/--monster-control-min-block-size:max\(\s*2\.75rem,\s*44px\s*\)/u,
|
|
194
191
|
);
|
|
192
|
+
expect(generatedCss).to.include("--monster-button-padding:0.5rem 0.875rem");
|
|
195
193
|
expect(generatedCss).to.include(
|
|
196
194
|
"--monster-tree-menu-font-size-level-2:0.9375rem",
|
|
197
195
|
);
|
|
@@ -210,8 +208,8 @@ describe("Modern theme stylesheet", () => {
|
|
|
210
208
|
expect(generatedCss).to.include(
|
|
211
209
|
"--monster-input-group-field-hover-background-color:transparent",
|
|
212
210
|
);
|
|
213
|
-
expect(generatedCss).to.
|
|
214
|
-
|
|
211
|
+
expect(generatedCss).to.match(
|
|
212
|
+
/--monster-action-menu-item-min-block-size:max\(\s*2\.75rem,\s*44px\s*\)/u,
|
|
215
213
|
);
|
|
216
214
|
expect(generatedCss).to.include(
|
|
217
215
|
"--monster-action-menu-item-border-width:0",
|
|
@@ -222,9 +220,7 @@ describe("Modern theme stylesheet", () => {
|
|
|
222
220
|
expect(generatedCss).to.include(
|
|
223
221
|
"--monster-box-shadow-2:0 2px 0 rgba(36,35,31,.18)",
|
|
224
222
|
);
|
|
225
|
-
expect(generatedCss).to.include(
|
|
226
|
-
"--monster-tabs-nav-border-width:0 0 1px",
|
|
227
|
-
);
|
|
223
|
+
expect(generatedCss).to.include("--monster-tabs-nav-border-width:0 0 1px");
|
|
228
224
|
expect(generatedCss).to.include("--monster-dragger-width:0.75rem");
|
|
229
225
|
expect(generatedCss).to.include(
|
|
230
226
|
"--monster-split-panel-handle-border-radius:999px",
|
|
@@ -348,9 +344,7 @@ describe("Modern theme stylesheet", () => {
|
|
|
348
344
|
expect(generatedCss).to.include(
|
|
349
345
|
"@media (prefers-color-scheme:dark){:root[data-monster-theme-name=modern]",
|
|
350
346
|
);
|
|
351
|
-
expect(generatedCss).to.include(
|
|
352
|
-
"--monster-theme-surface-canvas:#161512",
|
|
353
|
-
);
|
|
347
|
+
expect(generatedCss).to.include("--monster-theme-surface-canvas:#161512");
|
|
354
348
|
expect(generatedCss).to.include("--monster-theme-text:#f4f0e8");
|
|
355
349
|
expect(generatedCss).to.include("--monster-theme-secondary:#d2ccc0");
|
|
356
350
|
expect(generatedCss).to.include("--monster-theme-secondary-subtle:#302d29");
|
|
@@ -1232,7 +1232,7 @@ describe('DOM', function () {
|
|
|
1232
1232
|
mocks.innerHTML = html1;
|
|
1233
1233
|
})
|
|
1234
1234
|
|
|
1235
|
-
it('should
|
|
1235
|
+
it('should reject option reads while defaults initialize options (#596)', function () {
|
|
1236
1236
|
const htmlTAG = 'monster-testclass-early-option-576';
|
|
1237
1237
|
|
|
1238
1238
|
if (!customElements.get(htmlTAG)) {
|
|
@@ -1270,13 +1270,9 @@ describe('DOM', function () {
|
|
|
1270
1270
|
registerCustomElement(EarlyOptionComponent);
|
|
1271
1271
|
}
|
|
1272
1272
|
|
|
1273
|
-
const
|
|
1274
|
-
|
|
1275
|
-
|
|
1276
|
-
'defaults-fallback',
|
|
1277
|
-
);
|
|
1278
|
-
expect(element.getOption('fromCustomization')).to.equal(
|
|
1279
|
-
'customization-fallback',
|
|
1273
|
+
const Constructor = customElements.get(htmlTAG);
|
|
1274
|
+
expect(() => new Constructor()).to.throw(
|
|
1275
|
+
'getOption() requires initialized options',
|
|
1280
1276
|
);
|
|
1281
1277
|
});
|
|
1282
1278
|
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { strict as assert } from "node:assert";
|
|
2
|
+
import { readFileSync } from "node:fs";
|
|
3
|
+
import { globSync } from "glob";
|
|
4
|
+
import { findEarlyOptions } from "../../util/early-options.mjs";
|
|
5
|
+
|
|
6
|
+
describe("Early options source contract (#596)", () => {
|
|
7
|
+
it("rejects synchronous helper and method calls but allows deferred callbacks", () => {
|
|
8
|
+
const source = `
|
|
9
|
+
function helper() { return this.getOption("value"); }
|
|
10
|
+
class Example {
|
|
11
|
+
get defaults() { return { value: helper.call(this), later: () => this.getOption("later") }; }
|
|
12
|
+
get customization() { this.configure(); return new Map(); }
|
|
13
|
+
configure() { this.setOptions({}); }
|
|
14
|
+
}`;
|
|
15
|
+
assert.deepEqual(
|
|
16
|
+
findEarlyOptions(source).map(({ phase, method }) => ({ phase, method })),
|
|
17
|
+
[
|
|
18
|
+
{ phase: "defaults", method: "getOption" },
|
|
19
|
+
{ phase: "customization", method: "setOptions" },
|
|
20
|
+
],
|
|
21
|
+
);
|
|
22
|
+
assert.equal(
|
|
23
|
+
findEarlyOptions(
|
|
24
|
+
'class Example { get defaults() { return (() => this.setOption("x", 1))(); } }',
|
|
25
|
+
).length,
|
|
26
|
+
1,
|
|
27
|
+
);
|
|
28
|
+
});
|
|
29
|
+
it("has no statically resolved early options access in library getters", () => {
|
|
30
|
+
const root = new URL("../../../", import.meta.url);
|
|
31
|
+
const files = globSync("source/**/*.mjs", { cwd: root }).sort();
|
|
32
|
+
assert.ok(files.length > 300);
|
|
33
|
+
const failures = files.flatMap((file) =>
|
|
34
|
+
findEarlyOptions(readFileSync(new URL(file, root), "utf8")).map(
|
|
35
|
+
(failure) => ({ file, ...failure }),
|
|
36
|
+
),
|
|
37
|
+
);
|
|
38
|
+
assert.deepEqual(failures, []);
|
|
39
|
+
});
|
|
40
|
+
});
|