@coveo/atomic 3.27.4-pre.fba84e863c → 3.27.4

package/dist/atomic/components/atomic-recs-error.js.map

@@ -1 +1 @@
-{"file":"atomic-recs-error.js","mappings":";;;;;;;AAAA,MAAM,kBAAkB,GAAG,0u1DAA0u1D,CAAC;AACtw1D,8BAAe,kBAAkB;;;;;;;;;;;;MCuCpBA,iBAAe;;;;;QAQjB,iBAAY,GAAG,KAAK,CAAC;;;4BAAN,KAAK;;IAKtB,UAAU;QACf,IAAI,CAAC,kBAAkB,GAAG,uBAAuB,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;KACzE;IAEM,MAAM;QACX,MAAM,EAAC,KAAK,EAAC,GAAG,IAAI,CAAC,uBAAuB,CAAC;QAE7C,MAAM,EACJ,QAAQ,EAAE,EACR,IAAI,EACJ,MAAM,EAAE,EACN,KAAK,EAAE,EACL,aAAa,EAAE,EAAC,cAAc,EAAE,WAAW,EAAC,GAC7C,GACF,GACF,GACF,GAAG,IAAI,CAAC;QACT,MAAM,GAAG,GAAG,uBAAuB,CAAC,cAAc,EAAE,WAAW,CAAC,CAAC;QACjE,MAAM,QAAQ,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;QAE3C,IAAI,QAAQ,EAAE;YACZ,IAAI,CAAC,WAAW,GAAG,2BAA2B,CAC5C,IAAI,EACJ,cAAc,EACd,GAAG,EACH,KAAK,EAAE,IAAI,CACZ,CAAC;SACH;QAED,QACE,EAAC,eAAe,qDAAC,QAAQ,EAAE,QAAQ,IACjC,EAAC,mBAAmB,uDAClB,EAAC,cAAc,qDAAC,SAAS,EAAE,KAAK,EAAE,IAAI,GAAI,EAC1C,EAAC,eAAe,qDAAC,IAAI,EAAE,IAAI,EAAE,cAAc,EAAE,cAAc,GAAI,EAC/D,EAAC,qBAAqB,qDACpB,IAAI,EAAE,IAAI,EACV,cAAc,EAAE,cAAc,EAC9B,GAAG,EAAE,GAAG,GACR,EACF,EAAC,kBAAkB,qDACjB,IAAI,EAAE,EAAC,cAAc,IAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,GAAI,EAC5D,UAAU,EAAE,OAAO,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,EAC1D,IAAI,EAAE,IAAI,GACV,EACF,EAAC,iBAAiB,qDAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,YAAY,GAAI,CACxC,CACN,EAClB;KACH;;;;;;;AA5D4B;IAA5B,kBAAkB,EAAE;mDAAgC;AAK9C;IAFN,qBAAqB,CAAC,oBAAoB,CAAC;kEAEa;AAK/C;IADT,cAAc,CAAC,YAAY,CAAC;sDACE;;;;;;;;;;;;;;;;;;;;","names":["AtomicRecsError"],"sources":["src/components/recommendations/atomic-recs-error/atomic-recs-error.pcss?tag=atomic-recs-error&encapsulation=shadow","src/components/recommendations/atomic-recs-error/atomic-recs-error.tsx"],"sourcesContent":["@import '../../../global/global.pcss';\n","import {isNullOrUndefined} from '@coveo/bueno';\nimport {\n  buildRecommendationList,\n  getOrganizationEndpoint,\n  RecommendationList,\n  RecommendationListState,\n} from '@coveo/headless/recommendation';\nimport {Component, h, State} from '@stencil/core';\nimport {\n  BindStateToController,\n  InitializableComponent,\n  InitializeBindings,\n} from '../../../utils/initialization-utils';\nimport {AriaLiveRegion} from '../../../utils/stencil-accessibility-utils';\nimport {QueryErrorDescription} from '../../common/query-error/description';\nimport {QueryErrorDetails} from '../../common/query-error/details';\nimport {QueryErrorIcon} from '../../common/query-error/icon';\nimport {QueryErrorLink} from '../../common/query-error/link';\nimport {QueryErrorShowMore} from '../../common/query-error/show-more';\nimport {QueryErrorContainer} from '../../common/query-error/stencil-container';\nimport {QueryErrorGuard} from '../../common/query-error/stencil-guard';\nimport {QueryErrorTitle} from '../../common/query-error/title';\nimport {getAriaMessageFromErrorType} from '../../common/query-error/utils';\nimport {RecsBindings} from '../atomic-recs-interface/atomic-recs-interface';\n\n/**\n * The `atomic-recs-error` component handles fatal errors when performing a recommendations request on the index or Search API. When the error is known, it displays a link to relevant documentation link for debugging purposes. When the error is unknown, it displays a small text area with the JSON content of the error.\n *\n * @part icon - The svg related to the error.\n * @part title - The title of the error.\n * @part description - A description of the error.\n * @part doc-link - A link to the relevant documentation.\n * @part more-info-btn - A button to request additional error information.\n * @part error-info - Additional error information.\n */\n@Component({\n  tag: 'atomic-recs-error',\n  styleUrl: 'atomic-recs-error.pcss',\n  shadow: true,\n})\nexport class AtomicRecsError implements InitializableComponent<RecsBindings> {\n  @InitializeBindings() public bindings!: RecsBindings;\n  public recommendationList!: RecommendationList;\n\n  @BindStateToController('recommendationList')\n  @State()\n  public recommendationListState!: RecommendationListState;\n  @State() public error!: Error;\n  @State() showMoreInfo = false;\n\n  @AriaLiveRegion('recs-error')\n  protected ariaMessage!: string;\n\n  public initialize() {\n    this.recommendationList = buildRecommendationList(this.bindings.engine);\n  }\n\n  public render() {\n    const {error} = this.recommendationListState;\n\n    const {\n      bindings: {\n        i18n,\n        engine: {\n          state: {\n            configuration: {organizationId, environment},\n          },\n        },\n      },\n    } = this;\n    const url = getOrganizationEndpoint(organizationId, environment);\n    const hasError = !isNullOrUndefined(error);\n\n    if (hasError) {\n      this.ariaMessage = getAriaMessageFromErrorType(\n        i18n,\n        organizationId,\n        url,\n        error?.type\n      );\n    }\n\n    return (\n      <QueryErrorGuard hasError={hasError}>\n        <QueryErrorContainer>\n          <QueryErrorIcon errorType={error?.type} />\n          <QueryErrorTitle i18n={i18n} organizationId={organizationId} />\n          <QueryErrorDescription\n            i18n={i18n}\n            organizationId={organizationId}\n            url={url}\n          />\n          <QueryErrorShowMore\n            link={<QueryErrorLink i18n={i18n} errorType={error?.type} />}\n            onShowMore={() => (this.showMoreInfo = !this.showMoreInfo)}\n            i18n={i18n}\n          />\n          <QueryErrorDetails error={error} show={this.showMoreInfo} />\n        </QueryErrorContainer>\n      </QueryErrorGuard>\n    );\n  }\n}\n"],"version":3}
+{"file":"atomic-recs-error.js","mappings":";;;;;;;AAAA,MAAM,kBAAkB,GAAG,0u1DAA0u1D,CAAC;AACtw1D,8BAAe,kBAAkB;;;;;;;;;;;;MCuCpBA,iBAAe;;;;;QAQjB,iBAAY,GAAG,KAAK,CAAC;;;4BAAN,KAAK;;IAKtB,UAAU;QACf,IAAI,CAAC,kBAAkB,GAAG,uBAAuB,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;KACzE;IAEM,MAAM;QACX,MAAM,EAAC,KAAK,EAAC,GAAG,IAAI,CAAC,uBAAuB,CAAC;QAE7C,MAAM,EACJ,QAAQ,EAAE,EACR,IAAI,EACJ,MAAM,EAAE,EACN,KAAK,EAAE,EACL,aAAa,EAAE,EAAC,cAAc,EAAE,WAAW,EAAC,GAC7C,GACF,GACF,GACF,GAAG,IAAI,CAAC;QACT,MAAM,GAAG,GAAG,uBAAuB,CAAC,cAAc,EAAE,WAAW,CAAC,CAAC;QACjE,MAAM,QAAQ,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;QAE3C,IAAI,QAAQ,EAAE;YACZ,IAAI,CAAC,WAAW,GAAG,2BAA2B,CAC5C,IAAI,EACJ,cAAc,EACd,GAAG,EACH,KAAK,EAAE,IAAI,CACZ,CAAC;SACH;QAED,QACE,EAAC,eAAe,qDAAC,QAAQ,EAAE,QAAQ,IACjC,EAAC,mBAAmB,uDAClB,EAAC,cAAc,qDAAC,SAAS,EAAE,KAAK,EAAE,IAAI,GAAI,EAC1C,EAAC,eAAe,qDAAC,IAAI,EAAE,IAAI,EAAE,cAAc,EAAE,cAAc,GAAI,EAC/D,EAAC,qBAAqB,qDACpB,IAAI,EAAE,IAAI,EACV,cAAc,EAAE,cAAc,EAC9B,GAAG,EAAE,GAAG,GACR,EACF,EAAC,kBAAkB,qDACjB,IAAI,EAAE,EAAC,cAAc,IAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,GAAI,EAC5D,UAAU,EAAE,OAAO,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,EAC1D,IAAI,EAAE,IAAI,GACV,EACF,EAAC,iBAAiB,qDAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,YAAY,GAAI,CACxC,CACN,EAClB;KACH;;;;;;;AA5D4B;IAA5B,kBAAkB,EAAE;mDAAgC;AAK9C;IAFN,qBAAqB,CAAC,oBAAoB,CAAC;kEAEa;AAK/C;IADT,cAAc,CAAC,YAAY,CAAC;sDACE;;;;;;;;;;;;;;;;;;;;","names":["AtomicRecsError"],"sources":["src/components/recommendations/atomic-recs-error/atomic-recs-error.pcss?tag=atomic-recs-error&encapsulation=shadow","src/components/recommendations/atomic-recs-error/atomic-recs-error.tsx"],"sourcesContent":["@import '../../../global/global.pcss';\n","import {isNullOrUndefined} from '@coveo/bueno';\nimport {\n  buildRecommendationList,\n  getOrganizationEndpoint,\n  RecommendationList,\n  RecommendationListState,\n} from '@coveo/headless/recommendation';\nimport {Component, h, State} from '@stencil/core';\nimport {\n  BindStateToController,\n  InitializableComponent,\n  InitializeBindings,\n} from '../../../utils/initialization-utils';\nimport {AriaLiveRegion} from '../../../utils/stencil-accessibility-utils';\nimport {QueryErrorDetails} from '../../common/query-error/stencil-details';\nimport {QueryErrorIcon} from '../../common/query-error/stencil-icon';\nimport {QueryErrorShowMore} from '../../common/query-error/show-more';\nimport {QueryErrorContainer} from '../../common/query-error/stencil-container';\nimport {QueryErrorDescription} from '../../common/query-error/stencil-description';\nimport {QueryErrorGuard} from '../../common/query-error/stencil-guard';\nimport {QueryErrorTitle} from '../../common/query-error/title';\nimport {getAriaMessageFromErrorType} from '../../common/query-error/utils';\nimport {RecsBindings} from '../atomic-recs-interface/atomic-recs-interface';\nimport {QueryErrorLink} from '../../common/query-error/stencil-link';\n\n/**\n * The `atomic-recs-error` component handles fatal errors when performing a recommendations request on the index or Search API. When the error is known, it displays a link to relevant documentation link for debugging purposes. When the error is unknown, it displays a small text area with the JSON content of the error.\n *\n * @part icon - The svg related to the error.\n * @part title - The title of the error.\n * @part description - A description of the error.\n * @part doc-link - A link to the relevant documentation.\n * @part more-info-btn - A button to request additional error information.\n * @part error-info - Additional error information.\n */\n@Component({\n  tag: 'atomic-recs-error',\n  styleUrl: 'atomic-recs-error.pcss',\n  shadow: true,\n})\nexport class AtomicRecsError implements InitializableComponent<RecsBindings> {\n  @InitializeBindings() public bindings!: RecsBindings;\n  public recommendationList!: RecommendationList;\n\n  @BindStateToController('recommendationList')\n  @State()\n  public recommendationListState!: RecommendationListState;\n  @State() public error!: Error;\n  @State() showMoreInfo = false;\n\n  @AriaLiveRegion('recs-error')\n  protected ariaMessage!: string;\n\n  public initialize() {\n    this.recommendationList = buildRecommendationList(this.bindings.engine);\n  }\n\n  public render() {\n    const {error} = this.recommendationListState;\n\n    const {\n      bindings: {\n        i18n,\n        engine: {\n          state: {\n            configuration: {organizationId, environment},\n          },\n        },\n      },\n    } = this;\n    const url = getOrganizationEndpoint(organizationId, environment);\n    const hasError = !isNullOrUndefined(error);\n\n    if (hasError) {\n      this.ariaMessage = getAriaMessageFromErrorType(\n        i18n,\n        organizationId,\n        url,\n        error?.type\n      );\n    }\n\n    return (\n      <QueryErrorGuard hasError={hasError}>\n        <QueryErrorContainer>\n          <QueryErrorIcon errorType={error?.type} />\n          <QueryErrorTitle i18n={i18n} organizationId={organizationId} />\n          <QueryErrorDescription\n            i18n={i18n}\n            organizationId={organizationId}\n            url={url}\n          />\n          <QueryErrorShowMore\n            link={<QueryErrorLink i18n={i18n} errorType={error?.type} />}\n            onShowMore={() => (this.showMoreInfo = !this.showMoreInfo)}\n            i18n={i18n}\n          />\n          <QueryErrorDetails error={error} show={this.showMoreInfo} />\n        </QueryErrorContainer>\n      </QueryErrorGuard>\n    );\n  }\n}\n"],"version":3}

package/dist/atomic/components/atomic-refine-toggle.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { buildSearchStatus } from '@coveo/headless';
 import { I as InitializeBindings, B as BindStateToController } from './initialization-utils.js';
-import { R as RefineToggleGuard, a as RefineToggleButton } from './stencil-button2.js';
+import { R as RefineToggleGuard, a as RefineToggleButton } from './stencil-guard.js';
 import { d as defineCustomElement$6 } from './atomic-automatic-facet2.js';
 import { d as defineCustomElement$5 } from './atomic-automatic-facet-generator2.js';
 import { d as defineCustomElement$4 } from './atomic-focus-trap2.js';
@@ -53,7 +53,7 @@ const AtomicRefineToggle$1 = /*@__PURE__*/ proxyCustomElement(class AtomicRefine
         this.modalRef && (this.modalRef.isOpen = true);
     }
     render() {
-        return (h(RefineToggleGuard, { key: 'a79231544904327fc9cc657fc32a908dde6f9849', firstRequestExecuted: this.searchStatusState.firstSearchExecuted, hasError: this.searchStatusState.hasError, hasItems: this.searchStatusState.hasResults }, h(RefineToggleButton, { key: '18cf9d3ea4f2e0a163f65eb8432f7f8a2f524453', i18n: this.bindings.i18n, onClick: () => this.enableModal(), setRef: (button) => {
+        return (h(RefineToggleGuard, { key: '276acb5f7fc7b2a3552b795b087a5e8a6f5fda31', firstRequestExecuted: this.searchStatusState.firstSearchExecuted, hasError: this.searchStatusState.hasError, hasItems: this.searchStatusState.hasResults }, h(RefineToggleButton, { key: 'b2d426789aafd70fbe849713cafd1cdd560be31c', i18n: this.bindings.i18n, onClick: () => this.enableModal(), setRef: (button) => {
                 if (!button) {
                     return;
                 }

package/dist/atomic/components/atomic-refine-toggle.js.map

@@ -1 +1 @@
-{"file":"atomic-refine-toggle.js","mappings":";;;;;;;;;;AAAA,MAAM,qBAAqB,GAAG,0u1DAA0u1D,CAAC;AACzw1D,iCAAe,qBAAqB;;;;;;;;;;;;MCyBvBA,oBAAkB;;;;;;;;;;;QAkBC,wBAAmB,GAAG,CAAC,CAAC;;;mCAAF,CAAC;;IAE9C,UAAU;QACf,IAAI,CAAC,YAAY,GAAG,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;KAC7D;IAEO,SAAS;QACf,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAO;SACR;QAED,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;QAC9D,IAAI,CAAC,IAAI,CAAC,qBAAqB,CAAC,aAAa,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC9D,IAAI,CAAC,QAAQ,CAAC,UAAU,GAAG,IAAI,CAAC,SAAS,CAAC;QAC1C,IAAI,CAAC,QAAQ,CAAC,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC;KAC9D;IAEO,WAAW;QACjB,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;KAChD;IAEM,MAAM;QACX,QACE,EAAC,iBAAiB,qDAChB,oBAAoB,EAAE,IAAI,CAAC,iBAAiB,CAAC,mBAAmB,EAChE,QAAQ,EAAE,IAAI,CAAC,iBAAiB,CAAC,QAAQ,EACzC,QAAQ,EAAE,IAAI,CAAC,iBAAiB,CAAC,UAAU,IAE3C,EAAC,kBAAkB,qDACjB,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,EACxB,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EACjC,MAAM,EAAE,CAAC,MAAM;gBACb,IAAI,CAAC,MAAM,EAAE;oBACX,OAAO;iBACR;gBACD,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC;gBACxB,IAAI,CAAC,SAAS,EAAE,CAAC;aAClB,GACD,CACgB,EACpB;KACH;;;;;;;;AArD4B;IAA5B,kBAAkB,EAAE;sDAA4B;AAIzC;IAFP,qBAAqB,CAAC,cAAc,CAAC;+DAEQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["AtomicRefineToggle"],"sources":["src/components/search/atomic-refine-toggle/atomic-refine-toggle.pcss?tag=atomic-refine-toggle&encapsulation=shadow","src/components/search/atomic-refine-toggle/atomic-refine-toggle.tsx"],"sourcesContent":["@import '../../../global/global.pcss';\n","import {\n  buildSearchStatus,\n  SearchStatusState,\n  SearchStatus,\n} from '@coveo/headless';\nimport {Component, h, Prop, State, Element} from '@stencil/core';\nimport {\n  InitializeBindings,\n  InitializableComponent,\n  BindStateToController,\n} from '../../../utils/initialization-utils';\nimport {RefineToggleGuard} from '../../common/refine-modal/guard';\nimport {RefineToggleButton} from '../../common/refine-modal/stencil-button';\nimport {Bindings} from '../atomic-search-interface/atomic-search-interface';\n\n/**\n * The `atomic-refine-toggle` component displays a button that opens a modal containing the facets and the sort components.\n *\n * When this component is added to the `atomic-search-interface`, an `atomic-refine-modal` component is automatically created.\n * @part button - The refine toggle button.\n */\n@Component({\n  tag: 'atomic-refine-toggle',\n  styleUrl: 'atomic-refine-toggle.pcss',\n  shadow: true,\n})\nexport class AtomicRefineToggle implements InitializableComponent {\n  @Element() public host!: HTMLElement;\n  public searchStatus!: SearchStatus;\n  private modalRef?: HTMLAtomicRefineModalElement;\n  private buttonRef?: HTMLButtonElement;\n\n  @InitializeBindings() public bindings!: Bindings;\n  @State() public error!: Error;\n  @BindStateToController('searchStatus')\n  @State()\n  private searchStatusState!: SearchStatusState;\n\n  /**\n   * The number of expanded facets inside the refine modal.\n   * Remaining facets are automatically collapsed.\n   *\n   * Using the value `0` collapses all facets.\n   */\n  @Prop({reflect: true}) public collapseFacetsAfter = 0;\n\n  public initialize() {\n    this.searchStatus = buildSearchStatus(this.bindings.engine);\n  }\n\n  private loadModal() {\n    if (this.modalRef) {\n      return;\n    }\n\n    this.modalRef = document.createElement('atomic-refine-modal');\n    this.host.insertAdjacentElement('beforebegin', this.modalRef);\n    this.modalRef.openButton = this.buttonRef;\n    this.modalRef.collapseFacetsAfter = this.collapseFacetsAfter;\n  }\n\n  private enableModal() {\n    this.modalRef && (this.modalRef.isOpen = true);\n  }\n\n  public render() {\n    return (\n      <RefineToggleGuard\n        firstRequestExecuted={this.searchStatusState.firstSearchExecuted}\n        hasError={this.searchStatusState.hasError}\n        hasItems={this.searchStatusState.hasResults}\n      >\n        <RefineToggleButton\n          i18n={this.bindings.i18n}\n          onClick={() => this.enableModal()}\n          setRef={(button) => {\n            if (!button) {\n              return;\n            }\n            this.buttonRef = button;\n            this.loadModal();\n          }}\n        />\n      </RefineToggleGuard>\n    );\n  }\n}\n"],"version":3}
+{"file":"atomic-refine-toggle.js","mappings":";;;;;;;;;;AAAA,MAAM,qBAAqB,GAAG,0u1DAA0u1D,CAAC;AACzw1D,iCAAe,qBAAqB;;;;;;;;;;;;MCyBvBA,oBAAkB;;;;;;;;;;;QAkBC,wBAAmB,GAAG,CAAC,CAAC;;;mCAAF,CAAC;;IAE9C,UAAU;QACf,IAAI,CAAC,YAAY,GAAG,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;KAC7D;IAEO,SAAS;QACf,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAO;SACR;QAED,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;QAC9D,IAAI,CAAC,IAAI,CAAC,qBAAqB,CAAC,aAAa,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC9D,IAAI,CAAC,QAAQ,CAAC,UAAU,GAAG,IAAI,CAAC,SAAS,CAAC;QAC1C,IAAI,CAAC,QAAQ,CAAC,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC;KAC9D;IAEO,WAAW;QACjB,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;KAChD;IAEM,MAAM;QACX,QACE,EAAC,iBAAiB,qDAChB,oBAAoB,EAAE,IAAI,CAAC,iBAAiB,CAAC,mBAAmB,EAChE,QAAQ,EAAE,IAAI,CAAC,iBAAiB,CAAC,QAAQ,EACzC,QAAQ,EAAE,IAAI,CAAC,iBAAiB,CAAC,UAAU,IAE3C,EAAC,kBAAkB,qDACjB,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,EACxB,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EACjC,MAAM,EAAE,CAAC,MAAM;gBACb,IAAI,CAAC,MAAM,EAAE;oBACX,OAAO;iBACR;gBACD,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC;gBACxB,IAAI,CAAC,SAAS,EAAE,CAAC;aAClB,GACD,CACgB,EACpB;KACH;;;;;;;;AArD4B;IAA5B,kBAAkB,EAAE;sDAA4B;AAIzC;IAFP,qBAAqB,CAAC,cAAc,CAAC;+DAEQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["AtomicRefineToggle"],"sources":["src/components/search/atomic-refine-toggle/atomic-refine-toggle.pcss?tag=atomic-refine-toggle&encapsulation=shadow","src/components/search/atomic-refine-toggle/atomic-refine-toggle.tsx"],"sourcesContent":["@import '../../../global/global.pcss';\n","import {\n  buildSearchStatus,\n  SearchStatusState,\n  SearchStatus,\n} from '@coveo/headless';\nimport {Component, h, Prop, State, Element} from '@stencil/core';\nimport {\n  InitializeBindings,\n  InitializableComponent,\n  BindStateToController,\n} from '../../../utils/initialization-utils';\nimport {RefineToggleButton} from '../../common/refine-modal/stencil-button';\nimport {RefineToggleGuard} from '../../common/refine-modal/stencil-guard';\nimport {Bindings} from '../atomic-search-interface/atomic-search-interface';\n\n/**\n * The `atomic-refine-toggle` component displays a button that opens a modal containing the facets and the sort components.\n *\n * When this component is added to the `atomic-search-interface`, an `atomic-refine-modal` component is automatically created.\n * @part button - The refine toggle button.\n */\n@Component({\n  tag: 'atomic-refine-toggle',\n  styleUrl: 'atomic-refine-toggle.pcss',\n  shadow: true,\n})\nexport class AtomicRefineToggle implements InitializableComponent {\n  @Element() public host!: HTMLElement;\n  public searchStatus!: SearchStatus;\n  private modalRef?: HTMLAtomicRefineModalElement;\n  private buttonRef?: HTMLButtonElement;\n\n  @InitializeBindings() public bindings!: Bindings;\n  @State() public error!: Error;\n  @BindStateToController('searchStatus')\n  @State()\n  private searchStatusState!: SearchStatusState;\n\n  /**\n   * The number of expanded facets inside the refine modal.\n   * Remaining facets are automatically collapsed.\n   *\n   * Using the value `0` collapses all facets.\n   */\n  @Prop({reflect: true}) public collapseFacetsAfter = 0;\n\n  public initialize() {\n    this.searchStatus = buildSearchStatus(this.bindings.engine);\n  }\n\n  private loadModal() {\n    if (this.modalRef) {\n      return;\n    }\n\n    this.modalRef = document.createElement('atomic-refine-modal');\n    this.host.insertAdjacentElement('beforebegin', this.modalRef);\n    this.modalRef.openButton = this.buttonRef;\n    this.modalRef.collapseFacetsAfter = this.collapseFacetsAfter;\n  }\n\n  private enableModal() {\n    this.modalRef && (this.modalRef.isOpen = true);\n  }\n\n  public render() {\n    return (\n      <RefineToggleGuard\n        firstRequestExecuted={this.searchStatusState.firstSearchExecuted}\n        hasError={this.searchStatusState.hasError}\n        hasItems={this.searchStatusState.hasResults}\n      >\n        <RefineToggleButton\n          i18n={this.bindings.i18n}\n          onClick={() => this.enableModal()}\n          setRef={(button) => {\n            if (!button) {\n              return;\n            }\n            this.buttonRef = button;\n            this.loadModal();\n          }}\n        />\n      </RefineToggleGuard>\n    );\n  }\n}\n"],"version":3}

package/dist/atomic/components/atomic-result-number.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
 import { ResultTemplatesHelpers } from '@coveo/headless';
 import { I as InitializeBindings } from './initialization-utils.js';
-import { a as defaultNumberFormatter } from './format-common.js';
+import { b as defaultNumberFormatter } from './format-common.js';
 import { R as ResultContext } from './result-template-decorators.js';
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {

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

@@ -0,0 +1,347 @@
+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 { bindStateToController } from "../../../decorators/bind-state";
+import { bindingGuard } from "../../../decorators/binding-guard";
+import { bindings } from "../../../decorators/bindings";
+import { errorGuard } from "../../../decorators/error-guard";
+import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js";
+import { FocusTargetController } from "../../../utils/accessibility-utils";
+import { parseDate } from "../../../utils/date-utils";
+import { getFieldValueCaption } from "../../../utils/field-utils";
+import { NumberValue, Schema } from '@coveo/bueno';
+import { buildContext, buildProductListing, buildSearch, } from '@coveo/headless/commerce';
+import { html, LitElement, nothing, unsafeCSS } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { renderBreadcrumbButton } from '../../common/breadbox/breadcrumb-button';
+import { renderBreadcrumbClearAll } from '../../common/breadbox/breadcrumb-clear-all';
+import { renderBreadcrumbContainer } from '../../common/breadbox/breadcrumb-container';
+import { renderBreadcrumbContent } from '../../common/breadbox/breadcrumb-content';
+import { renderBreadcrumbShowLess } from '../../common/breadbox/breadcrumb-show-less';
+import { renderBreadcrumbShowMore } from '../../common/breadbox/breadcrumb-show-more';
+import { formatHumanReadable } from '../../common/facets/numeric-facet/formatter';
+import { defaultCurrencyFormatter, defaultNumberFormatter, } from '../../common/formats/format-common';
+import styles from './atomic-commerce-breadbox.tw.css';
+/**
+ * The `atomic-commerce-breadbox` component creates breadcrumbs that display a summary of the currently active facet values.
+ *
+ * @part container - The container of the whole component, list & label.
+ * @part breadcrumb-list-container - The container of the list of breadcrumb buttons.
+ * @part breadcrumb-list - The list of breadcrumb buttons.
+ * @part breadcrumb-button - A single breadcrumb button.
+ * @part breadcrumb-label - The breadcrumb label, associated with the facet.
+ * @part breadcrumb-value - The breadcrumb formatted value.
+ * @part breadcrumb-clear - The button to clear individual filters.
+ * @part show-more - The button to display all breadcrumbs.
+ * @part show-less - The button to display less breadcrumbs.
+ * @part label - The "Filters" label.
+ * @part clear - The button to clear all filters.
+ *
+ * @alpha
+ */
+let AtomicCommerceBreadbox = class AtomicCommerceBreadbox extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.lastRemovedBreadcrumbIndex = 0;
+        this.numberOfBreadcrumbs = 0;
+        this.numberOfCollapsedBreadcrumbs = 0;
+        this.isCollapsed = true;
+        this.showMoreText = '';
+        /**
+         * This prop allows you to control the display depth
+         * of the path by specifying the number of parent or ancestor
+         * breadcrumbs links relative to the currently selected value.
+         *
+         * If the path size is equal to or less than the pathLimit, all values in
+         * the path will be displayed without truncation.
+         *
+         * If the path size exceeds the pathLimit, it will truncate the path by
+         * replacing the middle values with ellipses ('...').
+         *
+         * Minimum: `1`
+         * @defaultValue `3`
+         */
+        this.pathLimit = 3;
+        this.valueForFacetType = (type, field, value) => {
+            switch (type) {
+                case 'numericalRange':
+                    return [
+                        formatHumanReadable({
+                            facetValue: value.value,
+                            logger: this.bindings.engine.logger,
+                            i18n: this.bindings.i18n,
+                            field: field,
+                            manualRanges: [],
+                            formatter: this.getNumberFormatter(field),
+                        }),
+                    ];
+                case 'dateRange':
+                    return [
+                        this.bindings.i18n.t('to', {
+                            start: parseDate(value.value.start).format('YYYY-MM-DD'),
+                            end: parseDate(value.value.end).format('YYYY-MM-DD'),
+                        }),
+                    ];
+                case 'hierarchical':
+                    return value.value.path.map((pathValue) => getFieldValueCaption(field, pathValue, this.bindings.i18n));
+                case 'regular':
+                    return [
+                        getFieldValueCaption(field, value.value.value, this.bindings.i18n),
+                    ];
+                default: {
+                    // TODO COMHUB-291 support location breadcrumb
+                    this.bindings.engine.logger.warn('Unexpected breadcrumb type.');
+                    return [];
+                }
+            }
+        };
+    }
+    initialize() {
+        this.validateProps();
+        if (this.bindings.interfaceElement.type === 'product-listing') {
+            this.searchOrListing = buildProductListing(this.bindings.engine);
+        }
+        else {
+            this.searchOrListing = buildSearch(this.bindings.engine);
+        }
+        this.context = buildContext(this.bindings.engine);
+        this.breadcrumbManager = this.searchOrListing.breadcrumbManager();
+        if (window.ResizeObserver && this.parentElement) {
+            this.resizeObserver = new ResizeObserver(() => this.adaptBreadcrumbs());
+            this.resizeObserver.observe(this.parentElement);
+        }
+        this.breadcrumbRemovedFocus = new FocusTargetController(this, this.bindings);
+        this.breadcrumbShowMoreFocus = new FocusTargetController(this, this.bindings);
+        this.breadcrumbShowLessFocus = new FocusTargetController(this, this.bindings);
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('pathLimit')) {
+            this.validateProps();
+        }
+        this.adaptBreadcrumbs();
+    }
+    validateProps() {
+        new Schema({
+            pathLimit: new NumberValue({
+                default: 3,
+                min: 1,
+                required: false,
+            }),
+        }).validate({
+            pathLimit: this.pathLimit,
+        });
+    }
+    disconnectedCallback() {
+        this.resizeObserver?.disconnect();
+    }
+    get breadcrumbs() {
+        return Array.from(this.shadowRoot.querySelectorAll('li.breadcrumb'));
+    }
+    get showMoreButton() {
+        return this.shadowRoot.querySelector('button[part="show-more"]');
+    }
+    get showLessButton() {
+        return this.shadowRoot.querySelector('button[part="show-less"]');
+    }
+    hide(element) {
+        element.style.display = 'none';
+    }
+    show(element) {
+        element.style.display = '';
+    }
+    showAllBreadcrumbs() {
+        this.breadcrumbs.forEach((breadcrumb) => this.show(breadcrumb));
+    }
+    adaptBreadcrumbs() {
+        if (!this.breadcrumbs.length) {
+            return;
+        }
+        this.showAllBreadcrumbs();
+        if (!this.isCollapsed) {
+            this.updateShowLessDisplay();
+            return;
+        }
+        this.hideOverflowingBreadcrumbs();
+    }
+    updateShowLessDisplay() {
+        this.show(this.showLessButton);
+        if (this.showLessButton.offsetTop === 0) {
+            this.hide(this.showLessButton);
+        }
+    }
+    hideOverflowingBreadcrumbs() {
+        let hiddenBreadcrumbs = 0;
+        for (let i = this.breadcrumbs.length - 1; this.isOverflowing && i >= 0; i--) {
+            this.hide(this.breadcrumbs[i]);
+            hiddenBreadcrumbs++;
+        }
+        this.updateShowMoreValue(hiddenBreadcrumbs);
+    }
+    get isOverflowing() {
+        const listElement = this.shadowRoot.querySelector('ul');
+        if (!listElement) {
+            return false;
+        }
+        return listElement.scrollWidth > listElement.clientWidth;
+    }
+    updateShowMoreValue(value) {
+        this.numberOfCollapsedBreadcrumbs = value;
+        if (value === 0) {
+            this.hide(this.showMoreButton);
+            return;
+        }
+        this.show(this.showMoreButton);
+        this.showMoreText = `+ ${value.toLocaleString(this.bindings.i18n.language)}`;
+    }
+    getNumberFormatter(field) {
+        if (field === 'ec_price' || field === 'ec_promo_price') {
+            return defaultCurrencyFormatter(this.contextState.currency);
+        }
+        return defaultNumberFormatter;
+    }
+    buildBreadcrumb(breadcrumb) {
+        return breadcrumb.values.map((value) => {
+            return {
+                facetId: breadcrumb.facetId,
+                label: breadcrumb.facetDisplayName,
+                deselect: value.deselect,
+                formattedValue: this.valueForFacetType(breadcrumb.type, breadcrumb.facetId, value),
+            };
+        });
+    }
+    renderBreadcrumbs(breadcrumbs) {
+        this.numberOfBreadcrumbs = breadcrumbs.length;
+        return breadcrumbs.map((breadcrumb, index) => {
+            const isLastBreadcrumb = breadcrumbs.length === 1;
+            return html `${renderBreadcrumbButton({
+                props: {
+                    pathLimit: this.pathLimit,
+                    breadcrumb,
+                    i18n: this.bindings.i18n,
+                    onSelectBreadcrumb: () => {
+                        if (isLastBreadcrumb) {
+                            this.bindings.store.state.resultList?.focusOnFirstResultAfterNextSearch();
+                        }
+                        else if (this.numberOfBreadcrumbs > 1) {
+                            this.breadcrumbRemovedFocus.focusAfterSearch();
+                        }
+                        this.lastRemovedBreadcrumbIndex = index;
+                        breadcrumb.deselect();
+                    },
+                    refCallback: (ref) => {
+                        if (this.lastRemovedBreadcrumbIndex === index) {
+                            this.breadcrumbRemovedFocus.setTarget(ref);
+                        }
+                        if (this.firstExpandedBreadcrumbIndex === index) {
+                            this.breadcrumbShowMoreFocus.setTarget(ref);
+                        }
+                    },
+                },
+            })(html `${renderBreadcrumbContent({
+                props: {
+                    pathLimit: this.pathLimit,
+                    isCollapsed: this.isCollapsed,
+                    i18n: this.bindings.i18n,
+                    breadcrumb,
+                },
+            })}`)}`;
+        });
+    }
+    render() {
+        const breadcrumbs = this.breadcrumbManagerState.facetBreadcrumbs
+            .map((breadcrumb) => {
+            return this.buildBreadcrumb(breadcrumb);
+        })
+            .flat();
+        if (!breadcrumbs.length) {
+            return html `${nothing}`;
+        }
+        return html `${renderBreadcrumbContainer({
+            props: {
+                isCollapsed: this.isCollapsed,
+                i18n: this.bindings.i18n,
+            },
+        })(html `${this.renderBreadcrumbs(breadcrumbs)}
+      ${renderBreadcrumbShowMore({
+            props: {
+                refCallback: (el) => {
+                    this.breadcrumbShowLessFocus.setTarget(el);
+                },
+                onShowMore: () => {
+                    this.firstExpandedBreadcrumbIndex =
+                        this.numberOfBreadcrumbs - this.numberOfCollapsedBreadcrumbs;
+                    this.breadcrumbShowMoreFocus.focusOnNextTarget();
+                    this.isCollapsed = false;
+                },
+                isCollapsed: this.isCollapsed,
+                i18n: this.bindings.i18n,
+                numberOfCollapsedBreadcrumbs: this.numberOfCollapsedBreadcrumbs,
+                value: this.showMoreText,
+                ariaLabel: this.bindings.i18n.t('show-n-more-filters', {
+                    value: this.showMoreText,
+                }),
+            },
+        })}
+      ${renderBreadcrumbShowLess({
+            props: {
+                onShowLess: () => {
+                    this.breadcrumbShowLessFocus.focusOnNextTarget();
+                    this.isCollapsed = true;
+                },
+                isCollapsed: this.isCollapsed,
+                i18n: this.bindings.i18n,
+            },
+        })}
+      ${renderBreadcrumbClearAll({
+            props: {
+                refCallback: (ref) => {
+                    const isFocusTarget = this.lastRemovedBreadcrumbIndex === this.numberOfBreadcrumbs;
+                    if (isFocusTarget) {
+                        this.breadcrumbRemovedFocus.setTarget(ref);
+                    }
+                },
+                onClick: () => {
+                    this.breadcrumbManager.deselectAll();
+                    this.bindings.store.state.resultList?.focusOnFirstResultAfterNextSearch();
+                },
+                isCollapsed: this.isCollapsed,
+                i18n: this.bindings.i18n,
+            },
+        })} `)}`;
+    }
+};
+AtomicCommerceBreadbox.styles = [unsafeCSS(styles)];
+__decorate([
+    bindStateToController('context'),
+    state()
+], AtomicCommerceBreadbox.prototype, "contextState", void 0);
+__decorate([
+    bindStateToController('breadcrumbManager'),
+    state()
+], AtomicCommerceBreadbox.prototype, "breadcrumbManagerState", void 0);
+__decorate([
+    state()
+], AtomicCommerceBreadbox.prototype, "error", void 0);
+__decorate([
+    state()
+], AtomicCommerceBreadbox.prototype, "isCollapsed", void 0);
+__decorate([
+    state()
+], AtomicCommerceBreadbox.prototype, "showMoreText", void 0);
+__decorate([
+    property({ type: Number, attribute: 'path-limit' })
+], AtomicCommerceBreadbox.prototype, "pathLimit", void 0);
+__decorate([
+    bindingGuard(),
+    errorGuard()
+], AtomicCommerceBreadbox.prototype, "render", null);
+AtomicCommerceBreadbox = __decorate([
+    customElement('atomic-commerce-breadbox'),
+    bindings(),
+    withTailwindStyles
+], AtomicCommerceBreadbox);
+export { AtomicCommerceBreadbox };

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

@@ -0,0 +1,3 @@
+const css = `/*! tailwindcss v4.1.10 | MIT License | https://tailwindcss.com */
+[part=breadcrumb-label].excluded,[part=breadcrumb-value].excluded{color:var(--atomic-error);text-decoration:line-through}[part=breadcrumb-value]:before{content:" "}`;
+export default [css];

package/dist/atomic/components/components/commerce/atomic-commerce-did-you-mean/atomic-commerce-did-you-mean.js

@@ -0,0 +1,100 @@
+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 { bindStateToController } from "../../../decorators/bind-state";
+import { bindingGuard } from "../../../decorators/binding-guard";
+import { bindings } from "../../../decorators/bindings";
+import { errorGuard } from "../../../decorators/error-guard";
+import { withTailwindStyles } from "../../../decorators/with-tailwind-styles";
+import { buildSearch, buildQueryTrigger, } from '@coveo/headless/commerce';
+import { html, LitElement } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { when } from 'lit/directives/when.js';
+import { renderAutoCorrection } from '../../common/query-correction/auto-correction';
+import { renderCorrection } from '../../common/query-correction/correction';
+import { renderTriggerCorrection } from '../../common/query-correction/trigger-correction';
+/**
+ * @alpha
+ *
+ * The `atomic-commerce-did-you-mean` component is responsible for handling query corrections. When a query returns no products but finds a possible query correction, the component either suggests the correction or automatically triggers a new query with the suggested term.
+ *
+ * @part no-results - The text displayed when there are no results.
+ * @part auto-corrected - The text displayed for the automatically corrected query.
+ * @part showing-results-for - The first paragraph of the text displayed when a query trigger changes a query.
+ * @part search-instead-for - The second paragraph of the text displayed when a query trigger changes a query.
+ * @part did-you-mean - The text displayed around the button to manually correct a query.
+ * @part correction-btn - The button used to manually correct a query.
+ * @part undo-btn - The button used to undo a query changed by a query trigger.
+ * @part highlight - The query highlights.
+ */
+let AtomicCommerceDidYouMean = class AtomicCommerceDidYouMean extends LitElement {
+    initialize() {
+        if (this.bindings.interfaceElement.type !== 'search') {
+            this.error = new Error('atomic-commerce-did-you-mean is only usable with an atomic-commerce-interface of type "search"');
+        }
+        this.didYouMean = buildSearch(this.bindings.engine).didYouMean();
+        this.queryTrigger = buildQueryTrigger(this.bindings.engine);
+    }
+    get content() {
+        const { hasQueryCorrection, wasAutomaticallyCorrected } = this.didYouMeanState;
+        const hasTrigger = this.queryTriggerState.wasQueryModified;
+        if (hasQueryCorrection && wasAutomaticallyCorrected) {
+            return renderAutoCorrection({
+                props: {
+                    correctedTo: this.didYouMeanState.wasCorrectedTo,
+                    originalQuery: this.didYouMeanState.originalQuery,
+                    i18n: this.bindings.i18n,
+                },
+            });
+        }
+        if (hasQueryCorrection) {
+            return renderCorrection({
+                props: {
+                    correctedQuery: this.didYouMeanState.queryCorrection.correctedQuery,
+                    i18n: this.bindings.i18n,
+                    //TODO - https://coveord.atlassian.net/browse/KIT-3691 - implement applyCorrection here.
+                    onClick: () => { },
+                },
+            });
+        }
+        if (hasTrigger) {
+            return renderTriggerCorrection({
+                props: {
+                    i18n: this.bindings.i18n,
+                    correctedQuery: this.queryTriggerState.newQuery,
+                    originalQuery: this.queryTriggerState.originalQuery,
+                    onClick: () => this.queryTrigger.undo(),
+                },
+            });
+        }
+    }
+    render() {
+        const hasCorrection = this.didYouMeanState.hasQueryCorrection ||
+            this.queryTriggerState.wasQueryModified;
+        return html `${when(hasCorrection, () => this.content)}`;
+    }
+};
+__decorate([
+    bindStateToController('didYouMean'),
+    state()
+], AtomicCommerceDidYouMean.prototype, "didYouMeanState", void 0);
+__decorate([
+    bindStateToController('queryTrigger'),
+    state()
+], AtomicCommerceDidYouMean.prototype, "queryTriggerState", void 0);
+__decorate([
+    state()
+], AtomicCommerceDidYouMean.prototype, "error", void 0);
+__decorate([
+    bindingGuard(),
+    errorGuard()
+], AtomicCommerceDidYouMean.prototype, "render", null);
+AtomicCommerceDidYouMean = __decorate([
+    customElement('atomic-commerce-did-you-mean'),
+    withTailwindStyles,
+    bindings()
+], AtomicCommerceDidYouMean);
+export { AtomicCommerceDidYouMean };

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

@@ -190,17 +190,6 @@ let AtomicCommerceInterface = class AtomicCommerceInterface extends ChildrenUpda
             i18n: this.i18n,
             store: this.store,
             interfaceElement: this,
-            addAdoptedStyleSheets: (stylesheet) => {
-                // TODO: KIT-4333: remove and only keep decorator
-                const parent = this.getRootNode();
-                const styleSheet = stylesheet;
-                const isDocumentOrShadowRoot = parent instanceof Document || parent instanceof ShadowRoot;
-                if (styleSheet &&
-                    isDocumentOrShadowRoot &&
-                    !parent.adoptedStyleSheets.includes(styleSheet)) {
-                    parent.adoptedStyleSheets.push(styleSheet);
-                }
-            },
         };
     }
     initEngine(options) {

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

@@ -1,4 +1,6 @@
 // Auto-generated file
+export { AtomicCommerceBreadbox } from './atomic-commerce-breadbox/atomic-commerce-breadbox.js';
+export { AtomicCommerceDidYouMean } from './atomic-commerce-did-you-mean/atomic-commerce-did-you-mean.js';
 export { AtomicCommerceInterface } from './atomic-commerce-interface/atomic-commerce-interface.js';
 export { AtomicCommerceLayout } from './atomic-commerce-layout/atomic-commerce-layout.js';
 export { AtomicCommercePager } from './atomic-commerce-pager/atomic-commerce-pager.js';

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

@@ -1,5 +1,7 @@
 // Auto-generated file
 export default {
+    'atomic-commerce-breadbox': async () => await import('./atomic-commerce-breadbox/atomic-commerce-breadbox.js'),
+    'atomic-commerce-did-you-mean': async () => await import('./atomic-commerce-did-you-mean/atomic-commerce-did-you-mean.js'),
     'atomic-commerce-interface': async () => await import('./atomic-commerce-interface/atomic-commerce-interface.js'),
     'atomic-commerce-layout': async () => await import('./atomic-commerce-layout/atomic-commerce-layout.js'),
     'atomic-commerce-pager': async () => await import('./atomic-commerce-pager/atomic-commerce-pager.js'),

package/dist/atomic/components/components/common/breadbox/breadcrumb-button.js

@@ -0,0 +1,29 @@
+import { html } from 'lit';
+import { keyed } from 'lit/directives/keyed.js';
+import { renderButton } from '../button';
+import { joinBreadcrumbValues, getFirstBreadcrumbValue, } from './breadcrumb-utils';
+export const renderBreadcrumbButton = ({ props }) => (children) => {
+    const fullValue = joinBreadcrumbValues(props.breadcrumb);
+    const value = getFirstBreadcrumbValue(props.breadcrumb, props.pathLimit);
+    const title = `${props.breadcrumb.label}: ${fullValue}`;
+    const isExclusion = props.breadcrumb.state === 'excluded';
+    return html `
+      ${keyed(value, html `<li class="breadcrumb">
+          ${renderButton({
+        props: {
+            ref: (el) => props.refCallback(el),
+            part: 'breadcrumb-button',
+            style: isExclusion ? 'outline-error' : 'outline-bg-neutral',
+            class: 'py-2 px-3 flex items-center rounded-xl group',
+            title: title,
+            ariaLabel: props.i18n.t(isExclusion
+                ? 'remove-exclusion-filter-on'
+                : 'remove-inclusion-filter-on', {
+                value: title,
+            }),
+            onClick: props.onSelectBreadcrumb,
+        },
+    })(children)}
+        </li>`)}
+    `;
+};

package/dist/atomic/components/components/common/breadbox/breadcrumb-clear-all.js

@@ -0,0 +1,18 @@
+import { html, nothing } from 'lit';
+import { keyed } from 'lit/directives/keyed.js';
+import { renderButton } from '../button';
+export const renderBreadcrumbClearAll = ({ props }) => {
+    return html `${keyed('clear-all', html ` <li>
+      ${renderButton({
+        props: {
+            ref: (el) => props.refCallback(el),
+            part: 'clear',
+            style: 'text-primary',
+            text: props.i18n.t('clear'),
+            class: 'rounded-xl p-2',
+            ariaLabel: props.i18n.t('clear-all-filters'),
+            onClick: props.onClick,
+        },
+    })(nothing)}
+    </li>`)}`;
+};

package/dist/atomic/components/components/common/breadbox/breadcrumb-container.js

@@ -0,0 +1,21 @@
+import { multiClassMap, tw } from "../../../directives/multi-class-map";
+import { html } from 'lit';
+export const renderBreadcrumbContainer = ({ props }) => (children) => {
+    const listClass = tw({
+        'flex gap-1': true,
+        'absolute w-full flex-nowrap': props.isCollapsed,
+        'flex-wrap': !props.isCollapsed,
+    });
+    return html `<div part="container" class="text-on-background flex text-sm">
+      <span part="label" class="py-2.5 pr-2 pl-0 font-bold">
+        ${props.i18n.t('with-colon', {
+        text: props.i18n.t('filters'),
+    })}
+      </span>
+      <div part="breadcrumb-list-container" class="relative grow">
+        <ul part="breadcrumb-list" class=${multiClassMap(listClass)}>
+          ${children}
+        </ul>
+      </div>
+    </div>`;
+};