@schukai/monster 4.148.8 → 4.149.0

package/source/components/datatable/style/column-bar.pcss

@@ -28,30 +28,71 @@
         & li {
             list-style: none;
             padding: 0;
-            margin: 0 5px 0 0;
+            margin: 0;
             display: flex;
             background-clip: border-box;
 
-            & .is-visible {
-                mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3C/svg%3E");
-                background-color: var(--monster-bg-color-primary-4);
-                background-repeat: no-repeat no-repeat;
-                background-position: center center;
-                background-size: cover;
-
-                width: 8px;
-                height: 8px;
-            }
-
-            & .is-hidden {
-                mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3C/svg%3E");
-                background-color: var(--monster-bg-color-primary-4);
-                background-repeat: no-repeat no-repeat;
-                background-position: center center;
-                background-size: cover;
-                width: 8px;
-                height: 8px;
-            }
+			& .is-visible {
+				background: transparent;
+				border: 0;
+				box-shadow: none;
+				cursor: pointer;
+				height:
+					var(
+						--monster-column-toggle-target-block-size,
+						var(--monster-column-toggle-target-size, 24px)
+					);
+				padding: 0;
+				width:
+					var(
+						--monster-column-toggle-target-inline-size,
+						var(--monster-column-toggle-target-size, 16px)
+					);
+			}
+
+			& .is-hidden {
+				background: transparent;
+				border: 0;
+				box-shadow: none;
+				cursor: pointer;
+				height:
+					var(
+						--monster-column-toggle-target-block-size,
+						var(--monster-column-toggle-target-size, 24px)
+					);
+				padding: 0;
+				width:
+					var(
+						--monster-column-toggle-target-inline-size,
+						var(--monster-column-toggle-target-size, 16px)
+					);
+			}
+
+			& .is-visible::before,
+			& .is-hidden::before {
+				background-color: var(--monster-bg-color-primary-4);
+				content: "";
+				display: block;
+				height: 8px;
+				margin: auto;
+				mask-position: center;
+				mask-repeat: no-repeat;
+				mask-size: 8px 8px;
+				width: 8px;
+			}
+
+			& .is-visible::before {
+				mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3C/svg%3E");
+			}
+
+			& .is-hidden::before {
+				mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3C/svg%3E");
+			}
+
+			& .is-visible:focus-visible,
+			& .is-hidden:focus-visible {
+				outline-offset: 0;
+			}
 
             & :hover, & :focus {
                 background-clip: border-box;
@@ -92,6 +133,7 @@
             align-items: center;
             justify-content: flex-start;
             margin: 0;
+            min-height: var(--monster-column-settings-target-size, 24px);
             padding: 0;
             cursor: pointer;
 
@@ -138,15 +180,65 @@
     }
 }
 
+@media (pointer: coarse) {
+	[data-monster-role=control] [data-monster-role=dots] li {
+		& .is-visible,
+		& .is-hidden {
+			min-height: 24px;
+			min-width: 24px;
+		}
+	}
+}
+
 :host(.small) {
+    --monster-datatable-utility-action-size: 2.25rem;
+    height: var(--monster-datatable-utility-action-size);
+    min-width: var(--monster-datatable-utility-action-size);
+    width: var(--monster-datatable-utility-action-size);
+
     [data-monster-role=control] {
+        align-items: stretch;
         flex-direction: column;
-        align-items: flex-end;
-        gap: 0.5rem;
+        gap: 0;
+        min-width: var(--monster-datatable-utility-action-size);
+        width: var(--monster-datatable-utility-action-size);
 
         & [data-monster-role="dots"] {
+            display: none;
+        }
+
+        & a[data-monster-role=settings-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);
+            font-size: 0;
+            height: var(--monster-datatable-utility-action-size);
+            justify-content: center;
+            min-height: var(--monster-datatable-utility-action-size);
+            min-width: var(--monster-datatable-utility-action-size);
+            padding: 0;
+            text-align: center;
+            text-decoration: none;
+            width: var(--monster-datatable-utility-action-size);
+        }
+
+        & a[data-monster-role=settings-button]::after {
             margin: 0;
         }
 
+        & a[data-monster-role=settings-button]:hover {
+            background-color: var(--monster-theme-control-hover-bg-color);
+            color: var(--monster-theme-control-hover-color);
+        }
+    }
+}
+
+@media (pointer: coarse) {
+    :host(.small) {
+        --monster-datatable-utility-action-size:
+            var(--monster-control-min-block-size, 44px);
     }
 }

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,49 @@
         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: var(--monster-theme-control-bg-color);
+        border-radius: var(--monster-theme-control-border-radius);
+        display: grid;
+        gap: 0.25rem;
+        grid-template-columns:
+            var(--monster-control-min-block-size, 44px)
+            minmax(0, 1fr)
+            var(--monster-control-min-block-size, 44px);
+        justify-content: stretch;
+        overflow: hidden;
+        position: relative;
+        width: 100%;
+
+        &::after {
+            border: 1px solid var(--monster-theme-control-border-color);
+            border-radius: inherit;
+            box-sizing: border-box;
+            content: "";
+            inset: 0;
+            pointer-events: none;
+            position: absolute;
+        }
+    }
+
+    & 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-compact {
-        justify-content: space-between;
-        gap: 0.5rem;
+    & 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 +99,19 @@
         
 
         & 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);
+            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: max-content;
         }
 
         & a:hover, & a:active, & a:focus {
@@ -93,16 +137,20 @@
         }
 
         & a.disabled {
+            background-color: var(--monster-bg-color-primary-disabled-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 +162,11 @@
     }
 
     & [data-monster-role="pagination-summary"] {
+        align-items: center;
         display: none;
+        min-height: var(--monster-control-min-block-size, 44px);
         padding: 0 6px;
-        font-size: 0.75rem;
+        font-size: 0.8125rem;
         white-space: nowrap;
         text-align: center;
         flex: 1 1 auto;
@@ -146,27 +196,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;