@spartan-ng/cli 0.0.1-alpha.685 → 0.0.1-alpha.687

package/package.json

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

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

@@ -1,38 +1,17 @@
-import { Directive, input, linkedSignal } from '@angular/core';
+import { Directive } from '@angular/core';
 import { BrnFieldControlDescribedBy } from '@spartan-ng/brain/field';
 import { BrnInput } from '@spartan-ng/brain/input';
 import { classes } from '<%- importAlias %>/utils';
-import { cva, type VariantProps } from 'class-variance-authority';
-
-export const inputVariants = cva(
-	'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-[3px] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
-	{
-		variants: {
-			error: {
-				auto: 'data-[matches-spartan-invalid=true]:border-destructive data-[matches-spartan-invalid=true]:ring-destructive/20 dark:data-[matches-spartan-invalid=true]:ring-destructive/40',
-				true: 'border-destructive focus-visible:border-destructive focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40',
-			},
-		},
-		defaultVariants: {
-			error: 'auto',
-		},
-	},
-);
-type InputVariants = VariantProps<typeof inputVariants>;
 
 @Directive({
 	selector: '[hlmInput]',
-	hostDirectives: [{ directive: BrnInput, inputs: ['id'] }, BrnFieldControlDescribedBy],
+	hostDirectives: [{ directive: BrnInput, inputs: ['id', 'forceInvalid'] }, BrnFieldControlDescribedBy],
 })
 export class HlmInput {
-	/** Controls the error visual state of the input.
-	 * Defaults to 'auto', which infers the state from the associated form control.
-	 */
-	public readonly error = input<InputVariants['error']>('auto');
-
-	protected readonly _state = linkedSignal(() => ({ error: this.error() }));
-
 	constructor() {
-		classes(() => inputVariants({ error: this._state().error }));
+		classes(
+			() =>
+				'spartan-input 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/generators/ui/libs/input-group/files/lib/hlm-input-group-addon.ts.template

@@ -3,15 +3,14 @@ import { classes } from '<%- importAlias %>/utils';
 import { cva, type VariantProps } from 'class-variance-authority';
 
 const inputGroupAddonVariants = cva(
-	"text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>ng-icon:not([class*='text-'])]:text-base",
+	'spartan-input-group-addon flex cursor-text items-center justify-center select-none',
 	{
 		variants: {
 			align: {
-				'inline-start': 'order-first ps-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]',
-				'inline-end': 'order-last pe-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]',
-				'block-start':
-					'order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5 [.border-b]:pb-3',
-				'block-end': 'order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5 [.border-t]:pt-3',
+				'inline-start': 'spartan-input-group-addon-align-inline-start order-first',
+				'inline-end': 'spartan-input-group-addon-align-inline-end order-last',
+				'block-start': 'spartan-input-group-addon-align-block-start order-first w-full justify-start',
+				'block-end': 'spartan-input-group-addon-align-block-end order-last w-full justify-start',
 			},
 		},
 		defaultVariants: {
@@ -23,7 +22,7 @@ const inputGroupAddonVariants = cva(
 type InputGroupAddonVariants = VariantProps<typeof inputGroupAddonVariants>;
 
 @Directive({
-	selector: 'hlm-input-group-addon,[hlmInputGroupAddon]',
+	selector: '[hlmInputGroupAddon],hlm-input-group-addon',
 	host: {
 		role: 'group',
 		'data-slot': 'input-group-addon',

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

@@ -3,13 +3,13 @@ import { HlmButton, provideBrnButtonConfig } from '<%- importAlias %>/button';
 import { classes } from '<%- importAlias %>/utils';
 import { cva, type VariantProps } from 'class-variance-authority';
 
-const inputGroupAddonVariants = cva('flex items-center gap-2 text-sm shadow-none', {
+const inputGroupAddonVariants = cva('spartan-input-group-button flex items-center shadow-none', {
 	variants: {
 		size: {
-			xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>ng-icon]:px-2 [&>ng-icon:not([class*='text-'])]:text-sm",
-			sm: 'h-8 gap-1.5 rounded-md px-2.5 has-[>ng-icon]:px-2.5',
-			'icon-xs': 'size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>ng-icon]:p-0',
-			'icon-sm': 'size-8 p-0 has-[>ng-icon]:p-0',
+			xs: 'spartan-input-group-button-size-xs',
+			sm: 'spartan-input-group-button-size-sm',
+			'icon-xs': 'spartan-input-group-button-size-icon-xs',
+			'icon-sm': 'spartan-input-group-button-size-icon-sm',
 		},
 	},
 	defaultVariants: {

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

@@ -5,12 +5,10 @@ import { classes } from '<%- importAlias %>/utils';
 @Directive({
 	selector: 'input[hlmInputGroupInput]',
 	hostDirectives: [HlmInput],
-	host: {
-		'data-slot': 'input-group-control',
-	},
+	host: { 'data-slot': 'input-group-control' },
 })
 export class HlmInputGroupInput {
 	constructor() {
-		classes(() => `flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent`);
+		classes(() => `spartan-input-group-input flex-1`);
 	}
 }

package/src/generators/ui/libs/input-group/files/lib/hlm-input-group-text.ts.template

@@ -2,13 +2,10 @@ import { Directive } from '@angular/core';
 import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
-	selector: 'span[hlmInputGroupText]',
+	selector: '[hlmInputGroupText],hlm-input-group-text',
 })
 export class HlmInputGroupText {
 	constructor() {
-		classes(
-			() =>
-				`text-muted-foreground flex items-center gap-2 text-sm [&_ng-icon]:pointer-events-none [&_ng-icon:not([class*='text-'])]:text-base`,
-		);
+		classes(() => 'spartan-input-group-text flex items-center [&_ng-icon]:pointer-events-none');
 	}
 }

package/src/generators/ui/libs/input-group/files/lib/hlm-input-group-textarea.ts.template

@@ -5,15 +5,10 @@ import { classes } from '<%- importAlias %>/utils';
 @Directive({
 	selector: 'textarea[hlmInputGroupTextarea]',
 	hostDirectives: [HlmTextarea],
-	host: {
-		'data-slot': 'input-group-control',
-	},
+	host: { 'data-slot': 'input-group-control' },
 })
 export class HlmInputGroupTextarea {
 	constructor() {
-		classes(
-			() =>
-				'flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent',
-		);
+		classes(() => 'spartan-input-group-textarea flex-1 resize-none');
 	}
 }

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

@@ -1,5 +1,4 @@
-import { computed, contentChild, Directive, inject } from '@angular/core';
-import { BrnFieldControl } from '@spartan-ng/brain/field';
+import { Directive } from '@angular/core';
 import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
@@ -10,28 +9,10 @@ import { classes } from '<%- importAlias %>/utils';
 	},
 })
 export class HlmInputGroup {
-	private readonly _fieldControl = inject(BrnFieldControl, { optional: true });
-	private readonly _fieldControlChild = contentChild(BrnFieldControl);
-
-	private readonly _spartanInvalid = computed(() => {
-		if (this._fieldControl) return this._fieldControl.spartanInvalid();
-
-		return this._fieldControlChild()?.spartanInvalid();
-	});
-
 	constructor() {
-		classes(() => [
-			'group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none',
-			'h-9 min-w-0 has-[>textarea]:h-auto',
-			// Variants based on alignment.
-			'has-[>[data-align=inline-start]]:[&>input]:ps-2',
-			'has-[>[data-align=inline-end]]:[&>input]:pe-2',
-			'has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3',
-			'has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3',
-			'has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]',
-			this._spartanInvalid?.()
-				? 'has-[>[data-matches-spartan-invalid=true]]:ring-destructive/20 has-[>[data-matches-spartan-invalid=true]]:border-destructive dark:has-[>[data-matches-spartan-invalid=true]]:ring-destructive/40'
-				: 'has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50',
-		]);
+		classes(
+			() =>
+				'group/input-group spartan-input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto',
+		);
 	}
 }

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

@@ -1,20 +1,17 @@
 import { Directive } from '@angular/core';
-import { HlmInput, inputVariants } from '<%- importAlias %>/input';
+import { HlmInput } from '<%- importAlias %>/input';
 import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: 'input[hlmSidebarInput]',
+	hostDirectives: [HlmInput],
 	host: {
 		'data-slot': 'sidebar-input',
 		'data-sidebar': 'input',
 	},
 })
-export class HlmSidebarInput extends HlmInput {
+export class HlmSidebarInput {
 	constructor() {
-		super();
-		classes(() => [
-			inputVariants({ error: this._state().error }),
-			'bg-background focus-visible:ring-sidebar-ring h-8 w-full shadow-none focus-visible:ring-2',
-		]);
+		classes(() => 'spartan-sidebar-input');
 	}
 }

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

@@ -4,7 +4,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmSidebarSeparator],hlm-sidebar-separator',
-	hostDirectives: [{ directive: HlmSeparator }],
+	hostDirectives: [HlmSeparator],
 	host: {
 		'data-slot': 'sidebar-separator',
 		'data-sidebar': 'separator',
@@ -12,6 +12,6 @@ import { classes } from '<%- importAlias %>/utils';
 })
 export class HlmSidebarSeparator {
 	constructor() {
-		classes(() => 'bg-sidebar-border mx-2 w-auto');
+		classes(() => 'spartan-sidebar-separator w-auto');
 	}
 }

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

@@ -1,39 +1,18 @@
-import { Directive, input } from '@angular/core';
+import { Directive } from '@angular/core';
 import { BrnFieldControlDescribedBy } from '@spartan-ng/brain/field';
 import { BrnTextarea } from '@spartan-ng/brain/textarea';
 import { classes } from '<%- importAlias %>/utils';
-import { cva, type VariantProps } from 'class-variance-authority';
-
-export const textareaVariants = cva(
-	'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 dark:bg-input/30 flex [field-sizing:content] min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
-	{
-		variants: {
-			error: {
-				auto: 'data-[matches-spartan-invalid=true]:border-destructive data-[matches-spartan-invalid=true]:ring-destructive/20 dark:data-[matches-spartan-invalid=true]:ring-destructive/40',
-				true: 'border-destructive focus-visible:border-destructive focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40',
-			},
-		},
-		defaultVariants: {
-			error: 'auto',
-		},
-	},
-);
-type TextareaVariants = VariantProps<typeof textareaVariants>;
 
 @Directive({
 	selector: '[hlmTextarea]',
-	hostDirectives: [{ directive: BrnTextarea, inputs: ['id'] }, BrnFieldControlDescribedBy],
-	host: {
-		'data-slot': 'textarea',
-	},
+	hostDirectives: [{ directive: BrnTextarea, inputs: ['id', 'forceInvalid'] }, BrnFieldControlDescribedBy],
+	host: { 'data-slot': 'textarea' },
 })
 export class HlmTextarea {
-	/** Controls the error visual state of the textarea.
-	 * Defaults to 'auto', which infers the state from the associated form control.
-	 */
-	public readonly error = input<TextareaVariants['error']>('auto');
-
 	constructor() {
-		classes(() => textareaVariants({ error: this.error() }));
+		classes(
+			() =>
+				'spartan-textarea placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50',
+		);
 	}
 }

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

@@ -289,19 +289,19 @@
 
 	/* MARK: Input Group */
 	.spartan-input-group {
-		@apply bg-input/50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/30 has-[[data-slot][data-[matches-spartan-invalid=true]=true]]:ring-destructive/20 has-[[data-slot][data-[matches-spartan-invalid=true]=true]]:border-destructive dark:has-[[data-slot][data-[matches-spartan-invalid=true]=true]]:ring-destructive/40 h-9 rounded-4xl border border-transparent transition-[color,box-shadow,background-color] in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-data-[align=block-end]:rounded-3xl has-data-[align=block-start]:rounded-3xl has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][data-[matches-spartan-invalid=true]=true]]:ring-3 has-[textarea]:rounded-2xl 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;
+		@apply bg-input/50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/30 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 h-9 rounded-4xl border border-transparent transition-[color,box-shadow,background-color] in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-data-[align=block-end]:rounded-3xl has-data-[align=block-start]:rounded-3xl has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][data-matches-spartan-invalid=true]]:ring-3 has-[textarea]:rounded-2xl 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;
 	}
 
 	.spartan-input-group-addon {
-		@apply text-muted-foreground **:data-[slot=kbd]:bg-muted-foreground/10 h-auto gap-2 py-2 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 **:data-[slot=kbd]:rounded-3xl **:data-[slot=kbd]:px-1.5 [&>svg:not([class*='size-'])]:size-4;
+		@apply text-muted-foreground **:data-[slot=kbd]:bg-muted-foreground/10 h-auto gap-2 py-2 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 **:data-[slot=kbd]:rounded-3xl **:data-[slot=kbd]:px-1.5 [&>ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*4)];
 	}
 
 	.spartan-input-group-addon-align-inline-start {
-		@apply ps-3 has-[>button]:-ml-1 has-[>kbd]:-ml-1;
+		@apply ps-3 has-[>button]:-ms-1 has-[>kbd]:-ms-1;
 	}
 
 	.spartan-input-group-addon-align-inline-end {
-		@apply pe-3 has-[>button]:-mr-1 has-[>kbd]:-mr-1;
+		@apply pe-3 has-[>button]:-me-1 has-[>kbd]:-me-1;
 	}
 
 	.spartan-input-group-addon-align-block-start {
@@ -317,7 +317,7 @@
 	}
 
 	.spartan-input-group-button-size-xs {
-		@apply h-6 gap-1 rounded-xl px-1.5 [&>svg:not([class*='size-'])]:size-3.5;
+		@apply h-6 gap-1 rounded-xl px-1.5 [&>ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*3.5)];
 	}
 
 	.spartan-input-group-button-size-icon-xs {

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

@@ -1290,15 +1290,15 @@
 	}
 
 	.spartan-input-group-addon {
-		@apply text-muted-foreground h-auto gap-2 py-1.5 text-xs font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-none [&>svg:not([class*='size-'])]:size-4;
+		@apply text-muted-foreground h-auto gap-2 py-1.5 text-xs font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-none [&>ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*4)];
 	}
 
 	.spartan-input-group-addon-align-inline-start {
-		@apply ps-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem];
+		@apply ps-2 has-[>button]:ms-[-0.3rem] has-[>kbd]:ms-[-0.15rem];
 	}
 
 	.spartan-input-group-addon-align-inline-end {
-		@apply pe-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem];
+		@apply pe-2 has-[>button]:me-[-0.3rem] has-[>kbd]:me-[-0.15rem];
 	}
 
 	.spartan-input-group-addon-align-block-start {
@@ -1314,15 +1314,19 @@
 	}
 
 	.spartan-input-group-button-size-xs {
-		@apply h-6 gap-1 rounded-none px-1.5 [&>svg:not([class*='size-'])]:size-3.5;
+		@apply h-6 gap-1 rounded-none px-1.5 [&>ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*3.5)];
 	}
 
 	.spartan-input-group-button-size-icon-xs {
 		@apply size-6 rounded-none p-0 has-[>ng-icon]:p-0;
 	}
 
+	.spartan-input-group-button-size-sm {
+		@apply gap-1;
+	}
+
 	.spartan-input-group-button-size-icon-sm {
-		@apply size-8 p-0 has-[>ng-icon]:p-0;
+		@apply size-7 p-0 has-[>ng-icon]:p-0;
 	}
 
 	.spartan-input-group-text {

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

@@ -643,7 +643,7 @@
 
 	/* MARK: Input */
 	.spartan-input {
-		@apply 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 h-9 rounded-4xl border px-3 py-1 text-base transition-colors file:h-7 file:text-sm file:font-medium focus-visible:ring-[3px] data-[matches-spartan-invalid=true]:ring-[3px] md:text-sm;
+		@apply 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 h-9 rounded-4xl border px-3 py-1 text-base transition-colors file:h-7 file:text-sm file:font-medium focus-visible:ring-3 data-[matches-spartan-invalid=true]:ring-3 md:text-sm;
 	}
 
 	/* MARK: Input OTP */
@@ -1255,7 +1255,7 @@
 
 	/* MARK: Textarea */
 	.spartan-textarea {
-		@apply border-input bg-input/30 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 resize-none rounded-xl border px-3 py-3 text-base transition-colors focus-visible:ring-[3px] data-[matches-spartan-invalid=true]:ring-[3px] md:text-sm;
+		@apply border-input bg-input/30 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 resize-none rounded-xl border px-3 py-3 text-base transition-colors focus-visible:ring-3 data-[matches-spartan-invalid=true]:ring-3 md:text-sm;
 	}
 
 	/* MARK: Toggle */
@@ -1311,19 +1311,19 @@
 
 	/* MARK: Input Group */
 	.spartan-input-group {
-		@apply border-input 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 h-9 rounded-4xl border transition-colors in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-data-[align=block-end]:rounded-2xl has-data-[align=block-start]:rounded-2xl has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot][data-matches-spartan-invalid=true]]:ring-[3px] has-[textarea]:rounded-xl 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;
+		@apply border-input 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 h-9 rounded-4xl border transition-colors in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-data-[align=block-end]:rounded-2xl has-data-[align=block-start]:rounded-2xl has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][data-matches-spartan-invalid=true]]:ring-3 has-[textarea]:rounded-xl 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;
 	}
 
 	.spartan-input-group-addon {
-		@apply text-muted-foreground **:data-[slot=kbd]:bg-muted-foreground/10 h-auto gap-2 py-2 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 **:data-[slot=kbd]:rounded-4xl **:data-[slot=kbd]:px-1.5 [&>svg:not([class*='size-'])]:size-4;
+		@apply text-muted-foreground **:data-[slot=kbd]:bg-muted-foreground/10 h-auto gap-2 py-2 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 **:data-[slot=kbd]:rounded-4xl **:data-[slot=kbd]:px-1.5 [&>ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*4)];
 	}
 
 	.spartan-input-group-addon-align-inline-start {
-		@apply ps-3 has-[>button]:-ml-1 has-[>kbd]:ml-[-0.15rem];
+		@apply ps-3 has-[>button]:-ms-1 has-[>kbd]:ms-[-0.15rem];
 	}
 
 	.spartan-input-group-addon-align-inline-end {
-		@apply pe-3 has-[>button]:-mr-1 has-[>kbd]:mr-[-0.15rem];
+		@apply pe-3 has-[>button]:-me-1 has-[>kbd]:me-[-0.15rem];
 	}
 
 	.spartan-input-group-addon-align-block-start {
@@ -1339,7 +1339,7 @@
 	}
 
 	.spartan-input-group-button-size-xs {
-		@apply h-6 gap-1 px-1.5 [&>svg:not([class*='size-'])]:size-3.5;
+		@apply h-6 gap-1 px-1.5 [&>ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*3.5)];
 	}
 
 	.spartan-input-group-button-size-icon-xs {

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

@@ -1317,15 +1317,15 @@
 	}
 
 	.spartan-input-group-addon {
-		@apply text-muted-foreground **:data-[slot=kbd]:bg-muted-foreground/10 h-auto gap-1 py-2 text-xs/relaxed font-medium group-data-[disabled=true]/input-group:opacity-50 **:data-[slot=kbd]:rounded-[calc(var(--radius-sm)-2px)] **:data-[slot=kbd]:px-1 **:data-[slot=kbd]:text-[0.625rem] [&>svg:not([class*='size-'])]:size-3.5;
+		@apply text-muted-foreground **:data-[slot=kbd]:bg-muted-foreground/10 h-auto gap-1 py-2 text-xs/relaxed font-medium group-data-[disabled=true]/input-group:opacity-50 **:data-[slot=kbd]:rounded-[calc(var(--radius-sm)-2px)] **:data-[slot=kbd]:px-1 **:data-[slot=kbd]:text-[0.625rem] [&>ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*3.5)];
 	}
 
 	.spartan-input-group-addon-align-inline-start {
-		@apply ps-2 has-[>button]:ml-[-0.275rem] has-[>kbd]:ml-[-0.275rem];
+		@apply ps-2 has-[>button]:ms-[-0.275rem] has-[>kbd]:ms-[-0.275rem];
 	}
 
 	.spartan-input-group-addon-align-inline-end {
-		@apply pe-2 has-[>button]:mr-[-0.275rem] has-[>kbd]:mr-[-0.275rem];
+		@apply pe-2 has-[>button]:me-[-0.275rem] has-[>kbd]:me-[-0.275rem];
 	}
 
 	.spartan-input-group-addon-align-block-start {
@@ -1341,15 +1341,19 @@
 	}
 
 	.spartan-input-group-button-size-xs {
-		@apply h-5 gap-1 rounded-[calc(var(--radius-sm)-2px)] px-1 [&>svg:not([class*='size-'])]:size-3;
+		@apply h-5 gap-1 rounded-[calc(var(--radius-sm)-2px)] px-1 [&>ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*3)];
 	}
 
 	.spartan-input-group-button-size-icon-xs {
 		@apply size-6 p-0 has-[>ng-icon]:p-0;
 	}
 
+	.spartan-input-group-button-size-sm {
+		@apply gap-1;
+	}
+
 	.spartan-input-group-button-size-icon-sm {
-		@apply size-8 p-0 has-[>ng-icon]:p-0;
+		@apply size-7 p-0 has-[>ng-icon]:p-0;
 	}
 
 	.spartan-input-group-text {

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

@@ -1311,19 +1311,19 @@
 
 	/* MARK: Input Group */
 	.spartan-input-group {
-		@apply 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-disabled:bg-input/50 dark:has-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-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;
+		@apply 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;
 	}
 
 	.spartan-input-group-addon {
-		@apply 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)] [&>svg:not([class*='size-'])]:size-4;
+		@apply 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-[calc(var(--spacing)*4)];
 	}
 
 	.spartan-input-group-addon-align-inline-start {
-		@apply ps-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem];
+		@apply ps-2 has-[>button]:ms-[-0.3rem] has-[>kbd]:ms-[-0.15rem];
 	}
 
 	.spartan-input-group-addon-align-inline-end {
-		@apply pe-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem];
+		@apply pe-2 has-[>button]:me-[-0.3rem] has-[>kbd]:me-[-0.15rem];
 	}
 
 	.spartan-input-group-addon-align-block-start {
@@ -1339,7 +1339,7 @@
 	}
 
 	.spartan-input-group-button-size-xs {
-		@apply h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5;
+		@apply h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*3.5)];
 	}
 
 	.spartan-input-group-button-size-icon-xs {

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

@@ -1307,19 +1307,19 @@
 
 	/* MARK: Input Group */
 	&.spartan-input-group {
-		@apply 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 h-9 rounded-md border shadow-xs transition-[color,box-shadow] in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 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]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5;
+		@apply 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 h-9 rounded-md border shadow-xs transition-[color,box-shadow] in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 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;
 	}
 
 	&.spartan-input-group-addon {
-		@apply 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)] [&>svg:not([class*='size-'])]:size-4;
+		@apply 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-[calc(var(--spacing)*4)];
 	}
 
 	&.spartan-input-group-addon-align-inline-start {
-		@apply pl-2 has-[>button]:-ml-1 has-[>kbd]:ml-[-0.15rem];
+		@apply ps-2 has-[>button]:-ms-1 has-[>kbd]:ms-[-0.15rem];
 	}
 
 	&.spartan-input-group-addon-align-inline-end {
-		@apply pr-2 has-[>button]:-mr-1 has-[>kbd]:mr-[-0.15rem];
+		@apply pe-2 has-[>button]:-me-1 has-[>kbd]:me-[-0.15rem];
 	}
 
 	&.spartan-input-group-addon-align-block-start {
@@ -1335,7 +1335,7 @@
 	}
 
 	&.spartan-input-group-button-size-xs {
-		@apply h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5;
+		@apply h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-1.5 [&>ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*3.5)];
 	}
 
 	&.spartan-input-group-button-size-icon-xs {

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

@@ -3,7 +3,7 @@
 		"name": "accordion",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.685",
+			"@spartan-ng/brain": "0.0.1-alpha.687",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
 			"clsx": "^2.1.1"
@@ -20,7 +20,7 @@
 		"name": "alert-dialog",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.685",
+			"@spartan-ng/brain": "0.0.1-alpha.687",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -36,7 +36,7 @@
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
 			"@angular/forms": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.685",
+			"@spartan-ng/brain": "0.0.1-alpha.687",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0"
@@ -46,7 +46,7 @@
 		"name": "avatar",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.685"
+			"@spartan-ng/brain": "0.0.1-alpha.687"
 		}
 	},
 	"badge": {
@@ -70,7 +70,7 @@
 		"name": "button",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.685",
+			"@spartan-ng/brain": "0.0.1-alpha.687",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1"
 		}
@@ -79,7 +79,7 @@
 		"name": "button-group",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.685",
+			"@spartan-ng/brain": "0.0.1-alpha.687",
 			"class-variance-authority": "^0.7.0"
 		}
 	},
@@ -91,7 +91,7 @@
 			"@angular/core": ">=20.0.0 <22.0.0",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.685",
+			"@spartan-ng/brain": "0.0.1-alpha.687",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -119,7 +119,7 @@
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.685",
+			"@spartan-ng/brain": "0.0.1-alpha.687",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -127,7 +127,7 @@
 		"name": "collapsible",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.685"
+			"@spartan-ng/brain": "0.0.1-alpha.687"
 		}
 	},
 	"combobox": {
@@ -135,7 +135,7 @@
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
 			"@angular/forms": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.685",
+			"@spartan-ng/brain": "0.0.1-alpha.687",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
@@ -147,7 +147,7 @@
 		"peerDependencies": {
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.685",
+			"@spartan-ng/brain": "0.0.1-alpha.687",
 			"clsx": "^2.1.1",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0"
@@ -157,7 +157,7 @@
 		"name": "context-menu",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.685",
+			"@spartan-ng/brain": "0.0.1-alpha.687",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"rxjs": "^7.8.0"
 		}
@@ -170,7 +170,7 @@
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.685",
+			"@spartan-ng/brain": "0.0.1-alpha.687",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -178,7 +178,7 @@
 		"name": "dialog",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.685",
+			"@spartan-ng/brain": "0.0.1-alpha.687",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"@angular/common": ">=20.0.0 <22.0.0",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
@@ -194,7 +194,7 @@
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"rxjs": "^7.8.0",
-			"@spartan-ng/brain": "0.0.1-alpha.685"
+			"@spartan-ng/brain": "0.0.1-alpha.687"
 		}
 	},
 	"empty": {
@@ -208,7 +208,7 @@
 		"name": "field",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.685",
+			"@spartan-ng/brain": "0.0.1-alpha.687",
 			"clsx": "^2.1.1",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"class-variance-authority": "^0.7.0"
@@ -218,7 +218,7 @@
 		"name": "hover-card",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.685"
+			"@spartan-ng/brain": "0.0.1-alpha.687"
 		}
 	},
 	"icon": {
@@ -234,16 +234,14 @@
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
 			"@angular/forms": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.685",
-			"class-variance-authority": "^0.7.0"
+			"@spartan-ng/brain": "0.0.1-alpha.687"
 		}
 	},
 	"input-group": {
 		"name": "input-group",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"class-variance-authority": "^0.7.0",
-			"@spartan-ng/brain": "0.0.1-alpha.685"
+			"class-variance-authority": "^0.7.0"
 		}
 	},
 	"input-otp": {
@@ -253,7 +251,7 @@
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.685"
+			"@spartan-ng/brain": "0.0.1-alpha.687"
 		}
 	},
 	"item": {
@@ -261,7 +259,7 @@
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
 			"class-variance-authority": "^0.7.0",
-			"@spartan-ng/brain": "0.0.1-alpha.685"
+			"@spartan-ng/brain": "0.0.1-alpha.687"
 		}
 	},
 	"kbd": {
@@ -274,14 +272,14 @@
 		"name": "label",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.685"
+			"@spartan-ng/brain": "0.0.1-alpha.687"
 		}
 	},
 	"menubar": {
 		"name": "menubar",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.685",
+			"@spartan-ng/brain": "0.0.1-alpha.687",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"rxjs": "^7.8.0"
 		}
@@ -294,7 +292,7 @@
 			"@angular/forms": ">=20.0.0 <22.0.0",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.685",
+			"@spartan-ng/brain": "0.0.1-alpha.687",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -302,7 +300,7 @@
 		"name": "navigation-menu",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.685"
+			"@spartan-ng/brain": "0.0.1-alpha.687"
 		}
 	},
 	"pagination": {
@@ -321,14 +319,14 @@
 		"name": "popover",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.685"
+			"@spartan-ng/brain": "0.0.1-alpha.687"
 		}
 	},
 	"progress": {
 		"name": "progress",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.685"
+			"@spartan-ng/brain": "0.0.1-alpha.687"
 		}
 	},
 	"radio-group": {
@@ -336,7 +334,7 @@
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
 			"@angular/forms": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.685",
+			"@spartan-ng/brain": "0.0.1-alpha.687",
 			"clsx": "^2.1.1",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"@angular/common": ">=20.0.0 <22.0.0"
@@ -346,7 +344,7 @@
 		"name": "resizable",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.685"
+			"@spartan-ng/brain": "0.0.1-alpha.687"
 		}
 	},
 	"scroll-area": {
@@ -361,7 +359,7 @@
 			"@angular/core": ">=20.0.0 <22.0.0",
 			"@angular/forms": ">=20.0.0 <22.0.0",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.685",
+			"@spartan-ng/brain": "0.0.1-alpha.687",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
 			"clsx": "^2.1.1"
@@ -371,14 +369,14 @@
 		"name": "separator",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.685"
+			"@spartan-ng/brain": "0.0.1-alpha.687"
 		}
 	},
 	"sheet": {
 		"name": "sheet",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.685",
+			"@spartan-ng/brain": "0.0.1-alpha.687",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
@@ -391,7 +389,7 @@
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.685",
+			"@spartan-ng/brain": "0.0.1-alpha.687",
 			"class-variance-authority": "^0.7.0",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
@@ -410,7 +408,7 @@
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
 			"@angular/forms": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.685"
+			"@spartan-ng/brain": "0.0.1-alpha.687"
 		}
 	},
 	"sonner": {
@@ -420,7 +418,7 @@
 			"@angular/core": ">=20.0.0 <22.0.0",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.685",
+			"@spartan-ng/brain": "0.0.1-alpha.687",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -438,7 +436,7 @@
 			"@angular/core": ">=20.0.0 <22.0.0",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"@angular/forms": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.685",
+			"@spartan-ng/brain": "0.0.1-alpha.687",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -452,7 +450,7 @@
 		"name": "tabs",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.685",
+			"@spartan-ng/brain": "0.0.1-alpha.687",
 			"class-variance-authority": "^0.7.0",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
@@ -466,15 +464,14 @@
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
 			"@angular/forms": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.685",
-			"class-variance-authority": "^0.7.0"
+			"@spartan-ng/brain": "0.0.1-alpha.687"
 		}
 	},
 	"toggle": {
 		"name": "toggle",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.685",
+			"@spartan-ng/brain": "0.0.1-alpha.687",
 			"class-variance-authority": "^0.7.0"
 		}
 	},
@@ -482,7 +479,7 @@
 		"name": "toggle-group",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.685",
+			"@spartan-ng/brain": "0.0.1-alpha.687",
 			"@angular/cdk": ">=20.0.0 <22.0.0"
 		}
 	},
@@ -490,7 +487,7 @@
 		"name": "tooltip",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.685",
+			"@spartan-ng/brain": "0.0.1-alpha.687",
 			"class-variance-authority": "^0.7.0"
 		}
 	},