@spartan-ng/cli 1.7.0 → 1.8.0-beta.2

package/src/generators/ui/libs/sidebar/files/lib/hlm-sidebar-group-label.ts.template

@@ -3,6 +3,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: 'div[hlmSidebarGroupLabel], button[hlmSidebarGroupLabel]',
+	exportAs: 'hlmSidebarGroupLabel',
 	host: {
 		'data-slot': 'sidebar-group-label',
 		'data-sidebar': 'group-label',

package/src/generators/ui/libs/sidebar/files/lib/hlm-sidebar-group.ts.template

@@ -3,6 +3,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmSidebarGroup],hlm-sidebar-group',
+	exportAs: 'hlmSidebarGroup',
 	host: {
 		'data-slot': 'sidebar-group',
 		'data-sidebar': 'group',

package/src/generators/ui/libs/sidebar/files/lib/hlm-sidebar-header.ts.template

@@ -3,6 +3,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmSidebarHeader],hlm-sidebar-header',
+	exportAs: 'hlmSidebarHeader',
 	host: {
 		'data-slot': 'sidebar-header',
 		'data-sidebar': 'header',

package/src/generators/ui/libs/sidebar/files/lib/hlm-sidebar-input.ts.template

@@ -4,6 +4,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: 'input[hlmSidebarInput]',
+	exportAs: 'hlmSidebarInput',
 	hostDirectives: [HlmInput],
 	host: {
 		'data-slot': 'sidebar-input',

package/src/generators/ui/libs/sidebar/files/lib/hlm-sidebar-inset.ts.template

@@ -3,6 +3,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: 'main[hlmSidebarInset]',
+	exportAs: 'hlmSidebarInset',
 	host: { 'data-slot': 'sidebar-inset' },
 })
 export class HlmSidebarInset {

package/src/generators/ui/libs/sidebar/files/lib/hlm-sidebar-menu-action.ts.template

@@ -4,6 +4,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: 'button[hlmSidebarMenuAction]',
+	exportAs: 'hlmSidebarMenuAction',
 	host: {
 		'data-slot': 'sidebar-menu-action',
 		'data-sidebar': 'menu-action',

package/src/generators/ui/libs/sidebar/files/lib/hlm-sidebar-menu-badge.ts.template

@@ -3,6 +3,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmSidebarMenuBadge],hlm-sidebar-menu-badge',
+	exportAs: 'hlmSidebarMenuBadge',
 	host: {
 		'data-slot': 'sidebar-menu-badge',
 		'data-sidebar': 'menu-badge',

package/src/generators/ui/libs/sidebar/files/lib/hlm-sidebar-menu-button.ts.template

@@ -34,6 +34,7 @@ const sidebarMenuButtonVariants = cva(
 
 @Directive({
 	selector: 'button[hlmSidebarMenuButton], a[hlmSidebarMenuButton]',
+	exportAs: 'hlmSidebarMenuButton',
 	providers: [
 		provideBrnTooltipDefaultOptions({
 			showDelay: 150,

package/src/generators/ui/libs/sidebar/files/lib/hlm-sidebar-menu-item.ts.template

@@ -3,6 +3,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: 'li[hlmSidebarMenuItem]',
+	exportAs: 'hlmSidebarMenuItem',
 	host: {
 		'data-slot': 'sidebar-menu-item',
 		'data-sidebar': 'menu-item',

package/src/generators/ui/libs/sidebar/files/lib/hlm-sidebar-menu-skeleton.ts.template

@@ -5,6 +5,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Component({
 	selector: 'hlm-sidebar-menu-skeleton,div[hlmSidebarMenuSkeleton]',
+	exportAs: 'hlmSidebarMenuSkeleton',
 	imports: [HlmSkeletonImports],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: {

package/src/generators/ui/libs/sidebar/files/lib/hlm-sidebar-menu-sub-button.ts.template

@@ -6,6 +6,7 @@ import { injectHlmSidebarConfig } from './hlm-sidebar.token';
 
 @Directive({
 	selector: 'a[hlmSidebarMenuSubButton], button[hlmSidebarMenuSubButton]',
+	exportAs: 'hlmSidebarMenuSubButton',
 	host: {
 		'data-slot': 'sidebar-menu-sub-button',
 		'data-sidebar': 'menu-sub-button',

package/src/generators/ui/libs/sidebar/files/lib/hlm-sidebar-menu-sub-item.ts.template

@@ -3,6 +3,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: 'li[hlmSidebarMenuSubItem]',
+	exportAs: 'hlmSidebarMenuSubItem',
 	host: {
 		'data-slot': 'sidebar-menu-sub-item',
 		'data-sidebar': 'menu-sub-item',

package/src/generators/ui/libs/sidebar/files/lib/hlm-sidebar-menu-sub.ts.template

@@ -3,6 +3,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: 'ul[hlmSidebarMenuSub]',
+	exportAs: 'hlmSidebarMenuSub',
 	host: {
 		'data-slot': 'sidebar-menu-sub',
 		'data-sidebar': 'menu-sub',

package/src/generators/ui/libs/sidebar/files/lib/hlm-sidebar-menu.ts.template

@@ -3,6 +3,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: 'ul[hlmSidebarMenu]',
+	exportAs: 'hlmSidebarMenu',
 	host: {
 		'data-slot': 'sidebar-menu',
 		'data-sidebar': 'menu',

package/src/generators/ui/libs/sidebar/files/lib/hlm-sidebar-rail.ts.template

@@ -4,6 +4,7 @@ import { HlmSidebarService } from './hlm-sidebar.service';
 
 @Directive({
 	selector: 'button[hlmSidebarRail]',
+	exportAs: 'hlmSidebarRail',
 	host: {
 		'data-sidebar': 'rail',
 		'data-slot': 'sidebar-rail',

package/src/generators/ui/libs/sidebar/files/lib/hlm-sidebar-separator.ts.template

@@ -4,6 +4,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmSidebarSeparator],hlm-sidebar-separator',
+	exportAs: 'hlmSidebarSeparator',
 	hostDirectives: [HlmSeparator],
 	host: {
 		'data-slot': 'sidebar-separator',

package/src/generators/ui/libs/sidebar/files/lib/hlm-sidebar-trigger.ts.template

@@ -7,6 +7,7 @@ import { HlmSidebarService } from './hlm-sidebar.service';
 @Component({
 	// eslint-disable-next-line @angular-eslint/component-selector
 	selector: 'button[hlmSidebarTrigger]',
+	exportAs: 'hlmSidebarTrigger',
 	imports: [NgIcon],
 	providers: [provideIcons({ lucidePanelLeft }), provideBrnButtonConfig({ variant: 'ghost', size: 'icon-sm' })],
 	changeDetection: ChangeDetectionStrategy.OnPush,

package/src/generators/ui/libs/sidebar/files/lib/hlm-sidebar-wrapper.ts.template

@@ -4,6 +4,7 @@ import { injectHlmSidebarConfig } from './hlm-sidebar.token';
 
 @Directive({
 	selector: '[hlmSidebarWrapper],hlm-sidebar-wrapper',
+	exportAs: 'hlmSidebarWrapper',
 	host: {
 		'data-slot': 'sidebar-wrapper',
 		'[style.--sidebar-width]': 'sidebarWidth()',

package/src/generators/ui/libs/sidebar/files/lib/hlm-sidebar.ts.template

@@ -8,6 +8,7 @@ import { injectHlmSidebarConfig } from './hlm-sidebar.token';
 
 @Component({
 	selector: 'hlm-sidebar',
+	exportAs: 'hlmSidebar',
 	imports: [NgTemplateOutlet, HlmSheetImports],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: {

package/src/generators/ui/libs/skeleton/files/lib/hlm-skeleton.ts.template

@@ -3,6 +3,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmSkeleton],hlm-skeleton',
+	exportAs: 'hlmSkeleton',
 	host: {
 		'data-slot': 'skeleton',
 	},

package/src/generators/ui/libs/slider/files/lib/hlm-slider.ts.template

@@ -4,6 +4,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Component({
 	selector: 'hlm-slider, brn-slider [hlm]',
+	exportAs: 'hlmSlider',
 	imports: [BrnSliderImports],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	hostDirectives: [

package/src/generators/ui/libs/sonner/files/lib/hlm-toaster.ts.template

@@ -9,6 +9,7 @@ import type { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-toaster',
+	exportAs: 'hlmToaster',
 	imports: [BrnSonnerImports, HlmButtonImports, NgIcon],
 	providers: [provideIcons({ lucideCircleCheck, lucideInfo, lucideTriangleAlert, lucideOctagonX, lucideLoader2 })],
 	changeDetection: ChangeDetectionStrategy.OnPush,

package/src/generators/ui/libs/spinner/files/lib/hlm-spinner.ts.template

@@ -5,6 +5,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Component({
 	selector: 'hlm-spinner',
+	exportAs: 'hlmSpinner',
 	imports: [NgIcon],
 	providers: [provideIcons({ lucideLoader2 })],
 	changeDetection: ChangeDetectionStrategy.OnPush,

package/src/generators/ui/libs/switch/files/lib/hlm-switch-thumb.ts.template

@@ -4,6 +4,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmSwitchThumb],hlm-switch-thumb',
+	exportAs: 'hlmSwitchThumb',
 	hostDirectives: [BrnSwitchThumb],
 	host: { 'data-slot': 'switch-thumb' },
 })

package/src/generators/ui/libs/switch/files/lib/hlm-switch.ts.template

@@ -24,6 +24,7 @@ export const HLM_SWITCH_VALUE_ACCESSOR = {
 
 @Component({
 	selector: 'hlm-switch',
+	exportAs: 'hlmSwitch',
 	imports: [BrnSwitch, HlmSwitchThumb],
 	providers: [HLM_SWITCH_VALUE_ACCESSOR],
 	changeDetection: ChangeDetectionStrategy.OnPush,

package/src/generators/ui/libs/table/files/lib/hlm-table.ts.template

@@ -3,6 +3,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: 'div[hlmTableContainer]',
+	exportAs: 'hlmTableContainer',
 	host: { 'data-slot': 'table-container' },
 })
 export class HlmTableContainer {
@@ -16,6 +17,7 @@ export class HlmTableContainer {
  */
 @Directive({
 	selector: 'table[hlmTable]',
+	exportAs: 'hlmTable',
 	host: { 'data-slot': 'table' },
 })
 export class HlmTable {
@@ -30,6 +32,7 @@ export class HlmTable {
  */
 @Directive({
 	selector: 'thead[hlmTHead],thead[hlmTableHeader]',
+	exportAs: 'hlmTHead',
 	host: { 'data-slot': 'table-header' },
 })
 export class HlmTHead {
@@ -44,6 +47,7 @@ export class HlmTHead {
  */
 @Directive({
 	selector: 'tbody[hlmTBody],tbody[hlmTableBody]',
+	exportAs: 'hlmTBody',
 	host: { 'data-slot': 'table-body' },
 })
 export class HlmTBody {
@@ -58,6 +62,7 @@ export class HlmTBody {
  */
 @Directive({
 	selector: 'tfoot[hlmTFoot],tfoot[hlmTableFooter]',
+	exportAs: 'hlmTFoot',
 	host: { 'data-slot': 'table-footer' },
 })
 export class HlmTFoot {
@@ -72,6 +77,7 @@ export class HlmTFoot {
  */
 @Directive({
 	selector: 'tr[hlmTr],tr[hlmTableRow]',
+	exportAs: 'hlmTr',
 	host: { 'data-slot': 'table-row' },
 })
 export class HlmTr {
@@ -86,6 +92,7 @@ export class HlmTr {
  */
 @Directive({
 	selector: 'th[hlmTh],th[hlmTableHead]',
+	exportAs: 'hlmTh',
 	host: { 'data-slot': 'table-head' },
 })
 export class HlmTh {
@@ -100,6 +107,7 @@ export class HlmTh {
  */
 @Directive({
 	selector: 'td[hlmTd],td[hlmTableCell]',
+	exportAs: 'hlmTd',
 	host: { 'data-slot': 'table-cell' },
 })
 export class HlmTd {
@@ -114,6 +122,7 @@ export class HlmTd {
  */
 @Directive({
 	selector: 'caption[hlmCaption],caption[hlmTableCaption]',
+	exportAs: 'hlmCaption',
 	host: { 'data-slot': 'table-caption' },
 })
 export class HlmCaption {

package/src/generators/ui/libs/tabs/files/lib/hlm-tabs-content-lazy.ts.template

@@ -3,6 +3,7 @@ import { BrnTabsContentLazy } from '@spartan-ng/brain/tabs';
 
 @Directive({
 	selector: 'ng-template[hlmTabsContentLazy]',
+	exportAs: 'hlmTabsContentLazy',
 	hostDirectives: [BrnTabsContentLazy],
 })
 export class HlmTabsContentLazy {}

package/src/generators/ui/libs/tabs/files/lib/hlm-tabs-content.ts.template

@@ -4,6 +4,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmTabsContent]',
+	exportAs: 'hlmTabsContent',
 	hostDirectives: [{ directive: BrnTabsContent, inputs: ['brnTabsContent: hlmTabsContent'] }],
 	host: {
 		'data-slot': 'tabs-content',

package/src/generators/ui/libs/tabs/files/lib/hlm-tabs-list.ts.template

@@ -21,6 +21,7 @@ type ListVariants = VariantProps<typeof listVariants>;
 
 @Directive({
 	selector: '[hlmTabsList],hlm-tabs-list',
+	exportAs: 'hlmTabsList',
 	hostDirectives: [BrnTabsList],
 	host: {
 		'data-slot': 'tabs-list',

package/src/generators/ui/libs/tabs/files/lib/hlm-tabs-paginated-list.ts.template

@@ -20,6 +20,7 @@ import { listVariants } from './hlm-tabs-list';
 
 @Component({
 	selector: 'hlm-paginated-tabs-list',
+	exportAs: 'hlmTabsPaginatedList',
 	imports: [CdkObserveContent, NgIcon],
 	providers: [provideIcons({ lucideChevronRight, lucideChevronLeft })],
 	changeDetection: ChangeDetectionStrategy.OnPush,

package/src/generators/ui/libs/tabs/files/lib/hlm-tabs-trigger.ts.template

@@ -4,6 +4,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmTabsTrigger]',
+	exportAs: 'hlmTabsTrigger',
 	hostDirectives: [{ directive: BrnTabsTrigger, inputs: ['brnTabsTrigger: hlmTabsTrigger', 'disabled'] }],
 	host: {
 		'data-slot': 'tabs-trigger',

package/src/generators/ui/libs/tabs/files/lib/hlm-tabs.ts.template

@@ -4,6 +4,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmTabs],hlm-tabs',
+	exportAs: 'hlmTabs',
 	hostDirectives: [
 		{
 			directive: BrnTabs,

package/src/generators/ui/libs/textarea/files/lib/hlm-textarea.ts.template

@@ -5,6 +5,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmTextarea]',
+	exportAs: 'hlmTextarea',
 	hostDirectives: [{ directive: BrnTextarea, inputs: ['id', 'forceInvalid'] }, BrnFieldControlDescribedBy],
 	host: { 'data-slot': 'textarea' },
 })

package/src/generators/ui/libs/toggle/files/lib/hlm-toggle.ts.template

@@ -27,6 +27,7 @@ export type ToggleVariants = VariantProps<typeof toggleVariants>;
 
 @Directive({
 	selector: 'button[hlmToggle]',
+	exportAs: 'hlmToggle',
 	hostDirectives: [
 		{
 			directive: BrnToggle,

package/src/generators/ui/libs/toggle-group/files/lib/hlm-toggle-group-item.ts.template

@@ -6,6 +6,7 @@ import { injectHlmToggleGroup } from './hlm-toggle-group.token';
 
 @Directive({
 	selector: 'button[hlmToggleGroupItem]',
+	exportAs: 'hlmToggleGroupItem',
 	hostDirectives: [
 		{
 			directive: BrnToggleGroupItem,

package/src/generators/ui/libs/toggle-group/files/lib/hlm-toggle-group.ts.template

@@ -7,6 +7,7 @@ import { provideHlmToggleGroup } from './hlm-toggle-group.token';
 
 @Directive({
 	selector: '[hlmToggleGroup],hlm-toggle-group',
+	exportAs: 'hlmToggleGroup',
 	providers: [provideHlmToggleGroup(HlmToggleGroup)],
 	hostDirectives: [
 		{

package/src/generators/ui/libs/tooltip/files/lib/hlm-tooltip.ts.template

@@ -23,6 +23,7 @@ export const tooltipPositionVariants = cva('absolute', {
 
 @Directive({
 	selector: '[hlmTooltip]',
+	exportAs: 'hlmTooltip',
 	providers: [
 		provideBrnTooltipDefaultOptions({
 			svgClasses: DEFAULT_TOOLTIP_SVG_CLASS,

package/src/generators/ui/libs/trace/files/index.ts.template

@@ -0,0 +1,28 @@
+import { HlmTrace } from './lib/hlm-trace';
+import { HlmTraceCollapsible } from './lib/hlm-trace-collapsible';
+import { HlmTraceCollapsibleContent } from './lib/hlm-trace-collapsible-content';
+import { HlmTraceCollapsibleTrigger } from './lib/hlm-trace-collapsible-trigger';
+import { HlmTraceDescription } from './lib/hlm-trace-description';
+import { HlmTraceIcon } from './lib/hlm-trace-icon';
+import { HlmTraceLine } from './lib/hlm-trace-line';
+import { HlmTraceTitle } from './lib/hlm-trace-title';
+
+export * from './lib/hlm-trace';
+export * from './lib/hlm-trace-collapsible';
+export * from './lib/hlm-trace-collapsible-content';
+export * from './lib/hlm-trace-collapsible-trigger';
+export * from './lib/hlm-trace-description';
+export * from './lib/hlm-trace-icon';
+export * from './lib/hlm-trace-line';
+export * from './lib/hlm-trace-title';
+
+export const HlmTraceImports = [
+	HlmTrace,
+	HlmTraceCollapsible,
+	HlmTraceCollapsibleContent,
+	HlmTraceCollapsibleTrigger,
+	HlmTraceDescription,
+	HlmTraceIcon,
+	HlmTraceLine,
+	HlmTraceTitle,
+] as const;

package/src/generators/ui/libs/trace/files/lib/hlm-trace-collapsible-content.ts.template

@@ -0,0 +1,34 @@
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { BrnCollapsibleContent } from '@spartan-ng/brain/collapsible';
+import { classes, hlm } from '<%- importAlias %>/utils';
+import { ClassValue } from 'clsx';
+
+@Component({
+	selector: 'hlm-trace-collapsible-content',
+	exportAs: 'hlmTraceCollapsibleContent',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [{ directive: BrnCollapsibleContent, inputs: ['id'] }],
+	host: { 'data-slot': 'trace-collapsible-content' },
+	template: `
+		<div [class]="_computedContentInnerClasses()" data-slot="trace-collapsible-content-inner">
+			<ng-content />
+		</div>
+	`,
+})
+export class HlmTraceCollapsibleContent {
+	public readonly contentInnerClasses = input<ClassValue>();
+
+	protected readonly _computedContentInnerClasses = computed(() =>
+		hlm(
+			'spartan-trace-collapsible-content-inner text-muted-foreground min-w-0 wrap-break-word',
+			this.contentInnerClasses(),
+		),
+	);
+
+	constructor() {
+		classes(
+			() =>
+				'spartan-trace-collapsible-content block min-w-0 overflow-hidden transition-[height] data-[state=closed]:h-0 data-[state=open]:h-(--brn-collapsible-content-height) motion-reduce:transition-none',
+		);
+	}
+}

package/src/generators/ui/libs/trace/files/lib/hlm-trace-collapsible-trigger.ts.template

@@ -0,0 +1,31 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideChevronRight } from '@ng-icons/lucide';
+import { BrnCollapsibleTrigger } from '@spartan-ng/brain/collapsible';
+import { classes } from '<%- importAlias %>/utils';
+
+@Component({
+	// eslint-disable-next-line @angular-eslint/component-selector
+	selector: 'button[hlmTraceCollapsibleTrigger]',
+	exportAs: 'hlmTraceCollapsibleTrigger',
+	imports: [NgIcon],
+	providers: [provideIcons({ lucideChevronRight })],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [{ directive: BrnCollapsibleTrigger, inputs: ['type'] }],
+	host: { 'data-slot': 'trace-collapsible-trigger' },
+	template: `
+		<ng-content />
+		<ng-icon
+			name="lucideChevronRight"
+			class="transition-transform group-aria-expanded/trace-collapsible-trigger:rotate-90 motion-reduce:transition-none"
+		/>
+	`,
+})
+export class HlmTraceCollapsibleTrigger {
+	constructor() {
+		classes(
+			() =>
+				'spartan-trace-collapsible-trigger group/trace-collapsible-trigger text-muted-foreground hover:text-foreground has-[[data-status=error]]:text-destructive flex w-fit max-w-full min-w-0 cursor-pointer items-center text-left transition-colors outline-none',
+		);
+	}
+}

package/src/generators/ui/libs/trace/files/lib/hlm-trace-collapsible.ts.template

@@ -0,0 +1,21 @@
+import { Directive } from '@angular/core';
+import { BrnCollapsible } from '@spartan-ng/brain/collapsible';
+import { classes } from '<%- importAlias %>/utils';
+
+@Directive({
+	selector: '[hlmTraceCollapsible],hlm-trace-collapsible',
+	exportAs: 'hlmTraceCollapsible',
+	hostDirectives: [
+		{
+			directive: BrnCollapsible,
+			inputs: ['expanded', 'disabled'],
+			outputs: ['expandedChange'],
+		},
+	],
+	host: { 'data-slot': 'trace-collapsible' },
+})
+export class HlmTraceCollapsible {
+	constructor() {
+		classes(() => 'spartan-trace-collapsible flex w-full min-w-0 flex-col');
+	}
+}

package/src/generators/ui/libs/trace/files/lib/hlm-trace-description.ts.template

@@ -0,0 +1,13 @@
+import { Directive } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
+
+@Directive({
+	selector: '[hlmTraceDescription],hlm-trace-description',
+	exportAs: 'hlmTraceDescription',
+	host: { 'data-slot': 'trace-description' },
+})
+export class HlmTraceDescription {
+	constructor() {
+		classes(() => 'spartan-trace-description text-muted-foreground/70 shrink-0 tabular-nums');
+	}
+}

package/src/generators/ui/libs/trace/files/lib/hlm-trace-icon.ts.template

@@ -0,0 +1,13 @@
+import { Directive } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
+
+@Directive({
+	selector: '[hlmTraceIcon],hlm-trace-icon',
+	exportAs: 'hlmTraceIcon',
+	host: { 'data-slot': 'trace-icon', '[attr.aria-hidden]': 'true' },
+})
+export class HlmTraceIcon {
+	constructor() {
+		classes(() => 'spartan-trace-icon flex shrink-0 items-center justify-center [&_ng-icon]:pointer-events-none');
+	}
+}

package/src/generators/ui/libs/trace/files/lib/hlm-trace-line.ts.template

@@ -0,0 +1,18 @@
+import { Directive, input } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
+
+@Directive({
+	selector: '[hlmTraceLine],hlm-trace-line',
+	exportAs: 'hlmTraceLine',
+	host: { 'data-slot': 'trace-line', '[attr.data-status]': 'status()' },
+})
+export class HlmTraceLine {
+	public readonly status = input<'running' | 'error' | 'pending'>();
+
+	constructor() {
+		classes(
+			() =>
+				'spartan-trace-line text-muted-foreground [a:hover,button:hover]:text-foreground data-[status=error]:text-destructive data-[status=error]:in-[a:hover,button:hover]:text-destructive data-[status=running]:*:data-[slot=trace-title]:shimmer flex w-fit max-w-full min-w-0 items-center transition-colors data-[status=pending]:opacity-60 [a,button]:cursor-pointer',
+		);
+	}
+}

package/src/generators/ui/libs/trace/files/lib/hlm-trace-title.ts.template

@@ -0,0 +1,13 @@
+import { Directive } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
+
+@Directive({
+	selector: '[hlmTraceTitle],hlm-trace-title',
+	exportAs: 'hlmTraceTitle',
+	host: { 'data-slot': 'trace-title' },
+})
+export class HlmTraceTitle {
+	constructor() {
+		classes(() => 'spartan-trace-title motion-reduce:shimmer-none min-w-0 truncate');
+	}
+}

package/src/generators/ui/libs/trace/files/lib/hlm-trace.ts.template

@@ -0,0 +1,16 @@
+import { Directive } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
+
+@Directive({
+	selector: '[hlmTrace],hlm-trace',
+	exportAs: 'hlmTrace',
+	host: { 'data-slot': 'trace' },
+})
+export class HlmTrace {
+	constructor() {
+		classes(
+			() =>
+				'spartan-trace flex w-full min-w-0 flex-col *:has-[>[data-slot=trace-line]]:flex *:has-[>[data-slot=trace-line]]:w-fit *:has-[>[data-slot=trace-line]]:max-w-full *:has-[>[data-slot=trace-line]]:min-w-0 *:has-[>[data-slot=trace-line]]:text-left *:has-[>[data-slot=trace-line]]:outline-none',
+		);
+	}
+}

package/src/generators/ui/libs/trace/generator.d.ts

@@ -0,0 +1,3 @@
+import type { Tree } from '@nx/devkit';
+import type { HlmBaseGeneratorSchema } from '../../../base/schema';
+export declare function generator(tree: Tree, options: HlmBaseGeneratorSchema): Promise<import("@nx/devkit").GeneratorCallback>;

package/src/generators/ui/libs/trace/generator.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generator = generator;
+const tslib_1 = require("tslib");
+const generator_1 = tslib_1.__importDefault(require("../../../base/generator"));
+async function generator(tree, options) {
+    return await (0, generator_1.default)(tree, { ...options, name: 'trace' });
+}
+//# sourceMappingURL=generator.js.map

package/src/generators/ui/libs/trace/generator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/trace/generator.ts"],"names":[],"mappings":";;AAIA,8BAEC;;AALD,gFAAuD;AAGhD,KAAK,UAAU,SAAS,CAAC,IAAU,EAAE,OAA+B;IAC1E,OAAO,MAAM,IAAA,mBAAgB,EAAC,IAAI,EAAE,EAAE,GAAG,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC;AACpE,CAAC"}

package/src/generators/ui/libs/typography/files/lib/hlm-blockquote.ts.template

@@ -5,6 +5,7 @@ export const hlmBlockquote = 'mt-6 border-border border-l-2 pl-6 italic';
 
 @Directive({
 	selector: '[hlmBlockquote]',
+	exportAs: 'hlmBlockquote',
 })
 export class HlmBlockquote {
 	constructor() {

package/src/generators/ui/libs/typography/files/lib/hlm-code.ts.template

@@ -5,6 +5,7 @@ export const hlmCode = 'relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-m
 
 @Directive({
 	selector: '[hlmCode]',
+	exportAs: 'hlmCode',
 })
 export class HlmCode {
 	constructor() {