@salesforce/templates 66.13.6 → 66.13.8

package/lib/templates/uiBundles/angularbasic/src/app/shared/dropdown-menu/index.ts

@@ -0,0 +1,49 @@
+import { HlmDropdownMenu } from './hlm-dropdown-menu';
+import { HlmDropdownMenuCheckbox } from './hlm-dropdown-menu-checkbox';
+import { HlmDropdownMenuCheckboxIndicator } from './hlm-dropdown-menu-checkbox-indicator';
+import { HlmDropdownMenuGroup } from './hlm-dropdown-menu-group';
+import { HlmDropdownMenuItem } from './hlm-dropdown-menu-item';
+import { HlmDropdownMenuItemSubIndicator } from './hlm-dropdown-menu-item-sub-indicator';
+import { HlmDropdownMenuLabel } from './hlm-dropdown-menu-label';
+import { HlmDropdownMenuRadio } from './hlm-dropdown-menu-radio';
+import { HlmDropdownMenuRadioIndicator } from './hlm-dropdown-menu-radio-indicator';
+import { HlmDropdownMenuSeparator } from './hlm-dropdown-menu-separator';
+import { HlmDropdownMenuShortcut } from './hlm-dropdown-menu-shortcut';
+import { HlmDropdownMenuSub } from './hlm-dropdown-menu-sub';
+import { HlmDropdownMenuSubTrigger } from './hlm-dropdown-menu-sub-trigger';
+
+import { HlmDropdownMenuTrigger } from './hlm-dropdown-menu-trigger';
+
+export * from './hlm-dropdown-menu';
+export * from './hlm-dropdown-menu-checkbox';
+export * from './hlm-dropdown-menu-checkbox-indicator';
+export * from './hlm-dropdown-menu-focus-on-hover';
+export * from './hlm-dropdown-menu-group';
+export * from './hlm-dropdown-menu-item';
+export * from './hlm-dropdown-menu-item-sub-indicator';
+export * from './hlm-dropdown-menu-label';
+export * from './hlm-dropdown-menu-radio';
+export * from './hlm-dropdown-menu-radio-indicator';
+export * from './hlm-dropdown-menu-separator';
+export * from './hlm-dropdown-menu-shortcut';
+export * from './hlm-dropdown-menu-sub';
+export * from './hlm-dropdown-menu-sub-trigger';
+export * from './hlm-dropdown-menu-token';
+export * from './hlm-dropdown-menu-trigger';
+
+export const HlmDropdownMenuImports = [
+	HlmDropdownMenu,
+	HlmDropdownMenuCheckbox,
+	HlmDropdownMenuCheckboxIndicator,
+	HlmDropdownMenuGroup,
+	HlmDropdownMenuItem,
+	HlmDropdownMenuItemSubIndicator,
+	HlmDropdownMenuLabel,
+	HlmDropdownMenuRadio,
+	HlmDropdownMenuRadioIndicator,
+	HlmDropdownMenuSeparator,
+	HlmDropdownMenuShortcut,
+	HlmDropdownMenuSub,
+	HlmDropdownMenuSubTrigger,
+	HlmDropdownMenuTrigger,
+] as const;

package/lib/templates/uiBundles/angularbasic/src/app/shared/field/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/lib/templates/uiBundles/angularbasic/src/app/shared/field/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/lib/templates/uiBundles/angularbasic/src/app/shared/field/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/lib/templates/uiBundles/angularbasic/src/app/shared/field/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/lib/templates/uiBundles/angularbasic/src/app/shared/field/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/lib/templates/uiBundles/angularbasic/src/app/shared/field/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/lib/templates/uiBundles/angularbasic/src/app/shared/field/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/lib/templates/uiBundles/angularbasic/src/app/shared/field/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/lib/templates/uiBundles/angularbasic/src/app/shared/field/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/lib/templates/uiBundles/angularbasic/src/app/shared/field/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/lib/templates/uiBundles/angularbasic/src/app/shared/field/index.ts

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

package/lib/templates/uiBundles/angularbasic/src/app/shared/input/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/lib/templates/uiBundles/angularbasic/src/app/shared/input/index.ts

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

package/lib/templates/uiBundles/angularbasic/src/app/shared/input-group/hlm-input-group-addon.ts

@@ -0,0 +1,40 @@
+import { Directive, input } from '@angular/core';
+import { classes } from '@spartan-ng/styles/utils';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+const inputGroupAddonVariants = cva(
+	"text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>ng-icon:not([class*='text-'])]:text-[length:--spacing(4)] flex cursor-text items-center justify-center select-none",
+	{
+		variants: {
+			align: {
+				'inline-start': 'ps-2 has-[>button]:ms-[-0.3rem] has-[>kbd]:ms-[-0.15rem] order-first',
+				'inline-end': 'pe-2 has-[>button]:me-[-0.3rem] has-[>kbd]:me-[-0.15rem] order-last',
+				'block-start':
+					'px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start',
+				'block-end':
+					'px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start',
+			},
+		},
+		defaultVariants: {
+			align: 'inline-start',
+		},
+	},
+);
+
+type InputGroupAddonVariants = VariantProps<typeof inputGroupAddonVariants>;
+
+@Directive({
+	selector: '[hlmInputGroupAddon],hlm-input-group-addon',
+	host: {
+		role: 'group',
+		'data-slot': 'input-group-addon',
+		'[attr.data-align]': 'align()',
+	},
+})
+export class HlmInputGroupAddon {
+	public readonly align = input<InputGroupAddonVariants['align']>('inline-start');
+
+	constructor() {
+		classes(() => inputGroupAddonVariants({ align: this.align() }));
+	}
+}

package/lib/templates/uiBundles/angularbasic/src/app/shared/input-group/hlm-input-group-button.ts

@@ -0,0 +1,47 @@
+import { Directive, input } from '@angular/core';
+import { HlmButton, provideBrnButtonConfig } from '@spartan-ng/styles/button';
+import { classes } from '@spartan-ng/styles/utils';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+const inputGroupButtonVariants = cva('gap-2 text-sm flex items-center shadow-none', {
+	variants: {
+		size: {
+			xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>ng-icon:not([class*='text-'])]:text-[length:--spacing(3.5)]",
+			sm: '',
+			'icon-xs': 'size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>ng-icon]:p-0',
+			'icon-sm': 'size-8 p-0 has-[>ng-icon]:p-0',
+		},
+	},
+	defaultVariants: {
+		size: 'xs',
+	},
+});
+
+type InputGroupButtonVariants = VariantProps<typeof inputGroupButtonVariants>;
+
+@Directive({
+	selector: 'button[hlmInputGroupButton]',
+	providers: [
+		provideBrnButtonConfig({
+			variant: 'ghost',
+		}),
+	],
+	hostDirectives: [
+		{
+			directive: HlmButton,
+			inputs: ['variant'],
+		},
+	],
+	host: {
+		'[attr.data-size]': 'size()',
+		'[type]': 'type()',
+	},
+})
+export class HlmInputGroupButton {
+	public readonly size = input<InputGroupButtonVariants['size']>('xs');
+	public readonly type = input<'button' | 'submit' | 'reset'>('button');
+
+	constructor() {
+		classes(() => inputGroupButtonVariants({ size: this.size() }));
+	}
+}

package/lib/templates/uiBundles/angularbasic/src/app/shared/input-group/hlm-input-group-input.ts

@@ -0,0 +1,17 @@
+import { Directive } from '@angular/core';
+import { HlmInput } from '@spartan-ng/styles/input';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Directive({
+	selector: 'input[hlmInputGroupInput]',
+	hostDirectives: [HlmInput],
+	host: { 'data-slot': 'input-group-control' },
+})
+export class HlmInputGroupInput {
+	constructor() {
+		classes(
+			() =>
+				'rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent data-[matches-spartan-invalid=true]:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1',
+		);
+	}
+}

package/lib/templates/uiBundles/angularbasic/src/app/shared/input-group/hlm-input-group-text.ts

@@ -0,0 +1,14 @@
+import { Directive } from '@angular/core';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Directive({
+	selector: '[hlmInputGroupText],hlm-input-group-text',
+})
+export class HlmInputGroupText {
+	constructor() {
+		classes(
+			() =>
+				"text-muted-foreground gap-2 text-sm [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(4)] flex items-center [&_ng-icon]:pointer-events-none",
+		);
+	}
+}

package/lib/templates/uiBundles/angularbasic/src/app/shared/input-group/hlm-input-group.ts

@@ -0,0 +1,18 @@
+import { Directive } from '@angular/core';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Directive({
+	selector: '[hlmInputGroup],hlm-input-group',
+	host: {
+		'data-slot': 'input-group',
+		role: 'group',
+	},
+})
+export class HlmInputGroup {
+	constructor() {
+		classes(
+			() =>
+				'border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][data-matches-spartan-invalid=true]]:ring-destructive/20 has-[[data-slot][data-matches-spartan-invalid=true]]:border-destructive dark:has-[[data-slot][data-matches-spartan-invalid=true]]:ring-destructive/40 has-[[data-slot=input-group-control]:disabled]:bg-input/50 dark:has-[[data-slot=input-group-control]:disabled]:bg-input/80 h-8 rounded-lg border transition-colors in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-[[data-slot=input-group-control]:disabled]:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][data-matches-spartan-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pe-1.5 has-[>[data-align=inline-start]]:[&>input]:ps-1.5 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto',
+		);
+	}
+}

package/lib/templates/uiBundles/angularbasic/src/app/shared/input-group/index.ts

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

package/lib/templates/uiBundles/angularbasic/src/app/shared/label/hlm-label.ts

@@ -0,0 +1,17 @@
+import { Directive } from '@angular/core';
+import { BrnLabel } from '@spartan-ng/brain/label';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Directive({
+	selector: '[hlmLabel]',
+	hostDirectives: [{ directive: BrnLabel, inputs: ['id', 'for'] }],
+	host: { 'data-slot': 'label' },
+})
+export class HlmLabel {
+	constructor() {
+		classes(
+			() =>
+				'gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed',
+		);
+	}
+}

package/lib/templates/uiBundles/angularbasic/src/app/shared/label/index.ts

@@ -0,0 +1,5 @@
+import { HlmLabel } from './hlm-label';
+
+export * from './hlm-label';
+
+export const HlmLabelImports = [HlmLabel] as const;

package/lib/templates/uiBundles/angularbasic/src/app/shared/label/label.html

@@ -0,0 +1,11 @@
+<!-- Label: Spartan Helm demo — mirrors ui/label/label.html usage -->
+<div class="space-y-6 p-4">
+	<div class="space-y-2">
+		<label hlmLabel for="hlm-demo-input-1">Default Label</label>
+		<input id="hlm-demo-input-1" type="text" class="border rounded px-2 py-1 text-sm" />
+	</div>
+
+	<div class="space-y-2">
+		<label hlmLabel>Label without for</label>
+	</div>
+</div>