@synergy-design-system/react 1.11.0 → 1.13.0

package/dist/chunks/chunk.E3427YBK.js

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

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/dropdown.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/dropdown/dropdown.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-dropdown';\nComponent.define('syn-dropdown');\n\n/**\n * @summary Dropdowns expose additional content that \"drops down\" in a panel.\n * @documentation https://synergy.style/components/dropdown\n * @status stable\n * @since 2.0\n *\n * @dependency syn-popup\n *\n * @slot - The dropdown's main content.\n * @slot trigger - The dropdown's trigger, usually a `<syn-button>` element.\n *\n * @event syn-show - Emitted when the dropdown opens.\n * @event syn-after-show - Emitted after the dropdown opens and all animations are complete.\n * @event syn-hide - Emitted when the dropdown closes.\n * @event syn-after-hide - Emitted after the dropdown closes and all animations are complete.\n *\n * @csspart base - The component's base wrapper.\n * @csspart trigger - The container that wraps the trigger.\n * @csspart panel - The panel that gets shown when the dropdown is open.\n *\n * @animation dropdown.show - The animation to use when showing the dropdown.\n * @animation dropdown.hide - The animation to use when hiding the dropdown.\n */\nexport const SynDropdown = createComponent({\n  displayName: 'SynDropdown',\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;AAyBxB,IAAM,cAAc,gBAAgB;AAAA,EACzC,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.EOLGRN43.js

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

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/menu-label.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/menu-label/menu-label.component.js';\n\nconst tagName = 'syn-menu-label';\nComponent.define('syn-menu-label');\n\n/**\n * @summary Menu labels are used to describe a group of menu items.\n * @documentation https://synergy.style/components/menu-label\n * @status stable\n * @since 2.0\n *\n * @dependency syn-divider\n *\n * @slot - The menu label's content.\n *\n * @csspart base - The component's base wrapper.\n * @csspart divider - The divider that is displayed above the content\n * @csspart label - The label that is displayed below the divider\n *\n * @cssproperty --display-divider - Display property of the divider. Defaults to \"block\"\n */\nexport const SynMenuLabel = createComponent({\n  displayName: 'SynMenuLabel',\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,gBAAgB;AAkB1B,IAAM,eAAe,gBAAgB;AAAA,EAC1C,aAAa;AAAA,EACb,cAAc;AAAA,EACd,QAAQ,CAER;AAAA,EACA,OAAO;AAAA,EACP;AACF,CAAC;",
+  "names": []
+}

package/dist/chunks/chunk.KLI3DNUO.js

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

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/menu-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/menu-item/menu-item.component.js';\n\nconst tagName = 'syn-menu-item';\nComponent.define('syn-menu-item');\n\n/**\n * @summary Menu items provide options for the user to pick from in a menu.\n * @documentation https://synergy.style/components/menu-item\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon\n * @dependency syn-popup\n * @dependency syn-spinner\n *\n * @slot - The menu item's label.\n * @slot prefix - Used to prepend an icon or similar element to the menu item.\n * @slot suffix - Used to append an icon or similar element to the menu item.\n * @slot submenu - Used to denote a nested menu.\n *\n * @csspart base - The component's base wrapper.\n * @csspart checked-icon - The checked icon, which is only visible when the menu item is checked.\n * @csspart prefix - The prefix container.\n * @csspart label - The menu item label.\n * @csspart suffix - The suffix container.\n * @csspart spinner - The spinner that shows when the menu item is in the loading state.\n * @csspart spinner__base - The spinner's base part.\n * @csspart submenu-icon - The submenu icon, visible only when the menu item has a submenu (not yet implemented).\n *\n * @cssproperty [--submenu-offset=-2px] - The distance submenus shift to overlap the parent menu.\n */\nexport const SynMenuItem = createComponent({\n  displayName: 'SynMenuItem',\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,eAAe;AA4BzB,IAAM,cAAc,gBAAgB;AAAA,EACzC,aAAa;AAAA,EACb,cAAc;AAAA,EACd,QAAQ,CAER;AAAA,EACA,OAAO;AAAA,EACP;AACF,CAAC;",
+  "names": []
+}

package/dist/chunks/chunk.NSUMR2HG.js

@@ -0,0 +1,20 @@
+// ../react/src/components/menu.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import Component from "@synergy-design-system/components/components/menu/menu.component.js";
+var tagName = "syn-menu";
+Component.define("syn-menu");
+var SynMenu = createComponent({
+  displayName: "SynMenu",
+  elementClass: Component,
+  events: {
+    onSynSelect: "syn-select"
+  },
+  react: React,
+  tagName
+});
+
+export {
+  SynMenu
+};
+//# sourceMappingURL=chunk.NSUMR2HG.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/menu.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/menu/menu.component.js';\n\nimport { type EventName } from '@lit/react';\nimport type { SynSelectEvent } from '@synergy-design-system/components';\n\nconst tagName = 'syn-menu';\nComponent.define('syn-menu');\n\n/**\n * @summary Menus provide a list of options for the user to choose from.\n * @documentation https://synergy.style/components/menu\n * @status stable\n * @since 2.0\n *\n * @slot - The menu's content, including menu items, menu labels, and dividers.\n *\n * @event {{ item: SynMenuItem }} syn-select - Emitted when a menu item is selected.\n */\nexport const SynMenu = createComponent({\n  displayName: 'SynMenu',\n  elementClass: Component,\n  events: {\n    onSynSelect: 'syn-select' as EventName<SynSelectEvent>,\n  },\n  react: React,\n  tagName,\n});\n\nexport type { SynSelectEvent } from '@synergy-design-system/components';\n"],
+  "mappings": ";AAKA,YAAY,WAAW;AACvB,SAAS,uBAAuB;AAChC,OAAO,eAAe;AAKtB,IAAM,UAAU;AAChB,UAAU,OAAO,UAAU;AAYpB,IAAM,UAAU,gBAAgB;AAAA,EACrC,aAAa;AAAA,EACb,cAAc;AAAA,EACd,QAAQ;AAAA,IACN,aAAa;AAAA,EACf;AAAA,EACA,OAAO;AAAA,EACP;AACF,CAAC;",
+  "names": []
+}

package/dist/chunks/chunk.UJGZNEKT.js

@@ -0,0 +1,20 @@
+// ../react/src/components/popup.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import Component from "@synergy-design-system/components/components/popup/popup.component.js";
+var tagName = "syn-popup";
+Component.define("syn-popup");
+var SynPopup = createComponent({
+  displayName: "SynPopup",
+  elementClass: Component,
+  events: {
+    onSynReposition: "syn-reposition"
+  },
+  react: React,
+  tagName
+});
+
+export {
+  SynPopup
+};
+//# sourceMappingURL=chunk.UJGZNEKT.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/popup.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/popup/popup.component.js';\n\nimport { type EventName } from '@lit/react';\nimport type { SynRepositionEvent } from '@synergy-design-system/components';\n\nconst tagName = 'syn-popup';\nComponent.define('syn-popup');\n\n/**\n * @summary Popup is a utility that lets you declaratively anchor \"popup\" containers to another element.\n * @documentation https://synergy.style/components/popup\n * @status stable\n * @since 2.0\n *\n * @event syn-reposition - Emitted when the popup is repositioned. This event can fire a lot, so avoid putting expensive\n *  operations in your listener or consider debouncing it.\n *\n * @slot - The popup's content.\n * @slot anchor - The element the popup will be anchored to. If the anchor lives outside of the popup, you can use the\n *  `anchor` attribute or property instead.\n *\n * @csspart arrow - The arrow's container. Avoid setting `top|bottom|left|right` properties, as these values are\n *  assigned dynamically as the popup moves. This is most useful for applying a background color to match the popup, and\n *  maybe a border or box shadow.\n * @csspart popup - The popup's container. Useful for setting a background color, box shadow, etc.\n * @csspart hover-bridge - The hover bridge element. Only available when the `hover-bridge` option is enabled.\n *\n * @cssproperty [--arrow-size=6px] - The size of the arrow. Note that an arrow won't be shown unless the `arrow`\n *  attribute is used.\n * @cssproperty [--arrow-color=var(--syn-color-neutral-0)] - The color of the arrow.\n * @cssproperty [--auto-size-available-width] - A read-only custom property that determines the amount of width the\n *  popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only\n *  available when using `auto-size`.\n * @cssproperty [--auto-size-available-height] - A read-only custom property that determines the amount of height the\n *  popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only\n *  available when using `auto-size`.\n */\nexport const SynPopup = createComponent({\n  displayName: 'SynPopup',\n  elementClass: Component,\n  events: {\n    onSynReposition: 'syn-reposition' as EventName<SynRepositionEvent>,\n  },\n  react: React,\n  tagName,\n});\n\nexport type { SynRepositionEvent } from '@synergy-design-system/components';\n"],
+  "mappings": ";AAKA,YAAY,WAAW;AACvB,SAAS,uBAAuB;AAChC,OAAO,eAAe;AAKtB,IAAM,UAAU;AAChB,UAAU,OAAO,WAAW;AA+BrB,IAAM,WAAW,gBAAgB;AAAA,EACtC,aAAa;AAAA,EACb,cAAc;AAAA,EACd,QAAQ;AAAA,IACN,iBAAiB;AAAA,EACnB;AAAA,EACA,OAAO;AAAA,EACP;AACF,CAAC;",
+  "names": []
+}

package/dist/components/dropdown.d.ts

@@ -0,0 +1,36 @@
+import Component from '@synergy-design-system/components/components/dropdown/dropdown.component.js';
+import { type EventName } from '@lit/react';
+import type { SynAfterHideEvent, SynAfterShowEvent, SynHideEvent, SynShowEvent } from '@synergy-design-system/components';
+/**
+ * @summary Dropdowns expose additional content that "drops down" in a panel.
+ * @documentation https://synergy.style/components/dropdown
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency syn-popup
+ *
+ * @slot - The dropdown's main content.
+ * @slot trigger - The dropdown's trigger, usually a `<syn-button>` element.
+ *
+ * @event syn-show - Emitted when the dropdown opens.
+ * @event syn-after-show - Emitted after the dropdown opens and all animations are complete.
+ * @event syn-hide - Emitted when the dropdown closes.
+ * @event syn-after-hide - Emitted after the dropdown closes and all animations are complete.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart trigger - The container that wraps the trigger.
+ * @csspart panel - The panel that gets shown when the dropdown is open.
+ *
+ * @animation dropdown.show - The animation to use when showing the dropdown.
+ * @animation dropdown.hide - The animation to use when hiding the dropdown.
+ */
+export declare const SynDropdown: 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/dropdown.js

@@ -0,0 +1,7 @@
+import {
+  SynDropdown
+} from "../chunks/chunk.E3427YBK.js";
+export {
+  SynDropdown
+};
+//# sourceMappingURL=dropdown.js.map

package/dist/components/dropdown.js.map

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

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

@@ -0,0 +1,28 @@
+import Component from '@synergy-design-system/components/components/menu-item/menu-item.component.js';
+/**
+ * @summary Menu items provide options for the user to pick from in a menu.
+ * @documentation https://synergy.style/components/menu-item
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency syn-icon
+ * @dependency syn-popup
+ * @dependency syn-spinner
+ *
+ * @slot - The menu item's label.
+ * @slot prefix - Used to prepend an icon or similar element to the menu item.
+ * @slot suffix - Used to append an icon or similar element to the menu item.
+ * @slot submenu - Used to denote a nested menu.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart checked-icon - The checked icon, which is only visible when the menu item is checked.
+ * @csspart prefix - The prefix container.
+ * @csspart label - The menu item label.
+ * @csspart suffix - The suffix container.
+ * @csspart spinner - The spinner that shows when the menu item is in the loading state.
+ * @csspart spinner__base - The spinner's base part.
+ * @csspart submenu-icon - The submenu icon, visible only when the menu item has a submenu (not yet implemented).
+ *
+ * @cssproperty [--submenu-offset=-2px] - The distance submenus shift to overlap the parent menu.
+ */
+export declare const SynMenuItem: import("@lit/react").ReactWebComponent<Component, {}>;

package/dist/components/menu-item.js

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

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

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

package/dist/components/menu-label.d.ts

@@ -0,0 +1,18 @@
+import Component from '@synergy-design-system/components/components/menu-label/menu-label.component.js';
+/**
+ * @summary Menu labels are used to describe a group of menu items.
+ * @documentation https://synergy.style/components/menu-label
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency syn-divider
+ *
+ * @slot - The menu label's content.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart divider - The divider that is displayed above the content
+ * @csspart label - The label that is displayed below the divider
+ *
+ * @cssproperty --display-divider - Display property of the divider. Defaults to "block"
+ */
+export declare const SynMenuLabel: import("@lit/react").ReactWebComponent<Component, {}>;

package/dist/components/menu-label.js

@@ -0,0 +1,7 @@
+import {
+  SynMenuLabel
+} from "../chunks/chunk.EOLGRN43.js";
+export {
+  SynMenuLabel
+};
+//# sourceMappingURL=menu-label.js.map

package/dist/components/menu-label.js.map

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

package/dist/components/menu.d.ts

@@ -0,0 +1,17 @@
+import Component from '@synergy-design-system/components/components/menu/menu.component.js';
+import { type EventName } from '@lit/react';
+import type { SynSelectEvent } from '@synergy-design-system/components';
+/**
+ * @summary Menus provide a list of options for the user to choose from.
+ * @documentation https://synergy.style/components/menu
+ * @status stable
+ * @since 2.0
+ *
+ * @slot - The menu's content, including menu items, menu labels, and dividers.
+ *
+ * @event {{ item: SynMenuItem }} syn-select - Emitted when a menu item is selected.
+ */
+export declare const SynMenu: import("@lit/react").ReactWebComponent<Component, {
+    onSynSelect: EventName<SynSelectEvent>;
+}>;
+export type { SynSelectEvent } from '@synergy-design-system/components';

package/dist/components/menu.js

@@ -0,0 +1,7 @@
+import {
+  SynMenu
+} from "../chunks/chunk.NSUMR2HG.js";
+export {
+  SynMenu
+};
+//# sourceMappingURL=menu.js.map

package/dist/components/menu.js.map

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

package/dist/components/popup.d.ts

@@ -0,0 +1,36 @@
+import Component from '@synergy-design-system/components/components/popup/popup.component.js';
+import { type EventName } from '@lit/react';
+import type { SynRepositionEvent } from '@synergy-design-system/components';
+/**
+ * @summary Popup is a utility that lets you declaratively anchor "popup" containers to another element.
+ * @documentation https://synergy.style/components/popup
+ * @status stable
+ * @since 2.0
+ *
+ * @event syn-reposition - Emitted when the popup is repositioned. This event can fire a lot, so avoid putting expensive
+ *  operations in your listener or consider debouncing it.
+ *
+ * @slot - The popup's content.
+ * @slot anchor - The element the popup will be anchored to. If the anchor lives outside of the popup, you can use the
+ *  `anchor` attribute or property instead.
+ *
+ * @csspart arrow - The arrow's container. Avoid setting `top|bottom|left|right` properties, as these values are
+ *  assigned dynamically as the popup moves. This is most useful for applying a background color to match the popup, and
+ *  maybe a border or box shadow.
+ * @csspart popup - The popup's container. Useful for setting a background color, box shadow, etc.
+ * @csspart hover-bridge - The hover bridge element. Only available when the `hover-bridge` option is enabled.
+ *
+ * @cssproperty [--arrow-size=6px] - The size of the arrow. Note that an arrow won't be shown unless the `arrow`
+ *  attribute is used.
+ * @cssproperty [--arrow-color=var(--syn-color-neutral-0)] - The color of the arrow.
+ * @cssproperty [--auto-size-available-width] - A read-only custom property that determines the amount of width the
+ *  popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only
+ *  available when using `auto-size`.
+ * @cssproperty [--auto-size-available-height] - A read-only custom property that determines the amount of height the
+ *  popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only
+ *  available when using `auto-size`.
+ */
+export declare const SynPopup: import("@lit/react").ReactWebComponent<Component, {
+    onSynReposition: EventName<SynRepositionEvent>;
+}>;
+export type { SynRepositionEvent } from '@synergy-design-system/components';

package/dist/components/popup.js

@@ -0,0 +1,7 @@
+import {
+  SynPopup
+} from "../chunks/chunk.UJGZNEKT.js";
+export {
+  SynPopup
+};
+//# sourceMappingURL=popup.js.map

package/dist/components/popup.js.map

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

package/dist/index.d.ts

@@ -3,12 +3,17 @@ export { SynButtonGroup } from './components/button-group.js';
 export { SynCheckbox } from './components/checkbox.js';
 export { SynDivider } from './components/divider.js';
 export { SynDrawer } from './components/drawer.js';
+export { SynDropdown } from './components/dropdown.js';
 export { SynHeader } from './components/header.js';
 export { SynIcon } from './components/icon.js';
 export { SynIconButton } from './components/icon-button.js';
 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 { SynOptgroup } from './components/optgroup.js';
 export { SynOption } from './components/option.js';
+export { SynPopup } from './components/popup.js';
 export { SynRadio } from './components/radio.js';
 export { SynRadioButton } from './components/radio-button.js';
 export { SynRadioGroup } from './components/radio-group.js';

package/dist/index.js

@@ -1,3 +1,18 @@
+import {
+  SynPopup
+} from "./chunks/chunk.UJGZNEKT.js";
+import {
+  SynRadioButton
+} from "./chunks/chunk.QBD4EIK5.js";
+import {
+  SynRadioGroup
+} from "./chunks/chunk.PCXGVEBP.js";
+import {
+  SynRadio
+} from "./chunks/chunk.AFCMSVBY.js";
+import {
+  SynSelect
+} from "./chunks/chunk.FB24BPQZ.js";
 import {
   SynSwitch
 } from "./chunks/chunk.7IZW5FRR.js";
@@ -7,30 +22,30 @@ import {
 import {
   SynTextarea
 } from "./chunks/chunk.4YY6TGIA.js";
+import {
+  SynIconButton
+} from "./chunks/chunk.W4YO4ERO.js";
 import {
   SynIcon
 } from "./chunks/chunk.6CO3KAZG.js";
 import {
   SynInput
 } from "./chunks/chunk.N6QQSQTB.js";
+import {
+  SynMenuItem
+} from "./chunks/chunk.KLI3DNUO.js";
+import {
+  SynMenuLabel
+} from "./chunks/chunk.EOLGRN43.js";
+import {
+  SynMenu
+} from "./chunks/chunk.NSUMR2HG.js";
 import {
   SynOptgroup
 } from "./chunks/chunk.DLAIDGSD.js";
 import {
   SynOption
 } from "./chunks/chunk.CJKK63W2.js";
-import {
-  SynRadioButton
-} from "./chunks/chunk.QBD4EIK5.js";
-import {
-  SynRadioGroup
-} from "./chunks/chunk.PCXGVEBP.js";
-import {
-  SynRadio
-} from "./chunks/chunk.AFCMSVBY.js";
-import {
-  SynSelect
-} from "./chunks/chunk.FB24BPQZ.js";
 import {
   SynButtonGroup
 } from "./chunks/chunk.6OTEQXZW.js";
@@ -46,24 +61,29 @@ import {
 import {
   SynDrawer
 } from "./chunks/chunk.BQ62A32K.js";
+import {
+  SynDropdown
+} from "./chunks/chunk.E3427YBK.js";
 import {
   SynHeader
 } from "./chunks/chunk.ODUBD6GC.js";
-import {
-  SynIconButton
-} from "./chunks/chunk.W4YO4ERO.js";
 export {
   SynButton,
   SynButtonGroup,
   SynCheckbox,
   SynDivider,
   SynDrawer,
+  SynDropdown,
   SynHeader,
   SynIcon,
   SynIconButton,
   SynInput,
+  SynMenu,
+  SynMenuItem,
+  SynMenuLabel,
   SynOptgroup,
   SynOption,
+  SynPopup,
   SynRadio,
   SynRadioButton,
   SynRadioGroup,

package/package.json

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