@schukai/monster 4.148.9 → 4.149.1

package/source/components/datatable/style/datatable.pcss

@@ -89,13 +89,19 @@
     box-sizing: border-box;
 
     & > div {
-        padding: 0.4rem 0.2rem;
+        padding: var(--monster-datatable-cell-padding, 0.4rem 0.2rem);
         @mixin text;
         display: flex;
         align-items: center;
         justify-content: flex-start;
         line-height: 1.2;
-        border-bottom: 1px dashed var(--monster-theme-control-border-color);
+        border-bottom:
+            var(--monster-datatable-row-border-width, 1px)
+            var(--monster-datatable-row-border-style, dashed)
+            var(
+                --monster-datatable-row-border-color,
+                var(--monster-theme-control-border-color)
+            );
         box-sizing: border-box;
         min-width: 0;
         overflow: auto;
@@ -182,13 +188,16 @@
     & > div {
         @mixin text;
         font-weight: bold;
-        padding: 0.3rem 0.2rem;
+        padding: var(--monster-datatable-header-cell-padding, 0.3rem 0.2rem);
         position: relative;
         display: flex;
         align-items: center;
         justify-content: flex-start; 
         overflow: visible; 
-        padding-right: 28px;
+        padding-right: var(
+            --monster-datatable-header-cell-padding-inline-end,
+            28px
+        );
 
         & a[data-monster-sortable] {
             flex-grow: 1;
@@ -322,18 +331,106 @@ monster-state[data-monster-role=empty-without-action]::part(action) {
     }
 
     & [data-monster-role="table-container"] {
+        padding: 0.75rem;
 
         & .bar {
+            --monster-datatable-utility-action-size: 2.25rem;
+            align-items: stretch;
+            column-gap: 0;
             display: flex;
-            align-items: flex-end;
-            flex-direction: column-reverse;
-            gap: 0.1rem;
+            flex-flow: row wrap;
+            row-gap: 0.5rem;
+
+            & > slot[name="bar"]::slotted(*) {
+                flex: 1 0 100%;
+                min-width: 0;
+                order: 1;
+                width: 100%;
+            }
+
+            & > [data-monster-role="copy-all"] {
+                align-items: center;
+                background-color: var(--monster-theme-control-bg-color);
+                border: 1px solid var(--monster-theme-control-border-color);
+                border-radius: var(--monster-theme-control-border-radius);
+                box-sizing: border-box;
+                color: var(--monster-theme-control-color);
+                display: flex;
+                flex: 0 0 var(--monster-datatable-utility-action-size);
+                font-size: 0;
+                height: var(--monster-datatable-utility-action-size);
+                justify-content: center;
+                margin-inline-start: auto;
+                min-height: var(--monster-datatable-utility-action-size);
+                min-width: var(--monster-datatable-utility-action-size);
+                order: 2;
+                padding: 0;
+                text-align: center;
+                text-decoration: none;
+                width: var(--monster-datatable-utility-action-size);
+            }
+
+            & > [data-monster-role="copy-all"]::after {
+                margin: 0;
+            }
+
+            & > [data-monster-role="copy-all"]:hover {
+                background-color: var(--monster-theme-control-hover-bg-color);
+                color: var(--monster-theme-control-hover-color);
+            }
+
+            & > monster-column-bar {
+                flex: 0 0 var(--monster-datatable-utility-action-size);
+                height: var(--monster-datatable-utility-action-size);
+                min-width: var(--monster-datatable-utility-action-size);
+                order: 3;
+                width: var(--monster-datatable-utility-action-size);
+            }
+
+            & > monster-context-help {
+                flex: 0 0 var(--monster-datatable-utility-action-size);
+                height: var(--monster-datatable-utility-action-size);
+                margin: 0;
+                min-height: var(--monster-datatable-utility-action-size);
+                order: 4;
+                width: var(--monster-datatable-utility-action-size);
+            }
+
+            & > monster-context-help::part(control) {
+                height: 100%;
+            }
+
+            & > monster-context-help::part(button) {
+                align-items: center;
+                background-color: var(--monster-theme-control-bg-color);
+                border: 1px solid var(--monster-theme-control-border-color);
+                border-radius: var(--monster-theme-control-border-radius);
+                box-sizing: border-box;
+                color: var(--monster-theme-control-color);
+                cursor: pointer;
+                display: flex;
+                height: 100%;
+                justify-content: center;
+                min-height: var(--monster-datatable-utility-action-size);
+                width: 100%;
+            }
         }
 
         & [data-monster-head]:before {
-            font-weight: bold;
-            margin-right: 10px;
             content: attr(data-monster-head);
+            color: var(
+                --monster-theme-text-muted,
+                var(--monster-color-primary-2)
+            );
+            font-size: 0.75rem;
+            font-weight: 600;
+            letter-spacing: 0.04em;
+            line-height: 1.35;
+            max-inline-size: 100%;
+            min-inline-size: 0;
+            overflow-wrap: anywhere;
+            text-transform: uppercase;
+            white-space: normal;
         }
 
         @for $i from 0 to 500 {
@@ -344,32 +441,163 @@ monster-state[data-monster-role=empty-without-action]::part(action) {
     }
 
     & ::slotted(.monster-button-group) {
-        display: flex;
-        flex-direction: column !important;
+        align-items: stretch;
+        display: grid;
+        gap: 0.5rem;
+        grid-template-columns: 1fr;
+        width: 100%;
     }
-}
-
-[data-monster-role=control].small {
 
-    ::slotted(.monster-button-group) {
-        align-items: flex-end;
+    & [data-monster-role="table-scroll"] {
+        overflow-x: visible;
+        padding-bottom: 1rem;
     }
 
-    [data-monster-role=datatable] > div {
-        display: flex;
-        align-items: flex-start;
-        justify-content: flex-start;
+    & [data-monster-role=datatable] {
+        container-name: monster-datatable-responsive;
+        container-type: inline-size;
+        gap: 0;
+
+        & > div {
+            background-color: var(
+                --monster-theme-control-bg-color,
+                var(--monster-bg-color-primary-1)
+            );
+            border: 0;
+            border-bottom: 1px solid var(--monster-theme-control-border-color);
+            border-left: 1px solid var(--monster-theme-control-border-color);
+            border-right: 1px solid var(--monster-theme-control-border-color);
+            display: grid;
+            gap: 0.35rem 0.75rem;
+            grid-template-columns:
+                minmax(5.5rem, 0.35fr)
+                minmax(0, 1fr);
+            justify-content: stretch;
+            min-height: 2.75rem;
+            overflow: visible;
+            padding: 0.625rem 0.75rem;
+            white-space: normal;
+            word-break: break-word;
 
-        &.start {
-            justify-content: flex-start;
-        }
+            &.start,
+            &.end,
+            &.center {
+                justify-content: stretch;
+            }
 
-        &.end {
-            justify-content: flex-start;
-        }
+            &[data-monster-datatable-row-start] {
+                border-radius:
+                    var(--monster-theme-control-border-radius)
+                    var(--monster-theme-control-border-radius)
+                    0
+                    0;
+                border-top: 1px solid var(--monster-theme-control-border-color);
+                margin-top: 0.75rem;
+            }
 
-        &.center {
-            justify-content: flex-start;
+            &[data-monster-datatable-row-end] {
+                border-radius:
+                    0
+                    0
+                    var(--monster-theme-control-border-radius)
+                    var(--monster-theme-control-border-radius);
+                margin-bottom: 0.75rem;
+            }
+
+            &[data-monster-datatable-row-start][data-monster-datatable-row-end] {
+                border-radius: var(--monster-theme-control-border-radius);
+            }
+
+            &[data-monster-features~="select"] {
+                align-items: center;
+                background-color: var(
+                    --monster-theme-surface-subtle,
+                    var(--monster-bg-color-primary-2)
+                );
+                display: flex;
+                min-height: max(
+                    2.75rem,
+                    var(--monster-control-min-block-size, 44px)
+                );
+            }
+
+            &:has(
+                :is(
+                    monster-button,
+                    monster-button-bar,
+                    monster-action-button,
+                    monster-select,
+                    monster-filter-select,
+                    select[multiple]
+                )
+            ) {
+                grid-template-columns: minmax(0, 1fr);
+            }
+
+            & :is(
+                monster-select,
+                monster-filter-select,
+                select[multiple]
+            ) {
+                box-sizing: border-box;
+                display: block;
+                max-width: 100%;
+                min-width: 0;
+                width: 100%;
+            }
+
+            & :is(monster-button-bar, .monster-button-group) {
+                --monster-button-bar-gap: 0;
+                --monster-button-bar-item-spacing: 0;
+                --monster-control-bar-button-inline-size: 100%;
+                --monster-control-bar-height: max(2.75rem, 44px);
+                --monster-control-bar-item-flex: 1 1 0;
+                --monster-control-bar-slot-flex: 1 1 auto;
+                box-sizing: border-box;
+                display: flex;
+                flex-wrap: wrap;
+                gap: 0;
+                max-width: 100%;
+                min-width: 0;
+                width: 100%;
+            }
+
+            & :is(monster-button, monster-action-button, button, [role=button]) {
+                box-sizing: border-box;
+                flex: 1 1 8rem;
+                min-height: max(
+                    2.75rem,
+                    var(--monster-control-min-block-size, 44px)
+                );
+                min-width: 0;
+            }
+
+            & > :is(monster-button, monster-action-button) {
+                display: block;
+                width: 100%;
+            }
+
+            &.selected {
+                background-color: var(--monster-bg-color-selection-2);
+                color: var(--monster-color-selection-2);
+            }
         }
     }
-} 
+}
+
+@media (pointer: coarse) {
+    [data-monster-role="control"].small
+    [data-monster-role="table-container"]
+    .bar {
+        --monster-datatable-utility-action-size:
+            var(--monster-control-min-block-size, 44px);
+    }
+}
+
+@container monster-datatable-responsive (max-width: 26rem) {
+    [data-monster-role="control"].small
+    [data-monster-role=datatable]
+    > div {
+        grid-template-columns: minmax(0, 1fr);
+    }
+}

package/source/components/datatable/style/embedded-pagination.pcss

@@ -11,9 +11,12 @@
 
 [data-monster-role=pagination] {
     @mixin text;
+    align-items: center;
     display: flex;
     justify-content: center;
     box-sizing: border-box;
+    min-height: var(--monster-control-min-block-size, 44px);
+    width: 100%;
 
     & ul {
         display: flex;
@@ -23,8 +26,8 @@
         list-style: none;
 
         padding-left: 0;
-        margin: 20px 0;
-        
+        margin: 0;
+        width: 100%;
 
     }
 
@@ -39,14 +42,38 @@
         visibility: hidden;
     }
 
-    & ul.pagination-numbers-hidden {
-        justify-content: space-between;
-        gap: 0.5rem;
+    & ul.pagination-numbers-hidden,
+    & ul.pagination-compact {
+        align-items: center;
+        background-color: transparent;
+        border-radius: 0;
+        display: grid;
+        gap: var(--monster-space-1, 2px);
+        grid-template-columns:
+            var(--monster-control-min-block-size, 44px)
+            minmax(max-content, 1fr)
+            var(--monster-control-min-block-size, 44px);
+        justify-content: stretch;
+        overflow: visible;
+        width: 100%;
     }
 
-    & ul.pagination-compact {
-        justify-content: space-between;
-        gap: 0.5rem;
+    & ul.pagination-numbers-hidden li[data-monster-role="pagination-prev"],
+    & ul.pagination-compact li[data-monster-role="pagination-prev"] {
+        grid-column: 1;
+        justify-self: start;
+    }
+
+    & ul.pagination-numbers-hidden li[data-monster-role="pagination-summary"],
+    & ul.pagination-compact li[data-monster-role="pagination-summary"] {
+        grid-column: 2;
+        justify-self: stretch;
+    }
+
+    & ul.pagination-numbers-hidden li[data-monster-role="pagination-next"],
+    & ul.pagination-compact li[data-monster-role="pagination-next"] {
+        grid-column: 3;
+        justify-self: end;
     }
 
     & ul li {
@@ -61,13 +88,32 @@
         
 
         & a, & a:link, & a:visited, & a:hover, & a:active, & a:focus {
-            width: max-content;
+            align-items: center;
+            box-sizing: border-box;
             color: var(--monster-theme-control-color);
-            background-color: var(--monster-theme-control-bg-color);
+            background-color: var(--monster-bg-color-primary-1);
+            border-color: var(--monster-bg-color-primary-1);
+            border-radius: var(
+                --monster-button-border-radius,
+                var(--monster-border-radius)
+            );
+            border-style: var(
+                --monster-button-border-style,
+                var(--monster-border-style)
+            );
+            border-width: var(
+                --monster-button-border-width,
+                var(--monster-border-width)
+            );
+            display: flex;
+            justify-content: center;
+            min-height: var(--monster-control-min-block-size, 44px);
+            min-width: var(--monster-control-min-block-size, 44px);
             text-decoration: none;
             outline: none;
-            padding: 0 0.4rem;
+            padding: 0 0.5rem;
             white-space: nowrap;
+            width: 100%;
         }
 
         & a:hover, & a:active, & a:focus {
@@ -88,21 +134,27 @@
 
         & a.current {
             cursor: unset;
-            color: var(--monster-color-primary-3);
-            background-color: var(--monster-bg-color-primary-3);
+            color: var(--monster-color-primary-4);
+            background-color: var(--monster-bg-color-primary-4);
+            border-color: var(--monster-bg-color-primary-4);
         }
 
         & a.disabled {
+            background-color: var(--monster-bg-color-primary-disabled-1);
+            border-color: var(--monster-bg-color-primary-1);
+            color: var(--monster-color-primary-disabled-1);
             cursor: not-allowed;
+            opacity: 1;
+            pointer-events: none;
         }
     }
 
     & ul.pagination-compact li {
-        padding: 0 4px;
+        padding: 0;
     }
 
     & ul.pagination-numbers-hidden li {
-        padding: 0 6px;
+        padding: 0;
     }
 
     & ul.pagination-numbers-hidden li {
@@ -114,9 +166,10 @@
     }
 
     & [data-monster-role="pagination-summary"] {
+        align-items: center;
         display: none;
-        padding: 0 6px;
-        font-size: 0.75rem;
+        min-height: var(--monster-control-min-block-size, 44px);
+        font-size: 0.8125rem;
         white-space: nowrap;
         text-align: center;
         flex: 1 1 auto;
@@ -124,12 +177,30 @@
         align-items: center;
     }
 
-    & ul.pagination-numbers-hidden [data-monster-role="pagination-summary"] {
-        border-left: none;
-    }
-
+    & ul.pagination-numbers-hidden [data-monster-role="pagination-summary"],
     & ul.pagination-compact [data-monster-role="pagination-summary"] {
-        border-left: none;
+        background-color: var(--monster-bg-color-primary-4);
+        border-color: var(--monster-bg-color-primary-4);
+        border-radius: var(
+            --monster-button-border-radius,
+            var(--monster-border-radius)
+        );
+        border-style: var(
+            --monster-button-border-style,
+            var(--monster-border-style)
+        );
+        border-width: var(
+            --monster-button-border-width,
+            var(--monster-border-width)
+        );
+        box-sizing: border-box;
+        color: var(--monster-color-primary-4);
+        font-variant-numeric: tabular-nums;
+        min-inline-size: var(
+            --monster-embedded-pagination-summary-min-inline-size,
+            5rem
+        );
+        padding: 0 var(--monster-space-2, 8px);
     }
 
     & ul.pagination-numbers-hidden [data-monster-role="pagination-item"] {
@@ -146,27 +217,6 @@
         }
     }
 
-    @mixin viewport-7 {
-
-        & ul li {
-            padding: 0 2px;
-        }
-
-        & ul li:nth-child(1) {
-            display: none;
-        }
-
-        & ul li:nth-child(2) {
-            display: none;
-        }
-
-        & ul li:nth-child(3) {
-            border-left: none;
-        }
-
-    }
-
-
 }
 
 

package/source/components/datatable/style/filter-button.pcss

@@ -7,7 +7,7 @@
 [data-monster-role="control"] {
     width: max-content;
 
-    & a {
+    & button {
         display: flex;
         align-items: center;
         background: none;

package/source/components/datatable/style/filter-controls-defaults.pcss

@@ -14,15 +14,33 @@ div[data-monster-role=control] {
     display: flex;
 
     & .form-container {
-        max-width: 600px;
-        margin: 0 auto;
+        box-sizing: border-box;
+        inline-size: 100%;
         
         /** this value is from the form mixin */
         & .form-group {
+            align-items: center;
+            display: grid;
+            gap: 0.5rem;
+            grid-template-columns:
+                auto
+                minmax(5rem, auto)
+                minmax(8rem, 1fr)
+                minmax(7rem, 0.75fr);
             margin-bottom: 0.2rem;
+
+            &[data-monster-range-type="from-to"] {
+                grid-template-columns:
+                    auto
+                    auto
+                    minmax(8rem, 1fr)
+                    auto
+                    minmax(8rem, 1fr);
+            }
             
             & input[type=number] {
-                width: 5rem;
+                min-width: 0;
+                width: 100%;
                 text-align: right;
               
             }
@@ -47,5 +65,33 @@ div[data-monster-role=control] {
 
 
 [data-monster-role="popper"] {
+    box-sizing: border-box;
+    inline-size: min(34rem, calc(100vw - 2rem));
+    max-inline-size: calc(100vw - 2rem);
+    overflow: auto;
     position: absolute;
 }
+
+@media (max-width: 36rem) {
+    div[data-monster-role=control] .form-container .form-group,
+    div[data-monster-role=control]
+        .form-container
+        .form-group[data-monster-range-type="from-to"] {
+        grid-template-columns: auto minmax(0, 1fr);
+    }
+
+    div[data-monster-role=control]
+        .form-container
+        .form-group
+        > :is(input:not([type="radio"]):not([type="hidden"]), select) {
+        grid-column: 2 / -1;
+        width: 100%;
+    }
+
+    div[data-monster-role=control]
+        .form-container
+        .form-group
+        > label:not(:first-of-type) {
+        grid-column: 2 / -1;
+    }
+}

package/source/components/datatable/style/filter-select.pcss

@@ -26,11 +26,14 @@
 
 /** fix for the control */
 [data-monster-role="option-control"] {
+    height: var(--monster-select-option-control-size, 1rem);
     margin-right: 8px;
+    min-height: var(--monster-select-option-control-size, 1rem);
+    min-width: var(--monster-select-option-control-size, 1rem);
+    width: var(--monster-select-option-control-size, 1rem);
 }
 
 
 [data-monster-role="container"] {
     display: flex;
 }
-

package/source/components/datatable/style/filter.pcss

@@ -36,16 +36,33 @@
     & monster-input-group::part(control) {
         height: 100%;
         align-items: stretch;
+        min-block-size: calc(
+            var(--monster-control-min-block-size, 2.75rem) -
+            (2 * var(--monster-theme-control-border-width, 1px))
+        );
     }
 
     & monster-input-group [data-monster-role=operator] {
+        box-sizing: border-box;
         height: 100%;
+        min-block-size: calc(
+            var(--monster-control-min-block-size, 2.75rem) -
+            (2 * var(--monster-theme-control-border-width, 1px))
+        );
         align-self: stretch;
         border: none;
-        background-color: var(--monster-theme-control-bg-color);
+        background-color: transparent;
         color: var(--monster-theme-control-color);
     }
 
+    & monster-input-group [data-monster-role=query] {
+        box-sizing: border-box;
+        min-block-size: calc(
+            var(--monster-control-min-block-size, 2.75rem) -
+            (2 * var(--monster-theme-control-border-width, 1px))
+        );
+    }
+
     & [data-monster-role=layout] {
 
         & [data-monster-role="remove-badges"] {