@rarui/components 1.11.0 → 1.12.0

package/CHANGELOG.md

@@ -2,7 +2,14 @@
 
 `@rarui/components` components is a component library built with [Stencil](https://stenciljs.com/docs/introduction).
 
-## 2025-06-17 `1.8.0`
+## 2025-06-18 `1.12.0`
+
+#### 🎉 New features
+
+- Added new feedback `Status` component. ([#119](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/119) by [@junior](https://git.rarolabs.com.br/junior))
+- Added new navigation `Link` component. ([#119](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/119) by [@junior](https://git.rarolabs.com.br/junior))
+
+## 2025-06-17 `1.11.0`
 
 #### 🎉 New features
 

package/custom-elements.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.10.0",
+  "version": "1.11.0",
   "tags": [
     {
       "name": "rarui-avatar",
@@ -2369,6 +2369,84 @@
         }
       ]
     },
+    {
+      "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.",
+      "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"
+        },
+        {
+          "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"
+        },
+        {
+          "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",
+          "type": "string",
+          "values": [
+            {
+              "name": "danger"
+            },
+            {
+              "name": "info"
+            },
+            {
+              "name": "inverted"
+            },
+            {
+              "name": "neutral"
+            },
+            {
+              "name": "success",
+              "description": "(default)"
+            },
+            {
+              "name": "warning"
+            }
+          ]
+        },
+        {
+          "name": "size",
+          "default": "normal",
+          "description": "Specifies the size of the badge, controlling its dimensions.\n\n- normal\n- small",
+          "type": "string",
+          "values": [
+            {
+              "name": "normal",
+              "description": "(default)"
+            },
+            {
+              "name": "small"
+            }
+          ]
+        },
+        {
+          "name": "variant",
+          "default": "solid",
+          "description": "Specifies the variant of the status\n\n- solid\n- subdued\n- text",
+          "type": "string",
+          "values": [
+            {
+              "name": "solid",
+              "description": "(default)"
+            },
+            {
+              "name": "subdued"
+            },
+            {
+              "name": "text"
+            }
+          ]
+        }
+      ]
+    },
     {
       "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.",
@@ -6544,6 +6622,87 @@
         }
       ]
     },
+    {
+      "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.",
+      "attributes": [
+        {
+          "name": "appearance",
+          "default": "brand",
+          "description": "Determines the visual style of the link.\n\n- brand\n- inverted\n- neutral",
+          "type": "string",
+          "values": [
+            {
+              "name": "brand",
+              "description": "(default)"
+            },
+            {
+              "name": "inverted"
+            },
+            {
+              "name": "neutral"
+            }
+          ]
+        },
+        {
+          "name": "size",
+          "default": "large",
+          "description": "Specifies the size of the link.\n\n- large\n- medium\n- small",
+          "type": "string",
+          "values": [
+            {
+              "name": "large",
+              "description": "(default)"
+            },
+            {
+              "name": "medium"
+            },
+            {
+              "name": "small"
+            }
+          ]
+        },
+        {
+          "name": "type",
+          "description": "Defines the native type of the button.\nIt can be `Button`, `submit` or `reset`.\n\n** IMPORTANT: ** should only be used when `as=\"button\"`.\n\n- button\n- reset\n- submit",
+          "type": "string",
+          "values": [
+            {
+              "name": "button"
+            },
+            {
+              "name": "reset"
+            },
+            {
+              "name": "submit"
+            }
+          ]
+        },
+        {
+          "name": "disabled",
+          "description": "Disable the button, preventing user interactions.\n\n** IMPORTANT: ** should only be used when `as=\"button\"`.",
+          "type": "boolean"
+        },
+        {
+          "name": "as",
+          "description": "Define or rendered element type.\n\n- `a`: renders an element `<a>`, ideal for navigation.\n- `Button`: render an element `<Button>`, ideal for actions.\n\n- a\n- button",
+          "type": "string",
+          "values": [
+            {
+              "name": "a"
+            },
+            {
+              "name": "button"
+            }
+          ]
+        },
+        {
+          "name": "href",
+          "description": "Defines the destination URL of the link.\n\n** IMPORTANT: ** should only be used when `as=\"a\"`.",
+          "type": "string"
+        }
+      ]
+    },
     {
       "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.",

package/dist/index.d.ts

@@ -1,3 +1,88 @@
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+/** TemplateResult types */
+declare const HTML_RESULT = 1;
+declare const SVG_RESULT = 2;
+declare const MATHML_RESULT = 3;
+type ResultType = typeof HTML_RESULT | typeof SVG_RESULT | typeof MATHML_RESULT;
+/**
+ * The return type of the template tag functions, {@linkcode html} and
+ * {@linkcode svg} when it hasn't been compiled by @lit-labs/compiler.
+ *
+ * A `TemplateResult` object holds all the information about a template
+ * expression required to render it: the template strings, expression values,
+ * and type of template (html or svg).
+ *
+ * `TemplateResult` objects do not create any DOM on their own. To create or
+ * update DOM you need to render the `TemplateResult`. See
+ * [Rendering](https://lit.dev/docs/components/rendering) for more information.
+ *
+ */
+type UncompiledTemplateResult<T extends ResultType = ResultType> = {
+    ['_$litType$']: T;
+    strings: TemplateStringsArray;
+    values: unknown[];
+};
+/**
+ * The return type of the template tag functions, {@linkcode html} and
+ * {@linkcode svg}.
+ *
+ * A `TemplateResult` object holds all the information about a template
+ * expression required to render it: the template strings, expression values,
+ * and type of template (html or svg).
+ *
+ * `TemplateResult` objects do not create any DOM on their own. To create or
+ * update DOM you need to render the `TemplateResult`. See
+ * [Rendering](https://lit.dev/docs/components/rendering) for more information.
+ *
+ * In Lit 4, this type will be an alias of
+ * MaybeCompiledTemplateResult, so that code will get type errors if it assumes
+ * that Lit templates are not compiled. When deliberately working with only
+ * one, use either {@linkcode CompiledTemplateResult} or
+ * {@linkcode UncompiledTemplateResult} explicitly.
+ */
+type TemplateResult<T extends ResultType = ResultType> = UncompiledTemplateResult<T>;
+/**
+ * Object specifying options for controlling lit-html rendering. Note that
+ * while `render` may be called multiple times on the same `container` (and
+ * `renderBefore` reference node) to efficiently update the rendered content,
+ * only the options passed in during the first render are respected during
+ * the lifetime of renders to that unique `container` + `renderBefore`
+ * combination.
+ */
+interface RenderOptions {
+    /**
+     * An object to use as the `this` value for event listeners. It's often
+     * useful to set this to the host component rendering a template.
+     */
+    host?: object;
+    /**
+     * A DOM node before which to render content in the container.
+     */
+    renderBefore?: ChildNode | null;
+    /**
+     * Node used for cloning the template (`importNode` will be called on this
+     * node). This controls the `ownerDocument` of the rendered DOM, along with
+     * any inherited context. Defaults to the global `document`.
+     */
+    creationScope?: {
+        importNode(node: Node, deep?: boolean): Node;
+    };
+    /**
+     * The initial connected state for the top-level part being rendered. If no
+     * `isConnected` option is set, `AsyncDirective`s will be connected by
+     * default. Set to `false` if the initial render occurs in a disconnected tree
+     * and `AsyncDirective`s should see `isConnected === false` for their initial
+     * render. The `part.setConnected()` method must be used subsequent to initial
+     * render to change the connected state of the part.
+     */
+    isConnected?: boolean;
+}
+
 /**
  * A CSSResult or native CSSStyleSheet.
  *
@@ -829,49 +914,6 @@ declare abstract class ReactiveElement extends HTMLElement implements ReactiveCo
     protected firstUpdated(_changedProperties: PropertyValues): void;
 }
 
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-
-/**
- * Object specifying options for controlling lit-html rendering. Note that
- * while `render` may be called multiple times on the same `container` (and
- * `renderBefore` reference node) to efficiently update the rendered content,
- * only the options passed in during the first render are respected during
- * the lifetime of renders to that unique `container` + `renderBefore`
- * combination.
- */
-interface RenderOptions {
-    /**
-     * An object to use as the `this` value for event listeners. It's often
-     * useful to set this to the host component rendering a template.
-     */
-    host?: object;
-    /**
-     * A DOM node before which to render content in the container.
-     */
-    renderBefore?: ChildNode | null;
-    /**
-     * Node used for cloning the template (`importNode` will be called on this
-     * node). This controls the `ownerDocument` of the rendered DOM, along with
-     * any inherited context. Defaults to the global `document`.
-     */
-    creationScope?: {
-        importNode(node: Node, deep?: boolean): Node;
-    };
-    /**
-     * The initial connected state for the top-level part being rendered. If no
-     * `isConnected` option is set, `AsyncDirective`s will be connected by
-     * default. Set to `false` if the initial render occurs in a disconnected tree
-     * and `AsyncDirective`s should see `isConnected === false` for their initial
-     * render. The `part.setConnected()` method must be used subsequent to initial
-     * render to change the connected state of the part.
-     */
-    isConnected?: boolean;
-}
-
 /**
  * @license
  * Copyright 2017 Google LLC
@@ -16750,6 +16792,49 @@ declare const iconButtonStyles: {
 
 type IconButtonVariants = NonNullable<RecipeVariants<typeof iconButtonStyles.iconButton>>;
 
+declare const styles$4: {
+    link: RuntimeFn<{
+        /**
+         * Determines the visual style of the link.
+         * @default brand
+         */
+        appearance: {
+            brand: {
+                color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            neutral: {
+                color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            inverted: {
+                color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+        };
+        /**
+         * Specifies the size of the link.
+         * @default large
+         */
+        size: {
+            large: {
+                fontSize: "1.125rem";
+                lineHeight: "1.75rem";
+                letterSpacing: ".0112rem";
+            };
+            small: {
+                fontSize: ".875rem";
+                lineHeight: "1.25rem";
+                letterSpacing: ".0088rem";
+            };
+            medium: {
+                fontSize: "1rem";
+                lineHeight: "1.5rem";
+                letterSpacing: ".01rem";
+            };
+        };
+    }>;
+};
+
+type LinkVariants = NonNullable<RecipeVariants<typeof styles$4.link>>;
+
 declare const progressStyles: {
     progress: string;
     bar: string;
@@ -16858,6 +16943,91 @@ declare const styles$3: {
 
 type RadioButtonVariants = NonNullable<RecipeVariants<typeof styles$3.radioButton>>;
 
+declare const statusStyles: {
+    status: RuntimeFn<{
+        /**
+         * Specifies whether the status should take up the full width of its container.
+         * This variant is useful when you want to make a status span the entire width of its parent container.
+         * @default false
+         *
+         */
+        full: {
+            true: {
+                width: "100%";
+            };
+        };
+        /**
+         * Determines the visual style of the status, influencing its color scheme.
+         * @default success
+         */
+        appearance: {
+            success: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            warning: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            danger: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            inverted: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            neutral: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            info: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+        };
+        /**
+         * Specifies the size of the badge, controlling its dimensions.
+         * @default normal
+         */
+        size: {
+            normal: {
+                height: "1.75rem";
+                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            small: {
+                height: "1.5rem";
+                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+        };
+        /**
+         * Specifies the variant of the status
+         * @default solid
+         */
+        variant: {
+            solid: {};
+            text: {
+                backgroundColor: "transparent";
+            };
+            subdued: {};
+        };
+    }>;
+    dot: RuntimeFn<{
+        size: {
+            normal: {
+                height: ".5rem";
+                width: ".5rem";
+            };
+            small: {
+                height: ".25rem";
+                width: ".25rem";
+            };
+        };
+    }>;
+};
+
+type StatusVariants = NonNullable<RecipeVariants<typeof statusStyles.status>>;
+
 declare const textareaStyles: {
     textarea: RuntimeFn<{
         /**
@@ -17175,6 +17345,15 @@ type ProgressProps = ProgressTyping & ProgressSprinkle;
 
 type ProgressCircleProps = ProgressProps & ProgressVariants;
 
+interface StatusTyping {
+    /**
+     * Specifies whether to display a dot indicator alongside the status text. When true, a dot is shown to visually represent the status.
+     * @default true
+     */
+    dot?: boolean;
+}
+type StatusProps = StatusTyping & StatusVariants;
+
 interface ButtonTyping {
     /**
      * Disables the button, disallowing user interaction.
@@ -17247,6 +17426,8 @@ interface CardHeaderProps {
     description?: string;
 }
 
+type LinkProps = LinkVariants;
+
 declare global {
     interface HTMLElementTagNameMap {
         "rarui-avatar": RaruiAvatar;
@@ -17314,7 +17495,7 @@ declare class RaruiDivider extends LitElement {
     render(): TemplateResult<1>;
 }
 
-type IconName = "add-circle-filled" | "add-circle-outlined" | "alarm-filled" | "alarm-outlined" | "alternate-email" | "archive-all-filled" | "archive-all-outlined" | "archive-filled" | "archive-in-filled" | "archive-in-outlined" | "archive-outlined" | "arrow-alt-down" | "arrow-alt-left" | "arrow-alt-right" | "arrow-alt-up" | "arrow-circle-down-filled" | "arrow-circle-down-outlined" | "arrow-circle-up-filled" | "arrow-circle-up-outlined" | "arrow-circled-down-circle-outlined" | "arrow-circled-down-filled" | "arrow-circled-up-circle-outlined" | "arrow-direction-down-up" | "arrow-direction-left-right" | "arrow-direction-right-left" | "arrow-direction-up-down" | "arrow-directions" | "arrow-down" | "arrow-down-left" | "arrow-down-right" | "arrow-first-page" | "arrow-last-page" | "arrow-left" | "arrow-line-down" | "arrow-line-left" | "arrow-line-long-down" | "arrow-line-long-left" | "arrow-line-long-right" | "arrow-line-long-up" | "arrow-line-right" | "arrow-line-up" | "arrow-right" | "arrow-subdirectory-left" | "arrow-subdirectory-right" | "arrow-trending-down" | "arrow-trending-up" | "arrow-up" | "arrow-up-left" | "arrow-up-right" | "attachment" | "backspace" | "backspace-outlined" | "barley" | "barley-off" | "bolt-circle-filled" | "bolt-circle-outlined" | "bookmark-filled" | "bookmark-outlined" | "calendar-date-range-filled" | "calendar-date-range-outlined" | "calendar-event-filled" | "calendar-event-outlined" | "calendar-filled" | "calendar-outlined" | "camera-filled" | "camera-outlined" | "camera-shutter-filled" | "camera-shutter-outlined" | "cancel-circle-filled" | "cancel-circle-outlined" | "car-filled" | "car-outlined" | "chart-bars-filled" | "chart-bars-outlined" | "chat-bubble-filled" | "chat-bubble-outlined" | "chat-message-filled" | "chat-message-outlined" | "check" | "check-circle-filled" | "check-circle-outlined" | "check-small" | "chevron-big-down" | "chevron-big-left" | "chevron-big-right" | "chevron-big-up" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "clock-filled" | "clock-outlined" | "close" | "cloud-filled" | "cloud-outlined" | "contact-support-filled" | "contact-support-outlined" | "content-copy-filled" | "content-copy-outlined" | "content-paste-filled" | "content-paste-outlined" | "conversation-filled" | "conversation-outlined" | "copyright-filled" | "copyright-outlined" | "credit-card-filled" | "credit-card-outlined" | "danger-filled" | "danger-outlined" | "dashboard-filled" | "dashboard-outlined" | "document-filled" | "document-outlined" | "document-text-filled" | "document-text-outlined" | "download-filled" | "download-outlined" | "eco-filled" | "eco-outlined" | "edit-filled" | "edit-outlined" | "euro-symbol" | "exit-fullscreen" | "eye-filled" | "eye-off-filled" | "eye-off-outlined" | "eye-outlined" | "facebook-filled" | "facebook-outlined" | "file-copy-filled" | "file-copy-outlined" | "filter-alt-filled" | "filter-alt-outlined" | "filter-list" | "fingerprint" | "flag-filled" | "flag-outlined" | "flag-tour-filled" | "flag-tour-outlined" | "flower-filled" | "flower-outlined" | "folder-filled" | "folder-list-filled" | "folder-list-outlined" | "folder-open" | "folder-outlined" | "fruit-apple-filled" | "fruit-apple-outlined" | "fullscreen-filled" | "fullscreen-outlined" | "google" | "google-play" | "headphones-filled" | "headphones-outlined" | "heart-filled" | "heart-outlined" | "help-filled" | "help-outlined" | "history" | "home-filled" | "home-outlined" | "image-filled" | "image-outlined" | "info-circle-filled" | "info-circle-outlined" | "instagram" | "instagram-outlined" | "label-filled" | "label-important-filled" | "label-important-outlined" | "label-outlined" | "language" | "lightbulb-filled" | "lightbulb-outlined" | "link" | "linkedin-filled" | "linkedin-outlined" | "loader" | "loading" | "lock-filled" | "lock-open-filled" | "lock-open-outlined" | "lock-outlined" | "login" | "logout" | "mail-filled" | "mail-open-filled" | "mail-open-outlined" | "mail-outlined" | "menu" | "menu-large" | "microphone-filled" | "microphone-outlined" | "minus" | "money-filled" | "money-outlined" | "mood-bad" | "mood-bad-outlined" | "mood-filled" | "mood-outlined" | "more-horiz" | "more-vert" | "music-note-filled" | "music-note-outlined" | "notification-filled" | "notification-outlined" | "open-in-new" | "package" | "package-outlined" | "pause-filled" | "pause-outlined" | "pets-filled" | "pets-outlined" | "phone-call-filled" | "phone-call-outlined" | "phone-filled" | "phone-outlined" | "pin-filled" | "pin-outlined" | "play-arrow-filled" | "play-arrow-outlined" | "play-circle-filled" | "play-circle-outlined" | "plus" | "power-settings-new" | "printer-filled" | "printer-outlined" | "push-pin-filled" | "push-pin-outlined" | "receipt-filled" | "receipt-outlined" | "recycle" | "redeem" | "redo" | "refresh" | "refresh-alt" | "remove" | "remove-circle-filled" | "remove-circle-outlined" | "repeat" | "reply" | "save-alt" | "screen-outlined" | "search" | "send-filled" | "send-outlined" | "sentiment-dissatisfied-filled" | "sentiment-dissatisfied-outlined" | "sentiment-neutral-filled" | "sentiment-neutral-outlined" | "sentiment-satisfied-filled" | "sentiment-satisfied-outlined" | "sentiment-very-dissatisfied-filled" | "sentiment-very-dissatisfied-outlined" | "sentiment-very-satisfied-filled" | "sentiment-very-satisfied-outlined" | "settings-filled" | "settings-outlined" | "share-filled" | "share-outlined" | "shopping-bag-filled" | "shopping-bag-outlined" | "shopping-cart-add" | "shopping-cart-filled" | "shopping-cart-outlined" | "sprout" | "sprout-outline-outlined" | "star-filled" | "star-outlined" | "stay-primary-portrait" | "storefront" | "tag-filled" | "tag-outlined" | "textsms-filled" | "textsms-outlined" | "thumb-down-filled" | "thumb-down-outlined" | "thumb-up-filled" | "thumb-up-outlined" | "tiktok" | "toc" | "trash-filled" | "trash-outlined" | "truck-filled" | "truck-outlined" | "tune" | "twitter" | "undo" | "upload-filled" | "upload-outlined" | "user-circle-filled" | "user-circle-outlined" | "user-filled" | "user-outlined" | "user-square-filled" | "user-square-outlined" | "users-filled" | "users-outlined" | "view-grid-filled" | "view-grid-outlined" | "view-list-filled" | "view-list-outlined" | "warning-bubble-filled" | "warning-bubble-outlined" | "warning-filled" | "warning-outlined" | "whatsapp-filled" | "whatsapp-outlined" | "work-filled" | "work-outlined" | "wysiwyg-filled" | "youtube-filled" | "youtube-outlined" | "zoom-in" | "zoom-out";
+type IconName = "phone-call-outlined" | "add-circle-filled" | "add-circle-outlined" | "alarm-filled" | "alarm-outlined" | "alternate-email" | "archive-all-filled" | "archive-all-outlined" | "archive-filled" | "archive-in-filled" | "archive-in-outlined" | "archive-outlined" | "arrow-alt-down" | "arrow-alt-left" | "arrow-alt-right" | "arrow-alt-up" | "arrow-circle-down-filled" | "arrow-circle-down-outlined" | "arrow-circle-up-filled" | "arrow-circle-up-outlined" | "arrow-circled-down-circle-outlined" | "arrow-circled-down-filled" | "arrow-circled-up-circle-outlined" | "arrow-direction-down-up" | "arrow-direction-left-right" | "arrow-direction-right-left" | "arrow-direction-up-down" | "arrow-directions" | "arrow-down" | "arrow-down-left" | "arrow-down-right" | "arrow-first-page" | "arrow-last-page" | "arrow-left" | "arrow-line-down" | "arrow-line-left" | "arrow-line-long-down" | "arrow-line-long-left" | "arrow-line-long-right" | "arrow-line-long-up" | "arrow-line-right" | "arrow-line-up" | "arrow-right" | "arrow-subdirectory-left" | "arrow-subdirectory-right" | "arrow-trending-down" | "arrow-trending-up" | "arrow-up" | "arrow-up-left" | "arrow-up-right" | "attachment" | "backspace" | "backspace-outlined" | "barley" | "barley-off" | "bolt-circle-filled" | "bolt-circle-outlined" | "bookmark-filled" | "bookmark-outlined" | "calendar-date-range-filled" | "calendar-date-range-outlined" | "calendar-event-filled" | "calendar-event-outlined" | "calendar-filled" | "calendar-outlined" | "camera-filled" | "camera-outlined" | "camera-shutter-filled" | "camera-shutter-outlined" | "cancel-circle-filled" | "cancel-circle-outlined" | "car-filled" | "car-outlined" | "chart-bars-filled" | "chart-bars-outlined" | "chat-bubble-filled" | "chat-bubble-outlined" | "chat-message-filled" | "chat-message-outlined" | "check" | "check-circle-filled" | "check-circle-outlined" | "check-small" | "chevron-big-down" | "chevron-big-left" | "chevron-big-right" | "chevron-big-up" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "clock-filled" | "clock-outlined" | "close" | "cloud-filled" | "cloud-outlined" | "contact-support-filled" | "contact-support-outlined" | "content-copy-filled" | "content-copy-outlined" | "content-paste-filled" | "content-paste-outlined" | "conversation-filled" | "conversation-outlined" | "copyright-filled" | "copyright-outlined" | "credit-card-filled" | "credit-card-outlined" | "danger-filled" | "danger-outlined" | "dashboard-filled" | "dashboard-outlined" | "document-filled" | "document-outlined" | "document-text-filled" | "document-text-outlined" | "download-filled" | "download-outlined" | "eco-filled" | "eco-outlined" | "edit-filled" | "edit-outlined" | "euro-symbol" | "exit-fullscreen" | "eye-filled" | "eye-off-filled" | "eye-off-outlined" | "eye-outlined" | "facebook-filled" | "facebook-outlined" | "file-copy-filled" | "file-copy-outlined" | "filter-alt-filled" | "filter-alt-outlined" | "filter-list" | "fingerprint" | "flag-filled" | "flag-outlined" | "flag-tour-filled" | "flag-tour-outlined" | "flower-filled" | "flower-outlined" | "folder-filled" | "folder-list-filled" | "folder-list-outlined" | "folder-open" | "folder-outlined" | "fruit-apple-filled" | "fruit-apple-outlined" | "fullscreen-filled" | "fullscreen-outlined" | "google" | "google-play" | "headphones-filled" | "headphones-outlined" | "heart-filled" | "heart-outlined" | "help-filled" | "help-outlined" | "history" | "home-filled" | "home-outlined" | "image-filled" | "image-outlined" | "info-circle-filled" | "info-circle-outlined" | "instagram" | "instagram-outlined" | "label-filled" | "label-important-filled" | "label-important-outlined" | "label-outlined" | "language" | "lightbulb-filled" | "lightbulb-outlined" | "link" | "linkedin-filled" | "linkedin-outlined" | "loader" | "loading" | "lock-filled" | "lock-open-filled" | "lock-open-outlined" | "lock-outlined" | "login" | "logout" | "mail-filled" | "mail-open-filled" | "mail-open-outlined" | "mail-outlined" | "menu" | "menu-large" | "microphone-filled" | "microphone-outlined" | "minus" | "money-filled" | "money-outlined" | "mood-bad" | "mood-bad-outlined" | "mood-filled" | "mood-outlined" | "more-horiz" | "more-vert" | "music-note-filled" | "music-note-outlined" | "notification-filled" | "notification-outlined" | "open-in-new" | "package" | "package-outlined" | "pause-filled" | "pause-outlined" | "pets-filled" | "pets-outlined" | "phone-call-filled" | "phone-filled" | "phone-outlined" | "pin-filled" | "pin-outlined" | "play-arrow-filled" | "play-arrow-outlined" | "play-circle-filled" | "play-circle-outlined" | "plus" | "power-settings-new" | "printer-filled" | "printer-outlined" | "push-pin-filled" | "push-pin-outlined" | "receipt-filled" | "receipt-outlined" | "recycle" | "redeem" | "redo" | "refresh" | "refresh-alt" | "remove" | "remove-circle-filled" | "remove-circle-outlined" | "repeat" | "reply" | "save-alt" | "screen-outlined" | "search" | "send-filled" | "send-outlined" | "sentiment-dissatisfied-filled" | "sentiment-dissatisfied-outlined" | "sentiment-neutral-filled" | "sentiment-neutral-outlined" | "sentiment-satisfied-filled" | "sentiment-satisfied-outlined" | "sentiment-very-dissatisfied-filled" | "sentiment-very-dissatisfied-outlined" | "sentiment-very-satisfied-filled" | "sentiment-very-satisfied-outlined" | "settings-filled" | "settings-outlined" | "share-filled" | "share-outlined" | "shopping-bag-filled" | "shopping-bag-outlined" | "shopping-cart-add" | "shopping-cart-filled" | "shopping-cart-outlined" | "sprout" | "sprout-outline-outlined" | "star-filled" | "star-outlined" | "stay-primary-portrait" | "storefront" | "tag-filled" | "tag-outlined" | "textsms-filled" | "textsms-outlined" | "thumb-down-filled" | "thumb-down-outlined" | "thumb-up-filled" | "thumb-up-outlined" | "tiktok" | "toc" | "trash-filled" | "trash-outlined" | "truck-filled" | "truck-outlined" | "tune" | "twitter" | "undo" | "upload-filled" | "upload-outlined" | "user-circle-filled" | "user-circle-outlined" | "user-filled" | "user-outlined" | "user-square-filled" | "user-square-outlined" | "users-filled" | "users-outlined" | "view-grid-filled" | "view-grid-outlined" | "view-list-filled" | "view-list-outlined" | "warning-bubble-filled" | "warning-bubble-outlined" | "warning-filled" | "warning-outlined" | "whatsapp-filled" | "whatsapp-outlined" | "work-filled" | "work-outlined" | "wysiwyg-filled" | "youtube-filled" | "youtube-outlined" | "zoom-in" | "zoom-out";
 
 declare global {
     interface HTMLElementTagNameMap {
@@ -17564,6 +17745,31 @@ declare class RaruiProgress extends LitElement {
     render(): TemplateResult<1>;
 }
 
+declare global {
+    interface HTMLElementTagNameMap {
+        "rarui-status": RaruiStatus;
+    }
+}
+/**
+ * ## Rarui Status
+ * ---
+ * 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.
+ */
+type StatusProperties = Partial<StatusProps>;
+
+declare class RaruiStatus extends LitElement {
+    appearance?: StatusProperties["appearance"];
+    size?: StatusProperties["size"];
+    variant?: StatusProperties["variant"];
+    full?: StatusProperties["full"];
+    dot: StatusProperties["dot"];
+    static styles: CSSResult;
+    render(): TemplateResult<1>;
+}
+
 declare global {
     interface HTMLElementTagNameMap {
         "rarui-button": RaruiButton;
@@ -17749,6 +17955,58 @@ declare class RaruiTextarea extends LitElement {
     private _onChange;
 }
 
+declare global {
+    interface HTMLElementTagNameMap {
+        "rarui-link": RaruiLink;
+    }
+}
+/**
+ * ## Rarui Link
+ * ---
+ * 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.
+ */
+type LinkProperties = Partial<LinkProps> & {
+    /**
+     * Defines the native type of the button.
+     * It can be `Button`, `submit` or `reset`.
+     *
+     * ** IMPORTANT: ** should only be used when `as="button"`.
+     */
+    type?: "button" | "submit" | "reset";
+    /**
+     * Disable the button, preventing user interactions.
+     *
+     * ** IMPORTANT: ** should only be used when `as="button"`.
+     */
+    disabled?: boolean;
+    /**
+     * Define or rendered element type.
+     *
+     * - `a`: renders an element `<a>`, ideal for navigation.
+     * - `Button`: render an element `<Button>`, ideal for actions.
+     */
+    as?: "a" | "button";
+    /**
+     * Defines the destination URL of the link.
+     *
+     * ** IMPORTANT: ** should only be used when `as="a"`.
+     */
+    href?: string;
+};
+
+declare class RaruiLink extends LitElement {
+    type: LinkProperties["type"];
+    as: LinkProperties["as"];
+    appearance?: LinkProperties["appearance"];
+    size?: LinkProperties["size"];
+    href?: LinkProperties["href"];
+    disabled: LinkProperties["disabled"];
+    static styles: CSSResult;
+    render(): TemplateResult<1>;
+}
+
 declare global {
     interface HTMLElementTagNameMap {
         "rarui-card-header": RaruiCardHeader;