@egose/shadcn-theme-ng 0.0.28 → 0.2.0

package/checkbox/README.md

@@ -1,64 +1,321 @@
-# Checkbox
+# Checkbox (`@egose/shadcn-theme-ng/checkbox`)
 
-This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.3.0.
+A shadcn/ui-style checkbox — the Angular port of shadcn/ui `Checkbox`. A single standalone `hlm-checkbox` component wraps `BrnCheckbox` from `@spartan-ng/brain/checkbox`, renders the `lucideCheck` icon when checked, and fully implements `ControlValueAccessor`, so it works with `[(checked)]`, `[(ngModel)]`, and reactive `FormControl`s. Supports the tri-state `boolean | 'indeterminate'` model, separate `disabled` (form-aware) vs `wrapperDisabled` (visual-only) locks, and a `changed` output.
 
-## Code scaffolding
+Ships as `@egose/shadcn-theme-ng/checkbox` and `@egose/shadcn-theme-ng-tw/checkbox` (the `tw:`-prefixed variant). See the [package README](../../README.md) for install, peer dependencies, and Tailwind setup. Do not publish this project directory independently — it is consumed via the published subpath only.
 
-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:
+Peers are listed in the [package README](../../README.md). This subpath declares `@angular/common` and `@angular/core` as peers (see `projects/checkbox/package.json`); `FormsModule`/`ReactiveFormsModule` come from your app when you use form bindings.
 
-```bash
-ng generate --help
+## Imports
+
+```ts
+import {
+  HlmCheckbox,
+  HlmCheckboxImports,
+  HlmCheckboxModule,
+  HLM_CHECKBOX_VALUE_ACCESSOR,
+} from '@egose/shadcn-theme-ng/checkbox';
+// tw variant:
+// import { ... } from '@egose/shadcn-theme-ng-tw/checkbox';
 ```
 
-## Building
+Standalone:
 
-To build the library, run:
+```ts
+import { Component } from '@angular/core';
+import { HlmCheckboxImports } from '@egose/shadcn-theme-ng/checkbox';
 
-```bash
-ng build checkbox
+@Component({
+  selector: 'app-demo',
+  standalone: true,
+  imports: [...HlmCheckboxImports],
+  template: `<hlm-checkbox />`,
+})
+export class DemoComponent {}
+```
+
+NgModule:
+
+```ts
+import { NgModule } from '@angular/core';
+import { HlmCheckboxModule } from '@egose/shadcn-theme-ng/checkbox';
+
+@NgModule({ imports: [HlmCheckboxModule] })
+export class DemoModule {}
 ```
 
-This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
+## Anatomy / Structure
 
-### Publishing the Library
+```html
+<!-- Two-way model binding -->
+<hlm-checkbox [(checked)]="accept" aria-label="Accept terms" />
 
-Once the project is built, you can publish your library by following these steps:
+<!-- With visible label -->
+<div class="flex items-center gap-2">
+  <hlm-checkbox id="marketing" [(checked)]="marketing" />
+  <label for="marketing">Email me product updates</label>
+</div>
 
-1. Navigate to the `dist` directory:
+<!-- Reactive form -->
+<hlm-checkbox formControlName="accept" />
 
-   ```bash
-   cd dist/checkbox
-   ```
+<!-- Template-driven -->
+<hlm-checkbox name="accept" [(ngModel)]="accept" />
+```
 
-2. Run the `npm publish` command to publish your library to the npm registry:
-   ```bash
-   npm publish
-   ```
+Real selector: `hlm-checkbox` (element only). The host renders `class="contents peer"` so sibling label/description selectors (`peer-*`) keep working; `id` / `aria-*` attributes are nulled on the host and forwarded to the inner `brn-checkbox` instead. Set a visible label with a native `<label for>` — the component does not render label text itself.
 
-## Running unit tests
+## API reference
 
-To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+### `HlmCheckbox` (`hlm-checkbox`)
 
-```bash
-ng test
+| Input                                  | Type                                | Default | Description                                                                                                                                        |
+| -------------------------------------- | ----------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `checked`                              | `model<boolean \| 'indeterminate'>` | `false` | Checked state. Two-way bindable (`[(checked)]`). `'indeterminate'` renders the checked icon; clicking it resolves to `true`.                       |
+| `class` (`userClass`)                  | `ClassValue`                        | `''`    | Extra classes merged into the box.                                                                                                                 |
+| `id`                                   | `string \| null`                    | `null`  | Forwarded to inner `brn-checkbox`. Pair with `<label for>`.                                                                                        |
+| `aria-label` (`ariaLabel`)             | `string \| null`                    | `null`  | Forwarded aria-label.                                                                                                                              |
+| `aria-labelledby` (`ariaLabelledby`)   | `string \| null`                    | `null`  | Forwarded aria-labelledby.                                                                                                                         |
+| `aria-describedby` (`ariaDescribedby`) | `string \| null`                    | `null`  | Forwarded aria-describedby.                                                                                                                        |
+| `name`                                 | `string \| null`                    | `null`  | Forwarded `name`.                                                                                                                                  |
+| `required`                             | `boolean`                           | `false` | Forwarded `required` (boolean-coerced).                                                                                                            |
+| `disabled`                             | `boolean`                           | `false` | Visual + interaction lock (boolean-coerced). Clicks are ignored.                                                                                   |
+| `wrapperDisabled`                      | `boolean`                           | `false` | Additional visual/interaction lock that does **not** write to a reactive form control (unlike `setDisabledState`). Useful for preview-only states. |
+
+| Signal          | Type              | Description                                                                                                  |
+| --------------- | ----------------- | ------------------------------------------------------------------------------------------------------------ |
+| `disabledState` | `Signal<boolean>` | `disabled() \|\| wrapperDisabled() \|\| formDisabled()` — the effective lock. Host reflects `data-disabled`. |
+
+| Output    | Payload   | Description                                                                                                    |
+| --------- | --------- | -------------------------------------------------------------------------------------------------------------- |
+| `changed` | `boolean` | Emitted on user toggle with the new boolean (`!previous`). Note: toggling from `'indeterminate'` emits `true`. |
+
+ControlValueAccessor: `writeValue(value)`, `registerOnChange`, `registerOnTouched`, `setDisabledState(isDisabled)` (writes `formDisabled`, hence `disabledState`). `HLM_CHECKBOX_VALUE_ACCESSOR` (`NG_VALUE_ACCESSOR`, `forwardRef(HlmCheckbox)`, `multi: true`) is provided on the component.
+
+## Examples
+
+### 1. Basic with label
+
+```ts
+import { Component, signal } from '@angular/core';
+import { HlmCheckboxImports } from '@egose/shadcn-theme-ng/checkbox';
+
+@Component({
+  selector: 'app-basic-checkbox',
+  standalone: true,
+  imports: [...HlmCheckboxImports],
+  template: `
+    <div class="flex items-center gap-2">
+      <hlm-checkbox id="terms" [(checked)]="accept" />
+      <label for="terms" class="text-sm">Accept terms and conditions</label>
+    </div>
+    <p class="mt-2 text-sm">Value: {{ accept() }}</p>
+  `,
+})
+export class BasicCheckboxComponent {
+  readonly accept = signal<boolean | 'indeterminate'>(false);
+}
 ```
 
-## Running end-to-end tests
+### 2. Reactive form with validation
 
-For end-to-end (e2e) testing, run:
+`hlm-checkbox` is a `ControlValueAccessor` — `formControlName` just works, including `disable()`.
 
-```bash
-ng e2e
+```ts
+import { Component } from '@angular/core';
+import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { HlmCheckboxImports } from '@egose/shadcn-theme-ng/checkbox';
+
+@Component({
+  selector: 'app-reactive-checkbox',
+  standalone: true,
+  imports: [ReactiveFormsModule, ...HlmCheckboxImports],
+  template: `
+    <form [formGroup]="form" (ngSubmit)="submit()" class="space-y-3">
+      <div class="flex items-center gap-2">
+        <hlm-checkbox id="accept" formControlName="accept" />
+        <label for="accept" class="text-sm">I agree to the privacy policy</label>
+      </div>
+      @if (form.controls.accept.touched && form.controls.accept.invalid) {
+        <p class="text-destructive text-sm">You must accept to continue.</p>
+      }
+      <button type="submit" [disabled]="form.invalid">Continue</button>
+      <button type="button" (click)="form.controls.accept.disable()">Disable via form</button>
+    </form>
+  `,
+})
+export class ReactiveCheckboxComponent {
+  readonly form = new FormGroup({
+    accept: new FormControl(false, { validators: Validators.requiredTrue, nonNullable: true }),
+  });
+  submit() {
+    console.log(this.form.getRawValue());
+  }
+}
 ```
 
-Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+### 3. Template-driven (`ngModel`)
+
+```ts
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { HlmCheckboxImports } from '@egose/shadcn-theme-ng/checkbox';
+
+@Component({
+  selector: 'app-ngmodel-checkbox',
+  standalone: true,
+  imports: [FormsModule, ...HlmCheckboxImports],
+  template: `
+    <div class="flex items-center gap-2">
+      <hlm-checkbox id="news" name="news" [(ngModel)]="subscribed" aria-label="Subscribe to newsletter" />
+      <label for="news" class="text-sm">Subscribe to newsletter</label>
+    </div>
+  `,
+})
+export class NgModelCheckboxComponent {
+  subscribed = true;
+}
+```
+
+### 4. Indeterminate + select-all pattern
+
+Parent shows `'indeterminate'` when some (not all) children are checked — the classic bulk-select header.
+
+```ts
+import { Component, computed, signal } from '@angular/core';
+import { HlmCheckboxImports } from '@egose/shadcn-theme-ng/checkbox';
+
+@Component({
+  selector: 'app-select-all',
+  standalone: true,
+  imports: [...HlmCheckboxImports],
+  template: `
+    <div class="flex items-center gap-2 border-b pb-2">
+      <hlm-checkbox id="all" [checked]="parentState()" (changed)="toggleAll($event)" aria-label="Select all files" />
+      <label for="all" class="text-sm font-medium">Select all</label>
+    </div>
+    @for (f of files(); track f.id) {
+      <div class="flex items-center gap-2 py-1">
+        <hlm-checkbox [id]="f.id" [checked]="f.done" (changed)="toggleOne(f.id, $event)" />
+        <label [for]="f.id" class="text-sm">{{ f.name }}</label>
+      </div>
+    }
+  `,
+})
+export class SelectAllComponent {
+  readonly files = signal([
+    { id: 'f1', name: 'invoice.pdf', done: true },
+    { id: 'f2', name: 'photo.png', done: false },
+    { id: 'f3', name: 'notes.md', done: false },
+  ]);
+  readonly parentState = computed<boolean | 'indeterminate'>(() => {
+    const all = this.files();
+    if (all.every((f) => f.done)) return true;
+    if (all.some((f) => f.done)) return 'indeterminate';
+    return false;
+  });
+  toggleAll(next: boolean) {
+    this.files.update((fs) => fs.map((f) => ({ ...f, done: next })));
+  }
+  toggleOne(id: string, next: boolean) {
+    this.files.update((fs) => fs.map((f) => (f.id === id ? { ...f, done: next } : f)));
+  }
+}
+```
+
+### 5. Disabled / wrapper-disabled / required states
+
+```ts
+import { Component, signal } from '@angular/core';
+import { HlmCheckboxImports } from '@egose/shadcn-theme-ng/checkbox';
+
+@Component({
+  selector: 'app-states-checkbox',
+  standalone: true,
+  imports: [...HlmCheckboxImports],
+  template: `
+    <div class="space-y-2">
+      <div class="flex items-center gap-2">
+        <hlm-checkbox id="d1" [disabled]="true" aria-label="Disabled unchecked" />
+        <label for="d1" class="text-sm opacity-70">Disabled (unchecked)</label>
+      </div>
+      <div class="flex items-center gap-2">
+        <hlm-checkbox id="d2" [checked]="true" [disabled]="true" aria-label="Disabled checked" />
+        <label for="d2" class="text-sm opacity-70">Disabled (checked)</label>
+      </div>
+      <div class="flex items-center gap-2">
+        <hlm-checkbox id="w1" [wrapperDisabled]="preview()" aria-label="Preview lock" />
+        <label for="w1" class="text-sm">Preview lock (visual only — form value untouched)</label>
+      </div>
+      <div class="flex items-center gap-2">
+        <hlm-checkbox id="r1" [(checked)]="v" [required]="true" aria-label="Required" />
+        <label for="r1" class="text-sm">Required</label>
+      </div>
+    </div>
+  `,
+})
+export class StatesCheckboxComponent {
+  readonly preview = signal(true);
+  v = false;
+}
+```
+
+### 6. Listening to `changed` + custom styling
+
+```ts
+import { Component } from '@angular/core';
+import { HlmCheckboxImports } from '@egose/shadcn-theme-ng/checkbox';
+
+@Component({
+  selector: 'app-changed-checkbox',
+  standalone: true,
+  imports: [...HlmCheckboxImports],
+  template: `
+    <div class="flex items-center gap-2">
+      <hlm-checkbox
+        id="audit"
+        class="data-[state=checked]:border-emerald-600 data-[state=checked]:bg-emerald-600"
+        aria-label="Enable audit log"
+        (changed)="onChanged($event)"
+      />
+      <label for="audit" class="text-sm">Enable audit log</label>
+    </div>
+    <p class="mt-1 text-sm">Last event: {{ lastChanged === null ? 'none' : lastChanged }}</p>
+  `,
+})
+export class ChangedCheckboxComponent {
+  lastChanged: boolean | null = null;
+  onChanged(next: boolean) {
+    this.lastChanged = next;
+    console.log('checkbox changed →', next);
+  }
+}
+```
+
+## Accessibility notes
+
+- The component renders a native-checkbox-equivalent `brn-checkbox` with `aria-label`/`labelledby`/`describedby` forwarding — always provide one: visible `<label for>` preferred, `aria-label` for icon-only rows.
+- `disabledState` adds `data-disabled`, `cursor-not-allowed`, and `opacity-50`; disabled boxes are skipped correctly because clicks early-return.
+- The check glyph is decorative (`lucideCheck` icon, no text) — state is exposed via `data-[state]` / native semantics, not the icon.
+- Tri-state: `'indeterminate'` is a visual/model state, not `aria-checked="mixed"` — if you need mixed semantics for a tree, add `aria-checked` handling at your own level and test with a screen reader.
+
+## Theming / CSS variables
+
+No component-specific CSS variables. The box uses `border-input`, `data-[state=checked]:bg-primary` / `text-primary-foreground`, `focus-visible:ring-ring/50`, `aria-invalid:border-destructive`, `size-4 rounded-[4px]`. Invalid-form styling integrates via `aria-invalid` ring tokens. Pass `class` to extend (merged with `hlm()`).
 
-## 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-checkbox` — labeled + described + validated field composition.
+- `@egose/shadcn-theme-ng/label` — accessible labels for the `for`/`id` pair.
+- `@egose/shadcn-theme-ng/field` — form layout rows that host checkboxes.
+- `@egose/shadcn-theme-ng/icon` — `HlmIcon` sizing used by the inner check glyph.

package/checkbox/fesm2022/checkbox.mjs

@@ -14,7 +14,7 @@ const HLM_CHECKBOX_VALUE_ACCESSOR = {
 };
 class HlmCheckbox {
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
-    _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 shadow-xs peer size-4 shrink-0 cursor-default rounded-[4px] border outline-none transition-shadow focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50', this.userClass(), this._state().disabled() ? 'cursor-not-allowed opacity-50' : ''), /* @ts-ignore */
+    _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 shadow-xs peer size-4 shrink-0 cursor-default rounded-[4px] border outline-none transition-shadow focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50", this.userClass(), this.disabledState() ? "cursor-not-allowed opacity-50" : ''), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_computedClass" }] : /* istanbul ignore next */ []));
     /** Used to set the id on the underlying brn element. */
     id = input(null, /* @ts-ignore */
@@ -35,15 +35,17 @@ class HlmCheckbox {
     required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Whether the checkbox is disabled. */
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    _state = computed(() => ({
-        disabled: signal(this.disabled()),
-    }), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_state" }] : /* istanbul ignore next */ []));
+    /** Additional visual/interaction lock that does not write to a reactive form control. */
+    wrapperDisabled = input(false, { ...(ngDevMode ? { debugName: "wrapperDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    formDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []));
+    disabledState = computed(() => this.disabled() || this.wrapperDisabled() || this.formDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
     changed = output();
     _onChange;
     _onTouched;
     _handleChange() {
-        if (this._state().disabled())
+        if (this.disabledState())
             return;
         const previousChecked = this.checked();
         this.checked.set(previousChecked === 'indeterminate' ? true : !previousChecked);
@@ -61,81 +63,41 @@ class HlmCheckbox {
         this._onTouched = fn;
     }
     setDisabledState(isDisabled) {
-        this._state().disabled.set(isDisabled);
+        this.formDisabled.set(isDisabled);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: HlmCheckbox, isStandalone: true, selector: "hlm-checkbox", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", changed: "changed" }, host: { properties: { "attr.id": "null", "attr.aria-label": "null", "attr.aria-labelledby": "null", "attr.aria-describedby": "null", "attr.data-disabled": "_state().disabled() ? \"\" : null" }, classAttribute: "contents peer" }, providers: [HLM_CHECKBOX_VALUE_ACCESSOR], ngImport: i0, template: `
-    <brn-checkbox
-      [id]="id()"
-      [name]="name()"
-      [class]="_computedClass()"
-      [checked]="checked()"
-      [disabled]="_state().disabled()"
-      [required]="required()"
-      [aria-label]="ariaLabel()"
-      [aria-labelledby]="ariaLabelledby()"
-      [aria-describedby]="ariaDescribedby()"
-      (changed)="_handleChange()"
-      (touched)="_onTouched?.()"
-    >
-      @if (checked()) {
-        <span class="flex items-center justify-center text-current transition-none">
-          <ng-icon hlm size="14px" name="lucideCheck" />
-        </span>
-      }
-    </brn-checkbox>
-  `, isInline: true, dependencies: [{ kind: "component", type: BrnCheckbox, selector: "brn-checkbox", inputs: ["checked", "indeterminate", "id", "name", "class", "hostStyles", "aria-label", "aria-labelledby", "aria-describedby", "required", "disabled", "forceInvalid"], outputs: ["checkedChange", "indeterminateChange", "touched"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: HlmIcon, selector: "ng-icon[hlm]", inputs: ["size"] }], viewProviders: [provideIcons({ lucideCheck })], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: HlmCheckbox, isStandalone: true, selector: "hlm-checkbox", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, wrapperDisabled: { classPropertyName: "wrapperDisabled", publicName: "wrapperDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", changed: "changed" }, host: { properties: { "attr.id": "null", "attr.aria-label": "null", "attr.aria-labelledby": "null", "attr.aria-describedby": "null", "attr.data-disabled": "disabledState() ? \"\" : null" }, classAttribute: "contents peer" }, providers: [HLM_CHECKBOX_VALUE_ACCESSOR], ngImport: i0, template: "\n    <brn-checkbox\n      [id]=\"id()\"\n      [name]=\"name()\"\n      [class]=\"_computedClass()\"\n      [checked]=\"checked()\"\n      [disabled]=\"disabledState()\"\n      [required]=\"required()\"\n      [aria-label]=\"ariaLabel()\"\n      [aria-labelledby]=\"ariaLabelledby()\"\n      [aria-describedby]=\"ariaDescribedby()\"\n      (changed)=\"_handleChange()\"\n      (touched)=\"_onTouched?.()\"\n    >\n      @if (checked()) {\n        <span class=\"flex items-center justify-center text-current transition-none\">\n          <ng-icon hlm size=\"14px\" name=\"lucideCheck\" />\n        </span>\n      }\n    </brn-checkbox>\n  ", isInline: true, dependencies: [{ kind: "component", type: BrnCheckbox, selector: "brn-checkbox", inputs: ["checked", "indeterminate", "id", "name", "class", "hostStyles", "aria-label", "aria-labelledby", "aria-describedby", "required", "disabled", "forceInvalid"], outputs: ["checkedChange", "indeterminateChange", "touched"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: HlmIcon, selector: "ng-icon[hlm]", inputs: ["size"] }], viewProviders: [provideIcons({ lucideCheck })], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmCheckbox, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCheckbox, decorators: [{
             type: Component,
             args: [{
                     selector: 'hlm-checkbox',
                     imports: [BrnCheckbox, NgIcon, HlmIcon],
-                    template: `
-    <brn-checkbox
-      [id]="id()"
-      [name]="name()"
-      [class]="_computedClass()"
-      [checked]="checked()"
-      [disabled]="_state().disabled()"
-      [required]="required()"
-      [aria-label]="ariaLabel()"
-      [aria-labelledby]="ariaLabelledby()"
-      [aria-describedby]="ariaDescribedby()"
-      (changed)="_handleChange()"
-      (touched)="_onTouched?.()"
-    >
-      @if (checked()) {
-        <span class="flex items-center justify-center text-current transition-none">
-          <ng-icon hlm size="14px" name="lucideCheck" />
-        </span>
-      }
-    </brn-checkbox>
-  `,
+                    template: "\n    <brn-checkbox\n      [id]=\"id()\"\n      [name]=\"name()\"\n      [class]=\"_computedClass()\"\n      [checked]=\"checked()\"\n      [disabled]=\"disabledState()\"\n      [required]=\"required()\"\n      [aria-label]=\"ariaLabel()\"\n      [aria-labelledby]=\"ariaLabelledby()\"\n      [aria-describedby]=\"ariaDescribedby()\"\n      (changed)=\"_handleChange()\"\n      (touched)=\"_onTouched?.()\"\n    >\n      @if (checked()) {\n        <span class=\"flex items-center justify-center text-current transition-none\">\n          <ng-icon hlm size=\"14px\" name=\"lucideCheck\" />\n        </span>\n      }\n    </brn-checkbox>\n  ",
                     host: {
                         class: 'contents peer',
                         '[attr.id]': 'null',
                         '[attr.aria-label]': 'null',
                         '[attr.aria-labelledby]': 'null',
                         '[attr.aria-describedby]': 'null',
-                        '[attr.data-disabled]': '_state().disabled() ? "" : null',
+                        '[attr.data-disabled]': 'disabledState() ? "" : null',
                     },
                     providers: [HLM_CHECKBOX_VALUE_ACCESSOR],
                     viewProviders: [provideIcons({ lucideCheck })],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], wrapperDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrapperDisabled", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
 
 /*
  * Public API Surface of checkbox
  */
 const HlmCheckboxImports = [HlmCheckbox];
 class HlmCheckboxModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: HlmCheckboxModule, imports: [HlmCheckbox], exports: [HlmCheckbox] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmCheckboxModule, imports: [HlmCheckboxImports] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.3", ngImport: i0, type: HlmCheckboxModule, imports: [HlmCheckbox], exports: [HlmCheckbox] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCheckboxModule, imports: [HlmCheckboxImports] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmCheckboxModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCheckboxModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...HlmCheckboxImports],
@@ -148,4 +110,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  */
 
 export { HLM_CHECKBOX_VALUE_ACCESSOR, HlmCheckbox, HlmCheckboxImports, HlmCheckboxModule };
-//# sourceMappingURL=checkbox.mjs.map
+

package/checkbox/types/checkbox.d.ts

@@ -28,9 +28,10 @@ declare class HlmCheckbox implements ControlValueAccessor {
     readonly required: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
     /** Whether the checkbox is disabled. */
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
-    protected readonly _state: _angular_core.Signal<{
-        disabled: _angular_core.WritableSignal<boolean>;
-    }>;
+    /** Additional visual/interaction lock that does not write to a reactive form control. */
+    readonly wrapperDisabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    private readonly formDisabled;
+    readonly disabledState: _angular_core.Signal<boolean>;
     readonly changed: _angular_core.OutputEmitterRef<boolean>;
     protected _onChange?: ChangeFn<CheckboxValue>;
     protected _onTouched?: TouchFn;
@@ -41,7 +42,7 @@ declare class HlmCheckbox implements ControlValueAccessor {
     registerOnTouched(fn: TouchFn): void;
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<HlmCheckbox, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HlmCheckbox, "hlm-checkbox", never, { "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "ariaDescribedby": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; "changed": "changed"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HlmCheckbox, "hlm-checkbox", never, { "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "ariaDescribedby": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "wrapperDisabled": { "alias": "wrapperDisabled"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; "changed": "changed"; }, never, never, true, never>;
 }
 type CheckboxValue = boolean | 'indeterminate';