@synergy-design-system/react 2.45.2 → 2.46.0

package/dist/chunks/{chunk.2B5NFH4D.js → chunk.PACGWWN3.js}

@@ -20,4 +20,4 @@ var SynDetails = createComponent({
 export {
   SynDetails
 };
-//# sourceMappingURL=chunk.2B5NFH4D.js.map
+//# sourceMappingURL=chunk.PACGWWN3.js.map

package/dist/chunks/{chunk.2B5NFH4D.js.map → chunk.PACGWWN3.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-design-system.github.io/?path=/docs/components-syn-details--docs\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;",
+  "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-design-system.github.io/?path=/docs/components-syn-details--docs\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 *\n * @cssproperty --syn-details-open-rotation - The rotation angle of the summary icon when the details is open.\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;AAgCvB,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

@@ -31,6 +31,8 @@ import type { SynAfterHideEvent } from '@synergy-design-system/components';
  *
  * @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.
+ *
+ * @cssproperty --syn-details-open-rotation - The rotation angle of the summary icon when the details is open.
  */
 export declare const SynDetails: import("@lit/react").ReactWebComponent<Component, {
     onSynShow: EventName<SynShowEvent>;

package/dist/components/details.js

@@ -1,6 +1,6 @@
 import {
   SynDetails
-} from "../chunks/chunk.2B5NFH4D.js";
+} from "../chunks/chunk.PACGWWN3.js";
 export {
   SynDetails
 };

package/dist/index.js

@@ -102,7 +102,7 @@ import {
 } from "./chunks/chunk.S7IA5L2L.js";
 import {
   SynDetails
-} from "./chunks/chunk.2B5NFH4D.js";
+} from "./chunks/chunk.PACGWWN3.js";
 import {
   SynDialog
 } from "./chunks/chunk.77N23N6V.js";

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

@@ -354,6 +354,8 @@ export type SynCustomElement<SynElement extends HTMLElement, Events extends SynE
  *
  * @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.
+ *
+ * @cssproperty --syn-details-open-rotation - The rotation angle of the summary icon when the details is open.
  */ export type SynDetailsJSXElement = SynCustomElement<SynDetails, [
     [
         'syn-show',
@@ -1886,6 +1888,8 @@ declare module 'react' {
              *
              * @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.
+             *
+             * @cssproperty --syn-details-open-rotation - The rotation angle of the summary icon when the details is open.
              */ 'syn-details': SynDetailsJSXElement;
             /**
              * @summary Dialogs, sometimes called "modals", appear above the page and require the user's immediate attention.

package/package.json

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