@synergy-design-system/mcp 0.1.0 → 1.0.0

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

@@ -0,0 +1,96 @@
+/**
+ * ---------------------------------------------------------------------
+ * 🔒 AUTOGENERATED BY VENDORISM
+ * Removing this comment will prevent it from being managed by it.
+ * ---------------------------------------------------------------------
+ */
+
+/* eslint-disable */
+import { css } from 'lit';
+
+export default css`
+	/* stylelint-disable */
+  :host {
+    display: block;
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  :host(:focus) {
+    outline: none;
+  }
+
+  .option {
+    position: relative;
+    display: flex;
+    align-items: center;
+    font-family: var(--syn-font-sans);
+    font-size: var(--syn-font-size-medium);
+    font-weight: var(--syn-font-weight-normal);
+    line-height: var(--syn-line-height-normal);
+    letter-spacing: var(--syn-letter-spacing-normal);
+    color: var(--syn-color-neutral-700);
+    padding: var(--syn-spacing-x-small) var(--syn-spacing-medium) var(--syn-spacing-x-small) var(--syn-spacing-x-small);
+    transition: var(--syn-transition-fast) fill;
+    cursor: pointer;
+  }
+
+  .option--hover:not(.option--current):not(.option--disabled) {
+    background-color: var(--syn-color-neutral-100);
+    color: var(--syn-color-neutral-1000);
+  }
+
+  .option--current,
+  .option--current.option--disabled {
+    background-color: var(--syn-color-primary-600);
+    color: var(--syn-color-neutral-0);
+    opacity: 1;
+  }
+
+  .option--disabled {
+    outline: none;
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .option__label {
+    flex: 1 1 auto;
+    display: inline-block;
+    line-height: var(--syn-line-height-dense);
+  }
+
+  .option .option__check {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    visibility: hidden;
+    padding-inline-end: var(--syn-spacing-2x-small);
+  }
+
+  .option--selected .option__check {
+    visibility: visible;
+  }
+
+  .option__prefix,
+  .option__suffix {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+  }
+
+  .option__prefix::slotted(*) {
+    margin-inline-end: var(--syn-spacing-x-small);
+  }
+
+  .option__suffix::slotted(*) {
+    margin-inline-start: var(--syn-spacing-x-small);
+  }
+
+  @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

@@ -0,0 +1,174 @@
+/**
+ * ---------------------------------------------------------------------
+ * 🔒 AUTOGENERATED BY VENDORISM
+ * Removing this comment will prevent it from being managed by it.
+ * ---------------------------------------------------------------------
+ */
+
+/* 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 customStyles from './option.custom.styles.js';
+import { delimiterToWhiteSpace } from './utility.js';
+import type { CSSResultGroup } from 'lit';
+
+/**
+ * @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.
+ */
+export default class SynOption extends SynergyElement {
+  static styles: CSSResultGroup = [componentStyles, styles, customStyles];
+  static dependencies = { 'syn-icon': SynIcon };
+
+  // @ts-expect-error - Controller is currently unused
+  private readonly localize = new LocalizeController(this);
+
+  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
+      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();
+        }
+      });
+    } 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('value')
+  handleValueChange() {
+    if (typeof this.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 this.value !== 'string') {
+      this.value = String(this.value);
+    }
+
+    const { delimiter } = this;
+
+    if (this.value.includes(delimiter)) {
+      console.error(`Option values cannot include "${delimiter}". All occurrences of "${delimiter}" have been replaced with "_".`, this);
+      this.value = delimiterToWhiteSpace(this.value, this.delimiter);
+    }
+  }
+
+  /** 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();
+  }
+
+  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

@@ -0,0 +1,71 @@
+<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>