@rarui/components 1.29.0 → 1.30.0

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 `@rarui/components` components is a component library built with [Lit](https://lit.dev/).
 
+## 2025-10-16 `1.30.0`
+
+#### 🎉 New features
+
+- **Button `as` Property**: Added `as` property to Button component allowing it to render as either `button` (default) or `a` elements. When `as="a"` is used, the component accepts `href` and `target` properties for link behavior while maintaining the same visual styling and click event handling. Form-related functionality (submit/reset) is only active when `as="button"`. ([#144](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/144) by [@junior](https://git.rarolabs.com.br/junior))
+- **Banner Success Appearance**: Added support for new `success` appearance variant in Banner component, providing visual feedback for successful operations with appropriate success colors. ([#144](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/144) by [@junior](https://git.rarolabs.com.br/junior))
+
+#### 🐛 Bug fixes
+
+- **Input Height Consistency**: Fixed input container height calculation by applying proper box-sizing to ensure consistent sizing across different border configurations. ([#144](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/144) by [@junior](https://git.rarolabs.com.br/junior))
+
+#### 💡 Others
+
+- **Inject CDN Script Enhancement**: Updated Storybook inject-cdn script to automatically manage both `globals.css` and `rarui-theme-dark.css` CDN links. The script now properly updates both stylesheets when package versions change, ensuring consistent theme support across Storybook development environments. ([#144](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/144) by [@junior](https://git.rarolabs.com.br/junior))
+
 ## 2025-10-09 `1.29.0`
 
 #### 🎉 New features

package/custom-elements.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.28.1",
+  "version": "1.29.0",
   "tags": [
     {
       "name": "rarui-avatar",
@@ -384,7 +384,7 @@
         },
         {
           "name": "name",
-          "description": "Name of the icon to be rendered (must be in the @rarui/icons package).\n\n- add-circle-filled\n- add-circle-outlined\n- alarm-filled\n- alarm-outlined\n- alternate-email\n- archive-all-filled\n- archive-all-outlined\n- archive-filled\n- archive-in-filled\n- archive-in-outlined\n- archive-outlined\n- arrow-alt-down\n- arrow-alt-left\n- arrow-alt-right\n- arrow-alt-up\n- arrow-circle-down-filled\n- arrow-circle-down-outlined\n- arrow-circle-up-filled\n- arrow-circle-up-outlined\n- arrow-circled-down-circle-outlined\n- arrow-circled-down-filled\n- arrow-circled-up-circle-outlined\n- arrow-direction-down-up\n- arrow-direction-left-right\n- arrow-direction-right-left\n- arrow-direction-up-down\n- arrow-directions\n- arrow-down\n- arrow-down-left\n- arrow-down-right\n- arrow-first-page\n- arrow-last-page\n- arrow-left\n- arrow-line-down\n- arrow-line-left\n- arrow-line-long-down\n- arrow-line-long-left\n- arrow-line-long-right\n- arrow-line-long-up\n- arrow-line-right\n- arrow-line-up\n- arrow-right\n- arrow-subdirectory-left\n- arrow-subdirectory-right\n- arrow-trending-down\n- arrow-trending-up\n- arrow-up\n- arrow-up-left\n- arrow-up-right\n- attachment\n- backspace\n- backspace-outlined\n- barley\n- barley-off\n- bolt-circle-filled\n- bolt-circle-outlined\n- bookmark-filled\n- bookmark-outlined\n- calendar-date-range-filled\n- calendar-date-range-outlined\n- calendar-event-filled\n- calendar-event-outlined\n- calendar-filled\n- calendar-outlined\n- camera-filled\n- camera-outlined\n- camera-shutter-filled\n- camera-shutter-outlined\n- cancel-circle-filled\n- cancel-circle-outlined\n- car-filled\n- car-outlined\n- chart-bars-filled\n- chart-bars-outlined\n- chat-bubble-filled\n- chat-bubble-outlined\n- chat-message-filled\n- chat-message-outlined\n- check\n- check-circle-filled\n- check-circle-outlined\n- check-small\n- chevron-big-down\n- chevron-big-left\n- chevron-big-right\n- chevron-big-up\n- chevron-down\n- chevron-left\n- chevron-right\n- chevron-up\n- clock-filled\n- clock-outlined\n- close\n- cloud-filled\n- cloud-outlined\n- contact-support-filled\n- contact-support-outlined\n- content-copy-filled\n- content-copy-outlined\n- content-paste-filled\n- content-paste-outlined\n- conversation-filled\n- conversation-outlined\n- copyright-filled\n- copyright-outlined\n- credit-card-filled\n- credit-card-outlined\n- danger-filled\n- danger-outlined\n- dashboard-filled\n- dashboard-outlined\n- document-filled\n- document-outlined\n- document-text-filled\n- document-text-outlined\n- download-filled\n- download-outlined\n- eco-filled\n- eco-outlined\n- edit-filled\n- edit-outlined\n- euro-symbol\n- exit-fullscreen\n- eye-filled\n- eye-off-filled\n- eye-off-outlined\n- eye-outlined\n- facebook-filled\n- facebook-outlined\n- file-copy-filled\n- file-copy-outlined\n- filter-alt-filled\n- filter-alt-outlined\n- filter-list\n- fingerprint\n- flag-filled\n- flag-outlined\n- flag-tour-filled\n- flag-tour-outlined\n- flower-filled\n- flower-outlined\n- folder-filled\n- folder-list-filled\n- folder-list-outlined\n- folder-open\n- folder-outlined\n- fruit-apple-filled\n- fruit-apple-outlined\n- fullscreen-filled\n- fullscreen-outlined\n- google\n- google-play\n- headphones-filled\n- headphones-outlined\n- heart-filled\n- heart-outlined\n- help-filled\n- help-outlined\n- history\n- home-filled\n- home-outlined\n- image-filled\n- image-outlined\n- info-circle-filled\n- info-circle-outlined\n- instagram\n- instagram-outlined\n- label-filled\n- label-important-filled\n- label-important-outlined\n- label-outlined\n- language\n- lightbulb-filled\n- lightbulb-outlined\n- link\n- linkedin-filled\n- linkedin-outlined\n- loader\n- loading\n- lock-filled\n- lock-open-filled\n- lock-open-outlined\n- lock-outlined\n- login\n- logout\n- mail-filled\n- mail-open-filled\n- mail-open-outlined\n- mail-outlined\n- menu\n- menu-large\n- microphone-filled\n- microphone-outlined\n- minus\n- money-filled\n- money-outlined\n- mood-bad\n- mood-bad-outlined\n- mood-filled\n- mood-outlined\n- more-horiz\n- more-vert\n- music-note-filled\n- music-note-outlined\n- notification-filled\n- notification-outlined\n- open-in-new\n- package\n- package-outlined\n- pause-filled\n- pause-outlined\n- pets-filled\n- pets-outlined\n- phone-call-filled\n- phone-call-outlined\n- phone-filled\n- phone-outlined\n- pin-filled\n- pin-outlined\n- play-arrow-filled\n- play-arrow-outlined\n- play-circle-filled\n- play-circle-outlined\n- plus\n- power-settings-new\n- printer-filled\n- printer-outlined\n- push-pin-filled\n- push-pin-outlined\n- receipt-filled\n- receipt-outlined\n- recycle\n- redeem\n- redo\n- refresh\n- refresh-alt\n- remove\n- remove-circle-filled\n- remove-circle-outlined\n- repeat\n- reply\n- save-alt\n- screen-outlined\n- search\n- send-filled\n- send-outlined\n- sentiment-dissatisfied-filled\n- sentiment-dissatisfied-outlined\n- sentiment-neutral-filled\n- sentiment-neutral-outlined\n- sentiment-satisfied-filled\n- sentiment-satisfied-outlined\n- sentiment-very-dissatisfied-filled\n- sentiment-very-dissatisfied-outlined\n- sentiment-very-satisfied-filled\n- sentiment-very-satisfied-outlined\n- settings-filled\n- settings-outlined\n- share-filled\n- share-outlined\n- shopping-bag-filled\n- shopping-bag-outlined\n- shopping-cart-add\n- shopping-cart-filled\n- shopping-cart-outlined\n- sprout\n- sprout-outline-outlined\n- star-filled\n- star-outlined\n- stay-primary-portrait\n- storefront\n- tag-filled\n- tag-outlined\n- textsms-filled\n- textsms-outlined\n- thumb-down-filled\n- thumb-down-outlined\n- thumb-up-filled\n- thumb-up-outlined\n- tiktok\n- toc\n- trash-filled\n- trash-outlined\n- truck-filled\n- truck-outlined\n- tune\n- twitter\n- undo\n- upload-filled\n- upload-outlined\n- user-circle-filled\n- user-circle-outlined\n- user-filled\n- user-outlined\n- user-square-filled\n- user-square-outlined\n- users-filled\n- users-outlined\n- view-grid-filled\n- view-grid-outlined\n- view-list-filled\n- view-list-outlined\n- warning-bubble-filled\n- warning-bubble-outlined\n- warning-filled\n- warning-outlined\n- whatsapp-filled\n- whatsapp-outlined\n- work-filled\n- work-outlined\n- wysiwyg-filled\n- youtube-filled\n- youtube-outlined\n- zoom-in\n- zoom-out\n\n(Required)",
+          "description": "Name of the icon to be rendered (must be in the @rarui/icons package).\n\n- add-circle-filled\n- add-circle-outlined\n- alarm-filled\n- alarm-outlined\n- alternate-email\n- archive-all-filled\n- archive-all-outlined\n- archive-filled\n- archive-in-filled\n- archive-in-outlined\n- archive-outlined\n- arrow-alt-down\n- arrow-alt-left\n- arrow-alt-right\n- arrow-alt-up\n- arrow-circle-down-filled\n- arrow-circle-down-outlined\n- arrow-circle-up-filled\n- arrow-circle-up-outlined\n- arrow-circled-down-circle-outlined\n- arrow-circled-down-filled\n- arrow-circled-up-circle-outlined\n- arrow-direction-down-up\n- arrow-direction-left-right\n- arrow-direction-right-left\n- arrow-direction-up-down\n- arrow-directions\n- arrow-down\n- arrow-down-left\n- arrow-down-right\n- arrow-first-page\n- arrow-last-page\n- arrow-left\n- arrow-line-down\n- arrow-line-left\n- arrow-line-long-down\n- arrow-line-long-left\n- arrow-line-long-right\n- arrow-line-long-up\n- arrow-line-right\n- arrow-line-up\n- arrow-right\n- arrow-subdirectory-left\n- arrow-subdirectory-right\n- arrow-trending-down\n- arrow-trending-up\n- arrow-up\n- arrow-up-left\n- arrow-up-right\n- attachment\n- backspace\n- backspace-outlined\n- barley\n- barley-off\n- bolt-circle-filled\n- bolt-circle-outlined\n- book-filled\n- book-outlined\n- bookmark-filled\n- bookmark-outlined\n- calendar-date-range-filled\n- calendar-date-range-outlined\n- calendar-event-filled\n- calendar-event-outlined\n- calendar-filled\n- calendar-outlined\n- camera-filled\n- camera-outlined\n- camera-shutter-filled\n- camera-shutter-outlined\n- cancel-circle-filled\n- cancel-circle-outlined\n- car-filled\n- car-outlined\n- chart-bars-filled\n- chart-bars-outlined\n- chat-bubble-filled\n- chat-bubble-outlined\n- chat-message-filled\n- chat-message-outlined\n- check\n- check-circle-filled\n- check-circle-outlined\n- check-small\n- chevron-big-down\n- chevron-big-left\n- chevron-big-right\n- chevron-big-up\n- chevron-down\n- chevron-left\n- chevron-right\n- chevron-up\n- clock-filled\n- clock-outlined\n- close\n- cloud-filled\n- cloud-outlined\n- contact-support-filled\n- contact-support-outlined\n- content-copy-filled\n- content-copy-outlined\n- content-paste-filled\n- content-paste-outlined\n- conversation-filled\n- conversation-outlined\n- copyright-filled\n- copyright-outlined\n- credit-card-filled\n- credit-card-outlined\n- danger-filled\n- danger-outlined\n- dashboard-filled\n- dashboard-outlined\n- document-filled\n- document-outlined\n- document-text-filled\n- document-text-outlined\n- download-filled\n- download-outlined\n- eco-filled\n- eco-outlined\n- edit-filled\n- edit-outlined\n- euro-symbol\n- exit-fullscreen\n- eye-filled\n- eye-off-filled\n- eye-off-outlined\n- eye-outlined\n- facebook-filled\n- facebook-outlined\n- file-copy-filled\n- file-copy-outlined\n- filter-alt-filled\n- filter-alt-outlined\n- filter-list\n- fingerprint\n- flag-filled\n- flag-outlined\n- flag-tour-filled\n- flag-tour-outlined\n- flower-filled\n- flower-outlined\n- folder-filled\n- folder-list-filled\n- folder-list-outlined\n- folder-open\n- folder-outlined\n- fruit-apple-filled\n- fruit-apple-outlined\n- fullscreen-filled\n- fullscreen-outlined\n- google\n- google-play\n- graduation-filled\n- graduation-outlined\n- headphones-filled\n- headphones-outlined\n- heart-filled\n- heart-outlined\n- help-filled\n- help-outlined\n- history\n- home-filled\n- home-outlined\n- image-filled\n- image-outlined\n- info-circle-filled\n- info-circle-outlined\n- instagram\n- instagram-outlined\n- label-filled\n- label-important-filled\n- label-important-outlined\n- label-outlined\n- language\n- lightbulb-filled\n- lightbulb-outlined\n- link\n- linkedin-filled\n- linkedin-outlined\n- loader\n- loading\n- lock-filled\n- lock-open-filled\n- lock-open-outlined\n- lock-outlined\n- login\n- logout\n- mail-filled\n- mail-open-filled\n- mail-open-outlined\n- mail-outlined\n- menu\n- menu-large\n- microphone-filled\n- microphone-outlined\n- minus\n- money-filled\n- money-outlined\n- mood-bad\n- mood-bad-outlined\n- mood-filled\n- mood-outlined\n- more-horiz\n- more-vert\n- music-note-filled\n- music-note-outlined\n- notification-filled\n- notification-outlined\n- open-in-new\n- package\n- package-outlined\n- pause-filled\n- pause-outlined\n- pets-filled\n- pets-outlined\n- phone-call-filled\n- phone-call-outlined\n- phone-filled\n- phone-outlined\n- pin-filled\n- pin-outlined\n- play-arrow-filled\n- play-arrow-outlined\n- play-circle-filled\n- play-circle-outlined\n- plus\n- power-settings-new\n- printer-filled\n- printer-outlined\n- push-pin-filled\n- push-pin-outlined\n- receipt-filled\n- receipt-outlined\n- recycle\n- redeem\n- redo\n- refresh\n- refresh-alt\n- remove\n- remove-circle-filled\n- remove-circle-outlined\n- repeat\n- reply\n- save-alt\n- screen-outlined\n- search\n- send-filled\n- send-outlined\n- sentiment-dissatisfied-filled\n- sentiment-dissatisfied-outlined\n- sentiment-neutral-filled\n- sentiment-neutral-outlined\n- sentiment-satisfied-filled\n- sentiment-satisfied-outlined\n- sentiment-very-dissatisfied-filled\n- sentiment-very-dissatisfied-outlined\n- sentiment-very-satisfied-filled\n- sentiment-very-satisfied-outlined\n- settings-filled\n- settings-outlined\n- share-filled\n- share-outlined\n- shopping-bag-filled\n- shopping-bag-outlined\n- shopping-cart-add\n- shopping-cart-filled\n- shopping-cart-outlined\n- sprout\n- sprout-outline-outlined\n- star-filled\n- star-outlined\n- stay-primary-portrait\n- storefront\n- tag-filled\n- tag-outlined\n- textsms-filled\n- textsms-outlined\n- thumb-down-filled\n- thumb-down-outlined\n- thumb-up-filled\n- thumb-up-outlined\n- tiktok\n- toc\n- trash-filled\n- trash-outlined\n- truck-filled\n- truck-outlined\n- tune\n- twitter\n- undo\n- upload-filled\n- upload-outlined\n- user-circle-filled\n- user-circle-outlined\n- user-filled\n- user-outlined\n- user-square-filled\n- user-square-outlined\n- users-filled\n- users-outlined\n- view-grid-filled\n- view-grid-outlined\n- view-list-filled\n- view-list-outlined\n- warning-bubble-filled\n- warning-bubble-outlined\n- warning-filled\n- warning-outlined\n- whatsapp-filled\n- whatsapp-outlined\n- work-filled\n- work-outlined\n- wysiwyg-filled\n- youtube-filled\n- youtube-outlined\n- zoom-in\n- zoom-out\n\n(Required)",
           "type": "string",
           "values": [
             {
@@ -555,6 +555,12 @@
             {
               "name": "bolt-circle-outlined"
             },
+            {
+              "name": "book-filled"
+            },
+            {
+              "name": "book-outlined"
+            },
             {
               "name": "bookmark-filled"
             },
@@ -843,6 +849,12 @@
             {
               "name": "google-play"
             },
+            {
+              "name": "graduation-filled"
+            },
+            {
+              "name": "graduation-outlined"
+            },
             {
               "name": "headphones-filled"
             },
@@ -2597,6 +2609,45 @@
           "name": "form",
           "description": "Associates the button with a form element by ID.",
           "type": "string"
+        },
+        {
+          "name": "as",
+          "description": "Defines the HTML element type to render (button or anchor).\n\n- a\n- button\n\n@default button",
+          "type": "string",
+          "values": [
+            {
+              "name": "a"
+            },
+            {
+              "name": "button",
+              "description": "(default)"
+            }
+          ],
+          "default": "button"
+        },
+        {
+          "name": "href",
+          "description": "The href URL when as=\"a\".",
+          "type": "string"
+        },
+        {
+          "name": "target",
+          "description": "The target attribute when as=\"a\".\n\n- _blank\n- _parent\n- _self\n- _top",
+          "type": "string",
+          "values": [
+            {
+              "name": "_blank"
+            },
+            {
+              "name": "_parent"
+            },
+            {
+              "name": "_self"
+            },
+            {
+              "name": "_top"
+            }
+          ]
         }
       ]
     },
@@ -9020,7 +9071,7 @@
         },
         {
           "name": "appearance",
-          "description": "Specifies the visual appearance of the banner message, influencing its color and style.\n\n- brand\n- error\n- info\n- inverted\n- neutral\n- warning\n\n@default brand",
+          "description": "Specifies the visual appearance of the banner message, influencing its color and style.\n\n- brand\n- error\n- info\n- inverted\n- neutral\n- success\n- warning\n\n@default brand",
           "type": "string",
           "values": [
             {
@@ -9039,6 +9090,9 @@
             {
               "name": "neutral"
             },
+            {
+              "name": "success"
+            },
             {
               "name": "warning"
             }

package/dist/index.d.ts

@@ -17271,6 +17271,10 @@ declare const bannerStyles: {
                 backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
                 color: `var(--${string})` | `var(--${string}, ${string})`;
             };
+            success: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+                color: `var(--${string})` | `var(--${string}, ${string})`;
+            };
             info: {
                 backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
                 color: `var(--${string})` | `var(--${string}, ${string})`;
@@ -18260,14 +18264,6 @@ interface BannerTyping {
      * @TJS-type () => void;
      */
     onClose?: () => void;
-    /**
-     * The appearance of the banner. This can be used to set the color of the banner.
-     */
-    appearance?: "brand" | "error" | "info" | "warning" | "neutral" | "inverted";
-    /**
-     * Determines whether the banner message should float above the content. This can be useful for ensuring the message remains visible even as the user scrolls.
-     */
-    floating?: boolean;
 }
 type BannerProps = BannerTyping & BannerVariants;
 
@@ -18519,7 +18515,7 @@ declare class RaruiDivider extends RaruiDivider_base {
     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 = "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" | "book-filled" | "book-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" | "graduation-filled" | "graduation-outlined" | "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";
 
 declare global {
     interface HTMLElementTagNameMap {
@@ -18942,6 +18938,19 @@ type ButtonManifestProperties = ButtonProps & {
      * Associates the button with a form element by ID.
      */
     form?: string;
+    /**
+     * Defines the HTML element type to render (button or anchor).
+     * @default "button"
+     */
+    as?: "button" | "a";
+    /**
+     * The href URL when as="a".
+     */
+    href?: string;
+    /**
+     * The target attribute when as="a".
+     */
+    target?: "_blank" | "_self" | "_parent" | "_top";
 };
 type ButtonProperties = WebComponentProperties<ButtonManifestProperties>;
 
@@ -18971,11 +18980,15 @@ declare class RaruiButton extends RaruiButton_base {
     name: ButtonProperties["name"];
     value: ButtonProperties["value"];
     form: ButtonProperties["form"];
+    as: ButtonProperties["as"];
+    href: ButtonProperties["href"];
+    target: ButtonProperties["target"];
     ariaPressed: "true" | "false" | "mixed" | null;
     ariaExpanded: "true" | "false" | null;
     ariaHasPopup: "menu" | "dialog" | "listbox" | "tree" | "grid" | "true" | "false" | null;
     ariaControls: string | null;
     static styles: CSSResult;
+    private renderContent;
     render(): TemplateResult<1>;
     private _handleClick;
 }