@rarui/components 1.14.0 → 1.16.0

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 `@rarui/components` components is a component library built with [Lit](https://lit.dev/).
 
+## 2025-06-30 `1.16.0`
+
+#### 🎉 New features
+
+- Added new input `Dropdown` component. ([#124](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/124) by [@junior](https://git.rarolabs.com.br/junior))
+
+## 2025-06-27 `1.15.0`
+
+#### 🎉 New features
+
+- Added new navigation `Pagination` component. ([#122](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/122) by [@junior](https://git.rarolabs.com.br/junior))
+
 ## 2025-06-26 `1.14.0`
 
 #### 🎉 New features

package/custom-elements.json

@@ -1,9 +1,9 @@
 {
-  "version": "1.13.0",
+  "version": "1.15.0",
   "tags": [
     {
       "name": "rarui-avatar",
-      "description": "## Rarui Avatar\n---\nThe Avatar component is normally used to display circular photos of the user's profile.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components/exhibition/avatar) for more details.",
+      "description": "## Rarui Avatar\n---\nThe Avatar component is normally used to display circular photos of the user's profile.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/exhibition/avatar) for more details.",
       "attributes": [
         {
           "name": "size",
@@ -30,7 +30,7 @@
     },
     {
       "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/exhibition/badge) for more details.",
+      "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",
@@ -102,7 +102,7 @@
     },
     {
       "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/exhibition/divider) for more details.",
+      "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",
@@ -1357,7 +1357,7 @@
     },
     {
       "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/exhibition/label) for more details.",
+      "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",
@@ -1374,7 +1374,7 @@
     },
     {
       "name": "rarui-stepper",
-      "description": "## Rarui Stepper\n---\nStepper transmit progress through steps.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components/exhibition/stepper) for more details.",
+      "description": "## Rarui Stepper\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": "direction",
@@ -1395,7 +1395,7 @@
     },
     {
       "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/exhibition/stepper) for more details.",
+      "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",
@@ -1423,7 +1423,7 @@
     },
     {
       "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/exhibition/typography) for more details.",
+      "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": "color",
@@ -1766,7 +1766,7 @@
     },
     {
       "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/exhibition/typography) for more details.",
+      "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",
@@ -2029,7 +2029,7 @@
     },
     {
       "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/exhibition/tooltip) for more details.",
+      "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",
@@ -2091,7 +2091,7 @@
         {
           "name": "position",
           "default": "bottom",
-          "description": "Position of the popover.\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",
           "type": "string",
           "values": [
             {
@@ -2152,7 +2152,7 @@
     },
     {
       "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/exhibition/badge) for more details.",
+      "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",
@@ -2181,7 +2181,7 @@
     },
     {
       "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/surface/card) for more details.",
+      "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",
@@ -2225,7 +2225,7 @@
     },
     {
       "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/exhibition/divider) for more details.",
+      "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",
@@ -2388,7 +2388,7 @@
     },
     {
       "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/exhibition/status) for more details.",
+      "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",
@@ -2466,7 +2466,7 @@
     },
     {
       "name": "rarui-button",
-      "description": "## Rarui 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/input/button) for more details.",
+      "description": "## Rarui 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",
@@ -2567,7 +2567,7 @@
     },
     {
       "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/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\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/input/checkbox) for more details.",
       "attributes": [
         {
           "name": "label",
@@ -2606,7 +2606,7 @@
     },
     {
       "name": "rarui-chip",
-      "description": "## Rarui Chip\n---\nChip component helps people enter information, make selections, filter content or trigger actions.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components/input/button) for more details.",
+      "description": "## Rarui Chip\n---\nChip component helps people enter information, make selections, filter content or trigger actions.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/input/button) for more details.",
       "attributes": [
         {
           "name": "closeable",
@@ -2691,9 +2691,226 @@
         }
       ]
     },
+    {
+      "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.",
+      "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",
+          "values": [
+            {
+              "name": "base",
+              "description": "(default)"
+            },
+            {
+              "name": "none"
+            }
+          ]
+        },
+        {
+          "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": "fit-content"
+            },
+            {
+              "name": "intrinsic"
+            },
+            {
+              "name": "max-content"
+            },
+            {
+              "name": "min-content"
+            },
+            {
+              "name": "min-intrinsic"
+            },
+            {
+              "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": "intrinsic"
+            },
+            {
+              "name": "max-content"
+            },
+            {
+              "name": "min-content"
+            },
+            {
+              "name": "none"
+            },
+            {
+              "name": "stretch"
+            }
+          ]
+        },
+        {
+          "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",
+          "values": [
+            {
+              "name": "$100"
+            },
+            {
+              "name": "$200"
+            },
+            {
+              "name": "$300"
+            },
+            {
+              "name": "$400"
+            },
+            {
+              "name": "$500"
+            },
+            {
+              "name": "$600"
+            },
+            {
+              "name": "$700"
+            },
+            {
+              "name": "$800"
+            },
+            {
+              "name": "$900"
+            }
+          ]
+        },
+        {
+          "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",
+          "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"
+            }
+          ]
+        },
+        {
+          "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",
+          "type": "string",
+          "values": [
+            {
+              "name": "absolute"
+            },
+            {
+              "name": "fixed",
+              "description": "(default)"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "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": "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/input/button) for more details.",
+      "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",
@@ -2775,7 +2992,7 @@
     },
     {
       "name": "rarui-radio-button",
-      "description": "## Rarui Radio Button\n---\nRadio Button allows users to select one option from a set. They are a selection control that usually appears when users are asked to make decisions or select an option from a set of choices.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components/input/radiobutton) for more details.",
+      "description": "## Rarui Radio Button\n---\nRadio Button allows users to select one option from a set. They are a selection control that usually appears when users are asked to make decisions or select an option from a set of choices.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/input/radiobutton) for more details.",
       "attributes": [
         {
           "name": "selected",
@@ -2820,7 +3037,7 @@
     },
     {
       "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/input/textarea) for more details.",
+      "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",
@@ -2851,7 +3068,7 @@
     },
     {
       "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/input/toggle) for more details.",
+      "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",
@@ -2904,7 +3121,7 @@
     },
     {
       "name": "rarui-box",
-      "description": "## Rarui Box\n---\nA low-level `utility` component that provides stylized system accessories to allow for custom styling with theme reconfection.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components/layout/box) for more details.",
+      "description": "## Rarui Box\n---\nA low-level `utility` component that provides stylized system accessories to allow for custom styling with theme reconfection.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/layout/box) for more details.",
       "attributes": [
         {
           "name": "background-color",
@@ -6694,7 +6911,7 @@
     },
     {
       "name": "rarui-link",
-      "description": "## Rarui Link\n---\nA link (abbreviation of hyperlink) is an html object that allows you to jump to a new location when clicking or playing it\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components/navigation/link) for more details.",
+      "description": "## Rarui Link\n---\nA link (abbreviation of hyperlink) is an html object that allows you to jump to a new location when clicking or playing it\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/navigation/link) for more details.",
       "attributes": [
         {
           "name": "appearance",
@@ -6773,9 +6990,55 @@
         }
       ]
     },
+    {
+      "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.",
+          "type": "number"
+        },
+        {
+          "name": "active-page",
+          "description": "The currently selected page.",
+          "type": "number"
+        },
+        {
+          "name": "size",
+          "default": "large",
+          "description": "Specifies the size of the Pagination component.\n\n- dot\n- large\n- small",
+          "type": "string",
+          "values": [
+            {
+              "name": "dot"
+            },
+            {
+              "name": "large",
+              "description": "(default)"
+            },
+            {
+              "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"
+        }
+      ]
+    },
     {
       "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/navigation/tabs) for more details.",
+      "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",
@@ -6819,7 +7082,7 @@
     },
     {
       "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/surface/banner) for more details.",
+      "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": "appearance",
@@ -6864,7 +7127,7 @@
     },
     {
       "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/surface/card) for more details.",
+      "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",
@@ -6905,12 +7168,12 @@
     },
     {
       "name": "rarui-card-body",
-      "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/surface/card) for more details.",
+      "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": "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/surface/card) for more details.",
+      "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",