@oiz/stzh-components 1.5.0-alpha → 2.0.0-beta

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

@@ -219,8 +219,8 @@
 .stzh-radio__check {
   background-color: currentColor;
   color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
-  width: 0.375rem;
-  height: 0.375rem;
+  width: 0.5rem;
+  height: 0.5rem;
   border-radius: 50%;
   opacity: 0;
 }

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

@@ -3,9 +3,10 @@ import { hasSlot } from "../../utils/utils";
 import { camelCase } from "../../utils/string-utils";
 import { fetchTranslations } from "../../utils/translation-utils";
 import { StzhInputDescription } from "../stzh-input/stzh-input-description";
+const SELECTOR_RADIO = 'stzh-radio, stzh-button[type=radio], stzh-card';
 let radiogroupCounter = 0;
 /**
- * @slot - Slot for `stzh-radio` elements
+ * @slot - Slot for `stzh-radio`, `stzh-button[type="radio"]` or `stzh-card` elements
  * @slot description - Slot for description
  * @slot description-long - Slot for long description (in popover)
  * @slot error - Slot for error
@@ -32,7 +33,7 @@ export class StzhRadiogroup {
     this.preventUpdateProperties = [];
     this.init = () => {
       // update radios
-      this.radios = Array.from(this.element.querySelectorAll("stzh-radio"));
+      this.radios = Array.from(this.element.querySelectorAll(SELECTOR_RADIO));
       this.updateRadiosProperty("show-marker", false);
       this.updateRadiosProperty("a11y-describedby", `${this.radiogroupId}-description`);
       this.watchValue(this.value);
@@ -119,7 +120,7 @@ export class StzhRadiogroup {
   }
   connectedCallback() {
     if (!this.value) {
-      this.radios = Array.from(this.element.querySelectorAll("stzh-radio"));
+      this.radios = Array.from(this.element.querySelectorAll(SELECTOR_RADIO));
       // try to find a checkbox that might has checked set to true
       const checkedRadio = this.radios.find(radio => radio.checked);
       if (checkedRadio) {

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

@@ -7,6 +7,9 @@ export default {
   title: 'Components/Radiogroup',
   component: 'stzh-radiogroup',
   parameters: {
+    actions: {
+      handles: ['stzhChange', 'stzhFocus', 'stzhBlur']
+    },
     docs: {
       description: {
         component: readme

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

@@ -102,6 +102,7 @@
   /* Lists */
   /* Figure */
   /* Blockquote */
+  /* Table */
   /* Links */
 }
 :host ::slotted(*) h1, :host ::slotted(*) h2, :host ::slotted(*) h3, :host ::slotted(*) h4 {
@@ -699,6 +700,150 @@
   display: inline-block;
   margin-right: var(--stzh-space-xxxsmall);
 }
+:host ::slotted(*) table {
+  --min-width: none;
+  --cell-padding: var(--stzh-table-cell-padding);
+  width: 100%;
+  border-spacing: 0;
+  min-width: var(--min-width);
+}
+:host ::slotted(*) thead {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  z-index: 3;
+}
+:host ::slotted(*) tr:hover td,
+:host ::slotted(*) tr:hover th {
+  background-color: var(--stzh-color-grey5);
+}
+:host ::slotted(*) td,
+:host ::slotted(*) th {
+  font-size: var(--stzh-font-milli-font-size);
+  line-height: var(--stzh-font-milli-text-line-height);
+  letter-spacing: var(--stzh-font-curve---text-letter-spacing);
+  text-align: left;
+  border: none;
+  vertical-align: top;
+  border: none;
+  border-bottom: 0.0625rem solid var(--stzh-base-border-color);
+  background-color: var(--stzh-color-white);
+  transition: background-color var(--stzh-base-transition-animation-speed);
+  padding: var(--cell-padding);
+  /* Horizontal alignment */
+  /* Vertical alignment */
+  /* Nowrap */
+  /* Sticky */
+}
+:host ::slotted(*) td a,
+:host ::slotted(*) th a {
+  color: var(--stzh-link-color);
+  transition: color var(--stzh-base-transition-animation-speed);
+  border-radius: var(--stzh-button-border-radius);
+}
+:host ::slotted(*) td a:hover, :host ::slotted(*) td a:focus,
+:host ::slotted(*) th a:hover,
+:host ::slotted(*) th a:focus {
+  color: var(--stzh-link-hover-color);
+}
+:host ::slotted(*) td b, :host ::slotted(*) td strong,
+:host ::slotted(*) th b,
+:host ::slotted(*) th strong {
+  font-family: var(--stzh-font-family-heavy);
+  font-weight: var(--stzh-font-weight-heavy);
+  font-style: normal;
+}
+:host ::slotted(*) td i, :host ::slotted(*) td em,
+:host ::slotted(*) th i,
+:host ::slotted(*) th em {
+  font-family: var(--stzh-font-family-regular);
+  font-weight: var(--stzh-font-weight-regular);
+  font-style: normal;
+}
+:host ::slotted(*) td.align-left,
+:host ::slotted(*) th.align-left {
+  text-align: left;
+}
+:host ::slotted(*) td.align-right,
+:host ::slotted(*) th.align-right {
+  text-align: right;
+}
+:host ::slotted(*) td.align-center,
+:host ::slotted(*) th.align-center {
+  text-align: center;
+}
+:host ::slotted(*) td.valign-auto,
+:host ::slotted(*) th.valign-auto {
+  vertical-align: auto;
+}
+:host ::slotted(*) td.valign-middle,
+:host ::slotted(*) th.valign-middle {
+  vertical-align: middle;
+}
+:host ::slotted(*) td.valign-bottom,
+:host ::slotted(*) th.valign-bottom {
+  vertical-align: bottom;
+}
+:host ::slotted(*) td.nowrap,
+:host ::slotted(*) th.nowrap {
+  white-space: nowrap;
+}
+:host ::slotted(*) td.is-sticky-left, :host ::slotted(*) td.is-sticky-right,
+:host ::slotted(*) th.is-sticky-left,
+:host ::slotted(*) th.is-sticky-right {
+  position: -webkit-sticky;
+  position: sticky;
+  z-index: 1;
+}
+:host ::slotted(*) td.has-sticked,
+:host ::slotted(*) th.has-sticked {
+  z-index: 2;
+}
+:host ::slotted(*) td.is-sticky-left,
+:host ::slotted(*) th.is-sticky-left {
+  left: 0;
+}
+:host ::slotted(*) td.is-sticky-right,
+:host ::slotted(*) th.is-sticky-right {
+  right: 0;
+}
+:host ::slotted(*) td.is-sticky-left::after, :host ::slotted(*) td.is-sticky-right::after,
+:host ::slotted(*) th.is-sticky-left::after,
+:host ::slotted(*) th.is-sticky-right::after {
+  background: linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0) 100%);
+  content: "";
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  height: 100%;
+  width: 0.375rem;
+  transform: translate(100%);
+  opacity: 0;
+  transition: opacity var(--stzh-base-transition-animation-speed);
+}
+:host ::slotted(*) td.is-sticky-left::after,
+:host ::slotted(*) th.is-sticky-left::after {
+  right: 0;
+}
+:host ::slotted(*) td.is-sticky-right::after,
+:host ::slotted(*) th.is-sticky-right::after {
+  left: 0;
+  transform: rotate(-180deg) translate(100%);
+}
+:host ::slotted(*) td.has-sticked.is-sticky-left::after, :host ::slotted(*) td.has-sticked.is-sticky-right::after,
+:host ::slotted(*) th.has-sticked.is-sticky-left::after,
+:host ::slotted(*) th.has-sticked.is-sticky-right::after {
+  opacity: 1;
+}
+:host ::slotted(*) th {
+  font-family: var(--stzh-font-family-heavy);
+  font-weight: var(--stzh-font-weight-heavy);
+  font-style: normal;
+  color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
+}
+:host ::slotted(*) th.is-sortable {
+  padding: 0;
+}
 :host ::slotted(*) a {
   color: var(--stzh-link-color);
   transition: color var(--stzh-base-transition-animation-speed);

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

@@ -71,6 +71,25 @@ const Template = (args) => (
     </blockquote>
 
     <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim.</p>
+
+    <table>
+      <thead>
+        <tr>
+          <th>Column Head 1</th>
+          <th>Column Head 2</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Column Content 1</td>
+          <td>Column Content 2</td>
+        </tr>
+        <tr>
+          <td>Column Content 1</td>
+          <td>Column Content 2</td>
+        </tr>
+      </tbody>
+    </table>
   </stzh-richtext>
 );
 

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

@@ -150,6 +150,7 @@ export class StzhSortable {
   }
   /** Move item */
   async moveItem(item, direction) {
+    var _a;
     if (!item
       || !item.nextElementSibling && direction === "down"
       || !item.previousElementSibling && direction === "up") {
@@ -164,8 +165,22 @@ export class StzhSortable {
     }
     this.updateAriaLive(this.localization.moved, item);
     this.focusItem(item);
+    const currentIndex = Array.from((_a = item.parentElement) === null || _a === void 0 ? void 0 : _a.children).indexOf(item);
+    this.stzhUpdate.emit({
+      component: "stzh-sortable",
+      data: await this.toArray(),
+      item,
+      newIndex: currentIndex,
+      oldIndex: currentIndex + (direction === "up" ? 1 : -1)
+    });
     this.resetItemOnBlur = true;
   }
+  disabledWatcher() {
+    this.stzhDisable.emit({
+      component: "stzh-sortable",
+      disabled: this.disabled
+    });
+  }
   filterElementsWatcher(newValue) {
     if (typeof newValue === "string") {
       this._filterElements = JSON.parse(newValue);
@@ -448,6 +463,26 @@ export class StzhSortable {
             }
           }
         }
+      }, {
+        "method": "stzhDisable",
+        "name": "stzhDisable",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Disable event"
+        },
+        "complexType": {
+          "original": "StzhSortableDisableEvent",
+          "resolved": "{ component: \"stzh-sortable\"; disabled: boolean; }",
+          "references": {
+            "StzhSortableDisableEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
       }];
   }
   static get methods() {
@@ -523,6 +558,9 @@ export class StzhSortable {
   static get elementRef() { return "element"; }
   static get watchers() {
     return [{
+        "propName": "disabled",
+        "methodName": "disabledWatcher"
+      }, {
         "propName": "filterElements",
         "methodName": "filterElementsWatcher"
       }];

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

@@ -6,7 +6,7 @@ export default {
   component: 'stzh-sortable',
   parameters: {
     actions: {
-      handles: ['stzhUpdate']
+      handles: ['stzhUpdate', 'stzhDisabled']
     },
     layout: 'padded',
     docs: {

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

@@ -37,6 +37,8 @@ export class StzhTooltip {
     this.content = "";
     /** Default placement of tooltip relative to trigger element */
     this.placement = "bottom";
+    /** Position strategy */
+    this.strategy = "absolute";
     /** Shifting of tooltip content */
     this.skidding = 0;
     /** Distance from tooltip content to trigger (default: arrow height + 8px = 16) */
@@ -61,7 +63,7 @@ export class StzhTooltip {
         return;
       }
       const { x = 0, y = 0, strategy = "absolute", placement, middlewareData } = await computePosition(this.triggerElement.firstElementChild, this.contentElement, {
-        // strategy: 'fixed',
+        strategy: this.strategy,
         placement: this.placement,
         middleware: [
           offset({
@@ -395,6 +397,24 @@ export class StzhTooltip {
         "reflect": false,
         "defaultValue": "\"bottom\""
       },
+      "strategy": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"absolute\" | \"fixed\"",
+          "resolved": "\"absolute\" | \"fixed\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Position strategy"
+        },
+        "attribute": "strategy",
+        "reflect": false,
+        "defaultValue": "\"absolute\""
+      },
       "skidding": {
         "type": "number",
         "mutable": false,

package/dist/collection/pages/meinkonto.stories.js

@@ -10,6 +10,41 @@ export default {
   }
 };
 
+const actions = `[
+  {
+    "id": "message",
+    "onlyCollapseText": true,
+    "icon": "mail",
+    "badge": "3",
+    "label": "Messages"
+  }
+]`;
+
+const actions2 = `[
+  {
+    "id": "add",
+    "icon": "plus",
+    "label": "Add address"
+  },
+  {
+    "id": "edit",
+    "icon": "edit",
+    "label": "Edit"
+  },
+  {
+    "id": "delete",
+    "icon": "delete",
+    "label": "Remove"
+  },
+  {
+    "id": "message",
+    "onlyCollapseText": true,
+    "icon": "mail",
+    "badge": "3",
+    "label": "Messages"
+  }
+]`;
+
 const TemplateServices = (args) => (
   <div class="stzh-theme-ma"> { /* use theme class on <html> class */ }
     <stzh-visuallyhidden>
@@ -135,97 +170,67 @@ const TemplateServices = (args) => (
 
         <stzh-vspace curve="large"></stzh-vspace>
 
-        <stzh-servicecard-list show-toggle-link>
+        <stzh-card-list show-toggle-link>
           <stzh-text slot="description">
             Services are shown here, which you marked with <stzh-icon name="star-filled"></stzh-icon>
           </stzh-text>
-          <stzh-servicecard
-            collapsible
-            starrable
-            heading="Lorem ipsum 1"
-            subtitle="Dolor si 1"
-            actions='[
-              {
-                "id": "message",
-                "onlyCollapseText": true,
-                "icon": "mail",
-                "badge": "3",
-                "label": "Messages"
-              }
-            ]'
-          >
-            <div slot="left">Content Left</div>
-            <div slot="right">Content Right</div>
-          </stzh-servicecard>
-          <stzh-servicecard
-            collapsible
-            starrable
-            heading="Lorem ipsum 2"
-            subtitle='["Dolor si 2", "Dolor si 2.1", "Dolor si 2.2"]'
-            subtitle-interactive 
-            actions='[
-              {
-                "id": "add",
-                "icon": "plus",
-                "label": "Add address"
-              },
-              {
-                "id": "edit",
-                "icon": "edit",
-                "label": "Edit"
-              },
-              {
-                "id": "delete",
-                "icon": "delete",
-                "label": "Remove"
-              },
-              {
-                "id": "message",
-                "onlyCollapseText": true,
-                "icon": "mail",
-                "badge": "3",
-                "label": "Messages"
-              }
-            ]'
-          >
-            <div slot="left">Content Left</div>
-            <table slot="middle">
-              <tr>
-                <th>Cell Label</th>
-                <td>Cell Value</td>
-              </tr>
-              <tr>
-                <th>Cell Label</th>
-                <td>Cell Value</td>
-              </tr>
-              <tr>
-                <th>Cell Label</th>
-                <td>Cell Value</td>
-              </tr>
-            </table>
-            <div slot="right">Content Right</div>
-          </stzh-servicecard>
-          <stzh-servicecard collapsible starrable heading="Lorem ipsum 3" subtitle="Dolor si 3">
-            <div slot="left">Content Left</div>
-            <stzh-button label="Button Right 1" slot="right" fullwidth></stzh-button>
-            <stzh-popover slot="right">
-              <stzh-button label="Button Right 2" fullwidth icon="angle-up" icon-position="right"></stzh-button>
-              <stzh-menu slot="content">
-                <stzh-menu-item label="Test"></stzh-menu-item>
-              </stzh-menu>
-            </stzh-popover>
-          </stzh-servicecard>
-          <stzh-servicecard collapsible starrable heading="Lorem ipsum 4">
-            <div slot="left">Content Left</div>
-            <stzh-section slot="middle">
-              Content Middle Section 1
-            </stzh-section>
-            <stzh-section slot="middle">
-              Content Middle Section 2
-            </stzh-section>
-            <stzh-button label="Button Right" slot="right" fullwidth></stzh-button>
-          </stzh-servicecard>
-        </stzh-servicecard-list>
+          <stzh-card collapsible starrable heading="Lorem ipsum 1" subtitle="Dolor si 1" header-actions={actions}>
+            <div slot="content">Content</div>
+          </stzh-card>
+          <stzh-card collapsible heading="Lorem ipsum 2" subtitle='["Dolor si 2", "Dolor si 2.1", "Dolor si 2.2"]' subtitle-interactive header-actions={actions2}>
+            <stzh-row slot="content" span-small="6">
+              <stzh-cell>
+                <stzh-datalist
+                  items='[
+                    {
+                      "label": "Label",
+                      "value": "Value 1",
+                      "meta": "Metainfo",
+                      "icon": "delete"
+                    },
+                    {
+                      "label": "Really Long Label",
+                      "value": "Value 2",
+                      "meta": "Metainfo",
+                      "icon": "delete"
+                    },
+                    {
+                      "label": "Label",
+                      "value": "Value 3",
+                      "meta": "Metainfo"
+                    }
+                  ]'></stzh-datalist>
+              </stzh-cell>
+              <stzh-cell>
+              <stzh-datalist
+                  items='[
+                    {
+                      "label": "Label",
+                      "value": "Value 4",
+                      "meta": "Metainfo",
+                      "icon": "delete"
+                    },
+                    {
+                      "label": "Label",
+                      "value": "Value 5",
+                      "icon": "delete",
+                      "href": "http://example.com"
+                    }
+                  ]'></stzh-datalist>
+              </stzh-cell>
+            </stzh-row>
+          </stzh-card>
+          <stzh-card collapsible starrable heading="Lorem ipsum 3" subtitle="Dolor si 3" footer-actions={actions2}>
+            <div slot="content">Content</div>
+          </stzh-card>
+          <stzh-card collapsible starrable heading="Lorem ipsum 4">
+            <stzh-cspace slot="content">
+              <p>Content with Input:</p>
+              <stzh-input></stzh-input>
+              <stzh-button label="Button Right" fullwidth></stzh-button>
+            </stzh-cspace>
+          </stzh-card>
+        </stzh-card-list>
       </stzh-container>
 
       <stzh-vspace curve="big"></stzh-vspace>

package/dist/components/index.d.ts

@@ -2,11 +2,14 @@
 export { StzhAccordion as StzhAccordion } from '../types/components/stzh-accordion/stzh-accordion';
 export { StzhAccordionItem as StzhAccordionItem } from '../types/components/stzh-accordion-item/stzh-accordion-item';
 export { StzhActions as StzhActions } from '../types/components/stzh-actions/stzh-actions';
+export { StzhActionset as StzhActionset } from '../types/components/stzh-actionset/stzh-actionset';
 export { StzhAppnav as StzhAppnav } from '../types/components/stzh-appnav/stzh-appnav';
 export { StzhAppointments as StzhAppointments } from '../types/components/stzh-appointments/stzh-appointments';
 export { StzhBadge as StzhBadge } from '../types/components/stzh-badge/stzh-badge';
 export { StzhButton as StzhButton } from '../types/components/stzh-button/stzh-button';
 export { StzhCalendar as StzhCalendar } from '../types/components/stzh-calendar/stzh-calendar';
+export { StzhCard as StzhCard } from '../types/components/stzh-card/stzh-card';
+export { StzhCardList as StzhCardList } from '../types/components/stzh-card-list/stzh-card-list';
 export { StzhCell as StzhCell } from '../types/components/stzh-cell/stzh-cell';
 export { StzhCheckbox as StzhCheckbox } from '../types/components/stzh-checkbox/stzh-checkbox';
 export { StzhCheckboxgroup as StzhCheckboxgroup } from '../types/components/stzh-checkboxgroup/stzh-checkboxgroup';
@@ -14,6 +17,7 @@ export { StzhChip as StzhChip } from '../types/components/stzh-chip/stzh-chip';
 export { StzhChipSelect as StzhChipSelect } from '../types/components/stzh-chip-select/stzh-chip-select';
 export { StzhContainer as StzhContainer } from '../types/components/stzh-container/stzh-container';
 export { StzhCspace as StzhCspace } from '../types/components/stzh-cspace/stzh-cspace';
+export { StzhDatalist as StzhDatalist } from '../types/components/stzh-datalist/stzh-datalist';
 export { StzhDatamessagelist as StzhDatamessagelist } from '../types/components/stzh-datamessagelist/stzh-datamessagelist';
 export { StzhDatamessagelistItem as StzhDatamessagelistItem } from '../types/components/stzh-datamessagelist-item/stzh-datamessagelist-item';
 export { StzhDatatable as StzhDatatable } from '../types/components/stzh-datatable/stzh-datatable';
@@ -55,8 +59,6 @@ export { StzhRichtext as StzhRichtext } from '../types/components/stzh-richtext/
 export { StzhRow as StzhRow } from '../types/components/stzh-row/stzh-row';
 export { StzhSaptcha as StzhSaptcha } from '../types/components/stzh-saptcha/stzh-saptcha';
 export { StzhSection as StzhSection } from '../types/components/stzh-section/stzh-section';
-export { StzhServicecard as StzhServicecard } from '../types/components/stzh-servicecard/stzh-servicecard';
-export { StzhServicecardList as StzhServicecardList } from '../types/components/stzh-servicecard-list/stzh-servicecard-list';
 export { StzhSkiplink as StzhSkiplink } from '../types/components/stzh-skiplink/stzh-skiplink';
 export { StzhSortable as StzhSortable } from '../types/components/stzh-sortable/stzh-sortable';
 export { StzhStatus as StzhStatus } from '../types/components/stzh-status/stzh-status';

package/dist/components/index.js

@@ -2,11 +2,14 @@ export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client'
 export { StzhAccordion, defineCustomElement as defineCustomElementStzhAccordion } from './stzh-accordion.js';
 export { StzhAccordionItem, defineCustomElement as defineCustomElementStzhAccordionItem } from './stzh-accordion-item.js';
 export { StzhActions, defineCustomElement as defineCustomElementStzhActions } from './stzh-actions.js';
+export { StzhActionset, defineCustomElement as defineCustomElementStzhActionset } from './stzh-actionset.js';
 export { StzhAppnav, defineCustomElement as defineCustomElementStzhAppnav } from './stzh-appnav.js';
 export { StzhAppointments, defineCustomElement as defineCustomElementStzhAppointments } from './stzh-appointments.js';
 export { StzhBadge, defineCustomElement as defineCustomElementStzhBadge } from './stzh-badge.js';
 export { StzhButton, defineCustomElement as defineCustomElementStzhButton } from './stzh-button.js';
 export { StzhCalendar, defineCustomElement as defineCustomElementStzhCalendar } from './stzh-calendar.js';
+export { StzhCard, defineCustomElement as defineCustomElementStzhCard } from './stzh-card.js';
+export { StzhCardList, defineCustomElement as defineCustomElementStzhCardList } from './stzh-card-list.js';
 export { StzhCell, defineCustomElement as defineCustomElementStzhCell } from './stzh-cell.js';
 export { StzhCheckbox, defineCustomElement as defineCustomElementStzhCheckbox } from './stzh-checkbox.js';
 export { StzhCheckboxgroup, defineCustomElement as defineCustomElementStzhCheckboxgroup } from './stzh-checkboxgroup.js';
@@ -14,6 +17,7 @@ export { StzhChip, defineCustomElement as defineCustomElementStzhChip } from './
 export { StzhChipSelect, defineCustomElement as defineCustomElementStzhChipSelect } from './stzh-chip-select.js';
 export { StzhContainer, defineCustomElement as defineCustomElementStzhContainer } from './stzh-container.js';
 export { StzhCspace, defineCustomElement as defineCustomElementStzhCspace } from './stzh-cspace.js';
+export { StzhDatalist, defineCustomElement as defineCustomElementStzhDatalist } from './stzh-datalist.js';
 export { StzhDatamessagelist, defineCustomElement as defineCustomElementStzhDatamessagelist } from './stzh-datamessagelist.js';
 export { StzhDatamessagelistItem, defineCustomElement as defineCustomElementStzhDatamessagelistItem } from './stzh-datamessagelist-item.js';
 export { StzhDatatable, defineCustomElement as defineCustomElementStzhDatatable } from './stzh-datatable.js';
@@ -55,8 +59,6 @@ export { StzhRichtext, defineCustomElement as defineCustomElementStzhRichtext }
 export { StzhRow, defineCustomElement as defineCustomElementStzhRow } from './stzh-row.js';
 export { StzhSaptcha, defineCustomElement as defineCustomElementStzhSaptcha } from './stzh-saptcha.js';
 export { StzhSection, defineCustomElement as defineCustomElementStzhSection } from './stzh-section.js';
-export { StzhServicecard, defineCustomElement as defineCustomElementStzhServicecard } from './stzh-servicecard.js';
-export { StzhServicecardList, defineCustomElement as defineCustomElementStzhServicecardList } from './stzh-servicecard-list.js';
 export { StzhSkiplink, defineCustomElement as defineCustomElementStzhSkiplink } from './stzh-skiplink.js';
 export { StzhSortable, defineCustomElement as defineCustomElementStzhSortable } from './stzh-sortable.js';
 export { StzhStatus, defineCustomElement as defineCustomElementStzhStatus } from './stzh-status.js';
@@ -72,7 +74,7 @@ export { StzhVisuallyhidden, defineCustomElement as defineCustomElementStzhVisua
 export { StzhVspace, defineCustomElement as defineCustomElementStzhVspace } from './stzh-vspace.js';
 
 const name = "@oiz/stzh-components";
-const version = "1.5.0-alpha";
+const version = "2.0.0-beta";
 
 const packageName = name.substring(name.indexOf('/')+1);
 

package/dist/components/{stzh-servicecard.d.ts → stzh-actionset.d.ts}

@@ -1,9 +1,9 @@
 import type { Components, JSX } from "../types/components";
 
-interface StzhServicecard extends Components.StzhServicecard, HTMLElement {}
-export const StzhServicecard: {
-  prototype: StzhServicecard;
-  new (): StzhServicecard;
+interface StzhActionset extends Components.StzhActionset, HTMLElement {}
+export const StzhActionset: {
+  prototype: StzhActionset;
+  new (): StzhActionset;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/stzh-actionset.js

@@ -0,0 +1,6 @@
+import { S as StzhActionset$1, d as defineCustomElement$1 } from './stzh-actionset2.js';
+
+const StzhActionset = StzhActionset$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { StzhActionset, defineCustomElement };