@synergy-design-system/mcp 1.2.0 → 1.2.1

package/CHANGELOG.md

@@ -1,11 +1,18 @@
-# [@synergy-design-system/mcp-v1.2.0](https://github.com/synergy-design-system/synergy-design-system/compare/mcp/1.1.0...mcp/1.2.0) (2025-08-19)
+# [@synergy-design-system/mcp-v1.2.1](https://github.com/synergy-design-system/synergy-design-system/compare/mcp/1.2.0...mcp/1.2.1) (2025-08-21)
+
+
+### Bug Fixes
+
+* 🐛  Placeholder is clipped for syn-select multiple ([#992](https://github.com/synergy-design-system/synergy-design-system/issues/992)) ([973933e](https://github.com/synergy-design-system/synergy-design-system/commit/973933e477a2cba1611c2f73f77e4e79d755c8a1))
 
+# Changelog
+
+# [@synergy-design-system/mcp-v1.2.0](https://github.com/synergy-design-system/synergy-design-system/compare/mcp/1.1.0...mcp/1.2.0) (2025-08-19)
 
 ### Features
 
 * ✨ export new sick2025 themes ([#985](https://github.com/synergy-design-system/synergy-design-system/issues/985)) ([148730d](https://github.com/synergy-design-system/synergy-design-system/commit/148730d68037ea74dc241ca6627aa6a32af876ab))
 
-# Changelog
 
 # [@synergy-design-system/mcp-v1.1.0](https://github.com/synergy-design-system/synergy-design-system/compare/mcp/1.0.0...mcp/1.1.0) (2025-08-08)
 

package/metadata/checksum.txt

@@ -1 +1 @@
-0eb8e8ab1e1e86521a59e32b35d7e39e
+2020f706c051179afe10d645a03c27a4

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

@@ -381,8 +381,9 @@ export default css`
    * #850: Allow to measure the size of the combobox.
    * This is needed so we can automatically size and truncate the tags in the <syn-combobox multiple> component.
    * Scoped to multiple to not break the single combobox per accident.
+   * Scoped to when placeholder is not visible to not break the placeholder visualization
    */
-  :host([multiple]) .combobox__tags {
+  :host([multiple]) :not(.combobox--placeholder-visible) > .combobox__inputs > .combobox__tags {
     min-width: 100px;
     overflow: hidden;
   }

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

@@ -22,14 +22,14 @@ import '@synergy-design-system/components/components/menu-label/menu-label.js';
  * @status stable
  * @since 2.0
  *
- * @dependency syn-divider
- *
  * @slot - The menu label's content.
  *
  * @csspart base - The component's base wrapper.
  * @csspart divider - The divider that is displayed above the content
  * @csspart label - The label that is displayed below the divider
  *
+ * @dependency syn-divider
+ *
  * @cssproperty --display-divider - Display property of the divider. Defaults to "block"
  */
 @Component({

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

@@ -16,14 +16,14 @@ Component.define('syn-menu-label');
  * @status stable
  * @since 2.0
  *
- * @dependency syn-divider
- *
  * @slot - The menu label's content.
  *
  * @csspart base - The component's base wrapper.
  * @csspart divider - The divider that is displayed above the content
  * @csspart label - The label that is displayed below the divider
  *
+ * @dependency syn-divider
+ *
  * @cssproperty --display-divider - Display property of the divider. Defaults to "block"
  */
 export const SynMenuLabel = createComponent({

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

@@ -20,14 +20,14 @@ import type { CSSResultGroup } from 'lit';
  * @status stable
  * @since 2.0
  *
- * @dependency syn-divider
- *
  * @slot - The menu label's content.
  *
  * @csspart base - The component's base wrapper.
  * @csspart divider - The divider that is displayed above the content
  * @csspart label - The label that is displayed below the divider
  *
+ * @dependency syn-divider
+ *
  * @cssproperty --display-divider - Display property of the divider. Defaults to "block"
  */
 export default class SynMenuLabel extends SynergyElement {

package/metadata/packages/components/components/syn-menu-label/component.vue

@@ -11,14 +11,14 @@
  * @status stable
  * @since 2.0
  *
- * @dependency syn-divider
- *
  * @slot - The menu label's content.
  *
  * @csspart base - The component's base wrapper.
  * @csspart divider - The divider that is displayed above the content
  * @csspart label - The label that is displayed below the divider
  *
+ * @dependency syn-divider
+ *
  * @cssproperty --display-divider - Display property of the divider. Defaults to "block"
  */
 import { computed, ref } from 'vue';

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

@@ -149,8 +149,9 @@ export default css`
    * #850: Allow to measure the size of the combobox.
    * This is needed so we can automatically size and truncate the tags in the <syn-select multiple> component.
    * Scoped to multiple to not break the single select per accident.
+   * Scoped to when placeholder is not visible to not break the placeholder visualization
    */
-  :host([multiple]) .select__tags {
+  :host([multiple]) :not(.select--placeholder-visible) > .select__combobox > .select__tags {
     min-width: 100px;
     overflow: hidden;
   }

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

@@ -42,9 +42,9 @@ import '@synergy-design-system/components/components/tab-group/tab-group.js';
  * @csspart scroll-button__base - The scroll button's exported `base` part.
  *
  * @cssproperty --indicator-color - The color of the active tab indicator.
- * @cssproperty --indicator-width - The width of the active tab indicator.
  * @cssproperty --track-color - The color of the indicator's track (the line that separates tabs from panels).
  * @cssproperty --track-width - The width of the indicator's track (the line that separates tabs from panels).
+ * @cssproperty --indicator-width - The width of the active tab indicator.
  */
 @Component({
   selector: 'syn-tab-group',

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

@@ -39,9 +39,9 @@ Component.define('syn-tab-group');
  * @csspart scroll-button__base - The scroll button's exported `base` part.
  *
  * @cssproperty --indicator-color - The color of the active tab indicator.
- * @cssproperty --indicator-width - The width of the active tab indicator.
  * @cssproperty --track-color - The color of the indicator's track (the line that separates tabs from panels).
  * @cssproperty --track-width - The width of the indicator's track (the line that separates tabs from panels).
+ * @cssproperty --indicator-width - The width of the active tab indicator.
  */
 export const SynTabGroup = createComponent({
   displayName: 'SynTabGroup',

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

@@ -48,9 +48,9 @@ import type SynTabPanel from '../tab-panel/tab-panel.js';
  * @csspart scroll-button__base - The scroll button's exported `base` part.
  *
  * @cssproperty --indicator-color - The color of the active tab indicator.
- * @cssproperty --indicator-width - The width of the active tab indicator.
  * @cssproperty --track-color - The color of the indicator's track (the line that separates tabs from panels).
  * @cssproperty --track-width - The width of the indicator's track (the line that separates tabs from panels).
+ * @cssproperty --indicator-width - The width of the active tab indicator.
  */
 export default class SynTabGroup extends SynergyElement {
   static styles: CSSResultGroup = [componentStyles, styles, customStyles];

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

@@ -30,9 +30,9 @@
  * @csspart scroll-button__base - The scroll button's exported `base` part.
  *
  * @cssproperty --indicator-color - The color of the active tab indicator.
- * @cssproperty --indicator-width - The width of the active tab indicator.
  * @cssproperty --track-color - The color of the indicator's track (the line that separates tabs from panels).
  * @cssproperty --track-width - The width of the indicator's track (the line that separates tabs from panels).
+ * @cssproperty --indicator-width - The width of the active tab indicator.
  */
 import { computed, ref } from 'vue';
 import '@synergy-design-system/components/components/tab-group/tab-group.js';

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

@@ -1,3 +1,10 @@
+# [@synergy-design-system/components-v2.40.1](https://github.com/synergy-design-system/synergy-design-system/compare/components/2.40.0...components/2.40.1) (2025-08-21)
+
+
+### Bug Fixes
+
+* 🐛  Placeholder is clipped for syn-select multiple ([#992](https://github.com/synergy-design-system/synergy-design-system/issues/992)) ([973933e](https://github.com/synergy-design-system/synergy-design-system/commit/973933e477a2cba1611c2f73f77e4e79d755c8a1))
+
 # [@synergy-design-system/components-v2.40.0](https://github.com/synergy-design-system/synergy-design-system/compare/components/2.39.2...components/2.40.0) (2025-08-08)
 
 

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

@@ -246,3 +246,47 @@ All shoelace files are per default readonly and are disabled from being changed.
 ### Adding events to the output
 
 To add events to the component output, make sure to add them to `src/scripts/vendorism.js` into the `events` array that is defined there. After a new build run `via pnpm build`, you will see the new event files and the `events/events.ts` file will be regenerated.
+
+### Adding metadata to components
+
+Components can be enriched with metadata that automatically generates JSDoc annotations during the build process. The `add-metadata-to-components.js` script processes `*.component.ts` files and looks for corresponding `metadata.json` files to inject JSDoc tags.
+
+#### Supported metadata types
+
+- `@animation` - Component animations
+- `@event` - Custom events
+- `@slot` - Content slots
+- `@dependency` - Dependencies
+- `@csspart` - CSS parts for styling
+- `@cssproperty` - CSS custom properties
+
+#### Usage
+
+Create a `metadata.json` file in your component directory:
+
+```json
+{
+  "@event": [
+    { "name": "syn-change", "description": "Emitted when value changes" }
+  ],
+  "@slot": [{ "name": "default", "description": "Main content" }],
+  "@csspart": [{ "name": "base", "description": "Base wrapper" }]
+}
+```
+
+This will generate the following JSDoc annotations in your component:
+
+```typescript
+/**
+ * @summary Your component description
+ *
+ * @event syn-change - Emitted when value changes
+ * @slot default - Main content
+ * @csspart base - Base wrapper
+ */
+export default class YourComponent extends SynergyElement {
+  // Component implementation...
+}
+```
+
+Each metadata object requires a `name` property and optionally accepts a `description`. Run `pnpm vendor.set` to process the metadata and automatically add JSDoc annotations to your component's class comment.

package/metadata/packages/tokens/dark.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.22.0
+ * @synergy-design-system/tokens version 2.23.0
  * 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 2.22.0
+ * @synergy-design-system/tokens version 2.23.0
  * SICK Global UX Foundation
  */
 

package/metadata/packages/tokens/light.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.22.0
+ * @synergy-design-system/tokens version 2.23.0
  * 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 2.22.0
+ * @synergy-design-system/tokens version 2.23.0
  * 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 2.22.0
+ * @synergy-design-system/tokens version 2.23.0
  * 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 2.22.0
+ * @synergy-design-system/tokens version 2.23.0
  * 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 2.22.0
+ * @synergy-design-system/tokens version 2.23.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */

package/package.json

@@ -15,6 +15,9 @@
   },
   "description": "MCP Server for the Synergy Design System",
   "devDependencies": {
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/exec": "^6.0.3",
+    "@semantic-release/git": "^10.0.1",
     "@types/jest": "^30.0.0",
     "@types/node": "^22.15.32",
     "@types/serve-handler": "^6.1.4",
@@ -31,10 +34,10 @@
     "ts-jest": "^29.4.0",
     "typescript": "^5.8.3",
     "@synergy-design-system/docs": "0.1.0",
-    "@synergy-design-system/components": "2.40.0",
-    "@synergy-design-system/styles": "1.7.2",
     "@synergy-design-system/eslint-config-syn": "^0.1.0",
-    "@synergy-design-system/tokens": "^2.23.0"
+    "@synergy-design-system/styles": "1.7.2",
+    "@synergy-design-system/tokens": "^2.23.0",
+    "@synergy-design-system/components": "2.40.1"
   },
   "exports": {
     ".": {
@@ -119,7 +122,7 @@
     "directory": "packages/mcp"
   },
   "type": "module",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "scripts": {
     "build": "pnpm run build:ts && pnpm run build:metadata && pnpm build:hash",
     "build:all": "pnpm run build && pnpm run build:storybook",