@wpmoo/ui 2.1.1 → 2.2.0

package/README.md

@@ -195,6 +195,21 @@ application-owned, account-specific key when appropriate. This is a local UI
 preference, not authorization or server-side task state. See the
 [Card example](https://ui.wpmoo.org/components/card/#floating-panel) for markup.
 
+For the Image Gallery block, bind its lightbox after Bootstrap's Modal and
+Carousel are available on the document's window:
+
+```js
+import { initImageGalleries } from "@wpmoo/ui/image-gallery.js";
+const release = initImageGalleries(document);
+// release(); // remove the listeners again
+```
+
+Without the module every thumbnail still links to its large image. With it the
+lightbox opens at the clicked photo, keeps the counter and caption current,
+runs the slideshow and full-screen buttons, adds arrow keys and loads only the
+current photo and its neighbours. See the
+[Image Gallery block](https://ui.wpmoo.org/blocks/image-gallery/) for markup.
+
 For an opt-in document overlay scrollbar, load the stylesheet first and pass
 the resolved page theme owner explicitly:
 
@@ -275,6 +290,12 @@ calm.
 
 ## Status And Support
 
+The `2.2.0` minor release adds the Item component, Image Gallery and Video
+Dialog blocks, and component usage guides. Image Gallery includes five layouts,
+a lazy-loaded lightbox, slideshow and full-screen controls through the optional
+`@wpmoo/ui/image-gallery.js` module. The catalog adds structured metadata,
+content-derived page dates and a browsable sitemap.
+
 The `2.1.1` patch release improves Chart tooltips, DataTable sorting
 and selection, Combobox input, Context Menu disposal, Date Picker controls,
 and Sidebar keyboard navigation. Page titles follow their owner heading weight.
@@ -307,7 +328,7 @@ paths live in the [Installation guide](https://ui.wpmoo.org/installation/).
 Moo UI source code is MIT licensed. License details live in
 [LICENSE](LICENSE) and the [License page](https://ui.wpmoo.org/license/).
 Third-party distribution details and notices are kept separately in
-[THIRD_PARTY_NOTICES.md](https://github.com/wpmoo-org/ui/blob/v2.1.1/THIRD_PARTY_NOTICES.md).
+[THIRD_PARTY_NOTICES.md](https://github.com/wpmoo-org/ui/blob/v2.2.0/THIRD_PARTY_NOTICES.md).
 Catalog visual assets and their license are repository-only and are not
 included in the npm package. Asset terms live in the
-[visual asset license](https://github.com/wpmoo-org/ui/blob/v2.1.1/ASSET_LICENSE.md).
+[visual asset license](https://github.com/wpmoo-org/ui/blob/v2.2.0/ASSET_LICENSE.md).

package/THIRD_PARTY_NOTICES.md

@@ -83,5 +83,5 @@ The catalog serves its native ESM file and unchanged license separately under
 WPMoo-generated visual assets, including image assets under `site/static/images/`,
 are original WPMoo work and are not licensed under MIT unless explicitly
 stated. See the
-[repository visual asset license](https://github.com/wpmoo-org/ui/blob/v2.1.1/ASSET_LICENSE.md).
+[repository visual asset license](https://github.com/wpmoo-org/ui/blob/v2.2.0/ASSET_LICENSE.md).
 These assets and their license file are not included in the npm package.

package/certification.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": "0.1",
   "status": "preview",
-  "coreVersion": "2.1.1",
+  "coreVersion": "2.2.0",
   "bootstrap": {
     "canonicalVersion": "5.3.3",
     "targetRange": ">=5.3.0 <5.4",
@@ -34,6 +34,7 @@
       "./table-of-contents.js",
       "./sheet.js",
       "./floating-panel.js",
+      "./image-gallery.js",
       "./chart.js",
       "./chart.min.js",
       "./datepicker.js",

package/dist/assets/css/moo-ui.css

@@ -1,5 +1,5 @@
 /*!
- * Moo UI v2.1.1 (https://wpmoo.org/)
+ * Moo UI v2.2.0 (https://wpmoo.org/)
  * Copyright 2026 WPMoo Authors
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  *
@@ -4238,6 +4238,10 @@ progress {
   --bs-aspect-ratio: calc(9 / 21 * 100%);
 }
 
+.ratio-3x2 {
+  --bs-aspect-ratio: calc(2 / 3 * 100%);
+}
+
 .fixed-top {
   position: fixed;
   top: 0;
@@ -6360,6 +6364,22 @@ progress {
   z-index: 3 !important;
 }
 
+.columns-1 {
+  column-count: 1 !important;
+}
+
+.columns-2 {
+  column-count: 2 !important;
+}
+
+.columns-3 {
+  column-count: 3 !important;
+}
+
+.columns-4 {
+  column-count: 4 !important;
+}
+
 @media (min-width: 576px) {
   .float-sm-start {
     float: left !important;
@@ -6909,6 +6929,18 @@ progress {
   .text-sm-center {
     text-align: center !important;
   }
+  .columns-sm-1 {
+    column-count: 1 !important;
+  }
+  .columns-sm-2 {
+    column-count: 2 !important;
+  }
+  .columns-sm-3 {
+    column-count: 3 !important;
+  }
+  .columns-sm-4 {
+    column-count: 4 !important;
+  }
 }
 
 @media (min-width: 768px) {
@@ -7460,6 +7492,18 @@ progress {
   .text-md-center {
     text-align: center !important;
   }
+  .columns-md-1 {
+    column-count: 1 !important;
+  }
+  .columns-md-2 {
+    column-count: 2 !important;
+  }
+  .columns-md-3 {
+    column-count: 3 !important;
+  }
+  .columns-md-4 {
+    column-count: 4 !important;
+  }
 }
 
 @media (min-width: 992px) {
@@ -8011,6 +8055,18 @@ progress {
   .text-lg-center {
     text-align: center !important;
   }
+  .columns-lg-1 {
+    column-count: 1 !important;
+  }
+  .columns-lg-2 {
+    column-count: 2 !important;
+  }
+  .columns-lg-3 {
+    column-count: 3 !important;
+  }
+  .columns-lg-4 {
+    column-count: 4 !important;
+  }
 }
 
 @media (min-width: 1200px) {
@@ -8562,6 +8618,18 @@ progress {
   .text-xl-center {
     text-align: center !important;
   }
+  .columns-xl-1 {
+    column-count: 1 !important;
+  }
+  .columns-xl-2 {
+    column-count: 2 !important;
+  }
+  .columns-xl-3 {
+    column-count: 3 !important;
+  }
+  .columns-xl-4 {
+    column-count: 4 !important;
+  }
 }
 
 @media (min-width: 1400px) {
@@ -9113,6 +9181,18 @@ progress {
   .text-xxl-center {
     text-align: center !important;
   }
+  .columns-xxl-1 {
+    column-count: 1 !important;
+  }
+  .columns-xxl-2 {
+    column-count: 2 !important;
+  }
+  .columns-xxl-3 {
+    column-count: 3 !important;
+  }
+  .columns-xxl-4 {
+    column-count: 4 !important;
+  }
 }
 
 @media (min-width: 1200px) {
@@ -9226,6 +9306,16 @@ progress {
   }
 }
 
+@keyframes moo-breathe {
+  0%,
+100% {
+    transform: scale(0.9);
+  }
+  50% {
+    transform: scale(1);
+  }
+}
+
 html.scrollbar-overlay-native {
   scrollbar-width: none;
 }
@@ -13394,6 +13484,86 @@ label.btn {
     gap: 0.5rem;
   }
 
+  /* Item */
+  .item {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 1rem;
+    min-width: 0;
+    padding: 0.75rem 1rem;
+    color: var(--bs-body-color);
+    text-decoration: none;
+    border: var(--bs-border-width) solid transparent;
+    border-radius: var(--bs-border-radius-lg);
+  }
+  .item-outline {
+    border-color: var(--bs-border-color);
+  }
+  .item-muted {
+    background-color: var(--bs-tertiary-bg);
+  }
+  .item-sm {
+    gap: 0.75rem;
+    padding: 0.5rem 0.75rem;
+  }
+  a.item:hover {
+    color: var(--bs-body-color);
+    background-color: var(--bs-tertiary-bg);
+  }
+  .item-media {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    align-self: flex-start;
+  }
+  .item-media-icon {
+    width: 2.35547rem;
+    height: 2.35547rem;
+    color: var(--bs-body-color);
+    background-color: var(--bs-tertiary-bg);
+    border: var(--bs-border-width) solid var(--bs-border-color);
+    border-radius: var(--bs-border-radius);
+  }
+  .item-media-icon > [data-icon] {
+    width: 1rem;
+    height: 1rem;
+  }
+  .item-content {
+    display: flex;
+    flex: 1 1 0;
+    flex-direction: column;
+    gap: 0.25rem;
+    min-width: 0;
+  }
+  .item-title {
+    margin: 0;
+    font-size: 0.76562rem;
+    font-weight: 500;
+    line-height: 1.25;
+  }
+  .item-description {
+    margin: 0;
+    font-size: 0.76562rem;
+    line-height: 1.5;
+    color: var(--bs-secondary-color);
+  }
+  .item-actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .item-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+
   /* Table */
   .card .table {
     --bs-table-bg: transparent;
@@ -16827,6 +16997,174 @@ label.btn {
   .datatable--release-review {
     --moo-datatable-min-width: 64rem;
   }
+  .gallery-justified {
+    --moo-gallery-row-height: 6rem;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  @media (min-width: 768px) {
+    .gallery-justified {
+      --moo-gallery-row-height: 8rem;
+    }
+  }
+  .gallery-justified > * {
+    flex: var(--moo-gallery-ratio, 1) 1 calc(var(--moo-gallery-ratio, 1) * var(--moo-gallery-row-height));
+    aspect-ratio: var(--moo-gallery-ratio, 1);
+  }
+  .gallery-justified::after {
+    flex-grow: 1e9;
+    content: "";
+  }
+  .gallery-stage {
+    height: min(62svh, 38rem);
+  }
+  .gallery-strip {
+    display: flex;
+    --moo-gallery-strip-height: 13rem;
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    scroll-snap-type: x proximity;
+    contain: inline-size;
+  }
+  .gallery-strip > * {
+    flex: none;
+    width: calc(var(--moo-gallery-ratio, 1) * var(--moo-gallery-strip-height));
+    max-width: 85%;
+    height: var(--moo-gallery-strip-height);
+    scroll-snap-align: start;
+  }
+  .gallery-strip::after {
+    content: none;
+  }
+  .gallery-strip.gallery-strip-bleed {
+    margin-inline: calc(-1 * var(--moo-gallery-strip-bleed, 0.75rem));
+    padding-inline: var(--moo-gallery-strip-bleed, 0.75rem);
+    scroll-padding-inline: var(--moo-gallery-strip-bleed, 0.75rem);
+  }
+  @media (max-width: 575.98px) {
+    .gallery-strip-sm-down {
+      --moo-gallery-strip-height: 13rem;
+      flex-wrap: nowrap;
+      overflow-x: auto;
+      scroll-snap-type: x proximity;
+      contain: inline-size;
+    }
+    .gallery-strip-sm-down > * {
+      flex: none;
+      width: calc(var(--moo-gallery-ratio, 1) * var(--moo-gallery-strip-height));
+      max-width: 85%;
+      height: var(--moo-gallery-strip-height);
+      scroll-snap-align: start;
+    }
+    .gallery-strip-sm-down::after {
+      content: none;
+    }
+    .gallery-strip-sm-down.gallery-strip-bleed {
+      margin-inline: calc(-1 * var(--moo-gallery-strip-bleed, 0.75rem));
+      padding-inline: var(--moo-gallery-strip-bleed, 0.75rem);
+      scroll-padding-inline: var(--moo-gallery-strip-bleed, 0.75rem);
+    }
+  }
+  @media (max-width: 767.98px) {
+    .gallery-strip-md-down {
+      --moo-gallery-strip-height: 13rem;
+      flex-wrap: nowrap;
+      overflow-x: auto;
+      scroll-snap-type: x proximity;
+      contain: inline-size;
+    }
+    .gallery-strip-md-down > * {
+      flex: none;
+      width: calc(var(--moo-gallery-ratio, 1) * var(--moo-gallery-strip-height));
+      max-width: 85%;
+      height: var(--moo-gallery-strip-height);
+      scroll-snap-align: start;
+    }
+    .gallery-strip-md-down::after {
+      content: none;
+    }
+    .gallery-strip-md-down.gallery-strip-bleed {
+      margin-inline: calc(-1 * var(--moo-gallery-strip-bleed, 0.75rem));
+      padding-inline: var(--moo-gallery-strip-bleed, 0.75rem);
+      scroll-padding-inline: var(--moo-gallery-strip-bleed, 0.75rem);
+    }
+  }
+  @media (max-width: 991.98px) {
+    .gallery-strip-lg-down {
+      --moo-gallery-strip-height: 13rem;
+      flex-wrap: nowrap;
+      overflow-x: auto;
+      scroll-snap-type: x proximity;
+      contain: inline-size;
+    }
+    .gallery-strip-lg-down > * {
+      flex: none;
+      width: calc(var(--moo-gallery-ratio, 1) * var(--moo-gallery-strip-height));
+      max-width: 85%;
+      height: var(--moo-gallery-strip-height);
+      scroll-snap-align: start;
+    }
+    .gallery-strip-lg-down::after {
+      content: none;
+    }
+    .gallery-strip-lg-down.gallery-strip-bleed {
+      margin-inline: calc(-1 * var(--moo-gallery-strip-bleed, 0.75rem));
+      padding-inline: var(--moo-gallery-strip-bleed, 0.75rem);
+      scroll-padding-inline: var(--moo-gallery-strip-bleed, 0.75rem);
+    }
+  }
+  @media (max-width: 1199.98px) {
+    .gallery-strip-xl-down {
+      --moo-gallery-strip-height: 13rem;
+      flex-wrap: nowrap;
+      overflow-x: auto;
+      scroll-snap-type: x proximity;
+      contain: inline-size;
+    }
+    .gallery-strip-xl-down > * {
+      flex: none;
+      width: calc(var(--moo-gallery-ratio, 1) * var(--moo-gallery-strip-height));
+      max-width: 85%;
+      height: var(--moo-gallery-strip-height);
+      scroll-snap-align: start;
+    }
+    .gallery-strip-xl-down::after {
+      content: none;
+    }
+    .gallery-strip-xl-down.gallery-strip-bleed {
+      margin-inline: calc(-1 * var(--moo-gallery-strip-bleed, 0.75rem));
+      padding-inline: var(--moo-gallery-strip-bleed, 0.75rem);
+      scroll-padding-inline: var(--moo-gallery-strip-bleed, 0.75rem);
+    }
+  }
+  @media (max-width: 1399.98px) {
+    .gallery-strip-xxl-down {
+      --moo-gallery-strip-height: 13rem;
+      flex-wrap: nowrap;
+      overflow-x: auto;
+      scroll-snap-type: x proximity;
+      contain: inline-size;
+    }
+    .gallery-strip-xxl-down > * {
+      flex: none;
+      width: calc(var(--moo-gallery-ratio, 1) * var(--moo-gallery-strip-height));
+      max-width: 85%;
+      height: var(--moo-gallery-strip-height);
+      scroll-snap-align: start;
+    }
+    .gallery-strip-xxl-down::after {
+      content: none;
+    }
+    .gallery-strip-xxl-down.gallery-strip-bleed {
+      margin-inline: calc(-1 * var(--moo-gallery-strip-bleed, 0.75rem));
+      padding-inline: var(--moo-gallery-strip-bleed, 0.75rem);
+      scroll-padding-inline: var(--moo-gallery-strip-bleed, 0.75rem);
+    }
+  }
+  .gallery-progress {
+    --bs-progress-height: var(--moo-gallery-progress-height, 0.25rem);
+    opacity: var(--moo-gallery-progress-opacity, 0.08);
+  }
 
   /* Focus and keyboard navigation */
   .form-label,
@@ -16970,6 +17308,91 @@ label.btn {
       text-align: center !important;
     }
   }
+  .ratio-3x2 {
+    --bs-aspect-ratio: calc(2 / 3 * 100%);
+  }
+  .columns-1 {
+    column-count: 1 !important;
+  }
+  .columns-2 {
+    column-count: 2 !important;
+  }
+  .columns-3 {
+    column-count: 3 !important;
+  }
+  .columns-4 {
+    column-count: 4 !important;
+  }
+  @media (min-width: 576px) {
+    .columns-sm-1 {
+      column-count: 1 !important;
+    }
+    .columns-sm-2 {
+      column-count: 2 !important;
+    }
+    .columns-sm-3 {
+      column-count: 3 !important;
+    }
+    .columns-sm-4 {
+      column-count: 4 !important;
+    }
+  }
+  @media (min-width: 768px) {
+    .columns-md-1 {
+      column-count: 1 !important;
+    }
+    .columns-md-2 {
+      column-count: 2 !important;
+    }
+    .columns-md-3 {
+      column-count: 3 !important;
+    }
+    .columns-md-4 {
+      column-count: 4 !important;
+    }
+  }
+  @media (min-width: 992px) {
+    .columns-lg-1 {
+      column-count: 1 !important;
+    }
+    .columns-lg-2 {
+      column-count: 2 !important;
+    }
+    .columns-lg-3 {
+      column-count: 3 !important;
+    }
+    .columns-lg-4 {
+      column-count: 4 !important;
+    }
+  }
+  @media (min-width: 1200px) {
+    .columns-xl-1 {
+      column-count: 1 !important;
+    }
+    .columns-xl-2 {
+      column-count: 2 !important;
+    }
+    .columns-xl-3 {
+      column-count: 3 !important;
+    }
+    .columns-xl-4 {
+      column-count: 4 !important;
+    }
+  }
+  @media (min-width: 1400px) {
+    .columns-xxl-1 {
+      column-count: 1 !important;
+    }
+    .columns-xxl-2 {
+      column-count: 2 !important;
+    }
+    .columns-xxl-3 {
+      column-count: 3 !important;
+    }
+    .columns-xxl-4 {
+      column-count: 4 !important;
+    }
+  }
   :where( .scroll-fade, .scroll-fade-y, .scroll-fade-x, .scroll-fade-t, .scroll-fade-b, .scroll-fade-l, .scroll-fade-r, .scroll-fade-s, .scroll-fade-e ) {
     --scroll-fade-size: min(12%, 2.5rem);
     --scroll-fade-reveal: 6rem;
@@ -17201,6 +17624,11 @@ label.btn {
       scroll-behavior: auto;
     }
   }
+  @media (prefers-reduced-motion: no-preference) {
+    .animate-breathe {
+      animation: moo-breathe 2s ease-in-out infinite;
+    }
+  }
 
   /* Application layout */
   .sidebar {