@wpmoo/ui 1.0.0 → 1.1.0-dev.1

package/README.md

@@ -59,6 +59,9 @@ head before this stylesheet loads.
 
 ## Install
 
+Local development candidates use separate tarballs. Public install and license
+links refer to the published stable release.
+
 ```bash
 npm install @wpmoo/ui bootstrap
 ```
@@ -191,6 +194,10 @@ calm.
 
 ## Status And Support
 
+The current development snapshot is `1.1.0-dev.1`. It adds a shared Table of
+Contents component and is not published to npm; use the locally packed tarball
+when evaluating this snapshot.
+
 The stable public-contract release is `1.0.0`. 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

package/certification.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": "0.1",
   "status": "preview",
-  "coreVersion": "1.0.0",
+  "coreVersion": "1.1.0-dev.1",
   "bootstrap": {
     "canonicalVersion": "5.3.3",
     "targetRange": ">=5.3.0 <5.4",
@@ -28,6 +28,7 @@
       "./context-menu.js",
       "./datatable.js",
       "./slider.js",
+      "./table-of-contents.js",
       "./sheet.js",
       "./chart.js",
       "./chart.min.js",

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

@@ -1,5 +1,5 @@
 /*!
- * Moo UI v1.0.0 (https://wpmoo.org/)
+ * Moo UI v1.1.0-dev.1 (https://wpmoo.org/)
  * Copyright 2026 WPMoo Authors
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  *
@@ -13724,6 +13724,53 @@ label.btn {
     border-color: var(--moo-primary);
   }
 
+  /* Table of contents */
+  [data-toc] > .fw-semibold {
+    padding-inline-start: calc(0.75rem - var(--bs-border-width));
+  }
+  [data-toc]:has(> .nav) {
+    position: relative;
+    border-inline-start: calc(var(--bs-border-width) * 0.5) solid var(--bs-border-color);
+  }
+  [data-toc][data-toc-marker]::after {
+    content: "";
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: calc(var(--bs-border-width) * -1);
+    block-size: var(--moo-toc-marker-height);
+    border-inline-start: calc(var(--bs-border-width) * 3) solid var(--moo-primary);
+    transform: translateY(var(--moo-toc-marker-offset));
+    pointer-events: none;
+    transition: all 0.2s ease-in-out;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    [data-toc][data-toc-marker]::after {
+      transition: none;
+    }
+  }
+  [data-toc] > .nav .nav-link {
+    display: flex;
+    position: relative;
+    margin-inline-start: calc(var(--bs-border-width) * -1);
+    color: var(--moo-muted-foreground);
+  }
+  [data-toc] > .nav .nav-link::before {
+    content: "";
+    position: absolute;
+    inset-block: var(--bs-nav-link-padding-y);
+    inset-inline-start: 0;
+    border-inline-start: calc(var(--bs-border-width) * 3) solid transparent;
+  }
+  [data-toc] > .nav .nav-link.active {
+    color: var(--moo-foreground);
+  }
+  [data-toc] > .nav .nav-link.active::before {
+    border-inline-start-color: var(--moo-primary);
+  }
+  [data-toc][data-toc-marker] > .nav .nav-link.active::before {
+    border-inline-start-color: transparent;
+  }
+
   /* Skeleton */
   .skeleton {
     color: var(--moo-border);
@@ -16922,6 +16969,14 @@ label.btn {
       --moo-scroll-fade-e: var(--moo-scroll-fade-e-size);
     }
   }
+  .scroll-smooth {
+    scroll-behavior: smooth;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .scroll-smooth {
+      scroll-behavior: auto;
+    }
+  }
 
   /* Application layout */
   .sidebar {
@@ -16956,9 +17011,6 @@ label.btn {
     background: transparent;
     transition: background 0.15s ease;
   }
-  .sidebar-rail:hover::after {
-    background: var(--moo-sidebar-border);
-  }
   .wrapper[data-layout="app"][data-shell-mode="contained"] .sidebar-inner {
     position: relative;
     height: 100%;