@synergy-design-system/react 2.18.0 → 2.18.2

package/dist/chunks/{chunk.CYZ6F7G6.js → chunk.2JXRC7UA.js}

@@ -20,4 +20,4 @@ var SynSideNav = createComponent({
 export {
   SynSideNav
 };
-//# sourceMappingURL=chunk.CYZ6F7G6.js.map
+//# sourceMappingURL=chunk.2JXRC7UA.js.map

package/dist/chunks/{chunk.CYZ6F7G6.js.map → chunk.2JXRC7UA.js.map}

@@ -1,7 +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 { SynShowEvent } from '@synergy-design-system/components';\nimport type { SynAfterShowEvent } from '@synergy-design-system/components';\nimport type { SynHideEvent } from '@synergy-design-system/components';\nimport type { SynAfterHideEvent } 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 *\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;AAQtB,IAAM,UAAU;AAChB,UAAU,OAAO,cAAc;AA8CxB,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;",
+  "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 { SynShowEvent } from '@synergy-design-system/components';\nimport type { SynAfterShowEvent } from '@synergy-design-system/components';\nimport type { SynHideEvent } from '@synergy-design-system/components';\nimport type { SynAfterHideEvent } 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  (where the footer slot content is rendered)\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 * @csspart panel - The side-nav's panel (where the whole content is rendered).\n * @csspart body - The side-nav's body (where the default slot content is rendered)\n * @csspart drawer__base - The drawer's base wrapper\n *\n * @cssproperty  --side-nav-open-width - The width of the side-nav if in open state\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;AAQtB,IAAM,UAAU;AAChB,UAAU,OAAO,cAAc;AAkDxB,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/components/side-nav.d.ts

@@ -35,9 +35,13 @@ import type { SynAfterHideEvent } from '@synergy-design-system/components';
  * @csspart content-container - The components main content container
  * @csspart content - The components main content
  * @csspart footer-container - The components footer content container
+  (where the footer slot content is rendered)
  * @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.
+ * @csspart panel - The side-nav's panel (where the whole content is rendered).
+ * @csspart body - The side-nav's body (where the default slot content is rendered)
+ * @csspart drawer__base - The drawer's base wrapper
  *
  * @cssproperty  --side-nav-open-width - The width of the side-nav if in open state
  *

package/dist/components/side-nav.js

@@ -1,6 +1,6 @@
 import {
   SynSideNav
-} from "../chunks/chunk.CYZ6F7G6.js";
+} from "../chunks/chunk.2JXRC7UA.js";
 export {
   SynSideNav
 };

package/dist/index.js

@@ -36,7 +36,7 @@ import {
 } from "./chunks/chunk.DDVND3A3.js";
 import {
   SynSideNav
-} from "./chunks/chunk.CYZ6F7G6.js";
+} from "./chunks/chunk.2JXRC7UA.js";
 import {
   SynSpinner
 } from "./chunks/chunk.YLB4QDAX.js";

package/dist/types/syn-jsx-elements.d.ts

@@ -1330,9 +1330,13 @@ export type SynCustomElement<SynElement extends HTMLElement, Events extends SynE
  * @csspart content-container - The components main content container
  * @csspart content - The components main content
  * @csspart footer-container - The components footer content container
+  (where the footer slot content is rendered)
  * @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.
+ * @csspart panel - The side-nav's panel (where the whole content is rendered).
+ * @csspart body - The side-nav's body (where the default slot content is rendered)
+ * @csspart drawer__base - The drawer's base wrapper
  *
  * @cssproperty  --side-nav-open-width - The width of the side-nav if in open state
  *
@@ -2538,49 +2542,53 @@ declare module 'react' {
              * @csspart expand-icon - The container that wraps the expand icon.
              */ 'syn-select': SynSelectJSXElement;
             /**
-             * @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
-             *
-             * @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.
-             */ 'syn-side-nav': SynSideNavJSXElement;
+       * @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
+        (where the footer slot content is rendered)
+       * @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.
+       * @csspart panel - The side-nav's panel (where the whole content is rendered).
+       * @csspart body - The side-nav's body (where the default slot content is rendered)
+       * @csspart drawer__base - The drawer's base wrapper
+       *
+       * @cssproperty  --side-nav-open-width - The width of the side-nav if in open state
+       *
+       * @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.
+       */ 'syn-side-nav': SynSideNavJSXElement;
             /**
              * @summary Spinners are used to show the progress of an indeterminate operation.
              * @documentation https://synergy.style/components/spinner

package/package.json

@@ -5,7 +5,7 @@
   },
   "dependencies": {
     "@lit/react": "^1.0.7",
-    "@synergy-design-system/components": "^2.18.0"
+    "@synergy-design-system/components": "^2.18.2"
   },
   "description": "React wrappers for the Synergy Design System",
   "exports": {
@@ -43,7 +43,7 @@
     "directory": "packages/react"
   },
   "type": "module",
-  "version": "2.18.0",
+  "version": "2.18.2",
   "devDependencies": {
     "@types/react": "^19.0.7",
     "react": "^19.0.0"