@egose/shadcn-theme-ng-tw 0.0.28 → 0.2.0

package/icon/fesm2022/icon.mjs

@@ -35,10 +35,10 @@ class HlmIcon {
         }
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_computedSize" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: HlmIcon, isStandalone: true, selector: "ng-icon[hlm]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--ng-icon__size": "_computedSize()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: HlmIcon, isStandalone: true, selector: "ng-icon[hlm]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--ng-icon__size": "_computedSize()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmIcon, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmIcon, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-icon[hlm]',
@@ -53,11 +53,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  */
 const HlmIconImports = [HlmIcon];
 class HlmIconModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: HlmIconModule, imports: [HlmIcon], exports: [HlmIcon] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmIconModule });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.3", ngImport: i0, type: HlmIconModule, imports: [HlmIcon], exports: [HlmIcon] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmIconModule });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmIconModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmIconModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...HlmIconImports],
@@ -70,4 +70,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  */
 
 export { HlmIcon, HlmIconImports, HlmIconModule, injectHlmIconConfig, provideHlmIconConfig };
-//# sourceMappingURL=icon.mjs.map
+

package/input/README.md

@@ -1,64 +1,270 @@
-# Input
+# Input (`@egose/shadcn-theme-ng/input`)
 
-This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.2.0.
+`HlmInput` is a thin styling directive that gives any native `<input>` (or `<textarea>`) the shadcn/ui _Input_ look — the Angular counterpart of shadcn/ui's `<Input />`. Behavior comes from spartan-ng's `BrnInput` (plus field `aria-describedby` propagation); this directive adds the theme classes, `data-slot="input"`, invalid-state rings, and disabled/file styles.
 
-## Code scaffolding
+> **Ships as:** `@egose/shadcn-theme-ng/input` (plain Tailwind) and `@egose/shadcn-theme-ng-tw/input` (`tw:`-prefixed variant). See the [package README](../../README.md) for installation, peer dependencies, and the Tailwind-variant contract. Do not publish this project directory independently.
 
-Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+## Installation
 
 ```bash
-ng generate component component-name
+# Plain Tailwind (no prefix)
+npm install @egose/shadcn-theme-ng
+
+# Or the tw:-prefixed variant
+npm install @egose/shadcn-theme-ng-tw
 ```
 
-For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+Peer dependencies (Angular, `@angular/forms`, CDK, `@spartan-ng/brain`, `rxjs`) are documented in the [package README](../../README.md#peer-dependencies).
 
-```bash
-ng generate --help
+```ts
+import { HlmInputImports } from '@egose/shadcn-theme-ng/input';
+// tw variant:
+// import { HlmInputImports } from '@egose/shadcn-theme-ng-tw/input';
 ```
 
-## Building
+## Imports
 
-To build the library, run:
+```ts
+// Standalone component — spread the imports array:
+import { HlmInputImports } from '@egose/shadcn-theme-ng/input';
 
-```bash
-ng build input
+@Component({
+  standalone: true,
+  imports: [ReactiveFormsModule, HlmInputImports],
+  template: `<input hlmInput formControlName="email" type="email" />`,
+})
+export class MyComp {}
 ```
 
-This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
+```ts
+// NgModule-based — import the module:
+import { HlmInputModule } from '@egose/shadcn-theme-ng/input';
 
-### Publishing the Library
+@NgModule({ imports: [HlmInputModule] })
+export class MyModule {}
+```
 
-Once the project is built, you can publish your library by following these steps:
+Exported from `src/public-api.ts`: `HlmInput`, plus `HlmInputImports` and `HlmInputModule`. Import the directive class directly (`import { HlmInput } from '…'`) when you only need the one symbol.
 
-1. Navigate to the `dist` directory:
+## Anatomy / Structure
 
-   ```bash
-   cd dist/input
-   ```
+```html
+<label for="email">Email</label> <input hlmInput id="email" type="email" placeholder="you@example.com" />
+```
 
-2. Run the `npm publish` command to publish your library to the npm registry:
-   ```bash
-   npm publish
-   ```
+The directive matches `input[hlmInput]` usage in practice (selector `[hlmInput]`), sets `data-slot="input"`, binds `[attr.aria-describedby]` from its own input, and composes `BrnInput` (`id`, `forceInvalid`) + `BrnFieldControlDescribedBy` via `hostDirectives`. It is also the class hook reused by `textarea[hlmInput]` (see `form-textarea`) and by `input[hlmInputGroupInput]`.
 
-## Running unit tests
+## API reference
 
-To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+### `[hlmInput]` — `HlmInput`
 
-```bash
-ng test
+| Input             | Type             | Default | Description                                                                                                         |
+| ----------------- | ---------------- | ------- | ------------------------------------------------------------------------------------------------------------------- |
+| `ariaDescribedby` | `string \| null` | `null`  | Bound to `aria-describedby`. Combine with `<hlm-error>`/`<hlm-hint>` ids (the form wrappers do this automatically). |
+| `id`              | (via `BrnInput`) | —       | Forwarded to the `BrnInput` host directive.                                                                         |
+| `forceInvalid`    | (via `BrnInput`) | —       | Forwarded to the `BrnInput` host directive; forces the `data-matches-spartan-invalid` error styles.                 |
+
+No outputs. Visual states are attribute-driven: `data-matches-spartan-invalid=true` switches the border/ring to destructive; `disabled` applies `pointer-events-none`, `cursor-not-allowed`, `opacity-50`. Base geometry: `h-9`, `rounded-md`, `text-base` (`md:text-sm`), full width.
+
+## Examples
+
+### 1. Basic text + reactive form
+
+```ts
+import { Component } from '@angular/core';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { HlmInputImports } from '@egose/shadcn-theme-ng/input';
+
+@Component({
+  standalone: true,
+  imports: [ReactiveFormsModule, HlmInputImports],
+  template: `
+    <form [formGroup]="form">
+      <label for="username">Username</label>
+      <input hlmInput id="username" formControlName="username" placeholder="jane_doe" />
+    </form>
+  `,
+})
+export class BasicExample {
+  readonly form = new FormGroup({
+    username: new FormControl<string>('', { nonNullable: true }),
+  });
+}
 ```
 
-## Running end-to-end tests
+### 2. Template-driven with `ngModel`
 
-For end-to-end (e2e) testing, run:
+```ts
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { HlmInput } from '@egose/shadcn-theme-ng/input';
 
-```bash
-ng e2e
+@Component({
+  standalone: true,
+  imports: [FormsModule, HlmInput],
+  template: `
+    <label for="nickname">Nickname</label>
+    <input hlmInput id="nickname" name="nickname" [(ngModel)]="nickname" placeholder="janey" />
+    <p>Hello, {{ nickname || 'stranger' }}!</p>
+  `,
+})
+export class NgModelExample {
+  nickname = '';
+}
 ```
 
-Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+### 3. Types: email, password, number, search, file
+
+```ts
+import { Component } from '@angular/core';
+import { HlmInputImports } from '@egose/shadcn-theme-ng/input';
+
+@Component({
+  standalone: true,
+  imports: [HlmInputImports],
+  template: `
+    <div class="tw:grid tw:gap-3">
+      <input hlmInput type="email" placeholder="Email" aria-label="Email" autocomplete="email" />
+      <input hlmInput type="password" placeholder="Password" aria-label="Password" autocomplete="current-password" />
+      <input hlmInput type="number" placeholder="0" aria-label="Amount" min="0" />
+      <input hlmInput type="search" placeholder="Search…" aria-label="Search" />
+      <input hlmInput type="file" aria-label="Upload avatar" />
+    </div>
+  `,
+})
+export class TypesExample {}
+```
+
+> File inputs inherit the directive's `file:` styles (sized button text, transparent track) — no extra markup needed.
+
+### 4. Disabled + invalid states
+
+```ts
+import { Component, signal } from '@angular/core';
+import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { HlmInput } from '@egose/shadcn-theme-ng/input';
+
+@Component({
+  standalone: true,
+  imports: [ReactiveFormsModule, HlmInput],
+  template: `
+    <form [formGroup]="form">
+      <input hlmInput formControlName="email" type="email" placeholder="you@example.com" aria-label="Email" />
+      @if (form.controls.email.invalid && form.controls.email.touched) {
+        <p class="tw:text-sm tw:text-red-600">Enter a valid email.</p>
+      }
+      <input hlmInput placeholder="Disabled field" aria-label="Disabled field" [disabled]="true" />
+      <!-- force the error ring regardless of touch state -->
+      <input hlmInput placeholder="Forced invalid" aria-label="Forced invalid" [forceInvalid]="true" />
+    </form>
+  `,
+})
+export class StatesExample {
+  readonly form = new FormGroup({
+    email: new FormControl<string>('', { nonNullable: true, validators: [Validators.email] }),
+  });
+}
+```
+
+### 5. Manual `aria-describedby` with hint + error (no form wrapper)
+
+```ts
+import { Component } from '@angular/core';
+import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { HlmInput } from '@egose/shadcn-theme-ng/input';
+import { HlmError, HlmHint } from '@egose/shadcn-theme-ng/form-field';
+
+@Component({
+  standalone: true,
+  imports: [ReactiveFormsModule, HlmInput, HlmError, HlmHint],
+  template: `
+    <form [formGroup]="form">
+      <label for="handle">Handle</label>
+      <input
+        hlmInput
+        id="handle"
+        formControlName="handle"
+        placeholder="@jane"
+        [ariaDescribedby]="describedBy()"
+      />
+      @if (showError()) {
+        <hlm-error id="handle-error">Use 3+ lowercase letters.</hlm-error>
+      } @else {
+        <hlm-hint id="handle-hint">Your public @name.</hlm-hint>
+      }
+    </form>
+  `,
+})
+export class DescribedByExample {
+  readonly form = new FormGroup({
+    handle: new FormControl<string>('', {
+      nonNullable: true,
+      validators: [Validators.minLength(3), Validators.pattern(/^[a-z]+$/)],
+    }),
+  });
+
+  showError(): boolean {
+    const c = this.form.controls.handle;
+    return c.invalid && (c.dirty || c.touched);
+  }
+
+  describedBy(): string {
+    return this.showError() ? 'handle-error' : 'handle-hint';
+  }
+}
+```
+
+### 6. Composition: search row with button (input + button)
+
+```ts
+import { Component, signal } from '@angular/core';
+import { HlmInput } from '@egose/shadcn-theme-ng/input';
+import { HlmButton } from '@egose/shadcn-theme-ng/button';
+
+@Component({
+  standalone: true,
+  imports: [HlmInput, HlmButton],
+  template: `
+    <div class="tw:flex tw:gap-2">
+      <input
+        hlmInput
+        aria-label="Search docs"
+        placeholder="Search docs…"
+        [value]="query()"
+        (input)="query.set($any($event.target).value)"
+        (keydown.enter)="search()"
+      />
+      <button hlmBtn type="button" (click)="search()">Search</button>
+    </div>
+    @if (searched()) {
+      <p role="status" class="tw:text-sm">Searching for “{{ query() }}”…</p>
+    }
+  `,
+})
+export class SearchRowExample {
+  readonly query = signal('');
+  readonly searched = signal(false);
+
+  search() {
+    this.searched.set(true);
+  }
+}
+```
+
+## Accessibility notes
+
+- Always pair the input with a `<label for>` (or `aria-label`/`aria-labelledby` when the design is label-less). The directive does not generate labels.
+- Wire `ariaDescribedby` to hint/error ids so screen readers announce help and validation together with the field. The `eg-form-*` wrappers automate this — copy their pattern when hand-rolling.
+- Invalid styling is visual only until you expose the message text (e.g. `<hlm-error>` or `role="alert"`); use `forceInvalid` sparingly and only alongside a message.
+- Keep native semantics: correct `type`, `autocomplete`, `required`, and `disabled` (not `aria-disabled` + click-guard) so AT and password managers behave.
+
+## Theming / CSS variables
+
+No component-specific CSS variables; colors/spacing come from the shared theme tokens (`--input`, `--ring`, `--destructive`, `--radius`, …). Taller fields: add `tw:h-11`; monospace/code looks: add `tw:font-mono`.
 
-## Additional Resources
+## Related subpaths
 
-For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
+- `@egose/shadcn-theme-ng/form-text-input` — labeled + validated reactive-forms wrapper (prefer for forms).
+- `@egose/shadcn-theme-ng/form-textarea` — multiline sibling reusing the same class hook.
+- `@egose/shadcn-theme-ng/input-group` — joined prefix/input/suffix compositions.
+- `@egose/shadcn-theme-ng/label` — `HlmLabel` for the `<label>` side.

package/input/fesm2022/input.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Directive, NgModule } from '@angular/core';
+import { input, Directive, NgModule } from '@angular/core';
 import * as i2 from '@spartan-ng/brain/field';
 import { BrnFieldControlDescribedBy } from '@spartan-ng/brain/field';
 import * as i1 from '@spartan-ng/brain/input';
@@ -7,31 +7,36 @@ import { BrnInput } from '@spartan-ng/brain/input';
 import { classes } from '@egose/shadcn-theme-ng-tw/utils';
 
 class HlmInput {
+    ariaDescribedby = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaDescribedby" }] : /* istanbul ignore next */ []));
     constructor() {
-        classes(() => 'dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 data-[matches-spartan-invalid=true]:ring-destructive/20 dark:data-[matches-spartan-invalid=true]:ring-destructive/40 data-[matches-spartan-invalid=true]:border-destructive dark:data-[matches-spartan-invalid=true]:border-destructive/50 h-9 rounded-md border bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] file:h-7 file:text-sm file:font-medium focus-visible:ring-3 data-[matches-spartan-invalid=true]:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50');
+        classes(() => 'tw:dark:bg-input/30 tw:border-input tw:focus-visible:border-ring tw:focus-visible:ring-ring/50 tw:data-[matches-spartan-invalid=true]:ring-destructive/20 tw:dark:data-[matches-spartan-invalid=true]:ring-destructive/40 tw:data-[matches-spartan-invalid=true]:border-destructive tw:dark:data-[matches-spartan-invalid=true]:border-destructive/50 tw:h-9 tw:rounded-md tw:border tw:bg-transparent tw:px-2.5 tw:py-1 tw:text-base tw:shadow-xs tw:transition-[color,box-shadow] tw:file:h-7 tw:file:text-sm tw:file:font-medium tw:focus-visible:ring-3 tw:data-[matches-spartan-invalid=true]:ring-3 tw:md:text-sm tw:file:text-foreground tw:placeholder:text-muted-foreground tw:w-full tw:min-w-0 tw:outline-none tw:file:inline-flex tw:file:border-0 tw:file:bg-transparent tw:disabled:pointer-events-none tw:disabled:cursor-not-allowed tw:disabled:opacity-50');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: HlmInput, isStandalone: true, selector: "[hlmInput]", host: { attributes: { "data-slot": "input" } }, hostDirectives: [{ directive: i1.BrnInput, inputs: ["id", "id", "forceInvalid", "forceInvalid"] }, { directive: i2.BrnFieldControlDescribedBy }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: HlmInput, isStandalone: true, selector: "[hlmInput]", inputs: { ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "input" }, properties: { "attr.aria-describedby": "ariaDescribedby()" } }, hostDirectives: [{ directive: i1.BrnInput, inputs: ["id", "id", "forceInvalid", "forceInvalid"] }, { directive: i2.BrnFieldControlDescribedBy }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmInput, decorators: [{
             type: Directive,
             args: [{
                     selector: '[hlmInput]',
                     hostDirectives: [{ directive: BrnInput, inputs: ['id', 'forceInvalid'] }, BrnFieldControlDescribedBy],
-                    host: { 'data-slot': 'input' },
+                    host: {
+                        'data-slot': 'input',
+                        '[attr.aria-describedby]': 'ariaDescribedby()',
+                    },
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedby", required: false }] }] } });
 
 /*
  * Public API Surface of input
  */
 const HlmInputImports = [HlmInput];
 class HlmInputModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: HlmInputModule, imports: [HlmInput], exports: [HlmInput] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmInputModule });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.3", ngImport: i0, type: HlmInputModule, imports: [HlmInput], exports: [HlmInput] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmInputModule });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmInputModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmInputModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...HlmInputImports],
@@ -44,4 +49,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  */
 
 export { HlmInput, HlmInputImports, HlmInputModule };
-//# sourceMappingURL=input.mjs.map
+

package/input/types/input.d.ts

@@ -3,9 +3,10 @@ import * as i1 from '@spartan-ng/brain/input';
 import * as i2 from '@spartan-ng/brain/field';
 
 declare class HlmInput {
+    readonly ariaDescribedby: i0.InputSignal<string | null>;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<HlmInput, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<HlmInput, "[hlmInput]", never, {}, {}, never, never, true, [{ directive: typeof i1.BrnInput; inputs: { "id": "id"; "forceInvalid": "forceInvalid"; }; outputs: {}; }, { directive: typeof i2.BrnFieldControlDescribedBy; inputs: {}; outputs: {}; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HlmInput, "[hlmInput]", never, { "ariaDescribedby": { "alias": "ariaDescribedby"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.BrnInput; inputs: { "id": "id"; "forceInvalid": "forceInvalid"; }; outputs: {}; }, { directive: typeof i2.BrnFieldControlDescribedBy; inputs: {}; outputs: {}; }]>;
 }
 
 declare const HlmInputImports: readonly [typeof HlmInput];