@oiz/stzh-components 2.11.0-beta1 → 2.11.1

package/dist/collection/components/stzh-sticky/stzh-sticky.js

@@ -1,22 +1,107 @@
 import { Host, h } from "@stencil/core";
+import { isVisible, offset } from "../../utils/utils";
 /**
  *
  */
 export class StzhSticky {
   constructor() {
-    this.observe = ([entry]) => {
-      this.updateStuck(entry.target);
+    this.fixedHeight = 0;
+    this.fixedWidth = 0;
+    this.fixedLimit = null;
+    this.handleScroll = () => {
+      if (this.debounceScroll) {
+        window.cancelAnimationFrame(this.debounceScroll);
+      }
+      this.debounceScroll = requestAnimationFrame(this.updateFixedByScroll);
+    };
+    this.handleResize = () => {
+      if (this.debounceResize) {
+        window.cancelAnimationFrame(this.debounceResize);
+      }
+      this.debounceResize = requestAnimationFrame(this.updateFixedByResize);
+    };
+    this.updateFixedByScroll = () => {
+      if (!isVisible(this.stickyElement)) {
+        return;
+      }
+      this.scrollX = window.scrollX;
+      this.scrollY = window.scrollY;
+      this.fixedLimit = this.getFixedLimit();
+      if (this.isStuckTop || this.isStuckBottom) {
+        const off = offset(this.spacerElement);
+        this.fixedTop = off.top;
+        this.fixedLeft = off.left;
+      }
+      else {
+        const off = offset(this.stickyElement);
+        this.fixedTop = off.top;
+        this.fixedLeft = off.left;
+      }
+      // console.log(
+      //   this.scrollX,
+      //   this.scrollY,
+      //   this.windowHeight, 
+      //   this.fixedTop,
+      //   this.fixedLeft,
+      //   this.fixedHeight,
+      //   this.fixedLimit,
+      // );
+      this.isStuckBottom = !this.disableStickyBottom
+        && this.scrollY + this.windowHeight <= this.fixedTop + this.fixedHeight;
+      this.isStuckTop = !this.disableStickyTop
+        && this.scrollY >= this.fixedTop;
+      this.hasReachedTopLimit = this.fixedLimit
+        && this.scrollY + this.windowHeight - this.fixedHeight <= this.fixedLimit.top;
+      this.hasReachedBottomLimit = this.fixedLimit
+        && this.scrollY >= this.fixedLimit.bottom - this.fixedHeight;
+      // console.log(
+      //   this.isStuckBottom,
+      //   this.isStuckTop,
+      //   this.hasReachedBottomLimit,
+      //   this.hasReachedTopLimit,
+      // );
+      if (this.isStuckTop || this.isStuckBottom) {
+        this.setFixed();
+      }
+      else {
+        this.setUnfixed();
+      }
+    };
+    this.updateFixedByResize = () => {
+      // reset sticky so we can read current offsets
+      this.setUnfixed();
+      this.stickyElement.style.position = "static";
+      this.isStuckTop = false;
+      this.isStuckBottom = false;
+      if (isVisible(this.stickyElement)) {
+        this.windowHeight = window.innerHeight;
+        this.fixedHeight = this.stickyElement.offsetHeight;
+        this.fixedWidth = this.stickyElement.offsetWidth;
+        this.spacerElement.style.height = `${this.fixedHeight}px`;
+        this.updateFixedByScroll();
+      }
+    };
+    this.observe = () => {
+      this.updateStuck();
     };
     this.disableStickyTop = false;
     this.disableStickyBottom = false;
     this.breakout = false;
+    this.position = "sticky";
     this.isStuckTop = false;
     this.isStuckBottom = false;
+    this.hasReachedTopLimit = false;
+    this.hasReachedBottomLimit = false;
   }
   disableStickyWatcher() {
     requestAnimationFrame(() => {
       requestAnimationFrame(() => {
-        this.updateStuck(this.element);
+        if (this.position === "fixed") {
+          this.updateFixedByResize();
+        }
+        else {
+          this.updateStuck();
+        }
       });
     });
   }
@@ -32,10 +117,28 @@ export class StzhSticky {
       sticky: newValue
     });
   }
-  updateStuck(element) {
-    const topCss = parseInt(getComputedStyle(element).top, 10);
-    const bottomCss = parseInt(getComputedStyle(element).bottom, 10);
-    const rect = element.getBoundingClientRect();
+  positionWatcher(newValue) {
+    if (newValue === "fixed") {
+      if (this.observer) {
+        this.observer.disconnect();
+      }
+      window.addEventListener("scroll", this.handleScroll, { passive: true });
+      window.addEventListener("resize", this.handleResize);
+      this.updateFixedByResize();
+    }
+    else {
+      window.removeEventListener("scroll", this.handleScroll);
+      window.removeEventListener("resize", this.handleResize);
+      this.setUnfixed();
+      this.observer = new IntersectionObserver(this.observe, { threshold: [1] });
+      this.observer.observe(this.stickyElement);
+      this.updateStuck();
+    }
+  }
+  updateStuck() {
+    const topCss = parseInt(getComputedStyle(this.stickyElement).top, 10);
+    const bottomCss = parseInt(getComputedStyle(this.stickyElement).bottom, 10);
+    const rect = this.stickyElement.getBoundingClientRect();
     if (topCss) {
       this.isStuckTop = rect.top < 0;
     }
@@ -49,24 +152,70 @@ export class StzhSticky {
       this.isStuckBottom = false;
     }
   }
-  connectedCallback() {
-    this.observer = new IntersectionObserver(this.observe, { threshold: [1] });
-    this.observer.observe(this.element);
+  getFixedLimit() {
+    const stickyContainer = this.element.closest("[data-stzh-sticky-container]");
+    if (!stickyContainer) {
+      return null;
+    }
+    const off = offset(stickyContainer);
+    return {
+      top: off.top,
+      bottom: off.top + stickyContainer.scrollHeight,
+    };
+  }
+  setUnfixed() {
+    Object.assign(this.stickyElement.style, {
+      position: null,
+      top: null,
+      bottom: null,
+      left: null,
+      width: null,
+    });
+    Object.assign(this.spacerElement.style, {
+      display: "none",
+    });
+  }
+  setFixed() {
+    const position = (this.hasReachedTopLimit || this.hasReachedBottomLimit)
+      ? "absolute"
+      : "fixed";
+    Object.assign(this.stickyElement.style, {
+      position,
+      top: position === "absolute"
+        ? `${this.isStuckTop ? this.fixedLimit.bottom - this.fixedHeight : this.fixedLimit.top}px`
+        : this.isStuckTop ? "0px" : "auto",
+      bottom: this.isStuckTop || position === "absolute"
+        ? "auto" : "0px",
+      left: `${this.fixedLeft + (position === "fixed" ? this.scrollX : 0)}px`,
+      width: `${this.fixedWidth}px`,
+    });
+    Object.assign(this.spacerElement.style, {
+      display: "block",
+    });
+  }
+  componentDidLoad() {
+    this.positionWatcher(this.position);
   }
   disconnectedCallback() {
     if (this.observer) {
       this.observer.disconnect();
     }
+    window.removeEventListener("scroll", this.handleScroll);
+    window.removeEventListener("resize", this.handleResize);
   }
   render() {
+    const isStuck = this.isStuckTop || this.isStuckBottom;
     const classes = {
       "stzh-sticky": true,
-      "stzh-sticky--is-stuck": this.isStuckTop || this.isStuckBottom,
+      "stzh-sticky--is-stuck": isStuck,
       "stzh-sticky--is-stuck-top": this.isStuckTop,
       "stzh-sticky--is-stuck-bottom": this.isStuckBottom,
-      "stzh-sticky--is-breakout": this.breakout
+      "stzh-sticky--is-breakout": this.breakout,
+      "stzh-sticky--is-disabled-sticky-top": this.disableStickyTop,
+      "stzh-sticky--is-disabled-sticky-bottom": this.disableStickyBottom,
+      [`stzh-sticky--position-${this.position}`]: !!this.position,
     };
-    return (h(Host, { "is-stuck": this.isStuckTop || this.isStuckBottom, "is-stuck-top": this.isStuckTop, "is-stuck-bottom": this.isStuckBottom }, h("div", { class: classes }, h("slot", null))));
+    return (h(Host, { "is-stuck": this.isStuckTop || this.isStuckBottom, "is-stuck-top": this.isStuckTop, "is-stuck-bottom": this.isStuckBottom }, h("div", { class: classes }, h("div", { ref: (el) => (this.spacerElement = el), class: "stzh-sticky__spacer" }), h("div", { ref: (el) => (this.stickyElement = el), class: "stzh-sticky__sticky" }, h("div", { class: "stzh-sticky__content" }, h("slot", null))))));
   }
   static get is() { return "stzh-sticky"; }
   static get encapsulation() { return "scoped"; }
@@ -135,13 +284,33 @@ export class StzhSticky {
         "attribute": "breakout",
         "reflect": true,
         "defaultValue": "false"
+      },
+      "position": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"sticky\" |\u00A0\"fixed\"",
+          "resolved": "\"fixed\" | \"sticky\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Position type used.\n\n- sticky: used only css position sticky\n- fixed: uses position fixed with js for positioning (`data-stzh-sticky-container` can be used on a container element to limit sticky position)"
+        },
+        "attribute": "position",
+        "reflect": true,
+        "defaultValue": "\"sticky\""
       }
     };
   }
   static get states() {
     return {
       "isStuckTop": {},
-      "isStuckBottom": {}
+      "isStuckBottom": {},
+      "hasReachedTopLimit": {},
+      "hasReachedBottomLimit": {}
     };
   }
   static get events() {
@@ -203,6 +372,9 @@ export class StzhSticky {
       }, {
         "propName": "isStuckBottom",
         "methodName": "isStuckBottomWatcher"
+      }, {
+        "propName": "position",
+        "methodName": "positionWatcher"
       }];
   }
 }

package/dist/collection/components/stzh-sticky/stzh-sticky.js.map

@@ -1 +1 @@
-{"version":3,"file":"stzh-sticky.js","sourceRoot":"","sources":["../../../../src/components/stzh-sticky/stzh-sticky.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  State,\n  Watch,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n\nimport {\n  StzhStickyStuckTopEvent,\n  StzhStickyStuckBottomEvent\n} from \"../../index\";\n\n/**\n *\n */\n@Component({\n  tag: \"stzh-sticky\",\n  styleUrl: \"stzh-sticky.scss\",\n  scoped: true\n})\nexport class StzhSticky {\n  /** Whether to disable sticking to top */\n  @Prop({ reflect: true }) disableStickyTop: boolean = false;\n\n  /** Whether to disable sticking to bottom */\n  @Prop({ reflect: true }) disableStickyBottom: boolean = false;\n\n  /** Whether to breakout container */\n  @Prop({ reflect: true }) breakout: boolean = false;\n\n  @Watch(\"disableStickyTop\")\n  @Watch(\"disableStickyBottom\")\n  disableStickyWatcher() {\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        this.updateStuck(this.element);\n      });\n    });\n  }\n\n  @Element() element: HTMLStzhStickyElement;\n\n  @State() isStuckTop: boolean = false;\n  @State() isStuckBottom: boolean = false;\n\n  @Watch(\"isStuckTop\")\n  isStuckTopWatcher(newValue: boolean) {\n    this.stzhStuckTop.emit({\n      component: \"stzh-sticky\",\n      sticky: newValue\n    });\n  }\n\n  @Watch(\"isStuckBottom\")\n  isStuckBottomWatcher(newValue: boolean) {\n    this.stzhStuckBottom.emit({\n      component: \"stzh-sticky\",\n      sticky: newValue\n    });\n  }\n\n  /** Sticky stuck top event */\n  @Event() stzhStuckTop: EventEmitter<StzhStickyStuckTopEvent>;\n\n  /** Sticky stuck bottom event */\n  @Event() stzhStuckBottom: EventEmitter<StzhStickyStuckBottomEvent>;\n\n  private observer: IntersectionObserver;\n\n  private updateStuck(element: HTMLElement) {\n    const topCss = parseInt(getComputedStyle(element).top, 10);\n    const bottomCss = parseInt(getComputedStyle(element).bottom, 10);\n    const rect = element.getBoundingClientRect();\n\n    if (topCss) {\n      this.isStuckTop = rect.top < 0;\n    } else {\n      this.isStuckTop = false;\n    }\n\n    if (bottomCss) {\n      this.isStuckBottom = document.documentElement.clientHeight < rect.bottom;\n    } else {\n      this.isStuckBottom = false;\n    }\n  }\n\n  private observe = ([entry]) => {\n    this.updateStuck(entry.target);\n  };\n\n  connectedCallback() {\n    this.observer = new IntersectionObserver(this.observe, { threshold: [1] });\n    this.observer.observe(this.element)\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-sticky\": true,\n      \"stzh-sticky--is-stuck\": this.isStuckTop || this.isStuckBottom,\n      \"stzh-sticky--is-stuck-top\": this.isStuckTop,\n      \"stzh-sticky--is-stuck-bottom\": this.isStuckBottom,\n      \"stzh-sticky--is-breakout\": this.breakout\n    };\n\n    return (\n      <Host\n        is-stuck={this.isStuckTop || this.isStuckBottom}\n        is-stuck-top={this.isStuckTop}\n        is-stuck-bottom={this.isStuckBottom}\n      >\n        <div class={classes}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"stzh-sticky.js","sourceRoot":"","sources":["../../../../src/components/stzh-sticky/stzh-sticky.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  State,\n  Watch,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n\nimport {\n  StzhStickyStuckTopEvent,\n  StzhStickyStuckBottomEvent\n} from \"../../index\";\n\nimport { isVisible, offset } from \"../../utils/utils\";\n\n/**\n *\n */\n@Component({\n  tag: \"stzh-sticky\",\n  styleUrl: \"stzh-sticky.scss\",\n  scoped: true\n})\nexport class StzhSticky {\n  /** Whether to disable sticking to top */\n  @Prop({ reflect: true }) disableStickyTop: boolean = false;\n\n  /** Whether to disable sticking to bottom */\n  @Prop({ reflect: true }) disableStickyBottom: boolean = false;\n\n  /** Whether to breakout container */\n  @Prop({ reflect: true }) breakout: boolean = false;\n\n  /**\n   * Position type used.\n   *\n   * - sticky: used only css position sticky\n   * - fixed: uses position fixed with js for positioning (`data-stzh-sticky-container` can be used on a container element to limit sticky position)\n   */\n  @Prop({ reflect: true }) position: \"sticky\" | \"fixed\" = \"sticky\";\n\n  @Watch(\"disableStickyTop\")\n  @Watch(\"disableStickyBottom\")\n  disableStickyWatcher() {\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        if (this.position === \"fixed\") {\n          this.updateFixedByResize();\n        } else {\n          this.updateStuck();\n        }\n      });\n    });\n  }\n\n  @Element() element: HTMLStzhStickyElement;\n\n  @State() isStuckTop: boolean = false;\n  @State() isStuckBottom: boolean = false;\n\n  @State() hasReachedTopLimit: boolean = false;\n  @State() hasReachedBottomLimit: boolean = false;\n\n  @Watch(\"isStuckTop\")\n  isStuckTopWatcher(newValue: boolean) {\n    this.stzhStuckTop.emit({\n      component: \"stzh-sticky\",\n      sticky: newValue\n    });\n  }\n\n  @Watch(\"isStuckBottom\")\n  isStuckBottomWatcher(newValue: boolean) {\n    this.stzhStuckBottom.emit({\n      component: \"stzh-sticky\",\n      sticky: newValue\n    });\n  }\n\n  @Watch(\"position\")\n  positionWatcher(newValue: string) {\n    if (newValue === \"fixed\") {\n      if (this.observer) {\n        this.observer.disconnect();\n      }\n\n      window.addEventListener(\"scroll\", this.handleScroll, { passive: true });\n      window.addEventListener(\"resize\", this.handleResize);\n\n      this.updateFixedByResize();\n    } else {\n      window.removeEventListener(\"scroll\", this.handleScroll);\n      window.removeEventListener(\"resize\", this.handleResize);\n      this.setUnfixed();\n\n      this.observer = new IntersectionObserver(this.observe, { threshold: [1] });\n      this.observer.observe(this.stickyElement);\n\n      this.updateStuck();\n    }\n  }\n\n  /** Sticky stuck top event */\n  @Event() stzhStuckTop: EventEmitter<StzhStickyStuckTopEvent>;\n\n  /** Sticky stuck bottom event */\n  @Event() stzhStuckBottom: EventEmitter<StzhStickyStuckBottomEvent>;\n\n  private observer: IntersectionObserver;\n  private debounceScroll: number;\n  private debounceResize: number;\n  private stickyElement: HTMLElement;\n  private spacerElement: HTMLElement;\n\n  private windowHeight: number;\n  private scrollX: number;\n  private scrollY: number;\n  private fixedTop: number;\n  private fixedLeft: number;\n  private fixedHeight: number = 0;\n  private fixedWidth: number = 0;\n  private fixedLimit: { top: number, bottom: number } | null = null;\n\n  private updateStuck() {\n    const topCss = parseInt(getComputedStyle(this.stickyElement).top, 10);\n    const bottomCss = parseInt(getComputedStyle(this.stickyElement).bottom, 10);\n    const rect = this.stickyElement.getBoundingClientRect();\n\n    if (topCss) {\n      this.isStuckTop = rect.top < 0;\n    } else {\n      this.isStuckTop = false;\n    }\n\n    if (bottomCss) {\n      this.isStuckBottom = document.documentElement.clientHeight < rect.bottom;\n    } else {\n      this.isStuckBottom = false;\n    }\n  }\n\n  private getFixedLimit(): { top: number, bottom: number } | null {\n    const stickyContainer = this.element.closest(\"[data-stzh-sticky-container]\");\n\n    if (!stickyContainer) {\n      return null;\n    }\n\n    const off = offset(stickyContainer);\n\n    return {\n      top: off.top,\n      bottom: off.top + stickyContainer.scrollHeight,\n    };\n  }\n\n  private setUnfixed() {\n    Object.assign(this.stickyElement.style, {\n      position: null,\n      top: null,\n      bottom: null,\n      left: null,\n      width: null,\n    });\n\n    Object.assign(this.spacerElement.style, {\n      display: \"none\",\n    });\n  }\n\n  private setFixed() {\n    const position = (this.hasReachedTopLimit || this.hasReachedBottomLimit)\n      ? \"absolute\"\n      : \"fixed\";\n\n    Object.assign(this.stickyElement.style, {\n      position,\n      top: position === \"absolute\"\n        ? `${this.isStuckTop ? this.fixedLimit.bottom - this.fixedHeight : this.fixedLimit.top}px`\n        : this.isStuckTop ? \"0px\" : \"auto\",\n      bottom: this.isStuckTop || position === \"absolute\"\n        ? \"auto\" : \"0px\",\n      left: `${this.fixedLeft + (position === \"fixed\" ? this.scrollX : 0)}px`,\n      width: `${this.fixedWidth}px`,\n    });\n\n    Object.assign(this.spacerElement.style, {\n      display: \"block\",\n    });\n  }\n\n  private handleScroll = () => {\n    if (this.debounceScroll) {\n      window.cancelAnimationFrame(this.debounceScroll);\n    }\n\n    this.debounceScroll = requestAnimationFrame(this.updateFixedByScroll);\n  }\n\n  private handleResize = () => {\n    if (this.debounceResize) {\n      window.cancelAnimationFrame(this.debounceResize);\n    }\n\n    this.debounceResize = requestAnimationFrame(this.updateFixedByResize);\n  }\n\n  private updateFixedByScroll = () => {\n    if (!isVisible(this.stickyElement)) {\n      return;\n    }\n\n    this.scrollX = window.scrollX;\n    this.scrollY = window.scrollY;\n    this.fixedLimit = this.getFixedLimit();\n\n    if (this.isStuckTop || this.isStuckBottom) {\n      const off = offset(this.spacerElement);\n\n      this.fixedTop = off.top;\n      this.fixedLeft = off.left;\n    } else {\n      const off = offset(this.stickyElement);\n\n      this.fixedTop = off.top;\n      this.fixedLeft = off.left;\n    }\n\n    // console.log(\n    //   this.scrollX,\n    //   this.scrollY,\n    //   this.windowHeight, \n    //   this.fixedTop,\n    //   this.fixedLeft,\n    //   this.fixedHeight,\n    //   this.fixedLimit,\n    // );\n\n    this.isStuckBottom = !this.disableStickyBottom\n      && this.scrollY + this.windowHeight <= this.fixedTop + this.fixedHeight;\n    this.isStuckTop = !this.disableStickyTop\n      && this.scrollY >= this.fixedTop;\n\n    this.hasReachedTopLimit = this.fixedLimit \n      && this.scrollY + this.windowHeight - this.fixedHeight <= this.fixedLimit.top;\n    this.hasReachedBottomLimit = this.fixedLimit \n      && this.scrollY >= this.fixedLimit.bottom - this.fixedHeight;\n\n    // console.log(\n    //   this.isStuckBottom,\n    //   this.isStuckTop,\n    //   this.hasReachedBottomLimit,\n    //   this.hasReachedTopLimit,\n    // );\n\n    if (this.isStuckTop || this.isStuckBottom) {\n      this.setFixed();\n    } else {\n      this.setUnfixed();\n    }\n  }\n\n  private updateFixedByResize = () => {\n    // reset sticky so we can read current offsets\n    this.setUnfixed();\n    this.stickyElement.style.position = \"static\";\n    this.isStuckTop = false;\n    this.isStuckBottom = false;\n\n    if (isVisible(this.stickyElement)) {\n      this.windowHeight = window.innerHeight;\n      this.fixedHeight = this.stickyElement.offsetHeight; \n      this.fixedWidth = this.stickyElement.offsetWidth;\n      this.spacerElement.style.height = `${this.fixedHeight}px`;\n\n      this.updateFixedByScroll();\n    }\n  }\n\n  private observe = () => {\n    this.updateStuck();\n  };\n\n  componentDidLoad() {\n    this.positionWatcher(this.position);\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n\n    window.removeEventListener(\"scroll\", this.handleScroll);\n    window.removeEventListener(\"resize\", this.handleResize);\n  }\n\n  render() {\n    const isStuck = this.isStuckTop || this.isStuckBottom;\n\n    const classes = {\n      \"stzh-sticky\": true,\n      \"stzh-sticky--is-stuck\": isStuck,\n      \"stzh-sticky--is-stuck-top\": this.isStuckTop,\n      \"stzh-sticky--is-stuck-bottom\": this.isStuckBottom,\n      \"stzh-sticky--is-breakout\": this.breakout,\n      \"stzh-sticky--is-disabled-sticky-top\": this.disableStickyTop,\n      \"stzh-sticky--is-disabled-sticky-bottom\": this.disableStickyBottom,\n      [`stzh-sticky--position-${this.position}`]: !!this.position,\n    };\n\n    return (\n      <Host\n        is-stuck={this.isStuckTop || this.isStuckBottom}\n        is-stuck-top={this.isStuckTop}\n        is-stuck-bottom={this.isStuckBottom}\n      >\n        <div class={classes}>\n          <div\n            ref={(el) => (this.spacerElement = el as HTMLDivElement)}\n            class=\"stzh-sticky__spacer\"\n          ></div>\n          <div\n            ref={(el) => (this.stickyElement = el as HTMLDivElement)}\n            class=\"stzh-sticky__sticky\"\n          >\n            <div class=\"stzh-sticky__content\">\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/stzh-sticky/stzh-sticky.stories.js

@@ -7,75 +7,111 @@ import { CTA as Button_CTA } from '../stzh-button/stzh-button.stories';
 const COMPONENT_NAME = 'stzh-sticky';
 const story = createComponentStory(COMPONENT_NAME);
 
-const TEMPLATE = `
-<stzh-row>
-  <stzh-cell span-small="4">
-    <stzh-text>
-      <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
-    </stzh-text>
-  </stzh-cell>
+const TEMPLATE = (args) => {
+  return `
+<div>
+  <stzh-text>
+    <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
+    <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
+    <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
+    <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
+    <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
+    <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
+  </stzh-text>
 
-  <stzh-cell span-small="8">
-    <stzh-text>
-      <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
+  <stzh-vspace></stzh-vspace>
 
-      <p>Ipsum ea laborum consectetur amet enim voluptate in. Laboris deserunt duis irure mollit fugiat nisi elit anim elit. Sit incididunt eiusmod labore deserunt id ea aute nisi voluptate dolore non. Incididunt nostrud laboris magna Lorem non cupidatat ad in velit eiusmod non laborum minim occaecat. Adipisicing enim esse sint ex enim sunt duis excepteur. Quis ipsum ullamco nulla est incididunt fugiat laborum sit enim. Et tempor enim ut qui sint.</p>
+  <stzh-row>
+    <stzh-cell span-small="4">
+      <stzh-text>
+        <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
+      </stzh-text>
+    </stzh-cell>
 
-      <p>Incididunt nostrud amet ea nisi cupidatat. Elit esse incididunt tempor sint non deserunt qui excepteur consequat laborum excepteur adipisicing esse est. Consequat nulla enim cillum do anim mollit duis esse magna sint amet. Culpa in nulla enim adipisicing cillum non incididunt quis officia Lorem esse velit reprehenderit. Cupidatat ex exercitation officia nulla fugiat ex. Exercitation nisi proident duis sunt. Et minim cupidatat consectetur adipisicing irure enim.</p>
+    <stzh-cell span-small="8" data-stzh-sticky-container>
+      <stzh-text>
+        <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
 
-      <p>Dolor consectetur nisi reprehenderit nostrud eiusmod ex quis officia est qui. Mollit sint reprehenderit et tempor ut aute anim magna irure fugiat cillum elit. Est est sit enim irure adipisicing est nulla. Aliqua tempor mollit ex fugiat pariatur adipisicing. Duis sit dolore aliqua pariatur do mollit aliqua consequat ex veniam.</p>
+        <p>Ipsum ea laborum consectetur amet enim voluptate in. Laboris deserunt duis irure mollit fugiat nisi elit anim elit. Sit incididunt eiusmod labore deserunt id ea aute nisi voluptate dolore non. Incididunt nostrud laboris magna Lorem non cupidatat ad in velit eiusmod non laborum minim occaecat. Adipisicing enim esse sint ex enim sunt duis excepteur. Quis ipsum ullamco nulla est incididunt fugiat laborum sit enim. Et tempor enim ut qui sint.</p>
 
-      <p>Nostrud amet laboris exercitation voluptate fugiat proident culpa consequat commodo minim ut officia dolor ad. Ut ipsum officia ipsum officia aute ad ullamco minim adipisicing commodo consectetur ut est aliqua. Magna est incididunt nisi labore ipsum minim occaecat consectetur labore nulla. Enim reprehenderit culpa excepteur enim esse ad.</p>
+        <p>Incididunt nostrud amet ea nisi cupidatat. Elit esse incididunt tempor sint non deserunt qui excepteur consequat laborum excepteur adipisicing esse est. Consequat nulla enim cillum do anim mollit duis esse magna sint amet. Culpa in nulla enim adipisicing cillum non incididunt quis officia Lorem esse velit reprehenderit. Cupidatat ex exercitation officia nulla fugiat ex. Exercitation nisi proident duis sunt. Et minim cupidatat consectetur adipisicing irure enim.</p>
 
-      <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
+        <p>Dolor consectetur nisi reprehenderit nostrud eiusmod ex quis officia est qui. Mollit sint reprehenderit et tempor ut aute anim magna irure fugiat cillum elit. Est est sit enim irure adipisicing est nulla. Aliqua tempor mollit ex fugiat pariatur adipisicing. Duis sit dolore aliqua pariatur do mollit aliqua consequat ex veniam.</p>
 
-      <p>Ipsum ea laborum consectetur amet enim voluptate in. Laboris deserunt duis irure mollit fugiat nisi elit anim elit. Sit incididunt eiusmod labore deserunt id ea aute nisi voluptate dolore non. Incididunt nostrud laboris magna Lorem non cupidatat ad in velit eiusmod non laborum minim occaecat. Adipisicing enim esse sint ex enim sunt duis excepteur. Quis ipsum ullamco nulla est incididunt fugiat laborum sit enim. Et tempor enim ut qui sint.</p>
+        <p>Nostrud amet laboris exercitation voluptate fugiat proident culpa consequat commodo minim ut officia dolor ad. Ut ipsum officia ipsum officia aute ad ullamco minim adipisicing commodo consectetur ut est aliqua. Magna est incididunt nisi labore ipsum minim occaecat consectetur labore nulla. Enim reprehenderit culpa excepteur enim esse ad.</p>
 
-      <p>Incididunt nostrud amet ea nisi cupidatat. Elit esse incididunt tempor sint non deserunt qui excepteur consequat laborum excepteur adipisicing esse est. Consequat nulla enim cillum do anim mollit duis esse magna sint amet. Culpa in nulla enim adipisicing cillum non incididunt quis officia Lorem esse velit reprehenderit. Cupidatat ex exercitation officia nulla fugiat ex. Exercitation nisi proident duis sunt. Et minim cupidatat consectetur adipisicing irure enim.</p>
+        <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
 
-      <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
+        <p>Ipsum ea laborum consectetur amet enim voluptate in. Laboris deserunt duis irure mollit fugiat nisi elit anim elit. Sit incididunt eiusmod labore deserunt id ea aute nisi voluptate dolore non. Incididunt nostrud laboris magna Lorem non cupidatat ad in velit eiusmod non laborum minim occaecat. Adipisicing enim esse sint ex enim sunt duis excepteur. Quis ipsum ullamco nulla est incididunt fugiat laborum sit enim. Et tempor enim ut qui sint.</p>
 
-      <p>Ipsum ea laborum consectetur amet enim voluptate in. Laboris deserunt duis irure mollit fugiat nisi elit anim elit. Sit incididunt eiusmod labore deserunt id ea aute nisi voluptate dolore non. Incididunt nostrud laboris magna Lorem non cupidatat ad in velit eiusmod non laborum minim occaecat. Adipisicing enim esse sint ex enim sunt duis excepteur. Quis ipsum ullamco nulla est incididunt fugiat laborum sit enim. Et tempor enim ut qui sint.</p>
+        <p>Incididunt nostrud amet ea nisi cupidatat. Elit esse incididunt tempor sint non deserunt qui excepteur consequat laborum excepteur adipisicing esse est. Consequat nulla enim cillum do anim mollit duis esse magna sint amet. Culpa in nulla enim adipisicing cillum non incididunt quis officia Lorem esse velit reprehenderit. Cupidatat ex exercitation officia nulla fugiat ex. Exercitation nisi proident duis sunt. Et minim cupidatat consectetur adipisicing irure enim.</p>
 
-      <p>Incididunt nostrud amet ea nisi cupidatat. Elit esse incididunt tempor sint non deserunt qui excepteur consequat laborum excepteur adipisicing esse est. Consequat nulla enim cillum do anim mollit duis esse magna sint amet. Culpa in nulla enim adipisicing cillum non incididunt quis officia Lorem esse velit reprehenderit. Cupidatat ex exercitation officia nulla fugiat ex. Exercitation nisi proident duis sunt. Et minim cupidatat consectetur adipisicing irure enim.</p>
+        <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
 
-      <p>Dolor consectetur nisi reprehenderit nostrud eiusmod ex quis officia est qui. Mollit sint reprehenderit et tempor ut aute anim magna irure fugiat cillum elit. Est est sit enim irure adipisicing est nulla. Aliqua tempor mollit ex fugiat pariatur adipisicing. Duis sit dolore aliqua pariatur do mollit aliqua consequat ex veniam.</p>
-    </stzh-text>
+        <p>Ipsum ea laborum consectetur amet enim voluptate in. Laboris deserunt duis irure mollit fugiat nisi elit anim elit. Sit incididunt eiusmod labore deserunt id ea aute nisi voluptate dolore non. Incididunt nostrud laboris magna Lorem non cupidatat ad in velit eiusmod non laborum minim occaecat. Adipisicing enim esse sint ex enim sunt duis excepteur. Quis ipsum ullamco nulla est incididunt fugiat laborum sit enim. Et tempor enim ut qui sint.</p>
 
-    <stzh-sticky>
-      <stzh-actions variant="cta">
-        ${Button_CTA.render({ ...Button_CTA.args, slot: 'primary' }).outerHTML}
-      </stzh-actions>
-    </stzh-sticky>
+        <p>Incididunt nostrud amet ea nisi cupidatat. Elit esse incididunt tempor sint non deserunt qui excepteur consequat laborum excepteur adipisicing esse est. Consequat nulla enim cillum do anim mollit duis esse magna sint amet. Culpa in nulla enim adipisicing cillum non incididunt quis officia Lorem esse velit reprehenderit. Cupidatat ex exercitation officia nulla fugiat ex. Exercitation nisi proident duis sunt. Et minim cupidatat consectetur adipisicing irure enim.</p>
 
-    <stzh-text>
-      <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
+        <p>Dolor consectetur nisi reprehenderit nostrud eiusmod ex quis officia est qui. Mollit sint reprehenderit et tempor ut aute anim magna irure fugiat cillum elit. Est est sit enim irure adipisicing est nulla. Aliqua tempor mollit ex fugiat pariatur adipisicing. Duis sit dolore aliqua pariatur do mollit aliqua consequat ex veniam.</p>
+      </stzh-text>
 
-      <p>Ipsum ea laborum consectetur amet enim voluptate in. Laboris deserunt duis irure mollit fugiat nisi elit anim elit. Sit incididunt eiusmod labore deserunt id ea aute nisi voluptate dolore non. Incididunt nostrud laboris magna Lorem non cupidatat ad in velit eiusmod non laborum minim occaecat. Adipisicing enim esse sint ex enim sunt duis excepteur. Quis ipsum ullamco nulla est incididunt fugiat laborum sit enim. Et tempor enim ut qui sint.</p>
+      ${!args._nested ? `
+      <stzh-sticky>
+        <stzh-actions variant="cta">
+          ${Button_CTA.render({ ...Button_CTA.args, slot: 'primary' }).outerHTML}
+        </stzh-actions>
+      </stzh-sticky>
+      ` : `
+      <div>
+        <stzh-sticky>
+          <stzh-actions variant="cta">
+            ${Button_CTA.render({ ...Button_CTA.args, slot: 'primary' }).outerHTML}
+          </stzh-actions>
+        </stzh-sticky>
+      </div>
+      `}
 
-      <p>Incididunt nostrud amet ea nisi cupidatat. Elit esse incididunt tempor sint non deserunt qui excepteur consequat laborum excepteur adipisicing esse est. Consequat nulla enim cillum do anim mollit duis esse magna sint amet. Culpa in nulla enim adipisicing cillum non incididunt quis officia Lorem esse velit reprehenderit. Cupidatat ex exercitation officia nulla fugiat ex. Exercitation nisi proident duis sunt. Et minim cupidatat consectetur adipisicing irure enim.</p>
+      <stzh-text>
+        <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
 
-      <p>Dolor consectetur nisi reprehenderit nostrud eiusmod ex quis officia est qui. Mollit sint reprehenderit et tempor ut aute anim magna irure fugiat cillum elit. Est est sit enim irure adipisicing est nulla. Aliqua tempor mollit ex fugiat pariatur adipisicing. Duis sit dolore aliqua pariatur do mollit aliqua consequat ex veniam.</p>
+        <p>Ipsum ea laborum consectetur amet enim voluptate in. Laboris deserunt duis irure mollit fugiat nisi elit anim elit. Sit incididunt eiusmod labore deserunt id ea aute nisi voluptate dolore non. Incididunt nostrud laboris magna Lorem non cupidatat ad in velit eiusmod non laborum minim occaecat. Adipisicing enim esse sint ex enim sunt duis excepteur. Quis ipsum ullamco nulla est incididunt fugiat laborum sit enim. Et tempor enim ut qui sint.</p>
 
-      <p>Nostrud amet laboris exercitation voluptate fugiat proident culpa consequat commodo minim ut officia dolor ad. Ut ipsum officia ipsum officia aute ad ullamco minim adipisicing commodo consectetur ut est aliqua. Magna est incididunt nisi labore ipsum minim occaecat consectetur labore nulla. Enim reprehenderit culpa excepteur enim esse ad.</p>
+        <p>Incididunt nostrud amet ea nisi cupidatat. Elit esse incididunt tempor sint non deserunt qui excepteur consequat laborum excepteur adipisicing esse est. Consequat nulla enim cillum do anim mollit duis esse magna sint amet. Culpa in nulla enim adipisicing cillum non incididunt quis officia Lorem esse velit reprehenderit. Cupidatat ex exercitation officia nulla fugiat ex. Exercitation nisi proident duis sunt. Et minim cupidatat consectetur adipisicing irure enim.</p>
 
-      <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
+        <p>Dolor consectetur nisi reprehenderit nostrud eiusmod ex quis officia est qui. Mollit sint reprehenderit et tempor ut aute anim magna irure fugiat cillum elit. Est est sit enim irure adipisicing est nulla. Aliqua tempor mollit ex fugiat pariatur adipisicing. Duis sit dolore aliqua pariatur do mollit aliqua consequat ex veniam.</p>
 
-      <p>Ipsum ea laborum consectetur amet enim voluptate in. Laboris deserunt duis irure mollit fugiat nisi elit anim elit. Sit incididunt eiusmod labore deserunt id ea aute nisi voluptate dolore non. Incididunt nostrud laboris magna Lorem non cupidatat ad in velit eiusmod non laborum minim occaecat. Adipisicing enim esse sint ex enim sunt duis excepteur. Quis ipsum ullamco nulla est incididunt fugiat laborum sit enim. Et tempor enim ut qui sint.</p>
+        <p>Nostrud amet laboris exercitation voluptate fugiat proident culpa consequat commodo minim ut officia dolor ad. Ut ipsum officia ipsum officia aute ad ullamco minim adipisicing commodo consectetur ut est aliqua. Magna est incididunt nisi labore ipsum minim occaecat consectetur labore nulla. Enim reprehenderit culpa excepteur enim esse ad.</p>
 
-      <p>Incididunt nostrud amet ea nisi cupidatat. Elit esse incididunt tempor sint non deserunt qui excepteur consequat laborum excepteur adipisicing esse est. Consequat nulla enim cillum do anim mollit duis esse magna sint amet. Culpa in nulla enim adipisicing cillum non incididunt quis officia Lorem esse velit reprehenderit. Cupidatat ex exercitation officia nulla fugiat ex. Exercitation nisi proident duis sunt. Et minim cupidatat consectetur adipisicing irure enim.</p>
+        <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
 
-      <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
+        <p>Ipsum ea laborum consectetur amet enim voluptate in. Laboris deserunt duis irure mollit fugiat nisi elit anim elit. Sit incididunt eiusmod labore deserunt id ea aute nisi voluptate dolore non. Incididunt nostrud laboris magna Lorem non cupidatat ad in velit eiusmod non laborum minim occaecat. Adipisicing enim esse sint ex enim sunt duis excepteur. Quis ipsum ullamco nulla est incididunt fugiat laborum sit enim. Et tempor enim ut qui sint.</p>
 
-      <p>Ipsum ea laborum consectetur amet enim voluptate in. Laboris deserunt duis irure mollit fugiat nisi elit anim elit. Sit incididunt eiusmod labore deserunt id ea aute nisi voluptate dolore non. Incididunt nostrud laboris magna Lorem non cupidatat ad in velit eiusmod non laborum minim occaecat. Adipisicing enim esse sint ex enim sunt duis excepteur. Quis ipsum ullamco nulla est incididunt fugiat laborum sit enim. Et tempor enim ut qui sint.</p>
+        <p>Incididunt nostrud amet ea nisi cupidatat. Elit esse incididunt tempor sint non deserunt qui excepteur consequat laborum excepteur adipisicing esse est. Consequat nulla enim cillum do anim mollit duis esse magna sint amet. Culpa in nulla enim adipisicing cillum non incididunt quis officia Lorem esse velit reprehenderit. Cupidatat ex exercitation officia nulla fugiat ex. Exercitation nisi proident duis sunt. Et minim cupidatat consectetur adipisicing irure enim.</p>
 
-      <p>Incididunt nostrud amet ea nisi cupidatat. Elit esse incididunt tempor sint non deserunt qui excepteur consequat laborum excepteur adipisicing esse est. Consequat nulla enim cillum do anim mollit duis esse magna sint amet. Culpa in nulla enim adipisicing cillum non incididunt quis officia Lorem esse velit reprehenderit. Cupidatat ex exercitation officia nulla fugiat ex. Exercitation nisi proident duis sunt. Et minim cupidatat consectetur adipisicing irure enim.</p>
+        <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
 
-      <p>Dolor consectetur nisi reprehenderit nostrud eiusmod ex quis officia est qui. Mollit sint reprehenderit et tempor ut aute anim magna irure fugiat cillum elit. Est est sit enim irure adipisicing est nulla. Aliqua tempor mollit ex fugiat pariatur adipisicing. Duis sit dolore aliqua pariatur do mollit aliqua consequat ex veniam.</p>
-    </stzh-text>
-  </stzh-cell>
-</stzh-row>
+        <p>Ipsum ea laborum consectetur amet enim voluptate in. Laboris deserunt duis irure mollit fugiat nisi elit anim elit. Sit incididunt eiusmod labore deserunt id ea aute nisi voluptate dolore non. Incididunt nostrud laboris magna Lorem non cupidatat ad in velit eiusmod non laborum minim occaecat. Adipisicing enim esse sint ex enim sunt duis excepteur. Quis ipsum ullamco nulla est incididunt fugiat laborum sit enim. Et tempor enim ut qui sint.</p>
+
+        <p>Incididunt nostrud amet ea nisi cupidatat. Elit esse incididunt tempor sint non deserunt qui excepteur consequat laborum excepteur adipisicing esse est. Consequat nulla enim cillum do anim mollit duis esse magna sint amet. Culpa in nulla enim adipisicing cillum non incididunt quis officia Lorem esse velit reprehenderit. Cupidatat ex exercitation officia nulla fugiat ex. Exercitation nisi proident duis sunt. Et minim cupidatat consectetur adipisicing irure enim.</p>
+
+        <p>Dolor consectetur nisi reprehenderit nostrud eiusmod ex quis officia est qui. Mollit sint reprehenderit et tempor ut aute anim magna irure fugiat cillum elit. Est est sit enim irure adipisicing est nulla. Aliqua tempor mollit ex fugiat pariatur adipisicing. Duis sit dolore aliqua pariatur do mollit aliqua consequat ex veniam.</p>
+      </stzh-text>
+    </stzh-cell>
+  </stzh-row>
+
+  <stzh-vspace></stzh-vspace>
+
+  <stzh-text>
+    <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
+    <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
+    <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
+    <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
+    <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
+    <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
+  </stzh-text>
+</div>
 `;
+}
 
 export default {
   title: 'Components/Sticky',
@@ -96,6 +132,14 @@ export default {
 };
 
 export const Default = {
-  render: (args) => story(args, TEMPLATE),
+  render: (args) => story(args, TEMPLATE(args)),
   args: {}
 }
+
+export const NestedFixed = {
+  render: (args) => story(args, TEMPLATE(args)),
+  args: {
+    position: 'fixed',
+    _nested: true
+  }
+}

package/dist/collection/components/stzh-text/stzh-text.css

@@ -151,6 +151,22 @@
 :host ::slotted(* a):hover {
   color: var(--stzh-link-hover-color);
 }
+:host ::slotted(b),
+:host ::slotted(strong),
+:host ::slotted(* b),
+:host ::slotted(* strong) {
+  font-family: var(--stzh-font-family-heavy);
+  font-weight: var(--stzh-font-weight-heavy);
+  font-style: var(--stzh-font-style-heavy);
+}
+:host ::slotted(i),
+:host ::slotted(em),
+:host ::slotted(* i),
+:host ::slotted(* em) {
+  font-family: var(--stzh-font-family-regular);
+  font-weight: var(--stzh-font-weight-regular);
+  font-style: var(--stzh-font-style-regular);
+}
 :host[lead]:not([lead=false]) {
   --color: var(--stzh-base-lead-color);
 }
@@ -220,6 +236,9 @@
   font-weight: var(--stzh-font-weight-title);
   font-style: var(--stzh-font-style-title);
 }
+.stzh-text--curve-none {
+  font-size: inherit;
+}
 .stzh-text--curve-caption {
   font-size: var(--stzh-font-curve-caption-default-font-size, var(--stzh-font-nano-font-size));
   line-height: var(--stzh-font-curve-caption-default-text-line-height, var(--stzh-font-nano-text-line-height));

package/dist/collection/components/stzh-text/stzh-text.js

@@ -69,7 +69,7 @@ export class StzhText {
         "mutable": false,
         "complexType": {
           "original": "Font.Curves",
-          "resolved": "\"caption\" | \"default\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"hero\" | \"p1\" | \"p2\"",
+          "resolved": "\"caption\" | \"default\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"hero\" | \"none\" | \"p1\" | \"p2\"",
           "references": {
             "Font": {
               "location": "import",