mnfst 0.5.123 → 0.5.125

package/lib/manifest.tabs.js

@@ -74,62 +74,79 @@ function initializeTabsPlugin() {
                 }
             }
 
-            // Ensure x-data exists
-            if (!commonParent.hasAttribute('x-data')) {
-                commonParent.setAttribute('x-data', '{}');
-            }
+            // Default tab value (first panel's id)
+            const defaultValue = panels.length > 0 ? panels[0].id : 'a';
+
+            // When Alpine has already initialized the scope (content injected at
+            // runtime, e.g. by the markdown plugin), x-data attribute edits are
+            // never re-read — write the property into the live scope instead.
+            const scopeHost = commonParent.hasAttribute('x-data') ? commonParent : commonParent.closest('[x-data]');
+            const liveData = scopeHost && scopeHost._x_dataStack && window.Alpine && typeof window.Alpine.$data === 'function'
+                ? window.Alpine.$data(scopeHost)
+                : null;
+
+            if (liveData) {
+                if (!(tabProp in liveData)) liveData[tabProp] = defaultValue;
+            } else {
+                // Ensure x-data exists
+                if (!commonParent.hasAttribute('x-data')) {
+                    commonParent.setAttribute('x-data', '{}');
+                }
 
-            // Set up x-data with default value
-            const existingXData = commonParent.getAttribute('x-data') || '{}';
-            let newXData = existingXData;
-
-            // Check if the tab property already exists
-            // Escape special regex characters in tabProp
-            const escapedTabProp = tabProp.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-            const propertyRegex = new RegExp(`${escapedTabProp}\\s*:\\s*'[^']*'`, 'g');
-            if (!propertyRegex.test(newXData)) {
-                // Add the tab property with default value (first panel's id)
-                const defaultValue = panels.length > 0 ? panels[0].id : 'a';
-                const tabProperty = `${tabProp}: '${defaultValue}'`;
-
-                if (newXData === '{}') {
-                    newXData = `{ ${tabProperty} }`;
-                } else {
-                    const lastBraceIndex = newXData.lastIndexOf('}');
-                    if (lastBraceIndex > 0) {
-                        const beforeBrace = newXData.substring(0, lastBraceIndex);
-                        const afterBrace = newXData.substring(lastBraceIndex);
-                        const separator = beforeBrace.trim().endsWith(',') ? '' : ', ';
-                        newXData = beforeBrace + separator + tabProperty + afterBrace;
+                // Set up x-data with default value
+                const existingXData = commonParent.getAttribute('x-data') || '{}';
+                let newXData = existingXData;
+
+                // Check if the tab property already exists
+                // Escape special regex characters in tabProp
+                const escapedTabProp = tabProp.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+                const propertyRegex = new RegExp(`${escapedTabProp}\\s*:\\s*'[^']*'`, 'g');
+                if (!propertyRegex.test(newXData)) {
+                    const tabProperty = `${tabProp}: '${defaultValue}'`;
+
+                    if (newXData === '{}') {
+                        newXData = `{ ${tabProperty} }`;
+                    } else {
+                        const lastBraceIndex = newXData.lastIndexOf('}');
+                        if (lastBraceIndex > 0) {
+                            const beforeBrace = newXData.substring(0, lastBraceIndex);
+                            const afterBrace = newXData.substring(lastBraceIndex);
+                            const separator = beforeBrace.trim().endsWith(',') ? '' : ', ';
+                            newXData = beforeBrace + separator + tabProperty + afterBrace;
+                        }
                     }
-                }
 
-                if (newXData !== existingXData) {
-                    commonParent.setAttribute('x-data', newXData);
+                    if (newXData !== existingXData) {
+                        commonParent.setAttribute('x-data', newXData);
+                    }
                 }
             }
 
             // ----- Accessibility wiring (WAI-ARIA Tabs pattern) -----
             //
-            // Per the ARIA APG, a tabs widget needs:
-            //   - role="tablist" on the tab container (parent of buttons)
-            //   - role="tab" + aria-selected + aria-controls + tabindex on each button
-            //   - role="tabpanel" + aria-labelledby + tabindex="0" on each panel
-            //   - arrow-key navigation between tabs (with roving tabindex)
-            //
-            // We compute the tab-container element as the closest common ancestor of
-            // the relevant buttons (often a <nav> or <div>). Each button is assigned
-            // a stable id if it doesn't have one, so panels can reference it.
+            // The full APG tabs pattern (role="tab"/"tabpanel", aria-controls,
+            // roving tabindex, arrow-key navigation) is applied only when the
+            // author wraps the buttons in an element with role="tablist" —
+            // those roles are only valid inside one, and inferring a container
+            // risks claiming the wrong element. Without a tablist, buttons stay
+            // plain buttons and panels plain regions; :aria-selected still
+            // syncs as the selected-state hook.
+            const tablists = new Set();
+            relevantButtons.forEach((b) => {
+                const t = b.closest('[role=tablist]');
+                if (t) tablists.add(t);
+            });
+            const wireAria = tablists.size > 0;
 
-            // Assign ids where missing.
+            // Assign ids where missing (needed for aria-labelledby/controls).
             const buttonIdByTabValue = {};
             relevantButtons.forEach((button, i) => {
                 const tabValue = button.getAttribute('x-tab');
                 if (!tabValue) return;
-                if (!button.id) {
+                if (!button.id && wireAria) {
                     button.id = `mnfst-tab-${sanitizedPanelSet || 'g'}-${tabValue.replace(/[^a-zA-Z0-9_-]/g, '-')}-${i}`;
                 }
-                buttonIdByTabValue[tabValue] = button.id;
+                if (button.id) buttonIdByTabValue[tabValue] = button.id;
             });
 
             // Process panels for this group - add x-show + a11y attributes
@@ -142,12 +159,14 @@ function initializeTabsPlugin() {
                 if (!panel.element.id) panel.element.id = panel.id;
 
                 // ARIA: role + label + focusable
-                panel.element.setAttribute('role', 'tabpanel');
-                if (!panel.element.hasAttribute('tabindex')) {
-                    panel.element.setAttribute('tabindex', '0');
+                if (wireAria) {
+                    panel.element.setAttribute('role', 'tabpanel');
+                    if (!panel.element.hasAttribute('tabindex')) {
+                        panel.element.setAttribute('tabindex', '0');
+                    }
+                    const labelledBy = buttonIdByTabValue[panel.id];
+                    if (labelledBy) panel.element.setAttribute('aria-labelledby', labelledBy);
                 }
-                const labelledBy = buttonIdByTabValue[panel.id];
-                if (labelledBy) panel.element.setAttribute('aria-labelledby', labelledBy);
 
                 // Remove x-tabpanel attribute since we've converted it
                 panel.element.removeAttribute('x-tabpanel');
@@ -163,56 +182,50 @@ function initializeTabsPlugin() {
                 const clickHandler = `${tabProp} = '${tabValue}'`;
                 button.setAttribute('x-on:click', clickHandler);
 
-                // ARIA: role, selection state (reactive via :aria-selected), controls
-                button.setAttribute('role', 'tab');
+                // Selection state (reactive via :aria-selected) — always synced;
+                // it doubles as the documented selected-state styling hook
                 button.setAttribute(':aria-selected', `String(${tabProp} === '${tabValue}')`);
-                // Roving tabindex: -1 when not active so arrow keys, not Tab, move between tabs.
-                button.setAttribute(':tabindex', `${tabProp} === '${tabValue}' ? '0' : '-1'`);
-                const panel = panels.find((p) => p.id === tabValue);
-                if (panel && panel.element.id) {
-                    button.setAttribute('aria-controls', panel.element.id);
+
+                // ARIA: role, roving tabindex, controls — only inside an author tablist
+                if (button.closest('[role=tablist]')) {
+                    button.setAttribute('role', 'tab');
+                    // Roving tabindex: -1 when not active so arrow keys, not Tab, move between tabs.
+                    button.setAttribute(':tabindex', `${tabProp} === '${tabValue}' ? '0' : '-1'`);
+                    const panel = panels.find((p) => p.id === tabValue);
+                    if (panel && panel.element.id) {
+                        button.setAttribute('aria-controls', panel.element.id);
+                    }
                 }
 
                 // Remove x-tab attribute since we've converted it
                 button.removeAttribute('x-tab');
             });
 
-            // Find the tablist container — closest common ancestor of all relevant
-            // buttons. If they share a direct parent that's the tablist; otherwise
-            // walk up until one wraps them all. Set role="tablist" + a keydown
-            // handler that walks the focusable tabs on Left/Right/Home/End.
-            if (relevantButtons.length > 0) {
-                let tablistEl = relevantButtons[0].parentElement;
-                while (tablistEl && tablistEl !== document.body) {
-                    if (relevantButtons.every((b) => tablistEl.contains(b))) break;
-                    tablistEl = tablistEl.parentElement;
+            // Arrow-key navigation (Left/Right/Home/End) on each author tablist.
+            tablists.forEach((tablistEl) => {
+                if (!tablistEl.__mnfstTabsKeydown) {
+                    tablistEl.__mnfstTabsKeydown = (e) => {
+                        const target = e.target;
+                        if (!target || target.getAttribute('role') !== 'tab') return;
+                        const tabs = Array.from(tablistEl.querySelectorAll('[role="tab"]'));
+                        const idx = tabs.indexOf(target);
+                        if (idx === -1) return;
+                        let nextIdx = null;
+                        if (e.key === 'ArrowRight' || e.key === 'ArrowDown') nextIdx = (idx + 1) % tabs.length;
+                        else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') nextIdx = (idx - 1 + tabs.length) % tabs.length;
+                        else if (e.key === 'Home') nextIdx = 0;
+                        else if (e.key === 'End') nextIdx = tabs.length - 1;
+                        if (nextIdx == null) return;
+                        e.preventDefault();
+                        // Automatic activation: focusing a tab selects it. This matches
+                        // the most common APG variant and Manifest's existing click-to-
+                        // activate semantics.
+                        tabs[nextIdx].focus();
+                        tabs[nextIdx].click();
+                    };
+                    tablistEl.addEventListener('keydown', tablistEl.__mnfstTabsKeydown);
                 }
-                if (tablistEl) {
-                    tablistEl.setAttribute('role', 'tablist');
-                    if (!tablistEl.__mnfstTabsKeydown) {
-                        tablistEl.__mnfstTabsKeydown = (e) => {
-                            const target = e.target;
-                            if (!target || target.getAttribute('role') !== 'tab') return;
-                            const tabs = Array.from(tablistEl.querySelectorAll('[role="tab"]'));
-                            const idx = tabs.indexOf(target);
-                            if (idx === -1) return;
-                            let nextIdx = null;
-                            if (e.key === 'ArrowRight' || e.key === 'ArrowDown') nextIdx = (idx + 1) % tabs.length;
-                            else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') nextIdx = (idx - 1 + tabs.length) % tabs.length;
-                            else if (e.key === 'Home') nextIdx = 0;
-                            else if (e.key === 'End') nextIdx = tabs.length - 1;
-                            if (nextIdx == null) return;
-                            e.preventDefault();
-                            // Automatic activation: focusing a tab selects it. This matches
-                            // the most common APG variant and Manifest's existing click-to-
-                            // activate semantics.
-                            tabs[nextIdx].focus();
-                            tabs[nextIdx].click();
-                        };
-                        tablistEl.addEventListener('keydown', tablistEl.__mnfstTabsKeydown);
-                    }
-                }
-            }
+            })
 
             // Ensure Alpine processes the updated x-data and x-show attributes
             if (window.Alpine && typeof window.Alpine.initTree === 'function') {

package/lib/manifest.tooltips.js

@@ -42,6 +42,7 @@ function initializeTooltipPlugin() {
     const TOOLTIP_CHAIN_GRACE_MS = 250;
     let _lastTooltipHideTime = 0;
     const markTooltipHidden = () => { _lastTooltipHideTime = Date.now(); };
+    const clearChainWindow = () => { _lastTooltipHideTime = 0; };
     const isInChainWindow = () => (Date.now() - _lastTooltipHideTime) < TOOLTIP_CHAIN_GRACE_MS;
 
     // ---- Singletons per host ----
@@ -148,7 +149,10 @@ function initializeTooltipPlugin() {
             trigger._tooltipAnchorName = `--tooltip-trigger-${code}`;
         }
         const anchorName = trigger._tooltipAnchorName;
-        trigger.style.setProperty('anchor-name', anchorName);
+        // Compose with --co-anchor so stylesheet anchors (e.g. the tablist
+        // slider's --selected-tab on the selected tab) survive this inline
+        // override — the var re-resolves reactively as selection changes.
+        trigger.style.setProperty('anchor-name', `${anchorName}, var(--co-anchor, --no-anchor)`);
         void trigger.offsetHeight; // reflow so anchor-name registers
         s.el.style.setProperty('position-anchor', anchorName);
 
@@ -173,7 +177,9 @@ function initializeTooltipPlugin() {
 
     // Hide the singleton that's currently showing (if any), regardless of host.
     function hideAnySingleton() {
+        let wasOpen = false;
         document.querySelectorAll('.tooltip[popover="hint"]:popover-open').forEach(el => {
+            wasOpen = true;
             try { el.hidePopover(); } catch {}
         });
         // Restore each tooltip's prior aria-describedby on the trigger it had been
@@ -186,7 +192,9 @@ function initializeTooltipPlugin() {
             else el.removeAttribute('aria-describedby');
             el._tooltipPriorDescribedBy = undefined;
         });
-        markTooltipHidden();
+        // Only arm the chain window when something was actually open — marking
+        // unconditionally let a plain click fast-track the next focus show.
+        if (wasOpen) markTooltipHidden();
     }
 
     // ---- Directive ----
@@ -283,7 +291,10 @@ function initializeTooltipPlugin() {
 
         // Keyboard / focus interactions — WCAG 2.1 SC 1.4.13 requires tooltip
         // content to be accessible to keyboard users via focus, not hover only.
-        el.addEventListener('focus', requestShow);
+        // Gated on :focus-visible so mouse-click focus doesn't flash the tooltip.
+        el.addEventListener('focus', () => {
+            if (el.matches(':focus-visible')) requestShow();
+        });
         el.addEventListener('blur', requestHide);
 
         // Mousedown/click: always hide immediately; scheduleAnchorRestore so the
@@ -292,6 +303,10 @@ function initializeTooltipPlugin() {
         const hideAndScheduleRestore = () => {
             cancelPendingShow();
             hideAnySingleton();
+            // A click is a deliberate dismissal — clear the chain window so a
+            // synthetic re-hover (e.g. content shifting under the cursor after
+            // navigation) waits the full delay instead of showing instantly.
+            clearChainWindow();
             scheduleAnchorRestore(el);
         };
         el.addEventListener('mousedown', hideAndScheduleRestore);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "mnfst",
-    "version": "0.5.123",
+    "version": "0.5.125",
     "private": false,
     "workspaces": [
         "templates/starter",