@wpmoo/ui 2.1.0 → 2.2.0

package/dist/js/overlay-scrollbar.js

@@ -1,5 +1,5 @@
 /*!
- * Moo UI overlay-scrollbar.js v2.1.0 (https://wpmoo.org/)
+ * Moo UI overlay-scrollbar.js v2.2.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.0 (https://wpmoo.org/)
+ * Moo UI password-requirements.js v2.2.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.0 (https://wpmoo.org/)
+ * Moo UI sheet.js v2.2.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.0 (https://wpmoo.org/)
+ * Moo UI sidebar.js v2.2.0 (https://wpmoo.org/)
  * Copyright 2026 WPMoo Authors
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  */
@@ -45,6 +45,14 @@ __name(ownerPortalRoot, "ownerPortalRoot");
 
 // src/js/components/sidebar.js
 var instances = /* @__PURE__ */ new WeakMap();
+var FLYOUT_FOCUSABLE_SELECTOR = "a[href], button, input, select, textarea, [tabindex]";
+function flyoutFocusables(flyout) {
+  const view = flyout.ownerDocument.defaultView;
+  return [...flyout.querySelectorAll(FLYOUT_FOCUSABLE_SELECTOR)].filter(
+    (element) => !element.matches(":disabled") && element.tabIndex >= 0 && !element.closest("[hidden], [inert]") && element.getClientRects().length > 0 && view.getComputedStyle(element).visibility === "visible"
+  );
+}
+__name(flyoutFocusables, "flyoutFocusables");
 var _Sidebar = class _Sidebar {
   static getInstance(element) {
     return element?.nodeType === 1 ? instances.get(element) || null : null;
@@ -472,8 +480,38 @@ var _Sidebar = class _Sidebar {
       this._closeFlyouts();
     } else {
       this._openFlyout(item);
+      if (event.detail === 0) {
+        if (this._flyout) {
+          flyoutFocusables(this._flyout)[0]?.focus();
+        }
+      }
     }
   }
+  // The flyout lives in a portal, away from its trigger, so Escape and Tab
+  // out of it return to the trigger instead of wandering. Tab between its
+  // items stays native; a key a flyout control already handled is left alone.
+  _handleFlyoutKeydown(event) {
+    const owner = this._flyoutOwner;
+    if (event.defaultPrevented || !this._flyout || !owner || !(event.key === "Escape" || event.key === "Tab")) {
+      return false;
+    }
+    const inFlyout = this._flyout.contains(event.target);
+    if (!inFlyout && !(event.key === "Escape" && owner.contains(event.target))) {
+      return false;
+    }
+    if (event.key === "Tab") {
+      const items = flyoutFocusables(this._flyout);
+      const edge = event.shiftKey ? items[0] : items[items.length - 1];
+      if (edge && event.target !== edge) {
+        return false;
+      }
+    }
+    event.preventDefault();
+    const trigger = owner.querySelector(":scope > .sidebar-menu-sub-trigger");
+    this._closeFlyouts();
+    trigger?.focus();
+    return true;
+  }
   _handleOutsideFlyoutClick(event) {
     if (!this._flyout) {
       return;
@@ -485,6 +523,9 @@ var _Sidebar = class _Sidebar {
     }
   }
   _handleShortcut(event) {
+    if (this._handleFlyoutKeydown(event)) {
+      return;
+    }
     const target = event.target;
     const isEditable = target instanceof this._window.Element && (target.matches("input, textarea, select") || target.isContentEditable);
     if (event.defaultPrevented || event.isComposing || isEditable || !this._config.keyboard || !(event.metaKey || event.ctrlKey) || event.key.toLowerCase() !== "b" || !this._isDesktop()) {

package/dist/js/slider.js

@@ -1,5 +1,5 @@
 /*!
- * Moo UI slider.js v2.1.0 (https://wpmoo.org/)
+ * Moo UI slider.js v2.2.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.0 (https://wpmoo.org/)
+ * Moo UI state.js v2.2.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.0 (https://wpmoo.org/)
+ * Moo UI table-of-contents.js v2.2.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.0 (https://wpmoo.org/)
+ * Moo UI toc.js v2.2.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": "b59eab8eb8321379f5995c831b17de2984cb90711dbe4fb4cf6ddc879962cb59"
+      "sha256": "622d934434519f4aff918247d08efda50512375c3183cf537a2b27863c3b43f5"
     },
     {
       "export": "./moo-ui.css",
       "path": "dist/assets/css/moo-ui.css",
-      "sha256": "2a898c1c05759626168d736cd999a9abc26ebc675e47187e70b5e0d84d91b85e"
+      "sha256": "b3e87c1c8f4df8103aec086d2e4ac90affe77ba08da6267070e0fe0d5b7cdf0f"
     },
     {
       "export": "./state.js",
       "path": "dist/js/state.js",
-      "sha256": "d02e78a71a624a0c8d36f33efc4b5a4fa0d2ac49b329e53994c20ff60c386713"
+      "sha256": "aa74a99c881054f4bf7e9e09ca882c14dcf96d3befcd913c67b6701d0c22f335"
     }
   ],
   "package": {
     "name": "@wpmoo/ui",
-    "version": "2.1.0"
+    "version": "2.2.0"
   },
   "schemaVersion": 1
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wpmoo/ui",
-  "version": "2.1.0",
+  "version": "2.2.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,7 @@
     "./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",
     "./chart.js": "./dist/js/chart.js",
     "./chart.min.js": "./dist/js/chart.min.js",
     "./datepicker.js": "./dist/js/datepicker.js",
@@ -74,6 +75,7 @@
     "dist/js/table-of-contents.js",
     "dist/js/sheet.js",
     "dist/js/floating-panel.js",
+    "dist/js/image-gallery.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.0 (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)
  *

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