@coveo/atomic 3.28.1-pre.86ce689cb5 → 3.28.1-pre.ae49fae5bb

package/dist/atomic/components/components/commerce/atomic-commerce-no-products/atomic-commerce-no-products.js

@@ -4,21 +4,21 @@ 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 { buildProductListing, buildSearch, } from '@coveo/headless/commerce';
+import { html, LitElement } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
 import { bindStateToController } from "../../../decorators/bind-state.js";
+import { bindingGuard } from "../../../decorators/binding-guard.js";
 import { bindings } from "../../../decorators/bindings.js";
+import { errorGuard } from "../../../decorators/error-guard.js";
 import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js";
 import { AriaLiveRegionController } from "../../../utils/accessibility-utils.js";
-import { buildSearch, buildProductListing, } from '@coveo/headless/commerce';
-import { html, LitElement } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
 import { renderNoItemsContainer } from '../../common/no-items/container.js';
 import { noItemsGuard } from '../../common/no-items/guard.js';
 import { renderMagnifyingGlass } from '../../common/no-items/magnifying-glass.js';
 import { renderNoItems } from '../../common/no-items/no-items.js';
 import { renderSearchTips } from '../../common/no-items/tips.js';
 import { getSummary } from '../../common/no-items/utils.js';
-import { errorGuard } from "../../../decorators/error-guard.js";
-import { bindingGuard } from "../../../decorators/binding-guard.js";
 /**
  * @alpha
  *

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

@@ -4,20 +4,20 @@ 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 { 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 { bindStateToController } from "../../../decorators/bind-state";
 import { bindingGuard } from "../../../decorators/binding-guard";
 import { bindings } from "../../../decorators/bindings";
 import { errorGuard } from "../../../decorators/error-guard";
 import { withTailwindStyles } from "../../../decorators/with-tailwind-styles";
 import { randomID } from "../../../utils/utils";
-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';
 const ArrowLeftIcon = "<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m11.5 4.8-4.3 4.5c-.3.4-.3.9 0 1.3l4.3 4.6c.3.4.9.4 1.2 0s.3-.9 0-1.3l-3.7-4 3.7-3.9c.3-.4.3-.9 0-1.3-.3-.3-.9-.3-1.2.1z\"/></svg>";
 const ArrowRightIcon = "<svg viewBox=\"0 0 20 20\"><path d=\"m8.5 15.2 4.3-4.6c.3-.4.3-.9 0-1.3l-4.4-4.5c-.3-.4-.9-.4-1.2 0s-.3.9 0 1.3l3.7 4-3.7 3.9c-.3.4-.3.9 0 1.3.4.3 1 .3 1.3-.1z\"/></svg>";
 import { createAppLoadedListener } from '../../common/interface/store';
-import { renderPagerNextButton, renderPagerPageButton, renderPageButtons, renderPagerPreviousButton, } from '../../common/pager/pager-buttons';
+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';
@@ -99,9 +99,9 @@ let AtomicCommercePager = class AtomicCommercePager extends LitElement {
                 icon: this.previousButtonIcon,
                 disabled: this.pagerState.page === 0,
                 i18n: this.bindings.i18n,
-                onClick: () => {
+                onClick: async () => {
                     this.pager.previousPage();
-                    this.focusOnFirstResultAndScrollToTop();
+                    await this.focusOnFirstResultAndScrollToTop();
                 },
             },
         })}
@@ -115,9 +115,9 @@ let AtomicCommercePager = class AtomicCommercePager extends LitElement {
                 ariaLabel: this.bindings.i18n.t('page-number', {
                     pageNumber: pageNumber + 1,
                 }),
-                onChecked: () => {
+                onChecked: async () => {
                     this.pager.selectPage(pageNumber);
-                    this.focusOnFirstResultAndScrollToTop();
+                    await this.focusOnFirstResultAndScrollToTop();
                 },
                 page: pageNumber,
                 groupName: this.radioGroupName,
@@ -129,9 +129,9 @@ let AtomicCommercePager = class AtomicCommercePager extends LitElement {
                 icon: this.nextButtonIcon,
                 disabled: this.pagerState.page + 1 >= this.pagerState.totalPages,
                 i18n: this.bindings.i18n,
-                onClick: () => {
+                onClick: async () => {
                     this.pager.nextPage();
-                    this.focusOnFirstResultAndScrollToTop();
+                    await this.focusOnFirstResultAndScrollToTop();
                 },
             },
         })}

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

@@ -4,13 +4,6 @@ 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 { bindStateToController } from "../../../decorators/bind-state.js";
-import { bindingGuard } from "../../../decorators/binding-guard.js";
-import { bindings } from "../../../decorators/bindings.js";
-import { errorGuard } from "../../../decorators/error-guard.js";
-import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js";
-import { FocusTargetController } from "../../../utils/accessibility-utils.js";
-import { randomID } from "../../../utils/utils.js";
 import { NumberValue, Schema, StringValue } from '@coveo/bueno';
 import { buildProductListing, buildSearch, } from '@coveo/headless/commerce';
 import { html, LitElement, nothing, unsafeCSS } from 'lit';
@@ -19,12 +12,19 @@ import { keyed } from 'lit/directives/keyed.js';
 import { map } from 'lit/directives/map.js';
 import { ref } from 'lit/directives/ref.js';
 import { when } from 'lit/directives/when.js';
+import { bindStateToController } from "../../../decorators/bind-state.js";
+import { bindingGuard } from "../../../decorators/binding-guard.js";
+import { bindings } from "../../../decorators/bindings.js";
+import { errorGuard } from "../../../decorators/error-guard.js";
+import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js";
+import { FocusTargetController } from "../../../utils/accessibility-utils.js";
+import { randomID } from "../../../utils/utils.js";
 import { renderItemPlaceholders } from '../../common/atomic-result-placeholder/item-placeholders.js';
 import { createAppLoadedListener } from '../../common/interface/store.js';
 import { renderDisplayWrapper } from '../../common/item-list/display-wrapper.js';
 import { renderGridLayout } from '../../common/item-list/grid-layout.js';
 import { ItemListCommon } from '../../common/item-list/item-list-common.js';
-import { renderTableLayout, renderTableData, renderTableRow, } from '../../common/item-list/table-layout.js';
+import { renderTableData, renderTableLayout, renderTableRow, } from '../../common/item-list/table-layout.js';
 import { getItemListDisplayClasses, } from '../../common/layout/display-options.js';
 import { ProductTemplateProvider } from '../product-list/product-template-provider.js';
 import styles from './atomic-commerce-product-list.tw.css';
@@ -50,7 +50,7 @@ import styles from './atomic-commerce-product-list.tw.css';
  */
 let AtomicCommerceProductList = class AtomicCommerceProductList extends LitElement {
     constructor() {
-        super();
+        super(...arguments);
         this.loadingFlag = randomID('firstProductLoaded-');
         this.isAppLoaded = false;
         this.resultTemplateRegistered = false;

package/dist/atomic/components/components/commerce/atomic-commerce-product-list/atomic-commerce-product-list.tw.css.js

@@ -1,3 +1,3 @@
 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-border-style:solid}}}.list-wrapper.placeholder{& .result-component,& table.list-root{display:none}}.list-wrapper:not(.placeholder){& atomic-result-placeholder,& atomic-result-table-placeholder{display:none}}.list-root.loading{animation:2s cubic-bezier(.4,0,.6,1) infinite pulse}@keyframes pulse{50%{opacity:.5}}.list-wrapper.display-table{display:grid;overflow-x:auto}.list-root.display-table{border-spacing:0;border-collapse:separate;min-width:100%;& th,& td{border-style:var(--tw-border-style);border-width:1px;border-color:var(--atomic-neutral);font-family:var(--atomic-font-family);font-size:var(--atomic-text-sm);line-height:var(--tw-leading,calc(1.25/.875));white-space:nowrap;line-height:1rem;&:not(:first-child){border-left:none}&:first-child{min-width:19rem}}& th{background-color:var(--atomic-neutral-light);color:#000;padding:1rem var(--padding);text-align:left;border-bottom:none;font-weight:700;&:first-child{border-top-left-radius:var(--atomic-border-radius-xl)}&:last-child{border-top-right-radius:var(--atomic-border-radius-xl)}}border-spacing:0;border-collapse:separate;min-width:100%& th,& td{border-style:var(--tw-border-style);border-width:1px;border-color:var(--atomic-neutral);font-family:var(--atomic-font-family);font-size:var(--atomic-text-sm);line-height:var(--tw-leading,calc(1.25/.875));white-space:nowrap;line-height:1rem;&:not(:first-child){border-left:none}&:first-child{min-width:19rem}}& th{background-color:var(--atomic-neutral-light);color:#000;padding:1rem var(--padding);text-align:left;border-bottom:none;font-weight:700;&:first-child{border-top-left-radius:var(--atomic-border-radius-xl)}&:last-child{border-top-right-radius:var(--atomic-border-radius-xl)}}border-spacing:0;border-collapse:separate;min-width:100%& th,& td{border-style:var(--tw-border-style);border-width:1px;border-color:var(--atomic-neutral);font-family:var(--atomic-font-family);font-size:var(--atomic-text-sm);line-height:var(--tw-leading,calc(1.25/.875));white-space:nowrap;line-height:1rem;&:not(:first-child){border-left:none}&:first-child{min-width:19rem}}& th{background-color:var(--atomic-neutral-light);color:#000;padding:1rem var(--padding);text-align:left;border-bottom:none;font-weight:700;&:first-child{border-top-left-radius:var(--atomic-border-radius-xl)}&:last-child{border-top-right-radius:var(--atomic-border-radius-xl)}}& td{color:var(--atomic-neutral-dark);vertical-align:top;padding:var(--padding);border-top:none}&.density-comfortable{--padding:2rem}&.density-normal{--padding:1.5rem}&.density-compact{--padding:1rem}}[part~=divider]{&:not(:last-child){border-bottom-color:var(--atomic-neutral);padding-bottom:1rem}margin-bottom:1rem}.list-root.display-list{flex-direction:column;display:flex;& .result-component,& atomic-result-placeholder{width:auto}@media (width>=1024px){&.density-comfortable{& [part~=outline]{&:before{margin:2rem 0}}}&.density-normal{& [part~=outline]{&:before{margin:1.5rem 0}}@media not all and (width>=1024px){& [part~=outline]{&:before{margin:1.75rem 0}}}}&.density-compact{& [part~=outline]{&:before{margin:1rem 0}}@media not all and (width>=1024px){& [part~=outline]{&:before{margin:1.5rem 0}}}}& [part~=outline]{&:before{content:" ";background-color:var(--atomic-neutral);height:1px;display:block}&:first-of-type:before{display:none}}& atomic-result-placeholder{&:before{background-color:#0000}}&.density-comfortable{& [part~=outline]{&:before{margin:2rem 0}}}&.density-normal{& [part~=outline]{&:before{margin:1.5rem 0}}@media not all and (width>=1024px){& [part~=outline]{&:before{margin:1.75rem 0}}}}&.density-compact{& [part~=outline]{&:before{margin:1rem 0}}@media not all and (width>=1024px){& [part~=outline]{&:before{margin:1.5rem 0}}}}& [part~=outline]{&:before{content:" ";background-color:var(--atomic-neutral);height:1px;display:block}&:first-of-type:before{display:none}}& atomic-result-placeholder{&:before{background-color:#0000}}&.density-comfortable{& [part~=outline]{&:before{margin:2rem 0}}}&.density-normal{& [part~=outline]{&:before{margin:1.5rem 0}}@media not all and (width>=1024px){& [part~=outline]{&:before{margin:1.75rem 0}}}}&.density-compact{& [part~=outline]{&:before{margin:1rem 0}}@media not all and (width>=1024px){& [part~=outline]{&:before{margin:1.5rem 0}}}}& [part~=outline]{&:before{content:" ";background-color:var(--atomic-neutral);height:1px;display:block}&:first-of-type:before{display:none}}& atomic-result-placeholder{&:before{background-color:#0000}}}@media not all and (width>=1024px){&.image-large{&.density-comfortable{& [part~=outline]{&:before{margin:2rem 0}}}&.density-normal{& [part~=outline]{&:before{margin:1.5rem 0}}@media not all and (width>=1024px){& [part~=outline]{&:before{margin:1.75rem 0}}}}&.density-compact{& [part~=outline]{&:before{margin:1rem 0}}@media not all and (width>=1024px){& [part~=outline]{&:before{margin:1.5rem 0}}}}& [part~=outline]{&:before{content:" ";background-color:var(--atomic-neutral);height:1px;display:block}&:first-of-type:before{display:none}}& atomic-result-placeholder{&:before{background-color:#0000}}&.density-comfortable{& [part~=outline]{&:before{margin:2rem 0}}}&.density-normal{& [part~=outline]{&:before{margin:1.5rem 0}}@media not all and (width>=1024px){& [part~=outline]{&:before{margin:1.75rem 0}}}}&.density-compact{& [part~=outline]{&:before{margin:1rem 0}}@media not all and (width>=1024px){& [part~=outline]{&:before{margin:1.5rem 0}}}}& [part~=outline]{&:before{content:" ";background-color:var(--atomic-neutral);height:1px;display:block}&:first-of-type:before{display:none}}& atomic-result-placeholder{&:before{background-color:#0000}}&.density-comfortable{& [part~=outline]{&:before{margin:2rem 0}}}&.density-normal{& [part~=outline]{&:before{margin:1.5rem 0}}@media not all and (width>=1024px){& [part~=outline]{&:before{margin:1.75rem 0}}}}&.density-compact{& [part~=outline]{&:before{margin:1rem 0}}@media not all and (width>=1024px){& [part~=outline]{&:before{margin:1.5rem 0}}}}& [part~=outline]{&:before{content:" ";background-color:var(--atomic-neutral);height:1px;display:block}&:first-of-type:before{display:none}}& atomic-result-placeholder{&:before{background-color:#0000}}grid-template-columns:minmax(auto,35rem);justify-content:space-evenly;display:grid}&.image-small,&.image-icon,&.image-none{grid-row-gap:1rem;& [part~=outline]{border-style:var(--tw-border-style);border-width:1px;border-color:var(--atomic-neutral);border-radius:1rem;padding:1rem}& atomic-result-placeholder{border-color:#0000}}}}:host{& [part~=outline][part~=result-list-grid-clickable-container]{border:1px solid #0000;border-radius:1rem;padding:1rem;transition:all .12s ease-out;position:relative;&:hover{border-style:var(--tw-border-style);border-width:1px;border-color:var(--atomic-neutral);box-shadow:0px 10px 25px var(--atomic-neutral);cursor:pointer}}& [part~=outline][part~=result-list-grid-clickable-container]{border:1px solid #0000;border-radius:1rem;padding:1rem;transition:all .12s ease-out;position:relative;&:hover{border-style:var(--tw-border-style);border-width:1px;border-color:var(--atomic-neutral);box-shadow:0px 10px 25px var(--atomic-neutral);cursor:pointer}}& [part~=outline][part~=result-list-grid-clickable-container]{border:1px solid #0000;border-radius:1rem;padding:1rem;transition:all .12s ease-out;position:relative;&:hover{border-style:var(--tw-border-style);border-width:1px;border-color:var(--atomic-neutral);box-shadow:0px 10px 25px var(--atomic-neutral);cursor:pointer}}& [part=result-list-grid-clickable]:focus-visible{border-style:var(--tw-border-style);border-width:2px;border-color:var(--atomic-primary);color:var(--atomic-primary);cursor:pointer;text-align:center;border-radius:2px;text-decoration:underline;display:inline-block;position:absolute}& [part=result-list-grid-clickable]:not(:focus){clip:rect(1px,1px,1px,1px);padding:0;position:absolute;overflow:hidden}& .list-root.display-grid{justify-content:space-evenly;display:grid;& .result-component{box-sizing:border-box;height:100%}}& .list-root.display-grid{justify-content:space-evenly;display:grid;& .result-component{box-sizing:border-box;height:100%}}& .list-wrapper{word-break:break-word}& .list-root.display-grid{justify-content:space-evenly;display:grid;& .result-component{box-sizing:border-box;height:100%}}& .list-root.display-grid{@media (width>=1024px){grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))&.density-comfortable{grid-row-gap:4rem;grid-column-gap:1.5rem}&.density-normal,&.density-compact{grid-row-gap:3rem;grid-column-gap:1.5rem}&.image-large{grid-template-columns:repeat(auto-fill,minmax(19rem,1fr))}&.image-small{@media not all and (width>=1024px){grid-template-columns:repeat(3,1fr)}@media (width>=1024px){grid-template-columns:repeat(3,1fr)}@media (width>=1280px){grid-template-columns:repeat(4,1fr)}}}}& .list-root.display-grid{@media (width>=1024px){grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))&.density-comfortable{grid-row-gap:4rem;grid-column-gap:1.5rem}&.density-normal,&.density-compact{grid-row-gap:3rem;grid-column-gap:1.5rem}&.image-large{grid-template-columns:repeat(auto-fill,minmax(19rem,1fr))}&.image-small{@media not all and (width>=1024px){grid-template-columns:repeat(3,1fr)}@media (width>=1024px){grid-template-columns:repeat(3,1fr)}@media (width>=1280px){grid-template-columns:repeat(4,1fr)}}}}& .list-root.display-grid{@media (width>=1024px){grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))&.density-comfortable{grid-row-gap:4rem;grid-column-gap:1.5rem}&.density-normal,&.density-compact{grid-row-gap:3rem;grid-column-gap:1.5rem}&.image-large{grid-template-columns:repeat(auto-fill,minmax(19rem,1fr))}&.image-small{@media not all and (width>=1024px){grid-template-columns:repeat(3,1fr)}@media (width>=1024px){grid-template-columns:repeat(3,1fr)}@media (width>=1280px){grid-template-columns:repeat(4,1fr)}}}}& .list-root.display-grid{@media not all and (width>=1024px){&.image-large{@media not all and (width>=768px){&.density-comfortable{& [part~=outline]{&:before{margin:2rem 0}}}&.density-normal{& [part~=outline]{&:before{margin:1.5rem 0}}@media not all and (width>=1024px){& [part~=outline]{&:before{margin:1.75rem 0}}}}&.density-compact{& [part~=outline]{&:before{margin:1rem 0}}@media not all and (width>=1024px){& [part~=outline]{&:before{margin:1.5rem 0}}}}& [part~=outline]{&:before{content:" ";background-color:var(--atomic-neutral);height:1px;display:block}&:first-of-type:before{display:none}}& atomic-result-placeholder{&:before{background-color:#0000}}&.density-comfortable{& [part~=outline]{&:before{margin:2rem 0}}}&.density-normal{& [part~=outline]{&:before{margin:1.5rem 0}}@media not all and (width>=1024px){& [part~=outline]{&:before{margin:1.75rem 0}}}}&.density-compact{& [part~=outline]{&:before{margin:1rem 0}}@media not all and (width>=1024px){& [part~=outline]{&:before{margin:1.5rem 0}}}}& [part~=outline]{&:before{content:" ";background-color:var(--atomic-neutral);height:1px;display:block}&:first-of-type:before{display:none}}& atomic-result-placeholder{&:before{background-color:#0000}}&.density-comfortable{& [part~=outline]{&:before{margin:2rem 0}}}&.density-normal{& [part~=outline]{&:before{margin:1.5rem 0}}@media not all and (width>=1024px){& [part~=outline]{&:before{margin:1.75rem 0}}}}&.density-compact{& [part~=outline]{&:before{margin:1rem 0}}@media not all and (width>=1024px){& [part~=outline]{&:before{margin:1.5rem 0}}}}& [part~=outline]{&:before{content:" ";background-color:var(--atomic-neutral);height:1px;display:block}&:first-of-type:before{display:none}}& atomic-result-placeholder{&:before{background-color:#0000}}grid-template-columns:minmax(auto,35rem)}@media (width>=768px){grid-column-gap:.5rem;grid-row-gap:.5remgrid-column-gap:.5rem;grid-row-gap:.5rem& [part~=outline]{border-style:var(--tw-border-style);border-width:1px;border-color:var(--atomic-neutral);border-radius:1rem;padding:1rem}& atomic-result-placeholder{border-color:#0000}grid-column-gap:.5rem;grid-row-gap:.5rem;grid-template-columns:1fr 1fr}}&.image-small,&.image-icon,&.image-none{grid-column-gap:.5rem;grid-row-gap:.5remgrid-column-gap:.5rem;grid-row-gap:.5rem& [part~=outline]{border-style:var(--tw-border-style);border-width:1px;border-color:var(--atomic-neutral);border-radius:1rem;padding:1rem}& atomic-result-placeholder{border-color:#0000}grid-column-gap:.5rem;grid-row-gap:.5rem@media not all and (width>=640px){grid-template-columns:minmax(0,1fr)}@media (width>=768px){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}@media (width>=1024px){grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)}}}}& .list-root.display-grid{@media not all and (width>=1024px){&.image-large{@media not all and (width>=768px){&.density-comfortable{& [part~=outline]{&:before{margin:2rem 0}}}&.density-normal{& [part~=outline]{&:before{margin:1.5rem 0}}@media not all and (width>=1024px){& [part~=outline]{&:before{margin:1.75rem 0}}}}&.density-compact{& [part~=outline]{&:before{margin:1rem 0}}@media not all and (width>=1024px){& [part~=outline]{&:before{margin:1.5rem 0}}}}& [part~=outline]{&:before{content:" ";background-color:var(--atomic-neutral);height:1px;display:block}&:first-of-type:before{display:none}}& atomic-result-placeholder{&:before{background-color:#0000}}&.density-comfortable{& [part~=outline]{&:before{margin:2rem 0}}}&.density-normal{& [part~=outline]{&:before{margin:1.5rem 0}}@media not all and (width>=1024px){& [part~=outline]{&:before{margin:1.75rem 0}}}}&.density-compact{& [part~=outline]{&:before{margin:1rem 0}}@media not all and (width>=1024px){& [part~=outline]{&:before{margin:1.5rem 0}}}}& [part~=outline]{&:before{content:" ";background-color:var(--atomic-neutral);height:1px;display:block}&:first-of-type:before{display:none}}& atomic-result-placeholder{&:before{background-color:#0000}}&.density-comfortable{& [part~=outline]{&:before{margin:2rem 0}}}&.density-normal{& [part~=outline]{&:before{margin:1.5rem 0}}@media not all and (width>=1024px){& [part~=outline]{&:before{margin:1.75rem 0}}}}&.density-compact{& [part~=outline]{&:before{margin:1rem 0}}@media not all and (width>=1024px){& [part~=outline]{&:before{margin:1.5rem 0}}}}& [part~=outline]{&:before{content:" ";background-color:var(--atomic-neutral);height:1px;display:block}&:first-of-type:before{display:none}}& atomic-result-placeholder{&:before{background-color:#0000}}grid-template-columns:minmax(auto,35rem)}@media (width>=768px){grid-column-gap:.5rem;grid-row-gap:.5remgrid-column-gap:.5rem;grid-row-gap:.5rem& [part~=outline]{border-style:var(--tw-border-style);border-width:1px;border-color:var(--atomic-neutral);border-radius:1rem;padding:1rem}& atomic-result-placeholder{border-color:#0000}grid-column-gap:.5rem;grid-row-gap:.5rem;grid-template-columns:1fr 1fr}}&.image-small,&.image-icon,&.image-none{grid-column-gap:.5rem;grid-row-gap:.5remgrid-column-gap:.5rem;grid-row-gap:.5rem& [part~=outline]{border-style:var(--tw-border-style);border-width:1px;border-color:var(--atomic-neutral);border-radius:1rem;padding:1rem}& atomic-result-placeholder{border-color:#0000}grid-column-gap:.5rem;grid-row-gap:.5rem@media not all and (width>=640px){grid-template-columns:minmax(0,1fr)}@media (width>=768px){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}@media (width>=1024px){grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)}}}}& .list-root.display-grid{@media not all and (width>=1024px){&.image-large{@media not all and (width>=768px){&.density-comfortable{& [part~=outline]{&:before{margin:2rem 0}}}&.density-normal{& [part~=outline]{&:before{margin:1.5rem 0}}@media not all and (width>=1024px){& [part~=outline]{&:before{margin:1.75rem 0}}}}&.density-compact{& [part~=outline]{&:before{margin:1rem 0}}@media not all and (width>=1024px){& [part~=outline]{&:before{margin:1.5rem 0}}}}& [part~=outline]{&:before{content:" ";background-color:var(--atomic-neutral);height:1px;display:block}&:first-of-type:before{display:none}}& atomic-result-placeholder{&:before{background-color:#0000}}&.density-comfortable{& [part~=outline]{&:before{margin:2rem 0}}}&.density-normal{& [part~=outline]{&:before{margin:1.5rem 0}}@media not all and (width>=1024px){& [part~=outline]{&:before{margin:1.75rem 0}}}}&.density-compact{& [part~=outline]{&:before{margin:1rem 0}}@media not all and (width>=1024px){& [part~=outline]{&:before{margin:1.5rem 0}}}}& [part~=outline]{&:before{content:" ";background-color:var(--atomic-neutral);height:1px;display:block}&:first-of-type:before{display:none}}& atomic-result-placeholder{&:before{background-color:#0000}}&.density-comfortable{& [part~=outline]{&:before{margin:2rem 0}}}&.density-normal{& [part~=outline]{&:before{margin:1.5rem 0}}@media not all and (width>=1024px){& [part~=outline]{&:before{margin:1.75rem 0}}}}&.density-compact{& [part~=outline]{&:before{margin:1rem 0}}@media not all and (width>=1024px){& [part~=outline]{&:before{margin:1.5rem 0}}}}& [part~=outline]{&:before{content:" ";background-color:var(--atomic-neutral);height:1px;display:block}&:first-of-type:before{display:none}}& atomic-result-placeholder{&:before{background-color:#0000}}grid-template-columns:minmax(auto,35rem)}@media (width>=768px){grid-column-gap:.5rem;grid-row-gap:.5remgrid-column-gap:.5rem;grid-row-gap:.5rem& [part~=outline]{border-style:var(--tw-border-style);border-width:1px;border-color:var(--atomic-neutral);border-radius:1rem;padding:1rem}& atomic-result-placeholder{border-color:#0000}grid-column-gap:.5rem;grid-row-gap:.5rem;grid-template-columns:1fr 1fr}}&.image-small,&.image-icon,&.image-none{grid-column-gap:.5rem;grid-row-gap:.5remgrid-column-gap:.5rem;grid-row-gap:.5rem& [part~=outline]{border-style:var(--tw-border-style);border-width:1px;border-color:var(--atomic-neutral);border-radius:1rem;padding:1rem}& atomic-result-placeholder{border-color:#0000}grid-column-gap:.5rem;grid-row-gap:.5rem@media not all and (width>=640px){grid-template-columns:minmax(0,1fr)}@media (width>=768px){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}@media (width>=1024px){grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)}}}}}:host{& .result-link{color:var(--atomic-on-background);&:hover,&:focus-visible{color:var(--atomic-primary);text-decoration:underline}&:focus{outline:none}&:visited{color:var(--atomic-visited)}}& .result-grid{grid-template-columns:repeat(5,minmax(0,1fr));justify-items:center;& a{justify-content:center}}& .result-list{flex-direction:column;display:flex;& .result-item{flex-wrap:wrap;width:100%;max-width:600px;display:flex;& .result-details {align-content:center}}}@media (width>=1024px){& .result-grid{display:grid}}@media not all and (width>=1024px){& .result-grid{flex-direction:column;display:flex}}}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}`;
+@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-border-style:solid}}}.list-wrapper.placeholder{& .result-component,& table.list-root{display:none}}.list-wrapper:not(.placeholder){& atomic-result-placeholder,& atomic-result-table-placeholder{display:none}}.list-root.loading{animation:2s cubic-bezier(.4,0,.6,1) infinite pulse}@keyframes pulse{50%{opacity:.5}}.list-wrapper.display-table{display:grid;overflow-x:auto}.list-root.display-table{border-spacing:0;border-collapse:separate;border-spacing:0;border-collapse:separate;border-spacing:0;border-collapse:separate;min-width:100%;& th,& td{border-style:var(--tw-border-style);border-width:1px;border-color:var(--atomic-neutral);font-family:var(--atomic-font-family);font-size:var(--atomic-text-sm);line-height:var(--tw-leading,calc(1.25/.875));white-space:nowrap;line-height:1rem;&:not(:first-child){border-left:none}&:first-child{min-width:19rem}}& th{background-color:var(--atomic-neutral-light);color:#000;padding:1rem var(--padding);text-align:left;border-bottom:none;font-weight:700;&:first-child{border-top-left-radius:var(--atomic-border-radius-xl)}&:last-child{border-top-right-radius:var(--atomic-border-radius-xl)}}& th,& td{border-style:var(--tw-border-style);border-width:1px;border-color:var(--atomic-neutral);font-family:var(--atomic-font-family);font-size:var(--atomic-text-sm);line-height:var(--tw-leading,calc(1.25/.875));white-space:nowrap;line-height:1rem;&:not(:first-child){border-left:none}&:first-child{min-width:19rem}}& th{background-color:var(--atomic-neutral-light);color:#000;padding:1rem var(--padding);text-align:left;border-bottom:none;font-weight:700;&:first-child{border-top-left-radius:var(--atomic-border-radius-xl)}&:last-child{border-top-right-radius:var(--atomic-border-radius-xl)}}& th,& td{border-style:var(--tw-border-style);border-width:1px;border-color:var(--atomic-neutral);font-family:var(--atomic-font-family);font-size:var(--atomic-text-sm);line-height:var(--tw-leading,calc(1.25/.875));white-space:nowrap;line-height:1rem;&:not(:first-child){border-left:none}&:first-child{min-width:19rem}}& th{background-color:var(--atomic-neutral-light);color:#000;padding:1rem var(--padding);text-align:left;border-bottom:none;font-weight:700;&:first-child{border-top-left-radius:var(--atomic-border-radius-xl)}&:last-child{border-top-right-radius:var(--atomic-border-radius-xl)}}& td{color:var(--atomic-neutral-dark);vertical-align:top;padding:var(--padding);border-top:none}&.density-comfortable{--padding:2rem}&.density-normal{--padding:1.5rem}&.density-compact{--padding:1rem}}[part~=divider]{margin-bottom:1rem;&:not(:last-child){border-bottom-color:var(--atomic-neutral);padding-bottom:1rem}}.list-root.display-list{flex-direction:column;display:flex;& .result-component,& atomic-result-placeholder{width:auto}@media (width>=1024px){&.density-comfortable{& [part~=outline]{&:before{margin:2rem 0}}}&.density-normal{& [part~=outline]{&:before{margin:1.5rem 0}}@media not all and (width>=1024px){& [part~=outline]{&:before{margin:1.75rem 0}}}}&.density-compact{& [part~=outline]{&:before{margin:1rem 0}}@media not all and (width>=1024px){& [part~=outline]{&:before{margin:1.5rem 0}}}}& [part~=outline]{&:before{content:" ";background-color:var(--atomic-neutral);height:1px;display:block}&:first-of-type:before{display:none}}& atomic-result-placeholder{&:before{background-color:#0000}}&.density-comfortable{& [part~=outline]{&:before{margin:2rem 0}}}&.density-normal{& [part~=outline]{&:before{margin:1.5rem 0}}@media not all and (width>=1024px){& [part~=outline]{&:before{margin:1.75rem 0}}}}&.density-compact{& [part~=outline]{&:before{margin:1rem 0}}@media not all and (width>=1024px){& [part~=outline]{&:before{margin:1.5rem 0}}}}& [part~=outline]{&:before{content:" ";background-color:var(--atomic-neutral);height:1px;display:block}&:first-of-type:before{display:none}}& atomic-result-placeholder{&:before{background-color:#0000}}&.density-comfortable{& [part~=outline]{&:before{margin:2rem 0}}}&.density-normal{& [part~=outline]{&:before{margin:1.5rem 0}}@media not all and (width>=1024px){& [part~=outline]{&:before{margin:1.75rem 0}}}}&.density-compact{& [part~=outline]{&:before{margin:1rem 0}}@media not all and (width>=1024px){& [part~=outline]{&:before{margin:1.5rem 0}}}}& [part~=outline]{&:before{content:" ";background-color:var(--atomic-neutral);height:1px;display:block}&:first-of-type:before{display:none}}& atomic-result-placeholder{&:before{background-color:#0000}}}@media not all and (width>=1024px){&.image-large{grid-template-columns:minmax(auto,35rem);justify-content:space-evenly;display:grid;&.density-comfortable{& [part~=outline]{&:before{margin:2rem 0}}}&.density-normal{& [part~=outline]{&:before{margin:1.5rem 0}}@media not all and (width>=1024px){& [part~=outline]{&:before{margin:1.75rem 0}}}}&.density-compact{& [part~=outline]{&:before{margin:1rem 0}}@media not all and (width>=1024px){& [part~=outline]{&:before{margin:1.5rem 0}}}}& [part~=outline]{&:before{content:" ";background-color:var(--atomic-neutral);height:1px;display:block}&:first-of-type:before{display:none}}& atomic-result-placeholder{&:before{background-color:#0000}}&.density-comfortable{& [part~=outline]{&:before{margin:2rem 0}}}&.density-normal{& [part~=outline]{&:before{margin:1.5rem 0}}@media not all and (width>=1024px){& [part~=outline]{&:before{margin:1.75rem 0}}}}&.density-compact{& [part~=outline]{&:before{margin:1rem 0}}@media not all and (width>=1024px){& [part~=outline]{&:before{margin:1.5rem 0}}}}& [part~=outline]{&:before{content:" ";background-color:var(--atomic-neutral);height:1px;display:block}&:first-of-type:before{display:none}}& atomic-result-placeholder{&:before{background-color:#0000}}&.density-comfortable{& [part~=outline]{&:before{margin:2rem 0}}}&.density-normal{& [part~=outline]{&:before{margin:1.5rem 0}}@media not all and (width>=1024px){& [part~=outline]{&:before{margin:1.75rem 0}}}}&.density-compact{& [part~=outline]{&:before{margin:1rem 0}}@media not all and (width>=1024px){& [part~=outline]{&:before{margin:1.5rem 0}}}}& [part~=outline]{&:before{content:" ";background-color:var(--atomic-neutral);height:1px;display:block}&:first-of-type:before{display:none}}& atomic-result-placeholder{&:before{background-color:#0000}}}&.image-small,&.image-icon,&.image-none{grid-row-gap:1rem;& [part~=outline]{border-style:var(--tw-border-style);border-width:1px;border-color:var(--atomic-neutral);border-radius:1rem;padding:1rem}& atomic-result-placeholder{border-color:#0000}}}}:host{& [part~=outline][part~=result-list-grid-clickable-container]{border:1px solid #0000;border-radius:1rem;padding:1rem;transition:all .12s ease-out;position:relative;&:hover{border-style:var(--tw-border-style);border-width:1px;border-color:var(--atomic-neutral);box-shadow:0px 10px 25px var(--atomic-neutral);cursor:pointer}}& [part~=outline][part~=result-list-grid-clickable-container]{border:1px solid #0000;border-radius:1rem;padding:1rem;transition:all .12s ease-out;position:relative;&:hover{border-style:var(--tw-border-style);border-width:1px;border-color:var(--atomic-neutral);box-shadow:0px 10px 25px var(--atomic-neutral);cursor:pointer}}& [part~=outline][part~=result-list-grid-clickable-container]{border:1px solid #0000;border-radius:1rem;padding:1rem;transition:all .12s ease-out;position:relative;&:hover{border-style:var(--tw-border-style);border-width:1px;border-color:var(--atomic-neutral);box-shadow:0px 10px 25px var(--atomic-neutral);cursor:pointer}}& [part=result-list-grid-clickable]:focus-visible{border-style:var(--tw-border-style);border-width:2px;border-color:var(--atomic-primary);color:var(--atomic-primary);cursor:pointer;text-align:center;border-radius:2px;text-decoration:underline;display:inline-block;position:absolute}& [part=result-list-grid-clickable]:not(:focus){clip:rect(1px,1px,1px,1px);padding:0;position:absolute;overflow:hidden}& .list-root.display-grid{justify-content:space-evenly;display:grid;& .result-component{box-sizing:border-box;height:100%}}& .list-root.display-grid{justify-content:space-evenly;display:grid;& .result-component{box-sizing:border-box;height:100%}}& .list-wrapper{word-break:break-word}& .list-root.display-grid{justify-content:space-evenly;display:grid;& .result-component{box-sizing:border-box;height:100%}}& .list-root.display-grid{@media (width>=1024px){&{grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}&.density-comfortable{grid-row-gap:4rem;grid-column-gap:1.5rem}&.density-normal,&.density-compact{grid-row-gap:3rem;grid-column-gap:1.5rem}&.image-large{grid-template-columns:repeat(auto-fill,minmax(19rem,1fr))}&.image-small{@media not all and (width>=1024px){&{grid-template-columns:repeat(3,1fr)}}@media (width>=1024px){&{grid-template-columns:repeat(3,1fr)}}@media (width>=1280px){&{grid-template-columns:repeat(4,1fr)}}}}}& .list-root.display-grid{@media (width>=1024px){&{grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}&.density-comfortable{grid-row-gap:4rem;grid-column-gap:1.5rem}&.density-normal,&.density-compact{grid-row-gap:3rem;grid-column-gap:1.5rem}&.image-large{grid-template-columns:repeat(auto-fill,minmax(19rem,1fr))}&.image-small{@media not all and (width>=1024px){&{grid-template-columns:repeat(3,1fr)}}@media (width>=1024px){&{grid-template-columns:repeat(3,1fr)}}@media (width>=1280px){&{grid-template-columns:repeat(4,1fr)}}}}}& .list-root.display-grid{@media (width>=1024px){&{grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}&.density-comfortable{grid-row-gap:4rem;grid-column-gap:1.5rem}&.density-normal,&.density-compact{grid-row-gap:3rem;grid-column-gap:1.5rem}&.image-large{grid-template-columns:repeat(auto-fill,minmax(19rem,1fr))}&.image-small{@media not all and (width>=1024px){&{grid-template-columns:repeat(3,1fr)}}@media (width>=1024px){&{grid-template-columns:repeat(3,1fr)}}@media (width>=1280px){&{grid-template-columns:repeat(4,1fr)}}}}}& .list-root.display-grid{@media not all and (width>=1024px){&.image-large{@media not all and (width>=768px){&{grid-template-columns:minmax(auto,35rem)}&.density-comfortable{& [part~=outline]{&:before{margin:2rem 0}}}&.density-normal{& [part~=outline]{&:before{margin:1.5rem 0}}@media not all and (width>=1024px){& [part~=outline]{&:before{margin:1.75rem 0}}}}&.density-compact{& [part~=outline]{&:before{margin:1rem 0}}@media not all and (width>=1024px){& [part~=outline]{&:before{margin:1.5rem 0}}}}& [part~=outline]{&:before{content:" ";background-color:var(--atomic-neutral);height:1px;display:block}&:first-of-type:before{display:none}}& atomic-result-placeholder{&:before{background-color:#0000}}&.density-comfortable{& [part~=outline]{&:before{margin:2rem 0}}}&.density-normal{& [part~=outline]{&:before{margin:1.5rem 0}}@media not all and (width>=1024px){& [part~=outline]{&:before{margin:1.75rem 0}}}}&.density-compact{& [part~=outline]{&:before{margin:1rem 0}}@media not all and (width>=1024px){& [part~=outline]{&:before{margin:1.5rem 0}}}}& [part~=outline]{&:before{content:" ";background-color:var(--atomic-neutral);height:1px;display:block}&:first-of-type:before{display:none}}& atomic-result-placeholder{&:before{background-color:#0000}}&.density-comfortable{& [part~=outline]{&:before{margin:2rem 0}}}&.density-normal{& [part~=outline]{&:before{margin:1.5rem 0}}@media not all and (width>=1024px){& [part~=outline]{&:before{margin:1.75rem 0}}}}&.density-compact{& [part~=outline]{&:before{margin:1rem 0}}@media not all and (width>=1024px){& [part~=outline]{&:before{margin:1.5rem 0}}}}& [part~=outline]{&:before{content:" ";background-color:var(--atomic-neutral);height:1px;display:block}&:first-of-type:before{display:none}}& atomic-result-placeholder{&:before{background-color:#0000}}}@media (width>=768px){&{grid-column-gap:.5rem;grid-row-gap:.5rem;grid-column-gap:.5rem;grid-row-gap:.5rem;grid-column-gap:.5rem;grid-row-gap:.5rem;grid-template-columns:1fr 1fr}& [part~=outline]{border-style:var(--tw-border-style);border-width:1px;border-color:var(--atomic-neutral);border-radius:1rem;padding:1rem}& atomic-result-placeholder{border-color:#0000}}}&.image-small,&.image-icon,&.image-none{grid-column-gap:.5rem;grid-row-gap:.5rem;grid-column-gap:.5rem;grid-row-gap:.5rem;grid-column-gap:.5rem;grid-row-gap:.5rem;& [part~=outline]{border-style:var(--tw-border-style);border-width:1px;border-color:var(--atomic-neutral);border-radius:1rem;padding:1rem}& atomic-result-placeholder{border-color:#0000}@media not all and (width>=640px){&{grid-template-columns:minmax(0,1fr)}}@media (width>=768px){&{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}@media (width>=1024px){&{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)}}}}}& .list-root.display-grid{@media not all and (width>=1024px){&.image-large{@media not all and (width>=768px){&{grid-template-columns:minmax(auto,35rem)}&.density-comfortable{& [part~=outline]{&:before{margin:2rem 0}}}&.density-normal{& [part~=outline]{&:before{margin:1.5rem 0}}@media not all and (width>=1024px){& [part~=outline]{&:before{margin:1.75rem 0}}}}&.density-compact{& [part~=outline]{&:before{margin:1rem 0}}@media not all and (width>=1024px){& [part~=outline]{&:before{margin:1.5rem 0}}}}& [part~=outline]{&:before{content:" ";background-color:var(--atomic-neutral);height:1px;display:block}&:first-of-type:before{display:none}}& atomic-result-placeholder{&:before{background-color:#0000}}&.density-comfortable{& [part~=outline]{&:before{margin:2rem 0}}}&.density-normal{& [part~=outline]{&:before{margin:1.5rem 0}}@media not all and (width>=1024px){& [part~=outline]{&:before{margin:1.75rem 0}}}}&.density-compact{& [part~=outline]{&:before{margin:1rem 0}}@media not all and (width>=1024px){& [part~=outline]{&:before{margin:1.5rem 0}}}}& [part~=outline]{&:before{content:" ";background-color:var(--atomic-neutral);height:1px;display:block}&:first-of-type:before{display:none}}& atomic-result-placeholder{&:before{background-color:#0000}}&.density-comfortable{& [part~=outline]{&:before{margin:2rem 0}}}&.density-normal{& [part~=outline]{&:before{margin:1.5rem 0}}@media not all and (width>=1024px){& [part~=outline]{&:before{margin:1.75rem 0}}}}&.density-compact{& [part~=outline]{&:before{margin:1rem 0}}@media not all and (width>=1024px){& [part~=outline]{&:before{margin:1.5rem 0}}}}& [part~=outline]{&:before{content:" ";background-color:var(--atomic-neutral);height:1px;display:block}&:first-of-type:before{display:none}}& atomic-result-placeholder{&:before{background-color:#0000}}}@media (width>=768px){&{grid-column-gap:.5rem;grid-row-gap:.5rem;grid-column-gap:.5rem;grid-row-gap:.5rem;grid-column-gap:.5rem;grid-row-gap:.5rem;grid-template-columns:1fr 1fr}& [part~=outline]{border-style:var(--tw-border-style);border-width:1px;border-color:var(--atomic-neutral);border-radius:1rem;padding:1rem}& atomic-result-placeholder{border-color:#0000}}}&.image-small,&.image-icon,&.image-none{grid-column-gap:.5rem;grid-row-gap:.5rem;grid-column-gap:.5rem;grid-row-gap:.5rem;grid-column-gap:.5rem;grid-row-gap:.5rem;& [part~=outline]{border-style:var(--tw-border-style);border-width:1px;border-color:var(--atomic-neutral);border-radius:1rem;padding:1rem}& atomic-result-placeholder{border-color:#0000}@media not all and (width>=640px){&{grid-template-columns:minmax(0,1fr)}}@media (width>=768px){&{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}@media (width>=1024px){&{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)}}}}}& .list-root.display-grid{@media not all and (width>=1024px){&.image-large{@media not all and (width>=768px){&{grid-template-columns:minmax(auto,35rem)}&.density-comfortable{& [part~=outline]{&:before{margin:2rem 0}}}&.density-normal{& [part~=outline]{&:before{margin:1.5rem 0}}@media not all and (width>=1024px){& [part~=outline]{&:before{margin:1.75rem 0}}}}&.density-compact{& [part~=outline]{&:before{margin:1rem 0}}@media not all and (width>=1024px){& [part~=outline]{&:before{margin:1.5rem 0}}}}& [part~=outline]{&:before{content:" ";background-color:var(--atomic-neutral);height:1px;display:block}&:first-of-type:before{display:none}}& atomic-result-placeholder{&:before{background-color:#0000}}&.density-comfortable{& [part~=outline]{&:before{margin:2rem 0}}}&.density-normal{& [part~=outline]{&:before{margin:1.5rem 0}}@media not all and (width>=1024px){& [part~=outline]{&:before{margin:1.75rem 0}}}}&.density-compact{& [part~=outline]{&:before{margin:1rem 0}}@media not all and (width>=1024px){& [part~=outline]{&:before{margin:1.5rem 0}}}}& [part~=outline]{&:before{content:" ";background-color:var(--atomic-neutral);height:1px;display:block}&:first-of-type:before{display:none}}& atomic-result-placeholder{&:before{background-color:#0000}}&.density-comfortable{& [part~=outline]{&:before{margin:2rem 0}}}&.density-normal{& [part~=outline]{&:before{margin:1.5rem 0}}@media not all and (width>=1024px){& [part~=outline]{&:before{margin:1.75rem 0}}}}&.density-compact{& [part~=outline]{&:before{margin:1rem 0}}@media not all and (width>=1024px){& [part~=outline]{&:before{margin:1.5rem 0}}}}& [part~=outline]{&:before{content:" ";background-color:var(--atomic-neutral);height:1px;display:block}&:first-of-type:before{display:none}}& atomic-result-placeholder{&:before{background-color:#0000}}}@media (width>=768px){&{grid-column-gap:.5rem;grid-row-gap:.5rem;grid-column-gap:.5rem;grid-row-gap:.5rem;grid-column-gap:.5rem;grid-row-gap:.5rem;grid-template-columns:1fr 1fr}& [part~=outline]{border-style:var(--tw-border-style);border-width:1px;border-color:var(--atomic-neutral);border-radius:1rem;padding:1rem}& atomic-result-placeholder{border-color:#0000}}}&.image-small,&.image-icon,&.image-none{grid-column-gap:.5rem;grid-row-gap:.5rem;grid-column-gap:.5rem;grid-row-gap:.5rem;grid-column-gap:.5rem;grid-row-gap:.5rem;& [part~=outline]{border-style:var(--tw-border-style);border-width:1px;border-color:var(--atomic-neutral);border-radius:1rem;padding:1rem}& atomic-result-placeholder{border-color:#0000}@media not all and (width>=640px){&{grid-template-columns:minmax(0,1fr)}}@media (width>=768px){&{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}@media (width>=1024px){&{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)}}}}}}:host{& .result-link{color:var(--atomic-on-background);&:hover,&:focus-visible{color:var(--atomic-primary);text-decoration:underline}&:focus{outline:none}&:visited{color:var(--atomic-visited)}}& .result-grid{grid-template-columns:repeat(5,minmax(0,1fr));justify-items:center;& a{justify-content:center}}& .result-list{flex-direction:column;display:flex;& .result-item{flex-wrap:wrap;width:100%;max-width:600px;display:flex;& .result-details {align-content:center}}}@media (width>=1024px){& .result-grid{display:grid}}@media not all and (width>=1024px){& .result-grid{flex-direction:column;display:flex}}}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}`;
 export default [css];

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

@@ -4,6 +4,9 @@ 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 { buildProductListing, buildSearch, } from '@coveo/headless/commerce';
+import { html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
 import { renderFieldsetGroup } from "../../common/fieldset-group.js";
 import { createAppLoadedListener } from "../../common/interface/store.js";
 import { renderChoices } from "../../common/items-per-page/choices.js";
@@ -16,9 +19,6 @@ import { bindings } from "../../../decorators/bindings.js";
 import { errorGuard } from "../../../decorators/error-guard";
 import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js";
 import { randomID } from "../../../utils/utils.js";
-import { buildSearch, buildProductListing, } from '@coveo/headless/commerce';
-import { html, LitElement } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
 /**
  * The `atomic-commerce-products-per-page` component lets the end user select how many products to display per page.
  *

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

@@ -4,6 +4,9 @@ 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 { buildProductListing, buildSearch, } from '@coveo/headless/commerce';
+import { html, LitElement, unsafeCSS } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
 import { bindStateToController } from "../../../decorators/bind-state";
 import { bindingGuard } from "../../../decorators/binding-guard";
 import { bindings } from "../../../decorators/bindings";
@@ -11,9 +14,6 @@ import { errorGuard } from "../../../decorators/error-guard";
 import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js";
 import { localizedString } from "../../../directives/localized-string";
 import { AriaLiveRegionController } from "../../../utils/accessibility-utils";
-import { buildProductListing, buildSearch, } from '@coveo/headless/commerce';
-import { html, LitElement, unsafeCSS } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
 import { renderQuerySummaryContainer } from '../../common/query-summary/container';
 import { renderQuerySummaryGuard } from '../../common/query-summary/guard';
 import { getProductQuerySummaryI18nParameters } from '../../common/query-summary/utils';

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

@@ -4,15 +4,15 @@ 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 { watch } from "../../../decorators/watch";
-import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js";
-import { ChildrenUpdateCompleteMixin } from "../../../mixins/children-update-complete-mixin.js";
-import { markParentAsReady } from "../../../utils/init-queue";
 import { buildContext, loadContextActions, } from '@coveo/headless/commerce';
 import { provide } from '@lit/context';
 import i18next from 'i18next';
 import { html, LitElement, unsafeCSS } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
+import { watch } from "../../../decorators/watch";
+import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js";
+import { ChildrenUpdateCompleteMixin } from "../../../mixins/children-update-complete-mixin.js";
+import { markParentAsReady } from "../../../utils/init-queue";
 import { CommonAtomicInterfaceHelper, } from '../../common/interface/interface-common.js';
 import { bindingsContext } from '../../context/bindings-context.js';
 import styles from './atomic-commerce-recommendation-interface.tw.css';
@@ -67,7 +67,9 @@ let AtomicCommerceRecommendationInterface = class AtomicCommerceRecommendationIn
      * Initializes the connection with an already preconfigured [headless commerce engine](https://docs.coveo.com/en/headless/latest/reference/commerce/).
      */
     initializeWithEngine(engine) {
-        return this.internalInitialization(() => (this.engine = engine));
+        return this.internalInitialization(() => {
+            this.engine = engine;
+        });
     }
     /**
      * Updates the locale settings for the commerce recommendation interface and

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

@@ -4,6 +4,13 @@ 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 { NumberValue, Schema, StringValue } from '@coveo/bueno';
+import { buildRecommendations, } from '@coveo/headless/commerce';
+import { html, LitElement, nothing, unsafeCSS } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { keyed } from 'lit/directives/keyed.js';
+import { map } from 'lit/directives/map.js';
+import { when } from 'lit/directives/when.js';
 import { ProductTemplateProvider } from "../product-list/product-template-provider";
 import { renderItemPlaceholders } from "../../common/atomic-result-placeholder/item-placeholders";
 import { renderCarousel } from "../../common/carousel";
@@ -22,14 +29,6 @@ import { withTailwindStyles } from "../../../decorators/with-tailwind-styles";
 import { InitializeBindingsMixin } from "../../../mixins/bindings-mixin";
 import { FocusTargetController } from "../../../utils/accessibility-utils";
 import { randomID } from "../../../utils/utils";
-import { NumberValue } from '@coveo/bueno';
-import { Schema, StringValue } from '@coveo/bueno';
-import { buildRecommendations, } from '@coveo/headless/commerce';
-import { html, LitElement, nothing, unsafeCSS } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { keyed } from 'lit/directives/keyed.js';
-import { map } from 'lit/directives/map.js';
-import { when } from 'lit/directives/when.js';
 import styles from './atomic-commerce-recommendation-list.tw.css';
 /**
  * The `atomic-commerce-recommendation-list` component displays a list of product recommendations by applying one or more product templates.
@@ -121,7 +120,7 @@ let AtomicCommerceRecommendationList = class AtomicCommerceRecommendationList ex
     }
     disconnectedCallback() {
         super.disconnectedCallback();
-        this.unsubscribeSummary && this.unsubscribeSummary();
+        this.unsubscribeSummary?.();
         this.removeEventListener('atomic/selectChildProduct', this.selectChildProductCallback);
     }
     get focusTarget() {

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

@@ -1,3 +1,3 @@
 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-border-style:solid;--tw-font-weight:initial}}}.list-wrapper.placeholder{& .result-component,& table.list-root{display:none}}.list-wrapper:not(.placeholder){& atomic-result-placeholder,& atomic-result-table-placeholder{display:none}}.list-root.loading{animation:2s cubic-bezier(.4,0,.6,1) infinite pulse}@keyframes pulse{50%{opacity:.5}}:host{& [part~=outline][part~=result-list-grid-clickable-container]{border:1px solid #0000;border-radius:1rem;padding:1rem;transition:all .12s ease-out;position:relative;&:hover{border-style:var(--tw-border-style);border-width:1px;border-color:var(--atomic-neutral);box-shadow:0px 10px 25px var(--atomic-neutral);cursor:pointer}}& [part=result-list-grid-clickable]:focus-visible{border-style:var(--tw-border-style);border-width:2px;border-color:var(--atomic-primary);color:var(--atomic-primary);cursor:pointer;text-align:center;border-radius:2px;text-decoration:underline;display:inline-block;position:absolute}& [part=result-list-grid-clickable]:not(:focus){clip:rect(1px,1px,1px,1px);padding:0;position:absolute;overflow:hidden}& .list-wrapper{word-break:break-word}& .list-root.display-grid{justify-content:space-evenly;display:grid;& .result-component{box-sizing:border-box;height:100%}}& .list-root{& [part~=outline]{border-style:var(--tw-border-style);border-width:1px;border-color:var(--atomic-neutral);border-radius:1rem;padding:1rem}& atomic-result-placeholder{border-color:#0000}grid-column-gap:.5rem;grid-row-gap:.5rem;grid-template-columns:repeat(var(--atomic-recs-number-of-columns,1),minmax(0,1fr))}& [part=label]{font-family:var(--atomic-font-family);font-size:var(--atomic-text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height,calc(2/1.5)));--tw-font-weight:var(--atomic-font-bold);font-weight:var(--atomic-font-bold)}}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}`;
+@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-border-style:solid;--tw-font-weight:initial}}}.list-wrapper.placeholder{& .result-component,& table.list-root{display:none}}.list-wrapper:not(.placeholder){& atomic-result-placeholder,& atomic-result-table-placeholder{display:none}}.list-root.loading{animation:2s cubic-bezier(.4,0,.6,1) infinite pulse}@keyframes pulse{50%{opacity:.5}}:host{& [part~=outline][part~=result-list-grid-clickable-container]{border:1px solid #0000;border-radius:1rem;padding:1rem;transition:all .12s ease-out;position:relative;&:hover{border-style:var(--tw-border-style);border-width:1px;border-color:var(--atomic-neutral);box-shadow:0px 10px 25px var(--atomic-neutral);cursor:pointer}}& [part=result-list-grid-clickable]:focus-visible{border-style:var(--tw-border-style);border-width:2px;border-color:var(--atomic-primary);color:var(--atomic-primary);cursor:pointer;text-align:center;border-radius:2px;text-decoration:underline;display:inline-block;position:absolute}& [part=result-list-grid-clickable]:not(:focus){clip:rect(1px,1px,1px,1px);padding:0;position:absolute;overflow:hidden}& .list-wrapper{word-break:break-word}& .list-root.display-grid{justify-content:space-evenly;display:grid;& .result-component{box-sizing:border-box;height:100%}}& .list-root{grid-column-gap:.5rem;grid-row-gap:.5rem;grid-template-columns:repeat(var(--atomic-recs-number-of-columns,1),minmax(0,1fr));& [part~=outline]{border-style:var(--tw-border-style);border-width:1px;border-color:var(--atomic-neutral);border-radius:1rem;padding:1rem}& atomic-result-placeholder{border-color:#0000}}& [part=label]{font-family:var(--atomic-font-family);font-size:var(--atomic-text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height,calc(2/1.5)));--tw-font-weight:var(--atomic-font-bold);font-weight:var(--atomic-font-bold)}}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}`;
 export default [css];

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

@@ -5,15 +5,15 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { buildProductListing, buildSearch, } from '@coveo/headless/commerce';
-import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js";
-import { bindings } from "../../../decorators/bindings";
-import { bindStateToController } from "../../../decorators/bind-state";
 import { html, LitElement } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
+import { bindStateToController } from "../../../decorators/bind-state";
+import { bindingGuard } from "../../../decorators/binding-guard";
+import { bindings } from "../../../decorators/bindings";
+import { errorGuard } from "../../../decorators/error-guard";
+import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js";
 import { renderRefineToggleButton } from '../../common/refine-modal/button';
 import { refineToggleGuard } from '../../common/refine-modal/guard';
-import { errorGuard } from "../../../decorators/error-guard";
-import { bindingGuard } from "../../../decorators/binding-guard";
 /**
  * The `atomic-commerce-refine-toggle` component displays a button that opens a modal containing the facets and the sort components.
  *
@@ -40,7 +40,9 @@ let AtomicCommerceRefineToggle = class AtomicCommerceRefineToggle extends LitEle
         this.modalRef.openButton = this.buttonRef;
     }
     enableModal() {
-        this.modalRef && (this.modalRef.isOpen = true);
+        if (this.modalRef) {
+            this.modalRef.isOpen = true;
+        }
     }
     render() {
         return html `${refineToggleGuard({

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

@@ -4,6 +4,11 @@ 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 { buildSearchBox, buildStandaloneSearchBox, loadQuerySetActions, } from '@coveo/headless/commerce';
+import { html, LitElement, unsafeCSS } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { createRef, ref } from 'lit/directives/ref.js';
 import { booleanConverter } from "../../../converters/boolean-converter";
 import { bindStateToController } from "../../../decorators/bind-state";
 import { bindingGuard } from "../../../decorators/binding-guard";
@@ -15,11 +20,6 @@ import { AriaLiveRegionController } from "../../../utils/accessibility-utils";
 import { hasKeyboard, isMacOS } from "../../../utils/device-utils";
 import { SafeStorage, StorageItems, } from "../../../utils/local-storage-utils";
 import { updateBreakpoints } from "../../../utils/replace-breakpoint";
-import { buildSearchBox, buildStandaloneSearchBox, loadQuerySetActions, } from '@coveo/headless/commerce';
-import { html, LitElement, unsafeCSS } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { createRef, ref } from 'lit/directives/ref.js';
 import { isFocusingOut, once, randomID, spreadProperties, } from '../../../utils/utils';
 import { renderSearchBoxWrapper } from '../../common/search-box/search-box-wrapper';
 import { renderSearchBoxTextArea } from '../../common/search-box/search-text-area';
@@ -308,7 +308,7 @@ let AtomicCommerceSearchBox = class AtomicCommerceSearchBox extends LitElement {
         }
         this.searchBox.submit();
     }
-    onKeyDown(e) {
+    async onKeyDown(e) {
         if (this.isSearchDisabledForEndUser) {
             return;
         }
@@ -321,12 +321,12 @@ let AtomicCommerceSearchBox = class AtomicCommerceSearchBox extends LitElement {
                 break;
             case 'ArrowDown':
                 e.preventDefault();
-                this.suggestionManager.focusNextValue();
+                await this.suggestionManager.focusNextValue();
                 this.announceNewActiveSuggestionToScreenReader();
                 break;
             case 'ArrowUp':
                 e.preventDefault();
-                this.suggestionManager.focusPreviousValue();
+                await this.suggestionManager.focusPreviousValue();
                 this.announceNewActiveSuggestionToScreenReader();
                 break;
             case 'ArrowRight':
@@ -433,8 +433,12 @@ let AtomicCommerceSearchBox = class AtomicCommerceSearchBox extends LitElement {
             : 'search-suggestions-single-list')}
       aria-activedescendant=${this.suggestionManager.activeDescendant}
     >
-      ${this.renderPanel('left', this.suggestionManager.leftSuggestionElements, (el) => (this.suggestionManager.leftPanel = el), () => this.suggestionManager.leftPanel)}
-      ${this.renderPanel('right', this.suggestionManager.rightSuggestionElements, (el) => (this.suggestionManager.rightPanel = el), () => this.suggestionManager.rightPanel)}
+      ${this.renderPanel('left', this.suggestionManager.leftSuggestionElements, (el) => {
+            this.suggestionManager.leftPanel = el;
+        }, () => this.suggestionManager.leftPanel)}
+      ${this.renderPanel('right', this.suggestionManager.rightSuggestionElements, (el) => {
+            this.suggestionManager.rightPanel = el;
+        }, () => this.suggestionManager.rightPanel)}
     </div>`;
     }
     renderPanel(side, elements, setRef, getRef) {
@@ -470,15 +474,15 @@ let AtomicCommerceSearchBox = class AtomicCommerceSearchBox extends LitElement {
         .index=${index}
         .lastIndex=${lastIndex}
         .isDoubleList=${this.suggestionManager.isDoubleList}
-        .onClick=${(e) => {
-            this.suggestionManager.onSuggestionClick(item, e);
+        .onClick=${async (e) => {
+            await this.suggestionManager.onSuggestionClick(item, e);
             if (item.key === 'recent-query-clear') {
                 return;
             }
             this.isExpanded = false;
         }}
-        .onMouseOver=${() => {
-            this.suggestionManager.onSuggestionMouseOver(item, side, id);
+        .onMouseOver=${async () => {
+            await this.suggestionManager.onSuggestionMouseOver(item, side, id);
         }}
       ></atomic-suggestion-renderer>
     `;