@shadng/sng-ui 1.0.0

package/src/lib/layout/sng-layout-sidebar-trigger.ts

@@ -0,0 +1,97 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  ViewEncapsulation,
+  input,
+  computed,
+  inject,
+  booleanAttribute,
+} from '@angular/core';
+import { SNG_LAYOUT_SIDEBAR_CONTEXT } from './sng-layout-sidebar-provider';
+import { cn } from './cn';
+
+/**
+ * Button that toggles the sidebar. Automatically calls `toggle()` on desktop or
+ * `toggleMobile()` on mobile — no conditional logic needed in your template.
+ *
+ * @example
+ * ```html
+ * <!-- Default icon -->
+ * <sng-layout-sidebar-trigger />
+ *
+ * <!-- Custom content -->
+ * <sng-layout-sidebar-trigger [customContent]="true">
+ *   <lucide-icon name="menu" />
+ * </sng-layout-sidebar-trigger>
+ * ```
+ */
+@Component({
+  selector: 'sng-layout-sidebar-trigger',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    'class': 'contents',
+  },
+  template: `
+    <button
+      type="button"
+      [class]="buttonClasses()"
+      [disabled]="disabled()"
+      (click)="onClick()"
+    >
+      @if (customContent()) {
+        <ng-content />
+      } @else {
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="size-4"
+        >
+          <rect width="18" height="18" x="3" y="3" rx="2" />
+          <path d="M9 3v18" />
+        </svg>
+        <span class="sr-only">{{ toggleLabel() }}</span>
+      }
+    </button>
+  `,
+})
+export class SngLayoutSidebarTrigger {
+  /** Custom CSS classes. */
+  class = input<string>('');
+
+  /** Whether the button is disabled. */
+  disabled = input(false, { transform: booleanAttribute });
+
+  /**
+   * When true, renders projected content instead of the default icon.
+   */
+  customContent = input(false, { transform: booleanAttribute });
+
+  /** Accessible text for the default toggle control. */
+  toggleLabel = input<string>('Toggle Sidebar');
+
+  private context = inject(SNG_LAYOUT_SIDEBAR_CONTEXT);
+
+  buttonClasses = computed(() =>
+    cn(
+      'inline-flex h-7 w-7 items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+      this.class()
+    )
+  );
+
+  onClick(): void {
+    if (this.context.isMobile()) {
+      this.context.toggleMobile();
+    } else {
+      this.context.toggle();
+    }
+  }
+}

package/src/lib/layout/sng-layout-sidebar.ts

@@ -0,0 +1,254 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  ViewEncapsulation,
+  DestroyRef,
+  input,
+  computed,
+  inject,
+  effect,
+  afterNextRender,
+  DOCUMENT,
+} from '@angular/core';
+import { SNG_LAYOUT_SIDEBAR_CONTEXT } from './sng-layout-sidebar-provider';
+import { cn } from './cn';
+
+export type LayoutSidebarSide = 'left' | 'right';
+export type LayoutSidebarCollapsible = 'offcanvas' | 'icon' | 'none';
+export type LayoutSidebarLayout = 'sidebar' | 'floating' | 'inset';
+
+/**
+ * Main sidebar component that renders as a fixed/sticky panel on desktop (≥768px) or a
+ * drawer overlay on mobile (<768px). The dual rendering is automatic — the same template
+ * switches between `containerClasses()` (desktop) and `mobileDrawerClasses()` (mobile)
+ * based on `context.isMobile()`.
+ *
+ * On mobile: renders a fixed drawer with slide animation, backdrop overlay, body scroll
+ * lock. On desktop: renders a fixed/sticky panel with configurable
+ * `layout` and `collapsible` modes.
+ *
+ * To customize the mobile breakpoint, change the `matchMedia` query in the provider and
+ * update the `md:` Tailwind prefixes in this component (hostClasses, containerClasses).
+ *
+ * @example
+ * ```html
+ * <sng-layout-sidebar-provider>
+ *   <sng-layout-sidebar side="left" collapsible="icon">
+ *     <sng-layout-sidebar-header>Logo</sng-layout-sidebar-header>
+ *     <sng-layout-sidebar-content>
+ *       <sng-layout-sidebar-menu>...</sng-layout-sidebar-menu>
+ *     </sng-layout-sidebar-content>
+ *     <sng-layout-sidebar-footer>User</sng-layout-sidebar-footer>
+ *   </sng-layout-sidebar>
+ *   <sng-layout-sidebar-inset>Main content</sng-layout-sidebar-inset>
+ * </sng-layout-sidebar-provider>
+ * ```
+ */
+@Component({
+  selector: 'sng-layout-sidebar',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  styles: `
+    /* Remap accent colors to sidebar-accent for menus inside sidebar */
+    sng-layout-sidebar {
+      --accent: var(--sidebar-accent);
+      --accent-foreground: var(--sidebar-accent-foreground);
+      /* Darker variant for selected/active state - light mode: darken, dark mode: lighten */
+      --sidebar-active: color-mix(in oklch, var(--sidebar-accent), black 8%);
+    }
+    /* Dark mode: lighten instead of darken */
+    .dark sng-layout-sidebar {
+      --sidebar-active: color-mix(in oklch, var(--sidebar-accent), white 15%);
+    }
+
+    /* Mobile overlay animations */
+    .sng-sidebar-overlay[data-state=open] { animation: sng-sidebar-overlay-in 200ms ease both; }
+    .sng-sidebar-overlay[data-state=closed] { animation: sng-sidebar-overlay-out 200ms ease both; }
+    @keyframes sng-sidebar-overlay-in { from { opacity: 0; } }
+    @keyframes sng-sidebar-overlay-out { to { opacity: 0; } }
+
+    /* Mobile drawer slide animations */
+    .sng-sidebar-drawer[data-state=open][data-side=left] { animation: sng-sidebar-slide-in-left 200ms ease both; }
+    .sng-sidebar-drawer[data-state=closed][data-side=left] { animation: sng-sidebar-slide-out-left 200ms ease both; }
+    .sng-sidebar-drawer[data-state=open][data-side=right] { animation: sng-sidebar-slide-in-right 200ms ease both; }
+    .sng-sidebar-drawer[data-state=closed][data-side=right] { animation: sng-sidebar-slide-out-right 200ms ease both; }
+    @keyframes sng-sidebar-slide-in-left { from { transform: translateX(-100%); } }
+    @keyframes sng-sidebar-slide-out-left { to { transform: translateX(-100%); } }
+    @keyframes sng-sidebar-slide-in-right { from { transform: translateX(100%); } }
+    @keyframes sng-sidebar-slide-out-right { to { transform: translateX(100%); } }
+  `,
+  template: `
+    <!-- Mobile overlay backdrop (only rendered on mobile after first open) -->
+    @if (context.isMobile() && hasBeenOpened()) {
+      <button type="button"
+              class="sng-sidebar-overlay fixed inset-0 z-50 appearance-none border-0 bg-black/50 p-0"
+              [class.pointer-events-none]="!context.openMobile()"
+              [attr.data-state]="mobileState()"
+              [attr.tabindex]="context.openMobile() ? 0 : -1"
+              [attr.aria-label]="'Close sidebar'"
+              (click)="onBackdropClick()"></button>
+    }
+
+    <!-- Desktop gap div (reserves space in document flow) -->
+    @if (!context.isMobile()) {
+      <div [class]="gapClasses()"></div>
+    }
+
+    <!-- Shared container: switches between desktop fixed and mobile drawer -->
+    <div [class]="context.isMobile() ? mobileDrawerClasses() : containerClasses()"
+         [attr.data-state]="context.isMobile() ? mobileState() : context.state()"
+         [attr.data-collapsible]="context.isMobile() ? null : collapsibleAttr()"
+         [attr.data-side]="context.isMobile() ? side() : null"
+         [class.pointer-events-none]="context.isMobile() && !context.openMobile()"
+         [attr.aria-hidden]="context.isMobile() && !context.openMobile() ? 'true' : null"
+         [attr.inert]="context.isMobile() && !context.openMobile() ? '' : null">
+      <div [class]="innerClasses()"
+           [attr.data-state]="context.isMobile() ? null : context.state()"
+           [attr.data-collapsible]="context.isMobile() ? null : collapsibleAttr()">
+        <ng-content />
+      </div>
+    </div>
+  `,
+  host: {
+    // Static fallback prevents FOUC with zoneless CD (dynamic [class] may not flush immediately)
+    'class': 'group peer text-sidebar-foreground hidden md:block',
+    '[class]': 'hostClasses()',
+    '[style.display]': 'hostDisplay()',
+    '[attr.data-state]': 'context.isMobile() ? mobileState() : context.state()',
+    '[attr.data-collapsible]': 'collapsibleAttr()',
+    '[attr.data-side]': 'side()',
+    '[attr.data-layout]': 'layout()',
+  },
+})
+export class SngLayoutSidebar {
+  /** Which side of the viewport the sidebar appears on. */
+  side = input<LayoutSidebarSide>('left');
+
+  /** Collapse behavior: 'offcanvas' slides out, 'icon' shows icons only, 'none' disables collapse. */
+  collapsible = input<LayoutSidebarCollapsible>('offcanvas');
+
+  /**
+   * Layout mode controlling positioning and visual style.
+   * - 'sidebar': Fixed positioning with border (default)
+   * - 'floating': Fixed with padding, rounded corners, border, and shadow
+   * - 'inset': Sticky positioning within content flow
+   */
+  layout = input<LayoutSidebarLayout>('sidebar');
+
+  /** Custom CSS classes. */
+  class = input<string>('');
+
+  protected context = inject(SNG_LAYOUT_SIDEBAR_CONTEXT);
+  private doc = inject(DOCUMENT);
+  private cdr = inject(ChangeDetectorRef);
+  private destroyRef = inject(DestroyRef);
+
+  // data-collapsible only shows value when collapsed
+  collapsibleAttr = computed(() =>
+    this.context.state() === 'collapsed' ? this.collapsible() : ''
+  );
+
+  // Mobile drawer state
+  mobileState = computed(() =>
+    this.context.openMobile() ? 'open' : 'closed'
+  );
+
+  // Track if mobile drawer has ever been opened (avoid rendering closed drawer on page load)
+  private _hasBeenOpened = false;
+  hasBeenOpened = computed(() => {
+    if (this.context.openMobile()) this._hasBeenOpened = true;
+    return this._hasBeenOpened;
+  });
+
+  // Host element - outer wrapper
+  hostClasses = computed(() => cn(
+    'group peer text-sidebar-foreground',
+    this.class()
+  ));
+
+  hostDisplay = computed(() => (this.context.isMobile() ? 'block' : null));
+
+  // Gap div - reserves space in document flow (desktop only)
+  gapClasses = computed(() => {
+    const s = this.side();
+    const v = this.layout();
+    const noTransition = this.context.suppressTransition();
+    return cn(
+      'relative bg-transparent',
+      !noTransition && 'transition-[width] duration-200 ease-linear',
+      'w-(--sidebar-width)',
+      'group-data-[collapsible=offcanvas]:w-0',
+      v === 'floating'
+        ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+1rem)]'
+        : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',
+      s === 'right' && 'order-1'
+    );
+  });
+
+  // Container - positions the sidebar based on layout mode (desktop only)
+  containerClasses = computed(() => {
+    const s = this.side();
+    const v = this.layout();
+    const isInset = v === 'inset';
+    const noTransition = this.context.suppressTransition();
+
+    return cn(
+      'z-10 hidden w-(--sidebar-width) md:flex',
+      !noTransition && 'transition-[inset-inline-start,inset-inline-end,width] duration-200 ease-linear',
+      isInset ? 'sticky top-0 h-svh' : 'fixed inset-y-0 h-full',
+      !isInset && (s === 'left' ? 'start-0' : 'end-0'),
+      v === 'floating' && 'p-2',
+      isInset
+        ? 'group-data-[collapsible=offcanvas]:w-0'
+        : s === 'left'
+          ? 'group-data-[collapsible=offcanvas]:start-[calc(var(--sidebar-width)*-1)]'
+          : 'group-data-[collapsible=offcanvas]:end-[calc(var(--sidebar-width)*-1)]',
+      v === 'floating'
+        ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+1rem+2px)]'
+        : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',
+      v === 'sidebar' && (s === 'left' ? 'border-e' : 'border-s')
+    );
+  });
+
+  // Mobile drawer classes
+  mobileDrawerClasses = computed(() => {
+    const s = this.side();
+    return cn(
+      'sng-sidebar-drawer fixed inset-y-0 z-50 flex w-(--sidebar-width) shadow-lg',
+      s === 'left' ? 'left-0 border-e' : 'right-0 border-s',
+      // Before first open, hide offscreen to avoid flash
+      !this.hasBeenOpened() && (s === 'left' ? '-translate-x-full' : 'translate-x-full')
+    );
+  });
+
+  // Inner div - actual sidebar content
+  innerClasses = computed(() => {
+    const v = this.layout();
+    return cn(
+      'group flex h-full w-full flex-col bg-sidebar',
+      !this.context.isMobile() && v === 'floating' && 'rounded-lg border border-sidebar-border shadow-sm'
+    );
+  });
+
+  constructor() {
+    // Ensure all template bindings are flushed after first render (zoneless CD fix)
+    afterNextRender(() => this.cdr.detectChanges());
+
+    // Body scroll lock when mobile drawer is open
+    effect(() => {
+      const isOpen = this.context.isMobile() && this.context.openMobile();
+      this.doc.body.style.overflow = isOpen ? 'hidden' : '';
+    });
+
+    this.destroyRef.onDestroy(() => {
+      this.doc.body.style.overflow = '';
+    });
+  }
+
+  protected onBackdropClick(): void {
+    this.context.setOpenMobile(false);
+  }
+
+}

package/src/lib/menu/cn.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/lib/menu/index.ts

@@ -0,0 +1,21 @@
+// Menu tokens
+export { SNG_MENU_PANEL, type MenuPanel } from './sng-menu-tokens';
+
+// Menu components
+export { SngMenu } from './sng-menu';
+export { SngMenuTrigger } from './sng-menu-trigger';
+export { SngContextTrigger } from './sng-context-trigger';
+// Menu item components
+export { SngMenuItem } from './sng-menu-item';
+export { SngMenuSeparator } from './sng-menu-separator';
+export { SngMenuLabel } from './sng-menu-label';
+export { SngMenuShortcut } from './sng-menu-shortcut';
+export { SngMenuCheckboxItem } from './sng-menu-checkbox-item';
+export { SngMenuRadioGroup } from './sng-menu-radio-group';
+export { SngMenuRadioItem } from './sng-menu-radio-item';
+
+// Submenu components
+export { SngMenuSub } from './sng-menu-sub';
+export { SngMenuSubTrigger } from './sng-menu-sub-trigger';
+export { SngMenuSubContent } from './sng-menu-sub-content';
+

package/src/lib/menu/sng-context-trigger.ts

@@ -0,0 +1,128 @@
+import {
+  Directive,
+  inject,
+  Injector,
+  input,
+  OnDestroy,
+  ViewContainerRef,
+  afterNextRender,
+} from '@angular/core';
+import { Overlay, type OverlayRef, type ConnectedPosition } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { SngMenu } from './sng-menu';
+import { animateOverlayClose, focusMenuContent } from './sng-menu-tokens';
+
+const CONTEXT_MENU_POSITIONS: ConnectedPosition[] = [
+  { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
+  { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' },
+  { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },
+  { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' },
+];
+
+/**
+ * Directive that opens a menu on right-click (context menu).
+ * Owns the CDK Overlay lifecycle for point-based positioning.
+ *
+ * @example
+ * ```html
+ * <div [sngContextTrigger]="myMenu" class="w-full h-64 border">
+ *   Right click anywhere in this area
+ * </div>
+ * <sng-menu #myMenu>...</sng-menu>
+ * ```
+ */
+@Directive({
+  selector: '[sngContextTrigger]',
+  standalone: true,
+  host: {
+    '[attr.data-state]': 'menu()?.isOpen() ? "open" : "closed"',
+    '(contextmenu)': 'onContextMenu($event)',
+  },
+})
+export class SngContextTrigger implements OnDestroy {
+  private overlay = inject(Overlay);
+  private injector = inject(Injector);
+  private viewContainerRef = inject(ViewContainerRef);
+
+  private overlayRef: OverlayRef | null = null;
+  private _closing = false;
+
+  /** The menu to open when right-clicked. */
+  menu = input.required<SngMenu>({ alias: 'sngContextTrigger' });
+
+  onContextMenu(event: MouseEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+    this.openAt(event.clientX, event.clientY);
+  }
+
+  ngOnDestroy() {
+    this.close();
+    this.disposeOverlay();
+  }
+
+  private openAt(x: number, y: number) {
+    const menuRef = this.menu();
+    if (!menuRef) return;
+
+    this.disposeOverlay();
+
+    const template = menuRef._menuTemplate();
+    if (!template) return;
+
+    if (!Number.isFinite(x) || !Number.isFinite(y) || x < 0 || y < 0) return;
+
+    menuRef.currentSide.set('bottom');
+    menuRef._closeFromTrigger = () => this.close();
+
+    const positionStrategy = this.overlay.position()
+      .flexibleConnectedTo({ x, y })
+      .withPositions(CONTEXT_MENU_POSITIONS)
+      .withPush(true)
+      .withViewportMargin(8);
+
+    this.overlayRef = this.overlay.create({
+      positionStrategy,
+      scrollStrategy: this.overlay.scrollStrategies.close(),
+      hasBackdrop: true,
+      backdropClass: 'cdk-overlay-transparent-backdrop',
+    });
+
+    this.overlayRef.backdropClick().subscribe(() => this.close());
+    this.overlayRef.detachments().subscribe(() => this.close());
+
+    const portal = new TemplatePortal(template, this.viewContainerRef);
+    this.overlayRef.attach(portal);
+
+    menuRef.isOpen.set(true);
+
+    afterNextRender(() => {
+      const panel = this.overlayRef?.overlayElement.querySelector('[role="menu"]') as HTMLElement | null;
+      if (panel) {
+        focusMenuContent(panel);
+      }
+    }, { injector: this.injector });
+  }
+
+  private close() {
+    const menuRef = this.menu();
+    if (!menuRef?.isOpen() || this._closing) return;
+    this._closing = true;
+    menuRef._subContentOverlays.forEach(sc => sc._resetOnMenuClose());
+    menuRef.isOpen.set(false);
+
+    if (this.overlayRef) {
+      animateOverlayClose(this.overlayRef, () => this.disposeOverlay());
+    } else {
+      this._closing = false;
+    }
+  }
+
+  private disposeOverlay() {
+    this._closing = false;
+    if (this.overlayRef) {
+      this.overlayRef.dispose();
+      this.overlayRef = null;
+    }
+  }
+}

package/src/lib/menu/sng-menu-checkbox-item.ts

@@ -0,0 +1,91 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  ViewEncapsulation,
+  input,
+  computed,
+  model,
+  booleanAttribute,
+  inject,
+} from '@angular/core';
+import { cn } from './cn';
+import { SNG_MENU_PANEL, MENU_ITEM_BASE_CLASSES } from './sng-menu-tokens';
+
+/**
+ * A checkbox menu item that can be toggled on/off.
+ *
+ * @example
+ * ```html
+ * <sng-menu>
+ *   <sng-menu-checkbox-item [(checked)]="showToolbar">
+ *     Show Toolbar
+ *   </sng-menu-checkbox-item>
+ * </sng-menu>
+ * ```
+ */
+@Component({
+  selector: 'sng-menu-checkbox-item',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    '[class]': 'hostClasses()',
+    '[attr.data-state]': 'checked() ? "checked" : "unchecked"',
+    '[attr.data-disabled]': 'resolvedDisabled() ? "" : null',
+    '[attr.aria-checked]': 'checked()',
+    '[attr.tabindex]': 'resolvedDisabled() ? -1 : 0',
+    'role': 'menuitemcheckbox',
+    '(click)': 'toggle()',
+  },
+  template: `
+    <span class="flex h-4 w-4 items-center justify-center mr-2">
+      @if (checked()) {
+        <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <polyline points="20 6 9 17 4 12" />
+        </svg>
+      }
+    </span>
+    <ng-content />
+  `,
+})
+export class SngMenuCheckboxItem {
+  private panel = inject(SNG_MENU_PANEL, { optional: true });
+
+  /** Custom CSS classes. */
+  class = input<string>('');
+
+  /** Whether the checkbox is checked. Supports two-way binding. */
+  checked = model(false);
+
+  /** Whether the checkbox item is disabled. */
+  disabled = input(false, { transform: booleanAttribute });
+
+  /** Legacy disabled input name. */
+  isDisabled = input<unknown>(undefined);
+
+  /** Whether to close the menu when this item is toggled. Uses parent menu's setting when not specified. */
+  isCloseOnSelect = input<boolean | undefined>(undefined);
+
+  resolvedDisabled = computed(() => {
+    const legacyValue = this.isDisabled();
+    return legacyValue === undefined ? this.disabled() : booleanAttribute(legacyValue);
+  });
+
+  hostClasses = computed(() =>
+    cn(
+      ...MENU_ITEM_BASE_CLASSES,
+      this.class()
+    )
+  );
+
+  /** Toggles the checked state. */
+  toggle() {
+    if (!this.resolvedDisabled()) {
+      this.checked.update(v => !v);
+      const shouldClose = this.isCloseOnSelect() ?? this.panel?.closeOnSelect() ?? true;
+      if (shouldClose) {
+        this.panel?.close();
+      }
+    }
+  }
+}

package/src/lib/menu/sng-menu-item.ts

@@ -0,0 +1,80 @@
+import {
+  Directive,
+  ElementRef,
+  inject,
+  input,
+  computed,
+  booleanAttribute,
+} from '@angular/core';
+import { cn } from './cn';
+import { SNG_MENU_PANEL, MENU_ITEM_BASE_CLASSES } from './sng-menu-tokens';
+
+/**
+ * A standard interactive menu item.
+ *
+ * @example
+ * ```html
+ * <sng-menu>
+ *   <sng-menu-item>Edit</sng-menu-item>
+ *   <sng-menu-item [isDisabled]="true">Delete</sng-menu-item>
+ * </sng-menu>
+ * ```
+ */
+@Directive({
+  selector: 'sng-menu-item',
+  standalone: true,
+  host: {
+    '[class]': 'hostClasses()',
+    '[attr.data-disabled]': 'resolvedDisabled() ? "" : null',
+    '[attr.tabindex]': 'resolvedDisabled() ? -1 : 0',
+    'role': 'menuitem',
+    '(click)': 'onClick()',
+  },
+})
+export class SngMenuItem {
+  private elementRef = inject(ElementRef);
+  private panel = inject(SNG_MENU_PANEL, { optional: true });
+
+  /** Custom CSS classes. */
+  class = input<string>('');
+
+  /** Whether the menu item is disabled. */
+  disabled = input(false, { transform: booleanAttribute });
+
+  /** Legacy disabled input name. */
+  isDisabled = input<unknown>(undefined);
+
+  /** Whether to add left padding for alignment with checkbox/radio items. */
+  inset = input(false, { transform: booleanAttribute });
+
+  /** Whether to close the menu when this item is selected. Uses parent menu's setting when not specified. */
+  isCloseOnSelect = input<boolean | undefined>(undefined);
+
+  resolvedDisabled = computed(() => {
+    const legacyValue = this.isDisabled();
+    return legacyValue === undefined ? this.disabled() : booleanAttribute(legacyValue);
+  });
+
+  hostClasses = computed(() =>
+    cn(
+      ...MENU_ITEM_BASE_CLASSES,
+      this.inset() && 'pl-8',
+      this.class()
+    )
+  );
+
+  /** CDK FocusableOption — focus this item. */
+  focus(): void {
+    this.elementRef.nativeElement.focus();
+  }
+
+  onClick() {
+    if (!this.resolvedDisabled()) {
+      const shouldClose = this.isCloseOnSelect() ?? this.panel?.closeOnSelect() ?? true;
+      if (shouldClose) {
+        this.panel?.close();
+      }
+    }
+  }
+
+}