@synergy-design-system/react 2.24.1 → 2.25.0

package/dist/chunks/{chunk.5DPOSVQL.js → chunk.GOWH2TMV.js}

@@ -20,4 +20,4 @@ var SynDetails = createComponent({
 export {
   SynDetails
 };
-//# sourceMappingURL=chunk.5DPOSVQL.js.map
+//# sourceMappingURL=chunk.GOWH2TMV.js.map

package/dist/chunks/{chunk.5DPOSVQL.js.map → chunk.GOWH2TMV.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/details.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/details/details.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-details';\nComponent.define('syn-details');\n\n/**\n * @summary Details show a brief summary and expand to show additional content.\n * @documentation https://synergy.style/components/details\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon\n *\n * @slot - The details' main content.\n * @slot summary - The details' summary. Alternatively, you can use the `summary` attribute.\n * @slot expand-icon - Optional expand icon to use instead of the default. Works best with `<syn-icon>`.\n * @slot collapse-icon - Optional collapse icon to use instead of the default. Works best with `<syn-icon>`.\n *\n * @event syn-show - Emitted when the details opens.\n * @event syn-after-show - Emitted after the details opens and all animations are complete.\n * @event syn-hide - Emitted when the details closes.\n * @event syn-after-hide - Emitted after the details closes and all animations are complete.\n *\n * @csspart base - The component's base wrapper.\n * @csspart header - The header that wraps both the summary and the expand/collapse icon.\n * @csspart summary - The container that wraps the summary.\n * @csspart summary-icon - The container that wraps the expand/collapse icons.\n * @csspart content - The details content.\n *\n * @animation details.show - The animation to use when showing details. You can use `height: auto` with this animation.\n * @animation details.hide - The animation to use when hiding details. You can use `height: auto` with this animation.\n */\nexport const SynDetails = createComponent({\n  displayName: 'SynDetails',\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,aAAa;AA6BvB,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/details/details.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-details';\nComponent.define('syn-details');\n\n/**\n * @summary Details show a brief summary and expand to show additional content.\n * @documentation https://synergy.style/components/details\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon\n *\n * @slot - The details' main content.\n * @slot summary - The details' summary. Alternatively, you can use the `summary` attribute.\n * @slot expand-icon - Optional expand icon to use instead of the default. Works best with `<syn-icon>`.\n * @slot collapse-icon - Optional collapse icon to use instead of the default. Works best with `<syn-icon>`.\n *\n * @event syn-show - Emitted when the details opens.\n * @event syn-after-show - Emitted after the details opens and all animations are complete.\n * @event syn-hide - Emitted when the details closes.\n * @event syn-after-hide - Emitted after the details closes and all animations are complete.\n *\n * @csspart base - The component's base wrapper.\n * @csspart header - The header that wraps both the summary and the expand/collapse icon.\n * @csspart summary - The container that wraps the summary.\n * @csspart summary-icon - The container that wraps the expand/collapse icons.\n * @csspart content - The details content.\n * @csspart body - The container that wraps the details content.\n *\n * @animation details.show - The animation to use when showing details. You can use `height: auto` with this animation.\n * @animation details.hide - The animation to use when hiding details. You can use `height: auto` with this animation.\n */\nexport const SynDetails = createComponent({\n  displayName: 'SynDetails',\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,aAAa;AA8BvB,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/details.d.ts

@@ -27,6 +27,7 @@ import type { SynAfterHideEvent } from '@synergy-design-system/components';
  * @csspart summary - The container that wraps the summary.
  * @csspart summary-icon - The container that wraps the expand/collapse icons.
  * @csspart content - The details content.
+ * @csspart body - The container that wraps the details content.
  *
  * @animation details.show - The animation to use when showing details. You can use `height: auto` with this animation.
  * @animation details.hide - The animation to use when hiding details. You can use `height: auto` with this animation.

package/dist/components/details.js

@@ -1,6 +1,6 @@
 import {
   SynDetails
-} from "../chunks/chunk.5DPOSVQL.js";
+} from "../chunks/chunk.GOWH2TMV.js";
 export {
   SynDetails
 };

package/dist/index.js

@@ -102,7 +102,7 @@ import {
 } from "./chunks/chunk.XU36FQGG.js";
 import {
   SynDetails
-} from "./chunks/chunk.5DPOSVQL.js";
+} from "./chunks/chunk.GOWH2TMV.js";
 import {
   SynDialog
 } from "./chunks/chunk.IRNJ3B46.js";

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

@@ -347,6 +347,7 @@ export type SynCustomElement<SynElement extends HTMLElement, Events extends SynE
  * @csspart summary - The container that wraps the summary.
  * @csspart summary-icon - The container that wraps the expand/collapse icons.
  * @csspart content - The details content.
+ * @csspart body - The container that wraps the details content.
  *
  * @animation details.show - The animation to use when showing details. You can use `height: auto` with this animation.
  * @animation details.hide - The animation to use when hiding details. You can use `height: auto` with this animation.
@@ -1853,6 +1854,7 @@ declare module 'react' {
              * @csspart summary - The container that wraps the summary.
              * @csspart summary-icon - The container that wraps the expand/collapse icons.
              * @csspart content - The details content.
+             * @csspart body - The container that wraps the details content.
              *
              * @animation details.show - The animation to use when showing details. You can use `height: auto` with this animation.
              * @animation details.hide - The animation to use when hiding details. You can use `height: auto` with this animation.

package/package.json

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