@ojiepermana/angular-component 22.0.36 → 22.0.41

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

@@ -1,16 +1,24 @@
 import * as i0 from '@angular/core';
 import { input, computed, ChangeDetectionStrategy, Component, inject } from '@angular/core';
-import { cn } from '@ojiepermana/angular-component/utils';
+import { cn, radiusBaseValue, densityBaseValue } from '@ojiepermana/angular-component/utils';
 
 class CardComponent {
     size = input('default', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     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('block rounded-lg border border-border bg-card text-card-foreground shadow-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: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: CardComponent, isStandalone: true, selector: "Card", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-size": "size()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: CardComponent, isStandalone: true, selector: "Card", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, 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()", "attr.data-size": "size()", "style.--radius-base": "radiusBase()", "style.--spacing-base": "densityBase()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: CardComponent, decorators: [{
             type: Component,
@@ -20,10 +28,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
                     host: {
                         '[class]': 'classes()',
                         '[attr.data-size]': 'size()',
+                        '[style.--radius-base]': 'radiusBase()',
+                        '[style.--spacing-base]': 'densityBase()',
                     },
                     template: `<ng-content />`,
                 }]
-        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], 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 CardHeaderComponent {
     card = inject(CardComponent, { optional: true });

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

@@ -7,7 +7,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { DOCUMENT } from '@angular/common';
 import { filter } from 'rxjs/operators';
 import { ButtonComponent } from '@ojiepermana/angular-component/button';
-import { cn } from '@ojiepermana/angular-component/utils';
+import { cn, radiusBaseValue, densityBaseValue } from '@ojiepermana/angular-component/utils';
 
 /**
  * Declarative modal dialog. Renders into the body via CDK overlay when
@@ -46,6 +46,10 @@ class DialogComponent {
     describedBy = input(null, { ...(ngDevMode ? { debugName: "describedBy" } : /* istanbul ignore next */ {}), alias: 'aria-describedby' });
     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 */ []));
     openedChange = output();
     tpl = viewChild.required('tpl');
     overlayRef = null;
@@ -53,6 +57,10 @@ class DialogComponent {
     previousFocus = null;
     surfaceClasses = computed(() => cn('relative grid w-full max-w-lg gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200', this.class()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "surfaceClasses" }] : /* 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 */ []));
     constructor() {
         this.destroyRef.onDestroy(() => this.detach(false));
         effect(() => {
@@ -109,7 +117,7 @@ class DialogComponent {
         this.requestClose();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: DialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.3", type: DialogComponent, isStandalone: true, selector: "Dialog", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, closeButtonLabel: { classPropertyName: "closeButtonLabel", publicName: "closeButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, labelledBy: { classPropertyName: "labelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, describedBy: { classPropertyName: "describedBy", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", openedChange: "openedChange" }, viewQueries: [{ propertyName: "tpl", first: true, predicate: ["tpl"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.3", type: DialogComponent, isStandalone: true, selector: "Dialog", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, closeButtonLabel: { classPropertyName: "closeButtonLabel", publicName: "closeButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, labelledBy: { classPropertyName: "labelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, describedBy: { classPropertyName: "describedBy", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, 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 } }, outputs: { open: "openChange", openedChange: "openedChange" }, viewQueries: [{ propertyName: "tpl", first: true, predicate: ["tpl"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <ng-template #tpl>
       <div
         class="dialog-surface"
@@ -117,7 +125,9 @@ class DialogComponent {
         aria-modal="true"
         [attr.aria-labelledby]="labelledBy()"
         [attr.aria-describedby]="describedBy()"
-        [class]="surfaceClasses()">
+        [class]="surfaceClasses()"
+        [style.--radius-base]="radiusBase()"
+        [style.--spacing-base]="densityBase()">
         @if (showCloseButton()) {
           <button
             type="button"
@@ -134,7 +144,7 @@ class DialogComponent {
         <ng-content />
       </div>
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[Button], a[Button]", inputs: ["variant", "size", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[Button], a[Button]", inputs: ["variant", "size", "class", "radius", "density"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: DialogComponent, decorators: [{
             type: Component,
@@ -150,7 +160,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
         aria-modal="true"
         [attr.aria-labelledby]="labelledBy()"
         [attr.aria-describedby]="describedBy()"
-        [class]="surfaceClasses()">
+        [class]="surfaceClasses()"
+        [style.--radius-base]="radiusBase()"
+        [style.--spacing-base]="densityBase()">
         @if (showCloseButton()) {
           <button
             type="button"
@@ -169,7 +181,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
     </ng-template>
   `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], closeButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonLabel", required: false }] }], labelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], describedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }], tpl: [{ type: i0.ViewChild, args: ['tpl', { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], closeButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonLabel", required: false }] }], labelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], describedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], 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 }] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }], tpl: [{ type: i0.ViewChild, args: ['tpl', { isSignal: true }] }] } });
 
 class DialogCloseDirective {
     dialog = inject(DialogComponent);

package/fesm2022/ojiepermana-angular-component-dropdown-menu.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { inject, ElementRef, input, output, Directive, computed, ChangeDetectionStrategy, Component, model, forwardRef, ContentChildren, TemplateRef, ViewContainerRef, DestroyRef, signal } from '@angular/core';
-import { cn, connectedPositionFor, oppositeSide } from '@ojiepermana/angular-component/utils';
+import { cn, radiusBaseValue, densityBaseValue, connectedPositionFor, oppositeSide } from '@ojiepermana/angular-component/utils';
 import { FocusKeyManager } from '@angular/cdk/a11y';
 import { Overlay } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
@@ -314,9 +314,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
 class MenuSurfaceComponent {
     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 */ []));
     items;
     closeRequested = output();
     keyManager = null;
+    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('z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md outline-none', this.class()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     ngAfterContentInit() {
@@ -346,7 +354,7 @@ class MenuSurfaceComponent {
         this.closeRequested.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: MenuSurfaceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: MenuSurfaceComponent, isStandalone: true, selector: "MenuSurface", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeRequested: "closeRequested" }, host: { attributes: { "tabindex": "-1" }, listeners: { "keydown.arrowDown": "onArrow($any($event), 1)", "keydown.arrowUp": "onArrow($any($event), -1)", "keydown.home": "onHome($any($event))", "keydown.end": "onEnd($any($event))", "keydown.tab": "onTab($any($event))" }, properties: { "class": "classes()", "attr.role": "\"menu\"" } }, queries: [{ propertyName: "items", predicate: MenuFocusableItem, descendants: 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: MenuSurfaceComponent, isStandalone: true, selector: "MenuSurface", 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 } }, outputs: { closeRequested: "closeRequested" }, host: { attributes: { "tabindex": "-1" }, listeners: { "keydown.arrowDown": "onArrow($any($event), 1)", "keydown.arrowUp": "onArrow($any($event), -1)", "keydown.home": "onHome($any($event))", "keydown.end": "onEnd($any($event))", "keydown.tab": "onTab($any($event))" }, properties: { "class": "classes()", "style.--radius-base": "radiusBase()", "style.--spacing-base": "densityBase()", "attr.role": "\"menu\"" } }, queries: [{ propertyName: "items", predicate: MenuFocusableItem, descendants: 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: MenuSurfaceComponent, decorators: [{
             type: Component,
@@ -355,6 +363,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
+                        '[style.--radius-base]': 'radiusBase()',
+                        '[style.--spacing-base]': 'densityBase()',
                         '[attr.role]': '"menu"',
                         tabindex: '-1',
                         '(keydown.arrowDown)': 'onArrow($any($event), 1)',
@@ -365,7 +375,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
                     },
                     template: `<ng-content />`,
                 }]
-        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], items: [{
+        }], 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 }] }], items: [{
                 type: ContentChildren,
                 args: [MenuFocusableItem, { descendants: true }]
             }], closeRequested: [{ type: i0.Output, args: ["closeRequested"] }] } });

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

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { inject, ElementRef, input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
-import { cn } from '@ojiepermana/angular-component/utils';
+import { cn, radiusBaseValue, densityBaseValue } from '@ojiepermana/angular-component/utils';
 
 const BASE = [
     'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1',
@@ -19,23 +19,35 @@ class InputComponent {
     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 */ []));
     classes = computed(() => cn(BASE, 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 */ []));
     focus() {
         this.el.nativeElement.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: InputComponent, isStandalone: true, selector: "input[Input]", 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: InputComponent, isStandalone: true, selector: "input[Input]", 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: InputComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'input[Input]',
                     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-item.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { input, inject, ElementRef, computed, ChangeDetectionStrategy, Component } from '@angular/core';
-import { cn } from '@ojiepermana/angular-component/utils';
+import { input, computed, inject, ElementRef, ChangeDetectionStrategy, Component } from '@angular/core';
+import { radiusBaseValue, densityBaseValue, cn } from '@ojiepermana/angular-component/utils';
 import { cva } from 'class-variance-authority';
 
 const itemVariants = cva(['flex w-full flex-wrap items-center gap-x-3 gap-y-3', 'text-foreground', '[&[href]]:no-underline'].join(' '), {
@@ -70,12 +70,20 @@ class ItemComponent {
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     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 */ []));
     host = inject(ElementRef);
     interactive = ['a', 'button'].includes(this.host.nativeElement.tagName.toLowerCase());
     classes = computed(() => cn(itemVariants({ variant: this.variant(), size: this.size(), interactive: this.interactive }), this.class()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: ItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: ItemComponent, isStandalone: true, selector: "Item, [Item]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-size": "size()", "attr.data-variant": "variant()", "attr.data-interactive": "interactive ? \"true\" : null" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: ItemComponent, isStandalone: true, selector: "Item, [Item]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, 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()", "attr.data-size": "size()", "attr.data-variant": "variant()", "attr.data-interactive": "interactive ? \"true\" : null", "style.--radius-base": "radiusBase()", "style.--spacing-base": "densityBase()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: ItemComponent, decorators: [{
             type: Component,
@@ -87,10 +95,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
                         '[attr.data-size]': 'size()',
                         '[attr.data-variant]': 'variant()',
                         '[attr.data-interactive]': 'interactive ? "true" : null',
+                        '[style.--radius-base]': 'radiusBase()',
+                        '[style.--spacing-base]': 'densityBase()',
                     },
                     template: `<ng-content />`,
                 }]
-        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], 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 ItemGroupComponent {
     class = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));

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

@@ -13,7 +13,7 @@ class KanbanComponent {
     dense = input(false, { ...(ngDevMode ? { debugName: "dense" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     class = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn('flex w-full min-w-0 gap-[var(--kanban-column-gap)] overflow-x-auto pb-3 text-sm text-foreground', '[--kanban-card-gap:0.75rem] [--kanban-column-gap:1rem]', kanbanColumnWidthClasses[this.columnWidth()], this.dense() ? '[--kanban-card-gap:0.5rem] [--kanban-column-gap:0.75rem]' : '', this.class()), /* @ts-ignore */
+    classes = computed(() => cn('flex w-full min-w-0 gap-[var(--kanban-column-gap)] overflow-x-auto pb-3 text-sm text-foreground', '[--kanban-card-gap:calc(var(--spacing)*3)] [--kanban-column-gap:calc(var(--spacing)*4)]', kanbanColumnWidthClasses[this.columnWidth()], this.dense() ? '[--kanban-card-gap:calc(var(--spacing)*2)] [--kanban-column-gap:calc(var(--spacing)*3)]' : '', this.class()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: KanbanComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: KanbanComponent, isStandalone: true, selector: "Kanban", inputs: { columnWidth: { classPropertyName: "columnWidth", publicName: "columnWidth", isSignal: true, isRequired: false, transformFunction: null }, dense: { classPropertyName: "dense", publicName: "dense", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"kanban\"", "attr.data-column-width": "columnWidth()", "attr.data-dense": "dense() ? \"\" : null" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });

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

@@ -1,22 +1,34 @@
 import * as i0 from '@angular/core';
-import { inject, TemplateRef, Directive, InjectionToken, ViewContainerRef, ElementRef, DestroyRef, input, output, signal } from '@angular/core';
+import { inject, TemplateRef, input, computed, Directive, InjectionToken, ViewContainerRef, ElementRef, DestroyRef, output, signal } from '@angular/core';
+import { radiusBaseValue, densityBaseValue, connectedPositionFor, oppositeSide, overlayDismissals, uniqueId } from '@ojiepermana/angular-component/utils';
 import { Overlay } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { connectedPositionFor, oppositeSide, overlayDismissals, uniqueId } from '@ojiepermana/angular-component/utils';
 
 class PopoverContentDirective {
     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 */ []));
+    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: PopoverContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.3", type: PopoverContentDirective, isStandalone: true, selector: "ng-template[PopoverContent]", exportAs: ["PopoverContent"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.3", type: PopoverContentDirective, isStandalone: true, selector: "ng-template[PopoverContent]", 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: ["PopoverContent"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: PopoverContentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-template[PopoverContent]',
                     exportAs: 'PopoverContent',
+                    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 POPOVER_TRIGGER_DEFAULTS = new InjectionToken('POPOVER_TRIGGER_DEFAULTS');
 class PopoverTriggerDirective {

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

@@ -1,10 +1,11 @@
 import * as i0 from '@angular/core';
-import { inject, effect, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, input, computed, effect, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import * as i1 from '@angular/cdk/overlay';
 import { OverlayModule } from '@angular/cdk/overlay';
 import { MAT_OPTION_PARENT_COMPONENT, MatOption, MatPseudoCheckbox, MatRipple } from '@angular/material/core';
 import { MatSelect } from '@angular/material/select';
 import { FormFieldContext } from '@ojiepermana/angular-component/form';
+import { radiusBaseValue, densityBaseValue } from '@ojiepermana/angular-component/utils';
 
 /**
  * Custom shadcn-styled select.
@@ -28,6 +29,16 @@ import { FormFieldContext } from '@ojiepermana/angular-component/form';
 class SelectComponent extends MatSelect {
     /** Optional bridge to an enclosing edsis `<FormField>` (validation + a11y). */
     formFieldContext = inject(FormFieldContext, { optional: true });
+    /** Per-component corner-radius override; `'inherit'` follows the global axis. */
+    radius = input('inherit', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "radius" }] : /* istanbul ignore next */ []));
+    /** Per-component spacing-density override; `'inherit'` follows the global axis. */
+    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 */ []));
     constructor() {
         super();
         const ctx = this.formFieldContext;
@@ -49,7 +60,7 @@ class SelectComponent extends MatSelect {
         this.formFieldContext?.control.set(this.ngControl?.control ?? null);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.3", type: SelectComponent, isStandalone: true, selector: "SelectField", host: { attributes: { "role": "combobox", "aria-haspopup": "listbox" }, classAttribute: "mat-mdc-select" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.3", type: SelectComponent, isStandalone: true, selector: "SelectField", inputs: { radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "combobox", "aria-haspopup": "listbox" }, properties: { "style.--radius-base": "radiusBase()", "style.--spacing-base": "densityBase()" }, classAttribute: "mat-mdc-select" }, providers: [
             { provide: MatSelect, useExisting: forwardRef(() => SelectComponent) },
             { provide: MAT_OPTION_PARENT_COMPONENT, useExisting: forwardRef(() => SelectComponent) },
         ], exportAs: ["matSelect"], usesInheritance: true, ngImport: i0, template: `
@@ -105,6 +116,8 @@ class SelectComponent extends MatSelect {
         tabindex="-1"
         class="mat-mdc-select-panel mdc-menu-surface mdc-menu-surface--open select-panel"
         [class]="panelClass"
+        [style.--radius-base]="radiusBase()"
+        [style.--spacing-base]="densityBase()"
         [class.mat-select-panel-animations-enabled]="!_animationsDisabled"
         [class.mat-primary]="_parentFormField?.color === 'primary'"
         [class.mat-accent]="_parentFormField?.color === 'accent'"
@@ -118,7 +131,7 @@ class SelectComponent extends MatSelect {
         <ng-content></ng-content>
       </div>
     </ng-template>
-  `, isInline: true, styles: ["@keyframes _mat-select-enter{0%{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:none}}@keyframes _mat-select-exit{0%{opacity:1}to{opacity:0}}.mat-mdc-select{display:inline-block;width:100%;outline:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:var(--mat-select-enabled-trigger-text-color, var(--mat-sys-on-surface));font-family:var(--mat-select-trigger-text-font, var(--mat-sys-body-large-font));line-height:var(--mat-select-trigger-text-line-height, var(--mat-sys-body-large-line-height));font-size:var(--mat-select-trigger-text-size, var(--mat-sys-body-large-size));font-weight:var(--mat-select-trigger-text-weight, var(--mat-sys-body-large-weight));letter-spacing:var(--mat-select-trigger-text-tracking, var(--mat-sys-body-large-tracking))}div.mat-mdc-select-panel{box-shadow:var( --mat-select-container-elevation-shadow, 0px 3px 1px -2px rgba(0, 0, 0, .2), 0px 2px 2px 0px rgba(0, 0, 0, .14), 0px 1px 5px 0px rgba(0, 0, 0, .12) )}.mat-mdc-select-disabled,.mat-mdc-select-disabled .mat-mdc-select-placeholder{color:var(--mat-select-disabled-trigger-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mat-mdc-select-trigger{display:inline-flex;align-items:center;cursor:pointer;position:relative;box-sizing:border-box;width:100%}.mat-mdc-select-disabled .mat-mdc-select-trigger{-webkit-user-select:none;user-select:none;cursor:default}.mat-mdc-select-value{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mat-mdc-select-value-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mat-mdc-select-arrow-wrapper{height:24px;flex-shrink:0;display:inline-flex;align-items:center}.mat-mdc-select-arrow{width:10px;height:5px;position:relative;color:var(--mat-select-enabled-arrow-color, var(--mat-sys-on-surface-variant))}.mat-select-open .mat-mdc-select-arrow{transform:rotate(180deg)}.mat-mdc-select-arrow svg{fill:currentColor;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@media(forced-colors:active){.mat-mdc-select-arrow svg{fill:CanvasText}.mat-mdc-select-disabled .mat-mdc-select-arrow svg{fill:GrayText}}div.mat-mdc-select-panel{width:100%;max-height:275px;outline:0;overflow:auto;padding:8px 0;box-sizing:border-box;transform-origin:top center;border-radius:0 0 4px 4px;position:relative;background-color:var(--mat-select-panel-background-color, var(--mat-sys-surface-container))}.mat-mdc-select-panel-above div.mat-mdc-select-panel{border-radius:4px 4px 0 0;transform-origin:bottom center}@media(forced-colors:active){div.mat-mdc-select-panel{outline:solid 1px}}.mat-select-panel-animations-enabled{animation:_mat-select-enter .12s cubic-bezier(0,0,.2,1)}.mat-select-panel-animations-enabled.mat-select-panel-exit{animation:_mat-select-exit .1s linear}.mat-mdc-select-placeholder{transition:color .4s .1333333333333s cubic-bezier(.25,.8,.25,1);color:var(--mat-select-placeholder-text-color, var(--mat-sys-on-surface-variant))}._mat-animation-noopable .mat-mdc-select-placeholder{transition:none}.mat-mdc-select-min-line:empty:before{content:\" \";white-space:pre;width:1px;display:inline-block;visibility:hidden}selectfield.mat-mdc-select{display:flex;align-items:center;box-sizing:border-box;width:100%;height:2.25rem;padding:0 .75rem;border:1px solid hsl(var(--input));border-radius:calc(var(--radius) - .125rem);background:transparent;color:hsl(var(--foreground));font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--text-sm--line-height);cursor:pointer}selectfield.mat-mdc-select:focus,selectfield.mat-mdc-select.mat-select-open{outline:none;border-color:hsl(var(--ring));box-shadow:0 0 0 1px hsl(var(--ring))}selectfield.mat-mdc-select-disabled{cursor:not-allowed;opacity:.5;background:hsl(var(--muted) / .4)}selectfield.mat-mdc-select-invalid{border-color:hsl(var(--destructive))}selectfield .mat-mdc-select-value{color:hsl(var(--foreground))}selectfield .mat-mdc-select-placeholder{color:hsl(var(--muted-foreground))}selectfield .mat-mdc-select-arrow{color:hsl(var(--muted-foreground))}.mat-mdc-select-panel.select-panel{--mat-select-panel-background-color: hsl(var(--popover));background-color:hsl(var(--popover));color:hsl(var(--popover-foreground));border:1px solid hsl(var(--border));border-radius:var(--radius);box-shadow:var(--shadow-md, 0 8px 18px -14px hsl(var(--foreground) / .24));padding:.25rem}.select-panel .mat-mdc-option{--mat-option-label-text-color: hsl(var(--popover-foreground));--mat-option-label-text-font: var(--font-sans);--mat-option-label-text-size: var(--text-sm);--mat-option-label-text-line-height: var(--text-sm--line-height);--mat-option-label-text-weight: 400;--mat-option-hover-state-layer-color: hsl(var(--accent));--mat-option-focus-state-layer-color: hsl(var(--accent));--mat-option-selected-state-layer-color: hsl(var(--accent));--mat-option-selected-state-label-text-color: hsl(var(--accent-foreground));min-height:2.25rem;border-radius:calc(var(--radius) - .125rem)}.select-panel .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) .mdc-list-item__primary-text{color:hsl(var(--accent-foreground))}.select-panel .mat-mdc-optgroup-label{--mat-optgroup-label-text-color: hsl(var(--muted-foreground));--mat-optgroup-label-text-font: var(--font-sans);--mat-optgroup-label-text-size: var(--text-xs);min-height:1.75rem}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: ["@keyframes _mat-select-enter{0%{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:none}}@keyframes _mat-select-exit{0%{opacity:1}to{opacity:0}}.mat-mdc-select{display:inline-block;width:100%;outline:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:var(--mat-select-enabled-trigger-text-color, var(--mat-sys-on-surface));font-family:var(--mat-select-trigger-text-font, var(--mat-sys-body-large-font));line-height:var(--mat-select-trigger-text-line-height, var(--mat-sys-body-large-line-height));font-size:var(--mat-select-trigger-text-size, var(--mat-sys-body-large-size));font-weight:var(--mat-select-trigger-text-weight, var(--mat-sys-body-large-weight));letter-spacing:var(--mat-select-trigger-text-tracking, var(--mat-sys-body-large-tracking))}div.mat-mdc-select-panel{box-shadow:var( --mat-select-container-elevation-shadow, 0px 3px 1px -2px rgba(0, 0, 0, .2), 0px 2px 2px 0px rgba(0, 0, 0, .14), 0px 1px 5px 0px rgba(0, 0, 0, .12) )}.mat-mdc-select-disabled,.mat-mdc-select-disabled .mat-mdc-select-placeholder{color:var(--mat-select-disabled-trigger-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mat-mdc-select-trigger{display:inline-flex;align-items:center;cursor:pointer;position:relative;box-sizing:border-box;width:100%}.mat-mdc-select-disabled .mat-mdc-select-trigger{-webkit-user-select:none;user-select:none;cursor:default}.mat-mdc-select-value{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mat-mdc-select-value-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mat-mdc-select-arrow-wrapper{height:24px;flex-shrink:0;display:inline-flex;align-items:center}.mat-mdc-select-arrow{width:10px;height:5px;position:relative;color:var(--mat-select-enabled-arrow-color, var(--mat-sys-on-surface-variant))}.mat-select-open .mat-mdc-select-arrow{transform:rotate(180deg)}.mat-mdc-select-arrow svg{fill:currentColor;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@media(forced-colors:active){.mat-mdc-select-arrow svg{fill:CanvasText}.mat-mdc-select-disabled .mat-mdc-select-arrow svg{fill:GrayText}}div.mat-mdc-select-panel{width:100%;max-height:275px;outline:0;overflow:auto;padding:8px 0;box-sizing:border-box;transform-origin:top center;border-radius:0 0 4px 4px;position:relative;background-color:var(--mat-select-panel-background-color, var(--mat-sys-surface-container))}.mat-mdc-select-panel-above div.mat-mdc-select-panel{border-radius:4px 4px 0 0;transform-origin:bottom center}@media(forced-colors:active){div.mat-mdc-select-panel{outline:solid 1px}}.mat-select-panel-animations-enabled{animation:_mat-select-enter .12s cubic-bezier(0,0,.2,1)}.mat-select-panel-animations-enabled.mat-select-panel-exit{animation:_mat-select-exit .1s linear}.mat-mdc-select-placeholder{transition:color .4s .1333333333333s cubic-bezier(.25,.8,.25,1);color:var(--mat-select-placeholder-text-color, var(--mat-sys-on-surface-variant))}._mat-animation-noopable .mat-mdc-select-placeholder{transition:none}.mat-mdc-select-min-line:empty:before{content:\" \";white-space:pre;width:1px;display:inline-block;visibility:hidden}selectfield.mat-mdc-select{display:flex;align-items:center;box-sizing:border-box;width:100%;height:2.25rem;padding:0 calc(var(--spacing-base) * 3);border:1px solid hsl(var(--input));border-radius:calc(var(--radius-base) - .125rem);background:transparent;color:hsl(var(--foreground));font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--text-sm--line-height);cursor:pointer}selectfield.mat-mdc-select:focus,selectfield.mat-mdc-select.mat-select-open{outline:none;border-color:hsl(var(--ring));box-shadow:0 0 0 1px hsl(var(--ring))}selectfield.mat-mdc-select-disabled{cursor:not-allowed;opacity:.5;background:hsl(var(--muted) / .4)}selectfield.mat-mdc-select-invalid{border-color:hsl(var(--destructive))}selectfield .mat-mdc-select-value{color:hsl(var(--foreground))}selectfield .mat-mdc-select-placeholder{color:hsl(var(--muted-foreground))}selectfield .mat-mdc-select-arrow{color:hsl(var(--muted-foreground))}.mat-mdc-select-panel.select-panel{--mat-select-panel-background-color: hsl(var(--popover));background-color:hsl(var(--popover));color:hsl(var(--popover-foreground));border:1px solid hsl(var(--border));border-radius:var(--radius-base);box-shadow:var(--shadow-md, 0 8px 18px -14px hsl(var(--foreground) / .24));padding:calc(var(--spacing-base) * 1)}.select-panel .mat-mdc-option{--mat-option-label-text-color: hsl(var(--popover-foreground));--mat-option-label-text-font: var(--font-sans);--mat-option-label-text-size: var(--text-sm);--mat-option-label-text-line-height: var(--text-sm--line-height);--mat-option-label-text-weight: 400;--mat-option-hover-state-layer-color: hsl(var(--accent));--mat-option-focus-state-layer-color: hsl(var(--accent));--mat-option-selected-state-layer-color: hsl(var(--accent));--mat-option-selected-state-label-text-color: hsl(var(--accent-foreground));min-height:2.25rem;border-radius:calc(var(--radius-base) - .125rem)}.select-panel .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) .mdc-list-item__primary-text{color:hsl(var(--accent-foreground))}.select-panel .mat-mdc-optgroup-label{--mat-optgroup-label-text-color: hsl(var(--muted-foreground));--mat-optgroup-label-text-font: var(--font-sans);--mat-optgroup-label-text-size: var(--text-xs);min-height:1.75rem}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
@@ -126,6 +139,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
                         class: 'mat-mdc-select',
                         role: 'combobox',
                         'aria-haspopup': 'listbox',
+                        '[style.--radius-base]': 'radiusBase()',
+                        '[style.--spacing-base]': 'densityBase()',
                     }, providers: [
                         { provide: MatSelect, useExisting: forwardRef(() => SelectComponent) },
                         { provide: MAT_OPTION_PARENT_COMPONENT, useExisting: forwardRef(() => SelectComponent) },
@@ -182,6 +197,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
         tabindex="-1"
         class="mat-mdc-select-panel mdc-menu-surface mdc-menu-surface--open select-panel"
         [class]="panelClass"
+        [style.--radius-base]="radiusBase()"
+        [style.--spacing-base]="densityBase()"
         [class.mat-select-panel-animations-enabled]="!_animationsDisabled"
         [class.mat-primary]="_parentFormField?.color === 'primary'"
         [class.mat-accent]="_parentFormField?.color === 'accent'"
@@ -195,8 +212,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
         <ng-content></ng-content>
       </div>
     </ng-template>
-  `, styles: ["@keyframes _mat-select-enter{0%{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:none}}@keyframes _mat-select-exit{0%{opacity:1}to{opacity:0}}.mat-mdc-select{display:inline-block;width:100%;outline:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:var(--mat-select-enabled-trigger-text-color, var(--mat-sys-on-surface));font-family:var(--mat-select-trigger-text-font, var(--mat-sys-body-large-font));line-height:var(--mat-select-trigger-text-line-height, var(--mat-sys-body-large-line-height));font-size:var(--mat-select-trigger-text-size, var(--mat-sys-body-large-size));font-weight:var(--mat-select-trigger-text-weight, var(--mat-sys-body-large-weight));letter-spacing:var(--mat-select-trigger-text-tracking, var(--mat-sys-body-large-tracking))}div.mat-mdc-select-panel{box-shadow:var( --mat-select-container-elevation-shadow, 0px 3px 1px -2px rgba(0, 0, 0, .2), 0px 2px 2px 0px rgba(0, 0, 0, .14), 0px 1px 5px 0px rgba(0, 0, 0, .12) )}.mat-mdc-select-disabled,.mat-mdc-select-disabled .mat-mdc-select-placeholder{color:var(--mat-select-disabled-trigger-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mat-mdc-select-trigger{display:inline-flex;align-items:center;cursor:pointer;position:relative;box-sizing:border-box;width:100%}.mat-mdc-select-disabled .mat-mdc-select-trigger{-webkit-user-select:none;user-select:none;cursor:default}.mat-mdc-select-value{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mat-mdc-select-value-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mat-mdc-select-arrow-wrapper{height:24px;flex-shrink:0;display:inline-flex;align-items:center}.mat-mdc-select-arrow{width:10px;height:5px;position:relative;color:var(--mat-select-enabled-arrow-color, var(--mat-sys-on-surface-variant))}.mat-select-open .mat-mdc-select-arrow{transform:rotate(180deg)}.mat-mdc-select-arrow svg{fill:currentColor;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@media(forced-colors:active){.mat-mdc-select-arrow svg{fill:CanvasText}.mat-mdc-select-disabled .mat-mdc-select-arrow svg{fill:GrayText}}div.mat-mdc-select-panel{width:100%;max-height:275px;outline:0;overflow:auto;padding:8px 0;box-sizing:border-box;transform-origin:top center;border-radius:0 0 4px 4px;position:relative;background-color:var(--mat-select-panel-background-color, var(--mat-sys-surface-container))}.mat-mdc-select-panel-above div.mat-mdc-select-panel{border-radius:4px 4px 0 0;transform-origin:bottom center}@media(forced-colors:active){div.mat-mdc-select-panel{outline:solid 1px}}.mat-select-panel-animations-enabled{animation:_mat-select-enter .12s cubic-bezier(0,0,.2,1)}.mat-select-panel-animations-enabled.mat-select-panel-exit{animation:_mat-select-exit .1s linear}.mat-mdc-select-placeholder{transition:color .4s .1333333333333s cubic-bezier(.25,.8,.25,1);color:var(--mat-select-placeholder-text-color, var(--mat-sys-on-surface-variant))}._mat-animation-noopable .mat-mdc-select-placeholder{transition:none}.mat-mdc-select-min-line:empty:before{content:\" \";white-space:pre;width:1px;display:inline-block;visibility:hidden}selectfield.mat-mdc-select{display:flex;align-items:center;box-sizing:border-box;width:100%;height:2.25rem;padding:0 .75rem;border:1px solid hsl(var(--input));border-radius:calc(var(--radius) - .125rem);background:transparent;color:hsl(var(--foreground));font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--text-sm--line-height);cursor:pointer}selectfield.mat-mdc-select:focus,selectfield.mat-mdc-select.mat-select-open{outline:none;border-color:hsl(var(--ring));box-shadow:0 0 0 1px hsl(var(--ring))}selectfield.mat-mdc-select-disabled{cursor:not-allowed;opacity:.5;background:hsl(var(--muted) / .4)}selectfield.mat-mdc-select-invalid{border-color:hsl(var(--destructive))}selectfield .mat-mdc-select-value{color:hsl(var(--foreground))}selectfield .mat-mdc-select-placeholder{color:hsl(var(--muted-foreground))}selectfield .mat-mdc-select-arrow{color:hsl(var(--muted-foreground))}.mat-mdc-select-panel.select-panel{--mat-select-panel-background-color: hsl(var(--popover));background-color:hsl(var(--popover));color:hsl(var(--popover-foreground));border:1px solid hsl(var(--border));border-radius:var(--radius);box-shadow:var(--shadow-md, 0 8px 18px -14px hsl(var(--foreground) / .24));padding:.25rem}.select-panel .mat-mdc-option{--mat-option-label-text-color: hsl(var(--popover-foreground));--mat-option-label-text-font: var(--font-sans);--mat-option-label-text-size: var(--text-sm);--mat-option-label-text-line-height: var(--text-sm--line-height);--mat-option-label-text-weight: 400;--mat-option-hover-state-layer-color: hsl(var(--accent));--mat-option-focus-state-layer-color: hsl(var(--accent));--mat-option-selected-state-layer-color: hsl(var(--accent));--mat-option-selected-state-label-text-color: hsl(var(--accent-foreground));min-height:2.25rem;border-radius:calc(var(--radius) - .125rem)}.select-panel .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) .mdc-list-item__primary-text{color:hsl(var(--accent-foreground))}.select-panel .mat-mdc-optgroup-label{--mat-optgroup-label-text-color: hsl(var(--muted-foreground));--mat-optgroup-label-text-font: var(--font-sans);--mat-optgroup-label-text-size: var(--text-xs);min-height:1.75rem}\n"] }]
-        }], ctorParameters: () => [] });
+  `, styles: ["@keyframes _mat-select-enter{0%{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:none}}@keyframes _mat-select-exit{0%{opacity:1}to{opacity:0}}.mat-mdc-select{display:inline-block;width:100%;outline:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:var(--mat-select-enabled-trigger-text-color, var(--mat-sys-on-surface));font-family:var(--mat-select-trigger-text-font, var(--mat-sys-body-large-font));line-height:var(--mat-select-trigger-text-line-height, var(--mat-sys-body-large-line-height));font-size:var(--mat-select-trigger-text-size, var(--mat-sys-body-large-size));font-weight:var(--mat-select-trigger-text-weight, var(--mat-sys-body-large-weight));letter-spacing:var(--mat-select-trigger-text-tracking, var(--mat-sys-body-large-tracking))}div.mat-mdc-select-panel{box-shadow:var( --mat-select-container-elevation-shadow, 0px 3px 1px -2px rgba(0, 0, 0, .2), 0px 2px 2px 0px rgba(0, 0, 0, .14), 0px 1px 5px 0px rgba(0, 0, 0, .12) )}.mat-mdc-select-disabled,.mat-mdc-select-disabled .mat-mdc-select-placeholder{color:var(--mat-select-disabled-trigger-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mat-mdc-select-trigger{display:inline-flex;align-items:center;cursor:pointer;position:relative;box-sizing:border-box;width:100%}.mat-mdc-select-disabled .mat-mdc-select-trigger{-webkit-user-select:none;user-select:none;cursor:default}.mat-mdc-select-value{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mat-mdc-select-value-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mat-mdc-select-arrow-wrapper{height:24px;flex-shrink:0;display:inline-flex;align-items:center}.mat-mdc-select-arrow{width:10px;height:5px;position:relative;color:var(--mat-select-enabled-arrow-color, var(--mat-sys-on-surface-variant))}.mat-select-open .mat-mdc-select-arrow{transform:rotate(180deg)}.mat-mdc-select-arrow svg{fill:currentColor;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@media(forced-colors:active){.mat-mdc-select-arrow svg{fill:CanvasText}.mat-mdc-select-disabled .mat-mdc-select-arrow svg{fill:GrayText}}div.mat-mdc-select-panel{width:100%;max-height:275px;outline:0;overflow:auto;padding:8px 0;box-sizing:border-box;transform-origin:top center;border-radius:0 0 4px 4px;position:relative;background-color:var(--mat-select-panel-background-color, var(--mat-sys-surface-container))}.mat-mdc-select-panel-above div.mat-mdc-select-panel{border-radius:4px 4px 0 0;transform-origin:bottom center}@media(forced-colors:active){div.mat-mdc-select-panel{outline:solid 1px}}.mat-select-panel-animations-enabled{animation:_mat-select-enter .12s cubic-bezier(0,0,.2,1)}.mat-select-panel-animations-enabled.mat-select-panel-exit{animation:_mat-select-exit .1s linear}.mat-mdc-select-placeholder{transition:color .4s .1333333333333s cubic-bezier(.25,.8,.25,1);color:var(--mat-select-placeholder-text-color, var(--mat-sys-on-surface-variant))}._mat-animation-noopable .mat-mdc-select-placeholder{transition:none}.mat-mdc-select-min-line:empty:before{content:\" \";white-space:pre;width:1px;display:inline-block;visibility:hidden}selectfield.mat-mdc-select{display:flex;align-items:center;box-sizing:border-box;width:100%;height:2.25rem;padding:0 calc(var(--spacing-base) * 3);border:1px solid hsl(var(--input));border-radius:calc(var(--radius-base) - .125rem);background:transparent;color:hsl(var(--foreground));font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--text-sm--line-height);cursor:pointer}selectfield.mat-mdc-select:focus,selectfield.mat-mdc-select.mat-select-open{outline:none;border-color:hsl(var(--ring));box-shadow:0 0 0 1px hsl(var(--ring))}selectfield.mat-mdc-select-disabled{cursor:not-allowed;opacity:.5;background:hsl(var(--muted) / .4)}selectfield.mat-mdc-select-invalid{border-color:hsl(var(--destructive))}selectfield .mat-mdc-select-value{color:hsl(var(--foreground))}selectfield .mat-mdc-select-placeholder{color:hsl(var(--muted-foreground))}selectfield .mat-mdc-select-arrow{color:hsl(var(--muted-foreground))}.mat-mdc-select-panel.select-panel{--mat-select-panel-background-color: hsl(var(--popover));background-color:hsl(var(--popover));color:hsl(var(--popover-foreground));border:1px solid hsl(var(--border));border-radius:var(--radius-base);box-shadow:var(--shadow-md, 0 8px 18px -14px hsl(var(--foreground) / .24));padding:calc(var(--spacing-base) * 1)}.select-panel .mat-mdc-option{--mat-option-label-text-color: hsl(var(--popover-foreground));--mat-option-label-text-font: var(--font-sans);--mat-option-label-text-size: var(--text-sm);--mat-option-label-text-line-height: var(--text-sm--line-height);--mat-option-label-text-weight: 400;--mat-option-hover-state-layer-color: hsl(var(--accent));--mat-option-focus-state-layer-color: hsl(var(--accent));--mat-option-selected-state-layer-color: hsl(var(--accent));--mat-option-selected-state-label-text-color: hsl(var(--accent-foreground));min-height:2.25rem;border-radius:calc(var(--radius-base) - .125rem)}.select-panel .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) .mdc-list-item__primary-text{color:hsl(var(--accent-foreground))}.select-panel .mat-mdc-optgroup-label{--mat-optgroup-label-text-color: hsl(var(--muted-foreground));--mat-optgroup-label-text-font: var(--font-sans);--mat-optgroup-label-text-size: var(--text-xs);min-height:1.75rem}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }] } });
 
 /**
  * Option for `<SelectField>`.

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

@@ -7,7 +7,7 @@ import { DOCUMENT } from '@angular/common';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { filter } from 'rxjs/operators';
 import { ButtonComponent } from '@ojiepermana/angular-component/button';
-import { cn } from '@ojiepermana/angular-component/utils';
+import { cn, radiusBaseValue, densityBaseValue } from '@ojiepermana/angular-component/utils';
 
 const SIDE_BASE = {
     top: 'inset-x-0 top-0 border-b border-border',
@@ -53,6 +53,10 @@ class SheetComponent {
     describedBy = input(null, { ...(ngDevMode ? { debugName: "describedBy" } : /* istanbul ignore next */ {}), alias: 'aria-describedby' });
     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 */ []));
     openedChange = output();
     tpl = viewChild.required('tpl');
     overlayRef = null;
@@ -64,6 +68,10 @@ class SheetComponent {
     ...(ngDevMode ? [{ debugName: "surfaceClasses" }] : /* istanbul ignore next */ []));
     enterFrom = computed(() => SIDE_ENTER_FROM[this.resolvedSide()], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "enterFrom" }] : /* 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 */ []));
     constructor() {
         this.destroyRef.onDestroy(() => this.detach(false));
         effect(() => {
@@ -126,7 +134,7 @@ class SheetComponent {
         return this.host.nativeElement.localName === 'drawer';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: SheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.3", type: SheetComponent, isStandalone: true, selector: "Sheet, Drawer", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, closeButtonLabel: { classPropertyName: "closeButtonLabel", publicName: "closeButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, labelledBy: { classPropertyName: "labelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, describedBy: { classPropertyName: "describedBy", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", openedChange: "openedChange" }, viewQueries: [{ propertyName: "tpl", first: true, predicate: ["tpl"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.3", type: SheetComponent, isStandalone: true, selector: "Sheet, Drawer", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, closeButtonLabel: { classPropertyName: "closeButtonLabel", publicName: "closeButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, labelledBy: { classPropertyName: "labelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, describedBy: { classPropertyName: "describedBy", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, 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 } }, outputs: { open: "openChange", openedChange: "openedChange" }, viewQueries: [{ propertyName: "tpl", first: true, predicate: ["tpl"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <ng-template #tpl>
       <div
         class="sheet-surface fixed z-50 bg-background shadow-lg transition ease-in-out"
@@ -135,7 +143,9 @@ class SheetComponent {
         [attr.aria-labelledby]="labelledBy()"
         [attr.aria-describedby]="describedBy()"
         [class]="surfaceClasses()"
-        [style.--sheet-from]="enterFrom()">
+        [style.--sheet-from]="enterFrom()"
+        [style.--radius-base]="radiusBase()"
+        [style.--spacing-base]="densityBase()">
         @if (showCloseButton()) {
           <button
             type="button"
@@ -152,7 +162,7 @@ class SheetComponent {
         <ng-content />
       </div>
     </ng-template>
-  `, isInline: true, styles: [".sheet-surface{animation:sheet-in .3s cubic-bezier(.2,0,0,1)}@keyframes sheet-in{0%{transform:var(--sheet-from)}to{transform:translate(0)}}@media(prefers-reduced-motion:reduce){.sheet-surface{animation-duration:0ms}}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[Button], a[Button]", inputs: ["variant", "size", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".sheet-surface{animation:sheet-in .3s cubic-bezier(.2,0,0,1)}@keyframes sheet-in{0%{transform:var(--sheet-from)}to{transform:translate(0)}}@media(prefers-reduced-motion:reduce){.sheet-surface{animation-duration:0ms}}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[Button], a[Button]", inputs: ["variant", "size", "class", "radius", "density"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: SheetComponent, decorators: [{
             type: Component,
@@ -165,7 +175,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
         [attr.aria-labelledby]="labelledBy()"
         [attr.aria-describedby]="describedBy()"
         [class]="surfaceClasses()"
-        [style.--sheet-from]="enterFrom()">
+        [style.--sheet-from]="enterFrom()"
+        [style.--radius-base]="radiusBase()"
+        [style.--spacing-base]="densityBase()">
         @if (showCloseButton()) {
           <button
             type="button"
@@ -183,7 +195,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
       </div>
     </ng-template>
   `, styles: [".sheet-surface{animation:sheet-in .3s cubic-bezier(.2,0,0,1)}@keyframes sheet-in{0%{transform:var(--sheet-from)}to{transform:translate(0)}}@media(prefers-reduced-motion:reduce){.sheet-surface{animation-duration:0ms}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], closeButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonLabel", required: false }] }], labelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], describedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }], tpl: [{ type: i0.ViewChild, args: ['tpl', { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], closeButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonLabel", required: false }] }], labelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], describedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], 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 }] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }], tpl: [{ type: i0.ViewChild, args: ['tpl', { isSignal: true }] }] } });
 
 class SheetCloseDirective {
     sheet = inject(SheetComponent);