@synergy-design-system/mcp 2.13.0 → 2.13.2

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## 2.13.2
+
+### Patch Changes
+
+- [#1227](https://github.com/synergy-design-system/synergy-design-system/pull/1227) [`c827385`](https://github.com/synergy-design-system/synergy-design-system/commit/c82738594731dc3c2a5041695741f099393068de) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-03-10
+
+  fix: 🐛 `<syn-select>` may throw an error when configured to be `readonly` and `multiple` (#1225)
+
+## 2.13.1
+
+### Patch Changes
+
+- [#1224](https://github.com/synergy-design-system/synergy-design-system/pull/1224) [`7defd03`](https://github.com/synergy-design-system/synergy-design-system/commit/7defd0349dc50d4f9549eda59c4b6bcc96c4612c) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-03-09
+
+  fix: 🐛 `<syn-range>` content may bleed into the label when rendering a prefix or suffix slot and using ticks (#1143)
+
+  This release fixes an issue with `<syn-range>` that caused a layout miscalculation when using prefix and suffix slots in combination with slots.
+
 ## 2.13.0
 
 ### Minor Changes

package/metadata/checksum.txt

@@ -1 +1 @@
-b5565f36f2815ac2f4d88413d20e1172
+6cc0ea87c5efe56b0cf4977b5b228a7f

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

@@ -241,8 +241,9 @@ export default css`
   /* Ticks */
   .ticks {
     cursor: pointer;
-    margin: 1px 0;
-    position: relative;
+    inset-inline: 0;
+    position: absolute;
+    top: 100%;
     user-select: none;
   }
 

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

@@ -165,6 +165,8 @@ export default class SynRange extends SynergyElement implements SynergyFormContr
 
   @query('.input__wrapper') baseDiv: HTMLDivElement;
 
+  @query('.base') baseControl: HTMLDivElement;
+
   @query('.active-track') activeTrack: HTMLDivElement;
 
   @query('.ticks') ticks: HTMLDivElement;
@@ -179,6 +181,8 @@ export default class SynRange extends SynergyElement implements SynergyFormContr
 
   private localize = new LocalizeController(this);
 
+  private ticksResizeObserver: ResizeObserver;
+
   private visibilityObserver: IntersectionObserver;
 
   #value: readonly number[] = [0];
@@ -204,22 +208,31 @@ export default class SynRange extends SynergyElement implements SynergyFormContr
 
   disconnectedCallback() {
     super.disconnectedCallback();
+    this?.ticksResizeObserver?.disconnect();
     this?.visibilityObserver?.disconnect();
   }
 
   firstUpdated() {
-    // #727: Check if the ticks are visible and update the prefix and suffix position when they are.
+    this.ticksResizeObserver = new ResizeObserver(() => {
+      this.#updateTicksHeight();
+    });
+    this.ticksResizeObserver.observe(this.ticks);
+    // Also observe .base so that a runtime change to the prefix/suffix slot
+    // (e.g. swapping in a taller <syn-input size="large">) re-triggers the
+    // overflow calculation — the formula reads baseControl.offsetHeight, which
+    // would otherwise be stale until the next ticks resize.
+    this.ticksResizeObserver.observe(this.baseControl);
+
+    // #727: If the range starts hidden (e.g. inside inactive tabs), update once it becomes visible.
     this.visibilityObserver = new IntersectionObserver((entries) => {
       const entry = entries.at(0);
-      if (entry && entry.isIntersecting && entry.target.checkVisibility()) {
-        this.#updatePrefixSuffixPosition(entry.boundingClientRect.height);
+      if (entry && entry.isIntersecting) {
+        this.#updateTicksHeight();
       }
-    }, {
-      // We bind the root to the parent element of the ticks to make sure we are only called
-      // when the ticks are visible, not when the ticks are scrolled out of the viewport.
-      root: this.ticks.parentElement,
     });
-    this.visibilityObserver.observe(this.ticks);
+    this.visibilityObserver.observe(this);
+
+    this.#updateTicksHeight();
 
     this.formControlController.updateValidity();
     // initialize the lastChangeValue with the initial value
@@ -700,35 +713,65 @@ export default class SynRange extends SynergyElement implements SynergyFormContr
     this.formControlController.emitInvalidEvent(event);
   }
 
-  #updatePrefixSuffixPosition(height?: number) {
-    const hasTicksSlot = this.hasSlotController.test('ticks');
-    const hasPrefixSlot = this.hasSlotController.test('prefix');
-    const hasSuffixSlot = this.hasSlotController.test('suffix');
-
-    if (!hasTicksSlot) {
+  #updateTicksHeight() {
+    if (!this.hasSlotController.test('ticks')) {
+      this.baseControl.style.marginBottom = '';
       return;
     }
 
-    let ticksHeight = height || this.shadowRoot?.querySelector('.ticks')?.clientHeight;
-    if (ticksHeight) {
-      // Add two pixels as the 1px margin on top and bottom are not included in the clientHeight
-      ticksHeight += 2;
-
-      ticksHeight /= 2;
+    /**
+     * Why this calculation is needed (#1143):
+     *
+     * `.ticks` is `position: absolute; top: 100%` inside `.input__wrapper`.
+     * This means the ticks render *below* `.input__wrapper` but are taken out of
+     * normal flow, so they do not affect `.base`'s intrinsic height.  Without
+     * correction the ticks would visually overlap whatever comes after `.base`
+     * (e.g. the help-text or the next form field).
+     *
+     * A naive fix — `margin-bottom = ticks.clientHeight` — over-corrects when a
+     * tall prefix/suffix slot is present.  Because `.base` uses `align-items:
+     * center`, `.input__wrapper` (which contains `.ticks`) is vertically centred
+     * inside `.base`.  The bottom edge of the ticks therefore sits at:
+     *
+     *   ticksBottom = (baseHeight + inputWrapperHeight) / 2 + ticksHeight
+     *
+     * The amount by which the ticks actually *protrude below* `.base` is:
+     *
+     *   overflow = ticksBottom - baseHeight
+     *            = ticksHeight - (baseHeight - inputWrapperHeight) / 2
+     *
+     * When the prefix/suffix content is taller than the ticks, the vertical
+     * space already available below `.input__wrapper` absorbs all of the ticks,
+     * so the overflow is zero (or negative — in which case no extra margin is
+     * needed).
+     *
+     * We therefore apply:
+     *   margin-bottom = max(0, ticksHeight - availableSpaceBelow)
+     *
+     * where:
+     *   availableSpaceBelow = (baseHeight - inputWrapperHeight) / 2
+     *
+     * All three heights are read via getBoundingClientRect().height rather than
+     * offsetHeight / clientHeight.  The latter return integers and can differ in
+     * rounding direction, causing (baseHeight - inputWrapperHeight) to be ±1 px
+     * off even when the two elements have the same real height.  With fractional
+     * measurements the subtraction is exact.  We then Math.ceil the overflow so
+     * we always apply enough margin and never leave the ticks 1 px short.
+     */
+    const ticksHeight = this.ticks.getBoundingClientRect().height;
+    const baseHeight = this.baseControl.getBoundingClientRect().height;
+    const inputWrapperHeight = this.baseDiv.getBoundingClientRect().height;
 
-      if (hasPrefixSlot) {
-        const prefix = this.shadowRoot?.querySelector('.input__prefix') as HTMLElement;
-        prefix.style.transform = `translateY(-${ticksHeight}px)`;
-      }
+    // Vertical space that already exists between the bottom of .input__wrapper
+    // and the bottom edge of .base (due to a taller prefix/suffix).
+    const availableSpaceBelow = (baseHeight - inputWrapperHeight) / 2;
 
-      if (hasSuffixSlot) {
-        const suffix = this.shadowRoot?.querySelector('.input__suffix') as HTMLElement;
-        suffix.style.transform = `translateY(-${ticksHeight}px)`;
-      }
-    }
+    // Only add a margin for the portion of the ticks that protrudes beyond .base.
+    // Math.ceil ensures we never undershoot by a sub-pixel fraction.
+    const overflow = Math.ceil(Math.max(0, ticksHeight - availableSpaceBelow));
+    this.baseControl.style.marginBottom = overflow > 0 ? `${overflow}px` : '';
   }
 
-  /* eslint-disable @typescript-eslint/unbound-method */
   private renderThumbs(hasLabel: boolean) {
     // Aria special handling:
     // 1. When there is only one label: Use the provided label as the aria-label for the thumb
@@ -759,6 +802,7 @@ export default class SynRange extends SynergyElement implements SynergyFormContr
         }
       }
 
+      /* eslint-disable @typescript-eslint/unbound-method */
       return html`
         <syn-tooltip
           exportparts="base:tooltip__base, base__arrow:tooltip__arrow, base__popup:tooltip__popup, body:tooltip__body"
@@ -790,11 +834,10 @@ export default class SynRange extends SynergyElement implements SynergyFormContr
           ></div>
         </syn-tooltip>
       `;
+      /* eslint-enable @typescript-eslint/unbound-method */
     });
   }
-  /* eslint-enable @typescript-eslint/unbound-method */
 
-  /* eslint-disable @typescript-eslint/unbound-method */
   override render() {
     const hasLabelSlot = this.hasSlotController.test('label');
     const hasHelpTextSlot = this.hasSlotController.test('help-text');
@@ -803,6 +846,7 @@ export default class SynRange extends SynergyElement implements SynergyFormContr
     const hasLabel = this.label ? true : !!hasLabelSlot;
     const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
 
+    /* eslint-disable @typescript-eslint/unbound-method */
     return html`
       <div
         part="form-control"
@@ -884,6 +928,6 @@ export default class SynRange extends SynergyElement implements SynergyFormContr
         </div>
       </div>
     `;
+    /* eslint-enable @typescript-eslint/unbound-method */
   }
-  /* eslint-enable @typescript-eslint/unbound-method */
 }

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

@@ -236,7 +236,7 @@ export default class SynSelect extends SynergyElement implements SynergyFormCont
 
   
   private enableResizeObserver() {
-    if (this.multiple) {
+    if (this.multiple && !this.readonly && this.tagContainer) {
       this.resizeObserver = new ResizeObserver(entries => {
         const entry = entries.at(0)!;
         this.tagContainer.style.setProperty('--syn-select-tag-max-width', `${entry.contentRect.width}px`);
@@ -726,10 +726,10 @@ export default class SynSelect extends SynergyElement implements SynergyFormCont
   
   protected updated(changedProperties: PropertyValues<this>) {
     super.updated(changedProperties);
-    if (changedProperties.has('multiple')) {
-      if (!this.multiple) {
-        this.resizeObserver?.disconnect();
-      } else {
+    if (changedProperties.has('multiple') || changedProperties.has('readonly')) {
+      this.resizeObserver?.disconnect();
+
+      if (this.multiple && !this.readonly) {
         this.enableResizeObserver();
       }
     }

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

@@ -1,5 +1,29 @@
 # Changelog
 
+## 3.10.3
+
+### Patch Changes
+
+- [#1227](https://github.com/synergy-design-system/synergy-design-system/pull/1227) [`c827385`](https://github.com/synergy-design-system/synergy-design-system/commit/c82738594731dc3c2a5041695741f099393068de) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-03-10
+
+  fix: 🐛 `<syn-select>` may throw an error when configured to be `readonly` and `multiple` (#1225)
+
+- Updated dependencies []:
+  - @synergy-design-system/tokens@3.10.3
+
+## 3.10.2
+
+### Patch Changes
+
+- [#1224](https://github.com/synergy-design-system/synergy-design-system/pull/1224) [`7defd03`](https://github.com/synergy-design-system/synergy-design-system/commit/7defd0349dc50d4f9549eda59c4b6bcc96c4612c) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-03-09
+
+  fix: 🐛 `<syn-range>` content may bleed into the label when rendering a prefix or suffix slot and using ticks (#1143)
+
+  This release fixes an issue with `<syn-range>` that caused a layout miscalculation when using prefix and suffix slots in combination with slots.
+
+- Updated dependencies []:
+  - @synergy-design-system/tokens@3.10.2
+
 ## 3.10.1
 
 ### Patch Changes

package/metadata/packages/tokens/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 3.10.3
+
+## 3.10.2
+
 ## 3.10.1
 
 ### Patch Changes

package/metadata/packages/tokens/dark.css

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

package/metadata/packages/tokens/light.css

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

package/package.json

@@ -28,12 +28,12 @@
     "serve-handler": "^6.1.7",
     "ts-jest": "^29.4.6",
     "typescript": "^5.9.3",
+    "@synergy-design-system/docs": "0.1.0",
     "@synergy-design-system/eslint-config-syn": "^0.1.0",
+    "@synergy-design-system/components": "3.10.3",
     "@synergy-design-system/fonts": "1.0.4",
-    "@synergy-design-system/components": "3.10.1",
     "@synergy-design-system/styles": "2.0.2",
-    "@synergy-design-system/tokens": "^3.10.1",
-    "@synergy-design-system/docs": "0.1.0"
+    "@synergy-design-system/tokens": "^3.10.3"
   },
   "exports": {
     ".": {
@@ -67,7 +67,7 @@
     "directory": "packages/mcp"
   },
   "type": "module",
-  "version": "2.13.0",
+  "version": "2.13.2",
   "scripts": {
     "build": "pnpm run build:ts && pnpm run build:metadata && pnpm build:hash",
     "build:all": "pnpm run build && pnpm run build:storybook",