npm - @synergy-design-system/components - Versions diffs - 1.0.0-main.6 → 1.0.0-main.8 - Mend

@synergy-design-system/components 1.0.0-main.6 → 1.0.0-main.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (26) hide show

package/README.md CHANGED Viewed

@@ -1,6 +1,149 @@
 # @synergy-design-system/components
-Synergy Web Component library based on [shoelace](https://shoelace.style/).
+This package provides the base of the Synergy Design System as native web components.
+It uses [lit](https://www.lit.dev) and parts of [shoelace](https://shoelace.style/).
+## Getting started
+### 1. Package installation
+Run the following steps to install the required packages.
+```bash
+# Install the base library and required css files
+npm install --save @synergy-design-system/components @synergy-design-system/tokens
+```
+---
+### 2. Load the design tokens
+The shipped components make heavy use of design tokens, which are provided via [@synergy-design-system/tokens](https://github.com/SickDesignSystem/synergy/tree/main/packages/tokens). Make sure to follow the installation steps there for help on setting the tokens up. Usually it is enough to load the light or dark theme included there.
+---
+### 3. Define the elements
+There are multiple ways to load the components:
+#### Loading all available components
+To make all components available, just load the main package file. It will make sure that all components and needed dependencies are loaded and available directly.
+> Please keep in mind that this way of loading the components will create larger bundle sizes!
+```html
+<!-- Example 1: Loading via script type module -->
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+  </head>
+  <body>
+    <div id="root">
+      <syn-button variant="text">Button</syn-button>
+      <syn-input></syn-input>
+    </div>
+    <!-- As we are loading all modules, syn-button and syn-input will render correctly -->
+    <script type="module" src="../node_modules/@synergy-design-system/components/dist/synergy.js"></script>
+  </body>
+</html>
+```
+When using a build system, you should load the bundle in JavaScript or TypeScript directly, for example when using vite:
+```typescript
+// main.ts
+// Do not forget to load the design tokens!
+import '@synergy-design-system/tokens/themes/light.css';
+// This will load synergy.js via the exports map
+import '@synergy-design-system/components';
+```
+#### Loading selected components only
+Use this when you need complete control about which components are loaded. This will usually lead to smaller bundle sizes, which might be preferable for your application. As a downside, you will have to remember adding missing components to your bundle.
+```html
+<!-- Example 1: Loading via script type module -->
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+  </head>
+  <body>
+    <div id="root">
+      <syn-button variant="text">Button</syn-button>
+      <syn-input></syn-input>
+    </div>
+    <!-- We are only loading the button, syn-input will render as an empty div! -->
+    <script type="module" src="../node_modules/@synergy-design-system/components/dist/components/button/button.js"></script>
+  </body>
+</html>
+```
+When using a build system, you may also load the bundle in JavaScript or TypeScript directly, for example when using vite:
+```typescript
+// main.ts
+// Do not forget to load the design tokens!
+import '@synergy-design-system/tokens/themes/light.css';
+// This will only load and define the button itself
+import '@synergy-design-system/components/components/button/button.js';
+```
+---
+### 4. Using the provided types
+The components are built using typescript and provide types for elements and events out of the box. These can be used for working with the dom when working in a typescript environment. You may use them by importing the needed types and using them for elements, like shown in this example:
+```typescript
+// main.ts
+// Do not forget to load the design tokens!
+import '@synergy-design-system/tokens/themes/light.css';
+// Example 1: Load the type for syn-button from the root:
+import type { SynButton, SynInvalidEvent } from '@synergy-design-system/components';
+// Example 2: Load the type from the syn-button dir directly.
+// In this case you will have to load the event type from another file!
+import type { SynButton } from '@synergy-design-system/components/components/button/button';
+import type { SynInvalidEvent } from '@synergy-design-system/components/events/syn-invalid';
+document.addEventListener('load', () => {
+  const loadedSynButtons = document.querySelectorAll<SynButton>('syn-button');
+  // Attach a syn-invalid event that is fired every time a button becomes invalid
+  Array
+    .from(loadedSynButtons) // Type: SynButton[]
+    .addEventListener('syn-invalid', (e: SynInvalidEvent) => {
+      console.log('Button is now invalid!', e);
+    });
+});
+```
+---
+### 5. Add html autocompletion to VSCode (optional)
+This package ships with a [custom-elements-manifest](https://github.com/webcomponents/custom-elements-manifest) that may be used to provide typings for tags. To enable code completion, please proceed the following way:
+1. Install the `@synergy-design-system/components` package.
+2. If you do **not** have a `.vscode/settings.json` file yet, create it.
+3. Add support for [vscode-custom-data](https://github.com/microsoft/vscode-custom-data) by adding the following setting to your `.vscode/settings.json`: `"html.customData": ["./node_modules/@synergy-design-system/components/dist/vscode.html-custom-data.json"]`
+4. Restart VSCode.
+5. Switch to an html (or similar) file and type `<syn`. Auto-complete now provides a list of available components along with its attributes.
+> Note the path above is valid for installations using npm.
+> When using another package manager, make sure to set the proper path to `vscode.html-custom-data.json`!
+---
 ## Local setup

package/dist/chunks/{chunk.B5LRNM2C.js → chunk.4SJKXOCV.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 import {
   SynButton
-} from "./chunk.XBI2LWDH.js";
+} from "./chunk.G3PDKNFK.js";
 // src/components/button/button.ts
 var button_default = SynButton;
@@ -9,4 +9,4 @@ SynButton.define("syn-button");
 export {
   button_default
 };
-//# sourceMappingURL=chunk.B5LRNM2C.js.map
+//# sourceMappingURL=chunk.4SJKXOCV.js.map

package/dist/chunks/{chunk.H2WJIJND.js → chunk.53ZDJY4Q.js} RENAMED Viewed

@@ -48,7 +48,7 @@ var SynergyElement = class extends LitElement {
 };
 /* eslint-disable */
 // @ts-expect-error This is auto-injected at build time.
-SynergyElement.version = "1.0.0-main.6";
+SynergyElement.version = "1.0.0-main.8";
 SynergyElement.dependencies = {};
 __decorateClass([
   property()
@@ -60,4 +60,4 @@ __decorateClass([
 export {
   SynergyElement
 };
-//# sourceMappingURL=chunk.H2WJIJND.js.map
+//# sourceMappingURL=chunk.53ZDJY4Q.js.map

package/dist/chunks/{chunk.H2WJIJND.js.map → chunk.53ZDJY4Q.js.map} RENAMED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/internal/synergy-element.ts"],
-  "sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n// Removing this comment will prevent it from being managed by it.\n// ---------------------------------------------------------------------\n\n/* eslint-disable */\nimport { LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\n\n// Match event type name strings that are registered on GlobalEventHandlersEventMap...\ntype EventTypeRequiresDetail<T> = T extends keyof GlobalEventHandlersEventMap\n  ? // ...where the event detail is an object...\n    GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, unknown>>\n    ? // ...that is non-empty...\n      GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, never>>\n      ? never\n      : // ...and has at least one non-optional property\n      Partial<GlobalEventHandlersEventMap[T]['detail']> extends GlobalEventHandlersEventMap[T]['detail']\n      ? never\n      : T\n    : never\n  : never;\n\n// The inverse of the above (match any type that doesn't match EventTypeRequiresDetail)\ntype EventTypeDoesNotRequireDetail<T> = T extends keyof GlobalEventHandlersEventMap\n  ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, unknown>>\n    ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, never>>\n      ? T\n      : Partial<GlobalEventHandlersEventMap[T]['detail']> extends GlobalEventHandlersEventMap[T]['detail']\n      ? T\n      : never\n    : T\n  : T;\n\n// `keyof EventTypesWithRequiredDetail` lists all registered event types that require detail\ntype EventTypesWithRequiredDetail = {\n  [EventType in keyof GlobalEventHandlersEventMap as EventTypeRequiresDetail<EventType>]: true;\n};\n\n// `keyof EventTypesWithoutRequiredDetail` lists all registered event types that do NOT require detail\ntype EventTypesWithoutRequiredDetail = {\n  [EventType in keyof GlobalEventHandlersEventMap as EventTypeDoesNotRequireDetail<EventType>]: true;\n};\n\n// Helper to make a specific property of an object non-optional\ntype WithRequired<T, K extends keyof T> = T & { [P in K]-?: T[P] };\n\n// Given an event name string, get a valid type for the options to initialize the event that is more restrictive than\n// just CustomEventInit when appropriate (validate the type of the event detail, and require it to be provided if the\n// event requires it)\ntype SynEventInit<T> = T extends keyof GlobalEventHandlersEventMap\n  ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, unknown>>\n    ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, never>>\n      ? CustomEventInit<GlobalEventHandlersEventMap[T]['detail']>\n      : Partial<GlobalEventHandlersEventMap[T]['detail']> extends GlobalEventHandlersEventMap[T]['detail']\n      ? CustomEventInit<GlobalEventHandlersEventMap[T]['detail']>\n      : WithRequired<CustomEventInit<GlobalEventHandlersEventMap[T]['detail']>, 'detail'>\n    : CustomEventInit\n  : CustomEventInit;\n\n// Given an event name string, get the type of the event\ntype GetCustomEventType<T> = T extends keyof GlobalEventHandlersEventMap\n  ? GlobalEventHandlersEventMap[T] extends CustomEvent<unknown>\n    ? GlobalEventHandlersEventMap[T]\n    : CustomEvent<unknown>\n  : CustomEvent<unknown>;\n\n// `keyof ValidEventTypeMap` is equivalent to `keyof GlobalEventHandlersEventMap` but gives a nicer error message\ntype ValidEventTypeMap = EventTypesWithRequiredDetail | EventTypesWithoutRequiredDetail;\n\nexport default class SynergyElement extends LitElement {\n  // Make localization attributes reactive\n  @property() dir: string;\n  @property() lang: string;\n\n  /** Emits a custom event with more convenient defaults. */\n  emit<T extends string & keyof EventTypesWithoutRequiredDetail>(\n    name: EventTypeDoesNotRequireDetail<T>,\n    options?: SynEventInit<T> | undefined\n  ): GetCustomEventType<T>;\n  emit<T extends string & keyof EventTypesWithRequiredDetail>(\n    name: EventTypeRequiresDetail<T>,\n    options: SynEventInit<T>\n  ): GetCustomEventType<T>;\n  emit<T extends string & keyof ValidEventTypeMap>(\n    name: T,\n    options?: SynEventInit<T> | undefined\n  ): GetCustomEventType<T> {\n    const event = new CustomEvent(name, {\n      bubbles: true,\n      cancelable: false,\n      composed: true,\n      detail: {},\n      ...options\n    });\n\n    this.dispatchEvent(event);\n\n    return event as GetCustomEventType<T>;\n  }\n\n  /* eslint-disable */\n  // @ts-expect-error This is auto-injected at build time.\n  static version = \"1.0.0-main.6\";\n  \n\n  static define(name: string, elementConstructor = this, options: ElementDefinitionOptions = {}) {\n    const currentlyRegisteredConstructor = customElements.get(name) as\n      | CustomElementConstructor\n      | typeof SynergyElement;\n\n    if (!currentlyRegisteredConstructor) {\n      customElements.define(name, class extends elementConstructor {} as unknown as CustomElementConstructor, options);\n      return;\n    }\n\n    let newVersion = ' (unknown version)';\n    let existingVersion = newVersion;\n\n    if ('version' in elementConstructor && elementConstructor.version) {\n      newVersion = ' v' + elementConstructor.version;\n    }\n\n    if ('version' in currentlyRegisteredConstructor && currentlyRegisteredConstructor.version) {\n      existingVersion = ' v' + currentlyRegisteredConstructor.version;\n    }\n\n    // Need to make sure we're not working with null or empty strings before doing version comparisons.\n    if (newVersion && existingVersion && newVersion === existingVersion) {\n      // If versions match, we don't need to warn anyone. Carry on.\n      return;\n    }\n\n    console.warn(\n      `Attempted to register <${name}>${newVersion}, but <${name}>${existingVersion} has already been registered.`\n    );\n  }\n\n  static dependencies: Record<string, typeof SynergyElement> = {};\n\n  constructor() {\n    super();\n    Object.entries((this.constructor as typeof SynergyElement).dependencies).forEach(([name, component]) => {\n      (this.constructor as typeof SynergyElement).define(name, component);\n    });\n  }\n}\n\nexport interface SynergyFormControl extends SynergyElement {\n  // Form attributes\n  name: string;\n  value: unknown;\n  disabled?: boolean;\n  defaultValue?: unknown;\n  defaultChecked?: boolean;\n  form?: string;\n\n  // Constraint validation attributes\n  pattern?: string;\n  min?: number | string | Date;\n  max?: number | string | Date;\n  step?: number | 'any';\n  required?: boolean;\n  minlength?: number;\n  maxlength?: number;\n\n  // Form validation properties\n  readonly validity: ValidityState;\n  readonly validationMessage: string;\n\n  // Form validation methods\n  checkValidity: () => boolean;\n  getForm: () => HTMLFormElement | null;\n  reportValidity: () => boolean;\n  setCustomValidity: (message: string) => void;\n}\n"],
+  "sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n// Removing this comment will prevent it from being managed by it.\n// ---------------------------------------------------------------------\n\n/* eslint-disable */\nimport { LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\n\n// Match event type name strings that are registered on GlobalEventHandlersEventMap...\ntype EventTypeRequiresDetail<T> = T extends keyof GlobalEventHandlersEventMap\n  ? // ...where the event detail is an object...\n    GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, unknown>>\n    ? // ...that is non-empty...\n      GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, never>>\n      ? never\n      : // ...and has at least one non-optional property\n      Partial<GlobalEventHandlersEventMap[T]['detail']> extends GlobalEventHandlersEventMap[T]['detail']\n      ? never\n      : T\n    : never\n  : never;\n\n// The inverse of the above (match any type that doesn't match EventTypeRequiresDetail)\ntype EventTypeDoesNotRequireDetail<T> = T extends keyof GlobalEventHandlersEventMap\n  ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, unknown>>\n    ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, never>>\n      ? T\n      : Partial<GlobalEventHandlersEventMap[T]['detail']> extends GlobalEventHandlersEventMap[T]['detail']\n      ? T\n      : never\n    : T\n  : T;\n\n// `keyof EventTypesWithRequiredDetail` lists all registered event types that require detail\ntype EventTypesWithRequiredDetail = {\n  [EventType in keyof GlobalEventHandlersEventMap as EventTypeRequiresDetail<EventType>]: true;\n};\n\n// `keyof EventTypesWithoutRequiredDetail` lists all registered event types that do NOT require detail\ntype EventTypesWithoutRequiredDetail = {\n  [EventType in keyof GlobalEventHandlersEventMap as EventTypeDoesNotRequireDetail<EventType>]: true;\n};\n\n// Helper to make a specific property of an object non-optional\ntype WithRequired<T, K extends keyof T> = T & { [P in K]-?: T[P] };\n\n// Given an event name string, get a valid type for the options to initialize the event that is more restrictive than\n// just CustomEventInit when appropriate (validate the type of the event detail, and require it to be provided if the\n// event requires it)\ntype SynEventInit<T> = T extends keyof GlobalEventHandlersEventMap\n  ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, unknown>>\n    ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, never>>\n      ? CustomEventInit<GlobalEventHandlersEventMap[T]['detail']>\n      : Partial<GlobalEventHandlersEventMap[T]['detail']> extends GlobalEventHandlersEventMap[T]['detail']\n      ? CustomEventInit<GlobalEventHandlersEventMap[T]['detail']>\n      : WithRequired<CustomEventInit<GlobalEventHandlersEventMap[T]['detail']>, 'detail'>\n    : CustomEventInit\n  : CustomEventInit;\n\n// Given an event name string, get the type of the event\ntype GetCustomEventType<T> = T extends keyof GlobalEventHandlersEventMap\n  ? GlobalEventHandlersEventMap[T] extends CustomEvent<unknown>\n    ? GlobalEventHandlersEventMap[T]\n    : CustomEvent<unknown>\n  : CustomEvent<unknown>;\n\n// `keyof ValidEventTypeMap` is equivalent to `keyof GlobalEventHandlersEventMap` but gives a nicer error message\ntype ValidEventTypeMap = EventTypesWithRequiredDetail | EventTypesWithoutRequiredDetail;\n\nexport default class SynergyElement extends LitElement {\n  // Make localization attributes reactive\n  @property() dir: string;\n  @property() lang: string;\n\n  /** Emits a custom event with more convenient defaults. */\n  emit<T extends string & keyof EventTypesWithoutRequiredDetail>(\n    name: EventTypeDoesNotRequireDetail<T>,\n    options?: SynEventInit<T> | undefined\n  ): GetCustomEventType<T>;\n  emit<T extends string & keyof EventTypesWithRequiredDetail>(\n    name: EventTypeRequiresDetail<T>,\n    options: SynEventInit<T>\n  ): GetCustomEventType<T>;\n  emit<T extends string & keyof ValidEventTypeMap>(\n    name: T,\n    options?: SynEventInit<T> | undefined\n  ): GetCustomEventType<T> {\n    const event = new CustomEvent(name, {\n      bubbles: true,\n      cancelable: false,\n      composed: true,\n      detail: {},\n      ...options\n    });\n\n    this.dispatchEvent(event);\n\n    return event as GetCustomEventType<T>;\n  }\n\n  /* eslint-disable */\n  // @ts-expect-error This is auto-injected at build time.\n  static version = \"1.0.0-main.8\";\n  \n\n  static define(name: string, elementConstructor = this, options: ElementDefinitionOptions = {}) {\n    const currentlyRegisteredConstructor = customElements.get(name) as\n      | CustomElementConstructor\n      | typeof SynergyElement;\n\n    if (!currentlyRegisteredConstructor) {\n      customElements.define(name, class extends elementConstructor {} as unknown as CustomElementConstructor, options);\n      return;\n    }\n\n    let newVersion = ' (unknown version)';\n    let existingVersion = newVersion;\n\n    if ('version' in elementConstructor && elementConstructor.version) {\n      newVersion = ' v' + elementConstructor.version;\n    }\n\n    if ('version' in currentlyRegisteredConstructor && currentlyRegisteredConstructor.version) {\n      existingVersion = ' v' + currentlyRegisteredConstructor.version;\n    }\n\n    // Need to make sure we're not working with null or empty strings before doing version comparisons.\n    if (newVersion && existingVersion && newVersion === existingVersion) {\n      // If versions match, we don't need to warn anyone. Carry on.\n      return;\n    }\n\n    console.warn(\n      `Attempted to register <${name}>${newVersion}, but <${name}>${existingVersion} has already been registered.`\n    );\n  }\n\n  static dependencies: Record<string, typeof SynergyElement> = {};\n\n  constructor() {\n    super();\n    Object.entries((this.constructor as typeof SynergyElement).dependencies).forEach(([name, component]) => {\n      (this.constructor as typeof SynergyElement).define(name, component);\n    });\n  }\n}\n\nexport interface SynergyFormControl extends SynergyElement {\n  // Form attributes\n  name: string;\n  value: unknown;\n  disabled?: boolean;\n  defaultValue?: unknown;\n  defaultChecked?: boolean;\n  form?: string;\n\n  // Constraint validation attributes\n  pattern?: string;\n  min?: number | string | Date;\n  max?: number | string | Date;\n  step?: number | 'any';\n  required?: boolean;\n  minlength?: number;\n  maxlength?: number;\n\n  // Form validation properties\n  readonly validity: ValidityState;\n  readonly validationMessage: string;\n\n  // Form validation methods\n  checkValidity: () => boolean;\n  getForm: () => HTMLFormElement | null;\n  reportValidity: () => boolean;\n  setCustomValidity: (message: string) => void;\n}\n"],
   "mappings": ";;;;;;AAMA,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AA+DzB,IAAqB,iBAArB,cAA4C,WAAW;AAAA,EAsErD,cAAc;AACZ,UAAM;AACN,WAAO,QAAS,KAAK,YAAsC,YAAY,EAAE,QAAQ,CAAC,CAAC,MAAM,SAAS,MAAM;AACtG,MAAC,KAAK,YAAsC,OAAO,MAAM,SAAS;AAAA,IACpE,CAAC;AAAA,EACH;AAAA,EA7DA,KACE,MACA,SACuB;AACvB,UAAM,QAAQ,IAAI,YAAY,MAAM;AAAA,MAClC,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,UAAU;AAAA,MACV,QAAQ,CAAC;AAAA,OACN,QACJ;AAED,SAAK,cAAc,KAAK;AAExB,WAAO;AAAA,EACT;AAAA,EAOA,OAAO,OAAO,MAAc,qBAAqB,MAAM,UAAoC,CAAC,GAAG;AAC7F,UAAM,iCAAiC,eAAe,IAAI,IAAI;AAI9D,QAAI,CAAC,gCAAgC;AACnC,qBAAe,OAAO,MAAM,cAAc,mBAAmB;AAAA,MAAC,GAA0C,OAAO;AAC/G;AAAA,IACF;AAEA,QAAI,aAAa;AACjB,QAAI,kBAAkB;AAEtB,QAAI,aAAa,sBAAsB,mBAAmB,SAAS;AACjE,mBAAa,OAAO,mBAAmB;AAAA,IACzC;AAEA,QAAI,aAAa,kCAAkC,+BAA+B,SAAS;AACzF,wBAAkB,OAAO,+BAA+B;AAAA,IAC1D;AAGA,QAAI,cAAc,mBAAmB,eAAe,iBAAiB;AAEnE;AAAA,IACF;AAEA,YAAQ;AAAA,MACN,0BAA0B,IAAI,IAAI,UAAU,UAAU,IAAI,IAAI,eAAe;AAAA,IAC/E;AAAA,EACF;AAUF;AAAA;AAAA;AA5EqB,eAiCZ,UAAU;AAjCE,eAoEZ,eAAsD,CAAC;AAlElD;AAAA,EAAX,SAAS;AAAA,GAFS,eAEP;AACA;AAAA,EAAX,SAAS;AAAA,GAHS,eAGP;",
   "names": []
 }

package/dist/chunks/{chunk.DAPEYF3L.js → chunk.5SUEJSIW.js} RENAMED Viewed

@@ -13,10 +13,10 @@ import {
 import {
   SynIcon,
   watch
-} from "./chunk.4JYS4LYT.js";
+} from "./chunk.DI6S4YNU.js";
 import {
   SynergyElement
-} from "./chunk.H2WJIJND.js";
+} from "./chunk.53ZDJY4Q.js";
 import {
   __decorateClass
 } from "./chunk.DJOAQ4JU.js";
@@ -495,4 +495,4 @@ __decorateClass([
 export {
   SynInput
 };
-//# sourceMappingURL=chunk.DAPEYF3L.js.map
+//# sourceMappingURL=chunk.5SUEJSIW.js.map

package/dist/chunks/{chunk.3QEOTSBR.js → chunk.5ZMQBOV3.js} RENAMED Viewed

@@ -6,7 +6,7 @@ import {
 } from "./chunk.R6VNLE6N.js";
 import {
   SynergyElement
-} from "./chunk.H2WJIJND.js";
+} from "./chunk.53ZDJY4Q.js";
 // src/components/spinner/spinner.component.ts
 import { html } from "lit";
@@ -29,4 +29,4 @@ SynSpinner.styles = spinner_styles_default;
 export {
   SynSpinner
 };
-//# sourceMappingURL=chunk.3QEOTSBR.js.map
+//# sourceMappingURL=chunk.5ZMQBOV3.js.map

package/dist/chunks/{chunk.KV3DM7PM.js → chunk.B7XEALID.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 import {
   SynInput
-} from "./chunk.DAPEYF3L.js";
+} from "./chunk.5SUEJSIW.js";
 // src/components/input/input.ts
 var input_default = SynInput;
@@ -9,4 +9,4 @@ SynInput.define("syn-input");
 export {
   input_default
 };
-//# sourceMappingURL=chunk.KV3DM7PM.js.map
+//# sourceMappingURL=chunk.B7XEALID.js.map

package/dist/chunks/{chunk.4JYS4LYT.js → chunk.DI6S4YNU.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 import {
   SynergyElement
-} from "./chunk.H2WJIJND.js";
+} from "./chunk.53ZDJY4Q.js";
 import {
   icon_styles_default
 } from "./chunk.BREU4ILT.js";
@@ -199,4 +199,4 @@ export {
   watch,
   SynIcon
 };
-//# sourceMappingURL=chunk.4JYS4LYT.js.map
+//# sourceMappingURL=chunk.DI6S4YNU.js.map

package/dist/chunks/{chunk.XBI2LWDH.js → chunk.G3PDKNFK.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 import {
   SynSpinner
-} from "./chunk.3QEOTSBR.js";
+} from "./chunk.5ZMQBOV3.js";
 import {
   HasSlotController
 } from "./chunk.XGXFE6IF.js";
@@ -17,10 +17,10 @@ import {
 import {
   SynIcon,
   watch
-} from "./chunk.4JYS4LYT.js";
+} from "./chunk.DI6S4YNU.js";
 import {
   SynergyElement
-} from "./chunk.H2WJIJND.js";
+} from "./chunk.53ZDJY4Q.js";
 import {
   __decorateClass
 } from "./chunk.DJOAQ4JU.js";
@@ -275,4 +275,4 @@ __decorateClass([
 export {
   SynButton
 };
-//# sourceMappingURL=chunk.XBI2LWDH.js.map
+//# sourceMappingURL=chunk.G3PDKNFK.js.map

package/dist/components/button/button.component.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import {
   SynButton
-} from "../../chunks/chunk.XBI2LWDH.js";
-import "../../chunks/chunk.3QEOTSBR.js";
+} from "../../chunks/chunk.G3PDKNFK.js";
+import "../../chunks/chunk.5ZMQBOV3.js";
 import "../../chunks/chunk.N2I6HVX3.js";
 import "../../chunks/chunk.XGXFE6IF.js";
 import "../../chunks/chunk.R6VNLE6N.js";
@@ -9,8 +9,8 @@ import "../../chunks/chunk.A3SKDWCT.js";
 import "../../chunks/chunk.WDCAHRYG.js";
 import "../../chunks/chunk.P22LQI5J.js";
 import "../../chunks/chunk.DREO4ZTN.js";
-import "../../chunks/chunk.4JYS4LYT.js";
-import "../../chunks/chunk.H2WJIJND.js";
+import "../../chunks/chunk.DI6S4YNU.js";
+import "../../chunks/chunk.53ZDJY4Q.js";
 import "../../chunks/chunk.BREU4ILT.js";
 import "../../chunks/chunk.5OIEI73E.js";
 import "../../chunks/chunk.6C4JXZZN.js";

package/dist/components/button/button.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import {
   button_default
-} from "../../chunks/chunk.B5LRNM2C.js";
-import "../../chunks/chunk.XBI2LWDH.js";
-import "../../chunks/chunk.3QEOTSBR.js";
+} from "../../chunks/chunk.4SJKXOCV.js";
+import "../../chunks/chunk.G3PDKNFK.js";
+import "../../chunks/chunk.5ZMQBOV3.js";
 import "../../chunks/chunk.N2I6HVX3.js";
 import "../../chunks/chunk.XGXFE6IF.js";
 import "../../chunks/chunk.R6VNLE6N.js";
@@ -10,8 +10,8 @@ import "../../chunks/chunk.A3SKDWCT.js";
 import "../../chunks/chunk.WDCAHRYG.js";
 import "../../chunks/chunk.P22LQI5J.js";
 import "../../chunks/chunk.DREO4ZTN.js";
-import "../../chunks/chunk.4JYS4LYT.js";
-import "../../chunks/chunk.H2WJIJND.js";
+import "../../chunks/chunk.DI6S4YNU.js";
+import "../../chunks/chunk.53ZDJY4Q.js";
 import "../../chunks/chunk.BREU4ILT.js";
 import "../../chunks/chunk.5OIEI73E.js";
 import "../../chunks/chunk.6C4JXZZN.js";

package/dist/components/icon/icon.component.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import {
   SynIcon
-} from "../../chunks/chunk.4JYS4LYT.js";
-import "../../chunks/chunk.H2WJIJND.js";
+} from "../../chunks/chunk.DI6S4YNU.js";
+import "../../chunks/chunk.53ZDJY4Q.js";
 import "../../chunks/chunk.BREU4ILT.js";
 import "../../chunks/chunk.5OIEI73E.js";
 import "../../chunks/chunk.6C4JXZZN.js";

package/dist/components/icon/icon.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import {
   SynIcon
-} from "../../chunks/chunk.4JYS4LYT.js";
-import "../../chunks/chunk.H2WJIJND.js";
+} from "../../chunks/chunk.DI6S4YNU.js";
+import "../../chunks/chunk.53ZDJY4Q.js";
 import "../../chunks/chunk.BREU4ILT.js";
 import "../../chunks/chunk.5OIEI73E.js";
 import "../../chunks/chunk.6C4JXZZN.js";

package/dist/components/input/input.component.js CHANGED Viewed

@@ -1,14 +1,14 @@
 import {
   SynInput
-} from "../../chunks/chunk.DAPEYF3L.js";
+} from "../../chunks/chunk.5SUEJSIW.js";
 import "../../chunks/chunk.Q77OTWF2.js";
 import "../../chunks/chunk.ILONRPL4.js";
 import "../../chunks/chunk.XGXFE6IF.js";
 import "../../chunks/chunk.R6VNLE6N.js";
 import "../../chunks/chunk.A3SKDWCT.js";
 import "../../chunks/chunk.WDCAHRYG.js";
-import "../../chunks/chunk.4JYS4LYT.js";
-import "../../chunks/chunk.H2WJIJND.js";
+import "../../chunks/chunk.DI6S4YNU.js";
+import "../../chunks/chunk.53ZDJY4Q.js";
 import "../../chunks/chunk.BREU4ILT.js";
 import "../../chunks/chunk.5OIEI73E.js";
 import "../../chunks/chunk.6C4JXZZN.js";

package/dist/components/input/input.js CHANGED Viewed

@@ -1,15 +1,15 @@
 import {
   input_default
-} from "../../chunks/chunk.KV3DM7PM.js";
-import "../../chunks/chunk.DAPEYF3L.js";
+} from "../../chunks/chunk.B7XEALID.js";
+import "../../chunks/chunk.5SUEJSIW.js";
 import "../../chunks/chunk.Q77OTWF2.js";
 import "../../chunks/chunk.ILONRPL4.js";
 import "../../chunks/chunk.XGXFE6IF.js";
 import "../../chunks/chunk.R6VNLE6N.js";
 import "../../chunks/chunk.A3SKDWCT.js";
 import "../../chunks/chunk.WDCAHRYG.js";
-import "../../chunks/chunk.4JYS4LYT.js";
-import "../../chunks/chunk.H2WJIJND.js";
+import "../../chunks/chunk.DI6S4YNU.js";
+import "../../chunks/chunk.53ZDJY4Q.js";
 import "../../chunks/chunk.BREU4ILT.js";
 import "../../chunks/chunk.5OIEI73E.js";
 import "../../chunks/chunk.6C4JXZZN.js";

package/dist/components/spinner/spinner.component.js CHANGED Viewed

@@ -1,10 +1,10 @@
 import {
   SynSpinner
-} from "../../chunks/chunk.3QEOTSBR.js";
+} from "../../chunks/chunk.5ZMQBOV3.js";
 import "../../chunks/chunk.N2I6HVX3.js";
 import "../../chunks/chunk.R6VNLE6N.js";
 import "../../chunks/chunk.A3SKDWCT.js";
-import "../../chunks/chunk.H2WJIJND.js";
+import "../../chunks/chunk.53ZDJY4Q.js";
 import "../../chunks/chunk.O7USYXBT.js";
 import "../../chunks/chunk.DJOAQ4JU.js";
 export {

package/dist/custom-elements.json CHANGED Viewed

@@ -1859,7 +1859,7 @@
   "package": {
     "name": "@synergy-design-system/components",
     "description": "",
-    "version": "1.0.0-main.6",
+    "version": "1.0.0-main.8",
     "author": {
       "name": "SICK Global UX Foundation",
       "url": "https://www.sick.com"

package/dist/synergy.js CHANGED Viewed

@@ -1,18 +1,18 @@
 import {
   input_default
-} from "./chunks/chunk.KV3DM7PM.js";
+} from "./chunks/chunk.B7XEALID.js";
 import {
   getFormControls,
   serialize
 } from "./chunks/chunk.WTCUSH7V.js";
-import "./chunks/chunk.DAPEYF3L.js";
+import "./chunks/chunk.5SUEJSIW.js";
 import "./chunks/chunk.Q77OTWF2.js";
 import "./chunks/chunk.ILONRPL4.js";
 import {
   button_default
-} from "./chunks/chunk.B5LRNM2C.js";
-import "./chunks/chunk.XBI2LWDH.js";
-import "./chunks/chunk.3QEOTSBR.js";
+} from "./chunks/chunk.4SJKXOCV.js";
+import "./chunks/chunk.G3PDKNFK.js";
+import "./chunks/chunk.5ZMQBOV3.js";
 import "./chunks/chunk.N2I6HVX3.js";
 import "./chunks/chunk.XGXFE6IF.js";
 import "./chunks/chunk.R6VNLE6N.js";
@@ -20,8 +20,8 @@ import "./chunks/chunk.A3SKDWCT.js";
 import "./chunks/chunk.WDCAHRYG.js";
 import "./chunks/chunk.P22LQI5J.js";
 import "./chunks/chunk.DREO4ZTN.js";
-import "./chunks/chunk.4JYS4LYT.js";
-import "./chunks/chunk.H2WJIJND.js";
+import "./chunks/chunk.DI6S4YNU.js";
+import "./chunks/chunk.53ZDJY4Q.js";
 import "./chunks/chunk.BREU4ILT.js";
 import "./chunks/chunk.5OIEI73E.js";
 import "./chunks/chunk.6C4JXZZN.js";

package/dist/web-types.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@synergy-design-system/components",
-  "version": "1.0.0-main.6",
+  "version": "1.0.0-main.8",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/package.json CHANGED Viewed

@@ -4,7 +4,7 @@
     "url": "https://www.sick.com"
   },
   "name": "@synergy-design-system/components",
-  "version": "1.0.0-main.6",
+  "version": "1.0.0-main.8",
   "description": "",
   "repository": {
     "type": "git",
@@ -27,6 +27,7 @@
     "dist"
   ],
   "type": "module",
+  "types": "./dist/synergy.d.ts",
   "homepage": "https://github.com/SickDesignSystem/synergy/tree/main/packages/components",
   "keywords": [
     "Web Components",
@@ -46,8 +47,6 @@
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/exec": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@shoelace-style/animations": "^1.1.0",
-    "@shoelace-style/localize": "^3.1.2",
     "@types/mocha": "^10.0.2",
     "@typescript-eslint/eslint-plugin": "^6.9.0",
     "@typescript-eslint/parser": "^6.9.0",
@@ -72,6 +71,7 @@
     "eslint-plugin-wc": "^2.0.4",
     "globby": "^13.2.2",
     "jsdom": "^22.1.0",
+    "ng-packagr": "^17.0.0",
     "ora": "^7.0.1",
     "pascal-case": "^4.0.0",
     "prettier": "^3.0.3",
@@ -86,7 +86,8 @@
     "user-agent-data-types": "^0.4.2",
     "vendorism": "github:mariohamann/vendorism",
     "@synergy-design-system/eslint-config-syn": "0.1.0",
-    "@synergy-design-system/stylelint-config-syn": "0.1.0"
+    "@synergy-design-system/stylelint-config-syn": "0.1.0",
+    "@synergy-design-system/tokens": "1.0.0-main.6"
   },
   "release": {
     "branches": [
@@ -123,7 +124,7 @@
       [
         "@semantic-release/exec",
         {
-          "prepareCmd": "pnpm build && git add ../react && git commit -m \"chore(release/react) via component release [skip actions]\""
+          "prepareCmd": "pnpm build && pnpm release.angular && pnpm release.react"
         }
       ],
       [
@@ -145,12 +146,16 @@
     ]
   },
   "dependencies": {
+    "@floating-ui/dom": "^1.5.3",
+    "@shoelace-style/animations": "^1.1.0",
+    "@shoelace-style/localize": "^3.1.2",
+    "composed-offset-position": "^0.0.4",
     "lit": "^3.0.0"
   },
   "web-types": "./dist/web-types.json",
   "scripts": {
     "build": "node scripts/build.js",
-    "test": "pnpm build && web-test-runner --group default",
+    "test": "web-test-runner --group default",
     "vendor": "node scripts/vendorism.js",
     "vendor.get": "node scripts/vendorism.js -g",
     "vendor.set": "node scripts/vendorism.js -s",
@@ -158,6 +163,8 @@
     "lint:css": "stylelint \"src/**/*.{css,js,ts}\"",
     "lint:js": "eslint src",
     "lint": "pnpm run /^lint:.*/",
-    "release": "semantic-release  --tagFormat 'components/${version}' -e semantic-release-monorepo"
+    "release": "semantic-release  --tagFormat 'components/${version}' -e semantic-release-monorepo",
+    "release.angular": "git add ../angular && git commit -m \"chore(release/angular) via component release [skip actions]\"",
+    "release.react": "git add ../react && git commit -m \"chore(release/react) via component release [skip actions]\""
   }
 }

/package/dist/chunks/{chunk.B5LRNM2C.js.map → chunk.4SJKXOCV.js.map} RENAMED Viewed

File without changes

/package/dist/chunks/{chunk.DAPEYF3L.js.map → chunk.5SUEJSIW.js.map} RENAMED Viewed

File without changes

/package/dist/chunks/{chunk.3QEOTSBR.js.map → chunk.5ZMQBOV3.js.map} RENAMED Viewed

File without changes

/package/dist/chunks/{chunk.KV3DM7PM.js.map → chunk.B7XEALID.js.map} RENAMED Viewed

File without changes

/package/dist/chunks/{chunk.4JYS4LYT.js.map → chunk.DI6S4YNU.js.map} RENAMED Viewed

File without changes

/package/dist/chunks/{chunk.XBI2LWDH.js.map → chunk.G3PDKNFK.js.map} RENAMED Viewed

File without changes