@synergy-design-system/components 2.40.0 → 2.40.1

package/dist/custom-elements.json

@@ -144,6 +144,82 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/badge/badge.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SynBadge",
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The badge's content.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "localize",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new LocalizeController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'"
+              },
+              "default": "'primary'",
+              "description": "The badge's theme variant.",
+              "attribute": "variant",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "variant",
+              "type": {
+                "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'"
+              },
+              "default": "'primary'",
+              "description": "The badge's theme variant.",
+              "fieldName": "variant"
+            }
+          ],
+          "superclass": {
+            "name": "SynergyElement",
+            "module": "/src/internal/synergy-element.js"
+          },
+          "summary": "Badges are used to draw attention and display statuses or counts.",
+          "tagNameWithoutPrefix": "badge",
+          "tagName": "syn-badge",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Badges are used to draw attention and display statuses or counts.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-badge--docs\n * @status stable\n * @since 2.0\n *\n * @slot - The badge's content.\n *\n * @csspart base - The component's base wrapper.\n */",
+          "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-badge--docs",
+          "status": "stable",
+          "since": "2.0"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SynBadge",
+            "module": "components/badge/badge.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/alert/alert.js",
@@ -586,65 +662,155 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/badge/badge.js",
+      "path": "components/breadcrumb-item/breadcrumb-item.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SynBadge",
+          "name": "SynBreadcrumbItem",
           "cssParts": [
             {
               "description": "The component's base wrapper.",
               "name": "base"
+            },
+            {
+              "description": "The breadcrumb item's label.",
+              "name": "label"
+            },
+            {
+              "description": "The container that wraps the prefix.",
+              "name": "prefix"
+            },
+            {
+              "description": "The container that wraps the suffix.",
+              "name": "suffix"
+            },
+            {
+              "description": "The container that wraps the separator.",
+              "name": "separator"
             }
           ],
           "slots": [
             {
-              "description": "The badge's content.",
+              "description": "The breadcrumb item's label.",
               "name": ""
+            },
+            {
+              "description": "An optional prefix, usually an icon or icon button.",
+              "name": "prefix"
+            },
+            {
+              "description": "An optional suffix, usually an icon or icon button.",
+              "name": "suffix"
+            },
+            {
+              "description": "The separator to use for the breadcrumb item. This will only change the separator for this item. If you want to change it for all items in the group, set the separator on `<syn-breadcrumb>` instead.",
+              "name": "separator"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "localize",
+              "name": "hasSlotController",
               "privacy": "private",
               "readonly": true,
-              "default": "new LocalizeController(this)"
+              "default": "new HasSlotController(this, 'prefix', 'suffix')"
             },
             {
               "kind": "field",
-              "name": "variant",
+              "name": "defaultSlot",
               "type": {
-                "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'"
+                "text": "HTMLSlotElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "renderType",
+              "type": {
+                "text": "'button' | 'link' | 'dropdown'"
               },
-              "default": "'primary'",
-              "description": "The badge's theme variant.",
-              "attribute": "variant",
-              "reflects": true
+              "privacy": "private",
+              "default": "'button'"
+            },
+            {
+              "kind": "field",
+              "name": "href",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered\ninternally. When unset, a button will be rendered instead.",
+              "attribute": "href"
+            },
+            {
+              "kind": "field",
+              "name": "target",
+              "type": {
+                "text": "'_blank' | '_parent' | '_self' | '_top' | undefined"
+              },
+              "description": "Tells the browser where to open the link. Only used when `href` is set.",
+              "attribute": "target"
+            },
+            {
+              "kind": "field",
+              "name": "rel",
+              "type": {
+                "text": "string"
+              },
+              "default": "'noreferrer noopener'",
+              "description": "The `rel` attribute to use on the link. Only used when `href` is set.",
+              "attribute": "rel"
+            },
+            {
+              "kind": "method",
+              "name": "setRenderType",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "hrefChanged"
+            },
+            {
+              "kind": "method",
+              "name": "handleSlotChange"
             }
           ],
           "attributes": [
             {
-              "name": "variant",
+              "name": "href",
               "type": {
-                "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'"
+                "text": "string | undefined"
               },
-              "default": "'primary'",
-              "description": "The badge's theme variant.",
-              "fieldName": "variant"
+              "description": "Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered\ninternally. When unset, a button will be rendered instead.",
+              "fieldName": "href"
+            },
+            {
+              "name": "target",
+              "type": {
+                "text": "'_blank' | '_parent' | '_self' | '_top' | undefined"
+              },
+              "description": "Tells the browser where to open the link. Only used when `href` is set.",
+              "fieldName": "target"
+            },
+            {
+              "name": "rel",
+              "type": {
+                "text": "string"
+              },
+              "default": "'noreferrer noopener'",
+              "description": "The `rel` attribute to use on the link. Only used when `href` is set.",
+              "fieldName": "rel"
             }
           ],
           "superclass": {
             "name": "SynergyElement",
             "module": "/src/internal/synergy-element.js"
           },
-          "summary": "Badges are used to draw attention and display statuses or counts.",
-          "tagNameWithoutPrefix": "badge",
-          "tagName": "syn-badge",
+          "summary": "Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.",
+          "tagNameWithoutPrefix": "breadcrumb-item",
+          "tagName": "syn-breadcrumb-item",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Badges are used to draw attention and display statuses or counts.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-badge--docs\n * @status stable\n * @since 2.0\n *\n * @slot - The badge's content.\n *\n * @csspart base - The component's base wrapper.\n */",
-          "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-badge--docs",
+          "jsDoc": "/**\n * @summary Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-breadcrumb-item--docs\n * @status stable\n * @since 2.0\n *\n * @slot - The breadcrumb item's label.\n * @slot prefix - An optional prefix, usually an icon or icon button.\n * @slot suffix - An optional suffix, usually an icon or icon button.\n * @slot separator - The separator to use for the breadcrumb item. This will only change the separator for this item. If\n * you want to change it for all items in the group, set the separator on `<syn-breadcrumb>` instead.\n *\n * @csspart base - The component's base wrapper.\n * @csspart label - The breadcrumb item's label.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart suffix - The container that wraps the suffix.\n * @csspart separator - The container that wraps the separator.\n */",
+          "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-breadcrumb-item--docs",
           "status": "stable",
           "since": "2.0"
         }
@@ -654,8 +820,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SynBadge",
-            "module": "components/badge/badge.js"
+            "name": "SynBreadcrumbItem",
+            "module": "components/breadcrumb-item/breadcrumb-item.js"
           }
         }
       ]
@@ -1298,147 +1464,25 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/card/card.js",
+      "path": "components/button-group/button-group.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SynCard",
-          "cssProperties": [
-            {
-              "description": "The card's border color, including borders that occur inside the card.",
-              "name": "--border-color"
-            },
-            {
-              "description": "The border radius for the card's edges.",
-              "name": "--border-radius"
-            },
-            {
-              "description": "The width of the card's borders.",
-              "name": "--border-width"
-            },
-            {
-              "description": "The padding to use for the card's sections.",
-              "name": "--padding"
-            }
-          ],
+          "name": "SynButtonGroup",
           "cssParts": [
             {
               "description": "The component's base wrapper.",
               "name": "base"
-            },
-            {
-              "description": "The container that wraps the card's image.",
-              "name": "image"
-            },
-            {
-              "description": "The container that wraps the card's header.",
-              "name": "header"
-            },
-            {
-              "description": "The container that wraps the card's main content.",
-              "name": "body"
-            },
-            {
-              "description": "The container that wraps the card's footer.",
-              "name": "footer"
             }
           ],
           "slots": [
             {
-              "description": "The card's main content.",
+              "description": "One or more `<syn-button>` elements to display in the button group.",
               "name": ""
-            },
-            {
-              "description": "An optional header for the card.",
-              "name": "header"
-            },
-            {
-              "description": "An optional footer for the card.",
-              "name": "footer"
-            },
-            {
-              "description": "An optional image to render at the start of the card.",
-              "name": "image"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "hasSlotController",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new HasSlotController(this, 'footer', 'header', 'image')"
-            },
-            {
-              "kind": "field",
-              "name": "sharp",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Draws the card with sharp edges. Can be used e.g. when nesting multiple syn-cards to create hierarchy.",
-              "attribute": "sharp",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "sharp",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Draws the card with sharp edges. Can be used e.g. when nesting multiple syn-cards to create hierarchy.",
-              "fieldName": "sharp"
-            }
-          ],
-          "superclass": {
-            "name": "SynergyElement",
-            "module": "/src/internal/synergy-element.js"
-          },
-          "summary": "Cards can be used to group related subjects in a container.",
-          "tagNameWithoutPrefix": "card",
-          "tagName": "syn-card",
-          "customElement": true,
-          "jsDoc": "/**\n * @summary Cards can be used to group related subjects in a container.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-card--docs\n * @status stable\n * @since 2.0\n *\n * @slot - The card's main content.\n * @slot header - An optional header for the card.\n * @slot footer - An optional footer for the card.\n * @slot image - An optional image to render at the start of the card.\n *\n * @csspart base - The component's base wrapper.\n * @csspart image - The container that wraps the card's image.\n * @csspart header - The container that wraps the card's header.\n * @csspart body - The container that wraps the card's main content.\n * @csspart footer - The container that wraps the card's footer.\n *\n * @cssproperty --border-color - The card's border color, including borders that occur inside the card.\n * @cssproperty --border-radius - The border radius for the card's edges.\n * @cssproperty --border-width - The width of the card's borders.\n * @cssproperty --padding - The padding to use for the card's sections.\n */",
-          "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-card--docs",
-          "status": "stable",
-          "since": "2.0"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "SynCard",
-            "module": "components/card/card.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/button-group/button-group.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "SynButtonGroup",
-          "cssParts": [
-            {
-              "description": "The component's base wrapper.",
-              "name": "base"
-            }
-          ],
-          "slots": [
-            {
-              "description": "One or more `<syn-button>` elements to display in the button group.",
-              "name": ""
-            }
-          ],
-          "members": [
+            }
+          ],
+          "members": [
             {
               "kind": "field",
               "name": "defaultSlot",
@@ -1560,50 +1604,68 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/breadcrumb-item/breadcrumb-item.js",
+      "path": "components/card/card.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SynBreadcrumbItem",
+          "name": "SynCard",
+          "cssProperties": [
+            {
+              "description": "The card's border color, including borders that occur inside the card.",
+              "name": "--border-color"
+            },
+            {
+              "description": "The border radius for the card's edges.",
+              "name": "--border-radius"
+            },
+            {
+              "description": "The width of the card's borders.",
+              "name": "--border-width"
+            },
+            {
+              "description": "The padding to use for the card's sections.",
+              "name": "--padding"
+            }
+          ],
           "cssParts": [
             {
               "description": "The component's base wrapper.",
               "name": "base"
             },
             {
-              "description": "The breadcrumb item's label.",
-              "name": "label"
+              "description": "The container that wraps the card's image.",
+              "name": "image"
             },
             {
-              "description": "The container that wraps the prefix.",
-              "name": "prefix"
+              "description": "The container that wraps the card's header.",
+              "name": "header"
             },
             {
-              "description": "The container that wraps the suffix.",
-              "name": "suffix"
+              "description": "The container that wraps the card's main content.",
+              "name": "body"
             },
             {
-              "description": "The container that wraps the separator.",
-              "name": "separator"
+              "description": "The container that wraps the card's footer.",
+              "name": "footer"
             }
           ],
           "slots": [
             {
-              "description": "The breadcrumb item's label.",
+              "description": "The card's main content.",
               "name": ""
             },
             {
-              "description": "An optional prefix, usually an icon or icon button.",
-              "name": "prefix"
+              "description": "An optional header for the card.",
+              "name": "header"
             },
             {
-              "description": "An optional suffix, usually an icon or icon button.",
-              "name": "suffix"
+              "description": "An optional footer for the card.",
+              "name": "footer"
             },
             {
-              "description": "The separator to use for the breadcrumb item. This will only change the separator for this item. If you want to change it for all items in the group, set the separator on `<syn-breadcrumb>` instead.",
-              "name": "separator"
+              "description": "An optional image to render at the start of the card.",
+              "name": "image"
             }
           ],
           "members": [
@@ -1612,103 +1674,41 @@
               "name": "hasSlotController",
               "privacy": "private",
               "readonly": true,
-              "default": "new HasSlotController(this, 'prefix', 'suffix')"
-            },
-            {
-              "kind": "field",
-              "name": "defaultSlot",
-              "type": {
-                "text": "HTMLSlotElement"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "renderType",
-              "type": {
-                "text": "'button' | 'link' | 'dropdown'"
-              },
-              "privacy": "private",
-              "default": "'button'"
-            },
-            {
-              "kind": "field",
-              "name": "href",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered\ninternally. When unset, a button will be rendered instead.",
-              "attribute": "href"
-            },
-            {
-              "kind": "field",
-              "name": "target",
-              "type": {
-                "text": "'_blank' | '_parent' | '_self' | '_top' | undefined"
-              },
-              "description": "Tells the browser where to open the link. Only used when `href` is set.",
-              "attribute": "target"
+              "default": "new HasSlotController(this, 'footer', 'header', 'image')"
             },
             {
               "kind": "field",
-              "name": "rel",
+              "name": "sharp",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "'noreferrer noopener'",
-              "description": "The `rel` attribute to use on the link. Only used when `href` is set.",
-              "attribute": "rel"
-            },
-            {
-              "kind": "method",
-              "name": "setRenderType",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "hrefChanged"
-            },
-            {
-              "kind": "method",
-              "name": "handleSlotChange"
+              "default": "false",
+              "description": "Draws the card with sharp edges. Can be used e.g. when nesting multiple syn-cards to create hierarchy.",
+              "attribute": "sharp",
+              "reflects": true
             }
           ],
           "attributes": [
             {
-              "name": "href",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered\ninternally. When unset, a button will be rendered instead.",
-              "fieldName": "href"
-            },
-            {
-              "name": "target",
-              "type": {
-                "text": "'_blank' | '_parent' | '_self' | '_top' | undefined"
-              },
-              "description": "Tells the browser where to open the link. Only used when `href` is set.",
-              "fieldName": "target"
-            },
-            {
-              "name": "rel",
+              "name": "sharp",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "'noreferrer noopener'",
-              "description": "The `rel` attribute to use on the link. Only used when `href` is set.",
-              "fieldName": "rel"
+              "default": "false",
+              "description": "Draws the card with sharp edges. Can be used e.g. when nesting multiple syn-cards to create hierarchy.",
+              "fieldName": "sharp"
             }
           ],
           "superclass": {
             "name": "SynergyElement",
             "module": "/src/internal/synergy-element.js"
           },
-          "summary": "Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.",
-          "tagNameWithoutPrefix": "breadcrumb-item",
-          "tagName": "syn-breadcrumb-item",
+          "summary": "Cards can be used to group related subjects in a container.",
+          "tagNameWithoutPrefix": "card",
+          "tagName": "syn-card",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-breadcrumb-item--docs\n * @status stable\n * @since 2.0\n *\n * @slot - The breadcrumb item's label.\n * @slot prefix - An optional prefix, usually an icon or icon button.\n * @slot suffix - An optional suffix, usually an icon or icon button.\n * @slot separator - The separator to use for the breadcrumb item. This will only change the separator for this item. If\n * you want to change it for all items in the group, set the separator on `<syn-breadcrumb>` instead.\n *\n * @csspart base - The component's base wrapper.\n * @csspart label - The breadcrumb item's label.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart suffix - The container that wraps the suffix.\n * @csspart separator - The container that wraps the separator.\n */",
-          "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-breadcrumb-item--docs",
+          "jsDoc": "/**\n * @summary Cards can be used to group related subjects in a container.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-card--docs\n * @status stable\n * @since 2.0\n *\n * @slot - The card's main content.\n * @slot header - An optional header for the card.\n * @slot footer - An optional footer for the card.\n * @slot image - An optional image to render at the start of the card.\n *\n * @csspart base - The component's base wrapper.\n * @csspart image - The container that wraps the card's image.\n * @csspart header - The container that wraps the card's header.\n * @csspart body - The container that wraps the card's main content.\n * @csspart footer - The container that wraps the card's footer.\n *\n * @cssproperty --border-color - The card's border color, including borders that occur inside the card.\n * @cssproperty --border-radius - The border radius for the card's edges.\n * @cssproperty --border-width - The width of the card's borders.\n * @cssproperty --padding - The padding to use for the card's sections.\n */",
+          "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-card--docs",
           "status": "stable",
           "since": "2.0"
         }
@@ -1718,8 +1718,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SynBreadcrumbItem",
-            "module": "components/breadcrumb-item/breadcrumb-item.js"
+            "name": "SynCard",
+            "module": "components/card/card.js"
           }
         }
       ]
@@ -2193,54 +2193,98 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/details/details.js",
+      "path": "components/combobox/combobox.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SynDetails",
+          "name": "SynCombobox",
           "cssParts": [
             {
-              "description": "The component's base wrapper.",
-              "name": "base"
+              "description": "The form control that wraps the label, combobox, and help text.",
+              "name": "form-control"
             },
             {
-              "description": "The header that wraps both the summary and the expand/collapse icon.",
-              "name": "header"
+              "description": "The label's wrapper.",
+              "name": "form-control-label"
             },
             {
-              "description": "The container that wraps the summary.",
-              "name": "summary"
+              "description": "The combobox's wrapper.",
+              "name": "form-control-input"
             },
             {
-              "description": "The container that wraps the expand/collapse icons.",
-              "name": "summary-icon"
+              "description": "The help text's wrapper.",
+              "name": "form-control-help-text"
             },
             {
-              "description": "The details content.",
-              "name": "content"
+              "description": "The container the wraps the prefix, combobox, clear icon, and expand button.",
+              "name": "combobox"
             },
             {
-              "description": "The container that wraps the details content.",
-              "name": "body"
+              "description": "The container that wraps the prefix slot.",
+              "name": "prefix"
+            },
+            {
+              "description": "The container that wraps the suffix slot.",
+              "name": "suffix"
+            },
+            {
+              "description": "The element that displays the selected option's label, an `<input>` element.",
+              "name": "display-input"
+            },
+            {
+              "description": "The listbox container where the options are slotted and the filtered options list exists.",
+              "name": "listbox"
+            },
+            {
+              "description": "The container that wraps the filtered options.",
+              "name": "filtered-listbox"
+            },
+            {
+              "description": "The clear button.",
+              "name": "clear-button"
+            },
+            {
+              "description": "The container that wraps the expand icon.",
+              "name": "expand-icon"
+            },
+            {
+              "description": "The popup's exported `popup` part. Use this to target the tooltip's popup container.",
+              "name": "popup"
+            },
+            {
+              "description": "The container that wraps the \"no results\" message.",
+              "name": "no-results"
             }
           ],
           "slots": [
             {
-              "description": "The details' main content.",
+              "description": "The listbox options. Must be `<syn-option>` elements. You can use `<syn-optgroup>`'s to group items visually.",
               "name": ""
             },
             {
-              "description": "The details' summary. Alternatively, you can use the `summary` attribute.",
-              "name": "summary"
+              "description": "The combobox's label. Alternatively, you can use the `label` attribute.",
+              "name": "label"
             },
             {
-              "description": "Optional expand icon to use instead of the default. Works best with `<syn-icon>`.",
+              "description": "Used to prepend a presentational icon or similar element to the combobox.",
+              "name": "prefix"
+            },
+            {
+              "description": "Used to append a presentational icon or similar element to the combobox.",
+              "name": "suffix"
+            },
+            {
+              "description": "An icon to use in lieu of the default clear icon.",
+              "name": "clear-icon"
+            },
+            {
+              "description": "The icon to show when the control is expanded and collapsed. Rotates on open and close.",
               "name": "expand-icon"
             },
             {
-              "description": "Optional collapse icon to use instead of the default. Works best with `<syn-icon>`.",
-              "name": "collapse-icon"
+              "description": "Text that describes how to use the combobox. Alternatively, you can use the `help-text` attribute.",
+              "name": "help-text"
             }
           ],
           "members": [
@@ -2251,7 +2295,21 @@
                 "text": "object"
               },
               "static": true,
-              "default": "{ 'syn-icon': SynIcon }"
+              "default": "{ 'syn-icon': SynIcon, 'syn-popup': SynPopup, }"
+            },
+            {
+              "kind": "field",
+              "name": "formControlController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new FormControlController(this, { assumeInteractionOn: ['syn-blur', 'syn-input'], })"
+            },
+            {
+              "kind": "field",
+              "name": "hasSlotController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new HasSlotController(this, 'help-text', 'label')"
             },
             {
               "kind": "field",
@@ -2262,665 +2320,882 @@
             },
             {
               "kind": "field",
-              "name": "details",
+              "name": "closeWatcher",
               "type": {
-                "text": "HTMLDetailsElement"
-              }
+                "text": "CloseWatcher | null"
+              },
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "header",
+              "name": "lastOption",
               "type": {
-                "text": "HTMLElement"
-              }
+                "text": "SynOption | undefined"
+              },
+              "privacy": "private",
+              "description": "The last syn-option, that was selected by click or via keyboard navigation"
             },
             {
               "kind": "field",
-              "name": "body",
+              "name": "isOptionRendererTriggered",
               "type": {
-                "text": "HTMLElement"
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "isInitialized",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "popup",
+              "type": {
+                "text": "SynPopup"
               }
             },
             {
               "kind": "field",
-              "name": "expandIconSlot",
+              "name": "combobox",
               "type": {
                 "text": "HTMLSlotElement"
               }
             },
             {
               "kind": "field",
-              "name": "detailsObserver",
+              "name": "displayInput",
               "type": {
-                "text": "MutationObserver"
+                "text": "HTMLInputElement"
               }
             },
             {
               "kind": "field",
-              "name": "open",
+              "name": "valueInput",
               "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
+                "text": "HTMLInputElement"
+              }
             },
             {
               "kind": "field",
-              "name": "summary",
+              "name": "listbox",
               "type": {
-                "text": "string"
+                "text": "HTMLSlotElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "defaultSlot",
+              "type": {
+                "text": "HTMLSlotElement"
               },
-              "description": "The summary to show in the header. If you need to display HTML, use the `summary` slot instead.",
-              "attribute": "summary"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "hasFocus",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "description": "Disables the details so it can't be toggled.",
-              "attribute": "disabled",
-              "reflects": true
+              "privacy": "private",
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "contained",
+              "name": "isUserInput",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "description": "Draws the details as contained element.",
-              "attribute": "contained",
-              "reflects": true
+              "privacy": "private",
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "displayLabel",
               "type": {
-                "text": "'medium' | 'large'"
+                "text": "string"
               },
-              "default": "'medium'",
-              "description": "The details's size.",
-              "attribute": "size",
-              "reflects": true
+              "default": "''"
             },
             {
-              "kind": "method",
-              "name": "handleSummaryClick",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "MouseEvent"
-                  }
-                }
-              ]
+              "kind": "field",
+              "name": "selectedOption",
+              "type": {
+                "text": "SynOption | undefined"
+              }
             },
             {
-              "kind": "method",
-              "name": "handleSummaryKeyDown",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ]
+              "kind": "field",
+              "name": "numberFilteredOptions",
+              "type": {
+                "text": "number"
+              },
+              "default": "0"
             },
             {
-              "kind": "method",
-              "name": "handleOpenChange"
+              "kind": "field",
+              "name": "cachedOptions",
+              "type": {
+                "text": "SynOption []"
+              },
+              "default": "[]"
             },
             {
-              "kind": "method",
-              "name": "show",
-              "description": "Shows the details."
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The name of the combobox, submitted as a name/value pair with form data.",
+              "attribute": "name"
             },
             {
-              "kind": "method",
-              "name": "hide",
-              "description": "Hides the details"
-            }
-          ],
-          "events": [
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The current value of the combobox, submitted as a name/value pair with form data.",
+              "attribute": "value"
+            },
             {
-              "description": "Emitted when the details opens.",
-              "name": "syn-show",
-              "reactName": "onSynShow",
-              "eventName": "SynShowEvent"
+              "kind": "field",
+              "name": "defaultValue",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The default value of the form control. Primarily used for resetting the form control."
             },
             {
-              "description": "Emitted after the details opens and all animations are complete.",
-              "name": "syn-after-show",
-              "reactName": "onSynAfterShow",
-              "eventName": "SynAfterShowEvent"
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "'small' | 'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "description": "The combobox's size.",
+              "attribute": "size",
+              "reflects": true
             },
             {
-              "description": "Emitted when the details closes.",
-              "name": "syn-hide",
-              "reactName": "onSynHide",
-              "eventName": "SynHideEvent"
+              "kind": "field",
+              "name": "placeholder",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Placeholder text to show as a hint when the combobox is empty.",
+              "attribute": "placeholder"
             },
             {
-              "description": "Emitted after the details closes and all animations are complete.",
-              "name": "syn-after-hide",
-              "reactName": "onSynAfterHide",
-              "eventName": "SynAfterHideEvent"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "open",
+              "kind": "field",
+              "name": "disabled",
               "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"
+              "description": "Disables the combobox control.",
+              "attribute": "disabled",
+              "reflects": true
             },
             {
-              "name": "summary",
+              "kind": "field",
+              "name": "clearable",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "description": "The summary to show in the header. If you need to display HTML, use the `summary` slot instead.",
-              "fieldName": "summary"
+              "default": "false",
+              "description": "Adds a clear button when the combobox is not empty.",
+              "attribute": "clearable"
             },
             {
-              "name": "disabled",
+              "kind": "field",
+              "name": "open",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disables the details so it can't be toggled.",
-              "fieldName": "disabled"
+              "description": "Indicates whether or not the combobox is open.\nYou can toggle this attribute to show and hide the listbox, or you can use the `show()`\nand `hide()` methods and this attribute will reflect the combobox's open state.",
+              "attribute": "open",
+              "reflects": true
             },
             {
-              "name": "contained",
+              "kind": "field",
+              "name": "hoist",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Draws the details as contained element.",
-              "fieldName": "contained"
+              "description": "Enable this option to prevent the listbox from being clipped,\nwhen the component is placed inside a container with `overflow: auto|scroll`.\nHoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
+              "attribute": "hoist"
             },
             {
-              "name": "size",
+              "kind": "field",
+              "name": "label",
               "type": {
-                "text": "'medium' | 'large'"
+                "text": "string"
               },
-              "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-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 */",
-          "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-details--docs",
-          "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."
+              "default": "''",
+              "description": "The combobox's label. If you need to display HTML, use the `label` slot instead.",
+              "attribute": "label"
             },
             {
-              "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/combobox/combobox.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "SynCombobox",
-          "cssParts": [
-            {
-              "description": "The form control that wraps the label, combobox, and help text.",
-              "name": "form-control"
+              "kind": "field",
+              "name": "placement",
+              "type": {
+                "text": "'top' | 'bottom'"
+              },
+              "default": "'bottom'",
+              "description": "The preferred placement of the combobox's menu.\nNote that the actual placement may vary as needed to keep the listbox inside of the viewport.",
+              "attribute": "placement",
+              "reflects": true
             },
             {
-              "description": "The label's wrapper.",
-              "name": "form-control-label"
+              "kind": "field",
+              "name": "helpText",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The combobox's help text. If you need to display HTML, use the `help-text` slot instead.",
+              "attribute": "help-text"
             },
             {
-              "description": "The combobox's wrapper.",
-              "name": "form-control-input"
+              "kind": "field",
+              "name": "form",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "By default, form controls are associated with the nearest containing `<form>` element.\nThis attribute allows you to place the form control outside of a form and associate it\nwith the form that has this `id`.\nThe form must be in the same document or shadow root for this to work.",
+              "attribute": "form",
+              "reflects": true
             },
             {
-              "description": "The help text's wrapper.",
-              "name": "form-control-help-text"
+              "kind": "field",
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "The combobox's required attribute.",
+              "attribute": "required",
+              "reflects": true
             },
             {
-              "description": "The container the wraps the prefix, combobox, clear icon, and expand button.",
-              "name": "combobox"
+              "kind": "field",
+              "name": "restricted",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When set to `true`, restricts the combobox to only allow selection from the available options.\nUsers will not be able to enter custom values that are not present in the list.",
+              "attribute": "restricted",
+              "reflects": true
             },
             {
-              "description": "The container that wraps the prefix slot.",
-              "name": "prefix"
+              "kind": "field",
+              "name": "getOption",
+              "type": {
+                "text": "OptionRenderer"
+              },
+              "default": "defaultOptionRenderer",
+              "description": "A function that customizes the rendered option. The first argument is the option, the second\nis the query string, which is typed into the combobox.\nThe function should return either a Lit TemplateResult or a string containing trusted HTML\nto render in the shown list of filtered options.\nIf the query string should be highlighted use the `highlightOptionRenderer` function.",
+              "attribute": "getOption"
             },
             {
-              "description": "The container that wraps the suffix slot.",
-              "name": "suffix"
+              "kind": "field",
+              "name": "filter",
+              "type": {
+                "text": "(option: SynOption, queryString: string) => boolean"
+              },
+              "description": "A function used to filter options in the combobox component.\nThe default filter method is a case- and diacritic-insensitive string comparison.",
+              "parameters": [
+                {
+                  "description": "The option to be filtered.",
+                  "name": "option"
+                },
+                {
+                  "description": "The query string used for filtering.",
+                  "name": "queryString"
+                }
+              ],
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "attribute": "filter"
             },
             {
-              "description": "The element that displays the selected option's label, an `<input>` element.",
-              "name": "display-input"
+              "kind": "field",
+              "name": "validity",
+              "description": "Gets the validity state object",
+              "readonly": true
             },
             {
-              "description": "The listbox container where the options are slotted and the filtered options list exists.",
-              "name": "listbox"
+              "kind": "field",
+              "name": "validationMessage",
+              "description": "Gets the validation message",
+              "readonly": true
             },
             {
-              "description": "The container that wraps the filtered options.",
-              "name": "filtered-listbox"
+              "kind": "method",
+              "name": "addOpenListeners",
+              "privacy": "private"
             },
             {
-              "description": "The clear button.",
-              "name": "clear-button"
+              "kind": "method",
+              "name": "removeOpenListeners",
+              "privacy": "private"
             },
             {
-              "description": "The container that wraps the expand icon.",
-              "name": "expand-icon"
+              "kind": "method",
+              "name": "handleFocus",
+              "privacy": "private"
             },
             {
-              "description": "The popup's exported `popup` part. Use this to target the tooltip's popup container.",
-              "name": "popup"
+              "kind": "method",
+              "name": "handleBlur",
+              "privacy": "private"
             },
             {
-              "description": "The container that wraps the \"no results\" message.",
-              "name": "no-results"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The listbox options. Must be `<syn-option>` elements. You can use `<syn-optgroup>`'s to group items visually.",
-              "name": ""
+              "kind": "field",
+              "name": "handleDocumentFocusIn",
+              "privacy": "private"
             },
             {
-              "description": "The combobox's label. Alternatively, you can use the `label` attribute.",
-              "name": "label"
+              "kind": "field",
+              "name": "handleDocumentKeyDown",
+              "privacy": "private"
             },
             {
-              "description": "Used to prepend a presentational icon or similar element to the combobox.",
-              "name": "prefix"
+              "kind": "field",
+              "name": "handleDocumentMouseDown",
+              "privacy": "private"
             },
             {
-              "description": "Used to append a presentational icon or similar element to the combobox.",
-              "name": "suffix"
+              "kind": "method",
+              "name": "handleLabelClick",
+              "privacy": "private"
             },
             {
-              "description": "An icon to use in lieu of the default clear icon.",
-              "name": "clear-icon"
+              "kind": "method",
+              "name": "handleComboboxMouseDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
             },
             {
-              "description": "The icon to show when the control is expanded and collapsed. Rotates on open and close.",
-              "name": "expand-icon"
+              "kind": "method",
+              "name": "handleComboboxKeyDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
             },
             {
-              "description": "Text that describes how to use the combobox. Alternatively, you can use the `help-text` attribute.",
-              "name": "help-text"
-            }
-          ],
-          "members": [
+              "kind": "method",
+              "name": "handleClearClick",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
+            },
             {
-              "kind": "field",
-              "name": "dependencies",
-              "type": {
-                "text": "object"
-              },
-              "static": true,
-              "default": "{ 'syn-icon': SynIcon, 'syn-popup': SynPopup, }"
+              "kind": "method",
+              "name": "clearCombobox",
+              "privacy": "private"
             },
             {
-              "kind": "field",
-              "name": "formControlController",
+              "kind": "method",
+              "name": "preventLoosingFocus",
               "privacy": "private",
-              "readonly": true,
-              "default": "new FormControlController(this, { assumeInteractionOn: ['syn-blur', 'syn-input'], })"
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "hasSlotController",
+              "kind": "method",
+              "name": "handleOptionClick",
               "privacy": "private",
-              "readonly": true,
-              "default": "new HasSlotController(this, 'help-text', 'label')"
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "localize",
+              "kind": "method",
+              "name": "selectNextOption",
               "privacy": "private",
-              "readonly": true,
-              "default": "new LocalizeController(this)"
+              "parameters": [
+                {
+                  "name": "isNext",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "A boolean indicating whether to select the following option (true)\n  or the previous option (false)."
+                }
+              ],
+              "description": "Selects the following or previous option."
             },
             {
-              "kind": "field",
-              "name": "closeWatcher",
-              "type": {
-                "text": "CloseWatcher | null"
-              },
+              "kind": "method",
+              "name": "getAllFilteredOptions",
               "privacy": "private"
             },
             {
-              "kind": "field",
-              "name": "lastOption",
-              "type": {
-                "text": "SynOption | undefined"
-              },
+              "kind": "method",
+              "name": "getCurrentOption",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "setCurrentOption",
               "privacy": "private",
-              "description": "The last syn-option, that was selected by click or via keyboard navigation"
+              "parameters": [
+                {
+                  "name": "option",
+                  "type": {
+                    "text": "SynOption | null"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "isOptionRendererTriggered",
-              "type": {
-                "text": "boolean"
-              },
+              "kind": "method",
+              "name": "updateSelectedOptionsCacheAndValue",
               "privacy": "private",
-              "default": "false"
+              "parameters": [
+                {
+                  "name": "option",
+                  "type": {
+                    "text": "SynOption | undefined"
+                  }
+                }
+              ],
+              "description": "Updates the selected options cache, the current value, and the display value"
             },
             {
-              "kind": "field",
-              "name": "isInitialized",
-              "type": {
-                "text": "boolean"
-              },
+              "kind": "method",
+              "name": "setSelectedOptionToSelected",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleInvalid",
               "privacy": "private",
-              "default": "false"
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "popup",
-              "type": {
-                "text": "SynPopup"
-              }
+              "kind": "method",
+              "name": "handlePropertiesChange"
             },
             {
-              "kind": "field",
-              "name": "combobox",
-              "type": {
-                "text": "HTMLSlotElement"
-              }
+              "kind": "method",
+              "name": "handleDisabledChange"
             },
             {
-              "kind": "field",
-              "name": "displayInput",
-              "type": {
-                "text": "HTMLInputElement"
-              }
+              "kind": "method",
+              "name": "handleValueChange"
             },
             {
-              "kind": "field",
-              "name": "valueInput",
-              "type": {
-                "text": "HTMLInputElement"
-              }
+              "kind": "method",
+              "name": "handleOpenChange"
             },
             {
-              "kind": "field",
-              "name": "listbox",
-              "type": {
-                "text": "HTMLSlotElement"
-              }
+              "kind": "method",
+              "name": "show",
+              "description": "Shows the listbox. If it is not possible to open the listbox, because there are no\nappropriate filtered options, a syn-error is emitted and the listbox stays closed."
             },
             {
-              "kind": "field",
-              "name": "defaultSlot",
-              "type": {
-                "text": "HTMLSlotElement"
-              },
-              "privacy": "private"
+              "kind": "method",
+              "name": "hide",
+              "description": "Hides the listbox."
             },
             {
-              "kind": "field",
-              "name": "hasFocus",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false"
+              "kind": "method",
+              "name": "checkValidity",
+              "description": "Checks for validity but does not show a validation message.\nReturns `true` when valid and `false` when invalid."
             },
             {
-              "kind": "field",
-              "name": "isUserInput",
-              "type": {
-                "text": "boolean"
+              "kind": "method",
+              "name": "getForm",
+              "return": {
+                "type": {
+                  "text": "HTMLFormElement | null"
+                }
               },
-              "privacy": "private",
-              "default": "false"
+              "description": "Gets the associated form, if one exists."
             },
             {
-              "kind": "field",
-              "name": "displayLabel",
-              "type": {
-                "text": "string"
-              },
-              "default": "''"
+              "kind": "method",
+              "name": "reportValidity",
+              "description": "Checks for validity and shows the browser's validation message if the control is invalid."
             },
             {
-              "kind": "field",
-              "name": "selectedOption",
-              "type": {
-                "text": "SynOption | undefined"
-              }
+              "kind": "method",
+              "name": "setCustomValidity",
+              "parameters": [
+                {
+                  "name": "message",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Sets a custom validation message. Pass an empty string to restore validity."
             },
             {
-              "kind": "field",
-              "name": "numberFilteredOptions",
-              "type": {
-                "text": "number"
-              },
-              "default": "0"
+              "kind": "method",
+              "name": "focus",
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ],
+              "description": "Sets focus on the control."
             },
             {
-              "kind": "field",
-              "name": "cachedOptions",
-              "type": {
-                "text": "SynOption []"
+              "kind": "method",
+              "name": "blur",
+              "description": "Removes focus from the control."
+            },
+            {
+              "kind": "method",
+              "name": "createComboboxOptionsFromQuery",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "queryString",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleInput",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "isValidValue",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
               },
-              "default": "[]"
+              "description": "Checks if the current value is available in the options list.\nThis is used to determine if the value is valid when the combobox is restricted."
             },
             {
-              "kind": "field",
+              "kind": "method",
+              "name": "getOptionFromValue",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "SynOption | undefined"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "resetToLastValidValue",
+              "privacy": "private",
+              "description": "Resets the value to the last valid value or to an empty string."
+            },
+            {
+              "kind": "method",
+              "name": "handleChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "getSlottedOptions",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "getSlottedOptGroups",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "SynOptGroup[]"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "cacheSlottedOptionsAndOptgroups",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "updateSelectedOptionFromValue",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "handleDefaultSlotChange",
+              "privacy": "public"
+            }
+          ],
+          "events": [
+            {
+              "description": "Emitted when the control's value changes.",
+              "name": "syn-change",
+              "reactName": "onSynChange",
+              "eventName": "SynChangeEvent"
+            },
+            {
+              "description": "Emitted when the control's value is cleared.",
+              "name": "syn-clear",
+              "reactName": "onSynClear",
+              "eventName": "SynClearEvent"
+            },
+            {
+              "description": "Emitted when the control receives input.",
+              "name": "syn-input",
+              "reactName": "onSynInput",
+              "eventName": "SynInputEvent"
+            },
+            {
+              "description": "Emitted when the control gains focus.",
+              "name": "syn-focus",
+              "reactName": "onSynFocus",
+              "eventName": "SynFocusEvent"
+            },
+            {
+              "description": "Emitted when the control loses focus.",
+              "name": "syn-blur",
+              "reactName": "onSynBlur",
+              "eventName": "SynBlurEvent"
+            },
+            {
+              "description": "Emitted when the combobox's menu opens.",
+              "name": "syn-show",
+              "reactName": "onSynShow",
+              "eventName": "SynShowEvent"
+            },
+            {
+              "description": "Emitted after the combobox's menu opens and all animations are complete.",
+              "name": "syn-after-show",
+              "reactName": "onSynAfterShow",
+              "eventName": "SynAfterShowEvent"
+            },
+            {
+              "description": "Emitted when the combobox's menu closes.",
+              "name": "syn-hide",
+              "reactName": "onSynHide",
+              "eventName": "SynHideEvent"
+            },
+            {
+              "description": "Emitted after the combobox's menu closes and all animations are complete.",
+              "name": "syn-after-hide",
+              "reactName": "onSynAfterHide",
+              "eventName": "SynAfterHideEvent"
+            },
+            {
+              "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied.",
+              "name": "syn-invalid",
+              "reactName": "onSynInvalid",
+              "eventName": "SynInvalidEvent"
+            },
+            {
+              "description": "Emitted when the combobox menu fails to open.",
+              "name": "syn-error",
+              "reactName": "onSynError",
+              "eventName": "SynErrorEvent"
+            }
+          ],
+          "attributes": [
+            {
               "name": "name",
               "type": {
                 "text": "string"
               },
               "default": "''",
               "description": "The name of the combobox, submitted as a name/value pair with form data.",
-              "attribute": "name"
+              "fieldName": "name"
             },
             {
-              "kind": "field",
               "name": "value",
               "type": {
                 "text": "string"
               },
               "default": "''",
               "description": "The current value of the combobox, submitted as a name/value pair with form data.",
-              "attribute": "value"
-            },
-            {
-              "kind": "field",
-              "name": "defaultValue",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The default value of the form control. Primarily used for resetting the form control."
+              "fieldName": "value"
             },
             {
-              "kind": "field",
               "name": "size",
               "type": {
                 "text": "'small' | 'medium' | 'large'"
               },
               "default": "'medium'",
               "description": "The combobox's size.",
-              "attribute": "size",
-              "reflects": true
+              "fieldName": "size"
             },
             {
-              "kind": "field",
               "name": "placeholder",
               "type": {
                 "text": "string"
               },
               "default": "''",
               "description": "Placeholder text to show as a hint when the combobox is empty.",
-              "attribute": "placeholder"
+              "fieldName": "placeholder"
             },
             {
-              "kind": "field",
               "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Disables the combobox control.",
-              "attribute": "disabled",
-              "reflects": true
+              "fieldName": "disabled"
             },
             {
-              "kind": "field",
               "name": "clearable",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Adds a clear button when the combobox is not empty.",
-              "attribute": "clearable"
+              "fieldName": "clearable"
             },
             {
-              "kind": "field",
               "name": "open",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Indicates whether or not the combobox is open.\nYou can toggle this attribute to show and hide the listbox, or you can use the `show()`\nand `hide()` methods and this attribute will reflect the combobox's open state.",
-              "attribute": "open",
-              "reflects": true
+              "fieldName": "open"
             },
             {
-              "kind": "field",
               "name": "hoist",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Enable this option to prevent the listbox from being clipped,\nwhen the component is placed inside a container with `overflow: auto|scroll`.\nHoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
-              "attribute": "hoist"
+              "fieldName": "hoist"
             },
             {
-              "kind": "field",
               "name": "label",
               "type": {
                 "text": "string"
               },
               "default": "''",
               "description": "The combobox's label. If you need to display HTML, use the `label` slot instead.",
-              "attribute": "label"
+              "fieldName": "label"
             },
             {
-              "kind": "field",
               "name": "placement",
               "type": {
                 "text": "'top' | 'bottom'"
               },
               "default": "'bottom'",
               "description": "The preferred placement of the combobox's menu.\nNote that the actual placement may vary as needed to keep the listbox inside of the viewport.",
-              "attribute": "placement",
-              "reflects": true
+              "fieldName": "placement"
             },
             {
-              "kind": "field",
-              "name": "helpText",
+              "name": "help-text",
               "type": {
                 "text": "string"
               },
               "default": "''",
               "description": "The combobox's help text. If you need to display HTML, use the `help-text` slot instead.",
-              "attribute": "help-text"
+              "fieldName": "helpText"
             },
             {
-              "kind": "field",
               "name": "form",
               "type": {
                 "text": "string"
               },
               "default": "''",
               "description": "By default, form controls are associated with the nearest containing `<form>` element.\nThis attribute allows you to place the form control outside of a form and associate it\nwith the form that has this `id`.\nThe form must be in the same document or shadow root for this to work.",
-              "attribute": "form",
-              "reflects": true
+              "fieldName": "form"
             },
             {
-              "kind": "field",
               "name": "required",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "The combobox's required attribute.",
-              "attribute": "required",
-              "reflects": true
+              "fieldName": "required"
             },
             {
-              "kind": "field",
               "name": "restricted",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "When set to `true`, restricts the combobox to only allow selection from the available options.\nUsers will not be able to enter custom values that are not present in the list.",
-              "attribute": "restricted",
-              "reflects": true
+              "fieldName": "restricted"
             },
             {
-              "kind": "field",
               "name": "getOption",
               "type": {
                 "text": "OptionRenderer"
               },
               "default": "defaultOptionRenderer",
               "description": "A function that customizes the rendered option. The first argument is the option, the second\nis the query string, which is typed into the combobox.\nThe function should return either a Lit TemplateResult or a string containing trusted HTML\nto render in the shown list of filtered options.\nIf the query string should be highlighted use the `highlightOptionRenderer` function.",
-              "attribute": "getOption"
+              "fieldName": "getOption"
             },
             {
-              "kind": "field",
               "name": "filter",
               "type": {
                 "text": "(option: SynOption, queryString: string) => boolean"
@@ -2941,615 +3216,340 @@
                   "text": ""
                 }
               },
-              "attribute": "filter"
-            },
-            {
-              "kind": "field",
-              "name": "validity",
-              "description": "Gets the validity state object",
-              "readonly": true
-            },
-            {
-              "kind": "field",
-              "name": "validationMessage",
-              "description": "Gets the validation message",
-              "readonly": true
-            },
-            {
-              "kind": "method",
-              "name": "addOpenListeners",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "removeOpenListeners",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "handleFocus",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "handleBlur",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "handleDocumentFocusIn",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "handleDocumentKeyDown",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "handleDocumentMouseDown",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "handleLabelClick",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "handleComboboxMouseDown",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "MouseEvent"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "handleComboboxKeyDown",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "handleClearClick",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "MouseEvent"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "clearCombobox",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "preventLoosingFocus",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "MouseEvent"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "handleOptionClick",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "MouseEvent"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "selectNextOption",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "isNext",
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "A boolean indicating whether to select the following option (true)\n  or the previous option (false)."
-                }
-              ],
-              "description": "Selects the following or previous option."
-            },
-            {
-              "kind": "method",
-              "name": "getAllFilteredOptions",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "getCurrentOption",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "setCurrentOption",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "option",
-                  "type": {
-                    "text": "SynOption | null"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "updateSelectedOptionsCacheAndValue",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "option",
-                  "type": {
-                    "text": "SynOption | undefined"
-                  }
-                }
-              ],
-              "description": "Updates the selected options cache, the current value, and the display value"
-            },
-            {
-              "kind": "method",
-              "name": "setSelectedOptionToSelected",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "handleInvalid",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "handlePropertiesChange"
-            },
-            {
-              "kind": "method",
-              "name": "handleDisabledChange"
-            },
+              "fieldName": "filter"
+            }
+          ],
+          "superclass": {
+            "name": "SynergyElement",
+            "module": "/src/internal/synergy-element.js"
+          },
+          "summary": "Comboboxes allow you to choose items from a menu of predefined options.",
+          "tagNameWithoutPrefix": "combobox",
+          "tagName": "syn-combobox",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Comboboxes allow you to choose items from a menu of predefined options.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-combobox--docs\n * @status stable\n *\n * @dependency syn-icon\n * @dependency syn-popup\n *\n * @slot - The listbox options. Must be `<syn-option>` elements.\n *    You can use `<syn-optgroup>`'s to group items visually.\n * @slot label - The combobox's label. Alternatively, you can use the `label` attribute.\n * @slot prefix - Used to prepend a presentational icon or similar element to the combobox.\n * @slot suffix - Used to append a presentational icon or similar element to the combobox.\n * @slot clear-icon - An icon to use in lieu of the default clear icon.\n * @slot expand-icon - The icon to show when the control is expanded and collapsed.\n *    Rotates on open and close.\n * @slot help-text - Text that describes how to use the combobox.\n *    Alternatively, you can use the `help-text` attribute.\n *\n * @event syn-change - Emitted when the control's value changes.\n * @event syn-clear - Emitted when the control's value is cleared.\n * @event syn-input - Emitted when the control receives input.\n * @event syn-focus - Emitted when the control gains focus.\n * @event syn-blur - Emitted when the control loses focus.\n * @event syn-show - Emitted when the combobox's menu opens.\n * @event syn-after-show - Emitted after the combobox's menu opens and all animations are complete.\n * @event syn-hide - Emitted when the combobox's menu closes.\n * @event syn-after-hide - Emitted after the combobox's menu closes and all animations are complete.\n * @event syn-invalid - Emitted when the form control has been checked for validity\n *    and its constraints aren't satisfied.\n * @event syn-error - Emitted when the combobox menu fails to open.\n *\n * @csspart form-control - The form control that wraps the label, combobox, and help text.\n * @csspart form-control-label - The label's wrapper.\n * @csspart form-control-input - The combobox's wrapper.\n * @csspart form-control-help-text - The help text's wrapper.\n * @csspart combobox - The container the wraps the prefix, combobox, clear icon, and expand button.\n * @csspart prefix - The container that wraps the prefix slot.\n * @csspart suffix - The container that wraps the suffix slot.\n * @csspart display-input - The element that displays the selected option's label,\n *     an `<input>` element.\n * @csspart listbox - The listbox container where the options are slotted\n *   and the filtered options list exists.\n * @csspart filtered-listbox - The container that wraps the filtered options.\n * @csspart clear-button - The clear button.\n * @csspart expand-icon - The container that wraps the expand icon.\n * @csspart popup - The popup's exported `popup` part.\n * Use this to target the tooltip's popup container.\n * @csspart no-results - The container that wraps the \"no results\" message.\n *\n * @animation combobox.show - The animation to use when showing the combobox.\n * @animation combobox.hide - The animation to use when hiding the combobox.\n */",
+          "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-combobox--docs",
+          "status": "stable",
+          "dependencies": [
+            "syn-icon",
+            "syn-popup"
+          ],
+          "animations": [
             {
-              "kind": "method",
-              "name": "handleValueChange"
+              "name": "combobox.show",
+              "description": "The animation to use when showing the combobox."
             },
             {
-              "kind": "method",
-              "name": "handleOpenChange"
-            },
+              "name": "combobox.hide",
+              "description": "The animation to use when hiding the combobox."
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SynCombobox",
+            "module": "components/combobox/combobox.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/details/details.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SynDetails",
+          "cssParts": [
             {
-              "kind": "method",
-              "name": "show",
-              "description": "Shows the listbox. If it is not possible to open the listbox, because there are no\nappropriate filtered options, a syn-error is emitted and the listbox stays closed."
+              "description": "The component's base wrapper.",
+              "name": "base"
             },
             {
-              "kind": "method",
-              "name": "hide",
-              "description": "Hides the listbox."
+              "description": "The header that wraps both the summary and the expand/collapse icon.",
+              "name": "header"
             },
             {
-              "kind": "method",
-              "name": "checkValidity",
-              "description": "Checks for validity but does not show a validation message.\nReturns `true` when valid and `false` when invalid."
+              "description": "The container that wraps the summary.",
+              "name": "summary"
             },
             {
-              "kind": "method",
-              "name": "getForm",
-              "return": {
-                "type": {
-                  "text": "HTMLFormElement | null"
-                }
-              },
-              "description": "Gets the associated form, if one exists."
+              "description": "The container that wraps the expand/collapse icons.",
+              "name": "summary-icon"
             },
             {
-              "kind": "method",
-              "name": "reportValidity",
-              "description": "Checks for validity and shows the browser's validation message if the control is invalid."
+              "description": "The details content.",
+              "name": "content"
             },
             {
-              "kind": "method",
-              "name": "setCustomValidity",
-              "parameters": [
-                {
-                  "name": "message",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ],
-              "description": "Sets a custom validation message. Pass an empty string to restore validity."
-            },
+              "description": "The container that wraps the details content.",
+              "name": "body"
+            }
+          ],
+          "slots": [
             {
-              "kind": "method",
-              "name": "focus",
-              "parameters": [
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "FocusOptions"
-                  }
-                }
-              ],
-              "description": "Sets focus on the control."
+              "description": "The details' main content.",
+              "name": ""
             },
             {
-              "kind": "method",
-              "name": "blur",
-              "description": "Removes focus from the control."
+              "description": "The details' summary. Alternatively, you can use the `summary` attribute.",
+              "name": "summary"
             },
             {
-              "kind": "method",
-              "name": "createComboboxOptionsFromQuery",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "queryString",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ]
+              "description": "Optional expand icon to use instead of the default. Works best with `<syn-icon>`.",
+              "name": "expand-icon"
             },
             {
-              "kind": "method",
-              "name": "handleInput",
-              "privacy": "private"
-            },
+              "description": "Optional collapse icon to use instead of the default. Works best with `<syn-icon>`.",
+              "name": "collapse-icon"
+            }
+          ],
+          "members": [
             {
-              "kind": "method",
-              "name": "isValidValue",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+              "kind": "field",
+              "name": "dependencies",
+              "type": {
+                "text": "object"
               },
-              "description": "Checks if the current value is available in the options list.\nThis is used to determine if the value is valid when the combobox is restricted."
-            },
-            {
-              "kind": "method",
-              "name": "getOptionFromValue",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "SynOption | undefined"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "resetToLastValidValue",
-              "privacy": "private",
-              "description": "Resets the value to the last valid value or to an empty string."
-            },
-            {
-              "kind": "method",
-              "name": "handleChange",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "getSlottedOptions",
-              "privacy": "private"
+              "static": true,
+              "default": "{ 'syn-icon': SynIcon }"
             },
             {
-              "kind": "method",
-              "name": "getSlottedOptGroups",
+              "kind": "field",
+              "name": "localize",
               "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "SynOptGroup[]"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "cacheSlottedOptionsAndOptgroups",
-              "privacy": "private"
+              "readonly": true,
+              "default": "new LocalizeController(this)"
             },
             {
-              "kind": "method",
-              "name": "updateSelectedOptionFromValue",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "kind": "field",
+              "name": "details",
+              "type": {
+                "text": "HTMLDetailsElement"
               }
-            },
-            {
-              "kind": "method",
-              "name": "handleDefaultSlotChange",
-              "privacy": "public"
-            }
-          ],
-          "events": [
-            {
-              "description": "Emitted when the control's value changes.",
-              "name": "syn-change",
-              "reactName": "onSynChange",
-              "eventName": "SynChangeEvent"
-            },
-            {
-              "description": "Emitted when the control's value is cleared.",
-              "name": "syn-clear",
-              "reactName": "onSynClear",
-              "eventName": "SynClearEvent"
-            },
-            {
-              "description": "Emitted when the control receives input.",
-              "name": "syn-input",
-              "reactName": "onSynInput",
-              "eventName": "SynInputEvent"
-            },
-            {
-              "description": "Emitted when the control gains focus.",
-              "name": "syn-focus",
-              "reactName": "onSynFocus",
-              "eventName": "SynFocusEvent"
-            },
-            {
-              "description": "Emitted when the control loses focus.",
-              "name": "syn-blur",
-              "reactName": "onSynBlur",
-              "eventName": "SynBlurEvent"
-            },
-            {
-              "description": "Emitted when the combobox's menu opens.",
-              "name": "syn-show",
-              "reactName": "onSynShow",
-              "eventName": "SynShowEvent"
-            },
-            {
-              "description": "Emitted after the combobox's menu opens and all animations are complete.",
-              "name": "syn-after-show",
-              "reactName": "onSynAfterShow",
-              "eventName": "SynAfterShowEvent"
-            },
-            {
-              "description": "Emitted when the combobox's menu closes.",
-              "name": "syn-hide",
-              "reactName": "onSynHide",
-              "eventName": "SynHideEvent"
-            },
-            {
-              "description": "Emitted after the combobox's menu closes and all animations are complete.",
-              "name": "syn-after-hide",
-              "reactName": "onSynAfterHide",
-              "eventName": "SynAfterHideEvent"
-            },
-            {
-              "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied.",
-              "name": "syn-invalid",
-              "reactName": "onSynInvalid",
-              "eventName": "SynInvalidEvent"
-            },
-            {
-              "description": "Emitted when the combobox menu fails to open.",
-              "name": "syn-error",
-              "reactName": "onSynError",
-              "eventName": "SynErrorEvent"
-            }
-          ],
-          "attributes": [
+            },
             {
-              "name": "name",
+              "kind": "field",
+              "name": "header",
               "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The name of the combobox, submitted as a name/value pair with form data.",
-              "fieldName": "name"
+                "text": "HTMLElement"
+              }
             },
             {
-              "name": "value",
+              "kind": "field",
+              "name": "body",
               "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The current value of the combobox, submitted as a name/value pair with form data.",
-              "fieldName": "value"
+                "text": "HTMLElement"
+              }
             },
             {
-              "name": "size",
+              "kind": "field",
+              "name": "expandIconSlot",
               "type": {
-                "text": "'small' | 'medium' | 'large'"
-              },
-              "default": "'medium'",
-              "description": "The combobox's size.",
-              "fieldName": "size"
+                "text": "HTMLSlotElement"
+              }
             },
             {
-              "name": "placeholder",
+              "kind": "field",
+              "name": "detailsObserver",
               "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Placeholder text to show as a hint when the combobox is empty.",
-              "fieldName": "placeholder"
+                "text": "MutationObserver"
+              }
             },
             {
-              "name": "disabled",
+              "kind": "field",
+              "name": "open",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disables the combobox control.",
-              "fieldName": "disabled"
+              "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
             },
             {
-              "name": "clearable",
+              "kind": "field",
+              "name": "summary",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Adds a clear button when the combobox is not empty.",
-              "fieldName": "clearable"
+              "description": "The summary to show in the header. If you need to display HTML, use the `summary` slot instead.",
+              "attribute": "summary"
             },
             {
-              "name": "open",
+              "kind": "field",
+              "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Indicates whether or not the combobox is open.\nYou can toggle this attribute to show and hide the listbox, or you can use the `show()`\nand `hide()` methods and this attribute will reflect the combobox's open state.",
-              "fieldName": "open"
+              "description": "Disables the details so it can't be toggled.",
+              "attribute": "disabled",
+              "reflects": true
             },
             {
-              "name": "hoist",
+              "kind": "field",
+              "name": "contained",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Enable this option to prevent the listbox from being clipped,\nwhen the component is placed inside a container with `overflow: auto|scroll`.\nHoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
-              "fieldName": "hoist"
+              "description": "Draws the details as contained element.",
+              "attribute": "contained",
+              "reflects": true
             },
             {
-              "name": "label",
+              "kind": "field",
+              "name": "size",
               "type": {
-                "text": "string"
+                "text": "'medium' | 'large'"
               },
-              "default": "''",
-              "description": "The combobox's label. If you need to display HTML, use the `label` slot instead.",
-              "fieldName": "label"
+              "default": "'medium'",
+              "description": "The details's size.",
+              "attribute": "size",
+              "reflects": true
             },
             {
-              "name": "placement",
-              "type": {
-                "text": "'top' | 'bottom'"
-              },
-              "default": "'bottom'",
-              "description": "The preferred placement of the combobox's menu.\nNote that the actual placement may vary as needed to keep the listbox inside of the viewport.",
-              "fieldName": "placement"
+              "kind": "method",
+              "name": "handleSummaryClick",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
             },
             {
-              "name": "help-text",
+              "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": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "description": "The combobox's help text. If you need to display HTML, use the `help-text` slot instead.",
-              "fieldName": "helpText"
+              "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": "form",
+              "name": "summary",
               "type": {
                 "text": "string"
               },
-              "default": "''",
-              "description": "By default, form controls are associated with the nearest containing `<form>` element.\nThis attribute allows you to place the form control outside of a form and associate it\nwith the form that has this `id`.\nThe form must be in the same document or shadow root for this to work.",
-              "fieldName": "form"
+              "description": "The summary to show in the header. If you need to display HTML, use the `summary` slot instead.",
+              "fieldName": "summary"
             },
             {
-              "name": "required",
+              "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "The combobox's required attribute.",
-              "fieldName": "required"
+              "description": "Disables the details so it can't be toggled.",
+              "fieldName": "disabled"
             },
             {
-              "name": "restricted",
+              "name": "contained",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "When set to `true`, restricts the combobox to only allow selection from the available options.\nUsers will not be able to enter custom values that are not present in the list.",
-              "fieldName": "restricted"
-            },
-            {
-              "name": "getOption",
-              "type": {
-                "text": "OptionRenderer"
-              },
-              "default": "defaultOptionRenderer",
-              "description": "A function that customizes the rendered option. The first argument is the option, the second\nis the query string, which is typed into the combobox.\nThe function should return either a Lit TemplateResult or a string containing trusted HTML\nto render in the shown list of filtered options.\nIf the query string should be highlighted use the `highlightOptionRenderer` function.",
-              "fieldName": "getOption"
+              "description": "Draws the details as contained element.",
+              "fieldName": "contained"
             },
             {
-              "name": "filter",
+              "name": "size",
               "type": {
-                "text": "(option: SynOption, queryString: string) => boolean"
-              },
-              "description": "A function used to filter options in the combobox component.\nThe default filter method is a case- and diacritic-insensitive string comparison.",
-              "parameters": [
-                {
-                  "description": "The option to be filtered.",
-                  "name": "option"
-                },
-                {
-                  "description": "The query string used for filtering.",
-                  "name": "queryString"
-                }
-              ],
-              "return": {
-                "type": {
-                  "text": ""
-                }
+                "text": "'medium' | 'large'"
               },
-              "fieldName": "filter"
+              "default": "'medium'",
+              "description": "The details's size.",
+              "fieldName": "size"
             }
           ],
           "superclass": {
             "name": "SynergyElement",
             "module": "/src/internal/synergy-element.js"
           },
-          "summary": "Comboboxes allow you to choose items from a menu of predefined options.",
-          "tagNameWithoutPrefix": "combobox",
-          "tagName": "syn-combobox",
+          "summary": "Details show a brief summary and expand to show additional content.",
+          "tagNameWithoutPrefix": "details",
+          "tagName": "syn-details",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Comboboxes allow you to choose items from a menu of predefined options.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-combobox--docs\n * @status stable\n *\n * @dependency syn-icon\n * @dependency syn-popup\n *\n * @slot - The listbox options. Must be `<syn-option>` elements.\n *    You can use `<syn-optgroup>`'s to group items visually.\n * @slot label - The combobox's label. Alternatively, you can use the `label` attribute.\n * @slot prefix - Used to prepend a presentational icon or similar element to the combobox.\n * @slot suffix - Used to append a presentational icon or similar element to the combobox.\n * @slot clear-icon - An icon to use in lieu of the default clear icon.\n * @slot expand-icon - The icon to show when the control is expanded and collapsed.\n *    Rotates on open and close.\n * @slot help-text - Text that describes how to use the combobox.\n *    Alternatively, you can use the `help-text` attribute.\n *\n * @event syn-change - Emitted when the control's value changes.\n * @event syn-clear - Emitted when the control's value is cleared.\n * @event syn-input - Emitted when the control receives input.\n * @event syn-focus - Emitted when the control gains focus.\n * @event syn-blur - Emitted when the control loses focus.\n * @event syn-show - Emitted when the combobox's menu opens.\n * @event syn-after-show - Emitted after the combobox's menu opens and all animations are complete.\n * @event syn-hide - Emitted when the combobox's menu closes.\n * @event syn-after-hide - Emitted after the combobox's menu closes and all animations are complete.\n * @event syn-invalid - Emitted when the form control has been checked for validity\n *    and its constraints aren't satisfied.\n * @event syn-error - Emitted when the combobox menu fails to open.\n *\n * @csspart form-control - The form control that wraps the label, combobox, and help text.\n * @csspart form-control-label - The label's wrapper.\n * @csspart form-control-input - The combobox's wrapper.\n * @csspart form-control-help-text - The help text's wrapper.\n * @csspart combobox - The container the wraps the prefix, combobox, clear icon, and expand button.\n * @csspart prefix - The container that wraps the prefix slot.\n * @csspart suffix - The container that wraps the suffix slot.\n * @csspart display-input - The element that displays the selected option's label,\n *     an `<input>` element.\n * @csspart listbox - The listbox container where the options are slotted\n *   and the filtered options list exists.\n * @csspart filtered-listbox - The container that wraps the filtered options.\n * @csspart clear-button - The clear button.\n * @csspart expand-icon - The container that wraps the expand icon.\n * @csspart popup - The popup's exported `popup` part.\n * Use this to target the tooltip's popup container.\n * @csspart no-results - The container that wraps the \"no results\" message.\n *\n * @animation combobox.show - The animation to use when showing the combobox.\n * @animation combobox.hide - The animation to use when hiding the combobox.\n */",
-          "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-combobox--docs",
+          "jsDoc": "/**\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 */",
+          "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-details--docs",
           "status": "stable",
+          "since": "2.0",
           "dependencies": [
-            "syn-icon",
-            "syn-popup"
+            "syn-icon"
           ],
           "animations": [
             {
-              "name": "combobox.show",
-              "description": "The animation to use when showing the combobox."
+              "name": "details.show",
+              "description": "The animation to use when showing details. You can use `height: auto` with this animation."
             },
             {
-              "name": "combobox.hide",
-              "description": "The animation to use when hiding the combobox."
+              "name": "details.hide",
+              "description": "The animation to use when hiding details. You can use `height: auto` with this animation."
             }
           ]
         }
@@ -3559,8 +3559,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SynCombobox",
-            "module": "components/combobox/combobox.js"
+            "name": "SynDetails",
+            "module": "components/details/details.js"
           }
         }
       ]
@@ -7951,7 +7951,7 @@
           "tagNameWithoutPrefix": "menu-label",
           "tagName": "syn-menu-label",
           "customElement": true,
-          "jsDoc": "/**\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 */",
+          "jsDoc": "/**\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 */",
           "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-menu-label--docs",
           "status": "stable",
           "since": "2.0",
@@ -14031,10 +14031,6 @@
               "description": "The color of the active tab indicator.",
               "name": "--indicator-color"
             },
-            {
-              "description": "The width of the active tab indicator.",
-              "name": "--indicator-width"
-            },
             {
               "description": "The color of the indicator's track (the line that separates tabs from panels).",
               "name": "--track-color"
@@ -14042,6 +14038,10 @@
             {
               "description": "The width of the indicator's track (the line that separates tabs from panels).",
               "name": "--track-width"
+            },
+            {
+              "description": "The width of the active tab indicator.",
+              "name": "--indicator-width"
             }
           ],
           "cssParts": [
@@ -14509,7 +14509,7 @@
           "tagNameWithoutPrefix": "tab-group",
           "tagName": "syn-tab-group",
           "customElement": true,
-          "jsDoc": "/**\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 */",
+          "jsDoc": "/**\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 */",
           "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-tab-group--docs",
           "status": "stable",
           "since": "2.0",
@@ -16272,7 +16272,7 @@
   "package": {
     "name": "@synergy-design-system/components",
     "description": "",
-    "version": "2.40.0",
+    "version": "2.40.1",
     "author": {
       "name": "SICK Global UX Foundation",
       "url": "https://www.sick.com"