@coveo/atomic 3.33.3-pre.ee24f8bd85 → 3.33.3-pre.f230cfebef

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

@@ -12,15 +12,15 @@ import { bindingGuard } from "../../../decorators/binding-guard.js";
 import { bindings } from "../../../decorators/bindings.js";
 import { createProductContextController } from "../../../decorators/commerce/product-template-decorators.js";
 import { errorGuard } from "../../../decorators/error-guard.js";
-import { injectStylesForNoShadowDOM } from "../../../decorators/inject-styles-for-no-shadow-dom.js";
 import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js";
 import { multiClassMap, tw } from "../../../directives/multi-class-map.js";
+import { LightDomMixin } from "../../../mixins/light-dom.js";
 import { defaultCurrencyFormatter } from '../../common/formats/format-common.js';
 import { parseValue } from '../product-template-component-utils/product-utils.js';
 /**
  * The `atomic-product-price` component renders the price of a product.
  */
-let AtomicProductPrice = class AtomicProductPrice extends LitElement {
+let AtomicProductPrice = class AtomicProductPrice extends LightDomMixin(LitElement) {
     constructor() {
         super(...arguments);
         this.productController = createProductContextController(this);
@@ -94,7 +94,6 @@ __decorate([
 AtomicProductPrice = __decorate([
     customElement('atomic-product-price'),
     bindings(),
-    injectStylesForNoShadowDOM,
     withTailwindStyles
 ], AtomicProductPrice);
 export { AtomicProductPrice };

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

@@ -12,7 +12,7 @@ import { bindingGuard } from "../../../decorators/binding-guard";
 import { bindings } from "../../../decorators/bindings.js";
 import { createProductContextController } from "../../../decorators/commerce/product-template-decorators.js";
 import { errorGuard } from "../../../decorators/error-guard";
-import { injectStylesForNoShadowDOM } from "../../../decorators/inject-styles-for-no-shadow-dom";
+import { LightDomMixin } from "../../../mixins/light-dom";
 const Star = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\">\n  <path\n    d=\"m 2.6226137,7.5483827 -1.73646599,-1.67659 c -0.58287,-0.56277 -0.2895686,-1.54878 0.50612799,-1.70148 l 2.630348,-0.50477 c 0.31897,-0.06121 0.58834,-0.27352 0.72239,-0.56935 l 0.84414,-1.86293 c 0.35481,-0.78302702 1.46689,-0.78302802 1.8217,0 l 0.84414,1.86293 c 0.13405,0.29583 0.40342,0.50814 0.72239,0.56935 l 2.6303203,0.50477 c 0.7957,0.1527 1.089,1.13871 0.5062,1.70148 l -1.73651,1.67659 c -0.23632,0.22817 -0.34551,0.55786 -0.2921,0.88198 l 0.45461,2.7587403 c 0.1357,0.824 -0.7386003,1.4416 -1.4698203,1.0382 l -2.087,-1.1515 c -0.30069,-0.1659 -0.66547,-0.1659 -0.96616,0 l -2.087,1.1515 c -0.73122,0.4034 -1.60555,-0.2142 -1.46978,-1.0382 l 0.45457,-2.7587403 c 0.05341,-0.32412 -0.05578,-0.65381 -0.2921,-0.88198 z\"\n    stroke-width=\"0.8125\"\n  />\n</svg>";
 import { computeNumberOfStars, renderRating, } from '../../common/atomic-rating/rating.js';
 /**
@@ -25,7 +25,7 @@ import { computeNumberOfStars, renderRating, } from '../../common/atomic-rating/
  * @cssprop --atomic-rating-icon-inactive-color - Color of the icon when inactive.
  * @cssprop --atomic-rating-icon-outline - Outline color of the icon.
  */
-let AtomicProductRating = class AtomicProductRating extends LitElement {
+let AtomicProductRating = class AtomicProductRating extends LightDomMixin(LitElement) {
     constructor() {
         super(...arguments);
         this.productController = createProductContextController(this);
@@ -151,7 +151,6 @@ __decorate([
 ], AtomicProductRating.prototype, "render", null);
 AtomicProductRating = __decorate([
     customElement('atomic-product-rating'),
-    bindings(),
-    injectStylesForNoShadowDOM
+    bindings()
 ], AtomicProductRating);
 export { AtomicProductRating };

package/dist/atomic/components/components/commerce/atomic-product-section-actions/atomic-product-section-actions.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { LitElement } from 'lit';
+import { css, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { ItemSectionMixin } from "../../../mixins/item-section-mixin";
 /**
@@ -19,7 +19,8 @@ import { ItemSectionMixin } from "../../../mixins/item-section-mixin";
  *
  * @slot default - The actions to display.
  */
-let AtomicProductSectionActions = class AtomicProductSectionActions extends ItemSectionMixin(LitElement) {
+let AtomicProductSectionActions = class AtomicProductSectionActions extends ItemSectionMixin(LitElement, css`/*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */
+atomic-product-section-actions{text-align:left;&.with-sections{text-overflow:ellipsis;overflow:hidden}&.with-sections{max-height:calc(2*var(--row-height,2rem) + .5rem);--row-height:2rem;flex-wrap:wrap;grid-area:actions;gap:.5rem;display:flex;& atomic-result-quickview{display:inline-block}@media (width>=1024px){&.display-list{&.density-comfortable{margin-bottom:1.5rem}&.density-normal,&.density-compact{margin-bottom:1rem}}&.display-grid{&.density-comfortable{--row-height:2.5rem;margin-top:2.25rem}&.density-normal{--font-size:var(--atomic-text-sm);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);margin-top:1.75rem}&.density-compact{--font-size:var(--atomic-text-sm);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);margin-top:1.25rem}}}@media not all and (width>=1024px){&.display-list{--row-height:2.5rem;&.density-comfortable{margin-top:1rem}&.density-normal{margin-top:.75rem}&.density-compact{margin-top:.5em}}&.display-grid{&.image-large{--row-height:2.5rem;&.density-comfortable{margin-top:1rem}&.density-normal{margin-top:.75rem}&.density-compact{margin-top:.5em}}&.image-small,&.image-icon,&.image-none{&.density-comfortable{margin-top:1.25rem}&.density-normal{margin-top:1rem}&.density-compact{margin-top:.75rem}}}}&.display-table{&.density-comfortable{margin-bottom:1.5rem}&.density-normal,&.density-compact{margin-bottom:1rem}}}}`) {
 };
 AtomicProductSectionActions = __decorate([
     customElement('atomic-product-section-actions')

package/dist/atomic/components/components/commerce/atomic-product-section-metadata/atomic-product-section-metadata.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { LitElement } from 'lit';
+import { css, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { ItemSectionMixin } from "../../../mixins/item-section-mixin";
 /**
@@ -18,7 +18,8 @@ import { ItemSectionMixin } from "../../../mixins/item-section-mixin";
  *
  * @slot default - The metadata to display.
  */
-let AtomicProductSectionMetadata = class AtomicProductSectionMetadata extends ItemSectionMixin(LitElement) {
+let AtomicProductSectionMetadata = class AtomicProductSectionMetadata extends ItemSectionMixin(LitElement, css`/*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */
+atomic-product-section-metadata{--font-size:var(--atomic-text-sm);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);&.with-sections{text-overflow:ellipsis;grid-area:title-metadata;margin-top:.475rem;overflow:hidden}}`) {
 };
 AtomicProductSectionMetadata = __decorate([
     customElement('atomic-product-section-metadata')

package/dist/atomic/components/components/commerce/atomic-product-section-name/atomic-product-section-name.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { LitElement } from 'lit';
+import { css, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { ItemSectionMixin } from "../../../mixins/item-section-mixin";
 /**
@@ -17,7 +17,8 @@ import { ItemSectionMixin } from "../../../mixins/item-section-mixin";
  *
  * @slot default - The name to display.
  */
-let AtomicProductSectionName = class AtomicProductSectionName extends ItemSectionMixin(LitElement) {
+let AtomicProductSectionName = class AtomicProductSectionName extends ItemSectionMixin(LitElement, css`/*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */
+atomic-product-section-name{&.with-sections{text-overflow:ellipsis;overflow:hidden}&.with-sections{color:var(--atomic-on-background);--font-size:var(--atomic-text-xl);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);grid-area:title;&.density-comfortable{--font-size:var(--atomic-text-2xl);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height)}@media (width>=1024px){&.display-grid{word-break:break-word;-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}}@media not all and (width>=1024px){&.display-list{--font-size:var(--atomic-text-xl);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height)}&.display-grid{&.image-large{--font-size:var(--atomic-text-xl);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height)}&.image-small,&.image-icon,&.image-none{--font-size:var(--atomic-text-lg);font-size:var(--font-size);--line-height:calc(var(--font-size)*var(--atomic-line-height-ratio));line-height:var(--line-height);-webkit-line-clamp:2;-webkit-box-orient:vertical;max-height:3rem;display:-webkit-box;overflow:hidden}}}}& .with-sections{&.display-grid{min-height:calc(var(--line-height)*2);-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}}}`) {
 };
 AtomicProductSectionName = __decorate([
     customElement('atomic-product-section-name')

package/dist/atomic/components/components/commerce/atomic-product-section-visual/atomic-product-section-visual.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { LitElement } from 'lit';
+import { css, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { ItemSectionMixin } from "../../../mixins/item-section-mixin";
 /**
@@ -18,10 +18,11 @@ import { ItemSectionMixin } from "../../../mixins/item-section-mixin";
  *
  * @slot default - The image to display.
  */
-let AtomicProductSectionVisual = class AtomicProductSectionVisual extends ItemSectionMixin(LitElement) {
+let AtomicProductSectionVisual = class AtomicProductSectionVisual extends ItemSectionMixin(LitElement, css`/*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */
+atomic-product-section-visual{&.with-sections{text-overflow:ellipsis;overflow:hidden}&.with-sections{grid-area:visual;&.image-icon{border-radius:var(--atomic-border-radius);width:2rem;height:2rem}&.image-none{display:none}@media (width>=1024px){&.display-list{margin-right:1rem;&.density-comfortable{margin-right:1.5rem}&.image-large{&.density-compact{width:10rem;height:10rem}&.density-comfortable,&.density-normal{width:20.375rem;height:20.375rem}}&.image-small{width:10rem;height:10rem}}&.display-grid{margin-bottom:.5rem;&.image-large,&.image-small{width:100%;&.density-comfortable{margin:0 auto 2rem}&.density-normal{margin:0 auto 1.5rem}&.density-compact{margin:0 auto 1rem}}&.image-large{aspect-ratio:1;height:auto;@supports not (aspect-ratio:1 / 1){&{height:19.75rem}}}&.image-small{aspect-ratio:1;height:auto;@supports not (aspect-ratio:1 / 1){&{height:14rem}}}}}@media not all and (width>=1024px){&.display-list{margin-right:1rem;&.image-large{aspect-ratio:1;width:100%;height:auto;margin-bottom:1rem;margin-right:0;@supports not (aspect-ratio:1 / 1){&{height:7.25rem}}}&.image-small{width:24vw;height:24vw;margin-bottom:1rem}&.image-icon{margin-bottom:0}}&.display-grid{&.image-large{margin-right:1rem;&.image-large{aspect-ratio:1;width:100%;height:auto;margin-bottom:1rem;margin-right:0;@supports not (aspect-ratio:1 / 1){&{height:7.25rem}}}&.image-small{width:24vw;height:24vw;margin-bottom:1rem}&.image-icon{margin-bottom:0}}&.image-small,&.image-icon,&.image-none{&.image-large,&.image-small{width:100%;&.density-comfortable{margin-bottom:1rem}&.density-normal{margin-bottom:.75rem}&.density-compact{margin-bottom:.5rem}}&.image-small{aspect-ratio:1;width:10.25rem;height:10.25rem;@supports not (aspect-ratio:1 / 1){&{height:9rem}}}}}}&.display-table{margin-right:1rem;&.density-comfortable{margin-right:1.5rem}&.image-large{&.density-compact{width:10rem;height:10rem}&.density-comfortable,&.density-normal{width:20.375rem;height:20.375rem}}&.image-small{width:10rem;height:10rem}}}& .with-sections{&.image-icon{& atomic-product-image::part(previous-button),& atomic-product-image::part(next-button),& atomic-product-image::part(indicator){display:none}}}}`) {
 };
 __decorate([
-    property({ reflect: true, attribute: 'image-size' })
+    property({ reflect: true, attribute: 'image-size', type: Object })
 ], AtomicProductSectionVisual.prototype, "imageSize", void 0);
 AtomicProductSectionVisual = __decorate([
     customElement('atomic-product-section-visual')

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

@@ -17,11 +17,12 @@ import { getFieldValueCaption } from '../../../utils/field-utils';
 import { renderItemTextFallback } from '../../common/item-text/item-text-fallback.js';
 import { renderItemTextHighlighted } from '../../common/item-text/item-text-highlighted.js';
 import '../atomic-commerce-text/atomic-commerce-text';
+import { LightDomMixin } from "../../../mixins/light-dom";
 import { getStringValueFromProductOrNull } from '../product-template-component-utils/product-utils.js';
 /**
  * The `atomic-product-text` component renders the value of a string field for a given product.
  */
-let AtomicProductText = class AtomicProductText extends LitElement {
+let AtomicProductText = class AtomicProductText extends LightDomMixin(LitElement) {
     constructor() {
         super(...arguments);
         /**
@@ -37,9 +38,6 @@ let AtomicProductText = class AtomicProductText extends LitElement {
         this.disableHighlight = false;
         this.productController = createProductContextController(this);
     }
-    createRenderRoot() {
-        return this;
-    }
     initialize() {
         if (!this.product && this.productController.item) {
             this.product = this.productController.item;

package/dist/atomic/components/components/common/atomic-aria-live/atomic-aria-live.js

@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, LitElement } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
+import { LightDomMixin } from "../../../mixins/light-dom";
 import { buildDebouncedQueue } from '../../../utils/debounce-utils';
 import { randomID } from '../../../utils/utils';
 /**
@@ -14,7 +15,7 @@ import { randomID } from '../../../utils/utils';
  *
  * @event atomic/accessibility/findAriaLive - Dispatches an event to find the `atomic-aria-live` element.
  */
-let AtomicAriaLive = class AtomicAriaLive extends LitElement {
+let AtomicAriaLive = class AtomicAriaLive extends LightDomMixin(LitElement) {
     constructor() {
         super(...arguments);
         this.regions = {};
@@ -24,9 +25,6 @@ let AtomicAriaLive = class AtomicAriaLive extends LitElement {
             customEvent.detail.element = this;
         };
     }
-    createRenderRoot() {
-        return this;
-    }
     connectedCallback() {
         super.connectedCallback();
         this.ariaLiveId = randomID('atomic-aria-live-');

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

@@ -13,7 +13,7 @@ import { renderButton } from "../button";
 import { bindingGuard } from "../../../decorators/binding-guard";
 import { bindings } from "../../../decorators/bindings";
 import { errorGuard } from "../../../decorators/error-guard";
-import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js";
+import { LightDomMixin } from "../../../mixins/light-dom";
 import { parseDate } from "../../../utils/date-utils";
 /**
  * Internal component made to be integrated in a TimeframeFacet.
@@ -23,7 +23,7 @@ import { parseDate } from "../../../utils/date-utils";
  *
  * @internal
  */
-let AtomicFacetDateInput = class AtomicFacetDateInput extends LitElement {
+let AtomicFacetDateInput = class AtomicFacetDateInput extends LightDomMixin(LitElement) {
     constructor() {
         super(...arguments);
         this.startRef = createRef();
@@ -41,9 +41,6 @@ let AtomicFacetDateInput = class AtomicFacetDateInput extends LitElement {
             ? parseDate(this.inputRange.end).toDate()
             : undefined;
     }
-    createRenderRoot() {
-        return this;
-    }
     /**
      * Validates that this component is only used within an atomic-commerce-timeframe-facet.
      * This is an internal component and should not be used directly by consumers.
@@ -220,7 +217,6 @@ __decorate([
 ], AtomicFacetDateInput.prototype, "render", null);
 AtomicFacetDateInput = __decorate([
     customElement('atomic-facet-date-input'),
-    bindings(),
-    withTailwindStyles
+    bindings()
 ], AtomicFacetDateInput);
 export { AtomicFacetDateInput };

package/dist/atomic/components/components/common/atomic-icon/atomic-icon.js

@@ -11,9 +11,9 @@ import { guard } from 'lit/directives/guard.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { bindingGuard } from "../../../decorators/binding-guard";
 import { errorGuard } from "../../../decorators/error-guard";
-import { injectStylesForNoShadowDOM } from "../../../decorators/inject-styles-for-no-shadow-dom";
 import { watch } from "../../../decorators/watch";
 import { InitializeBindingsMixin } from "../../../mixins/bindings-mixin";
+import { LightDomMixin } from "../../../mixins/light-dom";
 import { parseAssetURL } from "../../../utils/asset-path-utils";
 class IconFetchError extends Error {
     static fromStatusCode(url, statusCode, statusText) {
@@ -33,7 +33,7 @@ class IconFetchError extends Error {
  *
  * This component can display an icon from those available in the Atomic package, from a specific location, or as an inline SVG element.
  */
-let AtomicIcon = class AtomicIcon extends InitializeBindingsMixin(LitElement) {
+let AtomicIcon = class AtomicIcon extends LightDomMixin(InitializeBindingsMixin(LitElement)) {
     constructor() {
         super(...arguments);
         this.svg = null;
@@ -108,7 +108,6 @@ __decorate([
     errorGuard()
 ], AtomicIcon.prototype, "render", null);
 AtomicIcon = __decorate([
-    customElement('atomic-icon'),
-    injectStylesForNoShadowDOM
+    customElement('atomic-icon')
 ], AtomicIcon);
 export { AtomicIcon };

package/dist/atomic/components/components/common/atomic-layout-section/atomic-layout-section.js

@@ -6,15 +6,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { LightDomMixin } from "../../../mixins/light-dom";
 /**
  * The `atomic-layout-section` lets you identify various sections for the related `atomic-search-layout` or `atomic-commerce-layout` component.
  *
  * @slot default - The default slot where you can add child components to the section.
  */
-let AtomicLayoutSection = class AtomicLayoutSection extends LitElement {
-    createRenderRoot() {
-        return this;
-    }
+let AtomicLayoutSection = class AtomicLayoutSection extends LightDomMixin(LitElement) {
 };
 __decorate([
     property({ type: String, reflect: true })

package/dist/atomic/components/components/common/item-list/styles/grid-display.tw.css.js

@@ -0,0 +1,4 @@
+import { css } from 'lit';
+const styles = css`/*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid}}}:host{& [part~=outline][part~=result-list-grid-clickable-container]{border:1px solid #0000;border-radius:1rem;padding:1rem;transition:all .12s ease-out;position:relative;&:hover{border-style:var(--tw-border-style);border-width:1px;border-color:var(--atomic-neutral);box-shadow:0px 10px 25px var(--atomic-neutral);cursor:pointer}}& [part=result-list-grid-clickable]:focus-visible{border-style:var(--tw-border-style);border-width:2px;border-color:var(--atomic-primary);color:var(--atomic-primary);cursor:pointer;text-align:center;border-radius:2px;text-decoration:underline;display:inline-block;position:absolute}& [part=result-list-grid-clickable]:not(:focus){clip:rect(1px,1px,1px,1px);padding:0;position:absolute;overflow:hidden}& .list-wrapper{word-break:break-word}& .list-root.display-grid{justify-content:space-evenly;display:grid;& .result-component{box-sizing:border-box;height:100%}}& .list-root.display-grid{@media (width>=1024px){&{grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}&.density-comfortable{grid-row-gap:4rem;grid-column-gap:1.5rem}&.density-normal,&.density-compact{grid-row-gap:3rem;grid-column-gap:1.5rem}&.image-large{grid-template-columns:repeat(auto-fill,minmax(19rem,1fr))}&.image-small{@media not all and (width>=1024px){&{grid-template-columns:repeat(3,1fr)}}@media (width>=1024px){&{grid-template-columns:repeat(3,1fr)}}@media (width>=1280px){&{grid-template-columns:repeat(4,1fr)}}}}}& .list-root.display-grid{@media not all and (width>=1024px){&.image-large{@media not all and (width>=768px){&{grid-template-columns:minmax(auto,35rem)}&.density-comfortable{& [part~=outline]{&:before{margin:2rem 0}}}&.density-normal{& [part~=outline]{&:before{margin:1.5rem 0}}@media not all and (width>=1024px){& [part~=outline]{&:before{margin:1.75rem 0}}}}&.density-compact{& [part~=outline]{&:before{margin:1rem 0}}@media not all and (width>=1024px){& [part~=outline]{&:before{margin:1.5rem 0}}}}& [part~=outline]{&:before{content:" ";background-color:var(--atomic-neutral);height:1px;display:block}&:first-of-type:before{display:none}}& atomic-result-placeholder{&:before{background-color:#0000}}}@media (width>=768px){&{grid-column-gap:.5rem;grid-row-gap:.5rem;grid-template-columns:1fr 1fr}& [part~=outline]{border-style:var(--tw-border-style);border-width:1px;border-color:var(--atomic-neutral);border-radius:1rem;padding:1rem}& atomic-result-placeholder{border-color:#0000}}}&.image-small,&.image-icon,&.image-none{grid-column-gap:.5rem;grid-row-gap:.5rem;& [part~=outline]{border-style:var(--tw-border-style);border-width:1px;border-color:var(--atomic-neutral);border-radius:1rem;padding:1rem}& atomic-result-placeholder{border-color:#0000}@media not all and (width>=640px){&{grid-template-columns:minmax(0,1fr)}}@media (width>=768px){&{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}@media (width>=1024px){&{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)}}}}}}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}`;
+export default styles;

package/dist/atomic/components/components/common/item-list/styles/list-display.tw.css.js

@@ -0,0 +1,4 @@
+import { css } from 'lit';
+const styles = css`/*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid}}}[part~=divider]{margin-bottom:1rem;&:not(:last-child){border-bottom-color:var(--atomic-neutral);padding-bottom:1rem}}.list-root.display-list{flex-direction:column;display:flex;& .result-component,& atomic-result-placeholder{width:auto}@media (width>=1024px){&.density-comfortable{& [part~=outline]{&:before{margin:2rem 0}}}&.density-normal{& [part~=outline]{&:before{margin:1.5rem 0}}@media not all and (width>=1024px){& [part~=outline]{&:before{margin:1.75rem 0}}}}&.density-compact{& [part~=outline]{&:before{margin:1rem 0}}@media not all and (width>=1024px){& [part~=outline]{&:before{margin:1.5rem 0}}}}& [part~=outline]{&:before{content:" ";background-color:var(--atomic-neutral);height:1px;display:block}&:first-of-type:before{display:none}}& atomic-result-placeholder{&:before{background-color:#0000}}}@media not all and (width>=1024px){&.image-large{grid-template-columns:minmax(auto,35rem);justify-content:space-evenly;display:grid;&.density-comfortable{& [part~=outline]{&:before{margin:2rem 0}}}&.density-normal{& [part~=outline]{&:before{margin:1.5rem 0}}@media not all and (width>=1024px){& [part~=outline]{&:before{margin:1.75rem 0}}}}&.density-compact{& [part~=outline]{&:before{margin:1rem 0}}@media not all and (width>=1024px){& [part~=outline]{&:before{margin:1.5rem 0}}}}& [part~=outline]{&:before{content:" ";background-color:var(--atomic-neutral);height:1px;display:block}&:first-of-type:before{display:none}}& atomic-result-placeholder{&:before{background-color:#0000}}}&.image-small,&.image-icon,&.image-none{grid-row-gap:1rem;& [part~=outline]{border-style:var(--tw-border-style);border-width:1px;border-color:var(--atomic-neutral);border-radius:1rem;padding:1rem}& atomic-result-placeholder{border-color:#0000}}}}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}`;
+export default styles;

package/dist/atomic/components/components/common/item-list/styles/placeholders.tw.css.js

@@ -0,0 +1,3 @@
+import { css } from 'lit';
+const styles = css`.list-wrapper.placeholder{& .result-component,& table.list-root{display:none}}.list-wrapper:not(.placeholder){& atomic-result-placeholder,& atomic-result-table-placeholder{display:none}}.list-root.loading{animation:2s cubic-bezier(.4,0,.6,1) infinite pulse}@keyframes pulse{0%,to{opacity:.6}50%{opacity:.2}}`;
+export default styles;

package/dist/atomic/components/components/common/item-list/styles/table-display.tw.css.js

@@ -0,0 +1,4 @@
+import { css } from 'lit';
+const styles = css`/*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid}}}.list-wrapper.display-table{display:grid;overflow-x:auto}.list-root.display-table{border-spacing:0;border-collapse:separate;min-width:100%;& th,& td{border-style:var(--tw-border-style);border-width:1px;border-color:var(--atomic-neutral);font-family:var(--atomic-font-family);font-size:var(--atomic-text-sm);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25/.875)));white-space:nowrap;line-height:1rem;&:not(:first-child){border-left:none}&:first-child{min-width:19rem}}& th{background-color:var(--atomic-neutral-light);color:#000;padding:1rem var(--padding);text-align:left;border-bottom:none;font-weight:700;&:first-child{border-top-left-radius:var(--atomic-border-radius-xl)}&:last-child{border-top-right-radius:var(--atomic-border-radius-xl)}}& td{color:var(--atomic-neutral-dark);vertical-align:top;padding:var(--padding);border-top:none}&.density-comfortable{--padding:2rem}&.density-normal{--padding:1.5rem}&.density-compact{--padding:1rem}}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}`;
+export default styles;

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

@@ -6,8 +6,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { LitElement, unsafeCSS } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
-import { injectStylesForNoShadowDOM } from "../../../decorators/inject-styles-for-no-shadow-dom";
 import { ChildrenUpdateCompleteMixin } from "../../../mixins/children-update-complete-mixin";
+import { LightDomMixin } from "../../../mixins/light-dom";
 import { randomID } from "../../../utils/utils";
 import { DEFAULT_MOBILE_BREAKPOINT } from '../../../utils/replace-breakpoint';
 import styles from './atomic-search-layout.tw.css';
@@ -19,7 +19,7 @@ import { buildSearchLayout } from './search-layout';
  * @cssprop --atomic-layout-max-search-box-double-suggestions-width: The maximum width that the search box suggestions will take when displaying a double list.
  * @cssprop --atomic-layout-search-box-left-suggestions-width: The width of the left list when displaying a double list.
  */
-let AtomicSearchLayout = class AtomicSearchLayout extends ChildrenUpdateCompleteMixin(LitElement) {
+let AtomicSearchLayout = class AtomicSearchLayout extends LightDomMixin(ChildrenUpdateCompleteMixin(LitElement)) {
     constructor() {
         super(...arguments);
         /**
@@ -28,13 +28,14 @@ let AtomicSearchLayout = class AtomicSearchLayout extends ChildrenUpdateComplete
          */
         this.mobileBreakpoint = DEFAULT_MOBILE_BREAKPOINT;
     }
-    static async dynamicStyles(instance) {
-        await instance.getUpdateComplete();
-        return unsafeCSS(buildSearchLayout(instance, instance.mobileBreakpoint));
+    async addStyles() {
+        await this.getUpdateComplete();
+        this.injectStyles(unsafeCSS(buildSearchLayout(this, this.mobileBreakpoint)));
     }
     connectedCallback() {
         super.connectedCallback();
         this.id = randomID('atomic-search-layout-');
+        this.addStyles();
     }
 };
 AtomicSearchLayout.styles = [styles];
@@ -45,7 +46,6 @@ __decorate([
     property({ type: String, reflect: true, attribute: 'mobile-breakpoint' })
 ], AtomicSearchLayout.prototype, "mobileBreakpoint", void 0);
 AtomicSearchLayout = __decorate([
-    customElement('atomic-search-layout'),
-    injectStylesForNoShadowDOM
+    customElement('atomic-search-layout')
 ], AtomicSearchLayout);
 export { AtomicSearchLayout };

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

@@ -3,7 +3,7 @@ function getWindow() {
 }
 export function getAtomicEnvironment(headlessVersion) {
     return {
-        version: "3.33.3-pre.ee24f8bd85",
+        version: "3.33.3-pre.f230cfebef",
         headlessVersion,
     };
 }

package/dist/atomic/components/mixins/item-section-mixin.js

@@ -1,11 +1,5 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { hideEmptySection } from "../utils/item-section-utils";
-import { injectStylesForNoShadowDOM } from '../decorators/inject-styles-for-no-shadow-dom.js';
+import { hideEmptySection } from '../utils/item-section-utils.js';
+import { LightDomMixin } from './light-dom.js';
 /**
  * Mixin for product section components that provides common functionality.
  * All product section components extend LitElement and call hideEmptySection in updated().
@@ -15,14 +9,11 @@ import { injectStylesForNoShadowDOM } from '../decorators/inject-styles-for-no-s
  * @returns A class that extends the superClass with product section functionality
  */
 export function ItemSectionMixin(superClass, styles) {
-    let ProductSectionMixinClass = class ProductSectionMixinClass extends superClass {
+    class ProductSectionMixinClass extends LightDomMixin(superClass) {
         updated() {
             hideEmptySection(this);
         }
-    };
+    }
     ProductSectionMixinClass.styles = styles;
-    ProductSectionMixinClass = __decorate([
-        injectStylesForNoShadowDOM
-    ], ProductSectionMixinClass);
     return ProductSectionMixinClass;
 }

package/dist/atomic/components/mixins/light-dom.js

@@ -0,0 +1,70 @@
+/**
+ * Mixin that provides dynamic styles injection functionality for components that do not use Shadow DOM.
+ *
+ * Usage:
+ *   class MyComponent extends LightDomMixin(LitElement) {
+ *     static styles = css`div { color: blue; }`;
+ *     render() { return html`<div>content</div>`; }
+ *   }
+ *
+ * Features:
+ * - Automatically injects static styles from the component's `styles` property in `connectedCallback`
+ * - Exposes an `injectStyles` method that can be called manually with dynamic styles
+ * - Prevents duplicate style injection by checking for existing style sheets
+ * - Overrides `createRenderRoot` to return `this` (disabling Shadow DOM)
+ *
+ * @param superClass - The base class to extend (must be a LitElement constructor)
+ * @returns A class that extends the superClass with dynamic styles injection functionality
+ */
+export const LightDomMixin = (superClass) => {
+    class LightDomMixinClass extends superClass {
+        createRenderRoot() {
+            return this;
+        }
+        connectedCallback() {
+            super.connectedCallback();
+            this.injectStyles();
+        }
+        /**
+         * Injects styles into the document or shadow root.
+         *
+         * When called without arguments, injects the component's static styles.
+         * When called with dynamic styles, injects both static and dynamic styles.
+         *
+         * @param dynamicStyles - Optional dynamic styles to inject along with static styles
+         */
+        async injectStyles(dynamicStyles) {
+            const parent = this.getRootNode();
+            const isDocumentOrShadowRoot = parent instanceof Document || parent instanceof ShadowRoot;
+            if (!isDocumentOrShadowRoot) {
+                return;
+            }
+            const constructorStyles = this.constructor.styles;
+            const staticStyles = Array.isArray(constructorStyles)
+                ? constructorStyles
+                : [constructorStyles];
+            const dynamicStylesArray = Array.isArray(dynamicStyles)
+                ? dynamicStyles
+                : [dynamicStyles];
+            const allStyles = [...staticStyles, ...dynamicStylesArray];
+            for (const style of allStyles) {
+                if (style) {
+                    const styleSheet = this.getStyleSheet(style);
+                    if (styleSheet && !parent.adoptedStyleSheets.includes(styleSheet)) {
+                        parent.adoptedStyleSheets.push(styleSheet);
+                    }
+                }
+            }
+        }
+        getStyleSheet(style) {
+            if (style instanceof CSSStyleSheet) {
+                return style;
+            }
+            if (style && typeof style === 'object' && 'styleSheet' in style) {
+                return style.styleSheet;
+            }
+            return null;
+        }
+    }
+    return LightDomMixinClass;
+};