@ojiepermana/angular 21.1.28 → 21.1.30

package/generator/guide/bin/src/engine/component.js

@@ -55,8 +55,9 @@ function renderComponentTs(opts) {
         `@Component({\n` +
         `  selector: '${opts.selector}',\n` +
         `  changeDetection: ChangeDetectionStrategy.OnPush,\n` +
+        `  host: { class: 'block min-w-0' },\n` +
         styleLine +
-        `  template: \`${opts.html}\`,\n` +
+        `  template: \`<article class="demo-docs-content">${opts.html}</article>\`,\n` +
         `})\n` +
         `export class ${opts.className} {}\n`);
 }

package/generator/guide/bin/src/engine/render.js

@@ -12,7 +12,20 @@ function renderMarkdown(body) {
     }
     return html.trim();
 }
-/** Escape backticks and `${` so HTML can be safely embedded in a TS template literal. */
+/**
+ * Escape content so rendered HTML can be safely embedded in a generated Angular
+ * inline template.
+ *
+ * Besides template-literal escaping, Angular v17+ reserves `@`, `{`, and `}`
+ * in templates for control flow blocks and ICU expressions. Docs content often
+ * contains those characters in code fences, so encode them before emission.
+ */
 function escapeForTemplateLiteral(html) {
-    return html.replace(/\\/g, '\\\\').replace(/`/g, '\\`').replace(/\$\{/g, '\\${');
+    return html
+        .replace(/\\/g, '\\\\')
+        .replace(/`/g, '\\`')
+        .replace(/\$\{/g, '\\${')
+        .replace(/@/g, '@')
+        .replace(/\{/g, '{')
+        .replace(/\}/g, '}');
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ojiepermana/angular",
-  "version": "21.1.28",
+  "version": "21.1.30",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ojiepermana/angular.git"

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

@@ -92,12 +92,25 @@ declare class AlertDescriptionComponent {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AlertDescriptionComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<AlertDescriptionComponent, "ui-alert-description", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
+declare class AlertActionComponent {
+    readonly class: _angular_core.InputSignal<string>;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AlertActionComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AlertActionComponent, "ui-alert-action", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
 
+declare const avatarSizeClasses: {
+    readonly default: "h-10 w-10";
+    readonly sm: "h-8 w-8";
+    readonly lg: "h-12 w-12";
+};
+type AvatarSize = keyof typeof avatarSizeClasses;
 declare class AvatarComponent {
+    readonly size: _angular_core.InputSignal<"default" | "sm" | "lg">;
     readonly class: _angular_core.InputSignal<string>;
     protected readonly classes: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AvatarComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AvatarComponent, "ui-avatar", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AvatarComponent, "ui-avatar", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 declare class AvatarImageComponent {
     readonly src: _angular_core.InputSignal<string>;
@@ -114,9 +127,27 @@ declare class AvatarFallbackComponent {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AvatarFallbackComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<AvatarFallbackComponent, "ui-avatar-fallback", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
+declare class AvatarBadgeComponent {
+    readonly class: _angular_core.InputSignal<string>;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AvatarBadgeComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AvatarBadgeComponent, "ui-avatar-badge", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+declare class AvatarGroupComponent {
+    readonly class: _angular_core.InputSignal<string>;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AvatarGroupComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AvatarGroupComponent, "ui-avatar-group", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+declare class AvatarGroupCountComponent {
+    readonly class: _angular_core.InputSignal<string>;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AvatarGroupCountComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AvatarGroupCountComponent, "ui-avatar-group-count", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
 
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "destructive" | "secondary" | "outline" | null | undefined;
+    variant?: "default" | "destructive" | "secondary" | "outline" | "ghost" | "link" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type BadgeVariant = NonNullable<VariantProps<typeof badgeVariants>['variant']>;
 
@@ -125,12 +156,14 @@ declare class BadgeComponent {
     readonly class: _angular_core.InputSignal<string>;
     protected readonly classes: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<BadgeComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BadgeComponent, "ui-badge, span[ui-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, "ui-badge, [ui-badge]", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 declare class BreadcrumbComponent {
+    readonly class: _angular_core.InputSignal<string>;
+    protected readonly classes: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<BreadcrumbComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BreadcrumbComponent, "ui-breadcrumb, nav[ui-breadcrumb]", never, {}, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BreadcrumbComponent, "ui-breadcrumb, nav[ui-breadcrumb]", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 declare class BreadcrumbListComponent {
     readonly class: _angular_core.InputSignal<string>;
@@ -170,8 +203,8 @@ declare class BreadcrumbEllipsisComponent {
 }
 
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "destructive" | "secondary" | "outline" | "link" | "ghost" | null | undefined;
-    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+    variant?: "default" | "destructive" | "secondary" | "outline" | "ghost" | "link" | null | undefined;
+    size?: "default" | "sm" | "lg" | "xs" | "icon-xs" | "icon-sm" | "icon" | "icon-lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type ButtonVariant = NonNullable<VariantProps<typeof buttonVariants>['variant']>;
 type ButtonSize = NonNullable<VariantProps<typeof buttonVariants>['size']>;
@@ -210,14 +243,17 @@ declare class CalendarComponent implements ControlValueAccessor {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<CalendarComponent, "ui-calendar", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "startAt": { "alias": "startAt"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
 }
 
+type CardSize = 'default' | 'sm';
 declare class CardComponent {
+    readonly size: _angular_core.InputSignal<CardSize>;
     readonly class: _angular_core.InputSignal<string>;
     protected readonly classes: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CardComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CardComponent, "ui-card", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CardComponent, "ui-card", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 declare class CardHeaderComponent {
+    private readonly card;
     readonly class: _angular_core.InputSignal<string>;
     protected readonly classes: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CardHeaderComponent, never>;
@@ -225,6 +261,7 @@ declare class CardHeaderComponent {
 }
 
 declare class CardTitleComponent {
+    private readonly card;
     readonly class: _angular_core.InputSignal<string>;
     protected readonly classes: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CardTitleComponent, never>;
@@ -232,13 +269,22 @@ declare class CardTitleComponent {
 }
 
 declare class CardDescriptionComponent {
+    private readonly card;
     readonly class: _angular_core.InputSignal<string>;
     protected readonly classes: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CardDescriptionComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<CardDescriptionComponent, "ui-card-description, p[ui-card-description]", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
+declare class CardActionComponent {
+    readonly class: _angular_core.InputSignal<string>;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CardActionComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CardActionComponent, "ui-card-action", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
 declare class CardContentComponent {
+    private readonly card;
     readonly class: _angular_core.InputSignal<string>;
     protected readonly classes: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CardContentComponent, never>;
@@ -246,6 +292,7 @@ declare class CardContentComponent {
 }
 
 declare class CardFooterComponent {
+    private readonly card;
     readonly class: _angular_core.InputSignal<string>;
     protected readonly classes: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CardFooterComponent, never>;
@@ -253,15 +300,22 @@ declare class CardFooterComponent {
 }
 
 declare class CheckboxComponent implements ControlValueAccessor {
+    readonly id: _angular_core.InputSignal<string>;
+    readonly name: _angular_core.InputSignal<string | null>;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly indeterminate: _angular_core.InputSignal<boolean>;
     readonly required: _angular_core.InputSignal<boolean>;
     readonly ariaLabel: _angular_core.InputSignal<string | null>;
+    readonly ariaDescribedby: _angular_core.InputSignal<string | null>;
     readonly ariaLabelledby: _angular_core.InputSignal<string | null>;
+    readonly ariaInvalid: _angular_core.InputSignal<string | boolean | null>;
     readonly class: _angular_core.InputSignal<string>;
     readonly checkedChange: _angular_core.OutputEmitterRef<boolean>;
     private readonly ref;
     protected readonly checked: _angular_core.WritableSignal<boolean>;
-    protected readonly disabled: _angular_core.WritableSignal<boolean>;
+    protected readonly disabledState: _angular_core.WritableSignal<boolean>;
+    protected readonly ariaInvalidAttr: _angular_core.Signal<string | null>;
+    protected readonly isDisabled: _angular_core.Signal<boolean>;
     protected readonly classes: _angular_core.Signal<string>;
     private onChange;
     private onTouched;
@@ -272,7 +326,7 @@ declare class CheckboxComponent implements ControlValueAccessor {
     registerOnTouched(fn: () => void): void;
     setDisabledState(d: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CheckboxComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CheckboxComponent, "ui-checkbox", never, { "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; }, { "checkedChange": "checkedChange"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CheckboxComponent, "ui-checkbox", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaDescribedby": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "ariaInvalid": { "alias": "aria-invalid"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; }, { "checkedChange": "checkedChange"; }, never, ["*"], true, never>;
 }
 
 interface ComboboxOption<T = unknown> {
@@ -288,6 +342,7 @@ declare class ComboboxComponent<T = unknown> implements ControlValueAccessor {
     private readonly overlay;
     private readonly vcr;
     private readonly destroyRef;
+    private readonly instanceId;
     readonly options: _angular_core.InputSignal<readonly ComboboxOption<T>[]>;
     readonly value: _angular_core.ModelSignal<T | null>;
     readonly placeholder: _angular_core.InputSignal<string>;
@@ -300,6 +355,8 @@ declare class ComboboxComponent<T = unknown> implements ControlValueAccessor {
     private readonly panel;
     private overlayRef;
     readonly isOpen: _angular_core.WritableSignal<boolean>;
+    protected readonly triggerId: string;
+    protected readonly panelId: string;
     protected readonly classes: _angular_core.Signal<string>;
     protected readonly triggerClasses: _angular_core.Signal<string>;
     protected readonly selectedLabel: _angular_core.Signal<string>;
@@ -326,6 +383,8 @@ declare abstract class CommandContextBase {
     abstract unregisterItem(item: CommandItemComponent): void;
     abstract focusNext(delta: number): void;
     abstract focusFirst(): void;
+    abstract hasVisibleItems(): boolean;
+    abstract activateOnly(item: CommandItemComponent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CommandContextBase, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CommandContextBase, never, never, {}, {}, never, never, true, never>;
 }
@@ -342,6 +401,8 @@ declare class CommandComponent extends CommandContextBase {
     private visibleItems;
     focusNext(delta: number): void;
     focusFirst(): void;
+    hasVisibleItems(): boolean;
+    activateOnly(item: CommandItemComponent): void;
     /** Returns the first visible item's text if any. Used when user hits Enter with no active. */
     getActive(): CommandItemComponent | null;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CommandComponent, never>;
@@ -365,6 +426,7 @@ declare class CommandListComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<CommandListComponent, "ui-command-list", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 declare class CommandEmptyComponent {
+    protected readonly ctx: CommandComponent;
     readonly class: _angular_core.InputSignal<string>;
     protected readonly classes: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CommandEmptyComponent, never>;
@@ -458,6 +520,7 @@ declare class ContextMenuTriggerDirective {
     private overlayRef;
     readonly isOpen: _angular_core.WritableSignal<boolean>;
     protected onContextMenu(event: MouseEvent): void;
+    protected onKeyDown(event: KeyboardEvent): void;
     openAt(x: number, y: number): void;
     close(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ContextMenuTriggerDirective, never>;
@@ -514,6 +577,8 @@ declare class DialogComponent {
     readonly open: _angular_core.ModelSignal<boolean>;
     readonly closeOnEscape: _angular_core.InputSignal<boolean>;
     readonly closeOnBackdropClick: _angular_core.InputSignal<boolean>;
+    readonly showCloseButton: _angular_core.InputSignal<boolean>;
+    readonly closeButtonLabel: _angular_core.InputSignal<string>;
     readonly labelledBy: _angular_core.InputSignal<string | null>;
     readonly describedBy: _angular_core.InputSignal<string | null>;
     readonly class: _angular_core.InputSignal<string>;
@@ -529,7 +594,14 @@ declare class DialogComponent {
     private requestClose;
     close(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DialogComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DialogComponent, "ui-dialog", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; "closeOnBackdropClick": { "alias": "closeOnBackdropClick"; "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, "ui-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>;
+}
+
+declare class DialogCloseDirective {
+    private readonly dialog;
+    closeDialog(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DialogCloseDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DialogCloseDirective, "button[ui-dialog-close], a[ui-dialog-close]", never, {}, {}, never, never, true, never>;
 }
 
 declare class DialogHeaderComponent {
@@ -563,18 +635,64 @@ declare class DialogFooterComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DialogFooterComponent, "ui-dialog-footer", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
-declare class MenuItemComponent {
+type MenuItemVariant = 'default' | 'destructive';
+declare abstract class MenuFocusableItem {
     private readonly el;
-    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly disabledInput: _angular_core.InputSignal<boolean>;
     readonly inset: _angular_core.InputSignal<boolean>;
     readonly class: _angular_core.InputSignal<string>;
+    readonly variant: _angular_core.InputSignal<MenuItemVariant>;
     readonly selected: _angular_core.OutputEmitterRef<KeyboardEvent | MouseEvent>;
-    protected readonly classes: _angular_core.Signal<string>;
+    get disabled(): boolean;
     focus(): void;
     getLabel(): string;
+    protected buildItemClasses(extraClass?: string): string;
+    protected emitSelection(event: MouseEvent | KeyboardEvent): boolean;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MenuFocusableItem, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MenuFocusableItem, never, never, { "disabledInput": { "alias": "disabled"; "required": false; "isSignal": true; }; "inset": { "alias": "inset"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, { "selected": "selected"; }, never, never, true, never>;
+}
+declare class MenuGroupComponent {
+    readonly class: _angular_core.InputSignal<string>;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MenuGroupComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MenuGroupComponent, "ui-menu-group", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+declare abstract class MenuRadioGroupBase {
+    abstract isChecked(value: string): boolean;
+    abstract select(value: string): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MenuRadioGroupBase, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MenuRadioGroupBase, never, never, {}, {}, never, never, true, never>;
+}
+declare class MenuRadioGroupComponent extends MenuRadioGroupBase {
+    readonly value: _angular_core.ModelSignal<string | null>;
+    readonly class: _angular_core.InputSignal<string>;
+    protected readonly classes: _angular_core.Signal<string>;
+    isChecked(value: string): boolean;
+    select(value: string): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MenuRadioGroupComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MenuRadioGroupComponent, "ui-menu-radio-group", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, ["*"], true, never>;
+}
+declare class MenuItemComponent extends MenuFocusableItem {
+    protected readonly classes: _angular_core.Signal<string>;
     protected handleClick(e: MouseEvent | KeyboardEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MenuItemComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MenuItemComponent, "ui-menu-item, button[ui-menu-item]", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "inset": { "alias": "inset"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; }, { "selected": "selected"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MenuItemComponent, "ui-menu-item, button[ui-menu-item]", never, {}, {}, never, ["*"], true, never>;
+}
+declare class MenuCheckboxItemComponent extends MenuFocusableItem {
+    readonly checked: _angular_core.ModelSignal<boolean>;
+    protected readonly classes: _angular_core.Signal<string>;
+    protected toggle(event: MouseEvent | KeyboardEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MenuCheckboxItemComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MenuCheckboxItemComponent, "ui-menu-checkbox-item, button[ui-menu-checkbox-item]", never, { "checked": { "alias": "checked"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; }, never, ["*"], true, never>;
+}
+declare class MenuRadioItemComponent extends MenuFocusableItem {
+    private readonly group;
+    readonly value: _angular_core.InputSignal<string>;
+    protected readonly checked: _angular_core.Signal<boolean>;
+    protected readonly classes: _angular_core.Signal<string>;
+    protected select(event: MouseEvent | KeyboardEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MenuRadioItemComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MenuRadioItemComponent, "ui-menu-radio-item, button[ui-menu-radio-item]", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 declare class MenuSeparatorComponent {
     readonly class: _angular_core.InputSignal<string>;
@@ -721,6 +839,134 @@ declare class InputComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<InputComponent, "input[ui-input]", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+type InputGroupAddonAlign = 'inline-start' | 'inline-end' | 'block-start' | 'block-end';
+type InputGroupButtonSize = Extract<ButtonSize, 'xs' | 'icon-xs' | 'sm' | 'icon-sm'>;
+declare class InputGroupComponent {
+    readonly class: _angular_core.InputSignal<string>;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<InputGroupComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<InputGroupComponent, "ui-input-group", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+declare class InputGroupAddonComponent {
+    readonly align: _angular_core.InputSignal<InputGroupAddonAlign>;
+    readonly class: _angular_core.InputSignal<string>;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<InputGroupAddonComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<InputGroupAddonComponent, "ui-input-group-addon", never, { "align": { "alias": "align"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+declare class InputGroupTextComponent {
+    readonly class: _angular_core.InputSignal<string>;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<InputGroupTextComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<InputGroupTextComponent, "ui-input-group-text", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+declare class InputGroupButtonComponent {
+    readonly variant: _angular_core.InputSignal<ButtonVariant>;
+    readonly size: _angular_core.InputSignal<InputGroupButtonSize>;
+    readonly class: _angular_core.InputSignal<string>;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<InputGroupButtonComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<InputGroupButtonComponent, "button[ui-input-group-button], a[ui-input-group-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>;
+}
+declare class InputGroupInputComponent {
+    private readonly el;
+    readonly class: _angular_core.InputSignal<string>;
+    protected readonly classes: _angular_core.Signal<string>;
+    focus(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<InputGroupInputComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<InputGroupInputComponent, "input[ui-input-group-input]", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+declare class InputGroupTextareaComponent {
+    private readonly el;
+    readonly class: _angular_core.InputSignal<string>;
+    protected readonly classes: _angular_core.Signal<string>;
+    focus(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<InputGroupTextareaComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<InputGroupTextareaComponent, "textarea[ui-input-group-textarea]", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare const itemVariants: (props?: ({
+    variant?: "default" | "outline" | "muted" | null | undefined;
+    size?: "default" | "sm" | "xs" | null | undefined;
+    interactive?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const itemMediaVariants: (props?: ({
+    variant?: "default" | "icon" | "image" | null | undefined;
+    size?: "default" | "sm" | "xs" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type ItemVariant = NonNullable<VariantProps<typeof itemVariants>['variant']>;
+type ItemSize = NonNullable<VariantProps<typeof itemVariants>['size']>;
+type ItemMediaVariant = NonNullable<VariantProps<typeof itemMediaVariants>['variant']>;
+
+declare class ItemComponent {
+    readonly variant: _angular_core.InputSignal<ItemVariant>;
+    readonly size: _angular_core.InputSignal<ItemSize>;
+    readonly class: _angular_core.InputSignal<string>;
+    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, "ui-item, [ui-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>;
+}
+declare class ItemGroupComponent {
+    readonly class: _angular_core.InputSignal<string>;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ItemGroupComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ItemGroupComponent, "ui-item-group", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+declare class ItemSeparatorComponent {
+    readonly class: _angular_core.InputSignal<string>;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ItemSeparatorComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ItemSeparatorComponent, "ui-item-separator", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+declare class ItemHeaderComponent {
+    readonly class: _angular_core.InputSignal<string>;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ItemHeaderComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ItemHeaderComponent, "ui-item-header", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+declare class ItemMediaComponent {
+    readonly variant: _angular_core.InputSignal<ItemMediaVariant>;
+    readonly class: _angular_core.InputSignal<string>;
+    private readonly item;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ItemMediaComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ItemMediaComponent, "ui-item-media", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+declare class ItemContentComponent {
+    readonly class: _angular_core.InputSignal<string>;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ItemContentComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ItemContentComponent, "ui-item-content", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+declare class ItemTitleComponent {
+    readonly class: _angular_core.InputSignal<string>;
+    private readonly item;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ItemTitleComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ItemTitleComponent, "ui-item-title", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+declare class ItemDescriptionComponent {
+    readonly class: _angular_core.InputSignal<string>;
+    private readonly item;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ItemDescriptionComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ItemDescriptionComponent, "ui-item-description", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+declare class ItemActionsComponent {
+    readonly class: _angular_core.InputSignal<string>;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ItemActionsComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ItemActionsComponent, "ui-item-actions", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+declare class ItemFooterComponent {
+    readonly class: _angular_core.InputSignal<string>;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ItemFooterComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ItemFooterComponent, "ui-item-footer", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
 declare class LabelComponent {
     readonly for: _angular_core.InputSignal<string | null>;
     readonly class: _angular_core.InputSignal<string>;
@@ -1382,5 +1628,5 @@ declare class ThemePanelComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ThemePanelComponent, "ui-theme-panel", never, { "connected": { "alias": "connected"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "userName": { "alias": "userName"; "required": false; "isSignal": true; }; "userSubtitle": { "alias": "userSubtitle"; "required": false; "isSignal": true; }; "userInitials": { "alias": "userInitials"; "required": false; "isSignal": true; }; "themeColor": { "alias": "themeColor"; "required": false; "isSignal": true; }; "themeMode": { "alias": "themeMode"; "required": false; "isSignal": true; }; "themeStyle": { "alias": "themeStyle"; "required": false; "isSignal": true; }; "layoutMode": { "alias": "layoutMode"; "required": false; "isSignal": true; }; "layoutWidth": { "alias": "layoutWidth"; "required": false; "isSignal": true; }; }, { "themeColorChange": "themeColorChange"; "themeModeChange": "themeModeChange"; "themeStyleChange": "themeStyleChange"; "layoutModeChange": "layoutModeChange"; "layoutWidthChange": "layoutWidthChange"; }, never, never, true, never>;
 }
 
-export { AccordionComponent, AccordionContentComponent, AccordionContextBase, AccordionItemComponent, AccordionTriggerComponent, AlertComponent, AlertDescriptionComponent, AlertTitleComponent, AvatarComponent, AvatarFallbackComponent, AvatarImageComponent, BadgeComponent, BreadcrumbComponent, BreadcrumbEllipsisComponent, BreadcrumbItemComponent, BreadcrumbLinkComponent, BreadcrumbListComponent, BreadcrumbPageComponent, BreadcrumbSeparatorComponent, ButtonComponent, CalendarComponent, CardComponent, CardContentComponent, CardDescriptionComponent, CardFooterComponent, CardHeaderComponent, CardTitleComponent, CheckboxComponent, ComboboxComponent, CommandComponent, CommandContextBase, CommandEmptyComponent, CommandGroupComponent, CommandInputComponent, CommandItemComponent, CommandListComponent, CommandSeparatorComponent, CommandShortcutComponent, ContextMenuTriggerDirective, DatePickerComponent, DialogComponent, DialogContentComponent, DialogDescriptionComponent, DialogFooterComponent, DialogHeaderComponent, DialogTitleComponent, FormControlDirective, FormDescriptionComponent, FormFieldComponent, FormFieldContext, FormLabelComponent, FormMessageComponent, InputComponent, LabelComponent, MenuContentDirective, MenuItemComponent, MenuLabelComponent, MenuSeparatorComponent, MenuShortcutComponent, MenuSurfaceComponent, MenuTriggerDirective, OptionComponent, POPOVER_TRIGGER_DEFAULTS, PaginationComponent, PopoverContentDirective, PopoverTriggerDirective, ProgressComponent, RadioComponent, RadioGroupComponent, ScrollAreaComponent, SelectComponent, SeparatorComponent, SheetComponent, SheetContentComponent, SheetDescriptionComponent, SheetFooterComponent, SheetHeaderComponent, SheetTitleComponent, SkeletonComponent, SliderComponent, SwitchComponent, THEME_PANEL_LAYOUT_PORT, THEME_PANEL_THEME_PORT, TableBodyComponent, TableCaptionComponent, TableCellComponent, TableComponent, TableFooterComponent, TableHeadComponent, TableHeaderComponent, TableRowComponent, TabsComponent, TabsContentComponent, TabsContextBase, TabsListComponent, TabsTriggerComponent, TextareaComponent, ThemePanelComponent, ToastService, TooltipDirective, alertVariants, badgeVariants, buttonVariants, cn };
-export type { AccordionType, AlertVariant, BadgeVariant, ButtonSize, ButtonVariant, ComboboxOption, MenuAlign, MenuSide, PopoverAlign, PopoverSide, PopoverTriggerDefaults, SeparatorOrientation, SheetSide, ThemePanelColor, ThemePanelLayoutMode, ThemePanelLayoutPort, ThemePanelLayoutWidth, ThemePanelMode, ThemePanelStyle, ThemePanelThemePort, ToastOptions, ToastVariant };
+export { AccordionComponent, AccordionContentComponent, AccordionContextBase, AccordionItemComponent, AccordionTriggerComponent, AlertActionComponent, AlertComponent, AlertDescriptionComponent, AlertTitleComponent, AvatarBadgeComponent, AvatarComponent, AvatarFallbackComponent, AvatarGroupComponent, AvatarGroupCountComponent, AvatarImageComponent, BadgeComponent, BreadcrumbComponent, BreadcrumbEllipsisComponent, BreadcrumbItemComponent, BreadcrumbLinkComponent, BreadcrumbListComponent, BreadcrumbPageComponent, BreadcrumbSeparatorComponent, ButtonComponent, CalendarComponent, CardActionComponent, CardComponent, CardContentComponent, CardDescriptionComponent, CardFooterComponent, CardHeaderComponent, CardTitleComponent, CheckboxComponent, ComboboxComponent, CommandComponent, CommandContextBase, CommandEmptyComponent, CommandGroupComponent, CommandInputComponent, CommandItemComponent, CommandListComponent, CommandSeparatorComponent, CommandShortcutComponent, ContextMenuTriggerDirective, DatePickerComponent, DialogCloseDirective, DialogComponent, DialogContentComponent, DialogDescriptionComponent, DialogFooterComponent, DialogHeaderComponent, DialogTitleComponent, FormControlDirective, FormDescriptionComponent, FormFieldComponent, FormFieldContext, FormLabelComponent, FormMessageComponent, InputComponent, InputGroupAddonComponent, InputGroupButtonComponent, InputGroupComponent, InputGroupInputComponent, InputGroupTextComponent, InputGroupTextareaComponent, ItemActionsComponent, ItemComponent, ItemContentComponent, ItemDescriptionComponent, ItemFooterComponent, ItemGroupComponent, ItemHeaderComponent, ItemMediaComponent, ItemSeparatorComponent, ItemTitleComponent, LabelComponent, MenuCheckboxItemComponent, MenuContentDirective, MenuFocusableItem, MenuGroupComponent, MenuItemComponent, MenuLabelComponent, MenuRadioGroupBase, MenuRadioGroupComponent, MenuRadioItemComponent, MenuSeparatorComponent, MenuShortcutComponent, MenuSurfaceComponent, MenuTriggerDirective, OptionComponent, POPOVER_TRIGGER_DEFAULTS, PaginationComponent, PopoverContentDirective, PopoverTriggerDirective, ProgressComponent, RadioComponent, RadioGroupComponent, ScrollAreaComponent, SelectComponent, SeparatorComponent, SheetComponent, SheetContentComponent, SheetDescriptionComponent, SheetFooterComponent, SheetHeaderComponent, SheetTitleComponent, SkeletonComponent, SliderComponent, SwitchComponent, THEME_PANEL_LAYOUT_PORT, THEME_PANEL_THEME_PORT, TableBodyComponent, TableCaptionComponent, TableCellComponent, TableComponent, TableFooterComponent, TableHeadComponent, TableHeaderComponent, TableRowComponent, TabsComponent, TabsContentComponent, TabsContextBase, TabsListComponent, TabsTriggerComponent, TextareaComponent, ThemePanelComponent, ToastService, TooltipDirective, alertVariants, badgeVariants, buttonVariants, cn, itemMediaVariants, itemVariants };
+export type { AccordionType, AlertVariant, AvatarSize, BadgeVariant, ButtonSize, ButtonVariant, CardSize, ComboboxOption, InputGroupAddonAlign, InputGroupButtonSize, ItemMediaVariant, ItemSize, ItemVariant, MenuAlign, MenuItemVariant, MenuSide, PopoverAlign, PopoverSide, PopoverTriggerDefaults, SeparatorOrientation, SheetSide, ThemePanelColor, ThemePanelLayoutMode, ThemePanelLayoutPort, ThemePanelLayoutWidth, ThemePanelMode, ThemePanelStyle, ThemePanelThemePort, ToastOptions, ToastVariant };

package/types/ojiepermana-angular-navigation.d.ts

@@ -236,6 +236,9 @@ declare class UiNavItemComponent {
     readonly level: _angular_core.InputSignal<number>;
     /** Compact / icon-only rendering (sidebar `thin`). */
     readonly compact: _angular_core.InputSignal<boolean>;
+    /** True when this branch sits inside a collapsable rail and can draw a connector back to it. */
+    readonly railConnector: _angular_core.InputSignal<boolean>;
+    protected readonly railConnectorDotClasses = "pointer-events-none absolute -left-[11px] top-1/2 z-10 h-1 w-1 -translate-x-1/2 -translate-y-1/2 rounded-full bg-foreground/80";
     protected readonly exactMatch: {
         readonly exact: true;
         readonly paths: "exact";
@@ -258,10 +261,12 @@ declare class UiNavItemComponent {
     protected readonly headingId: _angular_core.Signal<string>;
     protected isGroupOpen(): boolean;
     protected isTrailActive(): boolean;
+    protected railConnectorClasses(active: boolean): string;
+    protected showRailConnector(active: boolean): boolean;
     protected toggleGroup(): void;
     protected runAction(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiNavItemComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiNavItemComponent, "ui-nav-item", never, { "item": { "alias": "item"; "required": true; "isSignal": true; }; "level": { "alias": "level"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiNavItemComponent, "ui-nav-item", never, { "item": { "alias": "item"; "required": true; "isSignal": true; }; "level": { "alias": "level"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; "railConnector": { "alias": "railConnector"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /**