@semantic-components/ui-lab 0.62.0 → 0.63.0

package/src/lib/components/sidebar/README.md

@@ -0,0 +1,254 @@
+# Sidebar Component (scx)
+
+A comprehensive sidebar component system for Angular applications with collapsible states, mobile responsiveness, keyboard shortcuts, and state persistence.
+
+## Components
+
+### Core Components
+
+- `ScSidebarProvider` - Root provider component with state management
+- `ScSidebar` - Main sidebar container
+- `ScSidebarTrigger` - Toggle button
+- `ScSidebarRail` - Resize handle for collapsing/expanding
+- `ScSidebarInset` - Main content wrapper
+
+### Layout Components
+
+- `ScSidebarHeader` - Header section
+- `ScSidebarFooter` - Footer section
+- `ScSidebarContent` - Scrollable content area
+- `ScSidebarSeparator` - Visual separator
+- `ScSidebarInput` - Styled input for search
+
+### Menu Components
+
+- `ScSidebarMenu` - Menu list container (ul)
+- `ScSidebarMenuItem` - Menu list item (li)
+- `ScSidebarMenuButton` - Menu button/link (works with both button and a elements)
+- `ScSidebarMenuAction` - Action button on menu items
+- `ScSidebarMenuBadge` - Badge/counter display
+- `ScSidebarMenuSkeleton` - Loading skeleton
+- `ScSidebarMenuSub` - Submenu container (ul)
+- `ScSidebarMenuSubItem` - Submenu item (li)
+- `ScSidebarMenuSubButton` - Submenu button/link
+
+### Group Components
+
+- `ScSidebarGroup` - Group container
+- `ScSidebarGroupLabel` - Group header/label
+- `ScSidebarGroupAction` - Action button for groups
+- `ScSidebarGroupContent` - Group content wrapper
+
+## Features
+
+- **Reactive State Management** - Built with Angular signals
+- **Keyboard Shortcuts** - Cmd/Ctrl + B to toggle sidebar
+- **LocalStorage Persistence** - State persists across page refreshes
+- **Mobile Responsive** - Sheet drawer on mobile devices
+- **Multiple Variants** - sidebar, floating, inset
+- **Collapsible Modes** - offcanvas, icon, none
+- **Two-way Binding** - Model support for open state
+- **CSS Variables** - Customizable widths
+
+## How It Works
+
+The sidebar uses a clever layout technique to push content to the side instead of overlaying it:
+
+```
+┌─────────────────────────────────────────────────────────┐
+│ ScSidebarProvider (flex container)                     │
+│ ┌─────────────────────┬─────────────────────────────┐   │
+│ │  ScSidebar         │  ScSidebarInset            │   │
+│ │ ┌─────────────────┐ │  (main content)             │   │
+│ │ │ Gap Div         │ │                             │   │
+│ │ │ • Width: 16rem  │ │  <header>                   │   │
+│ │ │ • No height     │ │    <button>Toggle</button>  │   │
+│ │ │ • Pushes content│ │  </header>                  │   │
+│ │ └─────────────────┘ │                             │   │
+│ │                     │  <main>                     │   │
+│ │ ┌─────────────────┐ │    Your content here        │   │
+│ │ │ Fixed Container │ │                             │   │
+│ │ │ (actual sidebar)│ │                             │   │
+│ │ │ • Position fixed│ │                             │   │
+│ │ │ • Overlays gap  │ │                             │   │
+│ │ └─────────────────┘ │                             │   │
+│ └─────────────────────┴─────────────────────────────┘   │
+└─────────────────────────────────────────────────────────┘
+```
+
+### Key Concepts
+
+1. **Gap Div** - An invisible spacer with width but no height that participates in the flex layout, creating space for the sidebar
+2. **Fixed Container** - The actual sidebar content, positioned fixed to overlay the gap
+3. **Flex Layout** - The provider uses flexbox, making the gap and content area sit side-by-side
+4. **Responsive Collapse** - When collapsed, the gap width transitions to 0, allowing content to use full width
+
+This architecture ensures smooth transitions and proper content flow without JavaScript layout calculations.
+
+## Basic Usage
+
+```typescript
+import { ScSidebarProvider, ScSidebar, ScSidebarTrigger, ScSidebarHeader, ScSidebarContent, ScSidebarFooter, ScSidebarMenu, ScSidebarMenuItem, ScSidebarMenuButton, ScSidebarInset } from '@semantic-components/ui-lab';
+
+@Component({
+  selector: 'app-layout',
+  imports: [
+    ScSidebarProvider,
+    ScSidebar,
+    // ... other imports
+  ],
+  template: `
+    <div sc-sidebar-provider>
+      <div sc-sidebar>
+        <div sc-sidebar-header>
+          <h2>My App</h2>
+        </div>
+
+        <div sc-sidebar-content>
+          <ul sc-sidebar-menu>
+            <li sc-sidebar-menu-item>
+              <a sc-sidebar-menu-button routerLink="/dashboard">Dashboard</a>
+            </li>
+          </ul>
+        </div>
+
+        <div sc-sidebar-footer>User Info</div>
+      </div>
+
+      <main sc-sidebar-inset>
+        <header>
+          <button sc-sidebar-trigger>Toggle</button>
+        </header>
+        <router-outlet />
+      </main>
+    </div>
+  `,
+})
+export class AppLayout {}
+```
+
+## Advanced Usage
+
+### With Submenu
+
+```html
+<ul sc-sidebar-menu>
+  <li sc-sidebar-menu-item>
+    <a sc-sidebar-menu-button>Projects</a>
+    <ul sc-sidebar-menu-sub>
+      <li sc-sidebar-menu-sub-item>
+        <a sc-sidebar-menu-sub-button routerLink="/projects/1">Project 1</a>
+      </li>
+    </ul>
+  </li>
+</ul>
+```
+
+### With Groups
+
+```html
+<div sc-sidebar-group>
+  <div sc-sidebar-group-label>Navigation</div>
+  <div sc-sidebar-group-content>
+    <ul sc-sidebar-menu>
+      <!-- menu items -->
+    </ul>
+  </div>
+</div>
+```
+
+### Variants
+
+```html
+<!-- Default sidebar -->
+<div sc-sidebar variant="sidebar" collapsible="icon">
+  <!-- Floating sidebar -->
+  <div sc-sidebar variant="floating" collapsible="icon">
+    <!-- Inset sidebar -->
+    <div sc-sidebar variant="inset" collapsible="icon"></div>
+  </div>
+</div>
+```
+
+### Two-way Binding
+
+```typescript
+@Component({
+  template: `
+    <div sc-sidebar-provider [(open)]="sidebarOpen">
+      <!-- sidebar content -->
+    </div>
+  `,
+})
+export class MyComponent {
+  sidebarOpen = signal(true);
+}
+```
+
+## Configuration
+
+### CSS Variables
+
+The sidebar uses CSS variables that can be customized:
+
+```css
+:root {
+  --sidebar-width: 16rem;
+  --sidebar-width-mobile: 18rem; /* Available but not currently used */
+  --sidebar-width-icon: 3rem;
+}
+```
+
+**Note:** The mobile sidebar currently uses the default width from the Sheet component. The `--sidebar-width-mobile` variable is available for future customization if needed.
+
+### Props
+
+#### ScSidebar
+
+- `side` - 'left' | 'right' (default: 'left')
+- `variant` - 'sidebar' | 'floating' | 'inset' (default: 'sidebar')
+- `collapsible` - 'offcanvas' | 'icon' | 'none' (default: 'offcanvas')
+
+#### ScSidebarMenuButton
+
+- `size` - 'default' | 'sm' | 'lg' (default: 'default')
+- `isActive` - boolean (default: false)
+- `tooltip` - string (optional)
+
+#### ScSidebarMenuSubButton
+
+- `size` - 'sm' | 'md' (default: 'md')
+- `isActive` - boolean (default: false)
+
+## Keyboard Shortcuts
+
+- `Cmd + B` (Mac) / `Ctrl + B` (Windows) - Toggle sidebar
+
+## State Persistence
+
+The sidebar state is automatically saved to `localStorage` (key: `sc-sidebar-state`). The state will be restored when the page is refreshed.
+
+## Mobile Behavior
+
+On screens smaller than 768px (md breakpoint), the sidebar automatically switches to a sheet drawer that slides in from the side using the `ScSheetProvider`, `ScSheetPortal`, and `ScSheet` components. The `ScSidebarTrigger` automatically handles mobile vs desktop toggle logic.
+
+### Mobile Implementation Details
+
+The mobile view uses the new ScSheet architecture with a provider pattern:
+
+- `ScSheetProvider` manages the open state and side
+- `ScSheetPortal` creates the overlay with backdrop
+- `ScSheet` is the dialog panel with slide animations
+
+**Mobile Width:** The mobile sidebar uses the default width provided by the Sheet component rather than a custom width. This ensures consistency with other sheet-based UI elements and provides a responsive width that adapts to different device sizes.
+
+## Accessibility
+
+- All interactive elements are keyboard accessible
+- Proper ARIA attributes are applied
+- Focus management is handled automatically
+- Screen reader support included
+
+## Demo
+
+See a comprehensive demo at `/dashboard` in the blocks application.

package/src/lib/components/sidebar/index.ts

@@ -0,0 +1,24 @@
+export { ScSidebarProvider } from './sidebar-provider';
+export { ScSidebar } from './sidebar';
+export { ScSidebarTrigger } from './sidebar-trigger';
+export { ScSidebarRail } from './sidebar-rail';
+export { ScSidebarInset } from './sidebar-inset';
+export { ScSidebarHeader } from './sidebar-header';
+export { ScSidebarFooter } from './sidebar-footer';
+export { ScSidebarContent } from './sidebar-content';
+export { ScSidebarSeparator } from './sidebar-separator';
+export { ScSidebarInput } from './sidebar-input';
+export { ScSidebarGroup } from './sidebar-group';
+export { ScSidebarGroupLabel } from './sidebar-group-label';
+export { ScSidebarGroupAction } from './sidebar-group-action';
+export { ScSidebarGroupContent } from './sidebar-group-content';
+export { ScSidebarMenu } from './sidebar-menu';
+export { ScSidebarMenuItem } from './sidebar-menu-item';
+export { ScSidebarMenuButton } from './sidebar-menu-button';
+export { ScSidebarMenuAction } from './sidebar-menu-action';
+export { ScSidebarMenuBadge } from './sidebar-menu-badge';
+export { ScSidebarMenuSkeleton } from './sidebar-menu-skeleton';
+export { ScSidebarMenuSub } from './sidebar-menu-sub';
+export { ScSidebarMenuSubItem } from './sidebar-menu-sub-item';
+export { ScSidebarMenuSubButton } from './sidebar-menu-sub-button';
+export { ScSidebarState } from './sidebar-state.service';

package/src/lib/components/sidebar/sidebar-content.ts

@@ -0,0 +1,20 @@
+import { Directive, computed, input } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Directive({
+  selector: 'div[sc-sidebar-content]',
+  host: {
+    'data-slot': 'sidebar-content',
+    '[class]': 'class()',
+  },
+})
+export class ScSidebarContent {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn(
+      'flex min-h-0 flex-1 flex-col gap-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden',
+      this.classInput(),
+    ),
+  );
+}

package/src/lib/components/sidebar/sidebar-footer.ts

@@ -0,0 +1,17 @@
+import { Directive, computed, input } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Directive({
+  selector: 'div[sc-sidebar-footer]',
+  host: {
+    'data-slot': 'sidebar-footer',
+    '[class]': 'class()',
+  },
+})
+export class ScSidebarFooter {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn('flex flex-col gap-2 p-2', this.classInput()),
+  );
+}

package/src/lib/components/sidebar/sidebar-group-action.ts

@@ -0,0 +1,24 @@
+import { Directive, computed, input } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Directive({
+  selector: 'button[sc-sidebar-group-action]',
+  host: {
+    'data-slot': 'sidebar-group-action',
+    '[class]': 'class()',
+  },
+})
+export class ScSidebarGroupAction {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  readonly asChild = input<boolean>(false);
+
+  protected readonly class = computed(() =>
+    cn(
+      'absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+      'after:absolute after:-inset-2 after:md:hidden',
+      'group-data-[collapsible=icon]:hidden',
+      this.classInput(),
+    ),
+  );
+}

package/src/lib/components/sidebar/sidebar-group-content.ts

@@ -0,0 +1,17 @@
+import { Directive, computed, input } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Directive({
+  selector: 'div[sc-sidebar-group-content]',
+  host: {
+    'data-slot': 'sidebar-group-content',
+    '[class]': 'class()',
+  },
+})
+export class ScSidebarGroupContent {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn('w-full text-sm', this.classInput()),
+  );
+}

package/src/lib/components/sidebar/sidebar-group-label.ts

@@ -0,0 +1,23 @@
+import { Directive, computed, input } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Directive({
+  selector: 'div[sc-sidebar-group-label]',
+  host: {
+    'data-slot': 'sidebar-group-label',
+    '[class]': 'class()',
+  },
+})
+export class ScSidebarGroupLabel {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  readonly asChild = input<boolean>(false);
+
+  protected readonly class = computed(() =>
+    cn(
+      'flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+      'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
+      this.classInput(),
+    ),
+  );
+}

package/src/lib/components/sidebar/sidebar-group.ts

@@ -0,0 +1,17 @@
+import { Directive, computed, input } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Directive({
+  selector: 'div[sc-sidebar-group]',
+  host: {
+    'data-slot': 'sidebar-group',
+    '[class]': 'class()',
+  },
+})
+export class ScSidebarGroup {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn('relative flex w-full min-w-0 flex-col p-2', this.classInput()),
+  );
+}

package/src/lib/components/sidebar/sidebar-header.ts

@@ -0,0 +1,17 @@
+import { Directive, computed, input } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Directive({
+  selector: 'div[sc-sidebar-header]',
+  host: {
+    'data-slot': 'sidebar-header',
+    '[class]': 'class()',
+  },
+})
+export class ScSidebarHeader {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn('flex flex-col gap-2 p-2', this.classInput()),
+  );
+}

package/src/lib/components/sidebar/sidebar-input.ts

@@ -0,0 +1,20 @@
+import { Directive, computed, input } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Directive({
+  selector: 'input[sc-sidebar-input]',
+  host: {
+    'data-slot': 'sidebar-input',
+    '[class]': 'class()',
+  },
+})
+export class ScSidebarInput {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn(
+      'h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',
+      this.classInput(),
+    ),
+  );
+}

package/src/lib/components/sidebar/sidebar-inset.ts

@@ -0,0 +1,21 @@
+import { Directive, computed, input } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Directive({
+  selector: 'main[sc-sidebar-inset]',
+  host: {
+    'data-slot': 'sidebar-inset',
+    '[class]': 'class()',
+  },
+})
+export class ScSidebarInset {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn(
+      'relative flex min-h-svh flex-1 flex-col bg-background',
+      'peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow',
+      this.classInput(),
+    ),
+  );
+}

package/src/lib/components/sidebar/sidebar-menu-action.ts

@@ -0,0 +1,31 @@
+import { Directive, computed, input } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Directive({
+  selector: 'button[sc-sidebar-menu-action]',
+  host: {
+    'data-slot': 'sidebar-menu-action',
+    'data-sidebar': 'menu-action',
+    '[class]': 'class()',
+  },
+})
+export class ScSidebarMenuAction {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  readonly asChild = input<boolean>(false);
+  readonly showOnHover = input<boolean>(false);
+
+  protected readonly class = computed(() =>
+    cn(
+      'absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',
+      'after:absolute after:-inset-2 after:md:hidden',
+      'peer-data-[size=sm]/menu-button:top-1',
+      'peer-data-[size=default]/menu-button:top-1.5',
+      'peer-data-[size=lg]/menu-button:top-2.5',
+      'group-data-[collapsible=icon]:hidden',
+      this.showOnHover() &&
+        'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',
+      this.classInput(),
+    ),
+  );
+}

package/src/lib/components/sidebar/sidebar-menu-badge.ts

@@ -0,0 +1,25 @@
+import { Directive, computed, input } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Directive({
+  selector: 'div[sc-sidebar-menu-badge]',
+  host: {
+    'data-slot': 'sidebar-menu-badge',
+    '[class]': 'class()',
+  },
+})
+export class ScSidebarMenuBadge {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn(
+      'absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none',
+      'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
+      'peer-data-[size=sm]/menu-button:top-1',
+      'peer-data-[size=default]/menu-button:top-1.5',
+      'peer-data-[size=lg]/menu-button:top-2.5',
+      'group-data-[collapsible=icon]:hidden',
+      this.classInput(),
+    ),
+  );
+}

package/src/lib/components/sidebar/sidebar-menu-button.ts

@@ -0,0 +1,55 @@
+import { computed, Directive, input } from '@angular/core';
+import { cva, VariantProps } from 'class-variance-authority';
+import { cn } from '@semantic-components/ui';
+
+const sidebarMenuButtonVariants = cva(
+  'ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-md p-2 text-left text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden group/menu-button disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+        outline:
+          'bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
+      },
+      size: {
+        default: 'h-8 text-sm',
+        sm: 'h-7 text-xs',
+        lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+
+export type ScSidebarMenuButtonVariants = VariantProps<
+  typeof sidebarMenuButtonVariants
+>;
+
+@Directive({
+  selector: 'button[sc-sidebar-menu-button], a[sc-sidebar-menu-button]',
+  host: {
+    'data-slot': 'sidebar-menu-button',
+    '[class]': 'class()',
+    '[attr.data-active]': 'isActive() || null',
+    '[attr.data-size]': 'size()',
+  },
+})
+export class ScSidebarMenuButton {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  readonly variant = input<ScSidebarMenuButtonVariants['variant']>('default');
+  readonly size = input<ScSidebarMenuButtonVariants['size']>('default');
+  readonly isActive = input<boolean>(false);
+  readonly tooltip = input<string>();
+
+  protected readonly class = computed(() => {
+    const size = this.size();
+    return cn(
+      sidebarMenuButtonVariants({ variant: this.variant(), size }),
+      this.classInput(),
+    );
+  });
+}

package/src/lib/components/sidebar/sidebar-menu-item.ts

@@ -0,0 +1,17 @@
+import { Directive, computed, input } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Directive({
+  selector: 'li[sc-sidebar-menu-item]',
+  host: {
+    'data-slot': 'sidebar-menu-item',
+    '[class]': 'class()',
+  },
+})
+export class ScSidebarMenuItem {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn('group/menu-item relative', this.classInput()),
+  );
+}

package/src/lib/components/sidebar/sidebar-menu-skeleton.ts

@@ -0,0 +1,40 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { ScSkeleton } from '../skeleton';
+
+@Component({
+  selector: 'div[sc-sidebar-menu-skeleton]',
+  imports: [ScSkeleton],
+  host: {
+    'data-slot': 'sidebar-menu-skeleton',
+    '[class]': 'class()',
+  },
+  template: `
+    @if (showIcon()) {
+      <div sc-skeleton class="size-4 rounded-md"></div>
+    }
+    <div
+      sc-skeleton
+      class="h-4 max-w-[var(--skeleton-width)] flex-1"
+      [style.--skeleton-width]="width"
+    ></div>
+  `,
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScSidebarMenuSkeleton {
+  readonly classInput = input<string>('', { alias: 'class' });
+  readonly showIcon = input<boolean>(false);
+
+  protected readonly width = `${Math.floor(Math.random() * 40) + 50}%`;
+
+  protected readonly class = computed(() =>
+    cn('h-8 gap-2 rounded-md px-2 flex items-center', this.classInput()),
+  );
+}

package/src/lib/components/sidebar/sidebar-menu-sub-button.ts

@@ -0,0 +1,33 @@
+import { Directive, computed, input } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+const sizeStyles: Record<'sm' | 'md', string> = {
+  sm: 'text-xs',
+  md: 'text-sm',
+};
+
+@Directive({
+  selector: 'a[sc-sidebar-menu-sub-button], button[sc-sidebar-menu-sub-button]',
+  host: {
+    'data-slot': 'sidebar-menu-sub-button',
+    '[class]': 'class()',
+    '[attr.data-active]': 'isActive() || null',
+    '[attr.data-size]': 'size()',
+  },
+})
+export class ScSidebarMenuSubButton {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  readonly size = input<'sm' | 'md'>('md');
+  readonly isActive = input<boolean>(false);
+
+  protected readonly class = computed(() => {
+    const size = this.size();
+    return cn(
+      'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',
+      'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
+      sizeStyles[size],
+      this.classInput(),
+    );
+  });
+}