@synergy-design-system/mcp 2.14.1 → 3.0.0

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

@@ -1,53 +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 { SynBadge } from '@synergy-design-system/components';
-
-import '@synergy-design-system/components/components/badge/badge.js';
-
-/**
- * @summary Badges are used to draw attention and display statuses or counts.
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-badge--docs
- * @status stable
- * @since 2.0
- *
- * @slot - The badge's content.
- *
- * @csspart base - The component's base wrapper.
- */
-@Component({
-  selector: 'syn-badge',
-  standalone: true,
-  template: '<ng-content></ng-content>',
-})
-export class SynBadgeComponent {
-  public nativeElement: SynBadge;
-  private _ngZone: NgZone;
-
-  constructor(e: ElementRef, ngZone: NgZone) {
-    this.nativeElement = e.nativeElement;
-    this._ngZone = ngZone;
-  }
-
-  /**
-   * The badge's theme variant.
-   */
-  @Input()
-  set variant(v: SynBadge['variant']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.variant = v));
-  }
-  get variant(): SynBadge['variant'] {
-    return this.nativeElement.variant;
-  }
-}

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

@@ -1,62 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  .badge {
-    border: none;
-    border-radius: var(--syn-border-radius-pill);
-    font: var(--syn-body-small-bold);
-    height: var(--syn-spacing-large);
-    line-height: var(--syn-spacing-large);
-    min-width: var(--syn-spacing-large);
-    padding: 0 var(--syn-spacing-x-small);
-  }
-
-  /* Variant modifiers */
-  .badge--primary {
-    background-color: var(--syn-badge-informative-color-background);
-    color: var(--syn-badge-informative-color-text);
-  }
-
-  .badge--success {
-    background-color: var(--syn-badge-success-color-background);
-    color: var(--syn-badge-success-color-text);
-  }
-
-  .badge--neutral {
-    background-color: var(--syn-badge-neutral-color-background);
-    color: var(--syn-badge-neutral-color-text);
-  }
-
-  .badge--warning {
-    background-color: var(--syn-badge-warning-color-background);
-    color: var(--syn-badge-warning-color-text);
-  }
-
-  .badge--danger {
-    background-color: var(--syn-badge-error-color-background);
-    color: var(--syn-badge-error-color-text);
-  }
-
-  /**
-   * Special treatment: If the badge is empty, show it as a dot only
-   */
-  :host(:empty) .badge {
-    height: var(--syn-spacing-x-small);
-    min-width: initial;
-    padding: 0;
-    width: var(--syn-spacing-x-small);
-  }
-
-  .visually-hidden {
-    border: 0;
-    /* stylelint-disable-next-line property-no-deprecated */
-    clip: rect(0, 0, 0, 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
-  }
-`;

package/metadata/packages/components/components/syn-badge/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/badge/badge.component.js';
-
-const tagName = 'syn-badge';
-Component.define('syn-badge');
-
-/**
- * @summary Badges are used to draw attention and display statuses or counts.
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-badge--docs
- * @status stable
- * @since 2.0
- *
- * @slot - The badge's content.
- *
- * @csspart base - The component's base wrapper.
- */
-export const SynBadge = createComponent({
-  displayName: 'SynBadge',
-  elementClass: Component,
-  events: {},
-  react: React,
-  tagName,
-});

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

@@ -1,52 +0,0 @@
-/* eslint-disable */
-import { css } from 'lit';
-
-export default css`
-	/* stylelint-disable */
-  :host {
-    display: inline-flex;
-  }
-
-  .badge {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    font-size: max(12px, 0.75em);
-    font-weight: var(--syn-font-weight-semibold);
-    letter-spacing: var(--syn-letter-spacing-normal);
-    line-height: 1;
-    border-radius: var(--syn-border-radius-small);
-    border: solid 1px var(--syn-color-neutral-0);
-    white-space: nowrap;
-    padding: 0.35em 0.6em;
-    user-select: none;
-    -webkit-user-select: none;
-    cursor: inherit;
-  }
-
-  /* Variant modifiers */
-  .badge--primary {
-    background-color: var(--syn-color-primary-600);
-    color: var(--syn-color-neutral-0);
-  }
-
-  .badge--success {
-    background-color: var(--syn-color-success-600);
-    color: var(--syn-color-neutral-0);
-  }
-
-  .badge--neutral {
-    background-color: var(--syn-color-neutral-600);
-    color: var(--syn-color-neutral-0);
-  }
-
-  .badge--warning {
-    background-color: var(--syn-color-warning-600);
-    color: var(--syn-color-neutral-0);
-  }
-
-  .badge--danger {
-    background-color: var(--syn-color-danger-600);
-    color: var(--syn-color-neutral-0);
-  }
-`;

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

@@ -1,58 +0,0 @@
-/* eslint-disable */
-import { classMap } from 'lit/directives/class-map.js';
-import { html } from 'lit';
-import { property } from 'lit/decorators.js';
-import componentStyles from '../../styles/component.styles.js';
-import SynergyElement from '../../internal/synergy-element.js';
-import { LocalizeController } from '../../utilities/localize.js';
-import styles from './badge.styles.js';
-import customStyles from './badge.custom.styles.js';
-import type { CSSResultGroup } from 'lit';
-import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';
-
-/**
- * @summary Badges are used to draw attention and display statuses or counts.
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-badge--docs
- * @status stable
- * @since 2.0
- *
- * @slot - The badge's content.
- *
- * @csspart base - The component's base wrapper.
- */
-@enableDefaultSettings('SynBadge')
-export default class SynBadge extends SynergyElement {
-  
-  private readonly localize = new LocalizeController(this);
-  static styles: CSSResultGroup = [componentStyles, styles, customStyles];
-
-  /** The badge's theme variant. */
-  @property({ reflect: true }) variant: 'primary' | 'success' | 'neutral' | 'warning' | 'danger' = 'primary';
-
-  render() {
-    return html`
-      <span
-        part="base"
-        class=${classMap({
-          badge: true,
-          'badge--primary': this.variant === 'primary',
-          'badge--success': this.variant === 'success',
-          'badge--neutral': this.variant === 'neutral',
-          'badge--warning': this.variant === 'warning',
-          'badge--danger': this.variant === 'danger',
-        })}
-        role="status"
-      >
-        <slot>
-          <span class="visually-hidden">
-            ${this.localize.term(
-              (this.variant === 'primary' || this.variant === 'neutral')
-                ? 'notification'
-                : this.variant
-              )}
-          </span>
-        </slot>
-      </span>
-    `;
-  }
-}

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

@@ -1,53 +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 Badges are used to draw attention and display statuses or counts.
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-badge--docs
- * @status stable
- * @since 2.0
- *
- * @slot - The badge's content.
- *
- * @csspart base - The component's base wrapper.
- */
-import { computed, ref } from 'vue';
-import '@synergy-design-system/components/components/badge/badge.js';
-
-import type { SynBadge } from '@synergy-design-system/components';
-
-// DOM Reference to the element
-const nativeElement = ref<SynBadge>();
-
-defineExpose({
-  nativeElement,
-});
-
-// Map attributes
-const props = defineProps<{
-  /**
-   * The badge's theme variant.
-   */
-  variant?: SynBadge['variant'];
-}>();
-
-// 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'),
-  ),
-);
-</script>
-
-<template>
-  <syn-badge v-bind="visibleProps" ref="nativeElement">
-    <slot></slot>
-  </syn-badge>
-</template>

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

@@ -1,58 +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 { SynBreadcrumb } from '@synergy-design-system/components';
-
-import '@synergy-design-system/components/components/breadcrumb/breadcrumb.js';
-
-/**
- * @summary Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-breadcrumb--docs
- * @status stable
- * @since 2.0
- *
- * @slot - One or more breadcrumb items to display.
- * @slot separator - The separator to use between breadcrumb items. Works best with `<syn-icon>`.
- *
- * @dependency syn-icon
- *
- * @csspart base - The component's base wrapper.
- */
-@Component({
-  selector: 'syn-breadcrumb',
-  standalone: true,
-  template: '<ng-content></ng-content>',
-})
-export class SynBreadcrumbComponent {
-  public nativeElement: SynBreadcrumb;
-  private _ngZone: NgZone;
-
-  constructor(e: ElementRef, ngZone: NgZone) {
-    this.nativeElement = e.nativeElement;
-    this._ngZone = ngZone;
-  }
-
-  /**
-* The label to use for the breadcrumb control.
-* This will not be shown on the screen, but it will be announced by
-screen readers and other assistive devices to provide more context for users.
- */
-  @Input()
-  set label(v: SynBreadcrumb['label']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.label = v));
-  }
-  get label(): SynBreadcrumb['label'] {
-    return this.nativeElement.label;
-  }
-}

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

@@ -1,5 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  /* Write custom CSS here */
-`;

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

@@ -1,32 +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/breadcrumb/breadcrumb.component.js';
-
-const tagName = 'syn-breadcrumb';
-Component.define('syn-breadcrumb');
-
-/**
- * @summary Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-breadcrumb--docs
- * @status stable
- * @since 2.0
- *
- * @slot - One or more breadcrumb items to display.
- * @slot separator - The separator to use between breadcrumb items. Works best with `<syn-icon>`.
- *
- * @dependency syn-icon
- *
- * @csspart base - The component's base wrapper.
- */
-export const SynBreadcrumb = createComponent({
-  displayName: 'SynBreadcrumb',
-  elementClass: Component,
-  events: {},
-  react: React,
-  tagName,
-});

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

@@ -1,11 +0,0 @@
-/* eslint-disable */
-import { css } from 'lit';
-
-export default css`
-	/* stylelint-disable */
-  .breadcrumb {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-  }
-`;

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

@@ -1,103 +0,0 @@
-/* eslint-disable */
-import { html } from 'lit';
-import { LocalizeController } from '../../utilities/localize.js';
-import { property, query } from 'lit/decorators.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 './breadcrumb.styles.js';
-import customStyles from './breadcrumb.custom.styles.js';
-import type { CSSResultGroup } from 'lit';
-import type SynBreadcrumbItem from '../breadcrumb-item/breadcrumb-item.js';
-
-/**
- * @summary Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-breadcrumb--docs
- * @status stable
- * @since 2.0
- *
- * @slot - One or more breadcrumb items to display.
- * @slot separator - The separator to use between breadcrumb items. Works best with `<syn-icon>`.
- *
- * @dependency syn-icon
- *
- * @csspart base - The component's base wrapper.
- */
-export default class SynBreadcrumb extends SynergyElement {
-  static styles: CSSResultGroup = [componentStyles, styles, customStyles];
-  static dependencies = { 'syn-icon': SynIcon };
-
-  private readonly localize = new LocalizeController(this);
-  private separatorDir = this.localize.dir();
-
-  @query('slot') defaultSlot: HTMLSlotElement;
-  @query('slot[name="separator"]') separatorSlot: HTMLSlotElement;
-
-  /**
-   * The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by
-   * screen readers and other assistive devices to provide more context for users.
-   */
-  @property() label = '';
-
-  // Generates a clone of the separator element to use for each breadcrumb item
-  private getSeparator() {
-    const separator = this.separatorSlot.assignedElements({ flatten: true })[0] as HTMLElement;
-
-    // Clone it, remove ids, and slot it
-    const clone = separator.cloneNode(true) as HTMLElement;
-    [clone, ...clone.querySelectorAll('[id]')].forEach(el => el.removeAttribute('id'));
-    clone.setAttribute('data-default', '');
-    clone.slot = 'separator';
-
-    return clone;
-  }
-
-  private handleSlotChange() {
-    const items = [...this.defaultSlot.assignedElements({ flatten: true })].filter(
-      item => item.tagName.toLowerCase() === 'syn-breadcrumb-item'
-    ) as SynBreadcrumbItem[];
-
-    items.forEach((item, index) => {
-      // Append separators to each item if they don't already have one
-      const separator = item.querySelector('[slot="separator"]');
-      if (separator === null) {
-        // No separator exists, add one
-        item.append(this.getSeparator());
-      } else if (separator.hasAttribute('data-default')) {
-        // A default separator exists, replace it
-        separator.replaceWith(this.getSeparator());
-      } else {
-        // The user provided a custom separator, leave it alone
-      }
-
-      // The last breadcrumb item is the "current page"
-      if (index === items.length - 1) {
-        item.setAttribute('aria-current', 'page');
-      } else {
-        item.removeAttribute('aria-current');
-      }
-    });
-  }
-
-  render() {
-    // We clone the separator and inject them into breadcrumb items, so we need to regenerate the default ones when
-    // directionality changes. We do this by storing the current separator direction, waiting for render, then calling
-    // the function that regenerates them.
-    if (this.separatorDir !== this.localize.dir()) {
-      this.separatorDir = this.localize.dir();
-      this.updateComplete.then(() => this.handleSlotChange());
-    }
-
-    return html`
-      <nav part="base" class="breadcrumb" aria-label=${this.label}>
-        <slot @slotchange=${this.handleSlotChange}></slot>
-      </nav>
-
-      <span hidden aria-hidden="true">
-        <slot name="separator">
-          <syn-icon name="chevron-down" library="system" class=${this.localize.dir()}></syn-icon>
-        </slot>
-      </span>
-    `;
-  }
-}

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

@@ -1,58 +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 Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-breadcrumb--docs
- * @status stable
- * @since 2.0
- *
- * @slot - One or more breadcrumb items to display.
- * @slot separator - The separator to use between breadcrumb items. Works best with `<syn-icon>`.
- *
- * @dependency syn-icon
- *
- * @csspart base - The component's base wrapper.
- */
-import { computed, ref } from 'vue';
-import '@synergy-design-system/components/components/breadcrumb/breadcrumb.js';
-
-import type { SynBreadcrumb } from '@synergy-design-system/components';
-
-// DOM Reference to the element
-const nativeElement = ref<SynBreadcrumb>();
-
-defineExpose({
-  nativeElement,
-});
-
-// Map attributes
-const props = defineProps<{
-  /**
-* The label to use for the breadcrumb control.
-* This will not be shown on the screen, but it will be announced by
-screen readers and other assistive devices to provide more context for users.
- */
-  label?: SynBreadcrumb['label'];
-}>();
-
-// 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'),
-  ),
-);
-</script>
-
-<template>
-  <syn-breadcrumb v-bind="visibleProps" ref="nativeElement">
-    <slot></slot>
-  </syn-breadcrumb>
-</template>

package/metadata/packages/components/components/syn-breadcrumb-item/component.angular.ts

@@ -1,88 +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 { SynBreadcrumbItem } from '@synergy-design-system/components';
-
-import '@synergy-design-system/components/components/breadcrumb-item/breadcrumb-item.js';
-
-/**
- * @summary Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-breadcrumb-item--docs
- * @status stable
- * @since 2.0
- *
- * @slot - The breadcrumb item's label.
- * @slot prefix - An optional prefix, usually an icon or icon button.
- * @slot suffix - An optional suffix, usually an icon or icon button.
- * @slot separator - The separator to use for the breadcrumb item. This will only change the separator for this item. If
- * you want to change it for all items in the group, set the separator on `<syn-breadcrumb>` instead.
- *
- * @csspart base - The component's base wrapper.
- * @csspart label - The breadcrumb item's label.
- * @csspart prefix - The container that wraps the prefix.
- * @csspart suffix - The container that wraps the suffix.
- * @csspart separator - The container that wraps the separator.
- */
-@Component({
-  selector: 'syn-breadcrumb-item',
-  standalone: true,
-  template: '<ng-content></ng-content>',
-})
-export class SynBreadcrumbItemComponent {
-  public nativeElement: SynBreadcrumbItem;
-  private _ngZone: NgZone;
-
-  constructor(e: ElementRef, ngZone: NgZone) {
-    this.nativeElement = e.nativeElement;
-    this._ngZone = ngZone;
-  }
-
-  /**
-* Optional URL to direct the user to when the breadcrumb item is activated.
-* When set, a link will be rendered
-internally.
-* When unset, a button will be rendered instead.
- */
-  @Input()
-  set href(v: SynBreadcrumbItem['href']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.href = v));
-  }
-  get href(): SynBreadcrumbItem['href'] {
-    return this.nativeElement.href;
-  }
-
-  /**
-   * Tells the browser where to open the link.
-   * Only used when `href` is set.
-   */
-  @Input()
-  set target(v: SynBreadcrumbItem['target']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.target = v));
-  }
-  get target(): SynBreadcrumbItem['target'] {
-    return this.nativeElement.target;
-  }
-
-  /**
-   * The `rel` attribute to use on the link.
-   * Only used when `href` is set.
-   */
-  @Input()
-  set rel(v: SynBreadcrumbItem['rel']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.rel = v));
-  }
-  get rel(): SynBreadcrumbItem['rel'] {
-    return this.nativeElement.rel;
-  }
-}