@synergy-design-system/mcp 0.1.0 → 1.1.0

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

@@ -0,0 +1,29 @@
+// ---------------------------------------------------------------------
+// 🔒 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

@@ -0,0 +1,59 @@
+/**
+ * ---------------------------------------------------------------------
+ * 🔒 AUTOGENERATED BY VENDORISM
+ * Removing this comment will prevent it from being managed by it.
+ * ---------------------------------------------------------------------
+ */
+
+/* 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

@@ -0,0 +1,65 @@
+/**
+ * ---------------------------------------------------------------------
+ * 🔒 AUTOGENERATED BY VENDORISM
+ * Removing this comment will prevent it from being managed by it.
+ * ---------------------------------------------------------------------
+ */
+
+/* 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

@@ -0,0 +1,53 @@
+<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

@@ -0,0 +1,58 @@
+// ---------------------------------------------------------------------
+// 🔒 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

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

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

@@ -0,0 +1,32 @@
+// ---------------------------------------------------------------------
+// 🔒 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

@@ -0,0 +1,18 @@
+/**
+ * ---------------------------------------------------------------------
+ * 🔒 AUTOGENERATED BY VENDORISM
+ * Removing this comment will prevent it from being managed by it.
+ * ---------------------------------------------------------------------
+ */
+
+/* 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

@@ -0,0 +1,110 @@
+/**
+ * ---------------------------------------------------------------------
+ * 🔒 AUTOGENERATED BY VENDORISM
+ * Removing this comment will prevent it from being managed by it.
+ * ---------------------------------------------------------------------
+ */
+
+/* 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

@@ -0,0 +1,58 @@
+<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

@@ -0,0 +1,88 @@
+// ---------------------------------------------------------------------
+// 🔒 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;
+  }
+}

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

@@ -0,0 +1,74 @@
+import { css } from 'lit';
+
+export default css`
+  .breadcrumb-item {
+    color: var(--syn-color-neutral-500);
+    font-size: var(--syn-font-size-x-small);
+    font-weight: var(--syn-font-weight-normal);
+  }
+
+  /**
+   * Make sure to remove the border radius.
+   * Without this, focus will be rounded
+   */
+  .breadcrumb-item__label {
+    border-radius: var(--syn-border-radius-none);
+  }
+
+  :host(:not(:last-of-type)) .breadcrumb-item__label {
+    color: var(--syn-typography-color-text);
+  }
+
+  :host(:not(:last-of-type)) .breadcrumb-item__label:hover {
+    color: var(--syn-color-primary-600);
+  }
+
+  :host(:not(:last-of-type)) .breadcrumb-item__label:active {
+    color: var(--syn-color-primary-950);
+  }
+
+  .breadcrumb-item--has-prefix .breadcrumb-item__prefix {
+    margin-inline-end: var(--syn-spacing-2x-small);
+  }
+
+  .breadcrumb-item--has-suffix .breadcrumb-item__suffix {
+    margin-inline-start: var(--syn-spacing-2x-small);
+  }
+
+  /**
+   * Adjust color and font size to match Synergy's typography.
+   */
+  .breadcrumb-item--has-prefix .breadcrumb-item__prefix,
+  .breadcrumb-item--has-suffix .breadcrumb-item__suffix {
+    color: var(--syn-typography-color-text);
+    font-size: var(--syn-spacing-medium);
+  }
+
+  /**
+   * Make sure the color of the last item's prefix and suffix matches the text.
+   */
+  :host(:last-of-type) .breadcrumb-item--has-prefix .breadcrumb-item__prefix,
+  :host(:last-of-type) .breadcrumb-item--has-suffix .breadcrumb-item__suffix {
+    color: var(--syn-color-neutral-500);
+  }
+
+  .breadcrumb-item__separator {
+    font-size: var(--syn-spacing-medium);
+    margin: 0 var(--syn-spacing-x-small) 0 var(--syn-spacing-2x-small);
+  }
+
+  /**
+   * Make sure the direction of the chevron matches the direction of the text.
+   */
+  .breadcrumb-item__separator ::slotted(syn-icon.ltr) {
+    rotate: -90deg;
+  }
+
+  .breadcrumb-item__separator ::slotted(syn-icon.rtl) {
+    rotate: 90deg;
+  }
+
+  .breadcrumb-item__label--drop-down {
+    display: flex;
+  }
+`;