Feat(sidebar): Active underline (v1.1.1 release)

.gitignore

@@ -62,4 +62,5 @@ plans
 
 /docs
 playwright-report
-test-results
+test-results
+.playwright-mcp

CHANGELOG.md

@@ -5,6 +5,19 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.1.1] - 2026-05-03
+
+### Features
+- **Sidebar**: Added underline styling for active navigation state
+
+### Improvements
+- **Sidebar**: Improved path matching to handle URLs with trailing slashes
+
+### Housekeeping
+- Added `.playwright-mcp` to gitignore
+
+---
+
 ## [1.1.0] - 2026-05-02
 
 ### Breaking Changes
@@ -61,5 +74,6 @@ If you have custom themes or override theme variables, you'll need to update the
 
 ## Version Reference
 
-- **1.1.0** - Current release (theming refactor)
+- **1.1.1** - Current release (sidebar active state underline)
+- **1.1.0** - Theming refactor
 - **1.0.0** - Initial release

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nipsys/lsd-monorepo",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "private": true,
   "description": "Monorepo for the @nipsys/lsd component library and documentation",
   "license": "MIT",

packages/lsd-docs/app/components/SidebarWrapper.tsx

@@ -67,8 +67,13 @@ export default function SidebarWrapper({ currentPath, children }: SidebarWrapper
                                 <SidebarMenuSubItem key={subItem.url}>
                                   <SidebarMenuSubButton
                                     asChild
+                                    isActive={
+                                      currentPath === subItem.url ||
+                                      currentPath === `${subItem.url}/`
+                                    }
                                     className={
-                                      currentPath === subItem.url
+                                      currentPath === subItem.url ||
+                                      currentPath === `${subItem.url}/`
                                         ? 'bg-accent text-accent-foreground'
                                         : ''
                                     }
@@ -82,8 +87,11 @@ export default function SidebarWrapper({ currentPath, children }: SidebarWrapper
                         ) : (
                           <SidebarMenuButton
                             asChild
+                            isActive={currentPath === item.url || currentPath === `${item.url}/`}
                             className={
-                              currentPath === item.url ? 'bg-accent text-accent-foreground' : ''
+                              currentPath === item.url || currentPath === `${item.url}/`
+                                ? 'bg-accent text-accent-foreground'
+                                : ''
                             }
                           >
                             <a href={item.url}>

packages/lsd-docs/app/config/site.ts

@@ -3,7 +3,7 @@ export const siteConfig = {
   title: 'LSD Documentation',
   description: 'LSD Component Library Documentation',
   url: 'https://lsd.nipsys.dev',
-  version: '0.2.5',
+  version: '1.1.1',
   github: 'https://github.com/nipsysdev/lsd',
 } as const;
 

packages/lsd-docs/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nipsys/lsd-docs",
   "type": "module",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "private": true,
   "scripts": {
     "dev": "next dev --turbopack",

packages/lsd/package.json

@@ -5,7 +5,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.1.0",
+  "version": "1.1.1",
   "type": "module",
   "module": "./dist/main.js",
   "exports": {

packages/lsd/src/components/ui/sidebar/SidebarMenu.tsx

@@ -276,7 +276,7 @@ export function SidebarMenuSubButton({
       data-size={size}
       data-active={isActive}
       className={cn(
-        'ring-sidebar-ring lsd:flex lsd:h-(--lsd-spacing-largest) lsd:min-w-0 lsd:-translate-x-px lsd:items-center lsd:gap-(--lsd-spacing-smaller) lsd:overflow-hidden lsd:rounded-md lsd:px-(--lsd-spacing-smaller) lsd:outline-hidden lsd:focus-visible:ring-2 lsd:disabled:pointer-events-none lsd:disabled:opacity-50 aria-lsd:disabled:pointer-events-none aria-lsd:disabled:opacity-50 lsd:hover:underline lsd:focus:underline',
+        'ring-sidebar-ring lsd:flex lsd:h-(--lsd-spacing-largest) lsd:min-w-0 lsd:-translate-x-px lsd:items-center lsd:gap-(--lsd-spacing-smaller) lsd:overflow-hidden lsd:rounded-md lsd:px-(--lsd-spacing-smaller) lsd:outline-hidden lsd:focus-visible:ring-2 lsd:disabled:pointer-events-none lsd:disabled:opacity-50 aria-lsd:disabled:pointer-events-none aria-lsd:disabled:opacity-50 lsd:data-[active=true]:underline lsd:hover:underline lsd:focus:underline',
         size === 'sm' && 'lsd:text-xs',
         size === 'md' && 'lsd:text-sm',
         'lsd:group-data-[collapsible=icon]:hidden',

packages/lsd/src/components/ui/sidebar/types.ts

@@ -237,7 +237,7 @@ export interface SidebarMenuBadgeProps extends React.ComponentProps<'div'> {}
 
 // Variants
 export const sidebarMenuButtonVariants = cva(
-  'peer/menu-button lsd:flex lsd:w-full lsd:items-center lsd:gap-(--lsd-spacing-smaller) lsd:overflow-hidden lsd:rounded-md lsd:p-(--lsd-spacing-smaller) lsd:text-left lsd:text-sm lsd:outline-hidden ring-sidebar-ring lsd:transition-[width,height,padding] lsd:focus-visible:ring-2 lsd:disabled:pointer-events-none lsd:disabled:opacity-50 lsd:group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-lsd:disabled:pointer-events-none aria-lsd:disabled:opacity-50 lsd:data-[active=true]:font-medium lsd:group-data-[collapsible=icon]:size-8! lsd:group-data-[collapsible=icon]:p-(--lsd-spacing-smaller)! lsd:[&>span:last-child]:truncate lsd:[&>svg]:size-(--lsd-spacing-base) lsd:[&>svg]:shrink-0 lsd:hover:underline lsd:focus:underline',
+  'peer/menu-button lsd:flex lsd:w-full lsd:items-center lsd:gap-(--lsd-spacing-smaller) lsd:overflow-hidden lsd:rounded-md lsd:p-(--lsd-spacing-smaller) lsd:text-left lsd:text-sm lsd:outline-hidden ring-sidebar-ring lsd:transition-[width,height,padding] lsd:focus-visible:ring-2 lsd:disabled:pointer-events-none lsd:disabled:opacity-50 lsd:group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-lsd:disabled:pointer-events-none aria-lsd:disabled:opacity-50 lsd:data-[active=true]:font-medium lsd:data-[active=true]:underline lsd:group-data-[collapsible=icon]:size-8! lsd:group-data-[collapsible=icon]:p-(--lsd-spacing-smaller)! lsd:[&>span:last-child]:truncate lsd:[&>svg]:size-(--lsd-spacing-base) lsd:[&>svg]:shrink-0 lsd:hover:underline lsd:focus:underline',
   {
     variants: {
       variant: {

skills/nipsys-lsd/SKILL.md

@@ -2,7 +2,7 @@
 name: nipsys-lsd
 description: Use when working with @nipsys/lsd in React 19+ projects for UI component implementation, theming, and design system integration. Provides comprehensive guidance for the LSD monochromatic component library including 39 accessible components with semantic styling, spacing tokens (--lsd-spacing-*), keyboard navigation patterns, and proper composition patterns. Ideal for developers building React applications.
 metadata:
-  version: 1.0.0
+  version: 1.1.1
   category: frontend
   sources:
     - https://github.com/nipsysdev/lsd