@wpmoo/ui 1.3.0 → 1.4.1

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.1/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.1` patch release target aligns nested Field labels and readable empty
+prompts across form controls, with normal-weight Date Picker values. Native
+selection, validation, disabled states and the 1.4.0 package API remain intact.
+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.1/THIRD_PARTY_NOTICES.md).

package/certification.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": "0.1",
   "status": "preview",
-  "coreVersion": "1.3.0",
+  "coreVersion": "1.4.1",
   "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.1 (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;
@@ -9588,7 +9605,7 @@ progress {
     padding: 0;
   }
   .form-control::placeholder {
-    color: var(--bs-tertiary-color);
+    color: var(--bs-secondary-color);
     opacity: 1;
   }
   .form-control:disabled {
@@ -12744,6 +12761,9 @@ progress {
   }
 
   /* Select */
+  .form-select:not(:disabled):not([multiple]):is(:not([size]), [size="1"]):has(option[data-placeholder="true"]:checked) {
+    color: var(--bs-secondary-color);
+  }
   .form-select option,
 .form-select optgroup {
     color: var(--bs-body-color);
@@ -15348,6 +15368,8 @@ label.btn {
   }
   .field > .form-label {
     margin-bottom: 0;
+  }
+  .field .form-label {
     font-weight: 500;
   }
   .field[data-invalid="true"] {
@@ -15426,6 +15448,7 @@ label.btn {
     max-width: var(--moo-datepicker-width);
   }
   .moo-datepicker__trigger {
+    --bs-btn-font-weight: 400;
     width: 100%;
     justify-content: flex-start;
     text-align: start;
@@ -15435,6 +15458,9 @@ label.btn {
     overflow: hidden;
     text-overflow: ellipsis;
   }
+  .moo-datepicker__trigger:not(:disabled):not(.is-invalid):not(:hover, :active, :focus-visible, [aria-expanded="true"]) [data-datepicker-empty="true"] {
+    color: var(--bs-secondary-color);
+  }
   .moo-datepicker__trigger.is-invalid {
     border-color: var(--bs-form-invalid-border-color);
     color: var(--bs-form-invalid-color);
@@ -16879,6 +16905,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 +17137,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;
   }