@rarui/components 1.21.0 → 1.23.0

package/custom-elements.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.20.0",
+  "version": "1.22.0",
   "tags": [
     {
       "name": "rarui-avatar",
@@ -7,8 +7,7 @@
       "attributes": [
         {
           "name": "size",
-          "default": "medium",
-          "description": "Specifies the size of the Avatar component.\n\n- large\n- medium\n- small\n- xLarge",
+          "description": "Specifies the size of the Avatar component.\n\n- large\n- medium\n- small\n- xLarge\n\n@default medium",
           "type": "string",
           "values": [
             {
@@ -24,18 +23,17 @@
             {
               "name": "xLarge"
             }
-          ]
+          ],
+          "default": "medium"
         }
       ]
     },
     {
       "name": "rarui-badge",
-      "description": "## Rarui Badge\n---\nThe Badge components are only used to transmit dynamic information, such as a connection or status.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/exhibition/badge) for more details.",
       "attributes": [
         {
           "name": "appearance",
-          "default": "brand",
-          "description": "Determines the visual style of the badge, influencing its color scheme and appearance.\n\n- brand\n- danger\n- info\n- inverted\n- neutral\n- success\n- warning",
+          "description": "Determines the visual style of the badge, influencing its color scheme and appearance.\n\n- brand\n- danger\n- info\n- inverted\n- neutral\n- success\n- warning\n\n@default brand",
           "type": "string",
           "values": [
             {
@@ -60,12 +58,12 @@
             {
               "name": "warning"
             }
-          ]
+          ],
+          "default": "brand"
         },
         {
           "name": "size",
-          "default": "medium",
-          "description": "Specifies the size of the badge, controlling its dimensions.\n\n- dot\n- large\n- medium\n- small",
+          "description": "Specifies the size of the badge, controlling its dimensions.\n\n- dot\n- large\n- medium\n- small\n\n@default medium",
           "type": "string",
           "values": [
             {
@@ -81,12 +79,12 @@
             {
               "name": "small"
             }
-          ]
+          ],
+          "default": "medium"
         },
         {
           "name": "variant",
-          "default": "solid",
-          "description": "Defines the visual variant of the badge, affecting its background style.\n\n- outlined\n- solid",
+          "description": "Defines the visual variant of the badge, affecting its background style.\n\n- outlined\n- solid\n\n@default solid",
           "type": "string",
           "values": [
             {
@@ -96,18 +94,17 @@
               "name": "solid",
               "description": "(default)"
             }
-          ]
+          ],
+          "default": "solid"
         }
       ]
     },
     {
       "name": "rarui-divider",
-      "description": "## Rarui Divider\n---\nA Divider is a thin line used to separate or group content in lists and layouts.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/exhibition/divider) for more details.",
       "attributes": [
         {
           "name": "direction",
-          "default": "horizontal",
-          "description": "The direction of the Divider.\n\n- horizontal\n- vertical",
+          "description": "The direction of the Divider.\n\n- horizontal\n- vertical\n\n@default horizontal",
           "type": "string",
           "values": [
             {
@@ -117,18 +114,18 @@
             {
               "name": "vertical"
             }
-          ]
+          ],
+          "default": "horizontal"
         },
         {
           "name": "size",
-          "default": "100%",
-          "description": "The **`size`** CSS property sets an element's area.",
-          "values": []
+          "description": "The **`size`** CSS property sets an element's area.\n\n@default 100%",
+          "values": [],
+          "default": "100%"
         },
         {
           "name": "type",
-          "default": "solid",
-          "description": "The **`type`** shorthand CSS property sets the line style for all four sides of an element's.\n\nThis property supports responsive values. You can pass a single value like `\"$dashed\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$dashed\",\n  \"md\": \"$solid\",\n  \"lg\": \"$dashed\",\n  \"xl\": \"$solid\"\n}\n```\n\n- $dashed\n- $solid",
+          "description": "The **`type`** shorthand CSS property sets the line style for all four sides of an element's.\n\nThis property supports responsive values. You can pass a single value like `\"$dashed\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$dashed\",\n  \"md\": \"$solid\",\n  \"lg\": \"$dashed\",\n  \"xl\": \"$solid\"\n}\n```\n\n- $dashed\n- $solid\n\n@default solid",
           "values": [
             {
               "name": "$dashed"
@@ -136,12 +133,12 @@
             {
               "name": "$solid"
             }
-          ]
+          ],
+          "default": "solid"
         },
         {
           "name": "thickness",
-          "default": "$1",
-          "description": "The **`thickness`** shorthand CSS property sets the width of an element's.\n\nThis property supports responsive values. You can pass a single value like `\"$1\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$1\",\n  \"md\": \"$2\",\n  \"lg\": \"$1\",\n  \"xl\": \"$2\"\n}\n```\n\n- $1\n- $2",
+          "description": "The **`thickness`** shorthand CSS property sets the width of an element's.\n\nThis property supports responsive values. You can pass a single value like `\"$1\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$1\",\n  \"md\": \"$2\",\n  \"lg\": \"$1\",\n  \"xl\": \"$2\"\n}\n```\n\n- $1\n- $2\n\n@default $1",
           "values": [
             {
               "name": "$1",
@@ -150,12 +147,12 @@
             {
               "name": "$2"
             }
-          ]
+          ],
+          "default": "$1"
         },
         {
           "name": "color",
-          "default": "$divider",
-          "description": "The **`color`** CSS property sets an element's color.\n\nThis property supports responsive values. You can pass a single value like `\"$brand\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$brand\",\n  \"md\": \"$brand-alt\",\n  \"lg\": \"$disabled\",\n  \"xl\": \"$divider\"\n}\n```\n\n- $brand\n- $brand-alt\n- $disabled\n- $divider\n- $error\n- $info\n- $invert\n- $invert-disabled\n- $primary\n- $secondary\n- $subdued\n- $success\n- $transparent\n- $warning",
+          "description": "The **`color`** CSS property sets an element's color.\n\nThis property supports responsive values. You can pass a single value like `\"$brand\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$brand\",\n  \"md\": \"$brand-alt\",\n  \"lg\": \"$disabled\",\n  \"xl\": \"$divider\"\n}\n```\n\n- $brand\n- $brand-alt\n- $disabled\n- $divider\n- $error\n- $info\n- $invert\n- $invert-disabled\n- $primary\n- $secondary\n- $subdued\n- $success\n- $transparent\n- $warning\n\n@default $divider",
           "values": [
             {
               "name": "$brand"
@@ -200,7 +197,8 @@
             {
               "name": "$warning"
             }
-          ]
+          ],
+          "default": "$divider"
         }
       ]
     },
@@ -1338,8 +1336,7 @@
         },
         {
           "name": "size",
-          "default": "medium",
-          "description": "Icon size, can be 'small' |'medium' |'large' or a number.\n\n- large\n- medium\n- small",
+          "description": "Icon size, can be 'small' |'medium' |'large' or a number.\n\n- large\n- medium\n- small\n\n@default medium",
           "values": [
             {
               "name": "large"
@@ -1351,13 +1348,13 @@
             {
               "name": "small"
             }
-          ]
+          ],
+          "default": "medium"
         }
       ]
     },
     {
       "name": "rarui-label",
-      "description": "## Rarui Label\n---\nThe label component allows us to name elements within a form.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/exhibition/label) for more details.",
       "attributes": [
         {
           "name": "html-for",
@@ -1366,9 +1363,9 @@
         },
         {
           "name": "hidden",
-          "default": false,
           "description": "Specifies whether the label is hidden or not",
-          "type": "boolean"
+          "type": "boolean",
+          "default": false
         }
       ]
     },
@@ -1378,8 +1375,7 @@
       "attributes": [
         {
           "name": "direction",
-          "default": "horizontal",
-          "description": "Specifies the direction of the stepper. This prop accepts one of the following values: vertical or horizontal.\n\n- horizontal\n- vertical",
+          "description": "Specifies the direction of the stepper. This prop accepts one of the following values: vertical or horizontal.\n\n- horizontal\n- vertical\n\n@default horizontal",
           "type": "string",
           "values": [
             {
@@ -1389,13 +1385,13 @@
             {
               "name": "vertical"
             }
-          ]
+          ],
+          "default": "horizontal"
         }
       ]
     },
     {
       "name": "rarui-stepper-step",
-      "description": "## Rarui Stepper Step\n---\nStepper transmit progress through steps.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/exhibition/stepper) for more details.",
       "attributes": [
         {
           "name": "title",
@@ -1409,22 +1405,41 @@
         },
         {
           "name": "active",
-          "default": false,
           "description": "Indicates whether the step is currently active. An active step is typically highlighted to show that it is the current step.",
-          "type": "boolean"
+          "type": "boolean",
+          "default": false
         },
         {
           "name": "done",
-          "default": false,
           "description": "Indicates whether the step has been completed. A completed step is usually marked with a checkmark or other indicator.",
-          "type": "boolean"
+          "type": "boolean",
+          "default": false
         }
       ]
     },
     {
       "name": "rarui-text",
-      "description": "## Rarui Text\n---\nText is a basic component that allows us to write blocks of text and give it formatting to use within other components, sections and pages of our application or website.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/exhibition/typography) for more details.",
       "attributes": [
+        {
+          "name": "as",
+          "description": "Type of html tag to create for the Text component.\n\n- p\n- span\n\n@default p",
+          "type": "string",
+          "values": [
+            {
+              "name": "p",
+              "description": "(default)"
+            },
+            {
+              "name": "span"
+            }
+          ],
+          "default": "p"
+        },
+        {
+          "name": "line-clamp",
+          "description": "The -webkit-line-clamp CSS property allows limiting of the contents of a block to the specified number of lines.",
+          "type": "number"
+        },
         {
           "name": "color",
           "description": "The color property is used to set the color of the title.\n\nThis property supports responsive values. You can pass a single value like `\"$brand\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$brand\",\n  \"md\": \"$brand-alt\",\n  \"lg\": \"$currentColor\",\n  \"xl\": \"$disabled\"\n}\n```\n\n- $brand\n- $brand-alt\n- $currentColor\n- $disabled\n- $error\n- $info\n- $invert\n- $invert-disabled\n- $invert-secondary\n- $on-brand\n- $on-error\n- $on-info\n- $on-success\n- $on-warning\n- $primary\n- $secondary\n- $success\n- $warning\n- $warning-alt",
@@ -1490,8 +1505,7 @@
         },
         {
           "name": "font-weight",
-          "default": "$regular",
-          "description": "The color property is used to set the color of the title.\n\nThis property supports responsive values. You can pass a single value like `\"$bold\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$bold\",\n  \"md\": \"$medium\",\n  \"lg\": \"$regular\",\n  \"xl\": \"$semiBold\"\n}\n```\n\n- $bold\n- $medium\n- $regular\n- $semiBold",
+          "description": "The color property is used to set the color of the title.\n\nThis property supports responsive values. You can pass a single value like `\"$bold\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$bold\",\n  \"md\": \"$medium\",\n  \"lg\": \"$regular\",\n  \"xl\": \"$semiBold\"\n}\n```\n\n- $bold\n- $medium\n- $regular\n- $semiBold\n\n@default $regular",
           "values": [
             {
               "name": "$bold"
@@ -1506,11 +1520,12 @@
             {
               "name": "$semiBold"
             }
-          ]
+          ],
+          "default": "$regular"
         },
         {
-          "name": "line-height",
-          "description": "The lineHeight property specifies the line height of the title.\n\nThis property supports responsive values. You can pass a single value like `\"$l\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$l\",\n  \"md\": \"$m\",\n  \"lg\": \"$s\",\n  \"xl\": \"$xl\"\n}\n```\n\n- $l\n- $m\n- $s\n- $xl\n- $xs\n- $xxs",
+          "name": "font-size",
+          "description": "The fontSize property sets the size of the text.\n\nThis property supports responsive values. You can pass a single value like `\"$l\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$l\",\n  \"md\": \"$m\",\n  \"lg\": \"$s\",\n  \"xl\": \"$xl\"\n}\n```\n\n- $l\n- $m\n- $s\n- $xl\n- $xs\n- $xxs",
           "values": [
             {
               "name": "$l"
@@ -1533,8 +1548,8 @@
           ]
         },
         {
-          "name": "font-size",
-          "description": "The fontSize property sets the size of the text.\n\nThis property supports responsive values. You can pass a single value like `\"$l\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$l\",\n  \"md\": \"$m\",\n  \"lg\": \"$s\",\n  \"xl\": \"$xl\"\n}\n```\n\n- $l\n- $m\n- $s\n- $xl\n- $xs\n- $xxs",
+          "name": "line-height",
+          "description": "The lineHeight property specifies the line height of the title.\n\nThis property supports responsive values. You can pass a single value like `\"$l\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$l\",\n  \"md\": \"$m\",\n  \"lg\": \"$s\",\n  \"xl\": \"$xl\"\n}\n```\n\n- $l\n- $m\n- $s\n- $xl\n- $xs\n- $xxs",
           "values": [
             {
               "name": "$l"
@@ -1584,20 +1599,14 @@
           ]
         },
         {
-          "name": "word-break",
-          "description": "The **`word-break`** CSS property sets whether line breaks appear wherever the text would otherwise overflow its content box.\n\n\n**Initial value**: `normal`\n\nThis property supports responsive values. You can pass a single value like `\"break-all\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"break-all\",\n  \"md\": \"break-word\",\n  \"lg\": \"keep-all\",\n  \"xl\": \"normal\"\n}\n```\n\n- break-all\n- break-word\n- keep-all\n- normal",
+          "name": "text-overflow",
+          "description": "The **`text-overflow`** CSS property sets how hidden overflow content is signaled to users. It can be clipped, display an ellipsis ('`…`'), or display a custom string.\n\n\n**Initial value**: `clip`\n\nThis property supports responsive values. You can pass a single value like `\"clip\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"clip\",\n  \"md\": \"ellipsis\",\n  \"lg\": \"clip\",\n  \"xl\": \"ellipsis\"\n}\n```\n\n- clip\n- ellipsis",
           "values": [
             {
-              "name": "break-all"
-            },
-            {
-              "name": "break-word"
-            },
-            {
-              "name": "keep-all"
+              "name": "clip"
             },
             {
-              "name": "normal"
+              "name": "ellipsis"
             }
           ]
         },
@@ -1626,62 +1635,26 @@
           ]
         },
         {
-          "name": "text-decoration",
-          "description": "The **`text-decoration`** shorthand CSS property sets the appearance of decorative lines on text. It is a shorthand for `text-decoration-line`, `text-decoration-color`, `text-decoration-style`, and the newer `text-decoration-thickness` property.\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"auto\",\n  \"md\": \"blink\",\n  \"lg\": \"dashed\",\n  \"xl\": \"dotted\"\n}\n```\n\n- auto\n- blink\n- dashed\n- dotted\n- double\n- from-font\n- grammar-error\n- line-through\n- none\n- overline\n- solid\n- spelling-error\n- underline\n- wavy",
+          "name": "white-space",
+          "description": "The **`white-space`** CSS property sets how white space inside an element is handled.\n\n\n**Initial value**: `normal`\n\nThis property supports responsive values. You can pass a single value like `\"break-spaces\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"break-spaces\",\n  \"md\": \"normal\",\n  \"lg\": \"nowrap\",\n  \"xl\": \"pre\"\n}\n```\n\n- break-spaces\n- normal\n- nowrap\n- pre\n- pre-line\n- pre-wrap",
           "values": [
             {
-              "name": "auto"
-            },
-            {
-              "name": "blink"
-            },
-            {
-              "name": "dashed"
-            },
-            {
-              "name": "dotted"
-            },
-            {
-              "name": "double"
-            },
-            {
-              "name": "from-font"
-            },
-            {
-              "name": "grammar-error"
-            },
-            {
-              "name": "line-through"
-            },
-            {
-              "name": "none"
-            },
-            {
-              "name": "overline"
+              "name": "break-spaces"
             },
             {
-              "name": "solid"
+              "name": "normal"
             },
             {
-              "name": "spelling-error"
+              "name": "nowrap"
             },
             {
-              "name": "underline"
+              "name": "pre"
             },
             {
-              "name": "wavy"
-            }
-          ]
-        },
-        {
-          "name": "text-overflow",
-          "description": "The **`text-overflow`** CSS property sets how hidden overflow content is signaled to users. It can be clipped, display an ellipsis ('`…`'), or display a custom string.\n\n\n**Initial value**: `clip`\n\nThis property supports responsive values. You can pass a single value like `\"clip\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"clip\",\n  \"md\": \"ellipsis\",\n  \"lg\": \"clip\",\n  \"xl\": \"ellipsis\"\n}\n```\n\n- clip\n- ellipsis",
-          "values": [
-            {
-              "name": "clip"
+              "name": "pre-line"
             },
             {
-              "name": "ellipsis"
+              "name": "pre-wrap"
             }
           ]
         },
@@ -1712,6 +1685,24 @@
             }
           ]
         },
+        {
+          "name": "word-break",
+          "description": "The **`word-break`** CSS property sets whether line breaks appear wherever the text would otherwise overflow its content box.\n\n\n**Initial value**: `normal`\n\nThis property supports responsive values. You can pass a single value like `\"break-all\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"break-all\",\n  \"md\": \"break-word\",\n  \"lg\": \"keep-all\",\n  \"xl\": \"normal\"\n}\n```\n\n- break-all\n- break-word\n- keep-all\n- normal",
+          "values": [
+            {
+              "name": "break-all"
+            },
+            {
+              "name": "break-word"
+            },
+            {
+              "name": "keep-all"
+            },
+            {
+              "name": "normal"
+            }
+          ]
+        },
         {
           "name": "overflow",
           "description": "The **`overflow`** CSS shorthand property sets the desired behavior for an element's overflow — i.e. when an element's content is too big to fit in its block formatting context — in both directions.\n\n\n**Initial value**: `visible`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"auto\",\n  \"md\": \"clip\",\n  \"lg\": \"hidden\",\n  \"xl\": \"scroll\"\n}\n```\n\n- auto\n- clip\n- hidden\n- scroll\n- visible",
@@ -1734,44 +1725,61 @@
           ]
         },
         {
-          "name": "white-space",
-          "description": "The **`white-space`** CSS property sets how white space inside an element is handled.\n\n\n**Initial value**: `normal`\n\nThis property supports responsive values. You can pass a single value like `\"break-spaces\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"break-spaces\",\n  \"md\": \"normal\",\n  \"lg\": \"nowrap\",\n  \"xl\": \"pre\"\n}\n```\n\n- break-spaces\n- normal\n- nowrap\n- pre\n- pre-line\n- pre-wrap",
+          "name": "text-decoration",
+          "description": "The **`text-decoration`** shorthand CSS property sets the appearance of decorative lines on text. It is a shorthand for `text-decoration-line`, `text-decoration-color`, `text-decoration-style`, and the newer `text-decoration-thickness` property.\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"auto\",\n  \"md\": \"blink\",\n  \"lg\": \"dashed\",\n  \"xl\": \"dotted\"\n}\n```\n\n- auto\n- blink\n- dashed\n- dotted\n- double\n- from-font\n- grammar-error\n- line-through\n- none\n- overline\n- solid\n- spelling-error\n- underline\n- wavy",
           "values": [
             {
-              "name": "break-spaces"
+              "name": "auto"
             },
             {
-              "name": "normal"
+              "name": "blink"
             },
             {
-              "name": "nowrap"
+              "name": "dashed"
             },
             {
-              "name": "pre"
+              "name": "dotted"
             },
             {
-              "name": "pre-line"
+              "name": "double"
             },
             {
-              "name": "pre-wrap"
+              "name": "from-font"
+            },
+            {
+              "name": "grammar-error"
+            },
+            {
+              "name": "line-through"
+            },
+            {
+              "name": "none"
+            },
+            {
+              "name": "overline"
+            },
+            {
+              "name": "solid"
+            },
+            {
+              "name": "spelling-error"
+            },
+            {
+              "name": "underline"
+            },
+            {
+              "name": "wavy"
             }
           ]
-        },
-        {
-          "name": "line-clamp",
-          "description": "The -webkit-line-clamp CSS property allows limiting of the contents of a block to the specified number of lines.",
-          "type": "number"
         }
       ]
     },
     {
       "name": "rarui-title",
-      "description": "## Rarui Title\n---\nTilte is a basic component that allows you to give titles and more hierarchy to blocks of text for sections or header components.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/exhibition/typography) for more details.",
       "attributes": [
         {
           "name": "as",
-          "default": "h1",
-          "description": "Type of html tag to create for the title.\n\n- h1\n- h2\n- h3\n- h4\n- h5\n- h6",
+          "description": "Type of html tag to create for the title.\n\n- h1\n- h2\n- h3\n- h4\n- h5\n- h6\n\n@default h1",
           "type": "string",
           "values": [
             {
@@ -1793,7 +1801,8 @@
             {
               "name": "h6"
             }
-          ]
+          ],
+          "default": "h1"
         },
         {
           "name": "color",
@@ -1860,8 +1869,7 @@
         },
         {
           "name": "font-weight",
-          "default": "$regular",
-          "description": "The color property is used to set the color of the title.\n\nThis property supports responsive values. You can pass a single value like `\"$bold\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$bold\",\n  \"md\": \"$medium\",\n  \"lg\": \"$regular\",\n  \"xl\": \"$semiBold\"\n}\n```\n\n- $bold\n- $medium\n- $regular\n- $semiBold",
+          "description": "The color property is used to set the color of the title.\n\nThis property supports responsive values. You can pass a single value like `\"$bold\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$bold\",\n  \"md\": \"$medium\",\n  \"lg\": \"$regular\",\n  \"xl\": \"$semiBold\"\n}\n```\n\n- $bold\n- $medium\n- $regular\n- $semiBold\n\n@default $regular",
           "values": [
             {
               "name": "$bold"
@@ -1876,7 +1884,8 @@
             {
               "name": "$semiBold"
             }
-          ]
+          ],
+          "default": "$regular"
         },
         {
           "name": "font-size",
@@ -2031,16 +2040,9 @@
       "name": "rarui-tooltip",
       "description": "## Rarui Tootip\n---\nTooltips are informative, specific, and action-oriented text labels that provide contextual support\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/exhibition/tooltip) for more details.",
       "attributes": [
-        {
-          "name": "inverted",
-          "default": false,
-          "description": "Specifies whether the color scheme should be inverted",
-          "type": "boolean"
-        },
         {
           "name": "padding",
-          "default": "base",
-          "description": "Specifies the padding for the tooltip\n\n- base\n- none",
+          "description": "Specifies the padding for the tooltip\n\n- base\n- none\n\n@default base",
           "type": "string",
           "values": [
             {
@@ -2050,48 +2052,54 @@
             {
               "name": "none"
             }
-          ]
+          ],
+          "default": "base"
+        },
+        {
+          "name": "offset",
+          "description": "Offest displaces the floating element from its core placement along the specified axes.\n\n@default 10",
+          "type": "number",
+          "default": 10
+        },
+        {
+          "name": "inverted",
+          "description": "Specifies whether the color scheme should be inverted",
+          "type": "boolean",
+          "default": false
         },
         {
           "name": "arrow",
-          "default": true,
-          "description": "Conditional for displaying the popover arrow.",
-          "type": "boolean"
+          "description": "Conditional for displaying the popover arrow.\n\n@default true",
+          "type": "boolean",
+          "default": true
         },
         {
           "name": "match-reference-width",
-          "default": false,
           "description": "A common feature of select dropdowns is that the dropdown matches the width of the reference regardless of its contents.",
-          "type": "boolean"
+          "type": "boolean",
+          "default": false
         },
         {
           "name": "enabled-hover",
-          "default": false,
           "description": "Adds hover event listeners that change the open state, like CSS :hover.",
-          "type": "boolean"
+          "type": "boolean",
+          "default": false
         },
         {
           "name": "enabled-click",
-          "default": true,
-          "description": "Adds click event listeners that change the open state.",
-          "type": "boolean"
+          "description": "Adds click event listeners that change the open state.\n\n@default true",
+          "type": "boolean",
+          "default": true
         },
         {
           "name": "enabled-dismiss",
-          "default": true,
-          "description": "Adds listeners that dismiss (close) the floating element.",
-          "type": "boolean"
-        },
-        {
-          "name": "offset",
-          "default": 10,
-          "description": "Offest displaces the floating element from its core placement along the specified axes.",
-          "type": "number"
+          "description": "Adds listeners that dismiss (close) the floating element.\n\n@default true",
+          "type": "boolean",
+          "default": true
         },
         {
           "name": "position",
-          "default": "bottom",
-          "description": "Position of the tooltip.\n\n- bottom\n- bottom-end\n- bottom-start\n- left\n- left-end\n- left-start\n- right\n- right-end\n- right-start\n- top\n- top-end\n- top-start",
+          "description": "Position of the tooltip.\n\n- bottom\n- bottom-end\n- bottom-start\n- left\n- left-end\n- left-start\n- right\n- right-end\n- right-start\n- top\n- top-end\n- top-start\n\n@default bottom",
           "type": "string",
           "values": [
             {
@@ -2131,12 +2139,12 @@
             {
               "name": "top-start"
             }
-          ]
+          ],
+          "default": "bottom"
         },
         {
           "name": "strategy",
-          "default": "fixed",
-          "description": "CSS positioning strategy used for the tooltip.\n\n- `\"fixed\"` (default) positions the tooltip relative to the viewport,\n  so it stays in the same place even when the page is scrolled.\n- `\"absolute\"` positions the tooltip relative to the nearest positioned ancestor,\n  which can be useful when you want the tooltip to move with page content.\n\nUse `\"fixed\"` for tooltips that should remain visible on scroll,\nand `\"absolute\"` when tooltips need to be positioned within scrollable containers.\n\n- absolute\n- fixed",
+          "description": "CSS positioning strategy used for the tooltip.\n\n- `\"fixed\"` (default) positions the tooltip relative to the viewport,\n  so it stays in the same place even when the page is scrolled.\n- `\"absolute\"` positions the tooltip relative to the nearest positioned ancestor,\n  which can be useful when you want the tooltip to move with page content.\n\nUse `\"fixed\"` for tooltips that should remain visible on scroll,\nand `\"absolute\"` when tooltips need to be positioned within scrollable containers.\n\n- absolute\n- fixed\n\n@default fixed",
           "type": "string",
           "values": [
             {
@@ -2146,23 +2154,22 @@
               "name": "fixed",
               "description": "(default)"
             }
-          ]
+          ],
+          "default": "fixed"
         }
       ]
     },
     {
       "name": "rarui-progress",
-      "description": "## Rarui Progress\n---\nThe Badge components are only used to transmit dynamic information, such as a connection or status.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/exhibition/badge) for more details.",
       "attributes": [
         {
           "name": "percentage",
-          "description": "The progress percentage, represented as a number between 0 and 100.\nThis indicates the completion level of the process.",
+          "description": "The progress percentage, represented as a number between 0 and 100.\nThis indicates the completion level of the process.\n\n(Required)",
           "type": "number"
         },
         {
           "name": "color",
-          "default": "$info",
-          "description": "Specifies the color of the progress.\nThis prop accepts one of the following values: \"$info\", \"$success\" or \"$brand\"\n\n- $brand\n- $info\n- $success",
+          "description": "Specifies the color of the progress.\nThis prop accepts one of the following values: \"$info\", \"$success\" or \"$brand\"\n\n- $brand\n- $info\n- $success\n\n@default $info",
           "type": "string",
           "values": [
             {
@@ -2175,23 +2182,22 @@
             {
               "name": "$success"
             }
-          ]
+          ],
+          "default": "$info"
         }
       ]
     },
     {
       "name": "rarui-progress-circle",
-      "description": "## Rarui Card Body\n---\nThe Card component contains textual content, images, and actions about a topic.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/surface/card) for more details.",
       "attributes": [
         {
           "name": "percentage",
-          "description": "The progress percentage, represented as a number between 0 and 100.\nThis indicates the completion level of the process.",
+          "description": "The progress percentage, represented as a number between 0 and 100.\nThis indicates the completion level of the process.\n\n(Required)",
           "type": "number"
         },
         {
           "name": "color",
-          "default": "$info",
-          "description": "Specifies the color of the progress.\nThis prop accepts one of the following values: \"$info\", \"$success\" or \"$brand\"\n\n- $brand\n- $info\n- $success",
+          "description": "Specifies the color of the progress.\nThis prop accepts one of the following values: \"$info\", \"$success\" or \"$brand\"\n\n- $brand\n- $info\n- $success\n\n@default $info",
           "type": "string",
           "values": [
             {
@@ -2204,12 +2210,12 @@
             {
               "name": "$success"
             }
-          ]
+          ],
+          "default": "$info"
         },
         {
           "name": "size",
-          "default": "large",
-          "description": "Specifies the size of the progress indicator.\nThis prop accepts one of the following values: \"large\" or \"small\".\n\n- large\n- small",
+          "description": "Specifies the size of the progress indicator.\nThis prop accepts one of the following values: \"large\" or \"small\".\n\n- large\n- small\n\n@default large",
           "type": "string",
           "values": [
             {
@@ -2219,13 +2225,13 @@
             {
               "name": "small"
             }
-          ]
+          ],
+          "default": "large"
         }
       ]
     },
     {
       "name": "rarui-skeleton",
-      "description": "## Rarui Divider\n---\nA Divider is a thin line used to separate or group content in lists and layouts.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/exhibition/divider) for more details.",
       "attributes": [
         {
           "name": "data-testid",
@@ -2238,8 +2244,8 @@
           "values": []
         },
         {
-          "name": "width",
-          "description": "The **`width`** CSS property sets an element's width. By default, it sets the width of the content area, but if `box-sizing` is set to `border-box`, it sets the width of the border area. It is also possible to pass a specific value.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"auto\",\n  \"md\": \"fit-content\",\n  \"lg\": \"intrinsic\",\n  \"xl\": \"max-content\"\n}\n```\n\n- auto\n- fit-content\n- intrinsic\n- max-content\n- min-content\n- min-intrinsic\n- stretch",
+          "name": "height",
+          "description": "The **`height`** CSS property specifies the height of an element. By default, the property defines the height of the content area. If `box-sizing` is set to `border-box`, however, it instead determines the height of the border area. It is also possible to pass a specific value.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"auto\",\n  \"md\": \"fit-content\",\n  \"lg\": \"max-content\",\n  \"xl\": \"min-content\"\n}\n```\n\n- auto\n- fit-content\n- max-content\n- min-content\n- stretch",
           "values": [
             {
               "name": "auto"
@@ -2247,32 +2253,26 @@
             {
               "name": "fit-content"
             },
-            {
-              "name": "intrinsic"
-            },
             {
               "name": "max-content"
             },
             {
               "name": "min-content"
             },
-            {
-              "name": "min-intrinsic"
-            },
             {
               "name": "stretch"
             }
           ]
         },
         {
-          "name": "height",
-          "description": "The **`height`** CSS property specifies the height of an element. By default, the property defines the height of the content area. If `box-sizing` is set to `border-box`, however, it instead determines the height of the border area. It is also possible to pass a specific value.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"auto\",\n  \"md\": \"fit-content\",\n  \"lg\": \"max-content\",\n  \"xl\": \"min-content\"\n}\n```\n\n- auto\n- fit-content\n- max-content\n- min-content\n- stretch",
+          "name": "max-height",
+          "description": "The **`max-height`** CSS property sets the maximum height of an element. It prevents the used value of the `height` property from becoming larger than the value specified for `max-height`. It is also possible to pass a specific value.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"fit-content\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"fit-content\",\n  \"md\": \"intrinsic\",\n  \"lg\": \"max-content\",\n  \"xl\": \"min-content\"\n}\n```\n\n- fit-content\n- intrinsic\n- max-content\n- min-content\n- none\n- stretch",
           "values": [
             {
-              "name": "auto"
+              "name": "fit-content"
             },
             {
-              "name": "fit-content"
+              "name": "intrinsic"
             },
             {
               "name": "max-content"
@@ -2280,6 +2280,9 @@
             {
               "name": "min-content"
             },
+            {
+              "name": "none"
+            },
             {
               "name": "stretch"
             }
@@ -2310,9 +2313,12 @@
           ]
         },
         {
-          "name": "max-height",
-          "description": "The **`max-height`** CSS property sets the maximum height of an element. It prevents the used value of the `height` property from becoming larger than the value specified for `max-height`. It is also possible to pass a specific value.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"fit-content\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"fit-content\",\n  \"md\": \"intrinsic\",\n  \"lg\": \"max-content\",\n  \"xl\": \"min-content\"\n}\n```\n\n- fit-content\n- intrinsic\n- max-content\n- min-content\n- none\n- stretch",
+          "name": "min-height",
+          "description": "The **`min-height`** CSS property sets the minimum height of an element. It prevents the used value of the `height` property from becoming smaller than the value specified for `min-height`. It is also possible to pass a specific value.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"auto\",\n  \"md\": \"fit-content\",\n  \"lg\": \"intrinsic\",\n  \"xl\": \"max-content\"\n}\n```\n\n- auto\n- fit-content\n- intrinsic\n- max-content\n- min-content\n- stretch",
           "values": [
+            {
+              "name": "auto"
+            },
             {
               "name": "fit-content"
             },
@@ -2325,9 +2331,6 @@
             {
               "name": "min-content"
             },
-            {
-              "name": "none"
-            },
             {
               "name": "stretch"
             }
@@ -2361,8 +2364,8 @@
           ]
         },
         {
-          "name": "min-height",
-          "description": "The **`min-height`** CSS property sets the minimum height of an element. It prevents the used value of the `height` property from becoming smaller than the value specified for `min-height`. It is also possible to pass a specific value.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"auto\",\n  \"md\": \"fit-content\",\n  \"lg\": \"intrinsic\",\n  \"xl\": \"max-content\"\n}\n```\n\n- auto\n- fit-content\n- intrinsic\n- max-content\n- min-content\n- stretch",
+          "name": "width",
+          "description": "The **`width`** CSS property sets an element's width. By default, it sets the width of the content area, but if `box-sizing` is set to `border-box`, it sets the width of the border area. It is also possible to pass a specific value.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"auto\",\n  \"md\": \"fit-content\",\n  \"lg\": \"intrinsic\",\n  \"xl\": \"max-content\"\n}\n```\n\n- auto\n- fit-content\n- intrinsic\n- max-content\n- min-content\n- min-intrinsic\n- stretch",
           "values": [
             {
               "name": "auto"
@@ -2379,6 +2382,9 @@
             {
               "name": "min-content"
             },
+            {
+              "name": "min-intrinsic"
+            },
             {
               "name": "stretch"
             }
@@ -2388,24 +2394,22 @@
     },
     {
       "name": "rarui-status",
-      "description": "## Rarui Status\n---\nVisual indicator that shows the current status or situation of an item or process.\nUseful for providing fast and understandable feedback to users.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/exhibition/status) for more details.",
       "attributes": [
         {
           "name": "dot",
-          "default": true,
-          "description": "Specifies whether to display a dot indicator alongside the status text. When true, a dot is shown to visually represent the status.",
-          "type": "boolean"
+          "description": "Specifies whether to display a dot indicator alongside the status text. When true, a dot is shown to visually represent the status.\n\n@default true",
+          "type": "boolean",
+          "default": true
         },
         {
           "name": "full",
-          "default": false,
           "description": "Specifies whether the status should take up the full width of its container.\nThis variant is useful when you want to make a status span the entire width of its parent container.",
-          "type": "boolean"
+          "type": "boolean",
+          "default": false
         },
         {
           "name": "appearance",
-          "default": "success",
-          "description": "Determines the visual style of the status, influencing its color scheme.\n\n- danger\n- info\n- inverted\n- neutral\n- success\n- warning",
+          "description": "Determines the visual style of the status, influencing its color scheme.\n\n- danger\n- info\n- inverted\n- neutral\n- success\n- warning\n\n@default success",
           "type": "string",
           "values": [
             {
@@ -2427,12 +2431,12 @@
             {
               "name": "warning"
             }
-          ]
+          ],
+          "default": "success"
         },
         {
           "name": "size",
-          "default": "normal",
-          "description": "Specifies the size of the badge, controlling its dimensions.\n\n- normal\n- small",
+          "description": "Specifies the size of the badge, controlling its dimensions.\n\n- normal\n- small\n\n@default normal",
           "type": "string",
           "values": [
             {
@@ -2442,12 +2446,12 @@
             {
               "name": "small"
             }
-          ]
+          ],
+          "default": "normal"
         },
         {
           "name": "variant",
-          "default": "solid",
-          "description": "Specifies the variant of the status\n\n- solid\n- subdued\n- text",
+          "description": "Specifies the variant of the status\n\n- solid\n- subdued\n- text\n\n@default solid",
           "type": "string",
           "values": [
             {
@@ -2460,7 +2464,8 @@
             {
               "name": "text"
             }
-          ]
+          ],
+          "default": "solid"
         }
       ]
     },
@@ -2470,9 +2475,9 @@
       "attributes": [
         {
           "name": "disabled",
-          "default": false,
           "description": "Disables the button, disallowing user interaction.",
-          "type": "boolean"
+          "type": "boolean",
+          "default": false
         },
         {
           "name": "full",
@@ -2481,8 +2486,7 @@
         },
         {
           "name": "appearance",
-          "default": "brand",
-          "description": "Defines the appearance variants for the button component.\nEach appearance variant corresponds to a specific background color, border color, and text color.\n\n- brand\n- danger\n- inverted\n- neutral\n- success\n- warning",
+          "description": "Defines the appearance variants for the button component.\nEach appearance variant corresponds to a specific background color, border color, and text color.\n\n- brand\n- danger\n- inverted\n- neutral\n- success\n- warning\n\n@default brand",
           "type": "string",
           "values": [
             {
@@ -2504,12 +2508,12 @@
             {
               "name": "warning"
             }
-          ]
+          ],
+          "default": "brand"
         },
         {
           "name": "size",
-          "default": "large",
-          "description": "Defines the size of the button component.\n\n- large\n- medium\n- small",
+          "description": "Defines the size of the button component.\n\n- large\n- medium\n- small\n\n@default large",
           "type": "string",
           "values": [
             {
@@ -2522,12 +2526,12 @@
             {
               "name": "small"
             }
-          ]
+          ],
+          "default": "large"
         },
         {
           "name": "variant",
-          "default": "solid",
-          "description": "Defines the visual variant of the badge, affecting its background style, border and text.\n\n- outlined\n- solid\n- text\n- tonal",
+          "description": "Defines the visual variant of the badge, affecting its background style, border and text.\n\n- outlined\n- solid\n- text\n- tonal\n\n@default solid",
           "type": "string",
           "values": [
             {
@@ -2543,12 +2547,12 @@
             {
               "name": "tonal"
             }
-          ]
+          ],
+          "default": "solid"
         },
         {
           "name": "type",
-          "default": "button",
-          "description": "Defines the native button type.\nCan be 'button', 'submit', or 'reset'.\n\n- button\n- reset\n- submit",
+          "description": "Defines the native button type.\nCan be 'button', 'submit', or 'reset'.\n\n- button\n- reset\n- submit\n\n@default button",
           "type": "string",
           "values": [
             {
@@ -2561,13 +2565,14 @@
             {
               "name": "submit"
             }
-          ]
+          ],
+          "default": "button"
         }
       ]
     },
     {
       "name": "rarui-checkbox",
-      "description": "## Rarui Checkbox\n---\nThe Checkbox allows users to select one or more items from a set and can be used to enable or disable an option.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/input/checkbox) for more details.",
+      "description": "## Rarui Checkbox\n---\nThe Checkbox allows users to select one or more items from a set and can be used to enable or disable an option.\n\nFeatures hybrid behavior:\n- **Controlled mode**: When `checked` prop is provided, works like React controlled component\n- **Native mode**: When `checked` prop is not provided, works like native HTML checkbox\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/input/checkbox) for more details.",
       "attributes": [
         {
           "name": "label",
@@ -2576,9 +2581,21 @@
         },
         {
           "name": "id",
-          "description": "The id of the checkbox.",
+          "description": "The id of the checkbox.\n\n(Required)",
           "type": "string"
         },
+        {
+          "name": "checked",
+          "description": "Controls the checked state of the checkbox.\n\n**Hybrid Behavior:**\n- When provided: Checkbox works in controlled mode - external prop controls the state\n- When not provided: Checkbox works in native mode - maintains its own internal state\n\n@default undefined (native mode)",
+          "type": "boolean",
+          "default": "undefined (native mode)"
+        },
+        {
+          "name": "readonly",
+          "description": "Makes the checkbox read-only, preventing user interaction.\nWhen true, the checkbox displays its current state but cannot be changed by clicking.",
+          "type": "boolean",
+          "default": false
+        },
         {
           "name": "error",
           "description": "Specifies whether the checkbox is in error state",
@@ -2610,9 +2627,9 @@
       "attributes": [
         {
           "name": "closeable",
-          "default": false,
           "description": "Displays a delete icon and adds user interaction.",
-          "type": "boolean"
+          "type": "boolean",
+          "default": false
         },
         {
           "name": "padding",
@@ -2652,20 +2669,19 @@
         },
         {
           "name": "pill",
-          "default": false,
           "description": "Specifies whether the chip will be displayed in the pill shape",
-          "type": "boolean"
+          "type": "boolean",
+          "default": false
         },
         {
           "name": "selected",
-          "default": false,
           "description": "Specifies whether the chip is selected",
-          "type": "boolean"
+          "type": "boolean",
+          "default": false
         },
         {
           "name": "size",
-          "default": "medium",
-          "description": "Specifies the size of the chip\n\n- medium\n- small",
+          "description": "Specifies the size of the chip\n\n- medium\n- small\n\n@default medium",
           "type": "string",
           "values": [
             {
@@ -2675,38 +2691,103 @@
             {
               "name": "small"
             }
-          ]
+          ],
+          "default": "medium"
         },
         {
           "name": "text-overflow",
-          "default": false,
           "description": "Specifies whether to handle text overflow within the chip.\nWhen true, overflowing text is typically truncated with an ellipsis.",
-          "type": "boolean"
+          "type": "boolean",
+          "default": false
         },
         {
           "name": "disabled",
-          "default": false,
           "description": "Disables the chip, disallowing user interaction.",
-          "type": "boolean"
+          "type": "boolean",
+          "default": false
         }
       ]
     },
     {
       "name": "rarui-dropdown",
-      "description": "## Rarui Dropdown\n---\nAn suspended menu displays a list of options on a temporary surface.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/input/dropdown) for more details.",
+      "description": "## Rarui Dropdown\n---\nAn suspended menu displays a list of options on a temporary surface.\n\nFeatures hybrid behavior:\n- **Controlled mode**: When `visible` prop is provided, works like React controlled component\n- **Native mode**: When `visible` prop is not provided, manages its own internal state\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/input/dropdown) for more details.",
       "attributes": [
         {
-          "name": "padding",
-          "default": "base",
-          "description": "Specifies the padding inside the dropdown menu. This prop accepts one of the following values: \"base\" or \"none\".\n\n- base\n- none",
-          "type": "string",
+          "name": "match-reference-width",
+          "description": "A common feature of select dropdowns is that the dropdown matches the width of the reference regardless of its contents.",
+          "type": "boolean",
+          "default": false
+        },
+        {
+          "name": "enabled-dismiss",
+          "description": "Adds listeners that dismiss (close) the floating element.\n\n@default true",
+          "type": "boolean",
+          "default": true
+        },
+        {
+          "name": "enabled-click",
+          "description": "Adds click event listeners that change the open state.\n\n@default true",
+          "type": "boolean",
+          "default": true
+        },
+        {
+          "name": "enabled-flip",
+          "description": "Determines whether the dropdown should enable flipping the options' dropdown when there is not enough space to display it in its default direction.\nThis can help ensure the dropdown is always visible on the screen.\n\n@default true",
+          "type": "boolean",
+          "default": true
+        },
+        {
+          "name": "offset",
+          "description": "Offest displaces the floating element from its core placement along the specified axes.\n\n@default 10",
+          "type": "number",
+          "default": 10
+        },
+        {
+          "name": "portal-id",
+          "description": "Specifies the ID of the portal element where the dropdown should be rendered.\nThis can be useful for rendering the dropdown in a different part of the DOM, such as a modal or overlay.",
+          "type": "string"
+        },
+        {
+          "name": "visible",
+          "description": "Controls the visibility state of the dropdown.\n\n**Hybrid Behavior:**\n- When provided: Dropdown works in controlled mode - external prop controls the state\n- When not provided: Dropdown works in native mode - manages its own internal state\n\n@default undefined (native mode)",
+          "type": "boolean",
+          "default": "undefined (native mode)"
+        },
+        {
+          "name": "on-visibility",
+          "description": "Function to control dropdown opening and closing.",
+          "type": "(visible: boolean) => void;"
+        },
+        {
+          "name": "z-index",
+          "description": "The zIndex property specifies the stack order of the box.\n\nThis property supports responsive values. You can pass a single value like `\"$100\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$100\",\n  \"md\": \"$200\",\n  \"lg\": \"$300\",\n  \"xl\": \"$400\"\n}\n```\n\n- $100\n- $200\n- $300\n- $400\n- $500\n- $600\n- $700\n- $800\n- $900",
           "values": [
             {
-              "name": "base",
-              "description": "(default)"
+              "name": "$100"
             },
             {
-              "name": "none"
+              "name": "$200"
+            },
+            {
+              "name": "$300"
+            },
+            {
+              "name": "$400"
+            },
+            {
+              "name": "$500"
+            },
+            {
+              "name": "$600"
+            },
+            {
+              "name": "$700"
+            },
+            {
+              "name": "$800"
+            },
+            {
+              "name": "$900"
             }
           ]
         },
@@ -2762,77 +2843,23 @@
           ]
         },
         {
-          "name": "match-reference-width",
-          "default": false,
-          "description": "A common feature of select dropdowns is that the dropdown matches the width of the reference regardless of its contents.",
-          "type": "boolean"
-        },
-        {
-          "name": "enabled-dismiss",
-          "default": true,
-          "description": "Adds listeners that dismiss (close) the floating element.",
-          "type": "boolean"
-        },
-        {
-          "name": "enabled-click",
-          "default": true,
-          "description": "Adds click event listeners that change the open state.",
-          "type": "boolean"
-        },
-        {
-          "name": "enabled-flip",
-          "default": true,
-          "description": "Determines whether the dropdown should enable flipping the options' dropdown when there is not enough space to display it in its default direction.\nThis can help ensure the dropdown is always visible on the screen.",
-          "type": "boolean"
-        },
-        {
-          "name": "offset",
-          "default": 10,
-          "description": "Offest displaces the floating element from its core placement along the specified axes.",
-          "type": "number"
-        },
-        {
-          "name": "visible",
-          "description": "If true, the component is shown.",
-          "type": "boolean"
-        },
-        {
-          "name": "z-index",
-          "description": "The zIndex property specifies the stack order of the box.\n\nThis property supports responsive values. You can pass a single value like `\"$100\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$100\",\n  \"md\": \"$200\",\n  \"lg\": \"$300\",\n  \"xl\": \"$400\"\n}\n```\n\n- $100\n- $200\n- $300\n- $400\n- $500\n- $600\n- $700\n- $800\n- $900",
+          "name": "padding",
+          "description": "Specifies the padding inside the dropdown menu. This prop accepts one of the following values: \"base\" or \"none\".\n\n- base\n- none\n\n@default base",
+          "type": "string",
           "values": [
             {
-              "name": "$100"
-            },
-            {
-              "name": "$200"
-            },
-            {
-              "name": "$300"
-            },
-            {
-              "name": "$400"
-            },
-            {
-              "name": "$500"
-            },
-            {
-              "name": "$600"
-            },
-            {
-              "name": "$700"
-            },
-            {
-              "name": "$800"
+              "name": "base",
+              "description": "(default)"
             },
             {
-              "name": "$900"
+              "name": "none"
             }
-          ]
+          ],
+          "default": "base"
         },
         {
           "name": "position",
-          "default": "bottom-start",
-          "description": "Position of the dropdown.\n\n- bottom\n- bottom-end\n- bottom-start\n- left\n- left-end\n- left-start\n- right\n- right-end\n- right-start\n- top\n- top-end\n- top-start",
+          "description": "Position of the dropdown.\n\n- bottom\n- bottom-end\n- bottom-start\n- left\n- left-end\n- left-start\n- right\n- right-end\n- right-start\n- top\n- top-end\n- top-start\n\n@default bottom-start",
           "type": "string",
           "values": [
             {
@@ -2872,12 +2899,12 @@
             {
               "name": "top-start"
             }
-          ]
+          ],
+          "default": "bottom-start"
         },
         {
           "name": "strategy",
-          "default": "fixed",
-          "description": "CSS positioning strategy used for the tooltip.\n\n- `\"fixed\"` (default) positions the tooltip relative to the viewport,\n  so it stays in the same place even when the page is scrolled.\n- `\"absolute\"` positions the tooltip relative to the nearest positioned ancestor,\n  which can be useful when you want the tooltip to move with page content.\n\nUse `\"fixed\"` for tooltips that should remain visible on scroll,\nand `\"absolute\"` when tooltips need to be positioned within scrollable containers.\n\n- absolute\n- fixed",
+          "description": "CSS positioning strategy used for the tooltip.\n\n- `\"fixed\"` (default) positions the tooltip relative to the viewport,\n  so it stays in the same place even when the page is scrolled.\n- `\"absolute\"` positions the tooltip relative to the nearest positioned ancestor,\n  which can be useful when you want the tooltip to move with page content.\n\nUse `\"fixed\"` for tooltips that should remain visible on scroll,\nand `\"absolute\"` when tooltips need to be positioned within scrollable containers.\n\n- absolute\n- fixed\n\n@default fixed",
           "type": "string",
           "values": [
             {
@@ -2887,41 +2914,39 @@
               "name": "fixed",
               "description": "(default)"
             }
-          ]
+          ],
+          "default": "fixed"
         }
       ]
     },
     {
       "name": "rarui-dropdown-item",
-      "description": "## Rarui Dropdown Item\n---\nAn suspended menu displays a list of options on a temporary surface.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/surface/dropdown) for more details.",
       "attributes": [
-        {
-          "name": "selected",
-          "default": false,
-          "description": "Indicates if the item is selected.\nThis affects the visual style, such as highlight or marking.",
-          "type": "boolean"
-        },
         {
           "name": "name",
           "description": "The name of the dropdown item. This is typically the text that is displayed for the item.",
           "type": "string"
+        },
+        {
+          "name": "selected",
+          "description": "Indicates if the item is selected.\nThis affects the visual style, such as highlight or marking.",
+          "type": "boolean",
+          "default": false
         }
       ]
     },
     {
       "name": "rarui-icon-button",
-      "description": "## Rarui Icon Button\n---\nButton allows the user to perform actions, such as sending a file, advancing a form, sharing a document, or making a comment.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/input/button) for more details.",
       "attributes": [
         {
           "name": "disabled",
-          "default": false,
           "description": "Disables the button, disallowing user interaction.",
-          "type": "boolean"
+          "type": "boolean",
+          "default": false
         },
         {
           "name": "appearance",
-          "default": "brand",
-          "description": "Determines the visual style of the icon button, influencing its color scheme and appearance.\n\n- brand\n- danger\n- inverted\n- neutral\n- success\n- warning",
+          "description": "Determines the visual style of the icon button, influencing its color scheme and appearance.\n\n- brand\n- danger\n- inverted\n- neutral\n- success\n- warning\n\n@default brand",
           "type": "string",
           "values": [
             {
@@ -2943,12 +2968,12 @@
             {
               "name": "warning"
             }
-          ]
+          ],
+          "default": "brand"
         },
         {
           "name": "size",
-          "default": "medium",
-          "description": "Defines the size of the icon button component.\n\n- large\n- medium\n- small",
+          "description": "Defines the size of the icon button component.\n\n- large\n- medium\n- small\n\n@default medium",
           "type": "string",
           "values": [
             {
@@ -2961,7 +2986,8 @@
             {
               "name": "small"
             }
-          ]
+          ],
+          "default": "medium"
         },
         {
           "name": "variant",
@@ -2984,9 +3010,9 @@
         },
         {
           "name": "rounded",
-          "default": false,
           "description": "Defines if the button should have rounded edges.\n\n- `true`: The button will be rendered with completely rounded edges, useful for circular -shaped icons.\n- `false` (default): The button will have standard edges or defined by the component style.",
-          "type": "boolean"
+          "type": "boolean",
+          "default": false
         }
       ]
     },
@@ -3009,14 +3035,13 @@
         },
         {
           "name": "border",
-          "default": true,
-          "description": "Determines if the input have borders or not.",
-          "type": "boolean"
+          "description": "Determines if the input have borders or not.\n\n@default true",
+          "type": "boolean",
+          "default": true
         },
         {
           "name": "size",
-          "default": "medium",
-          "description": "Specifies the size of the input, controlling its dimensions.\n\n- large\n- medium\n- small",
+          "description": "Specifies the size of the input, controlling its dimensions.\n\n- large\n- medium\n- small\n\n@default medium",
           "type": "string",
           "values": [
             {
@@ -3029,13 +3054,14 @@
             {
               "name": "small"
             }
-          ]
+          ],
+          "default": "medium"
         },
         {
           "name": "divider",
-          "default": true,
-          "description": "Places a divider between the input and the leading components",
-          "type": "boolean"
+          "description": "Places a divider between the input and the leading components\n\n@default true",
+          "type": "boolean",
+          "default": true
         },
         {
           "name": "value",
@@ -3049,9 +3075,9 @@
         },
         {
           "name": "disabled",
-          "default": false,
           "description": "Whether the input is disabled.",
-          "type": "boolean"
+          "type": "boolean",
+          "default": false
         }
       ]
     },
@@ -3069,53 +3095,53 @@
           "type": "string"
         },
         {
-          "name": "appearance",
-          "description": "Determines the visual style of the input, affecting its border\n\n- error\n- success",
+          "name": "disabled",
+          "description": "Whether the input is disabled.",
+          "type": "boolean",
+          "default": false
+        },
+        {
+          "name": "size",
+          "description": "Specifies the size of the input, controlling its dimensions.\n\n- large\n- medium\n- small\n\n@default medium",
           "type": "string",
           "values": [
             {
-              "name": "error"
+              "name": "large"
             },
             {
-              "name": "success"
+              "name": "medium",
+              "description": "(default)"
+            },
+            {
+              "name": "small"
             }
-          ]
+          ],
+          "default": "medium"
         },
         {
           "name": "border",
-          "default": true,
-          "description": "Determines if the input have borders or not.",
-          "type": "boolean"
+          "description": "Determines if the input have borders or not.\n\n@default true",
+          "type": "boolean",
+          "default": true
         },
         {
-          "name": "size",
-          "default": "medium",
-          "description": "Specifies the size of the input, controlling its dimensions.\n\n- large\n- medium\n- small",
+          "name": "appearance",
+          "description": "Determines the visual style of the input, affecting its border\n\n- error\n- success",
           "type": "string",
           "values": [
             {
-              "name": "large"
-            },
-            {
-              "name": "medium",
-              "description": "(default)"
+              "name": "error"
             },
             {
-              "name": "small"
+              "name": "success"
             }
           ]
         },
         {
           "name": "divider",
-          "default": true,
-          "description": "Places a divider between the input and the leading components",
-          "type": "boolean"
-        },
-        {
-          "name": "disabled",
-          "default": false,
-          "description": "Whether the input is disabled.",
-          "type": "boolean"
+          "description": "Places a divider between the input and the leading components\n\n@default true",
+          "type": "boolean",
+          "default": true
         }
       ]
     },
@@ -3133,53 +3159,53 @@
           "type": "string"
         },
         {
-          "name": "appearance",
-          "description": "Determines the visual style of the input, affecting its border\n\n- error\n- success",
+          "name": "disabled",
+          "description": "Whether the input is disabled.",
+          "type": "boolean",
+          "default": false
+        },
+        {
+          "name": "size",
+          "description": "Specifies the size of the input, controlling its dimensions.\n\n- large\n- medium\n- small\n\n@default medium",
           "type": "string",
           "values": [
             {
-              "name": "error"
+              "name": "large"
             },
             {
-              "name": "success"
+              "name": "medium",
+              "description": "(default)"
+            },
+            {
+              "name": "small"
             }
-          ]
+          ],
+          "default": "medium"
         },
         {
           "name": "border",
-          "default": true,
-          "description": "Determines if the input have borders or not.",
-          "type": "boolean"
+          "description": "Determines if the input have borders or not.\n\n@default true",
+          "type": "boolean",
+          "default": true
         },
         {
-          "name": "size",
-          "default": "medium",
-          "description": "Specifies the size of the input, controlling its dimensions.\n\n- large\n- medium\n- small",
+          "name": "appearance",
+          "description": "Determines the visual style of the input, affecting its border\n\n- error\n- success",
           "type": "string",
           "values": [
             {
-              "name": "large"
-            },
-            {
-              "name": "medium",
-              "description": "(default)"
+              "name": "error"
             },
             {
-              "name": "small"
+              "name": "success"
             }
           ]
         },
         {
           "name": "divider",
-          "default": true,
-          "description": "Places a divider between the input and the leading components",
-          "type": "boolean"
-        },
-        {
-          "name": "disabled",
-          "default": false,
-          "description": "Whether the input is disabled.",
-          "type": "boolean"
+          "description": "Places a divider between the input and the leading components\n\n@default true",
+          "type": "boolean",
+          "default": true
         }
       ]
     },
@@ -3222,71 +3248,48 @@
         },
         {
           "name": "disabled",
-          "default": false,
           "description": "Disables the radio button, disallowing user interaction.",
-          "type": "boolean"
+          "type": "boolean",
+          "default": false
         }
       ]
     },
     {
-      "name": "rarui-textarea",
-      "description": "## Rarui Radio Button\n---\nExpanded text area for long text entries. Allows you to enter large blocks of text, such as comments or detailed descriptions.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/input/textarea) for more details.",
+      "name": "rarui-select",
+      "description": "## Rarui Select\n---\nSelect component for choosing options from a dropdown menu with support for single and multiple selection.\n\nFeatures:\n- **Single Selection**: Choose one option from the list\n- **Multiple Selection**: Choose multiple options with checkboxes\n- **Custom Content**: Support for slot-based custom content and filtering\n- **Accessibility**: Full keyboard navigation with ESC key support\n- **Controlled Behavior**: Uses internal web components (Dropdown, Checkbox, Text, Box, Chip, Icon)\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/input/select) for more details.",
       "attributes": [
         {
-          "name": "lines",
-          "default": 2,
-          "description": "Number of lines to be rendered for the user to input text",
-          "type": "number"
-        },
-        {
-          "name": "appearance",
-          "description": "Determines the visual style of the textarea, affecting its border\n\n- error\n- success",
-          "type": "string",
-          "values": [
-            {
-              "name": "error"
-            },
-            {
-              "name": "success"
-            }
-          ]
+          "name": "open",
+          "description": "If true, the Select component is shown.",
+          "type": "boolean"
         },
         {
           "name": "disabled",
-          "default": false,
-          "description": "Disables the Textarea, disallowing user interaction.",
-          "type": "boolean"
-        }
-      ]
-    },
-    {
-      "name": "rarui-toggle",
-      "description": "## Rarui Toggle\n---\nToggle switches activate or deactivate the state of a single item.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/input/toggle) for more details.",
-      "attributes": [
-        {
-          "name": "name",
-          "description": "The name of the input element.",
-          "type": "string"
+          "description": "Disables the select component, disallowing user interaction.",
+          "type": "boolean",
+          "default": false
         },
         {
-          "name": "selected",
-          "description": "Sets toggle state to activated or deactivated.",
-          "type": "boolean"
+          "name": "options",
+          "description": "Options for the Select component. This should be an array of SelectOptionProps objects.\n\n(Required)",
+          "type": "array"
         },
         {
-          "name": "label",
-          "description": "Text to be rendered inside the component",
-          "type": "string"
+          "name": "multiple",
+          "description": "Enables multiple selection mode.",
+          "type": "boolean",
+          "default": false
         },
         {
           "name": "size",
-          "default": "large",
-          "description": "Specifies the size of the toggle, controlling its dimensions.\n\n- large\n- small",
+          "description": "Specifies the size of the badge, controlling its dimensions.\n\n- large\n- medium\n- small",
           "type": "string",
           "values": [
             {
-              "name": "large",
-              "description": "(default)"
+              "name": "large"
+            },
+            {
+              "name": "medium"
             },
             {
               "name": "small"
@@ -3294,20 +3297,238 @@
           ]
         },
         {
-          "name": "error",
-          "default": false,
-          "description": "Specifies whether the radiobutton is in error state",
-          "type": "boolean"
-        },
-        {
-          "name": "disabled",
-          "default": false,
-          "description": "Defines if Toggle is disabled.\nWhen `true`, the component cannot be interacted.",
-          "type": "boolean"
-        },
-        {
-          "name": "id",
-          "description": "Single ID associated with Toggle Input.If not provided,\nThe name will be used as Fallback to `id`.",
+          "name": "appearance",
+          "description": "Determines the visual style of the input, affecting its border\n\n- error\n- success",
+          "type": "string",
+          "values": [
+            {
+              "name": "error"
+            },
+            {
+              "name": "success"
+            }
+          ]
+        },
+        {
+          "name": "max-height",
+          "description": "The **`max-height`** CSS property sets the maximum height of an element. It prevents the used value of the `height` property from becoming larger than the value specified for `max-height`. It is also possible to pass a specific value.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"fit-content\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"fit-content\",\n  \"md\": \"intrinsic\",\n  \"lg\": \"max-content\",\n  \"xl\": \"min-content\"\n}\n```\n\n- fit-content\n- intrinsic\n- max-content\n- min-content\n- none\n- stretch",
+          "values": [
+            {
+              "name": "fit-content"
+            },
+            {
+              "name": "intrinsic"
+            },
+            {
+              "name": "max-content"
+            },
+            {
+              "name": "min-content"
+            },
+            {
+              "name": "none"
+            },
+            {
+              "name": "stretch"
+            }
+          ]
+        },
+        {
+          "name": "z-index",
+          "description": "The zIndex property specifies the stack order of the box.\n\nThis property supports responsive values. You can pass a single value like `\"$100\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$100\",\n  \"md\": \"$200\",\n  \"lg\": \"$300\",\n  \"xl\": \"$400\"\n}\n```\n\n- $100\n- $200\n- $300\n- $400\n- $500\n- $600\n- $700\n- $800\n- $900",
+          "values": [
+            {
+              "name": "$100"
+            },
+            {
+              "name": "$200"
+            },
+            {
+              "name": "$300"
+            },
+            {
+              "name": "$400"
+            },
+            {
+              "name": "$500"
+            },
+            {
+              "name": "$600"
+            },
+            {
+              "name": "$700"
+            },
+            {
+              "name": "$800"
+            },
+            {
+              "name": "$900"
+            }
+          ]
+        },
+        {
+          "name": "value",
+          "description": "Default selected values for the Select component.\nThis should be an array of SelectOptionProps objects representing the selected options.",
+          "values": []
+        },
+        {
+          "name": "default-value",
+          "description": "Specifies the default selected value(s) for the select box.\nThis can be a selectOption for single selection or an array of selectOption for multiple selections.",
+          "values": []
+        },
+        {
+          "name": "placeholder",
+          "description": "Placeholder text displayed when no option is selected.",
+          "type": "string"
+        },
+        {
+          "name": "enabled-flip",
+          "description": "Determines whether the select box should enable flipping the options' dropdown when there is not enough space to display it in its default direction.\nThis can help ensure the dropdown is always visible on the screen.\n\n@default true",
+          "type": "boolean",
+          "default": true
+        },
+        {
+          "name": "position",
+          "description": "Position of the dropdown relative to the trigger.\n\n- bottom\n- bottom-end\n- bottom-start\n- left\n- left-end\n- left-start\n- right\n- right-end\n- right-start\n- top\n- top-end\n- top-start\n\n@default bottom-start",
+          "type": "string",
+          "values": [
+            {
+              "name": "bottom"
+            },
+            {
+              "name": "bottom-end"
+            },
+            {
+              "name": "bottom-start",
+              "description": "(default)"
+            },
+            {
+              "name": "left"
+            },
+            {
+              "name": "left-end"
+            },
+            {
+              "name": "left-start"
+            },
+            {
+              "name": "right"
+            },
+            {
+              "name": "right-end"
+            },
+            {
+              "name": "right-start"
+            },
+            {
+              "name": "top"
+            },
+            {
+              "name": "top-end"
+            },
+            {
+              "name": "top-start"
+            }
+          ],
+          "default": "bottom-start"
+        },
+        {
+          "name": "strategy",
+          "description": "CSS positioning strategy used for the dropdown.\n\n- `\"fixed\"` (default) positions the dropdown relative to the viewport,\n  so it stays in the same place even when the page is scrolled.\n- `\"absolute\"` positions the dropdown relative to the nearest positioned ancestor,\n  which can be useful when you want the dropdown to move with page content.\n\nUse `\"fixed\"` for dropdowns that should remain visible on scroll,\nand `\"absolute\"` when dropdowns need to be positioned within scrollable containers.\n\n- absolute\n- fixed\n\n@default fixed",
+          "type": "string",
+          "values": [
+            {
+              "name": "absolute"
+            },
+            {
+              "name": "fixed",
+              "description": "(default)"
+            }
+          ],
+          "default": "fixed"
+        }
+      ]
+    },
+    {
+      "name": "rarui-textarea",
+      "description": "## Rarui Radio Button\n---\nExpanded text area for long text entries. Allows you to enter large blocks of text, such as comments or detailed descriptions.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/input/textarea) for more details.",
+      "attributes": [
+        {
+          "name": "lines",
+          "description": "Number of lines to be rendered for the user to input text\n\n@default 2",
+          "type": "number",
+          "default": 2
+        },
+        {
+          "name": "appearance",
+          "description": "Determines the visual style of the textarea, affecting its border\n\n- error\n- success",
+          "type": "string",
+          "values": [
+            {
+              "name": "error"
+            },
+            {
+              "name": "success"
+            }
+          ]
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the Textarea, disallowing user interaction.",
+          "type": "boolean",
+          "default": false
+        }
+      ]
+    },
+    {
+      "name": "rarui-toggle",
+      "description": "## Rarui Toggle\n---\nToggle switches activate or deactivate the state of a single item.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/input/toggle) for more details.",
+      "attributes": [
+        {
+          "name": "name",
+          "description": "The name of the input element.\n\n(Required)",
+          "type": "string"
+        },
+        {
+          "name": "selected",
+          "description": "Sets toggle state to activated or deactivated.",
+          "type": "boolean"
+        },
+        {
+          "name": "label",
+          "description": "Text to be rendered inside the component",
+          "type": "string"
+        },
+        {
+          "name": "size",
+          "description": "Specifies the size of the toggle, controlling its dimensions.\n\n- large\n- small\n\n@default large",
+          "type": "string",
+          "values": [
+            {
+              "name": "large",
+              "description": "(default)"
+            },
+            {
+              "name": "small"
+            }
+          ],
+          "default": "large"
+        },
+        {
+          "name": "error",
+          "description": "Specifies whether the radiobutton is in error state",
+          "type": "boolean",
+          "default": false
+        },
+        {
+          "name": "disabled",
+          "description": "Defines if Toggle is disabled.\nWhen `true`, the component cannot be interacted.",
+          "type": "boolean",
+          "default": false
+        },
+        {
+          "name": "id",
+          "description": "Single ID associated with Toggle Input.If not provided,\nThe name will be used as Fallback to `id`.",
           "type": "string"
         }
       ]
@@ -5891,71 +6112,79 @@
           ]
         },
         {
-          "name": "width",
-          "description": "The **`width`** CSS property sets an element's width. By default, it sets the width of the content area, but if `box-sizing` is set to `border-box`, it sets the width of the border area. It is also possible to pass a specific value.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"auto\",\n  \"md\": \"fit-content\",\n  \"lg\": \"intrinsic\",\n  \"xl\": \"max-content\"\n}\n```\n\n- auto\n- fit-content\n- intrinsic\n- max-content\n- min-content\n- min-intrinsic\n- stretch",
+          "name": "left",
+          "description": "The **`left`** CSS property participates in specifying the horizontal position of a positioned element. It has no effect on non-positioned elements.\n\n\n**Initial value**: `auto`",
+          "values": []
+        },
+        {
+          "name": "right",
+          "description": "The **`right`** CSS property participates in specifying the horizontal position of a positioned element. It has no effect on non-positioned elements.\n\n\n**Initial value**: `auto`",
+          "values": []
+        },
+        {
+          "name": "bottom",
+          "description": "The **`bottom`** CSS property participates in setting the vertical position of a positioned element. It has no effect on non-positioned elements.\n\n\n**Initial value**: `auto`",
+          "values": []
+        },
+        {
+          "name": "top",
+          "description": "The **`top`** CSS property participates in specifying the vertical position of a positioned element. It has no effect on non-positioned elements.\n\n\n**Initial value**: `auto`",
+          "values": []
+        },
+        {
+          "name": "position",
+          "description": "The **`position`** CSS property sets how an element is positioned in a document. The `top`, `right`, `bottom`, and `left` properties determine the final location of positioned elements.\n\n\n**Initial value**: `static`\n\nThis property supports responsive values. You can pass a single value like `\"absolute\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"absolute\",\n  \"md\": \"fixed\",\n  \"lg\": \"relative\",\n  \"xl\": \"static\"\n}\n```\n\n- absolute\n- fixed\n- relative\n- static\n- sticky",
           "values": [
             {
-              "name": "auto"
-            },
-            {
-              "name": "fit-content"
-            },
-            {
-              "name": "intrinsic"
+              "name": "absolute"
             },
             {
-              "name": "max-content"
+              "name": "fixed"
             },
             {
-              "name": "min-content"
+              "name": "relative"
             },
             {
-              "name": "min-intrinsic"
+              "name": "static"
             },
             {
-              "name": "stretch"
+              "name": "sticky"
             }
           ]
         },
         {
-          "name": "height",
-          "description": "The **`height`** CSS property specifies the height of an element. By default, the property defines the height of the content area. If `box-sizing` is set to `border-box`, however, it instead determines the height of the border area. It is also possible to pass a specific value.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"auto\",\n  \"md\": \"fit-content\",\n  \"lg\": \"max-content\",\n  \"xl\": \"min-content\"\n}\n```\n\n- auto\n- fit-content\n- max-content\n- min-content\n- stretch",
+          "name": "align-content",
+          "description": "The CSS **`align-content`** property sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis.\n\n\n**Initial value**: `normal`\n\nThis property supports responsive values. You can pass a single value like `\"baseline\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"baseline\",\n  \"md\": \"center\",\n  \"lg\": \"end\",\n  \"xl\": \"flex-end\"\n}\n```\n\n- baseline\n- center\n- end\n- flex-end\n- flex-start\n- normal\n- space-around\n- space-between\n- space-evenly\n- start\n- stretch",
           "values": [
             {
-              "name": "auto"
+              "name": "baseline"
             },
             {
-              "name": "fit-content"
+              "name": "center"
             },
             {
-              "name": "max-content"
+              "name": "end"
             },
             {
-              "name": "min-content"
+              "name": "flex-end"
             },
             {
-              "name": "stretch"
-            }
-          ]
-        },
-        {
-          "name": "max-width",
-          "description": "The **`max-width`** CSS property sets the maximum width of an element. It prevents the used value of the `width` property from becoming larger than the value specified by `max-width`. It is also possible to pass a specific value.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"fit-content\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"fit-content\",\n  \"md\": \"intrinsic\",\n  \"lg\": \"max-content\",\n  \"xl\": \"min-content\"\n}\n```\n\n- fit-content\n- intrinsic\n- max-content\n- min-content\n- none\n- stretch",
-          "values": [
+              "name": "flex-start"
+            },
             {
-              "name": "fit-content"
+              "name": "normal"
             },
             {
-              "name": "intrinsic"
+              "name": "space-around"
             },
             {
-              "name": "max-content"
+              "name": "space-between"
             },
             {
-              "name": "min-content"
+              "name": "space-evenly"
             },
             {
-              "name": "none"
+              "name": "start"
             },
             {
               "name": "stretch"
@@ -5963,23 +6192,35 @@
           ]
         },
         {
-          "name": "max-height",
-          "description": "The **`max-height`** CSS property sets the maximum height of an element. It prevents the used value of the `height` property from becoming larger than the value specified for `max-height`. It is also possible to pass a specific value.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"fit-content\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"fit-content\",\n  \"md\": \"intrinsic\",\n  \"lg\": \"max-content\",\n  \"xl\": \"min-content\"\n}\n```\n\n- fit-content\n- intrinsic\n- max-content\n- min-content\n- none\n- stretch",
+          "name": "align-items",
+          "description": "The CSS **`align-items`** property sets the `align-self` value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.\n\n\n**Initial value**: `normal`\n\nThis property supports responsive values. You can pass a single value like `\"baseline\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"baseline\",\n  \"md\": \"center\",\n  \"lg\": \"end\",\n  \"xl\": \"flex-end\"\n}\n```\n\n- baseline\n- center\n- end\n- flex-end\n- flex-start\n- normal\n- self-end\n- self-start\n- start\n- stretch",
           "values": [
             {
-              "name": "fit-content"
+              "name": "baseline"
             },
             {
-              "name": "intrinsic"
+              "name": "center"
             },
             {
-              "name": "max-content"
+              "name": "end"
             },
             {
-              "name": "min-content"
+              "name": "flex-end"
             },
             {
-              "name": "none"
+              "name": "flex-start"
+            },
+            {
+              "name": "normal"
+            },
+            {
+              "name": "self-end"
+            },
+            {
+              "name": "self-start"
+            },
+            {
+              "name": "start"
             },
             {
               "name": "stretch"
@@ -5987,26 +6228,38 @@
           ]
         },
         {
-          "name": "min-width",
-          "description": "The **`min-width`** CSS property sets the minimum width of an element. It prevents the used value of the `width` property from becoming smaller than the value specified for `min-width`. It is also possible to pass a specific value.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"auto\",\n  \"md\": \"fit-content\",\n  \"lg\": \"intrinsic\",\n  \"xl\": \"max-content\"\n}\n```\n\n- auto\n- fit-content\n- intrinsic\n- max-content\n- min-content\n- min-intrinsic\n- stretch",
+          "name": "align-self",
+          "description": "The **`align-self`** CSS property overrides a grid or flex item's `align-items` value. In Grid, it aligns the item inside the grid area. In Flexbox, it aligns the item on the cross axis.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"auto\",\n  \"md\": \"baseline\",\n  \"lg\": \"center\",\n  \"xl\": \"end\"\n}\n```\n\n- auto\n- baseline\n- center\n- end\n- flex-end\n- flex-start\n- normal\n- self-end\n- self-start\n- start\n- stretch",
           "values": [
             {
               "name": "auto"
             },
             {
-              "name": "fit-content"
+              "name": "baseline"
             },
             {
-              "name": "intrinsic"
+              "name": "center"
             },
             {
-              "name": "max-content"
+              "name": "end"
             },
             {
-              "name": "min-content"
+              "name": "flex-end"
             },
             {
-              "name": "min-intrinsic"
+              "name": "flex-start"
+            },
+            {
+              "name": "normal"
+            },
+            {
+              "name": "self-end"
+            },
+            {
+              "name": "self-start"
+            },
+            {
+              "name": "start"
             },
             {
               "name": "stretch"
@@ -6014,125 +6267,56 @@
           ]
         },
         {
-          "name": "min-height",
-          "description": "The **`min-height`** CSS property sets the minimum height of an element. It prevents the used value of the `height` property from becoming smaller than the value specified for `min-height`. It is also possible to pass a specific value.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"auto\",\n  \"md\": \"fit-content\",\n  \"lg\": \"intrinsic\",\n  \"xl\": \"max-content\"\n}\n```\n\n- auto\n- fit-content\n- intrinsic\n- max-content\n- min-content\n- stretch",
+          "name": "background-blend-mode",
+          "description": "The **`background-blend-mode`** CSS property sets how an element's background images should blend with each other and with the element's background color.\n\n\n**Initial value**: `normal`\n\nThis property supports responsive values. You can pass a single value like `\"color\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"color\",\n  \"md\": \"color-burn\",\n  \"lg\": \"color-dodge\",\n  \"xl\": \"darken\"\n}\n```\n\n- color\n- color-burn\n- color-dodge\n- darken\n- difference\n- exclusion\n- hard-light\n- hue\n- lighten\n- luminosity\n- multiply\n- normal\n- overlay\n- saturation\n- screen\n- soft-light",
           "values": [
             {
-              "name": "auto"
+              "name": "color"
             },
             {
-              "name": "fit-content"
+              "name": "color-burn"
             },
             {
-              "name": "intrinsic"
+              "name": "color-dodge"
             },
             {
-              "name": "max-content"
+              "name": "darken"
             },
             {
-              "name": "min-content"
+              "name": "difference"
             },
             {
-              "name": "stretch"
-            }
-          ]
-        },
-        {
-          "name": "bottom",
-          "description": "The **`bottom`** CSS property participates in setting the vertical position of a positioned element. It has no effect on non-positioned elements.\n\n\n**Initial value**: `auto`",
-          "values": []
-        },
-        {
-          "name": "left",
-          "description": "The **`left`** CSS property participates in specifying the horizontal position of a positioned element. It has no effect on non-positioned elements.\n\n\n**Initial value**: `auto`",
-          "values": []
-        },
-        {
-          "name": "right",
-          "description": "The **`right`** CSS property participates in specifying the horizontal position of a positioned element. It has no effect on non-positioned elements.\n\n\n**Initial value**: `auto`",
-          "values": []
-        },
-        {
-          "name": "top",
-          "description": "The **`top`** CSS property participates in specifying the vertical position of a positioned element. It has no effect on non-positioned elements.\n\n\n**Initial value**: `auto`",
-          "values": []
-        },
-        {
-          "name": "grid-template-areas",
-          "description": "The **`grid-template-areas`** CSS property specifies named grid areas, establishing the cells in the grid and assigning them names.\n\n\n**Initial value**: `none`",
-          "values": []
-        },
-        {
-          "name": "grid-template-columns",
-          "description": "The **`grid-template-columns`** CSS property defines the line names and track sizing functions of the grid columns.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"auto\",\n  \"md\": \"max-content\",\n  \"lg\": \"min-content\",\n  \"xl\": \"none\"\n}\n```\n\n- auto\n- max-content\n- min-content\n- none\n- subgrid",
-          "values": [
-            {
-              "name": "auto"
+              "name": "exclusion"
             },
             {
-              "name": "max-content"
+              "name": "hard-light"
             },
             {
-              "name": "min-content"
+              "name": "hue"
             },
             {
-              "name": "none"
+              "name": "lighten"
             },
             {
-              "name": "subgrid"
-            }
-          ]
-        },
-        {
-          "name": "grid-template-rows",
-          "description": "The **`grid-template-rows`** CSS property defines the line names and track sizing functions of the grid rows.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"auto\",\n  \"md\": \"max-content\",\n  \"lg\": \"min-content\",\n  \"xl\": \"none\"\n}\n```\n\n- auto\n- max-content\n- min-content\n- none\n- subgrid",
-          "values": [
-            {
-              "name": "auto"
+              "name": "luminosity"
             },
             {
-              "name": "max-content"
+              "name": "multiply"
             },
             {
-              "name": "min-content"
+              "name": "normal"
             },
             {
-              "name": "none"
+              "name": "overlay"
             },
             {
-              "name": "subgrid"
-            }
-          ]
-        },
-        {
-          "name": "flex-shrink",
-          "description": "The **`flex-shrink`** CSS property sets the flex shrink factor of a flex item. If the size of all flex items is larger than the flex container, items shrink to fit according to `flex-shrink`.\n\n\n**Initial value**: `1`",
-          "values": []
-        },
-        {
-          "name": "flex-grow",
-          "description": "The **`flex-grow`** CSS property sets the flex grow factor of a flex item main size.\n\n\n**Initial value**: `0`",
-          "values": []
-        },
-        {
-          "name": "order",
-          "description": "The **`order`** CSS property sets the order to lay out an item in a flex or grid container. Items in a container are sorted by ascending `order` value and then by their source code order.\n\n\n**Initial value**: `0`",
-          "values": []
-        },
-        {
-          "name": "transition-delay",
-          "description": "The **`transition-delay`** CSS property specifies the duration to wait before starting a property's transition effect when its value changes.\n\n\n**Initial value**: `0s`",
-          "type": "string"
-        },
-        {
-          "name": "transition-property",
-          "description": "The **`transition-property`** CSS property sets the CSS properties to which a transition effect should be applied.\n\n\n**Initial value**: all\n\nThis property supports responsive values. You can pass a single value like `\"all\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"all\",\n  \"md\": \"none\",\n  \"lg\": \"all\",\n  \"xl\": \"none\"\n}\n```\n\n- all\n- none",
-          "values": [
+              "name": "saturation"
+            },
             {
-              "name": "all"
+              "name": "screen"
             },
             {
-              "name": "none"
+              "name": "soft-light"
             }
           ]
         },
@@ -6183,60 +6367,6 @@
             }
           ]
         },
-        {
-          "name": "background-blend-mode",
-          "description": "The **`background-blend-mode`** CSS property sets how an element's background images should blend with each other and with the element's background color.\n\n\n**Initial value**: `normal`\n\nThis property supports responsive values. You can pass a single value like `\"color\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"color\",\n  \"md\": \"color-burn\",\n  \"lg\": \"color-dodge\",\n  \"xl\": \"darken\"\n}\n```\n\n- color\n- color-burn\n- color-dodge\n- darken\n- difference\n- exclusion\n- hard-light\n- hue\n- lighten\n- luminosity\n- multiply\n- normal\n- overlay\n- saturation\n- screen\n- soft-light",
-          "values": [
-            {
-              "name": "color"
-            },
-            {
-              "name": "color-burn"
-            },
-            {
-              "name": "color-dodge"
-            },
-            {
-              "name": "darken"
-            },
-            {
-              "name": "difference"
-            },
-            {
-              "name": "exclusion"
-            },
-            {
-              "name": "hard-light"
-            },
-            {
-              "name": "hue"
-            },
-            {
-              "name": "lighten"
-            },
-            {
-              "name": "luminosity"
-            },
-            {
-              "name": "multiply"
-            },
-            {
-              "name": "normal"
-            },
-            {
-              "name": "overlay"
-            },
-            {
-              "name": "saturation"
-            },
-            {
-              "name": "screen"
-            },
-            {
-              "name": "soft-light"
-            }
-          ]
-        },
         {
           "name": "background-repeat",
           "description": "The **`background-repeat`** CSS property sets how background images are repeated. A background image can be repeated along the horizontal and vertical axes, or not repeated at all.\n\n\n**Initial value**: `repeat`\n\nThis property supports responsive values. You can pass a single value like `\"no-repeat\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"no-repeat\",\n  \"md\": \"repeat\",\n  \"lg\": \"repeat-x\",\n  \"xl\": \"repeat-y\"\n}\n```\n\n- no-repeat\n- repeat\n- repeat-x\n- repeat-y\n- round\n- space",
@@ -6277,350 +6407,353 @@
           ]
         },
         {
-          "name": "display",
-          "description": "The **`display`** CSS property sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex.\n\n\n**Initial value**: `inline`\n\nThis property supports responsive values. You can pass a single value like `\"block\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"block\",\n  \"md\": \"contents\",\n  \"lg\": \"flex\",\n  \"xl\": \"flow\"\n}\n```\n\n- block\n- contents\n- flex\n- flow\n- flow-root\n- grid\n- inline\n- inline-block\n- inline-flex\n- inline-grid\n- inline-list-item\n- inline-table\n- list-item\n- none\n- ruby\n- ruby-base\n- ruby-base-container\n- ruby-text\n- ruby-text-container\n- run-in\n- table\n- table-caption\n- table-cell\n- table-column\n- table-column-group\n- table-footer-group\n- table-header-group\n- table-row\n- table-row-group",
+          "name": "box-sizing",
+          "description": "The **`box-sizing`** CSS property sets how the total width and height of an element is calculated.\n\n\n**Initial value**: `content-box`\n\nThis property supports responsive values. You can pass a single value like `\"border-box\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"border-box\",\n  \"md\": \"content-box\",\n  \"lg\": \"border-box\",\n  \"xl\": \"content-box\"\n}\n```\n\n- border-box\n- content-box",
           "values": [
             {
-              "name": "block"
+              "name": "border-box"
             },
             {
-              "name": "contents"
-            },
+              "name": "content-box"
+            }
+          ]
+        },
+        {
+          "name": "cursor",
+          "description": "The **`cursor`** CSS property sets the type of mouse cursor, if any, to show when the mouse pointer is over an element.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"alias\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"alias\",\n  \"md\": \"all-scroll\",\n  \"lg\": \"auto\",\n  \"xl\": \"cell\"\n}\n```\n\n- alias\n- all-scroll\n- auto\n- cell\n- col-resize\n- context-menu\n- copy\n- crosshair\n- default\n- e-resize\n- ew-resize\n- grab\n- grabbing\n- help\n- move\n- n-resize\n- ne-resize\n- nesw-resize\n- no-drop\n- none\n- not-allowed\n- ns-resize\n- nw-resize\n- nwse-resize\n- pointer\n- progress\n- row-resize\n- s-resize\n- se-resize\n- sw-resize\n- text\n- vertical-text\n- w-resize\n- wait\n- zoom-in\n- zoom-out",
+          "values": [
             {
-              "name": "flex"
+              "name": "alias"
             },
             {
-              "name": "flow"
+              "name": "all-scroll"
             },
             {
-              "name": "flow-root"
+              "name": "auto"
             },
             {
-              "name": "grid"
+              "name": "cell"
             },
             {
-              "name": "inline"
+              "name": "col-resize"
             },
             {
-              "name": "inline-block"
+              "name": "context-menu"
             },
             {
-              "name": "inline-flex"
+              "name": "copy"
             },
             {
-              "name": "inline-grid"
+              "name": "crosshair"
             },
             {
-              "name": "inline-list-item"
+              "name": "default"
             },
             {
-              "name": "inline-table"
+              "name": "e-resize"
             },
             {
-              "name": "list-item"
+              "name": "ew-resize"
             },
             {
-              "name": "none"
+              "name": "grab"
             },
             {
-              "name": "ruby"
+              "name": "grabbing"
             },
             {
-              "name": "ruby-base"
+              "name": "help"
             },
             {
-              "name": "ruby-base-container"
+              "name": "move"
             },
             {
-              "name": "ruby-text"
+              "name": "n-resize"
             },
             {
-              "name": "ruby-text-container"
+              "name": "ne-resize"
             },
             {
-              "name": "run-in"
+              "name": "nesw-resize"
             },
             {
-              "name": "table"
+              "name": "no-drop"
             },
             {
-              "name": "table-caption"
+              "name": "none"
             },
             {
-              "name": "table-cell"
+              "name": "not-allowed"
             },
             {
-              "name": "table-column"
+              "name": "ns-resize"
             },
             {
-              "name": "table-column-group"
+              "name": "nw-resize"
             },
             {
-              "name": "table-footer-group"
+              "name": "nwse-resize"
             },
             {
-              "name": "table-header-group"
+              "name": "pointer"
             },
             {
-              "name": "table-row"
+              "name": "progress"
             },
             {
-              "name": "table-row-group"
-            }
-          ]
-        },
-        {
-          "name": "flex-direction",
-          "description": "The **`flex-direction`** CSS property sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).\n\n\n**Initial value**: `row`\n\nThis property supports responsive values. You can pass a single value like `\"column\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"column\",\n  \"md\": \"column-reverse\",\n  \"lg\": \"row\",\n  \"xl\": \"row-reverse\"\n}\n```\n\n- column\n- column-reverse\n- row\n- row-reverse",
-          "values": [
+              "name": "row-resize"
+            },
             {
-              "name": "column"
+              "name": "s-resize"
             },
             {
-              "name": "column-reverse"
+              "name": "se-resize"
             },
             {
-              "name": "row"
+              "name": "sw-resize"
             },
             {
-              "name": "row-reverse"
-            }
-          ]
-        },
-        {
-          "name": "flex-wrap",
-          "description": "The **`flex-wrap`** CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.\n\n\n**Initial value**: `nowrap`\n\nThis property supports responsive values. You can pass a single value like `\"nowrap\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"nowrap\",\n  \"md\": \"wrap\",\n  \"lg\": \"wrap-reverse\",\n  \"xl\": \"nowrap\"\n}\n```\n\n- nowrap\n- wrap\n- wrap-reverse",
-          "values": [
+              "name": "text"
+            },
             {
-              "name": "nowrap"
+              "name": "vertical-text"
             },
             {
-              "name": "wrap"
+              "name": "w-resize"
             },
             {
-              "name": "wrap-reverse"
+              "name": "wait"
+            },
+            {
+              "name": "zoom-in"
+            },
+            {
+              "name": "zoom-out"
             }
           ]
         },
         {
-          "name": "flex-basis",
-          "description": "The **`flex-basis`** CSS property sets the initial main size of a flex item. It sets the size of the content box unless otherwise set with `box-sizing`.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"auto\",\n  \"md\": \"content\",\n  \"lg\": \"fit-content\",\n  \"xl\": \"max-content\"\n}\n```\n\n- auto\n- content\n- fit-content\n- max-content\n- min-content\n- stretch",
+          "name": "display",
+          "description": "The **`display`** CSS property sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex.\n\n\n**Initial value**: `inline`\n\nThis property supports responsive values. You can pass a single value like `\"block\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"block\",\n  \"md\": \"contents\",\n  \"lg\": \"flex\",\n  \"xl\": \"flow\"\n}\n```\n\n- block\n- contents\n- flex\n- flow\n- flow-root\n- grid\n- inline\n- inline-block\n- inline-flex\n- inline-grid\n- inline-list-item\n- inline-table\n- list-item\n- none\n- ruby\n- ruby-base\n- ruby-base-container\n- ruby-text\n- ruby-text-container\n- run-in\n- table\n- table-caption\n- table-cell\n- table-column\n- table-column-group\n- table-footer-group\n- table-header-group\n- table-row\n- table-row-group",
           "values": [
             {
-              "name": "auto"
+              "name": "block"
             },
             {
-              "name": "content"
+              "name": "contents"
             },
             {
-              "name": "fit-content"
+              "name": "flex"
             },
             {
-              "name": "max-content"
+              "name": "flow"
             },
             {
-              "name": "min-content"
+              "name": "flow-root"
             },
             {
-              "name": "stretch"
-            }
-          ]
-        },
-        {
-          "name": "justify-content",
-          "description": "The CSS **`justify-content`** property defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.\n\n\n**Initial value**: `normal`\n\nThis property supports responsive values. You can pass a single value like `\"center\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"center\",\n  \"md\": \"end\",\n  \"lg\": \"flex-end\",\n  \"xl\": \"flex-start\"\n}\n```\n\n- center\n- end\n- flex-end\n- flex-start\n- left\n- normal\n- right\n- space-around\n- space-between\n- space-evenly\n- start\n- stretch",
-          "values": [
-            {
-              "name": "center"
+              "name": "grid"
             },
             {
-              "name": "end"
+              "name": "inline"
             },
             {
-              "name": "flex-end"
+              "name": "inline-block"
             },
             {
-              "name": "flex-start"
+              "name": "inline-flex"
             },
             {
-              "name": "left"
+              "name": "inline-grid"
             },
             {
-              "name": "normal"
+              "name": "inline-list-item"
             },
             {
-              "name": "right"
+              "name": "inline-table"
             },
             {
-              "name": "space-around"
+              "name": "list-item"
             },
             {
-              "name": "space-between"
+              "name": "none"
             },
             {
-              "name": "space-evenly"
+              "name": "ruby"
             },
             {
-              "name": "start"
+              "name": "ruby-base"
             },
             {
-              "name": "stretch"
-            }
-          ]
-        },
-        {
-          "name": "justify-items",
-          "description": "The CSS **`justify-items`** property defines the default `justify-self` for all items of the box, giving them all a default way of justifying each box along the appropriate axis.\n\n\n**Initial value**: `legacy`\n\nThis property supports responsive values. You can pass a single value like `\"baseline\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"baseline\",\n  \"md\": \"center\",\n  \"lg\": \"end\",\n  \"xl\": \"flex-end\"\n}\n```\n\n- baseline\n- center\n- end\n- flex-end\n- flex-start\n- left\n- legacy\n- normal\n- right\n- self-end\n- self-start\n- start\n- stretch",
-          "values": [
-            {
-              "name": "baseline"
+              "name": "ruby-base-container"
             },
             {
-              "name": "center"
+              "name": "ruby-text"
             },
             {
-              "name": "end"
+              "name": "ruby-text-container"
             },
             {
-              "name": "flex-end"
+              "name": "run-in"
             },
             {
-              "name": "flex-start"
+              "name": "table"
             },
             {
-              "name": "left"
+              "name": "table-caption"
             },
             {
-              "name": "legacy"
+              "name": "table-cell"
             },
             {
-              "name": "normal"
+              "name": "table-column"
             },
             {
-              "name": "right"
+              "name": "table-column-group"
             },
             {
-              "name": "self-end"
+              "name": "table-footer-group"
             },
             {
-              "name": "self-start"
+              "name": "table-header-group"
             },
             {
-              "name": "start"
+              "name": "table-row"
             },
             {
-              "name": "stretch"
+              "name": "table-row-group"
             }
           ]
         },
         {
-          "name": "align-content",
-          "description": "The CSS **`align-content`** property sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis.\n\n\n**Initial value**: `normal`\n\nThis property supports responsive values. You can pass a single value like `\"baseline\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"baseline\",\n  \"md\": \"center\",\n  \"lg\": \"end\",\n  \"xl\": \"flex-end\"\n}\n```\n\n- baseline\n- center\n- end\n- flex-end\n- flex-start\n- normal\n- space-around\n- space-between\n- space-evenly\n- start\n- stretch",
+          "name": "flex-basis",
+          "description": "The **`flex-basis`** CSS property sets the initial main size of a flex item. It sets the size of the content box unless otherwise set with `box-sizing`.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"auto\",\n  \"md\": \"content\",\n  \"lg\": \"fit-content\",\n  \"xl\": \"max-content\"\n}\n```\n\n- auto\n- content\n- fit-content\n- max-content\n- min-content\n- stretch",
           "values": [
             {
-              "name": "baseline"
-            },
-            {
-              "name": "center"
+              "name": "auto"
             },
             {
-              "name": "end"
+              "name": "content"
             },
             {
-              "name": "flex-end"
+              "name": "fit-content"
             },
             {
-              "name": "flex-start"
+              "name": "max-content"
             },
             {
-              "name": "normal"
+              "name": "min-content"
             },
             {
-              "name": "space-around"
-            },
+              "name": "stretch"
+            }
+          ]
+        },
+        {
+          "name": "flex-direction",
+          "description": "The **`flex-direction`** CSS property sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).\n\n\n**Initial value**: `row`\n\nThis property supports responsive values. You can pass a single value like `\"column\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"column\",\n  \"md\": \"column-reverse\",\n  \"lg\": \"row\",\n  \"xl\": \"row-reverse\"\n}\n```\n\n- column\n- column-reverse\n- row\n- row-reverse",
+          "values": [
             {
-              "name": "space-between"
+              "name": "column"
             },
             {
-              "name": "space-evenly"
+              "name": "column-reverse"
             },
             {
-              "name": "start"
+              "name": "row"
             },
             {
-              "name": "stretch"
+              "name": "row-reverse"
             }
           ]
         },
         {
-          "name": "align-items",
-          "description": "The CSS **`align-items`** property sets the `align-self` value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.\n\n\n**Initial value**: `normal`\n\nThis property supports responsive values. You can pass a single value like `\"baseline\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"baseline\",\n  \"md\": \"center\",\n  \"lg\": \"end\",\n  \"xl\": \"flex-end\"\n}\n```\n\n- baseline\n- center\n- end\n- flex-end\n- flex-start\n- normal\n- self-end\n- self-start\n- start\n- stretch",
+          "name": "flex-grow",
+          "description": "The **`flex-grow`** CSS property sets the flex grow factor of a flex item main size.\n\n\n**Initial value**: `0`",
+          "values": []
+        },
+        {
+          "name": "flex-shrink",
+          "description": "The **`flex-shrink`** CSS property sets the flex shrink factor of a flex item. If the size of all flex items is larger than the flex container, items shrink to fit according to `flex-shrink`.\n\n\n**Initial value**: `1`",
+          "values": []
+        },
+        {
+          "name": "flex-wrap",
+          "description": "The **`flex-wrap`** CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.\n\n\n**Initial value**: `nowrap`\n\nThis property supports responsive values. You can pass a single value like `\"nowrap\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"nowrap\",\n  \"md\": \"wrap\",\n  \"lg\": \"wrap-reverse\",\n  \"xl\": \"nowrap\"\n}\n```\n\n- nowrap\n- wrap\n- wrap-reverse",
           "values": [
             {
-              "name": "baseline"
-            },
-            {
-              "name": "center"
-            },
-            {
-              "name": "end"
+              "name": "nowrap"
             },
             {
-              "name": "flex-end"
+              "name": "wrap"
             },
             {
-              "name": "flex-start"
-            },
+              "name": "wrap-reverse"
+            }
+          ]
+        },
+        {
+          "name": "grid-template-areas",
+          "description": "The **`grid-template-areas`** CSS property specifies named grid areas, establishing the cells in the grid and assigning them names.\n\n\n**Initial value**: `none`",
+          "values": []
+        },
+        {
+          "name": "grid-template-columns",
+          "description": "The **`grid-template-columns`** CSS property defines the line names and track sizing functions of the grid columns.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"auto\",\n  \"md\": \"max-content\",\n  \"lg\": \"min-content\",\n  \"xl\": \"none\"\n}\n```\n\n- auto\n- max-content\n- min-content\n- none\n- subgrid",
+          "values": [
             {
-              "name": "normal"
+              "name": "auto"
             },
             {
-              "name": "self-end"
+              "name": "max-content"
             },
             {
-              "name": "self-start"
+              "name": "min-content"
             },
             {
-              "name": "start"
+              "name": "none"
             },
             {
-              "name": "stretch"
+              "name": "subgrid"
             }
           ]
         },
         {
-          "name": "align-self",
-          "description": "The **`align-self`** CSS property overrides a grid or flex item's `align-items` value. In Grid, it aligns the item inside the grid area. In Flexbox, it aligns the item on the cross axis.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"auto\",\n  \"md\": \"baseline\",\n  \"lg\": \"center\",\n  \"xl\": \"end\"\n}\n```\n\n- auto\n- baseline\n- center\n- end\n- flex-end\n- flex-start\n- normal\n- self-end\n- self-start\n- start\n- stretch",
+          "name": "grid-template-rows",
+          "description": "The **`grid-template-rows`** CSS property defines the line names and track sizing functions of the grid rows.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"auto\",\n  \"md\": \"max-content\",\n  \"lg\": \"min-content\",\n  \"xl\": \"none\"\n}\n```\n\n- auto\n- max-content\n- min-content\n- none\n- subgrid",
           "values": [
             {
               "name": "auto"
             },
             {
-              "name": "baseline"
-            },
-            {
-              "name": "center"
+              "name": "max-content"
             },
             {
-              "name": "end"
+              "name": "min-content"
             },
             {
-              "name": "flex-end"
+              "name": "none"
             },
             {
-              "name": "flex-start"
-            },
+              "name": "subgrid"
+            }
+          ]
+        },
+        {
+          "name": "height",
+          "description": "The **`height`** CSS property specifies the height of an element. By default, the property defines the height of the content area. If `box-sizing` is set to `border-box`, however, it instead determines the height of the border area. It is also possible to pass a specific value.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"auto\",\n  \"md\": \"fit-content\",\n  \"lg\": \"max-content\",\n  \"xl\": \"min-content\"\n}\n```\n\n- auto\n- fit-content\n- max-content\n- min-content\n- stretch",
+          "values": [
             {
-              "name": "normal"
+              "name": "auto"
             },
             {
-              "name": "self-end"
+              "name": "fit-content"
             },
             {
-              "name": "self-start"
+              "name": "max-content"
             },
             {
-              "name": "start"
+              "name": "min-content"
             },
             {
               "name": "stretch"
@@ -6628,191 +6761,201 @@
           ]
         },
         {
-          "name": "pointer-events",
-          "description": "The **`pointer-events`** CSS property sets under what circumstances (if any) a particular graphic element can become the target of pointer events.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"all\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"all\",\n  \"md\": \"auto\",\n  \"lg\": \"fill\",\n  \"xl\": \"inherit\"\n}\n```\n\n- all\n- auto\n- fill\n- inherit\n- none\n- painted\n- stroke\n- visible\n- visibleFill\n- visiblePainted\n- visibleStroke",
+          "name": "justify-content",
+          "description": "The CSS **`justify-content`** property defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.\n\n\n**Initial value**: `normal`\n\nThis property supports responsive values. You can pass a single value like `\"center\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"center\",\n  \"md\": \"end\",\n  \"lg\": \"flex-end\",\n  \"xl\": \"flex-start\"\n}\n```\n\n- center\n- end\n- flex-end\n- flex-start\n- left\n- normal\n- right\n- space-around\n- space-between\n- space-evenly\n- start\n- stretch",
           "values": [
             {
-              "name": "all"
-            },
-            {
-              "name": "auto"
-            },
-            {
-              "name": "fill"
-            },
-            {
-              "name": "inherit"
-            },
-            {
-              "name": "none"
+              "name": "center"
             },
             {
-              "name": "painted"
+              "name": "end"
             },
             {
-              "name": "stroke"
+              "name": "flex-end"
             },
             {
-              "name": "visible"
+              "name": "flex-start"
             },
             {
-              "name": "visibleFill"
+              "name": "left"
             },
             {
-              "name": "visiblePainted"
+              "name": "normal"
             },
             {
-              "name": "visibleStroke"
-            }
-          ]
-        },
-        {
-          "name": "position",
-          "description": "The **`position`** CSS property sets how an element is positioned in a document. The `top`, `right`, `bottom`, and `left` properties determine the final location of positioned elements.\n\n\n**Initial value**: `static`\n\nThis property supports responsive values. You can pass a single value like `\"absolute\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"absolute\",\n  \"md\": \"fixed\",\n  \"lg\": \"relative\",\n  \"xl\": \"static\"\n}\n```\n\n- absolute\n- fixed\n- relative\n- static\n- sticky",
-          "values": [
-            {
-              "name": "absolute"
+              "name": "right"
             },
             {
-              "name": "fixed"
+              "name": "space-around"
             },
             {
-              "name": "relative"
+              "name": "space-between"
             },
             {
-              "name": "static"
+              "name": "space-evenly"
             },
             {
-              "name": "sticky"
-            }
-          ]
-        },
-        {
-          "name": "box-sizing",
-          "description": "The **`box-sizing`** CSS property sets how the total width and height of an element is calculated.\n\n\n**Initial value**: `content-box`\n\nThis property supports responsive values. You can pass a single value like `\"border-box\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"border-box\",\n  \"md\": \"content-box\",\n  \"lg\": \"border-box\",\n  \"xl\": \"content-box\"\n}\n```\n\n- border-box\n- content-box",
-          "values": [
-            {
-              "name": "border-box"
+              "name": "start"
             },
             {
-              "name": "content-box"
+              "name": "stretch"
             }
           ]
         },
         {
-          "name": "cursor",
-          "description": "The **`cursor`** CSS property sets the type of mouse cursor, if any, to show when the mouse pointer is over an element.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"alias\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"alias\",\n  \"md\": \"all-scroll\",\n  \"lg\": \"auto\",\n  \"xl\": \"cell\"\n}\n```\n\n- alias\n- all-scroll\n- auto\n- cell\n- col-resize\n- context-menu\n- copy\n- crosshair\n- default\n- e-resize\n- ew-resize\n- grab\n- grabbing\n- help\n- move\n- n-resize\n- ne-resize\n- nesw-resize\n- no-drop\n- none\n- not-allowed\n- ns-resize\n- nw-resize\n- nwse-resize\n- pointer\n- progress\n- row-resize\n- s-resize\n- se-resize\n- sw-resize\n- text\n- vertical-text\n- w-resize\n- wait\n- zoom-in\n- zoom-out",
+          "name": "justify-items",
+          "description": "The CSS **`justify-items`** property defines the default `justify-self` for all items of the box, giving them all a default way of justifying each box along the appropriate axis.\n\n\n**Initial value**: `legacy`\n\nThis property supports responsive values. You can pass a single value like `\"baseline\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"baseline\",\n  \"md\": \"center\",\n  \"lg\": \"end\",\n  \"xl\": \"flex-end\"\n}\n```\n\n- baseline\n- center\n- end\n- flex-end\n- flex-start\n- left\n- legacy\n- normal\n- right\n- self-end\n- self-start\n- start\n- stretch",
           "values": [
             {
-              "name": "alias"
-            },
-            {
-              "name": "all-scroll"
-            },
-            {
-              "name": "auto"
+              "name": "baseline"
             },
             {
-              "name": "cell"
+              "name": "center"
             },
             {
-              "name": "col-resize"
+              "name": "end"
             },
             {
-              "name": "context-menu"
+              "name": "flex-end"
             },
             {
-              "name": "copy"
+              "name": "flex-start"
             },
             {
-              "name": "crosshair"
+              "name": "left"
             },
             {
-              "name": "default"
+              "name": "legacy"
             },
             {
-              "name": "e-resize"
+              "name": "normal"
             },
             {
-              "name": "ew-resize"
+              "name": "right"
             },
             {
-              "name": "grab"
+              "name": "self-end"
             },
             {
-              "name": "grabbing"
+              "name": "self-start"
             },
             {
-              "name": "help"
+              "name": "start"
             },
             {
-              "name": "move"
-            },
+              "name": "stretch"
+            }
+          ]
+        },
+        {
+          "name": "max-height",
+          "description": "The **`max-height`** CSS property sets the maximum height of an element. It prevents the used value of the `height` property from becoming larger than the value specified for `max-height`. It is also possible to pass a specific value.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"fit-content\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"fit-content\",\n  \"md\": \"intrinsic\",\n  \"lg\": \"max-content\",\n  \"xl\": \"min-content\"\n}\n```\n\n- fit-content\n- intrinsic\n- max-content\n- min-content\n- none\n- stretch",
+          "values": [
             {
-              "name": "n-resize"
+              "name": "fit-content"
             },
             {
-              "name": "ne-resize"
+              "name": "intrinsic"
             },
             {
-              "name": "nesw-resize"
+              "name": "max-content"
             },
             {
-              "name": "no-drop"
+              "name": "min-content"
             },
             {
               "name": "none"
             },
             {
-              "name": "not-allowed"
+              "name": "stretch"
+            }
+          ]
+        },
+        {
+          "name": "max-width",
+          "description": "The **`max-width`** CSS property sets the maximum width of an element. It prevents the used value of the `width` property from becoming larger than the value specified by `max-width`. It is also possible to pass a specific value.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"fit-content\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"fit-content\",\n  \"md\": \"intrinsic\",\n  \"lg\": \"max-content\",\n  \"xl\": \"min-content\"\n}\n```\n\n- fit-content\n- intrinsic\n- max-content\n- min-content\n- none\n- stretch",
+          "values": [
+            {
+              "name": "fit-content"
             },
             {
-              "name": "ns-resize"
+              "name": "intrinsic"
             },
             {
-              "name": "nw-resize"
+              "name": "max-content"
             },
             {
-              "name": "nwse-resize"
+              "name": "min-content"
             },
             {
-              "name": "pointer"
+              "name": "none"
             },
             {
-              "name": "progress"
+              "name": "stretch"
+            }
+          ]
+        },
+        {
+          "name": "min-height",
+          "description": "The **`min-height`** CSS property sets the minimum height of an element. It prevents the used value of the `height` property from becoming smaller than the value specified for `min-height`. It is also possible to pass a specific value.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"auto\",\n  \"md\": \"fit-content\",\n  \"lg\": \"intrinsic\",\n  \"xl\": \"max-content\"\n}\n```\n\n- auto\n- fit-content\n- intrinsic\n- max-content\n- min-content\n- stretch",
+          "values": [
+            {
+              "name": "auto"
             },
             {
-              "name": "row-resize"
+              "name": "fit-content"
             },
             {
-              "name": "s-resize"
+              "name": "intrinsic"
             },
             {
-              "name": "se-resize"
+              "name": "max-content"
             },
             {
-              "name": "sw-resize"
+              "name": "min-content"
             },
             {
-              "name": "text"
+              "name": "stretch"
+            }
+          ]
+        },
+        {
+          "name": "min-width",
+          "description": "The **`min-width`** CSS property sets the minimum width of an element. It prevents the used value of the `width` property from becoming smaller than the value specified for `min-width`. It is also possible to pass a specific value.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"auto\",\n  \"md\": \"fit-content\",\n  \"lg\": \"intrinsic\",\n  \"xl\": \"max-content\"\n}\n```\n\n- auto\n- fit-content\n- intrinsic\n- max-content\n- min-content\n- min-intrinsic\n- stretch",
+          "values": [
+            {
+              "name": "auto"
             },
             {
-              "name": "vertical-text"
+              "name": "fit-content"
             },
             {
-              "name": "w-resize"
+              "name": "intrinsic"
             },
             {
-              "name": "wait"
+              "name": "max-content"
             },
             {
-              "name": "zoom-in"
+              "name": "min-content"
             },
             {
-              "name": "zoom-out"
+              "name": "min-intrinsic"
+            },
+            {
+              "name": "stretch"
             }
           ]
         },
+        {
+          "name": "opacity",
+          "description": "The **`opacity`** CSS property sets the opacity of an element. Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency.\n\n\n**Initial value**: `1.0`",
+          "values": []
+        },
+        {
+          "name": "order",
+          "description": "The **`order`** CSS property sets the order to lay out an item in a flex or grid container. Items in a container are sorted by ascending `order` value and then by their source code order.\n\n\n**Initial value**: `0`",
+          "values": []
+        },
         {
           "name": "overflow-x",
           "description": "The **`overflow-x`** CSS property sets what shows when content overflows a block-level element's left and right edges. This may be nothing, a scroll bar, or the overflow content.\n\n\n**Initial value**: `visible`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"auto\",\n  \"md\": \"clip\",\n  \"lg\": \"hidden\",\n  \"xl\": \"scroll\"\n}\n```\n\n- auto\n- clip\n- hidden\n- scroll\n- visible",
@@ -6856,29 +6999,41 @@
           ]
         },
         {
-          "name": "transition-timing-function",
-          "description": "The **`transition-timing-function`** CSS property sets how intermediate values are calculated for CSS properties being affected by a transition effect.\n\n\n**Initial value**: `ease`\n\nThis property supports responsive values. You can pass a single value like `\"ease\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"ease\",\n  \"md\": \"ease-in\",\n  \"lg\": \"ease-in-out\",\n  \"xl\": \"ease-out\"\n}\n```\n\n- ease\n- ease-in\n- ease-in-out\n- ease-out\n- linear\n- step-end\n- step-start",
+          "name": "pointer-events",
+          "description": "The **`pointer-events`** CSS property sets under what circumstances (if any) a particular graphic element can become the target of pointer events.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"all\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"all\",\n  \"md\": \"auto\",\n  \"lg\": \"fill\",\n  \"xl\": \"inherit\"\n}\n```\n\n- all\n- auto\n- fill\n- inherit\n- none\n- painted\n- stroke\n- visible\n- visibleFill\n- visiblePainted\n- visibleStroke",
           "values": [
             {
-              "name": "ease"
+              "name": "all"
             },
             {
-              "name": "ease-in"
+              "name": "auto"
             },
             {
-              "name": "ease-in-out"
+              "name": "fill"
             },
             {
-              "name": "ease-out"
+              "name": "inherit"
             },
             {
-              "name": "linear"
+              "name": "none"
             },
             {
-              "name": "step-end"
+              "name": "painted"
             },
             {
-              "name": "step-start"
+              "name": "stroke"
+            },
+            {
+              "name": "visible"
+            },
+            {
+              "name": "visibleFill"
+            },
+            {
+              "name": "visiblePainted"
+            },
+            {
+              "name": "visibleStroke"
             }
           ]
         },
@@ -6910,9 +7065,48 @@
           ]
         },
         {
-          "name": "opacity",
-          "description": "The **`opacity`** CSS property sets the opacity of an element. Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency.\n\n\n**Initial value**: `1.0`",
-          "values": []
+          "name": "transition-delay",
+          "description": "The **`transition-delay`** CSS property specifies the duration to wait before starting a property's transition effect when its value changes.\n\n\n**Initial value**: `0s`",
+          "type": "string"
+        },
+        {
+          "name": "transition-property",
+          "description": "The **`transition-property`** CSS property sets the CSS properties to which a transition effect should be applied.\n\n\n**Initial value**: all\n\nThis property supports responsive values. You can pass a single value like `\"all\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"all\",\n  \"md\": \"none\",\n  \"lg\": \"all\",\n  \"xl\": \"none\"\n}\n```\n\n- all\n- none",
+          "values": [
+            {
+              "name": "all"
+            },
+            {
+              "name": "none"
+            }
+          ]
+        },
+        {
+          "name": "transition-timing-function",
+          "description": "The **`transition-timing-function`** CSS property sets how intermediate values are calculated for CSS properties being affected by a transition effect.\n\n\n**Initial value**: `ease`\n\nThis property supports responsive values. You can pass a single value like `\"ease\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"ease\",\n  \"md\": \"ease-in\",\n  \"lg\": \"ease-in-out\",\n  \"xl\": \"ease-out\"\n}\n```\n\n- ease\n- ease-in\n- ease-in-out\n- ease-out\n- linear\n- step-end\n- step-start",
+          "values": [
+            {
+              "name": "ease"
+            },
+            {
+              "name": "ease-in"
+            },
+            {
+              "name": "ease-in-out"
+            },
+            {
+              "name": "ease-out"
+            },
+            {
+              "name": "linear"
+            },
+            {
+              "name": "step-end"
+            },
+            {
+              "name": "step-start"
+            }
+          ]
         },
         {
           "name": "vertical-align",
@@ -6969,17 +7163,17 @@
           ]
         },
         {
-          "name": "flex",
-          "description": "The **`flex`** CSS shorthand property sets how a flex _item_ will grow or shrink to fit the space available in its flex container.\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"auto\",\n  \"md\": \"content\",\n  \"lg\": \"fit-content\",\n  \"xl\": \"max-content\"\n}\n```\n\n- auto\n- content\n- fit-content\n- max-content\n- min-content\n- none\n- stretch",
+          "name": "width",
+          "description": "The **`width`** CSS property sets an element's width. By default, it sets the width of the content area, but if `box-sizing` is set to `border-box`, it sets the width of the border area. It is also possible to pass a specific value.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"auto\",\n  \"md\": \"fit-content\",\n  \"lg\": \"intrinsic\",\n  \"xl\": \"max-content\"\n}\n```\n\n- auto\n- fit-content\n- intrinsic\n- max-content\n- min-content\n- min-intrinsic\n- stretch",
           "values": [
             {
               "name": "auto"
             },
             {
-              "name": "content"
+              "name": "fit-content"
             },
             {
-              "name": "fit-content"
+              "name": "intrinsic"
             },
             {
               "name": "max-content"
@@ -6988,7 +7182,7 @@
               "name": "min-content"
             },
             {
-              "name": "none"
+              "name": "min-intrinsic"
             },
             {
               "name": "stretch"
@@ -6996,55 +7190,50 @@
           ]
         },
         {
-          "name": "grid-area",
-          "description": "The **`grid-area`** CSS shorthand property specifies a grid item’s size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area.",
-          "values": []
-        },
-        {
-          "name": "background-position",
-          "description": "The **`background-position`** CSS property sets the initial position for each background image. The position is relative to the position layer set by `background-origin`.\n\n\n**Initial value**: `0% 0%`\n\nThis property supports responsive values. You can pass a single value like `\"bottom\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"bottom\",\n  \"md\": \"center\",\n  \"lg\": \"left\",\n  \"xl\": \"right\"\n}\n```\n\n- bottom\n- center\n- left\n- right\n- top",
+          "name": "flex",
+          "description": "The **`flex`** CSS shorthand property sets how a flex _item_ will grow or shrink to fit the space available in its flex container.\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"auto\",\n  \"md\": \"content\",\n  \"lg\": \"fit-content\",\n  \"xl\": \"max-content\"\n}\n```\n\n- auto\n- content\n- fit-content\n- max-content\n- min-content\n- none\n- stretch",
           "values": [
             {
-              "name": "bottom"
+              "name": "auto"
             },
             {
-              "name": "center"
+              "name": "content"
             },
             {
-              "name": "left"
+              "name": "fit-content"
             },
             {
-              "name": "right"
+              "name": "max-content"
             },
             {
-              "name": "top"
+              "name": "min-content"
+            },
+            {
+              "name": "none"
+            },
+            {
+              "name": "stretch"
             }
           ]
         },
         {
-          "name": "flex-flow",
-          "description": "The **`flex-flow`** CSS shorthand property specifies the direction of a flex container, as well as its wrapping behavior.\n\nThis property supports responsive values. You can pass a single value like `\"column\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"column\",\n  \"md\": \"column-reverse\",\n  \"lg\": \"nowrap\",\n  \"xl\": \"row\"\n}\n```\n\n- column\n- column-reverse\n- nowrap\n- row\n- row-reverse\n- wrap\n- wrap-reverse",
+          "name": "background-position",
+          "description": "The **`background-position`** CSS property sets the initial position for each background image. The position is relative to the position layer set by `background-origin`.\n\n\n**Initial value**: `0% 0%`\n\nThis property supports responsive values. You can pass a single value like `\"bottom\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"bottom\",\n  \"md\": \"center\",\n  \"lg\": \"left\",\n  \"xl\": \"right\"\n}\n```\n\n- bottom\n- center\n- left\n- right\n- top",
           "values": [
             {
-              "name": "column"
-            },
-            {
-              "name": "column-reverse"
-            },
-            {
-              "name": "nowrap"
+              "name": "bottom"
             },
             {
-              "name": "row"
+              "name": "center"
             },
             {
-              "name": "row-reverse"
+              "name": "left"
             },
             {
-              "name": "wrap"
+              "name": "right"
             },
             {
-              "name": "wrap-reverse"
+              "name": "top"
             }
           ]
         },
@@ -7084,6 +7273,38 @@
             }
           ]
         },
+        {
+          "name": "flex-flow",
+          "description": "The **`flex-flow`** CSS shorthand property specifies the direction of a flex container, as well as its wrapping behavior.\n\nThis property supports responsive values. You can pass a single value like `\"column\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"column\",\n  \"md\": \"column-reverse\",\n  \"lg\": \"nowrap\",\n  \"xl\": \"row\"\n}\n```\n\n- column\n- column-reverse\n- nowrap\n- row\n- row-reverse\n- wrap\n- wrap-reverse",
+          "values": [
+            {
+              "name": "column"
+            },
+            {
+              "name": "column-reverse"
+            },
+            {
+              "name": "nowrap"
+            },
+            {
+              "name": "row"
+            },
+            {
+              "name": "row-reverse"
+            },
+            {
+              "name": "wrap"
+            },
+            {
+              "name": "wrap-reverse"
+            }
+          ]
+        },
+        {
+          "name": "grid-area",
+          "description": "The **`grid-area`** CSS shorthand property specifies a grid item’s size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area.",
+          "values": []
+        },
         {
           "name": "overflow",
           "description": "The **`overflow`** CSS shorthand property sets the desired behavior for an element's overflow — i.e. when an element's content is too big to fit in its block formatting context — in both directions.\n\n\n**Initial value**: `visible`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"auto\",\n  \"md\": \"clip\",\n  \"lg\": \"hidden\",\n  \"xl\": \"scroll\"\n}\n```\n\n- auto\n- clip\n- hidden\n- scroll\n- visible",
@@ -7155,8 +7376,7 @@
         },
         {
           "name": "as",
-          "default": "div",
-          "description": "Changes the rendered element.\n\n- a\n- abbr\n- address\n- area\n- article\n- aside\n- audio\n- b\n- base\n- bdi\n- bdo\n- blockquote\n- body\n- br\n- button\n- canvas\n- caption\n- cite\n- code\n- col\n- colgroup\n- data\n- datalist\n- dd\n- del\n- details\n- dfn\n- dialog\n- div\n- dl\n- dt\n- em\n- embed\n- fieldset\n- figcaption\n- figure\n- footer\n- form\n- h1\n- h2\n- h3\n- h4\n- h5\n- h6\n- head\n- header\n- hgroup\n- hr\n- html\n- i\n- iframe\n- img\n- input\n- ins\n- kbd\n- label\n- legend\n- li\n- link\n- main\n- map\n- mark\n- menu\n- meta\n- meter\n- nav\n- noscript\n- object\n- ol\n- optgroup\n- option\n- output\n- p\n- picture\n- pre\n- progress\n- q\n- rarui-box\n- rp\n- rt\n- ruby\n- s\n- samp\n- script\n- section\n- select\n- slot\n- small\n- source\n- span\n- strong\n- style\n- sub\n- summary\n- sup\n- table\n- tbody\n- td\n- template\n- textarea\n- tfoot\n- th\n- thead\n- time\n- title\n- tr\n- track\n- u\n- ul\n- var\n- video\n- wbr",
+          "description": "Changes the rendered element.\n\n- a\n- abbr\n- address\n- area\n- article\n- aside\n- audio\n- b\n- base\n- bdi\n- bdo\n- blockquote\n- body\n- br\n- button\n- canvas\n- caption\n- cite\n- code\n- col\n- colgroup\n- data\n- datalist\n- dd\n- del\n- details\n- dfn\n- dialog\n- div\n- dl\n- dt\n- em\n- embed\n- fieldset\n- figcaption\n- figure\n- footer\n- form\n- h1\n- h2\n- h3\n- h4\n- h5\n- h6\n- head\n- header\n- hgroup\n- hr\n- html\n- i\n- iframe\n- img\n- input\n- ins\n- kbd\n- label\n- legend\n- li\n- link\n- main\n- map\n- mark\n- menu\n- meta\n- meter\n- nav\n- noscript\n- object\n- ol\n- optgroup\n- option\n- output\n- p\n- picture\n- pre\n- progress\n- q\n- rarui-box\n- rp\n- rt\n- ruby\n- s\n- samp\n- script\n- section\n- select\n- slot\n- small\n- source\n- span\n- strong\n- style\n- sub\n- summary\n- sup\n- table\n- tbody\n- td\n- template\n- textarea\n- tfoot\n- th\n- thead\n- time\n- title\n- tr\n- track\n- u\n- ul\n- var\n- video\n- wbr\n\n@default div",
           "type": "string",
           "values": [
             {
@@ -7496,19 +7716,125 @@
             {
               "name": "wbr"
             }
+          ],
+          "default": "div"
+        }
+      ]
+    },
+    {
+      "name": "rarui-sidebar",
+      "attributes": [
+        {
+          "name": "open",
+          "description": "Determines if the sidebar is shown or not.",
+          "type": "boolean"
+        },
+        {
+          "name": "portal-id",
+          "description": "Specifies the ID of the portal element where the sidebar should be rendered.\nThis can be useful for rendering the sidebar in a different part of the DOM, such as a modal or overlay.",
+          "type": "string"
+        },
+        {
+          "name": "on-remove",
+          "description": "Callback fired when the component requests to be closed.",
+          "type": "() => void;"
+        },
+        {
+          "name": "padding",
+          "description": "The **`padding`** CSS shorthand property sets the padding area on all four sides of an element at once.\n\nThis property supports responsive values. You can pass a single value like `\"$medium\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$medium\",\n  \"md\": \"$none\",\n  \"lg\": \"$small\",\n  \"xl\": \"$medium\"\n}\n```\n\n- $medium\n- $none\n- $small\n\n@default small",
+          "values": [
+            {
+              "name": "$medium"
+            },
+            {
+              "name": "$none"
+            },
+            {
+              "name": "$small"
+            }
+          ],
+          "default": "small"
+        },
+        {
+          "name": "z-index",
+          "description": "The zIndex property specifies the stack order of the box.\n\nThis property supports responsive values. You can pass a single value like `\"$100\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$100\",\n  \"md\": \"$200\",\n  \"lg\": \"$300\",\n  \"xl\": \"$400\"\n}\n```\n\n- $100\n- $200\n- $300\n- $400\n- $500\n- $600\n- $700\n- $800\n- $900",
+          "values": [
+            {
+              "name": "$100"
+            },
+            {
+              "name": "$200"
+            },
+            {
+              "name": "$300"
+            },
+            {
+              "name": "$400"
+            },
+            {
+              "name": "$500"
+            },
+            {
+              "name": "$600"
+            },
+            {
+              "name": "$700"
+            },
+            {
+              "name": "$800"
+            },
+            {
+              "name": "$900"
+            }
+          ]
+        },
+        {
+          "name": "max-width",
+          "description": "The **`max-width`** CSS property sets the maximum width of an element. It prevents the used value of the `width` property from becoming larger than the value specified by `max-width`. It is also possible to pass a specific value.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"fit-content\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"fit-content\",\n  \"md\": \"intrinsic\",\n  \"lg\": \"max-content\",\n  \"xl\": \"min-content\"\n}\n```\n\n- fit-content\n- intrinsic\n- max-content\n- min-content\n- none\n- stretch",
+          "values": [
+            {
+              "name": "fit-content"
+            },
+            {
+              "name": "intrinsic"
+            },
+            {
+              "name": "max-content"
+            },
+            {
+              "name": "min-content"
+            },
+            {
+              "name": "none"
+            },
+            {
+              "name": "stretch"
+            }
+          ]
+        },
+        {
+          "name": "position",
+          "description": "Specifies where the sidebar should be positioned\n\n- left\n- right",
+          "type": "string",
+          "values": [
+            {
+              "name": "left"
+            },
+            {
+              "name": "right"
+            }
           ]
         }
       ]
     },
     {
       "name": "rarui-breadcrumb",
-      "description": "## Rarui Breadcrumb\n---\nComponente de navegação hierárquica que permite aos usuários navegar através de uma estrutura de páginas.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/navigation/breadcrumb) for more details.",
       "attributes": [
         {
           "name": "items-after-truncate",
-          "default": 10,
-          "description": "Especifica o número de itens do breadcrumb a serem exibidos após o truncamento.\nÚtil para gerenciar a exibição de listas longas de breadcrumb.",
-          "type": "number"
+          "description": "Specifies the number of breadcrumb items to display after truncation.\nThis is useful for managing the display of long breadcrumb lists.\n\n@default 10",
+          "type": "number",
+          "default": 10
         }
       ]
     },
@@ -7533,8 +7859,7 @@
         },
         {
           "name": "as",
-          "default": "button",
-          "description": "Tipo de elemento a ser renderizado.\n\n- a\n- button",
+          "description": "Tipo de elemento a ser renderizado.\n\n- a\n- button\n\n@default button",
           "type": "string",
           "values": [
             {
@@ -7544,7 +7869,8 @@
               "name": "button",
               "description": "(default)"
             }
-          ]
+          ],
+          "default": "button"
         }
       ]
     },
@@ -7554,8 +7880,7 @@
       "attributes": [
         {
           "name": "appearance",
-          "default": "brand",
-          "description": "Determines the visual style of the link.\n\n- brand\n- inverted\n- neutral",
+          "description": "Determines the visual style of the link.\n\n- brand\n- inverted\n- neutral\n\n@default brand",
           "type": "string",
           "values": [
             {
@@ -7568,12 +7893,12 @@
             {
               "name": "neutral"
             }
-          ]
+          ],
+          "default": "brand"
         },
         {
           "name": "size",
-          "default": "large",
-          "description": "Specifies the size of the link.\n\n- large\n- medium\n- small",
+          "description": "Specifies the size of the link.\n\n- large\n- medium\n- small\n\n@default large",
           "type": "string",
           "values": [
             {
@@ -7586,7 +7911,8 @@
             {
               "name": "small"
             }
-          ]
+          ],
+          "default": "large"
         },
         {
           "name": "type",
@@ -7631,22 +7957,37 @@
     },
     {
       "name": "rarui-pagination",
-      "description": "## Rarui Pagination\n---\nThe pagination component allows the user to select a specific page in a page range.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/navigation/pagination) for more details.",
       "attributes": [
         {
-          "name": "page-count",
-          "description": "The total number of pages.",
+          "name": "active-page",
+          "description": "The currently selected page.\n\n(Required)",
           "type": "number"
         },
         {
-          "name": "active-page",
-          "description": "The currently selected page.",
+          "name": "page-count",
+          "description": "The total number of pages.\n\n(Required)",
           "type": "number"
         },
+        {
+          "name": "show-numbers",
+          "description": "Determines whether page numbers should be shown.\n\n@default true",
+          "type": "boolean",
+          "default": true
+        },
+        {
+          "name": "show-arrows",
+          "description": "Determines whether page arrows should be shown.\n\n@default true",
+          "type": "boolean",
+          "default": true
+        },
+        {
+          "name": "on-page-change",
+          "description": "Called with event and page number when a page is clicked.\n\n(Required)",
+          "type": "(page: number) => void;"
+        },
         {
           "name": "size",
-          "default": "large",
-          "description": "Specifies the size of the Pagination component.\n\n- dot\n- large\n- small",
+          "description": "Specifies the size of the Pagination component.\n\n- dot\n- large\n- small\n\n@default large",
           "type": "string",
           "values": [
             {
@@ -7659,19 +8000,8 @@
             {
               "name": "small"
             }
-          ]
-        },
-        {
-          "name": "show-numbers",
-          "default": true,
-          "description": "Determines whether page numbers should be shown.",
-          "type": "boolean"
-        },
-        {
-          "name": "show-arrows",
-          "default": true,
-          "description": "Determines whether page arrows should be shown.",
-          "type": "boolean"
+          ],
+          "default": "large"
         }
       ]
     },
@@ -7702,8 +8032,7 @@
         },
         {
           "name": "as",
-          "default": "button",
-          "description": "The HTML element type to render.\n\n- a\n- button",
+          "description": "The HTML element type to render.\n\n- a\n- button\n\n@default button",
           "type": "string",
           "values": [
             {
@@ -7713,7 +8042,8 @@
               "name": "button",
               "description": "(default)"
             }
-          ]
+          ],
+          "default": "button"
         }
       ]
     },
@@ -7723,7 +8053,7 @@
       "attributes": [
         {
           "name": "name",
-          "description": "Title of the sideNavigation",
+          "description": "Title of the sideNavigation\n\n(Required)",
           "type": "string"
         },
         {
@@ -7733,9 +8063,9 @@
         },
         {
           "name": "active",
-          "default": false,
           "description": "Whether the navigation item is in active state.",
-          "type": "boolean"
+          "type": "boolean",
+          "default": false
         },
         {
           "name": "level",
@@ -7755,14 +8085,13 @@
         },
         {
           "name": "disabled",
-          "default": false,
           "description": "Whether the navigation item is disabled.",
-          "type": "boolean"
+          "type": "boolean",
+          "default": false
         },
         {
           "name": "as",
-          "default": "button",
-          "description": "The HTML element type to render.\n\n- a\n- button",
+          "description": "The HTML element type to render.\n\n- a\n- button\n\n@default button",
           "type": "string",
           "values": [
             {
@@ -7772,13 +8101,13 @@
               "name": "button",
               "description": "(default)"
             }
-          ]
+          ],
+          "default": "button"
         }
       ]
     },
     {
       "name": "rarui-tabs",
-      "description": "## Rarui Tabs\n---\nThe Tabs are used to switch between different display modes or pages.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/navigation/tabs) for more details.",
       "attributes": [
         {
           "name": "pre-selected-tab",
@@ -7790,15 +8119,9 @@
           "description": "Sets the indicated tab as current active tab.\nCan be used to change the active tab from outside of the component",
           "type": "number"
         },
-        {
-          "name": "underlined",
-          "description": "Determines whether the tabs should have an underline style.",
-          "type": "boolean"
-        },
         {
           "name": "position",
-          "default": "left",
-          "description": "Controls where the tab buttons are displayed. This prop accepts one of the following values: \"left\", \"center\", or \"right\".\n\n- center\n- left\n- right",
+          "description": "Controls where the tab buttons are displayed. This prop accepts one of the following values: \"left\", \"center\", or \"right\".\n\n- center\n- left\n- right\n\n@default left",
           "type": "string",
           "values": [
             {
@@ -7811,12 +8134,18 @@
             {
               "name": "right"
             }
-          ]
+          ],
+          "default": "left"
         },
         {
           "name": "full",
           "description": "Determines whether the tabs should occupy the full width of their container.",
           "type": "boolean"
+        },
+        {
+          "name": "underlined",
+          "description": "Determines whether the tabs should have an underline style.",
+          "type": "boolean"
         }
       ]
     },
@@ -7826,8 +8155,7 @@
       "attributes": [
         {
           "name": "theme",
-          "default": "base",
-          "description": "Theme to apply globally to the application.\n\n- base\n- dark",
+          "description": "Theme to apply globally to the application.\n\n- base\n- dark\n\n@default base",
           "type": "string",
           "values": [
             {
@@ -7837,25 +8165,24 @@
             {
               "name": "dark"
             }
-          ]
+          ],
+          "default": "base"
         }
       ]
     },
     {
       "name": "rarui-accordion",
-      "description": "## Rarui Accordion\n---\nThe Accordion component displays a list of expandable sections that users can toggle open or closed.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/surface/accordion) for more details.",
       "attributes": [
-        {
-          "name": "disabled",
-          "default": false,
-          "description": "Disables the accordion, disallowing user interaction.",
-          "type": "boolean"
-        },
         {
           "name": "selected-default",
-          "default": "",
-          "description": "Informs which accordion item is open by default.",
+          "description": "Informs which accordion item is open by default, this value must be the same as informed in the index of each item",
           "type": "string"
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the accordion, disallowing user interaction.",
+          "type": "boolean",
+          "default": false
         }
       ]
     },
@@ -7865,8 +8192,7 @@
       "attributes": [
         {
           "name": "padding",
-          "default": "base",
-          "description": "Padding properties are used to generate space around the content area of an Accordion.Body..\n\n- base\n- none",
+          "description": "Padding properties are used to generate space around the content area of an Accordion.Body..\n\n- base\n- none\n\n@default base",
           "type": "string",
           "values": [
             {
@@ -7876,19 +8202,30 @@
             {
               "name": "none"
             }
-          ]
+          ],
+          "default": "base"
         }
       ]
     },
     {
       "name": "rarui-accordion-header",
-      "description": "## Rarui Accordion Header\n---\nClickable header section that toggles the accordion item visibility.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/surface/accordion) for more details.",
       "attributes": [
         {
           "name": "title",
           "description": "The title to display in the accordion header.",
           "type": "string"
         },
+        {
+          "name": "subtitle",
+          "description": "The subtitle to display in the accordion header.",
+          "type": "string"
+        },
+        {
+          "name": "no-icon-toggle",
+          "description": "Removes the arrow icon that shows if the accordion item is open or not which makes it possible to create a custom indicator.",
+          "type": "boolean",
+          "default": false
+        },
         {
           "name": "size",
           "description": "- large\n- medium\n- small",
@@ -7904,28 +8241,21 @@
               "name": "small"
             }
           ]
-        },
-        {
-          "name": "subtitle",
-          "description": "The subtitle to display in the accordion header.",
-          "type": "string"
-        },
-        {
-          "name": "no-icon-toggle",
-          "default": false,
-          "description": "Removes the arrow icon that shows if the accordion item is open or not which makes it possible to create a custom indicator.",
-          "type": "boolean"
         }
       ]
     },
     {
       "name": "rarui-accordion-item",
-      "description": "## Rarui Accordion Item\n---\nContainer for accordion header and body content.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/surface/accordion) for more details.",
       "attributes": [
         {
           "name": "index",
           "description": "Unique indicator to identify accordion items\n\n(Required)",
           "type": "string"
+        },
+        {
+          "name": "test-id",
+          "description": "This is an attribute used to identify a DOM node for testing purposes.",
+          "type": "string"
         }
       ]
     },
@@ -7933,10 +8263,14 @@
       "name": "rarui-banner",
       "description": "## Rarui Banner\n---\nBanner messages are displayed to the user at the top of the window/screen.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/surface/banner) for more details.",
       "attributes": [
+        {
+          "name": "on-close",
+          "description": "A function to be called when the user closes the banner. This function is typically used to handle the closing action.",
+          "type": "() => void;"
+        },
         {
           "name": "appearance",
-          "default": "brand",
-          "description": "The appearance of the banner. This can be used to set the color of the banner.\nSpecifies the visual appearance of the banner message, influencing its color and style.\n\n- brand\n- error\n- info\n- inverted\n- neutral\n- warning",
+          "description": "Specifies the visual appearance of the banner message, influencing its color and style.\n\n- brand\n- error\n- info\n- inverted\n- neutral\n- warning\n\n@default brand",
           "type": "string",
           "values": [
             {
@@ -7958,30 +8292,29 @@
             {
               "name": "warning"
             }
-          ]
+          ],
+          "default": "brand"
         },
         {
           "name": "floating",
-          "default": false,
           "description": "Determines whether the banner message should float above the content. This can be useful for ensuring the message remains visible even as the user scrolls.",
-          "type": "boolean"
+          "type": "boolean",
+          "default": false
         },
         {
           "name": "closable",
-          "default": false,
           "description": "If `true`, display the closing button in the upper right corner of the banner.\nWhen clicked, it fires the `close` event that can be listened to externally.",
-          "type": "boolean"
+          "type": "boolean",
+          "default": false
         }
       ]
     },
     {
       "name": "rarui-card",
-      "description": "## Rarui Card\n---\nThe Card component contains textual content, images, and actions about a topic.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/surface/card) for more details.",
       "attributes": [
         {
           "name": "padding",
-          "default": "base",
-          "description": "Specifies the padding inside the card.\nThis prop accepts one of the following values: \"none\" or \"base\".\n\n- base\n- none",
+          "description": "Specifies the padding inside the card.\nThis prop accepts one of the following values: \"none\" or \"base\".\n\n- base\n- none\n\n@default base",
           "type": "string",
           "values": [
             {
@@ -7991,12 +8324,12 @@
             {
               "name": "none"
             }
-          ]
+          ],
+          "default": "base"
         },
         {
           "name": "background-color",
-          "default": "$primary",
-          "description": "Specifies the background color of the card.\nThis prop accepts one of the following values: \"$transparent\", \"$background\", \"$primary\", or \"$secondary\"\n\nThis property supports responsive values. You can pass a single value like `\"$background\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$background\",\n  \"md\": \"$primary\",\n  \"lg\": \"$secondary\",\n  \"xl\": \"$transparent\"\n}\n```\n\n- $background\n- $primary\n- $secondary\n- $transparent",
+          "description": "Specifies the background color of the card.\nThis prop accepts one of the following values: \"$transparent\", \"$background\", \"$primary\", or \"$secondary\"\n\nThis property supports responsive values. You can pass a single value like `\"$background\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$background\",\n  \"md\": \"$primary\",\n  \"lg\": \"$secondary\",\n  \"xl\": \"$transparent\"\n}\n```\n\n- $background\n- $primary\n- $secondary\n- $transparent\n\n@default $primary",
           "values": [
             {
               "name": "$background"
@@ -8011,7 +8344,8 @@
             {
               "name": "$transparent"
             }
-          ]
+          ],
+          "default": "$primary"
         }
       ]
     },
@@ -8022,7 +8356,6 @@
     },
     {
       "name": "rarui-card-header",
-      "description": "## Rarui Card Header\n---\nThe Card component contains textual content, images, and actions about a topic.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/surface/card) for more details.",
       "attributes": [
         {
           "name": "title",
@@ -8038,50 +8371,10 @@
     },
     {
       "name": "rarui-modal",
-      "description": "## Rarui Modal\n---\nThe modal component provides a base for popovers, suspended forms, tutorials, or any other content above the UI main surface.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/surface/modal) for more details.",
       "attributes": [
-        {
-          "name": "padding",
-          "default": "base",
-          "description": "Padding properties are used to generate space around the content area of an Accordion.Body..\n\n- base\n- none",
-          "type": "string",
-          "values": [
-            {
-              "name": "base",
-              "description": "(default)"
-            },
-            {
-              "name": "none"
-            }
-          ]
-        },
-        {
-          "name": "max-width",
-          "description": "The **`max-width`** CSS property sets the maximum width of an element. It prevents the used value of the `width` property from becoming larger than the value specified by `max-width`. It is also possible to pass a specific value.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"fit-content\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"fit-content\",\n  \"md\": \"intrinsic\",\n  \"lg\": \"max-content\",\n  \"xl\": \"min-content\"\n}\n```\n\n- fit-content\n- intrinsic\n- max-content\n- min-content\n- none\n- stretch",
-          "values": [
-            {
-              "name": "fit-content"
-            },
-            {
-              "name": "intrinsic"
-            },
-            {
-              "name": "max-content"
-            },
-            {
-              "name": "min-content"
-            },
-            {
-              "name": "none"
-            },
-            {
-              "name": "stretch"
-            }
-          ]
-        },
         {
           "name": "open",
-          "description": "Whether the modal is open or not.",
+          "description": "Whether the modal is open or not.\n\n(Required)",
           "type": "boolean"
         },
         {
@@ -8089,6 +8382,11 @@
           "description": "Specifies the ID of the portal element where the modal should be rendered.\nThis can be useful for rendering the modal in a different part of the DOM, such as a modal or overlay.",
           "type": "string"
         },
+        {
+          "name": "on-dismiss",
+          "description": "Callback fired when the component requests to be closed.\n\n(Required)",
+          "type": "(open: boolean) => void;"
+        },
         {
           "name": "z-index",
           "description": "The zIndex property specifies the stack order of the box.\n\nThis property supports responsive values. You can pass a single value like `\"$100\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$100\",\n  \"md\": \"$200\",\n  \"lg\": \"$300\",\n  \"xl\": \"$400\"\n}\n```\n\n- $100\n- $200\n- $300\n- $400\n- $500\n- $600\n- $700\n- $800\n- $900",
@@ -8121,6 +8419,45 @@
               "name": "$900"
             }
           ]
+        },
+        {
+          "name": "max-width",
+          "description": "The **`max-width`** CSS property sets the maximum width of an element. It prevents the used value of the `width` property from becoming larger than the value specified by `max-width`. It is also possible to pass a specific value.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"fit-content\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"fit-content\",\n  \"md\": \"intrinsic\",\n  \"lg\": \"max-content\",\n  \"xl\": \"min-content\"\n}\n```\n\n- fit-content\n- intrinsic\n- max-content\n- min-content\n- none\n- stretch",
+          "values": [
+            {
+              "name": "fit-content"
+            },
+            {
+              "name": "intrinsic"
+            },
+            {
+              "name": "max-content"
+            },
+            {
+              "name": "min-content"
+            },
+            {
+              "name": "none"
+            },
+            {
+              "name": "stretch"
+            }
+          ]
+        },
+        {
+          "name": "padding",
+          "description": "Padding properties are used to generate space around the content area of an Accordion.Body..\n\n- base\n- none\n\n@default base",
+          "type": "string",
+          "values": [
+            {
+              "name": "base",
+              "description": "(default)"
+            },
+            {
+              "name": "none"
+            }
+          ],
+          "default": "base"
         }
       ]
     },