@wpmoo/ui 1.0.0-rc.8 → 1.0.0-rc.9

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

package/README.md

@@ -96,7 +96,7 @@ knows the request or session preference. Put it on the first application owner;
 keep `lang` and the document's default `dir` on `html`:
 
 ```html
-<!-- Server-resolved document: no prepaint required. -->
+<!-- Server-resolved document: no state bootstrap required. -->
 <html lang="en" dir="ltr">
   <body>
     <div class="moo-ui" data-bs-theme="dark" data-moo-document-owner="true">
@@ -113,7 +113,7 @@ when it needs independent browser persistence:
 ```html
 <!-- Static or strict-CSP fallback: classic script is the root's first child. -->
 <div class="moo-ui" data-bs-theme="light" data-moo-theme-key="portal:theme">
-  <script src="/vendor/@wpmoo/ui/theme-prepaint.js"></script>
+  <script src="/vendor/@wpmoo/ui/state.js"></script>
   <!-- embedded Moo UI fragment -->
 </div>
 ```
@@ -121,8 +121,8 @@ when it needs independent browser persistence:
 On a first visit, a static host without a known server preference can only
 correct a browser-only preference after the external asset is fetched, so that
 correction may be visible. The server value remains the deterministic fallback;
-an external fetch cannot guarantee zero flash in this profile. The published
-asset is available as `@wpmoo/ui/theme-prepaint.js`.
+an external fetch cannot guarantee zero flash in this profile. RC9 exposes
+this asset as `@wpmoo/ui/state.js`.
 
 ### Optional runtime
 
@@ -166,7 +166,7 @@ calm.
 
 ## Status And Support
 
-Moo UI is preparing the `1.0.0-rc.8` release candidate. Public exports, package boundaries, browser support, and release evidence live in [Support & Evidence](https://ui.wpmoo.org/support/).
+The current release candidate is `1.0.0-rc.9`. 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).
 
@@ -189,4 +189,4 @@ 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.8/THIRD_PARTY_NOTICES.md).
+[version-pinned third-party notices](https://github.com/wpmoo-org/ui/blob/v1.0.0-rc.9/THIRD_PARTY_NOTICES.md).

package/certification.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": "0.1",
   "status": "preview",
-  "coreVersion": "1.0.0-rc.8",
+  "coreVersion": "1.0.0-rc.9",
   "bootstrap": {
     "canonicalVersion": "5.3.3",
     "targetRange": ">=5.3.0 <5.4",
@@ -41,7 +41,7 @@
       "./scss/settings"
     ],
     "browser": [
-      "./theme-prepaint.js"
+      "./state.js"
     ],
     "metadata": [
       "./certification.json",

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

@@ -260,6 +260,8 @@
   --moo-chart-3: #a1a1aa;
   --moo-chart-4: #3f3f46;
   --moo-chart-5: #27272a;
+  --moo-heading-font-family: var(--bs-body-font-family);
+  font-family: var(--bs-body-font-family);
 }
 
 .moo-ui[data-bs-theme="light"] {
@@ -436,7 +438,7 @@
   direction: rtl;
 }
 
-body > .moo-ui[data-bs-theme] {
+body > .moo-ui[data-bs-theme]:not([data-moo-overlay-host]) {
   min-block-size: 100dvh;
 }
 
@@ -2777,7 +2779,7 @@ progress {
   height: 1.5em;
   content: "";
   background-color: var(--moo-input-bg, transparent);
-  border-radius: 0.625rem;
+  border-radius: var(--bs-border-radius-lg);
 }
 
 .form-floating > .form-control:-webkit-autofill ~ label {
@@ -9534,7 +9536,7 @@ progress {
     background-color: var(--moo-input-bg, transparent);
     background-clip: padding-box;
     border: var(--bs-border-width) solid var(--moo-border);
-    border-radius: 0.625rem;
+    border-radius: var(--bs-border-radius-lg);
     transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
   }
   @media (prefers-reduced-motion: reduce) {
@@ -9659,11 +9661,11 @@ progress {
   }
   .form-control-color::-moz-color-swatch {
     border: 0 !important;
-    border-radius: 0.625rem;
+    border-radius: var(--bs-border-radius-lg);
   }
   .form-control-color::-webkit-color-swatch {
     border: 0 !important;
-    border-radius: 0.625rem;
+    border-radius: var(--bs-border-radius-lg);
   }
   .form-control-color.form-control-sm {
     height: calc(1.42857em + 0.5rem + calc(var(--bs-border-width) * 2));
@@ -9687,7 +9689,7 @@ progress {
     background-position: right 0.625rem center;
     background-size: 16px 12px;
     border: var(--bs-border-width) solid var(--moo-border);
-    border-radius: 0.625rem;
+    border-radius: var(--bs-border-radius-lg);
     transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
   }
   @media (prefers-reduced-motion: reduce) {
@@ -9896,7 +9898,7 @@ progress {
     white-space: nowrap;
     background-color: var(--moo-input-bg, transparent);
     border: var(--bs-border-width) solid var(--moo-border);
-    border-radius: 0.625rem;
+    border-radius: var(--bs-border-radius-lg);
   }
   .input-group-lg > .form-control,
 .input-group-lg > .form-select,
@@ -15006,6 +15008,10 @@ label.btn {
   .field-group > hr {
     margin-block: 0;
   }
+  .field-group.row {
+    flex-direction: row;
+    gap: 0;
+  }
   .field-form {
     display: flex;
     flex-direction: column;
@@ -16643,7 +16649,7 @@ label.btn {
       max-height: none;
     }
   }
-  .sidebar[data-side="left"] .sidebar-inner {
+  .sidebar[data-side="left"]:not([data-variant="inset"]) .sidebar-inner {
     border-right: var(--bs-border-width) solid var(--moo-sidebar-border);
   }
   .sidebar[data-side="right"] {
@@ -16655,11 +16661,11 @@ label.btn {
   .wrapper[data-layout="app"]:dir(rtl) > .sidebar[data-side="right"] {
     order: 0;
   }
-  .sidebar[data-side="right"] .sidebar-inner {
+  .sidebar[data-side="right"]:not([data-variant="inset"]) .sidebar-inner {
     border-left: var(--bs-border-width) solid var(--moo-sidebar-border);
   }
   @media (min-width: 992px) {
-    .sidebar {
+    :where(.wrapper[data-layout="app"][data-sidebar-ready]) > .sidebar {
       transition: flex-basis 0.2s ease, width 0.2s ease;
     }
     .sidebar[data-variant="floating"] .sidebar-inner {
@@ -16699,6 +16705,10 @@ label.btn {
       box-shadow: var(--bs-box-shadow-sm);
       background: var(--bs-body-bg);
     }
+    .wrapper[data-layout="app"]:has(> .sidebar[data-variant="inset"]) > [data-slot="page"] > header {
+      border-top-left-radius: inherit;
+      border-top-right-radius: inherit;
+    }
     .wrapper[data-layout="app"][data-sidebar-state="collapsed"]:has(> .sidebar[data-variant="inset"]) > [data-slot="page"] {
       margin-left: 0.5rem;
     }
@@ -16730,7 +16740,6 @@ label.btn {
     min-height: 0;
     flex: 1 1 auto;
     flex-direction: column;
-    overflow-y: auto;
   }
   .wrapper[data-layout="app"] > [data-slot="page"] > header,
 .wrapper[data-layout="app"] > [data-slot="page"] > main,
@@ -16742,6 +16751,7 @@ label.btn {
     min-height: 0;
     flex: 1 1 auto;
     flex-direction: column;
+    overflow-y: auto;
   }
   .wrapper[data-layout="app"] > [data-slot="page"] > main > :is( .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl, .container-fluid ) {
     display: flex;
@@ -16759,6 +16769,235 @@ label.btn {
     .wrapper[data-layout="app"][data-shell-mode="contained"] > [data-slot="page"] {
       overflow: visible;
     }
+    .wrapper[data-layout="app"][data-shell-mode="contained"] > [data-slot="page"] > main {
+      overflow: visible;
+    }
+  }
+  [data-page-container] {
+    container: moo-page / inline-size;
+  }
+  [data-page-container] [data-page-show-from] {
+    display: none !important;
+  }
+  @container moo-page (min-width: 576px) {
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-sm="1"] {
+      width: 8.33333%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-sm="2"] {
+      width: 16.66667%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-sm="3"] {
+      width: 25%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-sm="4"] {
+      width: 33.33333%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-sm="5"] {
+      width: 41.66667%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-sm="6"] {
+      width: 50%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-sm="7"] {
+      width: 58.33333%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-sm="8"] {
+      width: 66.66667%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-sm="9"] {
+      width: 75%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-sm="10"] {
+      width: 83.33333%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-sm="11"] {
+      width: 91.66667%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-sm="12"] {
+      width: 100%;
+    }
+    [data-page-container] [data-page-show-from="sm"] {
+      display: block !important;
+    }
+    [data-page-container] [data-page-hide-from="sm"] {
+      display: none !important;
+    }
+  }
+  @container moo-page (min-width: 768px) {
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-md="1"] {
+      width: 8.33333%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-md="2"] {
+      width: 16.66667%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-md="3"] {
+      width: 25%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-md="4"] {
+      width: 33.33333%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-md="5"] {
+      width: 41.66667%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-md="6"] {
+      width: 50%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-md="7"] {
+      width: 58.33333%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-md="8"] {
+      width: 66.66667%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-md="9"] {
+      width: 75%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-md="10"] {
+      width: 83.33333%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-md="11"] {
+      width: 91.66667%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-md="12"] {
+      width: 100%;
+    }
+    [data-page-container] [data-page-show-from="md"] {
+      display: block !important;
+    }
+    [data-page-container] [data-page-hide-from="md"] {
+      display: none !important;
+    }
+  }
+  @container moo-page (min-width: 992px) {
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-lg="1"] {
+      width: 8.33333%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-lg="2"] {
+      width: 16.66667%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-lg="3"] {
+      width: 25%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-lg="4"] {
+      width: 33.33333%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-lg="5"] {
+      width: 41.66667%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-lg="6"] {
+      width: 50%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-lg="7"] {
+      width: 58.33333%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-lg="8"] {
+      width: 66.66667%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-lg="9"] {
+      width: 75%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-lg="10"] {
+      width: 83.33333%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-lg="11"] {
+      width: 91.66667%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-lg="12"] {
+      width: 100%;
+    }
+    [data-page-container] [data-page-show-from="lg"] {
+      display: block !important;
+    }
+    [data-page-container] [data-page-hide-from="lg"] {
+      display: none !important;
+    }
+  }
+  @container moo-page (min-width: 1200px) {
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-xl="1"] {
+      width: 8.33333%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-xl="2"] {
+      width: 16.66667%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-xl="3"] {
+      width: 25%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-xl="4"] {
+      width: 33.33333%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-xl="5"] {
+      width: 41.66667%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-xl="6"] {
+      width: 50%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-xl="7"] {
+      width: 58.33333%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-xl="8"] {
+      width: 66.66667%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-xl="9"] {
+      width: 75%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-xl="10"] {
+      width: 83.33333%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-xl="11"] {
+      width: 91.66667%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-xl="12"] {
+      width: 100%;
+    }
+    [data-page-container] [data-page-show-from="xl"] {
+      display: block !important;
+    }
+    [data-page-container] [data-page-hide-from="xl"] {
+      display: none !important;
+    }
+  }
+  @container moo-page (min-width: 1400px) {
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-xxl="1"] {
+      width: 8.33333%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-xxl="2"] {
+      width: 16.66667%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-xxl="3"] {
+      width: 25%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-xxl="4"] {
+      width: 33.33333%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-xxl="5"] {
+      width: 41.66667%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-xxl="6"] {
+      width: 50%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-xxl="7"] {
+      width: 58.33333%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-xxl="8"] {
+      width: 66.66667%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-xxl="9"] {
+      width: 75%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-xxl="10"] {
+      width: 83.33333%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-xxl="11"] {
+      width: 91.66667%;
+    }
+    [data-page-container] .row[data-layout="page-grid"] > [data-page-col-xxl="12"] {
+      width: 100%;
+    }
+    [data-page-container] [data-page-show-from="xxl"] {
+      display: block !important;
+    }
+    [data-page-container] [data-page-hide-from="xxl"] {
+      display: none !important;
+    }
   }
   :scope[data-bs-theme="light"] .form-select {
     --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
@@ -16808,4 +17047,7 @@ label.btn {
 .offcanvas-backdrop.show::before {
     animation: moo-overlay-backdrop-enter var(--moo-overlay-motion-duration, 0.3s) ease-out both;
   }
+  :where(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6) {
+    font-family: var(--moo-heading-font-family, var(--bs-body-font-family));
+  }
 }