@rarui/components 1.22.0 → 1.23.0

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 `@rarui/components` components is a component library built with [Lit](https://lit.dev/).
 
+## 2025-01-09 `1.23.0`
+
+#### 🎉 New features
+
+- Added new input `Select` component with single and multiple selection modes. ([#133](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/133) by [@junior](https://git.rarolabs.com.br/junior))
+- Enhanced `Checkbox` component with hybrid behavior support - controlled and native modes. ([#133](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/133) by [@junior](https://git.rarolabs.com.br/junior))
+- Enhanced `Dropdown` component with hybrid behavior support for `visible` property - controlled and native modes. ([#133](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/133) by [@junior](https://git.rarolabs.com.br/junior))
+- Added `readonly` property to `Checkbox` component for display-only state. ([#133](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/133) by [@junior](https://git.rarolabs.com.br/junior))
+- Implemented intelligent checkbox state management that works as controlled component when `checked` prop is provided. ([#133](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/133) by [@junior](https://git.rarolabs.com.br/junior))
+- Implemented intelligent dropdown state management that works as controlled component when `visible` prop is provided. ([#133](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/133) by [@junior](https://git.rarolabs.com.br/junior))
+- Added native HTML checkbox behavior when `checked` prop is not provided, maintaining internal state automatically. ([#133](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/133) by [@junior](https://git.rarolabs.com.br/junior))
+- Added native dropdown behavior when `visible` prop is not provided, maintaining internal state automatically. ([#133](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/133) by [@junior](https://git.rarolabs.com.br/junior))
+- Enhanced accessibility with ESC key support to close dropdown when `enabled-dismiss` is true. ([#133](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/133) by [@junior](https://git.rarolabs.com.br/junior))
+
 ## 2025-09-01 `1.22.0`
 
 #### 🎉 New features

package/custom-elements.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.21.0",
+  "version": "1.22.0",
   "tags": [
     {
       "name": "rarui-avatar",
@@ -2572,6 +2572,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\nFeatures hybrid behavior:\n- **Controlled mode**: When `checked` prop is provided, works like React controlled component\n- **Native mode**: When `checked` prop is not provided, works like native HTML checkbox\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/input/checkbox) for more details.",
       "attributes": [
         {
           "name": "label",
@@ -2583,6 +2584,18 @@
           "description": "The id of the checkbox.\n\n(Required)",
           "type": "string"
         },
+        {
+          "name": "checked",
+          "description": "Controls the checked state of the checkbox.\n\n**Hybrid Behavior:**\n- When provided: Checkbox works in controlled mode - external prop controls the state\n- When not provided: Checkbox works in native mode - maintains its own internal state\n\n@default undefined (native mode)",
+          "type": "boolean",
+          "default": "undefined (native mode)"
+        },
+        {
+          "name": "readonly",
+          "description": "Makes the checkbox read-only, preventing user interaction.\nWhen true, the checkbox displays its current state but cannot be changed by clicking.",
+          "type": "boolean",
+          "default": false
+        },
         {
           "name": "error",
           "description": "Specifies whether the checkbox is in error state",
@@ -2697,7 +2710,7 @@
     },
     {
       "name": "rarui-dropdown",
-      "description": "## Rarui Dropdown\n---\nAn suspended menu displays a list of options on a temporary surface.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/input/dropdown) for more details.",
+      "description": "## Rarui Dropdown\n---\nAn suspended menu displays a list of options on a temporary surface.\n\nFeatures hybrid behavior:\n- **Controlled mode**: When `visible` prop is provided, works like React controlled component\n- **Native mode**: When `visible` prop is not provided, manages its own internal state\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/input/dropdown) for more details.",
       "attributes": [
         {
           "name": "match-reference-width",
@@ -2736,8 +2749,9 @@
         },
         {
           "name": "visible",
-          "description": "If true, the component is shown.",
-          "type": "boolean"
+          "description": "Controls the visibility state of the dropdown.\n\n**Hybrid Behavior:**\n- When provided: Dropdown works in controlled mode - external prop controls the state\n- When not provided: Dropdown works in native mode - manages its own internal state\n\n@default undefined (native mode)",
+          "type": "boolean",
+          "default": "undefined (native mode)"
         },
         {
           "name": "on-visibility",
@@ -3240,6 +3254,201 @@
         }
       ]
     },
+    {
+      "name": "rarui-select",
+      "description": "## Rarui Select\n---\nSelect component for choosing options from a dropdown menu with support for single and multiple selection.\n\nFeatures:\n- **Single Selection**: Choose one option from the list\n- **Multiple Selection**: Choose multiple options with checkboxes\n- **Custom Content**: Support for slot-based custom content and filtering\n- **Accessibility**: Full keyboard navigation with ESC key support\n- **Controlled Behavior**: Uses internal web components (Dropdown, Checkbox, Text, Box, Chip, Icon)\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/input/select) for more details.",
+      "attributes": [
+        {
+          "name": "open",
+          "description": "If true, the Select component is shown.",
+          "type": "boolean"
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the select component, disallowing user interaction.",
+          "type": "boolean",
+          "default": false
+        },
+        {
+          "name": "options",
+          "description": "Options for the Select component. This should be an array of SelectOptionProps objects.\n\n(Required)",
+          "type": "array"
+        },
+        {
+          "name": "multiple",
+          "description": "Enables multiple selection mode.",
+          "type": "boolean",
+          "default": false
+        },
+        {
+          "name": "size",
+          "description": "Specifies the size of the badge, controlling its dimensions.\n\n- large\n- medium\n- small",
+          "type": "string",
+          "values": [
+            {
+              "name": "large"
+            },
+            {
+              "name": "medium"
+            },
+            {
+              "name": "small"
+            }
+          ]
+        },
+        {
+          "name": "appearance",
+          "description": "Determines the visual style of the input, affecting its border\n\n- error\n- success",
+          "type": "string",
+          "values": [
+            {
+              "name": "error"
+            },
+            {
+              "name": "success"
+            }
+          ]
+        },
+        {
+          "name": "max-height",
+          "description": "The **`max-height`** CSS property sets the maximum height of an element. It prevents the used value of the `height` property from becoming larger than the value specified for `max-height`. It is also possible to pass a specific value.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"fit-content\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"fit-content\",\n  \"md\": \"intrinsic\",\n  \"lg\": \"max-content\",\n  \"xl\": \"min-content\"\n}\n```\n\n- fit-content\n- intrinsic\n- max-content\n- min-content\n- none\n- stretch",
+          "values": [
+            {
+              "name": "fit-content"
+            },
+            {
+              "name": "intrinsic"
+            },
+            {
+              "name": "max-content"
+            },
+            {
+              "name": "min-content"
+            },
+            {
+              "name": "none"
+            },
+            {
+              "name": "stretch"
+            }
+          ]
+        },
+        {
+          "name": "z-index",
+          "description": "The zIndex property specifies the stack order of the box.\n\nThis property supports responsive values. You can pass a single value like `\"$100\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$100\",\n  \"md\": \"$200\",\n  \"lg\": \"$300\",\n  \"xl\": \"$400\"\n}\n```\n\n- $100\n- $200\n- $300\n- $400\n- $500\n- $600\n- $700\n- $800\n- $900",
+          "values": [
+            {
+              "name": "$100"
+            },
+            {
+              "name": "$200"
+            },
+            {
+              "name": "$300"
+            },
+            {
+              "name": "$400"
+            },
+            {
+              "name": "$500"
+            },
+            {
+              "name": "$600"
+            },
+            {
+              "name": "$700"
+            },
+            {
+              "name": "$800"
+            },
+            {
+              "name": "$900"
+            }
+          ]
+        },
+        {
+          "name": "value",
+          "description": "Default selected values for the Select component.\nThis should be an array of SelectOptionProps objects representing the selected options.",
+          "values": []
+        },
+        {
+          "name": "default-value",
+          "description": "Specifies the default selected value(s) for the select box.\nThis can be a selectOption for single selection or an array of selectOption for multiple selections.",
+          "values": []
+        },
+        {
+          "name": "placeholder",
+          "description": "Placeholder text displayed when no option is selected.",
+          "type": "string"
+        },
+        {
+          "name": "enabled-flip",
+          "description": "Determines whether the select box should enable flipping the options' dropdown when there is not enough space to display it in its default direction.\nThis can help ensure the dropdown is always visible on the screen.\n\n@default true",
+          "type": "boolean",
+          "default": true
+        },
+        {
+          "name": "position",
+          "description": "Position of the dropdown relative to the trigger.\n\n- bottom\n- bottom-end\n- bottom-start\n- left\n- left-end\n- left-start\n- right\n- right-end\n- right-start\n- top\n- top-end\n- top-start\n\n@default bottom-start",
+          "type": "string",
+          "values": [
+            {
+              "name": "bottom"
+            },
+            {
+              "name": "bottom-end"
+            },
+            {
+              "name": "bottom-start",
+              "description": "(default)"
+            },
+            {
+              "name": "left"
+            },
+            {
+              "name": "left-end"
+            },
+            {
+              "name": "left-start"
+            },
+            {
+              "name": "right"
+            },
+            {
+              "name": "right-end"
+            },
+            {
+              "name": "right-start"
+            },
+            {
+              "name": "top"
+            },
+            {
+              "name": "top-end"
+            },
+            {
+              "name": "top-start"
+            }
+          ],
+          "default": "bottom-start"
+        },
+        {
+          "name": "strategy",
+          "description": "CSS positioning strategy used for the dropdown.\n\n- `\"fixed\"` (default) positions the dropdown relative to the viewport,\n  so it stays in the same place even when the page is scrolled.\n- `\"absolute\"` positions the dropdown relative to the nearest positioned ancestor,\n  which can be useful when you want the dropdown to move with page content.\n\nUse `\"fixed\"` for dropdowns that should remain visible on scroll,\nand `\"absolute\"` when dropdowns need to be positioned within scrollable containers.\n\n- absolute\n- fixed\n\n@default fixed",
+          "type": "string",
+          "values": [
+            {
+              "name": "absolute"
+            },
+            {
+              "name": "fixed",
+              "description": "(default)"
+            }
+          ],
+          "default": "fixed"
+        }
+      ]
+    },
     {
       "name": "rarui-textarea",
       "description": "## Rarui Radio Button\n---\nExpanded text area for long text entries. Allows you to enter large blocks of text, such as comments or detailed descriptions.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/input/textarea) for more details.",
@@ -7517,9 +7726,8 @@
       "attributes": [
         {
           "name": "open",
-          "description": "Determines if the sidebar is shown or not.\n\n@default true",
-          "type": "boolean",
-          "default": true
+          "description": "Determines if the sidebar is shown or not.",
+          "type": "boolean"
         },
         {
           "name": "portal-id",

package/dist/index.d.ts

@@ -17658,7 +17658,6 @@ declare const sidebarStyles: {
         };
         /**
          * Determines if the sidebar is shown or not.
-         * @default true
          */
         open: {
             true: {
@@ -18001,6 +18000,16 @@ interface CheckboxTyping {
      * The id of the checkbox.
      */
     id: string;
+    /**
+     * Whether the checkbox is checked.
+     * @default false
+     */
+    checked?: boolean;
+    /**
+     * Whether the checkbox is readonly.
+     * @default false
+     */
+    readonly?: boolean;
 }
 type CheckboxProps = CheckboxTyping & CheckboxVariants;
 
@@ -18392,7 +18401,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 {
@@ -18741,9 +18750,31 @@ 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-web-components/input/checkbox) for more details.
+ * Features hybrid behavior:
+ * - **Controlled mode**: When `checked` prop is provided, works like React controlled component
+ * - **Native mode**: When `checked` prop is not provided, works like native HTML checkbox
+ *
+ * See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/input/checkbox) for more details.
  */
-type CheckboxManifestProperties = CheckboxProps;
+type CheckboxManifestProperties = CheckboxProps & {
+    /**
+     * Controls the checked state of the checkbox.
+     *
+     * **Hybrid Behavior:**
+     * - When provided: Checkbox works in controlled mode - external prop controls the state
+     * - When not provided: Checkbox works in native mode - maintains its own internal state
+     *
+     * @default undefined (native mode)
+     */
+    checked?: boolean;
+    /**
+     * Makes the checkbox read-only, preventing user interaction.
+     * When true, the checkbox displays its current state but cannot be changed by clicking.
+     *
+     * @default false
+     */
+    readonly?: boolean;
+};
 type CheckboxProperties = WebComponentProperties<CheckboxManifestProperties>;
 
 declare class RaruiCheckbox extends LitElement {
@@ -18752,7 +18783,14 @@ declare class RaruiCheckbox extends LitElement {
     error: CheckboxProperties["error"];
     indeterminate: CheckboxProperties["indeterminate"];
     disabled: boolean;
+    checked: boolean;
+    private _hasCheckedAttribute;
+    readonly: boolean;
+    private input;
     static styles: CSSResult;
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    updated(changedProperties: Map<string, any>): void;
     render(): TemplateResult<1>;
     private _onChange;
 }
@@ -18804,7 +18842,11 @@ declare global {
  * ---
  * An suspended menu displays a list of options on a temporary surface.
  *
- See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/input/dropdown) for more details.
+ * Features hybrid behavior:
+ * - **Controlled mode**: When `visible` prop is provided, works like React controlled component
+ * - **Native mode**: When `visible` prop is not provided, manages its own internal state
+ *
+ * See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/input/dropdown) for more details.
  */
 type DropdownManifestProperties = DropdownProps & {
     /**
@@ -18825,6 +18867,16 @@ type DropdownManifestProperties = DropdownProps & {
      * @default fixed
      */
     strategy?: "fixed" | "absolute";
+    /**
+     * Controls the visibility state of the dropdown.
+     *
+     * **Hybrid Behavior:**
+     * - When provided: Dropdown works in controlled mode - external prop controls the state
+     * - When not provided: Dropdown works in native mode - manages its own internal state
+     *
+     * @default undefined (native mode)
+     */
+    visible?: boolean;
 };
 type DropdownProperties = WebComponentProperties<DropdownManifestProperties, "onVisibility" | "portalId">;
 
@@ -18842,16 +18894,20 @@ declare class RaruiDropdown extends LitElement {
     set visible(value: boolean | undefined);
     get visible(): boolean | undefined;
     private _visible?;
+    private _hasVisibleAttribute;
     reference: HTMLElement;
     floating: HTMLElement;
     static styles: CSSResult;
     cleanupAutoUpdate?: () => void;
     private updatePositionDebounceId;
     connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     disconnectedCallback(): void;
     updated(changed: Map<string, any>): void;
     private scheduleUpdatePosition;
     private handleClickOutside;
+    private handleKeyDown;
+    private closeDropdown;
     private handleClick;
     updatePosition(): Promise<void>;
     private getMiddleware;
@@ -18877,6 +18933,7 @@ type DropdownItemProperties = WebComponentProperties<DropdownItemManifestPropert
 declare class RaruiDropdownItem extends LitElement {
     name: DropdownItemProperties["name"];
     selected: DropdownItemProperties["selected"];
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     static styles: CSSResult;
     render(): TemplateResult<1>;
 }
@@ -18991,6 +19048,12 @@ declare class RaruiRadioButton extends LitElement {
     private _onChange;
 }
 
+declare global {
+    interface HTMLElementTagNameMap {
+        "rarui-select": any;
+    }
+}
+
 declare global {
     interface HTMLElementTagNameMap {
         "rarui-textarea": RaruiTextarea;