igniteui-webcomponents 7.2.4 → 7.3.0-beta.1

package/components/focus-trap/focus-trap.js.map

@@ -1 +1 @@
-{"version":3,"file":"focus-trap.js","sourceRoot":"","sources":["../../../src/components/focus-trap/focus-trap.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\n\nimport { registerComponent } from '../common/definitions/register.js';\nimport { addSafeEventListener, isDefined } from '../common/util.js';\n\n/* blazorSuppress */\n/**\n *\n * @element igc-focus-trap\n *\n * @slot - The content of the focus trap component\n */\nexport default class IgcFocusTrapComponent extends LitElement {\n  public static readonly tagName = 'igc-focus-trap';\n  public static override styles = css`\n    :host {\n      display: contents;\n    }\n  `;\n\n  /* blazorSuppress */\n  public static register() {\n    registerComponent(IgcFocusTrapComponent);\n  }\n\n  @state()\n  protected _focused = false;\n\n  /**\n   * Whether to manage focus state for the slotted children.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  public disabled = false;\n\n  /**\n   * Whether focus in currently inside the trap component.\n   */\n  public get focused() {\n    return this._focused;\n  }\n\n  /** An array of focusable elements including elements in Shadow roots */\n  public get focusableElements() {\n    return Array.from(getFocusableElements<HTMLElement>(this));\n  }\n\n  constructor() {\n    super();\n\n    addSafeEventListener(this, 'focusin', this.onFocusIn);\n    addSafeEventListener(this, 'focusout', this.onFocusOut);\n  }\n\n  private onFocusIn() {\n    this._focused = true;\n  }\n\n  private onFocusOut() {\n    this._focused = false;\n  }\n\n  public focusFirstElement() {\n    this.focusableElements.at(0)?.focus();\n  }\n\n  public focusLastElement() {\n    this.focusableElements.at(-1)?.focus();\n  }\n\n  protected override render() {\n    const tabStop = !this.focused || this.disabled ? -1 : 0;\n\n    return html`\n      <div\n        id=\"start\"\n        tabindex=${tabStop}\n        @focus=${this.disabled ? nothing : this.focusLastElement}\n      ></div>\n      <slot></slot>\n      <div\n        id=\"end\"\n        tabindex=${tabStop}\n        @focus=${this.disabled ? nothing : this.focusFirstElement}\n      ></div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-focus-trap': IgcFocusTrapComponent;\n  }\n}\n\nconst defaultSelectors = [\n  '[tabindex]',\n  'a[href]',\n  'button',\n  'input',\n  'select',\n  'textarea',\n];\n\n/** Returns whether the element is hidden. */\nfunction isHidden(node: HTMLElement) {\n  return (\n    node.hasAttribute('hidden') ||\n    node.hasAttribute('inert') ||\n    (node.hasAttribute('aria-hidden') &&\n      node.getAttribute('aria-hidden') !== 'false')\n  );\n}\n\n/** Returns whether the element is disabled. */\nfunction isDisabled(node: HTMLElement) {\n  return node.hasAttribute('disabled') || node.hasAttribute('inert');\n}\n\nfunction isContentEditable(node: HTMLElement) {\n  return (\n    node.hasAttribute('contenteditable') &&\n    node.getAttribute('contenteditable') !== 'false'\n  );\n}\n\n/**\n * Returns whether the element can be focused.\n */\nfunction isFocusable(node: HTMLElement) {\n  if (isHidden(node) || isDisabled(node)) {\n    return false;\n  }\n\n  if (isContentEditable(node)) {\n    return true;\n  }\n\n  if (node.tabIndex === -1) {\n    return false;\n  }\n\n  return defaultSelectors.some((selector) => node.matches(selector));\n}\n\n/**\n * Filter function for the tree walker instance skipping over nodes and their children\n * if the `node` is hidden/disabled or it was already visited and resides in `cache`.\n */\nfunction shouldSkipElements(node: Node, cache?: WeakSet<HTMLElement>) {\n  const element = node as HTMLElement;\n\n  return isHidden(element) || isDisabled(element) || cache?.has(element)\n    ? NodeFilter.FILTER_REJECT\n    : NodeFilter.FILTER_ACCEPT;\n}\n\n/** Returns the slotted elements and the parent element containing the slot */\nfunction getSlottedElements(node: HTMLElement) {\n  const slot = node as HTMLSlotElement;\n  const elements = slot.assignedElements() as HTMLElement[];\n  return { elements, parent: elements.at(0)?.parentElement };\n}\n\n/**\n * Traverses and yields all focusable elements starting at `root`.\n */\nfunction* getFocusableElements<T extends HTMLElement>(\n  root: HTMLElement | ShadowRoot,\n  cache?: WeakSet<HTMLElement>\n): Generator<T> {\n  if (!isDefined(globalThis.document)) {\n    return;\n  }\n\n  let node: T;\n  const _cache = cache ?? new WeakSet<HTMLElement>();\n\n  const visitor = document.createTreeWalker(\n    root,\n    NodeFilter.SHOW_ELEMENT,\n    (node) => shouldSkipElements(node, _cache)\n  );\n\n  // biome-ignore lint/suspicious/noAssignInExpressions: short-form\n  while ((node = visitor.nextNode() as T)) {\n    if (_cache.has(node)) {\n      continue;\n    }\n\n    if (node.shadowRoot) {\n      yield* getFocusableElements(node.shadowRoot, _cache);\n      continue;\n    }\n\n    if (node.tagName === 'SLOT') {\n      const { elements, parent } = getSlottedElements(node);\n\n      if (elements.length > 0) {\n        for (const element of elements) {\n          yield* getFocusableElements(parent!, _cache);\n          _cache.add(element);\n        }\n      }\n      continue;\n    }\n\n    if (isFocusable(node)) {\n      yield node;\n    }\n  }\n}\n"]}
+{"version":3,"file":"focus-trap.js","sourceRoot":"","sources":["../../../src/components/focus-trap/focus-trap.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\n\nimport { registerComponent } from '#internals/definitions/register.js';\nimport { addSafeEventListener } from '#internals/utils/events.js';\nimport { isDefined } from '#internals/utils/types.js';\n\n/* blazorSuppress */\n/**\n *\n * @element igc-focus-trap\n *\n * @slot - The content of the focus trap component\n */\nexport default class IgcFocusTrapComponent extends LitElement {\n  public static readonly tagName = 'igc-focus-trap';\n  public static override styles = css`\n    :host {\n      display: contents;\n    }\n  `;\n\n  /* blazorSuppress */\n  public static register() {\n    registerComponent(IgcFocusTrapComponent);\n  }\n\n  @state()\n  protected _focused = false;\n\n  /**\n   * Whether to manage focus state for the slotted children.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  public disabled = false;\n\n  /**\n   * Whether focus in currently inside the trap component.\n   */\n  public get focused() {\n    return this._focused;\n  }\n\n  /** An array of focusable elements including elements in Shadow roots */\n  public get focusableElements() {\n    return Array.from(getFocusableElements<HTMLElement>(this));\n  }\n\n  constructor() {\n    super();\n\n    addSafeEventListener(this, 'focusin', this.onFocusIn);\n    addSafeEventListener(this, 'focusout', this.onFocusOut);\n  }\n\n  private onFocusIn() {\n    this._focused = true;\n  }\n\n  private onFocusOut() {\n    this._focused = false;\n  }\n\n  public focusFirstElement() {\n    this.focusableElements.at(0)?.focus();\n  }\n\n  public focusLastElement() {\n    this.focusableElements.at(-1)?.focus();\n  }\n\n  protected override render() {\n    const tabStop = !this.focused || this.disabled ? -1 : 0;\n\n    return html`\n      <div\n        id=\"start\"\n        tabindex=${tabStop}\n        @focus=${this.disabled ? nothing : this.focusLastElement}\n      ></div>\n      <slot></slot>\n      <div\n        id=\"end\"\n        tabindex=${tabStop}\n        @focus=${this.disabled ? nothing : this.focusFirstElement}\n      ></div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-focus-trap': IgcFocusTrapComponent;\n  }\n}\n\nconst defaultSelectors = [\n  '[tabindex]',\n  'a[href]',\n  'button',\n  'input',\n  'select',\n  'textarea',\n];\n\n/** Returns whether the element is hidden. */\nfunction isHidden(node: HTMLElement) {\n  return (\n    node.hasAttribute('hidden') ||\n    node.hasAttribute('inert') ||\n    (node.hasAttribute('aria-hidden') &&\n      node.getAttribute('aria-hidden') !== 'false')\n  );\n}\n\n/** Returns whether the element is disabled. */\nfunction isDisabled(node: HTMLElement) {\n  return node.hasAttribute('disabled') || node.hasAttribute('inert');\n}\n\nfunction isContentEditable(node: HTMLElement) {\n  return (\n    node.hasAttribute('contenteditable') &&\n    node.getAttribute('contenteditable') !== 'false'\n  );\n}\n\n/**\n * Returns whether the element can be focused.\n */\nfunction isFocusable(node: HTMLElement) {\n  if (isHidden(node) || isDisabled(node)) {\n    return false;\n  }\n\n  if (isContentEditable(node)) {\n    return true;\n  }\n\n  if (node.tabIndex === -1) {\n    return false;\n  }\n\n  return defaultSelectors.some((selector) => node.matches(selector));\n}\n\n/**\n * Filter function for the tree walker instance skipping over nodes and their children\n * if the `node` is hidden/disabled or it was already visited and resides in `cache`.\n */\nfunction shouldSkipElements(node: Node, cache?: WeakSet<HTMLElement>) {\n  const element = node as HTMLElement;\n\n  return isHidden(element) || isDisabled(element) || cache?.has(element)\n    ? NodeFilter.FILTER_REJECT\n    : NodeFilter.FILTER_ACCEPT;\n}\n\n/** Returns the slotted elements and the parent element containing the slot */\nfunction getSlottedElements(node: HTMLElement) {\n  const slot = node as HTMLSlotElement;\n  const elements = slot.assignedElements() as HTMLElement[];\n  return { elements, parent: elements.at(0)?.parentElement };\n}\n\n/**\n * Traverses and yields all focusable elements starting at `root`.\n */\nfunction* getFocusableElements<T extends HTMLElement>(\n  root: HTMLElement | ShadowRoot,\n  cache?: WeakSet<HTMLElement>\n): Generator<T> {\n  if (!isDefined(globalThis.document)) {\n    return;\n  }\n\n  let node: T;\n  const _cache = cache ?? new WeakSet<HTMLElement>();\n\n  const visitor = document.createTreeWalker(\n    root,\n    NodeFilter.SHOW_ELEMENT,\n    (node) => shouldSkipElements(node, _cache)\n  );\n\n  while ((node = visitor.nextNode() as T)) {\n    if (_cache.has(node)) {\n      continue;\n    }\n\n    if (node.shadowRoot) {\n      yield* getFocusableElements(node.shadowRoot, _cache);\n      continue;\n    }\n\n    if (node.tagName === 'SLOT') {\n      const { elements, parent } = getSlottedElements(node);\n\n      if (elements.length > 0) {\n        for (const element of elements) {\n          yield* getFocusableElements(parent!, _cache);\n          _cache.add(element);\n        }\n      }\n      continue;\n    }\n\n    if (isFocusable(node)) {\n      yield node;\n    }\n  }\n}\n"]}

package/components/highlight/highlight.d.ts

@@ -18,7 +18,7 @@ import { type HighlightNavigation } from './service.js';
  * @cssproperty --background-active - The background color for the active highlighted text node.
  *
  * @example
- * Basic usage — wrap your text and set the `search-text` attribute:
+ * Basic usage - wrap your text and set the `search-text` attribute:
  * ```html
  * <igc-highlight search-text="world">
  *   <p>Hello, world! The world is a wonderful place.</p>
@@ -29,7 +29,7 @@ import { type HighlightNavigation } from './service.js';
  * Case-sensitive search:
  * ```html
  * <igc-highlight search-text="Hello" case-sensitive>
- *   <p>Hello hello HELLO — only the first one matches.</p>
+ *   <p>Hello hello HELLO - only the first one matches.</p>
  * </igc-highlight>
  * ```
  *
@@ -67,8 +67,8 @@ export default class IgcHighlightComponent extends LitElement {
     static styles: import("lit").CSSResult[];
     static register(): void;
     private readonly _service;
-    private _caseSensitive;
-    private _searchText;
+    /** Shared config for the properties that trigger a new search when changed. */
+    private static readonly _search;
     /**
      * Whether to match the searched text with case sensitivity in mind.
      * When `true`, only exact-case occurrences of `searchText` are highlighted.
@@ -76,8 +76,7 @@ export default class IgcHighlightComponent extends LitElement {
      * @attr case-sensitive
      * @default false
      */
-    set caseSensitive(value: boolean);
-    get caseSensitive(): boolean;
+    caseSensitive: boolean;
     /**
      * The string to search and highlight in the DOM content of the component.
      * Setting this property triggers a new search automatically.
@@ -85,8 +84,7 @@ export default class IgcHighlightComponent extends LitElement {
      *
      * @attr search-text
      */
-    set searchText(value: string);
-    get searchText(): string;
+    searchText: string;
     /** The total number of matches found for the current `searchText`. Returns `0` when there are no matches or `searchText` is empty. */
     get size(): number;
     /** The zero-based index of the currently active (focused) match. Returns `0` when there are no matches. */

package/components/highlight/highlight.js

@@ -6,8 +6,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
-import { addThemingController } from '../../theming/theming-controller.js';
-import { registerComponent } from '../common/definitions/register.js';
+import { coercedProperty, } from '#internals/decorators/coerced-property.js';
+import { registerComponent } from '#internals/definitions/register.js';
+import { addThemingController } from '#theming/theming-controller.js';
 import { createHighlightController, } from './service.js';
 import { styles as shared } from './themes/shared/highlight.common.css.js';
 import { all } from './themes/themes.js';
@@ -17,20 +18,9 @@ export default class IgcHighlightComponent extends LitElement {
     static register() {
         registerComponent(IgcHighlightComponent);
     }
-    set caseSensitive(value) {
-        this._caseSensitive = value;
-        this.search();
-    }
-    get caseSensitive() {
-        return this._caseSensitive;
-    }
-    set searchText(value) {
-        this._searchText = value;
-        this.search();
-    }
-    get searchText() {
-        return this._searchText;
-    }
+    static { this._search = {
+        onChange: ({ host }) => host.search(),
+    }; }
     get size() {
         return this._service.size;
     }
@@ -40,8 +30,8 @@ export default class IgcHighlightComponent extends LitElement {
     constructor() {
         super();
         this._service = createHighlightController(this);
-        this._caseSensitive = false;
-        this._searchText = '';
+        this.caseSensitive = false;
+        this.searchText = '';
         addThemingController(this, all, {
             themeChange: this._addStylesheet,
         });
@@ -69,9 +59,11 @@ export default class IgcHighlightComponent extends LitElement {
     }
 }
 __decorate([
-    property({ type: Boolean, reflect: true, attribute: 'case-sensitive' })
-], IgcHighlightComponent.prototype, "caseSensitive", null);
+    property({ type: Boolean, reflect: true, attribute: 'case-sensitive' }),
+    coercedProperty(IgcHighlightComponent._search)
+], IgcHighlightComponent.prototype, "caseSensitive", void 0);
 __decorate([
-    property({ attribute: 'search-text' })
-], IgcHighlightComponent.prototype, "searchText", null);
+    property({ attribute: 'search-text' }),
+    coercedProperty(IgcHighlightComponent._search)
+], IgcHighlightComponent.prototype, "searchText", void 0);
 //# sourceMappingURL=highlight.js.map

package/components/highlight/highlight.js.map

@@ -1 +1 @@
-{"version":3,"file":"highlight.js","sourceRoot":"","sources":["../../../src/components/highlight/highlight.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EACL,yBAAyB,GAE1B,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,yCAAyC,CAAC;AAC3E,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AAgEzC,MAAM,CAAC,OAAO,OAAO,qBAAsB,SAAQ,UAAU;aACpC,YAAO,GAAG,eAAe,AAAlB,CAAmB;aAC1B,WAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;IAGlC,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,qBAAqB,CAAC,CAAC;IAC3C,CAAC;IAqBD,IAAW,aAAa,CAAC,KAAc;QACrC,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;QAC5B,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAED,IAAW,aAAa;QACtB,OAAO,IAAI,CAAC,cAAc,CAAC;IAC7B,CAAC;IAUD,IAAW,UAAU,CAAC,KAAa;QACjC,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;QACzB,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAED,IAAW,UAAU;QACnB,OAAO,IAAI,CAAC,WAAW,CAAC;IAC1B,CAAC;IAGD,IAAW,IAAI;QACb,OAAO,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;IAC5B,CAAC;IAGD,IAAW,OAAO;QAChB,OAAO,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC;IAC/B,CAAC;IAID;QACE,KAAK,EAAE,CAAC;QAxDO,aAAQ,GAAG,yBAAyB,CAAC,IAAI,CAAC,CAAC;QAEpD,mBAAc,GAAG,KAAK,CAAC;QACvB,gBAAW,GAAG,EAAE,CAAC;QAuDvB,oBAAoB,CAAC,IAAI,EAAE,GAAG,EAAE;YAC9B,WAAW,EAAE,IAAI,CAAC,cAAc;SACjC,CAAC,CAAC;IACL,CAAC;IAIO,cAAc;QACpB,IAAI,CAAC,QAAQ,CAAC,gBAAgB,EAAE,CAAC;IACnC,CAAC;IAYM,IAAI,CAAC,OAA6B;QACvC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAC9B,CAAC;IAQM,QAAQ,CAAC,OAA6B;QAC3C,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;IAClC,CAAC;IAQM,SAAS,CAAC,KAAa,EAAE,OAA6B;QAC3D,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;IAC1C,CAAC;IAQM,MAAM;QACX,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC;YACtB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACtC,CAAC;IACH,CAAC;IAIkB,MAAM;QACvB,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AAvGD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;0DAIvE;AAcD;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;uDAItC","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport {\n  createHighlightController,\n  type HighlightNavigation,\n} from './service.js';\nimport { styles as shared } from './themes/shared/highlight.common.css.js';\nimport { all } from './themes/themes.js';\n\n/**\n * The highlight component provides efficient searching and highlighting of text\n * projected into it via its default slot. It uses the native CSS Custom Highlight API\n * to apply highlight styles to matched text nodes without modifying the DOM.\n *\n * The component supports case-sensitive matching, programmatic navigation between\n * matches, and automatic scroll-into-view of the active match.\n *\n * @element igc-highlight\n *\n * @slot - The default slot. Place the text content you want to search and highlight here.\n *\n * @cssproperty --foreground - The text color for a highlighted text node.\n * @cssproperty --background - The background color for a highlighted text node.\n * @cssproperty --foreground-active - The text color for the active highlighted text node.\n * @cssproperty --background-active - The background color for the active highlighted text node.\n *\n * @example\n * Basic usage — wrap your text and set the `search-text` attribute:\n * ```html\n * <igc-highlight search-text=\"world\">\n *   <p>Hello, world! The world is a wonderful place.</p>\n * </igc-highlight>\n * ```\n *\n * @example\n * Case-sensitive search:\n * ```html\n * <igc-highlight search-text=\"Hello\" case-sensitive>\n *   <p>Hello hello HELLO — only the first one matches.</p>\n * </igc-highlight>\n * ```\n *\n * @example\n * Navigating between matches programmatically:\n * ```typescript\n * const highlight = document.querySelector('igc-highlight');\n *\n * highlight.searchText = 'world';\n * console.log(highlight.size);    // total number of matches\n * console.log(highlight.current); // index of the active match (0-based)\n *\n * highlight.next();               // move to the next match\n * highlight.previous();           // move to the previous match\n * highlight.setActive(2);         // jump to a specific match by index\n * ```\n *\n * @example\n * Prevent scroll-into-view when navigating:\n * ```typescript\n * const highlight = document.querySelector('igc-highlight');\n * highlight.next({ preventScroll: true });\n * ```\n *\n * @example\n * Re-run search after dynamic content changes (e.g. lazy-loaded text):\n * ```typescript\n * const highlight = document.querySelector('igc-highlight');\n * // After slotted content has been updated:\n * highlight.search();\n * ```\n */\nexport default class IgcHighlightComponent extends LitElement {\n  public static readonly tagName = 'igc-highlight';\n  public static override styles = [shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcHighlightComponent);\n  }\n\n  //#region Internal properties and state\n\n  private readonly _service = createHighlightController(this);\n\n  private _caseSensitive = false;\n  private _searchText = '';\n\n  //#endregion\n\n  //#region Public properties and attributes\n\n  /**\n   * Whether to match the searched text with case sensitivity in mind.\n   * When `true`, only exact-case occurrences of `searchText` are highlighted.\n   *\n   * @attr case-sensitive\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'case-sensitive' })\n  public set caseSensitive(value: boolean) {\n    this._caseSensitive = value;\n    this.search();\n  }\n\n  public get caseSensitive(): boolean {\n    return this._caseSensitive;\n  }\n\n  /**\n   * The string to search and highlight in the DOM content of the component.\n   * Setting this property triggers a new search automatically.\n   * An empty string clears all highlights.\n   *\n   * @attr search-text\n   */\n  @property({ attribute: 'search-text' })\n  public set searchText(value: string) {\n    this._searchText = value;\n    this.search();\n  }\n\n  public get searchText(): string {\n    return this._searchText;\n  }\n\n  /** The total number of matches found for the current `searchText`. Returns `0` when there are no matches or `searchText` is empty. */\n  public get size(): number {\n    return this._service.size;\n  }\n\n  /** The zero-based index of the currently active (focused) match. Returns `0` when there are no matches. */\n  public get current(): number {\n    return this._service.current;\n  }\n\n  //#endregion\n\n  constructor() {\n    super();\n\n    addThemingController(this, all, {\n      themeChange: this._addStylesheet,\n    });\n  }\n\n  //#region Internal methods\n\n  private _addStylesheet(): void {\n    this._service.attachStylesheet();\n  }\n\n  //#endregion\n\n  //#region Public methods\n\n  /**\n   * Moves the active highlight to the next match.\n   * Wraps around to the first match after the last one.\n   *\n   * @param options - Optional navigation options (e.g. `preventScroll`).\n   */\n  public next(options?: HighlightNavigation): void {\n    this._service.next(options);\n  }\n\n  /**\n   * Moves the active highlight to the previous match.\n   * Wraps around to the last match when going back from the first one.\n   *\n   * @param options - Optional navigation options (e.g. `preventScroll`).\n   */\n  public previous(options?: HighlightNavigation): void {\n    this._service.previous(options);\n  }\n\n  /**\n   * Moves the active highlight to the match at the specified zero-based index.\n   *\n   * @param index - The zero-based index of the match to activate.\n   * @param options - Optional navigation options (e.g. `preventScroll`).\n   */\n  public setActive(index: number, options?: HighlightNavigation): void {\n    this._service.setActive(index, options);\n  }\n\n  /**\n   * Re-runs the highlight search based on the current `searchText` and `caseSensitive` values.\n   *\n   * Call this method after the slotted content changes dynamically (e.g. after lazy loading\n   * or programmatic DOM mutations) to ensure all matches are up to date.\n   */\n  public search(): void {\n    if (this.hasUpdated) {\n      this._service.clear();\n      this._service.find(this.searchText);\n    }\n  }\n\n  //#endregion\n\n  protected override render() {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-highlight': IgcHighlightComponent;\n  }\n}\n"]}
+{"version":3,"file":"highlight.js","sourceRoot":"","sources":["../../../src/components/highlight/highlight.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EACL,eAAe,GAEhB,MAAM,2CAA2C,CAAC;AACnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AACvE,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AACtE,OAAO,EACL,yBAAyB,GAE1B,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,yCAAyC,CAAC;AAC3E,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AAgEzC,MAAM,CAAC,OAAO,OAAO,qBAAsB,SAAQ,UAAU;aACpC,YAAO,GAAG,eAAe,AAAlB,CAAmB;aAC1B,WAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;IAGlC,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,qBAAqB,CAAC,CAAC;IAC3C,CAAC;aAOuB,YAAO,GAG3B;QACF,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE;KACtC,AAL8B,CAK7B;IA6BF,IAAW,IAAI;QACb,OAAO,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;IAC5B,CAAC;IAGD,IAAW,OAAO;QAChB,OAAO,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC;IAC/B,CAAC;IAID;QACE,KAAK,EAAE,CAAC;QAjDO,aAAQ,GAAG,yBAAyB,CAAC,IAAI,CAAC,CAAC;QAuBrD,kBAAa,GAAG,KAAK,CAAC;QAWtB,eAAU,GAAG,EAAE,CAAC;QAiBrB,oBAAoB,CAAC,IAAI,EAAE,GAAG,EAAE;YAC9B,WAAW,EAAE,IAAI,CAAC,cAAc;SACjC,CAAC,CAAC;IACL,CAAC;IAIO,cAAc;QACpB,IAAI,CAAC,QAAQ,CAAC,gBAAgB,EAAE,CAAC;IACnC,CAAC;IAYM,IAAI,CAAC,OAA6B;QACvC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAC9B,CAAC;IAQM,QAAQ,CAAC,OAA6B;QAC3C,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;IAClC,CAAC;IAQM,SAAS,CAAC,KAAa,EAAE,OAA6B;QAC3D,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;IAC1C,CAAC;IAQM,MAAM;QACX,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC;YACtB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACtC,CAAC;IACH,CAAC;IAIkB,MAAM;QACvB,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AA1FM;IAFN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;IACvE,eAAe,CAAC,qBAAqB,CAAC,OAAO,CAAC;4DAClB;AAWtB;IAFN,QAAQ,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;IACtC,eAAe,CAAC,qBAAqB,CAAC,OAAO,CAAC;yDACxB","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport {\n  coercedProperty,\n  type CoercedPropertyConfig,\n} from '#internals/decorators/coerced-property.js';\nimport { registerComponent } from '#internals/definitions/register.js';\nimport { addThemingController } from '#theming/theming-controller.js';\nimport {\n  createHighlightController,\n  type HighlightNavigation,\n} from './service.js';\nimport { styles as shared } from './themes/shared/highlight.common.css.js';\nimport { all } from './themes/themes.js';\n\n/**\n * The highlight component provides efficient searching and highlighting of text\n * projected into it via its default slot. It uses the native CSS Custom Highlight API\n * to apply highlight styles to matched text nodes without modifying the DOM.\n *\n * The component supports case-sensitive matching, programmatic navigation between\n * matches, and automatic scroll-into-view of the active match.\n *\n * @element igc-highlight\n *\n * @slot - The default slot. Place the text content you want to search and highlight here.\n *\n * @cssproperty --foreground - The text color for a highlighted text node.\n * @cssproperty --background - The background color for a highlighted text node.\n * @cssproperty --foreground-active - The text color for the active highlighted text node.\n * @cssproperty --background-active - The background color for the active highlighted text node.\n *\n * @example\n * Basic usage - wrap your text and set the `search-text` attribute:\n * ```html\n * <igc-highlight search-text=\"world\">\n *   <p>Hello, world! The world is a wonderful place.</p>\n * </igc-highlight>\n * ```\n *\n * @example\n * Case-sensitive search:\n * ```html\n * <igc-highlight search-text=\"Hello\" case-sensitive>\n *   <p>Hello hello HELLO - only the first one matches.</p>\n * </igc-highlight>\n * ```\n *\n * @example\n * Navigating between matches programmatically:\n * ```typescript\n * const highlight = document.querySelector('igc-highlight');\n *\n * highlight.searchText = 'world';\n * console.log(highlight.size);    // total number of matches\n * console.log(highlight.current); // index of the active match (0-based)\n *\n * highlight.next();               // move to the next match\n * highlight.previous();           // move to the previous match\n * highlight.setActive(2);         // jump to a specific match by index\n * ```\n *\n * @example\n * Prevent scroll-into-view when navigating:\n * ```typescript\n * const highlight = document.querySelector('igc-highlight');\n * highlight.next({ preventScroll: true });\n * ```\n *\n * @example\n * Re-run search after dynamic content changes (e.g. lazy-loaded text):\n * ```typescript\n * const highlight = document.querySelector('igc-highlight');\n * // After slotted content has been updated:\n * highlight.search();\n * ```\n */\nexport default class IgcHighlightComponent extends LitElement {\n  public static readonly tagName = 'igc-highlight';\n  public static override styles = [shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcHighlightComponent);\n  }\n\n  //#region Internal properties and state\n\n  private readonly _service = createHighlightController(this);\n\n  /** Shared config for the properties that trigger a new search when changed. */\n  private static readonly _search: CoercedPropertyConfig<\n    unknown,\n    IgcHighlightComponent\n  > = {\n    onChange: ({ host }) => host.search(),\n  };\n\n  //#endregion\n\n  //#region Public properties and attributes\n\n  /**\n   * Whether to match the searched text with case sensitivity in mind.\n   * When `true`, only exact-case occurrences of `searchText` are highlighted.\n   *\n   * @attr case-sensitive\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'case-sensitive' })\n  @coercedProperty(IgcHighlightComponent._search)\n  public caseSensitive = false;\n\n  /**\n   * The string to search and highlight in the DOM content of the component.\n   * Setting this property triggers a new search automatically.\n   * An empty string clears all highlights.\n   *\n   * @attr search-text\n   */\n  @property({ attribute: 'search-text' })\n  @coercedProperty(IgcHighlightComponent._search)\n  public searchText = '';\n\n  /** The total number of matches found for the current `searchText`. Returns `0` when there are no matches or `searchText` is empty. */\n  public get size(): number {\n    return this._service.size;\n  }\n\n  /** The zero-based index of the currently active (focused) match. Returns `0` when there are no matches. */\n  public get current(): number {\n    return this._service.current;\n  }\n\n  //#endregion\n\n  constructor() {\n    super();\n\n    addThemingController(this, all, {\n      themeChange: this._addStylesheet,\n    });\n  }\n\n  //#region Internal methods\n\n  private _addStylesheet(): void {\n    this._service.attachStylesheet();\n  }\n\n  //#endregion\n\n  //#region Public methods\n\n  /**\n   * Moves the active highlight to the next match.\n   * Wraps around to the first match after the last one.\n   *\n   * @param options - Optional navigation options (e.g. `preventScroll`).\n   */\n  public next(options?: HighlightNavigation): void {\n    this._service.next(options);\n  }\n\n  /**\n   * Moves the active highlight to the previous match.\n   * Wraps around to the last match when going back from the first one.\n   *\n   * @param options - Optional navigation options (e.g. `preventScroll`).\n   */\n  public previous(options?: HighlightNavigation): void {\n    this._service.previous(options);\n  }\n\n  /**\n   * Moves the active highlight to the match at the specified zero-based index.\n   *\n   * @param index - The zero-based index of the match to activate.\n   * @param options - Optional navigation options (e.g. `preventScroll`).\n   */\n  public setActive(index: number, options?: HighlightNavigation): void {\n    this._service.setActive(index, options);\n  }\n\n  /**\n   * Re-runs the highlight search based on the current `searchText` and `caseSensitive` values.\n   *\n   * Call this method after the slotted content changes dynamically (e.g. after lazy loading\n   * or programmatic DOM mutations) to ensure all matches are up to date.\n   */\n  public search(): void {\n    if (this.hasUpdated) {\n      this._service.clear();\n      this._service.find(this.searchText);\n    }\n  }\n\n  //#endregion\n\n  protected override render() {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-highlight': IgcHighlightComponent;\n  }\n}\n"]}

package/components/highlight/service.d.ts

@@ -13,6 +13,7 @@ declare class HighlightService implements ReactiveController {
     private readonly _activeId;
     private readonly _styles;
     private readonly _styleSheet?;
+    private _attachedRoot;
     private _highlight;
     private _activeHighlight;
     private _ranges;
@@ -37,8 +38,10 @@ declare class HighlightService implements ReactiveController {
     private _updateActiveHighlight;
     private _goTo;
     /**
-     * Attaches the service's stylesheet to the render root.
+     * Attaches the service's stylesheet to the tree scope of the host's slotted content.
      * Necessary for the component to apply highlight styles to its content.
+     *
+     * Idempotent, and re-targets the stylesheet if the host has moved to another tree scope.
      */
     attachStylesheet(): void;
     /**

package/components/highlight/service.js

@@ -1,5 +1,11 @@
 import { isServer } from 'lit';
-import { escapeRegex, iterNodes, nanoid, scrollIntoView, wrap, } from '../common/util.js';
+import { getRoot, iterNodes, scrollIntoView } from '#internals/utils/dom.js';
+import { wrap } from '#internals/utils/math.js';
+import { escapeRegex, nanoid } from '#internals/utils/strings.js';
+function getStyleRoot(host) {
+    const root = getRoot(host);
+    return 'adoptedStyleSheets' in root ? root : null;
+}
 function* matchText(nodes, regexp) {
     for (const node of nodes) {
         if (node.textContent) {
@@ -18,6 +24,7 @@ class HighlightService {
         return this._current;
     }
     constructor(host) {
+        this._attachedRoot = null;
         this._ranges = [];
         this._current = 0;
         this._host = host;
@@ -40,6 +47,7 @@ class HighlightService {
     }
     hostConnected() {
         this._createHighlightEntries();
+        this.attachStylesheet();
         this.find(this._host.searchText);
     }
     hostDisconnected() {
@@ -47,10 +55,11 @@ class HighlightService {
         this._removeStyleSheet();
     }
     _removeStyleSheet() {
-        const root = this._host.renderRoot;
-        if (this._styleSheet) {
+        const root = this._attachedRoot;
+        if (root && this._styleSheet) {
             root.adoptedStyleSheets = root.adoptedStyleSheets.filter((sheet) => sheet !== this._styleSheet);
         }
+        this._attachedRoot = null;
     }
     _createHighlightEntries() {
         this._highlight = new Highlight();
@@ -90,11 +99,18 @@ class HighlightService {
         }
     }
     attachStylesheet() {
-        const adoptedSheets = this._host.renderRoot
-            .adoptedStyleSheets;
-        if (this._styleSheet && !adoptedSheets.includes(this._styleSheet)) {
-            adoptedSheets.push(this._styleSheet);
+        if (!this._styleSheet) {
+            return;
+        }
+        const root = getStyleRoot(this._host);
+        if (this._attachedRoot !== root) {
+            this._removeStyleSheet();
+        }
+        if (!root || root.adoptedStyleSheets.includes(this._styleSheet)) {
+            return;
         }
+        root.adoptedStyleSheets.push(this._styleSheet);
+        this._attachedRoot = root;
     }
     find(value) {
         if (!value?.trim()) {

package/components/highlight/service.js.map

@@ -1 +1 @@
-{"version":3,"file":"service.js","sourceRoot":"","sources":["../../../src/components/highlight/service.ts"],"names":[],"mappings":"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","sourcesContent":["import { isServer, type ReactiveController } from 'lit';\nimport {\n  escapeRegex,\n  iterNodes,\n  nanoid,\n  scrollIntoView,\n  wrap,\n} from '../common/util.js';\nimport type IgcHighlightComponent from './highlight.js';\n\ntype Match = { node: Node; indices: [start: number, end: number] };\n\n/* jsonAPIPlainObject */\n/* marshalByValue */\n/**\n * Options for controlling navigation behavior when moving the active highlight.\n */\nexport interface HighlightNavigation {\n  /** If true, prevents the component from scrolling the new active match into view. */\n  preventScroll?: boolean;\n}\n\nfunction* matchText(\n  nodes: IterableIterator<Node>,\n  regexp: RegExp\n): Generator<Match> {\n  for (const node of nodes) {\n    if (node.textContent) {\n      for (const match of node.textContent.matchAll(regexp)) {\n        const [start, end] = match.indices![0]!;\n        yield { node, indices: [start, end] } satisfies Match;\n      }\n    }\n  }\n}\n\nclass HighlightService implements ReactiveController {\n  //#region Private properties\n\n  private readonly _host: IgcHighlightComponent;\n  private readonly _id: string;\n  private readonly _activeId: string;\n  private readonly _styles: string;\n  private readonly _styleSheet?: CSSStyleSheet;\n\n  private _highlight!: Highlight;\n  private _activeHighlight!: Highlight;\n  private _ranges: Range[] = [];\n\n  private _current = 0;\n\n  //#endregion\n\n  //#region Public properties\n\n  /**\n   * The total number of matches found in the component's content.\n   */\n  public get size(): number {\n    return this._ranges.length;\n  }\n\n  /**\n   * The index of the currently active match. Returns 0 if there are no matches.\n   */\n  public get current(): number {\n    return this._current;\n  }\n\n  //#endregion\n\n  constructor(host: IgcHighlightComponent) {\n    this._host = host;\n    this._host.addController(this);\n    this._id = `igc-highlight-${nanoid()}`;\n    this._activeId = `${this._id}-active`;\n\n    this._styles = `\n      ::highlight(${this._id}) {\n        background-color: var(--background, var(--ig-secondary-700));\n        color: var(--foreground, var(--ig-secondary-700-contrast));\n      }\n      ::highlight(${this._activeId}) {\n        background-color: var(--background-active, var(--ig-primary-500));\n        color: var(--foreground-active, var(--ig-primary-500-contrast));\n      }`;\n\n    if (!isServer) {\n      this._styleSheet = new CSSStyleSheet();\n      this._styleSheet.replaceSync(this._styles);\n    }\n  }\n\n  //#region Controller life-cycle\n\n  /** @internal */\n  public hostConnected(): void {\n    this._createHighlightEntries();\n    this.find(this._host.searchText);\n  }\n\n  /** @internal */\n  public hostDisconnected(): void {\n    this._removeHighlightEntries();\n    this._removeStyleSheet();\n  }\n\n  //#endregion\n\n  //#region Private methods\n\n  private _removeStyleSheet(): void {\n    const root = this._host.renderRoot as ShadowRoot;\n\n    if (this._styleSheet) {\n      root.adoptedStyleSheets = root.adoptedStyleSheets.filter(\n        (sheet) => sheet !== this._styleSheet\n      );\n    }\n  }\n\n  private _createHighlightEntries(): void {\n    this._highlight = new Highlight();\n    this._highlight.priority = 0;\n\n    this._activeHighlight = new Highlight();\n    this._activeHighlight.priority = 1;\n\n    CSS.highlights.set(this._id, this._highlight);\n    CSS.highlights.set(this._activeId, this._activeHighlight);\n  }\n\n  private _removeHighlightEntries(): void {\n    CSS.highlights.delete(this._id);\n    CSS.highlights.delete(this._activeId);\n    this._ranges.length = 0;\n  }\n\n  private _createRegex(value: string): RegExp {\n    return new RegExp(\n      escapeRegex(value),\n      this._host.caseSensitive ? 'dg' : 'dgi'\n    );\n  }\n\n  private _updateActiveHighlight(): void {\n    if (this.size) {\n      this._activeHighlight.clear();\n      this._activeHighlight.add(this._ranges[this._current]);\n    }\n  }\n\n  private _goTo(index: number, options?: HighlightNavigation): void {\n    if (!this.size) {\n      return;\n    }\n\n    this._current = wrap(0, this.size - 1, index);\n    const range = this._ranges[this._current];\n\n    this._activeHighlight.clear();\n    this._activeHighlight.add(range);\n\n    if (!options?.preventScroll) {\n      scrollIntoView(range.commonAncestorContainer.parentElement, {\n        block: 'center',\n        inline: 'center',\n      });\n    }\n  }\n\n  //#endregion\n\n  //#region Public methods\n\n  /**\n   * Attaches the service's stylesheet to the render root.\n   * Necessary for the component to apply highlight styles to its content.\n   */\n  public attachStylesheet(): void {\n    const adoptedSheets = (this._host.renderRoot as ShadowRoot)\n      .adoptedStyleSheets;\n\n    if (this._styleSheet && !adoptedSheets.includes(this._styleSheet)) {\n      adoptedSheets.push(this._styleSheet);\n    }\n  }\n\n  /**\n   * Finds matches for the given search text in the component's content and creates highlight ranges for them.\n   */\n  public find(value: string): void {\n    if (!value?.trim()) {\n      return;\n    }\n\n    const iterator = matchText(\n      iterNodes(this._host, { show: 'SHOW_TEXT' }),\n      this._createRegex(value)\n    );\n\n    for (const {\n      node,\n      indices: [start, end],\n    } of iterator) {\n      const range = new Range();\n      range.setStart(node, start);\n      range.setEnd(node, end);\n\n      this._ranges.push(range);\n      this._highlight.add(range);\n    }\n\n    this._updateActiveHighlight();\n  }\n\n  /** Moves the active state to the next match. */\n  public next(options?: HighlightNavigation): void {\n    this._goTo(this._current + 1, options);\n  }\n\n  /** Moves the active state to the previous match. */\n  public previous(options?: HighlightNavigation): void {\n    this._goTo(this._current - 1, options);\n  }\n\n  /** Moves the active state to the given index. */\n  public setActive(index: number, options?: HighlightNavigation): void {\n    this._goTo(index, options);\n  }\n\n  /** Clears highlight collections. */\n  public clear(): void {\n    this._activeHighlight.clear();\n    this._highlight.clear();\n    this._ranges.length = 0;\n    this._current = 0;\n  }\n\n  //#endregion\n}\n\nexport function createHighlightController(\n  host: IgcHighlightComponent\n): HighlightService {\n  return new HighlightService(host);\n}\n"]}
+{"version":3,"file":"service.js","sourceRoot":"","sources":["../../../src/components/highlight/service.ts"],"names":[],"mappings":"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","sourcesContent":["import { isServer, type ReactiveController } from 'lit';\nimport { getRoot, iterNodes, scrollIntoView } from '#internals/utils/dom.js';\nimport { wrap } from '#internals/utils/math.js';\nimport { escapeRegex, nanoid } from '#internals/utils/strings.js';\nimport type IgcHighlightComponent from './highlight.js';\n\ntype Match = { node: Node; indices: [start: number, end: number] };\n\n/**\n * Resolves the tree scope that must own the `::highlight()` rules.\n *\n * Highlight pseudo-element rules are tree-scoped - they only style text nodes living in the\n * same tree scope as the stylesheet. Since the component highlights slotted content, the\n * relevant scope is the host's root node (the document or an outer shadow root), *not* the\n * component's own render root. Firefox enforces this, Chromium currently does not.\n *\n * Returns `null` while the host is detached or inside a non-styleable fragment.\n */\nfunction getStyleRoot(\n  host: IgcHighlightComponent\n): (DocumentOrShadowRoot & Node) | null {\n  const root = getRoot(host);\n  return 'adoptedStyleSheets' in root ? root : null;\n}\n\n/* jsonAPIPlainObject */\n/* marshalByValue */\n/**\n * Options for controlling navigation behavior when moving the active highlight.\n */\nexport interface HighlightNavigation {\n  /** If true, prevents the component from scrolling the new active match into view. */\n  preventScroll?: boolean;\n}\n\nfunction* matchText(\n  nodes: IterableIterator<Node>,\n  regexp: RegExp\n): Generator<Match> {\n  for (const node of nodes) {\n    if (node.textContent) {\n      for (const match of node.textContent.matchAll(regexp)) {\n        const [start, end] = match.indices![0]!;\n        yield { node, indices: [start, end] } satisfies Match;\n      }\n    }\n  }\n}\n\nclass HighlightService implements ReactiveController {\n  //#region Private properties\n\n  private readonly _host: IgcHighlightComponent;\n  private readonly _id: string;\n  private readonly _activeId: string;\n  private readonly _styles: string;\n  private readonly _styleSheet?: CSSStyleSheet;\n\n  private _attachedRoot: (DocumentOrShadowRoot & Node) | null = null;\n\n  private _highlight!: Highlight;\n  private _activeHighlight!: Highlight;\n  private _ranges: Range[] = [];\n\n  private _current = 0;\n\n  //#endregion\n\n  //#region Public properties\n\n  /**\n   * The total number of matches found in the component's content.\n   */\n  public get size(): number {\n    return this._ranges.length;\n  }\n\n  /**\n   * The index of the currently active match. Returns 0 if there are no matches.\n   */\n  public get current(): number {\n    return this._current;\n  }\n\n  //#endregion\n\n  constructor(host: IgcHighlightComponent) {\n    this._host = host;\n    this._host.addController(this);\n    this._id = `igc-highlight-${nanoid()}`;\n    this._activeId = `${this._id}-active`;\n\n    this._styles = `\n      ::highlight(${this._id}) {\n        background-color: var(--background, var(--ig-secondary-700));\n        color: var(--foreground, var(--ig-secondary-700-contrast));\n      }\n      ::highlight(${this._activeId}) {\n        background-color: var(--background-active, var(--ig-primary-500));\n        color: var(--foreground-active, var(--ig-primary-500-contrast));\n      }`;\n\n    if (!isServer) {\n      this._styleSheet = new CSSStyleSheet();\n      this._styleSheet.replaceSync(this._styles);\n    }\n  }\n\n  //#region Controller life-cycle\n\n  /** @internal */\n  public hostConnected(): void {\n    this._createHighlightEntries();\n    this.attachStylesheet();\n    this.find(this._host.searchText);\n  }\n\n  /** @internal */\n  public hostDisconnected(): void {\n    this._removeHighlightEntries();\n    this._removeStyleSheet();\n  }\n\n  //#endregion\n\n  //#region Private methods\n\n  private _removeStyleSheet(): void {\n    const root = this._attachedRoot;\n\n    if (root && this._styleSheet) {\n      root.adoptedStyleSheets = root.adoptedStyleSheets.filter(\n        (sheet) => sheet !== this._styleSheet\n      );\n    }\n\n    this._attachedRoot = null;\n  }\n\n  private _createHighlightEntries(): void {\n    this._highlight = new Highlight();\n    this._highlight.priority = 0;\n\n    this._activeHighlight = new Highlight();\n    this._activeHighlight.priority = 1;\n\n    CSS.highlights.set(this._id, this._highlight);\n    CSS.highlights.set(this._activeId, this._activeHighlight);\n  }\n\n  private _removeHighlightEntries(): void {\n    CSS.highlights.delete(this._id);\n    CSS.highlights.delete(this._activeId);\n    this._ranges.length = 0;\n  }\n\n  private _createRegex(value: string): RegExp {\n    return new RegExp(\n      escapeRegex(value),\n      this._host.caseSensitive ? 'dg' : 'dgi'\n    );\n  }\n\n  private _updateActiveHighlight(): void {\n    if (this.size) {\n      this._activeHighlight.clear();\n      this._activeHighlight.add(this._ranges[this._current]);\n    }\n  }\n\n  private _goTo(index: number, options?: HighlightNavigation): void {\n    if (!this.size) {\n      return;\n    }\n\n    this._current = wrap(0, this.size - 1, index);\n    const range = this._ranges[this._current];\n\n    this._activeHighlight.clear();\n    this._activeHighlight.add(range);\n\n    if (!options?.preventScroll) {\n      scrollIntoView(range.commonAncestorContainer.parentElement, {\n        block: 'center',\n        inline: 'center',\n      });\n    }\n  }\n\n  //#endregion\n\n  //#region Public methods\n\n  /**\n   * Attaches the service's stylesheet to the tree scope of the host's slotted content.\n   * Necessary for the component to apply highlight styles to its content.\n   *\n   * Idempotent, and re-targets the stylesheet if the host has moved to another tree scope.\n   */\n  public attachStylesheet(): void {\n    if (!this._styleSheet) {\n      return;\n    }\n\n    const root = getStyleRoot(this._host);\n\n    if (this._attachedRoot !== root) {\n      this._removeStyleSheet();\n    }\n\n    if (!root || root.adoptedStyleSheets.includes(this._styleSheet)) {\n      return;\n    }\n\n    root.adoptedStyleSheets.push(this._styleSheet);\n    this._attachedRoot = root;\n  }\n\n  /**\n   * Finds matches for the given search text in the component's content and creates highlight ranges for them.\n   */\n  public find(value: string): void {\n    if (!value?.trim()) {\n      return;\n    }\n\n    const iterator = matchText(\n      iterNodes(this._host, { show: 'SHOW_TEXT' }),\n      this._createRegex(value)\n    );\n\n    for (const {\n      node,\n      indices: [start, end],\n    } of iterator) {\n      const range = new Range();\n      range.setStart(node, start);\n      range.setEnd(node, end);\n\n      this._ranges.push(range);\n      this._highlight.add(range);\n    }\n\n    this._updateActiveHighlight();\n  }\n\n  /** Moves the active state to the next match. */\n  public next(options?: HighlightNavigation): void {\n    this._goTo(this._current + 1, options);\n  }\n\n  /** Moves the active state to the previous match. */\n  public previous(options?: HighlightNavigation): void {\n    this._goTo(this._current - 1, options);\n  }\n\n  /** Moves the active state to the given index. */\n  public setActive(index: number, options?: HighlightNavigation): void {\n    this._goTo(index, options);\n  }\n\n  /** Clears highlight collections. */\n  public clear(): void {\n    this._activeHighlight.clear();\n    this._highlight.clear();\n    this._ranges.length = 0;\n    this._current = 0;\n  }\n\n  //#endregion\n}\n\nexport function createHighlightController(\n  host: IgcHighlightComponent\n): HighlightService {\n  return new HighlightService(host);\n}\n"]}

package/components/highlight/themes/themes.d.ts

@@ -1,2 +1,2 @@
-import type { Themes } from '../../../theming/types.js';
+import type { Themes } from '#theming/types.js';
 export declare const all: Themes;

package/components/highlight/themes/themes.js.map

@@ -1 +1 @@
-{"version":3,"file":"themes.js","sourceRoot":"","sources":["../../../../src/components/highlight/themes/themes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAK1B,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAC5E,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,gCAAgC,CAAC;AACtE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,gCAAgC,CAAC;AACtE,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAC1E,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAEtE,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,oCAAoC,CAAC;AAC9E,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,iCAAiC,CAAC;AACxE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,iCAAiC,CAAC;AACxE,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAC5E,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAExE,MAAM,KAAK,GAAG;IACZ,MAAM,EAAE,GAAG,CAAA;MACP,WAAW;GACd;IACD,SAAS,EAAE,GAAG,CAAA;MACV,cAAc;GACjB;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,aAAa;GAChB;IACD,MAAM,EAAE,GAAG,CAAA;MACP,WAAW;GACd;IACD,MAAM,EAAE,GAAG,CAAA;MACP,WAAW;GACd;CACF,CAAC;AAEF,MAAM,IAAI,GAAG;IACX,MAAM,EAAE,GAAG,CAAA;MACP,UAAU;GACb;IACD,SAAS,EAAE,GAAG,CAAA;MACV,aAAa;GAChB;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,YAAY;GACf;IACD,MAAM,EAAE,GAAG,CAAA;MACP,UAAU;GACb;IACD,MAAM,EAAE,GAAG,CAAA;MACP,UAAU;GACb;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAW,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC","sourcesContent":["import { css } from 'lit';\n\nimport type { Themes } from '../../../theming/types.js';\n\n// Dark Overrides\nimport { styles as bootstrapDark } from './dark/highlight.bootstrap.css.js';\nimport { styles as fluentDark } from './dark/highlight.fluent.css.js';\nimport { styles as indigoDark } from './dark/highlight.indigo.css.js';\nimport { styles as materialDark } from './dark/highlight.material.css.js';\nimport { styles as sharedDark } from './dark/highlight.shared.css.js';\n// Light Overrides\nimport { styles as bootstrapLight } from './light/highlight.bootstrap.css.js';\nimport { styles as fluentLight } from './light/highlight.fluent.css.js';\nimport { styles as indigoLight } from './light/highlight.indigo.css.js';\nimport { styles as materialLight } from './light/highlight.material.css.js';\nimport { styles as sharedLight } from './light/highlight.shared.css.js';\n\nconst light = {\n  shared: css`\n    ${sharedLight}\n  `,\n  bootstrap: css`\n    ${bootstrapLight}\n  `,\n  material: css`\n    ${materialLight}\n  `,\n  indigo: css`\n    ${indigoLight}\n  `,\n  fluent: css`\n    ${fluentLight}\n  `,\n};\n\nconst dark = {\n  shared: css`\n    ${sharedDark}\n  `,\n  bootstrap: css`\n    ${bootstrapDark}\n  `,\n  material: css`\n    ${materialDark}\n  `,\n  indigo: css`\n    ${indigoDark}\n  `,\n  fluent: css`\n    ${fluentDark}\n  `,\n};\n\nexport const all: Themes = { light, dark };\n"]}
+{"version":3,"file":"themes.js","sourceRoot":"","sources":["../../../../src/components/highlight/themes/themes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAK1B,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAC5E,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,gCAAgC,CAAC;AACtE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,gCAAgC,CAAC;AACtE,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAC1E,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAEtE,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,oCAAoC,CAAC;AAC9E,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,iCAAiC,CAAC;AACxE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,iCAAiC,CAAC;AACxE,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAC5E,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAExE,MAAM,KAAK,GAAG;IACZ,MAAM,EAAE,GAAG,CAAA;MACP,WAAW;GACd;IACD,SAAS,EAAE,GAAG,CAAA;MACV,cAAc;GACjB;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,aAAa;GAChB;IACD,MAAM,EAAE,GAAG,CAAA;MACP,WAAW;GACd;IACD,MAAM,EAAE,GAAG,CAAA;MACP,WAAW;GACd;CACF,CAAC;AAEF,MAAM,IAAI,GAAG;IACX,MAAM,EAAE,GAAG,CAAA;MACP,UAAU;GACb;IACD,SAAS,EAAE,GAAG,CAAA;MACV,aAAa;GAChB;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,YAAY;GACf;IACD,MAAM,EAAE,GAAG,CAAA;MACP,UAAU;GACb;IACD,MAAM,EAAE,GAAG,CAAA;MACP,UAAU;GACb;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAW,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC","sourcesContent":["import { css } from 'lit';\n\nimport type { Themes } from '#theming/types.js';\n\n// Dark Overrides\nimport { styles as bootstrapDark } from './dark/highlight.bootstrap.css.js';\nimport { styles as fluentDark } from './dark/highlight.fluent.css.js';\nimport { styles as indigoDark } from './dark/highlight.indigo.css.js';\nimport { styles as materialDark } from './dark/highlight.material.css.js';\nimport { styles as sharedDark } from './dark/highlight.shared.css.js';\n// Light Overrides\nimport { styles as bootstrapLight } from './light/highlight.bootstrap.css.js';\nimport { styles as fluentLight } from './light/highlight.fluent.css.js';\nimport { styles as indigoLight } from './light/highlight.indigo.css.js';\nimport { styles as materialLight } from './light/highlight.material.css.js';\nimport { styles as sharedLight } from './light/highlight.shared.css.js';\n\nconst light = {\n  shared: css`\n    ${sharedLight}\n  `,\n  bootstrap: css`\n    ${bootstrapLight}\n  `,\n  material: css`\n    ${materialLight}\n  `,\n  indigo: css`\n    ${indigoLight}\n  `,\n  fluent: css`\n    ${fluentLight}\n  `,\n};\n\nconst dark = {\n  shared: css`\n    ${sharedDark}\n  `,\n  bootstrap: css`\n    ${bootstrapDark}\n  `,\n  material: css`\n    ${materialDark}\n  `,\n  indigo: css`\n    ${indigoDark}\n  `,\n  fluent: css`\n    ${fluentDark}\n  `,\n};\n\nexport const all: Themes = { light, dark };\n"]}

package/components/icon/icon-references.d.ts

@@ -24,5 +24,6 @@
  * To get acquainted with which component uses what icon, please make sure to read the
  * [docs](https://infragistics.com/products/ignite-ui-angular/Angular/components/icon-service#internal-usage).
  */
-import type { IconReference } from './registry/types.js';
-export declare const ICON_REFERENCES: IconReference[];
+import type { IconMeta, IconThemeKey } from './registry/types.js';
+/** Resolved alias name -> theme -> target icon. */
+export declare const ICON_REFERENCES: ReadonlyMap<string, ReadonlyMap<IconThemeKey, IconMeta>>;