keystra 0.0.0-stage → 0.1.0

package/dist/chunk-2BLQUBG7.js

@@ -0,0 +1,816 @@
+import { NavigationController, MENU_KEYS, EventManager, KeyMatcher, normalizeKeyEvent, createKeystra, ROVING_KEYS, TABS_KEYS_VERTICAL, TABS_KEYS_HORIZONTAL, LIST_KEYS, TREE_KEYS, COMMAND_PALETTE_KEYS } from './chunk-U7YK6PPT.js';
+import { createGridStrategy } from './chunk-XFNYIPOW.js';
+import { setAttribute, resolveElement, focusElement, ensureId, contains, queryItems } from './chunk-77GGU3AX.js';
+
+// src/patterns/shared.ts
+var LANDMARKS = /* @__PURE__ */ new Set(["NAV", "MAIN", "ASIDE", "HEADER", "FOOTER", "FORM", "SECTION", "ARTICLE", "DIALOG"]);
+function acceptsRole(element) {
+  return !element.hasAttribute("role") && !LANDMARKS.has(element.tagName);
+}
+function ensureRole(element, role, enabled) {
+  if (enabled && acceptsRole(element)) element.setAttribute("role", role);
+}
+function ensureItemRoles(container, items, containerRole, itemRole, enabled) {
+  if (!enabled || !container) return;
+  if (container.getAttribute("role") !== containerRole) return;
+  for (let i = 0; i < items.length; i++) ensureRole(items[i], itemRole, true);
+}
+function setAria(element, name, value, enabled) {
+  if (!enabled || !element) return;
+  setAttribute(element, name, value);
+}
+
+// src/patterns/tabs.ts
+var TabsController = class extends NavigationController {
+  constructor(options) {
+    const orientation = options.orientation ?? "horizontal";
+    super(options, {
+      mode: options.mode ?? (orientation === "vertical" ? "vertical" : "horizontal"),
+      loop: options.loop ?? true,
+      defaultKeys: orientation === "vertical" ? TABS_KEYS_VERTICAL : TABS_KEYS_HORIZONTAL
+    });
+    this.panels = [];
+    this.activeValue = -1;
+    this.applying = false;
+    this.initializing = true;
+    this.orientationValue = orientation;
+    this.activationValue = options.activation ?? "automatic";
+    this.manageAria = options.aria !== false;
+    this.activeAttribute = options.activeAttribute ?? "aria-selected";
+    this.panelActiveAttribute = options.panelActiveAttribute ?? "hidden";
+    this.panelSelector = options.panels;
+    this.userOnActivate = options.onActivate;
+    if (this.manageAria && this.container) {
+      ensureRole(this.container, "tablist", true);
+      if (this.container.getAttribute("role") === "tablist") {
+        setAria(this.container, "aria-orientation", this.orientationValue, true);
+      }
+    }
+    this.on("focus", ({ index }) => {
+      if (this.activationValue === "automatic") this.activate(index);
+    });
+    this.on("action", ({ action, index }) => {
+      if (this.activationValue === "manual" && action === "select" && index >= 0) this.activate(index);
+    });
+    this.on("refresh", () => this.refreshPanels());
+    this.refreshPanels();
+    this.decorate();
+    const initial = this.detectInitialIndex();
+    this.applyActive(initial);
+    this.initializing = false;
+  }
+  get activeTab() {
+    return this.activeValue >= 0 ? this.items[this.activeValue] ?? null : null;
+  }
+  get activeIndex() {
+    return this.activeValue;
+  }
+  get orientation() {
+    return this.orientationValue;
+  }
+  get activation() {
+    return this.activationValue;
+  }
+  activate(indexOrElement) {
+    if (indexOrElement === null) {
+      this.applyActive(-1);
+      return;
+    }
+    const index = typeof indexOrElement === "number" ? indexOrElement : this.items.indexOf(indexOrElement);
+    if (index < 0 || index >= this.items.length) return;
+    this.applyActive(index, true);
+  }
+  refresh() {
+    const items = super.refresh();
+    this.refreshPanels();
+    this.decorate();
+    if (this.activeValue >= items.length) this.applyActive(items.length > 0 ? 0 : -1);
+    else this.applyActive(this.activeValue);
+    return items;
+  }
+  ownsAction(action) {
+    return action === "select";
+  }
+  refreshPanels() {
+    if (!this.panelSelector || !this.container) {
+      this.panels = [];
+      return;
+    }
+    let panels = queryItems(this.container, this.panelSelector);
+    if (panels.length === 0) {
+      const scope = this.container.parentElement;
+      if (scope && scope !== this.container.ownerDocument?.documentElement) {
+        panels = queryItems(scope, this.panelSelector);
+      }
+    }
+    this.panels = panels;
+  }
+  decorate() {
+    const items = this.items;
+    for (let i = 0; i < items.length; i++) {
+      const tab = items[i];
+      ensureRole(tab, "tab", this.manageAria);
+      if (!this.manageAria) continue;
+      const tabId = ensureId(tab, "keystra-tab");
+      const panel = this.panels[i];
+      if (!panel) continue;
+      const panelId = ensureId(panel, "keystra-panel");
+      ensureRole(panel, "tabpanel", true);
+      setAria(tab, "aria-controls", panelId, true);
+      setAria(panel, "aria-labelledby", tabId, true);
+    }
+  }
+  detectInitialIndex() {
+    const items = this.items;
+    for (let i = 0; i < items.length; i++) {
+      if (items[i].getAttribute(this.activeAttribute) === "true") return i;
+    }
+    return items.length > 0 ? 0 : -1;
+  }
+  applyActive(index, moveFocus = false) {
+    if (this.applying) return;
+    this.applying = true;
+    try {
+      this.applyActiveNow(index, moveFocus);
+    } finally {
+      this.applying = false;
+    }
+  }
+  applyActiveNow(index, moveFocus) {
+    const items = this.items;
+    const previous = this.activeValue;
+    this.activeValue = index;
+    const writeMarker = this.manageAria || this.activeAttribute !== "aria-selected";
+    const writePanels = this.manageAria;
+    for (let i = 0; i < items.length; i++) {
+      const tab = items[i];
+      const on = i === index;
+      if (writeMarker && tab.getAttribute(this.activeAttribute) !== (on ? "true" : "false")) {
+        tab.setAttribute(this.activeAttribute, on ? "true" : "false");
+      }
+      if (this.manageAria && this.activeAttribute !== "aria-selected") {
+        setAria(tab, "aria-selected", on ? "true" : "false", true);
+      }
+      if (!writePanels) continue;
+      const panel = this.panels[i];
+      if (!panel) continue;
+      if (this.panelActiveAttribute === "hidden") {
+        if (panel.hasAttribute("hidden") === on) panel.toggleAttribute("hidden", !on);
+      } else {
+        panel.setAttribute(this.panelActiveAttribute, on ? "true" : "false");
+      }
+    }
+    if (index >= 0) {
+      if (moveFocus && items[index] !== this.activeElement) this.focusIndex(index);
+      else if (!moveFocus) this.setActiveIndex(index, { focus: false });
+    }
+    if (previous !== index && index >= 0 && !this.initializing) {
+      const element = items[index];
+      if (element) this.userOnActivate?.(element, index);
+    }
+  }
+};
+function createTabs(options = {}) {
+  return new TabsController(options);
+}
+
+// src/patterns/menu.ts
+var MenuController = class extends NavigationController {
+  constructor(options) {
+    super(
+      {
+        typeahead: true,
+        ...options,
+        enabled: false
+      },
+      {
+        mode: options.mode ?? "vertical",
+        loop: options.loop ?? true,
+        defaultKeys: MENU_KEYS
+      }
+    );
+    this.openValue = false;
+    this.unhidden = false;
+    this.closeOnSelect = options.closeOnSelect !== false;
+    this.returnFocusTarget = options.returnFocusTo;
+    this.manageAria = options.aria !== false;
+    this.toggleHiddenValue = options.toggleHidden !== false;
+    this.userOnOpen = options.onOpen;
+    this.userOnClose = options.onClose;
+    if (this.manageAria && this.container) ensureRole(this.container, "menu", true);
+    this.decorateItems();
+    this.on("select", () => {
+      if (this.closeOnSelect) this.close();
+    });
+    this.on("action", ({ action }) => {
+      if (action === "escape") this.close();
+    });
+    this.on("refresh", () => this.decorateItems());
+  }
+  decorateItems() {
+    ensureItemRoles(this.container, this.items, "menu", "menuitem", this.manageAria);
+  }
+  get isOpen() {
+    return this.openValue;
+  }
+  open(options = {}) {
+    if (this.openValue) return;
+    this.openValue = true;
+    this.enable();
+    this.rememberFocus();
+    if (this.toggleHiddenValue && this.container?.hasAttribute("hidden")) {
+      this.container.removeAttribute("hidden");
+      this.unhidden = true;
+    }
+    this.refresh();
+    if (this.manageAria && this.container) this.container.setAttribute("data-keystra-open", "true");
+    const target = options.focus ?? "first";
+    const items = this.items;
+    if (items.length === 0) {
+      this.userOnOpen?.(this);
+      return;
+    }
+    if (target === "current" && this.currentIndex >= 0) {
+      this.focusIndex(this.currentIndex);
+    } else if (target === "last") {
+      this.focusIndex(items.length - 1);
+    } else if (typeof target === "number") {
+      this.focusIndex(Math.max(0, Math.min(target, items.length - 1)));
+    } else {
+      this.focusIndex(0);
+    }
+    this.userOnOpen?.(this);
+  }
+  close(options = {}) {
+    if (!this.openValue) return;
+    this.openValue = false;
+    this.disable();
+    if (this.manageAria && this.container) this.container.removeAttribute("data-keystra-open");
+    if (options.restoreFocus !== false) {
+      const explicit = resolveElement(this.returnFocusTarget, this.container?.ownerDocument ?? null);
+      if (explicit) focusElement(explicit);
+      else this.restoreFocus();
+    }
+    if (this.unhidden) {
+      this.container?.setAttribute("hidden", "");
+      this.unhidden = false;
+    }
+    this.userOnClose?.(this);
+  }
+  toggle() {
+    if (this.openValue) this.close();
+    else this.open();
+  }
+  destroy() {
+    this.openValue = false;
+    super.destroy();
+  }
+  ownsAction(action) {
+    return action === "select" || action === "escape";
+  }
+};
+function createMenu(options = {}) {
+  return new MenuController(options);
+}
+
+// src/patterns/dropdown.ts
+var DEFAULT_OPEN_KEYS = ["Enter", "Space", "ArrowDown", "ArrowUp"];
+var DropdownController = class extends MenuController {
+  constructor(options) {
+    super({ typeahead: true, ...options });
+    this.extra = new EventManager();
+    const doc = this.container?.ownerDocument ?? (typeof document !== "undefined" ? document : null);
+    this.triggerElement = resolveElement(options.trigger, doc);
+    this.manageTriggerAria = options.aria !== false;
+    this.closeOnBlurValue = options.closeOnBlur === true;
+    this.closeOnOutsidePointerValue = options.closeOnOutsidePointer !== false;
+    const openKeys = options.openKeys === void 0 || options.openKeys === null ? DEFAULT_OPEN_KEYS : Array.isArray(options.openKeys) ? options.openKeys : [options.openKeys];
+    this.openMatcher = new KeyMatcher({ open: openKeys });
+    this.menuId = this.container ? ensureId(this.container, "keystra-menu") : null;
+    this.decorateTrigger();
+    this.wireTrigger();
+    this.on("action", ({ action, event }) => {
+      if (action !== "escape") return;
+      event?.preventDefault();
+      this.close();
+    });
+  }
+  get trigger() {
+    return this.triggerElement;
+  }
+  open(options = {}) {
+    const wasOpen = this.isOpen;
+    super.open(options);
+    if (!wasOpen && this.isOpen) this.syncTriggerState();
+  }
+  close(options = {}) {
+    const wasOpen = this.isOpen;
+    super.close({ restoreFocus: false });
+    if (wasOpen && options.restoreFocus !== false && this.triggerElement) {
+      focusElement(this.triggerElement);
+    }
+    if (wasOpen) this.syncTriggerState();
+  }
+  destroy() {
+    this.extra.dispose();
+    this.openMatcher.dispose();
+    if (this.triggerElement && this.manageTriggerAria) {
+      this.triggerElement.removeAttribute("aria-expanded");
+      if (this.menuId) this.triggerElement.removeAttribute("aria-controls");
+    }
+    super.destroy();
+  }
+  decorateTrigger() {
+    const trigger = this.triggerElement;
+    if (!trigger || !this.manageTriggerAria) return;
+    if (!trigger.hasAttribute("aria-haspopup")) trigger.setAttribute("aria-haspopup", "menu");
+    setAria(trigger, "aria-controls", this.menuId, true);
+    this.syncTriggerState();
+  }
+  syncTriggerState() {
+    if (!this.triggerElement || !this.manageTriggerAria) return;
+    this.triggerElement.setAttribute("aria-expanded", this.isOpen ? "true" : "false");
+  }
+  wireTrigger() {
+    const trigger = this.triggerElement;
+    if (!trigger) return;
+    this.extra.add(trigger, "click", () => {
+      this.toggle();
+    });
+    this.extra.add(trigger, "keydown", (rawEvent) => {
+      const event = rawEvent;
+      if (this.isOpen) {
+        if (event.key === "Tab") this.close({ restoreFocus: false });
+        return;
+      }
+      const normalized = normalizeKeyEvent(event);
+      const match = this.openMatcher.match(normalized, this);
+      if (!match?.complete) return;
+      event.preventDefault();
+      this.open({ focus: normalized.key === "ArrowUp" ? "last" : "first" });
+    });
+    if (typeof document !== "undefined") {
+      this.extra.add(document, "keydown", (rawEvent) => {
+        const event = rawEvent;
+        if (event.key !== "Tab" || event.defaultPrevented || !this.isOpen) return;
+        if (contains(this.container, event.target)) this.close();
+      });
+    }
+    if (this.closeOnOutsidePointerValue && typeof document !== "undefined") {
+      this.extra.add(document, "pointerdown", (rawEvent) => {
+        if (!this.isOpen) return;
+        const target = rawEvent.target;
+        if (contains(this.container, target) || contains(this.triggerElement, target)) return;
+        this.close({ restoreFocus: false });
+      });
+    }
+    if (this.closeOnBlurValue && typeof document !== "undefined") {
+      this.extra.add(document, "focusin", (rawEvent) => {
+        if (!this.isOpen) return;
+        const target = rawEvent.target;
+        if (contains(this.container, target) || contains(this.triggerElement, target)) return;
+        this.close({ restoreFocus: false });
+      });
+    }
+  }
+};
+function createDropdown(options = {}) {
+  return new DropdownController(options);
+}
+
+// src/patterns/list.ts
+var ListController = class extends NavigationController {
+  constructor(options) {
+    super(options, {
+      mode: options.mode ?? "vertical",
+      loop: options.loop ?? false,
+      defaultKeys: LIST_KEYS
+    });
+    this.manageAria = options.aria !== false;
+    if (this.manageAria && this.container) {
+      ensureRole(this.container, "listbox", true);
+      if (this.container.getAttribute("role") === "listbox" && this.selectionManager) {
+        const multiple = this.selectionManager.mode === "multiple" || this.selectionManager.mode === "range";
+        setAria(this.container, "aria-multiselectable", multiple ? "true" : null, true);
+      }
+    }
+    this.decorateItems();
+    this.on("refresh", () => this.decorateItems());
+  }
+  decorateItems() {
+    ensureItemRoles(this.container, this.items, "listbox", "option", this.manageAria);
+  }
+};
+function createList(options = {}) {
+  const container = resolveElement(options.container);
+  const aria = options.aria !== false && container !== null && (container.getAttribute("role") === "listbox" || acceptsRole(container));
+  const selection = options.selection ?? { enabled: true, mode: "single", followFocus: true };
+  return new ListController({
+    typeahead: true,
+    ...options,
+    selection: typeof selection === "object" ? { aria, ...selection } : selection && { mode: "single", aria }
+  });
+}
+
+// src/patterns/grid.ts
+var GridController = class extends NavigationController {
+  constructor(options) {
+    super(options, {
+      mode: "grid",
+      loop: options.loop ?? false,
+      columns: options.columns ?? 0,
+      strategy: createGridStrategy({
+        maintainColumn: options.maintainColumn,
+        rowHomeEnd: options.rowHomeEnd
+      })
+    });
+    this.manageAria = options.aria !== false;
+    this.decorateRoles();
+    this.on("refresh", () => this.decorateRoles());
+  }
+  decorateRoles() {
+    const container = this.container;
+    if (!this.manageAria || !container) return;
+    if (container.querySelector("[role='row']") === null) return;
+    ensureRole(container, "grid", true);
+    const items = this.items;
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i];
+      if (item.parentElement?.getAttribute("role") === "row") ensureRole(item, "gridcell", true);
+    }
+  }
+  get columns() {
+    if (this.resolved.columns > 0) return this.resolved.columns;
+    const items = this.items;
+    if (items.length === 0) return 0;
+    let columns = 1;
+    const first = items[0];
+    const top = this.rectOf(first).top;
+    for (let i = 1; i < items.length; i++) {
+      if (Math.abs(this.rectOf(items[i]).top - top) < 2) columns++;
+      else break;
+    }
+    return columns;
+  }
+  get rows() {
+    const columns = this.columns;
+    if (columns <= 0) return 0;
+    return Math.ceil(this.items.length / columns);
+  }
+  get position() {
+    const index = this.activeIndex;
+    const columns = this.columns;
+    if (index < 0 || columns <= 0) return { row: -1, column: -1 };
+    return { row: Math.floor(index / columns), column: index % columns };
+  }
+  focusCell(row, column) {
+    const columns = this.columns;
+    if (columns <= 0) return null;
+    const index = row * columns + column;
+    if (index < 0 || index >= this.items.length) return null;
+    return this.focusIndex(index);
+  }
+  rectOf(element) {
+    return this.collection.layout.rect(element, this.collection.version);
+  }
+};
+function createGrid(options = {}) {
+  return new GridController(options);
+}
+
+// src/patterns/tree.ts
+var DEFAULT_ITEM_SELECTOR = "[role='treeitem']";
+var DEFAULT_GROUP_SELECTOR = "[role='group']";
+var TreeController = class extends NavigationController {
+  constructor(options) {
+    const hiddenClass = options.hiddenClass;
+    super(
+      {
+        typeahead: true,
+        items: options.items ?? DEFAULT_ITEM_SELECTOR,
+        ...options,
+        filter: hiddenClass ? (element, index) => {
+          if (options.filter && !options.filter(element, index)) return false;
+          const group = element.parentElement?.closest(`.${hiddenClass}`);
+          return !group;
+        } : options.filter
+      },
+      {
+        mode: options.mode ?? "vertical",
+        loop: options.loop ?? false,
+        defaultKeys: TREE_KEYS
+      }
+    );
+    this.groupSelector = options.groupSelector ?? DEFAULT_GROUP_SELECTOR;
+    this.manageAria = options.aria !== false;
+    this.collapseBehavior = options.collapseBehavior ?? "attribute";
+    this.toggleHiddenValue = options.toggleHidden === true || this.collapseBehavior === "hidden";
+    this.hiddenClassValue = options.hiddenClass;
+    this.userOnExpand = options.onExpand;
+    this.userOnCollapse = options.onCollapse;
+    if (this.manageAria && this.container) ensureRole(this.container, "tree", true);
+    this.decorateItems();
+    this.on("action", ({ action, element }) => {
+      if (!element) return;
+      if (action === "expand") this.handleExpandKey(element);
+      else if (action === "collapse") this.handleCollapseKey(element);
+    });
+  }
+  decorateItems() {
+    ensureItemRoles(this.container, this.items, "tree", "treeitem", this.manageAria);
+    this.on("refresh", () => {
+      ensureItemRoles(this.container, this.items, "tree", "treeitem", this.manageAria);
+    });
+  }
+  isExpandable(element) {
+    if (element.hasAttribute("aria-expanded")) return true;
+    if (element.hasAttribute("data-expandable")) return true;
+    return element.querySelector(this.groupSelector) !== null;
+  }
+  isExpanded(element) {
+    const value = element.getAttribute("aria-expanded");
+    if (value !== null) return value === "true";
+    const group = element.querySelector(this.groupSelector);
+    if (!group) return false;
+    if (this.hiddenClassValue) return !group.classList.contains(this.hiddenClassValue);
+    return !group.hasAttribute("hidden");
+  }
+  expand(elementOrIndex) {
+    const element = this.elementOf(elementOrIndex);
+    if (!element || !this.isExpandable(element)) return;
+    if (this.isExpanded(element)) return;
+    this.setExpanded(element, true);
+  }
+  collapse(elementOrIndex) {
+    const element = this.elementOf(elementOrIndex);
+    if (!element || !this.isExpandable(element)) return;
+    if (!this.isExpanded(element)) return;
+    this.setExpanded(element, false);
+  }
+  toggleExpanded(elementOrIndex) {
+    const element = this.elementOf(elementOrIndex);
+    if (!element || !this.isExpandable(element)) return;
+    this.setExpanded(element, !this.isExpanded(element));
+  }
+  expandAll() {
+    const visited = /* @__PURE__ */ new Set();
+    for (let pending = true; pending; ) {
+      pending = false;
+      for (const element of this.items) {
+        if (visited.has(element)) continue;
+        visited.add(element);
+        if (!this.isExpandable(element) || this.isExpanded(element)) continue;
+        this.setExpanded(element, true);
+        pending = true;
+      }
+    }
+  }
+  collapseAll() {
+    for (const element of this.items) if (this.isExpandable(element)) this.setExpanded(element, false);
+  }
+  level(element) {
+    let depth = 0;
+    let node = element.parentElement;
+    while (node && node !== this.container) {
+      if (this.matchesGroup(node)) depth++;
+      node = node.parentElement;
+    }
+    return depth;
+  }
+  parent(element) {
+    const items = this.items;
+    let node = element.parentElement;
+    while (node && node !== this.container) {
+      if (items.indexOf(node) !== -1) return node;
+      node = node.parentElement;
+    }
+    return null;
+  }
+  elementOf(elementOrIndex) {
+    if (elementOrIndex === void 0) return this.activeElement;
+    if (typeof elementOrIndex === "number") return this.items[elementOrIndex] ?? null;
+    return elementOrIndex;
+  }
+  matchesGroup(node) {
+    if (typeof node.matches === "function") {
+      try {
+        return node.matches(this.groupSelector);
+      } catch {
+        return false;
+      }
+    }
+    return false;
+  }
+  setExpanded(element, expanded) {
+    if (this.collapseBehavior !== "none") {
+      setAria(element, "aria-expanded", expanded ? "true" : "false", this.manageAria);
+    }
+    const group = element.querySelector(this.groupSelector);
+    if (group) {
+      if (this.toggleHiddenValue) {
+        if (group.hasAttribute("hidden") === expanded) group.toggleAttribute("hidden", !expanded);
+      }
+      if (this.hiddenClassValue) group.classList.toggle(this.hiddenClassValue, !expanded);
+    }
+    this.refresh();
+    if (expanded) this.userOnExpand?.(element, this.items.indexOf(element));
+    else this.userOnCollapse?.(element, this.items.indexOf(element));
+  }
+  handleExpandKey(element) {
+    if (!this.isExpandable(element)) return;
+    if (!this.isExpanded(element)) {
+      this.setExpanded(element, true);
+      return;
+    }
+    const index = this.items.indexOf(element);
+    if (index !== -1 && index + 1 < this.items.length) this.focusIndex(index + 1);
+  }
+  handleCollapseKey(element) {
+    if (this.isExpandable(element) && this.isExpanded(element)) {
+      this.setExpanded(element, false);
+      return;
+    }
+    const parent = this.parent(element);
+    if (parent) this.focusElement(parent);
+  }
+};
+function createTree(options = {}) {
+  return new TreeController(options);
+}
+
+// src/patterns/command-palette.ts
+var CommandPaletteController = class extends NavigationController {
+  constructor(options) {
+    const doc = typeof document !== "undefined" ? document : null;
+    const containerElement = resolveElement(options.container, doc);
+    const input = resolveElement(options.input, doc) ?? containerElement?.querySelector(
+      "input:not([type='hidden']), textarea"
+    ) ?? null;
+    super(
+      {
+        activeDescendant: input ?? true,
+        ...options
+      },
+      {
+        mode: options.mode ?? "vertical",
+        loop: options.loop ?? true,
+        defaultKeys: COMMAND_PALETTE_KEYS,
+        listenTarget: input ?? containerElement ?? doc
+      }
+    );
+    this.extra = new EventManager();
+    this.openValue = false;
+    this.listId = null;
+    this.listElement = null;
+    this.inputElement = input;
+    this.manageAria = options.aria !== false;
+    this.toggleHiddenValue = options.toggleHidden !== false;
+    this.userOnQuery = options.onQuery;
+    this.userOnSubmit = options.onSubmit;
+    this.userOnCancel = options.onCancel;
+    if (options.openKeys && typeof document !== "undefined") {
+      const bindings = Array.isArray(options.openKeys) ? options.openKeys : [options.openKeys];
+      this.openMatcher = new KeyMatcher({ open: bindings });
+      this.extra.add(document, "keydown", (rawEvent) => {
+        const event = rawEvent;
+        const match = this.openMatcher.match(normalizeKeyEvent(event), this);
+        if (!match?.complete) return;
+        event.preventDefault();
+        this.toggle();
+      });
+    } else {
+      this.openMatcher = null;
+    }
+    this.listElement = resolveElement(options.list, doc) ?? this.container;
+    if (this.manageAria && this.listElement) {
+      ensureRole(this.listElement, "listbox", true);
+      this.listId = ensureId(this.listElement, "keystra-palette");
+    }
+    if (this.manageAria && this.inputElement) {
+      ensureRole(this.inputElement, "combobox", true);
+      setAria(this.inputElement, "aria-controls", this.listId, true);
+      setAria(this.inputElement, "aria-expanded", "false", true);
+      if (!this.inputElement.hasAttribute("aria-autocomplete")) {
+        this.inputElement.setAttribute("aria-autocomplete", "list");
+      }
+      if (options.placeholder && !this.inputElement.hasAttribute("placeholder")) {
+        this.inputElement.setAttribute("placeholder", options.placeholder);
+      }
+    }
+    this.wireInput();
+    this.decorateItems();
+    this.on("refresh", () => this.decorateItems());
+    this.on("select", ({ element }) => {
+      this.userOnSubmit?.(element ?? null, this.query);
+    });
+    this.on("action", ({ action, event }) => {
+      if (action !== "escape") return;
+      event?.preventDefault();
+      this.userOnCancel?.();
+      this.close();
+    });
+  }
+  get isOpen() {
+    return this.openValue;
+  }
+  get query() {
+    return this.inputElement?.value ?? "";
+  }
+  get input() {
+    return this.inputElement;
+  }
+  open() {
+    if (this.openValue) return;
+    this.openValue = true;
+    this.enable();
+    this.rememberFocus();
+    if (this.container && this.toggleHiddenValue && this.container.hasAttribute("hidden")) {
+      this.container.removeAttribute("hidden");
+    }
+    if (this.inputElement) {
+      focusElement(this.inputElement);
+      if (typeof this.inputElement.select === "function") this.inputElement.select();
+    }
+    this.refresh();
+    this.setActiveIndex(0, { focus: false });
+    setAria(this.inputElement, "aria-expanded", "true", this.manageAria);
+  }
+  close(options = {}) {
+    if (!this.openValue) return;
+    this.openValue = false;
+    this.disable();
+    if (this.container && this.toggleHiddenValue && !this.container.hasAttribute("hidden")) {
+      this.container.setAttribute("hidden", "");
+    }
+    setAria(this.inputElement, "aria-expanded", "false", this.manageAria);
+    if (options.restoreFocus !== false) this.restoreFocus();
+  }
+  toggle() {
+    if (this.openValue) this.close();
+    else this.open();
+  }
+  setQuery(query) {
+    if (!this.inputElement) return;
+    if (this.inputElement.value === query) return;
+    this.inputElement.value = query;
+    this.userOnQuery?.(query);
+  }
+  destroy() {
+    this.extra.dispose();
+    this.openMatcher?.dispose();
+    if (this.inputElement && this.manageAria) {
+      this.inputElement.removeAttribute("aria-expanded");
+      if (this.listId) this.inputElement.removeAttribute("aria-controls");
+    }
+    super.destroy();
+  }
+  ownsAction(action) {
+    return action === "select" || action === "escape";
+  }
+  runAction(action, event, match) {
+    if (super.runAction(action, event, match)) return true;
+    if (action !== "select") return false;
+    this.userOnSubmit?.(null, this.query);
+    return true;
+  }
+  decorateItems() {
+    ensureItemRoles(this.listElement, this.items, "listbox", "option", this.manageAria);
+  }
+  wireInput() {
+    const input = this.inputElement;
+    if (!input) return;
+    this.extra.add(input, "input", () => {
+      this.userOnQuery?.(input.value);
+      this.refresh();
+      this.setActiveIndex(0, { focus: false });
+    });
+  }
+};
+function createCommandPalette(options = {}) {
+  return new CommandPaletteController(options);
+}
+
+// src/patterns/roving-focus.ts
+function createRovingFocus(options = {}) {
+  const instance = createKeystra({
+    keys: options.mode === void 0 ? ROVING_KEYS : void 0,
+    loop: true,
+    roving: true,
+    ...options
+  });
+  const items = instance.items;
+  if (items.length === 0) return instance;
+  let initial = options.initialIndex ?? -1;
+  if (initial < 0) {
+    for (let i = 0; i < items.length; i++) {
+      if (items[i].getAttribute("tabindex") === "0") {
+        initial = i;
+        break;
+      }
+    }
+  }
+  if (initial > 0) instance.setActiveIndex(initial, { focus: false });
+  return instance;
+}
+
+export { DropdownController, MenuController, createCommandPalette, createDropdown, createGrid, createList, createMenu, createRovingFocus, createTabs, createTree, ensureRole, setAria };