@neovici/cosmoz-bottom-bar 9.1.2 → 9.3.0

package/dist/cosmoz-bottom-bar.js

@@ -84,7 +84,13 @@ const style = css `
 		line-height: 40px;
 		overflow: hidden;
 		flex: 0 0 auto;
+	}
+	#bottomBarToolbar::slotted(
+			:not(slot):not([unstyled])[data-visibility='hidden']
+		) {
 		visibility: hidden;
+		width: 100%;
+		order: 9999;
 	}
 
 	#bottomBarToolbar::slotted(:not(slot)[disabled]) {
@@ -127,6 +133,9 @@ const useMenuButtons = (host) => {
         visible: new Set(),
         overflowing: new Set(),
     });
+    useEffect(() => {
+        host.dispatchEvent(new CustomEvent('reflow', { detail: buttonStates }));
+    }, [buttonStates]);
     const allButtons = useMemo(() => [...buttonStates.visible, ...buttonStates.overflowing], [buttonStates]);
     const processedButtons = useMemo(() => allButtons
         .map((btn) => ({
@@ -140,7 +149,7 @@ const useMenuButtons = (host) => {
     useEffect(() => {
         processedButtons.forEach(({ element, priority }, i) => {
             const isVisible = i < toolbarLimit;
-            element.style.visibility = isVisible ? 'visible' : 'hidden';
+            element.dataset.visibility = isVisible ? 'visible' : 'hidden';
             element.style.order = String(-priority);
         });
     }, [processedButtons, toolbarLimit]);
@@ -166,13 +175,13 @@ const CosmozBottomBar = (host) => {
     useLayoutEffect(() => {
         toggle(host, active);
     }, [active]);
-    return html `<div id="bar" part="bar">
+    return html ` <div id="bar" part="bar">
 		<div id="info" part="info"><slot name="info"></slot></div>
-		<div id="buttonContainer">
+		<div id="buttonContainer" part="buttons">
 			<slot id="bottomBarToolbar" ${overflow(setButtonStates)}></slot>
 		</div>
 
-		<cosmoz-dropdown-menu id="dropdown">
+		<cosmoz-dropdown-menu id="dropdown" part="dropdown">
 			<svg
 				slot="button"
 				width="4"
@@ -185,19 +194,19 @@ const CosmozBottomBar = (host) => {
 					fill-rule="evenodd"
 					clip-rule="evenodd"
 					d="M1.50996e-07 2C1.02714e-07 3.10457 0.89543 4 2 4C3.10457 4 4 3.10457 4 2C4 0.89543 3.10457 -3.91405e-08 2 -8.74228e-08C0.895431 -1.35705e-07 1.99278e-07 0.89543 1.50996e-07 2Z"
-					fill="white"
+					fill="currentColor"
 				/>
 				<path
 					fill-rule="evenodd"
 					clip-rule="evenodd"
 					d="M1.50996e-07 8C1.02714e-07 9.10457 0.89543 10 2 10C3.10457 10 4 9.10457 4 8C4 6.89543 3.10457 6 2 6C0.895431 6 1.99278e-07 6.89543 1.50996e-07 8Z"
-					fill="white"
+					fill="currentColor"
 				/>
 				<path
 					fill-rule="evenodd"
 					clip-rule="evenodd"
 					d="M1.50996e-07 14C1.02714e-07 15.1046 0.89543 16 2 16C3.10457 16 4 15.1046 4 14C4 12.8954 3.10457 12 2 12C0.895431 12 1.99278e-07 12.8954 1.50996e-07 14Z"
-					fill="white"
+					fill="currentColor"
 				/>
 			</svg>
 			${map(menuButtons, (menuButton) => html `

package/dist/overflow.d.ts

@@ -4,6 +4,7 @@ import { DirectiveResult } from 'lit-html/directive.js';
 type OnOverflow = (opts: {
     visible: Set<HTMLElement>;
     overflowing: Set<HTMLElement>;
+    hidden: Set<HTMLElement>;
 }) => void;
 declare class OverflowDirective extends AsyncDirective {
     observer?: IntersectionObserver;

package/dist/overflow.js

@@ -4,14 +4,30 @@ import { directive } from 'lit-html/directive.js';
 function isEntryHidden(el) {
     return el.boundingClientRect.height === 0;
 }
+function isElementHidden(el) {
+    return el.getBoundingClientRect().height === 0;
+}
 const check = (part) => {
     if (part.element.tagName !== 'SLOT') {
         throw new Error('Overflow directive must be used on a slot element');
     }
 };
+function reconcileHiddenElements(hidden, overflowing) {
+    // If a parent element was hidden, all its children were marked as hidden.
+    // When the parent becomes visible, the observer only reports entries for
+    // children that intersect the parent’s content box. Others remain stuck in
+    // `hidden` even if they should be `overflowing`. This pass corrects that.
+    hidden.forEach((el) => {
+        if (isElementHidden(el))
+            return;
+        overflowing.add(el);
+        hidden.delete(el);
+    });
+}
 const setupObserver = (slot, onOverflow) => {
     let visible = new Set();
     let overflowing = new Set();
+    let hidden = new Set();
     const observer = new IntersectionObserver((entries) => {
         entries.forEach((entry) => {
             const el = entry.target;
@@ -19,22 +35,27 @@ const setupObserver = (slot, onOverflow) => {
                 entry.intersectionRect.height !== 0) {
                 visible.add(el);
                 overflowing.delete(el);
+                hidden.delete(el);
             }
             else if (isEntryHidden(entry)) {
                 visible.delete(el);
                 overflowing.delete(el);
+                hidden.add(el);
             }
             else {
                 visible.delete(el);
                 overflowing.add(el);
+                hidden.delete(el);
             }
         });
-        onOverflow({ visible, overflowing });
+        reconcileHiddenElements(hidden, overflowing);
+        onOverflow({ visible, overflowing, hidden });
     }, { root: slot.parentElement, threshold: [0, 0.5, 1] });
     const observe = () => {
         const elements = Array.from(slot.assignedElements({ flatten: true }));
         const newVisible = new Set();
         const newOverflowing = new Set();
+        const newHidden = new Set();
         for (const c of elements) {
             if (visible.has(c)) {
                 newVisible.add(c);
@@ -42,13 +63,17 @@ const setupObserver = (slot, onOverflow) => {
             else if (overflowing.has(c)) {
                 newOverflowing.add(c);
             }
+            else if (hidden.has(c)) {
+                newHidden.add(c);
+            }
             else {
                 observer.observe(c);
             }
         }
         visible = newVisible;
         overflowing = newOverflowing;
-        onOverflow({ visible, overflowing });
+        hidden = newHidden;
+        onOverflow({ visible, overflowing, hidden });
     };
     observe();
     slot.addEventListener('slotchange', observe);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-bottom-bar",
-	"version": "9.1.2",
+	"version": "9.3.0",
 	"description": "A responsive bottom-bar that can house buttons/actions and a menu for the buttons that won't fit the available width.",
 	"keywords": [
 		"polymer",