npm - @synergy-design-system/components - Versions diffs - 0.1.0 → 1.0.0-main.10 - Mend

@synergy-design-system/components 0.1.0 → 1.0.0-main.10

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 (114) hide show

package/LICENSE +28 -0
package/README.md +150 -1
package/dist/chunks/{chunk.Y5USHY74.js → chunk.5FQRRIZP.js} +4 -3
package/dist/chunks/chunk.5FQRRIZP.js.map +7 -0
package/dist/chunks/{chunk.2DA7CIOQ.js → chunk.5OIEI73E.js} +3 -2
package/dist/chunks/chunk.5OIEI73E.js.map +7 -0
package/dist/chunks/{chunk.7XI5LKCC.js → chunk.6C4JXZZN.js} +2 -1
package/dist/chunks/chunk.6C4JXZZN.js.map +7 -0
package/dist/chunks/{chunk.MAS2SHYD.js → chunk.A3SKDWCT.js} +1 -0
package/dist/chunks/chunk.A3SKDWCT.js.map +7 -0
package/dist/chunks/{chunk.SVIWEI6P.js → chunk.BREU4ILT.js} +2 -1
package/dist/chunks/chunk.BREU4ILT.js.map +7 -0
package/dist/chunks/{chunk.2CFEYJLE.js → chunk.C7624ITA.js} +1 -0
package/dist/chunks/chunk.C7624ITA.js.map +7 -0
package/dist/chunks/{chunk.PM7NIY3M.js → chunk.DJOAQ4JU.js} +1 -0
package/dist/chunks/chunk.DJOAQ4JU.js.map +7 -0
package/dist/chunks/{chunk.Q5SD5LHE.js → chunk.GHPQ7ZMD.js} +11 -242
package/dist/chunks/chunk.GHPQ7ZMD.js.map +7 -0
package/dist/chunks/chunk.IFBY43YE.js +138 -0
package/dist/chunks/chunk.IFBY43YE.js.map +7 -0
package/dist/chunks/{chunk.HQUF2ZAX.js → chunk.LE4ARJTE.js} +3 -2
package/dist/chunks/chunk.LE4ARJTE.js.map +7 -0
package/dist/chunks/{chunk.QPNUJNT5.js → chunk.N2I6HVX3.js} +2 -1
package/dist/chunks/chunk.N2I6HVX3.js.map +7 -0
package/dist/chunks/{chunk.KHU4AFPL.js → chunk.N7UUNTQC.js} +2 -1
package/dist/chunks/chunk.N7UUNTQC.js.map +7 -0
package/dist/chunks/{chunk.4NMNW5OM.js → chunk.O7USYXBT.js} +1 -0
package/dist/chunks/chunk.O7USYXBT.js.map +7 -0
package/dist/chunks/{chunk.NBKDLFEY.js → chunk.OEWBEV4Z.js} +7 -6
package/dist/chunks/chunk.OEWBEV4Z.js.map +7 -0
package/dist/chunks/{chunk.HSF5YXAS.js → chunk.OLZ3GIFL.js} +19 -35
package/dist/chunks/chunk.OLZ3GIFL.js.map +7 -0
package/dist/chunks/chunk.R55DOPNK.js +12 -0
package/dist/chunks/chunk.R55DOPNK.js.map +7 -0
package/dist/chunks/{chunk.2A3352EO.js → chunk.R6VNLE6N.js} +1 -0
package/dist/chunks/chunk.R6VNLE6N.js.map +7 -0
package/dist/chunks/{chunk.XVEDHRRP.js → chunk.RLGMLXIP.js} +20 -22
package/dist/chunks/chunk.RLGMLXIP.js.map +7 -0
package/dist/chunks/{chunk.VRTJZYIC.js → chunk.U7ZJ22QM.js} +1 -0
package/dist/chunks/chunk.U7ZJ22QM.js.map +7 -0
package/dist/chunks/chunk.W46CFM2R.js +90 -0
package/dist/chunks/chunk.W46CFM2R.js.map +7 -0
package/dist/chunks/{chunk.Z6AW3P62.js → chunk.WDCAHRYG.js} +4 -48
package/dist/chunks/chunk.WDCAHRYG.js.map +7 -0
package/dist/chunks/chunk.WTCUSH7V.js +42 -0
package/dist/chunks/chunk.WTCUSH7V.js.map +7 -0
package/dist/chunks/chunk.XGXFE6IF.js +49 -0
package/dist/chunks/chunk.XGXFE6IF.js.map +7 -0
package/dist/chunks/{chunk.O3LUPMYG.js → chunk.Y7DVVKVJ.js} +82 -18
package/dist/chunks/chunk.Y7DVVKVJ.js.map +7 -0
package/dist/components/button/button.component.d.ts +1 -10
package/dist/components/button/button.component.js +19 -16
package/dist/components/button/button.component.js.map +7 -0
package/dist/components/button/button.custom.styles.d.ts +2 -0
package/dist/components/button/button.custom.styles.js +8 -0
package/dist/components/button/button.custom.styles.js.map +7 -0
package/dist/components/button/button.js +21 -21
package/dist/components/button/button.js.map +7 -0
package/dist/components/button/button.styles.js +5 -3
package/dist/components/button/button.styles.js.map +7 -0
package/dist/components/checkbox/checkbox.custom.styles.d.ts +2 -0
package/dist/components/checkbox/checkbox.custom.styles.js +11 -0
package/dist/components/checkbox/checkbox.custom.styles.js.map +7 -0
package/dist/components/icon/icon.component.js +10 -9
package/dist/components/icon/icon.component.js.map +7 -0
package/dist/components/icon/icon.js +10 -9
package/dist/components/icon/icon.js.map +7 -0
package/dist/components/icon/icon.styles.js +4 -3
package/dist/components/icon/icon.styles.js.map +7 -0
package/dist/components/icon/library.default.js +4 -3
package/dist/components/icon/library.default.js.map +7 -0
package/dist/components/icon/library.js +6 -5
package/dist/components/icon/library.js.map +7 -0
package/dist/components/icon/library.system.js +3 -2
package/dist/components/icon/library.system.js.map +7 -0
package/dist/components/input/input.component.d.ts +0 -4
package/dist/components/input/input.component.js +17 -14
package/dist/components/input/input.component.js.map +7 -0
package/dist/components/input/input.custom.styles.d.ts +2 -0
package/dist/components/input/input.custom.styles.js +8 -0
package/dist/components/input/input.custom.styles.js.map +7 -0
package/dist/components/input/input.js +18 -15
package/dist/components/input/input.js.map +7 -0
package/dist/components/input/input.styles.js +5 -3
package/dist/components/input/input.styles.js.map +7 -0
package/dist/components/spinner/spinner.component.js +8 -7
package/dist/components/spinner/spinner.component.js.map +7 -0
package/dist/components/spinner/spinner.styles.js +4 -3
package/dist/components/spinner/spinner.styles.js.map +7 -0
package/dist/components/textarea/textarea.custom.styles.d.ts +2 -0
package/dist/components/textarea/textarea.custom.styles.js +11 -0
package/dist/components/textarea/textarea.custom.styles.js.map +7 -0
package/dist/custom-elements.json +11 -108
package/dist/events/events.d.ts +8 -8
package/dist/styles/form-control.custom.styles.d.ts +2 -0
package/dist/synergy-autoloader.js +3 -2
package/dist/synergy-autoloader.js.map +7 -0
package/dist/synergy.d.ts +2 -0
package/dist/synergy.js +34 -16
package/dist/synergy.js.map +7 -0
package/dist/translations/de.js +4 -3
package/dist/translations/de.js.map +7 -0
package/dist/translations/en.js +3 -2
package/dist/translations/en.js.map +7 -0
package/dist/utilities/base-path.js +3 -2
package/dist/utilities/base-path.js.map +7 -0
package/dist/utilities/form.d.ts +11 -0
package/dist/utilities/form.js +11 -0
package/dist/utilities/form.js.map +7 -0
package/dist/utilities/localize.js +4 -3
package/dist/utilities/localize.js.map +7 -0
package/dist/vscode.html-custom-data.json +2 -31
package/dist/web-types.json +4 -56
package/package.json +73 -34

package/LICENSE ADDED Viewed

@@ -0,0 +1,28 @@
+BSD 3-Clause License
+Copyright (c) 2023, SickDesignSystem
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+3. Neither the name of the copyright holder nor the names of its
+   contributors may be used to endorse or promote products derived from
+   this software without specific prior written permission.
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/README.md CHANGED Viewed

@@ -1,9 +1,154 @@
 # @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
 ### Using the vendor cli
 The vendor cli is taking care about updating our code base according to a new version of shoelace.
 To change the shoelace version, that should be downloaded, change the version in the config of `./scripts/vendorism.js`.
@@ -12,3 +157,7 @@ If code in our components library should be updated to this new shoelace version
 All shoelace files are per default readonly and are disabled from being changed. To change this files can be ejected. This can be done via:
 `pnpm vendor.eject "src/declaration.d.ts"`.
+### Adding events to the output
+To add events to the component output, make sure to add them to `src/scripts/vendorism.js` into the `events` array that is defined there. After a new build run `via pnpm build`, you will see the new event files and the `events/events.ts` file will be regenerated.

package/dist/chunks/{chunk.Y5USHY74.js → chunk.5FQRRIZP.js} RENAMED Viewed

@@ -1,12 +1,12 @@
 import {
   spinner_styles_default
-} from "./chunk.QPNUJNT5.js";
+} from "./chunk.N2I6HVX3.js";
 import {
   LocalizeController
-} from "./chunk.2A3352EO.js";
+} from "./chunk.R6VNLE6N.js";
 import {
   SynergyElement
-} from "./chunk.HQUF2ZAX.js";
+} from "./chunk.LE4ARJTE.js";
 // src/components/spinner/spinner.component.ts
 import { html } from "lit";
@@ -29,3 +29,4 @@ SynSpinner.styles = spinner_styles_default;
 export {
   SynSpinner
 };
+//# sourceMappingURL=chunk.5FQRRIZP.js.map

package/dist/chunks/chunk.5FQRRIZP.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/spinner/spinner.component.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 { html } from 'lit';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport styles from './spinner.styles.js';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * @summary Spinners are used to show the progress of an indeterminate operation.\n * @documentation https://synergy.style/components/spinner\n * @status stable\n * @since 2.0\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --track-width - The width of the track.\n * @cssproperty --track-color - The color of the track.\n * @cssproperty --indicator-color - The color of the spinner's indicator.\n * @cssproperty --speed - The time it takes for the spinner to complete one animation cycle.\n */\nexport default class SynSpinner extends SynergyElement {\n  static styles: CSSResultGroup = styles;\n\n  private readonly localize = new LocalizeController(this);\n\n  render() {\n    return html`\n      <svg part=\"base\" class=\"spinner\" role=\"progressbar\" aria-label=${this.localize.term('loading')}>\n        <circle class=\"spinner__track\"></circle>\n        <circle class=\"spinner__indicator\"></circle>\n      </svg>\n    `;\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;AAMA,SAAS,YAAY;AAmBrB,IAAqB,aAArB,cAAwC,eAAe;AAAA,EAAvD;AAAA;AAGE,SAAiB,WAAW,IAAI,mBAAmB,IAAI;AAAA;AAAA,EAEvD,SAAS;AACP,WAAO;AAAA,uEAC4D,KAAK,SAAS,KAAK,SAAS,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,EAKlG;AACF;AAbqB,WACZ,SAAyB;",
+  "names": []
+}

package/dist/chunks/{chunk.2DA7CIOQ.js → chunk.5OIEI73E.js} RENAMED Viewed

@@ -1,9 +1,9 @@
 import {
   library_default_default
-} from "./chunk.7XI5LKCC.js";
+} from "./chunk.6C4JXZZN.js";
 import {
   library_system_default
-} from "./chunk.VRTJZYIC.js";
+} from "./chunk.U7ZJ22QM.js";
 // src/components/icon/library.ts
 var registry = [library_default_default, library_system_default];
@@ -42,3 +42,4 @@ export {
   registerIconLibrary,
   unregisterIconLibrary
 };
+//# sourceMappingURL=chunk.5OIEI73E.js.map

package/dist/chunks/chunk.5OIEI73E.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/icon/library.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 defaultLibrary from './library.default.js';\nimport systemLibrary from './library.system.js';\nimport type SynIcon from '../icon/icon.js';\n\nexport type IconLibraryResolver = (name: string) => string;\nexport type IconLibraryMutator = (svg: SVGElement) => void;\nexport interface IconLibrary {\n  name: string;\n  resolver: IconLibraryResolver;\n  mutator?: IconLibraryMutator;\n  spriteSheet?: boolean;\n}\n\nlet registry: IconLibrary[] = [defaultLibrary, systemLibrary];\nlet watchedIcons: SynIcon[] = [];\n\n/** Adds an icon to the list of watched icons. */\nexport function watchIcon(icon: SynIcon) {\n  watchedIcons.push(icon);\n}\n\n/** Removes an icon from the list of watched icons. */\nexport function unwatchIcon(icon: SynIcon) {\n  watchedIcons = watchedIcons.filter(el => el !== icon);\n}\n\n/** Returns a library from the registry. */\nexport function getIconLibrary(name?: string) {\n  return registry.find(lib => lib.name === name);\n}\n\n/** Adds an icon library to the registry, or overrides an existing one. */\nexport function registerIconLibrary(name: string, options: Omit<IconLibrary, 'name'>) {\n  unregisterIconLibrary(name);\n  registry.push({\n    name,\n    resolver: options.resolver,\n    mutator: options.mutator,\n    spriteSheet: options.spriteSheet\n  });\n\n  // Redraw watched icons\n  watchedIcons.forEach(icon => {\n    if (icon.library === name) {\n      icon.setIcon();\n    }\n  });\n}\n\n/** Removes an icon library from the registry. */\nexport function unregisterIconLibrary(name: string) {\n  registry = registry.filter(lib => lib.name !== name);\n}\n"],
+  "mappings": ";;;;;;;;AAmBA,IAAI,WAA0B,CAAC,yBAAgB,sBAAa;AAC5D,IAAI,eAA0B,CAAC;AAGxB,SAAS,UAAU,MAAe;AACvC,eAAa,KAAK,IAAI;AACxB;AAGO,SAAS,YAAY,MAAe;AACzC,iBAAe,aAAa,OAAO,QAAM,OAAO,IAAI;AACtD;AAGO,SAAS,eAAe,MAAe;AAC5C,SAAO,SAAS,KAAK,SAAO,IAAI,SAAS,IAAI;AAC/C;AAGO,SAAS,oBAAoB,MAAc,SAAoC;AACpF,wBAAsB,IAAI;AAC1B,WAAS,KAAK;AAAA,IACZ;AAAA,IACA,UAAU,QAAQ;AAAA,IAClB,SAAS,QAAQ;AAAA,IACjB,aAAa,QAAQ;AAAA,EACvB,CAAC;AAGD,eAAa,QAAQ,UAAQ;AAC3B,QAAI,KAAK,YAAY,MAAM;AACzB,WAAK,QAAQ;AAAA,IACf;AAAA,EACF,CAAC;AACH;AAGO,SAAS,sBAAsB,MAAc;AAClD,aAAW,SAAS,OAAO,SAAO,IAAI,SAAS,IAAI;AACrD;",
+  "names": []
+}

package/dist/chunks/{chunk.7XI5LKCC.js → chunk.6C4JXZZN.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 import {
   getBasePath
-} from "./chunk.2CFEYJLE.js";
+} from "./chunk.C7624ITA.js";
 // src/components/icon/library.default.ts
 var library = {
@@ -12,3 +12,4 @@ var library_default_default = library;
 export {
   library_default_default
 };
+//# sourceMappingURL=chunk.6C4JXZZN.js.map

package/dist/chunks/chunk.6C4JXZZN.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/icon/library.default.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 { getBasePath } from '../../utilities/base-path.js';\nimport type { IconLibrary } from './library.js';\n\nconst library: IconLibrary = {\n  name: 'default',\n  resolver: name => getBasePath(`assets/icons/${name}.svg`)\n};\n\nexport default library;\n"],
+  "mappings": ";;;;;AASA,IAAM,UAAuB;AAAA,EAC3B,MAAM;AAAA,EACN,UAAU,UAAQ,YAAY,gBAAgB,IAAI,MAAM;AAC1D;AAEA,IAAO,0BAAQ;",
+  "names": []
+}

package/dist/chunks/{chunk.MAS2SHYD.js → chunk.A3SKDWCT.js} RENAMED Viewed

@@ -39,3 +39,4 @@ var en_default = translation;
 export {
   en_default
 };
+//# sourceMappingURL=chunk.A3SKDWCT.js.map

package/dist/chunks/chunk.A3SKDWCT.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/translations/en.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 { registerTranslation } from '@shoelace-style/localize';\nimport type { Translation } from '../utilities/localize.js';\n\nconst translation: Translation = {\n  $code: 'en',\n  $name: 'English',\n  $dir: 'ltr',\n\n  carousel: 'Carousel',\n  clearEntry: 'Clear entry',\n  close: 'Close',\n  copied: 'Copied',\n  copy: 'Copy',\n  currentValue: 'Current value',\n  error: 'Error',\n  goToSlide: (slide, count) => `Go to slide ${slide} of ${count}`,\n  hidePassword: 'Hide password',\n  loading: 'Loading',\n  nextSlide: 'Next slide',\n  numOptionsSelected: num => {\n    if (num === 0) return 'No options selected';\n    if (num === 1) return '1 option selected';\n    return `${num} options selected`;\n  },\n  previousSlide: 'Previous slide',\n  progress: 'Progress',\n  remove: 'Remove',\n  resize: 'Resize',\n  scrollToEnd: 'Scroll to end',\n  scrollToStart: 'Scroll to start',\n  selectAColorFromTheScreen: 'Select a color from the screen',\n  showPassword: 'Show password',\n  slideNum: slide => `Slide ${slide}`,\n  toggleColorFormat: 'Toggle color format'\n};\n\nregisterTranslation(translation);\n\nexport default translation;\n"],
+  "mappings": ";AAMA,SAAS,2BAA2B;AAGpC,IAAM,cAA2B;AAAA,EAC/B,OAAO;AAAA,EACP,OAAO;AAAA,EACP,MAAM;AAAA,EAEN,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,cAAc;AAAA,EACd,OAAO;AAAA,EACP,WAAW,CAAC,OAAO,UAAU,eAAe,KAAK,OAAO,KAAK;AAAA,EAC7D,cAAc;AAAA,EACd,SAAS;AAAA,EACT,WAAW;AAAA,EACX,oBAAoB,SAAO;AACzB,QAAI,QAAQ;AAAG,aAAO;AACtB,QAAI,QAAQ;AAAG,aAAO;AACtB,WAAO,GAAG,GAAG;AAAA,EACf;AAAA,EACA,eAAe;AAAA,EACf,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,eAAe;AAAA,EACf,2BAA2B;AAAA,EAC3B,cAAc;AAAA,EACd,UAAU,WAAS,SAAS,KAAK;AAAA,EACjC,mBAAmB;AACrB;AAEA,oBAAoB,WAAW;AAE/B,IAAO,aAAQ;",
+  "names": []
+}

package/dist/chunks/{chunk.SVIWEI6P.js → chunk.BREU4ILT.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 import {
   component_styles_default
-} from "./chunk.4NMNW5OM.js";
+} from "./chunk.O7USYXBT.js";
 // src/components/icon/icon.styles.ts
 import { css } from "lit";
@@ -25,3 +25,4 @@ var icon_styles_default = css`
 export {
   icon_styles_default
 };
+//# sourceMappingURL=chunk.BREU4ILT.js.map

package/dist/chunks/chunk.BREU4ILT.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/icon/icon.styles.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 { css } from 'lit';\nimport componentStyles from '../../styles/component.styles.js';\n\nexport default css`\n\t/* stylelint-disable */\n  ${componentStyles}\n\n  :host {\n    display: inline-block;\n    width: 1em;\n    height: 1em;\n    box-sizing: content-box !important;\n  }\n\n  svg {\n    display: block;\n    height: 100%;\n    width: 100%;\n  }\n`;\n"],
+  "mappings": ";;;;;AAMA,SAAS,WAAW;AAGpB,IAAO,sBAAQ;AAAA;AAAA,IAEX,wBAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/chunks/{chunk.2CFEYJLE.js → chunk.C7624ITA.js} RENAMED Viewed

@@ -27,3 +27,4 @@ export {
   setBasePath,
   getBasePath
 };
+//# sourceMappingURL=chunk.C7624ITA.js.map

package/dist/chunks/chunk.C7624ITA.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/utilities/base-path.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 */\nlet basePath = '';\n\n/** Sets the library's base path to the specified directory. */\nexport function setBasePath(path: string) {\n  basePath = path;\n}\n\n/**\n * Gets the library's base path.\n *\n * The base path is used to load assets such as icons and images, so it needs to be set for components to work properly.\n * By default, this script will look for a script ending in synergy.js or synergy-autoloader.js and set the base path\n * to the directory that contains that file. To override this behavior, you can add the data-synergy attribute to any\n * script on the page (it probably makes the most sense to attach it to the Synergy script, but it could also be on a\n * bundle). The value can be a local folder or it can point to a CORS-enabled endpoint such as a CDN.\n *\n *   <script src=\"bundle.js\" data-synergy=\"/custom/base/path\"></script>\n *\n * Alternatively, you can set the base path manually using the exported setBasePath() function.\n *\n * @param subpath - An optional path to append to the base path.\n */\nexport function getBasePath(subpath = '') {\n  if (!basePath) {\n    const scripts = [...document.getElementsByTagName('script')] as HTMLScriptElement[];\n    const configScript = scripts.find(script => script.hasAttribute('data-synergy'));\n\n    if (configScript) {\n      // Use the data-synergy attribute\n      setBasePath(configScript.getAttribute('data-synergy')!);\n    } else {\n      const fallbackScript = scripts.find(s => {\n        return /synergy(\\.min)?\\.js($|\\?)/.test(s.src) || /synergy-autoloader(\\.min)?\\.js($|\\?)/.test(s.src);\n      });\n      let path = '';\n\n      if (fallbackScript) {\n        path = fallbackScript.getAttribute('src')!;\n      }\n\n      setBasePath(path.split('/').slice(0, -1).join('/'));\n    }\n  }\n\n  // Return the base path without a trailing slash. If one exists, append the subpath separated by a slash.\n  return basePath.replace(/\\/$/, '') + (subpath ? `/${subpath.replace(/^\\//, '')}` : ``);\n}\n"],
+  "mappings": ";AAMA,IAAI,WAAW;AAGR,SAAS,YAAY,MAAc;AACxC,aAAW;AACb;AAiBO,SAAS,YAAY,UAAU,IAAI;AACxC,MAAI,CAAC,UAAU;AACb,UAAM,UAAU,CAAC,GAAG,SAAS,qBAAqB,QAAQ,CAAC;AAC3D,UAAM,eAAe,QAAQ,KAAK,YAAU,OAAO,aAAa,cAAc,CAAC;AAE/E,QAAI,cAAc;AAEhB,kBAAY,aAAa,aAAa,cAAc,CAAE;AAAA,IACxD,OAAO;AACL,YAAM,iBAAiB,QAAQ,KAAK,OAAK;AACvC,eAAO,4BAA4B,KAAK,EAAE,GAAG,KAAK,uCAAuC,KAAK,EAAE,GAAG;AAAA,MACrG,CAAC;AACD,UAAI,OAAO;AAEX,UAAI,gBAAgB;AAClB,eAAO,eAAe,aAAa,KAAK;AAAA,MAC1C;AAEA,kBAAY,KAAK,MAAM,GAAG,EAAE,MAAM,GAAG,EAAE,EAAE,KAAK,GAAG,CAAC;AAAA,IACpD;AAAA,EACF;AAGA,SAAO,SAAS,QAAQ,OAAO,EAAE,KAAK,UAAU,IAAI,QAAQ,QAAQ,OAAO,EAAE,CAAC,KAAK;AACrF;",
+  "names": []
+}

package/dist/chunks/{chunk.PM7NIY3M.js → chunk.DJOAQ4JU.js} RENAMED Viewed

@@ -33,3 +33,4 @@ export {
   __spreadProps,
   __decorateClass
 };
+//# sourceMappingURL=chunk.DJOAQ4JU.js.map

package/dist/chunks/chunk.DJOAQ4JU.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/chunks/{chunk.Q5SD5LHE.js → chunk.GHPQ7ZMD.js} RENAMED Viewed

@@ -1,6 +1,9 @@
+import {
+  button_custom_styles_default
+} from "./chunk.IFBY43YE.js";
 import {
   component_styles_default
-} from "./chunk.4NMNW5OM.js";
+} from "./chunk.O7USYXBT.js";
 // src/components/button/button.styles.ts
 import { css } from "lit";
@@ -81,119 +84,25 @@ var button_styles_default = css`
    * Standard buttons
    */
-  /* Default */
-  .button--standard.button--default {
-    background-color: var(--syn-color-neutral-0);
-    border-color: var(--syn-color-neutral-300);
-    color: var(--syn-color-neutral-700);
-  }
-  .button--standard.button--default:hover:not(.button--disabled) {
-    background-color: var(--syn-color-primary-50);
-    border-color: var(--syn-color-primary-300);
-    color: var(--syn-color-primary-700);
-  }
-  .button--standard.button--default:active:not(.button--disabled) {
-    background-color: var(--syn-color-primary-100);
-    border-color: var(--syn-color-primary-400);
-    color: var(--syn-color-primary-700);
-  }
   /* Primary */
-  .button--standard.button--primary {
+  .button--filled.button--primary {
     background-color: var(--syn-color-primary-600);
     border-color: var(--syn-color-primary-600);
     color: var(--syn-color-neutral-0);
   }
-  .button--standard.button--primary:hover:not(.button--disabled) {
+  .button--filled.button--primary:hover:not(.button--disabled) {
     background-color: var(--syn-color-primary-500);
     border-color: var(--syn-color-primary-500);
     color: var(--syn-color-neutral-0);
   }
-  .button--standard.button--primary:active:not(.button--disabled) {
+  .button--filled.button--primary:active:not(.button--disabled) {
     background-color: var(--syn-color-primary-600);
     border-color: var(--syn-color-primary-600);
     color: var(--syn-color-neutral-0);
   }
-  /* Success */
-  .button--standard.button--success {
-    background-color: var(--syn-color-success-600);
-    border-color: var(--syn-color-success-600);
-    color: var(--syn-color-neutral-0);
-  }
-  .button--standard.button--success:hover:not(.button--disabled) {
-    background-color: var(--syn-color-success-500);
-    border-color: var(--syn-color-success-500);
-    color: var(--syn-color-neutral-0);
-  }
-  .button--standard.button--success:active:not(.button--disabled) {
-    background-color: var(--syn-color-success-600);
-    border-color: var(--syn-color-success-600);
-    color: var(--syn-color-neutral-0);
-  }
-  /* Neutral */
-  .button--standard.button--neutral {
-    background-color: var(--syn-color-neutral-600);
-    border-color: var(--syn-color-neutral-600);
-    color: var(--syn-color-neutral-0);
-  }
-  .button--standard.button--neutral:hover:not(.button--disabled) {
-    background-color: var(--syn-color-neutral-500);
-    border-color: var(--syn-color-neutral-500);
-    color: var(--syn-color-neutral-0);
-  }
-  .button--standard.button--neutral:active:not(.button--disabled) {
-    background-color: var(--syn-color-neutral-600);
-    border-color: var(--syn-color-neutral-600);
-    color: var(--syn-color-neutral-0);
-  }
-  /* Warning */
-  .button--standard.button--warning {
-    background-color: var(--syn-color-warning-600);
-    border-color: var(--syn-color-warning-600);
-    color: var(--syn-color-neutral-0);
-  }
-  .button--standard.button--warning:hover:not(.button--disabled) {
-    background-color: var(--syn-color-warning-500);
-    border-color: var(--syn-color-warning-500);
-    color: var(--syn-color-neutral-0);
-  }
-  .button--standard.button--warning:active:not(.button--disabled) {
-    background-color: var(--syn-color-warning-600);
-    border-color: var(--syn-color-warning-600);
-    color: var(--syn-color-neutral-0);
-  }
-  /* Danger */
-  .button--standard.button--danger {
-    background-color: var(--syn-color-danger-600);
-    border-color: var(--syn-color-danger-600);
-    color: var(--syn-color-neutral-0);
-  }
-  .button--standard.button--danger:hover:not(.button--disabled) {
-    background-color: var(--syn-color-danger-500);
-    border-color: var(--syn-color-danger-500);
-    color: var(--syn-color-neutral-0);
-  }
-  .button--standard.button--danger:active:not(.button--disabled) {
-    background-color: var(--syn-color-danger-600);
-    border-color: var(--syn-color-danger-600);
-    color: var(--syn-color-neutral-0);
-  }
   /*
    * Outline buttons
    */
@@ -203,25 +112,6 @@ var button_styles_default = css`
     border: solid 1px;
   }
-  /* Default */
-  .button--outline.button--default {
-    border-color: var(--syn-color-neutral-300);
-    color: var(--syn-color-neutral-700);
-  }
-  .button--outline.button--default:hover:not(.button--disabled),
-  .button--outline.button--default.button--checked:not(.button--disabled) {
-    border-color: var(--syn-color-primary-600);
-    background-color: var(--syn-color-primary-600);
-    color: var(--syn-color-neutral-0);
-  }
-  .button--outline.button--default:active:not(.button--disabled) {
-    border-color: var(--syn-color-primary-700);
-    background-color: var(--syn-color-primary-700);
-    color: var(--syn-color-neutral-0);
-  }
   /* Primary */
   .button--outline.button--primary {
     border-color: var(--syn-color-primary-600);
@@ -240,84 +130,6 @@ var button_styles_default = css`
     color: var(--syn-color-neutral-0);
   }
-  /* Success */
-  .button--outline.button--success {
-    border-color: var(--syn-color-success-600);
-    color: var(--syn-color-success-600);
-  }
-  .button--outline.button--success:hover:not(.button--disabled),
-  .button--outline.button--success.button--checked:not(.button--disabled) {
-    background-color: var(--syn-color-success-600);
-    color: var(--syn-color-neutral-0);
-  }
-  .button--outline.button--success:active:not(.button--disabled) {
-    border-color: var(--syn-color-success-700);
-    background-color: var(--syn-color-success-700);
-    color: var(--syn-color-neutral-0);
-  }
-  /* Neutral */
-  .button--outline.button--neutral {
-    border-color: var(--syn-color-neutral-600);
-    color: var(--syn-color-neutral-600);
-  }
-  .button--outline.button--neutral:hover:not(.button--disabled),
-  .button--outline.button--neutral.button--checked:not(.button--disabled) {
-    background-color: var(--syn-color-neutral-600);
-    color: var(--syn-color-neutral-0);
-  }
-  .button--outline.button--neutral:active:not(.button--disabled) {
-    border-color: var(--syn-color-neutral-700);
-    background-color: var(--syn-color-neutral-700);
-    color: var(--syn-color-neutral-0);
-  }
-  /* Warning */
-  .button--outline.button--warning {
-    border-color: var(--syn-color-warning-600);
-    color: var(--syn-color-warning-600);
-  }
-  .button--outline.button--warning:hover:not(.button--disabled),
-  .button--outline.button--warning.button--checked:not(.button--disabled) {
-    background-color: var(--syn-color-warning-600);
-    color: var(--syn-color-neutral-0);
-  }
-  .button--outline.button--warning:active:not(.button--disabled) {
-    border-color: var(--syn-color-warning-700);
-    background-color: var(--syn-color-warning-700);
-    color: var(--syn-color-neutral-0);
-  }
-  /* Danger */
-  .button--outline.button--danger {
-    border-color: var(--syn-color-danger-600);
-    color: var(--syn-color-danger-600);
-  }
-  .button--outline.button--danger:hover:not(.button--disabled),
-  .button--outline.button--danger.button--checked:not(.button--disabled) {
-    background-color: var(--syn-color-danger-600);
-    color: var(--syn-color-neutral-0);
-  }
-  .button--outline.button--danger:active:not(.button--disabled) {
-    border-color: var(--syn-color-danger-700);
-    background-color: var(--syn-color-danger-700);
-    color: var(--syn-color-neutral-0);
-  }
-  @media (forced-colors: active) {
-    .button.button--outline.button--checked:not(.button--disabled) {
-      outline: solid 2px transparent;
-    }
-  }
   /*
    * Text buttons
    */
@@ -374,52 +186,6 @@ var button_styles_default = css`
     border-radius: var(--syn-input-border-radius-large);
   }
-  /*
-   * Pill modifier
-   */
-  .button--pill.button--small {
-    border-radius: var(--syn-input-height-small);
-  }
-  .button--pill.button--medium {
-    border-radius: var(--syn-input-height-medium);
-  }
-  .button--pill.button--large {
-    border-radius: var(--syn-input-height-large);
-  }
-  /*
-   * Circle modifier
-   */
-  .button--circle {
-    padding-left: 0;
-    padding-right: 0;
-  }
-  .button--circle.button--small {
-    width: var(--syn-input-height-small);
-    border-radius: 50%;
-  }
-  .button--circle.button--medium {
-    width: var(--syn-input-height-medium);
-    border-radius: 50%;
-  }
-  .button--circle.button--large {
-    width: var(--syn-input-height-large);
-    border-radius: 50%;
-  }
-  .button--circle .button__prefix,
-  .button--circle .button__suffix,
-  .button--circle .button__caret {
-    display: none;
-  }
   /*
    * Caret modifier
    */
@@ -577,7 +343,7 @@ var button_styles_default = css`
       .syn-button-group__button:not(
           .syn-button-group__button--first,
           .syn-button-group__button--radio,
-          [variant='default']
+          [variant='filled']
         ):not(:hover)
     )
     .button:after {
@@ -600,8 +366,11 @@ var button_styles_default = css`
   :host(.syn-button-group__button[checked]) {
     z-index: 2;
   }
+  ${button_custom_styles_default}
 `;
 export {
   button_styles_default
 };
+//# sourceMappingURL=chunk.GHPQ7ZMD.js.map