@synergy-design-system/components 1.1.0 → 1.2.1

package/README.md

@@ -45,7 +45,10 @@ To make all components available, just load the main package file. It will make
       <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>
+    <script
+      type="module"
+      src="../node_modules/@synergy-design-system/components/dist/synergy.js"
+    ></script>
   </body>
 </html>
 ```
@@ -56,10 +59,10 @@ When using a build system, you should load the bundle in JavaScript or TypeScrip
 // main.ts
 
 // Do not forget to load the design tokens!
-import '@synergy-design-system/tokens/themes/light.css';
+import "@synergy-design-system/tokens/themes/light.css";
 
 // This will load synergy.js via the exports map
-import '@synergy-design-system/components';
+import "@synergy-design-system/components";
 ```
 
 #### Loading selected components only
@@ -79,7 +82,10 @@ Use this when you need complete control about which components are loaded. This
       <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>
+    <script
+      type="module"
+      src="../node_modules/@synergy-design-system/components/dist/components/button/button.js"
+    ></script>
   </body>
 </html>
 ```
@@ -90,10 +96,10 @@ When using a build system, you may also load the bundle in JavaScript or TypeScr
 // main.ts
 
 // Do not forget to load the design tokens!
-import '@synergy-design-system/tokens/themes/light.css';
+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';
+import "@synergy-design-system/components/components/button/button.js";
 ```
 
 ---
@@ -106,24 +112,26 @@ The components are built using typescript and provide types for elements and eve
 // main.ts
 
 // Do not forget to load the design tokens!
-import '@synergy-design-system/tokens/themes/light.css';
+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';
+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.component';
-import type { SynInvalidEvent } from '@synergy-design-system/components/events/events';
+import type { SynButton } from "@synergy-design-system/components/components/button/button.component";
+import type { SynInvalidEvent } from "@synergy-design-system/components/events/events";
 
-document.addEventListener('load', () => {
-  const loadedSynButtons = document.querySelectorAll<SynButton>('syn-button');
+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);
+  Array.from(loadedSynButtons) // Type: SynButton[]
+    .addEventListener("syn-invalid", (e: SynInvalidEvent) => {
+      console.log("Button is now invalid!", e);
     });
 });
 ```

package/dist/chunks/chunk.2D7KJSSX.js

@@ -0,0 +1,75 @@
+import {
+  tag_styles_default
+} from "./chunk.QHFGD6WW.js";
+import {
+  SynIconButton
+} from "./chunk.R3CMRBZ7.js";
+import {
+  LocalizeController
+} from "./chunk.R6VNLE6N.js";
+import {
+  SynergyElement
+} from "./chunk.V52P6M55.js";
+import {
+  __decorateClass
+} from "./chunk.DJOAQ4JU.js";
+
+// src/components/tag/tag.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+var SynTag = class extends SynergyElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.size = "medium";
+    this.removable = false;
+  }
+  handleRemoveClick() {
+    this.emit("syn-remove");
+  }
+  render() {
+    return html`
+      <span
+        part="base"
+        class=${classMap({
+      tag: true,
+      // Sizes
+      "tag--small": this.size === "small",
+      "tag--medium": this.size === "medium",
+      "tag--large": this.size === "large",
+      // Modifiers
+      "tag--removable": this.removable
+    })}
+      >
+        <slot part="content" class="tag__content"></slot>
+
+        ${this.removable ? html`
+              <syn-icon-button
+                part="remove-button"
+                exportparts="base:remove-button__base"
+                name="x-lg"
+                library="system"
+                label=${this.localize.term("remove")}
+                class="tag__remove"
+                @click=${this.handleRemoveClick}
+                tabindex="-1"
+              ></syn-icon-button>
+            ` : ""}
+      </span>
+    `;
+  }
+};
+SynTag.styles = tag_styles_default;
+SynTag.dependencies = { "syn-icon-button": SynIconButton };
+__decorateClass([
+  property({ reflect: true })
+], SynTag.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean })
+], SynTag.prototype, "removable", 2);
+
+export {
+  SynTag
+};
+//# sourceMappingURL=chunk.2D7KJSSX.js.map

package/dist/chunks/chunk.2D7KJSSX.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/tag/tag.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 { classMap } from 'lit/directives/class-map.js';\nimport { html } from 'lit';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport { property } from 'lit/decorators.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport SynIconButton from '../icon-button/icon-button.component.js';\nimport styles from './tag.styles.js';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * @summary Tags are used as labels to organize things or to indicate a selection.\n * @documentation https://synergy.style/components/tag\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon-button\n *\n * @slot - The tag's content.\n *\n * @event syn-remove - Emitted when the remove button is activated.\n *\n * @csspart base - The component's base wrapper.\n * @csspart content - The tag's content.\n * @csspart remove-button - The tag's remove button, an `<syn-icon-button>`.\n * @csspart remove-button__base - The remove button's exported `base` part.\n */\nexport default class SynTag extends SynergyElement {\n  static styles: CSSResultGroup = styles;\n  static dependencies = { 'syn-icon-button': SynIconButton };\n\n  private readonly localize = new LocalizeController(this);\n\n  /** The tag's size. */\n  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Makes the tag removable and shows a remove button. */\n  @property({ type: Boolean }) removable = false;\n\n  private handleRemoveClick() {\n    this.emit('syn-remove');\n  }\n\n  render() {\n    return html`\n      <span\n        part=\"base\"\n        class=${classMap({\n          tag: true,\n\n          // Sizes\n          'tag--small': this.size === 'small',\n          'tag--medium': this.size === 'medium',\n          'tag--large': this.size === 'large',\n\n          // Modifiers\n          'tag--removable': this.removable\n        })}\n      >\n        <slot part=\"content\" class=\"tag__content\"></slot>\n\n        ${this.removable\n          ? html`\n              <syn-icon-button\n                part=\"remove-button\"\n                exportparts=\"base:remove-button__base\"\n                name=\"x-lg\"\n                library=\"system\"\n                label=${this.localize.term('remove')}\n                class=\"tag__remove\"\n                @click=${this.handleRemoveClick}\n                tabindex=\"-1\"\n              ></syn-icon-button>\n            `\n          : ''}\n      </span>\n    `;\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;AAMA,SAAS,gBAAgB;AACzB,SAAS,YAAY;AAErB,SAAS,gBAAgB;AAuBzB,IAAqB,SAArB,cAAoC,eAAe;AAAA,EAAnD;AAAA;AAIE,SAAiB,WAAW,IAAI,mBAAmB,IAAI;AAG1B,gBAAqC;AAGrC,qBAAY;AAAA;AAAA,EAEjC,oBAAoB;AAC1B,SAAK,KAAK,YAAY;AAAA,EACxB;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA;AAAA,gBAGK,SAAS;AAAA,MACf,KAAK;AAAA;AAAA,MAGL,cAAc,KAAK,SAAS;AAAA,MAC5B,eAAe,KAAK,SAAS;AAAA,MAC7B,cAAc,KAAK,SAAS;AAAA;AAAA,MAG5B,kBAAkB,KAAK;AAAA,IACzB,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA,UAIA,KAAK,YACH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMY,KAAK,SAAS,KAAK,QAAQ,CAAC;AAAA;AAAA,yBAE3B,KAAK,iBAAiB;AAAA;AAAA;AAAA,gBAInC,EAAE;AAAA;AAAA;AAAA,EAGZ;AACF;AAnDqB,OACZ,SAAyB;AADb,OAEZ,eAAe,EAAE,mBAAmB,cAAc;AAK5B;AAAA,EAA5B,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAPR,OAOU;AAGA;AAAA,EAA5B,SAAS,EAAE,MAAM,QAAQ,CAAC;AAAA,GAVR,OAUU;",
+  "names": []
+}

package/dist/chunks/{chunk.OVVMSN4D.js → chunk.2V5UNOVJ.js}

@@ -1,6 +1,6 @@
 import {
   button_styles_default
-} from "./chunk.YTS5TRJZ.js";
+} from "./chunk.VG7NKBOV.js";
 
 // src/components/radio-button/radio-button.styles.ts
 import { css } from "lit";
@@ -34,4 +34,4 @@ var radio_button_styles_default = css`
 export {
   radio_button_styles_default
 };
-//# sourceMappingURL=chunk.OVVMSN4D.js.map
+//# sourceMappingURL=chunk.2V5UNOVJ.js.map

package/dist/chunks/{chunk.QP2S2MDN.js → chunk.4YSX6HUH.js}

@@ -1,6 +1,6 @@
 import {
   SynCheckbox
-} from "./chunk.OVS5OKTW.js";
+} from "./chunk.AMHJ56Z3.js";
 
 // src/components/checkbox/checkbox.ts
 var checkbox_default = SynCheckbox;
@@ -9,4 +9,4 @@ SynCheckbox.define("syn-checkbox");
 export {
   checkbox_default
 };
-//# sourceMappingURL=chunk.QP2S2MDN.js.map
+//# sourceMappingURL=chunk.4YSX6HUH.js.map

package/dist/chunks/{chunk.7ODKEYK3.js → chunk.5ILVVLJF.js}

@@ -1,6 +1,6 @@
 import {
   radio_button_styles_default
-} from "./chunk.OVVMSN4D.js";
+} from "./chunk.2V5UNOVJ.js";
 import {
   HasSlotController
 } from "./chunk.XGXFE6IF.js";
@@ -9,7 +9,7 @@ import {
 } from "./chunk.VZ7S7YYN.js";
 import {
   SynergyElement
-} from "./chunk.S424QLI7.js";
+} from "./chunk.V52P6M55.js";
 import {
   __decorateClass
 } from "./chunk.DJOAQ4JU.js";
@@ -124,4 +124,4 @@ __decorateClass([
 export {
   SynRadioButton
 };
-//# sourceMappingURL=chunk.7ODKEYK3.js.map
+//# sourceMappingURL=chunk.5ILVVLJF.js.map

package/dist/chunks/{chunk.4XAK6MOQ.js → chunk.6PFQSQLU.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.6C4JXZZN.js";
 import {
   library_system_default
-} from "./chunk.GNAJOKCJ.js";
+} from "./chunk.EJXWL3JM.js";
 
 // src/components/icon/library.ts
 var registry = [library_default_default, library_system_default];
@@ -42,4 +42,4 @@ export {
   registerIconLibrary,
   unregisterIconLibrary
 };
-//# sourceMappingURL=chunk.4XAK6MOQ.js.map
+//# sourceMappingURL=chunk.6PFQSQLU.js.map

package/dist/chunks/chunk.7W73A57K.js

@@ -0,0 +1,108 @@
+// src/components/tag/tag.custom.styles.ts
+import { css } from "lit";
+var tag_custom_styles_default = css`
+  .tag {
+    background-color: var(--syn-color-neutral-0);
+    border-color: var(--syn-color-neutral-400);
+    color: var(--syn-input-color);
+  }
+
+  .tag .tag__remove {
+    color: var(--syn-color-neutral-500);
+  }
+
+
+  /* Size small */
+  .tag--small {
+    font-size: var(--syn-font-size-x-small);
+    height: var(--syn-font-size-x-large);
+  }
+
+  .tag--small.tag--removable {
+    padding-inline-end: var(--syn-spacing-2x-small);
+  }
+
+
+  /* Size medium */
+  .tag--medium {
+    font-size: var(--syn-font-size-small);
+    height: var(--syn-font-size-2x-large);
+  }
+
+  .tag--medium.tag--removable {
+    padding-inline-end: var(--syn-spacing-x-small);
+  }
+
+  .tag--medium .tag__remove {
+    margin-inline-start: var(--syn-spacing-small);
+  }
+
+
+  /* Size large */
+  .tag--large {
+    font-size: var(--syn-font-size-medium);
+    height: var(--syn-font-size-3x-large);
+  }
+
+  .tag--large .tag__remove {
+    margin-inline-start: var(--syn-spacing-medium);
+  }
+
+  .tag--large.tag--removable {
+    padding-inline-end: var(--syn-spacing-small);
+  }
+
+
+  /* Hover */
+  .tag.tag--removable:hover {
+    background-color: var(--syn-color-neutral-100);
+  }
+  
+  .tag .tag__remove:hover {
+    color: var(--syn-color-neutral-950);
+  }
+
+
+  /* Focus 
+     ! Focus styling is currently not working because shoelace does not support to focus icon-button 
+  */
+  .tag.tag--removable:focus ~ .tag__remove {
+    border: solid 1px var(--syn-color-primary-500);
+  }
+
+
+  /* Slotted icon style */
+  .tag--small ::slotted(syn-icon) {
+    font-size: var(--syn-font-size-small);
+    margin-inline-end: var(--syn-spacing-2x-small);
+  }
+
+  .tag--medium ::slotted(syn-icon) {
+    font-size: var(--syn-font-size-medium);
+    margin-inline-end: var(--syn-spacing-x-small);
+  }
+
+  .tag--large ::slotted(syn-icon) {
+    font-size: var(--syn-font-size-large);
+    margin-inline-end: var(--syn-spacing-x-small);
+  }
+
+
+  /* Remove icon-button style */
+  .tag--small .tag__remove::part(base){
+    font-size: var(--syn-font-size-medium);
+  }
+
+  .tag--medium .tag__remove::part(base){
+    font-size: var(--syn-font-size-x-large);
+  }
+
+  .tag--large .tag__remove::part(base){
+    font-size: var(--syn-font-size-2x-large);
+  }
+`;
+
+export {
+  tag_custom_styles_default
+};
+//# sourceMappingURL=chunk.7W73A57K.js.map

package/dist/chunks/chunk.7W73A57K.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/tag/tag.custom.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  .tag {\n    background-color: var(--syn-color-neutral-0);\n    border-color: var(--syn-color-neutral-400);\n    color: var(--syn-input-color);\n  }\n\n  .tag .tag__remove {\n    color: var(--syn-color-neutral-500);\n  }\n\n\n  /* Size small */\n  .tag--small {\n    font-size: var(--syn-font-size-x-small);\n    height: var(--syn-font-size-x-large);\n  }\n\n  .tag--small.tag--removable {\n    padding-inline-end: var(--syn-spacing-2x-small);\n  }\n\n\n  /* Size medium */\n  .tag--medium {\n    font-size: var(--syn-font-size-small);\n    height: var(--syn-font-size-2x-large);\n  }\n\n  .tag--medium.tag--removable {\n    padding-inline-end: var(--syn-spacing-x-small);\n  }\n\n  .tag--medium .tag__remove {\n    margin-inline-start: var(--syn-spacing-small);\n  }\n\n\n  /* Size large */\n  .tag--large {\n    font-size: var(--syn-font-size-medium);\n    height: var(--syn-font-size-3x-large);\n  }\n\n  .tag--large .tag__remove {\n    margin-inline-start: var(--syn-spacing-medium);\n  }\n\n  .tag--large.tag--removable {\n    padding-inline-end: var(--syn-spacing-small);\n  }\n\n\n  /* Hover */\n  .tag.tag--removable:hover {\n    background-color: var(--syn-color-neutral-100);\n  }\n  \n  .tag .tag__remove:hover {\n    color: var(--syn-color-neutral-950);\n  }\n\n\n  /* Focus \n     ! Focus styling is currently not working because shoelace does not support to focus icon-button \n  */\n  .tag.tag--removable:focus ~ .tag__remove {\n    border: solid 1px var(--syn-color-primary-500);\n  }\n\n\n  /* Slotted icon style */\n  .tag--small ::slotted(syn-icon) {\n    font-size: var(--syn-font-size-small);\n    margin-inline-end: var(--syn-spacing-2x-small);\n  }\n\n  .tag--medium ::slotted(syn-icon) {\n    font-size: var(--syn-font-size-medium);\n    margin-inline-end: var(--syn-spacing-x-small);\n  }\n\n  .tag--large ::slotted(syn-icon) {\n    font-size: var(--syn-font-size-large);\n    margin-inline-end: var(--syn-spacing-x-small);\n  }\n\n\n  /* Remove icon-button style */\n  .tag--small .tag__remove::part(base){\n    font-size: var(--syn-font-size-medium);\n  }\n\n  .tag--medium .tag__remove::part(base){\n    font-size: var(--syn-font-size-x-large);\n  }\n\n  .tag--large .tag__remove::part(base){\n    font-size: var(--syn-font-size-2x-large);\n  }\n`;\n"],
+  "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,4BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/chunks/{chunk.OVS5OKTW.js → chunk.AMHJ56Z3.js}

@@ -9,13 +9,13 @@ import {
 } from "./chunk.P2LNG2PZ.js";
 import {
   SynIcon
-} from "./chunk.7NADL2IT.js";
+} from "./chunk.VM64SQGC.js";
 import {
   watch
 } from "./chunk.VZ7S7YYN.js";
 import {
   SynergyElement
-} from "./chunk.S424QLI7.js";
+} from "./chunk.V52P6M55.js";
 import {
   __decorateClass
 } from "./chunk.DJOAQ4JU.js";
@@ -221,4 +221,4 @@ __decorateClass([
 export {
   SynCheckbox
 };
-//# sourceMappingURL=chunk.OVS5OKTW.js.map
+//# sourceMappingURL=chunk.AMHJ56Z3.js.map

package/dist/chunks/{chunk.EEG4VWBU.js → chunk.AP2QDLP7.js}

@@ -1,9 +1,9 @@
-import {
-  SynergyElement
-} from "./chunk.S424QLI7.js";
 import {
   button_group_styles_default
 } from "./chunk.4ZURABYO.js";
+import {
+  SynergyElement
+} from "./chunk.V52P6M55.js";
 import {
   __decorateClass
 } from "./chunk.DJOAQ4JU.js";
@@ -83,4 +83,4 @@ function findButton(el) {
 export {
   SynButtonGroup
 };
-//# sourceMappingURL=chunk.EEG4VWBU.js.map
+//# sourceMappingURL=chunk.AP2QDLP7.js.map

package/dist/chunks/{chunk.RAJNSJOZ.js → chunk.DS3H2UY3.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.VZ7S7YYN.js";
 import {
   SynergyElement
-} from "./chunk.S424QLI7.js";
+} from "./chunk.V52P6M55.js";
 import {
   __decorateClass
 } from "./chunk.DJOAQ4JU.js";
@@ -209,4 +209,4 @@ __decorateClass([
 export {
   SynSwitch
 };
-//# sourceMappingURL=chunk.RAJNSJOZ.js.map
+//# sourceMappingURL=chunk.DS3H2UY3.js.map

package/dist/chunks/{chunk.GNAJOKCJ.js → chunk.EJXWL3JM.js}

@@ -13,7 +13,9 @@ var icons = {
   "radio": `
 		<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill='currentColor'><path d="M17 12C17 14.7614 14.7614 17 12 17C9.23858 17 7 14.7614 7 12C7 9.23858 9.23858 7 12 7C14.7614 7 17 9.23858 17 12Z"/></svg>`,
   "x-circle-fill": `
-		<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill='currentColor'><path d="M12 2C6.47 2 2 6.47 2 12C2 17.53 6.47 22 12 22C17.53 22 22 17.53 22 12C22 6.47 17.53 2 12 2ZM17 15.59L15.59 17L12 13.41L8.41 17L7 15.59L10.59 12L7 8.41L8.41 7L12 10.59L15.59 7L17 8.41L13.41 12L17 15.59Z"/></svg>`
+		<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill='currentColor'><path d="M12 2C6.47 2 2 6.47 2 12C2 17.53 6.47 22 12 22C17.53 22 22 17.53 22 12C22 6.47 17.53 2 12 2ZM17 15.59L15.59 17L12 13.41L8.41 17L7 15.59L10.59 12L7 8.41L8.41 7L12 10.59L15.59 7L17 8.41L13.41 12L17 15.59Z"/></svg>`,
+  "x-lg": `
+		<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill='currentColor'><path d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z"/></svg>`
 };
 var systemLibrary = {
   name: "system",
@@ -29,4 +31,4 @@ var library_system_default = systemLibrary;
 export {
   library_system_default
 };
-//# sourceMappingURL=chunk.GNAJOKCJ.js.map
+//# sourceMappingURL=chunk.EJXWL3JM.js.map

package/dist/chunks/{chunk.GNAJOKCJ.js.map → chunk.EJXWL3JM.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/icon/library.system.ts"],
-  "sourcesContent": ["/* eslint-disable */\nimport type { IconLibrary } from './library.js';\n\n//\n// System icons are a separate library to ensure they're always available, regardless of how the default icon library is\n// configured or if its icons resolve properly.\n//\n// All Synergy components must use the system library instead of the default library. For visual consistency, system\n// icons are a subset of Bootstrap Icons.\n//\n// **Start system icons**\nconst icons = {\n\t'caret': `\n\t\t<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill='currentColor'><path d=\"M16.59 8.295L12 12.875L7.41 8.295L6 9.705L12 15.705L18 9.705L16.59 8.295Z\"/></svg>`,\n\t'check': `\n\t\t<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill='currentColor'><path d=\"M8.79496 15.875L4.62496 11.705L3.20496 13.115L8.79496 18.705L20.795 6.705L19.385 5.295L8.79496 15.875Z\"/></svg>`,\n\t'eye-slash': `\n\t\t<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill='currentColor'><path d=\"M12.005 6.5C14.765 6.5 17.005 8.74 17.005 11.5C17.005 12.15 16.875 12.76 16.645 13.33L19.565 16.25C21.075 14.99 22.265 13.36 22.995 11.5C21.265 7.11 16.995 4 11.995 4C10.595 4 9.255 4.25 8.01501 4.7L10.175 6.86C10.745 6.63 11.355 6.5 12.005 6.5ZM2.005 3.77L4.745 6.51C3.085 7.8 1.785 9.52 1.005 11.5C2.735 15.89 7.005 19 12.005 19C13.555 19 15.035 18.7 16.385 18.16L16.805 18.58L19.735 21.5L21.005 20.23L3.275 2.5L2.005 3.77ZM7.53501 9.3L9.085 10.85C9.035 11.06 9.005 11.28 9.005 11.5C9.005 13.16 10.345 14.5 12.005 14.5C12.225 14.5 12.445 14.47 12.655 14.42L14.205 15.97C13.535 16.3 12.795 16.5 12.005 16.5C9.245 16.5 7.005 14.26 7.005 11.5C7.005 10.71 7.20501 9.97 7.53501 9.3ZM11.845 8.52L14.995 11.67L15.015 11.51C15.015 9.85 13.675 8.51 12.015 8.51L11.845 8.52Z\"/></svg>`,\n\t'eye': `\n\t\t<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill='currentColor'><path d=\"M12 4.5C7 4.5 2.73 7.61 1 12C2.73 16.39 7 19.5 12 19.5C17 19.5 21.27 16.39 23 12C21.27 7.61 17 4.5 12 4.5ZM12 17C9.24 17 7 14.76 7 12C7 9.24 9.24 7 12 7C14.76 7 17 9.24 17 12C17 14.76 14.76 17 12 17ZM12 9C10.34 9 9 10.34 9 12C9 13.66 10.34 15 12 15C13.66 15 15 13.66 15 12C15 10.34 13.66 9 12 9Z\"/></svg>`,\n\t'indeterminate': `\n\t\t<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill='currentColor'><path d=\"M19 13H5V11H19V13Z\"/></svg>`,\n\t'radio': `\n\t\t<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill='currentColor'><path d=\"M17 12C17 14.7614 14.7614 17 12 17C9.23858 17 7 14.7614 7 12C7 9.23858 9.23858 7 12 7C14.7614 7 17 9.23858 17 12Z\"/></svg>`,\n\t'x-circle-fill': `\n\t\t<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill='currentColor'><path d=\"M12 2C6.47 2 2 6.47 2 12C2 17.53 6.47 22 12 22C17.53 22 22 17.53 22 12C22 6.47 17.53 2 12 2ZM17 15.59L15.59 17L12 13.41L8.41 17L7 15.59L10.59 12L7 8.41L8.41 7L12 10.59L15.59 7L17 8.41L13.41 12L17 15.59Z\"/></svg>`\n};\n// **End system icons**\n\nconst systemLibrary: IconLibrary = {\n  name: 'system',\n  resolver: (name: keyof typeof icons) => {\n    if (name in icons) {\n      return `data:image/svg+xml,${encodeURIComponent(icons[name])}`;\n    }\n    return '';\n  }\n};\n\nexport default systemLibrary;\n"],
-  "mappings": ";AAWA,IAAM,QAAQ;AAAA,EACb,SAAS;AAAA;AAAA,EAET,SAAS;AAAA;AAAA,EAET,aAAa;AAAA;AAAA,EAEb,OAAO;AAAA;AAAA,EAEP,iBAAiB;AAAA;AAAA,EAEjB,SAAS;AAAA;AAAA,EAET,iBAAiB;AAAA;AAElB;AAGA,IAAM,gBAA6B;AAAA,EACjC,MAAM;AAAA,EACN,UAAU,CAAC,SAA6B;AACtC,QAAI,QAAQ,OAAO;AACjB,aAAO,sBAAsB,mBAAmB,MAAM,IAAI,CAAC,CAAC;AAAA,IAC9D;AACA,WAAO;AAAA,EACT;AACF;AAEA,IAAO,yBAAQ;",
+  "sourcesContent": ["/* eslint-disable */\nimport type { IconLibrary } from './library.js';\n\n//\n// System icons are a separate library to ensure they're always available, regardless of how the default icon library is\n// configured or if its icons resolve properly.\n//\n// All Synergy components must use the system library instead of the default library. For visual consistency, system\n// icons are a subset of Bootstrap Icons.\n//\n// **Start system icons**\nconst icons = {\n\t'caret': `\n\t\t<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill='currentColor'><path d=\"M16.59 8.295L12 12.875L7.41 8.295L6 9.705L12 15.705L18 9.705L16.59 8.295Z\"/></svg>`,\n\t'check': `\n\t\t<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill='currentColor'><path d=\"M8.79496 15.875L4.62496 11.705L3.20496 13.115L8.79496 18.705L20.795 6.705L19.385 5.295L8.79496 15.875Z\"/></svg>`,\n\t'eye-slash': `\n\t\t<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill='currentColor'><path d=\"M12.005 6.5C14.765 6.5 17.005 8.74 17.005 11.5C17.005 12.15 16.875 12.76 16.645 13.33L19.565 16.25C21.075 14.99 22.265 13.36 22.995 11.5C21.265 7.11 16.995 4 11.995 4C10.595 4 9.255 4.25 8.01501 4.7L10.175 6.86C10.745 6.63 11.355 6.5 12.005 6.5ZM2.005 3.77L4.745 6.51C3.085 7.8 1.785 9.52 1.005 11.5C2.735 15.89 7.005 19 12.005 19C13.555 19 15.035 18.7 16.385 18.16L16.805 18.58L19.735 21.5L21.005 20.23L3.275 2.5L2.005 3.77ZM7.53501 9.3L9.085 10.85C9.035 11.06 9.005 11.28 9.005 11.5C9.005 13.16 10.345 14.5 12.005 14.5C12.225 14.5 12.445 14.47 12.655 14.42L14.205 15.97C13.535 16.3 12.795 16.5 12.005 16.5C9.245 16.5 7.005 14.26 7.005 11.5C7.005 10.71 7.20501 9.97 7.53501 9.3ZM11.845 8.52L14.995 11.67L15.015 11.51C15.015 9.85 13.675 8.51 12.015 8.51L11.845 8.52Z\"/></svg>`,\n\t'eye': `\n\t\t<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill='currentColor'><path d=\"M12 4.5C7 4.5 2.73 7.61 1 12C2.73 16.39 7 19.5 12 19.5C17 19.5 21.27 16.39 23 12C21.27 7.61 17 4.5 12 4.5ZM12 17C9.24 17 7 14.76 7 12C7 9.24 9.24 7 12 7C14.76 7 17 9.24 17 12C17 14.76 14.76 17 12 17ZM12 9C10.34 9 9 10.34 9 12C9 13.66 10.34 15 12 15C13.66 15 15 13.66 15 12C15 10.34 13.66 9 12 9Z\"/></svg>`,\n\t'indeterminate': `\n\t\t<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill='currentColor'><path d=\"M19 13H5V11H19V13Z\"/></svg>`,\n\t'radio': `\n\t\t<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill='currentColor'><path d=\"M17 12C17 14.7614 14.7614 17 12 17C9.23858 17 7 14.7614 7 12C7 9.23858 9.23858 7 12 7C14.7614 7 17 9.23858 17 12Z\"/></svg>`,\n\t'x-circle-fill': `\n\t\t<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill='currentColor'><path d=\"M12 2C6.47 2 2 6.47 2 12C2 17.53 6.47 22 12 22C17.53 22 22 17.53 22 12C22 6.47 17.53 2 12 2ZM17 15.59L15.59 17L12 13.41L8.41 17L7 15.59L10.59 12L7 8.41L8.41 7L12 10.59L15.59 7L17 8.41L13.41 12L17 15.59Z\"/></svg>`,\n\t'x-lg': `\n\t\t<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill='currentColor'><path d=\"M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z\"/></svg>`\n};\n// **End system icons**\n\nconst systemLibrary: IconLibrary = {\n  name: 'system',\n  resolver: (name: keyof typeof icons) => {\n    if (name in icons) {\n      return `data:image/svg+xml,${encodeURIComponent(icons[name])}`;\n    }\n    return '';\n  }\n};\n\nexport default systemLibrary;\n"],
+  "mappings": ";AAWA,IAAM,QAAQ;AAAA,EACb,SAAS;AAAA;AAAA,EAET,SAAS;AAAA;AAAA,EAET,aAAa;AAAA;AAAA,EAEb,OAAO;AAAA;AAAA,EAEP,iBAAiB;AAAA;AAAA,EAEjB,SAAS;AAAA;AAAA,EAET,iBAAiB;AAAA;AAAA,EAEjB,QAAQ;AAAA;AAET;AAGA,IAAM,gBAA6B;AAAA,EACjC,MAAM;AAAA,EACN,UAAU,CAAC,SAA6B;AACtC,QAAI,QAAQ,OAAO;AACjB,aAAO,sBAAsB,mBAAmB,MAAM,IAAI,CAAC,CAAC;AAAA,IAC9D;AACA,WAAO;AAAA,EACT;AACF;AAEA,IAAO,yBAAQ;",
   "names": []
 }

package/dist/chunks/{chunk.6WUVZQ3H.js → chunk.GCYPKQBG.js}

@@ -1,6 +1,6 @@
 import {
   SynIconButton
-} from "./chunk.A7ZVGGIT.js";
+} from "./chunk.R3CMRBZ7.js";
 
 // src/components/icon-button/icon-button.ts
 var icon_button_default = SynIconButton;
@@ -9,4 +9,4 @@ SynIconButton.define("syn-icon-button");
 export {
   icon_button_default
 };
-//# sourceMappingURL=chunk.6WUVZQ3H.js.map
+//# sourceMappingURL=chunk.GCYPKQBG.js.map

package/dist/chunks/{chunk.EXMVZ32W.js → chunk.I4ZBEQUH.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.R6VNLE6N.js";
 import {
   SynergyElement
-} from "./chunk.S424QLI7.js";
+} from "./chunk.V52P6M55.js";
 
 // src/components/spinner/spinner.component.ts
 import { html } from "lit";
@@ -29,4 +29,4 @@ SynSpinner.styles = spinner_styles_default;
 export {
   SynSpinner
 };
-//# sourceMappingURL=chunk.EXMVZ32W.js.map
+//# sourceMappingURL=chunk.I4ZBEQUH.js.map

package/dist/chunks/{chunk.7LGURT5X.js → chunk.ITSSPNRO.js}

@@ -1,6 +1,6 @@
 import {
   SynInput
-} from "./chunk.5DHO22JT.js";
+} from "./chunk.S6PKR3AN.js";
 
 // src/components/input/input.ts
 var input_default = SynInput;
@@ -9,4 +9,4 @@ SynInput.define("syn-input");
 export {
   input_default
 };
-//# sourceMappingURL=chunk.7LGURT5X.js.map
+//# sourceMappingURL=chunk.ITSSPNRO.js.map

package/dist/chunks/{chunk.FVSP4LXX.js → chunk.IUC3AWAU.js}

@@ -1,27 +1,47 @@
 // src/components/button/button.custom.styles.ts
 import { css } from "lit";
 var button_custom_styles_default = css`
-.button:focus-visible {
+  .button:focus-visible {
     outline: var(--syn-focus-ring-color) solid var(--syn-focus-ring-width);
     outline-offset: var(--syn-focus-ring-width);
   }
 
   /*
- * Size modifiers
- */
+   * Adjustments for button label paddings
+   * @see https://github.com/synergy-design-system/synergy-design-system/issues/243
+   */
+  .button--has-prefix.button--small .button__label {
+    padding-inline-start: var(--syn-spacing-2x-small);
+  }
+
+  .button--has-suffix.button--small .button__label,
+  .button--caret.button--small .button__label {
+    padding-inline-end: var(--syn-spacing-2x-small);
+  }
+
+  .button--has-prefix.button--medium .button__label {
+    padding-inline-start: var(--syn-spacing-x-small);
+  }
+
+  .button--has-suffix.button--medium .button__label,
+  .button--caret.button--medium .button__label {
+    padding-inline-end: var(--syn-spacing-x-small);
+  }
 
+  /**
+   * Size modifiers
+   */
   .button.button--medium.button--has-label .button__label {
     font-size: var(--syn-font-size-medium);
-   } 
+  } 
 
   .button.button--large.button--has-label .button__label {
     font-size: var(--syn-font-size-large);
   }
 
   /*
- * Standard buttons
- */
-
+   * Standard buttons
+   */
   .button--filled.button--primary.button--disabled {
     background-color: var(--syn-color-neutral-400);
     border-color: var(--syn-color-neutral-400);
@@ -41,9 +61,8 @@ var button_custom_styles_default = css`
   }
 
   /*
- * Outline buttons
- */
-
+   * Outline buttons
+   */
   .button--outline.button--primary.button--disabled {
     background: none;
     border-color: var(--syn-color-neutral-400);
@@ -64,9 +83,8 @@ var button_custom_styles_default = css`
   }
 
   /*
- * Text buttons
- */
-  
+   * Text buttons
+   */
   .button--text:hover:not(.button--disabled) {
     color: var(--syn-color-primary-900);
   }
@@ -81,12 +99,12 @@ var button_custom_styles_default = css`
     color: var(--syn-color-neutral-400);
   }
 
-  /*
-* PADDING
- */
-   .button.button--small.button--has-label.button--has-prefix {
-      padding-inline-start: var(--syn-spacing-small);
-   }
+  /**
+   * Button spacing
+   */
+  .button.button--small.button--has-label.button--has-prefix {
+    padding-inline-start: var(--syn-spacing-small);
+  }
 
   .button.button--small.button--has-label.button--has-suffix {
     padding-inline-end: var(--syn-spacing-small);
@@ -99,7 +117,7 @@ var button_custom_styles_default = css`
 
   .button.button--medium.button--has-label.button--has-prefix {
     padding-inline-start: var(--syn-spacing-medium);
-   } 
+  } 
 
   .button.button--medium.button--has-label.button--has-suffix {
     padding-inline-end: var(--syn-spacing-medium);
@@ -112,27 +130,27 @@ var button_custom_styles_default = css`
 
   .button.button--large.button--has-label.button--has-prefix {
     padding-inline-start: var(--syn-spacing-large);
-   }
+  }
 
   .button.button--large.button--has-label.button--has-prefix .button__label {
-    padding-inline-start: var(--syn-spacing-medium);
-   }
+    padding-inline-start: var(--syn-spacing-small);
+  }
 
   .button.button--large.button--has-label.button--has-suffix {
     padding-inline-end: var(--syn-spacing-large);
   }
 
   .button.button--large.button--has-label.button--has-suffix .button__label {
-    padding-inline-end: var(--syn-spacing-medium);
+    padding-inline-end: var(--syn-spacing-small);
   }
 
   .button.button--large.button--has-prefix .button__prefix, 
   .button.button--large.button--has-suffix .button__suffix {
     font-size: var(--syn-font-size-2x-large);
   }
-  `;
+`;
 
 export {
   button_custom_styles_default
 };
-//# sourceMappingURL=chunk.FVSP4LXX.js.map
+//# sourceMappingURL=chunk.IUC3AWAU.js.map