@synergy-design-system/mcp 2.0.0 → 2.2.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # Changelog
 
+## 2.2.0
+
+### Minor Changes
+
+- [#1169](https://github.com/synergy-design-system/synergy-design-system/pull/1169) [`aefb7a8`](https://github.com/synergy-design-system/synergy-design-system/commit/aefb7a8c4c9860f6222d7054a6f044b2ed0c49a6) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-02-02
+
+  chore: 🔧 remove vendorism from components package (#1168)
+
+  The custom vendoring process is not needed anymore. Because of this, it was removed and all comments and builds now only rely on `pnpm build`
+
+## 2.1.0
+
+### Minor Changes
+
+- [#1141](https://github.com/synergy-design-system/synergy-design-system/pull/1141) [`96dff2e`](https://github.com/synergy-design-system/synergy-design-system/commit/96dff2ebb47cee901f72773664ee864db5653219) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-02-02
+
+  feat: ✨ `<syn-button-group>` (#392)
+
+  We added a new component `<syn-button-group>` that you can use to group a list of buttons.
+
+  It will automatically apply its `size` and `variant` properties to all nested buttons.
+
 ## 2.0.0
 
 ### Major Changes

package/metadata/checksum.txt

@@ -1 +1 @@
-4aab87d96fe9d7ab7eb036cc0efc6049
+3007b6dfa99e8c9fc41b50602aa8e10e

package/metadata/packages/components/components/syn-alert/component.styles.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { css } from 'lit';
 

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

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { animateTo, stopAnimations } from '../../internal/animate.js';
 import { blurActiveElement } from '../../internal/closeActiveElement.js';

package/metadata/packages/components/components/syn-badge/component.styles.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { css } from 'lit';
 

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

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { classMap } from 'lit/directives/class-map.js';
 import { html } from 'lit';

package/metadata/packages/components/components/syn-breadcrumb/component.styles.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { css } from 'lit';
 

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

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { html } from 'lit';
 import { LocalizeController } from '../../utilities/localize.js';

package/metadata/packages/components/components/syn-breadcrumb-item/component.styles.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { css } from 'lit';
 

package/metadata/packages/components/components/syn-breadcrumb-item/component.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { classMap } from 'lit/directives/class-map.js';
 import { HasSlotController } from '../../internal/slot.js';

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

@@ -228,4 +228,18 @@ export default css`
   .button--caret.button--large .button__caret{
     font-size: var(--syn-font-size-2x-large);
   }
+
+  /* #392: Button Groups */
+  :host([data-syn-button-group__button--inner]) .button--filled.button {
+    border-left-color: var(--syn-panel-background-color);
+    border-right-color: var(--syn-panel-background-color);
+  }
+
+  :host([data-syn-button-group__button--first]:not([data-syn-button-group__button--last])) .button--filled.button {
+    border-right-color: var(--syn-panel-background-color);
+  }
+
+  :host([data-syn-button-group__button--last]:not([data-syn-button-group__button--first])) .button--filled.button {
+    border-left-color: var(--syn-panel-background-color);
+  }
 `;

package/metadata/packages/components/components/syn-button/component.styles.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { css } from 'lit';
 

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

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { classMap } from 'lit/directives/class-map.js';
 import { FormControlController, validValidityState } from '../../internal/form.js';

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

@@ -52,4 +52,28 @@ devices when interacting with the control and is strongly recommended.
   get label(): SynButtonGroup['label'] {
     return this.nativeElement.label;
   }
+
+  /**
+   * The button-groups size.
+   * This affects all buttons within the group.
+   */
+  @Input()
+  set size(v: SynButtonGroup['size']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.size = v));
+  }
+  get size(): SynButtonGroup['size'] {
+    return this.nativeElement.size;
+  }
+
+  /**
+   * The button-group's theme variant.
+   * This affects all buttons within the group.
+   */
+  @Input()
+  set variant(v: SynButtonGroup['variant']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.variant = v));
+  }
+  get variant(): SynButtonGroup['variant'] {
+    return this.nativeElement.variant;
+  }
 }

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

@@ -0,0 +1,5 @@
+import { css } from 'lit';
+
+export default css`
+  /* Write custom CSS here */
+`;

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

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { css } from 'lit';
 

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

@@ -1,17 +1,14 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { html } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import componentStyles from '../../styles/component.styles.js';
 import SynergyElement from '../../internal/synergy-element.js';
 import styles from './button-group.styles.js';
+import customStyles from './button-group.custom.styles.js';
 import type { CSSResultGroup } from 'lit';
+import type SynButton from '../button/button.component.js';
+import type SynRadioButton from '../radio-button/radio-button.component.js';
+import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';
 
 /**
  * @summary Button groups can be used to group related buttons into sections.
@@ -23,8 +20,9 @@ import type { CSSResultGroup } from 'lit';
  *
  * @csspart base - The component's base wrapper.
  */
+@enableDefaultSettings('SynButtonGroup')
 export default class SynButtonGroup extends SynergyElement {
-  static styles: CSSResultGroup = [componentStyles, styles];
+  static styles: CSSResultGroup = [componentStyles, styles, customStyles];
 
   @query('slot') defaultSlot: HTMLSlotElement;
 
@@ -36,6 +34,14 @@ export default class SynButtonGroup extends SynergyElement {
    */
   @property() label = '';
 
+  /** The button-groups size. This affects all buttons within the group. */
+  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
+
+  /** The button-group's theme variant. This affects all buttons within the group. */
+  @property({ reflect: true }) variant: 'filled' | 'outline' = 'outline';
+
+  private mutationObserver: MutationObserver;
+
   private handleFocus(event: Event) {
     const button = findButton(event.target as HTMLElement);
     button?.toggleAttribute('data-syn-button-group__button--focus', true);
@@ -61,9 +67,15 @@ export default class SynButtonGroup extends SynergyElement {
 
     slottedElements.forEach(el => {
       const index = slottedElements.indexOf(el);
-      const button = findButton(el);
+      const button = findButton(el) as SynButton | SynRadioButton;
 
       if (button) {
+        button.size = this.size;
+
+        if (button.tagName.toLowerCase() === 'syn-button') {
+          (button as SynButton).variant = this.variant;
+        }
+
         button.toggleAttribute('data-syn-button-group__button', true);
         button.toggleAttribute('data-syn-button-group__button--first', index === 0);
         button.toggleAttribute('data-syn-button-group__button--inner', index > 0 && index < slottedElements.length - 1);
@@ -76,6 +88,62 @@ export default class SynButtonGroup extends SynergyElement {
     });
   }
 
+  firstUpdated() {
+    const startObserving = () => {
+      this.mutationObserver.observe(this, {
+        subtree: true,
+        attributes: true,
+        attributeFilter: ['size', 'variant'],
+      });
+    };
+
+    this.mutationObserver = new MutationObserver((entries) => {
+      // Temporarily disconnect to prevent infinite loop
+      this.mutationObserver.disconnect();
+
+      // Check if the button-group itself changed or its children
+      const buttonGroupChanged = entries.some(entry => entry.target === this);
+      const childrenChanged = entries.some(entry => entry.target !== this);
+
+      if (childrenChanged) {
+        // Handle child button changes (existing logic)
+        entries
+          .filter(entry => entry.target !== this)
+          .forEach(entry => {
+            const target = entry.target as HTMLElement;
+            const button = findButton(target) as SynButton | SynRadioButton;
+
+            if (button) {
+              // Unset the size property to allow button-group to control it
+              button.size = undefined as any;
+
+              // Also unset variant for syn-buttons
+              if (button.tagName.toLowerCase() === 'syn-button') {
+                (button as SynButton).variant = undefined as any;
+              }
+            }
+          });
+      }
+
+      // Handle both cases: button-group changes and child changes
+      if (buttonGroupChanged || childrenChanged) {
+        this.handleSlotChange();
+      }
+      
+      // Reconnect observer after changes are done
+      this.updateComplete.then(() => {
+        startObserving();
+      });
+    });
+
+    startObserving();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.mutationObserver?.disconnect();
+  }
+
   render() {
     // eslint-disable-next-line lit-a11y/mouse-events-have-key-events
     return html`

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

@@ -35,6 +35,18 @@ const props = defineProps<{
 devices when interacting with the control and is strongly recommended.
  */
   label?: SynButtonGroup['label'];
+
+  /**
+   * The button-groups size.
+   * This affects all buttons within the group.
+   */
+  size?: SynButtonGroup['size'];
+
+  /**
+   * The button-group's theme variant.
+   * This affects all buttons within the group.
+   */
+  variant?: SynButtonGroup['variant'];
 }>();
 
 // Make sure prop binding only forwards the props that are actually there.

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

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { css } from 'lit';
 

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

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { classMap } from 'lit/directives/class-map.js';
 import { property } from 'lit/decorators.js';

package/metadata/packages/components/components/syn-checkbox/component.styles.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { css } from 'lit';
 

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

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { classMap } from 'lit/directives/class-map.js';
 import { defaultValue } from '../../internal/default-value.js';

package/metadata/packages/components/components/syn-combobox/component.styles.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { css } from 'lit';
 

package/metadata/packages/components/components/syn-details/component.styles.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { css } from 'lit';
 

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

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { animateTo, shimKeyframesHeightAuto, stopAnimations } from '../../internal/animate.js';
 import { classMap } from 'lit/directives/class-map.js';

package/metadata/packages/components/components/syn-dialog/component.styles.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { css } from 'lit';
 

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

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { animateTo, stopAnimations } from '../../internal/animate.js';
 import { blurActiveElement } from '../../internal/closeActiveElement.js';

package/metadata/packages/components/components/syn-divider/component.styles.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { css } from 'lit';
 

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

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { property } from 'lit/decorators.js';
 import { watch } from '../../internal/watch.js';

package/metadata/packages/components/components/syn-drawer/component.styles.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { css } from 'lit';
 

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

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { animateTo, stopAnimations } from '../../internal/animate.js';
 import { blurActiveElement } from '../../internal/closeActiveElement.js';

package/metadata/packages/components/components/syn-dropdown/component.styles.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { css } from 'lit';
 

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

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { animateTo, stopAnimations } from '../../internal/animate.js';
 import { classMap } from 'lit/directives/class-map.js';

package/metadata/packages/components/components/syn-icon/component.styles.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { css } from 'lit';
 

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

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { getIconLibrary, type IconLibrary, unwatchIcon, watchIcon } from './library.js';
 import { html } from 'lit';

package/metadata/packages/components/components/syn-icon-button/component.styles.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { css } from 'lit';
 

package/metadata/packages/components/components/syn-icon-button/component.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { classMap } from 'lit/directives/class-map.js';
 import { html, literal } from 'lit/static-html.js';

package/metadata/packages/components/components/syn-input/component.styles.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { css } from 'lit';
 

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

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { classMap } from 'lit/directives/class-map.js';
 import { defaultValue } from '../../internal/default-value.js';

package/metadata/packages/components/components/syn-menu/component.styles.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { css } from 'lit';
 

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

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { html } from 'lit';
 import { query } from 'lit/decorators.js';

package/metadata/packages/components/components/syn-menu-item/component.styles.ts

@@ -1,10 +1,3 @@
-/**
- * ---------------------------------------------------------------------
- * 🔒 AUTOGENERATED BY VENDORISM
- * Removing this comment will prevent it from being managed by it.
- * ---------------------------------------------------------------------
- */
-
 /* eslint-disable */
 import { css } from 'lit';