@spartan-ng/cli 0.0.1-alpha.665 → 0.0.1-alpha.667

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spartan-ng/cli",
-  "version": "0.0.1-alpha.665",
+  "version": "0.0.1-alpha.667",
   "repository": {
     "type": "git",
     "url": "https://github.com/spartan-ng/spartan"

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

@@ -1,19 +1,11 @@
 import { HlmAccordion } from './lib/hlm-accordion';
 import { HlmAccordionContent } from './lib/hlm-accordion-content';
-import { HlmAccordionIcon } from './lib/hlm-accordion-icon';
 import { HlmAccordionItem } from './lib/hlm-accordion-item';
 import { HlmAccordionTrigger } from './lib/hlm-accordion-trigger';
 
 export * from './lib/hlm-accordion';
 export * from './lib/hlm-accordion-content';
-export * from './lib/hlm-accordion-icon';
 export * from './lib/hlm-accordion-item';
 export * from './lib/hlm-accordion-trigger';
 
-export const HlmAccordionImports = [
-	HlmAccordion,
-	HlmAccordionItem,
-	HlmAccordionTrigger,
-	HlmAccordionIcon,
-	HlmAccordionContent,
-] as const;
+export const HlmAccordionImports = [HlmAccordion, HlmAccordionItem, HlmAccordionContent, HlmAccordionTrigger] as const;

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

@@ -6,8 +6,13 @@ import { classes } from '<%- importAlias %>/utils';
 	selector: 'hlm-accordion-content',
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	hostDirectives: [{ directive: BrnAccordionContent, inputs: ['style'] }],
+	host: {
+		'data-slot': 'accordion-content',
+	},
 	template: `
-		<div class="flex flex-col gap-4 pt-0 pb-4 text-balance">
+		<div
+			class="spartan-accordion-content-inner [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4"
+		>
 			<ng-content />
 		</div>
 	`,
@@ -15,7 +20,8 @@ import { classes } from '<%- importAlias %>/utils';
 export class HlmAccordionContent {
 	constructor() {
 		classes(
-			() => 'text-sm transition-all data-[state=closed]:h-0 data-[state=open]:h-[var(--brn-accordion-content-height)]',
+			() =>
+				'spartan-accordion-content transition-all data-[state=closed]:h-0 data-[state=open]:h-(--brn-accordion-content-height)',
 		);
 	}
 }

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

@@ -3,17 +3,20 @@ import { BrnAccordionItem } from '@spartan-ng/brain/accordion';
 import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
-	selector: '[hlmAccordionItem],brn-accordion-item[hlm],hlm-accordion-item',
+	selector: '[hlmAccordionItem],hlm-accordion-item',
 	hostDirectives: [
 		{
 			directive: BrnAccordionItem,
-			inputs: ['isOpened'],
+			inputs: ['isOpened', 'disabled'],
 			outputs: ['openedChange'],
 		},
 	],
+	host: {
+		'data-slot': 'accordion-item',
+	},
 })
 export class HlmAccordionItem {
 	constructor() {
-		classes(() => 'border-border flex flex-1 flex-col border-b');
+		classes(() => 'spartan-accordion-item flex flex-col');
 	}
 }

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

@@ -1,19 +1,40 @@
-import { Directive } from '@angular/core';
-import { BrnAccordionTrigger } from '@spartan-ng/brain/accordion';
-import { classes } from '<%- importAlias %>/utils';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideChevronDown, lucideChevronUp } from '@ng-icons/lucide';
+import { BrnAccordionImports } from '@spartan-ng/brain/accordion';
+import { hlm } from '<%- importAlias %>/utils';
+import type { ClassValue } from 'clsx';
 
-@Directive({
-	selector: '[hlmAccordionTrigger]',
-	hostDirectives: [BrnAccordionTrigger],
-	host: {
-		'[style.--tw-ring-offset-shadow]': '"0 0 #000"',
-	},
+@Component({
+	selector: 'hlm-accordion-trigger',
+	imports: [BrnAccordionImports, NgIcon],
+	providers: [provideIcons({ lucideChevronDown, lucideChevronUp })],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	template: `
+		<h3 brnAccordionHeader class="flex">
+			<button brnAccordionTrigger data-slot="accordion-trigger" [class]="_computedTriggerClass()">
+				<ng-content />
+				<ng-icon
+					name="lucideChevronDown"
+					data-slot="accordion-trigger-icon"
+					class="spartan-accordion-trigger-icon pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
+				/>
+				<ng-icon
+					name="lucideChevronUp"
+					data-slot="accordion-trigger-icon"
+					class="spartan-accordion-trigger-icon pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:inline group-aria-[expanded=false]/accordion-trigger:hidden"
+				/>
+			</button>
+		</h3>
+	`,
 })
 export class HlmAccordionTrigger {
-	constructor() {
-		classes(
-			() =>
-				'group focus-visible:ring-ring focus-visible:ring-offset-background flex w-full items-center justify-between py-4 text-left font-medium transition-all hover:underline focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none [&[data-state=open]>ng-icon]:rotate-180',
-		);
-	}
+	public readonly triggerClass = input<ClassValue>('');
+
+	protected readonly _computedTriggerClass = computed(() =>
+		hlm(
+			'spartan-accordion-trigger group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none aria-disabled:pointer-events-none aria-disabled:opacity-50',
+			this.triggerClass(),
+		),
+	);
 }

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

@@ -4,10 +4,13 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmAccordion], hlm-accordion',
-	hostDirectives: [{ directive: BrnAccordion, inputs: ['type', 'dir', 'orientation'] }],
+	hostDirectives: [{ directive: BrnAccordion, inputs: ['type', 'orientation'] }],
+	host: {
+		'data-slot': 'accordion',
+	},
 })
 export class HlmAccordion {
 	constructor() {
-		classes(() => 'flex data-[orientation=horizontal]:flex-row data-[orientation=vertical]:flex-col');
+		classes(() => 'spartan-accordion flex w-full flex-col');
 	}
 }

package/src/generators/ui/libs/aspect-ratio/files/index.ts.template

@@ -1,5 +1,5 @@
-import { HlmAspectRatio } from './lib/helm-aspect-ratio';
+import { HlmAspectRatio } from './lib/hlm-aspect-ratio';
 
-export * from './lib/helm-aspect-ratio';
+export * from './lib/hlm-aspect-ratio';
 
 export const HlmAspectRatioImports = [HlmAspectRatio] as const;

package/src/generators/ui/libs/aspect-ratio/files/lib/{helm-aspect-ratio.ts.template → hlm-aspect-ratio.ts.template}

@@ -12,7 +12,10 @@ const parseDividedString = (value: NumberInput): NumberInput => {
 
 @Directive({
 	selector: '[hlmAspectRatio]',
-	host: { '[style.padding-bottom.%]': '100 / ratio()' },
+	host: {
+		'data-slot': 'aspect-ratio',
+		'[style.--ratio]': 'ratio()',
+	},
 })
 export class HlmAspectRatio {
 	/**
@@ -27,9 +30,6 @@ export class HlmAspectRatio {
 	});
 
 	constructor() {
-		classes(
-			() =>
-				'relative w-full [&>*:first-child]:absolute [&>*:first-child]:h-full [&>*:first-child]:w-full [&>*:first-child]:object-cover',
-		);
+		classes(() => 'relative aspect-(--ratio)');
 	}
 }

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

@@ -10,10 +10,10 @@ import { classes } from '<%- importAlias %>/utils';
 export class HlmAvatarBadge {
 	constructor() {
 		classes(() => [
-			'bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none',
+			'spartan-avatar-badge absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none',
 			'group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>ng-icon]:hidden',
-			'group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>ng-icon]:text-[0.5rem]',
-			'group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>ng-icon]:text-[0.5rem]',
+			'group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>ng-icon]:text-[calc(var(--spacing)*2)]',
+			'group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>ng-icon]:text-[calc(var(--spacing)*2)]',
 		]);
 	}
 }

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

@@ -14,7 +14,7 @@ export class HlmAvatarFallback {
 	constructor() {
 		classes(
 			() =>
-				'bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs',
+				'spartan-avatar-fallback flex size-full items-center justify-center text-sm group-data-[size=sm]/avatar:text-xs',
 		);
 	}
 }

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

@@ -14,6 +14,6 @@ export class HlmAvatarImage {
 	public readonly canShow = inject(BrnAvatarImage).canShow;
 
 	constructor() {
-		classes(() => 'aspect-square size-full rounded-full object-cover');
+		classes(() => 'spartan-avatar-image aspect-square size-full object-cover');
 	}
 }

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

@@ -25,7 +25,7 @@ export class HlmAvatar extends BrnAvatar {
 		super();
 		classes(
 			() =>
-				'after:border-border group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten',
+				'spartan-avatar group/avatar after:border-border relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:mix-blend-darken dark:after:mix-blend-lighten',
 		);
 	}
 }

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

@@ -14,7 +14,7 @@ export * from './lib/hlm-breadcrumb-list';
 export * from './lib/hlm-breadcrumb-page';
 export * from './lib/hlm-breadcrumb-separator';
 
-export const HlmBreadCrumbImports = [
+export const HlmBreadcrumbImports = [
 	HlmBreadcrumb,
 	HlmBreadcrumbEllipsis,
 	HlmBreadcrumbSeparator,
@@ -23,3 +23,8 @@ export const HlmBreadCrumbImports = [
 	HlmBreadcrumbPage,
 	HlmBreadcrumbList,
 ] as const;
+
+/**
+ * @deprecated Use `HlmBreadcrumbImports` instead.
+ */
+export const HlmBreadCrumbImports = HlmBreadcrumbImports;

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

@@ -11,7 +11,7 @@ import type { ClassValue } from 'clsx';
 	providers: [provideIcons({ lucideEllipsis })],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	template: `
-		<span role="presentation" aria-hidden="true" [class]="_computedClass()">
+		<span data-slot="breadcrumb-ellipsis" role="presentation" aria-hidden="true" [class]="_computedClass()">
 			<ng-icon hlm size="sm" name="lucideEllipsis" />
 			<span class="sr-only">{{ srOnlyText() }}</span>
 		</span>
@@ -22,5 +22,7 @@ export class HlmBreadcrumbEllipsis {
 	/** Screen reader only text for the ellipsis */
 	public readonly srOnlyText = input<string>('More');
 
-	protected readonly _computedClass = computed(() => hlm('flex size-9 items-center justify-center', this.userClass()));
+	protected readonly _computedClass = computed(() =>
+		hlm('spartan-breadcrumb-ellipsis flex items-center justify-center', this.userClass()),
+	);
 }

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

@@ -3,9 +3,12 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmBreadcrumbItem]',
+	host: {
+		'data-slot': 'breadcrumb-item',
+	},
 })
 export class HlmBreadcrumbItem {
 	constructor() {
-		classes(() => 'inline-flex items-center gap-1.5');
+		classes(() => 'spartan-breadcrumb-item inline-flex items-center');
 	}
 }

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

@@ -22,12 +22,15 @@ import { classes } from '<%- importAlias %>/utils';
 			],
 		},
 	],
+	host: {
+		'data-slot': 'breadcrumb-link',
+	},
 })
 export class HlmBreadcrumbLink {
-	constructor() {
-		classes(() => 'hover:text-foreground transition-colors');
-	}
-
 	/** The link to navigate to the page. */
 	public readonly link = input<RouterLink['routerLink']>();
+
+	constructor() {
+		classes(() => 'spartan-breadcrumb-link');
+	}
 }

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

@@ -3,9 +3,12 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmBreadcrumbList]',
+	host: {
+		'data-slot': 'breadcrumb-list',
+	},
 })
 export class HlmBreadcrumbList {
 	constructor() {
-		classes(() => 'text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5');
+		classes(() => 'spartan-breadcrumb-list flex flex-wrap items-center wrap-break-word');
 	}
 }

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

@@ -4,6 +4,7 @@ import { classes } from '<%- importAlias %>/utils';
 @Directive({
 	selector: '[hlmBreadcrumbPage]',
 	host: {
+		'data-slot': 'breadcrumb-page',
 		role: 'link',
 		'aria-disabled': 'true',
 		'aria-current': 'page',
@@ -11,6 +12,6 @@ import { classes } from '<%- importAlias %>/utils';
 })
 export class HlmBreadcrumbPage {
 	constructor() {
-		classes(() => 'text-foreground font-normal');
+		classes(() => 'spartan-breadcrumb-page');
 	}
 }

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

@@ -10,6 +10,7 @@ import { classes } from '<%- importAlias %>/utils';
 	providers: [provideIcons({ lucideChevronRight })],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: {
+		'data-slot': 'breadcrumb-separator',
 		role: 'presentation',
 		'aria-hidden': 'true',
 	},
@@ -21,6 +22,6 @@ import { classes } from '<%- importAlias %>/utils';
 })
 export class HlmBreadcrumbSeparator {
 	constructor() {
-		classes(() => '[&_ng-icon]:block [&_ng-icon]:size-3.5');
+		classes(() => 'spartan-breadcrumb-separator [&>ng-icon]:flex');
 	}
 }

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

@@ -3,6 +3,7 @@ import { Directive, input } from '@angular/core';
 @Directive({
 	selector: '[hlmBreadcrumb]',
 	host: {
+		'data-slot': 'breadcrumb',
 		role: 'navigation',
 		'[attr.aria-label]': 'ariaLabel()',
 	},

package/src/generators/ui/style-luma.css

@@ -1,4 +1,25 @@
 .style-luma {
+	/* MARK: Accordion */
+	.spartan-accordion {
+		@apply overflow-hidden rounded-2xl border;
+	}
+
+	.spartan-accordion-item {
+		@apply data-open:bg-muted/50 not-last:border-b;
+	}
+
+	.spartan-accordion-trigger {
+		@apply **:data-[slot=accordion-trigger-icon]:text-muted-foreground! gap-6 p-4 text-start text-sm font-medium hover:underline **:data-[slot=accordion-trigger-icon]:ms-auto **:data-[slot=accordion-trigger-icon]:text-[calc(var(--spacing)*4)];
+	}
+
+	.spartan-accordion-content {
+		@apply px-4 text-sm;
+	}
+
+	.spartan-accordion-content-inner {
+		@apply pt-0 pb-4;
+	}
+
 	/* MARK: Slider */
 	.spartan-slider {
 		@apply data-vertical:min-h-40;
@@ -423,27 +444,6 @@
 		@apply rounded-b-4xl px-6 group-data-[size=sm]/card:px-4 [.border-t]:pt-6 group-data-[size=sm]/card:[.border-t]:pt-4;
 	}
 
-	/* MARK: Accordion */
-	.spartan-accordion {
-		@apply overflow-hidden rounded-2xl border;
-	}
-
-	.spartan-accordion-item {
-		@apply data-open:bg-muted/50 not-last:border-b;
-	}
-
-	.spartan-accordion-trigger {
-		@apply **:data-[slot=accordion-trigger-icon]:text-muted-foreground gap-6 p-4 text-start text-sm font-medium hover:underline **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4;
-	}
-
-	.spartan-accordion-content {
-		@apply data-open:animate-accordion-down data-closed:animate-accordion-up px-4 text-sm;
-	}
-
-	.spartan-accordion-content-inner {
-		@apply pt-0 pb-4;
-	}
-
 	/* MARK: Alert Dialog */
 	.spartan-alert-dialog-overlay {
 		@apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/30 duration-100 supports-backdrop-filter:backdrop-blur-sm;

package/src/generators/ui/style-lyra.css

@@ -5,11 +5,11 @@
 	}
 
 	.spartan-accordion-trigger {
-		@apply focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-none py-2.5 text-start text-xs font-medium hover:underline focus-visible:ring-1 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4;
+		@apply focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground! rounded-none py-2.5 text-start text-xs font-medium hover:underline focus-visible:ring-1 **:data-[slot=accordion-trigger-icon]:ms-auto **:data-[slot=accordion-trigger-icon]:text-[calc(var(--spacing)*4)];
 	}
 
 	.spartan-accordion-content {
-		@apply data-open:animate-accordion-down data-closed:animate-accordion-up text-xs;
+		@apply text-xs;
 	}
 
 	.spartan-accordion-content-inner {

package/src/generators/ui/style-maia.css

@@ -9,11 +9,11 @@
 	}
 
 	.spartan-accordion-trigger {
-		@apply **:data-[slot=accordion-trigger-icon]:text-muted-foreground gap-6 p-4 text-start text-sm font-medium hover:underline **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4;
+		@apply **:data-[slot=accordion-trigger-icon]:text-muted-foreground! gap-6 p-4 text-start text-sm font-medium hover:underline **:data-[slot=accordion-trigger-icon]:ms-auto **:data-[slot=accordion-trigger-icon]:text-[calc(var(--spacing)*4)];
 	}
 
 	.spartan-accordion-content {
-		@apply data-open:animate-accordion-down data-closed:animate-accordion-up px-4 text-sm;
+		@apply px-4 text-sm;
 	}
 
 	.spartan-accordion-content-inner {

package/src/generators/ui/style-mira.css

@@ -9,11 +9,11 @@
 	}
 
 	.spartan-accordion-trigger {
-		@apply **:data-[slot=accordion-trigger-icon]:text-muted-foreground gap-6 p-2 text-start text-xs/relaxed font-medium hover:underline **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4;
+		@apply **:data-[slot=accordion-trigger-icon]:text-muted-foreground! gap-6 p-2 text-start text-xs/relaxed font-medium hover:underline **:data-[slot=accordion-trigger-icon]:ms-auto **:data-[slot=accordion-trigger-icon]:text-[calc(var(--spacing)*4)];
 	}
 
 	.spartan-accordion-content {
-		@apply data-open:animate-accordion-down data-closed:animate-accordion-up px-2 text-xs/relaxed;
+		@apply px-2 text-xs/relaxed;
 	}
 
 	.spartan-accordion-content-inner {

package/src/generators/ui/style-nova.css

@@ -5,11 +5,11 @@
 	}
 
 	.spartan-accordion-trigger {
-		@apply focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-lg py-2.5 text-start text-sm font-medium hover:underline focus-visible:ring-3 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4;
+		@apply focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground! rounded-lg py-2.5 text-start text-sm font-medium hover:underline focus-visible:ring-3 **:data-[slot=accordion-trigger-icon]:ms-auto **:data-[slot=accordion-trigger-icon]:text-[calc(var(--spacing)*4)];
 	}
 
 	.spartan-accordion-content {
-		@apply data-open:animate-accordion-down data-closed:animate-accordion-up text-sm;
+		@apply text-sm;
 	}
 
 	.spartan-accordion-content-inner {

package/src/generators/ui/style-vega.css

@@ -5,11 +5,11 @@
 	}
 
 	.spartan-accordion-trigger {
-		@apply focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-md py-4 text-start text-sm font-medium hover:underline focus-visible:ring-3 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4;
+		@apply focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground! rounded-md py-4 text-start text-sm font-medium hover:underline focus-visible:ring-3 **:data-[slot=accordion-trigger-icon]:ms-auto **:data-[slot=accordion-trigger-icon]:text-[calc(var(--spacing)*4)];
 	}
 
 	.spartan-accordion-content {
-		@apply data-open:animate-accordion-down data-closed:animate-accordion-up text-sm;
+		@apply text-sm;
 	}
 
 	.spartan-accordion-content-inner {

package/src/generators/ui/supported-ui-libraries.json

@@ -3,9 +3,10 @@
 		"name": "accordion",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.665",
+			"@spartan-ng/brain": "0.0.1-alpha.667",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
-			"@ng-icons/lucide": ">=32.0.0 <34.0.0"
+			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
+			"clsx": "^2.1.1"
 		}
 	},
 	"alert": {
@@ -19,7 +20,7 @@
 		"name": "alert-dialog",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.665",
+			"@spartan-ng/brain": "0.0.1-alpha.667",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -35,7 +36,7 @@
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
 			"@angular/forms": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.665",
+			"@spartan-ng/brain": "0.0.1-alpha.667",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0"
@@ -45,7 +46,7 @@
 		"name": "avatar",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.665"
+			"@spartan-ng/brain": "0.0.1-alpha.667"
 		}
 	},
 	"badge": {
@@ -69,7 +70,7 @@
 		"name": "button",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.665",
+			"@spartan-ng/brain": "0.0.1-alpha.667",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1"
 		}
@@ -78,7 +79,7 @@
 		"name": "button-group",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.665",
+			"@spartan-ng/brain": "0.0.1-alpha.667",
 			"class-variance-authority": "^0.7.0"
 		}
 	},
@@ -90,7 +91,7 @@
 			"@angular/core": ">=20.0.0 <22.0.0",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.665",
+			"@spartan-ng/brain": "0.0.1-alpha.667",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -118,7 +119,7 @@
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.665",
+			"@spartan-ng/brain": "0.0.1-alpha.667",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -126,7 +127,7 @@
 		"name": "collapsible",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.665"
+			"@spartan-ng/brain": "0.0.1-alpha.667"
 		}
 	},
 	"combobox": {
@@ -134,7 +135,7 @@
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
 			"@angular/forms": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.665",
+			"@spartan-ng/brain": "0.0.1-alpha.667",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
@@ -146,7 +147,7 @@
 		"peerDependencies": {
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.665",
+			"@spartan-ng/brain": "0.0.1-alpha.667",
 			"clsx": "^2.1.1",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0"
@@ -156,7 +157,7 @@
 		"name": "context-menu",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.665",
+			"@spartan-ng/brain": "0.0.1-alpha.667",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"rxjs": "^7.8.0"
 		}
@@ -169,7 +170,7 @@
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.665",
+			"@spartan-ng/brain": "0.0.1-alpha.667",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -177,7 +178,7 @@
 		"name": "dialog",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.665",
+			"@spartan-ng/brain": "0.0.1-alpha.667",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"@angular/common": ">=20.0.0 <22.0.0",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
@@ -193,7 +194,7 @@
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"rxjs": "^7.8.0",
-			"@spartan-ng/brain": "0.0.1-alpha.665"
+			"@spartan-ng/brain": "0.0.1-alpha.667"
 		}
 	},
 	"empty": {
@@ -207,7 +208,7 @@
 		"name": "field",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.665",
+			"@spartan-ng/brain": "0.0.1-alpha.667",
 			"clsx": "^2.1.1",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"class-variance-authority": "^0.7.0"
@@ -217,7 +218,7 @@
 		"name": "hover-card",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.665"
+			"@spartan-ng/brain": "0.0.1-alpha.667"
 		}
 	},
 	"icon": {
@@ -233,7 +234,7 @@
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
 			"@angular/forms": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.665",
+			"@spartan-ng/brain": "0.0.1-alpha.667",
 			"class-variance-authority": "^0.7.0"
 		}
 	},
@@ -242,7 +243,7 @@
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
 			"class-variance-authority": "^0.7.0",
-			"@spartan-ng/brain": "0.0.1-alpha.665"
+			"@spartan-ng/brain": "0.0.1-alpha.667"
 		}
 	},
 	"input-otp": {
@@ -252,7 +253,7 @@
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.665"
+			"@spartan-ng/brain": "0.0.1-alpha.667"
 		}
 	},
 	"item": {
@@ -260,7 +261,7 @@
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
 			"class-variance-authority": "^0.7.0",
-			"@spartan-ng/brain": "0.0.1-alpha.665"
+			"@spartan-ng/brain": "0.0.1-alpha.667"
 		}
 	},
 	"kbd": {
@@ -273,14 +274,14 @@
 		"name": "label",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.665"
+			"@spartan-ng/brain": "0.0.1-alpha.667"
 		}
 	},
 	"menubar": {
 		"name": "menubar",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.665",
+			"@spartan-ng/brain": "0.0.1-alpha.667",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"rxjs": "^7.8.0"
 		}
@@ -293,7 +294,7 @@
 			"@angular/forms": ">=20.0.0 <22.0.0",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.665",
+			"@spartan-ng/brain": "0.0.1-alpha.667",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -301,7 +302,7 @@
 		"name": "navigation-menu",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.665"
+			"@spartan-ng/brain": "0.0.1-alpha.667"
 		}
 	},
 	"pagination": {
@@ -319,14 +320,14 @@
 		"name": "popover",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.665"
+			"@spartan-ng/brain": "0.0.1-alpha.667"
 		}
 	},
 	"progress": {
 		"name": "progress",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.665"
+			"@spartan-ng/brain": "0.0.1-alpha.667"
 		}
 	},
 	"radio-group": {
@@ -334,7 +335,7 @@
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
 			"@angular/forms": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.665",
+			"@spartan-ng/brain": "0.0.1-alpha.667",
 			"clsx": "^2.1.1",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"@angular/common": ">=20.0.0 <22.0.0"
@@ -344,7 +345,7 @@
 		"name": "resizable",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.665"
+			"@spartan-ng/brain": "0.0.1-alpha.667"
 		}
 	},
 	"scroll-area": {
@@ -359,7 +360,7 @@
 			"@angular/core": ">=20.0.0 <22.0.0",
 			"@angular/forms": ">=20.0.0 <22.0.0",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.665",
+			"@spartan-ng/brain": "0.0.1-alpha.667",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
 			"clsx": "^2.1.1"
@@ -369,14 +370,14 @@
 		"name": "separator",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.665"
+			"@spartan-ng/brain": "0.0.1-alpha.667"
 		}
 	},
 	"sheet": {
 		"name": "sheet",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.665",
+			"@spartan-ng/brain": "0.0.1-alpha.667",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
@@ -389,7 +390,7 @@
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.665",
+			"@spartan-ng/brain": "0.0.1-alpha.667",
 			"class-variance-authority": "^0.7.0",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
@@ -408,7 +409,7 @@
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
 			"@angular/forms": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.665"
+			"@spartan-ng/brain": "0.0.1-alpha.667"
 		}
 	},
 	"sonner": {
@@ -418,7 +419,7 @@
 			"@angular/core": ">=20.0.0 <22.0.0",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.665",
+			"@spartan-ng/brain": "0.0.1-alpha.667",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -436,7 +437,7 @@
 			"@angular/core": ">=20.0.0 <22.0.0",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"@angular/forms": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.665",
+			"@spartan-ng/brain": "0.0.1-alpha.667",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -450,7 +451,7 @@
 		"name": "tabs",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.665",
+			"@spartan-ng/brain": "0.0.1-alpha.667",
 			"class-variance-authority": "^0.7.0",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
@@ -464,7 +465,7 @@
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
 			"@angular/forms": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.665",
+			"@spartan-ng/brain": "0.0.1-alpha.667",
 			"class-variance-authority": "^0.7.0"
 		}
 	},
@@ -472,7 +473,7 @@
 		"name": "toggle",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.665",
+			"@spartan-ng/brain": "0.0.1-alpha.667",
 			"class-variance-authority": "^0.7.0"
 		}
 	},
@@ -480,7 +481,7 @@
 		"name": "toggle-group",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.665",
+			"@spartan-ng/brain": "0.0.1-alpha.667",
 			"@angular/cdk": ">=20.0.0 <22.0.0"
 		}
 	},
@@ -488,7 +489,7 @@
 		"name": "tooltip",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.665",
+			"@spartan-ng/brain": "0.0.1-alpha.667",
 			"class-variance-authority": "^0.7.0"
 		}
 	},

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

@@ -1,18 +0,0 @@
-import { Directive } from '@angular/core';
-import { provideIcons } from '@ng-icons/core';
-import { lucideChevronDown } from '@ng-icons/lucide';
-import { provideHlmIconConfig } from '<%- importAlias %>/icon';
-import { classes } from '<%- importAlias %>/utils';
-
-@Directive({
-	selector: 'ng-icon[hlmAccordionIcon], ng-icon[hlmAccIcon]',
-	providers: [provideIcons({ lucideChevronDown }), provideHlmIconConfig({ size: 'sm' })],
-})
-export class HlmAccordionIcon {
-	constructor() {
-		classes(
-			() =>
-				'text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200 group-data-[state=open]:rotate-180',
-		);
-	}
-}