@coveo/atomic 3.47.1 → 3.49.0

package/dist/atomic/components/components/ipx/atomic-ipx-result-link/atomic-ipx-result-link.js

@@ -0,0 +1,141 @@
+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 { isUndefined } from '@coveo/bueno';
+import { loadIPXActionsHistoryActions } from '@coveo/headless';
+import { html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { when } from 'lit/directives/when.js';
+import { getAttributesFromLinkSlotContent } from "../../common/item-link/attributes-slot";
+import { renderLinkWithItemAnalytics } from "../../common/item-link/item-link";
+import { createInteractiveResultContextController } from "../../search/result-template-component-utils/context/interactive-result-context-controller";
+import { createResultContextController } from "../../search/result-template-component-utils/context/result-context-controller";
+import { bindingGuard } from "../../../decorators/binding-guard";
+import { bindings } from "../../../decorators/bindings";
+import { errorGuard } from "../../../decorators/error-guard";
+import { LightDomMixin } from "../../../mixins/light-dom";
+import { SlotsForNoShadowDOMMixin, } from "../../../mixins/slots-for-no-shadow-dom-mixin";
+import { buildCustomEvent } from "../../../utils/event-utils";
+import { buildStringTemplateFromResult } from "../../../utils/result-utils";
+import "../../search/atomic-result-text/atomic-result-text";
+import styles from './atomic-ipx-result-link.tw.css';
+/**
+ * The `atomic-ipx-result-link` component automatically transforms a search result title into a clickable link that points to the original item.
+ *
+ * **Note:** This is an experimental internal component not intended for general use.
+ *
+ * @slot default - Lets you display alternative content inside the link
+ * @slot attributes - Lets you pass [attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes) down to the link element, overriding other attributes, to be used exclusively with an "a" tag such as `<a slot="attributes" target="_blank" download></a>`.
+ */
+let AtomicIpxResultLink = class AtomicIpxResultLink extends LightDomMixin(SlotsForNoShadowDOMMixin(LitElement)) {
+    constructor() {
+        super(...arguments);
+        this.resultContext = createResultContextController(this);
+        this.interactiveResultContext = createInteractiveResultContextController(this);
+    }
+    initialize() {
+        if (!this.result && this.resultContext.item) {
+            const item = this.resultContext.item;
+            if ('result' in item) {
+                this.result = item.result;
+            }
+            else {
+                this.result = item;
+            }
+        }
+        if (!this.interactiveResult &&
+            this.interactiveResultContext.interactiveItem) {
+            this.interactiveResult = this.interactiveResultContext.interactiveItem;
+        }
+        this.dispatchEvent(buildCustomEvent('atomic/resolveStopPropagation', (stopPropagation) => {
+            this.stopPropagation = stopPropagation;
+        }));
+        this.actionsHistoryActions = loadIPXActionsHistoryActions(this.bindings.engine);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.removeLinkEventHandlers) {
+            this.removeLinkEventHandlers();
+            this.removeLinkEventHandlers = undefined;
+        }
+    }
+    onSelect() {
+        const resultPermanentId = this.result.raw.permanentid;
+        if (resultPermanentId && this.actionsHistoryActions) {
+            const action = this.actionsHistoryActions.addPageViewEntryInActionsHistory(resultPermanentId);
+            this.bindings.engine.dispatch(action);
+        }
+        this.interactiveResult.select();
+    }
+    willUpdate(changedProperties) {
+        super.willUpdate(changedProperties);
+        this.linkAttributes = getAttributesFromLinkSlotContent(this, 'attributes');
+    }
+    render() {
+        return html `${when(this.result && this.interactiveResult, () => {
+            const result = this.result;
+            const interactiveResult = this.interactiveResult;
+            const href = isUndefined(this.hrefTemplate)
+                ? result.clickUri
+                : buildStringTemplateFromResult(this.hrefTemplate, result, this.bindings);
+            return renderLinkWithItemAnalytics({
+                props: {
+                    href,
+                    onSelect: () => this.onSelect(),
+                    onBeginDelayedSelect: () => interactiveResult.beginDelayedSelect(),
+                    onCancelPendingSelect: () => interactiveResult.cancelPendingSelect(),
+                    attributes: this.linkAttributes,
+                    stopPropagation: this.stopPropagation,
+                    onInitializeLink: (cleanupCallback) => {
+                        if (this.removeLinkEventHandlers) {
+                            this.removeLinkEventHandlers();
+                        }
+                        this.removeLinkEventHandlers = cleanupCallback;
+                    },
+                },
+            })(html `
+        ${this.renderDefaultSlotContent(html `<atomic-result-text
+            field="title"
+            default="no-title"
+          ></atomic-result-text>`)}
+      `);
+        })}`;
+    }
+};
+AtomicIpxResultLink.styles = styles;
+__decorate([
+    property({ reflect: true, attribute: 'href-template' })
+], AtomicIpxResultLink.prototype, "hrefTemplate", void 0);
+__decorate([
+    state()
+], AtomicIpxResultLink.prototype, "bindings", void 0);
+__decorate([
+    state()
+], AtomicIpxResultLink.prototype, "error", void 0);
+__decorate([
+    state()
+], AtomicIpxResultLink.prototype, "linkAttributes", void 0);
+__decorate([
+    state()
+], AtomicIpxResultLink.prototype, "stopPropagation", void 0);
+__decorate([
+    state()
+], AtomicIpxResultLink.prototype, "result", void 0);
+__decorate([
+    state()
+], AtomicIpxResultLink.prototype, "interactiveResult", void 0);
+__decorate([
+    state()
+], AtomicIpxResultLink.prototype, "actionsHistoryActions", void 0);
+__decorate([
+    bindingGuard(),
+    errorGuard()
+], AtomicIpxResultLink.prototype, "render", null);
+AtomicIpxResultLink = __decorate([
+    customElement('atomic-ipx-result-link'),
+    bindings()
+], AtomicIpxResultLink);
+export { AtomicIpxResultLink };

package/dist/atomic/components/components/ipx/atomic-ipx-result-link/atomic-ipx-result-link.tw.css.js

@@ -0,0 +1,3 @@
+import { css } from 'lit';
+const styles = css`/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */atomic-ipx-result-link a{color:var(--atomic-on-background);&:focus-visible,&:hover{color:var(--atomic-primary);text-decoration:underline}&:focus{outline:none}&:visited{color:var(--atomic-visited)}}`;
+export default styles;

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

@@ -1,5 +1,7 @@
 // Auto-generated file
 export { AtomicIpxButton } from './atomic-ipx-button/atomic-ipx-button.js';
 export { AtomicIpxEmbedded } from './atomic-ipx-embedded/atomic-ipx-embedded.js';
+export { AtomicIpxModal } from './atomic-ipx-modal/atomic-ipx-modal.js';
+export { AtomicIpxResultLink } from './atomic-ipx-result-link/atomic-ipx-result-link.js';
 export { AtomicIpxTab } from './atomic-ipx-tab/atomic-ipx-tab.js';
 export { AtomicIpxTabs } from './atomic-ipx-tabs/atomic-ipx-tabs.js';

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

@@ -2,6 +2,8 @@
 export default {
     'atomic-ipx-button': async () => await import('./atomic-ipx-button/atomic-ipx-button.js'),
     'atomic-ipx-embedded': async () => await import('./atomic-ipx-embedded/atomic-ipx-embedded.js'),
+    'atomic-ipx-modal': async () => await import('./atomic-ipx-modal/atomic-ipx-modal.js'),
+    'atomic-ipx-result-link': async () => await import('./atomic-ipx-result-link/atomic-ipx-result-link.js'),
     'atomic-ipx-tab': async () => await import('./atomic-ipx-tab/atomic-ipx-tab.js'),
     'atomic-ipx-tabs': async () => await import('./atomic-ipx-tabs/atomic-ipx-tabs.js'),
 };

package/dist/atomic/components/components/recommendations/atomic-recs-list/atomic-recs-list.js

@@ -0,0 +1,437 @@
+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 AtomicRecsList_1;
+import { NumberValue, Schema, StringValue } from '@coveo/bueno';
+import { buildRecommendationList, buildInteractiveResult as buildRecsInteractiveResult, loadConfigurationActions, } from '@coveo/headless/recommendation';
+import { css, html, LitElement, nothing } 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 { renderItemPlaceholders } from "../../common/atomic-result-placeholder/item-placeholders";
+import { renderCarousel } from "../../common/carousel";
+import { renderHeading } from "../../common/heading";
+import { createAppLoadedListener } from "../../common/interface/store";
+import { renderDisplayWrapper } from "../../common/item-list/display-wrapper";
+import { renderGridLayout } from "../../common/item-list/grid-layout";
+import { ItemListCommon, } from "../../common/item-list/item-list-common";
+import { ResultTemplateProvider } from "../../common/item-list/result-template-provider";
+import { getItemListDisplayClasses, } from "../../common/layout/item-layout-utils";
+import { ValidatePropsController } from "../../common/validate-props-controller/validate-props-controller";
+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 { ChildrenUpdateCompleteMixin } from "../../../mixins/children-update-complete-mixin";
+import { FocusTargetController } from "../../../utils/accessibility-utils";
+import { randomID } from "../../../utils/utils";
+import '../atomic-recs-result/atomic-recs-result';
+/**
+ * The `atomic-recs-list` component displays recommendations by applying one or more result templates.
+ *
+ * @slot default - The default slot where to insert the template element.
+ * @part result-list - The element containing the list of results.
+ * @part result-list-grid-clickable-container - The parent of the result and the clickable link encompassing it.
+ * @part result-list-grid-clickable - The clickable link encompassing the result.
+ * @part label - The label of the result list.
+ * @part previous-button - The previous button.
+ * @part next-button - The next button.
+ * @part indicators - The list of indicators.
+ * @part indicator - A single indicator.
+ * @part active-indicator - The active indicator.
+ */
+let AtomicRecsList = AtomicRecsList_1 = class AtomicRecsList extends ChildrenUpdateCompleteMixin(LitElement) {
+    constructor() {
+        super();
+        this.loadingFlag = randomID('firstRecommendationLoaded-');
+        this.isAppLoaded = false;
+        this.isEveryResultReady = false;
+        this.resultTemplateRegistered = false;
+        this.templateHasError = false;
+        this.currentPage = 0;
+        /**
+         * The Recommendation identifier used by the Coveo platform to retrieve recommended documents.
+         * Make sure to set a different value for each atomic-recs-list in your page.
+         */
+        this.recommendation = 'Recommendation';
+        /**
+         * The layout to apply when displaying results themselves. This does not affect the display of the surrounding list itself.
+         * To modify the number of recommendations per column, modify the --atomic-recs-number-of-columns CSS variable.
+         */
+        this.display = 'list';
+        /**
+         * The spacing of various elements in the result list, including the gap between results, the gap between parts of a result, and the font sizes of different parts in a result.
+         */
+        this.density = 'normal';
+        /**
+         * The expected size of the image displayed in the results.
+         */
+        this.imageSize = 'small';
+        /**
+         * The total number of recommendations to display.
+         * This does not modify the number of recommendations per column. To do so, modify the --atomic-recs-number-of-columns CSS variable.
+         */
+        this.numberOfRecommendations = 10;
+        /**
+         * The [heading level](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements) to use for the heading label, from 1 to 6.
+         */
+        this.headingLevel = 0;
+        new ValidatePropsController(this, () => ({
+            density: this.density,
+            display: this.display,
+            imageSize: this.imageSize,
+        }), AtomicRecsList_1.propsSchema, 
+        // TODO V4: KIT-5197 - Remove false
+        false);
+    }
+    /**
+     * Sets a rendering function to bypass the standard HTML template mechanism for rendering results.
+     * You can use this function while working with web frameworks that don't use plain HTML syntax such as React, Angular, or Vue.
+     *
+     * Do not use this method if you integrate Atomic in a plain HTML deployment.
+     *
+     * @param resultRenderingFunction
+     */
+    async setRenderFunction(resultRenderingFunction) {
+        this.itemRenderingFunction = resultRenderingFunction;
+    }
+    /**
+     * Moves to the previous page, when the carousel is activated.
+     */
+    async previousPage() {
+        this.currentPage =
+            this.currentPage - 1 < 0 ? this.numberOfPages - 1 : this.currentPage - 1;
+    }
+    /**
+     * Moves to the next page, when the carousel is activated.
+     */
+    async nextPage() {
+        this.currentPage = (this.currentPage + 1) % this.numberOfPages;
+    }
+    initialize() {
+        this.validateNumberOfRecommendationsPerPage();
+        this.validateRecommendationIdentifier();
+        this.updateOriginLevel2();
+        this.recommendationList = buildRecommendationList(this.bindings.engine, {
+            options: {
+                id: this.recommendation,
+                numberOfRecommendations: this.numberOfRecommendations,
+            },
+        });
+        this.initResultTemplateProvider();
+        this.initItemListCommon();
+        createAppLoadedListener(this.bindings.store, (isAppLoaded) => {
+            this.isAppLoaded = isAppLoaded;
+        });
+    }
+    async willUpdate(changedProperties) {
+        super.willUpdate(changedProperties);
+        if (changedProperties.has('numberOfRecommendationsPerPage')) {
+            this.currentPage = 0;
+        }
+        if (changedProperties.has('recommendationListState')) {
+            const oldState = changedProperties.get('recommendationListState');
+            if (this.recommendationListState.searchResponseId !== '') {
+                this.bindings.store.unsetLoadingFlag(this.loadingFlag);
+            }
+            if (!oldState?.isLoading && this.recommendationListState.isLoading) {
+                this.isEveryResultReady = false;
+            }
+        }
+        await this.updateResultReadyState();
+    }
+    async updateResultReadyState() {
+        if (this.isAppLoaded &&
+            !this.isEveryResultReady &&
+            this.recommendationListState?.searchResponseId !== '' &&
+            this.recommendationListState?.recommendations?.length > 0) {
+            await this.getUpdateComplete();
+            this.isEveryResultReady = true;
+        }
+    }
+    render() {
+        if (!this.resultTemplateRegistered ||
+            this.templateHasError ||
+            this.error ||
+            this.recommendationListStateWithAugment.hasError) {
+            return nothing;
+        }
+        const listContent = this.renderListOfRecommendations();
+        return html `
+      ${this.renderHeading()}
+      ${when(this.shouldRenderPagination, () => renderCarousel({
+            props: {
+                bindings: this.bindings,
+                currentPage: this.currentPage,
+                nextPage: () => this.nextPage(),
+                previousPage: () => this.previousPage(),
+                numberOfPages: this.numberOfPages,
+                ariaLabel: this.label
+                    ? this.bindings.i18n.t(this.label)
+                    : this.bindings.i18n.t('recommendations'),
+            },
+        })(listContent), () => listContent)}
+    `;
+    }
+    get focusTarget() {
+        if (!this.nextNewResultTarget) {
+            this.nextNewResultTarget = new FocusTargetController(this, this.bindings);
+        }
+        return this.nextNewResultTarget;
+    }
+    get recommendationListStateWithAugment() {
+        return {
+            ...this.recommendationListState,
+            firstRequestExecuted: this.recommendationListState.searchResponseId !== '',
+            hasError: this.recommendationListState.error !== null,
+            hasItems: this.recommendationListState.recommendations.length !== 0,
+            results: this.subsetRecommendations,
+        };
+    }
+    get currentIndex() {
+        return Math.abs((this.currentPage * this.numberOfRecommendationsPerPage) %
+            this.recommendationListState.recommendations.length);
+    }
+    get subsetRecommendations() {
+        if (!this.numberOfRecommendationsPerPage) {
+            return this.recommendationListState.recommendations;
+        }
+        return this.recommendationListState.recommendations.slice(this.currentIndex, this.currentIndex + this.numberOfRecommendationsPerPage);
+    }
+    get numberOfPages() {
+        return Math.ceil(this.recommendationListState.recommendations.length /
+            this.numberOfRecommendationsPerPage);
+    }
+    get hasPagination() {
+        return this.numberOfPages > 1;
+    }
+    get shouldRenderPagination() {
+        return (this.hasPagination && this.recommendationListStateWithAugment.hasItems);
+    }
+    validateNumberOfRecommendationsPerPage() {
+        if (this.numberOfRecommendationsPerPage === undefined) {
+            return;
+        }
+        const msg = new NumberValue({
+            min: 1,
+            max: this.numberOfRecommendations - 1,
+        }).validate(this.numberOfRecommendationsPerPage);
+        if (msg) {
+            this.error = new Error(`The "numberOfRecommendationsPerPage" is invalid: ${msg}`);
+        }
+    }
+    validateRecommendationIdentifier() {
+        const recListWithRecommendation = document.querySelectorAll(`atomic-recs-list[recommendation="${this.recommendation}"]`);
+        if (recListWithRecommendation.length > 1) {
+            this.bindings.engine.logger.warn(`There are multiple atomic-recs-list in this page with the same recommendation property "${this.recommendation}". Make sure to set a different recommendation property for each.`);
+        }
+    }
+    updateOriginLevel2() {
+        if (this.label) {
+            const action = loadConfigurationActions(this.bindings.engine).setOriginLevel2({
+                originLevel2: this.label,
+            });
+            this.bindings.engine.dispatch(action);
+        }
+    }
+    initResultTemplateProvider() {
+        this.itemTemplateProvider = new ResultTemplateProvider({
+            includeDefaultTemplate: true,
+            templateElements: Array.from(this.querySelectorAll('atomic-recs-result-template')),
+            getResultTemplateRegistered: () => this.resultTemplateRegistered,
+            getTemplateHasError: () => this.templateHasError,
+            setResultTemplateRegistered: (value) => {
+                this.resultTemplateRegistered = value;
+            },
+            setTemplateHasError: (value) => {
+                this.templateHasError = value;
+            },
+            bindings: this.bindings,
+        });
+    }
+    initItemListCommon() {
+        this.itemListCommon = new ItemListCommon({
+            engineSubscribe: this.bindings.engine.subscribe,
+            getCurrentNumberOfItems: () => this.recommendationListState.recommendations.length,
+            getIsLoading: () => this.recommendationListState.isLoading,
+            host: this,
+            loadingFlag: this.loadingFlag,
+            nextNewItemTarget: this.focusTarget,
+            store: this.bindings.store,
+        });
+    }
+    computeListDisplayClasses() {
+        const displayPlaceholders = !(this.isAppLoaded && this.isEveryResultReady);
+        return getItemListDisplayClasses('grid', this.density, this.imageSize, this.recommendationListState?.isLoading, displayPlaceholders);
+    }
+    renderHeading() {
+        if (!this.label) {
+            return nothing;
+        }
+        if (this.recommendationListStateWithAugment.hasError) {
+            return nothing;
+        }
+        if (this.recommendationListStateWithAugment.firstRequestExecuted &&
+            !this.recommendationListStateWithAugment.hasItems) {
+            return nothing;
+        }
+        return renderHeading({
+            props: {
+                level: this.headingLevel,
+                part: 'label',
+                class: 'm-0 mb-2',
+            },
+        })(html `${this.bindings.i18n.t(this.label)}`);
+    }
+    renderListOfRecommendations() {
+        const listClasses = this.computeListDisplayClasses();
+        const resultClasses = `${listClasses} ${!this.isEveryResultReady && 'hidden'}`;
+        // Results must be rendered immediately (though hidden) to start their initialization and loading processes.
+        // If we wait to render results until placeholders are removed, the components won't begin loading until then,
+        // causing a longer delay. The `isEveryResultReady` flag hides results while preserving placeholders,
+        // then removes placeholders once results are fully loaded to prevent content flash.
+        return html `
+      ${when(this.isAppLoaded, () => renderDisplayWrapper({
+            props: {
+                listClasses: resultClasses,
+                display: 'grid',
+            },
+        })(html `${this.renderGrid()}`))}
+      ${when(!this.isEveryResultReady, () => renderDisplayWrapper({
+            props: { listClasses, display: 'grid' },
+        })(renderItemPlaceholders({
+            props: {
+                density: this.density,
+                display: this.display,
+                imageSize: this.imageSize,
+                numberOfPlaceholders: this.numberOfRecommendationsPerPage ??
+                    this.numberOfRecommendations,
+            },
+        })))}
+    `;
+    }
+    renderGrid() {
+        return html `${map(this.subsetRecommendations, (recommendation, index) => {
+            return renderGridLayout({
+                props: {
+                    item: {
+                        ...recommendation,
+                        title: recommendation.title ?? '',
+                    },
+                    selectorForItem: 'atomic-recs-result',
+                    setRef: (element) => {
+                        element instanceof HTMLElement &&
+                            this.itemListCommon.setNewResultRef(element, index);
+                    },
+                },
+            })(html `${keyed(this.getResultId(recommendation), html `<atomic-recs-result
+            .content=${this.getContent(recommendation)}
+            .density=${this.density}
+            .display=${this.display}
+            .imageSize=${this.imageSize}
+            .interactiveResult=${this.getInteractiveResult(recommendation)}
+            .linkContent=${this.getLinkContent(recommendation)}
+            .loadingFlag=${this.loadingFlag}
+            .result=${recommendation}
+            .renderingFunction=${this.itemRenderingFunction}
+            .store=${this.bindings.store}
+          ></atomic-recs-result>`)}`);
+        })}`;
+    }
+    getLinkContent(result) {
+        return this.itemTemplateProvider.getLinkTemplateContent(result);
+    }
+    getContent(result) {
+        return this.itemTemplateProvider.getTemplateContent(result);
+    }
+    getInteractiveResult(result) {
+        return buildRecsInteractiveResult(this.bindings.engine, {
+            options: { result },
+        });
+    }
+    getResultId(result) {
+        return this.itemListCommon.getResultId(result.uniqueId, this.recommendationListState.searchResponseId, this.density, this.imageSize);
+    }
+};
+AtomicRecsList.styles = css`/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */@layer properties;.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:pulse 2s cubic-bezier(.4,0,.6,1) infinite}:host{display:block;[part~=outline][part~=result-list-grid-clickable-container]{border:1px solid transparent;border-radius:1rem;padding:1rem;position:relative;transition:all .12s ease-out;&:hover{border-color:var(--atomic-neutral);border-style:var(--tw-border-style);border-width:1px;box-shadow:0 10px 25px var(--atomic-neutral);cursor:pointer}}[part=result-list-grid-clickable]:focus-visible{border-color:var(--atomic-primary);border-radius:2px;border-style:var(--tw-border-style);border-width:2px;color:var(--atomic-primary);cursor:pointer;display:inline-block;position:absolute;text-align:center;text-decoration:underline}[part=result-list-grid-clickable]:not(:focus){clip:rect(1px,1px,1px,1px);overflow:hidden;padding:0;position:absolute}.list-wrapper{word-break:break-word}.list-root.display-grid{display:grid;justify-content:space-evenly;.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-color:var(--atomic-neutral);border-radius:1rem;border-style:var(--tw-border-style);border-width:1px;padding:1rem}atomic-result-placeholder{border-color:transparent}}[part=label]{font-family:var(--atomic-font-family);font-size:var(--atomic-text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height,1.33333));--tw-font-weight:var(--atomic-font-bold);font-weight:var(--atomic-font-bold)}atomic-result:not(.hydrated){visibility:hidden}}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@keyframes pulse{50%{opacity:.5}}@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;--tw-font-weight:initial}}}`;
+AtomicRecsList.propsSchema = new Schema({
+    density: new StringValue({
+        constrainTo: ['normal', 'comfortable', 'compact'],
+    }),
+    display: new StringValue({ constrainTo: ['grid', 'list'] }),
+    imageSize: new StringValue({
+        constrainTo: ['small', 'large', 'icon', 'none'],
+    }),
+});
+__decorate([
+    state()
+], AtomicRecsList.prototype, "bindings", void 0);
+__decorate([
+    state()
+], AtomicRecsList.prototype, "error", void 0);
+__decorate([
+    state()
+], AtomicRecsList.prototype, "isAppLoaded", void 0);
+__decorate([
+    state()
+], AtomicRecsList.prototype, "isEveryResultReady", void 0);
+__decorate([
+    state()
+], AtomicRecsList.prototype, "resultTemplateRegistered", void 0);
+__decorate([
+    state()
+], AtomicRecsList.prototype, "templateHasError", void 0);
+__decorate([
+    state()
+], AtomicRecsList.prototype, "currentPage", void 0);
+__decorate([
+    bindStateToController('recommendationList'),
+    state()
+], AtomicRecsList.prototype, "recommendationListState", void 0);
+__decorate([
+    property({ reflect: true, type: String })
+], AtomicRecsList.prototype, "recommendation", void 0);
+__decorate([
+    property({ reflect: true, type: String })
+], AtomicRecsList.prototype, "display", void 0);
+__decorate([
+    property({ reflect: true, type: String })
+], AtomicRecsList.prototype, "density", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'image-size', type: String })
+], AtomicRecsList.prototype, "imageSize", void 0);
+__decorate([
+    property({
+        reflect: true,
+        attribute: 'number-of-recommendations',
+        type: Number,
+    })
+], AtomicRecsList.prototype, "numberOfRecommendations", void 0);
+__decorate([
+    property({
+        reflect: true,
+        attribute: 'number-of-recommendations-per-page',
+        type: Number,
+    })
+], AtomicRecsList.prototype, "numberOfRecommendationsPerPage", void 0);
+__decorate([
+    property({ reflect: true, type: String })
+], AtomicRecsList.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'heading-level', type: Number })
+], AtomicRecsList.prototype, "headingLevel", void 0);
+__decorate([
+    bindingGuard(),
+    errorGuard()
+], AtomicRecsList.prototype, "render", null);
+AtomicRecsList = AtomicRecsList_1 = __decorate([
+    customElement('atomic-recs-list'),
+    bindings(),
+    withTailwindStyles
+], AtomicRecsList);
+export { AtomicRecsList };

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

@@ -1,5 +1,6 @@
 // Auto-generated file
 export { AtomicRecsError } from './atomic-recs-error/atomic-recs-error.js';
 export { AtomicRecsInterface } from './atomic-recs-interface/atomic-recs-interface.js';
+export { AtomicRecsList } from './atomic-recs-list/atomic-recs-list.js';
 export { AtomicRecsResult } from './atomic-recs-result/atomic-recs-result.js';
 export { AtomicRecsResultTemplate } from './atomic-recs-result-template/atomic-recs-result-template.js';

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

@@ -2,6 +2,7 @@
 export default {
     'atomic-recs-error': async () => await import('./atomic-recs-error/atomic-recs-error.js'),
     'atomic-recs-interface': async () => await import('./atomic-recs-interface/atomic-recs-interface.js'),
+    'atomic-recs-list': async () => await import('./atomic-recs-list/atomic-recs-list.js'),
     'atomic-recs-result': async () => await import('./atomic-recs-result/atomic-recs-result.js'),
     'atomic-recs-result-template': async () => await import('./atomic-recs-result-template/atomic-recs-result-template.js'),
 };

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

@@ -316,7 +316,7 @@ let AtomicBreadbox = AtomicBreadbox_1 = class AtomicBreadbox extends LitElement
     }
 };
 AtomicBreadbox.styles = [
-    css``,
+    css`/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */[part=breadcrumb-label].excluded,[part=breadcrumb-value].excluded{color:var(--atomic-error);text-decoration:line-through}`,
 ];
 AtomicBreadbox.propsSchema = new Schema({
     pathLimit: new NumberValue({