@synergy-design-system/react 1.19.0 → 1.20.1

package/dist/chunks/{chunk.6BJ6XSFN.js → chunk.A3DZYM6Z.js}

@@ -20,4 +20,4 @@ var SynSideNav = createComponent({
 export {
   SynSideNav
 };
-//# sourceMappingURL=chunk.6BJ6XSFN.js.map
+//# sourceMappingURL=chunk.A3DZYM6Z.js.map

package/dist/chunks/{chunk.6BJ6XSFN.js.map → chunk.A3DZYM6Z.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 {\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;",
+  "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 *\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;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;",
   "names": []
 }

package/dist/chunks/chunk.NCB462OR.js

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

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/alert.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/alert/alert.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-alert';\nComponent.define('syn-alert');\n\n/**\n * @summary Alerts are used to display important messages inline or as toast notifications.\n * @documentation https://synergy.style/components/alert\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon-button\n *\n * @slot - The alert's main content.\n * @slot icon - An icon to show in the alert. Works best with `<syn-icon>`.\n *\n * @event syn-show - Emitted when the alert opens.\n * @event syn-after-show - Emitted after the alert opens and all animations are complete.\n * @event syn-hide - Emitted when the alert closes.\n * @event syn-after-hide - Emitted after the alert closes and all animations are complete.\n *\n * @csspart base - The component's base wrapper.\n * @csspart icon - The container that wraps the optional icon.\n * @csspart message - The container that wraps the alert's main content.\n * @csspart close-button - The close button, an `<syn-icon-button>`.\n * @csspart close-button__base - The close button's exported `base` part.\n *\n * @animation alert.show - The animation to use when showing the alert.\n * @animation alert.hide - The animation to use when hiding the alert.\n */\nexport const SynAlert = createComponent({\n  displayName: 'SynAlert',\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,WAAW;AA2BrB,IAAM,WAAW,gBAAgB;AAAA,EACtC,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/alert.d.ts

@@ -0,0 +1,38 @@
+import Component from '@synergy-design-system/components/components/alert/alert.component.js';
+import { type EventName } from '@lit/react';
+import type { SynAfterHideEvent, SynAfterShowEvent, SynHideEvent, SynShowEvent } from '@synergy-design-system/components';
+/**
+ * @summary Alerts are used to display important messages inline or as toast notifications.
+ * @documentation https://synergy.style/components/alert
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency syn-icon-button
+ *
+ * @slot - The alert's main content.
+ * @slot icon - An icon to show in the alert. Works best with `<syn-icon>`.
+ *
+ * @event syn-show - Emitted when the alert opens.
+ * @event syn-after-show - Emitted after the alert opens and all animations are complete.
+ * @event syn-hide - Emitted when the alert closes.
+ * @event syn-after-hide - Emitted after the alert closes and all animations are complete.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart icon - The container that wraps the optional icon.
+ * @csspart message - The container that wraps the alert's main content.
+ * @csspart close-button - The close button, an `<syn-icon-button>`.
+ * @csspart close-button__base - The close button's exported `base` part.
+ *
+ * @animation alert.show - The animation to use when showing the alert.
+ * @animation alert.hide - The animation to use when hiding the alert.
+ */
+export declare const SynAlert: 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/alert.js

@@ -0,0 +1,7 @@
+import {
+  SynAlert
+} from "../chunks/chunk.NCB462OR.js";
+export {
+  SynAlert
+};
+//# sourceMappingURL=alert.js.map

package/dist/components/alert.js.map

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

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

@@ -37,7 +37,6 @@ import type { SynAfterHideEvent, SynAfterShowEvent, SynHideEvent, SynShowEvent }
  * @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.

package/dist/components/side-nav.js

@@ -1,6 +1,6 @@
 import {
   SynSideNav
-} from "../chunks/chunk.6BJ6XSFN.js";
+} from "../chunks/chunk.A3DZYM6Z.js";
 export {
   SynSideNav
 };

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export { SynAlert } from './components/alert.js';
 export { SynBadge } from './components/badge.js';
 export { SynButton } from './components/button.js';
 export { SynButtonGroup } from './components/button-group.js';

package/dist/index.js

@@ -1,3 +1,6 @@
+import {
+  SynRadioGroup
+} from "./chunks/chunk.PCXGVEBP.js";
 import {
   SynRadio
 } from "./chunks/chunk.AFCMSVBY.js";
@@ -6,7 +9,7 @@ import {
 } from "./chunks/chunk.FB24BPQZ.js";
 import {
   SynSideNav
-} from "./chunks/chunk.6BJ6XSFN.js";
+} from "./chunks/chunk.A3DZYM6Z.js";
 import {
   SynSwitch
 } from "./chunks/chunk.7IZW5FRR.js";
@@ -16,6 +19,9 @@ import {
 import {
   SynTextarea
 } from "./chunks/chunk.4YY6TGIA.js";
+import {
+  SynNavItem
+} from "./chunks/chunk.Y2KBRBDX.js";
 import {
   SynOptgroup
 } from "./chunks/chunk.DLAIDGSD.js";
@@ -38,8 +44,8 @@ import {
   SynRadioButton
 } from "./chunks/chunk.QBD4EIK5.js";
 import {
-  SynRadioGroup
-} from "./chunks/chunk.PCXGVEBP.js";
+  SynDropdown
+} from "./chunks/chunk.E3427YBK.js";
 import {
   SynHeader
 } from "./chunks/chunk.BD6VWV24.js";
@@ -62,8 +68,8 @@ import {
   SynMenu
 } from "./chunks/chunk.NSUMR2HG.js";
 import {
-  SynNavItem
-} from "./chunks/chunk.Y2KBRBDX.js";
+  SynAlert
+} from "./chunks/chunk.NCB462OR.js";
 import {
   SynBadge
 } from "./chunks/chunk.XRVA7P2R.js";
@@ -82,10 +88,8 @@ import {
 import {
   SynDrawer
 } from "./chunks/chunk.BQ62A32K.js";
-import {
-  SynDropdown
-} from "./chunks/chunk.E3427YBK.js";
 export {
+  SynAlert,
   SynBadge,
   SynButton,
   SynButtonGroup,

package/package.json

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