@schukai/monster 4.149.0 → 4.149.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/package.json +1 -1
  2. package/source/components/accessibility/stylesheet/locale-picker.mjs +4 -4
  3. package/source/components/content/stylesheet/viewer.mjs +4 -4
  4. package/source/components/data/stylesheet/kpi-tile.mjs +4 -4
  5. package/source/components/data/stylesheet/metric-graph.mjs +4 -4
  6. package/source/components/data/stylesheet/metric.mjs +4 -4
  7. package/source/components/datatable/pagination.mjs +120 -21
  8. package/source/components/datatable/style/embedded-pagination.pcss +47 -26
  9. package/source/components/datatable/stylesheet/change-button.mjs +4 -4
  10. package/source/components/datatable/stylesheet/column-bar.mjs +4 -4
  11. package/source/components/datatable/stylesheet/dataset.mjs +4 -4
  12. package/source/components/datatable/stylesheet/datatable.mjs +4 -4
  13. package/source/components/datatable/stylesheet/embedded-pagination.mjs +15 -1
  14. package/source/components/datatable/stylesheet/filter-select.mjs +4 -4
  15. package/source/components/datatable/stylesheet/filter.mjs +4 -4
  16. package/source/components/datatable/stylesheet/pagination.mjs +5 -5
  17. package/source/components/datatable/stylesheet/save-button.mjs +4 -4
  18. package/source/components/datatable/stylesheet/status.mjs +4 -4
  19. package/source/components/form/stylesheet/button-bar.mjs +4 -4
  20. package/source/components/form/stylesheet/button.mjs +27 -21
  21. package/source/components/form/stylesheet/control-bar.mjs +4 -4
  22. package/source/components/form/stylesheet/popper-button.mjs +4 -4
  23. package/source/components/host/stylesheet/call-button.mjs +4 -4
  24. package/source/components/host/stylesheet/toggle-button.mjs +4 -4
  25. package/source/components/layout/stylesheet/collapse.mjs +4 -4
  26. package/source/components/layout/stylesheet/details.mjs +4 -4
  27. package/source/components/state/stylesheet/state.mjs +1 -1
  28. package/source/components/style/button.css +4 -4
  29. package/source/components/style/form.css +1 -1
  30. package/source/components/style/form.pcss +10 -3
  31. package/source/components/style/mixin/button.pcss +2 -1
  32. package/source/components/stylesheet/button.mjs +4 -4
  33. package/source/components/stylesheet/form.mjs +1 -1
  34. package/source/components/time/stylesheet/day.mjs +4 -4
  35. package/source/components/time/stylesheet/month-calendar.mjs +4 -4
  36. package/source/components/time/timeline/stylesheet/appointment.mjs +4 -4
  37. package/source/components/time/timeline/stylesheet/segment.mjs +4 -4
  38. package/test/cases/components/datatable/mobile-layout.mjs +58 -7
  39. package/test/cases/components/datatable/pagination.mjs +79 -0
  40. package/test/cases/components/style/button-sizing.mjs +31 -0
  41. package/test/cases/components/style/form-controls.mjs +13 -0
package/source/components/time/stylesheet/month-calendar.mjs CHANGED
@@ -27,7 +27,7 @@ try {
27
27
  @layer monthcalendar {
28
28
  [data-monster-role=control]{outline:none;width:100%;box-sizing:border-box}[data-monster-role=control].flex{display:flex;flex-direction:row;align-items:center}:host{display:block;box-sizing:border-box}button{background-color:var(
29
29
  --monster-button-background-color,var(--monster-bg-color-primary-1)
30
- );color:var(--monster-button-color,var(--monster-color-primary-1))}.monster-button-primary,button{width:-webkit-fill-available;width:-moz-available;width:stretch;font-size:1rem;font-weight:400;line-height:1.5;text-align:var(--monster-button-text-align,center);text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;border-width:var(--monster-button-border-width,var(--monster-border-width));border-radius:var(
30
+ );color:var(--monster-button-color,var(--monster-color-primary-1))}.monster-button-primary,button{box-sizing:border-box;width:-webkit-fill-available;width:-moz-available;width:stretch;font-size:1rem;font-weight:400;line-height:1.5;text-align:var(--monster-button-text-align,center);text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;border-width:var(--monster-button-border-width,var(--monster-border-width));border-radius:var(
31
31
  --monster-button-border-radius,var(--monster-border-radius)
32
32
  );border-style:var(--monster-button-border-style,var(--monster-border-style));box-shadow:var(--monster-button-box-shadow,var(--monster-box-shadow-1));min-height:var(
33
33
  --monster-button-min-block-size,var(--monster-control-min-block-size,auto)
@@ -43,7 +43,7 @@ try {
43
43
  --monster-button-background-color,var(--monster-bg-color-secondary-4)
44
44
  );border-color:var(
45
45
  --monster-button-border-color,var(--monster-bg-color-secondary-4)
46
- )}.monster-button-secondary,.monster-button-tertiary{width:-webkit-fill-available;width:-moz-available;width:stretch;font-size:1rem;font-weight:400;line-height:1.5;text-align:var(--monster-button-text-align,center);text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-shadow:var(--monster-button-box-shadow,var(--monster-box-shadow-1));min-height:var(
46
+ )}.monster-button-secondary,.monster-button-tertiary{box-sizing:border-box;width:-webkit-fill-available;width:-moz-available;width:stretch;font-size:1rem;font-weight:400;line-height:1.5;text-align:var(--monster-button-text-align,center);text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-shadow:var(--monster-button-box-shadow,var(--monster-box-shadow-1));min-height:var(
47
47
  --monster-button-min-block-size,var(--monster-control-min-block-size,auto)
48
48
  );padding:var(
49
49
  --monster-button-padding,var(--monster-control-padding-block,.375rem) var(--monster-control-padding-inline,.75rem)
@@ -59,7 +59,7 @@ try {
59
59
  --monster-button-background-color,var(--monster-bg-color-destructive-1)
60
60
  );border-color:var(
61
61
  --monster-button-border-color,var(--monster-bg-color-destructive-1)
62
- )}.monster-button-destructive,.monster-button-outline-primary{width:-webkit-fill-available;width:-moz-available;width:stretch;font-size:1rem;font-weight:400;line-height:1.5;text-align:var(--monster-button-text-align,center);text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-shadow:var(--monster-button-box-shadow,var(--monster-box-shadow-1));min-height:var(
62
+ )}.monster-button-destructive,.monster-button-outline-primary{box-sizing:border-box;width:-webkit-fill-available;width:-moz-available;width:stretch;font-size:1rem;font-weight:400;line-height:1.5;text-align:var(--monster-button-text-align,center);text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-shadow:var(--monster-button-box-shadow,var(--monster-box-shadow-1));min-height:var(
63
63
  --monster-button-min-block-size,var(--monster-control-min-block-size,auto)
64
64
  );padding:var(
65
65
  --monster-button-padding,var(--monster-control-padding-block,.375rem) var(--monster-control-padding-inline,.75rem)
@@ -75,7 +75,7 @@ try {
75
75
  --monster-button-background-color,var(--monster-color-secondary-4)
76
76
  );border-color:var(
77
77
  --monster-button-border-color,var(--monster-bg-color-secondary-4)
78
- )}.monster-button-outline-secondary,.monster-button-outline-tertiary{width:-webkit-fill-available;width:-moz-available;width:stretch;font-size:1rem;font-weight:400;line-height:1.5;text-align:var(--monster-button-text-align,center);text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-shadow:var(--monster-button-box-shadow,var(--monster-box-shadow-1));min-height:var(
78
+ )}.monster-button-outline-secondary,.monster-button-outline-tertiary{box-sizing:border-box;width:-webkit-fill-available;width:-moz-available;width:stretch;font-size:1rem;font-weight:400;line-height:1.5;text-align:var(--monster-button-text-align,center);text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-shadow:var(--monster-button-box-shadow,var(--monster-box-shadow-1));min-height:var(
79
79
  --monster-button-min-block-size,var(--monster-control-min-block-size,auto)
80
80
  );padding:var(
81
81
  --monster-button-padding,var(--monster-control-padding-block,.375rem) var(--monster-control-padding-inline,.75rem)
package/source/components/time/timeline/stylesheet/appointment.mjs CHANGED
@@ -27,7 +27,7 @@ try {
27
27
  @layer appointment {
28
28
  :after,:before,:root{--monster-font-family:-apple-system,BlinkMacSystemFont,\"Quicksand\",\"Segoe UI\",\"Roboto\",\"Oxygen\",\"Ubuntu\",\"Cantarell\",\"Fira Sans\",\"Droid Sans\",\"Helvetica Neue\",Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\";--monster-font-family-monospace:\"Consolas\",\"Courier New\",\"Roboto Mono\",\"Source Code Pro\",\"Fira Mono\",monospace;--monster-font-size-min:15px;--monster-font-size-base:16px;--monster-font-size-max:16px;--monster-font-scale:1;--monster-font-scale-hi-dpi:1.25;--monster-font-scale-xhi-dpi:1.25;--monster-font-size-fluid:clamp(var(--monster-font-size-min),calc(var(--monster-font-size-min) + 0.1vw),var(--monster-font-size-max))}@media (min-resolution:1.5dppx){:after,:before,:root{--monster-font-scale:var(--monster-font-scale-hi-dpi,1.1)}}@media (min-resolution:3dppx){:after,:before,:root{--monster-font-scale:var(--monster-font-scale-xhi-dpi,1.18)}}:after,:before,:root{--monster-color-primary-1:var(--monster-color-gray-6);--monster-color-primary-2:var(--monster-color-gray-6);--monster-color-primary-3:var(--monster-color-cinnamon-1);--monster-color-primary-4:var(--monster-color-cinnamon-1);--monster-bg-color-primary-1:var(--monster-color-gray-1);--monster-bg-color-primary-2:var(--monster-color-gray-2);--monster-bg-color-primary-3:var(--monster-color-gray-6);--monster-bg-color-primary-4:var(--monster-color-gray-4)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-primary-1:var(--monster-color-gray-1);--monster-color-primary-2:var(--monster-color-gray-1);--monster-color-primary-3:var(--monster-color-gray-6);--monster-color-primary-4:var(--monster-color-gray-6);--monster-bg-color-primary-1:var(--monster-color-gray-6);--monster-bg-color-primary-2:var(--monster-color-gray-3);--monster-bg-color-primary-3:var(--monster-color-gray-2);--monster-bg-color-primary-4:var(--monster-color-gray-1)}}:after,:before,:root{--monster-color-secondary-1:var(--monster-color-red-4);--monster-color-secondary-2:var(--monster-color-red-4);--monster-color-secondary-3:var(--monster-color-red-1);--monster-color-secondary-4:var(--monster-color-red-1);--monster-bg-color-secondary-1:var(--monster-color-gray-1);--monster-bg-color-secondary-2:var(--monster-color-red-2);--monster-bg-color-secondary-3:var(--monster-color-red-3);--monster-bg-color-secondary-4:var(--monster-color-red-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-secondary-1:var(--monster-color-red-1);--monster-color-secondary-2:var(--monster-color-red-1);--monster-color-secondary-3:var(--monster-color-red-6);--monster-color-secondary-4:var(--monster-color-red-4);--monster-bg-color-secondary-1:var(--monster-color-gray-6);--monster-bg-color-secondary-2:var(--monster-color-red-3);--monster-bg-color-secondary-3:var(--monster-color-red-2);--monster-bg-color-secondary-4:var(--monster-color-red-1)}}:after,:before,:root{--monster-color-tertiary-1:var(--monster-color-magenta-4);--monster-color-tertiary-2:var(--monster-color-magenta-4);--monster-color-tertiary-3:var(--monster-color-magenta-6);--monster-color-tertiary-4:var(--monster-color-magenta-1);--monster-bg-color-tertiary-1:var(--monster-color-gray-1);--monster-bg-color-tertiary-2:var(--monster-color-magenta-1);--monster-bg-color-tertiary-3:var(--monster-color-magenta-2);--monster-bg-color-tertiary-4:var(--monster-color-magenta-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-tertiary-1:var(--monster-color-magenta-1);--monster-color-tertiary-2:var(--monster-color-magenta-6);--monster-color-tertiary-3:var(--monster-color-magenta-4);--monster-color-tertiary-4:var(--monster-color-magenta-4);--monster-bg-color-tertiary-1:var(--monster-color-gray-6);--monster-bg-color-tertiary-2:var(--monster-color-magenta-2);--monster-bg-color-tertiary-3:var(--monster-color-magenta-1);--monster-bg-color-tertiary-4:var(--monster-color-magenta-1)}}:after,:before,:root{--monster-color-destructive-1:var(--monster-color-red-1);--monster-color-destructive-2:var(--monster-color-red-4);--monster-color-destructive-3:var(--monster-color-red-6);--monster-color-destructive-4:var(--monster-color-red-1);--monster-bg-color-destructive-1:var(--monster-color-red-4);--monster-bg-color-destructive-2:var(--monster-color-gray-1);--monster-bg-color-destructive-3:var(--monster-color-red-2);--monster-bg-color-destructive-4:var(--monster-color-red-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-destructive-1:var(--monster-color-red-1);--monster-color-destructive-2:var(--monster-color-red-3);--monster-color-destructive-3:var(--monster-color-red-4);--monster-color-destructive-4:var(--monster-color-red-1);--monster-bg-color-destructive-1:var(--monster-color-red-5);--monster-bg-color-destructive-2:var(--monster-color-gray-6);--monster-bg-color-destructive-3:var(--monster-color-red-1);--monster-bg-color-destructive-4:var(--monster-color-red-4)}}:after,:before,:root{--monster-color-danger-1:var(--monster-color-raspberry-1);--monster-color-danger-2:var(--monster-color-raspberry-4);--monster-color-danger-3:var(--monster-color-raspberry-6);--monster-color-danger-4:var(--monster-color-raspberry-1);--monster-bg-color-danger-1:var(--monster-color-raspberry-4);--monster-bg-color-danger-2:var(--monster-color-gray-1);--monster-bg-color-danger-3:var(--monster-color-raspberry-2);--monster-bg-color-danger-4:var(--monster-color-raspberry-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-danger-1:var(--monster-color-raspberry-1);--monster-color-danger-2:var(--monster-color-raspberry-3);--monster-color-danger-3:var(--monster-color-raspberry-4);--monster-color-danger-4:var(--monster-color-raspberry-1);--monster-bg-color-danger-1:var(--monster-color-raspberry-5);--monster-bg-color-danger-2:var(--monster-color-gray-6);--monster-bg-color-danger-3:var(--monster-color-raspberry-1);--monster-bg-color-danger-4:var(--monster-color-raspberry-4)}}:after,:before,:root{--monster-color-success-1:var(--monster-color-green-1);--monster-color-success-2:var(--monster-color-green-4);--monster-color-success-3:var(--monster-color-green-6);--monster-color-success-4:var(--monster-color-green-1);--monster-bg-color-success-1:var(--monster-color-green-3);--monster-bg-color-success-2:var(--monster-color-gray-1);--monster-bg-color-success-3:var(--monster-color-green-2);--monster-bg-color-success-4:var(--monster-color-green-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-success-1:var(--monster-color-green-1);--monster-color-success-2:var(--monster-color-green-2);--monster-color-success-3:var(--monster-color-green-4);--monster-color-success-4:var(--monster-color-green-1);--monster-bg-color-success-1:var(--monster-color-green-5);--monster-bg-color-success-2:var(--monster-color-gray-6);--monster-bg-color-success-3:var(--monster-color-green-1);--monster-bg-color-success-4:var(--monster-color-green-3)}}:after,:before,:root{--monster-color-warning-1:var(--monster-color-orange-1);--monster-color-warning-2:var(--monster-color-orange-4);--monster-color-warning-3:var(--monster-color-orange-6);--monster-color-warning-4:var(--monster-color-orange-1);--monster-bg-color-warning-1:var(--monster-color-orange-3);--monster-bg-color-warning-2:var(--monster-color-gray-1);--monster-bg-color-warning-3:var(--monster-color-orange-2);--monster-bg-color-warning-4:var(--monster-color-orange-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-warning-1:var(--monster-color-orange-1);--monster-color-warning-2:var(--monster-color-orange-3);--monster-color-warning-3:var(--monster-color-orange-4);--monster-color-warning-4:var(--monster-color-orange-1);--monster-bg-color-warning-1:var(--monster-color-orange-5);--monster-bg-color-warning-2:var(--monster-color-gray-6);--monster-bg-color-warning-3:var(--monster-color-orange-1);--monster-bg-color-warning-4:var(--monster-color-orange-3)}}:after,:before,:root{--monster-color-error-1:var(--monster-color-red-1);--monster-color-error-2:var(--monster-color-red-4);--monster-color-error-3:var(--monster-color-red-6);--monster-color-error-4:var(--monster-color-red-1);--monster-bg-color-error-1:var(--monster-color-red-4);--monster-bg-color-error-2:var(--monster-color-gray-1);--monster-bg-color-error-3:var(--monster-color-red-2);--monster-bg-color-error-4:var(--monster-color-red-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-error-1:var(--monster-color-red-1);--monster-color-error-2:var(--monster-color-red-3);--monster-color-error-3:var(--monster-color-red-4);--monster-color-error-4:var(--monster-color-red-1);--monster-bg-color-error-1:var(--monster-color-red-5);--monster-bg-color-error-2:var(--monster-color-gray-6);--monster-bg-color-error-3:var(--monster-color-red-1);--monster-bg-color-error-4:var(--monster-color-red-4)}}:after,:before,:root{--monster-color-selection-1:var(--monster-color-gray-6);--monster-color-selection-2:var(--monster-color-gray-6);--monster-color-selection-3:var(--monster-color-gray-6);--monster-color-selection-4:var(--monster-color-gray-1);--monster-bg-color-selection-1:var(--monster-color-yellow-2);--monster-bg-color-selection-2:var(--monster-color-yellow-1);--monster-bg-color-selection-3:var(--monster-color-yellow-2);--monster-bg-color-selection-4:var(--monster-color-yellow-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-selection-1:var(--monster-color-gray-6);--monster-color-selection-2:var(--monster-color-gray-6);--monster-color-selection-3:var(--monster-color-gray-6);--monster-color-selection-4:var(--monster-color-gray-1);--monster-bg-color-selection-1:var(--monster-color-yellow-2);--monster-bg-color-selection-2:var(--monster-color-yellow-1);--monster-bg-color-selection-3:var(--monster-color-yellow-2);--monster-bg-color-selection-4:var(--monster-color-yellow-6)}}:after,:before,:root{--monster-color-primary-disabled-1:var(--monster-color-gray-4);--monster-color-primary-disabled-2:var(--monster-color-gray-4);--monster-color-primary-disabled-3:var(--monster-color-gray-4);--monster-color-primary-disabled-4:var(--monster-color-gray-4);--monster-bg-color-primary-disabled-1:var(--monster-color-gray-1);--monster-bg-color-primary-disabled-2:var(--monster-color-gray-2);--monster-bg-color-primary-disabled-3:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-4:var(--monster-color-gray-6);--monster-color-gradient-1:#833ab4;--monster-color-gradient-2:#fd1d1d;--monster-color-gradient-3:#fcb045}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-primary-disabled-1:var(--monster-color-gray-4);--monster-color-primary-disabled-2:var(--monster-color-gray-4);--monster-color-primary-disabled-3:var(--monster-color-gray-3);--monster-color-primary-disabled-4:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-1:var(--monster-color-gray-6);--monster-bg-color-primary-disabled-2:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-3:var(--monster-color-gray-2);--monster-bg-color-primary-disabled-4:var(--monster-color-gray-1);--monster-color-gradient-1:#ffe0b2;--monster-color-gradient-2:#ad8275;--monster-color-gradient-3:#771ba3}}:after,:before,:root{--monster-box-shadow-1:none;--monster-box-shadow-2:-1px 1px 10px 1px hsla(0,0%,76%,.61);--monster-text-shadow:none;--monster-theme-control-bg-color:var(--monster-color-seashell-1);--monster-theme-control-color:var(--monster-color-seashell-6);--monster-theme-control-hover-color:var(--monster-color-seashell-6);--monster-theme-control-hover-bg-color:var(--monster-color-seashell-2);--monster-theme-control-border-width:2px;--monster-theme-control-border-style:solid;--monster-theme-control-border-radius:0;--monster-theme-control-border-color:var(--monster-color-primary-1)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-theme-control-bg-color:var(--monster-color-gray-5);--monster-theme-control-color:var(--monster-color-gray-1);--monster-theme-control-border-color:var(--monster-color-gray-3);--monster-theme-control-hover-color:var(--monster-color-gray-1);--monster-theme-control-hover-bg-color:var(--monster-color-gray-6)}}:after,:before,:root{--monster-theme-on-color:var(--monster-color-green-1);--monster-theme-on-bg-color:var(--monster-color-green-5);--monster-theme-off-color:var(--monster-color-gray-1);--monster-theme-off-bg-color:var(--monster-color-gray-4)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-theme-on-color:var(--monster-color-gray-6);--monster-theme-on-bg-color:var(--monster-color-gray-1);--monster-theme-off-color:var(--monster-color-gray-1);--monster-theme-off-bg-color:var(--monster-color-gray-5)}}:after,:before,:root{--monster-border-style:solid;--monster-border-width:3px;--monster-border-radius:0;--monster-outline-width:1px;--monster-focus-ring-width:2px;--monster-focus-ring-style:solid;--monster-focus-ring-color:var(--monster-color-blue-4);--monster-focus-ring-offset:2px}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-focus-ring-color:var(--monster-color-yellow-2)}}:after,:before,:root{--monster-popper-witharrrow-distance:-4px;--monster-z-index-default:0;--monster-z-index-outline:10;--monster-z-index-dropdown:200;--monster-z-index-dropdown-overlay:210;--monster-z-index-sticky:300;--monster-z-index-sticky-overlay:310;--monster-z-index-fixed:400;--monster-z-index-fixed-overlay:410;--monster-z-index-modal-backdrop:500;--monster-z-index-modal-backdrop-overlay:510;--monster-z-index-offcanvas:600;--monster-z-index-offcanvas-overlay:610;--monster-z-index-modal:700;--monster-z-index-modal-overlay:710;--monster-z-index-popover:800;--monster-z-index-popover-overlay:810;--monster-z-index-tooltip:800;--monster-z-index-tooltip-overlay:910;--monster-space-0:0;--monster-space-1:2px;--monster-space-2:4px;--monster-space-3:6px;--monster-space-4:10px;--monster-space-5:16px;--monster-space-6:26px;--monster-space-7:42px;--monster-breakpoint-0:480px;--monster-breakpoint-4:480px;--monster-breakpoint-7:768px;--monster-breakpoint-9:992px;--monster-breakpoint-12:1200px;--monster-dragger-width:2px;--monster-dragger-handle-width:4px;--monster-dragger-handle-height:50px}[data-monster-role=control]{width:100%;box-sizing:border-box}[data-monster-role=control].flex{display:flex;flex-direction:row;align-items:center}:host{display:block;box-sizing:border-box}.visually-hidden{width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.visually-hidden:not(caption){position:absolute!important}.visually-hidden-focusable:not(:focus):not(:focus-within){width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.visually-hidden-focusable:not(:focus):not(:focus-within):not(caption){position:absolute!important}@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}button{background-color:var(
29
29
  --monster-button-background-color,var(--monster-bg-color-primary-1)
30
- );color:var(--monster-button-color,var(--monster-color-primary-1))}.monster-button-primary,button{width:-webkit-fill-available;width:-moz-available;width:stretch;font-size:1rem;font-weight:400;line-height:1.5;text-align:var(--monster-button-text-align,center);text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;border-width:var(--monster-button-border-width,var(--monster-border-width));border-radius:var(
30
+ );color:var(--monster-button-color,var(--monster-color-primary-1))}.monster-button-primary,button{box-sizing:border-box;width:-webkit-fill-available;width:-moz-available;width:stretch;font-size:1rem;font-weight:400;line-height:1.5;text-align:var(--monster-button-text-align,center);text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;border-width:var(--monster-button-border-width,var(--monster-border-width));border-radius:var(
31
31
  --monster-button-border-radius,var(--monster-border-radius)
32
32
  );border-style:var(--monster-button-border-style,var(--monster-border-style));box-shadow:var(--monster-button-box-shadow,var(--monster-box-shadow-1));min-height:var(
33
33
  --monster-button-min-block-size,var(--monster-control-min-block-size,auto)
@@ -43,7 +43,7 @@ try {
43
43
  --monster-button-background-color,var(--monster-bg-color-secondary-4)
44
44
  );border-color:var(
45
45
  --monster-button-border-color,var(--monster-bg-color-secondary-4)
46
- )}.monster-button-secondary,.monster-button-tertiary{width:-webkit-fill-available;width:-moz-available;width:stretch;font-size:1rem;font-weight:400;line-height:1.5;text-align:var(--monster-button-text-align,center);text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-shadow:var(--monster-button-box-shadow,var(--monster-box-shadow-1));min-height:var(
46
+ )}.monster-button-secondary,.monster-button-tertiary{box-sizing:border-box;width:-webkit-fill-available;width:-moz-available;width:stretch;font-size:1rem;font-weight:400;line-height:1.5;text-align:var(--monster-button-text-align,center);text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-shadow:var(--monster-button-box-shadow,var(--monster-box-shadow-1));min-height:var(
47
47
  --monster-button-min-block-size,var(--monster-control-min-block-size,auto)
48
48
  );padding:var(
49
49
  --monster-button-padding,var(--monster-control-padding-block,.375rem) var(--monster-control-padding-inline,.75rem)
@@ -59,7 +59,7 @@ try {
59
59
  --monster-button-background-color,var(--monster-bg-color-destructive-1)
60
60
  );border-color:var(
61
61
  --monster-button-border-color,var(--monster-bg-color-destructive-1)
62
- )}.monster-button-destructive,.monster-button-outline-primary{width:-webkit-fill-available;width:-moz-available;width:stretch;font-size:1rem;font-weight:400;line-height:1.5;text-align:var(--monster-button-text-align,center);text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-shadow:var(--monster-button-box-shadow,var(--monster-box-shadow-1));min-height:var(
62
+ )}.monster-button-destructive,.monster-button-outline-primary{box-sizing:border-box;width:-webkit-fill-available;width:-moz-available;width:stretch;font-size:1rem;font-weight:400;line-height:1.5;text-align:var(--monster-button-text-align,center);text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-shadow:var(--monster-button-box-shadow,var(--monster-box-shadow-1));min-height:var(
63
63
  --monster-button-min-block-size,var(--monster-control-min-block-size,auto)
64
64
  );padding:var(
65
65
  --monster-button-padding,var(--monster-control-padding-block,.375rem) var(--monster-control-padding-inline,.75rem)
@@ -75,7 +75,7 @@ try {
75
75
  --monster-button-background-color,var(--monster-color-secondary-4)
76
76
  );border-color:var(
77
77
  --monster-button-border-color,var(--monster-bg-color-secondary-4)
78
- )}.monster-button-outline-secondary,.monster-button-outline-tertiary{width:-webkit-fill-available;width:-moz-available;width:stretch;font-size:1rem;font-weight:400;line-height:1.5;text-align:var(--monster-button-text-align,center);text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-shadow:var(--monster-button-box-shadow,var(--monster-box-shadow-1));min-height:var(
78
+ )}.monster-button-outline-secondary,.monster-button-outline-tertiary{box-sizing:border-box;width:-webkit-fill-available;width:-moz-available;width:stretch;font-size:1rem;font-weight:400;line-height:1.5;text-align:var(--monster-button-text-align,center);text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-shadow:var(--monster-button-box-shadow,var(--monster-box-shadow-1));min-height:var(
79
79
  --monster-button-min-block-size,var(--monster-control-min-block-size,auto)
80
80
  );padding:var(
81
81
  --monster-button-padding,var(--monster-control-padding-block,.375rem) var(--monster-control-padding-inline,.75rem)
package/source/components/time/timeline/stylesheet/segment.mjs CHANGED
@@ -27,7 +27,7 @@ try {
27
27
  @layer segment {
28
28
  :after,:before,:root{--monster-font-family:-apple-system,BlinkMacSystemFont,\"Quicksand\",\"Segoe UI\",\"Roboto\",\"Oxygen\",\"Ubuntu\",\"Cantarell\",\"Fira Sans\",\"Droid Sans\",\"Helvetica Neue\",Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\";--monster-font-family-monospace:\"Consolas\",\"Courier New\",\"Roboto Mono\",\"Source Code Pro\",\"Fira Mono\",monospace;--monster-font-size-min:15px;--monster-font-size-base:16px;--monster-font-size-max:16px;--monster-font-scale:1;--monster-font-scale-hi-dpi:1.25;--monster-font-scale-xhi-dpi:1.25;--monster-font-size-fluid:clamp(var(--monster-font-size-min),calc(var(--monster-font-size-min) + 0.1vw),var(--monster-font-size-max))}@media (min-resolution:1.5dppx){:after,:before,:root{--monster-font-scale:var(--monster-font-scale-hi-dpi,1.1)}}@media (min-resolution:3dppx){:after,:before,:root{--monster-font-scale:var(--monster-font-scale-xhi-dpi,1.18)}}:after,:before,:root{--monster-color-primary-1:var(--monster-color-gray-6);--monster-color-primary-2:var(--monster-color-gray-6);--monster-color-primary-3:var(--monster-color-cinnamon-1);--monster-color-primary-4:var(--monster-color-cinnamon-1);--monster-bg-color-primary-1:var(--monster-color-gray-1);--monster-bg-color-primary-2:var(--monster-color-gray-2);--monster-bg-color-primary-3:var(--monster-color-gray-6);--monster-bg-color-primary-4:var(--monster-color-gray-4)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-primary-1:var(--monster-color-gray-1);--monster-color-primary-2:var(--monster-color-gray-1);--monster-color-primary-3:var(--monster-color-gray-6);--monster-color-primary-4:var(--monster-color-gray-6);--monster-bg-color-primary-1:var(--monster-color-gray-6);--monster-bg-color-primary-2:var(--monster-color-gray-3);--monster-bg-color-primary-3:var(--monster-color-gray-2);--monster-bg-color-primary-4:var(--monster-color-gray-1)}}:after,:before,:root{--monster-color-secondary-1:var(--monster-color-red-4);--monster-color-secondary-2:var(--monster-color-red-4);--monster-color-secondary-3:var(--monster-color-red-1);--monster-color-secondary-4:var(--monster-color-red-1);--monster-bg-color-secondary-1:var(--monster-color-gray-1);--monster-bg-color-secondary-2:var(--monster-color-red-2);--monster-bg-color-secondary-3:var(--monster-color-red-3);--monster-bg-color-secondary-4:var(--monster-color-red-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-secondary-1:var(--monster-color-red-1);--monster-color-secondary-2:var(--monster-color-red-1);--monster-color-secondary-3:var(--monster-color-red-6);--monster-color-secondary-4:var(--monster-color-red-4);--monster-bg-color-secondary-1:var(--monster-color-gray-6);--monster-bg-color-secondary-2:var(--monster-color-red-3);--monster-bg-color-secondary-3:var(--monster-color-red-2);--monster-bg-color-secondary-4:var(--monster-color-red-1)}}:after,:before,:root{--monster-color-tertiary-1:var(--monster-color-magenta-4);--monster-color-tertiary-2:var(--monster-color-magenta-4);--monster-color-tertiary-3:var(--monster-color-magenta-6);--monster-color-tertiary-4:var(--monster-color-magenta-1);--monster-bg-color-tertiary-1:var(--monster-color-gray-1);--monster-bg-color-tertiary-2:var(--monster-color-magenta-1);--monster-bg-color-tertiary-3:var(--monster-color-magenta-2);--monster-bg-color-tertiary-4:var(--monster-color-magenta-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-tertiary-1:var(--monster-color-magenta-1);--monster-color-tertiary-2:var(--monster-color-magenta-6);--monster-color-tertiary-3:var(--monster-color-magenta-4);--monster-color-tertiary-4:var(--monster-color-magenta-4);--monster-bg-color-tertiary-1:var(--monster-color-gray-6);--monster-bg-color-tertiary-2:var(--monster-color-magenta-2);--monster-bg-color-tertiary-3:var(--monster-color-magenta-1);--monster-bg-color-tertiary-4:var(--monster-color-magenta-1)}}:after,:before,:root{--monster-color-destructive-1:var(--monster-color-red-1);--monster-color-destructive-2:var(--monster-color-red-4);--monster-color-destructive-3:var(--monster-color-red-6);--monster-color-destructive-4:var(--monster-color-red-1);--monster-bg-color-destructive-1:var(--monster-color-red-4);--monster-bg-color-destructive-2:var(--monster-color-gray-1);--monster-bg-color-destructive-3:var(--monster-color-red-2);--monster-bg-color-destructive-4:var(--monster-color-red-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-destructive-1:var(--monster-color-red-1);--monster-color-destructive-2:var(--monster-color-red-3);--monster-color-destructive-3:var(--monster-color-red-4);--monster-color-destructive-4:var(--monster-color-red-1);--monster-bg-color-destructive-1:var(--monster-color-red-5);--monster-bg-color-destructive-2:var(--monster-color-gray-6);--monster-bg-color-destructive-3:var(--monster-color-red-1);--monster-bg-color-destructive-4:var(--monster-color-red-4)}}:after,:before,:root{--monster-color-danger-1:var(--monster-color-raspberry-1);--monster-color-danger-2:var(--monster-color-raspberry-4);--monster-color-danger-3:var(--monster-color-raspberry-6);--monster-color-danger-4:var(--monster-color-raspberry-1);--monster-bg-color-danger-1:var(--monster-color-raspberry-4);--monster-bg-color-danger-2:var(--monster-color-gray-1);--monster-bg-color-danger-3:var(--monster-color-raspberry-2);--monster-bg-color-danger-4:var(--monster-color-raspberry-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-danger-1:var(--monster-color-raspberry-1);--monster-color-danger-2:var(--monster-color-raspberry-3);--monster-color-danger-3:var(--monster-color-raspberry-4);--monster-color-danger-4:var(--monster-color-raspberry-1);--monster-bg-color-danger-1:var(--monster-color-raspberry-5);--monster-bg-color-danger-2:var(--monster-color-gray-6);--monster-bg-color-danger-3:var(--monster-color-raspberry-1);--monster-bg-color-danger-4:var(--monster-color-raspberry-4)}}:after,:before,:root{--monster-color-success-1:var(--monster-color-green-1);--monster-color-success-2:var(--monster-color-green-4);--monster-color-success-3:var(--monster-color-green-6);--monster-color-success-4:var(--monster-color-green-1);--monster-bg-color-success-1:var(--monster-color-green-3);--monster-bg-color-success-2:var(--monster-color-gray-1);--monster-bg-color-success-3:var(--monster-color-green-2);--monster-bg-color-success-4:var(--monster-color-green-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-success-1:var(--monster-color-green-1);--monster-color-success-2:var(--monster-color-green-2);--monster-color-success-3:var(--monster-color-green-4);--monster-color-success-4:var(--monster-color-green-1);--monster-bg-color-success-1:var(--monster-color-green-5);--monster-bg-color-success-2:var(--monster-color-gray-6);--monster-bg-color-success-3:var(--monster-color-green-1);--monster-bg-color-success-4:var(--monster-color-green-3)}}:after,:before,:root{--monster-color-warning-1:var(--monster-color-orange-1);--monster-color-warning-2:var(--monster-color-orange-4);--monster-color-warning-3:var(--monster-color-orange-6);--monster-color-warning-4:var(--monster-color-orange-1);--monster-bg-color-warning-1:var(--monster-color-orange-3);--monster-bg-color-warning-2:var(--monster-color-gray-1);--monster-bg-color-warning-3:var(--monster-color-orange-2);--monster-bg-color-warning-4:var(--monster-color-orange-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-warning-1:var(--monster-color-orange-1);--monster-color-warning-2:var(--monster-color-orange-3);--monster-color-warning-3:var(--monster-color-orange-4);--monster-color-warning-4:var(--monster-color-orange-1);--monster-bg-color-warning-1:var(--monster-color-orange-5);--monster-bg-color-warning-2:var(--monster-color-gray-6);--monster-bg-color-warning-3:var(--monster-color-orange-1);--monster-bg-color-warning-4:var(--monster-color-orange-3)}}:after,:before,:root{--monster-color-error-1:var(--monster-color-red-1);--monster-color-error-2:var(--monster-color-red-4);--monster-color-error-3:var(--monster-color-red-6);--monster-color-error-4:var(--monster-color-red-1);--monster-bg-color-error-1:var(--monster-color-red-4);--monster-bg-color-error-2:var(--monster-color-gray-1);--monster-bg-color-error-3:var(--monster-color-red-2);--monster-bg-color-error-4:var(--monster-color-red-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-error-1:var(--monster-color-red-1);--monster-color-error-2:var(--monster-color-red-3);--monster-color-error-3:var(--monster-color-red-4);--monster-color-error-4:var(--monster-color-red-1);--monster-bg-color-error-1:var(--monster-color-red-5);--monster-bg-color-error-2:var(--monster-color-gray-6);--monster-bg-color-error-3:var(--monster-color-red-1);--monster-bg-color-error-4:var(--monster-color-red-4)}}:after,:before,:root{--monster-color-selection-1:var(--monster-color-gray-6);--monster-color-selection-2:var(--monster-color-gray-6);--monster-color-selection-3:var(--monster-color-gray-6);--monster-color-selection-4:var(--monster-color-gray-1);--monster-bg-color-selection-1:var(--monster-color-yellow-2);--monster-bg-color-selection-2:var(--monster-color-yellow-1);--monster-bg-color-selection-3:var(--monster-color-yellow-2);--monster-bg-color-selection-4:var(--monster-color-yellow-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-selection-1:var(--monster-color-gray-6);--monster-color-selection-2:var(--monster-color-gray-6);--monster-color-selection-3:var(--monster-color-gray-6);--monster-color-selection-4:var(--monster-color-gray-1);--monster-bg-color-selection-1:var(--monster-color-yellow-2);--monster-bg-color-selection-2:var(--monster-color-yellow-1);--monster-bg-color-selection-3:var(--monster-color-yellow-2);--monster-bg-color-selection-4:var(--monster-color-yellow-6)}}:after,:before,:root{--monster-color-primary-disabled-1:var(--monster-color-gray-4);--monster-color-primary-disabled-2:var(--monster-color-gray-4);--monster-color-primary-disabled-3:var(--monster-color-gray-4);--monster-color-primary-disabled-4:var(--monster-color-gray-4);--monster-bg-color-primary-disabled-1:var(--monster-color-gray-1);--monster-bg-color-primary-disabled-2:var(--monster-color-gray-2);--monster-bg-color-primary-disabled-3:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-4:var(--monster-color-gray-6);--monster-color-gradient-1:#833ab4;--monster-color-gradient-2:#fd1d1d;--monster-color-gradient-3:#fcb045}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-primary-disabled-1:var(--monster-color-gray-4);--monster-color-primary-disabled-2:var(--monster-color-gray-4);--monster-color-primary-disabled-3:var(--monster-color-gray-3);--monster-color-primary-disabled-4:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-1:var(--monster-color-gray-6);--monster-bg-color-primary-disabled-2:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-3:var(--monster-color-gray-2);--monster-bg-color-primary-disabled-4:var(--monster-color-gray-1);--monster-color-gradient-1:#ffe0b2;--monster-color-gradient-2:#ad8275;--monster-color-gradient-3:#771ba3}}:after,:before,:root{--monster-box-shadow-1:none;--monster-box-shadow-2:-1px 1px 10px 1px hsla(0,0%,76%,.61);--monster-text-shadow:none;--monster-theme-control-bg-color:var(--monster-color-seashell-1);--monster-theme-control-color:var(--monster-color-seashell-6);--monster-theme-control-hover-color:var(--monster-color-seashell-6);--monster-theme-control-hover-bg-color:var(--monster-color-seashell-2);--monster-theme-control-border-width:2px;--monster-theme-control-border-style:solid;--monster-theme-control-border-radius:0;--monster-theme-control-border-color:var(--monster-color-primary-1)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-theme-control-bg-color:var(--monster-color-gray-5);--monster-theme-control-color:var(--monster-color-gray-1);--monster-theme-control-border-color:var(--monster-color-gray-3);--monster-theme-control-hover-color:var(--monster-color-gray-1);--monster-theme-control-hover-bg-color:var(--monster-color-gray-6)}}:after,:before,:root{--monster-theme-on-color:var(--monster-color-green-1);--monster-theme-on-bg-color:var(--monster-color-green-5);--monster-theme-off-color:var(--monster-color-gray-1);--monster-theme-off-bg-color:var(--monster-color-gray-4)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-theme-on-color:var(--monster-color-gray-6);--monster-theme-on-bg-color:var(--monster-color-gray-1);--monster-theme-off-color:var(--monster-color-gray-1);--monster-theme-off-bg-color:var(--monster-color-gray-5)}}:after,:before,:root{--monster-border-style:solid;--monster-border-width:3px;--monster-border-radius:0;--monster-outline-width:1px;--monster-focus-ring-width:2px;--monster-focus-ring-style:solid;--monster-focus-ring-color:var(--monster-color-blue-4);--monster-focus-ring-offset:2px}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-focus-ring-color:var(--monster-color-yellow-2)}}:after,:before,:root{--monster-popper-witharrrow-distance:-4px;--monster-z-index-default:0;--monster-z-index-outline:10;--monster-z-index-dropdown:200;--monster-z-index-dropdown-overlay:210;--monster-z-index-sticky:300;--monster-z-index-sticky-overlay:310;--monster-z-index-fixed:400;--monster-z-index-fixed-overlay:410;--monster-z-index-modal-backdrop:500;--monster-z-index-modal-backdrop-overlay:510;--monster-z-index-offcanvas:600;--monster-z-index-offcanvas-overlay:610;--monster-z-index-modal:700;--monster-z-index-modal-overlay:710;--monster-z-index-popover:800;--monster-z-index-popover-overlay:810;--monster-z-index-tooltip:800;--monster-z-index-tooltip-overlay:910;--monster-space-0:0;--monster-space-1:2px;--monster-space-2:4px;--monster-space-3:6px;--monster-space-4:10px;--monster-space-5:16px;--monster-space-6:26px;--monster-space-7:42px;--monster-breakpoint-0:480px;--monster-breakpoint-4:480px;--monster-breakpoint-7:768px;--monster-breakpoint-9:992px;--monster-breakpoint-12:1200px;--monster-dragger-width:2px;--monster-dragger-handle-width:4px;--monster-dragger-handle-height:50px}[data-monster-role=control]{width:100%;box-sizing:border-box}[data-monster-role=control].flex{display:flex;flex-direction:row;align-items:center}:host{display:block;box-sizing:border-box}.visually-hidden{width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.visually-hidden:not(caption){position:absolute!important}.visually-hidden-focusable:not(:focus):not(:focus-within){width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.visually-hidden-focusable:not(:focus):not(:focus-within):not(caption){position:absolute!important}@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}button{background-color:var(
29
29
  --monster-button-background-color,var(--monster-bg-color-primary-1)
30
- );color:var(--monster-button-color,var(--monster-color-primary-1))}.monster-button-primary,button{width:-webkit-fill-available;width:-moz-available;width:stretch;font-size:1rem;font-weight:400;line-height:1.5;text-align:var(--monster-button-text-align,center);text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;border-width:var(--monster-button-border-width,var(--monster-border-width));border-radius:var(
30
+ );color:var(--monster-button-color,var(--monster-color-primary-1))}.monster-button-primary,button{box-sizing:border-box;width:-webkit-fill-available;width:-moz-available;width:stretch;font-size:1rem;font-weight:400;line-height:1.5;text-align:var(--monster-button-text-align,center);text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;border-width:var(--monster-button-border-width,var(--monster-border-width));border-radius:var(
31
31
  --monster-button-border-radius,var(--monster-border-radius)
32
32
  );border-style:var(--monster-button-border-style,var(--monster-border-style));box-shadow:var(--monster-button-box-shadow,var(--monster-box-shadow-1));min-height:var(
33
33
  --monster-button-min-block-size,var(--monster-control-min-block-size,auto)
@@ -43,7 +43,7 @@ try {
43
43
  --monster-button-background-color,var(--monster-bg-color-secondary-4)
44
44
  );border-color:var(
45
45
  --monster-button-border-color,var(--monster-bg-color-secondary-4)
46
- )}.monster-button-secondary,.monster-button-tertiary{width:-webkit-fill-available;width:-moz-available;width:stretch;font-size:1rem;font-weight:400;line-height:1.5;text-align:var(--monster-button-text-align,center);text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-shadow:var(--monster-button-box-shadow,var(--monster-box-shadow-1));min-height:var(
46
+ )}.monster-button-secondary,.monster-button-tertiary{box-sizing:border-box;width:-webkit-fill-available;width:-moz-available;width:stretch;font-size:1rem;font-weight:400;line-height:1.5;text-align:var(--monster-button-text-align,center);text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-shadow:var(--monster-button-box-shadow,var(--monster-box-shadow-1));min-height:var(
47
47
  --monster-button-min-block-size,var(--monster-control-min-block-size,auto)
48
48
  );padding:var(
49
49
  --monster-button-padding,var(--monster-control-padding-block,.375rem) var(--monster-control-padding-inline,.75rem)
@@ -59,7 +59,7 @@ try {
59
59
  --monster-button-background-color,var(--monster-bg-color-destructive-1)
60
60
  );border-color:var(
61
61
  --monster-button-border-color,var(--monster-bg-color-destructive-1)
62
- )}.monster-button-destructive,.monster-button-outline-primary{width:-webkit-fill-available;width:-moz-available;width:stretch;font-size:1rem;font-weight:400;line-height:1.5;text-align:var(--monster-button-text-align,center);text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-shadow:var(--monster-button-box-shadow,var(--monster-box-shadow-1));min-height:var(
62
+ )}.monster-button-destructive,.monster-button-outline-primary{box-sizing:border-box;width:-webkit-fill-available;width:-moz-available;width:stretch;font-size:1rem;font-weight:400;line-height:1.5;text-align:var(--monster-button-text-align,center);text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-shadow:var(--monster-button-box-shadow,var(--monster-box-shadow-1));min-height:var(
63
63
  --monster-button-min-block-size,var(--monster-control-min-block-size,auto)
64
64
  );padding:var(
65
65
  --monster-button-padding,var(--monster-control-padding-block,.375rem) var(--monster-control-padding-inline,.75rem)
@@ -75,7 +75,7 @@ try {
75
75
  --monster-button-background-color,var(--monster-color-secondary-4)
76
76
  );border-color:var(
77
77
  --monster-button-border-color,var(--monster-bg-color-secondary-4)
78
- )}.monster-button-outline-secondary,.monster-button-outline-tertiary{width:-webkit-fill-available;width:-moz-available;width:stretch;font-size:1rem;font-weight:400;line-height:1.5;text-align:var(--monster-button-text-align,center);text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-shadow:var(--monster-button-box-shadow,var(--monster-box-shadow-1));min-height:var(
78
+ )}.monster-button-outline-secondary,.monster-button-outline-tertiary{box-sizing:border-box;width:-webkit-fill-available;width:-moz-available;width:stretch;font-size:1rem;font-weight:400;line-height:1.5;text-align:var(--monster-button-text-align,center);text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-shadow:var(--monster-button-box-shadow,var(--monster-box-shadow-1));min-height:var(
79
79
  --monster-button-min-block-size,var(--monster-control-min-block-size,auto)
80
80
  );padding:var(
81
81
  --monster-button-padding,var(--monster-control-padding-block,.375rem) var(--monster-control-padding-inline,.75rem)
package/test/cases/components/datatable/mobile-layout.mjs CHANGED
@@ -148,19 +148,50 @@ describe("Datatable mobile layout", () => {
148
148
  expect(columnBarGenerated).to.include("min-width:24px");
149
149
  });
150
150
 
151
- it("keeps embedded pagination compact and touch friendly", () => {
151
+ it("keeps embedded pagination compact and visually aligned with regular pagination", () => {
152
152
  expect(embeddedPaginationSource).to.include("margin: 0");
153
153
  expect(embeddedPaginationSource).to.include("grid-template-columns:");
154
+ expect(embeddedPaginationSource).to.include("minmax(max-content, 1fr)");
154
155
  expect(embeddedPaginationSource).to.include(
155
156
  "var(--monster-control-min-block-size, 44px)",
156
157
  );
157
158
  expect(embeddedPaginationSource).to.include("min-width:");
158
- expect(embeddedPaginationSource).to.include("&::after");
159
159
  expect(embeddedPaginationSource).to.include(
160
- "border: 1px solid var(--monster-theme-control-border-color)",
160
+ "gap: var(--monster-space-1, 2px)",
161
161
  );
162
- expect(embeddedPaginationSource).not.to.include(
163
- "inset 0 0 0 1px",
162
+ expect(embeddedPaginationSource).to.include("overflow: visible");
163
+ expect(embeddedPaginationSource).to.include(
164
+ "border-width: var(",
165
+ );
166
+ expect(embeddedPaginationSource).to.include(
167
+ "--monster-button-border-radius",
168
+ );
169
+ expect(embeddedPaginationSource).to.include(
170
+ "background-color: var(--monster-bg-color-primary-4)",
171
+ );
172
+ expect(embeddedPaginationSource).to.include(
173
+ "padding: 0 var(--monster-space-2, 8px)",
174
+ );
175
+ expect(embeddedPaginationSource).to.include(
176
+ "--monster-embedded-pagination-summary-min-inline-size",
177
+ );
178
+ expect(embeddedPaginationSource).to.include("5rem");
179
+ expect(embeddedPaginationSource).to.include(
180
+ "font-variant-numeric: tabular-nums",
181
+ );
182
+ const compactSummaryStyles = embeddedPaginationSource.slice(
183
+ embeddedPaginationSource.indexOf(
184
+ '& ul.pagination-numbers-hidden [data-monster-role="pagination-summary"],',
185
+ ),
186
+ embeddedPaginationSource.indexOf(
187
+ '& ul.pagination-numbers-hidden [data-monster-role="pagination-item"]',
188
+ ),
189
+ );
190
+ expect(compactSummaryStyles).to.include(
191
+ "padding: 0 var(--monster-space-2, 8px)",
192
+ );
193
+ expect(compactSummaryStyles).to.include(
194
+ "--monster-embedded-pagination-summary-min-inline-size",
164
195
  );
165
196
  expect(embeddedPaginationSource).to.include(
166
197
  "background-color: var(--monster-bg-color-primary-disabled-1)",
@@ -169,6 +200,7 @@ describe("Datatable mobile layout", () => {
169
200
  "color: var(--monster-color-primary-disabled-1)",
170
201
  );
171
202
  expect(embeddedPaginationSource).to.include("opacity: 1");
203
+ expect(embeddedPaginationSource).not.to.include("&::after");
172
204
  expect(embeddedPaginationSource).not.to.include("@mixin viewport-7");
173
205
  });
174
206
 
@@ -186,18 +218,37 @@ describe("Datatable mobile layout", () => {
186
218
  expect(embeddedPaginationGenerated).to.include(
187
219
  "grid-template-columns:var(--monster-control-min-block-size,44px)",
188
220
  );
221
+ expect(embeddedPaginationGenerated).to.include(
222
+ "minmax(max-content,1fr)",
223
+ );
189
224
  expect(embeddedPaginationGenerated).to.include(
190
225
  "min-height:var(--monster-control-min-block-size,44px)",
191
226
  );
192
227
  expect(embeddedPaginationGenerated).to.include(
193
- "border:1px solid var(--monster-theme-control-border-color)",
228
+ "gap:var(--monster-space-1,2px)",
229
+ );
230
+ expect(embeddedPaginationGenerated).to.include("overflow:visible");
231
+ expect(embeddedPaginationGenerated).to.include(
232
+ "--monster-button-border-radius",
233
+ );
234
+ expect(embeddedPaginationGenerated).to.include(
235
+ "background-color:var(--monster-bg-color-primary-4)",
236
+ );
237
+ expect(embeddedPaginationGenerated).to.include(
238
+ "padding:0 var(--monster-space-2,8px)",
239
+ );
240
+ expect(embeddedPaginationGenerated).to.include(
241
+ "--monster-embedded-pagination-summary-min-inline-size,5rem",
242
+ );
243
+ expect(embeddedPaginationGenerated).to.include(
244
+ "font-variant-numeric:tabular-nums",
194
245
  );
195
246
  expect(embeddedPaginationGenerated).to.include(
196
247
  "background-color:var(--monster-bg-color-primary-disabled-1)",
197
248
  );
198
249
  expect(embeddedPaginationGenerated).to.include("opacity:1");
199
250
  expect(embeddedPaginationGenerated).not.to.include(
200
- "box-shadow:inset 0 0 0 1px",
251
+ "[data-monster-role=pagination] ul.pagination-compact:after",
201
252
  );
202
253
  });
203
254
  });
package/test/cases/components/datatable/pagination.mjs CHANGED
@@ -2,6 +2,7 @@
2
2
  import * as chai from 'chai';
3
3
  import {chaiDom} from "../../../util/chai-dom.mjs";
4
4
  import {initJSDOM} from "../../../util/jsdom.mjs";
5
+ import {currentSupportedLanguages} from "../../../../source/i18n/map/languages.mjs";
5
6
 
6
7
  let expect = chai.expect;
7
8
  chai.use(chaiDom);
@@ -9,6 +10,29 @@ chai.use(chaiDom);
9
10
  let Pagination;
10
11
  let EmbeddedPagination;
11
12
 
13
+ const expectedSummaries = {
14
+ en: "${current} of ${max}",
15
+ de: "Seite ${current} von ${max}",
16
+ es: "Página ${current} de ${max}",
17
+ zh: "第 ${current} 页，共 ${max} 页",
18
+ hi: "पृष्ठ ${current} / ${max}",
19
+ bn: "পৃষ্ঠা ${current} / ${max}",
20
+ pt: "Página ${current} de ${max}",
21
+ ru: "Страница ${current} из ${max}",
22
+ ja: "${max} ページ中 ${current} ページ",
23
+ pa: "ਪੰਨਾ ${current} / ${max}",
24
+ mr: "पृष्ठ ${current} / ${max}",
25
+ fr: "Page ${current} sur ${max}",
26
+ it: "Pagina ${current} di ${max}",
27
+ nl: "Pagina ${current} van ${max}",
28
+ sv: "Sida ${current} av ${max}",
29
+ pl: "Strona ${current} z ${max}",
30
+ da: "Side ${current} af ${max}",
31
+ fi: "Sivu ${current} / ${max}",
32
+ no: "Side ${current} av ${max}",
33
+ cs: "Stránka ${current} z ${max}",
34
+ };
35
+
12
36
  describe('Pagination', function () {
13
37
  this.timeout(10000);
14
38
 
@@ -27,6 +51,61 @@ describe('Pagination', function () {
27
51
  afterEach(() => {
28
52
  let mocks = document.getElementById('mocks');
29
53
  mocks.innerHTML = "";
54
+ document.documentElement.lang = "en";
55
+ });
56
+
57
+ it('provides pagination labels for every supported language', function () {
58
+ expect(Object.keys(expectedSummaries)).to.have.members(currentSupportedLanguages);
59
+
60
+ for (const language of currentSupportedLanguages) {
61
+ document.documentElement.lang = language;
62
+ const control = document.createElement('monster-pagination');
63
+ const labels = control.getOption('labels');
64
+
65
+ expect(labels.summary, language).to.equal(expectedSummaries[language]);
66
+ for (const name of ['page', 'description', 'previous', 'next', 'of']) {
67
+ expect(labels[name], `${language}.${name}`).to.be.a('string').and.not.empty;
68
+ }
69
+ }
70
+ });
71
+
72
+ it('uses canonical ISO language codes and falls back to English', function () {
73
+ for (const [locale, expected] of [
74
+ ['es-MX', expectedSummaries.es],
75
+ ['da-DK', expectedSummaries.da],
76
+ ['sv-SE', expectedSummaries.sv],
77
+ ['sp', expectedSummaries.en],
78
+ ['dk', expectedSummaries.en],
79
+ ['sw', expectedSummaries.en],
80
+ ['eo', expectedSummaries.en],
81
+ ]) {
82
+ document.documentElement.lang = locale;
83
+ const control = document.createElement('monster-pagination');
84
+ expect(control.getOption('labels.summary'), locale).to.equal(expected);
85
+ }
86
+ });
87
+
88
+ it('formats a custom pagination summary label', function (done) {
89
+ const mocks = document.getElementById('mocks');
90
+ const control = document.createElement('monster-pagination');
91
+ mocks.appendChild(control);
92
+
93
+ setTimeout(() => {
94
+ try {
95
+ control.setOption('labels.summary', 'Result ${current} / ${max}');
96
+ control.setPaginationState({currentPage: 2, totalPages: 7});
97
+
98
+ expect(control.getOption('pagination.summary')).to.equal('Result 2 / 7');
99
+ expect(
100
+ control.shadowRoot.querySelector(
101
+ '[data-monster-role=pagination-summary] span'
102
+ ).textContent
103
+ ).to.equal('Result 2 / 7');
104
+ done();
105
+ } catch (error) {
106
+ done(error);
107
+ }
108
+ }, 0);
30
109
  });
31
110
 
32
111
  it('normalizes NaN and avoids NaN hrefs', function (done) {
package/test/cases/components/style/button-sizing.mjs ADDED
@@ -0,0 +1,31 @@
1
+ import { readFileSync } from "node:fs";
2
+ import { expect } from "chai";
3
+
4
+ const buttonMixin = readFileSync(
5
+ new URL(
6
+ "../../../../source/components/style/mixin/button.pcss",
7
+ import.meta.url,
8
+ ),
9
+ "utf8",
10
+ );
11
+ const generatedStyleSheet = readFileSync(
12
+ new URL(
13
+ "../../../../source/components/stylesheet/button.mjs",
14
+ import.meta.url,
15
+ ),
16
+ "utf8",
17
+ );
18
+
19
+ describe("Button class sizing", () => {
20
+ it("includes padding and borders in the configured control height", () => {
21
+ expect(buttonMixin).to.match(
22
+ /@define-mixin button \{[\s\S]*?box-sizing: border-box;/u,
23
+ );
24
+ });
25
+
26
+ it("keeps the generated button stylesheet synchronized", () => {
27
+ expect(generatedStyleSheet).to.match(
28
+ /\.monster-button-destructive,\.monster-button-outline-primary\{[^}]*box-sizing:border-box;/u,
29
+ );
30
+ });
31
+ });
package/test/cases/components/style/form-controls.mjs CHANGED
@@ -11,6 +11,19 @@ const generatedStyleSheet = readFileSync(
11
11
  );
12
12
 
13
13
  describe("Global form controls", () => {
14
+ it("preserves native readonly styling across shadow tree scopes", () => {
15
+ expect(formSource).to.match(
16
+ /input\[readonly\]:not\(\[type="checkbox"\]\):not\(\[type="radio"\]\),\s*textarea\[readonly\] \{[^}]*background-color: var\(--monster-bg-color-primary-2\);[^}]*color: var\(--monster-color-primary-2\);[^}]*cursor: default;/s,
17
+ );
18
+ expect(formSource).to.include(":not([readonly]):not([disabled])");
19
+ expect(generatedStyleSheet).to.include(
20
+ "input[readonly]:not([type=checkbox]):not([type=radio]),textarea[readonly]",
21
+ );
22
+ expect(generatedStyleSheet).to.include(
23
+ "background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2);cursor:default",
24
+ );
25
+ });
26
+
14
27
  it("keeps native choice controls separate from text-control sizing", () => {
15
28
  expect(formSource).to.include(
16
29
  'input:not([type="checkbox"]):not([type="radio"]),',