@synergy-design-system/react 2.40.0 → 2.40.1

package/dist/chunks/{chunk.74QBKUQH.js → chunk.5GCIGA47.js}

@@ -18,4 +18,4 @@ var SynTabGroup = createComponent({
 export {
   SynTabGroup
 };
-//# sourceMappingURL=chunk.74QBKUQH.js.map
+//# sourceMappingURL=chunk.5GCIGA47.js.map

package/dist/chunks/{chunk.74QBKUQH.js.map → chunk.5GCIGA47.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/tab-group.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/tab-group/tab-group.component.js';\n\nimport { type EventName } from '@lit/react';\nimport type { SynTabShowEvent } from '@synergy-design-system/components';\nimport type { SynTabHideEvent } from '@synergy-design-system/components';\n\nconst tagName = 'syn-tab-group';\nComponent.define('syn-tab-group');\n\n/**\n * @summary Tab groups organize content into a container that shows one section at a time.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tab-group--docs\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon-button\n *\n * @slot - Used for grouping tab panels in the tab group. Must be `<syn-tab-panel>` elements.\n * @slot nav - Used for grouping tabs in the tab group. Must be `<syn-tab>` elements.\n *\n * @event {{ name: String }} syn-tab-show - Emitted when a tab is shown. The payload of the event returns the \"panel\" attribute of the shown tab.\n * @event {{ name: String }} syn-tab-hide - Emitted when a tab is hidden. The payload of the event returns the \"panel\" attribute of the hidden tab.\n *\n * @csspart base - The component's base wrapper.\n * @csspart nav - The tab group's navigation container where tabs are slotted in.\n * @csspart tabs - The container that wraps the tabs.\n * @csspart active-tab-indicator - The line that highlights the currently selected tab.\n * @csspart body - The tab group's body where tab panels are slotted in.\n * @csspart scroll-button - The previous/next scroll buttons that show when tabs are scrollable, an `<syn-icon-button>`.\n * @csspart scroll-button--start - The starting scroll button.\n * @csspart scroll-button--end - The ending scroll button.\n * @csspart scroll-button__base - The scroll button's exported `base` part.\n *\n * @cssproperty --indicator-color - The color of the active tab indicator.\n * @cssproperty --indicator-width - The width of the active tab indicator.\n * @cssproperty --track-color - The color of the indicator's track (the line that separates tabs from panels).\n * @cssproperty --track-width - The width of the indicator's track (the line that separates tabs from panels).\n */\nexport const SynTabGroup = createComponent({\n  displayName: 'SynTabGroup',\n  elementClass: Component,\n  events: {\n    onSynTabShow: 'syn-tab-show' as EventName<SynTabShowEvent>,\n    onSynTabHide: 'syn-tab-hide' as EventName<SynTabHideEvent>,\n  },\n  react: React,\n  tagName,\n});\n\nexport type { SynTabShowEvent } from '@synergy-design-system/components';\nexport type { SynTabHideEvent } from '@synergy-design-system/components';\n"],
+  "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/tab-group/tab-group.component.js';\n\nimport { type EventName } from '@lit/react';\nimport type { SynTabShowEvent } from '@synergy-design-system/components';\nimport type { SynTabHideEvent } from '@synergy-design-system/components';\n\nconst tagName = 'syn-tab-group';\nComponent.define('syn-tab-group');\n\n/**\n * @summary Tab groups organize content into a container that shows one section at a time.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tab-group--docs\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon-button\n *\n * @slot - Used for grouping tab panels in the tab group. Must be `<syn-tab-panel>` elements.\n * @slot nav - Used for grouping tabs in the tab group. Must be `<syn-tab>` elements.\n *\n * @event {{ name: String }} syn-tab-show - Emitted when a tab is shown. The payload of the event returns the \"panel\" attribute of the shown tab.\n * @event {{ name: String }} syn-tab-hide - Emitted when a tab is hidden. The payload of the event returns the \"panel\" attribute of the hidden tab.\n *\n * @csspart base - The component's base wrapper.\n * @csspart nav - The tab group's navigation container where tabs are slotted in.\n * @csspart tabs - The container that wraps the tabs.\n * @csspart active-tab-indicator - The line that highlights the currently selected tab.\n * @csspart body - The tab group's body where tab panels are slotted in.\n * @csspart scroll-button - The previous/next scroll buttons that show when tabs are scrollable, an `<syn-icon-button>`.\n * @csspart scroll-button--start - The starting scroll button.\n * @csspart scroll-button--end - The ending scroll button.\n * @csspart scroll-button__base - The scroll button's exported `base` part.\n *\n * @cssproperty --indicator-color - The color of the active tab indicator.\n * @cssproperty --track-color - The color of the indicator's track (the line that separates tabs from panels).\n * @cssproperty --track-width - The width of the indicator's track (the line that separates tabs from panels).\n * @cssproperty --indicator-width - The width of the active tab indicator.\n */\nexport const SynTabGroup = createComponent({\n  displayName: 'SynTabGroup',\n  elementClass: Component,\n  events: {\n    onSynTabShow: 'syn-tab-show' as EventName<SynTabShowEvent>,\n    onSynTabHide: 'syn-tab-hide' as EventName<SynTabHideEvent>,\n  },\n  react: React,\n  tagName,\n});\n\nexport type { SynTabShowEvent } from '@synergy-design-system/components';\nexport type { SynTabHideEvent } from '@synergy-design-system/components';\n"],
   "mappings": ";AAKA,YAAY,WAAW;AACvB,SAAS,uBAAuB;AAChC,OAAO,eAAe;AAMtB,IAAM,UAAU;AAChB,UAAU,OAAO,eAAe;AA+BzB,IAAM,cAAc,gBAAgB;AAAA,EACzC,aAAa;AAAA,EACb,cAAc;AAAA,EACd,QAAQ;AAAA,IACN,cAAc;AAAA,IACd,cAAc;AAAA,EAChB;AAAA,EACA,OAAO;AAAA,EACP;AACF,CAAC;",
   "names": []
 }

package/dist/chunks/{chunk.NR7V6QX5.js → chunk.BTEVTUXU.js}

@@ -15,4 +15,4 @@ var SynMenuLabel = createComponent({
 export {
   SynMenuLabel
 };
-//# sourceMappingURL=chunk.NR7V6QX5.js.map
+//# sourceMappingURL=chunk.BTEVTUXU.js.map

package/dist/chunks/{chunk.NR7V6QX5.js.map → chunk.BTEVTUXU.js.map}

@@ -1,7 +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-design-system.github.io/?path=/docs/components-syn-menu-label--docs\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  react: React,\n  tagName,\n});\n"],
+  "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-design-system.github.io/?path=/docs/components-syn-menu-label--docs\n * @status stable\n * @since 2.0\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 * @dependency syn-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  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,CAAC;AAAA,EACT,OAAO;AAAA,EACP;AACF,CAAC;",
   "names": []
 }

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

@@ -5,14 +5,14 @@ import Component from '@synergy-design-system/components/components/menu-label/m
  * @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
  *
+ * @dependency syn-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

@@ -1,6 +1,6 @@
 import {
   SynMenuLabel
-} from "../chunks/chunk.NR7V6QX5.js";
+} from "../chunks/chunk.BTEVTUXU.js";
 export {
   SynMenuLabel
 };

package/dist/components/tab-group.d.ts

@@ -27,9 +27,9 @@ import type { SynTabHideEvent } from '@synergy-design-system/components';
  * @csspart scroll-button__base - The scroll button's exported `base` part.
  *
  * @cssproperty --indicator-color - The color of the active tab indicator.
- * @cssproperty --indicator-width - The width of the active tab indicator.
  * @cssproperty --track-color - The color of the indicator's track (the line that separates tabs from panels).
  * @cssproperty --track-width - The width of the indicator's track (the line that separates tabs from panels).
+ * @cssproperty --indicator-width - The width of the active tab indicator.
  */
 export declare const SynTabGroup: import("@lit/react").ReactWebComponent<Component, {
     onSynTabShow: EventName<SynTabShowEvent>;

package/dist/components/tab-group.js

@@ -1,6 +1,6 @@
 import {
   SynTabGroup
-} from "../chunks/chunk.74QBKUQH.js";
+} from "../chunks/chunk.5GCIGA47.js";
 export {
   SynTabGroup
 };

package/dist/index.js

@@ -1,9 +1,6 @@
-import {
-  SynSwitch
-} from "./chunks/chunk.3AUZZVYZ.js";
 import {
   SynTabGroup
-} from "./chunks/chunk.74QBKUQH.js";
+} from "./chunks/chunk.5GCIGA47.js";
 import {
   SynTabPanel
 } from "./chunks/chunk.2AWQB3AJ.js";
@@ -22,9 +19,6 @@ import {
 import {
   SynValidate
 } from "./chunks/chunk.EL2F4LIK.js";
-import {
-  SynRadioButton
-} from "./chunks/chunk.2LDP5CAQ.js";
 import {
   SynRadioGroup
 } from "./chunks/chunk.5CIFYMXU.js";
@@ -47,8 +41,8 @@ import {
   SynSpinner
 } from "./chunks/chunk.SOARUKQP.js";
 import {
-  SynMenu
-} from "./chunks/chunk.4IVJHGWM.js";
+  SynSwitch
+} from "./chunks/chunk.3AUZZVYZ.js";
 import {
   SynNavItem
 } from "./chunks/chunk.EFKHCKYH.js";
@@ -71,8 +65,8 @@ import {
   SynProgressRing
 } from "./chunks/chunk.ADSD2U7G.js";
 import {
-  SynDropdown
-} from "./chunks/chunk.AE6RZ4W2.js";
+  SynRadioButton
+} from "./chunks/chunk.2LDP5CAQ.js";
 import {
   SynFile
 } from "./chunks/chunk.IQB5SV6K.js";
@@ -93,10 +87,10 @@ import {
 } from "./chunks/chunk.TWK2UCJF.js";
 import {
   SynMenuLabel
-} from "./chunks/chunk.NR7V6QX5.js";
+} from "./chunks/chunk.BTEVTUXU.js";
 import {
-  SynButton
-} from "./chunks/chunk.TGSZHDUW.js";
+  SynMenu
+} from "./chunks/chunk.4IVJHGWM.js";
 import {
   SynCard
 } from "./chunks/chunk.OJAJTT5S.js";
@@ -118,6 +112,9 @@ import {
 import {
   SynDrawer
 } from "./chunks/chunk.RWOJEMSX.js";
+import {
+  SynDropdown
+} from "./chunks/chunk.AE6RZ4W2.js";
 import {
   SynAccordion
 } from "./chunks/chunk.2PS5VOXM.js";
@@ -136,6 +133,9 @@ import {
 import {
   SynButtonGroup
 } from "./chunks/chunk.HHPIABBV.js";
+import {
+  SynButton
+} from "./chunks/chunk.TGSZHDUW.js";
 export {
   SynAccordion,
   SynAlert,

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

@@ -842,14 +842,14 @@ export type SynCustomElement<SynElement extends HTMLElement, Events extends SynE
  * @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
  *
+ * @dependency syn-divider
+ *
  * @cssproperty --display-divider - Display property of the divider. Defaults to "block"
  */ export type SynMenuLabelJSXElement = SynCustomElement<SynMenuLabel, []>;
 /**
@@ -1498,9 +1498,9 @@ export type SynCustomElement<SynElement extends HTMLElement, Events extends SynE
  * @csspart scroll-button__base - The scroll button's exported `base` part.
  *
  * @cssproperty --indicator-color - The color of the active tab indicator.
- * @cssproperty --indicator-width - The width of the active tab indicator.
  * @cssproperty --track-color - The color of the indicator's track (the line that separates tabs from panels).
  * @cssproperty --track-width - The width of the indicator's track (the line that separates tabs from panels).
+ * @cssproperty --indicator-width - The width of the active tab indicator.
  */ export type SynTabGroupJSXElement = SynCustomElement<SynTabGroup, [
     ['syn-tab-show', SynTabShowEvent],
     ['syn-tab-hide', SynTabHideEvent]
@@ -2219,14 +2219,14 @@ declare module 'react' {
              * @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
              *
+             * @dependency syn-divider
+             *
              * @cssproperty --display-divider - Display property of the divider. Defaults to "block"
              */ 'syn-menu-label': SynMenuLabelJSXElement;
             /**
@@ -2730,9 +2730,9 @@ declare module 'react' {
              * @csspart scroll-button__base - The scroll button's exported `base` part.
              *
              * @cssproperty --indicator-color - The color of the active tab indicator.
-             * @cssproperty --indicator-width - The width of the active tab indicator.
              * @cssproperty --track-color - The color of the indicator's track (the line that separates tabs from panels).
              * @cssproperty --track-width - The width of the indicator's track (the line that separates tabs from panels).
+             * @cssproperty --indicator-width - The width of the active tab indicator.
              */ 'syn-tab-group': SynTabGroupJSXElement;
             /**
              * @summary Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.

package/package.json

@@ -5,7 +5,7 @@
   },
   "dependencies": {
     "@lit/react": "^1.0.7",
-    "@synergy-design-system/components": "^2.40.0"
+    "@synergy-design-system/components": "^2.40.1"
   },
   "description": "React wrappers for the Synergy Design System",
   "exports": {
@@ -43,12 +43,12 @@
     "directory": "packages/react"
   },
   "type": "module",
-  "version": "2.40.0",
+  "version": "2.40.1",
   "devDependencies": {
     "@types/react": "^19.1.8",
     "react": "^19.1.0"
   },
   "peerDependencies": {
-    "@synergy-design-system/tokens": "^2.22.0"
+    "@synergy-design-system/tokens": "^2.23.0"
   }
 }