@oiz/stzh-components 2.5.0-alpha-carousel → 2.5.0-beta

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,6 +10,7 @@
     "./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",

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-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-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-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,6 +96,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 {
@@ -119,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 {
@@ -151,6 +152,7 @@
 :host[variant=secondary] {
   --color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
   --background-color: var(--stzh-color-white);
+  --border-color: var(--stzh-color-primary60op);
 }
 :host[variant=input] {
   --color: var(--stzh-color-grey61);
@@ -237,12 +239,14 @@
   color: var(--color);
   padding: var(--padding);
   background-color: var(--background-color);
-  transition: all var(--stzh-base-transition-animation-speed);
+  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);
@@ -315,6 +319,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,
@@ -123,7 +131,7 @@ export class StzhButton {
       [`stzh-button--type-${this.type}`]: !!this.type,
       [`stzh-button--${this.variant}`]: !!this.variant
     };
-    return (h(Host, null, this.href ?
+    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))

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"; }
+}

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

@@ -0,0 +1,57 @@
+import { h } from '../../utils/h';
+import readme from './readme.md';
+import { withDesign } from 'storybook-addon-designs';
+import { getFigmaLink } from '../../../figma';
+
+export default {
+  title: 'Components/Buttongroup',
+  component: 'stzh-buttongroup',
+  parameters: {
+    docs: {
+      description: {
+        component: readme
+      }
+    },
+    design: {
+      type: 'figma',
+      url: getFigmaLink('buttongroup'),
+      allowFullscreen: true
+    }
+  },
+  decorators: [
+    withDesign
+  ]
+};
+
+const Template = (args) => (
+  <stzh-buttongroup {...args}>
+    <stzh-button variant="secondary" icon="angle-left" icon-only></stzh-button>
+    <stzh-button variant="secondary" icon="angle-up" icon-only></stzh-button>
+    <stzh-button variant="secondary" icon="angle-right" icon-only></stzh-button>
+  </stzh-buttongroup>
+);
+
+const TemplateTwoButtons = (args) => (
+  <stzh-buttongroup {...args}>
+    <stzh-button variant="secondary" icon="angle-left" icon-only></stzh-button>
+    <stzh-button variant="secondary" icon="angle-right" icon-only></stzh-button>
+  </stzh-buttongroup>
+);
+
+const TemplateOneButton = (args) => (
+  <stzh-buttongroup {...args}>
+    <stzh-button variant="secondary" icon="angle-up" icon-only></stzh-button>
+  </stzh-buttongroup>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+};
+
+export const TwoButtons = TemplateTwoButtons.bind({});
+TwoButtons.args = {
+};
+
+export const OneButton = TemplateOneButton.bind({});
+OneButton.args = {
+};

package/dist/collection/components/stzh-calendar/stzh-calendar.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 {
@@ -150,7 +152,8 @@
   font-style: normal;
   font-size: var(--stzh-font-micro-font-size);
   line-height: var(--stzh-font-micro-text-line-height);
-  text-decoration: none;
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
   padding-top: 0;
 }
 .stzh-calendar__cell {
@@ -233,7 +236,8 @@
   display: none;
 }
 .stzh-calendar__day.is-disabled {
-  text-decoration: line-through;
+  -webkit-text-decoration-line: line-through;
+          text-decoration-line: line-through;
 }
 .stzh-calendar__day.is-outside {
   background: var(--stzh-color-grey5);
@@ -242,7 +246,8 @@
   cursor: default;
   opacity: 0.6;
   pointer-events: none;
-  text-decoration: none;
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
 }
 .stzh-calendar__day.is-outside::before {
   display: none;

package/dist/collection/components/stzh-card/stzh-card.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 {
@@ -283,10 +285,8 @@
   justify-content: space-between;
   align-items: flex-start;
 }
-.stzh-card__header-meta {
-  display: inline-flex;
-}
 .stzh-card__header-meta:not(:empty) {
+  display: inline-flex;
   margin-top: var(--stzh-space-xsmall);
 }
 .stzh-card__header-left, .stzh-card__header-right {
@@ -321,7 +321,8 @@
 }
 .stzh-card__title-link {
   color: inherit;
-  text-decoration: none;
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
 }
 .stzh-card__image-link {
   display: block;
@@ -333,7 +334,8 @@
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-  text-decoration: none;
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
   margin-left: -0.5625em;
 }
 @media screen and (min-width: 1024px) {
@@ -412,13 +414,13 @@
 }
 .stzh-card--has-link .stzh-card__title-link {
   color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
-  text-decoration: none;
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
   transition: color var(--stzh-base-transition-animation-speed);
   border-radius: var(--stzh-button-border-radius);
 }
 .stzh-card--has-link .stzh-card__title-link::before, .stzh-card--has-link .stzh-card__title-link::after {
   content: "";
-  z-index: 1;
   display: block;
   position: absolute;
   top: 0;
@@ -426,6 +428,9 @@
   width: 100%;
   height: 100%;
 }
+.stzh-card--has-link .stzh-card__title-link::after {
+  z-index: 1;
+}
 .stzh-card--has-link .stzh-card__card-actions, .stzh-card--has-link .stzh-card__header-meta, .stzh-card--has-link .stzh-card__footer-actionset, .stzh-card--has-link .stzh-card__footer-select-button {
   position: relative;
   z-index: 2;

package/dist/collection/components/stzh-card-list/stzh-card-list.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[layout=fullwidth] ::slotted(*:not(:last-child):not([slot])) {