@egose/shadcn-theme-ng-tw 0.1.0 → 0.3.0

package/input-group/fesm2022/input-group.mjs

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { Directive, input, NgModule } from '@angular/core';
-import { classes } from '@egose/shadcn-theme-ng-tw/utils';
+import { Directive, input, inject, effect, NgModule } from '@angular/core';
+import { classes, hlm } from '@egose/shadcn-theme-ng-tw/utils';
 import { cva } from 'class-variance-authority';
 import * as i1 from '@egose/shadcn-theme-ng-tw/button';
-import { provideBrnButtonConfig, HlmBtn } from '@egose/shadcn-theme-ng-tw/button';
+import { HlmBtn, provideBrnButtonConfig } from '@egose/shadcn-theme-ng-tw/button';
 import * as i1$1 from '@egose/shadcn-theme-ng-tw/input';
 import { HlmInput } from '@egose/shadcn-theme-ng-tw/input';
 import * as i1$2 from '@egose/shadcn-theme-ng-tw/textarea';
@@ -11,7 +11,7 @@ import { HlmTextarea } from '@egose/shadcn-theme-ng-tw/textarea';
 
 class HlmInputGroup {
     constructor() {
-        classes(() => 'tw:border-input tw:dark:bg-input/30 tw:has-[[data-slot=input-group-control]:focus-visible]:border-ring tw:has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 tw:has-[[data-slot][data-matches-spartan-invalid=true]]:ring-destructive/20 tw:has-[[data-slot][data-matches-spartan-invalid=true]]:border-destructive tw:dark:has-[[data-slot][data-matches-spartan-invalid=true]]:ring-destructive/40 tw:h-9 tw:rounded-md tw:border tw:shadow-xs tw:transition-[color,box-shadow] tw:in-data-[slot=combobox-content]:focus-within:border-inherit tw:in-data-[slot=combobox-content]:focus-within:ring-0 tw:has-[[data-slot=input-group-control]:focus-visible]:ring-3 tw:has-[[data-slot][data-matches-spartan-invalid=true]]:ring-3 tw:has-[>[data-align=block-end]]:h-auto tw:has-[>[data-align=block-end]]:flex-col tw:has-[>[data-align=block-start]]:h-auto tw:has-[>[data-align=block-start]]:flex-col tw:has-[>[data-align=block-end]]:[&>input]:pt-3 tw:has-[>[data-align=block-start]]:[&>input]:pb-3 tw:has-[>[data-align=inline-end]]:[&>input]:pe-1.5 tw:has-[>[data-align=inline-start]]:[&>input]:ps-1.5 tw:group/input-group tw:relative tw:flex tw:w-full tw:min-w-0 tw:items-center tw:outline-none tw:has-[>textarea]:h-auto');
+        classes(() => 'tw:border-input tw:dark:bg-input/30 tw:has-[[data-slot=input-group-control]:focus-visible]:border-ring tw:has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 tw:has-[[data-slot][data-matches-spartan-invalid=true]]:ring-destructive/20 tw:has-[[data-slot][data-matches-spartan-invalid=true]]:border-destructive tw:dark:has-[[data-slot][data-matches-spartan-invalid=true]]:ring-destructive/40 tw:h-9 tw:rounded-md tw:border tw:shadow-xs tw:transition-[color,box-shadow] tw:in-data-[slot=combobox-content]:focus-within:border-inherit tw:in-data-[slot=combobox-content]:focus-within:ring-0 tw:has-[[data-slot=input-group-control]:focus-visible]:ring-3 tw:has-[[data-slot][data-matches-spartan-invalid=true]]:ring-3 tw:has-[>[data-align=block-end]]:h-auto tw:has-[>[data-align=block-end]]:flex-col tw:has-[>[data-align=block-start]]:h-auto tw:has-[>[data-align=block-start]]:flex-col tw:has-[>[data-align=block-end]]:[&>input]:pt-3 tw:has-[>[data-align=block-start]]:[&>input]:pb-3 tw:has-[>[data-align=inline-end]]:[&>input]:pe-1.5 tw:has-[>[data-align=inline-start]]:[&>input]:ps-1.5 tw:group/input-group tw:relative tw:flex tw:w-full tw:min-w-0 tw:max-w-full tw:items-center tw:outline-none tw:has-[>textarea]:h-auto');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmInputGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmInputGroup, isStandalone: true, selector: "[hlmInputGroup],hlm-input-group", host: { attributes: { "data-slot": "input-group", "role": "group" } }, ngImport: i0 });
@@ -27,17 +27,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
-const inputGroupAddonVariants$1 = cva("tw:text-muted-foreground tw:h-auto tw:gap-2 tw:py-1.5 tw:text-sm tw:font-medium tw:group-data-[disabled=true]/input-group:opacity-50 tw:[&>kbd]:rounded-[calc(var(--radius)-5px)] tw:[&>ng-icon:not([class*='text-'])]:text-[length:--spacing(4)] tw:flex tw:cursor-text tw:items-center tw:justify-center tw:select-none", {
+const inputGroupAddonVariants$1 = cva("tw:text-muted-foreground tw:h-auto tw:gap-2 tw:py-1.5 tw:text-sm tw:font-medium tw:group-data-[disabled=true]/input-group:opacity-50 tw:[&>kbd]:rounded-[calc(var(--radius)-5px)] tw:[&>ng-icon:not([class*='text-'])]:text-[length:--spacing(4)] tw:flex tw:shrink-0 tw:cursor-text tw:items-center tw:justify-center tw:select-none", {
     variants: {
         align: {
             'inline-start': 'tw:ps-2 tw:has-[>button]:-ms-1 tw:has-[>kbd]:ms-[-0.15rem] tw:order-first',
-            'inline-end': 'tw:pe-2 tw:has-[>button]:-me-1 tw:has-[>kbd]:me-[-0.15rem] tw:order-last',
+            'inline-end': 'tw:pe-2 tw:has-[>button]:pe-1 tw:has-[>kbd]:me-[-0.15rem] tw:order-last',
             'block-start': 'tw:px-2.5 tw:pt-2 tw:group-has-[>input]/input-group:pt-2 tw:[.border-b]:pb-2 tw:order-first tw:w-full tw:justify-start',
             'block-end': 'tw:px-2.5 tw:pb-2 tw:group-has-[>input]/input-group:pb-2 tw:[.border-t]:pt-2 tw:order-last tw:w-full tw:justify-start',
         },
     },
     defaultVariants: {
-        align: "tw:inline-start",
+        align: 'inline-start',
     },
 });
 class HlmInputGroupAddon {
@@ -64,10 +64,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
 const inputGroupAddonVariants = cva('tw:gap-2 tw:text-sm tw:flex tw:items-center tw:shadow-none', {
     variants: {
         size: {
-            xs: "tw:h-6 tw:gap-1 tw:rounded-[calc(var(--radius)-5px)] tw:px-1.5 tw:[&>ng-icon:not([class*='text-'])]:text-[length:--spacing(3.5)]",
+            xs: "tw:h-6 tw:gap-1 tw:rounded-[calc(var(--radius)-5px)] tw:px-1.5 tw:[&>ng-icon:not([class*='text-'])]:text-[length:--spacing(3.5)] tw:[&_svg:not([class*='size-'])]:size-3.5",
             sm: '',
-            'icon-xs': 'tw:size-6 tw:rounded-[calc(var(--radius)-5px)] tw:p-0 tw:has-[>ng-icon]:p-0',
-            'icon-sm': 'tw:size-8 tw:p-0 tw:has-[>ng-icon]:p-0',
+            'icon-xs': "tw:size-6 tw:rounded-[calc(var(--radius)-5px)] tw:p-0 tw:has-[>ng-icon]:p-0 tw:[&>ng-icon:not([class*='text-'])]:text-[length:--spacing(3)] tw:[&_svg:not([class*='size-'])]:size-3",
+            'icon-sm': "tw:size-8 tw:p-0 tw:has-[>ng-icon]:p-0 tw:[&>ng-icon:not([class*='text-'])]:text-[length:--spacing(4)] tw:[&_svg:not([class*='size-'])]:size-4",
         },
     },
     defaultVariants: {
@@ -75,15 +75,25 @@ const inputGroupAddonVariants = cva('tw:gap-2 tw:text-sm tw:flex tw:items-center
     },
 });
 class HlmInputGroupButton {
+    _btn = inject(HlmBtn);
     size = input('xs', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     type = input('button', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
     constructor() {
-        classes(() => inputGroupAddonVariants({ size: this.size() }));
+        // HlmBtn renders its classes through a `[class]` host binding, so layering
+        // another `classes()` call here would lose: the binding output is treated
+        // as base classes and merged last, letting HlmBtn's default `h-9 px-4 py-2`
+        // beat the input-group sizing and push the button onto the outer
+        // container's borders. Route the variant through `setClass()` instead so it
+        // wins over the button defaults while explicit `class` values still win.
+        effect(() => {
+            this._btn.setClass(hlm(inputGroupAddonVariants({ size: this.size() }), this.userClass()));
+        });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmInputGroupButton, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: HlmInputGroupButton, isStandalone: true, selector: "button[hlmInputGroupButton]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-size": "size()", "type": "type()" } }, providers: [
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: HlmInputGroupButton, isStandalone: true, selector: "button[hlmInputGroupButton]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-size": "size()", "type": "type()" } }, providers: [
             provideBrnButtonConfig({
                 variant: 'ghost',
             }),
@@ -109,7 +119,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
                         '[type]': 'type()',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 class HlmInputGroupInput {
     constructor() {

package/input-group/types/input-group.d.ts

@@ -1,4 +1,5 @@
 import * as i0 from '@angular/core';
+import { ClassValue } from 'clsx';
 import * as i1 from '@egose/shadcn-theme-ng-tw/button';
 import * as i1$1 from '@egose/shadcn-theme-ng-tw/input';
 import * as i1$2 from '@egose/shadcn-theme-ng-tw/textarea';
@@ -17,11 +18,13 @@ declare class HlmInputGroupAddon {
 }
 
 declare class HlmInputGroupButton {
+    private readonly _btn;
     readonly size: i0.InputSignal<"xs" | "sm" | "icon-xs" | "icon-sm" | null | undefined>;
     readonly type: i0.InputSignal<"button" | "submit" | "reset">;
+    readonly userClass: i0.InputSignal<ClassValue>;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<HlmInputGroupButton, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<HlmInputGroupButton, "button[hlmInputGroupButton]", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.HlmBtn; inputs: { "variant": "variant"; }; outputs: {}; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HlmInputGroupButton, "button[hlmInputGroupButton]", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.HlmBtn; inputs: { "variant": "variant"; }; outputs: {}; }]>;
 }
 
 declare class HlmInputGroupInput {

package/input-otp/README.md

@@ -1,11 +1,381 @@
-# InputOtp
+# Input OTP (`@egose/shadcn-theme-ng/input-otp`)
 
-This project was generated using [Angular CLI](https://github.com/angular/angular-cli).
+One-time-password entry: a row of individual character slots (with a blinking fake caret) that behaves as a single field — the shadcn/ui _InputOTP_ equivalent (6-digit SMS/email verification codes, 2FA, invite codes). Keystroke handling, paste splitting, and the `ControlValueAccessor` come from spartan-ng's `BrnInputOtp` family; this subpath adds the shadcn slot styling, group wrapper, separator glyph, and fake caret.
 
-## Building
+> **Ships as:** `@egose/shadcn-theme-ng/input-otp` (plain Tailwind) and `@egose/shadcn-theme-ng-tw/input-otp` (`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.
 
-To build the library, run:
+## Installation
 
 ```bash
-ng build input-otp
+# Plain Tailwind (no prefix)
+npm install @egose/shadcn-theme-ng
+
+# Or the tw:-prefixed variant
+npm install @egose/shadcn-theme-ng-tw
+```
+
+Peer dependencies (Angular, CDK, `@spartan-ng/brain`, `rxjs`) are documented in the [package README](../../README.md#peer-dependencies).
+
+```ts
+import { HlmInputOtpImports } from '@egose/shadcn-theme-ng/input-otp';
+// tw variant:
+// import { HlmInputOtpImports } from '@egose/shadcn-theme-ng-tw/input-otp';
+```
+
+## Imports
+
+The behavior host `BrnInputOtp` lives in `@spartan-ng/brain/input-otp` — import it alongside the styling imports:
+
+```ts
+// Standalone component:
+import { BrnInputOtp } from '@spartan-ng/brain/input-otp';
+import { HlmInputOtpImports } from '@egose/shadcn-theme-ng/input-otp';
+
+@Component({
+  standalone: true,
+  imports: [BrnInputOtp, HlmInputOtpImports],
+  template: `
+    <brn-input-otp hlmInputOtp [length]="6">
+      <div hlmInputOtpGroup>
+        <hlm-input-otp-slot index="0" />
+        <hlm-input-otp-slot index="1" />
+        <hlm-input-otp-slot index="2" />
+      </div>
+      <hlm-input-otp-separator />
+      <div hlmInputOtpGroup>
+        <hlm-input-otp-slot index="3" />
+        <hlm-input-otp-slot index="4" />
+        <hlm-input-otp-slot index="5" />
+      </div>
+    </brn-input-otp>
+  `,
+})
+export class MyComp {}
 ```
+
+```ts
+// NgModule-based:
+import { HlmInputOtpModule } from '@egose/shadcn-theme-ng/input-otp';
+
+@NgModule({ imports: [BrnInputOtp, HlmInputOtpModule] })
+export class MyModule {}
+```
+
+Exported from `src/public-api.ts`: `HlmInputOtp`, `HlmInputOtpGroup`, `HlmInputOtpSeparator`, `HlmInputOtpSlot`, `HlmInputOtpFakeCaret`, plus `HlmInputOtpImports` and `HlmInputOtpModule`.
+
+## Anatomy / Structure
+
+```html
+<label for="otp-code">Verification code</label>
+<brn-input-otp hlmInputOtp [length]="6" inputId="otp-code">
+  <div hlmInputOtpGroup>
+    <hlm-input-otp-slot index="0" />
+    <hlm-input-otp-slot index="1" />
+    <hlm-input-otp-slot index="2" />
+  </div>
+  <hlm-input-otp-separator />
+  <div hlmInputOtpGroup>
+    <hlm-input-otp-slot index="3" />
+    <hlm-input-otp-slot index="4" />
+    <hlm-input-otp-slot index="5" />
+  </div>
+</brn-input-otp>
+```
+
+Real selectors: `brn-input-otp[hlmInputOtp]` / `brn-input-otp[hlm]` (flex row container, `data-slot="input-otp"`); `[hlmInputOtpGroup]` / `hlm-input-otp-group` (slot cluster, `data-slot="input-otp-group"`); `hlm-input-otp-slot` (component, requires `index`, renders `brn-input-otp-slot` + `hlm-input-otp-fake-caret`); `hlm-input-otp-separator` (component, `role="separator"`, `lucideMinus` glyph); `hlm-input-otp-fake-caret` (blinking caret block, usually not used directly — the slot renders it).
+
+Brain inputs on `brn-input-otp` (from `@spartan-ng/brain/input-otp`): `length` (**required**), `value` / `valueChange`, `completed`, `disabled`, `inputId`, `inputAutocomplete`, `inputMode`, `inputClass`, `autofocus`, `transformPaste`, `hostStyles` / `inputStyles` / `containerStyles`.
+
+## API reference
+
+### `brn-input-otp[hlmInputOtp]` — `HlmInputOtp`
+
+Pure styling directive (`data-slot="input-otp"`, flex row, dims on `has-disabled`). No inputs/outputs — bind `length`, `value`, `disabled`, `inputId`, … on the `brn-input-otp` element itself.
+
+### `[hlmInputOtpGroup]` — `HlmInputOtpGroup`
+
+Slot cluster wrapper (`data-slot="input-otp-group"`). No inputs/outputs. Use one group per visual cluster (e.g. `3+3` with a separator, or a single group of 4/6).
+
+### `hlm-input-otp-slot` — `HlmInputOtpSlot`
+
+| Input   | Type                                               | Description                                              |
+| ------- | -------------------------------------------------- | -------------------------------------------------------- |
+| `index` | `number` (**required**, `numberAttribute` coerced) | Zero-based position of the character this slot displays. |
+
+Renders `<brn-input-otp-slot [index]>` internally; active slot gets the `ring` highlight, invalid state the destructive border.
+
+### `hlm-input-otp-separator` — `HlmInputOtpSeparator`
+
+Visual `-` divider between groups (`role="separator"`, `lucideMinus` via `ng-icon`). No inputs/outputs.
+
+### `hlm-input-otp-fake-caret` — `HlmInputOtpFakeCaret`
+
+Blinking caret block rendered inside each slot. No inputs/outputs; not normally instantiated directly.
+
+## Examples
+
+### 1. Basic 6-digit code (3+3 with separator)
+
+```ts
+import { Component } from '@angular/core';
+import { BrnInputOtp } from '@spartan-ng/brain/input-otp';
+import { HlmInputOtpImports } from '@egose/shadcn-theme-ng/input-otp';
+
+@Component({
+  standalone: true,
+  imports: [BrnInputOtp, HlmInputOtpImports],
+  template: `
+    <label for="otp-code">Verification code</label>
+    <brn-input-otp hlmInputOtp [length]="6" inputId="otp-code">
+      <div hlmInputOtpGroup>
+        <hlm-input-otp-slot index="0" />
+        <hlm-input-otp-slot index="1" />
+        <hlm-input-otp-slot index="2" />
+      </div>
+      <hlm-input-otp-separator />
+      <div hlmInputOtpGroup>
+        <hlm-input-otp-slot index="3" />
+        <hlm-input-otp-slot index="4" />
+        <hlm-input-otp-slot index="5" />
+      </div>
+    </brn-input-otp>
+  `,
+})
+export class BasicExample {}
+```
+
+### 2. Reactive form + auto-submit on `completed`
+
+```ts
+import { Component } from '@angular/core';
+import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { BrnInputOtp } from '@spartan-ng/brain/input-otp';
+import { HlmInputOtpImports } from '@egose/shadcn-theme-ng/input-otp';
+
+@Component({
+  standalone: true,
+  imports: [ReactiveFormsModule, BrnInputOtp, HlmInputOtpImports],
+  template: `
+    <form [formGroup]="form">
+      <label for="otp">Enter the 6-digit code</label>
+      <brn-input-otp
+        hlmInputOtp
+        formControlName="code"
+        [length]="6"
+        inputId="otp"
+        inputMode="numeric"
+        inputAutocomplete="one-time-code"
+        (completed)="verify()"
+      >
+        <div hlmInputOtpGroup>
+          <hlm-input-otp-slot index="0" />
+          <hlm-input-otp-slot index="1" />
+          <hlm-input-otp-slot index="2" />
+          <hlm-input-otp-slot index="3" />
+          <hlm-input-otp-slot index="4" />
+          <hlm-input-otp-slot index="5" />
+        </div>
+      </brn-input-otp>
+      <p class="tw:text-sm">Value: {{ form.value.code }}</p>
+    </form>
+  `,
+})
+export class ReactiveExample {
+  readonly form = new FormGroup({
+    code: new FormControl<string>('', { nonNullable: true, validators: [Validators.minLength(6)] }),
+  });
+
+  verify() {
+    console.log('verifying', this.form.value.code);
+  }
+}
+```
+
+### 3. Two-way value binding + controlled value
+
+```ts
+import { Component, signal } from '@angular/core';
+import { BrnInputOtp } from '@spartan-ng/brain/input-otp';
+import { HlmInputOtpImports } from '@egose/shadcn-theme-ng/input-otp';
+
+@Component({
+  standalone: true,
+  imports: [BrnInputOtp, HlmInputOtpImports],
+  template: `
+    <brn-input-otp hlmInputOtp [length]="4" [value]="pin()" (valueChange)="pin.set($event)" inputId="pin">
+      <div hlmInputOtpGroup>
+        <hlm-input-otp-slot index="0" />
+        <hlm-input-otp-slot index="1" />
+        <hlm-input-otp-slot index="2" />
+        <hlm-input-otp-slot index="3" />
+      </div>
+    </brn-input-otp>
+    <div class="tw:flex tw:gap-2">
+      <button type="button" (click)="pin.set('')">Clear</button>
+      <button type="button" (click)="pin.set('1234')">Fill demo</button>
+    </div>
+  `,
+})
+export class ControlledExample {
+  readonly pin = signal('');
+}
+```
+
+### 4. Different lengths: 4-digit PIN vs 8-char invite code
+
+```ts
+import { Component } from '@angular/core';
+import { BrnInputOtp } from '@spartan-ng/brain/input-otp';
+import { HlmInputOtpImports } from '@egose/shadcn-theme-ng/input-otp';
+
+@Component({
+  standalone: true,
+  imports: [BrnInputOtp, HlmInputOtpImports],
+  template: `
+    <label for="pin">Card PIN (4 digits)</label>
+    <brn-input-otp hlmInputOtp [length]="4" inputId="pin" inputMode="numeric">
+      <div hlmInputOtpGroup>
+        <hlm-input-otp-slot index="0" />
+        <hlm-input-otp-slot index="1" />
+        <hlm-input-otp-slot index="2" />
+        <hlm-input-otp-slot index="3" />
+      </div>
+    </brn-input-otp>
+
+    <label for="invite">Invite code (8 characters, two groups of 4)</label>
+    <brn-input-otp hlmInputOtp [length]="8" inputId="invite" inputMode="text">
+      <div hlmInputOtpGroup>
+        <hlm-input-otp-slot index="0" />
+        <hlm-input-otp-slot index="1" />
+        <hlm-input-otp-slot index="2" />
+        <hlm-input-otp-slot index="3" />
+      </div>
+      <hlm-input-otp-separator />
+      <div hlmInputOtpGroup>
+        <hlm-input-otp-slot index="4" />
+        <hlm-input-otp-slot index="5" />
+        <hlm-input-otp-slot index="6" />
+        <hlm-input-otp-slot index="7" />
+      </div>
+    </brn-input-otp>
+  `,
+})
+export class LengthsExample {}
+```
+
+### 5. Disabled + error display with resend flow
+
+```ts
+import { Component, signal } from '@angular/core';
+import { BrnInputOtp } from '@spartan-ng/brain/input-otp';
+import { HlmInputOtpImports } from '@egose/shadcn-theme-ng/input-otp';
+import { HlmError } from '@egose/shadcn-theme-ng/form-field';
+
+@Component({
+  standalone: true,
+  imports: [BrnInputOtp, HlmInputOtpImports, HlmError],
+  template: `
+    <label for="otp-verify">Verification code</label>
+    <brn-input-otp
+      hlmInputOtp
+      [length]="6"
+      inputId="otp-verify"
+      inputMode="numeric"
+      inputAutocomplete="one-time-code"
+      [disabled]="verifying()"
+      [value]="code()"
+      (valueChange)="code.set($event); error.set(null)"
+      (completed)="verify()"
+      aria-describedby="otp-error"
+    >
+      <div hlmInputOtpGroup>
+        <hlm-input-otp-slot index="0" />
+        <hlm-input-otp-slot index="1" />
+        <hlm-input-otp-slot index="2" />
+      </div>
+      <hlm-input-otp-separator />
+      <div hlmInputOtpGroup>
+        <hlm-input-otp-slot index="3" />
+        <hlm-input-otp-slot index="4" />
+        <hlm-input-otp-slot index="5" />
+      </div>
+    </brn-input-otp>
+    @if (error()) {
+      <hlm-error id="otp-error">{{ error() }}</hlm-error>
+    }
+    <button type="button" (click)="resend()" [disabled]="verifying()">
+      {{ verifying() ? 'Verifying…' : 'Resend code' }}
+    </button>
+  `,
+})
+export class VerifyFlowExample {
+  readonly code = signal('');
+  readonly error = signal<string | null>(null);
+  readonly verifying = signal(false);
+
+  verify() {
+    this.verifying.set(true);
+    setTimeout(() => {
+      this.verifying.set(false);
+      if (this.code() !== '123456') {
+        this.error.set('That code is incorrect. Try again or resend.');
+        this.code.set('');
+      }
+    }, 900);
+  }
+
+  resend() {
+    this.error.set(null);
+    this.code.set('');
+  }
+}
+```
+
+### 6. Paste normalization with `transformPaste`
+
+```ts
+import { Component } from '@angular/core';
+import { BrnInputOtp } from '@spartan-ng/brain/input-otp';
+import { HlmInputOtpImports } from '@egose/shadcn-theme-ng/input-otp';
+
+@Component({
+  standalone: true,
+  imports: [BrnInputOtp, HlmInputOtpImports],
+  template: `
+    <label for="otp-paste">Code (pasting “12-34-56” works)</label>
+    <brn-input-otp hlmInputOtp [length]="6" inputId="otp-paste" [transformPaste]="stripSeparators">
+      <div hlmInputOtpGroup>
+        <hlm-input-otp-slot index="0" />
+        <hlm-input-otp-slot index="1" />
+        <hlm-input-otp-slot index="2" />
+        <hlm-input-otp-slot index="3" />
+        <hlm-input-otp-slot index="4" />
+        <hlm-input-otp-slot index="5" />
+      </div>
+    </brn-input-otp>
+  `,
+})
+export class PasteExample {
+  stripSeparators(pasted: string): string {
+    return pasted.replace(/[^0-9]/g, '').slice(0, 6);
+  }
+}
+```
+
+## Accessibility notes
+
+- Always render a visible `<label>` bound via `inputId` — the hidden native input is what AT focuses; without the label the purpose is unclear.
+- `inputMode="numeric"` (digits) vs `text` (alphanumeric) selects the right mobile keyboard; `inputAutocomplete="one-time-code"` lets browsers/OS autofill SMS codes.
+- Announce failures with a text error (`<hlm-error>` + `aria-describedby`), never by slot color alone.
+- Keep `length` aligned with what the backend expects and validate `minLength(length)` on the form control so incomplete codes cannot submit.
+
+## Theming / CSS variables
+
+No component-specific CSS variables; slots use the shared `--input` / `--ring` / `--destructive` tokens. Slot size is fixed (`size-9`); adjust grouping/spacing with wrapper classes rather than per-slot overrides.
+
+## Related subpaths
+
+- `@egose/shadcn-theme-ng/input` — single-field `HlmInput` for non-OTP entry.
+- `@egose/shadcn-theme-ng/form-field` — `HlmError`/`HlmHint` for code error text.
+- `@egose/shadcn-theme-ng/button` — Verify/Resend actions.
+- `@egose/shadcn-theme-ng/form-text-input` — labeled wrapper pattern to mirror for OTP forms.