@ng-cn/core 1.0.16 → 1.0.18

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

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

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

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

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

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

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

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

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

@@ -29,6 +29,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
     </table>
   `,
   host: {
+    'attr.data-slot': '"table"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -59,18 +59,15 @@ export interface TabsContentProps {
  */
 @Component({
   selector: 'TabsContent',
-  template: `
-    @if (shouldRender()) {
-      <ng-content />
-    }
-  `,
+  template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"tabs-content"',
     '[class]': 'computedClass()',
     '[attr.id]': 'panelId()',
     '[attr.data-state]': 'state()',
     '[attr.data-orientation]': 'tabs.orientation()',
     '[attr.aria-labelledby]': 'tabId()',
-    '[attr.hidden]': '!isActive() ? true : null',
+    '[attr.hidden]': '!isActive() && !forceMount() ? true : null',
     '[attr.tabindex]': 'isActive() ? 0 : -1',
     role: 'tabpanel',
   },

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

@@ -86,6 +86,7 @@ export interface TabsListProps {
     }
   `,
   host: {
+    'attr.data-slot': '"tabs-list"',
     '[class]': 'computedClass()',
     role: 'tablist',
     '[attr.id]': 'tabs.tablistId',
@@ -186,6 +187,12 @@ export class TabsList {
 
     if (handled) {
       event.preventDefault();
+
+      // Skip disabled tabs — scan in the movement direction
+      const direction =
+        event.key === 'ArrowLeft' || event.key === 'ArrowUp' || event.key === 'End' ? -1 : 1;
+      newIndex = this.findEnabledIndex(tabValues, newIndex, direction);
+
       const newValue = tabValues[newIndex];
 
       // In automatic mode, activate on focus; in manual mode, just focus
@@ -200,6 +207,18 @@ export class TabsList {
     }
   }
 
+  private findEnabledIndex(tabValues: string[], startIndex: number, direction: 1 | -1): number {
+    const length = tabValues.length;
+    let index = startIndex;
+    for (let i = 0; i < length; i++) {
+      const tabId = this.tabs.getTabId(tabValues[index]);
+      const el = document.getElementById(tabId);
+      if (!el?.hasAttribute('data-disabled')) return index;
+      index = ((index + direction) + length) % length;
+    }
+    return startIndex;
+  }
+
   private updateIndicator(): void {
     const activeValue = this.tabs.value();
     if (!activeValue) return;

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

@@ -74,6 +74,7 @@ export interface TabsTriggerProps {
   selector: 'TabsTrigger',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"tabs-trigger"',
     '[class]': 'computedClass()',
     '[attr.id]': 'tabId()',
     '[attr.data-state]': 'state()',
@@ -82,7 +83,6 @@ export interface TabsTriggerProps {
     '[attr.aria-controls]': 'panelId()',
     '[attr.aria-disabled]': 'disabled() || null',
     '[attr.tabindex]': 'isActive() ? 0 : -1',
-    '[attr.disabled]': 'disabled() ? "" : null',
     '(click)': 'onClick()',
     '(keydown.enter)': 'onClick()',
     '(keydown.space)': 'onSpace($event)',

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

@@ -116,6 +116,7 @@ export interface TabsProps {
   selector: 'Tabs',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"tabs"',
     '[class]': 'computedClass()',
     '[attr.data-orientation]': 'orientation()',
   },

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

@@ -44,6 +44,7 @@ export interface ToastActionProps {
     </button>
   `,
   host: {
+    'attr.data-slot': '"toast-action"',
     class: 'contents',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -30,6 +30,7 @@ export interface ToastDescriptionProps {
   selector: 'ToastDescription',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"toast-description"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -30,6 +30,7 @@ export interface ToastTitleProps {
   selector: 'ToastTitle',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"toast-title"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -133,6 +133,7 @@ export interface ToastProps {
     </div>
   `,
   host: {
+    'attr.data-slot': '"toast"',
     class: 'contents',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

package/src/app/lib/components/ui/toast/toaster.component.ts

@@ -84,6 +84,7 @@ export interface ToasterProps {
     </div>
   `,
   host: {
+    'attr.data-slot': '"toaster"',
     class: 'contents',
     ngSkipHydration: 'true',
   },

package/src/app/lib/components/ui/toggle/toggle-variants.ts

@@ -6,7 +6,7 @@ import { cva, type VariantProps } from 'class-variance-authority';
  * WCAG AA compliant contrast ratios for all variants
  */
 export const toggleVariants = cva(
-  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium text-foreground transition-colors hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none",
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium text-foreground transition-colors hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 [&_lucide-icon]:pointer-events-none [&_lucide-icon:not([class*='size-'])]:size-4 [&_lucide-icon]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none",
   {
     variants: {
       variant: {

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

@@ -7,6 +7,7 @@ import {
   input,
   model,
   output,
+  signal,
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { toggleVariants, type ToggleVariants } from './toggle-variants';
@@ -97,8 +98,8 @@ export type ToggleProps = {
     type: 'button',
     '[attr.aria-pressed]': 'pressed()',
     '[attr.data-state]': 'state()',
-    '[attr.data-disabled]': 'disabled() ? "" : null',
-    '[attr.disabled]': 'disabled() ? "" : null',
+    '[attr.data-disabled]': 'isDisabled() ? "" : null',
+    '[attr.disabled]': 'isDisabled() ? "" : null',
     '(click)': 'toggle()',
     'data-slot': 'toggle',
   },
@@ -136,6 +137,9 @@ export class Toggle implements ControlValueAccessor {
   /** Additional CSS classes to apply */
   readonly class = input<string>('');
 
+  /** Whether the toggle is effectively disabled (input or Angular Forms) */
+  protected readonly isDisabled = computed(() => this.disabled() || this.isFormsDisabled());
+
   /** Current state for data attribute */
   protected readonly state = computed((): ToggleState => (this.pressed() ? 'on' : 'off'));
   /** Computed class combining variants and custom classes */
@@ -149,17 +153,19 @@ export class Toggle implements ControlValueAccessor {
     ),
   );
 
+  /** Tracks disabled state set by Angular Forms (.disable() / .enable()) */
+  private readonly isFormsDisabled = signal<boolean>(false);
+
   /** ControlValueAccessor callbacks */
   private onChange: (value: boolean) => void = () => {};
   private onTouched: () => void = () => {};
-  setDisabledState?(isDisabled: boolean): void {
-    // Disabled state is managed by the disabled input
-    // Angular forms will call this but we use the input binding
+  setDisabledState(isDisabled: boolean): void {
+    this.isFormsDisabled.set(isDisabled);
   }
 
   /** Toggle the pressed state */
   toggle(): void {
-    if (!this.disabled()) {
+    if (!this.isDisabled()) {
       const newValue = !this.pressed();
       this.pressed.set(newValue);
       this.onChange(newValue);

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

@@ -1,5 +1,16 @@
-import { cn, Presence } from '@/lib/utils';
-import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
+import { Align, cn, computePosition, getTransformOrigin, Presence, Side } from '@/lib/utils';
+import {
+  afterNextRender,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  effect,
+  ElementRef,
+  inject,
+  Injector,
+  input,
+  signal,
+} from '@angular/core';
 import { TOOLTIP_CONTEXT, TooltipAlign, TooltipSide } from './tooltip-context';
 
 export type TooltipContentState = 'open' | 'closed';
@@ -34,7 +45,8 @@ export interface TooltipContentProps {
  *
  * @description
  * TooltipContent displays the actual tooltip content. It supports positioning
- * on different sides and alignments relative to the trigger.
+ * on different sides and alignments relative to the trigger using fixed positioning
+ * via computePosition to avoid clipping inside overflow:hidden ancestors.
  *
  * ## Features
  * - Configurable side (top, right, bottom, left)
@@ -42,10 +54,14 @@ export interface TooltipContentProps {
  * - Customizable offset from trigger
  * - Smooth enter/exit animations
  * - Uses Presence for proper exit animations
+ * - Fixed positioning — not clipped by overflow:hidden ancestors
+ * - Escape key to dismiss
+ * - disableHoverableContent support
  *
  * ## Accessibility
  * - `role="tooltip"` on the element
  * - Unique ID for aria-describedby relationship with trigger
+ * - Escape key dismisses tooltip (WCAG 1.4.13)
  *
  * @example Basic usage
  * ```html
@@ -81,21 +97,49 @@ export interface TooltipContentProps {
       <div
         [class]="computedClass()"
         [attr.data-state]="state()"
-        [attr.data-side]="side()"
-        [attr.data-align]="align()"
+        [attr.data-side]="computedSide()"
+        [attr.data-align]="computedAlign()"
+        [style]="positionStyles()"
         role="tooltip"
         [id]="context.tooltipId"
+        (mouseenter)="onMouseEnter()"
       >
         <ng-content />
       </div>
     </Presence>
   `,
   host: {
+    'attr.data-slot': '"tooltip-content"',
     class: 'contents',
+    '(document:keydown.escape)': 'onEscape()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TooltipContent {
+  constructor() {
+    // Recalculate position when open state changes (browser-only via afterNextRender)
+    effect(() => {
+      const isOpen = this.context.open();
+      if (isOpen) {
+        this.isPositioned.set(false);
+        afterNextRender(
+          () => {
+            this.schedulePositionUpdate();
+          },
+          { injector: this._injector },
+        );
+      } else {
+        this.cancelScheduledPositionUpdate();
+        this.isPositioned.set(false);
+        this.positionStyles.set({
+          position: 'fixed',
+          top: '-9999px',
+          left: '-9999px',
+        });
+      }
+    });
+  }
+
   /** The preferred side of the trigger to render against */
   readonly side = input<TooltipSide>('top');
   /** The distance in pixels from the trigger */
@@ -107,29 +151,110 @@ export class TooltipContent {
   /** Additional CSS classes */
   readonly class = input<string>('');
 
+  private readonly _elementRef = inject(ElementRef);
+  private readonly _injector = inject(Injector);
+
   protected readonly context = inject(TOOLTIP_CONTEXT);
 
+  protected readonly isPositioned = signal(false);
+  /** Computed position after collision detection */
+  protected readonly computedSide = signal<Side>('top');
+  protected readonly computedAlign = signal<Align>('center');
+  protected readonly positionStyles = signal<Record<string, string>>({
+    position: 'fixed',
+    top: '-9999px',
+    left: '-9999px',
+  });
+
+  private positionFrameId: number | null = null;
+
   /** Current state: open or closed */
   protected readonly state = computed<TooltipContentState>(() =>
     this.context.open() ? 'open' : 'closed',
   );
-  protected readonly computedClass = computed(() => {
-    const sideClasses = {
-      top: 'bottom-full left-1/2 -translate-x-1/2 mb-2',
-      bottom: 'top-full left-1/2 -translate-x-1/2 mt-2',
-      left: 'right-full top-1/2 -translate-y-1/2 mr-2',
-      right: 'left-full top-1/2 -translate-y-1/2 ml-2',
-    };
-
-    return cn(
-      'absolute z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md',
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md',
       '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',
       'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2',
       'data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-      sideClasses[this.side()],
+      !this.isPositioned() && 'opacity-0 pointer-events-none',
       this.class(),
+    ),
+  );
+
+  onMouseEnter(): void {
+    if (this.context.disableHoverableContent?.()) {
+      this.context.setOpen(false);
+    }
+  }
+
+  protected onEscape(): void {
+    if (this.context.open()) {
+      this.context.setOpen(false);
+    }
+  }
+
+  private schedulePositionUpdate(): void {
+    this.cancelScheduledPositionUpdate();
+
+    this.positionFrameId = requestAnimationFrame(() => {
+      this.updatePosition();
+
+      this.positionFrameId = requestAnimationFrame(() => {
+        this.updatePosition();
+        this.positionFrameId = null;
+      });
+    });
+  }
+
+  private cancelScheduledPositionUpdate(): void {
+    if (this.positionFrameId !== null) {
+      cancelAnimationFrame(this.positionFrameId);
+      this.positionFrameId = null;
+    }
+  }
+
+  private updatePosition(): void {
+    const triggerElement = this.context.triggerRef?.();
+    const contentElement = this._elementRef.nativeElement.querySelector(
+      '[role="tooltip"]',
+    ) as HTMLElement;
+
+    if (!triggerElement || !contentElement) return;
+
+    const triggerRect = triggerElement.getBoundingClientRect();
+    const contentRect = contentElement.getBoundingClientRect();
+    const overlayWidth = Math.round(contentRect.width || 100);
+    const overlayHeight = Math.round(contentRect.height || 32);
+
+    const result = computePosition(
+      triggerRect,
+      { width: overlayWidth, height: overlayHeight },
+      {
+        side: this.side() as Side,
+        align: this.align() as Align,
+        sideOffset: this.sideOffset(),
+        alignOffset: this.alignOffset(),
+        avoidCollisions: true,
+        collisionPadding: 8,
+      },
     );
-  });
+
+    this.computedSide.set(result.side);
+    this.computedAlign.set(result.align);
+
+    // Set position styles with transform origin for animations
+    const transformOrigin = getTransformOrigin(result.side, result.align);
+    this.positionStyles.set({
+      position: 'fixed',
+      top: result.styles.top || '',
+      left: result.styles.left || '',
+      '--radix-tooltip-content-transform-origin': transformOrigin,
+    });
+    this.isPositioned.set(true);
+  }
 }

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

@@ -9,13 +9,15 @@ export interface TooltipContextValue {
   /** Set open state */
   setOpen: (open: boolean) => void;
   /** Delay before showing tooltip (ms) */
-  delayDuration: number;
+  delayDuration: () => number;
   /** Skip delay duration when quickly hovering between tooltips (ms) */
   skipDelayDuration: number;
   /** Unique ID for aria-describedby relationship */
   tooltipId: string;
   /** Whether hoverable content is disabled */
   disableHoverableContent: () => boolean;
+  /** Reference to the trigger element for fixed positioning */
+  triggerRef?: WritableSignal<HTMLElement | null>;
 }
 
 export const TOOLTIP_CONTEXT = new InjectionToken<TooltipContextValue>('TOOLTIP_CONTEXT');

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

@@ -52,6 +52,10 @@ export interface TooltipProviderProps {
 @Component({
   selector: 'TooltipProvider',
   template: `<ng-content />`,
+  host: {
+    'attr.data-slot': '"tooltip-provider"',
+    style: 'display: contents',
+  },
   providers: [
     {
       provide: TOOLTIP_CONTEXT,
@@ -69,7 +73,7 @@ export class TooltipProvider implements TooltipContextValue {
   /** Unique ID for aria-describedby relationship */
   readonly tooltipId = `tooltip-provider-${++tooltipIdCounter}`;
   /** The duration from when the pointer enters the trigger until the tooltip opens */
-  readonly delayDuration = 700;
+  readonly delayDuration = input<number>(700);
   /** How much time a user has to enter another trigger without incurring a delay again */
   readonly skipDelayDuration = 300;
 

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

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, inject, input, OnDestroy } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, inject, input, OnDestroy } from '@angular/core';
 import { TOOLTIP_CONTEXT } from './tooltip-context';
 
 /**
@@ -54,6 +54,7 @@ export interface TooltipTriggerProps {
   selector: 'TooltipTrigger',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"tooltip-trigger"',
     '(mouseenter)': 'onMouseEnter()',
     '(mouseleave)': 'onMouseLeave()',
     '(focus)': 'onFocus()',
@@ -69,6 +70,7 @@ export class TooltipTrigger implements OnDestroy {
   readonly asChild = input<boolean>(false);
 
   protected readonly context = inject(TOOLTIP_CONTEXT);
+  private readonly _elementRef = inject(ElementRef);
 
   private showTimeout: ReturnType<typeof setTimeout> | null = null;
   private hideTimeout: ReturnType<typeof setTimeout> | null = null;
@@ -79,9 +81,10 @@ export class TooltipTrigger implements OnDestroy {
 
   onMouseEnter(): void {
     this.clearTimeouts();
+    this.context.triggerRef?.set(this._elementRef.nativeElement);
     this.showTimeout = setTimeout(() => {
       this.context.setOpen(true);
-    }, this.context.delayDuration);
+    }, this.context.delayDuration());
   }
   onMouseLeave(): void {
     this.clearTimeouts();
@@ -92,6 +95,7 @@ export class TooltipTrigger implements OnDestroy {
   }
   onFocus(): void {
     // Show immediately on focus for keyboard users
+    this.context.triggerRef?.set(this._elementRef.nativeElement);
     this.context.setOpen(true);
   }
   onBlur(): void {

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

@@ -96,6 +96,7 @@ export interface TooltipProps {
   selector: 'Tooltip',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"tooltip"',
     class: 'relative inline-block',
   },
   providers: [
@@ -125,9 +126,11 @@ export class Tooltip implements TooltipContextValue {
   readonly disableHoverableContent = input<boolean>(false);
 
   readonly open = signal(false);
+  /** Reference to the trigger element for fixed positioning */
+  readonly triggerRef = signal<HTMLElement | null>(null);
 
   /** The duration from when the pointer enters the trigger until the tooltip opens */
-  readonly delayDuration = 700;
+  readonly delayDuration = input<number>(700);
   /** How much time a user has to enter another trigger without incurring a delay again */
   readonly skipDelayDuration = 300;
   /** Unique ID for aria-describedby relationship */

package/src/app/lib/components/ui/typography/typography-blockquote.component.ts

@@ -13,6 +13,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
   selector: 'TypographyBlockquote',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"typography-blockquote"',
     '[class]': 'computedClass()',
     style: 'display: block',
   },

package/src/app/lib/components/ui/typography/typography-h1.component.ts

@@ -11,6 +11,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
   selector: 'TypographyH1',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"typography-h1"',
     '[class]': 'computedClass()',
     style: 'display: block',
   },

package/src/app/lib/components/ui/typography/typography-h2.component.ts

@@ -11,6 +11,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
   selector: 'TypographyH2',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"typography-h2"',
     '[class]': 'computedClass()',
     style: 'display: block',
   },

package/src/app/lib/components/ui/typography/typography-h3.component.ts

@@ -11,6 +11,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
   selector: 'TypographyH3',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"typography-h3"',
     '[class]': 'computedClass()',
     style: 'display: block',
   },

package/src/app/lib/components/ui/typography/typography-h4.component.ts

@@ -11,6 +11,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
   selector: 'TypographyH4',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"typography-h4"',
     '[class]': 'computedClass()',
     style: 'display: block',
   },

package/src/app/lib/components/ui/typography/typography-inline-code.component.ts

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

package/src/app/lib/components/ui/typography/typography-large.component.ts

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

package/src/app/lib/components/ui/typography/typography-lead.component.ts

@@ -13,6 +13,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
   selector: 'TypographyLead',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"typography-lead"',
     '[class]': 'computedClass()',
     style: 'display: block',
   },

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

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

package/src/app/lib/components/ui/typography/typography-muted.component.ts

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