refactor: position sticky on host

src/components/container/sticky-bar/sticky-bar.scss

@@ -1,17 +1,23 @@
 @use '../../core/styles' as sbb;
 
-:host {
-  @include sbb.box-sizing;
+// Default component properties, defined for :host. Properties which can not
+// travel the shadow boundary are defined through this mixin
+@include sbb.host-component-properties;
+
+$intersection-offset: 1;
 
+:host {
   --sbb-sticky-bar-padding-block: var(--sbb-spacing-responsive-xxxs);
   --sbb-sticky-bar-animation-duration: var(--sbb-animation-duration-5x);
   --sbb-sticky-bar-animation-easing: var(--sbb-animation-easing);
 
-  // Display contents needed to get the sticky bar sticky.
-  display: contents;
+  position: sticky;
+  inset-block-end: #{sbb.px-to-rem-build(-$intersection-offset)};
 }
 
 :host([data-sticking]) {
+  border-block-end: #{sbb.px-to-rem-build($intersection-offset)} solid transparent;
+
   --sbb-sticky-bar-sticky-background-color: var(
     --sbb-container-background-color,
     var(--sbb-color-white-default)
@@ -37,14 +43,7 @@
   --sbb-sticky-bar-animation-duration: 0.1ms;
 }
 
-.sbb-sticky-bar__wrapper {
-  position: sticky;
-  inset-block-end: 0;
-  display: block;
-  width: 100%;
-}
-
-.sbb-sticky-bar__wrapper::before {
+.sbb-sticky-bar::before {
   content: '';
   position: absolute;
   inset: 0;
@@ -74,9 +73,6 @@
   transition-duration: var(--sbb-sticky-bar-animation-duration);
   transition-timing-function: var(--sbb-sticky-bar-animation-easing);
 
-  // To push the .sbb-sticky-bar__intersector up without using absolute position we need a negative block margin.
-  margin-block-end: #{sbb.px-to-rem-build(-1)};
-
   :host(:not([data-expanded])) & {
     @include sbb.page-spacing;
   }
@@ -85,9 +81,3 @@
     @include sbb.page-spacing-expanded;
   }
 }
-
-.sbb-sticky-bar__intersector {
-  // In order to make the intersection observer work properly on windows the intersector needs to have a defined height
-  height: #{sbb.px-to-rem-build(1)};
-  width: 100%;
-}

src/components/container/sticky-bar/sticky-bar.spec.ts

@@ -11,12 +11,8 @@ describe('sbb-sticky-bar', () => {
     );
 
     expect(root).shadowDom.to.be.equal(`
-      <div class="sbb-sticky-bar__wrapper">
-        <div class="sbb-sticky-bar">
-          <slot></slot>
-        </div>
-      </div>
-      <div class="sbb-sticky-bar__intersector">
+      <div class="sbb-sticky-bar">
+        <slot></slot>
       </div>
     `);
   });

src/components/container/sticky-bar/sticky-bar.ts

@@ -7,6 +7,7 @@ import { AgnosticIntersectionObserver } from '../../core/observers';
 import '../container';
 
 import style from './sticky-bar.scss?lit&inline';
+
 /**
  * A container that sticks to the bottom of the page if slotted into `sbb-container`.
  *
@@ -23,9 +24,9 @@ export class SbbStickyBarElement extends LitElement {
   @property({ attribute: 'disable-animation', reflect: true, type: Boolean })
   public disableAnimation = false;
 
-  private _intersector?: HTMLSpanElement;
-  private _observer = new AgnosticIntersectionObserver((entries) =>
-    this._toggleShadowVisibility(entries[0]),
+  private _observer = new AgnosticIntersectionObserver(
+    (entries) => this._toggleShadowVisibility(entries[0]),
+    { threshold: [1] },
   );
 
   public override connectedCallback(): void {
@@ -37,16 +38,7 @@ export class SbbStickyBarElement extends LitElement {
     if (container) {
       toggleDatasetEntry(this, 'expanded', container.expanded);
     }
-    if (this._intersector) {
-      this._observer.observe(this._intersector);
-    }
-  }
-
-  protected override firstUpdated(): void {
-    if (!this._intersector) {
-      this._intersector = this.shadowRoot!.querySelector('.sbb-sticky-bar__intersector')!;
-      this._observer.observe(this._intersector);
-    }
+    this._observer.observe(this);
   }
 
   private _toggleShadowVisibility(entry: IntersectionObserverEntry): void {
@@ -60,12 +52,9 @@ export class SbbStickyBarElement extends LitElement {
 
   protected override render(): TemplateResult {
     return html`
-      <div class="sbb-sticky-bar__wrapper">
-        <div class="sbb-sticky-bar">
-          <slot></slot>
-        </div>
+      <div class="sbb-sticky-bar">
+        <slot></slot>
       </div>
-      <div class="sbb-sticky-bar__intersector"></div>
     `;
   }
 }