@synergy-design-system/mcp 1.41.2 → 2.0.0

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

@@ -4,35 +4,139 @@ This file lists known issues and limitations of Synergy Web Components and usefu
 
 ---
 
-## Layout issues with dynamic content in `<syn-button>`
+<h2 id="syn-input-number-width">`<syn-input type="number">` is too large when no `width` is set</h2>
 
-### Meta Information
+<h3 id="syn-input-number-width-meta">Meta Information</h3>
+
+- Framework version: ALL
+- Synergy version: ALL
+
+<h3 id="syn-input-number-width-description">Description</h3>
+
+Synergies `<syn-input>` may get drawn too wide if the `numeric-strategy` is using `noStepAlign`.
+This is the case automatically starting with Synergy version 3.0.
+
+<h3 id="syn-input-number-width-cause">Cause</h3>
+
+This problem is that the `<syn-input>` needs `step="any"` to circumvent the native checks on the step property.
+When setting `step="2"` for example, browser validation will flag a value of `3` as an error.
+Synergy allows to circumvent this via `noStepAlign` as part of a custom strategy or per default when using the `modern` preset.
+
+With this applied, `<syn-input>` must set `step="any"` on the rendered `<input>` component. As browsers assume the user will be able to enter an unknown amount of characters, they will draw the field with a minimal size of 10 characters, making it appear too wide. This is a feature built into the browser and cannot be changed.
+
+<h3 id="syn-input-number-width-solution">Proposed Solution</h3>
+
+If you encounter such errors, make sure to provide a fixed `max-width`.
+
+<h4 id="syn-input-number-width-problem">Problem</h4>
+
+```html
+<!--
+ -- The right container will be much larger with numeric-strategy="modern" applied
+-->
+<div class="container">
+  <div class="left">Content (auto grow)</div>
+  <div class="right">
+    <syn-input
+      type="number"
+      min="5"
+      max="10"
+      numeric-strategy="modern"
+    ></syn-input>
+  </div>
+</div>
+
+<style>
+  .container {
+    display: flex;
+    flex-direction: row;
+    flex: 1 0 auto;
+  }
+
+  .left {
+    flex: 1;
+    width: 100%;
+  }
+
+  .right {
+    flex-grow: 0;
+  }
+</style>
+```
+
+<h4 id="syn-input-number-width-solution-1">Solution 1</h4>
+
+If you do not need the `modern` behavior, use `numeric-strategy="native"` instead:
+
+```html
+<div class="container">
+  <div class="left">Content (auto grow)</div>
+  <div class="right">
+    <syn-input
+      type="number"
+      min="5"
+      max="10"
+      numeric-strategy="native"
+    ></syn-input>
+  </div>
+</div>
+```
+
+<h4 id="syn-input-number-width-solution-2">Solution 2</h4>
+
+Set the width of the element directly
+
+```html
+<div class="container">
+  <div class="left">Content (auto grow)</div>
+  <div class="right">
+    <syn-input
+      type="number"
+      min="5"
+      max="10"
+      numeric-strategy="modern"
+    ></syn-input>
+  </div>
+</div>
+
+<style>
+  .right syn-input {
+    width: 130px;
+  }
+</style>
+```
+
+---
+
+<h2 id="syn-button-dynamic-content">Layout issues with dynamic content in `<syn-button>`</h2>
+
+<h3 id="syn-button-dynamic-content-meta">Meta Information</h3>
 
 - Framework version: ALL
 - Synergy version: ALL
 - Issues: [#388](https://github.com/synergy-design-system/synergy-design-system/issues/388)
 
-### Description
+<h3 id="syn-button-dynamic-content-description">Description</h3>
 
 Synergies `<syn-button>` may get drawn without inner paddings when inserting content async.
 
-### Cause
+<h3 id="syn-button-dynamic-content-cause">Cause</h3>
 
 The `<syn-button>` element uses a [slotchange](https://github.com/synergy-design-system/synergy-design-system/blob/main/packages/components/src/components/button/button.component.ts#L202C17-L202C27) listener to dynamically apply classes that effect the layout of the component.
 
 As stated via [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLSlotElement/slotchange_event) `slotchange` events are fired when the **nodes** of a slot change. As most frameworks are reusing instances of `Text` nodes, those events will not trigger when the framework does not fully redraw the components content.
 
-### Proposed Solution
+<h3 id="syn-button-dynamic-content-solution">Proposed Solution</h3>
 
 Rendering is a crucial task of current frontend frameworks. Most frameworks will try to reuse created `Text` nodes. However, for most frameworks it is enough to wrap the slot contents with any `HTMLElement`.
 
-#### Problem
+<h4 id="syn-button-dynamic-content-problem">Problem</h4>
 
 ```html
 <syn-button>DYNAMIC_TEXT</syn-button>
 ```
 
-#### Solution
+<h4 id="syn-button-dynamic-content-solution-example">Solution</h4>
 
 ```html
 <syn-button>
@@ -42,28 +146,28 @@ Rendering is a crucial task of current frontend frameworks. Most frameworks will
 
 ---
 
-## `<syn-dialog>` closes itself when interacting with certain elements
+<h2 id="syn-dialog-closes-unexpectedly">`<syn-dialog>` closes itself when interacting with certain elements</h2>
 
-### Meta Information
+<h3 id="syn-dialog-closes-unexpectedly-meta">Meta Information</h3>
 
 - Framework version: ALL
 - Synergy version: ALL
 - Issues: [#530](https://github.com/synergy-design-system/synergy-design-system/issues/530), [#572](https://github.com/synergy-design-system/synergy-design-system/issues/572), [sl#2020](https://github.com/shoelace-style/shoelace/issues/2020), [sl#1956](https://github.com/shoelace-style/shoelace/issues/1956)
 
-### Description
+<h3 id="syn-dialog-closes-unexpectedly-description">Description</h3>
 
 A `<syn-dialog>` element may close itself unexpectedly when interacting with elements like `<syn-select>`, `<syn-accordion>` or `<syn-details>` and having a listener attached on the `syn-hide` event.
 
-### Cause
+<h3 id="syn-dialog-closes-unexpectedly-cause">Cause</h3>
 
 Synergy uses shared `CustomEvents` for all of its components. Per default, all of those events are bubbling. When a `<syn-select>`, `<syn-accordion>` or `<syn-details>` element is closed, it fires its own `syn-hide` event. This event bubbles to `<syn-dialog>` and closes it.
 
-### Proposed Solution
+<h3 id="syn-dialog-closes-unexpectedly-solution">Proposed Solution</h3>
 
 If you want to close the dialog only, listen to its `syn-request-close` event instead of `syn-hide`.
-In other cases, make sure to suppress the other elements emitted `syn-hide` events or filter the events target to just listen for the wanted instance of the `<syn-dialog>`.
+In other cases, make sure to suppress the other elements' emitted `syn-hide` events or filter the event's target to just listen for the wanted instance of the `<syn-dialog>`.
 
-#### Problem
+<h4 id="syn-dialog-closes-unexpectedly-problem">Problem</h4>
 
 ```html
 <!-- Before -->
@@ -80,7 +184,7 @@ In other cases, make sure to suppress the other elements emitted `syn-hide` even
 </script>
 ```
 
-#### Solution 1
+<h4 id="syn-dialog-closes-unexpectedly-solution-1">Solution 1</h4>
 
 ```html
 <syn-dialog open>
@@ -98,7 +202,7 @@ In other cases, make sure to suppress the other elements emitted `syn-hide` even
 </script>
 ```
 
-#### Solution 2:
+<h4 id="syn-dialog-closes-unexpectedly-solution-2">Solution 2</h4>
 
 ```html
 <syn-dialog open>
@@ -117,7 +221,7 @@ In other cases, make sure to suppress the other elements emitted `syn-hide` even
 </script>
 ```
 
-#### Solution 3:
+<h4 id="syn-dialog-closes-unexpectedly-solution-3">Solution 3</h4>
 
 ```html
 <syn-dialog open>
@@ -137,27 +241,29 @@ In other cases, make sure to suppress the other elements emitted `syn-hide` even
 </script>
 ```
 
-## Click events for `syn-nav-item` are not fired when clicking slotted items (e.g. icons)
+---
+
+<h2 id="syn-nav-item-click-events">Click events for `syn-nav-item` are not fired when clicking slotted items (e.g. icons)</h2>
 
-### Meta Information
+<h3 id="syn-nav-item-click-events-meta">Meta Information</h3>
 
 - Framework version: ALL
 - Synergy version: ALL
 - Issues: [#562](https://github.com/synergy-design-system/synergy-design-system/issues/530), [sl#2020](https://github.com/shoelace-style/shoelace/issues/562)
 
-### Description
+<h3 id="syn-nav-item-click-events-description">Description</h3>
 
 When adding a `click` listener to a `<syn-nav-item>` that has content in the `prefix` or `suffix` slot, the `event.target` is the slotted element instead of the instance of the `<syn-nav-item>`.
 
-### Cause
+<h3 id="syn-nav-item-click-events-cause">Cause</h3>
 
 Synergy components make heavy use of [ShadowDOM](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM). When using the ShadowDOM, all internal events will get [**retargeted** to the events instance](https://lit.dev/docs/components/events/#shadowdom-retargeting). However, slotted elements are still part of the LightDOM and are not part of this retargetting. Therefore, when clicking a slotted `<syn-icon>`, the `event.target` will reference the slotted `<syn-icon>`.
 
-### Proposed Solution
+<h3 id="syn-nav-item-click-events-solution">Proposed Solution</h3>
 
 Try to match on the next `<syn-nav-item>` with the closest selector. This will also match for slotted elements.
 
-#### Problem
+<h4 id="syn-nav-item-click-events-problem">Problem</h4>
 
 ```html
 <syn-side-nav>
@@ -178,7 +284,7 @@ Try to match on the next `<syn-nav-item>` with the closest selector. This will a
 >
 ```
 
-#### Solution
+<h4 id="syn-nav-item-click-events-solution-example">Solution</h4>
 
 ```html
 <script type="module">
@@ -192,22 +298,22 @@ Try to match on the next `<syn-nav-item>` with the closest selector. This will a
 
 ---
 
-## Wrong rendering order with container-type set on parent for `<syn-select>`, `<syn-combobox`, `<syn-dropdown>`, `<syn-tooltip>`
+<h2 id="container-type-rendering-order">Wrong rendering order with container-type set on parent for `<syn-select>`, `<syn-combobox>`, `<syn-dropdown>`, and `<syn-tooltip>`</h2>
 
-### Meta Information
+<h3 id="container-type-rendering-order-meta">Meta Information</h3>
 
 - Framework version: ALL
 - Synergy version: ALL
-- Browsers: safari, older chrome and older firefox versions
+- Browsers: Safari, older Chrome and older Firefox versions
 - Issues: [#612](https://github.com/synergy-design-system/synergy-design-system/issues/612)
 
-### Description
+<h3 id="container-type-rendering-order-description">Description</h3>
 
-Parts of Synergies `<syn-select>`, `<syn-combobox>`, `<syn-dropdown>`, `<syn-tooltip>` may get drawn behind other elements, if the `container-type` css property of a parent element is set to something different than `normal`.
+Parts of Synergies `<syn-select>`, `<syn-combobox>`, `<syn-dropdown>`, and `<syn-tooltip>` may get drawn behind other elements, if the `container-type` css property of a parent element is set to something different than `normal`.
 
-### Cause
+<h3 id="container-type-rendering-order-cause">Cause</h3>
 
-Older chrome and firefox browser versions as well as current safari browser have a special handling for container queries, which was declared as a "design mistake". For this reason the browsers are already having or getting an updated handling for this and also the specification should be updated in the future.
+Older Chrome and Firefox browser versions as well as current Safari browser have a special handling for container queries, which was declared as a "design mistake". For this reason the browsers are already having or getting an updated handling for this and also the specification should be updated in the future.
 The old handling was that `container-type: inline-size` or `container-type: size`:
 
 - created a containing block
@@ -215,13 +321,13 @@ The old handling was that `container-type: inline-size` or `container-type: size
 
 For further information have a look at [this article](https://dev.to/michaelcharles/chrome-129s-container-query-change-2i77)
 
-This old behavior results in e.g. open `<syn-select>` options list not being rendered above other elements (e.g. like `<syn-checkbox>`) but behind it.
+This old behavior results in e.g. open `<syn-select>` options lists not being rendered above other elements (e.g. like `<syn-checkbox>`) but behind them.
 
-### Proposed Solution
+<h3 id="container-type-rendering-order-solution">Proposed Solution</h3>
 
 To work around this problem, add a `position: relative` and a `z-index` to the element with `container-type`.
 
-#### Problem
+<h4 id="container-type-rendering-order-problem">Problem</h4>
 
 ```html
 <div class="container">
@@ -242,7 +348,7 @@ To work around this problem, add a `position: relative` and a `z-index` to the e
 </style>
 ```
 
-#### Solution
+<h4 id="container-type-rendering-order-solution-example">Solution</h4>
 
 ```html
 <div class="container">

package/metadata/packages/styles/BREAKING_CHANGES.md

@@ -0,0 +1,105 @@
+# 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
+```
+
+---
+
+-->

package/metadata/packages/styles/CHANGELOG.md

@@ -1,5 +1,31 @@
 # Changelog
 
+## 2.0.0
+
+### Major Changes
+
+- [#1160](https://github.com/synergy-design-system/synergy-design-system/pull/1160) [`669cbcb`](https://github.com/synergy-design-system/synergy-design-system/commit/669cbcb9cccce72134beac99ac12a2591f3e3c74) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-02-02
+
+  feat: 💥 Removal of variable fallbacks and token alignment
+
+  This release removes the compatibility layer that was introduced in Synergy v2 to support misaligned versions between styles and tokens packages.
+
+  **Key Changes:**
+  - **Breaking:** Variable fallbacks removed - all CSS custom property fallbacks have been eliminated to reduce bundle size
+  - **Breaking:** Token package alignment - styles now has a `peerDependency` on `@synergy-design-system/tokens@^3.0.0`
+  - Improved bundle size due to removal of fallback compatibility layer
+
+  **Migration Steps:**
+  - Ensure you're using the latest version of `@synergy-design-system/tokens` (v3.0.0 or higher)
+  - The tokens package is now automatically installed as a peer dependency
+
+  For detailed migration instructions, please refer to the [breaking changes documentation](https://synergy-design-system.github.io/?path=/docs/packages-styles-breaking-changes--docs).
+
+### Patch Changes
+
+- Updated dependencies [[`669cbcb`](https://github.com/synergy-design-system/synergy-design-system/commit/669cbcb9cccce72134beac99ac12a2591f3e3c74)]:
+  - @synergy-design-system/tokens@3.0.0
+
 ## 1.9.1
 
 ### Patch Changes

package/metadata/packages/styles/index.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/styles version 1.9.0
+ * @synergy-design-system/styles version 1.9.1
  * SICK Global UX Foundation
  */
 /**
@@ -23,7 +23,7 @@
   font-family: var(--syn-font-sans);
   font-size: var(--syn-link-font-size);
   text-decoration: underline;
-  text-underline-offset: var(--syn-link-underline-outline, initial);
+  text-underline-offset: var(--syn-link-underline-outline);
 }
 .syn-link:has(syn-icon) {
   align-items: center;
@@ -206,7 +206,7 @@ a.syn-link:not([href]) {
 .syn-table--default td,
 .syn-table--alternating td,
 .syn-table--border td {
-	background-color: var(--syn-table-background-color, var(--syn-color-neutral-0));
+	background-color: var(--syn-table-background-color);
 	color: var(--syn-typography-color-text);
 	font: var(--syn-body-small-regular);
 	height: var(--syn-spacing-large);
@@ -216,29 +216,29 @@ a.syn-link:not([href]) {
 }
 .syn-table-cell--alternating,
 .syn-table--alternating tr:nth-child(even) > td {
-	background-color: var(--syn-table-background-color-alternating, var(--syn-color-neutral-50));
+	background-color: var(--syn-table-background-color-alternating);
 }
 /* Border */
 .syn-table-cell--border-start {
-	border-inline-start: var(--syn-border-width-small) solid var(--syn-table-border-color, var(--syn-color-neutral-300));
+	border-inline-start: var(--syn-border-width-small) solid var(--syn-table-border-color);
 }
 .syn-table-cell--border-end,
 .syn-table--border tr > td:not(:last-child) {
-	border-inline-end: var(--syn-border-width-small) solid var(--syn-table-border-color, var(--syn-color-neutral-300));
+	border-inline-end: var(--syn-border-width-small) solid var(--syn-table-border-color);
 }
 .syn-table-cell--border-top {
-	border-top: var(--syn-border-width-small) solid var(--syn-table-border-color, var(--syn-color-neutral-300));
+	border-top: var(--syn-border-width-small) solid var(--syn-table-border-color);
 }
 .syn-table-cell--border-bottom,
 .syn-table--border tr:not(:last-child) > td {
-	border-bottom: var(--syn-border-width-small) solid var(--syn-table-border-color, var(--syn-color-neutral-300));
+	border-bottom: var(--syn-border-width-small) solid var(--syn-table-border-color);
 }
 /* Header */
 .syn-table-cell--header,
 .syn-table--default th,
 .syn-table--alternating th,
 .syn-table--border th {
-	background-color: var(--syn-table-background-color-header, var(--syn-color-neutral-200));
+	background-color: var(--syn-table-background-color-header);
 	color: var(--syn-typography-color-text);
 	font: var(--syn-body-small-semibold);
 	height: var(--syn-spacing-large);

package/metadata/packages/styles/link-list.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/styles version 1.9.0
+ * @synergy-design-system/styles version 1.9.1
  * SICK Global UX Foundation
  */
 /**

package/metadata/packages/styles/link.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/styles version 1.9.0
+ * @synergy-design-system/styles version 1.9.1
  * SICK Global UX Foundation
  */
 /**
@@ -23,7 +23,7 @@
   font-family: var(--syn-font-sans);
   font-size: var(--syn-link-font-size);
   text-decoration: underline;
-  text-underline-offset: var(--syn-link-underline-outline, initial);
+  text-underline-offset: var(--syn-link-underline-outline);
 }
 .syn-link:has(syn-icon) {
   align-items: center;

package/metadata/packages/styles/tables.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/styles version 1.9.0
+ * @synergy-design-system/styles version 1.9.1
  * SICK Global UX Foundation
  */
 /**
@@ -38,7 +38,7 @@
 .syn-table--default td,
 .syn-table--alternating td,
 .syn-table--border td {
-	background-color: var(--syn-table-background-color, var(--syn-color-neutral-0));
+	background-color: var(--syn-table-background-color);
 	color: var(--syn-typography-color-text);
 	font: var(--syn-body-small-regular);
 	height: var(--syn-spacing-large);
@@ -48,29 +48,29 @@
 }
 .syn-table-cell--alternating,
 .syn-table--alternating tr:nth-child(even) > td {
-	background-color: var(--syn-table-background-color-alternating, var(--syn-color-neutral-50));
+	background-color: var(--syn-table-background-color-alternating);
 }
 /* Border */
 .syn-table-cell--border-start {
-	border-inline-start: var(--syn-border-width-small) solid var(--syn-table-border-color, var(--syn-color-neutral-300));
+	border-inline-start: var(--syn-border-width-small) solid var(--syn-table-border-color);
 }
 .syn-table-cell--border-end,
 .syn-table--border tr > td:not(:last-child) {
-	border-inline-end: var(--syn-border-width-small) solid var(--syn-table-border-color, var(--syn-color-neutral-300));
+	border-inline-end: var(--syn-border-width-small) solid var(--syn-table-border-color);
 }
 .syn-table-cell--border-top {
-	border-top: var(--syn-border-width-small) solid var(--syn-table-border-color, var(--syn-color-neutral-300));
+	border-top: var(--syn-border-width-small) solid var(--syn-table-border-color);
 }
 .syn-table-cell--border-bottom,
 .syn-table--border tr:not(:last-child) > td {
-	border-bottom: var(--syn-border-width-small) solid var(--syn-table-border-color, var(--syn-color-neutral-300));
+	border-bottom: var(--syn-border-width-small) solid var(--syn-table-border-color);
 }
 /* Header */
 .syn-table-cell--header,
 .syn-table--default th,
 .syn-table--alternating th,
 .syn-table--border th {
-	background-color: var(--syn-table-background-color-header, var(--syn-color-neutral-200));
+	background-color: var(--syn-table-background-color-header);
 	color: var(--syn-typography-color-text);
 	font: var(--syn-body-small-semibold);
 	height: var(--syn-spacing-large);

package/metadata/packages/styles/typography.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/styles version 1.9.0
+ * @synergy-design-system/styles version 1.9.1
  * SICK Global UX Foundation
  */
 /**