@spartan-ng/cli 1.1.2 → 1.2.0-beta.2

package/src/generators/ui/libs/date-picker/files/lib/hlm-date-picker-multi.ts.template

@@ -18,7 +18,7 @@ import { type BrnDatePickerBase, BrnDatePickerTriggerToken, provideBrnDatePicker
 import { BrnFieldControl, provideBrnLabelable } from '@spartan-ng/brain/field';
 import type { ChangeFn, TouchFn } from '@spartan-ng/brain/forms';
 import type { BrnOverlayState } from '@spartan-ng/brain/overlay';
-import { BrnPopover } from '@spartan-ng/brain/popover';
+import { BrnPopover, type BrnPopoverAlign } from '@spartan-ng/brain/popover';
 import { HlmCalendarMulti } from '<%- importAlias %>/calendar';
 import { HlmPopoverImports } from '<%- importAlias %>/popover';
 import { injectHlmDatePickerMultiConfig } from './hlm-date-picker-multi.token';
@@ -41,7 +41,7 @@ export const HLM_DATE_PICKER_MUTLI_VALUE_ACCESSOR = {
 	hostDirectives: [BrnFieldControl],
 	host: { class: 'block' },
 	template: `
-		<hlm-popover sideOffset="5" [state]="_popoverState()" (stateChanged)="_onStateChange($event)">
+		<hlm-popover [align]="align()" sideOffset="5" [state]="_popoverState()" (stateChanged)="_onStateChange($event)">
 			<ng-content />
 
 			<hlm-popover-content class="w-fit p-0" *hlmPopoverPortal="let ctx">
@@ -50,8 +50,8 @@ export const HLM_DATE_PICKER_MUTLI_VALUE_ACCESSOR = {
 					class="rounded-none border-0"
 					[date]="_mutableDate()"
 					[captionLayout]="captionLayout()"
-					[min]="min()"
-					[max]="max()"
+					[min]="minDate()"
+					[max]="maxDate()"
 					[minSelection]="minSelection()"
 					[maxSelection]="maxSelection()"
 					[disabled]="_disabled()"
@@ -69,14 +69,16 @@ export class HlmDatePickerMulti<T> implements BrnDatePickerBase<T[]>, ControlVal
 
 	private readonly _trigger = contentChild(BrnDatePickerTriggerToken);
 
+	public readonly align = input<BrnPopoverAlign>('center');
+
 	/** Show dropdowns to navigate between months or years. */
 	public readonly captionLayout = input<'dropdown' | 'label' | 'dropdown-months' | 'dropdown-years'>('label');
 
 	/** The minimum date that can be selected.*/
-	public readonly min = input<T>();
+	public readonly minDate = input<T>();
 
 	/** The maximum date that can be selected. */
-	public readonly max = input<T>();
+	public readonly maxDate = input<T>();
 
 	/** The minimum selectable dates.  */
 	public readonly minSelection = input<number, NumberInput>(undefined, {

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

@@ -17,7 +17,7 @@ import { type BrnDatePickerBase, BrnDatePickerTriggerToken, provideBrnDatePicker
 import { BrnFieldControl, provideBrnLabelable } from '@spartan-ng/brain/field';
 import type { ChangeFn, TouchFn } from '@spartan-ng/brain/forms';
 import type { BrnOverlayState } from '@spartan-ng/brain/overlay';
-import { BrnPopover } from '@spartan-ng/brain/popover';
+import { BrnPopover, type BrnPopoverAlign } from '@spartan-ng/brain/popover';
 import { HlmCalendar } from '<%- importAlias %>/calendar';
 import { HlmPopoverImports } from '<%- importAlias %>/popover';
 import { injectHlmDatePickerConfig } from './hlm-date-picker.token';
@@ -36,7 +36,7 @@ export const HLM_DATE_PICKER_VALUE_ACCESSOR = {
 	hostDirectives: [BrnFieldControl],
 	host: { class: 'block' },
 	template: `
-		<hlm-popover sideOffset="5" [state]="_popoverState()" (stateChanged)="_onStateChange($event)">
+		<hlm-popover [align]="align()" sideOffset="5" [state]="_popoverState()" (stateChanged)="_onStateChange($event)">
 			<ng-content />
 
 			<hlm-popover-content class="w-fit p-0" *hlmPopoverPortal="let ctx">
@@ -46,8 +46,8 @@ export const HLM_DATE_PICKER_VALUE_ACCESSOR = {
 					[captionLayout]="captionLayout()"
 					[date]="_mutableDate()"
 					[defaultFocusedDate]="_mutableDate() ?? defaultFocusedDate()"
-					[min]="min()"
-					[max]="max()"
+					[min]="minDate()"
+					[max]="maxDate()"
 					[disabled]="_disabled()"
 					(dateChange)="_handleChange($event)"
 				/>
@@ -63,14 +63,16 @@ export class HlmDatePicker<T> implements BrnDatePickerBase<T>, ControlValueAcces
 
 	private readonly _trigger = contentChild(BrnDatePickerTriggerToken);
 
+	public readonly align = input<BrnPopoverAlign>('center');
+
 	/** Show dropdowns to navigate between months or years. */
 	public readonly captionLayout = input<'dropdown' | 'label' | 'dropdown-months' | 'dropdown-years'>('label');
 
-	/** The minimum date that can be selected.*/
-	public readonly min = input<T>();
+	/** The minimum date that can be selected. */
+	public readonly minDate = input<T>();
 
 	/** The maximum date that can be selected. */
-	public readonly max = input<T>();
+	public readonly maxDate = input<T>();
 
 	/** Determine if the date picker is disabled. */
 	public readonly disabled = input<boolean, BooleanInput>(false, {

package/src/generators/ui/libs/date-picker/files/lib/hlm-date-range-input.ts.template

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideCalendar, lucideX } from '@ng-icons/lucide';
 import {
@@ -6,6 +6,7 @@ import {
 	type BrnDatePickerTriggerBase,
 	provideBrnDatePickerTrigger,
 } from '@spartan-ng/brain/date-picker';
+import { BrnFieldControl } from '@spartan-ng/brain/field';
 import { HlmInputGroup, HlmInputGroupImports } from '<%- importAlias %>/input-group';
 import { injectHlmDateRangePickerConfig } from './hlm-date-range-picker.token';
 
@@ -24,6 +25,11 @@ import { injectHlmDateRangePickerConfig } from './hlm-date-range-picker.token';
 			[placeholder]="placeholder()"
 			[disabled]="_disabled()"
 			[forceInvalid]="forceInvalid()"
+			[attr.aria-invalid]="_ariaInvalid()"
+			[attr.data-invalid]="_ariaInvalid()"
+			[attr.data-touched]="_touched?.() ? 'true' : null"
+			[attr.data-dirty]="_dirty?.() ? 'true' : null"
+			[attr.data-matches-spartan-invalid]="_spartanInvalid() ? 'true' : null"
 			(click)="_handleClick()"
 			(keydown.arrowDown)="_open()"
 			(keydown.enter)="_handleEnter($event)"
@@ -58,6 +64,14 @@ import { injectHlmDateRangePickerConfig } from './hlm-date-range-picker.token';
 })
 export class HlmDateRangeInput<T> extends BrnDateInput<[T, T]> implements BrnDatePickerTriggerBase {
 	private readonly _config = injectHlmDateRangePickerConfig<T>();
+	private readonly _fieldControl = inject(BrnFieldControl, { optional: true });
+
+	private readonly _invalid = this._fieldControl?.invalid;
+	protected readonly _spartanInvalid = computed(() => this.forceInvalid() || this._fieldControl?.spartanInvalid());
+	protected readonly _dirty = this._fieldControl?.dirty;
+	protected readonly _touched = this._fieldControl?.touched;
+
+	protected readonly _ariaInvalid = computed(() => (this._invalid?.() ? 'true' : null));
 
 	/**
 	 * Parses input text into a date range. Return `null` for invalid

package/src/generators/ui/libs/date-picker/files/lib/hlm-date-range-picker.ts.template

@@ -18,7 +18,7 @@ import { type BrnDatePickerBase, BrnDatePickerTriggerToken, provideBrnDatePicker
 import { BrnFieldControl, provideBrnLabelable } from '@spartan-ng/brain/field';
 import type { ChangeFn, TouchFn } from '@spartan-ng/brain/forms';
 import type { BrnOverlayState } from '@spartan-ng/brain/overlay';
-import { BrnPopover } from '@spartan-ng/brain/popover';
+import { BrnPopover, type BrnPopoverAlign } from '@spartan-ng/brain/popover';
 import { HlmCalendarRange } from '<%- importAlias %>/calendar';
 import { HlmPopoverImports } from '<%- importAlias %>/popover';
 import { injectHlmDateRangePickerConfig } from './hlm-date-range-picker.token';
@@ -41,7 +41,7 @@ export const HLM_DATE_RANGE_PICKER_VALUE_ACCESSOR = {
 	hostDirectives: [BrnFieldControl],
 	host: { class: 'block' },
 	template: `
-		<hlm-popover sideOffset="5" [state]="_popoverState()" (stateChanged)="_onStateChange($event)">
+		<hlm-popover [align]="align()" sideOffset="5" [state]="_popoverState()" (stateChanged)="_onStateChange($event)">
 			<ng-content />
 
 			<hlm-popover-content class="w-fit p-0" *hlmPopoverPortal="let ctx">
@@ -51,8 +51,8 @@ export const HLM_DATE_RANGE_PICKER_VALUE_ACCESSOR = {
 					[startDate]="_start()"
 					[captionLayout]="captionLayout()"
 					[endDate]="_end()"
-					[min]="min()"
-					[max]="max()"
+					[min]="minDate()"
+					[max]="maxDate()"
 					[disabled]="_disabled()"
 					(startDateChange)="_handleStartDayChange($event)"
 					(endDateChange)="_handleEndDateChange($event)"
@@ -69,14 +69,16 @@ export class HlmDateRangePicker<T> implements BrnDatePickerBase<[T, T]>, Control
 
 	private readonly _trigger = contentChild(BrnDatePickerTriggerToken);
 
+	public readonly align = input<BrnPopoverAlign>('center');
+
 	/** Show dropdowns to navigate between months or years. */
 	public readonly captionLayout = input<'dropdown' | 'label' | 'dropdown-months' | 'dropdown-years'>('label');
 
 	/** The minimum date that can be selected.*/
-	public readonly min = input<T>();
+	public readonly minDate = input<T>();
 
 	/** The maximum date that can be selected. */
-	public readonly max = input<T>();
+	public readonly maxDate = input<T>();
 
 	/** Determine if the date picker is disabled. */
 	public readonly disabled = input<boolean, BooleanInput>(false, {

package/src/generators/ui/libs/date-picker/files/lib/hlm-month-year-input.ts.template

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideCalendar, lucideX } from '@ng-icons/lucide';
 import {
@@ -6,6 +6,7 @@ import {
 	type BrnDatePickerTriggerBase,
 	provideBrnDatePickerTrigger,
 } from '@spartan-ng/brain/date-picker';
+import { BrnFieldControl } from '@spartan-ng/brain/field';
 import { HlmInputGroup, HlmInputGroupImports } from '<%- importAlias %>/input-group';
 import { injectHlmMonthYearPickerConfig } from './hlm-month-year-picker.token';
 
@@ -24,6 +25,11 @@ import { injectHlmMonthYearPickerConfig } from './hlm-month-year-picker.token';
 			[placeholder]="placeholder()"
 			[disabled]="_disabled()"
 			[forceInvalid]="forceInvalid()"
+			[attr.aria-invalid]="_ariaInvalid()"
+			[attr.data-invalid]="_ariaInvalid()"
+			[attr.data-touched]="_touched?.() ? 'true' : null"
+			[attr.data-dirty]="_dirty?.() ? 'true' : null"
+			[attr.data-matches-spartan-invalid]="_spartanInvalid() ? 'true' : null"
 			(click)="_handleClick()"
 			(keydown.arrowDown)="_open()"
 			(keydown.enter)="_handleEnter($event)"
@@ -58,6 +64,14 @@ import { injectHlmMonthYearPickerConfig } from './hlm-month-year-picker.token';
 })
 export class HlmMonthYearInput<T> extends BrnDateInput<T> implements BrnDatePickerTriggerBase {
 	private readonly _config = injectHlmMonthYearPickerConfig<T>();
+	private readonly _fieldControl = inject(BrnFieldControl, { optional: true });
+
+	private readonly _invalid = this._fieldControl?.invalid;
+	protected readonly _spartanInvalid = computed(() => this.forceInvalid() || this._fieldControl?.spartanInvalid());
+	protected readonly _dirty = this._fieldControl?.dirty;
+	protected readonly _touched = this._fieldControl?.touched;
+
+	protected readonly _ariaInvalid = computed(() => (this._invalid?.() ? 'true' : null));
 
 	/**
 	 * Parses input text into a date value. Return `null` for invalid

package/src/generators/ui/libs/date-picker/files/lib/hlm-month-year-picker.ts.template

@@ -17,7 +17,7 @@ import { type BrnDatePickerBase, BrnDatePickerTriggerToken, provideBrnDatePicker
 import { BrnFieldControl, provideBrnLabelable } from '@spartan-ng/brain/field';
 import type { ChangeFn, TouchFn } from '@spartan-ng/brain/forms';
 import type { BrnOverlayState } from '@spartan-ng/brain/overlay';
-import { BrnPopover } from '@spartan-ng/brain/popover';
+import { BrnPopover, type BrnPopoverAlign } from '@spartan-ng/brain/popover';
 import { HlmCalendarImports } from '<%- importAlias %>/calendar';
 import { HlmPopoverImports } from '<%- importAlias %>/popover';
 import { injectHlmMonthYearPickerConfig } from './hlm-month-year-picker.token';
@@ -39,7 +39,7 @@ export const HLM_MONTH_YEAR_PICKER_VALUE_ACCESSOR = {
 	hostDirectives: [BrnFieldControl],
 	host: { class: 'block' },
 	template: `
-		<hlm-popover sideOffset="5" [state]="_popoverState()" (stateChanged)="_onStateChange($event)">
+		<hlm-popover [align]="align()" sideOffset="5" [state]="_popoverState()" (stateChanged)="_onStateChange($event)">
 			<ng-content />
 
 			<hlm-popover-content class="w-fit p-0" *hlmPopoverPortal="let ctx">
@@ -48,8 +48,8 @@ export const HLM_MONTH_YEAR_PICKER_VALUE_ACCESSOR = {
 					class="rounded-none border-0"
 					[date]="_mutableDate()"
 					[defaultFocusedDate]="_mutableDate() ?? defaultFocusedDate()"
-					[min]="min()"
-					[max]="max()"
+					[min]="minDate()"
+					[max]="maxDate()"
 					[disabled]="_disabled()"
 					(dateChange)="_handleChange($event)"
 				/>
@@ -65,11 +65,13 @@ export class HlmMonthYearPicker<T> implements BrnDatePickerBase<T>, ControlValue
 
 	private readonly _trigger = contentChild(BrnDatePickerTriggerToken);
 
+	public readonly align = input<BrnPopoverAlign>('center');
+
 	/** The minimum date that can be selected.*/
-	public readonly min = input<T>();
+	public readonly minDate = input<T>();
 
 	/** The maximum date that can be selected. */
-	public readonly max = input<T>();
+	public readonly maxDate = input<T>();
 
 	/** Determine if the date picker is disabled. */
 	public readonly disabled = input<boolean, BooleanInput>(false, {

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

@@ -1,5 +1,5 @@
-import type { NumberInput } from '@angular/cdk/coercion';
-import { ChangeDetectionStrategy, Component, input, numberAttribute } from '@angular/core';
+import type { BooleanInput, NumberInput } from '@angular/cdk/coercion';
+import { booleanAttribute, ChangeDetectionStrategy, Component, input, numberAttribute } from '@angular/core';
 import { BrnInputOtpSlot } from '@spartan-ng/brain/input-otp';
 import { classes } from '<%- importAlias %>/utils';
 import { HlmInputOtpFakeCaret } from './hlm-input-otp-fake-caret';
@@ -10,7 +10,7 @@ import { HlmInputOtpFakeCaret } from './hlm-input-otp-fake-caret';
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: { 'data-slot': 'input-otp-slot' },
 	template: `
-		<brn-input-otp-slot [index]="index()">
+		<brn-input-otp-slot [index]="index()" [forceInvalid]="forceInvalid()">
 			<hlm-input-otp-fake-caret />
 		</brn-input-otp-slot>
 	`,
@@ -19,6 +19,9 @@ export class HlmInputOtpSlot {
 	/** The index of the slot to render the char or a fake caret */
 	public readonly index = input.required<number, NumberInput>({ transform: numberAttribute });
 
+	/** Whether to force the input into an invalid state. */
+	public readonly forceInvalid = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
+
 	constructor() {
 		classes(
 			() =>

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

@@ -354,7 +354,7 @@
 	}
 
 	.spartan-input-otp-slot {
-		@apply bg-input/50 border-input has-[brn-input-otp-slot[data-active="true"]]:border-ring has-[brn-input-otp-slot[data-active="true"]]:ring-ring/30 has-[brn-input-otp-slot[data-active="true"]]:data-[matches-spartan-invalid=true]:ring-destructive/20 dark:has-[brn-input-otp-slot[data-active="true"]]:data-[matches-spartan-invalid=true]:ring-destructive/40 data-[matches-spartan-invalid=true]:border-destructive size-9 border-y border-e text-sm transition-all outline-none first:rounded-s-3xl first:border-s last:rounded-e-3xl has-[brn-input-otp-slot[data-active="true"]]:ring-3;
+		@apply bg-input/50 border-input has-[brn-input-otp-slot[data-active="true"]]:border-ring has-[brn-input-otp-slot[data-active="true"]]:ring-ring/30 has-[brn-input-otp-slot[data-active="true"]]:has-data-[matches-spartan-invalid=true]:ring-destructive/20 dark:has-[brn-input-otp-slot[data-active="true"]]:has-data-[matches-spartan-invalid=true]:ring-destructive/40 has-data-[matches-spartan-invalid=true]:border-destructive size-9 border-y border-e text-sm transition-all outline-none first:rounded-s-3xl first:border-s last:rounded-e-3xl has-[brn-input-otp-slot[data-active="true"]]:ring-3;
 	}
 
 	.spartan-input-otp-caret-line {

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

@@ -603,11 +603,11 @@
 	}
 
 	.spartan-input-otp-group {
-		@apply data-[matches-spartan-invalid=true]:ring-destructive/20 dark:data-[matches-spartan-invalid=true]:ring-destructive/40 data-[matches-spartan-invalid=true]:border-destructive rounded-none data-[matches-spartan-invalid=true]:ring-1;
+		@apply has-data-[matches-spartan-invalid=true]:ring-destructive/20 dark:has-data-[matches-spartan-invalid=true]:ring-destructive/40 has-data-[matches-spartan-invalid=true]:border-destructive rounded-none has-data-[matches-spartan-invalid=true]:ring-1;
 	}
 
 	.spartan-input-otp-slot {
-		@apply dark:bg-input/30 border-input has-[brn-input-otp-slot[data-active="true"]]:border-ring has-[brn-input-otp-slot[data-active="true"]]:ring-ring/50 has-[brn-input-otp-slot[data-active="true"]]:data-[matches-spartan-invalid=true]:ring-destructive/20 dark:has-[brn-input-otp-slot[data-active="true"]]:data-[matches-spartan-invalid=true]:ring-destructive/40 data-[matches-spartan-invalid=true]:border-destructive has-[brn-input-otp-slot[data-active="true"]]:data-[matches-spartan-invalid=true]:border-destructive size-8 border-y border-e text-xs transition-all outline-none first:rounded-none first:border-s last:rounded-none has-[brn-input-otp-slot[data-active="true"]]:ring-1;
+		@apply dark:bg-input/30 border-input has-[brn-input-otp-slot[data-active="true"]]:border-ring has-[brn-input-otp-slot[data-active="true"]]:ring-ring/50 has-[brn-input-otp-slot[data-active="true"]]:has-data-[matches-spartan-invalid=true]:ring-destructive/20 dark:has-[brn-input-otp-slot[data-active="true"]]:has-data-[matches-spartan-invalid=true]:ring-destructive/40 has-data-[matches-spartan-invalid=true]:border-destructive has-[brn-input-otp-slot[data-active="true"]]:has-data-[matches-spartan-invalid=true]:border-destructive size-8 border-y border-e text-xs transition-all outline-none first:rounded-none first:border-s last:rounded-none has-[brn-input-otp-slot[data-active="true"]]:ring-1;
 	}
 
 	.spartan-input-otp-caret-line {

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

@@ -625,11 +625,11 @@
 	}
 
 	.spartan-input-otp-group {
-		@apply data-[matches-spartan-invalid=true]:ring-destructive/20 dark:data-[matches-spartan-invalid=true]:ring-destructive/40 data-[matches-spartan-invalid=true]:border-destructive rounded-4xl data-[matches-spartan-invalid=true]:ring-[3px];
+		@apply has-data-[matches-spartan-invalid=true]:ring-destructive/20 dark:has-data-[matches-spartan-invalid=true]:ring-destructive/40 has-data-[matches-spartan-invalid=true]:border-destructive rounded-4xl has-data-[matches-spartan-invalid=true]:ring-[3px];
 	}
 
 	.spartan-input-otp-slot {
-		@apply bg-input/30 border-input has-[brn-input-otp-slot[data-active="true"]]:border-ring has-[brn-input-otp-slot[data-active="true"]]:ring-ring/50 has-[brn-input-otp-slot[data-active="true"]]:data-[matches-spartan-invalid=true]:ring-destructive/20 dark:has-[brn-input-otp-slot[data-active="true"]]:data-[matches-spartan-invalid=true]:ring-destructive/40 data-[matches-spartan-invalid=true]:border-destructive has-[brn-input-otp-slot[data-active="true"]]:data-[matches-spartan-invalid=true]:border-destructive size-9 border-y border-e text-sm transition-all outline-none first:rounded-s-4xl first:border-s last:rounded-e-4xl has-[brn-input-otp-slot[data-active="true"]]:ring-[3px];
+		@apply bg-input/30 border-input has-[brn-input-otp-slot[data-active="true"]]:border-ring has-[brn-input-otp-slot[data-active="true"]]:ring-ring/50 has-[brn-input-otp-slot[data-active="true"]]:has-data-[matches-spartan-invalid=true]:ring-destructive/20 dark:has-[brn-input-otp-slot[data-active="true"]]:has-data-[matches-spartan-invalid=true]:ring-destructive/40 has-data-[matches-spartan-invalid=true]:border-destructive has-[brn-input-otp-slot[data-active="true"]]:has-data-[matches-spartan-invalid=true]:border-destructive size-9 border-y border-e text-sm transition-all outline-none first:rounded-s-4xl first:border-s last:rounded-e-4xl has-[brn-input-otp-slot[data-active="true"]]:ring-[3px];
 	}
 
 	.spartan-input-otp-caret-line {

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

@@ -625,11 +625,11 @@
 	}
 
 	.spartan-input-otp-group {
-		@apply data-[matches-spartan-invalid=true]:ring-destructive/20 dark:data-[matches-spartan-invalid=true]:ring-destructive/40 data-[matches-spartan-invalid=true]:border-destructive rounded-md data-[matches-spartan-invalid=true]:ring-2;
+		@apply has-data-[matches-spartan-invalid=true]:ring-destructive/20 dark:has-data-[matches-spartan-invalid=true]:ring-destructive/40 has-data-[matches-spartan-invalid=true]:border-destructive rounded-md has-data-[matches-spartan-invalid=true]:ring-2;
 	}
 
 	.spartan-input-otp-slot {
-		@apply bg-input/20 dark:bg-input/30 border-input has-[brn-input-otp-slot[data-active="true"]]:border-ring has-[brn-input-otp-slot[data-active="true"]]:ring-ring/30 has-[brn-input-otp-slot[data-active="true"]]:data-[matches-spartan-invalid=true]:ring-destructive/20 dark:has-[brn-input-otp-slot[data-active="true"]]:data-[matches-spartan-invalid=true]:ring-destructive/40 data-[matches-spartan-invalid=true]:border-destructive has-[brn-input-otp-slot[data-active="true"]]:data-[matches-spartan-invalid=true]:border-destructive size-7 border-y border-e text-xs/relaxed transition-all outline-none first:rounded-s-md first:border-s last:rounded-e-md has-[brn-input-otp-slot[data-active="true"]]:ring-2;
+		@apply bg-input/20 dark:bg-input/30 border-input has-[brn-input-otp-slot[data-active="true"]]:border-ring has-[brn-input-otp-slot[data-active="true"]]:ring-ring/30 has-[brn-input-otp-slot[data-active="true"]]:has-data-[matches-spartan-invalid=true]:ring-destructive/20 dark:has-[brn-input-otp-slot[data-active="true"]]:has-data-[matches-spartan-invalid=true]:ring-destructive/40 has-data-[matches-spartan-invalid=true]:border-destructive has-[brn-input-otp-slot[data-active="true"]]:has-data-[matches-spartan-invalid=true]:border-destructive size-7 border-y border-e text-xs/relaxed transition-all outline-none first:rounded-s-md first:border-s last:rounded-e-md has-[brn-input-otp-slot[data-active="true"]]:ring-2;
 	}
 
 	.spartan-input-otp-caret-line {

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

@@ -655,11 +655,11 @@
 	}
 
 	.spartan-input-otp-group {
-		@apply data-[matches-spartan-invalid=true]:ring-destructive/20 dark:data-[matches-spartan-invalid=true]:ring-destructive/40 data-[matches-spartan-invalid=true]:border-destructive rounded-lg data-[matches-spartan-invalid=true]:ring-3;
+		@apply has-data-[matches-spartan-invalid=true]:ring-destructive/20 dark:has-data-[matches-spartan-invalid=true]:ring-destructive/40 has-data-[matches-spartan-invalid=true]:border-destructive rounded-lg has-data-[matches-spartan-invalid=true]:ring-3;
 	}
 
 	.spartan-input-otp-slot {
-		@apply dark:bg-input/30 border-input has-[brn-input-otp-slot[data-active="true"]]:border-ring has-[brn-input-otp-slot[data-active="true"]]:ring-ring/50 has-[brn-input-otp-slot[data-active="true"]]:data-[matches-spartan-invalid=true]:ring-destructive/20 dark:has-[brn-input-otp-slot[data-active="true"]]:data-[matches-spartan-invalid=true]:ring-destructive/40 data-[matches-spartan-invalid=true]:border-destructive has-[brn-input-otp-slot[data-active="true"]]:data-[matches-spartan-invalid=true]:border-destructive size-8 border-y border-e text-sm transition-all outline-none first:rounded-s-lg first:border-s last:rounded-e-lg has-[brn-input-otp-slot[data-active="true"]]:ring-3;
+		@apply dark:bg-input/30 border-input has-[brn-input-otp-slot[data-active="true"]]:border-ring has-[brn-input-otp-slot[data-active="true"]]:ring-ring/50 has-[brn-input-otp-slot[data-active="true"]]:has-data-[matches-spartan-invalid=true]:ring-destructive/20 dark:has-[brn-input-otp-slot[data-active="true"]]:has-data-[matches-spartan-invalid=true]:ring-destructive/40 has-data-[matches-spartan-invalid=true]:border-destructive has-[brn-input-otp-slot[data-active="true"]]:has-data-[matches-spartan-invalid=true]:border-destructive size-8 border-y border-e text-sm transition-all outline-none first:rounded-s-lg first:border-s last:rounded-e-lg has-[brn-input-otp-slot[data-active="true"]]:ring-3;
 	}
 
 	.spartan-input-otp-caret-line {

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

@@ -683,11 +683,11 @@
 	}
 
 	.spartan-input-otp-group {
-		@apply data-[matches-spartan-invalid=true]:ring-destructive/20 dark:data-[matches-spartan-invalid=true]:ring-destructive/40 data-[matches-spartan-invalid=true]:border-destructive rounded-md data-[matches-spartan-invalid=true]:ring-3;
+		@apply has-data-[matches-spartan-invalid=true]:ring-destructive/20 dark:has-data-[matches-spartan-invalid=true]:ring-destructive/40 has-data-[matches-spartan-invalid=true]:border-destructive rounded-md has-data-[matches-spartan-invalid=true]:ring-3;
 	}
 
 	.spartan-input-otp-slot {
-		@apply dark:bg-input/30 border-input has-[brn-input-otp-slot[data-active="true"]]:border-ring has-[brn-input-otp-slot[data-active="true"]]:ring-ring/50 has-[brn-input-otp-slot[data-active="true"]]:data-[matches-spartan-invalid=true]:ring-destructive/20 dark:has-[brn-input-otp-slot[data-active="true"]]:data-[matches-spartan-invalid=true]:ring-destructive/40 data-[matches-spartan-invalid=true]:border-destructive has-[brn-input-otp-slot[data-active="true"]]:data-[matches-spartan-invalid=true]:border-destructive size-9 border-y border-e text-sm shadow-xs transition-all outline-none first:rounded-s-md first:border-s last:rounded-e-md has-[brn-input-otp-slot[data-active="true"]]:ring-3;
+		@apply dark:bg-input/30 border-input has-[brn-input-otp-slot[data-active="true"]]:border-ring has-[brn-input-otp-slot[data-active="true"]]:ring-ring/50 has-[brn-input-otp-slot[data-active="true"]]:has-data-[matches-spartan-invalid=true]:ring-destructive/20 dark:has-[brn-input-otp-slot[data-active="true"]]:has-data-[matches-spartan-invalid=true]:ring-destructive/40 has-data-[matches-spartan-invalid=true]:border-destructive has-[brn-input-otp-slot[data-active="true"]]:has-data-[matches-spartan-invalid=true]:border-destructive size-9 border-y border-e text-sm shadow-xs transition-all outline-none first:rounded-s-md first:border-s last:rounded-e-md has-[brn-input-otp-slot[data-active="true"]]:ring-3;
 	}
 
 	.spartan-input-otp-caret-line {