@synergy-design-system/components 1.14.0 → 1.15.0

package/dist/events/events.d.ts

@@ -1,6 +1,8 @@
 export type * from './syn-after-hide.ts';
 export type * from './syn-after-show.ts';
 export type * from './syn-blur.ts';
+export type * from './syn-burger-menu-hide.ts';
+export type * from './syn-burger-menu-show.ts';
 export type * from './syn-change.ts';
 export type * from './syn-clear.ts';
 export type * from './syn-error.ts';

package/dist/events/syn-burger-menu-hide.d.ts

@@ -0,0 +1,6 @@
+export type SynBurgerMenuHideEvent = CustomEvent<Record<PropertyKey, never>>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'syn-burger-menu-hide': SynBurgerMenuHideEvent;
+    }
+}

package/dist/events/syn-burger-menu-show.d.ts

@@ -0,0 +1,6 @@
+export type SynBurgerMenuShowEvent = CustomEvent<Record<PropertyKey, never>>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'syn-burger-menu-show': SynBurgerMenuShowEvent;
+    }
+}

package/dist/synergy.d.ts

@@ -12,13 +12,16 @@ export { default as SynInput } from './components/input/input.js';
 export { default as SynMenuItem } from './components/menu-item/menu-item.js';
 export { default as SynMenuLabel } from './components/menu-label/menu-label.js';
 export { default as SynMenu } from './components/menu/menu.js';
+export { default as SynNavItem } from './components/nav-item/nav-item.js';
 export { default as SynOptgroup } from './components/optgroup/optgroup.js';
 export { default as SynOption } from './components/option/option.js';
 export { default as SynPopup } from './components/popup/popup.js';
+export { default as SynPrioNav } from './components/prio-nav/prio-nav.js';
 export { default as SynRadioButton } from './components/radio-button/radio-button.js';
 export { default as SynRadioGroup } from './components/radio-group/radio-group.js';
 export { default as SynRadio } from './components/radio/radio.js';
 export { default as SynSelect } from './components/select/select.js';
+export { default as SynSideNav } from './components/side-nav/side-nav.js';
 export { default as SynSwitch } from './components/switch/switch.js';
 export { default as SynTag } from './components/tag/tag.js';
 export { default as SynTextarea } from './components/textarea/textarea.js';

package/dist/synergy.js

@@ -1,171 +1,187 @@
-import "./chunks/chunk.NKIYFJN2.js";
-import {
-  textarea_default
-} from "./chunks/chunk.MQCFDVLW.js";
 import {
   getFormControls,
   serialize
 } from "./chunks/chunk.KUO3KJOC.js";
-import {
-  switch_default
-} from "./chunks/chunk.CSOIUDS4.js";
+import "./chunks/chunk.NKIYFJN2.js";
 import {
   tag_default
-} from "./chunks/chunk.2KV3G5JF.js";
-import "./chunks/chunk.H7XP6JAS.js";
+} from "./chunks/chunk.2LMCM7HQ.js";
+import {
+  textarea_default
+} from "./chunks/chunk.63JWIOGL.js";
+import "./chunks/chunk.YNWVXDDQ.js";
 import "./chunks/chunk.YBIBWRKC.js";
 import "./chunks/chunk.2EI3TNL7.js";
 import {
-  radio_group_default
-} from "./chunks/chunk.CG753OYA.js";
+  switch_default
+} from "./chunks/chunk.MMDRQ7JM.js";
+import "./chunks/chunk.GARWLAOJ.js";
+import "./chunks/chunk.W5JK7V7K.js";
+import "./chunks/chunk.ADRKUQGR.js";
 import {
   select_default
-} from "./chunks/chunk.4MRXASVT.js";
-import "./chunks/chunk.A6S4OYWD.js";
-import "./chunks/chunk.KEEDSK2V.js";
+} from "./chunks/chunk.OVUVBTHH.js";
+import "./chunks/chunk.GCHIBXQT.js";
+import "./chunks/chunk.WV2VTAP2.js";
 import "./chunks/chunk.B6R3IVGO.js";
 import "./chunks/chunk.BGHK4NQA.js";
 import "./chunks/chunk.OWMT6OL2.js";
 import "./chunks/chunk.QNQNR3RY.js";
-import "./chunks/chunk.SRZMRKLQ.js";
-import "./chunks/chunk.W5JK7V7K.js";
-import "./chunks/chunk.ADRKUQGR.js";
+import {
+  side_nav_default
+} from "./chunks/chunk.P43W2NFX.js";
+import "./chunks/chunk.VDA7H6VI.js";
+import "./chunks/chunk.GO3CCKC3.js";
 import {
   radio_default
-} from "./chunks/chunk.VDYPXC2H.js";
+} from "./chunks/chunk.VPW6WZNZ.js";
 import {
   radio_button_default
-} from "./chunks/chunk.PSTO5STZ.js";
-import "./chunks/chunk.VSEAHAW7.js";
+} from "./chunks/chunk.TFWNKCFJ.js";
+import "./chunks/chunk.WCIAL36G.js";
 import "./chunks/chunk.ZIQXX272.js";
-import "./chunks/chunk.P2D7PUR2.js";
+import {
+  radio_group_default
+} from "./chunks/chunk.JCFKRHGM.js";
+import "./chunks/chunk.FYN26TFO.js";
 import "./chunks/chunk.F4MRQLNL.js";
 import "./chunks/chunk.XIUSSERX.js";
-import {
-  option_default
-} from "./chunks/chunk.EZE5M5XB.js";
 import {
   popup_default
-} from "./chunks/chunk.B57ZVQ2Q.js";
-import "./chunks/chunk.OLM7IVHA.js";
-import "./chunks/chunk.PKO6FEOM.js";
+} from "./chunks/chunk.IUHZVWPW.js";
+import {
+  prio_nav_default
+} from "./chunks/chunk.IJCD3LMC.js";
+import "./chunks/chunk.IYGOMLU7.js";
+import "./chunks/chunk.74N5WLM5.js";
+import "./chunks/chunk.XNP4OTUB.js";
+import "./chunks/chunk.T43ZXJKG.js";
 import "./chunks/chunk.V6VND4OF.js";
+import "./chunks/chunk.PKO6FEOM.js";
+import {
+  optgroup_default
+} from "./chunks/chunk.4LD5UMX7.js";
+import {
+  option_default
+} from "./chunks/chunk.ZMIBKG2N.js";
+import "./chunks/chunk.JL53VHSP.js";
+import "./chunks/chunk.3B24TYVN.js";
+import "./chunks/chunk.CFIQXXMW.js";
 import {
   menu_label_default
-} from "./chunks/chunk.NXX572OD.js";
-import "./chunks/chunk.MEDX62IL.js";
+} from "./chunks/chunk.V3JANQYN.js";
+import "./chunks/chunk.O3A57CXO.js";
 import "./chunks/chunk.X6GR6IA2.js";
 import "./chunks/chunk.3FOVDOJX.js";
 import {
-  optgroup_default
-} from "./chunks/chunk.GDHER3FZ.js";
-import "./chunks/chunk.QFMUPETV.js";
+  nav_item_default
+} from "./chunks/chunk.QJGWS4TQ.js";
+import "./chunks/chunk.MJYZDU37.js";
+import "./chunks/chunk.L4UUXVRZ.js";
+import "./chunks/chunk.VUROYPEC.js";
 import "./chunks/chunk.KG52EHDB.js";
-import "./chunks/chunk.ETREUSYO.js";
-import "./chunks/chunk.3B24TYVN.js";
-import "./chunks/chunk.CFIQXXMW.js";
 import {
   menu_default
-} from "./chunks/chunk.YRMXDJFM.js";
+} from "./chunks/chunk.H46CGP6A.js";
 import {
   menu_item_default
-} from "./chunks/chunk.UEQDHG7J.js";
-import "./chunks/chunk.64MHCKTF.js";
+} from "./chunks/chunk.2BEBXBDJ.js";
+import "./chunks/chunk.LNUIMITL.js";
 import "./chunks/chunk.OOABXWCW.js";
 import "./chunks/chunk.PDHVYHXD.js";
 import "./chunks/chunk.RRWSXFQ5.js";
 import {
   icon_button_default
-} from "./chunks/chunk.PEMSU7RY.js";
+} from "./chunks/chunk.OLUNOSLX.js";
 import {
   input_default
-} from "./chunks/chunk.PAK472WN.js";
-import "./chunks/chunk.QQB6JCQY.js";
+} from "./chunks/chunk.V6OK2ECX.js";
+import "./chunks/chunk.3JBPXBYC.js";
 import "./chunks/chunk.3A65FBTX.js";
 import "./chunks/chunk.4QS5IWYB.js";
-import "./chunks/chunk.ITUSK365.js";
+import "./chunks/chunk.XSVH753L.js";
 import "./chunks/chunk.PILX7LVU.js";
 import "./chunks/chunk.RSSY7KPD.js";
 import {
   drawer_default
-} from "./chunks/chunk.34NAFEQ7.js";
+} from "./chunks/chunk.KC6TXACE.js";
 import {
   dropdown_default
-} from "./chunks/chunk.EWGDHM27.js";
-import "./chunks/chunk.525LGYB4.js";
-import "./chunks/chunk.GGY5VQYA.js";
+} from "./chunks/chunk.EFV5UWMX.js";
+import "./chunks/chunk.NBHBC5FQ.js";
+import "./chunks/chunk.4TWUWTOI.js";
 import "./chunks/chunk.MIMALEWP.js";
 import "./chunks/chunk.2KYFCKCK.js";
 import "./chunks/chunk.SLCYXMHB.js";
 import {
   header_default
-} from "./chunks/chunk.ZLEQ5DOF.js";
-import "./chunks/chunk.L6ZUZPOW.js";
+} from "./chunks/chunk.JUD3T56D.js";
+import "./chunks/chunk.BHTLGDWT.js";
 import {
   icon_default
-} from "./chunks/chunk.Q4CT57M2.js";
-import "./chunks/chunk.JDXKGJ63.js";
+} from "./chunks/chunk.G7XEHN2F.js";
+import "./chunks/chunk.AOKNP4QD.js";
 import {
   checkbox_default
-} from "./chunks/chunk.3HTXK6WY.js";
+} from "./chunks/chunk.CHJC6OSN.js";
 import {
   divider_default
-} from "./chunks/chunk.2ZEMD2N7.js";
-import "./chunks/chunk.5HAKNNIR.js";
+} from "./chunks/chunk.SBHXUKMY.js";
+import "./chunks/chunk.YBPWZ4QI.js";
 import "./chunks/chunk.FA6V2WD6.js";
 import "./chunks/chunk.ACTJFDNK.js";
-import "./chunks/chunk.COFVSXEF.js";
+import "./chunks/chunk.5UETQYQR.js";
 import "./chunks/chunk.2QYALZBT.js";
-import "./chunks/chunk.7UUZ5ISH.js";
+import "./chunks/chunk.H7APDHTS.js";
 import "./chunks/chunk.ZHH2AHOZ.js";
 import "./chunks/chunk.LJQ7LEPV.js";
 import "./chunks/chunk.2QOQY4ZG.js";
 import "./chunks/chunk.7BEVGRQ2.js";
 import "./chunks/chunk.QAUTITK3.js";
-import "./chunks/chunk.UYD2OVFV.js";
+import "./chunks/chunk.KZMWNTUS.js";
 import "./chunks/chunk.PHSJD47V.js";
 import {
   button_default
-} from "./chunks/chunk.DXL3JN6D.js";
+} from "./chunks/chunk.FHEH5OSL.js";
 import {
   button_group_default
-} from "./chunks/chunk.BUIBP2TA.js";
-import "./chunks/chunk.H33SDUY3.js";
+} from "./chunks/chunk.VZEN3JIH.js";
+import "./chunks/chunk.SE4NF6AN.js";
 import "./chunks/chunk.A7IIJ2LL.js";
-import "./chunks/chunk.722JR5BD.js";
+import "./chunks/chunk.ON2HXIFZ.js";
 import "./chunks/chunk.WFAJR3FN.js";
 import "./chunks/chunk.TTL762VF.js";
 import "./chunks/chunk.2XZKXVMR.js";
 import "./chunks/chunk.3STW62TA.js";
 import {
   badge_default
-} from "./chunks/chunk.2NRG7KJT.js";
-import "./chunks/chunk.VCXIV7H4.js";
+} from "./chunks/chunk.TRMXLYYL.js";
+import "./chunks/chunk.SWPVARPP.js";
 import "./chunks/chunk.WQJRBFZA.js";
 import "./chunks/chunk.II4PANKR.js";
-import "./chunks/chunk.2SLHEFOH.js";
-import "./chunks/chunk.2OLQHFOR.js";
+import "./chunks/chunk.3QNVV7DW.js";
+import "./chunks/chunk.FKT4RXN7.js";
 import "./chunks/chunk.OSBC36KQ.js";
 import "./chunks/chunk.SJMMPKWP.js";
 import "./chunks/chunk.SZCGMXW5.js";
 import "./chunks/chunk.66WXVGAW.js";
-import "./chunks/chunk.4LMFTSOM.js";
+import "./chunks/chunk.WHYX7AY4.js";
 import "./chunks/chunk.PJO6TM3T.js";
 import "./chunks/chunk.2RF7KO5I.js";
 import {
   registerIconLibrary,
   unregisterIconLibrary
-} from "./chunks/chunk.7UVCYUNR.js";
+} from "./chunks/chunk.66MOXMDP.js";
 import "./chunks/chunk.6C4JXZZN.js";
-import "./chunks/chunk.N4VSEIRQ.js";
+import "./chunks/chunk.VTKIDI7N.js";
 import "./chunks/chunk.AVTU2BGE.js";
 import {
   getBasePath,
   setBasePath
 } from "./chunks/chunk.C7624ITA.js";
-import "./chunks/chunk.RK7OBPZ5.js";
-import "./chunks/chunk.V53WYKEU.js";
-import "./chunks/chunk.5TOD3QS2.js";
+import "./chunks/chunk.GEHO4WRP.js";
+import "./chunks/chunk.QY3GFWGZ.js";
+import "./chunks/chunk.MCJTXOVV.js";
 import "./chunks/chunk.K55MKNUR.js";
 import "./chunks/chunk.QNDC5KWA.js";
 export {
@@ -183,13 +199,16 @@ export {
   menu_default as SynMenu,
   menu_item_default as SynMenuItem,
   menu_label_default as SynMenuLabel,
+  nav_item_default as SynNavItem,
   optgroup_default as SynOptgroup,
   option_default as SynOption,
   popup_default as SynPopup,
+  prio_nav_default as SynPrioNav,
   radio_default as SynRadio,
   radio_button_default as SynRadioButton,
   radio_group_default as SynRadioGroup,
   select_default as SynSelect,
+  side_nav_default as SynSideNav,
   switch_default as SynSwitch,
   tag_default as SynTag,
   textarea_default as SynTextarea,

package/dist/translations/de.js

@@ -1,7 +1,7 @@
 import {
   registerTranslation
-} from "../chunks/chunk.RK7OBPZ5.js";
-import "../chunks/chunk.V53WYKEU.js";
+} from "../chunks/chunk.GEHO4WRP.js";
+import "../chunks/chunk.QY3GFWGZ.js";
 import "../chunks/chunk.QNDC5KWA.js";
 
 // src/translations/de.ts
@@ -37,8 +37,13 @@ var translation = {
   showPassword: "Passwort anzeigen",
   slideNum: (slide) => `Folie ${slide}`,
   toggleColorFormat: "Farbformat umschalten",
+  // Automatically generated custom translations.
+  // @see scripts/vendorism/translations.vendorism.js
+  closeMenu: "Menu schlie\xDFen",
   danger: "Gefahr",
   notification: "Benachrichtigung",
+  openMenu: "Menu \xF6ffnen",
+  sideNav: "Seitennavigation",
   success: "Erfolg",
   warning: "Warnung"
 };

package/dist/translations/de.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/translations/de.ts"],
-  "sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n// Removing this comment will prevent it from being managed by it.\n// ---------------------------------------------------------------------\n\n/* eslint-disable */\nimport { registerTranslation } from '../utilities/localize.js';\nimport type { Translation } from '../utilities/localize.js';\n\nconst translation: Translation = {\n  $code: 'de',\n  $name: 'Deutsch',\n  $dir: 'ltr',\n\n  carousel: 'Karussell',\n  clearEntry: 'Eingabe l\u00F6schen',\n  close: 'Schlie\u00DFen',\n  copied: 'Kopiert',\n  copy: 'Kopieren',\n  currentValue: 'Aktueller Wert',\n  error: 'Fehler',\n  goToSlide: (slide, count) => `Zu Folie ${slide} von ${count} gehen`,\n  hidePassword: 'Passwort verbergen',\n  loading: 'Wird geladen',\n  nextSlide: 'N\u00E4chste Folie',\n  numOptionsSelected: num => {\n    if (num === 0) return 'Keine Optionen ausgew\u00E4hlt';\n    if (num === 1) return '1 Option ausgew\u00E4hlt';\n    return `${num} Optionen ausgew\u00E4hlt`;\n  },\n  previousSlide: 'Vorherige Folie',\n  progress: 'Fortschritt',\n  remove: 'Entfernen',\n  resize: 'Gr\u00F6\u00DFe \u00E4ndern',\n  scrollToEnd: 'Zum Ende scrollen',\n  scrollToStart: 'Zum Anfang scrollen',\n  selectAColorFromTheScreen: 'Farbe vom Bildschirm ausw\u00E4hlen',\n  showPassword: 'Passwort anzeigen',\n  slideNum: slide => `Folie ${slide}`,\n  toggleColorFormat: 'Farbformat umschalten',\n  danger: 'Gefahr',\nnotification: 'Benachrichtigung',\nsuccess: 'Erfolg',\nwarning: 'Warnung',\n};\n\nregisterTranslation(translation);\n\nexport default translation;\n"],
-  "mappings": ";;;;;;;AASA,IAAM,cAA2B;AAAA,EAC/B,OAAO;AAAA,EACP,OAAO;AAAA,EACP,MAAM;AAAA,EAEN,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,cAAc;AAAA,EACd,OAAO;AAAA,EACP,WAAW,CAAC,OAAO,UAAU,YAAY,KAAK,QAAQ,KAAK;AAAA,EAC3D,cAAc;AAAA,EACd,SAAS;AAAA,EACT,WAAW;AAAA,EACX,oBAAoB,SAAO;AACzB,QAAI,QAAQ;AAAG,aAAO;AACtB,QAAI,QAAQ;AAAG,aAAO;AACtB,WAAO,GAAG,GAAG;AAAA,EACf;AAAA,EACA,eAAe;AAAA,EACf,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,eAAe;AAAA,EACf,2BAA2B;AAAA,EAC3B,cAAc;AAAA,EACd,UAAU,WAAS,SAAS,KAAK;AAAA,EACjC,mBAAmB;AAAA,EACnB,QAAQ;AAAA,EACV,cAAc;AAAA,EACd,SAAS;AAAA,EACT,SAAS;AACT;AAEA,oBAAoB,WAAW;AAE/B,IAAO,aAAQ;",
+  "sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n// Removing this comment will prevent it from being managed by it.\n// ---------------------------------------------------------------------\n\n/* eslint-disable */\nimport { registerTranslation } from '../utilities/localize.js';\nimport type { Translation } from '../utilities/localize.js';\n\nconst translation: Translation = {\n  $code: 'de',\n  $name: 'Deutsch',\n  $dir: 'ltr',\n\n  carousel: 'Karussell',\n  clearEntry: 'Eingabe l\u00F6schen',\n  close: 'Schlie\u00DFen',\n  copied: 'Kopiert',\n  copy: 'Kopieren',\n  currentValue: 'Aktueller Wert',\n  error: 'Fehler',\n  goToSlide: (slide, count) => `Zu Folie ${slide} von ${count} gehen`,\n  hidePassword: 'Passwort verbergen',\n  loading: 'Wird geladen',\n  nextSlide: 'N\u00E4chste Folie',\n  numOptionsSelected: num => {\n    if (num === 0) return 'Keine Optionen ausgew\u00E4hlt';\n    if (num === 1) return '1 Option ausgew\u00E4hlt';\n    return `${num} Optionen ausgew\u00E4hlt`;\n  },\n  previousSlide: 'Vorherige Folie',\n  progress: 'Fortschritt',\n  remove: 'Entfernen',\n  resize: 'Gr\u00F6\u00DFe \u00E4ndern',\n  scrollToEnd: 'Zum Ende scrollen',\n  scrollToStart: 'Zum Anfang scrollen',\n  selectAColorFromTheScreen: 'Farbe vom Bildschirm ausw\u00E4hlen',\n  showPassword: 'Passwort anzeigen',\n  slideNum: slide => `Folie ${slide}`,\n  toggleColorFormat: 'Farbformat umschalten',\n\n  // Automatically generated custom translations.\n  // @see scripts/vendorism/translations.vendorism.js\n  closeMenu: 'Menu schlie\u00DFen',\n  danger: 'Gefahr',\n  notification: 'Benachrichtigung',\n  openMenu: 'Menu \u00F6ffnen',\n  sideNav: 'Seitennavigation',\n  success: 'Erfolg',\n  warning: 'Warnung',\n};\n\nregisterTranslation(translation);\n\nexport default translation;\n"],
+  "mappings": ";;;;;;;AASA,IAAM,cAA2B;AAAA,EAC/B,OAAO;AAAA,EACP,OAAO;AAAA,EACP,MAAM;AAAA,EAEN,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,cAAc;AAAA,EACd,OAAO;AAAA,EACP,WAAW,CAAC,OAAO,UAAU,YAAY,KAAK,QAAQ,KAAK;AAAA,EAC3D,cAAc;AAAA,EACd,SAAS;AAAA,EACT,WAAW;AAAA,EACX,oBAAoB,SAAO;AACzB,QAAI,QAAQ;AAAG,aAAO;AACtB,QAAI,QAAQ;AAAG,aAAO;AACtB,WAAO,GAAG,GAAG;AAAA,EACf;AAAA,EACA,eAAe;AAAA,EACf,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,eAAe;AAAA,EACf,2BAA2B;AAAA,EAC3B,cAAc;AAAA,EACd,UAAU,WAAS,SAAS,KAAK;AAAA,EACjC,mBAAmB;AAAA;AAAA;AAAA,EAInB,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,UAAU;AAAA,EACV,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AACX;AAEA,oBAAoB,WAAW;AAE/B,IAAO,aAAQ;",
   "names": []
 }

package/dist/translations/en.js

@@ -1,6 +1,6 @@
 import {
   en_default
-} from "../chunks/chunk.V53WYKEU.js";
+} from "../chunks/chunk.QY3GFWGZ.js";
 import "../chunks/chunk.QNDC5KWA.js";
 export {
   en_default as default

package/dist/utilities/icon-library.js

@@ -2,9 +2,9 @@ import "../chunks/chunk.NKIYFJN2.js";
 import {
   registerIconLibrary,
   unregisterIconLibrary
-} from "../chunks/chunk.7UVCYUNR.js";
+} from "../chunks/chunk.66MOXMDP.js";
 import "../chunks/chunk.6C4JXZZN.js";
-import "../chunks/chunk.N4VSEIRQ.js";
+import "../chunks/chunk.VTKIDI7N.js";
 import "../chunks/chunk.C7624ITA.js";
 import "../chunks/chunk.QNDC5KWA.js";
 export {

package/dist/utilities/localize.d.ts

@@ -4,8 +4,11 @@ export declare class LocalizeController extends DefaultLocalizationController<Tr
 }
 export { registerTranslation } from '@shoelace-style/localize';
 export interface Translation extends DefaultTranslation {
+    closeMenu: string;
     danger: string;
     notification: string;
+    openMenu: string;
+    sideNav: string;
     success: string;
     warning: string;
     $code: string;

package/dist/utilities/localize.js

@@ -1,8 +1,8 @@
 import {
   LocalizeController,
   registerTranslation
-} from "../chunks/chunk.RK7OBPZ5.js";
-import "../chunks/chunk.V53WYKEU.js";
+} from "../chunks/chunk.GEHO4WRP.js";
+import "../chunks/chunk.QY3GFWGZ.js";
 import "../chunks/chunk.QNDC5KWA.js";
 export {
   LocalizeController,

package/dist/vscode.html-custom-data.json

@@ -355,11 +355,21 @@
     },
     {
       "name": "syn-header",
-      "description": "The <syn-header /> element provides a generic application header\nthat can be used to add applications name, toolbar and primary navigation.\n---\n\n\n### **Slots:**\n - _default_ - The label for the header.\n- **logo** - The logo that should be displayed. Will fall back to the SICK logo if not provided.\n- **meta-navigation** - The meta-navigation is used to add various application toolbar icons. Best used with `<syn-icon-button />` and `<syn-drop-down />`\n- **navigation** - This slot can be used to add an optional horizontal navigation\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **content** - The wrapper most content items reside\n- **logo** - The wrapper the application logo resides in\n- **label** - The element wrapping the application name\n- **meta-navigation** - The Item wrapping the optional application menu\n- **navigation** - The wrapper that is holding the optional top navigation section",
+      "description": "The <syn-header /> element provides a generic application header\nthat can be used to add applications name, toolbar and primary navigation.\n---\n\n\n### **Events:**\n - **syn-burger-menu-show** - Emitted when the burger menu button is toggled to visible\n- **syn-burger-menu-hide** - Emitted when the burger menu button is toggled to not visible\n\n### **Methods:**\n - **connectSideNavigation(sideNav: _SynSideNav_)** - Connect a `syn-side-nav` to add automatic interaction of the header with the side navigation\nlike showing the burger menu icon and open / close handling.\n\nIf no side navigation is connected, the header will use the first `syn-side-nav` element it\nfinds.\n\n### **Slots:**\n - _default_ - The label for the header.\n- **logo** - The logo that should be displayed. Will fall back to the SICK logo if not provided.\n- **meta-navigation** - The meta-navigation is used to add various application toolbar icons. Best used with `<syn-icon-button />` and `<syn-drop-down />`\n- **navigation** - This slot can be used to add an optional horizontal navigation\n- **show-burger-menu** - An icon to use in lieu of the default show burger menu icon\n- **hide-burger-menu** - An icon to use in lieu of the default hide burger menu icon\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **content** - The wrapper most content items reside\n- **logo** - The wrapper the application logo resides in\n- **label** - The element wrapping the application name\n- **meta-navigation** - The Item wrapping the optional application menu\n- **navigation** - The wrapper that is holding the optional top navigation section\n- **burger-menu-toggle-button** - The button that toggles the burger menu",
       "attributes": [
         {
           "name": "label",
-          "description": "The headers label. If you need to display HTML, use the `label` slot instead.",
+          "description": "The headers label. If you need to display HTML, use the `default` slot instead.",
+          "values": []
+        },
+        {
+          "name": "show-burger-menu",
+          "description": "Adds a button to toggle the burger menu's visibility.\nThe button is added automatically, if the component finds a syn-side-nav in non-rail mode.",
+          "values": []
+        },
+        {
+          "name": "burger-menu-visible",
+          "description": "Determines whether or not the burger menu is currently visible.",
           "values": []
         }
       ],
@@ -730,6 +740,49 @@
         }
       ]
     },
+    {
+      "name": "syn-nav-item",
+      "description": "Flexible button / link component that can be used to quickly build navigations.\nTakes one of 3 forms:\n- button (default),\n- link (overrides button if a 'href' is provided),\n- or accordion (overrides all other if 'children' slot is defined).\n---\n\n\n### **Events:**\n - **syn-show** - Emitted when the navigation item: - has children, - and is clicked while HTML details are hidden.\n- **syn-hide** - Emitted when the navigation item: - has children, - and is clicked while HTML details are shown.\n- **syn-blur** - Emitted when the button loses focus.\n- **syn-focus** - Emitted when the button gains focus.\n\n### **Methods:**\n - **blur()** - Removes focus from the button.\n- **click()** - Simulates a click on the nav-items button, link or summary.\n- **focus(options: _FocusOptions_)** - Sets focus on the nav-item\n\n### **Slots:**\n - _default_ - The navigation item's label.\n- **prefix** - A presentational prefix icon or similar element.\n- **suffix** - A presentational suffix icon or similar element.\n- **children** - Slot used to provide nested child navigation elements. If provided, details and summary elements will be used. A chevron will be shown on the right side regardless of the chevron property.\n\n### **CSS Properties:**\n - **--indentation** - Numeric value, indicating the level the item is placed at. _(default: undefined)_\n- **--indentation-stepping** - The amount of pixels each level will indent. _(default: undefined)_\n- **--display-children** - Display property of the children. Defaults to \"contents\" _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper including children.\n- **children** - The wrapper that holds the children\n- **content-wrapper** - The component's content wrapper.\n- **content** - The component's content excluding children.\n- **current-indicator** - The indicator used when current is set to true\n- **chevron** - The container that wraps the chevron.\n- **details** - The details element rendered when there are children available\n- **divider** - The components optional top divider.\n- **prefix** - The container that wraps the prefix.\n- **suffix** - The container that wraps the suffix.",
+      "attributes": [
+        {
+          "name": "href",
+          "description": "The navigation item's href target.\nIf provided, the navigation item will use an anchor tag otherwise it will use a button tag.\n\nIf the 'children' slot is provided, the navigation item will ignore the 'href' and use\naccordion behavior.",
+          "values": []
+        },
+        { "name": "current", "values": [] },
+        {
+          "name": "disabled",
+          "description": "Disables the navigation item.",
+          "values": []
+        },
+        {
+          "name": "horizontal",
+          "description": "The navigation item's orientation.",
+          "values": []
+        },
+        {
+          "name": "chevron",
+          "description": "Appends a chevron to the right side of a navigation item.\nOnly used if `horizontal` is false.",
+          "values": []
+        },
+        {
+          "name": "open",
+          "description": "Reflects HTML details element state and allows control from parent.\nOnly used if `horizontal` is false and `children` is defined.",
+          "values": []
+        },
+        {
+          "name": "divider",
+          "description": "Toggle to true to show a divider above the element.\nOnly available when horizontal is false.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://synergy.style/components/nav-item"
+        }
+      ]
+    },
     {
       "name": "syn-optgroup",
       "description": "The <syn-optgroup> element creates a grouping for <syn-option>s within a <syn-select>.\n---\n\n\n### **Slots:**\n - _default_ - The given options. Must be `<syn-option>` elements.\n- **prefix** - A presentational prefix icon or similar element.\n- **label** - The label for the optgroup\n- **suffix** - A presentational suffix icon or similar element.\n\n### **CSS Properties:**\n - **--display-divider** - Display property of the divider. Defaults to \"block\" _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label-container** - The container that wraps prefix, label and base\n- **divider** - The divider that is displayed above the content\n- **prefix** - The container that wraps the prefix.\n- **suffix** - The container that wraps the suffix.\n- **options** - The container that wraps the <syn-option> elements.",
@@ -923,6 +976,23 @@
         }
       ]
     },
+    {
+      "name": "syn-prio-nav",
+      "description": "The `<syn-prio-nav />` element provides a generic navigation bar\nthat can be used to group multiple navigation items  (usually horizontal `<syn-nav-item />`s)\ntogether. It will automatically group all items not visible in the viewport into a custom\npriority menu.\n---\n\n\n### **Slots:**\n - _default_ - The given navigation items. Must be horizontal `<syn-nav-item>`s or have a role of \"menuitem\"\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **priority-menu** - The wrapper around the priority menu\n- **priority-menu-nav-item** - The navigation item for the priority menu\n- **priority-menu-label** - The label for the priority menu\n- **priority-menu-icon** - The icon for the priority menu\n- **priority-menu-container** - The container for the shifted navigation items, if there is not enough space.",
+      "attributes": [
+        {
+          "name": "priority-menu-label",
+          "description": "The components priority menu label.\nThis will be shown after the priority menu 3 dots link",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://synergy.style/components/prio-nav"
+        }
+      ]
+    },
     {
       "name": "syn-radio",
       "description": "Radios allow the user to select a single option from a group.\n---\n\n\n### **Events:**\n - **syn-blur** - Emitted when the control loses focus.\n- **syn-focus** - Emitted when the control gains focus.\n\n### **Slots:**\n - _default_ - The radio's label.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control** - The circular container that wraps the radio's checked state.\n- **control--checked** - The radio control when the radio is checked.\n- **checked-icon** - The checked icon, an `<syn-icon>` element.\n- **label** - The container that wraps the radio's label.",
@@ -1135,6 +1205,33 @@
         }
       ]
     },
+    {
+      "name": "syn-side-nav",
+      "description": "The <syn-side-nav /> element contains secondary navigation and fits below the header.\nIt can be used to group multiple navigation items (<syn-nav-item />s) together.\n---\n\n\n### **Events:**\n - **syn-show** - Emitted when the side-nav opens.\n- **syn-after-show** - Emitted after the side-nav opens and all animations are complete.\n- **syn-hide** - Emitted when the side-nav closes.\n- **syn-after-hide** - Emitted after the side-nav closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the side-nav.\n- **hide()** - Hides the side-nav\n\n### **Slots:**\n - _default_ - The main content of the side-nav. Used for <syn-nav-item /> elements.\n- **footer** - The footer content of the side-nav. Used for <syn-nav-item /> elements. Please avoid having to many nav-items as it can massively influence the user experience.\n\n### **CSS Properties:**\n - **--side-nav-open-width** - The width of the side-nav if in open state _(default: undefined)_\n- **--side-nav-rail-width** - The width of the side-nav if in rail mode without open _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The components base wrapper\n- **drawer** - The drawer that is used under the hood for creating the side-nav\n- **content-container** - The components main content container\n- **content** - The components main content\n- **footer-container** - The components footer content container\n- **footer-divider** - The components footer divider\n- **footer** - The components footer content\n- **overlay** - The overlay that covers the screen behind the side-nav.",
+      "attributes": [
+        {
+          "name": "open",
+          "description": "Indicates whether or not the side-nav is open.\nYou can toggle this attribute to show and hide the side-nav, or you can use the `show()` and\n`hide()` methods and this attribute will reflect the side-nav's open state.\n\nDepending if the rail attribute is set or not, the behavior will differ.\n\n__Non rail__:\nWith `open` will show the side-nav.\nWithout `open`, the side-nav will be hidden.\n\n__Rail__:\nWith `open` will show the whole side-nav with an overlay for touch devices\nor without an overlay for non-touch devices.\nWithout `open`, the side-nav will only show the prefix of nav-item's.",
+          "values": []
+        },
+        {
+          "name": "rail",
+          "description": "Use the rail attribute to only show the prefix of navigation items in closed state.\nThis will open on hover on the rail navigation.\nOn touch devices the navigation opens on click and shows an overlay.\n\nNote: The Rail is only an option if all Navigation Items on the first level have an Icon.\nIf this is not the case you should use a burger navigation.",
+          "values": []
+        },
+        {
+          "name": "no-focus-trapping",
+          "description": "By default, the side-nav traps the focus if in non-rail mode and open.\nTo disable the focus trapping, set this attribute.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://synergy.style/components/side-nav"
+        }
+      ]
+    },
     {
       "name": "syn-spinner",
       "description": "Spinners are used to show the progress of an indeterminate operation.\n---\n\n\n### **CSS Properties:**\n - **--track-width** - The width of the track. _(default: undefined)_\n- **--track-color** - The color of the track. _(default: undefined)_\n- **--indicator-color** - The color of the spinner's indicator. _(default: undefined)_\n- **--speed** - The time it takes for the spinner to complete one animation cycle. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",

package/package.json

@@ -4,7 +4,7 @@
     "url": "https://www.sick.com"
   },
   "name": "@synergy-design-system/components",
-  "version": "1.14.0",
+  "version": "1.15.0",
   "description": "",
   "repository": {
     "type": "git",
@@ -48,6 +48,7 @@
     "@semantic-release/exec": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@types/mocha": "^10.0.6",
+    "@types/sinon": "^17.0.3",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
     "@web/dev-server-esbuild": "^1.0.2",
@@ -88,9 +89,9 @@
     "user-agent-data-types": "^0.4.2",
     "vendorism": "^3.0.0",
     "vue-tsc": "^1.8.27",
+    "@synergy-design-system/eslint-config-syn": "0.1.0",
     "@synergy-design-system/stylelint-config-syn": "0.1.0",
-    "@synergy-design-system/tokens": "1.10.0",
-    "@synergy-design-system/eslint-config-syn": "0.1.0"
+    "@synergy-design-system/tokens": "1.11.0"
   },
   "release": {
     "branches": [