@spartan-ng/cli 0.0.1-alpha.657 → 0.0.1-alpha.659

package/package.json

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

package/src/generators/healthcheck/generator.js

@@ -21,6 +21,7 @@ const hlm_1 = require("./healthchecks/hlm");
 const hlm_date_picker_1 = require("./healthchecks/hlm-date-picker");
 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_menu_1 = require("./healthchecks/hlm-menu");
 const hlm_progress_1 = require("./healthchecks/hlm-progress");
@@ -60,6 +61,7 @@ async function healthcheckGenerator(tree, options) {
         hlm_menu_1.helmMenuHealthcheck,
         hlm_dialog_1.helmDialogHealthcheck,
         hlm_dialog_portal_1.helmDialogPortalHealthcheck,
+        hlm_form_field_1.helmFormFieldHealthcheck,
         sonner_1.sonnerHealthcheck,
         brn_select_1.brnSelectHealthcheck,
     ];

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":";;AAkCA,oDA0DC;AA5FD,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,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,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":";;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"}

package/src/generators/healthcheck/healthchecks/hlm-form-field.d.ts

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

package/src/generators/healthcheck/healthchecks/hlm-form-field.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.helmFormFieldHealthcheck = void 0;
+const tslib_1 = require("tslib");
+const devkit_1 = require("@nx/devkit");
+const generator_1 = tslib_1.__importDefault(require("../../migrate-form-field/generator"));
+const healthchecks_1 = require("../healthchecks");
+exports.helmFormFieldHealthcheck = {
+    name: 'Helm Form Field',
+    async detect(tree, failure, _, { importAlias }) {
+        (0, devkit_1.visitNotIgnoredFiles)(tree, '/', (file) => {
+            // if the file is a .ts or .htlm file, check for helm form field
+            if (!file.endsWith('.ts') && !file.endsWith('.html')) {
+                return;
+            }
+            const contents = tree.read(file, 'utf-8');
+            if (!contents) {
+                return;
+            }
+            if (contents.includes("'@spartan-ng/helm/form-field'") ||
+                contents.includes(`"${importAlias}/form-field"`) ||
+                contents.includes(`hlm-form-field`) ||
+                contents.includes(`hlm-hint`) ||
+                contents.includes(`hlm-error`)) {
+                failure(`The form field package (${importAlias}/form-field) is deprecated. Please use the @spartan-ng/helm/field component instead.`, healthchecks_1.HealthcheckSeverity.Error, true);
+            }
+        });
+    },
+    fix: async (tree, { importAlias }) => {
+        await (0, generator_1.default)(tree, { skipFormat: true, importAlias });
+        return true;
+    },
+    prompt: 'Would you like to migrate form field imports and selectors? You need to generate the helm components for fields.',
+};
+//# sourceMappingURL=hlm-form-field.js.map

package/src/generators/healthcheck/healthchecks/hlm-form-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hlm-form-field.js","sourceRoot":"","sources":["../../../../../../../libs/cli/src/generators/healthcheck/healthchecks/hlm-form-field.ts"],"names":[],"mappings":";;;;AAAA,uCAAkD;AAClD,2FAA2E;AAC3E,kDAAwE;AAE3D,QAAA,wBAAwB,GAAgB;IACpD,IAAI,EAAE,iBAAiB;IACvB,KAAK,CAAC,MAAM,CAAC,IAAI,EAAE,OAAO,EAAE,CAAC,EAAE,EAAE,WAAW,EAAE;QAC7C,IAAA,6BAAoB,EAAC,IAAI,EAAE,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;YACxC,gEAAgE;YAChE,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,IACC,QAAQ,CAAC,QAAQ,CAAC,+BAA+B,CAAC;gBAClD,QAAQ,CAAC,QAAQ,CAAC,IAAI,WAAW,cAAc,CAAC;gBAChD,QAAQ,CAAC,QAAQ,CAAC,gBAAgB,CAAC;gBACnC,QAAQ,CAAC,QAAQ,CAAC,UAAU,CAAC;gBAC7B,QAAQ,CAAC,QAAQ,CAAC,WAAW,CAAC,EAC7B,CAAC;gBACF,OAAO,CACN,2BAA2B,WAAW,sFAAsF,EAC5H,kCAAmB,CAAC,KAAK,EACzB,IAAI,CACJ,CAAC;YACH,CAAC;QACF,CAAC,CAAC,CAAC;IACJ,CAAC;IACD,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE;QACpC,MAAM,IAAA,mBAAyB,EAAC,IAAI,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC,CAAC;QACzE,OAAO,IAAI,CAAC;IACb,CAAC;IACD,MAAM,EACL,kHAAkH;CACnH,CAAC"}

package/src/generators/migrate-form-field/compat.d.ts

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

package/src/generators/migrate-form-field/compat.js

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

package/src/generators/migrate-form-field/compat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"compat.js","sourceRoot":"","sources":["../../../../../../libs/cli/src/generators/migrate-form-field/compat.ts"],"names":[],"mappings":";;AAAA,uCAAgD;AAChD,2CAAwD;AAExD,kBAAe,IAAA,2BAAkB,EAAC,qCAAyB,CAAC,CAAC"}

package/src/generators/migrate-form-field/generator.d.ts

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

package/src/generators/migrate-form-field/generator.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.migrateFormFieldGenerator = migrateFormFieldGenerator;
+const devkit_1 = require("@nx/devkit");
+const import_alias_1 = require("../../utils/import-alias");
+const visit_files_1 = require("../../utils/visit-files");
+async function migrateFormFieldGenerator(tree, { skipFormat, importAlias }) {
+    updateImports(tree, importAlias);
+    replaceSelector(tree);
+    if (!skipFormat) {
+        await (0, devkit_1.formatFiles)(tree);
+    }
+}
+/**
+ * Migrate @spartan-ng/hlm/form-field imports to @spartan-ng/hlm/field
+ */
+function updateImports(tree, importAlias) {
+    (0, visit_files_1.visitFiles)(tree, '/', (path) => {
+        // if this is not a typescript file then skip
+        if (!path.endsWith('.ts')) {
+            return;
+        }
+        let content = tree.read(path, 'utf-8');
+        if (!content) {
+            return;
+        }
+        const formFieldImport = (0, import_alias_1.helmImport)(importAlias, 'form-field');
+        const fieldImport = (0, import_alias_1.helmImport)(importAlias, 'field');
+        if (content.includes(formFieldImport)) {
+            content = content
+                .replace(`import { HlmFormFieldImports } from '${formFieldImport}';`, `import { HlmFieldImports } from '${fieldImport}';`)
+                .replace(/HlmFormFieldImports/, 'HlmFieldImports');
+        }
+        tree.write(path, content);
+    });
+}
+function replaceSelector(tree) {
+    (0, visit_files_1.visitFiles)(tree, '.', (path) => {
+        // if this is not an html file or typescript file (inline templates) then skip
+        if (!path.endsWith('.html') && !path.endsWith('.ts')) {
+            return;
+        }
+        let content = tree.read(path, 'utf-8');
+        if (!content) {
+            return;
+        }
+        if (content.includes('hlm-form-field')) {
+            content = content.replace(/hlm-form-field/g, 'hlm-field');
+        }
+        if (content.includes('hlm-hint')) {
+            content = content.replace(/<hlm-hint/g, '<p hlmFieldDescription').replace(/<\/hlm-hint>/g, '</p>');
+        }
+        if (content.includes('hlm-error')) {
+            content = content.replace(/hlm-error/g, 'hlm-field-error');
+        }
+        tree.write(path, content);
+    });
+}
+exports.default = migrateFormFieldGenerator;
+//# sourceMappingURL=generator.js.map

package/src/generators/migrate-form-field/generator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../libs/cli/src/generators/migrate-form-field/generator.ts"],"names":[],"mappings":";;AAKA,8DAUC;AAfD,uCAAoD;AACpD,2DAAsD;AACtD,yDAAqD;AAG9C,KAAK,UAAU,yBAAyB,CAC9C,IAAU,EACV,EAAE,UAAU,EAAE,WAAW,EAAmC;IAE5D,aAAa,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;IACjC,eAAe,CAAC,IAAI,CAAC,CAAC;IAEtB,IAAI,CAAC,UAAU,EAAE,CAAC;QACjB,MAAM,IAAA,oBAAW,EAAC,IAAI,CAAC,CAAC;IACzB,CAAC;AACF,CAAC;AAED;;GAEG;AACH,SAAS,aAAa,CAAC,IAAU,EAAE,WAAmB;IACrD,IAAA,wBAAU,EAAC,IAAI,EAAE,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;QAC9B,6CAA6C;QAC7C,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC;YAC3B,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,MAAM,eAAe,GAAG,IAAA,yBAAU,EAAC,WAAW,EAAE,YAAY,CAAC,CAAC;QAC9D,MAAM,WAAW,GAAG,IAAA,yBAAU,EAAC,WAAW,EAAE,OAAO,CAAC,CAAC;QAErD,IAAI,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAC,EAAE,CAAC;YACvC,OAAO,GAAG,OAAO;iBACf,OAAO,CACP,wCAAwC,eAAe,IAAI,EAC3D,oCAAoC,WAAW,IAAI,CACnD;iBACA,OAAO,CAAC,qBAAqB,EAAE,iBAAiB,CAAC,CAAC;QACrD,CAAC;QAED,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IAC3B,CAAC,CAAC,CAAC;AACJ,CAAC;AAED,SAAS,eAAe,CAAC,IAAU;IAClC,IAAA,wBAAU,EAAC,IAAI,EAAE,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;QAC9B,8EAA8E;QAC9E,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,IAAI,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAC,EAAE,CAAC;YACxC,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,iBAAiB,EAAE,WAAW,CAAC,CAAC;QAC3D,CAAC;QACD,IAAI,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC;YAClC,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,YAAY,EAAE,wBAAwB,CAAC,CAAC,OAAO,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;QACpG,CAAC;QACD,IAAI,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE,CAAC;YACnC,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,YAAY,EAAE,iBAAiB,CAAC,CAAC;QAC5D,CAAC;QAED,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IAC3B,CAAC,CAAC,CAAC;AACJ,CAAC;AAED,kBAAe,yBAAyB,CAAC"}

package/src/generators/migrate-form-field/schema.d.ts

@@ -0,0 +1,4 @@
+export interface MigrateFormFieldGeneratorSchema {
+	skipFormat?: boolean;
+	importAlias: string;
+}

package/src/generators/migrate-form-field/schema.json

@@ -0,0 +1,19 @@
+{
+	"$schema": "http://json-schema.org/draft-07/schema",
+	"$id": "MigrateFormField",
+	"title": "",
+	"type": "object",
+	"properties": {
+		"skipFormat": {
+			"type": "boolean",
+			"default": false,
+			"description": "Skip formatting files"
+		},
+		"importAlias": {
+			"type": "string",
+			"default": "@spartan-ui/helm",
+			"description": "The prefix to use for helm imports"
+		}
+	},
+	"required": []
+}

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

@@ -22,8 +22,9 @@ import { HlmInputGroupImports } from '<%- importAlias %>/input-group';
 				brnAutocompleteInput
 				#autocompleteInput="brnAutocompleteInput"
 				hlmInputGroupInput
+				[id]="inputId()"
 				[placeholder]="placeholder()"
-				[attr.aria-invalid]="ariaInvalid() ? 'true' : null"
+				[aria-invalid]="ariaInvalidOverride()"
 			/>
 
 			@if (showSearch()) {
@@ -51,14 +52,18 @@ import { HlmInputGroupImports } from '<%- importAlias %>/input-group';
 	`,
 })
 export class HlmAutocompleteInput {
+	private static _id = 0;
+
+	public readonly inputId = input<string>(`hlm-autocomplete-input-${HlmAutocompleteInput._id++}`);
+
 	public readonly placeholder = input<string>('');
 
 	public readonly showSearch = input<boolean, BooleanInput>(true, { transform: booleanAttribute });
 	public readonly showClear = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
 
-	// TODO input and input-group styles need to support aria-invalid directly
-	public readonly ariaInvalid = input<boolean, BooleanInput>(false, {
-		transform: booleanAttribute,
+	/** Manual override for aria-invalid. When not set, auto-detects from the parent autocomplete error state. */
+	public readonly ariaInvalidOverride = input<boolean | undefined, BooleanInput>(undefined, {
+		transform: (v: BooleanInput) => (v === '' || v === undefined ? undefined : booleanAttribute(v)),
 		alias: 'aria-invalid',
 	});
 }

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

@@ -3,17 +3,16 @@ import { classes } from '<%- importAlias %>/utils';
 import { type VariantProps, cva } from 'class-variance-authority';
 
 const badgeVariants = cva(
-	'focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:ring-[3px] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>ng-icon]:pointer-events-none [&>ng-icon]:text-xs',
+	'spartan-badge group/badge focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap focus-visible:ring-[3px] [&>ng-icon]:pointer-events-none',
 	{
 		variants: {
 			variant: {
-				default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
-				secondary: 'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',
-				destructive:
-					'bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20',
-				outline: 'border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground',
-				ghost: 'hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50',
-				link: 'text-primary underline-offset-4 hover:underline',
+				default: 'spartan-badge-variant-default',
+				secondary: 'spartan-badge-variant-secondary',
+				destructive: 'spartan-badge-variant-destructive',
+				outline: 'spartan-badge-variant-outline',
+				ghost: 'spartan-badge-variant-ghost',
+				link: 'spartan-badge-variant-link',
 			},
 		},
 		defaultVariants: {

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

@@ -9,6 +9,6 @@ import { classes } from '<%- importAlias %>/utils';
 })
 export class HlmCardAction {
 	constructor() {
-		classes(() => 'col-start-2 row-span-2 row-start-1 self-start justify-self-end');
+		classes(() => 'spartan-card-action col-start-2 row-span-2 row-start-1 self-start justify-self-end');
 	}
 }

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

@@ -9,6 +9,6 @@ import { classes } from '<%- importAlias %>/utils';
 })
 export class HlmCardContent {
 	constructor() {
-		classes(() => 'px-6 group-data-[size=sm]/card:px-4');
+		classes(() => 'spartan-card-content');
 	}
 }

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

@@ -9,6 +9,6 @@ import { classes } from '<%- importAlias %>/utils';
 })
 export class HlmCardDescription {
 	constructor() {
-		classes(() => 'text-muted-foreground text-sm');
+		classes(() => 'spartan-card-description');
 	}
 }

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

@@ -9,9 +9,6 @@ import { classes } from '<%- importAlias %>/utils';
 })
 export class HlmCardFooter {
 	constructor() {
-		classes(
-			() =>
-				'flex items-center rounded-b-xl px-6 group-data-[size=sm]/card:px-4 [.border-t]:pt-6 group-data-[size=sm]/card:[.border-t]:pt-4',
-		);
+		classes(() => 'spartan-card-footer flex items-center');
 	}
 }

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

@@ -11,7 +11,7 @@ export class HlmCardHeader {
 	constructor() {
 		classes(
 			() =>
-				`group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-6 group-data-[size=sm]/card:px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-6 group-data-[size=sm]/card:[.border-b]:pb-4`,
+				`spartan-card-header group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]`,
 		);
 	}
 }

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

@@ -9,6 +9,6 @@ import { classes } from '<%- importAlias %>/utils';
 })
 export class HlmCardTitle {
 	constructor() {
-		classes(() => 'text-base leading-normal font-medium group-data-[size=sm]/card:text-sm');
+		classes(() => 'spartan-card-title');
 	}
 }

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

@@ -12,9 +12,6 @@ export class HlmCard {
 	public readonly size = input<'sm' | 'default'>('default');
 
 	constructor() {
-		classes(
-			() =>
-				'group/card ring-foreground/10 bg-card text-card-foreground flex flex-col gap-6 overflow-hidden rounded-xl py-6 text-sm shadow-xs ring-1 has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl',
-		);
+		classes(() => 'spartan-card group/card flex flex-col');
 	}
 }

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

@@ -9,11 +9,13 @@ import {
 	linkedSignal,
 	model,
 	output,
+	viewChild,
 } from '@angular/core';
 import { type ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideCheck } from '@ng-icons/lucide';
 import { BrnCheckbox } from '@spartan-ng/brain/checkbox';
+import { BrnFieldControlDescribedBy } from '@spartan-ng/brain/field';
 import type { ChangeFn, TouchFn } from '@spartan-ng/brain/forms';
 import { HlmIcon } from '<%- importAlias %>/icon';
 import { hlm } from '<%- importAlias %>/utils';
@@ -31,13 +33,13 @@ export const HLM_CHECKBOX_VALUE_ACCESSOR = {
 	providers: [HLM_CHECKBOX_VALUE_ACCESSOR],
 	viewProviders: [provideIcons({ lucideCheck })],
 	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [BrnFieldControlDescribedBy],
 	host: {
 		class: 'contents peer',
 		'data-slot': 'checkbox',
 		'[attr.id]': 'null',
 		'[attr.aria-label]': 'null',
 		'[attr.aria-labelledby]': 'null',
-		'[attr.aria-describedby]': 'null',
 		'[attr.data-disabled]': '_disabled() ? "" : null',
 	},
 	template: `
@@ -52,6 +54,7 @@ export const HLM_CHECKBOX_VALUE_ACCESSOR = {
 			[aria-label]="ariaLabel()"
 			[aria-labelledby]="ariaLabelledby()"
 			[aria-describedby]="ariaDescribedby()"
+			[forceInvalid]="forceInvalid()"
 			(checkedChange)="_handleChange($event)"
 			(touched)="_onTouched?.()"
 		>
@@ -68,9 +71,10 @@ export class HlmCheckbox implements ControlValueAccessor {
 
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive peer size-4 shrink-0 cursor-default rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+			'border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 peer size-4 shrink-0 cursor-default rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
 			this.userClass(),
 			this._disabled() ? 'cursor-not-allowed opacity-50' : '',
+			this._errorStateClass(),
 		),
 	);
 
@@ -107,8 +111,20 @@ export class HlmCheckbox implements ControlValueAccessor {
 	/** Whether the checkbox is disabled. */
 	public readonly disabled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
 
+	/** Whether to force the checkbox into an invalid state. */
+	public readonly forceInvalid = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
+
 	protected readonly _disabled = linkedSignal(this.disabled);
 
+	private readonly _brnCheckbox = viewChild.required(BrnCheckbox);
+
+	private readonly _spartanInvalid = computed(() => this.forceInvalid() || this._brnCheckbox().spartanInvalid?.());
+	protected readonly _errorStateClass = computed(() =>
+		this._spartanInvalid()
+			? 'border-destructive focus-visible:border-destructive focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40'
+			: '',
+	);
+
 	protected _onChange?: ChangeFn<boolean>;
 	protected _onTouched?: TouchFn;
 

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

@@ -4,7 +4,7 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: 'input[hlmComboboxChipInput]',
-	hostDirectives: [{ directive: BrnComboboxChipInput, inputs: ['id'] }],
+	hostDirectives: [{ directive: BrnComboboxChipInput, inputs: ['id', 'aria-invalid'] }],
 	host: {
 		'data-slott': 'combobox-chip-input',
 	},

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

@@ -1,19 +1,34 @@
-import { Directive } from '@angular/core';
-import { BrnComboboxAnchor, BrnComboboxInputWrapper, BrnComboboxPopoverTrigger } from '@spartan-ng/brain/combobox';
+import { computed, Directive } from '@angular/core';
+import {
+	BrnComboboxAnchor,
+	BrnComboboxInputWrapper,
+	BrnComboboxPopoverTrigger,
+	injectBrnComboboxBase,
+} from '@spartan-ng/brain/combobox';
 import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmComboboxChips],hlm-combobox-chips',
 	hostDirectives: [BrnComboboxInputWrapper, BrnComboboxAnchor, BrnComboboxPopoverTrigger],
 	host: {
-		'data-slott': 'combobox-chips',
+		'data-slot': 'combobox-chips',
 	},
 })
 export class HlmComboboxChips {
+	private readonly _combobox = injectBrnComboboxBase();
+
+	protected readonly _spartanInvalid = computed(() => this._combobox.controlState?.()?.spartanInvalid);
+
+	protected readonly _errorStateClass = computed(() =>
+		this._spartanInvalid?.()
+			? 'border-destructive focus-within:border-destructive focus-within:ring-destructive/20 dark:focus-within:ring-destructive/40'
+			: '',
+	);
+
 	constructor() {
-		classes(
-			() =>
-				'dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 has-data-[slot=combobox-chip]:px-1.5; flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border bg-transparent bg-clip-padding px-2.5 py-1.5 text-sm shadow-xs transition-[color,box-shadow] focus-within:ring-[3px] has-aria-invalid:ring-[3px]',
-		);
+		classes(() => [
+			'dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-data-[slot=combobox-chip]:px-1.5; flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border bg-transparent bg-clip-padding px-2.5 py-1.5 text-sm shadow-xs transition-[color,box-shadow] focus-within:ring-[3px]',
+			this._errorStateClass(),
+		]);
 	}
 }

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

@@ -18,8 +18,9 @@ import { HlmInputGroupImports } from '<%- importAlias %>/input-group';
 				#comboboxInput="brnComboboxInput"
 				brnComboboxPopoverTrigger
 				hlmInputGroupInput
+				[id]="inputId()"
 				[placeholder]="placeholder()"
-				[attr.aria-invalid]="ariaInvalid() ? 'true' : null"
+				[aria-invalid]="ariaInvalidOverride()"
 			/>
 
 			<hlm-input-group-addon align="inline-end">
@@ -56,14 +57,17 @@ import { HlmInputGroupImports } from '<%- importAlias %>/input-group';
 	`,
 })
 export class HlmComboboxInput {
+	private static _id = 0;
+
+	public readonly inputId = input<string>(`hlm-combobox-input-${HlmComboboxInput._id++}`);
 	public readonly placeholder = input<string>('');
 
 	public readonly showTrigger = input<boolean, BooleanInput>(true, { transform: booleanAttribute });
 	public readonly showClear = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
 
-	// TODO input and input-group styles need to support aria-invalid directly
-	public readonly ariaInvalid = input<boolean, BooleanInput>(false, {
-		transform: booleanAttribute,
+	/** Manual override for aria-invalid. When not set, auto-detects from the parent combobox error state. */
+	public readonly ariaInvalidOverride = input<boolean | undefined, BooleanInput>(undefined, {
+		transform: (v: BooleanInput) => (v === '' || v === undefined ? undefined : booleanAttribute(v)),
 		alias: 'aria-invalid',
 	});
 }

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

@@ -7,13 +7,21 @@ import {
 	BrnComboboxPopoverTrigger,
 	BrnComboboxTrigger,
 } from '@spartan-ng/brain/combobox';
+import { BrnFieldControlDescribedBy } from '@spartan-ng/brain/field';
 import { ButtonVariants, HlmButton } from '<%- importAlias %>/button';
 import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-combobox-trigger',
-	imports: [NgIcon, HlmButton, BrnComboboxAnchor, BrnComboboxTrigger, BrnComboboxPopoverTrigger],
+	imports: [
+		NgIcon,
+		HlmButton,
+		BrnComboboxAnchor,
+		BrnComboboxTrigger,
+		BrnComboboxPopoverTrigger,
+		BrnFieldControlDescribedBy,
+	],
 	providers: [provideIcons({ lucideChevronDown })],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	hostDirectives: [BrnComboboxInputWrapper],
@@ -22,6 +30,7 @@ import type { ClassValue } from 'clsx';
 			brnComboboxTrigger
 			brnComboboxAnchor
 			brnComboboxPopoverTrigger
+			brnFieldControlDescribedBy
 			hlmBtn
 			data-slot="combobox-trigger"
 			[id]="buttonId()"

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

@@ -5,6 +5,7 @@ import {
 	Component,
 	computed,
 	forwardRef,
+	inject,
 	input,
 	linkedSignal,
 	numberAttribute,
@@ -15,8 +16,8 @@ import { type ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { provideIcons } from '@ng-icons/core';
 import { lucideChevronDown } from '@ng-icons/lucide';
 import type { BrnDialogState } from '@spartan-ng/brain/dialog';
+import { BrnFieldControl, BrnFieldControlDescribedBy, provideBrnLabelable } from '@spartan-ng/brain/field';
 import type { ChangeFn, TouchFn } from '@spartan-ng/brain/forms';
-
 import { HlmCalendarMulti } from '<%- importAlias %>/calendar';
 import { HlmIconImports } from '<%- importAlias %>/icon';
 import { HlmPopoverImports } from '<%- importAlias %>/popover';
@@ -34,20 +35,36 @@ let nextId = 0;
 
 @Component({
 	selector: 'hlm-date-picker-multi',
-	imports: [HlmIconImports, HlmPopoverImports, HlmCalendarMulti],
-	providers: [HLM_DATE_PICKER_MUTLI_VALUE_ACCESSOR, provideIcons({ lucideChevronDown })],
+	imports: [HlmIconImports, HlmPopoverImports, HlmCalendarMulti, BrnFieldControlDescribedBy],
+	providers: [
+		HLM_DATE_PICKER_MUTLI_VALUE_ACCESSOR,
+		provideIcons({ lucideChevronDown }),
+		provideBrnLabelable(HlmDatePickerMulti),
+	],
 	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [BrnFieldControl],
 	host: {
 		class: 'block',
 	},
 	template: `
-		<hlm-popover sideOffset="5" [state]="_popoverState()" (stateChanged)="_popoverState.set($event)">
+		<hlm-popover
+			sideOffset="5"
+			[state]="_popoverState()"
+			(stateChanged)="_popoverState.set($event)"
+			(closed)="_onTouched?.()"
+		>
 			<button
 				[id]="buttonId()"
 				type="button"
 				[class]="_computedClass()"
 				[disabled]="_mutableDisabled()"
+				[attr.aria-invalid]="_ariaInvalid()"
+				[attr.data-invalid]="_ariaInvalid()"
+				[attr.data-dirty]="_dirty?.() ? 'true' : null"
+				[attr.data-touched]="_touched?.() ? 'true' : null"
+				[attr.data-matches-spartan-invalid]="_spartanInvalid?.() ? 'true' : null"
 				hlmPopoverTrigger
+				brnFieldControlDescribedBy
 			>
 				<span class="truncate">
 					@if (_formattedDate(); as formattedDate) {
@@ -78,14 +95,28 @@ let nextId = 0;
 })
 export class HlmDatePickerMulti<T> implements ControlValueAccessor {
 	private readonly _config = injectHlmDatePickerMultiConfig<T>();
+	private readonly _fieldControl = inject(BrnFieldControl, { optional: true });
+
+	protected readonly _spartanInvalid = this._fieldControl?.spartanInvalid;
+	protected readonly _dirty = this._fieldControl?.dirty;
+	protected readonly _touched = this._fieldControl?.touched;
+	private readonly _invalid = this._fieldControl?.invalid;
+
+	protected readonly _errorStateClass = computed(() =>
+		this._spartanInvalid?.()
+			? 'border-destructive focus-visible:border-destructive focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40'
+			: '',
+	);
+	protected readonly _ariaInvalid = computed(() => (this._invalid?.() ? 'true' : null));
 
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'ring-offset-background border-input bg-background hover:bg-accent dark:bg-input/30 dark:hover:bg-input/50 hover:text-accent-foreground inline-flex h-9 w-[280px] cursor-default items-center justify-between gap-2 rounded-md border px-3 py-2 text-left text-sm font-normal whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50',
+			'ring-offset-background border-input bg-background hover:bg-accent dark:bg-input/30 dark:hover:bg-input/50 inline-flex h-9 w-[280px] cursor-default items-center justify-between gap-2 rounded-md border px-3 py-2 text-left text-sm font-normal whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50',
 			'focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',
 			'disabled:pointer-events-none disabled:opacity-50',
 			'[&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0',
+			this._errorStateClass(),
 			this.userClass(),
 		),
 	);
@@ -144,6 +175,8 @@ export class HlmDatePickerMulti<T> implements ControlValueAccessor {
 
 	public readonly dateChange = output<T[]>();
 
+	public readonly labelableId = this.buttonId;
+
 	protected _onChange?: ChangeFn<T[]>;
 	protected _onTouched?: TouchFn;