igniteui-webcomponents 7.3.2 → 7.4.1

package/internals/controllers/keys.d.ts

@@ -0,0 +1,32 @@
+/**
+ * The key names, and the case-insensitive key check.
+ *
+ * @remarks
+ * The module has no imports, so a consumer of a key name depends on nothing
+ * else. The modifier table and the combination helpers live with their only
+ * consumer, the key-bindings controller.
+ */
+export declare const arrowLeft: "ArrowLeft";
+export declare const arrowRight: "ArrowRight";
+export declare const arrowUp: "ArrowUp";
+export declare const arrowDown: "ArrowDown";
+export declare const enterKey: "Enter";
+export declare const spaceBar: " ";
+export declare const escapeKey: "Escape";
+export declare const homeKey: "Home";
+export declare const endKey: "End";
+export declare const pageUpKey: "PageUp";
+export declare const pageDownKey: "PageDown";
+export declare const tabKey: "Tab";
+export declare const altKey: "Alt";
+export declare const ctrlKey: "Control";
+export declare const metaKey: "Meta";
+export declare const shiftKey: "Shift";
+/**
+ * Whether the key of the event matches `key`, without regard to case.
+ *
+ * @remarks
+ * Prefer it over a direct comparison with `event.key`. A caller can hold a
+ * normalized lowercase name, while an event carries the canonical case.
+ */
+export declare function isKey(event: KeyboardEvent, key: string): boolean;

package/internals/controllers/keys.js

@@ -0,0 +1,20 @@
+export const arrowLeft = 'ArrowLeft';
+export const arrowRight = 'ArrowRight';
+export const arrowUp = 'ArrowUp';
+export const arrowDown = 'ArrowDown';
+export const enterKey = 'Enter';
+export const spaceBar = ' ';
+export const escapeKey = 'Escape';
+export const homeKey = 'Home';
+export const endKey = 'End';
+export const pageUpKey = 'PageUp';
+export const pageDownKey = 'PageDown';
+export const tabKey = 'Tab';
+export const altKey = 'Alt';
+export const ctrlKey = 'Control';
+export const metaKey = 'Meta';
+export const shiftKey = 'Shift';
+export function isKey(event, key) {
+    return event.key.toLowerCase() === key.toLowerCase();
+}
+//# sourceMappingURL=keys.js.map

package/internals/controllers/keys.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"keys.js","sourceRoot":"","sources":["../../../src/internals/controllers/keys.ts"],"names":[],"mappings":"AAUA,MAAM,CAAC,MAAM,SAAS,GAAG,WAAoB,CAAC;AAC9C,MAAM,CAAC,MAAM,UAAU,GAAG,YAAqB,CAAC;AAChD,MAAM,CAAC,MAAM,OAAO,GAAG,SAAkB,CAAC;AAC1C,MAAM,CAAC,MAAM,SAAS,GAAG,WAAoB,CAAC;AAC9C,MAAM,CAAC,MAAM,QAAQ,GAAG,OAAgB,CAAC;AACzC,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAY,CAAC;AACrC,MAAM,CAAC,MAAM,SAAS,GAAG,QAAiB,CAAC;AAC3C,MAAM,CAAC,MAAM,OAAO,GAAG,MAAe,CAAC;AACvC,MAAM,CAAC,MAAM,MAAM,GAAG,KAAc,CAAC;AACrC,MAAM,CAAC,MAAM,SAAS,GAAG,QAAiB,CAAC;AAC3C,MAAM,CAAC,MAAM,WAAW,GAAG,UAAmB,CAAC;AAC/C,MAAM,CAAC,MAAM,MAAM,GAAG,KAAc,CAAC;AAGrC,MAAM,CAAC,MAAM,MAAM,GAAG,KAAc,CAAC;AACrC,MAAM,CAAC,MAAM,OAAO,GAAG,SAAkB,CAAC;AAC1C,MAAM,CAAC,MAAM,OAAO,GAAG,MAAe,CAAC;AACvC,MAAM,CAAC,MAAM,QAAQ,GAAG,OAAgB,CAAC;AASzC,MAAM,UAAU,KAAK,CAAC,KAAoB,EAAE,GAAW;IACrD,OAAO,KAAK,CAAC,GAAG,CAAC,WAAW,EAAE,KAAK,GAAG,CAAC,WAAW,EAAE,CAAC;AACvD,CAAC","sourcesContent":["/**\n * The key names, and the case-insensitive key check.\n *\n * @remarks\n * The module has no imports, so a consumer of a key name depends on nothing\n * else. The modifier table and the combination helpers live with their only\n * consumer, the key-bindings controller.\n */\n\n/* Common keys */\nexport const arrowLeft = 'ArrowLeft' as const;\nexport const arrowRight = 'ArrowRight' as const;\nexport const arrowUp = 'ArrowUp' as const;\nexport const arrowDown = 'ArrowDown' as const;\nexport const enterKey = 'Enter' as const;\nexport const spaceBar = ' ' as const;\nexport const escapeKey = 'Escape' as const;\nexport const homeKey = 'Home' as const;\nexport const endKey = 'End' as const;\nexport const pageUpKey = 'PageUp' as const;\nexport const pageDownKey = 'PageDown' as const;\nexport const tabKey = 'Tab' as const;\n\n/* Modifiers */\nexport const altKey = 'Alt' as const;\nexport const ctrlKey = 'Control' as const;\nexport const metaKey = 'Meta' as const;\nexport const shiftKey = 'Shift' as const;\n\n/**\n * Whether the key of the event matches `key`, without regard to case.\n *\n * @remarks\n * Prefer it over a direct comparison with `event.key`. A caller can hold a\n * normalized lowercase name, while an event carries the canonical case.\n */\nexport function isKey(event: KeyboardEvent, key: string): boolean {\n  return event.key.toLowerCase() === key.toLowerCase();\n}\n"]}

package/internals/controllers/mutation-observer.d.ts

@@ -1,54 +1,36 @@
 import { type ReactiveController, type ReactiveControllerHost } from 'lit';
 /** @hidden */
 export interface MutationControllerConfig<T extends Node = Node> {
-    /** The callback function to run when a mutation occurs. */
     callback: MutationControllerCallback<T>;
-    /** The underlying mutation observer configuration parameters. */
+    /** The options of the underlying `MutationObserver`. */
     config: MutationObserverInit;
-    /**
-     * The element to observe.
-     * If left out, the observer will listen on the host component itself.
-     */
+    /** The element to observe. Defaults to the host component. */
     target?: Element;
-    /**
-     * A filter configuration.
-     * See {@link MutationControllerFilter|this} for additional information.
-     */
+    /** See {@link MutationControllerFilter}. */
     filter?: MutationControllerFilter<T>;
 }
 type MutationControllerCallback<T extends Node = Node> = (params: MutationControllerParams<T>) => unknown;
-/**
- * Filter configuration to return elements that either match
- * an array of selector strings or a predicate function.
- */
+/** Keeps the nodes that match a selector list or a predicate. */
 type MutationControllerFilter<T extends Node = Node> = string[] | ((node: T) => boolean);
 type MutationDOMChange<T extends Node = Node> = {
-    /** The parent of the added/removed element. */
+    /** The parent of the added element or of the removed element. */
     target: Element;
-    /** The added/removed element. */
+    /** The added element or the removed element. */
     node: T;
 };
 type MutationAttributeChange<T extends Node = Node> = {
-    /** The host element of the changed attribute. */
+    /** The element of the changed attribute. */
     node: T;
-    /** The changed attribute name. */
     attributeName: string | null;
 };
 type MutationChange<T extends Node = Node> = {
-    /** Elements that have attribute(s) changes. */
     attributes: MutationAttributeChange<T>[];
-    /** Elements that have been added. */
     added: MutationDOMChange<T>[];
-    /** Elements that have been removed. */
     removed: MutationDOMChange<T>[];
 };
 export type MutationControllerParams<T extends Node = Node> = {
-    /** The original mutation records from the underlying observer. */
-    records: MutationRecord[];
-    /** The aggregated changes. */
+    /** The changes that match the filter, grouped by kind. */
     changes: MutationChange<T>;
-    /** The observer controller instance. */
-    observer: MutationController<T>;
 };
 declare class MutationController<T extends Node = Node> implements ReactiveController {
     private readonly _host;
@@ -64,22 +46,17 @@ declare class MutationController<T extends Node = Node> implements ReactiveContr
     hostDisconnected(): void;
     private _collect;
     private _process;
-    /**
-     * Begin receiving notifications of changes to the DOM based
-     * on the configured {@link MutationControllerConfig.target|target} and observer {@link MutationControllerConfig.config|options}.
-     */
+    /** Starts the observation of the configured target. */
     observe(): void;
-    /** Stop watching for mutations. */
     disconnect(): void;
 }
 /**
- * Creates and attaches a mutation controller with `config` to the passed in `host`.
- *
- * Automatically starts/stops observing for mutation changes
- * in the respective component connect/disconnect callbacks.
+ * Creates a mutation controller with `config`, and adds it to `host`.
  *
- * The mutation observer is disconnected before invoking the passed in callback and re-attached
- * after that in order to not loop itself in endless stream of changes.
+ * @remarks
+ * The observation runs while the host is connected. The observer disconnects
+ * for the duration of the callback, so a change that the callback makes
+ * starts no new notification.
  */
 export declare function createMutationController<T extends Node = Node>(host: ReactiveControllerHost & Element, config: MutationControllerConfig<T>): MutationController<T>;
 export {};

package/internals/controllers/mutation-observer.js

@@ -59,7 +59,7 @@ class MutationController {
                 this._collect(removedNodes, target, changes.removed);
             }
         }
-        return { records, changes, observer: this };
+        return { changes };
     }
     observe() {
         this._observer?.observe(this._target, this._config);

package/internals/controllers/mutation-observer.js.map

@@ -1 +1 @@
-{"version":3,"file":"mutation-observer.js","sourceRoot":"","sources":["../../../src/internals/controllers/mutation-observer.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  isServer,\n  type ReactiveController,\n  type ReactiveControllerHost,\n} from 'lit';\nimport { isElement } from '../utils/dom.js';\n\n/** @hidden */\nexport interface MutationControllerConfig<T extends Node = Node> {\n  /** The callback function to run when a mutation occurs. */\n  callback: MutationControllerCallback<T>;\n  /** The underlying mutation observer configuration parameters. */\n  config: MutationObserverInit;\n  /**\n   * The element to observe.\n   * If left out, the observer will listen on the host component itself.\n   */\n  target?: Element;\n  /**\n   * A filter configuration.\n   * See {@link MutationControllerFilter|this} for additional information.\n   */\n  filter?: MutationControllerFilter<T>;\n}\n\ntype MutationControllerCallback<T extends Node = Node> = (\n  params: MutationControllerParams<T>\n) => unknown;\n\n/**\n * Filter configuration to return elements that either match\n * an array of selector strings or a predicate function.\n */\ntype MutationControllerFilter<T extends Node = Node> =\n  | string[]\n  | ((node: T) => boolean);\n\ntype MutationDOMChange<T extends Node = Node> = {\n  /** The parent of the added/removed element. */\n  target: Element;\n  /** The added/removed element. */\n  node: T;\n};\n\ntype MutationAttributeChange<T extends Node = Node> = {\n  /** The host element of the changed attribute. */\n  node: T;\n  /** The changed attribute name. */\n  attributeName: string | null;\n};\n\ntype MutationChange<T extends Node = Node> = {\n  /** Elements that have attribute(s) changes. */\n  attributes: MutationAttributeChange<T>[];\n  /** Elements that have been added. */\n  added: MutationDOMChange<T>[];\n  /** Elements that have been removed. */\n  removed: MutationDOMChange<T>[];\n};\n\nexport type MutationControllerParams<T extends Node = Node> = {\n  /** The original mutation records from the underlying observer. */\n  records: MutationRecord[];\n  /** The aggregated changes. */\n  changes: MutationChange<T>;\n  /** The observer controller instance. */\n  observer: MutationController<T>;\n};\n\n/**\n * Resolves a filter configuration into a node predicate.\n *\n * A list of selectors is joined once into a single selector list, so matching a\n * node is a single `matches` call instead of one per selector.\n */\nfunction createNodeMatcher<T extends Node = Node>(\n  filter?: MutationControllerFilter<T>\n): (node: T) => boolean {\n  if (!filter) {\n    return () => true;\n  }\n\n  if (!Array.isArray(filter)) {\n    return filter;\n  }\n\n  const selector = filter.join(',');\n\n  return selector\n    ? (node) => isElement(node) && node.matches(selector)\n    : () => false;\n}\n\nclass MutationController<T extends Node = Node> implements ReactiveController {\n  private readonly _host: ReactiveControllerHost & Element;\n  private readonly _target: Element;\n  private readonly _config: MutationObserverInit;\n  private readonly _callback: MutationControllerCallback<T>;\n  private readonly _matches: (node: T) => boolean;\n\n  private _observer?: MutationObserver;\n\n  constructor(\n    host: ReactiveControllerHost & Element,\n    options: MutationControllerConfig<T>\n  ) {\n    this._host = host;\n    this._callback = options.callback;\n    this._config = options.config;\n    this._target = options.target ?? this._host;\n    this._matches = createNodeMatcher(options.filter);\n\n    if (!isServer) {\n      this._observer = new MutationObserver((records) => {\n        this.disconnect();\n        this._callback.call(this._host, this._process(records));\n        this.observe();\n      });\n    }\n\n    host.addController(this);\n  }\n\n  /** @internal */\n  public hostConnected(): void {\n    this.observe();\n  }\n\n  /** @internal */\n  public hostDisconnected(): void {\n    this.disconnect();\n  }\n\n  private _collect(\n    nodes: NodeList,\n    target: Element,\n    into: MutationDOMChange<T>[]\n  ): void {\n    for (const node of nodes) {\n      if (this._matches(node as T)) {\n        into.push({ target, node: node as T });\n      }\n    }\n  }\n\n  private _process(records: MutationRecord[]): MutationControllerParams<T> {\n    const changes: MutationChange<T> = {\n      attributes: [],\n      added: [],\n      removed: [],\n    };\n\n    for (const record of records) {\n      const { type, target, attributeName, addedNodes, removedNodes } = record;\n\n      if (type === 'attributes') {\n        if (this._matches(target as T)) {\n          changes.attributes.push({ node: target as T, attributeName });\n        }\n      } else if (type === 'childList') {\n        this._collect(addedNodes, target as Element, changes.added);\n        this._collect(removedNodes, target as Element, changes.removed);\n      }\n    }\n\n    return { records, changes, observer: this };\n  }\n\n  /**\n   * Begin receiving notifications of changes to the DOM based\n   * on the configured {@link MutationControllerConfig.target|target} and observer {@link MutationControllerConfig.config|options}.\n   */\n  public observe(): void {\n    this._observer?.observe(this._target, this._config);\n  }\n\n  /** Stop watching for mutations. */\n  public disconnect(): void {\n    this._observer?.disconnect();\n  }\n}\n\n/**\n * Creates and attaches a mutation controller with `config` to the passed in `host`.\n *\n * Automatically starts/stops observing for mutation changes\n * in the respective component connect/disconnect callbacks.\n *\n * The mutation observer is disconnected before invoking the passed in callback and re-attached\n * after that in order to not loop itself in endless stream of changes.\n */\nexport function createMutationController<T extends Node = Node>(\n  host: ReactiveControllerHost & Element,\n  config: MutationControllerConfig<T>\n): MutationController<T> {\n  return new MutationController(host, config);\n}\n"]}
+{"version":3,"file":"mutation-observer.js","sourceRoot":"","sources":["../../../src/internals/controllers/mutation-observer.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  isServer,\n  type ReactiveController,\n  type ReactiveControllerHost,\n} from 'lit';\nimport { isElement } from '../utils/dom.js';\n\n/** @hidden */\nexport interface MutationControllerConfig<T extends Node = Node> {\n  callback: MutationControllerCallback<T>;\n  /** The options of the underlying `MutationObserver`. */\n  config: MutationObserverInit;\n  /** The element to observe. Defaults to the host component. */\n  target?: Element;\n  /** See {@link MutationControllerFilter}. */\n  filter?: MutationControllerFilter<T>;\n}\n\ntype MutationControllerCallback<T extends Node = Node> = (\n  params: MutationControllerParams<T>\n) => unknown;\n\n/** Keeps the nodes that match a selector list or a predicate. */\ntype MutationControllerFilter<T extends Node = Node> =\n  | string[]\n  | ((node: T) => boolean);\n\ntype MutationDOMChange<T extends Node = Node> = {\n  /** The parent of the added element or of the removed element. */\n  target: Element;\n  /** The added element or the removed element. */\n  node: T;\n};\n\ntype MutationAttributeChange<T extends Node = Node> = {\n  /** The element of the changed attribute. */\n  node: T;\n  attributeName: string | null;\n};\n\ntype MutationChange<T extends Node = Node> = {\n  attributes: MutationAttributeChange<T>[];\n  added: MutationDOMChange<T>[];\n  removed: MutationDOMChange<T>[];\n};\n\nexport type MutationControllerParams<T extends Node = Node> = {\n  /** The changes that match the filter, grouped by kind. */\n  changes: MutationChange<T>;\n};\n\n/**\n * Resolves a filter configuration into a node predicate.\n *\n * @remarks\n * The selectors join once, so a node match takes one `matches` call.\n */\nfunction createNodeMatcher<T extends Node = Node>(\n  filter?: MutationControllerFilter<T>\n): (node: T) => boolean {\n  if (!filter) {\n    return () => true;\n  }\n\n  if (!Array.isArray(filter)) {\n    return filter;\n  }\n\n  const selector = filter.join(',');\n\n  return selector\n    ? (node) => isElement(node) && node.matches(selector)\n    : () => false;\n}\n\nclass MutationController<T extends Node = Node> implements ReactiveController {\n  private readonly _host: ReactiveControllerHost & Element;\n  private readonly _target: Element;\n  private readonly _config: MutationObserverInit;\n  private readonly _callback: MutationControllerCallback<T>;\n  private readonly _matches: (node: T) => boolean;\n\n  private _observer?: MutationObserver;\n\n  constructor(\n    host: ReactiveControllerHost & Element,\n    options: MutationControllerConfig<T>\n  ) {\n    this._host = host;\n    this._callback = options.callback;\n    this._config = options.config;\n    this._target = options.target ?? this._host;\n    this._matches = createNodeMatcher(options.filter);\n\n    if (!isServer) {\n      this._observer = new MutationObserver((records) => {\n        this.disconnect();\n        this._callback.call(this._host, this._process(records));\n        this.observe();\n      });\n    }\n\n    host.addController(this);\n  }\n\n  /** @internal */\n  public hostConnected(): void {\n    this.observe();\n  }\n\n  /** @internal */\n  public hostDisconnected(): void {\n    this.disconnect();\n  }\n\n  private _collect(\n    nodes: NodeList,\n    target: Element,\n    into: MutationDOMChange<T>[]\n  ): void {\n    for (const node of nodes) {\n      if (this._matches(node as T)) {\n        into.push({ target, node: node as T });\n      }\n    }\n  }\n\n  private _process(records: MutationRecord[]): MutationControllerParams<T> {\n    const changes: MutationChange<T> = {\n      attributes: [],\n      added: [],\n      removed: [],\n    };\n\n    for (const record of records) {\n      const { type, target, attributeName, addedNodes, removedNodes } = record;\n\n      if (type === 'attributes') {\n        if (this._matches(target as T)) {\n          changes.attributes.push({ node: target as T, attributeName });\n        }\n      } else if (type === 'childList') {\n        this._collect(addedNodes, target as Element, changes.added);\n        this._collect(removedNodes, target as Element, changes.removed);\n      }\n    }\n\n    return { changes };\n  }\n\n  /** Starts the observation of the configured target. */\n  public observe(): void {\n    this._observer?.observe(this._target, this._config);\n  }\n\n  public disconnect(): void {\n    this._observer?.disconnect();\n  }\n}\n\n/**\n * Creates a mutation controller with `config`, and adds it to `host`.\n *\n * @remarks\n * The observation runs while the host is connected. The observer disconnects\n * for the duration of the callback, so a change that the callback makes\n * starts no new notification.\n */\nexport function createMutationController<T extends Node = Node>(\n  host: ReactiveControllerHost & Element,\n  config: MutationControllerConfig<T>\n): MutationController<T> {\n  return new MutationController(host, config);\n}\n"]}

package/internals/controllers/resize-observer.d.ts

@@ -1,26 +1,18 @@
 import { type ReactiveController, type ReactiveControllerHost } from 'lit';
 type ResizeObserverControllerCallback = (...args: Parameters<ResizeObserverCallback>) => unknown;
-/**
- * Configuration for initializing a resize controller.
- * @hidden
- */
+/** @hidden */
 export interface ResizeObserverControllerConfig {
-    /** The callback function to run when a resize mutation is triggered. */
     callback: ResizeObserverControllerCallback;
-    /** Configuration options passed to the underlying ResizeObserver. */
+    /** The options of the underlying `ResizeObserver`. */
     options?: ResizeObserverOptions;
     /**
-     * The initial target element to observe for resize mutations.
-     *
-     * If not provided, the host element will be set as initial target.
-     * Pass in `null` to skip setting an initial target.
+     * The first target element to observe. Defaults to the host. Pass `null`
+     * for no first target.
      */
     target?: Element | null;
     /**
-     * Whether observing a target should request an update on the host.
-     *
-     * Defaults to `true`. Set to `false` when the host already drives its own
-     * update cycle and an extra render per observed element is wasted work.
+     * Whether an observed target requests an update on the host. Defaults to
+     * `true`. Set it to `false` when the host controls its own update cycle.
      */
     requestUpdate?: boolean;
 }
@@ -30,12 +22,9 @@ declare class ResizeObserverController implements ReactiveController {
     private readonly _observer;
     private readonly _config;
     constructor(host: ReactiveControllerHost & Element, config: ResizeObserverControllerConfig);
-    /** The elements currently being observed. */
     get targets(): ReadonlySet<Element>;
-    /** Starts observing the `targe` element. */
     observe(target: Element): void;
     private _requestUpdate;
-    /** Stops observing the `target` element. */
     unobserve(target: Element): void;
     /** @internal */
     hostConnected(): void;
@@ -43,8 +32,9 @@ declare class ResizeObserverController implements ReactiveController {
     hostDisconnected(): void;
 }
 /**
- * Creates a new resize controller bound to the given `host`
- * with {@link ResizeObserverControllerConfig | `config`}.
+ * Creates a resize controller with
+ * {@link ResizeObserverControllerConfig | `config`}, adds it to `host`, and
+ * observes each target while the host is connected.
  */
 export declare function createResizeObserverController(host: ReactiveControllerHost & Element, config: ResizeObserverControllerConfig): ResizeObserverController;
 export {};

package/internals/controllers/resize-observer.js.map

@@ -1 +1 @@
-{"version":3,"file":"resize-observer.js","sourceRoot":"","sources":["../../../src/internals/controllers/resize-observer.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,GAGT,MAAM,KAAK,CAAC;AA+Bb,MAAM,wBAAwB;IAM5B,YACE,IAAsC,EACtC,MAAsC;QANvB,aAAQ,GAAG,IAAI,GAAG,EAAW,CAAC;QAQ7C,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QAClB,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC;QAEtB,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,KAAK,IAAI,EAAE,CAAC;YACjC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,IAAI,IAAI,CAAC,CAAC;QACjD,CAAC;QAGD,IAAI,QAAQ,EAAE,CAAC;YACb,OAAO;QACT,CAAC;QAED,IAAI,CAAC,SAAS,GAAG,IAAI,cAAc,CAAC,CAAC,OAAO,EAAE,EAAE,CAC9C,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,SAAS,CAAC,CAChE,CAAC;QAEF,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IAC3B,CAAC;IAGD,IAAW,OAAO;QAChB,OAAO,IAAI,CAAC,QAAQ,CAAC;IACvB,CAAC;IAGM,OAAO,CAAC,MAAe;QAC5B,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;QAC1B,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QACrD,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAEO,cAAc;QACpB,IAAI,IAAI,CAAC,OAAO,CAAC,aAAa,IAAI,IAAI,EAAE,CAAC;YACvC,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,CAAC;QAC7B,CAAC;IACH,CAAC;IAGM,SAAS,CAAC,MAAe;QAC9B,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;QAC7B,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;IACnC,CAAC;IAGM,aAAa;QAClB,KAAK,MAAM,MAAM,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnC,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QACvD,CAAC;QAED,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI,GAAG,CAAC,EAAE,CAAC;YAC3B,IAAI,CAAC,cAAc,EAAE,CAAC;QACxB,CAAC;IACH,CAAC;IAGM,gBAAgB;QACrB,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,CAAC;IAC9B,CAAC;CACF;AAMD,MAAM,UAAU,8BAA8B,CAC5C,IAAsC,EACtC,MAAsC;IAEtC,OAAO,IAAI,wBAAwB,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;AACpD,CAAC","sourcesContent":["import {\n  isServer,\n  type ReactiveController,\n  type ReactiveControllerHost,\n} from 'lit';\n\ntype ResizeObserverControllerCallback = (\n  ...args: Parameters<ResizeObserverCallback>\n) => unknown;\n\n/**\n * Configuration for initializing a resize controller.\n * @hidden\n */\nexport interface ResizeObserverControllerConfig {\n  /** The callback function to run when a resize mutation is triggered. */\n  callback: ResizeObserverControllerCallback;\n  /** Configuration options passed to the underlying ResizeObserver. */\n  options?: ResizeObserverOptions;\n  /**\n   * The initial target element to observe for resize mutations.\n   *\n   * If not provided, the host element will be set as initial target.\n   * Pass in `null` to skip setting an initial target.\n   */\n  target?: Element | null;\n  /**\n   * Whether observing a target should request an update on the host.\n   *\n   * Defaults to `true`. Set to `false` when the host already drives its own\n   * update cycle and an extra render per observed element is wasted work.\n   */\n  requestUpdate?: boolean;\n}\n\nclass ResizeObserverController implements ReactiveController {\n  private readonly _host: ReactiveControllerHost & Element;\n  private readonly _targets = new Set<Element>();\n  private readonly _observer!: ResizeObserver;\n  private readonly _config: ResizeObserverControllerConfig;\n\n  constructor(\n    host: ReactiveControllerHost & Element,\n    config: ResizeObserverControllerConfig\n  ) {\n    this._host = host;\n    this._config = config;\n\n    if (this._config.target !== null) {\n      this._targets.add(this._config.target ?? host);\n    }\n\n    /* c8 ignore next 3 */\n    if (isServer) {\n      return;\n    }\n\n    this._observer = new ResizeObserver((entries) =>\n      this._config.callback.call(this._host, entries, this._observer)\n    );\n\n    host.addController(this);\n  }\n\n  /** The elements currently being observed. */\n  public get targets(): ReadonlySet<Element> {\n    return this._targets;\n  }\n\n  /** Starts observing the `targe` element. */\n  public observe(target: Element): void {\n    this._targets.add(target);\n    this._observer.observe(target, this._config.options);\n    this._requestUpdate();\n  }\n\n  private _requestUpdate(): void {\n    if (this._config.requestUpdate ?? true) {\n      this._host.requestUpdate();\n    }\n  }\n\n  /** Stops observing the `target` element. */\n  public unobserve(target: Element): void {\n    this._targets.delete(target);\n    this._observer.unobserve(target);\n  }\n\n  /** @internal */\n  public hostConnected(): void {\n    for (const target of this._targets) {\n      this._observer.observe(target, this._config.options);\n    }\n\n    if (this._targets.size > 0) {\n      this._requestUpdate();\n    }\n  }\n\n  /** @internal */\n  public hostDisconnected(): void {\n    this._observer.disconnect();\n  }\n}\n\n/**\n * Creates a new resize controller bound to the given `host`\n * with {@link ResizeObserverControllerConfig | `config`}.\n */\nexport function createResizeObserverController(\n  host: ReactiveControllerHost & Element,\n  config: ResizeObserverControllerConfig\n): ResizeObserverController {\n  return new ResizeObserverController(host, config);\n}\n"]}
+{"version":3,"file":"resize-observer.js","sourceRoot":"","sources":["../../../src/internals/controllers/resize-observer.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,GAGT,MAAM,KAAK,CAAC;AAuBb,MAAM,wBAAwB;IAM5B,YACE,IAAsC,EACtC,MAAsC;QANvB,aAAQ,GAAG,IAAI,GAAG,EAAW,CAAC;QAQ7C,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QAClB,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC;QAEtB,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,KAAK,IAAI,EAAE,CAAC;YACjC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,IAAI,IAAI,CAAC,CAAC;QACjD,CAAC;QAGD,IAAI,QAAQ,EAAE,CAAC;YACb,OAAO;QACT,CAAC;QAED,IAAI,CAAC,SAAS,GAAG,IAAI,cAAc,CAAC,CAAC,OAAO,EAAE,EAAE,CAC9C,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,SAAS,CAAC,CAChE,CAAC;QAEF,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IAC3B,CAAC;IAED,IAAW,OAAO;QAChB,OAAO,IAAI,CAAC,QAAQ,CAAC;IACvB,CAAC;IAEM,OAAO,CAAC,MAAe;QAC5B,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;QAC1B,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QACrD,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAEO,cAAc;QACpB,IAAI,IAAI,CAAC,OAAO,CAAC,aAAa,IAAI,IAAI,EAAE,CAAC;YACvC,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,CAAC;QAC7B,CAAC;IACH,CAAC;IAEM,SAAS,CAAC,MAAe;QAC9B,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;QAC7B,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;IACnC,CAAC;IAGM,aAAa;QAClB,KAAK,MAAM,MAAM,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnC,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QACvD,CAAC;QAED,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI,GAAG,CAAC,EAAE,CAAC;YAC3B,IAAI,CAAC,cAAc,EAAE,CAAC;QACxB,CAAC;IACH,CAAC;IAGM,gBAAgB;QACrB,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,CAAC;IAC9B,CAAC;CACF;AAOD,MAAM,UAAU,8BAA8B,CAC5C,IAAsC,EACtC,MAAsC;IAEtC,OAAO,IAAI,wBAAwB,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;AACpD,CAAC","sourcesContent":["import {\n  isServer,\n  type ReactiveController,\n  type ReactiveControllerHost,\n} from 'lit';\n\ntype ResizeObserverControllerCallback = (\n  ...args: Parameters<ResizeObserverCallback>\n) => unknown;\n\n/** @hidden */\nexport interface ResizeObserverControllerConfig {\n  callback: ResizeObserverControllerCallback;\n  /** The options of the underlying `ResizeObserver`. */\n  options?: ResizeObserverOptions;\n  /**\n   * The first target element to observe. Defaults to the host. Pass `null`\n   * for no first target.\n   */\n  target?: Element | null;\n  /**\n   * Whether an observed target requests an update on the host. Defaults to\n   * `true`. Set it to `false` when the host controls its own update cycle.\n   */\n  requestUpdate?: boolean;\n}\n\nclass ResizeObserverController implements ReactiveController {\n  private readonly _host: ReactiveControllerHost & Element;\n  private readonly _targets = new Set<Element>();\n  private readonly _observer!: ResizeObserver;\n  private readonly _config: ResizeObserverControllerConfig;\n\n  constructor(\n    host: ReactiveControllerHost & Element,\n    config: ResizeObserverControllerConfig\n  ) {\n    this._host = host;\n    this._config = config;\n\n    if (this._config.target !== null) {\n      this._targets.add(this._config.target ?? host);\n    }\n\n    /* c8 ignore next 3 */\n    if (isServer) {\n      return;\n    }\n\n    this._observer = new ResizeObserver((entries) =>\n      this._config.callback.call(this._host, entries, this._observer)\n    );\n\n    host.addController(this);\n  }\n\n  public get targets(): ReadonlySet<Element> {\n    return this._targets;\n  }\n\n  public observe(target: Element): void {\n    this._targets.add(target);\n    this._observer.observe(target, this._config.options);\n    this._requestUpdate();\n  }\n\n  private _requestUpdate(): void {\n    if (this._config.requestUpdate ?? true) {\n      this._host.requestUpdate();\n    }\n  }\n\n  public unobserve(target: Element): void {\n    this._targets.delete(target);\n    this._observer.unobserve(target);\n  }\n\n  /** @internal */\n  public hostConnected(): void {\n    for (const target of this._targets) {\n      this._observer.observe(target, this._config.options);\n    }\n\n    if (this._targets.size > 0) {\n      this._requestUpdate();\n    }\n  }\n\n  /** @internal */\n  public hostDisconnected(): void {\n    this._observer.disconnect();\n  }\n}\n\n/**\n * Creates a resize controller with\n * {@link ResizeObserverControllerConfig | `config`}, adds it to `host`, and\n * observes each target while the host is connected.\n */\nexport function createResizeObserverController(\n  host: ReactiveControllerHost & Element,\n  config: ResizeObserverControllerConfig\n): ResizeObserverController {\n  return new ResizeObserverController(host, config);\n}\n"]}

package/internals/controllers/root-click.d.ts

@@ -1,60 +1,32 @@
 import type { ReactiveController, ReactiveControllerHost } from 'lit';
-/** Configuration options for the RootClickController */
 type RootClickControllerConfig = {
-    /**
-     * An optional callback function to execute when an outside click occurs.
-     * If not provided, the `hide()` method of the host will be called.
-     */
+    /** Runs on an outside click. Defaults to the `hide()` method of the host. */
     onHide?: () => void;
-    /**
-     * An optional additional HTMLElement that, if clicked, should not trigger the hide action.
-     * This is useful for elements like a toggle button that opens the component.
-     */
+    /** An additional element whose clicks do not hide the host. */
     target?: HTMLElement;
 };
-/** Interface for the host element that the RootClickController will be attached to. */
 interface RootClickControllerHost extends ReactiveControllerHost, HTMLElement {
-    /**
-     * Indicates whether the host element is currently open or visible.
-     */
     open: boolean;
-    /**
-     * If true, outside clicks will not trigger the hide action.
-     */
     keepOpenOnOutsideClick?: boolean;
-    /**
-     * A method on the host to hide or close itself.
-     * This will be called if `hideCallback` is not provided in the config.
-     */
     hide(): void;
 }
 /**
- * A Lit ReactiveController that manages global click listeners to hide a component
- * when a click occurs outside of the component or its specified target.
+ * Hides a component when a click occurs outside of it, or outside the
+ * configured target.
  *
- * This controller implements a singleton pattern for the document click listener,
- * meaning only one event listener is attached to `document` regardless of how many
- * instances of `RootClickController` are active. Each controller instance
- * subscribes to this single listener.
+ * @remarks
+ * The document keeps one pair of listeners for all active controllers, which
+ * act on the hosts of a shared set.
  */
 declare class RootClickController implements ReactiveController {
     private readonly _host;
     private _config?;
     constructor(host: RootClickControllerHost, config?: RootClickControllerConfig);
-    /**
-     * Adds the host to the set of active hosts and ensures the global
-     * document click listener is active if needed.
-     */
+    /** Adds the host, and the document listeners for the first host. */
     private _addActiveHost;
-    /**
-     * Removes the host from the set of active hosts and removes the global
-     * document click listener if no other hosts are active.
-     */
+    /** Removes the host, and the document listeners for the last host. */
     private _removeActiveHost;
-    /**
-     * Configures the active state of the controller based on the host's `open` property.
-     * If `host.open` is true, the controller becomes active; otherwise, it becomes inactive.
-     */
+    /** Activates while the host is open and not kept open on an outside click. */
     private _configureListeners;
     /** Updates the controller configuration and active state. */
     update(config?: RootClickControllerConfig): void;
@@ -63,9 +35,6 @@ declare class RootClickController implements ReactiveController {
     /** @internal */
     hostDisconnected(): void;
 }
-/**
- * Creates and adds a {@link RootClickController} instance with a {@link RootClickControllerConfig | configuration}
- * to the given {@link RootClickControllerHost | host}.
- */
+/** Creates a {@link RootClickController} and adds it to `host`. */
 export declare function addRootClickController(host: RootClickControllerHost, config?: RootClickControllerConfig): RootClickController;
 export type { RootClickController };

package/internals/controllers/root-click.js

@@ -1,12 +1,11 @@
 import { createAbortHandle } from '../abort-handler.js';
 import { isEmpty } from '../utils/arrays.js';
-let ROOT_CLICK_LISTENER_ACTIVE = false;
 const SHARED_ABORT_HANDLER = createAbortHandle();
 const POINTER_DOWN_HOSTS = new Set();
 const HOST_CONFIGURATIONS = new WeakMap();
 const ACTIVE_HOSTS = new Set();
 function isInsideHost(path, host, target) {
-    return path.some((node) => node === host || node === target);
+    return path.includes(host) || (target != null && path.includes(target));
 }
 function handlePointerDown(event) {
     POINTER_DOWN_HOSTS.clear();
@@ -40,8 +39,9 @@ class RootClickController {
         }
     }
     _addActiveHost() {
+        const isFirstHost = isEmpty(ACTIVE_HOSTS);
         ACTIVE_HOSTS.add(this._host);
-        if (!ROOT_CLICK_LISTENER_ACTIVE) {
+        if (isFirstHost) {
             const options = {
                 capture: true,
                 signal: SHARED_ABORT_HANDLER.signal,
@@ -51,15 +51,13 @@ class RootClickController {
                 passive: true,
             });
             document.addEventListener('click', handleRootClick, options);
-            ROOT_CLICK_LISTENER_ACTIVE = true;
         }
     }
     _removeActiveHost() {
         ACTIVE_HOSTS.delete(this._host);
         POINTER_DOWN_HOSTS.delete(this._host);
-        if (isEmpty(ACTIVE_HOSTS) && ROOT_CLICK_LISTENER_ACTIVE) {
+        if (isEmpty(ACTIVE_HOSTS)) {
             SHARED_ABORT_HANDLER.abort();
-            ROOT_CLICK_LISTENER_ACTIVE = false;
         }
     }
     _configureListeners() {

package/internals/controllers/root-click.js.map

@@ -1 +1 @@
-{"version":3,"file":"root-click.js","sourceRoot":"","sources":["../../../src/internals/controllers/root-click.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAiC7C,IAAI,0BAA0B,GAAG,KAAK,CAAC;AAGvC,MAAM,oBAAoB,GAAG,iBAAiB,EAAE,CAAC;AAGjD,MAAM,kBAAkB,GAAG,IAAI,GAAG,EAA2B,CAAC;AAE9D,MAAM,mBAAmB,GAAG,IAAI,OAAO,EAGpC,CAAC;AAEJ,MAAM,YAAY,GAAG,IAAI,GAAG,EAA2B,CAAC;AASxD,SAAS,YAAY,CACnB,IAAmB,EACnB,IAA6B,EAC7B,MAAoB;IAEpB,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,IAAI,IAAI,IAAI,KAAK,MAAM,CAAC,CAAC;AAC/D,CAAC;AAED,SAAS,iBAAiB,CAAC,KAAmB;IAC5C,kBAAkB,CAAC,KAAK,EAAE,CAAC;IAC3B,MAAM,IAAI,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC;IAElC,KAAK,MAAM,IAAI,IAAI,YAAY,EAAE,CAAC;QAChC,IAAI,YAAY,CAAC,IAAI,EAAE,IAAI,EAAE,mBAAmB,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC,EAAE,CAAC;YACpE,kBAAkB,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QAC/B,CAAC;IACH,CAAC;AACH,CAAC;AAED,SAAS,eAAe,CAAC,KAAmB;IAC1C,MAAM,IAAI,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC;IAIlC,KAAK,MAAM,IAAI,IAAI,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE,CAAC;QAC5C,IAAI,IAAI,CAAC,sBAAsB,IAAI,kBAAkB,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC;YAChE,SAAS;QACX,CAAC;QAED,MAAM,MAAM,GAAG,mBAAmB,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QAE7C,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,CAAC;YAC9C,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;QAC1D,CAAC;IACH,CAAC;IAED,kBAAkB,CAAC,KAAK,EAAE,CAAC;AAC7B,CAAC;AAYD,MAAM,mBAAmB;IAIvB,YACE,IAA6B,EAC7B,MAAkC;QAElC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QAClB,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC;QACtB,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;QAE/B,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,mBAAmB,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QACpD,CAAC;IACH,CAAC;IAMO,cAAc;QACpB,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAE7B,IAAI,CAAC,0BAA0B,EAAE,CAAC;YAChC,MAAM,OAAO,GAA4B;gBACvC,OAAO,EAAE,IAAI;gBACb,MAAM,EAAE,oBAAoB,CAAC,MAAM;aACpC,CAAC;YAEF,QAAQ,CAAC,gBAAgB,CAAC,aAAa,EAAE,iBAAiB,EAAE;gBAC1D,GAAG,OAAO;gBACV,OAAO,EAAE,IAAI;aACd,CAAC,CAAC;YACH,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,eAAe,EAAE,OAAO,CAAC,CAAC;YAC7D,0BAA0B,GAAG,IAAI,CAAC;QACpC,CAAC;IACH,CAAC;IAMO,iBAAiB;QACvB,YAAY,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAChC,kBAAkB,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAEtC,IAAI,OAAO,CAAC,YAAY,CAAC,IAAI,0BAA0B,EAAE,CAAC;YACxD,oBAAoB,CAAC,KAAK,EAAE,CAAC;YAC7B,0BAA0B,GAAG,KAAK,CAAC;QACrC,CAAC;IACH,CAAC;IAMO,mBAAmB;QACzB,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,sBAAsB;YACnD,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE;YACvB,CAAC,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC/B,CAAC;IAGM,MAAM,CAAC,MAAkC;QAC9C,IAAI,MAAM,EAAE,CAAC;YACX,IAAI,CAAC,OAAO,GAAG,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE,GAAG,MAAM,EAAE,CAAC;YAC9C,mBAAmB,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QACpD,CAAC;QAED,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC7B,CAAC;IAGM,aAAa;QAClB,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC7B,CAAC;IAGM,gBAAgB;QACrB,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC3B,CAAC;CACF;AAMD,MAAM,UAAU,sBAAsB,CACpC,IAA6B,EAC7B,MAAkC;IAElC,OAAO,IAAI,mBAAmB,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;AAC/C,CAAC","sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit';\nimport { createAbortHandle } from '../abort-handler.js';\nimport { isEmpty } from '../utils/arrays.js';\n\n/** Configuration options for the RootClickController */\ntype RootClickControllerConfig = {\n  /**\n   * An optional callback function to execute when an outside click occurs.\n   * If not provided, the `hide()` method of the host will be called.\n   */\n  onHide?: () => void;\n  /**\n   * An optional additional HTMLElement that, if clicked, should not trigger the hide action.\n   * This is useful for elements like a toggle button that opens the component.\n   */\n  target?: HTMLElement;\n};\n\n/** Interface for the host element that the RootClickController will be attached to. */\ninterface RootClickControllerHost extends ReactiveControllerHost, HTMLElement {\n  /**\n   * Indicates whether the host element is currently open or visible.\n   */\n  open: boolean;\n  /**\n   * If true, outside clicks will not trigger the hide action.\n   */\n  keepOpenOnOutsideClick?: boolean;\n  /**\n   * A method on the host to hide or close itself.\n   * This will be called if `hideCallback` is not provided in the config.\n   */\n  hide(): void;\n}\n\nlet ROOT_CLICK_LISTENER_ACTIVE = false;\n\n/** Shared abort handler for the singleton document listeners. */\nconst SHARED_ABORT_HANDLER = createAbortHandle();\n\n/** Tracks which hosts had a pointerdown event inside them. */\nconst POINTER_DOWN_HOSTS = new Set<RootClickControllerHost>();\n\nconst HOST_CONFIGURATIONS = new WeakMap<\n  RootClickControllerHost,\n  RootClickControllerConfig\n>();\n\nconst ACTIVE_HOSTS = new Set<RootClickControllerHost>();\n\n/**\n * Whether the event occurred \"inside\" the host, that is on the host itself or\n * on the additional `target` of its configuration.\n *\n * Takes an already resolved composed path, so a single one is shared by all the\n * active hosts instead of being rebuilt for each of them.\n */\nfunction isInsideHost(\n  path: EventTarget[],\n  host: RootClickControllerHost,\n  target?: HTMLElement\n): boolean {\n  return path.some((node) => node === host || node === target);\n}\n\nfunction handlePointerDown(event: PointerEvent): void {\n  POINTER_DOWN_HOSTS.clear();\n  const path = event.composedPath();\n\n  for (const host of ACTIVE_HOSTS) {\n    if (isInsideHost(path, host, HOST_CONFIGURATIONS.get(host)?.target)) {\n      POINTER_DOWN_HOSTS.add(host);\n    }\n  }\n}\n\nfunction handleRootClick(event: PointerEvent): void {\n  const path = event.composedPath();\n\n  // Snapshot the set: hiding a host deactivates it and mutates ACTIVE_HOSTS\n  // while we are still walking it.\n  for (const host of Array.from(ACTIVE_HOSTS)) {\n    if (host.keepOpenOnOutsideClick || POINTER_DOWN_HOSTS.has(host)) {\n      continue;\n    }\n\n    const config = HOST_CONFIGURATIONS.get(host);\n\n    if (!isInsideHost(path, host, config?.target)) {\n      config?.onHide ? config.onHide.call(host) : host.hide();\n    }\n  }\n\n  POINTER_DOWN_HOSTS.clear();\n}\n\n/* blazorSuppress */\n/**\n * A Lit ReactiveController that manages global click listeners to hide a component\n * when a click occurs outside of the component or its specified target.\n *\n * This controller implements a singleton pattern for the document click listener,\n * meaning only one event listener is attached to `document` regardless of how many\n * instances of `RootClickController` are active. Each controller instance\n * subscribes to this single listener.\n */\nclass RootClickController implements ReactiveController {\n  private readonly _host: RootClickControllerHost;\n  private _config?: RootClickControllerConfig;\n\n  constructor(\n    host: RootClickControllerHost,\n    config?: RootClickControllerConfig\n  ) {\n    this._host = host;\n    this._config = config;\n    this._host.addController(this);\n\n    if (this._config) {\n      HOST_CONFIGURATIONS.set(this._host, this._config);\n    }\n  }\n\n  /**\n   * Adds the host to the set of active hosts and ensures the global\n   * document click listener is active if needed.\n   */\n  private _addActiveHost(): void {\n    ACTIVE_HOSTS.add(this._host);\n\n    if (!ROOT_CLICK_LISTENER_ACTIVE) {\n      const options: AddEventListenerOptions = {\n        capture: true,\n        signal: SHARED_ABORT_HANDLER.signal,\n      };\n\n      document.addEventListener('pointerdown', handlePointerDown, {\n        ...options,\n        passive: true,\n      });\n      document.addEventListener('click', handleRootClick, options);\n      ROOT_CLICK_LISTENER_ACTIVE = true;\n    }\n  }\n\n  /**\n   * Removes the host from the set of active hosts and removes the global\n   * document click listener if no other hosts are active.\n   */\n  private _removeActiveHost(): void {\n    ACTIVE_HOSTS.delete(this._host);\n    POINTER_DOWN_HOSTS.delete(this._host);\n\n    if (isEmpty(ACTIVE_HOSTS) && ROOT_CLICK_LISTENER_ACTIVE) {\n      SHARED_ABORT_HANDLER.abort();\n      ROOT_CLICK_LISTENER_ACTIVE = false;\n    }\n  }\n\n  /**\n   * Configures the active state of the controller based on the host's `open` property.\n   * If `host.open` is true, the controller becomes active; otherwise, it becomes inactive.\n   */\n  private _configureListeners(): void {\n    this._host.open && !this._host.keepOpenOnOutsideClick\n      ? this._addActiveHost()\n      : this._removeActiveHost();\n  }\n\n  /** Updates the controller configuration and active state. */\n  public update(config?: RootClickControllerConfig): void {\n    if (config) {\n      this._config = { ...this._config, ...config };\n      HOST_CONFIGURATIONS.set(this._host, this._config);\n    }\n\n    this._configureListeners();\n  }\n\n  /** @internal */\n  public hostConnected(): void {\n    this._configureListeners();\n  }\n\n  /** @internal */\n  public hostDisconnected(): void {\n    this._removeActiveHost();\n  }\n}\n\n/**\n * Creates and adds a {@link RootClickController} instance with a {@link RootClickControllerConfig | configuration}\n * to the given {@link RootClickControllerHost | host}.\n */\nexport function addRootClickController(\n  host: RootClickControllerHost,\n  config?: RootClickControllerConfig\n): RootClickController {\n  return new RootClickController(host, config);\n}\n\nexport type { RootClickController };\n"]}
+{"version":3,"file":"root-click.js","sourceRoot":"","sources":["../../../src/internals/controllers/root-click.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit';\nimport { createAbortHandle } from '../abort-handler.js';\nimport { isEmpty } from '../utils/arrays.js';\n\ntype RootClickControllerConfig = {\n  /** Runs on an outside click. Defaults to the `hide()` method of the host. */\n  onHide?: () => void;\n  /** An additional element whose clicks do not hide the host. */\n  target?: HTMLElement;\n};\n\ninterface RootClickControllerHost extends ReactiveControllerHost, HTMLElement {\n  open: boolean;\n  keepOpenOnOutsideClick?: boolean;\n  hide(): void;\n}\n\n/** Aborts the shared document listeners. */\nconst SHARED_ABORT_HANDLER = createAbortHandle();\n\n/** The hosts that received a pointerdown event inside them. */\nconst POINTER_DOWN_HOSTS = new Set<RootClickControllerHost>();\n\nconst HOST_CONFIGURATIONS = new WeakMap<\n  RootClickControllerHost,\n  RootClickControllerConfig\n>();\n\nconst ACTIVE_HOSTS = new Set<RootClickControllerHost>();\n\n/**\n * Whether `path` contains the host or the `target` of its configuration.\n *\n * @remarks\n * The caller builds the composed path once per event, and a scan of it beats\n * a set for the one or two hosts that are open together.\n */\nfunction isInsideHost(\n  path: EventTarget[],\n  host: RootClickControllerHost,\n  target?: HTMLElement\n): boolean {\n  return path.includes(host) || (target != null && path.includes(target));\n}\n\nfunction handlePointerDown(event: PointerEvent): void {\n  POINTER_DOWN_HOSTS.clear();\n  const path = event.composedPath();\n\n  for (const host of ACTIVE_HOSTS) {\n    if (isInsideHost(path, host, HOST_CONFIGURATIONS.get(host)?.target)) {\n      POINTER_DOWN_HOSTS.add(host);\n    }\n  }\n}\n\nfunction handleRootClick(event: PointerEvent): void {\n  const path = event.composedPath();\n\n  // A hidden host leaves ACTIVE_HOSTS, so the loop runs over a copy.\n  for (const host of Array.from(ACTIVE_HOSTS)) {\n    if (host.keepOpenOnOutsideClick || POINTER_DOWN_HOSTS.has(host)) {\n      continue;\n    }\n\n    const config = HOST_CONFIGURATIONS.get(host);\n\n    if (!isInsideHost(path, host, config?.target)) {\n      config?.onHide ? config.onHide.call(host) : host.hide();\n    }\n  }\n\n  POINTER_DOWN_HOSTS.clear();\n}\n\n/* blazorSuppress */\n/**\n * Hides a component when a click occurs outside of it, or outside the\n * configured target.\n *\n * @remarks\n * The document keeps one pair of listeners for all active controllers, which\n * act on the hosts of a shared set.\n */\nclass RootClickController implements ReactiveController {\n  private readonly _host: RootClickControllerHost;\n  private _config?: RootClickControllerConfig;\n\n  constructor(\n    host: RootClickControllerHost,\n    config?: RootClickControllerConfig\n  ) {\n    this._host = host;\n    this._config = config;\n    this._host.addController(this);\n\n    if (this._config) {\n      HOST_CONFIGURATIONS.set(this._host, this._config);\n    }\n  }\n\n  /** Adds the host, and the document listeners for the first host. */\n  private _addActiveHost(): void {\n    const isFirstHost = isEmpty(ACTIVE_HOSTS);\n    ACTIVE_HOSTS.add(this._host);\n\n    if (isFirstHost) {\n      const options: AddEventListenerOptions = {\n        capture: true,\n        signal: SHARED_ABORT_HANDLER.signal,\n      };\n\n      document.addEventListener('pointerdown', handlePointerDown, {\n        ...options,\n        passive: true,\n      });\n      document.addEventListener('click', handleRootClick, options);\n    }\n  }\n\n  /** Removes the host, and the document listeners for the last host. */\n  private _removeActiveHost(): void {\n    ACTIVE_HOSTS.delete(this._host);\n    POINTER_DOWN_HOSTS.delete(this._host);\n\n    if (isEmpty(ACTIVE_HOSTS)) {\n      SHARED_ABORT_HANDLER.abort();\n    }\n  }\n\n  /** Activates while the host is open and not kept open on an outside click. */\n  private _configureListeners(): void {\n    this._host.open && !this._host.keepOpenOnOutsideClick\n      ? this._addActiveHost()\n      : this._removeActiveHost();\n  }\n\n  /** Updates the controller configuration and active state. */\n  public update(config?: RootClickControllerConfig): void {\n    if (config) {\n      this._config = { ...this._config, ...config };\n      HOST_CONFIGURATIONS.set(this._host, this._config);\n    }\n\n    this._configureListeners();\n  }\n\n  /** @internal */\n  public hostConnected(): void {\n    this._configureListeners();\n  }\n\n  /** @internal */\n  public hostDisconnected(): void {\n    this._removeActiveHost();\n  }\n}\n\n/** Creates a {@link RootClickController} and adds it to `host`. */\nexport function addRootClickController(\n  host: RootClickControllerHost,\n  config?: RootClickControllerConfig\n): RootClickController {\n  return new RootClickController(host, config);\n}\n\nexport type { RootClickController };\n"]}

package/internals/controllers/roving-focus.d.ts

@@ -2,62 +2,43 @@ import type { ReactiveControllerHost } from 'lit';
 import { type KeyBindingControllerOptions, type KeyBindingOptions } from './key-bindings.js';
 type RovingFocusHost = ReactiveControllerHost & HTMLElement;
 /**
- * Whether an arrow axis navigates. A predicate keeps the keys bound - and
- * their default behavior suppressed - while gating the navigation itself,
- * for hosts that switch orientation at runtime.
+ * Whether an arrow axis navigates. A predicate keeps the keys bound and
+ * gates only the navigation, for a host that changes orientation at runtime.
  */
 type RovingFocusAxis = boolean | (() => boolean);
 type RovingFocusControllerOptions<T extends Element> = {
-    /**
-     * The keyboard-navigable items, in order, with non-interactive ones
-     * already excluded.
-     */
+    /** The keyboard-navigable items, in order, without the inert ones. */
     items: () => T[];
-    /**
-     * The item navigation moves relative to - typically resolved from the
-     * focused element. Arrow navigation and activation are no-ops while nullish.
-     */
+    /** The item that navigation moves from, as the host resolves it. */
     current: () => T | null | undefined;
-    /**
-     * Moves focus to `item`. The host owns the focus delegation and any side
-     * effects riding along with it (scrolling, selection-follows-focus).
-     */
+    /** Moves the focus to `item`. The host owns any side effects. */
     focusItem: (item: T) => void;
-    /**
-     * Invoked with the current item on Enter/Space, when the item is part of
-     * {@link RovingFocusControllerOptions.items}. Omit to skip the activation
-     * binding altogether.
-     */
+    /** Runs with the current item on Enter and on Space. */
     activateItem?: (item: T) => void;
     /** Binding options for the activation keys. */
     activateOptions?: KeyBindingOptions;
-    /**
-     * Whether ArrowLeft/ArrowRight navigate, following the writing direction.
-     * Defaults to `true`.
-     */
+    /** Whether ArrowLeft and ArrowRight navigate. Defaults to `true`. */
     horizontal?: RovingFocusAxis;
-    /** Whether ArrowUp/ArrowDown navigate. Defaults to `false`. */
+    /** Whether ArrowUp and ArrowDown navigate. Defaults to `false`. */
     vertical?: RovingFocusAxis;
-    /** Whether Home/End jump to the first/last item. Defaults to `true`. */
+    /** Whether Home and End jump to the first and last item. Default `true`. */
     homeEnd?: boolean;
     /**
      * How arrow navigation treats a nullish current item:
      * - `skip` - do nothing (default)
-     * - `wrap` - navigate from just outside the list, so "next" lands on the
-     *   first item and "previous" on the last one
+     * - `wrap` - navigate from outside the list, so "next" lands on the first
+     *   item and "previous" on the last one
      */
     missingCurrent?: 'skip' | 'wrap';
     /** Options forwarded to the underlying key-bindings controller. */
     keybindings?: KeyBindingControllerOptions;
 };
 /**
- * Implements the roving keyboard navigation shared by the container
- * components: Home/End jumps and wrapping ArrowKey moves over a flat list of
- * enabled items, relative to the currently focused one, with the horizontal
- * axis following the writing direction.
+ * Implements the roving keyboard navigation of the container components.
  *
- * The host supplies the item list, the current-item resolution and the focus
- * delegation; hierarchical structures (the tree) need their own navigation.
+ * @remarks
+ * Moves wrap over a flat list, and the horizontal axis follows the writing
+ * direction. A hierarchy, such as the tree, needs its own navigation.
  */
 declare class RovingFocusController<T extends Element> {
     private readonly _host;
@@ -67,6 +48,6 @@ declare class RovingFocusController<T extends Element> {
     private _move;
     private _activate;
 }
-/** Creates and adds a {@link RovingFocusController} to the given host. */
+/** Creates a {@link RovingFocusController} for the given host. */
 export declare function addRovingFocusController<T extends Element>(host: RovingFocusHost, options: RovingFocusControllerOptions<T>): RovingFocusController<T>;
 export type { RovingFocusController, RovingFocusControllerOptions };

package/internals/controllers/roving-focus.js.map

@@ -1 +1 @@
-{"version":3,"file":"roving-focus.js","sourceRoot":"","sources":["../../../src/internals/controllers/roving-focus.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EACL,cAAc,EACd,SAAS,EACT,SAAS,EACT,UAAU,EACV,OAAO,EACP,MAAM,EACN,OAAO,GAGR,MAAM,mBAAmB,CAAC;AAgE3B,MAAM,qBAAqB;IAIzB,YAAY,IAAqB,EAAE,OAAwC;QACzE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QAClB,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC;QAExB,MAAM,EACJ,UAAU,GAAG,IAAI,EACjB,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,IAAI,EACd,YAAY,EACZ,eAAe,EACf,WAAW,GACZ,GAAG,OAAO,CAAC;QAEZ,MAAM,QAAQ,GAAG,cAAc,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;QAEnD,IAAI,UAAU,EAAE,CAAC;YACf,QAAQ;iBACL,GAAG,CAAC,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,IAAI,CAAC,CAAC;iBACtD,GAAG,CAAC,UAAU,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,UAAU,EAAE,IAAI,CAAC,CAAC,CAAC;QAC5D,CAAC;QAED,IAAI,QAAQ,EAAE,CAAC;YACb,QAAQ;iBACL,GAAG,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC;iBACnD,GAAG,CAAC,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAC;QAC1D,CAAC;QAED,IAAI,OAAO,EAAE,CAAC;YACZ,QAAQ;iBACL,GAAG,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;iBAC/D,GAAG,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC;QACnE,CAAC;QAED,IAAI,YAAY,EAAE,CAAC;YACjB,QAAQ,CAAC,kBAAkB,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,EAAE,eAAe,CAAC,CAAC;QACvE,CAAC;IACH,CAAC;IAEO,MAAM,CAAC,IAAQ;QACrB,IAAI,IAAI,EAAE,CAAC;YACT,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;QACjD,CAAC;IACH,CAAC;IAEO,KAAK,CAAC,KAAa,EAAE,IAAqB,EAAE,QAAiB;QACnE,IAAI,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;YAC/C,OAAO;QACT,CAAC;QAED,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC;QACpC,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC;QAExC,IACE,OAAO,CAAC,KAAK,CAAC;YACd,CAAC,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ,CAAC,cAAc,KAAK,MAAM,CAAC,EACrD,CAAC;YACD,OAAO;QACT,CAAC;QAID,MAAM,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACpD,MAAM,SAAS,GAAG,QAAQ,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;QAClE,MAAM,IAAI,GAAG,IAAI,CAAC,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,KAAK,GAAG,SAAS,CAAC,CAAC;QAE1D,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;IAC3B,CAAC;IAEO,SAAS;QACf,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC;QAExC,IAAI,OAAO,IAAI,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC;YACvD,IAAI,CAAC,QAAQ,CAAC,YAAa,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;QACxD,CAAC;IACH,CAAC;CACF;AAGD,MAAM,UAAU,wBAAwB,CACtC,IAAqB,EACrB,OAAwC;IAExC,OAAO,IAAI,qBAAqB,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;AAClD,CAAC","sourcesContent":["import type { ReactiveControllerHost } from 'lit';\nimport { firstOf, isEmpty, lastOf } from '../utils/arrays.js';\nimport { isLTR } from '../utils/dom.js';\nimport { wrap } from '../utils/math.js';\nimport { isFunction } from '../utils/types.js';\nimport {\n  addKeybindings,\n  arrowDown,\n  arrowLeft,\n  arrowRight,\n  arrowUp,\n  endKey,\n  homeKey,\n  type KeyBindingControllerOptions,\n  type KeyBindingOptions,\n} from './key-bindings.js';\n\ntype RovingFocusHost = ReactiveControllerHost & HTMLElement;\n\n/**\n * Whether an arrow axis navigates. A predicate keeps the keys bound - and\n * their default behavior suppressed - while gating the navigation itself,\n * for hosts that switch orientation at runtime.\n */\ntype RovingFocusAxis = boolean | (() => boolean);\n\ntype RovingFocusControllerOptions<T extends Element> = {\n  /**\n   * The keyboard-navigable items, in order, with non-interactive ones\n   * already excluded.\n   */\n  items: () => T[];\n  /**\n   * The item navigation moves relative to - typically resolved from the\n   * focused element. Arrow navigation and activation are no-ops while nullish.\n   */\n  current: () => T | null | undefined;\n  /**\n   * Moves focus to `item`. The host owns the focus delegation and any side\n   * effects riding along with it (scrolling, selection-follows-focus).\n   */\n  focusItem: (item: T) => void;\n  /**\n   * Invoked with the current item on Enter/Space, when the item is part of\n   * {@link RovingFocusControllerOptions.items}. Omit to skip the activation\n   * binding altogether.\n   */\n  activateItem?: (item: T) => void;\n  /** Binding options for the activation keys. */\n  activateOptions?: KeyBindingOptions;\n  /**\n   * Whether ArrowLeft/ArrowRight navigate, following the writing direction.\n   * Defaults to `true`.\n   */\n  horizontal?: RovingFocusAxis;\n  /** Whether ArrowUp/ArrowDown navigate. Defaults to `false`. */\n  vertical?: RovingFocusAxis;\n  /** Whether Home/End jump to the first/last item. Defaults to `true`. */\n  homeEnd?: boolean;\n  /**\n   * How arrow navigation treats a nullish current item:\n   * - `skip` - do nothing (default)\n   * - `wrap` - navigate from just outside the list, so \"next\" lands on the\n   *   first item and \"previous\" on the last one\n   */\n  missingCurrent?: 'skip' | 'wrap';\n  /** Options forwarded to the underlying key-bindings controller. */\n  keybindings?: KeyBindingControllerOptions;\n};\n\n/**\n * Implements the roving keyboard navigation shared by the container\n * components: Home/End jumps and wrapping ArrowKey moves over a flat list of\n * enabled items, relative to the currently focused one, with the horizontal\n * axis following the writing direction.\n *\n * The host supplies the item list, the current-item resolution and the focus\n * delegation; hierarchical structures (the tree) need their own navigation.\n */\nclass RovingFocusController<T extends Element> {\n  private readonly _host: RovingFocusHost;\n  private readonly _options: RovingFocusControllerOptions<T>;\n\n  constructor(host: RovingFocusHost, options: RovingFocusControllerOptions<T>) {\n    this._host = host;\n    this._options = options;\n\n    const {\n      horizontal = true,\n      vertical = false,\n      homeEnd = true,\n      activateItem,\n      activateOptions,\n      keybindings,\n    } = options;\n\n    const bindings = addKeybindings(host, keybindings);\n\n    if (horizontal) {\n      bindings\n        .set(arrowLeft, () => this._move(-1, horizontal, true))\n        .set(arrowRight, () => this._move(1, horizontal, true));\n    }\n\n    if (vertical) {\n      bindings\n        .set(arrowUp, () => this._move(-1, vertical, false))\n        .set(arrowDown, () => this._move(1, vertical, false));\n    }\n\n    if (homeEnd) {\n      bindings\n        .set(homeKey, () => this._focus(firstOf(this._options.items())))\n        .set(endKey, () => this._focus(lastOf(this._options.items())));\n    }\n\n    if (activateItem) {\n      bindings.setActivateHandler(() => this._activate(), activateOptions);\n    }\n  }\n\n  private _focus(item?: T): void {\n    if (item) {\n      this._options.focusItem.call(this._host, item);\n    }\n  }\n\n  private _move(delta: -1 | 1, axis: RovingFocusAxis, rtlAware: boolean): void {\n    if (isFunction(axis) && !axis.call(this._host)) {\n      return;\n    }\n\n    const items = this._options.items();\n    const current = this._options.current();\n\n    if (\n      isEmpty(items) ||\n      (!current && this._options.missingCurrent !== 'wrap')\n    ) {\n      return;\n    }\n\n    // A current item outside the set resolves to -1 as well, wrapping the\n    // navigation in from the closest list edge.\n    const index = current ? items.indexOf(current) : -1;\n    const direction = rtlAware && !isLTR(this._host) ? -delta : delta;\n    const next = wrap(0, items.length - 1, index + direction);\n\n    this._focus(items[next]);\n  }\n\n  private _activate(): void {\n    const current = this._options.current();\n\n    if (current && this._options.items().includes(current)) {\n      this._options.activateItem!.call(this._host, current);\n    }\n  }\n}\n\n/** Creates and adds a {@link RovingFocusController} to the given host. */\nexport function addRovingFocusController<T extends Element>(\n  host: RovingFocusHost,\n  options: RovingFocusControllerOptions<T>\n): RovingFocusController<T> {\n  return new RovingFocusController(host, options);\n}\n\nexport type { RovingFocusController, RovingFocusControllerOptions };\n"]}
+{"version":3,"file":"roving-focus.js","sourceRoot":"","sources":["../../../src/internals/controllers/roving-focus.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ReactiveControllerHost } from 'lit';\nimport { firstOf, isEmpty, lastOf } from '../utils/arrays.js';\nimport { isLTR } from '../utils/dom.js';\nimport { wrap } from '../utils/math.js';\nimport { isFunction } from '../utils/types.js';\nimport {\n  addKeybindings,\n  arrowDown,\n  arrowLeft,\n  arrowRight,\n  arrowUp,\n  endKey,\n  homeKey,\n  type KeyBindingControllerOptions,\n  type KeyBindingOptions,\n} from './key-bindings.js';\n\ntype RovingFocusHost = ReactiveControllerHost & HTMLElement;\n\n/**\n * Whether an arrow axis navigates. A predicate keeps the keys bound and\n * gates only the navigation, for a host that changes orientation at runtime.\n */\ntype RovingFocusAxis = boolean | (() => boolean);\n\ntype RovingFocusControllerOptions<T extends Element> = {\n  /** The keyboard-navigable items, in order, without the inert ones. */\n  items: () => T[];\n  /** The item that navigation moves from, as the host resolves it. */\n  current: () => T | null | undefined;\n  /** Moves the focus to `item`. The host owns any side effects. */\n  focusItem: (item: T) => void;\n  /** Runs with the current item on Enter and on Space. */\n  activateItem?: (item: T) => void;\n  /** Binding options for the activation keys. */\n  activateOptions?: KeyBindingOptions;\n  /** Whether ArrowLeft and ArrowRight navigate. Defaults to `true`. */\n  horizontal?: RovingFocusAxis;\n  /** Whether ArrowUp and ArrowDown navigate. Defaults to `false`. */\n  vertical?: RovingFocusAxis;\n  /** Whether Home and End jump to the first and last item. Default `true`. */\n  homeEnd?: boolean;\n  /**\n   * How arrow navigation treats a nullish current item:\n   * - `skip` - do nothing (default)\n   * - `wrap` - navigate from outside the list, so \"next\" lands on the first\n   *   item and \"previous\" on the last one\n   */\n  missingCurrent?: 'skip' | 'wrap';\n  /** Options forwarded to the underlying key-bindings controller. */\n  keybindings?: KeyBindingControllerOptions;\n};\n\n/**\n * Implements the roving keyboard navigation of the container components.\n *\n * @remarks\n * Moves wrap over a flat list, and the horizontal axis follows the writing\n * direction. A hierarchy, such as the tree, needs its own navigation.\n */\nclass RovingFocusController<T extends Element> {\n  private readonly _host: RovingFocusHost;\n  private readonly _options: RovingFocusControllerOptions<T>;\n\n  constructor(host: RovingFocusHost, options: RovingFocusControllerOptions<T>) {\n    this._host = host;\n    this._options = options;\n\n    const {\n      horizontal = true,\n      vertical = false,\n      homeEnd = true,\n      activateItem,\n      activateOptions,\n      keybindings,\n    } = options;\n\n    const bindings = addKeybindings(host, keybindings);\n\n    if (horizontal) {\n      bindings\n        .set(arrowLeft, () => this._move(-1, horizontal, true))\n        .set(arrowRight, () => this._move(1, horizontal, true));\n    }\n\n    if (vertical) {\n      bindings\n        .set(arrowUp, () => this._move(-1, vertical, false))\n        .set(arrowDown, () => this._move(1, vertical, false));\n    }\n\n    if (homeEnd) {\n      bindings\n        .set(homeKey, () => this._focus(firstOf(this._options.items())))\n        .set(endKey, () => this._focus(lastOf(this._options.items())));\n    }\n\n    if (activateItem) {\n      bindings.setActivateHandler(() => this._activate(), activateOptions);\n    }\n  }\n\n  private _focus(item?: T): void {\n    if (item) {\n      this._options.focusItem.call(this._host, item);\n    }\n  }\n\n  private _move(delta: -1 | 1, axis: RovingFocusAxis, rtlAware: boolean): void {\n    if (isFunction(axis) && !axis.call(this._host)) {\n      return;\n    }\n\n    const items = this._options.items();\n    const current = this._options.current();\n\n    if (\n      isEmpty(items) ||\n      (!current && this._options.missingCurrent !== 'wrap')\n    ) {\n      return;\n    }\n\n    // An item outside the set gives -1, so the move wraps in from an edge.\n    const index = current ? items.indexOf(current) : -1;\n    const direction = rtlAware && !isLTR(this._host) ? -delta : delta;\n    const next = wrap(0, items.length - 1, index + direction);\n\n    this._focus(items[next]);\n  }\n\n  private _activate(): void {\n    const current = this._options.current();\n\n    if (current && this._options.items().includes(current)) {\n      this._options.activateItem!.call(this._host, current);\n    }\n  }\n}\n\n/** Creates a {@link RovingFocusController} for the given host. */\nexport function addRovingFocusController<T extends Element>(\n  host: RovingFocusHost,\n  options: RovingFocusControllerOptions<T>\n): RovingFocusController<T> {\n  return new RovingFocusController(host, options);\n}\n\nexport type { RovingFocusController, RovingFocusControllerOptions };\n"]}