@synergy-design-system/mcp 2.8.2 → 2.9.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 2.9.0
+
+### Minor Changes
+
+- [#1193](https://github.com/synergy-design-system/synergy-design-system/pull/1193) [`c7f6a8b`](https://github.com/synergy-design-system/synergy-design-system/commit/c7f6a8bc8ed2eb76c5f9510c1d499f6feca5d302) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-03-06
+
+  feat: ✨ Add new component `<syn-tag-group>` (#1152)
+
+  Adds a new component `<syn-tag-group>`, including templates how to use this component.
+
 ## 2.8.2
 
 ### Patch Changes

package/metadata/checksum.txt

@@ -1 +1 @@
-5682e415ee9342f4cf05aadd3e23b010
+9b61dd848d186c06c6cdfc4646c64d6f

package/metadata/packages/components/components/syn-tag-group/component.angular.ts

@@ -0,0 +1,83 @@
+// ---------------------------------------------------------------------
+// 🔒 AUTOGENERATED @synergy-design-system/angular wrappers for @synergy-design-system/components
+// Please do not edit this file directly!
+// It will get recreated when running pnpm build.
+// ---------------------------------------------------------------------
+import {
+  Component,
+  ElementRef,
+  NgZone,
+  Input,
+  Output,
+  EventEmitter,
+  AfterContentInit,
+} from '@angular/core';
+import type { SynTagGroup } from '@synergy-design-system/components';
+
+import '@synergy-design-system/components/components/tag-group/tag-group.js';
+
+/**
+ * @summary A tag group is used to display multiple tags that belong together, often representing selected filters, categories, or user‑generated labels.
+ * It arranges tags in flexible rows and supports different sizes and layouts.
+ * Tags can be removable, icon‑based, or purely textual.
+ *
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tag-group--docs
+ * @status stable
+ *
+ * @slot - The tag group's main content. Must be `<syn-tag />` elements.
+ * @slot label - The tag group's label. Alternatively, you can use the `label` attribute.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart tag-label - The tag group's label.
+ */
+@Component({
+  selector: 'syn-tag-group',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+})
+export class SynTagGroupComponent {
+  public nativeElement: SynTagGroup;
+  private _ngZone: NgZone;
+
+  constructor(e: ElementRef, ngZone: NgZone) {
+    this.nativeElement = e.nativeElement;
+    this._ngZone = ngZone;
+  }
+
+  /**
+   * The tag group's label.
+   * If you need to display HTML, use the `label` slot instead.
+   */
+  @Input()
+  set label(v: SynTagGroup['label']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.label = v));
+  }
+  get label(): SynTagGroup['label'] {
+    return this.nativeElement.label;
+  }
+
+  /**
+   * Controls the label position.
+   * Use 'top' to place the label above the tags, or 'start' to place it to the begin of the tag group.
+   */
+  @Input()
+  set labelPosition(v: SynTagGroup['labelPosition']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.labelPosition = v),
+    );
+  }
+  get labelPosition(): SynTagGroup['labelPosition'] {
+    return this.nativeElement.labelPosition;
+  }
+
+  /**
+   * The size that should be applied to all slotted `<syn-tag>` elements
+   */
+  @Input()
+  set size(v: SynTagGroup['size']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.size = v));
+  }
+  get size(): SynTagGroup['size'] {
+    return this.nativeElement.size;
+  }
+}

package/metadata/packages/components/components/syn-tag-group/component.react.ts

@@ -0,0 +1,33 @@
+// ---------------------------------------------------------------------
+// 🔒 AUTOGENERATED @synergy-design-system/react wrappers for @synergy-design-system/components
+// Please do not edit this file directly!
+// It will get recreated when running pnpm build.
+// ---------------------------------------------------------------------
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '@synergy-design-system/components/components/tag-group/tag-group.component.js';
+
+const tagName = 'syn-tag-group';
+Component.define('syn-tag-group');
+
+/**
+ * @summary A tag group is used to display multiple tags that belong together, often representing selected filters, categories, or user‑generated labels.
+ * It arranges tags in flexible rows and supports different sizes and layouts.
+ * Tags can be removable, icon‑based, or purely textual.
+ *
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tag-group--docs
+ * @status stable
+ *
+ * @slot - The tag group's main content. Must be `<syn-tag />` elements.
+ * @slot label - The tag group's label. Alternatively, you can use the `label` attribute.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart tag-label - The tag group's label.
+ */
+export const SynTagGroup = createComponent({
+  displayName: 'SynTagGroup',
+  elementClass: Component,
+  events: {},
+  react: React,
+  tagName,
+});

package/metadata/packages/components/components/syn-tag-group/component.styles.ts

@@ -0,0 +1,49 @@
+import { css } from 'lit';
+
+export default css`
+  :host {
+    --tag-group-item-gap: var(--syn-spacing-x-small);
+    --tag-group-label-gap: var(--syn-spacing-x-small);
+    --tag-group-label-font: var(--syn-body-medium-semibold);
+
+    display: block;
+  }
+
+  .tag-group {
+    align-items: anchor-center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--tag-group-item-gap);
+  }
+
+  /* Label Styles */
+  .tag-group__label {
+    color: var(--syn-input-label-color);
+    display: block;
+    font: var(--tag-group-label-font);
+  }
+
+  .tag-group--top .tag-group__label {
+    /**
+     * When calculating the margin-bottom, we have to take the gap of .tag-group into account.
+     * We dont want to remove the row-gap above, as otherwise the gap between multi line tags would be 0.
+     * By subtracting the row-gap from the label gap, we ensure that the distance between the label and the first row of tags is consistent.
+     */
+    margin-bottom: calc(var(--tag-group-label-gap) - var(--syn-spacing-2x-small));
+    order: -1;  
+    width: 100%;  
+  }
+
+  /* Size Modifiers */
+  .tag-group--small {
+    --tag-group-item-gap: var(--syn-spacing-2x-small);
+    --tag-group-label-gap: var(--syn-spacing-x-small);
+    --tag-group-label-font: var(--syn-body-small-semibold);
+  }
+
+  .tag-group--large {
+    --tag-group-item-gap: var(--syn-spacing-small);
+    --tag-group-label-gap: var(--syn-spacing-x-small);
+    --tag-group-label-font: var(--syn-body-large-semibold);
+  }
+`;

package/metadata/packages/components/components/syn-tag-group/component.ts

@@ -0,0 +1,95 @@
+import { html } from 'lit';
+import { property, queryAssignedElements } from 'lit/decorators.js';
+import type { CSSResultGroup } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { HasSlotController } from '../../internal/slot.js';
+import SynergyElement from '../../internal/synergy-element.js';
+import { watch } from '../../internal/watch.js';
+import componentStyles from '../../styles/component.styles.js';
+import styles from './tag-group.styles.js';
+import type SynTag from '../tag/tag.component.js';
+import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';
+
+/**
+ * @summary A tag group is used to display multiple tags that belong together, often representing selected filters, categories, or user‑generated labels.
+ * It arranges tags in flexible rows and supports different sizes and layouts.
+ * Tags can be removable, icon‑based, or purely textual.
+ *
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tag-group--docs
+ * @status stable
+ *
+ * @slot - The tag group's main content. Must be `<syn-tag />` elements.
+ * @slot label - The tag group's label. Alternatively, you can use the `label` attribute.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart tag-label - The tag group's label.
+ */
+@enableDefaultSettings('SynTagGroup')
+export default class SynTagGroup extends SynergyElement {
+  static styles: CSSResultGroup = [
+    componentStyles,
+    styles,
+  ];
+
+  @queryAssignedElements({ selector: 'syn-tag' }) tagsInDefaultSlot!: SynTag[];
+
+  private readonly hasSlotController = new HasSlotController(this, 'label');
+
+  /** The tag group's label. If you need to display HTML, use the `label` slot instead. */
+  @property() label = '';
+
+  /**
+   * Controls the label position. Use 'top' to place the label above the tags, or 'start' to place it to the begin of the tag group.
+   */
+  @property({ attribute: 'label-position', reflect: true }) labelPosition: 'top' | 'start' = 'top';
+
+  /** The size that should be applied to all slotted `<syn-tag>` elements */
+  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
+
+  private adjustTagSize() {
+    this.tagsInDefaultSlot.forEach(tag => {
+      tag.setAttribute('size', this.size);
+    });
+  }
+
+  @watch('size', { waitUntilFirstUpdate: true })
+  handleSizeChange() {
+    this.adjustTagSize();
+  }
+
+  handleSlotChange() {
+    this.adjustTagSize();
+  }
+
+  render() {
+    const hasLabelSlot = this.hasSlotController.test('label');
+    const hasLabel = this.label ? true : !!hasLabelSlot;
+
+    /* eslint-disable @typescript-eslint/unbound-method */
+    return html`
+      <div 
+        part="base"
+        class=${classMap({
+          'tag-group': true,
+          'tag-group--large': this.size === 'large',
+          'tag-group--medium': this.size === 'medium',
+          'tag-group--small': this.size === 'small',
+          'tag-group--start': this.labelPosition === 'start',
+          'tag-group--top': this.labelPosition === 'top',
+        })}
+      >
+
+        <span
+            part="tag-label"
+            class="tag-group__label"
+            aria-hidden=${hasLabel ? 'false' : 'true'}
+          >
+            <slot name="label">${this.label}</slot>
+        </span>
+
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    `;
+    /* eslint-enable @typescript-eslint/unbound-method */
+  }
+}

package/metadata/packages/components/components/syn-tag-group/component.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+// ---------------------------------------------------------------------
+// 🔒 AUTOGENERATED @synergy-design-system/vue wrappers for @synergy-design-system/components
+// Please do not edit this file directly!
+// It will get recreated when running pnpm build.
+// ---------------------------------------------------------------------
+
+/**
+ * @summary A tag group is used to display multiple tags that belong together, often representing selected filters, categories, or user‑generated labels.
+ * It arranges tags in flexible rows and supports different sizes and layouts.
+ * Tags can be removable, icon‑based, or purely textual.
+ *
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tag-group--docs
+ * @status stable
+ *
+ * @slot - The tag group's main content. Must be `<syn-tag />` elements.
+ * @slot label - The tag group's label. Alternatively, you can use the `label` attribute.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart tag-label - The tag group's label.
+ */
+import { computed, ref } from 'vue';
+import '@synergy-design-system/components/components/tag-group/tag-group.js';
+
+import type { SynTagGroup } from '@synergy-design-system/components';
+
+// DOM Reference to the element
+const nativeElement = ref<SynTagGroup>();
+
+defineExpose({
+  nativeElement,
+});
+
+// Map attributes
+const props = defineProps<{
+  /**
+   * The tag group's label.
+   * If you need to display HTML, use the `label` slot instead.
+   */
+  label?: SynTagGroup['label'];
+
+  /**
+   * Controls the label position.
+   * Use 'top' to place the label above the tags, or 'start' to place it to the begin of the tag group.
+   */
+  labelPosition?: SynTagGroup['labelPosition'];
+
+  /**
+   * The size that should be applied to all slotted `<syn-tag>` elements
+   */
+  size?: SynTagGroup['size'];
+}>();
+
+// Make sure prop binding only forwards the props that are actually there.
+// This is needed because :param="param" also adds an empty attribute
+// when using web-components, which breaks optional arguments like size in SynInput
+// @see https://github.com/vuejs/core/issues/5190#issuecomment-1003112498
+const visibleProps = computed(() =>
+  Object.fromEntries(
+    Object.entries(props).filter(([, value]) => typeof value !== 'undefined'),
+  ),
+);
+</script>
+
+<template>
+  <syn-tag-group v-bind="visibleProps" ref="nativeElement">
+    <slot></slot>
+  </syn-tag-group>
+</template>

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

@@ -1,5 +1,20 @@
 # Changelog
 
+## 3.7.0
+
+### Minor Changes
+
+- [#1193](https://github.com/synergy-design-system/synergy-design-system/pull/1193) [`c7f6a8b`](https://github.com/synergy-design-system/synergy-design-system/commit/c7f6a8bc8ed2eb76c5f9510c1d499f6feca5d302) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-03-06
+
+  feat: ✨ Add new component `<syn-tag-group>` (#1152)
+
+  Adds a new component `<syn-tag-group>`, including templates how to use this component.
+
+### Patch Changes
+
+- Updated dependencies [[`c7f6a8b`](https://github.com/synergy-design-system/synergy-design-system/commit/c7f6a8bc8ed2eb76c5f9510c1d499f6feca5d302)]:
+  - @synergy-design-system/tokens@3.7.0
+
 ## 3.6.2
 
 ### Patch Changes

package/metadata/packages/tokens/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 3.7.0
+
+### Minor Changes
+
+- [#1193](https://github.com/synergy-design-system/synergy-design-system/pull/1193) [`c7f6a8b`](https://github.com/synergy-design-system/synergy-design-system/commit/c7f6a8bc8ed2eb76c5f9510c1d499f6feca5d302) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-03-06
+
+  feat: ✨ Add new component `<syn-tag-group>` (#1152)
+
+  Adds a new component `<syn-tag-group>`, including templates how to use this component.
+
 ## 3.6.2
 
 ## 3.6.1

package/metadata/packages/tokens/dark.css

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

package/metadata/packages/tokens/index.js

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

package/metadata/packages/tokens/light.css

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

package/metadata/packages/tokens/sick2018_dark.css

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

package/metadata/packages/tokens/sick2018_light.css

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

package/metadata/packages/tokens/sick2025_dark.css

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

package/metadata/packages/tokens/sick2025_light.css

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