@synergy-design-system/mcp 2.6.1 → 2.7.0

package/metadata/packages/tokens/dark.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.4.0
+ * @synergy-design-system/tokens version 3.4.1
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -321,6 +321,12 @@
   --syn-range-tick-color: var(--syn-color-neutral-600);
   --syn-range-track-color-active: var(--syn-interactive-emphasis-color);
   --syn-readonly-background-color: var(--syn-color-neutral-300);
+  --syn-readonly-border-color: var(--syn-typography-color-text);
+  --syn-readonly-color-text: var(--syn-color-neutral-500);
+  --syn-readonly-icon-color: var(--syn-color-neutral-500);
+  --syn-readonly-icon-color-clearable: var(--syn-color-neutral-300);
+  --syn-readonly-icon-color-expand: var(--syn-color-neutral-500);
+  --syn-readonly-indicator-color: var(--syn-typography-color-text);
   --syn-shadow-medium: 0px 1px 2px 0px rgba(13, 13, 13, 0.08), 0px 1px 4px 0px rgba(13, 13, 13, 0.08), 0px 2px 8px 0px rgba(13, 13, 13, 0.08);
   --syn-shadow-large: 0px 0px 3px 0px rgba(13, 13, 13, 0.12), 0px 2px 6px 0px rgba(13, 13, 13, 0.12), 0px 3px 8px 0px rgba(13, 13, 13, 0.16);
   --syn-shadow-x-large: 0px 1px 4px 0px rgba(13, 13, 13, 0.12), 0px 8px 24px 0px rgba(13, 13, 13, 0.12), 0px 16px 48px 0px rgba(13, 13, 13, 0.16);

package/metadata/packages/tokens/index.js

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.4.0
+ * @synergy-design-system/tokens version 3.4.1
  * SICK Global UX Foundation
  */
 
@@ -1573,6 +1573,36 @@ export const SynRangeTrackColorActive = 'var(--syn-range-track-color-active)';
  */
 export const SynReadonlyBackgroundColor = 'var(--syn-readonly-background-color)';
 
+/**
+ * @type {string}
+ */
+export const SynReadonlyBorderColor = 'var(--syn-readonly-border-color)';
+
+/**
+ * @type {string}
+ */
+export const SynReadonlyColorText = 'var(--syn-readonly-color-text)';
+
+/**
+ * @type {string}
+ */
+export const SynReadonlyIconColor = 'var(--syn-readonly-icon-color)';
+
+/**
+ * @type {string}
+ */
+export const SynReadonlyIconColorClearable = 'var(--syn-readonly-icon-color-clearable)';
+
+/**
+ * @type {string}
+ */
+export const SynReadonlyIconColorExpand = 'var(--syn-readonly-icon-color-expand)';
+
+/**
+ * @type {string}
+ */
+export const SynReadonlyIndicatorColor = 'var(--syn-readonly-indicator-color)';
+
 /**
  * @type {string}
  */

package/metadata/packages/tokens/light.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.4.0
+ * @synergy-design-system/tokens version 3.4.1
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -321,6 +321,12 @@
   --syn-range-tick-color: var(--syn-color-neutral-500);
   --syn-range-track-color-active: var(--syn-interactive-emphasis-color);
   --syn-readonly-background-color: #e6e1dc;
+  --syn-readonly-border-color: var(--syn-typography-color-text);
+  --syn-readonly-color-text: var(--syn-color-neutral-400);
+  --syn-readonly-icon-color: var(--syn-color-neutral-400);
+  --syn-readonly-icon-color-clearable: var(--syn-color-neutral-300);
+  --syn-readonly-icon-color-expand: var(--syn-color-neutral-400);
+  --syn-readonly-indicator-color: var(--syn-typography-color-text);
   --syn-shadow-medium: 0px 1px 2px 0px rgba(13, 13, 13, 0.08), 0px 1px 4px 0px rgba(13, 13, 13, 0.08), 0px 2px 8px 0px rgba(13, 13, 13, 0.08);
   --syn-shadow-large: 0px 0px 3px 0px rgba(13, 13, 13, 0.12), 0px 2px 6px 0px rgba(13, 13, 13, 0.12), 0px 3px 8px 0px rgba(13, 13, 13, 0.16);
   --syn-shadow-x-large: 0px 1px 4px 0px rgba(13, 13, 13, 0.12), 0px 8px 24px 0px rgba(13, 13, 13, 0.12), 0px 16px 48px 0px rgba(13, 13, 13, 0.16);

package/metadata/packages/tokens/sick2018_dark.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.4.0
+ * @synergy-design-system/tokens version 3.4.1
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -321,6 +321,12 @@
   --syn-range-tick-color: var(--syn-color-neutral-400);
   --syn-range-track-color-active: var(--syn-interactive-emphasis-color);
   --syn-readonly-background-color: var(--syn-color-neutral-300);
+  --syn-readonly-border-color: var(--syn-typography-color-text);
+  --syn-readonly-color-text: var(--syn-color-neutral-500);
+  --syn-readonly-icon-color: var(--syn-color-neutral-500);
+  --syn-readonly-icon-color-clearable: var(--syn-color-neutral-400);
+  --syn-readonly-icon-color-expand: var(--syn-color-neutral-500);
+  --syn-readonly-indicator-color: var(--syn-typography-color-text);
   --syn-shadow-medium: 0px 1px 2px 0px rgba(49, 55, 58, 0.08), 0px 1px 4px 0px rgba(49, 55, 58, 0.08), 0px 2px 8px 0px rgba(49, 55, 58, 0.08);
   --syn-shadow-large: 0px 0px 3px 0px rgba(49, 55, 58, 0.12), 0px 2px 6px 0px rgba(49, 55, 58, 0.12), 0px 3px 8px 0px rgba(49, 55, 58, 0.16);
   --syn-shadow-x-large: 0px 1px 4px 0px rgba(49, 55, 58, 0.12), 0px 8px 24px 0px rgba(49, 55, 58, 0.12), 0px 16px 48px 0px rgba(49, 55, 58, 0.16);

package/metadata/packages/tokens/sick2018_light.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.4.0
+ * @synergy-design-system/tokens version 3.4.1
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -321,6 +321,12 @@
   --syn-range-tick-color: var(--syn-color-neutral-400);
   --syn-range-track-color-active: var(--syn-interactive-emphasis-color);
   --syn-readonly-background-color: var(--syn-color-neutral-300);
+  --syn-readonly-border-color: var(--syn-typography-color-text);
+  --syn-readonly-color-text: var(--syn-color-neutral-500);
+  --syn-readonly-icon-color: var(--syn-color-neutral-500);
+  --syn-readonly-icon-color-clearable: var(--syn-color-neutral-400);
+  --syn-readonly-icon-color-expand: var(--syn-color-neutral-500);
+  --syn-readonly-indicator-color: var(--syn-typography-color-text);
   --syn-shadow-medium: 0px 1px 2px 0px rgba(49, 55, 58, 0.08), 0px 1px 4px 0px rgba(49, 55, 58, 0.08), 0px 2px 8px 0px rgba(49, 55, 58, 0.08);
   --syn-shadow-large: 0px 0px 3px 0px rgba(49, 55, 58, 0.12), 0px 2px 6px 0px rgba(49, 55, 58, 0.12), 0px 3px 8px 0px rgba(49, 55, 58, 0.16);
   --syn-shadow-x-large: 0px 1px 4px 0px rgba(49, 55, 58, 0.12), 0px 8px 24px 0px rgba(49, 55, 58, 0.12), 0px 16px 48px 0px rgba(49, 55, 58, 0.16);

package/metadata/packages/tokens/sick2025_dark.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.4.0
+ * @synergy-design-system/tokens version 3.4.1
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -321,6 +321,12 @@
   --syn-range-tick-color: var(--syn-color-neutral-600);
   --syn-range-track-color-active: var(--syn-interactive-emphasis-color);
   --syn-readonly-background-color: var(--syn-color-neutral-300);
+  --syn-readonly-border-color: var(--syn-typography-color-text);
+  --syn-readonly-color-text: var(--syn-color-neutral-500);
+  --syn-readonly-icon-color: var(--syn-color-neutral-500);
+  --syn-readonly-icon-color-clearable: var(--syn-color-neutral-300);
+  --syn-readonly-icon-color-expand: var(--syn-color-neutral-500);
+  --syn-readonly-indicator-color: var(--syn-typography-color-text);
   --syn-shadow-medium: 0px 1px 2px 0px rgba(13, 13, 13, 0.08), 0px 1px 4px 0px rgba(13, 13, 13, 0.08), 0px 2px 8px 0px rgba(13, 13, 13, 0.08);
   --syn-shadow-large: 0px 0px 3px 0px rgba(13, 13, 13, 0.12), 0px 2px 6px 0px rgba(13, 13, 13, 0.12), 0px 3px 8px 0px rgba(13, 13, 13, 0.16);
   --syn-shadow-x-large: 0px 1px 4px 0px rgba(13, 13, 13, 0.12), 0px 8px 24px 0px rgba(13, 13, 13, 0.12), 0px 16px 48px 0px rgba(13, 13, 13, 0.16);

package/metadata/packages/tokens/sick2025_light.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.4.0
+ * @synergy-design-system/tokens version 3.4.1
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -321,6 +321,12 @@
   --syn-range-tick-color: var(--syn-color-neutral-500);
   --syn-range-track-color-active: var(--syn-interactive-emphasis-color);
   --syn-readonly-background-color: #e6e1dc;
+  --syn-readonly-border-color: var(--syn-typography-color-text);
+  --syn-readonly-color-text: var(--syn-color-neutral-400);
+  --syn-readonly-icon-color: var(--syn-color-neutral-400);
+  --syn-readonly-icon-color-clearable: var(--syn-color-neutral-300);
+  --syn-readonly-icon-color-expand: var(--syn-color-neutral-400);
+  --syn-readonly-indicator-color: var(--syn-typography-color-text);
   --syn-shadow-medium: 0px 1px 2px 0px rgba(13, 13, 13, 0.08), 0px 1px 4px 0px rgba(13, 13, 13, 0.08), 0px 2px 8px 0px rgba(13, 13, 13, 0.08);
   --syn-shadow-large: 0px 0px 3px 0px rgba(13, 13, 13, 0.12), 0px 2px 6px 0px rgba(13, 13, 13, 0.12), 0px 3px 8px 0px rgba(13, 13, 13, 0.16);
   --syn-shadow-x-large: 0px 1px 4px 0px rgba(13, 13, 13, 0.12), 0px 8px 24px 0px rgba(13, 13, 13, 0.12), 0px 16px 48px 0px rgba(13, 13, 13, 0.16);

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

@@ -66,6 +66,42 @@ Use the disabled attribute to disable the checkbox.
 
 ---
 
+## Readonly
+
+Add the readonly attribute to draw a read-only checkbox.
+
+```html
+<div
+  style="display: flex; flex-direction: column; gap: var(--syn-spacing-large)"
+>
+  <syn-checkbox name="a" value="a" readonly="" title="" size="medium" form=""
+    >Read only content</syn-checkbox
+  >
+  <syn-checkbox
+    name="b"
+    value="b"
+    readonly=""
+    indeterminate=""
+    title=""
+    size="medium"
+    form=""
+    >Read only content (indet)</syn-checkbox
+  >
+  <syn-checkbox
+    name="c"
+    value="c"
+    readonly=""
+    checked=""
+    title=""
+    size="medium"
+    form=""
+    >Read only content (checked)</syn-checkbox
+  >
+</div>
+```
+
+---
+
 ## Sizes
 
 Use the size attribute to change a checkbox’s size.

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

@@ -441,6 +441,98 @@ Use the disabled attribute to disable a combobox.
 
 ---
 
+## Readonly
+
+Add the readonly attribute to draw a read-only combobox.
+
+```html
+<div
+  style="display: flex; flex-direction: column; gap: var(--syn-spacing-large)"
+>
+  <syn-combobox
+    placeholder="Readonly"
+    value="option-1"
+    readonly=""
+    size="medium"
+    placement="bottom"
+    form=""
+  >
+    <syn-icon
+      name="wallpaper"
+      slot="prefix"
+      aria-hidden="true"
+      library="default"
+    ></syn-icon>
+    <syn-option
+      value="option-1"
+      role="option"
+      aria-selected="false"
+      aria-disabled="false"
+      id="syn-combobox-option-0"
+      >Option 1</syn-option
+    >
+    <syn-option
+      value="option-2"
+      role="option"
+      aria-selected="false"
+      aria-disabled="false"
+      id="syn-combobox-option-1"
+      hidden=""
+      >Option 2</syn-option
+    >
+    <syn-option
+      value="option-3"
+      role="option"
+      aria-selected="false"
+      aria-disabled="false"
+      id="syn-combobox-option-2"
+      hidden=""
+      >Option 3</syn-option
+    >
+  </syn-combobox>
+  <syn-combobox
+    max-options-visible="2"
+    multiple=""
+    placeholder="Readonly"
+    value="option-1 option-2 option-3"
+    readonly=""
+    size="medium"
+    placement="bottom"
+    form=""
+  >
+    <syn-option
+      value="option-1"
+      role="option"
+      aria-selected="false"
+      aria-disabled="false"
+      id="syn-combobox-option-0"
+      hidden=""
+      >Option 1</syn-option
+    >
+    <syn-option
+      value="option-2"
+      role="option"
+      aria-selected="false"
+      aria-disabled="false"
+      id="syn-combobox-option-1"
+      hidden=""
+      >Option 2</syn-option
+    >
+    <syn-option
+      value="option-3"
+      role="option"
+      aria-selected="false"
+      aria-disabled="false"
+      id="syn-combobox-option-2"
+      hidden=""
+      >Option 3</syn-option
+    >
+  </syn-combobox>
+</div>
+```
+
+---
+
 ## Multiple
 
 To allow multiple options to be selected, use the multiple attribute. It’s a good practice to use clearable when this option is enabled. To set multiple values at once, set value to a space-delimited list of values. Use the max-options-visible attribute to define the maximum number of selected options that will be visible. After the maximum, "+n" will be shown to indicate the number of additional items that are selected.
@@ -618,6 +710,52 @@ This restricts the combobox to only allow selections from the available options.
 
 ---
 
+## No Results Found
+
+A “No results found” message is displayed, when the search term doesn’t match the options.
+
+```html
+<syn-combobox
+  id="no-results"
+  value="Search term"
+  restricted=""
+  size="medium"
+  placement="bottom"
+  form=""
+  open=""
+>
+  <syn-option
+    role="option"
+    aria-selected="false"
+    aria-disabled="false"
+    value=""
+    id="syn-combobox-option-0"
+    hidden=""
+    >Option 1</syn-option
+  >
+  <syn-option
+    role="option"
+    aria-selected="false"
+    aria-disabled="false"
+    value=""
+    id="syn-combobox-option-1"
+    hidden=""
+    >Option 2</syn-option
+  >
+  <syn-option
+    role="option"
+    aria-selected="false"
+    aria-disabled="false"
+    value=""
+    id="syn-combobox-option-2"
+    hidden=""
+    >Option 3</syn-option
+  >
+</syn-combobox>
+```
+
+---
+
 ## Sizes
 
 Use the size attribute to change a combobox size.

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

@@ -105,6 +105,30 @@ Use the disabled attribute to disable a file input.
 
 ---
 
+## Readonly
+
+Use the readonly attribute to set a file input to a readonly state.
+
+```html
+<div style="display: flex; flex-direction: column; gap: 1rem">
+  <syn-file
+    readonly=""
+    label="This is a label"
+    size="medium"
+    form=""
+  ></syn-file>
+  <syn-file
+    readonly=""
+    droparea=""
+    label="This is a label"
+    size="medium"
+    form=""
+  ></syn-file>
+</div>
+```
+
+---
+
 ## Sizes
 
 Use the size attribute to change the component's size.

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

@@ -94,7 +94,7 @@ Add the password-toggle attribute to add a toggle button that will show the pass
 
 ## Readonly Inputs
 
-Add the read-only attribute to draw a read-only input.
+Add the readonly attribute to draw a read-only input.
 
 ```html
 <syn-input

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

@@ -74,6 +74,27 @@ Use the disabled attribute to disable a radio.
 
 ---
 
+## Readonly
+
+Add the readonly attribute to draw a read-only radio.
+
+```html
+<syn-radio-group value="1" size="medium" form="">
+  <syn-radio
+    value="1"
+    readonly=""
+    role="radio"
+    tabindex="0"
+    aria-disabled="true"
+    aria-checked="true"
+    size="medium"
+    >Read-only content</syn-radio
+  >
+</syn-radio-group>
+```
+
+---
+
 ## Sizes
 
 Add the size attribute to the Radio Group to change the radios’ size.

package/metadata/static/components/syn-radio-group/docs.md

@@ -255,6 +255,52 @@ Radios and radio buttons can be disabled by adding the disabled attribute to the
 
 ---
 
+## Readonly
+
+Add the readonly attribute to a radio to draw it in a readonly state.
+
+```html
+<syn-radio-group
+  label="This is a label"
+  help-text="This is readonly"
+  name="a"
+  value="2"
+  size="medium"
+  form=""
+>
+  <syn-radio
+    value="1"
+    role="radio"
+    tabindex="-1"
+    aria-disabled="false"
+    aria-checked="false"
+    size="medium"
+    >Option</syn-radio
+  >
+  <syn-radio
+    value="2"
+    readonly=""
+    role="radio"
+    tabindex="0"
+    aria-disabled="true"
+    aria-checked="true"
+    size="medium"
+    >Option</syn-radio
+  >
+  <syn-radio
+    value="3"
+    role="radio"
+    tabindex="-1"
+    aria-disabled="false"
+    aria-checked="false"
+    size="medium"
+    >Option</syn-radio
+  >
+</syn-radio-group>
+```
+
+---
+
 ## Sizes
 
 The size of Radios and Radio Buttons will be determined by the Radio Group’s size attribute.

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

@@ -107,6 +107,25 @@ The focus event gives the user feedback that the Range has been focused by the k
 
 ---
 
+## Readonly
+
+Add the readonly attribute to a range to draw it in a readonly state.
+
+```html
+<form>
+  <syn-range
+    max="100"
+    min="0"
+    value="50"
+    readonly=""
+    size="medium"
+    form=""
+  ></syn-range>
+</form>
+```
+
+---
+
 ## Sizes
 
 Use the size attribute to change a range’s size.

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

@@ -242,6 +242,87 @@ Use the disabled attribute to disable a select.
 
 ---
 
+## Readonly
+
+Add the readonly attribute to a select to draw it in a readonly state.
+
+```html
+<div
+  style="display: flex; flex-direction: column; gap: var(--syn-spacing-large)"
+>
+  <syn-select
+    placeholder="Readonly"
+    value="option-1"
+    readonly=""
+    size="medium"
+    placement="bottom"
+    form=""
+  >
+    <syn-icon
+      name="wallpaper"
+      slot="prefix"
+      aria-hidden="true"
+      library="default"
+    ></syn-icon>
+    <syn-option
+      value="option-1"
+      role="option"
+      aria-selected="true"
+      aria-disabled="false"
+      >Option 1</syn-option
+    >
+    <syn-option
+      value="option-2"
+      role="option"
+      aria-selected="false"
+      aria-disabled="false"
+      >Option 2</syn-option
+    >
+    <syn-option
+      value="option-3"
+      role="option"
+      aria-selected="false"
+      aria-disabled="false"
+      >Option 3</syn-option
+    >
+  </syn-select>
+  <syn-select
+    max-options-visible="2"
+    multiple=""
+    placeholder="Readonly"
+    value="option-1 option-2 option-3"
+    readonly=""
+    size="medium"
+    placement="bottom"
+    form=""
+  >
+    <syn-option
+      value="option-1"
+      role="option"
+      aria-selected="true"
+      aria-disabled="false"
+      >Option 1</syn-option
+    >
+    <syn-option
+      value="option-2"
+      role="option"
+      aria-selected="true"
+      aria-disabled="false"
+      >Option 2</syn-option
+    >
+    <syn-option
+      value="option-3"
+      role="option"
+      aria-selected="true"
+      aria-disabled="false"
+      >Option 3</syn-option
+    >
+  </syn-select>
+</div>
+```
+
+---
+
 ## Multiple
 
 To allow multiple options to be selected, use the multiple attribute. It’s a good practice to use clearable when this option is enabled. To set multiple values at once, set value to a space-delimited list of values.

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

@@ -38,6 +38,28 @@ Use the disabled attribute to disable the switch.
 
 ---
 
+## Readonly
+
+Add the readonly attribute to draw a read-only switch.
+
+```html
+<div
+  style="
+    display: flex;
+    gap: var(--syn-spacing-large);
+    flex-direction: column;
+    align-items: flex-start;
+  "
+>
+  <syn-switch readonly="" title="" size="medium" form="">Unchecked</syn-switch>
+  <syn-switch checked="" readonly="" title="" size="medium" form=""
+    >Checked</syn-switch
+  >
+</div>
+```
+
+---
+
 ## Sizes
 
 Use the size attribute to change a switch’s size.

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

@@ -93,7 +93,7 @@ Use the placeholder attribute to add a placeholder.
 
 ## Readonly Textareas
 
-Add the read-only attribute to draw a read-only textarea.
+Add the readonly attribute to draw a read-only textarea.
 
 ```html
 <syn-textarea