@synergy-design-system/mcp 1.35.0 → 1.36.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 1.36.0
+
+### Minor Changes
+
+- [#1128](https://github.com/synergy-design-system/synergy-design-system/pull/1128) [`7de2441`](https://github.com/synergy-design-system/synergy-design-system/commit/7de244110cf55bb3788e26f65704194bfc861412) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2025-12-09
+
+  feat: ✨ Add a new `shadow` propertry to `<syn-card>` (#1107)
+
+  Using `<syn-card shadow></syn-card>` will draw the card with a shadow. This can be used when the card has to stand out visually, for example in dashboards.
+
 ## 1.35.0
 
 ### Minor Changes

package/metadata/checksum.txt

@@ -1 +1 @@
-f0be49088f738fe51076f80ae4139437
+0faf5c48a9a48492eff9c2d0f5607fa0

package/metadata/packages/components/components/syn-card/component.angular.ts

@@ -52,6 +52,20 @@ export class SynCardComponent {
     this._ngZone = ngZone;
   }
 
+  /**
+   * Draws the card with a shadow.
+   * Can be used when the card has to stand out visually, for example in dashboards.
+   */
+  @Input()
+  set shadow(v: '' | SynCard['shadow']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.shadow = v === '' || v),
+    );
+  }
+  get shadow(): SynCard['shadow'] {
+    return this.nativeElement.shadow;
+  }
+
   /**
    * Draws the card with sharp edges.
    * Can be used e.g.

package/metadata/packages/components/components/syn-card/component.custom.styles.ts

@@ -11,6 +11,11 @@ export default css`
     box-shadow: none;
   }
 
+  /** #1107: Add shadow property to card */
+  .card--shadow {
+    box-shadow: var(--syn-shadow-small);
+  }
+
   /**
    * Header adjustments
    */

package/metadata/packages/components/components/syn-card/component.ts

@@ -43,6 +43,9 @@ export default class SynCard extends SynergyElement {
 
   private readonly hasSlotController = new HasSlotController(this, 'footer', 'header', 'image');
 
+  /** Draws the card with a shadow. Can be used when the card has to stand out visually, for example in dashboards. */
+  @property({ type: Boolean, reflect: true }) shadow = false;
+
   /** Draws the card with sharp edges. Can be used e.g. when nesting multiple syn-cards to create hierarchy. */
   @property({ type: Boolean, reflect: true }) sharp = false;
 
@@ -52,6 +55,7 @@ export default class SynCard extends SynergyElement {
         part="base"
         class=${classMap({
           card: true,
+          'card--shadow': this.shadow,
           'card--sharp': this.sharp,
           'card--has-footer': this.hasSlotController.test('footer'),
           'card--has-image': this.hasSlotController.test('image'),

package/metadata/packages/components/components/syn-card/component.vue

@@ -41,6 +41,12 @@ defineExpose({
 
 // Map attributes
 const props = defineProps<{
+  /**
+   * Draws the card with a shadow.
+   * Can be used when the card has to stand out visually, for example in dashboards.
+   */
+  shadow?: SynCard['shadow'];
+
   /**
    * Draws the card with sharp edges.
    * Can be used e.g.

package/metadata/packages/components/static/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 2.72.0
+
+### Minor Changes
+
+- [#1128](https://github.com/synergy-design-system/synergy-design-system/pull/1128) [`7de2441`](https://github.com/synergy-design-system/synergy-design-system/commit/7de244110cf55bb3788e26f65704194bfc861412) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2025-12-09
+
+  feat: ✨ Add a new `shadow` propertry to `<syn-card>` (#1107)
+
+  Using `<syn-card shadow></syn-card>` will draw the card with a shadow. This can be used when the card has to stand out visually, for example in dashboards.
+
 ## 2.71.0
 
 ### Minor Changes

package/metadata/static/components/syn-card/docs.md

@@ -271,3 +271,44 @@ Use the sharp variant attribute for the Card to Use a different style.
   }
 </style>
 ```
+
+---
+
+## Card With Shadow
+
+Use the shadow attribute to add a shadow.
+
+```html
+<div class="shadow-card-wrapper">
+  <syn-card shadow="">
+    <img
+      slot="image"
+      src="https://synergy-design-system.github.io/card-example.jpg"
+      alt="Multiple persons having lunch in SICK Academy"
+    />
+    These are some happy employees, but not just any employees. These are SICK
+    employees.
+  </syn-card>
+  <syn-card shadow="" sharp="">
+    <img
+      slot="image"
+      src="https://synergy-design-system.github.io/card-example.jpg"
+      alt="Multiple persons having lunch in SICK Academy"
+    />
+    These are some happy employees, but not just any employees. These are SICK
+    employees.
+  </syn-card>
+</div>
+
+<style>
+  .shadow-card-wrapper {
+    display: flex;
+    flex-direction: row;
+    gap: var(--syn-spacing-large);
+  }
+
+  .shadow-card-wrapper syn-card {
+    max-width: 400px;
+  }
+</style>
+```

package/package.json

@@ -28,12 +28,12 @@
     "serve-handler": "^6.1.6",
     "ts-jest": "^29.4.0",
     "typescript": "^5.9.3",
-    "@synergy-design-system/components": "2.71.0",
+    "@synergy-design-system/components": "2.72.0",
     "@synergy-design-system/docs": "0.1.0",
-    "@synergy-design-system/eslint-config-syn": "^0.1.0",
+    "@synergy-design-system/fonts": "1.0.0",
     "@synergy-design-system/styles": "1.9.0",
-    "@synergy-design-system/tokens": "^2.45.0",
-    "@synergy-design-system/fonts": "1.0.0"
+    "@synergy-design-system/eslint-config-syn": "^0.1.0",
+    "@synergy-design-system/tokens": "^2.45.0"
   },
   "exports": {
     ".": {
@@ -67,7 +67,7 @@
     "directory": "packages/mcp"
   },
   "type": "module",
-  "version": "1.35.0",
+  "version": "1.36.0",
   "scripts": {
     "build": "pnpm run build:ts && pnpm run build:metadata && pnpm build:hash",
     "build:all": "pnpm run build && pnpm run build:storybook",