@webstudio-is/sdk-components-react-radix 0.87.1 → 0.89.0

package/lib/__generated__/dialog.props.js

@@ -1,11 +1,20 @@
 const propsDialog = {
-  modal: { required: false, control: "boolean", type: "boolean" },
-  open: { required: false, control: "boolean", type: "boolean" }
+  open: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    description: "Show or hide the content of this component on the canvas. This will not affect the initial state of the component."
+  }
 };
 const propsDialogTrigger = {};
 const propsDialogOverlay = {
   about: { required: false, control: "text", type: "string" },
-  accessKey: { required: false, control: "text", type: "string" },
+  accessKey: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Keyboard shortcut to activate or add focus to the element."
+  },
   "aria-activedescendant": {
     description: "Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.",
     required: false,
@@ -161,7 +170,7 @@ const propsDialogOverlay = {
     type: "string"
   },
   "aria-label": {
-    description: "Defines a string value that labels the current element.\n@see aria-labelledby.",
+    description: "Provides the accessible name that describes an interactive element if no other accessible name exists, for example in a button that contains an image with no text.",
     required: false,
     control: "text",
     type: "string"
@@ -337,21 +346,64 @@ const propsDialogOverlay = {
     control: "text",
     type: "string"
   },
-  asChild: { required: false, control: "boolean", type: "boolean" },
-  autoCapitalize: { required: false, control: "text", type: "string" },
+  autoCapitalize: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Sets whether input is automatically capitalized when entered by user."
+  },
   autoCorrect: { required: false, control: "text", type: "string" },
-  autoFocus: { required: false, control: "boolean", type: "boolean" },
+  autoFocus: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    description: "Indicates that an element should be focused on page load, or when its parent dialog is displayed."
+  },
   autoSave: { required: false, control: "text", type: "string" },
   className: { required: false, control: "text", type: "string" },
-  color: { required: false, control: "color", type: "string" },
-  content: { required: false, control: "text", type: "string" },
-  contextMenu: { required: false, control: "text", type: "string" },
+  color: {
+    required: false,
+    control: "color",
+    type: "string",
+    description: "This attribute sets the text color using either a named color or a  color specified in the hexadecimal #RRGGBB format. Note: This is a legacy attribute. Please use the CSS color property instead."
+  },
+  content: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "A value associated with http-equiv orname depending on the context."
+  },
+  contextMenu: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Defines the ID of a menu element which willserve as the element's context menu."
+  },
   datatype: { required: false, control: "text", type: "string" },
-  defaultChecked: { required: false, control: "boolean", type: "boolean" },
-  dir: { required: false, control: "text", type: "string" },
-  draggable: { required: false, control: "boolean", type: "boolean" },
-  hidden: { required: false, control: "boolean", type: "boolean" },
-  id: { required: false, control: "text", type: "string" },
+  dir: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)"
+  },
+  draggable: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    description: "Defines whether the element can be dragged."
+  },
+  hidden: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    description: "Prevents rendering of given element, while keeping child elements, e.g. script elements, active."
+  },
+  id: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Often used with CSS to style a specific element. The value of this attribute must be unique."
+  },
   inputMode: {
     description: "Hints at the type of data that might be entered by the user while editing the element or its contents\n@see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute",
     required: false,
@@ -379,20 +431,50 @@ const propsDialogOverlay = {
   itemRef: { required: false, control: "text", type: "string" },
   itemScope: { required: false, control: "boolean", type: "boolean" },
   itemType: { required: false, control: "text", type: "string" },
-  lang: { required: false, control: "text", type: "string" },
+  lang: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Defines the language used in the element."
+  },
   nonce: { required: false, control: "text", type: "string" },
-  placeholder: { required: false, control: "text", type: "string" },
+  placeholder: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Provides a hint to the user of what can be entered in the field."
+  },
   prefix: { required: false, control: "text", type: "string" },
   property: { required: false, control: "text", type: "string" },
   radioGroup: { required: false, control: "text", type: "string" },
-  rel: { required: false, control: "text", type: "string" },
+  rel: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Specifies the relationship of the target object to the link object."
+  },
   resource: { required: false, control: "text", type: "string" },
   results: { required: false, control: "number", type: "number" },
   rev: { required: false, control: "text", type: "string" },
-  role: { required: false, control: "text", type: "string" },
+  role: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Defines an explicit role for an element for use by assistive technologies."
+  },
   security: { required: false, control: "text", type: "string" },
-  slot: { required: false, control: "text", type: "string" },
-  spellCheck: { required: false, control: "boolean", type: "boolean" },
+  slot: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Assigns a slot in a shadow DOM shadow tree to an element."
+  },
+  spellCheck: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    description: "Indicates whether spell checking is allowed for the element."
+  },
   suppressContentEditableWarning: {
     required: false,
     control: "boolean",
@@ -403,13 +485,24 @@ const propsDialogOverlay = {
     control: "boolean",
     type: "boolean"
   },
-  tabIndex: { required: false, control: "number", type: "number" },
-  title: { required: false, control: "text", type: "string" },
+  tabIndex: {
+    required: false,
+    control: "number",
+    type: "number",
+    description: "Overrides the browser's default tab order and follows the one specified instead."
+  },
+  title: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Text to be displayed in a tooltip when hovering over the element."
+  },
   translate: {
     required: false,
     control: "radio",
     type: "string",
-    options: ["yes", "no"]
+    options: ["yes", "no"],
+    description: "Specify whether an element's attribute values and the values of its text node children are to be translated when the page is localized, or whether to leave them unchanged."
   },
   typeof: { required: false, control: "text", type: "string" },
   unselectable: {
@@ -422,7 +515,12 @@ const propsDialogOverlay = {
 };
 const propsDialogContent = {
   about: { required: false, control: "text", type: "string" },
-  accessKey: { required: false, control: "text", type: "string" },
+  accessKey: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Keyboard shortcut to activate or add focus to the element."
+  },
   "aria-activedescendant": {
     description: "Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.",
     required: false,
@@ -578,7 +676,7 @@ const propsDialogContent = {
     type: "string"
   },
   "aria-label": {
-    description: "Defines a string value that labels the current element.\n@see aria-labelledby.",
+    description: "Provides the accessible name that describes an interactive element if no other accessible name exists, for example in a button that contains an image with no text.",
     required: false,
     control: "text",
     type: "string"
@@ -754,21 +852,64 @@ const propsDialogContent = {
     control: "text",
     type: "string"
   },
-  asChild: { required: false, control: "boolean", type: "boolean" },
-  autoCapitalize: { required: false, control: "text", type: "string" },
+  autoCapitalize: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Sets whether input is automatically capitalized when entered by user."
+  },
   autoCorrect: { required: false, control: "text", type: "string" },
-  autoFocus: { required: false, control: "boolean", type: "boolean" },
+  autoFocus: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    description: "Indicates that an element should be focused on page load, or when its parent dialog is displayed."
+  },
   autoSave: { required: false, control: "text", type: "string" },
   className: { required: false, control: "text", type: "string" },
-  color: { required: false, control: "color", type: "string" },
-  content: { required: false, control: "text", type: "string" },
-  contextMenu: { required: false, control: "text", type: "string" },
+  color: {
+    required: false,
+    control: "color",
+    type: "string",
+    description: "This attribute sets the text color using either a named color or a  color specified in the hexadecimal #RRGGBB format. Note: This is a legacy attribute. Please use the CSS color property instead."
+  },
+  content: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "A value associated with http-equiv orname depending on the context."
+  },
+  contextMenu: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Defines the ID of a menu element which willserve as the element's context menu."
+  },
   datatype: { required: false, control: "text", type: "string" },
-  defaultChecked: { required: false, control: "boolean", type: "boolean" },
-  dir: { required: false, control: "text", type: "string" },
-  draggable: { required: false, control: "boolean", type: "boolean" },
-  hidden: { required: false, control: "boolean", type: "boolean" },
-  id: { required: false, control: "text", type: "string" },
+  dir: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)"
+  },
+  draggable: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    description: "Defines whether the element can be dragged."
+  },
+  hidden: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    description: "Prevents rendering of given element, while keeping child elements, e.g. script elements, active."
+  },
+  id: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Often used with CSS to style a specific element. The value of this attribute must be unique."
+  },
   inputMode: {
     description: "Hints at the type of data that might be entered by the user while editing the element or its contents\n@see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute",
     required: false,
@@ -796,20 +937,50 @@ const propsDialogContent = {
   itemRef: { required: false, control: "text", type: "string" },
   itemScope: { required: false, control: "boolean", type: "boolean" },
   itemType: { required: false, control: "text", type: "string" },
-  lang: { required: false, control: "text", type: "string" },
+  lang: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Defines the language used in the element."
+  },
   nonce: { required: false, control: "text", type: "string" },
-  placeholder: { required: false, control: "text", type: "string" },
+  placeholder: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Provides a hint to the user of what can be entered in the field."
+  },
   prefix: { required: false, control: "text", type: "string" },
   property: { required: false, control: "text", type: "string" },
   radioGroup: { required: false, control: "text", type: "string" },
-  rel: { required: false, control: "text", type: "string" },
+  rel: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Specifies the relationship of the target object to the link object."
+  },
   resource: { required: false, control: "text", type: "string" },
   results: { required: false, control: "number", type: "number" },
   rev: { required: false, control: "text", type: "string" },
-  role: { required: false, control: "text", type: "string" },
+  role: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Defines an explicit role for an element for use by assistive technologies."
+  },
   security: { required: false, control: "text", type: "string" },
-  slot: { required: false, control: "text", type: "string" },
-  spellCheck: { required: false, control: "boolean", type: "boolean" },
+  slot: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Assigns a slot in a shadow DOM shadow tree to an element."
+  },
+  spellCheck: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    description: "Indicates whether spell checking is allowed for the element."
+  },
   suppressContentEditableWarning: {
     required: false,
     control: "boolean",
@@ -820,13 +991,24 @@ const propsDialogContent = {
     control: "boolean",
     type: "boolean"
   },
-  tabIndex: { required: false, control: "number", type: "number" },
-  title: { required: false, control: "text", type: "string" },
+  tabIndex: {
+    required: false,
+    control: "number",
+    type: "number",
+    description: "Overrides the browser's default tab order and follows the one specified instead."
+  },
+  title: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Text to be displayed in a tooltip when hovering over the element."
+  },
   translate: {
     required: false,
     control: "radio",
     type: "string",
-    options: ["yes", "no"]
+    options: ["yes", "no"],
+    description: "Specify whether an element's attribute values and the values of its text node children are to be translated when the page is localized, or whether to leave them unchanged."
   },
   typeof: { required: false, control: "text", type: "string" },
   unselectable: {
@@ -839,7 +1021,12 @@ const propsDialogContent = {
 };
 const propsDialogClose = {
   about: { required: false, control: "text", type: "string" },
-  accessKey: { required: false, control: "text", type: "string" },
+  accessKey: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Keyboard shortcut to activate or add focus to the element."
+  },
   "aria-activedescendant": {
     description: "Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.",
     required: false,
@@ -995,7 +1182,7 @@ const propsDialogClose = {
     type: "string"
   },
   "aria-label": {
-    description: "Defines a string value that labels the current element.\n@see aria-labelledby.",
+    description: "Provides the accessible name that describes an interactive element if no other accessible name exists, for example in a button that contains an image with no text.",
     required: false,
     control: "text",
     type: "string"
@@ -1171,28 +1358,106 @@ const propsDialogClose = {
     control: "text",
     type: "string"
   },
-  asChild: { required: false, control: "boolean", type: "boolean" },
-  autoCapitalize: { required: false, control: "text", type: "string" },
+  autoCapitalize: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Sets whether input is automatically capitalized when entered by user."
+  },
   autoCorrect: { required: false, control: "text", type: "string" },
-  autoFocus: { required: false, control: "boolean", type: "boolean" },
+  autoFocus: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    description: "Indicates that an element should be focused on page load, or when its parent dialog is displayed."
+  },
   autoSave: { required: false, control: "text", type: "string" },
   className: { required: false, control: "text", type: "string" },
-  color: { required: false, control: "color", type: "string" },
-  content: { required: false, control: "text", type: "string" },
-  contextMenu: { required: false, control: "text", type: "string" },
+  color: {
+    required: false,
+    control: "color",
+    type: "string",
+    description: "This attribute sets the text color using either a named color or a  color specified in the hexadecimal #RRGGBB format. Note: This is a legacy attribute. Please use the CSS color property instead."
+  },
+  content: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "A value associated with http-equiv orname depending on the context."
+  },
+  contextMenu: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Defines the ID of a menu element which willserve as the element's context menu."
+  },
   datatype: { required: false, control: "text", type: "string" },
-  defaultChecked: { required: false, control: "boolean", type: "boolean" },
-  dir: { required: false, control: "text", type: "string" },
-  disabled: { required: false, control: "boolean", type: "boolean" },
-  draggable: { required: false, control: "boolean", type: "boolean" },
-  form: { required: false, control: "text", type: "string" },
-  formAction: { required: false, control: "text", type: "string" },
-  formEncType: { required: false, control: "text", type: "string" },
-  formMethod: { required: false, control: "text", type: "string" },
-  formNoValidate: { required: false, control: "boolean", type: "boolean" },
-  formTarget: { required: false, control: "text", type: "string" },
-  hidden: { required: false, control: "boolean", type: "boolean" },
-  id: { required: false, control: "text", type: "string" },
+  dir: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)"
+  },
+  disabled: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    description: "Indicates whether the user can interact with the element."
+  },
+  draggable: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    description: "Defines whether the element can be dragged."
+  },
+  form: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Indicates the form that is the owner of the element."
+  },
+  formAction: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Indicates the action of the element, overriding the action defined inthe form."
+  },
+  formEncType: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: `If the button/input is a submit button (e.g. type="submit"), this attribute sets the encoding type to use during form submission. If this attribute is specified, it overrides theenctype attribute of the button's form owner.`
+  },
+  formMethod: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: `If the button/input is a submit button (e.g. type="submit"), this attribute sets the submission method to use during form submission (GET, POST, etc.). If this attribute is specified, it overrides the method attribute of the button's form owner.`
+  },
+  formNoValidate: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    description: `If the button/input is a submit button (e.g. type="submit"), this boolean attribute specifies that the form is not to be validatedwhen it is submitted. If this attribute is specified, it overrides thenovalidate attribute of the button's form owner.`
+  },
+  formTarget: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: `If the button/input is a submit button (e.g. type="submit"), this attribute specifies the browsing context (for example, tab, window, or inline frame) in which to display the response that is received aftersubmitting the form. If this attribute is specified, it overrides thetarget attribute of the button's form owner.`
+  },
+  hidden: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    description: "Prevents rendering of given element, while keeping child elements, e.g. script elements, active."
+  },
+  id: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Often used with CSS to style a specific element. The value of this attribute must be unique."
+  },
   inputMode: {
     description: "Hints at the type of data that might be entered by the user while editing the element or its contents\n@see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute",
     required: false,
@@ -1220,21 +1485,56 @@ const propsDialogClose = {
   itemRef: { required: false, control: "text", type: "string" },
   itemScope: { required: false, control: "boolean", type: "boolean" },
   itemType: { required: false, control: "text", type: "string" },
-  lang: { required: false, control: "text", type: "string" },
-  name: { required: false, control: "text", type: "string" },
+  lang: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Defines the language used in the element."
+  },
+  name: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "This name is important when submitting form data to the server, as it identifies the data associated with the input. When multiple inputs share the same name attribute, they are treated as part of the same group (e.g., radio buttons or checkboxes)."
+  },
   nonce: { required: false, control: "text", type: "string" },
-  placeholder: { required: false, control: "text", type: "string" },
+  placeholder: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Provides a hint to the user of what can be entered in the field."
+  },
   prefix: { required: false, control: "text", type: "string" },
   property: { required: false, control: "text", type: "string" },
   radioGroup: { required: false, control: "text", type: "string" },
-  rel: { required: false, control: "text", type: "string" },
+  rel: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Specifies the relationship of the target object to the link object."
+  },
   resource: { required: false, control: "text", type: "string" },
   results: { required: false, control: "number", type: "number" },
   rev: { required: false, control: "text", type: "string" },
-  role: { required: false, control: "text", type: "string" },
+  role: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Defines an explicit role for an element for use by assistive technologies."
+  },
   security: { required: false, control: "text", type: "string" },
-  slot: { required: false, control: "text", type: "string" },
-  spellCheck: { required: false, control: "boolean", type: "boolean" },
+  slot: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Assigns a slot in a shadow DOM shadow tree to an element."
+  },
+  spellCheck: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    description: "Indicates whether spell checking is allowed for the element."
+  },
   suppressContentEditableWarning: {
     required: false,
     control: "boolean",
@@ -1245,19 +1545,31 @@ const propsDialogClose = {
     control: "boolean",
     type: "boolean"
   },
-  tabIndex: { required: false, control: "number", type: "number" },
-  title: { required: false, control: "text", type: "string" },
+  tabIndex: {
+    required: false,
+    control: "number",
+    type: "number",
+    description: "Overrides the browser's default tab order and follows the one specified instead."
+  },
+  title: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Text to be displayed in a tooltip when hovering over the element."
+  },
   translate: {
     required: false,
     control: "radio",
     type: "string",
-    options: ["yes", "no"]
+    options: ["yes", "no"],
+    description: "Specify whether an element's attribute values and the values of its text node children are to be translated when the page is localized, or whether to leave them unchanged."
   },
   type: {
     required: false,
     control: "radio",
     type: "string",
-    options: ["button", "submit", "reset"]
+    options: ["button", "submit", "reset"],
+    description: "Defines the type of the element."
   },
   typeof: { required: false, control: "text", type: "string" },
   unselectable: {
@@ -1270,7 +1582,12 @@ const propsDialogClose = {
 };
 const propsDialogTitle = {
   about: { required: false, control: "text", type: "string" },
-  accessKey: { required: false, control: "text", type: "string" },
+  accessKey: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Keyboard shortcut to activate or add focus to the element."
+  },
   "aria-activedescendant": {
     description: "Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.",
     required: false,
@@ -1426,7 +1743,7 @@ const propsDialogTitle = {
     type: "string"
   },
   "aria-label": {
-    description: "Defines a string value that labels the current element.\n@see aria-labelledby.",
+    description: "Provides the accessible name that describes an interactive element if no other accessible name exists, for example in a button that contains an image with no text.",
     required: false,
     control: "text",
     type: "string"
@@ -1602,21 +1919,64 @@ const propsDialogTitle = {
     control: "text",
     type: "string"
   },
-  asChild: { required: false, control: "boolean", type: "boolean" },
-  autoCapitalize: { required: false, control: "text", type: "string" },
+  autoCapitalize: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Sets whether input is automatically capitalized when entered by user."
+  },
   autoCorrect: { required: false, control: "text", type: "string" },
-  autoFocus: { required: false, control: "boolean", type: "boolean" },
+  autoFocus: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    description: "Indicates that an element should be focused on page load, or when its parent dialog is displayed."
+  },
   autoSave: { required: false, control: "text", type: "string" },
   className: { required: false, control: "text", type: "string" },
-  color: { required: false, control: "color", type: "string" },
-  content: { required: false, control: "text", type: "string" },
-  contextMenu: { required: false, control: "text", type: "string" },
+  color: {
+    required: false,
+    control: "color",
+    type: "string",
+    description: "This attribute sets the text color using either a named color or a  color specified in the hexadecimal #RRGGBB format. Note: This is a legacy attribute. Please use the CSS color property instead."
+  },
+  content: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "A value associated with http-equiv orname depending on the context."
+  },
+  contextMenu: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Defines the ID of a menu element which willserve as the element's context menu."
+  },
   datatype: { required: false, control: "text", type: "string" },
-  defaultChecked: { required: false, control: "boolean", type: "boolean" },
-  dir: { required: false, control: "text", type: "string" },
-  draggable: { required: false, control: "boolean", type: "boolean" },
-  hidden: { required: false, control: "boolean", type: "boolean" },
-  id: { required: false, control: "text", type: "string" },
+  dir: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)"
+  },
+  draggable: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    description: "Defines whether the element can be dragged."
+  },
+  hidden: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    description: "Prevents rendering of given element, while keeping child elements, e.g. script elements, active."
+  },
+  id: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Often used with CSS to style a specific element. The value of this attribute must be unique."
+  },
   inputMode: {
     description: "Hints at the type of data that might be entered by the user while editing the element or its contents\n@see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute",
     required: false,
@@ -1644,20 +2004,50 @@ const propsDialogTitle = {
   itemRef: { required: false, control: "text", type: "string" },
   itemScope: { required: false, control: "boolean", type: "boolean" },
   itemType: { required: false, control: "text", type: "string" },
-  lang: { required: false, control: "text", type: "string" },
+  lang: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Defines the language used in the element."
+  },
   nonce: { required: false, control: "text", type: "string" },
-  placeholder: { required: false, control: "text", type: "string" },
+  placeholder: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Provides a hint to the user of what can be entered in the field."
+  },
   prefix: { required: false, control: "text", type: "string" },
   property: { required: false, control: "text", type: "string" },
   radioGroup: { required: false, control: "text", type: "string" },
-  rel: { required: false, control: "text", type: "string" },
+  rel: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Specifies the relationship of the target object to the link object."
+  },
   resource: { required: false, control: "text", type: "string" },
   results: { required: false, control: "number", type: "number" },
   rev: { required: false, control: "text", type: "string" },
-  role: { required: false, control: "text", type: "string" },
+  role: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Defines an explicit role for an element for use by assistive technologies."
+  },
   security: { required: false, control: "text", type: "string" },
-  slot: { required: false, control: "text", type: "string" },
-  spellCheck: { required: false, control: "boolean", type: "boolean" },
+  slot: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Assigns a slot in a shadow DOM shadow tree to an element."
+  },
+  spellCheck: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    description: "Indicates whether spell checking is allowed for the element."
+  },
   suppressContentEditableWarning: {
     required: false,
     control: "boolean",
@@ -1668,13 +2058,24 @@ const propsDialogTitle = {
     control: "boolean",
     type: "boolean"
   },
-  tabIndex: { required: false, control: "number", type: "number" },
-  title: { required: false, control: "text", type: "string" },
+  tabIndex: {
+    required: false,
+    control: "number",
+    type: "number",
+    description: "Overrides the browser's default tab order and follows the one specified instead."
+  },
+  title: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Text to be displayed in a tooltip when hovering over the element."
+  },
   translate: {
     required: false,
     control: "radio",
     type: "string",
-    options: ["yes", "no"]
+    options: ["yes", "no"],
+    description: "Specify whether an element's attribute values and the values of its text node children are to be translated when the page is localized, or whether to leave them unchanged."
   },
   typeof: { required: false, control: "text", type: "string" },
   unselectable: {
@@ -1687,7 +2088,12 @@ const propsDialogTitle = {
 };
 const propsDialogDescription = {
   about: { required: false, control: "text", type: "string" },
-  accessKey: { required: false, control: "text", type: "string" },
+  accessKey: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Keyboard shortcut to activate or add focus to the element."
+  },
   "aria-activedescendant": {
     description: "Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.",
     required: false,
@@ -1843,7 +2249,7 @@ const propsDialogDescription = {
     type: "string"
   },
   "aria-label": {
-    description: "Defines a string value that labels the current element.\n@see aria-labelledby.",
+    description: "Provides the accessible name that describes an interactive element if no other accessible name exists, for example in a button that contains an image with no text.",
     required: false,
     control: "text",
     type: "string"
@@ -2019,21 +2425,64 @@ const propsDialogDescription = {
     control: "text",
     type: "string"
   },
-  asChild: { required: false, control: "boolean", type: "boolean" },
-  autoCapitalize: { required: false, control: "text", type: "string" },
+  autoCapitalize: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Sets whether input is automatically capitalized when entered by user."
+  },
   autoCorrect: { required: false, control: "text", type: "string" },
-  autoFocus: { required: false, control: "boolean", type: "boolean" },
+  autoFocus: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    description: "Indicates that an element should be focused on page load, or when its parent dialog is displayed."
+  },
   autoSave: { required: false, control: "text", type: "string" },
   className: { required: false, control: "text", type: "string" },
-  color: { required: false, control: "color", type: "string" },
-  content: { required: false, control: "text", type: "string" },
-  contextMenu: { required: false, control: "text", type: "string" },
+  color: {
+    required: false,
+    control: "color",
+    type: "string",
+    description: "This attribute sets the text color using either a named color or a  color specified in the hexadecimal #RRGGBB format. Note: This is a legacy attribute. Please use the CSS color property instead."
+  },
+  content: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "A value associated with http-equiv orname depending on the context."
+  },
+  contextMenu: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Defines the ID of a menu element which willserve as the element's context menu."
+  },
   datatype: { required: false, control: "text", type: "string" },
-  defaultChecked: { required: false, control: "boolean", type: "boolean" },
-  dir: { required: false, control: "text", type: "string" },
-  draggable: { required: false, control: "boolean", type: "boolean" },
-  hidden: { required: false, control: "boolean", type: "boolean" },
-  id: { required: false, control: "text", type: "string" },
+  dir: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)"
+  },
+  draggable: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    description: "Defines whether the element can be dragged."
+  },
+  hidden: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    description: "Prevents rendering of given element, while keeping child elements, e.g. script elements, active."
+  },
+  id: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Often used with CSS to style a specific element. The value of this attribute must be unique."
+  },
   inputMode: {
     description: "Hints at the type of data that might be entered by the user while editing the element or its contents\n@see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute",
     required: false,
@@ -2061,20 +2510,50 @@ const propsDialogDescription = {
   itemRef: { required: false, control: "text", type: "string" },
   itemScope: { required: false, control: "boolean", type: "boolean" },
   itemType: { required: false, control: "text", type: "string" },
-  lang: { required: false, control: "text", type: "string" },
+  lang: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Defines the language used in the element."
+  },
   nonce: { required: false, control: "text", type: "string" },
-  placeholder: { required: false, control: "text", type: "string" },
+  placeholder: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Provides a hint to the user of what can be entered in the field."
+  },
   prefix: { required: false, control: "text", type: "string" },
   property: { required: false, control: "text", type: "string" },
   radioGroup: { required: false, control: "text", type: "string" },
-  rel: { required: false, control: "text", type: "string" },
+  rel: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Specifies the relationship of the target object to the link object."
+  },
   resource: { required: false, control: "text", type: "string" },
   results: { required: false, control: "number", type: "number" },
   rev: { required: false, control: "text", type: "string" },
-  role: { required: false, control: "text", type: "string" },
+  role: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Defines an explicit role for an element for use by assistive technologies."
+  },
   security: { required: false, control: "text", type: "string" },
-  slot: { required: false, control: "text", type: "string" },
-  spellCheck: { required: false, control: "boolean", type: "boolean" },
+  slot: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Assigns a slot in a shadow DOM shadow tree to an element."
+  },
+  spellCheck: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    description: "Indicates whether spell checking is allowed for the element."
+  },
   suppressContentEditableWarning: {
     required: false,
     control: "boolean",
@@ -2085,13 +2564,24 @@ const propsDialogDescription = {
     control: "boolean",
     type: "boolean"
   },
-  tabIndex: { required: false, control: "number", type: "number" },
-  title: { required: false, control: "text", type: "string" },
+  tabIndex: {
+    required: false,
+    control: "number",
+    type: "number",
+    description: "Overrides the browser's default tab order and follows the one specified instead."
+  },
+  title: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Text to be displayed in a tooltip when hovering over the element."
+  },
   translate: {
     required: false,
     control: "radio",
     type: "string",
-    options: ["yes", "no"]
+    options: ["yes", "no"],
+    description: "Specify whether an element's attribute values and the values of its text node children are to be translated when the page is localized, or whether to leave them unchanged."
   },
   typeof: { required: false, control: "text", type: "string" },
   unselectable: {