@coveo/atomic 3.33.2-pre.f51bdbb034 → 3.33.3-pre.cff620d97c

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coveo/atomic",
   "type": "module",
-  "version": "3.33.2-pre.f51bdbb034",
+  "version": "3.33.3-pre.cff620d97c",
   "description": "A web-component library for building modern UIs interfacing with the Coveo platform",
   "homepage": "https://docs.coveo.com/en/atomic/latest/",
   "repository": {
@@ -82,8 +82,9 @@
   },
   "dependencies": {
     "@coveo/bueno": "1.1.0",
-    "@coveo/headless": "3.29.0",
+    "@coveo/headless": "3.29.1",
     "@lit/context": "1.1.6",
+    "@open-wc/lit-helpers": "0.7.0",
     "@popperjs/core": "2.11.8",
     "@salesforce-ux/design-system": "2.27.2",
     "@stencil/core": "4.20.0",
@@ -109,17 +110,10 @@
     "@stencil-community/postcss": "2.2.0",
     "@stencil/angular-output-target": "0.8.4",
     "@stencil/react-output-target": "0.5.3",
-    "@storybook/addon-a11y": "8.1.11",
-    "@storybook/addon-essentials": "8.1.11",
-    "@storybook/addon-interactions": "8.1.11",
-    "@storybook/components": "8.1.11",
-    "@storybook/core-events": "8.1.11",
+    "@storybook/addon-a11y": "9.1.2",
+    "@storybook/addon-docs": "9.1.2",
     "@storybook/icons": "1.4.0",
-    "@storybook/manager-api": "8.1.11",
-    "@storybook/router": "8.1.11",
-    "@storybook/test": "8.1.11",
-    "@storybook/web-components": "8.1.11",
-    "@storybook/web-components-vite": "8.1.11",
+    "@storybook/web-components-vite": "9.1.2",
     "@tailwindcss/postcss": "4.1.11",
     "@tailwindcss/vite": "4.1.11",
     "@testing-library/jest-dom": "6.6.3",
@@ -131,6 +125,7 @@
     "@types/postcss-import": "14.0.3",
     "@types/puppeteer": "7.0.4",
     "@vitest/browser": "3.2.4",
+    "@wc-toolkit/storybook-helpers": "9.0.1",
     "@whitespace/storybook-addon-html": "6.1.1",
     "axe-core": "4.10.3",
     "chalk": "5.4.1",
@@ -152,13 +147,14 @@
     "postcss": "8.5.6",
     "postcss-load-config": "6.0.1",
     "postcss-nested": "7.0.2",
+    "prettier": "3.6.2",
     "puppeteer": "24.15.0",
     "react": "19.1.1",
     "rollup": "4.46.2",
     "rollup-plugin-copy": "3.5.0",
     "rollup-plugin-html": "0.2.1",
     "shadow-dom-testing-library": "1.12.0",
-    "storybook": "8.1.2",
+    "storybook": "9.1.2",
     "tailwindcss": "4.1.11",
     "ts-dedent": "2.2.0",
     "ts-lit-plugin": "2.0.2",
@@ -169,7 +165,7 @@
   },
   "peerDependencies": {
     "@coveo/bueno": "1.1.0",
-    "@coveo/headless": "3.29.0",
+    "@coveo/headless": "3.29.1",
     "typescript": ">=5.0.0"
   },
   "peerDependenciesMeta": {

package/dist/atomic/components/atomic-search-layout.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../../types/components";
-
-interface AtomicSearchLayout extends Components.AtomicSearchLayout, HTMLElement {}
-export const AtomicSearchLayout: {
-    prototype: AtomicSearchLayout;
-    new (): AtomicSearchLayout;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

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

@@ -1,65 +0,0 @@
-import { proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
-import { I as InitializeBindings } from './initialization-utils.js';
-import { D as DEFAULT_MOBILE_BREAKPOINT } from './replace-breakpoint.js';
-import { r as randomID } from './utils.js';
-import { b as buildSearchLayout } from './search-layout.js';
-
-const atomicSearchLayoutCss = ".atomic-modal-opened{overflow-y:hidden}atomic-layout-section[section='search']{grid-area:atomic-section-search}atomic-layout-section[section='facets']{grid-area:atomic-section-facets}atomic-layout-section[section='main']{grid-area:atomic-section-main}atomic-layout-section[section='status']{grid-area:atomic-section-status}atomic-layout-section[section='pagination']{grid-area:atomic-section-pagination}atomic-search-layout{width:100%;height:100%;display:none;grid-template-areas:'. atomic-section-search .'\n    '. atomic-section-main .';grid-template-columns:var(--atomic-layout-spacing-x) minmax(0, 1fr) var(--atomic-layout-spacing-x)}atomic-search-layout atomic-layout-section[section='search']{margin:var(--atomic-layout-spacing-y) 0;max-width:var(--atomic-layout-max-search-box-input-width, 678px);width:100%;justify-self:center}atomic-search-layout atomic-layout-section[section='search'] atomic-search-box::part(suggestions-double-list){width:125%;max-width:var(--atomic-layout-max-search-box-double-suggestions-width, 800px)}atomic-search-layout atomic-layout-section[section='search'] atomic-search-box::part(suggestions-left){flex-basis:var(--atomic-layout-search-box-left-suggestions-width, 30%)}atomic-search-layout atomic-layout-section[section='search'] atomic-search-box::part(suggestions-right){flex-basis:calc(100% - var(--atomic-layout-search-box-left-suggestions-width, 30%))}atomic-search-layout atomic-layout-section[section='facets']{display:none}atomic-search-layout atomic-layout-section[section='facets'] *{margin-bottom:var(--atomic-layout-spacing-y)}atomic-search-layout atomic-layout-section[section='main']{margin-bottom:var(--atomic-layout-spacing-y)}atomic-search-layout atomic-layout-section[section='horizontal-facets']{display:flex;flex-wrap:wrap;margin-bottom:var(--atomic-layout-spacing-y);row-gap:0.5rem}atomic-search-layout atomic-layout-section[section='horizontal-facets']>*{max-width:100%}atomic-search-layout atomic-layout-section[section='horizontal-facets']>atomic-segmented-facet,atomic-search-layout atomic-layout-section[section='horizontal-facets']>atomic-popover{margin-right:0.5rem}atomic-search-layout atomic-layout-section[section='horizontal-facets']>atomic-popover{display:none}atomic-search-layout atomic-layout-section[section='status']{display:grid;justify-content:space-between;grid-template-areas:'atomic-breadbox       atomic-breadbox'\n      'atomic-query-summary  atomic-sort'\n      'atomic-did-you-mean   atomic-did-you-mean'\n      'atomic-notifications  atomic-notifications'}atomic-search-layout atomic-layout-section[section='status']>*{margin-bottom:var(--atomic-layout-spacing-y)}atomic-search-layout atomic-layout-section[section='status'] atomic-breadbox{grid-area:atomic-breadbox}atomic-search-layout atomic-layout-section[section='status'] atomic-query-summary{grid-area:atomic-query-summary;align-self:center;overflow:hidden}atomic-search-layout atomic-layout-section[section='status'] atomic-sort-dropdown{grid-area:atomic-sort;justify-self:end}atomic-search-layout atomic-layout-section[section='status'] atomic-refine-toggle{grid-area:atomic-sort}atomic-search-layout atomic-layout-section[section='status'] atomic-did-you-mean{grid-area:atomic-did-you-mean}atomic-search-layout atomic-layout-section[section='status'] atomic-notifications{grid-area:atomic-notifications}atomic-search-layout atomic-layout-section[section='results'] atomic-smart-snippet{margin-bottom:1.5rem}atomic-search-layout atomic-layout-section[section='results'] atomic-smart-snippet-suggestions{margin-bottom:1.5rem}atomic-search-layout atomic-layout-section[section='pagination']{display:flex;flex-direction:column;justify-content:space-between;align-items:center}atomic-search-layout atomic-layout-section[section='pagination'] atomic-load-more-results{width:100%}atomic-search-layout atomic-layout-section[section='pagination']:has(:only-child){justify-content:center}atomic-search-layout atomic-layout-section[section='pagination']>*{margin-top:var(--atomic-layout-spacing-y)}@media only screen and (min-width: 50rem){atomic-search-layout atomic-layout-section[section='pagination']{flex-direction:row}}";
-const AtomicSearchLayoutStyle0 = atomicSearchLayoutCss;
-
-var __decorate = (undefined && undefined.__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;
-};
-const AtomicSearchLayout$1 = /*@__PURE__*/ proxyCustomElement(class AtomicSearchLayout extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        /**
-         * CSS value that defines where the layout goes from mobile to desktop.
-         * e.g., 800px, 65rem.
-         */
-        this.mobileBreakpoint = DEFAULT_MOBILE_BREAKPOINT;
-        this.mobileBreakpoint = DEFAULT_MOBILE_BREAKPOINT;
-    }
-    componentDidLoad() {
-        const id = this.host.id || randomID('atomic-search-layout-');
-        this.host.id = id;
-        const styleTag = this.bindings.createStyleElement();
-        styleTag.innerHTML = buildSearchLayout(this.host, this.mobileBreakpoint);
-        this.host.appendChild(styleTag);
-    }
-    get host() { return this; }
-    static get style() { return AtomicSearchLayoutStyle0; }
-}, [0, "atomic-search-layout", {
-        "mobileBreakpoint": [513, "mobile-breakpoint"]
-    }]);
-__decorate([
-    InitializeBindings()
-], AtomicSearchLayout$1.prototype, "bindings", void 0);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["atomic-search-layout"];
-    components.forEach(tagName => { switch (tagName) {
-        case "atomic-search-layout":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, AtomicSearchLayout$1);
-            }
-            break;
-    } });
-}
-
-const AtomicSearchLayout = AtomicSearchLayout$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { AtomicSearchLayout, defineCustomElement };
-
-//# sourceMappingURL=atomic-search-layout.js.map

package/dist/atomic/components/atomic-search-layout.js.map

@@ -1 +0,0 @@
-{"file":"atomic-search-layout.js","mappings":";;;;;;AAAA,MAAM,qBAAqB,GAAG,mkIAAmkI,CAAC;AAClmI,iCAAe,qBAAqB;;;;;;;;;;;;MCiBvBA,oBAAkB;;;;;;;;QAQC,qBAAgB,GAAG,yBAAyB,CAAC;gCAA1B,yBAAyB;;IAGnE,gBAAgB;QACrB,MAAM,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,QAAQ,CAAC,uBAAuB,CAAC,CAAC;QAC7D,IAAI,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;QAClB,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,kBAAkB,EAAE,CAAC;QACpD,QAAQ,CAAC,SAAS,GAAG,iBAAiB,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;QACzE,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;KACjC;;;;;;AAR4B;IAA5B,kBAAkB,EAAE;sDAA4B;;;;;;;;;;;;;;;;;;;;","names":["AtomicSearchLayout"],"sources":["src/components/search/atomic-layout/atomic-search-layout.pcss?tag=atomic-search-layout","src/components/search/atomic-layout/atomic-search-layout.tsx"],"sourcesContent":[".atomic-modal-opened {\n  overflow-y: hidden;\n}\n\natomic-layout-section[section='search'] {\n  grid-area: atomic-section-search;\n}\n\natomic-layout-section[section='facets'] {\n  grid-area: atomic-section-facets;\n}\n\natomic-layout-section[section='main'] {\n  grid-area: atomic-section-main;\n}\n\natomic-layout-section[section='status'] {\n  grid-area: atomic-section-status;\n}\n\natomic-layout-section[section='pagination'] {\n  grid-area: atomic-section-pagination;\n}\n\n/**\n * @prop --atomic-layout-max-search-box-input-width: The maximum width that the search box input will take.\n * @prop --atomic-layout-max-search-box-double-suggestions-width: The maximum width that the search box suggestions will take when displaying a double list.\n * @prop --atomic-layout-search-box-left-suggestions-width: When displaying a double list, the width of the left list.\n */\natomic-search-layout {\n  width: 100%;\n  height: 100%;\n  display: none;\n  grid-template-areas:\n    '. atomic-section-search .'\n    '. atomic-section-main .';\n  grid-template-columns: var(--atomic-layout-spacing-x) minmax(0, 1fr) var(--atomic-layout-spacing-x);\n\n  atomic-layout-section[section='search'] {\n    margin: var(--atomic-layout-spacing-y) 0;\n    max-width: var(--atomic-layout-max-search-box-input-width, 678px);\n    width: 100%;\n    justify-self: center;\n\n    /* Only affects desktop */\n    atomic-search-box {\n      &::part(suggestions-double-list) {\n        width: 125%;\n        max-width: var(--atomic-layout-max-search-box-double-suggestions-width, 800px);\n      }\n\n      &::part(suggestions-left) {\n        flex-basis: var(--atomic-layout-search-box-left-suggestions-width, 30%);\n      }\n\n      &::part(suggestions-right) {\n        flex-basis: calc(100% - var(--atomic-layout-search-box-left-suggestions-width, 30%));\n      }\n    }\n  }\n\n  atomic-layout-section[section='facets'] {\n    display: none;\n\n    & * {\n      margin-bottom: var(--atomic-layout-spacing-y);\n    }\n  }\n\n  atomic-layout-section[section='main'] {\n    margin-bottom: var(--atomic-layout-spacing-y);\n  }\n\n  atomic-layout-section[section='horizontal-facets'] {\n    display: flex;\n    flex-wrap: wrap;\n    margin-bottom: var(--atomic-layout-spacing-y);\n    row-gap: 0.5rem;\n\n    & > * {\n      max-width: 100%;\n    }\n\n    & > atomic-segmented-facet,\n    & > atomic-popover {\n      margin-right: 0.5rem;\n    }\n\n    & > atomic-popover {\n      display: none;\n    }\n  }\n\n  atomic-layout-section[section='status'] {\n    display: grid;\n    justify-content: space-between;\n    grid-template-areas:\n      'atomic-breadbox       atomic-breadbox'\n      'atomic-query-summary  atomic-sort'\n      'atomic-did-you-mean   atomic-did-you-mean'\n      'atomic-notifications  atomic-notifications';\n\n    & > * {\n      margin-bottom: var(--atomic-layout-spacing-y);\n    }\n\n    atomic-breadbox {\n      grid-area: atomic-breadbox;\n    }\n\n    atomic-query-summary {\n      grid-area: atomic-query-summary;\n      align-self: center;\n      overflow: hidden;\n    }\n\n    atomic-sort-dropdown {\n      grid-area: atomic-sort;\n      justify-self: end;\n    }\n\n    atomic-refine-toggle {\n      grid-area: atomic-sort;\n    }\n\n    atomic-did-you-mean {\n      grid-area: atomic-did-you-mean;\n    }\n\n    atomic-notifications {\n      grid-area: atomic-notifications;\n    }\n  }\n\n  atomic-layout-section[section='results'] {\n    atomic-smart-snippet {\n      margin-bottom: 1.5rem;\n    }\n\n    atomic-smart-snippet-suggestions {\n      margin-bottom: 1.5rem;\n    }\n  }\n\n  atomic-layout-section[section='pagination'] {\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    align-items: center;\n\n    atomic-load-more-results {\n      width: 100%;\n    }\n\n    &:has(:only-child) {\n      justify-content: center;\n    }\n\n    & > * {\n      margin-top: var(--atomic-layout-spacing-y);\n    }\n\n    /* Approx. width of pager & results per page */\n    @media only screen and (min-width: 50rem) {\n      flex-direction: row;\n    }\n  }\n}\n","import {Component, Element, Prop} from '@stencil/core';\nimport {\n  InitializableComponent,\n  InitializeBindings,\n} from '../../../utils/initialization-utils';\nimport {DEFAULT_MOBILE_BREAKPOINT} from '../../../utils/replace-breakpoint';\nimport {randomID} from '../../../utils/utils';\nimport {Bindings} from '../atomic-search-interface/atomic-search-interface';\nimport {buildSearchLayout} from './search-layout';\n\n/**\n * The `atomic-search-layout` helps organize elements in the page.\n */\n@Component({\n  tag: 'atomic-search-layout',\n  styleUrl: 'atomic-search-layout.pcss',\n  shadow: false,\n})\nexport class AtomicSearchLayout implements InitializableComponent<Bindings> {\n  public error!: Error;\n\n  @Element() private host!: HTMLElement;\n  /**\n   * CSS value that defines where the layout goes from mobile to desktop.\n   * e.g., 800px, 65rem.\n   */\n  @Prop({reflect: true}) public mobileBreakpoint = DEFAULT_MOBILE_BREAKPOINT;\n  @InitializeBindings() public bindings!: Bindings;\n\n  public componentDidLoad() {\n    const id = this.host.id || randomID('atomic-search-layout-');\n    this.host.id = id;\n    const styleTag = this.bindings.createStyleElement();\n    styleTag.innerHTML = buildSearchLayout(this.host, this.mobileBreakpoint);\n    this.host.appendChild(styleTag);\n  }\n}\n"],"version":3}

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

@@ -1,100 +0,0 @@
-import { s as sectionSelector, f as findSection } from './sections.js';
-
-function makeDesktopQuery$1(mobileBreakpoint) {
-    return `only screen and (min-width: ${mobileBreakpoint})`;
-}
-function buildCommonLayout(element, mobileBreakpoint, layoutWebComponentTagName, containerWebComponentTagName, noItemsSelector, errorSelector, refineToggleSelector, sortDropdownSelector) {
-    const id = element.id;
-    const layoutSelector = `${layoutWebComponentTagName}#${id}`;
-    const cleanStatusSelector = `${containerWebComponentTagName}:not(.${noItemsSelector}, .${errorSelector})`;
-    const mediaQuerySelector = `@media ${makeDesktopQuery$1(mobileBreakpoint)}`;
-    const display = `${layoutSelector} { display: grid }`;
-    const search = `${mediaQuerySelector} {
-    ${layoutSelector} ${sectionSelector('search')} {
-      justify-self: start;
-      width: 80%;
-    }
-  }`;
-    const facets = () => {
-        const facetsSection = findSection(element, 'facets');
-        const mainSection = findSection(element, 'main');
-        if (!facetsSection || !mainSection) {
-            return '';
-        }
-        const facetsMin = facetsSection.minWidth || '17rem';
-        const facetsMax = facetsSection.maxWidth || '22rem';
-        const mainMin = mainSection.minWidth || '50%';
-        const mainMax = mainSection.maxWidth || '70rem';
-        return `${mediaQuerySelector} {
-      ${layoutSelector} {
-        grid-template-areas:
-        '. .                     atomic-section-search .'
-        '. atomic-section-main   atomic-section-main   .';
-        grid-template-columns:
-          1fr minmax(${facetsMin}, ${facetsMax}) minmax(${mainMin}, ${mainMax}) 1fr;
-        column-gap: var(--atomic-layout-spacing-x);
-      }
-
-      ${cleanStatusSelector} ${layoutSelector} {
-        grid-template-areas:
-          '. .                     atomic-section-search .'
-          '. atomic-section-facets atomic-section-main   .'
-          '. atomic-section-facets .                     .';
-      }
-
-      ${cleanStatusSelector} ${layoutSelector} ${sectionSelector('facets')} {
-        display: block;
-      }
-    }`;
-    };
-    const refine = () => {
-        const statusSection = findSection(element, 'status');
-        if (!statusSection) {
-            return '';
-        }
-        const refineToggle = statusSection.querySelector(refineToggleSelector);
-        if (!refineToggle) {
-            return '';
-        }
-        const statusSelector = `${layoutSelector} ${sectionSelector('status')}`;
-        return `${statusSelector} ${sortDropdownSelector} {
-      display: none;
-    }
-
-    ${mediaQuerySelector} {
-     ${statusSelector} ${sortDropdownSelector} {
-       display: block;
-      }
-
-      ${statusSelector} ${refineToggleSelector} {
-        display: none;
-       }
-    }`;
-    };
-    const horizontalFacets = () => {
-        return `${mediaQuerySelector} {
-      ${layoutSelector} ${sectionSelector('horizontal-facets')} > atomic-popover:not(.atomic-hidden) {
-        display: block;
-      }
-    }`;
-    };
-    return [display, search, facets(), refine(), horizontalFacets()]
-        .filter((declaration) => declaration !== '')
-        .join('\n\n');
-}
-
-const layoutWebComponentTagName = 'atomic-search-layout';
-const containerWebComponentTagName = 'atomic-search-interface';
-const noResultsSelector = `${containerWebComponentTagName}-no-results`;
-const errorSelector = `${containerWebComponentTagName}-error`;
-const firstSearchExecutedSelector = `${containerWebComponentTagName}-search-executed`;
-function makeDesktopQuery(mobileBreakpoint) {
-    return `only screen and (min-width: ${mobileBreakpoint})`;
-}
-function buildSearchLayout(element, mobileBreakpoint) {
-    return buildCommonLayout(element, mobileBreakpoint, layoutWebComponentTagName, containerWebComponentTagName, noResultsSelector, errorSelector, 'atomic-refine-toggle', 'atomic-sort-dropdown');
-}
-
-export { buildSearchLayout as b, errorSelector as e, firstSearchExecutedSelector as f, makeDesktopQuery as m, noResultsSelector as n };
-
-//# sourceMappingURL=search-layout.js.map

package/dist/atomic/components/search-layout.js.map

@@ -1 +0,0 @@
-{"file":"search-layout.js","mappings":"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","names":["makeDesktopQuery"],"sources":["src/components/common/atomic-layout-section/layout.ts","src/components/search/atomic-layout/search-layout.ts"],"sourcesContent":["import {findSection, sectionSelector} from './sections';\n\nexport function makeDesktopQuery(mobileBreakpoint: string) {\n  return `only screen and (min-width: ${mobileBreakpoint})`;\n}\nexport function buildCommonLayout(\n  element: HTMLElement,\n  mobileBreakpoint: string,\n  layoutWebComponentTagName: string,\n  containerWebComponentTagName: string,\n  noItemsSelector: string,\n  errorSelector: string,\n  refineToggleSelector: string,\n  sortDropdownSelector: string\n) {\n  const id = element.id;\n  const layoutSelector = `${layoutWebComponentTagName}#${id}`;\n  const cleanStatusSelector = `${containerWebComponentTagName}:not(.${noItemsSelector}, .${errorSelector})`;\n  const mediaQuerySelector = `@media ${makeDesktopQuery(mobileBreakpoint)}`;\n\n  const display = `${layoutSelector} { display: grid }`;\n  const search = `${mediaQuerySelector} {\n    ${layoutSelector} ${sectionSelector('search')} {\n      justify-self: start;\n      width: 80%;\n    }\n  }`;\n\n  const facets = () => {\n    const facetsSection = findSection(element, 'facets');\n    const mainSection = findSection(element, 'main');\n    if (!facetsSection || !mainSection) {\n      return '';\n    }\n\n    const facetsMin = facetsSection.minWidth || '17rem';\n    const facetsMax = facetsSection.maxWidth || '22rem';\n    const mainMin = mainSection.minWidth || '50%';\n    const mainMax = mainSection.maxWidth || '70rem';\n\n    return `${mediaQuerySelector} {\n      ${layoutSelector} {\n        grid-template-areas:\n        '. .                     atomic-section-search .'\n        '. atomic-section-main   atomic-section-main   .';\n        grid-template-columns:\n          1fr minmax(${facetsMin}, ${facetsMax}) minmax(${mainMin}, ${mainMax}) 1fr;\n        column-gap: var(--atomic-layout-spacing-x);\n      }\n\n      ${cleanStatusSelector} ${layoutSelector} {\n        grid-template-areas:\n          '. .                     atomic-section-search .'\n          '. atomic-section-facets atomic-section-main   .'\n          '. atomic-section-facets .                     .';\n      }\n\n      ${cleanStatusSelector} ${layoutSelector} ${sectionSelector('facets')} {\n        display: block;\n      }\n    }`;\n  };\n\n  const refine = (): string => {\n    const statusSection = findSection(element, 'status');\n    if (!statusSection) {\n      return '';\n    }\n\n    const refineToggle = statusSection.querySelector(refineToggleSelector);\n    if (!refineToggle) {\n      return '';\n    }\n\n    const statusSelector = `${layoutSelector} ${sectionSelector('status')}`;\n    return `${statusSelector} ${sortDropdownSelector} {\n      display: none;\n    }\n\n    ${mediaQuerySelector} {\n     ${statusSelector} ${sortDropdownSelector} {\n       display: block;\n      }\n\n      ${statusSelector} ${refineToggleSelector} {\n        display: none;\n       }\n    }`;\n  };\n\n  const horizontalFacets = () => {\n    return `${mediaQuerySelector} {\n      ${layoutSelector} ${sectionSelector(\n        'horizontal-facets'\n      )} > atomic-popover:not(.atomic-hidden) {\n        display: block;\n      }\n    }`;\n  };\n\n  return [display, search, facets(), refine(), horizontalFacets()]\n    .filter((declaration) => declaration !== '')\n    .join('\\n\\n');\n}\n","import {buildCommonLayout} from '../../common/atomic-layout-section/layout';\n\nexport const layoutWebComponentTagName = 'atomic-search-layout';\nexport const containerWebComponentTagName = 'atomic-search-interface';\nexport const noResultsSelector = `${containerWebComponentTagName}-no-results`;\nexport const errorSelector = `${containerWebComponentTagName}-error`;\nexport const firstSearchExecutedSelector = `${containerWebComponentTagName}-search-executed`;\n\nexport function makeDesktopQuery(mobileBreakpoint: string) {\n  return `only screen and (min-width: ${mobileBreakpoint})`;\n}\nexport function buildSearchLayout(\n  element: HTMLElement,\n  mobileBreakpoint: string\n) {\n  return buildCommonLayout(\n    element,\n    mobileBreakpoint,\n    layoutWebComponentTagName,\n    containerWebComponentTagName,\n    noResultsSelector,\n    errorSelector,\n    'atomic-refine-toggle',\n    'atomic-sort-dropdown'\n  );\n}\n"],"version":3}