@coveo/atomic 3.30.1-pre.6f8efc1feb → 3.30.1-pre.7d5a246bc8

package/dist/atomic/components/atomic-sort-dropdown.js

@@ -117,8 +117,8 @@ const AtomicSortDropdown$1 = /*@__PURE__*/ proxyCustomElement(class AtomicSortDr
         const { hasError, hasResults, firstSearchExecuted } = this.searchStatusState;
         const { bindings: { i18n }, id, } = this;
         return [
-            h(SortGuard, { key: '4ee8ff63c7e211ad4c0363e767cb790cd9710e43', firstSearchExecuted: firstSearchExecuted, hasError: hasError, hasResults: hasResults }, h(SortContainer, { key: '5038bbcf2ada8edcaf3f53e8a773956c3ebb5b9e' }, h(SortLabel, { key: '854fc6ec309794b68c863dae07daef9c3e2220b5', i18n: i18n, id: id }), h(SortSelect, { key: 'bcf25587ecfda1360af47c9a38ac21d12bf06e50', i18n: i18n, id: id, onSelect: (evt) => this.select(evt) }, this.options.map(({ label, criteria, expression }) => (h(SortOption, { i18n: i18n, label: label, selected: this.sort.isSortedBy(criteria), value: expression })))))),
-            h("slot", { key: '780cda787ea62acbcc2c2c992320aed0bbd7e987' }),
+            h(SortGuard, { key: 'c4710486ab41fc6759c07d5850c8e83bb9a37160', firstSearchExecuted: firstSearchExecuted, hasError: hasError, hasResults: hasResults }, h(SortContainer, { key: '653c93dbd9d5b3535f8ddb808f4cdfba0026613c' }, h(SortLabel, { key: 'a9c6c2a860400c3f6c07eda8be3a34a2469bec71', i18n: i18n, id: id }), h(SortSelect, { key: '8f4826457092ffb87bc9292a9d8276b232f3d99b', i18n: i18n, id: id, onSelect: (evt) => this.select(evt) }, this.options.map(({ label, criteria, expression }) => (h(SortOption, { i18n: i18n, label: label, selected: this.sort.isSortedBy(criteria), value: expression })))))),
+            h("slot", { key: 'd36b41c41973b6fda29d7ba6b0ec3c1eacde7224' }),
         ];
     }
     get host() { return this; }

package/dist/atomic/components/atomic-sort-expression.js

@@ -47,7 +47,7 @@ const AtomicSortExpression$1 = /*@__PURE__*/ proxyCustomElement(class AtomicSort
         const dropdownComponent = 'atomic-sort-dropdown';
         if (!this.host.closest(dropdownComponent)) {
             const error = new Error(`The "${this.host.nodeName.toLowerCase()}" component has to be used inside an ${dropdownComponent} element.`);
-            return (h("atomic-component-error", { key: '4e670761918ce5550411f515fd32136df0e2224e', element: this.host, error: error }));
+            return (h("atomic-component-error", { key: '278d83f4f6b5d95041fe199f0a911e360eb5823c', element: this.host, error: error }));
         }
     }
     get host() { return this; }

package/dist/atomic/components/atomic-suggestion-renderer2.js

@@ -73,7 +73,7 @@ const AtomicSuggestionRenderer = /*@__PURE__*/ proxyCustomElement(class AtomicSu
     }
     render() {
         const isButton = !!(this.suggestion.onSelect || this.suggestion.query);
-        return (h(Host, { key: '67d5e49cfc54a02d7bea535ad2cacca11a4af465', class: "contents" }, isButton ? (h("button", { id: this.id, key: this.suggestion.key, part: this.parts, class: this.classes, onMouseDown: (e) => e.preventDefault(), onClick: (e) => this.onClick?.(e), onMouseOver: (e) => this.onMouseOver?.(e), "data-query": this.suggestion.query, "aria-label": this.ariaLabel(isButton), ref: (el) => {
+        return (h(Host, { key: '285092df55387853ab1c4ae7b855329243e0f6e5', class: "contents" }, isButton ? (h("button", { id: this.id, key: this.suggestion.key, part: this.parts, class: this.classes, onMouseDown: (e) => e.preventDefault(), onClick: (e) => this.onClick?.(e), onMouseOver: (e) => this.onMouseOver?.(e), "data-query": this.suggestion.query, "aria-label": this.ariaLabel(isButton), ref: (el) => {
                 if (!el) {
                     return;
                 }

package/dist/atomic/components/atomic-tab-manager.js

@@ -59,7 +59,7 @@ const AtomicTabManager$1 = /*@__PURE__*/ proxyCustomElement(class AtomicTabManag
         });
     }
     render() {
-        return (h(Host, { key: '9e75ad3be1f4468d7b2d0eb9c6f6e57f50840826' }, h("atomic-tab-bar", { key: 'ed6823fbf1249ec38a1a057244a530ce7f3fae1f' }, h("div", { key: '87ed2de51ab176f9059339a8bb54e895716ca15a', role: "list", "aria-label": "tab-area", part: "tab-area", class: "border-neutral mb-2 flex w-full flex-row border-b" }, this.tabs.map((tab) => (h("atomic-tab-button", { active: this.tabManagerState.activeTab === tab.name, label: this.bindings.i18n.t(tab.label, {
+        return (h(Host, { key: '51deeb9f56009f83954ab00c955065dcb740e319' }, h("atomic-tab-bar", { key: '7e637249b5b4db12f3a81f777e9fcb6cab66210d' }, h("div", { key: 'd19cc7766d8b1c5123bcc2cbb3d5482e541e63d8', role: "list", "aria-label": "tab-area", part: "tab-area", class: "border-neutral mb-2 flex w-full flex-row border-b" }, this.tabs.map((tab) => (h("atomic-tab-button", { active: this.tabManagerState.activeTab === tab.name, label: this.bindings.i18n.t(tab.label, {
                 defaultValue: tab.label,
             }), select: () => {
                 if (!tab.tabController.state.isActive) {

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

@@ -0,0 +1,130 @@
+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 { Schema, StringValue } from '@coveo/bueno';
+import { html, LitElement, nothing, unsafeCSS } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { createRef } from 'lit/directives/ref.js';
+import { booleanConverter } from "../../../converters/boolean-converter";
+import { bindingGuard } from "../../../decorators/binding-guard";
+import { bindings } from "../../../decorators/bindings";
+import { createProductContextController } from "../../../decorators/commerce/product-template-decorators";
+import { errorGuard } from "../../../decorators/error-guard";
+import { injectStylesForNoShadowDOM } from "../../../decorators/inject-styles-for-no-shadow-dom";
+import { withTailwindStyles } from "../../../decorators/with-tailwind-styles";
+import { renderExpandableText, } from '../../common/expandable-text/expandable-text';
+import styles from './atomic-product-excerpt.tw.css';
+/**
+ * The `atomic-product-excerpt` component renders the excerpt of a product.
+ *
+ * @part expandable-text - The part that contains the product excerpt text.
+ * @alpha
+ */
+let AtomicProductExcerpt = class AtomicProductExcerpt extends LitElement {
+    initialize() { }
+    constructor() {
+        super();
+        this.productController = createProductContextController(this);
+        this.isExpanded = false;
+        this.isTruncated = false;
+        this.excerptRef = createRef();
+        /**
+         * The number of lines after which the product excerpt should be truncated. A value of "none" will disable truncation.
+         */
+        this.truncateAfter = '2';
+        /**
+         * Whether the excerpt should be collapsible after being expanded.
+         */
+        this.isCollapsible = false;
+        this.resizeObserver = new ResizeObserver(() => {
+            if (this.excerptRef.value) {
+                this.isTruncated =
+                    this.excerptRef.value.scrollHeight >
+                        this.excerptRef.value.clientHeight;
+            }
+        });
+    }
+    validateProps() {
+        new Schema({
+            truncateAfter: new StringValue({
+                constrainTo: ['none', '1', '2', '3', '4'],
+            }),
+        }).validate({
+            truncateAfter: this.truncateAfter,
+        });
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('truncateAfter')) {
+            this.validateProps();
+        }
+        if (this.excerptRef.value) {
+            this.resizeObserver.observe(this.excerptRef.value);
+        }
+    }
+    onToggleExpand(e) {
+        if (e) {
+            e.stopPropagation();
+        }
+        this.isExpanded = !this.isExpanded;
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.resizeObserver.disconnect();
+    }
+    get product() {
+        return this.productController.item;
+    }
+    render() {
+        const productExcerpt = this.product?.excerpt ?? null;
+        if (!productExcerpt) {
+            return html `${nothing}`;
+        }
+        return html `${renderExpandableText({
+            props: {
+                isExpanded: this.isExpanded,
+                isTruncated: this.isTruncated,
+                truncateAfter: this.truncateAfter,
+                onToggleExpand: (e) => this.onToggleExpand(e),
+                showMoreLabel: this.bindings.i18n.t('show-more'),
+                showLessLabel: this.bindings.i18n.t('show-less'),
+                isCollapsible: this.isCollapsible,
+                textRef: this.excerptRef,
+            },
+        })(html `<atomic-product-text field="excerpt"></atomic-product-text>`)}`;
+    }
+};
+AtomicProductExcerpt.styles = unsafeCSS(styles);
+__decorate([
+    state()
+], AtomicProductExcerpt.prototype, "bindings", void 0);
+__decorate([
+    state()
+], AtomicProductExcerpt.prototype, "isExpanded", void 0);
+__decorate([
+    state()
+], AtomicProductExcerpt.prototype, "isTruncated", void 0);
+__decorate([
+    property({ type: String, attribute: 'truncate-after' })
+], AtomicProductExcerpt.prototype, "truncateAfter", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        attribute: 'is-collapsible',
+        converter: booleanConverter,
+    })
+], AtomicProductExcerpt.prototype, "isCollapsible", void 0);
+__decorate([
+    bindingGuard(),
+    errorGuard()
+], AtomicProductExcerpt.prototype, "render", null);
+AtomicProductExcerpt = __decorate([
+    customElement('atomic-product-excerpt'),
+    bindings(),
+    injectStylesForNoShadowDOM,
+    withTailwindStyles
+], AtomicProductExcerpt);
+export { AtomicProductExcerpt };

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

@@ -0,0 +1,3 @@
+const css = `/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+.expandable-text{line-height:var(--line-height)}.min-lines-1{min-height:calc(var(--line-height)*1)}.min-lines-2{min-height:calc(var(--line-height)*2)}.min-lines-3{min-height:calc(var(--line-height)*3)}.min-lines-4{min-height:calc(var(--line-height)*4)}`;
+export default [css];

package/dist/atomic/components/components/commerce/atomic-product-numeric-field-value/atomic-product-numeric-field-value.js

@@ -0,0 +1,81 @@
+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 { html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { when } from 'lit/directives/when.js';
+import { bindingGuard } from "../../../decorators/binding-guard.js";
+import { bindings } from "../../../decorators/bindings.js";
+import { createProductContextController } from "../../../decorators/commerce/product-template-decorators.js";
+import { errorGuard } from "../../../decorators/error-guard.js";
+import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js";
+import { defaultNumberFormatter, } from '../../common/formats/format-common.js';
+import { parseValue } from '../product-template-component-utils/product-utils.js';
+/**
+ * The `atomic-product-numeric-field-value` component renders the value of a number product field.
+ *
+ * The number can be formatted by adding a `atomic-format-number`, `atomic-format-currency` or `atomic-format-unit` component into this component.
+ * @alpha
+ */
+let AtomicProductNumericFieldValue = class AtomicProductNumericFieldValue extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.productController = createProductContextController(this);
+        this.formatter = defaultNumberFormatter;
+        this.setFormat = (event) => {
+            const customEvent = event;
+            customEvent.preventDefault();
+            customEvent.stopPropagation();
+            this.formatter = customEvent.detail;
+        };
+    }
+    createRenderRoot() {
+        return this;
+    }
+    initialize() {
+        this.addEventListener('atomic/numberFormat', this.setFormat);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('atomic/numberFormat', this.setFormat);
+    }
+    get value() {
+        const product = this.productController.item;
+        if (!product) {
+            return null;
+        }
+        const value = parseValue(product, this.field);
+        if (value === null) {
+            return null;
+        }
+        return this.formatter(value, this.bindings.i18n.languages);
+    }
+    render() {
+        return html `${when(this.value !== null, () => html `${this.value}`)}`;
+    }
+};
+__decorate([
+    state()
+], AtomicProductNumericFieldValue.prototype, "bindings", void 0);
+__decorate([
+    state()
+], AtomicProductNumericFieldValue.prototype, "error", void 0);
+__decorate([
+    property({ reflect: true })
+], AtomicProductNumericFieldValue.prototype, "field", void 0);
+__decorate([
+    state()
+], AtomicProductNumericFieldValue.prototype, "formatter", void 0);
+__decorate([
+    errorGuard(),
+    bindingGuard()
+], AtomicProductNumericFieldValue.prototype, "render", null);
+AtomicProductNumericFieldValue = __decorate([
+    customElement('atomic-product-numeric-field-value'),
+    bindings(),
+    withTailwindStyles
+], AtomicProductNumericFieldValue);
+export { AtomicProductNumericFieldValue };

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

@@ -0,0 +1,103 @@
+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 { buildContext, } from '@coveo/headless/commerce';
+import { html, LitElement, unsafeCSS } from 'lit';
+import { customElement, state } from 'lit/decorators.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 { createProductContextController } from "../../../decorators/commerce/product-template-decorators.js";
+import { errorGuard } from "../../../decorators/error-guard.js";
+import { injectStylesForNoShadowDOM } from "../../../decorators/inject-styles-for-no-shadow-dom.js";
+import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js";
+import { multiClassMap, tw } from "../../../directives/multi-class-map.js";
+import { defaultCurrencyFormatter } from '../../common/formats/format-common.js';
+import { parseValue } from '../product-template-component-utils/product-utils.js';
+import styles from './atomic-product-price.tw.css';
+/**
+ * The `atomic-product-price` component renders the price of a product.
+ * @alpha
+ */
+let AtomicProductPrice = class AtomicProductPrice extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.productController = createProductContextController(this);
+    }
+    initialize() {
+        this.context = buildContext(this.bindings.engine);
+    }
+    get product() {
+        return this.productController.item;
+    }
+    formatValue(value) {
+        try {
+            const { currency } = this.contextState;
+            const formatter = defaultCurrencyFormatter(currency);
+            return formatter(value, this.bindings.i18n.languages);
+        }
+        catch (error) {
+            this.error = error;
+            return value.toString();
+        }
+    }
+    getFormattedValue(field) {
+        const value = parseValue(this.product, field);
+        if (value !== null) {
+            return this.formatValue(value);
+        }
+    }
+    get hasPromotionalPrice() {
+        return (this.product &&
+            this.product.ec_promo_price !== null &&
+            this.product.ec_price !== null &&
+            this.product.ec_promo_price < this.product.ec_price);
+    }
+    render() {
+        const priceClasses = tw({
+            'truncate break-keep text-2xl': true,
+            'text-error': this.hasPromotionalPrice,
+        });
+        return html `
+      <div class="flex flex-wrap gap-1">
+        <div
+          class=${multiClassMap(priceClasses)}
+        >
+          ${this.getFormattedValue(this.hasPromotionalPrice ? 'ec_promo_price' : 'ec_price')}
+        </div>
+
+        ${when(this.hasPromotionalPrice, () => html `
+            <div class="original-price content-center truncate text-xl break-keep line-through">
+              ${this.getFormattedValue('ec_price')}
+            </div>
+          `)}
+    </div>
+    `;
+    }
+};
+AtomicProductPrice.styles = unsafeCSS(styles);
+__decorate([
+    state()
+], AtomicProductPrice.prototype, "bindings", void 0);
+__decorate([
+    state()
+], AtomicProductPrice.prototype, "error", void 0);
+__decorate([
+    bindStateToController('context'),
+    state()
+], AtomicProductPrice.prototype, "contextState", void 0);
+__decorate([
+    errorGuard(),
+    bindingGuard()
+], AtomicProductPrice.prototype, "render", null);
+AtomicProductPrice = __decorate([
+    customElement('atomic-product-price'),
+    bindings(),
+    injectStylesForNoShadowDOM,
+    withTailwindStyles
+], AtomicProductPrice);
+export { AtomicProductPrice };

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

@@ -0,0 +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-leading:initial}}}.display-grid atomic-product-price{flex-flow:column wrap;display:flex}.display-grid atomic-product-price .original-price{--tw-leading:1;line-height:1}@property --tw-leading{syntax:"*";inherits:false}`;
+export default [css];

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

@@ -13,7 +13,10 @@ import { ProductTemplateController } from '../../common/product-template/product
 import '../atomic-commerce-text/atomic-commerce-text';
 import '../atomic-product-text/atomic-product-text';
 import '../atomic-product/atomic-product';
+import '../atomic-product-excerpt/atomic-product-excerpt';
 import '../atomic-product-children/atomic-product-children';
+import '../atomic-product-price/atomic-product-price';
+import '../atomic-product-numeric-field-value/atomic-product-numeric-field-value';
 /**
  * * A product template determines the format of the query results, depending on the conditions that are defined for each template.
  *

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

@@ -22,5 +22,8 @@ export { AtomicCommerceSortDropdown } from './atomic-commerce-sort-dropdown/atom
 export { AtomicCommerceText } from './atomic-commerce-text/atomic-commerce-text.js';
 export { AtomicProduct } from './atomic-product/atomic-product.js';
 export { AtomicProductChildren } from './atomic-product-children/atomic-product-children.js';
+export { AtomicProductExcerpt } from './atomic-product-excerpt/atomic-product-excerpt.js';
+export { AtomicProductNumericFieldValue } from './atomic-product-numeric-field-value/atomic-product-numeric-field-value.js';
+export { AtomicProductPrice } from './atomic-product-price/atomic-product-price.js';
 export { AtomicProductTemplate } from './atomic-product-template/atomic-product-template.js';
 export { AtomicProductText } from './atomic-product-text/atomic-product-text.js';

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

@@ -23,6 +23,9 @@ export default {
     'atomic-commerce-text': async () => await import('./atomic-commerce-text/atomic-commerce-text.js'),
     'atomic-product': async () => await import('./atomic-product/atomic-product.js'),
     'atomic-product-children': async () => await import('./atomic-product-children/atomic-product-children.js'),
+    'atomic-product-excerpt': async () => await import('./atomic-product-excerpt/atomic-product-excerpt.js'),
+    'atomic-product-numeric-field-value': async () => await import('./atomic-product-numeric-field-value/atomic-product-numeric-field-value.js'),
+    'atomic-product-price': async () => await import('./atomic-product-price/atomic-product-price.js'),
     'atomic-product-template': async () => await import('./atomic-product-template/atomic-product-template.js'),
     'atomic-product-text': async () => await import('./atomic-product-text/atomic-product-text.js'),
 };

package/dist/atomic/components/components/common/expandable-text/expandable-text.js

@@ -0,0 +1,47 @@
+import { html } from 'lit';
+const MinusIcon = "<svg viewBox=\"0 0 512 512\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m64 208h384v96h-384z\"/></svg>";
+const PlusIcon = "<svg viewBox=\"0 0 512 512\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M496 208H304V16h-96v192H16v96h192v192h96V304h192\"/>\n</svg>\n";
+import { renderButton } from '../button';
+import '../atomic-icon/atomic-icon';
+import { ref } from 'lit/directives/ref.js';
+const getLineClampClass = (truncateAfter) => {
+    const lineClampMap = {
+        none: 'line-clamp-none',
+        1: 'line-clamp-1',
+        2: 'line-clamp-2',
+        3: 'line-clamp-3',
+        4: 'line-clamp-4',
+    };
+    return lineClampMap[truncateAfter] || 'line-clamp-2';
+};
+export const renderExpandableText = ({ props: { isExpanded, isTruncated, isCollapsible, truncateAfter, onToggleExpand, showMoreLabel, showLessLabel, textRef, }, }) => (children) => {
+    const expandableTextClass = `expandable-text ${!isExpanded ? getLineClampClass(truncateAfter) : ''} min-lines-${truncateAfter}`;
+    let buttonClass = 'expandable-text-button p-1 text-xs leading-[calc(1/.75)]';
+    if (!isTruncated && !isExpanded) {
+        buttonClass += ' invisible';
+    }
+    else if (!isCollapsible && !isTruncated && isExpanded) {
+        buttonClass += ' hidden';
+    }
+    const buttonLabel = isExpanded ? showLessLabel : showMoreLabel;
+    const icon = isExpanded ? MinusIcon : PlusIcon;
+    return html `<div class="flex flex-col items-start">
+        <div part="expandable-text"
+        class="${expandableTextClass}"
+        ${ref(textRef)}
+        >
+        ${children}
+        </div>
+
+        ${renderButton({
+        props: {
+            style: 'text-primary',
+            class: buttonClass,
+            title: buttonLabel,
+            onClick: onToggleExpand,
+        },
+    })(html `
+          <atomic-icon icon="${icon}" class="mx-1 w-2 align-baseline"></atomic-icon>
+          ${buttonLabel}`)}
+    </div>`;
+};

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

@@ -65,13 +65,13 @@ const FacetDateInput = /*@__PURE__*/ proxyCustomElement(class FacetDateInput ext
         // Fallback for Safari < 14.1, date with format yyyy-mm-dd over 1400 (API limit)
         const pattern = '^(1[4-9]\\d{2}|2\\d{3})-(0[1-9]|1[0-2])-(0[1-9]|[12]\\d|3[01])$';
         const range = this.rangeGetter();
-        return (h("form", { key: '59d2965df3aaf8d3cabfd9d923d976dd898a110c', class: "mt-4 grid grid-cols-[min-content_1fr] gap-2 px-2", onSubmit: (e) => {
+        return (h("form", { key: '090427f9c7d815510bb8732e1b13b6c31e9df82b', class: "mt-4 grid grid-cols-[min-content_1fr] gap-2 px-2", onSubmit: (e) => {
                 e.preventDefault();
                 this.apply();
                 return false;
-            } }, h("label", { key: 'd9306e47c3a1c45abf99926478417480273b7561', part: "input-label", class: labelClasses, htmlFor: `${this.facetId}_start` }, startLabel, ":"), h("input", { key: '2e55fef92f46cb097d1d69bf0bdfdb9dc81446ea', id: `${this.facetId}_start`, part: "input-start", type: "date", ref: (ref) => (this.startRef = ref), class: inputClasses, "aria-label": startAria, placeholder: placeholder, pattern: pattern, required: true,
+            } }, h("label", { key: 'a02063a5f8430c9144809253a3901d37a5a69b82', part: "input-label", class: labelClasses, htmlFor: `${this.facetId}_start` }, startLabel, ":"), h("input", { key: '89fa32c6e021cea4c6cb68ff4b60a7b39a0e2ff7', id: `${this.facetId}_start`, part: "input-start", type: "date", ref: (ref) => (this.startRef = ref), class: inputClasses, "aria-label": startAria, placeholder: placeholder, pattern: pattern, required: true,
             // API/Index minimum supported date
-            min: this.min || this.formattedDateValue('1401-01-01'), max: this.end ? this.formattedDateValue(this.end) : this.max, value: this.formattedDateValue(range?.start), onInput: (e) => (this.start = parseDate(e.target.value).toDate()) }), h("label", { key: '7e32476bce17332e6edb2fe213115c26c7d31508', part: "input-label", class: labelClasses, htmlFor: `${this.facetId}_end` }, endLabel, ":"), h("input", { key: '78951b704e23f57f650d080aaecc3c7f80953c00', id: `${this.facetId}_end`, part: "input-end", type: "date", ref: (ref) => (this.endRef = ref), class: inputClasses, "aria-label": endAria, placeholder: placeholder, pattern: pattern, required: true, min: this.formattedDateValue(this.start) || this.min, max: this.max, value: this.formattedDateValue(range?.end), onInput: (e) => (this.end = parseDate(e.target.value).toDate()) }), h(Button, { key: '3d04497fab31fbfa813ecfc34023571670f04ed9', style: "outline-primary", type: "submit", part: "input-apply-button", class: "col-span-2 truncate p-2.5", ariaLabel: applyAria, text: apply })));
+            min: this.min || this.formattedDateValue('1401-01-01'), max: this.end ? this.formattedDateValue(this.end) : this.max, value: this.formattedDateValue(range?.start), onInput: (e) => (this.start = parseDate(e.target.value).toDate()) }), h("label", { key: 'a80d6601ae3c3189b1f8b04f7ff0a49eae68f788', part: "input-label", class: labelClasses, htmlFor: `${this.facetId}_end` }, endLabel, ":"), h("input", { key: 'c5973654c89ab45cd9a93b4281fb7fbb3906b38c', id: `${this.facetId}_end`, part: "input-end", type: "date", ref: (ref) => (this.endRef = ref), class: inputClasses, "aria-label": endAria, placeholder: placeholder, pattern: pattern, required: true, min: this.formattedDateValue(this.start) || this.min, max: this.max, value: this.formattedDateValue(range?.end), onInput: (e) => (this.end = parseDate(e.target.value).toDate()) }), h(Button, { key: '82663ec5a0122841c1126bf1f0766bd6cc078c35', style: "outline-primary", type: "submit", part: "input-apply-button", class: "col-span-2 truncate p-2.5", ariaLabel: applyAria, text: apply })));
     }
 }, [0, "atomic-facet-date-input", {
         "bindings": [16],

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

@@ -42,11 +42,11 @@ const FacetNumberInput = /*@__PURE__*/ proxyCustomElement(class FacetNumberInput
         const inputClasses = 'p-2.5 input-primary placeholder-neutral-dark min-w-0 mr-1';
         const labelClasses = 'text-neutral-dark text-sm';
         const step = this.type === 'integer' ? '1' : 'any';
-        return (h("form", { key: '1c6d56892489a9579ecf5cec42b715ece7f9082e', class: "mt-4 gap-y-0.5 px-2", part: "input-form", onSubmit: (e) => {
+        return (h("form", { key: '70662088ef0218f339ee83b226e4e0b5d2654518', class: "mt-4 gap-y-0.5 px-2", part: "input-form", onSubmit: (e) => {
                 e.preventDefault();
                 this.apply();
                 return false;
-            } }, h("label", { key: 'cd494b8db49aaf6bf39ed73608fc486fd947c1e3', part: "label-start", class: labelClasses, htmlFor: `${this.filterState.facetId}_start` }, minText), h("input", { key: '6c8d4c2fedde248555c15181bcf45fbe858b5daf', part: "input-start", id: `${this.filterState.facetId}_start`, type: "number", step: step, ref: (ref) => (this.startRef = ref), class: inputClasses, "aria-label": minAria, required: true, min: Number.MIN_SAFE_INTEGER, max: this.end, value: this.filterState.range?.start, onInput: (e) => (this.start = e.target.valueAsNumber) }), h("label", { key: '7910a7cef3f0faf580acdb462f708ea595221bfe', part: "label-end", class: labelClasses, htmlFor: `${this.filterState.facetId}_end` }, maxText), h("input", { key: 'e5c99e99c8c9d88dfacdb0465f892d45707d1fb1', part: "input-end", id: `${this.filterState.facetId}_end`, type: "number", step: step, ref: (ref) => (this.endRef = ref), class: inputClasses, "aria-label": maxAria, required: true, min: this.start, max: Number.MAX_SAFE_INTEGER, value: this.filterState.range?.end, onInput: (e) => (this.end = e.target.valueAsNumber) }), h(Button, { key: 'c2c99c597e693d5c964c6294c315cf83492c7725', style: "outline-primary", type: "submit", part: "input-apply-button", class: "flex-none truncate p-2.5", ariaLabel: applyAria, text: apply })));
+            } }, h("label", { key: 'b7ae30e3bc6327a03537a7b21ab07d48f451dceb', part: "label-start", class: labelClasses, htmlFor: `${this.filterState.facetId}_start` }, minText), h("input", { key: '82f6b55550e7942598dbd7891647d587fe90d6fb', part: "input-start", id: `${this.filterState.facetId}_start`, type: "number", step: step, ref: (ref) => (this.startRef = ref), class: inputClasses, "aria-label": minAria, required: true, min: Number.MIN_SAFE_INTEGER, max: this.end, value: this.filterState.range?.start, onInput: (e) => (this.start = e.target.valueAsNumber) }), h("label", { key: 'f191b24d945184eb251e4a965d2fa308b71876ef', part: "label-end", class: labelClasses, htmlFor: `${this.filterState.facetId}_end` }, maxText), h("input", { key: '56eac2b3bc40e0feccd75bcb3f037cee8becb90d', part: "input-end", id: `${this.filterState.facetId}_end`, type: "number", step: step, ref: (ref) => (this.endRef = ref), class: inputClasses, "aria-label": maxAria, required: true, min: this.start, max: Number.MAX_SAFE_INTEGER, value: this.filterState.range?.end, onInput: (e) => (this.end = e.target.valueAsNumber) }), h(Button, { key: '7a342672e1066d4d12a867badbcb2d30dab76694', style: "outline-primary", type: "submit", part: "input-apply-button", class: "flex-none truncate p-2.5", ariaLabel: applyAria, text: apply })));
     }
     static get style() { return AtomicFacetNumberInputStyle0; }
 }, [0, "atomic-facet-number-input", {

package/dist/atomic/components/global/environment.js

@@ -4,7 +4,7 @@ function getWindow() {
 }
 export function getAtomicEnvironment() {
     return {
-        version: "3.30.1-pre.6f8efc1feb".VERSION,
+        version: "3.30.1-pre.7d5a246bc8".VERSION,
         headlessVersion: VERSION,
     };
 }

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

@@ -1 +1 @@
-{"file":"index.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAca,kBAAmB,SAAQ,KAAK;IAC3C,YAAY,WAAmB,EAAE,UAAkB;QACjD,KAAK,CACH,QAAQ,WAAW,sCAAsC,UAAU,YAAY,CAChF,CAAC;KACH;;;ACfH,MAAM,oBAAoB,GAAG,sBAAsB,CAAC;SAIpC,gBAAgB,CAAI,OAAgB,EAAE,UAAkB;IACtE,OAAO,IAAI,OAAO,CAAI,CAAC,OAAO,EAAE,MAAM;QACpC,MAAM,KAAK,GAAG,gBAAgB,CAC5B,oBAAoB,EACpB,CAAC,IAAO;YACN,OAAO,OAAO,CAAC,IAAI,CAAC,CAAC;SACtB,CACF,CAAC;QACF,OAAO,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAE7B,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE;YACjC,MAAM,CACJ,IAAI,kBAAkB,CAAC,OAAO,CAAC,QAAQ,CAAC,WAAW,EAAE,EAAE,UAAU,CAAC,CACnE,CAAC;SACH;KACF,CAAC,CAAC;AACL;;ACoDA;;;;;;;;;;SAUgB,mBAAmB,CAAoB,OAAgB;IACrE,OAAO,gBAAgB,CAAI,OAAO,EAAE,gBAAgB,CAAC,CAAC;AACxD;;;;","names":[],"sources":["src/components/common/item-list/context/item-context-controller.ts","src/components/common/item-list/fetch-item-context.ts","src/decorators/commerce/product-template-decorators.ts"],"sourcesContent":["import type {LitElement, ReactiveController, ReactiveControllerHost} from 'lit';\nimport type {InitializableComponent} from '@/src/decorators/types.js';\nimport {buildCustomEvent} from '@/src/utils/event-utils';\n\ntype LitElementWithError = Omit<\n  Pick<InitializableComponent, 'error'>,\n  'error'\n> &\n  LitElement & {\n    error: Error | null;\n  };\n\nconst itemContextEventName = 'atomic/resolveResult';\n\nexport class MissingParentError extends Error {\n  constructor(elementName: string, parentName: string) {\n    super(\n      `The \"${elementName}\" element must be the child of an \"${parentName}\" element.`\n    );\n  }\n}\n\nfunction extractFolded<T = Record<string, unknown>>(\n  item: Record<string, unknown>,\n  returnFolded: boolean\n): T {\n  if (returnFolded) {\n    if ('children' in item) {\n      return item as T;\n    } else {\n      return {children: [], result: item} as T;\n    }\n  }\n\n  if ('children' in item && 'result' in item) {\n    return item.result as T;\n  }\n  return item as T;\n}\n\n/**\n * A reactive controller that manages item context data from parent components.\n * Handles fetching item data via custom events and manages error states.\n */\nexport class ItemContextController<T = Record<string, unknown>>\n  implements ReactiveController\n{\n  private host: ReactiveControllerHost & LitElementWithError;\n  private parentName: string;\n  private folded: boolean;\n  private _item: T | null = null;\n  private _error: MissingParentError | null = null;\n\n  constructor(\n    host: ReactiveControllerHost & LitElementWithError,\n    options: {parentName?: string; folded?: boolean} = {}\n  ) {\n    this.host = host;\n    this.parentName = options.parentName ?? 'atomic-result';\n    this.folded = options.folded ?? false;\n    host.addController(this);\n  }\n\n  get item(): T | null {\n    return this._error ? null : this._item;\n  }\n\n  get error(): MissingParentError | null {\n    return this._error;\n  }\n\n  get hasError(): boolean {\n    return this._error !== null;\n  }\n\n  hostConnected(): void {\n    this._resolveItemContext();\n  }\n\n  private _resolveItemContext(): void {\n    const event = buildCustomEvent(\n      itemContextEventName,\n      (item: Record<string, unknown>) => {\n        this._item = extractFolded<T>(item, this.folded);\n        this._error = null;\n        this.host.error = null;\n        this.host.requestUpdate();\n      }\n    );\n\n    const canceled = this.host.dispatchEvent(event);\n    if (canceled) {\n      const elementName = (this.host as Element).nodeName.toLowerCase();\n      this._error = new MissingParentError(elementName, this.parentName);\n      this._item = null;\n      this.host.error = this._error;\n      this.host.requestUpdate();\n    }\n  }\n}\n\ntype ItemContextEventHandler<T> = (item: T) => void;\nexport type ItemContextEvent<T> = CustomEvent<ItemContextEventHandler<T>>;\n","import {closest} from '../../../utils/dom-utils.js';\nimport {buildCustomEvent} from '../../../utils/event-utils.js';\nimport {MissingParentError} from './context/item-context-controller.js';\n\nconst itemContextEventName = 'atomic/resolveResult';\n\ntype ItemContextEventHandler<T> = (item: T) => void;\n\nexport function fetchItemContext<T>(element: Element, parentName: string) {\n  return new Promise<T>((resolve, reject) => {\n    const event = buildCustomEvent<ItemContextEventHandler<T>>(\n      itemContextEventName,\n      (item: T) => {\n        return resolve(item);\n      }\n    );\n    element.dispatchEvent(event);\n\n    if (!closest(element, parentName)) {\n      reject(\n        new MissingParentError(element.nodeName.toLowerCase(), parentName)\n      );\n    }\n  });\n}\n","import type {InteractiveProduct, Product} from '@coveo/headless/commerce';\nimport type {LitElement} from 'lit';\nimport {\n  InteractiveItemContextController,\n  type InteractiveItemContextEvent,\n} from '@/src/components/common/item-list/context/interactive-item-context-controller';\nimport {\n  ItemContextController,\n  type ItemContextEvent,\n} from '@/src/components/common/item-list/context/item-context-controller';\nimport {fetchItemContext} from '@/src/components/common/item-list/fetch-item-context';\n\n/**\n * Creates a [Lit reactive controller](https://lit.dev/docs/composition/controllers/) for managing product context in product template components.\n *\n * @param host - The Lit component instance\n * @param options - Configuration options\n * @returns ItemContextController instance configured for atomic-product\n *\n * @example\n * ```typescript\n * @customElement('my-product-component')\n * export class MyProductComponent extends LitElement {\n *   private productController = createProductContextController(this);\n *\n *   @state() product!: Product;\n *\n *   render() {\n *     this.product = this.productController.item;\n *     return html`<div>${this.product?.ec_name}</div>`;\n *   }\n * }\n * ```\n */\nexport function createProductContextController(\n  host: LitElement & {error: Error | null},\n  options: {folded?: boolean} = {}\n): ItemContextController<Product> {\n  return new ItemContextController<Product>(host, {\n    parentName: 'atomic-product',\n    folded: options.folded ?? false,\n  });\n}\n\n/**\n * Creates a [Lit reactive controller](https://lit.dev/docs/composition/controllers/) for managing interactive product context in product template components.\n *\n * @param host - The Lit component instance\n * @returns InteractiveItemContextController instance\n *\n * @example\n * ```typescript\n * @customElement('my-interactive-product-component')\n * export class MyInteractiveProductComponent extends LitElement {\n *   private interactiveProductController = createInteractiveProductContextController(this);\n *\n *   @state() product!: Product;\n *\n *   render() {\n *     this.product = this.interactiveProductController.interactiveItem;\n *     return html`<div>${this.product?.ec_name}</div>`;\n *   }\n * }\n * ```\n */\nexport function createInteractiveProductContextController(\n  host: LitElement & {error: Error}\n): InteractiveItemContextController<InteractiveProduct> {\n  return new InteractiveItemContextController<InteractiveProduct>(host);\n}\n\nexport type ProductContextEvent<T = Product> = ItemContextEvent<T>;\nexport type InteractiveProductContextEvent<\n  T extends InteractiveProduct = InteractiveProduct,\n> = InteractiveItemContextEvent<T>;\n\n/**\n * Retrieves `Product` on a rendered `atomic-product`.\n *\n * This utility function is useful for building custom product template elements, see [Create a Product List](https://docs.coveo.com/en/atomic/latest/cc-search/create-custom-components/native-components/#custom-product-template-component-example) for more information.\n *\n * You should use the utility function in the [`connectedCallback` lifecycle method](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#using_the_lifecycle_callbacks).\n *\n * @param element - The element that the event is dispatched to, which must be the child of a rendered `atomic-product`.\n * @returns A promise that resolves on initialization of the parent `atomic-product` element, or rejects when there is no parent `atomic-product` element.\n */\nexport function fetchProductContext<T extends Product>(element: Element) {\n  return fetchItemContext<T>(element, 'atomic-product');\n}\n"],"version":3}
+{"file":"index.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAca,kBAAmB,SAAQ,KAAK;IAC3C,YAAY,WAAmB,EAAE,UAAkB;QACjD,KAAK,CACH,QAAQ,WAAW,sCAAsC,UAAU,YAAY,CAChF,CAAC;KACH;;;ACfH,MAAM,oBAAoB,GAAG,sBAAsB,CAAC;SAIpC,gBAAgB,CAAI,OAAgB,EAAE,UAAkB;IACtE,OAAO,IAAI,OAAO,CAAI,CAAC,OAAO,EAAE,MAAM;QACpC,MAAM,KAAK,GAAG,gBAAgB,CAC5B,oBAAoB,EACpB,CAAC,IAAO;YACN,OAAO,OAAO,CAAC,IAAI,CAAC,CAAC;SACtB,CACF,CAAC;QACF,OAAO,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAE7B,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE;YACjC,MAAM,CACJ,IAAI,kBAAkB,CAAC,OAAO,CAAC,QAAQ,CAAC,WAAW,EAAE,EAAE,UAAU,CAAC,CACnE,CAAC;SACH;KACF,CAAC,CAAC;AACL;;ACoDA;;;;;;;;;;SAUgB,mBAAmB,CAAoB,OAAgB;IACrE,OAAO,gBAAgB,CAAI,OAAO,EAAE,gBAAgB,CAAC,CAAC;AACxD;;;;","names":[],"sources":["src/components/common/item-list/context/item-context-controller.ts","src/components/common/item-list/fetch-item-context.ts","src/decorators/commerce/product-template-decorators.ts"],"sourcesContent":["import type {LitElement, ReactiveController, ReactiveControllerHost} from 'lit';\nimport type {InitializableComponent} from '@/src/decorators/types.js';\nimport {buildCustomEvent} from '@/src/utils/event-utils';\n\ntype LitElementWithError = Omit<\n  Pick<InitializableComponent, 'error'>,\n  'error'\n> &\n  LitElement & {\n    error: Error | null;\n  };\n\nconst itemContextEventName = 'atomic/resolveResult';\n\nexport class MissingParentError extends Error {\n  constructor(elementName: string, parentName: string) {\n    super(\n      `The \"${elementName}\" element must be the child of an \"${parentName}\" element.`\n    );\n  }\n}\n\nfunction extractFolded<T = Record<string, unknown>>(\n  item: Record<string, unknown>,\n  returnFolded: boolean\n): T {\n  if (returnFolded) {\n    if ('children' in item) {\n      return item as T;\n    } else {\n      return {children: [], result: item} as T;\n    }\n  }\n\n  if ('children' in item && 'result' in item) {\n    return item.result as T;\n  }\n  return item as T;\n}\n\n/**\n * A reactive controller that manages item context data from parent components.\n * Handles fetching item data via custom events and manages error states.\n */\nexport class ItemContextController<T = Record<string, unknown>>\n  implements ReactiveController\n{\n  private host: ReactiveControllerHost & LitElementWithError;\n  private parentName: string;\n  private folded: boolean;\n  private _item: T | null = null;\n  private _error: MissingParentError | null = null;\n\n  constructor(\n    host: ReactiveControllerHost & LitElementWithError,\n    options: {parentName?: string; folded?: boolean} = {}\n  ) {\n    this.host = host;\n    this.parentName = options.parentName ?? 'atomic-result';\n    this.folded = options.folded ?? false;\n    host.addController(this);\n  }\n\n  get item(): T | null {\n    return this._error ? null : this._item;\n  }\n\n  get error(): MissingParentError | null {\n    return this._error;\n  }\n\n  get hasError(): boolean {\n    return this._error !== null;\n  }\n\n  hostConnected(): void {\n    this._resolveItemContext();\n  }\n\n  private _resolveItemContext(): void {\n    const event = buildCustomEvent(\n      itemContextEventName,\n      (item: Record<string, unknown>) => {\n        this._item = extractFolded<T>(item, this.folded);\n        this._error = null;\n        this.host.error = null;\n        this.host.requestUpdate();\n      }\n    );\n\n    const canceled = this.host.dispatchEvent(event);\n    if (canceled) {\n      const elementName = (this.host as Element).nodeName.toLowerCase();\n      this._error = new MissingParentError(elementName, this.parentName);\n      this._item = null;\n      this.host.error = this._error;\n      this.host.requestUpdate();\n    }\n  }\n}\n\ntype ItemContextEventHandler<T> = (item: T) => void;\nexport type ItemContextEvent<T> = CustomEvent<ItemContextEventHandler<T>>;\n","import {closest} from '../../../utils/dom-utils.js';\nimport {buildCustomEvent} from '../../../utils/event-utils.js';\nimport {MissingParentError} from './context/item-context-controller.js';\n\nconst itemContextEventName = 'atomic/resolveResult';\n\ntype ItemContextEventHandler<T> = (item: T) => void;\n\nexport function fetchItemContext<T>(element: Element, parentName: string) {\n  return new Promise<T>((resolve, reject) => {\n    const event = buildCustomEvent<ItemContextEventHandler<T>>(\n      itemContextEventName,\n      (item: T) => {\n        return resolve(item);\n      }\n    );\n    element.dispatchEvent(event);\n\n    if (!closest(element, parentName)) {\n      reject(\n        new MissingParentError(element.nodeName.toLowerCase(), parentName)\n      );\n    }\n  });\n}\n","import type {InteractiveProduct, Product} from '@coveo/headless/commerce';\nimport type {LitElement} from 'lit';\nimport {\n  InteractiveItemContextController,\n  type InteractiveItemContextEvent,\n} from '@/src/components/common/item-list/context/interactive-item-context-controller';\nimport {\n  ItemContextController,\n  type ItemContextEvent,\n} from '@/src/components/common/item-list/context/item-context-controller';\nimport {fetchItemContext} from '@/src/components/common/item-list/fetch-item-context';\n\n/**\n * Creates a [Lit reactive controller](https://lit.dev/docs/composition/controllers/) for managing product context in product template components.\n *\n * @param host - The Lit component instance\n * @param options - Configuration options\n * @returns ItemContextController instance configured for atomic-product\n *\n * @example\n * ```typescript\n * @customElement('my-product-component')\n * export class MyProductComponent extends LitElement {\n *   private productController = createProductContextController(this);\n *\n *   @state() product!: Product;\n *\n *   render() {\n *     this.product = this.productController.item;\n *     return html`<div>${this.product?.ec_name}</div>`;\n *   }\n * }\n * ```\n */\nexport function createProductContextController(\n  host: LitElement & {error: Error | null},\n  options: {folded?: boolean} = {}\n): ItemContextController<Product> {\n  return new ItemContextController<Product>(host, {\n    parentName: 'atomic-product',\n    folded: options.folded ?? false,\n  });\n}\n\n/**\n * Creates a [Lit reactive controller](https://lit.dev/docs/composition/controllers/) for managing interactive product context in product template components.\n *\n * @param host - The Lit component instance\n * @returns InteractiveItemContextController instance\n *\n * @example\n * ```typescript\n * @customElement('my-interactive-product-component')\n * export class MyInteractiveProductComponent extends LitElement {\n *   private interactiveProductController = createInteractiveProductContextController(this);\n *\n *   @state() product!: Product;\n *\n *   render() {\n *     this.product = this.interactiveProductController.interactiveItem;\n *     return html`<div>${this.product?.ec_name}</div>`;\n *   }\n * }\n * ```\n */\nexport function createInteractiveProductContextController(\n  host: LitElement & {error: Error}\n): InteractiveItemContextController<InteractiveProduct> {\n  return new InteractiveItemContextController<InteractiveProduct>(host);\n}\n\nexport type ProductContextEvent<T = Product> = ItemContextEvent<T>;\nexport type InteractiveProductContextEvent<\n  T extends InteractiveProduct = InteractiveProduct,\n> = InteractiveItemContextEvent<T>;\n\n/**\n * Retrieves `Product` on a rendered `atomic-product`.\n *\n * This utility function is useful for building custom product template elements, see [Create a Product List](https://docs.coveo.com/en/atomic/latest/cc-search/create-custom-components/native-components/#custom-product-template-component-example) for more information.\n *\n * You should use the utility function in the [`connectedCallback` lifecycle method](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#using_the_lifecycle_callbacks).\n *\n * @param element - The element that the event is dispatched to, which must be the child of a rendered `atomic-product`.\n * @returns A promise that resolves on initialization of the parent `atomic-product` element, or rejects when there is no parent `atomic-product` element.\n */\nexport function fetchProductContext<T extends Product>(element: Element) {\n  return fetchItemContext<T>(element, 'atomic-product');\n}\n"],"version":3}

package/dist/atomic/components/tab-button.js

@@ -25,7 +25,7 @@ const AtomicTabButton = /*@__PURE__*/ proxyCustomElement(class AtomicTabButton e
         return this.active ? '' : 'text-neutral-dark hover:text-primary-light';
     }
     render() {
-        return (h(Host, { key: '8d718369b2efd1138ba68926b59b76f8c720ab93', role: "listitem", class: `${this.activeTabClass}`, "aria-current": this.active ? 'true' : 'false', "aria-label": 'tab for ' + this.label, part: 'button-container' + (this.active ? '-active' : '') }, h(Button, { key: 'c533d904d5e9189c7dabca041bd11fbc4c4cee43', class: `w-full truncate px-2 pb-1 text-xl sm:px-6 ${this.activeTabTextClass}`, part: 'tab-button' + (this.active ? '-active' : ''), onClick: this.select, style: "text-transparent" }, this.label)));
+        return (h(Host, { key: '54fada7b3513603138ccbacbcb02ba538fef10b0', role: "listitem", class: `${this.activeTabClass}`, "aria-current": this.active ? 'true' : 'false', "aria-label": 'tab for ' + this.label, part: 'button-container' + (this.active ? '-active' : '') }, h(Button, { key: '8b8ea4b2a6b70e6bd875dfd7450751828ef1076a', class: `w-full truncate px-2 pb-1 text-xl sm:px-6 ${this.activeTabTextClass}`, part: 'tab-button' + (this.active ? '-active' : ''), onClick: this.select, style: "text-transparent" }, this.label)));
     }
     static get style() { return AtomicTabButtonStyle0; }
 }, [0, "atomic-tab-button", {

package/dist/atomic/components/tab-popover.js

@@ -144,7 +144,7 @@ const TabPopover = /*@__PURE__*/ proxyCustomElement(class TabPopover extends HTM
         this.popperInstance?.forceUpdate();
     }
     render() {
-        return (h(Host, { key: 'daad6e94d79db5e2592dff929e461372fa854e05', onFocusout: (event) => this.closePopoverOnFocusOut(event), class: this.show ? '' : 'visibility-hidden', "aria-hidden": !this.show }, this.renderPopover(), this.isOpen && this.renderBackdrop()));
+        return (h(Host, { key: '5fed79028e682c16d9035ffb3a064951432568f9', onFocusout: (event) => this.closePopoverOnFocusOut(event), class: this.show ? '' : 'visibility-hidden', "aria-hidden": !this.show }, this.renderPopover(), this.isOpen && this.renderBackdrop()));
     }
     get host() { return this; }
     static get style() { return AtomicTabPopoverStyle0; }