@synergy-design-system/mcp 2.6.0 → 2.7.0

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

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

@@ -142,3 +142,76 @@ Set the trigger attribute to click to toggle the tooltip on click instead of
   >
 </syn-tooltip>
 ```
+
+---
+
+## Manual Trigger
+
+Tooltips can be controlled programmatically by setting the trigger attribute to manual. Use the open attribute to control when the tooltip is shown.
+
+```html
+<syn-button style="margin-right: 4rem" title="" variant="outline" size="medium"
+  >Toggle Manually</syn-button
+>
+<syn-tooltip
+  content="This is an avatar"
+  trigger="manual"
+  class="manual-tooltip"
+  open=""
+>
+  <syn-icon-button
+    name="person"
+    label="Person"
+    size="medium"
+    color="neutral"
+  ></syn-icon-button>
+</syn-tooltip>
+```
+
+---
+
+## Removing Arrows
+
+You can control the size of tooltip arrows by overriding the --syn-tooltip-arrow-size design token. To remove them, set the value to 0 as shown below.
+
+```html
+<syn-tooltip
+  content="This is a tooltip"
+  style="--syn-tooltip-arrow-size: 0"
+  open=""
+>
+  <syn-button title="" variant="outline" size="medium">No Arrow</syn-button>
+</syn-tooltip>
+```
+
+---
+
+## HTML In Tooltips
+
+Use the content slot to create tooltips with HTML content. Tooltips are designed only for text and presentational elements. Avoid placing interactive content, such as buttons, links, and form controls, in a tooltip.
+
+```html
+<syn-tooltip open="">
+  <div slot="content">
+    I'm not <strong>just</strong> a tooltip, I'm a <em>tooltip</em> with HTML!
+  </div>
+
+  <syn-button title="" variant="outline" size="medium">Hover me</syn-button>
+</syn-tooltip>
+```
+
+---
+
+## Setting A Maximum Width
+
+Use the --max-width custom property to change the width the tooltip can grow to before wrapping occurs.
+
+```html
+<syn-tooltip
+  style="--max-width: 80px"
+  content="This tooltip will wrap after only 80 pixels."
+  open=""
+>
+  <syn-button title="" variant="outline" size="medium">Hover me</syn-button>
+</syn-tooltip>
+```

package/package.json

@@ -28,12 +28,12 @@
     "serve-handler": "^6.1.6",
     "ts-jest": "^29.4.6",
     "typescript": "^5.9.3",
-    "@synergy-design-system/components": "3.4.0",
+    "@synergy-design-system/docs": "0.1.0",
     "@synergy-design-system/eslint-config-syn": "^0.1.0",
     "@synergy-design-system/fonts": "1.0.3",
-    "@synergy-design-system/docs": "0.1.0",
     "@synergy-design-system/styles": "2.0.1",
-    "@synergy-design-system/tokens": "^3.4.0"
+    "@synergy-design-system/tokens": "^3.5.0",
+    "@synergy-design-system/components": "3.5.0"
   },
   "exports": {
     ".": {
@@ -67,7 +67,7 @@
     "directory": "packages/mcp"
   },
   "type": "module",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "scripts": {
     "build": "pnpm run build:ts && pnpm run build:metadata && pnpm build:hash",
     "build:all": "pnpm run build && pnpm run build:storybook",

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

@@ -1,86 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  .checkbox {
-    /* #1083: This adds spacing around multi-line labels */
-    padding: var(--syn-spacing-2x-small) 0;
-  }
-
-  .checkbox--small {
-    padding: var(--syn-spacing-3x-small) 0;
-  }
-
-  .checkbox__control {
-    border-radius: var(--syn-checkbox-border-radius);
-
-    /* #1083: This adds spacing around multi-line labels */
-    margin: 0.1em 0;
-  }
-
-  /* Checked/indeterminate */
-  .checkbox--checked .checkbox__control,
-  .checkbox--indeterminate .checkbox__control {
-    background-color: var(--syn-interactive-emphasis-color);
-    border-color: var(--syn-interactive-emphasis-color);
-  }
-
-  :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);
-  }
-
-  /**
-   * Hover
-   * Applies the hover state to the whole component
-   */
-  .checkbox:not(.checkbox--checked):not(.checkbox--disabled):hover .checkbox__control {
-    background-color: var(--syn-input-background-color-hover);
-    border-color: var(--syn-input-border-color-hover);
-  }
-
-  /**
-   * Checked/indeterminate + hover
-   * Applies the hover state to the whole component
-   */
-  .checkbox.checkbox--checked:not(.checkbox--disabled):hover .checkbox__control,
-  .checkbox.checkbox--indeterminate:not(.checkbox--disabled):hover .checkbox__control {
-    background-color: var(--syn-interactive-emphasis-color-hover);
-    border-color: var(--syn-interactive-emphasis-color-hover);
-  }
-
-  /*
-   * #443: Add active styles
-   * The checked and unchecked states have different active colors
-   * Note the fallback is defined to match the hover color.
-   * This is done to make sure no active state is shown at all if no active color is defined.
-   * Still better than showing one for the unchecked state but not for the checked state.
-   */
-  .checkbox:not(.checkbox--checked):not(.checkbox--disabled):active .checkbox__control {
-    border-color: var(--syn-input-border-color-active);
-  }
-
-  /* Checked/indeterminate */
-  .checkbox.checkbox--checked:not(.checkbox--disabled):active .checkbox__control,
-  .checkbox.checkbox--indeterminate:not(.checkbox--disabled):active .checkbox__control {
-    background: var(--syn-interactive-emphasis-color-active);
-    border-color: var(--syn-interactive-emphasis-color-active);
-  }
-
-  .checkbox__label {
-    align-self: center;
-    line-height: var(--syn-line-height-normal);
-    margin-inline-start: var(--syn-spacing-x-small);
-  }
-`;

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

@@ -1,122 +0,0 @@
-import { css } from 'lit';
-import sharedOptionSize from '../option/option-size.styles.js';
-
-export default css`
-
-  .combobox__display-input {
-    flex: 1;
-    min-width: var(--syn-spacing-2x-large);
-    width: unset;
-  }
-
-  .combobox:not(.combobox--disabled) .combobox__display-input {
-    cursor: text;
-  }
-
-  .listbox__options ::slotted(syn-option[hidden]), 
-  .listbox__options ::slotted(syn-optgroup[hidden]) {
-    display: none;
-  }
-
-  .listbox__no-results {
-    align-items: center;
-    color: var(--syn-color-neutral-950);
-    display: flex;
-    font: var(--syn-body-medium-regular);
-    padding: var(--syn-spacing-small) var(--syn-spacing-medium) var(--syn-spacing-small) 52px;
-  }
-
-  .combobox--small .listbox__no-results {
-    font-size: var(--syn-input-font-size-small);
-    min-height: var(--syn-input-height-small);
-    padding: 0 var(--syn-spacing-small) 0 40px;
-  }
-
-  .combobox--large .listbox__no-results {
-    font-size: var(--syn-input-font-size-large);
-    min-height: var(--syn-input-height-large);
-    padding: 0 var(--syn-spacing-large) 0 68px;
-  }
-
-  /* Multi Select */
-  .combobox__tags {
-    align-items: center;
-    display: flex;
-    flex-wrap: wrap;
-    margin-inline-start: var(--syn-spacing-2x-small);
-  }
-
-  .combobox__tags::slotted(syn-tag) {
-    cursor: pointer !important;
-  }
-
-  .combobox--disabled .combobox__tags,
-  .combobox--disabled .combobox__tags::slotted(syn-tag) {
-    cursor: not-allowed !important;
-  }
-
-  .combobox--small .combobox__tags {
-    gap: var(--syn-spacing-2x-small);
-  }
-
-  .combobox--medium .combobox__tags {
-    gap: var(--syn-spacing-x-small);
-  }
-
-  .combobox--large .combobox__tags {
-    gap: var(--syn-spacing-small);
-  }
-
-  .combobox--tags-visible.combobox--small .combobox__tags {
-    margin-inline-end: var(--syn-spacing-x-small);
-  }
-
-  .combobox--tags-visible.combobox--medium .combobox__tags {
-    margin-inline-end: var(--syn-input-spacing-small);
-  }
-
-  .combobox--tags-visible.combobox--large .combobox__tags {
-    margin-inline-end: var(--syn-input-spacing-medium);
-  }
-
-  /**
-   * #850: Allow to measure the size of the combobox.
-   * This is needed so we can automatically size and truncate the tags in the <syn-combobox multiple> component.
-   * Scoped to multiple to not break the single select per accident.
-   * Scoped to when placeholder is not visible to not break the placeholder visualization
-   */
-  :host([multiple]) :not(.combobox--placeholder-visible).combobox--tags-visible > .combobox__inputs > .combobox__tags {
-    min-width: 85px;
-    overflow: hidden;
-  }
-
-  :host([multiple]) .combobox__tags > div {
-    display: contents;
-  }
-
-  :host([multiple]) .combobox__tags > div > syn-tag {
-    --syn-tag-position-adjustment: var(--syn-spacing-3x-small);
-
-    max-width: var(--syn-select-tag-max-width);
-  }
-
-  :host([multiple]) .combobox__tags > div > syn-tag::part(content) {
-    display: initial;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  /* 
-  This class is needed to be able to hide the options as long as the popup close animation is running.
-  As otherwise the listbox would flicker because the options are shown again when the value is reset to empty string.
-  */
-  .options__hide {
-    /* We need to set the slot to something different than display: contents to be able to hide it. Also it should not take any space so we remove the height */
-    display: block;
-    height: 0;
-    opacity: 0;
-  }
-
-  ${sharedOptionSize}
-`;

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

@@ -1,86 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  :host(:focus-visible) .radio__control {
-    outline: var(--syn-focus-ring);
-    outline-offset: var(--syn-focus-ring-width);
-  }
-
-  .radio {
-    align-items: flex-start;
-  }
-
-  /** #429: Use token for opacity */
-  .radio--disabled { 
-    opacity: var(--syn-input-disabled-opacity);
-  }
-
-  /* Checked */
-  /* stylelint-disable-next-line no-descending-specificity */
-  .radio--checked .radio__control {
-    background-color: var(--syn-interactive-emphasis-color);
-    border-color: var(--syn-interactive-emphasis-color);
-  }
-
-  /* Reset original hover */
-  .radio:not(.radio--checked):not(.radio--disabled) .radio__control:hover {
-    background: inherit;
-    border-color: inherit;
-  }
-
-  /* Checked + hover */
-  .radio.radio--checked:not(.radio--disabled):hover .radio__control  {
-    background-color: var(--syn-interactive-emphasis-color-hover);
-    border-color: var(--syn-interactive-emphasis-color-hover);
-  }
-
-  /* Checked + active */
-  .radio.radio--checked:not(.radio--disabled):active .radio__control  {
-    background-color: var(--syn-interactive-emphasis-color-active);
-    border-color: var(--syn-interactive-emphasis-color-active);
-  }
-
-  /* Not-Checked + Hover */
-  .radio:not(.radio--checked):not(.radio--disabled):hover .radio__control {
-    border-color: var(--syn-input-border-color-hover);
-  }
-
-  /* Not-Checked + active */
-  .radio:not(.radio--checked):not(.radio--disabled):active .radio__control {
-    border-color: var(--syn-input-border-color-active);
-  }
-
-  /* Fix#456: Multi line radio fixes */
-  .radio__label {
-    align-self: center;
-    margin-inline-start: var(--syn-spacing-x-small);
-    margin-top: -1px;
-  }
-
-  .radio--small .radio__label {
-    font: var(--syn-body-small-regular);
-  }
-
-  .radio--medium .radio__label {
-    font: var(--syn-body-medium-regular);
-  }
-
-  .radio--large .radio__label {
-    font: var(--syn-body-large-regular);
-  }
-
-  /* /Fix#456 */
-
-  /**
-   * #920: The new icons are instances in figma.
-   * The width of the system icon is 12px x 12px, so there is no inner padding.
-   * To accommodate for this, we need to set the width and height of the icon to 50% to get the same result as before.
-   */
-  .radio__checked-icon {
-    scale: 0.5;
-  }
-
-  .radio--small .radio__label, .radio--large .radio__label  {
-    margin-inline-start: var(--syn-spacing-x-small);
-  }
-`;

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

@@ -1,25 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  :host([data-user-invalid]) {
-    --syn-input-border-color: var(--syn-input-border-color-focus-error);
-    --syn-input-border-color-hover: var(--syn-input-border-color-focus-error);
-    --syn-color-primary-600: var(--syn-input-border-color-focus-error);
-    --syn-color-primary-900: var(--syn-color-error-900);
-    --syn-color-primary-950: var(--syn-color-error-950);
-    --syn-color-neutral-1000: var(--syn-input-border-color-focus-error);
-    --syn-interactive-emphasis-color: var(--syn-input-border-color-focus-error);
-    --syn-interactive-emphasis-color-hover: var(--syn-input-border-color-focus-error);
-    --syn-interactive-emphasis-color-active: var(--syn-input-border-color-focus-error);
-  }
-
-  .form-control--has-help-text.form-control--radio-group .form-control__help-text {
-    margin-top: var(--syn-spacing-x-small);
-  }
-
-  .form-control-input {
-    display: flex;
-    flex-direction: column;
-    gap: var(--syn-spacing-x-small);
-  }
-`;