diff --git a/packages/atomic/src/components/commerce/atomic-commerce-breadbox/atomic-commerce-breadbox.tsx b/packages/atomic/src/components/commerce/atomic-commerce-breadbox/atomic-commerce-breadbox.tsx
index a3261de2e8d..ca4681c353a 100644
--- a/packages/atomic/src/components/commerce/atomic-commerce-breadbox/atomic-commerce-breadbox.tsx
+++ b/packages/atomic/src/components/commerce/atomic-commerce-breadbox/atomic-commerce-breadbox.tsx
@@ -38,7 +38,7 @@ import {
   defaultCurrencyFormatter,
   defaultNumberFormatter,
 } from '../../common/formats/format-common';
-import {Hidden} from '../../common/hidden';
+import {Hidden} from '../../common/stencil-hidden';
 import {CommerceBindings} from '../atomic-commerce-interface/atomic-commerce-interface';
 
 type AnyFacetValue =
diff --git a/packages/atomic/src/components/commerce/atomic-commerce-recommendation-list/atomic-commerce-recommendation-list.tsx b/packages/atomic/src/components/commerce/atomic-commerce-recommendation-list/atomic-commerce-recommendation-list.tsx
index 793af1f4287..b8b1cd72474 100644
--- a/packages/atomic/src/components/commerce/atomic-commerce-recommendation-list/atomic-commerce-recommendation-list.tsx
+++ b/packages/atomic/src/components/commerce/atomic-commerce-recommendation-list/atomic-commerce-recommendation-list.tsx
@@ -25,8 +25,6 @@ import {
 import {randomID} from '../../../utils/utils';
 import {ResultsPlaceholdersGuard} from '../../common/atomic-result-placeholder/placeholders';
 import {Carousel} from '../../common/carousel';
-import {Heading} from '../../common/heading';
-import {Hidden} from '../../common/hidden';
 import {createAppLoadedListener} from '../../common/interface/store';
 import {DisplayGrid} from '../../common/item-list/display-grid';
 import {DisplayWrapper} from '../../common/item-list/display-wrapper';
@@ -41,6 +39,8 @@ import {
   ItemDisplayImageSize,
   getItemListDisplayClasses,
 } from '../../common/layout/display-options';
+import {Heading} from '../../common/stencil-heading';
+import {Hidden} from '../../common/stencil-hidden';
 import {CommerceBindings} from '../atomic-commerce-recommendation-interface/atomic-commerce-recommendation-interface';
 import {ProductTemplateProvider} from '../product-list/product-template-provider';
 import {SelectChildProductEventArgs} from '../product-template-components/atomic-product-children/atomic-product-children';
diff --git a/packages/atomic/src/components/commerce/product-template-components/atomic-product-description/atomic-product-description.tsx b/packages/atomic/src/components/commerce/product-template-components/atomic-product-description/atomic-product-description.tsx
index b8675e54bcc..b1e4719772f 100644
--- a/packages/atomic/src/components/commerce/product-template-components/atomic-product-description/atomic-product-description.tsx
+++ b/packages/atomic/src/components/commerce/product-template-components/atomic-product-description/atomic-product-description.tsx
@@ -9,7 +9,7 @@ import {
   ExpandableText,
   TruncateAfter,
 } from '../../../common/expandable-text/expandable-text';
-import {Hidden} from '../../../common/hidden';
+import {Hidden} from '../../../common/stencil-hidden';
 import {CommerceBindings} from '../../atomic-commerce-interface/atomic-commerce-interface';
 import {ProductContext} from '../product-template-decorators';
 
diff --git a/packages/atomic/src/components/commerce/product-template-components/atomic-product-excerpt/atomic-product-excerpt.tsx b/packages/atomic/src/components/commerce/product-template-components/atomic-product-excerpt/atomic-product-excerpt.tsx
index d7d4c285550..e95a2a77035 100644
--- a/packages/atomic/src/components/commerce/product-template-components/atomic-product-excerpt/atomic-product-excerpt.tsx
+++ b/packages/atomic/src/components/commerce/product-template-components/atomic-product-excerpt/atomic-product-excerpt.tsx
@@ -9,7 +9,7 @@ import {
   ExpandableText,
   TruncateAfter,
 } from '../../../common/expandable-text/expandable-text';
-import {Hidden} from '../../../common/hidden';
+import {Hidden} from '../../../common/stencil-hidden';
 import {CommerceBindings} from '../../atomic-commerce-interface/atomic-commerce-interface';
 import {ProductContext} from '../product-template-decorators';
 
diff --git a/packages/atomic/src/components/common/facets/facet-guard.tsx b/packages/atomic/src/components/common/facets/facet-guard.tsx
index 057247fc7ff..a956b4fa60e 100644
--- a/packages/atomic/src/components/common/facets/facet-guard.tsx
+++ b/packages/atomic/src/components/common/facets/facet-guard.tsx
@@ -1,5 +1,5 @@
 import {Fragment, FunctionalComponent, h} from '@stencil/core';
-import {Hidden} from '../hidden';
+import {Hidden} from '../stencil-hidden';
 
 interface FacetGuardProps {
   hasError: boolean;
diff --git a/packages/atomic/src/components/common/facets/facet-header/facet-header.tsx b/packages/atomic/src/components/common/facets/facet-header/facet-header.tsx
index 136453e81f5..3eaa1d68cd2 100644
--- a/packages/atomic/src/components/common/facets/facet-header/facet-header.tsx
+++ b/packages/atomic/src/components/common/facets/facet-header/facet-header.tsx
@@ -3,8 +3,8 @@ import {i18n} from 'i18next';
 import ArrowBottomIcon from '../../../../images/arrow-bottom-rounded.svg';
 import ArrowTopIcon from '../../../../images/arrow-top-rounded.svg';
 import CloseIcon from '../../../../images/close.svg';
-import {Heading} from '../../heading';
 import {Button} from '../../stencil-button';
+import {Heading} from '../../stencil-heading';
 
 export interface FacetHeaderProps {
   i18n: i18n;
diff --git a/packages/atomic/src/components/common/facets/timeframe-facet-common.tsx b/packages/atomic/src/components/common/facets/timeframe-facet-common.tsx
index a142bde1621..c3071c8c839 100644
--- a/packages/atomic/src/components/common/facets/timeframe-facet-common.tsx
+++ b/packages/atomic/src/components/common/facets/timeframe-facet-common.tsx
@@ -5,7 +5,7 @@ import {getFieldValueCaption} from '../../../utils/field-utils';
 import {randomID} from '../../../utils/utils';
 import {InsightBindings} from '../../insight/atomic-insight-interface/atomic-insight-interface';
 import {Bindings as SearchBindings} from '../../search/atomic-search-interface/atomic-search-interface';
-import {Hidden} from '../hidden';
+import {Hidden} from '../stencil-hidden';
 import {
   DateFacet,
   DateFacetValue,
diff --git a/packages/atomic/src/components/common/generated-answer/atomic-citation/atomic-citation.tsx b/packages/atomic/src/components/common/generated-answer/atomic-citation/atomic-citation.tsx
index eded75469bf..93b79c1cdf3 100644
--- a/packages/atomic/src/components/common/generated-answer/atomic-citation/atomic-citation.tsx
+++ b/packages/atomic/src/components/common/generated-answer/atomic-citation/atomic-citation.tsx
@@ -5,8 +5,8 @@ import {
   Instance as PopperInstance,
 } from '@popperjs/core';
 import {Component, h, State, Prop, Element, Watch} from '@stencil/core';
-import {Heading} from '../../heading';
 import {LinkWithItemAnalytics} from '../../item-link/item-link';
+import {Heading} from '../../stencil-heading';
 
 /**
  * @internal
diff --git a/packages/atomic/src/components/common/generated-answer/generated-answer-common.tsx b/packages/atomic/src/components/common/generated-answer/generated-answer-common.tsx
index b2601fd0e78..e08abac72ad 100644
--- a/packages/atomic/src/components/common/generated-answer/generated-answer-common.tsx
+++ b/packages/atomic/src/components/common/generated-answer/generated-answer-common.tsx
@@ -12,8 +12,8 @@ import {
   SafeStorage,
   StorageItems,
 } from '../../../utils/local-storage-utils';
-import {Heading} from '../heading';
 import {AnyBindings} from '../interface/bindings';
+import {Heading} from '../stencil-heading';
 import {Switch} from '../switch';
 import {CopyButton} from './copy-button';
 import {FeedbackButton} from './feedback-button';
diff --git a/packages/atomic/src/components/common/heading.spec.ts b/packages/atomic/src/components/common/heading.spec.ts
new file mode 100644
index 00000000000..d0636b06541
--- /dev/null
+++ b/packages/atomic/src/components/common/heading.spec.ts
@@ -0,0 +1,71 @@
+import {within} from '@storybook/test';
+import {html, render} from 'lit';
+import {heading, HeadingProps} from './heading';
+
+describe('heading', () => {
+  let container: HTMLElement;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+  });
+
+  const renderHeading = (
+    props: Partial<HeadingProps>,
+    children?: string
+  ): HTMLElement => {
+    render(
+      html`${heading(
+        {
+          ...props,
+          level: props.level ?? 1,
+        },
+        html`${children}`
+      )}`,
+      container
+    );
+    return within(container).getByRole(
+      props.level && props.level > 0 && props.level <= 6 ? 'heading' : 'generic'
+    ) as HTMLElement;
+  };
+
+  it('should render a heading in the document', () => {
+    const props = {level: 1};
+    const headingElement = renderHeading(props);
+    expect(headingElement).toBeInTheDocument();
+  });
+
+  it('should render a heading with the correct level', () => {
+    const props = {level: 2};
+    const headingElement = renderHeading(props);
+    expect(headingElement.tagName.toLowerCase()).toBe('h2');
+  });
+
+  it('should render a div if level is outside the range of 1 to 6', () => {
+    const props = {level: 0};
+    const headingElement = renderHeading(props);
+    expect(headingElement.tagName.toLowerCase()).toBe('div');
+  });
+
+  it('should render a heading with the correct text content', () => {
+    const props = {level: 1};
+    const headingElement = renderHeading(props, 'Test Heading');
+    expect(headingElement.textContent).toContain('Test Heading');
+  });
+
+  it('should apply additional classes', () => {
+    const props = {level: 1, class: 'test-class'};
+    const headingElement = renderHeading(props);
+    expect(headingElement).toHaveClass('test-class');
+  });
+
+  it('should apply part attribute', () => {
+    const props = {level: 1, part: 'heading-part'};
+    const headingElement = renderHeading(props);
+    expect(headingElement.getAttribute('part')).toBe('heading-part');
+  });
+});
diff --git a/packages/atomic/src/components/common/heading.ts b/packages/atomic/src/components/common/heading.ts
new file mode 100644
index 00000000000..b50a9fc2bb3
--- /dev/null
+++ b/packages/atomic/src/components/common/heading.ts
@@ -0,0 +1,31 @@
+import {ifDefined} from 'lit-html/directives/if-defined.js';
+import {html, literal, unsafeStatic} from 'lit/static-html.js';
+
+export interface HeadingProps {
+  /**
+   * The heading level.
+   *
+   * A value outside of the range of 1 to 6 will render a div instead of a heading.
+   */
+  level: number;
+  /**
+   * Additional classes to add to the heading.
+   */
+  class?: string;
+  /**
+   * Additional parts to add to the heading.
+   */
+  part?: string;
+}
+
+export const heading = <T>(
+  {level, class: classname, part}: HeadingProps,
+  children?: T
+) => {
+  const headingTag =
+    level > 0 && level <= 6 ? unsafeStatic(`h${level}`) : literal`div`;
+
+  return html`<${headingTag} class="${ifDefined(classname)}" part="${ifDefined(part)}">
+    ${children}
+  </${headingTag}>`;
+};
diff --git a/packages/atomic/src/components/common/pager/pager-guard.tsx b/packages/atomic/src/components/common/pager/pager-guard.tsx
index afc05669dd5..a1924668bcf 100644
--- a/packages/atomic/src/components/common/pager/pager-guard.tsx
+++ b/packages/atomic/src/components/common/pager/pager-guard.tsx
@@ -1,5 +1,5 @@
 import {FunctionalComponent, h, Fragment} from '@stencil/core';
-import {Hidden} from '../hidden';
+import {Hidden} from '../stencil-hidden';
 
 export interface PagerGuardProps {
   hasError: boolean;
diff --git a/packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet-suggestions/smart-snippet-suggestions-common.tsx b/packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet-suggestions/smart-snippet-suggestions-common.tsx
index 0a729dce799..22300cf8898 100644
--- a/packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet-suggestions/smart-snippet-suggestions-common.tsx
+++ b/packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet-suggestions/smart-snippet-suggestions-common.tsx
@@ -6,10 +6,10 @@ import {
 import {h} from '@stencil/core';
 import ArrowDown from '../../../../images/arrow-down.svg';
 import ArrowRight from '../../../../images/arrow-right.svg';
-import {Heading} from '../../heading';
-import {Hidden} from '../../hidden';
 import {AnyBindings} from '../../interface/bindings';
 import {Button} from '../../stencil-button';
+import {Heading} from '../../stencil-heading';
+import {Hidden} from '../../stencil-hidden';
 
 interface SmartSnippetSuggestionProps {
   id: string;
diff --git a/packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet/smart-snippet-common.tsx b/packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet/smart-snippet-common.tsx
index 2da0d4c2f6d..92a56516a29 100644
--- a/packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet/smart-snippet-common.tsx
+++ b/packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet/smart-snippet-common.tsx
@@ -1,8 +1,8 @@
 import {SmartSnippetState, SmartSnippet} from '@coveo/headless';
 import {h} from '@stencil/core';
-import {Heading} from '../../heading';
-import {Hidden} from '../../hidden';
 import {AnyBindings} from '../../interface/bindings';
+import {Heading} from '../../stencil-heading';
+import {Hidden} from '../../stencil-hidden';
 import {SmartSnippetFeedbackBanner} from '../atomic-smart-snippet-feedback-banner';
 
 type FeedBackModalElement =
diff --git a/packages/atomic/src/components/common/heading.tsx b/packages/atomic/src/components/common/stencil-heading.tsx
similarity index 57%
rename from packages/atomic/src/components/common/heading.tsx
rename to packages/atomic/src/components/common/stencil-heading.tsx
index 034668ee08c..ec07ccb9a73 100644
--- a/packages/atomic/src/components/common/heading.tsx
+++ b/packages/atomic/src/components/common/stencil-heading.tsx
@@ -1,17 +1,12 @@
 import {h, FunctionalComponent} from '@stencil/core';
 import {JSXBase} from '@stencil/core/internal';
+import {HeadingProps} from './heading';
 
-export interface HeadingProps {
-  /**
-   * The heading level.
-   *
-   * A value outside of the range of 1 to 6 will render a div instead of a heading.
-   */
-  level: number;
-}
-
+/**
+ * @deprecated Should only be used for Stencil components; for Lit components, use the heading function instead.
+ */
 export const Heading: FunctionalComponent<
-  HeadingProps & JSXBase.HTMLAttributes<HTMLHeadingElement>
+  Pick<HeadingProps, 'level'> & JSXBase.HTMLAttributes<HTMLHeadingElement>
 > = ({level, ...htmlProps}, children) => {
   const HeadingTag = level > 0 && level <= 6 ? `h${level}` : 'div';
   return <HeadingTag {...htmlProps}>{children}</HeadingTag>;
diff --git a/packages/atomic/src/components/common/hidden.tsx b/packages/atomic/src/components/common/stencil-hidden.tsx
similarity index 100%
rename from packages/atomic/src/components/common/hidden.tsx
rename to packages/atomic/src/components/common/stencil-hidden.tsx
diff --git a/packages/atomic/src/components/common/tab-manager/tab-guard.tsx b/packages/atomic/src/components/common/tab-manager/tab-guard.tsx
index 3fd81aec884..7fb599fc45c 100644
--- a/packages/atomic/src/components/common/tab-manager/tab-guard.tsx
+++ b/packages/atomic/src/components/common/tab-manager/tab-guard.tsx
@@ -1,6 +1,6 @@
 import {Fragment, FunctionalComponent, h} from '@stencil/core';
 import {shouldDisplayOnCurrentTab} from '../../../utils/tab-utils';
-import {Hidden} from '../hidden';
+import {Hidden} from '../stencil-hidden';
 
 interface TabGuardProps {
   tabsIncluded: string | string[];
diff --git a/packages/atomic/src/components/insight/atomic-insight-refine-modal/atomic-insight-refine-modal.tsx b/packages/atomic/src/components/insight/atomic-insight-refine-modal/atomic-insight-refine-modal.tsx
index c31e6e59c67..b4cec44af94 100644
--- a/packages/atomic/src/components/insight/atomic-insight-refine-modal/atomic-insight-refine-modal.tsx
+++ b/packages/atomic/src/components/insight/atomic-insight-refine-modal/atomic-insight-refine-modal.tsx
@@ -13,12 +13,12 @@ import {
   InitializableComponent,
   InitializeBindings,
 } from '../../../utils/initialization-utils';
-import {Hidden} from '../../common/hidden';
 import {
   getClonedFacetElements,
   RefineModal,
 } from '../../common/refine-modal/modal';
 import {Button} from '../../common/stencil-button';
+import {Hidden} from '../../common/stencil-hidden';
 import {InsightBindings} from '../atomic-insight-interface/atomic-insight-interface';
 
 /**
diff --git a/packages/atomic/src/components/ipx/atomic-ipx-recs-list/atomic-recs-list/atomic-ipx-recs-list.tsx b/packages/atomic/src/components/ipx/atomic-ipx-recs-list/atomic-recs-list/atomic-ipx-recs-list.tsx
index b93f54cd9a1..dff76927c4a 100644
--- a/packages/atomic/src/components/ipx/atomic-ipx-recs-list/atomic-recs-list/atomic-ipx-recs-list.tsx
+++ b/packages/atomic/src/components/ipx/atomic-ipx-recs-list/atomic-recs-list/atomic-ipx-recs-list.tsx
@@ -30,7 +30,6 @@ import {
 import {randomID} from '../../../../utils/utils';
 import {ResultsPlaceholdersGuard} from '../../../common/atomic-result-placeholder/placeholders';
 import {Carousel} from '../../../common/carousel';
-import {Heading} from '../../../common/heading';
 import {createAppLoadedListener} from '../../../common/interface/store';
 import {DisplayGrid} from '../../../common/item-list/display-grid';
 import {DisplayWrapper} from '../../../common/item-list/display-wrapper';
@@ -46,6 +45,7 @@ import {
   ItemDisplayDensity,
   ItemDisplayImageSize,
 } from '../../../common/layout/display-options';
+import {Heading} from '../../../common/stencil-heading';
 import {RecsBindings} from '../../../recommendations/atomic-recs-interface/atomic-recs-interface';
 
 /**
diff --git a/packages/atomic/src/components/ipx/atomic-ipx-refine-modal/atomic-ipx-refine-modal.tsx b/packages/atomic/src/components/ipx/atomic-ipx-refine-modal/atomic-ipx-refine-modal.tsx
index 2673982788c..232a8ce69bd 100644
--- a/packages/atomic/src/components/ipx/atomic-ipx-refine-modal/atomic-ipx-refine-modal.tsx
+++ b/packages/atomic/src/components/ipx/atomic-ipx-refine-modal/atomic-ipx-refine-modal.tsx
@@ -12,12 +12,12 @@ import {
   InitializableComponent,
   InitializeBindings,
 } from '../../../utils/initialization-utils';
-import {Hidden} from '../../common/hidden';
 import {
   getClonedFacetElements,
   RefineModal,
 } from '../../common/refine-modal/modal';
 import {Button} from '../../common/stencil-button';
+import {Hidden} from '../../common/stencil-hidden';
 import {Bindings} from '../../search/atomic-search-interface/atomic-search-interface';
 
 /**
diff --git a/packages/atomic/src/components/recommendations/atomic-recs-list/atomic-recs-list.tsx b/packages/atomic/src/components/recommendations/atomic-recs-list/atomic-recs-list.tsx
index e2f93044e22..a61b824c19a 100644
--- a/packages/atomic/src/components/recommendations/atomic-recs-list/atomic-recs-list.tsx
+++ b/packages/atomic/src/components/recommendations/atomic-recs-list/atomic-recs-list.tsx
@@ -26,7 +26,6 @@ import {
 import {randomID} from '../../../utils/utils';
 import {ResultsPlaceholdersGuard} from '../../common/atomic-result-placeholder/placeholders';
 import {Carousel} from '../../common/carousel';
-import {Heading} from '../../common/heading';
 import {createAppLoadedListener} from '../../common/interface/store';
 import {DisplayGrid} from '../../common/item-list/display-grid';
 import {DisplayWrapper} from '../../common/item-list/display-wrapper';
@@ -42,6 +41,7 @@ import {
   ItemDisplayBasicLayout,
   getItemListDisplayClasses,
 } from '../../common/layout/display-options';
+import {Heading} from '../../common/stencil-heading';
 import {RecsBindings} from '../atomic-recs-interface/atomic-recs-interface';
 
 /**
diff --git a/packages/atomic/src/components/search/atomic-breadbox/atomic-breadbox.tsx b/packages/atomic/src/components/search/atomic-breadbox/atomic-breadbox.tsx
index 85ef75ef31d..40a8a2e31de 100644
--- a/packages/atomic/src/components/search/atomic-breadbox/atomic-breadbox.tsx
+++ b/packages/atomic/src/components/search/atomic-breadbox/atomic-breadbox.tsx
@@ -22,7 +22,7 @@ import {BreadcrumbContent} from '../../common/breadbox/breadcrumb-content';
 import {BreadcrumbShowLess} from '../../common/breadbox/breadcrumb-show-less';
 import {BreadcrumbShowMore} from '../../common/breadbox/breadcrumb-show-more';
 import {Breadcrumb as BreadboxBreadcrumb} from '../../common/breadbox/breadcrumb-types';
-import {Hidden} from '../../common/hidden';
+import {Hidden} from '../../common/stencil-hidden';
 import {Bindings} from '../atomic-search-interface/atomic-search-interface';
 
 /**
diff --git a/packages/atomic/src/components/search/atomic-generated-answer/atomic-generated-answer.tsx b/packages/atomic/src/components/search/atomic-generated-answer/atomic-generated-answer.tsx
index ab4ec8bfb2e..84105d663da 100644
--- a/packages/atomic/src/components/search/atomic-generated-answer/atomic-generated-answer.tsx
+++ b/packages/atomic/src/components/search/atomic-generated-answer/atomic-generated-answer.tsx
@@ -21,7 +21,7 @@ import {
 import {ArrayProp} from '../../../utils/props-utils';
 import {shouldDisplayOnCurrentTab} from '../../../utils/tab-utils';
 import {GeneratedAnswerCommon} from '../../common/generated-answer/generated-answer-common';
-import {Hidden} from '../../common/hidden';
+import {Hidden} from '../../common/stencil-hidden';
 import {Bindings} from '../atomic-search-interface/atomic-search-interface';
 
 /**
diff --git a/packages/atomic/src/components/search/atomic-notification/atomic-notifications.tsx b/packages/atomic/src/components/search/atomic-notification/atomic-notifications.tsx
index ac2ae0023da..18523e89b01 100644
--- a/packages/atomic/src/components/search/atomic-notification/atomic-notifications.tsx
+++ b/packages/atomic/src/components/search/atomic-notification/atomic-notifications.tsx
@@ -11,8 +11,8 @@ import {
   InitializableComponent,
   InitializeBindings,
 } from '../../../utils/initialization-utils';
-import {Heading} from '../../common/heading';
-import {Hidden} from '../../common/hidden';
+import {Heading} from '../../common/stencil-heading';
+import {Hidden} from '../../common/stencil-hidden';
 import {Bindings} from '../atomic-search-interface/atomic-search-interface';
 
 /**
diff --git a/packages/atomic/src/components/search/facets/atomic-automatic-facet/atomic-automatic-facet.tsx b/packages/atomic/src/components/search/facets/atomic-automatic-facet/atomic-automatic-facet.tsx
index d79e1c1a1ee..8ed1e5daffa 100644
--- a/packages/atomic/src/components/search/facets/atomic-automatic-facet/atomic-automatic-facet.tsx
+++ b/packages/atomic/src/components/search/facets/atomic-automatic-facet/atomic-automatic-facet.tsx
@@ -12,7 +12,7 @@ import {FacetHeader} from '../../../common/facets/facet-header/facet-header';
 import {FacetValueCheckbox} from '../../../common/facets/facet-value-checkbox/facet-value-checkbox';
 import {FacetValueLabelHighlight} from '../../../common/facets/facet-value-label-highlight/facet-value-label-highlight';
 import {FacetValuesGroup} from '../../../common/facets/facet-values-group/facet-values-group';
-import {Hidden} from '../../../common/hidden';
+import {Hidden} from '../../../common/stencil-hidden';
 import {Bindings} from '../../atomic-search-interface/atomic-search-interface';
 
 /**
diff --git a/packages/atomic/src/components/search/facets/atomic-color-facet/atomic-color-facet.tsx b/packages/atomic/src/components/search/facets/atomic-color-facet/atomic-color-facet.tsx
index efa2987a458..c0d4e00f85c 100644
--- a/packages/atomic/src/components/search/facets/atomic-color-facet/atomic-color-facet.tsx
+++ b/packages/atomic/src/components/search/facets/atomic-color-facet/atomic-color-facet.tsx
@@ -49,7 +49,7 @@ import {FacetValueBox} from '../../../common/facets/facet-value-box/facet-value-
 import {FacetValueLabelHighlight} from '../../../common/facets/facet-value-label-highlight/facet-value-label-highlight';
 import {FacetValuesGroup} from '../../../common/facets/facet-values-group/facet-values-group';
 import {initializePopover} from '../../../common/facets/popover/popover-type';
-import {Hidden} from '../../../common/hidden';
+import {Hidden} from '../../../common/stencil-hidden';
 import {Bindings} from '../../atomic-search-interface/atomic-search-interface';
 import {ColorFacetCheckbox} from '../color-facet-checkbox/color-facet-checkbox';
 
diff --git a/packages/atomic/src/components/search/facets/atomic-popover/atomic-popover.tsx b/packages/atomic/src/components/search/facets/atomic-popover/atomic-popover.tsx
index ad803b080ec..a52de384933 100644
--- a/packages/atomic/src/components/search/facets/atomic-popover/atomic-popover.tsx
+++ b/packages/atomic/src/components/search/facets/atomic-popover/atomic-popover.tsx
@@ -20,8 +20,8 @@ import {
   PopoverChildFacet,
   popoverClass,
 } from '../../../common/facets/popover/popover-type';
-import {Hidden} from '../../../common/hidden';
 import {Button} from '../../../common/stencil-button';
+import {Hidden} from '../../../common/stencil-hidden';
 import {Bindings} from '../../atomic-search-interface/atomic-search-interface';
 
 /**
diff --git a/packages/atomic/src/components/search/facets/atomic-rating-facet/atomic-rating-facet.tsx b/packages/atomic/src/components/search/facets/atomic-rating-facet/atomic-rating-facet.tsx
index e3e484bdd3d..27606a64c95 100644
--- a/packages/atomic/src/components/search/facets/atomic-rating-facet/atomic-rating-facet.tsx
+++ b/packages/atomic/src/components/search/facets/atomic-rating-facet/atomic-rating-facet.tsx
@@ -37,7 +37,7 @@ import {FacetValueCheckbox} from '../../../common/facets/facet-value-checkbox/fa
 import {FacetValueLink} from '../../../common/facets/facet-value-link/facet-value-link';
 import {FacetValuesGroup} from '../../../common/facets/facet-values-group/facet-values-group';
 import {initializePopover} from '../../../common/facets/popover/popover-type';
-import {Hidden} from '../../../common/hidden';
+import {Hidden} from '../../../common/stencil-hidden';
 import {Bindings} from '../../atomic-search-interface/atomic-search-interface';
 
 /**
diff --git a/packages/atomic/src/components/search/facets/atomic-rating-range-facet/atomic-rating-range-facet.tsx b/packages/atomic/src/components/search/facets/atomic-rating-range-facet/atomic-rating-range-facet.tsx
index 6f3384b0b2f..19507dc7a79 100644
--- a/packages/atomic/src/components/search/facets/atomic-rating-range-facet/atomic-rating-range-facet.tsx
+++ b/packages/atomic/src/components/search/facets/atomic-rating-range-facet/atomic-rating-range-facet.tsx
@@ -35,7 +35,7 @@ import {FacetPlaceholder} from '../../../common/facets/facet-placeholder/facet-p
 import {FacetValueLink} from '../../../common/facets/facet-value-link/facet-value-link';
 import {FacetValuesGroup} from '../../../common/facets/facet-values-group/facet-values-group';
 import {initializePopover} from '../../../common/facets/popover/popover-type';
-import {Hidden} from '../../../common/hidden';
+import {Hidden} from '../../../common/stencil-hidden';
 import {Bindings} from '../../atomic-search-interface/atomic-search-interface';
 
 /**
diff --git a/packages/atomic/src/components/search/facets/atomic-segmented-facet-scrollable/atomic-segmented-facet-scrollable.tsx b/packages/atomic/src/components/search/facets/atomic-segmented-facet-scrollable/atomic-segmented-facet-scrollable.tsx
index 41f010ad3ee..3a0a085e19a 100644
--- a/packages/atomic/src/components/search/facets/atomic-segmented-facet-scrollable/atomic-segmented-facet-scrollable.tsx
+++ b/packages/atomic/src/components/search/facets/atomic-segmented-facet-scrollable/atomic-segmented-facet-scrollable.tsx
@@ -12,8 +12,8 @@ import {
   InitializableComponent,
   InitializeBindings,
 } from '../../../../utils/initialization-utils';
-import {Hidden} from '../../../common/hidden';
 import {Button} from '../../../common/stencil-button';
+import {Hidden} from '../../../common/stencil-hidden';
 
 type ArrowDirection = 'right' | 'left';
 
diff --git a/packages/atomic/src/components/search/facets/atomic-segmented-facet/atomic-segmented-facet.tsx b/packages/atomic/src/components/search/facets/atomic-segmented-facet/atomic-segmented-facet.tsx
index a9bd16d83d8..403e21abf43 100644
--- a/packages/atomic/src/components/search/facets/atomic-segmented-facet/atomic-segmented-facet.tsx
+++ b/packages/atomic/src/components/search/facets/atomic-segmented-facet/atomic-segmented-facet.tsx
@@ -26,7 +26,7 @@ import {
 import {ArrayProp, MapProp} from '../../../../utils/props-utils';
 import {parseDependsOn} from '../../../common/facets/depends-on';
 import {FacetValuesGroup} from '../../../common/facets/facet-values-group/facet-values-group';
-import {Hidden} from '../../../common/hidden';
+import {Hidden} from '../../../common/stencil-hidden';
 import {Bindings} from '../../atomic-search-interface/atomic-search-interface';
 import {FacetSegmentedValue} from '../facet-segmented-value/facet-segmented-value';
 
diff --git a/packages/atomic/src/components/search/result-lists/atomic-folded-result-list/atomic-folded-result-list.tsx b/packages/atomic/src/components/search/result-lists/atomic-folded-result-list/atomic-folded-result-list.tsx
index a6b1d5109c8..163b71bdba6 100644
--- a/packages/atomic/src/components/search/result-lists/atomic-folded-result-list/atomic-folded-result-list.tsx
+++ b/packages/atomic/src/components/search/result-lists/atomic-folded-result-list/atomic-folded-result-list.tsx
@@ -32,7 +32,6 @@ import {ArrayProp} from '../../../../utils/props-utils';
 import {shouldDisplayOnCurrentTab} from '../../../../utils/tab-utils';
 import {randomID} from '../../../../utils/utils';
 import {ResultsPlaceholdersGuard} from '../../../common/atomic-result-placeholder/placeholders';
-import {Hidden} from '../../../common/hidden';
 import {extractUnfoldedItem} from '../../../common/interface/item';
 import {createAppLoadedListener} from '../../../common/interface/store';
 import {DisplayWrapper} from '../../../common/item-list/display-wrapper';
@@ -50,6 +49,7 @@ import {
   ItemDisplayLayout,
   getItemListDisplayClasses,
 } from '../../../common/layout/display-options';
+import {Hidden} from '../../../common/stencil-hidden';
 import {Bindings} from '../../atomic-search-interface/atomic-search-interface';
 
 /**
diff --git a/packages/atomic/src/components/search/smart-snippets/atomic-smart-snippet/atomic-smart-snippet.tsx b/packages/atomic/src/components/search/smart-snippets/atomic-smart-snippet/atomic-smart-snippet.tsx
index e646f7d45f1..736e0919509 100644
--- a/packages/atomic/src/components/search/smart-snippets/atomic-smart-snippet/atomic-smart-snippet.tsx
+++ b/packages/atomic/src/components/search/smart-snippets/atomic-smart-snippet/atomic-smart-snippet.tsx
@@ -16,10 +16,10 @@ import {
 import {ArrayProp} from '../../../../utils/props-utils';
 import {shouldDisplayOnCurrentTab} from '../../../../utils/tab-utils';
 import {randomID} from '../../../../utils/utils';
-import {Hidden} from '../../../common/hidden';
 import {createAppLoadedListener} from '../../../common/interface/store';
 import {getAttributesFromLinkSlot} from '../../../common/item-link/attributes-slot';
 import {SmartSnippetCommon} from '../../../common/smart-snippets/atomic-smart-snippet/smart-snippet-common';
+import {Hidden} from '../../../common/stencil-hidden';
 import {Bindings} from '../../atomic-search-interface/atomic-search-interface';
 
 /**
diff --git a/packages/atomic/src/components/common/hidden.lit.ts b/packages/atomic/src/directives/hidden.ts
similarity index 100%
rename from packages/atomic/src/components/common/hidden.lit.ts
rename to packages/atomic/src/directives/hidden.ts
diff --git a/packages/atomic/src/utils/initialization-utils.tsx b/packages/atomic/src/utils/initialization-utils.tsx
index 713cc1e1a93..c54ae5b9c2c 100644
--- a/packages/atomic/src/utils/initialization-utils.tsx
+++ b/packages/atomic/src/utils/initialization-utils.tsx
@@ -6,8 +6,8 @@ import {
   forceUpdate as forceUpdateComponent,
 } from '@stencil/core';
 import {TOptions} from 'i18next';
-import {Hidden} from '../components/common/hidden';
 import {AnyBindings} from '../components/common/interface/bindings';
+import {Hidden} from '../components/common/stencil-hidden';
 import {Bindings} from '../components/search/atomic-search-interface/atomic-search-interface';
 import {buildCustomEvent} from './event-utils';
 import {