@semantic-components/ui-lab 0.63.0 → 0.65.0

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

@@ -1,254 +0,0 @@
-# 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

@@ -1,24 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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(),
-    );
-  });
-}