@xiwebdesign/xicms-core 5.2.0 → 5.4.0

package/dist/styles.css

@@ -370,6 +370,13 @@
   .xicms-ve__inserter {
     flex-wrap: wrap;
   }
+  /* Touch-raakdoelen: de blok-toolbarknoppen (✏️ ↑ ↓ ⎘ 🗑) waren op een telefoon te klein om
+     betrouwbaar te raken (WCAG raakdoel ≥ 44px op mobiel). */
+  .xicms-ve-block__toolbar button {
+    min-width: 40px;
+    min-height: 40px;
+    font-size: 1rem;
+  }
   .xicms-ve__inserter-select {
     width: 100%;
   }
@@ -814,6 +821,46 @@
   background: linear-gradient(to top, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.18) 45%, transparent 75%);
   pointer-events: none;
 }
+/* Astryx-LINK-knoppen: expliciete labelkleur. Het label erft anders de linkkleur van de site — een
+   globale `a { color: … }` in globals.css (veelvoorkomend) maakt het label dan onleesbaar
+   (bv. indigo op accent-groen). Primary hoort on-accent; secondary/ghost horen accent. */
+.xicms-root a.astryx-button[data-variant="primary"],
+.xicms-root a.astryx-button[data-variant="destructive"] {
+  color: var(--color-on-accent, #ffffff);
+}
+.xicms-root a.astryx-button[data-variant="secondary"],
+.xicms-root a.astryx-button[data-variant="ghost"] {
+  color: var(--color-accent, inherit);
+}
+/* Astryx-knoppen op een foto/video-hero: ghost/secondary zijn daar standaard onleesbaar
+   (accentkleurige tekst zonder vlak). Wit met subtiele rand — zelfde look als de oude outline. */
+.xicms-hero[data-media="cover"] .xicms-hero__buttons .astryx-button[data-variant="ghost"],
+.xicms-hero[data-media="cover"] .xicms-hero__buttons .astryx-button[data-variant="secondary"] {
+  color: #fff;
+  border: 1px solid rgba(255, 255, 255, 0.75);
+  background: rgba(255, 255, 255, 0.08);
+}
+.xicms-hero[data-media="cover"] .xicms-hero__buttons .astryx-button[data-variant="ghost"]:hover,
+.xicms-hero[data-media="cover"] .xicms-hero__buttons .astryx-button[data-variant="secondary"]:hover {
+  background: rgba(255, 255, 255, 0.18);
+}
+/* Pauze-/afspeelknop voor de achtergrondvideo (WCAG 2.2.2: bewegende content moet stopbaar zijn). */
+.xicms-hero__videotoggle {
+  position: absolute;
+  right: 14px;
+  bottom: 14px;
+  z-index: 2;
+  width: 40px;
+  height: 40px;
+  border: 0;
+  border-radius: 999px;
+  background: rgba(15, 23, 42, 0.65);
+  color: #fff;
+  font-size: 0.95rem;
+  cursor: pointer;
+}
+.xicms-hero__videotoggle:hover { background: rgba(15, 23, 42, 0.85); }
+.xicms-hero__videotoggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
 .xicms-hero__eyebrow {
   display: inline-block;
   text-transform: uppercase;
@@ -1034,6 +1081,13 @@
     grid-template-columns: 1fr !important;
   }
 }
+/* Tablet: 3-4 kolommen squishen tussen 641-959px — terug naar 2 (mobiel heeft al 1). */
+@media (min-width: 641px) and (max-width: 959px) {
+  .xicms-columns[data-cols="3"],
+  .xicms-columns[data-cols="4"] {
+    grid-template-columns: repeat(2, 1fr) !important;
+  }
+}
 .xicms-newslist {
   margin: 1.5rem 0;
 }
@@ -2288,17 +2342,10 @@
 }
 
 /* ════════════════════ Diensten / kaarten ════════════════════ */
+/* NB: het grid zelf komt van Astryx Grid (Cards.tsx) — de oude .xicms-cards__grid-regels waren
+   dode code (niets emitte die class meer) en zijn verwijderd. */
 .xicms-cards__heading { margin: 0 0 0.25rem; }
 .xicms-cards__intro { margin: 0 0 1.25rem; opacity: 0.8; }
-.xicms-cards__grid { display: grid; gap: 1rem; }
-@media (min-width: 640px) {
-  .xicms-cards__grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
-  .xicms-cards__grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
-  .xicms-cards__grid[data-cols="4"] { grid-template-columns: repeat(2, 1fr); }
-}
-@media (min-width: 960px) {
-  .xicms-cards__grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
-}
 .xicms-cards__card {
   display: block;
   padding: 1.25rem;
@@ -2379,6 +2426,14 @@
 
 /* ════════════════════ Carrousel / slider ════════════════════ */
 .xicms-slider { position: relative; }
+/* Lege staat in de editor (verse slider zonder slides was onzichtbaar). */
+.xicms-slider--empty {
+  padding: 2.5rem 1rem;
+  text-align: center;
+  border: 2px dashed var(--xicms-border, rgba(0, 0, 0, 0.15));
+  border-radius: var(--xicms-radius, 12px);
+  opacity: 0.75;
+}
 .xicms-slider__viewport { position: relative; overflow: hidden; border-radius: var(--xicms-radius, 12px); }
 .xicms-slider__track { display: flex; transition: transform 0.4s ease; }
 @media (prefers-reduced-motion: reduce) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xiwebdesign/xicms-core",
-  "version": "5.2.0",
+  "version": "5.4.0",
   "description": "XiCMS engine: gestructureerde content, pagina's, draft/publish, admin (TipTap+Radix), SEO en beveiliging voor klantsites.",
   "license": "UNLICENSED",
   "repository": {
@@ -42,7 +42,11 @@
     },
     "./layers.css": "./dist/layers.css",
     "./styles.css": "./dist/styles.css",
-    "./admin.css": "./dist/admin.css"
+    "./admin.css": "./dist/admin.css",
+    "./demo": {
+      "types": "./dist/demo/index.d.ts",
+      "import": "./dist/demo/index.js"
+    }
   },
   "files": [
     "dist"