@synergy-design-system/components 3.0.0 → 3.1.0

package/dist/chunks/{chunk.N6C27EXQ.js → chunk.FLJJ2OCR.js}

@@ -14,6 +14,7 @@ var defaultSettings = {
     SynAccordion: "medium",
     SynAlert: "medium",
     SynButton: "medium",
+    SynButtonGroup: "medium",
     SynCheckbox: "medium",
     SynCombobox: "medium",
     SynDetails: "medium",
@@ -33,6 +34,7 @@ var defaultSettings = {
     SynAlert: "primary",
     SynBadge: "primary",
     SynButton: "outline",
+    SynButtonGroup: "outline",
     SynSideNav: "default",
     SynValidate: "native"
   }
@@ -48,6 +50,7 @@ var INITIAL_DEFAULT_SETTINGS = {
     SynAccordion: "medium",
     SynAlert: "medium",
     SynButton: "medium",
+    SynButtonGroup: "medium",
     SynCheckbox: "medium",
     SynCombobox: "medium",
     SynDetails: "medium",
@@ -67,6 +70,7 @@ var INITIAL_DEFAULT_SETTINGS = {
     SynAlert: "primary",
     SynBadge: "primary",
     SynButton: "outline",
+    SynButtonGroup: "outline",
     SynSideNav: "default",
     SynValidate: "native"
   }
@@ -76,4 +80,4 @@ export {
   defaultSettings,
   INITIAL_DEFAULT_SETTINGS
 };
-//# sourceMappingURL=chunk.N6C27EXQ.js.map
+//# sourceMappingURL=chunk.FLJJ2OCR.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/utilities/defaultSettings/base.ts"],
+  "sourcesContent": ["/* eslint-disable @stylistic/quotes */\n// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED file for @synergy-design-system/components\n// Please do not edit this file directly!\n// It will get recreated when running pnpm build.\n// ---------------------------------------------------------------------\n\n// Global imports\nimport { modernNumericStrategy } from \"../../components/input/strategies.js\";\n\n// Type imports\nimport type SynAccordion from \"../../components/accordion/accordion.js\";\nimport type SynAlert from \"../../components/alert/alert.js\";\nimport type SynBadge from \"../../components/badge/badge.js\";\nimport type SynButtonGroup from \"../../components/button-group/button-group.js\";\nimport type SynButton from \"../../components/button/button.js\";\nimport type SynCheckbox from \"../../components/checkbox/checkbox.js\";\nimport type SynCombobox from \"../../components/combobox/combobox.js\";\nimport type SynDetails from \"../../components/details/details.js\";\nimport type SynFile from \"../../components/file/file.js\";\nimport type SynIconButton from \"../../components/icon-button/icon-button.js\";\nimport type SynInput from \"../../components/input/input.js\";\nimport type SynRadioButton from \"../../components/radio-button/radio-button.js\";\nimport type SynRadioGroup from \"../../components/radio-group/radio-group.js\";\nimport type SynRadio from \"../../components/radio/radio.js\";\nimport type SynRange from \"../../components/range/range.js\";\nimport type SynSelect from \"../../components/select/select.js\";\nimport type SynSideNav from \"../../components/side-nav/side-nav.js\";\nimport type SynSwitch from \"../../components/switch/switch.js\";\nimport type SynTag from \"../../components/tag/tag.js\";\nimport type SynTextarea from \"../../components/textarea/textarea.js\";\nimport type SynValidate from \"../../components/validate/validate.js\";\nimport type SynergyElement from \"../../internal/synergy-element.js\";\nimport type { SynDefaultChangedAttribute } from \"../../events/events.js\";\n\n// Core types\n\n/**\n * Custom helper type that adds decorated properties from\n * the globalSettings helper.\n */\nexport type GlobalSettingsEnabledElement = SynergyElement & {\n  __originalDecoratedClassName: string;\n  overrideGlobalSettings: (\n    changedProperties: SynDefaultChangedAttribute[],\n  ) => void;\n};\n\n/**\n * Allows for partial recursive types\n */\nexport type RecursivePartial<T> = {\n  [P in keyof T]?: T[P] extends object ? RecursivePartial<T[P]> : T[P];\n};\n\n/**\n * Allowed value for a default setting\n * Gets the value of a given attribute for a given component\n */\nexport type AllowedValueForDefaultSetting<\n  Elm extends SynergyElement,\n  Attr extends keyof Elm,\n> = Elm[Attr];\n\n/**\n * List of all components that have default values\n */\nexport type ComponentNamesWithDefaultValues =\n  | \"SynAccordion\"\n  | \"SynAlert\"\n  | \"SynBadge\"\n  | \"SynButton\"\n  | \"SynButtonGroup\"\n  | \"SynCheckbox\"\n  | \"SynCombobox\"\n  | \"SynDetails\"\n  | \"SynFile\"\n  | \"SynIconButton\"\n  | \"SynInput\"\n  | \"SynRadio\"\n  | \"SynRadioButton\"\n  | \"SynRadioGroup\"\n  | \"SynRange\"\n  | \"SynSelect\"\n  | \"SynSideNav\"\n  | \"SynSwitch\"\n  | \"SynTag\"\n  | \"SynTextarea\"\n  | \"SynValidate\";\n\n/**\n * Extracts all available default settings for a given component\n */\nexport type ExtractSettingsForElement<C extends SynergyElement> = {\n  [key in keyof SynDefaultSettings]?: key extends keyof C\n    ? AllowedValueForDefaultSetting<C, key>\n    : never;\n};\n\n/**\n * Default settings map for all component values that have defaults set\n */\nexport type SynDefaultSettings = {\n  delimiter: {\n    SynSelect?: AllowedValueForDefaultSetting<SynSelect, \"delimiter\">;\n  };\n  numericStrategy: {\n    SynInput?: AllowedValueForDefaultSetting<SynInput, \"numericStrategy\">;\n  };\n  size: {\n    SynAccordion?: AllowedValueForDefaultSetting<SynAccordion, \"size\">;\n    SynAlert?: AllowedValueForDefaultSetting<SynAlert, \"size\">;\n    SynButton?: AllowedValueForDefaultSetting<SynButton, \"size\">;\n    SynButtonGroup?: AllowedValueForDefaultSetting<SynButtonGroup, \"size\">;\n    SynCheckbox?: AllowedValueForDefaultSetting<SynCheckbox, \"size\">;\n    SynCombobox?: AllowedValueForDefaultSetting<SynCombobox, \"size\">;\n    SynDetails?: AllowedValueForDefaultSetting<SynDetails, \"size\">;\n    SynFile?: AllowedValueForDefaultSetting<SynFile, \"size\">;\n    SynIconButton?: AllowedValueForDefaultSetting<SynIconButton, \"size\">;\n    SynInput?: AllowedValueForDefaultSetting<SynInput, \"size\">;\n    SynRadio?: AllowedValueForDefaultSetting<SynRadio, \"size\">;\n    SynRadioButton?: AllowedValueForDefaultSetting<SynRadioButton, \"size\">;\n    SynRadioGroup?: AllowedValueForDefaultSetting<SynRadioGroup, \"size\">;\n    SynRange?: AllowedValueForDefaultSetting<SynRange, \"size\">;\n    SynSelect?: AllowedValueForDefaultSetting<SynSelect, \"size\">;\n    SynSwitch?: AllowedValueForDefaultSetting<SynSwitch, \"size\">;\n    SynTag?: AllowedValueForDefaultSetting<SynTag, \"size\">;\n    SynTextarea?: AllowedValueForDefaultSetting<SynTextarea, \"size\">;\n  };\n  variant: {\n    SynAlert?: AllowedValueForDefaultSetting<SynAlert, \"variant\">;\n    SynBadge?: AllowedValueForDefaultSetting<SynBadge, \"variant\">;\n    SynButton?: AllowedValueForDefaultSetting<SynButton, \"variant\">;\n    SynButtonGroup?: AllowedValueForDefaultSetting<SynButtonGroup, \"variant\">;\n    SynSideNav?: AllowedValueForDefaultSetting<SynSideNav, \"variant\">;\n    SynValidate?: AllowedValueForDefaultSetting<SynValidate, \"variant\">;\n  };\n};\n\n// Exports\n\n/**\n * Default settings for all components\n */\nexport const defaultSettings: SynDefaultSettings = {\n  delimiter: {\n    SynSelect: \" \",\n  },\n  numericStrategy: {\n    SynInput: modernNumericStrategy,\n  },\n  size: {\n    SynAccordion: \"medium\",\n    SynAlert: \"medium\",\n    SynButton: \"medium\",\n    SynButtonGroup: \"medium\",\n    SynCheckbox: \"medium\",\n    SynCombobox: \"medium\",\n    SynDetails: \"medium\",\n    SynFile: \"medium\",\n    SynIconButton: \"inherit\",\n    SynInput: \"medium\",\n    SynRadio: \"medium\",\n    SynRadioButton: \"medium\",\n    SynRadioGroup: \"medium\",\n    SynRange: \"medium\",\n    SynSelect: \"medium\",\n    SynSwitch: \"medium\",\n    SynTag: \"medium\",\n    SynTextarea: \"medium\",\n  },\n  variant: {\n    SynAlert: \"primary\",\n    SynBadge: \"primary\",\n    SynButton: \"outline\",\n    SynButtonGroup: \"outline\",\n    SynSideNav: \"default\",\n    SynValidate: \"native\",\n  },\n};\n\n/**\n * Initial default settings for all components\n */\nexport const INITIAL_DEFAULT_SETTINGS: SynDefaultSettings = {\n  delimiter: {\n    SynSelect: \" \",\n  },\n  numericStrategy: {\n    SynInput: modernNumericStrategy,\n  },\n  size: {\n    SynAccordion: \"medium\",\n    SynAlert: \"medium\",\n    SynButton: \"medium\",\n    SynButtonGroup: \"medium\",\n    SynCheckbox: \"medium\",\n    SynCombobox: \"medium\",\n    SynDetails: \"medium\",\n    SynFile: \"medium\",\n    SynIconButton: \"inherit\",\n    SynInput: \"medium\",\n    SynRadio: \"medium\",\n    SynRadioButton: \"medium\",\n    SynRadioGroup: \"medium\",\n    SynRange: \"medium\",\n    SynSelect: \"medium\",\n    SynSwitch: \"medium\",\n    SynTag: \"medium\",\n    SynTextarea: \"medium\",\n  },\n  variant: {\n    SynAlert: \"primary\",\n    SynBadge: \"primary\",\n    SynButton: \"outline\",\n    SynButtonGroup: \"outline\",\n    SynSideNav: \"default\",\n    SynValidate: \"native\",\n  },\n};\n"],
+  "mappings": ";;;;;AAgJO,IAAM,kBAAsC;AAAA,EACjD,WAAW;AAAA,IACT,WAAW;AAAA,EACb;AAAA,EACA,iBAAiB;AAAA,IACf,UAAU;AAAA,EACZ;AAAA,EACA,MAAM;AAAA,IACJ,cAAc;AAAA,IACd,UAAU;AAAA,IACV,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,aAAa;AAAA,IACb,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,eAAe;AAAA,IACf,UAAU;AAAA,IACV,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB,eAAe;AAAA,IACf,UAAU;AAAA,IACV,WAAW;AAAA,IACX,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,aAAa;AAAA,EACf;AAAA,EACA,SAAS;AAAA,IACP,UAAU;AAAA,IACV,UAAU;AAAA,IACV,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,aAAa;AAAA,EACf;AACF;AAKO,IAAM,2BAA+C;AAAA,EAC1D,WAAW;AAAA,IACT,WAAW;AAAA,EACb;AAAA,EACA,iBAAiB;AAAA,IACf,UAAU;AAAA,EACZ;AAAA,EACA,MAAM;AAAA,IACJ,cAAc;AAAA,IACd,UAAU;AAAA,IACV,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,aAAa;AAAA,IACb,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,eAAe;AAAA,IACf,UAAU;AAAA,IACV,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB,eAAe;AAAA,IACf,UAAU;AAAA,IACV,WAAW;AAAA,IACX,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,aAAa;AAAA,EACf;AAAA,EACA,SAAS;AAAA,IACP,UAAU;AAAA,IACV,UAAU;AAAA,IACV,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,aAAa;AAAA,EACf;AACF;",
+  "names": []
+}

package/dist/chunks/{chunk.R5WFWL7W.js → chunk.FM6IAWK2.js}

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

package/dist/chunks/{chunk.2GP2EYG4.js → chunk.I4TQPMB7.js}

@@ -1,12 +1,12 @@
-import {
-  SynIcon
-} from "./chunk.GJIDYO3Z.js";
 import {
   breadcrumb_custom_styles_default
 } from "./chunk.32CYREEV.js";
 import {
   breadcrumb_styles_default
 } from "./chunk.S22BO5SF.js";
+import {
+  SynIcon
+} from "./chunk.Q6XDV7O7.js";
 import {
   LocalizeController
 } from "./chunk.OAQRCZOO.js";
@@ -15,7 +15,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.JG7YXWHG.js";
+} from "./chunk.FBQ7NUNW.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -91,4 +91,4 @@ __decorateClass([
 export {
   SynBreadcrumb
 };
-//# sourceMappingURL=chunk.2GP2EYG4.js.map
+//# sourceMappingURL=chunk.I4TQPMB7.js.map

package/dist/chunks/{chunk.7SIMUMVH.js → chunk.I64H5F6D.js}

@@ -1,9 +1,9 @@
-import {
-  progress_ring_custom_styles_default
-} from "./chunk.GCTLPTMT.js";
 import {
   progress_ring_styles_default
 } from "./chunk.RMIDAEF5.js";
+import {
+  progress_ring_custom_styles_default
+} from "./chunk.GCTLPTMT.js";
 import {
   LocalizeController
 } from "./chunk.OAQRCZOO.js";
@@ -12,7 +12,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.JG7YXWHG.js";
+} from "./chunk.FBQ7NUNW.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -76,4 +76,4 @@ __decorateClass([
 export {
   SynProgressRing
 };
-//# sourceMappingURL=chunk.7SIMUMVH.js.map
+//# sourceMappingURL=chunk.I64H5F6D.js.map

package/dist/chunks/{chunk.U6VNE4JX.js → chunk.IBWQFVMJ.js}

@@ -1,6 +1,6 @@
 import {
   SynPopup
-} from "./chunk.5QGW4QZT.js";
+} from "./chunk.P3W7SDQW.js";
 
 // src/components/popup/popup.ts
 var popup_default = SynPopup;
@@ -9,4 +9,4 @@ SynPopup.define("syn-popup");
 export {
   popup_default
 };
-//# sourceMappingURL=chunk.U6VNE4JX.js.map
+//# sourceMappingURL=chunk.IBWQFVMJ.js.map

package/dist/chunks/{chunk.DRLFKWVC.js → chunk.IEPQIQCD.js}

@@ -1,6 +1,6 @@
 import {
   SynRangeTick
-} from "./chunk.4FRKK5XY.js";
+} from "./chunk.WLWQYPRE.js";
 
 // src/components/range-tick/range-tick.ts
 var range_tick_default = SynRangeTick;
@@ -9,4 +9,4 @@ SynRangeTick.define("syn-range-tick");
 export {
   range_tick_default
 };
-//# sourceMappingURL=chunk.DRLFKWVC.js.map
+//# sourceMappingURL=chunk.IEPQIQCD.js.map

package/dist/chunks/{chunk.PR7SSUOT.js → chunk.IZX2QAKU.js}

@@ -1,6 +1,6 @@
 import {
   SynTooltip
-} from "./chunk.LJGUOWPM.js";
+} from "./chunk.BMHWOQRC.js";
 
 // src/components/tooltip/tooltip.ts
 var tooltip_default = SynTooltip;
@@ -9,4 +9,4 @@ SynTooltip.define("syn-tooltip");
 export {
   tooltip_default
 };
-//# sourceMappingURL=chunk.PR7SSUOT.js.map
+//# sourceMappingURL=chunk.IZX2QAKU.js.map

package/dist/chunks/{chunk.MJ4Q6YEU.js → chunk.J2JXNOZY.js}

@@ -1,6 +1,6 @@
 import {
   SynMenuLabel
-} from "./chunk.OBERL73O.js";
+} from "./chunk.DY7AWH4R.js";
 
 // src/components/menu-label/menu-label.ts
 var menu_label_default = SynMenuLabel;
@@ -9,4 +9,4 @@ SynMenuLabel.define("syn-menu-label");
 export {
   menu_label_default
 };
-//# sourceMappingURL=chunk.MJ4Q6YEU.js.map
+//# sourceMappingURL=chunk.J2JXNOZY.js.map

package/dist/chunks/{chunk.PWODN6WT.js → chunk.JX55XGPA.js}

@@ -1,6 +1,6 @@
 import {
   SynMenu
-} from "./chunk.PGGH5VGL.js";
+} from "./chunk.W4NRUZSV.js";
 
 // src/components/menu/menu.ts
 var menu_default = SynMenu;
@@ -9,4 +9,4 @@ SynMenu.define("syn-menu");
 export {
   menu_default
 };
-//# sourceMappingURL=chunk.PWODN6WT.js.map
+//# sourceMappingURL=chunk.JX55XGPA.js.map

package/dist/chunks/{chunk.5T3K7UXO.js → chunk.K2Y3Q3B4.js}

@@ -1,6 +1,6 @@
 import {
   SynButtonGroup
-} from "./chunk.MM3NO6GS.js";
+} from "./chunk.KTBISG3Q.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.5T3K7UXO.js.map
+//# sourceMappingURL=chunk.K2Y3Q3B4.js.map

package/dist/chunks/{chunk.LVYJDZMX.js → chunk.K3WSJSRV.js}

@@ -1,6 +1,6 @@
 import {
   SynOption
-} from "./chunk.JX6C3ADT.js";
+} from "./chunk.4M4LRUZD.js";
 
 // src/components/option/option.ts
 var option_default = SynOption;
@@ -9,4 +9,4 @@ SynOption.define("syn-option");
 export {
   option_default
 };
-//# sourceMappingURL=chunk.LVYJDZMX.js.map
+//# sourceMappingURL=chunk.K3WSJSRV.js.map

package/dist/chunks/{chunk.D5GEYHUG.js → chunk.KCLOTN4Z.js}

@@ -1,9 +1,9 @@
-import {
-  spinner_custom_styles_default
-} from "./chunk.WQMTAEYE.js";
 import {
   spinner_styles_default
 } from "./chunk.JLXCLATV.js";
+import {
+  spinner_custom_styles_default
+} from "./chunk.WQMTAEYE.js";
 import {
   LocalizeController
 } from "./chunk.OAQRCZOO.js";
@@ -12,7 +12,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.JG7YXWHG.js";
+} from "./chunk.FBQ7NUNW.js";
 
 // src/components/spinner/spinner.component.ts
 import { html } from "lit";
@@ -35,4 +35,4 @@ SynSpinner.styles = [component_styles_default, spinner_styles_default, spinner_c
 export {
   SynSpinner
 };
-//# sourceMappingURL=chunk.D5GEYHUG.js.map
+//# sourceMappingURL=chunk.KCLOTN4Z.js.map

package/dist/chunks/{chunk.67NOFASU.js → chunk.KIY5IDWY.js}

@@ -1,6 +1,6 @@
 import {
   SynSpinner
-} from "./chunk.D5GEYHUG.js";
+} from "./chunk.KCLOTN4Z.js";
 
 // src/components/spinner/spinner.ts
 var spinner_default = SynSpinner;
@@ -9,4 +9,4 @@ SynSpinner.define("syn-spinner");
 export {
   spinner_default
 };
-//# sourceMappingURL=chunk.67NOFASU.js.map
+//# sourceMappingURL=chunk.KIY5IDWY.js.map

package/dist/chunks/{chunk.YIYXW5NV.js → chunk.KOLE63RX.js}

@@ -1,6 +1,6 @@
 import {
   SynTabPanel
-} from "./chunk.4URTG3MF.js";
+} from "./chunk.YYZLHE7T.js";
 
 // src/components/tab-panel/tab-panel.ts
 var tab_panel_default = SynTabPanel;
@@ -9,4 +9,4 @@ SynTabPanel.define("syn-tab-panel");
 export {
   tab_panel_default
 };
-//# sourceMappingURL=chunk.YIYXW5NV.js.map
+//# sourceMappingURL=chunk.KOLE63RX.js.map

package/dist/chunks/{chunk.MM3NO6GS.js → chunk.KTBISG3Q.js}

@@ -1,12 +1,18 @@
+import {
+  button_group_custom_styles_default
+} from "./chunk.34RGILSE.js";
 import {
   button_group_styles_default
 } from "./chunk.GRVNUIP2.js";
+import {
+  enableDefaultSettings
+} from "./chunk.MLILJGXQ.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.JG7YXWHG.js";
+} from "./chunk.FBQ7NUNW.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -19,6 +25,8 @@ var SynButtonGroup = class extends SynergyElement {
     super(...arguments);
     this.disableRole = false;
     this.label = "";
+    this.size = "medium";
+    this.variant = "outline";
   }
   handleFocus(event) {
     const button = findButton(event.target);
@@ -42,6 +50,10 @@ var SynButtonGroup = class extends SynergyElement {
       const index = slottedElements.indexOf(el);
       const button = findButton(el);
       if (button) {
+        button.size = this.size;
+        if (button.tagName.toLowerCase() === "syn-button") {
+          button.variant = this.variant;
+        }
         button.toggleAttribute("data-syn-button-group__button", true);
         button.toggleAttribute("data-syn-button-group__button--first", index === 0);
         button.toggleAttribute("data-syn-button-group__button--inner", index > 0 && index < slottedElements.length - 1);
@@ -53,6 +65,44 @@ var SynButtonGroup = class extends SynergyElement {
       }
     });
   }
+  firstUpdated() {
+    const startObserving = () => {
+      this.mutationObserver.observe(this, {
+        subtree: true,
+        attributes: true,
+        attributeFilter: ["size", "variant"]
+      });
+    };
+    this.mutationObserver = new MutationObserver((entries) => {
+      this.mutationObserver.disconnect();
+      const buttonGroupChanged = entries.some((entry) => entry.target === this);
+      const childrenChanged = entries.some((entry) => entry.target !== this);
+      if (childrenChanged) {
+        entries.filter((entry) => entry.target !== this).forEach((entry) => {
+          const target = entry.target;
+          const button = findButton(target);
+          if (button) {
+            button.size = void 0;
+            if (button.tagName.toLowerCase() === "syn-button") {
+              button.variant = void 0;
+            }
+          }
+        });
+      }
+      if (buttonGroupChanged || childrenChanged) {
+        this.handleSlotChange();
+      }
+      this.updateComplete.then(() => {
+        startObserving();
+      });
+    });
+    startObserving();
+  }
+  disconnectedCallback() {
+    var _a;
+    super.disconnectedCallback();
+    (_a = this.mutationObserver) == null ? void 0 : _a.disconnect();
+  }
   render() {
     return html`
       <div
@@ -70,7 +120,7 @@ var SynButtonGroup = class extends SynergyElement {
     `;
   }
 };
-SynButtonGroup.styles = [component_styles_default, button_group_styles_default];
+SynButtonGroup.styles = [component_styles_default, button_group_styles_default, button_group_custom_styles_default];
 __decorateClass([
   query("slot")
 ], SynButtonGroup.prototype, "defaultSlot", 2);
@@ -80,6 +130,15 @@ __decorateClass([
 __decorateClass([
   property()
 ], SynButtonGroup.prototype, "label", 2);
+__decorateClass([
+  property({ reflect: true })
+], SynButtonGroup.prototype, "size", 2);
+__decorateClass([
+  property({ reflect: true })
+], SynButtonGroup.prototype, "variant", 2);
+SynButtonGroup = __decorateClass([
+  enableDefaultSettings("SynButtonGroup")
+], SynButtonGroup);
 function findButton(el) {
   var _a;
   const selector = "syn-button, syn-radio-button";
@@ -89,4 +148,4 @@ function findButton(el) {
 export {
   SynButtonGroup
 };
-//# sourceMappingURL=chunk.MM3NO6GS.js.map
+//# sourceMappingURL=chunk.KTBISG3Q.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/button-group/button-group.component.ts"],
+  "sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\nimport { html } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport styles from './button-group.styles.js';\nimport customStyles from './button-group.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\nimport type SynButton from '../button/button.component.js';\nimport type SynRadioButton from '../radio-button/radio-button.component.js';\nimport { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';\n\n/**\n * @summary Button groups can be used to group related buttons into sections.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-button-group--docs\n * @status stable\n * @since 2.0\n *\n * @slot - One or more `<syn-button>` elements to display in the button group.\n *\n * @csspart base - The component's base wrapper.\n */\n@enableDefaultSettings('SynButtonGroup')\nexport default class SynButtonGroup extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n\n  @query('slot') defaultSlot: HTMLSlotElement;\n\n  @state() disableRole = false;\n\n  /**\n   * A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive\n   * devices when interacting with the control and is strongly recommended.\n   */\n  @property() label = '';\n\n  /** The button-groups size. This affects all buttons within the group. */\n  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** The button-group's theme variant. This affects all buttons within the group. */\n  @property({ reflect: true }) variant: 'filled' | 'outline' = 'outline';\n\n  private mutationObserver: MutationObserver;\n\n  private handleFocus(event: Event) {\n    const button = findButton(event.target as HTMLElement);\n    button?.toggleAttribute('data-syn-button-group__button--focus', true);\n  }\n\n  private handleBlur(event: Event) {\n    const button = findButton(event.target as HTMLElement);\n    button?.toggleAttribute('data-syn-button-group__button--focus', false);\n  }\n\n  private handleMouseOver(event: Event) {\n    const button = findButton(event.target as HTMLElement);\n    button?.toggleAttribute('data-syn-button-group__button--hover', true);\n  }\n\n  private handleMouseOut(event: Event) {\n    const button = findButton(event.target as HTMLElement);\n    button?.toggleAttribute('data-syn-button-group__button--hover', false);\n  }\n\n  private handleSlotChange() {\n    const slottedElements = [...this.defaultSlot.assignedElements({ flatten: true })] as HTMLElement[];\n\n    slottedElements.forEach(el => {\n      const index = slottedElements.indexOf(el);\n      const button = findButton(el) as SynButton | SynRadioButton;\n\n      if (button) {\n        button.size = this.size;\n\n        if (button.tagName.toLowerCase() === 'syn-button') {\n          (button as SynButton).variant = this.variant;\n        }\n\n        button.toggleAttribute('data-syn-button-group__button', true);\n        button.toggleAttribute('data-syn-button-group__button--first', index === 0);\n        button.toggleAttribute('data-syn-button-group__button--inner', index > 0 && index < slottedElements.length - 1);\n        button.toggleAttribute('data-syn-button-group__button--last', index === slottedElements.length - 1);\n        button.toggleAttribute(\n          'data-syn-button-group__button--radio',\n          button.tagName.toLowerCase() === 'syn-radio-button'\n        );\n      }\n    });\n  }\n\n  firstUpdated() {\n    const startObserving = () => {\n      this.mutationObserver.observe(this, {\n        subtree: true,\n        attributes: true,\n        attributeFilter: ['size', 'variant'],\n      });\n    };\n\n    this.mutationObserver = new MutationObserver((entries) => {\n      // Temporarily disconnect to prevent infinite loop\n      this.mutationObserver.disconnect();\n\n      // Check if the button-group itself changed or its children\n      const buttonGroupChanged = entries.some(entry => entry.target === this);\n      const childrenChanged = entries.some(entry => entry.target !== this);\n\n      if (childrenChanged) {\n        // Handle child button changes (existing logic)\n        entries\n          .filter(entry => entry.target !== this)\n          .forEach(entry => {\n            const target = entry.target as HTMLElement;\n            const button = findButton(target) as SynButton | SynRadioButton;\n\n            if (button) {\n              // Unset the size property to allow button-group to control it\n              button.size = undefined as any;\n\n              // Also unset variant for syn-buttons\n              if (button.tagName.toLowerCase() === 'syn-button') {\n                (button as SynButton).variant = undefined as any;\n              }\n            }\n          });\n      }\n\n      // Handle both cases: button-group changes and child changes\n      if (buttonGroupChanged || childrenChanged) {\n        this.handleSlotChange();\n      }\n      \n      // Reconnect observer after changes are done\n      this.updateComplete.then(() => {\n        startObserving();\n      });\n    });\n\n    startObserving();\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.mutationObserver?.disconnect();\n  }\n\n  render() {\n    // eslint-disable-next-line lit-a11y/mouse-events-have-key-events\n    return html`\n      <div\n        part=\"base\"\n        class=\"button-group\"\n        role=\"${this.disableRole ? 'presentation' : 'group'}\"\n        aria-label=${this.label}\n        @focusout=${this.handleBlur}\n        @focusin=${this.handleFocus}\n        @mouseover=${this.handleMouseOver}\n        @mouseout=${this.handleMouseOut}\n      >\n        <slot @slotchange=${this.handleSlotChange}></slot>\n      </div>\n    `;\n  }\n}\n\nfunction findButton(el: HTMLElement) {\n  const selector = 'syn-button, syn-radio-button';\n\n  // The button could be the target element or a child of it (e.g. a dropdown or tooltip anchor)\n  return el.closest(selector) ?? el.querySelector(selector);\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/chunks/{chunk.DXVTZKXX.js → chunk.KUAYRSLT.js}

@@ -1,6 +1,6 @@
 import {
   SynCombobox
-} from "./chunk.5F5Y2RD6.js";
+} from "./chunk.6GWSQWLE.js";
 
 // src/components/combobox/combobox.ts
 var combobox_default = SynCombobox;
@@ -9,4 +9,4 @@ SynCombobox.define("syn-combobox");
 export {
   combobox_default
 };
-//# sourceMappingURL=chunk.DXVTZKXX.js.map
+//# sourceMappingURL=chunk.KUAYRSLT.js.map

package/dist/chunks/{chunk.XKT2M3XA.js → chunk.KY3YPRYR.js}

@@ -1,6 +1,6 @@
 import {
   SynOptgroup
-} from "./chunk.42F33KBM.js";
+} from "./chunk.WBHDD3UR.js";
 
 // src/components/optgroup/optgroup.ts
 var optgroup_default = SynOptgroup;
@@ -9,4 +9,4 @@ SynOptgroup.define("syn-optgroup");
 export {
   optgroup_default
 };
-//# sourceMappingURL=chunk.XKT2M3XA.js.map
+//# sourceMappingURL=chunk.KY3YPRYR.js.map

package/dist/chunks/{chunk.P3JEES5B.js → chunk.KY52MMTX.js}

@@ -1,14 +1,14 @@
 import {
   SynTooltip
-} from "./chunk.LJGUOWPM.js";
-import {
-  range_styles_default
-} from "./chunk.IM54DI3K.js";
+} from "./chunk.BMHWOQRC.js";
 import {
   arraysDiffer,
   getNormalizedValueFromClientX,
   numericSort
 } from "./chunk.236RSW67.js";
+import {
+  range_styles_default
+} from "./chunk.IM54DI3K.js";
 import {
   defaultValue
 } from "./chunk.3NXKLKWH.js";
@@ -29,13 +29,13 @@ import {
 } from "./chunk.OAQRCZOO.js";
 import {
   enableDefaultSettings
-} from "./chunk.KSWDM4HW.js";
+} from "./chunk.MLILJGXQ.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.JG7YXWHG.js";
+} from "./chunk.FBQ7NUNW.js";
 import {
   __decorateClass,
   __privateAdd,
@@ -715,4 +715,4 @@ SynRange = __decorateClass([
 export {
   SynRange
 };
-//# sourceMappingURL=chunk.P3JEES5B.js.map
+//# sourceMappingURL=chunk.KY52MMTX.js.map

package/dist/chunks/{chunk.3FT4KLCP.js → chunk.L7GQHKZX.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk.XAQKFEHH.js";
 import {
   SynDivider
-} from "./chunk.F4TDCDGD.js";
+} from "./chunk.M7VZBJK4.js";
 import {
   defaultValue
 } from "./chunk.3NXKLKWH.js";
@@ -25,27 +25,27 @@ import {
 } from "./chunk.WVVQK5TE.js";
 import {
   SynIcon
-} from "./chunk.GJIDYO3Z.js";
-import {
-  watch
-} from "./chunk.JE5Y2YD7.js";
+} from "./chunk.Q6XDV7O7.js";
 import {
   LocalizeController
 } from "./chunk.OAQRCZOO.js";
 import {
   enableDefaultSettings
-} from "./chunk.KSWDM4HW.js";
+} from "./chunk.MLILJGXQ.js";
 import {
   createNumericStrategy,
   modernNumericStrategy,
   nativeNumericStrategy
 } from "./chunk.QDG5AJZX.js";
+import {
+  watch
+} from "./chunk.JE5Y2YD7.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.JG7YXWHG.js";
+} from "./chunk.FBQ7NUNW.js";
 import {
   __decorateClass,
   __privateAdd,
@@ -866,4 +866,4 @@ SynInput = __decorateClass([
 export {
   SynInput
 };
-//# sourceMappingURL=chunk.3FT4KLCP.js.map
+//# sourceMappingURL=chunk.L7GQHKZX.js.map

package/dist/chunks/{chunk.F4TDCDGD.js → chunk.M7VZBJK4.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.JG7YXWHG.js";
+} from "./chunk.FBQ7NUNW.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -43,4 +43,4 @@ __decorateClass([
 export {
   SynDivider
 };
-//# sourceMappingURL=chunk.F4TDCDGD.js.map
+//# sourceMappingURL=chunk.M7VZBJK4.js.map

package/dist/chunks/{chunk.KSWDM4HW.js → chunk.MLILJGXQ.js}

@@ -2,7 +2,7 @@ import {
   addGlobalEventNotification,
   extractDefaultSettingsForElement,
   removeGlobalEventNotification
-} from "./chunk.ZVOOP3PI.js";
+} from "./chunk.2WOSSTKK.js";
 import {
   __privateAdd,
   __privateGet,
@@ -83,4 +83,4 @@ function enableDefaultSettings(name) {
 export {
   enableDefaultSettings
 };
-//# sourceMappingURL=chunk.KSWDM4HW.js.map
+//# sourceMappingURL=chunk.MLILJGXQ.js.map

package/dist/chunks/{chunk.YBITSWNW.js → chunk.MPSNGSXQ.js}

@@ -1,6 +1,6 @@
 import {
   SynCard
-} from "./chunk.3EJU447K.js";
+} from "./chunk.4PUQDU4T.js";
 
 // src/components/card/card.ts
 var card_default = SynCard;
@@ -9,4 +9,4 @@ SynCard.define("syn-card");
 export {
   card_default
 };
-//# sourceMappingURL=chunk.YBITSWNW.js.map
+//# sourceMappingURL=chunk.MPSNGSXQ.js.map

package/dist/chunks/{chunk.4ADVK4N5.js → chunk.NVT2EKF6.js}

@@ -1,6 +1,6 @@
 import {
   SynAlert
-} from "./chunk.6B7GMPMK.js";
+} from "./chunk.7GJ6YOL7.js";
 
 // src/components/alert/alert.ts
 var alert_default = SynAlert;
@@ -9,4 +9,4 @@ SynAlert.define("syn-alert");
 export {
   alert_default
 };
-//# sourceMappingURL=chunk.4ADVK4N5.js.map
+//# sourceMappingURL=chunk.NVT2EKF6.js.map

package/dist/chunks/{chunk.VYQ53GHN.js → chunk.O24WNQ4W.js}

@@ -6,25 +6,25 @@ import {
 } from "./chunk.PKYC7QF3.js";
 import {
   SynResizeObserver
-} from "./chunk.XL2GZSHM.js";
+} from "./chunk.BJIZS3FU.js";
 import {
   scrollIntoView
 } from "./chunk.5732DMBC.js";
 import {
   SynIconButton
-} from "./chunk.K5VB7VKA.js";
-import {
-  watch
-} from "./chunk.JE5Y2YD7.js";
+} from "./chunk.QU47WZOK.js";
 import {
   LocalizeController
 } from "./chunk.OAQRCZOO.js";
+import {
+  watch
+} from "./chunk.JE5Y2YD7.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.JG7YXWHG.js";
+} from "./chunk.FBQ7NUNW.js";
 import {
   __decorateClass,
   __spreadValues
@@ -516,4 +516,4 @@ __decorateClass([
 export {
   SynTabGroup
 };
-//# sourceMappingURL=chunk.VYQ53GHN.js.map
+//# sourceMappingURL=chunk.O24WNQ4W.js.map