@synergy-design-system/mcp 2.14.1 → 3.0.0

package/metadata/static/components/syn-alert/docs.md

@@ -1,282 +0,0 @@
-## Default
-
-Alerts are used to display important messages inline or as toast notifications.
-
-```html
-<syn-alert open="" variant="primary" size="medium">
-  This is a standard alert. You can customize its content and even the icon.
-  <syn-icon
-    slot="icon"
-    name="info"
-    aria-hidden="true"
-    library="default"
-  ></syn-icon>
-</syn-alert>
-```
-
----
-
-## Variants
-
-Set the variant attribute to change the alert’s variant.
-
-```html
-<div
-  style="display: flex; flex-direction: column; gap: var(--syn-spacing-medium)"
->
-  <syn-alert variant="primary" open="" id="something" size="medium">
-    <syn-icon
-      slot="icon"
-      name="info"
-      aria-hidden="true"
-      library="default"
-    ></syn-icon>
-    <strong>This is super informative</strong><br />
-    You can tell by how pretty the alert is.
-  </syn-alert>
-
-  <syn-alert variant="success" open="" size="medium">
-    <syn-icon
-      slot="icon"
-      name="check_circle"
-      aria-hidden="true"
-      library="default"
-    ></syn-icon>
-    <strong>Your changes have been saved</strong><br />
-    You can safely exit the app now.
-  </syn-alert>
-
-  <syn-alert variant="neutral" open="" size="medium">
-    <syn-icon
-      slot="icon"
-      name="settings"
-      aria-hidden="true"
-      library="default"
-    ></syn-icon>
-    <strong>Your settings have been updated</strong><br />
-    Settings will take effect on next login.
-  </syn-alert>
-
-  <syn-alert variant="warning" open="" size="medium">
-    <syn-icon
-      slot="icon"
-      name="warning"
-      aria-hidden="true"
-      library="default"
-    ></syn-icon>
-    <strong>Your session has ended</strong><br />
-    Please login again to continue.
-  </syn-alert>
-
-  <syn-alert variant="danger" open="" size="medium">
-    <syn-icon
-      slot="icon"
-      name="status-error"
-      library="system"
-      aria-hidden="true"
-    ></syn-icon>
-    <strong>Your account has been deleted</strong><br />
-    We're very sorry to see you go!
-  </syn-alert>
-</div>
-<style>
-  #something::part(base) {
-    overflow: hidden;
-  }
-</style>
-```
-
----
-
-## Closable
-
-Add the closable attribute to show a close button that will hide the alert.
-
-```html
-<syn-alert
-  variant="primary"
-  open=""
-  closable=""
-  class="alert-closable"
-  size="medium"
->
-  <syn-icon
-    slot="icon"
-    name="info"
-    aria-hidden="true"
-    library="default"
-  ></syn-icon>
-  You can close this alert any time!
-</syn-alert>
-```
-
----
-
-## Without Icons
-
-Icons are optional. Simply omit the icon slot if you don’t want them.
-
-```html
-<syn-alert variant="primary" open="" size="medium">
-  Nothing fancy here, just a simple alert.
-</syn-alert>
-```
-
----
-
-## Sizes
-
-Use the size attribute to change an alert’s size.
-
-```html
-<div
-  style="display: flex; flex-direction: column; gap: var(--syn-spacing-large)"
->
-  <syn-alert variant="primary" open="" size="small">
-    <syn-icon
-      slot="icon"
-      name="info"
-      aria-hidden="true"
-      library="default"
-    ></syn-icon>
-    <strong>This is size small</strong><br />
-    Nothing fancy here, just a simple alert.
-  </syn-alert>
-
-  <syn-alert variant="primary" open="" size="medium">
-    <syn-icon
-      slot="icon"
-      name="info"
-      aria-hidden="true"
-      library="default"
-    ></syn-icon>
-    <strong>This is size medium</strong><br />
-    Nothing fancy here, just a simple alert.
-  </syn-alert>
-
-  <syn-alert variant="primary" open="" size="large">
-    <syn-icon
-      slot="icon"
-      name="info"
-      aria-hidden="true"
-      library="default"
-    ></syn-icon>
-    <strong>This is size large</strong><br />
-    Nothing fancy here, just a simple alert.
-  </syn-alert>
-</div>
-```
-
----
-
-## Duration
-
-Set the duration attribute to automatically hide an alert after a period of time. This is useful for alerts that don’t require acknowledgement.
-
-```html
-<div class="alert-duration">
-  <syn-button variant="outline" title="" size="medium">Show Alert</syn-button>
-
-  <syn-alert variant="primary" duration="3000" closable="" size="medium">
-    <syn-icon
-      slot="icon"
-      name="info"
-      aria-hidden="true"
-      library="default"
-    ></syn-icon>
-    This alert will automatically hide itself after three seconds, unless you
-    interact with it.
-  </syn-alert>
-</div>
-
-<style>
-  .alert-duration syn-alert {
-    margin-top: var(--syn-spacing-small);
-  }
-</style>
-```
-
----
-
-## Toast Notifications
-
-To display an alert as a toast notification, or “toast”, create the alert and call its toast() method. This will move the alert out of its position in the DOM and into the toast stack where it will be shown. Once dismissed, it will be removed from the DOM completely. To reuse a toast, store a reference to it and call toast() again later on.You should always use the closable attribute so users can dismiss the notification. It’s also common to set a reasonable duration when the notification doesn’t require acknowledgement.
-
-```html
-<div class="alert-toast">
-  <div style="display: flex; gap: var(--syn-spacing-small)">
-    <syn-button title="" variant="outline" size="medium">Primary</syn-button>
-    <syn-button title="" variant="outline" size="medium">Success</syn-button>
-    <syn-button title="" variant="outline" size="medium">Neutral</syn-button>
-    <syn-button title="" variant="outline" size="medium">Warning</syn-button>
-    <syn-button title="" variant="outline" size="medium">Danger</syn-button>
-  </div>
-
-  <syn-alert variant="primary" duration="3000" closable="" size="medium">
-    <syn-icon
-      slot="icon"
-      name="info"
-      aria-hidden="true"
-      library="default"
-    ></syn-icon>
-    <strong>This is super informative</strong><br />
-    You can tell by how pretty the alert is.
-  </syn-alert>
-
-  <syn-alert variant="success" duration="3000" closable="" size="medium">
-    <syn-icon
-      slot="icon"
-      name="check_circle"
-      aria-hidden="true"
-      library="default"
-    ></syn-icon>
-    <strong>Your changes have been saved</strong><br />
-    You can safely exit the app now.
-  </syn-alert>
-
-  <syn-alert variant="neutral" duration="3000" closable="" size="medium">
-    <syn-icon
-      slot="icon"
-      name="settings"
-      aria-hidden="true"
-      library="default"
-    ></syn-icon>
-    <strong>Your settings have been updated</strong><br />
-    Settings will take effect on next login.
-  </syn-alert>
-
-  <syn-alert variant="warning" duration="3000" closable="" size="medium">
-    <syn-icon
-      slot="icon"
-      name="warning"
-      aria-hidden="true"
-      library="default"
-    ></syn-icon>
-    <strong>Your session has ended</strong><br />
-    Please login again to continue.
-  </syn-alert>
-
-  <syn-alert variant="danger" duration="3000" closable="" size="medium">
-    <syn-icon
-      slot="icon"
-      name="status-error"
-      library="system"
-      aria-hidden="true"
-    ></syn-icon>
-    <strong>Your account has been deleted</strong><br />
-    We're very sorry to see you go!
-  </syn-alert>
-</div>
-```
-
----
-
-## Creating Toasts Imperatively
-
-For convenience, you can create a utility that emits toast notifications with a function call rather than composing them in your HTML. To do this, generate the alert with JavaScript, append it to the body, and call the toast() method as shown in the example below.
-
-```html
-<div class="alert-toast-wrapper">
-  <syn-button title="" variant="outline" size="medium">Create Toast</syn-button>
-</div>
-```

package/metadata/static/components/syn-badge/docs.md

@@ -1,106 +0,0 @@
-## Default
-
-Badges are used to draw attention and display statuses or counts.
-
-```html
-<syn-badge variant="primary"> Badge </syn-badge>
-```
-
----
-
-## Variants
-
-Set the variant attribute to change the badge’s variant.
-
-```html
-<div style="display: flex; gap: var(--syn-spacing-large)">
-  <syn-badge variant="primary">primary</syn-badge>
-  <syn-badge variant="success">success</syn-badge>
-  <syn-badge variant="warning">warning</syn-badge>
-  <syn-badge variant="danger">danger</syn-badge>
-  <syn-badge variant="neutral">neutral</syn-badge>
-</div>
-```
-
----
-
-## With Buttons
-
-One of the most common use cases for badges is attaching them to buttons. DEV: To make this easier, badges will be automatically positioned at the top-right when they’re a child of a button.
-
-```html
-<div style="display: flex; gap: var(--syn-spacing-2x-large)">
-  <syn-button title="" variant="outline" size="medium">
-    Requests
-    <syn-badge pill="" variant="primary">30</syn-badge>
-  </syn-button>
-
-  <syn-button title="" variant="outline" size="medium">
-    Warnings
-    <syn-badge variant="warning" pill="">8</syn-badge>
-  </syn-button>
-
-  <syn-button title="" variant="outline" size="medium">
-    Errors
-    <syn-badge variant="danger" pill="">6</syn-badge>
-  </syn-button>
-</div>
-```
-
----
-
-## With Menu Items
-
-When including badges in menu items, use the suffix slot to make sure they’re aligned correctly.
-
-```html
-<syn-menu style="max-width: 228px" role="menu">
-  <syn-menu-label>Messages</syn-menu-label>
-  <syn-menu-item role="menuitem" aria-disabled="false" tabindex="0"
-    >Comments
-    <syn-badge slot="suffix" variant="neutral" pill=""
-      >4</syn-badge
-    ></syn-menu-item
-  >
-  <syn-menu-item role="menuitem" aria-disabled="false" tabindex="-1"
-    >Replies
-    <syn-badge slot="suffix" variant="neutral" pill=""
-      >12</syn-badge
-    ></syn-menu-item
-  >
-</syn-menu>
-```
-
----
-
-## With Empty Content
-
-Badges can be used without content to just show an status indicator.
-
-```html
-<div
-  style="display: flex; position: relative; gap: var(--syn-spacing-3x-large)"
->
-  <syn-popup active="" distance="-8" placement="right-start" skidding="-10">
-    <syn-icon
-      name="wallpaper"
-      style="font-size: var(--syn-font-size-x-large)"
-      slot="anchor"
-      aria-hidden="true"
-      library="default"
-    ></syn-icon>
-    <syn-badge variant="primary"></syn-badge>
-  </syn-popup>
-
-  <syn-popup active="" distance="-8" placement="right-start" skidding="-10">
-    <syn-icon
-      name="wallpaper"
-      style="font-size: var(--syn-font-size-x-large)"
-      slot="anchor"
-      aria-hidden="true"
-      library="default"
-    ></syn-icon>
-    <syn-badge variant="primary">12</syn-badge>
-  </syn-popup>
-</div>
-```

package/metadata/static/components/syn-breadcrumb/docs.md

@@ -1,265 +0,0 @@
-## Default
-
-Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy. Breadcrumbs are usually placed before a page’s main content with the current page shown last to indicate the user’s position in the navigation.
-
-```html
-<syn-breadcrumb>
-  <syn-breadcrumb-item
-    >Breadcrumb Item<syn-icon
-      name="chevron-down"
-      library="system"
-      class="ltr"
-      slot="separator"
-      aria-hidden="true"
-    ></syn-icon
-  ></syn-breadcrumb-item>
-  <syn-breadcrumb-item
-    >Breadcrumb Item<syn-icon
-      name="chevron-down"
-      library="system"
-      class="ltr"
-      slot="separator"
-      aria-hidden="true"
-    ></syn-icon
-  ></syn-breadcrumb-item>
-  <syn-breadcrumb-item
-    >Breadcrumb Item<syn-icon
-      name="chevron-down"
-      library="system"
-      class="ltr"
-      slot="separator"
-      aria-hidden="true"
-    ></syn-icon
-  ></syn-breadcrumb-item>
-  <syn-breadcrumb-item aria-current="page"
-    >Breadcrumb Item<syn-icon
-      name="chevron-down"
-      library="system"
-      class="ltr"
-      slot="separator"
-      aria-hidden="true"
-    ></syn-icon
-  ></syn-breadcrumb-item>
-</syn-breadcrumb>
-```
-
----
-
-## Breadcrumb Links
-
-By default, breadcrumb items are rendered as buttons so you can use them to navigate single-page applications. In this case, you’ll need to add event listeners to handle clicks.For websites, you’ll probably want to use links instead. You can make any breadcrumb item a link by applying an href attribute to it. Now, when the user activates it, they’ll be taken to the corresponding page — no event listeners required.
-
-```html
-<syn-breadcrumb>
-  <syn-breadcrumb-item href="#" target="_blank"
-    >Breadcrumb Item<syn-icon
-      name="chevron-down"
-      library="system"
-      class="ltr"
-      slot="separator"
-      aria-hidden="true"
-    ></syn-icon
-  ></syn-breadcrumb-item>
-  <syn-breadcrumb-item href="#" target="_blank"
-    >Breadcrumb Item<syn-icon
-      name="chevron-down"
-      library="system"
-      class="ltr"
-      slot="separator"
-      aria-hidden="true"
-    ></syn-icon
-  ></syn-breadcrumb-item>
-  <syn-breadcrumb-item href="#" target="_blank"
-    >Breadcrumb Item<syn-icon
-      name="chevron-down"
-      library="system"
-      class="ltr"
-      slot="separator"
-      aria-hidden="true"
-    ></syn-icon
-  ></syn-breadcrumb-item>
-  <syn-breadcrumb-item href="#" target="_blank" aria-current="page"
-    >Breadcrumb Item<syn-icon
-      name="chevron-down"
-      library="system"
-      class="ltr"
-      slot="separator"
-      aria-hidden="true"
-    ></syn-icon
-  ></syn-breadcrumb-item>
-</syn-breadcrumb>
-```
-
----
-
-## Prefixes
-
-Use the prefix slot to add content before any breadcrumb item.
-
-```html
-<syn-breadcrumb>
-  <syn-breadcrumb-item>
-    <syn-icon
-      slot="prefix"
-      name="home"
-      aria-hidden="true"
-      library="default"
-    ></syn-icon>
-    Breadcrumb Item
-    <syn-icon
-      name="chevron-down"
-      library="system"
-      class="ltr"
-      slot="separator"
-      aria-hidden="true"
-    ></syn-icon
-  ></syn-breadcrumb-item>
-  <syn-breadcrumb-item
-    >Breadcrumb Item<syn-icon
-      name="chevron-down"
-      library="system"
-      class="ltr"
-      slot="separator"
-      aria-hidden="true"
-    ></syn-icon
-  ></syn-breadcrumb-item>
-  <syn-breadcrumb-item aria-current="page"
-    >Breadcrumb Item<syn-icon
-      name="chevron-down"
-      library="system"
-      class="ltr"
-      slot="separator"
-      aria-hidden="true"
-    ></syn-icon
-  ></syn-breadcrumb-item>
-</syn-breadcrumb>
-```
-
----
-
-## Suffixes
-
-Use the suffix slot to add content after any breadcrumb item.
-
-```html
-<syn-breadcrumb>
-  <syn-breadcrumb-item
-    >Breadcrumb Item<syn-icon
-      name="chevron-down"
-      library="system"
-      class="ltr"
-      slot="separator"
-      aria-hidden="true"
-    ></syn-icon
-  ></syn-breadcrumb-item>
-  <syn-breadcrumb-item
-    >Breadcrumb Item<syn-icon
-      name="chevron-down"
-      library="system"
-      class="ltr"
-      slot="separator"
-      aria-hidden="true"
-    ></syn-icon
-  ></syn-breadcrumb-item>
-  <syn-breadcrumb-item aria-current="page">
-    Breadcrumb Item
-    <syn-icon
-      slot="suffix"
-      name="security"
-      aria-hidden="true"
-      library="default"
-    ></syn-icon>
-    <syn-icon
-      name="chevron-down"
-      library="system"
-      class="ltr"
-      slot="separator"
-      aria-hidden="true"
-    ></syn-icon
-  ></syn-breadcrumb-item>
-</syn-breadcrumb>
-```
-
----
-
-## With Dropdowns
-
-Dropdown menus can be placed in a prefix or suffix slot to provide additional options.
-
-```html
-<!-- This <div> is only here for positioning the dropdown in storybook -->
-<div style="position: relative">
-  <syn-breadcrumb>
-    <syn-breadcrumb-item
-      >Breadcrumb Item<syn-icon
-        name="chevron-down"
-        library="system"
-        class="ltr"
-        slot="separator"
-        aria-hidden="true"
-      ></syn-icon
-    ></syn-breadcrumb-item>
-    <syn-breadcrumb-item>
-      <syn-dropdown placement="bottom-start">
-        <button slot="trigger" class="manual-trigger">
-          <syn-icon
-            label="More options"
-            name="more_horiz"
-            role="img"
-            aria-label="More options"
-            library="default"
-          ></syn-icon>
-        </button>
-        <syn-menu role="menu">
-          <syn-menu-item role="menuitem" aria-disabled="false" tabindex="0"
-            >Breadcrumb Item</syn-menu-item
-          >
-          <syn-menu-item role="menuitem" aria-disabled="false" tabindex="-1"
-            >Breadcrumb Item</syn-menu-item
-          >
-          <syn-menu-item role="menuitem" aria-disabled="false" tabindex="-1"
-            >Breadcrumb Item</syn-menu-item
-          >
-        </syn-menu>
-      </syn-dropdown>
-      <syn-icon
-        name="chevron-down"
-        library="system"
-        class="ltr"
-        slot="separator"
-        aria-hidden="true"
-      ></syn-icon
-    ></syn-breadcrumb-item>
-    <syn-breadcrumb-item
-      >Breadcrumb Item<syn-icon
-        name="chevron-down"
-        library="system"
-        class="ltr"
-        slot="separator"
-        aria-hidden="true"
-      ></syn-icon
-    ></syn-breadcrumb-item>
-    <syn-breadcrumb-item aria-current="page"
-      >Breadcrumb Item<syn-icon
-        name="chevron-down"
-        library="system"
-        class="ltr"
-        slot="separator"
-        aria-hidden="true"
-      ></syn-icon
-    ></syn-breadcrumb-item>
-  </syn-breadcrumb>
-</div>
-<style>
-  .manual-trigger {
-    appearance: none;
-    background: transparent;
-    border: none;
-    cursor: pointer;
-    display: flex;
-    font-size: var(--syn-font-size-small);
-    margin: 0;
-    padding: 0;
-  }
-</style>
-```

package/metadata/static/components/syn-breadcrumb-item/docs.md

@@ -1,49 +0,0 @@
-## Default
-
-Breadcrumb Items are used inside breadcrumbs to represent different links.
-
-```html
-<syn-breadcrumb>
-  <syn-breadcrumb-item>
-    Breadcrumb Item
-    <syn-icon
-      slot="prefix"
-      name="home"
-      aria-hidden="true"
-      library="default"
-    ></syn-icon>
-    <syn-icon
-      slot="suffix"
-      name="wallpaper"
-      aria-hidden="true"
-      library="default"
-    ></syn-icon>
-    <syn-icon
-      name="chevron-down"
-      library="system"
-      class="ltr"
-      slot="separator"
-      aria-hidden="true"
-    ></syn-icon
-  ></syn-breadcrumb-item>
-
-  <syn-breadcrumb-item
-    >Breadcrumb Item<syn-icon
-      name="chevron-down"
-      library="system"
-      class="ltr"
-      slot="separator"
-      aria-hidden="true"
-    ></syn-icon
-  ></syn-breadcrumb-item>
-  <syn-breadcrumb-item aria-current="page"
-    >Breadcrumb Item<syn-icon
-      name="chevron-down"
-      library="system"
-      class="ltr"
-      slot="separator"
-      aria-hidden="true"
-    ></syn-icon
-  ></syn-breadcrumb-item>
-</syn-breadcrumb>
-```