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

package/dist/chunks/{chunk.G3PDKNFK.js → chunk.6CFDQNJT.js}

@@ -1,6 +1,6 @@
 import {
   SynSpinner
-} from "./chunk.5ZMQBOV3.js";
+} from "./chunk.SGZ5ADPY.js";
 import {
   HasSlotController
 } from "./chunk.XGXFE6IF.js";
@@ -13,14 +13,14 @@ import {
 } from "./chunk.WDCAHRYG.js";
 import {
   button_styles_default
-} from "./chunk.P22LQI5J.js";
+} from "./chunk.OZSASB66.js";
 import {
   SynIcon,
   watch
-} from "./chunk.DI6S4YNU.js";
+} from "./chunk.IZS6SARK.js";
 import {
   SynergyElement
-} from "./chunk.53ZDJY4Q.js";
+} from "./chunk.YOW3IJVJ.js";
 import {
   __decorateClass
 } from "./chunk.DJOAQ4JU.js";
@@ -49,7 +49,7 @@ var SynButton = class extends SynergyElement {
     this.hasFocus = false;
     this.invalid = false;
     this.title = "";
-    this.variant = "default";
+    this.variant = "filled";
     this.size = "medium";
     this.caret = false;
     this.disabled = false;
@@ -164,7 +164,7 @@ var SynButton = class extends SynergyElement {
       "button--disabled": this.disabled,
       "button--focused": this.hasFocus,
       "button--loading": this.loading,
-      "button--default": this.variant === "default",
+      "button--filled": this.variant === "filled",
       "button--outline": this.variant === "outline",
       "button--rtl": this.localize.dir() === "rtl",
       "button--has-label": this.hasSlotController.test("[default]"),
@@ -275,4 +275,4 @@ __decorateClass([
 export {
   SynButton
 };
-//# sourceMappingURL=chunk.G3PDKNFK.js.map
+//# sourceMappingURL=chunk.6CFDQNJT.js.map

package/dist/chunks/chunk.6CFDQNJT.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/button/button.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 { FormControlController, validValidityState } from '../../internal/form.js';\nimport { HasSlotController } from '../../internal/slot.js';\nimport { html, literal } from 'lit/static-html.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport { property, query, state } from 'lit/decorators.js';\nimport { watch } from '../../internal/watch.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport SynIcon from '../icon/icon.component.js';\nimport SynSpinner from '../spinner/spinner.component.js';\nimport styles from './button.styles.js';\nimport type { CSSResultGroup } from 'lit';\nimport type { SynergyFormControl } from '../../internal/synergy-element.js';\n\n/**\n * @summary Buttons represent actions that are available to the user.\n * @documentation https://synergy.style/components/button\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon\n * @dependency syn-spinner\n *\n * @event syn-blur - Emitted when the button loses focus.\n * @event syn-focus - Emitted when the button gains focus.\n * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @slot - The button's label.\n * @slot prefix - A presentational prefix icon or similar element.\n * @slot suffix - A presentational suffix icon or similar element.\n *\n * @csspart base - The component's base wrapper.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart label - The button's label.\n * @csspart suffix - The container that wraps the suffix.\n * @csspart caret - The button's caret icon, an `<syn-icon>` element.\n * @csspart spinner - The spinner that shows when the button is in the loading state.\n */\nexport default class SynButton extends SynergyElement implements SynergyFormControl {\n  static styles: CSSResultGroup = styles;\n  static dependencies = {\n    'syn-icon': SynIcon,\n    'syn-spinner': SynSpinner\n  };\n\n  private readonly formControlController = new FormControlController(this, {\n    form: input => {\n      // Buttons support a form attribute that points to an arbitrary form, so if this attribute is set we need to query\n      // the form from the same root using its id\n      if (input.hasAttribute('form')) {\n        const doc = input.getRootNode() as Document | ShadowRoot;\n        const formId = input.getAttribute('form')!;\n        return doc.getElementById(formId) as HTMLFormElement;\n      }\n\n      // Fall back to the closest containing form\n      return input.closest('form');\n    },\n    assumeInteractionOn: ['click']\n  });\n  private readonly hasSlotController = new HasSlotController(this, '[default]', 'prefix', 'suffix');\n  private readonly localize = new LocalizeController(this);\n\n  @query('.button') button: HTMLButtonElement | HTMLLinkElement;\n\n  @state() private hasFocus = false;\n  @state() invalid = false;\n  @property() title = ''; // make reactive to pass through\n\n  /** The button's theme variant. */\n  @property({ reflect: true }) variant: 'filled' | 'outline' | 'text' = 'filled';\n\n  /** The button's size. */\n  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Draws the button with a caret. Used to indicate that the button triggers a dropdown menu or similar behavior. */\n  @property({ type: Boolean, reflect: true }) caret = false;\n\n  /** Disables the button. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Draws the button in a loading state. */\n  @property({ type: Boolean, reflect: true }) loading = false;\n\n  /**\n   * The type of button. Note that the default value is `button` instead of `submit`, which is opposite of how native\n   * `<button>` elements behave. When the type is `submit`, the button will submit the surrounding form.\n   */\n  @property() type: 'button' | 'submit' | 'reset' = 'button';\n\n  /**\n   * The name of the button, submitted as a name/value pair with form data, but only when this button is the submitter.\n   * This attribute is ignored when `href` is present.\n   */\n  @property() name = '';\n\n  /**\n   * The value of the button, submitted as a pair with the button's name as part of the form data, but only when this\n   * button is the submitter. This attribute is ignored when `href` is present.\n   */\n  @property() value = '';\n\n  /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */\n  @property() href = '';\n\n  /** Tells the browser where to open the link. Only used when `href` is present. */\n  @property() target: '_blank' | '_parent' | '_self' | '_top';\n\n  /**\n   * When using `href`, this attribute will map to the underlying link's `rel` attribute. Unlike regular links, the\n   * default is `noreferrer noopener` to prevent security exploits. However, if you're using `target` to point to a\n   * specific tab/window, this will prevent that from working correctly. You can remove or change the default value by\n   * setting the attribute to an empty string or a value of your choice, respectively.\n   */\n  @property() rel = 'noreferrer noopener';\n\n  /** Tells the browser to download the linked file as this filename. Only used when `href` is present. */\n  @property() download?: string;\n\n  /**\n   * The \"form owner\" to associate the button with. If omitted, the closest containing form will be used instead. The\n   * value of this attribute must be an id of a form in the same document or shadow root as the button.\n   */\n  @property() form: string;\n\n  /** Used to override the form owner's `action` attribute. */\n  @property({ attribute: 'formaction' }) formAction: string;\n\n  /** Used to override the form owner's `enctype` attribute.  */\n  @property({ attribute: 'formenctype' })\n  formEnctype: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain';\n\n  /** Used to override the form owner's `method` attribute.  */\n  @property({ attribute: 'formmethod' }) formMethod: 'post' | 'get';\n\n  /** Used to override the form owner's `novalidate` attribute. */\n  @property({ attribute: 'formnovalidate', type: Boolean }) formNoValidate: boolean;\n\n  /** Used to override the form owner's `target` attribute. */\n  @property({ attribute: 'formtarget' }) formTarget: '_self' | '_blank' | '_parent' | '_top' | string;\n\n  /** Gets the validity state object */\n  get validity() {\n    if (this.isButton()) {\n      return (this.button as HTMLButtonElement).validity;\n    }\n\n    return validValidityState;\n  }\n\n  /** Gets the validation message */\n  get validationMessage() {\n    if (this.isButton()) {\n      return (this.button as HTMLButtonElement).validationMessage;\n    }\n\n    return '';\n  }\n\n  firstUpdated() {\n    if (this.isButton()) {\n      this.formControlController.updateValidity();\n    }\n  }\n\n  private handleBlur() {\n    this.hasFocus = false;\n    this.emit('syn-blur');\n  }\n\n  private handleFocus() {\n    this.hasFocus = true;\n    this.emit('syn-focus');\n  }\n\n  private handleClick() {\n    if (this.type === 'submit') {\n      this.formControlController.submit(this);\n    }\n\n    if (this.type === 'reset') {\n      this.formControlController.reset(this);\n    }\n  }\n\n  private handleInvalid(event: Event) {\n    this.formControlController.setValidity(false);\n    this.formControlController.emitInvalidEvent(event);\n  }\n\n  private isButton() {\n    return this.href ? false : true;\n  }\n\n  private isLink() {\n    return this.href ? true : false;\n  }\n\n  @watch('disabled', { waitUntilFirstUpdate: true })\n  handleDisabledChange() {\n    if (this.isButton()) {\n      // Disabled form controls are always valid\n      this.formControlController.setValidity(this.disabled);\n    }\n  }\n\n  /** Simulates a click on the button. */\n  click() {\n    this.button.click();\n  }\n\n  /** Sets focus on the button. */\n  focus(options?: FocusOptions) {\n    this.button.focus(options);\n  }\n\n  /** Removes focus from the button. */\n  blur() {\n    this.button.blur();\n  }\n\n  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */\n  checkValidity() {\n    if (this.isButton()) {\n      return (this.button as HTMLButtonElement).checkValidity();\n    }\n\n    return true;\n  }\n\n  /** Gets the associated form, if one exists. */\n  getForm(): HTMLFormElement | null {\n    return this.formControlController.getForm();\n  }\n\n  /** Checks for validity and shows the browser's validation message if the control is invalid. */\n  reportValidity() {\n    if (this.isButton()) {\n      return (this.button as HTMLButtonElement).reportValidity();\n    }\n\n    return true;\n  }\n\n  /** Sets a custom validation message. Pass an empty string to restore validity. */\n  setCustomValidity(message: string) {\n    if (this.isButton()) {\n      (this.button as HTMLButtonElement).setCustomValidity(message);\n      this.formControlController.updateValidity();\n    }\n  }\n\n  render() {\n    const isLink = this.isLink();\n    const tag = isLink ? literal`a` : literal`button`;\n\n    /* eslint-disable lit/no-invalid-html */\n    /* eslint-disable lit/binding-positions */\n    return html`\n      <${tag}\n        part=\"base\"\n        class=${classMap({\n          button: true,\n          'button--primary': true,\n          'button--text': this.variant === 'text',\n          'button--small': this.size === 'small',\n          'button--medium': this.size === 'medium',\n          'button--large': this.size === 'large',\n          'button--caret': this.caret,\n          'button--disabled': this.disabled,\n          'button--focused': this.hasFocus,\n          'button--loading': this.loading,\n          'button--filled': this.variant === 'filled',\n          'button--outline': this.variant === 'outline',\n          'button--rtl': this.localize.dir() === 'rtl',\n          'button--has-label': this.hasSlotController.test('[default]'),\n          'button--has-prefix': this.hasSlotController.test('prefix'),\n          'button--has-suffix': this.hasSlotController.test('suffix')\n        })}\n        ?disabled=${ifDefined(isLink ? undefined : this.disabled)}\n        type=${ifDefined(isLink ? undefined : this.type)}\n        title=${this.title /* An empty title prevents browser validation tooltips from appearing on hover */}\n        name=${ifDefined(isLink ? undefined : this.name)}\n        value=${ifDefined(isLink ? undefined : this.value)}\n        href=${ifDefined(isLink ? this.href : undefined)}\n        target=${ifDefined(isLink ? this.target : undefined)}\n        download=${ifDefined(isLink ? this.download : undefined)}\n        rel=${ifDefined(isLink ? this.rel : undefined)}\n        role=${ifDefined(isLink ? undefined : 'button')}\n        aria-disabled=${this.disabled ? 'true' : 'false'}\n        tabindex=${this.disabled ? '-1' : '0'}\n        @blur=${this.handleBlur}\n        @focus=${this.handleFocus}\n        @invalid=${this.isButton() ? this.handleInvalid : null}\n        @click=${this.handleClick}\n      >\n        <slot name=\"prefix\" part=\"prefix\" class=\"button__prefix\"></slot>\n        <slot part=\"label\" class=\"button__label\"></slot>\n        <slot name=\"suffix\" part=\"suffix\" class=\"button__suffix\"></slot>\n        ${\n          this.caret ? html` <syn-icon part=\"caret\" class=\"button__caret\" library=\"system\" name=\"caret\"></syn-icon> ` : ''\n        }\n        ${this.loading ? html`<syn-spinner part=\"spinner\"></syn-spinner>` : ''}\n      </${tag}>\n    `;\n    /* eslint-enable lit/no-invalid-html */\n    /* eslint-enable lit/binding-positions */\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/chunks/{chunk.5SUEJSIW.js → chunk.DYPYZ53B.js}

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

package/dist/chunks/{chunk.4SJKXOCV.js → chunk.GRZ3TSGB.js}

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

package/dist/chunks/{chunk.B7XEALID.js → chunk.H6VZTJD6.js}

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

package/dist/chunks/{chunk.DI6S4YNU.js → chunk.IZS6SARK.js}

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

package/dist/chunks/chunk.MQ3KYTNU.js

@@ -0,0 +1,138 @@
+// src/components/button/button.custom.styles.ts
+import { css } from "lit";
+var button_custom_styles_default = css`
+.button:focus-visible {
+    outline: var(--syn-focus-ring-color) solid 2px;
+    outline-offset: 2px;
+  }
+
+  /*
+ * 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
+ */
+
+  .button--filled.button--primary.button--disabled {
+    background-color: var(--syn-color-neutral-400);
+    border-color: var(--syn-color-neutral-400);
+    color: var(--syn-color-neutral-600);
+  }
+
+  .button--filled.button--primary:hover:not(.button--disabled) {
+    background-color: var(--syn-color-primary-900);
+    border-color: var(--syn-color-primary-900);
+    color: var(--syn-color-neutral-0);
+  }
+
+  .button--filled.button--primary:active:not(.button--disabled) {
+    background-color: var(--syn-color-primary-950);
+    border-color: inherit;
+    color: var(--syn-color-neutral-0);
+  }
+
+  /*
+ * Outline buttons
+ */
+
+  .button--outline.button--primary.button--disabled {
+    background: none;
+    border-color: var(--syn-color-neutral-400);
+    color: var(--syn-color-neutral-400);
+  }
+
+  .button--outline.button--primary:hover:not(.button--disabled),
+  .button--outline.button--primary.button--checked:not(.button--disabled) {
+    background: none;
+    border-color: var(--syn-color-primary-900);
+    color: var(--syn-color-primary-900);
+  }
+
+  .button--outline.button--primary:active:not(.button--disabled) {
+    background: inherit;
+    border-color:  var(--syn-color-primary-950);
+    color:  var(--syn-color-primary-950);
+  }
+
+  /*
+ * Text buttons
+ */
+  
+  .button--text:hover:not(.button--disabled) {
+    color: var(--syn-color-primary-900);
+  }
+
+  .button--text.button--primary:active:not(.button--disabled) {
+    background: inherit;
+    border-color:  none;
+    color:  var(--syn-color-primary-950);
+  }
+
+  .button--text.button--primary.button--disabled {
+    color: var(--syn-color-neutral-400);
+  }
+
+  /*
+* PADDING
+ */
+   .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);
+  }
+
+  .button.button--small.button--has-prefix .button__prefix, 
+  .button.button--small.button--has-suffix .button__suffix {
+    font-size: var(--syn-spacing-medium);
+  }
+
+  .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);
+  }
+
+  .button.button--medium.button--has-prefix .button__prefix, 
+  .button.button--medium.button--has-suffix .button__suffix {
+    font-size: var(--syn-spacing-large);
+  }
+
+  .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);
+   }
+
+  .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);
+  }
+
+  .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.MQ3KYTNU.js.map

package/dist/chunks/chunk.MQ3KYTNU.js.map

@@ -0,0 +1,7 @@
+{
+  "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 2px;\n    outline-offset: 2px;\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: inherit;\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": []
+}

package/dist/chunks/{chunk.P22LQI5J.js → chunk.OZSASB66.js}

@@ -1,6 +1,6 @@
 import {
   button_custom_styles_default
-} from "./chunk.DREO4ZTN.js";
+} from "./chunk.MQ3KYTNU.js";
 import {
   component_styles_default
 } from "./chunk.O7USYXBT.js";
@@ -85,19 +85,19 @@ var button_styles_default = css`
    */
 
   /* Primary */
-  .button--default.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--default.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--default.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);
@@ -343,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 {
@@ -373,4 +373,4 @@ var button_styles_default = css`
 export {
   button_styles_default
 };
-//# sourceMappingURL=chunk.P22LQI5J.js.map
+//# sourceMappingURL=chunk.OZSASB66.js.map

package/dist/chunks/chunk.OZSASB66.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/button/button.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';\nimport customStyles from './button.custom.styles.js';\n\nexport default css`\n\t/* stylelint-disable */\n  ${componentStyles}\n\n  :host {\n    display: inline-block;\n    position: relative;\n    width: auto;\n    cursor: pointer;\n  }\n\n  .button {\n    display: inline-flex;\n    align-items: stretch;\n    justify-content: center;\n    width: 100%;\n    border-style: solid;\n    border-width: var(--syn-input-border-width);\n    font-family: var(--syn-input-font-family);\n    font-weight: var(--syn-font-weight-semibold);\n    text-decoration: none;\n    user-select: none;\n    -webkit-user-select: none;\n    white-space: nowrap;\n    vertical-align: middle;\n    padding: 0;\n    transition:\n      var(--syn-transition-x-fast) background-color,\n      var(--syn-transition-x-fast) color,\n      var(--syn-transition-x-fast) border,\n      var(--syn-transition-x-fast) box-shadow;\n    cursor: inherit;\n  }\n\n  .button::-moz-focus-inner {\n    border: 0;\n  }\n\n  .button:focus {\n    outline: none;\n  }\n\n  .button:focus-visible {\n    outline: var(--syn-focus-ring);\n    outline-offset: var(--syn-focus-ring-offset);\n  }\n\n  .button--disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  /* When disabled, prevent mouse events from bubbling up from children */\n  .button--disabled * {\n    pointer-events: none;\n  }\n\n  .button__prefix,\n  .button__suffix {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    pointer-events: none;\n  }\n\n  .button__label {\n    display: inline-block;\n  }\n\n  .button__label::slotted(syn-icon) {\n    vertical-align: -2px;\n  }\n\n  /*\n   * Standard buttons\n   */\n\n  /* Primary */\n  .button--filled.button--primary {\n    background-color: var(--syn-color-primary-600);\n    border-color: var(--syn-color-primary-600);\n    color: var(--syn-color-neutral-0);\n  }\n\n  .button--filled.button--primary:hover:not(.button--disabled) {\n    background-color: var(--syn-color-primary-500);\n    border-color: var(--syn-color-primary-500);\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-600);\n    border-color: var(--syn-color-primary-600);\n    color: var(--syn-color-neutral-0);\n  }\n\n  /*\n   * Outline buttons\n   */\n\n  .button--outline {\n    background: none;\n    border: solid 1px;\n  }\n\n  /* Primary */\n  .button--outline.button--primary {\n    border-color: var(--syn-color-primary-600);\n    color: var(--syn-color-primary-600);\n  }\n\n  .button--outline.button--primary:hover:not(.button--disabled),\n  .button--outline.button--primary.button--checked:not(.button--disabled) {\n    background-color: var(--syn-color-primary-600);\n    color: var(--syn-color-neutral-0);\n  }\n\n  .button--outline.button--primary:active:not(.button--disabled) {\n    border-color: var(--syn-color-primary-700);\n    background-color: var(--syn-color-primary-700);\n    color: var(--syn-color-neutral-0);\n  }\n\n  /*\n   * Text buttons\n   */\n\n  .button--text {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--syn-color-primary-600);\n  }\n\n  .button--text:hover:not(.button--disabled) {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--syn-color-primary-500);\n  }\n\n  .button--text:focus-visible:not(.button--disabled) {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--syn-color-primary-500);\n  }\n\n  .button--text:active:not(.button--disabled) {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--syn-color-primary-700);\n  }\n\n  /*\n   * Size modifiers\n   */\n\n  .button--small {\n    height: auto;\n    min-height: var(--syn-input-height-small);\n    font-size: var(--syn-button-font-size-small);\n    line-height: calc(var(--syn-input-height-small) - var(--syn-input-border-width) * 2);\n    border-radius: var(--syn-input-border-radius-small);\n  }\n\n  .button--medium {\n    height: auto;\n    min-height: var(--syn-input-height-medium);\n    font-size: var(--syn-button-font-size-medium);\n    line-height: calc(var(--syn-input-height-medium) - var(--syn-input-border-width) * 2);\n    border-radius: var(--syn-input-border-radius-medium);\n  }\n\n  .button--large {\n    height: auto;\n    min-height: var(--syn-input-height-large);\n    font-size: var(--syn-button-font-size-large);\n    line-height: calc(var(--syn-input-height-large) - var(--syn-input-border-width) * 2);\n    border-radius: var(--syn-input-border-radius-large);\n  }\n\n  /*\n   * Caret modifier\n   */\n\n  .button--caret .button__suffix {\n    display: none;\n  }\n\n  .button--caret .button__caret {\n    height: auto;\n  }\n\n  /*\n   * Loading modifier\n   */\n\n  .button--loading {\n    position: relative;\n    cursor: wait;\n  }\n\n  .button--loading .button__prefix,\n  .button--loading .button__label,\n  .button--loading .button__suffix,\n  .button--loading .button__caret {\n    visibility: hidden;\n  }\n\n  .button--loading syn-spinner {\n    --indicator-color: currentColor;\n    position: absolute;\n    font-size: 1em;\n    height: 1em;\n    width: 1em;\n    top: calc(50% - 0.5em);\n    left: calc(50% - 0.5em);\n  }\n\n  /*\n   * Badges\n   */\n\n  .button ::slotted(syn-badge) {\n    position: absolute;\n    top: 0;\n    right: 0;\n    translate: 50% -50%;\n    pointer-events: none;\n  }\n\n  .button--rtl ::slotted(syn-badge) {\n    right: auto;\n    left: 0;\n    translate: -50% -50%;\n  }\n\n  /*\n   * Button spacing\n   */\n\n  .button--has-label.button--small .button__label {\n    padding: 0 var(--syn-spacing-small);\n  }\n\n  .button--has-label.button--medium .button__label {\n    padding: 0 var(--syn-spacing-medium);\n  }\n\n  .button--has-label.button--large .button__label {\n    padding: 0 var(--syn-spacing-large);\n  }\n\n  .button--has-prefix.button--small {\n    padding-inline-start: var(--syn-spacing-x-small);\n  }\n\n  .button--has-prefix.button--small .button__label {\n    padding-inline-start: var(--syn-spacing-x-small);\n  }\n\n  .button--has-prefix.button--medium {\n    padding-inline-start: var(--syn-spacing-small);\n  }\n\n  .button--has-prefix.button--medium .button__label {\n    padding-inline-start: var(--syn-spacing-small);\n  }\n\n  .button--has-prefix.button--large {\n    padding-inline-start: var(--syn-spacing-small);\n  }\n\n  .button--has-prefix.button--large .button__label {\n    padding-inline-start: var(--syn-spacing-small);\n  }\n\n  .button--has-suffix.button--small,\n  .button--caret.button--small {\n    padding-inline-end: var(--syn-spacing-x-small);\n  }\n\n  .button--has-suffix.button--small .button__label,\n  .button--caret.button--small .button__label {\n    padding-inline-end: var(--syn-spacing-x-small);\n  }\n\n  .button--has-suffix.button--medium,\n  .button--caret.button--medium {\n    padding-inline-end: var(--syn-spacing-small);\n  }\n\n  .button--has-suffix.button--medium .button__label,\n  .button--caret.button--medium .button__label {\n    padding-inline-end: var(--syn-spacing-small);\n  }\n\n  .button--has-suffix.button--large,\n  .button--caret.button--large {\n    padding-inline-end: var(--syn-spacing-small);\n  }\n\n  .button--has-suffix.button--large .button__label,\n  .button--caret.button--large .button__label {\n    padding-inline-end: var(--syn-spacing-small);\n  }\n\n  /*\n   * Button groups support a variety of button types (e.g. buttons with tooltips, buttons as dropdown triggers, etc.).\n   * This means buttons aren't always direct descendants of the button group, thus we can't target them with the\n   * ::slotted selector. To work around this, the button group component does some magic to add these special classes to\n   * buttons and we style them here instead.\n   */\n\n  :host(.syn-button-group__button--first:not(.syn-button-group__button--last)) .button {\n    border-start-end-radius: 0;\n    border-end-end-radius: 0;\n  }\n\n  :host(.syn-button-group__button--inner) .button {\n    border-radius: 0;\n  }\n\n  :host(.syn-button-group__button--last:not(.syn-button-group__button--first)) .button {\n    border-start-start-radius: 0;\n    border-end-start-radius: 0;\n  }\n\n  /* All except the first */\n  :host(.syn-button-group__button:not(.syn-button-group__button--first)) {\n    margin-inline-start: calc(-1 * var(--syn-input-border-width));\n  }\n\n  /* Add a visual separator between solid buttons */\n  :host(\n      .syn-button-group__button:not(\n          .syn-button-group__button--first,\n          .syn-button-group__button--radio,\n          [variant='filled']\n        ):not(:hover)\n    )\n    .button:after {\n    content: '';\n    position: absolute;\n    top: 0;\n    inset-inline-start: 0;\n    bottom: 0;\n    border-left: solid 1px rgb(128 128 128 / 33%);\n    mix-blend-mode: multiply;\n  }\n\n  /* Bump hovered, focused, and checked buttons up so their focus ring isn't clipped */\n  :host(.syn-button-group__button--hover) {\n    z-index: 1;\n  }\n\n  /* Focus and checked are always on top */\n  :host(.syn-button-group__button--focus),\n  :host(.syn-button-group__button[checked]) {\n    z-index: 2;\n  }\n\n  ${customStyles}\n`;\n\n"],
+  "mappings": ";;;;;;;;AAMA,SAAS,WAAW;AAIpB,IAAO,wBAAQ;AAAA;AAAA,IAEX,wBAAe;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;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;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,IAsWf,4BAAY;AAAA;",
+  "names": []
+}

package/dist/chunks/{chunk.5ZMQBOV3.js → chunk.SGZ5ADPY.js}

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

package/dist/chunks/{chunk.53ZDJY4Q.js → chunk.YOW3IJVJ.js}

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

package/dist/chunks/{chunk.53ZDJY4Q.js.map → chunk.YOW3IJVJ.js.map}

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

package/dist/components/button/button.component.d.ts

@@ -41,7 +41,7 @@ export default class SynButton extends SynergyElement implements SynergyFormCont
     invalid: boolean;
     title: string;
     /** The button's theme variant. */
-    variant: 'default' | 'outline' | 'text';
+    variant: 'filled' | 'outline' | 'text';
     /** The button's size. */
     size: 'small' | 'medium' | 'large';
     /** Draws the button with a caret. Used to indicate that the button triggers a dropdown menu or similar behavior. */

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

@@ -1,16 +1,16 @@
 import {
   SynButton
-} from "../../chunks/chunk.G3PDKNFK.js";
-import "../../chunks/chunk.5ZMQBOV3.js";
+} from "../../chunks/chunk.6CFDQNJT.js";
+import "../../chunks/chunk.SGZ5ADPY.js";
 import "../../chunks/chunk.N2I6HVX3.js";
 import "../../chunks/chunk.XGXFE6IF.js";
 import "../../chunks/chunk.R6VNLE6N.js";
 import "../../chunks/chunk.A3SKDWCT.js";
 import "../../chunks/chunk.WDCAHRYG.js";
-import "../../chunks/chunk.P22LQI5J.js";
-import "../../chunks/chunk.DREO4ZTN.js";
-import "../../chunks/chunk.DI6S4YNU.js";
-import "../../chunks/chunk.53ZDJY4Q.js";
+import "../../chunks/chunk.OZSASB66.js";
+import "../../chunks/chunk.MQ3KYTNU.js";
+import "../../chunks/chunk.IZS6SARK.js";
+import "../../chunks/chunk.YOW3IJVJ.js";
 import "../../chunks/chunk.BREU4ILT.js";
 import "../../chunks/chunk.5OIEI73E.js";
 import "../../chunks/chunk.6C4JXZZN.js";

package/dist/components/button/button.custom.styles.js

@@ -1,6 +1,6 @@
 import {
   button_custom_styles_default
-} from "../../chunks/chunk.DREO4ZTN.js";
+} from "../../chunks/chunk.MQ3KYTNU.js";
 import "../../chunks/chunk.DJOAQ4JU.js";
 export {
   button_custom_styles_default as default

package/dist/components/button/button.js

@@ -1,17 +1,17 @@
 import {
   button_default
-} from "../../chunks/chunk.4SJKXOCV.js";
-import "../../chunks/chunk.G3PDKNFK.js";
-import "../../chunks/chunk.5ZMQBOV3.js";
+} from "../../chunks/chunk.GRZ3TSGB.js";
+import "../../chunks/chunk.6CFDQNJT.js";
+import "../../chunks/chunk.SGZ5ADPY.js";
 import "../../chunks/chunk.N2I6HVX3.js";
 import "../../chunks/chunk.XGXFE6IF.js";
 import "../../chunks/chunk.R6VNLE6N.js";
 import "../../chunks/chunk.A3SKDWCT.js";
 import "../../chunks/chunk.WDCAHRYG.js";
-import "../../chunks/chunk.P22LQI5J.js";
-import "../../chunks/chunk.DREO4ZTN.js";
-import "../../chunks/chunk.DI6S4YNU.js";
-import "../../chunks/chunk.53ZDJY4Q.js";
+import "../../chunks/chunk.OZSASB66.js";
+import "../../chunks/chunk.MQ3KYTNU.js";
+import "../../chunks/chunk.IZS6SARK.js";
+import "../../chunks/chunk.YOW3IJVJ.js";
 import "../../chunks/chunk.BREU4ILT.js";
 import "../../chunks/chunk.5OIEI73E.js";
 import "../../chunks/chunk.6C4JXZZN.js";

package/dist/components/button/button.styles.js

@@ -1,7 +1,7 @@
 import {
   button_styles_default
-} from "../../chunks/chunk.P22LQI5J.js";
-import "../../chunks/chunk.DREO4ZTN.js";
+} from "../../chunks/chunk.OZSASB66.js";
+import "../../chunks/chunk.MQ3KYTNU.js";
 import "../../chunks/chunk.O7USYXBT.js";
 import "../../chunks/chunk.DJOAQ4JU.js";
 export {

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

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

package/dist/components/icon/icon.js

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

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

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

package/dist/components/input/input.js

@@ -1,15 +1,15 @@
 import {
   input_default
-} from "../../chunks/chunk.B7XEALID.js";
-import "../../chunks/chunk.5SUEJSIW.js";
+} from "../../chunks/chunk.H6VZTJD6.js";
+import "../../chunks/chunk.DYPYZ53B.js";
 import "../../chunks/chunk.Q77OTWF2.js";
 import "../../chunks/chunk.ILONRPL4.js";
 import "../../chunks/chunk.XGXFE6IF.js";
 import "../../chunks/chunk.R6VNLE6N.js";
 import "../../chunks/chunk.A3SKDWCT.js";
 import "../../chunks/chunk.WDCAHRYG.js";
-import "../../chunks/chunk.DI6S4YNU.js";
-import "../../chunks/chunk.53ZDJY4Q.js";
+import "../../chunks/chunk.IZS6SARK.js";
+import "../../chunks/chunk.YOW3IJVJ.js";
 import "../../chunks/chunk.BREU4ILT.js";
 import "../../chunks/chunk.5OIEI73E.js";
 import "../../chunks/chunk.6C4JXZZN.js";

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

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

package/dist/custom-elements.json

@@ -118,9 +118,9 @@
               "kind": "field",
               "name": "variant",
               "type": {
-                "text": "'default' | 'outline' | 'text'"
+                "text": "'filled' | 'outline' | 'text'"
               },
-              "default": "'default'",
+              "default": "'filled'",
               "description": "The button's theme variant.",
               "attribute": "variant",
               "reflects": true
@@ -435,9 +435,9 @@
             {
               "name": "variant",
               "type": {
-                "text": "'default' | 'outline' | 'text'"
+                "text": "'filled' | 'outline' | 'text'"
               },
-              "default": "'default'",
+              "default": "'filled'",
               "description": "The button's theme variant.",
               "fieldName": "variant"
             },
@@ -1859,7 +1859,7 @@
   "package": {
     "name": "@synergy-design-system/components",
     "description": "",
-    "version": "1.0.0-main.8",
+    "version": "1.0.0-main.9",
     "author": {
       "name": "SICK Global UX Foundation",
       "url": "https://www.sick.com"

package/dist/synergy.js

@@ -1,27 +1,27 @@
 import {
   input_default
-} from "./chunks/chunk.B7XEALID.js";
+} from "./chunks/chunk.H6VZTJD6.js";
 import {
   getFormControls,
   serialize
 } from "./chunks/chunk.WTCUSH7V.js";
-import "./chunks/chunk.5SUEJSIW.js";
+import "./chunks/chunk.DYPYZ53B.js";
 import "./chunks/chunk.Q77OTWF2.js";
 import "./chunks/chunk.ILONRPL4.js";
 import {
   button_default
-} from "./chunks/chunk.4SJKXOCV.js";
-import "./chunks/chunk.G3PDKNFK.js";
-import "./chunks/chunk.5ZMQBOV3.js";
+} from "./chunks/chunk.GRZ3TSGB.js";
+import "./chunks/chunk.6CFDQNJT.js";
+import "./chunks/chunk.SGZ5ADPY.js";
 import "./chunks/chunk.N2I6HVX3.js";
 import "./chunks/chunk.XGXFE6IF.js";
 import "./chunks/chunk.R6VNLE6N.js";
 import "./chunks/chunk.A3SKDWCT.js";
 import "./chunks/chunk.WDCAHRYG.js";
-import "./chunks/chunk.P22LQI5J.js";
-import "./chunks/chunk.DREO4ZTN.js";
-import "./chunks/chunk.DI6S4YNU.js";
-import "./chunks/chunk.53ZDJY4Q.js";
+import "./chunks/chunk.OZSASB66.js";
+import "./chunks/chunk.MQ3KYTNU.js";
+import "./chunks/chunk.IZS6SARK.js";
+import "./chunks/chunk.YOW3IJVJ.js";
 import "./chunks/chunk.BREU4ILT.js";
 import "./chunks/chunk.5OIEI73E.js";
 import "./chunks/chunk.6C4JXZZN.js";

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

@@ -11,7 +11,7 @@
           "name": "variant",
           "description": "The button's theme variant.",
           "values": [
-            { "name": "default" },
+            { "name": "filled" },
             { "name": "outline" },
             { "name": "text" }
           ]

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.0.0-main.8",
+  "version": "1.0.0-main.9",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -16,8 +16,8 @@
               "name": "variant",
               "description": "The button's theme variant.",
               "value": {
-                "type": "'default' | 'outline' | 'text'",
-                "default": "'default'"
+                "type": "'filled' | 'outline' | 'text'",
+                "default": "'filled'"
               }
             },
             {
@@ -147,7 +147,7 @@
               {
                 "name": "variant",
                 "description": "The button's theme variant.",
-                "value": { "type": "'default' | 'outline' | 'text'" }
+                "value": { "type": "'filled' | 'outline' | 'text'" }
               },
               {
                 "name": "size",

package/package.json

@@ -4,7 +4,7 @@
     "url": "https://www.sick.com"
   },
   "name": "@synergy-design-system/components",
-  "version": "1.0.0-main.8",
+  "version": "1.0.0-main.9",
   "description": "",
   "repository": {
     "type": "git",
@@ -86,8 +86,8 @@
     "user-agent-data-types": "^0.4.2",
     "vendorism": "github:mariohamann/vendorism",
     "@synergy-design-system/eslint-config-syn": "0.1.0",
-    "@synergy-design-system/stylelint-config-syn": "0.1.0",
-    "@synergy-design-system/tokens": "1.0.0-main.6"
+    "@synergy-design-system/tokens": "1.0.0-main.7",
+    "@synergy-design-system/stylelint-config-syn": "0.1.0"
   },
   "release": {
     "branches": [

package/dist/chunks/chunk.DREO4ZTN.js

@@ -1,10 +0,0 @@
-// src/components/button/button.custom.styles.ts
-import { css } from "lit";
-var button_custom_styles_default = css`
-  /* Write custom CSS here */
-`;
-
-export {
-  button_custom_styles_default
-};
-//# sourceMappingURL=chunk.DREO4ZTN.js.map

package/dist/chunks/chunk.DREO4ZTN.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  /* Write custom CSS here */\n`;\n"],
-  "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,+BAAQ;AAAA;AAAA;",
-  "names": []
-}

package/dist/chunks/chunk.G3PDKNFK.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/components/button/button.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 { FormControlController, validValidityState } from '../../internal/form.js';\nimport { HasSlotController } from '../../internal/slot.js';\nimport { html, literal } from 'lit/static-html.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport { property, query, state } from 'lit/decorators.js';\nimport { watch } from '../../internal/watch.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport SynIcon from '../icon/icon.component.js';\nimport SynSpinner from '../spinner/spinner.component.js';\nimport styles from './button.styles.js';\nimport type { CSSResultGroup } from 'lit';\nimport type { SynergyFormControl } from '../../internal/synergy-element.js';\n\n/**\n * @summary Buttons represent actions that are available to the user.\n * @documentation https://synergy.style/components/button\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon\n * @dependency syn-spinner\n *\n * @event syn-blur - Emitted when the button loses focus.\n * @event syn-focus - Emitted when the button gains focus.\n * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @slot - The button's label.\n * @slot prefix - A presentational prefix icon or similar element.\n * @slot suffix - A presentational suffix icon or similar element.\n *\n * @csspart base - The component's base wrapper.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart label - The button's label.\n * @csspart suffix - The container that wraps the suffix.\n * @csspart caret - The button's caret icon, an `<syn-icon>` element.\n * @csspart spinner - The spinner that shows when the button is in the loading state.\n */\nexport default class SynButton extends SynergyElement implements SynergyFormControl {\n  static styles: CSSResultGroup = styles;\n  static dependencies = {\n    'syn-icon': SynIcon,\n    'syn-spinner': SynSpinner\n  };\n\n  private readonly formControlController = new FormControlController(this, {\n    form: input => {\n      // Buttons support a form attribute that points to an arbitrary form, so if this attribute is set we need to query\n      // the form from the same root using its id\n      if (input.hasAttribute('form')) {\n        const doc = input.getRootNode() as Document | ShadowRoot;\n        const formId = input.getAttribute('form')!;\n        return doc.getElementById(formId) as HTMLFormElement;\n      }\n\n      // Fall back to the closest containing form\n      return input.closest('form');\n    },\n    assumeInteractionOn: ['click']\n  });\n  private readonly hasSlotController = new HasSlotController(this, '[default]', 'prefix', 'suffix');\n  private readonly localize = new LocalizeController(this);\n\n  @query('.button') button: HTMLButtonElement | HTMLLinkElement;\n\n  @state() private hasFocus = false;\n  @state() invalid = false;\n  @property() title = ''; // make reactive to pass through\n\n  /** The button's theme variant. */\n  @property({ reflect: true }) variant: 'default' | 'outline' | 'text' = 'default';\n\n  /** The button's size. */\n  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Draws the button with a caret. Used to indicate that the button triggers a dropdown menu or similar behavior. */\n  @property({ type: Boolean, reflect: true }) caret = false;\n\n  /** Disables the button. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Draws the button in a loading state. */\n  @property({ type: Boolean, reflect: true }) loading = false;\n\n  /**\n   * The type of button. Note that the default value is `button` instead of `submit`, which is opposite of how native\n   * `<button>` elements behave. When the type is `submit`, the button will submit the surrounding form.\n   */\n  @property() type: 'button' | 'submit' | 'reset' = 'button';\n\n  /**\n   * The name of the button, submitted as a name/value pair with form data, but only when this button is the submitter.\n   * This attribute is ignored when `href` is present.\n   */\n  @property() name = '';\n\n  /**\n   * The value of the button, submitted as a pair with the button's name as part of the form data, but only when this\n   * button is the submitter. This attribute is ignored when `href` is present.\n   */\n  @property() value = '';\n\n  /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */\n  @property() href = '';\n\n  /** Tells the browser where to open the link. Only used when `href` is present. */\n  @property() target: '_blank' | '_parent' | '_self' | '_top';\n\n  /**\n   * When using `href`, this attribute will map to the underlying link's `rel` attribute. Unlike regular links, the\n   * default is `noreferrer noopener` to prevent security exploits. However, if you're using `target` to point to a\n   * specific tab/window, this will prevent that from working correctly. You can remove or change the default value by\n   * setting the attribute to an empty string or a value of your choice, respectively.\n   */\n  @property() rel = 'noreferrer noopener';\n\n  /** Tells the browser to download the linked file as this filename. Only used when `href` is present. */\n  @property() download?: string;\n\n  /**\n   * The \"form owner\" to associate the button with. If omitted, the closest containing form will be used instead. The\n   * value of this attribute must be an id of a form in the same document or shadow root as the button.\n   */\n  @property() form: string;\n\n  /** Used to override the form owner's `action` attribute. */\n  @property({ attribute: 'formaction' }) formAction: string;\n\n  /** Used to override the form owner's `enctype` attribute.  */\n  @property({ attribute: 'formenctype' })\n  formEnctype: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain';\n\n  /** Used to override the form owner's `method` attribute.  */\n  @property({ attribute: 'formmethod' }) formMethod: 'post' | 'get';\n\n  /** Used to override the form owner's `novalidate` attribute. */\n  @property({ attribute: 'formnovalidate', type: Boolean }) formNoValidate: boolean;\n\n  /** Used to override the form owner's `target` attribute. */\n  @property({ attribute: 'formtarget' }) formTarget: '_self' | '_blank' | '_parent' | '_top' | string;\n\n  /** Gets the validity state object */\n  get validity() {\n    if (this.isButton()) {\n      return (this.button as HTMLButtonElement).validity;\n    }\n\n    return validValidityState;\n  }\n\n  /** Gets the validation message */\n  get validationMessage() {\n    if (this.isButton()) {\n      return (this.button as HTMLButtonElement).validationMessage;\n    }\n\n    return '';\n  }\n\n  firstUpdated() {\n    if (this.isButton()) {\n      this.formControlController.updateValidity();\n    }\n  }\n\n  private handleBlur() {\n    this.hasFocus = false;\n    this.emit('syn-blur');\n  }\n\n  private handleFocus() {\n    this.hasFocus = true;\n    this.emit('syn-focus');\n  }\n\n  private handleClick() {\n    if (this.type === 'submit') {\n      this.formControlController.submit(this);\n    }\n\n    if (this.type === 'reset') {\n      this.formControlController.reset(this);\n    }\n  }\n\n  private handleInvalid(event: Event) {\n    this.formControlController.setValidity(false);\n    this.formControlController.emitInvalidEvent(event);\n  }\n\n  private isButton() {\n    return this.href ? false : true;\n  }\n\n  private isLink() {\n    return this.href ? true : false;\n  }\n\n  @watch('disabled', { waitUntilFirstUpdate: true })\n  handleDisabledChange() {\n    if (this.isButton()) {\n      // Disabled form controls are always valid\n      this.formControlController.setValidity(this.disabled);\n    }\n  }\n\n  /** Simulates a click on the button. */\n  click() {\n    this.button.click();\n  }\n\n  /** Sets focus on the button. */\n  focus(options?: FocusOptions) {\n    this.button.focus(options);\n  }\n\n  /** Removes focus from the button. */\n  blur() {\n    this.button.blur();\n  }\n\n  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */\n  checkValidity() {\n    if (this.isButton()) {\n      return (this.button as HTMLButtonElement).checkValidity();\n    }\n\n    return true;\n  }\n\n  /** Gets the associated form, if one exists. */\n  getForm(): HTMLFormElement | null {\n    return this.formControlController.getForm();\n  }\n\n  /** Checks for validity and shows the browser's validation message if the control is invalid. */\n  reportValidity() {\n    if (this.isButton()) {\n      return (this.button as HTMLButtonElement).reportValidity();\n    }\n\n    return true;\n  }\n\n  /** Sets a custom validation message. Pass an empty string to restore validity. */\n  setCustomValidity(message: string) {\n    if (this.isButton()) {\n      (this.button as HTMLButtonElement).setCustomValidity(message);\n      this.formControlController.updateValidity();\n    }\n  }\n\n  render() {\n    const isLink = this.isLink();\n    const tag = isLink ? literal`a` : literal`button`;\n\n    /* eslint-disable lit/no-invalid-html */\n    /* eslint-disable lit/binding-positions */\n    return html`\n      <${tag}\n        part=\"base\"\n        class=${classMap({\n          button: true,\n          'button--primary': true,\n          'button--text': this.variant === 'text',\n          'button--small': this.size === 'small',\n          'button--medium': this.size === 'medium',\n          'button--large': this.size === 'large',\n          'button--caret': this.caret,\n          'button--disabled': this.disabled,\n          'button--focused': this.hasFocus,\n          'button--loading': this.loading,\n          'button--default': this.variant === 'default',\n          'button--outline': this.variant === 'outline',\n          'button--rtl': this.localize.dir() === 'rtl',\n          'button--has-label': this.hasSlotController.test('[default]'),\n          'button--has-prefix': this.hasSlotController.test('prefix'),\n          'button--has-suffix': this.hasSlotController.test('suffix')\n        })}\n        ?disabled=${ifDefined(isLink ? undefined : this.disabled)}\n        type=${ifDefined(isLink ? undefined : this.type)}\n        title=${this.title /* An empty title prevents browser validation tooltips from appearing on hover */}\n        name=${ifDefined(isLink ? undefined : this.name)}\n        value=${ifDefined(isLink ? undefined : this.value)}\n        href=${ifDefined(isLink ? this.href : undefined)}\n        target=${ifDefined(isLink ? this.target : undefined)}\n        download=${ifDefined(isLink ? this.download : undefined)}\n        rel=${ifDefined(isLink ? this.rel : undefined)}\n        role=${ifDefined(isLink ? undefined : 'button')}\n        aria-disabled=${this.disabled ? 'true' : 'false'}\n        tabindex=${this.disabled ? '-1' : '0'}\n        @blur=${this.handleBlur}\n        @focus=${this.handleFocus}\n        @invalid=${this.isButton() ? this.handleInvalid : null}\n        @click=${this.handleClick}\n      >\n        <slot name=\"prefix\" part=\"prefix\" class=\"button__prefix\"></slot>\n        <slot part=\"label\" class=\"button__label\"></slot>\n        <slot name=\"suffix\" part=\"suffix\" class=\"button__suffix\"></slot>\n        ${\n          this.caret ? html` <syn-icon part=\"caret\" class=\"button__caret\" library=\"system\" name=\"caret\"></syn-icon> ` : ''\n        }\n        ${this.loading ? html`<syn-spinner part=\"spinner\"></syn-spinner>` : ''}\n      </${tag}>\n    `;\n    /* eslint-enable lit/no-invalid-html */\n    /* eslint-enable lit/binding-positions */\n  }\n}\n"],
-  "mappings": "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",
-  "names": []
-}

package/dist/chunks/chunk.P22LQI5J.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/components/button/button.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';\nimport customStyles from './button.custom.styles.js';\n\nexport default css`\n\t/* stylelint-disable */\n  ${componentStyles}\n\n  :host {\n    display: inline-block;\n    position: relative;\n    width: auto;\n    cursor: pointer;\n  }\n\n  .button {\n    display: inline-flex;\n    align-items: stretch;\n    justify-content: center;\n    width: 100%;\n    border-style: solid;\n    border-width: var(--syn-input-border-width);\n    font-family: var(--syn-input-font-family);\n    font-weight: var(--syn-font-weight-semibold);\n    text-decoration: none;\n    user-select: none;\n    -webkit-user-select: none;\n    white-space: nowrap;\n    vertical-align: middle;\n    padding: 0;\n    transition:\n      var(--syn-transition-x-fast) background-color,\n      var(--syn-transition-x-fast) color,\n      var(--syn-transition-x-fast) border,\n      var(--syn-transition-x-fast) box-shadow;\n    cursor: inherit;\n  }\n\n  .button::-moz-focus-inner {\n    border: 0;\n  }\n\n  .button:focus {\n    outline: none;\n  }\n\n  .button:focus-visible {\n    outline: var(--syn-focus-ring);\n    outline-offset: var(--syn-focus-ring-offset);\n  }\n\n  .button--disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  /* When disabled, prevent mouse events from bubbling up from children */\n  .button--disabled * {\n    pointer-events: none;\n  }\n\n  .button__prefix,\n  .button__suffix {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    pointer-events: none;\n  }\n\n  .button__label {\n    display: inline-block;\n  }\n\n  .button__label::slotted(syn-icon) {\n    vertical-align: -2px;\n  }\n\n  /*\n   * Standard buttons\n   */\n\n  /* Primary */\n  .button--default.button--primary {\n    background-color: var(--syn-color-primary-600);\n    border-color: var(--syn-color-primary-600);\n    color: var(--syn-color-neutral-0);\n  }\n\n  .button--default.button--primary:hover:not(.button--disabled) {\n    background-color: var(--syn-color-primary-500);\n    border-color: var(--syn-color-primary-500);\n    color: var(--syn-color-neutral-0);\n  }\n\n  .button--default.button--primary:active:not(.button--disabled) {\n    background-color: var(--syn-color-primary-600);\n    border-color: var(--syn-color-primary-600);\n    color: var(--syn-color-neutral-0);\n  }\n\n  /*\n   * Outline buttons\n   */\n\n  .button--outline {\n    background: none;\n    border: solid 1px;\n  }\n\n  /* Primary */\n  .button--outline.button--primary {\n    border-color: var(--syn-color-primary-600);\n    color: var(--syn-color-primary-600);\n  }\n\n  .button--outline.button--primary:hover:not(.button--disabled),\n  .button--outline.button--primary.button--checked:not(.button--disabled) {\n    background-color: var(--syn-color-primary-600);\n    color: var(--syn-color-neutral-0);\n  }\n\n  .button--outline.button--primary:active:not(.button--disabled) {\n    border-color: var(--syn-color-primary-700);\n    background-color: var(--syn-color-primary-700);\n    color: var(--syn-color-neutral-0);\n  }\n\n  /*\n   * Text buttons\n   */\n\n  .button--text {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--syn-color-primary-600);\n  }\n\n  .button--text:hover:not(.button--disabled) {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--syn-color-primary-500);\n  }\n\n  .button--text:focus-visible:not(.button--disabled) {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--syn-color-primary-500);\n  }\n\n  .button--text:active:not(.button--disabled) {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--syn-color-primary-700);\n  }\n\n  /*\n   * Size modifiers\n   */\n\n  .button--small {\n    height: auto;\n    min-height: var(--syn-input-height-small);\n    font-size: var(--syn-button-font-size-small);\n    line-height: calc(var(--syn-input-height-small) - var(--syn-input-border-width) * 2);\n    border-radius: var(--syn-input-border-radius-small);\n  }\n\n  .button--medium {\n    height: auto;\n    min-height: var(--syn-input-height-medium);\n    font-size: var(--syn-button-font-size-medium);\n    line-height: calc(var(--syn-input-height-medium) - var(--syn-input-border-width) * 2);\n    border-radius: var(--syn-input-border-radius-medium);\n  }\n\n  .button--large {\n    height: auto;\n    min-height: var(--syn-input-height-large);\n    font-size: var(--syn-button-font-size-large);\n    line-height: calc(var(--syn-input-height-large) - var(--syn-input-border-width) * 2);\n    border-radius: var(--syn-input-border-radius-large);\n  }\n\n  /*\n   * Caret modifier\n   */\n\n  .button--caret .button__suffix {\n    display: none;\n  }\n\n  .button--caret .button__caret {\n    height: auto;\n  }\n\n  /*\n   * Loading modifier\n   */\n\n  .button--loading {\n    position: relative;\n    cursor: wait;\n  }\n\n  .button--loading .button__prefix,\n  .button--loading .button__label,\n  .button--loading .button__suffix,\n  .button--loading .button__caret {\n    visibility: hidden;\n  }\n\n  .button--loading syn-spinner {\n    --indicator-color: currentColor;\n    position: absolute;\n    font-size: 1em;\n    height: 1em;\n    width: 1em;\n    top: calc(50% - 0.5em);\n    left: calc(50% - 0.5em);\n  }\n\n  /*\n   * Badges\n   */\n\n  .button ::slotted(syn-badge) {\n    position: absolute;\n    top: 0;\n    right: 0;\n    translate: 50% -50%;\n    pointer-events: none;\n  }\n\n  .button--rtl ::slotted(syn-badge) {\n    right: auto;\n    left: 0;\n    translate: -50% -50%;\n  }\n\n  /*\n   * Button spacing\n   */\n\n  .button--has-label.button--small .button__label {\n    padding: 0 var(--syn-spacing-small);\n  }\n\n  .button--has-label.button--medium .button__label {\n    padding: 0 var(--syn-spacing-medium);\n  }\n\n  .button--has-label.button--large .button__label {\n    padding: 0 var(--syn-spacing-large);\n  }\n\n  .button--has-prefix.button--small {\n    padding-inline-start: var(--syn-spacing-x-small);\n  }\n\n  .button--has-prefix.button--small .button__label {\n    padding-inline-start: var(--syn-spacing-x-small);\n  }\n\n  .button--has-prefix.button--medium {\n    padding-inline-start: var(--syn-spacing-small);\n  }\n\n  .button--has-prefix.button--medium .button__label {\n    padding-inline-start: var(--syn-spacing-small);\n  }\n\n  .button--has-prefix.button--large {\n    padding-inline-start: var(--syn-spacing-small);\n  }\n\n  .button--has-prefix.button--large .button__label {\n    padding-inline-start: var(--syn-spacing-small);\n  }\n\n  .button--has-suffix.button--small,\n  .button--caret.button--small {\n    padding-inline-end: var(--syn-spacing-x-small);\n  }\n\n  .button--has-suffix.button--small .button__label,\n  .button--caret.button--small .button__label {\n    padding-inline-end: var(--syn-spacing-x-small);\n  }\n\n  .button--has-suffix.button--medium,\n  .button--caret.button--medium {\n    padding-inline-end: var(--syn-spacing-small);\n  }\n\n  .button--has-suffix.button--medium .button__label,\n  .button--caret.button--medium .button__label {\n    padding-inline-end: var(--syn-spacing-small);\n  }\n\n  .button--has-suffix.button--large,\n  .button--caret.button--large {\n    padding-inline-end: var(--syn-spacing-small);\n  }\n\n  .button--has-suffix.button--large .button__label,\n  .button--caret.button--large .button__label {\n    padding-inline-end: var(--syn-spacing-small);\n  }\n\n  /*\n   * Button groups support a variety of button types (e.g. buttons with tooltips, buttons as dropdown triggers, etc.).\n   * This means buttons aren't always direct descendants of the button group, thus we can't target them with the\n   * ::slotted selector. To work around this, the button group component does some magic to add these special classes to\n   * buttons and we style them here instead.\n   */\n\n  :host(.syn-button-group__button--first:not(.syn-button-group__button--last)) .button {\n    border-start-end-radius: 0;\n    border-end-end-radius: 0;\n  }\n\n  :host(.syn-button-group__button--inner) .button {\n    border-radius: 0;\n  }\n\n  :host(.syn-button-group__button--last:not(.syn-button-group__button--first)) .button {\n    border-start-start-radius: 0;\n    border-end-start-radius: 0;\n  }\n\n  /* All except the first */\n  :host(.syn-button-group__button:not(.syn-button-group__button--first)) {\n    margin-inline-start: calc(-1 * var(--syn-input-border-width));\n  }\n\n  /* Add a visual separator between solid buttons */\n  :host(\n      .syn-button-group__button:not(\n          .syn-button-group__button--first,\n          .syn-button-group__button--radio,\n          [variant='default']\n        ):not(:hover)\n    )\n    .button:after {\n    content: '';\n    position: absolute;\n    top: 0;\n    inset-inline-start: 0;\n    bottom: 0;\n    border-left: solid 1px rgb(128 128 128 / 33%);\n    mix-blend-mode: multiply;\n  }\n\n  /* Bump hovered, focused, and checked buttons up so their focus ring isn't clipped */\n  :host(.syn-button-group__button--hover) {\n    z-index: 1;\n  }\n\n  /* Focus and checked are always on top */\n  :host(.syn-button-group__button--focus),\n  :host(.syn-button-group__button[checked]) {\n    z-index: 2;\n  }\n\n  ${customStyles}\n`;\n\n"],
-  "mappings": ";;;;;;;;AAMA,SAAS,WAAW;AAIpB,IAAO,wBAAQ;AAAA;AAAA,IAEX,wBAAe;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;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;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,IAsWf,4BAAY;AAAA;",
-  "names": []
-}