@rarui/components 1.24.2-rc.6 → 1.26.0

package/CHANGELOG.md

@@ -2,7 +2,49 @@
 
 `@rarui/components` components is a component library built with [Lit](https://lit.dev/).
 
-## 2025-09-18 `1.25.0`
+## 2025-09-25 `1.26.0`
+
+#### 🛠 Breaking changes
+
+- **Select Component Architecture Refactor**: Completely redesigned Select component to use slot-based sub-components (`rarui-select-option`, `rarui-select-optgroup`) instead of `options` property for better semantic HTML, improved accessibility, and enhanced developer experience. Migration required from `.options` arrays to slot-based markup. ([#138](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/138) by [@junior](https://git.rarolabs.com.br/junior))
+
+#### 🎉 New features
+
+- **Select Sub-Components**: Introduced `rarui-select-option` and `rarui-select-optgroup` components enabling semantic HTML structure with native option selection, default values via `selected` attribute, and improved screen reader compatibility. ([#138](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/138) by [@junior](https://git.rarolabs.com.br/junior))
+- **Context Provider System**: Implemented advanced Context Provider pattern in Select using `@lit/context` for seamless parent-child communication, state synchronization, and coordinated updates between Select and SelectOption components. ([#138](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/138) by [@junior](https://git.rarolabs.com.br/junior))
+- **MutationObserver Integration**: Added intelligent DOM change detection with MutationObserver to automatically sync Select state when SelectOption children are added, removed, or modified, ensuring consistent UI state. ([#138](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/138) by [@junior](https://git.rarolabs.com.br/junior))
+- **Enhanced Checkbox Integration**: Improved multiple selection with properly controlled checkbox states using readonly checkboxes as visual indicators while maintaining click interaction through parent dropdown items. ([#138](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/138) by [@junior](https://git.rarolabs.com.br/junior))
+- **Manual Dropdown Dismiss Control**: Implemented custom click-outside and ESC key handling with complete `menuOpen` state control, replacing automatic dropdown dismiss for better programmatic control and consistent behavior. ([#138](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/138) by [@junior](https://git.rarolabs.com.br/junior))
+
+#### 🐛 Bug fixes
+
+- **Multiple Select FormData Fix**: Corrected FormData handling for multiple selections to create proper multiple entries with same name instead of comma-separated strings, ensuring native form submission compatibility. ([#138](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/138) by [@junior](https://git.rarolabs.com.br/junior))
+- **Checkbox Boolean Binding**: Standardized Checkbox component property bindings using proper Lit conventions (`?checked=${value}` vs `checked="${value}"`) for consistent boolean attribute handling and resolved diagnostic warnings. ([#138](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/138) by [@junior](https://git.rarolabs.com.br/junior))
+- **Selection State Synchronization**: Fixed selection state inconsistencies by establishing Context as single source of truth, eliminating conflicts between local component state and parent coordination. ([#138](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/138) by [@junior](https://git.rarolabs.com.br/junior))
+- **Form Value Updates**: Enhanced form integration by ensuring `_updateFormValue()` is called in all selection change scenarios (`handleSelect`, `handleRemoveOption`, chip removal) for consistent FormData synchronization. ([#138](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/138) by [@junior](https://git.rarolabs.com.br/junior))
+
+#### 💡 Others
+
+- **Code Organization Improvements**: Refactored Select component render method by dividing large `render()` function into focused sub-methods (`_renderTrigger`, `_renderPlaceholder`, `_renderSelectedOptions`, `_renderControls`, `_renderContent`) for improved maintainability. ([#138](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/138) by [@junior](https://git.rarolabs.com.br/junior))
+
+## 2025-09-23 `1.25.0`
+
+#### 🎉 New features
+
+- Implemented comprehensive accessibility improvements across ALL web components following WCAG guidelines and modern web standards with complete ARIA properties, focus management, and screen reader compatibility. ([#137](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/137) by [@junior](https://git.rarolabs.com.br/junior))
+- Enhanced all interactive components (Button, Input, Checkbox, RadioButton, Toggle, IconButton, Chip, Dropdown, Select, Link, SideNavigation Item, Breadcrumb Item, Accordion Header, Modal, Sidebar, Tabs) with `delegatesFocus: true` for seamless keyboard navigation and focus management. ([#137](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/137) by [@junior](https://git.rarolabs.com.br/junior))
+- Added standardized ARIA properties (`aria-label`, `aria-labelledby`, `aria-describedby`) with `reflect: true` to ALL components (60+ components) ensuring proper screen reader support and accessibility compliance. ([#137](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/137) by [@junior](https://git.rarolabs.com.br/junior))
+- Eliminated ARIA attribute duplication between host elements and shadow DOM following Lit accessibility best practices for optimal screen reader compatibility. ([#137](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/137) by [@junior](https://git.rarolabs.com.br/junior))
+- Created comprehensive accessibility implementation guide (`accessibility-guide-lit.md`) with detailed patterns, examples, validation checklists, and testing guidelines for all web component types. ([#137](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/137) by [@junior](https://git.rarolabs.com.br/junior))
+- Enhanced RadioButton component with native HTML group behavior ensuring only one radio button per `name` can be selected using event-driven communication pattern. ([#137](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/137) by [@junior](https://git.rarolabs.com.br/junior))
+- Updated CLAUDE.md development documentation with comprehensive accessibility implementation standards and quick reference patterns for maintaining consistent accessibility across future components. ([#137](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/137) by [@junior](https://git.rarolabs.com.br/junior))
+
+#### 💡 Others
+
+- Fixed missing `ifDefined` imports across multiple components that were accidentally removed during cleanup process, ensuring proper template directive functionality. ([#137](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/137) by [@junior](https://git.rarolabs.com.br/junior))
+- Improved component type compatibility by standardizing ARIA property types to `string | null` matching LitElement base class requirements. ([#137](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/137) by [@junior](https://git.rarolabs.com.br/junior))
+
+## 2025-09-18 `1.24.1`
 
 #### 🎉 New features
 

package/custom-elements.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.24.2-rc.6",
+  "version": "1.25.0",
   "tags": [
     {
       "name": "rarui-avatar",
@@ -1361,6 +1361,12 @@
           "name": "for",
           "description": "The for attribute specifies which form element a label is bound to.",
           "type": "string"
+        },
+        {
+          "name": "hidden",
+          "description": "Specifies whether the label is hidden or not",
+          "type": "boolean",
+          "default": false
         }
       ]
     },
@@ -3622,217 +3628,6 @@
         }
       ]
     },
-    {
-      "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": "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": "options",
-          "description": "Options for the Select component. This should be an array of SelectOptionProps objects.\n\n(Required)",
-          "type": "array"
-        },
-        {
-          "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-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.",
@@ -7813,7 +7608,7 @@
         },
         {
           "name": "as",
-          "description": "Changes the rendered element.\n\n- a\n- abbr\n- address\n- area\n- article\n- aside\n- audio\n- b\n- base\n- bdi\n- bdo\n- blockquote\n- body\n- br\n- button\n- canvas\n- caption\n- cite\n- code\n- col\n- colgroup\n- data\n- datalist\n- dd\n- del\n- details\n- dfn\n- dialog\n- div\n- dl\n- dt\n- em\n- embed\n- fieldset\n- figcaption\n- figure\n- footer\n- form\n- h1\n- h2\n- h3\n- h4\n- h5\n- h6\n- head\n- header\n- hgroup\n- hr\n- html\n- i\n- iframe\n- img\n- input\n- ins\n- kbd\n- label\n- legend\n- li\n- link\n- main\n- map\n- mark\n- menu\n- meta\n- meter\n- nav\n- noscript\n- object\n- ol\n- optgroup\n- option\n- output\n- p\n- picture\n- pre\n- progress\n- q\n- rarui-accordion\n- rarui-accordion-body\n- rarui-accordion-header\n- rarui-accordion-item\n- rarui-avatar\n- rarui-badge\n- rarui-banner\n- rarui-box\n- rarui-breadcrumb\n- rarui-breadcrumb-item\n- rarui-button\n- rarui-card\n- rarui-card-body\n- rarui-card-header\n- rarui-checkbox\n- rarui-chip\n- rarui-divider\n- rarui-dropdown\n- rarui-dropdown-item\n- rarui-icon\n- rarui-icon-button\n- rarui-input\n- rarui-label\n- rarui-link\n- rarui-modal\n- rarui-modal-footer\n- rarui-modal-header\n- rarui-pagination\n- rarui-progress\n- rarui-progress-circle\n- rarui-radio-button\n- rarui-select\n- rarui-side-navigation\n- rarui-side-navigation-item\n- rarui-sidebar\n- rarui-skeleton\n- rarui-status\n- rarui-stepper\n- rarui-stepper-step\n- rarui-tabs\n- rarui-text\n- rarui-textarea\n- rarui-theme-provider\n- rarui-title\n- rarui-toggle\n- rarui-tooltip\n- rp\n- rt\n- ruby\n- s\n- samp\n- script\n- section\n- select\n- slot\n- small\n- source\n- span\n- strong\n- style\n- sub\n- summary\n- sup\n- table\n- tbody\n- td\n- template\n- textarea\n- tfoot\n- th\n- thead\n- time\n- title\n- tr\n- track\n- u\n- ul\n- var\n- video\n- wbr\n\n@default div",
+          "description": "Changes the rendered element.\n\n- a\n- abbr\n- address\n- area\n- article\n- aside\n- audio\n- b\n- base\n- bdi\n- bdo\n- blockquote\n- body\n- br\n- button\n- canvas\n- caption\n- cite\n- code\n- col\n- colgroup\n- data\n- datalist\n- dd\n- del\n- details\n- dfn\n- dialog\n- div\n- dl\n- dt\n- em\n- embed\n- fieldset\n- figcaption\n- figure\n- footer\n- form\n- h1\n- h2\n- h3\n- h4\n- h5\n- h6\n- head\n- header\n- hgroup\n- hr\n- html\n- i\n- iframe\n- img\n- input\n- ins\n- kbd\n- label\n- legend\n- li\n- link\n- main\n- map\n- mark\n- menu\n- meta\n- meter\n- nav\n- noscript\n- object\n- ol\n- optgroup\n- option\n- output\n- p\n- picture\n- pre\n- progress\n- q\n- rarui-accordion\n- rarui-accordion-body\n- rarui-accordion-header\n- rarui-accordion-item\n- rarui-avatar\n- rarui-badge\n- rarui-banner\n- rarui-box\n- rarui-breadcrumb\n- rarui-breadcrumb-item\n- rarui-button\n- rarui-card\n- rarui-card-body\n- rarui-card-header\n- rarui-checkbox\n- rarui-chip\n- rarui-divider\n- rarui-dropdown\n- rarui-dropdown-item\n- rarui-icon\n- rarui-icon-button\n- rarui-input\n- rarui-label\n- rarui-link\n- rarui-modal\n- rarui-modal-footer\n- rarui-modal-header\n- rarui-pagination\n- rarui-progress\n- rarui-progress-circle\n- rarui-radio-button\n- rarui-select\n- rarui-select-optgroup\n- rarui-select-option\n- rarui-side-navigation\n- rarui-side-navigation-item\n- rarui-sidebar\n- rarui-skeleton\n- rarui-status\n- rarui-stepper\n- rarui-stepper-step\n- rarui-tabs\n- rarui-text\n- rarui-textarea\n- rarui-theme-provider\n- rarui-title\n- rarui-toggle\n- rarui-tooltip\n- rp\n- rt\n- ruby\n- s\n- samp\n- script\n- section\n- select\n- slot\n- small\n- source\n- span\n- strong\n- style\n- sub\n- summary\n- sup\n- table\n- tbody\n- td\n- template\n- textarea\n- tfoot\n- th\n- thead\n- time\n- title\n- tr\n- track\n- u\n- ul\n- var\n- video\n- wbr\n\n@default div",
           "type": "string",
           "values": [
             {
@@ -8144,6 +7939,12 @@
             {
               "name": "rarui-select"
             },
+            {
+              "name": "rarui-select-optgroup"
+            },
+            {
+              "name": "rarui-select-option"
+            },
             {
               "name": "rarui-side-navigation"
             },