@coveo/atomic 3.33.1-pre.199fbf22e7 → 3.33.1-pre.1c3a495c8e

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.
  *
@@ -279,8 +284,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

@@ -71,7 +71,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;

package/dist/atomic/components/components/common/facets/facet-search/facet-search.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 */
 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)}`;
-export default css;
+export default styles;

package/dist/atomic/components/components/common/facets/facet-value-box/facet-value-box.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 */
 .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)}`;
-export default css;
+export default styles;

package/dist/atomic/components/components/common/facets/facet-value-checkbox/facet-value-checkbox.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 */
 .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)}`;
-export default css;
+export default styles;

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

@@ -1,2 +1,3 @@
-const css = `.value-exclude-button:focus-visible atomic-icon{visibility:visible}`;
-export default css;
+import { css } from 'lit';
+const styles = css`.value-exclude-button:focus-visible atomic-icon{visibility:visible}`;
+export default styles;

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

@@ -1,3 +1,9 @@
-const 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}`;
-export default css;
+import facetCommonStyles from './facet-common.tw.css';
+import facetValueCheckboxStyles from './facet-value-checkbox/facet-value-checkbox.tw.css';
+import facetValueExcludeStyles from './facet-value-exclude/facet-value-exclude.tw.css';
+const styles = [
+    facetValueCheckboxStyles,
+    facetValueExcludeStyles,
+    facetCommonStyles,
+];
+export default styles;

package/dist/atomic/components/components/search/atomic-layout/search-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-search-layout';
 export const containerWebComponentTagName = 'atomic-search-interface';
 export const noResultsSelector = `${containerWebComponentTagName}-no-results`;
@@ -8,5 +8,5 @@ export function makeDesktopQuery(mobileBreakpoint) {
     return `only screen and (min-width: ${mobileBreakpoint})`;
 }
 export function buildSearchLayout(element, mobileBreakpoint) {
-    return buildSearchLayoutCommon(element, mobileBreakpoint, layoutWebComponentTagName, containerWebComponentTagName, noResultsSelector, errorSelector, 'atomic-refine-toggle', 'atomic-sort-dropdown');
+    return buildCommonLayout(element, mobileBreakpoint, layoutWebComponentTagName, containerWebComponentTagName, noResultsSelector, errorSelector, 'atomic-refine-toggle', 'atomic-sort-dropdown');
 }

package/dist/atomic/components/components/search/atomic-results-per-page/atomic-results-per-page.js

@@ -7,13 +7,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { buildResultsPerPage, buildSearchStatus, } from '@coveo/headless';
 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 { ChoiceIsNaNError, InitialChoiceNotInChoicesError, } from "../../common/items-per-page/error.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.js";
 import { bindings } from "../../../decorators/bindings.js";
@@ -74,16 +74,12 @@ let AtomicResultsPerPage = class AtomicResultsPerPage extends InitializeBindings
             return html ``;
         }
         return html `
-      ${renderPagerGuard({
-            props: {
-                hasError: this.searchStatusState.hasError,
-                hasItems: this.searchStatusState.hasResults,
-                isAppLoaded: this.isAppLoaded,
-            },
-        })(html `
-        <div class="flex items-center" role="toolbar" aria-label=${this.label}>
-          ${renderLabel()(html `${this.label}`)}
-          ${renderFieldsetGroup({
+      ${when(!this.searchStatusState.hasError &&
+            this.isAppLoaded &&
+            this.searchStatusState.hasResults, () => html `
+          <div class="flex items-center" role="toolbar" aria-label=${this.label}>
+            ${renderLabel()(html `${this.label}`)}
+            ${renderFieldsetGroup({
             props: {
                 label: this.label,
             },
@@ -100,8 +96,8 @@ let AtomicResultsPerPage = class AtomicResultsPerPage extends InitializeBindings
                 focusOnNextNewResult: () => this.bindings.store.state.resultList?.focusOnNextNewResult(),
             },
         }))}
-        </div>
-      `)}
+          </div>
+        `)}
     `;
     }
 };