@egose/shadcn-theme-ng 0.2.0 → 0.4.0

package/form-toggle-group/fesm2022/form-toggle-group.mjs

@@ -0,0 +1,145 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, input, computed, Component } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { FormGroupDirective, ReactiveFormsModule, ControlContainer } from '@angular/forms';
+import { injectEgFormErrorMessages, HlmFormIdGenerator, resolveEgFormError, HlmError, HlmHint } from '@egose/shadcn-theme-ng/form-field';
+import { EgFormField } from '@egose/shadcn-theme-ng/form-field-simple';
+import { HlmLabel } from '@egose/shadcn-theme-ng/label';
+import { HlmToggleGroup, HlmToggleGroupItem } from '@egose/shadcn-theme-ng/toggle-group';
+import { hlm } from '@egose/shadcn-theme-ng/utils';
+
+const EgFormToggleGroupConfigToken = new InjectionToken('EgFormToggleGroupConfig');
+function provideEgFormToggleGroupConfig(config) {
+    return { provide: EgFormToggleGroupConfigToken, useValue: { ...config } };
+}
+function injectEgFormToggleGroupConfig() {
+    return inject(EgFormToggleGroupConfigToken, { optional: true }) ?? {};
+}
+
+class EgFormToggleGroup {
+    formGroupDirective = inject(FormGroupDirective);
+    _errorMessages = injectEgFormErrorMessages();
+    generatedId = inject(HlmFormIdGenerator).generate('eg-form-toggle-group');
+    _config = injectEgFormToggleGroupConfig();
+    label = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    controlId = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "controlId" }] : /* istanbul ignore next */ []));
+    controlName = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "controlName" }] : /* istanbul ignore next */ []));
+    error = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    /**
+     * Auto-resolve the displayed message from the control's `ValidationErrors`
+     * when `error()` is unset. Explicit `error()` always wins. Set to `false`
+     * for manual-only messages.
+     */
+    autoError = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "autoError" }] : /* istanbul ignore next */ []));
+    hint = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    id = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    type = input('single', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    required = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    variant = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    size = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    options = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    effectiveId = computed(() => this.controlId() || this.id() || this.generatedId, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveId" }] : /* istanbul ignore next */ []));
+    errorId = computed(() => `${this.effectiveId()}-error`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
+    hintId = computed(() => `${this.effectiveId()}-hint`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
+    /**
+     * Displayed message: explicit `error()` wins; otherwise (when `autoError()`)
+     * auto-resolved from the control's `ValidationErrors`. Plain method (not a
+     * computed): `ValidationErrors` is not a signal, so the control must be read
+     * fresh on every change-detection pass.
+     */
+    resolvedError() {
+        const explicit = this.error();
+        if (explicit)
+            return explicit;
+        if (!this.autoError())
+            return undefined;
+        const control = this.formGroupDirective.form.get(this.controlName());
+        return resolveEgFormError(control?.errors ?? null, this.label(), this._errorMessages);
+    }
+    /**
+     * Whether the error is surfaced: message present + control invalid +
+     * touched/dirty/submitted. Gates the visual `<hlm-error>` (and
+     * `describedBy()`, where present) so sighted and screen-reader output agree.
+     */
+    showError() {
+        const control = this.formGroupDirective.form.get(this.controlName());
+        return (!!this.resolvedError() &&
+            !!control?.invalid &&
+            (control.dirty || control.touched || this.formGroupDirective.submitted));
+    }
+    /**
+     * Combined lock for the brain `linkedSignal`-based disabled state: the raw
+     * input write always carries the resolved value, so a same-pass
+     * wrapper-toggle + `control.disable()` cannot clobber CVA state.
+     */
+    effectiveDisabled() {
+        return this.disabled() || !!this.formGroupDirective.form.get(this.controlName())?.disabled;
+    }
+    describedBy() {
+        return this.showError() ? this.errorId() : this.hint() ? this.hintId() : null;
+    }
+    // Styling
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    labelClass = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelClass" }] : /* istanbul ignore next */ []));
+    groupClass = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "groupClass" }] : /* istanbul ignore next */ []));
+    errorClass = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorClass" }] : /* istanbul ignore next */ []));
+    hintClass = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hintClass" }] : /* istanbul ignore next */ []));
+    // Computed classes (library base < global config < per-instance)
+    $userClass = computed(() => hlm("w-full", this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "$userClass" }] : /* istanbul ignore next */ []));
+    $labelClass = computed(() => hlm("mb-1", this._config.labelClass, this.labelClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "$labelClass" }] : /* istanbul ignore next */ []));
+    $groupClass = computed(() => hlm(this._config.groupClass, this.groupClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "$groupClass" }] : /* istanbul ignore next */ []));
+    $errorClass = computed(() => hlm("mt-0", this._config.errorClass, this.errorClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "$errorClass" }] : /* istanbul ignore next */ []));
+    $hintClass = computed(() => hlm("mt-0", this._config.hintClass, this.hintClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "$hintClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgFormToggleGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: EgFormToggleGroup, isStandalone: true, selector: "eg-form-toggle-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, controlId: { classPropertyName: "controlId", publicName: "controlId", isSignal: true, isRequired: false, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, autoError: { classPropertyName: "autoError", publicName: "autoError", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, labelClass: { classPropertyName: "labelClass", publicName: "labelClass", isSignal: true, isRequired: false, transformFunction: null }, groupClass: { classPropertyName: "groupClass", publicName: "groupClass", isSignal: true, isRequired: false, transformFunction: null }, errorClass: { classPropertyName: "errorClass", publicName: "errorClass", isSignal: true, isRequired: false, transformFunction: null }, hintClass: { classPropertyName: "hintClass", publicName: "hintClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "$userClass()" } }, providers: [{ provide: ControlContainer, useExisting: FormGroupDirective }], ngImport: i0, template: "\n    @let lbl = label();\n    @let cnm = controlName();\n    @let hnt = hint();\n    @let rqrd = required();\n\n    <eg-form-field>\n      @if (lbl) {\n        <span hlmLabel [class]=\"$labelClass()\"\n          >{{ lbl }}\n          @if (rqrd) {\n            <span class=\"text-red-500\">*</span>\n          }\n        </span>\n      }\n\n      <hlm-toggle-group\n        [formControlName]=\"cnm\"\n        [type]=\"type()\"\n        [disabled]=\"effectiveDisabled()\"\n        [variant]=\"variant()\"\n        [size]=\"size()\"\n        [class]=\"$groupClass()\"\n      >\n        @for (option of options(); track option.value) {\n          <button\n            hlmToggleGroupItem\n            type=\"button\"\n            [value]=\"option.value\"\n            [disabled]=\"option.disabled ?? false\"\n            [attr.aria-describedby]=\"describedBy()\"\n          >\n            {{ option.label }}\n          </button>\n        }\n      </hlm-toggle-group>\n\n      @if (showError()) {\n        <hlm-error [id]=\"errorId()\" [class]=\"$errorClass()\">\n          {{ resolvedError() }}\n        </hlm-error>\n      }\n\n      @if (hnt) {\n        <hlm-hint [id]=\"hintId()\" [class]=\"$hintClass()\">\n          {{ hnt }}\n        </hlm-hint>\n      }\n    </eg-form-field>\n  ", isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: HlmError, selector: "hlm-error", inputs: ["class"] }, { kind: "directive", type: HlmHint, selector: "hlm-hint", inputs: ["class"] }, { kind: "directive", type: HlmLabel, selector: "[hlmLabel]", inputs: ["class"] }, { kind: "directive", type: HlmToggleGroup, selector: "[hlmToggleGroup],hlm-toggle-group", inputs: ["variant", "size", "spacing", "orientation"] }, { kind: "directive", type: HlmToggleGroupItem, selector: "button[hlmToggleGroupItem]", inputs: ["variant", "size"] }, { kind: "component", type: EgFormField, selector: "eg-form-field", inputs: ["class"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgFormToggleGroup, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'eg-form-toggle-group',
+                    standalone: true,
+                    host: {
+                        '[class]': '$userClass()',
+                    },
+                    imports: [ReactiveFormsModule, HlmError, HlmHint, HlmLabel, HlmToggleGroup, HlmToggleGroupItem, EgFormField],
+                    providers: [{ provide: ControlContainer, useExisting: FormGroupDirective }],
+                    template: "\n    @let lbl = label();\n    @let cnm = controlName();\n    @let hnt = hint();\n    @let rqrd = required();\n\n    <eg-form-field>\n      @if (lbl) {\n        <span hlmLabel [class]=\"$labelClass()\"\n          >{{ lbl }}\n          @if (rqrd) {\n            <span class=\"text-red-500\">*</span>\n          }\n        </span>\n      }\n\n      <hlm-toggle-group\n        [formControlName]=\"cnm\"\n        [type]=\"type()\"\n        [disabled]=\"effectiveDisabled()\"\n        [variant]=\"variant()\"\n        [size]=\"size()\"\n        [class]=\"$groupClass()\"\n      >\n        @for (option of options(); track option.value) {\n          <button\n            hlmToggleGroupItem\n            type=\"button\"\n            [value]=\"option.value\"\n            [disabled]=\"option.disabled ?? false\"\n            [attr.aria-describedby]=\"describedBy()\"\n          >\n            {{ option.label }}\n          </button>\n        }\n      </hlm-toggle-group>\n\n      @if (showError()) {\n        <hlm-error [id]=\"errorId()\" [class]=\"$errorClass()\">\n          {{ resolvedError() }}\n        </hlm-error>\n      }\n\n      @if (hnt) {\n        <hlm-hint [id]=\"hintId()\" [class]=\"$hintClass()\">\n          {{ hnt }}\n        </hlm-hint>\n      }\n    </eg-form-field>\n  ",
+                }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], controlId: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlId", required: false }] }], controlName: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlName", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], autoError: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoError", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], labelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelClass", required: false }] }], groupClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupClass", required: false }] }], errorClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorClass", required: false }] }], hintClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintClass", required: false }] }] } });
+
+/*
+ * Public API Surface of form-toggle-group
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { EgFormToggleGroup, injectEgFormToggleGroupConfig, provideEgFormToggleGroupConfig };
+

package/form-toggle-group/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "form-toggle-group",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^20.3.0 || ^22.0.0",
+    "@angular/core": "^20.3.0 || ^22.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/form-toggle-group.mjs",
+  "typings": "types/form-toggle-group.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/form-toggle-group.d.ts",
+      "default": "./fesm2022/form-toggle-group.mjs"
+    }
+  },
+  "type": "module"
+}

package/form-toggle-group/types/form-toggle-group.d.ts

@@ -0,0 +1,85 @@
+import * as _angular_core from '@angular/core';
+import { ValueProvider } from '@angular/core';
+import { ClassValue } from 'clsx';
+
+interface ToggleGroupOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+declare class EgFormToggleGroup {
+    private readonly formGroupDirective;
+    private readonly _errorMessages;
+    private readonly generatedId;
+    private readonly _config;
+    label: _angular_core.InputSignal<string | undefined>;
+    controlId: _angular_core.InputSignal<string | undefined>;
+    controlName: _angular_core.InputSignal<string>;
+    error: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Auto-resolve the displayed message from the control's `ValidationErrors`
+     * when `error()` is unset. Explicit `error()` always wins. Set to `false`
+     * for manual-only messages.
+     */
+    autoError: _angular_core.InputSignal<boolean>;
+    hint: _angular_core.InputSignal<string | undefined>;
+    id: _angular_core.InputSignal<string | undefined>;
+    type: _angular_core.InputSignal<"single" | "multiple">;
+    disabled: _angular_core.InputSignal<boolean>;
+    required: _angular_core.InputSignal<boolean>;
+    variant: _angular_core.InputSignal<"default" | "outline" | null | undefined>;
+    size: _angular_core.InputSignal<"default" | "sm" | "lg" | null | undefined>;
+    options: _angular_core.InputSignal<ToggleGroupOption[]>;
+    readonly effectiveId: _angular_core.Signal<string>;
+    readonly errorId: _angular_core.Signal<string>;
+    readonly hintId: _angular_core.Signal<string>;
+    /**
+     * Displayed message: explicit `error()` wins; otherwise (when `autoError()`)
+     * auto-resolved from the control's `ValidationErrors`. Plain method (not a
+     * computed): `ValidationErrors` is not a signal, so the control must be read
+     * fresh on every change-detection pass.
+     */
+    protected resolvedError(): string | undefined;
+    /**
+     * Whether the error is surfaced: message present + control invalid +
+     * touched/dirty/submitted. Gates the visual `<hlm-error>` (and
+     * `describedBy()`, where present) so sighted and screen-reader output agree.
+     */
+    protected showError(): boolean;
+    /**
+     * Combined lock for the brain `linkedSignal`-based disabled state: the raw
+     * input write always carries the resolved value, so a same-pass
+     * wrapper-toggle + `control.disable()` cannot clobber CVA state.
+     */
+    effectiveDisabled(): boolean;
+    describedBy(): string | null;
+    userClass: _angular_core.InputSignal<ClassValue>;
+    labelClass: _angular_core.InputSignal<string>;
+    groupClass: _angular_core.InputSignal<string>;
+    errorClass: _angular_core.InputSignal<string>;
+    hintClass: _angular_core.InputSignal<string>;
+    $userClass: _angular_core.Signal<string>;
+    $labelClass: _angular_core.Signal<string>;
+    $groupClass: _angular_core.Signal<string>;
+    $errorClass: _angular_core.Signal<string>;
+    $hintClass: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EgFormToggleGroup, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EgFormToggleGroup, "eg-form-toggle-group", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "controlId": { "alias": "controlId"; "required": false; "isSignal": true; }; "controlName": { "alias": "controlName"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "autoError": { "alias": "autoError"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "labelClass": { "alias": "labelClass"; "required": false; "isSignal": true; }; "groupClass": { "alias": "groupClass"; "required": false; "isSignal": true; }; "errorClass": { "alias": "errorClass"; "required": false; "isSignal": true; }; "hintClass": { "alias": "hintClass"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+interface EgFormToggleGroupConfig {
+    /**
+     * Global class defaults for `eg-form-toggle-group` styling slots.
+     * Each is merged under the matching per-instance `*Class` input
+     * (library base < global config < per-instance).
+     */
+    labelClass?: string;
+    groupClass?: string;
+    errorClass?: string;
+    hintClass?: string;
+}
+declare function provideEgFormToggleGroupConfig(config: Partial<EgFormToggleGroupConfig>): ValueProvider;
+declare function injectEgFormToggleGroupConfig(): EgFormToggleGroupConfig;
+
+export { EgFormToggleGroup, injectEgFormToggleGroupConfig, provideEgFormToggleGroupConfig };
+export type { EgFormToggleGroupConfig };

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/utils';
+import { Directive, input, inject, effect, NgModule } from '@angular/core';
+import { classes, hlm } from '@egose/shadcn-theme-ng/utils';
 import { cva } from 'class-variance-authority';
 import * as i1 from '@egose/shadcn-theme-ng/button';
-import { provideBrnButtonConfig, HlmBtn } from '@egose/shadcn-theme-ng/button';
+import { HlmBtn, provideBrnButtonConfig } from '@egose/shadcn-theme-ng/button';
 import * as i1$1 from '@egose/shadcn-theme-ng/input';
 import { HlmInput } from '@egose/shadcn-theme-ng/input';
 import * as i1$2 from '@egose/shadcn-theme-ng/textarea';
@@ -64,10 +64,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
 const inputGroupAddonVariants = cva("gap-2 text-sm flex items-center shadow-none", {
     variants: {
         size: {
-            xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-1.5 [&>ng-icon:not([class*='text-'])]:text-[length:--spacing(3.5)]",
+            xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-1.5 [&>ng-icon:not([class*='text-'])]:text-[length:--spacing(3.5)] [&_svg:not([class*='size-'])]:size-3.5",
             sm: '',
-            'icon-xs': "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>ng-icon]:p-0",
-            'icon-sm': "size-8 p-0 has-[>ng-icon]:p-0",
+            'icon-xs': "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>ng-icon]:p-0 [&>ng-icon:not([class*='text-'])]:text-[length:--spacing(3)] [&_svg:not([class*='size-'])]:size-3",
+            'icon-sm': "size-8 p-0 has-[>ng-icon]:p-0 [&>ng-icon:not([class*='text-'])]:text-[length:--spacing(4)] [&_svg:not([class*='size-'])]:size-4",
         },
     },
     defaultVariants: {
@@ -75,15 +75,25 @@ const inputGroupAddonVariants = cva("gap-2 text-sm flex items-center shadow-none
     },
 });
 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/button';
 import * as i1$1 from '@egose/shadcn-theme-ng/input';
 import * as i1$2 from '@egose/shadcn-theme-ng/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/native-select/fesm2022/native-select.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { forwardRef, inject, input, computed, booleanAttribute, linkedSignal, output, ChangeDetectionStrategy, Component, Directive, NgModule } from '@angular/core';
+import { forwardRef, inject, input, computed, booleanAttribute, signal, linkedSignal, output, ChangeDetectionStrategy, Component, Directive, NgModule } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideChevronDown } from '@ng-icons/lucide';
@@ -17,9 +17,15 @@ class HlmNativeSelect {
     static _id = 0;
     selectId = input(`hlm-native-select-${HlmNativeSelect._id++}`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selectId" }] : /* istanbul ignore next */ []));
+    /** Native `name` attribute forwarded to the inner `<select>`. */
+    name = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    /** ID of the element describing the select (error/hint) for assistive tech. */
+    ariaDescribedby = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaDescribedby" }] : /* istanbul ignore next */ []));
     selectClass = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selectClass" }] : /* istanbul ignore next */ []));
-    _computedSelectClass = computed(() => hlm("border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 data-[matches-spartan-invalid=true]:ring-destructive/20 dark:data-[matches-spartan-invalid=true]:ring-destructive/40 data-[matches-spartan-invalid=true]:border-destructive dark:data-[matches-spartan-invalid=true]:border-destructive/50 h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent py-1 ps-2.5 pe-8 text-sm shadow-xs transition-[color,box-shadow] select-none focus-visible:ring-3 data-[matches-spartan-invalid=true]:ring-3 data-[size=sm]:h-8 outline-none disabled:pointer-events-none disabled:cursor-not-allowed", this.selectClass()), /* @ts-ignore */
+    _computedSelectClass = computed(() => hlm("border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 data-[matches-spartan-invalid=true]:ring-destructive/20 dark:data-[matches-spartan-invalid=true]:ring-destructive/40 data-[matches-spartan-invalid=true]:border-destructive dark:data-[matches-spartan-invalid=true]:border-destructive/50 h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent py-1 ps-2.5 pe-8 text-sm text-foreground shadow-xs transition-[color,box-shadow] select-none focus-visible:ring-3 data-[matches-spartan-invalid=true]:ring-3 data-[size=sm]:h-8 outline-none disabled:pointer-events-none disabled:cursor-not-allowed [color-scheme:light] dark:[color-scheme:dark]", this.selectClass()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_computedSelectClass" }] : /* istanbul ignore next */ []));
     selectIconClass = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selectIconClass" }] : /* istanbul ignore next */ []));
@@ -28,7 +34,9 @@ class HlmNativeSelect {
     size = input('default', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    _disabled = linkedSignal(this.disabled, /* @ts-ignore */
+    _formDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_formDisabled" }] : /* istanbul ignore next */ []));
+    _disabled = computed(() => this.disabled() || this._formDisabled(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
     /** Whether to force the input into an invalid state. */
     forceInvalid = input(false, { ...(ngDevMode ? { debugName: "forceInvalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -73,10 +81,10 @@ class HlmNativeSelect {
         this._onTouched = fn;
     }
     setDisabledState(isDisabled) {
-        this._disabled.set(isDisabled);
+        this._formDisabled.set(isDisabled);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmNativeSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.3", type: HlmNativeSelect, isStandalone: true, selector: "hlm-native-select", inputs: { selectId: { classPropertyName: "selectId", publicName: "selectId", isSignal: true, isRequired: false, transformFunction: null }, selectClass: { classPropertyName: "selectClass", publicName: "selectClass", isSignal: true, isRequired: false, transformFunction: null }, selectIconClass: { classPropertyName: "selectIconClass", publicName: "selectIconClass", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", 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 }, valueInput: { classPropertyName: "valueInput", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { attributes: { "data-slot": "native-select-wrapper" }, properties: { "attr.data-size": "size()" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.3", type: HlmNativeSelect, isStandalone: true, selector: "hlm-native-select", inputs: { selectId: { classPropertyName: "selectId", publicName: "selectId", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null }, selectClass: { classPropertyName: "selectClass", publicName: "selectClass", isSignal: true, isRequired: false, transformFunction: null }, selectIconClass: { classPropertyName: "selectIconClass", publicName: "selectIconClass", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", 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 }, valueInput: { classPropertyName: "valueInput", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { attributes: { "data-slot": "native-select-wrapper" }, properties: { "attr.data-size": "size()" } }, providers: [
             HLM_NATIVE_SELECT_VALUE_ACCESSOR,
             provideIcons({ lucideChevronDown }),
             provideBrnLabelable(HlmNativeSelect),
@@ -84,6 +92,8 @@ class HlmNativeSelect {
     <select
       data-slot="native-select"
       [id]="selectId()"
+      [attr.name]="name()"
+      [attr.aria-describedby]="ariaDescribedby()"
       [class]="_computedSelectClass()"
       [attr.data-size]="size()"
       [attr.aria-invalid]="_ariaInvalid() ? 'true' : null"
@@ -127,6 +137,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
     <select
       data-slot="native-select"
       [id]="selectId()"
+      [attr.name]="name()"
+      [attr.aria-describedby]="ariaDescribedby()"
       [class]="_computedSelectClass()"
       [attr.data-size]="size()"
       [attr.aria-invalid]="_ariaInvalid() ? 'true' : null"
@@ -150,7 +162,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
     />
   `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { selectId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectId", required: false }] }], selectClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectClass", required: false }] }], selectIconClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectIconClass", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], forceInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "forceInvalid", required: false }] }], ariaInvalidOverride: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-invalid", required: false }] }], valueInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
+        }], ctorParameters: () => [], propDecorators: { selectId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectId", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedby", required: false }] }], selectClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectClass", required: false }] }], selectIconClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectIconClass", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], forceInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "forceInvalid", required: false }] }], ariaInvalidOverride: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-invalid", required: false }] }], valueInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
 
 class HlmNativeSelectOptGroup {
     constructor() {

package/native-select/types/native-select.d.ts

@@ -14,13 +14,18 @@ declare class HlmNativeSelect implements ControlValueAccessor {
     private readonly _fieldControl;
     private static _id;
     readonly selectId: _angular_core.InputSignal<string>;
+    /** Native `name` attribute forwarded to the inner `<select>`. */
+    readonly name: _angular_core.InputSignal<string | undefined>;
+    /** ID of the element describing the select (error/hint) for assistive tech. */
+    readonly ariaDescribedby: _angular_core.InputSignal<string | null>;
     readonly selectClass: _angular_core.InputSignal<ClassValue>;
     protected readonly _computedSelectClass: _angular_core.Signal<string>;
     readonly selectIconClass: _angular_core.InputSignal<ClassValue>;
     protected readonly _computedSelectIconClass: _angular_core.Signal<string>;
     readonly size: _angular_core.InputSignal<"sm" | "default">;
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
-    protected readonly _disabled: _angular_core.WritableSignal<boolean>;
+    private readonly _formDisabled;
+    protected readonly _disabled: _angular_core.Signal<boolean>;
     /** Whether to force the input into an invalid state. */
     readonly forceInvalid: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
     /** Manual override for aria-invalid. When not set, auto-detects from the parent autocomplete error state. */
@@ -45,7 +50,7 @@ declare class HlmNativeSelect implements ControlValueAccessor {
     registerOnTouched(fn: TouchFn): void;
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<HlmNativeSelect, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HlmNativeSelect, "hlm-native-select", never, { "selectId": { "alias": "selectId"; "required": false; "isSignal": true; }; "selectClass": { "alias": "selectClass"; "required": false; "isSignal": true; }; "selectIconClass": { "alias": "selectIconClass"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "forceInvalid": { "alias": "forceInvalid"; "required": false; "isSignal": true; }; "ariaInvalidOverride": { "alias": "aria-invalid"; "required": false; "isSignal": true; }; "valueInput": { "alias": "value"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, ["*"], true, [{ directive: typeof i1.BrnFieldControl; inputs: {}; outputs: {}; }]>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HlmNativeSelect, "hlm-native-select", never, { "selectId": { "alias": "selectId"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "ariaDescribedby": { "alias": "ariaDescribedby"; "required": false; "isSignal": true; }; "selectClass": { "alias": "selectClass"; "required": false; "isSignal": true; }; "selectIconClass": { "alias": "selectIconClass"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "forceInvalid": { "alias": "forceInvalid"; "required": false; "isSignal": true; }; "ariaInvalidOverride": { "alias": "aria-invalid"; "required": false; "isSignal": true; }; "valueInput": { "alias": "value"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, ["*"], true, [{ directive: typeof i1.BrnFieldControl; inputs: {}; outputs: {}; }]>;
 }
 
 declare class HlmNativeSelectOptGroup {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@egose/shadcn-theme-ng",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "Angular shadcn UI theme",
   "author": "Junmin Ahn",
   "bundles": [
@@ -150,14 +150,30 @@
       "types": "./field/types/field.d.ts",
       "default": "./field/fesm2022/field.mjs"
     },
+    "./form-autocomplete": {
+      "types": "./form-autocomplete/types/form-autocomplete.d.ts",
+      "default": "./form-autocomplete/fesm2022/form-autocomplete.mjs"
+    },
     "./form-checkbox": {
       "types": "./form-checkbox/types/form-checkbox.d.ts",
       "default": "./form-checkbox/fesm2022/form-checkbox.mjs"
     },
+    "./form-combobox": {
+      "types": "./form-combobox/types/form-combobox.d.ts",
+      "default": "./form-combobox/fesm2022/form-combobox.mjs"
+    },
     "./form-date-picker": {
       "types": "./form-date-picker/types/form-date-picker.d.ts",
       "default": "./form-date-picker/fesm2022/form-date-picker.mjs"
     },
+    "./form-date-picker-multi": {
+      "types": "./form-date-picker-multi/types/form-date-picker-multi.d.ts",
+      "default": "./form-date-picker-multi/fesm2022/form-date-picker-multi.mjs"
+    },
+    "./form-date-range-picker": {
+      "types": "./form-date-range-picker/types/form-date-range-picker.d.ts",
+      "default": "./form-date-range-picker/fesm2022/form-date-range-picker.mjs"
+    },
     "./form-field": {
       "types": "./form-field/types/form-field.d.ts",
       "default": "./form-field/fesm2022/form-field.mjs"
@@ -166,6 +182,26 @@
       "types": "./form-field-simple/types/form-field-simple.d.ts",
       "default": "./form-field-simple/fesm2022/form-field-simple.mjs"
     },
+    "./form-input-otp": {
+      "types": "./form-input-otp/types/form-input-otp.d.ts",
+      "default": "./form-input-otp/fesm2022/form-input-otp.mjs"
+    },
+    "./form-month-year-picker": {
+      "types": "./form-month-year-picker/types/form-month-year-picker.d.ts",
+      "default": "./form-month-year-picker/fesm2022/form-month-year-picker.mjs"
+    },
+    "./form-native-select": {
+      "types": "./form-native-select/types/form-native-select.d.ts",
+      "default": "./form-native-select/fesm2022/form-native-select.mjs"
+    },
+    "./form-phone-input": {
+      "types": "./form-phone-input/types/form-phone-input.d.ts",
+      "default": "./form-phone-input/fesm2022/form-phone-input.mjs"
+    },
+    "./form-radio-group": {
+      "types": "./form-radio-group/types/form-radio-group.d.ts",
+      "default": "./form-radio-group/fesm2022/form-radio-group.mjs"
+    },
     "./form-searchable-multiselect": {
       "types": "./form-searchable-multiselect/types/form-searchable-multiselect.d.ts",
       "default": "./form-searchable-multiselect/fesm2022/form-searchable-multiselect.mjs"
@@ -174,6 +210,14 @@
       "types": "./form-select/types/form-select.d.ts",
       "default": "./form-select/fesm2022/form-select.mjs"
     },
+    "./form-slider": {
+      "types": "./form-slider/types/form-slider.d.ts",
+      "default": "./form-slider/fesm2022/form-slider.mjs"
+    },
+    "./form-switch": {
+      "types": "./form-switch/types/form-switch.d.ts",
+      "default": "./form-switch/fesm2022/form-switch.mjs"
+    },
     "./form-text-input": {
       "types": "./form-text-input/types/form-text-input.d.ts",
       "default": "./form-text-input/fesm2022/form-text-input.mjs"
@@ -182,6 +226,14 @@
       "types": "./form-textarea/types/form-textarea.d.ts",
       "default": "./form-textarea/fesm2022/form-textarea.mjs"
     },
+    "./form-toggle": {
+      "types": "./form-toggle/types/form-toggle.d.ts",
+      "default": "./form-toggle/fesm2022/form-toggle.mjs"
+    },
+    "./form-toggle-group": {
+      "types": "./form-toggle-group/types/form-toggle-group.d.ts",
+      "default": "./form-toggle-group/fesm2022/form-toggle-group.mjs"
+    },
     "./hover-card": {
       "types": "./hover-card/types/hover-card.d.ts",
       "default": "./hover-card/fesm2022/hover-card.mjs"
@@ -238,6 +290,10 @@
       "types": "./pagination/types/pagination.d.ts",
       "default": "./pagination/fesm2022/pagination.mjs"
     },
+    "./phone-input": {
+      "types": "./phone-input/types/phone-input.d.ts",
+      "default": "./phone-input/fesm2022/phone-input.mjs"
+    },
     "./popover": {
       "types": "./popover/types/popover.d.ts",
       "default": "./popover/fesm2022/popover.mjs"