@synergy-design-system/react 1.14.0 → 1.16.0

package/dist/chunks/chunk.6BJ6XSFN.js

@@ -0,0 +1,23 @@
+// ../react/src/components/side-nav.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import Component from "@synergy-design-system/components/components/side-nav/side-nav.component.js";
+var tagName = "syn-side-nav";
+Component.define("syn-side-nav");
+var SynSideNav = createComponent({
+  displayName: "SynSideNav",
+  elementClass: Component,
+  events: {
+    onSynShow: "syn-show",
+    onSynAfterShow: "syn-after-show",
+    onSynHide: "syn-hide",
+    onSynAfterHide: "syn-after-hide"
+  },
+  react: React,
+  tagName
+});
+
+export {
+  SynSideNav
+};
+//# sourceMappingURL=chunk.6BJ6XSFN.js.map

package/dist/chunks/chunk.6BJ6XSFN.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/side-nav.ts"],
+  "sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED @synergy-design-system/react wrappers for @synergy-design-system/components\n// Please do not edit this file directly!\n// It will get recreated when running pnpm build.\n// ---------------------------------------------------------------------\nimport * as React from 'react';\nimport { createComponent } from '@lit/react';\nimport Component from '@synergy-design-system/components/components/side-nav/side-nav.component.js';\n\nimport { type EventName } from '@lit/react';\nimport type {\n  SynAfterHideEvent, SynAfterShowEvent, SynHideEvent, SynShowEvent,\n} from '@synergy-design-system/components';\n\nconst tagName = 'syn-side-nav';\nComponent.define('syn-side-nav');\n\n/**\n * @summary The <syn-side-nav /> element contains secondary navigation and fits below the header.\n * It can be used to group multiple navigation items (<syn-nav-item />s) together.\n *\n * @example\n * <syn-side-nav open>\n *  <syn-nav-item >Item 1</syn-nav-item>\n *  <syn-nav-item divider>Item 2</syn-nav-item>\n * </syn-side-nav>\n *\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-side-nav--docs\n * @status stable\n * @since 1.14.0\n *\n * @dependency syn-divider\n * @dependency syn-drawer\n *\n * @slot - The main content of the side-nav. Used for <syn-nav-item /> elements.\n * @slot footer - The footer content of the side-nav. Used for <syn-nav-item /> elements.\n *    Please avoid having to many nav-items as it can massively influence the user experience.\n *\n * @event syn-show - Emitted when the side-nav opens.\n * @event syn-after-show - Emitted after the side-nav opens and all animations are complete.\n * @event syn-hide - Emitted when the side-nav closes.\n * @event syn-after-hide - Emitted after the side-nav closes and all animations are complete.\n *\n * @csspart base - The components base wrapper\n * @csspart drawer - The drawer that is used under the hood for creating the side-nav\n * @csspart content-container - The components main content container\n * @csspart content - The components main content\n * @csspart footer-container - The components footer content container\n * @csspart footer-divider - The components footer divider\n * @csspart footer - The components footer content\n * @csspart overlay - The overlay that covers the screen behind the side-nav.\n *\n * @cssproperty  --side-nav-open-width - The width of the side-nav if in open state\n * @cssproperty  --side-nav-rail-width - The width of the side-nav if in rail mode without open\n *\n * @animation sideNav.showNonRail - The animation to use when showing the side-nav in non-rail mode.\n * @animation sideNav.showRail - The animation to use when showing the side-nav in rail mode.\n * @animation sideNav.hideNonRail - The animation to use when hiding the side-nav in non-rail mode.\n * @animation sideNav.hideRail - The animation to use when hiding the side-nav in rail mode.\n * @animation sideNav.overlay.show - The animation to use when showing the side-nav's overlay.\n * @animation sideNav.overlay.hide - The animation to use when hiding the side-nav's overlay.\n */\nexport const SynSideNav = createComponent({\n  displayName: 'SynSideNav',\n  elementClass: Component,\n  events: {\n    onSynShow: 'syn-show' as EventName<SynShowEvent>,\n    onSynAfterShow: 'syn-after-show' as EventName<SynAfterShowEvent>,\n    onSynHide: 'syn-hide' as EventName<SynHideEvent>,\n    onSynAfterHide: 'syn-after-hide' as EventName<SynAfterHideEvent>,\n  },\n  react: React,\n  tagName,\n});\n\nexport type { SynShowEvent } from '@synergy-design-system/components';\nexport type { SynAfterShowEvent } from '@synergy-design-system/components';\nexport type { SynHideEvent } from '@synergy-design-system/components';\nexport type { SynAfterHideEvent } from '@synergy-design-system/components';\n"],
+  "mappings": ";AAKA,YAAY,WAAW;AACvB,SAAS,uBAAuB;AAChC,OAAO,eAAe;AAOtB,IAAM,UAAU;AAChB,UAAU,OAAO,cAAc;AA+CxB,IAAM,aAAa,gBAAgB;AAAA,EACxC,aAAa;AAAA,EACb,cAAc;AAAA,EACd,QAAQ;AAAA,IACN,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,WAAW;AAAA,IACX,gBAAgB;AAAA,EAClB;AAAA,EACA,OAAO;AAAA,EACP;AACF,CAAC;",
+  "names": []
+}

package/dist/chunks/chunk.7732PJEC.js

@@ -0,0 +1,18 @@
+// ../react/src/components/prio-nav.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import Component from "@synergy-design-system/components/components/prio-nav/prio-nav.component.js";
+var tagName = "syn-prio-nav";
+Component.define("syn-prio-nav");
+var SynPrioNav = createComponent({
+  displayName: "SynPrioNav",
+  elementClass: Component,
+  events: {},
+  react: React,
+  tagName
+});
+
+export {
+  SynPrioNav
+};
+//# sourceMappingURL=chunk.7732PJEC.js.map

package/dist/chunks/chunk.7732PJEC.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/prio-nav.ts"],
+  "sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED @synergy-design-system/react wrappers for @synergy-design-system/components\n// Please do not edit this file directly!\n// It will get recreated when running pnpm build.\n// ---------------------------------------------------------------------\nimport * as React from 'react';\nimport { createComponent } from '@lit/react';\nimport Component from '@synergy-design-system/components/components/prio-nav/prio-nav.component.js';\n\nconst tagName = 'syn-prio-nav';\nComponent.define('syn-prio-nav');\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 const SynPrioNav = createComponent({\n  displayName: 'SynPrioNav',\n  elementClass: Component,\n  events: {\n\n  },\n  react: React,\n  tagName,\n});\n"],
+  "mappings": ";AAKA,YAAY,WAAW;AACvB,SAAS,uBAAuB;AAChC,OAAO,eAAe;AAEtB,IAAM,UAAU;AAChB,UAAU,OAAO,cAAc;AAoCxB,IAAM,aAAa,gBAAgB;AAAA,EACxC,aAAa;AAAA,EACb,cAAc;AAAA,EACd,QAAQ,CAER;AAAA,EACA,OAAO;AAAA,EACP;AACF,CAAC;",
+  "names": []
+}

package/dist/chunks/{chunk.ODUBD6GC.js → chunk.BD6VWV24.js}

@@ -7,7 +7,10 @@ Component.define("syn-header");
 var SynHeader = createComponent({
   displayName: "SynHeader",
   elementClass: Component,
-  events: {},
+  events: {
+    onSynBurgerMenuShow: "syn-burger-menu-show",
+    onSynBurgerMenuHide: "syn-burger-menu-hide"
+  },
   react: React,
   tagName
 });
@@ -15,4 +18,4 @@ var SynHeader = createComponent({
 export {
   SynHeader
 };
-//# sourceMappingURL=chunk.ODUBD6GC.js.map
+//# sourceMappingURL=chunk.BD6VWV24.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/header.ts"],
+  "sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED @synergy-design-system/react wrappers for @synergy-design-system/components\n// Please do not edit this file directly!\n// It will get recreated when running pnpm build.\n// ---------------------------------------------------------------------\nimport * as React from 'react';\nimport { createComponent } from '@lit/react';\nimport Component from '@synergy-design-system/components/components/header/header.component.js';\n\nimport { type EventName } from '@lit/react';\nimport type { SynBurgerMenuHideEvent, SynBurgerMenuShowEvent } from '@synergy-design-system/components';\n\nconst tagName = 'syn-header';\nComponent.define('syn-header');\n\n/**\n * @summary The <syn-header /> element provides a generic application header\n * that can be used to add applications name, toolbar and primary navigation.\n *\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-header--docs\n * @status stable\n * @since 1.10.0\n *\n * @slot - The label for the header.\n * @slot logo - The logo that should be displayed. Will fall back to the SICK logo if not provided.\n * @slot meta-navigation - The meta-navigation is used to add various application toolbar icons.\n *                     Best used with `<syn-icon-button />` and `<syn-drop-down />`\n * @slot navigation - This slot can be used to add an optional horizontal navigation\n * @slot show-burger-menu - An icon to use in lieu of the default show burger menu icon\n * @slot hide-burger-menu - An icon to use in lieu of the default hide burger menu icon\n *\n * @event syn-burger-menu-show - Emitted when the burger menu button is toggled to visible\n * @event syn-burger-menu-hide - Emitted when the burger menu button is toggled to not visible\n *\n * @csspart base - The component's base wrapper.\n * @csspart content - The wrapper most content items reside\n * @csspart logo - The wrapper the application logo resides in\n * @csspart label - The element wrapping the application name\n * @csspart meta-navigation - The Item wrapping the optional application menu\n * @csspart navigation - The wrapper that is holding the optional top navigation section\n * @csspart burger-menu-toggle-button - The button that toggles the burger menu\n */\nexport const SynHeader = createComponent({\n  displayName: 'SynHeader',\n  elementClass: Component,\n  events: {\n    onSynBurgerMenuShow: 'syn-burger-menu-show' as EventName<SynBurgerMenuShowEvent>,\n    onSynBurgerMenuHide: 'syn-burger-menu-hide' as EventName<SynBurgerMenuHideEvent>,\n  },\n  react: React,\n  tagName,\n});\n\nexport type { SynBurgerMenuShowEvent } from '@synergy-design-system/components';\nexport type { SynBurgerMenuHideEvent } from '@synergy-design-system/components';\n"],
+  "mappings": ";AAKA,YAAY,WAAW;AACvB,SAAS,uBAAuB;AAChC,OAAO,eAAe;AAKtB,IAAM,UAAU;AAChB,UAAU,OAAO,YAAY;AA6BtB,IAAM,YAAY,gBAAgB;AAAA,EACvC,aAAa;AAAA,EACb,cAAc;AAAA,EACd,QAAQ;AAAA,IACN,qBAAqB;AAAA,IACrB,qBAAqB;AAAA,EACvB;AAAA,EACA,OAAO;AAAA,EACP;AACF,CAAC;",
+  "names": []
+}

package/dist/chunks/chunk.Y2KBRBDX.js

@@ -0,0 +1,23 @@
+// ../react/src/components/nav-item.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import Component from "@synergy-design-system/components/components/nav-item/nav-item.component.js";
+var tagName = "syn-nav-item";
+Component.define("syn-nav-item");
+var SynNavItem = createComponent({
+  displayName: "SynNavItem",
+  elementClass: Component,
+  events: {
+    onSynShow: "syn-show",
+    onSynHide: "syn-hide",
+    onSynBlur: "syn-blur",
+    onSynFocus: "syn-focus"
+  },
+  react: React,
+  tagName
+});
+
+export {
+  SynNavItem
+};
+//# sourceMappingURL=chunk.Y2KBRBDX.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/nav-item.ts"],
+  "sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED @synergy-design-system/react wrappers for @synergy-design-system/components\n// Please do not edit this file directly!\n// It will get recreated when running pnpm build.\n// ---------------------------------------------------------------------\nimport * as React from 'react';\nimport { createComponent } from '@lit/react';\nimport Component from '@synergy-design-system/components/components/nav-item/nav-item.component.js';\n\nimport { type EventName } from '@lit/react';\nimport type {\n  SynBlurEvent, SynFocusEvent, SynHideEvent, SynShowEvent,\n} from '@synergy-design-system/components';\n\nconst tagName = 'syn-nav-item';\nComponent.define('syn-nav-item');\n\n/**\n * @summary Flexible button / link component that can be used to quickly build navigations.\n * Takes 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 * @status stable\n * @since 1.14.0\n *\n * @dependency syn-divider\n *\n * @event syn-show - Emitted when the navigation item:\n * - has children,\n * - and is clicked while HTML details are hidden.\n *\n * @event syn-hide - Emitted when the navigation item:\n * - has children,\n * - and is clicked while HTML details are shown.\n *\n * @event syn-blur - Emitted when the button loses focus.\n * @event syn-focus - Emitted when the button gains focus.\n *\n * @slot - The navigation item's label.\n * @slot prefix - A presentational prefix icon or similar element.\n * @slot suffix - A presentational suffix icon or similar element.\n * @slot children - Slot used to provide nested child navigation elements.\n * If provided, details and summary elements will be used.\n * A chevron will be shown on the right side regardless of the chevron property.\n *\n * @csspart base - The component's base wrapper including children.\n * @csspart children - The wrapper that holds the children\n * @csspart content-wrapper - The component's content wrapper.\n * @csspart content - The component's content excluding children.\n * @csspart current-indicator - The indicator used when current is set to true\n * @csspart chevron - The container that wraps the chevron.\n * @csspart details - The details element rendered when there are children available\n * @csspart divider - The components optional top divider.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart suffix - The container that wraps the suffix.\n *\n * @cssproperty --indentation - Numeric value, indicating the level the item is placed at.\n * @cssproperty --indentation-stepping - The amount of pixels each level will indent.\n * @cssproperty --display-children - Display property of the children. Defaults to \"contents\"\n */\nexport const SynNavItem = createComponent({\n  displayName: 'SynNavItem',\n  elementClass: Component,\n  events: {\n    onSynShow: 'syn-show' as EventName<SynShowEvent>,\n    onSynHide: 'syn-hide' as EventName<SynHideEvent>,\n    onSynBlur: 'syn-blur' as EventName<SynBlurEvent>,\n    onSynFocus: 'syn-focus' as EventName<SynFocusEvent>,\n  },\n  react: React,\n  tagName,\n});\n\nexport type { SynShowEvent } from '@synergy-design-system/components';\nexport type { SynHideEvent } from '@synergy-design-system/components';\nexport type { SynBlurEvent } from '@synergy-design-system/components';\nexport type { SynFocusEvent } from '@synergy-design-system/components';\n"],
+  "mappings": ";AAKA,YAAY,WAAW;AACvB,SAAS,uBAAuB;AAChC,OAAO,eAAe;AAOtB,IAAM,UAAU;AAChB,UAAU,OAAO,cAAc;AA+CxB,IAAM,aAAa,gBAAgB;AAAA,EACxC,aAAa;AAAA,EACb,cAAc;AAAA,EACd,QAAQ;AAAA,IACN,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,YAAY;AAAA,EACd;AAAA,EACA,OAAO;AAAA,EACP;AACF,CAAC;",
+  "names": []
+}

package/dist/components/header.d.ts

@@ -1,4 +1,6 @@
 import Component from '@synergy-design-system/components/components/header/header.component.js';
+import { type EventName } from '@lit/react';
+import type { SynBurgerMenuHideEvent, SynBurgerMenuShowEvent } from '@synergy-design-system/components';
 /**
  * @summary The <syn-header /> element provides a generic application header
  * that can be used to add applications name, toolbar and primary navigation.
@@ -12,6 +14,11 @@ import Component from '@synergy-design-system/components/components/header/heade
  * @slot meta-navigation - The meta-navigation is used to add various application toolbar icons.
  *                     Best used with `<syn-icon-button />` and `<syn-drop-down />`
  * @slot navigation - This slot can be used to add an optional horizontal navigation
+ * @slot show-burger-menu - An icon to use in lieu of the default show burger menu icon
+ * @slot hide-burger-menu - An icon to use in lieu of the default hide burger menu icon
+ *
+ * @event syn-burger-menu-show - Emitted when the burger menu button is toggled to visible
+ * @event syn-burger-menu-hide - Emitted when the burger menu button is toggled to not visible
  *
  * @csspart base - The component's base wrapper.
  * @csspart content - The wrapper most content items reside
@@ -19,5 +26,11 @@ import Component from '@synergy-design-system/components/components/header/heade
  * @csspart label - The element wrapping the application name
  * @csspart meta-navigation - The Item wrapping the optional application menu
  * @csspart navigation - The wrapper that is holding the optional top navigation section
+ * @csspart burger-menu-toggle-button - The button that toggles the burger menu
  */
-export declare const SynHeader: import("@lit/react").ReactWebComponent<Component, {}>;
+export declare const SynHeader: import("@lit/react").ReactWebComponent<Component, {
+    onSynBurgerMenuShow: EventName<SynBurgerMenuShowEvent>;
+    onSynBurgerMenuHide: EventName<SynBurgerMenuHideEvent>;
+}>;
+export type { SynBurgerMenuShowEvent } from '@synergy-design-system/components';
+export type { SynBurgerMenuHideEvent } from '@synergy-design-system/components';

package/dist/components/header.js

@@ -1,6 +1,6 @@
 import {
   SynHeader
-} from "../chunks/chunk.ODUBD6GC.js";
+} from "../chunks/chunk.BD6VWV24.js";
 export {
   SynHeader
 };

package/dist/components/nav-item.d.ts

@@ -0,0 +1,58 @@
+import Component from '@synergy-design-system/components/components/nav-item/nav-item.component.js';
+import { type EventName } from '@lit/react';
+import type { SynBlurEvent, SynFocusEvent, SynHideEvent, SynShowEvent } from '@synergy-design-system/components';
+/**
+ * @summary Flexible button / link component that can be used to quickly build navigations.
+ * Takes one of 3 forms:
+ * - button (default),
+ * - link (overrides button if a 'href' is provided),
+ * - or accordion (overrides all other if 'children' slot is defined).
+ *
+ * @status stable
+ * @since 1.14.0
+ *
+ * @dependency syn-divider
+ *
+ * @event syn-show - Emitted when the navigation item:
+ * - has children,
+ * - and is clicked while HTML details are hidden.
+ *
+ * @event syn-hide - Emitted when the navigation item:
+ * - has children,
+ * - and is clicked while HTML details are shown.
+ *
+ * @event syn-blur - Emitted when the button loses focus.
+ * @event syn-focus - Emitted when the button gains focus.
+ *
+ * @slot - The navigation item's label.
+ * @slot prefix - A presentational prefix icon or similar element.
+ * @slot suffix - A presentational suffix icon or similar element.
+ * @slot 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.
+ *
+ * @csspart base - The component's base wrapper including children.
+ * @csspart children - The wrapper that holds the children
+ * @csspart content-wrapper - The component's content wrapper.
+ * @csspart content - The component's content excluding children.
+ * @csspart current-indicator - The indicator used when current is set to true
+ * @csspart chevron - The container that wraps the chevron.
+ * @csspart details - The details element rendered when there are children available
+ * @csspart divider - The components optional top divider.
+ * @csspart prefix - The container that wraps the prefix.
+ * @csspart suffix - The container that wraps the suffix.
+ *
+ * @cssproperty --indentation - Numeric value, indicating the level the item is placed at.
+ * @cssproperty --indentation-stepping - The amount of pixels each level will indent.
+ * @cssproperty --display-children - Display property of the children. Defaults to "contents"
+ */
+export declare const SynNavItem: import("@lit/react").ReactWebComponent<Component, {
+    onSynShow: EventName<SynShowEvent>;
+    onSynHide: EventName<SynHideEvent>;
+    onSynBlur: EventName<SynBlurEvent>;
+    onSynFocus: EventName<SynFocusEvent>;
+}>;
+export type { SynShowEvent } from '@synergy-design-system/components';
+export type { SynHideEvent } from '@synergy-design-system/components';
+export type { SynBlurEvent } from '@synergy-design-system/components';
+export type { SynFocusEvent } from '@synergy-design-system/components';

package/dist/components/nav-item.js

@@ -0,0 +1,7 @@
+import {
+  SynNavItem
+} from "../chunks/chunk.Y2KBRBDX.js";
+export {
+  SynNavItem
+};
+//# sourceMappingURL=nav-item.js.map

package/dist/components/nav-item.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/components/prio-nav.d.ts

@@ -0,0 +1,36 @@
+import Component from '@synergy-design-system/components/components/prio-nav/prio-nav.component.js';
+/**
+ * @summary The `<syn-prio-nav />` element provides a generic navigation bar
+ * that can be used to group multiple navigation items  (usually horizontal `<syn-nav-item />`s)
+ * together. It will automatically group all items not visible in the viewport into a custom
+ * priority menu.
+ *
+ * @example
+ * <syn-prio-nav>
+ *  <syn-nav-item current horizontal>Item 1</syn-nav-item>
+ *  <button role="menuitem">Item 2 (custom)</button>
+ *  <syn-nav-item horizontal>Item 3</syn-nav-item>
+ * </syn-prio-nav>
+ *
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-prio-nav--docs
+ * @status stable
+ * @since 1.14.0
+ *
+ * @dependency syn-dropdown
+ * @dependency syn-icon
+ * @dependency syn-menu
+ * @dependency syn-nav-item
+ *
+ * @slot - The given navigation items. Must be horizontal `<syn-nav-item>`s
+ *    or have a role of "menuitem"
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart priority-menu - The wrapper around the priority menu
+ * @csspart priority-menu-nav-item - The navigation item for the priority menu
+ * @csspart priority-menu-label - The label for the priority menu
+ * @csspart priority-menu-icon - The icon for the priority menu
+ * @csspart priority-menu-container - The container for the shifted navigation items,
+ *    if there is not enough space.
+ *
+ */
+export declare const SynPrioNav: import("@lit/react").ReactWebComponent<Component, {}>;

package/dist/components/prio-nav.js

@@ -0,0 +1,7 @@
+import {
+  SynPrioNav
+} from "../chunks/chunk.7732PJEC.js";
+export {
+  SynPrioNav
+};
+//# sourceMappingURL=prio-nav.js.map

package/dist/components/prio-nav.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/components/side-nav.d.ts

@@ -0,0 +1,58 @@
+import Component from '@synergy-design-system/components/components/side-nav/side-nav.component.js';
+import { type EventName } from '@lit/react';
+import type { SynAfterHideEvent, SynAfterShowEvent, SynHideEvent, SynShowEvent } from '@synergy-design-system/components';
+/**
+ * @summary The <syn-side-nav /> element contains secondary navigation and fits below the header.
+ * It can be used to group multiple navigation items (<syn-nav-item />s) together.
+ *
+ * @example
+ * <syn-side-nav open>
+ *  <syn-nav-item >Item 1</syn-nav-item>
+ *  <syn-nav-item divider>Item 2</syn-nav-item>
+ * </syn-side-nav>
+ *
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-side-nav--docs
+ * @status stable
+ * @since 1.14.0
+ *
+ * @dependency syn-divider
+ * @dependency syn-drawer
+ *
+ * @slot - The main content of the side-nav. Used for <syn-nav-item /> elements.
+ * @slot 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.
+ *
+ * @event syn-show - Emitted when the side-nav opens.
+ * @event syn-after-show - Emitted after the side-nav opens and all animations are complete.
+ * @event syn-hide - Emitted when the side-nav closes.
+ * @event syn-after-hide - Emitted after the side-nav closes and all animations are complete.
+ *
+ * @csspart base - The components base wrapper
+ * @csspart drawer - The drawer that is used under the hood for creating the side-nav
+ * @csspart content-container - The components main content container
+ * @csspart content - The components main content
+ * @csspart footer-container - The components footer content container
+ * @csspart footer-divider - The components footer divider
+ * @csspart footer - The components footer content
+ * @csspart overlay - The overlay that covers the screen behind the side-nav.
+ *
+ * @cssproperty  --side-nav-open-width - The width of the side-nav if in open state
+ * @cssproperty  --side-nav-rail-width - The width of the side-nav if in rail mode without open
+ *
+ * @animation sideNav.showNonRail - The animation to use when showing the side-nav in non-rail mode.
+ * @animation sideNav.showRail - The animation to use when showing the side-nav in rail mode.
+ * @animation sideNav.hideNonRail - The animation to use when hiding the side-nav in non-rail mode.
+ * @animation sideNav.hideRail - The animation to use when hiding the side-nav in rail mode.
+ * @animation sideNav.overlay.show - The animation to use when showing the side-nav's overlay.
+ * @animation sideNav.overlay.hide - The animation to use when hiding the side-nav's overlay.
+ */
+export declare const SynSideNav: import("@lit/react").ReactWebComponent<Component, {
+    onSynShow: EventName<SynShowEvent>;
+    onSynAfterShow: EventName<SynAfterShowEvent>;
+    onSynHide: EventName<SynHideEvent>;
+    onSynAfterHide: EventName<SynAfterHideEvent>;
+}>;
+export type { SynShowEvent } from '@synergy-design-system/components';
+export type { SynAfterShowEvent } from '@synergy-design-system/components';
+export type { SynHideEvent } from '@synergy-design-system/components';
+export type { SynAfterHideEvent } from '@synergy-design-system/components';

package/dist/components/side-nav.js

@@ -0,0 +1,7 @@
+import {
+  SynSideNav
+} from "../chunks/chunk.6BJ6XSFN.js";
+export {
+  SynSideNav
+};
+//# sourceMappingURL=side-nav.js.map

package/dist/components/side-nav.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/index.d.ts

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

package/dist/index.js

@@ -1,12 +1,27 @@
+import {
+  SynSideNav
+} from "./chunks/chunk.6BJ6XSFN.js";
+import {
+  SynSwitch
+} from "./chunks/chunk.7IZW5FRR.js";
+import {
+  SynTag
+} from "./chunks/chunk.7T7PO2AE.js";
 import {
   SynTextarea
 } from "./chunks/chunk.4YY6TGIA.js";
+import {
+  SynOptgroup
+} from "./chunks/chunk.DLAIDGSD.js";
 import {
   SynOption
 } from "./chunks/chunk.CJKK63W2.js";
 import {
   SynPopup
 } from "./chunks/chunk.UJGZNEKT.js";
+import {
+  SynPrioNav
+} from "./chunks/chunk.7732PJEC.js";
 import {
   SynRadioButton
 } from "./chunks/chunk.QBD4EIK5.js";
@@ -19,15 +34,9 @@ import {
 import {
   SynSelect
 } from "./chunks/chunk.FB24BPQZ.js";
-import {
-  SynSwitch
-} from "./chunks/chunk.7IZW5FRR.js";
-import {
-  SynTag
-} from "./chunks/chunk.7T7PO2AE.js";
 import {
   SynHeader
-} from "./chunks/chunk.ODUBD6GC.js";
+} from "./chunks/chunk.BD6VWV24.js";
 import {
   SynIconButton
 } from "./chunks/chunk.W4YO4ERO.js";
@@ -47,8 +56,8 @@ import {
   SynMenu
 } from "./chunks/chunk.NSUMR2HG.js";
 import {
-  SynOptgroup
-} from "./chunks/chunk.DLAIDGSD.js";
+  SynNavItem
+} from "./chunks/chunk.Y2KBRBDX.js";
 import {
   SynBadge
 } from "./chunks/chunk.XRVA7P2R.js";
@@ -85,13 +94,16 @@ export {
   SynMenu,
   SynMenuItem,
   SynMenuLabel,
+  SynNavItem,
   SynOptgroup,
   SynOption,
   SynPopup,
+  SynPrioNav,
   SynRadio,
   SynRadioButton,
   SynRadioGroup,
   SynSelect,
+  SynSideNav,
   SynSwitch,
   SynTag,
   SynTextarea

package/package.json

@@ -5,7 +5,7 @@
   },
   "dependencies": {
     "@lit/react": "^1.0.3",
-    "@synergy-design-system/components": "^1.14.0"
+    "@synergy-design-system/components": "^1.16.0"
   },
   "description": "React wrappers for the Synergy Design System",
   "exports": {
@@ -40,7 +40,7 @@
     "directory": "packages/react"
   },
   "type": "module",
-  "version": "1.14.0",
+  "version": "1.16.0",
   "devDependencies": {
     "@types/react": "^18.2.55",
     "react": "^18.2.0"

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/components/header.ts"],
-  "sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED @synergy-design-system/react wrappers for @synergy-design-system/components\n// Please do not edit this file directly!\n// It will get recreated when running pnpm build.\n// ---------------------------------------------------------------------\nimport * as React from 'react';\nimport { createComponent } from '@lit/react';\nimport Component from '@synergy-design-system/components/components/header/header.component.js';\n\nconst tagName = 'syn-header';\nComponent.define('syn-header');\n\n/**\n * @summary The <syn-header /> element provides a generic application header\n * that can be used to add applications name, toolbar and primary navigation.\n *\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-header--docs\n * @status stable\n * @since 1.10.0\n *\n * @slot - The label for the header.\n * @slot logo - The logo that should be displayed. Will fall back to the SICK logo if not provided.\n * @slot meta-navigation - The meta-navigation is used to add various application toolbar icons.\n *                     Best used with `<syn-icon-button />` and `<syn-drop-down />`\n * @slot navigation - This slot can be used to add an optional horizontal navigation\n *\n * @csspart base - The component's base wrapper.\n * @csspart content - The wrapper most content items reside\n * @csspart logo - The wrapper the application logo resides in\n * @csspart label - The element wrapping the application name\n * @csspart meta-navigation - The Item wrapping the optional application menu\n * @csspart navigation - The wrapper that is holding the optional top navigation section\n */\nexport const SynHeader = createComponent({\n  displayName: 'SynHeader',\n  elementClass: Component,\n  events: {\n\n  },\n  react: React,\n  tagName,\n});\n"],
-  "mappings": ";AAKA,YAAY,WAAW;AACvB,SAAS,uBAAuB;AAChC,OAAO,eAAe;AAEtB,IAAM,UAAU;AAChB,UAAU,OAAO,YAAY;AAuBtB,IAAM,YAAY,gBAAgB;AAAA,EACvC,aAAa;AAAA,EACb,cAAc;AAAA,EACd,QAAQ,CAER;AAAA,EACA,OAAO;AAAA,EACP;AACF,CAAC;",
-  "names": []
-}