@synergy-design-system/mcp 0.1.0 → 1.0.0

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

@@ -0,0 +1,112 @@
+import { css } from 'lit';
+
+export default css`
+  :host([size='small']) {
+    --height: calc(var(--syn-font-size-medium) + 2px);
+    --thumb-size: var(--syn-font-size-small);
+    --width: calc((var(--height) * 2) - 6px);
+  }
+
+  :host([size='medium']) {
+    --height: var(--syn-font-size-large);
+    --thumb-size: var(--syn-font-size-medium);
+    --width: calc((var(--height) * 2) - 6px);
+  }
+
+  :host([size='large']) {
+    --height: calc(var(--syn-toggle-size-large) + 4px);
+    --thumb-size: var(--syn-toggle-size-large);
+    --width: calc((var(--height) * 2) - 6px);
+  }
+
+  /** #429: Use token for opacity */
+  .switch--disabled { 
+    opacity: var(--syn-input-disabled-opacity);
+  }
+
+  .switch.switch--small {
+    padding: var(--syn-spacing-2x-small) 0;
+  }
+
+  .switch.switch--medium {
+    padding: var(--syn-spacing-2x-small) 0;
+  }
+
+  .switch.switch--large {
+    padding: var(--syn-spacing-3x-small) 0;
+  }
+
+  /* Hint: can be removed, if the padding stylings for sizes from above are removed */
+  .form-control--has-help-text .switch {
+    padding-bottom: 0;
+  }
+
+  .switch__control {
+    background-color: var(--syn-color-neutral-600);
+    border: solid var(--syn-border-width-medium) var(--syn-color-neutral-600);
+  }
+
+   .switch__control .switch__thumb {
+    border: none;
+   }
+
+  /* Hover */
+  .switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover {
+    background-color: var(--syn-color-neutral-900);
+    border-color: var(--syn-color-neutral-900);
+  }
+
+  .switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover .switch__thumb {
+    background-color: var(--syn-color-neutral-0);
+  }
+
+  /* Checked + hover */
+  .switch.switch--checked:not(.switch--disabled) .switch__control:hover {
+    background-color: var(--syn-color-primary-900);
+    border-color: var(--syn-color-primary-900);
+  }
+
+  .switch.switch--checked:not(.switch--disabled) .switch__control:hover .switch__thumb {
+    background-color: var(--syn-color-neutral-0);
+  }
+
+  /* Focus */
+  .switch:not(.switch--checked):not(.switch--disabled) .switch__input:focus-visible ~ .switch__control {
+    background-color: var(--syn-color-neutral-600);
+    border-color: var(--syn-color-neutral-600);
+    outline: var(--syn-focus-ring);
+    outline-offset: var(--syn-focus-ring-offset);
+  }
+
+  .switch:not(.switch--checked):not(.switch--disabled) .switch__input:focus-visible ~ .switch__control .switch__thumb {
+    background-color: var(--syn-color-neutral-0);
+    outline: none;
+  }
+
+  /* Checked + focus */
+  .switch.switch--checked:not(.switch--disabled) .switch__input:focus-visible ~ .switch__control {
+    background-color: var(--syn-color-primary-900);
+    border-color: var(--syn-color-primary-900);
+    outline: var(--syn-focus-ring);
+    outline-offset: var(--syn-focus-ring-offset);
+  }
+
+  .switch.switch--checked:not(.switch--disabled) .switch__input:focus-visible ~ .switch__control .switch__thumb {
+    background-color: var(--syn-color-neutral-0);
+    outline: none;
+  }
+
+  .switch__label {
+    margin-inline-start: var(--syn-spacing-x-small);
+  }
+  
+  :host([data-user-invalid]) .switch:not(.switch--checked):not(.switch--disabled) .switch__control {
+    background-color: var(--syn-color-error-700);
+    border-color: var(--syn-color-error-700);
+  }
+
+  :host([data-user-invalid]) .switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover {
+    background-color: var(--syn-color-error-900);
+    border-color: var(--syn-color-error-900);
+  }
+  `;

package/metadata/packages/components/components/syn-switch/component.react.ts

@@ -0,0 +1,63 @@
+// ---------------------------------------------------------------------
+// 🔒 AUTOGENERATED @synergy-design-system/react wrappers for @synergy-design-system/components
+// Please do not edit this file directly!
+// It will get recreated when running pnpm build.
+// ---------------------------------------------------------------------
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '@synergy-design-system/components/components/switch/switch.component.js';
+
+import { type EventName } from '@lit/react';
+import type { SynBlurEvent } from '@synergy-design-system/components';
+import type { SynChangeEvent } from '@synergy-design-system/components';
+import type { SynInputEvent } from '@synergy-design-system/components';
+import type { SynFocusEvent } from '@synergy-design-system/components';
+import type { SynInvalidEvent } from '@synergy-design-system/components';
+
+const tagName = 'syn-switch';
+Component.define('syn-switch');
+
+/**
+ * @summary Switches allow the user to toggle an option on or off.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-switch--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @slot - The switch's label.
+ * @slot help-text - Text that describes how to use the switch. Alternatively, you can use the `help-text` attribute.
+ *
+ * @event syn-blur - Emitted when the control loses focus.
+ * @event syn-change - Emitted when the control's checked state changes.
+ * @event syn-input - Emitted when the control receives input.
+ * @event syn-focus - Emitted when the control gains focus.
+ * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart control - The control that houses the switch's thumb.
+ * @csspart thumb - The switch's thumb.
+ * @csspart label - The switch's label.
+ * @csspart form-control-help-text - The help text's wrapper.
+ *
+ * @cssproperty --width - The width of the switch.
+ * @cssproperty --height - The height of the switch.
+ * @cssproperty --thumb-size - The size of the thumb.
+ */
+export const SynSwitch = createComponent({
+  displayName: 'SynSwitch',
+  elementClass: Component,
+  events: {
+    onSynBlur: 'syn-blur' as EventName<SynBlurEvent>,
+    onSynChange: 'syn-change' as EventName<SynChangeEvent>,
+    onSynInput: 'syn-input' as EventName<SynInputEvent>,
+    onSynFocus: 'syn-focus' as EventName<SynFocusEvent>,
+    onSynInvalid: 'syn-invalid' as EventName<SynInvalidEvent>,
+  },
+  react: React,
+  tagName,
+});
+
+export type { SynBlurEvent } from '@synergy-design-system/components';
+export type { SynChangeEvent } from '@synergy-design-system/components';
+export type { SynInputEvent } from '@synergy-design-system/components';
+export type { SynFocusEvent } from '@synergy-design-system/components';
+export type { SynInvalidEvent } from '@synergy-design-system/components';

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

@@ -0,0 +1,177 @@
+/**
+ * ---------------------------------------------------------------------
+ * 🔒 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: inline-block;
+  }
+
+  :host([size='small']) {
+    --height: var(--syn-toggle-size-small);
+    --thumb-size: calc(var(--syn-toggle-size-small) + 4px);
+    --width: calc(var(--height) * 2);
+
+    font-size: var(--syn-input-font-size-small);
+  }
+
+  :host([size='medium']) {
+    --height: var(--syn-toggle-size-medium);
+    --thumb-size: calc(var(--syn-toggle-size-medium) + 4px);
+    --width: calc(var(--height) * 2);
+
+    font-size: var(--syn-input-font-size-medium);
+  }
+
+  :host([size='large']) {
+    --height: var(--syn-toggle-size-large);
+    --thumb-size: calc(var(--syn-toggle-size-large) + 4px);
+    --width: calc(var(--height) * 2);
+
+    font-size: var(--syn-input-font-size-large);
+  }
+
+  .switch {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    font-family: var(--syn-input-font-family);
+    font-size: inherit;
+    font-weight: var(--syn-input-font-weight);
+    color: var(--syn-input-label-color);
+    vertical-align: middle;
+    cursor: pointer;
+  }
+
+  .switch__control {
+    flex: 0 0 auto;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--width);
+    height: var(--height);
+    background-color: var(--syn-color-neutral-400);
+    border: solid var(--syn-input-border-width) var(--syn-color-neutral-400);
+    border-radius: var(--height);
+    transition:
+      var(--syn-transition-fast) border-color,
+      var(--syn-transition-fast) background-color;
+  }
+
+  .switch__control .switch__thumb {
+    width: var(--thumb-size);
+    height: var(--thumb-size);
+    background-color: var(--syn-color-neutral-0);
+    border-radius: 50%;
+    border: solid var(--syn-input-border-width) var(--syn-color-neutral-400);
+    translate: calc((var(--width) - var(--height)) / -2);
+    transition:
+      var(--syn-transition-fast) translate ease,
+      var(--syn-transition-fast) background-color,
+      var(--syn-transition-fast) border-color,
+      var(--syn-transition-fast) box-shadow;
+  }
+
+  .switch__input {
+    position: absolute;
+    opacity: 0;
+    padding: 0;
+    margin: 0;
+    pointer-events: none;
+  }
+
+  /* Hover */
+  .switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover {
+    background-color: var(--syn-color-neutral-400);
+    border-color: var(--syn-color-neutral-400);
+  }
+
+  .switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover .switch__thumb {
+    background-color: var(--syn-color-neutral-0);
+    border-color: var(--syn-color-neutral-400);
+  }
+
+  /* Focus */
+  .switch:not(.switch--checked):not(.switch--disabled) .switch__input:focus-visible ~ .switch__control {
+    background-color: var(--syn-color-neutral-400);
+    border-color: var(--syn-color-neutral-400);
+  }
+
+  .switch:not(.switch--checked):not(.switch--disabled) .switch__input:focus-visible ~ .switch__control .switch__thumb {
+    background-color: var(--syn-color-neutral-0);
+    border-color: var(--syn-color-primary-600);
+    outline: var(--syn-focus-ring);
+    outline-offset: var(--syn-focus-ring-offset);
+  }
+
+  /* Checked */
+  .switch--checked .switch__control {
+    background-color: var(--syn-color-primary-600);
+    border-color: var(--syn-color-primary-600);
+  }
+
+  .switch--checked .switch__control .switch__thumb {
+    background-color: var(--syn-color-neutral-0);
+    border-color: var(--syn-color-primary-600);
+    translate: calc((var(--width) - var(--height)) / 2);
+  }
+
+  /* Checked + hover */
+  .switch.switch--checked:not(.switch--disabled) .switch__control:hover {
+    background-color: var(--syn-color-primary-600);
+    border-color: var(--syn-color-primary-600);
+  }
+
+  .switch.switch--checked:not(.switch--disabled) .switch__control:hover .switch__thumb {
+    background-color: var(--syn-color-neutral-0);
+    border-color: var(--syn-color-primary-600);
+  }
+
+  /* Checked + focus */
+  .switch.switch--checked:not(.switch--disabled) .switch__input:focus-visible ~ .switch__control {
+    background-color: var(--syn-color-primary-600);
+    border-color: var(--syn-color-primary-600);
+  }
+
+  .switch.switch--checked:not(.switch--disabled) .switch__input:focus-visible ~ .switch__control .switch__thumb {
+    background-color: var(--syn-color-neutral-0);
+    border-color: var(--syn-color-primary-600);
+    outline: var(--syn-focus-ring);
+    outline-offset: var(--syn-focus-ring-offset);
+  }
+
+  /* Disabled */
+  .switch--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .switch__label {
+    display: inline-block;
+    line-height: var(--height);
+    margin-inline-start: 0.5em;
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  :host([required]) .switch__label::after {
+    content: var(--syn-input-required-content);
+    color: var(--syn-input-required-content-color);
+    margin-inline-start: var(--syn-input-required-content-offset);
+  }
+
+  @media (forced-colors: active) {
+    .switch.switch--checked:not(.switch--disabled) .switch__control:hover .switch__thumb,
+    .switch--checked .switch__control .switch__thumb {
+      background-color: ButtonText;
+    }
+  }
+`;

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

@@ -0,0 +1,274 @@
+/**
+ * ---------------------------------------------------------------------
+ * 🔒 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 { defaultValue } from '../../internal/default-value.js';
+import { FormControlController } from '../../internal/form.js';
+import { HasSlotController } from '../../internal/slot.js';
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { live } from 'lit/directives/live.js';
+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 './switch.styles.js';
+import customStyles from './switch.custom.styles.js';
+import type { CSSResultGroup } from 'lit';
+import type { SynergyFormControl } from '../../internal/synergy-element.js';
+import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';
+
+/**
+ * @summary Switches allow the user to toggle an option on or off.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-switch--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @slot - The switch's label.
+ * @slot help-text - Text that describes how to use the switch. Alternatively, you can use the `help-text` attribute.
+ *
+ * @event syn-blur - Emitted when the control loses focus.
+ * @event syn-change - Emitted when the control's checked state changes.
+ * @event syn-input - Emitted when the control receives input.
+ * @event syn-focus - Emitted when the control gains focus.
+ * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart control - The control that houses the switch's thumb.
+ * @csspart thumb - The switch's thumb.
+ * @csspart label - The switch's label.
+ * @csspart form-control-help-text - The help text's wrapper.
+ *
+ * @cssproperty --width - The width of the switch.
+ * @cssproperty --height - The height of the switch.
+ * @cssproperty --thumb-size - The size of the thumb.
+ */
+@enableDefaultSettings('SynSwitch')
+export default class SynSwitch extends SynergyElement implements SynergyFormControl {
+  static styles: CSSResultGroup = [componentStyles, formControlStyles, styles, formControlCustomStyles, customStyles];
+
+  private readonly formControlController = new FormControlController(this, {
+    value: (control: SynSwitch) => (control.checked ? control.value || 'on' : undefined),
+    defaultValue: (control: SynSwitch) => control.defaultChecked,
+    setValue: (control: SynSwitch, checked: boolean) => (control.checked = checked)
+  });
+  private readonly hasSlotController = new HasSlotController(this, 'help-text');
+
+  @query('input[type="checkbox"]') input: HTMLInputElement;
+
+  @state() private hasFocus = false;
+  @property({ reflect: true }) title = ''; // make reactive to pass through
+
+  /** The name of the switch, submitted as a name/value pair with form data. */
+  @property() name = '';
+
+  /** The current value of the switch, submitted as a name/value pair with form data. */
+  @property() value: string;
+
+  /** The switch's size. */
+  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
+
+  /** Disables the switch. */
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  /** Draws the switch in a checked state. */
+  @property({ type: Boolean, reflect: true }) checked = false;
+
+  /** The default value of the form control. Primarily used for resetting the form control. */
+  @defaultValue('checked') defaultChecked = false;
+
+  /**
+   * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
+   * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
+   * the same document or shadow root for this to work.
+   */
+  @property({ reflect: true }) form = '';
+
+  /** Makes the switch a required field. */
+  @property({ type: Boolean, reflect: true }) required = false;
+
+  /** The switch's help text. If you need to display HTML, use the `help-text` slot instead. */
+  @property({ attribute: 'help-text' }) helpText = '';
+
+  /** Gets the validity state object */
+  get validity() {
+    return this.input.validity;
+  }
+
+  /** Gets the validation message */
+  get validationMessage() {
+    return this.input.validationMessage;
+  }
+
+  firstUpdated() {
+    this.formControlController.updateValidity();
+  }
+
+  private handleBlur() {
+    this.hasFocus = false;
+    this.emit('syn-blur');
+  }
+
+  private handleInput() {
+    this.emit('syn-input');
+  }
+
+  private handleInvalid(event: Event) {
+    this.formControlController.setValidity(false);
+    this.formControlController.emitInvalidEvent(event);
+  }
+
+  private handleClick() {
+    this.checked = !this.checked;
+    this.emit('syn-change');
+  }
+
+  private handleFocus() {
+    this.hasFocus = true;
+    this.emit('syn-focus');
+  }
+
+  private handleKeyDown(event: KeyboardEvent) {
+    if (event.key === 'ArrowLeft') {
+      event.preventDefault();
+      this.checked = false;
+      this.emit('syn-change');
+      this.emit('syn-input');
+    }
+
+    if (event.key === 'ArrowRight') {
+      event.preventDefault();
+      this.checked = true;
+      this.emit('syn-change');
+      this.emit('syn-input');
+    }
+  }
+
+  @watch('checked', { waitUntilFirstUpdate: true })
+  handleCheckedChange() {
+    this.input.checked = this.checked; // force a sync update
+    this.formControlController.updateValidity();
+  }
+
+  @watch('disabled', { waitUntilFirstUpdate: true })
+  handleDisabledChange() {
+    // Disabled form controls are always valid
+    this.formControlController.setValidity(true);
+  }
+
+  /** Simulates a click on the switch. */
+  click() {
+    this.input.click();
+  }
+
+  /** Sets focus on the switch. */
+  focus(options?: FocusOptions) {
+    this.input.focus(options);
+  }
+
+  /** Removes focus from the switch. */
+  blur() {
+    this.input.blur();
+  }
+
+  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
+  checkValidity() {
+    return this.input.checkValidity();
+  }
+
+  /** Gets the associated form, if one exists. */
+  getForm(): HTMLFormElement | null {
+    return this.formControlController.getForm();
+  }
+
+  /** Checks for validity and shows the browser's validation message if the control is invalid. */
+  reportValidity() {
+    return this.input.reportValidity();
+  }
+
+  /** Sets a custom validation message. Pass an empty string to restore validity. */
+  setCustomValidity(message: string) {
+    this.input.setCustomValidity(message);
+    this.formControlController.updateValidity();
+  }
+
+  render() {
+    const hasHelpTextSlot = this.hasSlotController.test('help-text');
+    const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
+
+    return html`
+      <div
+        class=${classMap({
+          'form-control': true,
+          'form-control--small': this.size === 'small',
+          'form-control--medium': this.size === 'medium',
+          'form-control--large': this.size === 'large',
+          'form-control--has-help-text': hasHelpText
+        })}
+      >
+        <label
+          part="base"
+          class=${classMap({
+            switch: true,
+            'switch--checked': this.checked,
+            'switch--disabled': this.disabled,
+            'switch--focused': this.hasFocus,
+            'switch--small': this.size === 'small',
+            'switch--medium': this.size === 'medium',
+            'switch--large': this.size === 'large'
+          })}
+        >
+          <input
+            class="switch__input"
+            type="checkbox"
+            title=${this.title /* An empty title prevents browser validation tooltips from appearing on hover */}
+            name=${this.name}
+            value=${ifDefined(this.value)}
+            .checked=${live(this.checked)}
+            .disabled=${this.disabled}
+            .required=${this.required}
+            role="switch"
+            aria-checked=${this.checked ? 'true' : 'false'}
+            aria-describedby="help-text"
+            @click=${this.handleClick}
+            @input=${this.handleInput}
+            @invalid=${this.handleInvalid}
+            @blur=${this.handleBlur}
+            @focus=${this.handleFocus}
+            @keydown=${this.handleKeyDown}
+          />
+
+          <span part="control" class="switch__control">
+            <span part="thumb" class="switch__thumb"></span>
+          </span>
+
+          <div part="label" class="switch__label">
+            <slot></slot>
+          </div>
+        </label>
+
+        <div
+          aria-hidden=${hasHelpText ? 'false' : 'true'}
+          class="form-control__help-text"
+          id="help-text"
+          part="form-control-help-text"
+        >
+          <slot name="help-text">${this.helpText}</slot>
+        </div>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'syn-switch': SynSwitch;
+  }
+}