@xiwebdesign/xicms-core 5.5.3 → 5.6.1

package/dist/styles.css

@@ -2699,3 +2699,150 @@
   background: color-mix(in srgb, var(--xicms-primary, #4f46e5) 12%, transparent);
   color: var(--xicms-primary, #4f46e5);
 }
+
+/* ── Shop (5.6) ─────────────────────────────────────────────────────────── */
+
+/* Uitgelijnde productkaart: flex-kolom over de volle hoogte. De grid-cellen zijn even
+   hoog (align-items: stretch is de default), de kaart vult de cel, en de knop-rij wordt
+   met margin-top:auto naar onderen gedrukt. Zo staan prijs, kleurstipjes en knop over
+   álle kaarten op dezelfde lijn — ook als een productnaam één of twee regels beslaat. */
+.xicms-shop-card {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+.xicms-shop-card__link {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  text-decoration: none;
+  color: inherit;
+}
+.xicms-shop-card__media {
+  position: relative;
+}
+.xicms-shop-card__img,
+.xicms-shop-card__placeholder {
+  display: block;
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  object-fit: cover;
+  border-radius: inherit;
+  background: var(--xicms-muted, #f1f1f1);
+}
+.xicms-shop-card__body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding: 0.8rem 1rem 0.25rem;
+  flex: 1 1 auto;
+}
+/* Productnaam: reserveer altijd twee regels zodat één- en twee-regelige namen op dezelfde
+   basislijn staan; langer dan twee regels wordt met een ellipsis afgekapt. */
+.xicms-shop-card__name {
+  font-weight: 700;
+  line-height: 1.25;
+  min-height: 2.5em;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.xicms-shop-card__priceline {
+  font-size: 0.92em;
+}
+/* Swatch-rij duwt (leeg of gevuld) de rest omlaag en houdt een vaste hoogte. */
+.xicms-shop-card__swatchrow {
+  display: inline-flex;
+  gap: 5px;
+  min-height: 14px;
+  margin-top: auto;
+  padding-top: 0.3rem;
+}
+.xicms-shop-card__actions {
+  padding: 0.5rem 1rem 1rem;
+}
+/* Kaartknoppen: passen binnen de kaart, ook bij smalle kolommen. */
+.xicms-shop-card__actions .xicms-btn,
+.xicms-shop-card__added {
+  display: block;
+  width: 100%;
+  padding: 0.45rem 0.6rem;
+  font-size: 0.85rem;
+  text-align: center;
+}
+.xicms-shop-card__added {
+  color: var(--xicms-primary, #4f46e5);
+  text-decoration: none;
+}
+
+/* Mobiel: nooit meer dan 2 kolommen (inline grid-template wint anders van media queries). */
+@media (max-width: 520px) {
+  .xicms-shop-grid__items {
+    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
+    gap: 0.8rem !important;
+  }
+  .xicms-shop-card__actions .xicms-btn {
+    font-size: 0.8rem;
+    padding: 0.4rem 0.5rem;
+  }
+  .xicms-shop-card__name {
+    font-size: 0.92rem;
+  }
+}
+
+/* Uitverkocht-badge op de kaartfoto. */
+.xicms-shop-card__soldout {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  padding: 0.2rem 0.6rem;
+  border-radius: 999px;
+  background: rgba(30, 30, 30, 0.72);
+  color: #fff;
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+}
+
+/* Filterchips + sorteerkeuze boven het grid. */
+.xicms-shop-filters {
+  display: grid;
+  gap: 0.5rem;
+  margin-top: 1rem;
+}
+.xicms-shop-filters__row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+}
+.xicms-shop-filterchip {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.28rem 0.75rem;
+  border-radius: 999px;
+  border: 1px solid var(--xicms-border-strong, rgba(0, 0, 0, 0.18));
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 0.85rem;
+  cursor: pointer;
+}
+.xicms-shop-filterchip--active {
+  background: var(--xicms-primary, #4f46e5);
+  border-color: var(--xicms-primary, #4f46e5);
+  color: var(--xicms-on-primary, #fff);
+}
+.xicms-shop-filters__sort {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.85rem;
+  justify-self: start;
+}
+.xicms-shop-filters__sort select {
+  padding: 0.3rem 0.5rem;
+  border-radius: var(--xicms-radius-sm, 8px);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xiwebdesign/xicms-core",
-  "version": "5.5.3",
+  "version": "5.6.1",
   "description": "XiCMS engine: gestructureerde content, pagina's, draft/publish, admin (TipTap+Radix), SEO en beveiliging voor klantsites.",
   "license": "UNLICENSED",
   "repository": {