@salesforce/ui-bundle-template-base-angular-app 11.59.2 → 11.62.0

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/shared/spartan/dropdown-menu/src/lib/hlm-dropdown-menu-sub-trigger.ts

@@ -0,0 +1,52 @@
+import { CdkMenuTrigger } from '@angular/cdk/menu';
+import { computed, Directive, effect, forwardRef, inject, input } from '@angular/core';
+import {
+	createMenuPosition,
+	MENU_SIDE,
+	type MenuAlign,
+	type MenuSide,
+} from '@spartan-ng/brain/core';
+import { classes } from '@spartan-ng/styles/utils';
+import { injectHlmDropdownMenuConfig } from './hlm-dropdown-menu-token';
+
+@Directive({
+	selector: '[hlmDropdownMenuSubTrigger]',
+	providers: [{ provide: MENU_SIDE, useExisting: forwardRef(() => HlmDropdownMenuSubTrigger) }],
+	hostDirectives: [
+		{
+			directive: CdkMenuTrigger,
+			inputs: [
+				'cdkMenuTriggerFor: hlmDropdownMenuSubTrigger',
+				'cdkMenuTriggerData: hlmDropdownMenuTriggerData',
+			],
+			outputs: [
+				'cdkMenuOpened: hlmDropdownMenuSubOpened',
+				'cdkMenuClosed: hlmDropdownMenuSubClosed',
+			],
+		},
+	],
+	host: { 'data-slot': 'dropdown-menu-sub-trigger' },
+})
+export class HlmDropdownMenuSubTrigger {
+	private readonly _cdkTrigger = inject(CdkMenuTrigger, { host: true });
+	private readonly _config = injectHlmDropdownMenuConfig();
+
+	public readonly align = input<MenuAlign>(this._config.align);
+	public readonly side = input<MenuSide>(this._config.side);
+
+	private readonly _menuPosition = computed(() => createMenuPosition(this.align(), this.side()));
+
+	constructor() {
+		// CDK sets transform-origin on the submenu content from the resolved position; the content reads it
+		// to animate from the anchored corner and to derive its data-side. Cast tolerates @angular/cdk < 21.2
+		// (we still support >=21.0), where the property is absent and the assignment is a harmless no-op.
+		(this._cdkTrigger as { transformOriginSelector?: string }).transformOriginSelector =
+			'[data-slot="dropdown-menu-sub"]';
+
+		effect(() => {
+			this._cdkTrigger.menuPosition = this._menuPosition();
+		});
+
+		classes(() => 'aria-expanded:bg-accent aria-expanded:text-accent-foreground');
+	}
+}

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/shared/spartan/dropdown-menu/src/lib/hlm-dropdown-menu-sub.ts

@@ -0,0 +1,53 @@
+import { CdkMenu } from '@angular/cdk/menu';
+import { Directive, ElementRef, inject, signal } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import {
+	deriveMenuSideFromTransformOrigin,
+	MENU_SIDE,
+	type MenuSide,
+} from '@spartan-ng/brain/core';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Directive({
+	selector: '[hlmDropdownMenuSub],hlm-dropdown-menu-sub',
+	hostDirectives: [CdkMenu],
+	host: {
+		'data-slot': 'dropdown-menu-sub',
+		'[attr.data-state]': '_state()',
+		'[attr.data-side]': '_side()',
+	},
+})
+export class HlmDropdownMenuSub {
+	private readonly _host = inject(CdkMenu);
+	private readonly _elementRef = inject(ElementRef<HTMLElement>);
+	// The sub-trigger provides its configured side; CDK parents this content's injector under it.
+	private readonly _menuSide = inject(MENU_SIDE, { optional: true });
+
+	protected readonly _state = signal('open');
+	protected readonly _side = signal<MenuSide>(this._menuSide?.side() ?? 'right');
+
+	constructor() {
+		this.setSideFromTransformOrigin();
+		// this is a best effort, but does not seem to work currently
+		// TODO: figure out a way for us to know the host is about to be closed. might not be possible with CDK
+		this._host.closed.pipe(takeUntilDestroyed()).subscribe(() => this._state.set('closed'));
+
+		classes(
+			() =>
+				'motion-safe:data-open:animate-in motion-safe:data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-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 ring-foreground/10 bg-popover text-popover-foreground min-w-[96px] rounded-md p-1 shadow-lg ring-1 duration-100 w-auto',
+		);
+	}
+
+	private setSideFromTransformOrigin() {
+		const side = this._menuSide?.side() ?? 'right';
+		// CDK sets transform-origin on this element synchronously on attach; read it next tick and derive side
+		setTimeout(() => {
+			this._side.set(
+				deriveMenuSideFromTransformOrigin(
+					this._elementRef.nativeElement.style.transformOrigin,
+					side,
+				),
+			);
+		});
+	}
+}

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/shared/spartan/dropdown-menu/src/lib/hlm-dropdown-menu-token.ts

@@ -0,0 +1,26 @@
+import { InjectionToken, type ValueProvider, inject } from '@angular/core';
+import { type MenuAlign, type MenuSide } from '@spartan-ng/brain/core';
+
+export interface HlmDropdownMenuConfig {
+	align: MenuAlign;
+	side: MenuSide;
+}
+
+const defaultConfig: HlmDropdownMenuConfig = {
+	align: 'start',
+	side: 'bottom',
+};
+
+const HlmDropdownMenuConfigToken = new InjectionToken<HlmDropdownMenuConfig>(
+	'HlmDropdownMenuConfig',
+);
+
+export function provideHlmDropdownMenuConfig(
+	config: Partial<HlmDropdownMenuConfig>,
+): ValueProvider {
+	return { provide: HlmDropdownMenuConfigToken, useValue: { ...defaultConfig, ...config } };
+}
+
+export function injectHlmDropdownMenuConfig(): HlmDropdownMenuConfig {
+	return inject(HlmDropdownMenuConfigToken, { optional: true }) ?? defaultConfig;
+}

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/shared/spartan/dropdown-menu/src/lib/hlm-dropdown-menu-trigger.ts

@@ -0,0 +1,46 @@
+import { CdkMenuTrigger } from '@angular/cdk/menu';
+import { computed, Directive, effect, forwardRef, inject, input } from '@angular/core';
+import {
+	createMenuPosition,
+	MENU_SIDE,
+	type MenuAlign,
+	type MenuSide,
+} from '@spartan-ng/brain/core';
+import { injectHlmDropdownMenuConfig } from './hlm-dropdown-menu-token';
+
+@Directive({
+	selector: '[hlmDropdownMenuTrigger]',
+	providers: [{ provide: MENU_SIDE, useExisting: forwardRef(() => HlmDropdownMenuTrigger) }],
+	hostDirectives: [
+		{
+			directive: CdkMenuTrigger,
+			inputs: [
+				'cdkMenuTriggerFor: hlmDropdownMenuTrigger',
+				'cdkMenuTriggerData: hlmDropdownMenuTriggerData',
+			],
+			outputs: ['cdkMenuOpened: hlmDropdownMenuOpened', 'cdkMenuClosed: hlmDropdownMenuClosed'],
+		},
+	],
+	host: { 'data-slot': 'dropdown-menu-trigger' },
+})
+export class HlmDropdownMenuTrigger {
+	private readonly _cdkTrigger = inject(CdkMenuTrigger, { host: true });
+	private readonly _config = injectHlmDropdownMenuConfig();
+
+	public readonly align = input<MenuAlign>(this._config.align);
+	public readonly side = input<MenuSide>(this._config.side);
+
+	private readonly _menuPosition = computed(() => createMenuPosition(this.align(), this.side()));
+
+	constructor() {
+		// CDK sets transform-origin on the menu content from the resolved position; the content reads it to
+		// animate from the anchored corner and to derive its data-side. Cast tolerates @angular/cdk < 21.2
+		// (we still support >=21.0), where the property is absent and the assignment is a harmless no-op.
+		(this._cdkTrigger as { transformOriginSelector?: string }).transformOriginSelector =
+			'[data-slot="dropdown-menu"]';
+
+		effect(() => {
+			this._cdkTrigger.menuPosition = this._menuPosition();
+		});
+	}
+}

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/shared/spartan/dropdown-menu/src/lib/hlm-dropdown-menu.ts

@@ -0,0 +1,57 @@
+import { type NumberInput } from '@angular/cdk/coercion';
+import { CdkMenu } from '@angular/cdk/menu';
+import { Directive, ElementRef, inject, input, numberAttribute, signal } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import {
+	deriveMenuSideFromTransformOrigin,
+	MENU_SIDE,
+	type MenuSide,
+} from '@spartan-ng/brain/core';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Directive({
+	selector: '[hlmDropdownMenu],hlm-dropdown-menu',
+	hostDirectives: [CdkMenu],
+	host: {
+		'data-slot': 'dropdown-menu',
+		'[attr.data-state]': '_state()',
+		'[attr.data-side]': '_side()',
+		'[style.--side-offset]': 'sideOffset()',
+	},
+})
+export class HlmDropdownMenu {
+	private readonly _host = inject(CdkMenu);
+	private readonly _elementRef = inject(ElementRef<HTMLElement>);
+	// The trigger provides its configured side; CDK parents this content's injector under the trigger's.
+	private readonly _menuSide = inject(MENU_SIDE, { optional: true });
+
+	protected readonly _state = signal('open');
+	protected readonly _side = signal<MenuSide>(this._menuSide?.side() ?? 'bottom');
+
+	public readonly sideOffset = input<number, NumberInput>(1, { transform: numberAttribute });
+
+	constructor() {
+		classes(
+			() =>
+				'motion-safe:data-open:animate-in motion-safe:data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-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 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-md p-1 shadow-md ring-1 duration-100 my-[--spacing(var(--side-offset))] overflow-x-hidden overflow-y-auto outline-none',
+		);
+
+		this.setSideFromTransformOrigin();
+		// this is a best effort, but does not seem to work currently
+		// TODO: figure out a way for us to know the host is about to be closed. might not be possible with CDK
+		this._host.closed.pipe(takeUntilDestroyed()).subscribe(() => this._state.set('closed'));
+	}
+
+	private setSideFromTransformOrigin() {
+		const side = this._menuSide?.side() ?? 'bottom';
+		// CDK sets transform-origin on this element synchronously on attach; read it next tick and derive side
+		setTimeout(() => {
+			this._side.set(
+				deriveMenuSideFromTransformOrigin(
+					this._elementRef.nativeElement.style.transformOrigin,
+					side,
+				),
+			);
+		});
+	}
+}

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/shared/spartan/field/src/index.ts

@@ -0,0 +1,34 @@
+import { HlmField } from './lib/hlm-field';
+import { HlmFieldContent } from './lib/hlm-field-content';
+import { HlmFieldDescription } from './lib/hlm-field-description';
+import { HlmFieldError } from './lib/hlm-field-error';
+import { HlmFieldGroup } from './lib/hlm-field-group';
+import { HlmFieldLabel } from './lib/hlm-field-label';
+import { HlmFieldLegend } from './lib/hlm-field-legend';
+import { HlmFieldSeparator } from './lib/hlm-field-separator';
+import { HlmFieldSet } from './lib/hlm-field-set';
+import { HlmFieldTitle } from './lib/hlm-field-title';
+
+export * from './lib/hlm-field';
+export * from './lib/hlm-field-content';
+export * from './lib/hlm-field-description';
+export * from './lib/hlm-field-error';
+export * from './lib/hlm-field-group';
+export * from './lib/hlm-field-label';
+export * from './lib/hlm-field-legend';
+export * from './lib/hlm-field-separator';
+export * from './lib/hlm-field-set';
+export * from './lib/hlm-field-title';
+
+export const HlmFieldImports = [
+	HlmField,
+	HlmFieldContent,
+	HlmFieldDescription,
+	HlmFieldError,
+	HlmFieldGroup,
+	HlmFieldLabel,
+	HlmFieldLegend,
+	HlmFieldSeparator,
+	HlmFieldSet,
+	HlmFieldTitle,
+] as const;

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/shared/spartan/field/src/lib/hlm-field-content.ts

@@ -0,0 +1,12 @@
+import { Directive } from '@angular/core';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Directive({
+	selector: '[hlmFieldContent],hlm-field-content',
+	host: { 'data-slot': 'field-content' },
+})
+export class HlmFieldContent {
+	constructor() {
+		classes(() => 'gap-0.5 group/field-content flex flex-1 flex-col leading-snug');
+	}
+}

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/shared/spartan/field/src/lib/hlm-field-description.ts

@@ -0,0 +1,53 @@
+import { Directive, effect, EffectRef, inject, input, OnDestroy } from '@angular/core';
+import { BrnFieldA11yService } from '@spartan-ng/brain/field';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Directive({
+	selector: '[hlmFieldDescription],hlm-field-description',
+	host: {
+		'data-slot': 'field-description',
+		'[attr.id]': 'id()',
+	},
+})
+export class HlmFieldDescription implements OnDestroy {
+	private static _id = 0;
+
+	private readonly _a11y = inject(BrnFieldA11yService, { optional: true, host: true });
+
+	public readonly id = input<string>(`hlm-field-description-${HlmFieldDescription._id++}`);
+
+	private _registeredId?: string;
+
+	private readonly _cleanup: EffectRef | null = this._a11y
+		? effect(() => {
+				const a11y = this._a11y;
+				if (!a11y) return;
+
+				const id = this.id();
+				if (this._registeredId && this._registeredId !== id) {
+					a11y.unregisterDescription(this._registeredId);
+				}
+
+				if (this._registeredId !== id) {
+					a11y.registerDescription(id);
+					this._registeredId = id;
+				}
+			})
+		: null;
+
+	constructor() {
+		classes(() => [
+			'text-muted-foreground text-start text-sm [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-data-horizontal/field:text-balance',
+			'last:mt-0 nth-last-2:-mt-1',
+			'[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
+		]);
+	}
+
+	ngOnDestroy() {
+		this._cleanup?.destroy();
+
+		if (this._registeredId) {
+			this._a11y?.unregisterDescription(this._registeredId);
+		}
+	}
+}

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/shared/spartan/field/src/lib/hlm-field-error.ts

@@ -0,0 +1,100 @@
+import { BooleanInput } from '@angular/cdk/coercion';
+import {
+	booleanAttribute,
+	ChangeDetectionStrategy,
+	Component,
+	computed,
+	effect,
+	EffectRef,
+	inject,
+	input,
+	OnDestroy,
+} from '@angular/core';
+import { BrnField, BrnFieldA11yService } from '@spartan-ng/brain/field';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Component({
+	selector: 'hlm-field-error',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: {
+		role: 'alert',
+		'data-slot': 'field-error',
+		'[attr.id]': 'id()',
+		'[hidden]': '!_display()',
+	},
+	template: `
+		@if (_display()) {
+			<ng-content />
+		}
+	`,
+})
+export class HlmFieldError implements OnDestroy {
+	private static _id = 0;
+
+	private readonly _field = inject(BrnField, { optional: true });
+	private readonly _a11y = inject(BrnFieldA11yService, { optional: true, host: true });
+
+	private _registeredId?: string | undefined;
+
+	private readonly _hasParentField = !!this._field;
+
+	/** The unique ID for the field error. If none is supplied, it will be auto-generated. */
+	public readonly id = input<string>(`hlm-field-error-${HlmFieldError._id++}`);
+
+	/**
+	 * The name of the specific validator error key to match (e.g. 'required').
+	 * When omitted, the error is shown if any validation error is present.
+	 */
+	public readonly validator = input<string>();
+
+	/** Forces the error message to be visible regardless of the control's validation state. */
+	public readonly forceShow = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
+
+	protected readonly _display = computed(
+		() => !this._hasParentField || this.forceShow() || this._hasError(),
+	);
+
+	protected readonly _hasError = computed(() => {
+		const errors = this._field?.errors();
+		if (!errors) return false;
+
+		const validator = this.validator();
+		const spartanInvalid = this._field?.controlState()?.spartanInvalid;
+
+		if (!spartanInvalid) return false;
+
+		return validator ? validator in errors : Object.keys(errors).length > 0;
+	});
+
+	private readonly _cleanup: EffectRef | null = this._a11y
+		? effect(() => {
+				const a11y = this._a11y;
+				if (!a11y) return;
+
+				const id = this.id();
+				const hasError = this._hasError();
+
+				if (this._registeredId && (this._registeredId !== id || !hasError)) {
+					a11y.unregisterError(this._registeredId);
+					this._registeredId = undefined;
+				}
+
+				if (hasError && this._registeredId !== id) {
+					a11y.registerError(id);
+					this._registeredId = id;
+				}
+			})
+		: null;
+
+	constructor() {
+		classes(() => 'text-destructive text-sm font-normal');
+	}
+
+	ngOnDestroy() {
+		this._cleanup?.destroy();
+
+		if (this._registeredId) {
+			this._a11y?.unregisterError(this._registeredId);
+		}
+	}
+}

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/shared/spartan/field/src/lib/hlm-field-group.ts

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Directive({
+	selector: '[hlmFieldGroup],hlm-field-group',
+	host: { 'data-slot': 'field-group' },
+})
+export class HlmFieldGroup {
+	constructor() {
+		classes(
+			() =>
+				'gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4 group/field-group @container/field-group flex w-full flex-col',
+		);
+	}
+}

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/shared/spartan/field/src/lib/hlm-field-label.ts

@@ -0,0 +1,17 @@
+import { Directive } from '@angular/core';
+import { HlmLabel } from '@spartan-ng/styles/label';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Directive({
+	selector: '[hlmFieldLabel],hlm-field-label',
+	hostDirectives: [HlmLabel],
+	host: { 'data-slot': 'field-label' },
+})
+export class HlmFieldLabel {
+	constructor() {
+		classes(() => [
+			'has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5 group/field-label peer/field-label flex w-fit',
+			'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col',
+		]);
+	}
+}

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/shared/spartan/field/src/lib/hlm-field-legend.ts

@@ -0,0 +1,19 @@
+import { Directive, input } from '@angular/core';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Directive({
+	selector: 'legend[hlmFieldLegend]',
+	host: {
+		'data-slot': 'field-legend',
+		'[attr.data-variant]': 'variant()',
+	},
+})
+export class HlmFieldLegend {
+	public readonly variant = input<'label' | 'legend'>('legend');
+
+	constructor() {
+		classes(
+			() => 'mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base',
+		);
+	}
+}

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/shared/spartan/field/src/lib/hlm-field-separator.ts

@@ -0,0 +1,24 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { HlmSeparator } from '@spartan-ng/styles/separator';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Component({
+	selector: 'hlm-field-separator',
+	imports: [HlmSeparator],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: { 'data-slot': 'field-separator' },
+	template: `
+		<hlm-separator class="absolute inset-0 top-1/2" />
+		<span
+			data-slot="field-separator-content"
+			class="text-muted-foreground px-2 bg-background relative mx-auto block w-fit"
+		>
+			<ng-content />
+		</span>
+	`,
+})
+export class HlmFieldSeparator {
+	constructor() {
+		classes(() => '-my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2 relative');
+	}
+}

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/shared/spartan/field/src/lib/hlm-field-set.ts

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Directive({
+	selector: 'fieldset[hlmFieldSet]',
+	host: { 'data-slot': 'field-set' },
+})
+export class HlmFieldSet {
+	constructor() {
+		classes(
+			() =>
+				'gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col',
+		);
+	}
+}

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/shared/spartan/field/src/lib/hlm-field-title.ts

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Directive({
+	selector: '[hlmFieldTitle],hlm-field-title',
+	host: { 'data-slot': 'field-label' },
+})
+export class HlmFieldTitle {
+	constructor() {
+		classes(
+			() =>
+				'gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50 flex w-fit items-center',
+		);
+	}
+}

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/shared/spartan/field/src/lib/hlm-field.ts

@@ -0,0 +1,47 @@
+import { Directive, input } from '@angular/core';
+import { BrnField } from '@spartan-ng/brain/field';
+import { classes } from '@spartan-ng/styles/utils';
+import { cva, VariantProps } from 'class-variance-authority';
+
+const fieldVariants = cva(
+	'data-[matches-spartan-invalid=true]:text-destructive gap-1.5 group/field flex',
+	{
+		variants: {
+			orientation: {
+				vertical: 'flex-col [&>.sr-only]:w-auto',
+				horizontal: [
+					'flex-row items-center',
+					'*:data-[slot=field-label]:flex-auto',
+					'has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
+				],
+				responsive: [
+					'flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto [&>.sr-only]:w-auto',
+					'@md/field-group:*:data-[slot=field-label]:flex-auto',
+					'@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
+				],
+			},
+		},
+		defaultVariants: {
+			orientation: 'vertical',
+		},
+	},
+);
+
+export type FieldVariants = VariantProps<typeof fieldVariants>;
+
+@Directive({
+	selector: '[hlmField],hlm-field',
+	hostDirectives: [{ directive: BrnField, inputs: ['data-invalid', 'forceInvalid'] }],
+	host: {
+		role: 'group',
+		'data-slot': 'field',
+		'[attr.data-orientation]': 'orientation()',
+	},
+})
+export class HlmField {
+	public readonly orientation = input<FieldVariants['orientation']>('vertical');
+
+	constructor() {
+		classes(() => fieldVariants({ orientation: this.orientation() }));
+	}
+}

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/shared/spartan/input/src/index.ts

@@ -0,0 +1,5 @@
+import { HlmInput } from './lib/hlm-input';
+
+export * from './lib/hlm-input';
+
+export const HlmInputImports = [HlmInput] as const;

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/shared/spartan/input/src/lib/hlm-input.ts

@@ -0,0 +1,21 @@
+import { Directive } from '@angular/core';
+import { BrnFieldControlDescribedBy } from '@spartan-ng/brain/field';
+import { BrnInput } from '@spartan-ng/brain/input';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Directive({
+	selector: '[hlmInput]',
+	hostDirectives: [
+		{ directive: BrnInput, inputs: ['id', 'forceInvalid'] },
+		BrnFieldControlDescribedBy,
+	],
+	host: { 'data-slot': 'input' },
+})
+export class HlmInput {
+	constructor() {
+		classes(
+			() =>
+				'dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 data-[matches-spartan-invalid=true]:ring-destructive/20 dark:data-[matches-spartan-invalid=true]:ring-destructive/40 data-[matches-spartan-invalid=true]:border-destructive dark:data-[matches-spartan-invalid=true]:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 data-[matches-spartan-invalid=true]:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
+		);
+	}
+}

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/shared/spartan/input-group/src/index.ts

@@ -0,0 +1,19 @@
+import { HlmInputGroup } from './lib/hlm-input-group';
+import { HlmInputGroupAddon } from './lib/hlm-input-group-addon';
+import { HlmInputGroupButton } from './lib/hlm-input-group-button';
+import { HlmInputGroupInput } from './lib/hlm-input-group-input';
+import { HlmInputGroupText } from './lib/hlm-input-group-text';
+
+export * from './lib/hlm-input-group';
+export * from './lib/hlm-input-group-addon';
+export * from './lib/hlm-input-group-button';
+export * from './lib/hlm-input-group-input';
+export * from './lib/hlm-input-group-text';
+
+export const HlmInputGroupImports = [
+	HlmInputGroup,
+	HlmInputGroupAddon,
+	HlmInputGroupButton,
+	HlmInputGroupInput,
+	HlmInputGroupText,
+] as const;