@oiz/stzh-components 3.0.0 → 3.1.0

package/dist/collection/components/stzh-pi-pagetitle/stzh-pi-pagetitle.e2e.js

@@ -0,0 +1,23 @@
+import { test } from "@playwright/test";
+import { visualDiff } from "../../../.build/test/utils";
+const URL = "components-pagetitle";
+const STORIES = [
+  "default",
+  "without-image",
+  "without-lead",
+  "without-image-and-background",
+  "with-tag-without-image",
+  "with-disturber",
+];
+test.describe("pagetitle", () => {
+  STORIES.forEach((storyId) => {
+    test(`story ${storyId} visual diff`, async ({ page }) => {
+      await visualDiff({
+        storyId,
+        page,
+        url: URL
+      });
+    });
+  });
+});
+//# sourceMappingURL=stzh-pi-pagetitle.e2e.js.map

package/dist/collection/components/stzh-pi-pagetitle/stzh-pi-pagetitle.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stzh-pi-pagetitle.e2e.js","sourceRoot":"","sources":["../../../../src/components/stzh-pi-pagetitle/stzh-pi-pagetitle.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAExD,MAAM,GAAG,GAAG,sBAAsB,CAAC;AAEnC,MAAM,OAAO,GAAG;EACd,SAAS;EACT,eAAe;EACf,cAAc;EACd,8BAA8B;EAC9B,wBAAwB;EACxB,gBAAgB;CACjB,CAAC;AAEF,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;EAC9B,OAAO,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;IAC1B,IAAI,CAAC,SAAS,OAAO,cAAc,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;MACtD,MAAM,UAAU,CAAC;QACf,OAAO;QACP,IAAI;QACJ,GAAG,EAAE,GAAG;OACT,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { test } from \"@playwright/test\";\nimport { visualDiff } from \"../../../.build/test/utils\";\n\nconst URL = \"components-pagetitle\";\n\nconst STORIES = [\n  \"default\",\n  \"without-image\",\n  \"without-lead\",\n  \"without-image-and-background\",\n  \"with-tag-without-image\",\n  \"with-disturber\",\n];\n\ntest.describe(\"pagetitle\", () => {\n  STORIES.forEach((storyId) => {\n    test(`story ${storyId} visual diff`, async ({ page }) => {\n      await visualDiff({\n        storyId,\n        page,\n        url: URL\n      });\n    });\n  });\n});\n"]}

package/dist/collection/components/stzh-pi-pagetitle/stzh-pi-pagetitle.js

@@ -0,0 +1,149 @@
+import { h, Host } from "@stencil/core";
+import { hasSlot, setPropsIfNull } from "../../utils/utils";
+/**
+ * @slot heading - Slot for `stzh-heading` element
+ * @slot image - Slot for `stzh-figure` or `img` element
+ * @slot lead - Slot for `stzh-text` element
+ * @slot readspeaker - Slot for `stzh-readspeaker` element
+ */
+export class StzhPiPagetitle {
+  constructor() {
+    this.init = () => {
+      const heading = this.element.querySelector('stzh-heading[slot="heading"], [slot="heading"] stzh-heading');
+      const leads = this.element.querySelectorAll('stzh-text[slot="lead"], [slot="lead"] stzh-text');
+      const readspeakerButton = this.element.querySelector('[slot="readspeaker"] stzh-button');
+      if (heading) {
+        setPropsIfNull(heading, {
+          curve: "hero",
+          level: "1",
+        });
+      }
+      if (readspeakerButton) {
+        setPropsIfNull(readspeakerButton, {
+          variant: "tertiary-plain",
+          noPaddingLeft: true,
+          noPaddingRight: true,
+          size: "small",
+          sizeMedium: "tiny",
+          buttonAccesskey: "L",
+        });
+      }
+      leads.forEach(lead => {
+        setPropsIfNull(lead, {
+          lead: true,
+        });
+      });
+    };
+    this.level = 1;
+    this.author = "";
+    this.date = "";
+  }
+  handleLevelChange(level) {
+    const menuElement = this.element.querySelector("stzh-pi-menu");
+    if (menuElement) {
+      menuElement.breakout = level >= 3;
+    }
+  }
+  async componentDidLoad() {
+    this.handleLevelChange(this.level);
+  }
+  connectedCallback() {
+    this.init();
+  }
+  render() {
+    const imageSlotUsed = hasSlot(this.element, "image");
+    const leadSlotUsed = hasSlot(this.element, "lead");
+    const readspeakerSlotUsed = hasSlot(this.element, "readspeaker");
+    const menuSlotUsed = hasSlot(this.element, "menu");
+    const hasArticleInfo = !!this.author || !!this.date;
+    const classes = {
+      "stzh-pi-pagetitle": true,
+      "stzh-pi-pagetitle--has-image": imageSlotUsed,
+      "stzh-pi-pagetitle--has-no-image": !imageSlotUsed,
+      "stzh-pi-pagetitle--has-lead": leadSlotUsed,
+      "stzh-pi-pagetitle--has-meta": readspeakerSlotUsed,
+      "stzh-pi-pagetitle--has-menu": menuSlotUsed,
+      "stzh-pi-pagetitle--has-article-info": hasArticleInfo,
+      [`stzh-pi-pagetitle--level-${this.level}`]: !!this.level,
+    };
+    return (h(Host, { "has-menu": menuSlotUsed, "has-article-info": hasArticleInfo }, h("div", { class: classes }, h("div", { class: "stzh-pi-pagetitle__hero-container" }, h("div", { class: "stzh-pi-pagetitle__hero" }, h("div", { class: "stzh-pi-pagetitle__breadcrumbs" }, h("slot", { name: "breadcrumb" })), h("div", { class: "stzh-pi-pagetitle__meta" }, h("div", { class: "stzh-pi-pagetitle__readspeaker" }, h("slot", { name: "readspeaker" }))), h("div", { class: "stzh-pi-pagetitle__dateline" }, h("slot", { name: "dateline" })), h("div", { class: "stzh-pi-pagetitle__heading" }, h("slot", { name: "heading" })))), h("div", { class: "stzh-pi-pagetitle__image-lead-menu-container" }, h("div", { class: "stzh-pi-pagetitle__image-lead-menu" }, h("div", { class: "stzh-pi-pagetitle__menu" }, menuSlotUsed && (h("div", { class: "stzh-pi-pagetitle__menu-inner" }, h("slot", { name: "menu" })))), h("div", { class: "stzh-pi-pagetitle__image" }, [1, 2].indexOf(this.level) > -1 && (h("div", { class: "stzh-pi-pagetitle__image-wrapper" }, h("stzh-ratio", { ratio: "16:9", ratioSmall: "21:9", class: "stzh-pi-pagetitle__ratio" }, h("slot", { name: "image" }))))), menuSlotUsed && (h("div", { class: "stzh-pi-pagetitle__lead" }, h("slot", { name: "lead" }))))), !menuSlotUsed && (h("div", { class: "stzh-pi-pagetitle__lead-container" }, h("div", { class: "stzh-pi-pagetitle__lead" }, h("slot", { name: "lead" })))), hasArticleInfo && (h("div", { class: "stzh-pi-pagetitle__article-info-wrapper" }, h("div", { class: "stzh-pi-pagetitle__article-info" }, this.author && h("p", { class: "stzh-pi-pagetitle__author" }, this.author), this.date && h("p", { class: "stzh-pi-pagetitle__date" }, this.date)))))));
+  }
+  static get is() { return "stzh-pi-pagetitle"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-pi-pagetitle.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-pi-pagetitle.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "level": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "1 | 2 | 3 | 4",
+          "resolved": "1 | 2 | 3 | 4",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Level"
+        },
+        "attribute": "level",
+        "reflect": true,
+        "defaultValue": "1"
+      },
+      "author": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Author of the content"
+        },
+        "attribute": "author",
+        "reflect": true,
+        "defaultValue": "\"\""
+      },
+      "date": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Date of the content"
+        },
+        "attribute": "date",
+        "reflect": true,
+        "defaultValue": "\"\""
+      }
+    };
+  }
+  static get elementRef() { return "element"; }
+  static get watchers() {
+    return [{
+        "propName": "level",
+        "methodName": "handleLevelChange"
+      }];
+  }
+}
+//# sourceMappingURL=stzh-pi-pagetitle.js.map

package/dist/collection/components/stzh-pi-pagetitle/stzh-pi-pagetitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stzh-pi-pagetitle.js","sourceRoot":"","sources":["../../../../src/components/stzh-pi-pagetitle/stzh-pi-pagetitle.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Host, Prop, Watch } from \"@stencil/core\";\n\nimport { hasSlot, setPropsIfNull } from \"../../utils/utils\";\n\n/**\n * @slot heading - Slot for `stzh-heading` element\n * @slot image - Slot for `stzh-figure` or `img` element\n * @slot lead - Slot for `stzh-text` element\n * @slot readspeaker - Slot for `stzh-readspeaker` element\n */\n@Component({\n  tag: \"stzh-pi-pagetitle\",\n  styleUrl: \"stzh-pi-pagetitle.scss\",\n  scoped: true,\n})\nexport class StzhPiPagetitle {\n  /** Level */\n  @Prop({ reflect: true }) level: 1 | 2 | 3 | 4 = 1;\n\n  /** Author of the content */\n  @Prop({ reflect: true }) author: string = \"\";\n\n  /** Date of the content */\n  @Prop({ reflect: true }) date: string = \"\";\n\n  @Element() element: HTMLStzhPiPagetitleElement;\n\n  private init = () => {\n    const heading = this.element.querySelector('stzh-heading[slot=\"heading\"], [slot=\"heading\"] stzh-heading');\n    const leads = this.element.querySelectorAll('stzh-text[slot=\"lead\"], [slot=\"lead\"] stzh-text');\n    const readspeakerButton = this.element.querySelector('[slot=\"readspeaker\"] stzh-button');\n\n    if (heading) {\n      setPropsIfNull(heading, {\n        curve: \"hero\",\n        level: \"1\",\n      } as HTMLStzhHeadingElement);\n    }\n\n    if (readspeakerButton) {\n      setPropsIfNull(readspeakerButton, {\n        variant: \"tertiary-plain\",\n        noPaddingLeft: true,\n        noPaddingRight: true,\n        size: \"small\",\n        sizeMedium: \"tiny\",\n        buttonAccesskey: \"L\",\n      } as HTMLStzhButtonElement);\n    }\n\n    leads.forEach(lead => {\n      setPropsIfNull(lead, {\n        lead: true,\n      } as HTMLStzhTextElement);\n    });\n  };\n\n  @Watch(\"level\")\n  handleLevelChange(level: number) {\n    const menuElement = this.element.querySelector(\"stzh-pi-menu\");\n    if (menuElement) {\n      menuElement.breakout = level >= 3;\n    }\n  }\n\n  async componentDidLoad() {\n    this.handleLevelChange(this.level);\n  }\n\n  connectedCallback() {\n    this.init();\n  }\n\n  render() {\n    const imageSlotUsed = hasSlot(this.element, \"image\");\n    const leadSlotUsed = hasSlot(this.element, \"lead\");\n    const readspeakerSlotUsed = hasSlot(this.element, \"readspeaker\");\n    const menuSlotUsed = hasSlot(this.element, \"menu\");\n    const hasArticleInfo = !!this.author || !!this.date;\n\n    const classes = {\n      \"stzh-pi-pagetitle\": true,\n      \"stzh-pi-pagetitle--has-image\": imageSlotUsed,\n      \"stzh-pi-pagetitle--has-no-image\": !imageSlotUsed,\n      \"stzh-pi-pagetitle--has-lead\": leadSlotUsed,\n      \"stzh-pi-pagetitle--has-meta\": readspeakerSlotUsed,\n      \"stzh-pi-pagetitle--has-menu\": menuSlotUsed,\n      \"stzh-pi-pagetitle--has-article-info\": hasArticleInfo,\n      [`stzh-pi-pagetitle--level-${this.level}`]: !!this.level,\n    };\n\n    return (\n      <Host has-menu={menuSlotUsed} has-article-info={hasArticleInfo}>\n        <div class={classes}>\n          <div class=\"stzh-pi-pagetitle__hero-container\">\n            <div class=\"stzh-pi-pagetitle__hero\">\n              <div class=\"stzh-pi-pagetitle__breadcrumbs\">\n                <slot name=\"breadcrumb\"></slot>\n              </div>\n\n              <div class=\"stzh-pi-pagetitle__meta\">\n                <div class=\"stzh-pi-pagetitle__readspeaker\">\n                  <slot name=\"readspeaker\"></slot>\n                </div>\n              </div>\n\n              <div class=\"stzh-pi-pagetitle__dateline\">\n                <slot name=\"dateline\"></slot>\n              </div>\n\n              <div class=\"stzh-pi-pagetitle__heading\">\n                <slot name=\"heading\"></slot>\n              </div>\n            </div>\n          </div>\n          <div class=\"stzh-pi-pagetitle__image-lead-menu-container\">\n            <div class=\"stzh-pi-pagetitle__image-lead-menu\">\n              <div class=\"stzh-pi-pagetitle__menu\">\n                {menuSlotUsed && (\n                  <div class=\"stzh-pi-pagetitle__menu-inner\">\n                    <slot name=\"menu\"></slot>\n                  </div>\n                )}\n              </div>\n\n              <div class=\"stzh-pi-pagetitle__image\">\n                {[1, 2].indexOf(this.level) > -1 && (\n                  <div class=\"stzh-pi-pagetitle__image-wrapper\">\n                    <stzh-ratio ratio={\"16:9\"} ratioSmall={\"21:9\"} class=\"stzh-pi-pagetitle__ratio\">\n                      <slot name={\"image\"}></slot>\n                    </stzh-ratio>\n                  </div>\n                )}\n              </div>\n\n              {menuSlotUsed && (\n                <div class=\"stzh-pi-pagetitle__lead\">\n                  <slot name=\"lead\"></slot>\n                </div>\n              )}\n            </div>\n          </div>\n\n          {!menuSlotUsed && (\n            <div class=\"stzh-pi-pagetitle__lead-container\">\n              <div class=\"stzh-pi-pagetitle__lead\">\n                <slot name=\"lead\"></slot>\n              </div>\n            </div>\n          )}\n\n          {hasArticleInfo && (\n            <div class=\"stzh-pi-pagetitle__article-info-wrapper\">\n              <div class=\"stzh-pi-pagetitle__article-info\">\n                {this.author && <p class=\"stzh-pi-pagetitle__author\">{this.author}</p>}\n                {this.date && <p class=\"stzh-pi-pagetitle__date\">{this.date}</p>}\n              </div>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/stzh-pi-pagetitle/stzh-pi-pagetitle.stories.js

@@ -0,0 +1,184 @@
+import { createComponentStory } from '../../utils/story-utils';
+import { withActions } from '@storybook/addon-actions/decorator';
+import readme from './readme.md?raw';
+import { withDesign } from 'storybook-addon-designs';
+import { getFigmaLink } from '../../../figma';
+
+const COMPONENT_NAME = 'stzh-pi-pagetitle';
+const story = createComponentStory(COMPONENT_NAME);
+
+const breadcrumbItems = [
+  {
+    label: 'Home',
+    href: '#'
+  },
+  {
+    label: 'Lorem ipsum',
+    href: '#'
+  },
+  {
+    label: 'Lorem ipsum',
+    href: '#'
+  }
+];
+
+const piMenuItems = [
+  {
+    label: 'Menu Level 1',
+    href: '#',
+    items: [
+      {
+        label: 'Menu Level 2',
+        href: '#',
+        active: true
+      },
+      {
+        label: 'Menu Level 2',
+        href: '#'
+      }
+    ]
+  },
+  {
+    label: 'Menu Level 1',
+    href: '#',
+    items: [
+      {
+        label: 'Menu Level 2',
+        href: '#'
+      },
+      {
+        label: 'Menu Level 2',
+        href: '#'
+      },
+      {
+        label: 'Menu Level 2',
+        href: '#'
+      }
+    ]
+  },
+  {
+    label: 'Menu Level 1',
+    href: '#',
+    items: [
+      {
+        label: 'Menu Level 2',
+        href: '#'
+      },
+      {
+        label: 'Menu Level 2',
+        href: '#'
+      },
+      {
+        label: 'Menu Level 2',
+        href: '#'
+      },
+      {
+        label: 'Menu Level 2',
+        href: '#'
+      },
+      {
+        label: 'Menu Level 2',
+        href: '#'
+      },
+      {
+        label: 'Menu Level 2',
+        href: '#'
+      }
+    ]
+  },
+  {
+    label: 'Menu Level 1',
+    href: '#',
+    items: [
+      {
+        label: 'Menu Level 2',
+        href: '#'
+      },
+      {
+        label: 'Menu Level 2',
+        href: '#'
+      },
+      {
+        label: 'Menu Level 2',
+        href: '#'
+      },
+      {
+        label: 'Menu Level 2',
+        href: '#'
+      }
+    ]
+  },
+  {
+    label: 'Menu Level 1',
+    href: '#'
+  }
+];
+
+const TEMPLATE = `
+<stzh-pi-pagetitle author="Firstname Lastname" date="27.03.2027">
+  <stzh-breadcrumb items='${JSON.stringify(breadcrumbItems)}' slot="breadcrumb"></stzh-breadcrumb>
+  <stzh-text slot="dateline">Spitzmarke Dateline</stzh-text>
+  <stzh-readspeaker slot="readspeaker" href="https://app-eu.readspeaker.com/cgi-bin/rsent?customerid=4490&lang=de_de&readid=content&url=https://www.stadt-zuerich.ch/portal/de/index/service/kontakt.html">
+    <stzh-button>
+      Read page
+    </stzh-button>
+  </stzh-readspeaker>
+  <stzh-heading slot="heading" id="anchorContent">Lorem ipsum dolor sit amet</stzh-heading>
+  <img slot="image" src="media/images/example.jpg" loading="lazy" alt="Example image" />
+  <stzh-text slot="lead">
+    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
+  </stzh-text>
+</stzh-pi-pagetitle>
+`;
+
+const TEMPLATE_WITH_MENU = `
+<stzh-pi-pagetitle author="Firstname Lastname" date="27.03.2027">
+  <stzh-breadcrumb items='${JSON.stringify(breadcrumbItems)}' slot="breadcrumb"></stzh-breadcrumb>
+  <stzh-text slot="dateline">Spitzmarke Dateline</stzh-text>
+  <stzh-readspeaker slot="readspeaker" href="https://app-eu.readspeaker.com/cgi-bin/rsent?customerid=4490&lang=de_de&readid=content&url=https://www.stadt-zuerich.ch/portal/de/index/service/kontakt.html">
+    <stzh-button>
+      Read page
+    </stzh-button>
+  </stzh-readspeaker>
+  <stzh-heading slot="heading" id="anchorContent">Lorem ipsum dolor sit amet</stzh-heading>
+  <img slot="image" src="media/images/example.jpg" loading="lazy" alt="Example image" />
+  <stzh-text slot="lead">
+    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
+  </stzh-text>
+  <stzh-pi-menu heading="Menu" subheading="Impuls Subheading" menu-items='${JSON.stringify(
+    piMenuItems
+  )}' slot="menu"></stzh-pi-menu>
+</stzh-pi-pagetitle>
+`;
+
+export default {
+  title: 'Components/PublizistischeInhalte/PiPagetitle',
+  component: COMPONENT_NAME,
+  parameters: {
+    stzh: {
+      activeTheme: 'stzh-theme-pi-lemongrass'
+    },
+    layout: 'fullwidth',
+    docs: {
+      description: {
+        component: readme
+      }
+    },
+    design: {
+      type: 'figma',
+      url: getFigmaLink('pagetitle'),
+      allowFullscreen: true
+    }
+  },
+  decorators: [withActions, withDesign]
+};
+
+export const Default = {
+  render: (args) => story(args, TEMPLATE),
+  args: {}
+};
+
+export const WithMenu = {
+  render: (args) => story(args, TEMPLATE_WITH_MENU),
+  args: {}
+};

package/dist/collection/components/stzh-pi-quote/stzh-pi-quote.css

@@ -0,0 +1,301 @@
+@charset "UTF-8";
+/**
+ * Colors
+ */
+/* Signal colors */
+/* Old colors (TODO: cleanup when not needed anymore) */
+/**
+ * Base
+ */
+/**
+ * Selection
+ */
+/**
+ * Flyingfocus
+ */
+/**
+ * Icons
+ */
+/**
+ * Link
+ */
+/**
+ * Text
+ */
+/**
+ * Section
+ */
+/**
+ * Header
+ */
+/**
+ * Footer
+ */
+/**
+ * Fieldset
+ */
+/**
+ * Progressbar
+ */
+/**
+ * Loader
+ */
+/**
+ * Table
+ */
+/**
+ * Heading
+ */
+/**
+ * Text
+ */
+/**
+ * Menu (Item)
+ */
+/**
+ * Form Elements (Input / Checkbox / Radio / Select / Datepicker)
+ */
+/**
+ * Popover
+ */
+/**
+ * Tooltips
+ */
+/**
+ * Dialogs / Popover
+ */
+/**
+ * Overlays
+ */
+/**
+ * Accordions
+ */
+/**
+ * Timeline
+ */
+/**
+ * Buttons
+ */
+/**
+ * Ratios
+ */
+/**
+ * Pagetitle
+ */
+/**
+ * TopnewsMostsearched
+ */
+/**
+ * Calendar
+ */
+/**
+ * Cta
+ */
+/**
+ * Toasts
+ */
+/**
+ * Box Shadows
+ */
+/**
+ * Z-Indexes
+ * Inspired by https://www.duetds.com/tokens/#z-index
+ */
+/**
+ * Icon sizes
+ */
+/**
+ * Grid
+ */
+/**
+ * Container
+ */
+/**
+ * Breakpoints
+ */
+/**
+ * Ratios
+ */
+/**
+ * Spaces
+ */
+/**
+ * Fonts
+ */
+:host {
+  font-family: var(--stzh-font-family-medium);
+  font-weight: var(--stzh-font-weight-medium);
+  font-style: var(--stzh-font-style-medium);
+  color: var(--stzh-base-color);
+  box-sizing: border-box;
+  display: block;
+  /* default outline value, which will be applied to all elements receiving focus
+  the .has-focus class is used by the focus target */
+}
+:host[hidden] {
+  display: none;
+}
+:host::-moz-selection {
+  color: var(--stzh-selection-color);
+  background-color: var(--stzh-selection-background-color);
+}
+:host::selection {
+  color: var(--stzh-selection-color);
+  background-color: var(--stzh-selection-background-color);
+}
+:host *,
+:host *::before,
+:host *::after {
+  box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
+  -webkit-text-decoration-skip-ink: var(--stzh-link-text-decoration-skip-ink);
+          text-decoration-skip-ink: var(--stzh-link-text-decoration-skip-ink);
+}
+:host .has-focus {
+  outline: var(--stzh-flyingfocus-color) solid 0.125rem;
+  outline-offset: 0.125rem;
+}
+:host .stzh-fylingfocus-focused {
+  outline-style: none !important;
+}
+:host .stzh-fylingfocus-focused::-moz-focus-inner {
+  border: 0 !important;
+}
+
+:host {
+  --background-color: var(--stzh-pi-quote-background-color, var(--stzh-color-primary30));
+  --color: var(--stzh-pi-quote-color, var(--stzh-color-primary50));
+}
+
+.stzh-pi-quote {
+  position: relative;
+  background-color: var(--background-color);
+  padding-top: var(--stzh-space-xlarge);
+  padding-right: var(--stzh-space-xlarge);
+  padding-bottom: var(--stzh-space-xlarge);
+  padding-left: var(--stzh-space-xlarge);
+}
+@media screen and (min-width: 900px) {
+  .stzh-pi-quote {
+    padding-top: var(--stzh-space-xxlarge);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-pi-quote {
+    padding-top: var(--stzh-space-xxxlarge);
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-pi-quote {
+    padding-right: var(--stzh-space-xxlarge);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-pi-quote {
+    padding-right: var(--stzh-space-xxxlarge);
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-pi-quote {
+    padding-bottom: var(--stzh-space-xxlarge);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-pi-quote {
+    padding-bottom: var(--stzh-space-xxxlarge);
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-pi-quote {
+    padding-left: var(--stzh-space-xxlarge);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-pi-quote {
+    padding-left: var(--stzh-space-xxxlarge);
+  }
+}
+@media screen and (min-width: 600px) {
+  .stzh-pi-quote {
+    padding-left: 5.4375rem;
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-pi-quote {
+    padding-left: 9.875rem;
+  }
+}
+@media print {
+  .stzh-pi-quote {
+    page-break-inside: avoid;
+    -moz-column-break-inside: avoid;
+         break-inside: avoid;
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+}
+.stzh-pi-quote__text {
+  font-size: var(--stzh-font-curve-h3-default-font-size, var(--stzh-font-centi-font-size));
+  line-height: var(--stzh-font-curve-h3-default-text-line-height, var(--stzh-font-centi-text-line-height));
+  letter-spacing: var(--stzh-font-curve-h3-default-text-letter-spacing);
+  font-family: var(--stzh-font-family-heavy);
+  font-weight: var(--stzh-font-weight-heavy);
+  font-style: var(--stzh-font-style-heavy);
+  margin: 0;
+  padding: 0;
+  display: flex;
+}
+@media screen and (min-width: 600px) {
+  .stzh-pi-quote__text {
+    font-size: var(--stzh-font-curve-h3-small-font-size, var(--stzh-font-deci-font-size));
+    line-height: var(--stzh-font-curve-h3-small-text-line-height, var(--stzh-font-deci-text-line-height));
+    letter-spacing: var(--stzh-font-curve-h3-small-text-letter-spacing);
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-pi-quote__text {
+    font-size: var(--stzh-font-curve-h3-medium-font-size, var(--stzh-font-deca-font-size));
+    line-height: var(--stzh-font-curve-h3-medium-text-line-height, var(--stzh-font-deca-text-line-height));
+    letter-spacing: var(--stzh-font-curve-h3-medium-text-letter-spacing, var(--stzh-font-deca-text-letter-spacing));
+  }
+}
+@media screen and (min-width: 1600px) {
+  .stzh-pi-quote__text {
+    font-size: var(--stzh-font-curve-h3-ultra-font-size, var(--stzh-font-hecto-font-size));
+    line-height: var(--stzh-font-curve-h3-ultra-text-line-height, var(--stzh-font-hecto-text-line-height));
+    letter-spacing: var(--stzh-font-curve-h3-ultra-text-letter-spacing, var(--stzh-font-hecto-text-letter-spacing));
+  }
+}
+.stzh-pi-quote__text::before, .stzh-pi-quote__text::after {
+  display: block;
+  font-size: var(--stzh-font-mega-font-size);
+}
+@media screen and (min-width: 1260px) {
+  .stzh-pi-quote__text::before, .stzh-pi-quote__text::after {
+    font-size: var(--stzh-font-hero-font-size);
+  }
+}
+.stzh-pi-quote__text::before {
+  content: "«";
+  color: var(--color);
+  display: flex;
+  align-items: flex-start;
+  padding-right: var(--stzh-space-xsmall);
+  line-height: 0;
+  padding-top: var(--stzh-space-small);
+}
+.stzh-pi-quote__text::after {
+  content: "»";
+  color: var(--color);
+  display: flex;
+  align-items: flex-end;
+  padding-left: var(--stzh-space-xsmall);
+  line-height: 0;
+  padding-bottom: var(--stzh-space-medium);
+}
+@media screen and (min-width: 1260px) {
+  .stzh-pi-quote__text::after {
+    padding-bottom: var(--stzh-space-large);
+  }
+}