@synergy-design-system/mcp 2.6.1 → 2.7.0

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

@@ -29,11 +29,11 @@
     "ts-jest": "^29.4.6",
     "typescript": "^5.9.3",
     "@synergy-design-system/docs": "0.1.0",
-    "@synergy-design-system/components": "3.4.1",
-    "@synergy-design-system/fonts": "1.0.3",
     "@synergy-design-system/eslint-config-syn": "^0.1.0",
+    "@synergy-design-system/fonts": "1.0.3",
     "@synergy-design-system/styles": "2.0.1",
-    "@synergy-design-system/tokens": "^3.4.1"
+    "@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.1",
+  "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);
-  }
-`;

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

@@ -1,175 +0,0 @@
-import { css } from 'lit';
-import sharedOptionSize from '../option/option-size.styles.js';
-
-export default css`
-  /** #429: Use token for opacity */
-  .select--standard.select--disabled .select__combobox {
-    opacity: var(--syn-input-disabled-opacity);
-  }
-
-  /**
-   * Invalid user data
-   */
-  :host([data-user-invalid]) .select__combobox {
-    border-color: var(--syn-input-border-color-focus-error);
-  }
-
-  :host([data-user-invalid]) .select--standard:not(.select--disabled).select--open .select__combobox,
-  :host([data-user-invalid]) .select--standard:not(.select--disabled).select--focused .select__combobox {
-    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);
-  }
-
-  /* Clear button */
-  .select__clear {
-    color: var(--syn-input-icon-icon-clearable-color);
-    font-size: var(--syn-spacing-large);
-  }
-
-  .select--small .select__clear {
-    font-size: var(--syn-spacing-medium);
-  }
-
-  .select--large .select__clear {
-    font-size: var(--syn-spacing-x-large);
-  }
-
-  .select--medium .select__clear {
-    margin-inline-start: var(--syn-spacing-small);
-  }
-
-  /* Expand icon */
-  .select__expand-icon {
-    color: var(--syn-color-neutral-950);
-    margin-inline-start: var(--syn-spacing-small);
-  }
-
-  .select--small .select__expand-icon {
-    font-size: var(--syn-spacing-medium);
-  }
-
-  .select--medium .select__expand-icon {
-    font-size: var(--syn-spacing-large);
-  }
-
-  .select--large .select__expand-icon {
-    font-size: var(--syn-spacing-x-large);
-  }
-
-  /* Change select border on hover */
-  /* stylelint-disable-next-line no-descending-specificity */
-  .select:not(.select--disabled):hover .select__combobox {
-    border-color: var(--syn-input-border-color-hover);
-  }
-
-  /* Prefix and Suffix */
-
-  /* Small */
-  .select--small .select__prefix::slotted(*) {
-    margin-inline-end: var(--syn-spacing-x-small);
-  }
-
-  .select--small .select__suffix::slotted(*) {
-    margin-inline-start: var(--syn-spacing-x-small);
-  }
-
-  .select--small .select__suffix::slotted(syn-icon),
-  .select--small .select__prefix::slotted(syn-icon) {
-    font-size: var(--syn-font-size-medium);
-  }
-
-  /* Medium */
-  .select--medium .select__prefix::slotted(*) {
-    margin-inline-end: var(--syn-input-spacing-small);
-  }
-
-  .select--medium .select__suffix::slotted(*) {
-    margin-inline-start: var(--syn-input-spacing-small);
-  }
-
-  .select--medium .select__suffix::slotted(syn-icon),
-  .select--medium .select__prefix::slotted(syn-icon) {
-    font-size: var(--syn-font-size-x-large);
-  }
-
-  /* Large */
-  .select--large .select__prefix::slotted(*) {
-    margin-inline-end: var(--syn-input-spacing-medium);
-  }
-
-  .select--large .select__suffix::slotted(*) {
-    margin-inline-start: var(--syn-input-spacing-medium);
-  }
-
-  .select--large .select__suffix::slotted(syn-icon),
-  .select--large .select__prefix::slotted(syn-icon) {
-    font-size: var(--syn-font-size-2x-large);
-  }
-
-  .select__prefix,
-  .select__suffix {
-    color: var(--syn-input-icon-color);
-  }
-
-  /* Multi Select */
-  .select__tags {
-    margin-inline-start: var(--syn-spacing-medium);
-  }
-
-  .select--small .select__tags {
-    gap: var(--syn-spacing-2x-small);
-  }
-
-  .select--medium .select__tags {
-    gap: var(--syn-spacing-x-small);
-  }
-
-  .select--large .select__tags {
-    gap: var(--syn-spacing-small);
-  }
-
-  /* Listbox */
-  .select__listbox {
-    border-radius: var(--syn-input-border-radius-medium);
-    box-shadow: var(--syn-shadow-medium);
-  }
-
-  /**
-   * Make sure to hide the syn-divider for the first syn-optgroup
-   * Note! ::slotted does currently not work with ::part, so we
-   * opted for using a css variable here.
-   */
-  .select__listbox ::slotted(syn-optgroup:first-of-type) {
-    --display-divider: none;
-  }
-
-  /**
-   * #850: Allow to measure the size of the combobox.
-   * This is needed so we can automatically size and truncate the tags in the <syn-select 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(.select--placeholder-visible) > .select__combobox > .select__tags {
-    min-width: 100px;
-    overflow: hidden;
-  }
-
-  :host([multiple]) .select__tags > div {
-    display: contents;
-  }
-
-  :host([multiple]) .select__tags > div > syn-tag {
-    --syn-tag-position-adjustment: var(--syn-spacing-3x-small);
-
-    max-width: var(--syn-select-tag-max-width);
-  }
-
-  :host([multiple]) .select__tags > div > syn-tag::part(content) {
-    display: initial;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  ${sharedOptionSize}
-`;