@solid-design-system/components 7.0.0-next.1 → 7.0.0-next.10

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": "7.0.0-next.1",
+  "version": "7.0.0-next.10",
   "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    | 'primary|80'\n    | 'white|80'\n    | 'image'",
+                "type": "'neutral-100' | 'primary' | 'white' | 'border-primary' | 'border-white' | 'primary|80' | 'white|80' | '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    | 'primary|80'\n    | 'white|80'\n    | 'image'"
+                "type": "'neutral-100' | 'primary' | 'white' | 'border-primary' | 'border-white' | 'primary|80' | 'white|80' | 'image'"
               },
               {
                 "name": "shapes",
@@ -2558,7 +2558,7 @@
         },
         {
           "name": "sd-drawer",
-          "description": "Used as a panel that slides out from the side of the screen which contains a set of information or actions.\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the drawer opens.\n- **sd-after-show** - Emitted after the drawer opens and all animations are complete.\n- **sd-hide** - Emitted when the drawer closes.\n- **sd-after-hide** - Emitted after the drawer closes and all animations are complete.\n- **sd-initial-focus** - Emitted when the drawer opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n- **sd-request-close** - Emitted when the user attempts to close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in destructive behavior such as data loss.\n\n### **Methods:**\n - **show()** - Shows the drawer.\n- **hide()** - Hides the drawer\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 drawer's main content.\n- **header** - The drawer's header, usually a title.\n- **footer** - The drawer's footer, usually one or more buttons representing various options.\n\n### **CSS Properties:**\n - **--width** - The preferred width of the drawer. depending on its `placement`. Note that the drawer will shrink to accommodate smaller screens. _(default: undefined)_\n- **--sd-panel-color-border** - The border color of the drawer panel. _(default: undefined)_\n- **--sd-overlay-color-background** - The background color of the drawer overlay. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **overlay** - The overlay that covers the screen behind the drawer.\n- **panel** - The drawer's panel (where the drawer and its content are rendered).\n- **header** - The drawer's header. This element wraps the title and the close-button.\n- **title** - The drawer's title.\n- **close-button** - The close button, an `<sd-button>`.\n- **body** - The drawer's body.\n- **footer** - The drawer's footer.",
+          "description": "Used as a panel that slides out from the side of the screen which contains a set of information or actions.\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the drawer opens.\n- **sd-after-show** - Emitted after the drawer opens and all animations are complete.\n- **sd-hide** - Emitted when the drawer closes.\n- **sd-after-hide** - Emitted after the drawer closes and all animations are complete.\n- **sd-initial-focus** - Emitted when the drawer opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n- **sd-request-close** - Emitted when the user attempts to close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in destructive behavior such as data loss.\n\n### **Methods:**\n - **show()** - Shows the drawer.\n- **hide()** - Hides the drawer\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 drawer's main content.\n- **header** - The drawer's header, usually a title.\n- **footer** - The drawer's footer, usually one or more buttons representing various options.\n\n### **CSS Properties:**\n - **--width** - The preferred width of the drawer. depending on its `placement`. Note that the drawer will shrink to accommodate smaller screens. _(default: undefined)_\n- **--sd-panel-color-border** - The border color of the drawer panel. _(default: undefined)_\n- **--sd-overlay-color-background** - The background color of the drawer overlay. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **panel** - The drawer's panel (where the drawer and its content are rendered).\n- **header** - The drawer's header. This element wraps the title and the close-button.\n- **title** - The drawer's title.\n- **close-button** - The close button, an `<sd-button>`.\n- **body** - The drawer's body.\n- **footer** - The drawer's footer.\n- **overlay** - The overlay that covers the screen behind the drawer.",
           "doc-url": "",
           "attributes": [
             {
@@ -2576,11 +2576,6 @@
               "description": "The direction from which the drawer will open.",
               "value": { "type": "'end' | 'start'", "default": "'end'" }
             },
-            {
-              "name": "contained",
-              "description": "By default, the drawer slides out of its containing block (the viewport). Contained is a hidden feature used only for testing purposes. Please do not use it in production as it will likely change.",
-              "value": { "type": "boolean", "default": "false" }
-            },
             {
               "name": "no-header",
               "description": "Removes the header. This will also remove the default close button, so please ensure you provide an easy, accessible way for users to dismiss the drawer.",
@@ -2653,11 +2648,6 @@
                 "description": "The direction from which the drawer will open.",
                 "type": "'end' | 'start'"
               },
-              {
-                "name": "contained",
-                "description": "By default, the drawer slides out of its containing block (the viewport). Contained is a hidden feature used only for testing purposes. Please do not use it in production as it will likely change.",
-                "type": "boolean"
-              },
               {
                 "name": "noHeader",
                 "description": "Removes the header. This will also remove the default close button, so please ensure you provide an easy, accessible way for users to dismiss the drawer.",
@@ -2994,6 +2984,294 @@
             ]
           }
         },
+        {
+          "name": "sd-file-selector",
+          "description": "Used to select a file by clicking or dragging a file into a drop-area.\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the control loses focus.\n- **sd-change** - Emitted when an alteration to the control's value is committed by the user.\n- **sd-error** - Emitted when multiple files are selected via drag and drop, without the `multiple` property being set.\n- **sd-focus** - Emitted when the control gains focus.\n- **sd-input** - Emitted when the control receives input.\n\n### **Methods:**\n - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\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- **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 - **label** - The file selector's label. Alternatively, you can use the `label` attribute.\n- **help-text** - Text that describes how to use the file selector. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Properties:**\n - **--sd-form-control-border-radius** - The border radius of the file selector. _(default: undefined)_\n- **--sd-form-control-color-border** - The border color of the file selector. _(default: undefined)_\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **button-wrapper** - The wrapper around the button and text value.\n- **button** - The sd-button acting as a file input trigger.\n- **value** - The chosen files or placeholder text for the file input.\n- **droparea** - The element wrapping the drop zone.\n- **droparea-background** - The background of the drop zone.\n- **droparea-icon** - The container that wraps the icon for the drop zone.\n- **droparea-value** - The text for the drop zone.\n- **invalid-icon-message** - The container that wraps the invalid icon and message.\n- **invalid-icon** - The invalid icon.\n- **invalid-message** - The invalid message.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "files",
+              "description": "The selected files as a `FileList` object. The `FileList` behaves like an array, so you can get the number of\nselected files via its `length` property.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "name",
+              "description": "The name of the file selector, submitted as a name/value pair with form data.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "title",
+              "description": "The `title` attribute specifies extra information about an element most often as a default browser tooltip text when the mouse moves over the element.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "value",
+              "description": "The value of the file selector contains a string that represents the path of the selected file. If multiple\nfiles are selected, the value represents the first file in the list. The only valid value when setting a file\ninput is an empty string.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "size",
+              "description": "The file selector's size.",
+              "value": { "type": "'sm' | 'md' | 'lg'", "default": "'lg'" }
+            },
+            {
+              "name": "label",
+              "description": "The file selector's label, this field is required to ensure accessibility. It is visually hidden by default, use the `showLabel` property to display it.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "show-label",
+              "description": "Visually displays the file selector's label.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "help-text",
+              "description": "The file selector's help text. If you need to display HTML, use the `help-text` slot instead.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "disabled",
+              "description": "Disables the file selector.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "visually-disabled",
+              "description": "Styles the input as if it was disabled and enables aria-disabled",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "drop-area",
+              "description": "Draw the file selector as a drop area.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "accept",
+              "description": "Comma-separated list of supported file types (e.g. `.jpg,.png,image/*`).",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "style-on-valid",
+              "description": "Shows success styles if the validity of the input is valid.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "capture",
+              "description": "Specifies which camera to use for capture of image or video data. Works only when not using a droparea.",
+              "value": { "type": "'user' | 'environment'" }
+            },
+            {
+              "name": "multiple",
+              "description": "Indicates whether the user can select more than one file. Has no effect if `webkitdirectory` is set.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "webkitdirectory",
+              "description": "Indicates that the file selector should let the user select directories instead of files. Non-standard, but\nsupported by all major browsers.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "form",
+              "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "required",
+              "description": "Makes the input a required field.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "hide-value",
+              "description": "Suppresses the value from being displayed in the file selector.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "dir",
+              "description": "The element's directionality.",
+              "value": { "type": "'ltr' | 'rtl' | 'auto'" }
+            },
+            {
+              "name": "lang",
+              "description": "The element's language.",
+              "value": { "type": "string" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "label",
+              "description": "The file selector's label. Alternatively, you can use the `label` attribute."
+            },
+            {
+              "name": "help-text",
+              "description": "Text that describes how to use the file selector. Alternatively, you can use the `help-text` attribute."
+            }
+          ],
+          "events": [
+            {
+              "name": "sd-blur",
+              "description": "Emitted when the control loses focus."
+            },
+            {
+              "name": "sd-change",
+              "description": "Emitted when an alteration to the control's value is committed by the user."
+            },
+            {
+              "name": "sd-error",
+              "description": "Emitted when multiple files are selected via drag and drop, without the `multiple` property being set."
+            },
+            {
+              "name": "sd-focus",
+              "description": "Emitted when the control gains focus."
+            },
+            {
+              "name": "sd-input",
+              "description": "Emitted when the control receives input."
+            }
+          ],
+          "js": {
+            "properties": [
+              { "name": "localize" },
+              {
+                "name": "files",
+                "description": "The selected files as a `FileList` object. The `FileList` behaves like an array, so you can get the number of\nselected files via its `length` property."
+              },
+              {
+                "name": "name",
+                "description": "The name of the file selector, submitted as a name/value pair with form data.",
+                "type": "string"
+              },
+              {
+                "name": "title",
+                "description": "The `title` attribute specifies extra information about an element most often as a default browser tooltip text when the mouse moves over the element.",
+                "type": "string"
+              },
+              {
+                "name": "value",
+                "description": "The value of the file selector contains a string that represents the path of the selected file. If multiple\nfiles are selected, the value represents the first file in the list. The only valid value when setting a file\ninput is an empty string."
+              },
+              {
+                "name": "defaultValue",
+                "description": "The default value of the form control. Primarily used for resetting the form control.",
+                "type": "string"
+              },
+              {
+                "name": "size",
+                "description": "The file selector's size.",
+                "type": "'sm' | 'md' | 'lg'"
+              },
+              {
+                "name": "label",
+                "description": "The file selector's label, this field is required to ensure accessibility. It is visually hidden by default, use the `showLabel` property to display it.",
+                "type": "string"
+              },
+              {
+                "name": "showLabel",
+                "description": "Visually displays the file selector's label.",
+                "type": "boolean"
+              },
+              {
+                "name": "helpText",
+                "description": "The file selector's help text. If you need to display HTML, use the `help-text` slot instead.",
+                "type": "string"
+              },
+              {
+                "name": "disabled",
+                "description": "Disables the file selector.",
+                "type": "boolean"
+              },
+              {
+                "name": "visuallyDisabled",
+                "description": "Styles the input as if it was disabled and enables aria-disabled",
+                "type": "boolean"
+              },
+              {
+                "name": "droparea",
+                "description": "Draw the file selector as a drop area.",
+                "type": "boolean"
+              },
+              {
+                "name": "accept",
+                "description": "Comma-separated list of supported file types (e.g. `.jpg,.png,image/*`).",
+                "type": "string"
+              },
+              {
+                "name": "styleOnValid",
+                "description": "Shows success styles if the validity of the input is valid.",
+                "type": "boolean"
+              },
+              {
+                "name": "capture",
+                "description": "Specifies which camera to use for capture of image or video data. Works only when not using a droparea.",
+                "type": "'user' | 'environment'"
+              },
+              {
+                "name": "multiple",
+                "description": "Indicates whether the user can select more than one file. Has no effect if `webkitdirectory` is set.",
+                "type": "boolean"
+              },
+              {
+                "name": "webkitdirectory",
+                "description": "Indicates that the file selector should let the user select directories instead of files. Non-standard, but\nsupported by all major browsers.",
+                "type": "boolean"
+              },
+              {
+                "name": "form",
+                "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
+                "type": "string"
+              },
+              {
+                "name": "required",
+                "description": "Makes the input a required field.",
+                "type": "boolean"
+              },
+              {
+                "name": "hideValue",
+                "description": "Suppresses the value from being displayed in the file selector.",
+                "type": "boolean"
+              },
+              { "name": "button", "type": "SdButton" },
+              {
+                "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": "lang",
+                "description": "The element's language.",
+                "type": "string"
+              }
+            ],
+            "events": [
+              {
+                "name": "sd-blur",
+                "description": "Emitted when the control loses focus."
+              },
+              {
+                "name": "sd-change",
+                "description": "Emitted when an alteration to the control's value is committed by the user."
+              },
+              {
+                "name": "sd-error",
+                "description": "Emitted when multiple files are selected via drag and drop, without the `multiple` property being set."
+              },
+              {
+                "name": "sd-focus",
+                "description": "Emitted when the control gains focus."
+              },
+              {
+                "name": "sd-input",
+                "description": "Emitted when the control receives input."
+              }
+            ]
+          }
+        },
         {
           "name": "sd-flipcard",
           "description": "Used to display content on both sides of a card by presenting information on one side and revealing additional information when flipped.\n---\n\n\n### **Events:**\n - **sd-flip-front** - Emmited when the front face of the flipcard is clicked.\n- **sd-flip-back** - Emmited when the back face of the flipcard is clicked.\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 - **front** - The front face of the flipcard.\n- **back** - The back face of the flipcard.\n- **media-front** - An optional media slot which can be as a background. Dependent from gradient variant.\n- **media-back** - An optional media slot which can be as a background. Dependent from gradient variant.\n\n### **CSS Properties:**\n - **--name** - Description of the flipcard. _(default: undefined)_\n- **--height** - Use this property to set the height of the flipcard. _(default: undefined)_\n- **--sd-informational-gradient--primary-800-color-background** - The color used in the gradient of the flipcard when the `gradient-dark` variant is used. By default, it uses the `--sd-color-primary-800` color. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **front** - The container that wraps the front-side of the flipcard.\n- **back** - The container that wraps the back-side of the flipcard.\n- **front-button** - The button that flips the flipcard to the back.\n- **back-button** - The button that flips the flipcard to the front.\n- **front-interactive-container** - The container that wraps the front side and the flip button.\n- **back-interactive-container** - The container that wraps the back side and the flip button.\n- **front-slot-container** - The container that wraps the front slot.\n- **back-slot-container** - The container that wraps the back slot.\n- **media-front** - The container that wraps the media-front slot.\n- **media-back** - The container that wraps the media-back slot.\n- **front-secondary-gradient** - The container that wraps the secondary gradient of the front side.\n- **back-secondary-gradient** - The container that wraps the secondary gradient of the back side.",
@@ -3112,12 +3390,17 @@
         },
         {
           "name": "sd-header",
-          "description": "Used as a container for the main navigation of a website.\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 header's default content.\n\n### **CSS Properties:**\n - **--sd-header-inner-width** - width of the header content _(default: undefined)_\n- **--sd-header-inner-max-width** - max-width of the header content _(default: undefined)_\n- **--sd-header-padding** - padding-left and padding-right of the header content _(default: undefined)_\n- **--sd-header-color-background** - The background color of the header. _(default: undefined)_\n- **--sd-header-padding-bottom** - padding bottom of the header content _(default: undefined)_\n- **--sd-header__underline-color-background** - the background color of the underlined background _(default: undefined)_\n- **--sd-header__underline-height** - height of the underlined header _(default: undefined)_\n- **--sd-header__shadow-height** - height of the shadow when the header is fixed _(default: undefined)_\n\n### **CSS Parts:**\n - **main** - The container that wraps the header's content.",
+          "description": "Used as a container for the main navigation of a website.\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 header's default content.\n\n### **CSS Properties:**\n - **--sd-header-inner-width** - width of the header content _(default: undefined)_\n- **--sd-header-inner-max-width** - max-width of the header content _(default: undefined)_\n- **--sd-header-padding** - padding-left and padding-right of the header content _(default: undefined)_\n- **--sd-header-color-background** - The background color of the header. _(default: undefined)_\n- **--sd-header-padding-bottom** - padding bottom of the header content _(default: undefined)_\n- **--sd-header__underline-color-background** - the background color of the underlined background _(default: undefined)_\n- **--sd-header__underline-height** - height of the underlined header _(default: undefined)_\n- **--sd-header__shadow-height** - height of the shadow _(default: undefined)_\n\n### **CSS Parts:**\n - **main** - The container that wraps the header's content.",
           "doc-url": "",
           "attributes": [
             {
               "name": "fixed",
-              "description": "Determines whether the header is fixed or not. If the header is fixed at the top of the page, a shadow is shown underneath.",
+              "description": "Determines whether the header is fixed or not. If the header is fixed, it stays at the top of the page while scrolling.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "shadow",
+              "description": "Determines whether a drop shadow is shown underneath the header.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
@@ -3139,7 +3422,12 @@
             "properties": [
               {
                 "name": "fixed",
-                "description": "Determines whether the header is fixed or not. If the header is fixed at the top of the page, a shadow is shown underneath.",
+                "description": "Determines whether the header is fixed or not. If the header is fixed, it stays at the top of the page while scrolling.",
+                "type": "boolean"
+              },
+              {
+                "name": "shadow",
+                "description": "Determines whether a drop shadow is shown underneath the header.",
                 "type": "boolean"
               },
               {
@@ -3355,7 +3643,7 @@
               "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": "| 'date'\n    | 'datetime-local'\n    | 'email'\n    | 'number'\n    | 'password'\n    | 'search'\n    | 'tel'\n    | 'text'\n    | 'time'\n    | 'url'",
+                "type": "'date' | 'datetime-local' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url'",
                 "default": "'text'"
               }
             },
@@ -3368,7 +3656,7 @@
               "name": "inputmode",
               "description": "Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual\nkeyboard on supportive devices.",
               "value": {
-                "type": "| 'none'\n    | 'text'\n    | 'decimal'\n    | 'numeric'\n    | 'tel'\n    | 'search'\n    | 'email'\n    | 'url'"
+                "type": "'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'"
               }
             },
             {
@@ -3485,10 +3773,14 @@
               "name": "autocapitalize",
               "description": "Controls whether and how text input is automatically capitalized as it is entered by the user.",
               "value": {
-                "type": "| 'off'\n    | 'none'\n    | 'on'\n    | 'sentences'\n    | 'words'\n    | 'characters'"
+                "type": "'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters'"
               }
             },
-            { "name": "autocorrect", "value": { "type": "'off' | 'on'" } },
+            {
+              "name": "autocorrect",
+              "description": "Indicates whether the browser's autocorrect feature is on or off.",
+              "value": { "type": "boolean" }
+            },
             {
               "name": "autocomplete",
               "description": "Specifies what permission the browser has to provide assistance in filling out form field values. Refer to\n[this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.",
@@ -3503,7 +3795,7 @@
               "name": "enterkeyhint",
               "description": "Used to customize the label or icon of the Enter key on virtual keyboards.",
               "value": {
-                "type": "| 'enter'\n    | 'done'\n    | 'go'\n    | 'next'\n    | 'previous'\n    | 'search'\n    | 'send'"
+                "type": "'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'"
               }
             },
             {
@@ -3593,7 +3885,7 @@
               {
                 "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": "| 'date'\n    | 'datetime-local'\n    | 'email'\n    | 'number'\n    | 'password'\n    | 'search'\n    | 'tel'\n    | 'text'\n    | 'time'\n    | 'url'"
+                "type": "'date' | 'datetime-local' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url'"
               },
               {
                 "name": "size",
@@ -3603,7 +3895,7 @@
               {
                 "name": "inputmode",
                 "description": "Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual\nkeyboard on supportive devices.",
-                "type": "| 'none'\n    | 'text'\n    | 'decimal'\n    | 'numeric'\n    | 'tel'\n    | 'search'\n    | 'email'\n    | 'url'"
+                "type": "'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'"
               },
               {
                 "name": "value",
@@ -3723,9 +4015,13 @@
               {
                 "name": "autocapitalize",
                 "description": "Controls whether and how text input is automatically capitalized as it is entered by the user.",
-                "type": "| 'off'\n    | 'none'\n    | 'on'\n    | 'sentences'\n    | 'words'\n    | 'characters'"
+                "type": "'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters'"
+              },
+              {
+                "name": "autocorrect",
+                "description": "Indicates whether the browser's autocorrect feature is on or off.",
+                "type": "boolean"
               },
-              { "name": "autocorrect", "type": "'off' | 'on'" },
               {
                 "name": "autocomplete",
                 "description": "Specifies what permission the browser has to provide assistance in filling out form field values. Refer to\n[this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.",
@@ -3739,7 +4035,7 @@
               {
                 "name": "enterkeyhint",
                 "description": "Used to customize the label or icon of the Enter key on virtual keyboards.",
-                "type": "| 'enter'\n    | 'done'\n    | 'go'\n    | 'next'\n    | 'previous'\n    | 'search'\n    | 'send'"
+                "type": "'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'"
               },
               {
                 "name": "styleOnValid",
@@ -4783,7 +5079,7 @@
               "name": "arrow-placement",
               "description": "The placement of the arrow. The default is `anchor`, which will align the arrow as close to the center of the\nanchor as possible, considering available space and `arrow-padding`. A value of `start`, `end`, or `center` will\nalign the arrow to the start, end, or center of the popover instead.",
               "value": {
-                "type": "| 'start'\n    | 'end'\n    | 'center'\n    | 'anchor'",
+                "type": "'start' | 'end' | 'center' | 'anchor'",
                 "default": "'anchor'"
               }
             },
@@ -4923,7 +5219,7 @@
               {
                 "name": "arrowPlacement",
                 "description": "The placement of the arrow. The default is `anchor`, which will align the arrow as close to the center of the\nanchor as possible, considering available space and `arrow-padding`. A value of `start`, `end`, or `center` will\nalign the arrow to the start, end, or center of the popover instead.",
-                "type": "| 'start'\n    | 'end'\n    | 'center'\n    | 'anchor'"
+                "type": "'start' | 'end' | 'center' | 'anchor'"
               },
               {
                 "name": "arrowPadding",
@@ -5658,7 +5954,7 @@
               "name": "tooltip",
               "description": "Defines the thumbs tooltip behaviour.",
               "value": {
-                "type": "| 'on-interaction'\n    | 'hidden'\n    | 'always-visible'",
+                "type": "'on-interaction' | 'hidden' | 'always-visible'",
                 "default": "'on-interaction'"
               }
             },
@@ -5772,7 +6068,7 @@
               {
                 "name": "tooltip",
                 "description": "Defines the thumbs tooltip behaviour.",
-                "type": "| 'on-interaction'\n    | 'hidden'\n    | 'always-visible'"
+                "type": "'on-interaction' | 'hidden' | 'always-visible'"
               },
               {
                 "name": "defaultValue",
@@ -6449,53 +6745,6 @@
             "events": []
           }
         },
-        {
-          "name": "sd-spinner",
-          "description": "Used as a visual indicator with a looping animation that shows loading is in process.\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 color of the spinner.",
-              "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 color of the spinner.",
-                "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-step",
           "description": "Used to determine a step in a process or task inside `sd-step-group`.\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 - **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 step's description.\n- **label** - The step's label.\n- **circle-content** - The content inside a step circle. This could be an icon or a number.\n\n### **CSS Properties:**\n - **--sd-step__circle-border-width** - The border width of the step circle. _(default: undefined)_\n- **--sd-step__tail-border-width** - The border width of the step tail. _(default: undefined)_\n- **--sd-step-color-text** - The color text for non-interactive steps. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **circle-and-tail-container** - The container that wraps the step's circle and tail.\n- **circle** - The circle that marks the step's state.\n- **tail** - The step's tail.\n- **text-container** - The container that wraps the step's label and description.\n- **label** - The step's label.\n- **description** - The step's description.",
@@ -7322,7 +7571,7 @@
               "name": "variant",
               "description": "Variant of the teaser",
               "value": {
-                "type": "| 'white'\n    | 'white border-neutral-400'\n    | 'neutral-100'\n    | 'primary'\n    | 'primary-100'",
+                "type": "'white' | 'white border-neutral-400' | 'neutral-100' | 'primary' | 'primary-100'",
                 "default": "'white'"
               }
             },
@@ -7364,7 +7613,7 @@
               {
                 "name": "variant",
                 "description": "Variant of the teaser",
-                "type": "| 'white'\n    | 'white border-neutral-400'\n    | 'neutral-100'\n    | 'primary'\n    | 'primary-100'"
+                "type": "'white' | 'white border-neutral-400' | 'neutral-100' | 'primary' | 'primary-100'"
               },
               {
                 "name": "breakpoint",
@@ -7404,7 +7653,7 @@
               "name": "variant",
               "description": "Variant of the teaser",
               "value": {
-                "type": "| 'white'\n    | 'neutral-100'\n    | 'primary'\n    | 'primary-100'\n    | 'gradient-light'\n    | 'gradient-dark'",
+                "type": "'white' | 'neutral-100' | 'primary' | 'primary-100' | 'gradient-light' | 'gradient-dark'",
                 "default": "'white'"
               }
             },
@@ -7440,7 +7689,7 @@
               {
                 "name": "variant",
                 "description": "Variant of the teaser",
-                "type": "| 'white'\n    | 'neutral-100'\n    | 'primary'\n    | 'primary-100'\n    | 'gradient-light'\n    | 'gradient-dark'"
+                "type": "'white' | 'neutral-100' | 'primary' | 'primary-100' | 'gradient-light' | 'gradient-dark'"
               },
               {
                 "name": "open",
@@ -7550,13 +7799,13 @@
               "name": "autocapitalize",
               "description": "Controls whether and how text input is automatically capitalized as it is entered by the user.",
               "value": {
-                "type": "| 'off'\n    | 'none'\n    | 'on'\n    | 'sentences'\n    | 'words'\n    | 'characters'"
+                "type": "'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters'"
               }
             },
             {
               "name": "autocorrect",
               "description": "Indicates whether the browser's autocorrect feature is on or off.",
-              "value": { "type": "'off' | 'on'" }
+              "value": { "type": "boolean" }
             },
             {
               "name": "autocomplete",
@@ -7572,7 +7821,7 @@
               "name": "enterkeyhint",
               "description": "Used to customize the label or icon of the Enter key on virtual keyboards.",
               "value": {
-                "type": "| 'enter'\n    | 'done'\n    | 'go'\n    | 'next'\n    | 'previous'\n    | 'search'\n    | 'send'"
+                "type": "'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'"
               }
             },
             {
@@ -7722,12 +7971,12 @@
               {
                 "name": "autocapitalize",
                 "description": "Controls whether and how text input is automatically capitalized as it is entered by the user.",
-                "type": "| 'off'\n    | 'none'\n    | 'on'\n    | 'sentences'\n    | 'words'\n    | 'characters'"
+                "type": "'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters'"
               },
               {
                 "name": "autocorrect",
                 "description": "Indicates whether the browser's autocorrect feature is on or off.",
-                "type": "'off' | 'on'"
+                "type": "boolean"
               },
               {
                 "name": "autocomplete",
@@ -7742,7 +7991,7 @@
               {
                 "name": "enterkeyhint",
                 "description": "Used to customize the label or icon of the Enter key on virtual keyboards.",
-                "type": "| 'enter'\n    | 'done'\n    | 'go'\n    | 'next'\n    | 'previous'\n    | 'search'\n    | 'send'"
+                "type": "'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'"
               },
               {
                 "name": "styleOnValid",
@@ -7869,7 +8118,7 @@
               "name": "placement",
               "description": "The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\ninside of the viewport.",
               "value": {
-                "type": "| 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'",
+                "type": "'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end'",
                 "default": "'top'"
               }
             },
@@ -7958,7 +8207,7 @@
               {
                 "name": "placement",
                 "description": "The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\ninside of the viewport.",
-                "type": "| 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'"
+                "type": "'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end'"
               },
               {
                 "name": "disabled",