@wpmoo/ui 1.0.0-rc.3 → 1.0.0-rc.4

package/ASSET_LICENSE.md

@@ -14,4 +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.0.0-rc.3/THIRD_PARTY_NOTICES.md).
+[version-pinned third-party notices](https://github.com/wpmoo-org/ui/blob/v1.0.0-rc.4/THIRD_PARTY_NOTICES.md).
+Those notices are repository-only and are intentionally not shipped in the npm
+package.

package/README.md

@@ -24,18 +24,25 @@
 
 # Moo UI
 
-Moo UI preserves Bootstrap markup, variables, and JavaScript plugins wherever
-Bootstrap already provides the contract. For patterns Bootstrap does not
-provide, Moo UI adds small documented extensions, including optional ESM for
-Combobox, Context Menu, DataTable, Sidebar, Chart, Datepicker, and Slider.
-
-- **CSS-first.** Most components need only the stylesheet and ordinary HTML.
-- **Bootstrap owns native behavior.** Keep using Bootstrap's bundle for its
-  Dropdown, Modal, Offcanvas, Tooltip, Popover, Toast, and other plugins.
-- **Moo UI extends verified gaps.** Optional Moo UI ESM is explicit and
-  side-effect-free; importing it never scans the document automatically.
-- **Adopt all at once or gradually.** Use the full Bootstrap build or scope the
-  Moo UI component layer to a `.moo-ui` boundary.
+Moo UI gives Bootstrap 5.3 applications a calmer, shadcn-inspired product
+surface without asking teams to abandon the markup, variables, and plugin
+contracts they already use.
+
+It is built for server-rendered products, admin screens, dashboards, and SaaS
+interfaces where Bootstrap remains the public contract but the default visual
+language needs to feel more current.
+
+- **Bootstrap-native.** Keep familiar classes, form markup, layout utilities,
+  and Bootstrap JavaScript where Bootstrap already owns the behavior.
+- **CSS-first.** Most components need only one stylesheet and ordinary HTML.
+- **Gradual when needed.** Use the full build or scope Moo UI inside a
+  `.moo-ui` boundary while an existing Bootstrap app migrates piece by piece.
+- **Explicit runtime.** Optional Moo UI behavior loads through ESM entrypoints
+  only when a component needs behavior Bootstrap does not provide.
+
+This branch prepares `@wpmoo/ui@1.0.0-rc.4` for release. Until that
+npm tag is published, use npm's current published package or the floating
+quick demo below.
 
 ## Try It in 30 Seconds
 
@@ -51,23 +58,6 @@ The quick demo intentionally follows the floating npm tag:
 `moo-ui.css` is a complete Bootstrap CSS build with Moo UI defaults. Use it
 instead of another Bootstrap stylesheet, not in addition to one.
 
-## Runtime Ownership
-
-| Surface | Runtime owner | What to load |
-| --- | --- | --- |
-| Static HTML and CSS components | Browser + Bootstrap markup | `moo-ui.css`, or Bootstrap CSS followed by scoped `moo.css` |
-| Dropdown, Modal, Offcanvas, Tooltip, Popover, Toast, and other Bootstrap plugins | Bootstrap | Bootstrap's JavaScript bundle and documented initialization |
-| Combobox | Optional Moo UI ESM | `@wpmoo/ui/combobox.js`, then explicit initialization |
-| Context Menu pointer and keyboard invocation | Optional Moo UI ESM, composed with Bootstrap Dropdown | `@wpmoo/ui/context-menu.js`, then explicit initialization |
-| DataTable sorting, filtering, selection, pagination, and responsive card sync | Optional Moo UI ESM, composed with Bootstrap Table and controls | `@wpmoo/ui/datatable.js`, then explicit initialization |
-| Sidebar state and responsive coordination | Optional Moo UI ESM, composed with Bootstrap plugins | `@wpmoo/ui/sidebar.js`, then explicit initialization |
-| Chart rendering with light/dark theme toggle | Optional Moo UI ESM, self-contained bundle (Chart.js 4.5.1 bundled) | `@wpmoo/ui/chart.js`, then explicit initialization |
-| Datepicker with shadcn-like trigger/popover/calendar | Optional Moo UI ESM, self-contained (no third-party runtime) | `@wpmoo/ui/datepicker.js`, then explicit initialization |
-| Slider with native range input semantics | Optional Moo UI ESM, no third-party runtime | `@wpmoo/ui/slider.js`, then explicit initialization |
-
-Moo UI does not replace Bootstrap plugins and does not publish a mandatory
-aggregate JavaScript runtime.
-
 ## Install
 
 ```bash
@@ -100,71 +90,23 @@ import "bootstrap/dist/js/bootstrap.bundle.min.js"; // only when plugins are use
 </div>
 ```
 
-### Optional Moo UI ESM
-
-Initialize only the documented behavior gaps you use:
+### Optional runtime
 
 ```js
-import Combobox from "@wpmoo/ui/combobox.js";
-import ContextMenu from "@wpmoo/ui/context-menu.js";
-import DataTable from "@wpmoo/ui/datatable.js";
-import Sidebar from "@wpmoo/ui/sidebar.js";
-import Chart from "@wpmoo/ui/chart.js";
-import Datepicker from "@wpmoo/ui/datepicker.js";
-import Slider from "@wpmoo/ui/slider.js";
-
-Combobox.getOrCreateInstance(document.querySelector(".combobox"));
-ContextMenu.getOrCreateInstance(document.querySelector(".context-menu"));
-DataTable.getOrCreateInstance(document.querySelector(".datatable"));
-Sidebar.getOrCreateInstance(document.querySelector('[data-slot="sidebar-wrapper"]'));
-Chart.getOrCreateInstance(document.querySelector(".chart"));
-Datepicker.getOrCreateInstance(document.querySelector("[data-datepicker]"));
-Slider.getOrCreateInstance(document.querySelector("[data-slider]"));
+import MooUI from "@wpmoo/ui/moo-ui.js";
+
+const combobox = document.querySelector(".combobox");
+if (combobox) {
+  MooUI.Combobox.getOrCreateInstance(combobox);
+}
 ```
 
-See the [Installation guide](https://ui.wpmoo.org/installation/) for CDN
-recipes, load order, and troubleshooting.
-
-## Choose an Adoption Path
-
-| Situation | Recommended path |
-| --- | --- |
-| New page or whole application | Replace Bootstrap CSS with `moo-ui.css`. |
-| Existing Bootstrap application | Load `moo.css` after Bootstrap CSS and add `.moo-ui` around migrated regions. |
-| Static page with no interactive plugins | Load CSS only. |
-| Page using Bootstrap plugins | Keep Bootstrap's bundle and its documented initialization. |
-| Page using Combobox, Context Menu, DataTable, or Sidebar | Add only the corresponding optional Moo UI ESM module. |
-| Page using Chart, Datepicker, or Slider | Add only the corresponding optional Moo UI ESM module. Chart bundles its third-party runtime; Datepicker and Slider are self-contained with no third-party dependency. |
-
-## Public Package Surface
-
-`@wpmoo/ui` exports exactly these public entrypoints:
-
-| Export | Purpose |
-| --- | --- |
-| `@wpmoo/ui/moo-ui.css` | Full expanded CSS build |
-| `@wpmoo/ui/moo-ui.min.css` | Full minified CSS build |
-| `@wpmoo/ui/moo.css` | Scoped expanded component layer for `.moo-ui` |
-| `@wpmoo/ui/moo.min.css` | Scoped minified component layer |
-| `@wpmoo/ui/combobox.js` | Optional Combobox ESM lifecycle |
-| `@wpmoo/ui/context-menu.js` | Optional Context Menu ESM lifecycle |
-| `@wpmoo/ui/datatable.js` | Optional DataTable ESM lifecycle |
-| `@wpmoo/ui/chart.js` | Optional Chart ESM lifecycle (Chart.js 4.5.1 bundled) |
-| `@wpmoo/ui/chart.min.js` | Minified Chart bundle (artifact variant of chart.js) |
-| `@wpmoo/ui/datepicker.js` | Optional Datepicker ESM lifecycle (self-contained, no third-party runtime) |
-| `@wpmoo/ui/datepicker.min.js` | Minified Datepicker bundle (artifact variant of datepicker.js) |
-| `@wpmoo/ui/slider.js` | Optional Slider ESM lifecycle (native range input, no third-party runtime) |
-| `@wpmoo/ui/sidebar.js` | Optional Sidebar ESM lifecycle |
-| `@wpmoo/ui/scss/config` | Public Sass variable allow-list (LibSass `@import`) |
-| `@wpmoo/ui/certification.json` | Versioned support/evidence manifest |
-| `@wpmoo/ui/package.json` | Package metadata |
-
-The tarball also contains `README.md`, `LICENSE`, `ASSET_LICENSE.md`, and
-THIRD_PARTY_NOTICES.md. It does not publish catalog templates, preview
-artwork, catalog JavaScript, or internal SCSS partials beyond the public Sass
-config. Internal Sass partials and Jinja macros are repository build tools, not npm APIs.
-
-## Why Bootstrap Teams Try It
+The runtime bundle is optional and side-effect-free. Import the aggregate
+`@wpmoo/ui/moo-ui.js` entrypoint, or import only the component module you use.
+See the [Installation guide](https://ui.wpmoo.org/installation/) for npm, CDN,
+Sass, Bootstrap JavaScript, and ESM recipes.
+
+## Why Teams Try It
 
 - Keep server-rendered HTML, Bootstrap classes, and familiar plugin behavior.
 - Apply a restrained product rhythm to forms, overlays, navigation, data
@@ -172,15 +114,15 @@ config. Internal Sass partials and Jinja macros are repository build tools, not
 - Inspect static rendered examples and copy the resulting HTML contracts.
 - Start with one scoped region or replace the full stylesheet after review.
 
-Representative components include Button, Field, Table, DataTable, Dialog,
-Toast, Sheet, Combobox, Context Menu, and Sidebar. Browse the [component catalog](https://ui.wpmoo.org/components/)
-and composed [blocks](https://ui.wpmoo.org/blocks/).
+Browse the [component catalog](https://ui.wpmoo.org/components/), composed
+[blocks](https://ui.wpmoo.org/blocks/), and full
+[examples](https://ui.wpmoo.org/examples/).
 
 ## Designed, Not Just Restyled
 
-The README uses original WPMoo preview artwork stored under
-`site/static/images/`; those files are source assets for the public catalog and
-are not part of the npm package.
+Moo UI is tuned for product interfaces: compact controls, quiet cards,
+predictable overlays, readable forms, and data-heavy screens that still feel
+calm.
 
 <p align="center">
   <a href="https://ui.wpmoo.org/components/button/"><picture><source media="(prefers-color-scheme: dark)" srcset="https://ui.wpmoo.org/assets/images/readme/button-dark.svg"><img src="https://ui.wpmoo.org/assets/images/readme/button-light.svg" alt="Button preview" width="31%"></picture></a>
@@ -190,41 +132,27 @@ are not part of the npm package.
 
 ## Status And Support
 
-Moo UI is at the `1.0.0-rc.3` release candidate. Current package: `@wpmoo/ui@1.0.0-rc.3`. The
-package's certification manifest currently has `preview` status; catalog
-availability is WPMoo-maintained preview evidence, not independent or
-accredited certification. Read [Support & Evidence](https://ui.wpmoo.org/support/)
-for the Bootstrap range, browser policy, maturity definitions, limitations, and
-release evidence. Complete release notes are on
+Moo UI is preparing the `1.0.0-rc.4` release candidate. 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).
 
 ## Contributing
 
 Small documentation corrections, reduced reproductions, accessibility checks,
-and bounded component improvements are welcome. Start with
-[`CONTRIBUTING.md`](CONTRIBUTING.md), choose an
-[issue type](https://github.com/wpmoo-org/ui/issues/new/choose), and review the
-[Code of Conduct](CODE_OF_CONDUCT.md) and [security policy](SECURITY.md).
+and bounded component improvements are welcome. The
+[Contributing guide](https://ui.wpmoo.org/contributing/) covers local
+development, project boundaries, workflow, and issue types.
 
 ## Repository Layout And Development
 
-Moo UI Core is published from the repository root. Core source and package
-outputs live outside `site/`; `dist/` is the package build. The `site/` tree
-owns ui.wpmoo.org documentation, catalog chrome, public metadata, and protected
-preview artwork; it builds to `site-dist/`.
-
-```bash
-.venv/bin/python build.py
-.venv/bin/python dev.py
-.venv/bin/python -m unittest discover -s tests -v
-```
-
-Browse the local catalog at `http://localhost:4173/` while `dev.py` runs.
+Development setup and repository boundary notes live in the
+[Contributing guide](https://ui.wpmoo.org/contributing/). Consumer install
+paths live in the [Installation guide](https://ui.wpmoo.org/installation/).
 
 ## Licensing
 
-Moo UI source code is MIT licensed. WPMoo-generated visual assets under
-`site/static/images/` remain separately protected as described in
-`ASSET_LICENSE.md`. Vendored dependencies retain their original licenses; see
-`LICENSE`, `ASSET_LICENSE.md`, and the
-[version-pinned third-party notices](https://github.com/wpmoo-org/ui/blob/v1.0.0-rc.3/THIRD_PARTY_NOTICES.md).
+Moo UI source code is MIT licensed. License details live in
+[LICENSE](LICENSE) and the [License page](https://ui.wpmoo.org/license/).
+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.0.0-rc.4/THIRD_PARTY_NOTICES.md).

package/certification.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": "0.1",
   "status": "preview",
-  "coreVersion": "1.0.0-rc.3",
+  "coreVersion": "1.0.0-rc.4",
   "bootstrap": {
     "canonicalVersion": "5.3.3",
     "targetRange": ">=5.3.0 <5.4",
@@ -21,6 +21,8 @@
       "./moo.min.css"
     ],
     "esm": [
+      "./moo-ui.js",
+      "./moo-ui.min.js",
       "./combobox.js",
       "./sidebar.js",
       "./context-menu.js",
@@ -31,7 +33,17 @@
       "./datepicker.js",
       "./datepicker.min.js"
     ],
-    "sass": ["./scss/config"]
+    "sass": [
+      "./scss/config",
+      "./scss/moo-ui",
+      "./scss/moo-core",
+      "./scss/components",
+      "./scss/settings"
+    ],
+    "metadata": [
+      "./certification.json",
+      "./package.json"
+    ]
   },
   "supportPolicy": "https://github.com/wpmoo-org/ui/blob/main/SUPPORT.md"
 }

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

@@ -12430,6 +12430,11 @@ textarea.form-control-lg {
   background-color: RGBA(var(--bs-dark-rgb), var(--bs-bg-opacity, 1)) !important;
 }
 
+.form-label,
+.form-check-label {
+  user-select: none;
+}
+
 :is(.btn, a, button, summary, [tabindex]):not(input, textarea, select):focus-visible,
 :is(.form-control, .form-select, .form-check-input):focus-visible {
   border-color: var(--moo-ring);
@@ -12717,6 +12722,24 @@ kbd {
   min-height: calc(2rem + var(--bs-border-width) * 2);
 }
 
+.form-control[type="file"]:not(.form-control-sm, .form-control-lg)::file-selector-button {
+  min-height: calc(2rem - var(--bs-border-width) * 2);
+}
+
+.form-control[type="time"] {
+  appearance: none;
+  position: relative;
+}
+
+.form-control[type="time"]::-webkit-calendar-picker-indicator {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  cursor: pointer;
+}
+
 .form-control:disabled,
 .form-select:disabled {
   opacity: var(--moo-disabled-control-opacity);
@@ -13197,9 +13220,9 @@ label.btn {
 }
 
 .card {
-  --bs-card-bg: var(--moo-surface);
+  --bs-card-bg: color-mix(in srgb, var(--bs-secondary-bg) 5%, var(--bs-body-bg));
   --bs-card-color: var(--moo-foreground);
-  --bs-card-border-color: var(--moo-border);
+  --bs-card-border-color: color-mix(in srgb, var(--bs-body-color) 10%, transparent);
   --bs-card-border-radius: var(--bs-border-radius-xl);
   --bs-card-inner-border-radius: calc(var(--bs-card-border-radius) - var(--bs-card-border-width));
   --bs-card-box-shadow: var(--bs-box-shadow-sm);
@@ -13207,6 +13230,7 @@ label.btn {
   --bs-card-cap-color: var(--moo-foreground);
   --bs-card-title-color: var(--moo-foreground);
   --bs-card-subtitle-color: var(--moo-muted-foreground);
+  --moo-card-footer-bg: color-mix(in srgb, var(--bs-secondary-bg) 20%, var(--bs-body-bg));
   --moo-card-spacing: 1rem;
   gap: var(--moo-card-spacing);
   padding-block: var(--moo-card-spacing);
@@ -13222,6 +13246,11 @@ label.btn {
   padding-block-start: 0;
 }
 
+.card[data-bs-theme="dark"], :where([data-bs-theme="dark"]) .card:not([data-bs-theme="light"]):not([data-bs-theme="light"] *) {
+  --bs-card-bg: color-mix(in srgb, var(--bs-secondary-bg) 30%, var(--bs-body-bg));
+  --moo-card-footer-bg: color-mix(in srgb, var(--bs-secondary-bg) 50%, var(--bs-body-bg));
+}
+
 .card--sm {
   --moo-card-spacing: 0.75rem;
 }
@@ -13264,7 +13293,7 @@ label.btn {
   gap: 0.5rem;
   padding: var(--moo-card-spacing);
   border-top: var(--bs-card-border-width) solid var(--bs-card-border-color);
-  background-color: var(--moo-muted-surface);
+  background-color: var(--moo-card-footer-bg);
 }
 
 .card-img-top {
@@ -14777,6 +14806,13 @@ label.btn {
   width: max-content;
 }
 
+.slider--vertical [data-slider-output] {
+  display: inline-block;
+  min-width: 3ch;
+  text-align: end;
+  font-variant-numeric: tabular-nums;
+}
+
 .slider--vertical .slider-track {
   justify-content: center;
   justify-self: center;
@@ -15537,9 +15573,8 @@ hr {
   width: 100%;
 }
 
-.moo-datepicker-time-row .moo-datepicker {
-  flex: 1 1 12rem;
-  width: auto;
+.moo-datepicker-time-row > :first-child {
+  min-width: 0;
 }
 
 .moo-datepicker-time {
@@ -15910,10 +15945,11 @@ hr {
 }
 
 .combobox-option {
-  display: flex;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 1rem;
   align-items: center;
   gap: 0.5rem;
-  padding-inline-end: 2rem;
+  padding-inline-end: 0.375rem;
   line-height: var(--moo-combobox-option-line-height);
 }
 
@@ -15924,10 +15960,20 @@ hr {
   flex-direction: column;
 }
 
+.combobox:not(.combobox--multiple) .combobox-option[aria-selected="true"],
 .combobox-option[aria-current="true"] {
   background-color: var(--bs-dropdown-link-hover-bg);
 }
 
+.combobox:not(.combobox--multiple)
+.combobox-menu:has(.combobox-option:not([aria-selected="true"]):hover)
+.combobox-option[aria-selected="true"]:not(:hover):not([aria-current="true"]),
+.combobox:not(.combobox--multiple)
+.combobox-menu:has(.combobox-option[aria-current="true"]:not([aria-selected="true"]))
+.combobox-option[aria-selected="true"]:not([aria-current="true"]) {
+  background-color: transparent;
+}
+
 .combobox-option[aria-selected="true"] {
   font-weight: 500;
 }
@@ -15953,8 +15999,7 @@ hr {
 
 .combobox-option__check {
   display: inline-flex;
-  flex: 0 0 auto;
-  margin-inline-start: auto;
+  justify-self: end;
   visibility: hidden;
 }
 
@@ -16982,11 +17027,6 @@ ul.context-menu-menu:focus-visible {
   --moo-datatable-min-width: 64rem;
 }
 
-.form-label,
-.form-check-label {
-  user-select: none;
-}
-
 .modal-backdrop,
 .offcanvas-backdrop {
   --bs-backdrop-opacity: var(--moo-overlay-backdrop-opacity, 1);