@siemens/ix 5.1.0 → 5.2.0

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

@@ -44,13 +44,14 @@
   flex-direction: column;
   width: 100%;
   transition: var(--theme-default-time) ease-in-out;
+  --ix-card-accordion-expanded-height: 14.75rem;
 }
 :host *,
 :host *::after,
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -59,37 +60,37 @@
     scrollbar-width: thin;
   }
 }
-:host {
+:host * {
   /* width */
 }
-:host ::-webkit-scrollbar {
+:host *::-webkit-scrollbar {
   width: 0.5rem;
   height: 0.5rem;
 }
-:host {
+:host * {
   /* Track */
 }
-:host ::-webkit-scrollbar-track {
+:host *::-webkit-scrollbar-track {
   border-radius: 5px;
   background: var(--theme-scrollbar-track--background);
 }
-:host ::-webkit-scrollbar-track:hover {
+:host *::-webkit-scrollbar-track:hover {
   background: var(--theme-scrollbar-track--background--hover);
 }
-:host {
+:host * {
   /* Handle */
 }
-:host ::-webkit-scrollbar-thumb {
+:host *::-webkit-scrollbar-thumb {
   border-radius: 5px;
   background: var(--theme-scrollbar-thumb--background);
 }
-:host {
+:host * {
   /* Handle on hover */
 }
-:host ::-webkit-scrollbar-thumb:hover {
+:host *::-webkit-scrollbar-thumb:hover {
   background: var(--theme-scrollbar-thumb--background--hover);
 }
-:host ::-webkit-scrollbar-corner {
+:host *::-webkit-scrollbar-corner {
   display: none;
 }
 :host .expand-action {
@@ -124,40 +125,47 @@
   transform: rotate(180deg);
 }
 :host .expand-content {
-  display: grid;
+  display: block;
   position: relative;
-  grid-template-rows: 0fr;
-  transition: var(--theme-default-time) ease-in-out;
   width: 100%;
-  max-height: 14.75rem;
-  opacity: 0;
+  height: 0;
+  overflow: hidden;
+  transition: height var(--theme-default-time) ease-in-out;
+}
+:host .expand-content::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  border-radius: var(--ix-card-accordion-expand-content--border-radius, 0);
+  border-top: none;
 }
 :host .expand-content.show {
-  grid-template-rows: 14.75rem;
-  opacity: 1;
+  height: var(--ix-card-accordion-expanded-height);
 }
 :host .expand-content-inner {
   position: relative;
   height: 100%;
   overflow: hidden;
 }
-:host .expand-content.show .expand-content-body {
-  display: none;
-  overflow: hidden;
-  color: var(--theme-color-std-text);
+:host .expand-content-body {
+  opacity: 0;
+  transition: opacity var(--theme-default-time) ease-in-out;
 }
 :host .expand-content.show .expand-content-body {
   display: block;
   overflow: auto;
-  height: calc(100% - 1rem);
+  height: calc(var(--ix-card-accordion-expanded-height) - 1rem);
+  color: var(--theme-color-std-text);
+  opacity: 1;
 }
 :host .expand-content-footer {
   display: block;
-  position: relative;
+  position: absolute;
+  bottom: 0;
+  left: 0;
   width: 100%;
   height: 1rem;
-  margin-top: auto;
-  margin-bottom: 0px;
   background-color: var(--theme-color-component-1);
   border-bottom-left-radius: var(--theme-default-border-radius);
   border-bottom-right-radius: var(--theme-default-border-radius);
@@ -175,8 +183,9 @@
 :host(.variant-outline) .expand-content {
   background-color: var(--theme-push-card-outline-accordion-frame--background);
 }
-:host(.variant-outline) .expand-content.show {
-  border: var(--theme-push-card-outline-accordion-frame--border-width, 0px) solid var(--theme-push-card-outline-accordion-frame--border-color);
+:host(.variant-outline) .expand-content::after {
+  border: var(--theme-push-card-outline-accordion-frame--border-width) solid transparent;
+  border-color: var(--theme-push-card-outline-accordion-frame--border-color);
 }
 :host(.variant-outline) .expand-content.show .expand-content-body {
   color: var(--theme-color-std-text);
@@ -197,8 +206,9 @@
 :host(.variant-filled) .expand-content {
   background-color: var(--theme-push-card-filled-accordion-frame--background);
 }
-:host(.variant-filled) .expand-content.show {
-  border: var(--theme-push-card-filled-accordion-frame--border-width, 0px) solid var(--theme-push-card-filled-accordion-frame--border-color);
+:host(.variant-filled) .expand-content::after {
+  border: var(--theme-push-card-filled-accordion-frame--border-width) solid transparent;
+  border-color: var(--theme-push-card-filled-accordion-frame--border-color);
 }
 :host(.variant-filled) .expand-content.show .expand-content-body {
   color: var(--theme-color-std-text);
@@ -219,8 +229,9 @@
 :host(.variant-alarm) .expand-content {
   background-color: var(--theme-push-card-alarm-accordion-frame--background);
 }
-:host(.variant-alarm) .expand-content.show {
-  border: var(--theme-push-card-alarm-accordion-frame--border-width, 0px) solid var(--theme-push-card-alarm-accordion-frame--border-color);
+:host(.variant-alarm) .expand-content::after {
+  border: var(--theme-push-card-alarm-accordion-frame--border-width) solid transparent;
+  border-color: var(--theme-push-card-alarm-accordion-frame--border-color);
 }
 :host(.variant-alarm) .expand-content.show .expand-content-body {
   color: var(--theme-color-std-text);
@@ -241,8 +252,9 @@
 :host(.variant-critical) .expand-content {
   background-color: var(--theme-push-card-critical-accordion-frame--background);
 }
-:host(.variant-critical) .expand-content.show {
-  border: var(--theme-push-card-critical-accordion-frame--border-width, 0px) solid var(--theme-push-card-critical-accordion-frame--border-color);
+:host(.variant-critical) .expand-content::after {
+  border: var(--theme-push-card-critical-accordion-frame--border-width) solid transparent;
+  border-color: var(--theme-push-card-critical-accordion-frame--border-color);
 }
 :host(.variant-critical) .expand-content.show .expand-content-body {
   color: var(--theme-color-std-text);
@@ -263,8 +275,9 @@
 :host(.variant-warning) .expand-content {
   background-color: var(--theme-push-card-warning-accordion-frame--background);
 }
-:host(.variant-warning) .expand-content.show {
-  border: var(--theme-push-card-warning-accordion-frame--border-width, 0px) solid var(--theme-push-card-warning-accordion-frame--border-color);
+:host(.variant-warning) .expand-content::after {
+  border: var(--theme-push-card-warning-accordion-frame--border-width) solid transparent;
+  border-color: var(--theme-push-card-warning-accordion-frame--border-color);
 }
 :host(.variant-warning) .expand-content.show .expand-content-body {
   color: var(--theme-color-std-text);
@@ -285,8 +298,9 @@
 :host(.variant-success) .expand-content {
   background-color: var(--theme-push-card-success-accordion-frame--background);
 }
-:host(.variant-success) .expand-content.show {
-  border: var(--theme-push-card-success-accordion-frame--border-width, 0px) solid var(--theme-push-card-success-accordion-frame--border-color);
+:host(.variant-success) .expand-content::after {
+  border: var(--theme-push-card-success-accordion-frame--border-width) solid transparent;
+  border-color: var(--theme-push-card-success-accordion-frame--border-color);
 }
 :host(.variant-success) .expand-content.show .expand-content-body {
   color: var(--theme-color-std-text);
@@ -307,8 +321,9 @@
 :host(.variant-info) .expand-content {
   background-color: var(--theme-push-card-info-accordion-frame--background);
 }
-:host(.variant-info) .expand-content.show {
-  border: var(--theme-push-card-info-accordion-frame--border-width, 0px) solid var(--theme-push-card-info-accordion-frame--border-color);
+:host(.variant-info) .expand-content::after {
+  border: var(--theme-push-card-info-accordion-frame--border-width) solid transparent;
+  border-color: var(--theme-push-card-info-accordion-frame--border-color);
 }
 :host(.variant-info) .expand-content.show .expand-content-body {
   color: var(--theme-color-std-text);
@@ -329,8 +344,9 @@
 :host(.variant-neutral) .expand-content {
   background-color: var(--theme-push-card-neutral-accordion-frame--background);
 }
-:host(.variant-neutral) .expand-content.show {
-  border: var(--theme-push-card-neutral-accordion-frame--border-width, 0px) solid var(--theme-push-card-neutral-accordion-frame--border-color);
+:host(.variant-neutral) .expand-content::after {
+  border: var(--theme-push-card-neutral-accordion-frame--border-width) solid transparent;
+  border-color: var(--theme-push-card-neutral-accordion-frame--border-color);
 }
 :host(.variant-neutral) .expand-content.show .expand-content-body {
   color: var(--theme-color-std-text);
@@ -351,8 +367,9 @@
 :host(.variant-primary) .expand-content {
   background-color: var(--theme-push-card-primary-accordion-frame--background);
 }
-:host(.variant-primary) .expand-content.show {
-  border: var(--theme-push-card-primary-accordion-frame--border-width, 0px) solid var(--theme-push-card-primary-accordion-frame--border-color);
+:host(.variant-primary) .expand-content::after {
+  border: var(--theme-push-card-primary-accordion-frame--border-width) solid transparent;
+  border-color: var(--theme-push-card-primary-accordion-frame--border-color);
 }
 :host(.variant-primary) .expand-content.show .expand-content-body {
   color: var(--theme-color-std-text);

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

@@ -4,6 +4,9 @@ let accordionControlId = 0;
 const getAriaControlsId = (prefix = 'expand-content') => {
     return [prefix, accordionControlId++].join('-');
 };
+/**
+ * @slot default - Accordion content.
+ */
 export class CardAccordion {
     /**
      * ARIA label for the card's expand button.
@@ -60,15 +63,15 @@ export class CardAccordion {
         this.onInitialExpandChange();
     }
     render() {
-        return (h(Host, { key: 'cdd4feba2b9ae022141114a75d9ae13910c35915', slot: "card-accordion", class: {
+        return (h(Host, { key: '6361eab1c229a6678e6035e76e8865d9421d923f', slot: "card-accordion", class: {
                 [`variant-${this.variant}`]: true,
-            } }, h("button", { key: '9357ac651cef1c1d1f570faf906ba08e403652ff', tabIndex: 0, class: { 'expand-action': true, show: this.expandContent }, onClick: (event) => this.onExpandActionClick(event), role: "button", type: "button", "aria-expanded": this.expandContent, "aria-controls": getAriaControlsId(), "aria-label": this.ariaLabelExpandButton }, h("ix-icon", { key: '9d55b5013a6f4aff50d9f904e4e0730713c8dcf4', name: iconChevronDownSmall, class: {
+            } }, h("button", { key: 'b143080712778b43494af1198e842b16cda59e89', tabIndex: 0, class: { 'expand-action': true, show: this.expandContent }, onClick: (event) => this.onExpandActionClick(event), role: "button", type: "button", "aria-expanded": this.expandContent, "aria-controls": getAriaControlsId(), "aria-label": this.ariaLabelExpandButton }, h("ix-icon", { key: '8b2d846cc40a3c73f6a98d7a35038057dda89ba6', name: iconChevronDownSmall, class: {
                 'expand-icon': true,
                 show: this.expandContent,
-            } })), h("div", { key: '57ddf6374b94637e674e1c061344cec87a20addc', class: {
+            } })), h("div", { key: 'a7585909e6ce429ba8594e333e2798c72f59f27d', class: {
                 'expand-content': true,
                 show: this.expandContent,
-            } }, h("div", { key: 'bfacd0c7e4202aeba7058bc563b79357dd2d589e', class: "expand-content-inner" }, h("div", { key: 'ed870153b656930325a35b0921e8f23f7dcee97e', class: "expand-content-body" }, h("slot", { key: '893b6669078807112cf23c6b17f94eab7697fa34' })), h("div", { key: 'd41b94230091bcfedb81305656eb0101e7afb952', class: "expand-content-footer" })))));
+            } }, h("div", { key: '05e7b8a29ab1e24fe78e315b68511618fd5a05ac', class: "expand-content-inner" }, h("div", { key: 'f9a706418df216d90cf804c5e010a051592b5a2e', class: "expand-content-body" }, h("slot", { key: '23bd688f38b3601b5ebd3e229e6dc432d6f132d8' })), h("div", { key: 'f5a090a4d4df185bf75737584f7385d79808f1e0', class: "expand-content-footer" })))));
     }
     static get is() { return "ix-card-accordion"; }
     static get encapsulation() { return "shadow"; }

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

@@ -33,7 +33,7 @@
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -42,37 +42,37 @@
     scrollbar-width: thin;
   }
 }
-:host {
+:host * {
   /* width */
 }
-:host ::-webkit-scrollbar {
+:host *::-webkit-scrollbar {
   width: 0.5rem;
   height: 0.5rem;
 }
-:host {
+:host * {
   /* Track */
 }
-:host ::-webkit-scrollbar-track {
+:host *::-webkit-scrollbar-track {
   border-radius: 5px;
   background: var(--theme-scrollbar-track--background);
 }
-:host ::-webkit-scrollbar-track:hover {
+:host *::-webkit-scrollbar-track:hover {
   background: var(--theme-scrollbar-track--background--hover);
 }
-:host {
+:host * {
   /* Handle */
 }
-:host ::-webkit-scrollbar-thumb {
+:host *::-webkit-scrollbar-thumb {
   border-radius: 5px;
   background: var(--theme-scrollbar-thumb--background);
 }
-:host {
+:host * {
   /* Handle on hover */
 }
-:host ::-webkit-scrollbar-thumb:hover {
+:host *::-webkit-scrollbar-thumb:hover {
   background: var(--theme-scrollbar-thumb--background--hover);
 }
-:host ::-webkit-scrollbar-corner {
+:host *::-webkit-scrollbar-corner {
   display: none;
 }
 :host .content-wrapper {

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

@@ -1,7 +1,10 @@
 import { h, Host } from "@stencil/core";
+/**
+ * @slot default - Card body content.
+ */
 export class CardContent {
     render() {
-        return (h(Host, { key: '918473b60dc96e14c935bd7d46022b7a9c0abf46' }, h("div", { key: '4e5593a246b22c0d04f777ff89bbc8a936d05db3', class: "content-wrapper" }, h("slot", { key: '7a89cac6011e0446fe3a0cfd45036967af53ab79' }))));
+        return (h(Host, { key: '4c2a84698ddf61f4184e993456d79b07550dc042' }, h("div", { key: '5ec46b0774b98ba160e327b476cfdec7eefcde53', class: "content-wrapper" }, h("slot", { key: '301740b685022b62e8d45eb236c926992158fa49' }))));
     }
     static get is() { return "ix-card-content"; }
     static get encapsulation() { return "shadow"; }

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

@@ -22,6 +22,14 @@
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
+/*
+* SPDX-FileCopyrightText: 2024 Siemens AG
+*
+* SPDX-License-Identifier: MIT
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
 :host {
   display: flex;
   position: relative;
@@ -34,7 +42,7 @@
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -43,37 +51,37 @@
     scrollbar-width: thin;
   }
 }
-:host {
+:host * {
   /* width */
 }
-:host ::-webkit-scrollbar {
+:host *::-webkit-scrollbar {
   width: 0.5rem;
   height: 0.5rem;
 }
-:host {
+:host * {
   /* Track */
 }
-:host ::-webkit-scrollbar-track {
+:host *::-webkit-scrollbar-track {
   border-radius: 5px;
   background: var(--theme-scrollbar-track--background);
 }
-:host ::-webkit-scrollbar-track:hover {
+:host *::-webkit-scrollbar-track:hover {
   background: var(--theme-scrollbar-track--background--hover);
 }
-:host {
+:host * {
   /* Handle */
 }
-:host ::-webkit-scrollbar-thumb {
+:host *::-webkit-scrollbar-thumb {
   border-radius: 5px;
   background: var(--theme-scrollbar-thumb--background);
 }
-:host {
+:host * {
   /* Handle on hover */
 }
-:host ::-webkit-scrollbar-thumb:hover {
+:host *::-webkit-scrollbar-thumb:hover {
   background: var(--theme-scrollbar-thumb--background--hover);
 }
-:host ::-webkit-scrollbar-corner {
+:host *::-webkit-scrollbar-corner {
   display: none;
 }
 :host .CardList_Title {
@@ -151,6 +159,10 @@
   --ix-card-border-color: var(--theme-color-primary);
   color: var(--theme-color-primary);
 }
+:host .Show__All__Card:not(.disabled):not(:disabled):focus-visible {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-btn--focus--outline-offset);
+}
 :host .CardList__Style__Infinite__Scroll .Show__All__Card {
   margin-top: 2.375rem;
 }

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

@@ -13,6 +13,9 @@ function CardListTitle(props) {
         ? ` (${props.showAllCounter})`
         : null)))))));
 }
+/**
+ * @slot default - Cards displayed in the list.
+ */
 export class CardList {
     /**
      * ARIA label for the card's expand button.
@@ -89,6 +92,47 @@ export class CardList {
         this.collapse = !this.collapse;
         this.collapseChanged.emit(this.collapse);
     }
+    findFirstFocusable(root) {
+        const focusableSelectors = 'button:not([disabled]), [tabindex]:not([tabindex="-1"])';
+        const direct = root.querySelector?.(focusableSelectors);
+        if (direct)
+            return direct;
+        for (const child of Array.from(root.querySelectorAll?.('*') ?? [])) {
+            const el = child;
+            if (el.shadowRoot) {
+                const found = this.findFirstFocusable(el.shadowRoot);
+                if (found)
+                    return found;
+            }
+        }
+        return null;
+    }
+    focusFirstVisibleCard(startIndex = 0) {
+        requestAnimationFrameNoNgZone(() => {
+            requestAnimationFrameNoNgZone(() => {
+                const firstNewlyVisible = this.getListChildren()
+                    .slice(startIndex)
+                    .find((el) => el instanceof HTMLElement &&
+                    !el.classList.contains('display-none'));
+                if (!firstNewlyVisible)
+                    return;
+                const internalFocusable = firstNewlyVisible.shadowRoot
+                    ? this.findFirstFocusable(firstNewlyVisible.shadowRoot)
+                    : null;
+                if (internalFocusable) {
+                    internalFocusable.focus({ preventScroll: false });
+                    return;
+                }
+                if (firstNewlyVisible.hasAttribute('tabindex')) {
+                    firstNewlyVisible.focus({ preventScroll: false });
+                    return;
+                }
+                firstNewlyVisible.setAttribute('tabindex', '-1');
+                firstNewlyVisible.focus({ preventScroll: false });
+                firstNewlyVisible.removeAttribute('tabindex');
+            });
+        });
+    }
     handleClick(emitter, event) {
         const { defaultPrevented } = emitter.emit({
             nativeEvent: event,
@@ -96,12 +140,26 @@ export class CardList {
         if (defaultPrevented) {
             return;
         }
+        const wasShowingAll = this.isShowingAll;
+        const firstNewCardIndex = this.maxVisibleCards;
         this.isShowingAll = !this.isShowingAll;
         this.changeVisibilityOfSlotChildren();
+        if (!wasShowingAll) {
+            this.focusFirstVisibleCard(firstNewCardIndex);
+        }
     }
     onShowAllClick(event) {
         this.handleClick(this.showAllClick, event);
     }
+    onShowMoreCardClick(event) {
+        if (event instanceof KeyboardEvent) {
+            if (event.key !== 'Enter' && event.key !== ' ') {
+                return;
+            }
+            event.preventDefault();
+        }
+        this.handleClick(this.showMoreCardClick, event);
+    }
     getListChildren() {
         const slot = this.hostElement.shadowRoot.querySelector('.CardList__Content > slot');
         return slot.assignedElements({ flatten: true });
@@ -202,22 +260,20 @@ export class CardList {
         }
     }
     render() {
-        return (h(Host, { key: '4cb1bcba15f7877fc6d6fda2989a321cff75b21e' }, h(CardListTitle, { key: 'e8dd21fcc2faf773fc00b78704743e689674cf1a', isCollapsed: this.collapse, label: this.label, showAllLabel: this.i18nShowAll, showAllCounter: this.showAllCount === undefined
+        return (h(Host, { key: 'b059c2e39c50301922ad5ed51cc4e246aa3e358d' }, h(CardListTitle, { key: '61a6b0c4fd65257a6754ce34d2564f6513709946', isCollapsed: this.collapse, label: this.label, showAllLabel: this.i18nShowAll, showAllCounter: this.showAllCount === undefined
                 ? this.numberOfAllChildElements
-                : this.showAllCount, showLess: this.isShowingAll, labelShowLess: this.i18nShowLess, onClick: () => this.onCardListVisibilityToggle(), onShowAllClick: (e) => this.onShowAllClick(e), hideShowAll: this.hideShowAll }), h("div", { key: '36fd2e7fb75fd0e4e7ebaadd6f19aa2e26edbc10', class: {
+                : this.showAllCount, showLess: this.isShowingAll, labelShowLess: this.i18nShowLess, onClick: () => this.onCardListVisibilityToggle(), onShowAllClick: (e) => this.onShowAllClick(e), hideShowAll: this.hideShowAll }), h("div", { key: '5a328de0d50c9e5600cf7183145a372edd9f4305', class: {
                 CardList__Overflow: true,
-            }, style: this.computeMaskLayer() }, h("div", { key: '24a16d383eb1af5a329c417a868524d8c55fbc0c', class: {
+            }, style: this.computeMaskLayer() }, h("div", { key: '29b54713584c4e904f0dd7cb7240588c66efaddf', class: {
                 CardList__Content: true,
                 CardList__Content__Collapsed: this.collapse,
                 CardList__Style__Flexbox__Scroll: this.listStyle === 'stack',
                 CardList__Style__Infinite__Scroll: this.listStyle === 'scroll',
-            }, onScroll: () => this.onCardListScroll() }, h("slot", { key: '9c07172b248331bbf093808e2873ca56daca17aa', onSlotchange: () => {
+            }, onScroll: () => this.onCardListScroll() }, h("slot", { key: 'cf8bc87f8b737a784317993f72a9bcfb45a2db15', onSlotchange: () => {
                 this.changeVisibilityOfSlotChildren();
-            } }), this.isShowMoreCardVisible() ? (h("ix-card", { class: {
+            } }), this.isShowMoreCardVisible() ? (h("ix-card", { role: "button", tabindex: "0", "aria-label": `${this.i18nMoreCards} (${this.numberOfOverflowingElements})`, class: {
                 Show__All__Card: true,
-            }, onClick: (event) => {
-                this.handleClick(this.showMoreCardClick, event);
-            } }, h("ix-card-content", null, h("div", { class: "Show__All__Card__Content" }, h("ix-icon", { name: iconMoreMenu, size: '32', class: 'Show__All__Card__Icon' }), h("span", { class: "Show__All__Card__Text" }, this.i18nMoreCards, " (", this.numberOfOverflowingElements, ")"))))) : null))));
+            }, onClick: (event) => this.onShowMoreCardClick(event), onKeyDown: (event) => this.onShowMoreCardClick(event) }, h("ix-card-content", null, h("div", { class: "Show__All__Card__Content" }, h("ix-icon", { name: iconMoreMenu, size: '32', class: 'Show__All__Card__Icon' }), h("span", { class: "Show__All__Card__Text" }, this.i18nMoreCards, " (", this.numberOfOverflowingElements, ")"))))) : null))));
     }
     static get is() { return "ix-card-list"; }
     static get encapsulation() { return "shadow"; }
@@ -518,12 +574,16 @@ export class CardList {
                     "text": "Fire event when the show more card is clicked."
                 },
                 "complexType": {
-                    "original": "{\n    nativeEvent: MouseEvent;\n  }",
-                    "resolved": "{ nativeEvent: MouseEvent; }",
+                    "original": "{\n    nativeEvent: MouseEvent | KeyboardEvent;\n  }",
+                    "resolved": "{ nativeEvent: MouseEvent | KeyboardEvent; }",
                     "references": {
                         "MouseEvent": {
                             "location": "global",
                             "id": "global::MouseEvent"
+                        },
+                        "KeyboardEvent": {
+                            "location": "global",
+                            "id": "global::KeyboardEvent"
                         }
                     }
                 }

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

@@ -1,10 +1,11 @@
 import { h, Host } from "@stencil/core";
 /**
+ * @slot default - Card title.
  * @slot title-actions - Place additional actions inside title
  */
 export class CardHeader {
     render() {
-        return (h(Host, { key: 'e9eaf85f867d2f86338ef00978b70186aa045b72' }, h("slot", { key: '8bbdbd5a707b20d794dbac5e3e3186a954c6d1e0' }), h("div", { key: '767409c623fa8b77edd53c51a9640c41cd76625e', class: "title-actions" }, h("slot", { key: 'c9a81e18169fbafa8797f5f9d0ec2dd8926e0259', name: "title-actions" }))));
+        return (h(Host, { key: '9c9d2e38edbd21c21f2fbc3c451f0f73728463f5' }, h("slot", { key: '72878e063e7df669a90da5caeff705dd794080fc' }), h("div", { key: 'ed8aa8ecef81523223b40c3497de63306df4a4a0', class: "title-actions" }, h("slot", { key: '3827e0881d1617636640a2953476fb2bfb13f881', name: "title-actions" }))));
     }
     static get is() { return "ix-card-title"; }
     static get encapsulation() { return "shadow"; }