@synergy-design-system/metadata 1.0.0 → 3.0.0

package/data/layers/full/component/component:syn-tab-group/components/tab-group.custom.styles.ts

@@ -0,0 +1,218 @@
+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-panel-border-color);
+    --indicator-width: var(--syn-border-width-x-large);
+    --indicator-color: var(--syn-interactive-emphasis-color);
+  }
+
+  /* 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);
+  }
+
+  .tab-group--start .tab-group__indicator {
+    border-right: solid var(--indicator-width) var(--indicator-color);
+  }
+
+  .tab-group--end .tab-group__indicator {
+    border-inline-start: solid var(--indicator-width) var(--indicator-color);
+  }
+
+  /**
+   * 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-interactive-quiet-color);
+    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));
+  }
+
+  .tab-group--has-scroll-controls:not(.tab-group--contained) .tab-group__scroll-button {
+    border-bottom: 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/data/layers/full/component/component:syn-tab-group/components/tab-group.styles.ts

@@ -0,0 +1,193 @@
+/* eslint-disable */
+import { css } from 'lit';
+
+export default css`
+	/* stylelint-disable */
+  :host {
+    --indicator-color: var(--syn-color-primary-600);
+    --track-color: var(--syn-color-neutral-200);
+    --track-width: 2px;
+
+    display: block;
+  }
+
+  .tab-group {
+    display: flex;
+    border-radius: 0;
+  }
+
+  .tab-group__tabs {
+    display: flex;
+    position: relative;
+  }
+
+  .tab-group__indicator {
+    position: absolute;
+    transition:
+      var(--syn-transition-fast) translate ease,
+      var(--syn-transition-fast) width ease;
+  }
+
+  .tab-group--has-scroll-controls .tab-group__nav-container {
+    position: relative;
+    padding: 0 var(--syn-spacing-x-large);
+  }
+
+  .tab-group--has-scroll-controls .tab-group__scroll-button--start--hidden,
+  .tab-group--has-scroll-controls .tab-group__scroll-button--end--hidden {
+    visibility: hidden;
+  }
+
+  .tab-group__body {
+    display: block;
+    overflow: auto;
+  }
+
+  .tab-group__scroll-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: var(--syn-spacing-x-large);
+  }
+
+  .tab-group__scroll-button--start {
+    left: 0;
+  }
+
+  .tab-group__scroll-button--end {
+    right: 0;
+  }
+
+  .tab-group--rtl .tab-group__scroll-button--start {
+    left: auto;
+    right: 0;
+  }
+
+  .tab-group--rtl .tab-group__scroll-button--end {
+    left: 0;
+    right: auto;
+  }
+
+  /*
+   * Top
+   */
+
+  .tab-group--top {
+    flex-direction: column;
+  }
+
+  .tab-group--top .tab-group__nav-container {
+    order: 1;
+  }
+
+  .tab-group--top .tab-group__nav {
+    display: flex;
+    overflow-x: auto;
+
+    /* Hide scrollbar in Firefox */
+    scrollbar-width: none;
+  }
+
+  /* Hide scrollbar in Chrome/Safari */
+  .tab-group--top .tab-group__nav::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+
+  .tab-group--top .tab-group__tabs {
+    flex: 1 1 auto;
+    position: relative;
+    flex-direction: row;
+    border-bottom: solid var(--track-width) var(--track-color);
+  }
+
+  .tab-group--top .tab-group__indicator {
+    bottom: calc(-1 * var(--track-width));
+    border-bottom: solid var(--track-width) var(--indicator-color);
+  }
+
+  .tab-group--top .tab-group__body {
+    order: 2;
+  }
+
+  .tab-group--top ::slotted(syn-tab-panel) {
+    --padding: var(--syn-spacing-medium) 0;
+  }
+
+  /*
+   * Start
+   */
+
+  .tab-group--start {
+    flex-direction: row;
+  }
+
+  .tab-group--start .tab-group__nav-container {
+    order: 1;
+  }
+
+  .tab-group--start .tab-group__tabs {
+    flex: 0 0 auto;
+    flex-direction: column;
+    border-inline-end: solid var(--track-width) var(--track-color);
+  }
+
+  .tab-group--start .tab-group__indicator {
+    right: calc(-1 * var(--track-width));
+    border-right: solid var(--track-width) var(--indicator-color);
+  }
+
+  .tab-group--start.tab-group--rtl .tab-group__indicator {
+    right: auto;
+    left: calc(-1 * var(--track-width));
+  }
+
+  .tab-group--start .tab-group__body {
+    flex: 1 1 auto;
+    order: 2;
+  }
+
+  .tab-group--start ::slotted(syn-tab-panel) {
+    --padding: 0 var(--syn-spacing-medium);
+  }
+
+  /*
+   * End
+   */
+
+  .tab-group--end {
+    flex-direction: row;
+  }
+
+  .tab-group--end .tab-group__nav-container {
+    order: 2;
+  }
+
+  .tab-group--end .tab-group__tabs {
+    flex: 0 0 auto;
+    flex-direction: column;
+    border-left: solid var(--track-width) var(--track-color);
+  }
+
+  .tab-group--end .tab-group__indicator {
+    left: calc(-1 * var(--track-width));
+    border-inline-start: solid var(--track-width) var(--indicator-color);
+  }
+
+  .tab-group--end.tab-group--rtl .tab-group__indicator {
+    right: calc(-1 * var(--track-width));
+    left: auto;
+  }
+
+  .tab-group--end .tab-group__body {
+    flex: 1 1 auto;
+    order: 1;
+  }
+
+  .tab-group--end ::slotted(syn-tab-panel) {
+    --padding: 0 var(--syn-spacing-medium);
+  }
+`;

package/data/layers/full/component/component:syn-tab-group/components/tab-group.ts

@@ -0,0 +1,13 @@
+/* eslint-disable */
+import SynTabGroup from './tab-group.component.js';
+
+export * from './tab-group.component.js';
+export default SynTabGroup;
+
+SynTabGroup.define('syn-tab-group');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'syn-tab-group': SynTabGroup;
+  }
+}

package/data/layers/full/component/component:syn-tab-group/react/SynTabGroupJSXElement.ts

@@ -0,0 +1,4 @@
+export type SynTabGroupJSXElement = SynCustomElement<
+  SynTabGroup,
+  [['syn-tab-show', SynTabShowEvent], ['syn-tab-hide', SynTabHideEvent]]
+>;

package/data/layers/full/component/component:syn-tab-group/react/tab-group.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 --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).
+ * @cssproperty --indicator-width - The width of the active tab indicator.
+ */
+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';

package/data/layers/full/component/component:syn-tab-group/vue/SynVueTabGroup.vue

@@ -0,0 +1,126 @@
+<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 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 --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).
+ * @cssproperty --indicator-width - The width of the active tab indicator.
+ */
+import { computed, ref } from 'vue';
+import '@synergy-design-system/components/components/tab-group/tab-group.js';
+
+import type { SynTabShowEvent } from '@synergy-design-system/components';
+import type { SynTabHideEvent } from '@synergy-design-system/components';
+import type { SynTabGroup } from '@synergy-design-system/components';
+
+// DOM Reference to the element
+const nativeElement = ref<SynTabGroup>();
+
+defineExpose({
+  nativeElement,
+});
+
+// Map attributes
+const props = defineProps<{
+  /**
+   * The placement of the tabs.
+   */
+  placement?: SynTabGroup['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.
+ */
+  activation?: SynTabGroup['activation'];
+
+  /**
+   * Disables the scroll arrows that appear when tabs overflow.
+   */
+  noScrollControls?: SynTabGroup['noScrollControls'];
+
+  /**
+   * Draws the tab group as a contained element.
+   */
+  contained?: SynTabGroup['contained'];
+
+  /**
+   * Draws the tab group with edges instead of roundings.
+   * Takes only effect if used with the 'contained' property
+   */
+  sharp?: SynTabGroup['sharp'];
+
+  /**
+   * Prevent scroll buttons from being hidden when inactive.
+   */
+  fixedScrollControls?: SynTabGroup['fixedScrollControls'];
+}>();
+
+// 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 a tab is shown.
+   * The payload of the event returns the "panel" attribute of the shown tab.
+   */
+  'syn-tab-show': [e: SynTabShowEvent];
+
+  /**
+   * Emitted when a tab is hidden.
+   * The payload of the event returns the "panel" attribute of the hidden tab.
+   */
+  'syn-tab-hide': [e: SynTabHideEvent];
+}>();
+</script>
+
+<script lang="ts">
+export type { SynTabShowEvent } from '@synergy-design-system/components';
+export type { SynTabHideEvent } from '@synergy-design-system/components';
+</script>
+
+<template>
+  <syn-tab-group
+    @syn-tab-show="$emit('syn-tab-show', $event)"
+    @syn-tab-hide="$emit('syn-tab-hide', $event)"
+    v-bind="visibleProps"
+    ref="nativeElement">
+    <slot></slot>
+  </syn-tab-group>
+</template>

package/data/layers/full/component/component:syn-tab-panel/angular/tab-panel.component.ts

@@ -0,0 +1,68 @@
+// ---------------------------------------------------------------------
+// 🔒 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 { SynTabPanel } from '@synergy-design-system/components';
+
+import '@synergy-design-system/components/components/tab-panel/tab-panel.js';
+
+/**
+ * @summary Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tab-panel--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @slot - The tab panel's content.
+ *
+ * @csspart base - The component's base wrapper.
+ *
+ * @cssproperty --padding - The tab panel's padding.
+ */
+@Component({
+  selector: 'syn-tab-panel',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+})
+export class SynTabPanelComponent {
+  public nativeElement: SynTabPanel;
+  private _ngZone: NgZone;
+
+  constructor(e: ElementRef, ngZone: NgZone) {
+    this.nativeElement = e.nativeElement;
+    this._ngZone = ngZone;
+  }
+
+  /**
+   * The tab panel's name.
+   */
+  @Input()
+  set name(v: SynTabPanel['name']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.name = v));
+  }
+  get name(): SynTabPanel['name'] {
+    return this.nativeElement.name;
+  }
+
+  /**
+   * When true, the tab panel will be shown.
+   */
+  @Input()
+  set active(v: '' | SynTabPanel['active']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.active = v === '' || v),
+    );
+  }
+  get active(): SynTabPanel['active'] {
+    return this.nativeElement.active;
+  }
+}