@coveo/atomic 3.33.9-pre.f81b55a35b → 3.34.0-pre.00dc0c9faa

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

@@ -31,7 +31,7 @@ import '../atomic-commerce-search-box-instant-products/atomic-commerce-search-bo
 import '../atomic-commerce-search-box-query-suggestions/atomic-commerce-search-box-query-suggestions';
 import '../atomic-commerce-search-box-recent-queries/atomic-commerce-search-box-recent-queries';
 /**
- * The `atomic-commerce-search-box` component enables users to perform product searches with built-in query suggestions and optional redirection to a search results page.
+ * The `atomic-commerce-search-box` component enables users to perform product searches with built-in query suggestions and optional redirection to a search page.
  *
  * @slot default - The default slot where you can add child components to the search box.
  *
@@ -68,8 +68,8 @@ import '../atomic-commerce-search-box-recent-queries/atomic-commerce-search-box-
  * @part recent-query-title - The "recent searches" text of the clear button above suggestions from the `atomic-commerce-search-box-recent-queries` component.
  * @part recent-query-clear - The "clear" text of the clear button above suggestions from the `atomic-commerce-search-box-recent-queries` component.
  *
- * @part instant-results-item - An instant result rendered by an `atomic-commerce-search-box-instant-products` component.
- * @part instant-results-show-all - The clickable suggestion to show all items for the current instant results search rendered by an `atomic-commerce-search-box-instant-products` component.
+ * @part instant-results-item - An instant product rendered by an `atomic-commerce-search-box-instant-products` component.
+ * @part instant-results-show-all - The clickable suggestion to show all items for the current instant product search rendered by an `atomic-commerce-search-box-instant-products` component.
  * @part instant-results-show-all-button - The button inside the clickable suggestion from the `atomic-commerce-search-box-instant-products` component.
  *
  * @event redirect - Event that is emitted when a standalone search box redirection is triggered. By default, the search box will directly change the URL and redirect accordingly, so if you want to handle the redirection differently, use this event.
@@ -117,7 +117,7 @@ let AtomicCommerceSearchBox = class AtomicCommerceSearchBox extends LitElement {
         this.minimumQueryLength = 0;
         /**
          * Whether to clear all active query filters when the end user submits a new query from the search box.
-         * Setting this option to "false" is not recommended & can lead to an increasing number of queries returning no results.
+         * Setting this option to "false" is not recommended & can lead to an increasing number of queries returning no products.
          */
         this.clearFilters = true;
         this.updateBreakpoints = once(() => updateBreakpoints(this));

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

@@ -19,7 +19,7 @@ import { ProductTemplateProvider } from '../product-list/product-template-provid
  *
  * This component is not supported on mobile.
  *
- * @part instant-results-show-all-button - The 'See all results' button.
+ * @part instant-results-show-all-button - The 'See all products' button.
  * @part instant-results-item - The individual instant product item.
  *
  * @slot default - The default slot where the instant products are rendered.
@@ -40,7 +40,7 @@ let AtomicCommerceSearchBoxInstantProducts = class AtomicCommerceSearchBoxInstan
         this.imageSize = 'icon';
     }
     /**
-     * Sets a rendering function to bypass the standard HTML template mechanism for rendering results.
+     * Sets a rendering function to bypass the standard HTML template mechanism for rendering products.
      * You can use this function while working with web frameworks that don't use plain HTML syntax, e.g., React, Angular or Vue.
      *
      * Do not use this method if you integrate Atomic in a plain HTML deployment.
@@ -86,7 +86,7 @@ let AtomicCommerceSearchBoxInstantProducts = class AtomicCommerceSearchBoxInstan
             const interactiveProduct = this.instantProducts.interactiveProduct({
                 options: { product },
             });
-            const partialItem = getPartialInstantItemElement(this.bindings.i18n, this.ariaLabelGenerator?.(this.bindings, product) || product.ec_name, product.permanentid);
+            const partialItem = getPartialInstantItemElement(this.bindings.i18n, 'instant-products-suggestion-label', this.ariaLabelGenerator?.(this.bindings, product) || product.ec_name, product.permanentid);
             const key = `instant-product-${encodeForDomAttribute(product.permanentid)}`;
             const template = html `${keyed(key, html `<atomic-product
             part="outline"
@@ -115,10 +115,13 @@ let AtomicCommerceSearchBoxInstantProducts = class AtomicCommerceSearchBoxInstan
             };
         });
         if (elements.length) {
-            const partialItem = getPartialInstantItemShowAllElement(this.bindings.i18n);
+            const partialItem = getPartialInstantItemShowAllElement(this.bindings.i18n, 'show-all-products');
             elements.push({
                 ...partialItem,
-                content: renderInstantItemShowAllButton({ i18n: this.bindings.i18n }),
+                content: renderInstantItemShowAllButton({
+                    i18n: this.bindings.i18n,
+                    i18nKey: 'show-all-products',
+                }),
                 onSelect: () => {
                     this.bindings.clearSuggestions();
                     this.bindings.searchBoxController.updateText(this.instantProducts.state.query);

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

@@ -25,8 +25,8 @@ 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.
+ * A facet is a list of values for a certain field occurring in the products.
+ * An `atomic-commerce-timeframe-facet` displays a facet of the products for the current query as date intervals.
  *
  * @part facet - The wrapper for the entire facet.
  * @part label-button - The header button to expand/collapse the facet.
@@ -36,7 +36,7 @@ import facetCommonStyles from '../../common/facets/facet-common.tw.css';
  * @part values - The container for the facet values list.
  * @part value-link - A facet value button.
  * @part value-link-selected - A selected facet value button.
- * @part value-count - The result count for a facet value.
+ * @part value-count - The product count for a facet value.
  * @part value-label - The label text of a facet value.
  * @part input-label - The label for date input fields.
  * @part input-start - The start date input field.

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

@@ -24,7 +24,7 @@ let AtomicProduct = class AtomicProduct extends ChildrenUpdateCompleteMixin(LitE
         /**
          * The product link to use when the product is clicked in a grid layout.
          *
-         * @default - An `atomic-result-link` without any customization.
+         * @default - An `atomic-product-link` without any customization.
          */
         this.linkContent = new DocumentFragment();
         /**

package/dist/atomic/components/components/commerce/atomic-product-section-children/atomic-product-section-children.js

@@ -11,7 +11,7 @@ import { ItemSectionMixin } from "../../../mixins/item-section-mixin";
  * This section is meant to render child products, available when using the <atomic-product-children> component.
  *
  * Behavior:
- * * Shows children at the bottom of the result, indented and wrapped in a border.
+ * * Shows children at the bottom of the product, indented and wrapped in a border.
  *
  * @slot default - The child products to display.
  */

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

@@ -12,7 +12,7 @@ import { makeMatchConditions } from '../../common/product-template/product-templ
 import { ProductTemplateController } from '../../common/product-template/product-template-controller';
 import '../atomic-product/atomic-product';
 /**
- * * A product template determines the format of the query results, depending on the conditions that are defined for each template.
+ * * A product template determines the format of the products, depending on the conditions that are defined for each template.
  *
  * A `template` element must be the child of an `atomic-product-template`. Furthermore, an `atomic-commerce-product-list`, `atomic-commerce-recommendation-list`, or `atomic-commerce-search-box-instant-products` must be the parent of each `atomic-product-template`.
  *

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

@@ -6,4 +6,3 @@ export { AtomicFacetPlaceholder } from './atomic-facet-placeholder/atomic-facet-
 export { AtomicIcon } from './atomic-icon/atomic-icon.js';
 export { AtomicLayoutSection } from './atomic-layout-section/atomic-layout-section.js';
 export { AtomicModal } from './atomic-modal/atomic-modal.js';
-export { ValidatePropsController } from './validate-props-controller/validate-props-controller.js';

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

@@ -7,5 +7,4 @@ export default {
     'atomic-icon': async () => await import('./atomic-icon/atomic-icon.js'),
     'atomic-layout-section': async () => await import('./atomic-layout-section/atomic-layout-section.js'),
     'atomic-modal': async () => await import('./atomic-modal/atomic-modal.js'),
-    'validate-props-controller': async () => await import('./validate-props-controller/validate-props-controller.js'),
 };

package/dist/atomic/components/components/common/query-correction/trigger-correction.js

@@ -5,7 +5,7 @@ export const renderTriggerCorrection = ({ props, }) => {
     <p class="text-on-background text-lg leading-6" part="showing-results-for">
       ${localizedString({
         i18n: props.i18n,
-        key: 'showing-results-for',
+        key: props.i18nKeyShowingItemsFor,
         params: { query: html `<b part="highlight">${props.correctedQuery}</b>` },
     })}
     </p>

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

@@ -41,7 +41,7 @@ export const renderRefineModal = ({ props }) => (children) => {
             },
         })(html `
             <span part="footer-button-text" class="mr-1 truncate">
-              ${props.i18n.t('view-results')}
+              ${props.i18n.t(props.i18nFooterButtonTextKey)}
             </span>
             <span part="footer-button-count">
               ${localizedString({

package/dist/atomic/components/components/common/suggestions/instant-item.js

@@ -1,9 +1,9 @@
 import { html, render } from 'lit';
 import { encodeForDomAttribute } from '../../../utils/string-utils';
 import { getClassNameForButtonStyle } from '../button-style';
-export const getPartialInstantItemElement = (i18n, itemTitle, itemUniqueId) => {
+export const getPartialInstantItemElement = (i18n, i18nKey, itemTitle, itemUniqueId) => {
     return {
-        ariaLabel: i18n.t('instant-results-suggestion-label', {
+        ariaLabel: i18n.t(i18nKey, {
             title: itemTitle,
             interpolation: { escapeValue: false },
         }),
@@ -11,19 +11,19 @@ export const getPartialInstantItemElement = (i18n, itemTitle, itemUniqueId) => {
         part: 'instant-results-item',
     };
 };
-export const getPartialInstantItemShowAllElement = (i18n) => {
+export const getPartialInstantItemShowAllElement = (i18n, i18nKey) => {
     return {
         key: 'instant-results-show-all-button',
         part: 'instant-results-show-all',
-        ariaLabel: i18n.t('show-all-results'),
+        ariaLabel: i18n.t(i18nKey),
     };
 };
-export const renderInstantItemShowAllButton = ({ i18n, }) => {
+export const renderInstantItemShowAllButton = ({ i18n, i18nKey, }) => {
     const template = html `<div
     part="instant-results-show-all-button"
     class=${getClassNameForButtonStyle('text-primary')}
   >
-    ${i18n.t('show-all-results')}
+    ${i18n.t(i18nKey)}
   </div>`;
     const container = document.createElement('div');
     render(template, container);

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

@@ -0,0 +1,188 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var AtomicPager_1;
+import { NumberValue, Schema } from '@coveo/bueno';
+import { buildPager, buildSearchStatus, } from '@coveo/headless';
+import { html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { keyed } from 'lit/directives/keyed.js';
+import { when } from 'lit/directives/when.js';
+import { createAppLoadedListener } from "../../common/interface/store";
+import { renderPagerNavigation } from "../../common/pager/pager-navigation";
+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 { InitializeBindingsMixin } from "../../../mixins/bindings-mixin";
+import { randomID } from "../../../utils/utils";
+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 { renderPageButtons, renderPagerNextButton, renderPagerPageButton, renderPagerPreviousButton, } from '../../common/pager/pager-buttons';
+/**
+ * The `atomic-pager` provides buttons that allow the end user to navigate through the different result pages.
+ *
+ * @part buttons - The list of the next/previous buttons and page-buttons.
+ * @part page-buttons - The list of page buttons.
+ * @part page-button - The individual page buttons.
+ * @part active-page-button - The active page button.
+ * @part previous-button - The previous page button.
+ * @part next-button - The next page button.
+ * @part previous-button-icon - The icon displayed on the "previous page" button.
+ * @part next-button-icon - The icon displayed on the "next page" button.
+ *
+ * @event atomic/scrollToTop - Emitted when the user clicks any of the buttons rendered by the component.
+ */
+let AtomicPager = AtomicPager_1 = class AtomicPager extends InitializeBindingsMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.isAppLoaded = false;
+        /**
+         * The maximum number of page buttons to display in the pager.
+         */
+        this.numberOfPages = 5;
+        /**
+         * The SVG icon to render on the "previous page" button.
+         *
+         * - Use a value that starts with `http://`, `https://`, `./`, or `../`, to fetch and display an icon from a given location.
+         * - Use a value that starts with `assets://`, to display an icon from the Atomic package.
+         * - Use a stringified SVG to display it directly.
+         */
+        this.previousButtonIcon = ArrowLeftIcon;
+        /**
+         * The SVG icon to render on the "next page" button.
+         *
+         * - Use a value that starts with `http://`, `https://`, `./`, or `../`, to fetch and display an icon from a given location.
+         * - Use a value that starts with `assets://`, to display an icon from the Atomic package.
+         * - Use a stringified SVG to display it directly.
+         */
+        this.nextButtonIcon = ArrowRightIcon;
+        this.radioGroupName = randomID('atomic-pager-');
+    }
+    initialize() {
+        this.validateProps();
+        this.searchStatus = buildSearchStatus(this.bindings.engine);
+        this.pager = buildPager(this.bindings.engine, {
+            options: { numberOfPages: this.numberOfPages },
+        });
+        createAppLoadedListener(this.bindings.store, (isAppLoaded) => {
+            this.isAppLoaded = isAppLoaded;
+        });
+    }
+    willUpdate(changedProperties) {
+        if (changedProperties.has('numberOfPages')) {
+            this.validateProps();
+        }
+    }
+    render() {
+        const currentGroupName = `${this.radioGroupName}-${this.pagerState.currentPages.join('-')}`;
+        return html `${when(!this.searchStatusState.hasError &&
+            this.searchStatusState.hasResults &&
+            this.isAppLoaded, () => html `
+      ${renderPagerNavigation({
+            props: {
+                i18n: this.bindings.i18n,
+            },
+        })(html `
+          ${renderPagerPreviousButton({
+            props: {
+                icon: this.previousButtonIcon,
+                disabled: !this.pagerState.hasPreviousPage,
+                i18n: this.bindings.i18n,
+                onClick: () => {
+                    this.pager.previousPage();
+                    this.focusOnFirstResultAndScrollToTop();
+                },
+            },
+        })}
+          ${renderPageButtons({
+            props: {
+                i18n: this.bindings.i18n,
+            },
+        })(html `${this.pagerState.currentPages.map((pageNumber, index) => keyed(`page-${pageNumber}-${index}`, renderPagerPageButton({
+            props: {
+                isSelected: this.pager.isCurrentPage(pageNumber),
+                ariaLabel: this.bindings.i18n.t('page-number', {
+                    pageNumber,
+                }),
+                onChecked: () => {
+                    this.pager.selectPage(pageNumber);
+                    this.focusOnFirstResultAndScrollToTop();
+                },
+                page: pageNumber,
+                groupName: currentGroupName,
+                text: pageNumber.toLocaleString(this.bindings.i18n.language),
+            },
+        })))}`)}
+          ${renderPagerNextButton({
+            props: {
+                icon: this.nextButtonIcon,
+                disabled: !this.pagerState.hasNextPage,
+                i18n: this.bindings.i18n,
+                onClick: () => {
+                    this.pager.nextPage();
+                    this.focusOnFirstResultAndScrollToTop();
+                },
+            },
+        })}
+        `)}`)}`;
+    }
+    validateProps() {
+        try {
+            AtomicPager_1.propsSchema.validate({
+                numberOfPages: this.numberOfPages,
+            });
+        }
+        catch (error) {
+            this.error = error;
+            return;
+        }
+    }
+    async focusOnFirstResultAndScrollToTop() {
+        await this.bindings.store.state.resultList?.focusOnFirstResultAfterNextSearch();
+        this.dispatchEvent(new CustomEvent('atomic/scrollToTop'));
+    }
+};
+AtomicPager.propsSchema = new Schema({
+    numberOfPages: new NumberValue({ min: 0 }),
+});
+__decorate([
+    state()
+], AtomicPager.prototype, "bindings", void 0);
+__decorate([
+    state()
+], AtomicPager.prototype, "error", void 0);
+__decorate([
+    state()
+], AtomicPager.prototype, "isAppLoaded", void 0);
+__decorate([
+    bindStateToController('pager'),
+    state()
+], AtomicPager.prototype, "pagerState", void 0);
+__decorate([
+    bindStateToController('searchStatus'),
+    state()
+], AtomicPager.prototype, "searchStatusState", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'number-of-pages', type: Number })
+], AtomicPager.prototype, "numberOfPages", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'previous-button-icon', type: String })
+], AtomicPager.prototype, "previousButtonIcon", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'next-button-icon', type: String })
+], AtomicPager.prototype, "nextButtonIcon", void 0);
+__decorate([
+    bindingGuard(),
+    errorGuard()
+], AtomicPager.prototype, "render", null);
+AtomicPager = AtomicPager_1 = __decorate([
+    customElement('atomic-pager'),
+    bindings(),
+    withTailwindStyles
+], AtomicPager);
+export { AtomicPager };

package/dist/atomic/components/components/search/atomic-result-section-actions/atomic-result-section-actions.js

@@ -0,0 +1,25 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { ItemSectionMixin } from "../../../mixins/item-section-mixin";
+/**
+ * This section allows the information seeker to perform an action on an item without having to view its details.
+ * For example, in Commerce you can add an item to the cart directly or add it to a wish list to view at a later time.
+ *
+ * Behavior:
+ * * Exposes the `--line-height` CSS variable so child elements can adjust to the current line height.
+ * ** You should ensure that elements inside of it have `height: var(--line-height)`.
+ * * Is a wrapping flexbox with a gap.
+ * * May appear over, next to, or beneath the visual section.
+ */
+let AtomicResultSectionActions = class AtomicResultSectionActions extends ItemSectionMixin(LitElement, css`/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */atomic-result-section-actions{text-align:left;&.with-sections{overflow:hidden;text-overflow:ellipsis}&.with-sections{display:flex;flex-wrap:wrap;gap:.5rem;grid-area:actions;max-height:calc(var(--row-height, 2rem)*2 + .5rem);--row-height:2rem;atomic-result-quickview{display:inline-block}@media (width >= 1024px){&.display-list{&.density-comfortable{margin-bottom:1.5rem}&.density-compact,&.density-normal{margin-bottom:1rem}}&.display-grid{&.density-comfortable{margin-top:2.25rem;--row-height:2.5rem}&.density-normal{margin-top:1.75rem}&.density-compact,&.density-normal{--font-size:var(--atomic-text-sm);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height)}&.density-compact{margin-top:1.25rem}}}@media not all and (width >= 1024px){&.display-list{--row-height:2.5rem;&.density-comfortable{margin-top:1rem}&.density-normal{margin-top:.75rem}&.density-compact{margin-top:.5em}}&.display-grid{&.image-large{--row-height:2.5rem;&.density-comfortable{margin-top:1rem}&.density-normal{margin-top:.75rem}&.density-compact{margin-top:.5em}}&.image-icon,&.image-none,&.image-small{&.density-comfortable{margin-top:1.25rem}&.density-normal{margin-top:1rem}&.density-compact{margin-top:.75rem}}}}&.display-table{&.density-comfortable{margin-bottom:1.5rem}&.density-compact,&.density-normal{margin-bottom:1rem}}}}`) {
+};
+AtomicResultSectionActions = __decorate([
+    customElement('atomic-result-section-actions')
+], AtomicResultSectionActions);
+export { AtomicResultSectionActions };

package/dist/atomic/components/components/search/atomic-result-section-badges/atomic-result-section-badges.js

@@ -0,0 +1,24 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { ItemSectionMixin } from "../../../mixins/item-section-mixin";
+/**
+ * This section provides badges that highlight special features of the item.
+ *
+ * Behavior:
+ * * Exposes the `--line-height` CSS variable so child elements can adjust to the current line height.
+ * ** You should ensure that elements inside of it have `height: var(--line-height)`.
+ * * Is a wrapping flexbox with a gap.
+ * * May appear over, next to, or beneath the visual section.
+ */
+let AtomicResultSectionBadges = class AtomicResultSectionBadges extends ItemSectionMixin(LitElement, css`/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */atomic-result-section-badges{text-align:left;&.with-sections{overflow:hidden;text-overflow:ellipsis}&.with-sections{display:flex;flex-wrap:wrap;gap:.5rem;grid-area:badges;margin-bottom:1rem;max-height:calc(var(--row-height, 2rem)*2 + .5rem);--row-height:2rem;@media (width >= 1024px){&.display-list{&.density-comfortable{margin-bottom:1.5rem}}&.display-grid{--font-size:var(--atomic-text-sm);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);&.image-icon{&.density-comfortable{margin-bottom:2rem}&.density-normal{margin-bottom:1.5rem}}}}@media not all and (width >= 1024px){&.display-list{--font-size:var(--atomic-text-sm);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height)}&.display-grid{&.image-icon,&.image-none,&.image-small{--font-size:var(--atomic-text-sm);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height)}}}&.display-table{&.density-comfortable{margin-bottom:1.5rem}}}}`) {
+};
+AtomicResultSectionBadges = __decorate([
+    customElement('atomic-result-section-badges')
+], AtomicResultSectionBadges);
+export { AtomicResultSectionBadges };

package/dist/atomic/components/components/search/atomic-result-section-bottom-metadata/atomic-result-section-bottom-metadata.js

@@ -0,0 +1,25 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { ItemSectionMixin } from "../../../mixins/item-section-mixin";
+/**
+ * This section displays additional descriptive information about the item.
+ *
+ * Behavior:
+ * * Has a maximum height of two lines.
+ * ** We recommend that you use `atomic-result-fields-list` to ensure that the fields in this section don’t overflow.
+ * * Exposes the `--line-height` variable so child elements can adjust to the current line height.
+ * * Has a defined CSS `color` property for text.
+ * * Has a font weight.
+ */
+let AtomicResultSectionBottomMetadata = class AtomicResultSectionBottomMetadata extends ItemSectionMixin(LitElement, css`/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */atomic-result-section-bottom-metadata{&.with-sections{overflow:hidden;text-overflow:ellipsis}&.with-sections{color:var(--atomic-neutral-dark);grid-area:bottom-metadata;--font-size:var(--atomic-text-sm);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);@media (width >= 1024px){&.display-list{&.density-comfortable{margin-top:1.25rem;max-height:4rem}&.density-normal{margin-top:.875rem;max-height:3.5rem}&.density-compact{margin-top:.6875rem;max-height:3.25rem}}&.display-grid{&.density-comfortable{margin-top:1.75rem;max-height:4rem}&.density-normal{margin-top:1.375rem;max-height:3.5rem}&.density-compact{margin-top:.9375rem;max-height:3.25rem}}}@media not all and (width >= 1024px){&.display-list{&.density-comfortable{margin-top:.75rem;max-height:4rem}&.density-normal{margin-top:.625rem;max-height:3.5rem}&.density-compact{margin-top:.4375rem;max-height:3.25rem}}&.display-grid{&.image-large{&.density-comfortable{margin-top:.75rem;max-height:4rem}&.density-normal{margin-top:.625rem;max-height:3.5rem}&.density-compact{margin-top:.4375rem;max-height:3.25rem}}&.image-icon,&.image-none,&.image-small{max-height:3rem;&.density-comfortable{margin-top:1rem}&.density-normal{margin-top:.75rem}&.density-compact{margin-top:.5rem}}}}&.display-table{&.density-comfortable{margin-top:1.25rem;max-height:4rem}&.density-normal{margin-top:.875rem;max-height:3.5rem}&.density-compact{margin-top:.6875rem;max-height:3.25rem}}}}`) {
+};
+AtomicResultSectionBottomMetadata = __decorate([
+    customElement('atomic-result-section-bottom-metadata')
+], AtomicResultSectionBottomMetadata);
+export { AtomicResultSectionBottomMetadata };

package/dist/atomic/components/components/search/atomic-result-section-children/atomic-result-section-children.js

@@ -0,0 +1,21 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { ItemSectionMixin } from "../../../mixins/item-section-mixin";
+/**
+ * This section displays the folded results, available when using the <atomic-result-children> component.
+ *
+ * Behavior:
+ * * Shows children at the bottom of the result, indented and wrapped in a border.
+ */
+let AtomicResultSectionChildren = class AtomicResultSectionChildren extends ItemSectionMixin(LitElement, css`/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */@layer properties;atomic-result-section-children{&.with-sections{grid-area:children;@media (width >= 1024px){&.display-list{atomic-insight-result-children::part(children-root),atomic-result-children::part(children-root){border-color:var(--atomic-neutral);border-radius:16px;border-style:var(--tw-border-style);border-width:1px}&.density-comfortable{atomic-insight-result-children,atomic-result-children{&::part(children-root){border-color:var(--atomic-neutral);border-radius:16px;border-style:var(--tw-border-style);border-width:1px;margin-top:1.25rem;padding:1.75rem}&::part(show-hide-button){margin-bottom:1.25rem;margin-top:1.25rem}}&.child-result:not(.last-child),.placeholder{margin-bottom:1.75rem}}&.density-normal{margin-top:1rem;atomic-insight-result-children,atomic-result-children{&::part(children-root){border-color:var(--atomic-neutral);border-radius:16px;border-style:var(--tw-border-style);border-width:1px;margin-top:.875rem;padding:1.5rem}&::part(show-hide-button){margin-bottom:.875rem;margin-top:.875rem}}&.child-result:not(.last-child),.placeholder{margin-bottom:1.5rem}}&.density-compact{margin-top:.75rem;atomic-insight-result-children,atomic-result-children{&::part(children-root){border-color:var(--atomic-neutral);border-radius:16px;border-style:var(--tw-border-style);border-width:1px;margin-top:.475rem;padding:1rem}&::part(show-hide-button){margin-bottom:.475rem;margin-top:.475rem}}&.child-result:not(.last-child),.placeholder{margin-bottom:1rem}}}}@media not all and (width >= 1024px){&.display-list{atomic-insight-result-children::part(children-root),atomic-result-children::part(children-root){border-top:1px var(--tw-border-style) var(--atomic-neutral)}}&.display-grid{&.image-large{atomic-insight-result-children::part(children-root),atomic-result-children::part(children-root){border-top:1px var(--tw-border-style) var(--atomic-neutral)}}&.image-icon,&.image-none,&.image-small{&.density-comfortable{margin-top:1.25rem;atomic-insight-result-children,atomic-result-children{&::part(children-root){margin-inline:calc(var(--spacing, .25rem)*-4);margin-top:calc(var(--spacing, .25rem)*4);padding-top:1.75rem;padding-inline:calc(var(--spacing, .25rem)*4)}&::part(show-hide-button){margin-bottom:1.25rem;margin-top:1.25rem}}&.child-result:not(.last-child),.placeholder{margin-bottom:1.75rem}}&.density-normal{margin-top:1rem;atomic-insight-result-children,atomic-result-children{&::part(children-root){margin-inline:calc(var(--spacing, .25rem)*-4);margin-top:calc(var(--spacing, .25rem)*4);padding-top:1.5rem;padding-inline:calc(var(--spacing, .25rem)*4)}&::part(show-hide-button){margin-bottom:.875rem;margin-top:.875rem}}&.child-result:not(.last-child),.placeholder{margin-bottom:1.5rem}}&.density-compact{margin-top:.75rem;atomic-insight-result-children,atomic-result-children{&::part(children-root){margin-inline:calc(var(--spacing, .25rem)*-4);margin-top:calc(var(--spacing, .25rem)*4);padding-top:1rem;padding-inline:calc(var(--spacing, .25rem)*4)}&::part(show-hide-button){margin-bottom:.475rem;margin-top:.475rem}}&.child-result:not(.last-child),.placeholder{margin-bottom:1rem}}}}}&.display-table{atomic-insight-result-children::part(children-root),atomic-result-children::part(children-root){border-color:var(--atomic-neutral);border-radius:16px;border-style:var(--tw-border-style);border-width:1px}&.density-comfortable{atomic-insight-result-children,atomic-result-children{&::part(children-root){border-color:var(--atomic-neutral);border-radius:16px;border-style:var(--tw-border-style);border-width:1px;margin-top:1.25rem;padding:1.75rem}&::part(show-hide-button){margin-bottom:1.25rem;margin-top:1.25rem}}&.child-result:not(.last-child),.placeholder{margin-bottom:1.75rem}}&.density-normal{margin-top:1rem;atomic-insight-result-children,atomic-result-children{&::part(children-root){border-color:var(--atomic-neutral);border-radius:16px;border-style:var(--tw-border-style);border-width:1px;margin-top:.875rem;padding:1.5rem}&::part(show-hide-button){margin-bottom:.875rem;margin-top:.875rem}}&.child-result:not(.last-child),.placeholder{margin-bottom:1.5rem}}&.density-compact{margin-top:.75rem;atomic-insight-result-children,atomic-result-children{&::part(children-root){border-color:var(--atomic-neutral);border-radius:16px;border-style:var(--tw-border-style);border-width:1px;margin-top:.475rem;padding:1rem}&::part(show-hide-button){margin-bottom:.475rem;margin-top:.475rem}}&.child-result:not(.last-child),.placeholder{margin-bottom:1rem}}}}}@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)))){*,::backdrop,:after,:before{--tw-border-style:solid}}}`) {
+};
+AtomicResultSectionChildren = __decorate([
+    customElement('atomic-result-section-children')
+], AtomicResultSectionChildren);
+export { AtomicResultSectionChildren };

package/dist/atomic/components/components/search/atomic-result-section-emphasized/atomic-result-section-emphasized.js

@@ -0,0 +1,23 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { ItemSectionMixin } from "../../../mixins/item-section-mixin";
+/**
+ * This section displays the field that's important for its search criteria.
+ * For example, in Commerce, a product's cost is often more important than the title itself.
+ *
+ * Behavior:
+ * * Has a very large font size.
+ * * Is the second closest element beneath the title section.
+ */
+let AtomicResultSectionEmphasized = class AtomicResultSectionEmphasized extends ItemSectionMixin(LitElement, css`/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */atomic-result-section-emphasized{font-weight:500;--font-size:var(--atomic-text-2xl);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);margin-top:.5rem;&.with-sections{grid-area:emphasized;overflow:hidden;text-overflow:ellipsis}}`) {
+};
+AtomicResultSectionEmphasized = __decorate([
+    customElement('atomic-result-section-emphasized')
+], AtomicResultSectionEmphasized);
+export { AtomicResultSectionEmphasized };

package/dist/atomic/components/components/search/atomic-result-section-excerpt/atomic-result-section-excerpt.js

@@ -0,0 +1,24 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { ItemSectionMixin } from "../../../mixins/item-section-mixin";
+/**
+ * This section contains an informative summary of the item's content.
+ *
+ * Behavior:
+ * * Has a fixed height of one to three lines, depending on the layout and density.
+ * * Ellipses overflowing text.
+ * * Exposes the `--line-height` CSS variable so child elements can adjust to the current line height.
+ * * Has a defined CSS `color` property for text.
+ */
+let AtomicResultSectionExcerpt = class AtomicResultSectionExcerpt extends ItemSectionMixin(LitElement, css`/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */atomic-result-section-excerpt{&.with-sections{text-overflow:ellipsis}&.with-sections{color:var(--atomic-neutral-dark);display:-webkit-box;grid-area:excerpt;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;@media (width >= 1024px){&.density-comfortable{--font-size:var(--atomic-text-lg);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);-webkit-line-clamp:3}&.density-comfortable,&.density-compact{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical}&.density-compact{-webkit-line-clamp:1}&.display-list{&.density-comfortable{margin-top:1.75rem;max-height:4.5rem}&.density-normal{margin-top:1.25rem;max-height:2.5rem}&.density-compact{margin-top:1rem;max-height:1.25rem}}&.display-grid{&.density-comfortable{margin-top:2.25rem}&.density-normal{margin-top:1.75rem}&.density-compact{margin-top:1.25rem}}}@media not all and (width >= 1024px){&.display-list{&.density-comfortable,&.density-normal{max-height:2.5rem}&.density-comfortable{margin-top:1.25rem}&.density-normal{margin-top:1rem}}&.display-grid{&.image-large{&.density-comfortable,&.density-normal{max-height:2.5rem}&.density-comfortable{margin-top:1.25rem}&.density-normal{margin-top:1rem}}&.image-icon,&.image-none,&.image-small{&.density-comfortable{margin-top:1.25rem}&.density-normal{margin-top:1rem}&.density-compact{display:-webkit-box;margin-top:.75rem;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:1}}}}&.display-table{&.density-comfortable{margin-top:1.75rem;max-height:4.5rem}&.density-normal{margin-top:1.25rem;max-height:2.5rem}&.density-compact{margin-top:1rem;max-height:1.25rem}}}}`) {
+};
+AtomicResultSectionExcerpt = __decorate([
+    customElement('atomic-result-section-excerpt')
+], AtomicResultSectionExcerpt);
+export { AtomicResultSectionExcerpt };

package/dist/atomic/components/components/search/atomic-result-section-title/atomic-result-section-title.js

@@ -0,0 +1,24 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { ItemSectionMixin } from "../../../mixins/item-section-mixin";
+/**
+ * This section identifies the item by its name, and its main use is to make the result list scannable.
+ * This is usually the page title.
+ *
+ * Behavior:
+ * * Has a fixed height of two lines on grid layouts.
+ * * Exposes the `--line-height` CSS variable so child elements can adjust to the current line height.
+ * * Has a defined CSS `color` property for text.
+ */
+let AtomicResultSectionTitle = class AtomicResultSectionTitle extends ItemSectionMixin(LitElement, css`/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */atomic-result-section-title{&.with-sections{overflow:hidden;text-overflow:ellipsis}&.with-sections{color:var(--atomic-on-background);grid-area:title;--font-size:var(--atomic-text-xl);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);&.density-comfortable{--font-size:var(--atomic-text-2xl);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height)}@media (width >= 1024px){&.display-grid{display:-webkit-box;overflow:hidden;word-break:break-word;-webkit-box-orient:vertical;-webkit-line-clamp:2}}@media not all and (width >= 1024px){&.display-list{--font-size:var(--atomic-text-xl);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height)}&.display-grid{&.image-large{--font-size:var(--atomic-text-xl);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio))}&.image-icon,&.image-large,&.image-none,&.image-small{font-size:var(--font-size);line-height:var(--line-height)}&.image-icon,&.image-none,&.image-small{--font-size:var(--atomic-text-lg);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));display:-webkit-box;max-height:3rem;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2}}}}}`) {
+};
+AtomicResultSectionTitle = __decorate([
+    customElement('atomic-result-section-title')
+], AtomicResultSectionTitle);
+export { AtomicResultSectionTitle };

package/dist/atomic/components/components/search/atomic-result-section-title-metadata/atomic-result-section-title-metadata.js

@@ -0,0 +1,24 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { ItemSectionMixin } from "../../../mixins/item-section-mixin";
+/**
+ * This section surfaces some fields that are directly related to the title of the item.
+ * For example, in Commerce, this could be the item's rating, which is tied to the nature of the product itself,
+ * rather than to the product's description.
+ *
+ * Behavior:
+ * * Has a very small font size.
+ * * Is the closest element beneath the title section.
+ */
+let AtomicResultSectionTitleMetadata = class AtomicResultSectionTitleMetadata extends ItemSectionMixin(LitElement, css`/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */atomic-result-section-title-metadata{--font-size:var(--atomic-text-sm);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);&.with-sections{grid-area:title-metadata;margin-top:.475rem;overflow:hidden;text-overflow:ellipsis}}`) {
+};
+AtomicResultSectionTitleMetadata = __decorate([
+    customElement('atomic-result-section-title-metadata')
+], AtomicResultSectionTitleMetadata);
+export { AtomicResultSectionTitleMetadata };