@coveo/atomic 3.34.0-pre.d9575786e7 → 3.34.0-pre.db5a030986

package/dist/esm/atomic-insight-interface.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, s as setNonce, h, H as Host, g as getElement } from './index-3f35faca.js';
 import { m as markParentAsReady } from './init-queue-fbe942c3.js';
 import { buildResultsPerPage, loadFieldActions, buildInsightEngine } from '@coveo/headless/insight';
-import { g as getNextAnalyticsConfig, a as augmentWithExternalMiddleware, b as augmentAnalyticsWithAtomicVersion, C as CommonAtomicInterfaceHelper, i as instance } from './analytics-config-c0ff31a9.js';
+import { g as getNextAnalyticsConfig, a as augmentWithExternalMiddleware, b as augmentAnalyticsWithAtomicVersion, C as CommonAtomicInterfaceHelper, i as instance } from './analytics-config-f22843d1.js';
 import { A as ArrayProp } from './props-utils-e97ad6bd.js';
 import { D as DEFAULT_MOBILE_BREAKPOINT } from './replace-breakpoint-utils-7a336631.js';
 import { u as unsetLoadingFlag, s as setLoadingFlag, r as registerFacet, g as getFacetElements, w as waitUntilAppLoaded, a as createBaseStore } from './store-015afa83.js';

package/dist/esm/atomic-recs-interface.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, s as setNonce, h, g as getElement } from './index-3f35faca.js';
 import { m as markParentAsReady } from './init-queue-fbe942c3.js';
 import { loadRecommendationActions, loadSearchConfigurationActions, EcommerceDefaultFieldsToInclude, loadFieldActions, buildRecommendationEngine } from '@coveo/headless/recommendation';
-import { g as getNextAnalyticsConfig, c as augmentAnalyticsConfigWithDocument, d as augmentAnalyticsConfigWithAtomicVersion, a as augmentWithExternalMiddleware, b as augmentAnalyticsWithAtomicVersion, C as CommonAtomicInterfaceHelper, i as instance, m as mismatchedInterfaceAndEnginePropError } from './analytics-config-c0ff31a9.js';
+import { g as getNextAnalyticsConfig, c as augmentAnalyticsConfigWithDocument, d as augmentAnalyticsConfigWithAtomicVersion, a as augmentWithExternalMiddleware, b as augmentAnalyticsWithAtomicVersion, C as CommonAtomicInterfaceHelper, i as instance, m as mismatchedInterfaceAndEnginePropError } from './analytics-config-f22843d1.js';
 import { A as ArrayProp } from './props-utils-e97ad6bd.js';
 import { u as unsetLoadingFlag, s as setLoadingFlag, a as createBaseStore } from './store-015afa83.js';
 import './dayjs.min-d04628c6.js';

package/dist/esm/atomic-result-placeholder_8.entry.js

@@ -107,7 +107,7 @@ const AtomicResultTablePlaceholder = class {
         return getItemDisplayClasses('table', this.density, this.imageSize);
     }
     render() {
-        return (h("table", { key: 'ed3f575082ec1c2a9927251e2b09d5c0f70d78b5', class: `list-root animate-pulse ${this.getClasses().join(' ')}` }, h("thead", { key: 'd48900fa9c63a0a201379e034efce277095884e2' }, h("tr", { key: '46641a6003cadf5c7fc8dfad1ab9d1ef11c90190' }, h("th", { key: '617b903b6d8ffde30dcbb3e4dcbaaa4e377d3b19' }, h("div", { key: 'd082c63c3bde168ef9395afb9e0dd50fcb3a6825', class: `mt-2 h-8 ${placeholderClasses}`, style: { width: '14.5rem' } })), h("th", { key: '2fc5a593908aad27a251272284bce7b55ad521e6' }, h("div", { key: 'a49a28d807240f58b43fbe8a646f9de2218e34f9', class: `mt-2 h-8 ${placeholderClasses}`, style: { width: '9.75rem' } })), h("th", { key: '96676c1b68d7ab25dc14b9331642f5288d0f2b53' }, h("div", { key: '648e50f2fa4ba0214bc0b220d38520c86580013c', class: `mt-2 h-8 ${placeholderClasses}`, style: { width: '6.5rem' } })))), h("tbody", { key: '98adcdb91e5e58c6dd1cc09759e6cc0e7a08bf31' }, Array.from({ length: this.rows }, () => (h("tr", null, h("td", null, h("div", { class: `mb-6 h-8 ${placeholderClasses}`, style: { width: '22.875rem' } }), h("div", { class: `mb-2 h-5 ${placeholderClasses}`, style: { width: '23.75rem' } }), h("div", { class: `h-5 ${placeholderClasses}`, style: { width: '11.5rem' } })), h("td", null, h("div", { class: `mt-1.5 h-5 ${placeholderClasses}`, style: { width: '11rem' } })), h("td", null, h("div", { class: `mt-1.5 h-5 ${placeholderClasses}`, style: { width: '4.875rem' } }))))))));
+        return (h("table", { key: 'ed3f575082ec1c2a9927251e2b09d5c0f70d78b5', class: `list-root animate-pulse ${this.getClasses().join(' ')}` }, h("thead", { key: 'eaed97a7aadc3e76880b6f92b4ea7e99e82bc8db', "aria-hidden": "true" }, h("tr", { key: '904e042bc380d1ecad4dae1b19711e325b090f3b' }, h("th", { key: 'c6e0f34558ac9f9970b77f200ba2807e1ed77c27' }, h("div", { key: '21addd6241b4d0e94acb6593839e147f9b34f505', class: `mt-2 h-8 ${placeholderClasses}`, style: { width: '14.5rem' } })), h("th", { key: 'cedd03d8b316bab13b74defaa53449c1267a8452' }, h("div", { key: '647d298367fdbeda8e5d99edbe186781f7edf724', class: `mt-2 h-8 ${placeholderClasses}`, style: { width: '9.75rem' } })), h("th", { key: 'ceb12b35d77241c976665dc8842480a3d68e3387' }, h("div", { key: '8f2c70bd1f3df58f8361bba309ceca23d88ddae1', class: `mt-2 h-8 ${placeholderClasses}`, style: { width: '6.5rem' } })))), h("tbody", { key: 'fd3055adda17ec8d22cc06374220623e2906e53b' }, Array.from({ length: this.rows }, () => (h("tr", null, h("td", null, h("div", { class: `mb-6 h-8 ${placeholderClasses}`, style: { width: '22.875rem' } }), h("div", { class: `mb-2 h-5 ${placeholderClasses}`, style: { width: '23.75rem' } }), h("div", { class: `h-5 ${placeholderClasses}`, style: { width: '11.5rem' } })), h("td", null, h("div", { class: `mt-1.5 h-5 ${placeholderClasses}`, style: { width: '11rem' } })), h("td", null, h("div", { class: `mt-1.5 h-5 ${placeholderClasses}`, style: { width: '4.875rem' } }))))))));
     }
 };
 AtomicResultTablePlaceholder.style = AtomicResultTablePlaceholderStyle0;

package/dist/esm/atomic-result-placeholder_8.entry.js.map

@@ -1 +1 @@
-{"file":"atomic-result-placeholder.atomic-result-section-actions.atomic-result-section-badges.atomic-result-section-bottom-metadata.atomic-result-section-excerpt.atomic-result-section-title.atomic-result-section-visual.atomic-result-table-placeholder.entry.js","mappings":";;;;;;;;AAAA,MAAM,0BAA0B,GAAG,ml2WAAml2W,CAAC;AACvn2W,sCAAe,0BAA0B;;ACOzC,MAAMA,oBAAkB,GAAG,wCAAwC,CAAC;MAWvD,uBAAuB;;;;;;;IAK1B,iBAAiB,CAAC,KAAa;QACrC,QACE,WACE,KAAK,EAAE;gBACL,MAAM,EAAE,oBAAoB;gBAC5B,KAAK;aACN,IAED,WACE,KAAK,EAAEA,oBAAkB,EACzB,KAAK,EAAE,EAAC,MAAM,EAAE,kBAAkB,EAAC,GAC9B,CACH,EACN;KACH;IAEM,MAAM;QACX,QACE,4DACE,KAAK,EAAE,uDAAuD,qBAAqB,CACjF,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,SAAS,CACf;iBACE,IAAI,CAAC,GAAG,CAAC;iBACT,IAAI,EAAE,EAAE,IAEX,uFACE,4DAAK,KAAK,EAAEA,oBAAkB,GAAQ,CACT,EAC/B,uFACE,4DAAK,KAAK,EAAE,SAASA,oBAAkB,EAAE,GAAQ,CACpB,EAC/B,wFACE,4DAAK,KAAK,EAAE,UAAUA,oBAAkB,EAAE,GAAQ,CACpB,EAChC,sFACE,4DAAK,KAAK,EAAE,SAASA,oBAAkB,EAAE,GAAQ,CACrB,EAC9B,wFACG,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,EAC9B,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC7B,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,CACA,EAChC,gGACE,4DAAK,KAAK,EAAC,oBAAoB,IAC5B,KAAK,CAAC,IAAI,CAAC,EAAC,MAAM,EAAE,CAAC,EAAC,EAAE,OACvB,WACE,KAAK,EAAE,2BAA2BA,oBAAkB,EAAE,GACjD,CACR,CAAC,CACE,CACgC,CACpC,EACN;KACH;;;;MC9DU,0BAA0B;;;;IAG9B,kBAAkB;QACvB,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC7B;;;;MCNU,yBAAyB;;;;IAG7B,kBAAkB;QACvB,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC7B;;;;MCJU,iCAAiC;;;;IAGrC,kBAAkB;QACvB,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC7B;;;;MCNU,0BAA0B;;;;IAG9B,kBAAkB;QACvB,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC7B;;;;MCLU,wBAAwB;;;;IAG5B,kBAAkB;QACvB,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC7B;;;;MCFU,yBAAyB;;;;;IAQ7B,kBAAkB;QACvB,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC7B;;;;AC7BH,MAAM,+BAA+B,GAAG,8g9EAA8g9E,CAAC;AACvj9E,2CAAe,+BAA+B;;ACM9C,MAAM,kBAAkB,GAAG,0BAA0B,CAAC;MAWzC,4BAA4B;;;;;;;IAK/B,UAAU;QAChB,OAAO,qBAAqB,CAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;KACrE;IAEM,MAAM;QACX,QACE,8DAAO,KAAK,EAAE,2BAA2B,IAAI,CAAC,UAAU,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,IACpE,gEACE,6DACE,6DACE,4DACE,KAAK,EAAE,YAAY,kBAAkB,EAAE,EACvC,KAAK,EAAE,EAAC,KAAK,EAAE,SAAS,EAAC,GACpB,CACJ,EACL,6DACE,4DACE,KAAK,EAAE,YAAY,kBAAkB,EAAE,EACvC,KAAK,EAAE,EAAC,KAAK,EAAE,SAAS,EAAC,GACpB,CACJ,EACL,6DACE,4DACE,KAAK,EAAE,YAAY,kBAAkB,EAAE,EACvC,KAAK,EAAE,EAAC,KAAK,EAAE,QAAQ,EAAC,GACnB,CACJ,CACF,CACC,EACR,gEACG,KAAK,CAAC,IAAI,CAAC,EAAC,MAAM,EAAE,IAAI,CAAC,IAAI,EAAC,EAAE,OAC/B,cACE,cACE,WACE,KAAK,EAAE,YAAY,kBAAkB,EAAE,EACvC,KAAK,EAAE,EAAC,KAAK,EAAE,WAAW,EAAC,GACtB,EACP,WACE,KAAK,EAAE,YAAY,kBAAkB,EAAE,EACvC,KAAK,EAAE,EAAC,KAAK,EAAE,UAAU,EAAC,GACrB,EACP,WACE,KAAK,EAAE,OAAO,kBAAkB,EAAE,EAClC,KAAK,EAAE,EAAC,KAAK,EAAE,SAAS,EAAC,GACpB,CACJ,EACL,cACE,WACE,KAAK,EAAE,cAAc,kBAAkB,EAAE,EACzC,KAAK,EAAE,EAAC,KAAK,EAAE,OAAO,EAAC,GAClB,CACJ,EACL,cACE,WACE,KAAK,EAAE,cAAc,kBAAkB,EAAE,EACzC,KAAK,EAAE,EAAC,KAAK,EAAE,UAAU,EAAC,GACrB,CACJ,CACF,CACN,CAAC,CACI,CACF,EACR;KACH;;;;;;","names":["placeholderClasses"],"sources":["src/components/common/atomic-result-placeholder/atomic-result-placeholder.pcss?tag=atomic-result-placeholder&encapsulation=shadow","src/components/common/atomic-result-placeholder/atomic-result-placeholder.tsx","src/components/search/result-template-components/atomic-result-sections/atomic-result-section-actions.tsx","src/components/search/result-template-components/atomic-result-sections/atomic-result-section-badges.tsx","src/components/search/result-template-components/atomic-result-sections/atomic-result-section-bottom-metadata.tsx","src/components/search/result-template-components/atomic-result-sections/atomic-result-section-excerpt.tsx","src/components/search/result-template-components/atomic-result-sections/atomic-result-section-title.tsx","src/components/search/result-template-components/atomic-result-sections/atomic-result-section-visual.tsx","src/components/search/atomic-result-table-placeholder/atomic-result-table-placeholder.pcss?tag=atomic-result-table-placeholder&encapsulation=shadow","src/components/search/atomic-result-table-placeholder/atomic-result-table-placeholder.tsx"],"sourcesContent":["@import '../../../global/global.pcss';\n\n@import '../template-system/template-system.pcss';\n\n:host {\n  @apply atomic-template-system;\n\n  .result-root {\n    &.display-grid {\n      atomic-result-section-actions {\n        display: none;\n      }\n    }\n\n    .badge {\n      width: 14rem;\n    }\n\n    .action {\n      width: 10rem;\n    }\n\n    .title {\n      display: grid;\n      grid-auto-flow: column;\n      grid-gap: 0.5rem;\n      height: var(--line-height);\n      width: 30rem;\n      max-width: 100%;\n    }\n\n    .fields-placeholder {\n      display: grid;\n      grid-template-columns: repeat(auto-fill, min(11rem, 40%));\n      grid-column-gap: 0.5rem;\n\n      .field-value-placeholder {\n        height: var(--font-size);\n        margin: calc((var(--line-height) - var(--font-size)) / 2) 0;\n      }\n    }\n  }\n}\n","import {Component, h, Prop} from '@stencil/core';\nimport {\n  ItemDisplayLayout,\n  ItemDisplayDensity,\n  ItemDisplayImageSize,\n  getItemDisplayClasses,\n} from '../../common/layout/display-options';\n\nconst placeholderClasses = 'block bg-neutral w-full h-full rounded';\n\n/**\n * The `atomic-result-placeholder` component provides an intermediate visual state that is rendered before the first results are available.\n * @internal\n */\n@Component({\n  tag: 'atomic-result-placeholder',\n  styleUrl: 'atomic-result-placeholder.pcss',\n  shadow: true,\n})\nexport class AtomicResultPlaceholder {\n  @Prop() display!: ItemDisplayLayout;\n  @Prop() density!: ItemDisplayDensity;\n  @Prop() imageSize!: ItemDisplayImageSize;\n\n  private renderExcerptLine(width: string) {\n    return (\n      <div\n        style={{\n          height: 'var(--line-height)',\n          width,\n        }}\n      >\n        <div\n          class={placeholderClasses}\n          style={{height: 'var(--font-size)'}}\n        ></div>\n      </div>\n    );\n  }\n\n  public render() {\n    return (\n      <div\n        class={`result-root placeholder with-sections animate-pulse ${getItemDisplayClasses(\n          this.display,\n          this.density,\n          this.imageSize\n        )\n          .join(' ')\n          .trim()}`}\n      >\n        <atomic-result-section-visual>\n          <div class={placeholderClasses}></div>\n        </atomic-result-section-visual>\n        <atomic-result-section-badges>\n          <div class={`badge ${placeholderClasses}`}></div>\n        </atomic-result-section-badges>\n        <atomic-result-section-actions>\n          <div class={`action ${placeholderClasses}`}></div>\n        </atomic-result-section-actions>\n        <atomic-result-section-title>\n          <div class={`title ${placeholderClasses}`}></div>\n        </atomic-result-section-title>\n        <atomic-result-section-excerpt>\n          {this.renderExcerptLine('100%')}\n          {this.renderExcerptLine('95%')}\n          {this.renderExcerptLine('98%')}\n        </atomic-result-section-excerpt>\n        <atomic-result-section-bottom-metadata>\n          <div class=\"fields-placeholder\">\n            {Array.from({length: 4}, () => (\n              <div\n                class={`field-value-placeholder ${placeholderClasses}`}\n              ></div>\n            ))}\n          </div>\n        </atomic-result-section-bottom-metadata>\n      </div>\n    );\n  }\n}\n","import {Element, Component} from '@stencil/core';\nimport {hideEmptySection} from '../../../../utils/item-section-utils';\n\n/**\n * This section allows the information seeker to perform an action on an item without having to view its details.\n * 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.\n *\n * Behavior:\n * * Exposes the `--line-height` CSS variable so child elements can adjust to the current line height.\n * ** You should ensure that elements inside of it have `height: var(--line-height)`.\n * * Is a wrapping flexbox with a gap.\n * * May appear over, next to, or beneath the visual section.\n */\n@Component({\n  tag: 'atomic-result-section-actions',\n  shadow: false,\n})\nexport class AtomicResultSectionActions {\n  @Element() private host!: HTMLElement;\n\n  public componentDidRender() {\n    hideEmptySection(this.host);\n  }\n}\n","import {Element, Component} from '@stencil/core';\nimport {hideEmptySection} from '../../../../utils/item-section-utils';\n\n/**\n * This section provides badges that highlight special features of the item.\n *\n * Behavior:\n * * Exposes the `--line-height` CSS variable so child elements can adjust to the current line height.\n * ** You should ensure that elements inside of it have `height: var(--line-height)`.\n * * Is a wrapping flexbox with a gap.\n * * May appear over, next to, or beneath the visual section.\n */\n@Component({\n  tag: 'atomic-result-section-badges',\n  shadow: false,\n})\nexport class AtomicResultSectionBadges {\n  @Element() private host!: HTMLElement;\n\n  public componentDidRender() {\n    hideEmptySection(this.host);\n  }\n}\n","import {Element, Component} from '@stencil/core';\nimport {hideEmptySection} from '../../../../utils/item-section-utils';\n\n/**\n * This section displays additional descriptive information about the item.\n *\n * Behavior:\n * * Has a maximum height of two lines.\n * ** We recommend that you use `atomic-result-fields-list` to ensure that the fields in this section don’t overflow.\n * * Exposes the `--line-height` variable so child elements can adjust to the current line height.\n * * Has a defined CSS `color` property for text.\n * * Has a font weight.\n */\n@Component({\n  tag: 'atomic-result-section-bottom-metadata',\n  shadow: false,\n})\nexport class AtomicResultSectionBottomMetadata {\n  @Element() private host!: HTMLElement;\n\n  public componentDidRender() {\n    hideEmptySection(this.host);\n  }\n}\n","import {Element, Component} from '@stencil/core';\nimport {hideEmptySection} from '../../../../utils/item-section-utils';\n\n/**\n * This section contains an informative summary of the item's content.\n *\n * Behavior:\n * * Has a fixed height of one to three lines, depending on the layout and density.\n * * Ellipses overflowing text.\n * * Exposes the `--line-height` CSS variable so child elements can adjust to the current line height.\n * * Has a defined CSS `color` property for text.\n */\n@Component({\n  tag: 'atomic-result-section-excerpt',\n  shadow: false,\n})\nexport class AtomicResultSectionExcerpt {\n  @Element() private host!: HTMLElement;\n\n  public componentDidRender() {\n    hideEmptySection(this.host);\n  }\n}\n","import {Element, Component} from '@stencil/core';\nimport {hideEmptySection} from '../../../../utils/item-section-utils';\n\n/**\n * This section identifies the item by its name, and its main use is to make the result list scannable.\n * This is usually the page title.\n *\n * Behavior:\n * * Has a fixed height of two lines on grid layouts.\n * * Exposes the `--line-height` CSS variable so child elements can adjust to the current line height.\n * * Has a defined CSS `color` property for text.\n */\n@Component({\n  tag: 'atomic-result-section-title',\n  shadow: false,\n})\nexport class AtomicResultSectionTitle {\n  @Element() private host!: HTMLElement;\n\n  public componentDidRender() {\n    hideEmptySection(this.host);\n  }\n}\n","import {Element, Component, Prop} from '@stencil/core';\nimport {hideEmptySection} from '../../../../utils/item-section-utils';\nimport {ItemDisplayImageSize} from '../../../common/layout/display-options';\n\n/**\n * This section provides visual information about the item.\n * For example, in Commerce, an image is a great shorthand for a product category.\n * An icon can quickly show the item type, or an avatar can help identify to whom it is related.\n *\n * Behavior:\n * * Has a fixed size that depends on the specified image size, the layout, the density, and the screen size.\n * ** When the image size is set to `icon`, this section stays very small.\n * ** You should ensure that elements inside of it take the available space.\n * * Always has a 1:1 aspect ratio.\n */\n@Component({\n  tag: 'atomic-result-section-visual',\n  shadow: false,\n})\nexport class AtomicResultSectionVisual {\n  @Element() private host!: HTMLElement;\n\n  /**\n   * How large or small the visual section of results using this template should be.\n   */\n  @Prop({reflect: true}) public imageSize?: ItemDisplayImageSize;\n\n  public componentDidRender() {\n    hideEmptySection(this.host);\n  }\n}\n","@import '../../../global/global.pcss';\n@import '../../common/item-list/styles/mixins.pcss';\n\n:host {\n  display: grid;\n}\n\n.list-root.display-table {\n  @apply atomic-result-table border-neutral rounded-xl border;\n\n  thead tr,\n  tbody tr:not(:last-child) {\n    position: relative;\n\n    &::after {\n      content: ' ';\n      display: block;\n      position: absolute;\n      height: 1px;\n      bottom: 0;\n      left: var(--padding);\n      right: var(--padding);\n      @apply bg-neutral;\n    }\n  }\n\n  th,\n  td {\n    border-color: transparent;\n    border-radius: initial;\n  }\n\n  th {\n    background-color: transparent;\n  }\n}\n","import {Component, h, Prop} from '@stencil/core';\nimport {\n  ItemDisplayDensity,\n  ItemDisplayImageSize,\n  getItemDisplayClasses,\n} from '../../common/layout/display-options';\n\nconst placeholderClasses = 'block bg-neutral rounded';\n\n/**\n * The `atomic-result-table-placeholder` component provides an intermediate visual state that is rendered before the first results are available.\n * @internal\n */\n@Component({\n  tag: 'atomic-result-table-placeholder',\n  styleUrl: 'atomic-result-table-placeholder.pcss',\n  shadow: true,\n})\nexport class AtomicResultTablePlaceholder {\n  @Prop() density!: ItemDisplayDensity;\n  @Prop() imageSize!: ItemDisplayImageSize;\n  @Prop() rows!: number;\n\n  private getClasses() {\n    return getItemDisplayClasses('table', this.density, this.imageSize);\n  }\n\n  public render() {\n    return (\n      <table class={`list-root animate-pulse ${this.getClasses().join(' ')}`}>\n        <thead>\n          <tr>\n            <th>\n              <div\n                class={`mt-2 h-8 ${placeholderClasses}`}\n                style={{width: '14.5rem'}}\n              ></div>\n            </th>\n            <th>\n              <div\n                class={`mt-2 h-8 ${placeholderClasses}`}\n                style={{width: '9.75rem'}}\n              ></div>\n            </th>\n            <th>\n              <div\n                class={`mt-2 h-8 ${placeholderClasses}`}\n                style={{width: '6.5rem'}}\n              ></div>\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          {Array.from({length: this.rows}, () => (\n            <tr>\n              <td>\n                <div\n                  class={`mb-6 h-8 ${placeholderClasses}`}\n                  style={{width: '22.875rem'}}\n                ></div>\n                <div\n                  class={`mb-2 h-5 ${placeholderClasses}`}\n                  style={{width: '23.75rem'}}\n                ></div>\n                <div\n                  class={`h-5 ${placeholderClasses}`}\n                  style={{width: '11.5rem'}}\n                ></div>\n              </td>\n              <td>\n                <div\n                  class={`mt-1.5 h-5 ${placeholderClasses}`}\n                  style={{width: '11rem'}}\n                ></div>\n              </td>\n              <td>\n                <div\n                  class={`mt-1.5 h-5 ${placeholderClasses}`}\n                  style={{width: '4.875rem'}}\n                ></div>\n              </td>\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    );\n  }\n}\n"],"version":3}
+{"file":"atomic-result-placeholder.atomic-result-section-actions.atomic-result-section-badges.atomic-result-section-bottom-metadata.atomic-result-section-excerpt.atomic-result-section-title.atomic-result-section-visual.atomic-result-table-placeholder.entry.js","mappings":"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","names":["placeholderClasses"],"sources":["src/components/common/atomic-result-placeholder/atomic-result-placeholder.pcss?tag=atomic-result-placeholder&encapsulation=shadow","src/components/common/atomic-result-placeholder/atomic-result-placeholder.tsx","src/components/search/result-template-components/atomic-result-sections/atomic-result-section-actions.tsx","src/components/search/result-template-components/atomic-result-sections/atomic-result-section-badges.tsx","src/components/search/result-template-components/atomic-result-sections/atomic-result-section-bottom-metadata.tsx","src/components/search/result-template-components/atomic-result-sections/atomic-result-section-excerpt.tsx","src/components/search/result-template-components/atomic-result-sections/atomic-result-section-title.tsx","src/components/search/result-template-components/atomic-result-sections/atomic-result-section-visual.tsx","src/components/search/atomic-result-table-placeholder/atomic-result-table-placeholder.pcss?tag=atomic-result-table-placeholder&encapsulation=shadow","src/components/search/atomic-result-table-placeholder/atomic-result-table-placeholder.tsx"],"sourcesContent":["@import '../../../global/global.pcss';\n\n@import '../template-system/template-system.pcss';\n\n:host {\n  @apply atomic-template-system;\n\n  .result-root {\n    &.display-grid {\n      atomic-result-section-actions {\n        display: none;\n      }\n    }\n\n    .badge {\n      width: 14rem;\n    }\n\n    .action {\n      width: 10rem;\n    }\n\n    .title {\n      display: grid;\n      grid-auto-flow: column;\n      grid-gap: 0.5rem;\n      height: var(--line-height);\n      width: 30rem;\n      max-width: 100%;\n    }\n\n    .fields-placeholder {\n      display: grid;\n      grid-template-columns: repeat(auto-fill, min(11rem, 40%));\n      grid-column-gap: 0.5rem;\n\n      .field-value-placeholder {\n        height: var(--font-size);\n        margin: calc((var(--line-height) - var(--font-size)) / 2) 0;\n      }\n    }\n  }\n}\n","import {Component, h, Prop} from '@stencil/core';\nimport {\n  ItemDisplayLayout,\n  ItemDisplayDensity,\n  ItemDisplayImageSize,\n  getItemDisplayClasses,\n} from '../../common/layout/display-options';\n\nconst placeholderClasses = 'block bg-neutral w-full h-full rounded';\n\n/**\n * The `atomic-result-placeholder` component provides an intermediate visual state that is rendered before the first results are available.\n * @internal\n */\n@Component({\n  tag: 'atomic-result-placeholder',\n  styleUrl: 'atomic-result-placeholder.pcss',\n  shadow: true,\n})\nexport class AtomicResultPlaceholder {\n  @Prop() display!: ItemDisplayLayout;\n  @Prop() density!: ItemDisplayDensity;\n  @Prop() imageSize!: ItemDisplayImageSize;\n\n  private renderExcerptLine(width: string) {\n    return (\n      <div\n        style={{\n          height: 'var(--line-height)',\n          width,\n        }}\n      >\n        <div\n          class={placeholderClasses}\n          style={{height: 'var(--font-size)'}}\n        ></div>\n      </div>\n    );\n  }\n\n  public render() {\n    return (\n      <div\n        class={`result-root placeholder with-sections animate-pulse ${getItemDisplayClasses(\n          this.display,\n          this.density,\n          this.imageSize\n        )\n          .join(' ')\n          .trim()}`}\n      >\n        <atomic-result-section-visual>\n          <div class={placeholderClasses}></div>\n        </atomic-result-section-visual>\n        <atomic-result-section-badges>\n          <div class={`badge ${placeholderClasses}`}></div>\n        </atomic-result-section-badges>\n        <atomic-result-section-actions>\n          <div class={`action ${placeholderClasses}`}></div>\n        </atomic-result-section-actions>\n        <atomic-result-section-title>\n          <div class={`title ${placeholderClasses}`}></div>\n        </atomic-result-section-title>\n        <atomic-result-section-excerpt>\n          {this.renderExcerptLine('100%')}\n          {this.renderExcerptLine('95%')}\n          {this.renderExcerptLine('98%')}\n        </atomic-result-section-excerpt>\n        <atomic-result-section-bottom-metadata>\n          <div class=\"fields-placeholder\">\n            {Array.from({length: 4}, () => (\n              <div\n                class={`field-value-placeholder ${placeholderClasses}`}\n              ></div>\n            ))}\n          </div>\n        </atomic-result-section-bottom-metadata>\n      </div>\n    );\n  }\n}\n","import {Element, Component} from '@stencil/core';\nimport {hideEmptySection} from '../../../../utils/item-section-utils';\n\n/**\n * This section allows the information seeker to perform an action on an item without having to view its details.\n * 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.\n *\n * Behavior:\n * * Exposes the `--line-height` CSS variable so child elements can adjust to the current line height.\n * ** You should ensure that elements inside of it have `height: var(--line-height)`.\n * * Is a wrapping flexbox with a gap.\n * * May appear over, next to, or beneath the visual section.\n */\n@Component({\n  tag: 'atomic-result-section-actions',\n  shadow: false,\n})\nexport class AtomicResultSectionActions {\n  @Element() private host!: HTMLElement;\n\n  public componentDidRender() {\n    hideEmptySection(this.host);\n  }\n}\n","import {Element, Component} from '@stencil/core';\nimport {hideEmptySection} from '../../../../utils/item-section-utils';\n\n/**\n * This section provides badges that highlight special features of the item.\n *\n * Behavior:\n * * Exposes the `--line-height` CSS variable so child elements can adjust to the current line height.\n * ** You should ensure that elements inside of it have `height: var(--line-height)`.\n * * Is a wrapping flexbox with a gap.\n * * May appear over, next to, or beneath the visual section.\n */\n@Component({\n  tag: 'atomic-result-section-badges',\n  shadow: false,\n})\nexport class AtomicResultSectionBadges {\n  @Element() private host!: HTMLElement;\n\n  public componentDidRender() {\n    hideEmptySection(this.host);\n  }\n}\n","import {Element, Component} from '@stencil/core';\nimport {hideEmptySection} from '../../../../utils/item-section-utils';\n\n/**\n * This section displays additional descriptive information about the item.\n *\n * Behavior:\n * * Has a maximum height of two lines.\n * ** We recommend that you use `atomic-result-fields-list` to ensure that the fields in this section don’t overflow.\n * * Exposes the `--line-height` variable so child elements can adjust to the current line height.\n * * Has a defined CSS `color` property for text.\n * * Has a font weight.\n */\n@Component({\n  tag: 'atomic-result-section-bottom-metadata',\n  shadow: false,\n})\nexport class AtomicResultSectionBottomMetadata {\n  @Element() private host!: HTMLElement;\n\n  public componentDidRender() {\n    hideEmptySection(this.host);\n  }\n}\n","import {Element, Component} from '@stencil/core';\nimport {hideEmptySection} from '../../../../utils/item-section-utils';\n\n/**\n * This section contains an informative summary of the item's content.\n *\n * Behavior:\n * * Has a fixed height of one to three lines, depending on the layout and density.\n * * Ellipses overflowing text.\n * * Exposes the `--line-height` CSS variable so child elements can adjust to the current line height.\n * * Has a defined CSS `color` property for text.\n */\n@Component({\n  tag: 'atomic-result-section-excerpt',\n  shadow: false,\n})\nexport class AtomicResultSectionExcerpt {\n  @Element() private host!: HTMLElement;\n\n  public componentDidRender() {\n    hideEmptySection(this.host);\n  }\n}\n","import {Element, Component} from '@stencil/core';\nimport {hideEmptySection} from '../../../../utils/item-section-utils';\n\n/**\n * This section identifies the item by its name, and its main use is to make the result list scannable.\n * This is usually the page title.\n *\n * Behavior:\n * * Has a fixed height of two lines on grid layouts.\n * * Exposes the `--line-height` CSS variable so child elements can adjust to the current line height.\n * * Has a defined CSS `color` property for text.\n */\n@Component({\n  tag: 'atomic-result-section-title',\n  shadow: false,\n})\nexport class AtomicResultSectionTitle {\n  @Element() private host!: HTMLElement;\n\n  public componentDidRender() {\n    hideEmptySection(this.host);\n  }\n}\n","import {Element, Component, Prop} from '@stencil/core';\nimport {hideEmptySection} from '../../../../utils/item-section-utils';\nimport {ItemDisplayImageSize} from '../../../common/layout/display-options';\n\n/**\n * This section provides visual information about the item.\n * For example, in Commerce, an image is a great shorthand for a product category.\n * An icon can quickly show the item type, or an avatar can help identify to whom it is related.\n *\n * Behavior:\n * * Has a fixed size that depends on the specified image size, the layout, the density, and the screen size.\n * ** When the image size is set to `icon`, this section stays very small.\n * ** You should ensure that elements inside of it take the available space.\n * * Always has a 1:1 aspect ratio.\n */\n@Component({\n  tag: 'atomic-result-section-visual',\n  shadow: false,\n})\nexport class AtomicResultSectionVisual {\n  @Element() private host!: HTMLElement;\n\n  /**\n   * How large or small the visual section of results using this template should be.\n   */\n  @Prop({reflect: true}) public imageSize?: ItemDisplayImageSize;\n\n  public componentDidRender() {\n    hideEmptySection(this.host);\n  }\n}\n","@import '../../../global/global.pcss';\n@import '../../common/item-list/styles/mixins.pcss';\n\n:host {\n  display: grid;\n}\n\n.list-root.display-table {\n  @apply atomic-result-table border-neutral rounded-xl border;\n\n  thead tr,\n  tbody tr:not(:last-child) {\n    position: relative;\n\n    &::after {\n      content: ' ';\n      display: block;\n      position: absolute;\n      height: 1px;\n      bottom: 0;\n      left: var(--padding);\n      right: var(--padding);\n      @apply bg-neutral;\n    }\n  }\n\n  th,\n  td {\n    border-color: transparent;\n    border-radius: initial;\n  }\n\n  th {\n    background-color: transparent;\n  }\n}\n","import {Component, h, Prop} from '@stencil/core';\nimport {\n  ItemDisplayDensity,\n  ItemDisplayImageSize,\n  getItemDisplayClasses,\n} from '../../common/layout/display-options';\n\nconst placeholderClasses = 'block bg-neutral rounded';\n\n/**\n * The `atomic-result-table-placeholder` component provides an intermediate visual state that is rendered before the first results are available.\n * @internal\n */\n@Component({\n  tag: 'atomic-result-table-placeholder',\n  styleUrl: 'atomic-result-table-placeholder.pcss',\n  shadow: true,\n})\nexport class AtomicResultTablePlaceholder {\n  @Prop() density!: ItemDisplayDensity;\n  @Prop() imageSize!: ItemDisplayImageSize;\n  @Prop() rows!: number;\n\n  private getClasses() {\n    return getItemDisplayClasses('table', this.density, this.imageSize);\n  }\n\n  public render() {\n    return (\n      <table class={`list-root animate-pulse ${this.getClasses().join(' ')}`}>\n        <thead aria-hidden=\"true\">\n          <tr>\n            <th>\n              <div\n                class={`mt-2 h-8 ${placeholderClasses}`}\n                style={{width: '14.5rem'}}\n              ></div>\n            </th>\n            <th>\n              <div\n                class={`mt-2 h-8 ${placeholderClasses}`}\n                style={{width: '9.75rem'}}\n              ></div>\n            </th>\n            <th>\n              <div\n                class={`mt-2 h-8 ${placeholderClasses}`}\n                style={{width: '6.5rem'}}\n              ></div>\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          {Array.from({length: this.rows}, () => (\n            <tr>\n              <td>\n                <div\n                  class={`mb-6 h-8 ${placeholderClasses}`}\n                  style={{width: '22.875rem'}}\n                ></div>\n                <div\n                  class={`mb-2 h-5 ${placeholderClasses}`}\n                  style={{width: '23.75rem'}}\n                ></div>\n                <div\n                  class={`h-5 ${placeholderClasses}`}\n                  style={{width: '11.5rem'}}\n                ></div>\n              </td>\n              <td>\n                <div\n                  class={`mt-1.5 h-5 ${placeholderClasses}`}\n                  style={{width: '11rem'}}\n                ></div>\n              </td>\n              <td>\n                <div\n                  class={`mt-1.5 h-5 ${placeholderClasses}`}\n                  style={{width: '4.875rem'}}\n                ></div>\n              </td>\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/version.js

@@ -1,2 +1,2 @@
-export const headlessVersion = '3.31.1';
-export const atomicVersion = '3.34.0-pre.d9575786e7';
+export const headlessVersion = '3.31.2-pre.db5a030986';
+export const atomicVersion = '3.34.0-pre.db5a030986';

package/dist/types/components/commerce/atomic-product/atomic-product.d.ts

@@ -1,20 +1,19 @@
 import type { InteractiveProduct, Product } from '@coveo/headless/commerce';
 import { type CSSResultGroup, LitElement } from 'lit';
+import type { CommerceStore } from "../atomic-commerce-interface/store";
+import type { CommerceRecommendationStore } from "../atomic-commerce-recommendation-interface/store";
 import type { DisplayConfig } from "../../common/item-list/context/item-display-config-context-controller";
 import { type ItemRenderingFunction } from "../../common/item-list/item-list-common";
-import { type ItemDisplayDensity, type ItemDisplayImageSize, type ItemDisplayLayout } from "../../common/layout/display-options";
+import type { ItemDisplayDensity, ItemDisplayImageSize, ItemDisplayLayout } from "../../common/layout/display-options";
 import type { InteractiveProductContextEvent, ProductContextEvent } from "../../../decorators/commerce/product-template-decorators";
-import type { CommerceStore } from '../atomic-commerce-interface/store';
-import type { CommerceRecommendationStore } from '../atomic-commerce-recommendation-interface/store';
 declare const AtomicProduct_base: typeof LitElement;
 /**
  * The `atomic-product` component is used internally by the `atomic-commerce-product-list` and `atomic-commerce-recommendation-list` components.
  */
 export declare class AtomicProduct extends AtomicProduct_base {
-    private layout;
     private productRootRef?;
     private linkContainerRef?;
-    private executedRenderingFunctionOnce;
+    private itemLayoutController;
     static styles: CSSResultGroup;
     /**
      * Whether `atomic-product-link` components nested in the `atomic-product` should stop click event propagation.
@@ -84,25 +83,14 @@ export declare class AtomicProduct extends AtomicProduct_base {
     clickLinkContainer: () => void;
     connectedCallback(): Promise<void>;
     disconnectedCallback(): void;
-    private get isCustomRenderFunctionMode();
     private getContentHTML;
     private getLinkHTML;
-    private shouldExecuteRenderFunction;
     render(): import("lit-html").TemplateResult<1>;
     firstUpdated(_changedProperties: Map<string, unknown>): void;
-    private getCombinedClasses;
-    private applyClassesToChildren;
-    updated(_changedProperties: Map<string, unknown>): void;
 }
 declare global {
     interface HTMLElementTagNameMap {
         'atomic-product': AtomicProduct;
     }
-    interface HTMLElementEventMap {
-        'atomic/resolveResult': ProductContextEvent;
-        'atomic/resolveInteractiveResult': InteractiveProductContextEvent;
-        'atomic/resolveStopPropagation': CustomEvent;
-        'atomic/resolveResultDisplayConfig': ProductContextEvent<DisplayConfig>;
-    }
 }
 export {};

package/dist/types/components/common/layout/custom-render-controller.d.ts

@@ -0,0 +1,25 @@
+import type { LitElement, ReactiveController, ReactiveControllerHost } from 'lit';
+import type { ItemRenderingFunction } from "../item-list/item-list-common";
+import type { AnyItem } from "../item-list/unfolded-item";
+export interface CustomRenderHost extends ReactiveControllerHost {
+    shadowRoot?: ShadowRoot | null;
+}
+export interface CustomRenderOptions {
+    renderingFunction: () => ItemRenderingFunction<AnyItem> | undefined;
+    itemData: () => AnyItem | undefined;
+    rootElementRef: () => HTMLElement | undefined;
+    linkContainerRef?: () => HTMLElement | undefined;
+    onRenderComplete?: (element: HTMLElement, output: string) => void;
+}
+/**
+ * A reactive controller that manages custom rendering function execution for item components.
+ */
+export declare class CustomRenderController implements ReactiveController {
+    private options;
+    private hasExecutedRenderFunction;
+    constructor(host: CustomRenderHost & LitElement, options: CustomRenderOptions);
+    hostConnected(): void;
+    hostUpdated(): void;
+    private resetRenderState;
+    private executeRenderFunction;
+}

package/dist/types/components/common/layout/item-layout-controller.d.ts

@@ -0,0 +1,47 @@
+import type { LitElement, ReactiveController, ReactiveControllerHost } from 'lit';
+import type { ItemRenderingFunction } from "../item-list/item-list-common";
+import type { AnyItem } from "../item-list/unfolded-item";
+import { type ItemDisplayDensity, type ItemDisplayImageSize, type ItemDisplayLayout, ItemLayout } from './display-options';
+export interface ItemLayoutHost extends ReactiveControllerHost {
+    shadowRoot?: ShadowRoot | null;
+}
+export interface LayoutDisplayConfig {
+    display: ItemDisplayLayout;
+    density: ItemDisplayDensity;
+    imageSize: ItemDisplayImageSize;
+}
+export interface ItemLayoutOptions {
+    elementPrefix: string;
+    renderingFunction: () => ItemRenderingFunction<AnyItem> | undefined;
+    content: () => ParentNode | undefined;
+    layoutConfig: () => LayoutDisplayConfig;
+    itemClasses: () => string;
+}
+/**
+ * A reactive controller that manages layout creation and class application for item components.
+ */
+export declare class ItemLayoutController implements ReactiveController {
+    private host;
+    private options;
+    private layoutInstance;
+    constructor(host: ItemLayoutHost & LitElement, options: ItemLayoutOptions);
+    hostConnected(): void;
+    hostUpdated(): void;
+    /**
+     * Gets the current layout instance
+     */
+    getLayout(): ItemLayout | null;
+    /**
+     * Gets combined layout and extra classes
+     */
+    getCombinedClasses(additionalContent?: string): string[];
+    /**
+     * Applies layout classes to a specific element (useful for custom rendering)
+     */
+    applyLayoutClassesToElement(element: HTMLElement, additionalContent?: string): void;
+    private applyLayoutClasses;
+    private createLayout;
+    private hasCustomRenderFunction;
+    private addClassesToElements;
+    private observeAndApplyClasses;
+}

package/docs/atomic-docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-10-07T17:12:25",
+  "timestamp": "2025-10-08T02:10:16",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.20.0",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coveo/atomic",
   "type": "module",
-  "version": "3.34.0-pre.d9575786e7",
+  "version": "3.34.0-pre.db5a030986",
   "description": "A web-component library for building modern UIs interfacing with the Coveo platform",
   "homepage": "https://docs.coveo.com/en/atomic/latest/",
   "repository": {
@@ -47,10 +47,10 @@
     "licenses/"
   ],
   "scripts": {
-    "clean": "rimraf -rf dist/* dist-storybook/* www/* docs/* playwright-report/*",
+    "clean": "node ../../utils/ci/rm-rf.mjs dist/* dist-storybook/* www/* docs/* playwright-report/*",
     "build:storybook": "storybook build -o dist-storybook",
     "build:cem": "cem analyze",
-    "build:stencil-lit": "node --max_old_space_size=6144 ../../node_modules/@stencil/core/bin/stencil build --tsConfig tsconfig.stencil.json && node ./scripts/stencil-proxy.mjs && node ./scripts/build.mjs --config=tsconfig.lit.json && esbuild src/autoloader/index.ts --format=esm --outfile=dist/atomic/autoloader/index.esm.js && esbuild src/autoloader/index.ts --format=cjs --outfile=dist/atomic/autoloader/index.cjs.js && rollup -c rollup.config.js && rimraf ./dist/atomic/loader/package.json && tsc --noEmit --esModuleInterop --skipLibCheck ./dist/types/components.d.ts",
+    "build:stencil-lit": "node --max_old_space_size=6144 ../../node_modules/@stencil/core/bin/stencil build --tsConfig tsconfig.stencil.json && node ./scripts/stencil-proxy.mjs && node ./scripts/build.mjs --config=tsconfig.lit.json && esbuild src/autoloader/index.ts --format=esm --outfile=dist/atomic/autoloader/index.esm.js && esbuild src/autoloader/index.ts --format=cjs --outfile=dist/atomic/autoloader/index.cjs.js && rollup -c rollup.config.js && node ../../utils/ci/rm-rf.mjs ./dist/atomic/loader/package.json && tsc --noEmit --esModuleInterop --skipLibCheck ./dist/types/components.d.ts",
     "build:angular": "npx turbo gen:lit --filter=@coveo/atomic-angular-builder",
     "build:react": "npx turbo gen:lit --filter=@coveo/atomic-react",
     "build:locales": "node ./scripts/create-generated-folder.mjs && node ./scripts/split-locales.mjs && node ./scripts/copy-dayjs-locales.mjs",
@@ -61,8 +61,9 @@
     "prod": "npx serve www -l 3333 --no-request-logging",
     "test": "npm run test:stencil && npm run test:lit",
     "test:stencil": "stencil test --spec -- src/utils/initialization-utils.spec.ts",
-    "test:lit": "vitest run",
-    "test:watch": "vitest",
+    "test:lit": "vitest run --project=atomic-default",
+    "test:watch": "vitest --project=atomic-default",
+    "test:storybook": "vitest run --project=storybook",
     "e2e": "cypress run --browser chrome",
     "e2e:firefox": "cypress run --browser firefox",
     "e2e:watch": "cypress open --browser chrome --e2e",
@@ -77,11 +78,12 @@
     "release:phase3": "npm run-script -w=@coveo/ci npm-publish",
     "release:phase1": "npm run-script -w=@coveo/ci bump",
     "promote:npm:latest": "npm run-script -w=@coveo/ci promote-npm-prod",
-    "validate:definitions": "tsc --noEmit --esModuleInterop --skipLibCheck ./dist/types/components.d.ts"
+    "validate:definitions": "tsc --noEmit --esModuleInterop --skipLibCheck ./dist/types/components.d.ts",
+    "chromatic": "npx chromatic"
   },
   "dependencies": {
-    "@coveo/bueno": "1.1.2",
-    "@coveo/headless": "3.31.1",
+    "@coveo/bueno": "1.1.3-pre.db5a030986",
+    "@coveo/headless": "3.31.2-pre.db5a030986",
     "@lit/context": "1.1.6",
     "@open-wc/lit-helpers": "0.7.0",
     "@popperjs/core": "2.11.8",
@@ -110,6 +112,7 @@
     "@stencil/react-output-target": "0.5.3",
     "@storybook/addon-a11y": "9.1.2",
     "@storybook/addon-docs": "9.1.2",
+    "@storybook/addon-vitest": "9.1.2",
     "@storybook/icons": "1.4.0",
     "@storybook/web-components-vite": "9.1.2",
     "@tailwindcss/postcss": "4.1.13",
@@ -118,8 +121,10 @@
     "@types/jest": "29.5.14",
     "@types/puppeteer": "7.0.4",
     "@vitest/browser": "3.2.4",
+    "@vitest/coverage-v8": "^3.2.4",
     "@wc-toolkit/storybook-helpers": "9.0.1",
     "axe-core": "4.10.3",
+    "chromatic": "13.3.0",
     "cypress": "13.7.3",
     "cypress-axe": "1.6.0",
     "cypress-repeat": "2.3.9",
@@ -152,8 +157,8 @@
     "wait-on": "8.0.4"
   },
   "peerDependencies": {
-    "@coveo/bueno": "1.1.2",
-    "@coveo/headless": "3.31.1",
+    "@coveo/bueno": "1.1.3-pre.db5a030986",
+    "@coveo/headless": "3.31.2-pre.db5a030986",
     "typescript": ">=5.0.0"
   },
   "peerDependenciesMeta": {