@ojiepermana/angular-component 22.0.36 → 22.0.40

package/README.md

@@ -9,10 +9,10 @@ Library ini menggunakan pola secondary entry point per folder. Import yang disar
 Jalankan build library dengan perintah berikut:
 
 ```bash
-bunx ng build component
+bunx ng build angular-component
 ```
 
-Artefak build akan ditulis ke `dist/component`.
+Nama project di `angular.json` adalah `angular-component`. Artefak build akan ditulis ke `dist/component`.
 
 ## Penggunaan Lokal
 
@@ -36,7 +36,7 @@ Untuk komponen atau utilitas spesifik, gunakan subpath secondary entry point:
 Jalankan unit test library dengan perintah berikut:
 
 ```bash
-bunx ng test component --watch=false
+bunx ng test angular-component --watch=false
 ```
 
 Runner test di workspace ini menggunakan Vitest melalui Angular build tooling.

package/alert-dialog/README.md

@@ -175,25 +175,25 @@ Wrap the trigger and dialog in a `dir="rtl"` container or manage direction globa
 
 ### `AlertDialogComponent`
 
-| Input                  | Type      | Default   |
-| ---------------------- | --------- | --------- | ------ |
-| `open` (model)         | `boolean` | `false`   |
-| `closeOnEscape`        | `boolean` | `true`    |
-| `closeOnBackdropClick` | `boolean` | `false`   |
-| `showCloseButton`      | `boolean` | `false`   |
-| `closeButtonLabel`     | `string`  | `'Close'` |
-| `aria-labelledby`      | `string   | null`     | `null` |
-| `aria-describedby`     | `string   | null`     | `null` |
-| `class`                | `string`  | `''`      |
+| Input                  | Type             | Default   |
+| ---------------------- | ---------------- | --------- |
+| `open` (model)         | `boolean`        | `false`   |
+| `closeOnEscape`        | `boolean`        | `true`    |
+| `closeOnBackdropClick` | `boolean`        | `false`   |
+| `showCloseButton`      | `boolean`        | `false`   |
+| `closeButtonLabel`     | `string`         | `'Close'` |
+| `aria-labelledby`      | `string \| null` | `null`    |
+| `aria-describedby`     | `string \| null` | `null`    |
+| `class`                | `string`         | `''`      |
 
 Output: `openedChange: boolean`. Method: `close()`.
 
 ### `AlertDialogContentComponent`
 
-| Input   | Type       | Default |
-| ------- | ---------- | ------- | ----------- |
-| `size`  | `'default' | 'sm'`   | `'default'` |
-| `class` | `string`   | `''`    |
+| Input   | Type                | Default     |
+| ------- | ------------------- | ----------- |
+| `size`  | `'default' \| 'sm'` | `'default'` |
+| `class` | `string`            | `''`        |
 
 ### Parts
 

package/checkbox/README.md

@@ -1,6 +1,6 @@
 # Checkbox
 
-A shadcn-style checkbox primitive built on Angular Material's `mat-checkbox`, with full `ControlValueAccessor` support for `ngModel` and reactive forms.
+A shadcn-style checkbox primitive built on a native `<input type="checkbox">`, with full `ControlValueAccessor` support for `ngModel` and reactive forms.
 
 ## Import
 
@@ -98,17 +98,18 @@ Use `indeterminate` for the select-all checkbox and set `data-state="selected"`
 
 ## API reference
 
-| Input              | Type                        | Default        | Notes                                                                    |
-| ------------------ | --------------------------- | -------------- | ------------------------------------------------------------------------ |
-| `id`               | `string`                    | auto-generated | Forwarded to Angular Material; the native input id becomes `<id>-input`. |
-| `name`             | `string \| null`            | `null`         | Forwarded to the native checkbox input.                                  |
-| `indeterminate`    | `boolean`                   | `false`        | Useful for select-all patterns.                                          |
-| `required`         | `boolean`                   | `false`        | Forwarded to the native input.                                           |
-| `aria-label`       | `string \| null`            | `null`         | Use for icon-only or table selection checkboxes.                         |
-| `aria-describedby` | `string \| null`            | `null`         | Links helper or error text outside the checkbox.                         |
-| `aria-labelledby`  | `string \| null`            | `null`         | Alternative to projected text or wrapper labels.                         |
-| `aria-invalid`     | `boolean \| string \| null` | `null`         | Switches the control into the destructive invalid treatment.             |
-| `class`            | `string`                    | `''`           | Adds utility classes to the wrapped Material checkbox host.              |
+| Input              | Type                        | Default        | Notes                                                        |
+| ------------------ | --------------------------- | -------------- | ------------------------------------------------------------ |
+| `id`               | `string`                    | auto-generated | Set directly on the native checkbox input.                   |
+| `name`             | `string \| null`            | `null`         | Forwarded to the native checkbox input.                      |
+| `indeterminate`    | `boolean`                   | `false`        | Useful for select-all patterns.                              |
+| `required`         | `boolean`                   | `false`        | Forwarded to the native input.                               |
+| `disabled`         | `boolean`                   | `false`        | Disables the control; forwarded to the native input.         |
+| `aria-label`       | `string \| null`            | `null`         | Use for icon-only or table selection checkboxes.             |
+| `aria-describedby` | `string \| null`            | `null`         | Links helper or error text outside the checkbox.             |
+| `aria-labelledby`  | `string \| null`            | `null`         | Alternative to projected text or wrapper labels.             |
+| `aria-invalid`     | `boolean \| string \| null` | `null`         | Switches the control into the destructive invalid treatment. |
+| `class`            | `string`                    | `''`           | Adds utility classes to the checkbox host.                   |
 
 | Output          | Payload   |
 | --------------- | --------- |
@@ -118,13 +119,13 @@ Public method: `focus()`.
 
 ## Styling and theming
 
-The component uses a Material bridge so Angular Material's structural markup is restyled through the library theme tokens.
+The component renders a native checkbox input that is restyled through the library theme tokens.
 
 - Default borders and icon color use the shared `input` and `primary` tokens.
 - `aria-invalid="true"` switches the control to the `destructive` token set.
 - Pass spacing or alignment utilities through the `class` input when the checkbox needs to align with multi-line content.
 
-Extra visual adjustments belong in `checkbox.component.css` inside the library.
+Extra visual adjustments belong in the component's inline `styles` inside the library.
 
 ## Accessibility
 
@@ -141,7 +142,7 @@ Extra visual adjustments belong in `checkbox.component.css` inside the library.
 ## Angular notes
 
 - `ngModel`, reactive forms, and `checkedChange` all work with the same primitive.
-- When you pass `id`, Angular Material derives the native input id as `<id>-input`; wrapper labels or `aria-labelledby` are usually the simplest Angular pattern.
+- When you pass `id`, it is set directly on the native checkbox input; wrapper labels or `aria-labelledby` are usually the simplest Angular pattern.
 - Projected text still works if you prefer `<Checkbox>Accept</Checkbox>` for compact markup.
 
 ## Source parity

package/command/README.md

@@ -193,10 +193,10 @@ For right-to-left interfaces, apply `dir="rtl"` to the wrapper and input.
 
 ### `CommandInputComponent`
 
-| Input         | Type     | Default                       |
-| ------------- | -------- | ----------------------------- |
-| `placeholder` | `string` | `Type a command or search...` |
-| `class`       | `string` | `''`                          |
+| Input         | Type     | Default                     |
+| ------------- | -------- | --------------------------- |
+| `placeholder` | `string` | `Type a command or search…` |
+| `class`       | `string` | `''`                        |
 
 Behavior:
 

package/dialog/README.md

@@ -44,7 +44,7 @@ Use an external button or link to toggle the `open` signal, then declare the dia
 ```html
 <button type="button" Button variant="outline" (click)="open.set(true)">Edit profile</button>
 
-<dialog [(open)]="open" aria-labelledby="dialog-title" aria-describedby="dialog-description" class="sm:max-w-sm">
+<Dialog [(open)]="open" aria-labelledby="dialog-title" aria-describedby="dialog-description" class="sm:max-w-sm">
   <DialogHeader>
     <DialogTitle id="dialog-title">Edit profile</DialogTitle>
     <DialogDescription id="dialog-description">
@@ -67,7 +67,7 @@ Use an external button or link to toggle the `open` signal, then declare the dia
     <button type="button" Button variant="outline" DialogClose>Cancel</button>
     <button type="button" Button (click)="open.set(false)">Save changes</button>
   </DialogFooter>
-</dialog>
+</Dialog>
 ```
 
 ## Common patterns
@@ -79,7 +79,7 @@ Use a short title, short body copy, and explicit cancel/confirm actions for dest
 ```html
 <button type="button" Button variant="destructive" (click)="confirmOpen.set(true)">Delete project</button>
 
-<dialog [(open)]="confirmOpen">
+<Dialog [(open)]="confirmOpen">
   <DialogHeader>
     <DialogTitle>Delete this project?</DialogTitle>
     <DialogDescription> This action cannot be undone. This permanently deletes your project. </DialogDescription>
@@ -88,7 +88,7 @@ Use a short title, short body copy, and explicit cancel/confirm actions for dest
     <button type="button" Button variant="outline" DialogClose>Cancel</button>
     <button type="button" Button variant="destructive" (click)="confirmOpen.set(false)">Delete</button>
   </DialogFooter>
-</dialog>
+</Dialog>
 ```
 
 ### Custom close button
@@ -96,7 +96,7 @@ Use a short title, short body copy, and explicit cancel/confirm actions for dest
 Hide the built-in corner close control with `[showCloseButton]="false"` and place `button[DialogClose]` wherever dismissal should live.
 
 ```html
-<dialog [(open)]="shareOpen" [showCloseButton]="false" class="sm:max-w-md">
+<Dialog [(open)]="shareOpen" [showCloseButton]="false" class="sm:max-w-md">
   <DialogHeader>
     <DialogTitle>Share link</DialogTitle>
     <DialogDescription> Anyone who has this link can view this workspace. </DialogDescription>
@@ -110,7 +110,7 @@ Hide the built-in corner close control with `[showCloseButton]="false"` and plac
   <DialogFooter class="sm:justify-start">
     <button type="button" Button DialogClose>Close</button>
   </DialogFooter>
-</dialog>
+</Dialog>
 ```
 
 ### No close button
@@ -118,14 +118,14 @@ Hide the built-in corner close control with `[showCloseButton]="false"` and plac
 Use `[showCloseButton]="false"` without an internal close action when Escape and backdrop dismissal are enough.
 
 ```html
-<dialog [(open)]="noCloseOpen" [showCloseButton]="false">
+<Dialog [(open)]="noCloseOpen" [showCloseButton]="false">
   <DialogHeader>
     <DialogTitle>No Close Button</DialogTitle>
     <DialogDescription>
       Dismiss this dialog with Escape, the backdrop, or another action you control.
     </DialogDescription>
   </DialogHeader>
-</dialog>
+</Dialog>
 ```
 
 ### Sticky footer for long content
@@ -133,7 +133,7 @@ Use `[showCloseButton]="false"` without an internal close action when Escape and
 Move the scroll region into `DialogContent` and keep the footer outside that overflow container so primary actions remain visible.
 
 ```html
-<dialog [(open)]="stickyOpen" [showCloseButton]="false" class="max-h-[85vh] overflow-hidden p-0 sm:max-w-lg">
+<Dialog [(open)]="stickyOpen" [showCloseButton]="false" class="max-h-[85vh] overflow-hidden p-0 sm:max-w-lg">
   <DialogHeader class="px-6 pt-6">
     <DialogTitle>Sticky Footer</DialogTitle>
     <DialogDescription>Keep actions visible while the content scrolls.</DialogDescription>
@@ -145,7 +145,7 @@ Move the scroll region into `DialogContent` and keep the footer outside that ove
     <button type="button" Button variant="outline" DialogClose>Close</button>
     <button type="button" Button (click)="stickyOpen.set(false)">Save changes</button>
   </DialogFooter>
-</dialog>
+</Dialog>
 ```
 
 ### RTL
@@ -156,7 +156,7 @@ Wrap the trigger and dialog in a `dir="rtl"` container or set direction globally
 <div dir="rtl" lang="ar" class="text-right">
   <button type="button" Button variant="outline" (click)="rtlOpen.set(true)">فتح الحوار</button>
 
-  <dialog [(open)]="rtlOpen" [showCloseButton]="false" class="sm:max-w-sm">
+  <Dialog [(open)]="rtlOpen" [showCloseButton]="false" class="sm:max-w-sm">
     <DialogHeader>
       <DialogTitle>تعديل الملف الشخصي</DialogTitle>
       <DialogDescription> قم بإجراء تغييرات على ملفك الشخصي هنا. انقر فوق حفظ عند الانتهاء. </DialogDescription>
@@ -169,7 +169,7 @@ Wrap the trigger and dialog in a `dir="rtl"` container or set direction globally
       <button type="button" Button variant="outline" DialogClose>إلغاء</button>
       <button type="button" Button (click)="rtlOpen.set(false)">حفظ التغييرات</button>
     </DialogFooter>
-  </dialog>
+  </Dialog>
 </div>
 ```
 

package/drawer/README.md

@@ -88,7 +88,7 @@ Use a desktop breakpoint in the owning component and render Dialog for larger vi
 
 ```html
 @if (isDesktop()) {
-<dialog [(open)]="open">...</dialog>
+<Dialog [(open)]="open">...</Dialog>
 } @else {
 <Drawer [(open)]="open">...</Drawer>
 }

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

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { Directive, input, model, computed, forwardRef, ChangeDetectionStrategy, Component, inject } from '@angular/core';
-import { cn, uniqueId } from '@ojiepermana/angular-component/utils';
+import { cn, radiusBaseValue, densityBaseValue, uniqueId } from '@ojiepermana/angular-component/utils';
 
 class AccordionContextBase {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: AccordionContextBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -18,8 +18,16 @@ class AccordionComponent extends AccordionContextBase {
     ...(ngDevMode ? [{ debugName: "value" }] : /* 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', 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 */ []));
     openSet = computed(() => {
         const v = this.value();
         if (v == null)
@@ -50,7 +58,7 @@ class AccordionComponent extends AccordionContextBase {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: AccordionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: AccordionComponent, isStandalone: true, selector: "Accordion", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class": "classes()" } }, providers: [{ provide: AccordionContextBase, useExisting: forwardRef(() => AccordionComponent) }], 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: AccordionComponent, isStandalone: true, selector: "Accordion", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", 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: { value: "valueChange" }, host: { properties: { "class": "classes()", "style.--radius-base": "radiusBase()", "style.--spacing-base": "densityBase()" } }, providers: [{ provide: AccordionContextBase, useExisting: forwardRef(() => AccordionComponent) }], 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: AccordionComponent, decorators: [{
             type: Component,
@@ -58,10 +66,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
                     selector: 'Accordion',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     providers: [{ provide: AccordionContextBase, useExisting: forwardRef(() => AccordionComponent) }],
-                    host: { '[class]': 'classes()' },
+                    host: {
+                        '[class]': 'classes()',
+                        '[style.--radius-base]': 'radiusBase()',
+                        '[style.--spacing-base]': 'densityBase()',
+                    },
                     template: `<ng-content />`,
                 }]
-        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], 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 AccordionItemComponent {
     ctx = inject(AccordionContextBase);
     value = input.required(/* @ts-ignore */

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

@@ -23,6 +23,10 @@ class AlertDialogComponent {
     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();
     contentSize = signal('default', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "contentSize" }] : /* istanbul ignore next */ []));
@@ -37,7 +41,7 @@ class AlertDialogComponent {
         this.open.set(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: AlertDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: AlertDialogComponent, isStandalone: true, selector: "AlertDialog", 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" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: AlertDialogComponent, isStandalone: true, selector: "AlertDialog", 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" }, ngImport: i0, template: `
     <Dialog
       [(open)]="open"
       [closeOnEscape]="closeOnEscape()"
@@ -47,10 +51,12 @@ class AlertDialogComponent {
       [aria-labelledby]="labelledBy()"
       [aria-describedby]="describedBy()"
       [class]="surfaceClasses()"
+      [radius]="radius()"
+      [density]="density()"
       (openedChange)="openedChange.emit($event)">
       <ng-content />
     </Dialog>
-  `, isInline: true, dependencies: [{ kind: "component", type: DialogComponent, selector: "Dialog", inputs: ["open", "closeOnEscape", "closeOnBackdropClick", "showCloseButton", "closeButtonLabel", "aria-labelledby", "aria-describedby", "class"], outputs: ["openChange", "openedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: DialogComponent, selector: "Dialog", inputs: ["open", "closeOnEscape", "closeOnBackdropClick", "showCloseButton", "closeButtonLabel", "aria-labelledby", "aria-describedby", "class", "radius", "density"], outputs: ["openChange", "openedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: AlertDialogComponent, decorators: [{
             type: Component,
@@ -68,12 +74,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
       [aria-labelledby]="labelledBy()"
       [aria-describedby]="describedBy()"
       [class]="surfaceClasses()"
+      [radius]="radius()"
+      [density]="density()"
       (openedChange)="openedChange.emit($event)">
       <ng-content />
     </Dialog>
   `,
                 }]
-        }], 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"] }] } });
+        }], 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"] }] } });
 
 const ALERT_DIALOG_MEDIA_SIZE_CLASSES = {
     default: 'h-12 w-12 [&_svg]:h-5 [&_svg]:w-5',

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

@@ -1,6 +1,6 @@
 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';
 import { cva } from 'class-variance-authority';
 
 const alertVariants = cva([
@@ -22,10 +22,18 @@ class AlertComponent {
     ...(ngDevMode ? [{ debugName: "variant" }] : /* 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(alertVariants({ variant: this.variant() }), 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: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: AlertComponent, isStandalone: true, selector: "Alert", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.role": "\"alert\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: AlertComponent, isStandalone: true, selector: "Alert", inputs: { variant: { classPropertyName: "variant", publicName: "variant", 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.role": "\"alert\"", "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: AlertComponent, decorators: [{
             type: Component,
@@ -35,10 +43,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
                     host: {
                         '[class]': 'classes()',
                         '[attr.role]': '"alert"',
+                        '[style.--radius-base]': 'radiusBase()',
+                        '[style.--spacing-base]': 'densityBase()',
                     },
                     template: `<ng-content />`,
                 }]
-        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", 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 }] }], 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 AlertTitleComponent {
     class = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));

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

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { input, computed, ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { cn } from '@ojiepermana/angular-component/utils';
+import { cn, radiusBaseValue, densityBaseValue } from '@ojiepermana/angular-component/utils';
 
 const avatarSizeClasses = {
     default: 'h-10 w-10',
@@ -12,10 +12,18 @@ class AvatarComponent {
     ...(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('relative flex shrink-0 overflow-hidden rounded-full', avatarSizeClasses[this.size()], 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: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: AvatarComponent, isStandalone: true, selector: "Avatar", 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: AvatarComponent, isStandalone: true, selector: "Avatar", 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: AvatarComponent, decorators: [{
             type: Component,
@@ -25,10 +33,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 AvatarImageComponent {
     src = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));

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

@@ -1,6 +1,6 @@
 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';
 import { cva } from 'class-variance-authority';
 
 const badgeVariants = cva([
@@ -27,20 +27,32 @@ class BadgeComponent {
     ...(ngDevMode ? [{ debugName: "variant" }] : /* 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(badgeVariants({ variant: this.variant() }), 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: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: BadgeComponent, isStandalone: true, selector: "Badge, [Badge]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: BadgeComponent, isStandalone: true, selector: "Badge, [Badge]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", 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()", "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: BadgeComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'Badge, [Badge]',
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: { '[class]': 'classes()' },
+                    host: {
+                        '[class]': 'classes()',
+                        '[style.--radius-base]': 'radiusBase()',
+                        '[style.--spacing-base]': 'densityBase()',
+                    },
                     template: `<ng-content />`,
                 }]
-        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", 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 }] }], 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-button.mjs

@@ -1,6 +1,6 @@
 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';
 import { cva } from 'class-variance-authority';
 
 const buttonVariants = cva([
@@ -41,10 +41,18 @@ class ButtonComponent {
     ...(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(buttonVariants({ variant: this.variant(), size: this.size() }), 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: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: ButtonComponent, isStandalone: true, selector: "button[Button], a[Button]", 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-variant": "variant()", "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: ButtonComponent, isStandalone: true, selector: "button[Button], a[Button]", 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-variant": "variant()", "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: ButtonComponent, decorators: [{
             type: Component,
@@ -55,10 +63,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
                         '[class]': 'classes()',
                         '[attr.data-variant]': 'variant()',
                         '[attr.data-size]': 'size()',
+                        '[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 }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

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

@@ -71,7 +71,7 @@ class CalendarComponent {
       [startView]="startView()"
       [dateFilter]="resolvedDateFilter()"
       (selectedChange)="onSelect($event)" />
-  `, isInline: true, styles: [":host{display:block;width:fit-content;padding:.75rem;border-radius:var(--radius);border:1px solid hsl(var(--border));background:hsl(var(--background));color:hsl(var(--foreground))}.Calendar{display:block;width:var(--calendar-width, 17.5rem)}\n"], dependencies: [{ kind: "component", type: MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block;width:fit-content;padding:calc(var(--spacing) * 3);border-radius:var(--radius);border:1px solid hsl(var(--border));background:hsl(var(--background));color:hsl(var(--foreground))}.Calendar{display:block;width:var(--calendar-width, 17.5rem)}\n"], dependencies: [{ kind: "component", type: MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: CalendarComponent, decorators: [{
             type: Component,
@@ -92,7 +92,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
       [startView]="startView()"
       [dateFilter]="resolvedDateFilter()"
       (selectedChange)="onSelect($event)" />
-  `, styles: [":host{display:block;width:fit-content;padding:.75rem;border-radius:var(--radius);border:1px solid hsl(var(--border));background:hsl(var(--background));color:hsl(var(--foreground))}.Calendar{display:block;width:var(--calendar-width, 17.5rem)}\n"] }]
+  `, styles: [":host{display:block;width:fit-content;padding:calc(var(--spacing) * 3);border-radius:var(--radius);border:1px solid hsl(var(--border));background:hsl(var(--background));color:hsl(var(--foreground))}.Calendar{display:block;width:var(--calendar-width, 17.5rem)}\n"] }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], startAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAt", required: false }] }], startView: [{ type: i0.Input, args: [{ isSignal: true, alias: "startView", required: false }] }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 /**