@synergy-design-system/components 1.0.0-main.13 → 1.0.0-main.14

package/dist/chunks/{chunk.HOGDOKQS.js → chunk.NUQ6NORO.js}

@@ -3,19 +3,19 @@ import {
 } from "./chunk.WFAJR3FN.js";
 import {
   checkbox_styles_default
-} from "./chunk.MFFJYORB.js";
+} from "./chunk.4CBN5LPQ.js";
 import {
   FormControlController
-} from "./chunk.WDCAHRYG.js";
+} from "./chunk.P2LNG2PZ.js";
 import {
   SynIcon
-} from "./chunk.LJVC6UEV.js";
+} from "./chunk.JBK2MO2R.js";
 import {
   watch
 } from "./chunk.VZ7S7YYN.js";
 import {
   SynergyElement
-} from "./chunk.UFEBKPYW.js";
+} from "./chunk.4CPH57PN.js";
 import {
   __decorateClass
 } from "./chunk.DJOAQ4JU.js";
@@ -221,4 +221,4 @@ __decorateClass([
 export {
   SynCheckbox
 };
-//# sourceMappingURL=chunk.HOGDOKQS.js.map
+//# sourceMappingURL=chunk.NUQ6NORO.js.map

package/dist/chunks/chunk.OVVMSN4D.js

@@ -0,0 +1,37 @@
+import {
+  button_styles_default
+} from "./chunk.YTS5TRJZ.js";
+
+// src/components/radio-button/radio-button.styles.ts
+import { css } from "lit";
+var radio_button_styles_default = css`
+	/* stylelint-disable */
+  ${button_styles_default}
+
+  .button__prefix,
+  .button__suffix,
+  .button__label {
+    display: inline-flex;
+    position: relative;
+    align-items: center;
+  }
+
+  /* We use a hidden input so constraint validation errors work, since they don't appear to show when used with buttons.
+    We can't actually hide it, though, otherwise the messages will be suppressed by the browser. */
+  .hidden-input {
+    all: unset;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    outline: dotted 1px red;
+    opacity: 0;
+    z-index: -1;
+  }
+`;
+
+export {
+  radio_button_styles_default
+};
+//# sourceMappingURL=chunk.OVVMSN4D.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/radio-button/radio-button.styles.ts"],
+  "sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n// Removing this comment will prevent it from being managed by it.\n// ---------------------------------------------------------------------\n\n/* eslint-disable */\nimport { css } from 'lit';\nimport buttonStyles from '../button/button.styles.js';\n\nexport default css`\n\t/* stylelint-disable */\n  ${buttonStyles}\n\n  .button__prefix,\n  .button__suffix,\n  .button__label {\n    display: inline-flex;\n    position: relative;\n    align-items: center;\n  }\n\n  /* We use a hidden input so constraint validation errors work, since they don't appear to show when used with buttons.\n    We can't actually hide it, though, otherwise the messages will be suppressed by the browser. */\n  .hidden-input {\n    all: unset;\n    position: absolute;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    right: 0;\n    outline: dotted 1px red;\n    opacity: 0;\n    z-index: -1;\n  }\n`;\n"],
+  "mappings": ";;;;;AAMA,SAAS,WAAW;AAGpB,IAAO,8BAAQ;AAAA;AAAA,IAEX,qBAAY;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.WANL6A7U.js → chunk.OXUFFH57.js}

@@ -1,9 +1,9 @@
+import {
+  form_control_styles_default
+} from "./chunk.JHXCBOUD.js";
 import {
   input_custom_styles_default
 } from "./chunk.W46CFM2R.js";
-import {
-  form_control_styles_default
-} from "./chunk.VNC7HKGP.js";
 import {
   component_styles_default
 } from "./chunk.O7USYXBT.js";
@@ -315,4 +315,4 @@ var input_styles_default = css`
 export {
   input_styles_default
 };
-//# sourceMappingURL=chunk.WANL6A7U.js.map
+//# sourceMappingURL=chunk.OXUFFH57.js.map

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

@@ -268,6 +268,8 @@ var customErrorValidityState = Object.freeze(__spreadProps(__spreadValues({}, va
 export {
   formCollections,
   FormControlController,
-  validValidityState
+  validValidityState,
+  valueMissingValidityState,
+  customErrorValidityState
 };
-//# sourceMappingURL=chunk.WDCAHRYG.js.map
+//# sourceMappingURL=chunk.P2LNG2PZ.js.map

package/dist/chunks/chunk.PS3OVBUX.js

@@ -0,0 +1,111 @@
+import {
+  radio_styles_default
+} from "./chunk.JBYBQ5TQ.js";
+import {
+  SynIcon
+} from "./chunk.JBK2MO2R.js";
+import {
+  watch
+} from "./chunk.VZ7S7YYN.js";
+import {
+  SynergyElement
+} from "./chunk.4CPH57PN.js";
+import {
+  __decorateClass
+} from "./chunk.DJOAQ4JU.js";
+
+// src/components/radio/radio.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html } from "lit";
+import { property, state } from "lit/decorators.js";
+var SynRadio = class extends SynergyElement {
+  constructor() {
+    super();
+    this.checked = false;
+    this.hasFocus = false;
+    this.size = "medium";
+    this.disabled = false;
+    this.handleBlur = () => {
+      this.hasFocus = false;
+      this.emit("syn-blur");
+    };
+    this.handleClick = () => {
+      if (!this.disabled) {
+        this.checked = true;
+      }
+    };
+    this.handleFocus = () => {
+      this.hasFocus = true;
+      this.emit("syn-focus");
+    };
+    this.addEventListener("blur", this.handleBlur);
+    this.addEventListener("click", this.handleClick);
+    this.addEventListener("focus", this.handleFocus);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setInitialAttributes();
+  }
+  setInitialAttributes() {
+    this.setAttribute("role", "radio");
+    this.setAttribute("tabindex", "-1");
+    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+  }
+  handleCheckedChange() {
+    this.setAttribute("aria-checked", this.checked ? "true" : "false");
+    this.setAttribute("tabindex", this.checked ? "0" : "-1");
+  }
+  handleDisabledChange() {
+    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+  }
+  render() {
+    return html`
+      <span
+        part="base"
+        class=${classMap({
+      radio: true,
+      "radio--checked": this.checked,
+      "radio--disabled": this.disabled,
+      "radio--focused": this.hasFocus,
+      "radio--small": this.size === "small",
+      "radio--medium": this.size === "medium",
+      "radio--large": this.size === "large"
+    })}
+      >
+        <span part="${`control${this.checked ? " control--checked" : ""}`}" class="radio__control">
+          ${this.checked ? html` <syn-icon part="checked-icon" class="radio__checked-icon" library="system" name="radio"></syn-icon> ` : ""}
+        </span>
+
+        <slot part="label" class="radio__label"></slot>
+      </span>
+    `;
+  }
+};
+SynRadio.styles = radio_styles_default;
+SynRadio.dependencies = { "syn-icon": SynIcon };
+__decorateClass([
+  state()
+], SynRadio.prototype, "checked", 2);
+__decorateClass([
+  state()
+], SynRadio.prototype, "hasFocus", 2);
+__decorateClass([
+  property()
+], SynRadio.prototype, "value", 2);
+__decorateClass([
+  property({ reflect: true })
+], SynRadio.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SynRadio.prototype, "disabled", 2);
+__decorateClass([
+  watch("checked")
+], SynRadio.prototype, "handleCheckedChange", 1);
+__decorateClass([
+  watch("disabled", { waitUntilFirstUpdate: true })
+], SynRadio.prototype, "handleDisabledChange", 1);
+
+export {
+  SynRadio
+};
+//# sourceMappingURL=chunk.PS3OVBUX.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/radio/radio.component.ts"],
+  "sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n// Removing this comment will prevent it from being managed by it.\n// ---------------------------------------------------------------------\n\n/* eslint-disable */\nimport { classMap } from 'lit/directives/class-map.js';\nimport { html } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { watch } from '../../internal/watch.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport SynIcon from '../icon/icon.component.js';\nimport styles from './radio.styles.js';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * @summary Radios allow the user to select a single option from a group.\n * @documentation https://synergy.style/components/radio\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon\n *\n * @slot - The radio's label.\n *\n * @event syn-blur - Emitted when the control loses focus.\n * @event syn-focus - Emitted when the control gains focus.\n *\n * @csspart base - The component's base wrapper.\n * @csspart control - The circular container that wraps the radio's checked state.\n * @csspart control--checked - The radio control when the radio is checked.\n * @csspart checked-icon - The checked icon, an `<syn-icon>` element.\n * @csspart label - The container that wraps the radio's label.\n */\nexport default class SynRadio extends SynergyElement {\n  static styles: CSSResultGroup = styles;\n  static dependencies = { 'syn-icon': SynIcon };\n\n  @state() checked = false;\n  @state() protected hasFocus = false;\n\n  /** The radio's value. When selected, the radio group will receive this value. */\n  @property() value: string;\n\n  /**\n   * The radio's size. When used inside a radio group, the size will be determined by the radio group's size so this\n   * attribute can typically be omitted.\n   */\n  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Disables the radio. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  constructor() {\n    super();\n    this.addEventListener('blur', this.handleBlur);\n    this.addEventListener('click', this.handleClick);\n    this.addEventListener('focus', this.handleFocus);\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setInitialAttributes();\n  }\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n    this.emit('syn-blur');\n  };\n\n  private handleClick = () => {\n    if (!this.disabled) {\n      this.checked = true;\n    }\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    this.emit('syn-focus');\n  };\n\n  private setInitialAttributes() {\n    this.setAttribute('role', 'radio');\n    this.setAttribute('tabindex', '-1');\n    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');\n  }\n\n  @watch('checked')\n  handleCheckedChange() {\n    this.setAttribute('aria-checked', this.checked ? 'true' : 'false');\n    this.setAttribute('tabindex', this.checked ? '0' : '-1');\n  }\n\n  @watch('disabled', { waitUntilFirstUpdate: true })\n  handleDisabledChange() {\n    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');\n  }\n\n  render() {\n    return html`\n      <span\n        part=\"base\"\n        class=${classMap({\n          radio: true,\n          'radio--checked': this.checked,\n          'radio--disabled': this.disabled,\n          'radio--focused': this.hasFocus,\n          'radio--small': this.size === 'small',\n          'radio--medium': this.size === 'medium',\n          'radio--large': this.size === 'large'\n        })}\n      >\n        <span part=\"${`control${this.checked ? ' control--checked' : ''}`}\" class=\"radio__control\">\n          ${this.checked\n            ? html` <syn-icon part=\"checked-icon\" class=\"radio__checked-icon\" library=\"system\" name=\"radio\"></syn-icon> `\n            : ''}\n        </span>\n\n        <slot part=\"label\" class=\"radio__label\"></slot>\n      </span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'syn-radio': SynRadio;\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;AAMA,SAAS,gBAAgB;AACzB,SAAS,YAAY;AACrB,SAAS,UAAU,aAAa;AA0BhC,IAAqB,WAArB,cAAsC,eAAe;AAAA,EAmBnD,cAAc;AACZ,UAAM;AAhBC,mBAAU;AACV,SAAU,WAAW;AASD,gBAAqC;AAGtB,oBAAW;AAcvD,SAAQ,aAAa,MAAM;AACzB,WAAK,WAAW;AAChB,WAAK,KAAK,UAAU;AAAA,IACtB;AAEA,SAAQ,cAAc,MAAM;AAC1B,UAAI,CAAC,KAAK,UAAU;AAClB,aAAK,UAAU;AAAA,MACjB;AAAA,IACF;AAEA,SAAQ,cAAc,MAAM;AAC1B,WAAK,WAAW;AAChB,WAAK,KAAK,WAAW;AAAA,IACvB;AAxBE,SAAK,iBAAiB,QAAQ,KAAK,UAAU;AAC7C,SAAK,iBAAiB,SAAS,KAAK,WAAW;AAC/C,SAAK,iBAAiB,SAAS,KAAK,WAAW;AAAA,EACjD;AAAA,EAEA,oBAAoB;AAClB,UAAM,kBAAkB;AACxB,SAAK,qBAAqB;AAAA,EAC5B;AAAA,EAkBQ,uBAAuB;AAC7B,SAAK,aAAa,QAAQ,OAAO;AACjC,SAAK,aAAa,YAAY,IAAI;AAClC,SAAK,aAAa,iBAAiB,KAAK,WAAW,SAAS,OAAO;AAAA,EACrE;AAAA,EAGA,sBAAsB;AACpB,SAAK,aAAa,gBAAgB,KAAK,UAAU,SAAS,OAAO;AACjE,SAAK,aAAa,YAAY,KAAK,UAAU,MAAM,IAAI;AAAA,EACzD;AAAA,EAGA,uBAAuB;AACrB,SAAK,aAAa,iBAAiB,KAAK,WAAW,SAAS,OAAO;AAAA,EACrE;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA;AAAA,gBAGK,SAAS;AAAA,MACf,OAAO;AAAA,MACP,kBAAkB,KAAK;AAAA,MACvB,mBAAmB,KAAK;AAAA,MACxB,kBAAkB,KAAK;AAAA,MACvB,gBAAgB,KAAK,SAAS;AAAA,MAC9B,iBAAiB,KAAK,SAAS;AAAA,MAC/B,gBAAgB,KAAK,SAAS;AAAA,IAChC,CAAC,CAAC;AAAA;AAAA,sBAEY,UAAU,KAAK,UAAU,sBAAsB,EAAE,EAAE;AAAA,YAC7D,KAAK,UACH,8GACA,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMd;AACF;AAxFqB,SACZ,SAAyB;AADb,SAEZ,eAAe,EAAE,YAAY,QAAQ;AAEnC;AAAA,EAAR,MAAM;AAAA,GAJY,SAIV;AACU;AAAA,EAAlB,MAAM;AAAA,GALY,SAKA;AAGP;AAAA,EAAX,SAAS;AAAA,GARS,SAQP;AAMiB;AAAA,EAA5B,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAdR,SAcU;AAGe;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAjBvB,SAiByB;AAqC5C;AAAA,EADC,MAAM,SAAS;AAAA,GArDG,SAsDnB;AAMA;AAAA,EADC,MAAM,YAAY,EAAE,sBAAsB,KAAK,CAAC;AAAA,GA3D9B,SA4DnB;",
+  "names": []
+}

package/dist/chunks/chunk.Q55ULCHV.js

@@ -0,0 +1,12 @@
+import {
+  SynRadioButton
+} from "./chunk.FUY24CRJ.js";
+
+// src/components/radio-button/radio-button.ts
+var radio_button_default = SynRadioButton;
+SynRadioButton.define("syn-radio-button");
+
+export {
+  radio_button_default
+};
+//# sourceMappingURL=chunk.Q55ULCHV.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/radio-button/radio-button.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 SynRadioButton from './radio-button.component.js';\n\nexport * from './radio-button.component.js';\nexport default SynRadioButton;\n\nSynRadioButton.define('syn-radio-button');\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'syn-radio-button': SynRadioButton;\n  }\n}\n"],
+  "mappings": ";;;;;AASA,IAAO,uBAAQ;AAEf,eAAe,OAAO,kBAAkB;",
+  "names": []
+}

package/dist/chunks/{chunk.KALIQJUH.js → chunk.USYEVNFG.js}

@@ -1,12 +1,12 @@
-import {
-  LocalizeController
-} from "./chunk.R6VNLE6N.js";
 import {
   spinner_styles_default
 } from "./chunk.N2I6HVX3.js";
+import {
+  LocalizeController
+} from "./chunk.R6VNLE6N.js";
 import {
   SynergyElement
-} from "./chunk.UFEBKPYW.js";
+} from "./chunk.4CPH57PN.js";
 
 // src/components/spinner/spinner.component.ts
 import { html } from "lit";
@@ -29,4 +29,4 @@ SynSpinner.styles = spinner_styles_default;
 export {
   SynSpinner
 };
-//# sourceMappingURL=chunk.KALIQJUH.js.map
+//# sourceMappingURL=chunk.USYEVNFG.js.map

package/dist/chunks/chunk.UYGJ3ZOA.js

@@ -0,0 +1,12 @@
+import {
+  SynRadio
+} from "./chunk.PS3OVBUX.js";
+
+// src/components/radio/radio.ts
+var radio_default = SynRadio;
+SynRadio.define("syn-radio");
+
+export {
+  radio_default
+};
+//# sourceMappingURL=chunk.UYGJ3ZOA.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/radio/radio.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 SynRadio from './radio.component.js';\n\nexport * from './radio.component.js';\nexport default SynRadio;\n\nSynRadio.define('syn-radio');\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'syn-radio': SynRadio;\n  }\n}\n"],
+  "mappings": ";;;;;AASA,IAAO,gBAAQ;AAEf,SAAS,OAAO,WAAW;",
+  "names": []
+}

package/dist/chunks/chunk.V6VND4OF.js

@@ -0,0 +1,49 @@
+// src/components/radio/radio.custom.styles.ts
+import { css } from "lit";
+var radio_custom_styles_default = css`
+
+  .radio {
+    padding: var(--syn-spacing-2x-small) 0;
+  }
+
+  :host(:focus-visible) .radio__control {
+    outline: var(--syn-focus-ring);
+    outline-offset: var(--syn-focus-ring-width);
+  }
+
+  /* Checked + hover */
+  .radio.radio--checked:not(.radio--disabled):hover  .radio__control {
+    background-color: var(--syn-color-primary-950);
+    border-color: var(--syn-color-primary-950);
+  }
+
+  /* Hover */
+  .radio:not(.radio--checked):not(.radio--disabled):hover .radio__control {
+    border-color: var(--syn-color-primary-900);
+  }
+
+  /*
+ * Size modifiers
+ */
+
+  .radio--small {
+    --toggle-size: var(--syn-input-font-size-small);
+  }
+
+  .radio--medium {
+    --toggle-size: var(--syn-font-size-medium);
+  }
+
+  .radio--large {
+    --toggle-size: var(--syn-spacing-large);
+  }
+
+  .radio--small .radio__label, .radio--large .radio__label  {
+    margin-inline-start: var(--syn-spacing-x-small);
+  }
+`;
+
+export {
+  radio_custom_styles_default
+};
+//# sourceMappingURL=chunk.V6VND4OF.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/radio/radio.custom.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n\n  .radio {\n    padding: var(--syn-spacing-2x-small) 0;\n  }\n\n  :host(:focus-visible) .radio__control {\n    outline: var(--syn-focus-ring);\n    outline-offset: var(--syn-focus-ring-width);\n  }\n\n  /* Checked + hover */\n  .radio.radio--checked:not(.radio--disabled):hover  .radio__control {\n    background-color: var(--syn-color-primary-950);\n    border-color: var(--syn-color-primary-950);\n  }\n\n  /* Hover */\n  .radio:not(.radio--checked):not(.radio--disabled):hover .radio__control {\n    border-color: var(--syn-color-primary-900);\n  }\n\n  /*\n * Size modifiers\n */\n\n  .radio--small {\n    --toggle-size: var(--syn-input-font-size-small);\n  }\n\n  .radio--medium {\n    --toggle-size: var(--syn-font-size-medium);\n  }\n\n  .radio--large {\n    --toggle-size: var(--syn-spacing-large);\n  }\n\n  .radio--small .radio__label, .radio--large .radio__label  {\n    margin-inline-start: var(--syn-spacing-x-small);\n  }\n`;\n"],
+  "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,8BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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.TKXG7VM3.js → chunk.X3XOXXN3.js}

@@ -1,6 +1,6 @@
 import {
   SynButton
-} from "./chunk.7QGGFKPO.js";
+} from "./chunk.4OPZ7M2M.js";
 
 // src/components/button/button.ts
 var button_default = SynButton;
@@ -9,4 +9,4 @@ SynButton.define("syn-button");
 export {
   button_default
 };
-//# sourceMappingURL=chunk.TKXG7VM3.js.map
+//# sourceMappingURL=chunk.X3XOXXN3.js.map

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

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

package/dist/chunks/chunk.ZXJWGKP4.js

@@ -0,0 +1,12 @@
+import {
+  SynButtonGroup
+} from "./chunk.FVF5BUAX.js";
+
+// src/components/button-group/button-group.ts
+var button_group_default = SynButtonGroup;
+SynButtonGroup.define("syn-button-group");
+
+export {
+  button_group_default
+};
+//# sourceMappingURL=chunk.ZXJWGKP4.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/button-group/button-group.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 SynButtonGroup from './button-group.component.js';\n\nexport * from './button-group.component.js';\nexport default SynButtonGroup;\n\nSynButtonGroup.define('syn-button-group');\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'syn-button-group': SynButtonGroup;\n  }\n}\n"],
+  "mappings": ";;;;;AASA,IAAO,uBAAQ;AAEf,eAAe,OAAO,kBAAkB;",
+  "names": []
+}

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

@@ -1,22 +1,22 @@
 import {
   SynButton
-} from "../../chunks/chunk.7QGGFKPO.js";
-import "../../chunks/chunk.KALIQJUH.js";
+} from "../../chunks/chunk.4OPZ7M2M.js";
+import "../../chunks/chunk.USYEVNFG.js";
+import "../../chunks/chunk.N2I6HVX3.js";
 import "../../chunks/chunk.R6VNLE6N.js";
 import "../../chunks/chunk.A3SKDWCT.js";
-import "../../chunks/chunk.N2I6HVX3.js";
 import "../../chunks/chunk.XGXFE6IF.js";
-import "../../chunks/chunk.YTS5TRJZ.js";
-import "../../chunks/chunk.FVSP4LXX.js";
-import "../../chunks/chunk.WDCAHRYG.js";
-import "../../chunks/chunk.LJVC6UEV.js";
+import "../../chunks/chunk.P2LNG2PZ.js";
+import "../../chunks/chunk.JBK2MO2R.js";
 import "../../chunks/chunk.VZ7S7YYN.js";
-import "../../chunks/chunk.UFEBKPYW.js";
-import "../../chunks/chunk.BREU4ILT.js";
 import "../../chunks/chunk.5OIEI73E.js";
 import "../../chunks/chunk.6C4JXZZN.js";
 import "../../chunks/chunk.U7ZJ22QM.js";
+import "../../chunks/chunk.BREU4ILT.js";
 import "../../chunks/chunk.C7624ITA.js";
+import "../../chunks/chunk.YTS5TRJZ.js";
+import "../../chunks/chunk.FVSP4LXX.js";
+import "../../chunks/chunk.4CPH57PN.js";
 import "../../chunks/chunk.O7USYXBT.js";
 import "../../chunks/chunk.DJOAQ4JU.js";
 export {

package/dist/components/button/button.js

@@ -1,23 +1,23 @@
 import {
   button_default
-} from "../../chunks/chunk.TKXG7VM3.js";
-import "../../chunks/chunk.7QGGFKPO.js";
-import "../../chunks/chunk.KALIQJUH.js";
+} from "../../chunks/chunk.X3XOXXN3.js";
+import "../../chunks/chunk.4OPZ7M2M.js";
+import "../../chunks/chunk.USYEVNFG.js";
+import "../../chunks/chunk.N2I6HVX3.js";
 import "../../chunks/chunk.R6VNLE6N.js";
 import "../../chunks/chunk.A3SKDWCT.js";
-import "../../chunks/chunk.N2I6HVX3.js";
 import "../../chunks/chunk.XGXFE6IF.js";
-import "../../chunks/chunk.YTS5TRJZ.js";
-import "../../chunks/chunk.FVSP4LXX.js";
-import "../../chunks/chunk.WDCAHRYG.js";
-import "../../chunks/chunk.LJVC6UEV.js";
+import "../../chunks/chunk.P2LNG2PZ.js";
+import "../../chunks/chunk.JBK2MO2R.js";
 import "../../chunks/chunk.VZ7S7YYN.js";
-import "../../chunks/chunk.UFEBKPYW.js";
-import "../../chunks/chunk.BREU4ILT.js";
 import "../../chunks/chunk.5OIEI73E.js";
 import "../../chunks/chunk.6C4JXZZN.js";
 import "../../chunks/chunk.U7ZJ22QM.js";
+import "../../chunks/chunk.BREU4ILT.js";
 import "../../chunks/chunk.C7624ITA.js";
+import "../../chunks/chunk.YTS5TRJZ.js";
+import "../../chunks/chunk.FVSP4LXX.js";
+import "../../chunks/chunk.4CPH57PN.js";
 import "../../chunks/chunk.O7USYXBT.js";
 import "../../chunks/chunk.DJOAQ4JU.js";
 export {

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

@@ -0,0 +1,28 @@
+import SynergyElement from '../../internal/synergy-element.js';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary Button groups can be used to group related buttons into sections.
+ * @documentation https://synergy.style/components/button-group
+ * @status stable
+ * @since 2.0
+ *
+ * @slot - One or more `<syn-button>` elements to display in the button group.
+ *
+ * @csspart base - The component's base wrapper.
+ */
+export default class SynButtonGroup extends SynergyElement {
+    static styles: CSSResultGroup;
+    defaultSlot: HTMLSlotElement;
+    disableRole: boolean;
+    /**
+     * A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive
+     * devices when interacting with the control and is strongly recommended.
+     */
+    label: string;
+    private handleFocus;
+    private handleBlur;
+    private handleMouseOver;
+    private handleMouseOut;
+    private handleSlotChange;
+    render(): import("lit").TemplateResult<1>;
+}

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

@@ -0,0 +1,11 @@
+import {
+  SynButtonGroup
+} from "../../chunks/chunk.FVF5BUAX.js";
+import "../../chunks/chunk.4CPH57PN.js";
+import "../../chunks/chunk.4ZURABYO.js";
+import "../../chunks/chunk.O7USYXBT.js";
+import "../../chunks/chunk.DJOAQ4JU.js";
+export {
+  SynButtonGroup as default
+};
+//# sourceMappingURL=button-group.component.js.map

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

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

package/dist/components/button-group/button-group.d.ts

@@ -0,0 +1,8 @@
+import SynButtonGroup from './button-group.component.js';
+export * from './button-group.component.js';
+export default SynButtonGroup;
+declare global {
+    interface HTMLElementTagNameMap {
+        'syn-button-group': SynButtonGroup;
+    }
+}

package/dist/components/button-group/button-group.js

@@ -0,0 +1,12 @@
+import {
+  button_group_default
+} from "../../chunks/chunk.ZXJWGKP4.js";
+import "../../chunks/chunk.FVF5BUAX.js";
+import "../../chunks/chunk.4CPH57PN.js";
+import "../../chunks/chunk.4ZURABYO.js";
+import "../../chunks/chunk.O7USYXBT.js";
+import "../../chunks/chunk.DJOAQ4JU.js";
+export {
+  button_group_default as default
+};
+//# sourceMappingURL=button-group.js.map

package/dist/components/button-group/button-group.js.map

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

package/dist/components/button-group/button-group.styles.d.ts

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

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

@@ -0,0 +1,9 @@
+import {
+  button_group_styles_default
+} from "../../chunks/chunk.4ZURABYO.js";
+import "../../chunks/chunk.O7USYXBT.js";
+import "../../chunks/chunk.DJOAQ4JU.js";
+export {
+  button_group_styles_default as default
+};
+//# sourceMappingURL=button-group.styles.js.map

package/dist/components/button-group/button-group.styles.js.map

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

package/dist/components/checkbox/checkbox.component.js

@@ -1,19 +1,19 @@
 import {
   SynCheckbox
-} from "../../chunks/chunk.HOGDOKQS.js";
+} from "../../chunks/chunk.NUQ6NORO.js";
 import "../../chunks/chunk.WFAJR3FN.js";
-import "../../chunks/chunk.MFFJYORB.js";
-import "../../chunks/chunk.WDCAHRYG.js";
-import "../../chunks/chunk.LJVC6UEV.js";
+import "../../chunks/chunk.4CBN5LPQ.js";
+import "../../chunks/chunk.2XZKXVMR.js";
+import "../../chunks/chunk.P2LNG2PZ.js";
+import "../../chunks/chunk.JBK2MO2R.js";
 import "../../chunks/chunk.VZ7S7YYN.js";
-import "../../chunks/chunk.UFEBKPYW.js";
-import "../../chunks/chunk.BREU4ILT.js";
 import "../../chunks/chunk.5OIEI73E.js";
 import "../../chunks/chunk.6C4JXZZN.js";
 import "../../chunks/chunk.U7ZJ22QM.js";
+import "../../chunks/chunk.BREU4ILT.js";
 import "../../chunks/chunk.C7624ITA.js";
+import "../../chunks/chunk.4CPH57PN.js";
 import "../../chunks/chunk.O7USYXBT.js";
-import "../../chunks/chunk.2XZKXVMR.js";
 import "../../chunks/chunk.DJOAQ4JU.js";
 export {
   SynCheckbox as default