@ojiepermana/angular-component 22.0.36 → 22.0.40

package/toast/README.md

@@ -1,6 +1,6 @@
 # Toast
 
-Imperative notification service wrapping `MatSnackBar` with shadcn styling and a Sonner-style API surface.
+Imperative, dependency-free notification service that renders toasts into a live region (`role="status"`, `aria-live="polite"`) with shadcn styling and a Sonner-style API surface.
 
 ## Import
 
@@ -10,18 +10,7 @@ import { ToastService } from '@ojiepermana/angular-component/toast';
 
 ## Application Setup
 
-Angular Material snack bars require animations to be configured once at application bootstrap.
-
-```ts
-import { bootstrapApplication } from '@angular/platform-browser';
-import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
-
-bootstrapApplication(AppComponent, {
-  providers: [provideAnimationsAsync()],
-});
-```
-
-Use `provideNoopAnimations()` instead when the host application intentionally disables animations.
+No special bootstrap providers are required. `ToastService` is a dependency-free, `providedIn: 'root'` service that injects `DOCUMENT` and renders its own live-region container, so you can inject and use it directly.
 
 ## Basic Usage
 
@@ -68,6 +57,28 @@ this.toast.show({
 });
 ```
 
+### Persistent action
+
+For an important action, keep the toast open (`durationMs: null`) and handle the result from the returned `ToastRef`.
+
+```ts
+const ref = this.toast.show({
+  title: 'Event archived',
+  description: 'Restore it from the calendar within the next minute.',
+  action: 'Undo',
+  durationMs: null,
+});
+
+void ref.afterDismissed.then(({ dismissedByAction }) => {
+  if (dismissedByAction) {
+    this.toast.info({
+      title: 'Archive cancelled',
+      description: 'The event is back on the calendar.',
+    });
+  }
+});
+```
+
 ### Promise State
 
 ```ts
@@ -84,15 +95,22 @@ The loading toast uses `durationMs: null` internally so it stays visible until t
 
 ### `ToastService`
 
-| Method                             | Returns                   |
-| ---------------------------------- | ------------------------- |
-| `show(options: ToastOptions)`      | `MatSnackBarRef<unknown>` |
-| `success(options)`                 | `MatSnackBarRef<unknown>` |
-| `info(options)`                    | `MatSnackBarRef<unknown>` |
-| `warning(options)`                 | `MatSnackBarRef<unknown>` |
-| `error(options)`                   | `MatSnackBarRef<unknown>` |
-| `promise(taskOrFactory, messages)` | `Promise<T>`              |
-| `dismiss()`                        | `void`                    |
+| Method                             | Returns      |
+| ---------------------------------- | ------------ |
+| `show(options: ToastOptions)`      | `ToastRef`   |
+| `success(options)`                 | `ToastRef`   |
+| `info(options)`                    | `ToastRef`   |
+| `warning(options)`                 | `ToastRef`   |
+| `error(options)`                   | `ToastRef`   |
+| `promise(taskOrFactory, messages)` | `Promise<T>` |
+| `dismiss()`                        | `void`       |
+
+### `ToastRef`
+
+| Member           | Type                                      | Notes                                                 |
+| ---------------- | ----------------------------------------- | ----------------------------------------------------- |
+| `dismiss()`      | `void`                                    | Dismisses this toast.                                 |
+| `afterDismissed` | `Promise<{ dismissedByAction: boolean }>` | Resolves with `dismissedByAction: true` via `action`. |
 
 ### `ToastOptions`
 
@@ -100,11 +118,11 @@ The loading toast uses `durationMs: null` internally so it stays visible until t
 | -------------------- | ---------------------------------------------------------------- | ----------- |
 | `title`              | `string`                                                         | —           |
 | `description`        | `string`                                                         | —           |
-| `action`             | `string`                                                         | `''`        |
+| `action`             | `string`                                                         | —           |
 | `variant`            | `'default' \| 'destructive' \| 'success' \| 'info' \| 'warning'` | `'default'` |
 | `durationMs`         | `number \| null`                                                 | `5000`      |
-| `horizontalPosition` | `MatSnackBarConfig['horizontalPosition']`                        | `'end'`     |
-| `verticalPosition`   | `MatSnackBarConfig['verticalPosition']`                          | `'bottom'`  |
+| `horizontalPosition` | `'start' \| 'center' \| 'end' \| 'left' \| 'right'`              | `'end'`     |
+| `verticalPosition`   | `'top' \| 'bottom'`                                              | `'bottom'`  |
 
 Set `durationMs` to `null` when the toast should stay visible until `dismiss()` is called.
 
@@ -118,204 +136,35 @@ Set `durationMs` to `null` when the toast should stay visible until `dismiss()`
 
 ## Styling And Theming
 
-The service applies `toast-panel` plus `toast-<variant>` panel classes to the Angular Material snack-bar container.
+The service applies `toast-panel` plus `toast-<variant>` classes to each toast `<div>`.
 
-- `default` keeps the background and foreground tokens from the active theme.
-- `success` uses the primary theme tokens.
-- `info` uses the shared `info` tokens.
-- `warning` uses the shared `warning` tokens.
-- `error` maps to the destructive tokens.
+- `default` keeps the `background`/`foreground` tokens from the active theme.
+- `success` uses emerald tokens (`bg-emerald-600 text-white`).
+- `info` uses sky tokens (`bg-sky-600 text-white`).
+- `warning` uses amber tokens (`bg-amber-500 text-black`).
+- `destructive` (used by `error()`) maps to the destructive tokens.
 
-If you need to override a variant, target the container class and set the Material snack-bar CSS custom properties:
+If you need to override a variant, target the toast class directly:
 
 ```css
-.mat-mdc-snack-bar-container.toast-warning {
-  --mdc-snackbar-container-color: hsl(var(--warning));
-  --mdc-snackbar-supporting-text-color: hsl(var(--warning-foreground));
-  --mat-snack-bar-button-color: hsl(var(--warning-foreground));
+.toast-panel.toast-warning {
+  background-color: hsl(var(--warning));
+  color: hsl(var(--warning-foreground));
 }
 ```
 
 ## Accessibility
 
-`MatSnackBar` manages live-region announcements automatically. Keep titles short, use `action` for a single primary follow-up, and avoid moving focus into the toast.
-
-## Angular Notes
-
-Inject the service where the interaction starts instead of creating a global host component. `MatSnackBar` shows one visible toast at a time, so `promise()` dismisses the loading state before showing its success or error follow-up.
-
-## Source Parity
-
-This entrypoint is the local Angular mapping for shadcn Sonner as well as the simpler toast examples in the demo. It intentionally preserves the imperative API mental model, variant coverage, and placement controls while staying honest about the implementation boundary: the runtime surface is still a focused `MatSnackBar` wrapper, not Sonner's stacked multi-toast viewport.
-
-# Toast
-
-Imperative notification service backed by `MatSnackBar`, styled for the local shadcn-inspired theme.
-
-The upstream shadcn toast page is deprecated in favor of Sonner. This entrypoint remains useful for lightweight single-message flows in Angular apps, while richer stacked notification workflows can move to a future Sonner-style surface.
-
-## Import
-
-```ts
-import { ToastService } from '@ojiepermana/angular-component/toast';
-```
-
-## App setup
-
-Enable browser or noop animations so the underlying snackbar overlay can render correctly.
-
-```ts
-import type { ApplicationConfig } from '@angular/core';
-import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
-
-export const appConfig: ApplicationConfig = {
-  providers: [provideAnimationsAsync()],
-};
-```
-
-Use `provideNoopAnimations()` instead when the host application deliberately disables animations.
-
-## Structure
-
-This entrypoint exports a service rather than a component tree. `ToastService` keeps the API at the same event-handling layer as your save, delete, archive, or publish action, while rendering is delegated to Angular Material overlays.
-
-## Basic usage
-
-```ts
-import { inject } from '@angular/core';
-import { ToastService } from '@ojiepermana/angular-component/toast';
-
-export class SaveButton {
-  private readonly toast = inject(ToastService);
-
-  save(): void {
-    this.toast.success({
-      title: 'Saved',
-      description: 'Your changes have been saved.',
-    });
-  }
-}
-```
-
-## Common patterns
-
-### Status shortcuts
-
-```ts
-this.toast.show({
-  title: 'Deployment queued',
-  description: 'We will notify you when the build is ready.',
-});
-
-this.toast.success({
-  title: 'Saved',
-  description: 'Your changes have been saved.',
-});
-
-this.toast.info({
-  title: 'Heads up',
-  description: 'The deployment window starts in 10 minutes.',
-});
-
-this.toast.warning({
-  title: 'Storage almost full',
-  description: 'Archive older uploads before the next sync.',
-});
-
-this.toast.error({
-  title: 'Failed to save',
-  description: 'Network error. Please retry.',
-});
-```
-
-### Persistent action
-
-For an important action, keep the toast open and handle the snackbar action from the returned reference.
-
-```ts
-const ref = this.toast.show({
-  title: 'Event archived',
-  description: 'Restore it from the calendar within the next minute.',
-  action: 'Undo',
-  durationMs: null,
-});
-
-ref.onAction().subscribe(() => {
-  this.toast.info({
-    title: 'Archive cancelled',
-    description: 'The event is back on the calendar.',
-  });
-});
-```
-
-### Promise helper
-
-Use `toast.promise()` when one async task should produce loading, success, and failure feedback in sequence.
-
-```ts
-await this.toast.promise(
-  () =>
-    new Promise<{ name: string }>((resolve) => {
-      window.setTimeout(() => resolve({ name: 'Summer launch checklist' }), 900);
-    }),
-  {
-    loading: 'Archiving draft...',
-    success: (draft) => `${draft.name} archived`,
-    error: 'Unable to archive draft',
-  },
-);
-```
-
-## API Reference
-
-### `ToastService`
-
-| Method                             | Returns                   | Notes                                                      |
-| ---------------------------------- | ------------------------- | ---------------------------------------------------------- |
-| `show(options)`                    | `MatSnackBarRef<unknown>` | Lowest-level method with full option control.              |
-| `success(options)`                 | `MatSnackBarRef<unknown>` | Shortcut for `variant: 'success'`.                         |
-| `info(options)`                    | `MatSnackBarRef<unknown>` | Angular-local semantic shortcut.                           |
-| `warning(options)`                 | `MatSnackBarRef<unknown>` | Angular-local semantic shortcut.                           |
-| `error(options)`                   | `MatSnackBarRef<unknown>` | Shortcut for `variant: 'destructive'`.                     |
-| `promise(taskOrFactory, messages)` | `Promise<T>`              | Shows loading first, then success or destructive feedback. |
-| `dismiss()`                        | `void`                    | Closes the active toast.                                   |
-
-### `ToastOptions`
-
-| Field                | Type                                                             | Default     | Notes                                                   |
-| -------------------- | ---------------------------------------------------------------- | ----------- | ------------------------------------------------------- |
-| `title`              | `string`                                                         | unset       | Primary message line.                                   |
-| `description`        | `string`                                                         | unset       | Optional secondary line.                                |
-| `action`             | `string`                                                         | `''`        | Single action label shown by the snackbar.              |
-| `variant`            | `'default' \| 'destructive' \| 'success' \| 'info' \| 'warning'` | `'default'` | Visual variant applied through `toast-*` panel classes. |
-| `durationMs`         | `number \| null`                                                 | `5000`      | Set to `null` to keep the toast open until dismissed.   |
-| `horizontalPosition` | `MatSnackBarConfig['horizontalPosition']`                        | `'end'`     | Snackbar x-axis placement.                              |
-| `verticalPosition`   | `MatSnackBarConfig['verticalPosition']`                          | `'bottom'`  | Snackbar y-axis placement.                              |
-
-### `ToastPromiseMessages<T>`
-
-| Field     | Type                                     | Notes                                               |
-| --------- | ---------------------------------------- | --------------------------------------------------- |
-| `loading` | `string`                                 | Required loading message while the task is pending. |
-| `success` | `string \| ((value: T) => string)`       | Static or data-derived success copy.                |
-| `error`   | `string \| ((error: unknown) => string)` | Static or error-derived destructive copy.           |
-
-## Styling and theming
-
-The service applies `toast-panel` and `toast-<variant>` classes on the snackbar container. The shared Material integration maps those classes to the local semantic tokens for default, destructive, success, info, and warning states, and preserves line breaks between `title` and `description`.
-
-## Accessibility
-
-`MatSnackBar` manages live-region announcements automatically. Keep toast copy short, reserve it for transient status updates, and prefer `durationMs: null` when the action button must stay available long enough for keyboard and assistive-technology users.
+The service renders toasts into a `role="status"`, `aria-live="polite"` live region so screen readers announce them automatically. Keep titles short, use `action` for a single primary follow-up, and avoid moving focus into the toast.
 
 ## Keyboard interactions
 
-The toast body itself is not a roving-focus widget. Keyboard interaction is limited to the optional action button exposed by the snackbar when `action` is present.
+The toast body itself is not a roving-focus widget. Keyboard interaction is limited to the optional action button rendered when `action` is present.
 
-## Angular notes
+## Angular Notes
 
-This API is intentionally Angular-first rather than a one-to-one port of Radix toast composition. You trigger notifications from event handlers or async workflows, not by managing a dedicated toast viewport in every template.
+Inject the service where the interaction starts instead of creating a global host component. Toasts stack in the live-region container, and `promise()` dismisses the loading toast before showing its success or error follow-up.
 
-## Source parity
+## Source Parity
 
-Default and destructive map most closely to the historical shadcn toast examples. `success`, `info`, and `warning` are Angular-local semantic additions that fit the service-style API better. The upstream shadcn page now points users to Sonner, so this entrypoint deliberately focuses on simple, single-message feedback instead of stacked queue management.
+This entrypoint is the local Angular mapping for shadcn Sonner as well as the simpler toast examples in the demo. It intentionally preserves the imperative API mental model, variant coverage, and placement controls while staying honest about the implementation boundary: the runtime surface is a focused, dependency-free live-region renderer, not Sonner's full multi-toast viewport.

package/tooltip/README.md

@@ -149,6 +149,12 @@ Export the trigger as `TooltipTrigger` when a flow needs to open or close the co
 | `closeDelay`     | `number`                                 | Overrides the root close delay for this trigger.    |
 | `disabled`       | `boolean`                                | Suppresses tooltip opening for the trigger.         |
 
+### `TooltipTriggerDirective` outputs
+
+| Output         | Type      | Notes                                                  |
+| -------------- | --------- | ------------------------------------------------------ |
+| `openedChange` | `boolean` | Emits `true` when the tooltip opens, `false` on close. |
+
 ### `TooltipTriggerDirective` methods
 
 - `open()`: opens the composed tooltip.
@@ -161,14 +167,13 @@ Export the trigger as `TooltipTrigger` when a flow needs to open or close the co
 
 ### `TooltipDirective`
 
-| Input                  | Type                      | Notes                                                    |
-| ---------------------- | ------------------------- | -------------------------------------------------------- |
-| `Tooltip`              | `string`                  | Message rendered inside the Material tooltip overlay.    |
-| `TooltipPosition`      | `TooltipPosition`         | `left`, `right`, `above`, `below`, `before`, or `after`. |
-| `TooltipDisabled`      | `boolean`                 | Temporarily suppresses tooltip display.                  |
-| `TooltipShowDelay`     | `number`                  | Delay in milliseconds before the tooltip opens.          |
-| `TooltipHideDelay`     | `number`                  | Delay in milliseconds before the tooltip closes.         |
-| `TooltipTouchGestures` | `'auto' \| 'on' \| 'off'` | Controls touch gesture behavior on mobile devices.       |
+| Input              | Type              | Notes                                                    |
+| ------------------ | ----------------- | -------------------------------------------------------- |
+| `Tooltip`          | `string`          | Message rendered inside the tooltip overlay.             |
+| `TooltipPosition`  | `TooltipPosition` | `left`, `right`, `above`, `below`, `before`, or `after`. |
+| `TooltipDisabled`  | `boolean`         | Temporarily suppresses tooltip display.                  |
+| `TooltipShowDelay` | `number`          | Delay in milliseconds before the tooltip opens.          |
+| `TooltipHideDelay` | `number`          | Delay in milliseconds before the tooltip closes.         |
 
 For the original primitive contract, see the Radix Tooltip API: <https://www.radix-ui.com/primitives/docs/components/tooltip#api-reference>.
 

package/types/ojiepermana-angular-component-accordion.d.ts

@@ -12,12 +12,16 @@ declare class AccordionComponent extends AccordionContextBase {
     readonly collapsible: _angular_core.InputSignal<boolean>;
     readonly value: _angular_core.ModelSignal<string | string[] | null>;
     readonly class: _angular_core.InputSignal<string>;
+    readonly radius: _angular_core.InputSignal<"inherit" | "none" | "sm" | "md" | "lg" | "xl" | "full">;
+    readonly density: _angular_core.InputSignal<"inherit" | "compact" | "normal" | "relaxed" | "spacious">;
     protected readonly classes: _angular_core.Signal<string>;
+    protected readonly radiusBase: _angular_core.Signal<string | null>;
+    protected readonly densityBase: _angular_core.Signal<string | null>;
     private readonly openSet;
     isOpen(value: string): boolean;
     toggle(value: string): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AccordionComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AccordionComponent, "Accordion", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AccordionComponent, "Accordion", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, ["*"], true, never>;
 }
 declare class AccordionItemComponent {
     protected readonly ctx: AccordionContextBase;

package/types/ojiepermana-angular-component-alert-dialog.d.ts

@@ -12,6 +12,8 @@ declare class AlertDialogComponent {
     readonly labelledBy: _angular_core.InputSignal<string | null>;
     readonly describedBy: _angular_core.InputSignal<string | null>;
     readonly class: _angular_core.InputSignal<string>;
+    readonly radius: _angular_core.InputSignal<"sm" | "inherit" | "none" | "md" | "lg" | "xl" | "full">;
+    readonly density: _angular_core.InputSignal<"inherit" | "compact" | "normal" | "relaxed" | "spacious">;
     readonly openedChange: _angular_core.OutputEmitterRef<boolean>;
     private readonly contentSize;
     readonly resolvedSize: _angular_core.Signal<AlertDialogSize>;
@@ -19,7 +21,7 @@ declare class AlertDialogComponent {
     setContentSize(size: AlertDialogSize): void;
     close(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AlertDialogComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AlertDialogComponent, "AlertDialog", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; "closeOnBackdropClick": { "alias": "closeOnBackdropClick"; "required": false; "isSignal": true; }; "showCloseButton": { "alias": "showCloseButton"; "required": false; "isSignal": true; }; "closeButtonLabel": { "alias": "closeButtonLabel"; "required": false; "isSignal": true; }; "labelledBy": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "describedBy": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "openedChange": "openedChange"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AlertDialogComponent, "AlertDialog", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; "closeOnBackdropClick": { "alias": "closeOnBackdropClick"; "required": false; "isSignal": true; }; "showCloseButton": { "alias": "showCloseButton"; "required": false; "isSignal": true; }; "closeButtonLabel": { "alias": "closeButtonLabel"; "required": false; "isSignal": true; }; "labelledBy": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "describedBy": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "openedChange": "openedChange"; }, never, ["*"], true, never>;
 }
 
 declare class AlertDialogContentComponent {

package/types/ojiepermana-angular-component-alert.d.ts

@@ -10,9 +10,13 @@ type AlertVariant = NonNullable<VariantProps<typeof alertVariants>['variant']>;
 declare class AlertComponent {
     readonly variant: _angular_core.InputSignal<AlertVariant>;
     readonly class: _angular_core.InputSignal<string>;
+    readonly radius: _angular_core.InputSignal<"inherit" | "none" | "sm" | "md" | "lg" | "xl" | "full">;
+    readonly density: _angular_core.InputSignal<"inherit" | "compact" | "normal" | "relaxed" | "spacious">;
     protected readonly classes: _angular_core.Signal<string>;
+    protected readonly radiusBase: _angular_core.Signal<string | null>;
+    protected readonly densityBase: _angular_core.Signal<string | null>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AlertComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AlertComponent, "Alert", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AlertComponent, "Alert", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 declare class AlertTitleComponent {
     readonly class: _angular_core.InputSignal<string>;

package/types/ojiepermana-angular-component-avatar.d.ts

@@ -9,9 +9,13 @@ type AvatarSize = keyof typeof avatarSizeClasses;
 declare class AvatarComponent {
     readonly size: _angular_core.InputSignal<"default" | "sm" | "lg">;
     readonly class: _angular_core.InputSignal<string>;
+    readonly radius: _angular_core.InputSignal<"sm" | "lg" | "inherit" | "none" | "md" | "xl" | "full">;
+    readonly density: _angular_core.InputSignal<"inherit" | "compact" | "normal" | "relaxed" | "spacious">;
     protected readonly classes: _angular_core.Signal<string>;
+    protected readonly radiusBase: _angular_core.Signal<string | null>;
+    protected readonly densityBase: _angular_core.Signal<string | null>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AvatarComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AvatarComponent, "Avatar", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AvatarComponent, "Avatar", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 declare class AvatarImageComponent {
     readonly src: _angular_core.InputSignal<string>;

package/types/ojiepermana-angular-component-badge.d.ts

@@ -10,9 +10,13 @@ type BadgeVariant = NonNullable<VariantProps<typeof badgeVariants>['variant']>;
 declare class BadgeComponent {
     readonly variant: _angular_core.InputSignal<BadgeVariant>;
     readonly class: _angular_core.InputSignal<string>;
+    readonly radius: _angular_core.InputSignal<"inherit" | "none" | "sm" | "md" | "lg" | "xl" | "full">;
+    readonly density: _angular_core.InputSignal<"inherit" | "compact" | "normal" | "relaxed" | "spacious">;
     protected readonly classes: _angular_core.Signal<string>;
+    protected readonly radiusBase: _angular_core.Signal<string | null>;
+    protected readonly densityBase: _angular_core.Signal<string | null>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<BadgeComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BadgeComponent, "Badge, [Badge]", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BadgeComponent, "Badge, [Badge]", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 export { BadgeComponent, badgeVariants };

package/types/ojiepermana-angular-component-button.d.ts

@@ -13,9 +13,13 @@ declare class ButtonComponent {
     readonly variant: _angular_core.InputSignal<ButtonVariant>;
     readonly size: _angular_core.InputSignal<ButtonSize>;
     readonly class: _angular_core.InputSignal<string>;
+    readonly radius: _angular_core.InputSignal<"sm" | "lg" | "inherit" | "none" | "md" | "xl" | "full">;
+    readonly density: _angular_core.InputSignal<"inherit" | "compact" | "normal" | "relaxed" | "spacious">;
     protected readonly classes: _angular_core.Signal<string>;
+    protected readonly radiusBase: _angular_core.Signal<string | null>;
+    protected readonly densityBase: _angular_core.Signal<string | null>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ButtonComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ButtonComponent, "button[Button], a[Button]", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ButtonComponent, "button[Button], a[Button]", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 export { ButtonComponent, buttonVariants };

package/types/ojiepermana-angular-component-card.d.ts

@@ -4,9 +4,13 @@ type CardSize = 'default' | 'sm';
 declare class CardComponent {
     readonly size: _angular_core.InputSignal<CardSize>;
     readonly class: _angular_core.InputSignal<string>;
+    readonly radius: _angular_core.InputSignal<"sm" | "inherit" | "none" | "md" | "lg" | "xl" | "full">;
+    readonly density: _angular_core.InputSignal<"inherit" | "compact" | "normal" | "relaxed" | "spacious">;
     protected readonly classes: _angular_core.Signal<string>;
+    protected readonly radiusBase: _angular_core.Signal<string | null>;
+    protected readonly densityBase: _angular_core.Signal<string | null>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CardComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CardComponent, "Card", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CardComponent, "Card", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 declare class CardHeaderComponent {

package/types/ojiepermana-angular-component-dialog.d.ts

@@ -31,19 +31,23 @@ declare class DialogComponent {
     readonly labelledBy: _angular_core.InputSignal<string | null>;
     readonly describedBy: _angular_core.InputSignal<string | null>;
     readonly class: _angular_core.InputSignal<string>;
+    readonly radius: _angular_core.InputSignal<"inherit" | "none" | "sm" | "md" | "lg" | "xl" | "full">;
+    readonly density: _angular_core.InputSignal<"inherit" | "compact" | "normal" | "relaxed" | "spacious">;
     readonly openedChange: _angular_core.OutputEmitterRef<boolean>;
     private readonly tpl;
     private overlayRef;
     private focusTrap;
     private previousFocus;
     protected readonly surfaceClasses: _angular_core.Signal<string>;
+    protected readonly radiusBase: _angular_core.Signal<string | null>;
+    protected readonly densityBase: _angular_core.Signal<string | null>;
     constructor();
     private attach;
     private detach;
     private requestClose;
     close(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DialogComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DialogComponent, "Dialog", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; "closeOnBackdropClick": { "alias": "closeOnBackdropClick"; "required": false; "isSignal": true; }; "showCloseButton": { "alias": "showCloseButton"; "required": false; "isSignal": true; }; "closeButtonLabel": { "alias": "closeButtonLabel"; "required": false; "isSignal": true; }; "labelledBy": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "describedBy": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "openedChange": "openedChange"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DialogComponent, "Dialog", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; "closeOnBackdropClick": { "alias": "closeOnBackdropClick"; "required": false; "isSignal": true; }; "showCloseButton": { "alias": "showCloseButton"; "required": false; "isSignal": true; }; "closeButtonLabel": { "alias": "closeButtonLabel"; "required": false; "isSignal": true; }; "labelledBy": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "describedBy": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "openedChange": "openedChange"; }, never, ["*"], true, never>;
 }
 
 declare class DialogCloseDirective {

package/types/ojiepermana-angular-component-dropdown-menu.d.ts

@@ -86,9 +86,13 @@ declare class MenuShortcutComponent {
  */
 declare class MenuSurfaceComponent implements AfterContentInit {
     readonly class: _angular_core.InputSignal<string>;
+    readonly radius: _angular_core.InputSignal<"inherit" | "none" | "sm" | "md" | "lg" | "xl" | "full">;
+    readonly density: _angular_core.InputSignal<"inherit" | "compact" | "normal" | "relaxed" | "spacious">;
     private readonly items;
     readonly closeRequested: _angular_core.OutputEmitterRef<void>;
     private keyManager;
+    protected readonly radiusBase: _angular_core.Signal<string | null>;
+    protected readonly densityBase: _angular_core.Signal<string | null>;
     protected readonly classes: _angular_core.Signal<string>;
     ngAfterContentInit(): void;
     protected onArrow(e: KeyboardEvent, delta: number): void;
@@ -96,7 +100,7 @@ declare class MenuSurfaceComponent implements AfterContentInit {
     protected onEnd(e: KeyboardEvent): void;
     protected onTab(e: KeyboardEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MenuSurfaceComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MenuSurfaceComponent, "MenuSurface", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, { "closeRequested": "closeRequested"; }, ["items"], ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MenuSurfaceComponent, "MenuSurface", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; }, { "closeRequested": "closeRequested"; }, ["items"], ["*"], true, never>;
 }
 /**
  * Wraps an `<ng-template>` that holds `<MenuSurface>` + items.

package/types/ojiepermana-angular-component-input.d.ts

@@ -7,10 +7,14 @@ import * as _angular_core from '@angular/core';
 declare class InputComponent {
     private readonly el;
     readonly class: _angular_core.InputSignal<string>;
+    readonly radius: _angular_core.InputSignal<"inherit" | "none" | "sm" | "md" | "lg" | "xl" | "full">;
+    readonly density: _angular_core.InputSignal<"inherit" | "compact" | "normal" | "relaxed" | "spacious">;
     protected readonly classes: _angular_core.Signal<string>;
+    protected readonly radiusBase: _angular_core.Signal<string | null>;
+    protected readonly densityBase: _angular_core.Signal<string | null>;
     focus(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<InputComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<InputComponent, "input[Input]", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<InputComponent, "input[Input]", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 export { InputComponent };

package/types/ojiepermana-angular-component-item.d.ts

@@ -19,11 +19,15 @@ declare class ItemComponent {
     readonly variant: _angular_core.InputSignal<ItemVariant>;
     readonly size: _angular_core.InputSignal<ItemSize>;
     readonly class: _angular_core.InputSignal<string>;
+    readonly radius: _angular_core.InputSignal<"sm" | "inherit" | "none" | "md" | "lg" | "xl" | "full">;
+    readonly density: _angular_core.InputSignal<"inherit" | "compact" | "normal" | "relaxed" | "spacious">;
+    protected readonly radiusBase: _angular_core.Signal<string | null>;
+    protected readonly densityBase: _angular_core.Signal<string | null>;
     private readonly host;
     protected readonly interactive: boolean;
     protected readonly classes: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ItemComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ItemComponent, "Item, [Item]", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ItemComponent, "Item, [Item]", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 declare class ItemGroupComponent {
     readonly class: _angular_core.InputSignal<string>;

package/types/ojiepermana-angular-component-popover.d.ts

@@ -4,8 +4,12 @@ import { OverlaySide, OverlayAlign } from '@ojiepermana/angular-component/utils'
 
 declare class PopoverContentDirective {
     readonly template: TemplateRef<unknown>;
+    readonly radius: _angular_core.InputSignal<"inherit" | "none" | "sm" | "md" | "lg" | "xl" | "full">;
+    readonly density: _angular_core.InputSignal<"inherit" | "compact" | "normal" | "relaxed" | "spacious">;
+    protected readonly radiusBase: _angular_core.Signal<string | null>;
+    protected readonly densityBase: _angular_core.Signal<string | null>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<PopoverContentDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<PopoverContentDirective, "ng-template[PopoverContent]", ["PopoverContent"], {}, {}, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<PopoverContentDirective, "ng-template[PopoverContent]", ["PopoverContent"], { "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 type PopoverSide = OverlaySide;