@synergy-design-system/mcp 1.11.0 → 1.13.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [@synergy-design-system/mcp-v1.13.0](https://github.com/synergy-design-system/synergy-design-system/compare/mcp/1.12.0...mcp/1.13.0) (2025-10-23)
+
+
+### Features
+
+* ✨ CD update for syn-checkbox ([#1050](https://github.com/synergy-design-system/synergy-design-system/issues/1050)) ([1054c71](https://github.com/synergy-design-system/synergy-design-system/commit/1054c71415f36233ba1e242433806aac21d4d19b))
+
+# [@synergy-design-system/mcp-v1.12.0](https://github.com/synergy-design-system/synergy-design-system/compare/mcp/1.11.0...mcp/1.12.0) (2025-10-23)
+
+
+### Features
+
+* ✨ CD update for syn-icon-button ([#1048](https://github.com/synergy-design-system/synergy-design-system/issues/1048)) ([d740a54](https://github.com/synergy-design-system/synergy-design-system/commit/d740a5495abd1b36bbe1c1c47fc69ca6a6480549))
+
 # [@synergy-design-system/mcp-v1.11.0](https://github.com/synergy-design-system/synergy-design-system/compare/mcp/1.10.0...mcp/1.11.0) (2025-10-23)
 
 

package/metadata/checksum.txt

@@ -1 +1 @@
-d1a9ae3630171aa2cbb2fd92eaac7827
+70cb3200ddbb9faa6788b5b71e130280

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

@@ -2,13 +2,21 @@ import { css } from 'lit';
 
 export default css`
   .checkbox__control {
-    border-radius: var(--syn-input-border-radius-small);
+    border-radius: var(--syn-checkbox-border-radius, var(--syn-input-border-radius-small));
   }
 
   :host([data-user-invalid]) .checkbox__control {
+    background: var(--syn-input-border-color-focus-error);
     border-color: var(--syn-input-border-color-focus-error);
   }
 
+  /**
+   * #943: When invalid, use a transparent background if not checked or indeterminate
+   */
+  :host([data-user-invalid]:not([checked]):not([indeterminate])) .checkbox__control {
+    background: transparent;
+  }
+
   /** #429: Use token for opacity */
   .checkbox--disabled {
     opacity: var(--syn-input-disabled-opacity);

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

@@ -16,7 +16,7 @@ export default css`
 
   /* Remove round borders */
   .icon-button:focus-visible {
-    border-radius: var(--syn-border-radius-none);
+    border-radius: var(--syn-icon-button-focus-ring-border-radius, var(--syn-border-radius-none));
   }
 
   /* Colors */
@@ -26,20 +26,31 @@ export default css`
 
   :host([color="primary"]),
   :host([color="primary"]) .icon-button:focus-visible:not(.icon-button--disabled) {
-    color: var(--syn-color-primary-600);
+    color: var(--syn-interactive-emphasis-color, var(--syn-color-primary-600));
   }
 
   :host([color="primary"]) .icon-button:hover:not(.icon-button--disabled) {
-    color: var(--syn-color-primary-900);
+    color: var(--syn-interactive-emphasis-color-hover, var(--syn-color-primary-900));
   }
 
   :host([color="primary"]) .icon-button:active:not(.icon-button--disabled) {
-    color: var(--syn-color-primary-950);
+    color: var(--syn-interactive-emphasis-color-active, var(--syn-color-primary-950));
+  }
+
+  :host([color="neutral"]) {
+    color: var(--syn-interactive-quiet-color, var(--syn-typography-color-text));
+  }
+
+  :host([color="neutral"]) .icon-button:hover:not(.icon-button--disabled) {
+    color: var(--syn-interactive-quiet-color-hover, var(--syn-color-primary-600));
+  }
+
+  :host([color="neutral"]) .icon-button:active:not(.icon-button--disabled) {
+    color: var(--syn-interactive-quiet-color-active, var(--syn-color-primary-700));
   }
 
-  :host([color="neutral"]),
   :host([color="neutral"]) .icon-button:focus-visible:not(.icon-button--disabled):not(:hover) {
-    color: var(--syn-color-neutral-950);
+    color: var(--syn-interactive-quiet-color, var(--syn-typography-color-text));
   }
 
   /* Sizes */

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

@@ -1,3 +1,17 @@
+# [@synergy-design-system/components-v2.52.0](https://github.com/synergy-design-system/synergy-design-system/compare/components/2.51.0...components/2.52.0) (2025-10-23)
+
+
+### Features
+
+* ✨ CD update for syn-checkbox ([#1050](https://github.com/synergy-design-system/synergy-design-system/issues/1050)) ([1054c71](https://github.com/synergy-design-system/synergy-design-system/commit/1054c71415f36233ba1e242433806aac21d4d19b))
+
+# [@synergy-design-system/components-v2.51.0](https://github.com/synergy-design-system/synergy-design-system/compare/components/2.50.0...components/2.51.0) (2025-10-23)
+
+
+### Features
+
+* ✨ CD update for syn-icon-button ([#1048](https://github.com/synergy-design-system/synergy-design-system/issues/1048)) ([d740a54](https://github.com/synergy-design-system/synergy-design-system/commit/d740a5495abd1b36bbe1c1c47fc69ca6a6480549))
+
 # [@synergy-design-system/components-v2.50.0](https://github.com/synergy-design-system/synergy-design-system/compare/components/2.49.0...components/2.50.0) (2025-10-23)
 
 

package/metadata/packages/tokens/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [@synergy-design-system/tokens-v2.33.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/2.32.0...tokens/2.33.0) (2025-10-23)
+
+
+### Features
+
+* ✨ CD update for syn-checkbox ([#1050](https://github.com/synergy-design-system/synergy-design-system/issues/1050)) ([1054c71](https://github.com/synergy-design-system/synergy-design-system/commit/1054c71415f36233ba1e242433806aac21d4d19b))
+
+# [@synergy-design-system/tokens-v2.32.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/2.31.0...tokens/2.32.0) (2025-10-23)
+
+
+### Features
+
+* ✨ CD update for syn-icon-button ([#1048](https://github.com/synergy-design-system/synergy-design-system/issues/1048)) ([d740a54](https://github.com/synergy-design-system/synergy-design-system/commit/d740a5495abd1b36bbe1c1c47fc69ca6a6480549))
+
 # [@synergy-design-system/tokens-v2.31.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/2.30.0...tokens/2.31.0) (2025-10-23)
 
 

package/metadata/packages/tokens/dark.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.30.0
+ * @synergy-design-system/tokens version 2.32.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -23,6 +23,7 @@
   --syn-button-font-size-large: var(--syn-font-size-large);
   --syn-button-font-size-medium: var(--syn-font-size-medium);
   --syn-button-font-size-small: var(--syn-font-size-small);
+  --syn-checkbox-border-radius: var(--syn-border-radius-none);
   --syn-color-accent-50: #481700;
   --syn-color-accent-100: #7c310b;
   --syn-color-accent-200: #983b08;
@@ -121,6 +122,7 @@
   --syn-font-weight-normal: 400;
   --syn-font-weight-semibold: 600;
   --syn-header-border-color: var(--syn-color-neutral-400);
+  --syn-icon-button-focus-ring-border-radius: var(--syn-border-radius-none);
   --syn-input-background-color: var(--syn-color-neutral-0);
   --syn-input-background-color-disabled: var(--syn-input-background-color);
   --syn-input-background-color-focus: var(--syn-input-background-color);

package/metadata/packages/tokens/index.js

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.30.0
+ * @synergy-design-system/tokens version 2.32.0
  * SICK Global UX Foundation
  */
 
@@ -83,6 +83,11 @@ export const SynButtonFontSizeMedium = 'var(--syn-button-font-size-medium)';
  */
 export const SynButtonFontSizeSmall = 'var(--syn-button-font-size-small)';
 
+/**
+ * @type {string}
+ */
+export const SynCheckboxBorderRadius = 'var(--syn-checkbox-border-radius)';
+
 /**
  * @type {string}
  */
@@ -573,6 +578,11 @@ export const SynFontWeightSemibold = 'var(--syn-font-weight-semibold)';
  */
 export const SynHeaderBorderColor = 'var(--syn-header-border-color)';
 
+/**
+ * @type {string}
+ */
+export const SynIconButtonFocusRingBorderRadius = 'var(--syn-icon-button-focus-ring-border-radius)';
+
 /**
  * @type {string}
  */

package/metadata/packages/tokens/light.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.30.0
+ * @synergy-design-system/tokens version 2.32.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -23,6 +23,7 @@
   --syn-button-font-size-large: var(--syn-font-size-large);
   --syn-button-font-size-medium: var(--syn-font-size-medium);
   --syn-button-font-size-small: var(--syn-font-size-small);
+  --syn-checkbox-border-radius: var(--syn-border-radius-none);
   --syn-color-accent-50: #fffbea;
   --syn-color-accent-100: #fff2c5;
   --syn-color-accent-200: #ffe685;
@@ -121,6 +122,7 @@
   --syn-font-weight-normal: 400;
   --syn-font-weight-semibold: 600;
   --syn-header-border-color: var(--syn-color-neutral-400);
+  --syn-icon-button-focus-ring-border-radius: var(--syn-border-radius-none);
   --syn-input-background-color: var(--syn-color-neutral-0);
   --syn-input-background-color-disabled: var(--syn-input-background-color);
   --syn-input-background-color-focus: var(--syn-input-background-color);

package/metadata/packages/tokens/sick2018_dark.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.30.0
+ * @synergy-design-system/tokens version 2.32.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -23,6 +23,7 @@
   --syn-button-font-size-large: var(--syn-font-size-large);
   --syn-button-font-size-medium: var(--syn-font-size-medium);
   --syn-button-font-size-small: var(--syn-font-size-small);
+  --syn-checkbox-border-radius: var(--syn-border-radius-none);
   --syn-color-accent-50: #481700;
   --syn-color-accent-100: #7c310b;
   --syn-color-accent-200: #983b08;
@@ -121,6 +122,7 @@
   --syn-font-weight-normal: 400;
   --syn-font-weight-semibold: 600;
   --syn-header-border-color: var(--syn-color-neutral-400);
+  --syn-icon-button-focus-ring-border-radius: var(--syn-border-radius-none);
   --syn-input-background-color: var(--syn-color-neutral-0);
   --syn-input-background-color-disabled: var(--syn-input-background-color);
   --syn-input-background-color-focus: var(--syn-input-background-color);

package/metadata/packages/tokens/sick2018_light.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.30.0
+ * @synergy-design-system/tokens version 2.32.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -23,6 +23,7 @@
   --syn-button-font-size-large: var(--syn-font-size-large);
   --syn-button-font-size-medium: var(--syn-font-size-medium);
   --syn-button-font-size-small: var(--syn-font-size-small);
+  --syn-checkbox-border-radius: var(--syn-border-radius-none);
   --syn-color-accent-50: #fffbea;
   --syn-color-accent-100: #fff2c5;
   --syn-color-accent-200: #ffe685;
@@ -121,6 +122,7 @@
   --syn-font-weight-normal: 400;
   --syn-font-weight-semibold: 600;
   --syn-header-border-color: var(--syn-color-neutral-400);
+  --syn-icon-button-focus-ring-border-radius: var(--syn-border-radius-none);
   --syn-input-background-color: var(--syn-color-neutral-0);
   --syn-input-background-color-disabled: var(--syn-input-background-color);
   --syn-input-background-color-focus: var(--syn-input-background-color);

package/metadata/packages/tokens/sick2025_dark.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.30.0
+ * @synergy-design-system/tokens version 2.32.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -23,6 +23,7 @@
   --syn-button-font-size-large: var(--syn-font-size-large);
   --syn-button-font-size-medium: var(--syn-font-size-medium);
   --syn-button-font-size-small: var(--syn-font-size-small);
+  --syn-checkbox-border-radius: var(--syn-border-radius-small);
   --syn-color-accent-50: #ffffff;
   --syn-color-accent-100: #ffffff;
   --syn-color-accent-200: #ffffff;
@@ -121,6 +122,7 @@
   --syn-font-weight-normal: 400;
   --syn-font-weight-semibold: 600;
   --syn-header-border-color: var(--syn-color-neutral-300);
+  --syn-icon-button-focus-ring-border-radius: var(--syn-border-radius-pill);
   --syn-input-background-color: var(--syn-color-neutral-50);
   --syn-input-background-color-disabled: var(--syn-input-background-color);
   --syn-input-background-color-focus: var(--syn-input-background-color);

package/metadata/packages/tokens/sick2025_light.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.30.0
+ * @synergy-design-system/tokens version 2.32.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -23,6 +23,7 @@
   --syn-button-font-size-large: var(--syn-font-size-large);
   --syn-button-font-size-medium: var(--syn-font-size-medium);
   --syn-button-font-size-small: var(--syn-font-size-small);
+  --syn-checkbox-border-radius: var(--syn-border-radius-small);
   --syn-color-accent-50: #ffffff;
   --syn-color-accent-100: #ffffff;
   --syn-color-accent-200: #ffffff;
@@ -121,6 +122,7 @@
   --syn-font-weight-normal: 400;
   --syn-font-weight-semibold: 600;
   --syn-header-border-color: #e6e1dc;
+  --syn-icon-button-focus-ring-border-radius: var(--syn-border-radius-pill);
   --syn-input-background-color: var(--syn-color-neutral-0);
   --syn-input-background-color-disabled: var(--syn-input-background-color);
   --syn-input-background-color-focus: var(--syn-input-background-color);

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

@@ -18,6 +18,22 @@ Use the checked attribute to activate the checkbox.
 
 ---
 
+## Help Text
+
+Add descriptive help text to a checkbox with the help-text attribute. For help texts that contain HTML, use the help-text slot instead.The help-text attribute should not be used to display error messages. To handle validation and error messaging, use syn-validate for proper error management.
+
+```html
+<syn-checkbox
+  help-text="What should the user know about the checkbox?"
+  title=""
+  size="medium"
+  form=""
+  >Label</syn-checkbox
+>
+```
+
+---
+
 ## Indeterminate
 
 Use the indeterminate attribute to make the checkbox indeterminate.
@@ -30,6 +46,16 @@ Use the indeterminate attribute to make the checkbox indeterminate.
 
 ---
 
+## Focus
+
+The focus event gives the user feedback that the Checkbox has been focused by the keyboard interaction.
+
+```html
+<syn-checkbox title="" size="medium" form="">Focused</syn-checkbox>
+```
+
+---
+
 ## Disabled
 
 Use the disabled attribute to disable the checkbox.
@@ -45,7 +71,9 @@ Use the disabled attribute to disable the checkbox.
 Use the size attribute to change a checkbox’s size.
 
 ```html
-<div style="display: flex; flex-direction: column; gap: 1rem">
+<div
+  style="display: flex; flex-direction: column; gap: var(--syn-spacing-large)"
+>
   <syn-checkbox size="small" title="" form="">Small</syn-checkbox>
   <syn-checkbox size="medium" title="" form="">Medium</syn-checkbox>
   <syn-checkbox size="large" title="" form="">Large</syn-checkbox>
@@ -54,6 +82,41 @@ Use the size attribute to change a checkbox’s size.
 
 ---
 
+## Invalid
+
+The invalid status is used to warn the user that the Checkbox is invalid. For example, if the check is mandatory and nothing has been checked.
+
+```html
+<form class="custom-validity">
+  <div class="custom-validity">
+    <syn-checkbox required="" title="" size="medium" form=""
+      >Invalid</syn-checkbox
+    >
+    <syn-checkbox required="" indeterminate="" title="" size="medium" form=""
+      >Invalid</syn-checkbox
+    >
+    <syn-checkbox required="" checked="" title="" size="medium" form=""
+      >Invalid</syn-checkbox
+    >
+  </div>
+  <syn-button type="submit" variant="filled" title="" size="medium"
+    >Submit</syn-button
+  >
+</form>
+<style>
+  .custom-validity {
+    display: flex;
+    flex-direction: column;
+    gap: var(--syn-spacing-large);
+  }
+  syn-button {
+    align-self: flex-start;
+  }
+</style>
+```
+
+---
+
 ## Custom Validity
 
 Use the setCustomValidity() method to set a custom validation message. This will prevent the form from submitting and make the browser display the error message you provide. To clear the error, call this function with an empty string.

package/package.json

@@ -33,10 +33,10 @@
     "serve-handler": "^6.1.6",
     "ts-jest": "^29.4.4",
     "typescript": "^5.9.3",
-    "@synergy-design-system/components": "2.50.0",
-    "@synergy-design-system/tokens": "^2.31.0",
-    "@synergy-design-system/eslint-config-syn": "^0.1.0",
+    "@synergy-design-system/components": "2.52.0",
     "@synergy-design-system/docs": "0.1.0",
+    "@synergy-design-system/eslint-config-syn": "^0.1.0",
+    "@synergy-design-system/tokens": "^2.33.0",
     "@synergy-design-system/styles": "1.8.1"
   },
   "exports": {
@@ -122,7 +122,7 @@
     "directory": "packages/mcp"
   },
   "type": "module",
-  "version": "1.11.0",
+  "version": "1.13.0",
   "scripts": {
     "build": "pnpm run build:ts && pnpm run build:metadata && pnpm build:hash",
     "build:all": "pnpm run build && pnpm run build:storybook",