@oiz/stzh-components 2.4.0 → 2.5.0-alpha

package/dist/collection/assets/vendors/readspeaker/ReadSpeakerClassic.css

@@ -35,7 +35,7 @@ a.icon.read {
 
 .rsbtn_classic .rsbtn_play {
 	font-family: sans-serif;
-	text-decoration: none;
+	text-decoration-line: none;
 	color: #33a;
 }
 
@@ -46,7 +46,7 @@ a.icon.read {
 .rsbtn_classic .rsbtn_exp span,
 .rsbtn_classic .rsbtn_exp a {
 	display: block;
-	text-decoration: none;
+	text-decoration-line: none;
 }
 
 

package/dist/collection/collection-manifest.json

@@ -10,9 +10,11 @@
     "./components/stzh-audio/stzh-audio.js",
     "./components/stzh-badge/stzh-badge.js",
     "./components/stzh-button/stzh-button.js",
+    "./components/stzh-buttongroup/stzh-buttongroup.js",
     "./components/stzh-calendar/stzh-calendar.js",
     "./components/stzh-card/stzh-card.js",
     "./components/stzh-card-list/stzh-card-list.js",
+    "./components/stzh-carousel/stzh-carousel.js",
     "./components/stzh-cell/stzh-cell.js",
     "./components/stzh-chart/stzh-chart.js",
     "./components/stzh-checkbox/stzh-checkbox.js",

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

@@ -95,6 +95,8 @@
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 
 :host ::slotted(stzh-accordion-item:not(:last-child)) {

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

@@ -95,6 +95,8 @@
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 
 :host {

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

@@ -23,9 +23,41 @@ let accordionItemCounter = 0;
 export class StzhAccordionItem {
   constructor() {
     this.toggledByMethod = false;
+    this.focusedByInput = false;
     this.handleHeaderClick = () => {
       this.toggle();
     };
+    this.onRootFocus = () => {
+      if (!this.focusedByInput) {
+        this.setFocus();
+      }
+      this.focusedByInput = false;
+    };
+    this.onFocus = (event) => {
+      this.focusedByInput = true;
+      const focusEvent = new FocusEvent('focus', {
+        view: window,
+        bubbles: false,
+        cancelable: false
+      });
+      this.element.dispatchEvent(focusEvent);
+      this.stzhFocus.emit({
+        component: "stzh-accordion-item",
+        originalEvent: event
+      });
+    };
+    this.onBlur = (event) => {
+      const blurEvent = new FocusEvent('blur', {
+        view: window,
+        bubbles: false,
+        cancelable: false
+      });
+      this.element.dispatchEvent(blurEvent);
+      this.stzhBlur.emit({
+        component: "stzh-accordion-item",
+        originalEvent: event
+      });
+    };
     this.onButtonKeydown = (event) => {
       let action = null;
       if (event.key === "ArrowDown") {
@@ -169,7 +201,7 @@ export class StzhAccordionItem {
       "stzh-accordion-item--is-open": this.open,
       "stzh-accordion-item--is-disabled": this.disabled,
     };
-    return (h(Host, null, h("div", { class: classes }, h(Heading, { id: `${this.accordionItemId}-header`, class: "stzh-accordion-item__heading", onClick: this.handleHeaderClick }, h("button", { ref: (el) => (this.buttonElement = el), class: "stzh-accordion-item__button", "aria-controls": `${this.accordionItemId}-content`, "aria-expanded": `${this.open ? "true" : "false"}`, disabled: this.disabled, onKeyDown: this.onButtonKeydown, type: "button" }, h("span", { class: "stzh-accordion-item__icon-wrapper" }, this.icon ?
+    return (h(Host, { tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { class: classes }, h(Heading, { id: `${this.accordionItemId}-header`, class: "stzh-accordion-item__heading", onClick: this.handleHeaderClick }, h("button", { ref: (el) => (this.buttonElement = el), class: "stzh-accordion-item__button", "aria-controls": `${this.accordionItemId}-content`, "aria-expanded": `${this.open ? "true" : "false"}`, disabled: this.disabled, onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onButtonKeydown, type: "button" }, h("span", { class: "stzh-accordion-item__icon-wrapper" }, this.icon ?
       h("stzh-icon", { class: "stzh-accordion-item__icon", name: this.icon })
       :
         h("slot", { name: "icon" })), h("span", { class: "stzh-accordion-item__button-text" }, h("span", { class: "stzh-accordion-item__subtitle" }, this.subtitle), h("span", { class: "stzh-accordion-item__heading" }, this.heading), h("span", { class: "stzh-accordion-item__description" }, this.description)), h("span", { class: "stzh-accordion-item__button-icon" }), (this.badge || this.badgeEmpty) &&
@@ -452,6 +484,46 @@ export class StzhAccordionItem {
             }
           }
         }
+      }, {
+        "method": "stzhFocus",
+        "name": "stzhFocus",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Focus event"
+        },
+        "complexType": {
+          "original": "StzhAccordionItemFocusEvent",
+          "resolved": "{ component: \"stzh-accordion-item\"; originalEvent: FocusEvent; }",
+          "references": {
+            "StzhAccordionItemFocusEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }, {
+        "method": "stzhBlur",
+        "name": "stzhBlur",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Input blur event"
+        },
+        "complexType": {
+          "original": "StzhAccordionItemBlurEvent",
+          "resolved": "{ component: \"stzh-accordion-item\"; originalEvent: FocusEvent; }",
+          "references": {
+            "StzhAccordionItemBlurEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
       }];
   }
   static get methods() {

package/dist/collection/components/stzh-accordion-item/stzh-accordion-item.stories.js

@@ -8,7 +8,7 @@ export default {
   component: 'stzh-accordion-item',
   parameters: {
     actions: {
-      handles: ['stzhOpen', 'stzhOpened', 'stzhClose', 'stzhClosed']
+      handles: ['stzhOpen', 'stzhOpened', 'stzhClose', 'stzhClosed', 'stzhFocus', 'stzhBlur']
     },
     layout: 'padded',
     docs: {

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

@@ -95,6 +95,8 @@
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 
 :host ::slotted([slot=primary]),

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

@@ -30,7 +30,9 @@ export class StzhActions {
     });
   }
   disconnectedCallback() {
-    this.observer.disconnect();
+    if (this.observer) {
+      this.observer.disconnect();
+    }
   }
   render() {
     const classes = {

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

@@ -95,6 +95,8 @@
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 
 .stzh-actionset {

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

@@ -63,6 +63,12 @@ export class StzhActionset {
       }
       this.actionsCollapsed = this._actions.slice(newActionsVisible);
     };
+    this.handleResize = () => {
+      if (this.debounceResize) {
+        window.cancelAnimationFrame(this.debounceResize);
+      }
+      this.debounceResize = requestAnimationFrame(this.update);
+    };
     this.mediaChangeHandler = () => {
       this.actionsCollapsed = [];
       requestAnimationFrame(this.update);
@@ -86,12 +92,6 @@ export class StzhActionset {
       this._actions = newValue;
     }
   }
-  handleLoad() {
-    if (this.debounceResize) {
-      window.cancelAnimationFrame(this.debounceResize);
-    }
-    this.debounceResize = requestAnimationFrame(this.update);
-  }
   async componentWillLoad() {
     this.actionsWatcher(this.actions);
     if (!this.localization) {
@@ -100,9 +100,14 @@ export class StzhActionset {
   }
   connectedCallback() {
     addMediaChangeListener(this.mediaChangeHandler);
+    this.resizeObserver = new ResizeObserver(this.handleResize);
+    this.resizeObserver.observe(this.element);
   }
   disconnectedCallback() {
     removeMediaChangeListener(this.mediaChangeHandler);
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+    }
   }
   componentDidLoad() {
     this.update();
@@ -323,31 +328,4 @@ export class StzhActionset {
         "methodName": "actionsWatcher"
       }];
   }
-  static get listeners() {
-    return [{
-        "name": "appload",
-        "method": "handleLoad",
-        "target": "window",
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "resize",
-        "method": "handleLoad",
-        "target": "window",
-        "capture": false,
-        "passive": true
-      }, {
-        "name": "DOMContentLoaded",
-        "method": "handleLoad",
-        "target": "window",
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "load",
-        "method": "handleLoad",
-        "target": "window",
-        "capture": false,
-        "passive": false
-      }];
-  }
 }

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

@@ -95,6 +95,8 @@
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 
 :host {
@@ -278,8 +280,8 @@
   margin: calc((var(--stzh-space-large) / 2) / -2);
 }
 .stzh-anchornav__item {
-  --text-decoration: none;
-  --hover-text-decoration: underline;
+  --text-decoration-line: none;
+  --hover-text-decoration-line: underline;
   padding: calc(var(--stzh-space-large) / 2);
 }
 .stzh-anchornav--has-border {

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

@@ -95,14 +95,16 @@
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 
 :host {
   width: 100%;
 }
 :host ::slotted(stzh-link) {
-  --text-decoration: none;
-  --hover-text-decoration: none;
+  --text-decoration-line: none;
+  --hover-text-decoration-line: none;
   letter-spacing: 0.01em;
 }
 :host ::slotted(stzh-link) .stzh-link__inner {
@@ -184,7 +186,8 @@
   line-height: var(--stzh-font-milli-text-line-height);
   letter-spacing: var(--stzh-font-curve---text-letter-spacing);
   color: var(--stzh-base-color);
-  text-decoration: none;
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
   white-space: nowrap;
   transition: color var(--stzh-base-transition-animation-speed);
   margin-left: var(--stzh-space-small);

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

@@ -28,7 +28,9 @@ export class StzhAppnav {
     });
   }
   disconnectedCallback() {
-    this.observer.disconnect();
+    if (this.observer) {
+      this.observer.disconnect();
+    }
   }
   render() {
     return (h(Host, null, h("div", { class: "stzh-appnav" }, h("div", { class: "stzh-appnav__items", role: "list" }, h("slot", null)), this.appTitle &&

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

@@ -95,6 +95,8 @@
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 
 .stzh-appointments__wrapper {

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

@@ -95,6 +95,8 @@
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 
 .stzh-audio {

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

@@ -95,6 +95,8 @@
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 
 :host {
@@ -117,8 +119,8 @@
 }
 
 .stzh-badge {
-  font-family: var(--stzh-font-family-heavy);
-  font-weight: var(--stzh-font-weight-heavy);
+  font-family: var(--stzh-font-family-medium);
+  font-weight: var(--stzh-font-weight-medium);
   font-style: normal;
   box-sizing: content-box;
   display: inline-flex;

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

@@ -96,12 +96,16 @@
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 
 :host {
   --color: var(--stzh-color-white);
   --background-color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
+  --border-width: 0.0625rem;
   --border-color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
+  --border-radius: var(--stzh-button-border-radius);
   --height: var(--stzh-form-input-height);
   --icon-size: var(--stzh-icon-size-small);
   --icon-text-margin: var(--stzh-space-small);
@@ -117,7 +121,6 @@
   --floating-bottom: var(--stzh-space-medium);
   --floating-right: var(--stzh-space-medium);
   display: inline-block;
-  border-radius: var(--border-radius);
 }
 @media screen and (min-width: 600px) {
   :host {
@@ -235,10 +238,14 @@
   color: var(--color);
   padding: var(--padding);
   background-color: var(--background-color);
-  transition: all var(--stzh-base-transition-animation-speed);
-  border: 0.0625rem solid var(--border-color);
+  transition-duration: var(--stzh-base-transition-animation-speed);
+  transition-property: color, background-color, border-color;
+  border-style: solid;
+  border-width: var(--border-width);
+  border-color: var(--border-color);
   cursor: pointer;
-  text-decoration: none;
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
   width: 100%;
   min-width: var(--height);
   min-height: var(--height);
@@ -311,6 +318,9 @@
   z-index: -1;
   opacity: 0;
   pointer-events: none;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
 }
 .stzh-button__mark {
   border: 0.0625rem solid var(--stzh-color-grey61);

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

@@ -7,6 +7,7 @@ import { fetchTranslations } from "../../utils/translation-utils";
  */
 export class StzhButton {
   constructor() {
+    this.focusedByInput = false;
     this.onInput = (event) => {
       this.checked = this.input.checked;
       this.stzhChange.emit({
@@ -16,7 +17,14 @@ export class StzhButton {
         checked: this.checked
       });
     };
+    this.onRootFocus = () => {
+      if (!this.focusedByInput) {
+        this.setFocus();
+      }
+      this.focusedByInput = false;
+    };
     this.onFocus = (event) => {
+      this.focusedByInput = true;
       const focusEvent = new FocusEvent("focus", {
         view: window,
         bubbles: false,
@@ -76,7 +84,9 @@ export class StzhButton {
     this.a11yLabel = undefined;
     this.a11yDescribedby = "";
     this.a11yExpanded = undefined;
+    this.a11yDisabled = undefined;
     this.a11yControls = undefined;
+    this.a11yTabindex = undefined;
   }
   /** Focus button */
   async setFocus() {
@@ -121,16 +131,19 @@ export class StzhButton {
       [`stzh-button--type-${this.type}`]: !!this.type,
       [`stzh-button--${this.variant}`]: !!this.variant
     };
-    return (h(Host, null, this.href ?
-      h("a", { ref: (el) => (this.button = el), href: this.disabled ? null : this.href, rel: this.rel, download: this.download, target: this.target, class: classes, "aria-label": this.a11yLabel, "aria-describedby": this.a11yDescribedby, "aria-expanded": typeof this.a11yExpanded !== "undefined"
-          ? (this.a11yExpanded ? "true" : "false") : null, "aria-controls": this.a11yControls, accessKey: this.linkAccesskey, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, this.renderInner(iconUsed))
+    return (h(Host, { tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, this.href ?
+      h("a", { ref: (el) => (this.button = el), href: this.disabled ? null : this.href, rel: this.rel, download: this.download, target: this.target, class: classes, "aria-label": this.a11yLabel, "aria-describedby": this.a11yDescribedby, "aria-disabled": typeof this.a11yDisabled !== "undefined"
+          ? (this.a11yDisabled ? "true" : "false") : null, "aria-expanded": typeof this.a11yExpanded !== "undefined"
+          ? (this.a11yExpanded ? "true" : "false") : null, "aria-controls": this.a11yControls, accessKey: this.linkAccesskey, tabindex: this.a11yTabindex, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, this.renderInner(iconUsed))
       :
         this.type === "radio" ?
-          h("label", { ref: (el) => (this.button = el), class: classes, onClick: this.onClick }, h("input", { ref: (el) => (this.input = el), type: "radio", class: "stzh-button__input", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, "aria-label": this.a11yLabel, "aria-describedby": this.a11yDescribedby, "aria-expanded": typeof this.a11yExpanded !== "undefined"
-              ? (this.a11yExpanded ? "true" : "false") : null, "aria-controls": this.a11yControls, accessKey: this.linkAccesskey, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, onInput: this.onInput }), this.renderInner(iconUsed))
+          h("label", { ref: (el) => (this.button = el), class: classes, onClick: this.onClick }, h("input", { ref: (el) => (this.input = el), type: "radio", class: "stzh-button__input", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, "aria-label": this.a11yLabel, "aria-describedby": this.a11yDescribedby, "aria-disabled": typeof this.a11yDisabled !== "undefined"
+              ? (this.a11yDisabled ? "true" : "false") : null, "aria-expanded": typeof this.a11yExpanded !== "undefined"
+              ? (this.a11yExpanded ? "true" : "false") : null, "aria-controls": this.a11yControls, accessKey: this.linkAccesskey, tabindex: this.a11yTabindex, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, onInput: this.onInput }), this.renderInner(iconUsed))
           :
-            h("button", { ref: (el) => (this.button = el), class: classes, type: this.type, disabled: this.disabled, "aria-label": this.a11yLabel, "aria-describedby": this.a11yDescribedby, "aria-expanded": typeof this.a11yExpanded !== "undefined"
-                ? (this.a11yExpanded ? "true" : "false") : null, "aria-controls": this.a11yControls, accessKey: this.linkAccesskey, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, this.renderInner(iconUsed))));
+            h("button", { ref: (el) => (this.button = el), class: classes, type: this.type, disabled: this.disabled, "aria-label": this.a11yLabel, "aria-describedby": this.a11yDescribedby, "aria-disabled": typeof this.a11yDisabled !== "undefined"
+                ? (this.a11yDisabled ? "true" : "false") : null, "aria-expanded": typeof this.a11yExpanded !== "undefined"
+                ? (this.a11yExpanded ? "true" : "false") : null, "aria-controls": this.a11yControls, accessKey: this.linkAccesskey, tabindex: this.a11yTabindex, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, this.renderInner(iconUsed))));
   }
   static get is() { return "stzh-button"; }
   static get encapsulation() { return "scoped"; }
@@ -683,6 +696,23 @@ export class StzhButton {
         "attribute": "a11y-expanded",
         "reflect": true
       },
+      "a11yDisabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Aria disabled of link/button"
+        },
+        "attribute": "a11y-disabled",
+        "reflect": true
+      },
       "a11yControls": {
         "type": "string",
         "mutable": false,
@@ -699,6 +729,23 @@ export class StzhButton {
         },
         "attribute": "a11y-controls",
         "reflect": false
+      },
+      "a11yTabindex": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Tabindex of link/button"
+        },
+        "attribute": "a11y-tabindex",
+        "reflect": false
       }
     };
   }

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

@@ -0,0 +1,123 @@
+/**
+ * Colors
+ */
+/*
+ * Base
+ */
+/**
+ * Flyingfocus
+ */
+/**
+ * Link
+ */
+/**
+ * Text
+ */
+/**
+ * Richtext
+ */
+/**
+ * Section
+ */
+/**
+ * Header
+ */
+/**
+ * Appnav
+ */
+/**
+ * Progressbar
+ */
+/**
+ * Loader
+ */
+/**
+ * Table
+ */
+/**
+ * Heading
+ */
+/**
+ * Menu (Item)
+ */
+/**
+ * Form Elements (Input / Checkbox / Radio / Select / Datepicker)
+ */
+/**
+ * Popover
+ */
+/**
+ * Tooltips
+ */
+/**
+ * Accordions
+ */
+/**
+ * Buttons
+ */
+/**
+ * Box Shadows
+ */
+/**
+ * Z-Indexes
+ * Inspired by https://www.duetds.com/tokens/#z-index
+ */
+/**
+ * Icon sizes
+ */
+/**
+ * Grid
+ */
+/**
+ * Breakpoints
+ */
+/**
+ * Container
+ */
+/**
+ * Spaces
+ */
+/**
+ * Fonts
+ */
+:host {
+  font-family: var(--stzh-font-family-regular);
+  font-weight: var(--stzh-font-weight-regular);
+  font-style: normal;
+  color: var(--stzh-base-color);
+  box-sizing: border-box;
+  display: block;
+}
+:host[hidden] {
+  display: none;
+}
+:host *,
+:host *::before,
+:host *::after {
+  box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
+}
+
+:host ::slotted(stzh-button):first-child {
+  --border-radius: var(--stzh-button-border-radius) 0px 0px var(--stzh-button-border-radius);
+  --border-width: 0.0625rem 0px 0.0625rem 0.0625rem;
+}
+:host ::slotted(stzh-button):last-child {
+  --border-radius: 0px var(--stzh-button-border-radius) var(--stzh-button-border-radius) 0px;
+  --border-width: 0.0625rem 0.0625rem 0.0625rem 0px;
+}
+:host ::slotted(stzh-button):first-child:last-child {
+  --border-width: 0.0625rem;
+  --border-radius: var(--stzh-button-border-radius);
+}
+:host ::slotted(stzh-button):first-child + stzh-button:last-child {
+  --border-width: 0.0625rem;
+}
+:host ::slotted(stzh-button):not(:first-child):not(:last-child) {
+  --border-radius: 0px;
+}
+
+.stzh-buttongroup {
+  display: flex;
+}

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

@@ -0,0 +1,25 @@
+import { Host, h } from "@stencil/core";
+/**
+ * @slot - Slot for buttons
+ */
+export class StzhButtongroup {
+  render() {
+    const classes = {
+      "stzh-buttongroup": true
+    };
+    return (h(Host, null, h("div", { class: classes }, h("slot", null))));
+  }
+  static get is() { return "stzh-buttongroup"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-buttongroup.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-buttongroup.css"]
+    };
+  }
+  static get elementRef() { return "element"; }
+}