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

package/README.md

@@ -194,9 +194,9 @@ calm.
 
 ## Status And Support
 
-The stable public-contract release is `1.1.0`. It adds a shared Table of
-Contents component, description-only Alerts and compatible navigation fixes
-while preserving the 1.0.0 package contract. Component certification remains
+The `1.2.0` release target adds the Empty component and optional Tabs content
+height, with fixes for App container sizing and release validation. It preserves
+the frozen 1.1.0 public package contract. 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 +222,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.1.0/THIRD_PARTY_NOTICES.md).
+[version-pinned third-party notices](https://github.com/wpmoo-org/ui/blob/v1.2.0/THIRD_PARTY_NOTICES.md).

package/certification.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": "0.1",
   "status": "preview",
-  "coreVersion": "1.1.0",
+  "coreVersion": "1.2.0",
   "bootstrap": {
     "canonicalVersion": "5.3.3",
     "targetRange": ">=5.3.0 <5.4",

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

@@ -1,5 +1,5 @@
 /*!
- * Moo UI v1.1.0 (https://wpmoo.org/)
+ * Moo UI v1.2.0 (https://wpmoo.org/)
  * Copyright 2026 WPMoo Authors
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  *
@@ -13318,6 +13318,61 @@ label.btn {
     color: var(--moo-muted-foreground);
   }
 
+  /* Empty */
+  .empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    min-width: 0;
+    gap: 1.5rem;
+    padding: 1.5rem;
+    text-align: center;
+    border-width: var(--bs-border-width);
+    border-style: dashed;
+    border-color: var(--bs-border-color);
+    border-radius: var(--bs-border-radius-lg);
+  }
+  .empty-state-header {
+    display: flex;
+    flex-direction: column;
+    align-items: inherit;
+    gap: 0.5rem;
+  }
+  .empty-state-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.75rem;
+    font-size: 1.53125rem;
+    line-height: 1;
+    color: var(--bs-secondary-color);
+    background-color: var(--bs-tertiary-bg);
+    border-radius: var(--bs-border-radius-lg);
+  }
+  .empty-state-icon > [data-icon] {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .empty-state-title {
+    margin: 0;
+    font-size: 1.09375rem;
+    font-weight: 600;
+    line-height: 1.2;
+  }
+  .empty-state-description {
+    margin: 0;
+    font-size: 0.875rem;
+    color: var(--bs-secondary-color);
+  }
+  .empty-state-actions {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: inherit;
+    gap: 0.5rem;
+  }
+
   /* Table */
   .card .table {
     --bs-table-bg: transparent;
@@ -14977,6 +15032,12 @@ label.btn {
     pointer-events: auto;
     transition-delay: 0s;
   }
+  .tabs--content-height > .tab-content {
+    display: block;
+  }
+  .tabs--content-height > .tab-content > .tab-pane:not(.active) {
+    display: none;
+  }
 
   /* Collapsible */
   .collapsible {
@@ -17144,6 +17205,84 @@ label.btn {
 .wrapper[data-layout="app"] > [data-slot="page"] > footer {
     flex: 0 0 auto;
   }
+  @supports (container-type: inline-size) {
+    .wrapper[data-layout="app"] > [data-slot="page"] {
+      container: moo-shell / inline-size;
+    }
+    .wrapper[data-layout="app"] > [data-slot="page"] > :is(header, main, footer) > :is( .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl   ) {
+      max-width: none;
+    }
+    @container moo-shell (min-width: 576px) {
+      .wrapper[data-layout="app"] > [data-slot="page"] > :is(header, main, footer) > .container {
+        max-width: 540px;
+      }
+      .wrapper[data-layout="app"] > [data-slot="page"] > :is(header, main, footer) > .container-sm {
+        max-width: 540px;
+      }
+    }
+    @container moo-shell (min-width: 768px) {
+      .wrapper[data-layout="app"] > [data-slot="page"] > :is(header, main, footer) > .container {
+        max-width: 720px;
+      }
+      .wrapper[data-layout="app"] > [data-slot="page"] > :is(header, main, footer) > .container-sm {
+        max-width: 720px;
+      }
+      .wrapper[data-layout="app"] > [data-slot="page"] > :is(header, main, footer) > .container-md {
+        max-width: 720px;
+      }
+    }
+    @container moo-shell (min-width: 992px) {
+      .wrapper[data-layout="app"] > [data-slot="page"] > :is(header, main, footer) > .container {
+        max-width: 960px;
+      }
+      .wrapper[data-layout="app"] > [data-slot="page"] > :is(header, main, footer) > .container-sm {
+        max-width: 960px;
+      }
+      .wrapper[data-layout="app"] > [data-slot="page"] > :is(header, main, footer) > .container-md {
+        max-width: 960px;
+      }
+      .wrapper[data-layout="app"] > [data-slot="page"] > :is(header, main, footer) > .container-lg {
+        max-width: 960px;
+      }
+    }
+    @container moo-shell (min-width: 1200px) {
+      .wrapper[data-layout="app"] > [data-slot="page"] > :is(header, main, footer) > .container {
+        max-width: 1140px;
+      }
+      .wrapper[data-layout="app"] > [data-slot="page"] > :is(header, main, footer) > .container-sm {
+        max-width: 1140px;
+      }
+      .wrapper[data-layout="app"] > [data-slot="page"] > :is(header, main, footer) > .container-md {
+        max-width: 1140px;
+      }
+      .wrapper[data-layout="app"] > [data-slot="page"] > :is(header, main, footer) > .container-lg {
+        max-width: 1140px;
+      }
+      .wrapper[data-layout="app"] > [data-slot="page"] > :is(header, main, footer) > .container-xl {
+        max-width: 1140px;
+      }
+    }
+    @container moo-shell (min-width: 1400px) {
+      .wrapper[data-layout="app"] > [data-slot="page"] > :is(header, main, footer) > .container {
+        max-width: 1320px;
+      }
+      .wrapper[data-layout="app"] > [data-slot="page"] > :is(header, main, footer) > .container-sm {
+        max-width: 1320px;
+      }
+      .wrapper[data-layout="app"] > [data-slot="page"] > :is(header, main, footer) > .container-md {
+        max-width: 1320px;
+      }
+      .wrapper[data-layout="app"] > [data-slot="page"] > :is(header, main, footer) > .container-lg {
+        max-width: 1320px;
+      }
+      .wrapper[data-layout="app"] > [data-slot="page"] > :is(header, main, footer) > .container-xl {
+        max-width: 1320px;
+      }
+      .wrapper[data-layout="app"] > [data-slot="page"] > :is(header, main, footer) > .container-xxl {
+        max-width: 1320px;
+      }
+    }
+  }
   .wrapper[data-layout="app"] > [data-slot="page"] > main {
     display: flex;
     min-height: 0;