@spartan-ng/cli 0.0.1-alpha.678 → 0.0.1-alpha.680

package/generators.json

@@ -55,6 +55,11 @@
 			"schema": "./src/generators/migrate-hlm/schema.json",
 			"description": "Migrate hlm import from @spartan-ng/brain to @spartan-ng/helm/utils"
 		},
+		"migrate-input-id": {
+			"factory": "./src/generators/migrate-input-id/generator",
+			"schema": "./src/generators/migrate-input-id/schema.json",
+			"description": "Migrate renamed Helm id inputs to inputId"
+		},
 		"migrate-icon": {
 			"factory": "./src/generators/migrate-icon/generator",
 			"schema": "./src/generators/migrate-icon/schema.json",
@@ -167,6 +172,11 @@
 			"schema": "./src/generators/migrate-hlm/schema.json",
 			"description": "Migrate hlm import from @spartan-ng/brain to @spartan-ng/helm/utils"
 		},
+		"migrate-input-id": {
+			"factory": "./src/generators/migrate-input-id/compat",
+			"schema": "./src/generators/migrate-input-id/schema.json",
+			"description": "Migrate renamed Helm id inputs to inputId"
+		},
 		"migrate-icon": {
 			"factory": "./src/generators/migrate-icon/compat",
 			"schema": "./src/generators/migrate-icon/schema.json",

package/package.json

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

package/src/generators/healthcheck/generator.js

@@ -23,6 +23,7 @@ const hlm_dialog_1 = require("./healthchecks/hlm-dialog");
 const hlm_dialog_portal_1 = require("./healthchecks/hlm-dialog-portal");
 const hlm_form_field_1 = require("./healthchecks/hlm-form-field");
 const hlm_icon_1 = require("./healthchecks/hlm-icon");
+const hlm_input_id_1 = require("./healthchecks/hlm-input-id");
 const hlm_menu_1 = require("./healthchecks/hlm-menu");
 const hlm_progress_1 = require("./healthchecks/hlm-progress");
 const hlm_scroll_area_1 = require("./healthchecks/hlm-scroll-area");
@@ -48,6 +49,7 @@ async function healthcheckGenerator(tree, options) {
         helm_imports_1.helmImportsHealthcheck,
         naming_conventions_1.namingConventionHealthcheck,
         hlm_date_picker_1.datePickerHealthcheck,
+        hlm_input_id_1.hlmInputIdHealthcheck,
         hlm_progress_1.progressHealthcheck,
         hlm_1.hlmImportHealthcheck,
         brn_separator_1.brainSeparatorHealthcheck,

package/src/generators/healthcheck/generator.js.map

@@ -1 +1 @@
-{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../libs/cli/src/generators/healthcheck/generator.ts"],"names":[],"mappings":";;AAmCA,oDA2DC;AA9FD,uCAA4D;AAC5D,+CAAoD;AACpD,iDAAmH;AACnH,gEAAuE;AACvE,gFAAwF;AACxF,wGAAiG;AACjG,oEAA6E;AAC7E,wDAAiE;AACjE,0DAAiE;AACjE,gEAAyE;AACzE,oGAA6F;AAC7F,0DAAmE;AACnE,sEAA8E;AAC9E,0EAAiF;AACjF,8DAAqE;AACrE,8DAAqE;AACrE,4CAA0D;AAC1D,oEAAuE;AACvE,0DAAkE;AAClE,wEAA+E;AAC/E,kEAAyE;AACzE,sDAA8D;AAC9D,sDAA8D;AAC9D,8DAAkE;AAClE,oEAAuE;AACvE,0DAA8D;AAC9D,kEAAyE;AACzE,0EAAgF;AAChF,kDAA0D;AAC1D,oDAA4D;AAE5D,2CAA4C;AAC5C,+CAA+C;AAC/C,2CAAgD;AAEzC,KAAK,UAAU,oBAAoB,CAAC,IAAU,EAAE,OAA8D;IACpH,eAAM,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAC;IAEvC,MAAM,YAAY,GAAkB;QACnC,4BAAkB;QAClB,uCAAuB;QACvB,qCAAsB;QACtB,8BAAmB;QACnB,uCAAqB;QACrB,iCAAqB;QACrB,8BAAiB;QACjB,8CAA2B;QAC3B,qCAAsB;QACtB,gDAA2B;QAC3B,uCAAqB;QACrB,kCAAmB;QACnB,0BAAoB;QACpB,yCAAyB;QACzB,iEAA6B;QAC7B,6DAA2B;QAC3B,wDAAgC;QAChC,yCAAwB;QACxB,mCAAsB;QACtB,iDAA4B;QAC5B,6CAA2B;QAC3B,8BAAmB;QACnB,kCAAqB;QACrB,+CAA2B;QAC3B,yCAAwB;QACxB,0BAAiB;QACjB,iCAAoB;KACpB,CAAC;IAEF,MAAM,aAAa,GAAwB,EAAE,CAAC;IAE9C,MAAM,WAAW,GAAG,MAAM,IAAA,uBAAc,EAAC,IAAI,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;IAEnE,KAAK,MAAM,WAAW,IAAI,YAAY,EAAE,CAAC;QACxC,MAAM,MAAM,GAAG,MAAM,IAAA,uBAAc,EAAC,IAAI,EAAE,WAAW,EAAE,WAAW,CAAC,CAAC;QACpE,IAAA,sBAAW,EAAC,MAAM,CAAC,CAAC;QAEpB,IAAI,MAAM,CAAC,MAAM,KAAK,gCAAiB,CAAC,OAAO,EAAE,CAAC;YACjD,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAC5B,CAAC;IACF,CAAC;IAED,KAAK,MAAM,MAAM,IAAI,aAAa,EAAE,CAAC;QACpC,IAAI,MAAM,CAAC,OAAO,IAAI,IAAA,mCAAoB,EAAC,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC;YAChE,MAAM,GAAG,GAAG,OAAO,CAAC,OAAO,IAAI,CAAC,MAAM,IAAA,mBAAU,EAAC,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC;YAE7E,IAAI,GAAG,EAAE,CAAC;gBACT,MAAM,MAAM,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,EAAE,EAAE,UAAU,EAAE,OAAO,CAAC,UAAU,EAAE,WAAW,EAAE,CAAC,CAAC;YACrF,CAAC;QACF,CAAC;IACF,CAAC;IAED,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC;QACzB,MAAM,IAAA,oBAAW,EAAC,IAAI,CAAC,CAAC;IACzB,CAAC;AACF,CAAC;AAED,kBAAe,oBAAoB,CAAC"}
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../libs/cli/src/generators/healthcheck/generator.ts"],"names":[],"mappings":";;AAoCA,oDA4DC;AAhGD,uCAA4D;AAC5D,+CAAoD;AACpD,iDAAmH;AACnH,gEAAuE;AACvE,gFAAwF;AACxF,wGAAiG;AACjG,oEAA6E;AAC7E,wDAAiE;AACjE,0DAAiE;AACjE,gEAAyE;AACzE,oGAA6F;AAC7F,0DAAmE;AACnE,sEAA8E;AAC9E,0EAAiF;AACjF,8DAAqE;AACrE,8DAAqE;AACrE,4CAA0D;AAC1D,oEAAuE;AACvE,0DAAkE;AAClE,wEAA+E;AAC/E,kEAAyE;AACzE,sDAA8D;AAC9D,8DAAoE;AACpE,sDAA8D;AAC9D,8DAAkE;AAClE,oEAAuE;AACvE,0DAA8D;AAC9D,kEAAyE;AACzE,0EAAgF;AAChF,kDAA0D;AAC1D,oDAA4D;AAE5D,2CAA4C;AAC5C,+CAA+C;AAC/C,2CAAgD;AAEzC,KAAK,UAAU,oBAAoB,CAAC,IAAU,EAAE,OAA8D;IACpH,eAAM,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAC;IAEvC,MAAM,YAAY,GAAkB;QACnC,4BAAkB;QAClB,uCAAuB;QACvB,qCAAsB;QACtB,8BAAmB;QACnB,uCAAqB;QACrB,iCAAqB;QACrB,8BAAiB;QACjB,8CAA2B;QAC3B,qCAAsB;QACtB,gDAA2B;QAC3B,uCAAqB;QACrB,oCAAqB;QACrB,kCAAmB;QACnB,0BAAoB;QACpB,yCAAyB;QACzB,iEAA6B;QAC7B,6DAA2B;QAC3B,wDAAgC;QAChC,yCAAwB;QACxB,mCAAsB;QACtB,iDAA4B;QAC5B,6CAA2B;QAC3B,8BAAmB;QACnB,kCAAqB;QACrB,+CAA2B;QAC3B,yCAAwB;QACxB,0BAAiB;QACjB,iCAAoB;KACpB,CAAC;IAEF,MAAM,aAAa,GAAwB,EAAE,CAAC;IAE9C,MAAM,WAAW,GAAG,MAAM,IAAA,uBAAc,EAAC,IAAI,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;IAEnE,KAAK,MAAM,WAAW,IAAI,YAAY,EAAE,CAAC;QACxC,MAAM,MAAM,GAAG,MAAM,IAAA,uBAAc,EAAC,IAAI,EAAE,WAAW,EAAE,WAAW,CAAC,CAAC;QACpE,IAAA,sBAAW,EAAC,MAAM,CAAC,CAAC;QAEpB,IAAI,MAAM,CAAC,MAAM,KAAK,gCAAiB,CAAC,OAAO,EAAE,CAAC;YACjD,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAC5B,CAAC;IACF,CAAC;IAED,KAAK,MAAM,MAAM,IAAI,aAAa,EAAE,CAAC;QACpC,IAAI,MAAM,CAAC,OAAO,IAAI,IAAA,mCAAoB,EAAC,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC;YAChE,MAAM,GAAG,GAAG,OAAO,CAAC,OAAO,IAAI,CAAC,MAAM,IAAA,mBAAU,EAAC,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC;YAE7E,IAAI,GAAG,EAAE,CAAC;gBACT,MAAM,MAAM,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,EAAE,EAAE,UAAU,EAAE,OAAO,CAAC,UAAU,EAAE,WAAW,EAAE,CAAC,CAAC;YACrF,CAAC;QACF,CAAC;IACF,CAAC;IAED,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC;QACzB,MAAM,IAAA,oBAAW,EAAC,IAAI,CAAC,CAAC;IACzB,CAAC;AACF,CAAC;AAED,kBAAe,oBAAoB,CAAC"}

package/src/generators/healthcheck/healthchecks/hlm-input-id.d.ts

@@ -0,0 +1,2 @@
+import { type Healthcheck } from '../healthchecks';
+export declare const hlmInputIdHealthcheck: Healthcheck;

package/src/generators/healthcheck/healthchecks/hlm-input-id.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hlmInputIdHealthcheck = void 0;
+const tslib_1 = require("tslib");
+const devkit_1 = require("@nx/devkit");
+const generator_1 = tslib_1.__importDefault(require("../../migrate-input-id/generator"));
+const healthchecks_1 = require("../healthchecks");
+const inputIdSelectors = ['hlm-checkbox', 'hlm-switch', 'hlm-radio', 'hlm-command-input'];
+const legacyInputIdPattern = new RegExp(`<(${inputIdSelectors.join('|')})\\b[^>]*(\\sid\\s*=|\\s\\[id\\]\\s*=|\\sbind-id\\s*=)`);
+exports.hlmInputIdHealthcheck = {
+    name: 'Helm input id rename',
+    async detect(tree, failure) {
+        (0, devkit_1.visitNotIgnoredFiles)(tree, '/', (file) => {
+            if (!file.endsWith('.ts') && !file.endsWith('.html')) {
+                return;
+            }
+            const contents = tree.read(file, 'utf-8');
+            if (!contents) {
+                return;
+            }
+            if (legacyInputIdPattern.test(contents)) {
+                failure('Helm components are using the renamed id input.', healthchecks_1.HealthcheckSeverity.Error, true);
+            }
+        });
+    },
+    fix: async (tree) => {
+        await (0, generator_1.default)(tree, { skipFormat: true });
+        return true;
+    },
+    prompt: 'Would you like to migrate renamed Helm id inputs?',
+};
+//# sourceMappingURL=hlm-input-id.js.map

package/src/generators/healthcheck/healthchecks/hlm-input-id.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hlm-input-id.js","sourceRoot":"","sources":["../../../../../../../libs/cli/src/generators/healthcheck/healthchecks/hlm-input-id.ts"],"names":[],"mappings":";;;;AAAA,uCAAkD;AAClD,yFAAuE;AACvE,kDAAwE;AAExE,MAAM,gBAAgB,GAAG,CAAC,cAAc,EAAE,YAAY,EAAE,WAAW,EAAE,mBAAmB,CAAC,CAAC;AAC1F,MAAM,oBAAoB,GAAG,IAAI,MAAM,CACtC,KAAK,gBAAgB,CAAC,IAAI,CAAC,GAAG,CAAC,wDAAwD,CACvF,CAAC;AAEW,QAAA,qBAAqB,GAAgB;IACjD,IAAI,EAAE,sBAAsB;IAC5B,KAAK,CAAC,MAAM,CAAC,IAAI,EAAE,OAAO;QACzB,IAAA,6BAAoB,EAAC,IAAI,EAAE,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;YACxC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC;gBACtD,OAAO;YACR,CAAC;YAED,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;YAE1C,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACf,OAAO;YACR,CAAC;YAED,IAAI,oBAAoB,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;gBACzC,OAAO,CAAC,iDAAiD,EAAE,kCAAmB,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;YAC7F,CAAC;QACF,CAAC,CAAC,CAAC;IACJ,CAAC;IACD,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE;QACnB,MAAM,IAAA,mBAAuB,EAAC,IAAI,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;QAC1D,OAAO,IAAI,CAAC;IACb,CAAC;IACD,MAAM,EAAE,mDAAmD;CAC3D,CAAC"}

package/src/generators/migrate-input-id/compat.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (generatorOptions: import("./schema").MigrateInputIdGeneratorSchema) => (tree: any, context: any) => Promise<any>;
+export default _default;

package/src/generators/migrate-input-id/compat.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const devkit_1 = require("@nx/devkit");
+const generator_1 = tslib_1.__importDefault(require("./generator"));
+exports.default = (0, devkit_1.convertNxGenerator)(generator_1.default);
+//# sourceMappingURL=compat.js.map

package/src/generators/migrate-input-id/compat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"compat.js","sourceRoot":"","sources":["../../../../../../libs/cli/src/generators/migrate-input-id/compat.ts"],"names":[],"mappings":";;;AAAA,uCAAgD;AAChD,oEAAkD;AAElD,kBAAe,IAAA,2BAAkB,EAAC,mBAAuB,CAAC,CAAC"}

package/src/generators/migrate-input-id/generator.d.ts

@@ -0,0 +1,4 @@
+import { type Tree } from '@nx/devkit';
+import type { MigrateInputIdGeneratorSchema } from './schema';
+export declare function migrateInputIdGenerator(tree: Tree, { skipFormat }: MigrateInputIdGeneratorSchema): Promise<void>;
+export default migrateInputIdGenerator;

package/src/generators/migrate-input-id/generator.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.migrateInputIdGenerator = migrateInputIdGenerator;
+const devkit_1 = require("@nx/devkit");
+const visit_files_1 = require("../../utils/visit-files");
+const inputIdSelectors = ['hlm-checkbox', 'hlm-switch', 'hlm-radio', 'hlm-command-input'];
+const inputIdTagPattern = new RegExp(`<(${inputIdSelectors.join('|')})\\b[^>]*>`, 'g');
+async function migrateInputIdGenerator(tree, { skipFormat }) {
+    replaceLegacyInputIds(tree);
+    if (!skipFormat) {
+        await (0, devkit_1.formatFiles)(tree);
+    }
+}
+function replaceLegacyInputIds(tree) {
+    (0, visit_files_1.visitFiles)(tree, '.', (path) => {
+        if (!path.endsWith('.html') && !path.endsWith('.ts')) {
+            return;
+        }
+        let content = tree.read(path, 'utf-8');
+        if (!content) {
+            return;
+        }
+        inputIdTagPattern.lastIndex = 0;
+        content = content.replace(inputIdTagPattern, (tag) => renameLegacyIdInputs(tag));
+        tree.write(path, content);
+    });
+}
+function renameLegacyIdInputs(tag) {
+    return tag
+        .replace(/(\s)\[id\](\s*=)/g, '$1[inputId]$2')
+        .replace(/(\s)bind-id(\s*=)/g, '$1bind-inputId$2')
+        .replace(/(\s)id(\s*=)/g, '$1inputId$2');
+}
+exports.default = migrateInputIdGenerator;
+//# sourceMappingURL=generator.js.map

package/src/generators/migrate-input-id/generator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../libs/cli/src/generators/migrate-input-id/generator.ts"],"names":[],"mappings":";;AAOA,0DAMC;AAbD,uCAAoD;AACpD,yDAAqD;AAGrD,MAAM,gBAAgB,GAAG,CAAC,cAAc,EAAE,YAAY,EAAE,WAAW,EAAE,mBAAmB,CAAC,CAAC;AAC1F,MAAM,iBAAiB,GAAG,IAAI,MAAM,CAAC,KAAK,gBAAgB,CAAC,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE,GAAG,CAAC,CAAC;AAEhF,KAAK,UAAU,uBAAuB,CAAC,IAAU,EAAE,EAAE,UAAU,EAAiC;IACtG,qBAAqB,CAAC,IAAI,CAAC,CAAC;IAE5B,IAAI,CAAC,UAAU,EAAE,CAAC;QACjB,MAAM,IAAA,oBAAW,EAAC,IAAI,CAAC,CAAC;IACzB,CAAC;AACF,CAAC;AAED,SAAS,qBAAqB,CAAC,IAAU;IACxC,IAAA,wBAAU,EAAC,IAAI,EAAE,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;QAC9B,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC;YACtD,OAAO;QACR,CAAC;QAED,IAAI,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QAEvC,IAAI,CAAC,OAAO,EAAE,CAAC;YACd,OAAO;QACR,CAAC;QAED,iBAAiB,CAAC,SAAS,GAAG,CAAC,CAAC;QAChC,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,iBAAiB,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,oBAAoB,CAAC,GAAG,CAAC,CAAC,CAAC;QAEjF,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IAC3B,CAAC,CAAC,CAAC;AACJ,CAAC;AAED,SAAS,oBAAoB,CAAC,GAAW;IACxC,OAAO,GAAG;SACR,OAAO,CAAC,mBAAmB,EAAE,eAAe,CAAC;SAC7C,OAAO,CAAC,oBAAoB,EAAE,kBAAkB,CAAC;SACjD,OAAO,CAAC,eAAe,EAAE,aAAa,CAAC,CAAC;AAC3C,CAAC;AAED,kBAAe,uBAAuB,CAAC"}

package/src/generators/migrate-input-id/schema.d.ts

@@ -0,0 +1,3 @@
+export interface MigrateInputIdGeneratorSchema {
+	skipFormat?: boolean;
+}

package/src/generators/migrate-input-id/schema.json

@@ -0,0 +1,14 @@
+{
+	"$schema": "http://json-schema.org/draft-07/schema",
+	"$id": "MigrateInputId",
+	"title": "",
+	"type": "object",
+	"properties": {
+		"skipFormat": {
+			"type": "boolean",
+			"default": false,
+			"description": "Skip formatting files"
+		}
+	},
+	"required": []
+}

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

@@ -0,0 +1,19 @@
+import { inject, InjectionToken, type ValueProvider } from '@angular/core';
+
+export type HlmCardConfig = {
+	size: 'sm' | 'default';
+};
+
+const defaultConfig: HlmCardConfig = {
+	size: 'default',
+};
+
+const HlmCardConfigToken = new InjectionToken<HlmCardConfig>('HlmCardConfig');
+
+export function provideHlmCardConfig(config: Partial<HlmCardConfig>): ValueProvider {
+	return { provide: HlmCardConfigToken, useValue: { ...defaultConfig, ...config } };
+}
+
+export function injectHlmCardConfig(): HlmCardConfig {
+	return inject(HlmCardConfigToken, { optional: true }) ?? defaultConfig;
+}

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

@@ -1,5 +1,6 @@
 import { Directive, input } from '@angular/core';
 import { classes } from '<%- importAlias %>/utils';
+import { HlmCardConfig, injectHlmCardConfig } from './hlm-card.token';
 
 @Directive({
 	selector: '[hlmCard],hlm-card',
@@ -9,7 +10,8 @@ import { classes } from '<%- importAlias %>/utils';
 	},
 })
 export class HlmCard {
-	public readonly size = input<'sm' | 'default'>('default');
+	private readonly _defaultConfig = injectHlmCardConfig();
+	public readonly size = input<HlmCardConfig['size']>(this._defaultConfig.size);
 
 	constructor() {
 		classes(() => 'spartan-card group/card flex flex-col');

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

@@ -37,14 +37,13 @@ export const HLM_CHECKBOX_VALUE_ACCESSOR = {
 	host: {
 		class: 'contents peer',
 		'data-slot': 'checkbox',
-		'[attr.id]': 'null',
 		'[attr.aria-label]': 'null',
 		'[attr.aria-labelledby]': 'null',
 		'[attr.data-disabled]': '_disabled() ? "" : null',
 	},
 	template: `
 		<brn-checkbox
-			[id]="id()"
+			[id]="inputId()"
 			[name]="name()"
 			[class]="_computedClass()"
 			[checked]="checked()"
@@ -79,7 +78,7 @@ export class HlmCheckbox implements ControlValueAccessor {
 	);
 
 	/** Used to set the id on the underlying brn element. */
-	public readonly id = input<string | null>(null);
+	public readonly inputId = input<string | null>(null);
 
 	/** Used to set the aria-label attribute on the underlying brn element. */
 	public readonly ariaLabel = input<string | null>(null, { alias: 'aria-label' });

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

@@ -18,7 +18,7 @@ import { classes } from '<%- importAlias %>/utils';
 				brnCommandInput
 				data-slot="command-input"
 				class="w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50"
-				[id]="id()"
+				[id]="inputId()"
 				[placeholder]="placeholder()"
 			/>
 
@@ -29,7 +29,7 @@ import { classes } from '<%- importAlias %>/utils';
 	`,
 })
 export class HlmCommandInput {
-	public readonly id = input<string | undefined>();
+	public readonly inputId = input<string | undefined>();
 	public readonly placeholder = input<string>('');
 
 	constructor() {

package/src/generators/ui/libs/dropdown-menu/files/lib/hlm-dropdown-menu-item.ts.template

@@ -4,7 +4,7 @@ import { booleanAttribute, Directive, HOST_TAG_NAME, inject, input } from '@angu
 import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
-	selector: '[hlmDropdownMenuItem]',
+	selector: '[hlmDropdownMenuItem],hlm-dropdown-menu-item',
 	hostDirectives: [
 		{
 			directive: CdkMenuItem,

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

@@ -3,12 +3,10 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmItemActions],hlm-item-actions',
-	host: {
-		'data-slot': 'item-actions',
-	},
+	host: { 'data-slot': 'item-actions' },
 })
 export class HlmItemActions {
 	constructor() {
-		classes(() => 'flex items-center gap-2');
+		classes(() => 'spartan-item-actions flex items-center');
 	}
 }

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

@@ -3,12 +3,10 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmItemContent],hlm-item-content',
-	host: {
-		'data-slot': 'item-content',
-	},
+	host: { 'data-slot': 'item-content' },
 })
 export class HlmItemContent {
 	constructor() {
-		classes(() => 'flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none');
+		classes(() => 'spartan-item-content flex flex-1 flex-col [&+[data-slot=item-content]]:flex-none');
 	}
 }

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

@@ -2,16 +2,14 @@ import { Directive } from '@angular/core';
 import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
-	selector: 'p[hlmItemDescription]',
-	host: {
-		'data-slot': 'item-description',
-	},
+	selector: '[hlmItemDescription],hlm-item-description',
+	host: { 'data-slot': 'item-description' },
 })
 export class HlmItemDescription {
 	constructor() {
-		classes(() => [
-			'text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance',
-			'[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
-		]);
+		classes(
+			() =>
+				'spartan-item-description [&>a:hover]:text-primary line-clamp-2 flex font-normal [&>a]:underline [&>a]:underline-offset-4',
+		);
 	}
 }

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

@@ -3,12 +3,10 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmItemFooter],hlm-item-footer',
-	host: {
-		'data-slot': 'item-footer',
-	},
+	host: { 'data-slot': 'item-footer' },
 })
 export class HlmItemFooter {
 	constructor() {
-		classes(() => 'flex basis-full items-center justify-between gap-2');
+		classes(() => 'spartan-item-footer flex basis-full items-center justify-between');
 	}
 }

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

@@ -7,6 +7,6 @@ import { classes } from '<%- importAlias %>/utils';
 })
 export class HlmItemGroup {
 	constructor() {
-		classes(() => 'group/item-group flex flex-col');
+		classes(() => 'spartan-item-group group/item-group flex w-full flex-col');
 	}
 }

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

@@ -3,12 +3,10 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmItemHeader],hlm-item-header',
-	host: {
-		'data-slot': 'item-header',
-	},
+	host: { 'data-slot': 'item-header' },
 })
 export class HlmItemHeader {
 	constructor() {
-		classes(() => 'flex basis-full items-center justify-between gap-2');
+		classes(() => 'spartan-item-header flex basis-full items-center justify-between');
 	}
 }

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

@@ -4,13 +4,13 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { injectHlmItemMediaConfig } from './hlm-item-token';
 
 const itemMediaVariants = cva(
-	'flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start [&_ng-icon]:pointer-events-none',
+	'spartan-item-media flex shrink-0 items-center justify-center [&_ng-icon]:pointer-events-none',
 	{
 		variants: {
 			variant: {
-				default: 'bg-transparent',
-				icon: "bg-muted size-8 rounded-sm border [&_ng-icon:not([class*='text-'])]:text-base",
-				image: 'size-10 overflow-hidden rounded-sm [&_img]:size-full [&_img]:object-cover',
+				default: 'spartan-item-media-variant-default',
+				icon: 'spartan-item-media-variant-icon',
+				image: 'spartan-item-media-variant-image',
 			},
 		},
 		defaultVariants: {

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

@@ -2,13 +2,14 @@ import { Directive } from '@angular/core';
 import { BrnSeparator } from '@spartan-ng/brain/separator';
 import { hlmSeparatorClass } from '<%- importAlias %>/separator';
 import { classes } from '<%- importAlias %>/utils';
+
 @Directive({
-	selector: 'div[hlmItemSeparator]',
+	selector: '[hlmItemSeparator],hlm-item-separator',
 	hostDirectives: [{ directive: BrnSeparator, inputs: ['orientation'] }],
 	host: { 'data-slot': 'item-separator' },
 })
 export class HlmItemSeparator {
 	constructor() {
-		classes(() => [hlmSeparatorClass, 'my-0']);
+		classes(() => [hlmSeparatorClass, 'spartan-item-separator']);
 	}
 }

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

@@ -3,12 +3,10 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmItemTitle],hlm-item-title',
-	host: {
-		'data-slot': 'item-title',
-	},
+	host: { 'data-slot': 'item-title' },
 })
 export class HlmItemTitle {
 	constructor() {
-		classes(() => 'flex w-fit items-center gap-2 text-sm leading-snug font-medium');
+		classes(() => 'spartan-item-title line-clamp-1 flex w-fit items-center');
 	}
 }

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

@@ -4,17 +4,18 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { injectHlmItemConfig } from './hlm-item-token';
 
 const itemVariants = cva(
-	'group/item [a]:hover:bg-accent/50 focus-visible:border-ring focus-visible:ring-ring/50 flex flex-wrap items-center rounded-md border border-transparent text-sm transition-colors duration-100 outline-none focus-visible:ring-[3px] [a]:transition-colors',
+	'spartan-item group/item focus-visible:border-ring focus-visible:ring-ring/50 flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:ring-[3px] [a]:transition-colors',
 	{
 		variants: {
 			variant: {
-				default: 'bg-transparent',
-				outline: 'border-border',
-				muted: 'bg-muted/50',
+				default: 'spartan-item-variant-default',
+				outline: 'spartan-item-variant-outline',
+				muted: 'spartan-item-variant-muted',
 			},
 			size: {
-				default: 'gap-4 p-4',
-				sm: 'gap-2.5 px-4 py-3',
+				default: 'spartan-item-size-default',
+				sm: 'spartan-item-size-sm',
+				xs: 'spartan-item-size-xs',
 			},
 		},
 		defaultVariants: {
@@ -27,7 +28,7 @@ const itemVariants = cva(
 export type ItemVariants = VariantProps<typeof itemVariants>;
 
 @Directive({
-	selector: 'div[hlmItem], a[hlmItem]',
+	selector: '[hlmItem],hlm-item',
 	host: {
 		'data-slot': 'item',
 		'[attr.data-variant]': 'variant()',

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

@@ -9,6 +9,6 @@ import { classes } from '<%- importAlias %>/utils';
 })
 export class HlmKbdGroup {
 	constructor() {
-		classes(() => 'inline-flex items-center gap-1');
+		classes(() => 'spartan-kbd-group inline-flex items-center');
 	}
 }

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

@@ -9,10 +9,6 @@ import { classes } from '<%- importAlias %>/utils';
 })
 export class HlmKbd {
 	constructor() {
-		classes(() => [
-			'bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none',
-			"[&_ng-icon:not([class*='text-'])]:text-xs",
-			'[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10',
-		]);
+		classes(() => 'spartan-kbd pointer-events-none inline-flex items-center justify-center select-none');
 	}
 }

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

@@ -23,7 +23,6 @@ import type { ClassValue } from 'clsx';
 	imports: [BrnRadio],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: {
-		'[attr.id]': 'null',
 		'[attr.aria-label]': 'null',
 		'[attr.aria-labelledby]': 'null',
 		'[attr.aria-describedby]': 'null',
@@ -32,7 +31,7 @@ import type { ClassValue } from 'clsx';
 	},
 	template: `
 		<brn-radio
-			[id]="id()"
+			[id]="inputId()"
 			[class]="_computedClass()"
 			[value]="value()"
 			[required]="required()"
@@ -78,7 +77,7 @@ export class HlmRadio<T = unknown> {
 	);
 
 	/** Used to set the id on the underlying brn element. */
-	public readonly id = input<string | undefined>(undefined);
+	public readonly inputId = input<string | undefined>(undefined);
 
 	/** Used to set the aria-label attribute on the underlying brn element. */
 	public readonly ariaLabel = input<string | undefined>(undefined, { alias: 'aria-label' });
@@ -113,7 +112,8 @@ export class HlmRadio<T = unknown> {
 			if (!this._elementRef.nativeElement || !this._isBrowser) return;
 
 			const labelElement =
-				this._elementRef.nativeElement.closest('label') ?? this._document.querySelector(`label[for="${this.id()}"]`);
+				this._elementRef.nativeElement.closest('label') ??
+				this._document.querySelector(`label[for="${this.inputId()}"]`);
 
 			if (!labelElement) return;
 			this._renderer.setAttribute(labelElement, 'data-disabled', isDisabled ? 'true' : 'false');

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

@@ -8,6 +8,9 @@ export const hlmSeparatorClass =
 @Directive({
 	selector: '[hlmSeparator],hlm-separator',
 	hostDirectives: [{ directive: BrnSeparator, inputs: ['orientation', 'decorative'] }],
+	host: {
+		'data-slot': 'separator',
+	},
 })
 export class HlmSeparator {
 	constructor() {

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

@@ -27,6 +27,6 @@ export class HlmSpinner {
 	public readonly ariaLabel = input<string>('Loading', { alias: 'aria-label' });
 
 	constructor() {
-		classes(() => 'inline-flex size-fit text-base motion-safe:animate-spin');
+		classes(() => 'inline-flex text-[calc(var(--spacing)*4)] motion-safe:animate-spin');
 	}
 }

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

@@ -30,7 +30,6 @@ export const HLM_SWITCH_VALUE_ACCESSOR = {
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: {
 		class: 'contents',
-		'[attr.id]': 'null',
 		'[attr.aria-label]': 'null',
 		'[attr.aria-labelledby]': 'null',
 		'[attr.aria-describedby]': 'null',
@@ -42,7 +41,7 @@ export const HLM_SWITCH_VALUE_ACCESSOR = {
 			(checkedChange)="handleChange($event)"
 			(touched)="_onTouched?.()"
 			[disabled]="_disabled()"
-			[id]="id()"
+			[id]="inputId()"
 			[aria-label]="ariaLabel()"
 			[aria-labelledby]="ariaLabelledby()"
 			[aria-describedby]="ariaDescribedby()"
@@ -72,7 +71,7 @@ export class HlmSwitch implements ControlValueAccessor {
 	});
 
 	/** Used to set the id on the underlying brn element. */
-	public readonly id = input<string | null>(null);
+	public readonly inputId = input<string | null>(null);
 
 	/** Used to set the aria-label attribute on the underlying brn element. */
 	public readonly ariaLabel = input<string | null>(null, { alias: 'aria-label' });

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.678",
+			"@spartan-ng/brain": "0.0.1-alpha.680",
 			"@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.678",
+			"@spartan-ng/brain": "0.0.1-alpha.680",
 			"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.678",
+			"@spartan-ng/brain": "0.0.1-alpha.680",
 			"@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.678"
+			"@spartan-ng/brain": "0.0.1-alpha.680"
 		}
 	},
 	"badge": {
@@ -70,7 +70,7 @@
 		"name": "button",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.678",
+			"@spartan-ng/brain": "0.0.1-alpha.680",
 			"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.678",
+			"@spartan-ng/brain": "0.0.1-alpha.680",
 			"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.678",
+			"@spartan-ng/brain": "0.0.1-alpha.680",
 			"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.678",
+			"@spartan-ng/brain": "0.0.1-alpha.680",
 			"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.678"
+			"@spartan-ng/brain": "0.0.1-alpha.680"
 		}
 	},
 	"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.678",
+			"@spartan-ng/brain": "0.0.1-alpha.680",
 			"@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.678",
+			"@spartan-ng/brain": "0.0.1-alpha.680",
 			"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.678",
+			"@spartan-ng/brain": "0.0.1-alpha.680",
 			"@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.678",
+			"@spartan-ng/brain": "0.0.1-alpha.680",
 			"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.678",
+			"@spartan-ng/brain": "0.0.1-alpha.680",
 			"@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.678"
+			"@spartan-ng/brain": "0.0.1-alpha.680"
 		}
 	},
 	"empty": {
@@ -208,7 +208,7 @@
 		"name": "field",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.678",
+			"@spartan-ng/brain": "0.0.1-alpha.680",
 			"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.678"
+			"@spartan-ng/brain": "0.0.1-alpha.680"
 		}
 	},
 	"icon": {
@@ -234,7 +234,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.678",
+			"@spartan-ng/brain": "0.0.1-alpha.680",
 			"class-variance-authority": "^0.7.0"
 		}
 	},
@@ -243,7 +243,7 @@
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
 			"class-variance-authority": "^0.7.0",
-			"@spartan-ng/brain": "0.0.1-alpha.678"
+			"@spartan-ng/brain": "0.0.1-alpha.680"
 		}
 	},
 	"input-otp": {
@@ -253,7 +253,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.678"
+			"@spartan-ng/brain": "0.0.1-alpha.680"
 		}
 	},
 	"item": {
@@ -261,7 +261,7 @@
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
 			"class-variance-authority": "^0.7.0",
-			"@spartan-ng/brain": "0.0.1-alpha.678"
+			"@spartan-ng/brain": "0.0.1-alpha.680"
 		}
 	},
 	"kbd": {
@@ -274,14 +274,14 @@
 		"name": "label",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.678"
+			"@spartan-ng/brain": "0.0.1-alpha.680"
 		}
 	},
 	"menubar": {
 		"name": "menubar",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.678",
+			"@spartan-ng/brain": "0.0.1-alpha.680",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"rxjs": "^7.8.0"
 		}
@@ -294,7 +294,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.678",
+			"@spartan-ng/brain": "0.0.1-alpha.680",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -302,7 +302,7 @@
 		"name": "navigation-menu",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.678"
+			"@spartan-ng/brain": "0.0.1-alpha.680"
 		}
 	},
 	"pagination": {
@@ -320,14 +320,14 @@
 		"name": "popover",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.678"
+			"@spartan-ng/brain": "0.0.1-alpha.680"
 		}
 	},
 	"progress": {
 		"name": "progress",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.678"
+			"@spartan-ng/brain": "0.0.1-alpha.680"
 		}
 	},
 	"radio-group": {
@@ -335,7 +335,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.678",
+			"@spartan-ng/brain": "0.0.1-alpha.680",
 			"clsx": "^2.1.1",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"@angular/common": ">=20.0.0 <22.0.0"
@@ -345,7 +345,7 @@
 		"name": "resizable",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.678"
+			"@spartan-ng/brain": "0.0.1-alpha.680"
 		}
 	},
 	"scroll-area": {
@@ -360,7 +360,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.678",
+			"@spartan-ng/brain": "0.0.1-alpha.680",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
 			"clsx": "^2.1.1"
@@ -370,14 +370,14 @@
 		"name": "separator",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.678"
+			"@spartan-ng/brain": "0.0.1-alpha.680"
 		}
 	},
 	"sheet": {
 		"name": "sheet",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.678",
+			"@spartan-ng/brain": "0.0.1-alpha.680",
 			"@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",
@@ -390,7 +390,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.678",
+			"@spartan-ng/brain": "0.0.1-alpha.680",
 			"class-variance-authority": "^0.7.0",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
 			"@ng-icons/lucide": ">=32.0.0 <34.0.0",
@@ -409,7 +409,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.678"
+			"@spartan-ng/brain": "0.0.1-alpha.680"
 		}
 	},
 	"sonner": {
@@ -419,7 +419,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.678",
+			"@spartan-ng/brain": "0.0.1-alpha.680",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -437,7 +437,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.678",
+			"@spartan-ng/brain": "0.0.1-alpha.680",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -451,7 +451,7 @@
 		"name": "tabs",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.678",
+			"@spartan-ng/brain": "0.0.1-alpha.680",
 			"class-variance-authority": "^0.7.0",
 			"@angular/cdk": ">=20.0.0 <22.0.0",
 			"@ng-icons/core": ">=32.0.0 <34.0.0",
@@ -465,7 +465,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.678",
+			"@spartan-ng/brain": "0.0.1-alpha.680",
 			"class-variance-authority": "^0.7.0"
 		}
 	},
@@ -473,7 +473,7 @@
 		"name": "toggle",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.678",
+			"@spartan-ng/brain": "0.0.1-alpha.680",
 			"class-variance-authority": "^0.7.0"
 		}
 	},
@@ -481,7 +481,7 @@
 		"name": "toggle-group",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.678",
+			"@spartan-ng/brain": "0.0.1-alpha.680",
 			"@angular/cdk": ">=20.0.0 <22.0.0"
 		}
 	},
@@ -489,7 +489,7 @@
 		"name": "tooltip",
 		"peerDependencies": {
 			"@angular/core": ">=20.0.0 <22.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.678",
+			"@spartan-ng/brain": "0.0.1-alpha.680",
 			"class-variance-authority": "^0.7.0"
 		}
 	},