@coveo/atomic 3.33.1-pre.b2baa07fae → 3.33.1-pre.b42fb2eaa5

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

@@ -1 +1 @@
-{"file":"atomic-stencil-facet-date-input.js","mappings":"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","names":[],"sources":["src/components/common/facets/stencil-facet-date-input/stencil-facet-date-input.tsx"],"sourcesContent":["import {\n  buildDateRange,\n  DateFilterRange,\n  DateRangeRequest,\n} from '@coveo/headless';\nimport {Component, h, State, Prop, Event, EventEmitter} from '@stencil/core';\nimport {parseDate} from '../../../../utils/date-utils';\nimport {Button} from '../../../common/stencil-button';\nimport {AnyBindings} from '../../interface/bindings';\n\n/**\n * @deprecated\n * Use `atomic-facet-date-input` instead. This component is meant to be used with Stencil components only.\n * Internal component made to be integrated in a TimeframeFacet.\n * @internal\n */\n@Component({\n  tag: 'atomic-stencil-facet-date-input',\n  shadow: false,\n})\nexport class FacetDateInput {\n  @State() private start?: Date;\n  @State() private end?: Date;\n  private startRef!: HTMLInputElement;\n  private endRef!: HTMLInputElement;\n\n  @Prop() public bindings!: AnyBindings;\n  @Prop() public rangeGetter!: () => DateFilterRange | undefined;\n  @Prop() public rangeSetter!: (range: DateRangeRequest) => void;\n  @Prop() public facetId!: string;\n  @Prop() public label!: string;\n  @Prop() public min?: string;\n  @Prop() public max?: string;\n\n  @Event({\n    eventName: 'atomic/dateInputApply',\n  })\n  private applyInput!: EventEmitter;\n\n  public connectedCallback() {\n    const range = this.rangeGetter();\n    this.start = range ? parseDate(range.start).toDate() : undefined;\n    this.end = range ? parseDate(range.end).toDate() : undefined;\n  }\n  public componentDidUpdate() {\n    if (!this.startRef.value && !this.endRef.value) {\n      this.startRef.min = this.min || this.formattedDateValue('1401-01-01');\n      this.endRef.max = this.max || '';\n      this.startRef.max = this.max || '';\n      this.endRef.min = this.min || '';\n    }\n  }\n\n  private apply() {\n    if (!this.startRef.validity.valid || !this.endRef.validity.valid) {\n      return;\n    }\n\n    this.applyInput.emit({\n      start: this.start,\n      end: this.end,\n    });\n\n    const rangeRequest = buildDateRange({\n      start: this.start!,\n      end: this.end!.setHours(23, 59, 59, 999),\n    });\n\n    this.rangeSetter(rangeRequest);\n  }\n\n  private formattedDateValue(date?: string | Date) {\n    if (!date) {\n      return '';\n    }\n    return parseDate(date).format('YYYY-MM-DD');\n  }\n\n  render() {\n    const label = this.bindings.i18n.t(this.label);\n    const startLabel = this.bindings.i18n.t('start');\n    const endLabel = this.bindings.i18n.t('end');\n    const startAria = this.bindings.i18n.t('date-input-start', {label});\n    const endAria = this.bindings.i18n.t('date-input-end', {label});\n    const apply = this.bindings.i18n.t('apply');\n    const applyAria = this.bindings.i18n.t('date-input-apply', {label});\n\n    const inputClasses = 'input-primary p-2.5';\n    const labelClasses = 'text-neutral-dark self-center';\n\n    const placeholder = 'yyyy-mm-dd';\n    // Fallback for Safari < 14.1, date with format yyyy-mm-dd over 1400 (API limit)\n    const pattern =\n      '^(1[4-9]\\\\d{2}|2\\\\d{3})-(0[1-9]|1[0-2])-(0[1-9]|[12]\\\\d|3[01])$';\n\n    const range = this.rangeGetter();\n\n    return (\n      <form\n        class=\"mt-4 grid grid-cols-[min-content_1fr] gap-2 px-2\"\n        onSubmit={(e) => {\n          e.preventDefault();\n          this.apply();\n          return false;\n        }}\n      >\n        <label\n          part=\"input-label\"\n          class={labelClasses}\n          htmlFor={`${this.facetId}_start`}\n        >\n          {startLabel}:\n        </label>\n        <input\n          id={`${this.facetId}_start`}\n          part=\"input-start\"\n          type=\"date\"\n          ref={(ref) => (this.startRef = ref!)}\n          class={inputClasses}\n          aria-label={startAria}\n          placeholder={placeholder}\n          pattern={pattern}\n          required\n          // API/Index minimum supported date\n          min={this.min || this.formattedDateValue('1401-01-01')}\n          max={this.end ? this.formattedDateValue(this.end) : this.max}\n          value={this.formattedDateValue(range?.start)}\n          onInput={(e) =>\n            (this.start = parseDate(\n              (e.target as HTMLInputElement).value\n            ).toDate())\n          }\n        />\n        <label\n          part=\"input-label\"\n          class={labelClasses}\n          htmlFor={`${this.facetId}_end`}\n        >\n          {endLabel}:\n        </label>\n        <input\n          id={`${this.facetId}_end`}\n          part=\"input-end\"\n          type=\"date\"\n          ref={(ref) => (this.endRef = ref!)}\n          class={inputClasses}\n          aria-label={endAria}\n          placeholder={placeholder}\n          pattern={pattern}\n          required\n          min={this.formattedDateValue(this.start) || this.min}\n          max={this.max}\n          value={this.formattedDateValue(range?.end)}\n          onInput={(e) =>\n            (this.end = parseDate(\n              (e.target as HTMLInputElement).value\n            ).toDate())\n          }\n        />\n        <Button\n          style=\"outline-primary\"\n          type=\"submit\"\n          part=\"input-apply-button\"\n          class=\"col-span-2 truncate p-2.5\"\n          ariaLabel={applyAria}\n          text={apply}\n        ></Button>\n      </form>\n    );\n  }\n}\n"],"version":3}
+{"file":"atomic-stencil-facet-date-input.js","mappings":"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","names":[],"sources":["src/components/common/facets/stencil-facet-date-input/stencil-facet-date-input.tsx"],"sourcesContent":["import {\n  buildDateRange,\n  DateFilterRange,\n  DateRangeRequest,\n} from '@coveo/headless';\nimport {Component, h, State, Prop, Event, EventEmitter} from '@stencil/core';\nimport {parseDate} from '../../../../utils/date-utils';\nimport {Button} from '../../../common/stencil-button';\nimport {AnyBindings} from '../../interface/bindings';\n\n/**\n * @deprecated\n * Use `atomic-facet-date-input` instead. This component is meant to be used with Stencil components only.\n * Internal component made to be integrated in a TimeframeFacet.\n * @internal\n */\n@Component({\n  tag: 'atomic-stencil-facet-date-input',\n  shadow: false,\n})\nexport class FacetDateInput {\n  @State() private start?: Date;\n  @State() private end?: Date;\n  private startRef!: HTMLInputElement;\n  private endRef!: HTMLInputElement;\n\n  @Prop() public bindings!: AnyBindings;\n  @Prop() public rangeGetter!: () => DateFilterRange | undefined;\n  @Prop() public rangeSetter!: (range: DateRangeRequest) => void;\n  @Prop() public facetId!: string;\n  @Prop() public label!: string;\n  @Prop() public min?: string;\n  @Prop() public max?: string = '9999-12-31';\n\n  @Event({\n    eventName: 'atomic/dateInputApply',\n  })\n  private applyInput!: EventEmitter;\n\n  public connectedCallback() {\n    const range = this.rangeGetter();\n    this.start = range ? parseDate(range.start).toDate() : undefined;\n    this.end = range ? parseDate(range.end).toDate() : undefined;\n  }\n  public componentDidUpdate() {\n    if (!this.startRef.value && !this.endRef.value) {\n      this.startRef.min = this.min || this.formattedDateValue('1401-01-01');\n      this.endRef.max = this.max || '';\n      this.startRef.max = this.max || '';\n      this.endRef.min = this.min || '';\n    }\n  }\n\n  private apply() {\n    if (!this.startRef.validity.valid || !this.endRef.validity.valid) {\n      return;\n    }\n\n    this.applyInput.emit({\n      start: this.start,\n      end: this.end,\n    });\n\n    const rangeRequest = buildDateRange({\n      start: this.start!,\n      end: this.end!.setHours(23, 59, 59, 999),\n    });\n\n    this.rangeSetter(rangeRequest);\n  }\n\n  private formattedDateValue(date?: string | Date) {\n    if (!date) {\n      return '';\n    }\n    return parseDate(date).format('YYYY-MM-DD');\n  }\n\n  render() {\n    const label = this.bindings.i18n.t(this.label);\n    const startLabel = this.bindings.i18n.t('start');\n    const endLabel = this.bindings.i18n.t('end');\n    const startAria = this.bindings.i18n.t('date-input-start', {label});\n    const endAria = this.bindings.i18n.t('date-input-end', {label});\n    const apply = this.bindings.i18n.t('apply');\n    const applyAria = this.bindings.i18n.t('date-input-apply', {label});\n\n    const inputClasses = 'input-primary p-2.5';\n    const labelClasses = 'text-neutral-dark self-center';\n\n    const placeholder = 'yyyy-mm-dd';\n    // Fallback for Safari < 14.1, date with format yyyy-mm-dd over 1400 (API limit)\n    const pattern =\n      '^(1[4-9]\\\\d{2}|2\\\\d{3})-(0[1-9]|1[0-2])-(0[1-9]|[12]\\\\d|3[01])$';\n\n    const range = this.rangeGetter();\n\n    return (\n      <form\n        class=\"mt-4 grid grid-cols-[min-content_1fr] gap-2 px-2\"\n        onSubmit={(e) => {\n          e.preventDefault();\n          this.apply();\n          return false;\n        }}\n      >\n        <label\n          part=\"input-label\"\n          class={labelClasses}\n          htmlFor={`${this.facetId}_start`}\n        >\n          {startLabel}:\n        </label>\n        <input\n          id={`${this.facetId}_start`}\n          part=\"input-start\"\n          type=\"date\"\n          ref={(ref) => (this.startRef = ref!)}\n          class={inputClasses}\n          aria-label={startAria}\n          placeholder={placeholder}\n          pattern={pattern}\n          required\n          // API/Index minimum supported date\n          min={this.min || this.formattedDateValue('1401-01-01')}\n          max={this.end ? this.formattedDateValue(this.end) : this.max}\n          value={this.formattedDateValue(range?.start)}\n          onInput={(e) =>\n            (this.start = parseDate(\n              (e.target as HTMLInputElement).value\n            ).toDate())\n          }\n        />\n        <label\n          part=\"input-label\"\n          class={labelClasses}\n          htmlFor={`${this.facetId}_end`}\n        >\n          {endLabel}:\n        </label>\n        <input\n          id={`${this.facetId}_end`}\n          part=\"input-end\"\n          type=\"date\"\n          ref={(ref) => (this.endRef = ref!)}\n          class={inputClasses}\n          aria-label={endAria}\n          placeholder={placeholder}\n          pattern={pattern}\n          required\n          min={this.formattedDateValue(this.start) || this.min}\n          max={this.max}\n          value={this.formattedDateValue(range?.end)}\n          onInput={(e) =>\n            (this.end = parseDate(\n              (e.target as HTMLInputElement).value\n            ).toDate())\n          }\n        />\n        <Button\n          style=\"outline-primary\"\n          type=\"submit\"\n          part=\"input-apply-button\"\n          class=\"col-span-2 truncate p-2.5\"\n          ariaLabel={applyAria}\n          text={apply}\n        ></Button>\n      </form>\n    );\n  }\n}\n"],"version":3}

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

@@ -205,7 +205,7 @@ let AtomicCommerceBreadbox = class AtomicCommerceBreadbox extends LitElement {
         return breadcrumb.values.map((value) => {
             return {
                 facetId: breadcrumb.facetId,
-                label: breadcrumb.facetDisplayName,
+                label: breadcrumb.facetDisplayName ?? this.bindings.i18n.t('no-label'),
                 deselect: value.deselect,
                 formattedValue: this.valueForFacetType(breadcrumb.type, breadcrumb.facetId, value),
             };

package/dist/atomic/components/components/commerce/atomic-commerce-category-facet/atomic-commerce-category-facet.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { html, LitElement, nothing } from 'lit';
+import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { map } from 'lit/directives/map.js';
 import { when } from 'lit/directives/when.js';
@@ -33,7 +33,8 @@ import { renderCategoryFacetSearchResultsContainer } from '../../common/facets/c
 import { renderCategoryFacetSearchValue } from '../../common/facets/category-facet/search-value';
 import { renderCategoryFacetTreeValueContainer } from '../../common/facets/category-facet/value-as-tree-container';
 import { renderCategoryFacetValueLink } from '../../common/facets/category-facet/value-link';
-import styles from './atomic-commerce-category-facet.tw.css';
+import facetCommonStyles from '../../common/facets/facet-common.tw.css';
+import facetSearchStyles from '../../common/facets/facet-search/facet-search.tw.css';
 /**
  * A facet is a list of values for a certain field occurring in the results, ordered using a configurable criteria (e.g., number of occurrences).
  * An `atomic-commerce-category-facet` displays a facet of values in a browsable, hierarchical fashion.
@@ -328,6 +329,7 @@ let AtomicCommerceCategoryFacet = class AtomicCommerceCategoryFacet extends LitE
                 query: this.facetState.facetSearch.query,
                 numberOfMatches: this.facetState.facetSearch.values.length,
                 hasMoreMatches: this.facetState.facetSearch.moreValuesAvailable,
+                showMoreMatches: () => this.facet.facetSearch.showMoreResults(),
             },
         })}
             `, () => html `
@@ -365,7 +367,12 @@ let AtomicCommerceCategoryFacet = class AtomicCommerceCategoryFacet extends LitE
         }
     }
 };
-AtomicCommerceCategoryFacet.styles = styles;
+AtomicCommerceCategoryFacet.styles = [
+    facetCommonStyles,
+    facetSearchStyles,
+    css`/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+[part~=active-parent],[part~=parents] [part~=values]{padding-left:calc(var(--spacing,.25rem)*9)}[part~=all-categories-button],[part~=parent-button]{width:100%;padding-block:calc(var(--spacing,.25rem)*2.5);padding-right:calc(var(--spacing,.25rem)*2);padding-left:calc(var(--spacing,.25rem)*7);text-align:left;align-items:center;display:flex;position:relative}[part~=back-arrow]{left:calc(var(--spacing,.25rem)*1);height:calc(var(--spacing,.25rem)*5);width:calc(var(--spacing,.25rem)*5);position:absolute}`,
+];
 __decorate([
     state()
 ], AtomicCommerceCategoryFacet.prototype, "bindings", void 0);

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

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { css, html, LitElement, nothing } from 'lit';
+import { html, LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { when } from 'lit/directives/when.js';
 import { renderFacetContainer } from "../../common/facets/facet-container/facet-container";
@@ -22,8 +22,13 @@ import { bindings } from "../../../decorators/bindings";
 import { errorGuard } from "../../../decorators/error-guard";
 import { withTailwindStyles } from "../../../decorators/with-tailwind-styles";
 import { AriaLiveRegionController, FocusTargetController, } from "../../../utils/accessibility-utils";
+import facetCommonStyles from '../../common/facets/facet-common.tw.css';
+import facetSearchStyles from '../../common/facets/facet-search/facet-search.tw.css';
 import { announceFacetSearchResultsWithAriaLive } from '../../common/facets/facet-search/facet-search-aria-live';
 import { shouldDisplaySearchResults, shouldUpdateFacetSearchComponent, } from '../../common/facets/facet-search/facet-search-utils';
+import facetValueBoxStyles from '../../common/facets/facet-value-box/facet-value-box.tw.css';
+import facetValueCheckboxStyles from '../../common/facets/facet-value-checkbox/facet-value-checkbox.tw.css';
+import facetValueExcludeStyles from '../../common/facets/facet-value-exclude/facet-value-exclude.tw.css';
 /**
  * The `atomic-commerce-facet` component renders a commerce facet that the end user can interact with to filter products.
  *
@@ -208,6 +213,7 @@ let AtomicCommerceFacet = class AtomicCommerceFacet extends LitElement {
                 query: this.facetState.facetSearch.query,
                 numberOfMatches: this.facetState.facetSearch.values.length,
                 hasMoreMatches: this.facetState.facetSearch.moreValuesAvailable,
+                showMoreMatches: () => this.facet.facetSearch.showMoreResults(),
             },
         });
     }
@@ -279,8 +285,13 @@ let AtomicCommerceFacet = class AtomicCommerceFacet extends LitElement {
         }
     }
 };
-AtomicCommerceFacet.styles = css`/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}.value-checkbox{width:var(--atomic-facet-checkbox-size,1rem);height:var(--atomic-facet-checkbox-size,1rem);left:calc(var(--spacing,.25rem)*2);z-index:1;position:absolute}.value-checkbox+label{cursor:pointer;text-overflow:ellipsis;white-space:nowrap;width:100%;padding-block:calc(var(--spacing,.25rem)*2.5);padding-right:calc(var(--spacing,.25rem)*2);padding-left:calc(var(--spacing,.25rem)*8);color:var(--atomic-on-background);flex-direction:row;display:flex;overflow:hidden;&:hover{@media (hover:hover){&{background-color:var(--atomic-neutral-light)}}}}.value-checkbox.selected:focus-visible+label .value-label,.value-checkbox.selected:hover+label .value-label{color:var(--atomic-primary)}.value-checkbox.excluded:focus-visible+label .value-label,.value-checkbox.excluded:hover+label .value-label{color:var(--atomic-error)}input[type=text]:focus-visible~.search-icon{color:var(--atomic-primary)}input[type=text]:hover~.search-icon{color:var(--atomic-primary-light)}.search-icon atomic-icon{width:var(--atomic-facet-search-icon-size,.75rem);height:var(--atomic-facet-search-icon-size,.75rem)}.search-clear-button atomic-icon{width:var(--atomic-facet-search-clear-icon-size,.625rem);height:var(--atomic-facet-search-clear-icon-size,.625rem)}.value-count{margin-left:calc(var(--spacing,.25rem)*1.5);color:var(--atomic-neutral-dark);[part=value-exclude-button]+&{margin-right:calc(var(--spacing,.25rem)*2)}}:host(.popover-nested){min-width:var(--container-2xs,18rem);&::part(label-button){display:none}&::part(facet){--tw-shadow:0px 2px 8px var(--tw-shadow-color,#e5e8e8bf);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}&::part(values){margin-top:calc(var(--spacing,.25rem)*0);max-height:calc(var(--spacing,.25rem)*96);overflow-y:auto}&::part(search-wrapper){margin-bottom:calc(var(--spacing,.25rem)*2)}}.value-exclude-button:focus-visible atomic-icon{visibility:visible}.box-container{padding-inline:calc(var(--spacing,.25rem)*2);grid-template-columns:repeat(var(--atomic-facet-boxes-per-row,4),minmax(0,1fr));gap:var(--atomic-facet-boxes-gap,.5rem);display:grid}.value-box .value-label,.value-box-count{width:100%;display:block}.value-box.selected{box-shadow:0 0 0 1px var(--atomic-primary)}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}`;
+AtomicCommerceFacet.styles = [
+    facetValueCheckboxStyles,
+    facetSearchStyles,
+    facetCommonStyles,
+    facetValueExcludeStyles,
+    facetValueBoxStyles,
+];
 __decorate([
     property({ type: Object })
 ], AtomicCommerceFacet.prototype, "summary", void 0);

package/dist/atomic/components/components/commerce/atomic-commerce-facet-number-input/atomic-commerce-facet-number-input.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { isUndefined } from '@coveo/bueno';
-import { html, LitElement } from 'lit';
+import { css, html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { ref } from 'lit/directives/ref.js';
 import { bindingGuard } from "../../../decorators/binding-guard";
@@ -13,7 +13,6 @@ import { bindings } from "../../../decorators/bindings";
 import { errorGuard } from "../../../decorators/error-guard";
 import { injectStylesForNoShadowDOM } from "../../../decorators/inject-styles-for-no-shadow-dom";
 import { withTailwindStyles } from "../../../decorators/with-tailwind-styles";
-import styles from './atomic-commerce-facet-number-input.tw.css';
 /**
  * Internal component made to be integrated in a NumericFacet.
  * @internal
@@ -131,7 +130,7 @@ let AtomicCommerceFacetNumberInput = class AtomicCommerceFacetNumberInput extend
     `;
     }
 };
-AtomicCommerceFacetNumberInput.styles = styles;
+AtomicCommerceFacetNumberInput.styles = css`[part=input-form]{grid-template-columns:1fr 1fr auto;grid-template-areas:"label-start label-end.""input-start input-end apply-button";display:grid}[part=label-start]{grid-area:label-start}[part=label-end]{grid-area:label-end}[part=input-start]{grid-area:input-start}[part=input-end]{grid-area:input-end}[part=input-apply-button]{grid-area:apply-button}`;
 __decorate([
     state()
 ], AtomicCommerceFacetNumberInput.prototype, "bindings", void 0);

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

@@ -48,8 +48,13 @@ let AtomicCommerceInterface = class AtomicCommerceInterface extends ChildrenUpda
         this.analytics = true;
         /**
          * Whether the state should be reflected in the URL parameters.
+         * @deprecated - replaced by `disable-state-reflection-in-url` (this defaults to `true`, while the replacement defaults to `false`).
          */
         this.reflectStateInUrl = true;
+        /**
+         * Disable state reflection in the URL parameters.
+         */
+        this.disableStateReflectionInUrl = false;
         /**
          * The CSS selector for the container where the interface will scroll back to.
          */
@@ -223,6 +228,9 @@ let AtomicCommerceInterface = class AtomicCommerceInterface extends ChildrenUpda
         return window.location.hash.slice(1);
     }
     initUrlManager() {
+        if (this.disableStateReflectionInUrl) {
+            return;
+        }
         if (!this.reflectStateInUrl) {
             return;
         }
@@ -311,6 +319,13 @@ __decorate([
         converter: booleanConverter,
     })
 ], AtomicCommerceInterface.prototype, "reflectStateInUrl", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        attribute: 'disable-state-reflection-in-url',
+        reflect: true,
+    })
+], AtomicCommerceInterface.prototype, "disableStateReflectionInUrl", void 0);
 __decorate([
     property({ type: String, attribute: 'scroll-container', reflect: true })
 ], AtomicCommerceInterface.prototype, "scrollContainer", void 0);

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

@@ -4,33 +4,40 @@ 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 { html, LitElement } from 'lit';
+var AtomicCommerceLayout_1;
+import { html, LitElement, unsafeCSS } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { errorGuard } from "../../../decorators/error-guard";
-import { CommerceLayoutMixin } from "../../../mixins/commerce-layout-mixin";
+import { injectStylesForNoShadowDOM } from "../../../decorators/inject-styles-for-no-shadow-dom";
+import { randomID } from "../../../utils/utils";
 import { DEFAULT_MOBILE_BREAKPOINT } from '../../../utils/replace-breakpoint';
 import styles from './atomic-commerce-layout.tw.css';
+import { buildCommerceLayout } from './commerce-layout';
 /**
  * The `atomic-commerce-layout` helps organize elements in the commerce page.
  *
  * @slot default - The default slot where you can add child components to the layout.
  */
-let AtomicCommerceLayout = class AtomicCommerceLayout extends CommerceLayoutMixin(LitElement, styles) {
+let AtomicCommerceLayout = AtomicCommerceLayout_1 = class AtomicCommerceLayout extends LitElement {
     constructor() {
-        super(...arguments);
+        super();
         /**
          * CSS value that defines where the layout goes from mobile to desktop.
          * e.g., 800px, 65rem.
          */
         this.mobileBreakpoint = DEFAULT_MOBILE_BREAKPOINT;
+        this.id = randomID('atomic-commerce-layout-');
     }
-    createRenderRoot() {
-        return this;
+    connectedCallback() {
+        super.connectedCallback();
+        const layout = unsafeCSS(buildCommerceLayout(this, this.mobileBreakpoint));
+        AtomicCommerceLayout_1.styles.unshift(layout);
     }
     render() {
         return html `<slot></slot>`;
     }
 };
+AtomicCommerceLayout.styles = [styles];
 __decorate([
     state()
 ], AtomicCommerceLayout.prototype, "error", void 0);
@@ -40,7 +47,8 @@ __decorate([
 __decorate([
     errorGuard()
 ], AtomicCommerceLayout.prototype, "render", null);
-AtomicCommerceLayout = __decorate([
-    customElement('atomic-commerce-layout')
+AtomicCommerceLayout = AtomicCommerceLayout_1 = __decorate([
+    customElement('atomic-commerce-layout'),
+    injectStylesForNoShadowDOM
 ], AtomicCommerceLayout);
 export { AtomicCommerceLayout };

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

@@ -1,4 +1,4 @@
-import { buildSearchLayoutCommon } from '../../common/atomic-layout-section/search-layout';
+import { buildCommonLayout } from '../../common/atomic-layout-section/layout';
 export const layoutWebComponentTagName = 'atomic-commerce-layout';
 export const containerWebComponentTagName = 'atomic-commerce-interface';
 export const noProductsSelector = `${containerWebComponentTagName}-no-results`;
@@ -8,5 +8,5 @@ export function makeDesktopQuery(mobileBreakpoint) {
     return `only screen and (min-width: ${mobileBreakpoint})`;
 }
 export function buildCommerceLayout(element, mobileBreakpoint) {
-    return buildSearchLayoutCommon(element, mobileBreakpoint, layoutWebComponentTagName, containerWebComponentTagName, noProductsSelector, errorSelector, 'atomic-commerce-refine-toggle', 'atomic-commerce-sort-dropdown');
+    return buildCommonLayout(element, mobileBreakpoint, layoutWebComponentTagName, containerWebComponentTagName, noProductsSelector, errorSelector, 'atomic-commerce-refine-toggle', 'atomic-commerce-sort-dropdown');
 }

package/dist/atomic/components/components/commerce/atomic-commerce-numeric-facet/atomic-commerce-numeric-facet.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { buildContext, } from '@coveo/headless/commerce';
-import { css, html, LitElement } from 'lit';
+import { html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { when } from 'lit/directives/when.js';
 import { renderNumericFacetValuesGroup } from "../../common/facets/numeric-facet/values-container";
@@ -22,6 +22,7 @@ import { renderNumericFacetValue } from '../../common/facets/numeric-facet/value
 import { defaultCurrencyFormatter, defaultNumberFormatter, } from '../../common/formats/format-common';
 import '../atomic-commerce-facet-number-input/atomic-commerce-facet-number-input';
 import { bindings } from "../../../decorators/bindings";
+import numericFacetCommonStyles from '../../common/facets/numeric-facet-common.tw.css';
 /**
  * The `atomic-commerce-numeric-facet` component renders a commerce facet that allows the user to filter products using numeric ranges.
  *
@@ -86,7 +87,7 @@ let AtomicCommerceNumericFacet = class AtomicCommerceNumericFacet extends LitEle
             0);
     }
     get hasInputRange() {
-        return !!this.facetState.manualRange || this.summaryState.isLoading;
+        return !!this.facetState.manualRange;
     }
     get shouldRenderValues() {
         return !this.hasInputRange && !!this.valuesToRender.length;
@@ -182,8 +183,7 @@ let AtomicCommerceNumericFacet = class AtomicCommerceNumericFacet extends LitEle
         }
     }
 };
-AtomicCommerceNumericFacet.styles = css`/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}.value-checkbox{width:var(--atomic-facet-checkbox-size,1rem);height:var(--atomic-facet-checkbox-size,1rem);left:calc(var(--spacing,.25rem)*2);z-index:1;position:absolute}.value-checkbox+label{cursor:pointer;text-overflow:ellipsis;white-space:nowrap;width:100%;padding-block:calc(var(--spacing,.25rem)*2.5);padding-right:calc(var(--spacing,.25rem)*2);padding-left:calc(var(--spacing,.25rem)*8);color:var(--atomic-on-background);flex-direction:row;display:flex;overflow:hidden;&:hover{@media (hover:hover){&{background-color:var(--atomic-neutral-light)}}}}.value-checkbox.selected:focus-visible+label .value-label,.value-checkbox.selected:hover+label .value-label{color:var(--atomic-primary)}.value-checkbox.excluded:focus-visible+label .value-label,.value-checkbox.excluded:hover+label .value-label{color:var(--atomic-error)}.value-exclude-button:focus-visible atomic-icon{visibility:visible}.value-count{margin-left:calc(var(--spacing,.25rem)*1.5);color:var(--atomic-neutral-dark);[part=value-exclude-button]+&{margin-right:calc(var(--spacing,.25rem)*2)}}:host(.popover-nested){min-width:var(--container-2xs,18rem);&::part(label-button){display:none}&::part(facet){--tw-shadow:0px 2px 8px var(--tw-shadow-color,#e5e8e8bf);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}&::part(values){margin-top:calc(var(--spacing,.25rem)*0);max-height:calc(var(--spacing,.25rem)*96);overflow-y:auto}&::part(search-wrapper){margin-bottom:calc(var(--spacing,.25rem)*2)}}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}`;
+AtomicCommerceNumericFacet.styles = numericFacetCommonStyles;
 __decorate([
     property({ type: Object })
 ], AtomicCommerceNumericFacet.prototype, "summary", void 0);

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

@@ -8,6 +8,7 @@ import { NumberValue, Schema } from '@coveo/bueno';
 import { buildProductListing, buildSearch, } from '@coveo/headless/commerce';
 import { html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
+import { when } from 'lit/directives/when.js';
 import { bindStateToController } from "../../../decorators/bind-state";
 import { bindingGuard } from "../../../decorators/binding-guard";
 import { bindings } from "../../../decorators/bindings";
@@ -18,7 +19,6 @@ const ArrowLeftIcon = "<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000
 const ArrowRightIcon = "<svg viewBox=\"0 0 20 20\"><path d=\"m8.5 15.2 4.3-4.6c.3-.4.3-.9 0-1.3l-4.4-4.5c-.3-.4-.9-.4-1.2 0s-.3.9 0 1.3l3.7 4-3.7 3.9c-.3.4-.3.9 0 1.3.4.3 1 .3 1.3-.1z\"/></svg>";
 import { createAppLoadedListener } from '../../common/interface/store';
 import { renderPageButtons, renderPagerNextButton, renderPagerPageButton, renderPagerPreviousButton, } from '../../common/pager/pager-buttons';
-import { renderPagerGuard } from '../../common/pager/pager-guard';
 import { renderPagerNavigation } from '../../common/pager/pager-navigation';
 import { getCurrentPagesRange } from './commerce-pager-utils';
 /**
@@ -83,12 +83,7 @@ let AtomicCommercePager = class AtomicCommercePager extends LitElement {
     }
     render() {
         const pagesRange = getCurrentPagesRange(this.pagerState.page, this.numberOfPages, this.pagerState.totalPages - 1);
-        return html `${renderPagerGuard({
-            props: {
-                hasItems: this.pagerState.totalPages > 1,
-                isAppLoaded: this.isAppLoaded,
-            },
-        })(html `${renderPagerNavigation({
+        return html `${when(this.pagerState.totalPages > 1 && this.isAppLoaded, () => html `${renderPagerNavigation({
             props: {
                 i18n: this.bindings.i18n,
             },

package/dist/atomic/components/components/commerce/atomic-commerce-products-per-page/atomic-commerce-products-per-page.js

@@ -7,12 +7,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { buildProductListing, buildSearch, } from '@coveo/headless/commerce';
 import { html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
+import { when } from 'lit/directives/when.js';
 import { renderFieldsetGroup } from "../../common/fieldset-group.js";
 import { createAppLoadedListener } from "../../common/interface/store.js";
 import { renderChoices } from "../../common/items-per-page/choices.js";
 import { renderLabel } from "../../common/items-per-page/label.js";
 import { convertChoicesToNumbers, validateInitialChoice, } from "../../common/items-per-page/validate.js";
-import { renderPagerGuard } from "../../common/pager/pager-guard.js";
 import { bindStateToController } from "../../../decorators/bind-state.js";
 import { bindingGuard } from "../../../decorators/binding-guard";
 import { bindings } from "../../../decorators/bindings.js";
@@ -61,16 +61,12 @@ let AtomicCommerceProductsPerPage = class AtomicCommerceProductsPerPage extends
     }
     render() {
         return html `
-      ${renderPagerGuard({
-            props: {
-                hasError: this.summaryState.hasError,
-                hasItems: this.summaryState.hasProducts,
-                isAppLoaded: this.isAppLoaded,
-            },
-        })(html `
-        <div class="flex items-center">
-          ${renderLabel()(html `${this.label}`)}
-          ${renderFieldsetGroup({
+      ${when(!this.summaryState.hasError &&
+            this.summaryState.hasProducts &&
+            this.isAppLoaded, () => html `
+          <div class="flex items-center">
+            ${renderLabel()(html `${this.label}`)}
+            ${renderFieldsetGroup({
             props: {
                 label: this.label,
             },
@@ -87,8 +83,8 @@ let AtomicCommerceProductsPerPage = class AtomicCommerceProductsPerPage extends
                 focusOnNextNewResult: () => this.bindings.store.state.resultList?.focusOnNextNewResult(),
             },
         }))}
-        </div>
-      `)}
+          </div>
+        `)}
     `;
     }
 };

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

@@ -55,12 +55,6 @@ let AtomicCommerceRecommendationList = class AtomicCommerceRecommendationList ex
         this.templateHasError = false;
         this.isEveryProductReady = false;
         this.currentPage = 0;
-        /**
-         * The identifier used by the Commerce API to retrieve the desired recommendation list for the component.
-         * You can configure recommendation lists and get their respective slot IDs through the Coveo Merchandising Hub (CMH).
-         * You can include multiple `atomic-commerce-recommendation-list` components with different slot IDs in the same page to display several recommendation lists.
-         */
-        this.slotId = 'Recommendation';
         /**
          * The layout to apply when displaying the products. This does not affect the display of the surrounding list itself.
          * To modify the number of products per column, modify the `--atomic-recs-number-of-columns` CSS variable.
@@ -165,11 +159,13 @@ let AtomicCommerceRecommendationList = class AtomicCommerceRecommendationList ex
                 constrainTo: ['small', 'large', 'icon', 'none'],
             }),
             productsPerPage: new NumberValue({ min: 0 }),
+            slotId: new StringValue({ emptyAllowed: false }),
         }).validate({
             density: this.density,
             display: this.display,
             imageSize: this.imageSize,
             productsPerPage: this.productsPerPage,
+            slotId: this.slotId,
         });
     }
     validateSlotID() {

package/dist/atomic/components/components/commerce/atomic-commerce-timeframe-facet/atomic-commerce-timeframe-facet.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { deserializeRelativeDate, } from '@coveo/headless/commerce';
-import { css, html, LitElement } from 'lit';
+import { html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { when } from 'lit/directives/when.js';
 import { renderFacetContainer } from "../../common/facets/facet-container/facet-container";
@@ -23,6 +23,7 @@ import { parseDate } from "../../../utils/date-utils";
 import '../../common/atomic-facet-date-input/atomic-facet-date-input';
 import { bindings } from "../../../decorators/bindings";
 import { shouldDisplayInputForFacetRange } from '../../common/facets/facet-common';
+import facetCommonStyles from '../../common/facets/facet-common.tw.css';
 /**
  * A facet is a list of values for a certain field occurring in the results.
  * An `atomic-commerce-timeframe-facet` displays a facet of the results for the current query as date intervals.
@@ -216,8 +217,7 @@ let AtomicCommerceTimeframeFacet = class AtomicCommerceTimeframeFacet extends Li
         }
     }
 };
-AtomicCommerceTimeframeFacet.styles = css`/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}.value-count{margin-left:calc(var(--spacing,.25rem)*1.5);color:var(--atomic-neutral-dark);[part=value-exclude-button]+&{margin-right:calc(var(--spacing,.25rem)*2)}}:host(.popover-nested){min-width:var(--container-2xs,18rem);&::part(label-button){display:none}&::part(facet){--tw-shadow:0px 2px 8px var(--tw-shadow-color,#e5e8e8bf);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}&::part(values){margin-top:calc(var(--spacing,.25rem)*0);max-height:calc(var(--spacing,.25rem)*96);overflow-y:auto}&::part(search-wrapper){margin-bottom:calc(var(--spacing,.25rem)*2)}}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}`;
+AtomicCommerceTimeframeFacet.styles = facetCommonStyles;
 __decorate([
     property({ type: Object })
 ], AtomicCommerceTimeframeFacet.prototype, "summary", void 0);

package/dist/atomic/components/components/commerce/atomic-product-description/atomic-product-description.js

@@ -34,6 +34,7 @@ let AtomicProductDescription = class AtomicProductDescription extends LitElement
         this.descriptionRef = createRef();
         /**
          * The number of lines after which the product description should be truncated. A value of "none" will disable truncation.
+         * @default '2'
          */
         this.truncateAfter = '2';
         /**

package/dist/atomic/components/components/commerce/atomic-product-price/atomic-product-price.js

@@ -14,7 +14,6 @@ import { createProductContextController } from "../../../decorators/commerce/pro
 import { errorGuard } from "../../../decorators/error-guard.js";
 import { injectStylesForNoShadowDOM } from "../../../decorators/inject-styles-for-no-shadow-dom.js";
 import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js";
-import { displayIf } from "../../../directives/display-if.js";
 import { multiClassMap, tw } from "../../../directives/multi-class-map.js";
 import { defaultCurrencyFormatter } from '../../common/formats/format-common.js';
 import { parseValue } from '../product-template-component-utils/product-utils.js';
@@ -61,15 +60,18 @@ let AtomicProductPrice = class AtomicProductPrice extends LitElement {
             'truncate break-keep text-2xl leading-[1.5]': true,
             'text-error': hasPromo,
         });
+        const promoClasses = tw({
+            'original-price content-center truncate text-xl break-keep line-through leading-none': true,
+            invisible: !hasPromo,
+        });
         return html `
       <div class="flex flex-wrap gap-1">
         <div class=${multiClassMap(priceClasses)}>
           ${this.getFormattedValue(hasPromo ? 'ec_promo_price' : 'ec_price')}
         </div>
-         ${displayIf(hasPromo, () => html `
-          <div class='original-price content-center truncate text-xl break-keep line-through leading-none'>
-            ${this.getFormattedValue('ec_price')}
-          </div>`)}
+        <div class=${multiClassMap(promoClasses)}>
+          ${hasPromo ? this.getFormattedValue('ec_price') : ''}
+        </div>
       </div>
     `;
     }

package/dist/atomic/components/components/commerce/atomic-product-template/atomic-product-template.js

@@ -10,19 +10,7 @@ import { errorGuard } from "../../../decorators/error-guard";
 import { mapProperty } from "../../../utils/props-utils";
 import { makeMatchConditions } from '../../common/product-template/product-template-common';
 import { ProductTemplateController } from '../../common/product-template/product-template-controller';
-import '../atomic-commerce-text/atomic-commerce-text';
-import '../atomic-product-text/atomic-product-text';
-import '../atomic-product-link/atomic-product-link';
 import '../atomic-product/atomic-product';
-import '../atomic-product-excerpt/atomic-product-excerpt';
-import '../atomic-product-children/atomic-product-children';
-import '../atomic-product-field-condition/atomic-product-field-condition';
-import '../atomic-product-multi-value-text/atomic-product-multi-value-text';
-import '../atomic-product-price/atomic-product-price';
-import '../atomic-product-numeric-field-value/atomic-product-numeric-field-value';
-import '../atomic-product-description/atomic-product-description';
-import '../atomic-product-image/atomic-product-image';
-import '../atomic-product-rating/atomic-product-rating';
 /**
  * * A product template determines the format of the query results, depending on the conditions that are defined for each template.
  *
@@ -71,7 +59,7 @@ __decorate([
     state()
 ], AtomicProductTemplate.prototype, "error", void 0);
 __decorate([
-    property({ type: Array })
+    property({ attribute: false, type: Array })
 ], AtomicProductTemplate.prototype, "conditions", void 0);
 __decorate([
     mapProperty({ splitValues: true, attributePrefix: 'must-match' })

package/dist/atomic/components/components/commerce/atomic-product-text/atomic-product-text.js

@@ -26,10 +26,15 @@ let AtomicProductText = class AtomicProductText extends LitElement {
         super(...arguments);
         /**
          * Whether to highlight the string field value.
-         *
+         * @deprecated - replaced by `no-highlight` (this defaults to `true`, while the replacement is the inverse and defaults to `false`).
          * Only works if the `field` property is set to `excerpt` or `ec_name`.
          */
         this.shouldHighlight = true;
+        /**
+         * Disable highlighting of the string field value.
+         * Only works if the `field` property is set to `excerpt` or `ec_name`.
+         */
+        this.disableHighlight = false;
         this.productController = createProductContextController(this);
     }
     createRenderRoot() {
@@ -41,7 +46,9 @@ let AtomicProductText = class AtomicProductText extends LitElement {
         }
     }
     get shouldRenderHighlights() {
-        return this.shouldHighlight && this.isFieldSupportedForHighlighting();
+        return (!this.disableHighlight &&
+            this.shouldHighlight &&
+            this.isFieldSupportedForHighlighting());
     }
     isFieldSupportedForHighlighting() {
         return ['ec_name', 'excerpt'].includes(this.field);
@@ -116,6 +123,14 @@ __decorate([
         converter: booleanConverter,
     })
 ], AtomicProductText.prototype, "shouldHighlight", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        useDefault: true,
+        attribute: 'no-highlight',
+    })
+], AtomicProductText.prototype, "disableHighlight", void 0);
 __decorate([
     property({ type: String, reflect: true })
 ], AtomicProductText.prototype, "default", void 0);

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

@@ -28,6 +28,7 @@ let AtomicFacetDateInput = class AtomicFacetDateInput extends LitElement {
         super(...arguments);
         this.startRef = createRef();
         this.endRef = createRef();
+        this.max = '9999-12-31';
     }
     initialize() { }
     connectedCallback() {

package/dist/atomic/components/components/common/atomic-layout-section/{search-layout.js → layout.js}

@@ -1,8 +1,8 @@
-import { findSection, sectionSelector, } from '../../common/atomic-layout-section/sections';
+import { findSection, sectionSelector } from './sections';
 export function makeDesktopQuery(mobileBreakpoint) {
     return `only screen and (min-width: ${mobileBreakpoint})`;
 }
-export function buildSearchLayoutCommon(element, mobileBreakpoint, layoutWebComponentTagName, containerWebComponentTagName, noItemsSelector, errorSelector, refineToggleSelector, sortDropdownSelector) {
+export function buildCommonLayout(element, mobileBreakpoint, layoutWebComponentTagName, containerWebComponentTagName, noItemsSelector, errorSelector, refineToggleSelector, sortDropdownSelector) {
     const id = element.id;
     const layoutSelector = `${layoutWebComponentTagName}#${id}`;
     const cleanStatusSelector = `${containerWebComponentTagName}:not(.${noItemsSelector}, .${errorSelector})`;

package/dist/atomic/components/components/common/facets/facet-common.tw.css.js

@@ -1,3 +1,4 @@
-const css = `/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+import { css } from 'lit';
+const styles = css`/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
 @layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}.value-count{margin-left:calc(var(--spacing,.25rem)*1.5);color:var(--atomic-neutral-dark);[part=value-exclude-button]+&{margin-right:calc(var(--spacing,.25rem)*2)}}:host(.popover-nested){min-width:var(--container-2xs,18rem);&::part(label-button){display:none}&::part(facet){--tw-shadow:0px 2px 8px var(--tw-shadow-color,#e5e8e8bf);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}&::part(values){margin-top:calc(var(--spacing,.25rem)*0);max-height:calc(var(--spacing,.25rem)*96);overflow-y:auto}&::part(search-wrapper){margin-bottom:calc(var(--spacing,.25rem)*2)}}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}`;
-export default css;
+export default styles;