@synergy-design-system/metadata 3.6.0 → 3.8.0

package/data/layers/examples/template/template:tooltip.md

@@ -0,0 +1,310 @@
+## Single Instance
+
+This example demonstrates the usage of a single instance of the <syn-tooltip> component. Tooltips are shared across multiple elements, allowing for more efficient management and consistent behavior.
+
+```html
+<div id="tooltip-single-instance-story">
+  <syn-header label="Single Instance Tooltips"></syn-header>
+
+  <!-- Content Area -->
+  <section>
+    <!-- Dynamic Toolbar Section -->
+    <nav class="toolbar">
+      <syn-button-group label="Download and save">
+        <syn-button data-tooltip="Save">
+          <syn-icon name="save" label="Save"></syn-icon>
+        </syn-button>
+        <syn-button data-tooltip="Download">
+          <syn-icon name="save_alt" label="Download"></syn-icon>
+        </syn-button>
+      </syn-button-group>
+
+      <syn-button-group label="Misc">
+        <syn-button data-tooltip="Edit">
+          <syn-icon name="edit" label="Edit"></syn-icon>
+        </syn-button>
+        <syn-button data-tooltip="Settings">
+          <syn-icon name="settings" label="Settings"></syn-icon>
+        </syn-button>
+        <syn-button data-tooltip="Preview">
+          <syn-icon name="wallpaper" label="Preview"></syn-icon>
+        </syn-button>
+      </syn-button-group>
+    </nav>
+
+    <article>
+      <h2>Single instance tooltips</h2>
+      <p>
+        By default, you will have to wrap each element that needs a tooltip with
+        a separate
+        <code data-tooltip="&lt;syn-tooltip&gt;My Content&lt;/syn-tooltip&gt;"
+          >&lt;syn-tooltip&gt;</code
+        >
+        component. If you want to share a single instance of
+        <code>&lt;syn-tooltip&gt;</code> across an application, you can do so by
+        using the
+        <code
+          data-tooltip="anchor is a property on the SynTooltip class. It allows you to specify the element the tooltip should be anchored to."
+          >anchor</code
+        >
+        attribute to manually control which element the tooltip is anchored to.
+        This example will show how you can set up a single tooltip instance that
+        will work for all elements with a <code>data-tooltip</code> attribute,
+        even if those elements are added dynamically after the initial setup.
+      </p>
+
+      <p>
+        This approach is useful for cases where you have a large number of
+        tooltip triggers or dynamically generated content, as it avoids the
+        overhead of multiple tooltip instances and allows for more flexible
+        tooltip management. However, it also comes with some caveats, such as
+        the need to manage tooltip state and transitions to avoid issues like
+        flickering or incorrect positioning when rapidly switching between
+        triggers. This example also currently only works on hover.
+      </p>
+
+      <syn-button
+        data-tooltip="Dynamically adds or removes the toolbar custom section"
+        id="add-section-button"
+        variant="filled"
+      >
+        Toggle custom section
+      </syn-button>
+    </article>
+  </section>
+</div>
+
+<!-- Global Tooltip instance. Make sure that it has trigger="manual" set. -->
+<syn-tooltip id="global-tooltip" trigger="manual"></syn-tooltip>
+
+<style>
+  #tooltip-single-instance-story {
+    .toolbar {
+      display: flex;
+      padding: var(--syn-spacing-medium);
+      gap: var(--syn-spacing-medium);
+    }
+
+    section {
+      background: var(--syn-page-background);
+    }
+    section [data-tooltip]:not(syn-button) {
+      cursor: help;
+      text-decoration: underline dotted;
+    }
+
+    article {
+      padding: var(--syn-spacing-medium);
+      h2 {
+        margin: 0 0 var(--syn-spacing-medium) 0;
+      }
+    }
+  }
+</style>
+
+<script type="module">
+  /**
+   * Installs singleton tooltip behavior for all descendants that use [data-tooltip].
+   *
+   * Why this utility is async:
+   * - It can be called immediately, even before custom elements are fully defined.
+   * - It waits for the tooltip component to become ready and only then binds listeners.
+   *
+   * Why there are multiple listeners:
+   * - mouseover (capture): detects entering any current or future [data-tooltip] trigger.
+   * - mouseout (capture): detects leaving the current trigger to hide or switch anchor.
+   * - syn-after-show / syn-after-hide: serializes transitions to avoid open/close races.
+   *
+   * @param {HTMLElement} tooltipElement A <syn-tooltip trigger="manual"> instance.
+   * @param {ParentNode} root Event delegation root. Defaults to document.
+   * @returns {Promise<() => void>} Cleanup function that removes all listeners.
+   */
+  const setupTooltip = async (tooltipElement, root = document) => {
+    if (!(tooltipElement instanceof HTMLElement)) {
+      throw new TypeError("setupTooltip requires a tooltip DOM node.");
+    }
+
+    const cleanupKey = "__synSingletonTooltipCleanup__";
+    if (typeof tooltipElement[cleanupKey] === "function") {
+      tooltipElement[cleanupKey]();
+    }
+
+    await customElements.whenDefined("syn-tooltip");
+    await tooltipElement.updateComplete;
+
+    const delegatedRoot = root ?? document;
+    let requestedAnchor = null;
+    let transitionInFlight = false;
+
+    const getTooltipTarget = (node) => {
+      if (!(node instanceof Element)) {
+        return null;
+      }
+
+      return node.closest("[data-tooltip]");
+    };
+
+    const getTooltipContent = (element) =>
+      element.getAttribute("data-tooltip")?.trim() ?? "";
+
+    const isSyncNeeded = () => {
+      const currentAnchor =
+        tooltipElement.anchor instanceof HTMLElement
+          ? tooltipElement.anchor
+          : null;
+
+      if (requestedAnchor) {
+        const nextContent = getTooltipContent(requestedAnchor);
+        if (nextContent === "") {
+          return tooltipElement.open;
+        }
+
+        return (
+          !tooltipElement.open ||
+          currentAnchor !== requestedAnchor ||
+          tooltipElement.content !== nextContent
+        );
+      }
+
+      return tooltipElement.open;
+    };
+
+    const syncTooltipState = () => {
+      if (transitionInFlight) {
+        return;
+      }
+
+      const currentAnchor =
+        tooltipElement.anchor instanceof HTMLElement
+          ? tooltipElement.anchor
+          : null;
+
+      if (requestedAnchor) {
+        const nextContent = getTooltipContent(requestedAnchor);
+
+        if (nextContent === "") {
+          requestedAnchor = null;
+        } else if (tooltipElement.open && currentAnchor !== requestedAnchor) {
+          transitionInFlight = true;
+          tooltipElement.open = false;
+          return;
+        } else {
+          tooltipElement.content = nextContent;
+          tooltipElement.anchor = requestedAnchor;
+
+          if (!tooltipElement.open) {
+            transitionInFlight = true;
+            tooltipElement.open = true;
+          }
+
+          return;
+        }
+      }
+
+      if (tooltipElement.open) {
+        transitionInFlight = true;
+        tooltipElement.open = false;
+      }
+    };
+
+    const handleAfterShow = () => {
+      transitionInFlight = false;
+      if (isSyncNeeded()) {
+        syncTooltipState();
+      }
+    };
+
+    const handleAfterHide = () => {
+      transitionInFlight = false;
+      if (isSyncNeeded()) {
+        syncTooltipState();
+      }
+    };
+
+    const handleMouseOver = (event) => {
+      const target = getTooltipTarget(event.target);
+      const relatedTarget = getTooltipTarget(event.relatedTarget);
+
+      if (!(target instanceof HTMLElement) || target === relatedTarget) {
+        return;
+      }
+
+      if (getTooltipContent(target) === "") {
+        return;
+      }
+
+      requestedAnchor = target;
+      syncTooltipState();
+    };
+
+    const handleMouseOut = (event) => {
+      const target = getTooltipTarget(event.target);
+      const relatedTarget = getTooltipTarget(event.relatedTarget);
+
+      if (
+        !(target instanceof HTMLElement) ||
+        target === relatedTarget ||
+        requestedAnchor !== target
+      ) {
+        return;
+      }
+
+      requestedAnchor =
+        relatedTarget instanceof HTMLElement ? relatedTarget : null;
+      syncTooltipState();
+    };
+
+    tooltipElement.addEventListener("syn-after-show", handleAfterShow);
+    tooltipElement.addEventListener("syn-after-hide", handleAfterHide);
+    delegatedRoot.addEventListener("mouseover", handleMouseOver, true);
+    delegatedRoot.addEventListener("mouseout", handleMouseOut, true);
+
+    const cleanup = () => {
+      tooltipElement.removeEventListener("syn-after-show", handleAfterShow);
+      tooltipElement.removeEventListener("syn-after-hide", handleAfterHide);
+      delegatedRoot.removeEventListener("mouseover", handleMouseOver, true);
+      delegatedRoot.removeEventListener("mouseout", handleMouseOut, true);
+      if (tooltipElement.open) {
+        tooltipElement.open = false;
+      }
+    };
+
+    tooltipElement[cleanupKey] = cleanup;
+    return cleanup;
+  };
+
+  const globalTooltip = document.getElementById("global-tooltip");
+  if (globalTooltip instanceof HTMLElement) {
+    setupTooltip(globalTooltip).catch((error) => {
+      console.error("Failed to initialize singleton tooltip setup.", error);
+    });
+  }
+
+  const addSectionButton = document.getElementById("add-section-button");
+
+  addSectionButton?.addEventListener("click", () => {
+    const root = document.querySelector(
+      "#tooltip-single-instance-story .toolbar",
+    );
+    const hasCustomSection = root?.querySelector(".custom-section");
+
+    if (root && !hasCustomSection) {
+      const newSection = document.createElement("syn-button-group");
+      newSection.classList.add("custom-section");
+      newSection.setAttribute("label", "Custom Section");
+
+      const newButton = document.createElement("syn-button");
+      newButton.setAttribute(
+        "data-tooltip",
+        "I am a dynamically added button with a tooltip!",
+      );
+      newButton.innerHTML = '<syn-icon name="star" label="Star"></syn-icon>';
+
+      newSection.appendChild(newButton);
+      root.appendChild(newSection);
+    } else if (hasCustomSection) {
+      hasCustomSection.remove();
+    }
+  });
+</script>
+```

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

@@ -21,7 +21,7 @@ import '@synergy-design-system/components/components/accordion/accordion.js';
  *
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-accordion--docs
  * @status stable
- * @since 1.23.0
+ * @since 2.3.0
  *
  * @slot - The accordion's main content. Must be `<syn-details />` elements.
  *

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

@@ -14,7 +14,7 @@ import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator
  *
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-accordion--docs
  * @status stable
- * @since 1.23.0
+ * @since 2.3.0
  *
  * @slot - The accordion's main content. Must be `<syn-details />` elements.
  *

package/data/layers/full/component/component:syn-accordion/react/accordion.ts

@@ -15,7 +15,7 @@ Component.define('syn-accordion');
  *
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-accordion--docs
  * @status stable
- * @since 1.23.0
+ * @since 2.3.0
  *
  * @slot - The accordion's main content. Must be `<syn-details />` elements.
  *

package/data/layers/full/component/component:syn-accordion/vue/SynVueAccordion.vue

@@ -10,7 +10,7 @@
  *
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-accordion--docs
  * @status stable
- * @since 1.23.0
+ * @since 2.3.0
  *
  * @slot - The accordion's main content. Must be `<syn-details />` elements.
  *

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

@@ -23,7 +23,7 @@ import '@synergy-design-system/components/components/alert/alert.js';
  * @summary Alerts are used to display important messages inline or as toast notifications.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-alert--docs
  * @status stable
- * @since 2.0
+ * @since 1.20.0
  *
  * @dependency syn-icon-button
  *

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

@@ -20,7 +20,7 @@ import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator
  * @summary Alerts are used to display important messages inline or as toast notifications.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-alert--docs
  * @status stable
- * @since 2.0
+ * @since 1.20.0
  *
  * @dependency syn-icon-button
  *

package/data/layers/full/component/component:syn-alert/react/alert.ts

@@ -20,7 +20,7 @@ Component.define('syn-alert');
  * @summary Alerts are used to display important messages inline or as toast notifications.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-alert--docs
  * @status stable
- * @since 2.0
+ * @since 1.20.0
  *
  * @dependency syn-icon-button
  *

package/data/layers/full/component/component:syn-alert/vue/SynVueAlert.vue

@@ -9,7 +9,7 @@
  * @summary Alerts are used to display important messages inline or as toast notifications.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-alert--docs
  * @status stable
- * @since 2.0
+ * @since 1.20.0
  *
  * @dependency syn-icon-button
  *

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

@@ -20,7 +20,7 @@ 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
+ * @since 1.14.0
  *
  * @slot - The badge's content.
  *

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

@@ -14,7 +14,7 @@ import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator
  * @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
+ * @since 1.14.0
  *
  * @slot - The badge's content.
  *

package/data/layers/full/component/component:syn-badge/react/badge.ts

@@ -14,7 +14,7 @@ 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
+ * @since 1.14.0
  *
  * @slot - The badge's content.
  *

package/data/layers/full/component/component:syn-badge/vue/SynVueBadge.vue

@@ -9,7 +9,7 @@
  * @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
+ * @since 1.14.0
  *
  * @slot - The badge's content.
  *

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

@@ -20,7 +20,7 @@ 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
+ * @since 1.26.0
  *
  * @slot - One or more breadcrumb items to display.
  * @slot separator - The separator to use between breadcrumb items. Works best with `<syn-icon>`.

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

@@ -14,7 +14,7 @@ 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
+ * @since 1.26.0
  *
  * @slot - One or more breadcrumb items to display.
  * @slot separator - The separator to use between breadcrumb items. Works best with `<syn-icon>`.

package/data/layers/full/component/component:syn-breadcrumb/react/breadcrumb.ts

@@ -14,7 +14,7 @@ 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
+ * @since 1.26.0
  *
  * @slot - One or more breadcrumb items to display.
  * @slot separator - The separator to use between breadcrumb items. Works best with `<syn-icon>`.

package/data/layers/full/component/component:syn-breadcrumb/vue/SynVueBreadcrumb.vue

@@ -9,7 +9,7 @@
  * @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
+ * @since 1.26.0
  *
  * @slot - One or more breadcrumb items to display.
  * @slot separator - The separator to use between breadcrumb items. Works best with `<syn-icon>`.

package/data/layers/full/component/component:syn-breadcrumb-item/angular/breadcrumb-item.component.ts

@@ -20,7 +20,7 @@ import '@synergy-design-system/components/components/breadcrumb-item/breadcrumb-
  * @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
+ * @since 1.26.0
  *
  * @slot - The breadcrumb item's label.
  * @slot prefix - An optional prefix, usually an icon or icon button.

package/data/layers/full/component/component:syn-breadcrumb-item/components/breadcrumb-item.component.ts

@@ -15,7 +15,7 @@ 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
+ * @since 1.26.0
  *
  * @slot - The breadcrumb item's label.
  * @slot prefix - An optional prefix, usually an icon or icon button.

package/data/layers/full/component/component:syn-breadcrumb-item/react/breadcrumb-item.ts

@@ -14,7 +14,7 @@ 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
+ * @since 1.26.0
  *
  * @slot - The breadcrumb item's label.
  * @slot prefix - An optional prefix, usually an icon or icon button.

package/data/layers/full/component/component:syn-breadcrumb-item/vue/SynVueBreadcrumbItem.vue

@@ -9,7 +9,7 @@
  * @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
+ * @since 1.26.0
  *
  * @slot - The breadcrumb item's label.
  * @slot prefix - An optional prefix, usually an icon or icon button.

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

@@ -22,7 +22,7 @@ import '@synergy-design-system/components/components/button/button.js';
  * @summary Buttons represent actions that are available to the user.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-button--docs
  * @status stable
- * @since 2.0
+ * @since 1.0.0
  *
  * @dependency syn-icon
  * @dependency syn-spinner

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

@@ -21,7 +21,7 @@ import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator
  * @summary Buttons represent actions that are available to the user.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-button--docs
  * @status stable
- * @since 2.0
+ * @since 1.0.0
  *
  * @dependency syn-icon
  * @dependency syn-spinner

package/data/layers/full/component/component:syn-button/react/button.ts

@@ -19,7 +19,7 @@ Component.define('syn-button');
  * @summary Buttons represent actions that are available to the user.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-button--docs
  * @status stable
- * @since 2.0
+ * @since 1.0.0
  *
  * @dependency syn-icon
  * @dependency syn-spinner

package/data/layers/full/component/component:syn-button/vue/SynVueButton.vue

@@ -9,7 +9,7 @@
  * @summary Buttons represent actions that are available to the user.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-button--docs
  * @status stable
- * @since 2.0
+ * @since 1.0.0
  *
  * @dependency syn-icon
  * @dependency syn-spinner

package/data/layers/full/component/component:syn-button-group/angular/button-group.component.ts

@@ -20,7 +20,7 @@ import '@synergy-design-system/components/components/button-group/button-group.j
  * @summary Button groups can be used to group related buttons into sections.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-button-group--docs
  * @status stable
- * @since 2.0
+ * @since 3.1.0
  *
  * @slot - One or more `<syn-button>` elements to display in the button group.
  *

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

@@ -14,7 +14,7 @@ import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator
  * @summary Button groups can be used to group related buttons into sections.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-button-group--docs
  * @status stable
- * @since 2.0
+ * @since 3.1.0
  *
  * @slot - One or more `<syn-button>` elements to display in the button group.
  *

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

@@ -14,7 +14,7 @@ Component.define('syn-button-group');
  * @summary Button groups can be used to group related buttons into sections.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-button-group--docs
  * @status stable
- * @since 2.0
+ * @since 3.1.0
  *
  * @slot - One or more `<syn-button>` elements to display in the button group.
  *

package/data/layers/full/component/component:syn-button-group/vue/SynVueButtonGroup.vue

@@ -9,7 +9,7 @@
  * @summary Button groups can be used to group related buttons into sections.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-button-group--docs
  * @status stable
- * @since 2.0
+ * @since 3.1.0
  *
  * @slot - One or more `<syn-button>` elements to display in the button group.
  *

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

@@ -20,7 +20,7 @@ import '@synergy-design-system/components/components/card/card.js';
  * @summary Cards can be used to group related subjects in a container.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-card--docs
  * @status stable
- * @since 2.0
+ * @since 1.25.0
  *
  * @slot - The card's main content.
  * @slot header - An optional header for the card.

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

@@ -13,7 +13,7 @@ import type { CSSResultGroup } from 'lit';
  * @summary Cards can be used to group related subjects in a container.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-card--docs
  * @status stable
- * @since 2.0
+ * @since 1.25.0
  *
  * @slot - The card's main content.
  * @slot header - An optional header for the card.

package/data/layers/full/component/component:syn-card/react/card.ts

@@ -14,7 +14,7 @@ Component.define('syn-card');
  * @summary Cards can be used to group related subjects in a container.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-card--docs
  * @status stable
- * @since 2.0
+ * @since 1.25.0
  *
  * @slot - The card's main content.
  * @slot header - An optional header for the card.

package/data/layers/full/component/component:syn-card/vue/SynVueCard.vue

@@ -9,7 +9,7 @@
  * @summary Cards can be used to group related subjects in a container.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-card--docs
  * @status stable
- * @since 2.0
+ * @since 1.25.0
  *
  * @slot - The card's main content.
  * @slot header - An optional header for the card.

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

@@ -24,7 +24,7 @@ import '@synergy-design-system/components/components/checkbox/checkbox.js';
  * @summary Checkboxes allow the user to toggle an option on or off.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-checkbox--docs
  * @status stable
- * @since 2.0
+ * @since 1.0.0
  *
  * @dependency syn-icon
  *

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

@@ -21,7 +21,7 @@ import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator
  * @summary Checkboxes allow the user to toggle an option on or off.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-checkbox--docs
  * @status stable
- * @since 2.0
+ * @since 1.0.0
  *
  * @dependency syn-icon
  *