@wpmoo/ui 1.3.0 → 1.4.0

package/ASSET_LICENSE.md

@@ -14,6 +14,6 @@ product, site, template, library, training dataset, or marketing asset without
 prior written permission from WPMoo.
 
 Third-party assets remain under their own licenses. See the
-[version-pinned third-party notices](https://github.com/wpmoo-org/ui/blob/v1.3.0/THIRD_PARTY_NOTICES.md).
+[version-pinned third-party notices](https://github.com/wpmoo-org/ui/blob/v1.4.0/THIRD_PARTY_NOTICES.md).
 Those notices are repository-only and are intentionally not shipped in the npm
 package.

package/README.md

@@ -168,6 +168,29 @@ import { initSheets } from "@wpmoo/ui/sheet.js";
 initSheets(document);
 ```
 
+For an opt-in document overlay scrollbar, load the stylesheet first and pass
+the resolved page theme owner explicitly:
+
+```js
+import OverlayScrollbar from "@wpmoo/ui/overlay-scrollbar.js";
+const scrollbar = OverlayScrollbar.getOrCreateInstance(document.querySelector(".moo-ui"), {
+  label: "Page scroll position", // supply a localized accessible name
+  hideDelay: 900,
+});
+// scrollbar.refresh(); // after host geometry changes
+// scrollbar.dispose(); // restore the native scrollbar
+```
+
+The module preserves native document/touch/wheel scrolling. Its thin thumb
+appears while scrolling, near the trailing mouse edge or on keyboard focus;
+show/hide never reserves a layout gutter. Initial activation removes any native
+gutter. By default it controls the standards-mode document. Pass
+`scrollElement: element` for an existing native scrolling region belonging to
+the same theme owner; the catalog uses this for its Page main region. There is
+one instance per scroll target, without replacing or wrapping that target.
+Printing, forced colors and horizontal overflow use the
+native scrollbar instead. It does not initialize merely by importing the module.
+
 ## Why Teams Try It
 
 - Keep server-rendered HTML, Bootstrap classes, and familiar plugin behavior.
@@ -194,9 +217,10 @@ calm.
 
 ## Status And Support
 
-The `1.3.0` minor release target adds Accordion Panels compositions and optional
-plus/minus indicators while preserving explicit Alert icon sizes. It
-preserves the 1.2.2 package exports and existing component defaults. Component certification remains
+The `1.4.0` minor release target adds the opt-in OverlayScrollbar module and
+scoped Sass support while preserving native scrolling. It retains existing
+1.3.0 exports and component defaults and corrects logical text alignment.
+The catalog shares this runtime and unifies its reading navigation. Component certification remains
 `preview`, with its documented manual and browser/device limits. Public exports, package boundaries, browser support, and release evidence live in [Support & Evidence](https://ui.wpmoo.org/support/).
 Complete release notes are on
 [GitHub Releases](https://github.com/wpmoo-org/ui/releases).
@@ -222,4 +246,4 @@ The published `LICENSE` also retains the full MIT notices for bundled
 Chart.js and `@kurkle/color`.
 Asset terms live in [ASSET_LICENSE.md](ASSET_LICENSE.md); dependency notices
 live in the
-[version-pinned third-party notices](https://github.com/wpmoo-org/ui/blob/v1.3.0/THIRD_PARTY_NOTICES.md).
+[version-pinned third-party notices](https://github.com/wpmoo-org/ui/blob/v1.4.0/THIRD_PARTY_NOTICES.md).

package/certification.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": "0.1",
   "status": "preview",
-  "coreVersion": "1.3.0",
+  "coreVersion": "1.4.0",
   "bootstrap": {
     "canonicalVersion": "5.3.3",
     "targetRange": ">=5.3.0 <5.4",
@@ -29,6 +29,7 @@
       "./datatable.js",
       "./slider.js",
       "./toc.js",
+      "./overlay-scrollbar.js",
       "./table-of-contents.js",
       "./sheet.js",
       "./chart.js",

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

@@ -1,5 +1,5 @@
 /*!
- * Moo UI v1.3.0 (https://wpmoo.org/)
+ * Moo UI v1.4.0 (https://wpmoo.org/)
  * Copyright 2026 WPMoo Authors
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  *
@@ -5624,11 +5624,11 @@ progress {
 }
 
 .text-start {
-  text-align: left !important;
+  text-align: start !important;
 }
 
 .text-end {
-  text-align: right !important;
+  text-align: end !important;
 }
 
 .text-center {
@@ -6900,10 +6900,10 @@ progress {
     column-gap: 3rem !important;
   }
   .text-sm-start {
-    text-align: left !important;
+    text-align: start !important;
   }
   .text-sm-end {
-    text-align: right !important;
+    text-align: end !important;
   }
   .text-sm-center {
     text-align: center !important;
@@ -7451,10 +7451,10 @@ progress {
     column-gap: 3rem !important;
   }
   .text-md-start {
-    text-align: left !important;
+    text-align: start !important;
   }
   .text-md-end {
-    text-align: right !important;
+    text-align: end !important;
   }
   .text-md-center {
     text-align: center !important;
@@ -8002,10 +8002,10 @@ progress {
     column-gap: 3rem !important;
   }
   .text-lg-start {
-    text-align: left !important;
+    text-align: start !important;
   }
   .text-lg-end {
-    text-align: right !important;
+    text-align: end !important;
   }
   .text-lg-center {
     text-align: center !important;
@@ -8553,10 +8553,10 @@ progress {
     column-gap: 3rem !important;
   }
   .text-xl-start {
-    text-align: left !important;
+    text-align: start !important;
   }
   .text-xl-end {
-    text-align: right !important;
+    text-align: end !important;
   }
   .text-xl-center {
     text-align: center !important;
@@ -9104,10 +9104,10 @@ progress {
     column-gap: 3rem !important;
   }
   .text-xxl-start {
-    text-align: left !important;
+    text-align: start !important;
   }
   .text-xxl-end {
-    text-align: right !important;
+    text-align: end !important;
   }
   .text-xxl-center {
     text-align: center !important;
@@ -9225,6 +9225,23 @@ progress {
   }
 }
 
+html.scrollbar-overlay-native {
+  scrollbar-width: none;
+}
+
+html.scrollbar-overlay-native::-webkit-scrollbar {
+  display: none;
+}
+
+@media print, (forced-colors: active) {
+  html.scrollbar-overlay-native {
+    scrollbar-width: auto !important;
+  }
+  html.scrollbar-overlay-native::-webkit-scrollbar {
+    display: revert !important;
+  }
+}
+
 @keyframes moo-overlay-backdrop-enter {
   from {
     opacity: 0;
@@ -16879,6 +16896,70 @@ label.btn {
   .border-dashed {
     border-style: dashed !important;
   }
+  .text-start {
+    text-align: start !important;
+  }
+  .text-end {
+    text-align: end !important;
+  }
+  .text-center {
+    text-align: center !important;
+  }
+  @media (min-width: 576px) {
+    .text-sm-start {
+      text-align: start !important;
+    }
+    .text-sm-end {
+      text-align: end !important;
+    }
+    .text-sm-center {
+      text-align: center !important;
+    }
+  }
+  @media (min-width: 768px) {
+    .text-md-start {
+      text-align: start !important;
+    }
+    .text-md-end {
+      text-align: end !important;
+    }
+    .text-md-center {
+      text-align: center !important;
+    }
+  }
+  @media (min-width: 992px) {
+    .text-lg-start {
+      text-align: start !important;
+    }
+    .text-lg-end {
+      text-align: end !important;
+    }
+    .text-lg-center {
+      text-align: center !important;
+    }
+  }
+  @media (min-width: 1200px) {
+    .text-xl-start {
+      text-align: start !important;
+    }
+    .text-xl-end {
+      text-align: end !important;
+    }
+    .text-xl-center {
+      text-align: center !important;
+    }
+  }
+  @media (min-width: 1400px) {
+    .text-xxl-start {
+      text-align: start !important;
+    }
+    .text-xxl-end {
+      text-align: end !important;
+    }
+    .text-xxl-center {
+      text-align: center !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;
@@ -17047,6 +17128,61 @@ label.btn {
       --moo-scroll-fade-e: var(--moo-scroll-fade-e-size);
     }
   }
+  .scrollbar-overlay-native {
+    scrollbar-width: none;
+  }
+  .scrollbar-overlay-native::-webkit-scrollbar {
+    display: none;
+  }
+  @media print, (forced-colors: active) {
+    .scrollbar-overlay-native {
+      scrollbar-width: auto !important;
+    }
+    .scrollbar-overlay-native::-webkit-scrollbar {
+      display: revert !important;
+    }
+  }
+  .scrollbar-overlay {
+    --moo-scrollbar-overlay-hit-size: 1.5rem;
+    --moo-scrollbar-overlay-thumb-size: 0.375rem;
+    position: fixed;
+    inset-block: 0;
+    inset-inline-end: 0;
+    z-index: 1030;
+    inline-size: var(--moo-scrollbar-overlay-hit-size);
+    color: var(--bs-secondary-color);
+    opacity: 0;
+    pointer-events: none;
+    touch-action: none;
+    transition: opacity 0.15s linear;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .scrollbar-overlay {
+      transition: none;
+    }
+  }
+  .scrollbar-overlay[data-scrollbar-visible="true"], .scrollbar-overlay:focus-visible {
+    opacity: 1;
+  }
+  .scrollbar-overlay[data-scrollbar-interactive="true"], .scrollbar-overlay:focus-visible {
+    pointer-events: auto;
+  }
+  .scrollbar-overlay:hover, .scrollbar-overlay:focus-visible {
+    color: var(--bs-emphasis-color);
+  }
+  .scrollbar-overlay-thumb {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-end: 0.25rem;
+    inline-size: var(--moo-scrollbar-overlay-thumb-size);
+    background-color: currentColor;
+    border-radius: var(--bs-border-radius-pill);
+  }
+  @media print, (forced-colors: active) {
+    .scrollbar-overlay {
+      display: none !important;
+    }
+  }
   .scroll-smooth {
     scroll-behavior: smooth;
   }