@rarui/components 1.26.0 → 1.27.0-rc.2

package/CHANGELOG.md

@@ -2,6 +2,39 @@
 
 `@rarui/components` components is a component library built with [Lit](https://lit.dev/).
 
+## 2025-09-26 `1.28.0`
+
+- **PassThroughAttributesMixin**: Introduced mixin for managing pass-through attributes (data-_, aria-_) to internal elements, providing consistent attribute filtering and avoiding conflicts with component-managed attributes. Includes convenience methods `getDataAttributes()`, `getDataAndAriaAttributes()`, and configurable exclusion patterns. ([#139](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/139) by [@junior](https://git.rarolabs.com.br/junior))
+
+#### 💡 Others
+
+- **Lit Binding Best Practices**: Comprehensive review and improvement of property binding patterns across Link, Button, Input, Password, and Search components following Lit best practices. Added `reflect: true` to all visual properties for better CSS styling and debugging, removed unnecessary boolean converters, and applied consistent mixin usage for ARIA properties and pass-through attributes. ([#139](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/139) by [@junior](https://git.rarolabs.com.br/junior))
+
+#### 🎉 New features
+
+## 2025-09-25 `1.27.0`
+
+#### 🎉 New features
+
+- **SprinkleAttributesMixin**: Introduced new mixin that replaces `@AddSprinkleAttributes` decorator, providing cleaner implementation with automatic HTML attribute parsing, responsive value support for CSS properties, and optional `cssProps` for programmatic usage. ([#139](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/139) by [@junior](https://git.rarolabs.com.br/junior))
+- **AriaAttributesMixin**: Created mixin that eliminates ARIA properties duplication across all components, automatically providing `ariaLabel`, `ariaLabelledBy`, and `ariaDescribedBy` with proper reflection. Applied to 15+ components: Avatar, Button, Badge, Checkbox, Select, Modal, Card, Sidebar, Dropdown, Chip, Title, Text, Icon, Search, Password, and others. ([#139](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/139) by [@junior](https://git.rarolabs.com.br/junior))
+- **BaseComponentMixin**: Introduced combined mixin that includes both SprinkleAttributesMixin and AriaAttributesMixin for complete component foundation with automatic CSS properties and ARIA support. ([#139](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/139) by [@junior](https://git.rarolabs.com.br/junior))
+- **SpreadAttributesDirective**: Centralized reusable directive for spreading HTML attributes to DOM elements, moved from individual components to shared utils structure for better maintainability. ([#139](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/139) by [@junior](https://git.rarolabs.com.br/junior))
+
+#### 🐛 Bug fixes
+
+- **Select Dropdown Auto-Close**: Fixed Select component to automatically close dropdown after selecting an option in single-select mode. Corrected property binding from `?visible` to `.visible` for proper Dropdown communication and added proper timing for UI updates. ([#139](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/139) by [@junior](https://git.rarolabs.com.br/junior))
+- **Dropdown Property Reflection**: Improved Dropdown component by adding `reflect: true` to visual and configuration properties (position, strategy, offset, open, enabled-\*) for better CSS styling support, debugging visibility, and accessibility. Removed unnecessary boolean converters following Lit best practices. ([#139](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/139) by [@junior](https://git.rarolabs.com.br/junior))
+- **Modal Property Reflection**: Enhanced Modal component with `reflect: true` on all visual properties (open, padding, max-width, portal-id) for improved debugging and CSS styling capabilities. Optimized event dispatching to only trigger `rarui-modal-open-changed` when `open` property actually changes. ([#139](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/139) by [@junior](https://git.rarolabs.com.br/junior))
+
+#### 💡 Others
+
+- **Enhanced Dropdown Events**: Improved Dropdown component's `dropdown-visibility-change` event to include specific reason information ("click-outside", "escape-key", "click-open", "click-close") instead of generic reasons, enabling better component communication and more precise interaction handling. Updated Select component to properly respond to specific dismissal reasons. ([#139](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/139) by [@junior](https://git.rarolabs.com.br/junior))
+
+- **Utils Structure Cleanup**: Removed unused utility files and mixins, keeping only essential mixins for better maintainability and reduced bundle size. ([#139](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/139) by [@junior](https://git.rarolabs.com.br/junior))
+- **Divider Width Fix**: Fixed host element width behavior to respect user-provided size values, using fit-content for fixed sizes and proper percentage handling for values like "50%". ([#139](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/139) by [@junior](https://git.rarolabs.com.br/junior))
+- **Code Duplication Reduction**: Eliminated 9+ lines of duplicated ARIA property declarations per component, reducing codebase size and improving maintainability across all web components. ([#139](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/139) by [@junior](https://git.rarolabs.com.br/junior))
+
 ## 2025-09-25 `1.26.0`
 
 #### 🛠 Breaking changes

package/custom-elements.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.25.0",
+  "version": "1.27.0-rc.2",
   "tags": [
     {
       "name": "rarui-avatar",
@@ -3354,7 +3354,7 @@
         },
         {
           "name": "name",
-          "description": "The name of the input for form submission.",
+          "description": "The name of the input for form submission.\n\n(Required)",
           "type": "string"
         },
         {
@@ -3465,7 +3465,7 @@
         },
         {
           "name": "name",
-          "description": "The name of the input for form submission.",
+          "description": "The name of the input for form submission.\n\n(Required)",
           "type": "string"
         },
         {
@@ -3628,6 +3628,257 @@
         }
       ]
     },
+    {
+      "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 using rarui-select-option elements\n- **Multiple Selection**: Choose multiple options with checkboxes using rarui-select-option elements\n- **Slot-based Content**: Use rarui-select-option elements as children for flexible content\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": "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": "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": "placeholder",
+          "description": "Placeholder text displayed when no option is selected.",
+          "type": "string"
+        },
+        {
+          "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": "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": "name",
+          "description": "The name of the select for form submission.",
+          "type": "string"
+        },
+        {
+          "name": "form",
+          "description": "Associates the select with a form element by ID.",
+          "type": "string"
+        },
+        {
+          "name": "required",
+          "description": "Whether the select is required for form validation.",
+          "type": "boolean",
+          "default": false
+        }
+      ]
+    },
+    {
+      "name": "rarui-select-select-opt-group",
+      "description": "## Rarui Select OptGroup\n---\nGroup component for organizing related options within rarui-select.\n\nFeatures:\n- **Visual Grouping**: Groups related options with an optional label\n- **Accessibility**: Proper ARIA group semantics\n- **Disabled State**: Can disable entire groups of options\n- **Flexible Content**: Contains rarui-select-option elements\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/input/select) for more details.",
+      "attributes": [
+        {
+          "name": "label",
+          "description": "The label for the option group. Displayed as a header for the group.",
+          "type": "string"
+        },
+        {
+          "name": "disabled",
+          "description": "Whether this option group is disabled, preventing selection of all options within.",
+          "type": "boolean",
+          "default": false
+        }
+      ]
+    },
+    {
+      "name": "rarui-select-select-option",
+      "description": "## Rarui Select Option\n---\nIndividual option component for use within rarui-select.\n\nFeatures:\n- **Flexible Content**: Support for both label attribute and slot content\n- **Selection State**: Automatic handling of selected state\n- **Accessibility**: Full ARIA support and keyboard navigation\n- **Parent Integration**: Automatically detects parent select configuration\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/input/select) for more details.",
+      "attributes": [
+        {
+          "name": "value",
+          "description": "The value of the option that will be submitted with forms.\n\n(Required)",
+          "type": "string"
+        },
+        {
+          "name": "label",
+          "description": "The label text for the option. If not provided, will use slot content.",
+          "type": "string"
+        },
+        {
+          "name": "selected",
+          "description": "Whether this option is currently selected.",
+          "type": "boolean",
+          "default": false
+        },
+        {
+          "name": "disabled",
+          "description": "Whether this option is disabled and cannot be selected.",
+          "type": "boolean",
+          "default": false
+        }
+      ]
+    },
     {
       "name": "rarui-textarea",
       "description": "## Rarui Textarea\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.",