@coveo/atomic 3.33.8-pre.bfb642d322 → 3.33.8-pre.c15f1d422b

package/dist/atomic/components/atomic-stencil-facet-date-input.js

@@ -66,13 +66,13 @@ const FacetDateInput = /*@__PURE__*/ proxyCustomElement(class FacetDateInput ext
         // Fallback for Safari < 14.1, date with format yyyy-mm-dd over 1400 (API limit)
         const pattern = '^(1[4-9]\\d{2}|2\\d{3})-(0[1-9]|1[0-2])-(0[1-9]|[12]\\d|3[01])$';
         const range = this.rangeGetter();
-        return (h("form", { key: 'a9115a4868e39afbdb588fa0f3454d02308e36f5', class: "mt-4 grid grid-cols-[min-content_1fr] gap-2 px-2", onSubmit: (e) => {
+        return (h("form", { key: '60acc60ec8b30e3eaa4d0e2e1426732925ff352c', class: "mt-4 grid grid-cols-[min-content_1fr] gap-2 px-2", onSubmit: (e) => {
                 e.preventDefault();
                 this.apply();
                 return false;
-            } }, h("label", { key: '4d3bcb4549ba5cd003d5284831001830e3ac272f', part: "input-label", class: labelClasses, htmlFor: `${this.facetId}_start` }, startLabel, ":"), h("input", { key: '98cc6ca7a7a9a33f777998806259d3a9fa495bb1', id: `${this.facetId}_start`, part: "input-start", type: "date", ref: (ref) => (this.startRef = ref), class: inputClasses, "aria-label": startAria, placeholder: placeholder, pattern: pattern, required: true,
+            } }, h("label", { key: 'a43bd6b7f3ae352a7592e9de3390e5b8e180cb29', part: "input-label", class: labelClasses, htmlFor: `${this.facetId}_start` }, startLabel, ":"), h("input", { key: '7908bdd17fb8d035d2b75ab02417b13cd1516bd2', id: `${this.facetId}_start`, part: "input-start", type: "date", ref: (ref) => (this.startRef = ref), class: inputClasses, "aria-label": startAria, placeholder: placeholder, pattern: pattern, required: true,
             // API/Index minimum supported date
-            min: this.min || this.formattedDateValue('1401-01-01'), max: this.end ? this.formattedDateValue(this.end) : this.max, value: this.formattedDateValue(range?.start), onInput: (e) => (this.start = parseDate(e.target.value).toDate()) }), h("label", { key: 'fee1acc37402670ca45818b9a5da6062ed0b4218', part: "input-label", class: labelClasses, htmlFor: `${this.facetId}_end` }, endLabel, ":"), h("input", { key: 'cc3dd617c4d0fb7f8dbb2573bdcc30762aded812', id: `${this.facetId}_end`, part: "input-end", type: "date", ref: (ref) => (this.endRef = ref), class: inputClasses, "aria-label": endAria, placeholder: placeholder, pattern: pattern, required: true, min: this.formattedDateValue(this.start) || this.min, max: this.max, value: this.formattedDateValue(range?.end), onInput: (e) => (this.end = parseDate(e.target.value).toDate()) }), h(Button, { key: 'd5e7426fc8fa1594c533a96f96faa07fce2e2d95', style: "outline-primary", type: "submit", part: "input-apply-button", class: "col-span-2 truncate p-2.5", ariaLabel: applyAria, text: apply })));
+            min: this.min || this.formattedDateValue('1401-01-01'), max: this.end ? this.formattedDateValue(this.end) : this.max, value: this.formattedDateValue(range?.start), onInput: (e) => (this.start = parseDate(e.target.value).toDate()) }), h("label", { key: 'd5d35be72e99ae7488fae004a61682d597ab7d7f', part: "input-label", class: labelClasses, htmlFor: `${this.facetId}_end` }, endLabel, ":"), h("input", { key: 'b6b30c327c78cecef22c0b6eeec8cbf29b1d711a', id: `${this.facetId}_end`, part: "input-end", type: "date", ref: (ref) => (this.endRef = ref), class: inputClasses, "aria-label": endAria, placeholder: placeholder, pattern: pattern, required: true, min: this.formattedDateValue(this.start) || this.min, max: this.max, value: this.formattedDateValue(range?.end), onInput: (e) => (this.end = parseDate(e.target.value).toDate()) }), h(Button, { key: 'd0b34163e43a90cf982155bf7eeb315212c9e1d2', style: "outline-primary", type: "submit", part: "input-apply-button", class: "col-span-2 truncate p-2.5", ariaLabel: applyAria, text: apply })));
     }
 }, [0, "atomic-stencil-facet-date-input", {
         "bindings": [16],

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

@@ -80,7 +80,7 @@ const AtomicSuggestionRenderer = /*@__PURE__*/ proxyCustomElement(class AtomicSu
     }
     render() {
         const isButton = !!(this.suggestion.onSelect || this.suggestion.query);
-        return (h(Host, { key: 'dabe03f1f799005cb66cb0069c7d3dec75b21773', class: "contents" }, isButton ? (h("button", { id: this.id, key: this.suggestion.key, part: this.parts, class: this.classes, onMouseDown: (e) => e.preventDefault(), onClick: (e) => this.onClick?.(e), onMouseOver: (e) => this.onMouseOver?.(e), "data-query": this.suggestion.query, "aria-label": this.ariaLabel(isButton), ref: (el) => {
+        return (h(Host, { key: 'c332ae13efeac08cbbad4bdb4d86f15f3400ea60', class: "contents" }, isButton ? (h("button", { id: this.id, key: this.suggestion.key, part: this.parts, class: this.classes, onMouseDown: (e) => e.preventDefault(), onClick: (e) => this.onClick?.(e), onMouseOver: (e) => this.onMouseOver?.(e), "data-query": this.suggestion.query, "aria-label": this.ariaLabel(isButton), ref: (el) => {
                 if (!el) {
                     return;
                 }

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

@@ -1 +1 @@
-{"file":"atomic-suggestion-renderer2.js","mappings":";;SAgBgB,OAAO;;IAErB,OAAO,SAAS,CAAC,QAAQ,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;AAC9C,CAAC;SAEe,WAAW;IACzB,OAAO,MAAM,CAAC,UAAU,CAAC,oBAAoB,CAAC,CAAC,OAAO,CAAC;AACzD;;MCNa,wBAAwB;;;;;;;;;;;;;;;IAYnC,IAAY,KAAK;QACf,IAAI,IAAI,GAAG,YAAY,CAAC;QACxB,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,IAAI,IAAI,oBAAoB,CAAC;SAC9B;QACD,IAAI,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE;YACzB,IAAI,IAAI,wBAAwB,CAAC;SAClC;QACD,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE;YACxB,IAAI,IAAI,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;SACpC;QACD,OAAO,IAAI,CAAC;KACb;IAED,IAAY,OAAO;QACjB,OAAO,8EACL,IAAI,CAAC,UAAU,GAAG,kBAAkB,GAAG,EACzC,EAAE,CAAC;KACJ;IAED,IAAY,OAAO;QACjB,OAAO,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,IAChD,EAAC,QAAQ,OAAY,KAErB,IAAI,CAAC,UAAU,CAAC,OAAO,CACxB,CAAC;KACH;IAEO,SAAS,CAAC,QAAiB;QACjC,MAAM,YAAY,GAChB,IAAI,CAAC,UAAU,CAAC,SAAS;YACzB,IAAI,CAAC,UAAU,CAAC,KAAK;YACrB,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC;QAE1B,MAAM,aAAa,GACjB,OAAO,EAAE,IAAI,QAAQ;cACjB,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,0BAA0B,EAAE;gBACtC,KAAK,EAAE,YAAY;gBACnB,aAAa,EAAE,EAAC,WAAW,EAAE,KAAK,EAAC;aACpC,CAAC;cACF,YAAY,CAAC;QAEnB,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;QAChC,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;QAEjC,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;YACtB,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,+BAA+B,EAAE;gBAClD,KAAK,EAAE,aAAa;gBACpB,QAAQ;gBACR,KAAK;gBACL,aAAa,EAAE,EAAC,WAAW,EAAE,KAAK,EAAC;aACpC,CAAC,CAAC;SACJ;QAED,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,+BAA+B,EAAE;YAClD,KAAK,EAAE,aAAa;YACpB,QAAQ;YACR,KAAK;YACL,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,KAAK,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;YAC1D,aAAa,EAAE,EAAC,WAAW,EAAE,KAAK,EAAC;SACpC,CAAC,CAAC;KACJ;IAEO,kCAAkC,CAAC,OAAoB;QAC7D,IAAI,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;YAC/C,OAAO,CAAC,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;SAClD;KACF;IAEO,aAAa,CAAC,EAAmB;QACvC,OAAO,EAAE,YAAY,WAAW,CAAC;KAClC;IAED,MAAM;QACJ,MAAM,QAAQ,GAAG,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC,QAAQ,IAAI,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;QAEvE,QACE,EAAC,IAAI,qDAAC,KAAK,EAAC,UAAU,IACnB,QAAQ,IACP,cACE,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,GAAG,EAAE,IAAI,CAAC,UAAU,CAAC,GAAG,EACxB,IAAI,EAAE,IAAI,CAAC,KAAK,EAChB,KAAK,EAAE,IAAI,CAAC,OAAO,EACnB,WAAW,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,cAAc,EAAE,EACtC,OAAO,EAAE,CAAC,CAAQ,KAAK,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,EACxC,WAAW,EAAE,CAAC,CAAQ,KAAK,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,gBACpC,IAAI,CAAC,UAAU,CAAC,KAAK,gBACrB,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,EACpC,GAAG,EAAE,CAAC,EAAE;gBACN,IAAI,CAAC,EAAE,EAAE;oBACP,OAAO;iBACR;gBACD,IAAI,CAAC,kCAAkC,CAAC,EAAE,CAAC,CAAC;aAC7C,IAEA,IAAI,CAAC,OAAO,CACN,KAET,YACE,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,GAAG,EAAE,IAAI,CAAC,UAAU,CAAC,GAAG,EACxB,IAAI,EAAE,IAAI,CAAC,KAAK,EAChB,KAAK,EAAE,IAAI,CAAC,OAAO,gBACP,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,EACpC,GAAG,EAAE,CAAC,EAAE;gBACN,IAAI,CAAC,EAAE,EAAE;oBACP,OAAO;iBACR;gBACD,IAAI,CAAC,kCAAkC,CAAC,EAAE,CAAC,CAAC;aAC7C,IAEA,IAAI,CAAC,OAAO,CACR,CACR,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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-common';\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          <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}

package/dist/atomic/components/atomic-tab-manager.js

@@ -59,7 +59,7 @@ const AtomicTabManager$1 = /*@__PURE__*/ proxyCustomElement(class AtomicTabManag
         });
     }
     render() {
-        return (h(Host, { key: 'abd272be633c8913b9c64f3b20d529373e7ca08c' }, h("atomic-tab-bar", { key: 'd21406c4e28a1a4fecd2986d97aa292f0cfd48a9' }, h("div", { key: '6a0375f62e5a178cec1737108984ac1e497370bd', role: "list", "aria-label": "tab-area", part: "tab-area", class: "border-neutral mb-2 flex w-full flex-row border-b" }, this.tabs.map((tab) => (h("atomic-tab-button", { active: this.tabManagerState.activeTab === tab.name, label: this.bindings.i18n.t(tab.label, {
+        return (h(Host, { key: 'ea60f4179a268319ba97570f95d6881c379c8b18' }, h("atomic-tab-bar", { key: 'ea83347d794b2f83b70706bdfc4240286c27d71e' }, h("div", { key: '9d9e588d7a4b7012f43419f3edae786b177498cc', role: "list", "aria-label": "tab-area", part: "tab-area", class: "border-neutral mb-2 flex w-full flex-row border-b" }, this.tabs.map((tab) => (h("atomic-tab-button", { active: this.tabManagerState.activeTab === tab.name, label: this.bindings.i18n.t(tab.label, {
                 defaultValue: tab.label,
             }), select: () => {
                 if (!tab.tabController.state.isActive) {

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

@@ -115,23 +115,30 @@ let AtomicCommerceBreadbox = class AtomicCommerceBreadbox extends LitElement {
         this.breadcrumbShowMoreFocus = new FocusTargetController(this, this.bindings);
         this.breadcrumbShowLessFocus = new FocusTargetController(this, this.bindings);
     }
-    updated(changedProperties) {
-        super.updated(changedProperties);
+    willUpdate(changedProperties) {
         if (changedProperties.has('pathLimit')) {
             this.validateProps();
         }
+    }
+    updated() {
         this.adaptBreadcrumbs();
     }
     validateProps() {
-        new Schema({
-            pathLimit: new NumberValue({
-                default: 3,
-                min: 1,
-                required: false,
-            }),
-        }).validate({
-            pathLimit: this.pathLimit,
-        });
+        try {
+            new Schema({
+                pathLimit: new NumberValue({
+                    default: 3,
+                    min: 1,
+                    required: false,
+                }),
+            }).validate({
+                pathLimit: this.pathLimit,
+            });
+        }
+        catch (error) {
+            this.error = error;
+            return;
+        }
     }
     disconnectedCallback() {
         this.resizeObserver?.disconnect();

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

@@ -4,11 +4,12 @@ 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 { buildCommerceEngine, buildContext, buildProductListing, buildSearch, VERSION as HEADLESS_VERSION, loadConfigurationActions, loadQueryActions, } from '@coveo/headless/commerce';
+import { buildCommerceEngine, buildContext, buildProductListing, buildSearch, VERSION as HEADLESS_VERSION, loadConfigurationActions, loadContextActions, loadQueryActions, } from '@coveo/headless/commerce';
 import { provide } from '@lit/context';
 import i18next from 'i18next';
 import { css, html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
+import { MobileBreakpointController } from "../../common/layout/mobile-breakpoint-controller";
 import { booleanConverter } from "../../../converters/boolean-converter";
 import { errorGuard } from "../../../decorators/error-guard";
 import { watch } from "../../../decorators/watch";
@@ -57,7 +58,7 @@ let AtomicCommerceInterface = class AtomicCommerceInterface extends ChildrenUpda
          */
         this.reflectStateInUrl = true;
         /**
-         * Disable state reflection in the URL parameters.
+         * Whether to disable state reflection in the URL parameters.
          */
         this.disableStateReflectionInUrl = false;
         /**
@@ -85,6 +86,7 @@ let AtomicCommerceInterface = class AtomicCommerceInterface extends ChildrenUpda
             this.urlManager.synchronize(this.fragment);
         };
         this.store = createCommerceStore(this.type);
+        new MobileBreakpointController(this, this.store);
         const { promise, resolve } = Promise.withResolvers();
         this.i18Initialized = promise;
         this.i18n = i18next.createInstance(undefined, resolve);
@@ -92,7 +94,6 @@ let AtomicCommerceInterface = class AtomicCommerceInterface extends ChildrenUpda
     connectedCallback() {
         super.connectedCallback();
         this.store.setLoadingFlag(FirstRequestExecutedFlag);
-        this.updateMobileBreakpoint();
         this.addEventListener('atomic/initializeComponent', this.handleInitialization);
         this.addEventListener('atomic/scrollToTop', this.scrollToTop);
     }
@@ -143,6 +144,41 @@ let AtomicCommerceInterface = class AtomicCommerceInterface extends ChildrenUpda
             this.searchOrListing.executeFirstRequest();
         }
     }
+    /**
+     * Updates the locale settings for the commerce interface and headless commerce
+     * engine. Only the provided parameters will be updated.
+     *
+     * Calling this method affects the localization of the interface as well as
+     * the catalog configuration being used by the Commerce API. If the resulting
+     * language-country-currency combination matches no existing catalog
+     * configuration in your Coveo organization, requests made through the
+     * commerce engine will start failing.
+     *
+     * @param language - (Optional) The IETF language code tag (e.g., `en`).
+     * @param country - (Optional) The ISO-3166-1 country tag (e.g., `US`).
+     * @param currency - (Optional) The ISO-4217 currency code (e.g., `USD`).
+     *
+     * @example
+     * ```typescript
+     * interface.updateLocale('fr', 'CA', 'CAD');
+     * ```
+     */
+    updateLocale(language, country, currency) {
+        if (!this.interfaceController.engineIsCreated(this.engine) ||
+            !this.context) {
+            return;
+        }
+        language && this.interfaceController.onLanguageChange(language);
+        if (this.isNewLocale(language, country, currency)) {
+            const { setContext } = loadContextActions(this.engine);
+            this.engine.dispatch(setContext({
+                ...this.context.state,
+                ...(language && { language }),
+                ...(country && { country }),
+                ...(currency && { currency }),
+            }));
+        }
+    }
     toggleAnalytics() {
         this.interfaceController.onAnalyticsChange();
     }
@@ -156,11 +192,10 @@ let AtomicCommerceInterface = class AtomicCommerceInterface extends ChildrenUpda
             !this.context) {
             return;
         }
-        // TODO - KIT-4993: Add temporary deprecation warning.
+        this.engine.logger.warn('The `language` property will be removed in the next major version of Atomic (v4). Rather than using this property, set the initial language through the engine configuration when calling `initialize` or `initializeWithEngine`, and update the language as needed using the `updateLocale` method.');
         this.context.setLanguage(this.language);
         return this.interfaceController.onLanguageChange();
     }
-    // TODO - KIT-4993: Add updateLocale public method.
     disconnectedCallback() {
         super.disconnectedCallback();
         if (typeof this.unsubscribeUrlManager === 'function') {
@@ -210,11 +245,11 @@ let AtomicCommerceInterface = class AtomicCommerceInterface extends ChildrenUpda
             throw error;
         }
     }
-    // TODO - KIT-4993: Adjust.
     initLanguage() {
-        if (!this.language) {
-            this.language = this.context.state.language;
+        if (!this.context || this.language) {
+            return;
         }
+        this.interfaceController.onLanguageChange(this.context.state.language);
     }
     initRequestStatus() {
         this.searchOrListing =
@@ -256,7 +291,7 @@ let AtomicCommerceInterface = class AtomicCommerceInterface extends ChildrenUpda
             this.i18Initialized,
         ]);
         this.initContext();
-        this.updateLanguage();
+        this.updateLanguage(); // TODO - (v4) KIT-4365: Remove.
         this.bindings = this.getBindings();
         markParentAsReady(this);
         this.initRequestStatus();
@@ -266,6 +301,14 @@ let AtomicCommerceInterface = class AtomicCommerceInterface extends ChildrenUpda
         this.initUrlManager();
         this.initialized = true;
     }
+    isNewLocale(language, country, currency) {
+        if (!this.context) {
+            return false;
+        }
+        return ((language && language !== this.context.state.language) ||
+            (country && country !== this.context.state.country) ||
+            (currency && currency !== this.context.state.currency));
+    }
     // TODO - (v4) KIT-4991: Make private.
     scrollToTop() {
         const scrollContainerElement = document.querySelector(this.scrollContainer);
@@ -285,12 +328,6 @@ let AtomicCommerceInterface = class AtomicCommerceInterface extends ChildrenUpda
         history.pushState(null, document.title, `#${newFragment}`);
         this.bindings.engine.logger.info(`History pushState #${newFragment}`);
     }
-    updateMobileBreakpoint() {
-        const breakpoint = this.querySelector('atomic-commerce-layout')?.mobileBreakpoint;
-        if (breakpoint) {
-            this.store.state.mobileBreakpoint = breakpoint;
-        }
-    }
 };
 AtomicCommerceInterface.styles = [
     css`:host{display:block;height:inherit;width:inherit;&>slot{height:inherit}}`,

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

@@ -4,11 +4,12 @@ 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 { LitElement, unsafeCSS } from 'lit';
+import { LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
+import { LayoutStylesController } from "../../common/layout/layout-styles-controller";
+import { watch } from "../../../decorators/watch";
 import { ChildrenUpdateCompleteMixin } from "../../../mixins/children-update-complete-mixin";
 import { LightDomMixin } from "../../../mixins/light-dom";
-import { randomID } from "../../../utils/utils";
 import { DEFAULT_MOBILE_BREAKPOINT } from '../../../utils/replace-breakpoint-utils';
 import styles from './atomic-commerce-layout.tw.css';
 import { buildCommerceLayout } from './commerce-layout';
@@ -18,8 +19,6 @@ import { buildCommerceLayout } from './commerce-layout';
  * @cssprop --atomic-layout-max-search-box-input-width: The maximum width that the search box input will take.
  * @cssprop --atomic-layout-max-search-box-double-suggestions-width: The maximum width that the search box suggestions will take when displaying a double list.
  * @cssprop --atomic-layout-search-box-left-suggestions-width: The width of the left list when displaying a double list.
- *
- * @slot default - The default slot for the layout content.
  */
 let AtomicCommerceLayout = class AtomicCommerceLayout extends LightDomMixin(ChildrenUpdateCompleteMixin(LitElement)) {
     constructor() {
@@ -29,15 +28,22 @@ let AtomicCommerceLayout = class AtomicCommerceLayout extends LightDomMixin(Chil
          * E.g., 800px, 65rem.
          */
         this.mobileBreakpoint = DEFAULT_MOBILE_BREAKPOINT;
-    }
-    async addStyles() {
-        await this.getUpdateComplete();
-        this.injectStyles(unsafeCSS(buildCommerceLayout(this, this.mobileBreakpoint)));
+        this.layoutStylesController = new LayoutStylesController(this, buildCommerceLayout, 'atomic-commerce-layout-');
     }
     connectedCallback() {
         super.connectedCallback();
-        this.id = randomID('atomic-commerce-layout-');
-        this.addStyles();
+        this.emitBreakpointChangeEvent();
+    }
+    emitBreakpointChangeEvent() {
+        this.dispatchEvent(new CustomEvent('atomic-layout-breakpoint-change', {
+            detail: { breakpoint: this.mobileBreakpoint },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    onMobileBreakpointChange() {
+        this.layoutStylesController.updateStyles();
+        this.emitBreakpointChangeEvent();
     }
 };
 AtomicCommerceLayout.styles = [styles];
@@ -47,6 +53,9 @@ __decorate([
 __decorate([
     property({ type: String, reflect: true, attribute: 'mobile-breakpoint' })
 ], AtomicCommerceLayout.prototype, "mobileBreakpoint", void 0);
+__decorate([
+    watch('mobileBreakpoint')
+], AtomicCommerceLayout.prototype, "onMobileBreakpointChange", null);
 AtomicCommerceLayout = __decorate([
     customElement('atomic-commerce-layout')
 ], AtomicCommerceLayout);

package/dist/atomic/components/components/commerce/atomic-commerce-query-summary/atomic-commerce-query-summary.js

@@ -37,7 +37,7 @@ let AtomicCommerceQuerySummary = class AtomicCommerceQuerySummary extends LitEle
         this.listingOrSearchSummary = controller.summary();
     }
     render() {
-        const { firstProduct, firstRequestExecuted, lastProduct, totalNumberOfProducts, hasProducts, hasError, } = this.listingOrSearchSummaryState;
+        const { firstProduct, firstRequestExecuted, lastProduct, totalNumberOfProducts, hasProducts, hasError, isLoading, } = this.listingOrSearchSummaryState;
         const { i18nKey, highlights, ariaLiveMessage } = getProductQuerySummaryI18nParameters({
             first: firstProduct,
             last: lastProduct,
@@ -46,7 +46,7 @@ let AtomicCommerceQuerySummary = class AtomicCommerceQuerySummary extends LitEle
                 : '',
             total: totalNumberOfProducts,
             i18n: this.bindings.i18n,
-            isLoading: false,
+            isLoading,
         });
         this.ariaMessage.message = ariaLiveMessage;
         return html `${renderQuerySummaryGuard({

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

@@ -50,6 +50,9 @@ let AtomicCommerceRecommendationInterface = class AtomicCommerceRecommendationIn
          *
          */
         this.iconAssetsPath = './assets';
+        // TODO - KIT-4994: Add disableAnalytics property that defaults to false.
+        // TODO - KIT-4994: Deprecate in favor of disableAnalytics property.
+        // TODO - (v4) KIT-4990: Remove.
         /**
          * Whether to enable analytics.
          */
@@ -104,13 +107,15 @@ let AtomicCommerceRecommendationInterface = class AtomicCommerceRecommendationIn
             return;
         }
         language && this.interfaceController.onLanguageChange(language);
-        const { setContext } = loadContextActions(this.engine);
-        this.engine.dispatch(setContext({
-            ...this.context.state,
-            ...(language && { language }),
-            ...(country && { country }),
-            ...(currency && { currency }),
-        }));
+        if (this.isNewLocale(language, country, currency)) {
+            const { setContext } = loadContextActions(this.engine);
+            this.engine.dispatch(setContext({
+                ...this.context.state,
+                ...(language && { language }),
+                ...(country && { country }),
+                ...(currency && { currency }),
+            }));
+        }
     }
     toggleAnalytics() {
         this.interfaceController.onAnalyticsChange();
@@ -118,6 +123,7 @@ let AtomicCommerceRecommendationInterface = class AtomicCommerceRecommendationIn
     updateIconAssetsPath() {
         this.store.state.iconAssetsPath = this.iconAssetsPath;
     }
+    // TODO - (v4) KIT-4365: Remove.
     async updateLanguage() {
         if (!this.interfaceController.engineIsCreated(this.engine) ||
             !this.language ||
@@ -150,7 +156,7 @@ let AtomicCommerceRecommendationInterface = class AtomicCommerceRecommendationIn
             this.i18Initialized,
         ]);
         this.initContext();
-        this.language && this.updateLanguage();
+        this.updateLanguage();
         this.bindings = this.getBindings();
         markParentAsReady(this);
         this.initLanguage();
@@ -167,9 +173,18 @@ let AtomicCommerceRecommendationInterface = class AtomicCommerceRecommendationIn
         };
     }
     initLanguage() {
-        if (!this.language) {
-            this.interfaceController.onLanguageChange(this.context.state.language);
+        if (!this.context || this.language) {
+            return;
+        }
+        this.interfaceController.onLanguageChange(this.context.state.language);
+    }
+    isNewLocale(language, country, currency) {
+        if (!this.context) {
+            return false;
         }
+        return ((language && language !== this.context.state.language) ||
+            (country && country !== this.context.state.country) ||
+            (currency && currency !== this.context.state.currency));
     }
 };
 AtomicCommerceRecommendationInterface.styles = [

package/dist/atomic/components/components/commerce/atomic-commerce-search-box/atomic-commerce-search-box.js

@@ -20,12 +20,13 @@ import { AriaLiveRegionController } from "../../../utils/accessibility-utils";
 import { hasKeyboard, isMacOS } from "../../../utils/device-utils";
 import { SafeStorage, StorageItems, } from "../../../utils/local-storage-utils";
 import { updateBreakpoints } from "../../../utils/replace-breakpoint-utils";
+import { getDefaultSlotFromHost } from "../../../utils/slot-utils";
 import { isFocusingOut, once, randomID, spreadProperties, } from '../../../utils/utils';
 import { renderSearchBoxWrapper } from '../../common/search-box/search-box-wrapper';
 import { renderSearchBoxTextArea } from '../../common/search-box/search-text-area';
 import { renderSubmitButton } from '../../common/search-box/submit-button';
 import { SuggestionManager } from '../../common/suggestions/suggestion-manager';
-import { elementHasQuery, } from '../../common/suggestions/suggestions-common';
+import { elementHasQuery } from '../../common/suggestions/suggestions-utils';
 import '../atomic-commerce-search-box-instant-products/atomic-commerce-search-box-instant-products';
 import '../atomic-commerce-search-box-query-suggestions/atomic-commerce-search-box-query-suggestions';
 import '../atomic-commerce-search-box-recent-queries/atomic-commerce-search-box-recent-queries';
@@ -123,9 +124,6 @@ let AtomicCommerceSearchBox = class AtomicCommerceSearchBox extends LitElement {
     }
     connectedCallback() {
         super.connectedCallback();
-        if (this.children.length === 0) {
-            this.replaceChildren(document.createElement('atomic-commerce-search-box-recent-queries'), document.createElement('atomic-commerce-search-box-query-suggestions'));
-        }
         this.addEventListener('atomic/searchBoxSuggestion/register', (event) => {
             const customEvent = event;
             this.searchBoxSuggestionEventsQueue.push(customEvent);
@@ -492,6 +490,14 @@ let AtomicCommerceSearchBox = class AtomicCommerceSearchBox extends LitElement {
       ></atomic-suggestion-renderer>
     `;
     }
+    renderSlotContent() {
+        const hasDefaultSlot = !!getDefaultSlotFromHost(this);
+        if (hasDefaultSlot) {
+            return html `<slot></slot>`;
+        }
+        return html `<atomic-commerce-search-box-recent-queries></atomic-commerce-search-box-recent-queries>
+      <atomic-commerce-search-box-query-suggestions></atomic-commerce-search-box-query-suggestions>`;
+    }
     render() {
         this.updateBreakpoints();
         if (!this.suggestionManager.suggestions.length) {
@@ -511,7 +517,7 @@ let AtomicCommerceSearchBox = class AtomicCommerceSearchBox extends LitElement {
                 },
             },
         })(html `${this.renderTextBox()}
-        ${renderSubmitButton({
+      ${renderSubmitButton({
             props: {
                 i18n: this.bindings.i18n,
                 disabled: this.isSearchDisabledForEndUser,
@@ -521,7 +527,8 @@ let AtomicCommerceSearchBox = class AtomicCommerceSearchBox extends LitElement {
                 },
             },
         })}
-        ${this.renderSuggestions()}`)}
+      ${this.renderSuggestions()}`)}
+      ${this.renderSlotContent()}
     `;
     }
 };

package/dist/atomic/components/components/commerce/atomic-commerce-search-box-instant-products/atomic-commerce-search-box-instant-products.js

@@ -9,7 +9,7 @@ import { html, LitElement, nothing, render } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { keyed } from 'lit/directives/keyed.js';
 import { getPartialInstantItemElement, getPartialInstantItemShowAllElement, renderInstantItemShowAllButton, } from "../../common/suggestions/instant-item";
-import { dispatchSearchBoxSuggestionsEvent, } from "../../common/suggestions/suggestions-common";
+import { dispatchSearchBoxSuggestionsEvent } from "../../common/suggestions/suggestions-events";
 import { errorGuard } from "../../../decorators/error-guard";
 import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js";
 import { encodeForDomAttribute } from "../../../utils/string-utils";

package/dist/atomic/components/components/commerce/atomic-commerce-search-box-query-suggestions/atomic-commerce-search-box-query-suggestions.js

@@ -8,7 +8,7 @@ import { loadQuerySuggestActions, } from '@coveo/headless/commerce';
 import { html, LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { getPartialSearchBoxSuggestionElement, renderQuerySuggestion, } from "../../common/suggestions/query-suggestions";
-import { dispatchSearchBoxSuggestionsEvent, } from "../../common/suggestions/suggestions-common";
+import { dispatchSearchBoxSuggestionsEvent } from "../../common/suggestions/suggestions-events";
 import { errorGuard } from "../../../decorators/error-guard";
 const SearchIcon = "<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m6.4 0c3.5 0 6.4 2.9 6.4 6.4 0 1.4-.4 2.7-1.2 3.7l4 4c.4.4.4 1 .1 1.5l-.1.1c-.2.2-.5.3-.8.3s-.6-.1-.8-.3l-4-4c-1 .7-2.3 1.2-3.7 1.2-3.4-.1-6.3-3-6.3-6.5s2.9-6.4 6.4-6.4zm0 2.1c-2.3 0-4.3 1.9-4.3 4.3s1.9 4.3 4.3 4.3 4.3-1.9 4.3-4.3-1.9-4.3-4.3-4.3z\"/></svg>";
 /**

package/dist/atomic/components/components/commerce/atomic-commerce-search-box-recent-queries/atomic-commerce-search-box-recent-queries.js

@@ -12,7 +12,7 @@ import { SafeStorage, StorageItems } from "../../../utils/local-storage-utils";
 import { once } from "../../../utils/utils";
 const Clock = "<svg fill=\"none\" stroke=\"currentColor\" stroke-linejoin=\"round\" stroke-linecap=\"round\"  viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"8\" cy=\"8\" r=\"7.5\"/><path d=\"m8.5 4.5v4\"/><path d=\"m10.3066 10.1387-1.80932-1.5768\"/></svg>";
 import { getPartialRecentQueryClearElement, getPartialRecentQueryElement, renderRecentQuery, renderRecentQueryClear, } from '../../common/suggestions/recent-queries';
-import { dispatchSearchBoxSuggestionsEvent, } from '../../common/suggestions/suggestions-common';
+import { dispatchSearchBoxSuggestionsEvent } from '../../common/suggestions/suggestions-events';
 /**
  * The `atomic-commerce-search-box-recent-queries` component can be added as a child of an `atomic-commerce-search-box` component, allowing for the configuration of recent query suggestions.
  */

package/dist/atomic/components/components/common/atomic-modal/atomic-modal.js

@@ -9,6 +9,7 @@ import { customElement, property, state } from 'lit/decorators.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { when } from 'lit/directives/when.js';
 import { booleanConverter } from "../../../converters/boolean-converter.js";
+import { bindings } from "../../../decorators/bindings.js";
 import { errorGuard } from "../../../decorators/error-guard";
 import { watch } from "../../../decorators/watch.js";
 import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js";
@@ -296,6 +297,7 @@ __decorate([
 ], AtomicModal.prototype, "watchToggleOpen", null);
 AtomicModal = __decorate([
     customElement('atomic-modal'),
+    bindings(),
     withTailwindStyles
 ], AtomicModal);
 export { AtomicModal };

package/dist/atomic/components/components/common/layout/layout-styles-controller.js

@@ -0,0 +1,40 @@
+import { randomID } from "../../../utils/utils";
+/**
+ * A reactive controller that manages dynamic layout styles.
+ */
+export class LayoutStylesController {
+    constructor(host, stylesBuilder, componentPrefix) {
+        this.dynamicStyleSheet = null;
+        this.host = host;
+        this.stylesBuilder = stylesBuilder;
+        this.componentPrefix = componentPrefix;
+        this.host.addController(this);
+    }
+    hostConnected() {
+        if (!this.host.id) {
+            this.host.id = randomID(this.componentPrefix);
+        }
+        this.host.updateComplete.then(() => this.updateStyles());
+    }
+    /**
+     * Updates the dynamic styles based on the current mobile breakpoint
+     */
+    updateStyles() {
+        const parent = this.host.getRootNode();
+        const isDocumentOrShadowRoot = parent instanceof Document || parent instanceof ShadowRoot;
+        if (!isDocumentOrShadowRoot) {
+            return;
+        }
+        const newStylesCSS = this.stylesBuilder(this.host, this.host.mobileBreakpoint);
+        if (!this.dynamicStyleSheet) {
+            this.dynamicStyleSheet = new CSSStyleSheet();
+            this.dynamicStyleSheet.replaceSync(newStylesCSS);
+            parent.adoptedStyleSheets = [
+                ...parent.adoptedStyleSheets,
+                this.dynamicStyleSheet,
+            ];
+            return;
+        }
+        this.dynamicStyleSheet.replaceSync(newStylesCSS);
+    }
+}

package/dist/atomic/components/components/common/layout/mobile-breakpoint-controller.js

@@ -0,0 +1,26 @@
+/**
+ * A reactive controller that manages mobile breakpoint changes through event communication.
+ * This controller listens for 'atomic-layout-breakpoint-change' events and updates a store
+ * with the new breakpoint value.
+ */
+export class MobileBreakpointController {
+    constructor(host, store) {
+        this.host = host;
+        this.store = store;
+        this.eventListener = this.handleBreakpointChange.bind(this);
+        this.host.addController(this);
+    }
+    hostConnected() {
+        this.host.addEventListener('atomic-layout-breakpoint-change', this.eventListener);
+    }
+    hostDisconnected() {
+        this.host.removeEventListener('atomic-layout-breakpoint-change', this.eventListener);
+    }
+    handleBreakpointChange(e) {
+        const customEvent = e;
+        const newBreakpoint = customEvent.detail?.breakpoint;
+        if (newBreakpoint && this.store.state.mobileBreakpoint !== newBreakpoint) {
+            this.store.state.mobileBreakpoint = newBreakpoint;
+        }
+    }
+}

package/dist/atomic/components/components/common/suggestions/suggestion-manager.js

@@ -2,7 +2,7 @@ import { isNullOrUndefined } from '@coveo/bueno';
 import DOMPurify from 'dompurify';
 import { debounce } from '../../../utils/debounce-utils';
 import { promiseTimeout } from '../../../utils/promise-utils';
-import { elementHasNoQuery, elementHasQuery, } from './suggestions-common';
+import { elementHasNoQuery, elementHasQuery } from './suggestions-utils';
 export class SuggestionManager {
     constructor(ownerSearchBoxProps) {
         this.ownerSearchBoxProps = ownerSearchBoxProps;