@oiz/stzh-components 3.0.0-beta3 → 3.0.0-beta5

package/dist/collection/assets/i18n/de.json

@@ -88,6 +88,14 @@
     "buttonLabel": "Datum wählen",
     "selectedDateMessage": "Ausgewähltes Datum ist"
   },
+  "daterange": {
+    "legend": "Zeitraum wählen",
+    "labelFrom": "Von",
+    "labelTo": "Bis",
+    "rangeToday": "Heute",
+    "rangeTomorrow": "Morgen",
+    "rangeNextSevenDays": "Nächste 7 Tage"
+  },
   "monthyearpicker": {
     "monthLabel": "Monat wählen",
     "yearLabel": "Jahr wählen"
@@ -181,7 +189,7 @@
   "youtube": {
     "previewLabel": "Video abspielen",
     "confirmLabel": "Video abspielen",
-    "confirmText": "<p>Dieses Video kommt von YouTube.</p><p>Mit dem Abspielen kann Youtube Ihr Surf-Verhalten mitverfolgen.</p>"
+    "confirmText": "<p>Dieses Video kommt von Youtube.</p><p>Mit dem Abspielen kann Youtube Ihr Surf-Verhalten mitverfolgen.</p>"
   },
   "panorama": {
     "hotspotLabel": "Hotspot",
@@ -240,7 +248,6 @@
     "actionAdd": "Zu Favoriten hinzufügen",
     "actionRemove": "Aus Favoriten entfernen"
   },
-  "card-searchlist": {},
   "cardlist": {
     "expandAll": "alle aufklappen",
     "collapseAll": "alle zuklappen"
@@ -288,7 +295,7 @@
     "shareFacebook": "Bei Facebook teilen",
     "shareTwitter": "Bei X teilen",
     "shareLinkedin": "Bei LinkedIn teilen",
-    "shareXing": "Bei XING teilen",
+    "shareXing": "Bei Xing teilen",
     "shareMail": "Per E-Mail versenden"
   },
   "carousel": {
@@ -312,8 +319,8 @@
   },
   "search": {
     "showMore": "Mehr anzeigen",
-    "noResults": "Keine Resultate gefunden",
-    "moreFilter": "Weitere Filter"
+    "moreFilter": "Weitere Filter",
+    "error": "Leider ist der Service zurzeit nicht verfügbar, bitte versuchen Sie es später nochmals."
   },
   "imagecomparison": {
     "label": "Bildvergleich"

package/dist/collection/assets/i18n/en.json

@@ -88,6 +88,14 @@
     "buttonLabel": "Choose date",
     "selectedDateMessage": "Selected date is"
   },
+  "daterange": {
+    "legend": "Choose date range",
+    "labelFrom": "From",
+    "labelTo": "To",
+    "rangeToday": "Today",
+    "rangeTomorrow": "Tomorrow",
+    "rangeNextSevenDays": "Next 7 days"
+  },
   "monthyearpicker": {
     "monthLabel": "Choose month",
     "yearLabel": "Choose year"
@@ -181,7 +189,7 @@
   "youtube": {
     "previewLabel": "Play video",
     "confirmLabel": "Play video",
-    "confirmText": "<p>This video comes from YouTube.</p><p>By playing, YouTube can track your surfing behavior.</p>"
+    "confirmText": "<p>This video comes from Youtube.</p><p>By playing, Youtube can track your surfing behavior.</p>"
   },
   "panorama": {
     "hotspotLabel": "Hotspot",
@@ -240,7 +248,6 @@
     "actionAdd": "Add to favorites",
     "actionRemove": "Remove from favorites"
   },
-  "card-searchlist": {},
   "cardlist": {
     "expandAll": "expand all",
     "collapseAll": "collapse all"
@@ -288,7 +295,7 @@
     "shareFacebook": "Share on Facebook",
     "shareTwitter": "Share on X",
     "shareLinkedin": "Share on LinkedIn",
-    "shareXing": "Share on XING",
+    "shareXing": "Share on Xing",
     "shareMail": "Send by email"
   },
   "carousel": {
@@ -312,8 +319,8 @@
   },
   "search": {
     "showMore": "Show more",
-    "noResults": "No results found",
-    "moreFilter": "More filter"
+    "moreFilter": "More filter",
+    "error": "Unfortunately the service is currently unavailable, please try again later."
   },
   "imagecomparison": {
     "label": "Image comparison"

package/dist/collection/collection-manifest.json

@@ -18,6 +18,7 @@
     "components/stzh-card/stzh-card.js",
     "components/stzh-card-navigation/stzh-card-navigation.js",
     "components/stzh-card-searchresult/stzh-card-searchresult.js",
+    "components/stzh-card-superteaser/stzh-card-superteaser.js",
     "components/stzh-cardlist/stzh-cardlist.js",
     "components/stzh-carousel/stzh-carousel.js",
     "components/stzh-cell/stzh-cell.js",
@@ -39,6 +40,7 @@
     "components/stzh-datamessagelist-item/stzh-datamessagelist-item.js",
     "components/stzh-datatable/stzh-datatable.js",
     "components/stzh-datepicker/stzh-datepicker.js",
+    "components/stzh-daterange/stzh-daterange.js",
     "components/stzh-details/stzh-details.js",
     "components/stzh-dialog/stzh-dialog.js",
     "components/stzh-disturber/stzh-disturber.js",

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

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */

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

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */

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

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */

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

@@ -54,8 +54,8 @@ export class StzhActions {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "\"form\" | \"dialog\" | \"process\" | \"search\"",
-          "resolved": "\"dialog\" | \"form\" | \"process\" | \"search\"",
+          "original": "\"form\" | \"dialog\" | \"process\" | \"cta\"",
+          "resolved": "\"cta\" | \"dialog\" | \"form\" | \"process\"",
           "references": {}
         },
         "required": false,

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

@@ -1 +1 @@
-{"version":3,"file":"stzh-actions.js","sourceRoot":"","sources":["../../../../src/components/stzh-actions/stzh-actions.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,CAAC,EACD,OAAO,EACR,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEnD;;;GAGG;AAMH,MAAM,OAAO,WAAW;;IAQd,SAAI,GAAG,GAAG,EAAE;MAClB,MAAM,gBAAgB,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CACpD,+DAA+D,CAChE,CAAC;MAEF,gBAAgB,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,EAAE;QAClC,cAAc,CAAC,MAAM,EAAE;UACrB,OAAO,EAAE,WAAW;SACI,CAAC,CAAA;MAC7B,CAAC,CAAC,CAAC;IACL,CAAC,CAAA;mBAhB4E,MAAM;;EAkBnF,iBAAiB;IACf,IAAI,CAAC,IAAI,EAAE,CAAC;IAEZ,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAChD,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE;MAClC,SAAS,EAAE,IAAI;MACf,OAAO,EAAE,IAAI;KACd,CAAC,CAAC;EACL,CAAC;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;KAC5B;EACH,CAAC;EAED,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,cAAc,EAAE,IAAI;MACpB,CAAC,iBAAiB,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO;KAClD,CAAC;IAEF,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAE,OAAO;QACjB,WAAK,KAAK,EAAC,uBAAuB,EAAC,IAAI,EAAC,OAAO;UAC7C,WAAK,KAAK,EAAC,iCAAiC;YAC1C,YAAM,IAAI,EAAC,WAAW,GAAQ,CAC1B;UACN,WAAK,KAAK,EAAC,+BAA+B;YACxC,YAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACF,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Host,\n  Prop,\n  h,\n  Element\n} from \"@stencil/core\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\n\n/**\n * @slot primary - Slot for primary button\n * @slot secondary - Slot for secondary button\n */\n@Component({\n  tag: \"stzh-actions\",\n  styleUrl: \"stzh-actions.scss\",\n  scoped: true\n})\nexport class StzhActions {\n  /** Variant determining what position the action buttons are */\n  @Prop({ reflect: true }) variant: \"form\" | \"dialog\" | \"process\" | \"search\" = \"form\";\n\n  @Element() element: HTMLStzhActionsElement;\n\n  private observer: MutationObserver;\n\n  private init = () => {\n    const secondaryButtons = this.element.querySelectorAll(\n      'stzh-button[slot=\"secondary\"], [slot=\"secondary\"] stzh-button'\n    );\n\n    secondaryButtons.forEach((button) => {\n      setPropsIfNull(button, {\n        variant: \"secondary\"\n      } as HTMLStzhButtonElement)\n    });\n  }\n\n  connectedCallback() {\n    this.init();\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-actions\": true,\n      [`stzh-actions--${this.variant}`]: !!this.variant\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-actions__actions\" role=\"group\">\n            <div class=\"stzh-actions__secondary-actions\">\n              <slot name=\"secondary\"></slot>\n            </div>\n            <div class=\"stzh-actions__primary-actions\">\n              <slot name=\"primary\"></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"stzh-actions.js","sourceRoot":"","sources":["../../../../src/components/stzh-actions/stzh-actions.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,CAAC,EACD,OAAO,EACR,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEnD;;;GAGG;AAMH,MAAM,OAAO,WAAW;;IAQd,SAAI,GAAG,GAAG,EAAE;MAClB,MAAM,gBAAgB,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CACpD,+DAA+D,CAChE,CAAC;MAEF,gBAAgB,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,EAAE;QAClC,cAAc,CAAC,MAAM,EAAE;UACrB,OAAO,EAAE,WAAW;SACI,CAAC,CAAA;MAC7B,CAAC,CAAC,CAAC;IACL,CAAC,CAAA;mBAhByE,MAAM;;EAkBhF,iBAAiB;IACf,IAAI,CAAC,IAAI,EAAE,CAAC;IAEZ,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAChD,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE;MAClC,SAAS,EAAE,IAAI;MACf,OAAO,EAAE,IAAI;KACd,CAAC,CAAC;EACL,CAAC;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;KAC5B;EACH,CAAC;EAED,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,cAAc,EAAE,IAAI;MACpB,CAAC,iBAAiB,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO;KAClD,CAAC;IAEF,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAE,OAAO;QACjB,WAAK,KAAK,EAAC,uBAAuB,EAAC,IAAI,EAAC,OAAO;UAC7C,WAAK,KAAK,EAAC,iCAAiC;YAC1C,YAAM,IAAI,EAAC,WAAW,GAAQ,CAC1B;UACN,WAAK,KAAK,EAAC,+BAA+B;YACxC,YAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACF,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Host,\n  Prop,\n  h,\n  Element\n} from \"@stencil/core\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\n\n/**\n * @slot primary - Slot for primary button\n * @slot secondary - Slot for secondary button\n */\n@Component({\n  tag: \"stzh-actions\",\n  styleUrl: \"stzh-actions.scss\",\n  scoped: true\n})\nexport class StzhActions {\n  /** Variant determining what position the action buttons are */\n  @Prop({ reflect: true }) variant: \"form\" | \"dialog\" | \"process\" | \"cta\" = \"form\";\n\n  @Element() element: HTMLStzhActionsElement;\n\n  private observer: MutationObserver;\n\n  private init = () => {\n    const secondaryButtons = this.element.querySelectorAll(\n      'stzh-button[slot=\"secondary\"], [slot=\"secondary\"] stzh-button'\n    );\n\n    secondaryButtons.forEach((button) => {\n      setPropsIfNull(button, {\n        variant: \"secondary\"\n      } as HTMLStzhButtonElement)\n    });\n  }\n\n  connectedCallback() {\n    this.init();\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-actions\": true,\n      [`stzh-actions--${this.variant}`]: !!this.variant\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-actions__actions\" role=\"group\">\n            <div class=\"stzh-actions__secondary-actions\">\n              <slot name=\"secondary\"></slot>\n            </div>\n            <div class=\"stzh-actions__primary-actions\">\n              <slot name=\"primary\"></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */

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

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */

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

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */

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

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */
@@ -156,9 +159,77 @@
   border: 0 !important;
 }
 
+:host {
+  --background-color: var(--stzh-color-secondary10);
+}
+
+.stzh-appointments__heading:not(:empty) {
+  padding-bottom: var(--stzh-space-xsmall);
+  margin-bottom: var(--stzh-space-xsmall);
+}
+@media screen and (min-width: 900px) {
+  .stzh-appointments__heading:not(:empty) {
+    padding-bottom: var(--stzh-space-small);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-appointments__heading:not(:empty) {
+    padding-bottom: var(--stzh-space-medium);
+  }
+}
+@media screen and (min-width: 600px) {
+  .stzh-appointments__heading:not(:empty) {
+    margin-bottom: var(--stzh-space-small);
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-appointments__heading:not(:empty) {
+    margin-bottom: var(--stzh-space-medium);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-appointments__heading:not(:empty) {
+    margin-bottom: var(--stzh-space-xlarge);
+  }
+}
 .stzh-appointments__wrapper {
+  padding-top: var(--stzh-space-medium);
+  padding-bottom: var(--stzh-space-medium);
   display: flex;
   flex-direction: column;
+  padding-left: var(--stzh-space-large);
+  padding-right: var(--stzh-space-large);
+  background-color: var(--background-color);
+}
+@media screen and (min-width: 600px) {
+  .stzh-appointments__wrapper {
+    padding-top: var(--stzh-space-large);
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-appointments__wrapper {
+    padding-top: var(--stzh-space-xlarge);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-appointments__wrapper {
+    padding-top: var(--stzh-space-xxlarge);
+  }
+}
+@media screen and (min-width: 600px) {
+  .stzh-appointments__wrapper {
+    padding-bottom: var(--stzh-space-large);
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-appointments__wrapper {
+    padding-bottom: var(--stzh-space-xlarge);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-appointments__wrapper {
+    padding-bottom: var(--stzh-space-xxlarge);
+  }
 }
 @media screen and (min-width: 900px) {
   .stzh-appointments__wrapper {
@@ -171,7 +242,7 @@
 }
 @media screen and (min-width: 900px) {
   .stzh-appointments__calendar-wrapper {
-    margin-right: var(--stzh-space-large);
+    margin-right: var(--stzh-space-xxlarge);
   }
 }
 .stzh-appointments__appointments-wrapper {
@@ -180,35 +251,40 @@
   flex-direction: column;
 }
 .stzh-appointments__calendar-title-wrapper, .stzh-appointments__appointments-title-wrapper {
+  margin-bottom: var(--stzh-space-small);
   display: flex;
-  align-items: flex-start;
-  flex-direction: column;
-  margin-bottom: var(--stzh-space-xsmall);
+  align-items: center;
+  justify-content: space-between;
 }
 @media screen and (min-width: 900px) {
   .stzh-appointments__calendar-title-wrapper, .stzh-appointments__appointments-title-wrapper {
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
     margin-bottom: var(--stzh-space-medium);
-    height: var(--stzh-space-xxlarge);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-appointments__calendar-title-wrapper, .stzh-appointments__appointments-title-wrapper {
+    margin-bottom: var(--stzh-space-large);
   }
 }
 .stzh-appointments__calendar-title, .stzh-appointments__appointments-title {
+  font-family: var(--stzh-font-family-heavy);
+  font-weight: var(--stzh-font-weight-heavy);
+  font-style: var(--stzh-font-style-heavy);
+  font-size: var(--stzh-font-centi-font-size);
+  line-height: var(--stzh-font-centi-text-line-height);
+  letter-spacing: var(--stzh-font-curve---text-letter-spacing);
+  color: var(--stzh-color-primary70);
   display: flex;
+  align-items: center;
 }
 .stzh-appointments__calendar-icon, .stzh-appointments__appointments-icon {
+  --size: var(--stzh-icon-size-large);
   margin-right: var(--stzh-space-xsmall);
-  display: none;
 }
-@media screen and (min-width: 900px) {
-  .stzh-appointments__calendar-icon, .stzh-appointments__appointments-icon {
-    display: inline-flex;
-  }
-}
-.stzh-appointments__calendar-content-medium, .stzh-appointments__appointments-content {
-  background-color: var(--stzh-color-white);
-  border: 0.125rem solid var(--stzh-color-grey70);
+.stzh-appointments__calendar-content, .stzh-appointments__calendar-content-medium {
+  font-size: var(--stzh-font-milli-font-size);
+  line-height: var(--stzh-font-milli-text-line-height);
+  letter-spacing: var(--stzh-font-curve---text-letter-spacing);
 }
 @media screen and (min-width: 900px) {
   .stzh-appointments__calendar-content {
@@ -217,7 +293,8 @@
 }
 .stzh-appointments__calendar-content-medium {
   display: none;
-  padding: var(--stzh-space-medium);
+  background-color: var(--stzh-color-white);
+  padding-bottom: var(--stzh-space-medium);
 }
 @media screen and (min-width: 900px) {
   .stzh-appointments__calendar-content-medium {
@@ -225,10 +302,16 @@
   }
 }
 .stzh-appointments__appointments-content {
-  padding: var(--stzh-space-xlarge);
   flex-grow: 1;
 }
+.stzh-appointments__appointments-radiogroup {
+  margin-top: var(--stzh-space-xsmall);
+  margin-bottom: var(--stzh-space-xsmall);
+}
 .stzh-appointments__more-link {
+  font-size: var(--stzh-font-milli-font-size);
+  line-height: var(--stzh-font-milli-text-line-height);
+  letter-spacing: var(--stzh-font-curve---text-letter-spacing);
   margin-top: var(--stzh-space-medium);
 }
 .stzh-appointments--has-calendar .stzh-appointments__appointments-wrapper {

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

@@ -1,6 +1,7 @@
 import { Host, h } from "@stencil/core";
 import { tc } from "../../utils/translation-utils";
 import { printISODate, parseISODate } from "../../utils/date-utils";
+import { hasSlot } from "../../utils/utils";
 /**
  * @slot - Slot for any content
  */
@@ -232,20 +233,21 @@ export class StzhAppointments {
     }
   }
   render() {
+    const headingUsed = hasSlot(this.element, "heading");
     const classes = {
       "stzh-appointments": true,
       "stzh-appointments--has-calendar": this.showCalendar,
       "stzh-appointments--has-appointments-title": this.showAppointmentsTitle,
       "stzh-appointments--has-sort": this.showSort
     };
-    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-appointments__wrapper" }, this.showCalendar &&
-      h("div", { class: "stzh-appointments__calendar-wrapper" }, h("div", { class: "stzh-appointments__calendar-title-wrapper" }, h("div", { class: "stzh-appointments__calendar-title" }, h("stzh-icon", { class: "stzh-appointments__calendar-icon", name: "calendar" }), h("stzh-text", { font: "heavy" }, this.calendarTitle || this.localization.calendarTitle))), h("div", { class: "stzh-appointments__calendar-content" }, h("stzh-datepicker", { "hide-optional": true, ref: (el) => (this.datepickerElement = el), onStzhChange: this.onDatepickerChange, label: this.localization.datepickerLabel, calendarIsDateDisabled: this.isDateDisabled, calendarMin: printISODate(this.earliestDate), calendarMax: printISODate(this.latestDate) }, h("stzh-link", { slot: "action", disabled: !this.nextDate, onClick: this.onNextActiveDateClick }, h("stzh-text", { size: "milli" }, this.localization.nextDayWithAppointments)))), h("div", { class: "stzh-appointments__calendar-content-medium" }, h("stzh-datepicker", { "hide-optional": true, ref: (el) => (this.datepickerElementMedium = el), onStzhChange: this.onDatepickerChange, inline: true, calendarIsDateDisabled: this.isDateDisabled, calendarMin: printISODate(this.earliestDate), calendarMax: printISODate(this.latestDate) }, this.nextDate &&
-        h("stzh-link", { slot: "action", onClick: this.onNextActiveDateClick }, h("stzh-text", { size: "milli" }, this.localization.nextDayWithAppointments))))), h("div", { class: "stzh-appointments__appointments-wrapper" }, this.showAppointmentsTitle &&
-      h("div", { class: "stzh-appointments__appointments-title-wrapper" }, h("div", { class: "stzh-appointments__appointments-title" }, h("stzh-icon", { class: "stzh-appointments__appointments-icon", name: "clock" }), h("stzh-text", { font: "heavy" }, this.appointmentsTitle || this.localization.appointmentsTitle)), this.showSort &&
-        h("div", { class: "stzh-appointments__sort" }, h("stzh-dropdown", { "hide-optional": true, inline: true, "no-search": true, class: "stzh-appointments__sort-dropdown", variant: "plain", size: "small", items: [this._sortBy], options: this.sortOptions, onStzhChange: this.onDropdownChange }))), h("div", { class: "stzh-appointments__appointments-content" }, h("stzh-radiogroup", { ref: (el) => this.inputElement = el, legend: this.localization.inputLegend, "hide-legend": true, name: this.name, value: this.value, preventUpdateProperties: ["disabled"] }, this.appointmentsShown.map((appointment) => h("stzh-radio", { onStzhChange: this.onRadioChange, value: appointment.value, disabled: typeof appointment.disabled !== "undefined" ? appointment.disabled : false }, h("stzh-text", { font: "heavy", size: "milli" }, !this.showCalendar && h("span", null, this.dateAdapter.format(appointment.start, "dateLong"), ",\u00A0"), this.dateAdapter.formatSpan(appointment.start, appointment.end, "time")), h("stzh-text", { size: "milli" }, appointment.caption)))), this.showMoreLink &&
-      h("stzh-link", { class: "stzh-appointments__more-link", onClick: this.onMoreClick }, h("stzh-text", { size: "milli" }, tc(this.localization.moreTextItems, this.moreItemsLeft > this.stepItems
+    return (h(Host, { "has-heading": headingUsed }, h("div", { class: classes }, h("div", { class: "stzh-appointments__heading" }, h("slot", { name: "heading" })), h("div", { class: "stzh-appointments__wrapper" }, this.showCalendar &&
+      h("div", { class: "stzh-appointments__calendar-wrapper" }, h("div", { class: "stzh-appointments__calendar-title-wrapper" }, h("div", { class: "stzh-appointments__calendar-title" }, h("stzh-icon", { class: "stzh-appointments__calendar-icon", name: "calendar" }), h("span", { class: "stzh-appointments__calendar-title-text" }, this.calendarTitle || this.localization.calendarTitle))), h("div", { class: "stzh-appointments__calendar-content" }, h("stzh-datepicker", { "hide-optional": true, ref: (el) => (this.datepickerElement = el), onStzhChange: this.onDatepickerChange, label: this.localization.datepickerLabel, calendarIsDateDisabled: this.isDateDisabled, calendarMin: printISODate(this.earliestDate), calendarMax: printISODate(this.latestDate) }, h("stzh-link", { slot: "action", size: "inherit", disabled: !this.nextDate, onClick: this.onNextActiveDateClick }, this.localization.nextDayWithAppointments))), h("div", { class: "stzh-appointments__calendar-content-medium" }, h("stzh-datepicker", { "hide-optional": true, ref: (el) => (this.datepickerElementMedium = el), onStzhChange: this.onDatepickerChange, inline: true, calendarIsDateDisabled: this.isDateDisabled, calendarMin: printISODate(this.earliestDate), calendarMax: printISODate(this.latestDate) }, this.nextDate &&
+        h("stzh-link", { slot: "action", size: "inherit", onClick: this.onNextActiveDateClick }, this.localization.nextDayWithAppointments)))), h("div", { class: "stzh-appointments__appointments-wrapper" }, this.showAppointmentsTitle &&
+      h("div", { class: "stzh-appointments__appointments-title-wrapper" }, h("div", { class: "stzh-appointments__appointments-title" }, h("stzh-icon", { class: "stzh-appointments__appointments-icon", name: "clock" }), h("span", { class: "stzh-appointments__appointments-title-text" }, this.appointmentsTitle || this.localization.appointmentsTitle)), this.showSort &&
+        h("div", { class: "stzh-appointments__sort" }, h("stzh-dropdown", { "hide-optional": true, inline: true, "no-search": true, class: "stzh-appointments__sort-dropdown", variant: "plain", size: "small", sizeMedium: "tiny", items: [this._sortBy], options: this.sortOptions, onStzhChange: this.onDropdownChange }))), h("div", { class: "stzh-appointments__appointments-content" }, h("stzh-radiogroup", { class: "stzh-appointments__appointments-radiogroup", ref: (el) => this.inputElement = el, legend: this.localization.inputLegend, "hide-legend": true, name: this.name, value: this.value, preventUpdateProperties: ["disabled"] }, this.appointmentsShown.map((appointment) => h("stzh-radio", { onStzhChange: this.onRadioChange, value: appointment.value, disabled: typeof appointment.disabled !== "undefined" ? appointment.disabled : false }, h("stzh-text", { font: "heavy", size: "centi" }, !this.showCalendar && h("span", null, this.dateAdapter.format(appointment.start, "dateLong"), ",\u00A0"), this.dateAdapter.formatSpan(appointment.start, appointment.end, "time")), h("stzh-text", { size: "milli" }, appointment.caption)))), this.showMoreLink &&
+      h("stzh-link", { class: "stzh-appointments__more-link", size: "inherit", onClick: this.onMoreClick }, tc(this.localization.moreTextItems, this.moreItemsLeft > this.stepItems
         ? this.stepItems
-        : this.moreItemsLeft)))))))));
+        : this.moreItemsLeft))))))));
   }
   static get is() { return "stzh-appointments"; }
   static get encapsulation() { return "scoped"; }