@synergy-design-system/components 1.2.0 → 1.2.2

package/dist/chunks/{chunk.4EXY5F5M.js → chunk.47O65PF5.js}

@@ -1,6 +1,6 @@
 import {
   SynTextarea
-} from "./chunk.D5YL3H6T.js";
+} from "./chunk.F75WKKCW.js";
 
 // src/components/textarea/textarea.ts
 var textarea_default = SynTextarea;
@@ -9,4 +9,4 @@ SynTextarea.define("syn-textarea");
 export {
   textarea_default
 };
-//# sourceMappingURL=chunk.4EXY5F5M.js.map
+//# sourceMappingURL=chunk.47O65PF5.js.map

package/dist/chunks/{chunk.E2TU3YYJ.js → chunk.4S27S3RY.js}

@@ -1,6 +1,6 @@
 import {
   SynSwitch
-} from "./chunk.2OYZUDFV.js";
+} from "./chunk.YK3MDRNQ.js";
 
 // src/components/switch/switch.ts
 var switch_default = SynSwitch;
@@ -9,4 +9,4 @@ SynSwitch.define("syn-switch");
 export {
   switch_default
 };
-//# sourceMappingURL=chunk.E2TU3YYJ.js.map
+//# sourceMappingURL=chunk.4S27S3RY.js.map

package/dist/chunks/{chunk.VTYPMAXM.js → chunk.5EXH7VQY.js}

@@ -1,6 +1,6 @@
 import {
   SynIconButton
-} from "./chunk.L6I5ZLBO.js";
+} from "./chunk.5T6QTZ6K.js";
 
 // src/components/icon-button/icon-button.ts
 var icon_button_default = SynIconButton;
@@ -9,4 +9,4 @@ SynIconButton.define("syn-icon-button");
 export {
   icon_button_default
 };
-//# sourceMappingURL=chunk.VTYPMAXM.js.map
+//# sourceMappingURL=chunk.5EXH7VQY.js.map

package/dist/chunks/{chunk.L6I5ZLBO.js → chunk.5T6QTZ6K.js}

@@ -3,10 +3,10 @@ import {
 } from "./chunk.2FN5DTS6.js";
 import {
   SynIcon
-} from "./chunk.RKQHPBKM.js";
+} from "./chunk.NROSOMZ6.js";
 import {
   SynergyElement
-} from "./chunk.SPPBO7QV.js";
+} from "./chunk.XMUT2KKD.js";
 import {
   __decorateClass
 } from "./chunk.DJOAQ4JU.js";
@@ -134,4 +134,4 @@ __decorateClass([
 export {
   SynIconButton
 };
-//# sourceMappingURL=chunk.L6I5ZLBO.js.map
+//# sourceMappingURL=chunk.5T6QTZ6K.js.map

package/dist/chunks/{chunk.SEHRSICV.js → chunk.6UMINMJ4.js}

@@ -1,6 +1,6 @@
 import {
   SynButtonGroup
-} from "./chunk.Q7NHWXSL.js";
+} from "./chunk.WZ7YZYWN.js";
 
 // src/components/button-group/button-group.ts
 var button_group_default = SynButtonGroup;
@@ -9,4 +9,4 @@ SynButtonGroup.define("syn-button-group");
 export {
   button_group_default
 };
-//# sourceMappingURL=chunk.SEHRSICV.js.map
+//# sourceMappingURL=chunk.6UMINMJ4.js.map

package/dist/chunks/{chunk.P2LNG2PZ.js → chunk.AMTCNRDE.js}

@@ -6,6 +6,7 @@ import {
 // src/internal/form.ts
 var formCollections = /* @__PURE__ */ new WeakMap();
 var reportValidityOverloads = /* @__PURE__ */ new WeakMap();
+var checkValidityOverloads = /* @__PURE__ */ new WeakMap();
 var userInteractedControls = /* @__PURE__ */ new WeakSet();
 var interactions = /* @__PURE__ */ new WeakMap();
 var FormControlController = class {
@@ -53,6 +54,19 @@ var FormControlController = class {
         this.setUserInteracted(this.host, true);
       }
     };
+    this.checkFormValidity = () => {
+      if (this.form && !this.form.noValidate) {
+        const elements = this.form.querySelectorAll("*");
+        for (const element of elements) {
+          if (typeof element.checkValidity === "function") {
+            if (!element.checkValidity()) {
+              return false;
+            }
+          }
+        }
+      }
+      return true;
+    };
     this.reportFormValidity = () => {
       if (this.form && !this.form.noValidate) {
         const elements = this.form.querySelectorAll("*");
@@ -69,11 +83,12 @@ var FormControlController = class {
     (this.host = host).addController(this);
     this.options = __spreadValues({
       form: (input) => {
-        if (input.hasAttribute("form") && input.getAttribute("form") !== "") {
+        const formId = input.form;
+        if (formId) {
           const root = input.getRootNode();
-          const formId = input.getAttribute("form");
-          if (formId) {
-            return root.getElementById(formId);
+          const form = root.getElementById(formId);
+          if (form) {
+            return form;
           }
         }
         return input.closest("form");
@@ -86,6 +101,7 @@ var FormControlController = class {
         return (_a = input.disabled) != null ? _a : false;
       },
       reportValidity: (input) => typeof input.reportValidity === "function" ? input.reportValidity() : true,
+      checkValidity: (input) => typeof input.checkValidity === "function" ? input.checkValidity() : true,
       setValue: (input, value) => input.value = value,
       assumeInteractionOn: ["syn-input"]
     }, options);
@@ -135,14 +151,23 @@ var FormControlController = class {
         reportValidityOverloads.set(this.form, this.form.reportValidity);
         this.form.reportValidity = () => this.reportFormValidity();
       }
+      if (!checkValidityOverloads.has(this.form)) {
+        checkValidityOverloads.set(this.form, this.form.checkValidity);
+        this.form.checkValidity = () => this.checkFormValidity();
+      }
     } else {
       this.form = void 0;
     }
   }
   detachForm() {
-    var _a;
-    if (this.form) {
-      (_a = formCollections.get(this.form)) == null ? void 0 : _a.delete(this.host);
+    if (!this.form)
+      return;
+    const formCollection = formCollections.get(this.form);
+    if (!formCollection) {
+      return;
+    }
+    formCollection.delete(this.host);
+    if (formCollection.size <= 0) {
       this.form.removeEventListener("formdata", this.handleFormData);
       this.form.removeEventListener("submit", this.handleFormSubmit);
       this.form.removeEventListener("reset", this.handleFormReset);
@@ -150,8 +175,12 @@ var FormControlController = class {
         this.form.reportValidity = reportValidityOverloads.get(this.form);
         reportValidityOverloads.delete(this.form);
       }
+      if (checkValidityOverloads.has(this.form)) {
+        this.form.checkValidity = checkValidityOverloads.get(this.form);
+        checkValidityOverloads.delete(this.form);
+      }
+      this.form = void 0;
     }
-    this.form = void 0;
   }
   setUserInteracted(el, hasInteracted) {
     if (hasInteracted) {
@@ -272,4 +301,4 @@ export {
   valueMissingValidityState,
   customErrorValidityState
 };
-//# sourceMappingURL=chunk.P2LNG2PZ.js.map
+//# sourceMappingURL=chunk.AMTCNRDE.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/internal/form.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 type { ReactiveController, ReactiveControllerHost } from 'lit';\nimport type { SynergyFormControl } from '../internal/synergy-element.js';\nimport type SynButton from '../components/button/button.js';\n\n//\n// We store a WeakMap of forms + controls so we can keep references to all Synergy controls within a given form. As\n// elements connect and disconnect to/from the DOM, their containing form is used as the key and the form control is\n// added and removed from the form's set, respectively.\n//\nexport const formCollections: WeakMap<HTMLFormElement, Set<SynergyFormControl>> = new WeakMap();\n\n//\n// We store a WeakMap of reportValidity() overloads so we can override it when form controls connect to the DOM and\n// restore the original behavior when they disconnect.\n//\nconst reportValidityOverloads: WeakMap<HTMLFormElement, () => boolean> = new WeakMap();\nconst checkValidityOverloads: WeakMap<HTMLFormElement, () => boolean> = new WeakMap();\n\n//\n// We store a Set of controls that users have interacted with. This allows us to determine the interaction state\n// without littering the DOM with additional data attributes.\n//\nconst userInteractedControls: WeakSet<SynergyFormControl> = new WeakSet();\n\n//\n// We store a WeakMap of interactions for each form control so we can track when all conditions are met for validation.\n//\nconst interactions = new WeakMap<SynergyFormControl, string[]>();\n\nexport interface FormControlControllerOptions {\n  /** A function that returns the form containing the form control. */\n  form: (input: SynergyFormControl) => HTMLFormElement | null;\n  /** A function that returns the form control's name, which will be submitted with the form data. */\n  name: (input: SynergyFormControl) => string;\n  /** A function that returns the form control's current value. */\n  value: (input: SynergyFormControl) => unknown | unknown[];\n  /** A function that returns the form control's default value. */\n  defaultValue: (input: SynergyFormControl) => unknown | unknown[];\n  /** A function that returns the form control's current disabled state. If disabled, the value won't be submitted. */\n  disabled: (input: SynergyFormControl) => boolean;\n  /**\n   * A function that maps to the form control's reportValidity() function. When the control is invalid, this will\n   * prevent submission and trigger the browser's constraint violation warning.\n   */\n  reportValidity: (input: SynergyFormControl) => boolean;\n\n  /**\n   * A function that maps to the form control's `checkValidity()` function. When the control is invalid, this will return false.\n   *   this is helpful is you want to check validation without triggering the native browser constraint violation warning.\n   */\n  checkValidity: (input: SynergyFormControl) => boolean;\n  /** A function that sets the form control's value */\n  setValue: (input: SynergyFormControl, value: unknown) => void;\n  /**\n   * An array of event names to listen to. When all events in the list are emitted, the control will receive validity\n   * states such as user-valid and user-invalid.user interacted validity states. */\n  assumeInteractionOn: string[];\n}\n\n/** A reactive controller to allow form controls to participate in form submission, validation, etc. */\nexport class FormControlController implements ReactiveController {\n  host: SynergyFormControl & ReactiveControllerHost;\n  form?: HTMLFormElement | null;\n  options: FormControlControllerOptions;\n\n  constructor(host: ReactiveControllerHost & SynergyFormControl, options?: Partial<FormControlControllerOptions>) {\n    (this.host = host).addController(this);\n    this.options = {\n      form: input => {\n        // If there's a form attribute, use it to find the target form by id\n        // Controls may not always reflect the 'form' property. For example, `<syn-button>` doesn't reflect.\n        const formId = input.form;\n\n        if (formId) {\n          const root = input.getRootNode() as Document | ShadowRoot;\n\n          const form = root.getElementById(formId);\n\n          if (form) {\n            return form as HTMLFormElement;\n          }\n        }\n\n        return input.closest('form');\n      },\n      name: input => input.name,\n      value: input => input.value,\n      defaultValue: input => input.defaultValue,\n      disabled: input => input.disabled ?? false,\n      reportValidity: input => (typeof input.reportValidity === 'function' ? input.reportValidity() : true),\n      checkValidity: input => (typeof input.checkValidity === 'function' ? input.checkValidity() : true),\n      setValue: (input, value: string) => (input.value = value),\n      assumeInteractionOn: ['syn-input'],\n      ...options\n    };\n  }\n\n  hostConnected() {\n    const form = this.options.form(this.host);\n\n    if (form) {\n      this.attachForm(form);\n    }\n\n    // Listen for interactions\n    interactions.set(this.host, []);\n    this.options.assumeInteractionOn.forEach(event => {\n      this.host.addEventListener(event, this.handleInteraction);\n    });\n  }\n\n  hostDisconnected() {\n    this.detachForm();\n\n    // Clean up interactions\n    interactions.delete(this.host);\n    this.options.assumeInteractionOn.forEach(event => {\n      this.host.removeEventListener(event, this.handleInteraction);\n    });\n  }\n\n  hostUpdated() {\n    const form = this.options.form(this.host);\n\n    // Detach if the form no longer exists\n    if (!form) {\n      this.detachForm();\n    }\n\n    // If the form has changed, reattach it\n    if (form && this.form !== form) {\n      this.detachForm();\n      this.attachForm(form);\n    }\n\n    if (this.host.hasUpdated) {\n      this.setValidity(this.host.validity.valid);\n    }\n  }\n\n  private attachForm(form?: HTMLFormElement) {\n    if (form) {\n      this.form = form;\n\n      // Add this element to the form's collection\n      if (formCollections.has(this.form)) {\n        formCollections.get(this.form)!.add(this.host);\n      } else {\n        formCollections.set(this.form, new Set<SynergyFormControl>([this.host]));\n      }\n\n      this.form.addEventListener('formdata', this.handleFormData);\n      this.form.addEventListener('submit', this.handleFormSubmit);\n      this.form.addEventListener('reset', this.handleFormReset);\n\n      // Overload the form's reportValidity() method so it looks at Synergy form controls\n      if (!reportValidityOverloads.has(this.form)) {\n        reportValidityOverloads.set(this.form, this.form.reportValidity);\n        this.form.reportValidity = () => this.reportFormValidity();\n      }\n\n      // Overload the form's checkValidity() method so it looks at Synergy form controls\n      if (!checkValidityOverloads.has(this.form)) {\n        checkValidityOverloads.set(this.form, this.form.checkValidity);\n        this.form.checkValidity = () => this.checkFormValidity();\n      }\n    } else {\n      this.form = undefined;\n    }\n  }\n\n  private detachForm() {\n    if (!this.form) return;\n\n    const formCollection = formCollections.get(this.form);\n\n    if (!formCollection) {\n      return;\n    }\n\n    // Remove this host from the form's collection\n    formCollection.delete(this.host);\n\n    // Check to make sure there's no other form controls in the collection. If we do this\n    // without checking if any other controls are still in the collection, then we will wipe out the\n    // validity checks for all other elements.\n    // see: https://github.com/synergy-design-system/synergy/issues/1703\n    if (formCollection.size <= 0) {\n      this.form.removeEventListener('formdata', this.handleFormData);\n      this.form.removeEventListener('submit', this.handleFormSubmit);\n      this.form.removeEventListener('reset', this.handleFormReset);\n\n      // Remove the overload and restore the original method\n      if (reportValidityOverloads.has(this.form)) {\n        this.form.reportValidity = reportValidityOverloads.get(this.form)!;\n        reportValidityOverloads.delete(this.form);\n      }\n\n      if (checkValidityOverloads.has(this.form)) {\n        this.form.checkValidity = checkValidityOverloads.get(this.form)!;\n        checkValidityOverloads.delete(this.form);\n      }\n\n      // So it looks weird here to not always set the form to undefined. But I _think_ if we unattach this.form here,\n      // we end up in this fun spot where future validity checks don't have a reference to the form validity handler.\n      // First form element in sets the validity handler. So we can't clean up `this.form` until there are no other form elements in the form.\n      this.form = undefined;\n    }\n  }\n\n  private handleFormData = (event: FormDataEvent) => {\n    const disabled = this.options.disabled(this.host);\n    const name = this.options.name(this.host);\n    const value = this.options.value(this.host);\n\n    // For buttons, we only submit the value if they were the submitter. This is currently done in doAction() by\n    // injecting the name/value on a temporary button, so we can just skip them here.\n    const isButton = this.host.tagName.toLowerCase() === 'syn-button';\n\n    if (!disabled && !isButton && typeof name === 'string' && name.length > 0 && typeof value !== 'undefined') {\n      if (Array.isArray(value)) {\n        (value as unknown[]).forEach(val => {\n          event.formData.append(name, (val as string | number | boolean).toString());\n        });\n      } else {\n        event.formData.append(name, (value as string | number | boolean).toString());\n      }\n    }\n  };\n\n  private handleFormSubmit = (event: Event) => {\n    const disabled = this.options.disabled(this.host);\n    const reportValidity = this.options.reportValidity;\n\n    // Update the interacted state for all controls when the form is submitted\n    if (this.form && !this.form.noValidate) {\n      formCollections.get(this.form)?.forEach(control => {\n        this.setUserInteracted(control, true);\n      });\n    }\n\n    if (this.form && !this.form.noValidate && !disabled && !reportValidity(this.host)) {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n    }\n  };\n\n  private handleFormReset = () => {\n    this.options.setValue(this.host, this.options.defaultValue(this.host));\n    this.setUserInteracted(this.host, false);\n    interactions.set(this.host, []);\n  };\n\n  private handleInteraction = (event: Event) => {\n    const emittedEvents = interactions.get(this.host)!;\n\n    if (!emittedEvents.includes(event.type)) {\n      emittedEvents.push(event.type);\n    }\n\n    // Mark it as user-interacted as soon as all associated events have been emitted\n    if (emittedEvents.length === this.options.assumeInteractionOn.length) {\n      this.setUserInteracted(this.host, true);\n    }\n  };\n\n  private checkFormValidity = () => {\n    //\n    // This is very similar to the `reportFormValidity` function, but it does not trigger native constraint validation\n    // Allow the user to simply check if the form is valid and handling validity in their own way.\n    //\n    // We preserve the original method in a WeakMap, but we don't call it from the overload because that would trigger\n    // validations in an unexpected order. When the element disconnects, we revert to the original behavior. This won't\n    // be necessary once we can use ElementInternals.\n    //\n    // Note that we're also honoring the form's novalidate attribute.\n    //\n    if (this.form && !this.form.noValidate) {\n      // This seems sloppy, but checking all elements will cover native inputs, Synergy inputs, and other custom\n      // elements that support the constraint validation API.\n      const elements = this.form.querySelectorAll<HTMLInputElement>('*');\n\n      for (const element of elements) {\n        if (typeof element.checkValidity === 'function') {\n          if (!element.checkValidity()) {\n            return false;\n          }\n        }\n      }\n    }\n\n    return true;\n  };\n\n  private reportFormValidity = () => {\n    //\n    // Synergy form controls work hard to act like regular form controls. They support the Constraint Validation API\n    // and its associated methods such as setCustomValidity() and reportValidity(). However, the HTMLFormElement also\n    // has a reportValidity() method that will trigger validation on all child controls. Since we're not yet using\n    // ElementInternals, we need to overload this method so it looks for any element with the reportValidity() method.\n    //\n    // We preserve the original method in a WeakMap, but we don't call it from the overload because that would trigger\n    // validations in an unexpected order. When the element disconnects, we revert to the original behavior. This won't\n    // be necessary once we can use ElementInternals.\n    //\n    // Note that we're also honoring the form's novalidate attribute.\n    //\n    if (this.form && !this.form.noValidate) {\n      // This seems sloppy, but checking all elements will cover native inputs, Synergy inputs, and other custom\n      // elements that support the constraint validation API.\n      const elements = this.form.querySelectorAll<HTMLInputElement>('*');\n\n      for (const element of elements) {\n        if (typeof element.reportValidity === 'function') {\n          if (!element.reportValidity()) {\n            return false;\n          }\n        }\n      }\n    }\n\n    return true;\n  };\n\n  private setUserInteracted(el: SynergyFormControl, hasInteracted: boolean) {\n    if (hasInteracted) {\n      userInteractedControls.add(el);\n    } else {\n      userInteractedControls.delete(el);\n    }\n\n    el.requestUpdate();\n  }\n\n  private doAction(type: 'submit' | 'reset', submitter?: HTMLInputElement | SynButton) {\n    if (this.form) {\n      const button = document.createElement('button');\n      button.type = type;\n      button.style.position = 'absolute';\n      button.style.width = '0';\n      button.style.height = '0';\n      button.style.clipPath = 'inset(50%)';\n      button.style.overflow = 'hidden';\n      button.style.whiteSpace = 'nowrap';\n\n      // Pass name, value, and form attributes through to the temporary button\n      if (submitter) {\n        button.name = submitter.name;\n        button.value = submitter.value;\n\n        ['formaction', 'formenctype', 'formmethod', 'formnovalidate', 'formtarget'].forEach(attr => {\n          if (submitter.hasAttribute(attr)) {\n            button.setAttribute(attr, submitter.getAttribute(attr)!);\n          }\n        });\n      }\n\n      this.form.append(button);\n      button.click();\n      button.remove();\n    }\n  }\n\n  /** Returns the associated `<form>` element, if one exists. */\n  getForm() {\n    return this.form ?? null;\n  }\n\n  /** Resets the form, restoring all the control to their default value */\n  reset(submitter?: HTMLInputElement | SynButton) {\n    this.doAction('reset', submitter);\n  }\n\n  /** Submits the form, triggering validation and form data injection. */\n  submit(submitter?: HTMLInputElement | SynButton) {\n    // Calling form.submit() bypasses the submit event and constraint validation. To prevent this, we can inject a\n    // native submit button into the form, \"click\" it, then remove it to simulate a standard form submission.\n    this.doAction('submit', submitter);\n  }\n\n  /**\n   * Synchronously sets the form control's validity. Call this when you know the future validity but need to update\n   * the host element immediately, i.e. before Lit updates the component in the next update.\n   */\n  setValidity(isValid: boolean) {\n    const host = this.host;\n    const hasInteracted = Boolean(userInteractedControls.has(host));\n    const required = Boolean(host.required);\n\n    //\n    // We're mapping the following \"states\" to data attributes. In the future, we can use ElementInternals.states to\n    // create a similar mapping, but instead of [data-invalid] it will look like :--invalid.\n    //\n    // See this RFC for more details: https://github.com/synergy-design-system/synergy/issues/1011\n    //\n    host.toggleAttribute('data-required', required);\n    host.toggleAttribute('data-optional', !required);\n    host.toggleAttribute('data-invalid', !isValid);\n    host.toggleAttribute('data-valid', isValid);\n    host.toggleAttribute('data-user-invalid', !isValid && hasInteracted);\n    host.toggleAttribute('data-user-valid', isValid && hasInteracted);\n  }\n\n  /**\n   * Updates the form control's validity based on the current value of `host.validity.valid`. Call this when anything\n   * that affects constraint validation changes so the component receives the correct validity states.\n   */\n  updateValidity() {\n    const host = this.host;\n    this.setValidity(host.validity.valid);\n  }\n\n  /**\n   * Dispatches a non-bubbling, cancelable custom event of type `syn-invalid`.\n   * If the `syn-invalid` event will be cancelled then the original `invalid`\n   * event (which may have been passed as argument) will also be cancelled.\n   * If no original `invalid` event has been passed then the `syn-invalid`\n   * event will be cancelled before being dispatched.\n   */\n  emitInvalidEvent(originalInvalidEvent?: Event) {\n    const slInvalidEvent = new CustomEvent<Record<PropertyKey, never>>('syn-invalid', {\n      bubbles: false,\n      composed: false,\n      cancelable: true,\n      detail: {}\n    });\n\n    if (!originalInvalidEvent) {\n      slInvalidEvent.preventDefault();\n    }\n\n    if (!this.host.dispatchEvent(slInvalidEvent)) {\n      originalInvalidEvent?.preventDefault();\n    }\n  }\n}\n\n/*\n * Predefined common validity states.\n * All of them are read-only.\n */\n\n// A validity state object that represents `valid`\nexport const validValidityState: ValidityState = Object.freeze({\n  badInput: false,\n  customError: false,\n  patternMismatch: false,\n  rangeOverflow: false,\n  rangeUnderflow: false,\n  stepMismatch: false,\n  tooLong: false,\n  tooShort: false,\n  typeMismatch: false,\n  valid: true,\n  valueMissing: false\n});\n\n// A validity state object that represents `value missing`\nexport const valueMissingValidityState: ValidityState = Object.freeze({\n  ...validValidityState,\n  valid: false,\n  valueMissing: true\n});\n\n// A validity state object that represents a custom error\nexport const customErrorValidityState: ValidityState = Object.freeze({\n  ...validValidityState,\n  valid: false,\n  customError: true\n});\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/chunks/{chunk.YTS5TRJZ.js → chunk.CQ2JMH2J.js}

@@ -1,6 +1,6 @@
 import {
   button_custom_styles_default
-} from "./chunk.FVSP4LXX.js";
+} from "./chunk.IUC3AWAU.js";
 import {
   component_styles_default
 } from "./chunk.O7USYXBT.js";
@@ -373,4 +373,4 @@ var button_styles_default = css`
 export {
   button_styles_default
 };
-//# sourceMappingURL=chunk.YTS5TRJZ.js.map
+//# sourceMappingURL=chunk.CQ2JMH2J.js.map

package/dist/chunks/{chunk.MUP4GIQL.js → chunk.EEBBPMDI.js}

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

package/dist/chunks/{chunk.JRAW7QJL.js → chunk.EJKKSDGO.js}

@@ -1,6 +1,6 @@
 import {
   SynInput
-} from "./chunk.RG4Z2I6D.js";
+} from "./chunk.ZLE6SGK3.js";
 
 // src/components/input/input.ts
 var input_default = SynInput;
@@ -9,4 +9,4 @@ SynInput.define("syn-input");
 export {
   input_default
 };
-//# sourceMappingURL=chunk.JRAW7QJL.js.map
+//# sourceMappingURL=chunk.EJKKSDGO.js.map

package/dist/chunks/{chunk.D5YL3H6T.js → chunk.F75WKKCW.js}

@@ -9,13 +9,13 @@ import {
 } from "./chunk.XGXFE6IF.js";
 import {
   FormControlController
-} from "./chunk.P2LNG2PZ.js";
+} from "./chunk.AMTCNRDE.js";
 import {
   watch
 } from "./chunk.VZ7S7YYN.js";
 import {
   SynergyElement
-} from "./chunk.SPPBO7QV.js";
+} from "./chunk.XMUT2KKD.js";
 import {
   __decorateClass
 } from "./chunk.DJOAQ4JU.js";
@@ -357,4 +357,4 @@ __decorateClass([
 export {
   SynTextarea
 };
-//# sourceMappingURL=chunk.D5YL3H6T.js.map
+//# sourceMappingURL=chunk.F75WKKCW.js.map

package/dist/chunks/{chunk.TACOOH3N.js → chunk.GMXJDCBI.js}

@@ -1,6 +1,6 @@
 import {
   SynCheckbox
-} from "./chunk.3CSVGX3J.js";
+} from "./chunk.W2K4VNZU.js";
 
 // src/components/checkbox/checkbox.ts
 var checkbox_default = SynCheckbox;
@@ -9,4 +9,4 @@ SynCheckbox.define("syn-checkbox");
 export {
   checkbox_default
 };
-//# sourceMappingURL=chunk.TACOOH3N.js.map
+//# sourceMappingURL=chunk.GMXJDCBI.js.map

package/dist/chunks/{chunk.44U5VKNJ.js → chunk.H6VNYYUH.js}

@@ -3,13 +3,13 @@ import {
 } from "./chunk.JBYBQ5TQ.js";
 import {
   SynIcon
-} from "./chunk.RKQHPBKM.js";
+} from "./chunk.NROSOMZ6.js";
 import {
   watch
 } from "./chunk.VZ7S7YYN.js";
 import {
   SynergyElement
-} from "./chunk.SPPBO7QV.js";
+} from "./chunk.XMUT2KKD.js";
 import {
   __decorateClass
 } from "./chunk.DJOAQ4JU.js";
@@ -108,4 +108,4 @@ __decorateClass([
 export {
   SynRadio
 };
-//# sourceMappingURL=chunk.44U5VKNJ.js.map
+//# sourceMappingURL=chunk.H6VNYYUH.js.map

package/dist/chunks/{chunk.Z3RZUTQU.js → chunk.HG5QC5EW.js}

@@ -1,6 +1,6 @@
 import {
   formCollections
-} from "./chunk.P2LNG2PZ.js";
+} from "./chunk.AMTCNRDE.js";
 
 // src/utilities/form.ts
 function serialize(form) {
@@ -39,4 +39,4 @@ export {
   serialize,
   getFormControls
 };
-//# sourceMappingURL=chunk.Z3RZUTQU.js.map
+//# sourceMappingURL=chunk.HG5QC5EW.js.map

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

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

package/dist/chunks/chunk.IUC3AWAU.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 var(--syn-focus-ring-width);\n    outline-offset: var(--syn-focus-ring-width);\n  }\n\n  /*\n   * Adjustments for button label paddings\n   * @see https://github.com/synergy-design-system/synergy-design-system/issues/243\n   */\n  .button--has-prefix.button--small .button__label {\n    padding-inline-start: var(--syn-spacing-2x-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-2x-small);\n  }\n\n  .button--has-prefix.button--medium .button__label {\n    padding-inline-start: var(--syn-spacing-x-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-x-small);\n  }\n\n  /**\n   * Size modifiers\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  .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  .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  .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   * Button spacing\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-small);\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-small);\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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/chunks/{chunk.FHYBGERU.js → chunk.JAKBHRC4.js}

@@ -3,10 +3,10 @@ import {
 } from "./chunk.N2I6HVX3.js";
 import {
   LocalizeController
-} from "./chunk.R6VNLE6N.js";
+} from "./chunk.LAB4YJYE.js";
 import {
   SynergyElement
-} from "./chunk.SPPBO7QV.js";
+} from "./chunk.XMUT2KKD.js";
 
 // src/components/spinner/spinner.component.ts
 import { html } from "lit";
@@ -29,4 +29,4 @@ SynSpinner.styles = spinner_styles_default;
 export {
   SynSpinner
 };
-//# sourceMappingURL=chunk.FHYBGERU.js.map
+//# sourceMappingURL=chunk.JAKBHRC4.js.map

package/dist/chunks/{chunk.MJC7VLA2.js → chunk.JW6NUJMF.js}

@@ -1,6 +1,6 @@
 import {
   SynRadioButton
-} from "./chunk.CB2M3AVU.js";
+} from "./chunk.OINL3N23.js";
 
 // src/components/radio-button/radio-button.ts
 var radio_button_default = SynRadioButton;
@@ -9,4 +9,4 @@ SynRadioButton.define("syn-radio-button");
 export {
   radio_button_default
 };
-//# sourceMappingURL=chunk.MJC7VLA2.js.map
+//# sourceMappingURL=chunk.JW6NUJMF.js.map

package/dist/chunks/{chunk.ESQOUQV3.js → chunk.KZMLTHDT.js}

@@ -3,13 +3,13 @@ import {
 } from "./chunk.QHFGD6WW.js";
 import {
   SynIconButton
-} from "./chunk.L6I5ZLBO.js";
+} from "./chunk.5T6QTZ6K.js";
 import {
   LocalizeController
-} from "./chunk.R6VNLE6N.js";
+} from "./chunk.LAB4YJYE.js";
 import {
   SynergyElement
-} from "./chunk.SPPBO7QV.js";
+} from "./chunk.XMUT2KKD.js";
 import {
   __decorateClass
 } from "./chunk.DJOAQ4JU.js";
@@ -72,4 +72,4 @@ __decorateClass([
 export {
   SynTag
 };
-//# sourceMappingURL=chunk.ESQOUQV3.js.map
+//# sourceMappingURL=chunk.KZMLTHDT.js.map

package/dist/chunks/{chunk.AFVZYX7H.js → chunk.L47LNUE3.js}

@@ -1,6 +1,6 @@
 import {
   SynRadioGroup
-} from "./chunk.ADE7GDYK.js";
+} from "./chunk.VIGOUABZ.js";
 
 // src/components/radio-group/radio-group.ts
 var radio_group_default = SynRadioGroup;
@@ -9,4 +9,4 @@ SynRadioGroup.define("syn-radio-group");
 export {
   radio_group_default
 };
-//# sourceMappingURL=chunk.AFVZYX7H.js.map
+//# sourceMappingURL=chunk.L47LNUE3.js.map

package/dist/chunks/chunk.LAB4YJYE.js

@@ -0,0 +1,16 @@
+import {
+  en_default
+} from "./chunk.A3SKDWCT.js";
+
+// src/utilities/localize.ts
+import { LocalizeController as DefaultLocalizationController, registerTranslation } from "@shoelace-style/localize";
+import { registerTranslation as registerTranslation2 } from "@shoelace-style/localize";
+var LocalizeController = class extends DefaultLocalizationController {
+};
+registerTranslation(en_default);
+
+export {
+  LocalizeController,
+  registerTranslation2 as registerTranslation
+};
+//# sourceMappingURL=chunk.LAB4YJYE.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/utilities/localize.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 { LocalizeController as DefaultLocalizationController, registerTranslation } from '@shoelace-style/localize';\nimport en from '../translations/en.js'; // Register English as the default/fallback language\nimport type { Translation as DefaultTranslation } from '@shoelace-style/localize';\n\n// Extend the controller and apply our own translation interface for better typings\nexport class LocalizeController extends DefaultLocalizationController<Translation> {\n  // Technicallly '../translations/en.js' is supposed to work via side-effects. However, by some mystery sometimes the\n  // translations don't get bundled as expected resulting in `no translation found` errors.\n  // This is basically some extra assurance that our translations get registered prior to our localizer connecting in a component\n  // and we don't rely on implicit import ordering.\n  static {\n    registerTranslation(en);\n  }\n}\n\n// Export functions from the localize lib so we have one central place to import them from\nexport { registerTranslation } from '@shoelace-style/localize';\n\nexport interface Translation extends DefaultTranslation {\n  $code: string; // e.g. en, en-GB\n  $name: string; // e.g. English, Espa\u00F1ol\n  $dir: 'ltr' | 'rtl';\n\n  carousel: string;\n  clearEntry: string;\n  close: string;\n  copied: string;\n  copy: string;\n  currentValue: string;\n  error: string;\n  goToSlide: (slide: number, count: number) => string;\n  hidePassword: string;\n  loading: string;\n  nextSlide: string;\n  numOptionsSelected: (num: number) => string;\n  previousSlide: string;\n  progress: string;\n  remove: string;\n  resize: string;\n  scrollToEnd: string;\n  scrollToStart: string;\n  selectAColorFromTheScreen: string;\n  showPassword: string;\n  slideNum: (slide: number) => string;\n  toggleColorFormat: string;\n}\n"],
+  "mappings": ";;;;;AAMA,SAAS,sBAAsB,+BAA+B,2BAA2B;AAgBzF,SAAS,uBAAAA,4BAA2B;AAX7B,IAAM,qBAAN,cAAiC,8BAA2C;AAQnF;AAFI,oBAAoB,UAAE;",
+  "names": ["registerTranslation"]
+}

package/dist/chunks/{chunk.OVVMSN4D.js → chunk.MWDOOCSU.js}

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

package/dist/chunks/{chunk.CAIB544F.js → chunk.N6E3X3S5.js}

@@ -1,6 +1,6 @@
 import {
   SynTag
-} from "./chunk.ESQOUQV3.js";
+} from "./chunk.KZMLTHDT.js";
 
 // src/components/tag/tag.ts
 var tag_default = SynTag;
@@ -9,4 +9,4 @@ SynTag.define("syn-tag");
 export {
   tag_default
 };
-//# sourceMappingURL=chunk.CAIB544F.js.map
+//# sourceMappingURL=chunk.N6E3X3S5.js.map