@schukai/monster 4.148.9 → 4.149.1

package/source/components/datatable/pagination.mjs

@@ -95,8 +95,8 @@ const lastNavClickTargetSymbol = Symbol("lastNavClickTarget");
 
 const minNavDoubleClickDelayMs = 200;
 
-const compactPrevIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0m3.5 7.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5z"/></svg>`;
-const compactNextIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0M4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5z"/></svg>`;
+const compactPrevIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0"/></svg>`;
+const compactNextIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 0 0 .708L10.293 8l-5.647 5.646a.5.5 0 0 0 .708.708l6-6a.5.5 0 0 0 0-.708l-6-6a.5.5 0 0 0-.708 0"/></svg>`;
 
 /**
  * A Pagination component
@@ -470,24 +470,96 @@ function getTranslations() {
 				of: "von",
 				summary: "Seite ${current} von ${max}",
 			};
-		case "fr":
+		case "es":
 			return {
 				page: "${page}",
-				description: "Page ${page}",
-				previous: "Précédent",
-				next: "Suivant",
+				description: "Página ${page}",
+				previous: "Anterior",
+				next: "Siguiente",
 				of: "de",
-				summary: "Page ${current} sur ${max}",
+				summary: "Página ${current} de ${max}",
 			};
-		case "sp":
+		case "zh":
+			return {
+				page: "${page}",
+				description: "第 ${page} 页",
+				previous: "上一页",
+				next: "下一页",
+				of: "共",
+				summary: "第 ${current} 页，共 ${max} 页",
+			};
+		case "hi":
+			return {
+				page: "${page}",
+				description: "पृष्ठ ${page}",
+				previous: "पिछला",
+				next: "अगला",
+				of: "में से",
+				summary: "पृष्ठ ${current} / ${max}",
+			};
+		case "bn":
+			return {
+				page: "${page}",
+				description: "পৃষ্ঠা ${page}",
+				previous: "পূর্ববর্তী",
+				next: "পরবর্তী",
+				of: "এর মধ্যে",
+				summary: "পৃষ্ঠা ${current} / ${max}",
+			};
+		case "pt":
 			return {
 				page: "${page}",
 				description: "Página ${page}",
 				previous: "Anterior",
-				next: "Siguiente",
+				next: "Seguinte",
 				of: "de",
 				summary: "Página ${current} de ${max}",
 			};
+		case "ru":
+			return {
+				page: "${page}",
+				description: "Страница ${page}",
+				previous: "Предыдущая",
+				next: "Следующая",
+				of: "из",
+				summary: "Страница ${current} из ${max}",
+			};
+		case "ja":
+			return {
+				page: "${page}",
+				description: "ページ ${page}",
+				previous: "前へ",
+				next: "次へ",
+				of: "中",
+				summary: "${max} ページ中 ${current} ページ",
+			};
+		case "pa":
+			return {
+				page: "${page}",
+				description: "ਪੰਨਾ ${page}",
+				previous: "ਪਿਛਲਾ",
+				next: "ਅਗਲਾ",
+				of: "ਵਿੱਚੋਂ",
+				summary: "ਪੰਨਾ ${current} / ${max}",
+			};
+		case "mr":
+			return {
+				page: "${page}",
+				description: "पृष्ठ ${page}",
+				previous: "मागील",
+				next: "पुढील",
+				of: "पैकी",
+				summary: "पृष्ठ ${current} / ${max}",
+			};
+		case "fr":
+			return {
+				page: "${page}",
+				description: "Page ${page}",
+				previous: "Précédent",
+				next: "Suivant",
+				of: "de",
+				summary: "Page ${current} sur ${max}",
+			};
 		case "it":
 			return {
 				page: "${page}",
@@ -497,6 +569,24 @@ function getTranslations() {
 				of: "di",
 				summary: "Pagina ${current} di ${max}",
 			};
+		case "nl":
+			return {
+				page: "${page}",
+				description: "Pagina ${page}",
+				previous: "Vorige",
+				next: "Volgende",
+				of: "van",
+				summary: "Pagina ${current} van ${max}",
+			};
+		case "sv":
+			return {
+				page: "${page}",
+				description: "Sida ${page}",
+				previous: "Föregående",
+				next: "Nästa",
+				of: "av",
+				summary: "Sida ${current} av ${max}",
+			};
 		case "pl":
 			return {
 				page: "${page}",
@@ -506,32 +596,41 @@ function getTranslations() {
 				of: "z",
 				summary: "Strona ${current} z ${max}",
 			};
-		case "no":
+		case "da":
 			return {
 				page: "${page}",
 				description: "Side ${page}",
 				previous: "Forrige",
-				next: "Neste",
-				of: "av",
-				summary: "Side ${current} av ${max}",
+				next: "Næste",
+				of: "af",
+				summary: "Side ${current} af ${max}",
 			};
-		case "dk":
+		case "fi":
+			return {
+				page: "${page}",
+				description: "Sivu ${page}",
+				previous: "Edellinen",
+				next: "Seuraava",
+				of: "/",
+				summary: "Sivu ${current} / ${max}",
+			};
+		case "no":
 			return {
 				page: "${page}",
 				description: "Side ${page}",
 				previous: "Forrige",
-				next: "Næste",
-				of: "af",
-				summary: "Side ${current} af ${max}",
+				next: "Neste",
+				of: "av",
+				summary: "Side ${current} av ${max}",
 			};
-		case "sw":
+		case "cs":
 			return {
 				page: "${page}",
-				description: "Sida ${page}",
-				previous: "Föregående",
-				next: "Nästa",
-				of: "av",
-				summary: "Sida ${current} av ${max}",
+				description: "Stránka ${page}",
+				previous: "Předchozí",
+				next: "Další",
+				of: "z",
+				summary: "Stránka ${current} z ${max}",
 			};
 		default:
 		case "en":

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);
     }
 }