@synergy-design-system/mcp 2.14.1 → 3.0.0

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

@@ -1,165 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  :host {
-    display: block;
-    /* stylelint-disable-next-line property-no-vendor-prefix */
-    -webkit-user-select: none;
-    user-select: none;
-  }
-
-  :host(:focus) {
-    outline: none;
-  }
-
-  /**
-   * syn-option is now able to adjust its height from a parent item
-   * This is done by exposing multiple css variables to the outside:
-   *
-   * --option-min-height (defaults to 48px) The minimal height of an element
-   * --option-padding (defaults to var(--syn-spacing-small) var(--syn-spacing-medium)) The padding to use
-   * --option-font-size (defaults to var(--syn-font-size-medium)) The font size to use
-   * --option-icon-size (defaults to var(--syn-spacing-large)) The size of the checkmark
-   * 
-   * See below for usage of these variables
-   */
-  .option {
-    align-items: center;
-
-    /*
-     * #988: Brand2025 defines a small gap between options
-     * and rounded corners. We achieve that using an border
-     * that simulates the gap using the menu background color.
-     */
-    border: solid var(--syn-panel-background-color);
-
-    /**
-     * Border Radius needs to be increased to cover the outline
-     * Note this also needs to take the following into account:
-     * - 2018 does not have a focus ring, so the border radius is as small as the border, essentially negating it to "0"
-     * - 2025 needs to adapt with another pixel to make it match the rounding of the focus ring
-     */
-    border-radius: calc(calc(var(--syn-focus-ring-border-radius) * 2) + var(--option-inset-border-vertical) - 2px) / calc(calc(var(--syn-focus-ring-border-radius) * 2) + var(--option-inset-border-vertical) - 4px);
-    border-width: var(--option-inset-border-horizontal) var(--option-inset-border-vertical);
-    color: var(--syn-color-neutral-700);
-    cursor: pointer;
-    display: flex;
-    font-family: var(--syn-font-sans);
-    font-size: var(--option-font-size, var(--syn-font-size-medium));
-    font-weight: var(--syn-font-weight-normal);
-    letter-spacing: var(--syn-letter-spacing-normal);
-    line-height: var(--syn-line-height-normal);
-
-    /* Height is dependent on line-height of .option__label, which does not fit completely to layout */
-    min-height: var(--option-min-height, var(--syn-input-height-medium));
-    padding: 0 calc(var(--option-padding) - var(--option-inset-border-vertical));
-    position: relative;
-    transition: var(--syn-transition-fast) fill;
-  }
-
-  .option:not(.option--current) {
-    color: var(--syn-option-color);
-  }
-
-  .option--current,
-  .option--current.option--hover:not(.option--disabled) {
-    background-color: var(--syn-option-background-color-active);
-    color: var(--syn-option-color-active);
-  }
-
-  .option--hover:not(.option--current):not(.option--disabled) {
-    background-color: var(--syn-option-background-color-hover);
-    color: var(--syn-option-color-hover);
-  }
-
-  .option--disabled {
-    cursor: not-allowed;
-    opacity: var(--syn-input-disabled-opacity); /* #429: Use token for opacity */
-    outline: none;
-  }
-
-  .option--current.option--disabled {
-    background-color: var(--syn-option-background-color-hover);
-    color: var(--syn-option-color-hover);
-  }
-
-  .option__label {
-    display: inline-block;
-    flex: 1 1 auto;
-    line-height: var(--syn-line-height-normal);
-  }
-
-  .option__check {
-    color: var(--syn-option-check-color);
-    font-size: var(--option-icon-size, var(--syn-spacing-large));
-  }
-
-  .option .option__check {
-    align-items: center;
-    display: flex;
-    flex: 0 0 auto;
-    justify-content: center;
-    padding-inline-end: var(--syn-spacing-small);
-    visibility: hidden;
-  }
-
-  /* Invert the check mark when keyboard navigation is used */
-  .option--current .option__check {
-    color: var(--syn-option-check-color-active);
-  }
-
-  .option--selected .option__check {
-    visibility: visible;
-  }
-
-  .option--hover:not(.option--current) .option__check {
-    color: var(--syn-option-check-color-hover);
-  }
-
-  .option__prefix,
-  .option__suffix {
-    align-items: center;
-    display: flex;
-    flex: 0 0 auto;
-  }
-
-  /* Use larger spacing between icons and content */
-  .option__prefix::slotted(*) {
-    margin-inline-end: var(--syn-spacing-small);
-  }
-
-  .option__suffix::slotted(*) {
-    margin-inline-start: var(--syn-spacing-small);
-  }
-
-  /* Set correct icon size when someone uses syn-icon in the slots */
-  .option__prefix::slotted(syn-icon),
-  .option__suffix::slotted(syn-icon) {
-    color: var(--syn-option-icon-color);
-    font-size: var(--option-icon-size, var(--syn-spacing-large));
-  }
-
-  .option--hover .option__prefix::slotted(syn-icon),
-  .option--hover .option__suffix::slotted(syn-icon) {
-    color: var(--syn-option-icon-color-hover);
-  }
-
-  .option--current .option__prefix::slotted(syn-icon),
-  .option--current .option__suffix::slotted(syn-icon) {
-    color: var(--syn-option-icon-color-active);
-  }
-
-  /* This is needed for the highlight styling of the options in syn-combobox */
-  .option__label::slotted(.syn-highlight-style) {
-    background-color: transparent;
-    color: unset;
-    font: var(--syn-body-medium-bold);
-  }
-
-  @media (forced-colors: active) {
-    :host(:hover:not([aria-disabled='true'])) .option {
-      outline: dashed 1px SelectedItem;
-      outline-offset: -1px;
-    }
-  }
-`;

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

@@ -1,191 +0,0 @@
-/* eslint-disable */
-import { classMap } from 'lit/directives/class-map.js';
-import { html } from 'lit';
-import { LocalizeController } from '../../utilities/localize.js';
-import { property, query, state } from 'lit/decorators.js';
-import { watch } from '../../internal/watch.js';
-import componentStyles from '../../styles/component.styles.js';
-import SynergyElement from '../../internal/synergy-element.js';
-import SynIcon from '../icon/icon.component.js';
-import styles from './option.styles.js';
-import { delimiterToWhiteSpace } from './utility.js';
-import type { CSSResultGroup } from 'lit';
-import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';
-
-/**
- * @summary Options define the selectable items within various form controls such as [select](/components/select).
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-option--docs
- * @status stable
- * @since 2.0
- *
- * @dependency syn-icon
- *
- * @slot - The option's label.
- * @slot prefix - Used to prepend an icon or similar element to the menu item.
- * @slot suffix - Used to append an icon or similar element to the menu item.
- *
- * @csspart checked-icon - The checked icon, an `<syn-icon>` element.
- * @csspart base - The component's base wrapper.
- * @csspart label - The option's label.
- * @csspart prefix - The container that wraps the prefix.
- * @csspart suffix - The container that wraps the suffix.
- */
-@enableDefaultSettings('SynOption')
-export default class SynOption extends SynergyElement {
-  static styles: CSSResultGroup = [componentStyles, styles];
-  static dependencies = { 'syn-icon': SynIcon };
-
-  // @ts-expect-error - Controller is currently unused
-  private readonly localize = new LocalizeController(this);
-
-  // #1036: Needed to store the original value before any delimiter processing
-  private originalValue: string | number = '';
-  private isInitialized = false;
-
-  @query('.option__label') defaultSlot: HTMLSlotElement;
-
-  // the delimiter used to separate multiple values in a select
-  // This is provided by the wrapping syn-select
-  @state() delimiter = ' ';
-
-  @state() current = false; // the user has keyed into the option, but hasn't selected it yet (shows a highlight)
-  @state() selected = false; // the option is selected and has aria-selected="true"
-  @state() hasHover = false; // we need this because Safari doesn't honor :hover styles while dragging
-
-  /**
-   * The option's value. When selected, the containing form control will receive this value. The value must be unique
-   * from other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing
-   * multiple values.
-   */
-  @property({ reflect: true }) value: string | number = '';
-
-  /** Draws the option in a disabled state, preventing selection. */
-  @property({ type: Boolean, reflect: true }) disabled = false;
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.setAttribute('role', 'option');
-    this.setAttribute('aria-selected', 'false');
-  }
-
-  private handleDefaultSlotChange() {
-    if (this.isInitialized) {
-      // When the label changes, tell the controller to update
-      this.triggerParentDefaultSlotChange();
-    } else {
-      this.isInitialized = true;
-    }
-  }
-
-  private handleMouseEnter() {
-    this.hasHover = true;
-  }
-
-  private handleMouseLeave() {
-    this.hasHover = false;
-  }
-
-  @watch('disabled')
-  handleDisabledChange() {
-    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
-  }
-
-  @watch('selected')
-  handleSelectedChange() {
-    this.setAttribute('aria-selected', this.selected ? 'true' : 'false');
-  }
-
-  @watch('delimiter')
-  handleDelimiterChange() {
-    this.sanitizeValueForDelimiter();
-  }
-
-  @watch('value')
-  handleValueChange() {
-    this.originalValue = this.value;
-    this.sanitizeValueForDelimiter();
-  }
-
-  /**
-   * Replaces any occurrences of the delimiter in the option's original value with underscores.
-   */
-  sanitizeValueForDelimiter() {
-    let value = this.originalValue;
-    if (typeof value === 'number') {
-      return;
-    }
-
-    // Ensure the value is a string. This ensures the next line doesn't error and allows framework users to pass numbers
-    // instead of requiring them to cast the value to a string.
-    if (typeof value !== 'string') {
-      value = String(value);
-    }
-
-    const { delimiter } = this;
-
-    if (value.includes(delimiter)) {
-      console.error(`Option values cannot include "${delimiter}". All occurrences of "${delimiter}" have been replaced with "_".`, this);
-      value = delimiterToWhiteSpace(value, this.delimiter);
-    }
-    this.value = value;
-    // #1056 We need to trigger the parent component's default slot change, so it can update its value selection
-    this.triggerParentDefaultSlotChange();
-  }
-
-  /** Returns a plain text label based on the option's content. */
-  getTextLabel() {
-    const nodes = this.childNodes;
-    let label = '';
-
-    [...nodes].forEach(node => {
-      if (node.nodeType === Node.ELEMENT_NODE) {
-        if (!(node as HTMLElement).hasAttribute('slot')) {
-          label += (node as HTMLElement).textContent;
-        }
-      }
-
-      if (node.nodeType === Node.TEXT_NODE) {
-        label += node.textContent;
-      }
-    });
-
-    return label.trim();
-  }
-
-  private triggerParentDefaultSlotChange() {
-    customElements.whenDefined('syn-combobox').then(() => {
-      const controller = this.closest('syn-combobox');
-      if (controller) {
-        controller.handleDefaultSlotChange();
-      }
-    });
-    customElements.whenDefined('syn-select').then(() => {
-      const controller = this.closest('syn-select');
-      if (controller) {
-        controller.handleDefaultSlotChange();
-      }
-    });
-  }
-
-  render() {
-    return html`
-      <div
-        part="base"
-        class=${classMap({
-          option: true,
-          'option--current': this.current,
-          'option--disabled': this.disabled,
-          'option--selected': this.selected,
-          'option--hover': this.hasHover
-        })}
-        @mouseenter=${this.handleMouseEnter}
-        @mouseleave=${this.handleMouseLeave}
-      >
-        <syn-icon part="checked-icon" class="option__check" name="check" library="system" aria-hidden="true"></syn-icon>
-        <slot part="prefix" name="prefix" class="option__prefix"></slot>
-        <slot part="label" class="option__label" @slotchange=${this.handleDefaultSlotChange}></slot>
-        <slot part="suffix" name="suffix" class="option__suffix"></slot>
-      </div>
-    `;
-  }
-}

package/metadata/packages/components/components/syn-option/component.vue

@@ -1,71 +0,0 @@
-<script setup lang="ts">
-// ---------------------------------------------------------------------
-// 🔒 AUTOGENERATED @synergy-design-system/vue wrappers for @synergy-design-system/components
-// Please do not edit this file directly!
-// It will get recreated when running pnpm build.
-// ---------------------------------------------------------------------
-
-/**
- * @summary Options define the selectable items within various form controls such as [select](/components/select).
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-option--docs
- * @status stable
- * @since 2.0
- *
- * @dependency syn-icon
- *
- * @slot - The option's label.
- * @slot prefix - Used to prepend an icon or similar element to the menu item.
- * @slot suffix - Used to append an icon or similar element to the menu item.
- *
- * @csspart checked-icon - The checked icon, an `<syn-icon>` element.
- * @csspart base - The component's base wrapper.
- * @csspart label - The option's label.
- * @csspart prefix - The container that wraps the prefix.
- * @csspart suffix - The container that wraps the suffix.
- */
-import { computed, ref } from 'vue';
-import '@synergy-design-system/components/components/option/option.js';
-
-import type { SynOption } from '@synergy-design-system/components';
-
-// DOM Reference to the element
-const nativeElement = ref<SynOption>();
-
-defineExpose({
-  nativeElement,
-});
-
-// Map attributes
-const props = defineProps<{
-  /**
-* The option's value.
-* When selected, the containing form control will receive this value.
-* The value must be unique
-from other options in the same group.
-* Values may not contain spaces, as spaces are used as delimiters when listing
-multiple values.
- */
-  value?: SynOption['value'];
-
-  /**
-   * Draws the option in a disabled state, preventing selection.
-   */
-  disabled?: SynOption['disabled'];
-}>();
-
-// Make sure prop binding only forwards the props that are actually there.
-// This is needed because :param="param" also adds an empty attribute
-// when using web-components, which breaks optional arguments like size in SynInput
-// @see https://github.com/vuejs/core/issues/5190#issuecomment-1003112498
-const visibleProps = computed(() =>
-  Object.fromEntries(
-    Object.entries(props).filter(([, value]) => typeof value !== 'undefined'),
-  ),
-);
-</script>
-
-<template>
-  <syn-option v-bind="visibleProps" ref="nativeElement">
-    <slot></slot>
-  </syn-option>
-</template>