@oiz/stzh-components 2.4.0 → 2.5.0-alpha

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;
@@ -287,7 +292,7 @@
   position: relative;
 }
 .stzh-calendar__select-wrapper span {
-  margin-right: 0;
+  margin-right: 0px;
 }
 .stzh-calendar__select {
   font-size: var(--stzh-font-milli-font-size);

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

@@ -95,11 +95,13 @@
 :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 {
   --box-shadow: var(--stzh-box-shadow-popover);
-  --border: 0.0625rem solid var(--stzh-base-border-color);
+  --border-color: var(--stzh-base-border-color);
   --border-radius: 0.1875rem;
   --content-min-height: 7.5rem;
   --dnd-visibility: hidden;
@@ -115,6 +117,12 @@
 :host[checked]:not([checked=false]) {
   outline: 0.1875rem solid var(--stzh-color-primary, var(--stzh-color-zueriblue));
 }
+:host[hide-elevation]:not([hide-elevation=false]) {
+  --box-shadow: none;
+}
+:host[hide-elevation]:not([hide-elevation=false])[href]:hover, :host[hide-elevation]:not([hide-elevation=false])[href]:focus-within, :host[hide-elevation]:not([hide-elevation=false]).is-selected, :host[hide-elevation]:not([hide-elevation=false]).is-chosen, .is-selected :host[hide-elevation]:not([hide-elevation=false]), .is-chosen :host[hide-elevation]:not([hide-elevation=false]) {
+  --box-shadow: var(--stzh-box-shadow-popover);
+}
 :host.is-ghost::after, .is-ghost :host::after {
   border-radius: var(--border-radius);
 }
@@ -123,7 +131,7 @@
 }
 :host.is-ghost, .is-ghost :host {
   --box-shadow: none;
-  --border: 0.0625rem solid transparent;
+  --border-color: transparent;
   overflow: hidden;
 }
 :host.is-drag, :host.is-chosen, :host.is-ghost, :host.is-selected, .is-drag :host, .is-chosen :host, .is-ghost :host, .is-selected :host, :host[is-sortable]:hover {
@@ -195,7 +203,9 @@
   background-color: var(--stzh-color-white);
   border-radius: var(--border-radius);
   box-shadow: var(--box-shadow);
-  border: var(--border);
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: var(--border-color);
   transition: box-shadow var(--stzh-base-transition-animation-speed);
   /* Has Link */
   /* Interactive Subtitle */
@@ -275,10 +285,8 @@
   justify-content: space-between;
   align-items: flex-start;
 }
-.stzh-card__header-meta {
-  display: flex;
-}
 .stzh-card__header-meta:not(:empty) {
+  display: inline-flex;
   margin-top: var(--stzh-space-xsmall);
 }
 .stzh-card__header-left, .stzh-card__header-right {
@@ -313,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;
@@ -325,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) {
@@ -385,8 +395,8 @@
 }
 @media screen and (max-width: 1023px) {
   .stzh-card__card-action {
-    --icon-text-margin: 0;
-    --badge-icon-text-margin: 0;
+    --icon-text-margin: 0px;
+    --badge-icon-text-margin: 0px;
   }
 }
 .stzh-card__card-action[variant=tertiary] {
@@ -404,10 +414,30 @@
 }
 .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: "";
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  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;
+}
+.stzh-card--has-link .stzh-card__image-link:hover + .stzh-card__content-wrapper .stzh-card__title-link, .stzh-card--has-link .stzh-card__title-link:hover, .stzh-card--has-link .stzh-card__title-link:focus {
+  color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
+}
 .stzh-card--has-link:hover .stzh-card__footer-arrow {
   color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
 }
@@ -450,8 +480,8 @@
   border-bottom: none;
 }
 .stzh-card--is-collapsed .stzh-card__card-action, .stzh-card--has-collapsed-header .stzh-card__card-action {
-  --icon-text-margin: 0;
-  --badge-icon-text-margin: 0;
+  --icon-text-margin: 0px;
+  --badge-icon-text-margin: 0px;
 }
 .stzh-card--is-starred .stzh-card__card-action.is-star {
   color: var(--stzh-color-primary, var(--stzh-color-zueriblue));

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

@@ -105,6 +105,12 @@ export class StzhCard {
         });
       });
     };
+    this.handleResize = () => {
+      if (this.debounceResize) {
+        window.cancelAnimationFrame(this.debounceResize);
+      }
+      this.debounceResize = requestAnimationFrame(this.update);
+    };
     this.handleMutation = (entries) => {
       this.init();
       this.nodeChange(entries);
@@ -139,14 +145,9 @@ export class StzhCard {
     this.collapsible = false;
     this.hideHeaderBorder = false;
     this.hideFooterBorder = false;
+    this.hideElevation = false;
     this.hideMovementActions = false;
   }
-  handleResize() {
-    if (this.debounceResize) {
-      window.cancelAnimationFrame(this.debounceResize);
-    }
-    this.debounceResize = requestAnimationFrame(this.update);
-  }
   subtitleWatcher(newValue) {
     if (typeof newValue === "string") {
       try {
@@ -218,9 +219,16 @@ export class StzhCard {
       childList: true,
       subtree: true
     });
+    this.resizeObserver = new ResizeObserver(this.handleResize);
+    this.resizeObserver.observe(this.element);
   }
   disconnectedCallback() {
-    this.observer.disconnect();
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+    }
   }
   render() {
     var _a, _b, _c;
@@ -275,8 +283,8 @@ export class StzhCard {
         h(Fragment, null, !isFirstItemInSortable &&
           h("stzh-menu-item", { icon: "arrow-up", onClick: this.arrowUpClick }, this.localization.actionMoveUp), !isLastItemInSortable &&
           h("stzh-menu-item", { icon: "arrow-down", onClick: this.arrowDownClick }, this.localization.actionMoveDown))))))), h("div", { class: "stzh-card__header-meta" }, h("slot", { name: "meta" }))), h("div", { class: "stzh-card__content hide-when-collapsed" }, h("slot", { name: "content" })), h("div", { class: "stzh-card__footer hide-when-collapsed" }, h("slot", { name: "footer" }, this._footerActions.length > 0 &&
-      h("stzh-actionset", { actions: this._footerActions }), this.selectable &&
-      h("stzh-button", { fullwidth: true, type: "radio", variant: "secondary", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, label: this.localization.select, onStzhChange: this.handleSelectionChange }), this.withArrow &&
+      h("stzh-actionset", { class: "stzh-card__footer-actionset", actions: this._footerActions }), this.selectable &&
+      h("stzh-button", { class: "stzh-card__footer-select-button", fullwidth: true, type: "radio", variant: "secondary", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, label: this.localization.select, onStzhChange: this.handleSelectionChange }), this.withArrow &&
       h("stzh-icon", { class: "stzh-card__footer-arrow", name: "arrow-right-long" })))))));
   }
   static get is() { return "stzh-card"; }
@@ -681,6 +689,24 @@ export class StzhCard {
         "reflect": true,
         "defaultValue": "false"
       },
+      "hideElevation": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether card elevation should be hidden"
+        },
+        "attribute": "hide-elevation",
+        "reflect": true,
+        "defaultValue": "false"
+      },
       "hideMovementActions": {
         "type": "boolean",
         "mutable": false,
@@ -820,31 +846,4 @@ export class StzhCard {
         "methodName": "collapsedWatcher"
       }];
   }
-  static get listeners() {
-    return [{
-        "name": "appload",
-        "method": "handleResize",
-        "target": "window",
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "resize",
-        "method": "handleResize",
-        "target": "window",
-        "capture": false,
-        "passive": true
-      }, {
-        "name": "DOMContentLoaded",
-        "method": "handleResize",
-        "target": "window",
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "load",
-        "method": "handleResize",
-        "target": "window",
-        "capture": false,
-        "passive": false
-      }];
-  }
 }

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])) {

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

@@ -0,0 +1,248 @@
+/**
+ * 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 {
+  --peek: calc(var(--peek-in, 0px) + var(--peek-out, 0px));
+  --peek-out: 1.25rem;
+  --padding-top: 0px;
+  --padding-bottom: 0px;
+  --gutter: var(--stzh-space-xxxsmall);
+  --snap-stop: always;
+  --slides: 1;
+  --slide-size: calc((100% - (var(--slides) - 1) * var(--gutter)) / var(--slides));
+}
+@media screen and (min-width: 600px) {
+  :host {
+    --peek-out: 0px;
+  }
+}
+:host[variant=cards] {
+  --padding-top: 0.25rem;
+  --padding-bottom: 0.25rem;
+  --gutter: var(--stzh-space-xsmall);
+}
+@media screen and (min-width: 600px) {
+  :host[variant=cards] {
+    --peek-out: 2rem;
+  }
+}
+@media screen and (min-width: 1024px) {
+  :host[variant=cards] {
+    --peek-out: 2.5rem;
+    --gutter: var(--stzh-space-small);
+  }
+}
+@media screen and (min-width: 1260px) {
+  :host[variant=cards] {
+    --peek-out: 5.5rem;
+    --gutter: var(--stzh-space-medium);
+  }
+}
+@media screen and (min-width: 1440px) {
+  :host[variant=cards] {
+    --peek-out: calc((100vw - 78.75rem - var(--stzh-scrollbar-width, 0px)) / 2);
+  }
+}
+:host ::slotted(*) {
+  width: 100%;
+  height: 100%;
+  flex-shrink: 0;
+  scroll-snap-align: start;
+  scroll-snap-stop: var(--snap-stop);
+}
+:host ::slotted(*) img {
+  -webkit-user-drag: none;
+  user-drag: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+:host ::slotted([slot=actions]) {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  pointer-events: none;
+  padding: 0 var(--peek);
+}
+:host ::slotted([slot=actions]) stzh-text {
+  width: auto;
+}
+:host ::slotted([slot=actions]) stzh-button {
+  pointer-events: all;
+}
+:host ::slotted(stzh-ratio[slot=actions]) stzh-space,
+:host ::slotted(stzh-ratio[slot=actions]) stzh-hspace,
+:host ::slotted(stzh-ratio[slot=actions]) stzh-vspace {
+  padding: var(--stzh-space-xsmall);
+}
+:host ::slotted(stzh-ratio[slot=actions]) {
+  --background-color: transparent;
+}
+:host[variant=cards] ::slotted([slot=actions]) {
+  position: relative;
+  order: 1;
+  margin-top: calc(var(--stzh-space-medium) - var(--padding-bottom));
+}
+
+.stzh-carousel {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: calc(100% + var(--peek-out) * 2);
+  margin-left: calc(var(--peek-out) / -1);
+  margin-right: calc(var(--peek-out) / -1);
+}
+.stzh-carousel__vhidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  -webkit-clip-path: inset(100%);
+          clip-path: inset(100%);
+  width: 0.0625rem;
+  height: 0.0625rem;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+}
+.stzh-carousel__scroll {
+  position: relative;
+  grid-area: slides;
+  display: grid;
+  width: 100%;
+  height: 100%;
+  place-items: center;
+  overflow-x: auto;
+  overflow-y: visible;
+  grid-auto-flow: column;
+  grid-auto-columns: var(--slide-size);
+  grid-auto-rows: 100%;
+  -moz-column-gap: var(--gutter);
+       column-gap: var(--gutter);
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  scroll-behavior: smooth;
+  overscroll-behavior-x: contain;
+  -webkit-scroll-snap-type: x mandatory;
+          scroll-snap-type: x mandatory;
+  scroll-padding: 0 var(--peek);
+  padding: var(--padding-top) var(--peek) var(--padding-bottom);
+}
+@media (prefers-reduced-motion: reduce) {
+  .stzh-carousel__scroll {
+    scroll-behavior: auto;
+  }
+}
+.stzh-carousel__scroll::-webkit-scrollbar {
+  display: none;
+}
+.stzh-carousel--is-draggable .stzh-carousel__scroll {
+  cursor: -webkit-grab;
+  cursor: grab;
+}
+.stzh-carousel--is-dragging .stzh-carousel__scroll {
+  cursor: -webkit-grabbing;
+  cursor: grabbing;
+}
+.stzh-carousel--is-disabled .stzh-carousel__scroll {
+  cursor: not-allowed;
+  overflow: hidden;
+}