@ng-cn/core 1.0.15 → 1.0.17

package/src/app/lib/components/ui/command/command-item.component.ts

@@ -1,16 +1,16 @@
 import { cn } from '@/lib/utils';
 import {
-    afterNextRender,
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    effect,
-    ElementRef,
-    inject,
-    input,
-    OnDestroy,
-    OnInit,
-    output,
+  afterNextRender,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  effect,
+  ElementRef,
+  inject,
+  input,
+  OnDestroy,
+  OnInit,
+  output,
 } from '@angular/core';
 import { COMMAND_CONTEXT } from './command-context';
 
@@ -25,6 +25,7 @@ let itemIndexCounter = 0;
   selector: 'CommandItem',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"command-item"',
     '[class]': 'computedClass()',
     '[attr.role]': '"option"',
     '[attr.id]': 'itemId',
@@ -40,106 +41,93 @@ let itemIndexCounter = 0;
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CommandItem implements OnInit, OnDestroy {
-  protected readonly context = inject(COMMAND_CONTEXT);
-  private readonly elementRef = inject(ElementRef);
+  constructor() {
+    // Scroll into view when focused
+    effect(() => {
+      if (this.isFocused()) {
+        this._elementRef.nativeElement.scrollIntoView({ block: 'nearest' });
+      }
+    });
 
-  readonly itemIndex = itemIndexCounter++;
-  readonly itemId = `command-item-${this.itemIndex}`;
+    // Update local index after render (browser-only)
+    afterNextRender(() => {
+      this.updateLocalIndex();
+      this.context.itemCount.update((c) => c + 1);
+    });
+  }
+
+  /** Select event emitted when item is clicked */
+  readonly onSelect = output<string>();
 
   /** Unique value for this item */
   readonly value = input<string>('');
-
   /** Keywords for search filtering */
   readonly keywords = input<string[]>([]);
-
   /** Whether the item is disabled */
   readonly disabled = input<boolean>(false);
-
   /** Additional CSS classes */
   readonly class = input<string>('');
 
-  /** Select event emitted when item is clicked */
-  readonly onSelect = output<string>();
+  private readonly _elementRef = inject(ElementRef);
+
+  protected readonly context = inject(COMMAND_CONTEXT);
 
   /** Whether item matches current search filter */
   protected readonly isVisible = computed(() => {
     return this.context.shouldShowItem(this.value(), this.keywords());
   });
-
   /** Get visible index among shown items */
   protected readonly visibleIndex = computed(() => {
     if (!this.isVisible()) return -1;
 
-    const parent = this.elementRef.nativeElement.closest('CommandList, [role="listbox"]');
+    const parent = this._elementRef.nativeElement.closest('CommandList, [role="listbox"]');
     if (parent) {
-      const visibleItems = Array.from(
-        parent.querySelectorAll('CommandItem:not([hidden])')
-      );
-      return visibleItems.indexOf(this.elementRef.nativeElement);
+      const visibleItems = Array.from(parent.querySelectorAll('CommandItem:not([hidden])'));
+      return visibleItems.indexOf(this._elementRef.nativeElement);
     }
     return this.localIndex;
   });
-
   protected readonly isFocused = computed(() => {
     const focusedIdx = this.context.focusedIndex();
     return this.isVisible() && this.getLocalIndex() === focusedIdx;
   });
-
-  private localIndex = -1;
-
   protected readonly computedClass = computed(() =>
     cn(
-      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[selected]:bg-accent data-[selected]:text-accent-foreground data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+      'relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[selected]:bg-accent data-[selected]:text-accent-foreground data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0 [&>lucide-icon]:size-4 [&>lucide-icon]:shrink-0',
       !this.disabled() && 'cursor-pointer hover:bg-accent hover:text-accent-foreground',
-      this.class()
-    )
+      this.class(),
+    ),
   );
 
-  constructor() {
-    // Scroll into view when focused
-    effect(() => {
-      if (this.isFocused()) {
-        this.elementRef.nativeElement.scrollIntoView({ block: 'nearest' });
-      }
-    });
-
-    // Update local index after render (browser-only)
-    afterNextRender(() => {
-      this.updateLocalIndex();
-      this.context.itemCount.update(c => c + 1);
-    });
-  }
+  readonly itemIndex = itemIndexCounter++;
+  readonly itemId = `command-item-${this.itemIndex}`;
+  private localIndex = -1;
 
   ngOnInit(): void {
     this.context.registerItem(this.value());
   }
-
   ngOnDestroy(): void {
     this.context.unregisterItem(this.value());
-    this.context.itemCount.update(c => Math.max(0, c - 1));
+    this.context.itemCount.update((c) => Math.max(0, c - 1));
   }
 
   private updateLocalIndex(): void {
     // Find our position among sibling command items
-    const parent = this.elementRef.nativeElement.closest('CommandList, [role="listbox"]');
+    const parent = this._elementRef.nativeElement.closest('CommandList, [role="listbox"]');
     if (parent) {
       const items = Array.from(parent.querySelectorAll('CommandItem'));
-      this.localIndex = items.indexOf(this.elementRef.nativeElement);
+      this.localIndex = items.indexOf(this._elementRef.nativeElement);
     }
   }
-
   private getLocalIndex(): number {
     // Dynamically compute index based on visible DOM position
-    const parent = this.elementRef.nativeElement.closest('CommandList, [role="listbox"]');
+    const parent = this._elementRef.nativeElement.closest('CommandList, [role="listbox"]');
     if (parent) {
-      const visibleItems = Array.from(
-        parent.querySelectorAll('CommandItem:not([hidden])')
-      );
-      return visibleItems.indexOf(this.elementRef.nativeElement);
+      const visibleItems = Array.from(parent.querySelectorAll('CommandItem:not([hidden])'));
+      return visibleItems.indexOf(this._elementRef.nativeElement);
     }
     return this.localIndex;
   }
-
   protected handleClick(): void {
     if (this.disabled() || !this.isVisible()) return;
     this.context.selectedValue.set(this.value());

package/src/app/lib/components/ui/command/command-list.component.ts

@@ -11,20 +11,21 @@ import { COMMAND_CONTEXT } from './command-context';
   selector: 'CommandList',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"command-list"',
     '[class]': 'computedClass()',
     '[attr.id]': 'context.listId',
-    'role': 'listbox',
+    role: 'listbox',
     '[attr.aria-label]': '"Command suggestions"',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CommandList {
-  protected readonly context = inject(COMMAND_CONTEXT);
-
   /** Additional CSS classes */
   readonly class = input<string>('');
 
+  protected readonly context = inject(COMMAND_CONTEXT);
+
   protected readonly computedClass = computed(() =>
-    cn('max-h-[300px] overflow-y-auto overflow-x-hidden', this.class())
+    cn('max-h-[300px] overflow-y-auto overflow-x-hidden', this.class()),
   );
 }

package/src/app/lib/components/ui/command/command-separator.component.ts

@@ -9,6 +9,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
   selector: 'CommandSeparator',
   template: ``,
   host: {
+    'attr.data-slot': '"command-separator"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -17,7 +18,5 @@ export class CommandSeparator {
   /** Additional CSS classes */
   readonly class = input<string>('');
 
-  protected readonly computedClass = computed(() =>
-    cn('-mx-1 h-px bg-border', this.class())
-  );
+  protected readonly computedClass = computed(() => cn('-mx-1 h-px bg-border', this.class()));
 }

package/src/app/lib/components/ui/command/command-shortcut.component.ts

@@ -9,6 +9,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
   selector: 'CommandShortcut',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"command-shortcut"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -18,6 +19,6 @@ export class CommandShortcut {
   readonly class = input<string>('');
 
   protected readonly computedClass = computed(() =>
-    cn('ml-auto text-xs tracking-widest text-muted-foreground', this.class())
+    cn('ml-auto text-xs tracking-widest text-muted-foreground', this.class()),
   );
 }

package/src/app/lib/components/ui/command/command.component.ts

@@ -1,13 +1,28 @@
 import { cn } from '@/lib/utils';
-import { ChangeDetectionStrategy, Component, computed, forwardRef, input, signal } from '@angular/core';
-import { COMMAND_CONTEXT, type CommandContextValue, type CommandFilterFunction } from './command-context';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  forwardRef,
+  input,
+  signal,
+} from '@angular/core';
+import {
+  COMMAND_CONTEXT,
+  type CommandContextValue,
+  type CommandFilterFunction,
+} from './command-context';
 
 let commandIdCounter = 0;
 
 /**
  * Default filter function for command items.
  */
-const defaultFilterFn: CommandFilterFunction = (value: string, search: string, keywords?: string[]): number => {
+const defaultFilterFn: CommandFilterFunction = (
+  value: string,
+  search: string,
+  keywords?: string[],
+): number => {
   if (!search.trim()) return 1;
 
   const extendedValue = keywords ? `${value} ${keywords.join(' ')}` : value;
@@ -48,6 +63,7 @@ const defaultFilterFn: CommandFilterFunction = (value: string, search: string, k
     },
   ],
   host: {
+    'attr.data-slot': '"command"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -59,47 +75,42 @@ export class Command implements CommandContextValue {
   /** Custom filter function for search */
   readonly filter = input<CommandFilterFunction | undefined>(undefined);
 
-  // CommandContextValue implementation
-  private readonly _id = commandIdCounter++;
-  private readonly _items: string[] = [];
+  readonly filterFunction = computed(() => {
+    return this.filter() ?? defaultFilterFn;
+  });
+  protected readonly computedClass = computed(() =>
+    cn(
+      'flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground',
+      this.class(),
+    ),
+  );
 
   readonly search = signal('');
   readonly selectedValue = signal('');
-  readonly focusedIndex = signal(-1);
+  readonly focusedIndex = signal(0);
   readonly itemCount = signal(0);
   readonly visibleItemCount = signal(0);
+
+  // CommandContextValue implementation
+  private readonly _id = commandIdCounter++;
+  private readonly _items: string[] = [];
   readonly listId = `command-list-${this._id}`;
   readonly inputId = `command-input-${this._id}`;
-
-  readonly filterFunction = computed(() => {
-    return this.filter() ?? defaultFilterFn;
-  });
-
   registerItem = (value: string) => {
     if (!this._items.includes(value)) {
       this._items.push(value);
     }
   };
-
   unregisterItem = (value: string) => {
     const index = this._items.indexOf(value);
     if (index > -1) {
       this._items.splice(index, 1);
     }
   };
-
   getItems = () => this._items;
-
   shouldShowItem = (value: string, keywords?: string[]): boolean => {
     const searchValue = this.search();
     if (!searchValue) return true;
     return this.filterFunction()(value, searchValue, keywords) > 0;
   };
-
-  protected readonly computedClass = computed(() =>
-    cn(
-      'flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground',
-      this.class()
-    )
-  );
 }

package/src/app/lib/components/ui/command/index.ts

@@ -8,4 +8,3 @@ export { CommandList } from './command-list.component';
 export { CommandSeparator } from './command-separator.component';
 export { CommandShortcut } from './command-shortcut.component';
 export { Command } from './command.component';
-

package/src/app/lib/components/ui/context-menu/context-menu-checkbox-item.component.ts

@@ -1,5 +1,13 @@
 import { cn } from '@/lib/utils';
-import { ChangeDetectionStrategy, Component, computed, inject, input, model, output } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  input,
+  model,
+  output,
+} from '@angular/core';
 import { Check, LucideAngularModule } from 'lucide-angular';
 import { CONTEXT_MENU_CONTEXT } from './context-menu-context';
 
@@ -19,6 +27,7 @@ import { CONTEXT_MENU_CONTEXT } from './context-menu-context';
     <ng-content />
   `,
   host: {
+    'attr.data-slot': '"context-menu-checkbox-item"',
     '[class]': 'computedClass()',
     '[attr.role]': '"menuitemcheckbox"',
     '[attr.aria-checked]': 'checked()',
@@ -33,29 +42,29 @@ import { CONTEXT_MENU_CONTEXT } from './context-menu-context';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ContextMenuCheckboxItem {
-  private readonly context = inject(CONTEXT_MENU_CONTEXT);
-  protected readonly CheckIcon = Check;
+  /** Checked change event */
+  readonly onCheckedChange = output<boolean>();
 
   /** Whether the checkbox is checked */
   readonly checked = model<boolean>(false);
 
-  /** Whether the item is disabled */
-  readonly disabled = input<boolean>(false);
-
   /** Additional CSS classes */
   readonly class = input<string>('');
+  /** Whether the item is disabled */
+  readonly disabled = input<boolean>(false);
 
-  /** Checked change event */
-  readonly onCheckedChange = output<boolean>();
+  private readonly _context = inject(CONTEXT_MENU_CONTEXT);
 
   protected readonly computedClass = computed(() =>
     cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       !this.disabled() && 'cursor-pointer hover:bg-accent hover:text-accent-foreground',
-      this.class()
-    )
+      this.class(),
+    ),
   );
 
+  protected readonly CheckIcon = Check;
+
   protected handleClick(event: Event): void {
     if (this.disabled()) {
       event.preventDefault();

package/src/app/lib/components/ui/context-menu/context-menu-content.component.ts

@@ -1,14 +1,14 @@
 import { cn, Presence } from '@/lib/utils';
 import {
-    afterNextRender,
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    effect,
-    ElementRef,
-    inject,
-    input,
-    OnDestroy,
+  afterNextRender,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  effect,
+  ElementRef,
+  inject,
+  input,
+  OnDestroy,
 } from '@angular/core';
 import { CONTEXT_MENU_CONTEXT } from './context-menu-context';
 
@@ -38,6 +38,7 @@ import { CONTEXT_MENU_CONTEXT } from './context-menu-context';
     </Presence>
   `,
   host: {
+    'attr.data-slot': '"context-menu-content"',
     class: 'contents',
     '(document:click)': 'onDocumentClick()',
     '(document:keydown.escape)': 'onEscapeKey()',
@@ -46,26 +47,6 @@ import { CONTEXT_MENU_CONTEXT } from './context-menu-context';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ContextMenuContent implements OnDestroy {
-  protected readonly context = inject(CONTEXT_MENU_CONTEXT);
-  private readonly elementRef = inject(ElementRef);
-
-  /** Additional CSS classes */
-  readonly class = input<string>('');
-
-  private menuItems: HTMLElement[] = [];
-  private typeaheadBuffer = '';
-  private typeaheadTimeout: ReturnType<typeof setTimeout> | null = null;
-
-  protected readonly computedClass = computed(() =>
-    cn(
-      'z-50 min-w-[12rem] overflow-hidden rounded-xl border bg-popover p-2 text-popover-foreground shadow-lg',
-      'data-[state=open]:animate-in data-[state=closed]:animate-out',
-      'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-      'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
-      this.class()
-    )
-  );
-
   constructor() {
     // Focus first item when menu opens
     effect(() => {
@@ -89,6 +70,27 @@ export class ContextMenuContent implements OnDestroy {
     });
   }
 
+  /** Additional CSS classes */
+  readonly class = input<string>('');
+
+  private readonly _elementRef = inject(ElementRef);
+
+  protected readonly context = inject(CONTEXT_MENU_CONTEXT);
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      'z-50 min-w-[12rem] overflow-hidden rounded-xl border bg-popover p-2 text-popover-foreground shadow-lg',
+      'data-[state=open]:animate-in data-[state=closed]:animate-out',
+      'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+      this.class(),
+    ),
+  );
+
+  private menuItems: HTMLElement[] = [];
+  private typeaheadBuffer = '';
+  private typeaheadTimeout: ReturnType<typeof setTimeout> | null = null;
+
   ngOnDestroy(): void {
     if (this.typeaheadTimeout) {
       clearTimeout(this.typeaheadTimeout);
@@ -96,14 +98,15 @@ export class ContextMenuContent implements OnDestroy {
   }
 
   private updateMenuItems(): void {
-    const content = this.elementRef.nativeElement.querySelector('[role="menu"]');
+    const content = this._elementRef.nativeElement.querySelector('[role="menu"]');
     if (content) {
       this.menuItems = Array.from(
-        content.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"]):not([data-disabled])')
+        content.querySelectorAll(
+          '[role="menuitem"]:not([aria-disabled="true"]):not([data-disabled])',
+        ),
       );
     }
   }
-
   protected onKeydown(event: KeyboardEvent): void {
     this.updateMenuItems();
 
@@ -136,27 +139,22 @@ export class ContextMenuContent implements OnDestroy {
         break;
     }
   }
-
   private focusNext(): void {
     const currentIndex = this.context.focusedIndex();
     const nextIndex = currentIndex < this.menuItems.length - 1 ? currentIndex + 1 : 0;
     this.focusItem(nextIndex);
   }
-
   private focusPrevious(): void {
     const currentIndex = this.context.focusedIndex();
     const prevIndex = currentIndex > 0 ? currentIndex - 1 : this.menuItems.length - 1;
     this.focusItem(prevIndex);
   }
-
   private focusFirst(): void {
     this.focusItem(0);
   }
-
   private focusLast(): void {
     this.focusItem(this.menuItems.length - 1);
   }
-
   private focusItem(index: number): void {
     if (index >= 0 && index < this.menuItems.length) {
       // Update roving tabindex
@@ -167,7 +165,6 @@ export class ContextMenuContent implements OnDestroy {
       this.context.focusedIndex.set(index);
     }
   }
-
   private handleTypeahead(key: string): void {
     this.typeaheadBuffer += key.toLowerCase();
 
@@ -181,14 +178,13 @@ export class ContextMenuContent implements OnDestroy {
 
     // Find first matching item
     const matchIndex = this.menuItems.findIndex((item) =>
-      item.textContent?.toLowerCase().trim().startsWith(this.typeaheadBuffer)
+      item.textContent?.toLowerCase().trim().startsWith(this.typeaheadBuffer),
     );
 
     if (matchIndex >= 0) {
       this.focusItem(matchIndex);
     }
   }
-
   private close(): void {
     this.context.open.set(false);
     this.context.focusedIndex.set(-1);
@@ -198,15 +194,12 @@ export class ContextMenuContent implements OnDestroy {
       triggerEl.focus();
     }
   }
-
   protected onDocumentClick(): void {
     this.close();
   }
-
   protected onEscapeKey(): void {
     this.close();
   }
-
   protected onAnotherContextMenu(): void {
     // Will be handled by new context menu trigger
   }

package/src/app/lib/components/ui/context-menu/context-menu-context.ts

@@ -13,5 +13,5 @@ export interface ContextMenuContextValue {
 }
 
 export const CONTEXT_MENU_CONTEXT = new InjectionToken<ContextMenuContextValue>(
-  'CONTEXT_MENU_CONTEXT'
+  'CONTEXT_MENU_CONTEXT',
 );

package/src/app/lib/components/ui/context-menu/context-menu-item.component.ts

@@ -11,6 +11,7 @@ import { CONTEXT_MENU_CONTEXT } from './context-menu-context';
   selector: 'ContextMenuItem',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"context-menu-item"',
     '[class]': 'computedClass()',
     '[attr.role]': '"menuitem"',
     '[attr.tabindex]': 'disabled() ? -1 : -1',
@@ -23,27 +24,25 @@ import { CONTEXT_MENU_CONTEXT } from './context-menu-context';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ContextMenuItem {
-  private readonly context = inject(CONTEXT_MENU_CONTEXT);
+  /** Select event emitted when item is clicked */
+  readonly onSelect = output<void>();
 
+  /** Additional CSS classes */
+  readonly class = input<string>('');
   /** Whether the item is disabled */
   readonly disabled = input<boolean>(false);
-
   /** Whether the item is inset (extra padding) */
   readonly inset = input<boolean>(false);
 
-  /** Additional CSS classes */
-  readonly class = input<string>('');
-
-  /** Select event emitted when item is clicked */
-  readonly onSelect = output<void>();
+  private readonly _context = inject(CONTEXT_MENU_CONTEXT);
 
   protected readonly computedClass = computed(() =>
     cn(
-      "relative flex cursor-default select-none items-center gap-3 rounded-md px-3 py-2.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+      'relative flex cursor-default select-none items-center gap-3 rounded-md px-3 py-2.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0 [&>lucide-icon]:size-4 [&>lucide-icon]:shrink-0',
       this.inset() && 'pl-8',
       !this.disabled() && 'cursor-pointer hover:bg-accent hover:text-accent-foreground',
-      this.class()
-    )
+      this.class(),
+    ),
   );
 
   protected handleClick(event: Event): void {
@@ -52,10 +51,10 @@ export class ContextMenuItem {
       return;
     }
     this.onSelect.emit();
-    this.context.open.set(false);
-    this.context.focusedIndex.set(-1);
+    this._context.open.set(false);
+    this._context.focusedIndex.set(-1);
     // Restore focus to trigger element
-    const triggerEl = this.context.triggerElement();
+    const triggerEl = this._context.triggerElement();
     if (triggerEl) {
       triggerEl.focus();
     }

package/src/app/lib/components/ui/context-menu/context-menu-label.component.ts

@@ -9,6 +9,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
   selector: 'ContextMenuLabel',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"context-menu-label"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -21,10 +22,6 @@ export class ContextMenuLabel {
   readonly class = input<string>('');
 
   protected readonly computedClass = computed(() =>
-    cn(
-      'px-2 py-1.5 text-sm font-semibold text-foreground',
-      this.inset() && 'pl-8',
-      this.class()
-    )
+    cn('px-2 py-1.5 text-sm font-semibold text-foreground', this.inset() && 'pl-8', this.class()),
   );
 }