@synergy-design-system/components 2.39.2 → 2.40.0

package/dist/custom-elements.json

@@ -464,82 +464,6 @@
         }
       ]
     },
-    {
-      "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/breadcrumb/breadcrumb.js",
@@ -662,155 +586,65 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/breadcrumb-item/breadcrumb-item.js",
+      "path": "components/badge/badge.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SynBreadcrumbItem",
+          "name": "SynBadge",
           "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 breadcrumb item's label.",
+              "description": "The badge's content.",
               "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": "hasSlotController",
+              "name": "localize",
               "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 LocalizeController(this)"
             },
             {
               "kind": "field",
-              "name": "rel",
+              "name": "variant",
               "type": {
-                "text": "string"
+                "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'"
               },
-              "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": "'primary'",
+              "description": "The badge's theme variant.",
+              "attribute": "variant",
+              "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": "variant",
               "type": {
-                "text": "string"
+                "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'"
               },
-              "default": "'noreferrer noopener'",
-              "description": "The `rel` attribute to use on the link. Only used when `href` is set.",
-              "fieldName": "rel"
+              "default": "'primary'",
+              "description": "The badge's theme variant.",
+              "fieldName": "variant"
             }
           ],
           "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": "Badges are used to draw attention and display statuses or counts.",
+          "tagNameWithoutPrefix": "badge",
+          "tagName": "syn-badge",
           "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 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"
         }
@@ -820,8 +654,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SynBreadcrumbItem",
-            "module": "components/breadcrumb-item/breadcrumb-item.js"
+            "name": "SynBadge",
+            "module": "components/badge/badge.js"
           }
         }
       ]
@@ -1464,25 +1298,147 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/button-group/button-group.js",
+      "path": "components/card/card.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SynButtonGroup",
+          "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 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": "One or more `<syn-button>` elements to display in the button group.",
+              "description": "The card's main content.",
               "name": ""
-            }
-          ],
-          "members": [
+            },
+            {
+              "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": [
             {
               "kind": "field",
               "name": "defaultSlot",
@@ -1604,68 +1560,50 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/card/card.js",
+      "path": "components/breadcrumb-item/breadcrumb-item.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": "SynBreadcrumbItem",
           "cssParts": [
             {
               "description": "The component's base wrapper.",
               "name": "base"
             },
             {
-              "description": "The container that wraps the card's image.",
-              "name": "image"
+              "description": "The breadcrumb item's label.",
+              "name": "label"
             },
             {
-              "description": "The container that wraps the card's header.",
-              "name": "header"
+              "description": "The container that wraps the prefix.",
+              "name": "prefix"
             },
             {
-              "description": "The container that wraps the card's main content.",
-              "name": "body"
+              "description": "The container that wraps the suffix.",
+              "name": "suffix"
             },
             {
-              "description": "The container that wraps the card's footer.",
-              "name": "footer"
+              "description": "The container that wraps the separator.",
+              "name": "separator"
             }
           ],
           "slots": [
             {
-              "description": "The card's main content.",
+              "description": "The breadcrumb item's label.",
               "name": ""
             },
             {
-              "description": "An optional header for the card.",
-              "name": "header"
+              "description": "An optional prefix, usually an icon or icon button.",
+              "name": "prefix"
             },
             {
-              "description": "An optional footer for the card.",
-              "name": "footer"
+              "description": "An optional suffix, usually an icon or icon button.",
+              "name": "suffix"
             },
             {
-              "description": "An optional image to render at the start of the card.",
-              "name": "image"
+              "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": [
@@ -1674,41 +1612,103 @@
               "name": "hasSlotController",
               "privacy": "private",
               "readonly": true,
-              "default": "new HasSlotController(this, 'footer', 'header', 'image')"
+              "default": "new HasSlotController(this, 'prefix', 'suffix')"
             },
             {
               "kind": "field",
-              "name": "sharp",
+              "name": "defaultSlot",
               "type": {
-                "text": "boolean"
+                "text": "HTMLSlotElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "renderType",
+              "type": {
+                "text": "'button' | 'link' | 'dropdown'"
               },
-              "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
+              "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": "sharp",
+              "name": "href",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "description": "Draws the card with sharp edges. Can be used e.g. when nesting multiple syn-cards to create hierarchy.",
-              "fieldName": "sharp"
+              "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": "Cards can be used to group related subjects in a container.",
-          "tagNameWithoutPrefix": "card",
-          "tagName": "syn-card",
+          "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 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",
+          "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"
         }
@@ -1718,8 +1718,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SynCard",
-            "module": "components/card/card.js"
+            "name": "SynBreadcrumbItem",
+            "module": "components/breadcrumb-item/breadcrumb-item.js"
           }
         }
       ]
@@ -2193,98 +2193,54 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/combobox/combobox.js",
+      "path": "components/details/details.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SynCombobox",
+          "name": "SynDetails",
           "cssParts": [
             {
-              "description": "The form control that wraps the label, combobox, and help text.",
-              "name": "form-control"
+              "description": "The component's base wrapper.",
+              "name": "base"
             },
             {
-              "description": "The label's wrapper.",
-              "name": "form-control-label"
+              "description": "The header that wraps both the summary and the expand/collapse icon.",
+              "name": "header"
             },
             {
-              "description": "The combobox's wrapper.",
-              "name": "form-control-input"
-            },
-            {
-              "description": "The help text's wrapper.",
-              "name": "form-control-help-text"
-            },
-            {
-              "description": "The container the wraps the prefix, combobox, clear icon, and expand button.",
-              "name": "combobox"
-            },
-            {
-              "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 summary.",
+              "name": "summary"
             },
             {
-              "description": "The container that wraps the expand icon.",
-              "name": "expand-icon"
+              "description": "The container that wraps the expand/collapse icons.",
+              "name": "summary-icon"
             },
             {
-              "description": "The popup's exported `popup` part. Use this to target the tooltip's popup container.",
-              "name": "popup"
+              "description": "The details content.",
+              "name": "content"
             },
             {
-              "description": "The container that wraps the \"no results\" message.",
-              "name": "no-results"
+              "description": "The container that wraps the details content.",
+              "name": "body"
             }
           ],
           "slots": [
             {
-              "description": "The listbox options. Must be `<syn-option>` elements. You can use `<syn-optgroup>`'s to group items visually.",
+              "description": "The details' main content.",
               "name": ""
             },
             {
-              "description": "The combobox's label. Alternatively, you can use the `label` attribute.",
-              "name": "label"
-            },
-            {
-              "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 details' summary. Alternatively, you can use the `summary` attribute.",
+              "name": "summary"
             },
             {
-              "description": "The icon to show when the control is expanded and collapsed. Rotates on open and close.",
+              "description": "Optional expand icon to use instead of the default. Works best with `<syn-icon>`.",
               "name": "expand-icon"
             },
             {
-              "description": "Text that describes how to use the combobox. Alternatively, you can use the `help-text` attribute.",
-              "name": "help-text"
+              "description": "Optional collapse icon to use instead of the default. Works best with `<syn-icon>`.",
+              "name": "collapse-icon"
             }
           ],
           "members": [
@@ -2295,21 +2251,7 @@
                 "text": "object"
               },
               "static": true,
-              "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')"
+              "default": "{ 'syn-icon': SynIcon }"
             },
             {
               "kind": "field",
@@ -2320,882 +2262,665 @@
             },
             {
               "kind": "field",
-              "name": "closeWatcher",
-              "type": {
-                "text": "CloseWatcher | null"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "lastOption",
-              "type": {
-                "text": "SynOption | undefined"
-              },
-              "privacy": "private",
-              "description": "The last syn-option, that was selected by click or via keyboard navigation"
-            },
-            {
-              "kind": "field",
-              "name": "isOptionRendererTriggered",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false"
-            },
-            {
-              "kind": "field",
-              "name": "isInitialized",
+              "name": "details",
               "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false"
+                "text": "HTMLDetailsElement"
+              }
             },
             {
               "kind": "field",
-              "name": "popup",
+              "name": "header",
               "type": {
-                "text": "SynPopup"
+                "text": "HTMLElement"
               }
             },
             {
               "kind": "field",
-              "name": "combobox",
+              "name": "body",
               "type": {
-                "text": "HTMLSlotElement"
+                "text": "HTMLElement"
               }
             },
             {
               "kind": "field",
-              "name": "displayInput",
+              "name": "expandIconSlot",
               "type": {
-                "text": "HTMLInputElement"
+                "text": "HTMLSlotElement"
               }
             },
             {
               "kind": "field",
-              "name": "valueInput",
+              "name": "detailsObserver",
               "type": {
-                "text": "HTMLInputElement"
+                "text": "MutationObserver"
               }
             },
             {
               "kind": "field",
-              "name": "listbox",
+              "name": "open",
               "type": {
-                "text": "HTMLSlotElement"
-              }
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the details' open state.",
+              "attribute": "open",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "defaultSlot",
+              "name": "summary",
               "type": {
-                "text": "HTMLSlotElement"
+                "text": "string"
               },
-              "privacy": "private"
+              "description": "The summary to show in the header. If you need to display HTML, use the `summary` slot instead.",
+              "attribute": "summary"
             },
             {
               "kind": "field",
-              "name": "hasFocus",
+              "name": "disabled",
               "type": {
                 "text": "boolean"
               },
-              "privacy": "private",
-              "default": "false"
+              "default": "false",
+              "description": "Disables the details so it can't be toggled.",
+              "attribute": "disabled",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "isUserInput",
+              "name": "contained",
               "type": {
                 "text": "boolean"
               },
-              "privacy": "private",
-              "default": "false"
+              "default": "false",
+              "description": "Draws the details as contained element.",
+              "attribute": "contained",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "displayLabel",
+              "name": "size",
               "type": {
-                "text": "string"
+                "text": "'medium' | 'large'"
               },
-              "default": "''"
+              "default": "'medium'",
+              "description": "The details's size.",
+              "attribute": "size",
+              "reflects": true
             },
             {
-              "kind": "field",
-              "name": "selectedOption",
-              "type": {
-                "text": "SynOption | undefined"
-              }
+              "kind": "method",
+              "name": "handleSummaryClick",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "numberFilteredOptions",
-              "type": {
-                "text": "number"
-              },
-              "default": "0"
+              "kind": "method",
+              "name": "handleSummaryKeyDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "cachedOptions",
-              "type": {
-                "text": "SynOption []"
-              },
-              "default": "[]"
+              "kind": "method",
+              "name": "handleOpenChange"
             },
             {
-              "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": "show",
+              "description": "Shows the details."
             },
             {
-              "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": "method",
+              "name": "hide",
+              "description": "Hides the details"
+            }
+          ],
+          "events": [
             {
-              "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 when the details opens.",
+              "name": "syn-show",
+              "reactName": "onSynShow",
+              "eventName": "SynShowEvent"
             },
             {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "'small' | 'medium' | 'large'"
-              },
-              "default": "'medium'",
-              "description": "The combobox's size.",
-              "attribute": "size",
-              "reflects": true
+              "description": "Emitted after the details opens and all animations are complete.",
+              "name": "syn-after-show",
+              "reactName": "onSynAfterShow",
+              "eventName": "SynAfterShowEvent"
             },
             {
-              "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 when the details closes.",
+              "name": "syn-hide",
+              "reactName": "onSynHide",
+              "eventName": "SynHideEvent"
             },
             {
-              "kind": "field",
-              "name": "disabled",
+              "description": "Emitted after the details closes and all animations are complete.",
+              "name": "syn-after-hide",
+              "reactName": "onSynAfterHide",
+              "eventName": "SynAfterHideEvent"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "open",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disables the combobox control.",
-              "attribute": "disabled",
-              "reflects": true
+              "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"
             },
             {
-              "kind": "field",
-              "name": "clearable",
+              "name": "summary",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Adds a clear button when the combobox is not empty.",
-              "attribute": "clearable"
+              "description": "The summary to show in the header. If you need to display HTML, use the `summary` slot instead.",
+              "fieldName": "summary"
             },
             {
-              "kind": "field",
-              "name": "open",
+              "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.",
-              "attribute": "open",
-              "reflects": true
+              "description": "Disables the details so it can't be toggled.",
+              "fieldName": "disabled"
             },
             {
-              "kind": "field",
-              "name": "hoist",
+              "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.",
-              "attribute": "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"
+              "description": "Draws the details as contained element.",
+              "fieldName": "contained"
             },
             {
-              "kind": "field",
-              "name": "placement",
+              "name": "size",
               "type": {
-                "text": "'top' | 'bottom'"
+                "text": "'medium' | 'large'"
               },
-              "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
-            },
+              "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": [
             {
-              "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"
+              "name": "details.show",
+              "description": "The animation to use when showing details. You can use `height: auto` with this animation."
             },
             {
-              "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
-            },
+              "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": [
             {
-              "kind": "field",
-              "name": "required",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "The combobox's required attribute.",
-              "attribute": "required",
-              "reflects": true
+              "description": "The form control that wraps the label, combobox, and help text.",
+              "name": "form-control"
             },
             {
-              "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 label's wrapper.",
+              "name": "form-control-label"
             },
             {
-              "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 combobox's wrapper.",
+              "name": "form-control-input"
             },
             {
-              "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 help text's wrapper.",
+              "name": "form-control-help-text"
             },
             {
-              "kind": "field",
-              "name": "validity",
-              "description": "Gets the validity state object",
-              "readonly": true
+              "description": "The container the wraps the prefix, combobox, clear icon, and expand button.",
+              "name": "combobox"
             },
             {
-              "kind": "field",
-              "name": "validationMessage",
-              "description": "Gets the validation message",
-              "readonly": true
+              "description": "The container that wraps the prefix slot.",
+              "name": "prefix"
             },
             {
-              "kind": "method",
-              "name": "addOpenListeners",
-              "privacy": "private"
+              "description": "The container that wraps the suffix slot.",
+              "name": "suffix"
             },
             {
-              "kind": "method",
-              "name": "removeOpenListeners",
-              "privacy": "private"
+              "description": "The element that displays the selected option's label, an `<input>` element.",
+              "name": "display-input"
             },
             {
-              "kind": "method",
-              "name": "handleFocus",
-              "privacy": "private"
+              "description": "The listbox container where the options are slotted and the filtered options list exists.",
+              "name": "listbox"
             },
             {
-              "kind": "method",
-              "name": "handleBlur",
-              "privacy": "private"
+              "description": "The container that wraps the filtered options.",
+              "name": "filtered-listbox"
             },
             {
-              "kind": "field",
-              "name": "handleDocumentFocusIn",
-              "privacy": "private"
+              "description": "The clear button.",
+              "name": "clear-button"
             },
             {
-              "kind": "field",
-              "name": "handleDocumentKeyDown",
-              "privacy": "private"
+              "description": "The container that wraps the expand icon.",
+              "name": "expand-icon"
             },
             {
-              "kind": "field",
-              "name": "handleDocumentMouseDown",
-              "privacy": "private"
+              "description": "The popup's exported `popup` part. Use this to target the tooltip's popup container.",
+              "name": "popup"
             },
             {
-              "kind": "method",
-              "name": "handleLabelClick",
-              "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": "method",
-              "name": "handleComboboxMouseDown",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "MouseEvent"
-                  }
-                }
-              ]
+              "description": "The combobox's label. Alternatively, you can use the `label` attribute.",
+              "name": "label"
             },
             {
-              "kind": "method",
-              "name": "handleComboboxKeyDown",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ]
+              "description": "Used to prepend a presentational icon or similar element to the combobox.",
+              "name": "prefix"
             },
             {
-              "kind": "method",
-              "name": "handleClearClick",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "MouseEvent"
-                  }
-                }
-              ]
+              "description": "Used to append a presentational icon or similar element to the combobox.",
+              "name": "suffix"
             },
             {
-              "kind": "method",
-              "name": "clearCombobox",
-              "privacy": "private"
+              "description": "An icon to use in lieu of the default clear icon.",
+              "name": "clear-icon"
             },
             {
-              "kind": "method",
-              "name": "preventLoosingFocus",
-              "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": "handleOptionClick",
+              "description": "Text that describes how to use the combobox. Alternatively, you can use the `help-text` attribute.",
+              "name": "help-text"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "dependencies",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{ 'syn-icon': SynIcon, 'syn-popup': SynPopup, }"
+            },
+            {
+              "kind": "field",
+              "name": "formControlController",
               "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "MouseEvent"
-                  }
-                }
-              ]
+              "readonly": true,
+              "default": "new FormControlController(this, { assumeInteractionOn: ['syn-blur', 'syn-input'], })"
             },
             {
-              "kind": "method",
-              "name": "selectNextOption",
+              "kind": "field",
+              "name": "hasSlotController",
               "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."
+              "readonly": true,
+              "default": "new HasSlotController(this, 'help-text', 'label')"
             },
             {
-              "kind": "method",
-              "name": "getAllFilteredOptions",
-              "privacy": "private"
+              "kind": "field",
+              "name": "localize",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new LocalizeController(this)"
             },
             {
-              "kind": "method",
-              "name": "getCurrentOption",
+              "kind": "field",
+              "name": "closeWatcher",
+              "type": {
+                "text": "CloseWatcher | null"
+              },
               "privacy": "private"
             },
             {
-              "kind": "method",
-              "name": "setCurrentOption",
+              "kind": "field",
+              "name": "lastOption",
+              "type": {
+                "text": "SynOption | undefined"
+              },
               "privacy": "private",
-              "parameters": [
-                {
-                  "name": "option",
-                  "type": {
-                    "text": "SynOption | null"
-                  }
-                }
-              ]
+              "description": "The last syn-option, that was selected by click or via keyboard navigation"
             },
             {
-              "kind": "method",
-              "name": "updateSelectedOptionsCacheAndValue",
+              "kind": "field",
+              "name": "isOptionRendererTriggered",
+              "type": {
+                "text": "boolean"
+              },
               "privacy": "private",
-              "parameters": [
-                {
-                  "name": "option",
-                  "type": {
-                    "text": "SynOption | undefined"
-                  }
-                }
-              ],
-              "description": "Updates the selected options cache, the current value, and the display value"
+              "default": "false"
             },
             {
-              "kind": "method",
-              "name": "setSelectedOptionToSelected",
-              "privacy": "private"
+              "kind": "field",
+              "name": "isInitialized",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
             },
             {
-              "kind": "method",
-              "name": "handleInvalid",
-              "privacy": "private",
-              "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"
+              },
+              "privacy": "private",
+              "default": "false"
             },
             {
-              "kind": "method",
-              "name": "getForm",
-              "return": {
-                "type": {
-                  "text": "HTMLFormElement | null"
-                }
+              "kind": "field",
+              "name": "displayLabel",
+              "type": {
+                "text": "string"
               },
-              "description": "Gets the associated form, if one exists."
+              "default": "''"
             },
             {
-              "kind": "method",
-              "name": "reportValidity",
-              "description": "Checks for validity and shows the browser's validation message if the control is invalid."
-            },
-            {
-              "kind": "method",
-              "name": "setCustomValidity",
-              "parameters": [
-                {
-                  "name": "message",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ],
-              "description": "Sets a custom validation message. Pass an empty string to restore validity."
-            },
-            {
-              "kind": "method",
-              "name": "focus",
-              "parameters": [
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "FocusOptions"
-                  }
-                }
-              ],
-              "description": "Sets focus on the control."
-            },
-            {
-              "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": ""
-                }
-              },
-              "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"
-            },
-            {
-              "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": "field",
+              "name": "selectedOption",
+              "type": {
+                "text": "SynOption | undefined"
               }
             },
             {
-              "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"
+              "kind": "field",
+              "name": "numberFilteredOptions",
+              "type": {
+                "text": "number"
+              },
+              "default": "0"
             },
             {
-              "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied.",
-              "name": "syn-invalid",
-              "reactName": "onSynInvalid",
-              "eventName": "SynInvalidEvent"
+              "kind": "field",
+              "name": "cachedOptions",
+              "type": {
+                "text": "SynOption []"
+              },
+              "default": "[]"
             },
             {
-              "description": "Emitted when the combobox menu fails to open.",
-              "name": "syn-error",
-              "reactName": "onSynError",
-              "eventName": "SynErrorEvent"
-            }
-          ],
-          "attributes": [
-            {
+              "kind": "field",
               "name": "name",
               "type": {
                 "text": "string"
               },
               "default": "''",
               "description": "The name of the combobox, submitted as a name/value pair with form data.",
-              "fieldName": "name"
+              "attribute": "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.",
-              "fieldName": "value"
+              "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."
             },
             {
+              "kind": "field",
               "name": "size",
               "type": {
                 "text": "'small' | 'medium' | 'large'"
               },
               "default": "'medium'",
               "description": "The combobox's size.",
-              "fieldName": "size"
+              "attribute": "size",
+              "reflects": true
             },
             {
+              "kind": "field",
               "name": "placeholder",
               "type": {
                 "text": "string"
               },
               "default": "''",
               "description": "Placeholder text to show as a hint when the combobox is empty.",
-              "fieldName": "placeholder"
+              "attribute": "placeholder"
             },
             {
+              "kind": "field",
               "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Disables the combobox control.",
-              "fieldName": "disabled"
+              "attribute": "disabled",
+              "reflects": true
             },
             {
+              "kind": "field",
               "name": "clearable",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Adds a clear button when the combobox is not empty.",
-              "fieldName": "clearable"
+              "attribute": "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.",
-              "fieldName": "open"
+              "attribute": "open",
+              "reflects": true
             },
             {
+              "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.",
-              "fieldName": "hoist"
+              "attribute": "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.",
-              "fieldName": "label"
+              "attribute": "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.",
-              "fieldName": "placement"
+              "attribute": "placement",
+              "reflects": true
             },
             {
-              "name": "help-text",
+              "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.",
-              "fieldName": "helpText"
+              "attribute": "help-text"
             },
             {
+              "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.",
-              "fieldName": "form"
+              "attribute": "form",
+              "reflects": true
             },
             {
+              "kind": "field",
               "name": "required",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "The combobox's required attribute.",
-              "fieldName": "required"
-            },
+              "attribute": "required",
+              "reflects": true
+            },
             {
+              "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.",
-              "fieldName": "restricted"
+              "attribute": "restricted",
+              "reflects": true
             },
             {
+              "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.",
-              "fieldName": "getOption"
+              "attribute": "getOption"
             },
             {
+              "kind": "field",
               "name": "filter",
               "type": {
                 "text": "(option: SynOption, queryString: string) => boolean"
@@ -3216,340 +2941,615 @@
                   "text": ""
                 }
               },
-              "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": [
+              "attribute": "filter"
+            },
             {
-              "name": "combobox.show",
-              "description": "The animation to use when showing the combobox."
+              "kind": "field",
+              "name": "validity",
+              "description": "Gets the validity state object",
+              "readonly": true
             },
             {
-              "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": "field",
+              "name": "validationMessage",
+              "description": "Gets the validation message",
+              "readonly": true
+            },
             {
-              "description": "The component's base wrapper.",
-              "name": "base"
+              "kind": "method",
+              "name": "addOpenListeners",
+              "privacy": "private"
             },
             {
-              "description": "The header that wraps both the summary and the expand/collapse icon.",
-              "name": "header"
+              "kind": "method",
+              "name": "removeOpenListeners",
+              "privacy": "private"
             },
             {
-              "description": "The container that wraps the summary.",
-              "name": "summary"
+              "kind": "method",
+              "name": "handleFocus",
+              "privacy": "private"
             },
             {
-              "description": "The container that wraps the expand/collapse icons.",
-              "name": "summary-icon"
+              "kind": "method",
+              "name": "handleBlur",
+              "privacy": "private"
             },
             {
-              "description": "The details content.",
-              "name": "content"
+              "kind": "field",
+              "name": "handleDocumentFocusIn",
+              "privacy": "private"
             },
             {
-              "description": "The container that wraps the details content.",
-              "name": "body"
-            }
-          ],
-          "slots": [
+              "kind": "field",
+              "name": "handleDocumentKeyDown",
+              "privacy": "private"
+            },
             {
-              "description": "The details' main content.",
-              "name": ""
+              "kind": "field",
+              "name": "handleDocumentMouseDown",
+              "privacy": "private"
             },
             {
-              "description": "The details' summary. Alternatively, you can use the `summary` attribute.",
-              "name": "summary"
+              "kind": "method",
+              "name": "handleLabelClick",
+              "privacy": "private"
             },
             {
-              "description": "Optional expand icon to use instead of the default. Works best with `<syn-icon>`.",
-              "name": "expand-icon"
+              "kind": "method",
+              "name": "handleComboboxMouseDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
             },
             {
-              "description": "Optional collapse icon to use instead of the default. Works best with `<syn-icon>`.",
-              "name": "collapse-icon"
-            }
-          ],
-          "members": [
+              "kind": "method",
+              "name": "handleComboboxKeyDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
+            },
             {
-              "kind": "field",
-              "name": "dependencies",
-              "type": {
-                "text": "object"
-              },
-              "static": true,
-              "default": "{ 'syn-icon': SynIcon }"
+              "kind": "method",
+              "name": "handleClearClick",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "localize",
+              "kind": "method",
+              "name": "clearCombobox",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "preventLoosingFocus",
               "privacy": "private",
-              "readonly": true,
-              "default": "new LocalizeController(this)"
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "details",
-              "type": {
-                "text": "HTMLDetailsElement"
-              }
+              "kind": "method",
+              "name": "handleOptionClick",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "header",
-              "type": {
-                "text": "HTMLElement"
-              }
+              "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": "field",
-              "name": "body",
-              "type": {
-                "text": "HTMLElement"
-              }
+              "kind": "method",
+              "name": "getAllFilteredOptions",
+              "privacy": "private"
             },
             {
-              "kind": "field",
-              "name": "expandIconSlot",
-              "type": {
-                "text": "HTMLSlotElement"
-              }
+              "kind": "method",
+              "name": "getCurrentOption",
+              "privacy": "private"
             },
             {
-              "kind": "field",
-              "name": "detailsObserver",
-              "type": {
-                "text": "MutationObserver"
-              }
+              "kind": "method",
+              "name": "setCurrentOption",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "option",
+                  "type": {
+                    "text": "SynOption | null"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "open",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the details' open state.",
-              "attribute": "open",
-              "reflects": true
+              "kind": "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": "field",
-              "name": "summary",
-              "type": {
-                "text": "string"
-              },
-              "description": "The summary to show in the header. If you need to display HTML, use the `summary` slot instead.",
-              "attribute": "summary"
+              "kind": "method",
+              "name": "setSelectedOptionToSelected",
+              "privacy": "private"
             },
             {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Disables the details so it can't be toggled.",
-              "attribute": "disabled",
-              "reflects": true
+              "kind": "method",
+              "name": "handleInvalid",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "contained",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Draws the details as contained element.",
-              "attribute": "contained",
-              "reflects": true
+              "kind": "method",
+              "name": "handlePropertiesChange"
             },
             {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "'medium' | 'large'"
+              "kind": "method",
+              "name": "handleDisabledChange"
+            },
+            {
+              "kind": "method",
+              "name": "handleValueChange"
+            },
+            {
+              "kind": "method",
+              "name": "handleOpenChange"
+            },
+            {
+              "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": "method",
+              "name": "hide",
+              "description": "Hides the listbox."
+            },
+            {
+              "kind": "method",
+              "name": "checkValidity",
+              "description": "Checks for validity but does not show a validation message.\nReturns `true` when valid and `false` when invalid."
+            },
+            {
+              "kind": "method",
+              "name": "getForm",
+              "return": {
+                "type": {
+                  "text": "HTMLFormElement | null"
+                }
               },
-              "default": "'medium'",
-              "description": "The details's size.",
-              "attribute": "size",
-              "reflects": true
+              "description": "Gets the associated form, if one exists."
             },
             {
               "kind": "method",
-              "name": "handleSummaryClick",
+              "name": "reportValidity",
+              "description": "Checks for validity and shows the browser's validation message if the control is invalid."
+            },
+            {
+              "kind": "method",
+              "name": "setCustomValidity",
+              "parameters": [
+                {
+                  "name": "message",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Sets a custom validation message. Pass an empty string to restore validity."
+            },
+            {
+              "kind": "method",
+              "name": "focus",
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ],
+              "description": "Sets focus on the control."
+            },
+            {
+              "kind": "method",
+              "name": "blur",
+              "description": "Removes focus from the control."
+            },
+            {
+              "kind": "method",
+              "name": "createComboboxOptionsFromQuery",
               "privacy": "private",
               "parameters": [
                 {
-                  "name": "event",
+                  "name": "queryString",
                   "type": {
-                    "text": "MouseEvent"
+                    "text": "string"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "handleSummaryKeyDown",
+              "name": "handleInput",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "isValidValue",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "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"
+            },
+            {
+              "kind": "method",
+              "name": "getSlottedOptGroups",
               "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
+              "return": {
+                "type": {
+                  "text": "SynOptGroup[]"
                 }
-              ]
+              }
             },
             {
               "kind": "method",
-              "name": "handleOpenChange"
+              "name": "cacheSlottedOptionsAndOptgroups",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "show",
-              "description": "Shows the details."
+              "name": "updateSelectedOptionFromValue",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
             },
             {
               "kind": "method",
-              "name": "hide",
-              "description": "Hides the details"
+              "name": "handleDefaultSlotChange",
+              "privacy": "public"
             }
           ],
           "events": [
             {
-              "description": "Emitted when the details opens.",
+              "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 details opens and all animations are complete.",
+              "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 details closes.",
+              "description": "Emitted when the combobox's menu closes.",
               "name": "syn-hide",
               "reactName": "onSynHide",
               "eventName": "SynHideEvent"
             },
             {
-              "description": "Emitted after the details closes and all animations are complete.",
+              "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.",
+              "fieldName": "name"
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The current value of the combobox, submitted as a name/value pair with form data.",
+              "fieldName": "value"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "'small' | 'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "description": "The combobox's size.",
+              "fieldName": "size"
+            },
+            {
+              "name": "placeholder",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Placeholder text to show as a hint when the combobox is empty.",
+              "fieldName": "placeholder"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the combobox control.",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "clearable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Adds a clear button when the combobox is not empty.",
+              "fieldName": "clearable"
+            },
             {
               "name": "open",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the details' open state.",
+              "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"
             },
             {
-              "name": "summary",
+              "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.",
+              "fieldName": "hoist"
+            },
+            {
+              "name": "label",
               "type": {
                 "text": "string"
               },
-              "description": "The summary to show in the header. If you need to display HTML, use the `summary` slot instead.",
-              "fieldName": "summary"
+              "default": "''",
+              "description": "The combobox's label. If you need to display HTML, use the `label` slot instead.",
+              "fieldName": "label"
             },
             {
-              "name": "disabled",
+              "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"
+            },
+            {
+              "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.",
+              "fieldName": "helpText"
+            },
+            {
+              "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.",
+              "fieldName": "form"
+            },
+            {
+              "name": "required",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disables the details so it can't be toggled.",
-              "fieldName": "disabled"
+              "description": "The combobox's required attribute.",
+              "fieldName": "required"
             },
             {
-              "name": "contained",
+              "name": "restricted",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Draws the details as contained element.",
-              "fieldName": "contained"
+              "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": "size",
+              "name": "getOption",
               "type": {
-                "text": "'medium' | 'large'"
+                "text": "OptionRenderer"
               },
-              "default": "'medium'",
-              "description": "The details's size.",
-              "fieldName": "size"
+              "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"
+            },
+            {
+              "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": ""
+                }
+              },
+              "fieldName": "filter"
             }
           ],
           "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",
+          "summary": "Comboboxes allow you to choose items from a menu of predefined options.",
+          "tagNameWithoutPrefix": "combobox",
+          "tagName": "syn-combobox",
           "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",
+          "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",
-          "since": "2.0",
           "dependencies": [
-            "syn-icon"
+            "syn-icon",
+            "syn-popup"
           ],
           "animations": [
             {
-              "name": "details.show",
-              "description": "The animation to use when showing details. You can use `height: auto` with this animation."
+              "name": "combobox.show",
+              "description": "The animation to use when showing the combobox."
             },
             {
-              "name": "details.hide",
-              "description": "The animation to use when hiding details. You can use `height: auto` with this animation."
+              "name": "combobox.hide",
+              "description": "The animation to use when hiding the combobox."
             }
           ]
         }
@@ -3559,8 +3559,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SynDetails",
-            "module": "components/details/details.js"
+            "name": "SynCombobox",
+            "module": "components/combobox/combobox.js"
           }
         }
       ]
@@ -16272,7 +16272,7 @@
   "package": {
     "name": "@synergy-design-system/components",
     "description": "",
-    "version": "2.39.2",
+    "version": "2.40.0",
     "author": {
       "name": "SICK Global UX Foundation",
       "url": "https://www.sick.com"