@siemens/ix 2.0.0-beta.1 → 2.0.0

package/dist/collection/components/application-header/test/application-headet.ct.js

@@ -9,6 +9,10 @@
 import { expect } from '@playwright/test';
 import { test } from '@utils/test';
 test('renders', async ({ mount, page }) => {
+  page.setViewportSize({
+    height: 500,
+    width: 1400,
+  });
   await mount(`
       <ix-basic-navigation application-name="test">
       </ix-basic-navigation>

package/dist/collection/components/application-header/test/application-headet.ct.js.map

@@ -1 +1 @@
-{"version":3,"file":"application-headet.ct.js","sourceRoot":"","sources":["../../../../src/components/application-header/test/application-headet.ct.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAEnC,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;EACxC,MAAM,KAAK,CACT;;;KAGC,CACF,CAAC;EAEF,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,2CAA2C,CAAC,CAAC;EAEzE,MAAM,MAAM,CAAC,MAAM,CAAC,CAAC,WAAW,EAAE,CAAC;EACnC,MAAM,MAAM,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC;AACpD,CAAC,CAAC,CAAC","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { expect } from '@playwright/test';\nimport { test } from '@utils/test';\n\ntest('renders', async ({ mount, page }) => {\n  await mount(\n    `\n      <ix-basic-navigation application-name=\"test\">\n      </ix-basic-navigation>\n    `\n  );\n\n  const header = page.locator('ix-basic-navigation ix-application-header');\n\n  await expect(header).toBeVisible();\n  await expect(header).toHaveClass(/breakpoint-lg/);\n});\n"]}
+{"version":3,"file":"application-headet.ct.js","sourceRoot":"","sources":["../../../../src/components/application-header/test/application-headet.ct.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAEnC,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;EACxC,IAAI,CAAC,eAAe,CAAC;IACnB,MAAM,EAAE,GAAG;IACX,KAAK,EAAE,IAAI;GACZ,CAAC,CAAC;EACH,MAAM,KAAK,CACT;;;KAGC,CACF,CAAC;EAEF,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,2CAA2C,CAAC,CAAC;EAEzE,MAAM,MAAM,CAAC,MAAM,CAAC,CAAC,WAAW,EAAE,CAAC;EACnC,MAAM,MAAM,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC;AACpD,CAAC,CAAC,CAAC","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { expect } from '@playwright/test';\nimport { test } from '@utils/test';\n\ntest('renders', async ({ mount, page }) => {\n  page.setViewportSize({\n    height: 500,\n    width: 1400,\n  });\n  await mount(\n    `\n      <ix-basic-navigation application-name=\"test\">\n      </ix-basic-navigation>\n    `\n  );\n\n  const header = page.locator('ix-basic-navigation ix-application-header');\n\n  await expect(header).toBeVisible();\n  await expect(header).toHaveClass(/breakpoint-lg/);\n});\n"]}

package/dist/collection/components/blind/blind.css

@@ -45,8 +45,6 @@
 :host {
   display: flex;
   flex-direction: column;
-  background-color: var(--theme-blind-base--background);
-  border: solid var(--theme-blind--border-thickness) var(--theme-blind-base--border-color);
   border-radius: var(--theme-blind--border-radius);
   overflow: hidden;
 }
@@ -62,113 +60,294 @@
   border: solid var(--theme-blind--border-thickness) transparent;
   border-radius: var(--theme-blind--border-radius) var(--theme-blind--border-radius) 0 0;
   padding-right: 0.5rem;
-  transition: border-radius 150ms;
   cursor: pointer;
   z-index: 1;
-  color: var(--theme-blind-header-closed--color);
-  background-color: var(--theme-blind-header-closed--background);
 }
 :host .blind-header .collapse-icon {
-  color: var(--theme-blind-header-icon-closed--color);
   padding: 0.25rem 0.5rem;
 }
-:host .blind-header ix-typography,
-:host .blind-header .blind-header-title-label,
-:host .blind-header .blind-header-title-sublabel {
+:host .blind-header .blind-header-title-col {
+  flex-grow: 1;
+  flex-basis: 0;
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+}
+:host .blind-header ix-typography {
+  flex-grow: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  flex-grow: 1;
+}
+:host .blind-header .blind-header-title-col:not(:first-of-type) {
+  justify-content: flex-end;
 }
 :host .blind-header .blind-header-title-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   -webkit-padding-end: 0.5rem;
           padding-inline-end: 0.5rem;
 }
 :host .blind-header .blind-header-title-sublabel {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   padding-inline: 0.5rem;
 }
 :host .blind-header .blind-header-title,
 :host .blind-header .blind-header-title-basic {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
   display: flex;
   align-items: center;
   flex-grow: 1;
   height: 100%;
+  min-width: 0;
 }
-:host .blind-header .blind-header-title .blind-header-title-default,
-:host .blind-header .blind-header-title-basic .blind-header-title-default {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smooting: grayscale;
-  font-family: Siemens Sans, sans-serif;
-  font-size: 1rem;
-  font-weight: 700;
-  line-height: 1.5em;
-  color: var(--theme-color-std-text);
+:host .blind-header .blind-header-title-basic ix-icon {
   -webkit-margin-end: 0.5rem;
           margin-inline-end: 0.5rem;
+}
+:host .blind-header:not(.disabled):not(:disabled):focus-visible {
+  border-color: var(--theme-color-focus-bdr);
+  outline: none;
+}
+:host .blind-header .blind-header-labels {
+  display: inline-flex;
   flex-grow: 1;
+  min-width: 0;
 }
-:host .blind-header .blind-header-title-basic ix-icon {
-  -webkit-margin-end: 0.5rem;
-          margin-inline-end: 0.5rem;
+:host .blind-content {
+  display: block;
+  padding: 1rem;
+  transition-property: padding;
+  transition-duration: 150ms;
+  transition-timing-function: ease-in;
+}
+:host .blind-content.hide {
+  max-height: 0;
+  padding-top: 0px;
+  padding-bottom: 0px;
 }
-:host .blind-header:not(.disabled):not(:disabled) {
+
+:host(.blind-alarm) {
+  background-color: var(--theme-blind-base--background);
+}
+:host(.blind-alarm) .blind-header {
+  background-color: var(--theme-color-alarm);
+}
+:host(.blind-alarm) .blind-header .blind-header-title-label,
+:host(.blind-alarm) .blind-header .blind-header-title-sublabel {
+  color: var(--theme-color-alarm--contrast);
+}
+:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .blind-header:not(.disabled):not(:disabled):hover, :host .blind-header:not(.disabled):not(:disabled):hover {
-  background-color: var(--theme-blind-header-open--background--hover);
+:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled):hover, :host(.blind-alarm) .blind-header:not(.disabled):not(:disabled):hover {
+  background-color: var(--theme-color-alarm--hover);
 }
-:host .blind-header:not(.disabled):not(:disabled):hover .collapse-icon, :host .blind-header:not(.disabled):not(:disabled):hover .collapse-icon {
-  color: var(--theme-blind-header-icon-open--color--hover);
+:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled):active, :host(.blind-alarm) .blind-header:not(.disabled):not(:disabled).active {
+  background-color: var(--theme-color-alarm--active);
+}
+
+:host(.blind-critical) {
+  background-color: var(--theme-blind-base--background);
 }
-:host .blind-header:not(.disabled):not(:disabled) {
+:host(.blind-critical) .blind-header {
+  background-color: var(--theme-color-critical);
+}
+:host(.blind-critical) .blind-header .blind-header-title-label,
+:host(.blind-critical) .blind-header .blind-header-title-sublabel {
+  color: var(--theme-color-critical--contrast);
+}
+:host(.blind-critical) .blind-header:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .blind-header:not(.disabled):not(:disabled):active, :host .blind-header:not(.disabled):not(:disabled).active {
-  background-color: var(--theme-blind-header-open--background--active);
+:host(.blind-critical) .blind-header:not(.disabled):not(:disabled):hover, :host(.blind-critical) .blind-header:not(.disabled):not(:disabled):hover {
+  background-color: var(--theme-color-critical--hover);
 }
-:host .blind-header:not(.disabled):not(:disabled):active .collapse-icon, :host .blind-header:not(.disabled):not(:disabled).active .collapse-icon {
-  color: var(--theme-blind-header-icon-open--color--active);
+:host(.blind-critical) .blind-header:not(.disabled):not(:disabled) {
+  cursor: pointer;
 }
-:host .blind-header:not(.disabled):not(:disabled):focus-visible {
-  border-color: var(--theme-color-focus-bdr);
-  outline: none;
+:host(.blind-critical) .blind-header:not(.disabled):not(:disabled):active, :host(.blind-critical) .blind-header:not(.disabled):not(:disabled).active {
+  background-color: var(--theme-color-critical--active);
 }
-:host .blind-header.closed {
-  border-radius: var(--theme-blind--border-radius);
+
+:host(.blind-info) {
+  background-color: var(--theme-blind-base--background);
+}
+:host(.blind-info) .blind-header {
+  background-color: var(--theme-color-info);
+}
+:host(.blind-info) .blind-header .blind-header-title-label,
+:host(.blind-info) .blind-header .blind-header-title-sublabel {
+  color: var(--theme-color-info--contrast);
+}
+:host(.blind-info) .blind-header:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host(.blind-info) .blind-header:not(.disabled):not(:disabled):hover, :host(.blind-info) .blind-header:not(.disabled):not(:disabled):hover {
+  background-color: var(--theme-color-info--hover);
+}
+:host(.blind-info) .blind-header:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host(.blind-info) .blind-header:not(.disabled):not(:disabled):active, :host(.blind-info) .blind-header:not(.disabled):not(:disabled).active {
+  background-color: var(--theme-color-info--active);
 }
-:host .blind-header.closed:not(.disabled):not(:disabled) {
+
+:host(.blind-insight) {
+  background-color: var(--theme-blind-base--background);
+}
+:host(.blind-insight) .blind-header {
+  background-color: var(--theme-color-insight);
+}
+:host(.blind-insight) .blind-header .blind-header-title-label {
+  color: var(--theme-color-std-text);
+}
+:host(.blind-insight) .blind-header .blind-header-title-sublabel {
+  color: var(--theme-color-soft-text);
+}
+:host(.blind-insight) .blind-header:not(.disabled):not(:disabled).hover, :host(.blind-insight) .blind-header:not(.disabled):not(:disabled):hover {
+  background-color: var(--theme-ghost--background--hover);
+}
+:host(.blind-insight) .blind-header:not(.disabled):not(:disabled).active, :host(.blind-insight) .blind-header:not(.disabled):not(:disabled):active {
+  background-color: var(--theme-ghost--background--active);
+}
+
+:host(.blind-neutral) {
+  background-color: var(--theme-blind-base--background);
+}
+:host(.blind-neutral) .blind-header {
+  background-color: var(--theme-color-neutral);
+}
+:host(.blind-neutral) .blind-header .blind-header-title-label,
+:host(.blind-neutral) .blind-header .blind-header-title-sublabel {
+  color: var(--theme-color-neutral--contrast);
+}
+:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled):hover, :host(.blind-neutral) .blind-header:not(.disabled):not(:disabled):hover {
+  background-color: var(--theme-color-neutral--hover);
+}
+:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .blind-header.closed:not(.disabled):not(:disabled):hover, :host .blind-header.closed:not(.disabled):not(:disabled):hover {
-  background-color: var(--theme-blind-header-open--background--hover);
+:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled):active, :host(.blind-neutral) .blind-header:not(.disabled):not(:disabled).active {
+  background-color: var(--theme-color-neutral--active);
+}
+
+:host(.blind-notification) {
+  background-color: var(--theme-blind-base--background);
 }
-:host .blind-header.closed:not(.disabled):not(:disabled):hover .collapse-icon, :host .blind-header.closed:not(.disabled):not(:disabled):hover .collapse-icon {
-  color: var(--theme-blind-header-icon-closed--color--hover);
+:host(.blind-notification) .blind-header {
+  background-color: var(--theme-color-notification);
 }
-:host .blind-header.closed:not(.disabled):not(:disabled) {
+:host(.blind-notification) .blind-header .blind-header-title-label,
+:host(.blind-notification) .blind-header .blind-header-title-sublabel {
+  color: var(--theme-color-notification--contrast);
+}
+:host(.blind-notification) .blind-header:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .blind-header.closed:not(.disabled):not(:disabled):active, :host .blind-header.closed:not(.disabled):not(:disabled).active {
-  background-color: var(--theme-blind-header-open--background--active);
+:host(.blind-notification) .blind-header:not(.disabled):not(:disabled):hover, :host(.blind-notification) .blind-header:not(.disabled):not(:disabled):hover {
+  background-color: var(--theme-color-notification--hover);
 }
-:host .blind-header.closed:not(.disabled):not(:disabled):active .collapse-icon, :host .blind-header.closed:not(.disabled):not(:disabled).active .collapse-icon {
-  color: var(--theme-blind-header-icon-closed--color--active);
+:host(.blind-notification) .blind-header:not(.disabled):not(:disabled) {
+  cursor: pointer;
 }
-:host .blind-content {
-  display: block;
-  padding: 1rem;
-  transition-property: padding;
-  transition-duration: 150ms;
-  transition-timing-function: ease-in;
+:host(.blind-notification) .blind-header:not(.disabled):not(:disabled):active, :host(.blind-notification) .blind-header:not(.disabled):not(:disabled).active {
+  background-color: var(--theme-color-notification--active);
 }
-:host .blind-content.hide {
-  max-height: 0;
-  padding-top: 0px;
-  padding-bottom: 0px;
+
+:host(.blind-success) {
+  background-color: var(--theme-blind-base--background);
+}
+:host(.blind-success) .blind-header {
+  background-color: var(--theme-color-success);
+}
+:host(.blind-success) .blind-header .blind-header-title-label,
+:host(.blind-success) .blind-header .blind-header-title-sublabel {
+  color: var(--theme-color-success--contrast);
+}
+:host(.blind-success) .blind-header:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host(.blind-success) .blind-header:not(.disabled):not(:disabled):hover, :host(.blind-success) .blind-header:not(.disabled):not(:disabled):hover {
+  background-color: var(--theme-color-success--hover);
+}
+:host(.blind-success) .blind-header:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host(.blind-success) .blind-header:not(.disabled):not(:disabled):active, :host(.blind-success) .blind-header:not(.disabled):not(:disabled).active {
+  background-color: var(--theme-color-success--active);
+}
+
+:host(.blind-warning) {
+  background-color: var(--theme-blind-base--background);
+}
+:host(.blind-warning) .blind-header {
+  background-color: var(--theme-color-warning);
+}
+:host(.blind-warning) .blind-header .blind-header-title-label,
+:host(.blind-warning) .blind-header .blind-header-title-sublabel {
+  color: var(--theme-color-warning--contrast);
+}
+:host(.blind-warning) .blind-header:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host(.blind-warning) .blind-header:not(.disabled):not(:disabled):hover, :host(.blind-warning) .blind-header:not(.disabled):not(:disabled):hover {
+  background-color: var(--theme-color-warning--hover);
+}
+:host(.blind-warning) .blind-header:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host(.blind-warning) .blind-header:not(.disabled):not(:disabled):active, :host(.blind-warning) .blind-header:not(.disabled):not(:disabled).active {
+  background-color: var(--theme-color-warning--active);
+}
+
+:host(.blind-primary) {
+  background-color: var(--theme-blind-base--background);
+}
+:host(.blind-primary) .blind-header {
+  background-color: var(--theme-color-primary);
+}
+:host(.blind-primary) .blind-header .blind-header-title-label,
+:host(.blind-primary) .blind-header .blind-header-title-sublabel {
+  color: var(--theme-color-primary--contrast);
+}
+:host(.blind-primary) .blind-header:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host(.blind-primary) .blind-header:not(.disabled):not(:disabled):hover, :host(.blind-primary) .blind-header:not(.disabled):not(:disabled):hover {
+  background-color: var(--theme-color-primary--hover);
+}
+:host(.blind-primary) .blind-header:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host(.blind-primary) .blind-header:not(.disabled):not(:disabled):active, :host(.blind-primary) .blind-header:not(.disabled):not(:disabled).active {
+  background-color: var(--theme-color-primary--active);
+}
+
+:host(.blind-outline) {
+  border: solid var(--theme-blind--border-thickness) var(--theme-blind-base--border-color);
+  border-color: var(--theme-color-soft-bdr);
+}
+:host(.blind-outline) .blind-header {
+  background-color: var(--theme-color-ghost);
+}
+:host(.blind-outline) .blind-header .blind-header-title-label {
+  color: var(--theme-color-std-text);
+}
+:host(.blind-outline) .blind-header .blind-header-title-sublabel {
+  color: var(--theme-color-soft-text);
+}
+:host(.blind-outline) .blind-header:not(.disabled):not(:disabled).hover, :host(.blind-outline) .blind-header:not(.disabled):not(:disabled):hover {
+  background-color: var(--theme-ghost--background--hover);
+}
+:host(.blind-outline) .blind-header:not(.disabled):not(:disabled).active, :host(.blind-outline) .blind-header:not(.disabled):not(:disabled):active {
+  background-color: var(--theme-ghost--background--active);
 }

package/dist/collection/components/blind/blind.js

@@ -12,11 +12,12 @@ import { a11yBoolean } from '../utils/a11y';
 let sequentialInstanceId = 0;
 export class Blind {
   constructor() {
-    this.id = ++sequentialInstanceId;
+    this.blindId = ++sequentialInstanceId;
     this.collapsed = false;
     this.label = undefined;
     this.sublabel = undefined;
     this.icon = undefined;
+    this.variant = 'insight';
   }
   onHeaderClick(e) {
     if (e.target.closest('.header-actions')) {
@@ -73,10 +74,17 @@ export class Blind {
     });
   }
   render() {
-    return (h(Host, null, h("button", { class: {
+    return (h(Host, { class: {
+        [`blind-${this.variant}`]: true,
+      } }, h("button", { class: {
         'blind-header': true,
+        [`blind-${this.variant}`]: true,
         closed: this.collapsed,
-      }, type: "button", "aria-labelledby": `ix-blind-header-title-${this.id}`, "aria-controls": `ix-blind-content-section-${this.id}`, "aria-expanded": a11yBoolean(!this.collapsed), onClick: (e) => this.onHeaderClick(e) }, h("ix-icon", { class: 'collapse-icon', name: "chevron-right-small", ref: (ref) => (this.chevronRef = ref) }), h("div", { class: "blind-header-title", id: `ix-blind-header-title-${this.id}` }, this.label !== undefined ? (h("span", { class: "blind-header-title-basic" }, this.icon !== undefined ? (h("ix-icon", { name: this.icon })) : (''), h("ix-typography", { format: "label-lg", bold: true }, h("div", { class: "blind-header-title-label", title: this.label }, this.label)), this.sublabel !== undefined ? (h("ix-typography", { color: "soft" }, h("div", { class: "blind-header-title-sublabel", title: this.sublabel }, this.sublabel))) : (''), h("span", { class: "header-actions", onClick: (e) => e.stopImmediatePropagation() }, h("slot", { name: "header-actions" })))) : (h("slot", { name: "custom-header" })))), h("section", { id: `ix-blind-content-section-${this.id}`, "aria-labelledby": `ix-blind-header-title-${this.id}` }, h("div", { class: {
+      }, type: "button", "aria-labelledby": `ix-blind-header-title-${this.blindId}`, "aria-controls": `ix-blind-content-section-${this.blindId}`, "aria-expanded": a11yBoolean(!this.collapsed), onClick: (e) => this.onHeaderClick(e) }, h("ix-icon", { class: "collapse-icon", name: 'chevron-right-small', color: this.variant === 'insight' || this.variant === 'outline'
+        ? 'color-primary'
+        : `color-${this.variant}--contrast`, ref: (ref) => (this.chevronRef = ref) }), h("div", { class: "blind-header-title", id: `ix-blind-header-title-${this.blindId}` }, this.label !== undefined ? (h("span", { class: "blind-header-title-basic" }, h("div", { class: "blind-header-title-col" }, this.icon !== undefined ? (h("ix-icon", { name: this.icon, color: this.variant === 'insight' || this.variant === 'outline'
+        ? 'color-std-text'
+        : `color-${this.variant}--contrast` })) : (''), h("ix-typography", { title: this.label, format: "label-lg", bold: true }, h("div", { class: "blind-header-title-label", title: this.label }, this.label))), h("div", { class: "blind-header-title-col" }, this.sublabel !== undefined ? (h("ix-typography", { title: this.sublabel }, h("div", { class: "blind-header-title-sublabel" }, this.sublabel))) : (''), h("span", { class: "header-actions", onClick: (e) => e.stopImmediatePropagation() }, h("slot", { name: "header-actions" }))))) : (h("slot", { name: "custom-header" })))), h("section", { id: `ix-blind-content-section-${this.blindId}`, "aria-labelledby": `ix-blind-header-title-${this.blindId}` }, h("div", { class: {
         'blind-content': true,
         hide: this.collapsed,
       } }, !this.collapsed ? h("slot", null) : null))));
@@ -169,6 +177,32 @@ export class Blind {
         },
         "attribute": "icon",
         "reflect": false
+      },
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "BlindVariant",
+          "resolved": "\"alarm\" | \"critical\" | \"info\" | \"insight\" | \"neutral\" | \"notification\" | \"outline\" | \"primary\" | \"success\" | \"warning\"",
+          "references": {
+            "BlindVariant": {
+              "location": "local",
+              "path": "/__w/ix/ix/packages/core/src/components/blind/blind.tsx"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "since",
+              "text": "2.0.0"
+            }],
+          "text": "Blind variant"
+        },
+        "attribute": "variant",
+        "reflect": false,
+        "defaultValue": "'insight'"
       }
     };
   }

package/dist/collection/components/blind/blind.js.map

@@ -1 +1 @@
-{"version":3,"file":"blind.js","sourceRoot":"","sources":["../../../src/components/blind/blind.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { a11yBoolean } from '../utils/a11y';\n\nlet sequentialInstanceId = 0;\n@Component({\n  tag: 'ix-blind',\n  styleUrl: 'blind.scss',\n  shadow: true,\n})\nexport class Blind {\n  /**\n   * Collapsed state\n   */\n  @Prop({ mutable: true, reflect: true }) collapsed = false;\n\n  /**\n   * Label of blind\n   */\n  @Prop() label: string;\n\n  /**\n   * Secondary label inside blind header\n   * @since 2.0.0\n   */\n  @Prop() sublabel: string;\n\n  /**\n   * Optional icon to be displayed next to the header label\n   * @since 1.5.0\n   */\n  @Prop() icon: string;\n\n  /**\n   * Collapsed state changed\n   */\n  @Event() collapsedChange: EventEmitter<boolean>;\n\n  @Element() hostElement!: HTMLIxBlindElement;\n\n  private chevronRef: HTMLElement;\n  private id = ++sequentialInstanceId;\n\n  constructor() {}\n\n  private onHeaderClick(e: Event) {\n    if ((e.target as Element).closest('.header-actions')) {\n      return;\n    }\n\n    e.preventDefault();\n    e.stopImmediatePropagation();\n\n    this.collapsed = !this.collapsed;\n    this.collapsedChange.emit(this.collapsed);\n  }\n\n  componentDidLoad() {\n    this.animateCollapse(this.collapsed);\n  }\n\n  get content() {\n    return this.hostElement.shadowRoot.querySelector('.blind-content');\n  }\n\n  @Watch('collapsed')\n  animation(isCollapsed: boolean) {\n    this.animateCollapse(isCollapsed);\n  }\n\n  private animateCollapse(isCollapsed: boolean) {\n    if (isCollapsed) {\n      this.rotateChevronRight();\n    } else {\n      this.rotateChevronDown();\n    }\n  }\n\n  private rotateChevronDown() {\n    anime({\n      targets: this.chevronRef,\n      duration: 150,\n      easing: 'easeInOutSine',\n      rotateZ: 90,\n    });\n    anime({\n      targets: this.content,\n      duration: 150,\n      easing: 'easeInOutSine',\n      opacity: 1,\n    });\n  }\n\n  private rotateChevronRight() {\n    anime({\n      targets: this.chevronRef,\n      duration: 150,\n      easing: 'easeInOutSine',\n      rotateZ: 0,\n    });\n    anime({\n      targets: this.content,\n      duration: 150,\n      easing: 'easeInOutSine',\n      opacity: 0,\n    });\n  }\n\n  render() {\n    return (\n      <Host>\n        <button\n          class={{\n            'blind-header': true,\n            closed: this.collapsed,\n          }}\n          type=\"button\"\n          aria-labelledby={`ix-blind-header-title-${this.id}`}\n          aria-controls={`ix-blind-content-section-${this.id}`}\n          aria-expanded={a11yBoolean(!this.collapsed)}\n          onClick={(e) => this.onHeaderClick(e)}\n        >\n          <ix-icon\n            class={'collapse-icon'}\n            name=\"chevron-right-small\"\n            ref={(ref) => (this.chevronRef = ref)}\n          ></ix-icon>\n          <div\n            class=\"blind-header-title\"\n            id={`ix-blind-header-title-${this.id}`}\n          >\n            {this.label !== undefined ? (\n              <span class=\"blind-header-title-basic\">\n                {this.icon !== undefined ? (\n                  <ix-icon name={this.icon}></ix-icon>\n                ) : (\n                  ''\n                )}\n                <ix-typography format=\"label-lg\" bold>\n                  <div class=\"blind-header-title-label\" title={this.label}>\n                    {this.label}\n                  </div>\n                </ix-typography>\n                {this.sublabel !== undefined ? (\n                  <ix-typography color=\"soft\">\n                    <div\n                      class=\"blind-header-title-sublabel\"\n                      title={this.sublabel}\n                    >\n                      {this.sublabel}\n                    </div>\n                  </ix-typography>\n                ) : (\n                  ''\n                )}\n                <span\n                  class=\"header-actions\"\n                  onClick={(e) => e.stopImmediatePropagation()}\n                >\n                  <slot name=\"header-actions\"></slot>\n                </span>\n              </span>\n            ) : (\n              <slot name=\"custom-header\"></slot>\n            )}\n          </div>\n        </button>\n        <section\n          id={`ix-blind-content-section-${this.id}`}\n          aria-labelledby={`ix-blind-header-title-${this.id}`}\n        >\n          <div\n            class={{\n              'blind-content': true,\n              hide: this.collapsed,\n            }}\n          >\n            {!this.collapsed ? <slot></slot> : null}\n          </div>\n        </section>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"blind.js","sourceRoot":"","sources":["../../../src/components/blind/blind.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { CardVariant } from '../card/card';\nimport { a11yBoolean } from '../utils/a11y';\n\nexport type BlindVariant = CardVariant | 'outline';\n\nlet sequentialInstanceId = 0;\n\n@Component({\n  tag: 'ix-blind',\n  styleUrl: 'blind.scss',\n  shadow: true,\n})\nexport class Blind {\n  /**\n   * Collapsed state\n   */\n  @Prop({ mutable: true, reflect: true }) collapsed = false;\n\n  /**\n   * Label of blind\n   */\n  @Prop() label: string;\n\n  /**\n   * Secondary label inside blind header\n   * @since 2.0.0\n   */\n  @Prop() sublabel: string;\n\n  /**\n   * Optional icon to be displayed next to the header label\n   * @since 1.5.0\n   */\n  @Prop() icon: string;\n\n  /**\n   * Blind variant\n   * @since 2.0.0\n   */\n  @Prop() variant: BlindVariant = 'insight';\n\n  /**\n   * Collapsed state changed\n   */\n  @Event() collapsedChange: EventEmitter<boolean>;\n\n  @Element() hostElement!: HTMLIxBlindElement;\n\n  private chevronRef: HTMLElement;\n  private blindId = ++sequentialInstanceId;\n\n  constructor() {}\n\n  private onHeaderClick(e: Event) {\n    if ((e.target as Element).closest('.header-actions')) {\n      return;\n    }\n\n    e.preventDefault();\n    e.stopImmediatePropagation();\n\n    this.collapsed = !this.collapsed;\n    this.collapsedChange.emit(this.collapsed);\n  }\n\n  componentDidLoad() {\n    this.animateCollapse(this.collapsed);\n  }\n\n  get content() {\n    return this.hostElement.shadowRoot.querySelector('.blind-content');\n  }\n\n  @Watch('collapsed')\n  animation(isCollapsed: boolean) {\n    this.animateCollapse(isCollapsed);\n  }\n\n  private animateCollapse(isCollapsed: boolean) {\n    if (isCollapsed) {\n      this.rotateChevronRight();\n    } else {\n      this.rotateChevronDown();\n    }\n  }\n\n  private rotateChevronDown() {\n    anime({\n      targets: this.chevronRef,\n      duration: 150,\n      easing: 'easeInOutSine',\n      rotateZ: 90,\n    });\n    anime({\n      targets: this.content,\n      duration: 150,\n      easing: 'easeInOutSine',\n      opacity: 1,\n    });\n  }\n\n  private rotateChevronRight() {\n    anime({\n      targets: this.chevronRef,\n      duration: 150,\n      easing: 'easeInOutSine',\n      rotateZ: 0,\n    });\n    anime({\n      targets: this.content,\n      duration: 150,\n      easing: 'easeInOutSine',\n      opacity: 0,\n    });\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          [`blind-${this.variant}`]: true,\n        }}\n      >\n        <button\n          class={{\n            'blind-header': true,\n            [`blind-${this.variant}`]: true,\n            closed: this.collapsed,\n          }}\n          type=\"button\"\n          aria-labelledby={`ix-blind-header-title-${this.blindId}`}\n          aria-controls={`ix-blind-content-section-${this.blindId}`}\n          aria-expanded={a11yBoolean(!this.collapsed)}\n          onClick={(e) => this.onHeaderClick(e)}\n        >\n          <ix-icon\n            class=\"collapse-icon\"\n            name={'chevron-right-small'}\n            color={\n              this.variant === 'insight' || this.variant === 'outline'\n                ? 'color-primary'\n                : `color-${this.variant}--contrast`\n            }\n            ref={(ref) => (this.chevronRef = ref)}\n          ></ix-icon>\n          <div\n            class=\"blind-header-title\"\n            id={`ix-blind-header-title-${this.blindId}`}\n          >\n            {this.label !== undefined ? (\n              <span class=\"blind-header-title-basic\">\n                <div class=\"blind-header-title-col\">\n                  {this.icon !== undefined ? (\n                    <ix-icon\n                      name={this.icon}\n                      color={\n                        this.variant === 'insight' || this.variant === 'outline'\n                          ? 'color-std-text'\n                          : `color-${this.variant}--contrast`\n                      }\n                    ></ix-icon>\n                  ) : (\n                    ''\n                  )}\n                  <ix-typography title={this.label} format=\"label-lg\" bold>\n                    <div class=\"blind-header-title-label\" title={this.label}>\n                      {this.label}\n                    </div>\n                  </ix-typography>\n                </div>\n\n                <div class=\"blind-header-title-col\">\n                  {this.sublabel !== undefined ? (\n                    <ix-typography title={this.sublabel}>\n                      <div class=\"blind-header-title-sublabel\">\n                        {this.sublabel}\n                      </div>\n                    </ix-typography>\n                  ) : (\n                    ''\n                  )}\n                  <span\n                    class=\"header-actions\"\n                    onClick={(e) => e.stopImmediatePropagation()}\n                  >\n                    <slot name=\"header-actions\"></slot>\n                  </span>\n                </div>\n              </span>\n            ) : (\n              <slot name=\"custom-header\"></slot>\n            )}\n          </div>\n        </button>\n        <section\n          id={`ix-blind-content-section-${this.blindId}`}\n          aria-labelledby={`ix-blind-header-title-${this.blindId}`}\n        >\n          <div\n            class={{\n              'blind-content': true,\n              hide: this.collapsed,\n            }}\n          >\n            {!this.collapsed ? <slot></slot> : null}\n          </div>\n        </section>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/breadcrumb-item/breadcrumb-item.css

@@ -1043,7 +1043,7 @@
   pointer-events: none;
   margin-left: 0.5rem;
   margin-right: 0rem;
-  --theme-color-std-text: var(--theme-color-soft-text);
+  color: var(--theme-color-soft-text);
 }
 :host ::slotted(a[href]) {
   text-decoration: none !important;

package/dist/collection/components/breadcrumb-item/breadcrumb-item.js

@@ -6,7 +6,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { chevronRightSmall } from '@siemens/ix-icons/icons';
 import { Fragment, h, Host, } from '@stencil/core';
 import animejs from 'animejs';
 import { BaseButton } from '../button/base-button';
@@ -57,7 +56,7 @@ export class BreadcrumbItem {
     }
     return (h(Host, { class: {
         'hide-chevron': !this.showChevron,
-      }, onClick: () => this.itemClick.emit(this.label) }, h("li", null, h(BaseButton, Object.assign({}, props, { afterContent: h(Fragment, null, this.showChevron ? (h("ix-icon", { name: chevronRightSmall, size: "16", class: 'chevron' })) : null) }), this.label, h("slot", null)))));
+      }, onClick: () => this.itemClick.emit(this.label) }, h("li", null, h(BaseButton, Object.assign({}, props, { afterContent: h(Fragment, null, this.showChevron ? (h("ix-icon", { name: 'chevron-right-small', size: "16", class: 'chevron' })) : null) }), this.label, h("slot", null)))));
   }
   static get is() { return "ix-breadcrumb-item"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/breadcrumb-item/breadcrumb-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb-item.js","sourceRoot":"","sources":["../../../src/components/breadcrumb-item/breadcrumb-item.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,QAAQ,EACR,CAAC,EACD,IAAI,EACJ,IAAI,GACL,MAAM,eAAe,CAAC;AACvB,OAAO,OAAO,MAAM,SAAS,CAAC;AAC9B,OAAO,EAAE,UAAU,EAAmB,MAAM,uBAAuB,CAAC;AACpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAcnD,MAAM,OAAO,cAAc;;;;iBAcA,IAAI;mBAGX,IAAI;uBAGA,IAAI;6BAGE,KAAK;;EAKjC,gBAAgB;IACd,IAAI,CAAC,eAAe,EAAE,CAAC;EACzB,CAAC;EAED,eAAe;IACb,OAAO,CAAC;MACN,OAAO,EAAE,IAAI,CAAC,WAAW;MACzB,QAAQ,EAAE,GAAG;MACb,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;MACf,UAAU,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC;MAC3B,MAAM,EAAE,QAAQ;KACjB,CAAC,CAAC;EACL,CAAC;EAED,MAAM;IACJ,MAAM,IAAI,GAAG,kBAAkB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAClD,MAAM,KAAK,GAAoB;MAC7B,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW;MAC7C,OAAO,EAAE,KAAK;MACd,KAAK,EAAE,IAAI,CAAC,KAAK;MACjB,QAAQ,EAAE,KAAK;MACf,QAAQ,EAAE,KAAK;MACf,QAAQ,EAAE,KAAK;MACf,IAAI,EAAE,IAAI,CAAC,IAAI;MACf,QAAQ,EAAE,IAAI;MACd,OAAO,EAAE,KAAK;MACd,QAAQ,EAAE,KAAK;MACf,IAAI,EAAE,QAAQ;MACd,QAAQ,EACN,IAAI,CAAC,WAAW,CAAC,QAAQ,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;MAClE,YAAY,EAAE;QACZ,kBAAkB,EAAE,IAAI,CAAC,iBAAiB;OAC3C;MACD,cAAc,EAAE,IAAI;KACrB,CAAC;IAEF,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;MACjB,OAAO,EAAC,IAAI,IAAC,KAAK,EAAE,WAAW,GAAS,CAAC;KAC1C;IAED,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,cAAc,EAAE,CAAC,IAAI,CAAC,WAAW;OAClC,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;MAE9C;QACE,EAAC,UAAU,oBACL,KAAK,IACT,YAAY,EACV,EAAC,QAAQ,QACN,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAClB,eACE,IAAI,EAAE,iBAAiB,EACvB,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,SAAS,GACP,CACZ,CAAC,CAAC,CAAC,IAAI,CACC;UAGZ,IAAI,CAAC,KAAK;UACX,eAAa,CACF,CACV,CACA,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { chevronRightSmall } from '@siemens/ix-icons/icons';\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Fragment,\n  h,\n  Host,\n  Prop,\n} from '@stencil/core';\nimport animejs from 'animejs';\nimport { BaseButton, BaseButtonProps } from '../button/base-button';\nimport { a11yHostAttributes } from '../utils/a11y';\n\nexport type BreadcrumbItemLinkTarget =\n  | '_self'\n  | '_blank'\n  | '_parent'\n  | '_top'\n  | string;\n\n@Component({\n  tag: 'ix-breadcrumb-item',\n  styleUrl: 'breadcrumb-item.scss',\n  shadow: true,\n})\nexport class BreadcrumbItem {\n  @Element() hostElement!: HTMLIxBreadcrumbItemElement;\n\n  /**\n   * Breadcrumb label\n   */\n  @Prop() label: string;\n\n  /**\n   * Icon to be displayed next ot the label\n   */\n  @Prop() icon: string;\n\n  /**@internal */\n  @Prop() ghost: boolean = true;\n\n  /**@internal */\n  @Prop() visible = true;\n\n  /**@internal */\n  @Prop() showChevron = true;\n\n  /** @internal */\n  @Prop() isDropdownTrigger = false;\n\n  /**@internal */\n  @Event() itemClick: EventEmitter<string>;\n\n  componentDidLoad() {\n    this.animationFadeIn();\n  }\n\n  animationFadeIn() {\n    animejs({\n      targets: this.hostElement,\n      duration: 150,\n      opacity: [0, 1],\n      translateX: ['-100%', '0%'],\n      easing: 'linear',\n    });\n  }\n\n  render() {\n    const a11y = a11yHostAttributes(this.hostElement);\n    const props: BaseButtonProps = {\n      variant: this.ghost ? 'primary' : 'secondary',\n      outline: false,\n      ghost: this.ghost,\n      iconOnly: false,\n      iconOval: false,\n      disabled: false,\n      icon: this.icon,\n      iconSize: '16',\n      loading: false,\n      selected: false,\n      type: 'button',\n      tabIndex:\n        this.hostElement.tabIndex !== -1 ? this.hostElement.tabIndex : 0,\n      extraClasses: {\n        'dropdown-trigger': this.isDropdownTrigger,\n      },\n      ariaAttributes: a11y,\n    };\n\n    if (!this.visible) {\n      return <Host class={'invisible'}></Host>;\n    }\n\n    return (\n      <Host\n        class={{\n          'hide-chevron': !this.showChevron,\n        }}\n        onClick={() => this.itemClick.emit(this.label)}\n      >\n        <li>\n          <BaseButton\n            {...props}\n            afterContent={\n              <Fragment>\n                {this.showChevron ? (\n                  <ix-icon\n                    name={chevronRightSmall}\n                    size=\"16\"\n                    class={'chevron'}\n                  ></ix-icon>\n                ) : null}\n              </Fragment>\n            }\n          >\n            {this.label}\n            <slot></slot>\n          </BaseButton>\n        </li>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"breadcrumb-item.js","sourceRoot":"","sources":["../../../src/components/breadcrumb-item/breadcrumb-item.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,QAAQ,EACR,CAAC,EACD,IAAI,EACJ,IAAI,GACL,MAAM,eAAe,CAAC;AACvB,OAAO,OAAO,MAAM,SAAS,CAAC;AAC9B,OAAO,EAAE,UAAU,EAAmB,MAAM,uBAAuB,CAAC;AACpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAcnD,MAAM,OAAO,cAAc;;;;iBAcA,IAAI;mBAGX,IAAI;uBAGA,IAAI;6BAGE,KAAK;;EAKjC,gBAAgB;IACd,IAAI,CAAC,eAAe,EAAE,CAAC;EACzB,CAAC;EAED,eAAe;IACb,OAAO,CAAC;MACN,OAAO,EAAE,IAAI,CAAC,WAAW;MACzB,QAAQ,EAAE,GAAG;MACb,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;MACf,UAAU,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC;MAC3B,MAAM,EAAE,QAAQ;KACjB,CAAC,CAAC;EACL,CAAC;EAED,MAAM;IACJ,MAAM,IAAI,GAAG,kBAAkB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAClD,MAAM,KAAK,GAAoB;MAC7B,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW;MAC7C,OAAO,EAAE,KAAK;MACd,KAAK,EAAE,IAAI,CAAC,KAAK;MACjB,QAAQ,EAAE,KAAK;MACf,QAAQ,EAAE,KAAK;MACf,QAAQ,EAAE,KAAK;MACf,IAAI,EAAE,IAAI,CAAC,IAAI;MACf,QAAQ,EAAE,IAAI;MACd,OAAO,EAAE,KAAK;MACd,QAAQ,EAAE,KAAK;MACf,IAAI,EAAE,QAAQ;MACd,QAAQ,EACN,IAAI,CAAC,WAAW,CAAC,QAAQ,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;MAClE,YAAY,EAAE;QACZ,kBAAkB,EAAE,IAAI,CAAC,iBAAiB;OAC3C;MACD,cAAc,EAAE,IAAI;KACrB,CAAC;IAEF,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;MACjB,OAAO,EAAC,IAAI,IAAC,KAAK,EAAE,WAAW,GAAS,CAAC;KAC1C;IAED,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,cAAc,EAAE,CAAC,IAAI,CAAC,WAAW;OAClC,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;MAE9C;QACE,EAAC,UAAU,oBACL,KAAK,IACT,YAAY,EACV,EAAC,QAAQ,QACN,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAClB,eACE,IAAI,EAAE,qBAAqB,EAC3B,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,SAAS,GACP,CACZ,CAAC,CAAC,CAAC,IAAI,CACC;UAGZ,IAAI,CAAC,KAAK;UACX,eAAa,CACF,CACV,CACA,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Fragment,\n  h,\n  Host,\n  Prop,\n} from '@stencil/core';\nimport animejs from 'animejs';\nimport { BaseButton, BaseButtonProps } from '../button/base-button';\nimport { a11yHostAttributes } from '../utils/a11y';\n\nexport type BreadcrumbItemLinkTarget =\n  | '_self'\n  | '_blank'\n  | '_parent'\n  | '_top'\n  | string;\n\n@Component({\n  tag: 'ix-breadcrumb-item',\n  styleUrl: 'breadcrumb-item.scss',\n  shadow: true,\n})\nexport class BreadcrumbItem {\n  @Element() hostElement!: HTMLIxBreadcrumbItemElement;\n\n  /**\n   * Breadcrumb label\n   */\n  @Prop() label: string;\n\n  /**\n   * Icon to be displayed next ot the label\n   */\n  @Prop() icon: string;\n\n  /**@internal */\n  @Prop() ghost: boolean = true;\n\n  /**@internal */\n  @Prop() visible = true;\n\n  /**@internal */\n  @Prop() showChevron = true;\n\n  /** @internal */\n  @Prop() isDropdownTrigger = false;\n\n  /**@internal */\n  @Event() itemClick: EventEmitter<string>;\n\n  componentDidLoad() {\n    this.animationFadeIn();\n  }\n\n  animationFadeIn() {\n    animejs({\n      targets: this.hostElement,\n      duration: 150,\n      opacity: [0, 1],\n      translateX: ['-100%', '0%'],\n      easing: 'linear',\n    });\n  }\n\n  render() {\n    const a11y = a11yHostAttributes(this.hostElement);\n    const props: BaseButtonProps = {\n      variant: this.ghost ? 'primary' : 'secondary',\n      outline: false,\n      ghost: this.ghost,\n      iconOnly: false,\n      iconOval: false,\n      disabled: false,\n      icon: this.icon,\n      iconSize: '16',\n      loading: false,\n      selected: false,\n      type: 'button',\n      tabIndex:\n        this.hostElement.tabIndex !== -1 ? this.hostElement.tabIndex : 0,\n      extraClasses: {\n        'dropdown-trigger': this.isDropdownTrigger,\n      },\n      ariaAttributes: a11y,\n    };\n\n    if (!this.visible) {\n      return <Host class={'invisible'}></Host>;\n    }\n\n    return (\n      <Host\n        class={{\n          'hide-chevron': !this.showChevron,\n        }}\n        onClick={() => this.itemClick.emit(this.label)}\n      >\n        <li>\n          <BaseButton\n            {...props}\n            afterContent={\n              <Fragment>\n                {this.showChevron ? (\n                  <ix-icon\n                    name={'chevron-right-small'}\n                    size=\"16\"\n                    class={'chevron'}\n                  ></ix-icon>\n                ) : null}\n              </Fragment>\n            }\n          >\n            {this.label}\n            <slot></slot>\n          </BaseButton>\n        </li>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -72,7 +72,6 @@
   flex-shrink: 0;
   flex-grow: 1;
   width: 100%;
-  padding: 1rem 1rem;
   height: calc(100% - 2rem);
   background-color: var(--ix-card-background, transparent);
   border-top-left-radius: var(--theme-default-border-radius);
@@ -123,6 +122,11 @@
   color: var(--theme-color-neutral--contrast);
 }
 
+:host(.card-primary) {
+  --ix-card-background: var(--theme-color-primary);
+  color: var(--theme-color-neutral--contrast);
+}
+
 :host(:not(.card-insight)) {
   --ix-card-border-color: transparent;
 }

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

@@ -28,7 +28,7 @@ export class Card {
         "mutable": false,
         "complexType": {
           "original": "CardVariant",
-          "resolved": "\"alarm\" | \"critical\" | \"info\" | \"insight\" | \"neutral\" | \"notification\" | \"success\" | \"warning\"",
+          "resolved": "\"alarm\" | \"critical\" | \"info\" | \"insight\" | \"neutral\" | \"notification\" | \"primary\" | \"success\" | \"warning\"",
           "references": {
             "CardVariant": {
               "location": "local",

package/dist/collection/components/card/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../src/components/card/card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAYlE;;GAEG;AAMH,MAAM,OAAO,IAAI;;mBAMgB,SAAS;;EAExC,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,QAAQ,IAAI,CAAC,OAAO,EAAE;MACjC,WAAK,KAAK,EAAC,cAAc;QACvB,eAAa,CACT;MACN,WAAK,KAAK,EAAC,aAAa;QACtB,YAAM,IAAI,EAAC,gBAAgB,GAAQ,CAC/B,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Prop } from '@stencil/core';\n\nexport type CardVariant =\n  | 'insight'\n  | 'notification'\n  | 'alarm'\n  | 'critical'\n  | 'warning'\n  | 'info'\n  | 'neutral'\n  | 'success';\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-card',\n  styleUrl: 'card.scss',\n  shadow: true,\n})\nexport class Card {\n  @Element() hostElement: HTMLIxCardElement;\n\n  /**\n   * Card variant\n   */\n  @Prop() variant: CardVariant = 'insight';\n\n  render() {\n    return (\n      <Host class={`card-${this.variant}`}>\n        <div class=\"card-content\">\n          <slot></slot>\n        </div>\n        <div class=\"card-footer\">\n          <slot name=\"card-accordion\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../src/components/card/card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAalE;;GAEG;AAMH,MAAM,OAAO,IAAI;;mBAMgB,SAAS;;EAExC,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,QAAQ,IAAI,CAAC,OAAO,EAAE;MACjC,WAAK,KAAK,EAAC,cAAc;QACvB,eAAa,CACT;MACN,WAAK,KAAK,EAAC,aAAa;QACtB,YAAM,IAAI,EAAC,gBAAgB,GAAQ,CAC/B,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Prop } from '@stencil/core';\n\nexport type CardVariant =\n  | 'insight'\n  | 'notification'\n  | 'alarm'\n  | 'critical'\n  | 'warning'\n  | 'info'\n  | 'neutral'\n  | 'success'\n  | 'primary';\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-card',\n  styleUrl: 'card.scss',\n  shadow: true,\n})\nexport class Card {\n  @Element() hostElement: HTMLIxCardElement;\n\n  /**\n   * Card variant\n   */\n  @Prop() variant: CardVariant = 'insight';\n\n  render() {\n    return (\n      <Host class={`card-${this.variant}`}>\n        <div class=\"card-content\">\n          <slot></slot>\n        </div>\n        <div class=\"card-footer\">\n          <slot name=\"card-accordion\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}