@synergy-design-system/components 1.0.0-main.3 → 1.0.0-main.4

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/icon/library.system.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 { IconLibrary } from './library.js';\n\n//\n// System icons are a separate library to ensure they're always available, regardless of how the default icon library is\n// configured or if its icons resolve properly.\n//\n// All Synergy components must use the system library instead of the default library. For visual consistency, system\n// icons are a subset of Bootstrap Icons.\n//\nconst icons = {\n  caret: `\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n      <polyline points=\"6 9 12 15 18 9\"></polyline>\n    </svg>\n  `,\n  check: `\n    <svg part=\"checked-icon\" class=\"checkbox__icon\" viewBox=\"0 0 16 16\">\n      <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\" stroke-linecap=\"round\">\n        <g stroke=\"currentColor\">\n          <g transform=\"translate(3.428571, 3.428571)\">\n            <path d=\"M0,5.71428571 L3.42857143,9.14285714\"></path>\n            <path d=\"M9.14285714,0 L3.42857143,9.14285714\"></path>\n          </g>\n        </g>\n      </g>\n    </svg>\n  `,\n  'chevron-down': `\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-chevron-down\" viewBox=\"0 0 16 16\">\n      <path fill-rule=\"evenodd\" d=\"M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z\"/>\n    </svg>\n  `,\n  'chevron-left': `\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-chevron-left\" viewBox=\"0 0 16 16\">\n      <path fill-rule=\"evenodd\" d=\"M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z\"/>\n    </svg>\n  `,\n  'chevron-right': `\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-chevron-right\" viewBox=\"0 0 16 16\">\n      <path fill-rule=\"evenodd\" d=\"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z\"/>\n    </svg>\n  `,\n  copy: `\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-files\" viewBox=\"0 0 16 16\" part=\"svg\">\n      <path d=\"M13 0H6a2 2 0 0 0-2 2 2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2 2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm0 13V4a2 2 0 0 0-2-2H5a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1zM3 4a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4z\"></path>\n    </svg>\n  `,\n  eye: `\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-eye\" viewBox=\"0 0 16 16\">\n      <path d=\"M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z\"/>\n      <path d=\"M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z\"/>\n    </svg>\n  `,\n  'eye-slash': `\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-eye-slash\" viewBox=\"0 0 16 16\">\n      <path d=\"M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z\"/>\n      <path d=\"M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z\"/>\n      <path d=\"M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12-.708.708z\"/>\n    </svg>\n  `,\n  eyedropper: `\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-eyedropper\" viewBox=\"0 0 16 16\">\n      <path d=\"M13.354.646a1.207 1.207 0 0 0-1.708 0L8.5 3.793l-.646-.647a.5.5 0 1 0-.708.708L8.293 5l-7.147 7.146A.5.5 0 0 0 1 12.5v1.793l-.854.853a.5.5 0 1 0 .708.707L1.707 15H3.5a.5.5 0 0 0 .354-.146L11 7.707l1.146 1.147a.5.5 0 0 0 .708-.708l-.647-.646 3.147-3.146a1.207 1.207 0 0 0 0-1.708l-2-2zM2 12.707l7-7L10.293 7l-7 7H2v-1.293z\"></path>\n    </svg>\n  `,\n  'grip-vertical': `\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-grip-vertical\" viewBox=\"0 0 16 16\">\n      <path d=\"M7 2a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zM7 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zM7 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-3 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-3 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z\"></path>\n    </svg>\n  `,\n  indeterminate: `\n    <svg part=\"indeterminate-icon\" class=\"checkbox__icon\" viewBox=\"0 0 16 16\">\n      <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\" stroke-linecap=\"round\">\n        <g stroke=\"currentColor\" stroke-width=\"2\">\n          <g transform=\"translate(2.285714, 6.857143)\">\n            <path d=\"M10.2857143,1.14285714 L1.14285714,1.14285714\"></path>\n          </g>\n        </g>\n      </g>\n    </svg>\n  `,\n  'person-fill': `\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-person-fill\" viewBox=\"0 0 16 16\">\n      <path d=\"M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z\"/>\n    </svg>\n  `,\n  'play-fill': `\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-play-fill\" viewBox=\"0 0 16 16\">\n      <path d=\"m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z\"></path>\n    </svg>\n  `,\n  'pause-fill': `\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-pause-fill\" viewBox=\"0 0 16 16\">\n      <path d=\"M5.5 3.5A1.5 1.5 0 0 1 7 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5zm5 0A1.5 1.5 0 0 1 12 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5z\"></path>\n    </svg>\n  `,\n  radio: `\n    <svg part=\"checked-icon\" class=\"radio__icon\" viewBox=\"0 0 16 16\">\n      <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n        <g fill=\"currentColor\">\n          <circle cx=\"8\" cy=\"8\" r=\"3.42857143\"></circle>\n        </g>\n      </g>\n    </svg>\n  `,\n  'star-fill': `\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-star-fill\" viewBox=\"0 0 16 16\">\n      <path d=\"M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z\"/>\n    </svg>\n  `,\n  'x-lg': `\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-x-lg\" viewBox=\"0 0 16 16\">\n      <path d=\"M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z\"/>\n    </svg>\n  `,\n  'x-circle-fill': `\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-x-circle-fill\" viewBox=\"0 0 16 16\">\n      <path d=\"M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z\"></path>\n    </svg>\n  `\n};\n\nconst systemLibrary: IconLibrary = {\n  name: 'system',\n  resolver: (name: keyof typeof icons) => {\n    if (name in icons) {\n      return `data:image/svg+xml,${encodeURIComponent(icons[name])}`;\n    }\n    return '';\n  }\n};\n\nexport default systemLibrary;\n"],
+  "mappings": ";AAeA,IAAM,QAAQ;AAAA,EACZ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAKP,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYP,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA,EAKhB,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA,EAKhB,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA,EAKjB,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,EAKN,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAML,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOb,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,EAKZ,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA,EAKjB,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWf,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA,EAKf,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA,EAKb,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA,EAKd,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASP,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA,EAKb,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,EAKR,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAKnB;AAEA,IAAM,gBAA6B;AAAA,EACjC,MAAM;AAAA,EACN,UAAU,CAAC,SAA6B;AACtC,QAAI,QAAQ,OAAO;AACjB,aAAO,sBAAsB,mBAAmB,MAAM,IAAI,CAAC,CAAC;AAAA,IAC9D;AACA,WAAO;AAAA,EACT;AACF;AAEA,IAAO,yBAAQ;",
+  "names": []
+}

package/dist/chunks/chunk.WDCAHRYG.js

@@ -0,0 +1,273 @@
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk.DJOAQ4JU.js";
+
+// src/internal/form.ts
+var formCollections = /* @__PURE__ */ new WeakMap();
+var reportValidityOverloads = /* @__PURE__ */ new WeakMap();
+var userInteractedControls = /* @__PURE__ */ new WeakSet();
+var interactions = /* @__PURE__ */ new WeakMap();
+var FormControlController = class {
+  constructor(host, options) {
+    this.handleFormData = (event) => {
+      const disabled = this.options.disabled(this.host);
+      const name = this.options.name(this.host);
+      const value = this.options.value(this.host);
+      const isButton = this.host.tagName.toLowerCase() === "syn-button";
+      if (!disabled && !isButton && typeof name === "string" && name.length > 0 && typeof value !== "undefined") {
+        if (Array.isArray(value)) {
+          value.forEach((val) => {
+            event.formData.append(name, val.toString());
+          });
+        } else {
+          event.formData.append(name, value.toString());
+        }
+      }
+    };
+    this.handleFormSubmit = (event) => {
+      var _a;
+      const disabled = this.options.disabled(this.host);
+      const reportValidity = this.options.reportValidity;
+      if (this.form && !this.form.noValidate) {
+        (_a = formCollections.get(this.form)) == null ? void 0 : _a.forEach((control) => {
+          this.setUserInteracted(control, true);
+        });
+      }
+      if (this.form && !this.form.noValidate && !disabled && !reportValidity(this.host)) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+      }
+    };
+    this.handleFormReset = () => {
+      this.options.setValue(this.host, this.options.defaultValue(this.host));
+      this.setUserInteracted(this.host, false);
+      interactions.set(this.host, []);
+    };
+    this.handleInteraction = (event) => {
+      const emittedEvents = interactions.get(this.host);
+      if (!emittedEvents.includes(event.type)) {
+        emittedEvents.push(event.type);
+      }
+      if (emittedEvents.length === this.options.assumeInteractionOn.length) {
+        this.setUserInteracted(this.host, true);
+      }
+    };
+    this.reportFormValidity = () => {
+      if (this.form && !this.form.noValidate) {
+        const elements = this.form.querySelectorAll("*");
+        for (const element of elements) {
+          if (typeof element.reportValidity === "function") {
+            if (!element.reportValidity()) {
+              return false;
+            }
+          }
+        }
+      }
+      return true;
+    };
+    (this.host = host).addController(this);
+    this.options = __spreadValues({
+      form: (input) => {
+        if (input.hasAttribute("form") && input.getAttribute("form") !== "") {
+          const root = input.getRootNode();
+          const formId = input.getAttribute("form");
+          if (formId) {
+            return root.getElementById(formId);
+          }
+        }
+        return input.closest("form");
+      },
+      name: (input) => input.name,
+      value: (input) => input.value,
+      defaultValue: (input) => input.defaultValue,
+      disabled: (input) => {
+        var _a;
+        return (_a = input.disabled) != null ? _a : false;
+      },
+      reportValidity: (input) => typeof input.reportValidity === "function" ? input.reportValidity() : true,
+      setValue: (input, value) => input.value = value,
+      assumeInteractionOn: ["syn-input"]
+    }, options);
+  }
+  hostConnected() {
+    const form = this.options.form(this.host);
+    if (form) {
+      this.attachForm(form);
+    }
+    interactions.set(this.host, []);
+    this.options.assumeInteractionOn.forEach((event) => {
+      this.host.addEventListener(event, this.handleInteraction);
+    });
+  }
+  hostDisconnected() {
+    this.detachForm();
+    interactions.delete(this.host);
+    this.options.assumeInteractionOn.forEach((event) => {
+      this.host.removeEventListener(event, this.handleInteraction);
+    });
+  }
+  hostUpdated() {
+    const form = this.options.form(this.host);
+    if (!form) {
+      this.detachForm();
+    }
+    if (form && this.form !== form) {
+      this.detachForm();
+      this.attachForm(form);
+    }
+    if (this.host.hasUpdated) {
+      this.setValidity(this.host.validity.valid);
+    }
+  }
+  attachForm(form) {
+    if (form) {
+      this.form = form;
+      if (formCollections.has(this.form)) {
+        formCollections.get(this.form).add(this.host);
+      } else {
+        formCollections.set(this.form, /* @__PURE__ */ new Set([this.host]));
+      }
+      this.form.addEventListener("formdata", this.handleFormData);
+      this.form.addEventListener("submit", this.handleFormSubmit);
+      this.form.addEventListener("reset", this.handleFormReset);
+      if (!reportValidityOverloads.has(this.form)) {
+        reportValidityOverloads.set(this.form, this.form.reportValidity);
+        this.form.reportValidity = () => this.reportFormValidity();
+      }
+    } else {
+      this.form = void 0;
+    }
+  }
+  detachForm() {
+    var _a;
+    if (this.form) {
+      (_a = formCollections.get(this.form)) == null ? void 0 : _a.delete(this.host);
+      this.form.removeEventListener("formdata", this.handleFormData);
+      this.form.removeEventListener("submit", this.handleFormSubmit);
+      this.form.removeEventListener("reset", this.handleFormReset);
+      if (reportValidityOverloads.has(this.form)) {
+        this.form.reportValidity = reportValidityOverloads.get(this.form);
+        reportValidityOverloads.delete(this.form);
+      }
+    }
+    this.form = void 0;
+  }
+  setUserInteracted(el, hasInteracted) {
+    if (hasInteracted) {
+      userInteractedControls.add(el);
+    } else {
+      userInteractedControls.delete(el);
+    }
+    el.requestUpdate();
+  }
+  doAction(type, submitter) {
+    if (this.form) {
+      const button = document.createElement("button");
+      button.type = type;
+      button.style.position = "absolute";
+      button.style.width = "0";
+      button.style.height = "0";
+      button.style.clipPath = "inset(50%)";
+      button.style.overflow = "hidden";
+      button.style.whiteSpace = "nowrap";
+      if (submitter) {
+        button.name = submitter.name;
+        button.value = submitter.value;
+        ["formaction", "formenctype", "formmethod", "formnovalidate", "formtarget"].forEach((attr) => {
+          if (submitter.hasAttribute(attr)) {
+            button.setAttribute(attr, submitter.getAttribute(attr));
+          }
+        });
+      }
+      this.form.append(button);
+      button.click();
+      button.remove();
+    }
+  }
+  /** Returns the associated `<form>` element, if one exists. */
+  getForm() {
+    var _a;
+    return (_a = this.form) != null ? _a : null;
+  }
+  /** Resets the form, restoring all the control to their default value */
+  reset(submitter) {
+    this.doAction("reset", submitter);
+  }
+  /** Submits the form, triggering validation and form data injection. */
+  submit(submitter) {
+    this.doAction("submit", submitter);
+  }
+  /**
+   * Synchronously sets the form control's validity. Call this when you know the future validity but need to update
+   * the host element immediately, i.e. before Lit updates the component in the next update.
+   */
+  setValidity(isValid) {
+    const host = this.host;
+    const hasInteracted = Boolean(userInteractedControls.has(host));
+    const required = Boolean(host.required);
+    host.toggleAttribute("data-required", required);
+    host.toggleAttribute("data-optional", !required);
+    host.toggleAttribute("data-invalid", !isValid);
+    host.toggleAttribute("data-valid", isValid);
+    host.toggleAttribute("data-user-invalid", !isValid && hasInteracted);
+    host.toggleAttribute("data-user-valid", isValid && hasInteracted);
+  }
+  /**
+   * Updates the form control's validity based on the current value of `host.validity.valid`. Call this when anything
+   * that affects constraint validation changes so the component receives the correct validity states.
+   */
+  updateValidity() {
+    const host = this.host;
+    this.setValidity(host.validity.valid);
+  }
+  /**
+   * Dispatches a non-bubbling, cancelable custom event of type `syn-invalid`.
+   * If the `syn-invalid` event will be cancelled then the original `invalid`
+   * event (which may have been passed as argument) will also be cancelled.
+   * If no original `invalid` event has been passed then the `syn-invalid`
+   * event will be cancelled before being dispatched.
+   */
+  emitInvalidEvent(originalInvalidEvent) {
+    const slInvalidEvent = new CustomEvent("syn-invalid", {
+      bubbles: false,
+      composed: false,
+      cancelable: true,
+      detail: {}
+    });
+    if (!originalInvalidEvent) {
+      slInvalidEvent.preventDefault();
+    }
+    if (!this.host.dispatchEvent(slInvalidEvent)) {
+      originalInvalidEvent == null ? void 0 : originalInvalidEvent.preventDefault();
+    }
+  }
+};
+var validValidityState = Object.freeze({
+  badInput: false,
+  customError: false,
+  patternMismatch: false,
+  rangeOverflow: false,
+  rangeUnderflow: false,
+  stepMismatch: false,
+  tooLong: false,
+  tooShort: false,
+  typeMismatch: false,
+  valid: true,
+  valueMissing: false
+});
+var valueMissingValidityState = Object.freeze(__spreadProps(__spreadValues({}, validValidityState), {
+  valid: false,
+  valueMissing: true
+}));
+var customErrorValidityState = Object.freeze(__spreadProps(__spreadValues({}, validValidityState), {
+  valid: false,
+  customError: true
+}));
+
+export {
+  formCollections,
+  FormControlController,
+  validValidityState
+};
+//# sourceMappingURL=chunk.WDCAHRYG.js.map

package/dist/chunks/chunk.WDCAHRYG.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();\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  /** 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        if (input.hasAttribute('form') && input.getAttribute('form') !== '') {\n          const root = input.getRootNode() as Document | ShadowRoot;\n          const formId = input.getAttribute('form');\n\n          if (formId) {\n            return root.getElementById(formId) 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      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    } else {\n      this.form = undefined;\n    }\n  }\n\n  private detachForm() {\n    if (this.form) {\n      // Remove this element from the form's collection\n      formCollections.get(this.form)?.delete(this.host);\n\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\n    this.form = undefined;\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 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.WTCUSH7V.js

@@ -0,0 +1,42 @@
+import {
+  formCollections
+} from "./chunk.WDCAHRYG.js";
+
+// src/utilities/form.ts
+function serialize(form) {
+  const formData = new FormData(form);
+  const object = {};
+  formData.forEach((value, key) => {
+    if (Reflect.has(object, key)) {
+      const entry = object[key];
+      if (Array.isArray(entry)) {
+        entry.push(value);
+      } else {
+        object[key] = [object[key], value];
+      }
+    } else {
+      object[key] = value;
+    }
+  });
+  return object;
+}
+function getFormControls(form) {
+  const rootNode = form.getRootNode();
+  const allNodes = [...rootNode.querySelectorAll("*")];
+  const formControls = [...form.elements];
+  const collection = formCollections.get(form);
+  const synergyFormControls = collection ? Array.from(collection) : [];
+  return [...formControls, ...synergyFormControls].sort((a, b) => {
+    if (allNodes.indexOf(a) < allNodes.indexOf(b))
+      return -1;
+    if (allNodes.indexOf(a) > allNodes.indexOf(b))
+      return 1;
+    return 0;
+  });
+}
+
+export {
+  serialize,
+  getFormControls
+};
+//# sourceMappingURL=chunk.WTCUSH7V.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/utilities/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 { formCollections } from '../internal/form.js';\n\n/**\n * Serializes a form and returns a plain object. If a form control with the same name appears more than once, the\n * property will be converted to an array.\n */\nexport function serialize(form: HTMLFormElement) {\n  const formData = new FormData(form);\n  const object: Record<string, unknown> = {};\n\n  formData.forEach((value, key) => {\n    if (Reflect.has(object, key)) {\n      const entry = object[key];\n      if (Array.isArray(entry)) {\n        entry.push(value);\n      } else {\n        object[key] = [object[key], value];\n      }\n    } else {\n      object[key] = value;\n    }\n  });\n\n  return object;\n}\n\n/**\n * Returns all form controls that are associated with the specified form. Includes both native and Synergy form\n * controls. Use this function in lieu of the `HTMLFormElement.elements` property, which doesn't recognize Synergy\n * form controls.\n */\nexport function getFormControls(form: HTMLFormElement) {\n  const rootNode = form.getRootNode() as Document | ShadowRoot;\n  const allNodes = [...rootNode.querySelectorAll('*')];\n  const formControls = [...form.elements];\n  const collection = formCollections.get(form);\n  const synergyFormControls = collection ? Array.from(collection) : [];\n\n  // To return form controls in the right order, we sort by DOM index\n  return [...formControls, ...synergyFormControls].sort((a: Element, b: Element) => {\n    if (allNodes.indexOf(a) < allNodes.indexOf(b)) return -1;\n    if (allNodes.indexOf(a) > allNodes.indexOf(b)) return 1;\n    return 0;\n  });\n}\n"],
+  "mappings": ";;;;;AAYO,SAAS,UAAU,MAAuB;AAC/C,QAAM,WAAW,IAAI,SAAS,IAAI;AAClC,QAAM,SAAkC,CAAC;AAEzC,WAAS,QAAQ,CAAC,OAAO,QAAQ;AAC/B,QAAI,QAAQ,IAAI,QAAQ,GAAG,GAAG;AAC5B,YAAM,QAAQ,OAAO,GAAG;AACxB,UAAI,MAAM,QAAQ,KAAK,GAAG;AACxB,cAAM,KAAK,KAAK;AAAA,MAClB,OAAO;AACL,eAAO,GAAG,IAAI,CAAC,OAAO,GAAG,GAAG,KAAK;AAAA,MACnC;AAAA,IACF,OAAO;AACL,aAAO,GAAG,IAAI;AAAA,IAChB;AAAA,EACF,CAAC;AAED,SAAO;AACT;AAOO,SAAS,gBAAgB,MAAuB;AACrD,QAAM,WAAW,KAAK,YAAY;AAClC,QAAM,WAAW,CAAC,GAAG,SAAS,iBAAiB,GAAG,CAAC;AACnD,QAAM,eAAe,CAAC,GAAG,KAAK,QAAQ;AACtC,QAAM,aAAa,gBAAgB,IAAI,IAAI;AAC3C,QAAM,sBAAsB,aAAa,MAAM,KAAK,UAAU,IAAI,CAAC;AAGnE,SAAO,CAAC,GAAG,cAAc,GAAG,mBAAmB,EAAE,KAAK,CAAC,GAAY,MAAe;AAChF,QAAI,SAAS,QAAQ,CAAC,IAAI,SAAS,QAAQ,CAAC;AAAG,aAAO;AACtD,QAAI,SAAS,QAAQ,CAAC,IAAI,SAAS,QAAQ,CAAC;AAAG,aAAO;AACtD,WAAO;AAAA,EACT,CAAC;AACH;",
+  "names": []
+}

package/dist/chunks/chunk.XGXFE6IF.js

@@ -0,0 +1,49 @@
+// src/internal/slot.ts
+var HasSlotController = class {
+  constructor(host, ...slotNames) {
+    this.slotNames = [];
+    this.handleSlotChange = (event) => {
+      const slot = event.target;
+      if (this.slotNames.includes("[default]") && !slot.name || slot.name && this.slotNames.includes(slot.name)) {
+        this.host.requestUpdate();
+      }
+    };
+    (this.host = host).addController(this);
+    this.slotNames = slotNames;
+  }
+  hasDefaultSlot() {
+    return [...this.host.childNodes].some((node) => {
+      if (node.nodeType === node.TEXT_NODE && node.textContent.trim() !== "") {
+        return true;
+      }
+      if (node.nodeType === node.ELEMENT_NODE) {
+        const el = node;
+        const tagName = el.tagName.toLowerCase();
+        if (tagName === "syn-visually-hidden") {
+          return false;
+        }
+        if (!el.hasAttribute("slot")) {
+          return true;
+        }
+      }
+      return false;
+    });
+  }
+  hasNamedSlot(name) {
+    return this.host.querySelector(`:scope > [slot="${name}"]`) !== null;
+  }
+  test(slotName) {
+    return slotName === "[default]" ? this.hasDefaultSlot() : this.hasNamedSlot(slotName);
+  }
+  hostConnected() {
+    this.host.shadowRoot.addEventListener("slotchange", this.handleSlotChange);
+  }
+  hostDisconnected() {
+    this.host.shadowRoot.removeEventListener("slotchange", this.handleSlotChange);
+  }
+};
+
+export {
+  HasSlotController
+};
+//# sourceMappingURL=chunk.XGXFE6IF.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/internal/slot.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';\n\n/** A reactive controller that determines when slots exist. */\nexport class HasSlotController implements ReactiveController {\n  host: ReactiveControllerHost & Element;\n  slotNames: string[] = [];\n\n  constructor(host: ReactiveControllerHost & Element, ...slotNames: string[]) {\n    (this.host = host).addController(this);\n    this.slotNames = slotNames;\n  }\n\n  private hasDefaultSlot() {\n    return [...this.host.childNodes].some(node => {\n      if (node.nodeType === node.TEXT_NODE && node.textContent!.trim() !== '') {\n        return true;\n      }\n\n      if (node.nodeType === node.ELEMENT_NODE) {\n        const el = node as HTMLElement;\n        const tagName = el.tagName.toLowerCase();\n\n        // Ignore visually hidden elements since they aren't rendered\n        if (tagName === 'syn-visually-hidden') {\n          return false;\n        }\n\n        // If it doesn't have a slot attribute, it's part of the default slot\n        if (!el.hasAttribute('slot')) {\n          return true;\n        }\n      }\n\n      return false;\n    });\n  }\n\n  private hasNamedSlot(name: string) {\n    return this.host.querySelector(`:scope > [slot=\"${name}\"]`) !== null;\n  }\n\n  test(slotName: string) {\n    return slotName === '[default]' ? this.hasDefaultSlot() : this.hasNamedSlot(slotName);\n  }\n\n  hostConnected() {\n    this.host.shadowRoot!.addEventListener('slotchange', this.handleSlotChange);\n  }\n\n  hostDisconnected() {\n    this.host.shadowRoot!.removeEventListener('slotchange', this.handleSlotChange);\n  }\n\n  private handleSlotChange = (event: Event) => {\n    const slot = event.target as HTMLSlotElement;\n\n    if ((this.slotNames.includes('[default]') && !slot.name) || (slot.name && this.slotNames.includes(slot.name))) {\n      this.host.requestUpdate();\n    }\n  };\n}\n\n/**\n * Given a slot, this function iterates over all of its assigned element and text nodes and returns the concatenated\n * HTML as a string. This is useful because we can't use slot.innerHTML as an alternative.\n */\nexport function getInnerHTML(slot: HTMLSlotElement): string {\n  const nodes = slot.assignedNodes({ flatten: true });\n  let html = '';\n\n  [...nodes].forEach(node => {\n    if (node.nodeType === Node.ELEMENT_NODE) {\n      html += (node as HTMLElement).outerHTML;\n    }\n\n    if (node.nodeType === Node.TEXT_NODE) {\n      html += node.textContent;\n    }\n  });\n\n  return html;\n}\n\n/**\n * Given a slot, this function iterates over all of its assigned text nodes and returns the concatenated text as a\n * string. This is useful because we can't use slot.textContent as an alternative.\n */\nexport function getTextContent(slot: HTMLSlotElement | undefined | null): string {\n  if (!slot) {\n    return '';\n  }\n  const nodes = slot.assignedNodes({ flatten: true });\n  let text = '';\n\n  [...nodes].forEach(node => {\n    if (node.nodeType === Node.TEXT_NODE) {\n      text += node.textContent;\n    }\n  });\n\n  return text;\n}\n"],
+  "mappings": ";AASO,IAAM,oBAAN,MAAsD;AAAA,EAI3D,YAAY,SAA2C,WAAqB;AAF5E,qBAAsB,CAAC;AAgDvB,SAAQ,mBAAmB,CAAC,UAAiB;AAC3C,YAAM,OAAO,MAAM;AAEnB,UAAK,KAAK,UAAU,SAAS,WAAW,KAAK,CAAC,KAAK,QAAU,KAAK,QAAQ,KAAK,UAAU,SAAS,KAAK,IAAI,GAAI;AAC7G,aAAK,KAAK,cAAc;AAAA,MAC1B;AAAA,IACF;AAnDE,KAAC,KAAK,OAAO,MAAM,cAAc,IAAI;AACrC,SAAK,YAAY;AAAA,EACnB;AAAA,EAEQ,iBAAiB;AACvB,WAAO,CAAC,GAAG,KAAK,KAAK,UAAU,EAAE,KAAK,UAAQ;AAC5C,UAAI,KAAK,aAAa,KAAK,aAAa,KAAK,YAAa,KAAK,MAAM,IAAI;AACvE,eAAO;AAAA,MACT;AAEA,UAAI,KAAK,aAAa,KAAK,cAAc;AACvC,cAAM,KAAK;AACX,cAAM,UAAU,GAAG,QAAQ,YAAY;AAGvC,YAAI,YAAY,uBAAuB;AACrC,iBAAO;AAAA,QACT;AAGA,YAAI,CAAC,GAAG,aAAa,MAAM,GAAG;AAC5B,iBAAO;AAAA,QACT;AAAA,MACF;AAEA,aAAO;AAAA,IACT,CAAC;AAAA,EACH;AAAA,EAEQ,aAAa,MAAc;AACjC,WAAO,KAAK,KAAK,cAAc,mBAAmB,IAAI,IAAI,MAAM;AAAA,EAClE;AAAA,EAEA,KAAK,UAAkB;AACrB,WAAO,aAAa,cAAc,KAAK,eAAe,IAAI,KAAK,aAAa,QAAQ;AAAA,EACtF;AAAA,EAEA,gBAAgB;AACd,SAAK,KAAK,WAAY,iBAAiB,cAAc,KAAK,gBAAgB;AAAA,EAC5E;AAAA,EAEA,mBAAmB;AACjB,SAAK,KAAK,WAAY,oBAAoB,cAAc,KAAK,gBAAgB;AAAA,EAC/E;AASF;",
+  "names": []
+}

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

@@ -0,0 +1,123 @@
+import SynergyElement from '../../internal/synergy-element.js';
+import SynIcon from '../icon/icon.component.js';
+import SynSpinner from '../spinner/spinner.component.js';
+import type { CSSResultGroup } from 'lit';
+import type { SynergyFormControl } from '../../internal/synergy-element.js';
+/**
+ * @summary Buttons represent actions that are available to the user.
+ * @documentation https://synergy.style/components/button
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency syn-icon
+ * @dependency syn-spinner
+ *
+ * @event syn-blur - Emitted when the button loses focus.
+ * @event syn-focus - Emitted when the button gains focus.
+ * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+ *
+ * @slot - The button's label.
+ * @slot prefix - A presentational prefix icon or similar element.
+ * @slot suffix - A presentational suffix icon or similar element.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart prefix - The container that wraps the prefix.
+ * @csspart label - The button's label.
+ * @csspart suffix - The container that wraps the suffix.
+ * @csspart caret - The button's caret icon, an `<syn-icon>` element.
+ * @csspart spinner - The spinner that shows when the button is in the loading state.
+ */
+export default class SynButton extends SynergyElement implements SynergyFormControl {
+    static styles: CSSResultGroup;
+    static dependencies: {
+        'syn-icon': typeof SynIcon;
+        'syn-spinner': typeof SynSpinner;
+    };
+    private readonly formControlController;
+    private readonly hasSlotController;
+    private readonly localize;
+    button: HTMLButtonElement | HTMLLinkElement;
+    private hasFocus;
+    invalid: boolean;
+    title: string;
+    /** The button's theme variant. */
+    variant: 'default' | '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. */
+    caret: boolean;
+    /** Disables the button. */
+    disabled: boolean;
+    /** Draws the button in a loading state. */
+    loading: boolean;
+    /**
+     * The type of button. Note that the default value is `button` instead of `submit`, which is opposite of how native
+     * `<button>` elements behave. When the type is `submit`, the button will submit the surrounding form.
+     */
+    type: 'button' | 'submit' | 'reset';
+    /**
+     * The name of the button, submitted as a name/value pair with form data, but only when this button is the submitter.
+     * This attribute is ignored when `href` is present.
+     */
+    name: string;
+    /**
+     * The value of the button, submitted as a pair with the button's name as part of the form data, but only when this
+     * button is the submitter. This attribute is ignored when `href` is present.
+     */
+    value: string;
+    /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */
+    href: string;
+    /** Tells the browser where to open the link. Only used when `href` is present. */
+    target: '_blank' | '_parent' | '_self' | '_top';
+    /**
+     * When using `href`, this attribute will map to the underlying link's `rel` attribute. Unlike regular links, the
+     * default is `noreferrer noopener` to prevent security exploits. However, if you're using `target` to point to a
+     * specific tab/window, this will prevent that from working correctly. You can remove or change the default value by
+     * setting the attribute to an empty string or a value of your choice, respectively.
+     */
+    rel: string;
+    /** Tells the browser to download the linked file as this filename. Only used when `href` is present. */
+    download?: string;
+    /**
+     * The "form owner" to associate the button with. If omitted, the closest containing form will be used instead. The
+     * value of this attribute must be an id of a form in the same document or shadow root as the button.
+     */
+    form: string;
+    /** Used to override the form owner's `action` attribute. */
+    formAction: string;
+    /** Used to override the form owner's `enctype` attribute.  */
+    formEnctype: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain';
+    /** Used to override the form owner's `method` attribute.  */
+    formMethod: 'post' | 'get';
+    /** Used to override the form owner's `novalidate` attribute. */
+    formNoValidate: boolean;
+    /** Used to override the form owner's `target` attribute. */
+    formTarget: '_self' | '_blank' | '_parent' | '_top' | string;
+    /** Gets the validity state object */
+    get validity(): ValidityState;
+    /** Gets the validation message */
+    get validationMessage(): string;
+    firstUpdated(): void;
+    private handleBlur;
+    private handleFocus;
+    private handleClick;
+    private handleInvalid;
+    private isButton;
+    private isLink;
+    handleDisabledChange(): void;
+    /** Simulates a click on the button. */
+    click(): void;
+    /** Sets focus on the button. */
+    focus(options?: FocusOptions): void;
+    /** Removes focus from the button. */
+    blur(): void;
+    /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
+    checkValidity(): boolean;
+    /** Gets the associated form, if one exists. */
+    getForm(): HTMLFormElement | null;
+    /** Checks for validity and shows the browser's validation message if the control is invalid. */
+    reportValidity(): boolean;
+    /** Sets a custom validation message. Pass an empty string to restore validity. */
+    setCustomValidity(message: string): void;
+    render(): import("lit").TemplateResult;
+}

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

@@ -0,0 +1,24 @@
+import {
+  SynButton
+} from "../../chunks/chunk.FUYWF5Y2.js";
+import "../../chunks/chunk.2FIY3TX5.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.5PZUAKCS.js";
+import "../../chunks/chunk.SLLG4KJR.js";
+import "../../chunks/chunk.BREU4ILT.js";
+import "../../chunks/chunk.5OIEI73E.js";
+import "../../chunks/chunk.6C4JXZZN.js";
+import "../../chunks/chunk.U7ZJ22QM.js";
+import "../../chunks/chunk.C7624ITA.js";
+import "../../chunks/chunk.O7USYXBT.js";
+import "../../chunks/chunk.DJOAQ4JU.js";
+export {
+  SynButton as default
+};
+//# sourceMappingURL=button.component.js.map

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

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

package/dist/components/button/button.custom.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

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

@@ -0,0 +1,8 @@
+import {
+  button_custom_styles_default
+} from "../../chunks/chunk.DREO4ZTN.js";
+import "../../chunks/chunk.DJOAQ4JU.js";
+export {
+  button_custom_styles_default as default
+};
+//# sourceMappingURL=button.custom.styles.js.map