@synergy-design-system/components 1.13.0 → 1.15.0

package/dist/chunks/{chunk.RBDVQQ3E.js → chunk.FYN26TFO.js}

@@ -4,6 +4,9 @@ import {
 import {
   radio_group_styles_default
 } from "./chunk.XIUSSERX.js";
+import {
+  SynButtonGroup
+} from "./chunk.SE4NF6AN.js";
 import {
   form_control_custom_styles_default,
   form_control_styles_default
@@ -20,13 +23,10 @@ import {
 import {
   watch
 } from "./chunk.AVTU2BGE.js";
-import {
-  SynButtonGroup
-} from "./chunk.3PBOWA5U.js";
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.LUPEZL5H.js";
+} from "./chunk.MCJTXOVV.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -356,4 +356,4 @@ __decorateClass([
 export {
   SynRadioGroup
 };
-//# sourceMappingURL=chunk.RBDVQQ3E.js.map
+//# sourceMappingURL=chunk.FYN26TFO.js.map

package/dist/chunks/{chunk.WBOGDY52.js → chunk.G7XEHN2F.js}

@@ -1,6 +1,6 @@
 import {
   SynIcon
-} from "./chunk.ZPMKYF4O.js";
+} from "./chunk.WHYX7AY4.js";
 
 // src/components/icon/icon.ts
 var icon_default = SynIcon;
@@ -9,4 +9,4 @@ SynIcon.define("syn-icon");
 export {
   icon_default
 };
-//# sourceMappingURL=chunk.WBOGDY52.js.map
+//# sourceMappingURL=chunk.G7XEHN2F.js.map

package/dist/chunks/{chunk.BAPPYU2J.js → chunk.GARWLAOJ.js}

@@ -23,7 +23,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.LUPEZL5H.js";
+} from "./chunk.MCJTXOVV.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -247,4 +247,4 @@ __decorateClass([
 export {
   SynSwitch
 };
-//# sourceMappingURL=chunk.BAPPYU2J.js.map
+//# sourceMappingURL=chunk.GARWLAOJ.js.map

package/dist/chunks/{chunk.T7D7X73E.js → chunk.GCHIBXQT.js}

@@ -1,18 +1,18 @@
 import {
   SynTag
-} from "./chunk.K74W3RP4.js";
+} from "./chunk.WV2VTAP2.js";
 import {
   select_custom_styles_default
 } from "./chunk.OWMT6OL2.js";
 import {
   select_styles_default
 } from "./chunk.QNQNR3RY.js";
+import {
+  SynPopup
+} from "./chunk.4TWUWTOI.js";
 import {
   scrollIntoView
 } from "./chunk.2QYALZBT.js";
-import {
-  SynPopup
-} from "./chunk.FYJQBDYL.js";
 import {
   animateTo,
   stopAnimations,
@@ -29,9 +29,6 @@ import {
   form_control_custom_styles_default,
   form_control_styles_default
 } from "./chunk.TTL762VF.js";
-import {
-  LocalizeController
-} from "./chunk.LAB4YJYE.js";
 import {
   FormControlController
 } from "./chunk.SZCGMXW5.js";
@@ -40,14 +37,17 @@ import {
 } from "./chunk.66WXVGAW.js";
 import {
   SynIcon
-} from "./chunk.ZPMKYF4O.js";
+} from "./chunk.WHYX7AY4.js";
 import {
   watch
 } from "./chunk.AVTU2BGE.js";
+import {
+  LocalizeController
+} from "./chunk.GEHO4WRP.js";
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.LUPEZL5H.js";
+} from "./chunk.MCJTXOVV.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -760,4 +760,4 @@ setDefaultAnimation("select.hide", {
 export {
   SynSelect
 };
-//# sourceMappingURL=chunk.T7D7X73E.js.map
+//# sourceMappingURL=chunk.GCHIBXQT.js.map

package/dist/chunks/{chunk.LAB4YJYE.js → chunk.GEHO4WRP.js}

@@ -1,6 +1,6 @@
 import {
   en_default
-} from "./chunk.A3SKDWCT.js";
+} from "./chunk.QY3GFWGZ.js";
 
 // src/utilities/localize.ts
 import { LocalizeController as DefaultLocalizationController, registerTranslation } from "@shoelace-style/localize";
@@ -13,4 +13,4 @@ export {
   LocalizeController,
   registerTranslation2 as registerTranslation
 };
-//# sourceMappingURL=chunk.LAB4YJYE.js.map
+//# sourceMappingURL=chunk.GEHO4WRP.js.map

package/dist/chunks/{chunk.LAB4YJYE.js.map → chunk.GEHO4WRP.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/utilities/localize.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 { LocalizeController as DefaultLocalizationController, registerTranslation } from '@shoelace-style/localize';\nimport en from '../translations/en.js'; // Register English as the default/fallback language\nimport type { Translation as DefaultTranslation } from '@shoelace-style/localize';\n\n// Extend the controller and apply our own translation interface for better typings\nexport class LocalizeController extends DefaultLocalizationController<Translation> {\n  // Technicallly '../translations/en.js' is supposed to work via side-effects. However, by some mystery sometimes the\n  // translations don't get bundled as expected resulting in `no translation found` errors.\n  // This is basically some extra assurance that our translations get registered prior to our localizer connecting in a component\n  // and we don't rely on implicit import ordering.\n  static {\n    registerTranslation(en);\n  }\n}\n\n// Export functions from the localize lib so we have one central place to import them from\nexport { registerTranslation } from '@shoelace-style/localize';\n\nexport interface Translation extends DefaultTranslation {\n  $code: string; // e.g. en, en-GB\n  $name: string; // e.g. English, Espa\u00F1ol\n  $dir: 'ltr' | 'rtl';\n\n  carousel: string;\n  clearEntry: string;\n  close: string;\n  copied: string;\n  copy: string;\n  currentValue: string;\n  error: string;\n  goToSlide: (slide: number, count: number) => string;\n  hidePassword: string;\n  loading: string;\n  nextSlide: string;\n  numOptionsSelected: (num: number) => string;\n  previousSlide: string;\n  progress: string;\n  remove: string;\n  resize: string;\n  scrollToEnd: string;\n  scrollToStart: string;\n  selectAColorFromTheScreen: string;\n  showPassword: string;\n  slideNum: (slide: number) => string;\n  toggleColorFormat: string;\n}\n"],
+  "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 { LocalizeController as DefaultLocalizationController, registerTranslation } from '@shoelace-style/localize';\nimport en from '../translations/en.js'; // Register English as the default/fallback language\nimport type { Translation as DefaultTranslation } from '@shoelace-style/localize';\n\n// Extend the controller and apply our own translation interface for better typings\nexport class LocalizeController extends DefaultLocalizationController<Translation> {\n  // Technicallly '../translations/en.js' is supposed to work via side-effects. However, by some mystery sometimes the\n  // translations don't get bundled as expected resulting in `no translation found` errors.\n  // This is basically some extra assurance that our translations get registered prior to our localizer connecting in a component\n  // and we don't rely on implicit import ordering.\n  static {\n    registerTranslation(en);\n  }\n}\n\n// Export functions from the localize lib so we have one central place to import them from\nexport { registerTranslation } from '@shoelace-style/localize';\n\nexport interface Translation extends DefaultTranslation {\n  closeMenu: string;\n  danger: string;\n  notification: string;\n  openMenu: string;\n  sideNav: string;\n  success: string;\n  warning: string;\n\n  $code: string; // e.g. en, en-GB\n  $name: string; // e.g. English, Espa\u00F1ol\n  $dir: 'ltr' | 'rtl';\n\n  carousel: string;\n  clearEntry: string;\n  close: string;\n  copied: string;\n  copy: string;\n  currentValue: string;\n  error: string;\n  goToSlide: (slide: number, count: number) => string;\n  hidePassword: string;\n  loading: string;\n  nextSlide: string;\n  numOptionsSelected: (num: number) => string;\n  previousSlide: string;\n  progress: string;\n  remove: string;\n  resize: string;\n  scrollToEnd: string;\n  scrollToStart: string;\n  selectAColorFromTheScreen: string;\n  showPassword: string;\n  slideNum: (slide: number) => string;\n  toggleColorFormat: string;\n}\n"],
   "mappings": ";;;;;AAMA,SAAS,sBAAsB,+BAA+B,2BAA2B;AAgBzF,SAAS,uBAAAA,4BAA2B;AAX7B,IAAM,qBAAN,cAAiC,8BAA2C;AAQnF;AAFI,oBAAoB,UAAE;",
   "names": ["registerTranslation"]
 }

package/dist/chunks/chunk.GO3CCKC3.js

@@ -0,0 +1,96 @@
+// src/components/side-nav/side-nav.styles.ts
+import { css } from "lit";
+var side_nav_styles_default = css`
+  :host {
+    --side-nav-open-width: 25rem;
+    --side-nav-rail-width: 4.5rem;
+
+    display: block;
+  }
+
+  /* Side nav should have a width, so it behave correct in an e.g. display flex context */
+  .side-nav:not(.side-nav--rail).side-nav--open {
+    width: var(--side-nav-open-width);
+  }
+  
+  /**
+   * Side nav should have a width, so it behave correct in an e.g. display flex context.
+   * In rail mode the width is always the small rail width, because there should be no shrinking possible of the main content area.
+   */
+  .side-nav.side-nav--rail {
+    width: var(--side-nav-rail-width);
+  }
+
+
+
+  /**
+   * Syn-drawer styling
+   */
+  .side-nav__drawer {
+    --size: var(--side-nav-open-width);
+  }
+  
+  .side-nav__drawer::part(base){
+    position: absolute;
+  }
+
+  .side-nav__drawer::part(body), .side-nav__drawer::part(footer) {
+    padding: 0;
+  }
+
+  /** 
+   * Overlay 
+   */
+  .side-nav__drawer::part(overlay){
+    position: absolute;
+  }
+
+  /**
+   * Fixed mode
+   */
+  .side-nav--fix .side-nav__drawer::part(overlay){
+    display: block;
+  }
+
+  /**
+   * Rail mode
+   */
+  :not(.side-nav--open).side-nav--rail .side-nav__drawer {
+    --size: var(--side-nav-rail-width);
+  }
+
+  .side-nav--open.side-nav--rail.side-nav--touch .side-nav__drawer::part(overlay){
+    display: block;
+  }
+
+  /**
+   * Avoid multiline flickering on open and close animation
+   */
+  .side-nav--rail.side-nav--animation {
+    white-space: nowrap;
+  }
+
+  /**
+   * Hide the scrollbars in closed rail mode
+   */ 
+  :not(.side-nav--open).side-nav--rail .side-nav__drawer::part(body){
+    overflow: hidden;
+  }
+
+  /**
+   * Footer divider
+   */
+  .side-nav__footer-divider{
+    --spacing: 0;
+    --color: var(--syn-color-neutral-300);
+  }
+
+  :not(.side-nav--open).side-nav--rail ::slotted(syn-nav-item){
+    --display-children: none;
+  }
+`;
+
+export {
+  side_nav_styles_default
+};
+//# sourceMappingURL=chunk.GO3CCKC3.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/side-nav/side-nav.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  :host {\n    --side-nav-open-width: 25rem;\n    --side-nav-rail-width: 4.5rem;\n\n    display: block;\n  }\n\n  /* Side nav should have a width, so it behave correct in an e.g. display flex context */\n  .side-nav:not(.side-nav--rail).side-nav--open {\n    width: var(--side-nav-open-width);\n  }\n  \n  /**\n   * Side nav should have a width, so it behave correct in an e.g. display flex context.\n   * In rail mode the width is always the small rail width, because there should be no shrinking possible of the main content area.\n   */\n  .side-nav.side-nav--rail {\n    width: var(--side-nav-rail-width);\n  }\n\n\n\n  /**\n   * Syn-drawer styling\n   */\n  .side-nav__drawer {\n    --size: var(--side-nav-open-width);\n  }\n  \n  .side-nav__drawer::part(base){\n    position: absolute;\n  }\n\n  .side-nav__drawer::part(body), .side-nav__drawer::part(footer) {\n    padding: 0;\n  }\n\n  /** \n   * Overlay \n   */\n  .side-nav__drawer::part(overlay){\n    position: absolute;\n  }\n\n  /**\n   * Fixed mode\n   */\n  .side-nav--fix .side-nav__drawer::part(overlay){\n    display: block;\n  }\n\n  /**\n   * Rail mode\n   */\n  :not(.side-nav--open).side-nav--rail .side-nav__drawer {\n    --size: var(--side-nav-rail-width);\n  }\n\n  .side-nav--open.side-nav--rail.side-nav--touch .side-nav__drawer::part(overlay){\n    display: block;\n  }\n\n  /**\n   * Avoid multiline flickering on open and close animation\n   */\n  .side-nav--rail.side-nav--animation {\n    white-space: nowrap;\n  }\n\n  /**\n   * Hide the scrollbars in closed rail mode\n   */ \n  :not(.side-nav--open).side-nav--rail .side-nav__drawer::part(body){\n    overflow: hidden;\n  }\n\n  /**\n   * Footer divider\n   */\n  .side-nav__footer-divider{\n    --spacing: 0;\n    --color: var(--syn-color-neutral-300);\n  }\n\n  :not(.side-nav--open).side-nav--rail ::slotted(syn-nav-item){\n    --display-children: 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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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.WWBODWZN.js → chunk.H46CGP6A.js}

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

package/dist/chunks/{chunk.HJNNSNKN.js → chunk.H7APDHTS.js}

@@ -6,11 +6,11 @@ import {
 } from "./chunk.LJQ7LEPV.js";
 import {
   SynIcon
-} from "./chunk.ZPMKYF4O.js";
+} from "./chunk.WHYX7AY4.js";
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.LUPEZL5H.js";
+} from "./chunk.MCJTXOVV.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -138,4 +138,4 @@ __decorateClass([
 export {
   SynIconButton
 };
-//# sourceMappingURL=chunk.HJNNSNKN.js.map
+//# sourceMappingURL=chunk.H7APDHTS.js.map

package/dist/chunks/chunk.II4PANKR.js

@@ -0,0 +1,56 @@
+// src/components/badge/badge.styles.ts
+import { css } from "lit";
+var badge_styles_default = css`
+	/* stylelint-disable */
+  :host {
+    display: inline-flex;
+  }
+
+  .badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: max(12px, 0.75em);
+    font-weight: var(--syn-font-weight-semibold);
+    letter-spacing: var(--syn-letter-spacing-normal);
+    line-height: 1;
+    border-radius: var(--syn-border-radius-small);
+    border: solid 1px var(--syn-color-neutral-0);
+    white-space: nowrap;
+    padding: 0.35em 0.6em;
+    user-select: none;
+    -webkit-user-select: none;
+    cursor: inherit;
+  }
+
+  /* Variant modifiers */
+  .badge--primary {
+    background-color: var(--syn-color-primary-600);
+    color: var(--syn-color-neutral-0);
+  }
+
+  .badge--success {
+    background-color: var(--syn-color-success-600);
+    color: var(--syn-color-neutral-0);
+  }
+
+  .badge--neutral {
+    background-color: var(--syn-color-neutral-600);
+    color: var(--syn-color-neutral-0);
+  }
+
+  .badge--warning {
+    background-color: var(--syn-color-warning-600);
+    color: var(--syn-color-neutral-0);
+  }
+
+  .badge--danger {
+    background-color: var(--syn-color-danger-600);
+    color: var(--syn-color-neutral-0);
+  }
+`;
+
+export {
+  badge_styles_default
+};
+//# sourceMappingURL=chunk.II4PANKR.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/badge/badge.styles.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 { css } from 'lit';\n\nexport default css`\n\t/* stylelint-disable */\n  :host {\n    display: inline-flex;\n  }\n\n  .badge {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: max(12px, 0.75em);\n    font-weight: var(--syn-font-weight-semibold);\n    letter-spacing: var(--syn-letter-spacing-normal);\n    line-height: 1;\n    border-radius: var(--syn-border-radius-small);\n    border: solid 1px var(--syn-color-neutral-0);\n    white-space: nowrap;\n    padding: 0.35em 0.6em;\n    user-select: none;\n    -webkit-user-select: none;\n    cursor: inherit;\n  }\n\n  /* Variant modifiers */\n  .badge--primary {\n    background-color: var(--syn-color-primary-600);\n    color: var(--syn-color-neutral-0);\n  }\n\n  .badge--success {\n    background-color: var(--syn-color-success-600);\n    color: var(--syn-color-neutral-0);\n  }\n\n  .badge--neutral {\n    background-color: var(--syn-color-neutral-600);\n    color: var(--syn-color-neutral-0);\n  }\n\n  .badge--warning {\n    background-color: var(--syn-color-warning-600);\n    color: var(--syn-color-neutral-0);\n  }\n\n  .badge--danger {\n    background-color: var(--syn-color-danger-600);\n    color: var(--syn-color-neutral-0);\n  }\n`;\n"],
+  "mappings": ";AAMA,SAAS,WAAW;AAEpB,IAAO,uBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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.IJCD3LMC.js

@@ -0,0 +1,12 @@
+import {
+  SynPrioNav
+} from "./chunk.IYGOMLU7.js";
+
+// src/components/prio-nav/prio-nav.ts
+var prio_nav_default = SynPrioNav;
+SynPrioNav.define("syn-prio-nav");
+
+export {
+  prio_nav_default
+};
+//# sourceMappingURL=chunk.IJCD3LMC.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/prio-nav/prio-nav.ts"],
+  "sourcesContent": ["import SynPrioNav from './prio-nav.component.js';\n\nexport * from './prio-nav.component.js';\nexport default SynPrioNav;\n\nSynPrioNav.define('syn-prio-nav');\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'syn-prio-nav': SynPrioNav;\n  }\n}\n"],
+  "mappings": ";;;;;AAGA,IAAO,mBAAQ;AAEf,WAAW,OAAO,cAAc;",
+  "names": []
+}

package/dist/chunks/{chunk.EMIN5Z4Y.js → chunk.IUHZVWPW.js}

@@ -1,6 +1,6 @@
 import {
   SynPopup
-} from "./chunk.FYJQBDYL.js";
+} from "./chunk.4TWUWTOI.js";
 
 // src/components/popup/popup.ts
 var popup_default = SynPopup;
@@ -9,4 +9,4 @@ SynPopup.define("syn-popup");
 export {
   popup_default
 };
-//# sourceMappingURL=chunk.EMIN5Z4Y.js.map
+//# sourceMappingURL=chunk.IUHZVWPW.js.map

package/dist/chunks/chunk.IYGOMLU7.js

@@ -0,0 +1,208 @@
+import {
+  prio_nav_styles_default
+} from "./chunk.74N5WLM5.js";
+import {
+  filterOnlyNavItems,
+  getAssignedElementsForSlot
+} from "./chunk.XNP4OTUB.js";
+import {
+  SynNavItem
+} from "./chunk.MJYZDU37.js";
+import {
+  SynMenu
+} from "./chunk.XSVH753L.js";
+import {
+  SynDropdown
+} from "./chunk.NBHBC5FQ.js";
+import {
+  SynIcon
+} from "./chunk.WHYX7AY4.js";
+import {
+  SynergyElement,
+  component_styles_default
+} from "./chunk.MCJTXOVV.js";
+import {
+  __decorateClass
+} from "./chunk.QNDC5KWA.js";
+
+// src/components/prio-nav/prio-nav.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html } from "lit/static-html.js";
+import { property, query, state } from "lit/decorators.js";
+var SynPrioNav = class extends SynergyElement {
+  constructor() {
+    super(...arguments);
+    this.priorityMenuLabel = "Menu";
+    this.itemPositionsCached = false;
+    this.amountOfNavItems = 0;
+    this.amountOfVisibleItems = 0;
+    this.hasItemsInDropdown = false;
+  }
+  /**
+   * Get a list of all slotted `<syn-nav-item />` elements
+   * that are either in the main slot or the priority menu slot
+   */
+  getSlottedNavItems() {
+    const navItemsInDefaultSlot = filterOnlyNavItems(getAssignedElementsForSlot(this.defaultSlot));
+    const navItemsInMenuSlot = filterOnlyNavItems(getAssignedElementsForSlot(this.menuSlot));
+    return navItemsInDefaultSlot.concat(navItemsInMenuSlot);
+  }
+  /**
+   * Cache the items right offset position to make faster checks placement into priority menu
+   * @param items The items to cache the position for
+   */
+  cacheItemPositions(items) {
+    items.forEach((item) => {
+      item.removeAttribute("slot");
+      const { right } = item.getBoundingClientRect();
+      item.dataset.right = right.toString();
+    });
+    this.itemPositionsCached = true;
+  }
+  /**
+   * Determines which items should be shown or hidden, depending on the current width
+   */
+  handlePriorityMenu() {
+    const navItems = this.getSlottedNavItems();
+    if (!this.itemPositionsCached) {
+      this.cacheItemPositions(navItems);
+    }
+    const { width } = this.horizontalNav.getBoundingClientRect();
+    const { clientWidth } = this.priorityMenu;
+    const finalWidth = width - clientWidth;
+    let firstHiddenItemRightPos;
+    let visibleItems = 0;
+    navItems.forEach((item) => {
+      const isHidden = firstHiddenItemRightPos || parseFloat(item.dataset.right) >= finalWidth;
+      if (isHidden) {
+        item.removeAttribute("horizontal");
+        item.setAttribute("slot", "menu");
+        item.setAttribute("role", "menuitem");
+        if (!firstHiddenItemRightPos) {
+          firstHiddenItemRightPos = parseFloat(item.dataset.right);
+        }
+      } else {
+        visibleItems += 1;
+        item.setAttribute("horizontal", "true");
+        item.removeAttribute("slot");
+        item.removeAttribute("tabindex");
+        if (item.dataset.originalRole) {
+          item.setAttribute("role", item.dataset.originalRole);
+        } else {
+          item.removeAttribute("role");
+        }
+      }
+    });
+    this.hasItemsInDropdown = visibleItems !== navItems.length;
+    this.amountOfVisibleItems = visibleItems;
+  }
+  renderPriorityMenu() {
+    return html`
+      <syn-dropdown
+        class=${classMap({
+      "priority-menu": true,
+      "priority-menu--has-visible-items": this.amountOfVisibleItems !== 0,
+      "priority-menu--hidden": !this.hasItemsInDropdown
+    })}
+        part="priority-menu"
+        placement="bottom-end"
+      >
+        <syn-nav-item class="priority-menu__nav-item" slot="trigger" horizontal part="priority-menu-nav-item">
+          <syn-icon 
+            class="priority-menu__icon"
+            label="More"
+            library="system"
+            name="more"
+            part="priority-menu-icon"
+            slot="prefix"
+          >
+          </syn-icon>
+          <span
+            class=${classMap({
+      "priority-menu__label": true,
+      "priority-menu__label--visible": this.amountOfVisibleItems === 0
+    })}
+            part="priority-menu-label"
+          >
+            ${this.priorityMenuLabel}
+          </span>
+        </syn-nav-item>
+
+        <syn-menu part="priority-menu-container">
+          <slot name="menu"></slot>
+        </syn-menu>
+
+      </syn-dropdown>
+    `;
+  }
+  slotChange() {
+    const slottedItems = this.getSlottedNavItems();
+    if (slottedItems.length !== this.amountOfNavItems) {
+      this.cacheItemPositions(slottedItems);
+      this.handlePriorityMenu();
+      this.amountOfNavItems = slottedItems.length;
+    }
+  }
+  firstUpdated() {
+    this.getSlottedNavItems().forEach((item) => {
+      var _a;
+      item.dataset.originalRole = (_a = item.getAttribute("role")) != null ? _a : "";
+    });
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.resizeObserver = new ResizeObserver(() => this.handlePriorityMenu());
+    this.resizeObserver.observe(this);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.resizeObserver.unobserve(this);
+  }
+  render() {
+    return html`
+      <nav class="horizontal-nav" part="base">
+        <slot @slotchange=${this.slotChange}></slot>
+        ${this.renderPriorityMenu()}
+      </nav>
+    `;
+  }
+};
+SynPrioNav.styles = [component_styles_default, prio_nav_styles_default];
+SynPrioNav.dependencies = {
+  "syn-dropdown": SynDropdown,
+  "syn-icon": SynIcon,
+  "syn-menu": SynMenu,
+  "syn-nav-item": SynNavItem
+};
+__decorateClass([
+  query("slot:not([name])")
+], SynPrioNav.prototype, "defaultSlot", 2);
+__decorateClass([
+  query("slot[name=menu]")
+], SynPrioNav.prototype, "menuSlot", 2);
+__decorateClass([
+  query(".horizontal-nav")
+], SynPrioNav.prototype, "horizontalNav", 2);
+__decorateClass([
+  query(".priority-menu")
+], SynPrioNav.prototype, "priorityMenu", 2);
+__decorateClass([
+  property({ attribute: "priority-menu-label" })
+], SynPrioNav.prototype, "priorityMenuLabel", 2);
+__decorateClass([
+  state()
+], SynPrioNav.prototype, "itemPositionsCached", 2);
+__decorateClass([
+  state()
+], SynPrioNav.prototype, "amountOfNavItems", 2);
+__decorateClass([
+  state()
+], SynPrioNav.prototype, "amountOfVisibleItems", 2);
+__decorateClass([
+  state()
+], SynPrioNav.prototype, "hasItemsInDropdown", 2);
+
+export {
+  SynPrioNav
+};
+//# sourceMappingURL=chunk.IYGOMLU7.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/prio-nav/prio-nav.component.ts"],
+  "sourcesContent": ["/* eslint-disable no-param-reassign */\nimport type { CSSResultGroup } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { html } from 'lit/static-html.js';\nimport { property, query, state } from 'lit/decorators.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport styles from './prio-nav.styles.js';\nimport SynDropdown from '../dropdown/dropdown.component.js';\nimport SynIcon from '../icon/icon.component.js';\nimport SynMenu from '../menu/menu.component.js';\nimport SynNavItem from '../nav-item/nav-item.component.js';\nimport {\n  filterOnlyNavItems,\n  getAssignedElementsForSlot,\n} from './utils.js';\n\n/**\n * @summary The `<syn-prio-nav />` element provides a generic navigation bar\n * that can be used to group multiple navigation items  (usually horizontal `<syn-nav-item />`s)\n * together. It will automatically group all items not visible in the viewport into a custom\n * priority menu.\n *\n * @example\n * <syn-prio-nav>\n *  <syn-nav-item current horizontal>Item 1</syn-nav-item>\n *  <button role=\"menuitem\">Item 2 (custom)</button>\n *  <syn-nav-item horizontal>Item 3</syn-nav-item>\n * </syn-prio-nav>\n *\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-prio-nav--docs\n * @status stable\n * @since 1.14.0\n *\n * @dependency syn-dropdown\n * @dependency syn-icon\n * @dependency syn-menu\n * @dependency syn-nav-item\n *\n * @slot - The given navigation items. Must be horizontal `<syn-nav-item>`s\n *    or have a role of \"menuitem\"\n *\n * @csspart base - The component's base wrapper.\n * @csspart priority-menu - The wrapper around the priority menu\n * @csspart priority-menu-nav-item - The navigation item for the priority menu\n * @csspart priority-menu-label - The label for the priority menu\n * @csspart priority-menu-icon - The icon for the priority menu\n * @csspart priority-menu-container - The container for the shifted navigation items,\n *    if there is not enough space.\n *\n */\nexport default class SynPrioNav extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles];\n\n  static dependencies = {\n    'syn-dropdown': SynDropdown,\n    'syn-icon': SynIcon,\n    'syn-menu': SynMenu,\n    'syn-nav-item': SynNavItem,\n  };\n\n  /**\n   * Internal resize observer\n   */\n  private resizeObserver: ResizeObserver;\n\n  /**\n   * Reference to the rendered children slot\n   */\n  @query('slot:not([name])') private defaultSlot: HTMLSlotElement;\n\n  /**\n   * Reference to the slot where priority menu items are placed\n   */\n  @query('slot[name=menu]') private menuSlot: HTMLSlotElement;\n\n  /**\n   * The wrapper that holds the horizontal navigation items\n   */\n  @query('.horizontal-nav') private horizontalNav: HTMLDivElement;\n\n  /**\n   * The priority menu dropdown\n   */\n  @query('.priority-menu') private priorityMenu: SynDropdown;\n\n  /**\n   * The components priority menu label.\n   * This will be shown after the priority menu 3 dots link\n   */\n  @property({ attribute: 'priority-menu-label' }) priorityMenuLabel = 'Menu';\n\n  /**\n   * Internal state reflecting if the item positions have been cached\n   */\n  @state() private itemPositionsCached = false;\n\n  /**\n   * The amount of nav items that are currently slotted\n   */\n  @state() private amountOfNavItems = 0;\n\n  /**\n   * The amount of items that are currently visible\n   */\n  @state() private amountOfVisibleItems = 0;\n\n  /**\n   * Internal state reflecting if there are items in the priority menu\n   */\n  @state() private hasItemsInDropdown = false;\n\n  /**\n   * Get a list of all slotted `<syn-nav-item />` elements\n   * that are either in the main slot or the priority menu slot\n   */\n  private getSlottedNavItems() {\n    const navItemsInDefaultSlot = filterOnlyNavItems(getAssignedElementsForSlot(this.defaultSlot));\n    const navItemsInMenuSlot = filterOnlyNavItems(getAssignedElementsForSlot(this.menuSlot));\n    return navItemsInDefaultSlot.concat(navItemsInMenuSlot);\n  }\n\n  /**\n   * Cache the items right offset position to make faster checks placement into priority menu\n   * @param items The items to cache the position for\n   */\n  private cacheItemPositions(items: SynNavItem[]) {\n    items.forEach(item => {\n      // We have to measure while the items are in the primary slot,\n      // else we will just get the placement in the priority menu\n      item.removeAttribute('slot');\n      const { right } = item.getBoundingClientRect();\n      item.dataset.right = right.toString();\n    });\n\n    this.itemPositionsCached = true;\n  }\n\n  /**\n   * Determines which items should be shown or hidden, depending on the current width\n   */\n  private handlePriorityMenu() {\n    const navItems = this.getSlottedNavItems();\n\n    if (!this.itemPositionsCached) {\n      this.cacheItemPositions(navItems);\n    }\n\n    // Get the widths of the horizontal nav and the priority menu\n    // We subtract the width of the priority menu to get the final width\n    const { width } = this.horizontalNav.getBoundingClientRect();\n    const { clientWidth } = this.priorityMenu;\n    const finalWidth = width - clientWidth;\n\n    // Cache the first item\n    let firstHiddenItemRightPos: number | undefined;\n\n    let visibleItems = 0;\n\n    // Save the position of all the elements in a cache\n    navItems.forEach(item => {\n      // Make sure to use the cache obtained in createGhostItems\n      const isHidden = firstHiddenItemRightPos || parseFloat(item.dataset.right!) >= finalWidth;\n\n      if (isHidden) {\n        item.removeAttribute('horizontal');\n        item.setAttribute('slot', 'menu');\n\n        // Makes sure the item is focusable in a syn-dropdown\n        item.setAttribute('role', 'menuitem');\n\n        // Get the position of the first item\n        // Will get used to position the priority menu\n        if (!firstHiddenItemRightPos) {\n          firstHiddenItemRightPos = parseFloat(item.dataset.right!);\n        }\n      } else {\n        visibleItems += 1;\n        item.setAttribute('horizontal', 'true');\n        item.removeAttribute('slot');\n        item.removeAttribute('tabindex');\n\n        // Reset the role to the original value\n        if (item.dataset.originalRole) {\n          item.setAttribute('role', item.dataset.originalRole);\n        } else {\n          item.removeAttribute('role');\n        }\n      }\n    });\n\n    // Tell the render call that we have items in the priority menu\n    // and toggle the visibility of the priority menu label\n    this.hasItemsInDropdown = visibleItems !== navItems.length;\n    this.amountOfVisibleItems = visibleItems;\n  }\n\n  private renderPriorityMenu() {\n    return html`\n      <syn-dropdown\n        class=${classMap({\n          'priority-menu': true,\n          'priority-menu--has-visible-items': this.amountOfVisibleItems !== 0,\n          'priority-menu--hidden': !this.hasItemsInDropdown,\n        })}\n        part=\"priority-menu\"\n        placement=\"bottom-end\"\n      >\n        <syn-nav-item class=\"priority-menu__nav-item\" slot=\"trigger\" horizontal part=\"priority-menu-nav-item\">\n          <syn-icon \n            class=\"priority-menu__icon\"\n            label=\"More\"\n            library=\"system\"\n            name=\"more\"\n            part=\"priority-menu-icon\"\n            slot=\"prefix\"\n          >\n          </syn-icon>\n          <span\n            class=${classMap({\n              'priority-menu__label': true,\n              'priority-menu__label--visible': this.amountOfVisibleItems === 0,\n            })}\n            part=\"priority-menu-label\"\n          >\n            ${this.priorityMenuLabel}\n          </span>\n        </syn-nav-item>\n\n        <syn-menu part=\"priority-menu-container\">\n          <slot name=\"menu\"></slot>\n        </syn-menu>\n\n      </syn-dropdown>\n    `;\n  }\n\n  private slotChange() {\n    const slottedItems = this.getSlottedNavItems();\n\n    // Make sure to trigger a recalculation of the item positions if we a new list of slotted items\n    if (slottedItems.length !== this.amountOfNavItems) {\n      this.cacheItemPositions(slottedItems);\n      this.handlePriorityMenu();\n      this.amountOfNavItems = slottedItems.length;\n    }\n  }\n\n  protected firstUpdated() {\n    // Cache the original role of the items so we can reset it if needed.\n    this.getSlottedNavItems().forEach(item => {\n      item.dataset.originalRole = item.getAttribute('role') ?? '';\n    });\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.resizeObserver = new ResizeObserver(() => this.handlePriorityMenu());\n    this.resizeObserver.observe(this);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.resizeObserver.unobserve(this);\n  }\n\n  render() {\n    /* eslint-disable @typescript-eslint/unbound-method */\n    return html`\n      <nav class=\"horizontal-nav\" part=\"base\">\n        <slot @slotchange=${this.slotChange}></slot>\n        ${this.renderPriorityMenu()}\n      </nav>\n    `;\n    /* eslint-enable @typescript-eslint/unbound-method */\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/chunks/{chunk.OQ7JU642.js → chunk.JCFKRHGM.js}

@@ -1,6 +1,6 @@
 import {
   SynRadioGroup
-} from "./chunk.RBDVQQ3E.js";
+} from "./chunk.FYN26TFO.js";
 
 // src/components/radio-group/radio-group.ts
 var radio_group_default = SynRadioGroup;
@@ -9,4 +9,4 @@ SynRadioGroup.define("syn-radio-group");
 export {
   radio_group_default
 };
-//# sourceMappingURL=chunk.OQ7JU642.js.map
+//# sourceMappingURL=chunk.JCFKRHGM.js.map