@synergy-design-system/mcp 2.14.1 → 3.0.0

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

@@ -1,367 +0,0 @@
-/* eslint-disable @typescript-eslint/no-floating-promises */
-import { classMap } from 'lit/directives/class-map.js';
-import { html } from 'lit';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { property, query } from 'lit/decorators.js';
-import type { CSSResultGroup } from 'lit';
-import { animateTo, stopAnimations } from '../../internal/animate.js';
-import { blurActiveElement } from '../../internal/closeActiveElement.js';
-import { getAnimation, setDefaultAnimation } from '../../utilities/animation-registry.js';
-import { HasSlotController } from '../../internal/slot.js';
-import { LocalizeController } from '../../utilities/localize.js';
-import { lockBodyScrolling, unlockBodyScrolling } from '../../internal/scroll.js';
-import { waitForEvent } from '../../internal/event.js';
-import { watch } from '../../internal/watch.js';
-import componentStyles from '../../styles/component.styles.js';
-import Modal from '../../internal/modal.js';
-import SynergyElement from '../../internal/synergy-element.js';
-import SynIconButton from '../icon-button/icon-button.component.js';
-import styles from './dialog.styles.js';
-
-/**
- * @summary Dialogs, sometimes called "modals", appear above the page and require the user's immediate attention.
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-dialog--docs
- * @status stable
- * @since 2.0
- *
- * @dependency syn-icon-button
- *
- * @slot - The dialog's main content.
- * @slot label - The dialog's label. Alternatively, you can use the `label` attribute.
- * @slot header-actions - Optional actions to add to the header. Works best with `<syn-icon-button>`.
- * @slot footer - The dialog's footer, usually one or more buttons representing various options.
- *
- * @event syn-show - Emitted when the dialog opens.
- * @event syn-after-show - Emitted after the dialog opens and all animations are complete.
- * @event syn-hide - Emitted when the dialog closes.
- * @event syn-after-hide - Emitted after the dialog closes and all animations are complete.
- * @event syn-initial-focus - Emitted when the dialog opens and is ready to receive focus. Calling
- *   `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.
- * @event {{ source: 'close-button' | 'keyboard' | 'overlay' }} syn-request-close - Emitted when the user attempts to
- *   close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling
- *   `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in
- *   destructive behavior such as data loss.
- *
- * @csspart base - The component's base wrapper.
- * @csspart overlay - The overlay that covers the screen behind the dialog.
- * @csspart panel - The dialog's panel (where the dialog and its content are rendered).
- * @csspart header - The dialog's header. This element wraps the title and header actions.
- * @csspart header-actions - Optional actions to add to the header. Works best with `<syn-icon-button>`.
- * @csspart title - The dialog's title.
- * @csspart close-button - The close button, an `<syn-icon-button>`.
- * @csspart close-button__base - The close button's exported `base` part.
- * @csspart body - The dialog's body.
- * @csspart footer - The dialog's footer.
- *
- * @cssproperty --width - The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.
- * @cssproperty --header-spacing - The amount of padding to use for the header.
- * @cssproperty --body-spacing - The amount of padding to use for the body.
- * @cssproperty --footer-spacing - The amount of padding to use for the footer.
- *
- * @animation dialog.show - The animation to use when showing the dialog.
- * @animation dialog.hide - The animation to use when hiding the dialog.
- * @animation dialog.denyClose - The animation to use when a request to close the dialog is denied.
- * @animation dialog.overlay.show - The animation to use when showing the dialog's overlay.
- * @animation dialog.overlay.hide - The animation to use when hiding the dialog's overlay.
- *
- * @property modal - Exposes the internal modal utility that controls focus trapping. To temporarily disable focus
- *   trapping and allow third-party modals spawned from an active Synergy modal, call `modal.activateExternal()` when
- *   the third-party modal opens. Upon closing, call `modal.deactivateExternal()` to restore Synergy's focus trapping.
- */
-export default class SynDialog extends SynergyElement {
-  static styles: CSSResultGroup = [componentStyles, styles];
-
-  static dependencies = {
-    'syn-icon-button': SynIconButton,
-  };
-
-  private readonly hasSlotController = new HasSlotController(this, 'footer');
-
-  private readonly localize = new LocalizeController(this);
-
-  private originalTrigger: HTMLElement | null;
-
-  public modal = new Modal(this);
-
-  private closeWatcher: CloseWatcher | null;
-
-  @query('.dialog') dialog: HTMLElement;
-
-  @query('.dialog__panel') panel: HTMLElement;
-
-  @query('.dialog__overlay') overlay: HTMLElement;
-
-  /**
-   * Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can
-   * use the `show()` and `hide()` methods and this attribute will reflect the dialog's open state.
-   */
-  @property({ reflect: true, type: Boolean }) open = false;
-
-  /**
-   * The dialog's label as displayed in the header. You should always include a relevant label even when using
-   * `no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.
-   */
-  @property({ reflect: true }) label = '';
-
-  /**
-   * Disables the header. This will also remove the default close button, so please ensure you provide an easy,
-   * accessible way for users to dismiss the dialog.
-   */
-  @property({ attribute: 'no-header', reflect: true, type: Boolean }) noHeader = false;
-
-  firstUpdated() {
-    this.dialog.hidden = !this.open;
-
-    if (this.open) {
-      this.addOpenListeners();
-      this.modal.activate();
-      lockBodyScrolling(this);
-    }
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.modal.deactivate();
-    unlockBodyScrolling(this);
-    this.removeOpenListeners();
-  }
-
-  private requestClose(source: 'close-button' | 'keyboard' | 'overlay') {
-    const slRequestClose = this.emit('syn-request-close', {
-      cancelable: true,
-      detail: { source },
-    });
-
-    if (slRequestClose.defaultPrevented) {
-      const animation = getAnimation(this, 'dialog.denyClose', { dir: this.localize.dir() });
-      animateTo(this.panel, animation.keyframes, animation.options);
-      return;
-    }
-
-    this.hide();
-  }
-
-  private addOpenListeners() {
-    if ('CloseWatcher' in window) {
-      this.closeWatcher?.destroy();
-      this.closeWatcher = new CloseWatcher();
-      this.closeWatcher.onclose = () => this.requestClose('keyboard');
-    } else {
-      document.addEventListener('keydown', this.handleDocumentKeyDown);
-    }
-  }
-
-  private removeOpenListeners() {
-    this.closeWatcher?.destroy();
-    document.removeEventListener('keydown', this.handleDocumentKeyDown);
-  }
-
-  private handleDocumentKeyDown = (event: KeyboardEvent) => {
-    if (event.key === 'Escape' && this.modal.isActive() && this.open) {
-      event.stopPropagation();
-      this.requestClose('keyboard');
-    }
-  };
-
-  @watch('open', { waitUntilFirstUpdate: true })
-  async handleOpenChange() {
-    if (this.open) {
-      // Show
-      this.emit('syn-show');
-      this.addOpenListeners();
-      this.originalTrigger = document.activeElement as HTMLElement;
-      this.modal.activate();
-
-      lockBodyScrolling(this);
-
-      // When the dialog is shown, Safari will attempt to set focus on whatever element has autofocus. This can cause
-      // the dialogs's animation to jitter (if it starts offscreen), so we'll temporarily remove the attribute, call
-      // `focus({ preventScroll: true })` ourselves, and add the attribute back afterwards.
-      //
-      // Related: https://github.com/shoelace-style/shoelace/issues/693
-      //
-      const autoFocusTarget = this.querySelector('[autofocus]');
-      if (autoFocusTarget) {
-        autoFocusTarget.removeAttribute('autofocus');
-      }
-
-      await Promise.all([stopAnimations(this.dialog), stopAnimations(this.overlay)]);
-      this.dialog.hidden = false;
-
-      // Set initial focus
-      requestAnimationFrame(() => {
-        const slInitialFocus = this.emit('syn-initial-focus', { cancelable: true });
-
-        if (!slInitialFocus.defaultPrevented) {
-          // Set focus to the autofocus target and restore the attribute
-          if (autoFocusTarget) {
-            (autoFocusTarget as HTMLInputElement).focus({ preventScroll: true });
-          } else {
-            this.panel.focus({ preventScroll: true });
-          }
-        }
-
-        // Restore the autofocus attribute
-        if (autoFocusTarget) {
-          autoFocusTarget.setAttribute('autofocus', '');
-        }
-      });
-
-      const panelAnimation = getAnimation(this, 'dialog.show', { dir: this.localize.dir() });
-      const overlayAnimation = getAnimation(this, 'dialog.overlay.show', { dir: this.localize.dir() });
-      await Promise.all([
-        animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options),
-        animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options),
-      ]);
-
-      this.emit('syn-after-show');
-    } else {
-      // Hide
-      blurActiveElement(this);
-      this.emit('syn-hide');
-      this.removeOpenListeners();
-      this.modal.deactivate();
-
-      await Promise.all([stopAnimations(this.dialog), stopAnimations(this.overlay)]);
-      const panelAnimation = getAnimation(this, 'dialog.hide', { dir: this.localize.dir() });
-      const overlayAnimation = getAnimation(this, 'dialog.overlay.hide', { dir: this.localize.dir() });
-
-      // Animate the overlay and the panel at the same time. Because animation durations might be different, we need to
-      // hide each one individually when the animation finishes, otherwise the first one that finishes will reappear
-      // unexpectedly. We'll unhide them after all animations have completed.
-      await Promise.all([
-        animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options).then(() => {
-          this.overlay.hidden = true;
-        }),
-        animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options).then(() => {
-          this.panel.hidden = true;
-        }),
-      ]);
-
-      this.dialog.hidden = true;
-
-      // Now that the dialog is hidden, restore the overlay and panel for next time
-      this.overlay.hidden = false;
-      this.panel.hidden = false;
-
-      unlockBodyScrolling(this);
-
-      // Restore focus to the original trigger
-      const trigger = this.originalTrigger;
-      if (typeof trigger?.focus === 'function') {
-        setTimeout(() => trigger.focus());
-      }
-
-      this.emit('syn-after-hide');
-    }
-  }
-
-  /** Shows the dialog. */
-  async show() {
-    if (this.open) {
-      return undefined;
-    }
-
-    this.open = true;
-    return waitForEvent(this, 'syn-after-show');
-  }
-
-  /** Hides the dialog */
-  async hide() {
-    if (!this.open) {
-      return undefined;
-    }
-
-    this.open = false;
-    return waitForEvent(this, 'syn-after-hide');
-  }
-
-  render() {
-    /* eslint-disable lit-a11y/click-events-have-key-events */
-    return html`
-      <div
-        part="base"
-        class=${classMap({
-          dialog: true,
-          'dialog--has-footer': this.hasSlotController.test('footer'),
-          'dialog--open': this.open,
-        })}
-      >
-        <div part="overlay" class="dialog__overlay" @click=${() => this.requestClose('overlay')} tabindex="-1"></div>
-
-        <div
-          part="panel"
-          class="dialog__panel"
-          role="dialog"
-          aria-modal="true"
-          aria-hidden=${this.open ? 'false' : 'true'}
-          aria-label=${ifDefined(this.noHeader ? this.label : undefined)}
-          aria-labelledby=${ifDefined(!this.noHeader ? 'title' : undefined)}
-          tabindex="-1"
-        >
-          ${!this.noHeader
-            ? html`
-                <header part="header" class="dialog__header">
-                  <h2 part="title" class="dialog__title" id="title">
-                    <slot name="label"> ${this.label.length > 0 ? this.label : String.fromCharCode(65279)} </slot>
-                  </h2>
-                  <div part="header-actions" class="dialog__header-actions">
-                    <slot name="header-actions"></slot>
-                    <syn-icon-button
-                      part="close-button"
-                      exportparts="base:close-button__base"
-                      class="dialog__close"
-                      name="x-lg"
-                      label=${this.localize.term('close')}
-                      library="system"
-                      @click="${() => this.requestClose('close-button')}"
-                    ></syn-icon-button>
-                  </div>
-                </header>
-              `
-            : ''}
-          ${
-            '' /* The tabindex="-1" is here because the body is technically scrollable if overflowing. However, if there's no focusable elements inside, you won't actually be able to scroll it via keyboard. Previously this was just a <slot>, but tabindex="-1" on the slot causes children to not be focusable. https://github.com/shoelace-style/shoelace/issues/1753#issuecomment-1836803277 */
-          }
-          <div part="body" class="dialog__body" tabindex="-1"><slot></slot></div>
-
-          <footer part="footer" class="dialog__footer">
-            <slot name="footer"></slot>
-          </footer>
-        </div>
-      </div>
-    `;
-    /* eslint-enable lit-a11y/click-events-have-key-events */
-  }
-}
-
-setDefaultAnimation('dialog.show', {
-  keyframes: [
-    { opacity: 0, scale: 0.8 },
-    { opacity: 1, scale: 1 },
-  ],
-  options: { duration: 250, easing: 'ease' },
-});
-
-setDefaultAnimation('dialog.hide', {
-  keyframes: [
-    { opacity: 1, scale: 1 },
-    { opacity: 0, scale: 0.8 },
-  ],
-  options: { duration: 250, easing: 'ease' },
-});
-
-setDefaultAnimation('dialog.denyClose', {
-  keyframes: [{ scale: 1 }, { scale: 1.02 }, { scale: 1 }],
-  options: { duration: 250 },
-});
-
-setDefaultAnimation('dialog.overlay.show', {
-  keyframes: [{ opacity: 0 }, { opacity: 1 }],
-  options: { duration: 250 },
-});
-
-setDefaultAnimation('dialog.overlay.hide', {
-  keyframes: [{ opacity: 1 }, { opacity: 0 }],
-  options: { duration: 250 },
-});

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

@@ -1,169 +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 Dialogs, sometimes called "modals", appear above the page and require the user's immediate attention.
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-dialog--docs
- * @status stable
- * @since 2.0
- *
- * @dependency syn-icon-button
- *
- * @slot - The dialog's main content.
- * @slot label - The dialog's label. Alternatively, you can use the `label` attribute.
- * @slot header-actions - Optional actions to add to the header. Works best with `<syn-icon-button>`.
- * @slot footer - The dialog's footer, usually one or more buttons representing various options.
- *
- * @event syn-show - Emitted when the dialog opens.
- * @event syn-after-show - Emitted after the dialog opens and all animations are complete.
- * @event syn-hide - Emitted when the dialog closes.
- * @event syn-after-hide - Emitted after the dialog closes and all animations are complete.
- * @event syn-initial-focus - Emitted when the dialog opens and is ready to receive focus. Calling
- *   `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.
- * @event {{ source: 'close-button' | 'keyboard' | 'overlay' }} syn-request-close - Emitted when the user attempts to
- *   close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling
- *   `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in
- *   destructive behavior such as data loss.
- *
- * @csspart base - The component's base wrapper.
- * @csspart overlay - The overlay that covers the screen behind the dialog.
- * @csspart panel - The dialog's panel (where the dialog and its content are rendered).
- * @csspart header - The dialog's header. This element wraps the title and header actions.
- * @csspart header-actions - Optional actions to add to the header. Works best with `<syn-icon-button>`.
- * @csspart title - The dialog's title.
- * @csspart close-button - The close button, an `<syn-icon-button>`.
- * @csspart close-button__base - The close button's exported `base` part.
- * @csspart body - The dialog's body.
- * @csspart footer - The dialog's footer.
- *
- * @cssproperty --width - The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.
- * @cssproperty --header-spacing - The amount of padding to use for the header.
- * @cssproperty --body-spacing - The amount of padding to use for the body.
- * @cssproperty --footer-spacing - The amount of padding to use for the footer.
- *
- * @animation dialog.show - The animation to use when showing the dialog.
- * @animation dialog.hide - The animation to use when hiding the dialog.
- * @animation dialog.denyClose - The animation to use when a request to close the dialog is denied.
- * @animation dialog.overlay.show - The animation to use when showing the dialog's overlay.
- * @animation dialog.overlay.hide - The animation to use when hiding the dialog's overlay.
- *
- * @property modal - Exposes the internal modal utility that controls focus trapping. To temporarily disable focus
- *   trapping and allow third-party modals spawned from an active Synergy modal, call `modal.activateExternal()` when
- *   the third-party modal opens. Upon closing, call `modal.deactivateExternal()` to restore Synergy's focus trapping.
- */
-import { computed, ref } from 'vue';
-import '@synergy-design-system/components/components/dialog/dialog.js';
-
-import type { SynShowEvent } from '@synergy-design-system/components';
-import type { SynAfterShowEvent } from '@synergy-design-system/components';
-import type { SynHideEvent } from '@synergy-design-system/components';
-import type { SynAfterHideEvent } from '@synergy-design-system/components';
-import type { SynInitialFocusEvent } from '@synergy-design-system/components';
-import type { SynRequestCloseEvent } from '@synergy-design-system/components';
-import type { SynDialog } from '@synergy-design-system/components';
-
-// DOM Reference to the element
-const nativeElement = ref<SynDialog>();
-
-defineExpose({
-  nativeElement,
-});
-
-// Map attributes
-const props = defineProps<{
-  /**
-* Indicates whether or not the dialog is open.
-* You can toggle this attribute to show and hide the dialog, or you can
-use the `show()` and `hide()` methods and this attribute will reflect the dialog's open state.
- */
-  open?: SynDialog['open'];
-
-  /**
-* The dialog's label as displayed in the header.
-* You should always include a relevant label even when using
-`no-header`, as it is required for proper accessibility.
-* If you need to display HTML, use the `label` slot instead.
- */
-  label?: SynDialog['label'];
-
-  /**
-* Disables the header.
-* This will also remove the default close button, so please ensure you provide an easy,
-accessible way for users to dismiss the dialog.
- */
-  noHeader?: SynDialog['noHeader'];
-}>();
-
-// 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'),
-  ),
-);
-
-// Map events
-defineEmits<{
-  /**
-   * Emitted when the dialog opens.
-   */
-  'syn-show': [e: SynShowEvent];
-
-  /**
-   * Emitted after the dialog opens and all animations are complete.
-   */
-  'syn-after-show': [e: SynAfterShowEvent];
-
-  /**
-   * Emitted when the dialog closes.
-   */
-  'syn-hide': [e: SynHideEvent];
-
-  /**
-   * Emitted after the dialog closes and all animations are complete.
-   */
-  'syn-after-hide': [e: SynAfterHideEvent];
-
-  /**
-   * Emitted when the dialog opens and is ready to receive focus.
-   * Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.
-   */
-  'syn-initial-focus': [e: SynInitialFocusEvent];
-
-  /**
-   * Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape.
-   * Calling `event.preventDefault()` will keep the dialog open.
-   * Avoid using this unless closing the dialog will result in destructive behavior such as data loss.
-   */
-  'syn-request-close': [e: SynRequestCloseEvent];
-}>();
-</script>
-
-<script lang="ts">
-export type { SynShowEvent } from '@synergy-design-system/components';
-export type { SynAfterShowEvent } from '@synergy-design-system/components';
-export type { SynHideEvent } from '@synergy-design-system/components';
-export type { SynAfterHideEvent } from '@synergy-design-system/components';
-export type { SynInitialFocusEvent } from '@synergy-design-system/components';
-export type { SynRequestCloseEvent } from '@synergy-design-system/components';
-</script>
-
-<template>
-  <syn-dialog
-    @syn-show="$emit('syn-show', $event)"
-    @syn-after-show="$emit('syn-after-show', $event)"
-    @syn-hide="$emit('syn-hide', $event)"
-    @syn-after-hide="$emit('syn-after-hide', $event)"
-    @syn-initial-focus="$emit('syn-initial-focus', $event)"
-    @syn-request-close="$emit('syn-request-close', $event)"
-    v-bind="visibleProps"
-    ref="nativeElement">
-    <slot></slot>
-  </syn-dialog>
-</template>

package/metadata/packages/components/components/syn-divider/component.angular.ts

@@ -1,55 +0,0 @@
-// ---------------------------------------------------------------------
-// 🔒 AUTOGENERATED @synergy-design-system/angular wrappers for @synergy-design-system/components
-// Please do not edit this file directly!
-// It will get recreated when running pnpm build.
-// ---------------------------------------------------------------------
-import {
-  Component,
-  ElementRef,
-  NgZone,
-  Input,
-  Output,
-  EventEmitter,
-  AfterContentInit,
-} from '@angular/core';
-import type { SynDivider } from '@synergy-design-system/components';
-
-import '@synergy-design-system/components/components/divider/divider.js';
-
-/**
- * @summary Dividers are used to visually separate or group elements.
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-divider--docs
- * @status stable
- * @since 2.0
- *
- * @cssproperty --color - The color of the divider.
- * @cssproperty --width - The width of the divider.
- * @cssproperty --spacing - The spacing of the divider.
- */
-@Component({
-  selector: 'syn-divider',
-  standalone: true,
-  template: '<ng-content></ng-content>',
-})
-export class SynDividerComponent {
-  public nativeElement: SynDivider;
-  private _ngZone: NgZone;
-
-  constructor(e: ElementRef, ngZone: NgZone) {
-    this.nativeElement = e.nativeElement;
-    this._ngZone = ngZone;
-  }
-
-  /**
-   * Draws the divider in a vertical orientation.
-   */
-  @Input()
-  set vertical(v: '' | SynDivider['vertical']) {
-    this._ngZone.runOutsideAngular(
-      () => (this.nativeElement.vertical = v === '' || v),
-    );
-  }
-  get vertical(): SynDivider['vertical'] {
-    return this.nativeElement.vertical;
-  }
-}

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

@@ -1,29 +0,0 @@
-// ---------------------------------------------------------------------
-// 🔒 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/divider/divider.component.js';
-
-const tagName = 'syn-divider';
-Component.define('syn-divider');
-
-/**
- * @summary Dividers are used to visually separate or group elements.
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-divider--docs
- * @status stable
- * @since 2.0
- *
- * @cssproperty --color - The color of the divider.
- * @cssproperty --width - The width of the divider.
- * @cssproperty --spacing - The spacing of the divider.
- */
-export const SynDivider = createComponent({
-  displayName: 'SynDivider',
-  elementClass: Component,
-  events: {},
-  react: React,
-  tagName,
-});

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

@@ -1,22 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  :host {
-    --color: var(--syn-panel-border-color);
-    --width: var(--syn-panel-border-width);
-    --spacing: var(--syn-spacing-medium);
-  }
-
-  :host(:not([vertical])) {
-    border-top: solid var(--width) var(--color);
-    display: block;
-    margin: var(--spacing) 0;
-  }
-
-  :host([vertical]) {
-    border-left: solid var(--width) var(--color);
-    display: inline-block;
-    height: 100%;
-    margin: 0 var(--spacing);
-  }
-`;

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

@@ -1,34 +0,0 @@
-/* eslint-disable */
-import { property } 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 styles from './divider.styles.js';
-import type { CSSResultGroup } from 'lit';
-
-/**
- * @summary Dividers are used to visually separate or group elements.
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-divider--docs
- * @status stable
- * @since 2.0
- *
- * @cssproperty --color - The color of the divider.
- * @cssproperty --width - The width of the divider.
- * @cssproperty --spacing - The spacing of the divider.
- */
-export default class SynDivider extends SynergyElement {
-  static styles: CSSResultGroup = [componentStyles, styles];
-
-  /** Draws the divider in a vertical orientation. */
-  @property({ type: Boolean, reflect: true }) vertical = false;
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.setAttribute('role', 'separator');
-  }
-
-  @watch('vertical')
-  handleVerticalChange() {
-    this.setAttribute('aria-orientation', this.vertical ? 'vertical' : 'horizontal');
-  }
-}