@wpmoo/ui 2.1.1 → 2.3.0

package/dist/js/overlay-scrollbar.js

@@ -1,5 +1,5 @@
 /*!
- * Moo UI overlay-scrollbar.js v2.1.1 (https://wpmoo.org/)
+ * Moo UI overlay-scrollbar.js v2.3.0 (https://wpmoo.org/)
  * Copyright 2026 WPMoo Authors
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  */

package/dist/js/password-requirements.js

@@ -1,5 +1,5 @@
 /*!
- * Moo UI password-requirements.js v2.1.1 (https://wpmoo.org/)
+ * Moo UI password-requirements.js v2.3.0 (https://wpmoo.org/)
  * Copyright 2026 WPMoo Authors
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  */

package/dist/js/sheet.js

@@ -1,5 +1,5 @@
 /*!
- * Moo UI sheet.js v2.1.1 (https://wpmoo.org/)
+ * Moo UI sheet.js v2.3.0 (https://wpmoo.org/)
  * Copyright 2026 WPMoo Authors
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  */

package/dist/js/sidebar.js

@@ -1,5 +1,5 @@
 /*!
- * Moo UI sidebar.js v2.1.1 (https://wpmoo.org/)
+ * Moo UI sidebar.js v2.3.0 (https://wpmoo.org/)
  * Copyright 2026 WPMoo Authors
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  */

package/dist/js/slider.js

@@ -1,5 +1,5 @@
 /*!
- * Moo UI slider.js v2.1.1 (https://wpmoo.org/)
+ * Moo UI slider.js v2.3.0 (https://wpmoo.org/)
  * Copyright 2026 WPMoo Authors
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  */

package/dist/js/state.js

@@ -1,5 +1,5 @@
 /*!
- * Moo UI state.js v2.1.1 (https://wpmoo.org/)
+ * Moo UI state.js v2.3.0 (https://wpmoo.org/)
  * Copyright 2026 WPMoo Authors
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  */

package/dist/js/table-of-contents.js

@@ -1,5 +1,5 @@
 /*!
- * Moo UI table-of-contents.js v2.1.1 (https://wpmoo.org/)
+ * Moo UI table-of-contents.js v2.3.0 (https://wpmoo.org/)
  * Copyright 2026 WPMoo Authors
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  */

package/dist/js/toc.js

@@ -1,5 +1,5 @@
 /*!
- * Moo UI toc.js v2.1.1 (https://wpmoo.org/)
+ * Moo UI toc.js v2.3.0 (https://wpmoo.org/)
  * Copyright 2026 WPMoo Authors
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  */

package/dist/release-manifest.json

@@ -3,22 +3,22 @@
     {
       "export": "./moo.css",
       "path": "dist/assets/css/moo.css",
-      "sha256": "2c98f8a15fdd14b6749831dbe78edfeb8998f5cfc017733164efacf93b16db11"
+      "sha256": "4ac09fbfd732da01c9f173721cf98fc3506eb3f8074cdd1b2e9272c1a18f9943"
     },
     {
       "export": "./moo-ui.css",
       "path": "dist/assets/css/moo-ui.css",
-      "sha256": "afca34860a8a9cb3bc3ebf4b5d22d687b26d7cadac0dace6224e44da28f24874"
+      "sha256": "74ace06833227d1579e40f92dd5c13c0b804416b06f62354a37e53bff26eb0eb"
     },
     {
       "export": "./state.js",
       "path": "dist/js/state.js",
-      "sha256": "adb29ff6ee521414f8975d7b4240f7aeb39dc7c6a59349fc6c95591b5b1f109d"
+      "sha256": "2e69188e8ed94a4b3363498effdb9ebad0e78dd75740b323381713608b6fbdd5"
     }
   ],
   "package": {
     "name": "@wpmoo/ui",
-    "version": "2.1.1"
+    "version": "2.3.0"
   },
   "schemaVersion": 1
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wpmoo/ui",
-  "version": "2.1.1",
+  "version": "2.3.0",
   "description": "Bootstrap markup. shadcn feel. A frontend-framework-free component system for server-rendered apps.",
   "license": "MIT",
   "author": "WPMoo (https://wpmoo.org)",
@@ -42,6 +42,8 @@
     "./table-of-contents.js": "./dist/js/table-of-contents.js",
     "./sheet.js": "./dist/js/sheet.js",
     "./floating-panel.js": "./dist/js/floating-panel.js",
+    "./image-gallery.js": "./dist/js/image-gallery.js",
+    "./consent.js": "./dist/js/consent.js",
     "./chart.js": "./dist/js/chart.js",
     "./chart.min.js": "./dist/js/chart.min.js",
     "./datepicker.js": "./dist/js/datepicker.js",
@@ -74,6 +76,8 @@
     "dist/js/table-of-contents.js",
     "dist/js/sheet.js",
     "dist/js/floating-panel.js",
+    "dist/js/image-gallery.js",
+    "dist/js/consent.js",
     "dist/js/chart.js",
     "dist/js/chart.min.js",
     "dist/js/datepicker.js",

package/scss/_components.scss

@@ -38,6 +38,7 @@
 @import "components/toggle_group";
 @import "components/card";
 @import "components/empty";
+@import "components/item";
 @import "components/table";
 @import "components/dropdown";
 @import "components/menubar";
@@ -70,3 +71,4 @@
 @import "components/combobox";
 @import "components/context-menu";
 @import "components/datatable";
+@import "components/gallery";

package/scss/components/_gallery.scss

@@ -0,0 +1,73 @@
+.gallery-justified {
+  --moo-gallery-row-height: #{$moo-gallery-row-height};
+  display: flex;
+  flex-wrap: wrap;
+
+  @include media-breakpoint-up(md) {
+    --moo-gallery-row-height: #{$moo-gallery-row-height-md};
+  }
+
+  > * {
+    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);
+  }
+
+  &::after {
+    flex-grow: 1e9;
+    content: "";
+  }
+}
+
+.gallery-stage {
+  height: $moo-gallery-stage-height;
+}
+
+$moo-gallery-strip-gutter: if($moo-gallery-strip-bleed, $moo-gallery-strip-bleed, $container-padding-x * .5);
+
+@mixin moo-gallery-strip {
+  --moo-gallery-strip-height: #{$moo-gallery-strip-height};
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  scroll-snap-type: x proximity;
+  contain: inline-size;
+
+  > * {
+    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;
+  }
+
+  &::after {
+    content: none;
+  }
+
+  &.gallery-strip-bleed {
+    margin-inline: calc(-1 * var(--moo-gallery-strip-bleed, #{$moo-gallery-strip-gutter}));
+    padding-inline: var(--moo-gallery-strip-bleed, #{$moo-gallery-strip-gutter});
+    scroll-padding-inline: var(--moo-gallery-strip-bleed, #{$moo-gallery-strip-gutter});
+  }
+}
+
+.gallery-strip {
+  display: flex;
+  @include moo-gallery-strip;
+}
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @if $breakpoint != "xs" {
+    @include media-breakpoint-down($breakpoint) {
+      .gallery-strip-#{$breakpoint}-down {
+        @include moo-gallery-strip;
+      }
+    }
+  }
+}
+
+$moo-gallery-progress-size: if($moo-gallery-progress-height, $moo-gallery-progress-height, $progress-height);
+
+.gallery-progress {
+  --bs-progress-height: var(--moo-gallery-progress-height, #{$moo-gallery-progress-size});
+  opacity: var(--moo-gallery-progress-opacity, #{$moo-gallery-progress-opacity});
+}

package/scss/components/_item.scss

@@ -0,0 +1,96 @@
+$item-title-line-height: $line-height-sm;
+$item-description-line-height: $line-height-base;
+$item-content-gap: $spacer * 0.25;
+$item-media-size: ($font-size-sm * $item-title-line-height) + $item-content-gap + ($font-size-sm * $item-description-line-height);
+
+/* Item */
+.item {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: $spacer;
+  min-width: 0;
+  padding: ($spacer * 0.75) $spacer;
+  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: $spacer * 0.75;
+  padding: ($spacer * 0.5) ($spacer * 0.75);
+}
+
+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: $item-media-size;
+  height: $item-media-size;
+  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: $spacer;
+  height: $spacer;
+}
+
+.item-content {
+  display: flex;
+  flex: 1 1 0;
+  flex-direction: column;
+  gap: $item-content-gap;
+  min-width: 0;
+}
+
+.item-title {
+  margin: 0;
+  font-size: $font-size-sm;
+  font-weight: $font-weight-medium;
+  line-height: $item-title-line-height;
+}
+
+.item-description {
+  margin: 0;
+  font-size: $font-size-sm;
+  line-height: $item-description-line-height;
+  color: var(--bs-secondary-color);
+}
+
+.item-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: $spacer * 0.5;
+}
+
+.item-group {
+  display: flex;
+  flex-direction: column;
+  gap: $spacer * 0.5;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}

package/scss/foundations/_globals.scss

@@ -1,4 +1,5 @@
 @import "../utilities/scroll_fade_primitives";
+@import "../utilities/motion_primitives";
 @include moo-overlay-scrollbar-native;
 
 @keyframes moo-spinner-rotate {

package/scss/foundations/_scope.scss

@@ -5,9 +5,11 @@
   /* Utilities */
   @import "../utilities/border";
   @include moo-text-alignment-utilities;
+  @include moo-gallery-utilities;
   @import "../utilities/scroll_fade";
   @include moo-overlay-scrollbar;
   @import "../utilities/scroll_smooth";
+  @import "../utilities/motion";
   /* Application layout */
   @import "../layouts/app";
   @import "../layouts/page_grid";

package/scss/mixins/_banner.scss

@@ -1,5 +1,5 @@
 /*!
- * Moo UI v2.1.1 (https://wpmoo.org/)
+ * Moo UI v2.3.0 (https://wpmoo.org/)
  * Copyright 2026 WPMoo Authors
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  *

package/scss/moo-core.scss

@@ -8,6 +8,7 @@
 @import "bootstrap/scss/mixins";
 @import "bootstrap/scss/utilities";
 @import "utilities/text_alignment";
+@import "utilities/gallery";
 @import "utilities/overlay_scrollbar";
 @import "themes/theme";
 /* Global styles */

package/scss/moo-ui.scss

@@ -9,6 +9,7 @@
 @import "bootstrap/scss/mixins";
 @import "bootstrap/scss/utilities";
 @import "utilities/text_alignment";
+@import "utilities/gallery";
 @import "utilities/overlay_scrollbar";
 @import "themes/theme";
 
@@ -52,6 +53,7 @@
 @import "bootstrap/scss/utilities/api";
 
 @import "utilities/scroll_fade_primitives";
+@import "utilities/motion_primitives";
 @import "utilities/overlay_scrollbar_native";
 @import "foundations/backdrop";
 @import "foundations/scope";

package/scss/settings/_component_variables.scss

@@ -245,3 +245,11 @@ $moo-toast-stack-enter-y: 150% !default;
 $moo-toast-stack-transition-duration: .5s !default;
 $moo-toast-stack-height-transition-duration: .15s !default;
 $moo-toast-stack-transition-timing-function: cubic-bezier(.22, 1, .36, 1) !default;
+
+$moo-gallery-row-height: 6rem !default;
+$moo-gallery-row-height-md: 8rem !default;
+$moo-gallery-stage-height: unquote("min(62svh, 38rem)") !default;
+$moo-gallery-strip-height: 13rem !default;
+$moo-gallery-strip-bleed: null !default;
+$moo-gallery-progress-height: null !default;
+$moo-gallery-progress-opacity: .08 !default;

package/scss/utilities/_gallery.scss

@@ -0,0 +1,25 @@
+$aspect-ratios: map-merge($aspect-ratios, ("3x2": calc(2 / 3 * 100%)));
+$utilities: map-merge(
+  $utilities,
+  (
+    "column-count": (
+      responsive: true,
+      property: column-count,
+      class: columns,
+      values: (1: 1, 2: 2, 3: 3, 4: 4),
+    ),
+  )
+);
+
+@mixin moo-gallery-utilities {
+  .ratio-3x2 {
+    --#{$prefix}aspect-ratio: #{map-get($aspect-ratios, "3x2")};
+  }
+
+  $utility: map-get($utilities, "column-count");
+  @each $breakpoint in map-keys($grid-breakpoints) {
+    @include media-breakpoint-up($breakpoint) {
+      @include generate-utility($utility, breakpoint-infix($breakpoint, $grid-breakpoints));
+    }
+  }
+}

package/scss/utilities/_motion.scss

@@ -0,0 +1,5 @@
+@media (prefers-reduced-motion: no-preference) {
+  .animate-breathe {
+    animation: moo-breathe 2s ease-in-out infinite;
+  }
+}

package/scss/utilities/_motion_primitives.scss

@@ -0,0 +1,10 @@
+@keyframes moo-breathe {
+  0%,
+  100% {
+    transform: scale(.9);
+  }
+
+  50% {
+    transform: scale(1);
+  }
+}