@schukai/monster 4.142.1 → 4.142.3
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/package.json +1 -1
- package/source/components/form/control-bar.mjs +177 -4
- package/source/components/navigation/style/table-of-content.pcss +4 -0
- package/source/components/navigation/stylesheet/table-of-content.mjs +1 -1
- package/source/components/navigation/table-of-content.mjs +1 -1
- package/test/cases/components/form/control-bar.mjs +473 -0
- package/test/cases/components/form/select.mjs +19 -10
package/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.6"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.142.
|
|
1
|
+
{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.6"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.142.3"}
|
|
@@ -204,6 +204,7 @@ const EVENT_LAYOUT_CHANGED = "monster-control-bar-layout-changed";
|
|
|
204
204
|
* @type {number}
|
|
205
205
|
*/
|
|
206
206
|
const LAYOUT_CHANGED_EVENT_DELAY = 20;
|
|
207
|
+
const LAYOUT_SWITCH_HYSTERESIS = 16;
|
|
207
208
|
|
|
208
209
|
/**
|
|
209
210
|
* A control bar control.
|
|
@@ -801,6 +802,7 @@ function rearrangeItems() {
|
|
|
801
802
|
availableSpace = 0;
|
|
802
803
|
}
|
|
803
804
|
let sum = 0;
|
|
805
|
+
let overflowStarted = false;
|
|
804
806
|
const visibleItemsInMainSlot = [];
|
|
805
807
|
const itemsToMoveToPopper = [];
|
|
806
808
|
|
|
@@ -810,7 +812,8 @@ function rearrangeItems() {
|
|
|
810
812
|
continue;
|
|
811
813
|
}
|
|
812
814
|
|
|
813
|
-
if (sum + entry.width > availableSpace) {
|
|
815
|
+
if (overflowStarted || sum + entry.width > availableSpace) {
|
|
816
|
+
overflowStarted = true;
|
|
814
817
|
itemsToMoveToPopper.push(entry.element);
|
|
815
818
|
} else {
|
|
816
819
|
sum += entry.width;
|
|
@@ -821,12 +824,41 @@ function rearrangeItems() {
|
|
|
821
824
|
return { visibleItemsInMainSlot, itemsToMoveToPopper };
|
|
822
825
|
};
|
|
823
826
|
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
+
const switchCurrentlyVisible =
|
|
828
|
+
this[switchElementSymbol] instanceof HTMLElement &&
|
|
829
|
+
!this[switchElementSymbol].hasAttribute("hidden");
|
|
830
|
+
let layout;
|
|
831
|
+
if (switchCurrentlyVisible) {
|
|
832
|
+
layout = layoutItems(space - switchWidth - LAYOUT_SWITCH_HYSTERESIS);
|
|
833
|
+
if (layout.itemsToMoveToPopper.length === 0) {
|
|
834
|
+
layout = layoutItems(space);
|
|
835
|
+
}
|
|
836
|
+
} else {
|
|
837
|
+
layout = layoutItems(space - LAYOUT_SWITCH_HYSTERESIS);
|
|
838
|
+
if (layout.itemsToMoveToPopper.length > 0) {
|
|
839
|
+
layout = layoutItems(space - switchWidth);
|
|
840
|
+
} else {
|
|
841
|
+
layout = layoutItems(space);
|
|
842
|
+
}
|
|
827
843
|
}
|
|
828
844
|
|
|
845
|
+
layout = normalizeSpacerOverflowLayout(
|
|
846
|
+
layout,
|
|
847
|
+
itemEntries.map((entry) => entry.element),
|
|
848
|
+
);
|
|
849
|
+
layout = stabilizeOverflowBoundary.call(
|
|
850
|
+
this,
|
|
851
|
+
layout,
|
|
852
|
+
itemEntries,
|
|
853
|
+
switchCurrentlyVisible,
|
|
854
|
+
);
|
|
855
|
+
|
|
829
856
|
const shouldShowSwitch = layout.itemsToMoveToPopper.length > 0 && hasItems;
|
|
857
|
+
updateLastOverflowBoundary.call(
|
|
858
|
+
this,
|
|
859
|
+
layout,
|
|
860
|
+
itemEntries.map((entry) => entry.element),
|
|
861
|
+
);
|
|
830
862
|
const shouldUseStackedLayout =
|
|
831
863
|
shouldShowSwitch || isStackedBreakpointMatched.call(this);
|
|
832
864
|
|
|
@@ -854,6 +886,147 @@ function rearrangeItems() {
|
|
|
854
886
|
}
|
|
855
887
|
}
|
|
856
888
|
|
|
889
|
+
/**
|
|
890
|
+
* @private
|
|
891
|
+
* @param {{visibleItemsInMainSlot: HTMLElement[], itemsToMoveToPopper: HTMLElement[]}} layout
|
|
892
|
+
* @param {{element: HTMLElement, hidden: boolean}[]} itemEntries
|
|
893
|
+
* @param {boolean} switchCurrentlyVisible
|
|
894
|
+
* @return {{visibleItemsInMainSlot: HTMLElement[], itemsToMoveToPopper: HTMLElement[]}}
|
|
895
|
+
*/
|
|
896
|
+
function stabilizeOverflowBoundary(layout, itemEntries, switchCurrentlyVisible) {
|
|
897
|
+
const state = this[layoutStateSymbol];
|
|
898
|
+
if (!switchCurrentlyVisible || !state) {
|
|
899
|
+
return layout;
|
|
900
|
+
}
|
|
901
|
+
|
|
902
|
+
const orderedItems = itemEntries.map((entry) => entry.element);
|
|
903
|
+
const nextBoundary = getFirstOverflowIndex(layout, orderedItems);
|
|
904
|
+
const previousBoundary = state.lastOverflowStartIndex;
|
|
905
|
+
if (
|
|
906
|
+
typeof previousBoundary !== "number" ||
|
|
907
|
+
typeof nextBoundary !== "number" ||
|
|
908
|
+
nextBoundary <= previousBoundary ||
|
|
909
|
+
previousBoundary < 0 ||
|
|
910
|
+
previousBoundary >= itemEntries.length
|
|
911
|
+
) {
|
|
912
|
+
return layout;
|
|
913
|
+
}
|
|
914
|
+
|
|
915
|
+
const popperItems = new Set();
|
|
916
|
+
const mainItems = new Set();
|
|
917
|
+
for (let index = 0; index < itemEntries.length; index++) {
|
|
918
|
+
const entry = itemEntries[index];
|
|
919
|
+
if (index >= previousBoundary && !entry.hidden) {
|
|
920
|
+
popperItems.add(entry.element);
|
|
921
|
+
} else {
|
|
922
|
+
mainItems.add(entry.element);
|
|
923
|
+
}
|
|
924
|
+
}
|
|
925
|
+
|
|
926
|
+
return normalizeSpacerOverflowLayout(
|
|
927
|
+
{
|
|
928
|
+
visibleItemsInMainSlot: orderedItems.filter((item) => mainItems.has(item)),
|
|
929
|
+
itemsToMoveToPopper: orderedItems.filter((item) => popperItems.has(item)),
|
|
930
|
+
},
|
|
931
|
+
orderedItems,
|
|
932
|
+
);
|
|
933
|
+
}
|
|
934
|
+
|
|
935
|
+
/**
|
|
936
|
+
* @private
|
|
937
|
+
* @param {{itemsToMoveToPopper: HTMLElement[]}} layout
|
|
938
|
+
* @param {HTMLElement[]} orderedItems
|
|
939
|
+
* @return {void}
|
|
940
|
+
*/
|
|
941
|
+
function updateLastOverflowBoundary(layout, orderedItems) {
|
|
942
|
+
const state = this[layoutStateSymbol];
|
|
943
|
+
if (!state) {
|
|
944
|
+
return;
|
|
945
|
+
}
|
|
946
|
+
|
|
947
|
+
const boundary = getFirstOverflowIndex(layout, orderedItems);
|
|
948
|
+
if (typeof boundary === "number") {
|
|
949
|
+
state.lastOverflowStartIndex = boundary;
|
|
950
|
+
return;
|
|
951
|
+
}
|
|
952
|
+
delete state.lastOverflowStartIndex;
|
|
953
|
+
}
|
|
954
|
+
|
|
955
|
+
/**
|
|
956
|
+
* @private
|
|
957
|
+
* @param {{itemsToMoveToPopper: HTMLElement[]}} layout
|
|
958
|
+
* @param {HTMLElement[]} orderedItems
|
|
959
|
+
* @return {number|undefined}
|
|
960
|
+
*/
|
|
961
|
+
function getFirstOverflowIndex(layout, orderedItems) {
|
|
962
|
+
const popperItems = new Set(layout.itemsToMoveToPopper);
|
|
963
|
+
for (let index = 0; index < orderedItems.length; index++) {
|
|
964
|
+
if (popperItems.has(orderedItems[index])) {
|
|
965
|
+
return index;
|
|
966
|
+
}
|
|
967
|
+
}
|
|
968
|
+
return undefined;
|
|
969
|
+
}
|
|
970
|
+
|
|
971
|
+
/**
|
|
972
|
+
* @private
|
|
973
|
+
* @param {{visibleItemsInMainSlot: HTMLElement[], itemsToMoveToPopper: HTMLElement[]}} layout
|
|
974
|
+
* @param {HTMLElement[]} orderedItems
|
|
975
|
+
* @return {{visibleItemsInMainSlot: HTMLElement[], itemsToMoveToPopper: HTMLElement[]}}
|
|
976
|
+
*/
|
|
977
|
+
function normalizeSpacerOverflowLayout(layout, orderedItems) {
|
|
978
|
+
if (
|
|
979
|
+
!layout.itemsToMoveToPopper.some(
|
|
980
|
+
(item) => !isControlBarSpacerElement(item),
|
|
981
|
+
)
|
|
982
|
+
) {
|
|
983
|
+
return layout;
|
|
984
|
+
}
|
|
985
|
+
|
|
986
|
+
const popperItems = new Set(layout.itemsToMoveToPopper);
|
|
987
|
+
const mainItems = new Set(layout.visibleItemsInMainSlot);
|
|
988
|
+
|
|
989
|
+
for (let index = 0; index < orderedItems.length; index++) {
|
|
990
|
+
const item = orderedItems[index];
|
|
991
|
+
if (!isControlBarSpacerElement(item) || !mainItems.has(item)) {
|
|
992
|
+
continue;
|
|
993
|
+
}
|
|
994
|
+
|
|
995
|
+
const previous = findAdjacentNonSpacerItem(orderedItems, index, -1);
|
|
996
|
+
const next = findAdjacentNonSpacerItem(orderedItems, index, 1);
|
|
997
|
+
if (popperItems.has(previous) || popperItems.has(next)) {
|
|
998
|
+
mainItems.delete(item);
|
|
999
|
+
popperItems.add(item);
|
|
1000
|
+
}
|
|
1001
|
+
}
|
|
1002
|
+
|
|
1003
|
+
return {
|
|
1004
|
+
visibleItemsInMainSlot: orderedItems.filter((item) => mainItems.has(item)),
|
|
1005
|
+
itemsToMoveToPopper: orderedItems.filter((item) => popperItems.has(item)),
|
|
1006
|
+
};
|
|
1007
|
+
}
|
|
1008
|
+
|
|
1009
|
+
/**
|
|
1010
|
+
* @private
|
|
1011
|
+
* @param {HTMLElement[]} orderedItems
|
|
1012
|
+
* @param {number} startIndex
|
|
1013
|
+
* @param {1|-1} direction
|
|
1014
|
+
* @return {HTMLElement|undefined}
|
|
1015
|
+
*/
|
|
1016
|
+
function findAdjacentNonSpacerItem(orderedItems, startIndex, direction) {
|
|
1017
|
+
for (
|
|
1018
|
+
let index = startIndex + direction;
|
|
1019
|
+
index >= 0 && index < orderedItems.length;
|
|
1020
|
+
index += direction
|
|
1021
|
+
) {
|
|
1022
|
+
const item = orderedItems[index];
|
|
1023
|
+
if (!isControlBarSpacerElement(item)) {
|
|
1024
|
+
return item;
|
|
1025
|
+
}
|
|
1026
|
+
}
|
|
1027
|
+
return undefined;
|
|
1028
|
+
}
|
|
1029
|
+
|
|
857
1030
|
/**
|
|
858
1031
|
* @private
|
|
859
1032
|
* @param {HTMLElement} node
|
|
@@ -34,6 +34,10 @@
|
|
|
34
34
|
transition: top 0.2s ease, right 0.3s ease, bottom 0.3s ease, left 0.3s ease, visibility 0.3s ease, opacity 0.3s ease, width 0.3s ease;
|
|
35
35
|
|
|
36
36
|
& [data-monster-role="navigation-list"] {
|
|
37
|
+
box-sizing: border-box;
|
|
38
|
+
overflow-y: auto;
|
|
39
|
+
overscroll-behavior: contain;
|
|
40
|
+
scrollbar-width: thin;
|
|
37
41
|
|
|
38
42
|
& ul {
|
|
39
43
|
margin: 0;
|
|
@@ -25,7 +25,7 @@ try {
|
|
|
25
25
|
TableOfContentStyleSheet.insertRule(
|
|
26
26
|
`
|
|
27
27
|
@layer tableofcontent {
|
|
28
|
-
[data-monster-role=control]{outline:none;width:100%}[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-color-gray-1:#f6f6f6;--monster-color-gray-2:#e2e2e2;--monster-color-gray-3:#8b8b8b;--monster-color-gray-4:#6f6f6f;--monster-color-gray-5:#3e3e3e;--monster-color-gray-6:#222;--monster-color-rose-1:#fff7f9;--monster-color-rose-2:#ffdce5;--monster-color-rose-3:#ff3b8d;--monster-color-rose-4:#db0072;--monster-color-rose-5:#800040;--monster-color-rose-6:#4c0023;--monster-color-raspberry-1:#fff8f8;--monster-color-raspberry-2:#ffdddf;--monster-color-raspberry-3:#ff426c;--monster-color-raspberry-4:#de0051;--monster-color-raspberry-5:#82002c;--monster-color-raspberry-6:#510018;--monster-color-red-1:#fff8f6;--monster-color-red-2:#ffddd8;--monster-color-red-3:#ff4647;--monster-color-red-4:#e0002b;--monster-color-red-5:#830014;--monster-color-red-6:#530003;--monster-color-orange-1:#fff8f5;--monster-color-orange-2:#ffded1;--monster-color-orange-3:#fd4d00;--monster-color-orange-4:#cd3c00;--monster-color-orange-5:#752100;--monster-color-orange-6:#401600;--monster-color-cinnamon-1:#fff8f3;--monster-color-cinnamon-2:#ffdfc6;--monster-color-cinnamon-3:#d57300;--monster-color-cinnamon-4:#ac5c00;--monster-color-cinnamon-5:#633300;--monster-color-cinnamon-6:#371d00;--monster-color-amber-1:#fff8ef;--monster-color-amber-2:#ffe0b2;--monster-color-amber-3:#b98300;--monster-color-amber-4:#926700;--monster-color-amber-5:#523800;--monster-color-amber-6:#302100;--monster-color-yellow-1:#fff9e5;--monster-color-yellow-2:#ffe53e;--monster-color-yellow-3:#9c8b00;--monster-color-yellow-4:#7d6f00;--monster-color-yellow-5:#463d00;--monster-color-yellow-6:#292300;--monster-color-lime-1:#f7ffac;--monster-color-lime-2:#d5f200;--monster-color-lime-3:#819300;--monster-color-lime-4:#677600;--monster-color-lime-5:#394100;--monster-color-lime-6:#222600;--monster-color-chartreuse-1:#e5ffc3;--monster-color-chartreuse-2:#98fb00;--monster-color-chartreuse-3:#5c9b00;--monster-color-chartreuse-4:#497c00;--monster-color-chartreuse-5:#264500;--monster-color-chartreuse-6:#182600;--monster-color-green-1:#e0ffd9;--monster-color-green-2:#72ff6c;--monster-color-green-3:#00a21f;--monster-color-green-4:#008217;--monster-color-green-5:#004908;--monster-color-green-6:#062800;--monster-color-emerald-1:#dcffe6;--monster-color-emerald-2:#5dffa2;--monster-color-emerald-3:#00a05a;--monster-color-emerald-4:#008147;--monster-color-emerald-5:#004825;--monster-color-emerald-6:#002812;--monster-color-aquamarine-1:#daffef;--monster-color-aquamarine-2:#42ffc6;--monster-color-aquamarine-3:#009f78;--monster-color-aquamarine-4:#007f5f;--monster-color-aquamarine-5:#004734;--monster-color-aquamarine-6:#00281b;--monster-color-teal-1:#d7fff7;--monster-color-teal-2:#00ffe4;--monster-color-teal-3:#009e8c;--monster-color-teal-4:#007c6e;--monster-color-teal-5:#00443c;--monster-color-teal-6:#002722;--monster-color-cyan-1:#c4fffe;--monster-color-cyan-2:#00fafb;--monster-color-cyan-3:#00999a;--monster-color-cyan-4:#007a7b;--monster-color-cyan-5:#004344;--monster-color-cyan-6:#002525;--monster-color-powder-1:#dafaff;--monster-color-powder-2:#8df0ff;--monster-color-powder-3:#0098a9;--monster-color-powder-4:#007987;--monster-color-powder-5:#004048;--monster-color-powder-6:#002227;--monster-color-sky-1:#e3f7ff;--monster-color-sky-2:#aee9ff;--monster-color-sky-3:#0094b4;--monster-color-sky-4:#007590;--monster-color-sky-5:#00404f;--monster-color-sky-6:#001f28;--monster-color-cerulean-1:#e8f6ff;--monster-color-cerulean-2:#b9e3ff;--monster-color-cerulean-3:#0092c5;--monster-color-cerulean-4:#00749d;--monster-color-cerulean-5:#003c54;--monster-color-cerulean-6:#001d2a;--monster-color-azure-1:#e8f2ff;--monster-color-azure-2:#c6e0ff;--monster-color-azure-3:#008fdb;--monster-color-azure-4:#0071af;--monster-color-azure-5:#003b5e;--monster-color-azure-6:#001c30;--monster-color-blue-1:#f0f4ff;--monster-color-blue-2:#d4e0ff;--monster-color-blue-3:#0089fc;--monster-color-blue-4:#006dca;--monster-color-blue-5:#00386d;--monster-color-blue-6:#001a39;--monster-color-indigo-1:#f3f3ff;--monster-color-indigo-2:#deddff;--monster-color-indigo-3:#657eff;--monster-color-indigo-4:#0061fc;--monster-color-indigo-5:#00328a;--monster-color-indigo-6:#001649;--monster-color-violet-1:#f7f1ff;--monster-color-violet-2:#e8daff;--monster-color-violet-3:#9b70ff;--monster-color-violet-4:#794aff;--monster-color-violet-5:#2d0fbf;--monster-color-violet-6:#0b0074;--monster-color-purple-1:#fdf4ff;--monster-color-purple-2:#f7d9ff;--monster-color-purple-3:#d150ff;--monster-color-purple-4:#b01fe3;--monster-color-purple-5:#660087;--monster-color-purple-6:#3a004f;--monster-color-magenta-1:#fff3fc;--monster-color-magenta-2:#ffd7f6;--monster-color-magenta-3:#f911e0;--monster-color-magenta-4:#ca00b6;--monster-color-magenta-5:#740068;--monster-color-magenta-6:#44003c;--monster-color-pink-1:#fff7fb;--monster-color-pink-2:#ffdcec;--monster-color-pink-3:#ff2fb2;--monster-color-pink-4:#d2008f;--monster-color-pink-5:#790051;--monster-color-pink-6:#4b0030;--monster-gradient-tangerine-1:#e5b875;--monster-gradient-tangerine-2:#d9a362;--monster-gradient-tangerine-3:#c08a4e;--monster-gradient-tangerine-4:#a7713b;--monster-gradient-tangerine-5:#8f5a28;--monster-gradient-tangerine-6:#360505;--monster-color-seashell-1:#f7f5ef;--monster-color-seashell-2:#e5e2d9;--monster-color-seashell-3:#cbc6b3;--monster-color-seashell-4:#a19d8a;--monster-color-seashell-5:#7a7566;--monster-color-seashell-6:#514d3f}.monster-border-primary-1,.monster-border-primary-2,.monster-border-primary-3,.monster-border-primary-4{border-width:var(--monster-border-width);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style)}.monster-border-0{border-width:0;border-radius:0;border-style:none}.monster-border-primary-1{border-color:var(--monster-bg-color-primary-1)}.monster-border-primary-2{border-color:var(--monster-bg-color-primary-2)}.monster-border-primary-3{border-color:var(--monster-bg-color-primary-3)}.monster-border-primary-4{border-color:var(--monster-bg-color-primary-4)}.monster-border-secondary-1,.monster-border-secondary-2,.monster-border-secondary-3,.monster-border-secondary-4{border-width:var(--monster-border-width);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style)}.monster-border-secondary-1{border-color:var(--monster-bg-color-secondary-1)}.monster-border-secondary-2{border-color:var(--monster-bg-color-secondary-2)}.monster-border-secondary-3{border-color:var(--monster-bg-color-secondary-3)}.monster-border-secondary-4{border-color:var(--monster-bg-color-secondary-4)}.monster-border-tertiary-1,.monster-border-tertiary-2,.monster-border-tertiary-3,.monster-border-tertiary-4{border-width:var(--monster-border-width);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style)}.monster-border-tertiary-1{border-color:var(--monster-bg-color-tertiary-1)}.monster-border-tertiary-2{border-color:var(--monster-bg-color-tertiary-2)}.monster-border-tertiary-3{border-color:var(--monster-bg-color-tertiary-3)}.monster-border-tertiary-4{border-color:var(--monster-bg-color-tertiary-4)}.monster-theme-primary-1{background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1)}.monster-theme-primary-disabled-1{background-color:var(--monster-bg-color-primary-disabled-1);color:var(--monster-color-primary-disabled-1)}.monster-theme-secondary-1{background-color:var(--monster-bg-color-secondary-1);color:var(--monster-color-secondary-1)}.monster-theme-tertiary-1{background-color:var(--monster-bg-color-tertiary-1);color:var(--monster-color-tertiary-1)}.monster-theme-destructive-1{background-color:var(--monster-bg-color-destructive-1);color:var(--monster-color-destructive-1)}.monster-theme-danger-1{background-color:var(--monster-bg-color-danger-1);color:var(--monster-color-danger-1)}.monster-theme-success-1{background-color:var(--monster-bg-color-success-1);color:var(--monster-color-success-1)}.monster-theme-warning-1{background-color:var(--monster-bg-color-warning-1);color:var(--monster-color-warning-1)}.monster-theme-error-1{background-color:var(--monster-bg-color-error-1);color:var(--monster-color-error-1)}.monster-theme-selection-1{background-color:var(--monster-bg-color-selection-1);color:var(--monster-color-selection-1)}.monster-border-color-1{border-color:var(--monster-color-border-1)}.monster-color-neutral-1{color:var(--monster-color-primary-1)}.monster-bg-color-primary-1{background-color:var(--monster-bg-color-primary-1)}.monster-bg-color-secondary-1{background-color:var(--monster-bg-color-secondary-1)}.monster-bg-color-tertiary-1{background-color:var(--monster-bg-color-tertiary-1)}.monster-color-primary-1{background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1)}.monster-color-secondary-1{background-color:var(--monster-bg-color-secondary-1);color:var(--monster-color-secondary-1)}.monster-color-tertiary-1{background-color:var(--monster-bg-color-tertiary-1);color:var(--monster-color-tertiary-1)}.monster-color-destructive-1{background-color:var(--monster-bg-color-destructive-1);color:var(--monster-color-destructive-1)}.monster-color-danger-1{background-color:var(--monster-bg-color-danger-1);color:var(--monster-color-danger-1)}.monster-color-success-1{background-color:var(--monster-bg-color-success-1);color:var(--monster-color-success-1)}.monster-color-warning-1{background-color:var(--monster-bg-color-warning-1);color:var(--monster-color-warning-1)}.monster-color-error-1{background-color:var(--monster-bg-color-error-1);color:var(--monster-color-error-1)}.monster-color-selection-1{background-color:var(--monster-bg-color-selection-1);color:var(--monster-color-selection-1)}.monster-theme-primary-2{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2)}.monster-theme-primary-disabled-2{background-color:var(--monster-bg-color-primary-disabled-2);color:var(--monster-color-primary-disabled-2)}.monster-theme-secondary-2{background-color:var(--monster-bg-color-secondary-2);color:var(--monster-color-secondary-2)}.monster-theme-tertiary-2{background-color:var(--monster-bg-color-tertiary-2);color:var(--monster-color-tertiary-2)}.monster-theme-destructive-2{background-color:var(--monster-bg-color-destructive-2);color:var(--monster-color-destructive-2)}.monster-theme-danger-2{background-color:var(--monster-bg-color-danger-2);color:var(--monster-color-danger-2)}.monster-theme-success-2{background-color:var(--monster-bg-color-success-2);color:var(--monster-color-success-2)}.monster-theme-warning-2{background-color:var(--monster-bg-color-warning-2);color:var(--monster-color-warning-2)}.monster-theme-error-2{background-color:var(--monster-bg-color-error-2);color:var(--monster-color-error-2)}.monster-theme-selection-2{background-color:var(--monster-bg-color-selection-2);color:var(--monster-color-selection-2)}.monster-border-color-2{border-color:var(--monster-color-border-2)}.monster-color-neutral-2{color:var(--monster-color-primary-2)}.monster-bg-color-primary-2{background-color:var(--monster-bg-color-primary-2)}.monster-bg-color-secondary-2{background-color:var(--monster-bg-color-secondary-2)}.monster-bg-color-tertiary-2{background-color:var(--monster-bg-color-tertiary-2)}.monster-color-primary-2{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2)}.monster-color-secondary-2{background-color:var(--monster-bg-color-secondary-2);color:var(--monster-color-secondary-2)}.monster-color-tertiary-2{background-color:var(--monster-bg-color-tertiary-2);color:var(--monster-color-tertiary-2)}.monster-color-destructive-2{background-color:var(--monster-bg-color-destructive-2);color:var(--monster-color-destructive-2)}.monster-color-danger-2{background-color:var(--monster-bg-color-danger-2);color:var(--monster-color-danger-2)}.monster-color-success-2{background-color:var(--monster-bg-color-success-2);color:var(--monster-color-success-2)}.monster-color-warning-2{background-color:var(--monster-bg-color-warning-2);color:var(--monster-color-warning-2)}.monster-color-error-2{background-color:var(--monster-bg-color-error-2);color:var(--monster-color-error-2)}.monster-color-selection-2{background-color:var(--monster-bg-color-selection-2);color:var(--monster-color-selection-2)}.monster-theme-primary-3{background-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-3)}.monster-theme-primary-disabled-3{background-color:var(--monster-bg-color-primary-disabled-3);color:var(--monster-color-primary-disabled-3)}.monster-theme-secondary-3{background-color:var(--monster-bg-color-secondary-3);color:var(--monster-color-secondary-3)}.monster-theme-tertiary-3{background-color:var(--monster-bg-color-tertiary-3);color:var(--monster-color-tertiary-3)}.monster-theme-destructive-3{background-color:var(--monster-bg-color-destructive-3);color:var(--monster-color-destructive-3)}.monster-theme-danger-3{background-color:var(--monster-bg-color-danger-3);color:var(--monster-color-danger-3)}.monster-theme-success-3{background-color:var(--monster-bg-color-success-3);color:var(--monster-color-success-3)}.monster-theme-warning-3{background-color:var(--monster-bg-color-warning-3);color:var(--monster-color-warning-3)}.monster-theme-error-3{background-color:var(--monster-bg-color-error-3);color:var(--monster-color-error-3)}.monster-theme-selection-3{background-color:var(--monster-bg-color-selection-3);color:var(--monster-color-selection-3)}.monster-border-color-3{border-color:var(--monster-color-border-3)}.monster-color-neutral-3{color:var(--monster-color-primary-3)}.monster-bg-color-primary-3{background-color:var(--monster-bg-color-primary-3)}.monster-bg-color-secondary-3{background-color:var(--monster-bg-color-secondary-3)}.monster-bg-color-tertiary-3{background-color:var(--monster-bg-color-tertiary-3)}.monster-color-primary-3{background-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-3)}.monster-color-secondary-3{background-color:var(--monster-bg-color-secondary-3);color:var(--monster-color-secondary-3)}.monster-color-tertiary-3{background-color:var(--monster-bg-color-tertiary-3);color:var(--monster-color-tertiary-3)}.monster-color-destructive-3{background-color:var(--monster-bg-color-destructive-3);color:var(--monster-color-destructive-3)}.monster-color-danger-3{background-color:var(--monster-bg-color-danger-3);color:var(--monster-color-danger-3)}.monster-color-success-3{background-color:var(--monster-bg-color-success-3);color:var(--monster-color-success-3)}.monster-color-warning-3{background-color:var(--monster-bg-color-warning-3);color:var(--monster-color-warning-3)}.monster-color-error-3{background-color:var(--monster-bg-color-error-3);color:var(--monster-color-error-3)}.monster-color-selection-3{background-color:var(--monster-bg-color-selection-3);color:var(--monster-color-selection-3)}.monster-theme-primary-4{background-color:var(--monster-bg-color-primary-4);color:var(--monster-color-primary-4)}.monster-theme-primary-disabled-4{background-color:var(--monster-bg-color-primary-disabled-4);color:var(--monster-color-primary-disabled-4)}.monster-theme-secondary-4{background-color:var(--monster-bg-color-secondary-4);color:var(--monster-color-secondary-4)}.monster-theme-tertiary-4{background-color:var(--monster-bg-color-tertiary-4);color:var(--monster-color-tertiary-4)}.monster-theme-destructive-4{background-color:var(--monster-bg-color-destructive-4);color:var(--monster-color-destructive-4)}.monster-theme-danger-4{background-color:var(--monster-bg-color-danger-4);color:var(--monster-color-danger-4)}.monster-theme-success-4{background-color:var(--monster-bg-color-success-4);color:var(--monster-color-success-4)}.monster-theme-warning-4{background-color:var(--monster-bg-color-warning-4);color:var(--monster-color-warning-4)}.monster-theme-error-4{background-color:var(--monster-bg-color-error-4);color:var(--monster-color-error-4)}.monster-theme-selection-4{background-color:var(--monster-bg-color-selection-4);color:var(--monster-color-selection-4)}.monster-border-color-4{border-color:var(--monster-color-border-4)}.monster-color-neutral-4{color:var(--monster-color-primary-4)}.monster-bg-color-primary-4{background-color:var(--monster-bg-color-primary-4)}.monster-bg-color-secondary-4{background-color:var(--monster-bg-color-secondary-4)}.monster-bg-color-tertiary-4{background-color:var(--monster-bg-color-tertiary-4)}.monster-color-primary-4{background-color:var(--monster-bg-color-primary-4);color:var(--monster-color-primary-4)}.monster-color-secondary-4{background-color:var(--monster-bg-color-secondary-4);color:var(--monster-color-secondary-4)}.monster-color-tertiary-4{background-color:var(--monster-bg-color-tertiary-4);color:var(--monster-color-tertiary-4)}.monster-color-destructive-4{background-color:var(--monster-bg-color-destructive-4);color:var(--monster-color-destructive-4)}.monster-color-danger-4{background-color:var(--monster-bg-color-danger-4);color:var(--monster-color-danger-4)}.monster-color-success-4{background-color:var(--monster-bg-color-success-4);color:var(--monster-color-success-4)}.monster-color-warning-4{background-color:var(--monster-bg-color-warning-4);color:var(--monster-color-warning-4)}.monster-color-error-4{background-color:var(--monster-bg-color-error-4);color:var(--monster-color-error-4)}.monster-color-selection-4{background-color:var(--monster-bg-color-selection-4);color:var(--monster-color-selection-4)}.monster-theme-control-container-1,.monster-theme-control-row-1{border:1px solid var(--monster-theme-control-border-color)}.monster-theme-control-container-1,.monster-theme-control-element,.monster-theme-control-row-1{background-color:var(--monster-theme-control-bg-color);color:var(--monster-theme-control-color)}.monster-theme-control-background{background-color:var(--monster-theme-control-bg-color)}.monster-theme-background-inherit{background-color:inherit!important}.monster-theme-on{color:var(--monster-theme-on-color);background-color:var(--monster-theme-on-bg-color)}.monster-theme-off{color:var(--monster-theme-off-color);background-color:var(--monster-theme-off-bg-color)}:host{box-sizing:border-box;height:-moz-fit-content;height:fit-content}[data-monster-role=control]{box-sizing:border-box}.navigation.left{left:0}.navigation.right{right:40px}.navigation{box-sizing:border-box;position:absolute;top:0;display:block;cursor:pointer;width:20px;transition:top .2s ease,right .3s ease,bottom .3s ease,left .3s ease,visibility .3s ease,opacity .3s ease,width .3s ease}:is(.navigation [data-monster-role=navigation-list]) ul{margin:0;padding:0 0 0 10px;list-style-type:none}:is(.navigation [data-monster-role=navigation-list]) ul li{position:relative;padding-left:10px}:is(.navigation [data-monster-role=navigation-list]) ul li:before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:10px;border-left:1px dotted var(--monster-color-primary-2);margin-top:0}:is(.navigation [data-monster-role=navigation-list]) div.footer{display:flex;gap:5px;padding:5px 0}.navigation [data-monster-role=navigation-control]{width:20px}.navigation .heading-strip{display:flex;height:0;background-color:var(--monster-color-primary-1);margin-bottom:3px}.level-h1:is(.navigation .heading-strip){height:6px}.level-h2:is(.navigation .heading-strip){height:4px}.level-h3:is(.navigation .heading-strip){height:2px}.level-h4:is(.navigation .heading-strip){height:1px}.level-h5:is(.navigation .heading-strip){height:1px}.level-h6:is(.navigation .heading-strip){height:1px}
|
|
28
|
+
[data-monster-role=control]{outline:none;width:100%}[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-color-gray-1:#f6f6f6;--monster-color-gray-2:#e2e2e2;--monster-color-gray-3:#8b8b8b;--monster-color-gray-4:#6f6f6f;--monster-color-gray-5:#3e3e3e;--monster-color-gray-6:#222;--monster-color-rose-1:#fff7f9;--monster-color-rose-2:#ffdce5;--monster-color-rose-3:#ff3b8d;--monster-color-rose-4:#db0072;--monster-color-rose-5:#800040;--monster-color-rose-6:#4c0023;--monster-color-raspberry-1:#fff8f8;--monster-color-raspberry-2:#ffdddf;--monster-color-raspberry-3:#ff426c;--monster-color-raspberry-4:#de0051;--monster-color-raspberry-5:#82002c;--monster-color-raspberry-6:#510018;--monster-color-red-1:#fff8f6;--monster-color-red-2:#ffddd8;--monster-color-red-3:#ff4647;--monster-color-red-4:#e0002b;--monster-color-red-5:#830014;--monster-color-red-6:#530003;--monster-color-orange-1:#fff8f5;--monster-color-orange-2:#ffded1;--monster-color-orange-3:#fd4d00;--monster-color-orange-4:#cd3c00;--monster-color-orange-5:#752100;--monster-color-orange-6:#401600;--monster-color-cinnamon-1:#fff8f3;--monster-color-cinnamon-2:#ffdfc6;--monster-color-cinnamon-3:#d57300;--monster-color-cinnamon-4:#ac5c00;--monster-color-cinnamon-5:#633300;--monster-color-cinnamon-6:#371d00;--monster-color-amber-1:#fff8ef;--monster-color-amber-2:#ffe0b2;--monster-color-amber-3:#b98300;--monster-color-amber-4:#926700;--monster-color-amber-5:#523800;--monster-color-amber-6:#302100;--monster-color-yellow-1:#fff9e5;--monster-color-yellow-2:#ffe53e;--monster-color-yellow-3:#9c8b00;--monster-color-yellow-4:#7d6f00;--monster-color-yellow-5:#463d00;--monster-color-yellow-6:#292300;--monster-color-lime-1:#f7ffac;--monster-color-lime-2:#d5f200;--monster-color-lime-3:#819300;--monster-color-lime-4:#677600;--monster-color-lime-5:#394100;--monster-color-lime-6:#222600;--monster-color-chartreuse-1:#e5ffc3;--monster-color-chartreuse-2:#98fb00;--monster-color-chartreuse-3:#5c9b00;--monster-color-chartreuse-4:#497c00;--monster-color-chartreuse-5:#264500;--monster-color-chartreuse-6:#182600;--monster-color-green-1:#e0ffd9;--monster-color-green-2:#72ff6c;--monster-color-green-3:#00a21f;--monster-color-green-4:#008217;--monster-color-green-5:#004908;--monster-color-green-6:#062800;--monster-color-emerald-1:#dcffe6;--monster-color-emerald-2:#5dffa2;--monster-color-emerald-3:#00a05a;--monster-color-emerald-4:#008147;--monster-color-emerald-5:#004825;--monster-color-emerald-6:#002812;--monster-color-aquamarine-1:#daffef;--monster-color-aquamarine-2:#42ffc6;--monster-color-aquamarine-3:#009f78;--monster-color-aquamarine-4:#007f5f;--monster-color-aquamarine-5:#004734;--monster-color-aquamarine-6:#00281b;--monster-color-teal-1:#d7fff7;--monster-color-teal-2:#00ffe4;--monster-color-teal-3:#009e8c;--monster-color-teal-4:#007c6e;--monster-color-teal-5:#00443c;--monster-color-teal-6:#002722;--monster-color-cyan-1:#c4fffe;--monster-color-cyan-2:#00fafb;--monster-color-cyan-3:#00999a;--monster-color-cyan-4:#007a7b;--monster-color-cyan-5:#004344;--monster-color-cyan-6:#002525;--monster-color-powder-1:#dafaff;--monster-color-powder-2:#8df0ff;--monster-color-powder-3:#0098a9;--monster-color-powder-4:#007987;--monster-color-powder-5:#004048;--monster-color-powder-6:#002227;--monster-color-sky-1:#e3f7ff;--monster-color-sky-2:#aee9ff;--monster-color-sky-3:#0094b4;--monster-color-sky-4:#007590;--monster-color-sky-5:#00404f;--monster-color-sky-6:#001f28;--monster-color-cerulean-1:#e8f6ff;--monster-color-cerulean-2:#b9e3ff;--monster-color-cerulean-3:#0092c5;--monster-color-cerulean-4:#00749d;--monster-color-cerulean-5:#003c54;--monster-color-cerulean-6:#001d2a;--monster-color-azure-1:#e8f2ff;--monster-color-azure-2:#c6e0ff;--monster-color-azure-3:#008fdb;--monster-color-azure-4:#0071af;--monster-color-azure-5:#003b5e;--monster-color-azure-6:#001c30;--monster-color-blue-1:#f0f4ff;--monster-color-blue-2:#d4e0ff;--monster-color-blue-3:#0089fc;--monster-color-blue-4:#006dca;--monster-color-blue-5:#00386d;--monster-color-blue-6:#001a39;--monster-color-indigo-1:#f3f3ff;--monster-color-indigo-2:#deddff;--monster-color-indigo-3:#657eff;--monster-color-indigo-4:#0061fc;--monster-color-indigo-5:#00328a;--monster-color-indigo-6:#001649;--monster-color-violet-1:#f7f1ff;--monster-color-violet-2:#e8daff;--monster-color-violet-3:#9b70ff;--monster-color-violet-4:#794aff;--monster-color-violet-5:#2d0fbf;--monster-color-violet-6:#0b0074;--monster-color-purple-1:#fdf4ff;--monster-color-purple-2:#f7d9ff;--monster-color-purple-3:#d150ff;--monster-color-purple-4:#b01fe3;--monster-color-purple-5:#660087;--monster-color-purple-6:#3a004f;--monster-color-magenta-1:#fff3fc;--monster-color-magenta-2:#ffd7f6;--monster-color-magenta-3:#f911e0;--monster-color-magenta-4:#ca00b6;--monster-color-magenta-5:#740068;--monster-color-magenta-6:#44003c;--monster-color-pink-1:#fff7fb;--monster-color-pink-2:#ffdcec;--monster-color-pink-3:#ff2fb2;--monster-color-pink-4:#d2008f;--monster-color-pink-5:#790051;--monster-color-pink-6:#4b0030;--monster-gradient-tangerine-1:#e5b875;--monster-gradient-tangerine-2:#d9a362;--monster-gradient-tangerine-3:#c08a4e;--monster-gradient-tangerine-4:#a7713b;--monster-gradient-tangerine-5:#8f5a28;--monster-gradient-tangerine-6:#360505;--monster-color-seashell-1:#f7f5ef;--monster-color-seashell-2:#e5e2d9;--monster-color-seashell-3:#cbc6b3;--monster-color-seashell-4:#a19d8a;--monster-color-seashell-5:#7a7566;--monster-color-seashell-6:#514d3f}.monster-border-primary-1,.monster-border-primary-2,.monster-border-primary-3,.monster-border-primary-4{border-width:var(--monster-border-width);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style)}.monster-border-0{border-width:0;border-radius:0;border-style:none}.monster-border-primary-1{border-color:var(--monster-bg-color-primary-1)}.monster-border-primary-2{border-color:var(--monster-bg-color-primary-2)}.monster-border-primary-3{border-color:var(--monster-bg-color-primary-3)}.monster-border-primary-4{border-color:var(--monster-bg-color-primary-4)}.monster-border-secondary-1,.monster-border-secondary-2,.monster-border-secondary-3,.monster-border-secondary-4{border-width:var(--monster-border-width);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style)}.monster-border-secondary-1{border-color:var(--monster-bg-color-secondary-1)}.monster-border-secondary-2{border-color:var(--monster-bg-color-secondary-2)}.monster-border-secondary-3{border-color:var(--monster-bg-color-secondary-3)}.monster-border-secondary-4{border-color:var(--monster-bg-color-secondary-4)}.monster-border-tertiary-1,.monster-border-tertiary-2,.monster-border-tertiary-3,.monster-border-tertiary-4{border-width:var(--monster-border-width);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style)}.monster-border-tertiary-1{border-color:var(--monster-bg-color-tertiary-1)}.monster-border-tertiary-2{border-color:var(--monster-bg-color-tertiary-2)}.monster-border-tertiary-3{border-color:var(--monster-bg-color-tertiary-3)}.monster-border-tertiary-4{border-color:var(--monster-bg-color-tertiary-4)}.monster-theme-primary-1{background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1)}.monster-theme-primary-disabled-1{background-color:var(--monster-bg-color-primary-disabled-1);color:var(--monster-color-primary-disabled-1)}.monster-theme-secondary-1{background-color:var(--monster-bg-color-secondary-1);color:var(--monster-color-secondary-1)}.monster-theme-tertiary-1{background-color:var(--monster-bg-color-tertiary-1);color:var(--monster-color-tertiary-1)}.monster-theme-destructive-1{background-color:var(--monster-bg-color-destructive-1);color:var(--monster-color-destructive-1)}.monster-theme-danger-1{background-color:var(--monster-bg-color-danger-1);color:var(--monster-color-danger-1)}.monster-theme-success-1{background-color:var(--monster-bg-color-success-1);color:var(--monster-color-success-1)}.monster-theme-warning-1{background-color:var(--monster-bg-color-warning-1);color:var(--monster-color-warning-1)}.monster-theme-error-1{background-color:var(--monster-bg-color-error-1);color:var(--monster-color-error-1)}.monster-theme-selection-1{background-color:var(--monster-bg-color-selection-1);color:var(--monster-color-selection-1)}.monster-border-color-1{border-color:var(--monster-color-border-1)}.monster-color-neutral-1{color:var(--monster-color-primary-1)}.monster-bg-color-primary-1{background-color:var(--monster-bg-color-primary-1)}.monster-bg-color-secondary-1{background-color:var(--monster-bg-color-secondary-1)}.monster-bg-color-tertiary-1{background-color:var(--monster-bg-color-tertiary-1)}.monster-color-primary-1{background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1)}.monster-color-secondary-1{background-color:var(--monster-bg-color-secondary-1);color:var(--monster-color-secondary-1)}.monster-color-tertiary-1{background-color:var(--monster-bg-color-tertiary-1);color:var(--monster-color-tertiary-1)}.monster-color-destructive-1{background-color:var(--monster-bg-color-destructive-1);color:var(--monster-color-destructive-1)}.monster-color-danger-1{background-color:var(--monster-bg-color-danger-1);color:var(--monster-color-danger-1)}.monster-color-success-1{background-color:var(--monster-bg-color-success-1);color:var(--monster-color-success-1)}.monster-color-warning-1{background-color:var(--monster-bg-color-warning-1);color:var(--monster-color-warning-1)}.monster-color-error-1{background-color:var(--monster-bg-color-error-1);color:var(--monster-color-error-1)}.monster-color-selection-1{background-color:var(--monster-bg-color-selection-1);color:var(--monster-color-selection-1)}.monster-theme-primary-2{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2)}.monster-theme-primary-disabled-2{background-color:var(--monster-bg-color-primary-disabled-2);color:var(--monster-color-primary-disabled-2)}.monster-theme-secondary-2{background-color:var(--monster-bg-color-secondary-2);color:var(--monster-color-secondary-2)}.monster-theme-tertiary-2{background-color:var(--monster-bg-color-tertiary-2);color:var(--monster-color-tertiary-2)}.monster-theme-destructive-2{background-color:var(--monster-bg-color-destructive-2);color:var(--monster-color-destructive-2)}.monster-theme-danger-2{background-color:var(--monster-bg-color-danger-2);color:var(--monster-color-danger-2)}.monster-theme-success-2{background-color:var(--monster-bg-color-success-2);color:var(--monster-color-success-2)}.monster-theme-warning-2{background-color:var(--monster-bg-color-warning-2);color:var(--monster-color-warning-2)}.monster-theme-error-2{background-color:var(--monster-bg-color-error-2);color:var(--monster-color-error-2)}.monster-theme-selection-2{background-color:var(--monster-bg-color-selection-2);color:var(--monster-color-selection-2)}.monster-border-color-2{border-color:var(--monster-color-border-2)}.monster-color-neutral-2{color:var(--monster-color-primary-2)}.monster-bg-color-primary-2{background-color:var(--monster-bg-color-primary-2)}.monster-bg-color-secondary-2{background-color:var(--monster-bg-color-secondary-2)}.monster-bg-color-tertiary-2{background-color:var(--monster-bg-color-tertiary-2)}.monster-color-primary-2{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2)}.monster-color-secondary-2{background-color:var(--monster-bg-color-secondary-2);color:var(--monster-color-secondary-2)}.monster-color-tertiary-2{background-color:var(--monster-bg-color-tertiary-2);color:var(--monster-color-tertiary-2)}.monster-color-destructive-2{background-color:var(--monster-bg-color-destructive-2);color:var(--monster-color-destructive-2)}.monster-color-danger-2{background-color:var(--monster-bg-color-danger-2);color:var(--monster-color-danger-2)}.monster-color-success-2{background-color:var(--monster-bg-color-success-2);color:var(--monster-color-success-2)}.monster-color-warning-2{background-color:var(--monster-bg-color-warning-2);color:var(--monster-color-warning-2)}.monster-color-error-2{background-color:var(--monster-bg-color-error-2);color:var(--monster-color-error-2)}.monster-color-selection-2{background-color:var(--monster-bg-color-selection-2);color:var(--monster-color-selection-2)}.monster-theme-primary-3{background-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-3)}.monster-theme-primary-disabled-3{background-color:var(--monster-bg-color-primary-disabled-3);color:var(--monster-color-primary-disabled-3)}.monster-theme-secondary-3{background-color:var(--monster-bg-color-secondary-3);color:var(--monster-color-secondary-3)}.monster-theme-tertiary-3{background-color:var(--monster-bg-color-tertiary-3);color:var(--monster-color-tertiary-3)}.monster-theme-destructive-3{background-color:var(--monster-bg-color-destructive-3);color:var(--monster-color-destructive-3)}.monster-theme-danger-3{background-color:var(--monster-bg-color-danger-3);color:var(--monster-color-danger-3)}.monster-theme-success-3{background-color:var(--monster-bg-color-success-3);color:var(--monster-color-success-3)}.monster-theme-warning-3{background-color:var(--monster-bg-color-warning-3);color:var(--monster-color-warning-3)}.monster-theme-error-3{background-color:var(--monster-bg-color-error-3);color:var(--monster-color-error-3)}.monster-theme-selection-3{background-color:var(--monster-bg-color-selection-3);color:var(--monster-color-selection-3)}.monster-border-color-3{border-color:var(--monster-color-border-3)}.monster-color-neutral-3{color:var(--monster-color-primary-3)}.monster-bg-color-primary-3{background-color:var(--monster-bg-color-primary-3)}.monster-bg-color-secondary-3{background-color:var(--monster-bg-color-secondary-3)}.monster-bg-color-tertiary-3{background-color:var(--monster-bg-color-tertiary-3)}.monster-color-primary-3{background-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-3)}.monster-color-secondary-3{background-color:var(--monster-bg-color-secondary-3);color:var(--monster-color-secondary-3)}.monster-color-tertiary-3{background-color:var(--monster-bg-color-tertiary-3);color:var(--monster-color-tertiary-3)}.monster-color-destructive-3{background-color:var(--monster-bg-color-destructive-3);color:var(--monster-color-destructive-3)}.monster-color-danger-3{background-color:var(--monster-bg-color-danger-3);color:var(--monster-color-danger-3)}.monster-color-success-3{background-color:var(--monster-bg-color-success-3);color:var(--monster-color-success-3)}.monster-color-warning-3{background-color:var(--monster-bg-color-warning-3);color:var(--monster-color-warning-3)}.monster-color-error-3{background-color:var(--monster-bg-color-error-3);color:var(--monster-color-error-3)}.monster-color-selection-3{background-color:var(--monster-bg-color-selection-3);color:var(--monster-color-selection-3)}.monster-theme-primary-4{background-color:var(--monster-bg-color-primary-4);color:var(--monster-color-primary-4)}.monster-theme-primary-disabled-4{background-color:var(--monster-bg-color-primary-disabled-4);color:var(--monster-color-primary-disabled-4)}.monster-theme-secondary-4{background-color:var(--monster-bg-color-secondary-4);color:var(--monster-color-secondary-4)}.monster-theme-tertiary-4{background-color:var(--monster-bg-color-tertiary-4);color:var(--monster-color-tertiary-4)}.monster-theme-destructive-4{background-color:var(--monster-bg-color-destructive-4);color:var(--monster-color-destructive-4)}.monster-theme-danger-4{background-color:var(--monster-bg-color-danger-4);color:var(--monster-color-danger-4)}.monster-theme-success-4{background-color:var(--monster-bg-color-success-4);color:var(--monster-color-success-4)}.monster-theme-warning-4{background-color:var(--monster-bg-color-warning-4);color:var(--monster-color-warning-4)}.monster-theme-error-4{background-color:var(--monster-bg-color-error-4);color:var(--monster-color-error-4)}.monster-theme-selection-4{background-color:var(--monster-bg-color-selection-4);color:var(--monster-color-selection-4)}.monster-border-color-4{border-color:var(--monster-color-border-4)}.monster-color-neutral-4{color:var(--monster-color-primary-4)}.monster-bg-color-primary-4{background-color:var(--monster-bg-color-primary-4)}.monster-bg-color-secondary-4{background-color:var(--monster-bg-color-secondary-4)}.monster-bg-color-tertiary-4{background-color:var(--monster-bg-color-tertiary-4)}.monster-color-primary-4{background-color:var(--monster-bg-color-primary-4);color:var(--monster-color-primary-4)}.monster-color-secondary-4{background-color:var(--monster-bg-color-secondary-4);color:var(--monster-color-secondary-4)}.monster-color-tertiary-4{background-color:var(--monster-bg-color-tertiary-4);color:var(--monster-color-tertiary-4)}.monster-color-destructive-4{background-color:var(--monster-bg-color-destructive-4);color:var(--monster-color-destructive-4)}.monster-color-danger-4{background-color:var(--monster-bg-color-danger-4);color:var(--monster-color-danger-4)}.monster-color-success-4{background-color:var(--monster-bg-color-success-4);color:var(--monster-color-success-4)}.monster-color-warning-4{background-color:var(--monster-bg-color-warning-4);color:var(--monster-color-warning-4)}.monster-color-error-4{background-color:var(--monster-bg-color-error-4);color:var(--monster-color-error-4)}.monster-color-selection-4{background-color:var(--monster-bg-color-selection-4);color:var(--monster-color-selection-4)}.monster-theme-control-container-1,.monster-theme-control-row-1{border:1px solid var(--monster-theme-control-border-color)}.monster-theme-control-container-1,.monster-theme-control-element,.monster-theme-control-row-1{background-color:var(--monster-theme-control-bg-color);color:var(--monster-theme-control-color)}.monster-theme-control-background{background-color:var(--monster-theme-control-bg-color)}.monster-theme-background-inherit{background-color:inherit!important}.monster-theme-on{color:var(--monster-theme-on-color);background-color:var(--monster-theme-on-bg-color)}.monster-theme-off{color:var(--monster-theme-off-color);background-color:var(--monster-theme-off-bg-color)}:host{box-sizing:border-box;height:-moz-fit-content;height:fit-content}[data-monster-role=control]{box-sizing:border-box}.navigation.left{left:0}.navigation.right{right:40px}.navigation{box-sizing:border-box;position:absolute;top:0;display:block;cursor:pointer;width:20px;transition:top .2s ease,right .3s ease,bottom .3s ease,left .3s ease,visibility .3s ease,opacity .3s ease,width .3s ease}.navigation [data-monster-role=navigation-list]{box-sizing:border-box;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}:is(.navigation [data-monster-role=navigation-list]) ul{margin:0;padding:0 0 0 10px;list-style-type:none}:is(.navigation [data-monster-role=navigation-list]) ul li{position:relative;padding-left:10px}:is(.navigation [data-monster-role=navigation-list]) ul li:before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:10px;border-left:1px dotted var(--monster-color-primary-2);margin-top:0}:is(.navigation [data-monster-role=navigation-list]) div.footer{display:flex;gap:5px;padding:5px 0}.navigation [data-monster-role=navigation-control]{width:20px}.navigation .heading-strip{display:flex;height:0;background-color:var(--monster-color-primary-1);margin-bottom:3px}.level-h1:is(.navigation .heading-strip){height:6px}.level-h2:is(.navigation .heading-strip){height:4px}.level-h3:is(.navigation .heading-strip){height:2px}.level-h4:is(.navigation .heading-strip){height:1px}.level-h5:is(.navigation .heading-strip){height:1px}.level-h6:is(.navigation .heading-strip){height:1px}
|
|
29
29
|
}`,
|
|
30
30
|
0,
|
|
31
31
|
);
|
|
@@ -600,7 +600,7 @@ function getTemplate() {
|
|
|
600
600
|
return `
|
|
601
601
|
<div data-monster-role="control" part="control">
|
|
602
602
|
<div class="navigation" data-monster-role="navigation">
|
|
603
|
-
<monster-popper data-monster-option-mode="enter" data-monster-option-popper-content-overflow="
|
|
603
|
+
<monster-popper data-monster-option-mode="enter" data-monster-option-popper-content-overflow="both">
|
|
604
604
|
<div slot="button" data-monster-role="navigation-control">
|
|
605
605
|
</div>
|
|
606
606
|
<div data-monster-role="navigation-list">
|
|
@@ -756,6 +756,479 @@ describe("ControlBar", function () {
|
|
|
756
756
|
}
|
|
757
757
|
});
|
|
758
758
|
|
|
759
|
+
it("should keep the overflow switch stable across the switch-width threshold", async function () {
|
|
760
|
+
const OriginalResizeObserver = window.ResizeObserver;
|
|
761
|
+
const originalGlobalResizeObserver = globalThis.ResizeObserver;
|
|
762
|
+
const originalRequestAnimationFrame = window.requestAnimationFrame;
|
|
763
|
+
const originalGlobalRequestAnimationFrame = globalThis.requestAnimationFrame;
|
|
764
|
+
|
|
765
|
+
class TrackingResizeObserver extends ResizeObserverMock {
|
|
766
|
+
static instances = [];
|
|
767
|
+
|
|
768
|
+
constructor(callback) {
|
|
769
|
+
super(callback);
|
|
770
|
+
TrackingResizeObserver.instances.push(this);
|
|
771
|
+
}
|
|
772
|
+
}
|
|
773
|
+
|
|
774
|
+
const scheduledCallbacks = [];
|
|
775
|
+
const flushFrames = async () => {
|
|
776
|
+
while (scheduledCallbacks.length > 0) {
|
|
777
|
+
scheduledCallbacks.shift()();
|
|
778
|
+
await new Promise((resolve) => setTimeout(resolve, 0));
|
|
779
|
+
}
|
|
780
|
+
};
|
|
781
|
+
|
|
782
|
+
try {
|
|
783
|
+
window.ResizeObserver = TrackingResizeObserver;
|
|
784
|
+
globalThis.ResizeObserver = TrackingResizeObserver;
|
|
785
|
+
window.requestAnimationFrame = (callback) => {
|
|
786
|
+
scheduledCallbacks.push(callback);
|
|
787
|
+
return scheduledCallbacks.length;
|
|
788
|
+
};
|
|
789
|
+
globalThis.requestAnimationFrame = window.requestAnimationFrame;
|
|
790
|
+
|
|
791
|
+
const mocks = document.getElementById("mocks");
|
|
792
|
+
mocks.innerHTML = `
|
|
793
|
+
<div id="threshold-bar-wrapper">
|
|
794
|
+
<monster-control-bar id="threshold-bar">
|
|
795
|
+
<button id="threshold-one">One</button>
|
|
796
|
+
<button id="threshold-two">Two</button>
|
|
797
|
+
<button id="threshold-three">Three</button>
|
|
798
|
+
</monster-control-bar>
|
|
799
|
+
</div>
|
|
800
|
+
`;
|
|
801
|
+
|
|
802
|
+
const wrapper = document.getElementById("threshold-bar-wrapper");
|
|
803
|
+
const bar = document.getElementById("threshold-bar");
|
|
804
|
+
const buttons = [
|
|
805
|
+
document.getElementById("threshold-one"),
|
|
806
|
+
document.getElementById("threshold-two"),
|
|
807
|
+
document.getElementById("threshold-three"),
|
|
808
|
+
];
|
|
809
|
+
let wrapperWidth = 90;
|
|
810
|
+
|
|
811
|
+
wrapper.style.boxSizing = "border-box";
|
|
812
|
+
Object.defineProperty(wrapper, "clientWidth", {
|
|
813
|
+
configurable: true,
|
|
814
|
+
get: () => wrapperWidth,
|
|
815
|
+
});
|
|
816
|
+
|
|
817
|
+
for (const button of buttons) {
|
|
818
|
+
Object.defineProperty(button, "offsetWidth", {
|
|
819
|
+
configurable: true,
|
|
820
|
+
value: 50,
|
|
821
|
+
});
|
|
822
|
+
Object.defineProperty(button, "offsetHeight", {
|
|
823
|
+
configurable: true,
|
|
824
|
+
value: 30,
|
|
825
|
+
});
|
|
826
|
+
button.getBoundingClientRect = () => ({
|
|
827
|
+
width: 50,
|
|
828
|
+
height: 30,
|
|
829
|
+
top: 0,
|
|
830
|
+
right: 50,
|
|
831
|
+
bottom: 30,
|
|
832
|
+
left: 0,
|
|
833
|
+
x: 0,
|
|
834
|
+
y: 0,
|
|
835
|
+
toJSON: () => {},
|
|
836
|
+
});
|
|
837
|
+
}
|
|
838
|
+
|
|
839
|
+
const switchButton = bar.shadowRoot.querySelector(
|
|
840
|
+
'[data-monster-role="switch"]',
|
|
841
|
+
);
|
|
842
|
+
Object.defineProperty(switchButton, "offsetWidth", {
|
|
843
|
+
configurable: true,
|
|
844
|
+
value: 20,
|
|
845
|
+
});
|
|
846
|
+
|
|
847
|
+
await flushFrames();
|
|
848
|
+
expect(switchButton.hasAttribute("hidden")).to.be.false;
|
|
849
|
+
|
|
850
|
+
const resizeObserver = TrackingResizeObserver.instances.find((observer) =>
|
|
851
|
+
observer.elements.includes(wrapper),
|
|
852
|
+
);
|
|
853
|
+
expect(resizeObserver).to.exist;
|
|
854
|
+
|
|
855
|
+
wrapperWidth = 155;
|
|
856
|
+
resizeObserver.triggerResize([{ target: wrapper }]);
|
|
857
|
+
await flushFrames();
|
|
858
|
+
expect(switchButton.hasAttribute("hidden")).to.be.false;
|
|
859
|
+
expect(document.getElementById("threshold-three").getAttribute("slot")).to
|
|
860
|
+
.equal("popper");
|
|
861
|
+
|
|
862
|
+
wrapperWidth = 175;
|
|
863
|
+
resizeObserver.triggerResize([{ target: wrapper }]);
|
|
864
|
+
await flushFrames();
|
|
865
|
+
expect(switchButton.hasAttribute("hidden")).to.be.false;
|
|
866
|
+
expect(document.getElementById("threshold-three").getAttribute("slot")).to
|
|
867
|
+
.equal("popper");
|
|
868
|
+
|
|
869
|
+
wrapperWidth = 190;
|
|
870
|
+
resizeObserver.triggerResize([{ target: wrapper }]);
|
|
871
|
+
await flushFrames();
|
|
872
|
+
expect(switchButton.hasAttribute("hidden")).to.be.true;
|
|
873
|
+
expect(document.getElementById("threshold-three").hasAttribute("slot")).to
|
|
874
|
+
.be.false;
|
|
875
|
+
|
|
876
|
+
wrapperWidth = 160;
|
|
877
|
+
resizeObserver.triggerResize([{ target: wrapper }]);
|
|
878
|
+
await flushFrames();
|
|
879
|
+
expect(switchButton.hasAttribute("hidden")).to.be.false;
|
|
880
|
+
expect(document.getElementById("threshold-three").getAttribute("slot")).to
|
|
881
|
+
.equal("popper");
|
|
882
|
+
} finally {
|
|
883
|
+
window.ResizeObserver = OriginalResizeObserver;
|
|
884
|
+
globalThis.ResizeObserver = originalGlobalResizeObserver;
|
|
885
|
+
window.requestAnimationFrame = originalRequestAnimationFrame;
|
|
886
|
+
globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
|
|
887
|
+
}
|
|
888
|
+
});
|
|
889
|
+
|
|
890
|
+
it("should move spacers with adjacent overflow controls", async function () {
|
|
891
|
+
const OriginalResizeObserver = window.ResizeObserver;
|
|
892
|
+
const originalGlobalResizeObserver = globalThis.ResizeObserver;
|
|
893
|
+
const originalRequestAnimationFrame = window.requestAnimationFrame;
|
|
894
|
+
const originalGlobalRequestAnimationFrame = globalThis.requestAnimationFrame;
|
|
895
|
+
|
|
896
|
+
class TrackingResizeObserver extends ResizeObserverMock {
|
|
897
|
+
static instances = [];
|
|
898
|
+
|
|
899
|
+
constructor(callback) {
|
|
900
|
+
super(callback);
|
|
901
|
+
TrackingResizeObserver.instances.push(this);
|
|
902
|
+
}
|
|
903
|
+
}
|
|
904
|
+
|
|
905
|
+
const scheduledCallbacks = [];
|
|
906
|
+
const flushFrames = async () => {
|
|
907
|
+
while (scheduledCallbacks.length > 0) {
|
|
908
|
+
scheduledCallbacks.shift()();
|
|
909
|
+
await new Promise((resolve) => setTimeout(resolve, 0));
|
|
910
|
+
}
|
|
911
|
+
};
|
|
912
|
+
|
|
913
|
+
try {
|
|
914
|
+
window.ResizeObserver = TrackingResizeObserver;
|
|
915
|
+
globalThis.ResizeObserver = TrackingResizeObserver;
|
|
916
|
+
window.requestAnimationFrame = (callback) => {
|
|
917
|
+
scheduledCallbacks.push(callback);
|
|
918
|
+
return scheduledCallbacks.length;
|
|
919
|
+
};
|
|
920
|
+
globalThis.requestAnimationFrame = window.requestAnimationFrame;
|
|
921
|
+
|
|
922
|
+
const mocks = document.getElementById("mocks");
|
|
923
|
+
mocks.innerHTML = `
|
|
924
|
+
<div id="spacer-overflow-wrapper">
|
|
925
|
+
<monster-control-bar id="spacer-overflow-bar">
|
|
926
|
+
<button id="spacer-overflow-one">One</button>
|
|
927
|
+
<monster-control-bar-spacer id="spacer-overflow-spacer-one"></monster-control-bar-spacer>
|
|
928
|
+
<button id="spacer-overflow-two">Two</button>
|
|
929
|
+
<monster-control-bar-spacer id="spacer-overflow-spacer-two"></monster-control-bar-spacer>
|
|
930
|
+
<button id="spacer-overflow-three">Three</button>
|
|
931
|
+
</monster-control-bar>
|
|
932
|
+
</div>
|
|
933
|
+
`;
|
|
934
|
+
|
|
935
|
+
const wrapper = document.getElementById("spacer-overflow-wrapper");
|
|
936
|
+
const bar = document.getElementById("spacer-overflow-bar");
|
|
937
|
+
const sizes = new Map([
|
|
938
|
+
["spacer-overflow-one", 50],
|
|
939
|
+
["spacer-overflow-spacer-one", 10],
|
|
940
|
+
["spacer-overflow-two", 100],
|
|
941
|
+
["spacer-overflow-spacer-two", 10],
|
|
942
|
+
["spacer-overflow-three", 50],
|
|
943
|
+
]);
|
|
944
|
+
|
|
945
|
+
wrapper.style.boxSizing = "border-box";
|
|
946
|
+
Object.defineProperty(wrapper, "clientWidth", {
|
|
947
|
+
configurable: true,
|
|
948
|
+
value: 100,
|
|
949
|
+
});
|
|
950
|
+
|
|
951
|
+
for (const [id, width] of sizes) {
|
|
952
|
+
const element = document.getElementById(id);
|
|
953
|
+
Object.defineProperty(element, "offsetWidth", {
|
|
954
|
+
configurable: true,
|
|
955
|
+
value: width,
|
|
956
|
+
});
|
|
957
|
+
Object.defineProperty(element, "offsetHeight", {
|
|
958
|
+
configurable: true,
|
|
959
|
+
value: 30,
|
|
960
|
+
});
|
|
961
|
+
element.getBoundingClientRect = () => ({
|
|
962
|
+
width,
|
|
963
|
+
height: 30,
|
|
964
|
+
top: 0,
|
|
965
|
+
right: width,
|
|
966
|
+
bottom: 30,
|
|
967
|
+
left: 0,
|
|
968
|
+
x: 0,
|
|
969
|
+
y: 0,
|
|
970
|
+
toJSON: () => {},
|
|
971
|
+
});
|
|
972
|
+
}
|
|
973
|
+
|
|
974
|
+
const switchButton = bar.shadowRoot.querySelector(
|
|
975
|
+
'[data-monster-role="switch"]',
|
|
976
|
+
);
|
|
977
|
+
Object.defineProperty(switchButton, "offsetWidth", {
|
|
978
|
+
configurable: true,
|
|
979
|
+
value: 20,
|
|
980
|
+
});
|
|
981
|
+
|
|
982
|
+
await flushFrames();
|
|
983
|
+
expect(document.getElementById("spacer-overflow-one").hasAttribute("slot"))
|
|
984
|
+
.to.be.false;
|
|
985
|
+
expect(
|
|
986
|
+
document.getElementById("spacer-overflow-spacer-one").getAttribute("slot"),
|
|
987
|
+
).to.equal("popper");
|
|
988
|
+
expect(document.getElementById("spacer-overflow-two").getAttribute("slot"))
|
|
989
|
+
.to.equal("popper");
|
|
990
|
+
expect(
|
|
991
|
+
document.getElementById("spacer-overflow-spacer-two").getAttribute("slot"),
|
|
992
|
+
).to.equal("popper");
|
|
993
|
+
expect(
|
|
994
|
+
document.getElementById("spacer-overflow-three").getAttribute("slot"),
|
|
995
|
+
).to.equal("popper");
|
|
996
|
+
|
|
997
|
+
const resizeObserver = TrackingResizeObserver.instances.find((observer) =>
|
|
998
|
+
observer.elements.includes(wrapper),
|
|
999
|
+
);
|
|
1000
|
+
expect(resizeObserver).to.exist;
|
|
1001
|
+
|
|
1002
|
+
resizeObserver.triggerResize([{ target: wrapper }]);
|
|
1003
|
+
await flushFrames();
|
|
1004
|
+
expect(
|
|
1005
|
+
document.getElementById("spacer-overflow-spacer-one").getAttribute("slot"),
|
|
1006
|
+
).to.equal("popper");
|
|
1007
|
+
expect(
|
|
1008
|
+
document.getElementById("spacer-overflow-spacer-two").getAttribute("slot"),
|
|
1009
|
+
).to.equal("popper");
|
|
1010
|
+
} finally {
|
|
1011
|
+
window.ResizeObserver = OriginalResizeObserver;
|
|
1012
|
+
globalThis.ResizeObserver = originalGlobalResizeObserver;
|
|
1013
|
+
window.requestAnimationFrame = originalRequestAnimationFrame;
|
|
1014
|
+
globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
|
|
1015
|
+
}
|
|
1016
|
+
});
|
|
1017
|
+
|
|
1018
|
+
it("should keep overflow as an ordered suffix when later controls would fit", async function () {
|
|
1019
|
+
const originalRequestAnimationFrame = window.requestAnimationFrame;
|
|
1020
|
+
const originalGlobalRequestAnimationFrame = globalThis.requestAnimationFrame;
|
|
1021
|
+
|
|
1022
|
+
const scheduledCallbacks = [];
|
|
1023
|
+
const flushFrames = async () => {
|
|
1024
|
+
while (scheduledCallbacks.length > 0) {
|
|
1025
|
+
scheduledCallbacks.shift()();
|
|
1026
|
+
await new Promise((resolve) => setTimeout(resolve, 0));
|
|
1027
|
+
}
|
|
1028
|
+
};
|
|
1029
|
+
|
|
1030
|
+
try {
|
|
1031
|
+
window.requestAnimationFrame = (callback) => {
|
|
1032
|
+
scheduledCallbacks.push(callback);
|
|
1033
|
+
return scheduledCallbacks.length;
|
|
1034
|
+
};
|
|
1035
|
+
globalThis.requestAnimationFrame = window.requestAnimationFrame;
|
|
1036
|
+
|
|
1037
|
+
const mocks = document.getElementById("mocks");
|
|
1038
|
+
mocks.innerHTML = `
|
|
1039
|
+
<div id="ordered-overflow-wrapper">
|
|
1040
|
+
<monster-control-bar id="ordered-overflow-bar">
|
|
1041
|
+
<button id="ordered-overflow-one">One</button>
|
|
1042
|
+
<button id="ordered-overflow-wide">Wide</button>
|
|
1043
|
+
<button id="ordered-overflow-small">Small</button>
|
|
1044
|
+
</monster-control-bar>
|
|
1045
|
+
</div>
|
|
1046
|
+
`;
|
|
1047
|
+
|
|
1048
|
+
const wrapper = document.getElementById("ordered-overflow-wrapper");
|
|
1049
|
+
const bar = document.getElementById("ordered-overflow-bar");
|
|
1050
|
+
const sizes = new Map([
|
|
1051
|
+
["ordered-overflow-one", 50],
|
|
1052
|
+
["ordered-overflow-wide", 100],
|
|
1053
|
+
["ordered-overflow-small", 20],
|
|
1054
|
+
]);
|
|
1055
|
+
|
|
1056
|
+
wrapper.style.boxSizing = "border-box";
|
|
1057
|
+
Object.defineProperty(wrapper, "clientWidth", {
|
|
1058
|
+
configurable: true,
|
|
1059
|
+
value: 90,
|
|
1060
|
+
});
|
|
1061
|
+
|
|
1062
|
+
for (const [id, width] of sizes) {
|
|
1063
|
+
const element = document.getElementById(id);
|
|
1064
|
+
Object.defineProperty(element, "offsetWidth", {
|
|
1065
|
+
configurable: true,
|
|
1066
|
+
value: width,
|
|
1067
|
+
});
|
|
1068
|
+
Object.defineProperty(element, "offsetHeight", {
|
|
1069
|
+
configurable: true,
|
|
1070
|
+
value: 30,
|
|
1071
|
+
});
|
|
1072
|
+
element.getBoundingClientRect = () => ({
|
|
1073
|
+
width,
|
|
1074
|
+
height: 30,
|
|
1075
|
+
top: 0,
|
|
1076
|
+
right: width,
|
|
1077
|
+
bottom: 30,
|
|
1078
|
+
left: 0,
|
|
1079
|
+
x: 0,
|
|
1080
|
+
y: 0,
|
|
1081
|
+
toJSON: () => {},
|
|
1082
|
+
});
|
|
1083
|
+
}
|
|
1084
|
+
|
|
1085
|
+
const switchButton = bar.shadowRoot.querySelector(
|
|
1086
|
+
'[data-monster-role="switch"]',
|
|
1087
|
+
);
|
|
1088
|
+
Object.defineProperty(switchButton, "offsetWidth", {
|
|
1089
|
+
configurable: true,
|
|
1090
|
+
value: 20,
|
|
1091
|
+
});
|
|
1092
|
+
|
|
1093
|
+
await flushFrames();
|
|
1094
|
+
|
|
1095
|
+
expect(document.getElementById("ordered-overflow-one").hasAttribute("slot"))
|
|
1096
|
+
.to.be.false;
|
|
1097
|
+
expect(document.getElementById("ordered-overflow-wide").getAttribute("slot"))
|
|
1098
|
+
.to.equal("popper");
|
|
1099
|
+
expect(document.getElementById("ordered-overflow-small").getAttribute("slot"))
|
|
1100
|
+
.to.equal("popper");
|
|
1101
|
+
} finally {
|
|
1102
|
+
window.requestAnimationFrame = originalRequestAnimationFrame;
|
|
1103
|
+
globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
|
|
1104
|
+
}
|
|
1105
|
+
});
|
|
1106
|
+
|
|
1107
|
+
it("should keep the previous overflow boundary while the switch remains visible", async function () {
|
|
1108
|
+
const OriginalResizeObserver = window.ResizeObserver;
|
|
1109
|
+
const originalGlobalResizeObserver = globalThis.ResizeObserver;
|
|
1110
|
+
const originalRequestAnimationFrame = window.requestAnimationFrame;
|
|
1111
|
+
const originalGlobalRequestAnimationFrame = globalThis.requestAnimationFrame;
|
|
1112
|
+
|
|
1113
|
+
class TrackingResizeObserver extends ResizeObserverMock {
|
|
1114
|
+
static instances = [];
|
|
1115
|
+
|
|
1116
|
+
constructor(callback) {
|
|
1117
|
+
super(callback);
|
|
1118
|
+
TrackingResizeObserver.instances.push(this);
|
|
1119
|
+
}
|
|
1120
|
+
}
|
|
1121
|
+
|
|
1122
|
+
const scheduledCallbacks = [];
|
|
1123
|
+
const flushFrames = async () => {
|
|
1124
|
+
while (scheduledCallbacks.length > 0) {
|
|
1125
|
+
scheduledCallbacks.shift()();
|
|
1126
|
+
await new Promise((resolve) => setTimeout(resolve, 0));
|
|
1127
|
+
}
|
|
1128
|
+
};
|
|
1129
|
+
|
|
1130
|
+
try {
|
|
1131
|
+
window.ResizeObserver = TrackingResizeObserver;
|
|
1132
|
+
globalThis.ResizeObserver = TrackingResizeObserver;
|
|
1133
|
+
window.requestAnimationFrame = (callback) => {
|
|
1134
|
+
scheduledCallbacks.push(callback);
|
|
1135
|
+
return scheduledCallbacks.length;
|
|
1136
|
+
};
|
|
1137
|
+
globalThis.requestAnimationFrame = window.requestAnimationFrame;
|
|
1138
|
+
|
|
1139
|
+
const mocks = document.getElementById("mocks");
|
|
1140
|
+
mocks.innerHTML = `
|
|
1141
|
+
<div id="sticky-overflow-wrapper">
|
|
1142
|
+
<monster-control-bar id="sticky-overflow-bar">
|
|
1143
|
+
<button id="sticky-overflow-one">One</button>
|
|
1144
|
+
<button id="sticky-overflow-wide">Wide</button>
|
|
1145
|
+
<button id="sticky-overflow-small">Small</button>
|
|
1146
|
+
</monster-control-bar>
|
|
1147
|
+
</div>
|
|
1148
|
+
`;
|
|
1149
|
+
|
|
1150
|
+
const wrapper = document.getElementById("sticky-overflow-wrapper");
|
|
1151
|
+
const bar = document.getElementById("sticky-overflow-bar");
|
|
1152
|
+
let wrapperWidth = 90;
|
|
1153
|
+
const sizes = new Map([
|
|
1154
|
+
["sticky-overflow-one", 50],
|
|
1155
|
+
["sticky-overflow-wide", 100],
|
|
1156
|
+
["sticky-overflow-small", 20],
|
|
1157
|
+
]);
|
|
1158
|
+
|
|
1159
|
+
wrapper.style.boxSizing = "border-box";
|
|
1160
|
+
Object.defineProperty(wrapper, "clientWidth", {
|
|
1161
|
+
configurable: true,
|
|
1162
|
+
get: () => wrapperWidth,
|
|
1163
|
+
});
|
|
1164
|
+
|
|
1165
|
+
for (const [id, width] of sizes) {
|
|
1166
|
+
const element = document.getElementById(id);
|
|
1167
|
+
Object.defineProperty(element, "offsetWidth", {
|
|
1168
|
+
configurable: true,
|
|
1169
|
+
value: width,
|
|
1170
|
+
});
|
|
1171
|
+
Object.defineProperty(element, "offsetHeight", {
|
|
1172
|
+
configurable: true,
|
|
1173
|
+
value: 30,
|
|
1174
|
+
});
|
|
1175
|
+
element.getBoundingClientRect = () => ({
|
|
1176
|
+
width,
|
|
1177
|
+
height: 30,
|
|
1178
|
+
top: 0,
|
|
1179
|
+
right: width,
|
|
1180
|
+
bottom: 30,
|
|
1181
|
+
left: 0,
|
|
1182
|
+
x: 0,
|
|
1183
|
+
y: 0,
|
|
1184
|
+
toJSON: () => {},
|
|
1185
|
+
});
|
|
1186
|
+
}
|
|
1187
|
+
|
|
1188
|
+
const switchButton = bar.shadowRoot.querySelector(
|
|
1189
|
+
'[data-monster-role="switch"]',
|
|
1190
|
+
);
|
|
1191
|
+
Object.defineProperty(switchButton, "offsetWidth", {
|
|
1192
|
+
configurable: true,
|
|
1193
|
+
value: 20,
|
|
1194
|
+
});
|
|
1195
|
+
|
|
1196
|
+
await flushFrames();
|
|
1197
|
+
expect(document.getElementById("sticky-overflow-wide").getAttribute("slot"))
|
|
1198
|
+
.to.equal("popper");
|
|
1199
|
+
expect(document.getElementById("sticky-overflow-small").getAttribute("slot"))
|
|
1200
|
+
.to.equal("popper");
|
|
1201
|
+
|
|
1202
|
+
const resizeObserver = TrackingResizeObserver.instances.find((observer) =>
|
|
1203
|
+
observer.elements.includes(wrapper),
|
|
1204
|
+
);
|
|
1205
|
+
expect(resizeObserver).to.exist;
|
|
1206
|
+
|
|
1207
|
+
wrapperWidth = 190;
|
|
1208
|
+
resizeObserver.triggerResize([{ target: wrapper }]);
|
|
1209
|
+
await flushFrames();
|
|
1210
|
+
expect(switchButton.hasAttribute("hidden")).to.be.false;
|
|
1211
|
+
expect(document.getElementById("sticky-overflow-wide").getAttribute("slot"))
|
|
1212
|
+
.to.equal("popper");
|
|
1213
|
+
expect(document.getElementById("sticky-overflow-small").getAttribute("slot"))
|
|
1214
|
+
.to.equal("popper");
|
|
1215
|
+
|
|
1216
|
+
wrapperWidth = 220;
|
|
1217
|
+
resizeObserver.triggerResize([{ target: wrapper }]);
|
|
1218
|
+
await flushFrames();
|
|
1219
|
+
expect(switchButton.hasAttribute("hidden")).to.be.true;
|
|
1220
|
+
expect(document.getElementById("sticky-overflow-wide").hasAttribute("slot"))
|
|
1221
|
+
.to.be.false;
|
|
1222
|
+
expect(document.getElementById("sticky-overflow-small").hasAttribute("slot"))
|
|
1223
|
+
.to.be.false;
|
|
1224
|
+
} finally {
|
|
1225
|
+
window.ResizeObserver = OriginalResizeObserver;
|
|
1226
|
+
globalThis.ResizeObserver = originalGlobalResizeObserver;
|
|
1227
|
+
window.requestAnimationFrame = originalRequestAnimationFrame;
|
|
1228
|
+
globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
|
|
1229
|
+
}
|
|
1230
|
+
});
|
|
1231
|
+
|
|
759
1232
|
it("should match the stacked breakpoint when the content-box container width is a css string", async function () {
|
|
760
1233
|
const originalRequestAnimationFrame = window.requestAnimationFrame;
|
|
761
1234
|
const originalGlobalRequestAnimationFrame = globalThis.requestAnimationFrame;
|
|
@@ -2020,6 +2020,7 @@ describe('Select', function () {
|
|
|
2020
2020
|
this.timeout(4000);
|
|
2021
2021
|
|
|
2022
2022
|
let mocks = document.getElementById('mocks');
|
|
2023
|
+
const previousFetch = global['fetch'];
|
|
2023
2024
|
|
|
2024
2025
|
global['fetch'] = function () {
|
|
2025
2026
|
return createJsonResponse({
|
|
@@ -2048,18 +2049,26 @@ describe('Select', function () {
|
|
|
2048
2049
|
const filterInput = select.shadowRoot.querySelector('[data-monster-role=filter][name="popper-filter"]');
|
|
2049
2050
|
filterInput.value = 'alpha';
|
|
2050
2051
|
|
|
2051
|
-
|
|
2052
|
+
try {
|
|
2053
|
+
container.click();
|
|
2054
|
+
filterInput.dispatchEvent(new Event('input', {
|
|
2055
|
+
bubbles: true,
|
|
2056
|
+
composed: true
|
|
2057
|
+
}));
|
|
2052
2058
|
|
|
2053
|
-
|
|
2054
|
-
|
|
2055
|
-
|
|
2059
|
+
await waitForCondition(() => {
|
|
2060
|
+
return select.getOption('total') === 0;
|
|
2061
|
+
});
|
|
2056
2062
|
|
|
2057
|
-
|
|
2058
|
-
|
|
2059
|
-
|
|
2060
|
-
|
|
2061
|
-
|
|
2062
|
-
|
|
2063
|
+
expect(select.getOption('total')).to.equal(0);
|
|
2064
|
+
expect(select.getOption('messages.total')).to.equal('');
|
|
2065
|
+
await waitForCondition(() => {
|
|
2066
|
+
return select.getOption('messages.emptyOptions').includes('Please consider modifying the filter');
|
|
2067
|
+
});
|
|
2068
|
+
expect(select.getOption('messages.emptyOptions')).to.contain('Please consider modifying the filter');
|
|
2069
|
+
} finally {
|
|
2070
|
+
global['fetch'] = previousFetch;
|
|
2071
|
+
}
|
|
2063
2072
|
});
|
|
2064
2073
|
|
|
2065
2074
|
it('should not show the select placeholder while a value sync is still pending', async function () {
|