@coveo/atomic 3.38.0 → 3.39.1

package/dist/atomic/components/atomic-suggestion-renderer2.js.map

@@ -1 +1 @@
-{"file":"atomic-suggestion-renderer2.js","mappings":"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","names":[],"sources":["src/utils/device-utils.ts","src/components/common/atomic-suggestion-renderer/atomic-suggestion-renderer.tsx"],"sourcesContent":["export function isIOS() {\n  // Source: https://stackoverflow.com/a/62094756\n  const iosQuirkPresent = () => {\n    const audio = new Audio();\n\n    audio.volume = 0.5;\n    return audio.volume === 1; // volume cannot be changed from \"1\" on iOS 12 and below\n  };\n\n  const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);\n  const isAppleDevice = navigator.userAgent.includes('Macintosh');\n  const isTouchScreen = navigator.maxTouchPoints >= 1; // true for iOS 13 (and hopefully beyond)\n\n  return isIOS || (isAppleDevice && (isTouchScreen || iosQuirkPresent()));\n}\n\nexport function isMacOS() {\n  // Source: https://developer.mozilla.org/en-US/docs/Web/API/Navigator/platform#examples\n  return navigator.platform.startsWith('Mac');\n}\n\nexport function hasKeyboard() {\n  return window.matchMedia('(any-hover: hover)').matches;\n}\n","import {isMacOS} from '@/src/utils/device-utils';\nimport {Component, Fragment, Host, Prop, VNode, h} from '@stencil/core';\nimport {i18n} from 'i18next';\nimport {SearchBoxSuggestionElement} from '../suggestions/suggestions-types';\n\n/**\n * The `atomic-suggestion-renderer` component is used to render individual suggestions. It was created to isolate\n * the rendering logic of the 'content' property of the `SearchBoxSuggestionElement` interface. This property can be Stencil\n * VNode or native Element so there must be a Stencil component to render it. For Lit components using this component, they will\n * use native Elements.\n *\n * @internal\n */\n@Component({\n  tag: 'atomic-suggestion-renderer',\n  shadow: false,\n})\nexport class AtomicSuggestionRenderer {\n  @Prop() public i18n!: i18n;\n  @Prop() public id!: string;\n  @Prop() public suggestion!: SearchBoxSuggestionElement;\n  @Prop() public isSelected!: boolean;\n  @Prop() public side!: 'left' | 'right';\n  @Prop() public index!: number;\n  @Prop() public lastIndex!: number;\n  @Prop() public isDoubleList!: boolean;\n  @Prop() public onClick?: (e: Event) => void;\n  @Prop() public onMouseOver?: (e: Event) => void;\n\n  private get parts() {\n    let part = 'suggestion';\n    if (this.isSelected) {\n      part += ' active-suggestion';\n    }\n    if (this.suggestion.query) {\n      part += ' suggestion-with-query';\n    }\n    if (this.suggestion.part) {\n      part += ` ${this.suggestion.part}`;\n    }\n    return part;\n  }\n\n  private get classes() {\n    return `flex px-4 min-h-10 items-center text-left text-neutral-dark cursor-pointer ${\n      this.isSelected ? 'bg-neutral-light' : ''\n    }`;\n  }\n\n  private get content() {\n    return this.isHTMLElement(this.suggestion.content) ? (\n      <Fragment></Fragment>\n    ) : (\n      this.suggestion.content\n    );\n  }\n\n  private ariaLabel(isButton: boolean) {\n    const contentLabel =\n      this.suggestion.ariaLabel ??\n      this.suggestion.query ??\n      this.i18n.t('no-title');\n\n    const labelWithType =\n      isMacOS() && isButton\n        ? this.i18n.t('search-suggestion-button', {\n            label: contentLabel,\n            interpolation: {escapeValue: false},\n          })\n        : contentLabel;\n\n    const position = this.index + 1;\n    const count = this.lastIndex + 1;\n\n    if (!this.isDoubleList) {\n      return this.i18n.t('search-suggestion-single-list', {\n        label: labelWithType,\n        position,\n        count,\n        interpolation: {escapeValue: false},\n      });\n    }\n\n    return this.i18n.t('search-suggestion-double-list', {\n      label: labelWithType,\n      position,\n      count,\n      side: this.i18n.t(this.side === 'left' ? 'left' : 'right'),\n      interpolation: {escapeValue: false},\n    });\n  }\n\n  private ensureContentForRenderedSuggestion(element: HTMLElement) {\n    if (this.isHTMLElement(this.suggestion.content)) {\n      element.replaceChildren(this.suggestion.content);\n    }\n  }\n\n  private isHTMLElement(el: VNode | Element): el is HTMLElement {\n    return el instanceof HTMLElement;\n  }\n\n  render() {\n    const isButton = !!(this.suggestion.onSelect || this.suggestion.query);\n\n    return (\n      <Host class=\"contents\">\n        {isButton ? (\n          <button\n            id={this.id}\n            key={this.suggestion.key}\n            part={this.parts}\n            class={this.classes}\n            onMouseDown={(e) => e.preventDefault()}\n            onClick={(e: Event) => this.onClick?.(e)}\n            onMouseOver={(e: Event) => this.onMouseOver?.(e)}\n            data-query={this.suggestion.query}\n            aria-label={this.ariaLabel(isButton)}\n            ref={(el) => {\n              if (!el) {\n                return;\n              }\n              this.ensureContentForRenderedSuggestion(el);\n            }}\n          >\n            {this.content}\n          </button>\n        ) : (\n          <span\n            id={this.id}\n            key={this.suggestion.key}\n            part={this.parts}\n            class={this.classes}\n            aria-label={this.ariaLabel(isButton)}\n            ref={(el) => {\n              if (!el) {\n                return;\n              }\n              this.ensureContentForRenderedSuggestion(el);\n            }}\n          >\n            {this.content}\n          </span>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"atomic-suggestion-renderer2.js","mappings":"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","names":[],"sources":["src/utils/device-utils.ts","src/components/common/atomic-suggestion-renderer/atomic-suggestion-renderer.tsx"],"sourcesContent":["export function isIOS() {\n  // Source: https://stackoverflow.com/a/62094756\n  const iosQuirkPresent = () => {\n    const audio = new Audio();\n\n    audio.volume = 0.5;\n    return audio.volume === 1; // volume cannot be changed from \"1\" on iOS 12 and below\n  };\n\n  const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);\n  const isAppleDevice = navigator.userAgent.includes('Macintosh');\n  const isTouchScreen = navigator.maxTouchPoints >= 1; // true for iOS 13 (and hopefully beyond)\n\n  return isIOS || (isAppleDevice && (isTouchScreen || iosQuirkPresent()));\n}\n\nexport function isMacOS() {\n  // Source: https://developer.mozilla.org/en-US/docs/Web/API/Navigator/platform#examples\n  return navigator.platform.startsWith('Mac');\n}\n\nexport function hasKeyboard() {\n  return window.matchMedia('(any-hover: hover)').matches;\n}\n","import {isMacOS} from '@/src/utils/device-utils';\nimport {Component, Fragment, Host, Prop, VNode, h} from '@stencil/core';\nimport {i18n} from 'i18next';\nimport {SearchBoxSuggestionElement} from '../suggestions/suggestions-types';\n\n/**\n * The `atomic-suggestion-renderer` component is used to render individual suggestions. It was created to isolate\n * the rendering logic of the 'content' property of the `SearchBoxSuggestionElement` interface. This property can be Stencil\n * VNode or native Element so there must be a Stencil component to render it. For Lit components using this component, they will\n * use native Elements.\n *\n * @internal\n */\n@Component({\n  tag: 'atomic-suggestion-renderer',\n  shadow: false,\n})\nexport class AtomicSuggestionRenderer {\n  @Prop() public i18n!: i18n;\n  @Prop() public id!: string;\n  @Prop() public suggestion!: SearchBoxSuggestionElement;\n  @Prop() public isSelected!: boolean;\n  @Prop() public side!: 'left' | 'right';\n  @Prop() public index!: number;\n  @Prop() public lastIndex!: number;\n  @Prop() public isDoubleList!: boolean;\n  @Prop() public onClick?: (e: Event) => void;\n  @Prop() public onMouseOver?: (e: Event) => void;\n\n  private get parts() {\n    let part = 'suggestion';\n    if (this.isSelected) {\n      part += ' active-suggestion';\n    }\n    if (this.suggestion.query) {\n      part += ' suggestion-with-query';\n    }\n    if (this.suggestion.part) {\n      part += ` ${this.suggestion.part}`;\n    }\n    return part;\n  }\n\n  private get classes() {\n    return `flex px-4 min-h-10 items-center text-left text-neutral-dark cursor-pointer ${\n      this.isSelected ? 'bg-neutral-light' : ''\n    }`;\n  }\n\n  private get content() {\n    return this.isHTMLElement(this.suggestion.content) ? (\n      <Fragment></Fragment>\n    ) : (\n      this.suggestion.content\n    );\n  }\n\n  private ariaLabel(isButton: boolean) {\n    const contentLabel =\n      this.suggestion.ariaLabel ??\n      this.suggestion.query ??\n      this.i18n.t('no-title');\n\n    const labelWithType =\n      isMacOS() && isButton\n        ? this.i18n.t('search-suggestion-button', {\n            label: contentLabel,\n            interpolation: {escapeValue: false},\n          })\n        : contentLabel;\n\n    const position = this.index + 1;\n    const count = this.lastIndex + 1;\n\n    if (!this.isDoubleList) {\n      return this.i18n.t('search-suggestion-single-list', {\n        label: labelWithType,\n        position,\n        count,\n        interpolation: {escapeValue: false},\n      });\n    }\n\n    return this.i18n.t('search-suggestion-double-list', {\n      label: labelWithType,\n      position,\n      count,\n      side: this.i18n.t(this.side === 'left' ? 'left' : 'right'),\n      interpolation: {escapeValue: false},\n    });\n  }\n\n  private ensureContentForRenderedSuggestion(element: HTMLElement) {\n    if (this.isHTMLElement(this.suggestion.content)) {\n      element.replaceChildren(this.suggestion.content);\n    }\n  }\n\n  private isHTMLElement(el: VNode | Element): el is HTMLElement {\n    return el instanceof HTMLElement;\n  }\n\n  render() {\n    const isButton = !!(this.suggestion.onSelect || this.suggestion.query);\n\n    return (\n      <Host class=\"contents\">\n        {isButton ? (\n          <div\n            id={this.id}\n            key={this.suggestion.key}\n            part={this.parts}\n            class={this.classes}\n            onMouseDown={(e) => e.preventDefault()}\n            onClick={(e: Event) => this.onClick?.(e)}\n            onMouseOver={(e: Event) => this.onMouseOver?.(e)}\n            data-query={this.suggestion.query}\n            aria-label={this.ariaLabel(isButton)}\n            ref={(el) => {\n              if (!el) {\n                return;\n              }\n              this.ensureContentForRenderedSuggestion(el);\n            }}\n          >\n            {this.content}\n          </div>\n        ) : (\n          <span\n            id={this.id}\n            key={this.suggestion.key}\n            part={this.parts}\n            class={this.classes}\n            aria-label={this.ariaLabel(isButton)}\n            ref={(el) => {\n              if (!el) {\n                return;\n              }\n              this.ensureContentForRenderedSuggestion(el);\n            }}\n          >\n            {this.content}\n          </span>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/atomic/components/components/commerce/atomic-commerce-interface/atomic-commerce-interface.js

@@ -19,6 +19,7 @@ import { errorGuard } from "../../../decorators/error-guard";
 import { watch } from "../../../decorators/watch";
 import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js";
 import { ChildrenUpdateCompleteMixin } from "../../../mixins/children-update-complete-mixin";
+import { waitForAtomicChildrenToBeDefined } from "../../../utils/custom-element-tags";
 import { markParentAsReady } from "../../../utils/init-queue";
 import { SafeStorage, StorageItems, } from "../../../utils/local-storage-utils";
 import { getAnalyticsConfig } from './analytics-config';
@@ -298,6 +299,7 @@ let AtomicCommerceInterface = class AtomicCommerceInterface extends ChildrenUpda
         this.initRequestStatus();
         this.initSummary();
         this.initLanguage();
+        await waitForAtomicChildrenToBeDefined(this);
         await this.getUpdateComplete();
         this.initUrlManager();
         this.initialized = true;

package/dist/atomic/components/components/commerce/atomic-commerce-pager/atomic-commerce-pager.js

@@ -4,13 +4,17 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var AtomicCommercePager_1;
 import { NumberValue, Schema } from '@coveo/bueno';
 import { buildProductListing, buildSearch, } from '@coveo/headless/commerce';
 import { html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { keyed } from 'lit/directives/keyed.js';
 import { when } from 'lit/directives/when.js';
+import { createAppLoadedListener } from "../../common/interface/store";
+import { renderPageButtons, renderPagerNextButton, renderPagerPageButton, renderPagerPreviousButton, } from "../../common/pager/pager-buttons";
+import { renderPagerNavigation } from "../../common/pager/pager-navigation";
+import { getCurrentPagesRange } from "../../common/pager/pager-utils";
+import { ValidatePropsController } from "../../common/validate-props-controller/validate-props-controller";
 import { bindStateToController } from "../../../decorators/bind-state";
 import { bindingGuard } from "../../../decorators/binding-guard";
 import { bindings } from "../../../decorators/bindings";
@@ -20,10 +24,6 @@ import { AriaLiveRegionController, FocusTargetController, } from "../../../utils
 import { randomID } from "../../../utils/utils";
 const ArrowLeftIcon = "<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m11.5 4.8-4.3 4.5c-.3.4-.3.9 0 1.3l4.3 4.6c.3.4.9.4 1.2 0s.3-.9 0-1.3l-3.7-4 3.7-3.9c.3-.4.3-.9 0-1.3-.3-.3-.9-.3-1.2.1z\"/></svg>";
 const ArrowRightIcon = "<svg viewBox=\"0 0 20 20\"><path d=\"m8.5 15.2 4.3-4.6c.3-.4.3-.9 0-1.3l-4.4-4.5c-.3-.4-.9-.4-1.2 0s-.3.9 0 1.3l3.7 4-3.7 3.9c-.3.4-.3.9 0 1.3.4.3 1 .3 1.3-.1z\"/></svg>";
-import { createAppLoadedListener } from '../../common/interface/store';
-import { renderPageButtons, renderPagerNextButton, renderPagerPageButton, renderPagerPreviousButton, } from '../../common/pager/pager-buttons';
-import { renderPagerNavigation } from '../../common/pager/pager-navigation';
-import { getCurrentPagesRange } from './commerce-pager-utils';
 /**
  * The `atomic-commerce-pager` component enables users to navigate through paginated products.
  *
@@ -38,10 +38,9 @@ import { getCurrentPagesRange } from './commerce-pager-utils';
  *
  * @event atomic/scrollToTop - Emitted when the user clicks the next or previous button, or a page button.
  */
-let AtomicCommercePager = AtomicCommercePager_1 = class AtomicCommercePager extends LitElement {
+let AtomicCommercePager = class AtomicCommercePager extends LitElement {
     constructor() {
-        super(...arguments);
-        this.radioGroupName = randomID('atomic-commerce-pager-');
+        super();
         this.isAppLoaded = false;
         /**
          * The maximum number of page buttons to display.
@@ -64,6 +63,7 @@ let AtomicCommercePager = AtomicCommercePager_1 = class AtomicCommercePager exte
          */
         this.nextButtonIcon = ArrowRightIcon;
         this.ariaMessage = new AriaLiveRegionController(this, 'atomic-pager');
+        this.radioGroupName = randomID('atomic-commerce-pager-');
         this.handleFocus = async (elements, currentFocus, newFocus) => {
             const currentIndex = elements.indexOf(currentFocus);
             const newIndex = elements.indexOf(newFocus);
@@ -77,9 +77,13 @@ let AtomicCommercePager = AtomicCommercePager_1 = class AtomicCommercePager exte
                 newFocus.focus();
             }
         };
+        new ValidatePropsController(this, () => ({
+            numberOfPages: this.numberOfPages,
+        }), new Schema({
+            numberOfPages: new NumberValue({ min: 0 }),
+        }));
     }
     initialize() {
-        this.validateProps();
         this.initFocusTargets();
         if (this.bindings.interfaceElement.type === 'product-listing') {
             this.listingOrSearch = buildProductListing(this.bindings.engine);
@@ -92,11 +96,6 @@ let AtomicCommercePager = AtomicCommercePager_1 = class AtomicCommercePager exte
             this.isAppLoaded = isAppLoaded;
         });
     }
-    willUpdate(changedProperties) {
-        if (changedProperties.has('numberOfPages')) {
-            this.validateProps();
-        }
-    }
     render() {
         const pagesRange = getCurrentPagesRange(this.pagerState.page, this.numberOfPages, this.pagerState.totalPages - 1);
         return html `
@@ -164,17 +163,6 @@ let AtomicCommercePager = AtomicCommercePager_1 = class AtomicCommercePager exte
             this.nextButton = new FocusTargetController(this, this.bindings);
         }
     }
-    validateProps() {
-        try {
-            AtomicCommercePager_1.propsSchema.validate({
-                numberOfPages: this.numberOfPages,
-            });
-        }
-        catch (error) {
-            this.error = error;
-            return;
-        }
-    }
     async focusOnFirstResultAndScrollToTop() {
         await this.bindings.store.state.resultList?.focusOnFirstResultAfterNextSearch();
         this.dispatchEvent(new CustomEvent('atomic/scrollToTop'));
@@ -186,9 +174,6 @@ let AtomicCommercePager = AtomicCommercePager_1 = class AtomicCommercePager exte
         });
     }
 };
-AtomicCommercePager.propsSchema = new Schema({
-    numberOfPages: new NumberValue({ min: 0 }),
-});
 __decorate([
     state()
 ], AtomicCommercePager.prototype, "bindings", void 0);
@@ -215,7 +200,7 @@ __decorate([
     bindingGuard(),
     errorGuard()
 ], AtomicCommercePager.prototype, "render", null);
-AtomicCommercePager = AtomicCommercePager_1 = __decorate([
+AtomicCommercePager = __decorate([
     customElement('atomic-commerce-pager'),
     bindings(),
     withTailwindStyles

package/dist/atomic/components/components/commerce/atomic-commerce-recommendation-interface/atomic-commerce-recommendation-interface.js

@@ -14,6 +14,7 @@ import { errorGuard } from "../../../decorators/error-guard.js";
 import { watch } from "../../../decorators/watch";
 import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js";
 import { ChildrenUpdateCompleteMixin } from "../../../mixins/children-update-complete-mixin.js";
+import { waitForAtomicChildrenToBeDefined } from "../../../utils/custom-element-tags";
 import { markParentAsReady } from "../../../utils/init-queue";
 import { bindingsContext } from '../../common/context/bindings-context.js';
 import { augmentAnalyticsConfigWithAtomicVersion } from '../../common/interface/analytics-config.js';
@@ -160,6 +161,8 @@ let AtomicCommerceRecommendationInterface = class AtomicCommerceRecommendationIn
         this.bindings = this.getBindings();
         markParentAsReady(this);
         this.initLanguage();
+        await waitForAtomicChildrenToBeDefined(this);
+        await this.getUpdateComplete();
     }
     initContext() {
         this.context = buildContext(this.engine);

package/dist/atomic/components/components/common/atomic-focus-trap/atomic-focus-trap.js

@@ -0,0 +1,160 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { booleanConverter } from "../../../converters/boolean-converter";
+import { watch } from "../../../decorators/watch";
+import { LightDomMixin } from "../../../mixins/light-dom";
+import { getFirstFocusableDescendant } from "../../../utils/accessibility-utils";
+import { defer, getFocusedElement, getParent, isAncestorOf, } from "../../../utils/utils";
+/**
+ * The `atomic-focus-trap` component manages focus within a modal or dialog,
+ * ensuring keyboard navigation stays within the trap when active. When active,
+ * it hides sibling elements from assistive technologies and restricts tab focus
+ * to its descendants.
+ */
+let AtomicFocusTrap = class AtomicFocusTrap extends LightDomMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        /**
+         * Whether the focus trap is active.
+         */
+        this.active = false;
+        /**
+         * Whether the element should be hidden from screen readers & not interactive with the tab, when not active.
+         */
+        this.shouldHideSelf = true;
+        /**
+         * The common ancestor of the focus trap and of all the elements that should be inaccessible when inside the focus trap.
+         */
+        this.scope = document.body;
+        this.hiddenElements = [];
+        this.onFocusChanged = (e) => {
+            const elementIsPartOfHost = (focusedElement) => isAncestorOf(this, focusedElement);
+            const elementIsPartOfScope = (focusedElement) => isAncestorOf(this.scope, focusedElement);
+            if (!e.target || !this.active) {
+                return;
+            }
+            const focusedElement = getFocusedElement();
+            if (focusedElement &&
+                (elementIsPartOfHost(focusedElement) ||
+                    !elementIsPartOfScope(focusedElement))) {
+                return;
+            }
+            getFirstFocusableDescendant(this)?.focus();
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('focusin', this.onFocusChanged);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.showAll();
+        document.removeEventListener('focusin', this.onFocusChanged);
+    }
+    hide(element) {
+        // aria-hidden -> already hidden
+        // aria-live or atomic-aria-live -> must not be hidden otherwise it won't announce dynamic changes in the live region
+        if (element.hasAttribute('aria-hidden') ||
+            element.hasAttribute('aria-live') ||
+            element.tagName.toLowerCase() === 'atomic-aria-live') {
+            return;
+        }
+        element.setAttribute('aria-hidden', 'true');
+        this.hiddenElements.push(element);
+    }
+    showAll() {
+        let el = this.hiddenElements.pop();
+        while (el) {
+            el.removeAttribute('aria-hidden');
+            el = this.hiddenElements.pop();
+        }
+    }
+    hideSiblingsRecursively(element) {
+        const parent = getParent(element);
+        if (parent === null) {
+            return;
+        }
+        Array.from(parent.children).forEach((sibling) => {
+            if (sibling === element) {
+                return;
+            }
+            if (sibling.assignedSlot && isAncestorOf(this, sibling.assignedSlot)) {
+                return;
+            }
+            this.hide(sibling);
+        });
+        if (parent !== this.scope) {
+            this.hideSiblingsRecursively(parent);
+        }
+    }
+    showSelf() {
+        this.parentToHide.removeAttribute('aria-hidden');
+        this.parentToHide.removeAttribute('tabindex');
+    }
+    hideSelf() {
+        if (this.shouldHideSelf) {
+            this.parentToHide.setAttribute('aria-hidden', 'true');
+            this.parentToHide.setAttribute('tabindex', '-1');
+        }
+    }
+    async onDeactivated(isInitialLoad) {
+        this.showAll();
+        if (!isInitialLoad) {
+            await defer();
+            this.source?.focus();
+        }
+        this.hideSelf();
+    }
+    async onActivated(isInitialLoad) {
+        this.showSelf();
+        if (!isInitialLoad) {
+            await defer();
+            getFirstFocusableDescendant(this)?.focus();
+        }
+        this.hideSiblingsRecursively(this);
+    }
+    async handleActiveChange(_prev, next) {
+        const isInitialLoad = next === _prev;
+        if (next) {
+            await this.onActivated(isInitialLoad);
+        }
+        else {
+            await this.onDeactivated(isInitialLoad);
+        }
+    }
+    get parentToHide() {
+        return this.container ?? this;
+    }
+};
+__decorate([
+    property({ type: Boolean, converter: booleanConverter })
+], AtomicFocusTrap.prototype, "active", void 0);
+__decorate([
+    property({ type: Object })
+], AtomicFocusTrap.prototype, "source", void 0);
+__decorate([
+    property({ type: Object })
+], AtomicFocusTrap.prototype, "container", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        attribute: 'should-hide-self',
+        converter: booleanConverter,
+    })
+], AtomicFocusTrap.prototype, "shouldHideSelf", void 0);
+__decorate([
+    property({ type: Object })
+], AtomicFocusTrap.prototype, "scope", void 0);
+__decorate([
+    watch('active', { waitUntilFirstUpdate: true })
+], AtomicFocusTrap.prototype, "handleActiveChange", null);
+AtomicFocusTrap = __decorate([
+    customElement('atomic-focus-trap')
+], AtomicFocusTrap);
+export { AtomicFocusTrap };

package/dist/atomic/components/components/common/index.js

@@ -3,6 +3,7 @@ export { AtomicAriaLive } from './atomic-aria-live/atomic-aria-live.js';
 export { AtomicComponentError } from './atomic-component-error/atomic-component-error.js';
 export { AtomicFacetDateInput } from './atomic-facet-date-input/atomic-facet-date-input.js';
 export { AtomicFacetPlaceholder } from './atomic-facet-placeholder/atomic-facet-placeholder.js';
+export { AtomicFocusTrap } from './atomic-focus-trap/atomic-focus-trap.js';
 export { AtomicIcon } from './atomic-icon/atomic-icon.js';
 export { AtomicLayoutSection } from './atomic-layout-section/atomic-layout-section.js';
 export { AtomicModal } from './atomic-modal/atomic-modal.js';

package/dist/atomic/components/components/common/interface/interface-controller.js

@@ -2,6 +2,7 @@ import Backend from 'i18next-http-backend';
 import { setCoveoGlobal } from "../../../global/environment";
 import { loadDayjsLocale } from "../../../utils/dayjs-locales";
 import { i18nBackendOptions, i18nTranslationNamespace, init18n } from './i18n';
+import "../atomic-aria-live/atomic-aria-live";
 export class InterfaceController {
     constructor(host, globalVariableName, headlessVersion) {
         this.hangingComponentsInitialization = [];

package/dist/atomic/components/components/common/lazy-index.js

@@ -4,6 +4,7 @@ export default {
     'atomic-component-error': async () => await import('./atomic-component-error/atomic-component-error.js'),
     'atomic-facet-date-input': async () => await import('./atomic-facet-date-input/atomic-facet-date-input.js'),
     'atomic-facet-placeholder': async () => await import('./atomic-facet-placeholder/atomic-facet-placeholder.js'),
+    'atomic-focus-trap': async () => await import('./atomic-focus-trap/atomic-focus-trap.js'),
     'atomic-icon': async () => await import('./atomic-icon/atomic-icon.js'),
     'atomic-layout-section': async () => await import('./atomic-layout-section/atomic-layout-section.js'),
     'atomic-modal': async () => await import('./atomic-modal/atomic-modal.js'),

package/dist/atomic/components/components/common/suggestions/instant-item.js

@@ -21,7 +21,7 @@ export const getPartialInstantItemShowAllElement = (i18n, i18nKey) => {
 export const renderInstantItemShowAllButton = ({ i18n, i18nKey, }) => {
     const template = html `<div
     part="instant-results-show-all-button"
-    class=${getClassNameForButtonStyle('text-primary')}
+    class="pointer-events-none ${getClassNameForButtonStyle('text-primary')}"
   >
     ${i18n.t(i18nKey)}
   </div>`;

package/dist/atomic/components/components/common/suggestions/query-suggestions.js

@@ -13,7 +13,7 @@ export const getPartialSearchBoxSuggestionElement = (suggestion, i18n) => {
 };
 export const renderQuerySuggestion = ({ icon, hasQuery, suggestion, hasMultipleKindOfSuggestions, }) => {
     const template = html `
-    <div part="query-suggestion-content" class="flex items-center">${hasMultipleKindOfSuggestions
+    <div part="query-suggestion-content" class="pointer-events-none flex items-center">${hasMultipleKindOfSuggestions
         ? html `<atomic-icon
           part="query-suggestion-icon"
           icon=${icon}

package/dist/atomic/components/components/common/suggestions/recent-queries.js

@@ -27,7 +27,7 @@ export const renderRecentQuery = ({ icon, query, value, }) => {
     const hasQuery = query !== '';
     const template = html `<div
     part="recent-query-content"
-    class="flex items-center text-left break-all"
+    class="pointer-events-none flex items-center text-left break-all"
   >
     <atomic-icon
       part="recent-query-icon"
@@ -60,7 +60,7 @@ export const renderRecentQuery = ({ icon, query, value, }) => {
 export const renderRecentQueryClear = ({ i18n }) => {
     const template = html ` <div
     part="recent-query-title-content"
-    class="flex w-full justify-between"
+    class="pointer-events-none flex w-full justify-between"
   >
     <span class="font-bold" part="recent-query-title">
       ${i18n.t('recent-searches')}

package/dist/atomic/components/components/common/validate-props-controller/validate-props-controller.js

@@ -7,7 +7,8 @@ import { deepEqual } from "../../../utils/compare-utils";
  * the host updates, revalidating only if the props have changed since the last
  * validation.
  *
- * If validation fails, the controller sets the `error` property on the host.
+ * If validation fails, the controller either sets the `error` property on the host
+ * or logs a warning, depending on the `throwOnError` configuration.
  */
 export class ValidatePropsController {
     /**
@@ -16,11 +17,13 @@ export class ValidatePropsController {
      * @param host The host element.
      * @param getProps A function that returns the current props to validate.
      * @param schema The Bueno schema to validate the props against.
+     * @param throwOnError Whether to throw an error (true) or log a warning (false) when validation fails. Defaults to true.
      */
-    constructor(host, getProps, schema) {
+    constructor(host, getProps, schema, throwOnError = true) {
         this.host = host;
         this.getProps = getProps;
         this.schema = schema;
+        this.throwOnError = throwOnError;
         host.addController(this);
     }
     hostConnected() {
@@ -29,7 +32,7 @@ export class ValidatePropsController {
             // @ts-expect-error: we need to set the error to undefined if it was null.
             this.host.error = undefined;
         }
-        this._validateProps();
+        this.validateProps();
     }
     hostUpdate() {
         this.currentProps = this.getProps();
@@ -38,14 +41,20 @@ export class ValidatePropsController {
         }
         // @ts-expect-error: we need to clear the error.
         this.host.error = undefined;
-        this._validateProps();
+        this.validateProps();
     }
-    _validateProps() {
+    validateProps() {
         try {
             this.schema.validate(this.currentProps);
         }
         catch (error) {
-            this.host.error = error;
+            if (this.throwOnError) {
+                this.host.error = error;
+            }
+            else {
+                const message = `Prop validation failed for component ${this.host.tagName?.toLowerCase()}: ${error.message}`;
+                console.warn(message, this.host);
+            }
         }
         finally {
             this.previousProps = this.currentProps;

package/dist/atomic/components/components/insight/atomic-insight-interface/atomic-insight-interface.js

@@ -18,6 +18,7 @@ import { errorGuard } from "../../../decorators/error-guard";
 import { watch } from "../../../decorators/watch";
 import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js";
 import { ChildrenUpdateCompleteMixin } from "../../../mixins/children-update-complete-mixin";
+import { waitForAtomicChildrenToBeDefined } from "../../../utils/custom-element-tags";
 import { markParentAsReady } from "../../../utils/init-queue";
 import { getAnalyticsConfig } from './analytics-config.js';
 import { createInsightStore } from './store.js';
@@ -189,6 +190,7 @@ let AtomicInsightInterface = class AtomicInsightInterface extends ChildrenUpdate
         this.initResultsPerPage();
         this.registerFieldsToInclude();
         this.store.unsetLoadingFlag(FirstInsightRequestExecutedFlag);
+        await waitForAtomicChildrenToBeDefined(this);
         await this.getUpdateComplete();
         this.initialized = true;
     }

package/dist/atomic/components/components/recommendations/atomic-recs-interface/atomic-recs-interface.js

@@ -19,6 +19,7 @@ import { errorGuard } from "../../../decorators/error-guard";
 import { watch } from "../../../decorators/watch";
 import { withTailwindStyles } from "../../../decorators/with-tailwind-styles";
 import { ChildrenUpdateCompleteMixin } from "../../../mixins/children-update-complete-mixin";
+import { waitForAtomicChildrenToBeDefined } from "../../../utils/custom-element-tags";
 import { markParentAsReady } from "../../../utils/init-queue";
 import { getAnalyticsConfig } from './analytics-config';
 import { createRecsStore } from './store';
@@ -206,6 +207,7 @@ let AtomicRecsInterface = class AtomicRecsInterface extends ChildrenUpdateComple
         this.pipeline = this.engine.state.pipeline;
         this.searchHub = this.engine.state.searchHub;
         this.store.unsetLoadingFlag(FirstRecommendationExecutedFlag);
+        await waitForAtomicChildrenToBeDefined(this);
         await this.getUpdateComplete();
         this.initialized = true;
     }

package/dist/atomic/components/components/search/atomic-facet/atomic-facet.js

@@ -4,6 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+import { ArrayValue, NumberValue, Schema, StringValue } from '@coveo/bueno';
 import { buildFacet, buildFacetConditionsManager, buildSearchStatus, buildTabManager, } from '@coveo/headless';
 import { html, LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
@@ -28,6 +29,7 @@ import { renderFacetValue, } from '../../common/facets/facet-value/facet-value';
 import { renderFacetValuesGroup } from '../../common/facets/facet-values-group/facet-values-group';
 import { initializePopover } from '../../common/facets/popover/popover-type';
 import '../../common/atomic-facet-placeholder/atomic-facet-placeholder';
+import { arrayConverter } from "../../../converters/array-converter";
 import { booleanConverter } from "../../../converters/boolean-converter";
 import { bindings } from "../../../decorators/bindings";
 import { InitializeBindingsMixin } from "../../../mixins/bindings-mixin";
@@ -36,6 +38,7 @@ import facetSearchStyles from '../../common/facets/facet-search/facet-search.tw.
 import facetValueBoxStyles from '../../common/facets/facet-value-box/facet-value-box.tw.css';
 import facetValueCheckboxStyles from '../../common/facets/facet-value-checkbox/facet-value-checkbox.tw.css';
 import facetValueExcludeStyles from '../../common/facets/facet-value-exclude/facet-value-exclude.tw.css';
+import { ValidatePropsController } from '../../common/validate-props-controller/validate-props-controller';
 /**
  * A facet is a list of values for a certain field occurring in the results, ordered using a configurable criteria (for example, number of occurrences).
  * An `atomic-facet` displays a facet of the results for the current query.
@@ -77,7 +80,7 @@ import facetValueExcludeStyles from '../../common/facets/facet-value-exclude/fac
  */
 let AtomicFacet = class AtomicFacet extends InitializeBindingsMixin(LitElement) {
     constructor() {
-        super(...arguments);
+        super();
         /**
          * The non-localized label for the facet.
          * Used in the `atomic-breadbox` component through the bindings store.
@@ -197,6 +200,64 @@ let AtomicFacet = class AtomicFacet extends InitializeBindingsMixin(LitElement)
          * The default value is `undefined`, and the facet values will be sorted using only the `sortCriteria`.
          */
         this.customSort = [];
+        new ValidatePropsController(this, () => ({
+            field: this.field,
+            numberOfValues: this.numberOfValues,
+            headingLevel: this.headingLevel,
+            injectionDepth: this.injectionDepth,
+            sortCriteria: this.sortCriteria,
+            resultsMustMatch: this.resultsMustMatch,
+            displayValuesAs: this.displayValuesAs,
+            allowedValues: Array.isArray(this.allowedValues)
+                ? this.allowedValues
+                : [],
+            customSort: Array.isArray(this.customSort) ? this.customSort : [],
+            tabsExcluded: this.tabsExcluded,
+            tabsIncluded: this.tabsIncluded,
+        }), new Schema({
+            field: new StringValue({ required: true, emptyAllowed: false }),
+            numberOfValues: new NumberValue({ min: 1, required: false }),
+            headingLevel: new NumberValue({ min: 0, max: 6, required: false }),
+            injectionDepth: new NumberValue({ min: 0, required: false }),
+            sortCriteria: new StringValue({
+                constrainTo: [
+                    'score',
+                    'alphanumeric',
+                    'alphanumericDescending',
+                    'occurrences',
+                    'alphanumericNatural',
+                    'alphanumericNaturalDescending',
+                    'automatic',
+                ],
+                required: false,
+            }),
+            resultsMustMatch: new StringValue({
+                constrainTo: ['atLeastOneValue', 'allValues'],
+                required: false,
+            }),
+            displayValuesAs: new StringValue({
+                constrainTo: ['checkbox', 'link', 'box'],
+                required: false,
+            }),
+            allowedValues: new ArrayValue({
+                each: new StringValue({ emptyAllowed: false }),
+                max: 25,
+                required: false,
+            }),
+            customSort: new ArrayValue({
+                each: new StringValue({ emptyAllowed: false }),
+                max: 25,
+                required: false,
+            }),
+            tabsExcluded: new ArrayValue({
+                each: new StringValue({ emptyAllowed: false }),
+                required: false,
+            }),
+            tabsIncluded: new ArrayValue({
+                each: new StringValue({ emptyAllowed: false }),
+                required: false,
+            }),
+        }));
     }
     initialize() {
         if ([...this.tabsIncluded].length > 0 &&
@@ -507,6 +568,7 @@ __decorate([
     property({
         type: Array,
         attribute: 'tabs-included',
+        converter: arrayConverter,
         reflect: true,
     })
 ], AtomicFacet.prototype, "tabsIncluded", void 0);
@@ -514,6 +576,7 @@ __decorate([
     property({
         type: Array,
         attribute: 'tabs-excluded',
+        converter: arrayConverter,
         reflect: true,
     })
 ], AtomicFacet.prototype, "tabsExcluded", void 0);
@@ -546,7 +609,7 @@ __decorate([
     })
 ], AtomicFacet.prototype, "isCollapsed", void 0);
 __decorate([
-    property({ type: Number, attribute: 'heading-level', reflect: true })
+    property({ type: Number, attribute: 'heading-level' })
 ], AtomicFacet.prototype, "headingLevel", void 0);
 __decorate([
     property({