@ng-cn/core 1.0.16 → 1.0.18

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

@@ -57,7 +57,7 @@ import { SELECT_CONTEXT } from './select-context';
   `,
   host: {
     class: 'contents',
-    'data-slot': 'select-trigger',
+    'attr.data-slot': '"select-trigger"',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -114,35 +114,28 @@ export class SelectTrigger {
       case 'ArrowDown':
         event.preventDefault();
         if (!this.context.open()) {
-          // Save trigger element
           const button = this.triggerButton()?.nativeElement;
-          if (button) {
-            this.context.triggerElement.set(button);
-          }
+          if (button) this.context.triggerElement.set(button);
           this.context.setOpen(true);
           setTimeout(() => this.context?.focusItem(0));
         } else {
-          // Move to next item
           const currentIndex = this.context.focusedIndex();
           const itemCount = this.context.itemValues().length;
-          this.context.focusItem(Math.min(currentIndex + 1, itemCount - 1));
+          this.context.focusItem((currentIndex + 1) % itemCount);
         }
         break;
       case 'ArrowUp':
         event.preventDefault();
         if (!this.context.open()) {
-          // Save trigger element
           const button = this.triggerButton()?.nativeElement;
-          if (button) {
-            this.context.triggerElement.set(button);
-          }
+          if (button) this.context.triggerElement.set(button);
           this.context.setOpen(true);
           const lastIndex = this.context.itemValues().length - 1;
           setTimeout(() => this.context?.focusItem(lastIndex));
         } else {
-          // Move to previous item
           const currentIndex = this.context.focusedIndex();
-          this.context.focusItem(Math.max(currentIndex - 1, 0));
+          const itemCount = this.context.itemValues().length;
+          this.context.focusItem(currentIndex > 0 ? currentIndex - 1 : itemCount - 1);
         }
         break;
       case 'Escape':

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

@@ -199,6 +199,11 @@ export class Select {
   private readonly _isDisabled = signal<boolean>(false);
 
   private readonly ariaIds = this._ariaIdService.generateMenuIds('select');
+  /** Internal typeahead signals */
+  private readonly _itemLabels = signal<Map<string, string>>(new Map());
+  private readonly _typeaheadBuffer = signal<string>('');
+  private readonly _typeaheadTimeout = signal<ReturnType<typeof setTimeout> | null>(null);
+
   /** Context for child components */
   readonly context: SelectContext = {
     value: this._value,
@@ -232,6 +237,11 @@ export class Select {
       }
     },
     focusItem: (index: number) => this.focusItemByIndex(index),
+    itemLabels: this._itemLabels,
+    typeaheadBuffer: this._typeaheadBuffer,
+    typeaheadTimeout: this._typeaheadTimeout,
+    handleTypeahead: (char: string) => this.handleTypeahead(char),
+    focusMatchingItem: (query: string) => this.focusMatchingItem(query),
   };
 
   /** Focus an item by index */
@@ -248,4 +258,40 @@ export class Select {
       selectItem.focus();
     }
   }
+
+  /** Handle typeahead: accumulate char, clear after 500 ms, then focus matching item */
+  private handleTypeahead(char: string): void {
+    // Clear existing timeout
+    const existingTimeout = this._typeaheadTimeout();
+    if (existingTimeout !== null) {
+      clearTimeout(existingTimeout);
+    }
+
+    const newBuffer = this._typeaheadBuffer() + char;
+    this._typeaheadBuffer.set(newBuffer);
+
+    const timeout = setTimeout(() => {
+      this._typeaheadBuffer.set('');
+      this._typeaheadTimeout.set(null);
+    }, 500);
+    this._typeaheadTimeout.set(timeout);
+
+    this.focusMatchingItem(newBuffer);
+  }
+
+  /** Focus the first item whose label starts with query (case-insensitive) */
+  private focusMatchingItem(query: string): void {
+    const values = this.context.itemValues();
+    const labels = this._itemLabels();
+    const lowerQuery = query.toLowerCase();
+
+    const matchIndex = values.findIndex((v) => {
+      const label = labels.get(v) ?? v;
+      return label.toLowerCase().startsWith(lowerQuery);
+    });
+
+    if (matchIndex !== -1) {
+      this.focusItemByIndex(matchIndex);
+    }
+  }
 }

package/src/app/lib/components/ui/sheet/sheet-close.component.ts

@@ -9,6 +9,7 @@ import { SHEET_CONTEXT } from './sheet-context';
   selector: 'SheetClose',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"sheet-close"',
     class: 'contents',
     '(click)': 'onClick($event)',
   },

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

@@ -76,19 +76,28 @@ import { sheetVariants, type SheetVariants } from './sheet-variants';
     </Presence>
   `,
   host: {
+    'attr.data-slot': '"sheet-content"',
     class: 'contents',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SheetContent implements OnDestroy {
   constructor() {
-    // Handle body scroll lock based on open state (browser-only via effect + afterNextRender)
+    let wasOpen = false;
+
+    // Handle body scroll lock and focus restoration based on open state
     effect(() => {
       const isOpen = this.context.open();
       if (isOpen) {
+        wasOpen = true;
         this.lockBodyScroll();
       } else {
         this.unlockBodyScroll();
+        // Restore focus whenever sheet closes (covers close button, overlay, Escape, programmatic)
+        if (wasOpen) {
+          this.restoreFocus();
+        }
+        wasOpen = false;
       }
     });
   }
@@ -104,13 +113,14 @@ export class SheetContent implements OnDestroy {
     cn(sheetVariants({ side: this.side() }), this.class()),
   );
 
-  /** Previous body overflow for restoration */
+  /** Previous body overflow/padding for restoration */
   private previousBodyOverflow = '';
+  private previousBodyPaddingRight = '';
 
   ngOnDestroy(): void {
     // Restore body scroll
     this.unlockBodyScroll();
-    // Restore focus to trigger element
+    // Restore focus to trigger element (fallback if not already called via effect)
     this.restoreFocus();
   }
 
@@ -119,7 +129,10 @@ export class SheetContent implements OnDestroy {
     this.close();
   }
   onEscapeKey(): void {
-    this.close();
+    // Guard: only close when the sheet is actually open (not during exit animation)
+    if (this.context.open()) {
+      this.close();
+    }
   }
   onClose(): void {
     this.close();
@@ -127,17 +140,22 @@ export class SheetContent implements OnDestroy {
 
   private lockBodyScroll(): void {
     if (typeof document !== 'undefined') {
+      const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
       this.previousBodyOverflow = document.body.style.overflow;
+      this.previousBodyPaddingRight = document.body.style.paddingRight;
       document.body.style.overflow = 'hidden';
+      if (scrollbarWidth > 0) {
+        document.body.style.paddingRight = scrollbarWidth + 'px';
+      }
     }
   }
   private unlockBodyScroll(): void {
     if (typeof document !== 'undefined') {
       document.body.style.overflow = this.previousBodyOverflow;
+      document.body.style.paddingRight = this.previousBodyPaddingRight;
     }
   }
   private close(): void {
-    this.restoreFocus();
     this.context.setOpen(false);
   }
   private restoreFocus(): void {

package/src/app/lib/components/ui/sheet/sheet-description.component.ts

@@ -11,6 +11,7 @@ import { SHEET_CONTEXT } from './sheet-context';
   selector: 'SheetDescription',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"sheet-description"',
     '[class]': 'computedClass()',
     '[attr.id]': 'context.descriptionId',
   },

package/src/app/lib/components/ui/sheet/sheet-footer.component.ts

@@ -9,6 +9,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
   selector: 'SheetFooter',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"sheet-footer"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

package/src/app/lib/components/ui/sheet/sheet-header.component.ts

@@ -9,6 +9,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
   selector: 'SheetHeader',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"sheet-header"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

package/src/app/lib/components/ui/sheet/sheet-title.component.ts

@@ -11,6 +11,7 @@ import { SHEET_CONTEXT } from './sheet-context';
   selector: 'SheetTitle',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"sheet-title"',
     '[class]': 'computedClass()',
     '[attr.id]': 'context.titleId',
   },

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

@@ -9,6 +9,7 @@ import { SHEET_CONTEXT } from './sheet-context';
   selector: 'SheetTrigger',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"sheet-trigger"',
     '(click)': 'onClick($event)',
     '[attr.aria-haspopup]': '"dialog"',
     '[attr.aria-expanded]': 'context.open()',

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

@@ -33,6 +33,10 @@ import { SHEET_CONTEXT, type SheetContextValue } from './sheet-context';
 @Component({
   selector: 'Sheet',
   template: `<ng-content />`,
+  host: {
+    'attr.data-slot': '"sheet"',
+    style: 'display: contents',
+  },
   providers: [
     {
       provide: SHEET_CONTEXT,

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

@@ -8,6 +8,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
   selector: 'SidebarContent',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"sidebar-content"',
     '[class]': 'computedClass()',
     'data-sidebar': 'content',
   },

package/src/app/lib/components/ui/sidebar/sidebar-footer.component.ts

@@ -8,6 +8,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
   selector: 'SidebarFooter',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"sidebar-footer"',
     '[class]': 'computedClass()',
     'data-sidebar': 'footer',
   },

package/src/app/lib/components/ui/sidebar/sidebar-group-action.component.ts

@@ -8,6 +8,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
   selector: 'SidebarGroupAction',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"sidebar-group-action"',
     '[class]': 'computedClass()',
     'data-sidebar': 'group-action',
   },

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

@@ -8,6 +8,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
   selector: 'SidebarGroupContent',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"sidebar-group-content"',
     '[class]': 'computedClass()',
     'data-sidebar': 'group-content',
   },

package/src/app/lib/components/ui/sidebar/sidebar-group-label.component.ts

@@ -8,6 +8,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
   selector: 'SidebarGroupLabel',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"sidebar-group-label"',
     '[class]': 'computedClass()',
     'data-sidebar': 'group-label',
   },

package/src/app/lib/components/ui/sidebar/sidebar-group.component.ts

@@ -8,6 +8,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
   selector: 'SidebarGroup',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"sidebar-group"',
     '[class]': 'computedClass()',
     'data-sidebar': 'group',
   },

package/src/app/lib/components/ui/sidebar/sidebar-header.component.ts

@@ -8,6 +8,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
   selector: 'SidebarHeader',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"sidebar-header"',
     '[class]': 'computedClass()',
     'data-sidebar': 'header',
   },

package/src/app/lib/components/ui/sidebar/sidebar-input.component.ts

@@ -8,6 +8,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
   selector: 'SidebarInput',
   template: ``,
   host: {
+    'attr.data-slot': '"sidebar-input"',
     '[class]': 'computedClass()',
     'data-sidebar': 'input',
   },

package/src/app/lib/components/ui/sidebar/sidebar-inset.component.ts

@@ -8,6 +8,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
   selector: 'SidebarInset',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"sidebar-inset"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -11,6 +11,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
   selector: 'SidebarMenuAction',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"sidebar-menu-action"',
     '[class]': 'computedClass()',
     'data-sidebar': 'menu-action',
     '[attr.role]': '"button"',

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

@@ -11,6 +11,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
   selector: 'SidebarMenuBadge',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"sidebar-menu-badge"',
     '[class]': 'computedClass()',
     'data-sidebar': 'menu-badge',
   },

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

@@ -12,6 +12,7 @@ import type { AriaCurrentValue } from './sidebar-context';
   selector: 'SidebarMenuButton',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"sidebar-menu-button"',
     '[class]': 'computedClass()',
     'data-sidebar': 'menu-button',
     '[attr.data-size]': 'size()',

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

@@ -11,6 +11,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
   selector: 'SidebarMenuItem',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"sidebar-menu-item"',
     '[class]': 'computedClass()',
     'data-sidebar': 'menu-item',
     '[attr.role]': '"presentation"',

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

@@ -13,6 +13,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
     ></div>
   `,
   host: {
+    'attr.data-slot': '"sidebar-menu-skeleton"',
     '[class]': 'computedClass()',
     'data-sidebar': 'menu-skeleton',
   },

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

@@ -12,6 +12,7 @@ import type { AriaCurrentValue } from './sidebar-context';
   selector: 'SidebarMenuSubButton',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"sidebar-menu-sub-button"',
     '[class]': 'computedClass()',
     'data-sidebar': 'menu-sub-button',
     '[attr.data-size]': 'size()',

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

@@ -8,6 +8,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
   selector: 'SidebarMenuSubItem',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"sidebar-menu-sub-item"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -8,6 +8,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
   selector: 'SidebarMenuSub',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"sidebar-menu-sub"',
     '[class]': 'computedClass()',
     'data-sidebar': 'menu-sub',
   },

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

@@ -10,6 +10,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
   selector: 'SidebarMenu',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"sidebar-menu"',
     '[class]': 'computedClass()',
     'data-sidebar': 'menu',
     '[attr.role]': '"menu"',

package/src/app/lib/components/ui/sidebar/sidebar-provider.component.ts

@@ -41,6 +41,7 @@ import {
   selector: 'SidebarProvider',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"sidebar-provider"',
     '[class]': 'computedClass()',
     '[style.--sidebar-width]': 'sidebarWidth',
     '[style.--sidebar-width-icon]': 'SIDEBAR_WIDTH_ICON',

package/src/app/lib/components/ui/sidebar/sidebar-rail.component.ts

@@ -9,6 +9,7 @@ import { SIDEBAR_CONTEXT } from './sidebar-context';
   selector: 'SidebarRail',
   template: ``,
   host: {
+    'attr.data-slot': '"sidebar-rail"',
     '[class]': 'computedClass()',
     '[attr.aria-label]': '"Toggle Sidebar"',
     '[attr.tabindex]': '-1',

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

@@ -8,6 +8,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
   selector: 'SidebarSeparator',
   template: ``,
   host: {
+    'attr.data-slot': '"sidebar-separator"',
     '[class]': 'computedClass()',
     'data-sidebar': 'separator',
   },

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

@@ -27,6 +27,7 @@ import { SIDEBAR_CONTEXT } from './sidebar-context';
     <ng-content />
   `,
   host: {
+    'attr.data-slot': '"sidebar-trigger"',
     '[class]': 'computedClass()',
     '(click)': 'onClick()',
   },

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

@@ -52,6 +52,7 @@ import {
     }
   `,
   host: {
+    'attr.data-slot': '"sidebar"',
     '[attr.data-state]': 'context.state()',
     '[attr.data-collapsible]': 'context.state() === "collapsed" ? collapsible() : ""',
     '[attr.data-variant]': 'variant()',

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

@@ -346,10 +346,10 @@ export class Slider implements ControlValueAccessor {
         newValue -= stepValue * increment;
         break;
       case 'ArrowUp':
-        newValue += stepValue;
+        newValue += stepValue * (this.inverted() ? -1 : 1);
         break;
       case 'ArrowDown':
-        newValue -= stepValue;
+        newValue -= stepValue * (this.inverted() ? -1 : 1);
         break;
       case 'PageUp':
         newValue += largeStep;

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

@@ -0,0 +1,2 @@
+export { toast } from 'ngx-sonner';
+export { Sonner } from './sonner.component';

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

@@ -0,0 +1,70 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { NgxSonnerToaster } from 'ngx-sonner';
+
+export { toast } from 'ngx-sonner';
+
+/**
+ * Sonner component - toast notification toaster.
+ * Wraps ngx-sonner's Toaster with shadcn/ui default styling.
+ * Place once near the root of your app.
+ *
+ * @example
+ * <!-- In app root template -->
+ * <Sonner />
+ *
+ * <!-- With custom position -->
+ * <Sonner position="top-right" />
+ *
+ * <!-- Then trigger toasts anywhere -->
+ * import { toast } from '@/lib/components/ui/sonner';
+ * toast('Hello world');
+ * toast.success('Saved!');
+ * toast.error('Something went wrong');
+ */
+@Component({
+  selector: 'Sonner',
+  imports: [NgxSonnerToaster],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    'attr.data-slot': '"sonner"',
+    style: 'display: contents',
+  },
+  template: `
+    <ngx-sonner-toaster
+      [theme]="theme()"
+      [position]="position()"
+      [richColors]="richColors()"
+      [expand]="expand()"
+      [duration]="duration()"
+      [visibleToasts]="visibleToasts()"
+      [closeButton]="closeButton()"
+      [offset]="offset()"
+      [dir]="dir()"
+      [class]="toasterClass()"
+    />
+  `,
+})
+export class Sonner {
+  /** Visual theme */
+  readonly theme = input<'light' | 'dark' | 'system'>('system');
+  /** Position of the toaster */
+  readonly position = input<
+    'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'
+  >('bottom-right');
+  /** Use rich colors for success/error/warning/info */
+  readonly richColors = input<boolean>(false);
+  /** Expand toasts by default */
+  readonly expand = input<boolean>(false);
+  /** Default duration in ms */
+  readonly duration = input<number>(4000);
+  /** Max visible toasts */
+  readonly visibleToasts = input<number>(3);
+  /** Show close button on each toast */
+  readonly closeButton = input<boolean>(false);
+  /** Offset from edge */
+  readonly offset = input<string | number | null>(null);
+  /** Text direction */
+  readonly dir = input<'ltr' | 'rtl' | 'auto'>('auto');
+  /** Additional CSS classes passed to the toaster */
+  readonly toasterClass = input<string>('toaster group');
+}

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

@@ -43,6 +43,7 @@ import { spinnerVariants, type SpinnerVariants } from './spinner-variants';
     </svg>
   `,
   host: {
+    'attr.data-slot': '"spinner"',
     role: 'status',
     'aria-label': 'Loading',
     '[attr.aria-busy]': 'true',

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

@@ -103,9 +103,7 @@ export type SwitchProps = {
       [attr.data-disabled]="isDisabled() ? '' : null"
       [disabled]="isDisabled()"
       [class]="trackClass()"
-      [style.backgroundColor]="checked() ? checkedBgColor() : 'var(--color-input)'"
       (click)="toggle()"
-      (keydown)="onKeyDown($event)"
     >
       <span data-slot="switch-thumb" [class]="thumbClass()" [attr.data-state]="state()"></span>
     </button>
@@ -125,7 +123,7 @@ export type SwitchProps = {
   `,
   host: {
     '[class]': 'computedClass()',
-    'data-slot': 'switch',
+    'attr.data-slot': '"switch"',
   },
   providers: [
     {
@@ -168,9 +166,6 @@ export class Switch implements ControlValueAccessor {
   readonly class = input<string>('');
   /** Additional CSS classes to apply to the inner track button */
   readonly buttonClass = input<string>('');
-  /** Background color for checked state (hex, rgb, or CSS color name) */
-  readonly checkedBgColor = input<string>('rgb(59, 130, 246)');
-
   /** Current state for data attribute */
   protected readonly state = computed(
     (): SwitchState => (this.checked() ? 'checked' : 'unchecked'),
@@ -246,12 +241,4 @@ export class Switch implements ControlValueAccessor {
     }
   }
 
-  /** Handle keyboard events */
-  protected onKeyDown(event: KeyboardEvent): void {
-    // Switch should only respond to Space (Enter is handled by button default)
-    if (event.key === ' ') {
-      // Let the click handler deal with it
-      return;
-    }
-  }
 }

package/src/app/lib/components/ui/table/table-body.component.ts

@@ -11,6 +11,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
     <ng-content />
   </tbody>`,
   host: {
+    'attr.data-slot': '"table-body"',
     class: 'contents',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

package/src/app/lib/components/ui/table/table-caption.component.ts

@@ -11,6 +11,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
     <ng-content />
   </caption>`,
   host: {
+    'attr.data-slot': '"table-caption"',
     class: 'contents',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

package/src/app/lib/components/ui/table/table-cell.component.ts

@@ -9,6 +9,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
   selector: 'TableCell',
   template: `<td [class]="computedClass()"><ng-content /></td>`,
   host: {
+    'attr.data-slot': '"table-cell"',
     class: 'contents',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,