@rarui/components 1.31.0 → 1.32.0

package/CHANGELOG.md

@@ -2,6 +2,37 @@
 
 `@rarui/components` components is a component library built with [Lit](https://lit.dev/).
 
+## 2026-01-19 `1.32.0`
+
+#### 🎉 New features
+
+- **Modal Header title Property**: Added `title` and `subtitle` properties to ModalHeader component for simplified modal header creation. When provided, automatically renders title as `<rarui-title as="h5">` and subtitle as `<rarui-text>` with appropriate styling, eliminating the need for manual slot content for common use cases. ([#151](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/151) by [@junior](https://git.rarolabs.com.br/junior))
+
+#### 🐛 Bug fixes
+
+- **Select Form Value Clear Fix**: Fixed Select component not clearing form values when clicking the clear all options button in multiple selection mode. Added missing `_updateFormValue()` call in `handleResetOptions()` method to properly sync FormData with ElementInternals API, ensuring form submission reflects cleared state. ([#151](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/151) by [@junior](https://git.rarolabs.com.br/junior))
+- **Banner Tonal Close Button Color**: Fixed Banner component close button color inconsistency in tonal variant. Implemented `getTonalColorButtonClose` mapping to ensure close button uses appropriate appearance colors (brand, warning, error, success, primary) based on banner appearance when tonal variant is enabled, improving visual consistency and readability. ([#151](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/151) by [@junior](https://git.rarolabs.com.br/junior))
+- **RadioButton Shape Preservation**: Fixed RadioButton component visual deformation when label text becomes too large. Radio button now maintains its circular shape with proper `minWidth` and `minHeight` constraints (1.25rem for small, 1.5rem for large), preventing flex container from shrinking the radio circle regardless of label length. ([#151](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/151) by [@junior](https://git.rarolabs.com.br/junior))
+
+## 2025-11-26 `1.31.1`
+
+#### 🎉 New features
+
+- **IconButton `as` Property**: Added `as` property to IconButton component allowing it to render as either `button` (default) or `a` elements. When `as="a"` is used, the component accepts `href` and `target` properties for link behavior while maintaining the same visual styling and click event handling. Form-related functionality (submit/reset) is only active when `as="button"`. Also added `PassThroughAttributesMixin` for data-* attribute support and improved property bindings with `reflect: true` for better debugging. ([#150](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/150) by [@junior](https://git.rarolabs.com.br/junior))
+- **RadioButton Screen Reader Group Announcement**: Enhanced RadioButton component with ARIA group position attributes (`aria-setsize`, `aria-posinset`) for proper screen reader announcements. Radio buttons now correctly announce their position within the group (e.g., "option 1 of 4" instead of "option 1 of 1"). Includes automatic group detection via MutationObserver for dynamic DOM updates. ([#150](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/150) by [@junior](https://git.rarolabs.com.br/junior))
+
+#### 🐛 Bug fixes
+
+- **Select Keyboard Navigation**: Fixed Select component keyboard navigation where Enter key on options was not closing the menu. Moved `@keydown` handler from dropdown to trigger element only, preventing option events from propagating and triggering menu toggle. ([#150](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/150) by [@junior](https://git.rarolabs.com.br/junior))
+- **Checkbox Readonly Focus Ring**: Fixed Checkbox component showing focus ring when in readonly state. Added `:focus-within:not(:read-only)` CSS selector to prevent focus ring, set `tabindex="-1"` to make readonly checkboxes non-focusable, and added `aria-readonly` attribute for screen readers. Updated hover overlay styles to exclude readonly state. ([#150](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/150) by [@junior](https://git.rarolabs.com.br/junior))
+- **Select Clear Button Keyboard Navigation**: Fixed Select multiple clear options button not working with Space key. Added `stopPropagation()` for Space/Enter keyboard events on the clear button to prevent the events from bubbling up to parent trigger's keydown handler which was opening the menu instead of clearing options. ([#150](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/150) by [@junior](https://git.rarolabs.com.br/junior))
+
+#### 💡 Others
+
+- **Toggle Property Binding Improvements**: Enhanced Toggle component property bindings following Lit best practices. Added `reflect: true` to all visual and state properties (size, error, selected, disabled, required) for better CSS styling support and debugging visibility. Removed unnecessary boolean converters as Lit handles boolean attributes automatically. Added explicit default values for `selected` and `disabled` properties for consistency. ([#150](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/150) by [@junior](https://git.rarolabs.com.br/junior))
+- **RadioButton Property Binding Improvements**: Enhanced RadioButton component property bindings following Lit best practices. Added `reflect: true` to all visual and state properties (disabled, size, error, selected, required, readonly) for better CSS styling support and debugging visibility. Removed unnecessary boolean converters and optional types on properties with default values. ([#150](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/150) by [@junior](https://git.rarolabs.com.br/junior))
+- **Screen Reader Improvements**: Added `aria-hidden="true"` to decorative text elements (Toggle label, Checkbox label, RadioButton label) to prevent duplicate screen reader announcements. Labels are now properly announced via `aria-label` on input elements only. ([#150](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/150) by [@junior](https://git.rarolabs.com.br/junior))
+
 ## 2025-11-25 `1.31.0`
 
 #### 🎉 New features

package/custom-elements.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.30.3",
+  "version": "1.31.1",
   "tags": [
     {
       "name": "rarui-avatar",
@@ -2493,6 +2493,33 @@
             }
           ],
           "default": "solid"
+        },
+        {
+          "name": "min-width",
+          "description": "The **`min-width`** CSS property sets the minimum width of an element. It prevents the used value of the `width` property from becoming smaller than the value specified for `min-width`. 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"
+            }
+          ]
         }
       ]
     },
@@ -3212,9 +3239,24 @@
           "type": "boolean",
           "default": false
         },
+        {
+          "name": "as",
+          "description": "Defines the HTML element type to render.\n\n- a\n- button\n\n@default button",
+          "type": "string",
+          "values": [
+            {
+              "name": "a"
+            },
+            {
+              "name": "button",
+              "description": "(default)"
+            }
+          ],
+          "default": "button"
+        },
         {
           "name": "type",
-          "description": "Defines the native button type.\n\n- button\n- reset\n- submit\n\n@default button",
+          "description": "Defines the native button type. Only applies when as=\"button\".\n\n- button\n- reset\n- submit\n\n@default button",
           "type": "string",
           "values": [
             {
@@ -3232,18 +3274,42 @@
         },
         {
           "name": "name",
-          "description": "The name of the button for form submission.",
+          "description": "The name of the button for form submission. Only applies when as=\"button\".",
           "type": "string"
         },
         {
           "name": "value",
-          "description": "The value of the button for form submission.",
+          "description": "The value of the button for form submission. Only applies when as=\"button\".",
           "type": "string"
         },
         {
           "name": "form",
-          "description": "Associates the button with a form element by ID.",
+          "description": "Associates the button with a form element by ID. Only applies when as=\"button\".",
+          "type": "string"
+        },
+        {
+          "name": "href",
+          "description": "The URL to navigate to. Only applies when as=\"a\".",
           "type": "string"
+        },
+        {
+          "name": "target",
+          "description": "Specifies where to open the linked document. Only applies when as=\"a\".\n\n- _blank\n- _parent\n- _self\n- _top",
+          "type": "string",
+          "values": [
+            {
+              "name": "_blank"
+            },
+            {
+              "name": "_parent"
+            },
+            {
+              "name": "_self"
+            },
+            {
+              "name": "_top"
+            }
+          ]
         }
       ]
     },

package/dist/index.d.ts

@@ -17020,7 +17020,9 @@ declare const styles$3: {
         size: {
             small: {
                 width: "1.25rem";
+                minWidth: "1.25rem";
                 height: "1.25rem";
+                minHeight: "1.25rem";
                 ":before": {
                     width: "2rem";
                     height: "2rem";
@@ -17032,7 +17034,9 @@ declare const styles$3: {
             };
             large: {
                 width: "1.5rem";
+                minWidth: "1.5rem";
                 height: "1.5rem";
+                minHeight: "1.5rem";
                 ":before": {
                     width: "2.75rem";
                     height: "2.75rem";
@@ -17259,6 +17263,8 @@ declare const statusStyles: {
 };
 
 type StatusVariants = NonNullable<RecipeVariants<typeof statusStyles.status>>;
+type StatusDynamicProperties = Pick<StandardLonghandProperties, "minWidth">;
+type StatusSprinkle = StatusDynamicProperties;
 
 declare const bannerStyles: {
     banner: RuntimeFn<{
@@ -18014,7 +18020,7 @@ interface StatusTyping {
      */
     dot?: boolean;
 }
-type StatusProps = StatusTyping & StatusVariants;
+type StatusProps = StatusTyping & StatusVariants & StatusSprinkle;
 
 interface ButtonTyping {
     /**
@@ -18900,6 +18906,13 @@ type StatusManifestProperties = StatusProps;
 type StatusProperties = WebComponentProperties<StatusManifestProperties>;
 
 declare const RaruiStatus_base: (new (...args: any[]) => {
+    cssProps: Record<string, any>;
+    sprinkleAttrs: Record<string, any>;
+}) & (new (...args: any[]) => {
+    ariaLabel: string | null;
+    ariaLabelledBy: string | null;
+    ariaDescribedBy: string | null;
+}) & (new (...args: any[]) => {
     ariaLabel: string | null;
     ariaLabelledBy: string | null;
     ariaDescribedBy: string | null;
@@ -19370,26 +19383,44 @@ declare global {
  */
 type IconButtonManifestProperties = IconButtonProps & {
     /**
-     * Defines the native button type.
+     * Defines the HTML element type to render.
+     * @default button
+     */
+    as?: "button" | "a";
+    /**
+     * Defines the native button type. Only applies when as="button".
      * @default button
      */
     type?: "button" | "submit" | "reset";
     /**
-     * The name of the button for form submission.
+     * The name of the button for form submission. Only applies when as="button".
      */
     name?: string;
     /**
-     * The value of the button for form submission.
+     * The value of the button for form submission. Only applies when as="button".
      */
     value?: string;
     /**
-     * Associates the button with a form element by ID.
+     * Associates the button with a form element by ID. Only applies when as="button".
      */
     form?: string;
+    /**
+     * The URL to navigate to. Only applies when as="a".
+     */
+    href?: string;
+    /**
+     * Specifies where to open the linked document. Only applies when as="a".
+     */
+    target?: "_blank" | "_self" | "_parent" | "_top";
 };
 type IconButtonProperties = WebComponentProperties<IconButtonManifestProperties>;
 
 declare const RaruiIconButton_base: (new (...args: any[]) => {
+    getPassThroughAttributes(allowedPrefixes?: string[], excludedAttributes?: string[]): Record<string, string>;
+    isManagedAttribute(attrName: string, additionalManagedAttrs?: string[]): boolean;
+    getDataAttributes(excludedAttributes?: string[]): Record<string, string>;
+    getDataAndAriaAttributes(excludedAttributes?: string[]): Record<string, string>;
+}) & (new (...args: any[]) => {
     ariaLabel: string | null;
     ariaLabelledBy: string | null;
     ariaDescribedBy: string | null;
@@ -19401,20 +19432,24 @@ declare class RaruiIconButton extends RaruiIconButton_base {
         serializable?: boolean;
         slotAssignment?: SlotAssignmentMode;
     };
+    type: IconButtonProperties["type"];
     size: IconButtonProperties["size"];
     variant: IconButtonProperties["variant"];
     appearance: IconButtonProperties["appearance"];
     disabled: IconButtonProperties["disabled"];
     rounded: IconButtonProperties["rounded"];
-    type: IconButtonProperties["type"];
     name: IconButtonProperties["name"];
     value: IconButtonProperties["value"];
     form: IconButtonProperties["form"];
+    as: IconButtonProperties["as"];
+    href: IconButtonProperties["href"];
+    target: IconButtonProperties["target"];
     ariaPressed: "true" | "false" | "mixed" | null;
     ariaExpanded: "true" | "false" | null;
     static styles: CSSResult;
-    private handleClick;
+    private renderContent;
     render(): TemplateResult<1>;
+    private _handleClick;
 }
 
 declare global {
@@ -19581,17 +19616,20 @@ declare const RaruiRadioButton_base: (new (...args: any[]) => {
 }) & typeof LitElement;
 declare class RaruiRadioButton extends RaruiRadioButton_base {
     id: string;
-    disabled: boolean;
+    disabled: RadioButtonProperties["disabled"];
     name?: string;
     label?: RadioButtonProperties["label"];
-    size?: RadioButtonProperties["size"];
-    error?: RadioButtonProperties["error"];
-    selected?: RadioButtonProperties["selected"];
+    size: RadioButtonProperties["size"];
+    error: RadioButtonProperties["error"];
+    selected: RadioButtonProperties["selected"];
     value: RadioButtonProperties["value"];
     form: RadioButtonProperties["form"];
     required: RadioButtonProperties["required"];
     readonly: RadioButtonProperties["readonly"];
     private _internals;
+    private _groupSize;
+    private _positionInGroup;
+    private _groupObserver?;
     static formAssociated: boolean;
     constructor();
     connectedCallback(): void;
@@ -19602,6 +19640,8 @@ declare class RaruiRadioButton extends RaruiRadioButton_base {
     private _onChange;
     private _handleRadioGroupChange;
     private _notifyRadioGroupSelection;
+    private _updateGroupInfo;
+    private _setupGroupObserver;
     focus(): void;
     blur(): void;
     formResetCallback(): void;
@@ -19932,10 +19972,10 @@ declare class RaruiToggle extends RaruiToggle_base {
     };
     name: ToggleProperties["name"];
     label: ToggleProperties["label"];
-    size?: ToggleProperties["size"];
+    size: ToggleProperties["size"];
     error: ToggleProperties["error"];
-    selected?: ToggleProperties["selected"];
-    disabled?: ToggleProperties["disabled"];
+    selected: ToggleProperties["selected"];
+    disabled: ToggleProperties["disabled"];
     value: ToggleProperties["value"];
     form: ToggleProperties["form"];
     required: ToggleProperties["required"];