@rarui/components 1.15.0 → 1.17.0

package/CHANGELOG.md

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

package/custom-elements.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.14.0",
+  "version": "1.16.0",
   "tags": [
     {
       "name": "rarui-avatar",
@@ -2091,7 +2091,7 @@
         {
           "name": "position",
           "default": "bottom",
-          "description": "Position of the popover.\n\n- bottom\n- bottom-end\n- bottom-start\n- left\n- left-end\n- left-start\n- right\n- right-end\n- right-start\n- top\n- top-end\n- top-start",
+          "description": "Position of the tooltip.\n\n- bottom\n- bottom-end\n- bottom-start\n- left\n- left-end\n- left-start\n- right\n- right-end\n- right-start\n- top\n- top-end\n- top-start",
           "type": "string",
           "values": [
             {
@@ -2691,6 +2691,223 @@
         }
       ]
     },
+    {
+      "name": "rarui-dropdown",
+      "description": "## Rarui Dropdown\n---\nAn suspended menu displays a list of options on a temporary surface.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/input/dropdown) for more details.",
+      "attributes": [
+        {
+          "name": "padding",
+          "default": "base",
+          "description": "Specifies the padding inside the dropdown menu. This prop accepts one of the following values: \"base\" or \"none\".\n\n- base\n- none",
+          "type": "string",
+          "values": [
+            {
+              "name": "base",
+              "description": "(default)"
+            },
+            {
+              "name": "none"
+            }
+          ]
+        },
+        {
+          "name": "width",
+          "description": "The **`width`** CSS property sets an element's width. By default, it sets the width of the content area, but if `box-sizing` is set to `border-box`, it sets the width of the border area. It is also possible to pass a specific value.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"auto\",\n  \"md\": \"fit-content\",\n  \"lg\": \"intrinsic\",\n  \"xl\": \"max-content\"\n}\n```\n\n- auto\n- fit-content\n- intrinsic\n- max-content\n- min-content\n- min-intrinsic\n- stretch",
+          "values": [
+            {
+              "name": "auto"
+            },
+            {
+              "name": "fit-content"
+            },
+            {
+              "name": "intrinsic"
+            },
+            {
+              "name": "max-content"
+            },
+            {
+              "name": "min-content"
+            },
+            {
+              "name": "min-intrinsic"
+            },
+            {
+              "name": "stretch"
+            }
+          ]
+        },
+        {
+          "name": "max-width",
+          "description": "The **`max-width`** CSS property sets the maximum width of an element. It prevents the used value of the `width` property from becoming larger than the value specified by `max-width`. It is also possible to pass a specific value.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"fit-content\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"fit-content\",\n  \"md\": \"intrinsic\",\n  \"lg\": \"max-content\",\n  \"xl\": \"min-content\"\n}\n```\n\n- fit-content\n- intrinsic\n- max-content\n- min-content\n- none\n- stretch",
+          "values": [
+            {
+              "name": "fit-content"
+            },
+            {
+              "name": "intrinsic"
+            },
+            {
+              "name": "max-content"
+            },
+            {
+              "name": "min-content"
+            },
+            {
+              "name": "none"
+            },
+            {
+              "name": "stretch"
+            }
+          ]
+        },
+        {
+          "name": "match-reference-width",
+          "default": false,
+          "description": "A common feature of select dropdowns is that the dropdown matches the width of the reference regardless of its contents.",
+          "type": "boolean"
+        },
+        {
+          "name": "enabled-dismiss",
+          "default": true,
+          "description": "Adds listeners that dismiss (close) the floating element.",
+          "type": "boolean"
+        },
+        {
+          "name": "enabled-click",
+          "default": true,
+          "description": "Adds click event listeners that change the open state.",
+          "type": "boolean"
+        },
+        {
+          "name": "enabled-flip",
+          "default": true,
+          "description": "Determines whether the dropdown should enable flipping the options' dropdown when there is not enough space to display it in its default direction.\nThis can help ensure the dropdown is always visible on the screen.",
+          "type": "boolean"
+        },
+        {
+          "name": "offset",
+          "default": 10,
+          "description": "Offest displaces the floating element from its core placement along the specified axes.",
+          "type": "number"
+        },
+        {
+          "name": "visible",
+          "description": "If true, the component is shown.",
+          "type": "boolean"
+        },
+        {
+          "name": "z-index",
+          "description": "The zIndex property specifies the stack order of the box.\n\nThis property supports responsive values. You can pass a single value like `\"$100\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$100\",\n  \"md\": \"$200\",\n  \"lg\": \"$300\",\n  \"xl\": \"$400\"\n}\n```\n\n- $100\n- $200\n- $300\n- $400\n- $500\n- $600\n- $700\n- $800\n- $900",
+          "values": [
+            {
+              "name": "$100"
+            },
+            {
+              "name": "$200"
+            },
+            {
+              "name": "$300"
+            },
+            {
+              "name": "$400"
+            },
+            {
+              "name": "$500"
+            },
+            {
+              "name": "$600"
+            },
+            {
+              "name": "$700"
+            },
+            {
+              "name": "$800"
+            },
+            {
+              "name": "$900"
+            }
+          ]
+        },
+        {
+          "name": "position",
+          "default": "bottom-start",
+          "description": "Position of the dropdown.\n\n- bottom\n- bottom-end\n- bottom-start\n- left\n- left-end\n- left-start\n- right\n- right-end\n- right-start\n- top\n- top-end\n- top-start",
+          "type": "string",
+          "values": [
+            {
+              "name": "bottom"
+            },
+            {
+              "name": "bottom-end"
+            },
+            {
+              "name": "bottom-start",
+              "description": "(default)"
+            },
+            {
+              "name": "left"
+            },
+            {
+              "name": "left-end"
+            },
+            {
+              "name": "left-start"
+            },
+            {
+              "name": "right"
+            },
+            {
+              "name": "right-end"
+            },
+            {
+              "name": "right-start"
+            },
+            {
+              "name": "top"
+            },
+            {
+              "name": "top-end"
+            },
+            {
+              "name": "top-start"
+            }
+          ]
+        },
+        {
+          "name": "strategy",
+          "default": "fixed",
+          "description": "CSS positioning strategy used for the tooltip.\n\n- `\"fixed\"` (default) positions the tooltip relative to the viewport,\n  so it stays in the same place even when the page is scrolled.\n- `\"absolute\"` positions the tooltip relative to the nearest positioned ancestor,\n  which can be useful when you want the tooltip to move with page content.\n\nUse `\"fixed\"` for tooltips that should remain visible on scroll,\nand `\"absolute\"` when tooltips need to be positioned within scrollable containers.\n\n- absolute\n- fixed",
+          "type": "string",
+          "values": [
+            {
+              "name": "absolute"
+            },
+            {
+              "name": "fixed",
+              "description": "(default)"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "rarui-dropdown-item",
+      "description": "## Rarui Dropdown Item\n---\nAn suspended menu displays a list of options on a temporary surface.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/surface/dropdown) for more details.",
+      "attributes": [
+        {
+          "name": "selected",
+          "default": false,
+          "description": "Indicates if the item is selected.\nThis affects the visual style, such as highlight or marking.",
+          "type": "boolean"
+        },
+        {
+          "name": "name",
+          "description": "The name of the dropdown item. This is typically the text that is displayed for the item.",
+          "type": "string"
+        }
+      ]
+    },
     {
       "name": "rarui-icon-button",
       "description": "## Rarui Icon Button\n---\nButton allows the user to perform actions, such as sending a file, advancing a form, sharing a document, or making a comment.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/input/button) for more details.",
@@ -6969,6 +7186,114 @@
           "type": "string"
         }
       ]
+    },
+    {
+      "name": "rarui-modal",
+      "description": "## Rarui Modal\n---\nThe modal component provides a base for popovers, suspended forms, tutorials, or any other content above the UI main surface.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/surface/modal) for more details.",
+      "attributes": [
+        {
+          "name": "padding",
+          "default": "base",
+          "description": "Padding properties are used to generate space around the content area of an Accordion.Body..\n\n- base\n- none",
+          "type": "string",
+          "values": [
+            {
+              "name": "base",
+              "description": "(default)"
+            },
+            {
+              "name": "none"
+            }
+          ]
+        },
+        {
+          "name": "max-width",
+          "description": "The **`max-width`** CSS property sets the maximum width of an element. It prevents the used value of the `width` property from becoming larger than the value specified by `max-width`. It is also possible to pass a specific value.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"fit-content\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"fit-content\",\n  \"md\": \"intrinsic\",\n  \"lg\": \"max-content\",\n  \"xl\": \"min-content\"\n}\n```\n\n- fit-content\n- intrinsic\n- max-content\n- min-content\n- none\n- stretch",
+          "values": [
+            {
+              "name": "fit-content"
+            },
+            {
+              "name": "intrinsic"
+            },
+            {
+              "name": "max-content"
+            },
+            {
+              "name": "min-content"
+            },
+            {
+              "name": "none"
+            },
+            {
+              "name": "stretch"
+            }
+          ]
+        },
+        {
+          "name": "open",
+          "description": "Whether the modal is open or not.",
+          "type": "boolean"
+        },
+        {
+          "name": "portal-id",
+          "description": "Specifies the ID of the portal element where the modal should be rendered.\nThis can be useful for rendering the modal in a different part of the DOM, such as a modal or overlay.",
+          "type": "string"
+        },
+        {
+          "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": "rarui-modal-footer",
+      "description": "## Rarui Modal Footer\n---\nThe modal component provides a base for popovers, suspended forms, tutorials, or any other content above the UI main surface.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/surface/modal) for more details.",
+      "attributes": []
+    },
+    {
+      "name": "rarui-modal-header",
+      "attributes": [
+        {
+          "name": "title",
+          "description": "The title to display in the Modal header.",
+          "type": "string"
+        },
+        {
+          "name": "subtitle",
+          "description": "The subtitle to display in the Modal header.",
+          "type": "string"
+        }
+      ]
     }
   ]
 }