@oiz/stzh-components 3.4.0-beta1 → 3.4.0-beta2

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

@@ -0,0 +1,231 @@
+/**
+ * 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-color-grey10);
+  --hover-background-color: var(--stzh-color-grey20);
+  --title-color: var(--stzh-color-primary70);
+  --title-hover-color: var(--stzh-color-primary80);
+  --title-background-color: var(--stzh-color-secondary20);
+  --title-hover-background-color: var(--stzh-color-secondary30);
+}
+
+.stzh-poicard {
+  display: block;
+  background-color: var(--background-color);
+  text-decoration: none;
+  height: 100%;
+  /* Content */
+  /* Content head */
+  /* Content Body */
+}
+.stzh-poicard:hover {
+  --title-color: var(--title-hover-color);
+  --title-background-color: var(--title-hover-background-color);
+  --background-color: var(--hover-background-color);
+}
+.stzh-poicard__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--stzh-space-small);
+}
+.stzh-poicard__content-with-icon, .stzh-poicard__content-with-badge {
+  display: flex;
+  align-items: center;
+  gap: var(--stzh-space-xxsmall);
+}
+.stzh-poicard__content-with-icon stzh-text {
+  width: auto;
+  --color: var(--stzh-color-primary70);
+}
+.stzh-poicard__content-with-icon stzh-icon {
+  --color: var(--stzh-color-primary70);
+}
+.stzh-poicard__content-with-badge stzh-text {
+  width: auto;
+  --color: var(--stzh-color-grey80);
+}
+.stzh-poicard__content-head {
+  display: flex;
+  align-items: center;
+  padding: var(--stzh-space-xsmall) var(--stzh-space-medium) var(--stzh-space-small);
+  --color: var(--title-color);
+  background-color: var(--title-background-color);
+}
+.stzh-poicard__content-head stzh-icon {
+  --color: var(--stzh-color-primary);
+}
+.stzh-poicard__content-title {
+  width: 100%;
+  --color: var(--stzh-color-grey80);
+}
+.stzh-poicard:hover .stzh-poicard__content-title {
+  --color: var(--stzh-color-black);
+}
+.stzh-poicard__content-body {
+  padding: var(--stzh-space-xsmall) var(--stzh-space-medium) var(--stzh-space-medium);
+  display: flex;
+  flex-direction: column;
+  gap: var(--stzh-space-xsmall);
+}

package/dist/collection/components/stzh-poicard/stzh-poicard.e2e.js

@@ -0,0 +1,16 @@
+import { test } from "@playwright/test";
+import { visualDiff } from "../../../.build/test/utils";
+const URL = "components-poicard";
+const STORIES = ["default"];
+test.describe("poicard", () => {
+  STORIES.forEach((storyId) => {
+    test(`story ${storyId} visual diff`, async ({ page }) => {
+      await visualDiff({
+        storyId,
+        page,
+        url: URL,
+      });
+    });
+  });
+});
+//# sourceMappingURL=stzh-poicard.e2e.js.map

package/dist/collection/components/stzh-poicard/stzh-poicard.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stzh-poicard.e2e.js","sourceRoot":"","sources":["../../../../src/components/stzh-poicard/stzh-poicard.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAExD,MAAM,GAAG,GAAG,oBAAoB,CAAC;AAEjC,MAAM,OAAO,GAAG,CAAC,SAAS,CAAC,CAAC;AAE5B,IAAI,CAAC,QAAQ,CAAC,SAAS,EAAE,GAAG,EAAE;EAC5B,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-poicard\";\n\nconst STORIES = [\"default\"];\n\ntest.describe(\"poicard\", () => {\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-poicard/stzh-poicard.js

@@ -0,0 +1,86 @@
+import { h, Host } from "@stencil/core";
+/**
+ *
+ */
+export class StzhPoicard {
+  constructor() {
+    this.init = () => {
+      this.itemWatcher(this.item);
+    };
+    this.item = "";
+  }
+  itemWatcher(newValue) {
+    if (!newValue) {
+      this._item = undefined;
+    }
+    else if (typeof newValue === "string") {
+      try {
+        this._item = JSON.parse(newValue);
+      }
+      catch (e) {
+        this._item = undefined;
+      }
+    }
+    else {
+      this._item = newValue;
+    }
+  }
+  connectedCallback() {
+    this.init();
+  }
+  render() {
+    const classes = {
+      "stzh-poicard": true,
+    };
+    return (h(Host, null, h("a", { class: classes, href: this._item.url, target: "_blank" }, h("div", { class: "stzh-poicard__content" }, h("div", { class: "stzh-poicard__content-head" }, h("stzh-heading", null, this._item.title)), h("div", { class: "stzh-poicard__content-body" }, this._item.distance && (h("div", { class: "stzh-poicard__content-with-icon" }, h("stzh-icon", { name: "pin" }), h("stzh-text", null, this._item.distance))), this._item.temp && (h("div", { class: "stzh-poicard__content-with-icon" }, h("stzh-icon", { name: "thermometer" }), h("stzh-text", null, this._item.temp))), (this._item.statusMessageContent ||
+      this._item.statusMessage) && (h("div", { class: "stzh-poicard__content-with-badge" }, this._item.statusMessage && (h("stzh-text", { size: "milli" }, this._item.statusMessage)), this._item.statusMessageContent && (h("stzh-chip", { variant: "tag", size: "small", inverted: true, icon: "", type: this._item.success ? "default" : "error", label: this._item.statusMessageContent })))))))));
+  }
+  static get is() { return "stzh-poicard"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-poicard.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-poicard.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "item": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "StzhPoiCardItemData | string",
+          "resolved": "string | { variant: \"lido\" | \"parking\" | \"iceskating\"; url: string; title: string; distance?: string; temp?: string; statusMessage?: string; statusMessageContent?: string; success?: boolean; }",
+          "references": {
+            "StzhPoiCardItemData": {
+              "location": "import",
+              "path": "../../index",
+              "id": "src/index.ts::StzhPoiCardItemData"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Socialmediastream item"
+        },
+        "attribute": "item",
+        "reflect": false,
+        "defaultValue": "\"\""
+      }
+    };
+  }
+  static get elementRef() { return "element"; }
+  static get watchers() {
+    return [{
+        "propName": "item",
+        "methodName": "itemWatcher"
+      }];
+  }
+}
+//# sourceMappingURL=stzh-poicard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"stzh-poicard.js","sourceRoot":"","sources":["../../../../src/components/stzh-poicard/stzh-poicard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAGzE;;GAEG;AAMH,MAAM,OAAO,WAAW;;IAsBd,SAAI,GAAG,GAAG,EAAE;MAClB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC9B,CAAC,CAAC;gBApB2C,EAAE;;EAI/C,WAAW,CAAC,QAAsC;IAChD,IAAI,CAAC,QAAQ,EAAE;MACb,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;KACxB;SAAM,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MACvC,IAAI;QACF,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;OACnC;MAAC,OAAO,CAAC,EAAE;QACV,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;OACxB;KACF;SAAM;MACL,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;KACvB;EACH,CAAC;EAMD,iBAAiB;IACf,IAAI,CAAC,IAAI,EAAE,CAAC;EACd,CAAC;EAED,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,cAAc,EAAE,IAAI;KACrB,CAAC;IAEF,OAAO,CACL,EAAC,IAAI;MACH,SAAG,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,MAAM,EAAC,QAAQ;QACtD,WAAK,KAAK,EAAC,uBAAuB;UAChC,WAAK,KAAK,EAAC,4BAA4B;YACrC,wBAAe,IAAI,CAAC,KAAK,CAAC,KAAK,CAAgB,CAC3C;UACN,WAAK,KAAK,EAAC,4BAA4B;YACpC,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,CACtB,WAAK,KAAK,EAAC,iCAAiC;cAC1C,iBAAW,IAAI,EAAC,KAAK,GAAa;cAClC,qBAAY,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAa,CACxC,CACP;YAEA,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,CAClB,WAAK,KAAK,EAAC,iCAAiC;cAC1C,iBAAW,IAAI,EAAC,aAAa,GAAa;cAC1C,qBAAY,IAAI,CAAC,KAAK,CAAC,IAAI,CAAa,CACpC,CACP;YAEA,CAAC,IAAI,CAAC,KAAK,CAAC,oBAAoB;cAC/B,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,IAAI,CAC7B,WAAK,KAAK,EAAC,kCAAkC;cAC1C,IAAI,CAAC,KAAK,CAAC,aAAa,IAAI,CAC3B,iBAAW,IAAI,EAAC,OAAO,IACpB,IAAI,CAAC,KAAK,CAAC,aAAa,CACf,CACb;cACA,IAAI,CAAC,KAAK,CAAC,oBAAoB,IAAI,CAClC,iBACE,OAAO,EAAC,KAAK,EACb,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,IAAI,EACd,IAAI,EAAC,EAAE,EACP,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,EAC9C,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,oBAAoB,GAC3B,CACd,CACG,CACP,CACG,CACF,CACJ,CACC,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Prop, Watch } from \"@stencil/core\";\nimport { StzhPoiCardItemData } from \"../../index\";\n\n/**\n *\n */\n@Component({\n  tag: \"stzh-poicard\",\n  styleUrl: \"stzh-poicard.scss\",\n  scoped: true,\n})\nexport class StzhPoicard {\n  @Element() element: HTMLStzhPoicardElement;\n\n  /** Socialmediastream item */\n  @Prop() item: StzhPoiCardItemData | string = \"\";\n  private _item: StzhPoiCardItemData | undefined;\n\n  @Watch(\"item\")\n  itemWatcher(newValue: StzhPoiCardItemData | string) {\n    if (!newValue) {\n      this._item = undefined;\n    } else if (typeof newValue === \"string\") {\n      try {\n        this._item = JSON.parse(newValue);\n      } catch (e) {\n        this._item = undefined;\n      }\n    } else {\n      this._item = newValue;\n    }\n  }\n\n  private init = () => {\n    this.itemWatcher(this.item);\n  };\n\n  connectedCallback() {\n    this.init();\n  }\n\n  render() {\n    const classes = {\n      \"stzh-poicard\": true,\n    };\n\n    return (\n      <Host>\n        <a class={classes} href={this._item.url} target=\"_blank\">\n          <div class=\"stzh-poicard__content\">\n            <div class=\"stzh-poicard__content-head\">\n              <stzh-heading>{this._item.title}</stzh-heading>\n            </div>\n            <div class=\"stzh-poicard__content-body\">\n              {this._item.distance && (\n                <div class=\"stzh-poicard__content-with-icon\">\n                  <stzh-icon name=\"pin\"></stzh-icon>\n                  <stzh-text>{this._item.distance}</stzh-text>\n                </div>\n              )}\n\n              {this._item.temp && (\n                <div class=\"stzh-poicard__content-with-icon\">\n                  <stzh-icon name=\"thermometer\"></stzh-icon>\n                  <stzh-text>{this._item.temp}</stzh-text>\n                </div>\n              )}\n\n              {(this._item.statusMessageContent ||\n                this._item.statusMessage) && (\n                <div class=\"stzh-poicard__content-with-badge\">\n                  {this._item.statusMessage && (\n                    <stzh-text size=\"milli\">\n                      {this._item.statusMessage}\n                    </stzh-text>\n                  )}\n                  {this._item.statusMessageContent && (\n                    <stzh-chip\n                      variant=\"tag\"\n                      size=\"small\"\n                      inverted={true}\n                      icon=\"\"\n                      type={this._item.success ? \"default\" : \"error\"}\n                      label={this._item.statusMessageContent}\n                    ></stzh-chip>\n                  )}\n                </div>\n              )}\n            </div>\n          </div>\n        </a>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,117 @@
+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-poicard";
+const story = createComponentStory(COMPONENT_NAME);
+
+const TEMPLATE = `
+<stzh-poicard></stzh-poicard>
+`;
+
+export default {
+  title: "Components/Poicard",
+  component: COMPONENT_NAME,
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+    design: {
+      type: "figma",
+      url: getFigmaLink("poicard"),
+      allowFullscreen: true,
+    },
+  },
+  decorators: [withActions, withDesign],
+};
+
+export const LidoOpen = {
+  render: (args) => story(args, TEMPLATE),
+  args: {
+    item: {
+      variant: "lido",
+      url: "#",
+      title: "Flussbad Au-Höngg",
+      temp: "21°C",
+      distance: "2700m",
+      statusMessageContent: "offen bis 19 uhr",
+      success: true,
+    },
+  },
+};
+
+export const LidoClosed = {
+  render: (args) => story(args, TEMPLATE),
+  args: {
+    item: {
+      variant: "lido",
+      url: "#",
+      title: "Flussbad Au-Höngg",
+      distance: "2700m",
+      temp: "21°C",
+      statusMessageContent: "geschlossen",
+      success: false,
+    },
+  },
+};
+
+export const ParkingAvailable = {
+  render: (args) => story(args, TEMPLATE),
+  args: {
+    item: {
+      variant: "parking",
+      url: "#",
+      title: "Parkhaus Urania",
+      distance: "2700m",
+      statusMessage: "Freie Parkplätze: ",
+      statusMessageContent: "585",
+      success: true,
+    },
+  },
+};
+
+export const ParkingBusy = {
+  render: (args) => story(args, TEMPLATE),
+  args: {
+    item: {
+      variant: "parking",
+      url: "#",
+      title: "Parkhaus Urania",
+      distance: "2700m",
+      statusMessage: "Freie Parkplätze: ",
+      statusMessageContent: "Keine",
+      success: false,
+    },
+  },
+};
+
+export const IceskatingOpen = {
+  render: (args) => story(args, TEMPLATE),
+  args: {
+    item: {
+      url: "#",
+      title: "Kunsteisbahn Dolder",
+      distance: "1576m",
+      statusMessageContent: "offen bis 19 uhr",
+      success: true,
+    },
+  },
+};
+
+export const IceskatingClosed = {
+  render: (args) => story(args, TEMPLATE),
+  args: {
+    item: {
+      url: "#",
+      title: "Kunsteisbahn Dolder",
+      distance: "1576m",
+      statusMessageContent: "geschlossen",
+      success: false,
+    },
+  },
+};

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

@@ -0,0 +1,210 @@
+/**
+ * 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;
+}
+
+.stzh-poilist__header {
+  margin-bottom: var(--stzh-space-small);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+@media screen and (min-width: 900px) {
+  .stzh-poilist__header {
+    margin-bottom: var(--stzh-space-medium);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-poilist__header {
+    margin-bottom: var(--stzh-space-large);
+  }
+}
+.stzh-poilist__header stzh-text {
+  --color: var(--stzh-color-grey80);
+  font-family: var(--stzh-font-family-heavy);
+  font-weight: var(--stzh-font-weight-heavy);
+  font-style: var(--stzh-font-style-heavy);
+}
+.stzh-poilist__show-more {
+  margin-top: var(--stzh-space-xlarge);
+  display: grid;
+}
+@media screen and (min-width: 900px) {
+  .stzh-poilist__show-more {
+    margin-top: var(--stzh-space-xxlarge);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-poilist__show-more {
+    margin-top: var(--stzh-space-xxxlarge);
+  }
+}
+@media screen and (min-width: 600px) {
+  .stzh-poilist__show-more {
+    justify-content: center;
+  }
+}
+.stzh-poilist stzh-dropdown {
+  --color: var(--stzh-color-primary90);
+  --icon-color: var(--stzh-color-primary90);
+  --icon-angle-color: var(--stzh-color-primary90);
+}

package/dist/collection/components/stzh-poilist/stzh-poilist.e2e.js

@@ -0,0 +1,16 @@
+import { test } from "@playwright/test";
+import { visualDiff } from "../../../.build/test/utils";
+const URL = "components-poilist";
+const STORIES = ["default"];
+test.describe("poilist", () => {
+  STORIES.forEach((storyId) => {
+    test(`story ${storyId} visual diff`, async ({ page }) => {
+      await visualDiff({
+        storyId,
+        page,
+        url: URL,
+      });
+    });
+  });
+});
+//# sourceMappingURL=stzh-poilist.e2e.js.map

package/dist/collection/components/stzh-poilist/stzh-poilist.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stzh-poilist.e2e.js","sourceRoot":"","sources":["../../../../src/components/stzh-poilist/stzh-poilist.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAExD,MAAM,GAAG,GAAG,oBAAoB,CAAC;AAEjC,MAAM,OAAO,GAAG,CAAC,SAAS,CAAC,CAAC;AAE5B,IAAI,CAAC,QAAQ,CAAC,SAAS,EAAE,GAAG,EAAE;EAC5B,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-poilist\";\n\nconst STORIES = [\"default\"];\n\ntest.describe(\"poilist\", () => {\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"]}