@solid-design-system/components 6.12.1 → 6.13.1

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@solid-design-system/components",
-  "version": "6.12.1",
+  "version": "6.13.1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -577,7 +577,7 @@
               "name": "variant",
               "description": "The brandshape's theme variant.",
               "value": {
-                "type": "| 'neutral-100'\n    | 'primary'\n    | 'white'\n    | 'border-primary'\n    | 'border-white'\n    | 'image'",
+                "type": "| 'neutral-100'\n    | 'primary'\n    | 'white'\n    | 'border-primary'\n    | 'border-white'\n    | 'primary|80'\n    | 'white|80'\n    | 'image'",
                 "default": "'primary'"
               }
             },
@@ -613,7 +613,7 @@
               {
                 "name": "variant",
                 "description": "The brandshape's theme variant.",
-                "type": "| 'neutral-100'\n    | 'primary'\n    | 'white'\n    | 'border-primary'\n    | 'border-white'\n    | 'image'"
+                "type": "| 'neutral-100'\n    | 'primary'\n    | 'white'\n    | 'border-primary'\n    | 'border-white'\n    | 'primary|80'\n    | 'white|80'\n    | 'image'"
               },
               {
                 "name": "shapes",
@@ -1523,84 +1523,95 @@
           }
         },
         {
-          "name": "sd-combobox",
-          "description": "Comboboxes allow you to choose items from a menu of predefined options.\n---\n\n\n### **Events:**\n - **sd-change** - Emitted when the control's value changes.\n- **sd-clear** - Emitted when the control's value is cleared.\n- **sd-input** - Emitted when the control receives input.\n- **sd-focus** - Emitted when the control gains focus.\n- **sd-blur** - Emitted when the control loses focus.\n- **sd-show** - Emitted when the combobox's menu opens.\n- **sd-after-show** - Emitted after the combobox's menu opens and all animations are complete.\n- **sd-hide** - Emitted when the combobox's menu closes.\n- **sd-after-hide** - Emitted after the combobox's menu closes and all animations are complete.\n- **sd-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n- **sd-error** - Emitted when the combobox menu fails to open.\n\n### **Methods:**\n - **hide()** - Hides the listbox.\n- **checkValidity()** - Checks for validity but does not show a validation message.\nReturns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **focus(options: _FocusOptions_)** - Sets focus on the control.\n- **blur()** - Removes focus from the control.\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The listbox options. Must be `<sd-option>` elements. You can use `<sd-optgroup>`'s to group items visually.\n- **label** - The combobox's label. Alternatively, you can use the `label` attribute.\n- **help-text** - Text that describes how to use the combobox. Alternatively, you can use the `help-text` attribute.\n- **left** - Used to prepend a presentational icon or similar element to the combobox.\n- **right** - Used to append a presentational icon or similar element to the combobox.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **expand-icon** - The icon to show when the control is expanded and collapsed. Rotates on open and close.\n\n### **CSS Properties:**\n - **--tag-max-width** - Set the maximum width of the tags and to show an ellipsis. Defaults to \"15ch\" _(default: undefined)_\n- **--sd-form-control--invalid-color-background** - The background color for form controls in invalid state. _(default: undefined)_\n- **--sd-form-control-color-text** - The text color for form controls. _(default: undefined)_\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, combobox, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The combobox's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **combobox** - The container that wraps the prefix, combobox, clear icon, and expand button.\n- **left** - The container that wraps the left icon slot.\n- **right** - The container that wraps the right icon slot.\n- **display-input** - The element that displays the selected option's label, an `<input>` element.\n- **listbox** - The listbox container where the options are slotted and the filtered options list exists.\n- **filtered-listbox** - The container that wraps the filtered options.\n- **clear-button** - The clear button.\n- **expand-icon** - The container that wraps the expand icon.",
+          "name": "sd-datepicker",
+          "description": "\n---\n\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.",
           "doc-url": "",
           "attributes": [
             {
-              "name": "name",
-              "description": "The name of the combobox, submitted as a name/value pair with form data.",
-              "value": { "type": "string", "default": "''" }
+              "name": "locale",
+              "description": "Used for formatting and announcements (e.g., 'en-US', 'de-DE').",
+              "value": { "type": "string", "default": "'en-US'" }
             },
             {
               "name": "value",
-              "description": "The current value of the combobox, submitted as a name/value pair with form data.",
-              "value": { "type": "string | string[]", "default": "''" }
+              "description": "Selected date when not in range mode.\nEg: `value=\"2025.11.10\"` or `value=\"2025-11-10\"` (both accepted)",
+              "value": { "type": "string | null", "default": "null" }
             },
             {
-              "name": "size",
-              "description": "The combobox's size.",
-              "value": { "type": "'lg' | 'md' | 'sm'", "default": "'lg'" }
+              "name": "range",
+              "description": "Enables date range selection when true.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "placeholder",
-              "description": "Placeholder text to show as a hint when the combobox is empty.",
-              "value": { "type": "string", "default": "''" }
+              "name": "range-start",
+              "description": "Range start date when in range mode.\nEg: `range-start=\"2025.11.10\"` or `range-start=\"2025-11-10\"` (both accepted)",
+              "value": { "type": "string | null", "default": "null" }
             },
             {
-              "name": "max-options-tag-label",
-              "description": "Label text shown on tag if max-options-visible is reached.",
-              "value": { "type": "string", "default": "''" }
+              "name": "range-end",
+              "description": "Range end date when in range mode.\nEg: `range-end=\"2025.11.10\"` or `range-end=\"2025-11-10\"` (both accepted)",
+              "value": { "type": "string | null", "default": "null" }
             },
             {
-              "name": "disabled",
-              "description": "Disables the combobox control.",
+              "name": "allowSameDayRange",
+              "description": "Allows selecting the same start and end date when true.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "visually-disabled",
-              "description": "Styles the combobox as if it was disabled and enables aria-disabled",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "min",
+              "description": "Minimum selectable date\nEg: `min=\"2025.11.10\"` or `min=\"2025-11-10\"` (both accepted)",
+              "value": {
+                "type": "string | number | Date | undefined",
+                "default": "undefined"
+              }
             },
             {
-              "name": "clearable",
-              "description": "Adds a clear button when the combobox is not empty.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "max",
+              "description": "Maximum selectable date\nEg: `max=\"2025.11.10\"` or `max=\"2025-11-10\"` (both accepted)",
+              "value": {
+                "type": "string | number | Date | undefined",
+                "default": "undefined"
+              }
             },
             {
-              "name": "open",
-              "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.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "view-month",
+              "description": "The month initially displayed by the calendar grid.\nEg: `view-month=\"2026-07\"` or `view-month=\"2026.07\"`",
+              "value": { "type": "Date | null", "default": "null" }
             },
             {
-              "name": "hoist",
-              "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.",
+              "name": "firstDayOfWeek",
+              "description": "First day of the week (0=Sun .. 6=Sat). If null, defaults to 1 (Monday).",
+              "value": { "type": "number | null", "default": "null" }
+            },
+            {
+              "name": "disabled-weekends",
+              "description": "When true, weekends (Saturday/Sunday) are disabled.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "label",
-              "description": "The combobox's label. If you need to display HTML, use the `label` slot instead.",
-              "value": { "type": "string", "default": "''" }
+              "name": "disabled-dates",
+              "description": "List of disabled dates.\nEg: `disabled-dates=\"2025-10-31,2025-11-11\"` or `disabled-dates=\"2025.10.31,2025.11.11\"` (both accepted)",
+              "value": { "type": "string[] | string", "default": "[]" }
             },
             {
-              "name": "placement",
-              "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.",
-              "value": { "type": "'top' | 'bottom'", "default": "'bottom'" }
+              "name": "size",
+              "description": "Size of the input and calendar visuals.",
+              "value": { "type": "'lg' | 'md' | 'sm'", "default": "'lg'" }
             },
             {
-              "name": "help-text",
-              "description": "The combobox's help text. If you need to display HTML, use the `help-text` slot instead.",
-              "value": { "type": "string", "default": "''" }
+              "name": "alignment",
+              "description": "Horizontal alignment of the flyout relative to the input.",
+              "value": { "type": "'left' | 'right'", "default": "'left'" }
             },
             {
-              "name": "form",
-              "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.",
+              "name": "label",
+              "description": "Text label for the input. Can be overridden with slot=\"label\".",
               "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "required",
-              "description": "The combobox's required attribute.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "help-text",
+              "description": "Help text shown below the input. Can be overridden with slot=\"help-text\".",
+              "value": { "type": "string", "default": "''" }
             },
             {
               "name": "floating-label",
@@ -1608,51 +1619,49 @@
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "type",
-              "description": "The type of input. Works the same as a native `<input>` element, but only a subset of types are supported. Defaults\nto `text`.",
-              "value": { "type": "'search' | 'text'", "default": "'text'" }
+              "name": "disabled",
+              "description": "Disables the control entirely when true.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "getOption",
-              "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.",
-              "value": {
-                "type": "OptionRenderer",
-                "default": "defaultOptionRenderer"
-              }
+              "name": "required",
+              "description": "Makes the input a required field.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "multiple",
-              "description": "Allows more than one option to be selected.",
+              "name": "visually-disabled",
+              "description": "Makes the control non-interactive visually (like disabled) without disabling it functionally.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "useTags",
-              "description": "Uses interactive `sd-tag` elements representing individual options in the display input when `multiple` is `true`. It cannot be opted out.",
-              "value": { "type": "boolean", "default": "true" }
+              "name": "style-on-valid",
+              "description": "When true, applies success styling for valid selections.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "max-options-visible",
-              "description": "The maximum number of selected options to show when `multiple` and `useTags` are `true`. After the maximum, \"+n\" will be shown to\nindicate the number of additional items that are selected. Set to 0 to remove the limit.",
-              "value": { "type": "number", "default": "3" }
+              "name": "readonly",
+              "description": "Makes the input read-only (non-editable) when true.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "style-on-valid",
-              "description": "Shows success styles if the validity of the input is valid.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "placement",
+              "description": "Preferred placement of the flyout relative to the input (top|bottom).",
+              "value": { "type": "'top' | 'bottom'", "default": "'bottom'" }
             },
             {
-              "name": "filter",
-              "description": "A function used to filter options in the combobox component.\nThe default filter method is a case- and diacritic-insensitive string comparison.",
-              "value": {
-                "type": "(option: SdOption, queryString: string) => boolean"
-              }
+              "name": "placeholder",
+              "description": "Placeholder text for the input when no date is selected.",
+              "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "getTag",
-              "description": "A function that customizes the tags to be rendered when multiple=true. The first argument is the option, the second\nis the current tag's index.  The function should return either a Lit TemplateResult or a string containing trusted HTML of the symbol to render at\nthe specified value.",
-              "value": {
-                "type": "(option: SdOption, index: number) => TemplateResult | string | HTMLElement"
-              }
+              "name": "name",
+              "description": "The name of the datepicker, submitted as a name/value pair with form data.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "form",
+              "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`.",
+              "value": { "type": "string", "default": "''" }
             },
             {
               "name": "dir",
@@ -1665,176 +1674,97 @@
               "value": { "type": "string" }
             }
           ],
-          "slots": [
-            {
-              "name": "",
-              "description": "The listbox options. Must be `<sd-option>` elements. You can use `<sd-optgroup>`'s to group items visually."
-            },
-            {
-              "name": "label",
-              "description": "The combobox's label. Alternatively, you can use the `label` attribute."
-            },
-            {
-              "name": "help-text",
-              "description": "Text that describes how to use the combobox. Alternatively, you can use the `help-text` attribute."
-            },
-            {
-              "name": "left",
-              "description": "Used to prepend a presentational icon or similar element to the combobox."
-            },
-            {
-              "name": "right",
-              "description": "Used to append a presentational icon or similar element to the combobox."
-            },
-            {
-              "name": "clear-icon",
-              "description": "An icon to use in lieu of the default clear icon."
-            },
-            {
-              "name": "expand-icon",
-              "description": "The icon to show when the control is expanded and collapsed. Rotates on open and close."
-            }
-          ],
-          "events": [
-            {
-              "name": "sd-change",
-              "description": "Emitted when the control's value changes."
-            },
-            {
-              "name": "sd-clear",
-              "description": "Emitted when the control's value is cleared."
-            },
-            {
-              "name": "sd-input",
-              "description": "Emitted when the control receives input."
-            },
-            {
-              "name": "sd-focus",
-              "description": "Emitted when the control gains focus."
-            },
-            {
-              "name": "sd-blur",
-              "description": "Emitted when the control loses focus."
-            },
-            {
-              "name": "sd-show",
-              "description": "Emitted when the combobox's menu opens."
-            },
-            {
-              "name": "sd-after-show",
-              "description": "Emitted after the combobox's menu opens and all animations are complete."
-            },
-            {
-              "name": "sd-hide",
-              "description": "Emitted when the combobox's menu closes."
-            },
-            {
-              "name": "sd-after-hide",
-              "description": "Emitted after the combobox's menu closes and all animations are complete."
-            },
-            {
-              "name": "sd-invalid",
-              "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
-            },
-            {
-              "name": "sd-error",
-              "description": "Emitted when the combobox menu fails to open."
-            }
-          ],
+          "events": [],
           "js": {
             "properties": [
-              { "name": "popup", "type": "SdPopup" },
-              { "name": "displayInputValue", "type": "string" },
-              { "name": "selectedTextLabel", "type": "string" },
-              { "name": "selectedOptions", "type": "(SdOption | undefined)[]" },
-              {
-                "name": "filteredOptions",
-                "type": "(SdOption | SdOptgroup | undefined)[]"
-              },
               {
-                "name": "allOptions",
-                "type": "(SdOption | SdOptgroup | undefined)[]"
+                "name": "localize",
+                "description": "Localize controller used to fetch localized terms/labels."
               },
-              { "name": "lastOption", "type": "SdOption | undefined" },
               {
-                "name": "name",
-                "description": "The name of the combobox, submitted as a name/value pair with form data.",
+                "name": "locale",
+                "description": "Used for formatting and announcements (e.g., 'en-US', 'de-DE').",
                 "type": "string"
               },
               {
                 "name": "value",
-                "description": "The current value of the combobox, submitted as a name/value pair with form data.",
-                "type": "string | string[]"
+                "description": "Selected date when not in range mode.\nEg: `value=\"2025.11.10\"` or `value=\"2025-11-10\"` (both accepted)",
+                "type": "string | null"
               },
               {
-                "name": "defaultValue",
-                "description": "The default value of the form control. Primarily used for resetting the form control.",
-                "type": "string"
+                "name": "range",
+                "description": "Enables date range selection when true.",
+                "type": "boolean"
               },
               {
-                "name": "size",
-                "description": "The combobox's size.",
-                "type": "'lg' | 'md' | 'sm'"
+                "name": "rangeStart",
+                "description": "Range start date when in range mode.\nEg: `range-start=\"2025.11.10\"` or `range-start=\"2025-11-10\"` (both accepted)",
+                "type": "string | null"
               },
               {
-                "name": "placeholder",
-                "description": "Placeholder text to show as a hint when the combobox is empty.",
-                "type": "string"
+                "name": "rangeEnd",
+                "description": "Range end date when in range mode.\nEg: `range-end=\"2025.11.10\"` or `range-end=\"2025-11-10\"` (both accepted)",
+                "type": "string | null"
               },
               {
-                "name": "maxOptionsTagLabel",
-                "description": "Label text shown on tag if max-options-visible is reached.",
-                "type": "string"
+                "name": "allowSameDayRange",
+                "description": "Allows selecting the same start and end date when true.",
+                "type": "boolean"
               },
               {
-                "name": "disabled",
-                "description": "Disables the combobox control.",
-                "type": "boolean"
+                "name": "min",
+                "description": "Minimum selectable date\nEg: `min=\"2025.11.10\"` or `min=\"2025-11-10\"` (both accepted)",
+                "type": "string | number | Date | undefined"
               },
               {
-                "name": "visuallyDisabled",
-                "description": "Styles the combobox as if it was disabled and enables aria-disabled",
-                "type": "boolean"
+                "name": "max",
+                "description": "Maximum selectable date\nEg: `max=\"2025.11.10\"` or `max=\"2025-11-10\"` (both accepted)",
+                "type": "string | number | Date | undefined"
               },
               {
-                "name": "clearable",
-                "description": "Adds a clear button when the combobox is not empty.",
-                "type": "boolean"
+                "name": "viewMonth",
+                "description": "The month initially displayed by the calendar grid.\nEg: `view-month=\"2026-07\"` or `view-month=\"2026.07\"`",
+                "type": "Date | null"
               },
               {
-                "name": "open",
-                "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.",
-                "type": "boolean"
+                "name": "firstDayOfWeek",
+                "description": "First day of the week (0=Sun .. 6=Sat). If null, defaults to 1 (Monday).",
+                "type": "number | null"
               },
               {
-                "name": "hoist",
-                "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.",
+                "name": "disabledWeekends",
+                "description": "When true, weekends (Saturday/Sunday) are disabled.",
                 "type": "boolean"
               },
               {
-                "name": "label",
-                "description": "The combobox's label. If you need to display HTML, use the `label` slot instead.",
-                "type": "string"
+                "name": "disabledDates",
+                "description": "List of disabled dates.\nEg: `disabled-dates=\"2025-10-31,2025-11-11\"` or `disabled-dates=\"2025.10.31,2025.11.11\"` (both accepted)",
+                "type": "string[] | string"
               },
               {
-                "name": "placement",
-                "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.",
-                "type": "'top' | 'bottom'"
+                "name": "isDateDisabled",
+                "description": "Custom predicate that can disable specific dates at runtime.",
+                "type": "((d: Date) => boolean) | null"
               },
               {
-                "name": "helpText",
-                "description": "The combobox's help text. If you need to display HTML, use the `help-text` slot instead.",
-                "type": "string"
+                "name": "size",
+                "description": "Size of the input and calendar visuals.",
+                "type": "'lg' | 'md' | 'sm'"
               },
               {
-                "name": "form",
-                "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.",
+                "name": "alignment",
+                "description": "Horizontal alignment of the flyout relative to the input.",
+                "type": "'left' | 'right'"
+              },
+              {
+                "name": "label",
+                "description": "Text label for the input. Can be overridden with slot=\"label\".",
                 "type": "string"
               },
               {
-                "name": "required",
-                "description": "The combobox's required attribute.",
-                "type": "boolean"
+                "name": "helpText",
+                "description": "Help text shown below the input. Can be overridden with slot=\"help-text\".",
+                "type": "string"
               },
               {
                 "name": "floatingLabel",
@@ -1842,350 +1772,399 @@
                 "type": "boolean"
               },
               {
-                "name": "type",
-                "description": "The type of input. Works the same as a native `<input>` element, but only a subset of types are supported. Defaults\nto `text`.",
-                "type": "'search' | 'text'"
-              },
-              {
-                "name": "getOption",
-                "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.",
-                "type": "OptionRenderer"
-              },
-              {
-                "name": "multiple",
-                "description": "Allows more than one option to be selected.",
+                "name": "disabled",
+                "description": "Disables the control entirely when true.",
                 "type": "boolean"
               },
               {
-                "name": "useTags",
-                "description": "Uses interactive `sd-tag` elements representing individual options in the display input when `multiple` is `true`. It cannot be opted out.",
+                "name": "required",
+                "description": "Makes the input a required field.",
                 "type": "boolean"
               },
               {
-                "name": "maxOptionsVisible",
-                "description": "The maximum number of selected options to show when `multiple` and `useTags` are `true`. After the maximum, \"+n\" will be shown to\nindicate the number of additional items that are selected. Set to 0 to remove the limit.",
-                "type": "number"
+                "name": "visuallyDisabled",
+                "description": "Makes the control non-interactive visually (like disabled) without disabling it functionally.",
+                "type": "boolean"
               },
               {
                 "name": "styleOnValid",
-                "description": "Shows success styles if the validity of the input is valid.",
+                "description": "When true, applies success styling for valid selections.",
                 "type": "boolean"
               },
               {
-                "name": "filter",
-                "description": "A function used to filter options in the combobox component.\nThe default filter method is a case- and diacritic-insensitive string comparison.",
-                "type": "(option: SdOption, queryString: string) => boolean"
-              },
-              {
-                "name": "validity",
-                "description": "Gets the validity state object"
-              },
-              {
-                "name": "validationMessage",
-                "description": "Gets the validation message"
+                "name": "readonly",
+                "description": "Makes the input read-only (non-editable) when true.",
+                "type": "boolean"
               },
               {
-                "name": "dir",
-                "description": "The element's directionality.",
-                "type": "'ltr' | 'rtl' | 'auto'"
+                "name": "placement",
+                "description": "Preferred placement of the flyout relative to the input (top|bottom).",
+                "type": "'top' | 'bottom'"
               },
               {
-                "name": "lang",
-                "description": "The element's language.",
+                "name": "placeholder",
+                "description": "Placeholder text for the input when no date is selected.",
                 "type": "string"
-              }
-            ],
-            "events": [
-              {
-                "name": "sd-change",
-                "description": "Emitted when the control's value changes."
-              },
-              {
-                "name": "sd-clear",
-                "description": "Emitted when the control's value is cleared."
-              },
-              {
-                "name": "sd-input",
-                "description": "Emitted when the control receives input."
               },
               {
-                "name": "sd-focus",
-                "description": "Emitted when the control gains focus."
+                "name": "name",
+                "description": "The name of the datepicker, submitted as a name/value pair with form data.",
+                "type": "string"
               },
               {
-                "name": "sd-blur",
-                "description": "Emitted when the control loses focus."
+                "name": "form",
+                "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`.",
+                "type": "string"
               },
               {
-                "name": "sd-show",
-                "description": "Emitted when the combobox's menu opens."
+                "name": "hasFocus",
+                "description": "True when the input or calendar has focus.",
+                "type": "boolean"
               },
               {
-                "name": "sd-after-show",
-                "description": "Emitted after the combobox's menu opens and all animations are complete."
+                "name": "showValidStyle",
+                "description": "Whether to show the valid styling state.",
+                "type": "boolean"
               },
               {
-                "name": "sd-hide",
-                "description": "Emitted when the combobox's menu closes."
+                "name": "showInvalidStyle",
+                "description": "Whether to show the invalid styling state.",
+                "type": "boolean"
               },
               {
-                "name": "sd-after-hide",
-                "description": "Emitted after the combobox's menu closes and all animations are complete."
+                "name": "currentPlacement",
+                "description": "Actual placement currently used by the flyout."
               },
+              { "name": "popup", "type": "SdPopup" },
+              { "name": "validity" },
+              { "name": "validationMessage" },
               {
-                "name": "sd-invalid",
-                "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
+                "name": "dir",
+                "description": "The element's directionality.",
+                "type": "'ltr' | 'rtl' | 'auto'"
               },
               {
-                "name": "sd-error",
-                "description": "Emitted when the combobox menu fails to open."
+                "name": "lang",
+                "description": "The element's language.",
+                "type": "string"
               }
-            ]
+            ],
+            "events": []
           }
         },
         {
-          "name": "sd-datepicker",
-          "description": "\n---\n\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.",
+          "name": "sd-combobox",
+          "description": "Comboboxes allow you to choose items from a menu of predefined options.\n---\n\n\n### **Events:**\n - **sd-change** - Emitted when the control's value changes.\n- **sd-clear** - Emitted when the control's value is cleared.\n- **sd-input** - Emitted when the control receives input.\n- **sd-focus** - Emitted when the control gains focus.\n- **sd-blur** - Emitted when the control loses focus.\n- **sd-show** - Emitted when the combobox's menu opens.\n- **sd-after-show** - Emitted after the combobox's menu opens and all animations are complete.\n- **sd-hide** - Emitted when the combobox's menu closes.\n- **sd-after-hide** - Emitted after the combobox's menu closes and all animations are complete.\n- **sd-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n- **sd-error** - Emitted when the combobox menu fails to open.\n\n### **Methods:**\n - **hide()** - Hides the listbox.\n- **checkValidity()** - Checks for validity but does not show a validation message.\nReturns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **focus(options: _FocusOptions_)** - Sets focus on the control.\n- **blur()** - Removes focus from the control.\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The listbox options. Must be `<sd-option>` elements. You can use `<sd-optgroup>`'s to group items visually.\n- **label** - The combobox's label. Alternatively, you can use the `label` attribute.\n- **help-text** - Text that describes how to use the combobox. Alternatively, you can use the `help-text` attribute.\n- **left** - Used to prepend a presentational icon or similar element to the combobox.\n- **right** - Used to append a presentational icon or similar element to the combobox.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **expand-icon** - The icon to show when the control is expanded and collapsed. Rotates on open and close.\n\n### **CSS Properties:**\n - **--tag-max-width** - Set the maximum width of the tags and to show an ellipsis. Defaults to \"15ch\" _(default: undefined)_\n- **--sd-form-control--invalid-color-background** - The background color for form controls in invalid state. _(default: undefined)_\n- **--sd-form-control-color-text** - The text color for form controls. _(default: undefined)_\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, combobox, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The combobox's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **combobox** - The container that wraps the prefix, combobox, clear icon, and expand button.\n- **left** - The container that wraps the left icon slot.\n- **right** - The container that wraps the right icon slot.\n- **display-input** - The element that displays the selected option's label, an `<input>` element.\n- **listbox** - The listbox container where the options are slotted and the filtered options list exists.\n- **filtered-listbox** - The container that wraps the filtered options.\n- **clear-button** - The clear button.\n- **expand-icon** - The container that wraps the expand icon.",
           "doc-url": "",
           "attributes": [
             {
-              "name": "locale",
-              "description": "Used for formatting and announcements (e.g., 'en-US', 'de-DE').",
-              "value": { "type": "string", "default": "'en-US'" }
+              "name": "name",
+              "description": "The name of the combobox, submitted as a name/value pair with form data.",
+              "value": { "type": "string", "default": "''" }
             },
             {
               "name": "value",
-              "description": "Selected date when not in range mode.\nEg: `value=\"2025.11.10\"` or `value=\"2025-11-10\"` (both accepted)",
-              "value": { "type": "string | null", "default": "null" }
+              "description": "The current value of the combobox, submitted as a name/value pair with form data.",
+              "value": { "type": "string | string[]", "default": "''" }
             },
             {
-              "name": "range",
-              "description": "Enables date range selection when true.",
+              "name": "size",
+              "description": "The combobox's size.",
+              "value": { "type": "'lg' | 'md' | 'sm'", "default": "'lg'" }
+            },
+            {
+              "name": "placeholder",
+              "description": "Placeholder text to show as a hint when the combobox is empty.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "max-options-tag-label",
+              "description": "Label text shown on tag if max-options-visible is reached.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "disabled",
+              "description": "Disables the combobox control.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "range-start",
-              "description": "Range start date when in range mode.\nEg: `range-start=\"2025.11.10\"` or `range-start=\"2025-11-10\"` (both accepted)",
-              "value": { "type": "string | null", "default": "null" }
+              "name": "visually-disabled",
+              "description": "Styles the combobox as if it was disabled and enables aria-disabled",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "range-end",
-              "description": "Range end date when in range mode.\nEg: `range-end=\"2025.11.10\"` or `range-end=\"2025-11-10\"` (both accepted)",
-              "value": { "type": "string | null", "default": "null" }
+              "name": "clearable",
+              "description": "Adds a clear button when the combobox is not empty.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "allowSameDayRange",
-              "description": "Allows selecting the same start and end date when true.",
+              "name": "open",
+              "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.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "min",
-              "description": "Minimum selectable date\nEg: `min=\"2025.11.10\"` or `min=\"2025-11-10\"` (both accepted)",
+              "name": "hoist",
+              "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.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "label",
+              "description": "The combobox's label. If you need to display HTML, use the `label` slot instead.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "placement",
+              "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.",
+              "value": { "type": "'top' | 'bottom'", "default": "'bottom'" }
+            },
+            {
+              "name": "help-text",
+              "description": "The combobox's help text. If you need to display HTML, use the `help-text` slot instead.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "form",
+              "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.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "required",
+              "description": "The combobox's required attribute.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "floating-label",
+              "description": "Enables the floating label behavior for the input.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "type",
+              "description": "The type of input. Works the same as a native `<input>` element, but only a subset of types are supported. Defaults\nto `text`.",
+              "value": { "type": "'search' | 'text'", "default": "'text'" }
+            },
+            {
+              "name": "getOption",
+              "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.",
               "value": {
-                "type": "string | number | Date | undefined",
-                "default": "undefined"
+                "type": "OptionRenderer",
+                "default": "defaultOptionRenderer"
               }
             },
             {
-              "name": "max",
-              "description": "Maximum selectable date\nEg: `max=\"2025.11.10\"` or `max=\"2025-11-10\"` (both accepted)",
+              "name": "multiple",
+              "description": "Allows more than one option to be selected.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "useTags",
+              "description": "Uses interactive `sd-tag` elements representing individual options in the display input when `multiple` is `true`. It cannot be opted out.",
+              "value": { "type": "boolean", "default": "true" }
+            },
+            {
+              "name": "max-options-visible",
+              "description": "The maximum number of selected options to show when `multiple` and `useTags` are `true`. After the maximum, \"+n\" will be shown to\nindicate the number of additional items that are selected. Set to 0 to remove the limit.",
+              "value": { "type": "number", "default": "3" }
+            },
+            {
+              "name": "style-on-valid",
+              "description": "Shows success styles if the validity of the input is valid.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "filter",
+              "description": "A function used to filter options in the combobox component.\nThe default filter method is a case- and diacritic-insensitive string comparison.",
               "value": {
-                "type": "string | number | Date | undefined",
-                "default": "undefined"
+                "type": "(option: SdOption, queryString: string) => boolean"
+              }
+            },
+            {
+              "name": "getTag",
+              "description": "A function that customizes the tags to be rendered when multiple=true. The first argument is the option, the second\nis the current tag's index.  The function should return either a Lit TemplateResult or a string containing trusted HTML of the symbol to render at\nthe specified value.",
+              "value": {
+                "type": "(option: SdOption, index: number) => TemplateResult | string | HTMLElement"
               }
             },
             {
-              "name": "view-month",
-              "description": "The month initially displayed by the calendar grid.\nEg: `view-month=\"2026-07\"` or `view-month=\"2026.07\"`",
-              "value": { "type": "Date | null", "default": "null" }
+              "name": "dir",
+              "description": "The element's directionality.",
+              "value": { "type": "'ltr' | 'rtl' | 'auto'" }
             },
             {
-              "name": "firstDayOfWeek",
-              "description": "First day of the week (0=Sun .. 6=Sat). If null, defaults to 1 (Monday).",
-              "value": { "type": "number | null", "default": "null" }
-            },
+              "name": "lang",
+              "description": "The element's language.",
+              "value": { "type": "string" }
+            }
+          ],
+          "slots": [
             {
-              "name": "disabled-weekends",
-              "description": "When true, weekends (Saturday/Sunday) are disabled.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "",
+              "description": "The listbox options. Must be `<sd-option>` elements. You can use `<sd-optgroup>`'s to group items visually."
             },
             {
-              "name": "disabled-dates",
-              "description": "List of disabled dates.\nEg: `disabled-dates=\"2025-10-31,2025-11-11\"` or `disabled-dates=\"2025.10.31,2025.11.11\"` (both accepted)",
-              "value": { "type": "string[] | string", "default": "[]" }
+              "name": "label",
+              "description": "The combobox's label. Alternatively, you can use the `label` attribute."
             },
             {
-              "name": "size",
-              "description": "Size of the input and calendar visuals.",
-              "value": { "type": "'lg' | 'md' | 'sm'", "default": "'lg'" }
+              "name": "help-text",
+              "description": "Text that describes how to use the combobox. Alternatively, you can use the `help-text` attribute."
             },
             {
-              "name": "alignment",
-              "description": "Horizontal alignment of the flyout relative to the input.",
-              "value": { "type": "'left' | 'right'", "default": "'left'" }
+              "name": "left",
+              "description": "Used to prepend a presentational icon or similar element to the combobox."
             },
             {
-              "name": "label",
-              "description": "Text label for the input. Can be overridden with slot=\"label\".",
-              "value": { "type": "string", "default": "''" }
+              "name": "right",
+              "description": "Used to append a presentational icon or similar element to the combobox."
             },
             {
-              "name": "help-text",
-              "description": "Help text shown below the input. Can be overridden with slot=\"help-text\".",
-              "value": { "type": "string", "default": "''" }
+              "name": "clear-icon",
+              "description": "An icon to use in lieu of the default clear icon."
             },
             {
-              "name": "floating-label",
-              "description": "Enables the floating label behavior for the input.",
-              "value": { "type": "boolean", "default": "false" }
-            },
+              "name": "expand-icon",
+              "description": "The icon to show when the control is expanded and collapsed. Rotates on open and close."
+            }
+          ],
+          "events": [
             {
-              "name": "disabled",
-              "description": "Disables the control entirely when true.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "sd-change",
+              "description": "Emitted when the control's value changes."
             },
             {
-              "name": "required",
-              "description": "Makes the input a required field.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "sd-clear",
+              "description": "Emitted when the control's value is cleared."
             },
             {
-              "name": "visually-disabled",
-              "description": "Makes the control non-interactive visually (like disabled) without disabling it functionally.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "sd-input",
+              "description": "Emitted when the control receives input."
             },
             {
-              "name": "style-on-valid",
-              "description": "When true, applies success styling for valid selections.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "sd-focus",
+              "description": "Emitted when the control gains focus."
             },
             {
-              "name": "readonly",
-              "description": "Makes the input read-only (non-editable) when true.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "sd-blur",
+              "description": "Emitted when the control loses focus."
             },
             {
-              "name": "placement",
-              "description": "Preferred placement of the flyout relative to the input (top|bottom).",
-              "value": { "type": "'top' | 'bottom'", "default": "'bottom'" }
+              "name": "sd-show",
+              "description": "Emitted when the combobox's menu opens."
             },
             {
-              "name": "placeholder",
-              "description": "Placeholder text for the input when no date is selected.",
-              "value": { "type": "string", "default": "''" }
+              "name": "sd-after-show",
+              "description": "Emitted after the combobox's menu opens and all animations are complete."
             },
             {
-              "name": "name",
-              "description": "The name of the datepicker, submitted as a name/value pair with form data.",
-              "value": { "type": "string", "default": "''" }
+              "name": "sd-hide",
+              "description": "Emitted when the combobox's menu closes."
             },
             {
-              "name": "form",
-              "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`.",
-              "value": { "type": "string", "default": "''" }
+              "name": "sd-after-hide",
+              "description": "Emitted after the combobox's menu closes and all animations are complete."
             },
             {
-              "name": "dir",
-              "description": "The element's directionality.",
-              "value": { "type": "'ltr' | 'rtl' | 'auto'" }
+              "name": "sd-invalid",
+              "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
             },
             {
-              "name": "lang",
-              "description": "The element's language.",
-              "value": { "type": "string" }
+              "name": "sd-error",
+              "description": "Emitted when the combobox menu fails to open."
             }
           ],
-          "events": [],
           "js": {
             "properties": [
+              { "name": "popup", "type": "SdPopup" },
+              { "name": "displayInputValue", "type": "string" },
+              { "name": "selectedTextLabel", "type": "string" },
+              { "name": "selectedOptions", "type": "(SdOption | undefined)[]" },
               {
-                "name": "localize",
-                "description": "Localize controller used to fetch localized terms/labels."
+                "name": "filteredOptions",
+                "type": "(SdOption | SdOptgroup | undefined)[]"
               },
               {
-                "name": "locale",
-                "description": "Used for formatting and announcements (e.g., 'en-US', 'de-DE').",
-                "type": "string"
+                "name": "allOptions",
+                "type": "(SdOption | SdOptgroup | undefined)[]"
               },
+              { "name": "lastOption", "type": "SdOption | undefined" },
               {
-                "name": "value",
-                "description": "Selected date when not in range mode.\nEg: `value=\"2025.11.10\"` or `value=\"2025-11-10\"` (both accepted)",
-                "type": "string | null"
+                "name": "name",
+                "description": "The name of the combobox, submitted as a name/value pair with form data.",
+                "type": "string"
               },
               {
-                "name": "range",
-                "description": "Enables date range selection when true.",
-                "type": "boolean"
+                "name": "value",
+                "description": "The current value of the combobox, submitted as a name/value pair with form data.",
+                "type": "string | string[]"
               },
               {
-                "name": "rangeStart",
-                "description": "Range start date when in range mode.\nEg: `range-start=\"2025.11.10\"` or `range-start=\"2025-11-10\"` (both accepted)",
-                "type": "string | null"
+                "name": "defaultValue",
+                "description": "The default value of the form control. Primarily used for resetting the form control.",
+                "type": "string"
               },
               {
-                "name": "rangeEnd",
-                "description": "Range end date when in range mode.\nEg: `range-end=\"2025.11.10\"` or `range-end=\"2025-11-10\"` (both accepted)",
-                "type": "string | null"
+                "name": "size",
+                "description": "The combobox's size.",
+                "type": "'lg' | 'md' | 'sm'"
               },
               {
-                "name": "allowSameDayRange",
-                "description": "Allows selecting the same start and end date when true.",
-                "type": "boolean"
+                "name": "placeholder",
+                "description": "Placeholder text to show as a hint when the combobox is empty.",
+                "type": "string"
               },
               {
-                "name": "min",
-                "description": "Minimum selectable date\nEg: `min=\"2025.11.10\"` or `min=\"2025-11-10\"` (both accepted)",
-                "type": "string | number | Date | undefined"
+                "name": "maxOptionsTagLabel",
+                "description": "Label text shown on tag if max-options-visible is reached.",
+                "type": "string"
               },
               {
-                "name": "max",
-                "description": "Maximum selectable date\nEg: `max=\"2025.11.10\"` or `max=\"2025-11-10\"` (both accepted)",
-                "type": "string | number | Date | undefined"
+                "name": "disabled",
+                "description": "Disables the combobox control.",
+                "type": "boolean"
               },
               {
-                "name": "viewMonth",
-                "description": "The month initially displayed by the calendar grid.\nEg: `view-month=\"2026-07\"` or `view-month=\"2026.07\"`",
-                "type": "Date | null"
+                "name": "visuallyDisabled",
+                "description": "Styles the combobox as if it was disabled and enables aria-disabled",
+                "type": "boolean"
               },
               {
-                "name": "firstDayOfWeek",
-                "description": "First day of the week (0=Sun .. 6=Sat). If null, defaults to 1 (Monday).",
-                "type": "number | null"
+                "name": "clearable",
+                "description": "Adds a clear button when the combobox is not empty.",
+                "type": "boolean"
               },
               {
-                "name": "disabledWeekends",
-                "description": "When true, weekends (Saturday/Sunday) are disabled.",
+                "name": "open",
+                "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.",
                 "type": "boolean"
               },
               {
-                "name": "disabledDates",
-                "description": "List of disabled dates.\nEg: `disabled-dates=\"2025-10-31,2025-11-11\"` or `disabled-dates=\"2025.10.31,2025.11.11\"` (both accepted)",
-                "type": "string[] | string"
+                "name": "hoist",
+                "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.",
+                "type": "boolean"
               },
               {
-                "name": "isDateDisabled",
-                "description": "Custom predicate that can disable specific dates at runtime.",
-                "type": "((d: Date) => boolean) | null"
+                "name": "label",
+                "description": "The combobox's label. If you need to display HTML, use the `label` slot instead.",
+                "type": "string"
               },
               {
-                "name": "size",
-                "description": "Size of the input and calendar visuals.",
-                "type": "'lg' | 'md' | 'sm'"
+                "name": "placement",
+                "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.",
+                "type": "'top' | 'bottom'"
               },
               {
-                "name": "alignment",
-                "description": "Horizontal alignment of the flyout relative to the input.",
-                "type": "'left' | 'right'"
+                "name": "helpText",
+                "description": "The combobox's help text. If you need to display HTML, use the `help-text` slot instead.",
+                "type": "string"
               },
               {
-                "name": "label",
-                "description": "Text label for the input. Can be overridden with slot=\"label\".",
+                "name": "form",
+                "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.",
                 "type": "string"
               },
               {
-                "name": "helpText",
-                "description": "Help text shown below the input. Can be overridden with slot=\"help-text\".",
-                "type": "string"
+                "name": "required",
+                "description": "The combobox's required attribute.",
+                "type": "boolean"
               },
               {
                 "name": "floatingLabel",
@@ -2193,84 +2172,105 @@
                 "type": "boolean"
               },
               {
-                "name": "disabled",
-                "description": "Disables the control entirely when true.",
+                "name": "type",
+                "description": "The type of input. Works the same as a native `<input>` element, but only a subset of types are supported. Defaults\nto `text`.",
+                "type": "'search' | 'text'"
+              },
+              {
+                "name": "getOption",
+                "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.",
+                "type": "OptionRenderer"
+              },
+              {
+                "name": "multiple",
+                "description": "Allows more than one option to be selected.",
                 "type": "boolean"
               },
               {
-                "name": "required",
-                "description": "Makes the input a required field.",
+                "name": "useTags",
+                "description": "Uses interactive `sd-tag` elements representing individual options in the display input when `multiple` is `true`. It cannot be opted out.",
                 "type": "boolean"
               },
               {
-                "name": "visuallyDisabled",
-                "description": "Makes the control non-interactive visually (like disabled) without disabling it functionally.",
+                "name": "maxOptionsVisible",
+                "description": "The maximum number of selected options to show when `multiple` and `useTags` are `true`. After the maximum, \"+n\" will be shown to\nindicate the number of additional items that are selected. Set to 0 to remove the limit.",
+                "type": "number"
+              },
+              {
+                "name": "styleOnValid",
+                "description": "Shows success styles if the validity of the input is valid.",
                 "type": "boolean"
               },
               {
-                "name": "styleOnValid",
-                "description": "When true, applies success styling for valid selections.",
-                "type": "boolean"
+                "name": "filter",
+                "description": "A function used to filter options in the combobox component.\nThe default filter method is a case- and diacritic-insensitive string comparison.",
+                "type": "(option: SdOption, queryString: string) => boolean"
+              },
+              {
+                "name": "validity",
+                "description": "Gets the validity state object"
+              },
+              {
+                "name": "validationMessage",
+                "description": "Gets the validation message"
+              },
+              {
+                "name": "dir",
+                "description": "The element's directionality.",
+                "type": "'ltr' | 'rtl' | 'auto'"
               },
               {
-                "name": "readonly",
-                "description": "Makes the input read-only (non-editable) when true.",
-                "type": "boolean"
+                "name": "lang",
+                "description": "The element's language.",
+                "type": "string"
+              }
+            ],
+            "events": [
+              {
+                "name": "sd-change",
+                "description": "Emitted when the control's value changes."
               },
               {
-                "name": "placement",
-                "description": "Preferred placement of the flyout relative to the input (top|bottom).",
-                "type": "'top' | 'bottom'"
+                "name": "sd-clear",
+                "description": "Emitted when the control's value is cleared."
               },
               {
-                "name": "placeholder",
-                "description": "Placeholder text for the input when no date is selected.",
-                "type": "string"
+                "name": "sd-input",
+                "description": "Emitted when the control receives input."
               },
               {
-                "name": "name",
-                "description": "The name of the datepicker, submitted as a name/value pair with form data.",
-                "type": "string"
+                "name": "sd-focus",
+                "description": "Emitted when the control gains focus."
               },
               {
-                "name": "form",
-                "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`.",
-                "type": "string"
+                "name": "sd-blur",
+                "description": "Emitted when the control loses focus."
               },
               {
-                "name": "hasFocus",
-                "description": "True when the input or calendar has focus.",
-                "type": "boolean"
+                "name": "sd-show",
+                "description": "Emitted when the combobox's menu opens."
               },
               {
-                "name": "showValidStyle",
-                "description": "Whether to show the valid styling state.",
-                "type": "boolean"
+                "name": "sd-after-show",
+                "description": "Emitted after the combobox's menu opens and all animations are complete."
               },
               {
-                "name": "showInvalidStyle",
-                "description": "Whether to show the invalid styling state.",
-                "type": "boolean"
+                "name": "sd-hide",
+                "description": "Emitted when the combobox's menu closes."
               },
               {
-                "name": "currentPlacement",
-                "description": "Actual placement currently used by the flyout."
+                "name": "sd-after-hide",
+                "description": "Emitted after the combobox's menu closes and all animations are complete."
               },
-              { "name": "popup", "type": "SdPopup" },
-              { "name": "validity" },
-              { "name": "validationMessage" },
               {
-                "name": "dir",
-                "description": "The element's directionality.",
-                "type": "'ltr' | 'rtl' | 'auto'"
+                "name": "sd-invalid",
+                "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
               },
               {
-                "name": "lang",
-                "description": "The element's language.",
-                "type": "string"
+                "name": "sd-error",
+                "description": "Emitted when the combobox menu fails to open."
               }
-            ],
-            "events": []
+            ]
           }
         },
         {
@@ -3061,38 +3061,28 @@
           }
         },
         {
-          "name": "sd-icon",
-          "description": "Icons are symbols that can be used to represent various options within an application.\n---\n\n\n### **Events:**\n - **sd-load** - Emitted when the icon has loaded.\n- **sd-error** - Emitted when the icon fails to load due to an error.\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.",
+          "name": "sd-include",
+          "description": "Includes give you the power to embed external HTML files into the page.\n---\n\n\n### **Events:**\n - **sd-load** - Emitted when the included file is loaded.\n- **sd-error** - Emitted when the included file fails to load due to an error.\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.",
           "doc-url": "",
           "attributes": [
-            {
-              "name": "name",
-              "description": "The name of the icon to draw. Available names depend on the icon library being used.",
-              "value": { "type": "string | undefined" }
-            },
             {
               "name": "src",
-              "description": "An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\ncan result in XSS attacks. Only SVGs on a local or CORS-enabled endpoint are supported. If you're using more than one custom icon,\nit might make sense to register a custom icon library.",
-              "value": { "type": "string | undefined" }
-            },
-            {
-              "name": "label",
-              "description": "An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and\nignored by assistive devices.",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "library",
-              "description": "The name of a registered custom icon library.",
-              "value": { "type": "string", "default": "'default'" }
+              "description": "The location of the HTML file to include. Be sure you trust the content you are including as it will be executed as\ncode and can result in XSS attacks.",
+              "value": { "type": "string" }
             },
             {
-              "name": "color",
-              "description": "The color of the icon.\n\"current\" refers to currentColor and makes it possible to easily style the icon from outside without any CSS variables.",
+              "name": "mode",
+              "description": "The fetch mode to use.",
               "value": {
-                "type": "'currentColor' | 'primary' | 'white'",
-                "default": "'currentColor'"
+                "type": "'cors' | 'no-cors' | 'same-origin'",
+                "default": "'cors'"
               }
             },
+            {
+              "name": "allow-scripts",
+              "description": "Allows included scripts to be executed. Be sure you trust the content you are including as it will be executed as\ncode and can result in XSS attacks.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "dir",
               "description": "The element's directionality.",
@@ -3107,39 +3097,30 @@
           "events": [
             {
               "name": "sd-load",
-              "description": "Emitted when the icon has loaded."
+              "description": "Emitted when the included file is loaded."
             },
             {
               "name": "sd-error",
-              "description": "Emitted when the icon fails to load due to an error."
+              "type": "{ status: number }",
+              "description": "Emitted when the included file fails to load due to an error."
             }
           ],
           "js": {
             "properties": [
-              {
-                "name": "name",
-                "description": "The name of the icon to draw. Available names depend on the icon library being used.",
-                "type": "string | undefined"
-              },
               {
                 "name": "src",
-                "description": "An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\ncan result in XSS attacks. Only SVGs on a local or CORS-enabled endpoint are supported. If you're using more than one custom icon,\nit might make sense to register a custom icon library.",
-                "type": "string | undefined"
-              },
-              {
-                "name": "label",
-                "description": "An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and\nignored by assistive devices.",
+                "description": "The location of the HTML file to include. Be sure you trust the content you are including as it will be executed as\ncode and can result in XSS attacks.",
                 "type": "string"
               },
               {
-                "name": "library",
-                "description": "The name of a registered custom icon library.",
-                "type": "string"
+                "name": "mode",
+                "description": "The fetch mode to use.",
+                "type": "'cors' | 'no-cors' | 'same-origin'"
               },
               {
-                "name": "color",
-                "description": "The color of the icon.\n\"current\" refers to currentColor and makes it possible to easily style the icon from outside without any CSS variables.",
-                "type": "'currentColor' | 'primary' | 'white'"
+                "name": "allowScripts",
+                "description": "Allows included scripts to be executed. Be sure you trust the content you are including as it will be executed as\ncode and can result in XSS attacks.",
+                "type": "boolean"
               },
               {
                 "name": "dir",
@@ -3155,37 +3136,48 @@
             "events": [
               {
                 "name": "sd-load",
-                "description": "Emitted when the icon has loaded."
+                "description": "Emitted when the included file is loaded."
               },
               {
                 "name": "sd-error",
-                "description": "Emitted when the icon fails to load due to an error."
+                "type": "{ status: number }",
+                "description": "Emitted when the included file fails to load due to an error."
               }
             ]
           }
         },
         {
-          "name": "sd-include",
-          "description": "Includes give you the power to embed external HTML files into the page.\n---\n\n\n### **Events:**\n - **sd-load** - Emitted when the included file is loaded.\n- **sd-error** - Emitted when the included file fails to load due to an error.\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.",
+          "name": "sd-icon",
+          "description": "Icons are symbols that can be used to represent various options within an application.\n---\n\n\n### **Events:**\n - **sd-load** - Emitted when the icon has loaded.\n- **sd-error** - Emitted when the icon fails to load due to an error.\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.",
           "doc-url": "",
           "attributes": [
+            {
+              "name": "name",
+              "description": "The name of the icon to draw. Available names depend on the icon library being used.",
+              "value": { "type": "string | undefined" }
+            },
             {
               "name": "src",
-              "description": "The location of the HTML file to include. Be sure you trust the content you are including as it will be executed as\ncode and can result in XSS attacks.",
-              "value": { "type": "string" }
+              "description": "An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\ncan result in XSS attacks. Only SVGs on a local or CORS-enabled endpoint are supported. If you're using more than one custom icon,\nit might make sense to register a custom icon library.",
+              "value": { "type": "string | undefined" }
             },
             {
-              "name": "mode",
-              "description": "The fetch mode to use.",
-              "value": {
-                "type": "'cors' | 'no-cors' | 'same-origin'",
-                "default": "'cors'"
-              }
+              "name": "label",
+              "description": "An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and\nignored by assistive devices.",
+              "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "allow-scripts",
-              "description": "Allows included scripts to be executed. Be sure you trust the content you are including as it will be executed as\ncode and can result in XSS attacks.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "library",
+              "description": "The name of a registered custom icon library.",
+              "value": { "type": "string", "default": "'default'" }
+            },
+            {
+              "name": "color",
+              "description": "The color of the icon.\n\"current\" refers to currentColor and makes it possible to easily style the icon from outside without any CSS variables.",
+              "value": {
+                "type": "'currentColor' | 'primary' | 'white'",
+                "default": "'currentColor'"
+              }
             },
             {
               "name": "dir",
@@ -3201,30 +3193,39 @@
           "events": [
             {
               "name": "sd-load",
-              "description": "Emitted when the included file is loaded."
+              "description": "Emitted when the icon has loaded."
             },
             {
               "name": "sd-error",
-              "type": "{ status: number }",
-              "description": "Emitted when the included file fails to load due to an error."
+              "description": "Emitted when the icon fails to load due to an error."
             }
           ],
           "js": {
             "properties": [
+              {
+                "name": "name",
+                "description": "The name of the icon to draw. Available names depend on the icon library being used.",
+                "type": "string | undefined"
+              },
               {
                 "name": "src",
-                "description": "The location of the HTML file to include. Be sure you trust the content you are including as it will be executed as\ncode and can result in XSS attacks.",
+                "description": "An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\ncan result in XSS attacks. Only SVGs on a local or CORS-enabled endpoint are supported. If you're using more than one custom icon,\nit might make sense to register a custom icon library.",
+                "type": "string | undefined"
+              },
+              {
+                "name": "label",
+                "description": "An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and\nignored by assistive devices.",
                 "type": "string"
               },
               {
-                "name": "mode",
-                "description": "The fetch mode to use.",
-                "type": "'cors' | 'no-cors' | 'same-origin'"
+                "name": "library",
+                "description": "The name of a registered custom icon library.",
+                "type": "string"
               },
               {
-                "name": "allowScripts",
-                "description": "Allows included scripts to be executed. Be sure you trust the content you are including as it will be executed as\ncode and can result in XSS attacks.",
-                "type": "boolean"
+                "name": "color",
+                "description": "The color of the icon.\n\"current\" refers to currentColor and makes it possible to easily style the icon from outside without any CSS variables.",
+                "type": "'currentColor' | 'primary' | 'white'"
               },
               {
                 "name": "dir",
@@ -3240,12 +3241,11 @@
             "events": [
               {
                 "name": "sd-load",
-                "description": "Emitted when the included file is loaded."
+                "description": "Emitted when the icon has loaded."
               },
               {
                 "name": "sd-error",
-                "type": "{ status: number }",
-                "description": "Emitted when the included file fails to load due to an error."
+                "description": "Emitted when the icon fails to load due to an error."
               }
             ]
           }
@@ -3700,10 +3700,57 @@
                 "description": "Emitted when the control receives input."
               },
               {
-                "name": "sd-search",
-                "description": "Emitted when the search button is activated."
+                "name": "sd-search",
+                "description": "Emitted when the search button is activated."
+              }
+            ]
+          }
+        },
+        {
+          "name": "sd-loader",
+          "description": "Loaders are used to show the progress of an indeterminate operation.\n---\n\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "color",
+              "description": "The color of the loader.",
+              "value": {
+                "type": "'primary' | 'white' | 'currentColor'",
+                "default": "'currentColor'"
+              }
+            },
+            {
+              "name": "dir",
+              "description": "The element's directionality.",
+              "value": { "type": "'ltr' | 'rtl' | 'auto'" }
+            },
+            {
+              "name": "lang",
+              "description": "The element's language.",
+              "value": { "type": "string" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "color",
+                "description": "The color of the loader.",
+                "type": "'primary' | 'white' | 'currentColor'"
+              },
+              { "name": "localize" },
+              {
+                "name": "dir",
+                "description": "The element's directionality.",
+                "type": "'ltr' | 'rtl' | 'auto'"
+              },
+              {
+                "name": "lang",
+                "description": "The element's language.",
+                "type": "string"
               }
-            ]
+            ],
+            "events": []
           }
         },
         {
@@ -3841,53 +3888,6 @@
             ]
           }
         },
-        {
-          "name": "sd-loader",
-          "description": "Loaders are used to show the progress of an indeterminate operation.\n---\n\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "color",
-              "description": "The color of the loader.",
-              "value": {
-                "type": "'primary' | 'white' | 'currentColor'",
-                "default": "'currentColor'"
-              }
-            },
-            {
-              "name": "dir",
-              "description": "The element's directionality.",
-              "value": { "type": "'ltr' | 'rtl' | 'auto'" }
-            },
-            {
-              "name": "lang",
-              "description": "The element's language.",
-              "value": { "type": "string" }
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "color",
-                "description": "The color of the loader.",
-                "type": "'primary' | 'white' | 'currentColor'"
-              },
-              { "name": "localize" },
-              {
-                "name": "dir",
-                "description": "The element's directionality.",
-                "type": "'ltr' | 'rtl' | 'auto'"
-              },
-              {
-                "name": "lang",
-                "description": "The element's language.",
-                "type": "string"
-              }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "sd-map-marker",
           "description": "A marker identifies a location on google map\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the map marker loses focus.\n- **sd-focus** - Emitted when the map marker is focused.\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The marker's content.\\\n\n### **CSS Properties:**\n - **--map-marker-scaling** - Scale the marker size. _(default: undefined)_\n- **--sd-map-marker-cluster--hovered-color-icon-fill** - The icon fill color for map marker clusters in hovered state. _(default: undefined)_\n- **--sd-map-marker-cluster-color-icon-fill** - The default icon fill color for map marker clusters. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The components' base wrapper.\n- **marker** - The markers' svg wrapper.\n- **content** - The container that wraps the default slot.\n- **motion-wrapper** - The container that wraps the motion animation.",
@@ -4483,66 +4483,6 @@
             ]
           }
         },
-        {
-          "name": "sd-optgroup",
-          "description": "The <sd-optgroup> element creates a grouping for <sd-option>s within a <sd-combobox>.\n---\n\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The given options. Must be `<sd-option>` elements.\n- **label** - The label for the optgroup\n\n### **CSS Properties:**\n - **--display-divider** - Display property of the divider. Defaults to \"block\" _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label-container** - The container that wraps prefix, label and base\n- **divider** - The divider that is displayed above the content\n- **options** - The container that wraps the <sd-option> elements.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "disabled",
-              "description": "Disables all options in the optgroup.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "label",
-              "description": "The optgroups label. If you need to display HTML, use the `label` slot instead.",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "dir",
-              "description": "The element's directionality.",
-              "value": { "type": "'ltr' | 'rtl' | 'auto'" }
-            },
-            {
-              "name": "lang",
-              "description": "The element's language.",
-              "value": { "type": "string" }
-            }
-          ],
-          "slots": [
-            {
-              "name": "",
-              "description": "The given options. Must be `<sd-option>` elements."
-            },
-            { "name": "label", "description": "The label for the optgroup" }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "disabled",
-                "description": "Disables all options in the optgroup.",
-                "type": "boolean"
-              },
-              {
-                "name": "label",
-                "description": "The optgroups label. If you need to display HTML, use the `label` slot instead.",
-                "type": "string"
-              },
-              {
-                "name": "dir",
-                "description": "The element's directionality.",
-                "type": "'ltr' | 'rtl' | 'auto'"
-              },
-              {
-                "name": "lang",
-                "description": "The element's language.",
-                "type": "string"
-              }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "sd-option",
           "description": "Options define the selectable items within various form controls such as [select](/components/select).\n---\n\n\n### **Methods:**\n - **getTextLabel()** - Returns a plain text label based on the option's content.\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The option's label.\n- **left** - Used to prepend an icon or similar element to the menu item.\n- **right** - Used to append an icon or similar element to the menu item.\n\n### **CSS Properties:**\n - **--sd-option--disabled-color-border** - The border color of checkboxes for the disabled options. _(default: undefined)_\n\n### **CSS Parts:**\n - **checked-icon** - The checked icon, an `<sd-icon>` element.\n- **base** - The component's base wrapper.\n- **label** - The option's label.\n- **left** - The container that wraps the left.\n- **right** - The container that wraps the right.",
@@ -4907,6 +4847,66 @@
             ]
           }
         },
+        {
+          "name": "sd-optgroup",
+          "description": "The <sd-optgroup> element creates a grouping for <sd-option>s within a <sd-combobox>.\n---\n\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The given options. Must be `<sd-option>` elements.\n- **label** - The label for the optgroup\n\n### **CSS Properties:**\n - **--display-divider** - Display property of the divider. Defaults to \"block\" _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label-container** - The container that wraps prefix, label and base\n- **divider** - The divider that is displayed above the content\n- **options** - The container that wraps the <sd-option> elements.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "disabled",
+              "description": "Disables all options in the optgroup.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "label",
+              "description": "The optgroups label. If you need to display HTML, use the `label` slot instead.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "dir",
+              "description": "The element's directionality.",
+              "value": { "type": "'ltr' | 'rtl' | 'auto'" }
+            },
+            {
+              "name": "lang",
+              "description": "The element's language.",
+              "value": { "type": "string" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "The given options. Must be `<sd-option>` elements."
+            },
+            { "name": "label", "description": "The label for the optgroup" }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "disabled",
+                "description": "Disables all options in the optgroup.",
+                "type": "boolean"
+              },
+              {
+                "name": "label",
+                "description": "The optgroups label. If you need to display HTML, use the `label` slot instead.",
+                "type": "string"
+              },
+              {
+                "name": "dir",
+                "description": "The element's directionality.",
+                "type": "'ltr' | 'rtl' | 'auto'"
+              },
+              {
+                "name": "lang",
+                "description": "The element's language.",
+                "type": "string"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "sd-quickfact",
           "description": "Accordion shows a brief summary and expands to show additional content.\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the accordion opens.\n- **sd-after-show** - Emitted after the accordion opens and all animations are complete.\n- **sd-hide** - Emitted when the accordion closes.\n- **sd-after-hide** - Emitted after the accordion closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the accordion.\n- **hide()** - Hides the accordion\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - **icon** - Optional icon to show in the header. Works best with `<sd-icon>`.\n- _default_ - The accordion main content.\n- **summary** - The accordion summary. Alternatively, you can use the `summary` attribute.\n- **expand-icon** - Optional expand icon to use instead of the default. Works best with `<sd-icon>`.\n- **collapse-icon** - Optional collapse icon to use instead of the default. Works best with `<sd-icon>`.\n\n### **CSS Properties:**\n - **--sd-quickfact--expandable-color-text** - The text color for expandable quickfact. _(default: undefined)_\n- **--sd-accordion-border-width** - The accordion border width. _(default: undefined)_\n- **--sd-accordion-color-background** - The accordion background color. _(default: undefined)_\n- **--sd-accordion-color-text** - The accordion color text. _(default: undefined)_\n- **--sd-accordion-padding-block** - The accordion vertical padding value. _(default: undefined)_\n- **--sd-accordion__chevron-color-text** - The accordion chevron color. _(default: undefined)_\n- **--sd-accordion__indicator-color** - The accordion indicator color. _(default: undefined)_\n\n### **CSS Parts:**\n - **icon** - The container that wraps the icon.\n- **base** - The component's base wrapper.\n- **header** - The header that wraps both the summary and the expand/collapse icon.\n- **summary** - The container that wraps the summary.\n- **summary-icon** - The container that wraps the expand/collapse icons.\n- **summary-border** - The container that wraps the currently active accordions border.\n- **content** - The container that wraps the accordion content slot.\n- **content__slot** - The accordion content slot.",
@@ -5026,23 +5026,23 @@
           }
         },
         {
-          "name": "sd-radio",
-          "description": "A radio allows to select only one value from a set of options. Clicking on an unchecked radio will deselect the other one(s).\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the control loses focus.\n- **sd-focus** - Emitted when the control gains focus.\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The radio's label.\n\n### **CSS Properties:**\n - **--sd-radio--checked--default-color-background** - The background color for checked radios in default state. _(default: undefined)_\n- **--sd-radio--checked--default__icon-color-background** - The icon background color for checked radios in default state. _(default: undefined)_\n- **--sd-radio--checked--hover-color-background** - The background color for checked radios in hover state. _(default: undefined)_\n- **--sd-radio--checked--hover__icon-color-background** - The icon background color for checked radios in hover state. _(default: undefined)_\n- **--sd-radio--checked--invalid--default-color-background** - The background color for checked invalid radios in default state. _(default: undefined)_\n- **--sd-radio--checked--invalid--default__icon-color-background** - The icon background color for checked invalid radios in default state. _(default: undefined)_\n- **--sd-radio--checked--invalid--hover__icon-color-background** - The icon background color for checked invalid radios in hover state. _(default: undefined)_\n- **--sd-radio--default--invalid-color-background** - The background color for invalid radios in default state. _(default: undefined)_\n- **--sd-radio-border-width** - The border width for the radio. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control--unchecked** - The radio control when the radio is unchecked.\n- **control--checked** - The radio control when the radio is checked.\n- **checked** - The dot inside the radio component when the radio is checked.\n- **label** - The container that wraps the radio's label.",
+          "name": "sd-radio-button",
+          "description": "Radio buttons allow the user to select a single option from a group using a button-like control.\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the button loses focus.\n- **sd-focus** - Emitted when the button gains focus.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the radio button.\n- **blur()** - Removes focus from the radio button.\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The radio button's label.\n- **icon** - A presentational icon.\n\n### **CSS Properties:**\n - **--sd-button--primary--default-color-background** - The background color of radio-button when checked. _(default: undefined)_\n- **--sd-button--primary--default-color-text** - The text color of radio-button when checked. _(default: undefined)_\n- **--sd-button--primary--hover-color-background** - The background color of radio-button on hover when checked. _(default: undefined)_\n- **--sd-radio-button-border-radius** - The border radius of the radio-button. _(default: undefined)_\n- **--sd-radio-button-color-text** - The text color of the radio-button. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **button** - The internal `<button>` element.\n- **button--checked** - The internal button element when the radio button is checked.\n- **icon** - The container that wraps the icon.\n- **label** - The container that wraps the radio button's label.",
           "doc-url": "",
           "attributes": [
             {
               "name": "size",
-              "description": "The radio's size.",
+              "description": "The radio button's size.",
               "value": { "type": "'lg' | 'md' | 'sm'", "default": "'lg'" }
             },
             {
               "name": "disabled",
-              "description": "A Boolean attribute which, if present, disables the radio.",
+              "description": "Disables the radio button.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "visually-disabled",
-              "description": "A Boolean attribute which, if present, disables the radio.",
+              "description": "Styles the radio-button as if it was disabled and enables aria-disabled",
               "value": { "type": "boolean", "default": "false" }
             },
             {
@@ -5050,11 +5050,6 @@
               "description": "The radio's value. When selected, the radio group will receive this value.",
               "value": { "type": "string" }
             },
-            {
-              "name": "invalid",
-              "description": "A Boolean attribute which, if present, marks the radio Button valid or invalid",
-              "value": { "type": "boolean", "default": "false" }
-            },
             {
               "name": "dir",
               "description": "The element's directionality.",
@@ -5066,32 +5061,35 @@
               "value": { "type": "string" }
             }
           ],
-          "slots": [{ "name": "", "description": "The radio's label." }],
+          "slots": [
+            { "name": "", "description": "The radio button's label." },
+            { "name": "icon", "description": "A presentational icon." }
+          ],
           "events": [
             {
               "name": "sd-blur",
-              "description": "Emitted when the control loses focus."
+              "description": "Emitted when the button loses focus."
             },
             {
               "name": "sd-focus",
-              "description": "Emitted when the control gains focus."
+              "description": "Emitted when the button gains focus."
             }
           ],
           "js": {
             "properties": [
               {
                 "name": "size",
-                "description": "The radio's size.",
+                "description": "The radio button's size.",
                 "type": "'lg' | 'md' | 'sm'"
               },
               {
                 "name": "disabled",
-                "description": "A Boolean attribute which, if present, disables the radio.",
+                "description": "Disables the radio button.",
                 "type": "boolean"
               },
               {
                 "name": "visuallyDisabled",
-                "description": "A Boolean attribute which, if present, disables the radio.",
+                "description": "Styles the radio-button as if it was disabled and enables aria-disabled",
                 "type": "boolean"
               },
               {
@@ -5099,11 +5097,6 @@
                 "description": "The radio's value. When selected, the radio group will receive this value.",
                 "type": "string"
               },
-              {
-                "name": "invalid",
-                "description": "A Boolean attribute which, if present, marks the radio Button valid or invalid",
-                "type": "boolean"
-              },
               {
                 "name": "dir",
                 "description": "The element's directionality.",
@@ -5118,33 +5111,33 @@
             "events": [
               {
                 "name": "sd-blur",
-                "description": "Emitted when the control loses focus."
+                "description": "Emitted when the button loses focus."
               },
               {
                 "name": "sd-focus",
-                "description": "Emitted when the control gains focus."
+                "description": "Emitted when the button gains focus."
               }
             ]
           }
         },
         {
-          "name": "sd-radio-button",
-          "description": "Radio buttons allow the user to select a single option from a group using a button-like control.\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the button loses focus.\n- **sd-focus** - Emitted when the button gains focus.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the radio button.\n- **blur()** - Removes focus from the radio button.\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The radio button's label.\n- **icon** - A presentational icon.\n\n### **CSS Properties:**\n - **--sd-button--primary--default-color-background** - The background color of radio-button when checked. _(default: undefined)_\n- **--sd-button--primary--default-color-text** - The text color of radio-button when checked. _(default: undefined)_\n- **--sd-button--primary--hover-color-background** - The background color of radio-button on hover when checked. _(default: undefined)_\n- **--sd-radio-button-border-radius** - The border radius of the radio-button. _(default: undefined)_\n- **--sd-radio-button-color-text** - The text color of the radio-button. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **button** - The internal `<button>` element.\n- **button--checked** - The internal button element when the radio button is checked.\n- **icon** - The container that wraps the icon.\n- **label** - The container that wraps the radio button's label.",
+          "name": "sd-radio",
+          "description": "A radio allows to select only one value from a set of options. Clicking on an unchecked radio will deselect the other one(s).\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the control loses focus.\n- **sd-focus** - Emitted when the control gains focus.\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The radio's label.\n\n### **CSS Properties:**\n - **--sd-radio--checked--default-color-background** - The background color for checked radios in default state. _(default: undefined)_\n- **--sd-radio--checked--default__icon-color-background** - The icon background color for checked radios in default state. _(default: undefined)_\n- **--sd-radio--checked--hover-color-background** - The background color for checked radios in hover state. _(default: undefined)_\n- **--sd-radio--checked--hover__icon-color-background** - The icon background color for checked radios in hover state. _(default: undefined)_\n- **--sd-radio--checked--invalid--default-color-background** - The background color for checked invalid radios in default state. _(default: undefined)_\n- **--sd-radio--checked--invalid--default__icon-color-background** - The icon background color for checked invalid radios in default state. _(default: undefined)_\n- **--sd-radio--checked--invalid--hover__icon-color-background** - The icon background color for checked invalid radios in hover state. _(default: undefined)_\n- **--sd-radio--default--invalid-color-background** - The background color for invalid radios in default state. _(default: undefined)_\n- **--sd-radio-border-width** - The border width for the radio. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control--unchecked** - The radio control when the radio is unchecked.\n- **control--checked** - The radio control when the radio is checked.\n- **checked** - The dot inside the radio component when the radio is checked.\n- **label** - The container that wraps the radio's label.",
           "doc-url": "",
           "attributes": [
             {
               "name": "size",
-              "description": "The radio button's size.",
+              "description": "The radio's size.",
               "value": { "type": "'lg' | 'md' | 'sm'", "default": "'lg'" }
             },
             {
               "name": "disabled",
-              "description": "Disables the radio button.",
+              "description": "A Boolean attribute which, if present, disables the radio.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "visually-disabled",
-              "description": "Styles the radio-button as if it was disabled and enables aria-disabled",
+              "description": "A Boolean attribute which, if present, disables the radio.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
@@ -5152,6 +5145,11 @@
               "description": "The radio's value. When selected, the radio group will receive this value.",
               "value": { "type": "string" }
             },
+            {
+              "name": "invalid",
+              "description": "A Boolean attribute which, if present, marks the radio Button valid or invalid",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "dir",
               "description": "The element's directionality.",
@@ -5163,35 +5161,32 @@
               "value": { "type": "string" }
             }
           ],
-          "slots": [
-            { "name": "", "description": "The radio button's label." },
-            { "name": "icon", "description": "A presentational icon." }
-          ],
+          "slots": [{ "name": "", "description": "The radio's label." }],
           "events": [
             {
               "name": "sd-blur",
-              "description": "Emitted when the button loses focus."
+              "description": "Emitted when the control loses focus."
             },
             {
               "name": "sd-focus",
-              "description": "Emitted when the button gains focus."
+              "description": "Emitted when the control gains focus."
             }
           ],
           "js": {
             "properties": [
               {
                 "name": "size",
-                "description": "The radio button's size.",
+                "description": "The radio's size.",
                 "type": "'lg' | 'md' | 'sm'"
               },
               {
                 "name": "disabled",
-                "description": "Disables the radio button.",
+                "description": "A Boolean attribute which, if present, disables the radio.",
                 "type": "boolean"
               },
               {
                 "name": "visuallyDisabled",
-                "description": "Styles the radio-button as if it was disabled and enables aria-disabled",
+                "description": "A Boolean attribute which, if present, disables the radio.",
                 "type": "boolean"
               },
               {
@@ -5199,6 +5194,11 @@
                 "description": "The radio's value. When selected, the radio group will receive this value.",
                 "type": "string"
               },
+              {
+                "name": "invalid",
+                "description": "A Boolean attribute which, if present, marks the radio Button valid or invalid",
+                "type": "boolean"
+              },
               {
                 "name": "dir",
                 "description": "The element's directionality.",
@@ -5213,11 +5213,11 @@
             "events": [
               {
                 "name": "sd-blur",
-                "description": "Emitted when the button loses focus."
+                "description": "Emitted when the control loses focus."
               },
               {
                 "name": "sd-focus",
-                "description": "Emitted when the button gains focus."
+                "description": "Emitted when the control gains focus."
               }
             ]
           }