@synergy-design-system/mcp 2.6.1 → 2.8.0

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

@@ -1,5 +1,48 @@
 # Changelog
 
+## 3.6.0
+
+### Minor Changes
+
+- [#1192](https://github.com/synergy-design-system/synergy-design-system/pull/1192) [`31c54c0`](https://github.com/synergy-design-system/synergy-design-system/commit/31c54c04a651a14e20bc5f4b2aff1bd92ad26bc0) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-03-02
+
+  feat: ✨ New variant `tooltip` for `<syn-validate>` (#664)
+
+  `<syn-validate>` received the option to show validation errors using `<syn-tooltip>`.
+  To use this feature, set the `variant` property to `tooltip`.
+
+### Patch Changes
+
+- Updated dependencies [[`31c54c0`](https://github.com/synergy-design-system/synergy-design-system/commit/31c54c04a651a14e20bc5f4b2aff1bd92ad26bc0)]:
+  - @synergy-design-system/tokens@3.6.0
+
+## 3.5.0
+
+### Minor Changes
+
+- [#1189](https://github.com/synergy-design-system/synergy-design-system/pull/1189) [`a4f49ac`](https://github.com/synergy-design-system/synergy-design-system/commit/a4f49ac79a660ef5b8d1b380fe9fcd2159dc9b78) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-02-26
+
+  feat: ✨ Added readonly for various form fields (#1171, #1172, #1173, #1174, #1175, #1176, #1177, #1178)
+
+  Applies to:
+  - `<syn-checkbox>`
+  - `<syn-combobox>`
+  - `<syn-file>`
+  - `<syn-radio>`
+  - `<syn-radio-group>`
+  - `<syn-range>`
+  - `<syn-select>`
+  - `<syn-switch>`
+
+  Form elements now support being displayed as `readonly` fields.
+
+  Field marked `readonly` may receive focus, but their value cannot be changed by customer inputs.
+
+### Patch Changes
+
+- Updated dependencies [[`a4f49ac`](https://github.com/synergy-design-system/synergy-design-system/commit/a4f49ac79a660ef5b8d1b380fe9fcd2159dc9b78)]:
+  - @synergy-design-system/tokens@3.5.0
+
 ## 3.4.1
 
 ### Patch Changes

package/metadata/packages/tokens/CHANGELOG.md

@@ -1,5 +1,38 @@
 # Changelog
 
+## 3.6.0
+
+### Minor Changes
+
+- [#1192](https://github.com/synergy-design-system/synergy-design-system/pull/1192) [`31c54c0`](https://github.com/synergy-design-system/synergy-design-system/commit/31c54c04a651a14e20bc5f4b2aff1bd92ad26bc0) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-03-02
+
+  feat: ✨ New variant `tooltip` for `<syn-validate>` (#664)
+
+  `<syn-validate>` received the option to show validation errors using `<syn-tooltip>`.
+  To use this feature, set the `variant` property to `tooltip`.
+
+## 3.5.0
+
+### Minor Changes
+
+- [#1189](https://github.com/synergy-design-system/synergy-design-system/pull/1189) [`a4f49ac`](https://github.com/synergy-design-system/synergy-design-system/commit/a4f49ac79a660ef5b8d1b380fe9fcd2159dc9b78) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-02-26
+
+  feat: ✨ Added readonly for various form fields (#1171, #1172, #1173, #1174, #1175, #1176, #1177, #1178)
+
+  Applies to:
+  - `<syn-checkbox>`
+  - `<syn-combobox>`
+  - `<syn-file>`
+  - `<syn-radio>`
+  - `<syn-radio-group>`
+  - `<syn-range>`
+  - `<syn-select>`
+  - `<syn-switch>`
+
+  Form elements now support being displayed as `readonly` fields.
+
+  Field marked `readonly` may receive focus, but their value cannot be changed by customer inputs.
+
 ## 3.4.1
 
 ## 3.4.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.5.0
  * 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.5.0
  * 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.5.0
  * 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.5.0
  * 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.5.0
  * 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.5.0
  * 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.5.0
  * 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.