@oiz/stzh-components 2.2.0 → 2.3.0-alpha2

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

@@ -99,18 +99,20 @@
 
 :host {
   --font-family: var(--stzh-font-family-regular);
-  --font-weight: var( --stzh-font-weight-regular);
+  --font-weight: var(--stzh-font-weight-regular);
   --color: inherit;
-  --action-display: block;
+  --action-display: flex;
+  --label-min-width: var(--item-label-min-width, none);
+  --leading-icon-background-color: var(--stzh-color-grey5);
+  --leading-icon-color: var(--stzh-color-grey70);
+  --hover-leading-icon-background-color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
+  --hover-leading-icon-color: var(--stzh-color-white);
   display: contents;
 }
 :host[href]:not([href=""]), :host[a11y-expanded], :host[a11y-controls] {
   --color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
   --hover-color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
 }
-:host[direction=horizontal] {
-  --action-display: flex;
-}
 :host ::slotted(stzh-datalist) {
   margin-left: var(--stzh-space-large);
 }
@@ -126,6 +128,43 @@
 }
 .stzh-datalist-item__wrapper {
   flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+.stzh-datalist-item__leading, .stzh-datalist-item__value, .stzh-datalist-item__label, .stzh-datalist-item__meta, .stzh-datalist-item__action-list {
+  color: inherit;
+  display: flex;
+  align-items: center;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  font-family: inherit;
+  background: transparent;
+  border: none;
+  padding: 0;
+  text-decoration: none;
+}
+.stzh-datalist-item__leading.is-button, .stzh-datalist-item__leading.is-link, .stzh-datalist-item__value.is-button, .stzh-datalist-item__value.is-link, .stzh-datalist-item__label.is-button, .stzh-datalist-item__label.is-link, .stzh-datalist-item__meta.is-button, .stzh-datalist-item__meta.is-link, .stzh-datalist-item__action-list.is-button, .stzh-datalist-item__action-list.is-link {
+  cursor: pointer;
+}
+.stzh-datalist-item__leading {
+  flex-shrink: 0;
+}
+.stzh-datalist-item__leading:not(:empty) {
+  padding-right: var(--stzh-space-xsmall);
+}
+.stzh-datalist-item__leading-icon-container {
+  color: var(--leading-icon-color);
+  background-color: var(--leading-icon-background-color);
+  width: 2.5rem;
+  height: 2.5rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  transition-property: color, background-color;
+  transition-duration: var(--stzh-base-transition-animation-speed);
 }
 .stzh-datalist-item__value {
   font-size: var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));
@@ -133,6 +172,7 @@
   letter-spacing: var(--stzh-font-curve-p1-default-text-letter-spacing);
   font-family: var(--font-family);
   font-weight: var(--font-weight);
+  flex-grow: 1;
 }
 @media screen and (min-width: 1024px) {
   .stzh-datalist-item__value {
@@ -141,17 +181,6 @@
     letter-spacing: var(--stzh-font-curve-p1-medium-text-letter-spacing);
   }
 }
-.stzh-datalist-item__value, .stzh-datalist-item__label, .stzh-datalist-item__meta, .stzh-datalist-item__action-list {
-  display: block;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  font-family: inherit;
-  background: transparent;
-  border: none;
-  padding: 0;
-  text-decoration: none;
-}
 .stzh-datalist-item__value, .stzh-datalist-item__icon {
   color: var(--color);
 }
@@ -165,6 +194,9 @@
     line-height: var(--stzh-font-curve-caption-medium-text-line-height, var(--stzh-font-micro-text-line-height));
   }
 }
+.stzh-datalist-item__meta {
+  justify-content: flex-end;
+}
 .stzh-datalist-item__label {
   font-family: var(--stzh-font-family-medium);
   font-weight: var(--stzh-font-weight-medium);
@@ -173,12 +205,20 @@
 }
 .stzh-datalist-item__action-list {
   display: var(--action-display);
+  justify-content: center;
   text-align: center;
 }
 .stzh-datalist-item__action-list:not(:empty) {
   padding-left: var(--stzh-space-xsmall);
 }
-.stzh-datalist-item__action[variant=tertiary] {
+.stzh-datalist-item__action.is-non-interactive {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: var(--stzh-form-input-tiny-height);
+  height: var(--stzh-form-input-tiny-height);
+}
+.stzh-datalist-item__action.is-button[variant=tertiary] {
   --color: inherit;
 }
 .stzh-datalist-item__value, .stzh-datalist-item__icon {
@@ -213,9 +253,12 @@
 .stzh-datalist-item--is-interactive:hover .stzh-datalist-item__value {
   text-decoration: underline;
 }
+.stzh-datalist-item--is-interactive:hover .stzh-datalist-item__leading-icon-container, .stzh-datalist-item--is-interactive:focus-within .stzh-datalist-item__leading-icon-container {
+  color: var(--hover-leading-icon-color);
+  background-color: var(--hover-leading-icon-background-color);
+}
 .stzh-datalist-item--direction-vertical {
   display: flex;
-  align-items: center;
   padding-top: var(--stzh-space-xsmall);
   padding-bottom: var(--stzh-space-xsmall);
 }
@@ -226,6 +269,16 @@
 .stzh-datalist-item--direction-vertical:not(.stzh-datalist-item--has-hidden-border) {
   border-bottom: 0.0625rem solid var(--stzh-base-border-color);
 }
+.stzh-datalist-item--direction-vertical .stzh-datalist-item__leading-icon-container {
+  width: 2.5rem;
+  height: 2.5rem;
+}
+.stzh-datalist-item--direction-vertical .stzh-datalist-item__leading-icon {
+  --size: var(--stzh-icon-size-medium);
+}
+.stzh-datalist-item--direction-vertical .stzh-datalist-item__meta {
+  flex-direction: column;
+}
 .stzh-datalist-item--direction-horizontal {
   display: contents;
 }
@@ -233,16 +286,12 @@
   display: contents;
 }
 .stzh-datalist-item--direction-horizontal + .stzh-datalist-item__nested .stzh-datalist-item__nested-inner {
-  grid-column: 1/5;
+  grid-column: 1/6;
 }
 .stzh-datalist-item--direction-horizontal .stzh-datalist-item__label, .stzh-datalist-item--direction-horizontal .stzh-datalist-item__value, .stzh-datalist-item--direction-horizontal .stzh-datalist-item__meta {
-  display: flex;
   padding-top: var(--stzh-space-xsmall);
   padding-bottom: var(--stzh-space-xsmall);
 }
-.stzh-datalist-item--direction-horizontal .stzh-datalist-item__label, .stzh-datalist-item--direction-horizontal .stzh-datalist-item__value, .stzh-datalist-item--direction-horizontal .stzh-datalist-item__meta, .stzh-datalist-item--direction-horizontal .stzh-datalist-item__action-list {
-  align-items: center;
-}
 .stzh-datalist-item--direction-horizontal.stzh-datalist-item--has-hidden-border .stzh-datalist-item__label, .stzh-datalist-item--direction-horizontal.stzh-datalist-item--has-hidden-border .stzh-datalist-item__value, .stzh-datalist-item--direction-horizontal.stzh-datalist-item--has-hidden-border .stzh-datalist-item__meta {
   padding-top: calc(var(--stzh-space-xsmall) / 2);
   padding-bottom: calc(var(--stzh-space-xsmall) / 2);
@@ -251,11 +300,16 @@
   border-bottom: 0.0625rem solid var(--stzh-base-border-color);
 }
 .stzh-datalist-item--direction-horizontal .stzh-datalist-item__label:not(:empty) {
+  min-width: var(--label-min-width);
   padding-right: var(--stzh-space-xsmall);
 }
 .stzh-datalist-item--direction-horizontal .stzh-datalist-item__meta:not(:empty) {
   padding-left: var(--stzh-space-xsmall);
 }
-.stzh-datalist-item--direction-horizontal .stzh-datalist-item__action-list {
-  justify-content: center;
+.stzh-datalist-item--direction-horizontal .stzh-datalist-item__leading-icon-container {
+  width: 2rem;
+  height: 2rem;
+}
+.stzh-datalist-item--direction-horizontal .stzh-datalist-item__meta-status + .stzh-datalist-item__meta-text {
+  margin-left: var(--stzh-space-xsmall);
 }

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

@@ -21,18 +21,43 @@ export class StzhDatalistItem {
     this.rel = undefined;
     this.target = undefined;
     this.download = undefined;
+    this.leadingIcon = undefined;
     this.icon = undefined;
-    this.label = undefined;
-    this.value = undefined;
-    this.meta = undefined;
+    this.label = "";
+    this.value = "";
+    this.meta = "";
+    this.statusLabel = "";
+    this.statusType = "default";
     this.hideBorder = false;
     this.a11yExpanded = undefined;
     this.a11yControls = undefined;
   }
   renderInner(isButton) {
     const Item = isButton ? "button" : (this.href ? "a" : "div");
-    return (h(Fragment, null, h(Item, { "aria-hidden": "true", tabindex: "-1", class: "stzh-datalist-item__label", href: this.href, rel: this.rel, target: this.target, download: this.download }, this.label), h(Item, { class: "stzh-datalist-item__value", href: this.href, rel: this.rel, target: this.target, download: this.download, "aria-label": `${this.label}, ${this.value}, ${this.meta}`, "aria-controls": this.a11yControls, "aria-expanded": typeof this.a11yExpanded !== "undefined"
-        ? (this.a11yExpanded ? "true" : "false") : null }, this.value), h(Item, { "aria-hidden": "true", tabindex: "-1", class: "stzh-datalist-item__meta", href: this.href, rel: this.rel, target: this.target, download: this.download }, this.meta)));
+    return (h(Fragment, null, h(Item, { "aria-hidden": "true", tabindex: "-1", class: {
+        "stzh-datalist-item__label": true,
+        "is-button": isButton,
+        "is-link": !!this.href
+      }, href: this.href, rel: this.rel, target: this.target, download: this.download }, this.label), h(Item, { class: {
+        "stzh-datalist-item__value": true,
+        "is-button": isButton,
+        "is-link": !!this.href
+      }, href: this.href, rel: this.rel, target: this.target, download: this.download, "aria-label": `${this.label}, ${this.value}, ${this.meta}`, "aria-controls": this.a11yControls, "aria-expanded": typeof this.a11yExpanded !== "undefined"
+        ? (this.a11yExpanded ? "true" : "false") : null }, this.value), h(Item, { "aria-hidden": "true", tabindex: "-1", class: {
+        "stzh-datalist-item__meta": true,
+        "is-button": isButton,
+        "is-link": !!this.href
+      }, href: this.href, rel: this.rel, target: this.target, download: this.download }, this.statusLabel &&
+      h("stzh-status", { class: "stzh-datalist-item__meta-status", label: this.statusLabel, type: this.statusType }), this.meta && h("span", { class: "stzh-datalist-item__meta-text" }, this.meta))));
+  }
+  renderLeadingIcon(isButton) {
+    const Item = isButton ? "button" : (this.href ? "a" : "div");
+    return (h(Item, { "aria-hidden": "true", tabindex: "-1", class: {
+        "stzh-datalist-item__leading": true,
+        "is-button": isButton,
+        "is-link": !!this.href
+      }, href: this.href, rel: this.rel, target: this.target, download: this.download }, this.leadingIcon &&
+      h("div", { class: "stzh-datalist-item__leading-icon-container" }, h("stzh-icon", { class: "stzh-datalist-item__leading-icon", name: this.leadingIcon }))));
   }
   async connectedCallback() {
     this.datalist = this.element.closest("stzh-datalist");
@@ -62,17 +87,24 @@ export class StzhDatalistItem {
       "stzh-datalist-item--has-hidden-border": this.hideBorder,
       [`stzh-datalist-item--direction-${this.direction}`]: !!this.direction
     };
-    const Action = isButton ? "button" : (!this.href && this.icon ? "div" : "a");
+    const Item = isButton ? "button" : (this.href ? "a" : "div");
     return (h(Host, { role: "listitem" }, h("div", { class: classes }, this.direction === "horizontal" ?
-      this.renderInner(isButton)
+      h(Fragment, null, this.renderLeadingIcon(isButton), this.renderInner(isButton))
       :
-        h("div", { class: "stzh-datalist-item__wrapper" }, this.renderInner(isButton)), h(Action, { "aria-hidden": "true", tabindex: "-1", class: "stzh-datalist-item__action-list", href: this.href, rel: this.rel, target: this.target, download: this.download }, this.href &&
+        h(Fragment, null, this.renderLeadingIcon(isButton), h("div", { class: "stzh-datalist-item__wrapper" }, this.renderInner(isButton))), h(Item, { "aria-hidden": "true", tabindex: "-1", class: {
+        "stzh-datalist-item__action-list": true,
+        "is-button": isButton,
+        "is-link": !!this.href
+      }, href: this.href, rel: this.rel, target: this.target, download: this.download }, this.href &&
       (this.download ?
-        h("stzh-icon", { class: "stzh-datalist-item__icon", name: this.icon ? this.icon : "download" })
+        h("div", { class: "stzh-datalist-item__action is-non-interactive" }, h("stzh-icon", { class: "stzh-datalist-item__icon", name: this.icon ? this.icon : "download" }))
         :
-          h(Fragment, null, h("stzh-icon", { class: "stzh-datalist-item__icon is-internal", name: this.icon ? this.icon : "arrow-right" }), h("stzh-icon", { class: "stzh-datalist-item__icon is-external", name: this.icon ? this.icon : "external-link" }))), isButton &&
-      h(Fragment, null, h("stzh-icon", { class: "stzh-datalist-item__icon is-closed", name: this.icon ? this.icon : "plus" }), h("stzh-icon", { class: "stzh-datalist-item__icon is-open", name: this.icon ? this.icon : "minus" })), !this.href && this.icon &&
-      h("stzh-button", { class: "stzh-datalist-item__action", variant: "tertiary", size: "tiny", "aria-label": this.value, iconOnly: true, icon: this.icon, onClick: this.actionClick }))), h("div", { class: "stzh-datalist-item__nested" }, h("div", { class: "stzh-datalist-item__nested-inner" }, h("slot", null)))));
+          h("div", { class: "stzh-datalist-item__action is-non-interactive" }, h("stzh-icon", { class: "stzh-datalist-item__icon is-internal", name: this.icon ? this.icon : "arrow-right" }), h("stzh-icon", { class: "stzh-datalist-item__icon is-external", name: this.icon ? this.icon : "external-link" }))), isButton &&
+      h("div", { class: "stzh-datalist-item__action is-non-interactive" }, h("stzh-icon", { class: "stzh-datalist-item__icon is-closed", name: this.icon ? this.icon : "plus" }), h("stzh-icon", { class: "stzh-datalist-item__icon is-open", name: this.icon ? this.icon : "minus" })), !this.href && this.icon &&
+      h("stzh-button", { class: {
+          "stzh-datalist-item__action": true,
+          "is-button": true
+        }, variant: "tertiary", size: "tiny", "aria-label": this.value, iconOnly: true, icon: this.icon, onClick: this.actionClick }))), h("div", { class: "stzh-datalist-item__nested" }, h("div", { class: "stzh-datalist-item__nested-inner" }, h("slot", null)))));
   }
   static get is() { return "stzh-datalist-item"; }
   static get encapsulation() { return "scoped"; }
@@ -174,6 +206,23 @@ export class StzhDatalistItem {
         "attribute": "download",
         "reflect": false
       },
+      "leadingIcon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Leading icon"
+        },
+        "attribute": "leading-icon",
+        "reflect": false
+      },
       "icon": {
         "type": "string",
         "mutable": false,
@@ -206,7 +255,8 @@ export class StzhDatalistItem {
           "text": "Label"
         },
         "attribute": "label",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "\"\""
       },
       "value": {
         "type": "string",
@@ -223,7 +273,8 @@ export class StzhDatalistItem {
           "text": "Value"
         },
         "attribute": "value",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "\"\""
       },
       "meta": {
         "type": "string",
@@ -240,7 +291,44 @@ export class StzhDatalistItem {
           "text": "Meta"
         },
         "attribute": "meta",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "statusLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Status Label"
+        },
+        "attribute": "status-label",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "statusType": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"default\" | \"success\" | \"warning\" | \"error\" | \"info\"",
+          "resolved": "\"default\" | \"error\" | \"info\" | \"success\" | \"warning\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Status Type"
+        },
+        "attribute": "status-type",
+        "reflect": false,
+        "defaultValue": "\"default\""
       },
       "hideBorder": {
         "type": "boolean",

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

@@ -117,6 +117,9 @@ stzh-datatable *::before,
 stzh-datatable *::after {
   box-sizing: border-box;
 }
+stzh-datatable[disable-min-width]:not([disable-min-width=false]) {
+  --min-width: none;
+}
 
 .stzh-datatable {
   /* Has sorted */

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

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-import { Document } from 'flexsearch';
+import { Document } from 'flexsearch/dist/flexsearch.bundle.js';
 import { fetchTranslations } from "../../utils/translation-utils";
 /**
  *
@@ -54,6 +54,7 @@ export class StzhDatatable {
     this.sortDirection = "asc";
     this.tokenize = "forward";
     this.idField = "id";
+    this.disableMinWidth = false;
     this.rows = [];
     this.columns = [];
     this.query = "";
@@ -314,6 +315,24 @@ export class StzhDatatable {
         "reflect": false,
         "defaultValue": "\"id\""
       },
+      "disableMinWidth": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether to disable min-width of the table.\n\nIf `false`, the default `min-width` is `700px`\nIf `true`, the `min-width` is `none`, so the table will try to squeeze down content as much as possible.\n\nYou can also overwrite the min-width via CSS with the custom property `--min-width`."
+        },
+        "attribute": "disable-min-width",
+        "reflect": true,
+        "defaultValue": "false"
+      },
       "rows": {
         "type": "string",
         "mutable": false,

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

@@ -7,12 +7,13 @@ import TomSelectRemoveButton from "tom-select/dist/js/plugins/remove_button.js";
 import TomSelectCheckboxOptions from "tom-select/dist/js/plugins/checkbox_options.js";
 import TomSelectInputAutogrow from "tom-select/dist/js/plugins/input_autogrow.js";
 import TomSelectNoBackspaceDelete from "tom-select/dist/js/plugins/no_backspace_delete.js";
-const TomSelectInputHide = function (_plugin_options) {
-  // const self = this;
-  // self.on("initialize", () => {
-  //   const input = self.control_input as HTMLInputElement;
-  //   if (input) input.disabled = true;
-  // })
+const TomSelectInputReadonly = function (_plugin_options) {
+  const self = this;
+  self.on("initialize", () => {
+    const input = self.control_input;
+    if (input)
+      input.readOnly = true;
+  });
 };
 const CLASS_FILLED = "stzh-dropdown--is-filled";
 const CLASS_FOCUS = "stzh-dropdown--has-focus";
@@ -20,7 +21,7 @@ TomSelect.define("remove_button", TomSelectRemoveButton);
 TomSelect.define("checkbox_options", TomSelectCheckboxOptions);
 TomSelect.define("input_autogrow", TomSelectInputAutogrow);
 TomSelect.define("no_backspace_delete", TomSelectNoBackspaceDelete);
-TomSelect.define("input_hide", TomSelectInputHide);
+TomSelect.define("input_readonly", TomSelectInputReadonly);
 let dropdownCounter = 0;
 /**
  * @slot label - Slot for label content
@@ -147,7 +148,11 @@ export class StzhDropdown {
   async getLoadedSearches() {
     return this.tomSelect.loadedSearches;
   }
-  /** Load items by calling load property/function  */
+  /** Return current selected items */
+  async getItems() {
+    return this.tomSelect.items;
+  }
+  /** Load items by calling load property/function */
   async loadItems(query) {
     return this.tomSelect.load(query);
   }
@@ -182,7 +187,7 @@ export class StzhDropdown {
     }
     const plugins = {};
     if (this.noSearch) {
-      plugins["input_hide"] = {};
+      plugins["input_readonly"] = {};
     }
     else {
       plugins["input_autogrow"] = {};
@@ -504,7 +509,7 @@ export class StzhDropdown {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Selected values"
+          "text": "Set selected options. Can be array set with JS or as JSON string.\nTo get the current (user) selected options, use `getItems` method."
         },
         "attribute": "items",
         "reflect": false
@@ -1432,6 +1437,22 @@ export class StzhDropdown {
           "tags": []
         }
       },
+      "getItems": {
+        "complexType": {
+          "signature": "() => Promise<any>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<any>"
+        },
+        "docs": {
+          "text": "Return current selected items",
+          "tags": []
+        }
+      },
       "loadItems": {
         "complexType": {
           "signature": "(query: string) => Promise<any>",

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

@@ -120,6 +120,7 @@
   margin: 0;
   padding: 0;
   border: none;
+  min-inline-size: auto;
 }
 .stzh-fieldset__legend {
   font-family: var(--stzh-font-family-title);

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

@@ -98,14 +98,18 @@
 }
 
 :host ::slotted(*) {
-  width: 100%;
   max-width: 100%;
 }
 
+:host([fullwidth]:not([fullwidth=false])) ::slotted(*) {
+  width: 100%;
+}
+
 .stzh-figure {
   display: flex;
   flex-direction: column;
   margin: 0;
+  /* Has caption content */
 }
 .stzh-figure__element {
   display: flex;
@@ -113,7 +117,6 @@
 .stzh-figure__caption {
   font-size: var(--stzh-font-curve-caption-default-font-size, var(--stzh-font-nano-font-size));
   line-height: var(--stzh-font-curve-caption-default-text-line-height, var(--stzh-font-nano-text-line-height));
-  margin-top: var(--stzh-space-small);
 }
 @media screen and (min-width: 1024px) {
   .stzh-figure__caption {
@@ -121,9 +124,6 @@
     line-height: var(--stzh-font-curve-caption-medium-text-line-height, var(--stzh-font-micro-text-line-height));
   }
 }
-.stzh-figure__caption:empty {
-  display: none;
-}
 .stzh-figure__copyright {
   font-family: var(--stzh-font-family-medium);
   font-weight: var(--stzh-font-weight-medium);
@@ -134,4 +134,7 @@
 }
 .stzh-figure__copyright:not(:empty) {
   margin-left: var(--stzh-space-xxsmall);
+}
+.stzh-figure--has-caption-or-copyright .stzh-figure__caption {
+  margin-top: var(--stzh-space-small);
 }

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

@@ -9,12 +9,14 @@ export class StzhFigure {
   constructor() {
     this.caption = "";
     this.copyright = "";
+    this.fullwidth = true;
   }
   render() {
     const captionSlotUsed = hasSlot(this.element, 'caption');
+    const copyrightSlotUsed = hasSlot(this.element, 'copyright');
     const classes = {
       "stzh-figure": true,
-      "stzh-figure--has-caption": captionSlotUsed
+      "stzh-figure--has-caption-or-copyright": !!this.caption || !!this.copyright || captionSlotUsed || copyrightSlotUsed
     };
     return (h(Host, null, h("figure", { class: classes }, h("div", { class: "stzh-figure__element" }, h("slot", null)), h("figcaption", { class: "stzh-figure__caption" }, this.caption ? this.caption : h("slot", { name: "caption" }), h("span", { class: "stzh-figure__copyright" }, this.copyright ? this.copyright : h("slot", { name: "copyright" }))))));
   }
@@ -67,6 +69,24 @@ export class StzhFigure {
         "attribute": "copyright",
         "reflect": false,
         "defaultValue": "\"\""
+      },
+      "fullwidth": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether to stretch slotted content to fullwidth"
+        },
+        "attribute": "fullwidth",
+        "reflect": true,
+        "defaultValue": "true"
       }
     };
   }

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

@@ -121,6 +121,7 @@
 }
 .stzh-footer [slot=logo],
 .stzh-footer [slot=logo] img {
+  display: block;
   height: 2.375rem;
 }
 .stzh-footer [slot=info] {

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

@@ -99,6 +99,12 @@
 
 :host {
   --stzh-flyingfocus-color: var(--stzh-base-invert-color);
+  --stzh-base-color: var(--stzh-base-invert-color);
+  --stzh-base-lead-color: var(--stzh-base-invert-color);
+  --stzh-base-border-color: var(--stzh-base-invert-color);
+  --stzh-heading-color: var(--stzh-base-invert-color);
+  --stzh-link-color: var(--stzh-base-invert-color);
+  --stzh-link-hover-color: var(--stzh-base-invert-color);
   --background-color: var(--stzh-color-error);
   --color: var(--stzh-base-invert-color);
   --close-color: var(--stzh-base-invert-color);
@@ -112,7 +118,12 @@
 :host ::slotted(stzh-button[slot=button]) {
   --stzh-base-invert-color: var(--button-color);
 }
-:host ::slotted(stzh-button[slot=button])[variant=secondary] {
+:host ::slotted(stzh-button[slot=button])[variant=default]:not([disabled]) {
+  --color: var(--button-hover-color);
+  --background-color: var(--stzh-base-invert-color);
+  --border-color: var(--stzh-base-invert-color);
+}
+:host ::slotted(stzh-button[slot=button])[variant=secondary]:not([disabled]) {
   --color: var(--stzh-base-invert-color);
   --background-color: transparent;
   --border-color: var(--stzh-base-invert-color);

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

@@ -164,6 +164,7 @@
 .header {
   /* Hide logo */
   /* Has empty metabar */
+  /* Has empty metabar */
   /* Metabar Stay */
   /* Sticky metabar */
   /* Sticky variant */
@@ -379,10 +380,13 @@
   opacity: 0;
 }
 @media screen and (max-width: 799px) {
-  .header--has-empty-metabar .header__metabar {
+  .header--has-empty-metabar-mobile .header__metabar {
     display: none;
   }
 }
+.header--has-empty-metabar .header__metabar {
+  display: none;
+}
 @media screen and (max-width: 799px) {
   .header--has-metabar-stay .header__metabar-langnav {
     display: inline-flex;