@synergy-design-system/metadata 3.14.0 → 3.16.0

package/data/layers/examples/template/template:tag-group.md

@@ -3,7 +3,7 @@
 ```html
 <div>
   <form class="filter-form">
-    <h1>Capacitive proximity sensors</h1>
+    <h1 class="syn-heading--3x-large">Capacitive proximity sensors</h1>
 
     <syn-details size="small" summary="Hide filters" open="">
       <div class="filter-group">
@@ -132,10 +132,7 @@
     }
 
     .filter-form h1 {
-      color: var(--syn-typography-color-text);
-      font: var(--syn-heading-3x-large);
       margin: 0 0 var(--syn-spacing-2x-large);
-      padding: 0;
     }
 
     .filter-form syn-details::part(base) {
@@ -214,7 +211,7 @@
 ```html
 <div>
   <form class="filter-form">
-    <h1>Capacitive proximity sensors</h1>
+    <h1 class="syn-heading--3x-large">Capacitive proximity sensors</h1>
 
     <syn-details size="small" summary="Hide filters" open="">
       <div class="filter-group">
@@ -343,10 +340,7 @@
     }
 
     .filter-form h1 {
-      color: var(--syn-typography-color-text);
-      font: var(--syn-heading-3x-large);
       margin: 0 0 var(--syn-spacing-2x-large);
-      padding: 0;
     }
 
     .filter-form syn-details::part(base) {

package/data/layers/full/component/component:syn-card/components/card.component.ts

@@ -1,13 +1,13 @@
-/* eslint-disable */
+import {
+  type CSSResultGroup,
+  html,
+} from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { property } from 'lit/decorators.js';
 import { HasSlotController } from '../../internal/slot.js';
-import { html } from 'lit';
 import componentStyles from '../../styles/component.styles.js';
 import SynergyElement from '../../internal/synergy-element.js';
 import styles from './card.styles.js';
-import customStyles from './card.custom.styles.js';
-import type { CSSResultGroup } from 'lit';
 
 /**
  * @summary Cards can be used to group related subjects in a container.
@@ -32,15 +32,15 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --padding - The padding to use for the card's sections.
  */
 export default class SynCard extends SynergyElement {
-  static styles: CSSResultGroup = [componentStyles, styles, customStyles];
+  static styles: CSSResultGroup = [componentStyles, styles];
 
   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;
+  @property({ reflect: true, type: Boolean }) 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;
+  @property({ reflect: true, type: Boolean }) sharp = false;
 
   render() {
     return html`
@@ -48,11 +48,11 @@ 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-header': this.hasSlotController.test('header'),
           'card--has-image': this.hasSlotController.test('image'),
-          'card--has-header': this.hasSlotController.test('header')
+          'card--shadow': this.shadow,
+          'card--sharp': this.sharp,
         })}
       >
         <slot name="image" part="image" class="card__image"></slot>

package/data/layers/full/component/component:syn-card/components/card.styles.ts

@@ -1,30 +1,32 @@
-/* eslint-disable */
 import { css } from 'lit';
 
 export default css`
-	/* stylelint-disable */
   :host {
-    --border-color: var(--syn-color-neutral-200);
+    --border-color: var(--syn-panel-border-color);
+    --border-width: var(--syn-border-width-small);
     --border-radius: var(--syn-border-radius-medium);
-    --border-width: 1px;
     --padding: var(--syn-spacing-large);
 
     display: inline-block;
   }
 
   .card {
-    display: flex;
-    flex-direction: column;
     background-color: var(--syn-panel-background-color);
-    box-shadow: var(--syn-shadow-x-small);
     border: solid var(--border-width) var(--border-color);
     border-radius: var(--border-radius);
+    display: flex;
+    flex-direction: column;
+  }
+
+  /** #1107: Add shadow property to card */
+  .card--shadow {
+    box-shadow: var(--syn-shadow-small);
   }
 
   .card__image {
-    display: flex;
     border-top-left-radius: var(--border-radius);
     border-top-right-radius: var(--border-radius);
+    display: flex;
     margin: calc(-1 * var(--border-width));
     overflow: hidden;
   }
@@ -34,13 +36,30 @@ export default css`
     width: 100%;
   }
 
+  /**
+   * #1107: Sharp cards do not receive a border radius
+   */
+  .card--sharp {
+    border-radius: var(--syn-border-radius-none);
+  }
+
+  /**
+   * #1107: Do not apply border radius to sharp card images
+   */
+  .card--sharp .card__image {
+    border-top-left-radius: var(--syn-border-radius-none);
+    border-top-right-radius: var(--syn-border-radius-none);
+  }
+
   .card:not(.card--has-image) .card__image {
     display: none;
   }
 
   .card__header {
+    color: var(--syn-typography-color-text);
     display: block;
-    border-bottom: solid var(--border-width) var(--border-color);
+    font: var(--syn-heading-large);
+    line-height: var(--syn-line-height-normal);
     padding: calc(var(--padding) / 2) var(--padding);
   }
 
@@ -54,14 +73,15 @@ export default css`
   }
 
   .card__body {
+    color: var(--syn-typography-color-text);
     display: block;
+    font: var(--syn-body-medium-regular);
     padding: var(--padding);
   }
 
   .card--has-footer .card__footer {
     display: block;
-    border-top: solid var(--border-width) var(--border-color);
-    padding: var(--padding);
+    padding: var(--syn-spacing-x-small) var(--syn-spacing-large) var(--syn-spacing-large);
   }
 
   .card:not(.card--has-footer) .card__footer {

package/data/layers/full/component/component:syn-card/components/card.ts

@@ -1,4 +1,3 @@
-/* eslint-disable */
 import SynCard from './card.component.js';
 
 export * from './card.component.js';

package/data/layers/full/component/component:syn-dialog/components/dialog.styles.ts

@@ -54,12 +54,10 @@ export default css`
   }
 
   .dialog__title {
+    align-items: center;
+    display: flex;
     flex: 1 1 auto;
-    font: inherit;
-    font-family: var(--syn-font-sans);
-    font-size: var(--syn-font-size-x-large);
-    font-weight: var(--syn-font-weight-bold);
-    line-height: var(--syn-line-height-normal);
+    font: var(--syn-heading-x-large);
     margin: 0;
     padding: var(--header-spacing);
   }
@@ -74,15 +72,6 @@ export default css`
     padding: var(--syn-spacing-large) var(--syn-spacing-small) var(--syn-spacing-large) 0;
   }
 
-  /**
-   * We need this to make sure we are big enough as defined in the layout
-   * When omitting this statement, we will get rounding problems via line-height
-   */
-  .dialog__title,
-  .dialog__header-actions {
-    min-height: 88px;
-  }
-
   .dialog__header-actions syn-icon-button,
   .dialog__header-actions ::slotted(syn-icon-button) {
     align-items: center;

package/data/layers/full/component/component:syn-drawer/components/drawer.component.ts

@@ -17,7 +17,6 @@ import Modal from '../../internal/modal.js';
 import SynergyElement from '../../internal/synergy-element.js';
 import SynIconButton from '../icon-button/icon-button.component.js';
 import styles from './drawer.styles.js';
-import customStyles from './drawer.custom.styles.js';
 import type { CSSResultGroup } from 'lit';
 
 /**
@@ -78,7 +77,7 @@ import type { CSSResultGroup } from 'lit';
  *   the third-party modal opens. Upon closing, call `modal.deactivateExternal()` to restore Synergy's focus trapping.
  */
 export default class SynDrawer extends SynergyElement {
-  static styles: CSSResultGroup = [componentStyles, styles, customStyles];
+  static styles: CSSResultGroup = [componentStyles, styles];
   static dependencies = { 'syn-icon-button': SynIconButton };
 
   private readonly hasSlotController = new HasSlotController(this, 'footer');

package/data/layers/full/component/component:syn-drawer/components/drawer.styles.ts

@@ -1,24 +1,22 @@
-/* eslint-disable */
 import { css } from 'lit';
 
 export default css`
-	/* stylelint-disable */
   :host {
     --size: 25rem;
-    --header-spacing: var(--syn-spacing-large);
-    --body-spacing: var(--syn-spacing-large);
-    --footer-spacing: var(--syn-spacing-large);
+    --header-spacing: var(--syn-spacing-large) var(--syn-spacing-x-small) var(--syn-spacing-large) var(--syn-spacing-large);
+    --body-spacing: var(--syn-spacing-medium) var(--syn-spacing-large);
+    --footer-spacing: var(--syn-spacing-medium) var(--syn-spacing-large) var(--syn-spacing-large) var(--syn-spacing-medium);
 
     display: contents;
   }
 
   .drawer {
-    top: 0;
-    inset-inline-start: 0;
-    width: 100%;
     height: 100%;
-    pointer-events: none;
+    inset-inline-start: 0;
     overflow: hidden;
+    pointer-events: none;
+    top: 0;
+    width: 100%;
   }
 
   .drawer--contained {
@@ -32,16 +30,17 @@ export default css`
   }
 
   .drawer__panel {
-    position: absolute;
+    background-color: var(--syn-panel-background-color);
+    border: 0 solid var(--syn-panel-border-color);
+    color: var(--syn-color-neutral-950);
     display: flex;
     flex-direction: column;
-    z-index: 2;
-    max-width: 100%;
     max-height: 100%;
-    background-color: var(--syn-panel-background-color);
-    box-shadow: var(--syn-shadow-x-large);
+    max-width: 100%;
     overflow: auto;
     pointer-events: all;
+    position: absolute;
+    z-index: 2;
   }
 
   .drawer__panel:focus {
@@ -49,39 +48,39 @@ export default css`
   }
 
   .drawer--top .drawer__panel {
-    top: 0;
-    inset-inline-end: auto;
+    border-bottom-width: var(--syn-border-width-small);
     bottom: auto;
-    inset-inline-start: 0;
-    width: 100%;
     height: var(--size);
+    inset-inline: 0 auto;
+    top: 0;
+    width: 100%;
   }
 
   .drawer--end .drawer__panel {
-    top: 0;
-    inset-inline-end: 0;
+    border-left-width: var(--syn-border-width-small);
     bottom: auto;
-    inset-inline-start: auto;
-    width: var(--size);
     height: 100%;
+    inset-inline: auto 0;
+    top: 0;
+    width: var(--size);
   }
 
   .drawer--bottom .drawer__panel {
-    top: auto;
-    inset-inline-end: auto;
+    border-top-width: var(--syn-border-width-small);
     bottom: 0;
-    inset-inline-start: 0;
-    width: 100%;
     height: var(--size);
+    inset-inline: 0 auto;
+    top: auto;
+    width: 100%;
   }
 
   .drawer--start .drawer__panel {
-    top: 0;
-    inset-inline-end: auto;
+    border-right-width: var(--syn-border-width-small);
     bottom: auto;
-    inset-inline-start: 0;
-    width: var(--size);
     height: 100%;
+    inset-inline: 0 auto;
+    top: 0;
+    width: var(--size);
   }
 
   .drawer__header {
@@ -89,42 +88,44 @@ export default css`
   }
 
   .drawer__title {
+    align-items: center;
+    display: flex;
     flex: 1 1 auto;
-    font: inherit;
-    font-size: var(--syn-font-size-large);
-    line-height: var(--syn-line-height-dense);
-    padding: var(--header-spacing);
+    font: var(--syn-heading-x-large);
     margin: 0;
+    padding: var(--header-spacing);
   }
 
   .drawer__header-actions {
-    flex-shrink: 0;
+    align-items: flex-start;
     display: flex;
+    flex-shrink: 0;
     flex-wrap: wrap;
+    gap: var(--syn-spacing-x-small);
     justify-content: end;
-    gap: var(--syn-spacing-2x-small);
-    padding: 0 var(--header-spacing);
+    padding: var(--syn-spacing-large) var(--syn-spacing-small) var(--syn-spacing-large) 0;
   }
 
   .drawer__header-actions syn-icon-button,
   .drawer__header-actions ::slotted(syn-icon-button) {
-    flex: 0 0 auto;
-    display: flex;
     align-items: center;
-    font-size: var(--syn-font-size-medium);
+    color: var(--syn-color-neutral-950);
+    display: flex;
+    flex: 0 0 auto;
+    font-size: var(--syn-font-size-x-large);
   }
 
   .drawer__body {
-    flex: 1 1 auto;
     display: block;
-    padding: var(--body-spacing);
+    flex: 1 1 auto;
     overflow: auto;
     -webkit-overflow-scrolling: touch;
+    padding: var(--body-spacing);
   }
 
   .drawer__footer {
-    text-align: right;
     padding: var(--footer-spacing);
+    text-align: right;
   }
 
   .drawer__footer ::slotted(syn-button:not(:last-of-type)) {
@@ -136,14 +137,11 @@ export default css`
   }
 
   .drawer__overlay {
-    display: block;
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
     background-color: var(--syn-overlay-background-color);
+    display: block;
+    inset: 0;
     pointer-events: all;
+    position: fixed;
   }
 
   .drawer--contained .drawer__overlay {

package/data/layers/full/component/component:syn-header/components/header.styles.ts

@@ -65,7 +65,7 @@ export default css`
    */
   .header__label {
     color: var(--syn-typography-color-text);
-    font: var(--syn-body-large-bold);
+    font: var(--syn-heading-large);
     padding: 0 var(--syn-spacing-2x-large);
     white-space: nowrap;
   }

package/data/layers/full/setup/setup:angular-package/angular/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @synergy-design-system/angular
 
+## 3.15.6
+
+### Patch Changes
+
+- Updated dependencies [[`77a02c1`](https://github.com/synergy-design-system/synergy-design-system/commit/77a02c15b4d9310dbb24ea945629c83a7a2e4e16)]:
+  - @synergy-design-system/components@3.15.6
+  - @synergy-design-system/tokens@3.15.6
+
 ## 3.15.5
 
 ### Patch Changes

package/data/layers/full/setup/setup:angular-package/angular/package.json

@@ -22,7 +22,7 @@
     "url": "https://github.com/synergy-design-system/synergy-design-system.git",
     "directory": "packages/angular"
   },
-  "version": "3.15.5",
+  "version": "3.15.6",
   "scripts": {
     "_build": "pnpm _clean && ng-packagr -c tsconfig.lib.json && pnpm _after-build",
     "_clean": "rm -rf ../_private/angular-demo/.angular",

package/data/layers/full/setup/setup:components-package/components/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## 3.15.6
+
+### Patch Changes
+
+- [#1302](https://github.com/synergy-design-system/synergy-design-system/pull/1302) [`77a02c1`](https://github.com/synergy-design-system/synergy-design-system/commit/77a02c15b4d9310dbb24ea945629c83a7a2e4e16) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-06-22
+
+  fix: 🐛 Components should use correct headline styles ([#1290](https://github.com/synergy-design-system/synergy-design-system/issues/1290))
+
+  This release fixes multiple typographic issues for headers in the following components:
+  - `<syn-card>`
+  - `<syn-dialog>`
+  - `<syn-drawer>`
+  - `<syn-header>`
+
+- Updated dependencies []:
+  - @synergy-design-system/tokens@3.15.6
+
 ## 3.15.5
 
 ### Patch Changes

package/data/layers/full/setup/setup:components-package/components/package.json

@@ -4,7 +4,7 @@
     "url": "https://www.sick.com"
   },
   "name": "@synergy-design-system/components",
-  "version": "3.15.5",
+  "version": "3.15.6",
   "description": "",
   "repository": {
     "type": "git",

package/data/layers/full/setup/setup:react-package/react/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @synergy-design-system/react
 
+## 3.15.6
+
+### Patch Changes
+
+- Updated dependencies [[`77a02c1`](https://github.com/synergy-design-system/synergy-design-system/commit/77a02c15b4d9310dbb24ea945629c83a7a2e4e16)]:
+  - @synergy-design-system/components@3.15.6
+  - @synergy-design-system/tokens@3.15.6
+
 ## 3.15.5
 
 ### Patch Changes

package/data/layers/full/setup/setup:react-package/react/package.json

@@ -43,7 +43,7 @@
     "directory": "packages/react"
   },
   "type": "module",
-  "version": "3.15.5",
+  "version": "3.15.6",
   "devDependencies": {
     "@types/react": "^19.2.16",
     "react": "^19.2.7"

package/data/layers/full/setup/setup:tokens-package/tokens/CHANGELOG.md

@@ -1,5 +1,7 @@
 # Changelog
 
+## 3.15.6
+
 ## 3.15.5
 
 ## 3.15.4

package/data/layers/full/setup/setup:tokens-package/tokens/package.json

@@ -82,5 +82,5 @@
   },
   "type": "module",
   "types": "./dist/js/index.d.ts",
-  "version": "3.15.5"
+  "version": "3.15.6"
 }

package/data/layers/full/setup/setup:vue-package/vue/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @synergy-design-system/vue
 
+## 3.15.6
+
+### Patch Changes
+
+- Updated dependencies [[`77a02c1`](https://github.com/synergy-design-system/synergy-design-system/commit/77a02c15b4d9310dbb24ea945629c83a7a2e4e16)]:
+  - @synergy-design-system/components@3.15.6
+  - @synergy-design-system/tokens@3.15.6
+
 ## 3.15.5
 
 ### Patch Changes

package/data/layers/full/setup/setup:vue-package/vue/package.json

@@ -50,7 +50,7 @@
     "directory": "packages/vue"
   },
   "type": "module",
-  "version": "3.15.5",
+  "version": "3.15.6",
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.7",
     "@vue/tsconfig": "^0.9.1",

package/data/layers/full/tokens/charts/js/index.d.ts

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.15.5
+ * @synergy-design-system/tokens version 3.15.6
  * SICK Global UX Foundation
  */
 

package/data/layers/full/tokens/charts/js/index.js

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.15.5
+ * @synergy-design-system/tokens version 3.15.6
  * SICK Global UX Foundation
  */
 

package/data/layers/full/tokens/charts/scss/_tokens.scss

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.15.5
+ * @synergy-design-system/tokens version 3.15.6
  * SICK Global UX Foundation
  */
 $SynCategorical10: var(--syn-categorical-10) !default;

package/data/layers/full/tokens/charts/themes/sick2025_dark.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.15.5
+ * @synergy-design-system/tokens version 3.15.6
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */

package/data/layers/full/tokens/charts/themes/sick2025_light.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.15.5
+ * @synergy-design-system/tokens version 3.15.6
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */

package/data/layers/full/tokens/js/index.d.ts

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.15.5
+ * @synergy-design-system/tokens version 3.15.6
  * SICK Global UX Foundation
  */
 

package/data/layers/full/tokens/js/index.js

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.15.5
+ * @synergy-design-system/tokens version 3.15.6
  * SICK Global UX Foundation
  */
 

package/data/layers/full/tokens/scss/_tokens.scss

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.15.5
+ * @synergy-design-system/tokens version 3.15.6
  * SICK Global UX Foundation
  */
 $SynAlertErrorColorBackground: var(--syn-alert-error-color-background) !default;

package/data/layers/full/tokens/themes/sick2018_dark.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.15.5
+ * @synergy-design-system/tokens version 3.15.6
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */

package/data/layers/full/tokens/themes/sick2018_light.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.15.5
+ * @synergy-design-system/tokens version 3.15.6
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */

package/data/layers/full/tokens/themes/sick2025_dark.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.15.5
+ * @synergy-design-system/tokens version 3.15.6
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */

package/data/layers/full/tokens/themes/sick2025_light.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.15.5
+ * @synergy-design-system/tokens version 3.15.6
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */

package/data/manifest.json

@@ -1,5 +1,5 @@
 {
-  "builtAt": "2026-06-16T06:12:15.594Z",
+  "builtAt": "2026-06-22T13:06:16.662Z",
   "sources": [
     {
       "entityCount": 4,