@coveo/atomic 3.33.2-pre.e4fb163395 → 3.33.2-pre.e94e8db0bb

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

@@ -0,0 +1,26 @@
+import { LitElement } from 'lit';
+declare const AtomicSearchLayout_base: typeof LitElement;
+/**
+ * The `atomic-search-layout` helps organize elements in the page.
+ *
+ * @cssprop --atomic-layout-max-search-box-input-width: The maximum width that the search box input will take.
+ * @cssprop --atomic-layout-max-search-box-double-suggestions-width: The maximum width that the search box suggestions will take when displaying a double list.
+ * @cssprop --atomic-layout-search-box-left-suggestions-width: The width of the left list when displaying a double list.
+ */
+export declare class AtomicSearchLayout extends AtomicSearchLayout_base {
+    static styles: import("lit").CSSResult[];
+    static dynamicStyles(instance: AtomicSearchLayout): Promise<import("lit").CSSResult>;
+    error: Error;
+    /**
+     * The viewport width at which the layout goes from desktop to mobile.
+     * E.g., 800px, 65rem.
+     */
+    mobileBreakpoint: string;
+    connectedCallback(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'atomic-search-layout': AtomicSearchLayout;
+    }
+}
+export {};

package/dist/types/components/search/atomic-search-layout/atomic-search-layout.tw.css.d.ts

@@ -0,0 +1,2 @@
+declare const styles: import("lit").CSSResult;
+export default styles;

package/dist/types/components/search/index.d.ts

@@ -1 +1,2 @@
 export { AtomicResultsPerPage } from './atomic-results-per-page/atomic-results-per-page.js';
+export { AtomicSearchLayout } from './atomic-search-layout/atomic-search-layout.js';

package/dist/types/components.d.ts

@@ -2536,15 +2536,6 @@ export namespace Components {
          */
         "timezone"?: string;
     }
-    /**
-     * The `atomic-search-layout` helps organize elements in the page.
-     */
-    interface AtomicSearchLayout {
-        /**
-          * CSS value that defines where the layout goes from mobile to desktop. e.g., 800px, 65rem.
-         */
-        "mobileBreakpoint": string;
-    }
     /**
      * The `atomic-segmented-facet` displays a horizontal facet of the results for the current query.
      */
@@ -4258,15 +4249,6 @@ declare global {
         prototype: HTMLAtomicSearchInterfaceElement;
         new (): HTMLAtomicSearchInterfaceElement;
     };
-    /**
-     * The `atomic-search-layout` helps organize elements in the page.
-     */
-    interface HTMLAtomicSearchLayoutElement extends Components.AtomicSearchLayout, HTMLStencilElement {
-    }
-    var HTMLAtomicSearchLayoutElement: {
-        prototype: HTMLAtomicSearchLayoutElement;
-        new (): HTMLAtomicSearchLayoutElement;
-    };
     /**
      * The `atomic-segmented-facet` displays a horizontal facet of the results for the current query.
      */
@@ -4666,7 +4648,6 @@ declare global {
         "atomic-search-box-query-suggestions": HTMLAtomicSearchBoxQuerySuggestionsElement;
         "atomic-search-box-recent-queries": HTMLAtomicSearchBoxRecentQueriesElement;
         "atomic-search-interface": HTMLAtomicSearchInterfaceElement;
-        "atomic-search-layout": HTMLAtomicSearchLayoutElement;
         "atomic-segmented-facet": HTMLAtomicSegmentedFacetElement;
         "atomic-segmented-facet-scrollable": HTMLAtomicSegmentedFacetScrollableElement;
         "atomic-smart-snippet": HTMLAtomicSmartSnippetElement;
@@ -7041,15 +7022,6 @@ declare namespace LocalJSX {
          */
         "timezone"?: string;
     }
-    /**
-     * The `atomic-search-layout` helps organize elements in the page.
-     */
-    interface AtomicSearchLayout {
-        /**
-          * CSS value that defines where the layout goes from mobile to desktop. e.g., 800px, 65rem.
-         */
-        "mobileBreakpoint"?: string;
-    }
     /**
      * The `atomic-segmented-facet` displays a horizontal facet of the results for the current query.
      */
@@ -7560,7 +7532,6 @@ declare namespace LocalJSX {
         "atomic-search-box-query-suggestions": AtomicSearchBoxQuerySuggestions;
         "atomic-search-box-recent-queries": AtomicSearchBoxRecentQueries;
         "atomic-search-interface": AtomicSearchInterface;
-        "atomic-search-layout": AtomicSearchLayout;
         "atomic-segmented-facet": AtomicSegmentedFacet;
         "atomic-segmented-facet-scrollable": AtomicSegmentedFacetScrollable;
         "atomic-smart-snippet": AtomicSmartSnippet;
@@ -8078,10 +8049,6 @@ declare module "@stencil/core" {
              * The `atomic-search-interface` component is the parent to all other atomic components in a search page. It handles the headless search engine and localization configurations.
              */
             "atomic-search-interface": LocalJSX.AtomicSearchInterface & JSXBase.HTMLAttributes<HTMLAtomicSearchInterfaceElement>;
-            /**
-             * The `atomic-search-layout` helps organize elements in the page.
-             */
-            "atomic-search-layout": LocalJSX.AtomicSearchLayout & JSXBase.HTMLAttributes<HTMLAtomicSearchLayoutElement>;
             /**
              * The `atomic-segmented-facet` displays a horizontal facet of the results for the current query.
              */

package/docs/atomic-docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-08-27T14:29:59",
+  "timestamp": "2025-08-27T14:24:27",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.20.0",
@@ -12645,63 +12645,6 @@
         ]
       }
     },
-    {
-      "filePath": "src/components/search/atomic-layout/atomic-search-layout.tsx",
-      "encapsulation": "none",
-      "tag": "atomic-search-layout",
-      "docs": "The `atomic-search-layout` helps organize elements in the page.",
-      "docsTags": [],
-      "usage": {},
-      "props": [
-        {
-          "name": "mobileBreakpoint",
-          "type": "string",
-          "complexType": {
-            "original": "string",
-            "resolved": "string",
-            "references": {}
-          },
-          "mutable": false,
-          "attr": "mobile-breakpoint",
-          "reflectToAttr": true,
-          "docs": "CSS value that defines where the layout goes from mobile to desktop.\ne.g., 800px, 65rem.",
-          "docsTags": [],
-          "default": "DEFAULT_MOBILE_BREAKPOINT",
-          "values": [
-            {
-              "type": "string"
-            }
-          ],
-          "optional": false,
-          "required": false
-        }
-      ],
-      "methods": [],
-      "events": [],
-      "listeners": [],
-      "styles": [
-        {
-          "name": "--atomic-layout-max-search-box-double-suggestions-width",
-          "annotation": "prop",
-          "docs": "The maximum width that the search box suggestions will take when displaying a double list."
-        },
-        {
-          "name": "--atomic-layout-max-search-box-input-width",
-          "annotation": "prop",
-          "docs": "The maximum width that the search box input will take."
-        },
-        {
-          "name": "--atomic-layout-search-box-left-suggestions-width",
-          "annotation": "prop",
-          "docs": "When displaying a double list, the width of the left list."
-        }
-      ],
-      "slots": [],
-      "parts": [],
-      "dependents": [],
-      "dependencies": [],
-      "dependencyGraph": {}
-    },
     {
       "filePath": "src/components/search/facets/atomic-segmented-facet/atomic-segmented-facet.tsx",
       "encapsulation": "shadow",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coveo/atomic",
   "type": "module",
-  "version": "3.33.2-pre.e4fb163395",
+  "version": "3.33.2-pre.e94e8db0bb",
   "description": "A web-component library for building modern UIs interfacing with the Coveo platform",
   "homepage": "https://docs.coveo.com/en/atomic/latest/",
   "repository": {

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}

package/dist/atomic/p-02916ea5.entry.js

@@ -1,2 +0,0 @@
-import{r as t,g as a}from"./p-dc3df5ce.js";import{I as o}from"./p-ff2d324d.js";import{D as i}from"./p-7dd93292.js";import{r as c}from"./p-0f506869.js";import{b as s}from"./p-85ef2ce8.js";import"./p-c9074946.js";import"./p-1580513b.js";import"./p-05de7ca3.js";import"./p-cae02339.js";import"./p-f284897c.js";import"./p-0462f723.js";import"./p-9c7dbbdf.js";const e=".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 n=e;var m=undefined&&undefined.__decorate||function(t,a,o,i){var c=arguments.length,s=c<3?a:i===null?i=Object.getOwnPropertyDescriptor(a,o):i,e;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")s=Reflect.decorate(t,a,o,i);else for(var n=t.length-1;n>=0;n--)if(e=t[n])s=(c<3?e(s):c>3?e(a,o,s):e(a,o))||s;return c>3&&s&&Object.defineProperty(a,o,s),s};const r=class{constructor(a){t(this,a);this.mobileBreakpoint=i;this.mobileBreakpoint=i}componentDidLoad(){const t=this.host.id||c("atomic-search-layout-");this.host.id=t;const a=this.bindings.createStyleElement();a.innerHTML=s(this.host,this.mobileBreakpoint);this.host.appendChild(a)}get host(){return a(this)}};m([o()],r.prototype,"bindings",void 0);r.style=n;export{r as atomic_search_layout};
-//# sourceMappingURL=p-02916ea5.entry.js.map

package/dist/atomic/p-02916ea5.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["atomicSearchLayoutCss","AtomicSearchLayoutStyle0","AtomicSearchLayout","this","mobileBreakpoint","DEFAULT_MOBILE_BREAKPOINT","componentDidLoad","id","host","randomID","styleTag","bindings","createStyleElement","innerHTML","buildSearchLayout","appendChild","__decorate","InitializeBindings"],"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"],"mappings":"mWAAA,MAAMA,EAAwB,okIAC9B,MAAAC,EAAeD,E,iXCiBFE,EAAkB,M,yBAQCC,KAAAC,iBAAmBC,E,sBAAAA,C,CAG1C,gBAAAC,GACL,MAAMC,EAAKJ,KAAKK,KAAKD,IAAME,EAAS,yBACpCN,KAAKK,KAAKD,GAAKA,EACf,MAAMG,EAAWP,KAAKQ,SAASC,qBAC/BF,EAASG,UAAYC,EAAkBX,KAAKK,KAAML,KAAKC,kBACvDD,KAAKK,KAAKO,YAAYL,E,6BAPKM,EAAA,CAA5BC,K","ignoreList":[]}