feat(core): elevation changes

.changeset/fast-apples-notice.md

@@ -0,0 +1,9 @@
+---
+'@siemens/ix-angular': minor
+'@siemens/ix-aggrid': minor
+'@siemens/ix-react': minor
+'@siemens/ix': minor
+'@siemens/ix-vue': minor
+---
+
+Introduced new `variant` for **ix-card-accordion**

.changeset/rich-cars-drop.md

@@ -0,0 +1,9 @@
+---
+'@siemens/ix-angular': minor
+'@siemens/ix-aggrid': minor
+'@siemens/ix-react': minor
+'@siemens/ix': minor
+'@siemens/ix-vue': minor
+---
+
+Add `outline` and `filled` to **ix-event-list-item**

.changeset/twelve-pots-dress.md

@@ -0,0 +1,14 @@
+---
+'@siemens/ix-angular': major
+'@siemens/ix-aggrid': major
+'@siemens/ix-react': major
+'@siemens/ix': major
+'@siemens/ix-vue': major
+---
+
+Introduced new `variant` for **ix-flip-tile**
+
+BREAKING-CHANGES:
+
+- Rename `state`to `variant`
+- Rename `FlipTileState` to `FlipTileVariant` and renamed type member `none` to `outline`.

BREAKING_CHANGES/v4.md

@@ -31,3 +31,8 @@ Remove **outline** and **ghost** property. The properties are replaced 1:1 with
 ### ix-application
 
 - `min-width: 0` has been added to the content-area in `ix-application` to prevent the flex container from growing beyond the screen width. If you currently have implemented a workaround for this behavior your application's layout might be affected by this change.
+
+### ix-flip-tile
+
+- Rename property `state` to `variant`
+- Rename `FlipTileState` to `FlipTileVariant`

packages/angular-standalone-test-app/src/preview-examples/flip-tile.ts

@@ -33,7 +33,7 @@ import {
         <ix-flip-tile-content> Example 2 </ix-flip-tile-content>
       </ix-flip-tile>
 
-      <ix-flip-tile state="primary">
+      <ix-flip-tile variant="primary">
         <div slot="header">Flip header</div>
         <div slot="footer">
           <div>Predicted maintenance date</div>
@@ -45,7 +45,7 @@ import {
         <ix-flip-tile-content> Example 2 </ix-flip-tile-content>
       </ix-flip-tile>
 
-      <ix-flip-tile state="info">
+      <ix-flip-tile variant="info">
         <div slot="header">Flip header</div>
         <div slot="footer">
           <div>Predicted maintenance date</div>
@@ -57,7 +57,7 @@ import {
         <ix-flip-tile-content> Example 2 </ix-flip-tile-content>
       </ix-flip-tile>
 
-      <ix-flip-tile state="warning">
+      <ix-flip-tile variant="warning">
         <div slot="header">Flip header</div>
         <div slot="footer">
           <div>Predicted maintenance date</div>
@@ -69,7 +69,7 @@ import {
         <ix-flip-tile-content> Example 2 </ix-flip-tile-content>
       </ix-flip-tile>
 
-      <ix-flip-tile state="alarm">
+      <ix-flip-tile variant="alarm">
         <div slot="header">Flip header</div>
         <div slot="footer">
           <div>Predicted maintenance date</div>

packages/angular-test-app/src/preview-examples/flip-tile.ts

@@ -28,7 +28,7 @@ import { Component } from '@angular/core';
         <ix-flip-tile-content> Example 2 </ix-flip-tile-content>
       </ix-flip-tile>
 
-      <ix-flip-tile state="primary">
+      <ix-flip-tile variant="primary">
         <div slot="header">Flip header</div>
         <div slot="footer">
           <div>Predicted maintenance date</div>
@@ -40,7 +40,7 @@ import { Component } from '@angular/core';
         <ix-flip-tile-content> Example 2 </ix-flip-tile-content>
       </ix-flip-tile>
 
-      <ix-flip-tile state="info">
+      <ix-flip-tile variant="info">
         <div slot="header">Flip header</div>
         <div slot="footer">
           <div>Predicted maintenance date</div>
@@ -52,7 +52,7 @@ import { Component } from '@angular/core';
         <ix-flip-tile-content> Example 2 </ix-flip-tile-content>
       </ix-flip-tile>
 
-      <ix-flip-tile state="warning">
+      <ix-flip-tile variant="warning">
         <div slot="header">Flip header</div>
         <div slot="footer">
           <div>Predicted maintenance date</div>
@@ -64,7 +64,7 @@ import { Component } from '@angular/core';
         <ix-flip-tile-content> Example 2 </ix-flip-tile-content>
       </ix-flip-tile>
 
-      <ix-flip-tile state="alarm">
+      <ix-flip-tile variant="alarm">
         <div slot="header">Flip header</div>
         <div slot="footer">
           <div>Predicted maintenance date</div>

packages/angular/src/components.ts

@@ -269,14 +269,14 @@ export declare interface IxCard extends Components.IxCard {}
 
 
 @ProxyCmp({
-  inputs: ['ariaLabelExpandButton', 'collapse']
+  inputs: ['ariaLabelExpandButton', 'collapse', 'variant']
 })
 @Component({
   selector: 'ix-card-accordion',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['ariaLabelExpandButton', 'collapse'],
+  inputs: ['ariaLabelExpandButton', 'collapse', 'variant'],
   standalone: false
 })
 export class IxCardAccordion {
@@ -1015,14 +1015,14 @@ export declare interface IxEventList extends Components.IxEventList {}
 
 
 @ProxyCmp({
-  inputs: ['chevron', 'disabled', 'itemColor', 'selected']
+  inputs: ['chevron', 'disabled', 'itemColor', 'selected', 'variant']
 })
 @Component({
   selector: 'ix-event-list-item',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['chevron', 'disabled', 'itemColor', 'selected'],
+  inputs: ['chevron', 'disabled', 'itemColor', 'selected', 'variant'],
   outputs: ['itemClick'],
   standalone: false
 })
@@ -1128,14 +1128,14 @@ export declare interface IxFilterChip extends Components.IxFilterChip {
 
 
 @ProxyCmp({
-  inputs: ['ariaLabelEyeIconButton', 'height', 'index', 'state', 'width']
+  inputs: ['ariaLabelEyeIconButton', 'height', 'index', 'variant', 'width']
 })
 @Component({
   selector: 'ix-flip-tile',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['ariaLabelEyeIconButton', 'height', 'index', 'state', 'width'],
+  inputs: ['ariaLabelEyeIconButton', 'height', 'index', 'variant', 'width'],
   outputs: ['toggle'],
   standalone: false
 })

packages/angular/standalone/src/components.ts

@@ -373,14 +373,14 @@ export declare interface IxCard extends Components.IxCard {}
 
 @ProxyCmp({
   defineCustomElementFn: defineIxCardAccordion,
-  inputs: ['ariaLabelExpandButton', 'collapse']
+  inputs: ['ariaLabelExpandButton', 'collapse', 'variant']
 })
 @Component({
   selector: 'ix-card-accordion',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['ariaLabelExpandButton', 'collapse'],
+  inputs: ['ariaLabelExpandButton', 'collapse', 'variant'],
 })
 export class IxCardAccordion {
   protected el: HTMLIxCardAccordionElement;
@@ -1119,14 +1119,14 @@ export declare interface IxEventList extends Components.IxEventList {}
 
 @ProxyCmp({
   defineCustomElementFn: defineIxEventListItem,
-  inputs: ['chevron', 'disabled', 'itemColor', 'selected']
+  inputs: ['chevron', 'disabled', 'itemColor', 'selected', 'variant']
 })
 @Component({
   selector: 'ix-event-list-item',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['chevron', 'disabled', 'itemColor', 'selected'],
+  inputs: ['chevron', 'disabled', 'itemColor', 'selected', 'variant'],
   outputs: ['itemClick'],
 })
 export class IxEventListItem {
@@ -1232,14 +1232,14 @@ export declare interface IxFilterChip extends Components.IxFilterChip {
 
 @ProxyCmp({
   defineCustomElementFn: defineIxFlipTile,
-  inputs: ['ariaLabelEyeIconButton', 'height', 'index', 'state', 'width']
+  inputs: ['ariaLabelEyeIconButton', 'height', 'index', 'variant', 'width']
 })
 @Component({
   selector: 'ix-flip-tile',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['ariaLabelEyeIconButton', 'height', 'index', 'state', 'width'],
+  inputs: ['ariaLabelEyeIconButton', 'height', 'index', 'variant', 'width'],
   outputs: ['toggle'],
 })
 export class IxFlipTile {