@spartan-ng/cli 0.0.1-alpha.506 → 0.0.1-alpha.508

package/src/generators/theme/__snapshots__/generator.spec.ts.snap

@@ -11,10 +11,10 @@ exports[`Theme generator Tailwind v3 should add the gray theme styles to the glo
 
 
 :root {
+color-scheme: light;
+
 --font-sans: ''
-}
 
-:root {
 --background: 0deg 0% 100%;
 --foreground: 224.06deg 72.27% 4.17%;
 --card: 0deg 0% 100%;
@@ -37,6 +37,8 @@ exports[`Theme generator Tailwind v3 should add the gray theme styles to the glo
 }
 
 :root.dark {
+color-scheme: dark;
+
 --background: 224.06deg 72.27% 4.17%;
 --foreground: 344.54deg 18.99% 98.19%;
 --card: 220.99deg 41.69% 11.07%;
@@ -75,10 +77,10 @@ exports[`Theme generator Tailwind v3 should add the neutral theme styles to the
 
 
 :root {
+color-scheme: light;
+
 --font-sans: ''
-}
 
-:root {
 --background: 0deg 0% 100%;
 --foreground: 0deg 0.02% 3.94%;
 --card: 0deg 0% 100%;
@@ -101,6 +103,8 @@ exports[`Theme generator Tailwind v3 should add the neutral theme styles to the
 }
 
 :root.dark {
+color-scheme: dark;
+
 --background: 0deg 0.02% 3.94%;
 --foreground: 0deg 0.5% 98.03%;
 --card: 0deg 0.02% 9.06%;
@@ -139,10 +143,10 @@ exports[`Theme generator Tailwind v3 should add the slate theme styles to the gl
 
 
 :root {
+color-scheme: light;
+
 --font-sans: ''
-}
 
-:root {
 --background: 0deg 0% 100%;
 --foreground: 228.82deg 85.15% 5%;
 --card: 0deg 0% 100%;
@@ -165,6 +169,8 @@ exports[`Theme generator Tailwind v3 should add the slate theme styles to the gl
 }
 
 :root.dark {
+color-scheme: dark;
+
 --background: 228.82deg 85.15% 5%;
 --foreground: 344.69deg 27.87% 98.13%;
 --card: 222.33deg 49.39% 11.3%;
@@ -203,10 +209,10 @@ exports[`Theme generator Tailwind v3 should add the stone theme styles to the gl
 
 
 :root {
+color-scheme: light;
+
 --font-sans: ''
-}
 
-:root {
 --background: 0deg 0% 100%;
 --foreground: 344.17deg 10.1% 4.29%;
 --card: 0deg 0% 100%;
@@ -229,6 +235,8 @@ exports[`Theme generator Tailwind v3 should add the stone theme styles to the gl
 }
 
 :root.dark {
+color-scheme: dark;
+
 --background: 344.17deg 10.1% 4.29%;
 --foreground: 344deg 8.87% 98.11%;
 --card: 344.37deg 6.88% 10.34%;
@@ -266,10 +274,10 @@ exports[`Theme generator Tailwind v3 should add the zinc theme styles to the glo
 
 
 :root {
+color-scheme: light;
+
 --font-sans: ''
-}
 
-:root {
 --background: 0deg 0% 100%;
 --foreground: 344.97deg 13.46% 3.85%;
 --card: 0deg 0% 100%;
@@ -292,6 +300,8 @@ exports[`Theme generator Tailwind v3 should add the zinc theme styles to the glo
 }
 
 :root.dark {
+color-scheme: dark;
+
 --background: 344.97deg 13.46% 3.85%;
 --foreground: 0deg 0.5% 98.03%;
 --card: 344.35deg 7.21% 9.8%;
@@ -326,10 +336,10 @@ exports[`Theme generator Tailwind v4 should add the gray theme styles to the glo
 @import "@spartan-ng/brain/hlm-tailwind-preset.css";
 
 :root {
+color-scheme: light;
+
 --font-sans: ''
-}
 
-:root {
 --background: oklch(1 0 0);
 --foreground: oklch(0.13 0.028 261.692);
 --card: oklch(1 0 0);
@@ -352,6 +362,8 @@ exports[`Theme generator Tailwind v4 should add the gray theme styles to the glo
 }
 
 :root.dark {
+color-scheme: dark;
+
 --background: oklch(0.13 0.028 261.692);
 --foreground: oklch(0.985 0.002 247.839);
 --card: oklch(0.21 0.034 264.665);
@@ -386,10 +398,10 @@ exports[`Theme generator Tailwind v4 should add the neutral theme styles to the
 @import "@spartan-ng/brain/hlm-tailwind-preset.css";
 
 :root {
+color-scheme: light;
+
 --font-sans: ''
-}
 
-:root {
 --background: oklch(1 0 0);
 --foreground: oklch(0.145 0 0);
 --card: oklch(1 0 0);
@@ -412,6 +424,8 @@ exports[`Theme generator Tailwind v4 should add the neutral theme styles to the
 }
 
 :root.dark {
+color-scheme: dark;
+
 --background: oklch(0.145 0 0);
 --foreground: oklch(0.985 0 0);
 --card: oklch(0.205 0 0);
@@ -446,10 +460,10 @@ exports[`Theme generator Tailwind v4 should add the slate theme styles to the gl
 @import "@spartan-ng/brain/hlm-tailwind-preset.css";
 
 :root {
+color-scheme: light;
+
 --font-sans: ''
-}
 
-:root {
 --background: oklch(1 0 0);
 --foreground: oklch(0.129 0.042 264.695);
 --card: oklch(1 0 0);
@@ -472,6 +486,8 @@ exports[`Theme generator Tailwind v4 should add the slate theme styles to the gl
 }
 
 :root.dark {
+color-scheme: dark;
+
 --background: oklch(0.129 0.042 264.695);
 --foreground: oklch(0.984 0.003 247.858);
 --card: oklch(0.208 0.042 265.755);
@@ -506,10 +522,10 @@ exports[`Theme generator Tailwind v4 should add the stone theme styles to the gl
 @import "@spartan-ng/brain/hlm-tailwind-preset.css";
 
 :root {
+color-scheme: light;
+
 --font-sans: ''
-}
 
-:root {
 --background: oklch(1 0 0);
 --foreground: oklch(0.147 0.004 49.25);
 --card: oklch(1 0 0);
@@ -532,6 +548,8 @@ exports[`Theme generator Tailwind v4 should add the stone theme styles to the gl
 }
 
 :root.dark {
+color-scheme: dark;
+
 --background: oklch(0.147 0.004 49.25);
 --foreground: oklch(0.985 0.001 106.423);
 --card: oklch(0.216 0.006 56.043);
@@ -566,10 +584,10 @@ exports[`Theme generator Tailwind v4 should add the zinc theme styles to the glo
 @import "@spartan-ng/brain/hlm-tailwind-preset.css";
 
 :root {
+color-scheme: light;
+
 --font-sans: ''
-}
 
-:root {
 --background: oklch(1 0 0);
 --foreground: oklch(0.141 0.005 285.823);
 --card: oklch(1 0 0);
@@ -592,6 +610,8 @@ exports[`Theme generator Tailwind v4 should add the zinc theme styles to the glo
 }
 
 :root.dark {
+color-scheme: dark;
+
 --background: oklch(0.141 0.005 285.823);
 --foreground: oklch(0.985 0 0);
 --card: oklch(0.21 0.006 285.885);

package/src/generators/theme/libs/add-theme-to-application-styles.js

@@ -31,11 +31,7 @@ function addThemeToApplicationStyles(tree, options, project) {
     const stylesEntryPointContent = tree.read(stylesEntryPoint, 'utf-8');
     const CDK_IMPORT = `@import '@angular/cdk/overlay-prebuilt.css';`;
     const ckdOverlayImport = stylesEntryPointContent.includes(CDK_IMPORT) ? '' : CDK_IMPORT;
-    const rootFontSans = stylesEntryPointContent.includes('--font-sans')
-        ? ''
-        : `:root {
-     --font-sans: ''
-     }`;
+    const fontSans = stylesEntryPointContent.includes('--font-sans') ? '' : `--font-sans: ''`;
     const colorScheme = tailwindVersion === 4 ? colors_1.themes[options.theme].cssVarsV4 : colors_1.themes[options.theme].cssVarsV3;
     tree.write(stylesEntryPoint, (0, devkit_1.stripIndents) `
     ${ckdOverlayImport}
@@ -43,15 +39,19 @@ function addThemeToApplicationStyles(tree, options, project) {
     ${stylesEntryPointContent}
     ${tailwindImport}
 
-    ${rootFontSans}
-
 		:root${prefix} {
+			color-scheme: light;
+
+			${fontSans}
+
 			${Object.entries(colorScheme.light)
         .map(([key, value]) => `--${key}: ${value};`)
         .join('\n')}
 		}
 
 		:root.dark${prefix} {
+			color-scheme: dark;
+			
 			${Object.entries(colorScheme.dark)
         .map(([key, value]) => `--${key}: ${value};`)
         .join('\n')}

package/src/generators/theme/libs/add-theme-to-application-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"add-theme-to-application-styles.js","sourceRoot":"","sources":["../../../../../../../libs/cli/src/generators/theme/libs/add-theme-to-application-styles.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"add-theme-to-application-styles.js","sourceRoot":"","sources":["../../../../../../../libs/cli/src/generators/theme/libs/add-theme-to-application-styles.ts"],"names":[],"mappings":";AAAA,gHAAgH;AAChH,kJAAkJ;;AAelJ,kEA4EC;;AAzFD,uCAA6G;AAE7G,uDAAiC;AACjC,qCAA6C;AAU7C,SAAgB,2BAA2B,CAC1C,IAAU,EACV,OAA2C,EAC3C,OAA6B;IAE7B,MAAM,WAAW,GAAG,IAAA,iBAAQ,EAAc,IAAI,EAAE,cAAc,CAAC,CAAC;IAChE,MAAM,IAAI,GAAG,EAAE,GAAG,WAAW,CAAC,YAAY,EAAE,GAAG,WAAW,CAAC,eAAe,EAAE,CAAC;IAE7E,IAAI,eAAe,GAAG,CAAC,CAAC;IAExB,IAAI,aAAa,IAAI,IAAI,EAAE,CAAC;QAC3B,MAAM,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC;QACpC,eAAe,GAAG,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,KAAK,IAAI,CAAC,CAAC;IACtD,CAAC;IAED,MAAM,cAAc,GAAG,eAAe,KAAK,CAAC,CAAC,CAAC,CAAC,sDAAsD,CAAC,CAAC,CAAC,EAAE,CAAC;IAE3G,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IAC3D,IAAI,gBAAgB,GAAG,OAAO,CAAC,gBAAgB,CAAC;IAEhD,IAAI,gBAAgB,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,EAAE,CAAC;QACxD,MAAM,IAAI,KAAK,CAAC,oCAAoC,gBAAgB,uBAAuB,CAAC,CAAC;IAC9F,CAAC;IAED,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACvB,gBAAgB,GAAG,oBAAoB,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QAEvD,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACvB,MAAM,IAAI,KAAK,CACd,IAAA,qBAAY,EAAA,oDAAoD,OAAO,CAAC,OAAO;iFACF,CAC7E,CAAC;QACH,CAAC;IACF,CAAC;IAED,MAAM,uBAAuB,GAAG,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC,CAAC;IAErE,MAAM,UAAU,GAAG,8CAA8C,CAAC;IAClE,MAAM,gBAAgB,GAAG,uBAAuB,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC;IAExF,MAAM,QAAQ,GAAG,uBAAuB,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,iBAAiB,CAAC;IAE1F,MAAM,WAAW,GAAG,eAAe,KAAK,CAAC,CAAC,CAAC,CAAC,eAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,eAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC;IAE9G,IAAI,CAAC,KAAK,CACT,gBAAgB,EAChB,IAAA,qBAAY,EAAA;MACR,gBAAgB;;MAEhB,uBAAuB;MACvB,cAAc;;SAEX,MAAM;;;KAGV,QAAQ;;KAER,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,KAAK,CAAC;SACjC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,KAAK,GAAG,KAAK,KAAK,GAAG,CAAC;SAC5C,IAAI,CAAC,IAAI,CAAC;;;cAGD,MAAM;;;KAGf,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC;SAChC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,KAAK,GAAG,KAAK,KAAK,GAAG,CAAC;SAC5C,IAAI,CAAC,IAAI,CAAC;;;;;;;MAOT,CACJ,CAAC;AACH,CAAC;AAED,SAAS,oBAAoB,CAAC,IAAU,EAAE,OAA6B;IACtE,+BAA+B;IAC/B,MAAM,yBAAyB,GAAG;QACjC,IAAA,0BAAiB,EAAC,OAAO,CAAC,UAAU,IAAI,OAAO,CAAC,IAAI,EAAE,YAAY,CAAC;QACnE,IAAA,0BAAiB,EAAC,OAAO,CAAC,UAAU,IAAI,OAAO,CAAC,IAAI,EAAE,aAAa,CAAC;QACpE,IAAA,0BAAiB,EAAC,OAAO,CAAC,UAAU,IAAI,OAAO,CAAC,IAAI,EAAE,aAAa,CAAC;QACpE,IAAA,0BAAiB,EAAC,OAAO,CAAC,UAAU,IAAI,OAAO,CAAC,IAAI,EAAE,aAAa,CAAC;KACpE,CAAC;IAEF,MAAM,gBAAgB,GAAG,yBAAyB,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;IAC/E,IAAI,gBAAgB,EAAE,CAAC;QACtB,OAAO,gBAAgB,CAAC;IACzB,CAAC;IAED,8EAA8E;IAC9E,MAAM,MAAM,GAAuD,OAAO,CAAC,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,MAAM,CAAC;IAE1G,IAAI,CAAC,MAAM,EAAE,CAAC;QACb,OAAO,SAAS,CAAC;IAClB,CAAC;IAED,0DAA0D;IAC1D,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAC/B,OAAO,CAAC,KAAK,QAAQ;QACpB,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;QAC9C,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,MAAM,KAAK,KAAK,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CACjF,CAAC;IAEF,IAAI,CAAC,KAAK,EAAE,CAAC;QACZ,OAAO,SAAS,CAAC;IAClB,CAAC;IAED,OAAO,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC;AACxD,CAAC"}

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

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, input } from '@angular/core';
 import { BrnAccordionContent } from '@spartan-ng/brain/accordion';
-import { hlm } from '@spartan-ng/brain/core';
+import { hlm } from '@spartan-ng/helm/utils';
 import type { ClassValue } from 'clsx';
 
 @Component({
@@ -22,6 +22,6 @@ export class HlmAccordionContent extends BrnAccordionContent {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() => {
 		const gridRows = this.state() === 'open' ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]';
-		return hlm('text-sm transition-all grid', gridRows, this.userClass());
+		return hlm('grid text-sm transition-all', gridRows, this.userClass());
 	});
 }

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

@@ -1,8 +1,8 @@
 import { Directive, computed, input } from '@angular/core';
 import { provideIcons } from '@ng-icons/core';
 import { lucideChevronDown } from '@ng-icons/lucide';
-import { hlm } from '@spartan-ng/brain/core';
 import { provideHlmIconConfig } from '@spartan-ng/helm/icon';
+import { hlm } from '@spartan-ng/helm/utils';
 import type { ClassValue } from 'clsx';
 
 @Directive({

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

@@ -1,6 +1,6 @@
 import { Directive, computed, input } from '@angular/core';
 import { BrnAccordionItem } from '@spartan-ng/brain/accordion';
-import { hlm } from '@spartan-ng/brain/core';
+import { hlm } from '@spartan-ng/helm/utils';
 import type { ClassValue } from 'clsx';
 
 @Directive({
@@ -18,6 +18,6 @@ import type { ClassValue } from 'clsx';
 export class HlmAccordionItem {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
-		hlm('flex flex-1 flex-col border-b border-border', this.userClass()),
+		hlm('border-border flex flex-1 flex-col border-b', this.userClass()),
 	);
 }

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

@@ -1,6 +1,6 @@
 import { Directive, computed, input } from '@angular/core';
 import { BrnAccordionTrigger } from '@spartan-ng/brain/accordion';
-import { hlm } from '@spartan-ng/brain/core';
+import { hlm } from '@spartan-ng/helm/utils';
 import type { ClassValue } from 'clsx';
 
 @Directive({
@@ -15,7 +15,7 @@ export class HlmAccordionTrigger {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>[hlmAccIcon]]:rotate-180',
+			'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium outline-none transition-all hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>[hlmAccIcon]]:rotate-180',
 			this.userClass(),
 		),
 	);

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

@@ -1,6 +1,6 @@
 import { Directive, computed, inject, input } from '@angular/core';
 import { BrnAccordion } from '@spartan-ng/brain/accordion';
-import { hlm } from '@spartan-ng/brain/core';
+import { hlm } from '@spartan-ng/helm/utils';
 import type { ClassValue } from 'clsx';
 
 @Directive({

package/src/generators/ui/libs/ui-alert-dialog-helm/files/lib/hlm-alert-dialog-content.ts.template

@@ -1,5 +1,6 @@
 import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, input, signal } from '@angular/core';
-import { hlm, injectExposesStateProvider } from '@spartan-ng/brain/core';
+import { injectExposesStateProvider } from '@spartan-ng/brain/core';
+import { hlm } from '@spartan-ng/helm/utils';
 import type { ClassValue } from 'clsx';
 
 @Component({
@@ -21,7 +22,7 @@ export class HlmAlertDialogContent {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'relative bg-background data-[state=open]:animate-in justify-self-center 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 z-50 grid w-full max-w-[calc(100%-2rem)] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+			'bg-background 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 relative z-50 mx-auto grid w-full max-w-[calc(100%-2rem)] gap-4 rounded-lg border p-6 shadow-lg data-[state=closed]:duration-200 data-[state=open]:duration-200 sm:mx-0 sm:max-w-lg',
 			this.userClass(),
 		),
 	);

package/src/generators/ui/libs/ui-alert-dialog-helm/files/lib/hlm-alert-dialog-description.ts.template

@@ -1,6 +1,6 @@
 import { Directive, computed, input } from '@angular/core';
 import { BrnAlertDialogDescription } from '@spartan-ng/brain/alert-dialog';
-import { hlm } from '@spartan-ng/brain/core';
+import { hlm } from '@spartan-ng/helm/utils';
 import type { ClassValue } from 'clsx';
 
 @Directive({

package/src/generators/ui/libs/ui-alert-dialog-helm/files/lib/hlm-alert-dialog-footer.ts.template

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, input } from '@angular/core';
-import { hlm } from '@spartan-ng/brain/core';
+import { hlm } from '@spartan-ng/helm/utils';
 import type { ClassValue } from 'clsx';
 
 @Component({

package/src/generators/ui/libs/ui-alert-dialog-helm/files/lib/hlm-alert-dialog-header.ts.template

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, input } from '@angular/core';
-import { hlm } from '@spartan-ng/brain/core';
+import { hlm } from '@spartan-ng/helm/utils';
 import type { ClassValue } from 'clsx';
 
 @Component({

package/src/generators/ui/libs/ui-alert-dialog-helm/files/lib/hlm-alert-dialog-overlay.ts.template

@@ -1,5 +1,6 @@
 import { Directive, computed, effect, input, untracked } from '@angular/core';
-import { hlm, injectCustomClassSettable } from '@spartan-ng/brain/core';
+import { injectCustomClassSettable } from '@spartan-ng/brain/core';
+import { hlm } from '@spartan-ng/helm/utils';
 import type { ClassValue } from 'clsx';
 
 @Directive({
@@ -11,7 +12,7 @@ export class HlmAlertDialogOverlay {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+			'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-black/50',
 			this.userClass(),
 		),
 	);

package/src/generators/ui/libs/ui-alert-dialog-helm/files/lib/hlm-alert-dialog-title.ts.template

@@ -1,6 +1,6 @@
 import { Directive, computed, input } from '@angular/core';
 import { BrnAlertDialogTitle } from '@spartan-ng/brain/alert-dialog';
-import { hlm } from '@spartan-ng/brain/core';
+import { hlm } from '@spartan-ng/helm/utils';
 import type { ClassValue } from 'clsx';
 
 @Directive({

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

@@ -1,5 +1,5 @@
 import { Directive, computed, input } from '@angular/core';
-import { hlm } from '@spartan-ng/brain/core';
+import { hlm } from '@spartan-ng/helm/utils';
 import type { ClassValue } from 'clsx';
 
 @Directive({

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

@@ -1,5 +1,5 @@
 import { Directive, computed, input } from '@angular/core';
-import { hlm } from '@spartan-ng/brain/core';
+import { hlm } from '@spartan-ng/helm/utils';
 import type { ClassValue } from 'clsx';
 
 @Directive({

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

@@ -1,16 +1,16 @@
 import { Directive, computed, input } from '@angular/core';
-import { hlm } from '@spartan-ng/brain/core';
+import { hlm } from '@spartan-ng/helm/utils';
 import { type VariantProps, cva } from 'class-variance-authority';
 import type { ClassValue } from 'clsx';
 
 const alertVariants = cva(
-	'relative w-full rounded-lg border px-4 py-3 text-sm has-[>[hlmAlertIcon]]:grid has-[>[hlmAlertIcon]]:grid-cols-[calc(theme(spacing.1)*4)_1fr] has-[>[hlmAlertIcon]]:gap-x-3 gap-y-0.5 items-start [&>[hlmAlertIcon]]:size-4 [&>[hlmAlertIcon]]:translate-y-0.5 [&>[hlmAlertIcon]]:text-current',
+	'relative w-full items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>[hlmAlertIcon]]:grid has-[>[hlmAlertIcon]]:grid-cols-[calc(theme(spacing.1)*4)_1fr] has-[>[hlmAlertIcon]]:gap-x-3 [&>[hlmAlertIcon]]:size-4 [&>[hlmAlertIcon]]:translate-y-0.5 [&>[hlmAlertIcon]]:text-current',
 	{
 		variants: {
 			variant: {
 				default: 'bg-card text-card-foreground',
 				destructive:
-					'text-destructive bg-card [&>[hlmAlertIcon]]:text-current [&>[hlmAlertDescription]]:text-destructive/90 [&>[hlmAlertDesc]]:text-destructive/90',
+					'text-destructive bg-card [&>[hlmAlertDescription]]:text-destructive/90 [&>[hlmAlertDesc]]:text-destructive/90 [&>[hlmAlertIcon]]:text-current',
 			},
 		},
 		defaultVariants: {

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

@@ -1,6 +1,6 @@
 import { type NumberInput, coerceNumberProperty } from '@angular/cdk/coercion';
 import { Directive, computed, input } from '@angular/core';
-import { hlm } from '@spartan-ng/brain/core';
+import { hlm } from '@spartan-ng/helm/utils';
 import type { ClassValue } from 'clsx';
 
 const parseDividedString = (value: NumberInput): NumberInput => {
@@ -34,7 +34,7 @@ export class HlmAspectRatio {
 
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'relative w-full [&>*:first-child]:absolute [&>*:first-child]:w-full [&>*:first-child]:h-full [&>*:first-child]:object-cover',
+			'relative w-full [&>*:first-child]:absolute [&>*:first-child]:h-full [&>*:first-child]:w-full [&>*:first-child]:object-cover',
 			this.userClass(),
 		),
 	);

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

@@ -1,6 +1,6 @@
 import { Directive, computed, inject } from '@angular/core';
 import { BrnAvatarFallback } from '@spartan-ng/brain/avatar';
-import { hlm } from '@spartan-ng/brain/core';
+import { hlm } from '@spartan-ng/helm/utils';
 
 @Directive({
 	selector: '[hlmAvatarFallback]',

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

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, input } from '@angular/core';
 import { BrnAvatar } from '@spartan-ng/brain/avatar';
-import { hlm } from '@spartan-ng/brain/core';
+import { hlm } from '@spartan-ng/helm/utils';
 import type { ClassValue } from 'clsx';
 
 @Component({
@@ -22,6 +22,6 @@ export class HlmAvatar extends BrnAvatar {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 
 	protected readonly _computedClass = computed(() =>
-		hlm('relative flex shrink-0 overflow-hidden rounded-full size-8', this.userClass()),
+		hlm('relative flex size-8 shrink-0 overflow-hidden rounded-full', this.userClass()),
 	);
 }

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

@@ -1,6 +1,6 @@
 import { Directive, computed, inject, input } from '@angular/core';
 import { BrnAvatarImage } from '@spartan-ng/brain/avatar';
-import { hlm } from '@spartan-ng/brain/core';
+import { hlm } from '@spartan-ng/helm/utils';
 import type { ClassValue } from 'clsx';
 
 @Directive({

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

@@ -1,17 +1,17 @@
 import { Directive, computed, input } from '@angular/core';
-import { hlm } from '@spartan-ng/brain/core';
+import { hlm } from '@spartan-ng/helm/utils';
 import { type VariantProps, cva } from 'class-variance-authority';
 import type { ClassValue } from 'clsx';
 
 const badgeVariants = cva(
-	'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&_ng-icon]:size-3 gap-1 [&_ng-icon]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
+	'focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded-md border px-2 py-0.5 text-xs font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&_ng-icon]:pointer-events-none [&_ng-icon]:size-3',
 	{
 		variants: {
 			variant: {
-				default: 'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
-				secondary: 'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
+				default: 'bg-primary text-primary-foreground [a&]:hover:bg-primary/90 border-transparent',
+				secondary: 'bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 border-transparent',
 				destructive:
-					'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+					'bg-destructive [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 border-transparent text-white',
 				outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
 			},
 		},

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

@@ -1,8 +1,8 @@
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideEllipsis } from '@ng-icons/lucide';
-import { hlm } from '@spartan-ng/brain/core';
 import { HlmIcon } from '@spartan-ng/helm/icon';
+import { hlm } from '@spartan-ng/helm/utils';
 import type { ClassValue } from 'clsx';
 
 @Component({

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

@@ -1,5 +1,5 @@
 import { Directive, computed, input } from '@angular/core';
-import { hlm } from '@spartan-ng/brain/core';
+import { hlm } from '@spartan-ng/helm/utils';
 import type { ClassValue } from 'clsx';
 
 @Directive({

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

@@ -1,6 +1,6 @@
 import { Directive, computed, input } from '@angular/core';
 import { RouterLink } from '@angular/router';
-import { hlm } from '@spartan-ng/brain/core';
+import { hlm } from '@spartan-ng/helm/utils';
 import type { ClassValue } from 'clsx';
 
 @Directive({

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

@@ -1,5 +1,5 @@
 import { Directive, computed, input } from '@angular/core';
-import { hlm } from '@spartan-ng/brain/core';
+import { hlm } from '@spartan-ng/helm/utils';
 import type { ClassValue } from 'clsx';
 
 @Directive({
@@ -12,6 +12,6 @@ export class HlmBreadcrumbList {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 
 	protected readonly _computedClass = computed(() =>
-		hlm('text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5', this.userClass()),
+		hlm('text-muted-foreground flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5', this.userClass()),
 	);
 }

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

@@ -1,5 +1,5 @@
 import { Directive, computed, input } from '@angular/core';
-import { hlm } from '@spartan-ng/brain/core';
+import { hlm } from '@spartan-ng/helm/utils';
 import type { ClassValue } from 'clsx';
 
 @Directive({
@@ -14,5 +14,5 @@ import type { ClassValue } from 'clsx';
 export class HlmBreadcrumbPage {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 
-	protected readonly _computedClass = computed(() => hlm('font-normal text-foreground', this.userClass()));
+	protected readonly _computedClass = computed(() => hlm('text-foreground font-normal', this.userClass()));
 }

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

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideChevronRight } from '@ng-icons/lucide';
-import { hlm } from '@spartan-ng/brain/core';
+import { hlm } from '@spartan-ng/helm/utils';
 import type { ClassValue } from 'clsx';
 
 @Component({
@@ -24,5 +24,5 @@ import type { ClassValue } from 'clsx';
 export class HlmBreadcrumbSeparator {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 
-	protected readonly _computedClass = computed(() => hlm('[&_ng-icon]:size-3.5 [&_ng-icon]:block', this.userClass()));
+	protected readonly _computedClass = computed(() => hlm('[&_ng-icon]:block [&_ng-icon]:size-3.5', this.userClass()));
 }

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

@@ -1,5 +1,5 @@
 import { Directive, computed, input } from '@angular/core';
-import { hlm } from '@spartan-ng/brain/core';
+import { hlm } from '@spartan-ng/helm/utils';
 import type { ClassValue } from 'clsx';
 
 @Directive({

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

@@ -1,27 +1,27 @@
 import { Directive, computed, input, signal } from '@angular/core';
 import { BrnButton } from '@spartan-ng/brain/button';
-import { hlm } from '@spartan-ng/brain/core';
+import { hlm } from '@spartan-ng/helm/utils';
 import { type VariantProps, cva } from 'class-variance-authority';
 import type { ClassValue } from 'clsx';
 import { injectBrnButtonConfig } from './hlm-button.token';
 
 export const buttonVariants = cva(
-	'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_ng-icon]:pointer-events-none shrink-0 [&_ng-icon]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive cursor-default',
+	'focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 cursor-default items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-[3px] data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0',
 	{
 		variants: {
 			variant: {
 				default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
 				destructive:
-					'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+					'bg-destructive shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white',
 				outline:
-					'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+					'bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border',
 				secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
 				ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
 				link: 'text-primary underline-offset-4 hover:underline',
 			},
 			size: {
 				default: 'h-9 px-4 py-2 has-[>ng-icon]:px-3',
-				sm: 'h-8 rounded-md gap-1.5 px-3 has-[>ng-icon]:px-2.5',
+				sm: 'h-8 gap-1.5 rounded-md px-3 has-[>ng-icon]:px-2.5',
 				lg: 'h-10 rounded-md px-6 has-[>ng-icon]:px-4',
 				icon: 'size-9',
 			},