@egose/shadcn-theme-ng 0.2.0 → 0.4.0

package/README.md

@@ -138,7 +138,7 @@ Import by component name. Component `NameX` is reachable at `@egose/shadcn-theme
 
 <!-- BEGIN GENERATED SUBPATHS -->
 
-`accordion`, `alert`, `alert-dialog`, `aspect-ratio`, `autocomplete`, `avatar`, `badge`, `basic-alert`, `breadcrumb`, `button`, `button-group`, `calendar`, `card`, `carousel`, `checkbox`, `collapsible`, `combobox`, `command`, `confirmation-dialog`, `context-menu`, `date-picker`, `dialog`, `drawer`, `dropdown-menu`, `empty`, `field`, `form-checkbox`, `form-date-picker`, `form-field`, `form-field-simple`, `form-searchable-multiselect`, `form-select`, `form-text-input`, `form-textarea`, `hover-card`, `icon`, `input`, `input-group`, `input-otp`, `item`, `kbd`, `label`, `layout-simple`, `menu`, `menubar`, `native-select`, `navigation-menu`, `pagination`, `popover`, `progress`, `radio-group`, `resizable`, `scroll-area`, `searchable-multiselect`, `select`, `separator`, `sheet`, `sidebar`, `skeleton`, `slider`, `sonner`, `spinner`, `switch`, `table`, `tabs`, `textarea`, `toggle`, `toggle-group`, `tooltip`, `typography`, `utils`.
+`accordion`, `alert`, `alert-dialog`, `aspect-ratio`, `autocomplete`, `avatar`, `badge`, `basic-alert`, `breadcrumb`, `button`, `button-group`, `calendar`, `card`, `carousel`, `checkbox`, `collapsible`, `combobox`, `command`, `confirmation-dialog`, `context-menu`, `date-picker`, `dialog`, `drawer`, `dropdown-menu`, `empty`, `field`, `form-autocomplete`, `form-checkbox`, `form-combobox`, `form-date-picker`, `form-date-picker-multi`, `form-date-range-picker`, `form-field`, `form-field-simple`, `form-input-otp`, `form-month-year-picker`, `form-native-select`, `form-phone-input`, `form-radio-group`, `form-searchable-multiselect`, `form-select`, `form-slider`, `form-switch`, `form-text-input`, `form-textarea`, `form-toggle`, `form-toggle-group`, `hover-card`, `icon`, `input`, `input-group`, `input-otp`, `item`, `kbd`, `label`, `layout-simple`, `menu`, `menubar`, `native-select`, `navigation-menu`, `pagination`, `phone-input`, `popover`, `progress`, `radio-group`, `resizable`, `scroll-area`, `searchable-multiselect`, `select`, `separator`, `sheet`, `sidebar`, `skeleton`, `slider`, `sonner`, `spinner`, `switch`, `table`, `tabs`, `textarea`, `toggle`, `toggle-group`, `tooltip`, `typography`, `utils`.
 
 <!-- END GENERATED SUBPATHS -->
 

package/autocomplete/fesm2022/autocomplete.mjs

@@ -146,7 +146,7 @@ class HlmAutocompleteInput {
       </hlm-input-group-addon>
     }
     <ng-content />
-  `, isInline: true, dependencies: [{ kind: "directive", type: i2$1.HlmInputGroupAddon, selector: "[hlmInputGroupAddon],hlm-input-group-addon", inputs: ["align"] }, { kind: "directive", type: i2$1.HlmInputGroupButton, selector: "button[hlmInputGroupButton]", inputs: ["size", "type"] }, { kind: "directive", type: i2$1.HlmInputGroupInput, selector: "input[hlmInputGroupInput]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: BrnAutocompleteClear, selector: "[brnAutocompleteClear]" }, { kind: "directive", type: BrnAutocompleteInput, selector: "input[brnAutocompleteInput]", inputs: ["id", "aria-invalid", "forceInvalid"], exportAs: ["brnAutocompleteInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "directive", type: i2$1.HlmInputGroupAddon, selector: "[hlmInputGroupAddon],hlm-input-group-addon", inputs: ["align"] }, { kind: "directive", type: i2$1.HlmInputGroupButton, selector: "button[hlmInputGroupButton]", inputs: ["size", "type", "class"] }, { kind: "directive", type: i2$1.HlmInputGroupInput, selector: "input[hlmInputGroupInput]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: BrnAutocompleteClear, selector: "[brnAutocompleteClear]" }, { kind: "directive", type: BrnAutocompleteInput, selector: "input[brnAutocompleteInput]", inputs: ["id", "aria-invalid", "forceInvalid"], exportAs: ["brnAutocompleteInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmAutocompleteInput, decorators: [{
             type: Component,

package/checkbox/fesm2022/checkbox.mjs

@@ -44,13 +44,12 @@ class HlmCheckbox {
     changed = output();
     _onChange;
     _onTouched;
-    _handleChange() {
+    _handleCheckedChange(checked) {
         if (this.disabledState())
             return;
-        const previousChecked = this.checked();
-        this.checked.set(previousChecked === 'indeterminate' ? true : !previousChecked);
-        this._onChange?.(!previousChecked);
-        this.changed.emit(!previousChecked);
+        this.checked.set(checked);
+        this._onChange?.(checked);
+        this.changed.emit(checked);
     }
     /** CONTROL VALUE ACCESSOR */
     writeValue(value) {
@@ -66,14 +65,14 @@ class HlmCheckbox {
         this.formDisabled.set(isDisabled);
     }
     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 });
+    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      (checkedChange)=\"_handleCheckedChange($event)\"\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.1.3", ngImport: i0, type: HlmCheckbox, decorators: [{
             type: Component,
             args: [{
                     selector: 'hlm-checkbox',
                     imports: [BrnCheckbox, NgIcon, HlmIcon],
-                    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  ",
+                    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      (checkedChange)=\"_handleCheckedChange($event)\"\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',

package/checkbox/types/checkbox.d.ts

@@ -35,7 +35,7 @@ declare class HlmCheckbox implements ControlValueAccessor {
     readonly changed: _angular_core.OutputEmitterRef<boolean>;
     protected _onChange?: ChangeFn<CheckboxValue>;
     protected _onTouched?: TouchFn;
-    protected _handleChange(): void;
+    protected _handleCheckedChange(checked: boolean): void;
     /** CONTROL VALUE ACCESSOR */
     writeValue(value: CheckboxValue): void;
     registerOnChange(fn: ChangeFn<CheckboxValue>): void;

package/combobox/fesm2022/combobox.mjs

@@ -221,7 +221,7 @@ class HlmComboboxInput {
         classes(() => "w-auto");
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmComboboxInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: HlmComboboxInput, isStandalone: true, selector: "hlm-combobox-input", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, showTrigger: { classPropertyName: "showTrigger", publicName: "showTrigger", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, forceInvalid: { classPropertyName: "forceInvalid", publicName: "forceInvalid", isSignal: true, isRequired: false, transformFunction: null }, ariaInvalidOverride: { classPropertyName: "ariaInvalidOverride", publicName: "aria-invalid", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideIcons({ lucideChevronDown, lucideX })], hostDirectives: [{ directive: i1.BrnComboboxAnchor }, { directive: i2$1.HlmInputGroup }], ngImport: i0, template: "\n    <input\n      brnComboboxInput\n      #comboboxInput=\"brnComboboxInput\"\n      brnComboboxPopoverTrigger\n      [closeOnTriggerClick]=\"false\"\n      hlmInputGroupInput\n      [id]=\"inputId()\"\n      [placeholder]=\"placeholder()\"\n      [forceInvalid]=\"forceInvalid()\"\n      [aria-invalid]=\"ariaInvalidOverride()\"\n    />\n\n    <hlm-input-group-addon align=\"inline-end\">\n      @if (showTrigger()) {\n        <button\n          brnComboboxPopoverTrigger\n          hlmInputGroupButton\n          data-slot=\"input-group-button\"\n          [disabled]=\"comboboxInput.disabled()\"\n          size=\"icon-xs\"\n          variant=\"ghost\"\n          class=\"group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent\"\n        >\n          <ng-icon name=\"lucideChevronDown\" />\n        </button>\n      }\n\n      @if (showClear()) {\n        <button\n          *brnComboboxClear\n          hlmInputGroupButton\n          data-slot=\"combobox-clear\"\n          [disabled]=\"comboboxInput.disabled()\"\n          size=\"icon-xs\"\n          variant=\"ghost\"\n        >\n          <ng-icon name=\"lucideX\" />\n        </button>\n      }\n    </hlm-input-group-addon>\n\n    <ng-content />\n  ", isInline: true, dependencies: [{ kind: "directive", type: i2$1.HlmInputGroupAddon, selector: "[hlmInputGroupAddon],hlm-input-group-addon", inputs: ["align"] }, { kind: "directive", type: i2$1.HlmInputGroupButton, selector: "button[hlmInputGroupButton]", inputs: ["size", "type"] }, { kind: "directive", type: i2$1.HlmInputGroupInput, selector: "input[hlmInputGroupInput]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: i1.BrnComboboxClear, selector: "[brnComboboxClear]" }, { kind: "directive", type: i1.BrnComboboxInput, selector: "input[brnComboboxInput]", inputs: ["id", "aria-invalid", "forceInvalid"], exportAs: ["brnComboboxInput"] }, { kind: "directive", type: i1.BrnComboboxPopoverTrigger, selector: "[brnComboboxPopoverTrigger]", inputs: ["closeOnTriggerClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: HlmComboboxInput, isStandalone: true, selector: "hlm-combobox-input", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, showTrigger: { classPropertyName: "showTrigger", publicName: "showTrigger", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, forceInvalid: { classPropertyName: "forceInvalid", publicName: "forceInvalid", isSignal: true, isRequired: false, transformFunction: null }, ariaInvalidOverride: { classPropertyName: "ariaInvalidOverride", publicName: "aria-invalid", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideIcons({ lucideChevronDown, lucideX })], hostDirectives: [{ directive: i1.BrnComboboxAnchor }, { directive: i2$1.HlmInputGroup }], ngImport: i0, template: "\n    <input\n      brnComboboxInput\n      #comboboxInput=\"brnComboboxInput\"\n      brnComboboxPopoverTrigger\n      [closeOnTriggerClick]=\"false\"\n      hlmInputGroupInput\n      [id]=\"inputId()\"\n      [placeholder]=\"placeholder()\"\n      [forceInvalid]=\"forceInvalid()\"\n      [aria-invalid]=\"ariaInvalidOverride()\"\n    />\n\n    <hlm-input-group-addon align=\"inline-end\">\n      @if (showTrigger()) {\n        <button\n          brnComboboxPopoverTrigger\n          hlmInputGroupButton\n          data-slot=\"input-group-button\"\n          [disabled]=\"comboboxInput.disabled()\"\n          size=\"icon-xs\"\n          variant=\"ghost\"\n          class=\"group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent\"\n        >\n          <ng-icon name=\"lucideChevronDown\" />\n        </button>\n      }\n\n      @if (showClear()) {\n        <button\n          *brnComboboxClear\n          hlmInputGroupButton\n          data-slot=\"combobox-clear\"\n          [disabled]=\"comboboxInput.disabled()\"\n          size=\"icon-xs\"\n          variant=\"ghost\"\n        >\n          <ng-icon name=\"lucideX\" />\n        </button>\n      }\n    </hlm-input-group-addon>\n\n    <ng-content />\n  ", isInline: true, dependencies: [{ kind: "directive", type: i2$1.HlmInputGroupAddon, selector: "[hlmInputGroupAddon],hlm-input-group-addon", inputs: ["align"] }, { kind: "directive", type: i2$1.HlmInputGroupButton, selector: "button[hlmInputGroupButton]", inputs: ["size", "type", "class"] }, { kind: "directive", type: i2$1.HlmInputGroupInput, selector: "input[hlmInputGroupInput]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: i1.BrnComboboxClear, selector: "[brnComboboxClear]" }, { kind: "directive", type: i1.BrnComboboxInput, selector: "input[brnComboboxInput]", inputs: ["id", "aria-invalid", "forceInvalid"], exportAs: ["brnComboboxInput"] }, { kind: "directive", type: i1.BrnComboboxPopoverTrigger, selector: "[brnComboboxPopoverTrigger]", inputs: ["closeOnTriggerClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmComboboxInput, decorators: [{
             type: Component,

package/date-picker/README.md

@@ -234,7 +234,11 @@ Outputs/methods mirror `HlmDatePicker` (`dateChange: T | null`, `updateDate`, `o
 | -------------------------------------- | ------------------------------------------------------------------------------- | --------------------------------- | ---------------------------------------------------------------------- |
 | `parseDate`                            | `(value: string) => T \| null` (or `T[] \| null` / `[T,T] \| null` per variant) | from matching `provideHlm*Config` | Return `null` for invalid text; picker clears while text is preserved. |
 | `formatInputDate` / `formatInputDates` | `(date) => string`                                                              | from config                       | Edit format shown while focused.                                       |
-| `ariaLabel` / `ariaDescribedby`        | `string`                                                                        | —                                 | Only on `HlmDatePickerInput`.                                          |
+| `ariaLabel` / `ariaDescribedby`        | `string`                                                                        | —                                 | Accessible labelling for the inner `<input>`.                          |
+| `name`                                 | `string \| undefined`                                                           | —                                 | Native `name` forwarded to the inner `<input>`.                        |
+| `readonly`                             | `boolean`                                                                       | `false`                           | Native `readonly` forwarded to the inner `<input>`.                    |
+| `class`                                | `ClassValue`                                                                    | `''`                              | Extra classes on the host group container.                             |
+| `inputClass`                           | `ClassValue`                                                                    | `''`                              | Extra classes on the inner `<input>` (e.g. text size).                 |
 
 ### `HlmDatePickerTrigger` — `hlm-date-picker-trigger`
 
@@ -256,16 +260,16 @@ Button trigger showing the formatted date or projected placeholder.
 
 ### Config tokens
 
-| Symbol                                                                      | Description                                                                                                                                   |
-| --------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
-| `HlmDatePickerConfig<T>`                                                    | `{ autoCloseOnSelect, formatDate, formatInputDate, transformDate, parseDate }`. Default parse: `new Date(value)`, `null` when invalid.        |
-| `provideHlmDatePickerConfig<T>(partial)` / `injectHlmDatePickerConfig<T>()` | Provide / read the single-date config.                                                                                                        |
-| `HlmDatePickerMultiConfig<T>`                                               | `{ autoCloseOnMaxSelection, formatDates, formatInputDates, transformDates, parseDate }`. Default multi parse: comma-separated `DD/MM/YYYY`.   |
-| `provideHlmDatePickerMultiConfig` / `injectHlmDatePickerMultiConfig`        | Multi config DI.                                                                                                                              |
-| `HlmDateRangePickerConfig<T>`                                               | `{ autoCloseOnEndSelection, formatDates, formatInputDates, transformDates, parseDate }`. Default range parse: `"a - b"` via `new Date(part)`. |
-| `provideHlmDateRangePickerConfig` / `injectHlmDateRangePickerConfig`        | Range config DI.                                                                                                                              |
-| `HlmMonthYearPickerConfig<T>`                                               | `{ autoCloseOnSelect, formatDate, formatInputDate, transformDate, parseDate }`. Default parse: `MM/YYYY`.                                     |
-| `provideHlmMonthYearPickerConfig` / `injectHlmMonthYearPickerConfig`        | Month/year config DI.                                                                                                                         |
+| Symbol                                                                      | Description                                                                                                                                                                                                                                                                                                    |
+| --------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `HlmDatePickerConfig<T>`                                                    | `{ autoCloseOnSelect, formatDate, formatInputDate, transformDate, parseDate }` plus optional global class defaults `{ labelClass?, pickerClass?, inputClass?, errorClass?, hintClass? }` (merged under per-instance `*Class` in `eg-form-date-picker`). Default parse: `new Date(value)`, `null` when invalid. |
+| `provideHlmDatePickerConfig<T>(partial)` / `injectHlmDatePickerConfig<T>()` | Provide / read the single-date config.                                                                                                                                                                                                                                                                         |
+| `HlmDatePickerMultiConfig<T>`                                               | `{ autoCloseOnMaxSelection, formatDates, formatInputDates, transformDates, parseDate }` plus the same optional class-default keys. Default multi parse: comma-separated `DD/MM/YYYY`.                                                                                                                          |
+| `provideHlmDatePickerMultiConfig` / `injectHlmDatePickerMultiConfig`        | Multi config DI.                                                                                                                                                                                                                                                                                               |
+| `HlmDateRangePickerConfig<T>`                                               | `{ autoCloseOnEndSelection, formatDates, formatInputDates, transformDates, parseDate }` plus the same optional class-default keys. Default range parse: `"a - b"` via `new Date(part)`.                                                                                                                        |
+| `provideHlmDateRangePickerConfig` / `injectHlmDateRangePickerConfig`        | Range config DI.                                                                                                                                                                                                                                                                                               |
+| `HlmMonthYearPickerConfig<T>`                                               | `{ autoCloseOnSelect, formatDate, formatInputDate, transformDate, parseDate }` plus the same optional class-default keys. Default parse: `MM/YYYY`.                                                                                                                                                            |
+| `provideHlmMonthYearPickerConfig` / `injectHlmMonthYearPickerConfig`        | Month/year config DI.                                                                                                                                                                                                                                                                                          |
 
 ## Examples
 

package/date-picker/fesm2022/date-picker.mjs

@@ -1,10 +1,11 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, input, ChangeDetectionStrategy, Component, forwardRef, viewChild, contentChild, booleanAttribute, linkedSignal, signal, computed, output, ElementRef, effect, Directive, numberAttribute, untracked, NgModule } from '@angular/core';
+import { InjectionToken, inject, input, booleanAttribute, computed, ChangeDetectionStrategy, Component, forwardRef, viewChild, contentChild, linkedSignal, signal, output, ElementRef, effect, Directive, numberAttribute, untracked, NgModule } from '@angular/core';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideX, lucideCalendar, lucideChevronDown } from '@ng-icons/lucide';
 import { BrnDateInput, provideBrnDatePickerTrigger, BrnDatePickerTriggerToken, provideBrnDatePicker, injectBrnDatePicker } from '@spartan-ng/brain/date-picker';
 import * as i1 from '@egose/shadcn-theme-ng/input-group';
 import { HlmInputGroup, HlmInputGroupImports } from '@egose/shadcn-theme-ng/input-group';
+import { hlm, classes } from '@egose/shadcn-theme-ng/utils';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i1$1 from '@spartan-ng/brain/field';
 import { provideBrnLabelable, BrnFieldControl, BrnFieldControlDescribedBy } from '@spartan-ng/brain/field';
@@ -16,7 +17,6 @@ import { HlmPopoverImports, HlmPopoverTrigger } from '@egose/shadcn-theme-ng/pop
 import { BrnOverlay } from '@spartan-ng/brain/overlay';
 import * as i1$2 from '@egose/shadcn-theme-ng/button';
 import { HlmButtonImports } from '@egose/shadcn-theme-ng/button';
-import { hlm } from '@egose/shadcn-theme-ng/utils';
 
 function getDefaultConfig$3() {
     return {
@@ -70,6 +70,26 @@ function injectHlmDatePickerMultiConfig() {
 
 class HlmDateMultiInput extends BrnDateInput {
     _config = injectHlmDatePickerMultiConfig();
+    /** Native `name` attribute forwarded to the inner `<input>`. */
+    name = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    /** Native `readonly` state forwarded to the inner `<input>`. */
+    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    ariaLabel = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    ariaDescribedby = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaDescribedby" }] : /* istanbul ignore next */ []));
+    /** Extra classes merged onto the host group container (over the `HlmInputGroup` base). */
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    /** Extra classes merged onto the inner `<input>` (over the input-group input base). */
+    inputClass = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputClass" }] : /* istanbul ignore next */ []));
+    $inputClass = computed(() => hlm(this.inputClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "$inputClass" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        classes(() => [this.userClass()]);
+    }
     /**
      * Parses input text into dates. Return `null` for invalid input - the
      * picker's dates are cleared while the text is preserved so the user can
@@ -93,16 +113,21 @@ class HlmDateMultiInput extends BrnDateInput {
     formatInputValue(value) {
         return this.formatInputDates()(value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDateMultiInput, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: HlmDateMultiInput, isStandalone: true, selector: "hlm-date-multi-input", inputs: { parseDate: { classPropertyName: "parseDate", publicName: "parseDate", isSignal: true, isRequired: false, transformFunction: null }, formatInputDates: { classPropertyName: "formatInputDates", publicName: "formatInputDates", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideIcons({ lucideCalendar, lucideX }), provideBrnDatePickerTrigger(HlmDateMultiInput)], usesInheritance: true, hostDirectives: [{ directive: i1.HlmInputGroup }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDateMultiInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: HlmDateMultiInput, isStandalone: true, selector: "hlm-date-multi-input", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null }, parseDate: { classPropertyName: "parseDate", publicName: "parseDate", isSignal: true, isRequired: false, transformFunction: null }, formatInputDates: { classPropertyName: "formatInputDates", publicName: "formatInputDates", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideIcons({ lucideCalendar, lucideX }), provideBrnDatePickerTrigger(HlmDateMultiInput)], usesInheritance: true, hostDirectives: [{ directive: i1.HlmInputGroup }], ngImport: i0, template: `
     <input
       #input
       hlmInputGroupInput
       [value]="_inputValue()"
       [id]="inputId()"
+      [attr.name]="name()"
+      [attr.aria-label]="ariaLabel()"
+      [attr.aria-describedby]="ariaDescribedby()"
       [placeholder]="placeholder()"
+      [readonly]="readonly()"
       [disabled]="_disabled()"
       [forceInvalid]="forceInvalid()"
+      [class]="$inputClass()"
       (click)="_handleClick()"
       (keydown.arrowDown)="_open()"
       (keydown.enter)="_handleEnter($event)"
@@ -133,7 +158,7 @@ class HlmDateMultiInput extends BrnDateInput {
         <ng-icon name="lucideCalendar" />
       </button>
     </hlm-input-group-addon>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.HlmInputGroupAddon, selector: "[hlmInputGroupAddon],hlm-input-group-addon", inputs: ["align"] }, { kind: "directive", type: i1.HlmInputGroupButton, selector: "button[hlmInputGroupButton]", inputs: ["size", "type"] }, { kind: "directive", type: i1.HlmInputGroupInput, selector: "input[hlmInputGroupInput]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.HlmInputGroupAddon, selector: "[hlmInputGroupAddon],hlm-input-group-addon", inputs: ["align"] }, { kind: "directive", type: i1.HlmInputGroupButton, selector: "button[hlmInputGroupButton]", inputs: ["size", "type", "class"] }, { kind: "directive", type: i1.HlmInputGroupInput, selector: "input[hlmInputGroupInput]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDateMultiInput, decorators: [{
             type: Component,
@@ -149,9 +174,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
       hlmInputGroupInput
       [value]="_inputValue()"
       [id]="inputId()"
+      [attr.name]="name()"
+      [attr.aria-label]="ariaLabel()"
+      [attr.aria-describedby]="ariaDescribedby()"
       [placeholder]="placeholder()"
+      [readonly]="readonly()"
       [disabled]="_disabled()"
       [forceInvalid]="forceInvalid()"
+      [class]="$inputClass()"
       (click)="_handleClick()"
       (keydown.arrowDown)="_open()"
       (keydown.enter)="_handleEnter($event)"
@@ -184,7 +214,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
     </hlm-input-group-addon>
   `,
                 }]
-        }], propDecorators: { parseDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "parseDate", required: false }] }], formatInputDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatInputDates", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedby", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], inputClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputClass", required: false }] }], parseDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "parseDate", required: false }] }], formatInputDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatInputDates", required: false }] }] } });
 
 function getDefaultConfig$2() {
     return {
@@ -365,6 +395,22 @@ class HlmDatePickerInput extends BrnDateInput {
     ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     ariaDescribedby = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "ariaDescribedby" }] : /* istanbul ignore next */ []));
+    /** Native `name` attribute forwarded to the inner `<input>`. */
+    name = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    /** Native `readonly` state forwarded to the inner `<input>`. */
+    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Extra classes merged onto the host group container (over the `HlmInputGroup` base). */
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    /** Extra classes merged onto the inner `<input>` (over the input-group input base). */
+    inputClass = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputClass" }] : /* istanbul ignore next */ []));
+    $inputClass = computed(() => hlm(this.inputClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "$inputClass" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        classes(() => [this.userClass()]);
+    }
     /**
      * Parses input text into a date value. Return `null` for invalid
      * input - the picker's date is cleared while the text is preserved so
@@ -388,18 +434,21 @@ class HlmDatePickerInput extends BrnDateInput {
     formatInputValue(value) {
         return this.formatInputDate()(value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDatePickerInput, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: HlmDatePickerInput, isStandalone: true, selector: "hlm-date-picker-input", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null }, parseDate: { classPropertyName: "parseDate", publicName: "parseDate", isSignal: true, isRequired: false, transformFunction: null }, formatInputDate: { classPropertyName: "formatInputDate", publicName: "formatInputDate", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideIcons({ lucideCalendar, lucideX }), provideBrnDatePickerTrigger(HlmDatePickerInput)], usesInheritance: true, hostDirectives: [{ directive: i1.HlmInputGroup }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDatePickerInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: HlmDatePickerInput, isStandalone: true, selector: "hlm-date-picker-input", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null }, parseDate: { classPropertyName: "parseDate", publicName: "parseDate", isSignal: true, isRequired: false, transformFunction: null }, formatInputDate: { classPropertyName: "formatInputDate", publicName: "formatInputDate", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideIcons({ lucideCalendar, lucideX }), provideBrnDatePickerTrigger(HlmDatePickerInput)], usesInheritance: true, hostDirectives: [{ directive: i1.HlmInputGroup }], ngImport: i0, template: `
     <input
       #input
       hlmInputGroupInput
       [value]="_inputValue()"
       [id]="inputId()"
+      [attr.name]="name()"
       [attr.aria-label]="ariaLabel()"
       [attr.aria-describedby]="ariaDescribedby()"
       [placeholder]="placeholder()"
+      [readonly]="readonly()"
       [disabled]="_disabled()"
       [forceInvalid]="forceInvalid()"
+      [class]="$inputClass()"
       (click)="_handleClick()"
       (keydown.arrowDown)="_open()"
       (keydown.enter)="_handleEnter($event)"
@@ -430,7 +479,7 @@ class HlmDatePickerInput extends BrnDateInput {
         <ng-icon name="lucideCalendar" />
       </button>
     </hlm-input-group-addon>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.HlmInputGroupAddon, selector: "[hlmInputGroupAddon],hlm-input-group-addon", inputs: ["align"] }, { kind: "directive", type: i1.HlmInputGroupButton, selector: "button[hlmInputGroupButton]", inputs: ["size", "type"] }, { kind: "directive", type: i1.HlmInputGroupInput, selector: "input[hlmInputGroupInput]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.HlmInputGroupAddon, selector: "[hlmInputGroupAddon],hlm-input-group-addon", inputs: ["align"] }, { kind: "directive", type: i1.HlmInputGroupButton, selector: "button[hlmInputGroupButton]", inputs: ["size", "type", "class"] }, { kind: "directive", type: i1.HlmInputGroupInput, selector: "input[hlmInputGroupInput]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDatePickerInput, decorators: [{
             type: Component,
@@ -446,11 +495,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
       hlmInputGroupInput
       [value]="_inputValue()"
       [id]="inputId()"
+      [attr.name]="name()"
       [attr.aria-label]="ariaLabel()"
       [attr.aria-describedby]="ariaDescribedby()"
       [placeholder]="placeholder()"
+      [readonly]="readonly()"
       [disabled]="_disabled()"
       [forceInvalid]="forceInvalid()"
+      [class]="$inputClass()"
       (click)="_handleClick()"
       (keydown.arrowDown)="_open()"
       (keydown.enter)="_handleEnter($event)"
@@ -483,7 +535,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
     </hlm-input-group-addon>
   `,
                 }]
-        }], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedby", required: false }] }], parseDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "parseDate", required: false }] }], formatInputDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatInputDate", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedby", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], inputClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputClass", required: false }] }], parseDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "parseDate", required: false }] }], formatInputDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatInputDate", required: false }] }] } });
 
 const HLM_DATE_PICKER_MUTLI_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
@@ -526,10 +578,12 @@ class HlmDatePickerMulti {
     ...(ngDevMode ? [{ debugName: "transformDates" }] : /* istanbul ignore next */ []));
     _popoverState = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_popoverState" }] : /* istanbul ignore next */ []));
-    _disabled = linkedSignal(this.disabled, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+    _formDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_formDisabled" }] : /* istanbul ignore next */ []));
     /** @internal The disabled state as a readonly signal */
-    disabledState = this._disabled.asReadonly();
+    disabledState = computed(() => this.disabled() || this._formDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
+    _disabled = this.disabledState;
     formattedDate = computed(() => {
         const dates = this._mutableDate();
         return dates ? this.formatDates()(dates) : undefined;
@@ -590,7 +644,7 @@ class HlmDatePickerMulti {
         this._onTouched = fn;
     }
     setDisabledState(isDisabled) {
-        this._disabled.set(isDisabled);
+        this._formDisabled.set(isDisabled);
     }
     open() {
         this._popoverState.set('open');
@@ -708,6 +762,26 @@ function injectHlmDateRangePickerConfig() {
 
 class HlmDateRangeInput extends BrnDateInput {
     _config = injectHlmDateRangePickerConfig();
+    /** Native `name` attribute forwarded to the inner `<input>`. */
+    name = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    /** Native `readonly` state forwarded to the inner `<input>`. */
+    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    ariaLabel = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    ariaDescribedby = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaDescribedby" }] : /* istanbul ignore next */ []));
+    /** Extra classes merged onto the host group container (over the `HlmInputGroup` base). */
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    /** Extra classes merged onto the inner `<input>` (over the input-group input base). */
+    inputClass = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputClass" }] : /* istanbul ignore next */ []));
+    $inputClass = computed(() => hlm(this.inputClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "$inputClass" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        classes(() => [this.userClass()]);
+    }
     /**
      * Parses input text into a date range. Return `null` for invalid
      * input - the picker's range is cleared while the text is preserved so
@@ -731,16 +805,21 @@ class HlmDateRangeInput extends BrnDateInput {
     formatInputValue(value) {
         return this.formatInputDates()(value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDateRangeInput, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: HlmDateRangeInput, isStandalone: true, selector: "hlm-date-range-input", inputs: { parseDate: { classPropertyName: "parseDate", publicName: "parseDate", isSignal: true, isRequired: false, transformFunction: null }, formatInputDates: { classPropertyName: "formatInputDates", publicName: "formatInputDates", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideIcons({ lucideCalendar, lucideX }), provideBrnDatePickerTrigger(HlmDateRangeInput)], usesInheritance: true, hostDirectives: [{ directive: i1.HlmInputGroup }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDateRangeInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: HlmDateRangeInput, isStandalone: true, selector: "hlm-date-range-input", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null }, parseDate: { classPropertyName: "parseDate", publicName: "parseDate", isSignal: true, isRequired: false, transformFunction: null }, formatInputDates: { classPropertyName: "formatInputDates", publicName: "formatInputDates", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideIcons({ lucideCalendar, lucideX }), provideBrnDatePickerTrigger(HlmDateRangeInput)], usesInheritance: true, hostDirectives: [{ directive: i1.HlmInputGroup }], ngImport: i0, template: `
     <input
       #input
       hlmInputGroupInput
       [value]="_inputValue()"
       [id]="inputId()"
+      [attr.name]="name()"
+      [attr.aria-label]="ariaLabel()"
+      [attr.aria-describedby]="ariaDescribedby()"
       [placeholder]="placeholder()"
+      [readonly]="readonly()"
       [disabled]="_disabled()"
       [forceInvalid]="forceInvalid()"
+      [class]="$inputClass()"
       (click)="_handleClick()"
       (keydown.arrowDown)="_open()"
       (keydown.enter)="_handleEnter($event)"
@@ -771,7 +850,7 @@ class HlmDateRangeInput extends BrnDateInput {
         <ng-icon name="lucideCalendar" />
       </button>
     </hlm-input-group-addon>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.HlmInputGroupAddon, selector: "[hlmInputGroupAddon],hlm-input-group-addon", inputs: ["align"] }, { kind: "directive", type: i1.HlmInputGroupButton, selector: "button[hlmInputGroupButton]", inputs: ["size", "type"] }, { kind: "directive", type: i1.HlmInputGroupInput, selector: "input[hlmInputGroupInput]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.HlmInputGroupAddon, selector: "[hlmInputGroupAddon],hlm-input-group-addon", inputs: ["align"] }, { kind: "directive", type: i1.HlmInputGroupButton, selector: "button[hlmInputGroupButton]", inputs: ["size", "type", "class"] }, { kind: "directive", type: i1.HlmInputGroupInput, selector: "input[hlmInputGroupInput]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmDateRangeInput, decorators: [{
             type: Component,
@@ -787,9 +866,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
       hlmInputGroupInput
       [value]="_inputValue()"
       [id]="inputId()"
+      [attr.name]="name()"
+      [attr.aria-label]="ariaLabel()"
+      [attr.aria-describedby]="ariaDescribedby()"
       [placeholder]="placeholder()"
+      [readonly]="readonly()"
       [disabled]="_disabled()"
       [forceInvalid]="forceInvalid()"
+      [class]="$inputClass()"
       (click)="_handleClick()"
       (keydown.arrowDown)="_open()"
       (keydown.enter)="_handleEnter($event)"
@@ -822,7 +906,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
     </hlm-input-group-addon>
   `,
                 }]
-        }], propDecorators: { parseDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "parseDate", required: false }] }], formatInputDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatInputDates", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedby", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], inputClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputClass", required: false }] }], parseDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "parseDate", required: false }] }], formatInputDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatInputDates", required: false }] }] } });
 
 const HLM_DATE_RANGE_PICKER_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
@@ -865,10 +949,12 @@ class HlmDateRangePicker {
     ...(ngDevMode ? [{ debugName: "transformDates" }] : /* istanbul ignore next */ []));
     _popoverState = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_popoverState" }] : /* istanbul ignore next */ []));
-    _disabled = linkedSignal(this.disabled, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+    _formDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_formDisabled" }] : /* istanbul ignore next */ []));
     /** @internal The disabled state as a readonly signal */
-    disabledState = this._disabled.asReadonly();
+    disabledState = computed(() => this.disabled() || this._formDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
+    _disabled = this.disabledState;
     formattedDate = computed(() => {
         const start = this._start();
         const end = this._end();
@@ -954,7 +1040,7 @@ class HlmDateRangePicker {
         this._onTouched = fn;
     }
     setDisabledState(isDisabled) {
-        this._disabled.set(isDisabled);
+        this._formDisabled.set(isDisabled);
     }
     open() {
         this._popoverState.set('open');
@@ -1039,6 +1125,26 @@ function injectHlmMonthYearPickerConfig() {
 
 class HlmMonthYearInput extends BrnDateInput {
     _config = injectHlmMonthYearPickerConfig();
+    /** Native `name` attribute forwarded to the inner `<input>`. */
+    name = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    /** Native `readonly` state forwarded to the inner `<input>`. */
+    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    ariaLabel = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    ariaDescribedby = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaDescribedby" }] : /* istanbul ignore next */ []));
+    /** Extra classes merged onto the host group container (over the `HlmInputGroup` base). */
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    /** Extra classes merged onto the inner `<input>` (over the input-group input base). */
+    inputClass = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputClass" }] : /* istanbul ignore next */ []));
+    $inputClass = computed(() => hlm(this.inputClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "$inputClass" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        classes(() => [this.userClass()]);
+    }
     /**
      * Parses input text into a date value. Return `null` for invalid
      * input - the picker's date is cleared while the text is preserved so
@@ -1062,16 +1168,21 @@ class HlmMonthYearInput extends BrnDateInput {
     formatInputValue(value) {
         return this.formatInputDate()(value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmMonthYearInput, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: HlmMonthYearInput, isStandalone: true, selector: "hlm-month-year-input", inputs: { parseDate: { classPropertyName: "parseDate", publicName: "parseDate", isSignal: true, isRequired: false, transformFunction: null }, formatInputDate: { classPropertyName: "formatInputDate", publicName: "formatInputDate", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideIcons({ lucideCalendar, lucideX }), provideBrnDatePickerTrigger(HlmMonthYearInput)], usesInheritance: true, hostDirectives: [{ directive: i1.HlmInputGroup }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmMonthYearInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: HlmMonthYearInput, isStandalone: true, selector: "hlm-month-year-input", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null }, parseDate: { classPropertyName: "parseDate", publicName: "parseDate", isSignal: true, isRequired: false, transformFunction: null }, formatInputDate: { classPropertyName: "formatInputDate", publicName: "formatInputDate", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideIcons({ lucideCalendar, lucideX }), provideBrnDatePickerTrigger(HlmMonthYearInput)], usesInheritance: true, hostDirectives: [{ directive: i1.HlmInputGroup }], ngImport: i0, template: `
     <input
       #input
       hlmInputGroupInput
       [value]="_inputValue()"
       [id]="inputId()"
+      [attr.name]="name()"
+      [attr.aria-label]="ariaLabel()"
+      [attr.aria-describedby]="ariaDescribedby()"
       [placeholder]="placeholder()"
+      [readonly]="readonly()"
       [disabled]="_disabled()"
       [forceInvalid]="forceInvalid()"
+      [class]="$inputClass()"
       (click)="_handleClick()"
       (keydown.arrowDown)="_open()"
       (keydown.enter)="_handleEnter($event)"
@@ -1102,7 +1213,7 @@ class HlmMonthYearInput extends BrnDateInput {
         <ng-icon name="lucideCalendar" />
       </button>
     </hlm-input-group-addon>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.HlmInputGroupAddon, selector: "[hlmInputGroupAddon],hlm-input-group-addon", inputs: ["align"] }, { kind: "directive", type: i1.HlmInputGroupButton, selector: "button[hlmInputGroupButton]", inputs: ["size", "type"] }, { kind: "directive", type: i1.HlmInputGroupInput, selector: "input[hlmInputGroupInput]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.HlmInputGroupAddon, selector: "[hlmInputGroupAddon],hlm-input-group-addon", inputs: ["align"] }, { kind: "directive", type: i1.HlmInputGroupButton, selector: "button[hlmInputGroupButton]", inputs: ["size", "type", "class"] }, { kind: "directive", type: i1.HlmInputGroupInput, selector: "input[hlmInputGroupInput]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmMonthYearInput, decorators: [{
             type: Component,
@@ -1118,9 +1229,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
       hlmInputGroupInput
       [value]="_inputValue()"
       [id]="inputId()"
+      [attr.name]="name()"
+      [attr.aria-label]="ariaLabel()"
+      [attr.aria-describedby]="ariaDescribedby()"
       [placeholder]="placeholder()"
+      [readonly]="readonly()"
       [disabled]="_disabled()"
       [forceInvalid]="forceInvalid()"
+      [class]="$inputClass()"
       (click)="_handleClick()"
       (keydown.arrowDown)="_open()"
       (keydown.enter)="_handleEnter($event)"
@@ -1153,7 +1269,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
     </hlm-input-group-addon>
   `,
                 }]
-        }], propDecorators: { parseDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "parseDate", required: false }] }], formatInputDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatInputDate", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedby", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], inputClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputClass", required: false }] }], parseDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "parseDate", required: false }] }], formatInputDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatInputDate", required: false }] }] } });
 
 const HLM_MONTH_YEAR_PICKER_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
@@ -1192,10 +1308,12 @@ class HlmMonthYearPicker {
     ...(ngDevMode ? [{ debugName: "transformDate" }] : /* istanbul ignore next */ []));
     _popoverState = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_popoverState" }] : /* istanbul ignore next */ []));
-    _disabled = linkedSignal(this.disabled, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+    _formDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_formDisabled" }] : /* istanbul ignore next */ []));
     /** @internal The disabled state as a readonly signal */
-    disabledState = this._disabled.asReadonly();
+    disabledState = computed(() => this.disabled() || this._formDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
+    _disabled = this.disabledState;
     formattedDate = computed(() => {
         const date = this._mutableDate();
         return date ? this.formatDate()(date) : undefined;
@@ -1252,7 +1370,7 @@ class HlmMonthYearPicker {
         this._onTouched?.();
     }
     setDisabledState(isDisabled) {
-        this._disabled.set(isDisabled);
+        this._formDisabled.set(isDisabled);
     }
     open() {
         this._popoverState.set('open');