@synergy-design-system/components 3.0.0 → 3.1.0

package/dist/chunks/{chunk.OIB4NIRJ.js → chunk.2QDRZ3C6.js}

@@ -1,6 +1,6 @@
 import {
   SynBreadcrumbItem
-} from "./chunk.SUH6DGJ5.js";
+} from "./chunk.VXC77KXR.js";
 
 // src/components/breadcrumb-item/breadcrumb-item.ts
 var breadcrumb_item_default = SynBreadcrumbItem;
@@ -9,4 +9,4 @@ SynBreadcrumbItem.define("syn-breadcrumb-item");
 export {
   breadcrumb_item_default
 };
-//# sourceMappingURL=chunk.OIB4NIRJ.js.map
+//# sourceMappingURL=chunk.2QDRZ3C6.js.map

package/dist/chunks/{chunk.ZVOOP3PI.js → chunk.2WOSSTKK.js}

@@ -1,7 +1,10 @@
 import {
   INITIAL_DEFAULT_SETTINGS,
   defaultSettings
-} from "./chunk.N6C27EXQ.js";
+} from "./chunk.FLJJ2OCR.js";
+import {
+  sortComponentsForUpdate
+} from "./chunk.VMLERD3J.js";
 
 // src/utilities/defaultSettings/functions.ts
 var SYNERGY_SETTING_EMIT_EVENTS = false;
@@ -10,7 +13,13 @@ var elementPropertyCache = /* @__PURE__ */ new Map();
 var globalEventNotificationMap = /* @__PURE__ */ new Set();
 function defaultSettingsHandler(e) {
   const { detail } = e;
-  Object.entries(detail).forEach(([componentName, changes]) => {
+  const sortedDetail = sortComponentsForUpdate(
+    Object.keys(detail)
+  ).map((componentName) => ({
+    changes: detail[componentName],
+    componentName
+  }));
+  sortedDetail.forEach(({ componentName, changes }) => {
     globalEventNotificationMap.forEach((element) => {
       if (element.__originalDecoratedClassName !== "undefined" && element.__originalDecoratedClassName === componentName) {
         element.overrideGlobalSettings(changes);
@@ -113,16 +122,23 @@ var setGlobalDefaultSettings = (newSettings) => {
           newValue,
           oldValue: defaultSettings[key][component]
         });
-        defaultSettings[key][component] = newValue;
       });
     }
   });
-  Object.entries(detail).forEach(([component, changes]) => {
-    const cachedItem = elementPropertyCache.get(component);
-    if (typeof cachedItem !== "undefined") {
+  const componentsToUpdate = Object.keys(detail);
+  const sortedComponents = sortComponentsForUpdate(componentsToUpdate);
+  sortedComponents.forEach((component) => {
+    const changes = detail[component];
+    if (changes) {
       changes.forEach((change) => {
-        cachedItem[change.attribute] = change.newValue;
+        defaultSettings[change.attribute][component] = change.newValue;
       });
+      const cachedItem = elementPropertyCache.get(component);
+      if (typeof cachedItem !== "undefined") {
+        changes.forEach((change) => {
+          cachedItem[change.attribute] = change.newValue;
+        });
+      }
     }
   });
   if (SYNERGY_SETTING_EMIT_EVENTS) {
@@ -148,4 +164,4 @@ export {
   setGlobalDefaultSettings,
   resetGlobalDefaultSettings
 };
-//# sourceMappingURL=chunk.ZVOOP3PI.js.map
+//# sourceMappingURL=chunk.2WOSSTKK.js.map

package/dist/chunks/{chunk.ZVOOP3PI.js.map → chunk.2WOSSTKK.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/utilities/defaultSettings/functions.ts"],
-  "sourcesContent": ["/* eslint-disable no-underscore-dangle */\nimport type SynergyElement from '../../internal/synergy-element.js';\nimport {\n  type AllowedValueForDefaultSetting,\n  type ComponentNamesWithDefaultValues,\n  type ExtractSettingsForElement,\n  type GlobalSettingsEnabledElement,\n  INITIAL_DEFAULT_SETTINGS,\n  type RecursivePartial,\n  type SynDefaultSettings,\n  defaultSettings,\n} from './base.js';\nimport type { SynDefaultChangedAttribute, SynDefaultSettingsChangedEvent } from '../../events/events.js';\n\n/**\n * Whether to emit events when the default settings change\n */\nlet SYNERGY_SETTING_EMIT_EVENTS = false;\n\n/**\n * Internal flag to check if the global event listeners have been set up\n */\nlet hasGlobalEventSetup = false;\n\n// Cache for speeding up lookups\nconst elementPropertyCache = new Map<ComponentNamesWithDefaultValues, Record<string, unknown>>();\n\n/**\n * List of all components that have default values\n */\nconst globalEventNotificationMap = new Set<GlobalSettingsEnabledElement>();\n\n/**\n * The default setting update handler that is bound to the global event\n * @param e The syn-default-settings-change-event emitted\n */\nfunction defaultSettingsHandler(e: SynDefaultSettingsChangedEvent) {\n  const { detail } = e;\n  Object.entries(detail).forEach(([componentName, changes]) => {\n    globalEventNotificationMap.forEach(element => {\n      if (\n        element.__originalDecoratedClassName !== 'undefined'\n        && element.__originalDecoratedClassName === componentName\n      ) {\n        element.overrideGlobalSettings(changes);\n      }\n    });\n  });\n}\n\n/**\n * Enables or disables the setting to emit events when the default settings change\n * @param enabled Whether to enable or disable the setting\n */\nexport const enableSettingEmitEvents = (enabled = true) => {\n  SYNERGY_SETTING_EMIT_EVENTS = enabled;\n\n  if (!enabled) {\n    // Make sure to always remove the old element cache\n    // when the feature is disabled.\n    // Otherwise, we could get a memory leak\n    globalEventNotificationMap.clear();\n\n    hasGlobalEventSetup = false;\n    window.removeEventListener('syn-default-settings-changed', defaultSettingsHandler, {\n      capture: true,\n    });\n    return;\n  }\n\n  if (enabled && !hasGlobalEventSetup) {\n    hasGlobalEventSetup = true;\n    window.addEventListener('syn-default-settings-changed', defaultSettingsHandler, {\n      capture: true,\n    });\n  }\n};\n\n/**\n * Enables or disables the setting to emit events when the default settings change\n * @param enabled Whether to enable or disable the setting\n *\n * @deprecated This API is now marked stable. Please use enableSettingEmitEvents instead!\n */\nexport const enableExperimentalSettingEmitEvents = (enabled = true) => {\n  enableSettingEmitEvents(enabled);\n};\n\n/**\n * Adds an element to the global event notification map\n * Does not have any effect when SYNERGY_SETTING_EMIT_EVENTS is false\n * @param element The element to add\n */\nexport const addGlobalEventNotification = (\n  element: GlobalSettingsEnabledElement,\n) => {\n  if (\n    SYNERGY_SETTING_EMIT_EVENTS\n    && !globalEventNotificationMap.has(element)\n  ) {\n    globalEventNotificationMap.add(element);\n  }\n};\n\n/**\n * Removes an element from the global event notification map\n * Does not have any effect when SYNERGY_SETTING_EMIT_EVENTS is false\n * @param element The element to remove\n */\nexport const removeGlobalEventNotification = (\n  element: GlobalSettingsEnabledElement,\n) => {\n  // Always try to remove the element from the map\n  // This is done because the event support might have been disabled\n  // between the time the element was added and removed\n  if (globalEventNotificationMap.has(element)) {\n    globalEventNotificationMap.delete(element);\n  }\n};\n\n/**\n * Extracts all available default settings for a given component\n * @param component The name of the component to get the settings for\n * @param from The source to get the settings from\n * @returns key value pair of found settings for the given component\n */\nexport const extractDefaultSettingsForElement = (\n  component: ComponentNamesWithDefaultValues,\n  from: 'default' | 'initial' = 'default',\n) => {\n  const store = from === 'default' ? defaultSettings : INITIAL_DEFAULT_SETTINGS;\n\n  // When we have settings in the cache, make sure to use them to speed them up when possible.\n  // This is only available when using the default source!\n  if (from === 'default') {\n    const cachedSettings = elementPropertyCache.get(component);\n    if (typeof cachedSettings !== 'undefined') {\n      return cachedSettings;\n    }\n  }\n\n  const allElementSettings = Object.entries(store).reduce(\n    (acc: Record<string, unknown>, [key, value]) => {\n      const elementSetting = value[component as keyof SynDefaultSettings[keyof SynDefaultSettings]];\n      if (elementSetting) {\n        acc[key] = elementSetting;\n      }\n      return acc;\n    },\n    {},\n  );\n\n  // Set the cache item when we are using the default source\n  if (from === 'default') {\n    elementPropertyCache.set(component, allElementSettings);\n  }\n\n  return allElementSettings;\n};\n\n/**\n * Set the default values for a given component\n * @param component The component to set the defaults for\n * @param newValues Map of new values to set\n */\nexport const setDefaultSettingsForElement = <C extends SynergyElement>(\n  component: ComponentNamesWithDefaultValues,\n  newValues: Partial<ExtractSettingsForElement<C>>,\n) => {\n  // List of all changes in the default settings\n  const detail = {\n    [component]: [] as SynDefaultChangedAttribute[],\n  } as Record<string, SynDefaultChangedAttribute[]>;\n\n  Object.entries(newValues).forEach(([key, value]) => {\n    if (\n      defaultSettings[key as keyof SynDefaultSettings]\n      && typeof (\n        defaultSettings[key as keyof SynDefaultSettings] as Record<string, unknown>\n      )[component] !== 'undefined'\n    ) {\n      detail[component].push({\n        attribute: key,\n        newValue: value,\n        oldValue:\n          defaultSettings[key as keyof SynDefaultSettings][\n            component as keyof SynDefaultSettings[keyof SynDefaultSettings]\n          ],\n      });\n\n      (\n        defaultSettings[key as keyof SynDefaultSettings] as Record<string, unknown>\n      )[component] = value as AllowedValueForDefaultSetting<C, keyof C>;\n    }\n  });\n\n  // Make sure to clean up the cache when we change the default settings\n  const cachedItem = elementPropertyCache.get(component);\n  if (typeof cachedItem !== 'undefined') {\n    detail[component].forEach(change => {\n      cachedItem[change.attribute] = change.newValue;\n    });\n  }\n\n  // Fire the change event\n  if (SYNERGY_SETTING_EMIT_EVENTS) {\n    const event = new CustomEvent<typeof detail>('syn-default-settings-changed', {\n      bubbles: true,\n      detail,\n    });\n    dispatchEvent(event);\n  }\n\n  return defaultSettings;\n};\n\n/**\n * Set the global default settings\n * @param newSettings The new settings to set\n */\nexport const setGlobalDefaultSettings = (\n  newSettings: RecursivePartial<SynDefaultSettings>,\n): SynDefaultSettings => {\n  // List of all changes in the default settings\n  const detail = {} as Record<string, SynDefaultChangedAttribute[]>;\n\n  Object.entries(newSettings).forEach(([key, value]) => {\n    if (defaultSettings[key as keyof SynDefaultSettings]) {\n      Object.entries(value).forEach(([component, newValue]) => {\n        // Create the component part of details if it does not exist yet\n        if (!detail[component]) {\n          detail[component] = [];\n        }\n\n        // Add the changed attribute to the detail object\n        detail[component].push({\n          attribute: key,\n          newValue: newValue as unknown,\n          oldValue:\n            defaultSettings[key as keyof SynDefaultSettings][\n              component as keyof SynDefaultSettings[keyof SynDefaultSettings]\n            ],\n        });\n\n        // Set the new value\n        (\n          defaultSettings[key as keyof SynDefaultSettings] as Record<string, unknown>\n        )[component] = newValue;\n      });\n    }\n  });\n\n  // Make sure to update the cache when we change a default settings\n  Object\n    .entries(detail)\n    .forEach(([component, changes]) => {\n      const cachedItem = elementPropertyCache.get(component as ComponentNamesWithDefaultValues);\n      if (typeof cachedItem !== 'undefined') {\n        changes.forEach(change => {\n          cachedItem[change.attribute] = change.newValue;\n        });\n      }\n    });\n\n  // Fire the change event\n  if (SYNERGY_SETTING_EMIT_EVENTS) {\n    const event = new CustomEvent<typeof detail>('syn-default-settings-changed', {\n      bubbles: true,\n      detail,\n    });\n    dispatchEvent(event);\n  }\n\n  return defaultSettings;\n};\n\n/**\n * Reset the global default settings to synergies initial values\n */\nexport const resetGlobalDefaultSettings = (): SynDefaultSettings => setGlobalDefaultSettings(\n  INITIAL_DEFAULT_SETTINGS,\n);\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable no-underscore-dangle */\nimport type SynergyElement from '../../internal/synergy-element.js';\nimport {\n  type AllowedValueForDefaultSetting,\n  type ComponentNamesWithDefaultValues,\n  type ExtractSettingsForElement,\n  type GlobalSettingsEnabledElement,\n  INITIAL_DEFAULT_SETTINGS,\n  type RecursivePartial,\n  type SynDefaultSettings,\n  defaultSettings,\n} from './base.js';\nimport { sortComponentsForUpdate } from './sort.js';\nimport type { SynDefaultChangedAttribute, SynDefaultSettingsChangedEvent } from '../../events/events.js';\n\n/**\n * Whether to emit events when the default settings change\n */\nlet SYNERGY_SETTING_EMIT_EVENTS = false;\n\n/**\n * Internal flag to check if the global event listeners have been set up\n */\nlet hasGlobalEventSetup = false;\n\n// Cache for speeding up lookups\nconst elementPropertyCache = new Map<ComponentNamesWithDefaultValues, Record<string, unknown>>();\n\n/**\n * List of all components that have default values\n */\nconst globalEventNotificationMap = new Set<GlobalSettingsEnabledElement>();\n\n/**\n * The default setting update handler that is bound to the global event\n * @param e The syn-default-settings-change-event emitted\n */\nfunction defaultSettingsHandler(e: SynDefaultSettingsChangedEvent) {\n  const { detail } = e;\n\n  const sortedDetail = sortComponentsForUpdate(\n    Object.keys(detail) as ComponentNamesWithDefaultValues[],\n  ).map(componentName => ({\n    changes: detail[componentName],\n    componentName,\n  }));\n\n  sortedDetail.forEach(({ componentName, changes }) => {\n    globalEventNotificationMap.forEach(element => {\n      if (\n        element.__originalDecoratedClassName !== 'undefined'\n        && element.__originalDecoratedClassName === componentName\n      ) {\n        element.overrideGlobalSettings(changes);\n      }\n    });\n  });\n}\n\n/**\n * Enables or disables the setting to emit events when the default settings change\n * @param enabled Whether to enable or disable the setting\n */\nexport const enableSettingEmitEvents = (enabled = true) => {\n  SYNERGY_SETTING_EMIT_EVENTS = enabled;\n\n  if (!enabled) {\n    // Make sure to always remove the old element cache\n    // when the feature is disabled.\n    // Otherwise, we could get a memory leak\n    globalEventNotificationMap.clear();\n\n    hasGlobalEventSetup = false;\n    window.removeEventListener('syn-default-settings-changed', defaultSettingsHandler, {\n      capture: true,\n    });\n    return;\n  }\n\n  if (enabled && !hasGlobalEventSetup) {\n    hasGlobalEventSetup = true;\n    window.addEventListener('syn-default-settings-changed', defaultSettingsHandler, {\n      capture: true,\n    });\n  }\n};\n\n/**\n * Enables or disables the setting to emit events when the default settings change\n * @param enabled Whether to enable or disable the setting\n *\n * @deprecated This API is now marked stable. Please use enableSettingEmitEvents instead!\n */\nexport const enableExperimentalSettingEmitEvents = (enabled = true) => {\n  enableSettingEmitEvents(enabled);\n};\n\n/**\n * Adds an element to the global event notification map\n * Does not have any effect when SYNERGY_SETTING_EMIT_EVENTS is false\n * @param element The element to add\n */\nexport const addGlobalEventNotification = (\n  element: GlobalSettingsEnabledElement,\n) => {\n  if (\n    SYNERGY_SETTING_EMIT_EVENTS\n    && !globalEventNotificationMap.has(element)\n  ) {\n    globalEventNotificationMap.add(element);\n  }\n};\n\n/**\n * Removes an element from the global event notification map\n * Does not have any effect when SYNERGY_SETTING_EMIT_EVENTS is false\n * @param element The element to remove\n */\nexport const removeGlobalEventNotification = (\n  element: GlobalSettingsEnabledElement,\n) => {\n  // Always try to remove the element from the map\n  // This is done because the event support might have been disabled\n  // between the time the element was added and removed\n  if (globalEventNotificationMap.has(element)) {\n    globalEventNotificationMap.delete(element);\n  }\n};\n\n/**\n * Extracts all available default settings for a given component\n * @param component The name of the component to get the settings for\n * @param from The source to get the settings from\n * @returns key value pair of found settings for the given component\n */\nexport const extractDefaultSettingsForElement = (\n  component: ComponentNamesWithDefaultValues,\n  from: 'default' | 'initial' = 'default',\n) => {\n  const store = from === 'default' ? defaultSettings : INITIAL_DEFAULT_SETTINGS;\n\n  // When we have settings in the cache, make sure to use them to speed them up when possible.\n  // This is only available when using the default source!\n  if (from === 'default') {\n    const cachedSettings = elementPropertyCache.get(component);\n    if (typeof cachedSettings !== 'undefined') {\n      return cachedSettings;\n    }\n  }\n\n  const allElementSettings = Object.entries(store).reduce(\n    (acc: Record<string, unknown>, [key, value]) => {\n      const elementSetting = value[component as keyof SynDefaultSettings[keyof SynDefaultSettings]];\n      if (elementSetting) {\n        acc[key] = elementSetting;\n      }\n      return acc;\n    },\n    {},\n  );\n\n  // Set the cache item when we are using the default source\n  if (from === 'default') {\n    elementPropertyCache.set(component, allElementSettings);\n  }\n\n  return allElementSettings;\n};\n\n/**\n * Set the default values for a given component\n * @param component The component to set the defaults for\n * @param newValues Map of new values to set\n */\nexport const setDefaultSettingsForElement = <C extends SynergyElement>(\n  component: ComponentNamesWithDefaultValues,\n  newValues: Partial<ExtractSettingsForElement<C>>,\n) => {\n  // List of all changes in the default settings\n  const detail = {\n    [component]: [] as SynDefaultChangedAttribute[],\n  } as Record<string, SynDefaultChangedAttribute[]>;\n\n  Object.entries(newValues).forEach(([key, value]) => {\n    if (\n      defaultSettings[key as keyof SynDefaultSettings]\n      && typeof (\n        defaultSettings[key as keyof SynDefaultSettings] as Record<string, unknown>\n      )[component] !== 'undefined'\n    ) {\n      detail[component].push({\n        attribute: key,\n        newValue: value,\n        oldValue:\n          defaultSettings[key as keyof SynDefaultSettings][\n            component as keyof SynDefaultSettings[keyof SynDefaultSettings]\n          ],\n      });\n\n      (\n        defaultSettings[key as keyof SynDefaultSettings] as Record<string, unknown>\n      )[component] = value as AllowedValueForDefaultSetting<C, keyof C>;\n    }\n  });\n\n  // Make sure to clean up the cache when we change the default settings\n  const cachedItem = elementPropertyCache.get(component);\n  if (typeof cachedItem !== 'undefined') {\n    detail[component].forEach(change => {\n      cachedItem[change.attribute] = change.newValue;\n    });\n  }\n\n  // Fire the change event\n  if (SYNERGY_SETTING_EMIT_EVENTS) {\n    const event = new CustomEvent<typeof detail>('syn-default-settings-changed', {\n      bubbles: true,\n      detail,\n    });\n    dispatchEvent(event);\n  }\n\n  return defaultSettings;\n};\n\n/**\n * Set the global default settings\n * @param newSettings The new settings to set\n */\nexport const setGlobalDefaultSettings = (\n  newSettings: RecursivePartial<SynDefaultSettings>,\n): SynDefaultSettings => {\n  // List of all changes in the default settings\n  const detail = {} as Record<string, SynDefaultChangedAttribute[]>;\n\n  Object.entries(newSettings).forEach(([key, value]) => {\n    if (defaultSettings[key as keyof SynDefaultSettings]) {\n      Object.entries(value).forEach(([component, newValue]) => {\n        // Create the component part of details if it does not exist yet\n        if (!detail[component]) {\n          detail[component] = [];\n        }\n\n        // Add the changed attribute to the detail object\n        detail[component].push({\n          attribute: key,\n          newValue: newValue as unknown,\n          oldValue:\n          defaultSettings[key as keyof SynDefaultSettings][\n            component as keyof SynDefaultSettings[keyof SynDefaultSettings]\n          ],\n        });\n      });\n    }\n  });\n\n  // Sort components by dependencies and priority before processing\n  // This has to be done to ensure that components depending on other components\n  // get updated after the components they depend on.\n  const componentsToUpdate = Object.keys(detail) as ComponentNamesWithDefaultValues[];\n  const sortedComponents = sortComponentsForUpdate(componentsToUpdate);\n\n  // Second pass: update defaultSettings and cache in sorted order\n  sortedComponents.forEach((component) => {\n    const changes = detail[component];\n\n    if (changes) {\n      // Update defaultSettings for this component\n      changes.forEach(change => {\n        (\n          defaultSettings[change.attribute as keyof SynDefaultSettings] as Record<string, unknown>\n        )[component] = change.newValue;\n      });\n\n      // Update cache for this component\n      const cachedItem = elementPropertyCache.get(component);\n      if (typeof cachedItem !== 'undefined') {\n        changes.forEach(change => {\n          cachedItem[change.attribute] = change.newValue;\n        });\n      }\n    }\n  });\n\n  // Fire the change event\n  if (SYNERGY_SETTING_EMIT_EVENTS) {\n    const event = new CustomEvent<typeof detail>('syn-default-settings-changed', {\n      bubbles: true,\n      detail,\n    });\n    dispatchEvent(event);\n  }\n\n  return defaultSettings;\n};\n\n/**\n * Reset the global default settings to synergies initial values\n */\nexport const resetGlobalDefaultSettings = (): SynDefaultSettings => setGlobalDefaultSettings(\n  INITIAL_DEFAULT_SETTINGS,\n);\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/chunks/chunk.34RGILSE.js

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

package/dist/chunks/chunk.34RGILSE.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/button-group/button-group.custom.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  /* Write custom CSS here */\n`;\n"],
+  "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,qCAAQ;AAAA;AAAA;",
+  "names": []
+}

package/dist/chunks/{chunk.ZR7J6ZEM.js → chunk.3PGJQYXW.js}

@@ -1,6 +1,6 @@
 import {
   SynMenuItem
-} from "./chunk.DHT3ZN7B.js";
+} from "./chunk.DZSZDFCN.js";
 
 // src/components/menu-item/menu-item.ts
 var menu_item_default = SynMenuItem;
@@ -9,4 +9,4 @@ SynMenuItem.define("syn-menu-item");
 export {
   menu_item_default
 };
-//# sourceMappingURL=chunk.ZR7J6ZEM.js.map
+//# sourceMappingURL=chunk.3PGJQYXW.js.map

package/dist/chunks/{chunk.FVYPYWJH.js → chunk.3PWAIWL5.js}

@@ -1,18 +1,18 @@
-import {
-  watch
-} from "./chunk.JE5Y2YD7.js";
 import {
   accordion_styles_default
 } from "./chunk.WNUZ6LH4.js";
 import {
   enableDefaultSettings
-} from "./chunk.KSWDM4HW.js";
+} from "./chunk.MLILJGXQ.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
 } from "./chunk.MO2GTRUM.js";
@@ -111,4 +111,4 @@ SynAccordion = __decorateClass([
 export {
   SynAccordion
 };
-//# sourceMappingURL=chunk.FVYPYWJH.js.map
+//# sourceMappingURL=chunk.3PWAIWL5.js.map

package/dist/chunks/{chunk.IOFVUQIY.js → chunk.4K75N3WR.js}

@@ -1,6 +1,6 @@
 import {
   SynDialog
-} from "./chunk.RV5JERXK.js";
+} from "./chunk.DGU5AZZG.js";
 
 // src/components/dialog/dialog.ts
 var dialog_default = SynDialog;
@@ -9,4 +9,4 @@ SynDialog.define("syn-dialog");
 export {
   dialog_default
 };
-//# sourceMappingURL=chunk.IOFVUQIY.js.map
+//# sourceMappingURL=chunk.4K75N3WR.js.map

package/dist/chunks/{chunk.JX6C3ADT.js → chunk.4M4LRUZD.js}

@@ -9,19 +9,19 @@ import {
 } from "./chunk.IVM3BGRH.js";
 import {
   SynIcon
-} from "./chunk.GJIDYO3Z.js";
-import {
-  watch
-} from "./chunk.JE5Y2YD7.js";
+} from "./chunk.Q6XDV7O7.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
 } from "./chunk.MO2GTRUM.js";
@@ -186,4 +186,4 @@ __decorateClass([
 export {
   SynOption
 };
-//# sourceMappingURL=chunk.JX6C3ADT.js.map
+//# sourceMappingURL=chunk.4M4LRUZD.js.map

package/dist/chunks/{chunk.3EJU447K.js → chunk.4PUQDU4T.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";
@@ -60,4 +60,4 @@ __decorateClass([
 export {
   SynCard
 };
-//# sourceMappingURL=chunk.3EJU447K.js.map
+//# sourceMappingURL=chunk.4PUQDU4T.js.map

package/dist/chunks/{chunk.3EQF2FRQ.js → chunk.4VOWXLEZ.js}

@@ -17,18 +17,18 @@ import {
 import {
   HasSlotController
 } from "./chunk.WVVQK5TE.js";
+import {
+  enableDefaultSettings
+} from "./chunk.MLILJGXQ.js";
 import {
   watch
 } from "./chunk.JE5Y2YD7.js";
-import {
-  enableDefaultSettings
-} from "./chunk.KSWDM4HW.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";
@@ -255,4 +255,4 @@ SynSwitch = __decorateClass([
 export {
   SynSwitch
 };
-//# sourceMappingURL=chunk.3EQF2FRQ.js.map
+//# sourceMappingURL=chunk.4VOWXLEZ.js.map

package/dist/chunks/{chunk.SEYI7UTA.js → chunk.4YHI2ATV.js}

@@ -228,9 +228,23 @@ var button_custom_styles_default = css`
   .button--caret.button--large .button__caret{
     font-size: var(--syn-font-size-2x-large);
   }
+
+  /* #392: Button Groups */
+  :host([data-syn-button-group__button--inner]) .button--filled.button {
+    border-left-color: var(--syn-panel-background-color);
+    border-right-color: var(--syn-panel-background-color);
+  }
+
+  :host([data-syn-button-group__button--first]:not([data-syn-button-group__button--last])) .button--filled.button {
+    border-right-color: var(--syn-panel-background-color);
+  }
+
+  :host([data-syn-button-group__button--last]:not([data-syn-button-group__button--first])) .button--filled.button {
+    border-left-color: var(--syn-panel-background-color);
+  }
 `;
 
 export {
   button_custom_styles_default
 };
-//# sourceMappingURL=chunk.SEYI7UTA.js.map
+//# sourceMappingURL=chunk.4YHI2ATV.js.map

package/dist/chunks/{chunk.SEYI7UTA.js.map → chunk.4YHI2ATV.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/button/button.custom.styles.ts"],
-  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  .button {\n    font-weight: var(--syn-font-weight-bold);\n  }\n\n  .button:focus-visible {\n    outline: var(--syn-focus-ring-color) solid var(--syn-focus-ring-width);\n    outline-offset: var(--syn-focus-ring-width);\n  }\n\n  /** #429: Use token for opacity */\n  .button--disabled {\n    opacity: var(--syn-input-disabled-opacity);\n  }\n\n  /*\n   * Adjustments for button label paddings\n   * @see https://github.com/synergy-design-system/synergy-design-system/issues/243\n   */\n  .button--has-prefix.button--small .button__label {\n    padding-inline-start: var(--syn-spacing-2x-small);\n  }\n\n  .button--has-suffix.button--small .button__label,\n  .button--caret.button--small .button__label {\n    padding-inline-end: var(--syn-spacing-2x-small);\n  }\n\n  .button--has-prefix.button--medium .button__label {\n    padding-inline-start: var(--syn-spacing-x-small);\n  }\n\n  .button--has-suffix.button--medium .button__label,\n  .button--caret.button--medium .button__label {\n    padding-inline-end: var(--syn-spacing-x-small);\n  }\n\n  /**\n   * Icon-only buttons\n   */\n  .button--small .button__label.button__icon-only {\n    padding: 0 calc(var(--syn-spacing-x-small) + var(--syn-spacing-4x-small));\n  }\n\n  .button--small .button__label::slotted(syn-icon) {\n    font-size: var(--syn-font-size-medium);\n    vertical-align: -3px;\n  }\n\n  .button--medium .button__label.button__icon-only {\n    padding: 0 calc(var(--syn-spacing-small) - var(--syn-spacing-4x-small));\n  }\n\n  .button--medium .button__label::slotted(syn-icon) {\n    font-size: var(--syn-font-size-x-large);\n    vertical-align: -6px;\n  }\n\n  .button--large .button__label.button__icon-only {\n    padding: 0 calc(var(--syn-spacing-medium) - var(--syn-spacing-4x-small));\n  }\n\n  .button--large .button__label::slotted(syn-icon) {\n    font-size: var(--syn-font-size-2x-large);\n    vertical-align: -8px;\n  }\n\n  /**\n   * Size modifiers\n   */\n  .button--small {\n    border-radius: var(--syn-button-border-radius-small);\n  }\n\n  .button--medium {\n    border-radius: var(--syn-button-border-radius-medium);\n  }\n\n  .button--large {\n    border-radius: var(--syn-button-border-radius-large);\n  }\n\n  /*\n   * Standard buttons\n   */\n  .button--filled.button--primary {\n    background: var(--syn-button-color);\n    border-color: var(--syn-button-color);\n    color: var(--syn-button-filled-color-text);\n  }\n\n  .button--filled.button--primary.button--disabled {\n    background-color: var(--syn-color-neutral-600);\n    border-color: var(--syn-color-neutral-600);\n    color: var(--syn-typography-color-text-inverted);\n  }\n\n  .button--filled.button--primary:hover:not(.button--disabled) {\n    background-color: var(--syn-button-color-hover);\n    border-color: var(--syn-button-color-hover);\n    color: var(--syn-button-filled-color-text-hover);\n  }\n\n  .button--filled.button--primary:active:not(.button--disabled) {\n    background-color: var(--syn-button-color-active);\n    border-color: var(--syn-button-color-active);\n    color: var(--syn-button-filled-color-text-active);\n  }\n\n  /*\n   * Outline buttons\n   */\n  .button--outline {\n    /** #901: Use token for border width */\n    border-width: var(--syn-input-border-width);\n  }\n\n  .button--outline.button--primary {\n    border-color: var(--syn-button-color);\n    color: var(--syn-button-outline-color-text);\n  }\n\n  .button--outline.button--primary.button--disabled {\n    background: none;\n    border-color: var(--syn-color-neutral-600);\n    color: var(--syn-color-neutral-600);\n  }\n\n  .button--outline.button--primary:hover:not(.button--disabled),\n  .button--outline.button--primary.button--checked:not(.button--disabled) {\n    background-color: var(--syn-button-outline-color-hover);\n    border-color: var(--syn-button-outline-color-hover);\n    color: var(--syn-button-outline-color-text-hover);\n  }\n\n  .button--outline.button--primary:active:not(.button--disabled) {\n    background-color: var(--syn-button-outline-color-active);\n    border-color: var(--syn-button-outline-color-active);\n    color: var(--syn-button-outline-color-text-active);\n  }\n\n  /*\n   * Text buttons\n   */\n  .button--text {\n    color: var(--syn-button-text-color-text);\n  }\n\n  .button--text:hover:not(.button--disabled) {\n    color: var(--syn-button-text-color-text-hover);\n  }\n\n  .button--text:focus-visible:not(.button--disabled) {\n    color: var(--syn-button-color);\n  }\n\n  .button--text.button--primary:active:not(.button--disabled) {\n    color: var(--syn-button-text-color-text-active);\n  }\n\n  .button--text.button--primary.button--disabled {\n    color: var(--syn-color-neutral-600);\n  }\n\n  /**\n   * Button spacing\n   */\n  .button.button--small.button--has-label.button--has-prefix {\n    padding-inline-start: var(--syn-spacing-small);\n  }\n\n  .button.button--small.button--has-label.button--has-suffix {\n    padding-inline-end: var(--syn-spacing-small);\n  }\n\n  .button.button--small.button--has-prefix .button__prefix, \n  .button.button--small.button--has-suffix .button__suffix {\n    font-size: var(--syn-spacing-medium);\n  }\n\n  .button.button--medium.button--has-label.button--has-prefix {\n    padding-inline-start: var(--syn-spacing-medium);\n  } \n\n  .button.button--medium.button--has-label.button--has-suffix {\n    padding-inline-end: var(--syn-spacing-medium);\n  }\n\n  .button.button--medium.button--has-prefix .button__prefix, \n  .button.button--medium.button--has-suffix .button__suffix {\n    font-size: var(--syn-spacing-large);\n  }\n\n  .button.button--large.button--has-label.button--has-prefix {\n    padding-inline-start: var(--syn-spacing-large);\n  }\n\n  .button.button--large.button--has-label.button--has-prefix .button__label {\n    padding-inline-start: var(--syn-spacing-small);\n  }\n\n  .button.button--large.button--has-label.button--has-suffix {\n    padding-inline-end: var(--syn-spacing-large);\n  }\n\n  .button.button--large.button--has-label.button--has-suffix .button__label {\n    padding-inline-end: var(--syn-spacing-small);\n  }\n\n  .button.button--large.button--has-prefix .button__prefix, \n  .button.button--large.button--has-suffix .button__suffix {\n    font-size: var(--syn-font-size-2x-large);\n  }\n\n  /*\n   * Caret modifier\n   */\n  .button--caret.button--small .button__caret{\n    font-size: var(--syn-font-size-medium);\n  }\n\n  .button--caret.button--medium .button__caret{\n    font-size: var(--syn-font-size-x-large);\n  }\n\n  .button--caret.button--large .button__caret{\n    font-size: var(--syn-font-size-2x-large);\n  }\n`;\n"],
-  "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,+BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  .button {\n    font-weight: var(--syn-font-weight-bold);\n  }\n\n  .button:focus-visible {\n    outline: var(--syn-focus-ring-color) solid var(--syn-focus-ring-width);\n    outline-offset: var(--syn-focus-ring-width);\n  }\n\n  /** #429: Use token for opacity */\n  .button--disabled {\n    opacity: var(--syn-input-disabled-opacity);\n  }\n\n  /*\n   * Adjustments for button label paddings\n   * @see https://github.com/synergy-design-system/synergy-design-system/issues/243\n   */\n  .button--has-prefix.button--small .button__label {\n    padding-inline-start: var(--syn-spacing-2x-small);\n  }\n\n  .button--has-suffix.button--small .button__label,\n  .button--caret.button--small .button__label {\n    padding-inline-end: var(--syn-spacing-2x-small);\n  }\n\n  .button--has-prefix.button--medium .button__label {\n    padding-inline-start: var(--syn-spacing-x-small);\n  }\n\n  .button--has-suffix.button--medium .button__label,\n  .button--caret.button--medium .button__label {\n    padding-inline-end: var(--syn-spacing-x-small);\n  }\n\n  /**\n   * Icon-only buttons\n   */\n  .button--small .button__label.button__icon-only {\n    padding: 0 calc(var(--syn-spacing-x-small) + var(--syn-spacing-4x-small));\n  }\n\n  .button--small .button__label::slotted(syn-icon) {\n    font-size: var(--syn-font-size-medium);\n    vertical-align: -3px;\n  }\n\n  .button--medium .button__label.button__icon-only {\n    padding: 0 calc(var(--syn-spacing-small) - var(--syn-spacing-4x-small));\n  }\n\n  .button--medium .button__label::slotted(syn-icon) {\n    font-size: var(--syn-font-size-x-large);\n    vertical-align: -6px;\n  }\n\n  .button--large .button__label.button__icon-only {\n    padding: 0 calc(var(--syn-spacing-medium) - var(--syn-spacing-4x-small));\n  }\n\n  .button--large .button__label::slotted(syn-icon) {\n    font-size: var(--syn-font-size-2x-large);\n    vertical-align: -8px;\n  }\n\n  /**\n   * Size modifiers\n   */\n  .button--small {\n    border-radius: var(--syn-button-border-radius-small);\n  }\n\n  .button--medium {\n    border-radius: var(--syn-button-border-radius-medium);\n  }\n\n  .button--large {\n    border-radius: var(--syn-button-border-radius-large);\n  }\n\n  /*\n   * Standard buttons\n   */\n  .button--filled.button--primary {\n    background: var(--syn-button-color);\n    border-color: var(--syn-button-color);\n    color: var(--syn-button-filled-color-text);\n  }\n\n  .button--filled.button--primary.button--disabled {\n    background-color: var(--syn-color-neutral-600);\n    border-color: var(--syn-color-neutral-600);\n    color: var(--syn-typography-color-text-inverted);\n  }\n\n  .button--filled.button--primary:hover:not(.button--disabled) {\n    background-color: var(--syn-button-color-hover);\n    border-color: var(--syn-button-color-hover);\n    color: var(--syn-button-filled-color-text-hover);\n  }\n\n  .button--filled.button--primary:active:not(.button--disabled) {\n    background-color: var(--syn-button-color-active);\n    border-color: var(--syn-button-color-active);\n    color: var(--syn-button-filled-color-text-active);\n  }\n\n  /*\n   * Outline buttons\n   */\n  .button--outline {\n    /** #901: Use token for border width */\n    border-width: var(--syn-input-border-width);\n  }\n\n  .button--outline.button--primary {\n    border-color: var(--syn-button-color);\n    color: var(--syn-button-outline-color-text);\n  }\n\n  .button--outline.button--primary.button--disabled {\n    background: none;\n    border-color: var(--syn-color-neutral-600);\n    color: var(--syn-color-neutral-600);\n  }\n\n  .button--outline.button--primary:hover:not(.button--disabled),\n  .button--outline.button--primary.button--checked:not(.button--disabled) {\n    background-color: var(--syn-button-outline-color-hover);\n    border-color: var(--syn-button-outline-color-hover);\n    color: var(--syn-button-outline-color-text-hover);\n  }\n\n  .button--outline.button--primary:active:not(.button--disabled) {\n    background-color: var(--syn-button-outline-color-active);\n    border-color: var(--syn-button-outline-color-active);\n    color: var(--syn-button-outline-color-text-active);\n  }\n\n  /*\n   * Text buttons\n   */\n  .button--text {\n    color: var(--syn-button-text-color-text);\n  }\n\n  .button--text:hover:not(.button--disabled) {\n    color: var(--syn-button-text-color-text-hover);\n  }\n\n  .button--text:focus-visible:not(.button--disabled) {\n    color: var(--syn-button-color);\n  }\n\n  .button--text.button--primary:active:not(.button--disabled) {\n    color: var(--syn-button-text-color-text-active);\n  }\n\n  .button--text.button--primary.button--disabled {\n    color: var(--syn-color-neutral-600);\n  }\n\n  /**\n   * Button spacing\n   */\n  .button.button--small.button--has-label.button--has-prefix {\n    padding-inline-start: var(--syn-spacing-small);\n  }\n\n  .button.button--small.button--has-label.button--has-suffix {\n    padding-inline-end: var(--syn-spacing-small);\n  }\n\n  .button.button--small.button--has-prefix .button__prefix, \n  .button.button--small.button--has-suffix .button__suffix {\n    font-size: var(--syn-spacing-medium);\n  }\n\n  .button.button--medium.button--has-label.button--has-prefix {\n    padding-inline-start: var(--syn-spacing-medium);\n  } \n\n  .button.button--medium.button--has-label.button--has-suffix {\n    padding-inline-end: var(--syn-spacing-medium);\n  }\n\n  .button.button--medium.button--has-prefix .button__prefix, \n  .button.button--medium.button--has-suffix .button__suffix {\n    font-size: var(--syn-spacing-large);\n  }\n\n  .button.button--large.button--has-label.button--has-prefix {\n    padding-inline-start: var(--syn-spacing-large);\n  }\n\n  .button.button--large.button--has-label.button--has-prefix .button__label {\n    padding-inline-start: var(--syn-spacing-small);\n  }\n\n  .button.button--large.button--has-label.button--has-suffix {\n    padding-inline-end: var(--syn-spacing-large);\n  }\n\n  .button.button--large.button--has-label.button--has-suffix .button__label {\n    padding-inline-end: var(--syn-spacing-small);\n  }\n\n  .button.button--large.button--has-prefix .button__prefix, \n  .button.button--large.button--has-suffix .button__suffix {\n    font-size: var(--syn-font-size-2x-large);\n  }\n\n  /*\n   * Caret modifier\n   */\n  .button--caret.button--small .button__caret{\n    font-size: var(--syn-font-size-medium);\n  }\n\n  .button--caret.button--medium .button__caret{\n    font-size: var(--syn-font-size-x-large);\n  }\n\n  .button--caret.button--large .button__caret{\n    font-size: var(--syn-font-size-2x-large);\n  }\n\n  /* #392: Button Groups */\n  :host([data-syn-button-group__button--inner]) .button--filled.button {\n    border-left-color: var(--syn-panel-background-color);\n    border-right-color: var(--syn-panel-background-color);\n  }\n\n  :host([data-syn-button-group__button--first]:not([data-syn-button-group__button--last])) .button--filled.button {\n    border-right-color: var(--syn-panel-background-color);\n  }\n\n  :host([data-syn-button-group__button--last]:not([data-syn-button-group__button--first])) .button--filled.button {\n    border-left-color: var(--syn-panel-background-color);\n  }\n`;\n"],
+  "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,+BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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.UBGDTOZZ.js → chunk.5E5HEAZN.js}

@@ -1,6 +1,6 @@
 import {
   SynProgressRing
-} from "./chunk.7SIMUMVH.js";
+} from "./chunk.I64H5F6D.js";
 
 // src/components/progress-ring/progress-ring.ts
 var progress_ring_default = SynProgressRing;
@@ -9,4 +9,4 @@ SynProgressRing.define("syn-progress-ring");
 export {
   progress_ring_default
 };
-//# sourceMappingURL=chunk.UBGDTOZZ.js.map
+//# sourceMappingURL=chunk.5E5HEAZN.js.map

package/dist/chunks/{chunk.B3UAPU32.js → chunk.5ORVYCVV.js}

@@ -1,21 +1,21 @@
+import {
+  badge_custom_styles_default
+} from "./chunk.SA423NRC.js";
+import {
+  badge_styles_default
+} from "./chunk.Y5TMYX2L.js";
 import {
   LocalizeController
 } 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";
-import {
-  badge_custom_styles_default
-} from "./chunk.SA423NRC.js";
-import {
-  badge_styles_default
-} from "./chunk.Y5TMYX2L.js";
+} from "./chunk.FBQ7NUNW.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -66,4 +66,4 @@ SynBadge = __decorateClass([
 export {
   SynBadge
 };
-//# sourceMappingURL=chunk.B3UAPU32.js.map
+//# sourceMappingURL=chunk.5ORVYCVV.js.map

package/dist/chunks/{chunk.ZPL7FJ2H.js → chunk.6BGHUVA7.js}

@@ -1,3 +1,6 @@
+import {
+  validate_styles_default
+} from "./chunk.MVM3NN6Y.js";
 import {
   alertSizeForInput,
   getEventNameForElement,
@@ -5,25 +8,22 @@ import {
   isInvalidEvent,
   isSynergyElement,
   normalizeEventAttribute
-} from "./chunk.UPDHOWDW.js";
-import {
-  validate_styles_default
-} from "./chunk.MVM3NN6Y.js";
+} from "./chunk.BIXA6XPE.js";
 import {
   SynAlert
-} from "./chunk.6B7GMPMK.js";
+} from "./chunk.7GJ6YOL7.js";
+import {
+  enableDefaultSettings
+} from "./chunk.MLILJGXQ.js";
 import {
   watch
 } from "./chunk.JE5Y2YD7.js";
-import {
-  enableDefaultSettings
-} from "./chunk.KSWDM4HW.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";
@@ -362,4 +362,4 @@ SynValidate = __decorateClass([
 export {
   SynValidate
 };
-//# sourceMappingURL=chunk.ZPL7FJ2H.js.map
+//# sourceMappingURL=chunk.6BGHUVA7.js.map

package/dist/chunks/{chunk.5F5Y2RD6.js → chunk.6GWSQWLE.js}

@@ -1,9 +1,9 @@
 import {
   SynOption
-} from "./chunk.JX6C3ADT.js";
+} from "./chunk.4M4LRUZD.js";
 import {
   SynPopup
-} from "./chunk.5QGW4QZT.js";
+} from "./chunk.P3W7SDQW.js";
 import {
   defaultOptionRenderer
 } from "./chunk.IAS6MLT6.js";
@@ -51,22 +51,22 @@ 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 {
+  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
 } from "./chunk.MO2GTRUM.js";
@@ -930,4 +930,4 @@ setDefaultAnimation("combobox.hide", {
 export {
   SynCombobox
 };
-//# sourceMappingURL=chunk.5F5Y2RD6.js.map
+//# sourceMappingURL=chunk.6GWSQWLE.js.map

package/dist/chunks/{chunk.HSQZ3ZWE.js → chunk.6WFPHCIK.js}

@@ -3,13 +3,13 @@ import {
 } from "./chunk.EFSUQWJZ.js";
 import {
   SynNavItem
-} from "./chunk.JQ4NCOOB.js";
+} from "./chunk.YVTRDHMM.js";
 import {
   SynDivider
-} from "./chunk.F4TDCDGD.js";
+} from "./chunk.M7VZBJK4.js";
 import {
   SynDrawer
-} from "./chunk.VBPHUZ5N.js";
+} from "./chunk.7DBSMJLB.js";
 import {
   unlockBodyScrolling
 } from "./chunk.5732DMBC.js";
@@ -26,22 +26,22 @@ 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 {
+  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
 } from "./chunk.MO2GTRUM.js";
@@ -333,4 +333,4 @@ setDefaultAnimation("sideNav.overlay.hide", {
 export {
   SynSideNav
 };
-//# sourceMappingURL=chunk.HSQZ3ZWE.js.map
+//# sourceMappingURL=chunk.6WFPHCIK.js.map

package/dist/chunks/{chunk.M72HMQL6.js → chunk.75RQ52LL.js}

@@ -1,6 +1,6 @@
 import {
   SynDropdown
-} from "./chunk.ATT3RT4A.js";
+} from "./chunk.ATRUHDOS.js";
 
 // src/components/dropdown/dropdown.ts
 var dropdown_default = SynDropdown;
@@ -9,4 +9,4 @@ SynDropdown.define("syn-dropdown");
 export {
   dropdown_default
 };
-//# sourceMappingURL=chunk.M72HMQL6.js.map
+//# sourceMappingURL=chunk.75RQ52LL.js.map

package/dist/chunks/{chunk.VBPHUZ5N.js → chunk.7DBSMJLB.js}

@@ -1,9 +1,9 @@
-import {
-  drawer_styles_default
-} from "./chunk.N7QJ54ZM.js";
 import {
   drawer_custom_styles_default
 } from "./chunk.I4FIU7FA.js";
+import {
+  drawer_styles_default
+} from "./chunk.N7QJ54ZM.js";
 import {
   Modal
 } from "./chunk.JKSFECFA.js";
@@ -16,7 +16,7 @@ import {
 } from "./chunk.WXVOTRW5.js";
 import {
   SynIconButton
-} from "./chunk.K5VB7VKA.js";
+} from "./chunk.QU47WZOK.js";
 import {
   waitForEvent
 } from "./chunk.C2ENQBPM.js";
@@ -31,18 +31,18 @@ import {
 import {
   HasSlotController
 } from "./chunk.WVVQK5TE.js";
-import {
-  watch
-} from "./chunk.JE5Y2YD7.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
 } from "./chunk.MO2GTRUM.js";
@@ -407,4 +407,4 @@ setDefaultAnimation("drawer.overlay.hide", {
 export {
   SynDrawer
 };
-//# sourceMappingURL=chunk.VBPHUZ5N.js.map
+//# sourceMappingURL=chunk.7DBSMJLB.js.map