@livx.cc/bare-v3 0.1.0-alpha.46 → 0.1.0-alpha.47

package/dist/manifest.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.0-alpha.46",
+  "version": "0.1.0-alpha.47",
   "cssSha256": "4b198a96fb6998163311dad7e93b6bcbfe4e5553a3ef5d7d79c1a7dcd6e9ed39",
   "classes": [
     "b3-accordion",
@@ -295,7 +295,7 @@
         "b3-dropdown-panel",
         "b3-tree"
       ],
-      "guidance": "Accordion and dropdown use native details/summary. Dropdown is a disclosure containing ordinary links/buttons, not an ARIA menu. mount() adds outside-click and Escape dismissal. Tree is a nested list/details presentation, not a role=tree widget. Browser disclosure behavior supplies keyboard activation.",
+      "guidance": "Accordion and dropdown use native details/summary. Dropdown is a disclosure containing ordinary links/buttons, not an ARIA menu. mount() adds outside-click and Escape dismissal, shifts the dropdown within horizontal viewport bounds, and opens it on the roomier side with a scrollable height when space is limited. Authored height limits are respected; close and unmount restore inline placement styles. Placement follows viewport resize and ancestor scrolling; scrolling the panel itself preserves its position. A trigger scrolled fully outside the viewport closes its disclosure without moving focus. Tree is a nested list/details presentation, not a role=tree widget. Browser disclosure behavior supplies keyboard activation.",
       "example": "<details class=\"b3-accordion\"><summary>More information</summary><p>Useful details.</p></details><details class=\"b3-dropdown\"><summary class=\"b3-button\">Actions</summary><div class=\"b3-dropdown-panel\"><a class=\"b3-nav-link\" href=\"#details\">View details</a></div></details>"
     },
     {

package/dist/references/disclosure.md

@@ -1,6 +1,6 @@
 # Accordion, dropdown and hierarchy
 
-Accordion and dropdown use native details/summary. Dropdown is a disclosure containing ordinary links/buttons, not an ARIA menu. mount() adds outside-click and Escape dismissal. Tree is a nested list/details presentation, not a role=tree widget. Browser disclosure behavior supplies keyboard activation.
+Accordion and dropdown use native details/summary. Dropdown is a disclosure containing ordinary links/buttons, not an ARIA menu. mount() adds outside-click and Escape dismissal, shifts the dropdown within horizontal viewport bounds, and opens it on the roomier side with a scrollable height when space is limited. Authored height limits are respected; close and unmount restore inline placement styles. Placement follows viewport resize and ancestor scrolling; scrolling the panel itself preserves its position. A trigger scrolled fully outside the viewport closes its disclosure without moving focus. Tree is a nested list/details presentation, not a role=tree widget. Browser disclosure behavior supplies keyboard activation.
 
 Classes: b3-accordion, b3-dropdown, b3-dropdown-panel, b3-tree
 

package/dist/ui.js

@@ -305,18 +305,55 @@ function reel({ root, document: document2, find, options }) {
 
 // src/interactions/disclosures.js
 function disclosures({ root, document: document2, options }) {
+  const placements = new Map;
+  const properties = ["transform", "inset-block-start", "inset-block-end", "max-block-size"];
+  function restore(panel) {
+    const original = placements.get(panel);
+    if (!original)
+      return;
+    for (const [property, value, priority] of original) {
+      if (value)
+        panel.style.setProperty(property, value, priority);
+      else
+        panel.style.removeProperty(property);
+    }
+  }
+  options.signal.addEventListener("abort", () => {
+    for (const panel of placements.keys())
+      restore(panel);
+    placements.clear();
+  }, { once: true });
   function placeDisclosure(disclosure) {
     const panel = disclosure.querySelector(".b3-dropdown-panel");
-    if (!panel || !disclosure.open)
+    if (!panel)
+      return;
+    restore(panel);
+    if (!disclosure.open) {
+      placements.delete(panel);
       return;
-    panel.style.transform = "";
-    panel.style.insetBlockStart = "";
-    panel.style.insetBlockEnd = "";
+    }
+    if (!placements.has(panel)) {
+      placements.set(panel, properties.map((property) => [
+        property,
+        panel.style.getPropertyValue(property),
+        panel.style.getPropertyPriority(property)
+      ]));
+    }
     const viewport = document2.defaultView;
     const bounds = panel.getBoundingClientRect();
     const shift = bounds.left < 8 ? 8 - bounds.left : bounds.right > viewport.innerWidth - 8 ? viewport.innerWidth - 8 - bounds.right : 0;
     panel.style.transform = `translateX(${shift}px)`;
-    if (bounds.bottom > viewport.innerHeight - 8 && disclosure.getBoundingClientRect().top > bounds.height + 8) {
+    const trigger = disclosure.getBoundingClientRect();
+    if (trigger.bottom <= 0 || trigger.top >= viewport.innerHeight) {
+      disclosure.open = false;
+      return;
+    }
+    const gap = Math.max(0, bounds.top - trigger.bottom);
+    const below = Math.max(0, viewport.innerHeight - trigger.bottom - gap - 8);
+    const above = Math.max(0, trigger.top - gap - 8);
+    const opensAbove = bounds.height > below && above > below;
+    panel.style.maxBlockSize = `${Math.min(bounds.height, opensAbove ? above : below)}px`;
+    if (opensAbove) {
       panel.style.insetBlockStart = "auto";
       panel.style.insetBlockEnd = "calc(100% + .5rem)";
     }
@@ -328,6 +365,14 @@ function disclosures({ root, document: document2, options }) {
   document2.defaultView.addEventListener("resize", () => {
     root.querySelectorAll("details.b3-dropdown[open]").forEach(placeDisclosure);
   }, options);
+  document2.defaultView.addEventListener("scroll", (event) => {
+    for (const disclosure of root.querySelectorAll("details.b3-dropdown[open]")) {
+      const panel = disclosure.querySelector(".b3-dropdown-panel");
+      if (event.target?.nodeType && panel?.contains(event.target))
+        continue;
+      placeDisclosure(disclosure);
+    }
+  }, { ...options, capture: true, passive: true });
   root.addEventListener("keydown", (event) => {
     if (event.key === "Escape") {
       const disclosure = event.target.closest?.("details.b3-dropdown[open]");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livx.cc/bare-v3",
-  "version": "0.1.0-alpha.46",
+  "version": "0.1.0-alpha.47",
   "type": "module",
   "files": [
     "dist",