@synergy-design-system/mcp 2.15.0 → 3.0.1

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

@@ -1,78 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  .breadcrumb-item {
-    color: var(--syn-breadcrumb-color);
-    font-size: var(--syn-font-size-x-small);
-    font-weight: var(--syn-font-weight-semibold);
-  }
-
-  /**
-   * 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 {
-    font-weight: var(--syn-font-weight-normal);
-  }
-
-  :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: inherit;
-  }
-
-  .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;
-  }
-`;

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

@@ -1,37 +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-item/breadcrumb-item.component.js';
-
-const tagName = 'syn-breadcrumb-item';
-Component.define('syn-breadcrumb-item');
-
-/**
- * @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.
- */
-export const SynBreadcrumbItem = createComponent({
-  displayName: 'SynBreadcrumbItem',
-  elementClass: Component,
-  events: {},
-  react: React,
-  tagName,
-});

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

@@ -1,88 +0,0 @@
-/* eslint-disable */
-import { css } from 'lit';
-
-export default css`
-	/* stylelint-disable */
-  :host {
-    display: inline-flex;
-  }
-
-  .breadcrumb-item {
-    display: inline-flex;
-    align-items: center;
-    font-family: var(--syn-font-sans);
-    font-size: var(--syn-font-size-small);
-    font-weight: var(--syn-font-weight-semibold);
-    color: var(--syn-color-neutral-600);
-    line-height: var(--syn-line-height-normal);
-    white-space: nowrap;
-  }
-
-  .breadcrumb-item__label {
-    display: inline-block;
-    font-family: inherit;
-    font-size: inherit;
-    font-weight: inherit;
-    line-height: inherit;
-    text-decoration: none;
-    color: inherit;
-    background: none;
-    border: none;
-    border-radius: var(--syn-border-radius-medium);
-    padding: 0;
-    margin: 0;
-    cursor: pointer;
-    transition: var(--syn-transition-fast) --color;
-  }
-
-  :host(:not(:last-of-type)) .breadcrumb-item__label {
-    color: var(--syn-color-primary-600);
-  }
-
-  :host(:not(:last-of-type)) .breadcrumb-item__label:hover {
-    color: var(--syn-color-primary-500);
-  }
-
-  :host(:not(:last-of-type)) .breadcrumb-item__label:active {
-    color: var(--syn-color-primary-600);
-  }
-
-  .breadcrumb-item__label:focus {
-    outline: none;
-  }
-
-  .breadcrumb-item__label:focus-visible {
-    outline: var(--syn-focus-ring);
-    outline-offset: var(--syn-focus-ring-offset);
-  }
-
-  .breadcrumb-item__prefix,
-  .breadcrumb-item__suffix {
-    display: none;
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-  }
-
-  .breadcrumb-item--has-prefix .breadcrumb-item__prefix {
-    display: inline-flex;
-    margin-inline-end: var(--syn-spacing-x-small);
-  }
-
-  .breadcrumb-item--has-suffix .breadcrumb-item__suffix {
-    display: inline-flex;
-    margin-inline-start: var(--syn-spacing-x-small);
-  }
-
-  :host(:last-of-type) .breadcrumb-item__separator {
-    display: none;
-  }
-
-  .breadcrumb-item__separator {
-    display: inline-flex;
-    align-items: center;
-    margin: 0 var(--syn-spacing-x-small);
-    user-select: none;
-    -webkit-user-select: none;
-  }
-`;

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

@@ -1,132 +0,0 @@
-/* eslint-disable */
-import { classMap } from 'lit/directives/class-map.js';
-import { HasSlotController } from '../../internal/slot.js';
-import { html } from 'lit';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { property, query, state } from 'lit/decorators.js';
-import { watch } from '../../internal/watch.js';
-import componentStyles from '../../styles/component.styles.js';
-import SynergyElement from '../../internal/synergy-element.js';
-import styles from './breadcrumb-item.styles.js';
-import customStyles from './breadcrumb-item.custom.styles.js';
-import type { CSSResultGroup } from 'lit';
-
-/**
- * @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.
- */
-export default class SynBreadcrumbItem extends SynergyElement {
-  static styles: CSSResultGroup = [componentStyles, styles, customStyles];
-
-  private readonly hasSlotController = new HasSlotController(this, 'prefix', 'suffix');
-
-  @query('slot:not([name])') defaultSlot: HTMLSlotElement;
-
-  @state() private renderType: 'button' | 'link' | 'dropdown' = 'button';
-
-  /**
-   * 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.
-   */
-  @property() href?: string;
-
-  /** Tells the browser where to open the link. Only used when `href` is set. */
-  @property() target?: '_blank' | '_parent' | '_self' | '_top';
-
-  /** The `rel` attribute to use on the link. Only used when `href` is set. */
-  @property() rel = 'noreferrer noopener';
-
-  private setRenderType() {
-    const hasDropdown =
-      this.defaultSlot.assignedElements({ flatten: true }).filter(i => i.tagName.toLowerCase() === 'syn-dropdown')
-        .length > 0;
-
-    if (this.href) {
-      this.renderType = 'link';
-      return;
-    }
-
-    if (hasDropdown) {
-      this.renderType = 'dropdown';
-      return;
-    }
-
-    this.renderType = 'button';
-  }
-
-  @watch('href', { waitUntilFirstUpdate: true })
-  hrefChanged() {
-    this.setRenderType();
-  }
-
-  handleSlotChange() {
-    this.setRenderType();
-  }
-
-  render() {
-    return html`
-      <div
-        part="base"
-        class=${classMap({
-          'breadcrumb-item': true,
-          'breadcrumb-item--has-prefix': this.hasSlotController.test('prefix'),
-          'breadcrumb-item--has-suffix': this.hasSlotController.test('suffix')
-        })}
-      >
-        <span part="prefix" class="breadcrumb-item__prefix">
-          <slot name="prefix"></slot>
-        </span>
-
-        ${this.renderType === 'link'
-          ? html`
-              <a
-                part="label"
-                class="breadcrumb-item__label breadcrumb-item__label--link"
-                href="${this.href!}"
-                target="${ifDefined(this.target ? this.target : undefined)}"
-                rel=${ifDefined(this.target ? this.rel : undefined)}
-              >
-                <slot @slotchange=${this.handleSlotChange}></slot>
-              </a>
-            `
-          : ''}
-        ${this.renderType === 'button'
-          ? html`
-              <button part="label" type="button" class="breadcrumb-item__label breadcrumb-item__label--button">
-                <slot @slotchange=${this.handleSlotChange}></slot>
-              </button>
-            `
-          : ''}
-        ${this.renderType === 'dropdown'
-          ? html`
-              <div part="label" class="breadcrumb-item__label breadcrumb-item__label--drop-down">
-                <slot @slotchange=${this.handleSlotChange}></slot>
-              </div>
-            `
-          : ''}
-
-        <span part="suffix" class="breadcrumb-item__suffix">
-          <slot name="suffix"></slot>
-        </span>
-
-        <span part="separator" class="breadcrumb-item__separator" aria-hidden="true">
-          <slot name="separator"></slot>
-        </span>
-      </div>
-    `;
-  }
-}

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

@@ -1,76 +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 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.
- */
-import { computed, ref } from 'vue';
-import '@synergy-design-system/components/components/breadcrumb-item/breadcrumb-item.js';
-
-import type { SynBreadcrumbItem } from '@synergy-design-system/components';
-
-// DOM Reference to the element
-const nativeElement = ref<SynBreadcrumbItem>();
-
-defineExpose({
-  nativeElement,
-});
-
-// Map attributes
-const props = defineProps<{
-  /**
-* 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.
- */
-  href?: SynBreadcrumbItem['href'];
-
-  /**
-   * Tells the browser where to open the link.
-   * Only used when `href` is set.
-   */
-  target?: SynBreadcrumbItem['target'];
-
-  /**
-   * The `rel` attribute to use on the link.
-   * Only used when `href` is set.
-   */
-  rel?: SynBreadcrumbItem['rel'];
-}>();
-
-// 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-item v-bind="visibleProps" ref="nativeElement">
-    <slot></slot>
-  </syn-breadcrumb-item>
-</template>