@synergy-design-system/mcp 2.15.0 → 3.0.0

package/metadata/packages/fonts/CHANGELOG.md

@@ -1,57 +0,0 @@
-# Changelog
-
-## 1.0.5
-
-### Patch Changes
-
-- [#1246](https://github.com/synergy-design-system/synergy-design-system/pull/1246) [`5f0eb58`](https://github.com/synergy-design-system/synergy-design-system/commit/5f0eb58996be36571edf1764a7314f78bac96dd9) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-03-27
-
-  fix: 🐛 dependency updates (#258)
-
-## 1.0.4
-
-### Patch Changes
-
-- [#1223](https://github.com/synergy-design-system/synergy-design-system/pull/1223) [`60b2845`](https://github.com/synergy-design-system/synergy-design-system/commit/60b2845fc089c2508f7e4a2b068b359fad166288) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-03-09
-
-  fix: 🐛 dependency updates (#258)
-
-## 1.0.3
-
-### Patch Changes
-
-- [#1182](https://github.com/synergy-design-system/synergy-design-system/pull/1182) [`460f8c2`](https://github.com/synergy-design-system/synergy-design-system/commit/460f8c22dfdc305d3990ba0af4b4aefc451fa8ea) Thanks [@kirchsuSICKAG](https://github.com/kirchsuSICKAG)! - Released on: 2026-02-19
-
-  fix: 🐛 Dependency updates (#258)
-
-## 1.0.2
-
-### Patch Changes
-
-- [#1148](https://github.com/synergy-design-system/synergy-design-system/pull/1148) [`73b7011`](https://github.com/synergy-design-system/synergy-design-system/commit/73b70118ae21bc58c83cbfeb9e2e8447873803a6) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-01-08
-
-  fix: 🐛 Minor dependency updates (#258)
-
-## 1.0.1
-
-### Patch Changes
-
-- [#1137](https://github.com/synergy-design-system/synergy-design-system/pull/1137) [`f7c0662`](https://github.com/synergy-design-system/synergy-design-system/commit/f7c0662d80dacd3aae6f4bd8559aadc399025858) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2025-12-16
-
-  fix: 🐛 SICK Intl Semibold does not display correctly on Windows (#1124)
-
-  This release fixes an issue that only appears when using Windows 10 and 11.
-  The exported font used cleartype annotations which lead to broken renderings on certain font sizes.
-
-  > We are still in the process of optimizing `SICK Intl` and are actively working on a solution for current problems like blurry rendering.
-
-## 1.0.0
-
-### Major Changes
-
-- [#1099](https://github.com/synergy-design-system/synergy-design-system/pull/1099) [`fc1e550`](https://github.com/synergy-design-system/synergy-design-system/commit/fc1e550fb4aa28eabf0bef6b089993a1dd939ff2) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2025-12-04
-
-  feat: ✨ add sick intl to fonts (#1085)
-
-  Add an optimized variant of the `SICK Intl` font as a shared asset to the new `@synergy-design-system/fonts` package.
-  It also adds the fonts package to the Synergy MCP server.

package/metadata/packages/fonts/README.md

@@ -1,164 +0,0 @@
-# @synergy-design-system/fonts
-
-This package provides the SICK Intl font family required for Synergy 3.0 and later versions. The font is distributed with pre-built CSS files for easy integration into any project.
-
-## Installation
-
-Install the fonts package as a dependency:
-
-```bash
-npm install --save @synergy-design-system/fonts
-```
-
-## Usage
-
-### Basic Usage
-
-Import the complete font family with all weights:
-
-```javascript
-// The default export will load SICK Intl automatically.
-import "@synergy-design-system/fonts";
-
-// You may also use a direct import instead.
-// Use this if your bundler does not understand JavaScript module syntax
-import "@synergy-design-system/fonts/src/sick-intl/font.css";
-```
-
-This will load both Regular (400) and Semi Bold (600) font weights with proper `@font-face` declarations.
-
-### CSS Import
-
-If you prefer CSS imports, you can use:
-
-```css
-@import "@synergy-design-system/fonts/src/sick-intl/font.css";
-```
-
-### Inline Base64 Version (Self-Contained)
-
-For applications that need **fully self-contained CSS without external font file dependencies**, use the automatically generated inline version:
-
-```javascript
-import "@synergy-design-system/fonts/sick-intl-inline.css";
-```
-
-This version includes the font files as base64-encoded data URIs directly in the CSS, eliminating the need for separate font file hosting. **Note:** This increases CSS file size but removes external dependencies.
-
-### Framework Examples
-
-#### Vite
-
-```javascript
-// main.tsx
-import "@synergy-design-system/fonts";
-```
-
-#### Angular
-
-```json
-// In angular.json
-"styles": [
-  "@synergy-design-system/fonts/src/sick-intl/font.css",
-]
-```
-
-### CSS Usage
-
-After importing the fonts, use the `SICK Intl` font family in your CSS:
-
-```css
-body {
-  font-family:
-    "SICK Intl",
-    -apple-system,
-    BlinkMacSystemFont,
-    sans-serif;
-}
-
-.heading {
-  font-family: "SICK Intl";
-  font-weight: 600; /* Semi Bold */
-}
-
-.body-text {
-  font-family: "SICK Intl";
-  font-weight: 400; /* Regular */
-}
-```
-
-## Available Font Weights
-
-- **400 (Regular):** Used for body text and standard content
-- **600 (Semi Bold):** Used for headings, emphasized text, and UI elements
-
-## File Structure
-
-```
-dist/
-├── sick-intl-inline.css     # Base64 inline version (git ignored)
-src/
-└── sick-intl/
-    ├── font.css                # Default font face definitions
-    ├── SICKIntl-Regular.woff2  # Regular font
-    └── SICKIntl-SemiBold.woff2 # Semibold font
-```
-
-## Browser Support
-
-The font files are provided in WOFF2 format, which is supported by:
-
-- Chrome 36+
-- Firefox 39+
-- Safari 12+
-- Edge 14+
-
-For older browser support, consider using the CDN version or hosting additional font formats.
-
-## CDN Alternative
-
-If you prefer not to bundle fonts with your application, you can load them from the SICK CDN:
-
-```css
-@font-face {
-  font-display: swap;
-  font-family: "SICK Intl";
-  font-style: normal;
-  font-weight: 400;
-  src: url("https://www.sick.com/media/fonts/sickintl-v2/SICKIntl-Regular.woff2")
-    format("woff2");
-}
-
-@font-face {
-  font-display: swap;
-  font-family: "SICK Intl";
-  font-style: normal;
-  font-weight: 600;
-  src: url("https://www.sick.com/media/fonts/sickintl-v2/SICKIntl-Semibold.woff2")
-    format("woff2");
-}
-```
-
-## Performance Considerations
-
-- **Standard version:** Loads font files separately, better for caching
-- **Inline version:** Self-contained but larger CSS file size
-- **CDN version:** Fastest initial load but requires network connectivity
-
----
-
-## Development
-
-This package uses PostCSS to generate multiple font distribution formats:
-
-- Standard CSS with external font files
-- Base64 inline CSS for self-contained usage
-
-The inline version is automatically generated during build and includes the font files as data URIs.
-
-### Steps for updating SICK Intl
-
-When updating SICK Intl to the latest version, please make sure to:
-
-- Use the [Font Squirrel Webfont Generator](https://www.fontsquirrel.com/tools/webfont-generator)
-- Use the export settings in the `export-configs` folder of this package.

package/metadata/packages/fonts/package.json

@@ -1,72 +0,0 @@
-{
-  "author": {
-    "name": "SICK Global UX Foundation",
-    "url": "https://www.sick.com"
-  },
-  "description": "Fonts for Synergy, the SICK Design System",
-  "devDependencies": {
-    "@synergy-design-system/eslint-config-syn": "workspace:^",
-    "@synergy-design-system/stylelint-config-syn": "workspace:^",
-    "eslint": "^9.39.4",
-    "ora": "^9.3.0",
-    "postcss": "^8.5.8",
-    "postcss-header": "^3.0.3",
-    "postcss-import": "^16.1.1",
-    "postcss-url": "^10.1.3",
-    "stylelint": "^17.5.0"
-  },
-  "exports": {
-    ".": {
-      "import": "./src/sick-intl/font.css",
-      "default": "./src/sick-intl/font.css"
-    },
-    "./sick-intl.css": {
-      "import": "./src/sick-intl/font.css",
-      "default": "./src/sick-intl/font.css"
-    },
-    "./sick-intl-inline.css": {
-      "import": "./dist/sick-intl-inline.css",
-      "default": "./dist/sick-intl-inline.css"
-    },
-    "./src/*": {
-      "import": "./src/*",
-      "default": "./src/*"
-    },
-    "./dist/*": {
-      "import": "./dist/*",
-      "default": "./dist/*"
-    },
-    "./package.json": {
-      "import": "./package.json",
-      "default": "./package.json"
-    }
-  },
-  "files": [
-    "dist",
-    "src",
-    "CHANGELOG.md",
-    "NOTICE"
-  ],
-  "homepage": "https://synergy-design-system.github.io",
-  "keywords": [
-    "SDS",
-    "SICK",
-    "Synergy Design System",
-    "SICK Fonts"
-  ],
-  "license": "MIT",
-  "name": "@synergy-design-system/fonts",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/synergy-design-system/synergy-design-system.git",
-    "directory": "packages/fonts"
-  },
-  "scripts": {
-    "build": "node scripts/build.js",
-    "lint:css": "stylelint \"src/**/*.css\"",
-    "lint:js": "eslint .",
-    "lint": "pnpm run /^lint:.*/"
-  },
-  "type": "module",
-  "version": "1.0.5"
-}

package/metadata/packages/react/LIMITATIONS.md

@@ -1,31 +0,0 @@
-# Known Issues and limitations - React
-
-> ⚠️ This file includes all known issues and limitations when using the react wrappers.
-> There may be other interesting bits of information in the [components limitation documentation](https://synergy-design-system.github.io/?path=/docs/limitations-components--docs).
-
-## Why is there a react wrapper package in the first place?
-
-### Meta information
-
-- Framework version: React < 19.0.0
-- Synergy version: < 2.16.0
-
-### Description
-
-React did historically not ship with web components in mind. This means that is not possible to use all features of web components out of the box when using React until version 19.0.0.
-
-### Cause
-
-Unfortunately it seems that web components never got traction for react developers in the first place, so they where ignored for a long time.
-
-### Proposed Solution
-
-#### Solution 1: For react < 19.0.0
-
-When using react version 18 and below, you may use our `@synergy-design-system/react` wrapper components.
-They allow seamless use of our components as automatically wrapped react elements.
-
-#### Solution 2: For react >= 19.0.0
-
-React 19 comes with official support for web components. This means you are able to use synergies web components directly in React applications now.
-We support this by providing a custom typescript module that may be installed in your react project that provides typechecking and autocompletion support for the native components in react. Please see `@synergy-design-system/react` installation instructions for using this.

package/metadata/packages/react/README.md

@@ -1,262 +0,0 @@
-# @synergy-design-system/react
-
-This package provides [React.js](https://react.dev/) wrappers for [Synergy Web Components](https://github.com/synergy-design-system/synergy-design-system/tree/main/packages/components).
-
-This package aims for an improved UX when used in React applications:
-
-- Auto-completion
-- Event handling
-
-> Note that with react@19 and above, react has full support for web-components.
-> For those react versions, this package can be used by loading custom types,
-> you **do not need to use the exported components** anymore.
-
-## Known issues and limitations
-
-Got any problems using our React wrappers? Currently there are no known issues relating to them. But please take a look at [our list of known issues and limitations of the web components](https://synergy-design-system.github.io/?path=/docs/limitations-known-issues-and-limitations--docs) before [creating a ticket](https://github.com/synergy-design-system/synergy-design-system/issues/new?assignees=&labels=&projects=&template=generic-bug.md&title=fix%3A+%F0%9F%90%9B+), maybe you can find your problem there.
-
-## Getting started
-
-### 1. Usage example
-
-If you want to see a usage example, please check out our [test React repository](https://github.com/synergy-design-system/synergy-design-system/tree/main/packages/_private/react-demo).
-
-### 2. Package installation
-
-Run the following steps to install the required packages.
-
-```bash
-# Install the base library and required css files
-npm install --save @synergy-design-system/react @synergy-design-system/tokens
-
-# Optional: Install the styles utility package
-npm install --save @synergy-design-system/styles
-
-# Only if not already installed
-npm install --save react react-dom
-
-# Optional: if icons shall be used, install the assets package
-npm install --save @synergy-design-system/assets
-```
-
-> ⚠️ Note we do **not** ship React in this package.
-> You will have to install React by yourself first!
-
-### 3. Load the desired theme (required) and utility classes (recommended)
-
-The components will not display correctly without the needed theme and utility classes. Please include either light or dark theme in your application, for example in a newly installed React application:
-
-```tsx
-// main.tsx
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import { App } from "./App";
-
-// Add this line to enable the light theme for your application
-import "@synergy-design-system/tokens/themes/light.css";
-import "@synergy-design-system/components/index.css";
-
-// Optional: Import the styles package
-import "@synergy-design-system/styles/index.css";
-
-createRoot(document.getElementById("root")!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
-);
-```
-
-### 4. Using native Synergy components in react (only for react >= 19.0.0) in Typescript projects
-
-React@19 finally shipped with official support for web components.
-With this version of react, you are free to **use our native web components** directly in your application.
-
-However, you will likely receive errors because our elements are not known to React as available (in react speech `intrinsic`) elements. This will also occur when using typescript. For this reason, we provide **type only wrappers** for all versions of react from version 19.0.0 onward.
-
-Using synergy in a typescript project with React@19 can be easily achieved via one line of code. There is no need to import `@synergy-design-system/react` in your code directly anymore!
-
-Just add the following definition to your projects typescript configuration file (e.g. `tsconfig.json`):
-
-```json
-{
-  "compilerOptions": {
-    "types": ["@synergy-design-system/react/types/latest"]
-  }
-}
-```
-
-This makes sure your project knows about our list of intrinsic elements. This will also enable **automatic type checks and auto completion for properties** for all synergy elements.
-
-You may now use the components by importing them from the `@synergy-design-system/component` package and rendering them in a React component.
-
-```tsx
-// You may also load the complete bundle somewhere in your application,
-// but directly including only needed components leads to smaller bundles.
-import "@synergy-design-system/components/components/button/button.js";
-import "@synergy-design-system/components/components/input/input.js";
-
-export const MyButton = () => <syn-button type="submit">Submit me</syn-button>;
-export const MyInput = () => (
-  <syn-input name="my-input" onsyn-change={e => console.log(e)} required />
-);
-```
-
-#### 4.1. Migrating from synergies react wrappers to native components
-
-1. First make sure you have react@19 or higher installed in your project.
-2. Upgrade `@synergy-design-system/react` to the latest version.
-3. Add the required types to your typescript configuration (`compilerOptions.types=['@synergy-design-system/react/types/latest']`).
-4. Run typescript to verify everything is still fine.
-5. Replace occurrences of the old synergy components with their native counterpart (e.g. `<SynButton>` should be exchanged for `<syn-button>`). When using native synergy components, make sure to double check on event names (e.g. `<SynInput onSynInput={e => null} />` will become `<syn-input onsyn-input={e => null} />`).
-6. When you are done, remove all occurrences of `@synergy-design-system/react` from your code.
-
----
-
-### 5. Using the lit wrappers (required for react < 19.0.0, optional for react >= 19.0.0)
-
-You may now use the components by importing them from the `@synergy-design-system/react` package and rendering them in a React component.
-
-```tsx
-import { SynButton, SynInput } from "@synergy-design-system/react";
-
-export const MyButton = () => <SynButton type="submit">Submit me</SynButton>;
-export const MyInput = () => (
-  <SynInput name="my-input" onSynChange={e => console.log(e)} required />
-);
-```
-
-### 6. Usage of the components
-
-All information about which components exist as well as the available properties, events and usage of a component, can be found at `components` in our [documentation](https://synergy-design-system.github.io/?path=/docs/components).
-The documentation is written for no specific web framework but only vanilla html and javascript.
-
-An example demo repository with the usage of the React wrapper components can be found [here](https://github.com/synergy-design-system/synergy-design-system/tree/main/packages/_private/react-demo).
-
-The naming of the components for React changes from kebab-case to PascalCase.
-`syn-button` becomes `SynButton`:
-
-```html
-<!-- Webcomponents example -->
-<syn-button> My Button </syn-button>
-```
-
-```tsx
-// React wrapper example
-<SynButton> My Button </SynButton>
-```
-
-### 7. Usage of attributes
-
-The attribute namings of the components are the same as in the documentation.
-
-```html
-<!-- Webcomponents example -->
-<syn-input
-  label="Nickname"
-  help-text="What would you like people to call you?"
-  required
-></syn-input>
-```
-
-```tsx
-// React wrapper example
-<SynInput
-  label="Nickname"
-  help-text="What would you like people to call you?"
-  required
-/>
-```
-
-### 8. Usage of events
-
-Custom events are named in the documentation as following: `syn-change`, `syn-clear`, ...
-
-This library makes use of [@lit/react](https://lit.dev/docs/frameworks/react/) to wrap the existing Synergy Web Components.
-All events will be automatically set up to work without the need to attach event listeners manually.
-Just use them with the default React `onEVENT` prefix, where `EVENT` is the camelCased name of the event:
-
-`syn-change`-> `onSynChange`, `syn-clear`-> `onSynClear`, ...
-
-```tsx
-import { SynButton } from "@synergy-design-system/react";
-
-export const MyButton = () => (
-  <SynButton
-    onSynBlur={e => console.log("button blur event", e)}
-    onSynFocus={e => console.log("button focus event", e)}
-    onSynInvalid={e => console.log("button flagged as invalid", e)}
-  >
-    SynButton Example
-  </SynButton>
-);
-```
-
-If typescript is used, you can get the correct types for components and events from the `@synergy-design-system/components` package.
-
-The components from the React wrapper and the types of the components package are called the same. Therefore there must be a renaming of e.g. the types.
-
-An example for how these types can be used in case of event, is shown below:
-
-```tsx
-import { SynInput } from "@synergy-design-system/react";
-import type {
-  SynInput as SynInputType,
-  SynChangeEvent,
-} from "@synergy-design-system/components";
-
-export const MyComponent = () => (
-  <SynInput
-    label="Surname"
-    onSynChange={(e: SynChangeEvent) => {
-      const input = e.target as SynInputType;
-      // Now we get access to all properties, methods etc. of the syn-input
-      const surname = input.value;
-      doSomething(surname);
-    }}
-  />
-);
-```
-
-### 9. Usage of methods
-
-Components can have methods (like `focus`, `click`, `stepUp`, etc. ), which can trigger an action, if they are called.
-
-An example for calling such a method in a React component is shown here:
-
-```tsx
-import { SynButton, SynInput } from "@synergy-design-system/react";
-import type { SynInput as SynInputType } from "@synergy-design-system/components";
-import { type FC, useRef } from "react";
-
-export const Home: FC = () => {
-  const count = useRef<SynInputType>(null);
-
-  return (
-    <>
-      <SynInput ref={count} label="My count" type="number" value="5" />
-      <SynButton
-        onClick={() => {
-          // Increment the count via calling the method
-          count.current?.stepUp();
-        }}
-      >
-        Increment
-      </SynButton>
-    </>
-  );
-};
-```
-
----
-
-## Development
-
-To create a new version of this package, proceed in the following way:
-
-1. Check out the [Synergy Design System Repository](https://github.com/synergy-design-system/synergy-design-system).
-2. Run `pnpm i -r` to install all dependencies.
-3. Build the `@synergy-design-system/components` package (or run `pnpm build` in the project root to build everything).
-4. Move to to `packages/_private/react-demo` and use `pnpm start` to spin up a local vite project using react and typescript to validate the build.
-
-> ⚠️ The build process will always try to sync this packages `package.json.version` field with the latest version from `@synergy-design-system/components`!
-> Therefore, it is best to not alter the version string

package/metadata/packages/styles/BREAKING_CHANGES.md

@@ -1,105 +0,0 @@
-# Handling breaking changes between major versions
-
-This guide holds the required information for migrating from one major version of `@synergy-design-system/styles` to the next.
-
-> ⚠️ Migrations **must** always be done from one major version to the next to prevent issues (e.g. with types and property changes)
-> This means when moving from `@synergy-design-system@styles` v1.x to v3.x,
-> you will **have to apply** the changes from v1.x to v2.x first!
-
----
-
-## Version 2.0
-
-<h3 id="syn-var-fallbacks-v2">Variable fallbacks</h3>
-
-#### ⚠️ Removed all fallback variables in styles
-
-**Associated Ticket(s)**:
-
-- [#1149](https://github.com/synergy-design-system/synergy-design-system/issues/1149)
-
-**Reason**:
-
-During the migration process of Synergy version 2 to version 3, we added a compatibility layer in the styles package that made it possible for users with misaligned versions of the styles and tokens package to still use the updated styles. This was achieved using fallbacks like this:
-
-```css
-/* Original code of @synergy-design-system/styles@1.x */
-.syn-table-cell--border-start {
-  border-inline-start: var(--syn-border-width-small) solid
-    var(--syn-table-border-color, var(--syn-color-neutral-300));
-}
-```
-
-This helped introduce Synergies new semantic layer without breaking the versioning. However, this also lead to increased bundle sizes.
-
-As the styles and token packages both get new major versions, there is no more need for this deprecation layer in the styles:
-
-```css
-/* Original code of @synergy-design-system/styles@2.x */
-.syn-table-cell--border-start {
-  border-inline-start: var(--syn-border-width-small) solid
-    var(--syn-table-border-color);
-}
-```
-
-**Migration Steps**:
-
-- Make sure to use the latest versions of `@synergy-design-system/styles` and `@synergy-design-system/tokens`.
-- The styles package now declares a `peerDependency` on version 3 of `@synergy-design-system/tokens`. You may also remove the installation of `@synergy-design-system/tokens` that was manually needed before as this should be automatically fetched now.
-
-**Example (before)**:
-
-```json
-{
-  "dependencies": {
-    "@synergy-design-system/styles": "^1.0.0",
-    "@synergy-design-system/tokens": "2.11.0"
-  }
-}
-```
-
-**Example (after)**:
-
-```json
-{
-  "dependencies": {
-    "@synergy-design-system/styles": "^2.0.0"
-  }
-}
-```
-
----
-
-<!-- USE THIS AS A TEMPLATE FOR ADDITIONAL MIGRATION STEPS
-
-<h3 id="change-VERSION">`Change`</h3>
-
-#### ⚠️ DESCRIBE THE CHANGE HERE
-
-**Associated Ticket(s)**:
-
-- [#1](https://github.com/synergy-design-system/synergy-design-system/issues/1)
-
-**Reason**:
-
-DESCRIBE THE REASON FOR THIS CHANGE
-
-**Migration Steps**:
-
-MIGRATION IN TEXT FORM
-
-**Example (before)**:
-
-```css
-EXAMPLE BEFORE THE CHANGE
-```
-
-**Example (after)**:
-
-```css
-EXAMPLE AFTER THE CHANGE
-```
-
----
-
--->