@rarui/components 1.24.1 → 1.24.2-rc.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (72) hide show
  1. package/custom-elements.json +194 -59
  2. package/dist/index.d.ts +40 -35
  3. package/dist/index.js +42 -40
  4. package/package.json +5 -5
  5. package/src/exhibition/Avatar/CHANGELOG.md +32 -0
  6. package/src/exhibition/Avatar/README.md +15 -0
  7. package/src/exhibition/Badge/CHANGELOG.md +32 -0
  8. package/src/exhibition/Badge/README.md +15 -0
  9. package/src/exhibition/Divider/CHANGELOG.md +26 -0
  10. package/src/exhibition/Divider/README.md +15 -0
  11. package/src/exhibition/Icon/CHANGELOG.md +32 -0
  12. package/src/exhibition/Icon/README.md +15 -0
  13. package/src/exhibition/Label/CHANGELOG.md +38 -0
  14. package/src/exhibition/Label/README.md +15 -0
  15. package/src/exhibition/Stepper/CHANGELOG.md +31 -0
  16. package/src/exhibition/Stepper/README.md +15 -0
  17. package/src/exhibition/Text/CHANGELOG.md +39 -0
  18. package/src/exhibition/Text/README.md +15 -0
  19. package/src/exhibition/Title/CHANGELOG.md +39 -0
  20. package/src/exhibition/Title/README.md +15 -0
  21. package/src/exhibition/Tooltip/CHANGELOG.md +26 -0
  22. package/src/exhibition/Tooltip/README.md +15 -0
  23. package/src/feedback/Progress/CHANGELOG.md +28 -0
  24. package/src/feedback/Progress/README.md +15 -0
  25. package/src/feedback/Skeleton/CHANGELOG.md +26 -0
  26. package/src/feedback/Skeleton/README.md +15 -0
  27. package/src/feedback/Status/CHANGELOG.md +26 -0
  28. package/src/feedback/Status/README.md +15 -0
  29. package/src/input/Button/CHANGELOG.md +59 -0
  30. package/src/input/Button/README.md +15 -0
  31. package/src/input/Checkbox/CHANGELOG.md +45 -0
  32. package/src/input/Checkbox/README.md +15 -0
  33. package/src/input/Chip/CHANGELOG.md +43 -0
  34. package/src/input/Chip/README.md +15 -0
  35. package/src/input/Dropdown/CHANGELOG.md +41 -0
  36. package/src/input/Dropdown/README.md +15 -0
  37. package/src/input/IconButton/CHANGELOG.md +28 -0
  38. package/src/input/IconButton/README.md +15 -0
  39. package/src/input/Input/CHANGELOG.md +46 -0
  40. package/src/input/Input/README.md +44 -0
  41. package/src/input/RadioButton/CHANGELOG.md +28 -0
  42. package/src/input/RadioButton/README.md +15 -0
  43. package/src/input/Select/CHANGELOG.md +43 -0
  44. package/src/input/Select/README.md +13 -0
  45. package/src/input/Textarea/CHANGELOG.md +38 -0
  46. package/src/input/Textarea/README.md +15 -0
  47. package/src/input/Toggle/CHANGELOG.md +28 -0
  48. package/src/input/Toggle/README.md +15 -0
  49. package/src/layout/Box/CHANGELOG.md +50 -0
  50. package/src/layout/Box/README.md +15 -0
  51. package/src/layout/Sidebar/CHANGELOG.md +28 -0
  52. package/src/layout/Sidebar/README.md +109 -0
  53. package/src/navigation/Breadcrumb/CHANGELOG.md +26 -0
  54. package/src/navigation/Breadcrumb/README.md +56 -0
  55. package/src/navigation/Link/CHANGELOG.md +28 -0
  56. package/src/navigation/Link/README.md +15 -0
  57. package/src/navigation/Pagination/CHANGELOG.md +28 -0
  58. package/src/navigation/Pagination/README.md +15 -0
  59. package/src/navigation/SideNavigation/CHANGELOG.md +33 -0
  60. package/src/navigation/SideNavigation/README.md +87 -0
  61. package/src/navigation/Tabs/CHANGELOG.md +40 -0
  62. package/src/navigation/Tabs/README.md +9 -0
  63. package/src/stylization/ThemeProvider/CHANGELOG.md +32 -0
  64. package/src/stylization/ThemeProvider/README.md +56 -0
  65. package/src/surface/Accordion/CHANGELOG.md +28 -0
  66. package/src/surface/Accordion/README.md +93 -0
  67. package/src/surface/Banner/CHANGELOG.md +26 -0
  68. package/src/surface/Banner/README.md +15 -0
  69. package/src/surface/Card/CHANGELOG.md +29 -0
  70. package/src/surface/Card/README.md +15 -0
  71. package/src/surface/Modal/CHANGELOG.md +30 -0
  72. package/src/surface/Modal/README.md +15 -0
@@ -0,0 +1,50 @@
1
+ # Changelog
2
+
3
+ A low-level utility component that accepts styled system props to enable custom theme-aware styling
4
+
5
+ ## 2025-09-04 `2.7.0`
6
+
7
+ #### 🎉 New features
8
+
9
+ - Added comprehensive accessibility support with ARIA attributes (aria-label, aria-labelledby, aria-describedby) for screen reader compatibility. ([#134](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/134) by [@junior](https://git.rarolabs.com.br/junior))
10
+
11
+ ## 2025-08-29 `2.6.0`
12
+
13
+ #### 🎉 New features
14
+
15
+ - Added support for `as` property to enable polymorphic element rendering. ([#130](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/130) by [@junior](https://git.rarolabs.com.br/junior))
16
+
17
+ ## 2025-08-27 `2.5.0`
18
+
19
+ #### 🎉 New features
20
+
21
+ - Adding `verticalAlign` and `whiteSpace` property to the component.
22
+
23
+ ## 2025-05-27 `1.2.0`
24
+
25
+ #### 🎉 New features
26
+
27
+ - Added the `custom-elements.json` file to the package for automatic documentation tools and web component support editors. ([#110](https://git.rarolabs.com.br/frontend/rarui/pull/110) by [@junior](https://git.rarolabs.com.br/junior))
28
+
29
+ ## 2025-05-23 `1.1.0`
30
+
31
+ #### 🎉 New features
32
+
33
+ - Adjusted the creation of components for `lit` use to `stencil` Inves. ([#109](https://git.rarolabs.com.br/frontend/rarui/pull/109) by [@junior](https://git.rarolabs.com.br/junior))
34
+
35
+ ## 2024-08-06 `1.0.0`
36
+
37
+ #### 🎉 New features
38
+
39
+ - Added properties `css` to the Component. ([#87](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/87) by [@junior](https://git.rarolabs.com.br/junior))
40
+ - Added stories on Component. ([#87](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/87) by [@junior](https://git.rarolabs.com.br/junior))
41
+
42
+ <!-- #### 🛠 Breaking changes -->
43
+
44
+ <!-- #### 📚 3rd party library updates -->
45
+
46
+ <!-- #### 🎉 New features -->
47
+
48
+ <!-- #### 🐛 Bug fixes -->
49
+
50
+ <!-- #### 💡 Others -->
@@ -0,0 +1,15 @@
1
+ # `@rarui/box`
2
+
3
+ A low-level utility component that accepts styled system props to enable custom theme-aware styling
4
+
5
+ ## Installation
6
+
7
+ ```sh
8
+ $ yarn add @rarui/box
9
+ # or
10
+ $ npm install @rarui/box
11
+ ```
12
+
13
+ ## Usage
14
+
15
+ View docs [here]().
@@ -0,0 +1,28 @@
1
+ # Changelog
2
+
3
+ A sidebar component that slides in from the left or right side of the screen, with floating-ui positioning for responsive behavior.
4
+
5
+ ## 2025-09-04 `0.1.0`
6
+
7
+ #### 🎉 New features
8
+
9
+ - Enhanced accessibility support with additional ARIA attributes (aria-label, aria-labelledby, aria-describedby) for improved screen reader compatibility. ([#134](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/134) by [@junior](https://git.rarolabs.com.br/junior))
10
+
11
+ ## 2025-09-01 `0.0.0`
12
+
13
+ #### 🎉 New features
14
+
15
+ - Added web component implementation of Sidebar with floating-ui integration. ([#132](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/132) by [@junior](https://git.rarolabs.com.br/junior))
16
+ - Added intelligent positioning system using floating-ui for responsive behavior. ([#132](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/132) by [@junior](https://git.rarolabs.com.br/junior))
17
+ - Added automatic viewport adaptation and overflow prevention. ([#132](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/132) by [@junior](https://git.rarolabs.com.br/junior))
18
+ - Added comprehensive accessibility features with focus management. ([#132](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/132) by [@junior](https://git.rarolabs.com.br/junior))
19
+ - Added portal system for flexible rendering locations. ([#132](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/132) by [@junior](https://git.rarolabs.com.br/junior))
20
+ - Added custom events for state change tracking. ([#132](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/132) by [@junior](https://git.rarolabs.com.br/junior))
21
+
22
+ <!-- #### 🛠 Breaking changes -->
23
+
24
+ <!-- #### 📚 3rd party library updates -->
25
+
26
+ <!-- #### 🐛 Bug fixes -->
27
+
28
+ <!-- #### 💡 Others -->
@@ -0,0 +1,109 @@
1
+ # Rarui Sidebar
2
+
3
+ A sidebar component that slides in from the left or right side of the screen, with intelligent positioning for responsive behavior.
4
+
5
+ ## Installation
6
+
7
+ ```bash
8
+ npm install @rarui/sidebar
9
+ # or
10
+ yarn add @rarui/sidebar
11
+ ```
12
+
13
+ ## Usage
14
+
15
+ ```html
16
+ <rarui-sidebar open="true" position="right" max-width="375px" padding="$small">
17
+ <div>Your sidebar content here</div>
18
+ </rarui-sidebar>
19
+ ```
20
+
21
+ ## Features
22
+
23
+ - ✨ **Floating-UI Integration**: Intelligent positioning with automatic viewport adjustments using floating-ui
24
+ - 📱 **Responsive**: Adapts to different screen sizes automatically
25
+ - 🎭 **CSS Transitions**: Smooth slide animations with proper transition support
26
+ - ♿ **Accessible**: Full keyboard navigation and screen reader support
27
+ - 🎯 **Position Control**: Left or right positioning options
28
+ - 🔒 **Focus Management**: Automatic focus trapping and restoration
29
+ - 🎨 **Themeable**: Works with Rarui design tokens
30
+
31
+ ## Properties
32
+
33
+ | Property | Type | Default | Description |
34
+ |----------|------|---------|-------------|
35
+ | `open` | `boolean` | `false` | Whether the sidebar is open or not |
36
+ | `position` | `'left' \| 'right'` | `'right'` | The position of the sidebar |
37
+ | `max-width` | `string` | `'375px'` | Maximum width of the sidebar |
38
+ | `padding` | `string` | `'$small'` | Padding inside the sidebar |
39
+ | `portal-id` | `string` | - | ID of the portal element for rendering |
40
+
41
+ > **Note**: Properties inherit from `SidebarProps` and are automatically converted from camelCase to kebab-case for web component attributes (e.g., `maxWidth` → `max-width`, `portalId` → `portal-id`).
42
+
43
+ ## Events
44
+
45
+ | Event | Detail | Description |
46
+ |-------|--------|-------------|
47
+ | `sidebar-open-changed` | `{ open: boolean }` | Dispatched when the sidebar open state changes |
48
+
49
+ ## Examples
50
+
51
+ ### Basic Sidebar
52
+
53
+ ```html
54
+ <rarui-sidebar open="true">
55
+ <div>Basic sidebar content</div>
56
+ </rarui-sidebar>
57
+ ```
58
+
59
+ ### Left Positioned Sidebar
60
+
61
+ ```html
62
+ <rarui-sidebar open="true" position="left" max-width="300px">
63
+ <nav>
64
+ <ul>
65
+ <li>Home</li>
66
+ <li>About</li>
67
+ <li>Contact</li>
68
+ </ul>
69
+ </nav>
70
+ </rarui-sidebar>
71
+ ```
72
+
73
+ ### Custom Width and Padding
74
+
75
+ ```html
76
+ <rarui-sidebar open="true" max-width="500px" padding="$large">
77
+ <div>Wide sidebar with custom padding</div>
78
+ </rarui-sidebar>
79
+ ```
80
+
81
+ ## Differences from React Version
82
+
83
+ ### Enhanced Features
84
+ - **Floating-UI Integration**: Unlike the React version that uses basic floating-ui hooks, the web component version uses advanced virtual references for optimal sidebar positioning
85
+ - **Smooth Transitions**: Always renders allowing CSS transitions to work properly
86
+ - **Automatic Viewport Adaptation**: Content automatically adjusts to viewport constraints using floating-ui middleware
87
+ - **Better Performance**: Native web APIs with optimized floating-ui integration
88
+
89
+ ### Positioning Intelligence
90
+ The web component version provides superior positioning capabilities:
91
+ - Virtual reference system optimized for sidebar edges
92
+ - Responsive width adjustments via floating-ui size middleware
93
+ - Intelligent overflow prevention with shift middleware
94
+ - Automatic repositioning on viewport changes
95
+
96
+ ## Browser Support
97
+
98
+ This component works in all modern browsers that support:
99
+ - Web Components
100
+ - ES2017+ features
101
+ - CSS Custom Properties
102
+
103
+ ## Development
104
+
105
+ Built with:
106
+ - **LitElement** for the component base
107
+ - **Floating-UI** for advanced positioning with virtual references
108
+ - **TypeScript** for type safety
109
+ - **Rarui Design System** for styling
@@ -0,0 +1,26 @@
1
+ # Changelog
2
+
3
+ Componente de navegação hierárquica que permite aos usuários navegar através de uma estrutura de páginas, mostrando a localização atual e fornecendo links para níveis anteriores.
4
+
5
+ ## 2025-09-05 `1.1.0`
6
+
7
+ #### 🎉 New features
8
+
9
+ - Enhanced Breadcrumb component with comprehensive accessibility improvements including semantic navigation structure (nav aria-label="breadcrumb") and improved dropdown accessibility with proper 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))
10
+
11
+ ## 2025-08-29 `1.0.0`
12
+
13
+ #### 🎉 New features
14
+
15
+ - Implementação inicial do componente Breadcrumb para Web Components. ([#130](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/130) by [@junior](https://git.rarolabs.com.br/junior))
16
+ - Adicionado componente BreadcrumbItem com suporte a links e botões. ([#130](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/130) by [@junior](https://git.rarolabs.com.br/junior))
17
+ - Implementada lógica de truncamento com dropdown para muitos itens. ([#130](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/130) by [@junior](https://git.rarolabs.com.br/junior))
18
+ - Adicionado suporte a ícones nos itens do breadcrumb. ([#130](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/130) by [@junior](https://git.rarolabs.com.br/junior))
19
+
20
+ <!-- #### 🛠 Breaking changes -->
21
+
22
+ <!-- #### 📚 3rd party library updates -->
23
+
24
+ <!-- #### 🐛 Bug fixes -->
25
+
26
+ <!-- #### 💡 Others -->
@@ -0,0 +1,56 @@
1
+ # Breadcrumb
2
+
3
+ O componente Breadcrumb permite a navegação hierárquica através de uma estrutura de páginas, indicando a localização atual do usuário e fornecendo links para as páginas anteriores.
4
+
5
+ ## Quando usar
6
+
7
+ - Para mostrar a localização atual do usuário na hierarquia do site
8
+ - Para permitir navegação rápida para níveis anteriores da estrutura
9
+ - Em sistemas com estrutura hierárquica profunda (mais de 3 níveis)
10
+
11
+ ## Estrutura
12
+
13
+ O componente é formado por:
14
+
15
+ - `rarui-breadcrumb`: Container principal que gerencia a lógica de truncamento
16
+ - `rarui-breadcrumb-item`: Item individual do breadcrumb
17
+
18
+ ## Uso básico
19
+
20
+ ```html
21
+ <rarui-breadcrumb>
22
+ <rarui-breadcrumb-item href="/">Home</rarui-breadcrumb-item>
23
+ <rarui-breadcrumb-item href="/category">Category</rarui-breadcrumb-item>
24
+ <rarui-breadcrumb-item href="/subcategory">Subcategory</rarui-breadcrumb-item>
25
+ <rarui-breadcrumb-item active>Current Page</rarui-breadcrumb-item>
26
+ </rarui-breadcrumb>
27
+ ```
28
+
29
+ ## Com truncamento
30
+
31
+ ```html
32
+ <rarui-breadcrumb items-after-truncate="2">
33
+ <rarui-breadcrumb-item href="/">Home</rarui-breadcrumb-item>
34
+ <rarui-breadcrumb-item href="/level1">Level 1</rarui-breadcrumb-item>
35
+ <rarui-breadcrumb-item href="/level2">Level 2</rarui-breadcrumb-item>
36
+ <rarui-breadcrumb-item href="/level3">Level 3</rarui-breadcrumb-item>
37
+ <rarui-breadcrumb-item href="/level4">Level 4</rarui-breadcrumb-item>
38
+ <rarui-breadcrumb-item active>Current</rarui-breadcrumb-item>
39
+ </rarui-breadcrumb>
40
+ ```
41
+
42
+ ## Com ícones
43
+
44
+ ```html
45
+ <rarui-breadcrumb>
46
+ <rarui-breadcrumb-item href="/">
47
+ <rarui-icon slot="icon" name="home"></rarui-icon>
48
+ Home
49
+ </rarui-breadcrumb-item>
50
+ <rarui-breadcrumb-item href="/dashboard">
51
+ <rarui-icon slot="icon" name="dashboard"></rarui-icon>
52
+ Dashboard
53
+ </rarui-breadcrumb-item>
54
+ <rarui-breadcrumb-item active>Settings</rarui-breadcrumb-item>
55
+ </rarui-breadcrumb>
56
+ ```
@@ -0,0 +1,28 @@
1
+ # Changelog
2
+
3
+ The Link component allows us to navigate to external addresses.
4
+
5
+ ## 2025-09-05 `1.1.0`
6
+
7
+ #### 🎉 New features
8
+
9
+ - Enhanced Link component with comprehensive accessibility and form integration (target, rel, name, value, form properties) for proper HTML form submission when as="button" and automatic external link security with noopener noreferrer. ([#134](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/134) by [@junior](https://git.rarolabs.com.br/junior))
10
+ - Added standardized custom event `link-click` with detailed event payload including href, target, and original event for consistent interaction handling. ([#134](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/134) by [@junior](https://git.rarolabs.com.br/junior))
11
+ - Improved ARIA support with complete attributes implementation (aria-label, aria-labelledby, aria-describedby, aria-disabled) for screen reader accessibility. ([#134](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/134) by [@junior](https://git.rarolabs.com.br/junior))
12
+
13
+ ## 2025-06-18 `1.0.0`
14
+
15
+ #### 🎉 New features
16
+
17
+ - Added `appearance`, `size`, `size`, `type`, `disabled`, `as` and `href` property to the Component. ([#119](https://git.rarolabs.com.br/frontend/rarui/pull/119) by [@junior](https://git.rarolabs.com.br/junior))
18
+ - Added stories on Component. ([#119](https://git.rarolabs.com.br/frontend/rarui/pull/119) by [@junior](https://git.rarolabs.com.br/junior))
19
+
20
+ <!-- #### 🛠 Breaking changes -->
21
+
22
+ <!-- #### 📚 3rd party library updates -->
23
+
24
+ <!-- #### 🎉 New features -->
25
+
26
+ <!-- #### 🐛 Bug fixes -->
27
+
28
+ <!-- #### 💡 Others -->
@@ -0,0 +1,15 @@
1
+ # `@rarui/link`
2
+
3
+ The Link component allows us to navigate to external addresses.
4
+
5
+ ## Installation
6
+
7
+ ```sh
8
+ $ yarn add @rarui/link
9
+ # or
10
+ $ npm install @rarui/link
11
+ ```
12
+
13
+ ## Usage
14
+
15
+ View docs [here]().
@@ -0,0 +1,28 @@
1
+ # Changelog
2
+
3
+ The pagination component allows the user to select a specific page in a page range.
4
+
5
+ ## 2025-09-05 `1.1.0`
6
+
7
+ #### 🎉 New features
8
+
9
+ - Enhanced Pagination component with comprehensive accessibility improvements including semantic navigation structure (nav aria-label="Pagination navigation"), aria-current="page" for current page indication, and descriptive aria-labels for all navigation buttons. ([#134](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/134) by [@junior](https://git.rarolabs.com.br/junior))
10
+ - Improved custom event `page-change` with enhanced payload including previousPage information for better state management and user interaction tracking. ([#134](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/134) by [@junior](https://git.rarolabs.com.br/junior))
11
+ - Added proper ARIA attributes for icons (aria-hidden="true") and improved screen reader experience with contextual button labels. ([#134](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/134) by [@junior](https://git.rarolabs.com.br/junior))
12
+
13
+ ## 2025-06-27 `1.0.0`
14
+
15
+ #### 🎉 New features
16
+
17
+ - Added `active-page`, `page-count`, `show-numbers`, `show-arrows` and `size` property to the Component. ([#119](https://git.rarolabs.com.br/frontend/rarui/pull/119) by [@junior](https://git.rarolabs.com.br/junior))
18
+ - Added stories on Component. ([#119](https://git.rarolabs.com.br/frontend/rarui/pull/119) by [@junior](https://git.rarolabs.com.br/junior))
19
+
20
+ <!-- #### 🛠 Breaking changes -->
21
+
22
+ <!-- #### 📚 3rd party library updates -->
23
+
24
+ <!-- #### 🎉 New features -->
25
+
26
+ <!-- #### 🐛 Bug fixes -->
27
+
28
+ <!-- #### 💡 Others -->
@@ -0,0 +1,15 @@
1
+ # `@rarui/pagination`
2
+
3
+ The pagination component allows the user to select a specific page in a page range.
4
+
5
+ ## Installation
6
+
7
+ ```sh
8
+ $ yarn add @rarui/pagination
9
+ # or
10
+ $ npm install @rarui/pagination
11
+ ```
12
+
13
+ ## Usage
14
+
15
+ View docs [here]().
@@ -0,0 +1,33 @@
1
+ # Changelog
2
+
3
+ A navigation component that supports collapsible content with nested items.
4
+
5
+ ## 2025-09-05 `1.1.0`
6
+
7
+ #### 🎉 New features
8
+
9
+ - Enhanced SideNavigation component with comprehensive accessibility improvements including proper ARIA attributes (aria-expanded, aria-controls), semantic roles for expandable sections, and contextual aria-labels that change based on state. ([#134](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/134) by [@junior](https://git.rarolabs.com.br/junior))
10
+ - Improved custom event from `toggle` to standardized `side-navigation-toggle` with enhanced payload including name property for better component identification and interaction tracking. ([#134](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/134) by [@junior](https://git.rarolabs.com.br/junior))
11
+ - Added proper region roles for expandable content areas with aria-labelledby relationships for screen reader navigation support. ([#134](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/134) by [@junior](https://git.rarolabs.com.br/junior))
12
+
13
+ ## 2025-08-27 `1.0.0`
14
+
15
+ #### 🎉 New features
16
+
17
+ - Added SideNavigation web component with collapsible functionality. ([#129](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/129) by [@junior](https://git.rarolabs.com.br/junior))
18
+ - Added SideNavigationItem sub-component with level support. ([#129](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/129) by [@junior](https://git.rarolabs.com.br/junior))
19
+ - Added slot support for leading-start and leading-end elements. ([#129](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/129) by [@junior](https://git.rarolabs.com.br/junior))
20
+ - Added toggle event for open/close state changes. ([#129](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/129) by [@junior](https://git.rarolabs.com.br/junior))
21
+ - Integrated rarui-box components for better layout consistency. ([#129](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/129) by [@junior](https://git.rarolabs.com.br/junior))
22
+ - Arrow icons now always visible with proper up/down states. ([#129](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/129) by [@junior](https://git.rarolabs.com.br/junior))
23
+ - Added boolean converters for better attribute handling. ([#129](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/129) by [@junior](https://git.rarolabs.com.br/junior))
24
+
25
+ <!-- #### 🛠 Breaking changes -->
26
+
27
+ <!-- #### 📚 3rd party library updates -->
28
+
29
+ <!-- #### 🎉 New features -->
30
+
31
+ <!-- #### 🐛 Bug fixes -->
32
+
33
+ <!-- #### 💡 Others -->
@@ -0,0 +1,87 @@
1
+ # `@rarui/side-navigation`
2
+
3
+ The SideNavigation component provides collapsible navigation functionality with support for nested items, leading elements, and active states.
4
+
5
+ ## Installation
6
+
7
+ ```sh
8
+ $ yarn add @rarui/side-navigation
9
+ # or
10
+ $ npm install @rarui/side-navigation
11
+ ```
12
+
13
+ ## Usage
14
+
15
+ ### Basic SideNavigation
16
+ ```html
17
+ <rarui-side-navigation name="Dashboard" description="Main dashboard">
18
+ <rarui-side-navigation-item>Reports</rarui-side-navigation-item>
19
+ <rarui-side-navigation-item>Analytics</rarui-side-navigation-item>
20
+ </rarui-side-navigation>
21
+ ```
22
+
23
+ ### SideNavigation with Leading Elements
24
+ ```html
25
+ <rarui-side-navigation name="Settings" description="System configuration">
26
+ <!-- Custom icon at start -->
27
+ <rarui-icon slot="leading-start" name="folder-outlined" size="medium"></rarui-icon>
28
+
29
+ <!-- Custom icon at end (replaces default arrow) -->
30
+ <rarui-icon slot="leading-end" name="chevron-down" size="medium"></rarui-icon>
31
+
32
+ <!-- Nested items -->
33
+ <rarui-side-navigation-item>Profile</rarui-side-navigation-item>
34
+ <rarui-side-navigation-item>Permissions</rarui-side-navigation-item>
35
+ </rarui-side-navigation>
36
+ ```
37
+
38
+ ### Active State
39
+ ```html
40
+ <rarui-side-navigation name="Dashboard" active>
41
+ <rarui-side-navigation-item active>Current Page</rarui-side-navigation-item>
42
+ <rarui-side-navigation-item>Other Page</rarui-side-navigation-item>
43
+ </rarui-side-navigation>
44
+ ```
45
+
46
+ ### Multi-level Navigation
47
+ ```html
48
+ <rarui-side-navigation name="Administration">
49
+ <rarui-side-navigation-item level="0">Users</rarui-side-navigation-item>
50
+ <rarui-side-navigation-item level="1">Permissions</rarui-side-navigation-item>
51
+ <rarui-side-navigation-item level="1">Roles</rarui-side-navigation-item>
52
+ </rarui-side-navigation>
53
+ ```
54
+
55
+ ## Components
56
+
57
+ - `rarui-side-navigation` - Main navigation component with collapsible content
58
+ - `rarui-side-navigation-item` - Individual navigation items with support for nesting levels
59
+
60
+ ## Slots
61
+
62
+ ### rarui-side-navigation
63
+ - **Default slot**: Content for nested navigation items
64
+ - **leading-start**: Content to display at the start (e.g., icons)
65
+ - **leading-end**: Content to display at the end (e.g., custom icons)
66
+
67
+ ### rarui-side-navigation-item
68
+ - **Default slot**: Content for the navigation item
69
+
70
+ ## Behavior
71
+
72
+ ### Arrow Icon
73
+ - Navigation items **always display an arrow icon** by default
74
+ - The arrow rotates between up/down states when toggling
75
+ - Use `leading-end` slot to provide a custom icon that replaces the default arrow
76
+ - Arrow shows `arrow-up` when expanded, `arrow-down` when collapsed
77
+
78
+ ### Boolean Attributes
79
+ - Use `active` instead of `active="true"` for cleaner HTML
80
+ - Use `disabled` instead of `disabled="true"`
81
+ - Supports string values like `active="false"` for dynamic binding
82
+
83
+ ## Events
84
+
85
+ - `toggle` - Fired when the navigation item is toggled (opened/closed)
86
+
87
+ View docs [here]().
@@ -0,0 +1,40 @@
1
+ # Changelog
2
+
3
+ Tabs are used to switch between different display modes or pages.
4
+
5
+ ## 2025-09-05 `1.3.0`
6
+
7
+ #### 🎉 New features
8
+
9
+ - Enhanced Tabs component with comprehensive accessibility improvements including complete ARIA tabs pattern implementation (tablist, tab, tabpanel roles), aria-selected and aria-controls attributes for proper screen reader navigation. ([#134](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/134) by [@junior](https://git.rarolabs.com.br/junior))
10
+ - Added standardized custom event `tab-change` with detailed event payload including selectedTab, previousTab, and label information for enhanced state management and interaction tracking. ([#134](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/134) by [@junior](https://git.rarolabs.com.br/junior))
11
+ - Implemented proper tabpanel management with aria-hidden, aria-labelledby relationships, and semantic role attributes for complete accessibility compliance. ([#134](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/134) by [@junior](https://git.rarolabs.com.br/junior))
12
+
13
+ ## 2025-05-27 `1.2.0`
14
+
15
+ #### 🎉 New features
16
+
17
+ - Added the `custom-elements.json` file to the package for automatic documentation tools and web component support editors. ([#110](https://git.rarolabs.com.br/frontend/rarui/pull/110) by [@junior](https://git.rarolabs.com.br/junior))
18
+
19
+ ## 2025-05-23 `1.1.0`
20
+
21
+ #### 🎉 New features
22
+
23
+ - Adjusted the creation of components for `lit` use to `stencil` Inves. ([#109](https://git.rarolabs.com.br/frontend/rarui/pull/109) by [@junior](https://git.rarolabs.com.br/junior))
24
+
25
+ ## 2024-08-06 `1.0.0`
26
+
27
+ #### 🎉 New features
28
+
29
+ - Added `preSelectedTab`, `position`, `full` and `underlined` properties to the Component. ([#87](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/87) by [@junior](https://git.rarolabs.com.br/junior))
30
+ - Added stories on Component. ([#87](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/87) by [@junior](https://git.rarolabs.com.br/junior))
31
+
32
+ <!-- #### 🛠 Breaking changes -->
33
+
34
+ <!-- #### 📚 3rd party library updates -->
35
+
36
+ <!-- #### 🎉 New features -->
37
+
38
+ <!-- #### 🐛 Bug fixes -->
39
+
40
+ <!-- #### 💡 Others -->
@@ -0,0 +1,9 @@
1
+ # `@rarui/tabs`
2
+
3
+ Tabs are used to switch between different display modes or pages.
4
+
5
+ ## Installation
6
+
7
+ ## Usage
8
+
9
+ View docs [here]().
@@ -0,0 +1,32 @@
1
+ # Changelog
2
+
3
+ The ThemeProvider component provides global theme management for the application.
4
+
5
+ ## 2025-09-04 `1.1.0`
6
+
7
+ #### 🎉 New features
8
+
9
+ - Added comprehensive accessibility support with ARIA attributes (aria-label, aria-labelledby, aria-describedby) for screen reader compatibility. ([#134](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/134) by [@junior](https://git.rarolabs.com.br/junior))
10
+
11
+ ## 2025-08-28 `1.0.0`
12
+
13
+ #### 🎉 New features
14
+
15
+ - Added ThemeProvider Web Component implementation. ([#128](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/128) by [@junior](https://git.rarolabs.com.br/junior))
16
+ - Added global theme management system. ([#128](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/128) by [@junior](https://git.rarolabs.com.br/junior))
17
+ - Added support for 'base' and 'dark' themes. ([#128](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/128) by [@junior](https://git.rarolabs.com.br/junior))
18
+ - Added global API via window.raruiTheme. ([#128](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/128) by [@junior](https://git.rarolabs.com.br/junior))
19
+ - Added custom events for theme changes. ([#128](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/128) by [@junior](https://git.rarolabs.com.br/junior))
20
+ - Added theme manipulation utilities. ([#128](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/128) by [@junior](https://git.rarolabs.com.br/junior))
21
+ - Added localStorage persistence. ([#128](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/128) by [@junior](https://git.rarolabs.com.br/junior))
22
+ - Added stories on Component. ([#128](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/128) by [@junior](https://git.rarolabs.com.br/junior))
23
+
24
+ <!-- #### 🛠 Breaking changes -->
25
+
26
+ <!-- #### 📚 3rd party library updates -->
27
+
28
+ <!-- #### 🎉 New features -->
29
+
30
+ <!-- #### 🐛 Bug fixes -->
31
+
32
+ <!-- #### 💡 Others -->
@@ -0,0 +1,56 @@
1
+ # ThemeProvider Web Component
2
+
3
+ Componente para gerenciamento global de temas na aplicação.
4
+
5
+ ## Instalação
6
+
7
+ ```bash
8
+ npm install @rarui/theme-provider
9
+ ```
10
+
11
+ ## Uso Básico
12
+
13
+ ```html
14
+ <rarui-theme-provider theme="dark">
15
+ <rarui-button>Botão com tema aplicado</rarui-button>
16
+ </rarui-theme-provider>
17
+ ```
18
+
19
+ ## API Global
20
+
21
+ ```javascript
22
+ // Alternar tema
23
+ window.raruiTheme.setTheme('dark');
24
+
25
+ // Obter tema atual
26
+ const currentTheme = window.raruiTheme.getTheme();
27
+
28
+ // Escutar mudanças de tema
29
+ const unsubscribe = window.raruiTheme.subscribe((theme) => {
30
+ console.log('Tema mudou para:', theme);
31
+ });
32
+
33
+ // Evento global
34
+ document.addEventListener('rarui-theme-change', (event) => {
35
+ console.log('Novo tema:', event.detail.theme);
36
+ });
37
+ ```
38
+
39
+ ## Utilitários
40
+
41
+ ```javascript
42
+ import { toggleTheme, isDarkTheme, onThemeChange } from '@rarui/theme-provider';
43
+
44
+ // Alternar entre temas
45
+ toggleTheme();
46
+
47
+ // Verificar se está no tema escuro
48
+ if (isDarkTheme()) {
49
+ console.log('Tema escuro ativo');
50
+ }
51
+
52
+ // Escutar mudanças
53
+ const unsubscribe = onThemeChange((theme) => {
54
+ console.log('Tema atual:', theme);
55
+ });
56
+ ```