@synergy-design-system/mcp 0.1.0 → 1.1.0

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

@@ -0,0 +1,91 @@
+<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 Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel).
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tab--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency syn-icon-button
+ *
+ * @slot - The tab's label.
+ *
+ * @event syn-close - Emitted when the tab is closable and the close button is activated.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart close-button - The close button, an `<syn-icon-button>`.
+ * @csspart close-button__base - The close button's exported `base` part.
+ */
+import { computed, ref } from 'vue';
+import '@synergy-design-system/components/components/tab/tab.js';
+
+import type { SynCloseEvent } from '@synergy-design-system/components';
+import type { SynTab } from '@synergy-design-system/components';
+
+// DOM Reference to the element
+const nativeElement = ref<SynTab>();
+
+defineExpose({
+  nativeElement,
+});
+
+// Map attributes
+const props = defineProps<{
+  /**
+   * The name of the tab panel this tab is associated with.
+   * The panel must be located in the same tab group.
+   */
+  panel?: SynTab['panel'];
+
+  /**
+   * Draws the tab in an active state.
+   */
+  active?: SynTab['active'];
+
+  /**
+   * Makes the tab closable and shows a close button.
+   */
+  closable?: SynTab['closable'];
+
+  /**
+   * Disables the tab and prevents selection.
+   */
+  disabled?: SynTab['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'),
+  ),
+);
+
+// Map events
+defineEmits<{
+  /**
+   * Emitted when the tab is closable and the close button is activated.
+   */
+  'syn-close': [e: SynCloseEvent];
+}>();
+</script>
+
+<script lang="ts">
+export type { SynCloseEvent } from '@synergy-design-system/components';
+</script>
+
+<template>
+  <syn-tab
+    @syn-close="$emit('syn-close', $event)"
+    v-bind="visibleProps"
+    ref="nativeElement">
+    <slot></slot>
+  </syn-tab>
+</template>

package/metadata/packages/components/components/syn-tab-group/component.angular.ts

@@ -0,0 +1,166 @@
+// ---------------------------------------------------------------------
+// 🔒 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 { SynTabGroup } from '@synergy-design-system/components';
+import type { SynTabShowEvent } from '@synergy-design-system/components';
+import type { SynTabHideEvent } from '@synergy-design-system/components';
+import '@synergy-design-system/components/components/tab-group/tab-group.js';
+
+/**
+ * @summary Tab groups organize content into a container that shows one section at a time.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tab-group--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency syn-icon-button
+ *
+ * @slot - Used for grouping tab panels in the tab group. Must be `<syn-tab-panel>` elements.
+ * @slot nav - Used for grouping tabs in the tab group. Must be `<syn-tab>` elements.
+ *
+ * @event {{ name: String }} syn-tab-show - Emitted when a tab is shown. The payload of the event returns the "panel" attribute of the shown tab.
+ * @event {{ name: String }} syn-tab-hide - Emitted when a tab is hidden. The payload of the event returns the "panel" attribute of the hidden tab.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart nav - The tab group's navigation container where tabs are slotted in.
+ * @csspart tabs - The container that wraps the tabs.
+ * @csspart active-tab-indicator - The line that highlights the currently selected tab.
+ * @csspart body - The tab group's body where tab panels are slotted in.
+ * @csspart scroll-button - The previous/next scroll buttons that show when tabs are scrollable, an `<syn-icon-button>`.
+ * @csspart scroll-button--start - The starting scroll button.
+ * @csspart scroll-button--end - The ending scroll button.
+ * @csspart scroll-button__base - The scroll button's exported `base` part.
+ *
+ * @cssproperty --indicator-color - The color of the active tab indicator.
+ * @cssproperty --indicator-width - The width of the active tab indicator.
+ * @cssproperty --track-color - The color of the indicator's track (the line that separates tabs from panels).
+ * @cssproperty --track-width - The width of the indicator's track (the line that separates tabs from panels).
+ */
+@Component({
+  selector: 'syn-tab-group',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+})
+export class SynTabGroupComponent {
+  public nativeElement: SynTabGroup;
+  private _ngZone: NgZone;
+
+  constructor(e: ElementRef, ngZone: NgZone) {
+    this.nativeElement = e.nativeElement;
+    this._ngZone = ngZone;
+    this.nativeElement.addEventListener(
+      'syn-tab-show',
+      (e: SynTabShowEvent) => {
+        this.synTabShowEvent.emit(e);
+      },
+    );
+    this.nativeElement.addEventListener(
+      'syn-tab-hide',
+      (e: SynTabHideEvent) => {
+        this.synTabHideEvent.emit(e);
+      },
+    );
+  }
+
+  /**
+   * The placement of the tabs.
+   */
+  @Input()
+  set placement(v: SynTabGroup['placement']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.placement = v));
+  }
+  get placement(): SynTabGroup['placement'] {
+    return this.nativeElement.placement;
+  }
+
+  /**
+* When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel.
+* When set to
+manual, the tab will receive focus but will not show until the user presses spacebar or enter.
+ */
+  @Input()
+  set activation(v: SynTabGroup['activation']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.activation = v));
+  }
+  get activation(): SynTabGroup['activation'] {
+    return this.nativeElement.activation;
+  }
+
+  /**
+   * Disables the scroll arrows that appear when tabs overflow.
+   */
+  @Input()
+  set noScrollControls(v: '' | SynTabGroup['noScrollControls']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.noScrollControls = v === '' || v),
+    );
+  }
+  get noScrollControls(): SynTabGroup['noScrollControls'] {
+    return this.nativeElement.noScrollControls;
+  }
+
+  /**
+   * Draws the tab group as a contained element.
+   */
+  @Input()
+  set contained(v: '' | SynTabGroup['contained']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.contained = v === '' || v),
+    );
+  }
+  get contained(): SynTabGroup['contained'] {
+    return this.nativeElement.contained;
+  }
+
+  /**
+   * Draws the tab group with edges instead of roundings.
+   * Takes only effect if used with the 'contained' property
+   */
+  @Input()
+  set sharp(v: '' | SynTabGroup['sharp']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.sharp = v === '' || v),
+    );
+  }
+  get sharp(): SynTabGroup['sharp'] {
+    return this.nativeElement.sharp;
+  }
+
+  /**
+   * Prevent scroll buttons from being hidden when inactive.
+   */
+  @Input()
+  set fixedScrollControls(v: '' | SynTabGroup['fixedScrollControls']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.fixedScrollControls = v === '' || v),
+    );
+  }
+  get fixedScrollControls(): SynTabGroup['fixedScrollControls'] {
+    return this.nativeElement.fixedScrollControls;
+  }
+
+  /**
+   * Emitted when a tab is shown.
+   * The payload of the event returns the "panel" attribute of the shown tab.
+   */
+  @Output() synTabShowEvent = new EventEmitter<SynTabShowEvent>();
+
+  /**
+   * Emitted when a tab is hidden.
+   * The payload of the event returns the "panel" attribute of the hidden tab.
+   */
+  @Output() synTabHideEvent = new EventEmitter<SynTabHideEvent>();
+}
+
+export type { SynTabShowEvent } from '@synergy-design-system/components';
+export type { SynTabHideEvent } from '@synergy-design-system/components';

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

@@ -0,0 +1,248 @@
+import { css } from 'lit';
+
+export default css`
+  /* stylelint-disable no-descending-specificity */
+  /* Write custom CSS here */
+  :host {
+    --track-width: var(--syn-border-width-small);
+    --track-color: var(--syn-color-neutral-300);
+    --indicator-width: var(--syn-border-width-x-large);
+  }
+
+  /* we need to augment the size of the height of the tab-group__nav to make the focus outline and the hiding white border visible of the tab because of overflow-x value  */
+  .tab-group--top .tab-group__body {
+    position: relative;
+    top: calc(-1 * var(--syn-panel-border-width));
+  }
+
+  .tab-group--top .tab-group__nav {
+    padding: 0 0 var(--syn-panel-border-width) 0;
+  }
+
+  /**
+   * Indicator
+   */
+  .tab-group--top .tab-group__indicator {
+    border-bottom: solid var(--indicator-width) var(--indicator-color);
+    bottom: 0;
+  }
+
+  .tab-group--start .tab-group__indicator {
+    border-right: solid var(--indicator-width) var(--indicator-color);
+    right: 0;
+  }
+
+  .tab-group--start.tab-group--rtl .tab-group__indicator {
+    left: 0;
+  }
+
+  .tab-group--end .tab-group__indicator {
+    border-inline-start: solid var(--indicator-width) var(--indicator-color);
+    left: 0;
+  }
+
+  .tab-group--end.tab-group--rtl .tab-group__indicator {
+    right: 0;
+  }
+
+  /**
+   * Panel
+   */
+  .tab-group--top ::slotted(syn-tab-panel) {
+    --padding: var(--syn-spacing-large) 0;
+  }
+
+  .tab-group--start ::slotted(syn-tab-panel) {
+    --padding: 0 var(--syn-spacing-large);
+  }
+
+  .tab-group--end ::slotted(syn-tab-panel) {
+    --padding: 0 var(--syn-spacing-large);
+  }
+
+  /**
+   * Contained styling
+   */ 
+  .tab-group--contained .tab-group__tabs {
+    border: none;
+  }
+
+  .tab-group--contained ::slotted(syn-tab-panel) {
+    --padding: var(--syn-spacing-large);
+
+    background-color: var(--syn-panel-background-color);
+    border: var(--syn-panel-border-width) solid var(--syn-panel-border-color);
+    border-radius: var(--syn-border-radius-medium);
+  }
+
+  /* Stretch the tab panel container for non-top placements, otherwise the borders are not drawn correctly */
+  .tab-group--contained:not(.tab-group--top) ::slotted(syn-tab-panel) {
+    height: 100%;
+  }
+
+  /* Draw the correct border radii of the panel depending on the placement and direction */
+  .tab-group--top.tab-group--contained:not(.tab-group--sharp):not(.tab-group--has-scroll-controls) ::slotted(syn-tab-panel:first-of-type),
+  .tab-group--start.tab-group--contained:not(.tab-group--sharp) ::slotted(syn-tab-panel:first-of-type) {
+    border-start-start-radius: var(--syn-border-radius-none);
+  }
+
+  .tab-group--start.tab-group--contained:not(.tab-group--sharp) ::slotted(syn-tab-panel:last-of-type) {
+    border-end-start-radius: var(--syn-border-radius-none);
+  }
+
+  .tab-group--end.tab-group--contained:not(.tab-group--sharp) ::slotted(syn-tab-panel:last-of-type) {
+    border-end-end-radius: var(--syn-border-radius-none);
+  }
+
+  .tab-group--end.tab-group--contained:not(.tab-group--sharp) ::slotted(syn-tab-panel:first-of-type) {
+    border-start-end-radius: var(--syn-border-radius-none);
+  }
+
+  .tab-group--contained .tab-group__indicator {
+    /* Remove the animation of the indicator */
+    transition: none;
+    
+    /* Needed, otherwise the indicator is hidden under the background of the tab */
+    z-index: 2;
+  }
+
+  /* Contained styling for tabs */
+  .tab-group--contained ::slotted(syn-tab) {
+    --background-color: var(--syn-panel-background-color);
+    --border-width: var(--syn-panel-border-width);
+
+    position: relative;
+    z-index: 1;
+  }
+
+  /* Top */
+  .tab-group--top.tab-group--contained:not(.tab-group--sharp) ::slotted(syn-tab) {
+    --border-radius: var(--syn-border-radius-medium) var(--syn-border-radius-medium) var(--syn-border-radius-none) var(--syn-border-radius-none);
+  }
+
+  .tab-group--top.tab-group--contained ::slotted(syn-tab[active]) {
+    --border-color: var(--syn-panel-border-color) var(--syn-panel-border-color) var(--syn-panel-background-color);
+
+    /* We need to move the tab down, so the bottom border, hides parts of the border of the tab-group */
+    top: var(--syn-panel-border-width);
+  }
+
+  .tab-group--top.tab-group--contained ::slotted(syn-tab:not([active])) {
+    /*  We need to move down the non-active tabs also, so we don't get jumping of the tab text content */
+    top: var(--syn-panel-border-width);
+  }
+
+  /* Start & End with rtl */
+  .tab-group--start.tab-group--contained:not(.tab-group--sharp) ::slotted(syn-tab),
+  .tab-group--end.tab-group--rtl.tab-group--contained:not(.tab-group--sharp) ::slotted(syn-tab) {
+    --border-radius: var(--syn-border-radius-medium) var(--syn-border-radius-none) var(--syn-border-radius-none) var(--syn-border-radius-medium);
+  }
+
+  .tab-group--start.tab-group--contained ::slotted(syn-tab[active]),
+  .tab-group--end.tab-group--rtl.tab-group--contained ::slotted(syn-tab[active]) {
+    --border-color: var(--syn-panel-border-color) var(--syn-panel-background-color) var(--syn-panel-border-color)  var(--syn-panel-border-color) ;
+
+    /* We need to move the tab right, so the right border, hides parts of the border of the tab-group */
+    left: var(--syn-panel-border-width);
+    right: unset;
+  }
+
+  .tab-group--start.tab-group--contained ::slotted(syn-tab:not([active])),
+  .tab-group--end.tab-group--rtl.tab-group--contained ::slotted(syn-tab:not([active])) {
+    /*  We need to move right the non-active tabs also, so we don't get jumping of the tab text content */
+    left: var(--syn-panel-border-width);
+    right: unset;
+  }
+
+  /* End & Start with rtl */
+  .tab-group--end.tab-group--contained:not(.tab-group--sharp) ::slotted(syn-tab),
+  .tab-group--start.tab-group--rtl.tab-group--contained:not(.tab-group--sharp) ::slotted(syn-tab) {
+    --border-radius: var(--syn-border-radius-none) var(--syn-border-radius-medium) var(--syn-border-radius-medium) var(--syn-border-radius-none);
+  }
+
+  .tab-group--end.tab-group--contained ::slotted(syn-tab[active]),
+  .tab-group--start.tab-group--rtl.tab-group--contained ::slotted(syn-tab[active]) {
+    --border-color: var(--syn-panel-border-color) var(--syn-panel-border-color) var(--syn-panel-border-color) var(--syn-panel-background-color);
+
+    /* We need to move the tab left, so the left border, hides parts of the border of the tab-group */
+    left: unset;
+    right: var(--syn-panel-border-width);
+  }
+
+  .tab-group--end.tab-group--contained ::slotted(syn-tab:not([active])),
+  .tab-group--start.tab-group--rtl.tab-group--contained ::slotted(syn-tab:not([active])) {
+    /*  We need to move left the non-active tabs also, so we don't get jumping of the tab text content */
+    left: unset;
+    right: var(--syn-panel-border-width);
+  }
+
+
+  /**
+   * Sharp styling
+   */
+  .tab-group--sharp ::slotted(syn-tab-panel) {
+    border-radius: var(--syn-border-radius-none);
+  }
+
+
+  /**
+   * Scroll buttons
+   */
+  .tab-group--has-scroll-controls .tab-group__nav-container {
+    padding: 0 calc(var(--syn-spacing-x-large) + var( --syn-spacing-2x-small));
+  }
+
+  .tab-group__scroll-button {
+    /* we need to move the scroll buttons to the top, to align the borders with the border of the tab-group--nav  */
+    bottom: var(--syn-panel-border-width);
+    color: var(--syn-color-neutral-950);
+    font-size: var(--syn-font-size-medium);
+    width: calc(var(--syn-spacing-x-large) + var( --syn-spacing-2x-small));
+  }
+
+  .tab-group__scroll-button::part(base) {
+    padding: calc(var(--syn-spacing-small) - var(--syn-spacing-3x-small));
+  }
+
+  /* Make sure the direction of the chevrons match the scrolling directions. */
+  .tab-group--has-scroll-controls:not(.tab-group--rtl) .tab-group__scroll-button--start,
+  .tab-group--rtl .tab-group__scroll-button--end {
+    rotate: 180deg;
+  }
+
+  .tab-group--has-scroll-controls:not(.tab-group--contained) .tab-group__scroll-button--start {
+    border-top: solid var(--track-width) var(--track-color);
+  }
+
+  .tab-group--has-scroll-controls:not(.tab-group--contained) .tab-group__scroll-button--end {
+    border-bottom: solid var(--track-width) var(--track-color);
+  }
+
+  .tab-group--rtl:not(.tab-group--contained) .tab-group__scroll-button--start {
+    border-bottom: solid var(--track-width) var(--track-color);
+    border-top: none;
+  }
+
+  .tab-group--rtl:not(.tab-group--contained) .tab-group__scroll-button--end {
+    border-bottom: none;
+    border-top: solid var(--track-width) var(--track-color);
+  }
+
+  /**
+   * Shoelace 2.17 introduced a new attribute "fixed-scroll-controls".
+   * Per default, tab-groups now hide the scroll buttons when they are not needed.
+   * "fixed-scroll-controls" will keep the scroll buttons visible at all times,
+   * which is the default behavior of Synergy.
+   * For this reason, we make the buttons visible by default, but show them in a "disabled" state when they are not needed.
+   */
+  .tab-group--has-scroll-controls .tab-group__scroll-button--start--hidden,
+  .tab-group--has-scroll-controls .tab-group__scroll-button--end--hidden {
+    visibility: visible;
+  }
+
+  .tab-group--has-scroll-controls .tab-group__scroll-button--start--hidden::part(base),
+  .tab-group--has-scroll-controls .tab-group__scroll-button--end--hidden::part(base) {
+    opacity: var(--syn-input-disabled-opacity);
+    pointer-events: none;
+  }
+`;

package/metadata/packages/components/components/syn-tab-group/component.react.ts

@@ -0,0 +1,58 @@
+// ---------------------------------------------------------------------
+// 🔒 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/tab-group/tab-group.component.js';
+
+import { type EventName } from '@lit/react';
+import type { SynTabShowEvent } from '@synergy-design-system/components';
+import type { SynTabHideEvent } from '@synergy-design-system/components';
+
+const tagName = 'syn-tab-group';
+Component.define('syn-tab-group');
+
+/**
+ * @summary Tab groups organize content into a container that shows one section at a time.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tab-group--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency syn-icon-button
+ *
+ * @slot - Used for grouping tab panels in the tab group. Must be `<syn-tab-panel>` elements.
+ * @slot nav - Used for grouping tabs in the tab group. Must be `<syn-tab>` elements.
+ *
+ * @event {{ name: String }} syn-tab-show - Emitted when a tab is shown. The payload of the event returns the "panel" attribute of the shown tab.
+ * @event {{ name: String }} syn-tab-hide - Emitted when a tab is hidden. The payload of the event returns the "panel" attribute of the hidden tab.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart nav - The tab group's navigation container where tabs are slotted in.
+ * @csspart tabs - The container that wraps the tabs.
+ * @csspart active-tab-indicator - The line that highlights the currently selected tab.
+ * @csspart body - The tab group's body where tab panels are slotted in.
+ * @csspart scroll-button - The previous/next scroll buttons that show when tabs are scrollable, an `<syn-icon-button>`.
+ * @csspart scroll-button--start - The starting scroll button.
+ * @csspart scroll-button--end - The ending scroll button.
+ * @csspart scroll-button__base - The scroll button's exported `base` part.
+ *
+ * @cssproperty --indicator-color - The color of the active tab indicator.
+ * @cssproperty --indicator-width - The width of the active tab indicator.
+ * @cssproperty --track-color - The color of the indicator's track (the line that separates tabs from panels).
+ * @cssproperty --track-width - The width of the indicator's track (the line that separates tabs from panels).
+ */
+export const SynTabGroup = createComponent({
+  displayName: 'SynTabGroup',
+  elementClass: Component,
+  events: {
+    onSynTabShow: 'syn-tab-show' as EventName<SynTabShowEvent>,
+    onSynTabHide: 'syn-tab-hide' as EventName<SynTabHideEvent>,
+  },
+  react: React,
+  tagName,
+});
+
+export type { SynTabShowEvent } from '@synergy-design-system/components';
+export type { SynTabHideEvent } from '@synergy-design-system/components';