npm - @oiz/stzh-components - Versions diffs - 3.0.0-beta3 → 3.0.0-beta5 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (663) hide show

package/dist/collection/components/stzh-chipselect/stzh-chipselect.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"stzh-chipselect.js","sourceRoot":"","sources":["../../../../src/components/stzh-chipselect/stzh-chipselect.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Watch,\n Event,\n EventEmitter,\n State,\n Fragment,\n Listen,\n} from \"@stencil/core\";\n\nimport {\n StzhChipselectItem,\n StzhChipselectChangeEvent,\n StzhDropdownChangeEvent\n} from \"../../index\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\n// import { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nlet chipselectCounter = 0;\n\n/*\n @slot - Slot for `stzh-checkbox` elements\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n /\n@Component({\n tag: \"stzh-chipselect\",\n styleUrl: \"stzh-chipselect.scss\",\n scoped: true\n})\nexport class StzhChipselect {\n /* Translation strings /\n @Prop() localization: StzhLocaleComponent;\n\n /* The list of chips /\n @Prop() data: string \| StzhChipselectItem[] = [];\n private _data: StzhChipselectItem[] = [];\n private _dataDropdown: any[] = [];\n\n /* The name of the input element /\n @Prop({ reflect: true }) name: string;\n\n /* Label /\n @Prop() label: string = \"\";\n\n /* Value /\n @Prop({ mutable: true }) value: string = \"\";\n\n /* Default value (used by reset) /\n @Prop({ mutable: true }) defaultValue: string = \"\";\n\n /* Description message (use description slot as alternative) /\n @Prop() description: string;\n\n /* Long description message appearing in a popover (use description-long slot as alternative) /\n @Prop() descriptionLong: string;\n\n /* Long description title appearing in a popover (use description-long-title slot as or description property alternative) /\n @Prop() descriptionLongTitle: string;\n\n /* One or multiple error message (use error slot as alternative) /\n @Prop() error: string \| string[];\n private _error: string[];\n\n /* Invalid status /\n @Prop({ reflect: true }) invalid: boolean = false;\n\n /* Required status /\n @Prop({ reflect: true }) required: boolean = false;\n\n /* Whether all chips are disabled or not /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Hide `(optional)` label (or use `required` inside form ot hide it) /\n @Prop({ reflect: true }) hideOptional: boolean = false;\n\n /* Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) /\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n @State() activeFocusOptionIndex: number = 0;\n\n @Element() element: HTMLStzhChipselectElement;\n\n /* Change event */\n @Event() stzhChange: EventEmitter<StzhChipselectChangeEvent>;\n\n @Listen(\"reset\", { target: \"document\" })\n resetListener(event: Event) {\n if ((event.target as HTMLElement).contains(this.element)) {\n requestAnimationFrame(() => {\n this.handleReset();\n });\n }\n }\n\n @Watch(\"data\")\n dataWatcher(newValue: StzhChipselectItem[] \| string) {\n if (typeof newValue === \"string\") {\n this._data = JSON.parse(newValue);\n } else {\n this._data = newValue;\n }\n\n this._dataDropdown = this._data.map((data) => {\n return {\n text: `${data.label} (${data.counter})`,\n value: data.value\n }\n });\n }\n\n @Watch(\"error\")\n errorWatcher(newValue: string \| string[]) {\n if (typeof newValue === \"string\") {\n try {\n this._error = JSON.parse(newValue);\n } catch (e) {\n if (newValue) {\n this._error = [newValue];\n } else {\n this._error = [];\n }\n }\n } else if (newValue) {\n this._error = newValue;\n } else {\n this._error = [];\n }\n }\n\n private id: string;\n private renderPromiseResolve: (value?: unknown) => void;\n\n private waitForNextRender() {\n return new Promise(resolve => this.renderPromiseResolve = resolve);\n }\n\n private handleReset = async () => {\n this.value = this.defaultValue;\n\n // this.stzhChange.emit({\n // component: \"stzh-chipselect\",\n // value: this.value\n // });\n }\n\n private handleChipClick = async (data: StzhChipselectItem, index: number) => {\n this.value = data.value;\n this.activeFocusOptionIndex = index;\n\n await this.waitForNextRender();\n\n this.stzhChange.emit({\n component: \"stzh-chipselect\",\n value: this.value\n })\n }\n\n private handleDropdownChange = async (event: CustomEvent<StzhDropdownChangeEvent>) => {\n this.value = Array.isArray(event.detail.value) ? event.detail.value[0] : event.detail.value;\n\n this.activeFocusOptionIndex = this._data.findIndex(data => {\n return data.value === this.value;\n });\n\n await this.waitForNextRender();\n\n this.stzhChange.emit({\n component: \"stzh-chipselect\",\n value: this.value\n })\n }\n\n private handleKeydown = (event: KeyboardEvent) => {\n let newActiveIndex: number = null;\n const activeOptionIndex = this.activeFocusOptionIndex;\n\n if (event.key === \"ArrowUp\" \|\| event.key === \"ArrowLeft\") {\n event.preventDefault();\n\n if (activeOptionIndex > 0) {\n newActiveIndex = activeOptionIndex - 1;\n }\n } else if (event.key === \"ArrowDown\" \|\| event.key === \"ArrowRight\") {\n event.preventDefault();\n\n if (activeOptionIndex < this._data.length - 1) {\n newActiveIndex = activeOptionIndex + 1;\n }\n } else if (event.key === \" \" \|\| event.key === \"Enter\") {\n event.preventDefault();\n this.value = this._data[activeOptionIndex].value;\n\n this.stzhChange.emit({\n component: \"stzh-chipselect\",\n value: this.value\n });\n }\n\n if (newActiveIndex !== null) {\n this.activeFocusOptionIndex = newActiveIndex;\n }\n }\n\n componentDidRender() {\n if (this.renderPromiseResolve) {\n this.renderPromiseResolve();\n }\n }\n\n async componentWillLoad() {\n this.id = `stzh-chipselect-${chipselectCounter++}`;\n\n this.dataWatcher(this.data);\n this.errorWatcher(this.error);\n\n this.defaultValue = this.defaultValue \|\| this.value;\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"chipselect\");\n }\n }\n\n render() {\n const descriptionUsed = !!this.description;\n const descriptionLongUsed = !!this.descriptionLong;\n const errorUsed = !!this.error;\n\n const classes = {\n \"stzh-chipselect\": true,\n \"stzh-chipselect--has-description\": descriptionUsed,\n \"stzh-chipselect--has-description-long\": descriptionLongUsed,\n \"stzh-chipselect--has-error\": errorUsed,\n \"stzh-chipselect--is-invalid\": this.invalid \|\| errorUsed,\n \"stzh-chipselect--is-disabled\": this.disabled,\n \"stzh-chipselect--is-required\": this.required\n };\n\n return (\n <Host is-invalid={this.invalid \|\| errorUsed}>\n <div class={classes}>\n <input\n type=\"hidden\"\n name={this.name}\n value={this.value}\n defaultValue={this.defaultValue}\n />\n\n {this._data.length > 0 &&\n <Fragment>\n <div\n class=\"stzh-chipselect__chips\"\n role=\"listbox\"\n tabindex=\"0\"\n aria-multiselectable=\"false\"\n aria-activedescendant={`${this.id}-option-${this.activeFocusOptionIndex}`}\n aria-describedby={`${this.id}-description ${this.a11yDescribedby}`}\n onKeyDown={this.handleKeydown}\n >\n {this._data.map((data, index) => (\n <stzh-chip\n role=\"option\"\n class={{\n \"stzh-chipselect__chip\": true,\n \"is-focused\": this.activeFocusOptionIndex === index\n }}\n label={data.label}\n counter={data.counter}\n icon={data.icon}\n type={data.type}\n inverted={data.inverted}\n variant={data.variant}\n size={data.size}\n disabled={this.disabled \|\| data.disabled}\n active={this.value === data.value}\n aria-selected={this.value === data.value ? \"true\" : \"false\"}\n id={`${this.id}-option-${index}`}\n a11yTabindex=\"-1\"\n onClick={() => this.handleChipClick(data, index)}\n ></stzh-chip>\n ))}\n </div>\n\n <StzhInputDescription\n classPrefix=\"stzh-chipselect\"\n id={`${this.id}-description`}\n error={this._error}\n description={this.description}\n descriptionLong={this.descriptionLong}\n descriptionLongTitle={this.descriptionLongTitle}\n descriptionLongUsed={descriptionLongUsed}\n moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n />\n\n <stzh-dropdown\n class=\"stzh-chipselect__dropdown\"\n disabled={this.disabled}\n error={this._error}\n description={this.description}\n descriptionLong={this.descriptionLong}\n required={this.required}\n invalid={this.invalid}\n items={[this.value]}\n label={this.label}\n options={this._dataDropdown}\n hideOptional={this.hideOptional}\n onStzhChange={this.handleDropdownChange}\n ></stzh-dropdown>\n </Fragment>\n }\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"stzh-chipselect.js","sourceRoot":"","sources":["../../../../src/components/stzh-chipselect/stzh-chipselect.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Watch,\n Event,\n EventEmitter,\n State,\n Fragment,\n Listen,\n} from \"@stencil/core\";\n\nimport {\n StzhChipselectItem,\n StzhChipselectChangeEvent,\n // StzhDropdownChangeEvent\n} from \"../../index\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\n// import { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nlet chipselectCounter = 0;\n\n/*\n @slot - Slot for `stzh-checkbox` elements\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n /\n@Component({\n tag: \"stzh-chipselect\",\n styleUrl: \"stzh-chipselect.scss\",\n scoped: true\n})\nexport class StzhChipselect {\n /* Translation strings /\n @Prop() localization: StzhLocaleComponent;\n\n /* The list of chips /\n @Prop() data: string \| StzhChipselectItem[] = [];\n private _data: StzhChipselectItem[] = [];\n // private _dataDropdown: any[] = [];\n\n /* The name of the input element /\n @Prop({ reflect: true }) name: string;\n\n /* Label /\n @Prop() label: string = \"\";\n\n /* Whether label is hidden. /\n @Prop() labelHidden: boolean = false;\n\n /* Multiple /\n @Prop({ mutable: true }) multiple: boolean = false;\n\n /* Value /\n @Prop({ mutable: true }) value: string \| string[] = \"\";\n private _value: string[] = [];\n\n /* Default value (used by reset) /\n @Prop({ mutable: true }) defaultValue: string \| string[] = \"\";\n\n /* Description message (use description slot as alternative) /\n @Prop() description: string;\n\n /* Long description message appearing in a popover (use description-long slot as alternative) /\n @Prop() descriptionLong: string;\n\n /* Long description title appearing in a popover (use description-long-title slot as or description property alternative) /\n @Prop() descriptionLongTitle: string;\n\n /* One or multiple error message (use error slot as alternative) /\n @Prop() error: string \| string[];\n private _error: string[];\n\n /* Invalid status /\n @Prop({ reflect: true }) invalid: boolean = false;\n\n /* Required status /\n @Prop({ reflect: true }) required: boolean = false;\n\n /* Whether all chips are disabled or not /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Hide `(optional)` label (or use `required` inside form ot hide it) /\n @Prop({ reflect: true }) hideOptional: boolean = false;\n\n /* Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) /\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n @State() activeFocusOptionIndex: number = 0;\n\n @Element() element: HTMLStzhChipselectElement;\n\n /* Change event /\n @Event() stzhChange: EventEmitter<StzhChipselectChangeEvent>;\n\n @Listen(\"reset\", { target: \"document\" })\n resetListener(event: Event) {\n if ((event.target as HTMLElement).contains(this.element)) {\n requestAnimationFrame(() => {\n this.handleReset();\n });\n }\n }\n\n @Watch(\"value\")\n valueWatcher(newValue: string[] \| string) {\n if (typeof newValue === \"string\") {\n try {\n this._value = JSON.parse(newValue);\n } catch(ex) {\n this._value = newValue ? [newValue] : [];\n }\n } else {\n this._value = newValue ? newValue : [];\n }\n }\n\n @Watch(\"data\")\n dataWatcher(newValue: StzhChipselectItem[] \| string) {\n if (typeof newValue === \"string\") {\n this._data = JSON.parse(newValue);\n } else {\n this._data = newValue;\n }\n\n // this._dataDropdown = this._data.map((data) => {\n // return {\n // text: data.counter\n // ? `${data.label} (${data.counter})`\n // : data.label,\n // value: data.value\n // }\n // });\n }\n\n @Watch(\"error\")\n errorWatcher(newValue: string \| string[]) {\n if (typeof newValue === \"string\") {\n try {\n this._error = JSON.parse(newValue);\n } catch (e) {\n if (newValue) {\n this._error = [newValue];\n } else {\n this._error = [];\n }\n }\n } else if (newValue) {\n this._error = newValue;\n } else {\n this._error = [];\n }\n }\n\n private id: string;\n private renderPromiseResolve: (value?: unknown) => void;\n\n private waitForNextRender() {\n return new Promise(resolve => this.renderPromiseResolve = resolve);\n }\n\n private handleReset = async () => {\n this.value = this.defaultValue;\n\n // this.stzhChange.emit({\n // component: \"stzh-chipselect\",\n // value: this.value\n // });\n }\n\n private handleChipClick = async (data: StzhChipselectItem, index: number) => {\n if (this.multiple) {\n if (data.value === \"\" && this._value.length > 0 && !(this._value.length === 1 && this._value[0] === \"\")) {\n this.value = [];\n } else if (data.value !== \"\") {\n this.value = this._value.includes(data.value)\n ? this._value.filter(value => value !== data.value)\n : [...this._value, data.value];\n }\n } else {\n this.value = [data.value]\n }\n\n this.activeFocusOptionIndex = index;\n\n await this.waitForNextRender();\n\n this.stzhChange.emit({\n component: \"stzh-chipselect\",\n value: this.multiple ? this._value[0] : this._value\n })\n }\n\n // private handleDropdownChange = async (event: CustomEvent<StzhDropdownChangeEvent>) => {\n // this.value = Array.isArray(event.detail.value) ? event.detail.value[0] : event.detail.value;\n\n // this.activeFocusOptionIndex = this._data.findIndex(data => {\n // return data.value === this.value;\n // });\n\n // await this.waitForNextRender();\n\n // this.stzhChange.emit({\n // component: \"stzh-chipselect\",\n // value: this.value\n // })\n // }\n\n private handleKeydown = (event: KeyboardEvent) => {\n let newActiveIndex: number = null;\n const activeOptionIndex = this.activeFocusOptionIndex;\n\n if (event.key === \"ArrowUp\" \|\| event.key === \"ArrowLeft\") {\n event.preventDefault();\n\n if (activeOptionIndex > 0) {\n newActiveIndex = activeOptionIndex - 1;\n }\n } else if (event.key === \"ArrowDown\" \|\| event.key === \"ArrowRight\") {\n event.preventDefault();\n\n if (activeOptionIndex < this._data.length - 1) {\n newActiveIndex = activeOptionIndex + 1;\n }\n } else if (event.key === \" \" \|\| event.key === \"Enter\") {\n event.preventDefault();\n this.value = this._data[activeOptionIndex].value;\n\n this.stzhChange.emit({\n component: \"stzh-chipselect\",\n value: this.value\n });\n }\n\n if (newActiveIndex !== null) {\n this.activeFocusOptionIndex = newActiveIndex;\n }\n }\n\n componentDidRender() {\n if (this.renderPromiseResolve) {\n this.renderPromiseResolve();\n }\n }\n\n async componentWillLoad() {\n this.id = `stzh-chipselect-${chipselectCounter++}`;\n\n this.dataWatcher(this.data);\n this.errorWatcher(this.error);\n this.valueWatcher(this.value);\n\n this.defaultValue = this.defaultValue \|\| this.value;\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"chipselect\");\n }\n }\n\n render() {\n const descriptionUsed = !!this.description;\n const descriptionLongUsed = !!this.descriptionLong;\n const errorUsed = !!this.error;\n\n const classes = {\n \"stzh-chipselect\": true,\n \"stzh-chipselect--has-description\": descriptionUsed,\n \"stzh-chipselect--has-description-long\": descriptionLongUsed,\n \"stzh-chipselect--has-error\": errorUsed,\n \"stzh-chipselect--is-invalid\": this.invalid \|\| errorUsed,\n \"stzh-chipselect--is-disabled\": this.disabled,\n \"stzh-chipselect--is-required\": this.required,\n \"stzh-chipselect--has-label-hidden\": this.labelHidden,\n };\n\n return (\n <Host is-invalid={this.invalid \|\| errorUsed}>\n <div class={classes}>\n {this.multiple\n ?\n <Fragment>\n {this._value.map((value) =>\n <input type=\"hidden\" name={this.name} value={value} />\n )}\n </Fragment>\n :\n <input\n type=\"hidden\"\n name={this.name}\n value={this.value}\n />\n }\n\n <label class=\"stzh-chipselect__label\" htmlFor={this.id}>\n {this.label ? this.label : <slot></slot>}\n {!this.hideOptional &&\n <span class=\"stzh-chipselect__marker\">\n <span class=\"stzh-chipselect__marker-symbol\" aria-hidden=\"true\">\n {this.required\n ? this.localization.$globals.requiredFieldMarker\n : this.localization.$globals.optionalFieldMarker\n }\n </span>\n <span class=\"stzh-chipselect__marker-text\">\n {this.required\n ? this.localization.$globals.requiredFieldText\n : this.localization.$globals.optionalFieldText\n }\n </span>\n </span>\n }\n </label>\n\n {this._data.length > 0 &&\n <Fragment>\n <div\n id={this.id}\n class=\"stzh-chipselect__chips\"\n role=\"listbox\"\n tabindex=\"0\"\n aria-multiselectable={this.multiple ? \"true\" : \"false\"}\n aria-activedescendant={`${this.id}-option-${this.activeFocusOptionIndex}`}\n aria-describedby={`${this.id}-description ${this.a11yDescribedby}`}\n onKeyDown={this.handleKeydown}\n >\n {this._data.map((data, index) => (\n <stzh-chip\n role=\"option\"\n class={{\n \"stzh-chipselect__chip\": true,\n \"is-focused\": this.activeFocusOptionIndex === index\n }}\n label={data.label}\n counter={data.counter}\n icon={data.icon}\n type={data.type}\n inverted={data.inverted}\n variant={data.variant}\n size={data.size \|\| \"small\"}\n disabled={this.disabled \|\| data.disabled}\n active={\n this._value.includes(data.value)\n \|\| (!data.value && this.multiple && (this._value.length === 0 \|\| (this._value.length === 1 && this._value[0] === \"\")))\n }\n aria-selected={\n this._value.includes(data.value)\n \|\| (!data.value && this.multiple && (this._value.length === 0 \|\| (this._value.length === 1 && this._value[0] === \"\")))\n ? \"true\" : \"false\"\n }\n id={`${this.id}-option-${index}`}\n a11yTabindex=\"-1\"\n onClick={() => this.handleChipClick(data, index)}\n ></stzh-chip>\n ))}\n </div>\n\n <StzhInputDescription\n classPrefix=\"stzh-chipselect\"\n id={`${this.id}-description`}\n error={this._error}\n description={this.description}\n descriptionLong={this.descriptionLong}\n descriptionLongTitle={this.descriptionLongTitle}\n descriptionLongUsed={descriptionLongUsed}\n moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n />\n\n {/ <stzh-dropdown\n class=\"stzh-chipselect__dropdown\"\n multiple={this.multiple}\n disabled={this.disabled}\n error={this._error}\n description={this.description}\n descriptionLong={this.descriptionLong}\n required={this.required}\n invalid={this.invalid}\n items={[this.value]}\n label={this.label}\n labelHidden={this.labelHidden}\n options={this._dataDropdown}\n hideOptional={this.hideOptional}\n onStzhChange={this.handleDropdownChange}\n ></stzh-dropdown> */}\n </Fragment>\n }\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/stzh-clamp/stzh-clamp.css CHANGED Viewed

@@ -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-contact/stzh-contact.css CHANGED Viewed

@@ -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
  */
@@ -276,22 +279,24 @@
   display: flex;
   align-items: center;
 }
-.stzh-contact__heading, .stzh-contact__availability-title {
-  font-family: var(--stzh-font-family-heavy);
-  font-weight: var(--stzh-font-weight-heavy);
-  font-style: var(--stzh-font-style-heavy);
+.stzh-contact__heading, .stzh-contact__name, .stzh-contact__availability-title {
   font-size: var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));
   line-height: var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));
   letter-spacing: var(--stzh-font-curve-p1-default-text-letter-spacing);
   margin: 0px;
 }
 @media screen and (min-width: 900px) {
-  .stzh-contact__heading, .stzh-contact__availability-title {
+  .stzh-contact__heading, .stzh-contact__name, .stzh-contact__availability-title {
     font-size: var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));
     line-height: var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));
     letter-spacing: var(--stzh-font-curve-p1-medium-text-letter-spacing);
   }
 }
+.stzh-contact__heading, .stzh-contact__name.is-heading, .stzh-contact__availability-title {
+  font-family: var(--stzh-font-family-heavy);
+  font-weight: var(--stzh-font-weight-heavy);
+  font-style: var(--stzh-font-style-heavy);
+}
 .stzh-contact__availability {
   grid-area: availability;
   margin-top: var(--stzh-space-xlarge);

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

@@ -21,6 +21,7 @@ export class StzhContact {
     this.heading = undefined;
     this.headingLevel = "3";
     this.name = undefined;
+    this.nameHeadingLevel = "";
     this.address = undefined;
     this.street = undefined;
     this.streetInfo = undefined;
@@ -86,13 +87,17 @@ export class StzhContact {
       "stzh-contact--has-links": hasLinks
     };
     const HeadingLevel = `h${this.headingLevel}`;
+    const NameHeadingLevel = this.nameHeadingLevel ? `h${this.nameHeadingLevel}` : 'div';
     const AvailabilityTitleElement = `h${this.availabilityTitleLevel}`;
     return (h(Host, null, 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("div", { class: "stzh-contact__name", 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(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 &&
         h("div", { class: "stzh-contact__street", itemprop: "streetAddress" }, this.street, this.streetInfo &&
           h(Fragment, null, h("br", null), " ", this.streetInfo)), this.postalCode &&
@@ -237,6 +242,24 @@ export class StzhContact {
         "attribute": "name",
         "reflect": false
       },
+      "nameHeadingLevel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"\" | \"1\" | \"2\" | \"3\" | \"4\"",
+          "resolved": "\"\" | \"1\" | \"2\" | \"3\" | \"4\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Name heading level"
+        },
+        "attribute": "name-heading-level",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
       "address": {
         "type": "string",
         "mutable": false,

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

	@@ -1 +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 {\n Component,\n Host,\n h,\n Element,\n Prop,\n Fragment,\n Watch\n} from \"@stencil/core\";\n\nimport {\n ContactNumber,\n ContactEmail,\n StzhContactAvailabilityItem\n} 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 /* Address (alternative for address slot or separate properties `street`, `streetInfo`, `postalCode` & `location`) /\n @Prop() address: string;\n\n /* Street /\n @Prop() street: string;\n\n /* Additional street info /\n @Prop() streetInfo: string;\n\n /* Postal code /\n @Prop() postalCode: string;\n\n /* Location / city /\n @Prop() location: string;\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 // 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 @Element() element: HTMLStzhFigureElement;\n\n async componentWillLoad() {\n this.numbersWatcher(this.numbers);\n this.emailsWatcher(this.emails);\n this.availabilityWatcher(this.availability);\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 };\n\n const HeadingLevel = `h${this.headingLevel}`;\n const AvailabilityTitleElement = `h${this.availabilityTitleLevel}`;\n\n return (\n <Host>\n <div class={classes} itemscope itemtype={`http://schema.org/${this.type}`}>\n <div\n class=\"stzh-contact__main-heading\"\n itemprop={(this.type === \"Organization\" && !this.heading\n \|\| this.type === \"Person\" && !this.name) ? \"name\" : null}\n >\n {this.mainHeading\n ? <stzh-heading level={this.mainHeadingLevel}>{this.mainHeading}</stzh-heading>\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 <div\n class=\"stzh-contact__name\"\n itemprop={this.type === \"Person\" ? \"name\" : null}\n >\n {this.name}\n </div>\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 &&\n <div class=\"stzh-contact__street\" itemprop=\"streetAddress\">\n {this.street}\n {this.streetInfo &&\n <Fragment>\n <br /> {this.streetInfo}\n </Fragment>\n }\n </div>\n }\n\n {this.postalCode &&\n <span class=\"stzh-contact__postal-code\" itemprop=\"postalCode\">\n {this.postalCode} \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} </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} </span>\n {email.href\n ?\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\n class=\"stzh-container__email-link\"\n itemprop=\"email\"\n >\n {email.text}\n </span>\n }\n </div>\n )}\n </div>\n }\n\n <div\n class=\"stzh-contact__pobox\"\n innerHTML={this.pobox}\n >\n {!this.pobox &&\n <Fragment>\n {this.poboxHeading &&\n <div class=\"stzh-contact__pobox-heading\">{this.poboxHeading}</div>\n }\n {this.poboxTitle &&\n <div class=\"stzh-contact__pobox-title\">{this.poboxTitle}</div>\n }\n {this.poboxPostalCode &&\n <span class=\"stzh-contact__pobox-postal-code\">{this.poboxPostalCode} </span>\n }\n {this.poboxLocation &&\n <span class=\"stzh-contact__pobox-locality\">{this.poboxLocation}</span>\n }\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\n class=\"stzh-contact__availability-title\"\n >\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 ?\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 <div class=\"stzh-contact__availability-hours\">\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"]}
1	+ {"version":3,"file":"stzh-contact.js","sourceRoot":"","sources":["../../../../src/components/stzh-contact/stzh-contact.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Fragment,\n Watch\n} from \"@stencil/core\";\n\nimport {\n ContactNumber,\n ContactEmail,\n StzhContactAvailabilityItem\n} 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;\n\n /* Additional street info /\n @Prop() streetInfo: string;\n\n /* Postal code /\n @Prop() postalCode: string;\n\n /* Location / city /\n @Prop() location: string;\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 // 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 @Element() element: HTMLStzhFigureElement;\n\n async componentWillLoad() {\n this.numbersWatcher(this.numbers);\n this.emailsWatcher(this.emails);\n this.availabilityWatcher(this.availability);\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 };\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>\n <div class={classes} itemscope itemtype={`http://schema.org/${this.type}`}>\n <div\n class=\"stzh-contact__main-heading\"\n itemprop={(this.type === \"Organization\" && !this.heading\n \|\| this.type === \"Person\" && !this.name) ? \"name\" : null}\n >\n {this.mainHeading\n ? <stzh-heading level={this.mainHeadingLevel}>{this.mainHeading}</stzh-heading>\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 &&\n <div class=\"stzh-contact__street\" itemprop=\"streetAddress\">\n {this.street}\n {this.streetInfo &&\n <Fragment>\n <br /> {this.streetInfo}\n </Fragment>\n }\n </div>\n }\n\n {this.postalCode &&\n <span class=\"stzh-contact__postal-code\" itemprop=\"postalCode\">\n {this.postalCode} \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} </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} </span>\n {email.href\n ?\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\n class=\"stzh-container__email-link\"\n itemprop=\"email\"\n >\n {email.text}\n </span>\n }\n </div>\n )}\n </div>\n }\n\n <div\n class=\"stzh-contact__pobox\"\n innerHTML={this.pobox}\n >\n {!this.pobox &&\n <Fragment>\n {this.poboxHeading &&\n <div class=\"stzh-contact__pobox-heading\">{this.poboxHeading}</div>\n }\n {this.poboxTitle &&\n <div class=\"stzh-contact__pobox-title\">{this.poboxTitle}</div>\n }\n {this.poboxPostalCode &&\n <span class=\"stzh-contact__pobox-postal-code\">{this.poboxPostalCode} </span>\n }\n {this.poboxLocation &&\n <span class=\"stzh-contact__pobox-locality\">{this.poboxLocation}</span>\n }\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\n class=\"stzh-contact__availability-title\"\n >\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 ?\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 <div class=\"stzh-contact__availability-hours\">\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-container/stzh-container.css CHANGED Viewed

@@ -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-content/stzh-content.css CHANGED Viewed

@@ -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
  */
@@ -167,9 +170,6 @@
 @media screen and (min-width: 1260px) {
   :host {
     --grid-template-areas: var(--stzh-content-grid-template-areas, "aside-left aside-left content content content content content content content content aside-right aside-right");
-    --stzh-content-grid-template-areas: "content content content content content content content content content content content content";
-    --stzh-content-shifted-grid-template-areas: "content content content content content content content content content content content content";
-    --stzh-content-full-grid-template-areas: "content content content content content content content content content content content content";
   }
 }
 @media screen and (min-width: 1260px) {
@@ -389,6 +389,9 @@
 }
 .stzh-content {
+  --stzh-content-grid-template-areas: "content content content content content content content content content content content content";
+  --stzh-content-shifted-grid-template-areas: "content content content content content content content content content content content content";
+  --stzh-content-full-grid-template-areas: "content content content content content content content content content content content content";
   -moz-column-gap: var(--stzh-grid-gutter);
        column-gap: var(--stzh-grid-gutter);
   display: grid;

package/dist/collection/components/stzh-cspace/stzh-cspace.css CHANGED Viewed

@@ -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
  */
@@ -507,19 +510,22 @@ stzh-cspace > .stzh-cspace > .section > :where(stzh-text[curve="p2"]), stzh-cspa
     margin-bottom: var(--stzh-space-large);
   }
 }
-stzh-cspace > .stzh-cspace > .section > stzh-input, stzh-cspace > .stzh-cspace > stzh-input, stzh-cspace > .stzh-cspace > .section > stzh-datepicker, stzh-cspace > .stzh-cspace > stzh-datepicker, stzh-cspace > .stzh-cspace > .section > stzh-dropdown, stzh-cspace > .stzh-cspace > stzh-dropdown, stzh-cspace > .stzh-cspace > .section > stzh-upload, stzh-cspace > .stzh-cspace > stzh-upload, stzh-cspace > .stzh-cspace > .section > stzh-checkbox, stzh-cspace > .stzh-cspace > stzh-checkbox, stzh-cspace > .stzh-cspace > .section > stzh-checkboxgroup, stzh-cspace > .stzh-cspace > stzh-checkboxgroup, stzh-cspace > .stzh-cspace > .section > stzh-radio, stzh-cspace > .stzh-cspace > stzh-radio, stzh-cspace > .stzh-cspace > .section > stzh-radiogroup, stzh-cspace > .stzh-cspace > stzh-radiogroup {
+stzh-cspace > .stzh-cspace > .section > stzh-input, stzh-cspace > .stzh-cspace > stzh-input, stzh-cspace > .stzh-cspace > .section > stzh-datepicker, stzh-cspace > .stzh-cspace > stzh-datepicker, stzh-cspace > .stzh-cspace > .section > stzh-daterange, stzh-cspace > .stzh-cspace > stzh-daterange, stzh-cspace > .stzh-cspace > .section > stzh-dropdown, stzh-cspace > .stzh-cspace > stzh-dropdown, stzh-cspace > .stzh-cspace > .section > stzh-upload, stzh-cspace > .stzh-cspace > stzh-upload, stzh-cspace > .stzh-cspace > .section > stzh-checkbox, stzh-cspace > .stzh-cspace > stzh-checkbox, stzh-cspace > .stzh-cspace > .section > stzh-checkboxgroup, stzh-cspace > .stzh-cspace > stzh-checkboxgroup, stzh-cspace > .stzh-cspace > .section > stzh-radio, stzh-cspace > .stzh-cspace > stzh-radio, stzh-cspace > .stzh-cspace > .section > stzh-radiogroup, stzh-cspace > .stzh-cspace > stzh-radiogroup {
   margin-bottom: var(--stzh-space-xsmall);
 }
 @media screen and (min-width: 900px) {
-  stzh-cspace > .stzh-cspace > .section > stzh-input, stzh-cspace > .stzh-cspace > stzh-input, stzh-cspace > .stzh-cspace > .section > stzh-datepicker, stzh-cspace > .stzh-cspace > stzh-datepicker, stzh-cspace > .stzh-cspace > .section > stzh-dropdown, stzh-cspace > .stzh-cspace > stzh-dropdown, stzh-cspace > .stzh-cspace > .section > stzh-upload, stzh-cspace > .stzh-cspace > stzh-upload, stzh-cspace > .stzh-cspace > .section > stzh-checkbox, stzh-cspace > .stzh-cspace > stzh-checkbox, stzh-cspace > .stzh-cspace > .section > stzh-checkboxgroup, stzh-cspace > .stzh-cspace > stzh-checkboxgroup, stzh-cspace > .stzh-cspace > .section > stzh-radio, stzh-cspace > .stzh-cspace > stzh-radio, stzh-cspace > .stzh-cspace > .section > stzh-radiogroup, stzh-cspace > .stzh-cspace > stzh-radiogroup {
+  stzh-cspace > .stzh-cspace > .section > stzh-input, stzh-cspace > .stzh-cspace > stzh-input, stzh-cspace > .stzh-cspace > .section > stzh-datepicker, stzh-cspace > .stzh-cspace > stzh-datepicker, stzh-cspace > .stzh-cspace > .section > stzh-daterange, stzh-cspace > .stzh-cspace > stzh-daterange, stzh-cspace > .stzh-cspace > .section > stzh-dropdown, stzh-cspace > .stzh-cspace > stzh-dropdown, stzh-cspace > .stzh-cspace > .section > stzh-upload, stzh-cspace > .stzh-cspace > stzh-upload, stzh-cspace > .stzh-cspace > .section > stzh-checkbox, stzh-cspace > .stzh-cspace > stzh-checkbox, stzh-cspace > .stzh-cspace > .section > stzh-checkboxgroup, stzh-cspace > .stzh-cspace > stzh-checkboxgroup, stzh-cspace > .stzh-cspace > .section > stzh-radio, stzh-cspace > .stzh-cspace > stzh-radio, stzh-cspace > .stzh-cspace > .section > stzh-radiogroup, stzh-cspace > .stzh-cspace > stzh-radiogroup {
     margin-bottom: var(--stzh-space-small);
   }
 }
 @media screen and (min-width: 1260px) {
-  stzh-cspace > .stzh-cspace > .section > stzh-input, stzh-cspace > .stzh-cspace > stzh-input, stzh-cspace > .stzh-cspace > .section > stzh-datepicker, stzh-cspace > .stzh-cspace > stzh-datepicker, stzh-cspace > .stzh-cspace > .section > stzh-dropdown, stzh-cspace > .stzh-cspace > stzh-dropdown, stzh-cspace > .stzh-cspace > .section > stzh-upload, stzh-cspace > .stzh-cspace > stzh-upload, stzh-cspace > .stzh-cspace > .section > stzh-checkbox, stzh-cspace > .stzh-cspace > stzh-checkbox, stzh-cspace > .stzh-cspace > .section > stzh-checkboxgroup, stzh-cspace > .stzh-cspace > stzh-checkboxgroup, stzh-cspace > .stzh-cspace > .section > stzh-radio, stzh-cspace > .stzh-cspace > stzh-radio, stzh-cspace > .stzh-cspace > .section > stzh-radiogroup, stzh-cspace > .stzh-cspace > stzh-radiogroup {
+  stzh-cspace > .stzh-cspace > .section > stzh-input, stzh-cspace > .stzh-cspace > stzh-input, stzh-cspace > .stzh-cspace > .section > stzh-datepicker, stzh-cspace > .stzh-cspace > stzh-datepicker, stzh-cspace > .stzh-cspace > .section > stzh-daterange, stzh-cspace > .stzh-cspace > stzh-daterange, stzh-cspace > .stzh-cspace > .section > stzh-dropdown, stzh-cspace > .stzh-cspace > stzh-dropdown, stzh-cspace > .stzh-cspace > .section > stzh-upload, stzh-cspace > .stzh-cspace > stzh-upload, stzh-cspace > .stzh-cspace > .section > stzh-checkbox, stzh-cspace > .stzh-cspace > stzh-checkbox, stzh-cspace > .stzh-cspace > .section > stzh-checkboxgroup, stzh-cspace > .stzh-cspace > stzh-checkboxgroup, stzh-cspace > .stzh-cspace > .section > stzh-radio, stzh-cspace > .stzh-cspace > stzh-radio, stzh-cspace > .stzh-cspace > .section > stzh-radiogroup, stzh-cspace > .stzh-cspace > stzh-radiogroup {
     margin-bottom: var(--stzh-space-medium);
   }
 }
+stzh-cspace > .stzh-cspace > .section > stzh-chipgroup, stzh-cspace > .stzh-cspace > stzh-chipgroup, stzh-cspace > .stzh-cspace > .section > stzh-chipselect, stzh-cspace > .stzh-cspace > stzh-chipselect {
+  margin-bottom: var(--stzh-space-xlarge);
+}
 stzh-cspace > .stzh-cspace > .section > stzh-message, stzh-cspace > .stzh-cspace > stzh-message {
   margin-bottom: var(--stzh-space-xxlarge);
 }
@@ -533,16 +539,16 @@ stzh-cspace > .stzh-cspace > .section > stzh-message, stzh-cspace > .stzh-cspace
     margin-bottom: var(--stzh-space-xxxxlarge);
   }
 }
-stzh-cspace > .stzh-cspace > .section > stzh-chipgroup, stzh-cspace > .stzh-cspace > stzh-chipgroup, stzh-cspace > .stzh-cspace > .section > stzh-contact, stzh-cspace > .stzh-cspace > stzh-contact, stzh-cspace > .stzh-cspace > .section > stzh-accordion, stzh-cspace > .stzh-cspace > stzh-accordion, stzh-cspace > .stzh-cspace > .section > stzh-anchornav, stzh-cspace > .stzh-cspace > stzh-anchornav, stzh-cspace > .stzh-cspace > .section > stzh-audio, stzh-cspace > .stzh-cspace > stzh-audio, stzh-cspace > .stzh-cspace > .section > stzh-microsite-teaserlist, stzh-cspace > .stzh-cspace > stzh-microsite-teaserlist, stzh-cspace > .stzh-cspace > .section > stzh-gallery, stzh-cspace > .stzh-cspace > stzh-gallery, stzh-cspace > .stzh-cspace > .section > stzh-panorama, stzh-cspace > .stzh-cspace > stzh-panorama, stzh-cspace > .stzh-cspace > .section > stzh-chart, stzh-cspace > .stzh-cspace > stzh-chart, stzh-cspace > .stzh-cspace > .section > stzh-sitemap, stzh-cspace > .stzh-cspace > stzh-sitemap, stzh-cspace > .stzh-cspace > .section > stzh-hr, stzh-cspace > .stzh-cspace > stzh-hr, stzh-cspace > .stzh-cspace > .section > stzh-archivelist, stzh-cspace > .stzh-cspace > stzh-archivelist, stzh-cspace > .stzh-cspace > .section > stzh-figure, stzh-cspace > .stzh-cspace > stzh-figure, stzh-cspace > .stzh-cspace > stzh-iframe, stzh-cspace > .stzh-cspace > .section > stzh-youtube, stzh-cspace > .stzh-cspace > stzh-youtube, stzh-cspace > .stzh-cspace > .section > stzh-eventinfo, stzh-cspace > .stzh-cspace > stzh-eventinfo, stzh-cspace > .stzh-cspace > .section > stzh-vbz-ticker, stzh-cspace > .stzh-cspace > stzh-vbz-ticker {
+stzh-cspace > .stzh-cspace > .section > stzh-contact, stzh-cspace > .stzh-cspace > stzh-contact, stzh-cspace > .stzh-cspace > .section > stzh-accordion, stzh-cspace > .stzh-cspace > stzh-accordion, stzh-cspace > .stzh-cspace > .section > stzh-anchornav, stzh-cspace > .stzh-cspace > stzh-anchornav, stzh-cspace > .stzh-cspace > .section > stzh-audio, stzh-cspace > .stzh-cspace > stzh-audio, stzh-cspace > .stzh-cspace > .section > stzh-microsite-teaserlist, stzh-cspace > .stzh-cspace > stzh-microsite-teaserlist, stzh-cspace > .stzh-cspace > .section > stzh-gallery, stzh-cspace > .stzh-cspace > stzh-gallery, stzh-cspace > .stzh-cspace > .section > stzh-panorama, stzh-cspace > .stzh-cspace > stzh-panorama, stzh-cspace > .stzh-cspace > .section > stzh-chart, stzh-cspace > .stzh-cspace > stzh-chart, stzh-cspace > .stzh-cspace > .section > stzh-sitemap, stzh-cspace > .stzh-cspace > stzh-sitemap, stzh-cspace > .stzh-cspace > .section > stzh-hr, stzh-cspace > .stzh-cspace > stzh-hr, stzh-cspace > .stzh-cspace > .section > stzh-archivelist, stzh-cspace > .stzh-cspace > stzh-archivelist, stzh-cspace > .stzh-cspace > .section > stzh-figure, stzh-cspace > .stzh-cspace > stzh-figure, stzh-cspace > .stzh-cspace > stzh-iframe, stzh-cspace > .stzh-cspace > .section > stzh-youtube, stzh-cspace > .stzh-cspace > stzh-youtube, stzh-cspace > .stzh-cspace > .section > stzh-eventinfo, stzh-cspace > .stzh-cspace > stzh-eventinfo, stzh-cspace > .stzh-cspace > .section > stzh-vbz-ticker, stzh-cspace > .stzh-cspace > stzh-vbz-ticker {
   margin-bottom: var(--stzh-space-xxlarge);
 }
 @media screen and (min-width: 900px) {
-  stzh-cspace > .stzh-cspace > .section > stzh-chipgroup, stzh-cspace > .stzh-cspace > stzh-chipgroup, stzh-cspace > .stzh-cspace > .section > stzh-contact, stzh-cspace > .stzh-cspace > stzh-contact, stzh-cspace > .stzh-cspace > .section > stzh-accordion, stzh-cspace > .stzh-cspace > stzh-accordion, stzh-cspace > .stzh-cspace > .section > stzh-anchornav, stzh-cspace > .stzh-cspace > stzh-anchornav, stzh-cspace > .stzh-cspace > .section > stzh-audio, stzh-cspace > .stzh-cspace > stzh-audio, stzh-cspace > .stzh-cspace > .section > stzh-microsite-teaserlist, stzh-cspace > .stzh-cspace > stzh-microsite-teaserlist, stzh-cspace > .stzh-cspace > .section > stzh-gallery, stzh-cspace > .stzh-cspace > stzh-gallery, stzh-cspace > .stzh-cspace > .section > stzh-panorama, stzh-cspace > .stzh-cspace > stzh-panorama, stzh-cspace > .stzh-cspace > .section > stzh-chart, stzh-cspace > .stzh-cspace > stzh-chart, stzh-cspace > .stzh-cspace > .section > stzh-sitemap, stzh-cspace > .stzh-cspace > stzh-sitemap, stzh-cspace > .stzh-cspace > .section > stzh-hr, stzh-cspace > .stzh-cspace > stzh-hr, stzh-cspace > .stzh-cspace > .section > stzh-archivelist, stzh-cspace > .stzh-cspace > stzh-archivelist, stzh-cspace > .stzh-cspace > .section > stzh-figure, stzh-cspace > .stzh-cspace > stzh-figure, stzh-cspace > .stzh-cspace > stzh-iframe, stzh-cspace > .stzh-cspace > .section > stzh-youtube, stzh-cspace > .stzh-cspace > stzh-youtube, stzh-cspace > .stzh-cspace > .section > stzh-eventinfo, stzh-cspace > .stzh-cspace > stzh-eventinfo, stzh-cspace > .stzh-cspace > .section > stzh-vbz-ticker, stzh-cspace > .stzh-cspace > stzh-vbz-ticker {
+  stzh-cspace > .stzh-cspace > .section > stzh-contact, stzh-cspace > .stzh-cspace > stzh-contact, stzh-cspace > .stzh-cspace > .section > stzh-accordion, stzh-cspace > .stzh-cspace > stzh-accordion, stzh-cspace > .stzh-cspace > .section > stzh-anchornav, stzh-cspace > .stzh-cspace > stzh-anchornav, stzh-cspace > .stzh-cspace > .section > stzh-audio, stzh-cspace > .stzh-cspace > stzh-audio, stzh-cspace > .stzh-cspace > .section > stzh-microsite-teaserlist, stzh-cspace > .stzh-cspace > stzh-microsite-teaserlist, stzh-cspace > .stzh-cspace > .section > stzh-gallery, stzh-cspace > .stzh-cspace > stzh-gallery, stzh-cspace > .stzh-cspace > .section > stzh-panorama, stzh-cspace > .stzh-cspace > stzh-panorama, stzh-cspace > .stzh-cspace > .section > stzh-chart, stzh-cspace > .stzh-cspace > stzh-chart, stzh-cspace > .stzh-cspace > .section > stzh-sitemap, stzh-cspace > .stzh-cspace > stzh-sitemap, stzh-cspace > .stzh-cspace > .section > stzh-hr, stzh-cspace > .stzh-cspace > stzh-hr, stzh-cspace > .stzh-cspace > .section > stzh-archivelist, stzh-cspace > .stzh-cspace > stzh-archivelist, stzh-cspace > .stzh-cspace > .section > stzh-figure, stzh-cspace > .stzh-cspace > stzh-figure, stzh-cspace > .stzh-cspace > stzh-iframe, stzh-cspace > .stzh-cspace > .section > stzh-youtube, stzh-cspace > .stzh-cspace > stzh-youtube, stzh-cspace > .stzh-cspace > .section > stzh-eventinfo, stzh-cspace > .stzh-cspace > stzh-eventinfo, stzh-cspace > .stzh-cspace > .section > stzh-vbz-ticker, stzh-cspace > .stzh-cspace > stzh-vbz-ticker {
     margin-bottom: var(--stzh-space-xxxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
-  stzh-cspace > .stzh-cspace > .section > stzh-chipgroup, stzh-cspace > .stzh-cspace > stzh-chipgroup, stzh-cspace > .stzh-cspace > .section > stzh-contact, stzh-cspace > .stzh-cspace > stzh-contact, stzh-cspace > .stzh-cspace > .section > stzh-accordion, stzh-cspace > .stzh-cspace > stzh-accordion, stzh-cspace > .stzh-cspace > .section > stzh-anchornav, stzh-cspace > .stzh-cspace > stzh-anchornav, stzh-cspace > .stzh-cspace > .section > stzh-audio, stzh-cspace > .stzh-cspace > stzh-audio, stzh-cspace > .stzh-cspace > .section > stzh-microsite-teaserlist, stzh-cspace > .stzh-cspace > stzh-microsite-teaserlist, stzh-cspace > .stzh-cspace > .section > stzh-gallery, stzh-cspace > .stzh-cspace > stzh-gallery, stzh-cspace > .stzh-cspace > .section > stzh-panorama, stzh-cspace > .stzh-cspace > stzh-panorama, stzh-cspace > .stzh-cspace > .section > stzh-chart, stzh-cspace > .stzh-cspace > stzh-chart, stzh-cspace > .stzh-cspace > .section > stzh-sitemap, stzh-cspace > .stzh-cspace > stzh-sitemap, stzh-cspace > .stzh-cspace > .section > stzh-hr, stzh-cspace > .stzh-cspace > stzh-hr, stzh-cspace > .stzh-cspace > .section > stzh-archivelist, stzh-cspace > .stzh-cspace > stzh-archivelist, stzh-cspace > .stzh-cspace > .section > stzh-figure, stzh-cspace > .stzh-cspace > stzh-figure, stzh-cspace > .stzh-cspace > stzh-iframe, stzh-cspace > .stzh-cspace > .section > stzh-youtube, stzh-cspace > .stzh-cspace > stzh-youtube, stzh-cspace > .stzh-cspace > .section > stzh-eventinfo, stzh-cspace > .stzh-cspace > stzh-eventinfo, stzh-cspace > .stzh-cspace > .section > stzh-vbz-ticker, stzh-cspace > .stzh-cspace > stzh-vbz-ticker {
+  stzh-cspace > .stzh-cspace > .section > stzh-contact, stzh-cspace > .stzh-cspace > stzh-contact, stzh-cspace > .stzh-cspace > .section > stzh-accordion, stzh-cspace > .stzh-cspace > stzh-accordion, stzh-cspace > .stzh-cspace > .section > stzh-anchornav, stzh-cspace > .stzh-cspace > stzh-anchornav, stzh-cspace > .stzh-cspace > .section > stzh-audio, stzh-cspace > .stzh-cspace > stzh-audio, stzh-cspace > .stzh-cspace > .section > stzh-microsite-teaserlist, stzh-cspace > .stzh-cspace > stzh-microsite-teaserlist, stzh-cspace > .stzh-cspace > .section > stzh-gallery, stzh-cspace > .stzh-cspace > stzh-gallery, stzh-cspace > .stzh-cspace > .section > stzh-panorama, stzh-cspace > .stzh-cspace > stzh-panorama, stzh-cspace > .stzh-cspace > .section > stzh-chart, stzh-cspace > .stzh-cspace > stzh-chart, stzh-cspace > .stzh-cspace > .section > stzh-sitemap, stzh-cspace > .stzh-cspace > stzh-sitemap, stzh-cspace > .stzh-cspace > .section > stzh-hr, stzh-cspace > .stzh-cspace > stzh-hr, stzh-cspace > .stzh-cspace > .section > stzh-archivelist, stzh-cspace > .stzh-cspace > stzh-archivelist, stzh-cspace > .stzh-cspace > .section > stzh-figure, stzh-cspace > .stzh-cspace > stzh-figure, stzh-cspace > .stzh-cspace > stzh-iframe, stzh-cspace > .stzh-cspace > .section > stzh-youtube, stzh-cspace > .stzh-cspace > stzh-youtube, stzh-cspace > .stzh-cspace > .section > stzh-eventinfo, stzh-cspace > .stzh-cspace > stzh-eventinfo, stzh-cspace > .stzh-cspace > .section > stzh-vbz-ticker, stzh-cspace > .stzh-cspace > stzh-vbz-ticker {
     margin-bottom: var(--stzh-space-xxxxlarge);
   }
 }
@@ -724,6 +730,42 @@ stzh-cspace > .stzh-cspace > .section > stzh-card, stzh-cspace > .stzh-cspace >
     margin-bottom: var(--stzh-space-xxlarge);
   }
 }
+stzh-cspace > .stzh-cspace > .section > stzh-appointments, stzh-cspace > .stzh-cspace > stzh-appointments {
+  margin-bottom: var(--stzh-space-xxlarge);
+}
+@media screen and (min-width: 600px) {
+  stzh-cspace > .stzh-cspace > .section > stzh-appointments, stzh-cspace > .stzh-cspace > stzh-appointments {
+    margin-bottom: var(--stzh-space-xxxxlarge);
+  }
+}
+@media screen and (min-width: 900px) {
+  stzh-cspace > .stzh-cspace > .section > stzh-appointments, stzh-cspace > .stzh-cspace > stzh-appointments {
+    margin-bottom: var(--stzh-space-xxxxlarge);
+  }
+}
+@media screen and (min-width: 1260px) {
+  stzh-cspace > .stzh-cspace > .section > stzh-appointments, stzh-cspace > .stzh-cspace > stzh-appointments {
+    margin-bottom: var(--stzh-space-xbig);
+  }
+}
+stzh-cspace > .stzh-cspace > .section > stzh-appointments[has-heading], stzh-cspace > .stzh-cspace > stzh-appointments[has-heading] {
+  margin-top: var(--stzh-space-medium);
+}
+@media screen and (min-width: 600px) {
+  stzh-cspace > .stzh-cspace > .section > stzh-appointments[has-heading], stzh-cspace > .stzh-cspace > stzh-appointments[has-heading] {
+    margin-top: var(--stzh-space-large);
+  }
+}
+@media screen and (min-width: 900px) {
+  stzh-cspace > .stzh-cspace > .section > stzh-appointments[has-heading], stzh-cspace > .stzh-cspace > stzh-appointments[has-heading] {
+    margin-top: var(--stzh-space-xlarge);
+  }
+}
+@media screen and (min-width: 1260px) {
+  stzh-cspace > .stzh-cspace > .section > stzh-appointments[has-heading], stzh-cspace > .stzh-cspace > stzh-appointments[has-heading] {
+    margin-top: var(--stzh-space-xxlarge);
+  }
+}
 stzh-cspace > .stzh-cspace > .section > stzh-table, stzh-cspace > .stzh-cspace > stzh-table, stzh-cspace > .stzh-cspace > .section > stzh-datatable, stzh-cspace > .stzh-cspace > stzh-datatable {
   margin-top: var(--stzh-space-medium);
   margin-bottom: var(--stzh-space-xxlarge);

package/dist/collection/components/stzh-cta/stzh-cta.css CHANGED Viewed

@@ -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
  */
@@ -159,7 +162,7 @@
 :host {
   --stzh-flyingfocus-color: var(--stzh-color-white);
   --background-color: var(--stzh-cta-background-color);
-  --heading-color: var(--stzh-color-primary70);
+  --heading-color: var(--stzh-color-white);
   --lead-color: var(--stzh-color-white);
   --sticky-background-color: var(--background-color);
   --button-color: var(--stzh-color-white);
@@ -370,49 +373,29 @@
   color: var(--stuck-heading-color);
 }
 .stzh-cta__lead {
-  font-size: var(--stzh-font-curve-p2-default-font-size, var(--stzh-font-micro-font-size));
-  line-height: var(--stzh-font-curve-p2-default-text-line-height, var(--stzh-font-micro-text-line-height));
+  font-size: var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));
+  line-height: var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));
+  letter-spacing: var(--stzh-font-curve-p1-default-text-letter-spacing);
   color: var(--lead-color);
 }
 @media screen and (min-width: 900px) {
   .stzh-cta__lead {
-    font-size: var(--stzh-font-curve-p2-medium-font-size, var(--stzh-font-milli-font-size));
-    line-height: var(--stzh-font-curve-p2-medium-text-line-height, var(--stzh-font-milli-text-line-height));
-    letter-spacing: var(--stzh-font-curve-p2-medium-text-letter-spacing);
+    font-size: var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));
+    line-height: var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));
+    letter-spacing: var(--stzh-font-curve-p1-medium-text-letter-spacing);
   }
 }
 .stzh-cta__lead:not(:empty) {
-  padding-top: var(--stzh-space-medium);
-  padding-bottom: var(--stzh-space-medium);
-}
-@media screen and (min-width: 600px) {
-  .stzh-cta__lead:not(:empty) {
-    padding-top: var(--stzh-space-large);
-  }
-}
-@media screen and (min-width: 900px) {
-  .stzh-cta__lead:not(:empty) {
-    padding-top: var(--stzh-space-xlarge);
-  }
-}
-@media screen and (min-width: 1260px) {
-  .stzh-cta__lead:not(:empty) {
-    padding-top: var(--stzh-space-xxlarge);
-  }
-}
-@media screen and (min-width: 600px) {
-  .stzh-cta__lead:not(:empty) {
-    padding-bottom: var(--stzh-space-large);
-  }
+  padding-top: var(--stzh-space-small);
 }
 @media screen and (min-width: 900px) {
   .stzh-cta__lead:not(:empty) {
-    padding-bottom: var(--stzh-space-xlarge);
+    padding-top: var(--stzh-space-medium);
   }
 }
 @media screen and (min-width: 1260px) {
   .stzh-cta__lead:not(:empty) {
-    padding-bottom: var(--stzh-space-xxlarge);
+    padding-top: var(--stzh-space-large);
   }
 }
 .stzh-cta__wrapper:has(.stzh-cta__sticky[is-stuck]:not([is-stuck=false])) .stzh-cta__lead {
@@ -510,25 +493,31 @@
   margin-bottom: 0;
 }
 .stzh-cta--size-default .stzh-cta__wrapper {
-  padding-top: var(--stzh-space-xxlarge);
-  padding-bottom: var(--stzh-space-xxlarge);
+  padding-top: var(--stzh-space-large);
+  padding-bottom: var(--stzh-space-large);
 }
-@media screen and (min-width: 900px) {
+@media screen and (min-width: 600px) {
+  .stzh-cta--size-default .stzh-cta__wrapper {
+    padding-top: var(--stzh-space-xxlarge);
+    padding-bottom: var(--stzh-space-xxlarge);
+  }
+}
+@media screen and (min-width: 600px) and (min-width: 900px) {
   .stzh-cta--size-default .stzh-cta__wrapper {
     padding-top: var(--stzh-space-xxxlarge);
   }
 }
-@media screen and (min-width: 1260px) {
+@media screen and (min-width: 600px) and (min-width: 1260px) {
   .stzh-cta--size-default .stzh-cta__wrapper {
     padding-top: var(--stzh-space-xxxxlarge);
   }
 }
-@media screen and (min-width: 900px) {
+@media screen and (min-width: 600px) and (min-width: 900px) {
   .stzh-cta--size-default .stzh-cta__wrapper {
     padding-bottom: var(--stzh-space-xxxlarge);
   }
 }
-@media screen and (min-width: 1260px) {
+@media screen and (min-width: 600px) and (min-width: 1260px) {
   .stzh-cta--size-default .stzh-cta__wrapper {
     padding-bottom: var(--stzh-space-xxxxlarge);
   }