@ng-cn/core 1.0.15 → 1.0.17

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

@@ -2,10 +2,6 @@ import { cn } from '@/lib/utils';
 import { ChangeDetectionStrategy, Component, computed, input, signal } from '@angular/core';
 import { MENUBAR_CONTEXT, type MenubarContextValue } from './menubar-context';
 
-// ============================================================================
-// Types
-// ============================================================================
-
 /**
  * Props for the Menubar component
  */
@@ -17,10 +13,6 @@ export interface MenubarProps {
   class?: string;
 }
 
-// ============================================================================
-// Component
-// ============================================================================
-
 /**
  * @component Menubar
  *
@@ -117,10 +109,10 @@ export interface MenubarProps {
           menuIds,
           focusedMenuIndex,
           registerMenu: (menuId: string) => {
-            menuIds.update(ids => [...ids, menuId]);
+            menuIds.update((ids) => [...ids, menuId]);
           },
           unregisterMenu: (menuId: string) => {
-            menuIds.update(ids => ids.filter(id => id !== menuId));
+            menuIds.update((ids) => ids.filter((id) => id !== menuId));
           },
           focusNextMenu: () => {
             const ids = menuIds();
@@ -139,8 +131,9 @@ export interface MenubarProps {
     },
   ],
   host: {
+    'attr.data-slot': '"menubar"',
     '[class]': 'computedClass()',
-    'role': 'menubar',
+    role: 'menubar',
     'aria-orientation': 'horizontal',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -152,7 +145,7 @@ export class Menubar {
   protected readonly computedClass = computed(() =>
     cn(
       'flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm',
-      this.class()
-    )
+      this.class(),
+    ),
   );
 }

package/src/app/lib/components/ui/native-select/index.ts

@@ -1,6 +1,2 @@
-export {
-    nativeSelectVariants,
-    type NativeSelectVariants
-} from './native-select-variants';
+export { nativeSelectVariants, type NativeSelectVariants } from './native-select-variants';
 export { NativeSelect } from './native-select.component';
-

package/src/app/lib/components/ui/native-select/native-select-variants.ts

@@ -17,7 +17,7 @@ export const nativeSelectVariants = cva(
     defaultVariants: {
       size: 'default',
     },
-  }
+  },
 );
 
 export type NativeSelectVariants = VariantProps<typeof nativeSelectVariants>;

package/src/app/lib/components/ui/native-select/native-select.component.ts

@@ -1,14 +1,6 @@
 import { cn } from '@/lib/utils';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    input,
-} from '@angular/core';
-import {
-    nativeSelectVariants,
-    type NativeSelectVariants,
-} from './native-select-variants';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { nativeSelectVariants, type NativeSelectVariants } from './native-select-variants';
 
 /**
  * NativeSelect component - styled HTML native select element.
@@ -46,10 +38,11 @@ import {
 @Component({
   // Use attribute selector to apply to native select elements
   selector: 'select[NativeSelect], NativeSelect',
+  standalone: true,
   template: `<ng-content />`,
   host: {
     '[class]': 'computedClass()',
-    'data-slot': 'native-select',
+    'attr.data-slot': '"native-select"',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -66,9 +59,15 @@ export class NativeSelect {
       nativeSelectVariants({
         size: this.size(),
       }),
-      // Custom background for the dropdown arrow
-      'bg-[url("data:image/svg+xml,%3Csvg 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\'%3E%3Cpath d=\'m6 9 6 6 6-6\'/%3E%3C/svg%3E")] bg-[length:1rem] bg-[right_0.5rem_center] bg-no-repeat pr-8',
-      this.class()
-    )
+      // Chevron arrow — light mode (gray-700 stroke, visible on light backgrounds)
+      "bg-[image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E\")]",
+      // Chevron arrow — dark mode (neutral-400 stroke, visible on dark backgrounds)
+      "dark:bg-[image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23a3a3a3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E\")]",
+      'bg-[size:16px_16px]',
+      'bg-[position:right_0.5rem_center]',
+      'bg-no-repeat',
+      'pr-8',
+      this.class(),
+    ),
   );
 }

package/src/app/lib/components/ui/navigation-menu/index.ts

@@ -1,11 +1,11 @@
 // Context and types
 export {
-    NAVIGATION_MENU_CONTEXT,
-    NAVIGATION_MENU_ITEM_CONTEXT,
-    type NavigationMenuContextValue,
-    type NavigationMenuDirection,
-    type NavigationMenuItemContextValue,
-    type NavigationMenuOrientation
+  NAVIGATION_MENU_CONTEXT,
+  NAVIGATION_MENU_ITEM_CONTEXT,
+  type NavigationMenuContextValue,
+  type NavigationMenuDirection,
+  type NavigationMenuItemContextValue,
+  type NavigationMenuOrientation,
 } from './navigation-menu-context';
 
 // Components and their types
@@ -14,8 +14,10 @@ export { NavigationMenuIndicator } from './navigation-menu-indicator.component';
 export { NavigationMenuItem } from './navigation-menu-item.component';
 export { NavigationMenuLink } from './navigation-menu-link.component';
 export { NavigationMenuList } from './navigation-menu-list.component';
-export { navigationMenuTriggerStyle, type NavigationMenuTriggerStyleProps } from './navigation-menu-trigger-style';
+export {
+  navigationMenuTriggerStyle,
+  type NavigationMenuTriggerStyleProps,
+} from './navigation-menu-trigger-style';
 export { NavigationMenuTrigger } from './navigation-menu-trigger.component';
 export { NavigationMenuViewport } from './navigation-menu-viewport.component';
 export { NavigationMenu, type NavigationMenuProps } from './navigation-menu.component';
-

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

@@ -1,5 +1,12 @@
 import { cn, Presence } from '@/lib/utils';
-import { ChangeDetectionStrategy, Component, computed, ElementRef, inject, input } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  ElementRef,
+  inject,
+  input,
+} from '@angular/core';
 import { NAVIGATION_MENU_CONTEXT, NAVIGATION_MENU_ITEM_CONTEXT } from './navigation-menu-context';
 
 /**
@@ -11,15 +18,13 @@ import { NAVIGATION_MENU_CONTEXT, NAVIGATION_MENU_ITEM_CONTEXT } from './navigat
   imports: [Presence],
   template: `
     <Presence [present]="itemContext.open()">
-      <div
-        [class]="computedClass()"
-        [attr.data-state]="itemContext.open() ? 'open' : 'closed'"
-      >
+      <div [class]="computedClass()" [attr.data-state]="itemContext.open() ? 'open' : 'closed'">
         <ng-content />
       </div>
     </Presence>
   `,
   host: {
+    'attr.data-slot': '"navigation-menu-content"',
     class: 'contents',
     '(document:click)': 'onDocumentClick($event)',
     '(document:keydown.escape)': 'onEscapeKey()',
@@ -27,13 +32,14 @@ import { NAVIGATION_MENU_CONTEXT, NAVIGATION_MENU_ITEM_CONTEXT } from './navigat
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class NavigationMenuContent {
-  protected readonly context = inject(NAVIGATION_MENU_CONTEXT);
-  protected readonly itemContext = inject(NAVIGATION_MENU_ITEM_CONTEXT);
-  private readonly elementRef = inject(ElementRef);
-
   /** Additional CSS classes */
   readonly class = input<string>('');
 
+  private readonly _elementRef = inject(ElementRef);
+
+  protected readonly context = inject(NAVIGATION_MENU_CONTEXT);
+  protected readonly itemContext = inject(NAVIGATION_MENU_ITEM_CONTEXT);
+
   protected readonly computedClass = computed(() =>
     cn(
       'absolute left-0 top-full mt-2 w-full rounded-xl border bg-popover p-4 text-popover-foreground shadow-lg',
@@ -44,13 +50,13 @@ export class NavigationMenuContent {
       'data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52',
       'data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52',
       'md:absolute md:w-auto',
-      this.class()
-    )
+      this.class(),
+    ),
   );
 
   protected onDocumentClick(event: MouseEvent): void {
     const target = event.target as HTMLElement;
-    const hostElement = this.elementRef.nativeElement;
+    const hostElement = this._elementRef.nativeElement;
     const parent = hostElement.closest('NavigationMenuItem');
 
     if (parent && !parent.contains(target)) {
@@ -58,7 +64,6 @@ export class NavigationMenuContent {
       this.context.activeItem.set(null);
     }
   }
-
   protected onEscapeKey(): void {
     this.itemContext.open.set(false);
     this.context.activeItem.set(null);

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

@@ -1,9 +1,5 @@
 import { InjectionToken, type WritableSignal } from '@angular/core';
 
-// ============================================================================
-// Types
-// ============================================================================
-
 /**
  * Orientation of the navigation menu
  */
@@ -14,10 +10,6 @@ export type NavigationMenuOrientation = 'horizontal' | 'vertical';
  */
 export type NavigationMenuDirection = 'ltr' | 'rtl';
 
-// ============================================================================
-// Context Interfaces
-// ============================================================================
-
 /**
  * Context value for the NavigationMenu component
  *
@@ -33,7 +25,7 @@ export interface NavigationMenuContextValue {
 }
 
 export const NAVIGATION_MENU_CONTEXT = new InjectionToken<NavigationMenuContextValue>(
-  'NAVIGATION_MENU_CONTEXT'
+  'NAVIGATION_MENU_CONTEXT',
 );
 
 /**
@@ -51,5 +43,5 @@ export interface NavigationMenuItemContextValue {
 }
 
 export const NAVIGATION_MENU_ITEM_CONTEXT = new InjectionToken<NavigationMenuItemContextValue>(
-  'NAVIGATION_MENU_ITEM_CONTEXT'
+  'NAVIGATION_MENU_ITEM_CONTEXT',
 );

package/src/app/lib/components/ui/navigation-menu/navigation-menu-indicator.component.ts

@@ -11,6 +11,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
     <div class="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md"></div>
   `,
   host: {
+    'attr.data-slot': '"navigation-menu-indicator"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -22,7 +23,7 @@ export class NavigationMenuIndicator {
   protected readonly computedClass = computed(() =>
     cn(
       'top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in',
-      this.class()
-    )
+      this.class(),
+    ),
   );
 }

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

@@ -1,5 +1,9 @@
 import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
-import { NAVIGATION_MENU_CONTEXT, NAVIGATION_MENU_ITEM_CONTEXT, type NavigationMenuItemContextValue } from './navigation-menu-context';
+import {
+  NAVIGATION_MENU_CONTEXT,
+  NAVIGATION_MENU_ITEM_CONTEXT,
+  type NavigationMenuItemContextValue,
+} from './navigation-menu-context';
 
 let itemIdCounter = 0;
 
@@ -20,6 +24,7 @@ let itemIdCounter = 0;
     },
   ],
   host: {
+    'attr.data-slot': '"navigation-menu-item"',
     class: 'relative',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

package/src/app/lib/components/ui/navigation-menu/navigation-menu-link.component.ts

@@ -12,6 +12,7 @@ import { navigationMenuTriggerStyle } from './navigation-menu-trigger-style';
   selector: 'NavigationMenuLink',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"navigation-menu-link"',
     '[class]': 'computedClass()',
     '[attr.aria-current]': 'ariaCurrent()',
     '[attr.data-active]': 'active() || null',
@@ -29,15 +30,9 @@ export class NavigationMenuLink {
   readonly class = input<string>('');
 
   /** Calculate aria-current value */
-  protected readonly ariaCurrent = computed(() =>
-    this.active() ? this.currentType() : null
-  );
+  protected readonly ariaCurrent = computed(() => (this.active() ? this.currentType() : null));
 
   protected readonly computedClass = computed(() =>
-    cn(
-      navigationMenuTriggerStyle(),
-      this.active() && 'bg-accent/50 font-medium',
-      this.class()
-    )
+    cn(navigationMenuTriggerStyle(), this.active() && 'bg-accent/50 font-medium', this.class()),
   );
 }

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

@@ -9,6 +9,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
   selector: 'NavigationMenuList',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"navigation-menu-list"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -18,9 +19,6 @@ export class NavigationMenuList {
   readonly class = input<string>('');
 
   protected readonly computedClass = computed(() =>
-    cn(
-      'group flex flex-1 list-none items-center justify-center space-x-1',
-      this.class()
-    )
+    cn('group flex flex-1 list-none items-center justify-center space-x-1', this.class()),
   );
 }

package/src/app/lib/components/ui/navigation-menu/navigation-menu-trigger-style.ts

@@ -1,7 +1,7 @@
 import { cva, type VariantProps } from 'class-variance-authority';
 
 export const navigationMenuTriggerStyle = cva(
-  'group inline-flex h-10 w-max items-center justify-center gap-1 rounded-full bg-background px-5 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50'
+  'group inline-flex h-10 w-max items-center justify-center gap-1 rounded-full bg-background px-5 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50',
 );
 
 export type NavigationMenuTriggerStyleProps = VariantProps<typeof navigationMenuTriggerStyle>;

package/src/app/lib/components/ui/navigation-menu/navigation-menu-trigger.component.ts

@@ -20,6 +20,7 @@ import { navigationMenuTriggerStyle } from './navigation-menu-trigger-style';
     />
   `,
   host: {
+    'attr.data-slot': '"navigation-menu-trigger"',
     '[class]': 'computedClass()',
     '[attr.data-state]': 'itemContext.open() ? "open" : "closed"',
     '(click)': 'toggle()',
@@ -28,26 +29,26 @@ import { navigationMenuTriggerStyle } from './navigation-menu-trigger-style';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class NavigationMenuTrigger {
-  protected readonly context = inject(NAVIGATION_MENU_CONTEXT);
-  protected readonly itemContext = inject(NAVIGATION_MENU_ITEM_CONTEXT);
-  protected readonly ChevronDownIcon = ChevronDown;
-
   /** Additional CSS classes */
   readonly class = input<string>('');
 
+  protected readonly context = inject(NAVIGATION_MENU_CONTEXT);
+  protected readonly itemContext = inject(NAVIGATION_MENU_ITEM_CONTEXT);
+
   protected readonly computedClass = computed(() =>
-    cn(navigationMenuTriggerStyle(), 'group', this.class())
+    cn(navigationMenuTriggerStyle(), 'group', this.class()),
   );
 
+  protected readonly ChevronDownIcon = ChevronDown;
+
   protected toggle(): void {
-    this.itemContext.open.update(v => !v);
+    this.itemContext.open.update((v) => !v);
     if (this.itemContext.open()) {
       this.context.activeItem.set(this.itemContext.itemId);
     } else {
       this.context.activeItem.set(null);
     }
   }
-
   protected onMouseEnter(): void {
     const activeItem = this.context.activeItem();
     if (activeItem && activeItem !== this.itemContext.itemId) {

package/src/app/lib/components/ui/navigation-menu/navigation-menu-viewport.component.ts

@@ -9,6 +9,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
   selector: 'NavigationMenuViewport',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"navigation-menu-viewport"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -20,7 +21,7 @@ export class NavigationMenuViewport {
   protected readonly computedClass = computed(() =>
     cn(
       'origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]',
-      this.class()
-    )
+      this.class(),
+    ),
   );
 }

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

@@ -1,16 +1,12 @@
 import { cn } from '@/lib/utils';
 import { ChangeDetectionStrategy, Component, computed, input, signal } from '@angular/core';
 import {
-    NAVIGATION_MENU_CONTEXT,
-    type NavigationMenuContextValue,
-    type NavigationMenuOrientation,
+  NAVIGATION_MENU_CONTEXT,
+  type NavigationMenuContextValue,
+  type NavigationMenuOrientation,
 } from './navigation-menu-context';
 import { NavigationMenuViewport } from './navigation-menu-viewport.component';
 
-// ============================================================================
-// Types
-// ============================================================================
-
 /**
  * Props for the NavigationMenu component
  */
@@ -32,10 +28,6 @@ export interface NavigationMenuProps {
   class?: string;
 }
 
-// ============================================================================
-// Component
-// ============================================================================
-
 /**
  * @component NavigationMenu
  *
@@ -122,6 +114,10 @@ export interface NavigationMenuProps {
       <NavigationMenuViewport />
     </div>
   `,
+  host: {
+    'attr.data-slot': '"navigation-menu"',
+    style: 'display: contents',
+  },
   providers: [
     {
       provide: NAVIGATION_MENU_CONTEXT,
@@ -141,9 +137,6 @@ export class NavigationMenu {
   readonly class = input<string>('');
 
   protected readonly computedClass = computed(() =>
-    cn(
-      'relative z-10 flex max-w-max flex-1 items-center justify-center gap-1',
-      this.class()
-    )
+    cn('relative z-10 flex max-w-max flex-1 items-center justify-center gap-1', this.class()),
   );
 }

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

@@ -5,4 +5,3 @@ export { PaginationLink } from './pagination-link.component';
 export { PaginationNext } from './pagination-next.component';
 export { PaginationPrevious } from './pagination-previous.component';
 export { Pagination } from './pagination.component';
-

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

@@ -1,10 +1,5 @@
 import { cn } from '@/lib/utils';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 
 /**
  * PaginationContent component - ul container.
@@ -14,6 +9,7 @@ import {
   selector: 'PaginationContent',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"pagination-content"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -23,6 +19,6 @@ export class PaginationContent {
   readonly class = input<string>('');
 
   protected readonly computedClass = computed(() =>
-    cn('flex flex-row items-center gap-1', this.class())
+    cn('flex flex-row items-center gap-1', this.class()),
   );
 }

package/src/app/lib/components/ui/pagination/pagination-ellipsis.component.ts

@@ -1,10 +1,5 @@
 import { cn } from '@/lib/utils';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 
 /**
  * PaginationEllipsis component - shows more pages indicator.
@@ -32,6 +27,7 @@ import {
     <span class="sr-only">More pages</span>
   `,
   host: {
+    'attr.data-slot': '"pagination-ellipsis"',
     '[class]': 'computedClass()',
     '[attr.aria-hidden]': '"true"',
   },
@@ -42,6 +38,6 @@ export class PaginationEllipsis {
   readonly class = input<string>('');
 
   protected readonly computedClass = computed(() =>
-    cn('flex h-9 w-9 items-center justify-center', this.class())
+    cn('flex h-9 w-9 items-center justify-center', this.class()),
   );
 }

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

@@ -1,10 +1,5 @@
 import { cn } from '@/lib/utils';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 
 /**
  * PaginationItem component - li container.
@@ -14,6 +9,7 @@ import {
   selector: 'PaginationItem',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"pagination-item"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -22,7 +18,5 @@ export class PaginationItem {
   /** Additional CSS classes */
   readonly class = input<string>('');
 
-  protected readonly computedClass = computed(() =>
-    cn('', this.class())
-  );
+  protected readonly computedClass = computed(() => cn('', this.class()));
 }

package/src/app/lib/components/ui/pagination/pagination-link.component.ts

@@ -1,10 +1,5 @@
 import { cn } from '@/lib/utils';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { buttonVariants } from '../button/button-variants';
 
 /**
@@ -15,6 +10,7 @@ import { buttonVariants } from '../button/button-variants';
   selector: 'PaginationLink',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"pagination-link"',
     '[class]': 'computedClass()',
     '[attr.href]': 'href()',
     '[attr.aria-current]': 'isActive() ? "page" : null',
@@ -40,7 +36,7 @@ export class PaginationLink {
         variant: this.isActive() ? 'outline' : 'ghost',
         size: this.size(),
       }),
-      this.class()
-    )
+      this.class(),
+    ),
   );
 }

package/src/app/lib/components/ui/pagination/pagination-next.component.ts

@@ -1,10 +1,5 @@
 import { cn } from '@/lib/utils';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { buttonVariants } from '../button/button-variants';
 
 /**
@@ -31,6 +26,7 @@ import { buttonVariants } from '../button/button-variants';
     </svg>
   `,
   host: {
+    'attr.data-slot': '"pagination-next"',
     '[class]': 'computedClass()',
     '[attr.href]': 'href()',
     '[attr.aria-label]': '"Go to next page"',
@@ -45,10 +41,6 @@ export class PaginationNext {
   readonly class = input<string>('');
 
   protected readonly computedClass = computed(() =>
-    cn(
-      buttonVariants({ variant: 'ghost', size: 'default' }),
-      'gap-1 pr-2.5',
-      this.class()
-    )
+    cn(buttonVariants({ variant: 'ghost', size: 'default' }), 'gap-1 pr-2.5', this.class()),
   );
 }

package/src/app/lib/components/ui/pagination/pagination-previous.component.ts

@@ -1,10 +1,5 @@
 import { cn } from '@/lib/utils';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { buttonVariants } from '../button/button-variants';
 
 /**
@@ -31,6 +26,7 @@ import { buttonVariants } from '../button/button-variants';
     <span>Previous</span>
   `,
   host: {
+    'attr.data-slot': '"pagination-previous"',
     '[class]': 'computedClass()',
     '[attr.href]': 'href()',
     '[attr.aria-label]': '"Go to previous page"',
@@ -45,10 +41,6 @@ export class PaginationPrevious {
   readonly class = input<string>('');
 
   protected readonly computedClass = computed(() =>
-    cn(
-      buttonVariants({ variant: 'ghost', size: 'default' }),
-      'gap-1 pl-2.5',
-      this.class()
-    )
+    cn(buttonVariants({ variant: 'ghost', size: 'default' }), 'gap-1 pl-2.5', this.class()),
   );
 }