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

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

@@ -3,12 +3,18 @@ import { withActions } from '@storybook/addon-actions/decorator';
 import readme from './readme.md?raw';
 import { getFigmaLink } from '../../../figma';
 import { fullwidthCentered } from '../../utils/decorators';
+import { userEvent, waitFor } from "@storybook/testing-library";
+import { expect } from '@storybook/jest';
+import { getComponentByTestId, expectIsVisuallyHidden } from "../../../.storybook/utils/component-test-utils";
 
 const COMPONENT_NAME = 'stzh-button';
 const story = createComponentStory(COMPONENT_NAME);
 
+const BUTTON_TEST_ID = 'BUTTON_TEST_ID';
+let stzhButtonEl;
+
 const TEMPLATE = `
-<stzh-button></stzh-button>
+<stzh-button data-testid="${BUTTON_TEST_ID}"></stzh-button>
 `;
 
 export default {
@@ -39,55 +45,234 @@ export const Default = {
   render: (args) => story(args, TEMPLATE),
   args: {
     label: 'Button Text',
+    name: 'buttonName',
+    id: 'buttonId'
+  },
+  play: async ({ canvasElement, step }) => {
+
+    let eventDetail;
+
+    await step('Assert properties', async () => {
+      stzhButtonEl = await getComponentByTestId(canvasElement, BUTTON_TEST_ID);
+
+      expect(stzhButtonEl).toHaveAttribute('label', 'Button Text');
+      expect(stzhButtonEl).toHaveAttribute('name', 'buttonName');
+      expect(stzhButtonEl).toHaveAttribute('id', 'buttonId');
+      expect(stzhButtonEl).toHaveAttribute('variant', 'default');
+      expect(stzhButtonEl).toHaveAttribute('text-align', 'default');
+      expect(stzhButtonEl).toHaveAttribute('size', 'default');
+      expect(stzhButtonEl).toHaveAttribute('tabindex', '-1');
+      expect(stzhButtonEl).not.toHaveAttribute('active');
+      expect(stzhButtonEl).not.toHaveAttribute('effect');
+      expect(stzhButtonEl).not.toHaveAttribute('disabled');
+      expect(stzhButtonEl).not.toHaveAttribute('href');
+      expect(stzhButtonEl).not.toHaveAttribute('rounded');
+    });
+
+    await step('Assert stzhClick event details', async () => {
+      stzhButtonEl.addEventListener('stzhClick', (ev) => {
+        eventDetail = ev.detail;
+      });
+
+      const buttonEl = stzhButtonEl.querySelector('button');
+      await userEvent.click(buttonEl);
+      // component is stzh-button
+      expect(eventDetail).toHaveProperty('component', 'stzh-button');
+      // href is empty
+      expect(eventDetail).toHaveProperty('href', '');
+      // originalEvent is PointerEvent
+      expect(eventDetail.originalEvent).toHaveProperty('type', 'click');
+    });
   },
 };
 
-export const DisableOnClick = {
+export const SecondaryWithIcon = {
   render: (args) => story(args, TEMPLATE),
   args: {
     label: 'Button Text',
-    'disable-on-click': true,
+    icon: 'filtering',
+    variant: 'secondary',
+  },
+  play: async ({ canvasElement, step }) => {
+    await step('Assert properties', async () => {
+      stzhButtonEl = await getComponentByTestId(canvasElement, BUTTON_TEST_ID);
+
+      expect(stzhButtonEl).toHaveAttribute('variant', 'secondary');
+      expect(stzhButtonEl).toHaveAttribute('icon', 'filtering');
+      expect(stzhButtonEl).toHaveAttribute('icon-position', 'left');
+    });
+
+    await step('Child component stzh-icon exists and is visible', async () => {
+      const stzhIconEl = stzhButtonEl.querySelector('stzh-icon');
+      expect(stzhIconEl).not.toBeNull();
+      expect(window.getComputedStyle(stzhIconEl).display).not.toBe('none');
+    });
   },
 };
 
-export const AsLink = {
+export const IconOnly = {
   render: (args) => story(args, TEMPLATE),
   args: {
-    label: 'Button Text',
-    href: 'https://www.stadt-zuerich.ch/',
-    target: '_blank',
+    'icon-only': true,
+    icon: 'filtering',
+    label: 'Icon Button'
+  },
+  play: async ({ canvasElement, step }) => {
+
+    stzhButtonEl = await getComponentByTestId(canvasElement, BUTTON_TEST_ID);
+
+    await step('Assert properties', async () => {
+      expect(stzhButtonEl).toHaveProperty('label', 'Icon Button');
+      expect(stzhButtonEl).toHaveAttribute('icon-position', 'left');
+      expect(stzhButtonEl).toHaveAttribute('icon-only', 'true');
+      expect(stzhButtonEl).toHaveAttribute('icon', 'filtering');
+    });
+
+    await step('Label is visually hidden', async () => {
+      stzhButtonEl = canvasElement.querySelector(`[data-testid=${BUTTON_TEST_ID}]`);
+
+      const labelContainer = stzhButtonEl.querySelector('div.stzh-button__text');
+      await expect(labelContainer).not.toBeNull();
+      expectIsVisuallyHidden(labelContainer);
+    });
   },
 };
 
-export const WithIcon = {
+export const Tertiary = {
   render: (args) => story(args, TEMPLATE),
   args: {
-    label: 'Button Text',
-    icon: 'filtering',
+    label: 'Tertiary Button',
+    variant: 'tertiary',
+    active: true // ToDo: With PDESI-1507, this tests shouldn't fail anymore
+  },
+  tags: ['!test'],
+  play: async ({ canvasElement, step }) => {
+
+    stzhButtonEl = await getComponentByTestId(canvasElement, BUTTON_TEST_ID);
+
+    await step('Assert properties', async () => {
+      expect(stzhButtonEl).toHaveProperty('label', 'Tertiary Button');
+      expect(stzhButtonEl).toHaveAttribute('variant', 'tertiary');
+      expect(stzhButtonEl).toHaveAttribute('size', 'default');
+      expect(stzhButtonEl).toHaveAttribute('active');
+      expect(stzhButtonEl).not.toHaveAttribute('active', 'false');
+    });
+
+    await step('Background is transparent (fix with PDESI-1507)', async () => {
+      const buttonEl = stzhButtonEl.querySelector('button');
+      const computedStyle = window.getComputedStyle(buttonEl);
+      const backgroundColor = computedStyle.backgroundColor;
+      expect(backgroundColor).toBe('rgba(0, 0, 0, 0)');
+    });
   },
 };
 
-export const JustIcon = {
+export const TertiaryPlain = {
   render: (args) => story(args, TEMPLATE),
   args: {
-    'icon-only': true,
-    icon: 'filtering',
+    label: 'Tertiary Plain Button',
+    variant: 'tertiary-plain',
+  },
+  play: async ({ canvasElement, step }) => {
+
+    stzhButtonEl = await getComponentByTestId(canvasElement, BUTTON_TEST_ID);
+
+    await step('Assert properties', async () => {
+      expect(stzhButtonEl).toHaveAttribute('variant', 'tertiary-plain');
+    });
   },
 };
 
-export const CTA = {
+export const AsLink = {
   render: (args) => story(args, TEMPLATE),
   args: {
     label: 'Button Text',
+    href: 'https://www.stadt-zuerich.ch/',
+    target: '_blank',
+  },
+  play: async ({ canvasElement, step }) => {
+
+    stzhButtonEl = await getComponentByTestId(canvasElement, BUTTON_TEST_ID);
+
+    await step('Assert properties', async () => {
+      expect(stzhButtonEl).toHaveAttribute('href', 'https://www.stadt-zuerich.ch/');
+      expect(stzhButtonEl).toHaveAttribute('target', '_blank');
+    });
+
+    await step('Instead of button, there is an a element with href and target attributes', async () => {
+      const aEl = stzhButtonEl.querySelector('a.stzh-button');
+      const buttonEl = stzhButtonEl.querySelector('button.stzh-button');
+      expect(buttonEl).toBe(null);
+      expect(aEl).toHaveAttribute('href', 'https://www.stadt-zuerich.ch/');
+      expect(aEl).toHaveAttribute('target', '_blank');
+    });
+  },
+};
+
+export const CTA = {
+  render: (args) => story(args, TEMPLATE),
+  args: {
+    label: 'Call-To-Action Button',
     effect: 'cta',
     icon: 'arrow-right',
     'icon-position': 'right',
   },
+  play: async ({ canvasElement, step }) => {
+
+    stzhButtonEl = await getComponentByTestId(canvasElement, BUTTON_TEST_ID);
+
+    await step('Assert properties', async () => {
+      expect(stzhButtonEl).toHaveAttribute('effect', 'cta');
+      expect(stzhButtonEl).toHaveAttribute('icon-position', 'right');
+    });
+  },
 };
 
-export const LongText = {
+export const DisableOnClick = {
   render: (args) => story(args, TEMPLATE),
   args: {
+    label: 'Button Text',
+    'disable-on-click': true,
+  },
+  play: async ({ canvasElement, step }) => {
+
+    stzhButtonEl = await getComponentByTestId(canvasElement, BUTTON_TEST_ID);
+    let eventDetail;
+
+    await step('Assert properties', async () => {
+      expect(stzhButtonEl).toHaveAttribute('disable-on-click', 'true');
+    });
+
+    await step('Click sets disabled property', async () => {
+      stzhButtonEl.addEventListener('stzhClick', (ev) => {
+        eventDetail = ev.detail;
+      });
+
+      expect(stzhButtonEl).not.toHaveAttribute('disabled');
+
+      const buttonEl = stzhButtonEl.querySelector('button');
+      await userEvent.click(buttonEl);
+
+      await waitFor(() => expect(stzhButtonEl).toHaveAttribute('disabled'), {
+        timeout: 1000,
+      });
+    });
+  },
+};
+
+export const RoundedLongText = {
+  render: (args) => story(args, TEMPLATE),
+  args: {
+    rounded: true,
     label: 'Laboris laborum aute id laboris culpa esse aliquip nisi anim velit',
   },
+  play: async ({ canvasElement, step }) => {
+
+    stzhButtonEl = await getComponentByTestId(canvasElement, BUTTON_TEST_ID);
+
+    await step('Assert properties', async () => {
+      expect(stzhButtonEl).toHaveAttribute('rounded');
+      expect(stzhButtonEl).toHaveAttribute('label', 'Laboris laborum aute id laboris culpa esse aliquip nisi anim velit');
+    });
+  },
 };

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

@@ -45,6 +45,17 @@ export const Filter = {
   },
 };
 
+export const FilterLarge = {
+  render: (args) => story(args, TEMPLATE),
+  args: {
+    variant: 'filter',
+    label: 'Topic Tag',
+    size: 'large',
+    counter: '00',
+    icon: 'bulleted-list',
+  },
+};
+
 export const Tag = {
   render: (args) => story(args, TEMPLATE),
   args: {

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

@@ -264,12 +264,7 @@
   align-items: center;
   flex-wrap: wrap;
   border-radius: var(--stzh-button-border-radius);
-  column-gap: var(--stzh-space-medium);
-}
-@media screen and (min-width: 900px) {
-  .stzh-chipselect__chips {
-    row-gap: var(--stzh-space-medium);
-  }
+  gap: var(--stzh-space-medium);
 }
 .stzh-chipselect__chips:focus-within .is-focused[active] {
   --background-color: var(--stzh-color-primary90);

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

@@ -196,6 +196,14 @@
   height: 100%;
   object-fit: cover;
 }
+@media screen and (min-width: 900px) {
+  :host[has-availability=false] {
+    --grid-template-areas: var(
+        --stzh-contact-grid-template-areas,
+        "heading heading heading heading heading heading heading heading" "image image image image . . . ." "info info info info info info info info" "additional additional additional additional additional additional additional additional"
+    );
+  }
+}
 
 :host[image-position=left] {
   --grid-template-areas: var(

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

@@ -49,12 +49,6 @@ export class StzhContact {
     else {
       this._availability = newValue;
     }
-    // if (this._availability) {
-    //   this._availabilityDataItems = this._availability.map((item) => ({
-    //     value: item.hours.join(' | '),
-    //     label: item.weekday
-    //   }));
-    // }
   }
   numbersWatcher(newValue) {
     if (typeof newValue === "string") {
@@ -121,7 +115,7 @@ export class StzhContact {
     const HeadingLevel = `h${this.headingLevel}`;
     const NameHeadingLevel = this.nameHeadingLevel ? `h${this.nameHeadingLevel}` : "div";
     const AvailabilityTitleElement = `h${this.availabilityTitleLevel}`;
-    return (h(Host, { "image-position": this.imagePosition }, h("div", { class: classes, itemscope: true, itemtype: `http://schema.org/${this.type}` }, h("div", { class: "stzh-contact__main-heading", itemprop: (this.type === "Organization" && !this.heading) || (this.type === "Person" && !this.name) ? "name" : null }, this.mainHeading ? (h("stzh-heading", { level: this.mainHeadingLevel }, this.mainHeading)) : (h("slot", { name: "main-heading" }))), h("div", { class: "stzh-contact__image-wrapper" }, h("div", { class: "stzh-contact__image" }, h("slot", { name: "image" }))), h("div", { class: "stzh-contact__info" }, this.heading && (h(HeadingLevel, { class: "stzh-contact__heading", itemprop: this.type === "Organization" || !this.name ? "name" : null, innerHTML: this.heading })), this.name && (h(NameHeadingLevel, { class: {
+    return (h(Host, { "image-position": this.imagePosition, "has-availability": !!this.availability ? 'true' : 'false' }, h("div", { class: classes, itemscope: true, itemtype: `http://schema.org/${this.type}` }, h("div", { class: "stzh-contact__main-heading", itemprop: (this.type === "Organization" && !this.heading) || (this.type === "Person" && !this.name) ? "name" : null }, this.mainHeading ? (h("stzh-heading", { level: this.mainHeadingLevel }, this.mainHeading)) : (h("slot", { name: "main-heading" }))), h("div", { class: "stzh-contact__image-wrapper" }, h("div", { class: "stzh-contact__image" }, h("slot", { name: "image" }))), h("div", { class: "stzh-contact__info" }, this.heading && (h(HeadingLevel, { class: "stzh-contact__heading", itemprop: this.type === "Organization" || !this.name ? "name" : null, innerHTML: this.heading })), this.name && (h(NameHeadingLevel, { class: {
         "stzh-contact__name": true,
         "is-heading": this.nameHeadingLevel !== "",
       }, itemprop: this.type === "Person" ? "name" : null }, this.name)), h("div", { class: "stzh-contact__address", itemprop: "address", itemscope: true, itemtype: "http://schema.org/PostalAddress", innerHTML: this.address }, !this.address && (h(Fragment, null, this._street.length > 0 && (h("div", { class: "stzh-contact__street", itemprop: "streetAddress" }, this._street.map((street) => (h(Fragment, null, street, h("br", null)))), this._streetInfo.length > 0 && (h(Fragment, null, h("br", null), " ", this._streetInfo.map((streetInfo) => (h(Fragment, null, streetInfo, h("br", null)))))))), this.postalCode && (h("span", { class: "stzh-contact__postal-code", itemprop: "postalCode" }, this.postalCode, "\u00A0")), this.location && (h("span", { class: "stzh-contact__locality", itemprop: "addressLocality" }, this.location)), h("slot", { name: "address" })))), this._numbers.length > 0 && (h("div", { class: "stzh-contact__numbers" }, this._numbers.map(number => (h("div", { class: "stzh-contact__number" }, h("span", null, number.label, "\u00A0"), h("stzh-link", { size: "inherit", height: "auto", class: "stzh-contact__number-link", href: `${number.type}:${formatTel(number.number)}`, analyticsId: number.analyticsId || `${number.label} ${number.number}`, itemprop: number.type === "fax" ? "faxNumber" : "telephone" }, number.number)))))), this._emails.length > 0 && (h("div", { class: "stzh-contact__emails" }, this._emails.map(email => (h("div", { class: "stzh-contact__email" }, h("span", null, email.label, "\u00A0"), email.href ? (h("stzh-link", { size: "inherit", height: "auto", class: "stzh-container__email-link", href: `mailto:${email.href}`, analyticsId: email.analyticsId || `${email.label} ${email.text}`, itemprop: "email" }, email.text)) : (h("span", { class: "stzh-container__email-link", itemprop: "email" }, email.text))))))), h("div", { class: "stzh-contact__pobox", innerHTML: this.pobox }, !this.pobox && (h(Fragment, null, this.poboxHeading && h("div", { class: "stzh-contact__pobox-heading" }, this.poboxHeading), this.poboxTitle && h("div", { class: "stzh-contact__pobox-title" }, this.poboxTitle), this.poboxPostalCode && (h("span", { class: "stzh-contact__pobox-postal-code" }, this.poboxPostalCode, "\u00A0")), this.poboxLocation && h("span", { class: "stzh-contact__pobox-locality" }, this.poboxLocation), h("slot", { name: "pobox" }))))), this.availability && (h("div", { class: "stzh-contact__availability" }, this.availabilityTitle && (h(AvailabilityTitleElement, { class: "stzh-contact__availability-title" }, this.availabilityTitle)), this._availability.length > 0 && (h("ul", { class: "stzh-contact__availability-list" }, this._availability.map(item => (h("li", { class: "stzh-contact__availability-list-item" }, h("div", { class: "stzh-contact__availability-weekday" }, item.weekday), item.hours.length > 0 && (h("div", { class: "stzh-contact__availability-hours" }, item.hours.map((hour, index) => (h(Fragment, null, h("div", { class: "stzh-contact__availability-hour" }, hour), index < item.hours.length - 1 && (h("div", { class: "stzh-contact__availability-hours-separator" })))))))))))))), h("div", { class: "stzh-contact__additional" }, h("slot", null)))));

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

@@ -1 +1 @@
-{"version":3,"file":"stzh-contact.js","sourceRoot":"","sources":["../../../../src/components/stzh-contact/stzh-contact.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Fragment, h, Host, Prop, Watch } from \"@stencil/core\";\n\nimport { ContactEmail, ContactNumber, StzhContactAvailabilityItem } from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\nfunction formatTel(tel: string) {\n  return tel.replace(/\\s/g, \"\");\n}\n\n/**\n * @slot main-heading - slot for main heading\n * @slot image - slot for image\n * @slot address - slot for address (alternative for `address` property or separate properties `street`, `streetInfo`, `postalCode` & `location`)\n * @slot pobox - slot for pobox (alternative for `pobox` property or separate properties `poboxHeading`, `poboxTitle`, `poboxPostalCode` & `poboxLocation`)\n * @slot slot for additional (e.g. accordion with contact form, map or datalist)\n */\n@Component({\n  tag: \"stzh-contact\",\n  styleUrl: \"stzh-contact.scss\",\n  scoped: true,\n})\nexport class StzhContact {\n  /** Type */\n  @Prop() type: \"Organization\" | \"Person\" = \"Organization\";\n\n  /** Main heading */\n  @Prop() mainHeading: string;\n\n  /** Main heading level */\n  @Prop() mainHeadingLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"2\";\n\n  /** Heading */\n  @Prop() heading: string;\n\n  /** Heading level */\n  @Prop() headingLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"3\";\n\n  /** Name */\n  @Prop() name: string;\n\n  /** Name heading level */\n  @Prop() nameHeadingLevel: \"\" | \"1\" | \"2\" | \"3\" | \"4\" = \"\";\n\n  /** Address (alternative for address slot or separate properties `street`, `streetInfo`, `postalCode` & `location`) */\n  @Prop() address: string;\n\n  /** Street */\n  @Prop() street: string | string[];\n  private _street: string[] = [];\n\n  /** Additional street info */\n  @Prop() streetInfo: string | string[];\n  private _streetInfo: string[] = [];\n\n  /** Postal code */\n  @Prop() postalCode: string;\n\n  /** Location / city */\n  @Prop() location: string;\n\n  /** Location / city */\n  @Prop() imagePosition: \"left\" | \"top\" = \"top\";\n\n  /**\n   * Numbers\n   * Array of objects that can include the attributes `type` = `tel`|`fax`, `label`, `number`\n   * and optionally `analyticsId` for setting `s-object-id` to the link element\n   * (for Adobe Analytics, default value is `label` and `number`).\n   */\n  @Prop() numbers: ContactNumber[] | string = [];\n  private _numbers: ContactNumber[] = [];\n\n  /**\n   * Numbers\n   * Array of objects that can include the attributes `label`, `number`, `text`, `href`\n   * and optionally `analyticsId` for setting `s-object-id` to the link element\n   * (for Adobe Analytics, default value is `label` and `text`).\n   */\n  @Prop() emails: ContactEmail[] | string = [];\n  private _emails: ContactEmail[] = [];\n\n  /** Pobox (alternative for pobox slot or separate properties `poboxHeading`, `poboxTitle`, `poboxPostalCode` & `poboxLocation`) */\n  @Prop() pobox: string;\n\n  /** Post office box heading */\n  @Prop() poboxHeading: string;\n\n  /** Post office box title */\n  @Prop() poboxTitle: string;\n\n  /** Post office box postal code */\n  @Prop() poboxPostalCode: string;\n\n  /** Post office box location / city */\n  @Prop() poboxLocation: string;\n\n  /** Availability title */\n  @Prop() availabilityTitle: string;\n\n  /** Availability title level */\n  @Prop() availabilityTitleLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"3\";\n\n  /** Availability times */\n  @Prop() availability: string | StzhContactAvailabilityItem[];\n  private _availability: StzhContactAvailabilityItem[] = [];\n\n  // private _availabilityDataItems: StzhDatalistItemEntry[] = [];\n\n  @Watch(\"availability\")\n  availabilityWatcher(newValue: string | StzhContactAvailabilityItem[]) {\n    if (typeof newValue === \"string\") {\n      this._availability = JSON.parse(newValue);\n    } else {\n      this._availability = newValue;\n    }\n\n    // if (this._availability) {\n    //   this._availabilityDataItems = this._availability.map((item) => ({\n    //     value: item.hours.join(' | '),\n    //     label: item.weekday\n    //   }));\n    // }\n  }\n\n  @Watch(\"numbers\")\n  numbersWatcher(newValue: ContactNumber[] | string) {\n    if (typeof newValue === \"string\") {\n      this._numbers = JSON.parse(newValue);\n    } else {\n      this._numbers = newValue;\n    }\n  }\n\n  @Watch(\"emails\")\n  emailsWatcher(newValue: ContactEmail[] | string) {\n    if (typeof newValue === \"string\") {\n      this._emails = JSON.parse(newValue);\n    } else {\n      this._emails = newValue;\n    }\n  }\n\n  @Watch(\"street\")\n  streetWatcher(newValue: string[] | string) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._street = JSON.parse(newValue);\n      } catch (noArrayException) {\n        this._street = [newValue];\n      }\n    } else if (newValue) {\n      this._street = newValue;\n    }\n  }\n\n  @Watch(\"streetInfo\")\n  streetInfoWatcher(newValue: string[] | string) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._streetInfo = JSON.parse(newValue);\n      } catch (noArrayException) {\n        this._streetInfo = [newValue];\n      }\n    } else if (newValue) {\n      this._streetInfo = newValue;\n    }\n  }\n\n  @Element() element: HTMLStzhFigureElement;\n\n  async componentWillLoad() {\n    this.numbersWatcher(this.numbers);\n    this.emailsWatcher(this.emails);\n    this.availabilityWatcher(this.availability);\n    this.streetWatcher(this.street);\n    this.streetInfoWatcher(this.streetInfo);\n  }\n\n  render() {\n    const hasImage = hasSlot(this.element, \"image\");\n    const hasAddress = !!this.address || hasSlot(this.element, \"address\");\n    const hasAddons = hasSlot(this.element, \"addons\");\n    const hasLinks = hasSlot(this.element, \"links\");\n\n    const classes = {\n      \"stzh-contact\": true,\n      \"stzh-contact--has-image\": hasImage,\n      \"stzh-contact--has-address\": hasAddress,\n      \"stzh-contact--has-addons\": hasAddons,\n      \"stzh-contact--has-links\": hasLinks,\n      [`stzh-contact--image-position-${this.imagePosition}`]: true,\n    };\n\n    const HeadingLevel = `h${this.headingLevel}`;\n    const NameHeadingLevel = this.nameHeadingLevel ? `h${this.nameHeadingLevel}` : \"div\";\n    const AvailabilityTitleElement = `h${this.availabilityTitleLevel}`;\n\n    return (\n      <Host image-position={this.imagePosition}>\n        <div class={classes} itemscope itemtype={`http://schema.org/${this.type}`}>\n          <div\n            class=\"stzh-contact__main-heading\"\n            itemprop={\n              (this.type === \"Organization\" && !this.heading) || (this.type === \"Person\" && !this.name) ? \"name\" : null\n            }\n          >\n            {this.mainHeading ? (\n              <stzh-heading level={this.mainHeadingLevel}>{this.mainHeading}</stzh-heading>\n            ) : (\n              <slot name=\"main-heading\"></slot>\n            )}\n          </div>\n\n          <div class=\"stzh-contact__image-wrapper\">\n            <div class=\"stzh-contact__image\">\n              <slot name=\"image\"></slot>\n            </div>\n          </div>\n\n          <div class=\"stzh-contact__info\">\n            {this.heading && (\n              <HeadingLevel\n                class=\"stzh-contact__heading\"\n                itemprop={this.type === \"Organization\" || !this.name ? \"name\" : null}\n                innerHTML={this.heading}\n              ></HeadingLevel>\n            )}\n\n            {this.name && (\n              <NameHeadingLevel\n                class={{\n                  \"stzh-contact__name\": true,\n                  \"is-heading\": this.nameHeadingLevel !== \"\",\n                }}\n                itemprop={this.type === \"Person\" ? \"name\" : null}\n              >\n                {this.name}\n              </NameHeadingLevel>\n            )}\n\n            <div\n              class=\"stzh-contact__address\"\n              itemprop=\"address\"\n              itemscope\n              itemtype=\"http://schema.org/PostalAddress\"\n              innerHTML={this.address}\n            >\n              {!this.address && (\n                <Fragment>\n                  {this._street.length > 0 && (\n                    <div class=\"stzh-contact__street\" itemprop=\"streetAddress\">\n                      {this._street.map((street: string) => (\n                        <Fragment>\n                          {street}\n                          <br />\n                        </Fragment>\n                      ))}\n                      {this._streetInfo.length > 0 && (\n                        <Fragment>\n                          <br />{\" \"}\n                          {this._streetInfo.map((streetInfo: string) => (\n                            <Fragment>\n                              {streetInfo}\n                              <br />\n                            </Fragment>\n                          ))}\n                        </Fragment>\n                      )}\n                    </div>\n                  )}\n\n                  {this.postalCode && (\n                    <span class=\"stzh-contact__postal-code\" itemprop=\"postalCode\">\n                      {this.postalCode}&nbsp;\n                    </span>\n                  )}\n\n                  {this.location && (\n                    <span class=\"stzh-contact__locality\" itemprop=\"addressLocality\">\n                      {this.location}\n                    </span>\n                  )}\n\n                  <slot name=\"address\"></slot>\n                </Fragment>\n              )}\n            </div>\n\n            {this._numbers.length > 0 && (\n              <div class=\"stzh-contact__numbers\">\n                {this._numbers.map(number => (\n                  <div class=\"stzh-contact__number\">\n                    <span>{number.label}&nbsp;</span>\n                    <stzh-link\n                      size=\"inherit\"\n                      height=\"auto\"\n                      class=\"stzh-contact__number-link\"\n                      href={`${number.type}:${formatTel(number.number)}`}\n                      analyticsId={number.analyticsId || `${number.label} ${number.number}`}\n                      itemprop={number.type === \"fax\" ? \"faxNumber\" : \"telephone\"}\n                    >\n                      {number.number}\n                    </stzh-link>\n                  </div>\n                ))}\n              </div>\n            )}\n\n            {this._emails.length > 0 && (\n              <div class=\"stzh-contact__emails\">\n                {this._emails.map(email => (\n                  <div class=\"stzh-contact__email\">\n                    <span>{email.label}&nbsp;</span>\n                    {email.href ? (\n                      <stzh-link\n                        size=\"inherit\"\n                        height=\"auto\"\n                        class=\"stzh-container__email-link\"\n                        href={`mailto:${email.href}`}\n                        analyticsId={email.analyticsId || `${email.label} ${email.text}`}\n                        itemprop=\"email\"\n                      >\n                        {email.text}\n                      </stzh-link>\n                    ) : (\n                      <span class=\"stzh-container__email-link\" itemprop=\"email\">\n                        {email.text}\n                      </span>\n                    )}\n                  </div>\n                ))}\n              </div>\n            )}\n\n            <div class=\"stzh-contact__pobox\" innerHTML={this.pobox}>\n              {!this.pobox && (\n                <Fragment>\n                  {this.poboxHeading && <div class=\"stzh-contact__pobox-heading\">{this.poboxHeading}</div>}\n                  {this.poboxTitle && <div class=\"stzh-contact__pobox-title\">{this.poboxTitle}</div>}\n                  {this.poboxPostalCode && (\n                    <span class=\"stzh-contact__pobox-postal-code\">{this.poboxPostalCode}&nbsp;</span>\n                  )}\n                  {this.poboxLocation && <span class=\"stzh-contact__pobox-locality\">{this.poboxLocation}</span>}\n                  <slot name=\"pobox\"></slot>\n                </Fragment>\n              )}\n            </div>\n          </div>\n\n          {this.availability && (\n            <div class=\"stzh-contact__availability\">\n              {this.availabilityTitle && (\n                <AvailabilityTitleElement class=\"stzh-contact__availability-title\">\n                  {this.availabilityTitle}\n                </AvailabilityTitleElement>\n              )}\n\n              {this._availability.length > 0 && (\n                <ul class=\"stzh-contact__availability-list\">\n                  {this._availability.map(item => (\n                    <li class=\"stzh-contact__availability-list-item\">\n                      <div class=\"stzh-contact__availability-weekday\">{item.weekday}</div>\n                      {item.hours.length > 0 && (\n                        <div class=\"stzh-contact__availability-hours\">\n                          {item.hours.map((hour, index) => (\n                            <Fragment>\n                              <div class=\"stzh-contact__availability-hour\">{hour}</div>\n                              {index < item.hours.length - 1 && (\n                                <div class=\"stzh-contact__availability-hours-separator\"></div>\n                              )}\n                            </Fragment>\n                          ))}\n                        </div>\n                      )}\n                    </li>\n                  ))}\n                </ul>\n              )}\n            </div>\n          )}\n\n          <div class=\"stzh-contact__additional\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"stzh-contact.js","sourceRoot":"","sources":["../../../../src/components/stzh-contact/stzh-contact.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Fragment, h, Host, Prop, Watch } from \"@stencil/core\";\n\nimport { ContactEmail, ContactNumber, StzhContactAvailabilityItem } from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\nfunction formatTel(tel: string) {\n  return tel.replace(/\\s/g, \"\");\n}\n\n/**\n * @slot main-heading - slot for main heading\n * @slot image - slot for image\n * @slot address - slot for address (alternative for `address` property or separate properties `street`, `streetInfo`, `postalCode` & `location`)\n * @slot pobox - slot for pobox (alternative for `pobox` property or separate properties `poboxHeading`, `poboxTitle`, `poboxPostalCode` & `poboxLocation`)\n * @slot slot for additional (e.g. accordion with contact form, map or datalist)\n */\n@Component({\n  tag: \"stzh-contact\",\n  styleUrl: \"stzh-contact.scss\",\n  scoped: true,\n})\nexport class StzhContact {\n  /** Type */\n  @Prop() type: \"Organization\" | \"Person\" = \"Organization\";\n\n  /** Main heading */\n  @Prop() mainHeading: string;\n\n  /** Main heading level */\n  @Prop() mainHeadingLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"2\";\n\n  /** Heading */\n  @Prop() heading: string;\n\n  /** Heading level */\n  @Prop() headingLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"3\";\n\n  /** Name */\n  @Prop() name: string;\n\n  /** Name heading level */\n  @Prop() nameHeadingLevel: \"\" | \"1\" | \"2\" | \"3\" | \"4\" = \"\";\n\n  /** Address (alternative for address slot or separate properties `street`, `streetInfo`, `postalCode` & `location`) */\n  @Prop() address: string;\n\n  /** Street */\n  @Prop() street: string | string[];\n  private _street: string[] = [];\n\n  /** Additional street info */\n  @Prop() streetInfo: string | string[];\n  private _streetInfo: string[] = [];\n\n  /** Postal code */\n  @Prop() postalCode: string;\n\n  /** Location / city */\n  @Prop() location: string;\n\n  /** Location / city */\n  @Prop() imagePosition: \"left\" | \"top\" = \"top\";\n\n  /**\n   * Numbers\n   * Array of objects that can include the attributes `type` = `tel`|`fax`, `label`, `number`\n   * and optionally `analyticsId` for setting `s-object-id` to the link element\n   * (for Adobe Analytics, default value is `label` and `number`).\n   */\n  @Prop() numbers: ContactNumber[] | string = [];\n  private _numbers: ContactNumber[] = [];\n\n  /**\n   * Numbers\n   * Array of objects that can include the attributes `label`, `number`, `text`, `href`\n   * and optionally `analyticsId` for setting `s-object-id` to the link element\n   * (for Adobe Analytics, default value is `label` and `text`).\n   */\n  @Prop() emails: ContactEmail[] | string = [];\n  private _emails: ContactEmail[] = [];\n\n  /** Pobox (alternative for pobox slot or separate properties `poboxHeading`, `poboxTitle`, `poboxPostalCode` & `poboxLocation`) */\n  @Prop() pobox: string;\n\n  /** Post office box heading */\n  @Prop() poboxHeading: string;\n\n  /** Post office box title */\n  @Prop() poboxTitle: string;\n\n  /** Post office box postal code */\n  @Prop() poboxPostalCode: string;\n\n  /** Post office box location / city */\n  @Prop() poboxLocation: string;\n\n  /** Availability title */\n  @Prop() availabilityTitle: string;\n\n  /** Availability title level */\n  @Prop() availabilityTitleLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"3\";\n\n  /** Availability times */\n  @Prop() availability: string | StzhContactAvailabilityItem[];\n  private _availability: StzhContactAvailabilityItem[] = [];\n\n  // private _availabilityDataItems: StzhDatalistItemEntry[] = [];\n\n  @Watch(\"availability\")\n  availabilityWatcher(newValue: string | StzhContactAvailabilityItem[]) {\n    if (typeof newValue === \"string\") {\n      this._availability = JSON.parse(newValue);\n    } else {\n      this._availability = newValue;\n    }\n  }\n\n  @Watch(\"numbers\")\n  numbersWatcher(newValue: ContactNumber[] | string) {\n    if (typeof newValue === \"string\") {\n      this._numbers = JSON.parse(newValue);\n    } else {\n      this._numbers = newValue;\n    }\n  }\n\n  @Watch(\"emails\")\n  emailsWatcher(newValue: ContactEmail[] | string) {\n    if (typeof newValue === \"string\") {\n      this._emails = JSON.parse(newValue);\n    } else {\n      this._emails = newValue;\n    }\n  }\n\n  @Watch(\"street\")\n  streetWatcher(newValue: string[] | string) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._street = JSON.parse(newValue);\n      } catch (noArrayException) {\n        this._street = [newValue];\n      }\n    } else if (newValue) {\n      this._street = newValue;\n    }\n  }\n\n  @Watch(\"streetInfo\")\n  streetInfoWatcher(newValue: string[] | string) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._streetInfo = JSON.parse(newValue);\n      } catch (noArrayException) {\n        this._streetInfo = [newValue];\n      }\n    } else if (newValue) {\n      this._streetInfo = newValue;\n    }\n  }\n\n  @Element() element: HTMLStzhFigureElement;\n\n  async componentWillLoad() {\n    this.numbersWatcher(this.numbers);\n    this.emailsWatcher(this.emails);\n    this.availabilityWatcher(this.availability);\n    this.streetWatcher(this.street);\n    this.streetInfoWatcher(this.streetInfo);\n  }\n\n  render() {\n    const hasImage = hasSlot(this.element, \"image\");\n    const hasAddress = !!this.address || hasSlot(this.element, \"address\");\n    const hasAddons = hasSlot(this.element, \"addons\");\n    const hasLinks = hasSlot(this.element, \"links\");\n\n    const classes = {\n      \"stzh-contact\": true,\n      \"stzh-contact--has-image\": hasImage,\n      \"stzh-contact--has-address\": hasAddress,\n      \"stzh-contact--has-addons\": hasAddons,\n      \"stzh-contact--has-links\": hasLinks,\n      [`stzh-contact--image-position-${this.imagePosition}`]: true,\n    };\n\n    const HeadingLevel = `h${this.headingLevel}`;\n    const NameHeadingLevel = this.nameHeadingLevel ? `h${this.nameHeadingLevel}` : \"div\";\n    const AvailabilityTitleElement = `h${this.availabilityTitleLevel}`;\n\n    return (\n      <Host image-position={this.imagePosition} has-availability={!!this.availability ? 'true' : 'false'}>\n        <div class={classes} itemscope itemtype={`http://schema.org/${this.type}`}>\n          <div\n            class=\"stzh-contact__main-heading\"\n            itemprop={\n              (this.type === \"Organization\" && !this.heading) || (this.type === \"Person\" && !this.name) ? \"name\" : null\n            }\n          >\n            {this.mainHeading ? (\n              <stzh-heading level={this.mainHeadingLevel}>{this.mainHeading}</stzh-heading>\n            ) : (\n              <slot name=\"main-heading\"></slot>\n            )}\n          </div>\n\n          <div class=\"stzh-contact__image-wrapper\">\n            <div class=\"stzh-contact__image\">\n              <slot name=\"image\"></slot>\n            </div>\n          </div>\n\n          <div class=\"stzh-contact__info\">\n            {this.heading && (\n              <HeadingLevel\n                class=\"stzh-contact__heading\"\n                itemprop={this.type === \"Organization\" || !this.name ? \"name\" : null}\n                innerHTML={this.heading}\n              ></HeadingLevel>\n            )}\n\n            {this.name && (\n              <NameHeadingLevel\n                class={{\n                  \"stzh-contact__name\": true,\n                  \"is-heading\": this.nameHeadingLevel !== \"\",\n                }}\n                itemprop={this.type === \"Person\" ? \"name\" : null}\n              >\n                {this.name}\n              </NameHeadingLevel>\n            )}\n\n            <div\n              class=\"stzh-contact__address\"\n              itemprop=\"address\"\n              itemscope\n              itemtype=\"http://schema.org/PostalAddress\"\n              innerHTML={this.address}\n            >\n              {!this.address && (\n                <Fragment>\n                  {this._street.length > 0 && (\n                    <div class=\"stzh-contact__street\" itemprop=\"streetAddress\">\n                      {this._street.map((street: string) => (\n                        <Fragment>\n                          {street}\n                          <br />\n                        </Fragment>\n                      ))}\n                      {this._streetInfo.length > 0 && (\n                        <Fragment>\n                          <br />{\" \"}\n                          {this._streetInfo.map((streetInfo: string) => (\n                            <Fragment>\n                              {streetInfo}\n                              <br />\n                            </Fragment>\n                          ))}\n                        </Fragment>\n                      )}\n                    </div>\n                  )}\n\n                  {this.postalCode && (\n                    <span class=\"stzh-contact__postal-code\" itemprop=\"postalCode\">\n                      {this.postalCode}&nbsp;\n                    </span>\n                  )}\n\n                  {this.location && (\n                    <span class=\"stzh-contact__locality\" itemprop=\"addressLocality\">\n                      {this.location}\n                    </span>\n                  )}\n\n                  <slot name=\"address\"></slot>\n                </Fragment>\n              )}\n            </div>\n\n            {this._numbers.length > 0 && (\n              <div class=\"stzh-contact__numbers\">\n                {this._numbers.map(number => (\n                  <div class=\"stzh-contact__number\">\n                    <span>{number.label}&nbsp;</span>\n                    <stzh-link\n                      size=\"inherit\"\n                      height=\"auto\"\n                      class=\"stzh-contact__number-link\"\n                      href={`${number.type}:${formatTel(number.number)}`}\n                      analyticsId={number.analyticsId || `${number.label} ${number.number}`}\n                      itemprop={number.type === \"fax\" ? \"faxNumber\" : \"telephone\"}\n                    >\n                      {number.number}\n                    </stzh-link>\n                  </div>\n                ))}\n              </div>\n            )}\n\n            {this._emails.length > 0 && (\n              <div class=\"stzh-contact__emails\">\n                {this._emails.map(email => (\n                  <div class=\"stzh-contact__email\">\n                    <span>{email.label}&nbsp;</span>\n                    {email.href ? (\n                      <stzh-link\n                        size=\"inherit\"\n                        height=\"auto\"\n                        class=\"stzh-container__email-link\"\n                        href={`mailto:${email.href}`}\n                        analyticsId={email.analyticsId || `${email.label} ${email.text}`}\n                        itemprop=\"email\"\n                      >\n                        {email.text}\n                      </stzh-link>\n                    ) : (\n                      <span class=\"stzh-container__email-link\" itemprop=\"email\">\n                        {email.text}\n                      </span>\n                    )}\n                  </div>\n                ))}\n              </div>\n            )}\n\n            <div class=\"stzh-contact__pobox\" innerHTML={this.pobox}>\n              {!this.pobox && (\n                <Fragment>\n                  {this.poboxHeading && <div class=\"stzh-contact__pobox-heading\">{this.poboxHeading}</div>}\n                  {this.poboxTitle && <div class=\"stzh-contact__pobox-title\">{this.poboxTitle}</div>}\n                  {this.poboxPostalCode && (\n                    <span class=\"stzh-contact__pobox-postal-code\">{this.poboxPostalCode}&nbsp;</span>\n                  )}\n                  {this.poboxLocation && <span class=\"stzh-contact__pobox-locality\">{this.poboxLocation}</span>}\n                  <slot name=\"pobox\"></slot>\n                </Fragment>\n              )}\n            </div>\n          </div>\n\n          {this.availability && (\n            <div class=\"stzh-contact__availability\">\n              {this.availabilityTitle && (\n                <AvailabilityTitleElement class=\"stzh-contact__availability-title\">\n                  {this.availabilityTitle}\n                </AvailabilityTitleElement>\n              )}\n\n              {this._availability.length > 0 && (\n                <ul class=\"stzh-contact__availability-list\">\n                  {this._availability.map(item => (\n                    <li class=\"stzh-contact__availability-list-item\">\n                      <div class=\"stzh-contact__availability-weekday\">{item.weekday}</div>\n                      {item.hours.length > 0 && (\n                        <div class=\"stzh-contact__availability-hours\">\n                          {item.hours.map((hour, index) => (\n                            <Fragment>\n                              <div class=\"stzh-contact__availability-hour\">{hour}</div>\n                              {index < item.hours.length - 1 && (\n                                <div class=\"stzh-contact__availability-hours-separator\"></div>\n                              )}\n                            </Fragment>\n                          ))}\n                        </div>\n                      )}\n                    </li>\n                  ))}\n                </ul>\n              )}\n            </div>\n          )}\n\n          <div class=\"stzh-contact__additional\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -4,6 +4,7 @@ const URL = "components-datalist";
 const STORIES = [
   "default",
   "urls",
+  "multi-column",
   "nested",
   "details",
   "table",

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

@@ -1 +1 @@
-{"version":3,"file":"stzh-datalist.e2e.js","sourceRoot":"","sources":["../../../../src/components/stzh-datalist/stzh-datalist.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAExD,MAAM,GAAG,GAAG,qBAAqB,CAAC;AAElC,MAAM,OAAO,GAAG;EACd,SAAS;EACT,MAAM;EACN,QAAQ;EACR,SAAS;EACT,OAAO;EACP,SAAS;EACT,mBAAmB;CACpB,CAAC;AAEF,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,GAAG,EAAE;EAC7B,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-datalist\";\n\nconst STORIES = [\n  \"default\",\n  \"urls\",\n  \"nested\",\n  \"details\",\n  \"table\",\n  \"slotted\",\n  \"slotted-edit-mode\",\n];\n\ntest.describe(\"datalist\", () => {\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"]}
+{"version":3,"file":"stzh-datalist.e2e.js","sourceRoot":"","sources":["../../../../src/components/stzh-datalist/stzh-datalist.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAExD,MAAM,GAAG,GAAG,qBAAqB,CAAC;AAElC,MAAM,OAAO,GAAG;EACd,SAAS;EACT,MAAM;EACN,cAAc;EACd,QAAQ;EACR,SAAS;EACT,OAAO;EACP,SAAS;EACT,mBAAmB;CACpB,CAAC;AAEF,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,GAAG,EAAE;EAC7B,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-datalist\";\n\nconst STORIES = [\n  \"default\",\n  \"urls\",\n  \"multi-column\",\n  \"nested\",\n  \"details\",\n  \"table\",\n  \"slotted\",\n  \"slotted-edit-mode\",\n];\n\ntest.describe(\"datalist\", () => {\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-datalist/stzh-datalist.stories.js

@@ -196,6 +196,38 @@ export const Urls = {
   },
 };
 
+export const MultiColumn = {
+  render: (args) => story(args, TEMPLATE),
+  args: {
+    columns: 3,
+    items: [
+      {
+        label: 'Label',
+        value: 'Internal Link',
+        href: '#',
+      },
+      {
+        label: 'Label',
+        value: 'External Link',
+        href: 'http://example.com',
+        target: '_blank',
+      },
+      {
+        label: 'Label',
+        value: 'Phone Link',
+        href: 'tel:#',
+      },
+      {
+        label: 'Label',
+        value: 'Download Link',
+        href: '#',
+        meta: ['PDF', '1 Seite', '60 KB'],
+        download: true,
+      },
+    ],
+  },
+};
+
 export const Nested = {
   render: (args) => story(args, TEMPLATE),
   args: {

package/dist/collection/components/stzh-datalist-item/stzh-datalist-item.css

@@ -192,10 +192,11 @@
   position: relative;
   -webkit-text-decoration-line: none;
           text-decoration-line: none;
-  display: flex;
+  display: var(--wrapper-display);
   align-items: center;
   /* Button variant */
   /* Interactive variant */
+  /* Vertical Variant */
   /* Horizontal / Table Variant */
   /** Table Variant */
   /** Big label */

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

@@ -1379,7 +1379,7 @@ stzh-dropdown:where([size=tiny]):where([variant=filter]) {
 }
 .stzh-dropdown__select.plugin-remove_button .stzh-dropdown__item, .stzh-dropdown--is-multiple .stzh-dropdown__select.plugin-remove_button .stzh-dropdown__item {
   display: inline-flex;
-  align-items: flex-start;
+  align-items: center;
   gap: var(--remove-gap);
   padding-right: 0px;
 }
@@ -1485,6 +1485,13 @@ stzh-dropdown:where([size=tiny]):where([variant=filter]) {
 .stzh-dropdown--has-no-search .stzh-dropdown__select.input-active .ts-control, .stzh-dropdown--has-no-search .stzh-dropdown__select.input-active .ts-control > input {
   cursor: pointer;
 }
+.stzh-dropdown--filter .stzh-dropdown__option, .stzh-dropdown--plain .stzh-dropdown__option {
+  background-color: var(--stzh-color-secondary10);
+  color: var(--stzh-color-primary70);
+}
+.stzh-dropdown--filter .stzh-dropdown__option:hover, .stzh-dropdown--filter .stzh-dropdown__option.active, .stzh-dropdown--plain .stzh-dropdown__option:hover, .stzh-dropdown--plain .stzh-dropdown__option.active {
+  background-color: var(--stzh-color-secondary20);
+}
 .stzh-dropdown--filter .stzh-dropdown__select.single .ts-control, .stzh-dropdown--filter .stzh-dropdown__select.multi .ts-control, .stzh-dropdown--filter .stzh-dropdown__sizer {
   border: none;
 }