@synergy-design-system/mcp 2.14.1 → 3.0.0

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

@@ -1,181 +0,0 @@
-/* eslint-disable */
-import { css } from 'lit';
-
-export default css`
-  :host {
-    /* Size-dependent custom properties (default to medium values) */
-    --details-header-padding: var(--syn-spacing-medium-large) 0;
-    --details-content-padding: var(--syn-spacing-medium) 0 var(--syn-spacing-large);
-    --details-summary-font: var(--syn-body-medium-bold);
-    --details-content-font-size: var(--syn-font-size-small);
-    --details-icon-size: var(--syn-spacing-large);
-    --details-slotted-icon-size: var(--syn-spacing-large);
-    
-    /* Contained variant custom properties */
-    --details-header-padding-contained: var(--syn-spacing-medium-large) var(--syn-spacing-large);
-    --details-content-padding-contained: var(--syn-spacing-medium) var(--syn-spacing-large) var(--syn-spacing-large);
-
-    display: block;
-  }
-
-  .details {
-    background-color: transparent;
-    border: 1px solid var(--syn-panel-border-color);
-    border-radius: var(--syn-border-radius-none);
-    border-width: 0 0 var(--syn-border-width-small);
-    overflow-anchor: none;
-  }
-
-  /** #429: Use token for opacity */
-  .details--disabled {
-    opacity: var(--syn-opacity-50);
-  }
-
-  .details__header {
-    align-items: center;
-    border-radius: inherit;
-    cursor: pointer;
-    display: flex;
-    gap: var(--syn-spacing-medium);
-    padding: var(--details-header-padding);
-    user-select: none;
-  }
-
-  .details__header::-webkit-details-marker {
-    display: none;
-  }
-
-  .details__header:focus {
-    outline: none;
-  }
-
-  .details__header:focus-visible {
-    outline: var(--syn-focus-ring);
-    outline-offset: calc(1px + var(--syn-focus-ring-offset));
-  }
-
-  .details--disabled .details__header {
-    cursor: not-allowed;
-  }
-
-  .details--disabled .details__header:focus-visible {
-    box-shadow: none;
-    outline: none;
-  }
-
-  .details__summary {
-    align-items: center;
-    color: var(--syn-typography-color-text);
-    display: flex;
-    flex: 1 1 auto;
-    font: var(--details-summary-font);
-  }
-
-  .details__summary-icon {
-    align-items: center;
-    align-self: flex-start;
-    color: var(--syn-color-neutral-950);
-    display: flex;
-    flex: 0 0 auto;
-    font-size: var(--details-icon-size);
-    position: relative;
-
-    /**
-     * As we are using an alignment of "start"  instead of "center" make sure
-     * the arrow starts on the same visual line as the first line of headline text
-     */
-    top: 2px;
-    transition: var(--syn-transition-medium) rotate ease;
-  }
-
-  /**
-   * As we are using top/down arrows for the details element,
-   * we have to adjust the rotation of the icon when the details is open.
-   */
-  .details--open .details__summary-icon {
-    rotate: var(--syn-details-open-rotation);
-  }
-
-  .details--open slot[name='expand-icon'],
-  .details:not(.details--open) slot[name='collapse-icon'] {
-    display: none;
-  }
-
-  .details__body {
-    overflow: hidden;
-  }
-
-  .details__content {
-    display: block;
-    font-size: var(--details-content-font-size);
-    line-height: var(--syn-line-height-normal);
-    padding: var(--details-content-padding);
-  }
-
-  /**
-   * Size variants
-   */
-  .details--size-small {
-    --details-header-padding: var(--syn-spacing-small) 0;
-    --details-content-padding: var(--syn-spacing-small) 0 var(--syn-spacing-medium-large);
-    --details-summary-font: var(--syn-body-small-bold);
-    --details-content-font-size: var(--syn-font-size-x-small);
-    --details-icon-size: var(--syn-spacing-medium-large);
-    --details-slotted-icon-size: var(--syn-spacing-medium-large);
-    --details-header-padding-contained: var(--syn-spacing-small) var(--syn-spacing-large);
-    --details-content-padding-contained: var(--syn-spacing-small) var(--syn-spacing-large) var(--syn-spacing-medium-large);
-  }
-
-  /* stylelint-disable-next-line no-descending-specificity */
-  .details--size-small .details__header {
-    min-height: var(--syn-spacing-large);
-  }
-
-  .details--size-large {
-    --details-header-padding: var(--syn-spacing-large) 0;
-    --details-content-padding: var(--syn-spacing-medium-large) 0 var(--syn-spacing-large);
-    --details-summary-font: var(--syn-body-large-bold);
-    --details-content-font-size: var(--syn-font-size-medium);
-    --details-icon-size: var(--syn-spacing-x-large);
-    --details-slotted-icon-size: var(--syn-spacing-x-large);
-    --details-header-padding-contained: var(--syn-spacing-large);
-    --details-content-padding-contained: var(--syn-spacing-medium-large) var(--syn-spacing-large) var(--syn-spacing-large);
-  }
-
-  .details__summary::slotted(syn-icon) {
-    /* Avoid shrinking of the icon, if the text content of the summary is very long and multi line */
-    flex-shrink: 0;
-    font-size: var(--details-slotted-icon-size);
-    margin-right: var(--syn-spacing-small);
-  }
-
-  /**
-   * Add a visually visible hover effect to the summary element
-   */
-  .details:not(.details--disabled) .details__header:hover .details__summary,
-  .details:not(.details--disabled) .details__header:hover .details__summary-icon {
-    color: var(--syn-interactive-quiet-color-hover);
-  }
-
-  /**
-   *  Contained style
-   */
-  .details--contained {
-    background-color: var(--syn-panel-background-color);
-    border-radius: var(--syn-border-radius-medium);
-    border-width: var(--syn-panel-border-width);
-  }
-
-  /* stylelint-disable-next-line no-descending-specificity */
-  .details--contained .details__header {
-    padding: var(--details-header-padding-contained);
-  }
-
-  .details--contained .details__content {
-    padding: var(--details-content-padding-contained);
-  }
-
-  .details--contained .details__header:focus-visible {
-    border-radius: var(--syn-border-radius-medium);
-  }
-`;

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

@@ -1,261 +0,0 @@
-/* eslint-disable */
-import { animateTo, shimKeyframesHeightAuto, stopAnimations } from '../../internal/animate.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { getAnimation, setDefaultAnimation } from '../../utilities/animation-registry.js';
-import { html } from 'lit';
-import { LocalizeController } from '../../utilities/localize.js';
-import { property, query } from 'lit/decorators.js';
-import { waitForEvent } from '../../internal/event.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 './details.styles.js';
-import type { CSSResultGroup } from 'lit';
-import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';
-
-/**
- * @summary Details show a brief summary and expand to show additional content.
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-details--docs
- * @status stable
- * @since 2.0
- *
- * @dependency syn-icon
- *
- * @slot - The details' main content.
- * @slot summary - The details' summary. Alternatively, you can use the `summary` attribute.
- * @slot expand-icon - Optional expand icon to use instead of the default. Works best with `<syn-icon>`.
- * @slot collapse-icon - Optional collapse icon to use instead of the default. Works best with `<syn-icon>`.
- *
- * @event syn-show - Emitted when the details opens.
- * @event syn-after-show - Emitted after the details opens and all animations are complete.
- * @event syn-hide - Emitted when the details closes.
- * @event syn-after-hide - Emitted after the details closes and all animations are complete.
- *
- * @csspart base - The component's base wrapper.
- * @csspart header - The header that wraps both the summary and the expand/collapse icon.
- * @csspart summary - The container that wraps the summary.
- * @csspart summary-icon - The container that wraps the expand/collapse icons.
- * @csspart content - The details content.
- * @csspart body - The container that wraps the details content.
- *
- * @animation details.show - The animation to use when showing details. You can use `height: auto` with this animation.
- * @animation details.hide - The animation to use when hiding details. You can use `height: auto` with this animation.
- *
- * @cssproperty --syn-details-open-rotation - The rotation angle of the summary icon when the details is open.
- */
-@enableDefaultSettings('SynDetails')
-export default class SynDetails extends SynergyElement {
-  static styles: CSSResultGroup = [componentStyles, styles];
-
-  static dependencies = {
-    'syn-icon': SynIcon
-  };
-
-  private readonly localize = new LocalizeController(this);
-
-  @query('.details') details: HTMLDetailsElement;
-  @query('.details__header') header: HTMLElement;
-  @query('.details__body') body: HTMLElement;
-  @query('.details__expand-icon-slot') expandIconSlot: HTMLSlotElement;
-
-  detailsObserver: MutationObserver;
-
-  /**
-   * Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you
-   * can use the `show()` and `hide()` methods and this attribute will reflect the details' open state.
-   */
-  @property({ type: Boolean, reflect: true }) open = false;
-
-  /** The summary to show in the header. If you need to display HTML, use the `summary` slot instead. */
-  @property() summary: string;
-
-  /** Disables the details so it can't be toggled. */
-  @property({ type: Boolean, reflect: true }) disabled = false;
-
-  /** Draws the details as contained element. */
-  @property({ type: Boolean, reflect: true }) contained = false;
-
-  /** The details's size. */
-  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
-
-  firstUpdated() {
-    this.body.style.height = this.open ? 'auto' : '0';
-    if (this.open) {
-      this.details.open = true;
-    }
-
-    this.detailsObserver = new MutationObserver(changes => {
-      for (const change of changes) {
-        if (change.type === 'attributes' && change.attributeName === 'open') {
-          if (this.details.open) {
-            this.show();
-          } else {
-            this.hide();
-          }
-        }
-      }
-    });
-    this.detailsObserver.observe(this.details, { attributes: true });
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.detailsObserver?.disconnect();
-  }
-
-  private handleSummaryClick(event: MouseEvent) {
-    event.preventDefault();
-
-    if (!this.disabled) {
-      if (this.open) {
-        this.hide();
-      } else {
-        this.show();
-      }
-      this.header.focus();
-    }
-  }
-
-  private handleSummaryKeyDown(event: KeyboardEvent) {
-    if (event.key === 'Enter' || event.key === ' ') {
-      event.preventDefault();
-
-      if (this.open) {
-        this.hide();
-      } else {
-        this.show();
-      }
-    }
-
-    if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {
-      event.preventDefault();
-      this.hide();
-    }
-
-    if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {
-      event.preventDefault();
-      this.show();
-    }
-  }
-
-  @watch('open', { waitUntilFirstUpdate: true })
-  async handleOpenChange() {
-    if (this.open) {
-      this.details.open = true;
-      // Show
-      const slShow = this.emit('syn-show', { cancelable: true });
-      if (slShow.defaultPrevented) {
-        this.open = false;
-        this.details.open = false;
-        return;
-      }
-
-      await stopAnimations(this.body);
-
-      const { keyframes, options } = getAnimation(this, 'details.show', { dir: this.localize.dir() });
-      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
-      this.body.style.height = 'auto';
-
-      this.emit('syn-after-show');
-    } else {
-      // Hide
-      const slHide = this.emit('syn-hide', { cancelable: true });
-      if (slHide.defaultPrevented) {
-        this.details.open = true;
-        this.open = true;
-        return;
-      }
-
-      await stopAnimations(this.body);
-
-      const { keyframes, options } = getAnimation(this, 'details.hide', { dir: this.localize.dir() });
-      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
-      this.body.style.height = 'auto';
-
-      this.details.open = false;
-      this.emit('syn-after-hide');
-    }
-  }
-
-  /** Shows the details. */
-  async show() {
-    if (this.open || this.disabled) {
-      return undefined;
-    }
-
-    this.open = true;
-    return waitForEvent(this, 'syn-after-show');
-  }
-
-  /** Hides the details */
-  async hide() {
-    if (!this.open || this.disabled) {
-      return undefined;
-    }
-
-    this.open = false;
-    return waitForEvent(this, 'syn-after-hide');
-  }
-
-  render() {
-    return html`
-      <details
-        part="base"
-        class=${classMap({
-          details: true,
-          'details--size-small': this.size === 'small',
-          'details--size-medium': this.size === 'medium',
-          'details--size-large': this.size === 'large',
-          'details--open': this.open,
-          'details--disabled': this.disabled,
-          'details--contained': this.contained,
-        })}
-      >
-        <summary
-          part="header"
-          id="header"
-          class="details__header"
-          role="button"
-          aria-expanded=${this.open ? 'true' : 'false'}
-          aria-controls="content"
-          aria-disabled=${this.disabled ? 'true' : 'false'}
-          tabindex=${this.disabled ? '-1' : '0'}
-          @click=${this.handleSummaryClick}
-          @keydown=${this.handleSummaryKeyDown}
-        >
-          <slot name="summary" part="summary" class="details__summary">${this.summary}</slot>
-
-          <span part="summary-icon" class="details__summary-icon">
-            <slot name="expand-icon">
-              <syn-icon library="system" name="details-open"></syn-icon>
-            </slot>
-            <slot name="collapse-icon">
-              <syn-icon library="system" name="details-close"></syn-icon>
-            </slot>
-          </span>
-        </summary>
-
-        <div class="details__body" part="body" role="region" aria-labelledby="header">
-          <slot part="content" id="content" class="details__content"></slot>
-        </div>
-      </details>
-    `;
-  }
-}
-
-setDefaultAnimation('details.show', {
-  keyframes: [
-    { height: '0', opacity: '0' },
-    { height: 'auto', opacity: '1' }
-  ],
-  options: { duration: 250, easing: 'linear' }
-});
-
-setDefaultAnimation('details.hide', {
-  keyframes: [
-    { height: 'auto', opacity: '1' },
-    { height: '0', opacity: '0' }
-  ],
-  options: { duration: 250, easing: 'linear' }
-});

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

@@ -1,136 +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 Details show a brief summary and expand to show additional content.
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-details--docs
- * @status stable
- * @since 2.0
- *
- * @dependency syn-icon
- *
- * @slot - The details' main content.
- * @slot summary - The details' summary. Alternatively, you can use the `summary` attribute.
- * @slot expand-icon - Optional expand icon to use instead of the default. Works best with `<syn-icon>`.
- * @slot collapse-icon - Optional collapse icon to use instead of the default. Works best with `<syn-icon>`.
- *
- * @event syn-show - Emitted when the details opens.
- * @event syn-after-show - Emitted after the details opens and all animations are complete.
- * @event syn-hide - Emitted when the details closes.
- * @event syn-after-hide - Emitted after the details closes and all animations are complete.
- *
- * @csspart base - The component's base wrapper.
- * @csspart header - The header that wraps both the summary and the expand/collapse icon.
- * @csspart summary - The container that wraps the summary.
- * @csspart summary-icon - The container that wraps the expand/collapse icons.
- * @csspart content - The details content.
- * @csspart body - The container that wraps the details content.
- *
- * @animation details.show - The animation to use when showing details. You can use `height: auto` with this animation.
- * @animation details.hide - The animation to use when hiding details. You can use `height: auto` with this animation.
- *
- * @cssproperty --syn-details-open-rotation - The rotation angle of the summary icon when the details is open.
- */
-import { computed, ref } from 'vue';
-import '@synergy-design-system/components/components/details/details.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 { SynDetails } from '@synergy-design-system/components';
-
-// DOM Reference to the element
-const nativeElement = ref<SynDetails>();
-
-defineExpose({
-  nativeElement,
-});
-
-// Map attributes
-const props = defineProps<{
-  /**
-* Indicates whether or not the details is open.
-* You can toggle this attribute to show and hide the details, or you
-can use the `show()` and `hide()` methods and this attribute will reflect the details' open state.
- */
-  open?: SynDetails['open'];
-
-  /**
-   * The summary to show in the header.
-   * If you need to display HTML, use the `summary` slot instead.
-   */
-  summary?: SynDetails['summary'];
-
-  /**
-   * Disables the details so it can't be toggled.
-   */
-  disabled?: SynDetails['disabled'];
-
-  /**
-   * Draws the details as contained element.
-   */
-  contained?: SynDetails['contained'];
-
-  /**
-   * The details's size.
-   */
-  size?: SynDetails['size'];
-}>();
-
-// 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 details opens.
-   */
-  'syn-show': [e: SynShowEvent];
-
-  /**
-   * Emitted after the details opens and all animations are complete.
-   */
-  'syn-after-show': [e: SynAfterShowEvent];
-
-  /**
-   * Emitted when the details closes.
-   */
-  'syn-hide': [e: SynHideEvent];
-
-  /**
-   * Emitted after the details closes and all animations are complete.
-   */
-  'syn-after-hide': [e: SynAfterHideEvent];
-}>();
-</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';
-</script>
-
-<template>
-  <syn-details
-    @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)"
-    v-bind="visibleProps"
-    ref="nativeElement">
-    <slot></slot>
-  </syn-details>
-</template>