@vectoriox/iox-ui 5.64.0 → 5.66.0

package/fesm2022/vectoriox-iox-ui-generation-core.mjs

@@ -11659,11 +11659,23 @@ function makeKit(globals, rootId, newId) {
 }
 /** Point an opener's dialog actions at `dialogId` (a drawer rebuilt under a new id keeps its openers working). */
 function retarget(node, dialogId) {
-    for (const ix of node.interactions) {
+    for (const ix of (node.interactions ?? [])) {
         for (const a of ix.actions ?? [])
-            if (a.type === 'openDialog' || a.type === 'toggleDialog')
+            if (a.type === NavDialogAction.Open || a.type === NavDialogAction.Toggle)
                 a.target = dialogId;
     }
+    return asToggle(node);
+}
+/** The menu button and More are TOGGLES (a second click closes what the first opened): a part saved before that
+ *  rule opened only — kept through a change of shape, it toggles from then on. */
+function asToggle(node) {
+    for (const ix of (node.interactions ?? [])) {
+        if (ix.trigger !== CLICK)
+            continue;
+        for (const a of ix.actions ?? [])
+            if (a.type === NavDialogAction.Open)
+                a.type = NavDialogAction.Toggle;
+    }
     return node;
 }
 function part(kit, suffix, type, props, style, role, lay = {}) {
@@ -11676,6 +11688,13 @@ function part(kit, suffix, type, props, style, role, lay = {}) {
     Object.assign(node.styleProps, lay);
     return node;
 }
+/** The dialog actions a nav part runs on click. */
+var NavDialogAction;
+(function (NavDialogAction) {
+    NavDialogAction["Open"] = "openDialog";
+    NavDialogAction["Close"] = "closeDialog";
+    NavDialogAction["Toggle"] = "toggleDialog";
+})(NavDialogAction || (NavDialogAction = {}));
 function clickTo(kit, suffix, type, target) {
     return { id: kit.id(`${suffix}-click`), trigger: CLICK, actions: [{ type, target, duration: 0, delay: 0, easing: 'ease' }] };
 }
@@ -11707,10 +11726,14 @@ function iconNode(kit, suffix, iconClass) {
 function labelText(kit, suffix, words) {
     return part(kit, suffix, TEXT$1, { content: words, tag: 'span' }, 'button-label');
 }
+/** The menu button and the drawer's Close are ONE size — and the shared CSS pads the drawer like the header
+ *  (`.iox-role-nav-drawer` re-declares dialog-pad as nav-pad) — so the Close lands where the menu button is and
+ *  reads as the same button turned into an X. */
+const MENU_BUTTON_LAY = { width: '48px', height: '48px', alignItems: 'center', justifyContent: 'center' };
 function menuButton(kit, drawerId, at) {
-    const btn = part(kit, 'menu', BUTTON, { tag: 'button', ariaLabel: NAV_SHAPE_COPY.menu }, 'button-ghost', NavRole.MenuButton, { width: '48px', height: '48px', alignItems: 'center', justifyContent: 'center' });
+    const btn = part(kit, 'menu', BUTTON, { tag: 'button', ariaLabel: NAV_SHAPE_COPY.menu }, 'button-ghost', NavRole.MenuButton, { ...MENU_BUTTON_LAY });
     btn.children = [iconNode(kit, 'menu-icon', MENU_ICON)];
-    btn.interactions = [clickTo(kit, 'menu', 'openDialog', drawerId)];
+    btn.interactions = [clickTo(kit, 'menu', NavDialogAction.Toggle, drawerId)];
     phoneOnly(btn, at, 'inline-flex');
     return btn;
 }
@@ -11723,9 +11746,9 @@ function drawer(kit, root, pages, at) {
     }, 'dialog', NavRole.Drawer, { width: '86vw', maxWidth: '360px', display: 'flex', flexDirection: 'column', gap: '20px' });
     const brandWords = textOf(find([root], NavRole.Brand) ?? root) || NAV_PART_LABELS[NavRole.Root];
     const head = part(kit, 'drawer-head', CONTAINER, {}, 'box', NavRole.DrawerHead, { display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: '12px' });
-    const close = part(kit, 'drawer-close', BUTTON, { tag: 'button', ariaLabel: NAV_SHAPE_COPY.closeMenu }, 'button-ghost', NavRole.DrawerClose, { width: '44px', height: '44px', alignItems: 'center', justifyContent: 'center' });
+    const close = part(kit, 'drawer-close', BUTTON, { tag: 'button', ariaLabel: NAV_SHAPE_COPY.closeMenu }, 'button-ghost', NavRole.DrawerClose, { ...MENU_BUTTON_LAY });
     close.children = [iconNode(kit, 'drawer-close-icon', CLOSE_ICON)];
-    close.interactions = [clickTo(kit, 'drawer-close', 'closeDialog', dr.id)];
+    close.interactions = [clickTo(kit, 'drawer-close', NavDialogAction.Close, dr.id)];
     head.children = [part(kit, 'drawer-brand', HEADING, { content: brandWords, level: 'h3' }, 'h3'), close];
     const list = part(kit, 'drawer-links', CONTAINER, {}, 'box', NavRole.DrawerLinks, { display: 'flex', flexDirection: 'column', gap: '4px' });
     // Board 1: every page, Home first, at lead size (on each Link: a Link's own baseline font size would
@@ -11761,7 +11784,7 @@ const BAR_ITEM_LAY = {
 function moreItem(kit, drawerId) {
     const more = part(kit, 'bar-more', BUTTON, { tag: 'button' }, 'bottom-bar-item', NavRole.More, BAR_ITEM_LAY);
     more.children = [iconNode(kit, 'bar-more-icon', MORE_ICON), labelText(kit, 'bar-more-label', NAV_SHAPE_COPY.more)];
-    more.interactions = [clickTo(kit, 'bar-more', 'openDialog', drawerId)];
+    more.interactions = [clickTo(kit, 'bar-more', NavDialogAction.Toggle, drawerId)];
     return more;
 }
 /** Home first, then the header's pages: the header reaches Home through its brand, a phone menu names it. */
@@ -11871,7 +11894,7 @@ function planNavShape(globals, shape, options = {}, navId) {
         dr.props = { ...dr.props, closeAbove: at };
     // The menu button: Drawer only (Q4: with a bar, the phone header keeps only the brand).
     const existingMenu = removeRole(root, NavRole.MenuButton);
-    const menu = wantMenuButton ? (existingMenu ?? menuButton(kit, dr.id, at)) : null;
+    const menu = wantMenuButton ? (existingMenu ? asToggle(existingMenu) : menuButton(kit, dr.id, at)) : null;
     for (const p of phoneHiddenParts(root)) {
         moveDisplayOverride(p, at);
         hideAt(p, at);