npm - @coveo/atomic - Versions diffs - 3.34.0-pre.d6630bb1de → 3.34.0-pre.da12ea4536 - Mend

@coveo/atomic 3.34.0-pre.d6630bb1de → 3.34.0-pre.da12ea4536

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (988) hide show

package/dist/cjs/atomic-result.cjs.entry.js CHANGED Viewed

@@ -5,14 +5,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-757bc886.js');
 const domUtils = require('./dom-utils-d4790328.js');
 const stencilItemListCommon = require('./stencil-item-list-common-17bd1046.js');
-const displayOptions = require('./display-options-14f05862.js');
+const displayOptions = require('./display-options-69531e8d.js');
 require('./replace-breakpoint-utils-7a084f54.js');
 require('./stencil-accessibility-utils-aa4c9f6c.js');
 require('./event-utils-9bfcf3c5.js');
 require('./utils-7153ae6b.js');
 require('./purify-85b542e2.js');
 require('./_commonjsHelpers-b3309d7b.js');
-require('./sections-fbb93b53.js');
+require('./item-layout-sections-b09ba4b3.js');
 const atomicResultCss = "/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */\n@layer properties;\natomic-result-section-badges {\n  text-align: left;\n}\natomic-result-section-actions {\n  text-align: right;\n}\natomic-result-section-title-metadata {\n  --font-size: var(--atomic-text-sm);\n  font-size: var(--font-size);\n  --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n  line-height: var(--line-height);\n}\natomic-result-section-emphasized {\n  font-weight: 500;\n  --font-size: var(--atomic-text-2xl);\n  font-size: var(--font-size);\n  --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n  line-height: var(--line-height);\n  margin-top: 0.5rem;\n}\n@layer components {\n  :host :host {\n    font-family: var(--atomic-font-family);\n    --tw-font-weight: var(--atomic-font-normal);\n    font-weight: var(--atomic-font-normal);\n  }\n  :host atomic-result-section-badges {\n    text-align: left;\n  }\n  :host atomic-result-section-actions {\n    text-align: left;\n  }\n  :host atomic-result-section-title-metadata {\n    --font-size: var(--atomic-text-sm);\n    font-size: var(--font-size);\n    --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n    line-height: var(--line-height);\n  }\n  :host atomic-result-section-emphasized {\n    font-weight: 500;\n    --font-size: var(--atomic-text-2xl);\n    font-size: var(--font-size);\n    --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n    line-height: var(--line-height);\n    margin-top: 0.5rem;\n  }\n  :host .result-root.with-sections {\n    display: grid;\n    justify-items: stretch;\n  }\n  :host .result-root.with-sections atomic-result-section-visual {\n    grid-area: visual;\n  }\n  :host .result-root.with-sections atomic-result-section-badges {\n    grid-area: badges;\n  }\n  :host .result-root.with-sections atomic-result-section-actions {\n    grid-area: actions;\n  }\n  :host .result-root.with-sections atomic-result-section-actions atomic-result-quickview {\n    display: inline-block;\n  }\n  :host .result-root.with-sections atomic-result-section-title {\n    grid-area: title;\n    color: var(--atomic-on-background);\n  }\n  :host .result-root.with-sections atomic-result-section-title-metadata {\n    grid-area: title-metadata;\n  }\n  :host .result-root.with-sections atomic-result-section-emphasized {\n    grid-area: emphasized;\n  }\n  :host .result-root.with-sections atomic-result-section-excerpt {\n    grid-area: excerpt;\n    color: var(--atomic-neutral-dark);\n  }\n  :host .result-root.with-sections atomic-result-section-bottom-metadata {\n    grid-area: bottom-metadata;\n    color: var(--atomic-neutral-dark);\n  }\n  :host .result-root.with-sections atomic-result-section-children {\n    grid-area: children;\n  }\n  :host .result-root.with-sections atomic-result-section-badges, :host .result-root.with-sections atomic-result-section-actions {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.5rem;\n    max-height: calc(2 * var(--row-height, 2rem) + 0.5rem);\n  }\n  :host .result-root.with-sections atomic-result-section-visual, :host .result-root.with-sections atomic-result-section-badges, :host .result-root.with-sections atomic-result-section-actions, :host .result-root.with-sections atomic-result-section-title, :host .result-root.with-sections atomic-result-section-title-metadata, :host .result-root.with-sections atomic-result-section-emphasized, :host .result-root.with-sections atomic-result-section-excerpt, :host .result-root.with-sections atomic-result-section-bottom-metadata {\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n  :host .result-root.with-sections.image-icon atomic-result-section-visual {\n    border-radius: var(--atomic-border-radius);\n  }\n  @media (width >= 1024px) {\n    :host .result-root.with-sections.display-list.image-large.density-compact atomic-result-section-visual {\n      width: 10.25rem;\n      height: 10.25rem;\n    }\n    :host .result-root.with-sections.display-list atomic-result-section-children atomic-result-children::part(children-root), :host .result-root.with-sections.display-list atomic-result-section-children atomic-insight-result-children::part(children-root) {\n      border-style: var(--tw-border-style);\n      border-width: 1px;\n      border-color: var(--atomic-neutral);\n      border-radius: 16px;\n    }\n    :host .result-root.with-sections.display-list.density-comfortable atomic-result-section-visual {\n      margin-right: 1.5rem;\n    }\n    :host .result-root.with-sections.display-list.density-comfortable atomic-result-section-badges, :host .result-root.with-sections.display-list.density-comfortable atomic-result-section-actions {\n      margin-bottom: 1.5rem;\n      --row-height: 2rem;\n    }\n    :host .result-root.with-sections.display-list.density-comfortable atomic-result-section-title {\n      --font-size: var(--atomic-text-2xl);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n    }\n    :host .result-root.with-sections.display-list.density-comfortable atomic-result-section-excerpt {\n      margin-top: 1.75rem;\n      --font-size: var(--atomic-text-lg);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      max-height: 4.5rem;\n      overflow: hidden;\n      display: -webkit-box;\n      -webkit-box-orient: vertical;\n      -webkit-line-clamp: 3;\n    }\n    :host .result-root.with-sections.display-list.density-comfortable atomic-result-section-bottom-metadata {\n      margin-top: 1.25rem;\n      --font-size: var(--atomic-text-sm);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      max-height: 4rem;\n    }\n    :host .result-root.with-sections.display-list.density-comfortable atomic-result-section-title-metadata {\n      margin-top: 0.475rem;\n    }\n    :host .result-root.with-sections.display-list.density-comfortable atomic-result-children::part(children-root), :host .result-root.with-sections.display-list.density-comfortable atomic-insight-result-children::part(children-root) {\n      border-style: var(--tw-border-style);\n      border-width: 1px;\n      border-color: var(--atomic-neutral);\n      border-radius: 16px;\n      margin-top: 1.25rem;\n      padding: 1.75rem;\n    }\n    :host .result-root.with-sections.display-list.density-comfortable atomic-result-children::part(show-hide-button), :host .result-root.with-sections.display-list.density-comfortable atomic-insight-result-children::part(show-hide-button) {\n      margin-top: 1.25rem;\n      margin-bottom: 1.25rem;\n    }\n    :host .result-root.with-sections.display-list.density-comfortable.child-result:not(.last-child), :host .result-root.with-sections.display-list.density-comfortable .placeholder {\n      margin-bottom: 1.75rem;\n    }\n    :host .result-root.with-sections.display-list.density-comfortable atomic-result-children::part(children-root), :host .result-root.with-sections.display-list.density-comfortable atomic-insight-result-children::part(children-root) {\n      border-style: var(--tw-border-style);\n      border-width: 1px;\n      border-color: var(--atomic-neutral);\n      border-radius: 16px;\n      margin-top: 1.25rem;\n      padding: 1.75rem;\n    }\n    :host .result-root.with-sections.display-list.density-comfortable atomic-result-children::part(show-hide-button), :host .result-root.with-sections.display-list.density-comfortable atomic-insight-result-children::part(show-hide-button) {\n      margin-top: 1.25rem;\n      margin-bottom: 1.25rem;\n    }\n    :host .result-root.with-sections.display-list.density-comfortable.child-result:not(.last-child), :host .result-root.with-sections.display-list.density-comfortable .placeholder {\n      margin-bottom: 1.75rem;\n    }\n    :host .result-root.with-sections.display-list.density-normal atomic-result-section-visual {\n      margin-right: 1rem;\n    }\n    :host .result-root.with-sections.display-list.density-normal atomic-result-section-badges, :host .result-root.with-sections.display-list.density-normal atomic-result-section-actions {\n      margin-bottom: 1rem;\n      --row-height: 2rem;\n    }\n    :host .result-root.with-sections.display-list.density-normal atomic-result-section-title {\n      --font-size: var(--atomic-text-xl);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n    }\n    :host .result-root.with-sections.display-list.density-normal atomic-result-section-excerpt {\n      margin-top: 1.25rem;\n      --font-size: var(--atomic-text-base);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      max-height: 2.5rem;\n      overflow: hidden;\n      display: -webkit-box;\n      -webkit-box-orient: vertical;\n      -webkit-line-clamp: 2;\n    }\n    :host .result-root.with-sections.display-list.density-normal atomic-result-section-bottom-metadata {\n      margin-top: 0.875rem;\n      --font-size: var(--atomic-text-sm);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      max-height: 3.5rem;\n    }\n    :host .result-root.with-sections.display-list.density-normal atomic-result-section-title-metadata {\n      margin-top: 0.475rem;\n    }\n    :host .result-root.with-sections.display-list.density-normal atomic-result-children::part(children-root), :host .result-root.with-sections.display-list.density-normal atomic-insight-result-children::part(children-root) {\n      border-style: var(--tw-border-style);\n      border-width: 1px;\n      border-color: var(--atomic-neutral);\n      border-radius: 16px;\n      margin-top: 0.875rem;\n      padding: 1.5rem;\n    }\n    :host .result-root.with-sections.display-list.density-normal atomic-result-children::part(show-hide-button), :host .result-root.with-sections.display-list.density-normal atomic-insight-result-children::part(show-hide-button) {\n      margin-top: 0.875rem;\n      margin-bottom: 0.875rem;\n    }\n    :host .result-root.with-sections.display-list.density-normal.child-result:not(.last-child), :host .result-root.with-sections.display-list.density-normal .placeholder {\n      margin-bottom: 1.5rem;\n    }\n    :host .result-root.with-sections.display-list.density-normal atomic-result-children::part(children-root), :host .result-root.with-sections.display-list.density-normal atomic-insight-result-children::part(children-root) {\n      border-style: var(--tw-border-style);\n      border-width: 1px;\n      border-color: var(--atomic-neutral);\n      border-radius: 16px;\n      margin-top: 0.875rem;\n      padding: 1.5rem;\n    }\n    :host .result-root.with-sections.display-list.density-normal atomic-result-children::part(show-hide-button), :host .result-root.with-sections.display-list.density-normal atomic-insight-result-children::part(show-hide-button) {\n      margin-top: 0.875rem;\n      margin-bottom: 0.875rem;\n    }\n    :host .result-root.with-sections.display-list.density-normal.child-result:not(.last-child), :host .result-root.with-sections.display-list.density-normal .placeholder {\n      margin-bottom: 1.5rem;\n    }\n    :host .result-root.with-sections.display-list.density-compact atomic-result-section-visual {\n      margin-right: 1rem;\n    }\n    :host .result-root.with-sections.display-list.density-compact atomic-result-section-badges, :host .result-root.with-sections.display-list.density-compact atomic-result-section-actions {\n      margin-bottom: 1rem;\n      --row-height: 2rem;\n    }\n    :host .result-root.with-sections.display-list.density-compact atomic-result-section-title {\n      --font-size: var(--atomic-text-xl);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n    }\n    :host .result-root.with-sections.display-list.density-compact atomic-result-section-excerpt {\n      margin-top: 1rem;\n      --font-size: var(--atomic-text-base);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      max-height: 1.25rem;\n      overflow: hidden;\n      display: -webkit-box;\n      -webkit-box-orient: vertical;\n      -webkit-line-clamp: 1;\n    }\n    :host .result-root.with-sections.display-list.density-compact atomic-result-section-bottom-metadata {\n      margin-top: 0.6875rem;\n      --font-size: var(--atomic-text-sm);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      max-height: 3.25rem;\n    }\n    :host .result-root.with-sections.display-list.density-compact atomic-result-section-title-metadata {\n      margin-top: 0.475rem;\n    }\n    :host .result-root.with-sections.display-list.density-compact atomic-result-children::part(children-root), :host .result-root.with-sections.display-list.density-compact atomic-insight-result-children::part(children-root) {\n      border-style: var(--tw-border-style);\n      border-width: 1px;\n      border-color: var(--atomic-neutral);\n      border-radius: 16px;\n      margin-top: 0.475rem;\n      padding: 1rem;\n    }\n    :host .result-root.with-sections.display-list.density-compact atomic-result-children::part(show-hide-button), :host .result-root.with-sections.display-list.density-compact atomic-insight-result-children::part(show-hide-button) {\n      margin-top: 0.475rem;\n      margin-bottom: 0.475rem;\n    }\n    :host .result-root.with-sections.display-list.density-compact.child-result:not(.last-child), :host .result-root.with-sections.display-list.density-compact .placeholder {\n      margin-bottom: 1rem;\n    }\n    :host .result-root.with-sections.display-list.density-compact atomic-result-children::part(children-root), :host .result-root.with-sections.display-list.density-compact atomic-insight-result-children::part(children-root) {\n      border-style: var(--tw-border-style);\n      border-width: 1px;\n      border-color: var(--atomic-neutral);\n      border-radius: 16px;\n      margin-top: 0.475rem;\n      padding: 1rem;\n    }\n    :host .result-root.with-sections.display-list.density-compact atomic-result-children::part(show-hide-button), :host .result-root.with-sections.display-list.density-compact atomic-insight-result-children::part(show-hide-button) {\n      margin-top: 0.475rem;\n      margin-bottom: 0.475rem;\n    }\n    :host .result-root.with-sections.display-list.density-compact.child-result:not(.last-child), :host .result-root.with-sections.display-list.density-compact .placeholder {\n      margin-bottom: 1rem;\n    }\n    :host .result-root.with-sections.display-list.image-large, :host .result-root.with-sections.display-list.image-small {\n      grid-template-areas: 'badges badges          .               actions' 'visual title           title           title' 'visual title-metadata  title-metadata  title-metadata' 'visual emphasized      emphasized      emphasized' 'visual excerpt         excerpt         excerpt' 'visual bottom-metadata bottom-metadata bottom-metadata' 'visual children        children        children';\n      grid-template-columns: minmax(0, min-content) auto 1fr auto;\n      grid-template-rows: repeat(6, auto) minmax(0, 1fr);\n    }\n    :host .result-root.with-sections.display-list.image-large.density-comfortable atomic-result-section-visual, :host .result-root.with-sections.display-list.image-large.density-normal atomic-result-section-visual {\n      width: 20.375rem;\n      height: 20.375rem;\n    }\n    :host .result-root.with-sections.display-list.image-small atomic-result-section-visual, :host .result-root.with-sections.display-list.image-large.density-compact atomic-result-section-visual {\n      width: 10rem;\n      height: 10rem;\n    }\n    :host .result-root.with-sections.display-list.image-icon {\n      grid-template-areas: 'badges badges          .               actions' 'visual title           title           title' 'visual title-metadata  title-metadata  title-metadata' 'visual emphasized      emphasized      emphasized' 'visual excerpt         excerpt         excerpt' 'visual bottom-metadata bottom-metadata bottom-metadata' 'visual children        children        children';\n      grid-template-columns: minmax(0, min-content) auto 1fr auto;\n      grid-template-rows: repeat(7, minmax(0, min-content));\n    }\n    :host .result-root.with-sections.display-list.image-icon atomic-result-section-visual {\n      width: 2rem;\n      height: 2rem;\n    }\n    :host .result-root.with-sections.display-list.image-none {\n      grid-template-areas: 'badges          .               actions' 'title           title           title' 'title-metadata  title-metadata  title-metadata' 'emphasized      emphasized      emphasized' 'excerpt         excerpt         excerpt' 'bottom-metadata bottom-metadata bottom-metadata' 'children        children        children';\n      grid-template-columns: auto 1fr auto;\n      grid-template-rows: repeat(6, auto);\n    }\n    :host .result-root.with-sections.display-list.image-none atomic-result-section-visual {\n      display: none;\n    }\n  }\n  @media not all and (width >= 1024px) {\n    :host .result-root.with-sections.display-list atomic-result-section-children atomic-result-children::part(children-root), :host .result-root.with-sections.display-list atomic-result-section-children atomic-insight-result-children::part(children-root) {\n      border-top-style: var(--tw-border-style);\n      border-top-width: 1px;\n      border-top-color: var(--atomic-neutral);\n    }\n    :host .result-root.with-sections.display-list.density-comfortable atomic-result-section-visual {\n      margin-right: 1rem;\n    }\n    :host .result-root.with-sections.display-list.density-comfortable atomic-result-section-badges {\n      margin-bottom: 1rem;\n      --row-height: 2rem;\n    }\n    :host .result-root.with-sections.display-list.density-comfortable atomic-result-section-actions {\n      margin-top: 1rem;\n      --row-height: 2.5rem;\n    }\n    :host .result-root.with-sections.display-list.density-comfortable atomic-result-section-title {\n      --font-size: var(--atomic-text-xl);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n    }\n    :host .result-root.with-sections.display-list.density-comfortable atomic-result-section-excerpt {\n      margin-top: 1.25rem;\n      --font-size: var(--atomic-text-base);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      max-height: 2.5rem;\n      overflow: hidden;\n      display: -webkit-box;\n      -webkit-box-orient: vertical;\n      -webkit-line-clamp: 2;\n    }\n    :host .result-root.with-sections.display-list.density-comfortable atomic-result-section-bottom-metadata {\n      margin-top: 0.75rem;\n      --font-size: var(--atomic-text-sm);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      max-height: 4rem;\n    }\n    :host .result-root.with-sections.display-list.density-comfortable atomic-result-section-title-metadata {\n      margin-top: 0.475rem;\n    }\n    :host .result-root.with-sections.display-list.density-comfortable atomic-result-children::part(children-root), :host .result-root.with-sections.display-list.density-comfortable atomic-insight-result-children::part(children-root) {\n      padding-top: 1.75rem;\n      margin-inline: calc(0.25rem * -4);\n      margin-top: calc(0.25rem * 4);\n      padding-inline: calc(0.25rem * 4);\n    }\n    :host .result-root.with-sections.display-list.density-comfortable atomic-result-children::part(show-hide-button), :host .result-root.with-sections.display-list.density-comfortable atomic-insight-result-children::part(show-hide-button) {\n      margin-top: 1.25rem;\n      margin-bottom: 1.25rem;\n    }\n    :host .result-root.with-sections.display-list.density-comfortable.child-result:not(.last-child), :host .result-root.with-sections.display-list.density-comfortable .placeholder {\n      margin-bottom: 1.75rem;\n    }\n    :host .result-root.with-sections.display-list.density-comfortable atomic-result-children::part(children-root), :host .result-root.with-sections.display-list.density-comfortable atomic-insight-result-children::part(children-root) {\n      padding-top: 1.75rem;\n      margin-inline: calc(0.25rem * -4);\n      margin-top: calc(0.25rem * 4);\n      padding-inline: calc(0.25rem * 4);\n    }\n    :host .result-root.with-sections.display-list.density-comfortable atomic-result-children::part(show-hide-button), :host .result-root.with-sections.display-list.density-comfortable atomic-insight-result-children::part(show-hide-button) {\n      margin-top: 1.25rem;\n      margin-bottom: 1.25rem;\n    }\n    :host .result-root.with-sections.display-list.density-comfortable.child-result:not(.last-child), :host .result-root.with-sections.display-list.density-comfortable .placeholder {\n      margin-bottom: 1.75rem;\n    }\n    :host .result-root.with-sections.display-list.density-normal atomic-result-section-visual {\n      margin-right: 1rem;\n    }\n    :host .result-root.with-sections.display-list.density-normal atomic-result-section-badges {\n      margin-bottom: 1rem;\n      --row-height: 2rem;\n    }\n    :host .result-root.with-sections.display-list.density-normal atomic-result-section-actions {\n      margin-top: 0.75rem;\n      --row-height: 2.5rem;\n    }\n    :host .result-root.with-sections.display-list.density-normal atomic-result-section-title {\n      --font-size: var(--atomic-text-xl);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n    }\n    :host .result-root.with-sections.display-list.density-normal atomic-result-section-excerpt {\n      margin-top: 1rem;\n      --font-size: var(--atomic-text-base);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      max-height: 2.5rem;\n      overflow: hidden;\n      display: -webkit-box;\n      -webkit-box-orient: vertical;\n      -webkit-line-clamp: 2;\n    }\n    :host .result-root.with-sections.display-list.density-normal atomic-result-section-bottom-metadata {\n      margin-top: 0.625rem;\n      --font-size: var(--atomic-text-sm);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      max-height: 3.5rem;\n    }\n    :host .result-root.with-sections.display-list.density-normal atomic-result-section-title-metadata {\n      margin-top: 0.475rem;\n    }\n    :host .result-root.with-sections.display-list.density-normal atomic-result-children::part(children-root), :host .result-root.with-sections.display-list.density-normal atomic-insight-result-children::part(children-root) {\n      padding-top: 1.5rem;\n      margin-inline: calc(0.25rem * -4);\n      margin-top: calc(0.25rem * 4);\n      padding-inline: calc(0.25rem * 4);\n    }\n    :host .result-root.with-sections.display-list.density-normal atomic-result-children::part(show-hide-button), :host .result-root.with-sections.display-list.density-normal atomic-insight-result-children::part(show-hide-button) {\n      margin-top: 0.875rem;\n      margin-bottom: 0.875rem;\n    }\n    :host .result-root.with-sections.display-list.density-normal.child-result:not(.last-child), :host .result-root.with-sections.display-list.density-normal .placeholder {\n      margin-bottom: 1.5rem;\n    }\n    :host .result-root.with-sections.display-list.density-normal atomic-result-children::part(children-root), :host .result-root.with-sections.display-list.density-normal atomic-insight-result-children::part(children-root) {\n      padding-top: 1.5rem;\n      margin-inline: calc(0.25rem * -4);\n      margin-top: calc(0.25rem * 4);\n      padding-inline: calc(0.25rem * 4);\n    }\n    :host .result-root.with-sections.display-list.density-normal atomic-result-children::part(show-hide-button), :host .result-root.with-sections.display-list.density-normal atomic-insight-result-children::part(show-hide-button) {\n      margin-top: 0.875rem;\n      margin-bottom: 0.875rem;\n    }\n    :host .result-root.with-sections.display-list.density-normal.child-result:not(.last-child), :host .result-root.with-sections.display-list.density-normal .placeholder {\n      margin-bottom: 1.5rem;\n    }\n    :host .result-root.with-sections.display-list.density-compact atomic-result-section-visual {\n      margin-right: 1rem;\n    }\n    :host .result-root.with-sections.display-list.density-compact atomic-result-section-badges {\n      margin-bottom: 1rem;\n      --row-height: 2rem;\n    }\n    :host .result-root.with-sections.display-list.density-compact atomic-result-section-actions {\n      margin-top: 0.5em;\n      --row-height: 2.5rem;\n    }\n    :host .result-root.with-sections.display-list.density-compact atomic-result-section-title {\n      --font-size: var(--atomic-text-xl);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n    }\n    :host .result-root.with-sections.display-list.density-compact atomic-result-section-excerpt {\n      margin-top: 0.75rem;\n      --font-size: var(--atomic-text-base);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      max-height: 1.25rem;\n      overflow: hidden;\n      display: -webkit-box;\n      -webkit-box-orient: vertical;\n      -webkit-line-clamp: 1;\n    }\n    :host .result-root.with-sections.display-list.density-compact atomic-result-section-bottom-metadata {\n      margin-top: 0.4375rem;\n      --font-size: var(--atomic-text-sm);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      max-height: 3.25rem;\n    }\n    :host .result-root.with-sections.display-list.density-compact atomic-result-section-title-metadata {\n      margin-top: 0.475rem;\n    }\n    :host .result-root.with-sections.display-list.density-compact atomic-result-children::part(children-root), :host .result-root.with-sections.display-list.density-compact atomic-insight-result-children::part(children-root) {\n      padding-top: 1rem;\n      margin-inline: calc(0.25rem * -4);\n      margin-top: calc(0.25rem * 4);\n      padding-inline: calc(0.25rem * 4);\n    }\n    :host .result-root.with-sections.display-list.density-compact atomic-result-children::part(show-hide-button), :host .result-root.with-sections.display-list.density-compact atomic-insight-result-children::part(show-hide-button) {\n      margin-top: 0.475rem;\n      margin-bottom: 0.475rem;\n    }\n    :host .result-root.with-sections.display-list.density-compact.child-result:not(.last-child), :host .result-root.with-sections.display-list.density-compact .placeholder {\n      margin-bottom: 1rem;\n    }\n    :host .result-root.with-sections.display-list.density-compact atomic-result-children::part(children-root), :host .result-root.with-sections.display-list.density-compact atomic-insight-result-children::part(children-root) {\n      padding-top: 1rem;\n      margin-inline: calc(0.25rem * -4);\n      margin-top: calc(0.25rem * 4);\n      padding-inline: calc(0.25rem * 4);\n    }\n    :host .result-root.with-sections.display-list.density-compact atomic-result-children::part(show-hide-button), :host .result-root.with-sections.display-list.density-compact atomic-insight-result-children::part(show-hide-button) {\n      margin-top: 0.475rem;\n      margin-bottom: 0.475rem;\n    }\n    :host .result-root.with-sections.display-list.density-compact.child-result:not(.last-child), :host .result-root.with-sections.display-list.density-compact .placeholder {\n      margin-bottom: 1rem;\n    }\n    :host .result-root.with-sections.display-list.image-large {\n      grid-template-areas: 'visual' 'badges' 'title' 'title-metadata' 'emphasized' 'excerpt' 'bottom-metadata' 'actions' 'children';\n      grid-template-columns: 100%;\n      grid-template-rows: repeat(8, auto);\n    }\n    @supports not (aspect-ratio: 1 / 1) {\n      :host .result-root.with-sections.display-list.image-large atomic-result-section-visual {\n        height: 7.25rem;\n      }\n    }\n    @supports not (aspect-ratio: 1 / 1) {\n      :host .result-root.with-sections.display-list.image-large atomic-result-section-visual {\n        height: 7.25rem;\n      }\n    }\n    :host .result-root.with-sections.display-list.image-large atomic-result-section-visual {\n      aspect-ratio: 1 / 1;\n      height: auto;\n    }\n    @supports not (aspect-ratio: 1 / 1) {\n      :host .result-root.with-sections.display-list.image-large atomic-result-section-visual {\n        height: 7.25rem;\n      }\n    }\n    :host .result-root.with-sections.display-list.image-large atomic-result-section-visual {\n      width: 100%;\n      margin-right: 0;\n      margin-bottom: 1rem;\n    }\n    :host .result-root.with-sections.display-list.image-small {\n      grid-template-areas: 'badges          badges' 'visual          title' 'visual          title-metadata' 'visual          emphasized' 'visual          .' 'excerpt         excerpt' 'bottom-metadata bottom-metadata' 'actions         actions' 'children        children';\n      grid-template-columns: auto minmax(0, 1fr);\n      grid-template-rows: repeat(4, auto) minmax(0, 1fr) repeat(3, auto);\n    }\n    :host .result-root.with-sections.display-list.image-small atomic-result-section-visual {\n      width: 24vw;\n      height: 24vw;\n      margin-bottom: 1rem;\n    }\n    :host .result-root.with-sections.display-list.image-icon {\n      grid-template-areas: 'badges          badges' 'visual          title' 'visual          title-metadata' 'visual          emphasized' 'visual          excerpt' 'visual          bottom-metadata' 'visual          actions' 'visual          children';\n      grid-template-columns: auto minmax(0, 1fr);\n      grid-template-rows: repeat(7, auto) 1fr;\n    }\n    :host .result-root.with-sections.display-list.image-icon atomic-result-section-visual {\n      width: 2rem;\n      height: 2rem;\n      margin-bottom: 0;\n    }\n    :host .result-root.with-sections.display-list.image-none {\n      grid-template-areas: 'badges' 'title' 'title-metadata' 'emphasized' 'excerpt' 'bottom-metadata' 'actions' 'children';\n      grid-template-columns: 100%;\n      grid-template-rows: repeat(7, auto);\n    }\n    :host .result-root.with-sections.display-list.image-none atomic-result-section-visual {\n      display: none;\n    }\n  }\n  :host .result-root.with-sections.display-grid a, :host .result-root.with-sections.display-grid button {\n    position: relative;\n  }\n  @media (width >= 1024px) {\n    :host .result-root.with-sections.display-grid.image-large {\n      grid-template-areas: 'badges' 'visual' 'title' 'title-metadata' 'emphasized' 'excerpt' 'children' 'bottom-metadata' 'actions';\n      grid-template-columns: 100%;\n      grid-template-rows: repeat(9, auto);\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-comfortable.image-large atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-large.density-comfortable.image-small atomic-result-section-visual {\n      margin: 0 auto 2rem auto;\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-comfortable.image-icon atomic-result-section-badges {\n      margin-bottom: 2rem;\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-comfortable.image-icon atomic-result-section-visual {\n      width: 2rem;\n      height: 2rem;\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-comfortable atomic-result-section-visual {\n      margin-bottom: 0.5rem;\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-comfortable atomic-result-section-badges {\n      --font-size: var(--atomic-text-sm);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      margin-bottom: 1rem;\n      --row-height: 2rem;\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-comfortable atomic-result-section-actions {\n      --font-size: var(--atomic-text-base);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      margin-top: 2.25rem;\n      --row-height: 2.5rem;\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-comfortable atomic-result-section-title {\n      --font-size: var(--atomic-text-2xl);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      word-break: break-word;\n      overflow: hidden;\n      display: -webkit-box;\n      -webkit-box-orient: vertical;\n      -webkit-line-clamp: 2;\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-comfortable atomic-result-section-title-metadata {\n      --font-size: var(--atomic-text-sm);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      margin-top: 0.475rem;\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-comfortable atomic-result-section-emphasized {\n      font-weight: 500;\n      --font-size: var(--atomic-text-2xl);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-comfortable atomic-result-section-excerpt {\n      --font-size: var(--atomic-text-lg);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      margin-top: 2.25rem;\n      overflow: hidden;\n      display: -webkit-box;\n      -webkit-box-orient: vertical;\n      -webkit-line-clamp: 3;\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-comfortable atomic-result-section-bottom-metadata {\n      --font-size: var(--atomic-text-sm);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      margin-top: 1.75rem;\n      max-height: 4rem;\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-normal.image-large atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-large.density-normal.image-small atomic-result-section-visual {\n      margin: 0 auto 1.5rem auto;\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-normal.image-icon atomic-result-section-badges {\n      margin-bottom: 1.5rem;\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-normal.image-icon atomic-result-section-visual {\n      width: 2rem;\n      height: 2rem;\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-normal atomic-result-section-visual {\n      margin-bottom: 0.5rem;\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-normal atomic-result-section-badges {\n      --font-size: var(--atomic-text-sm);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      margin-bottom: 1rem;\n      --row-height: 2rem;\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-normal atomic-result-section-actions {\n      --font-size: var(--atomic-text-sm);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      margin-top: 1.75rem;\n      --row-height: 2rem;\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-normal atomic-result-section-title {\n      --font-size: var(--atomic-text-xl);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      word-break: break-word;\n      overflow: hidden;\n      display: -webkit-box;\n      -webkit-box-orient: vertical;\n      -webkit-line-clamp: 2;\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-normal atomic-result-section-title-metadata {\n      --font-size: var(--atomic-text-sm);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      margin-top: 0.475rem;\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-normal atomic-result-section-emphasized {\n      font-weight: 500;\n      --font-size: var(--atomic-text-2xl);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-normal atomic-result-section-excerpt {\n      --font-size: var(--atomic-text-base);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      margin-top: 1.75rem;\n      overflow: hidden;\n      display: -webkit-box;\n      -webkit-box-orient: vertical;\n      -webkit-line-clamp: 2;\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-normal atomic-result-section-bottom-metadata {\n      --font-size: var(--atomic-text-sm);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      margin-top: 1.375rem;\n      max-height: 3.5rem;\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-compact.image-large atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-large.density-compact.image-small atomic-result-section-visual {\n      margin: 0 auto 1rem auto;\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-compact.image-icon atomic-result-section-badges {\n      margin-bottom: 1rem;\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-compact.image-icon atomic-result-section-visual {\n      width: 2rem;\n      height: 2rem;\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-compact atomic-result-section-visual {\n      margin-bottom: 0.5rem;\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-compact atomic-result-section-badges {\n      --font-size: var(--atomic-text-sm);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      margin-bottom: 1rem;\n      --row-height: 2rem;\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-compact atomic-result-section-actions {\n      --font-size: var(--atomic-text-sm);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      margin-top: 1.25rem;\n      --row-height: 2rem;\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-compact atomic-result-section-title {\n      --font-size: var(--atomic-text-xl);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      word-break: break-word;\n      overflow: hidden;\n      display: -webkit-box;\n      -webkit-box-orient: vertical;\n      -webkit-line-clamp: 2;\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-compact atomic-result-section-title-metadata {\n      --font-size: var(--atomic-text-sm);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      margin-top: 0.475rem;\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-compact atomic-result-section-emphasized {\n      font-weight: 500;\n      --font-size: var(--atomic-text-2xl);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-compact atomic-result-section-excerpt {\n      --font-size: var(--atomic-text-base);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      margin-top: 1.25rem;\n      overflow: hidden;\n      display: -webkit-box;\n      -webkit-box-orient: vertical;\n      -webkit-line-clamp: 1;\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-compact atomic-result-section-bottom-metadata {\n      --font-size: var(--atomic-text-sm);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      margin-top: 0.9375rem;\n      max-height: 3.25rem;\n    }\n    @supports not (aspect-ratio: 1 / 1) {\n      :host .result-root.with-sections.display-grid.image-large.image-large atomic-result-section-visual {\n        height: 19.75rem;\n      }\n    }\n    @supports not (aspect-ratio: 1 / 1) {\n      :host .result-root.with-sections.display-grid.image-large.image-large atomic-result-section-visual {\n        height: 19.75rem;\n      }\n    }\n    :host .result-root.with-sections.display-grid.image-large.image-large atomic-result-section-visual {\n      aspect-ratio: 1 / 1;\n      height: auto;\n    }\n    @supports not (aspect-ratio: 1 / 1) {\n      :host .result-root.with-sections.display-grid.image-large.image-large atomic-result-section-visual {\n        height: 19.75rem;\n      }\n    }\n    :host .result-root.with-sections.display-grid.image-large.image-large atomic-result-section-visual {\n      width: 100%;\n    }\n    :host .result-root.with-sections.display-grid.image-large.image-large atomic-result-section-badges {\n      margin-bottom: 1rem;\n    }\n    @supports not (aspect-ratio: 1 / 1) {\n      :host .result-root.with-sections.display-grid.image-large.image-small atomic-result-section-visual {\n        height: 14rem;\n      }\n    }\n    @supports not (aspect-ratio: 1 / 1) {\n      :host .result-root.with-sections.display-grid.image-large.image-small atomic-result-section-visual {\n        height: 14rem;\n      }\n    }\n    :host .result-root.with-sections.display-grid.image-large.image-small atomic-result-section-visual {\n      aspect-ratio: 1 / 1;\n      height: auto;\n    }\n    @supports not (aspect-ratio: 1 / 1) {\n      :host .result-root.with-sections.display-grid.image-large.image-small atomic-result-section-visual {\n        height: 14rem;\n      }\n    }\n    :host .result-root.with-sections.display-grid.image-large.image-small atomic-result-section-visual {\n      width: 100%;\n    }\n    :host .result-root.with-sections.display-grid.image-large.image-none atomic-result-section-visual {\n      display: none;\n    }\n  }\n  @media not all and (width >= 1024px) {\n    :host .result-root.with-sections.display-grid.image-large atomic-result-section-children atomic-result-children::part(children-root), :host .result-root.with-sections.display-grid.image-large atomic-result-section-children atomic-insight-result-children::part(children-root) {\n      border-top-style: var(--tw-border-style);\n      border-top-width: 1px;\n      border-top-color: var(--atomic-neutral);\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-comfortable atomic-result-section-visual {\n      margin-right: 1rem;\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-comfortable atomic-result-section-badges {\n      margin-bottom: 1rem;\n      --row-height: 2rem;\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-comfortable atomic-result-section-actions {\n      margin-top: 1rem;\n      --row-height: 2.5rem;\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-comfortable atomic-result-section-title {\n      --font-size: var(--atomic-text-xl);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-comfortable atomic-result-section-excerpt {\n      margin-top: 1.25rem;\n      --font-size: var(--atomic-text-base);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      max-height: 2.5rem;\n      overflow: hidden;\n      display: -webkit-box;\n      -webkit-box-orient: vertical;\n      -webkit-line-clamp: 2;\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-comfortable atomic-result-section-bottom-metadata {\n      margin-top: 0.75rem;\n      --font-size: var(--atomic-text-sm);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      max-height: 4rem;\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-comfortable atomic-result-section-title-metadata {\n      margin-top: 0.475rem;\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-comfortable atomic-result-children::part(children-root), :host .result-root.with-sections.display-grid.image-large.density-comfortable atomic-insight-result-children::part(children-root) {\n      padding-top: 1.75rem;\n      margin-inline: calc(0.25rem * -4);\n      margin-top: calc(0.25rem * 4);\n      padding-inline: calc(0.25rem * 4);\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-comfortable atomic-result-children::part(show-hide-button), :host .result-root.with-sections.display-grid.image-large.density-comfortable atomic-insight-result-children::part(show-hide-button) {\n      margin-top: 1.25rem;\n      margin-bottom: 1.25rem;\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-comfortable.child-result:not(.last-child), :host .result-root.with-sections.display-grid.image-large.density-comfortable .placeholder {\n      margin-bottom: 1.75rem;\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-comfortable atomic-result-children::part(children-root), :host .result-root.with-sections.display-grid.image-large.density-comfortable atomic-insight-result-children::part(children-root) {\n      padding-top: 1.75rem;\n      margin-inline: calc(0.25rem * -4);\n      margin-top: calc(0.25rem * 4);\n      padding-inline: calc(0.25rem * 4);\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-comfortable atomic-result-children::part(show-hide-button), :host .result-root.with-sections.display-grid.image-large.density-comfortable atomic-insight-result-children::part(show-hide-button) {\n      margin-top: 1.25rem;\n      margin-bottom: 1.25rem;\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-comfortable.child-result:not(.last-child), :host .result-root.with-sections.display-grid.image-large.density-comfortable .placeholder {\n      margin-bottom: 1.75rem;\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-normal atomic-result-section-visual {\n      margin-right: 1rem;\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-normal atomic-result-section-badges {\n      margin-bottom: 1rem;\n      --row-height: 2rem;\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-normal atomic-result-section-actions {\n      margin-top: 0.75rem;\n      --row-height: 2.5rem;\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-normal atomic-result-section-title {\n      --font-size: var(--atomic-text-xl);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-normal atomic-result-section-excerpt {\n      margin-top: 1rem;\n      --font-size: var(--atomic-text-base);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      max-height: 2.5rem;\n      overflow: hidden;\n      display: -webkit-box;\n      -webkit-box-orient: vertical;\n      -webkit-line-clamp: 2;\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-normal atomic-result-section-bottom-metadata {\n      margin-top: 0.625rem;\n      --font-size: var(--atomic-text-sm);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      max-height: 3.5rem;\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-normal atomic-result-section-title-metadata {\n      margin-top: 0.475rem;\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-normal atomic-result-children::part(children-root), :host .result-root.with-sections.display-grid.image-large.density-normal atomic-insight-result-children::part(children-root) {\n      padding-top: 1.5rem;\n      margin-inline: calc(0.25rem * -4);\n      margin-top: calc(0.25rem * 4);\n      padding-inline: calc(0.25rem * 4);\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-normal atomic-result-children::part(show-hide-button), :host .result-root.with-sections.display-grid.image-large.density-normal atomic-insight-result-children::part(show-hide-button) {\n      margin-top: 0.875rem;\n      margin-bottom: 0.875rem;\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-normal.child-result:not(.last-child), :host .result-root.with-sections.display-grid.image-large.density-normal .placeholder {\n      margin-bottom: 1.5rem;\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-normal atomic-result-children::part(children-root), :host .result-root.with-sections.display-grid.image-large.density-normal atomic-insight-result-children::part(children-root) {\n      padding-top: 1.5rem;\n      margin-inline: calc(0.25rem * -4);\n      margin-top: calc(0.25rem * 4);\n      padding-inline: calc(0.25rem * 4);\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-normal atomic-result-children::part(show-hide-button), :host .result-root.with-sections.display-grid.image-large.density-normal atomic-insight-result-children::part(show-hide-button) {\n      margin-top: 0.875rem;\n      margin-bottom: 0.875rem;\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-normal.child-result:not(.last-child), :host .result-root.with-sections.display-grid.image-large.density-normal .placeholder {\n      margin-bottom: 1.5rem;\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-compact atomic-result-section-visual {\n      margin-right: 1rem;\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-compact atomic-result-section-badges {\n      margin-bottom: 1rem;\n      --row-height: 2rem;\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-compact atomic-result-section-actions {\n      margin-top: 0.5em;\n      --row-height: 2.5rem;\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-compact atomic-result-section-title {\n      --font-size: var(--atomic-text-xl);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-compact atomic-result-section-excerpt {\n      margin-top: 0.75rem;\n      --font-size: var(--atomic-text-base);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      max-height: 1.25rem;\n      overflow: hidden;\n      display: -webkit-box;\n      -webkit-box-orient: vertical;\n      -webkit-line-clamp: 1;\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-compact atomic-result-section-bottom-metadata {\n      margin-top: 0.4375rem;\n      --font-size: var(--atomic-text-sm);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      max-height: 3.25rem;\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-compact atomic-result-section-title-metadata {\n      margin-top: 0.475rem;\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-compact atomic-result-children::part(children-root), :host .result-root.with-sections.display-grid.image-large.density-compact atomic-insight-result-children::part(children-root) {\n      padding-top: 1rem;\n      margin-inline: calc(0.25rem * -4);\n      margin-top: calc(0.25rem * 4);\n      padding-inline: calc(0.25rem * 4);\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-compact atomic-result-children::part(show-hide-button), :host .result-root.with-sections.display-grid.image-large.density-compact atomic-insight-result-children::part(show-hide-button) {\n      margin-top: 0.475rem;\n      margin-bottom: 0.475rem;\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-compact.child-result:not(.last-child), :host .result-root.with-sections.display-grid.image-large.density-compact .placeholder {\n      margin-bottom: 1rem;\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-compact atomic-result-children::part(children-root), :host .result-root.with-sections.display-grid.image-large.density-compact atomic-insight-result-children::part(children-root) {\n      padding-top: 1rem;\n      margin-inline: calc(0.25rem * -4);\n      margin-top: calc(0.25rem * 4);\n      padding-inline: calc(0.25rem * 4);\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-compact atomic-result-children::part(show-hide-button), :host .result-root.with-sections.display-grid.image-large.density-compact atomic-insight-result-children::part(show-hide-button) {\n      margin-top: 0.475rem;\n      margin-bottom: 0.475rem;\n    }\n    :host .result-root.with-sections.display-grid.image-large.density-compact.child-result:not(.last-child), :host .result-root.with-sections.display-grid.image-large.density-compact .placeholder {\n      margin-bottom: 1rem;\n    }\n    :host .result-root.with-sections.display-grid.image-large.image-large {\n      grid-template-areas: 'visual' 'badges' 'title' 'title-metadata' 'emphasized' 'excerpt' 'bottom-metadata' 'actions' 'children';\n      grid-template-columns: 100%;\n      grid-template-rows: repeat(8, auto);\n    }\n    @supports not (aspect-ratio: 1 / 1) {\n      :host .result-root.with-sections.display-grid.image-large.image-large atomic-result-section-visual {\n        height: 7.25rem;\n      }\n    }\n    @supports not (aspect-ratio: 1 / 1) {\n      :host .result-root.with-sections.display-grid.image-large.image-large atomic-result-section-visual {\n        height: 7.25rem;\n      }\n    }\n    :host .result-root.with-sections.display-grid.image-large.image-large atomic-result-section-visual {\n      aspect-ratio: 1 / 1;\n      height: auto;\n    }\n    @supports not (aspect-ratio: 1 / 1) {\n      :host .result-root.with-sections.display-grid.image-large.image-large atomic-result-section-visual {\n        height: 7.25rem;\n      }\n    }\n    :host .result-root.with-sections.display-grid.image-large.image-large atomic-result-section-visual {\n      width: 100%;\n      margin-right: 0;\n      margin-bottom: 1rem;\n    }\n    :host .result-root.with-sections.display-grid.image-large.image-small {\n      grid-template-areas: 'badges          badges' 'visual          title' 'visual          title-metadata' 'visual          emphasized' 'visual          .' 'excerpt         excerpt' 'bottom-metadata bottom-metadata' 'actions         actions' 'children        children';\n      grid-template-columns: auto minmax(0, 1fr);\n      grid-template-rows: repeat(4, auto) minmax(0, 1fr) repeat(3, auto);\n    }\n    :host .result-root.with-sections.display-grid.image-large.image-small atomic-result-section-visual {\n      width: 24vw;\n      height: 24vw;\n      margin-bottom: 1rem;\n    }\n    :host .result-root.with-sections.display-grid.image-large.image-icon {\n      grid-template-areas: 'badges          badges' 'visual          title' 'visual          title-metadata' 'visual          emphasized' 'visual          excerpt' 'visual          bottom-metadata' 'visual          actions' 'visual          children';\n      grid-template-columns: auto minmax(0, 1fr);\n      grid-template-rows: repeat(7, auto) 1fr;\n    }\n    :host .result-root.with-sections.display-grid.image-large.image-icon atomic-result-section-visual {\n      width: 2rem;\n      height: 2rem;\n      margin-bottom: 0;\n    }\n    :host .result-root.with-sections.display-grid.image-large.image-none {\n      grid-template-areas: 'badges' 'title' 'title-metadata' 'emphasized' 'excerpt' 'bottom-metadata' 'actions' 'children';\n      grid-template-columns: 100%;\n      grid-template-rows: repeat(7, auto);\n    }\n    :host .result-root.with-sections.display-grid.image-large.image-none atomic-result-section-visual {\n      display: none;\n    }\n  }\n  @media (width >= 1024px) {\n    :host .result-root.with-sections.display-grid.image-small, :host .result-root.with-sections.display-grid.image-icon, :host .result-root.with-sections.display-grid.image-none {\n      grid-template-areas: 'badges' 'visual' 'title' 'title-metadata' 'emphasized' 'excerpt' 'children' 'bottom-metadata' 'actions';\n      grid-template-columns: 100%;\n      grid-template-rows: repeat(9, auto);\n    }\n    :host .result-root.with-sections.display-grid.image-small.density-comfortable.image-large atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-small.density-comfortable.image-small atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-icon.density-comfortable.image-large atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-icon.density-comfortable.image-small atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-none.density-comfortable.image-large atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-none.density-comfortable.image-small atomic-result-section-visual {\n      margin: 0 auto 2rem auto;\n    }\n    :host .result-root.with-sections.display-grid.image-small.density-comfortable.image-icon atomic-result-section-badges, :host .result-root.with-sections.display-grid.image-icon.density-comfortable.image-icon atomic-result-section-badges, :host .result-root.with-sections.display-grid.image-none.density-comfortable.image-icon atomic-result-section-badges {\n      margin-bottom: 2rem;\n    }\n    :host .result-root.with-sections.display-grid.image-small.density-comfortable.image-icon atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-icon.density-comfortable.image-icon atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-none.density-comfortable.image-icon atomic-result-section-visual {\n      width: 2rem;\n      height: 2rem;\n    }\n    :host .result-root.with-sections.display-grid.image-small.density-comfortable atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-icon.density-comfortable atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-none.density-comfortable atomic-result-section-visual {\n      margin-bottom: 0.5rem;\n    }\n    :host .result-root.with-sections.display-grid.image-small.density-comfortable atomic-result-section-badges, :host .result-root.with-sections.display-grid.image-icon.density-comfortable atomic-result-section-badges, :host .result-root.with-sections.display-grid.image-none.density-comfortable atomic-result-section-badges {\n      --font-size: var(--atomic-text-sm);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      margin-bottom: 1rem;\n      --row-height: 2rem;\n    }\n    :host .result-root.with-sections.display-grid.image-small.density-comfortable atomic-result-section-actions, :host .result-root.with-sections.display-grid.image-icon.density-comfortable atomic-result-section-actions, :host .result-root.with-sections.display-grid.image-none.density-comfortable atomic-result-section-actions {\n      --font-size: var(--atomic-text-base);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      margin-top: 2.25rem;\n      --row-height: 2.5rem;\n    }\n    :host .result-root.with-sections.display-grid.image-small.density-comfortable atomic-result-section-title, :host .result-root.with-sections.display-grid.image-icon.density-comfortable atomic-result-section-title, :host .result-root.with-sections.display-grid.image-none.density-comfortable atomic-result-section-title {\n      --font-size: var(--atomic-text-2xl);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      word-break: break-word;\n      overflow: hidden;\n      display: -webkit-box;\n      -webkit-box-orient: vertical;\n      -webkit-line-clamp: 2;\n    }\n    :host .result-root.with-sections.display-grid.image-small.density-comfortable atomic-result-section-title-metadata, :host .result-root.with-sections.display-grid.image-icon.density-comfortable atomic-result-section-title-metadata, :host .result-root.with-sections.display-grid.image-none.density-comfortable atomic-result-section-title-metadata {\n      --font-size: var(--atomic-text-sm);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      margin-top: 0.475rem;\n    }\n    :host .result-root.with-sections.display-grid.image-small.density-comfortable atomic-result-section-emphasized, :host .result-root.with-sections.display-grid.image-icon.density-comfortable atomic-result-section-emphasized, :host .result-root.with-sections.display-grid.image-none.density-comfortable atomic-result-section-emphasized {\n      font-weight: 500;\n      --font-size: var(--atomic-text-2xl);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n    }\n    :host .result-root.with-sections.display-grid.image-small.density-comfortable atomic-result-section-excerpt, :host .result-root.with-sections.display-grid.image-icon.density-comfortable atomic-result-section-excerpt, :host .result-root.with-sections.display-grid.image-none.density-comfortable atomic-result-section-excerpt {\n      --font-size: var(--atomic-text-lg);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      margin-top: 2.25rem;\n      overflow: hidden;\n      display: -webkit-box;\n      -webkit-box-orient: vertical;\n      -webkit-line-clamp: 3;\n    }\n    :host .result-root.with-sections.display-grid.image-small.density-comfortable atomic-result-section-bottom-metadata, :host .result-root.with-sections.display-grid.image-icon.density-comfortable atomic-result-section-bottom-metadata, :host .result-root.with-sections.display-grid.image-none.density-comfortable atomic-result-section-bottom-metadata {\n      --font-size: var(--atomic-text-sm);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      margin-top: 1.75rem;\n      max-height: 4rem;\n    }\n    :host .result-root.with-sections.display-grid.image-small.density-normal.image-large atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-small.density-normal.image-small atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-icon.density-normal.image-large atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-icon.density-normal.image-small atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-none.density-normal.image-large atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-none.density-normal.image-small atomic-result-section-visual {\n      margin: 0 auto 1.5rem auto;\n    }\n    :host .result-root.with-sections.display-grid.image-small.density-normal.image-icon atomic-result-section-badges, :host .result-root.with-sections.display-grid.image-icon.density-normal.image-icon atomic-result-section-badges, :host .result-root.with-sections.display-grid.image-none.density-normal.image-icon atomic-result-section-badges {\n      margin-bottom: 1.5rem;\n    }\n    :host .result-root.with-sections.display-grid.image-small.density-normal.image-icon atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-icon.density-normal.image-icon atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-none.density-normal.image-icon atomic-result-section-visual {\n      width: 2rem;\n      height: 2rem;\n    }\n    :host .result-root.with-sections.display-grid.image-small.density-normal atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-icon.density-normal atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-none.density-normal atomic-result-section-visual {\n      margin-bottom: 0.5rem;\n    }\n    :host .result-root.with-sections.display-grid.image-small.density-normal atomic-result-section-badges, :host .result-root.with-sections.display-grid.image-icon.density-normal atomic-result-section-badges, :host .result-root.with-sections.display-grid.image-none.density-normal atomic-result-section-badges {\n      --font-size: var(--atomic-text-sm);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      margin-bottom: 1rem;\n      --row-height: 2rem;\n    }\n    :host .result-root.with-sections.display-grid.image-small.density-normal atomic-result-section-actions, :host .result-root.with-sections.display-grid.image-icon.density-normal atomic-result-section-actions, :host .result-root.with-sections.display-grid.image-none.density-normal atomic-result-section-actions {\n      --font-size: var(--atomic-text-sm);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      margin-top: 1.75rem;\n      --row-height: 2rem;\n    }\n    :host .result-root.with-sections.display-grid.image-small.density-normal atomic-result-section-title, :host .result-root.with-sections.display-grid.image-icon.density-normal atomic-result-section-title, :host .result-root.with-sections.display-grid.image-none.density-normal atomic-result-section-title {\n      --font-size: var(--atomic-text-xl);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      word-break: break-word;\n      overflow: hidden;\n      display: -webkit-box;\n      -webkit-box-orient: vertical;\n      -webkit-line-clamp: 2;\n    }\n    :host .result-root.with-sections.display-grid.image-small.density-normal atomic-result-section-title-metadata, :host .result-root.with-sections.display-grid.image-icon.density-normal atomic-result-section-title-metadata, :host .result-root.with-sections.display-grid.image-none.density-normal atomic-result-section-title-metadata {\n      --font-size: var(--atomic-text-sm);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      margin-top: 0.475rem;\n    }\n    :host .result-root.with-sections.display-grid.image-small.density-normal atomic-result-section-emphasized, :host .result-root.with-sections.display-grid.image-icon.density-normal atomic-result-section-emphasized, :host .result-root.with-sections.display-grid.image-none.density-normal atomic-result-section-emphasized {\n      font-weight: 500;\n      --font-size: var(--atomic-text-2xl);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n    }\n    :host .result-root.with-sections.display-grid.image-small.density-normal atomic-result-section-excerpt, :host .result-root.with-sections.display-grid.image-icon.density-normal atomic-result-section-excerpt, :host .result-root.with-sections.display-grid.image-none.density-normal atomic-result-section-excerpt {\n      --font-size: var(--atomic-text-base);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      margin-top: 1.75rem;\n      overflow: hidden;\n      display: -webkit-box;\n      -webkit-box-orient: vertical;\n      -webkit-line-clamp: 2;\n    }\n    :host .result-root.with-sections.display-grid.image-small.density-normal atomic-result-section-bottom-metadata, :host .result-root.with-sections.display-grid.image-icon.density-normal atomic-result-section-bottom-metadata, :host .result-root.with-sections.display-grid.image-none.density-normal atomic-result-section-bottom-metadata {\n      --font-size: var(--atomic-text-sm);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      margin-top: 1.375rem;\n      max-height: 3.5rem;\n    }\n    :host .result-root.with-sections.display-grid.image-small.density-compact.image-large atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-small.density-compact.image-small atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-icon.density-compact.image-large atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-icon.density-compact.image-small atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-none.density-compact.image-large atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-none.density-compact.image-small atomic-result-section-visual {\n      margin: 0 auto 1rem auto;\n    }\n    :host .result-root.with-sections.display-grid.image-small.density-compact.image-icon atomic-result-section-badges, :host .result-root.with-sections.display-grid.image-icon.density-compact.image-icon atomic-result-section-badges, :host .result-root.with-sections.display-grid.image-none.density-compact.image-icon atomic-result-section-badges {\n      margin-bottom: 1rem;\n    }\n    :host .result-root.with-sections.display-grid.image-small.density-compact.image-icon atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-icon.density-compact.image-icon atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-none.density-compact.image-icon atomic-result-section-visual {\n      width: 2rem;\n      height: 2rem;\n    }\n    :host .result-root.with-sections.display-grid.image-small.density-compact atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-icon.density-compact atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-none.density-compact atomic-result-section-visual {\n      margin-bottom: 0.5rem;\n    }\n    :host .result-root.with-sections.display-grid.image-small.density-compact atomic-result-section-badges, :host .result-root.with-sections.display-grid.image-icon.density-compact atomic-result-section-badges, :host .result-root.with-sections.display-grid.image-none.density-compact atomic-result-section-badges {\n      --font-size: var(--atomic-text-sm);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      margin-bottom: 1rem;\n      --row-height: 2rem;\n    }\n    :host .result-root.with-sections.display-grid.image-small.density-compact atomic-result-section-actions, :host .result-root.with-sections.display-grid.image-icon.density-compact atomic-result-section-actions, :host .result-root.with-sections.display-grid.image-none.density-compact atomic-result-section-actions {\n      --font-size: var(--atomic-text-sm);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      margin-top: 1.25rem;\n      --row-height: 2rem;\n    }\n    :host .result-root.with-sections.display-grid.image-small.density-compact atomic-result-section-title, :host .result-root.with-sections.display-grid.image-icon.density-compact atomic-result-section-title, :host .result-root.with-sections.display-grid.image-none.density-compact atomic-result-section-title {\n      --font-size: var(--atomic-text-xl);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      word-break: break-word;\n      overflow: hidden;\n      display: -webkit-box;\n      -webkit-box-orient: vertical;\n      -webkit-line-clamp: 2;\n    }\n    :host .result-root.with-sections.display-grid.image-small.density-compact atomic-result-section-title-metadata, :host .result-root.with-sections.display-grid.image-icon.density-compact atomic-result-section-title-metadata, :host .result-root.with-sections.display-grid.image-none.density-compact atomic-result-section-title-metadata {\n      --font-size: var(--atomic-text-sm);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      margin-top: 0.475rem;\n    }\n    :host .result-root.with-sections.display-grid.image-small.density-compact atomic-result-section-emphasized, :host .result-root.with-sections.display-grid.image-icon.density-compact atomic-result-section-emphasized, :host .result-root.with-sections.display-grid.image-none.density-compact atomic-result-section-emphasized {\n      font-weight: 500;\n      --font-size: var(--atomic-text-2xl);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n    }\n    :host .result-root.with-sections.display-grid.image-small.density-compact atomic-result-section-excerpt, :host .result-root.with-sections.display-grid.image-icon.density-compact atomic-result-section-excerpt, :host .result-root.with-sections.display-grid.image-none.density-compact atomic-result-section-excerpt {\n      --font-size: var(--atomic-text-base);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      margin-top: 1.25rem;\n      overflow: hidden;\n      display: -webkit-box;\n      -webkit-box-orient: vertical;\n      -webkit-line-clamp: 1;\n    }\n    :host .result-root.with-sections.display-grid.image-small.density-compact atomic-result-section-bottom-metadata, :host .result-root.with-sections.display-grid.image-icon.density-compact atomic-result-section-bottom-metadata, :host .result-root.with-sections.display-grid.image-none.density-compact atomic-result-section-bottom-metadata {\n      --font-size: var(--atomic-text-sm);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      margin-top: 0.9375rem;\n      max-height: 3.25rem;\n    }\n    @supports not (aspect-ratio: 1 / 1) {\n      :host .result-root.with-sections.display-grid.image-small.image-large atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-icon.image-large atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-none.image-large atomic-result-section-visual {\n        height: 19.75rem;\n      }\n    }\n    @supports not (aspect-ratio: 1 / 1) {\n      :host .result-root.with-sections.display-grid.image-small.image-large atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-icon.image-large atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-none.image-large atomic-result-section-visual {\n        height: 19.75rem;\n      }\n    }\n    :host .result-root.with-sections.display-grid.image-small.image-large atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-icon.image-large atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-none.image-large atomic-result-section-visual {\n      aspect-ratio: 1 / 1;\n      height: auto;\n    }\n    @supports not (aspect-ratio: 1 / 1) {\n      :host .result-root.with-sections.display-grid.image-small.image-large atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-icon.image-large atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-none.image-large atomic-result-section-visual {\n        height: 19.75rem;\n      }\n    }\n    :host .result-root.with-sections.display-grid.image-small.image-large atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-icon.image-large atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-none.image-large atomic-result-section-visual {\n      width: 100%;\n    }\n    :host .result-root.with-sections.display-grid.image-small.image-large atomic-result-section-badges, :host .result-root.with-sections.display-grid.image-icon.image-large atomic-result-section-badges, :host .result-root.with-sections.display-grid.image-none.image-large atomic-result-section-badges {\n      margin-bottom: 1rem;\n    }\n    @supports not (aspect-ratio: 1 / 1) {\n      :host .result-root.with-sections.display-grid.image-small.image-small atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-icon.image-small atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-none.image-small atomic-result-section-visual {\n        height: 14rem;\n      }\n    }\n    @supports not (aspect-ratio: 1 / 1) {\n      :host .result-root.with-sections.display-grid.image-small.image-small atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-icon.image-small atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-none.image-small atomic-result-section-visual {\n        height: 14rem;\n      }\n    }\n    :host .result-root.with-sections.display-grid.image-small.image-small atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-icon.image-small atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-none.image-small atomic-result-section-visual {\n      aspect-ratio: 1 / 1;\n      height: auto;\n    }\n    @supports not (aspect-ratio: 1 / 1) {\n      :host .result-root.with-sections.display-grid.image-small.image-small atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-icon.image-small atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-none.image-small atomic-result-section-visual {\n        height: 14rem;\n      }\n    }\n    :host .result-root.with-sections.display-grid.image-small.image-small atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-icon.image-small atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-none.image-small atomic-result-section-visual {\n      width: 100%;\n    }\n    :host .result-root.with-sections.display-grid.image-small.image-none atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-icon.image-none atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-none.image-none atomic-result-section-visual {\n      display: none;\n    }\n  }\n  @media not all and (width >= 1024px) {\n    :host .result-root.with-sections.display-grid.image-small, :host .result-root.with-sections.display-grid.image-icon, :host .result-root.with-sections.display-grid.image-none {\n      grid-template-areas: 'badges' 'visual' 'title' 'title-metadata' 'emphasized' 'excerpt' 'children' 'bottom-metadata' 'actions';\n      grid-template-columns: 100%;\n      grid-template-rows: repeat(9, auto);\n    }\n    :host .result-root.with-sections.display-grid.image-small.density-comfortable atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-icon.density-comfortable atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-none.density-comfortable atomic-result-section-visual {\n      margin-bottom: 1rem;\n    }\n    :host .result-root.with-sections.display-grid.image-small.density-comfortable.image-small atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-icon.density-comfortable.image-small atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-none.density-comfortable.image-small atomic-result-section-visual {\n      width: 10.25rem;\n      height: 10.25rem;\n    }\n    :host .result-root.with-sections.display-grid.image-small.density-comfortable atomic-result-section-badges, :host .result-root.with-sections.display-grid.image-icon.density-comfortable atomic-result-section-badges, :host .result-root.with-sections.display-grid.image-none.density-comfortable atomic-result-section-badges {\n      --font-size: var(--atomic-text-sm);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      margin-bottom: 1rem;\n      --row-height: 2rem;\n    }\n    :host .result-root.with-sections.display-grid.image-small.density-comfortable atomic-result-section-actions, :host .result-root.with-sections.display-grid.image-icon.density-comfortable atomic-result-section-actions, :host .result-root.with-sections.display-grid.image-none.density-comfortable atomic-result-section-actions {\n      --font-size: var(--atomic-text-base);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      margin-top: 1.25rem;\n      --row-height: 2rem;\n    }\n    :host .result-root.with-sections.display-grid.image-small.density-comfortable atomic-result-section-title, :host .result-root.with-sections.display-grid.image-icon.density-comfortable atomic-result-section-title, :host .result-root.with-sections.display-grid.image-none.density-comfortable atomic-result-section-title {\n      --font-size: var(--atomic-text-lg);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      max-height: 3rem;\n      overflow: hidden;\n      display: -webkit-box;\n      -webkit-box-orient: vertical;\n      -webkit-line-clamp: 2;\n    }\n    :host .result-root.with-sections.display-grid.image-small.density-comfortable atomic-result-section-title-metadata, :host .result-root.with-sections.display-grid.image-icon.density-comfortable atomic-result-section-title-metadata, :host .result-root.with-sections.display-grid.image-none.density-comfortable atomic-result-section-title-metadata {\n      --font-size: var(--atomic-text-sm);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      margin-top: 0.475rem;\n    }\n    :host .result-root.with-sections.display-grid.image-small.density-comfortable atomic-result-section-emphasized, :host .result-root.with-sections.display-grid.image-icon.density-comfortable atomic-result-section-emphasized, :host .result-root.with-sections.display-grid.image-none.density-comfortable atomic-result-section-emphasized {\n      font-weight: 500;\n      --font-size: var(--atomic-text-2xl);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n    }\n    :host .result-root.with-sections.display-grid.image-small.density-comfortable atomic-result-section-excerpt, :host .result-root.with-sections.display-grid.image-icon.density-comfortable atomic-result-section-excerpt, :host .result-root.with-sections.display-grid.image-none.density-comfortable atomic-result-section-excerpt {\n      --font-size: var(--atomic-text-base);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      margin-top: 1.25rem;\n      overflow: hidden;\n      display: -webkit-box;\n      -webkit-box-orient: vertical;\n      -webkit-line-clamp: 2;\n    }\n    :host .result-root.with-sections.display-grid.image-small.density-comfortable atomic-result-section-bottom-metadata, :host .result-root.with-sections.display-grid.image-icon.density-comfortable atomic-result-section-bottom-metadata, :host .result-root.with-sections.display-grid.image-none.density-comfortable atomic-result-section-bottom-metadata {\n      --font-size: var(--atomic-text-sm);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      margin-top: 1rem;\n      max-height: 3rem;\n    }\n    :host .result-root.with-sections.display-grid.image-small.density-comfortable atomic-result-section-children, :host .result-root.with-sections.display-grid.image-icon.density-comfortable atomic-result-section-children, :host .result-root.with-sections.display-grid.image-none.density-comfortable atomic-result-section-children {\n      --font-size: var(--atomic-text-base);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      margin-top: 1.25rem;\n    }\n    :host .result-root.with-sections.display-grid.image-small.density-normal atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-icon.density-normal atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-none.density-normal atomic-result-section-visual {\n      margin-bottom: 0.75rem;\n    }\n    :host .result-root.with-sections.display-grid.image-small.density-normal.image-small atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-icon.density-normal.image-small atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-none.density-normal.image-small atomic-result-section-visual {\n      width: 10.25rem;\n      height: 10.25rem;\n    }\n    :host .result-root.with-sections.display-grid.image-small.density-normal atomic-result-section-badges, :host .result-root.with-sections.display-grid.image-icon.density-normal atomic-result-section-badges, :host .result-root.with-sections.display-grid.image-none.density-normal atomic-result-section-badges {\n      --font-size: var(--atomic-text-sm);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      margin-bottom: 1rem;\n      --row-height: 2rem;\n    }\n    :host .result-root.with-sections.display-grid.image-small.density-normal atomic-result-section-actions, :host .result-root.with-sections.display-grid.image-icon.density-normal atomic-result-section-actions, :host .result-root.with-sections.display-grid.image-none.density-normal atomic-result-section-actions {\n      --font-size: var(--atomic-text-base);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      margin-top: 1rem;\n      --row-height: 2rem;\n    }\n    :host .result-root.with-sections.display-grid.image-small.density-normal atomic-result-section-title, :host .result-root.with-sections.display-grid.image-icon.density-normal atomic-result-section-title, :host .result-root.with-sections.display-grid.image-none.density-normal atomic-result-section-title {\n      --font-size: var(--atomic-text-lg);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      max-height: 3rem;\n      overflow: hidden;\n      display: -webkit-box;\n      -webkit-box-orient: vertical;\n      -webkit-line-clamp: 2;\n    }\n    :host .result-root.with-sections.display-grid.image-small.density-normal atomic-result-section-title-metadata, :host .result-root.with-sections.display-grid.image-icon.density-normal atomic-result-section-title-metadata, :host .result-root.with-sections.display-grid.image-none.density-normal atomic-result-section-title-metadata {\n      --font-size: var(--atomic-text-sm);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      margin-top: 0.475rem;\n    }\n    :host .result-root.with-sections.display-grid.image-small.density-normal atomic-result-section-emphasized, :host .result-root.with-sections.display-grid.image-icon.density-normal atomic-result-section-emphasized, :host .result-root.with-sections.display-grid.image-none.density-normal atomic-result-section-emphasized {\n      font-weight: 500;\n      --font-size: var(--atomic-text-2xl);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n    }\n    :host .result-root.with-sections.display-grid.image-small.density-normal atomic-result-section-excerpt, :host .result-root.with-sections.display-grid.image-icon.density-normal atomic-result-section-excerpt, :host .result-root.with-sections.display-grid.image-none.density-normal atomic-result-section-excerpt {\n      --font-size: var(--atomic-text-base);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      margin-top: 1rem;\n      overflow: hidden;\n      display: -webkit-box;\n      -webkit-box-orient: vertical;\n      -webkit-line-clamp: 2;\n    }\n    :host .result-root.with-sections.display-grid.image-small.density-normal atomic-result-section-bottom-metadata, :host .result-root.with-sections.display-grid.image-icon.density-normal atomic-result-section-bottom-metadata, :host .result-root.with-sections.display-grid.image-none.density-normal atomic-result-section-bottom-metadata {\n      --font-size: var(--atomic-text-sm);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      margin-top: 0.75rem;\n      max-height: 3rem;\n    }\n    :host .result-root.with-sections.display-grid.image-small.density-normal atomic-result-section-children, :host .result-root.with-sections.display-grid.image-icon.density-normal atomic-result-section-children, :host .result-root.with-sections.display-grid.image-none.density-normal atomic-result-section-children {\n      --font-size: var(--atomic-text-base);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      margin-top: 1rem;\n    }\n    :host .result-root.with-sections.display-grid.image-small.density-compact atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-icon.density-compact atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-none.density-compact atomic-result-section-visual {\n      margin-bottom: 0.5rem;\n    }\n    :host .result-root.with-sections.display-grid.image-small.density-compact.image-large atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-icon.density-compact.image-large atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-none.density-compact.image-large atomic-result-section-visual {\n      width: 100%;\n    }\n    :host .result-root.with-sections.display-grid.image-small.density-compact.image-small atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-icon.density-compact.image-small atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-none.density-compact.image-small atomic-result-section-visual {\n      width: 10.25rem;\n      height: 10.25rem;\n    }\n    :host .result-root.with-sections.display-grid.image-small.density-compact atomic-result-section-badges, :host .result-root.with-sections.display-grid.image-icon.density-compact atomic-result-section-badges, :host .result-root.with-sections.display-grid.image-none.density-compact atomic-result-section-badges {\n      --font-size: var(--atomic-text-sm);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      margin-bottom: 1rem;\n      --row-height: 2rem;\n    }\n    :host .result-root.with-sections.display-grid.image-small.density-compact atomic-result-section-actions, :host .result-root.with-sections.display-grid.image-icon.density-compact atomic-result-section-actions, :host .result-root.with-sections.display-grid.image-none.density-compact atomic-result-section-actions {\n      --font-size: var(--atomic-text-base);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      margin-top: 0.75rem;\n      --row-height: 2rem;\n    }\n    :host .result-root.with-sections.display-grid.image-small.density-compact atomic-result-section-title, :host .result-root.with-sections.display-grid.image-icon.density-compact atomic-result-section-title, :host .result-root.with-sections.display-grid.image-none.density-compact atomic-result-section-title {\n      --font-size: var(--atomic-text-lg);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      max-height: 3rem;\n      overflow: hidden;\n      display: -webkit-box;\n      -webkit-box-orient: vertical;\n      -webkit-line-clamp: 2;\n    }\n    :host .result-root.with-sections.display-grid.image-small.density-compact atomic-result-section-title-metadata, :host .result-root.with-sections.display-grid.image-icon.density-compact atomic-result-section-title-metadata, :host .result-root.with-sections.display-grid.image-none.density-compact atomic-result-section-title-metadata {\n      --font-size: var(--atomic-text-sm);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      margin-top: 0.475rem;\n    }\n    :host .result-root.with-sections.display-grid.image-small.density-compact atomic-result-section-emphasized, :host .result-root.with-sections.display-grid.image-icon.density-compact atomic-result-section-emphasized, :host .result-root.with-sections.display-grid.image-none.density-compact atomic-result-section-emphasized {\n      font-weight: 500;\n      --font-size: var(--atomic-text-2xl);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n    }\n    :host .result-root.with-sections.display-grid.image-small.density-compact atomic-result-section-excerpt, :host .result-root.with-sections.display-grid.image-icon.density-compact atomic-result-section-excerpt, :host .result-root.with-sections.display-grid.image-none.density-compact atomic-result-section-excerpt {\n      --font-size: var(--atomic-text-base);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      margin-top: 0.75rem;\n      overflow: hidden;\n      display: -webkit-box;\n      -webkit-box-orient: vertical;\n      -webkit-line-clamp: 1;\n    }\n    :host .result-root.with-sections.display-grid.image-small.density-compact atomic-result-section-bottom-metadata, :host .result-root.with-sections.display-grid.image-icon.density-compact atomic-result-section-bottom-metadata, :host .result-root.with-sections.display-grid.image-none.density-compact atomic-result-section-bottom-metadata {\n      --font-size: var(--atomic-text-sm);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      margin-top: 0.5rem;\n      max-height: 3rem;\n    }\n    :host .result-root.with-sections.display-grid.image-small.density-compact atomic-result-section-children, :host .result-root.with-sections.display-grid.image-icon.density-compact atomic-result-section-children, :host .result-root.with-sections.display-grid.image-none.density-compact atomic-result-section-children {\n      --font-size: var(--atomic-text-base);\n      font-size: var(--font-size);\n      --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n      line-height: var(--line-height);\n      margin-top: 0.75rem;\n    }\n    @supports not (aspect-ratio: 1 / 1) {\n      :host .result-root.with-sections.display-grid.image-small.image-small atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-icon.image-small atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-none.image-small atomic-result-section-visual {\n        height: 9rem;\n      }\n    }\n    @supports not (aspect-ratio: 1 / 1) {\n      :host .result-root.with-sections.display-grid.image-small.image-small atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-icon.image-small atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-none.image-small atomic-result-section-visual {\n        height: 9rem;\n      }\n    }\n    :host .result-root.with-sections.display-grid.image-small.image-small atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-icon.image-small atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-none.image-small atomic-result-section-visual {\n      aspect-ratio: 1 / 1;\n      height: auto;\n    }\n    @supports not (aspect-ratio: 1 / 1) {\n      :host .result-root.with-sections.display-grid.image-small.image-small atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-icon.image-small atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-none.image-small atomic-result-section-visual {\n        height: 9rem;\n      }\n    }\n    :host .result-root.with-sections.display-grid.image-small.image-small atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-icon.image-small atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-none.image-small atomic-result-section-visual {\n      width: 100%;\n    }\n    :host .result-root.with-sections.display-grid.image-small.image-icon atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-icon.image-icon atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-none.image-icon atomic-result-section-visual {\n      width: 2rem;\n      height: 2rem;\n    }\n    :host .result-root.with-sections.display-grid.image-small.image-none atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-icon.image-none atomic-result-section-visual, :host .result-root.with-sections.display-grid.image-none.image-none atomic-result-section-visual {\n      display: none;\n    }\n  }\n  :host .result-root.with-sections.display-table.image-large.density-compact atomic-result-section-visual {\n    width: 10.25rem;\n    height: 10.25rem;\n  }\n  :host .result-root.with-sections.display-table atomic-result-section-children atomic-result-children::part(children-root), :host .result-root.with-sections.display-table atomic-result-section-children atomic-insight-result-children::part(children-root) {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n    border-color: var(--atomic-neutral);\n    border-radius: 16px;\n  }\n  :host .result-root.with-sections.display-table.density-comfortable atomic-result-section-visual {\n    margin-right: 1.5rem;\n  }\n  :host .result-root.with-sections.display-table.density-comfortable atomic-result-section-badges, :host .result-root.with-sections.display-table.density-comfortable atomic-result-section-actions {\n    margin-bottom: 1.5rem;\n    --row-height: 2rem;\n  }\n  :host .result-root.with-sections.display-table.density-comfortable atomic-result-section-title {\n    --font-size: var(--atomic-text-2xl);\n    font-size: var(--font-size);\n    --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n    line-height: var(--line-height);\n  }\n  :host .result-root.with-sections.display-table.density-comfortable atomic-result-section-excerpt {\n    margin-top: 1.75rem;\n    --font-size: var(--atomic-text-lg);\n    font-size: var(--font-size);\n    --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n    line-height: var(--line-height);\n    max-height: 4.5rem;\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 3;\n  }\n  :host .result-root.with-sections.display-table.density-comfortable atomic-result-section-bottom-metadata {\n    margin-top: 1.25rem;\n    --font-size: var(--atomic-text-sm);\n    font-size: var(--font-size);\n    --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n    line-height: var(--line-height);\n    max-height: 4rem;\n  }\n  :host .result-root.with-sections.display-table.density-comfortable atomic-result-section-title-metadata {\n    margin-top: 0.475rem;\n  }\n  :host .result-root.with-sections.display-table.density-comfortable atomic-result-children::part(children-root), :host .result-root.with-sections.display-table.density-comfortable atomic-insight-result-children::part(children-root) {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n    border-color: var(--atomic-neutral);\n    border-radius: 16px;\n    margin-top: 1.25rem;\n    padding: 1.75rem;\n  }\n  :host .result-root.with-sections.display-table.density-comfortable atomic-result-children::part(show-hide-button), :host .result-root.with-sections.display-table.density-comfortable atomic-insight-result-children::part(show-hide-button) {\n    margin-top: 1.25rem;\n    margin-bottom: 1.25rem;\n  }\n  :host .result-root.with-sections.display-table.density-comfortable.child-result:not(.last-child), :host .result-root.with-sections.display-table.density-comfortable .placeholder {\n    margin-bottom: 1.75rem;\n  }\n  :host .result-root.with-sections.display-table.density-comfortable atomic-result-children::part(children-root), :host .result-root.with-sections.display-table.density-comfortable atomic-insight-result-children::part(children-root) {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n    border-color: var(--atomic-neutral);\n    border-radius: 16px;\n    margin-top: 1.25rem;\n    padding: 1.75rem;\n  }\n  :host .result-root.with-sections.display-table.density-comfortable atomic-result-children::part(show-hide-button), :host .result-root.with-sections.display-table.density-comfortable atomic-insight-result-children::part(show-hide-button) {\n    margin-top: 1.25rem;\n    margin-bottom: 1.25rem;\n  }\n  :host .result-root.with-sections.display-table.density-comfortable.child-result:not(.last-child), :host .result-root.with-sections.display-table.density-comfortable .placeholder {\n    margin-bottom: 1.75rem;\n  }\n  :host .result-root.with-sections.display-table.density-normal atomic-result-section-visual {\n    margin-right: 1rem;\n  }\n  :host .result-root.with-sections.display-table.density-normal atomic-result-section-badges, :host .result-root.with-sections.display-table.density-normal atomic-result-section-actions {\n    margin-bottom: 1rem;\n    --row-height: 2rem;\n  }\n  :host .result-root.with-sections.display-table.density-normal atomic-result-section-title {\n    --font-size: var(--atomic-text-xl);\n    font-size: var(--font-size);\n    --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n    line-height: var(--line-height);\n  }\n  :host .result-root.with-sections.display-table.density-normal atomic-result-section-excerpt {\n    margin-top: 1.25rem;\n    --font-size: var(--atomic-text-base);\n    font-size: var(--font-size);\n    --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n    line-height: var(--line-height);\n    max-height: 2.5rem;\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 2;\n  }\n  :host .result-root.with-sections.display-table.density-normal atomic-result-section-bottom-metadata {\n    margin-top: 0.875rem;\n    --font-size: var(--atomic-text-sm);\n    font-size: var(--font-size);\n    --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n    line-height: var(--line-height);\n    max-height: 3.5rem;\n  }\n  :host .result-root.with-sections.display-table.density-normal atomic-result-section-title-metadata {\n    margin-top: 0.475rem;\n  }\n  :host .result-root.with-sections.display-table.density-normal atomic-result-children::part(children-root), :host .result-root.with-sections.display-table.density-normal atomic-insight-result-children::part(children-root) {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n    border-color: var(--atomic-neutral);\n    border-radius: 16px;\n    margin-top: 0.875rem;\n    padding: 1.5rem;\n  }\n  :host .result-root.with-sections.display-table.density-normal atomic-result-children::part(show-hide-button), :host .result-root.with-sections.display-table.density-normal atomic-insight-result-children::part(show-hide-button) {\n    margin-top: 0.875rem;\n    margin-bottom: 0.875rem;\n  }\n  :host .result-root.with-sections.display-table.density-normal.child-result:not(.last-child), :host .result-root.with-sections.display-table.density-normal .placeholder {\n    margin-bottom: 1.5rem;\n  }\n  :host .result-root.with-sections.display-table.density-normal atomic-result-children::part(children-root), :host .result-root.with-sections.display-table.density-normal atomic-insight-result-children::part(children-root) {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n    border-color: var(--atomic-neutral);\n    border-radius: 16px;\n    margin-top: 0.875rem;\n    padding: 1.5rem;\n  }\n  :host .result-root.with-sections.display-table.density-normal atomic-result-children::part(show-hide-button), :host .result-root.with-sections.display-table.density-normal atomic-insight-result-children::part(show-hide-button) {\n    margin-top: 0.875rem;\n    margin-bottom: 0.875rem;\n  }\n  :host .result-root.with-sections.display-table.density-normal.child-result:not(.last-child), :host .result-root.with-sections.display-table.density-normal .placeholder {\n    margin-bottom: 1.5rem;\n  }\n  :host .result-root.with-sections.display-table.density-compact atomic-result-section-visual {\n    margin-right: 1rem;\n  }\n  :host .result-root.with-sections.display-table.density-compact atomic-result-section-badges, :host .result-root.with-sections.display-table.density-compact atomic-result-section-actions {\n    margin-bottom: 1rem;\n    --row-height: 2rem;\n  }\n  :host .result-root.with-sections.display-table.density-compact atomic-result-section-title {\n    --font-size: var(--atomic-text-xl);\n    font-size: var(--font-size);\n    --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n    line-height: var(--line-height);\n  }\n  :host .result-root.with-sections.display-table.density-compact atomic-result-section-excerpt {\n    margin-top: 1rem;\n    --font-size: var(--atomic-text-base);\n    font-size: var(--font-size);\n    --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n    line-height: var(--line-height);\n    max-height: 1.25rem;\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 1;\n  }\n  :host .result-root.with-sections.display-table.density-compact atomic-result-section-bottom-metadata {\n    margin-top: 0.6875rem;\n    --font-size: var(--atomic-text-sm);\n    font-size: var(--font-size);\n    --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n    line-height: var(--line-height);\n    max-height: 3.25rem;\n  }\n  :host .result-root.with-sections.display-table.density-compact atomic-result-section-title-metadata {\n    margin-top: 0.475rem;\n  }\n  :host .result-root.with-sections.display-table.density-compact atomic-result-children::part(children-root), :host .result-root.with-sections.display-table.density-compact atomic-insight-result-children::part(children-root) {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n    border-color: var(--atomic-neutral);\n    border-radius: 16px;\n    margin-top: 0.475rem;\n    padding: 1rem;\n  }\n  :host .result-root.with-sections.display-table.density-compact atomic-result-children::part(show-hide-button), :host .result-root.with-sections.display-table.density-compact atomic-insight-result-children::part(show-hide-button) {\n    margin-top: 0.475rem;\n    margin-bottom: 0.475rem;\n  }\n  :host .result-root.with-sections.display-table.density-compact.child-result:not(.last-child), :host .result-root.with-sections.display-table.density-compact .placeholder {\n    margin-bottom: 1rem;\n  }\n  :host .result-root.with-sections.display-table.density-compact atomic-result-children::part(children-root), :host .result-root.with-sections.display-table.density-compact atomic-insight-result-children::part(children-root) {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n    border-color: var(--atomic-neutral);\n    border-radius: 16px;\n    margin-top: 0.475rem;\n    padding: 1rem;\n  }\n  :host .result-root.with-sections.display-table.density-compact atomic-result-children::part(show-hide-button), :host .result-root.with-sections.display-table.density-compact atomic-insight-result-children::part(show-hide-button) {\n    margin-top: 0.475rem;\n    margin-bottom: 0.475rem;\n  }\n  :host .result-root.with-sections.display-table.density-compact.child-result:not(.last-child), :host .result-root.with-sections.display-table.density-compact .placeholder {\n    margin-bottom: 1rem;\n  }\n  :host .result-root.with-sections.display-table.image-large, :host .result-root.with-sections.display-table.image-small {\n    grid-template-areas: 'badges badges          .               actions' 'visual title           title           title' 'visual title-metadata  title-metadata  title-metadata' 'visual emphasized      emphasized      emphasized' 'visual excerpt         excerpt         excerpt' 'visual bottom-metadata bottom-metadata bottom-metadata' 'visual children        children        children';\n    grid-template-columns: minmax(0, min-content) auto 1fr auto;\n    grid-template-rows: repeat(6, auto) minmax(0, 1fr);\n  }\n  :host .result-root.with-sections.display-table.image-large.density-comfortable atomic-result-section-visual, :host .result-root.with-sections.display-table.image-large.density-normal atomic-result-section-visual {\n    width: 20.375rem;\n    height: 20.375rem;\n  }\n  :host .result-root.with-sections.display-table.image-small atomic-result-section-visual, :host .result-root.with-sections.display-table.image-large.density-compact atomic-result-section-visual {\n    width: 10rem;\n    height: 10rem;\n  }\n  :host .result-root.with-sections.display-table.image-icon {\n    grid-template-areas: 'badges badges          .               actions' 'visual title           title           title' 'visual title-metadata  title-metadata  title-metadata' 'visual emphasized      emphasized      emphasized' 'visual excerpt         excerpt         excerpt' 'visual bottom-metadata bottom-metadata bottom-metadata' 'visual children        children        children';\n    grid-template-columns: minmax(0, min-content) auto 1fr auto;\n    grid-template-rows: repeat(7, minmax(0, min-content));\n  }\n  :host .result-root.with-sections.display-table.image-icon atomic-result-section-visual {\n    width: 2rem;\n    height: 2rem;\n  }\n  :host .result-root.with-sections.display-table.image-none {\n    grid-template-areas: 'badges          .               actions' 'title           title           title' 'title-metadata  title-metadata  title-metadata' 'emphasized      emphasized      emphasized' 'excerpt         excerpt         excerpt' 'bottom-metadata bottom-metadata bottom-metadata' 'children        children        children';\n    grid-template-columns: auto 1fr auto;\n    grid-template-rows: repeat(6, auto);\n  }\n  :host .result-root.with-sections.display-table.image-none atomic-result-section-visual {\n    display: none;\n  }\n  :host .result-root atomic-table-element {\n    display: none;\n  }\n  :host .link-container {\n    display: none;\n  }\n}\n@property --tw-font-weight {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-border-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    *, ::before, ::after, ::backdrop {\n      --tw-font-weight: initial;\n      --tw-border-style: solid;\n    }\n  }\n}\n";
 const AtomicResultStyle0 = atomicResultCss;

package/dist/cjs/atomic-search-box-query-suggestions.cjs.entry.js ADDED Viewed

@@ -0,0 +1,76 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+const index = require('./index-757bc886.js');
+const headless = require('@coveo/headless');
+const search = require('./search-a4774f02.js');
+const stencilQuerySuggestions = require('./stencil-query-suggestions-03268ecc.js');
+const suggestionsEvents = require('./suggestions-events-63dd0640.js');
+require('./string-utils-bdf08f8c.js');
+require('./dom-utils-d4790328.js');
+require('./event-utils-9bfcf3c5.js');
+const AtomicSearchBoxQuerySuggestions = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.error = undefined;
+        this.icon = undefined;
+        this.maxWithQuery = undefined;
+        this.maxWithoutQuery = undefined;
+    }
+    componentWillLoad() {
+        try {
+            suggestionsEvents.dispatchSearchBoxSuggestionsEvent((bindings) => {
+                this.bindings = bindings;
+                return this.initialize();
+            }, this.host, ['atomic-search-box']);
+        }
+        catch (error) {
+            this.error = error;
+        }
+    }
+    initialize() {
+        const engine = this.bindings.engine;
+        const { registerQuerySuggest, fetchQuerySuggestions } = headless.loadQuerySuggestActions(engine);
+        engine.dispatch(registerQuerySuggest({
+            id: this.bindings.id,
+            count: this.bindings.numberOfQueries,
+        }));
+        return {
+            position: Array.from(this.host.parentNode.children).indexOf(this.host),
+            onInput: () => engine.dispatch(fetchQuerySuggestions({
+                id: this.bindings.id,
+            })),
+            renderItems: () => this.renderItems(),
+        };
+    }
+    renderItems() {
+        const hasQuery = this.bindings.searchBoxController.state.value !== '';
+        const max = hasQuery ? this.maxWithQuery : this.maxWithoutQuery;
+        return this.bindings.searchBoxController.state.suggestions
+            .slice(0, max)
+            .map((suggestion) => this.renderItem(suggestion));
+    }
+    renderItem(suggestion) {
+        const hasQuery = this.bindings.searchBoxController.state.value !== '';
+        const partialItem = stencilQuerySuggestions.getPartialSearchBoxSuggestionElement(suggestion, this.bindings.i18n);
+        return {
+            ...partialItem,
+            content: (index.h(stencilQuerySuggestions.QuerySuggestionContainer, null, index.h(stencilQuerySuggestions.QuerySuggestionIcon, { icon: this.icon || search.SearchIcon, hasSuggestion: this.bindings.getSuggestions().length > 1 }), index.h(stencilQuerySuggestions.QuerySuggestionText, { suggestion: suggestion, hasQuery: hasQuery }))),
+            onSelect: () => {
+                this.bindings.searchBoxController.selectSuggestion(suggestion.rawValue);
+            },
+        };
+    }
+    render() {
+        if (this.error) {
+            return (index.h("atomic-component-error", { key: '978c37aaaef6910704197c5aa1a9e82307428cd2', element: this.host, error: this.error }));
+        }
+    }
+    get host() { return index.getElement(this); }
+};
+exports.atomic_search_box_query_suggestions = AtomicSearchBoxQuerySuggestions;
+//# sourceMappingURL=atomic-search-box-query-suggestions.cjs.entry.js.map

package/dist/cjs/atomic-search-box-query-suggestions.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"atomic-search-box-query-suggestions.entry.cjs.js","mappings":";;;;;;;;;;;;;MA8Ba,+BAA+B;;;;;;;;IAwB1C,iBAAiB;QACf,IAAI;YACFA,mDAAiC,CAC/B,CAAC,QAAQ;gBACP,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;gBACzB,OAAO,IAAI,CAAC,UAAU,EAAE,CAAC;aAC1B,EACD,IAAI,CAAC,IAAI,EACT,CAAC,mBAAmB,CAAC,CACtB,CAAC;SACH;QAAC,OAAO,KAAK,EAAE;YACd,IAAI,CAAC,KAAK,GAAG,KAAc,CAAC;SAC7B;KACF;IAEO,UAAU;QAChB,MAAM,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,MAG3B,CAAC;QACH,MAAM,EAAC,oBAAoB,EAAE,qBAAqB,EAAC,GACjDC,gCAAuB,CAAC,MAAM,CAAC,CAAC;QAElC,MAAM,CAAC,QAAQ,CACb,oBAAoB,CAAC;YACnB,EAAE,EAAE,IAAI,CAAC,QAAQ,CAAC,EAAE;YACpB,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,eAAe;SACrC,CAAC,CACH,CAAC;QAEF,OAAO;YACL,QAAQ,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,UAAW,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;YACvE,OAAO,EAAE,MACP,MAAM,CAAC,QAAQ,CACb,qBAAqB,CAAC;gBACpB,EAAE,EAAE,IAAI,CAAC,QAAQ,CAAC,EAAE;aACrB,CAAC,CACH;YACH,WAAW,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE;SACtC,CAAC;KACH;IAEO,WAAW;QACjB,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,mBAAmB,CAAC,KAAK,CAAC,KAAK,KAAK,EAAE,CAAC;QACtE,MAAM,GAAG,GAAG,QAAQ,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,eAAe,CAAC;QAChE,OAAO,IAAI,CAAC,QAAQ,CAAC,mBAAmB,CAAC,KAAK,CAAC,WAAW;aACvD,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC;aACb,GAAG,CAAC,CAAC,UAAU,KAAK,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC,CAAC;KACrD;IAEO,UAAU,CAAC,UAAsB;QACvC,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,mBAAmB,CAAC,KAAK,CAAC,KAAK,KAAK,EAAE,CAAC;QACtE,MAAM,WAAW,GAAGC,4DAAoC,CACtD,UAAU,EACV,IAAI,CAAC,QAAQ,CAAC,IAAI,CACnB,CAAC;QAEF,OAAO;YACL,GAAG,WAAW;YACd,OAAO,GACLC,QAACC,gDAAwB,QACvBD,QAACE,2CAAmB,IAClB,IAAI,EAAE,IAAI,CAAC,IAAI,IAAIC,iBAAU,EAC7B,aAAa,EAAE,IAAI,CAAC,QAAQ,CAAC,cAAc,EAAE,CAAC,MAAM,GAAG,CAAC,GACxD,EAEFH,QAACI,2CAAmB,IAAC,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAC1C,CAC5B;YACD,QAAQ,EAAE;gBACR,IAAI,CAAC,QAAQ,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;aACzE;SACF,CAAC;KACH;IAEM,MAAM;QACX,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,QACEJ,qFACE,OAAO,EAAE,IAAI,CAAC,IAAI,EAClB,KAAK,EAAE,IAAI,CAAC,KAAK,GACO,EAC1B;SACH;KACF;;;;;;","names":["dispatchSearchBoxSuggestionsEvent","loadQuerySuggestActions","getPartialSearchBoxSuggestionElement","h","QuerySuggestionContainer","QuerySuggestionIcon","SearchIcon","QuerySuggestionText"],"sources":["src/components/search/search-box-suggestions/atomic-search-box-query-suggestions/atomic-search-box-query-suggestions.tsx"],"sourcesContent":["import {\n loadQuerySuggestActions,\n SearchBox,\n SearchEngine,\n Suggestion,\n} from '@coveo/headless';\nimport {Component, Element, Prop, State, h} from '@stencil/core';\nimport SearchIcon from '../../../../images/search.svg';\nimport {\n getPartialSearchBoxSuggestionElement,\n QuerySuggestionContainer,\n QuerySuggestionIcon,\n QuerySuggestionText,\n} from '../../../common/suggestions/stencil-query-suggestions';\nimport {\n dispatchSearchBoxSuggestionsEvent,\n} from '../../../common/suggestions/suggestions-events';\nimport type {\n SearchBoxSuggestionElement,\n SearchBoxSuggestions,\n SearchBoxSuggestionsBindings,\n} from '../../../common/suggestions/suggestions-types';\n\n/**\n * The `atomic-search-box-query-suggestions` component can be added as a child of an `atomic-search-box` component, allowing for the configuration of query suggestion behavior.\n */\n@Component({\n tag: 'atomic-search-box-query-suggestions',\n shadow: true,\n})\nexport class AtomicSearchBoxQuerySuggestions {\n private bindings!: SearchBoxSuggestionsBindings<SearchBox>;\n @Element() private host!: HTMLElement;\n\n @State() public error!: Error;\n\n /**\n * The SVG icon to display.\n *\n * - Use a value that starts with `http://`, `https://`, `./`, or `../`, to fetch and display an icon from a given location.\n * - Use a value that starts with `assets://`, to display an icon from the Atomic package.\n * - Use a stringified SVG to display it directly.\n */\n @Prop() public icon?: string;\n\n /**\n * The maximum number of suggestions that will be displayed if the user has typed something into the input field.\n */\n @Prop({reflect: true}) public maxWithQuery?: number;\n /**\n * The maximum number of suggestions that will be displayed initially when the input field is empty.\n */\n @Prop({reflect: true}) public maxWithoutQuery?: number;\n\n componentWillLoad() {\n try {\n dispatchSearchBoxSuggestionsEvent<SearchBox>(\n (bindings) => {\n this.bindings = bindings;\n return this.initialize();\n },\n this.host,\n ['atomic-search-box']\n );\n } catch (error) {\n this.error = error as Error;\n }\n }\n\n private initialize(): SearchBoxSuggestions {\n const engine = this.bindings.engine as SearchEngine<{\n querySet: string;\n querySuggest: string;\n }>;\n const {registerQuerySuggest, fetchQuerySuggestions} =\n loadQuerySuggestActions(engine);\n\n engine.dispatch(\n registerQuerySuggest({\n id: this.bindings.id,\n count: this.bindings.numberOfQueries,\n })\n );\n\n return {\n position: Array.from(this.host.parentNode!.children).indexOf(this.host),\n onInput: () =>\n engine.dispatch(\n fetchQuerySuggestions({\n id: this.bindings.id,\n })\n ),\n renderItems: () => this.renderItems(),\n };\n }\n\n private renderItems(): SearchBoxSuggestionElement[] {\n const hasQuery = this.bindings.searchBoxController.state.value !== '';\n const max = hasQuery ? this.maxWithQuery : this.maxWithoutQuery;\n return this.bindings.searchBoxController.state.suggestions\n .slice(0, max)\n .map((suggestion) => this.renderItem(suggestion));\n }\n\n private renderItem(suggestion: Suggestion) {\n const hasQuery = this.bindings.searchBoxController.state.value !== '';\n const partialItem = getPartialSearchBoxSuggestionElement(\n suggestion,\n this.bindings.i18n\n );\n\n return {\n ...partialItem,\n content: (\n <QuerySuggestionContainer>\n <QuerySuggestionIcon\n icon={this.icon || SearchIcon}\n hasSuggestion={this.bindings.getSuggestions().length > 1}\n />\n\n <QuerySuggestionText suggestion={suggestion} hasQuery={hasQuery} />\n </QuerySuggestionContainer>\n ),\n onSelect: () => {\n this.bindings.searchBoxController.selectSuggestion(suggestion.rawValue);\n },\n };\n }\n\n public render() {\n if (this.error) {\n return (\n <atomic-component-error\n element={this.host}\n error={this.error}\n ></atomic-component-error>\n );\n }\n }\n}\n"],"version":3}

package/dist/cjs/atomic-search-box.cjs.entry.js CHANGED Viewed

@@ -11,8 +11,8 @@ const localStorageUtils = require('./local-storage-utils-380ce22b.js');
 const replaceBreakpointUtils = require('./replace-breakpoint-utils-7a084f54.js');
 const stencilAccessibilityUtils = require('./stencil-accessibility-utils-aa4c9f6c.js');
 const utils = require('./utils-7153ae6b.js');
-const stencilSuggestionManager = require('./stencil-suggestion-manager-2cba6d69.js');
-const stencilButton = require('./stencil-button-94b89acc.js');
+const stencilSuggestionManager = require('./stencil-suggestion-manager-3e1cf81e.js');
+const stencilButton = require('./stencil-button-a114783e.js');
 const suggestionsUtils = require('./suggestions-utils-61000808.js');
 const slotUtils = require('./slot-utils-a30cb814.js');
 require('./dom-utils-d4790328.js');
@@ -22,7 +22,6 @@ require('./initialization-lit-stencil-common-utils-730030b0.js');
 require('./purify-85b542e2.js');
 require('./_commonjsHelpers-b3309d7b.js');
 require('./debounce-utils-d26bcad4.js');
-require('./stencil-button-style-ba779fe2.js');
 const SubmitButton = ({ bindings, disabled, onClick, }) => (index.h("div", { part: "submit-button-wrapper", class: "mr-2 flex items-center justify-center py-2" },
     index.h(stencilButton.Button, { style: "text-primary", class: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full", part: "submit-button", ariaLabel: bindings.i18n.t('search'), onClick: () => {
@@ -445,14 +444,14 @@ const AtomicSearchBox = class {
         if (!this.suggestionManager.suggestions.length) {
             this.registerSearchboxSuggestionEvents();
         }
-        return (index.h(index.Host, { key: '60105569e410916a4118616a1272ecf11aa9776b' }, this.renderAbsolutePositionSpacer(), [
-            index.h(stencilSuggestionManager.SearchBoxWrapper, { key: 'b86013c465025b0f72853c748bdcbbc459e5442a', disabled: isDisabled, onFocusout: (event) => {
+        return (index.h(index.Host, { key: 'a8b56eedaf9c7d7b3732ef890a738aacac475e4d' }, this.renderAbsolutePositionSpacer(), [
+            index.h(stencilSuggestionManager.SearchBoxWrapper, { key: '415eb5ec3adb9c1a749df77aebdf886b1a9ca76b', disabled: isDisabled, onFocusout: (event) => {
                     if (!utils.isFocusingOut(event)) {
                         return;
                     }
                     this.suggestionManager.clearSuggestions();
                     this.isExpanded = false;
-                } }, this.renderTextBox(searchLabel), index.h(SubmitButton, { key: '4a39072b8cbd568e56ed78fa6d271f2ea46cf163', bindings: this.bindings, disabled: isDisabled, onClick: () => {
+                } }, this.renderTextBox(searchLabel), index.h(SubmitButton, { key: '9b023c250c5f867244d036d572f099983661c48e', bindings: this.bindings, disabled: isDisabled, onClick: () => {
                     this.searchBox.submit();
                     this.suggestionManager.clearSuggestions();
                 } }), this.renderSuggestions()),