@kerfjs/ui 5.0.0-beta.63 → 5.0.0-beta.65

package/dist/popup-menu-register.js

@@ -5,12 +5,50 @@ import WaDropdownItem from '@awesome.me/webawesome/dist/components/dropdown-item
 import '@awesome.me/webawesome/dist/components/tooltip/tooltip.js';
 import WaDropdown from '@awesome.me/webawesome/dist/components/dropdown/dropdown.js';
 
-// src/install-popup-menu-keyboard.ts
+// src/install-dropdown-show-focus.ts
 var installed = /* @__PURE__ */ new WeakSet();
-function installPopupMenuKeyboard(prototype) {
+var showEpoch = /* @__PURE__ */ new WeakMap();
+function installDropdownShowFocus(prototype) {
   if (installed.has(prototype)) return;
   installed.add(prototype);
   const target = prototype;
+  const showMenu = target.showMenu;
+  target.showMenu = async function() {
+    const scoped = this.classList.contains("kui-popup-menu") || this.closest(".kui-popup-surface") !== null;
+    if (!scoped) return showMenu.call(this);
+    const epoch = (showEpoch.get(this) ?? 0) + 1;
+    showEpoch.set(this, epoch);
+    let navigatedItem;
+    const rememberFocus = (event) => {
+      const item = event.target;
+      if (this.menu?.classList.contains("show") && item instanceof HTMLElement && item.localName === "wa-dropdown-item" && this.contains(item)) {
+        navigatedItem = item;
+      }
+    };
+    this.addEventListener("focusin", rememberFocus);
+    try {
+      await showMenu.call(this);
+    } finally {
+      this.removeEventListener("focusin", rememberFocus);
+    }
+    if (showEpoch.get(this) !== epoch || !this.open || !this.popup?.active || !navigatedItem?.isConnected || !this.contains(navigatedItem))
+      return;
+    const siblings = navigatedItem.slot === "submenu" ? Array.from(navigatedItem.parentElement?.children ?? []).filter(
+      (item) => item.localName === "wa-dropdown-item"
+    ) : this.getItems();
+    siblings.forEach((item) => {
+      item.active = item === navigatedItem;
+    });
+    navigatedItem.focus({ preventScroll: true });
+  };
+}
+
+// src/install-popup-menu-keyboard.ts
+var installed2 = /* @__PURE__ */ new WeakSet();
+function installPopupMenuKeyboard(prototype) {
+  if (installed2.has(prototype)) return;
+  installed2.add(prototype);
+  const target = prototype;
   const makeSelection = target.makeSelection;
   target.makeSelection = function(item, event) {
     if (event instanceof KeyboardEvent && this.classList.contains("kui-popup-menu") && !item.disabled) {
@@ -21,17 +59,70 @@ function installPopupMenuKeyboard(prototype) {
   };
 }
 
+// src/install-popup-menu-lifecycle.ts
+var installed3 = /* @__PURE__ */ new WeakSet();
+function installPopupMenuLifecycle(prototype) {
+  if (installed3.has(prototype)) return;
+  installed3.add(prototype);
+  const target = prototype;
+  const showMenu = target.showMenu;
+  const hideMenu = target.hideMenu;
+  const hiding = /* @__PURE__ */ new WeakMap();
+  target.showMenu = function() {
+    const transition = hiding.get(this);
+    if (transition && this.open && this.popup?.active && this.classList.contains("kui-popup-menu")) {
+      this.popup.active = false;
+      transition.reopened = true;
+    }
+    return showMenu.call(this);
+  };
+  target.hideMenu = async function() {
+    const scoped = this.classList.contains("kui-popup-menu");
+    const transition = { reopened: false };
+    if (scoped) hiding.set(this, transition);
+    await hideMenu.call(this);
+    if (scoped && hiding.get(this) === transition && this.open && this.isConnected && this.popup?.active && !transition.reopened) {
+      this.popup.active = false;
+      void this.showMenu();
+    }
+    if (hiding.get(this) === transition) hiding.delete(this);
+  };
+}
+
 // src/install-popup-menu-submenu-focus.ts
-var installed2 = /* @__PURE__ */ new WeakSet();
+var installed4 = /* @__PURE__ */ new WeakSet();
 function installPopupMenuSubmenuFocus(prototype) {
-  if (installed2.has(prototype)) return;
-  installed2.add(prototype);
+  if (installed4.has(prototype)) return;
+  installed4.add(prototype);
   const target = prototype;
   const openSubmenu = target.openSubmenu;
+  const closeSubmenu = target.closeSubmenu;
+  const submenuOpen = Object.getOwnPropertyDescriptor(prototype, "submenuOpen");
+  if (submenuOpen?.set) {
+    Object.defineProperty(prototype, "submenuOpen", {
+      ...submenuOpen,
+      set(value) {
+        const wasOpen = this.submenuOpen;
+        submenuOpen.set.call(this, value);
+        if (value && wasOpen && this.submenuElement?.hidden && this.closest("wa-dropdown.kui-popup-menu"))
+          void this.openSubmenu();
+      }
+    });
+  }
+  target.closeSubmenu = async function() {
+    const submenu = this.submenuElement;
+    await closeSubmenu.call(this);
+    if (this.submenuOpen && submenu?.hidden && this.isConnected && this.closest("wa-dropdown.kui-popup-menu"))
+      void this.openSubmenu();
+  };
   target.openSubmenu = async function() {
     const submenu = this.submenuElement;
     if (!this.closest("wa-dropdown.kui-popup-menu") || !submenu)
       return openSubmenu.call(this);
+    if (submenu.classList.contains("show")) {
+      if (!submenu.hidden) return;
+      submenu.classList.remove("show");
+    }
     let desired;
     const trackFocus = (event) => {
       const item = event.composedPath().find(
@@ -57,9 +148,94 @@ function installPopupMenuSubmenuFocus(prototype) {
   };
 }
 
+// src/install-popup-menu-submenu-placement.ts
+var installed5 = /* @__PURE__ */ new WeakSet();
+var phoneWidth = "(max-width: 480px)";
+var viewportInset = 8;
+var menuGap = 4;
+function phoneSubmenuPosition(parent, submenu, viewport, rtl) {
+  const width = Math.min(submenu.width, viewport.width - 2 * viewportInset);
+  const height = submenu.height;
+  const below = Math.max(
+    0,
+    viewport.height - parent.bottom - menuGap - viewportInset
+  );
+  const above = Math.max(0, parent.top - menuGap - viewportInset);
+  const useBelow = height <= below || height > above && below >= above;
+  const availableHeight = useBelow ? below : above;
+  const left = rtl ? parent.right - width : parent.left;
+  return {
+    left: Math.max(
+      viewportInset,
+      Math.min(left, viewport.width - viewportInset - width)
+    ),
+    top: useBelow ? parent.bottom + menuGap : parent.top - menuGap - Math.min(height, availableHeight),
+    maxHeight: availableHeight,
+    maxWidth: viewport.width - 2 * viewportInset
+  };
+}
+function clearPhoneStyles(submenu) {
+  for (const property of [
+    "position",
+    "left",
+    "top",
+    "max-width",
+    "max-height",
+    "box-sizing",
+    "overflow-y"
+  ])
+    submenu.style.removeProperty(property);
+}
+function installPopupMenuSubmenuPlacement(prototype) {
+  if (installed5.has(prototype)) return;
+  installed5.add(prototype);
+  const target = prototype;
+  const positionSubmenu = target.positionSubmenu;
+  target.positionSubmenu = function(item) {
+    if (!this.classList.contains("kui-popup-menu")) {
+      positionSubmenu.call(this, item);
+      return;
+    }
+    const submenu = item.submenuElement;
+    if (!window.matchMedia(phoneWidth).matches || !submenu || !this.menu) {
+      if (submenu) clearPhoneStyles(submenu);
+      positionSubmenu.call(this, item);
+      return;
+    }
+    window.queueMicrotask(() => {
+      if (!this.isConnected || !item.submenuOpen || !window.matchMedia(phoneWidth).matches || !this.menu || !submenu.isConnected)
+        return;
+      const parentItem = item.parentElement?.localName === "wa-dropdown-item" ? item.parentElement : void 0;
+      const parentMenu = parentItem?.submenuElement ?? this.menu;
+      submenu.style.position = "fixed";
+      submenu.style.maxWidth = `calc(100vw - ${2 * viewportInset}px)`;
+      submenu.style.maxHeight = "none";
+      submenu.style.boxSizing = "border-box";
+      submenu.style.overflowY = "auto";
+      const placement = phoneSubmenuPosition(
+        parentMenu.getBoundingClientRect(),
+        submenu.getBoundingClientRect(),
+        { width: window.innerWidth, height: window.innerHeight },
+        window.getComputedStyle(this).direction === "rtl"
+      );
+      submenu.style.left = `${placement.left}px`;
+      submenu.style.top = `${placement.top}px`;
+      submenu.style.maxHeight = `${placement.maxHeight}px`;
+      submenu.style.maxWidth = `${placement.maxWidth}px`;
+      submenu.setAttribute(
+        "data-placement",
+        placement.top >= parentMenu.getBoundingClientRect().bottom ? "bottom-start" : "top-start"
+      );
+    });
+  };
+}
+
 // src/popup-menu-register.ts
 installPopupMenuKeyboard(WaDropdown.prototype);
+installPopupMenuLifecycle(WaDropdown.prototype);
+installDropdownShowFocus(WaDropdown.prototype);
 installPopupMenuSubmenuFocus(WaDropdownItem.prototype);
+installPopupMenuSubmenuPlacement(WaDropdown.prototype);
 installHelpTags();
 var popupMenuElementsRegistered = true;
 

package/dist/popup-menu-register.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/install-popup-menu-keyboard.ts","../src/install-popup-menu-submenu-focus.ts","../src/popup-menu-register.ts"],"names":["installed"],"mappings":"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","file":"popup-menu-register.js","sourcesContent":["interface PopupMenuDropdown extends HTMLElement {\n  makeSelection(\n    item: HTMLElement & { disabled?: boolean },\n    event?: Event,\n  ): void;\n}\n\nconst installed = new WeakSet<object>();\n\n/**\n * Route a keyboard choice in a `PopupMenu` through the item's click. Web Awesome\n * selects a pointer choice from the item's click event but a keyboard choice\n * (Enter or Space) directly, so delegated `data-action` click handlers would\n * never run for keyboard users. Clicking the item makes Web Awesome select it\n * exactly as it does for a pointer — one `wa-select`, then close and focus\n * return — while the click reaches the application's delegation. Raw\n * `wa-dropdown`s outside `PopupMenu` are unaffected.\n */\nexport function installPopupMenuKeyboard(prototype: object): void {\n  if (installed.has(prototype)) return;\n  installed.add(prototype);\n  const target = prototype as PopupMenuDropdown;\n  const makeSelection = target.makeSelection;\n  target.makeSelection = function (this: PopupMenuDropdown, item, event): void {\n    if (\n      event instanceof KeyboardEvent &&\n      this.classList.contains('kui-popup-menu') &&\n      !item.disabled\n    ) {\n      item.click();\n      return;\n    }\n    makeSelection.call(this, item, event);\n  };\n}\n","interface SubmenuItem extends HTMLElement {\n  active: boolean;\n}\n\ninterface PopupMenuParentItem extends HTMLElement {\n  submenuElement?: HTMLElement;\n  submenuOpen: boolean;\n  getSubmenuItems(): SubmenuItem[];\n  openSubmenu(): Promise<void>;\n}\n\nconst installed = new WeakSet<object>();\n\n/** Preserve a rapid keyboard move past Web Awesome's late first-item focus. */\nexport function installPopupMenuSubmenuFocus(prototype: object): void {\n  if (installed.has(prototype)) return;\n  installed.add(prototype);\n  const target = prototype as PopupMenuParentItem;\n  const openSubmenu = target.openSubmenu;\n  target.openSubmenu = async function (\n    this: PopupMenuParentItem,\n  ): Promise<void> {\n    const submenu = this.submenuElement;\n    if (!this.closest('wa-dropdown.kui-popup-menu') || !submenu)\n      return openSubmenu.call(this);\n\n    let desired: SubmenuItem | undefined;\n    const trackFocus = (event: FocusEvent) => {\n      const item = event\n        .composedPath()\n        .find(\n          (node): node is SubmenuItem =>\n            node instanceof HTMLElement &&\n            node.localName === 'wa-dropdown-item' &&\n            node.getAttribute('slot') === 'submenu',\n        );\n      if (item && this.getSubmenuItems().includes(item)) desired = item;\n    };\n    submenu.addEventListener('focusin', trackFocus);\n    try {\n      await openSubmenu.call(this);\n    } finally {\n      submenu.removeEventListener('focusin', trackFocus);\n    }\n\n    const items = this.getSubmenuItems();\n    if (!desired || desired === items[0]) return;\n    const selected = desired;\n    // Web Awesome queues its first-item focus after the show animation. This\n    // timer follows that one, restoring a user's later arrow choice only if\n    // the queued focus actually reset it. Pointer/blur/close paths are left alone.\n    window.setTimeout(() => {\n      if (\n        !this.isConnected ||\n        !this.submenuOpen ||\n        submenu.hidden ||\n        document.activeElement !== items[0]\n      )\n        return;\n      items.forEach((item) => (item.active = item === selected));\n      selected.focus({ preventScroll: true });\n    }, 0);\n  };\n}\n","import '@awesome.me/webawesome/dist/components/button/button.js';\nimport '@awesome.me/webawesome/dist/components/divider/divider.js';\nimport '@awesome.me/webawesome/dist/components/dropdown-item/dropdown-item.js';\nimport '@awesome.me/webawesome/dist/components/tooltip/tooltip.js';\n\nimport WaDropdown from '@awesome.me/webawesome/dist/components/dropdown/dropdown.js';\nimport WaDropdownItem from '@awesome.me/webawesome/dist/components/dropdown-item/dropdown-item.js';\n\nimport { installHelpTags } from './install-help-tag.js';\nimport { installPopupMenuKeyboard } from './install-popup-menu-keyboard.js';\nimport { installPopupMenuSubmenuFocus } from './install-popup-menu-submenu-focus.js';\n\ninstallPopupMenuKeyboard(WaDropdown.prototype);\ninstallPopupMenuSubmenuFocus(WaDropdownItem.prototype);\ninstallHelpTags();\n\n/**\n * Marker export for tests and tooling; importing this module registers the\n * Web Awesome elements a `PopupMenu` renders (`wa-dropdown`,\n * `wa-dropdown-item`, `wa-button`, and `wa-divider`) and routes a keyboard\n * choice through the item's click so delegated `data-action`s run.\n */\nexport const popupMenuElementsRegistered = true;\n"]}
+{"version":3,"sources":["../src/install-dropdown-show-focus.ts","../src/install-popup-menu-keyboard.ts","../src/install-popup-menu-lifecycle.ts","../src/install-popup-menu-submenu-focus.ts","../src/install-popup-menu-submenu-placement.ts","../src/popup-menu-register.ts"],"names":["installed"],"mappings":"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","file":"popup-menu-register.js","sourcesContent":["interface FocusableDropdownItem extends HTMLElement {\n  active: boolean;\n}\n\ninterface FocusableDropdown extends HTMLElement {\n  open: boolean;\n  popup?: { active: boolean };\n  menu?: HTMLElement;\n  getItems(): FocusableDropdownItem[];\n  showMenu(): Promise<void>;\n}\n\nconst installed = new WeakSet<object>();\nconst showEpoch = new WeakMap<FocusableDropdown, number>();\n\n/** Preserve item navigation that Web Awesome receives during its show animation. */\nexport function installDropdownShowFocus(prototype: object): void {\n  if (installed.has(prototype)) return;\n  installed.add(prototype);\n  const target = prototype as FocusableDropdown;\n  const showMenu = target.showMenu;\n  target.showMenu = async function (this: FocusableDropdown): Promise<void> {\n    const scoped =\n      this.classList.contains('kui-popup-menu') ||\n      this.closest('.kui-popup-surface') !== null;\n    if (!scoped) return showMenu.call(this);\n\n    const epoch = (showEpoch.get(this) ?? 0) + 1;\n    showEpoch.set(this, epoch);\n    let navigatedItem: FocusableDropdownItem | undefined;\n    const rememberFocus = (event: FocusEvent) => {\n      const item = event.target;\n      if (\n        this.menu?.classList.contains('show') &&\n        item instanceof HTMLElement &&\n        item.localName === 'wa-dropdown-item' &&\n        this.contains(item)\n      ) {\n        navigatedItem = item as FocusableDropdownItem;\n      }\n    };\n    this.addEventListener('focusin', rememberFocus);\n    try {\n      await showMenu.call(this);\n    } finally {\n      this.removeEventListener('focusin', rememberFocus);\n    }\n    if (\n      showEpoch.get(this) !== epoch ||\n      !this.open ||\n      !this.popup?.active ||\n      !navigatedItem?.isConnected ||\n      !this.contains(navigatedItem)\n    )\n      return;\n\n    const siblings =\n      navigatedItem.slot === 'submenu'\n        ? Array.from(navigatedItem.parentElement?.children ?? []).filter(\n            (item): item is FocusableDropdownItem =>\n              item.localName === 'wa-dropdown-item',\n          )\n        : this.getItems();\n    siblings.forEach((item) => {\n      item.active = item === navigatedItem;\n    });\n    navigatedItem.focus({ preventScroll: true });\n  };\n}\n","interface PopupMenuDropdown extends HTMLElement {\n  makeSelection(\n    item: HTMLElement & { disabled?: boolean },\n    event?: Event,\n  ): void;\n}\n\nconst installed = new WeakSet<object>();\n\n/**\n * Route a keyboard choice in a `PopupMenu` through the item's click. Web Awesome\n * selects a pointer choice from the item's click event but a keyboard choice\n * (Enter or Space) directly, so delegated `data-action` click handlers would\n * never run for keyboard users. Clicking the item makes Web Awesome select it\n * exactly as it does for a pointer — one `wa-select`, then close and focus\n * return — while the click reaches the application's delegation. Raw\n * `wa-dropdown`s outside `PopupMenu` are unaffected.\n */\nexport function installPopupMenuKeyboard(prototype: object): void {\n  if (installed.has(prototype)) return;\n  installed.add(prototype);\n  const target = prototype as PopupMenuDropdown;\n  const makeSelection = target.makeSelection;\n  target.makeSelection = function (this: PopupMenuDropdown, item, event): void {\n    if (\n      event instanceof KeyboardEvent &&\n      this.classList.contains('kui-popup-menu') &&\n      !item.disabled\n    ) {\n      item.click();\n      return;\n    }\n    makeSelection.call(this, item, event);\n  };\n}\n","interface PopupMenuDropdown extends HTMLElement {\n  open: boolean;\n  popup?: { active: boolean };\n  showMenu(): Promise<void>;\n  hideMenu(): Promise<void>;\n}\n\nconst installed = new WeakSet<object>();\n\n/** Restore Web Awesome dismissal listeners after a rapid close/reopen. */\nexport function installPopupMenuLifecycle(prototype: object): void {\n  if (installed.has(prototype)) return;\n  installed.add(prototype);\n  const target = prototype as PopupMenuDropdown;\n  const showMenu = target.showMenu;\n  const hideMenu = target.hideMenu;\n  const hiding = new WeakMap<PopupMenuDropdown, { reopened: boolean }>();\n  target.showMenu = function (this: PopupMenuDropdown): Promise<void> {\n    const transition = hiding.get(this);\n    if (\n      transition &&\n      this.open &&\n      this.popup?.active &&\n      this.classList.contains('kui-popup-menu')\n    ) {\n      // Native showMenu would return early while the old popup is active,\n      // leaving its document pointer listener absent during the hide.\n      this.popup.active = false;\n      transition.reopened = true;\n    }\n    return showMenu.call(this);\n  };\n  target.hideMenu = async function (this: PopupMenuDropdown): Promise<void> {\n    const scoped = this.classList.contains('kui-popup-menu');\n    const transition = { reopened: false };\n    if (scoped) hiding.set(this, transition);\n    await hideMenu.call(this);\n    // WA removes its document listeners before awaiting the hide animation.\n    // If Lit coalesces the intervening open request, restore the listeners\n    // after hide; an explicit showMenu above has already done so immediately.\n    if (\n      scoped &&\n      hiding.get(this) === transition &&\n      this.open &&\n      this.isConnected &&\n      this.popup?.active &&\n      !transition.reopened\n    ) {\n      this.popup.active = false;\n      void this.showMenu();\n    }\n    if (hiding.get(this) === transition) hiding.delete(this);\n  };\n}\n","interface SubmenuItem extends HTMLElement {\n  active: boolean;\n}\n\ninterface PopupMenuParentItem extends HTMLElement {\n  submenuElement?: HTMLElement;\n  submenuOpen: boolean;\n  getSubmenuItems(): SubmenuItem[];\n  openSubmenu(): Promise<void>;\n  closeSubmenu(): Promise<void>;\n}\n\nconst installed = new WeakSet<object>();\n\n/** Preserve a rapid keyboard move past Web Awesome's late first-item focus. */\nexport function installPopupMenuSubmenuFocus(prototype: object): void {\n  if (installed.has(prototype)) return;\n  installed.add(prototype);\n  const target = prototype as PopupMenuParentItem;\n  const openSubmenu = target.openSubmenu;\n  const closeSubmenu = target.closeSubmenu;\n  const submenuOpen = Object.getOwnPropertyDescriptor(prototype, 'submenuOpen');\n  if (submenuOpen?.set) {\n    Object.defineProperty(prototype, 'submenuOpen', {\n      ...submenuOpen,\n      set(this: PopupMenuParentItem, value: boolean) {\n        const wasOpen = this.submenuOpen;\n        submenuOpen.set!.call(this, value);\n        // Web Awesome's pointer, click, and ArrowRight paths assign true. A\n        // repeated assignment does not schedule updated(), so repair a stale\n        // open flag over a hidden submenu at the point of that user action.\n        if (\n          value &&\n          wasOpen &&\n          this.submenuElement?.hidden &&\n          this.closest('wa-dropdown.kui-popup-menu')\n        )\n          void this.openSubmenu();\n      },\n    });\n  }\n  target.closeSubmenu = async function (\n    this: PopupMenuParentItem,\n  ): Promise<void> {\n    const submenu = this.submenuElement;\n    await closeSubmenu.call(this);\n    // A new open can start while Web Awesome awaits its hide animation. Its\n    // late completion must not leave submenuOpen=true over a hidden submenu.\n    if (\n      this.submenuOpen &&\n      submenu?.hidden &&\n      this.isConnected &&\n      this.closest('wa-dropdown.kui-popup-menu')\n    )\n      void this.openSubmenu();\n  };\n  target.openSubmenu = async function (\n    this: PopupMenuParentItem,\n  ): Promise<void> {\n    const submenu = this.submenuElement;\n    if (!this.closest('wa-dropdown.kui-popup-menu') || !submenu)\n      return openSubmenu.call(this);\n\n    // WA's animation helper never resolves if asked to add an animation class\n    // already on the element. A second open while showing needs no new show;\n    // a stale hidden popup needs the old show canceled before reopening.\n    if (submenu.classList.contains('show')) {\n      if (!submenu.hidden) return;\n      submenu.classList.remove('show');\n    }\n\n    let desired: SubmenuItem | undefined;\n    const trackFocus = (event: FocusEvent) => {\n      const item = event\n        .composedPath()\n        .find(\n          (node): node is SubmenuItem =>\n            node instanceof HTMLElement &&\n            node.localName === 'wa-dropdown-item' &&\n            node.getAttribute('slot') === 'submenu',\n        );\n      if (item && this.getSubmenuItems().includes(item)) desired = item;\n    };\n    submenu.addEventListener('focusin', trackFocus);\n    try {\n      await openSubmenu.call(this);\n    } finally {\n      submenu.removeEventListener('focusin', trackFocus);\n    }\n\n    const items = this.getSubmenuItems();\n    if (!desired || desired === items[0]) return;\n    const selected = desired;\n    // Web Awesome queues its first-item focus after the show animation. This\n    // timer follows that one, restoring a user's later arrow choice only if\n    // the queued focus actually reset it. Pointer/blur/close paths are left alone.\n    window.setTimeout(() => {\n      if (\n        !this.isConnected ||\n        !this.submenuOpen ||\n        submenu.hidden ||\n        document.activeElement !== items[0]\n      )\n        return;\n      items.forEach((item) => (item.active = item === selected));\n      selected.focus({ preventScroll: true });\n    }, 0);\n  };\n}\n","interface SubmenuItem extends HTMLElement {\n  submenuElement?: HTMLElement;\n  submenuOpen: boolean;\n}\n\ninterface PopupMenuDropdown extends HTMLElement {\n  menu?: HTMLElement;\n  positionSubmenu(item: SubmenuItem): void;\n}\n\nconst installed = new WeakSet<object>();\nconst phoneWidth = '(max-width: 480px)';\nconst viewportInset = 8;\nconst menuGap = 4;\n\n/** Place a phone-width submenu beside its parent menu in the vertical axis. */\nexport function phoneSubmenuPosition(\n  parent: DOMRect,\n  submenu: DOMRect,\n  viewport: { width: number; height: number },\n  rtl: boolean,\n) {\n  const width = Math.min(submenu.width, viewport.width - 2 * viewportInset);\n  const height = submenu.height;\n  const below = Math.max(\n    0,\n    viewport.height - parent.bottom - menuGap - viewportInset,\n  );\n  const above = Math.max(0, parent.top - menuGap - viewportInset);\n  const useBelow = height <= below || (height > above && below >= above);\n  const availableHeight = useBelow ? below : above;\n  const left = rtl ? parent.right - width : parent.left;\n  return {\n    left: Math.max(\n      viewportInset,\n      Math.min(left, viewport.width - viewportInset - width),\n    ),\n    top: useBelow\n      ? parent.bottom + menuGap\n      : parent.top - menuGap - Math.min(height, availableHeight),\n    maxHeight: availableHeight,\n    maxWidth: viewport.width - 2 * viewportInset,\n  };\n}\n\nfunction clearPhoneStyles(submenu: HTMLElement) {\n  for (const property of [\n    'position',\n    'left',\n    'top',\n    'max-width',\n    'max-height',\n    'box-sizing',\n    'overflow-y',\n  ])\n    submenu.style.removeProperty(property);\n}\n\n/**\n * Web Awesome's horizontal flip can place a submenu over the parent menu on a\n * phone. Its own auto-update loop calls this method on scroll and resize, so\n * override only PopupMenu's narrow placement and leave native menu navigation\n * and selection intact.\n */\nexport function installPopupMenuSubmenuPlacement(prototype: object): void {\n  if (installed.has(prototype)) return;\n  installed.add(prototype);\n  const target = prototype as PopupMenuDropdown;\n  const positionSubmenu = target.positionSubmenu;\n  target.positionSubmenu = function (this: PopupMenuDropdown, item): void {\n    if (!this.classList.contains('kui-popup-menu')) {\n      positionSubmenu.call(this, item);\n      return;\n    }\n    const submenu = item.submenuElement;\n    if (!window.matchMedia(phoneWidth).matches || !submenu || !this.menu) {\n      if (submenu) clearPhoneStyles(submenu);\n      positionSubmenu.call(this, item);\n      return;\n    }\n\n    // The opening event starts positioning before Web Awesome unhides the\n    // submenu. Measure in the next microtask, after showPopover has run.\n    window.queueMicrotask(() => {\n      if (\n        !this.isConnected ||\n        !item.submenuOpen ||\n        !window.matchMedia(phoneWidth).matches ||\n        !this.menu ||\n        !submenu.isConnected\n      )\n        return;\n      const parentItem =\n        item.parentElement?.localName === 'wa-dropdown-item'\n          ? (item.parentElement as SubmenuItem)\n          : undefined;\n      const parentMenu = parentItem?.submenuElement ?? this.menu;\n      submenu.style.position = 'fixed';\n      submenu.style.maxWidth = `calc(100vw - ${2 * viewportInset}px)`;\n      submenu.style.maxHeight = 'none';\n      submenu.style.boxSizing = 'border-box';\n      submenu.style.overflowY = 'auto';\n      const placement = phoneSubmenuPosition(\n        parentMenu.getBoundingClientRect(),\n        submenu.getBoundingClientRect(),\n        { width: window.innerWidth, height: window.innerHeight },\n        window.getComputedStyle(this).direction === 'rtl',\n      );\n      submenu.style.left = `${placement.left}px`;\n      submenu.style.top = `${placement.top}px`;\n      submenu.style.maxHeight = `${placement.maxHeight}px`;\n      submenu.style.maxWidth = `${placement.maxWidth}px`;\n      submenu.setAttribute(\n        'data-placement',\n        placement.top >= parentMenu.getBoundingClientRect().bottom\n          ? 'bottom-start'\n          : 'top-start',\n      );\n    });\n  };\n}\n","import '@awesome.me/webawesome/dist/components/button/button.js';\nimport '@awesome.me/webawesome/dist/components/divider/divider.js';\nimport '@awesome.me/webawesome/dist/components/dropdown-item/dropdown-item.js';\nimport '@awesome.me/webawesome/dist/components/tooltip/tooltip.js';\n\nimport WaDropdown from '@awesome.me/webawesome/dist/components/dropdown/dropdown.js';\nimport WaDropdownItem from '@awesome.me/webawesome/dist/components/dropdown-item/dropdown-item.js';\n\nimport { installDropdownShowFocus } from './install-dropdown-show-focus.js';\nimport { installHelpTags } from './install-help-tag.js';\nimport { installPopupMenuKeyboard } from './install-popup-menu-keyboard.js';\nimport { installPopupMenuLifecycle } from './install-popup-menu-lifecycle.js';\nimport { installPopupMenuSubmenuFocus } from './install-popup-menu-submenu-focus.js';\nimport { installPopupMenuSubmenuPlacement } from './install-popup-menu-submenu-placement.js';\n\ninstallPopupMenuKeyboard(WaDropdown.prototype);\ninstallPopupMenuLifecycle(WaDropdown.prototype);\ninstallDropdownShowFocus(WaDropdown.prototype);\ninstallPopupMenuSubmenuFocus(WaDropdownItem.prototype);\ninstallPopupMenuSubmenuPlacement(WaDropdown.prototype);\ninstallHelpTags();\n\n/**\n * Marker export for tests and tooling; importing this module registers the\n * Web Awesome elements a `PopupMenu` renders (`wa-dropdown`,\n * `wa-dropdown-item`, `wa-button`, and `wa-divider`) and routes a keyboard\n * choice through the item's click so delegated `data-action`s run.\n */\nexport const popupMenuElementsRegistered = true;\n"]}

package/dist/popup-menu.d.ts

@@ -92,7 +92,8 @@ declare function closePopupMenu(menu: PopupMenuElement): void;
  * `nestedDropdown`) or a `PopupSurface` sizes and insets it as usual. Items
  * dispatch through delegated `data-action`s; the app owns the commands and any
  * open-state reaction. Import `@kerfjs/ui/popup-menu/register` once to register
- * the Web Awesome elements.
+ * the Web Awesome elements. At viewport widths up to 480px, submenus appear
+ * above or below their parent menu so their rows do not cover the parent list.
  */
 declare function PopupMenu({ text, label, icon, items, placement, caret, disabled, rootAttributes, slot, context, }: PopupMenuProps): SafeHtml;
 

package/dist/popup-menu.js

@@ -1,3 +1,3 @@
-export { PopupMenu, closePopupMenu, openPopupMenuAt } from './chunk-ZRWXFDDS.js';
+export { PopupMenu, closePopupMenu, openPopupMenuAt } from './chunk-J3KGJ6P6.js';
 
 //# sourceMappingURL=popup-menu.js.map

package/dist/styles/catalog/components/catalog-example.css

@@ -162,3 +162,7 @@
   --kui-catalog-example-align: 0.5rem;
   margin-inline-start: var(--kui-catalog-example-align);
 }
+
+.kui-catalog-example[data-align="text-trigger"] > wa-dropdown > wa-button {
+  margin-inline-start: 0.5rem;
+}

package/dist/styles/content-item.css

@@ -23,6 +23,11 @@
   );
 }
 
+.kui-content-item--flush {
+  padding-block: 0;
+  border-block-width: 0;
+}
+
 /* A visible frame for a content item that marks a real distinction: the
    standard neutral border, same geometry (the border is always reserved). */
 .kui-content-item--framed {
@@ -42,11 +47,15 @@
     [data-selected="true"]
   ) {
   --kui-content-item-border: var(--kui-color-neutral-border-normal);
-  --kui-content-item-background: var(--kui-color-neutral-fill-quiet);
+  --kui-content-item-background: var(--kui-color-neutral-fill-normal);
 }
 
 .kui-content-item[data-interactive="true"]:active:not([data-disabled="true"]) {
-  --kui-content-item-background: var(--kui-color-neutral-fill-normal);
+  --kui-content-item-background: color-mix(
+    in srgb,
+    var(--kui-color-neutral-fill-normal) 75%,
+    var(--kui-color-neutral-fill-loud)
+  );
 }
 
 .kui-content-item[data-interactive="true"][data-selected="true"] {

package/dist/styles/grid.css

@@ -21,6 +21,13 @@
   );
 }
 
+.kui-grid[data-auto-fill="true"] {
+  grid-template-columns: repeat(
+    auto-fill,
+    minmax(min(100%, var(--_kui-grid-min-column-width)), 1fr)
+  );
+}
+
 /* `fill`: the layout root of a definite-height parent (an app root or a
    fixed-height frame) takes its full height. Inside a flex layout use `flex`. */
 .kui-grid[data-fill="true"] {

package/dist/styles/popup-menu.css

@@ -48,6 +48,15 @@
       var(--_kui-popup-row-check-width)
   );
 }
+/* Web Awesome's nested submenu owns its item host padding. Move its exposed
+   checkmark inside the panel and leave room for the label beside it. */
+.kui-popup-menu
+  wa-dropdown-item[slot="submenu"][type="checkbox"]::part(checkmark) {
+  margin-inline-start: 0;
+}
+.kui-popup-menu wa-dropdown-item[slot="submenu"][type="checkbox"]::part(label) {
+  padding-inline-start: 1em;
+}
 .kui-popup-menu wa-dropdown-item::part(label) {
   padding-block: var(--_kui-popup-row-label-padding-block);
   line-height: var(--_kui-popup-row-label-line-height);

package/dist/styles/segmented-control.css

@@ -119,6 +119,9 @@
   line-height: 1;
   white-space: nowrap;
   cursor: pointer;
+  /* Web Awesome's native button transition includes color. During a theme
+     switch that briefly puts the old text tone on the new filled track. */
+  transition-property: background, border, box-shadow;
 }
 
 .kui-segmented-control[data-size="small"] .kui-segmented-control__item {

package/dist/styles/token-search-field.css

@@ -1,3 +1,32 @@
+.kui-token-search__field {
+  display: grid;
+  width: 100%;
+  min-width: 0;
+  gap: var(--wa-space-2xs, 0.25rem);
+}
+
+.kui-token-search__field-label {
+  padding-inline: 0.5625rem;
+  color: var(--kui-color-neutral-on-quiet, var(--wa-color-text-quiet));
+  font-size: var(--kui-font-xs, var(--wa-font-size-xs));
+  font-weight: 650;
+  letter-spacing: 0.04em;
+  line-height: var(--wa-line-height-condensed, 1.2);
+  text-transform: uppercase;
+}
+
+.kui-token-search__field-required {
+  margin-inline-start: 0.15em;
+  color: var(--wa-color-danger-on-normal, currentColor);
+}
+
+.kui-token-search__field-hint {
+  padding-inline: 0.5625rem;
+  color: var(--kui-color-text-quiet);
+  font-size: var(--kui-font-s);
+  line-height: var(--wa-line-height-normal, 1.6);
+}
+
 .kui-token-search {
   --kui-token-search-background: var(--kui-color-surface);
   --kui-token-search-border: var(--kui-color-neutral-border-normal);
@@ -85,7 +114,8 @@
 }
 
 .kui-token-search__token button,
-.kui-token-search__clear {
+.kui-token-search__clear,
+.kui-token-search__trailing-action {
   appearance: none;
   display: inline-grid;
   padding: 0;
@@ -110,12 +140,15 @@
 .kui-token-search__token-remove:hover,
 .kui-token-search__token-remove:focus-visible,
 .kui-token-search__clear:hover,
-.kui-token-search__clear:focus-visible {
+.kui-token-search__clear:focus-visible,
+.kui-token-search__trailing-action:hover,
+.kui-token-search__trailing-action:focus-visible {
   background: color-mix(in srgb, currentColor 12%, transparent);
 }
 
 .kui-token-search__token button:focus-visible,
-.kui-token-search__clear:focus-visible {
+.kui-token-search__clear:focus-visible,
+.kui-token-search__trailing-action:focus-visible {
   outline: var(--kui-focus-ring);
   outline-offset: 1px;
 }
@@ -130,7 +163,8 @@
 }
 
 .kui-token-search__clear,
-.kui-token-search__trailing {
+.kui-token-search__trailing,
+.kui-token-search__trailing-action {
   display: inline-grid;
   width: 1.5rem;
   height: var(--kui-token-search-line-size);
@@ -147,6 +181,11 @@
   grid-column: 4;
 }
 
+.kui-token-search__trailing-action {
+  grid-column: 4;
+  border-radius: var(--kui-radius-pill);
+}
+
 .kui-token-search__suggestions {
   display: grid;
   position: absolute;
@@ -178,6 +217,7 @@
   background: transparent;
   font: inherit;
   text-align: start;
+  justify-content: flex-start;
   cursor: pointer;
 }
 
@@ -192,7 +232,8 @@
 }
 
 .kui-token-search__clear svg,
-.kui-token-search__trailing svg {
+.kui-token-search__trailing svg,
+.kui-token-search__trailing-action svg {
   width: 0.85rem;
   height: 0.85rem;
 }
@@ -213,6 +254,11 @@
     border-color 0.2s ease;
 }
 
+.kui-token-search[data-collapsible="true"][data-expanded="true"][data-fill="true"] {
+  width: 100%;
+  flex: 1 1 auto;
+}
+
 .kui-token-search[data-collapsible="true"][data-expanded="true"]:has(
     .kui-token-search__suggestions
   ) {

package/dist/styles/toolbar-control-group.css

@@ -156,6 +156,13 @@
     border-color 0.2s ease;
 }
 
+.kui-toolbar-control-group[data-content="search"]:has(
+    > .kui-token-search[data-expanded="true"][data-fill="true"]
+  ) {
+  width: 100%;
+  flex: 1 1 auto;
+}
+
 .kui-toolbar-control-group[data-content="search"]:has(
     .kui-token-search__suggestions
   ) {
@@ -165,6 +172,13 @@
   width: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
   flex: 0 0 auto;
 }
+
+.kui-toolbar-control-group[data-content="search"]:has(
+    > .kui-token-search[data-expanded="false"][data-fill="true"]
+  ) {
+  width: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
+  flex: 0 0 auto;
+}
 .kui-toolbar-control-group[data-content="text"]
   > :is(button, wa-button, .kui-toolbar-action-link),
 .kui-toolbar-control-group[data-content="mixed"]

package/dist/styles/workbench.css

@@ -669,17 +669,11 @@
   display: none;
 }
 
-.kui-workbench:has(
-    > .kui-workbench__rail--left[data-responsive-overlay-active="true"]
-  )
-  > .kui-workbench__center {
+.kui-workbench[data-numeric-overlays~="left"] > .kui-workbench__center {
   --kui-edge-inset-inline-start: var(--_kui-workbench-safe-inline-start);
 }
 
-.kui-workbench:has(
-    > .kui-workbench__rail--right[data-responsive-overlay-active="true"]
-  )
-  > .kui-workbench__center {
+.kui-workbench[data-numeric-overlays~="right"] > .kui-workbench__center {
   --kui-edge-inset-inline-end: var(--_kui-workbench-safe-inline-end);
 }
 
@@ -701,21 +695,13 @@
   background: var(--kui-color-surface);
 }
 
-.kui-workbench__main:has(
-  + .kui-workbench__drawer[data-responsive-overlay-active="true"]
-) {
+.kui-workbench[data-numeric-overlays~="drawer"]
+  > .kui-workbench__center
+  > .kui-workbench__main {
   --_kui-workbench-content-edge-block-end: var(--_kui-workbench-safe-block-end);
 }
 
-.kui-workbench[data-overlay-backdrop="true"]:has(
-    > .kui-workbench__rail[data-responsive-overlay-active="true"]:not(
-        [data-collapsed="true"]
-      ),
-    > .kui-workbench__center
-      > .kui-workbench__drawer[data-responsive-overlay-active="true"]:not(
-        [data-collapsed="true"]
-      )
-  )
+.kui-workbench[data-overlay-backdrop="true"][data-numeric-overlays~="open"]
   > .kui-workbench__backdrop {
   display: block;
 }
@@ -1024,11 +1010,7 @@
   --_kui-workbench-covered: hidden;
 }
 
-.kui-workbench:has(
-    > .kui-workbench__rail[data-responsive-overlay-active="true"]:not(
-        [data-collapsed="true"]
-      )
-  )
+.kui-workbench[data-numeric-overlays~="rail-open"]
   > :is(.kui-workbench__center, .kui-workbench__restore) {
   --_kui-workbench-covered: hidden;
 }

package/dist/{token-search-field-DvgFLhLL.d.ts → token-search-field-CVGwDn2y.d.ts}

@@ -60,6 +60,12 @@ interface TokenSearchToken {
     offset?: number;
     accessibleLabel?: string;
 }
+interface TokenSearchTrailingAction {
+    icon: SafeHtml;
+    label: string;
+    action: string;
+    id?: string;
+}
 type TokenSearchEditorAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
     'data-component'?: never;
     'data-key'?: never;
@@ -88,10 +94,9 @@ interface TokenSearchFieldBaseProps {
     tokenPlaceholder?: string;
     disabled?: boolean;
     autofocus?: boolean;
+    /** Let an expanded collapsible field consume the available inline width. */
+    fill?: boolean;
     leading?: KerfUiContent;
-    trailing?: KerfUiContent;
-    /** Standalone field chrome or the inset visual layer of a configured toolbar group. */
-    presentation?: 'standalone' | 'toolbar-group';
     editAction?: string;
     removeAction?: string;
     clearAction?: string;
@@ -103,6 +108,25 @@ interface TokenSearchFieldBaseProps {
     /** Native named-slot assignment when composed inside a web component. */
     slot?: string;
 }
+type TokenSearchTrailingProps = {
+    trailing?: KerfUiContent;
+    trailingAction?: never;
+} | {
+    trailing?: never;
+    trailingAction: TokenSearchTrailingAction;
+};
+type TokenSearchPresentationProps = {
+    /** Standalone field chrome or the inset visual layer of a configured toolbar group. */
+    presentation?: 'standalone' | 'toolbar-group';
+    hint?: never;
+    required?: never;
+} | {
+    /** Visible form label and optional hint around the full-width standalone control. */
+    presentation: 'form-field';
+    hint?: string;
+    /** Marks the editor required; the app validates its value. */
+    required?: boolean;
+};
 type TokenSearchCollapsibleProps = {
     /** Allow an empty field to render as one iconic action. */
     collapsible: true;
@@ -116,15 +140,15 @@ type TokenSearchCollapsibleProps = {
     expandAction?: never;
     expandLabel?: never;
 };
-type TokenSearchFieldProps = TokenSearchFieldBaseProps & TokenSearchCollapsibleProps;
+type TokenSearchFieldProps = TokenSearchFieldBaseProps & TokenSearchCollapsibleProps & TokenSearchTrailingProps & TokenSearchPresentationProps;
 interface TokenSearchFieldValue {
     query: string;
     tokens: TokenSearchToken[];
 }
-declare function TokenSearchField({ id, label, query, tokens, model, revision, placeholder, tokenPlaceholder, disabled, autofocus, collapsible, expanded, expandAction, expandLabel, leading, trailing, presentation, editAction, removeAction, clearAction, clearLabel, clearIcon, className, editorAttributes, slot, }: TokenSearchFieldProps): SafeHtml;
+declare function TokenSearchField({ id, label, query, tokens, model, revision, placeholder, tokenPlaceholder, disabled, autofocus, fill, collapsible, expanded, expandAction, expandLabel, leading, trailing, trailingAction, presentation, hint, required, editAction, removeAction, clearAction, clearLabel, clearIcon, className, editorAttributes, slot, }: TokenSearchFieldProps): SafeHtml;
 /** Read editable text and ordered token offsets from a rendered TokenSearchField editor. */
 declare function readTokenSearchField(editor: HTMLElement, knownTokens?: readonly TokenSearchToken[]): TokenSearchFieldValue;
 /** Focus an editor and place its caret at a text offset, skipping atomic token chips. */
 declare function placeTokenSearchCaret(editor: HTMLElement, offset?: number): void;
 
-export { type TokenSearchEditorAttributes as T, TokenSearchField as a, type TokenSearchFieldProps as b, type TokenSearchFieldValue as c, type TokenSearchModel as d, type TokenSearchModelOptions as e, type TokenSearchResolvedToken as f, type TokenSearchRule as g, type TokenSearchState as h, type TokenSearchSuggestion as i, type TokenSearchToken as j, createTokenSearchModel as k, placeTokenSearchCaret as p, readTokenSearchField as r };
+export { type TokenSearchEditorAttributes as T, TokenSearchField as a, type TokenSearchFieldProps as b, type TokenSearchFieldValue as c, type TokenSearchModel as d, type TokenSearchModelOptions as e, type TokenSearchResolvedToken as f, type TokenSearchRule as g, type TokenSearchState as h, type TokenSearchSuggestion as i, type TokenSearchToken as j, type TokenSearchTrailingAction as k, createTokenSearchModel as l, placeTokenSearchCaret as p, readTokenSearchField as r };