@synergy-design-system/components 2.77.1 → 3.1.0

package/code-quality/html-validate/scripts/synergy-element-rules.js

@@ -1,4 +1,7 @@
-import { deprecatedForV2, willDeprecateInRelease } from './deprecation.js';
+import {
+  deprecatedForV2,
+  deprecatedForV3,
+} from './deprecation.js';
 
 // Shared settings for form associated elements
 const formAssociated = {
@@ -105,8 +108,8 @@ const SynCheckbox = {
 const SynCombobox = {
   attributes: {
     hoist: {
+      allowed: deprecatedForV3('Synergy is now using the popover api internally which supports hoisting by default.'),
       boolean: true,
-      deprecated: willDeprecateInRelease('3.0', 'Synergy is now using the popover api internally which supports hoisting by default.'),
     },
   },
   flow: true,
@@ -154,8 +157,8 @@ const SynDrawer = {
 const SynDropdown = {
   attributes: {
     hoist: {
+      allowed: deprecatedForV3('Synergy is now using the popover api internally which supports hoisting by default.'),
       boolean: true,
-      deprecated: willDeprecateInRelease('3.0', 'Synergy is now using the popover api internally which supports hoisting by default.'),
     },
   },
   flow: true,
@@ -271,6 +274,20 @@ const SynOption = {
   focusable: true,
 };
 
+/**
+ * @type {import('html-validate').MetaElement}
+ */
+const SynPopup = {
+  attributes: {
+    strategy: {
+      allowed: deprecatedForV3('Synergy is now using the popover api internally which supports hoisting by default.'),
+    },
+  },
+  flow: true,
+  focusable: true,
+  sectioning: true,
+};
+
 /**
  * @type {import('html-validate').MetaElement}
  */
@@ -341,8 +358,8 @@ const SynRange = {
 const SynSelect = {
   attributes: {
     hoist: {
+      allowed: deprecatedForV3('Synergy is now using the popover api internally which supports hoisting by default.'),
       boolean: true,
-      deprecated: willDeprecateInRelease('3.0', 'Synergy is now using the popover api internally which supports hoisting by default.'),
     },
   },
   flow: true,
@@ -357,8 +374,8 @@ const SynSelect = {
 const SynSideNav = {
   attributes: {
     rail: {
+      allowed: deprecatedForV3('Please use the `variant` attribute with `rail` instead'),
       boolean: true,
-      deprecated: willDeprecateInRelease('3.0', 'Please use the `variant` attribute with `rail` instead'),
     },
   },
   flow: true,
@@ -430,8 +447,8 @@ const SynTextarea = {
 const SynTooltip = {
   attributes: {
     hoist: {
+      allowed: deprecatedForV3('Synergy is now using the popover api internally which supports hoisting by default.'),
       boolean: true,
-      deprecated: willDeprecateInRelease('3.0', 'Synergy is now using the popover api internally which supports hoisting by default.'),
     },
   },
   flow: true,
@@ -477,6 +494,7 @@ export const rules = {
   SynNavItem,
   SynOptgroup,
   SynOption,
+  SynPopup,
   SynPrioNav,
   SynProgressBar,
   SynProgressRing,

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

@@ -1,6 +1,6 @@
 import {
   SynBreadcrumbItem
-} from "./chunk.HD3FIFU7.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.OQOWQHEV.js.map
+//# sourceMappingURL=chunk.2QDRZ3C6.js.map

package/dist/chunks/{chunk.DH3ESODU.js → chunk.2VDKBFQ7.js}

@@ -15,7 +15,7 @@ var range_tick_styles_default = css`
   }
 
   .tick-line {
-    background: var(--syn-range-tick-color, var(--syn-color-neutral-400));
+    background: var(--syn-range-tick-color);
     height: var(--tick-height);
   }
 
@@ -36,4 +36,4 @@ var range_tick_styles_default = css`
 export {
   range_tick_styles_default
 };
-//# sourceMappingURL=chunk.DH3ESODU.js.map
+//# sourceMappingURL=chunk.2VDKBFQ7.js.map

package/dist/chunks/{chunk.DH3ESODU.js.map → chunk.2VDKBFQ7.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/range-tick/range-tick.styles.ts"],
-  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  :host {\n    --tick-height: var(--syn-spacing-x-small);\n    --tick-label-top: 10px;\n  }\n\n  .tick {\n    color: var(--syn-input-icon-color);\n    font-family: var(--syn-font-family);\n    font-weight: var(--syn-font-weight-normal);\n    line-height: var(--syn-line-height-denser);\n    width: 1px;\n  }\n\n  .tick-line {\n    background: var(--syn-range-tick-color, var(--syn-color-neutral-400));\n    height: var(--tick-height);\n  }\n\n  .tick--subdivision .tick-line{\n    height: calc(var(--tick-height) / 2);\n  }\n\n  .tick-label {\n    align-items: center;\n    display: flex;\n    justify-content: center;\n    margin-top: var(--tick-label-top);\n    text-align: center;\n    white-space: nowrap;\n  }\n`;\n"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  :host {\n    --tick-height: var(--syn-spacing-x-small);\n    --tick-label-top: 10px;\n  }\n\n  .tick {\n    color: var(--syn-input-icon-color);\n    font-family: var(--syn-font-family);\n    font-weight: var(--syn-font-weight-normal);\n    line-height: var(--syn-line-height-denser);\n    width: 1px;\n  }\n\n  .tick-line {\n    background: var(--syn-range-tick-color);\n    height: var(--tick-height);\n  }\n\n  .tick--subdivision .tick-line{\n    height: calc(var(--tick-height) / 2);\n  }\n\n  .tick-label {\n    align-items: center;\n    display: flex;\n    justify-content: center;\n    margin-top: var(--tick-label-top);\n    text-align: center;\n    white-space: nowrap;\n  }\n`;\n"],
   "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,4BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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.PDXNYRZI.js → chunk.2WOSSTKK.js}

@@ -1,16 +1,25 @@
 import {
   INITIAL_DEFAULT_SETTINGS,
   defaultSettings
-} from "./chunk.C6JRBWBJ.js";
+} from "./chunk.FLJJ2OCR.js";
+import {
+  sortComponentsForUpdate
+} from "./chunk.VMLERD3J.js";
 
 // src/utilities/defaultSettings/functions.ts
-var SYNERGY_EXPERIMENTAL_SETTING_EMIT_EVENTS = false;
+var SYNERGY_SETTING_EMIT_EVENTS = false;
 var hasGlobalEventSetup = false;
 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);
@@ -18,8 +27,8 @@ function defaultSettingsHandler(e) {
     });
   });
 }
-var enableExperimentalSettingEmitEvents = (enabled = true) => {
-  SYNERGY_EXPERIMENTAL_SETTING_EMIT_EVENTS = enabled;
+var enableSettingEmitEvents = (enabled = true) => {
+  SYNERGY_SETTING_EMIT_EVENTS = enabled;
   if (!enabled) {
     globalEventNotificationMap.clear();
     hasGlobalEventSetup = false;
@@ -35,8 +44,11 @@ var enableExperimentalSettingEmitEvents = (enabled = true) => {
     });
   }
 };
+var enableExperimentalSettingEmitEvents = (enabled = true) => {
+  enableSettingEmitEvents(enabled);
+};
 var addGlobalEventNotification = (element) => {
-  if (SYNERGY_EXPERIMENTAL_SETTING_EMIT_EVENTS && !globalEventNotificationMap.has(element)) {
+  if (SYNERGY_SETTING_EMIT_EVENTS && !globalEventNotificationMap.has(element)) {
     globalEventNotificationMap.add(element);
   }
 };
@@ -88,7 +100,7 @@ var setDefaultSettingsForElement = (component, newValues) => {
       cachedItem[change.attribute] = change.newValue;
     });
   }
-  if (SYNERGY_EXPERIMENTAL_SETTING_EMIT_EVENTS) {
+  if (SYNERGY_SETTING_EMIT_EVENTS) {
     const event = new CustomEvent("syn-default-settings-changed", {
       bubbles: true,
       detail
@@ -110,19 +122,26 @@ 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_EXPERIMENTAL_SETTING_EMIT_EVENTS) {
+  if (SYNERGY_SETTING_EMIT_EVENTS) {
     const event = new CustomEvent("syn-default-settings-changed", {
       bubbles: true,
       detail
@@ -136,6 +155,7 @@ var resetGlobalDefaultSettings = () => setGlobalDefaultSettings(
 );
 
 export {
+  enableSettingEmitEvents,
   enableExperimentalSettingEmitEvents,
   addGlobalEventNotification,
   removeGlobalEventNotification,
@@ -144,4 +164,4 @@ export {
   setGlobalDefaultSettings,
   resetGlobalDefaultSettings
 };
-//# sourceMappingURL=chunk.PDXNYRZI.js.map
+//# sourceMappingURL=chunk.2WOSSTKK.js.map

package/dist/chunks/chunk.2WOSSTKK.js.map

@@ -0,0 +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 { 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.ZUQ225FP.js → chunk.34V3QOIQ.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.YTEJW7IF.js";
 import {
   library_system_default
-} from "./chunk.Y5IKF6ZC.js";
+} from "./chunk.3RR4RIR7.js";
 
 // src/components/icon/library.ts
 var registry = [library_default_default, library_system_default];
@@ -42,4 +42,4 @@ export {
   registerIconLibrary,
   unregisterIconLibrary
 };
-//# sourceMappingURL=chunk.ZUQ225FP.js.map
+//# sourceMappingURL=chunk.34V3QOIQ.js.map

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

@@ -1,6 +1,6 @@
 import {
   SynMenuItem
-} from "./chunk.357ZOX56.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.HBGYPZ7M.js.map
+//# sourceMappingURL=chunk.3PGJQYXW.js.map

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

@@ -3,7 +3,7 @@ import {
 } from "./chunk.WNUZ6LH4.js";
 import {
   enableDefaultSettings
-} from "./chunk.ZNNZXEP4.js";
+} from "./chunk.MLILJGXQ.js";
 import {
   watch
 } from "./chunk.JE5Y2YD7.js";
@@ -12,7 +12,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.QF6ODD6S.js";
+} from "./chunk.FBQ7NUNW.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -111,4 +111,4 @@ SynAccordion = __decorateClass([
 export {
   SynAccordion
 };
-//# sourceMappingURL=chunk.DAELIXNV.js.map
+//# sourceMappingURL=chunk.3PWAIWL5.js.map

package/dist/chunks/{chunk.Y5IKF6ZC.js → chunk.3RR4RIR7.js}

@@ -1,21 +1,20 @@
 import {
   icons
-} from "./chunk.MZRNJOUV.js";
+} from "./chunk.66HKI7Q7.js";
 import {
   icons as icons2
-} from "./chunk.4A6JD5B2.js";
+} from "./chunk.VBS3JEIP.js";
 
 // src/components/icon/library.system.ts
-var icons3 = icons;
+var icons3 = icons2;
 var setSystemIconLibrary = (library) => {
   switch (library) {
-    case "sick2025":
-      icons3 = icons2;
-      break;
     case "sick2018":
-    default:
       icons3 = icons;
       break;
+    case "sick2025":
+    default:
+      icons3 = icons2;
   }
 };
 var systemLibrary = {
@@ -33,4 +32,4 @@ export {
   setSystemIconLibrary,
   library_system_default
 };
-//# sourceMappingURL=chunk.Y5IKF6ZC.js.map
+//# sourceMappingURL=chunk.3RR4RIR7.js.map

package/dist/chunks/chunk.3RR4RIR7.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/icon/library.system.ts"],
+  "sourcesContent": ["/* eslint-disable */\nimport type { IconLibrary } from './library.js';\nimport { icons as sick2018Icons } from './sick2018-system-icons.js';\nimport { icons as sick2025Icons } from './sick2025-system-icons.js';\n\nexport type AvailableSystemIcons = 'sick2018' | 'sick2025';\n\n/**\n * The current system icon library.\n * Defaults to 2018 for Synergy V2 and 2025 for Synergy V3.\n * This can be changed at runtime, but should not be done in production.\n * The system icon library is used by Synergy components to ensure consistent icons across the application.\n */\nlet icons = sick2025Icons;\n\n/**\n * Set the current system icon library.\n * @param library - The system icon library to set.\n */\nexport const setSystemIconLibrary = (library?: AvailableSystemIcons) => {\n  switch (library) {\n    case 'sick2018':\n      icons = sick2018Icons;\n      break;\n    case 'sick2025':\n    default:\n      icons = sick2025Icons;\n  }\n};\n\n// System icons are a separate library to ensure they're always available, regardless of how the default icon library is\n// configured or if its icons resolve properly.\n//\n// All Synergy components must use the system library instead of the default library. For visual consistency, system\n// icons are a subset of Synergy Icons.\nconst systemLibrary: IconLibrary = {\n  name: 'system',\n  resolver: (name: keyof typeof icons) => {\n    if (name in icons) {\n      return icons[name];\n    }\n    return '';\n  }\n};\n\nexport default systemLibrary;\n"],
+  "mappings": ";;;;;;;;AAaA,IAAIA,SAAQA;AAML,IAAM,uBAAuB,CAAC,YAAmC;AACtE,UAAQ,SAAS;AAAA,IACf,KAAK;AACH,MAAAA,SAAQ;AACR;AAAA,IACF,KAAK;AAAA,IACL;AACE,MAAAA,SAAQA;AAAA,EACZ;AACF;AAOA,IAAM,gBAA6B;AAAA,EACjC,MAAM;AAAA,EACN,UAAU,CAAC,SAA6B;AACtC,QAAI,QAAQA,QAAO;AACjB,aAAOA,OAAM,IAAI;AAAA,IACnB;AACA,WAAO;AAAA,EACT;AACF;AAEA,IAAO,yBAAQ;",
+  "names": ["icons"]
+}

package/dist/chunks/{chunk.M7U5QI74.js → chunk.3T6ULO23.js}

@@ -51,7 +51,7 @@ var optgroup_styles_default = css`
 
   .optgroup__prefix,
   .optgroup__suffix {
-    color: var(--syn-option-icon-color, var(--syn-color-neutral-800));
+    color: var(--syn-option-icon-color);
     font-size: var(--syn-spacing-large);
   }
 
@@ -63,4 +63,4 @@ var optgroup_styles_default = css`
 export {
   optgroup_styles_default
 };
-//# sourceMappingURL=chunk.M7U5QI74.js.map
+//# sourceMappingURL=chunk.3T6ULO23.js.map

package/dist/chunks/{chunk.M7U5QI74.js.map → chunk.3T6ULO23.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/optgroup/optgroup.styles.ts"],
-  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  :host {\n    --display-divider: block;\n  }\n\n  .optgroup__divider {\n    --spacing: var(--syn-spacing-x-small);\n\n    display: var(--display-divider);\n  }\n\n  .optgroup__label-container {\n    align-items: center;\n    border: solid transparent;\n    border-width: 0 var(--option-inset-border-vertical);\n    box-sizing: border-box;\n    color: var(--syn-input-color);\n    display: flex;\n    gap: var(--syn-spacing-small);\n    min-height: var(--option-min-height, var(--syn-input-height-medium));\n  }\n\n  /**\n   * Only show the label container when there is a label at all\n   */\n  .optgroup--has-prefix .optgroup__label-container,\n  .optgroup--has-label .optgroup__label-container,\n  .optgroup--has-suffix .optgroup__label-container {\n    padding: 0 calc(var(--option-padding) - var(--option-inset-border-vertical));\n  }\n\n  /**\n   * Format main label.\n   * Make sure this works for props and slotted content\n   */\n  .optgroup__label-content,\n  .optgroup__label::slotted(*) {\n    flex: 1;\n    font-family: var(--syn-font-sans);\n    font-size: var(--option-font-size, var(--syn-font-size-medium));\n    font-weight: var(--syn-font-weight-semibold);\n    line-height: var(--syn-line-height-normal);\n  }\n\n  /* Disabled Label */\n  .optgroup--is-disabled .optgroup__label-container {\n    opacity: var(--syn-input-disabled-opacity);\n  }\n\n  .optgroup__prefix,\n  .optgroup__suffix {\n    color: var(--syn-option-icon-color, var(--syn-color-neutral-800));\n    font-size: var(--syn-spacing-large);\n  }\n\n  .optgroup__options ::slotted(syn-option[hidden]) {\n    display: none;\n  }\n`;\n"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  :host {\n    --display-divider: block;\n  }\n\n  .optgroup__divider {\n    --spacing: var(--syn-spacing-x-small);\n\n    display: var(--display-divider);\n  }\n\n  .optgroup__label-container {\n    align-items: center;\n    border: solid transparent;\n    border-width: 0 var(--option-inset-border-vertical);\n    box-sizing: border-box;\n    color: var(--syn-input-color);\n    display: flex;\n    gap: var(--syn-spacing-small);\n    min-height: var(--option-min-height, var(--syn-input-height-medium));\n  }\n\n  /**\n   * Only show the label container when there is a label at all\n   */\n  .optgroup--has-prefix .optgroup__label-container,\n  .optgroup--has-label .optgroup__label-container,\n  .optgroup--has-suffix .optgroup__label-container {\n    padding: 0 calc(var(--option-padding) - var(--option-inset-border-vertical));\n  }\n\n  /**\n   * Format main label.\n   * Make sure this works for props and slotted content\n   */\n  .optgroup__label-content,\n  .optgroup__label::slotted(*) {\n    flex: 1;\n    font-family: var(--syn-font-sans);\n    font-size: var(--option-font-size, var(--syn-font-size-medium));\n    font-weight: var(--syn-font-weight-semibold);\n    line-height: var(--syn-line-height-normal);\n  }\n\n  /* Disabled Label */\n  .optgroup--is-disabled .optgroup__label-container {\n    opacity: var(--syn-input-disabled-opacity);\n  }\n\n  .optgroup__prefix,\n  .optgroup__suffix {\n    color: var(--syn-option-icon-color);\n    font-size: var(--syn-spacing-large);\n  }\n\n  .optgroup__options ::slotted(syn-option[hidden]) {\n    display: none;\n  }\n`;\n"],
   "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,0BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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.A7LOAARY.js → chunk.3WVPUEAN.js}

@@ -4,8 +4,8 @@ var progress_bar_custom_styles_default = css`
   :host {
     --height: var(--syn-font-size-medium);
     --speed: 2.5s;
-    --indicator-color: var(--syn-progress-indicator-color, var(--syn-color-primary-600));
-    --track-color: var(--syn-progress-track-color, var(--syn-color-neutral-200));
+    --indicator-color: var(--syn-progress-indicator-color);
+    --track-color: var(--syn-progress-track-color);
   }
 
   .progress-bar {
@@ -26,4 +26,4 @@ var progress_bar_custom_styles_default = css`
 export {
   progress_bar_custom_styles_default
 };
-//# sourceMappingURL=chunk.A7LOAARY.js.map
+//# sourceMappingURL=chunk.3WVPUEAN.js.map

package/dist/chunks/{chunk.A7LOAARY.js.map → chunk.3WVPUEAN.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/progress-bar/progress-bar.custom.styles.ts"],
-  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  :host {\n    --height: var(--syn-font-size-medium);\n    --speed: 2.5s;\n    --indicator-color: var(--syn-progress-indicator-color, var(--syn-color-primary-600));\n    --track-color: var(--syn-progress-track-color, var(--syn-color-neutral-200));\n  }\n\n  .progress-bar {\n    border-radius: var(--syn-border-radius-none);\n    box-shadow: none;\n  }\n\n  .progress-bar__indicator {\n    font: var(--syn-body-x-small-bold);\n  }\n\n  /* Indeterminate */\n  .progress-bar--indeterminate .progress-bar__indicator {\n    animation-duration: var(--speed);\n  }\n`;\n"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  :host {\n    --height: var(--syn-font-size-medium);\n    --speed: 2.5s;\n    --indicator-color: var(--syn-progress-indicator-color);\n    --track-color: var(--syn-progress-track-color);\n  }\n\n  .progress-bar {\n    border-radius: var(--syn-border-radius-none);\n    box-shadow: none;\n  }\n\n  .progress-bar__indicator {\n    font: var(--syn-body-x-small-bold);\n  }\n\n  /* Indeterminate */\n  .progress-bar--indeterminate .progress-bar__indicator {\n    animation-duration: var(--speed);\n  }\n`;\n"],
   "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,qCAAQ;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.O67MQZKB.js → chunk.4K75N3WR.js}

@@ -1,6 +1,6 @@
 import {
   SynDialog
-} from "./chunk.NQAIJI6C.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.O67MQZKB.js.map
+//# sourceMappingURL=chunk.4K75N3WR.js.map

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

@@ -3,13 +3,13 @@ import {
 } from "./chunk.ARR23WUY.js";
 import {
   option_custom_styles_default
-} from "./chunk.S74CFZ4Z.js";
+} from "./chunk.BL5JW7YS.js";
 import {
   option_styles_default
 } from "./chunk.IVM3BGRH.js";
 import {
   SynIcon
-} from "./chunk.SP7ULWRO.js";
+} from "./chunk.Q6XDV7O7.js";
 import {
   LocalizeController
 } from "./chunk.OAQRCZOO.js";
@@ -21,7 +21,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.QF6ODD6S.js";
+} from "./chunk.FBQ7NUNW.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -186,4 +186,4 @@ __decorateClass([
 export {
   SynOption
 };
-//# sourceMappingURL=chunk.547D43SQ.js.map
+//# sourceMappingURL=chunk.4M4LRUZD.js.map

package/dist/chunks/{chunk.HD634VUP.js → chunk.4PUQDU4T.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.QF6ODD6S.js";
+} from "./chunk.FBQ7NUNW.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -60,4 +60,4 @@ __decorateClass([
 export {
   SynCard
 };
-//# sourceMappingURL=chunk.HD634VUP.js.map
+//# sourceMappingURL=chunk.4PUQDU4T.js.map

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

@@ -1,6 +1,6 @@
 import {
   switch_custom_styles_default
-} from "./chunk.T7PPSROA.js";
+} from "./chunk.SLDFB2O3.js";
 import {
   switch_styles_default
 } from "./chunk.4TB35TYG.js";
@@ -19,7 +19,7 @@ import {
 } from "./chunk.WVVQK5TE.js";
 import {
   enableDefaultSettings
-} from "./chunk.ZNNZXEP4.js";
+} from "./chunk.MLILJGXQ.js";
 import {
   watch
 } from "./chunk.JE5Y2YD7.js";
@@ -28,7 +28,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.QF6ODD6S.js";
+} from "./chunk.FBQ7NUNW.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -255,4 +255,4 @@ SynSwitch = __decorateClass([
 export {
   SynSwitch
 };
-//# sourceMappingURL=chunk.UEDN3QLN.js.map
+//# sourceMappingURL=chunk.4VOWXLEZ.js.map