@rarui/components 1.30.0 → 1.30.2

package/CHANGELOG.md

@@ -2,6 +2,32 @@
 
 `@rarui/components` components is a component library built with [Lit](https://lit.dev/).
 
+## 2025-11-06 `1.30.2`
+
+#### 🎉 New features
+
+- **KeyboardNavigationMixin**: Added standardized keyboard navigation mixin for consistent keyboard interaction patterns across web components. Implements WAI-ARIA keyboard patterns (Enter/Space activation, Arrow navigation, Escape close) through reusable mixin architecture with `KeyboardNavigationBehavior` interface. ([#147](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/147) by [@junior](https://git.rarolabs.com.br/junior))
+
+#### 🐛 Bug fixes
+
+- **RadioButton Form Integration**: Fixed RadioButton component not sending form value when loaded with default selected state. Added proper form value initialization in `connectedCallback()` and reactive form value updates when `selected` property changes via `updated()` lifecycle method. ([#147](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/147) by [@junior](https://git.rarolabs.com.br/junior))
+- **Select Keyboard Navigation**: Fixed Select component not opening dropdown with Enter/Space key navigation. Implemented proper keyboard event handling using new KeyboardNavigationMixin with support for Enter/Space (toggle), Arrow keys (open), and Escape (close) following accessibility standards. ([#147](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/147) by [@junior](https://git.rarolabs.com.br/junior))
+- **Banner Event Handling**: Enhanced Banner component event handling and accessibility improvements with better focus management and semantic interaction patterns. ([#147](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/147) by [@junior](https://git.rarolabs.com.br/junior))
+
+## 2025-10-20 `1.30.1`
+
+#### 🎉 New features
+
+- **BreadcrumbItem Disabled Property**: Added `disabled` property to BreadcrumbItem component allowing items to be marked as non-interactive. Disabled items prevent clicks, display with disabled styling, and include proper accessibility attributes (`aria-disabled`, `disabled` for buttons) for screen reader compatibility. ([#145](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/145) by [@junior](https://git.rarolabs.com.br/junior))
+
+#### 🐛 Bug fixes
+
+- **Breadcrumb Property Binding Optimization**: Fixed BreadcrumbItem boolean property bindings following Lit best practices. Replaced incorrect `.active=${value}` property binding with `?active=${value}` boolean attribute binding for optimal performance. Removed unnecessary boolean converter and added `reflect: true` to `active` property for CSS styling support and better debugging visibility. ([#145](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/145) by [@junior](https://git.rarolabs.com.br/junior))
+
+#### 💡 Others
+
+- **Lit Binding Standards Compliance**: Comprehensive review of Breadcrumb and BreadcrumbItem components ensuring full compliance with Lit binding best practices. Implemented proper boolean attribute binding (`?attribute`), added reflection for CSS-dependent properties, improved type safety, and enhanced accessibility with semantic HTML attributes. ([#145](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/145) by [@junior](https://git.rarolabs.com.br/junior))
+
 ## 2025-10-16 `1.30.0`
 
 #### 🎉 New features

package/custom-elements.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.29.0",
+  "version": "1.30.1",
   "tags": [
     {
       "name": "rarui-avatar",
@@ -8551,14 +8551,21 @@
         },
         {
           "name": "active",
-          "description": "Indicates whether the breadcrumb item is currently active.\nAn active item is typically styled differently to show that it represents the current page.",
-          "type": "boolean"
+          "description": "Indica se o item está ativo (representa a página atual).\nReflete no HTML para styling CSS.",
+          "type": "boolean",
+          "default": false
         },
         {
           "name": "href",
           "description": "URL de destino quando o item for um link.",
           "type": "string"
         },
+        {
+          "name": "disabled",
+          "description": "Indica se o item está desabilitado e não pode ser clicado.\nReflete no HTML para styling CSS.",
+          "type": "boolean",
+          "default": false
+        },
         {
           "name": "as",
           "description": "Tipo de elemento a ser renderizado.\n\n- a\n- button\n\n@default button",

package/dist/index.d.ts

@@ -19588,6 +19588,7 @@ declare class RaruiRadioButton extends RaruiRadioButton_base {
     static formAssociated: boolean;
     constructor();
     connectedCallback(): void;
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
     disconnectedCallback(): void;
     static styles: CSSResult;
     render(): TemplateResult<1>;
@@ -19599,6 +19600,38 @@ declare class RaruiRadioButton extends RaruiRadioButton_base {
     formResetCallback(): void;
 }
 
+/**
+ * Interface for keyboard navigation behavior
+ */
+interface KeyboardNavigationBehavior {
+    /**
+     * Called when Enter or Space key is pressed
+     */
+    handleActivation?(): void;
+    /**
+     * Called when arrow keys are pressed
+     * @param key - The arrow key pressed ('ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight')
+     */
+    handleArrowNavigation?(key: string): void;
+    /**
+     * Called when Escape key is pressed
+     */
+    handleEscape?(): void;
+    /**
+     * Called when Home key is pressed
+     */
+    handleHome?(): void;
+    /**
+     * Called when End key is pressed
+     */
+    handleEnd?(): void;
+    /**
+     * Called when Tab key is pressed
+     * @param event - The keyboard event (in case you need to prevent default)
+     */
+    handleTab?(event: KeyboardEvent): void;
+}
+
 declare global {
     interface HTMLElementTagNameMap {
         "rarui-select": RaruiSelect;
@@ -19654,6 +19687,8 @@ type SelectManifestProperties = Omit<SelectProps, "onChange" | "portalId" | "opt
 type SelectProperties = WebComponentProperties<SelectManifestProperties>;
 
 declare const RaruiSelect_base: (new (...args: any[]) => {
+    handleKeydown(event: KeyboardEvent): void;
+}) & (new (...args: any[]) => {
     ariaLabel: string | null;
     ariaLabelledBy: string | null;
     ariaDescribedBy: string | null;
@@ -19661,7 +19696,7 @@ declare const RaruiSelect_base: (new (...args: any[]) => {
     cssProps: Record<string, any>;
     sprinkleAttrs: Record<string, any>;
 }) & typeof LitElement;
-declare class RaruiSelect extends RaruiSelect_base {
+declare class RaruiSelect extends RaruiSelect_base implements KeyboardNavigationBehavior {
     static shadowRootOptions: {
         delegatesFocus: boolean;
         mode: ShadowRootMode;
@@ -19717,6 +19752,9 @@ declare class RaruiSelect extends RaruiSelect_base {
     private _handleOptionUnmount;
     private _updateContext;
     private handleSelectClick;
+    handleActivation(): void;
+    handleArrowNavigation(key: string): void;
+    handleEscape(): void;
     render(): TemplateResult<1>;
     private _renderTrigger;
     private _renderPlaceholder;
@@ -20022,6 +20060,18 @@ type BreadcrumbItemManifestProperties = BreadcrumbItemProps & {
      * URL de destino quando o item for um link.
      */
     href?: string;
+    /**
+     * Indica se o item está ativo (representa a página atual).
+     * Reflete no HTML para styling CSS.
+     * @default false
+     */
+    active?: boolean;
+    /**
+     * Indica se o item está desabilitado e não pode ser clicado.
+     * Reflete no HTML para styling CSS.
+     * @default false
+     */
+    disabled?: boolean;
     /**
      * Tipo de elemento a ser renderizado.
      * @default "button"
@@ -20049,8 +20099,11 @@ declare class RaruiBreadcrumbItem extends RaruiBreadcrumbItem_base {
     };
     name?: BreadcrumbItemProperties["name"];
     href?: BreadcrumbItemProperties["href"];
-    active?: BreadcrumbItemProperties["active"];
-    as?: BreadcrumbItemProperties["as"];
+    /** Active state - reflects to CSS for styling */
+    active: BreadcrumbItemProperties["active"];
+    /** Disabled state - reflects to CSS for styling */
+    disabled: BreadcrumbItemProperties["disabled"];
+    as: BreadcrumbItemProperties["as"];
     static styles: CSSResult;
     private handleClick;
     render(): TemplateResult<1>;