@ojiepermana/angular-component 22.0.35 → 22.0.40

package/fesm2022/ojiepermana-angular-component-table.mjs

@@ -1,14 +1,22 @@
 import * as i0 from '@angular/core';
 import { input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
-import { cn } from '@ojiepermana/angular-component/utils';
+import { cn, radiusBaseValue, densityBaseValue } from '@ojiepermana/angular-component/utils';
 
 class TableComponent {
     class = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    radius = input('inherit', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "radius" }] : /* istanbul ignore next */ []));
+    density = input('inherit', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "density" }] : /* istanbul ignore next */ []));
     classes = computed(() => cn('w-full caption-bottom text-sm', this.class()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    radiusBase = computed(() => radiusBaseValue(this.radius()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "radiusBase" }] : /* istanbul ignore next */ []));
+    densityBase = computed(() => densityBaseValue(this.density()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "densityBase" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: TableComponent, isStandalone: true, selector: "Table", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "relative block w-full overflow-x-auto" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: TableComponent, isStandalone: true, selector: "Table", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--radius-base": "radiusBase()", "style.--spacing-base": "densityBase()" }, classAttribute: "relative block w-full overflow-x-auto" }, ngImport: i0, template: `
     <table [class]="classes()">
       <ng-content />
     </table>
@@ -19,14 +27,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
             args: [{
                     selector: 'Table',
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: { class: 'relative block w-full overflow-x-auto' },
+                    host: {
+                        class: 'relative block w-full overflow-x-auto',
+                        '[style.--radius-base]': 'radiusBase()',
+                        '[style.--spacing-base]': 'densityBase()',
+                    },
                     template: `
     <table [class]="classes()">
       <ng-content />
     </table>
   `,
                 }]
-        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }] } });
 class TableHeaderComponent {
     class = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));

package/fesm2022/ojiepermana-angular-component-tabs.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { Directive, model, input, computed, forwardRef, ChangeDetectionStrategy, Component, inject, ElementRef } from '@angular/core';
-import { uniqueId, cn } from '@ojiepermana/angular-component/utils';
+import { uniqueId, radiusBaseValue, densityBaseValue, cn } from '@ojiepermana/angular-component/utils';
 
 /**
  * Shared state for a tabs group. Children read the active value and register
@@ -25,10 +25,18 @@ class TabsComponent extends TabsContextBase {
     ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     orientation = input('horizontal', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    radius = input('inherit', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "radius" }] : /* istanbul ignore next */ []));
+    density = input('inherit', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "density" }] : /* istanbul ignore next */ []));
     class = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
     idPrefix = uniqueId('Tabs');
     triggers = new Map();
+    radiusBase = computed(() => radiusBaseValue(this.radius()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "radiusBase" }] : /* istanbul ignore next */ []));
+    densityBase = computed(() => densityBaseValue(this.density()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "densityBase" }] : /* istanbul ignore next */ []));
     classes = computed(() => cn(this.orientation() === 'vertical' ? 'flex items-start gap-4' : 'block', this.class()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     register(element, value, disabled) {
@@ -88,7 +96,7 @@ class TabsComponent extends TabsContextBase {
         return normalized || 'tab';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: TabsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: TabsComponent, isStandalone: true, selector: "Tabs", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class": "classes()", "attr.data-orientation": "orientation()" } }, providers: [{ provide: TabsContextBase, useExisting: forwardRef(() => TabsComponent) }], usesInheritance: true, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: TabsComponent, isStandalone: true, selector: "Tabs", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class": "classes()", "attr.data-orientation": "orientation()", "style.--radius-base": "radiusBase()", "style.--spacing-base": "densityBase()" } }, providers: [{ provide: TabsContextBase, useExisting: forwardRef(() => TabsComponent) }], usesInheritance: true, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: TabsComponent, decorators: [{
             type: Component,
@@ -99,10 +107,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
                     host: {
                         '[class]': 'classes()',
                         '[attr.data-orientation]': 'orientation()',
+                        '[style.--radius-base]': 'radiusBase()',
+                        '[style.--spacing-base]': 'densityBase()',
                     },
                     template: `<ng-content />`,
                 }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 class TabsListComponent extends TabsListContextBase {
     ctx = inject(TabsComponent);
     variant = input('default', /* @ts-ignore */

package/fesm2022/ojiepermana-angular-component-textarea.mjs

@@ -1,11 +1,19 @@
 import * as i0 from '@angular/core';
 import { inject, ElementRef, input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
-import { cn } from '@ojiepermana/angular-component/utils';
+import { radiusBaseValue, densityBaseValue, cn } from '@ojiepermana/angular-component/utils';
 
 class TextareaComponent {
     el = inject(ElementRef);
     class = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    radius = input('inherit', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "radius" }] : /* istanbul ignore next */ []));
+    density = input('inherit', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "density" }] : /* istanbul ignore next */ []));
+    radiusBase = computed(() => radiusBaseValue(this.radius()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "radiusBase" }] : /* istanbul ignore next */ []));
+    densityBase = computed(() => densityBaseValue(this.density()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "densityBase" }] : /* istanbul ignore next */ []));
     classes = computed(() => cn([
         'flex min-h-[60px] w-full resize-y rounded-md border border-input bg-transparent px-3 py-2',
         'text-sm shadow-sm transition-colors',
@@ -19,17 +27,21 @@ class TextareaComponent {
         this.el.nativeElement.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: TextareaComponent, isStandalone: true, selector: "textarea[Textarea]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: TextareaComponent, isStandalone: true, selector: "textarea[Textarea]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "style.--radius-base": "radiusBase()", "style.--spacing-base": "densityBase()" } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: TextareaComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'textarea[Textarea]',
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: { '[class]': 'classes()' },
+                    host: {
+                        '[class]': 'classes()',
+                        '[style.--radius-base]': 'radiusBase()',
+                        '[style.--spacing-base]': 'densityBase()',
+                    },
                     template: '',
                 }]
-        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/ojiepermana-angular-component-timeline.mjs

@@ -4,11 +4,11 @@ import { cn } from '@ojiepermana/angular-component/utils';
 
 const TIMELINE_BASE = [
     'w-full min-w-0 text-sm text-foreground',
-    '[--timeline-content-gap:0.75rem] [--timeline-indicator-size:1.5rem] [--timeline-item-gap:1.5rem]',
+    '[--timeline-content-gap:calc(var(--spacing)*3)] [--timeline-indicator-size:1.5rem] [--timeline-item-gap:calc(var(--spacing)*6)]',
 ].join(' ');
 const timelineSizeClasses = {
     default: '[--timeline-indicator-size:1.5rem]',
-    lg: '[--timeline-indicator-size:2.5rem] [--timeline-content-gap:1rem]',
+    lg: '[--timeline-indicator-size:2.5rem] [--timeline-content-gap:calc(var(--spacing)*4)]',
 };
 const timelineAlignClasses = {
     start: 'items-start',

package/fesm2022/ojiepermana-angular-component-tooltip.mjs

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, input, forwardRef, ChangeDetectionStrategy, Component, inject, TemplateRef, Directive, ViewContainerRef, ElementRef, DestroyRef, output, signal, computed, effect } from '@angular/core';
+import { InjectionToken, input, forwardRef, ChangeDetectionStrategy, Component, inject, TemplateRef, computed, Directive, ViewContainerRef, ElementRef, DestroyRef, output, signal, effect } from '@angular/core';
+import { radiusBaseValue, densityBaseValue, connectedPositionFor, oppositeSide, uniqueId, overlayDismissals } from '@ojiepermana/angular-component/utils';
 import { Overlay } from '@angular/cdk/overlay';
 import { TemplatePortal, ComponentPortal } from '@angular/cdk/portal';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { connectedPositionFor, oppositeSide, uniqueId, overlayDismissals } from '@ojiepermana/angular-component/utils';
 
 const TOOLTIP_DEFAULTS = new InjectionToken('TOOLTIP_DEFAULTS');
 class TooltipComponent {
@@ -35,16 +35,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
 
 class TooltipContentDirective {
     template = inject(TemplateRef);
+    radius = input('inherit', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "radius" }] : /* istanbul ignore next */ []));
+    density = input('inherit', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "density" }] : /* istanbul ignore next */ []));
+    /**
+     * Resolved `--radius-base` / `--spacing-base` knob values (or `null` to
+     * inherit the global axis). Public so {@link TooltipTriggerDirective} can mirror
+     * them onto the CDK overlay panel — the element that actually paints the rounded
+     * background + padding — since this directive sits on an `<ng-template>` whose
+     * host bindings never reach the imperatively-created overlay subtree.
+     */
+    radiusBase = computed(() => radiusBaseValue(this.radius()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "radiusBase" }] : /* istanbul ignore next */ []));
+    densityBase = computed(() => densityBaseValue(this.density()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "densityBase" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: TooltipContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.3", type: TooltipContentDirective, isStandalone: true, selector: "ng-template[TooltipContent]", exportAs: ["TooltipContent"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.3", type: TooltipContentDirective, isStandalone: true, selector: "ng-template[TooltipContent]", inputs: { radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--radius-base": "radiusBase()", "style.--spacing-base": "densityBase()" } }, exportAs: ["TooltipContent"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: TooltipContentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-template[TooltipContent]',
                     exportAs: 'TooltipContent',
+                    host: {
+                        '[style.--radius-base]': 'radiusBase()',
+                        '[style.--spacing-base]': 'densityBase()',
+                    },
                 }]
-        }] });
+        }], propDecorators: { radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }] } });
 
 const TOOLTIP_PANEL_CLASSES = [
     'tooltip-panel',
@@ -161,6 +180,11 @@ class TooltipTriggerDirective {
         const tooltipId = uniqueId('Tooltip');
         this.overlayRef.overlayElement.id = tooltipId;
         this.overlayRef.overlayElement.setAttribute('role', 'tooltip');
+        // The painted surface is this overlay panel (rounded-md / px-3 / py-1.5), not
+        // the content directive's <ng-template>. Mirror the content directive's
+        // radius/density override onto it so the per-component knob actually rescales
+        // the tooltip; `null` removes the property and keeps following the global axis.
+        this.applySurfaceVars(this.overlayRef.overlayElement, this.TooltipTrigger());
         const portal = new TemplatePortal(this.TooltipTrigger().template, this.vcr);
         this.overlayRef.attach(portal);
         this.bindOverlayLifecycle();
@@ -184,6 +208,22 @@ class TooltipTriggerDirective {
             this.openedChange.emit(false);
         }
     }
+    applySurfaceVars(panel, content) {
+        const radiusBase = content.radiusBase();
+        const spacingBase = content.densityBase();
+        if (radiusBase === null) {
+            panel.style.removeProperty('--radius-base');
+        }
+        else {
+            panel.style.setProperty('--radius-base', radiusBase);
+        }
+        if (spacingBase === null) {
+            panel.style.removeProperty('--spacing-base');
+        }
+        else {
+            panel.style.setProperty('--spacing-base', spacingBase);
+        }
+    }
     bindOverlayLifecycle() {
         if (!this.overlayRef) {
             return;

package/fesm2022/ojiepermana-angular-component-utils.mjs

@@ -63,6 +63,56 @@ function overlayDismissals(overlayRef, origin) {
     return merge(overlayRef.outsidePointerEvents().pipe(filter((event) => !origin || !origin.contains(event.target))), overlayRef.keydownEvents().pipe(filter((event) => event.key === 'Escape')), overlayRef.detachments());
 }
 
+/**
+ * Per-component corner-radius / spacing-density override helpers.
+ *
+ * These mirror the global `theme-radius` / `theme-space` preset values from
+ * `@ojiepermana/angular-theme` — kept as a local copy so this package stays
+ * decoupled from the theme package (see its empty peer/deps on -theme).
+ *
+ * A component that accepts a `radius` / `density` input binds the resolved value
+ * onto its surface element via `[style.--radius-base]` / `[style.--spacing-base]`.
+ * Tailwind's `rounded-*` utilities resolve `calc(var(--radius-base) * n)` and the
+ * spacing utilities resolve `calc(var(--spacing-base) * n)` (see the theme's
+ * `base/tailwind.css` `@theme inline` mapping), so the override rescales that
+ * subtree and shadows the global `<html theme-radius|theme-space>` axis. The
+ * `'inherit'` preset binds nothing, so the component keeps following the axis.
+ */
+/** Corner-radius presets for a per-component `radius` input. */
+const COMPONENT_RADII = ['inherit', 'none', 'sm', 'md', 'lg', 'xl', 'full'];
+/** Spacing-density presets for a per-component `density` input. */
+const COMPONENT_DENSITIES = ['inherit', 'compact', 'normal', 'relaxed', 'spacious'];
+/** `--radius-base` knob value per preset; mirrors theme `radius/index.css`. */
+const RADIUS_BASE_VALUES = {
+    none: '0px',
+    sm: '0.375rem',
+    md: '0.625rem',
+    lg: '0.875rem',
+    xl: '1.25rem',
+    full: '9999px',
+};
+/** `--spacing-base` knob value per preset; mirrors theme `space/index.css`. */
+const DENSITY_BASE_VALUES = {
+    compact: '0.2rem',
+    normal: '0.25rem',
+    relaxed: '0.28rem',
+    spacious: '0.32rem',
+};
+/**
+ * Resolves a `radius` input to a `--radius-base` value, or `null` to inherit the
+ * global axis. Bind the result to the surface host: `[style.--radius-base]`.
+ */
+function radiusBaseValue(radius) {
+    return radius === 'inherit' ? null : RADIUS_BASE_VALUES[radius];
+}
+/**
+ * Resolves a `density` input to a `--spacing-base` value, or `null` to inherit
+ * the global axis. Bind the result to the surface host: `[style.--spacing-base]`.
+ */
+function densityBaseValue(density) {
+    return density === 'inherit' ? null : DENSITY_BASE_VALUES[density];
+}
+
 let counter = 0;
 /**
  * Returns a document-unique id with the given prefix, e.g. `uniqueId('Checkbox')`
@@ -77,4 +127,4 @@ function uniqueId(prefix) {
  * Generated bundle index. Do not edit.
  */
 
-export { cn, connectedPositionFor, oppositeSide, overlayDismissals, uniqueId };
+export { COMPONENT_DENSITIES, COMPONENT_RADII, cn, connectedPositionFor, densityBaseValue, oppositeSide, overlayDismissals, radiusBaseValue, uniqueId };

package/form/README.md

@@ -153,19 +153,19 @@ validation flows or static examples, use the `invalid` input on
 
 ## API Reference
 
-| Primitive                  | Selector                              | Inputs                            | Notes                                                                                  |
-| -------------------------- | ------------------------------------- | --------------------------------- | -------------------------------------------------------------------------------------- |
-| `FormFieldComponent`       | `FormField`                           | `class`, `orientation`, `invalid` | Core field wrapper. `orientation` supports `vertical`, `horizontal`, and `responsive`. |
-| `FormFieldsetComponent`    | `fieldset[FormFieldset]`              | `class`                           | Semantic fieldset reset with spacing presets.                                          |
-| `FormLegendComponent`      | `legend[FormLegend]`                  | `class`, `variant`                | Uses either standard legend sizing or label-sized copy.                                |
-| `FormGroupComponent`       | `FormGroup`                           | `class`                           | Stacks related fields and separators.                                                  |
-| `FormContentComponent`     | `FormContent`                         | `class`                           | Secondary text column for horizontal fields and card layouts.                          |
-| `FormLabelComponent`       | `FormLabel, label[FormLabel]`         | `class`                           | Visible label tied to the generated control id inside a field.                         |
-| `FormTitleComponent`       | `FormTitle`                           | `class`                           | Non-label heading for grouped controls.                                                |
-| `FormDescriptionComponent` | `FormDescription, p[FormDescription]` | `class`                           | Helper text inside a field or at the fieldset level.                                   |
-| `FormSeparatorComponent`   | `FormSeparator`                       | `class`                           | Divider between stacked sections.                                                      |
-| `FormMessageComponent`     | `FormMessage, p[FormMessage]`         | `class`                           | Error text shown when the field is invalid.                                            |
-| `FormControlDirective`     | `[FormControl]`                       | none                              | Auto-wires `id`, `aria-describedby`, and invalid state for native controls.            |
+| Primitive                  | Selector                               | Inputs                            | Notes                                                                                  |
+| -------------------------- | -------------------------------------- | --------------------------------- | -------------------------------------------------------------------------------------- |
+| `FormFieldComponent`       | `FormField`                            | `class`, `orientation`, `invalid` | Core field wrapper. `orientation` supports `vertical`, `horizontal`, and `responsive`. |
+| `FormFieldsetComponent`    | `FormFieldset, fieldset[FormFieldset]` | `class`                           | Semantic fieldset reset with spacing presets.                                          |
+| `FormLegendComponent`      | `FormLegend, legend[FormLegend]`       | `class`, `variant`                | Uses either standard legend sizing or label-sized copy.                                |
+| `FormGroupComponent`       | `FormGroup`                            | `class`                           | Stacks related fields and separators.                                                  |
+| `FormContentComponent`     | `FormContent`                          | `class`                           | Secondary text column for horizontal fields and card layouts.                          |
+| `FormLabelComponent`       | `FormLabel, label[FormLabel]`          | `class`                           | Visible label tied to the generated control id inside a field.                         |
+| `FormTitleComponent`       | `FormTitle`                            | `class`                           | Non-label heading for grouped controls.                                                |
+| `FormDescriptionComponent` | `FormDescription, p[FormDescription]`  | `class`                           | Helper text inside a field or at the fieldset level.                                   |
+| `FormSeparatorComponent`   | `FormSeparator`                        | `class`                           | Divider between stacked sections.                                                      |
+| `FormMessageComponent`     | `FormMessage, p[FormMessage]`          | `class`                           | Error text shown when the field is invalid.                                            |
+| `FormControlDirective`     | `[FormControl]`                        | none                              | Auto-wires `id`, `aria-describedby`, and invalid state for native controls.            |
 
 ## Styling and Theming
 

package/hover-card/README.md

@@ -104,7 +104,7 @@ The overlay remains open while either the trigger or the rendered content is hov
 | `closeDelay`       | `number`                                 | Inherited from root |
 | `disabled`         | `boolean`                                | `false`             |
 
-Exposes `isOpen()` and `openedChange`. The host reflects `aria-expanded` and `aria-haspopup="dialog"`.
+Exposes `isOpen()` and `openedChange`. The host reflects `data-state` (`"open"` or `"closed"`).
 
 ### `HoverCardContentDirective`
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ojiepermana/angular-component",
-  "version": "22.0.35",
+  "version": "22.0.40",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/edsis/angular.git"

package/radio/README.md

@@ -152,15 +152,15 @@ Forward helper and error relationships from the group when the descriptive copy
 
 ### `RadioGroupComponent`
 
-| Input              | Type                         | Default      | Notes                                                        |
-| ------------------ | ---------------------------- | ------------ | ------------------------------------------------------------ |
-| `name`             | `string`                     | `''`         | Forwarded to the underlying Material radio group.            |
-| `orientation`      | `'horizontal' \| 'vertical'` | `'vertical'` | Switches between stacked rows and inline columns.            |
-| `aria-label`       | `string \| null`             | `null`       | Use when the group needs an explicit accessible name.        |
-| `aria-labelledby`  | `string \| null`             | `null`       | Alternative to `aria-label` for external group headings.     |
-| `aria-describedby` | `string \| null`             | `null`       | Connects helper or error text outside the group.             |
-| `aria-invalid`     | `boolean \| string \| null`  | `null`       | Marks the group invalid for validation-driven presentations. |
-| `class`            | `string`                     | `''`         | Adds utility classes to the wrapped group host.              |
+| Input              | Type                                   | Default      | Notes                                                        |
+| ------------------ | -------------------------------------- | ------------ | ------------------------------------------------------------ |
+| `name`             | `string`                               | `''`         | Shared native `name` so the browser groups the radios.       |
+| `orientation`      | `'horizontal' \| 'vertical'`           | `'vertical'` | Switches between stacked rows and inline columns.            |
+| `aria-label`       | `string \| null`                       | `null`       | Use when the group needs an explicit accessible name.        |
+| `aria-labelledby`  | `string \| null`                       | `null`       | Alternative to `aria-label` for external group headings.     |
+| `aria-describedby` | `string \| null`                       | `null`       | Connects helper or error text outside the group.             |
+| `aria-invalid`     | `boolean \| 'true' \| 'false' \| null` | `null`       | Marks the group invalid for validation-driven presentations. |
+| `class`            | `string`                               | `''`         | Adds utility classes to the wrapped group host.              |
 
 | Output        | Payload  |
 | ------------- | -------- |
@@ -178,7 +178,7 @@ Public method: `focus()`.
 
 ## Styling and Theming
 
-The radio primitives wrap Angular Material's structural radio markup and restyle it through the shared theme tokens.
+The radio primitives render native radio inputs (no Material dependency) and restyle them through the shared theme tokens.
 
 - The selected dot uses the `primary` token.
 - Unselected outlines use the `input` token rather than current text color.
@@ -195,7 +195,7 @@ The radio primitives wrap Angular Material's structural radio markup and restyle
 ## Keyboard Interactions
 
 - `Tab` moves focus to the selected item or first enabled item in the group.
-- Arrow keys move between options using Angular Material's radio-group behavior.
+- Arrow keys move between options using native radio-group behavior.
 - `Space` selects the focused option.
 
 ## Angular Notes

package/scroll-area/README.md

@@ -98,8 +98,10 @@ WebKit scrollbar pseudo-elements for Chromium/Safari.
 
 Tokens consumed:
 
-- `--border` for the default scrollbar thumb.
-- `--muted-foreground` for the hover thumb fallback.
+- `--scrollbar-thumb` for the default scrollbar thumb (overridable via `--tw-scrollbar-thumb`).
+- `--scrollbar-track` for the scrollbar track (overridable via `--tw-scrollbar-track`).
+- `--scrollbar-thumb-hover` for the hover thumb fallback.
+- `--scrollbar-size` (default `0.5rem`) and `--scrollbar-radius` (default `9999px`) size the WebKit scrollbar.
 - `--ring` for keyboard focus indication.
 
 Pass `class` for host sizing and borders, and `viewportClass` when the viewport

package/sheet/README.md

@@ -129,17 +129,17 @@ Because the overlay surface renders through CDK Overlay, set `dir="rtl"` on proj
 
 ## API Reference
 
-| Input                  | Type            | Default    |
-| ---------------------- | --------------- | ---------- | ----------- | ------- | ---------------------------------------------- |
-| `open`                 | `boolean` model | `false`    |
-| `side`                 | `'top' \\       | 'right' \\ | 'bottom' \\ | 'left'` | `'right'` for `Sheet`, `'bottom'` for `Drawer` |
-| `closeOnEscape`        | `boolean`       | `true`     |
-| `closeOnBackdropClick` | `boolean`       | `true`     |
-| `showCloseButton`      | `boolean`       | `true`     |
-| `closeButtonLabel`     | `string`        | `'Close'`  |
-| `aria-labelledby`      | `string \\      | null`      | `null`      |
-| `aria-describedby`     | `string \\      | null`      | `null`      |
-| `class`                | `string`        | `''`       |
+| Input                  | Type                                     | Default                                        |
+| ---------------------- | ---------------------------------------- | ---------------------------------------------- |
+| `open`                 | `boolean` model                          | `false`                                        |
+| `side`                 | `'top' \| 'right' \| 'bottom' \| 'left'` | `'right'` for `Sheet`, `'bottom'` for `Drawer` |
+| `closeOnEscape`        | `boolean`                                | `true`                                         |
+| `closeOnBackdropClick` | `boolean`                                | `true`                                         |
+| `showCloseButton`      | `boolean`                                | `true`                                         |
+| `closeButtonLabel`     | `string`                                 | `'Close'`                                      |
+| `aria-labelledby`      | `string \| null`                         | `null`                                         |
+| `aria-describedby`     | `string \| null`                         | `null`                                         |
+| `class`                | `string`                                 | `''`                                           |
 
 | Part                 | Purpose                                                        |
 | -------------------- | -------------------------------------------------------------- |

package/slider/README.md

@@ -6,7 +6,7 @@ This entrypoint now exports two related Angular surfaces:
 
 - `Slider` via `SliderRootComponent` for shadcn-style single-thumb, range,
   multiple-thumb, vertical, disabled, and RTL examples.
-- `input[Slider]` via `SliderInputDirective` for browser-native range inputs
+- `input[type=range][Slider]` via `SliderInputDirective` for browser-native range inputs
   when labels and forms should stay on the native path.
 
 ## Import
@@ -23,7 +23,7 @@ Use `Slider` when you want the richer shadcn-style component.
 <Slider [value]="[75]" />
 ```
 
-Keep `input[Slider]` when a plain native range input is still the best fit.
+Keep `input[type=range][Slider]` when a plain native range input is still the best fit.
 
 ```html
 <input type="range" Slider />

package/switch/README.md

@@ -1,6 +1,6 @@
 # Switch
 
-A shadcn-style switch primitive built on Angular Material's `mat-slide-toggle`, with `ControlValueAccessor` support for `ngModel` and reactive forms.
+A shadcn-style switch primitive built on a native `<input type="checkbox" role="switch">`, with `ControlValueAccessor` support for `ngModel` and reactive forms.
 
 ## Import
 
@@ -115,16 +115,16 @@ Use `size="sm"` for denser settings lists and compact preference panes.
 
 | Input              | Type                        | Default        | Notes                                                                     |
 | ------------------ | --------------------------- | -------------- | ------------------------------------------------------------------------- |
-| `id`               | `string`                    | auto-generated | Forwarded to Material; the focusable switch button becomes `<id>-button`. |
-| `name`             | `string \| null`            | `null`         | Forwarded to the underlying switch control.                               |
+| `id`               | `string`                    | auto-generated | Applied directly to the native checkbox input.                            |
+| `name`             | `string \| null`            | `null`         | Forwarded to the underlying checkbox input.                               |
 | `disabled`         | `boolean`                   | `false`        | Merges with form-driven disabled state.                                   |
-| `required`         | `boolean`                   | `false`        | Forwarded to the underlying Material switch.                              |
+| `required`         | `boolean`                   | `false`        | Forwarded to the underlying checkbox input.                               |
 | `aria-label`       | `string \| null`            | `null`         | Use for compact or text-free switch controls.                             |
 | `aria-describedby` | `string \| null`            | `null`         | Links helper or error text outside the control.                           |
 | `aria-labelledby`  | `string \| null`            | `null`         | Best choice for descriptive rows and card layouts.                        |
 | `aria-invalid`     | `boolean \| string \| null` | `null`         | Switches the control into the destructive invalid treatment.              |
 | `size`             | `'default' \| 'sm'`         | `'default'`    | Smaller track for dense settings lists.                                   |
-| `class`            | `string`                    | `''`           | Adds utility classes to the wrapped Material host.                        |
+| `class`            | `string`                    | `''`           | Adds utility classes to the switch host element.                          |
 
 | Output          | Payload   |
 | --------------- | --------- |
@@ -134,21 +134,21 @@ Public method: `focus()`.
 
 ## Styling and theming
 
-The component uses a Material bridge so the MDC switch structure is restyled with the library theme tokens.
+The component renders a native checkbox with `role="switch"`, styled with the library theme tokens.
 
 - Default track and handle colors use the shared `primary`, `input`, and `background` tokens.
 - `aria-invalid="true"` switches the switch into the destructive token set.
 - `size="sm"` tightens the track and handle sizing without creating a second entrypoint.
 - Pass spacing or alignment utilities through `class` when the switch needs to line up with multi-line content.
 
-Additional visual adjustments belong in `switch.component.css` inside the library.
+Additional visual adjustments belong in the component's inline utility classes inside the library.
 
 ## Accessibility
 
 - Give the switch an accessible name through projected content, `aria-label`, or `aria-labelledby`.
 - Use `aria-describedby` for helper or error text rendered outside the control.
-- Prefer `aria-labelledby` over `label[for]` when the visible label is external, because Angular Material renders a focusable switch button rather than a labelable text input.
-- `aria-invalid` is forwarded to the underlying Material host for validation styling and assistive technology cues.
+- Prefer `aria-labelledby` over `label[for]` when the visible label is external.
+- `aria-invalid` is forwarded to the underlying checkbox input for validation styling and assistive technology cues.
 
 ## Keyboard interactions
 
@@ -158,7 +158,7 @@ Additional visual adjustments belong in `switch.component.css` inside the librar
 ## Angular notes
 
 - `ngModel`, reactive forms, and `checkedChange` all work with the same primitive.
-- Passing `id` forwards a stable base id to Angular Material; the focusable button receives the derived `<id>-button` id.
+- Passing `id` applies a stable id directly to the native checkbox input.
 - The direct `disabled` input and `setDisabledState()` from forms are merged, so either source can disable the control.
 
 ## Source parity