@synergy-design-system/vue 2.77.1 → 3.0.0

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # @synergy-design-system/vue
 
+## 3.0.0
+
+### Major Changes
+
+- [#1160](https://github.com/synergy-design-system/synergy-design-system/pull/1160) [`669cbcb`](https://github.com/synergy-design-system/synergy-design-system/commit/669cbcb9cccce72134beac99ac12a2591f3e3c74) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-02-02
+
+  feat: 💥 Component updates and deprecations for Synergy 3.0
+
+  This release removes deprecated attributes, updates defaults, and improves bundle size by removing fallback variables.
+
+  **Key Changes:**
+  - **Breaking:** Removed `hoist` attribute from `<syn-combobox>`, `<syn-dropdown>`, `<syn-select>`, and `<syn-tooltip>` (no longer needed with Popover API support)
+  - **Breaking:** Removed `strategy` attribute from `<syn-popup>` (no longer needed with Popover API support)
+  - **Breaking:** Removed `rail` attribute from `<syn-side-nav>` (use `variant="rail"` instead)
+  - **Breaking:** Changed default for `<syn-input>` `numeric-strategy` from "native" to "modern"
+  - **Breaking:** Variable fallbacks removed - all CSS custom property fallbacks have been eliminated to reduce bundle size
+  - **Breaking:** Token package alignment - components now has a `peerDependency` on `@synergy-design-system/tokens@^3.0.0`
+  - **Breaking:** Angular support - removed support for Angular 16 and 17 (no longer actively maintained)
+  - **Deprecation Notice:** Icon migration utilities (`migrateIconName`, `migrateIconNameFilled`, `migrationLibrary`) are now deprecated
+  - **Deprecation Notice:** `enableExperimentalSettingEmitEvents` is now deprecated in favor of `enableSettingEmitEvents`
+
+  **Migration Steps:**
+  - Remove all `hoist` and `strategy` attributes from affected components
+  - Update `<syn-side-nav rail>` to `<syn-side-nav variant="rail">`
+  - Remove `numeric-strategy="modern"` from `<syn-input>` as it's now the default
+  - Update Angular projects to version 18 or higher
+  - Replace `enableExperimentalSettingEmitEvents` with `enableSettingEmitEvents`
+  - Ensure matching versions of components and tokens packages
+
+  For detailed migration instructions, please refer to the [breaking changes documentation](https://synergy-design-system.github.io/?path=/docs/packages-components-breaking-changes--docs).
+
+### Patch Changes
+
+- Updated dependencies [[`669cbcb`](https://github.com/synergy-design-system/synergy-design-system/commit/669cbcb9cccce72134beac99ac12a2591f3e3c74), [`669cbcb`](https://github.com/synergy-design-system/synergy-design-system/commit/669cbcb9cccce72134beac99ac12a2591f3e3c74)]:
+  - @synergy-design-system/components@3.0.0
+  - @synergy-design-system/tokens@3.0.0
+
 ## 2.77.1
 
 ### Patch Changes

package/dist/components/SynVueCombobox.vue.d.ts

@@ -42,14 +42,6 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
    */
     open?: SynCombobox["open"];
     /**
-  * Enable this option to prevent the listbox from being clipped,
-  when the component is placed inside a container with `overflow: auto|scroll`.
-  Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.
-  
-  @deprecated This property is deprecated and will be removed in the next major version.
-   */
-    hoist?: SynCombobox["hoist"];
-    /**
      * The combobox's label.
      * If you need to display HTML, use the `label` slot instead.
      */
@@ -145,14 +137,6 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
    */
     open?: SynCombobox["open"];
     /**
-  * Enable this option to prevent the listbox from being clipped,
-  when the component is placed inside a container with `overflow: auto|scroll`.
-  Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.
-  
-  @deprecated This property is deprecated and will be removed in the next major version.
-   */
-    hoist?: SynCombobox["hoist"];
-    /**
      * The combobox's label.
      * If you need to display HTML, use the `label` slot instead.
      */

package/dist/components/SynVueCombobox.vue.js

@@ -11,7 +11,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     disabled: {},
     clearable: {},
     open: {},
-    hoist: {},
     label: {},
     placement: {},
     helpText: {},

package/dist/components/SynVueDropdown.vue.d.ts

@@ -36,14 +36,6 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
      */
     skidding?: SynDropdown["skidding"];
     /**
-  * Enable this option to prevent the panel from being clipped when the component is placed inside a container with
-  `overflow: auto|scroll`.
-  * Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.
-  
-  @deprecated This property is deprecated and will be removed in the next major version.
-   */
-    hoist?: SynDropdown["hoist"];
-    /**
      * Syncs the popup width or height to that of the trigger element.
      */
     sync?: SynDropdown["sync"];
@@ -94,14 +86,6 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
      */
     skidding?: SynDropdown["skidding"];
     /**
-  * Enable this option to prevent the panel from being clipped when the component is placed inside a container with
-  `overflow: auto|scroll`.
-  * Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.
-  
-  @deprecated This property is deprecated and will be removed in the next major version.
-   */
-    hoist?: SynDropdown["hoist"];
-    /**
      * Syncs the popup width or height to that of the trigger element.
      */
     sync?: SynDropdown["sync"];

package/dist/components/SynVueDropdown.vue.js

@@ -9,7 +9,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     stayOpenOnSelect: {},
     distance: {},
     skidding: {},
-    hoist: {},
     sync: {},
     containingElement: {}
   },

package/dist/components/SynVuePopup.vue.d.ts

@@ -22,15 +22,6 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
    */
     placement?: SynPopup["placement"];
     /**
-  * Determines how the popup is positioned.
-  * The `absolute` strategy works well in most cases, but if overflow is
-  clipped, using a `fixed` position strategy can often workaround it.
-  
-  @deprecated The strategy property is deprecated and will be removed in future versions.
-  * Modern browsers support the popover element which is used internally instead.
-   */
-    strategy?: SynPopup["strategy"];
-    /**
      * The distance in pixels from which to offset the panel away from its anchor.
      */
     distance?: SynPopup["distance"];
@@ -164,15 +155,6 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
    */
     placement?: SynPopup["placement"];
     /**
-  * Determines how the popup is positioned.
-  * The `absolute` strategy works well in most cases, but if overflow is
-  clipped, using a `fixed` position strategy can often workaround it.
-  
-  @deprecated The strategy property is deprecated and will be removed in future versions.
-  * Modern browsers support the popover element which is used internally instead.
-   */
-    strategy?: SynPopup["strategy"];
-    /**
      * The distance in pixels from which to offset the panel away from its anchor.
      */
     distance?: SynPopup["distance"];

package/dist/components/SynVuePopup.vue.js

@@ -6,7 +6,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     anchor: {},
     active: {},
     placement: {},
-    strategy: {},
     distance: {},
     skidding: {},
     arrow: {},

package/dist/components/SynVueSelect.vue.d.ts

@@ -53,14 +53,6 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
    */
     open?: SynSelect["open"];
     /**
-  * Enable this option to prevent the listbox from being clipped when the component is placed inside a container with
-  `overflow: auto|scroll`.
-  * Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.
-  
-  @deprecated This property is deprecated and will be removed in the next major version.
-   */
-    hoist?: SynSelect["hoist"];
-    /**
      * The select's label.
      * If you need to display HTML, use the `label` slot instead.
      */
@@ -166,14 +158,6 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
    */
     open?: SynSelect["open"];
     /**
-  * Enable this option to prevent the listbox from being clipped when the component is placed inside a container with
-  `overflow: auto|scroll`.
-  * Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.
-  
-  @deprecated This property is deprecated and will be removed in the next major version.
-   */
-    hoist?: SynSelect["hoist"];
-    /**
      * The select's label.
      * If you need to display HTML, use the `label` slot instead.
      */

package/dist/components/SynVueSelect.vue.js

@@ -13,7 +13,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     disabled: {},
     clearable: {},
     open: {},
-    hoist: {},
     label: {},
     placement: {},
     helpText: {},

package/dist/components/SynVueSideNav.vue.d.ts

@@ -27,18 +27,6 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
    */
     open?: SynSideNav["open"];
     /**
-  * Use the rail attribute to only show the prefix of navigation items in closed state.
-  This will open on hover on the rail navigation.
-  On touch devices the navigation opens on click and shows an overlay.
-  
-  Note: The Rail is only an option if all Navigation Items on the first level have an Icon.
-  If this is not the case you should use a burger navigation.
-  
-  @deprecated Use the `variant` attribute with `rail` instead.
-  Will be removed in synergy version 3.0
-   */
-    rail?: SynSideNav["rail"];
-    /**
   * The variant that should be used to show the side navigation.
   
   The following variants are supported:
@@ -94,18 +82,6 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
    */
     open?: SynSideNav["open"];
     /**
-  * Use the rail attribute to only show the prefix of navigation items in closed state.
-  This will open on hover on the rail navigation.
-  On touch devices the navigation opens on click and shows an overlay.
-  
-  Note: The Rail is only an option if all Navigation Items on the first level have an Icon.
-  If this is not the case you should use a burger navigation.
-  
-  @deprecated Use the `variant` attribute with `rail` instead.
-  Will be removed in synergy version 3.0
-   */
-    rail?: SynSideNav["rail"];
-    /**
   * The variant that should be used to show the side navigation.
   
   The following variants are supported:

package/dist/components/SynVueSideNav.vue.js

@@ -4,7 +4,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "SynVueSideNav",
   props: {
     open: {},
-    rail: {},
     variant: {},
     noFocusTrapping: {}
   },

package/dist/components/SynVueTooltip.vue.d.ts

@@ -41,15 +41,6 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
   programmatically.
    */
     trigger?: SynTooltip["trigger"];
-    /**
-  * Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with
-  `overflow: auto|hidden|scroll`.
-  * Hoisting uses a fixed positioning strategy that works in many, but not all,
-  scenarios.
-  
-  @deprecated This property is deprecated and will be removed in the next major version.
-   */
-    hoist?: SynTooltip["hoist"];
 }, {
     nativeElement: import('vue').Ref<SynTooltip | undefined, SynTooltip | undefined>;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
@@ -95,15 +86,6 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
   programmatically.
    */
     trigger?: SynTooltip["trigger"];
-    /**
-  * Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with
-  `overflow: auto|hidden|scroll`.
-  * Hoisting uses a fixed positioning strategy that works in many, but not all,
-  scenarios.
-  
-  @deprecated This property is deprecated and will be removed in the next major version.
-   */
-    hoist?: SynTooltip["hoist"];
 }> & Readonly<{
     "onSyn-show"?: ((e: SynShowEvent) => any) | undefined;
     "onSyn-after-show"?: ((e: SynAfterShowEvent) => any) | undefined;

package/dist/components/SynVueTooltip.vue.js

@@ -9,8 +9,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     distance: {},
     open: {},
     skidding: {},
-    trigger: {},
-    hoist: {}
+    trigger: {}
   },
   emits: ["syn-show", "syn-after-show", "syn-hide", "syn-after-hide"],
   setup(__props, { expose: __expose }) {

package/package.json

@@ -4,7 +4,7 @@
     "url": "https://www.sick.com"
   },
   "dependencies": {
-    "@synergy-design-system/components": "^2.77.1"
+    "@synergy-design-system/components": "3.0.0"
   },
   "description": "Vue3 wrappers for the Synergy Design System",
   "exports": {
@@ -40,7 +40,7 @@
     "directory": "packages/vue"
   },
   "type": "module",
-  "version": "2.77.1",
+  "version": "3.0.0",
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.3",
     "@vue/tsconfig": "^0.8.1",
@@ -50,7 +50,7 @@
     "vue": "^3.5.26"
   },
   "peerDependencies": {
-    "@synergy-design-system/tokens": "^2.48.2"
+    "@synergy-design-system/tokens": "3.0.0"
   },
   "scripts": {
     "_build": "vite build"

package/src/components/SynVueCombobox.vue

@@ -120,15 +120,6 @@ and `hide()` methods and this attribute will reflect the combobox's open state.
  */
   open?: SynCombobox['open'];
 
-  /**
-* Enable this option to prevent the listbox from being clipped,
-when the component is placed inside a container with `overflow: auto|scroll`.
-Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.
-
-@deprecated This property is deprecated and will be removed in the next major version.
- */
-  hoist?: SynCombobox['hoist'];
-
   /**
    * The combobox's label.
    * If you need to display HTML, use the `label` slot instead.

package/src/components/SynVueDropdown.vue

@@ -84,15 +84,6 @@ dropdowns that allow for multiple interactions.
    */
   skidding?: SynDropdown['skidding'];
 
-  /**
-* Enable this option to prevent the panel from being clipped when the component is placed inside a container with
-`overflow: auto|scroll`.
-* Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.
-
-@deprecated This property is deprecated and will be removed in the next major version.
- */
-  hoist?: SynDropdown['hoist'];
-
   /**
    * Syncs the popup width or height to that of the trigger element.
    */

package/src/components/SynVuePopup.vue

@@ -72,16 +72,6 @@ panel inside of the viewport.
  */
   placement?: SynPopup['placement'];
 
-  /**
-* Determines how the popup is positioned.
-* The `absolute` strategy works well in most cases, but if overflow is
-clipped, using a `fixed` position strategy can often workaround it.
-
-@deprecated The strategy property is deprecated and will be removed in future versions.
-* Modern browsers support the popover element which is used internally instead.
- */
-  strategy?: SynPopup['strategy'];
-
   /**
    * The distance in pixels from which to offset the panel away from its anchor.
    */

package/src/components/SynVueSelect.vue

@@ -128,15 +128,6 @@ use the `show()` and `hide()` methods and this attribute will reflect the select
  */
   open?: SynSelect['open'];
 
-  /**
-* Enable this option to prevent the listbox from being clipped when the component is placed inside a container with
-`overflow: auto|scroll`.
-* Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.
-
-@deprecated This property is deprecated and will be removed in the next major version.
- */
-  hoist?: SynSelect['hoist'];
-
   /**
    * The select's label.
    * If you need to display HTML, use the `label` slot instead.

package/src/components/SynVueSideNav.vue

@@ -106,19 +106,6 @@ Without `open`, the side-nav will only show the prefix of nav-item's.
  */
   open?: SynSideNav['open'];
 
-  /**
-* Use the rail attribute to only show the prefix of navigation items in closed state.
-This will open on hover on the rail navigation.
-On touch devices the navigation opens on click and shows an overlay.
-
-Note: The Rail is only an option if all Navigation Items on the first level have an Icon.
-If this is not the case you should use a burger navigation.
-
-@deprecated Use the `variant` attribute with `rail` instead.
-Will be removed in synergy version 3.0
- */
-  rail?: SynSideNav['rail'];
-
   /**
 * The variant that should be used to show the side navigation.
 

package/src/components/SynVueTooltip.vue

@@ -94,16 +94,6 @@ options can be passed by separating them with a space.
 programmatically.
  */
   trigger?: SynTooltip['trigger'];
-
-  /**
-* Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with
-`overflow: auto|hidden|scroll`.
-* Hoisting uses a fixed positioning strategy that works in many, but not all,
-scenarios.
-
-@deprecated This property is deprecated and will be removed in the next major version.
- */
-  hoist?: SynTooltip['hoist'];
 }>();
 
 // Make sure prop binding only forwards the props that are actually there.