@rarui/components 1.23.0 → 1.24.0

package/CHANGELOG.md

@@ -2,6 +2,30 @@
 
 `@rarui/components` components is a component library built with [Lit](https://lit.dev/).
 
+## 2025-09-05 `1.24.0`
+
+#### 🎉 New features
+
+- Enhanced navigation components with comprehensive accessibility improvements: Tabs with complete ARIA tabs pattern (tablist, tab, tabpanel), SideNavigation with proper expandable controls (aria-expanded, aria-controls), Pagination with semantic navigation and aria-current, Link with external link security and form integration, and Breadcrumb with semantic navigation structure for complete screen reader support. ([#134](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/134) by [@junior](https://git.rarolabs.com.br/junior))
+- Enhanced Toggle component with comprehensive accessibility and form integration (value, form, required properties), standardized custom event (toggle-change), semantic switch behavior with role="switch", and complete ARIA attributes implementation (aria-checked) for screen reader accessibility. ([#134](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/134) by [@junior](https://git.rarolabs.com.br/junior))
+- Enhanced Textarea component with comprehensive accessibility and form integration (name, form, required, readonly, placeholder, minlength, maxlength properties), standardized custom event (textarea-change), and complete ARIA attributes implementation for screen reader accessibility. ([#134](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/134) by [@junior](https://git.rarolabs.com.br/junior))
+- Enhanced Select component with comprehensive accessibility and form integration (name, form, required properties), complete ARIA support with proper attributes (aria-haspopup, aria-expanded, semantic roles), and hidden form inputs for seamless HTML form integration in both single and multiple selection modes. ([#134](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/134) by [@junior](https://git.rarolabs.com.br/junior))
+- Enhanced RadioButton component with comprehensive accessibility and form integration (value, form, required, readonly properties), standardized custom event (radio-button-change), and complete ARIA attributes implementation for screen reader support. ([#134](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/134) by [@junior](https://git.rarolabs.com.br/junior))
+- Enhanced Input components (Input, InputPassword, InputSearch) with comprehensive accessibility and form integration (HTML5 validation attributes, ARIA support) and standardized custom events (input-change, input-password-change, input-search-change, input-search-submit) for consistent user interaction across all input variants. ([#134](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/134) by [@junior](https://git.rarolabs.com.br/junior))
+- Enhanced IconButton component with comprehensive accessibility and form integration (type, name, value, form properties), standardized custom event (icon-button-click), and complete ARIA attributes implementation for screen reader support. ([#134](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/134) by [@junior](https://git.rarolabs.com.br/junior))
+- Enhanced Dropdown component with comprehensive accessibility support (ARIA attributes, keyboard navigation) and standardized custom events (dropdown-visibility-change, dropdown-item-click) for better user interaction and screen reader compatibility. ([#134](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/134) by [@junior](https://git.rarolabs.com.br/junior))
+- Enhanced Chip component with comprehensive accessibility and form integration (disabled, type, name, value, form properties), standardized custom events (chip-click, chip-close), keyboard navigation support, and complete ARIA attributes implementation. ([#134](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/134) by [@junior](https://git.rarolabs.com.br/junior))
+- Enhanced Checkbox component with comprehensive accessibility support (aria-checked with mixed state, aria-invalid, aria-required) and complete HTML form integration (name, value, form, required attributes). ([#134](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/134) by [@junior](https://git.rarolabs.com.br/junior))
+- Enhanced Button component with advanced accessibility support (aria-pressed, aria-expanded) and comprehensive HTML form integration (name, value, form attributes). ([#134](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/134) by [@junior](https://git.rarolabs.com.br/junior))
+- Enhanced accessibility across feedback components (Progress, ProgressCircle, Skeleton, Status) with comprehensive ARIA attributes for screen reader support. ([#134](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/134) by [@junior](https://git.rarolabs.com.br/junior))
+- Enhanced accessibility across layout components (Box, Sidebar) with ARIA attributes for screen reader compatibility. ([#134](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/134) by [@junior](https://git.rarolabs.com.br/junior))
+- Enhanced accessibility across surface components (Card, Modal, Banner, Accordion) with comprehensive ARIA attributes and semantic roles. ([#134](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/134) by [@junior](https://git.rarolabs.com.br/junior))
+- Enhanced accessibility for stylization components (ThemeProvider) with ARIA attributes support. ([#134](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/134) by [@junior](https://git.rarolabs.com.br/junior))
+- Enhanced accessibility across exhibition components with comprehensive ARIA attributes and semantic roles for screen reader support. ([#134](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/134) by [@junior](https://git.rarolabs.com.br/junior))
+- Added `as` property to `Text` and `Title` components for semantic HTML element selection with dynamic tag rendering. ([#134](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/134) by [@junior](https://git.rarolabs.com.br/junior))
+- Improved `Icon` component with intelligent aria-hidden behavior for decorative vs meaningful icons. ([#134](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/134) by [@junior](https://git.rarolabs.com.br/junior))
+- Enhanced `Stepper` and `StepperStep` components with comprehensive accessibility support including aria-current navigation. ([#134](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/134) by [@junior](https://git.rarolabs.com.br/junior))
+
 ## 2025-01-09 `1.23.0`
 
 #### 🎉 New features

package/custom-elements.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.22.0",
+  "version": "1.23.0",
   "tags": [
     {
       "name": "rarui-avatar",
@@ -1419,18 +1419,31 @@
     },
     {
       "name": "rarui-text",
+      "description": "## Rarui Text\n---\nText is a basic component that allows us to write blocks of text and give it formatting to use within other components, sections and pages of our application or website.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/exhibition/typography) for more details.",
       "attributes": [
         {
           "name": "as",
-          "description": "Type of html tag to create for the Text component.\n\n- p\n- span\n\n@default p",
+          "description": "Changes the rendered element for semantic HTML.\n\n- div\n- em\n- p\n- small\n- span\n- strong\n\n@default p",
           "type": "string",
           "values": [
+            {
+              "name": "div"
+            },
+            {
+              "name": "em"
+            },
             {
               "name": "p",
               "description": "(default)"
             },
+            {
+              "name": "small"
+            },
             {
               "name": "span"
+            },
+            {
+              "name": "strong"
             }
           ],
           "default": "p"
@@ -1776,10 +1789,11 @@
     },
     {
       "name": "rarui-title",
+      "description": "## Rarui Title\n---\nTilte is a basic component that allows you to give titles and more hierarchy to blocks of text for sections or header components.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/exhibition/typography) for more details.",
       "attributes": [
         {
           "name": "as",
-          "description": "Type of html tag to create for the title.\n\n- h1\n- h2\n- h3\n- h4\n- h5\n- h6\n\n@default h1",
+          "description": "Changes the rendered heading element for semantic hierarchy.\n\n- h1\n- h2\n- h3\n- h4\n- h5\n- h6\n\n@default h1",
           "type": "string",
           "values": [
             {
@@ -2567,6 +2581,21 @@
             }
           ],
           "default": "button"
+        },
+        {
+          "name": "name",
+          "description": "The name of the button for form submission.",
+          "type": "string"
+        },
+        {
+          "name": "value",
+          "description": "The value of the button for form submission.",
+          "type": "string"
+        },
+        {
+          "name": "form",
+          "description": "Associates the button with a form element by ID.",
+          "type": "string"
         }
       ]
     },
@@ -2618,6 +2647,27 @@
           "name": "indeterminate",
           "description": "Specifies whether the checkbox is indeterminate state",
           "type": "boolean"
+        },
+        {
+          "name": "name",
+          "description": "The name of the checkbox for form submission.",
+          "type": "string"
+        },
+        {
+          "name": "value",
+          "description": "The value of the checkbox when checked for form submission.",
+          "type": "string"
+        },
+        {
+          "name": "form",
+          "description": "Associates the checkbox with a form element by ID.",
+          "type": "string"
+        },
+        {
+          "name": "required",
+          "description": "Indicates whether the checkbox is required for form validation.",
+          "type": "boolean",
+          "default": false
         }
       ]
     },
@@ -2705,6 +2755,39 @@
           "description": "Disables the chip, disallowing user interaction.",
           "type": "boolean",
           "default": false
+        },
+        {
+          "name": "type",
+          "description": "Defines the native button type.\n\n- button\n- reset\n- submit\n\n@default button",
+          "type": "string",
+          "values": [
+            {
+              "name": "button",
+              "description": "(default)"
+            },
+            {
+              "name": "reset"
+            },
+            {
+              "name": "submit"
+            }
+          ],
+          "default": "button"
+        },
+        {
+          "name": "name",
+          "description": "The name of the chip for form submission.",
+          "type": "string"
+        },
+        {
+          "name": "value",
+          "description": "The value of the chip for form submission.",
+          "type": "string"
+        },
+        {
+          "name": "form",
+          "description": "Associates the chip with a form element by ID.",
+          "type": "string"
         }
       ]
     },
@@ -2921,6 +3004,7 @@
     },
     {
       "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": "name",
@@ -2932,11 +3016,47 @@
           "description": "Indicates if the item is selected.\nThis affects the visual style, such as highlight or marking.",
           "type": "boolean",
           "default": false
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the dropdown item, disallowing user interaction.",
+          "type": "boolean",
+          "default": false
+        },
+        {
+          "name": "value",
+          "description": "The value associated with this dropdown item for form submission or identification.",
+          "type": "string"
+        },
+        {
+          "name": "type",
+          "description": "Defines the native button type.\n\n- button\n- reset\n- submit\n\n@default button",
+          "type": "string",
+          "values": [
+            {
+              "name": "button",
+              "description": "(default)"
+            },
+            {
+              "name": "reset"
+            },
+            {
+              "name": "submit"
+            }
+          ],
+          "default": "button"
+        },
+        {
+          "name": "role",
+          "description": "ARIA role for the dropdown item.\n\n@default menuitem",
+          "type": "string",
+          "default": "menuitem"
         }
       ]
     },
     {
       "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.",
       "attributes": [
         {
           "name": "disabled",
@@ -3013,6 +3133,39 @@
           "description": "Defines if the button should have rounded edges.\n\n- `true`: The button will be rendered with completely rounded edges, useful for circular -shaped icons.\n- `false` (default): The button will have standard edges or defined by the component style.",
           "type": "boolean",
           "default": false
+        },
+        {
+          "name": "type",
+          "description": "Defines the native button type.\n\n- button\n- reset\n- submit\n\n@default button",
+          "type": "string",
+          "values": [
+            {
+              "name": "button",
+              "description": "(default)"
+            },
+            {
+              "name": "reset"
+            },
+            {
+              "name": "submit"
+            }
+          ],
+          "default": "button"
+        },
+        {
+          "name": "name",
+          "description": "The name of the button for form submission.",
+          "type": "string"
+        },
+        {
+          "name": "value",
+          "description": "The value of the button for form submission.",
+          "type": "string"
+        },
+        {
+          "name": "form",
+          "description": "Associates the button with a form element by ID.",
+          "type": "string"
         }
       ]
     },
@@ -3078,6 +3231,100 @@
           "description": "Whether the input is disabled.",
           "type": "boolean",
           "default": false
+        },
+        {
+          "name": "type",
+          "description": "The type of input element.\n\n- color\n- date\n- datetime-local\n- email\n- file\n- hidden\n- month\n- number\n- password\n- range\n- search\n- tel\n- text\n- time\n- url\n- week\n\n@default text",
+          "type": "string",
+          "values": [
+            {
+              "name": "color"
+            },
+            {
+              "name": "date"
+            },
+            {
+              "name": "datetime-local"
+            },
+            {
+              "name": "email"
+            },
+            {
+              "name": "file"
+            },
+            {
+              "name": "hidden"
+            },
+            {
+              "name": "month"
+            },
+            {
+              "name": "number"
+            },
+            {
+              "name": "password"
+            },
+            {
+              "name": "range"
+            },
+            {
+              "name": "search"
+            },
+            {
+              "name": "tel"
+            },
+            {
+              "name": "text",
+              "description": "(default)"
+            },
+            {
+              "name": "time"
+            },
+            {
+              "name": "url"
+            },
+            {
+              "name": "week"
+            }
+          ],
+          "default": "text"
+        },
+        {
+          "name": "name",
+          "description": "The name of the input for form submission.",
+          "type": "string"
+        },
+        {
+          "name": "form",
+          "description": "Associates the input with a form element by ID.",
+          "type": "string"
+        },
+        {
+          "name": "required",
+          "description": "Whether the input is required.",
+          "type": "boolean",
+          "default": false
+        },
+        {
+          "name": "readonly",
+          "description": "Whether the input is readonly.",
+          "type": "boolean",
+          "default": false
+        },
+        {
+          "name": "minlength",
+          "description": "Minimum length of the input value.",
+          "type": "number"
+        },
+        {
+          "name": "maxlength",
+          "description": "Maximum length of the input value.",
+          "type": "number"
+        },
+        {
+          "name": "pattern",
+          "description": "Regular expression pattern for input validation.",
+          "type": "string"
         }
       ]
     },
@@ -3094,6 +3341,48 @@
           "description": "Placeholder text for the password input element.",
           "type": "string"
         },
+        {
+          "name": "name",
+          "description": "The name of the input for form submission.",
+          "type": "string"
+        },
+        {
+          "name": "form",
+          "description": "Associates the input with a form element by ID.",
+          "type": "string"
+        },
+        {
+          "name": "required",
+          "description": "Whether the input is required.",
+          "type": "boolean",
+          "default": false
+        },
+        {
+          "name": "readonly",
+          "description": "Whether the input is readonly.",
+          "type": "boolean",
+          "default": false
+        },
+        {
+          "name": "autocomplete",
+          "description": "Autocomplete hint for the password input.",
+          "type": "string"
+        },
+        {
+          "name": "minlength",
+          "description": "Minimum length of the password value.",
+          "type": "number"
+        },
+        {
+          "name": "maxlength",
+          "description": "Maximum length of the password value.",
+          "type": "number"
+        },
+        {
+          "name": "pattern",
+          "description": "Regular expression pattern for password validation.",
+          "type": "string"
+        },
         {
           "name": "disabled",
           "description": "Whether the input is disabled.",
@@ -3158,6 +3447,48 @@
           "description": "Placeholder text for the search input element.",
           "type": "string"
         },
+        {
+          "name": "name",
+          "description": "The name of the input for form submission.",
+          "type": "string"
+        },
+        {
+          "name": "form",
+          "description": "Associates the input with a form element by ID.",
+          "type": "string"
+        },
+        {
+          "name": "required",
+          "description": "Whether the input is required.",
+          "type": "boolean",
+          "default": false
+        },
+        {
+          "name": "readonly",
+          "description": "Whether the input is readonly.",
+          "type": "boolean",
+          "default": false
+        },
+        {
+          "name": "autocomplete",
+          "description": "Autocomplete hint for the search input.",
+          "type": "string"
+        },
+        {
+          "name": "minlength",
+          "description": "Minimum length of the search value.",
+          "type": "number"
+        },
+        {
+          "name": "maxlength",
+          "description": "Maximum length of the search value.",
+          "type": "number"
+        },
+        {
+          "name": "pattern",
+          "description": "Regular expression pattern for search validation.",
+          "type": "string"
+        },
         {
           "name": "disabled",
           "description": "Whether the input is disabled.",
@@ -3251,6 +3582,28 @@
           "description": "Disables the radio button, disallowing user interaction.",
           "type": "boolean",
           "default": false
+        },
+        {
+          "name": "value",
+          "description": "The value of the radio button for form submission.",
+          "type": "string"
+        },
+        {
+          "name": "form",
+          "description": "Associates the radio button with a form element by ID.",
+          "type": "string"
+        },
+        {
+          "name": "required",
+          "description": "Whether the radio button is required.",
+          "type": "boolean",
+          "default": false
+        },
+        {
+          "name": "readonly",
+          "description": "Whether the radio button is readonly.",
+          "type": "boolean",
+          "default": false
         }
       ]
     },
@@ -3446,12 +3799,28 @@
             }
           ],
           "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-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.",
+      "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.",
       "attributes": [
         {
           "name": "lines",
@@ -3477,6 +3846,43 @@
           "description": "Disables the Textarea, disallowing user interaction.",
           "type": "boolean",
           "default": false
+        },
+        {
+          "name": "name",
+          "description": "The name of the textarea for form submission.",
+          "type": "string"
+        },
+        {
+          "name": "form",
+          "description": "Associates the textarea with a form element by ID.",
+          "type": "string"
+        },
+        {
+          "name": "required",
+          "description": "Whether the textarea is required for form validation.",
+          "type": "boolean",
+          "default": false
+        },
+        {
+          "name": "readonly",
+          "description": "Whether the textarea is readonly.",
+          "type": "boolean",
+          "default": false
+        },
+        {
+          "name": "placeholder",
+          "description": "Placeholder text to display when the textarea is empty.",
+          "type": "string"
+        },
+        {
+          "name": "minlength",
+          "description": "Minimum number of characters required.",
+          "type": "number"
+        },
+        {
+          "name": "maxlength",
+          "description": "Maximum number of characters allowed.",
+          "type": "number"
         }
       ]
     },
@@ -3530,6 +3936,22 @@
           "name": "id",
           "description": "Single ID associated with Toggle Input.If not provided,\nThe name will be used as Fallback to `id`.",
           "type": "string"
+        },
+        {
+          "name": "value",
+          "description": "The value of the toggle for form submission.",
+          "type": "string"
+        },
+        {
+          "name": "form",
+          "description": "Associates the toggle with a form element by ID.",
+          "type": "string"
+        },
+        {
+          "name": "required",
+          "description": "Whether the toggle is required for form validation.",
+          "type": "boolean",
+          "default": false
         }
       ]
     },
@@ -7952,6 +8374,47 @@
           "name": "href",
           "description": "Defines the destination URL of the link.\n\n** IMPORTANT: ** should only be used when `as=\"a\"`.",
           "type": "string"
+        },
+        {
+          "name": "target",
+          "description": "Defines the target attribute for links.\n\n- _blank\n- _parent\n- _self\n- _top\n\n@default \"_blank\" for external links, undefined for internal",
+          "type": "string",
+          "values": [
+            {
+              "name": "_blank"
+            },
+            {
+              "name": "_parent"
+            },
+            {
+              "name": "_self"
+            },
+            {
+              "name": "_top"
+            }
+          ],
+          "default": "\"_blank\" for external links, undefined for internal"
+        },
+        {
+          "name": "rel",
+          "description": "Defines the rel attribute for links.\n\n@default \"noopener noreferrer\" for external links with target=\"_blank\"",
+          "type": "string",
+          "default": "\"noopener noreferrer\" for external links with target=\"_blank\""
+        },
+        {
+          "name": "name",
+          "description": "The name of the button for form submission.\n** IMPORTANT: ** should only be used when `as=\"button\"`.",
+          "type": "string"
+        },
+        {
+          "name": "value",
+          "description": "The value of the button for form submission.\n** IMPORTANT: ** should only be used when `as=\"button\"`.",
+          "type": "string"
+        },
+        {
+          "name": "form",
+          "description": "Associates the button with a form element by ID.\n** IMPORTANT: ** should only be used when `as=\"button\"`.",
+          "type": "string"
         }
       ]
     },