@synergy-design-system/mcp 2.14.1 → 3.0.0

package/metadata/static/components/syn-tooltip/docs.md

@@ -1,217 +0,0 @@
-## Default
-
-Tooltips display additional information based on a specific action.A tooltip’s target is its first child element, so you should only wrap one element inside of the tooltip. If you need the tooltip to show up for multiple elements, nest them inside a container first.Tooltips use display: contents so they won’t interfere with how elements are positioned in a flex or grid layout.
-
-```html
-<syn-tooltip content="This is a tooltip" distance="13" open="">
-  <syn-button title="" variant="outline" size="medium">Hover me</syn-button>
-</syn-tooltip>
-```
-
----
-
-## Placement
-
-Use the placement attribute to set the preferred placement of the tooltip.
-
-```html
-<div class="tooltip-placement-example">
-  <div class="tooltip-placement-example-row">
-    <syn-tooltip content="top-start" placement="top-start" open="">
-      <syn-button title="" variant="outline" size="medium"></syn-button>
-    </syn-tooltip>
-
-    <syn-tooltip content="top" placement="top" open="">
-      <syn-button title="" variant="outline" size="medium"></syn-button>
-    </syn-tooltip>
-
-    <syn-tooltip content="top-end" placement="top-end" open="">
-      <syn-button title="" variant="outline" size="medium"></syn-button>
-    </syn-tooltip>
-  </div>
-
-  <div class="tooltip-placement-example-row">
-    <syn-tooltip content="left-start" placement="left-start" open="">
-      <syn-button title="" variant="outline" size="medium"></syn-button>
-    </syn-tooltip>
-
-    <syn-tooltip content="right-start" placement="right-start" open="">
-      <syn-button title="" variant="outline" size="medium"></syn-button>
-    </syn-tooltip>
-  </div>
-
-  <div class="tooltip-placement-example-row">
-    <syn-tooltip content="left" placement="left" open="">
-      <syn-button title="" variant="outline" size="medium"></syn-button>
-    </syn-tooltip>
-
-    <syn-tooltip content="right" placement="right" open="">
-      <syn-button title="" variant="outline" size="medium"></syn-button>
-    </syn-tooltip>
-  </div>
-
-  <div class="tooltip-placement-example-row">
-    <syn-tooltip content="left-end" placement="left-end" open="">
-      <syn-button title="" variant="outline" size="medium"></syn-button>
-    </syn-tooltip>
-
-    <syn-tooltip content="right-end" placement="right-end" open="">
-      <syn-button title="" variant="outline" size="medium"></syn-button>
-    </syn-tooltip>
-  </div>
-
-  <div class="tooltip-placement-example-row">
-    <syn-tooltip content="bottom-start" placement="bottom-start" open="">
-      <syn-button title="" variant="outline" size="medium"></syn-button>
-    </syn-tooltip>
-
-    <syn-tooltip content="bottom" placement="bottom" open="">
-      <syn-button title="" variant="outline" size="medium"></syn-button>
-    </syn-tooltip>
-
-    <syn-tooltip content="bottom-end" placement="bottom-end" open="">
-      <syn-button title="" variant="outline" size="medium"></syn-button>
-    </syn-tooltip>
-  </div>
-</div>
-
-<style>
-  .tooltip-placement-example {
-    width: 500px;
-    margin: 5rem 6rem;
-  }
-
-  .tooltip-placement-example-row:after {
-    content: "";
-    display: table;
-    clear: both;
-  }
-
-  .tooltip-placement-example syn-button {
-    float: left;
-    width: var(--syn-spacing-2x-large);
-    margin-bottom: var(--syn-spacing-medium);
-  }
-
-  .tooltip-placement-example-row:nth-child(1)
-    syn-tooltip:first-child
-    syn-button,
-  .tooltip-placement-example-row:nth-child(5)
-    syn-tooltip:first-child
-    syn-button {
-    margin-left: var(--syn-spacing-3x-large);
-    margin-right: var(--syn-spacing-4x-large);
-  }
-
-  .tooltip-placement-example-row:nth-child(1)
-    syn-tooltip:nth-child(2)
-    syn-button,
-  .tooltip-placement-example-row:nth-child(5)
-    syn-tooltip:nth-child(2)
-    syn-button {
-    margin-right: var(--syn-spacing-4x-large);
-  }
-
-  .tooltip-placement-example-row:nth-child(2)
-    syn-tooltip:nth-child(2)
-    syn-button,
-  .tooltip-placement-example-row:nth-child(3)
-    syn-tooltip:nth-child(2)
-    syn-button,
-  .tooltip-placement-example-row:nth-child(4)
-    syn-tooltip:nth-child(2)
-    syn-button {
-    margin-left: calc(
-      (var(--syn-spacing-2x-large) * 3) + (var(--syn-spacing-4x-large) * 2) +
-        (var(--syn-spacing-medium) * 2)
-    );
-  }
-</style>
-```
-
----
-
-## Click Trigger
-
-Set the trigger attribute to click to toggle the tooltip on click instead of hover.
-
-```html
-<syn-tooltip content="Click again to dismiss" trigger="click" open="">
-  <syn-button title="" variant="outline" size="medium"
-    >Click to Toggle</syn-button
-  >
-</syn-tooltip>
-```
-
----
-
-## Manual Trigger
-
-Tooltips can be controlled programmatically by setting the trigger attribute to manual. Use the open attribute to control when the tooltip is shown.
-
-```html
-<syn-button style="margin-right: 4rem" title="" variant="outline" size="medium"
-  >Toggle Manually</syn-button
->
-<syn-tooltip
-  content="This is an avatar"
-  trigger="manual"
-  class="manual-tooltip"
-  open=""
->
-  <syn-icon-button
-    name="person"
-    label="Person"
-    size="medium"
-    color="neutral"
-  ></syn-icon-button>
-</syn-tooltip>
-```
-
----
-
-## Removing Arrows
-
-You can control the size of tooltip arrows by overriding the --syn-tooltip-arrow-size design token. To remove them, set the value to 0 as shown below.
-
-```html
-<syn-tooltip
-  content="This is a tooltip"
-  style="--syn-tooltip-arrow-size: 0"
-  open=""
->
-  <syn-button title="" variant="outline" size="medium">No Arrow</syn-button>
-</syn-tooltip>
-```
-
----
-
-## HTML In Tooltips
-
-Use the content slot to create tooltips with HTML content. Tooltips are designed only for text and presentational elements. Avoid placing interactive content, such as buttons, links, and form controls, in a tooltip.
-
-```html
-<syn-tooltip open="">
-  <div slot="content">
-    I'm not <strong>just</strong> a tooltip, I'm a <em>tooltip</em> with HTML!
-  </div>
-
-  <syn-button title="" variant="outline" size="medium">Hover me</syn-button>
-</syn-tooltip>
-```
-
----
-
-## Setting A Maximum Width
-
-Use the --max-width custom property to change the width the tooltip can grow to before wrapping occurs.
-
-```html
-<syn-tooltip
-  style="--max-width: 80px"
-  content="This tooltip will wrap after only 80 pixels."
-  open=""
->
-  <syn-button title="" variant="outline" size="medium">Hover me</syn-button>
-</syn-tooltip>
-```

package/metadata/static/components/syn-validate/docs.md

@@ -1,305 +0,0 @@
-## Default
-
-Validate offers options for convenient error handling in form elements.
-
-```html
-<form id="components-syn-validate--default-validate-demo-form">
-  <syn-validate variant="native" on="">
-    <syn-input
-      label="Invalid input"
-      type="email"
-      value="team(at)synergy.com"
-      title=""
-      size="medium"
-      form=""
-    ></syn-input>
-  </syn-validate>
-
-  <p>
-    <syn-button type="submit" title="" variant="outline" size="medium"
-      >Submit</syn-button
-    >
-  </p>
-</form>
-```
-
----
-
-## Tooltip Variant
-
-When the tooltip variant is chosen, validation errors are displayed in a <syn-tooltip> component that has its center at the invalid element. The native tooltip is suppressed.
-
-```html
-<form id="components-syn-validate--tooltip-variant-validate-demo-form">
-  <syn-validate class="validation-tooltip" variant="tooltip" on="live">
-    <syn-input
-      label="Invalid input"
-      type="email"
-      value="team(at)synergy.com"
-      required=""
-      title=""
-      size="medium"
-      form=""
-    ></syn-input>
-  </syn-validate>
-  <p>
-    <syn-button type="submit" title="" variant="outline" size="medium"
-      >Submit</syn-button
-    >
-  </p>
-</form>
-```
-
----
-
-## Inline Variant
-
-Set the variant attribute to inline to show the invalid message below the selected element.👨‍💻 Additional developer Information:Per default, syn-validate uses the browser’s built-in validation. This shows only one error at a time and is optimized for accessbility.When using the inline variant, you have to ensure accessibility on your side and have to have in mind it most likely will lead to layout shifts.
-
-```html
-<form id="components-syn-validate--inline-variant-validate-demo-form">
-  <syn-validate class="validation-inline" variant="inline" on="">
-    <syn-input
-      label="Inline validation"
-      type="email"
-      value="team(at)synergy.com"
-      title=""
-      size="medium"
-      form=""
-    ></syn-input>
-  </syn-validate>
-
-  <p>
-    <syn-button type="submit" title="" variant="outline" size="medium"
-      >Submit</syn-button
-    >
-  </p>
-</form>
-```
-
----
-
-## Hide Icon
-
-Use hide-icon to hide the icon in inline style. This is especially useful when showing more than one error at a time.
-
-```html
-<form id="components-syn-validate--hide-icon-validate-demo-form">
-  <syn-validate
-    class="validation-hide-icon"
-    hide-icon=""
-    variant="inline"
-    on=""
-  >
-    <syn-input
-      label="Hide icon"
-      type="email"
-      value="team(at)synergy.com"
-      title=""
-      size="medium"
-      form=""
-    ></syn-input>
-  </syn-validate>
-
-  <p>
-    <syn-button type="submit" title="" variant="outline" size="medium"
-      >Submit</syn-button
-    >
-  </p>
-</form>
-```
-
----
-
-## Sizes
-
-In development use the size attribute of the form element e.g. syn-input to set the size of the inline syn-validate automatically.
-
-```html
-<form id="components-syn-validate--sizes-validate-demo-form">
-  <div
-    style="display: flex; flex-direction: column; gap: var(--syn-spacing-large)"
-  >
-    <syn-validate eager="" variant="inline" on="">
-      <syn-input
-        type="email"
-        value="team(at)synergy.com"
-        label="Size small"
-        size="small"
-        title=""
-        form=""
-      ></syn-input>
-    </syn-validate>
-
-    <syn-validate eager="" variant="inline" on="">
-      <syn-input
-        type="email"
-        value="team(at)synergy.com"
-        label="Size medium"
-        size="medium"
-        title=""
-        form=""
-      ></syn-input>
-    </syn-validate>
-
-    <syn-validate eager="" variant="inline" on="">
-      <syn-input
-        type="email"
-        value="team(at)synergy.com"
-        label="Size large"
-        size="large"
-        title=""
-        form=""
-      ></syn-input>
-    </syn-validate>
-  </div>
-
-  <p>
-    <syn-button type="submit" title="" variant="outline" size="medium"
-      >Submit</syn-button
-    >
-  </p>
-</form>
-```
-
----
-
-## Live
-
-Use the live value for the on attribute to validate on every input change (e. g. typing a character or checking a checkbox.) instead of form submit. This will automatically bind to the input and blur events.👨‍💻 Additional developer Information:Please ensure, that you really need live validation for your use case as this can have implications on accessibility.
-
-```html
-<form id="components-syn-validate--live-validate-demo-form">
-  <syn-validate class="validation-live" variant="inline" on="live">
-    <syn-input
-      label="Invalid input"
-      type="email"
-      value="team(at)synergy.com"
-      title=""
-      size="medium"
-      form=""
-    ></syn-input>
-  </syn-validate>
-
-  <p>
-    <syn-button type="submit" title="" variant="outline" size="medium"
-      >Submit</syn-button
-    >
-  </p>
-</form>
-```
-
----
-
-## Custom Validation Message
-
-Use the custom-validation-message attribute to use whichever error you need as text, overriding the default browser errors.👨‍💻 Additional developer Information:By using the custom-validation-message attribute, you can override the default browser error messages with custom text. However, please note that applying this attribute disables the browser’s native validation functionality. This means the standard error messages will not be displayed until the custom-validation attribute is removed, at which point the native functionality will be restored.
-
-```html
-<form
-  id="components-syn-validate--custom-validation-message-validate-demo-form"
->
-  <syn-validate
-    class="validation-custom-validation"
-    custom-validation-message='Include an "@" in the email address, otherwise you will never get our marvelous newsletter'
-    variant="inline"
-    on=""
-  >
-    <syn-input
-      label="Custom validation"
-      type="email"
-      value="team(at)synergy.com"
-      title=""
-      size="medium"
-      form=""
-    ></syn-input>
-  </syn-validate>
-
-  <p>
-    <syn-button type="submit" title="" variant="outline" size="medium"
-      >Submit</syn-button
-    >
-  </p>
-</form>
-```
-
----
-
-## Custom Form Field
-
-Wrap the element around any other form field, that follows browser standards to use all features.
-
-```html
-<form id="components-syn-validate--custom-form-field-validate-demo-form">
-  <h3 style="margin: 0; padding: 0">Choose SICK´s brand color</h3>
-  <syn-validate class="validation-custom-form-field" on="live" variant="inline">
-    <validate-demo-radio name="color" required=""></validate-demo-radio>
-  </syn-validate>
-
-  <p>
-    <syn-button type="submit" title="" variant="outline" size="medium"
-      >Submit</syn-button
-    >
-  </p>
-</form>
-```
-
----
-
-## Binding To Custom Event Names
-
-Use the on attribute to listen for one or many custom events. This may be useful if you want to validate on keypress or custom events that may be fired by third party web-components.👨‍💻 Additional developer Information:You can provide one or multiple events in the on property. Please use a whitespace separated list of DOM event names. <syn-validate> will make sure to automatically use Synergies custom events. This means <syn-validate on="change click"> will bind to the syn-change and click events for a <syn-input> or change and click events for a regular <input> element.
-
-```html
-<form
-  id="components-syn-validate--binding-to-custom-event-names-validate-demo-form"
->
-  <syn-validate
-    class="validation-custom-validation"
-    on="mouseover blur"
-    variant="inline"
-  >
-    <syn-input
-      label="Custom validation (triggered on hover and blur)"
-      type="email"
-      value="team(at)synergy.com"
-      title=""
-      size="medium"
-      form=""
-    ></syn-input>
-  </syn-validate>
-
-  <p>
-    <syn-button type="submit" title="" variant="outline" size="medium"
-      >Submit</syn-button
-    >
-  </p>
-</form>
-```
-
----
-
-## Eager
-
-Use the eager attribute to validate the field when the component is mounted. This may be used to prefill validation messages, e.g. during page loads. Please be aware that when mixed with a variant of native, this will display the error of the last eager element in your <form> only!
-
-```html
-<form id="components-syn-validate--eager-validate-demo-form">
-  <syn-validate eager="" variant="inline" on="">
-    <syn-input
-      label="Eager validation (triggered on page load)"
-      type="email"
-      value="team(at)synergy.com"
-      title=""
-      size="medium"
-      form=""
-    ></syn-input>
-  </syn-validate>
-
-  <p>
-    <syn-button type="submit" title="" variant="outline" size="medium"
-      >Submit</syn-button
-    >
-  </p>
-</form>
-```

package/metadata/static/fonts/index.md

@@ -1,4 +0,0 @@
-# Rules for chatbots and llms
-
-- Synergy Version 3 uses `SICK Intl` as its font, whereas older Versions use `Open Sans`.
-- Prefer the use of `@synergy-design-system/fonts` for setups

package/metadata/static/migration/index.md

@@ -1,57 +0,0 @@
-# Synergy Migration Overview
-
-This overview describes the main migration paths from Synergy version 2 to Synergy version 3 and the SICK 2025 theme.
-
-If you are unsure which guide to follow, start here and choose the path that matches your current setup and your target.
-
----
-
-## Migration Paths
-
-### Path A: Stay on Synergy 2, move from SICK 2018 to SICK 2025
-
-- **Current state:** Synergy **2.x**, theme **SICK 2018**
-- **Target state:** Synergy **2.x**, theme **SICK 2025**
-- **Use when:** You want the new SICK 2025 brand look but are not ready to upgrade to Synergy 3 yet.
-- **Guide:** See [Path A: Upgrade from Synergy 2 (SICK 2018) to Synergy 2 (SICK 2025)](?path=/docs/migration-v2-sick-2018-to-v2-sick-2025--docs).
-
----
-
-### Path B: Synergy 2.x + SICK 2018 → Synergy 3.x + SICK 2025 (recommended)
-
-- **Current state:** Synergy **2.x**, theme **SICK 2018**
-- **Target state:** Synergy **3.x**, theme **SICK 2025**
-- **Use when:** You want to fully adopt Synergy 3 and the new SICK 2025 brand.
-- **Guide:** See [Path B: Upgrade from Synergy 2 (SICK 2018) to Synergy 3 (SICK 2025)](?path=/docs/migration-v2-sick-2018-to-v3-sick-2025--docs).
-
----
-
-### Path C: Synergy 2.x + SICK 2025 → Synergy 3.x + SICK 2025
-
-- **Current state:** Synergy **2.x**, theme **SICK 2025** (already migrated using the v2 guide)
-- **Target state:** Synergy **3.x**, theme **SICK 2025**
-- **Use when:** You already use SICK 2025 on Synergy 2 and now want to upgrade to Synergy 3.
-- **Guide:** See [Path C: Upgrade from Synergy 2 to Synergy 3 with SICK 2025](?path=/docs/migration-v2-sick-2025-to-v3-sick-2025--docs).
-
----
-
-### Path D: Synergy 2.x + SICK 2018 → Synergy 3.x + SICK 2018 (stay on old theme)
-
-- **Current state:** Synergy **2.x**, theme **SICK 2018**
-- **Target state:** Synergy **3.x**, theme **SICK 2018**
-- **Use when:** You want to benefit from Synergy 3, but must keep the SICK 2018 theme for now.
-- **Guide:** See [Path D: Upgrade from Synergy 2 to Synergy 3 while staying on SICK 2018](?path=/docs/migration-v2-sick-2018-to-v3-sick-2018--docs).
-
----
-
-## Package-Level Technical Details
-
-Each path focuses on the _user perspective_ and high-level steps.
-For package-specific breaking changes and code changes, always consult the dedicated package guides:
-
-- Components: [@synergy-design-system/components BREAKING CHANGES](?path=/docs/packages-components-breaking-changes--docs)
-- Tokens: [@synergy-design-system/tokens BREAKING CHANGES](?path=/docs/packages-tokens-breaking-changes--docs)
-- Assets: [@synergy-design-system/assets BREAKING CHANGES](?path=/docs/packages-assets-breaking-changes--docs)
-- Styles: [@synergy-design-system/styles BREAKING CHANGES](?path=/docs/packages-styles-breaking-changes--docs)
-
-Use these together with the path-specific guides to plan and execute your migration.