@rarui/components 1.30.3 → 1.31.1

package/CHANGELOG.md

@@ -2,6 +2,35 @@
 
 `@rarui/components` components is a component library built with [Lit](https://lit.dev/).
 
+## 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
+
+- **Banner Tonal Property**: Added `tonal` property to Banner component enabling subdued color variants for all appearance types. When enabled, displays softer, less vibrant versions of appearance colors for a more subtle presentation. ([#149](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/149) by [@junior](https://git.rarolabs.com.br/junior))
+
+#### 💡 Others
+
+- **Banner Property Binding Improvements**: Enhanced Banner component property bindings following Lit best practices. Added `reflect: true` to all visual properties (appearance, floating, closable, tonal) for better CSS styling support and debugging visibility. Removed unnecessary boolean converters as Lit handles boolean attributes automatically. Added default value `"brand"` to `appearance` property for consistency with React implementation. ([#149](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/149) by [@junior](https://git.rarolabs.com.br/junior))
+
 ## 2025-11-14 `1.30.3`
 
 #### 🐛 Bug fixes

package/custom-elements.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.30.3",
+  "version": "1.31.0",
   "tags": [
     {
       "name": "rarui-avatar",
@@ -3212,9 +3212,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 +3247,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"
+            }
+          ]
         }
       ]
     },
@@ -9112,6 +9151,12 @@
           "type": "boolean",
           "default": false
         },
+        {
+          "name": "tonal",
+          "description": "Enables subdued color variants for the banner. When true, uses softer, less vibrant versions of the appearance colors for a more subtle presentation.",
+          "type": "boolean",
+          "default": false
+        },
         {
           "name": "closable",
           "description": "If `true`, display the closing button in the upper right corner of the banner.\nWhen clicked, it fires the `close` event that can be listened to externally.",

package/dist/index.d.ts

@@ -17305,6 +17305,13 @@ declare const bannerStyles: {
                 borderRadius: `var(--${string})` | `var(--${string}, ${string})`;
             };
         };
+        /**
+         * Enables subdued color variants for the banner. When true, uses softer, less vibrant versions of the appearance colors for a more subtle presentation.
+         * @default false
+         */
+        tonal: {
+            true: {};
+        };
     }>;
 };
 
@@ -19363,26 +19370,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;
@@ -19394,20 +19419,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 {
@@ -19574,17 +19603,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;
@@ -19595,6 +19627,8 @@ declare class RaruiRadioButton extends RaruiRadioButton_base {
     private _onChange;
     private _handleRadioGroupChange;
     private _notifyRadioGroupSelection;
+    private _updateGroupInfo;
+    private _setupGroupObserver;
     focus(): void;
     blur(): void;
     formResetCallback(): void;
@@ -19925,10 +19959,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"];
@@ -20556,9 +20590,10 @@ declare const RaruiBanner_base: (new (...args: any[]) => {
     ariaDescribedBy: string | null;
 }) & typeof LitElement;
 declare class RaruiBanner extends RaruiBanner_base {
-    appearance?: BannerProperties["appearance"];
+    appearance: BannerProperties["appearance"];
     floating: BannerProperties["floating"];
     closable: BannerProperties["closable"];
+    tonal: BannerProperties["tonal"];
     static styles: CSSResult;
     private handleClose;
     render(): TemplateResult<1>;