@rarui/components 1.14.0 → 1.15.0

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 `@rarui/components` components is a component library built with [Lit](https://lit.dev/).
 
+## 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.14.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",
@@ -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",
@@ -2693,7 +2693,7 @@
     },
     {
       "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 +2775,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 +2820,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 +2851,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 +2904,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 +6694,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 +6773,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 +6865,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 +6910,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 +6951,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",

package/dist/index.d.ts

@@ -17324,6 +17324,54 @@ interface CardSprinkle {
     backgroundColor?: AddDollar<keyof typeof cardBackgroundColorProperties> | Conditions<AddDollar<keyof typeof cardBackgroundColorProperties>>;
 }
 
+declare const paginationStyles: {
+    container: RuntimeFn<{
+        size: {
+            dot: {
+                gap: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+            small: {};
+            large: {};
+        };
+    }>;
+    item: RuntimeFn<{
+        selected: {
+            true: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+                color: `var(--${string})` | `var(--${string}, ${string})`;
+                ":hover": {
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+                    color: `var(--${string})` | `var(--${string}, ${string})`;
+                };
+            };
+        };
+        /**
+         * Specifies the size of the Pagination component.
+         * @default large
+         */
+        size: {
+            dot: {
+                width: "0.75rem";
+                height: "0.75rem";
+                borderRadius: `var(--${string})` | `var(--${string}, ${string})`;
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+            small: {
+                minWidth: "2.5rem";
+                height: "2.5rem";
+                fontSize: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+            large: {
+                minWidth: "2.75rem";
+                height: "2.75rem";
+                fontSize: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+        };
+    }>;
+};
+
+type PaginationVariants = Omit<NonNullable<RecipeVariants<typeof paginationStyles.item>>, "selected">;
+
 declare const stepperStyles: {
     stepper: RuntimeFn<{
         /**
@@ -17650,6 +17698,33 @@ interface CardHeaderProps {
 
 type LinkProps = LinkVariants;
 
+interface PaginationTyping {
+    /**
+     * The currently selected page.
+     */
+    activePage: number;
+    /**
+     * The total number of pages.
+     */
+    pageCount: number;
+    /**
+     * Determines whether page numbers should be shown.
+     * @default true
+     */
+    showNumbers?: boolean;
+    /**
+     * Determines whether page arrows should be shown.
+     * @default true
+     */
+    showArrows?: boolean;
+    /**
+     * Called with event and page number when a page is clicked.
+     * @TJS-type (page: number) => void;
+     */
+    onPageChange: (page: number) => void;
+}
+type PaginationProps = PaginationTyping & PaginationVariants;
+
 declare global {
     interface HTMLElementTagNameMap {
         "rarui-avatar": RaruiAvatar;
@@ -17660,7 +17735,7 @@ declare global {
  * ---
  * The Avatar component is normally used to display circular photos of the user's profile.
  *
- * See [a complete document](https://rarui.rarolabs.com.br/docs/components/exhibition/avatar) for more details.
+ See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/exhibition/avatar) for more details.
  */
 type AvatarProperties = Pick<AvatarProps, "size">;
 
@@ -17680,7 +17755,7 @@ declare global {
  * ---
  * The Badge components are only used to transmit dynamic information, such as a connection or status.
  *
- * See [a complete document](https://rarui.rarolabs.com.br/docs/components/exhibition/badge) for more details.
+ See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/exhibition/badge) for more details.
  */
 type BadgeProperties = Partial<BadgeProps>;
 
@@ -17702,7 +17777,7 @@ declare global {
  * ---
  * A Divider is a thin line used to separate or group content in lists and layouts.
  *
- * See [a complete document](https://rarui.rarolabs.com.br/docs/components/exhibition/divider) for more details.
+ See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/exhibition/divider) for more details.
  */
 type DividerProperties = Partial<DividerProps>;
 
@@ -17729,7 +17804,7 @@ declare global {
  * ---
  * Iconography used in the system based on Google's Material Design.
  *
- * See [a complete document](https://rarui.rarolabs.com.br/docs/components/exhibition/icon) for more details.
+ See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/exhibition/icon) for more details.
  */
 type Sizes = "small" | "medium" | "large";
 type IconProperties = IconProps & {
@@ -17763,7 +17838,7 @@ declare global {
  * ---
  * The label component allows us to name elements within a form.
  *
- * See [a complete document](https://rarui.rarolabs.com.br/docs/components/exhibition/label) for more details.
+ See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/exhibition/label) for more details.
  */
 type LabelProperties = Partial<LabelProps>;
 
@@ -17784,7 +17859,7 @@ declare global {
  * ---
  * Stepper transmit progress through steps.
  *
- * See [a complete document](https://rarui.rarolabs.com.br/docs/components/exhibition/stepper) for more details.
+ See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/exhibition/stepper) for more details.
  */
 type StepperStepProperties = Partial<StepperStepProps>;
 
@@ -17808,7 +17883,7 @@ declare global {
  * ---
  * Stepper transmit progress through steps.
  *
- * See [a complete document](https://rarui.rarolabs.com.br/docs/components/exhibition/stepper) for more details.
+ See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/exhibition/stepper) for more details.
  */
 type StepperProperties = Partial<StepperProps>;
 
@@ -17831,7 +17906,7 @@ declare global {
  * ---
  * Text 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.
  *
- * See [a complete document](https://rarui.rarolabs.com.br/docs/components/exhibition/typography) for more details.
+ See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/exhibition/typography) for more details.
  */
 type TextProperties = Omit<TextProps, "as">;
 
@@ -17855,7 +17930,7 @@ declare global {
  * ---
  * Tilte is a basic component that allows you to give titles and more hierarchy to blocks of text for sections or header components.
  *
- * See [a complete document](https://rarui.rarolabs.com.br/docs/components/exhibition/typography) for more details.
+ See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/exhibition/typography) for more details.
  */
 type TitleProperties = Partial<TitleProps>;
 
@@ -17890,7 +17965,7 @@ declare global {
  * ---
  * Tooltips are informative, specific, and action-oriented text labels that provide contextual support
  *
- * See [a complete document](https://rarui.rarolabs.com.br/docs/components/exhibition/tooltip) for more details.
+ See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/exhibition/tooltip) for more details.
  */
 type TooltipProperties = Partial<Omit<TooltipProps, "visible" | "onVisibility" | "portalId">> & {
     /**
@@ -17955,7 +18030,7 @@ declare global {
  * ---
  * The Card component contains textual content, images, and actions about a topic.
  *
- * See [a complete document](https://rarui.rarolabs.com.br/docs/components/surface/card) for more details.
+ See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/surface/card) for more details.
  */
 type ProgressCircleProperties = Partial<ProgressCircleProps>;
 
@@ -17977,7 +18052,7 @@ declare global {
  * ---
  * The Badge components are only used to transmit dynamic information, such as a connection or status.
  *
- * See [a complete document](https://rarui.rarolabs.com.br/docs/components/exhibition/badge) for more details.
+ See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/exhibition/badge) for more details.
  */
 type ProgressProperties = Partial<ProgressProps>;
 
@@ -17999,7 +18074,7 @@ declare global {
  * Visual indicator that shows the current status or situation of an item or process.
  * Useful for providing fast and understandable feedback to users.
  *
- * See [a complete document](https://rarui.rarolabs.com.br/docs/components/exhibition/status) for more details.
+ See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/exhibition/status) for more details.
  */
 type StatusProperties = Partial<StatusProps>;
 
@@ -18023,7 +18098,7 @@ declare global {
  * ---
  * Button allows the user to perform actions, such as sending a file, advancing a form, sharing a document, or making a comment.
  *
- * See [a complete document](https://rarui.rarolabs.com.br/docs/components/input/button) for more details.
+ See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/input/button) for more details.
  */
 type ButtonProperties = Partial<ButtonProps> & {
     /**
@@ -18055,7 +18130,7 @@ declare global {
  * ---
  * The Checkbox allows users to select one or more items from a set and can be used to enable or disable an option.
  *
- * See [a complete document](https://rarui.rarolabs.com.br/docs/components/input/checkbox) for more details.
+ See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/input/checkbox) for more details.
  */
 type CheckboxProperties = Partial<CheckboxProps>;
 
@@ -18080,7 +18155,7 @@ declare global {
  * ---
  * Chip component helps people enter information, make selections, filter content or trigger actions.
  *
- * See [a complete document](https://rarui.rarolabs.com.br/docs/components/input/button) for more details.
+ See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/input/button) for more details.
  */
 type ChipProperties = Partial<ChipProps> & {
     /**
@@ -18116,7 +18191,7 @@ declare global {
  * ---
  * Button allows the user to perform actions, such as sending a file, advancing a form, sharing a document, or making a comment.
  *
- * See [a complete document](https://rarui.rarolabs.com.br/docs/components/input/button) for more details.
+ See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/input/button) for more details.
  */
 type IconButtonProperties = Partial<IconButtonProps>;
 
@@ -18140,7 +18215,7 @@ declare global {
  * ---
  * Radio 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.
  *
- * See [a complete document](https://rarui.rarolabs.com.br/docs/components/input/radiobutton) for more details.
+ See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/input/radiobutton) for more details.
  */
 type RadioButtonProperties = Partial<RadioButtonProps> & {
     /**
@@ -18178,7 +18253,7 @@ declare global {
  * ---
  * Expanded text area for long text entries. Allows you to enter large blocks of text, such as comments or detailed descriptions.
  *
- * See [a complete document](https://rarui.rarolabs.com.br/docs/components/input/textarea) for more details.
+ See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/input/textarea) for more details.
  */
 type TextareaProperties = Partial<TextareaProps> & {
     /**
@@ -18208,7 +18283,7 @@ declare global {
  * ---
  * Toggle switches activate or deactivate the state of a single item.
  *
- * See [a complete document](https://rarui.rarolabs.com.br/docs/components/input/toggle) for more details.
+ See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/input/toggle) for more details.
  */
 type ToggleProperties = Partial<ToggleProps> & {
     /**
@@ -18246,7 +18321,7 @@ declare global {
  * ---
  * A link (abbreviation of hyperlink) is an html object that allows you to jump to a new location when clicking or playing it
  *
- * See [a complete document](https://rarui.rarolabs.com.br/docs/components/navigation/link) for more details.
+ See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/navigation/link) for more details.
  */
 type LinkProperties = Partial<LinkProps> & {
     /**
@@ -18288,6 +18363,31 @@ declare class RaruiLink extends LitElement {
     render(): TemplateResult<1>;
 }
 
+declare global {
+    interface HTMLElementTagNameMap {
+        "rarui-pagination": RaruiPagination;
+    }
+}
+/**
+ * ## Rarui Pagination
+ * ---
+ * The pagination component allows the user to select a specific page in a page range.
+ *
+ * See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/navigation/pagination) for more details.
+ */
+type PaginationProperties = Partial<Omit<PaginationProps, "onPageChange">>;
+
+declare class RaruiPagination extends LitElement {
+    activePage: PaginationProperties["activePage"];
+    pageCount: PaginationProperties["pageCount"];
+    size?: PaginationProperties["size"];
+    showNumbers: PaginationProperties["showNumbers"];
+    showArrows: PaginationProperties["showArrows"];
+    static styles: CSSResult;
+    private handlePageChange;
+    render(): TemplateResult<1>;
+}
+
 declare global {
     interface HTMLElementTagNameMap {
         "rarui-banner": RaruiBanner;
@@ -18298,7 +18398,7 @@ declare global {
  * ---
  * Banner messages are displayed to the user at the top of the window/screen.
  *
- * See [a complete document](https://rarui.rarolabs.com.br/docs/components/surface/banner) for more details.
+ See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/surface/banner) for more details.
  */
 type BannerProperties = Partial<Pick<BannerProps, "appearance" | "floating">> & {
     /**
@@ -18329,7 +18429,7 @@ declare global {
  * ---
  * The Card component contains textual content, images, and actions about a topic.
  *
- * See [a complete document](https://rarui.rarolabs.com.br/docs/components/surface/card) for more details.
+ See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/surface/card) for more details.
  */
 type CardHeaderProperties = Partial<CardHeaderProps>;
 
@@ -18350,7 +18450,7 @@ declare global {
  * ---
  * The Card component contains textual content, images, and actions about a topic.
  *
- * See [a complete document](https://rarui.rarolabs.com.br/docs/components/surface/card) for more details.
+ See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/surface/card) for more details.
  */
 type CardProperties = Partial<CardProps>;