@synergy-design-system/components 1.1.0 → 1.2.1

package/dist/custom-elements.json

@@ -4005,6 +4005,138 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/tag/tag.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SynTag",
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            },
+            {
+              "description": "The tag's content.",
+              "name": "content"
+            },
+            {
+              "description": "The tag's remove button, an `<syn-icon-button>`.",
+              "name": "remove-button"
+            },
+            {
+              "description": "The remove button's exported `base` part.",
+              "name": "remove-button__base"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The tag's content.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "dependencies",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{ 'syn-icon-button': SynIconButton }"
+            },
+            {
+              "kind": "field",
+              "name": "localize",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new LocalizeController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "'small' | 'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "description": "The tag's size.",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "removable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the tag removable and shows a remove button.",
+              "attribute": "removable"
+            },
+            {
+              "kind": "method",
+              "name": "handleRemoveClick",
+              "privacy": "private"
+            }
+          ],
+          "events": [
+            {
+              "description": "Emitted when the remove button is activated.",
+              "name": "syn-remove",
+              "reactName": "onSynRemove",
+              "eventName": "SynRemoveEvent"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "size",
+              "type": {
+                "text": "'small' | 'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "description": "The tag's size.",
+              "fieldName": "size"
+            },
+            {
+              "name": "removable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the tag removable and shows a remove button.",
+              "fieldName": "removable"
+            }
+          ],
+          "superclass": {
+            "name": "SynergyElement",
+            "module": "/src/internal/synergy-element.js"
+          },
+          "summary": "Tags are used as labels to organize things or to indicate a selection.",
+          "tagNameWithoutPrefix": "tag",
+          "tagName": "syn-tag",
+          "customElement": true,
+          "jsDoc": "/**\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 */",
+          "documentation": "https://synergy.style/components/tag",
+          "status": "stable",
+          "since": "2.0",
+          "dependencies": [
+            "syn-icon-button"
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SynTag",
+            "module": "components/tag/tag.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/textarea/textarea.js",
@@ -4764,7 +4896,7 @@
   "package": {
     "name": "@synergy-design-system/components",
     "description": "",
-    "version": "1.1.0",
+    "version": "1.2.1",
     "author": {
       "name": "SICK Global UX Foundation",
       "url": "https://www.sick.com"

package/dist/events/events.d.ts

@@ -6,3 +6,4 @@ export type * from './syn-focus.ts';
 export type * from './syn-input.ts';
 export type * from './syn-invalid.ts';
 export type * from './syn-load.ts';
+export type * from './syn-remove.ts';

package/dist/events/syn-remove.d.ts

@@ -0,0 +1,6 @@
+export type SynRemoveEvent = CustomEvent<Record<PropertyKey, never>>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'syn-remove': SynRemoveEvent;
+    }
+}

package/dist/synergy.d.ts

@@ -8,6 +8,7 @@ export { default as SynRadioButton } from './components/radio-button/radio-butto
 export { default as SynRadioGroup } from './components/radio-group/radio-group.js';
 export { default as SynRadio } from './components/radio/radio.js';
 export { default as SynSwitch } from './components/switch/switch.js';
+export { default as SynTag } from './components/tag/tag.js';
 export { default as SynTextarea } from './components/textarea/textarea.js';
 export * from './utilities/base-path.js';
 export * from './utilities/icon-library.js';

package/dist/synergy.js

@@ -1,93 +1,99 @@
-import {
-  textarea_default
-} from "./chunks/chunk.OEII5257.js";
 import {
   getFormControls,
   serialize
 } from "./chunks/chunk.Z3RZUTQU.js";
 import "./chunks/chunk.NKIYFJN2.js";
+import {
+  tag_default
+} from "./chunks/chunk.MTGT2EG5.js";
+import {
+  textarea_default
+} from "./chunks/chunk.NGM2Y5G5.js";
+import "./chunks/chunk.QAPZLSEL.js";
+import "./chunks/chunk.23HTU3YE.js";
+import "./chunks/chunk.YBIBWRKC.js";
 import {
   switch_default
-} from "./chunks/chunk.ICDHGCRE.js";
-import "./chunks/chunk.RAJNSJOZ.js";
+} from "./chunks/chunk.ZUOBN5Q3.js";
+import "./chunks/chunk.DS3H2UY3.js";
 import "./chunks/chunk.MNMITYTH.js";
 import "./chunks/chunk.AFEABUNX.js";
-import "./chunks/chunk.43IE6Z7Q.js";
-import "./chunks/chunk.23HTU3YE.js";
-import "./chunks/chunk.YBIBWRKC.js";
+import "./chunks/chunk.2D7KJSSX.js";
+import "./chunks/chunk.QHFGD6WW.js";
+import "./chunks/chunk.7W73A57K.js";
 import {
   radio_button_default
-} from "./chunks/chunk.JSGAT7FF.js";
-import "./chunks/chunk.7ODKEYK3.js";
-import "./chunks/chunk.OVVMSN4D.js";
+} from "./chunks/chunk.U5AOTLVK.js";
+import "./chunks/chunk.5ILVVLJF.js";
+import "./chunks/chunk.2V5UNOVJ.js";
 import {
   radio_group_default
-} from "./chunks/chunk.5D2VBXTP.js";
-import "./chunks/chunk.BBI3HWRM.js";
+} from "./chunks/chunk.MBXGNZ7I.js";
+import "./chunks/chunk.PTBOOLQE.js";
 import "./chunks/chunk.4I6M5V6O.js";
 import "./chunks/chunk.F4MRQLNL.js";
 import {
   input_default
-} from "./chunks/chunk.7LGURT5X.js";
-import "./chunks/chunk.5DHO22JT.js";
+} from "./chunks/chunk.ITSSPNRO.js";
+import "./chunks/chunk.S6PKR3AN.js";
 import "./chunks/chunk.OXUFFH57.js";
 import "./chunks/chunk.JHXCBOUD.js";
 import "./chunks/chunk.W46CFM2R.js";
 import {
   radio_default
-} from "./chunks/chunk.V3UXMJRA.js";
-import "./chunks/chunk.P3EPUBB3.js";
+} from "./chunks/chunk.UYF5MTOU.js";
+import "./chunks/chunk.OUVIH6QL.js";
 import "./chunks/chunk.JBYBQ5TQ.js";
 import "./chunks/chunk.V6VND4OF.js";
 import {
   icon_default
-} from "./chunks/chunk.UU5CELZK.js";
+} from "./chunks/chunk.R3S3AGUF.js";
 import {
   icon_button_default
-} from "./chunks/chunk.6WUVZQ3H.js";
-import "./chunks/chunk.A7ZVGGIT.js";
+} from "./chunks/chunk.GCYPKQBG.js";
+import "./chunks/chunk.R3CMRBZ7.js";
 import "./chunks/chunk.2FN5DTS6.js";
 import "./chunks/chunk.OJF7KL44.js";
 import {
-  button_group_default
-} from "./chunks/chunk.CIYOYCTY.js";
+  button_default
+} from "./chunks/chunk.LWB5LXJ5.js";
 import {
   checkbox_default
-} from "./chunks/chunk.QP2S2MDN.js";
-import "./chunks/chunk.OVS5OKTW.js";
+} from "./chunks/chunk.4YSX6HUH.js";
+import "./chunks/chunk.AMHJ56Z3.js";
 import "./chunks/chunk.WFAJR3FN.js";
 import "./chunks/chunk.4CBN5LPQ.js";
 import "./chunks/chunk.2XZKXVMR.js";
 import {
-  button_default
-} from "./chunks/chunk.L6QCO373.js";
-import "./chunks/chunk.JEEPLCYY.js";
-import "./chunks/chunk.EXMVZ32W.js";
+  button_group_default
+} from "./chunks/chunk.W5TOVAHB.js";
+import "./chunks/chunk.AP2QDLP7.js";
+import "./chunks/chunk.4ZURABYO.js";
+import "./chunks/chunk.MM2HMAE6.js";
+import "./chunks/chunk.I4ZBEQUH.js";
 import "./chunks/chunk.N2I6HVX3.js";
 import "./chunks/chunk.XGXFE6IF.js";
 import "./chunks/chunk.R6VNLE6N.js";
 import "./chunks/chunk.A3SKDWCT.js";
 import "./chunks/chunk.P2LNG2PZ.js";
-import "./chunks/chunk.7NADL2IT.js";
+import "./chunks/chunk.VM64SQGC.js";
 import "./chunks/chunk.VZ7S7YYN.js";
 import {
   registerIconLibrary,
   unregisterIconLibrary
-} from "./chunks/chunk.4XAK6MOQ.js";
+} from "./chunks/chunk.6PFQSQLU.js";
 import "./chunks/chunk.6C4JXZZN.js";
-import "./chunks/chunk.GNAJOKCJ.js";
+import "./chunks/chunk.EJXWL3JM.js";
 import "./chunks/chunk.RSONAU45.js";
 import "./chunks/chunk.PJO6TM3T.js";
 import {
   getBasePath,
   setBasePath
 } from "./chunks/chunk.C7624ITA.js";
-import "./chunks/chunk.YTS5TRJZ.js";
-import "./chunks/chunk.FVSP4LXX.js";
-import "./chunks/chunk.EEG4VWBU.js";
-import "./chunks/chunk.S424QLI7.js";
-import "./chunks/chunk.4ZURABYO.js";
+import "./chunks/chunk.V52P6M55.js";
+import "./chunks/chunk.VG7NKBOV.js";
 import "./chunks/chunk.O7USYXBT.js";
+import "./chunks/chunk.IUC3AWAU.js";
 import "./chunks/chunk.DJOAQ4JU.js";
 export {
   button_default as SynButton,
@@ -100,6 +106,7 @@ export {
   radio_button_default as SynRadioButton,
   radio_group_default as SynRadioGroup,
   switch_default as SynSwitch,
+  tag_default as SynTag,
   textarea_default as SynTextarea,
   getBasePath,
   getFormControls,

package/dist/utilities/icon-library.js

@@ -2,9 +2,9 @@ import "../chunks/chunk.NKIYFJN2.js";
 import {
   registerIconLibrary,
   unregisterIconLibrary
-} from "../chunks/chunk.4XAK6MOQ.js";
+} from "../chunks/chunk.6PFQSQLU.js";
 import "../chunks/chunk.6C4JXZZN.js";
-import "../chunks/chunk.GNAJOKCJ.js";
+import "../chunks/chunk.EJXWL3JM.js";
 import "../chunks/chunk.C7624ITA.js";
 import "../chunks/chunk.DJOAQ4JU.js";
 export {

package/dist/vscode.html-custom-data.json

@@ -682,6 +682,32 @@
         }
       ]
     },
+    {
+      "name": "syn-tag",
+      "description": "Tags are used as labels to organize things or to indicate a selection.\n---\n\n\n### **Events:**\n - **syn-remove** - Emitted when the remove button is activated.\n\n### **Slots:**\n - _default_ - The tag's content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **content** - The tag's content.\n- **remove-button** - The tag's remove button, an `<syn-icon-button>`.\n- **remove-button__base** - The remove button's exported `base` part.",
+      "attributes": [
+        {
+          "name": "size",
+          "description": "The tag's size.",
+          "values": [
+            { "name": "small" },
+            { "name": "medium" },
+            { "name": "large" }
+          ]
+        },
+        {
+          "name": "removable",
+          "description": "Makes the tag removable and shows a remove button.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://synergy.style/components/tag"
+        }
+      ]
+    },
     {
       "name": "syn-textarea",
       "description": "Textareas collect data from the user and allow multiple lines of text.\n---\n\n\n### **Events:**\n - **syn-blur** - Emitted when the control loses focus.\n- **syn-change** - Emitted when an alteration to the control's value is committed by the user.\n- **syn-focus** - Emitted when the control gains focus.\n- **syn-input** - Emitted when the control receives input.\n- **syn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the textarea.\n- **blur()** - Removes focus from the textarea.\n- **select()** - Selects all the text in the textarea.\n- **scrollPosition(position: _{ top?: number; left?: number }_): _{ top: number; left: number } | undefined_** - Gets or sets the textarea's scroll position.\n- **setSelectionRange(selectionStart: _number_, selectionEnd: _number_, selectionDirection: _'forward' | 'backward' | 'none'_)** - Sets the start and end positions of the text selection (0-based).\n- **setRangeText(replacement: _string_, start: _number_, end: _number_, selectMode: _'select' | 'start' | 'end' | 'preserve'_)** - Replaces a range of text with a new string.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - **label** - The textarea's label. Alternatively, you can use the `label` attribute.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **base** - The component's base wrapper.\n- **textarea** - The internal `<textarea>` control.",

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@synergy-design-system/components",
-  "version": "1.1.0",
+  "version": "1.2.1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -1436,6 +1436,53 @@
             ]
           }
         },
+        {
+          "name": "syn-tag",
+          "description": "Tags are used as labels to organize things or to indicate a selection.\n---\n\n\n### **Events:**\n - **syn-remove** - Emitted when the remove button is activated.\n\n### **Slots:**\n - _default_ - The tag's content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **content** - The tag's content.\n- **remove-button** - The tag's remove button, an `<syn-icon-button>`.\n- **remove-button__base** - The remove button's exported `base` part.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "size",
+              "description": "The tag's size.",
+              "value": {
+                "type": "'small' | 'medium' | 'large'",
+                "default": "'medium'"
+              }
+            },
+            {
+              "name": "removable",
+              "description": "Makes the tag removable and shows a remove button.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [{ "name": "", "description": "The tag's content." }],
+          "events": [
+            {
+              "name": "syn-remove",
+              "description": "Emitted when the remove button is activated."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "size",
+                "description": "The tag's size.",
+                "value": { "type": "'small' | 'medium' | 'large'" }
+              },
+              {
+                "name": "removable",
+                "description": "Makes the tag removable and shows a remove button.",
+                "value": { "type": "boolean" }
+              }
+            ],
+            "events": [
+              {
+                "name": "syn-remove",
+                "description": "Emitted when the remove button is activated."
+              }
+            ]
+          }
+        },
         {
           "name": "syn-textarea",
           "description": "Textareas collect data from the user and allow multiple lines of text.\n---\n\n\n### **Events:**\n - **syn-blur** - Emitted when the control loses focus.\n- **syn-change** - Emitted when an alteration to the control's value is committed by the user.\n- **syn-focus** - Emitted when the control gains focus.\n- **syn-input** - Emitted when the control receives input.\n- **syn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the textarea.\n- **blur()** - Removes focus from the textarea.\n- **select()** - Selects all the text in the textarea.\n- **scrollPosition(position: _{ top?: number; left?: number }_): _{ top: number; left: number } | undefined_** - Gets or sets the textarea's scroll position.\n- **setSelectionRange(selectionStart: _number_, selectionEnd: _number_, selectionDirection: _'forward' | 'backward' | 'none'_)** - Sets the start and end positions of the text selection (0-based).\n- **setRangeText(replacement: _string_, start: _number_, end: _number_, selectMode: _'select' | 'start' | 'end' | 'preserve'_)** - Replaces a range of text with a new string.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - **label** - The textarea's label. Alternatively, you can use the `label` attribute.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **base** - The component's base wrapper.\n- **textarea** - The internal `<textarea>` control.",

package/package.json

@@ -4,7 +4,7 @@
     "url": "https://www.sick.com"
   },
   "name": "@synergy-design-system/components",
-  "version": "1.1.0",
+  "version": "1.2.1",
   "description": "",
   "repository": {
     "type": "git",
@@ -89,8 +89,8 @@
     "vendorism": "github:mariohamann/vendorism",
     "vue-tsc": "^1.8.24",
     "@synergy-design-system/eslint-config-syn": "0.1.0",
-    "@synergy-design-system/tokens": "1.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.1.0"
   },
   "release": {
     "branches": [
@@ -168,6 +168,7 @@
     "lint:css": "stylelint \"src/**/*.{css,js,ts}\"",
     "lint:js": "eslint src",
     "lint": "pnpm run /^lint:.*/",
+    "format.eslint": "pnpm lint:js --fix",
     "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.FVSP4LXX.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/components/button/button.custom.styles.ts"],
-  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n.button:focus-visible {\n    outline: var(--syn-focus-ring-color) solid var(--syn-focus-ring-width);\n    outline-offset: var(--syn-focus-ring-width);\n  }\n\n  /*\n * Size modifiers\n */\n\n  .button.button--medium.button--has-label .button__label {\n    font-size: var(--syn-font-size-medium);\n   } \n\n  .button.button--large.button--has-label .button__label {\n    font-size: var(--syn-font-size-large);\n  }\n\n  /*\n * Standard buttons\n */\n\n  .button--filled.button--primary.button--disabled {\n    background-color: var(--syn-color-neutral-400);\n    border-color: var(--syn-color-neutral-400);\n    color: var(--syn-color-neutral-600);\n  }\n\n  .button--filled.button--primary:hover:not(.button--disabled) {\n    background-color: var(--syn-color-primary-900);\n    border-color: var(--syn-color-primary-900);\n    color: var(--syn-color-neutral-0);\n  }\n\n  .button--filled.button--primary:active:not(.button--disabled) {\n    background-color: var(--syn-color-primary-950);\n    border-color: var(--syn-color-primary-950);\n    color: var(--syn-color-neutral-0);\n  }\n\n  /*\n * Outline buttons\n */\n\n  .button--outline.button--primary.button--disabled {\n    background: none;\n    border-color: var(--syn-color-neutral-400);\n    color: var(--syn-color-neutral-400);\n  }\n\n  .button--outline.button--primary:hover:not(.button--disabled),\n  .button--outline.button--primary.button--checked:not(.button--disabled) {\n    background: none;\n    border-color: var(--syn-color-primary-900);\n    color: var(--syn-color-primary-900);\n  }\n\n  .button--outline.button--primary:active:not(.button--disabled) {\n    background: inherit;\n    border-color:  var(--syn-color-primary-950);\n    color:  var(--syn-color-primary-950);\n  }\n\n  /*\n * Text buttons\n */\n  \n  .button--text:hover:not(.button--disabled) {\n    color: var(--syn-color-primary-900);\n  }\n\n  .button--text.button--primary:active:not(.button--disabled) {\n    background: inherit;\n    border-color:  none;\n    color:  var(--syn-color-primary-950);\n  }\n\n  .button--text.button--primary.button--disabled {\n    color: var(--syn-color-neutral-400);\n  }\n\n  /*\n* PADDING\n */\n   .button.button--small.button--has-label.button--has-prefix {\n      padding-inline-start: var(--syn-spacing-small);\n   }\n\n  .button.button--small.button--has-label.button--has-suffix {\n    padding-inline-end: var(--syn-spacing-small);\n  }\n\n  .button.button--small.button--has-prefix .button__prefix, \n  .button.button--small.button--has-suffix .button__suffix {\n    font-size: var(--syn-spacing-medium);\n  }\n\n  .button.button--medium.button--has-label.button--has-prefix {\n    padding-inline-start: var(--syn-spacing-medium);\n   } \n\n  .button.button--medium.button--has-label.button--has-suffix {\n    padding-inline-end: var(--syn-spacing-medium);\n  }\n\n  .button.button--medium.button--has-prefix .button__prefix, \n  .button.button--medium.button--has-suffix .button__suffix {\n    font-size: var(--syn-spacing-large);\n  }\n\n  .button.button--large.button--has-label.button--has-prefix {\n    padding-inline-start: var(--syn-spacing-large);\n   }\n\n  .button.button--large.button--has-label.button--has-prefix .button__label {\n    padding-inline-start: var(--syn-spacing-medium);\n   }\n\n  .button.button--large.button--has-label.button--has-suffix {\n    padding-inline-end: var(--syn-spacing-large);\n  }\n\n  .button.button--large.button--has-label.button--has-suffix .button__label {\n    padding-inline-end: var(--syn-spacing-medium);\n  }\n\n  .button.button--large.button--has-prefix .button__prefix, \n  .button.button--large.button--has-suffix .button__suffix {\n    font-size: var(--syn-font-size-2x-large);\n  }\n  `;\n"],
-  "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,+BAAQ;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;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": []
-}