@synergy-design-system/mcp 2.6.0 → 2.7.0

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

@@ -1,28 +1,29 @@
-/* eslint-disable */
 import { css } from 'lit';
 
 export default css`
-	/* stylelint-disable */
+  /* stylelint-disable no-descending-specificity */
+  /* stylelint-disable plugin/no-unsupported-browser-features */
+  /* stylelint-disable property-no-vendor-prefix */
   :host {
     display: block;
   }
 
   .textarea {
-    display: grid;
     align-items: center;
-    position: relative;
-    width: 100%;
+    cursor: text;
+    display: grid;
     font-family: var(--syn-input-font-family);
     font-weight: var(--syn-input-font-weight);
-    line-height: var(--syn-line-height-normal);
     letter-spacing: var(--syn-input-letter-spacing);
-    vertical-align: middle;
+    line-height: var(--syn-line-height-normal);
+    position: relative;
     transition:
       var(--syn-transition-fast) color,
       var(--syn-transition-fast) border,
       var(--syn-transition-fast) box-shadow,
       var(--syn-transition-fast) background-color;
-    cursor: text;
+    vertical-align: middle;
+    width: 100%;
   }
 
   /* Standard textareas */
@@ -35,6 +36,7 @@ export default css`
     background-color: var(--syn-input-background-color-hover);
     border-color: var(--syn-input-border-color-hover);
   }
+
   .textarea--standard:hover:not(.textarea--disabled) .textarea__control {
     color: var(--syn-input-color-hover);
   }
@@ -42,8 +44,8 @@ export default css`
   .textarea--standard.textarea--focused:not(.textarea--disabled) {
     background-color: var(--syn-input-background-color-focus);
     border-color: var(--syn-input-border-color-focus);
-    color: var(--syn-input-color-focus);
     box-shadow: 0 0 0 var(--syn-focus-ring-width) var(--syn-input-focus-ring-color);
+    color: var(--syn-input-color-focus);
   }
 
   .textarea--standard.textarea--focused:not(.textarea--disabled) .textarea__control {
@@ -53,8 +55,8 @@ export default css`
   .textarea--standard.textarea--disabled {
     background-color: var(--syn-input-background-color-disabled);
     border-color: var(--syn-input-border-color-disabled);
-    opacity: 0.5;
     cursor: not-allowed;
+    opacity: var(--syn-input-disabled-opacity); /* #429: Use token for opacity */
   }
 
   .textarea__control,
@@ -63,9 +65,9 @@ export default css`
   }
 
   .textarea__size-adjuster {
-    visibility: hidden;
-    pointer-events: none;
     opacity: 0;
+    pointer-events: none;
+    visibility: hidden;
   }
 
   .textarea--standard.textarea--disabled .textarea__control {
@@ -78,8 +80,8 @@ export default css`
 
   /* Readonly textareas */
   .textarea--readonly {
-    border: none;
     background-color: var(--syn-input-readonly-background-color);
+    border: none;
     color: var(--syn-input-color);
   }
 
@@ -95,21 +97,29 @@ export default css`
 
   .textarea--readonly.textarea--disabled {
     background-color: var(--syn-input-readonly-background-color-disabled);
-    opacity: 0.5;
     cursor: not-allowed;
+    opacity: var(--syn-input-disabled-opacity);
   }
 
   .textarea__control {
+    -webkit-appearance: none;
+    appearance: none;
+    background: none;
+    border: none;
+    box-shadow: none;
+    color: var(--syn-input-color);
+    cursor: inherit;
     font-family: inherit;
     font-size: inherit;
     font-weight: inherit;
     line-height: 1.4;
-    color: var(--syn-input-color);
-    border: none;
-    background: none;
-    box-shadow: none;
-    cursor: inherit;
-    -webkit-appearance: none;
+
+    /*
+    Unfortunately we need to add a small margin to the textarea control. This is needed for the new sick 2025 theme,
+    as because of the big border-radius the resize icon will otherwise overlap with the border
+    This added margin needs to be subtracted from the padding of the textarea
+    */
+    margin: var(--syn-spacing-3x-small);
   }
 
   .textarea__control::-webkit-search-decoration,
@@ -117,12 +127,13 @@ export default css`
   .textarea__control::-webkit-search-results-button,
   .textarea__control::-webkit-search-results-decoration {
     -webkit-appearance: none;
+    appearance: none;
   }
 
   .textarea__control::placeholder {
     color: var(--syn-input-placeholder-color);
-    user-select: none;
     -webkit-user-select: none;
+    user-select: none;
   }
 
   .textarea__control:focus {
@@ -132,14 +143,17 @@ export default css`
   /*
    * Size modifiers
    */
-
   .textarea--small {
     border-radius: var(--syn-input-border-radius-small);
     font-size: var(--syn-input-font-size-small);
   }
 
   .textarea--small .textarea__control {
-    padding: 0.5em var(--syn-input-spacing-small);
+    /* TODO: Wait for Design response, how to handle this left / right spacing. Design has "--syn-input-spacing-medium" for all sizes,
+      but we have different (coming from shoelace) */
+
+    /* We need to subtract the added margin of the textarea control from the padding */
+    padding: calc(var(--syn-spacing-x-small) - var(--syn-spacing-3x-small)) calc(var(--syn-input-spacing-small) - var(--syn-spacing-3x-small));
   }
 
   .textarea--medium {
@@ -148,7 +162,8 @@ export default css`
   }
 
   .textarea--medium .textarea__control {
-    padding: 0.5em var(--syn-input-spacing-medium);
+    /* We need to subtract the added margin of the textarea control from the padding */
+    padding: calc(var(--syn-spacing-x-small) - var(--syn-spacing-3x-small)) calc(var(--syn-input-spacing-medium) - var(--syn-spacing-3x-small));
   }
 
   .textarea--large {
@@ -157,13 +172,16 @@ export default css`
   }
 
   .textarea--large .textarea__control {
-    padding: 0.5em var(--syn-input-spacing-large);
+    /* TODO: Wait for Design response, how to handle this left / right spacing. Design has "--syn-input-spacing-medium" for all sizes,
+      but we have different (coming from shoelace) */
+
+    /* We need to subtract the added margin of the textarea control from the padding */
+    padding: calc(var(--syn-spacing-x-small) - var(--syn-spacing-3x-small)) calc(var(--syn-input-spacing-large) - var(--syn-spacing-3x-small));
   }
 
   /*
    * Resize types
    */
-
   .textarea--resize-none .textarea__control {
     resize: none;
   }
@@ -174,7 +192,17 @@ export default css`
 
   .textarea--resize-auto .textarea__control {
     height: auto;
-    resize: none;
     overflow-y: hidden;
+    resize: none;
+  }
+
+  /* Validation */
+  :host([data-user-invalid]) .textarea--standard {
+    border-color: var(--syn-input-border-color-focus-error);
+  }
+
+  :host([data-user-invalid]) .textarea--standard.textarea--focused:not(.textarea--disabled) {
+    border-color: var(--syn-input-border-color-focus-error);
+    box-shadow: 0 0 0 var(--syn-focus-ring-width) var(--syn-input-focus-ring-error);
   }
 `;

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

@@ -10,10 +10,8 @@ import { property, query, state } from 'lit/decorators.js';
 import { watch } from '../../internal/watch.js';
 import componentStyles from '../../styles/component.styles.js';
 import formControlStyles from '../../styles/form-control.styles.js';
-import formControlCustomStyles from '../../styles/form-control.custom.styles.js';
 import SynergyElement from '../../internal/synergy-element.js';
 import styles from './textarea.styles.js';
-import customStyles from './textarea.custom.styles.js';
 import type { CSSResultGroup } from 'lit';
 import type { SynergyFormControl } from '../../internal/synergy-element.js';
 import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';
@@ -42,7 +40,7 @@ import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator
  */
 @enableDefaultSettings('SynTextarea')
 export default class SynTextarea extends SynergyElement implements SynergyFormControl {
-  static styles: CSSResultGroup = [componentStyles, formControlStyles, styles, formControlCustomStyles, customStyles];
+  static styles: CSSResultGroup = [componentStyles, formControlStyles, styles];
 
   private readonly formControlController = new FormControlController(this, {
     assumeInteractionOn: ['syn-blur', 'syn-input']

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

@@ -1,5 +1,43 @@
 # Changelog
 
+## 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
+
+- [#1196](https://github.com/synergy-design-system/synergy-design-system/pull/1196) [`6a9b934`](https://github.com/synergy-design-system/synergy-design-system/commit/6a9b9349f6404a638fadd842e3f2fd8216fd81cd) Thanks [@kirchsuSICKAG](https://github.com/kirchsuSICKAG)! - Released on: 2026-02-25
+
+  fix: 🐛 prio nav with only one item (#1195)
+
+- Updated dependencies []:
+  - @synergy-design-system/tokens@3.4.1
+
 ## 3.4.0
 
 ### Minor Changes

package/metadata/packages/tokens/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Changelog
 
+## 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
 
 ### Minor Changes

package/metadata/packages/tokens/dark.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.3.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.3.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.3.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.3.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.3.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.3.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.3.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.