@rarui/components 1.18.0 → 1.19.0

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 `@rarui/components` components is a component library built with [Lit](https://lit.dev/).
 
+## 2025-01-28 `1.19.0`
+
+#### 🎉 New features
+
+- Added new navigation `SideNavigation` component with collapsible functionality. ([#129](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/129) by [@junior](https://git.rarolabs.com.br/junior))
+- Added `SideNavigationItem` sub-component with level support for nested navigation. ([#129](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/129) by [@junior](https://git.rarolabs.com.br/junior))
+- Implemented slot-based architecture for leading icons and custom content. ([#129](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/129) by [@junior](https://git.rarolabs.com.br/junior))
+- Added toggle event for open/close state changes and improved boolean attribute handling. ([#129](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/129) by [@junior](https://git.rarolabs.com.br/junior))
+
 ## 2024-08-28 `1.18.0`
 
 #### 🎉 New features

package/custom-elements.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.17.0",
+  "version": "1.18.0",
   "tags": [
     {
       "name": "rarui-avatar",
@@ -7283,6 +7283,107 @@
         }
       ]
     },
+    {
+      "name": "rarui-side-navigation-item",
+      "description": "## Rarui SideNavigationItem\n---\nA navigation item component for use within SideNavigation.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/navigation/side-navigation) for more details.",
+      "attributes": [
+        {
+          "name": "active",
+          "description": "Determines if the item is active or not.",
+          "type": "boolean"
+        },
+        {
+          "name": "level",
+          "description": "Determines the level of nesting for the item.\n\n- 0\n- 1\n- 2",
+          "type": "number",
+          "values": [
+            {
+              "name": 0
+            },
+            {
+              "name": 1
+            },
+            {
+              "name": 2
+            }
+          ]
+        },
+        {
+          "name": "as",
+          "default": "button",
+          "description": "The HTML element type to render.\n\n- a\n- button",
+          "type": "string",
+          "values": [
+            {
+              "name": "a"
+            },
+            {
+              "name": "button",
+              "description": "(default)"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "rarui-side-navigation",
+      "description": "## Rarui SideNavigation\n---\nA navigation component that supports collapsible content with nested items.\n\n### Slots\n- **Default slot**: Content for nested navigation items\n- **leading-start**: Content to display at the start (e.g., icons)\n- **leading-end**: Content to display at the end (e.g., custom icons)\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/navigation/side-navigation) for more details.",
+      "attributes": [
+        {
+          "name": "name",
+          "description": "Title of the sideNavigation",
+          "type": "string"
+        },
+        {
+          "name": "description",
+          "description": "Description of the sideNavigation.",
+          "type": "string"
+        },
+        {
+          "name": "active",
+          "default": false,
+          "description": "Whether the navigation item is in active state.",
+          "type": "boolean"
+        },
+        {
+          "name": "level",
+          "description": "Determines the level of nesting for the item.\n\n- 0\n- 1\n- 2",
+          "type": "number",
+          "values": [
+            {
+              "name": 0
+            },
+            {
+              "name": 1
+            },
+            {
+              "name": 2
+            }
+          ]
+        },
+        {
+          "name": "disabled",
+          "default": false,
+          "description": "Whether the navigation item is disabled.",
+          "type": "boolean"
+        },
+        {
+          "name": "as",
+          "default": "button",
+          "description": "The HTML element type to render.\n\n- a\n- button",
+          "type": "string",
+          "values": [
+            {
+              "name": "a"
+            },
+            {
+              "name": "button",
+              "description": "(default)"
+            }
+          ]
+        }
+      ]
+    },
     {
       "name": "rarui-tabs",
       "description": "## Rarui Tabs\n---\nThe Tabs are used to switch between different display modes or pages.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/navigation/tabs) for more details.",

package/dist/index.d.ts

@@ -17576,6 +17576,81 @@ declare const paginationStyles: {
 
 type PaginationVariants = Omit<NonNullable<RecipeVariants<typeof paginationStyles.item>>, "selected">;
 
+declare const sideNavigationStyles: {
+    sideNavigation: RuntimeFn<{
+        active: {
+            true: {
+                color: `var(--${string})` | `var(--${string}, ${string})`;
+                ":after": {
+                    content: "";
+                    position: "absolute";
+                    left: number;
+                    right: number;
+                    top: number;
+                    bottom: number;
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+                };
+                ":hover": {
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+                };
+                ":active": {
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+                };
+                ":disabled": {
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+                    cursor: "not-allowed";
+                };
+            };
+        };
+    }>;
+    item: RuntimeFn<{
+        /**
+         * Determines the level of nesting for the item.
+         */
+        level: {
+            0: {
+                paddingLeft: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+            1: {
+                paddingLeft: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+            2: {
+                paddingLeft: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+        };
+    }>;
+    name: RuntimeFn<{
+        active: {
+            true: {
+                color: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+        };
+        disabled: {
+            true: {
+                color: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+        };
+    }>;
+    description: RuntimeFn<{
+        disabled: {
+            true: {
+                color: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+        };
+    }>;
+    content: RuntimeFn<{
+        open: {
+            true: {
+                overflow: "visible";
+                maxHeight: "unset";
+                marginTop: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+        };
+    }>;
+};
+
+type SideNavigationVariants = NonNullable<RecipeVariants<typeof sideNavigationStyles.sideNavigation> & RecipeVariants<typeof sideNavigationStyles.item>>;
+
 declare const stepperStyles: {
     stepper: RuntimeFn<{
         /**
@@ -18013,6 +18088,26 @@ interface PaginationTyping {
 }
 type PaginationProps = PaginationTyping & PaginationVariants;
 
+interface SideNavigationTyping {
+    /**
+     * Title of the sideNavigation
+     */
+    name: string;
+    /**
+     * Description of the sideNavigation.
+     */
+    description?: string;
+}
+type SideNavigationProps = SideNavigationTyping & SideNavigationVariants;
+
+interface SideNavigationItemTypings {
+    /**
+     * Determines if the item is active or not.
+     */
+    active?: boolean;
+}
+type SideNavigationItemProps = SideNavigationItemTypings & Pick<SideNavigationVariants, "level">;
+
 declare global {
     interface HTMLElementTagNameMap {
         "rarui-avatar": RaruiAvatar;
@@ -18806,6 +18901,88 @@ declare class RaruiPagination extends LitElement {
     render(): TemplateResult<1>;
 }
 
+declare global {
+    interface HTMLElementTagNameMap {
+        "rarui-side-navigation": RaruiSideNavigation;
+    }
+}
+/**
+ * ## Rarui SideNavigation
+ * ---
+ * A navigation component that supports collapsible content with nested items.
+ *
+ * ### Slots
+ * - **Default slot**: Content for nested navigation items
+ * - **leading-start**: Content to display at the start (e.g., icons)
+ * - **leading-end**: Content to display at the end (e.g., custom icons)
+ *
+ * See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/navigation/side-navigation) for more details.
+ */
+type SideNavigationProperties = Partial<SideNavigationProps> & {
+    /**
+     * Whether the navigation item is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether the navigation item is in active state.
+     * @default false
+     */
+    active?: boolean;
+    /**
+     * The HTML element type to render.
+     * @default "button"
+     */
+    as?: "button" | "a";
+};
+
+declare class RaruiSideNavigation extends LitElement {
+    name: SideNavigationProperties["name"];
+    description: SideNavigationProperties["description"];
+    active: SideNavigationProperties["active"];
+    disabled: SideNavigationProperties["disabled"];
+    as: SideNavigationProperties["as"];
+    private _open;
+    private _buttonRef;
+    static styles: CSSResult;
+    connectedCallback(): void;
+    private _handleToggle;
+    private _hasChildItems;
+    private _renderLeadingEnd;
+    private _renderContent;
+    render(): TemplateResult<1>;
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "rarui-side-navigation-item": RaruiSideNavigationItem;
+    }
+}
+/**
+ * ## Rarui SideNavigationItem
+ * ---
+ * A navigation item component for use within SideNavigation.
+ *
+ * See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/navigation/side-navigation) for more details.
+ */
+type SideNavigationItemProperties = Partial<SideNavigationItemProps> & {
+    /**
+     * The HTML element type to render.
+     * @default "button"
+     */
+    as?: "button" | "a";
+};
+
+declare class RaruiSideNavigationItem extends LitElement {
+    active: SideNavigationItemProperties["active"];
+    level: SideNavigationItemProperties["level"];
+    as: SideNavigationItemProperties["as"];
+    private _itemRef;
+    static styles: CSSResult;
+    private _handleClick;
+    render(): TemplateResult<1>;
+}
+
 declare global {
     interface HTMLElementTagNameMap {
         "rarui-banner": RaruiBanner;