@synergy-design-system/components 2.2.1 → 2.3.0

package/dist/custom-elements.json

@@ -2,6 +2,148 @@
   "schemaVersion": "1.0.0",
   "readme": "",
   "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "components/accordion/accordion.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SynAccordion",
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The accordion's main content. Must be `<syn-details />` elements.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "detailsInDefaultSlot",
+              "type": {
+                "text": "SynDetails[]"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "closeOthers",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates whether or not multiple `<syn-detail>` elements can be open at the same time.",
+              "attribute": "close-others"
+            },
+            {
+              "kind": "field",
+              "name": "contained",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws the accordion and the slotted `<syn-details>` as contained elements.",
+              "attribute": "contained",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "description": "The size that should be applied to all slotted `<syn-details>` elements",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "adjustDetailsSize",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "adjustDetailsContained",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleSizeChange"
+            },
+            {
+              "kind": "method",
+              "name": "handleContainedChange"
+            },
+            {
+              "kind": "method",
+              "name": "handleSlotChange"
+            },
+            {
+              "kind": "field",
+              "name": "handleAccordionShow",
+              "privacy": "private"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "close-others",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates whether or not multiple `<syn-detail>` elements can be open at the same time.",
+              "fieldName": "closeOthers"
+            },
+            {
+              "name": "contained",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws the accordion and the slotted `<syn-details>` as contained elements.",
+              "fieldName": "contained"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "description": "The size that should be applied to all slotted `<syn-details>` elements",
+              "fieldName": "size"
+            }
+          ],
+          "superclass": {
+            "name": "SynergyElement",
+            "module": "/src/internal/synergy-element.js"
+          },
+          "summary": "Accordions provide the ability to group a list of `<syn-details>`.",
+          "tagNameWithoutPrefix": "accordion",
+          "tagName": "syn-accordion",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Accordions provide the ability to group a list of `<syn-details>`.\n *\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-accordion--docs\n * @status stable\n * @since 1.23.0\n *\n * @slot - The accordion's main content. Must be `<syn-details />` elements.\n *\n * @csspart base - The component's base wrapper.\n */",
+          "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-accordion--docs",
+          "status": "stable",
+          "since": "1.23.0"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SynAccordion",
+            "module": "components/accordion/accordion.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/alert/alert.js",
@@ -1984,6 +2126,310 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/details/details.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SynDetails",
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            },
+            {
+              "description": "The header that wraps both the summary and the expand/collapse icon.",
+              "name": "header"
+            },
+            {
+              "description": "The container that wraps the summary.",
+              "name": "summary"
+            },
+            {
+              "description": "The container that wraps the expand/collapse icons.",
+              "name": "summary-icon"
+            },
+            {
+              "description": "The details content.",
+              "name": "content"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The details' main content.",
+              "name": ""
+            },
+            {
+              "description": "The details' summary. Alternatively, you can use the `summary` attribute.",
+              "name": "summary"
+            },
+            {
+              "description": "Optional expand icon to use instead of the default. Works best with `<syn-icon>`.",
+              "name": "expand-icon"
+            },
+            {
+              "description": "Optional collapse icon to use instead of the default. Works best with `<syn-icon>`.",
+              "name": "collapse-icon"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "dependencies",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{\n    'syn-icon': SynIcon\n  }"
+            },
+            {
+              "kind": "field",
+              "name": "localize",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new LocalizeController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "details",
+              "type": {
+                "text": "HTMLDetailsElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "header",
+              "type": {
+                "text": "HTMLElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "body",
+              "type": {
+                "text": "HTMLElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "expandIconSlot",
+              "type": {
+                "text": "HTMLSlotElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "detailsObserver",
+              "type": {
+                "text": "MutationObserver"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the details' open state.",
+              "attribute": "open",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "summary",
+              "type": {
+                "text": "string"
+              },
+              "description": "The summary to show in the header. If you need to display HTML, use the `summary` slot instead.",
+              "attribute": "summary"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the details so it can't be toggled.",
+              "attribute": "disabled",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "contained",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws the details as contained element.",
+              "attribute": "contained",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "description": "The details's size.",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "handleSummaryClick",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleSummaryKeyDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleOpenChange"
+            },
+            {
+              "kind": "method",
+              "name": "show",
+              "description": "Shows the details."
+            },
+            {
+              "kind": "method",
+              "name": "hide",
+              "description": "Hides the details"
+            }
+          ],
+          "events": [
+            {
+              "description": "Emitted when the details opens.",
+              "name": "syn-show",
+              "reactName": "onSynShow",
+              "eventName": "SynShowEvent"
+            },
+            {
+              "description": "Emitted after the details opens and all animations are complete.",
+              "name": "syn-after-show",
+              "reactName": "onSynAfterShow",
+              "eventName": "SynAfterShowEvent"
+            },
+            {
+              "description": "Emitted when the details closes.",
+              "name": "syn-hide",
+              "reactName": "onSynHide",
+              "eventName": "SynHideEvent"
+            },
+            {
+              "description": "Emitted after the details closes and all animations are complete.",
+              "name": "syn-after-hide",
+              "reactName": "onSynAfterHide",
+              "eventName": "SynAfterHideEvent"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the details' open state.",
+              "fieldName": "open"
+            },
+            {
+              "name": "summary",
+              "type": {
+                "text": "string"
+              },
+              "description": "The summary to show in the header. If you need to display HTML, use the `summary` slot instead.",
+              "fieldName": "summary"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the details so it can't be toggled.",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "contained",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws the details as contained element.",
+              "fieldName": "contained"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "description": "The details's size.",
+              "fieldName": "size"
+            }
+          ],
+          "superclass": {
+            "name": "SynergyElement",
+            "module": "/src/internal/synergy-element.js"
+          },
+          "summary": "Details show a brief summary and expand to show additional content.",
+          "tagNameWithoutPrefix": "details",
+          "tagName": "syn-details",
+          "customElement": true,
+          "jsDoc": "/**\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 */",
+          "documentation": "https://synergy.style/components/details",
+          "status": "stable",
+          "since": "2.0",
+          "dependencies": [
+            "syn-icon"
+          ],
+          "animations": [
+            {
+              "name": "details.show",
+              "description": "The animation to use when showing details. You can use `height: auto` with this animation."
+            },
+            {
+              "name": "details.hide",
+              "description": "The animation to use when hiding details. You can use `height: auto` with this animation."
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SynDetails",
+            "module": "components/details/details.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/dialog/dialog.js",
@@ -12116,7 +12562,7 @@
   "package": {
     "name": "@synergy-design-system/components",
     "description": "",
-    "version": "2.2.1",
+    "version": "2.3.0",
     "author": {
       "name": "SICK Global UX Foundation",
       "url": "https://www.sick.com"

package/dist/styles/fouc.css

@@ -7,7 +7,9 @@
  * All changes applied will get lost!
  * To recreate it, please use "pnpm build"!
  */
+syn-accordion:not(:defined),
 syn-breadcrumb:not(:defined),
+syn-details:not(:defined),
 syn-divider:not(:defined),
 syn-header:not(:defined),
 syn-menu:not(:defined),

package/dist/styles/index.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/components version 2.2.1
+ * @synergy-design-system/components version 2.3.0
  * SICK Global UX Foundation
  * 
  * This file is created automatically in the build process!
@@ -15,7 +15,9 @@
  * All changes applied will get lost!
  * To recreate it, please use "pnpm build"!
  */
+syn-accordion:not(:defined),
 syn-breadcrumb:not(:defined),
+syn-details:not(:defined),
 syn-divider:not(:defined),
 syn-header:not(:defined),
 syn-menu:not(:defined),

package/dist/synergy.d.ts

@@ -1,3 +1,4 @@
+export { default as SynAccordion } from './components/accordion/accordion.js';
 export { default as SynAlert } from './components/alert/alert.js';
 export { default as SynBadge } from './components/badge/badge.js';
 export { default as SynBreadcrumbItem } from './components/breadcrumb-item/breadcrumb-item.js';
@@ -6,6 +7,7 @@ export { default as SynButtonGroup } from './components/button-group/button-grou
 export { default as SynButton } from './components/button/button.js';
 export { default as SynCard } from './components/card/card.js';
 export { default as SynCheckbox } from './components/checkbox/checkbox.js';
+export { default as SynDetails } from './components/details/details.js';
 export { default as SynDialog } from './components/dialog/dialog.js';
 export { default as SynDivider } from './components/divider/divider.js';
 export { default as SynDrawer } from './components/drawer/drawer.js';