@vadem/ui 0.0.0-stage → 0.0.1

package/styles/tokens/semantic.css

@@ -0,0 +1,233 @@
+/*
+ * Vadem semantic tokens.
+ * Meaning, not values. Themes only change this layer. Colors are light-dark() pairs that
+ * resolve against the element's color-scheme, so nested themes work.
+ */
+@layer vd.tokens {
+  /* ------------------------------------------------------------- themes */
+  /* Dark-first: dark unless asked otherwise. */
+  :root,
+  [data-theme='dark'] {
+    color-scheme: dark;
+  }
+
+  [data-theme='light'] {
+    color-scheme: light;
+  }
+
+  [data-theme='auto'] {
+    color-scheme: light dark;
+  }
+
+  :where(:root, [data-theme], [data-density]) {
+    /* ---------------------------------------------------------- surfaces */
+    /* Dark elevation is expressed by lightness: sunken < bg < surface < raised < overlay. */
+    --vd-color-bg: light-dark(var(--vd-neutral-50), var(--vd-neutral-975));
+    --vd-color-surface-sunken: light-dark(var(--vd-neutral-100), var(--vd-neutral-1000));
+    --vd-color-surface: light-dark(var(--vd-neutral-0), var(--vd-neutral-950));
+    --vd-color-surface-raised: light-dark(var(--vd-neutral-0), var(--vd-neutral-925));
+    --vd-color-surface-overlay: light-dark(var(--vd-neutral-0), var(--vd-neutral-900));
+    /* Neutral fill for secondary controls, hovered rows, tracks. */
+    --vd-color-fill: light-dark(
+      oklch(0.3 0.03 var(--vd-hue-neutral) / 0.06),
+      oklch(0.92 0.03 var(--vd-hue-neutral) / 0.07)
+    );
+    --vd-color-fill-hover: light-dark(
+      oklch(0.3 0.03 var(--vd-hue-neutral) / 0.1),
+      oklch(0.92 0.03 var(--vd-hue-neutral) / 0.11)
+    );
+    --vd-color-fill-active: light-dark(
+      oklch(0.3 0.03 var(--vd-hue-neutral) / 0.14),
+      oklch(0.92 0.03 var(--vd-hue-neutral) / 0.15)
+    );
+
+    /* -------------------------------------------------------------- text */
+    --vd-color-text: light-dark(var(--vd-neutral-900), var(--vd-neutral-50));
+    --vd-color-text-muted: light-dark(var(--vd-neutral-600), var(--vd-neutral-400));
+    /* Placeholders, hints. Still AA on bg and surface. */
+    --vd-color-text-subtle: light-dark(var(--vd-neutral-550), var(--vd-neutral-500));
+    --vd-color-text-disabled: light-dark(var(--vd-neutral-400), var(--vd-neutral-700));
+    --vd-color-text-accent: light-dark(var(--vd-accent-600), var(--vd-accent-300));
+
+    /* ----------------------------------------------------------- borders */
+    --vd-color-border: light-dark(
+      oklch(0.3 0.03 var(--vd-hue-neutral) / 0.12),
+      oklch(0.92 0.03 var(--vd-hue-neutral) / 0.1)
+    );
+    --vd-color-border-strong: light-dark(
+      oklch(0.3 0.03 var(--vd-hue-neutral) / 0.22),
+      oklch(0.92 0.03 var(--vd-hue-neutral) / 0.18)
+    );
+    /* Form control boundaries need 3:1 against the surface (WCAG 1.4.11). */
+    --vd-color-border-control: light-dark(var(--vd-neutral-500), var(--vd-neutral-600));
+    --vd-color-border-control-hover: light-dark(var(--vd-neutral-600), var(--vd-neutral-500));
+
+    /* Text-entry wells: a touch lighter than bg in light, recessed in dark. */
+    --vd-color-field: light-dark(
+      var(--vd-neutral-0),
+      color-mix(in oklch, var(--vd-neutral-1000) 45%, transparent)
+    );
+    --vd-color-field-readonly: var(--vd-color-fill);
+
+    /* ------------------------------------------------------------ action */
+    --vd-color-action: var(--vd-accent-600);
+    --vd-color-action-hover: light-dark(var(--vd-accent-700), var(--vd-accent-500));
+    --vd-color-action-active: light-dark(var(--vd-accent-800), var(--vd-accent-600));
+    --vd-color-on-action: var(--vd-neutral-0);
+    /* Strong (always dark) surface for tooltips and toasts: reads the same in both themes. */
+    --vd-color-surface-strong: light-dark(var(--vd-neutral-900), var(--vd-neutral-800));
+    --vd-color-text-on-strong: var(--vd-neutral-50);
+
+    /* Accent text on subtle accent fills (badges, tags): one step darker than link text. */
+    --vd-color-action-text: light-dark(var(--vd-accent-700), var(--vd-accent-300));
+    --vd-color-action-subtle: light-dark(
+      color-mix(in oklch, var(--vd-accent-500) 12%, transparent),
+      color-mix(in oklch, var(--vd-accent-400) 16%, transparent)
+    );
+
+    /* ---------------------------------------------------------- statuses */
+    --vd-color-success: var(--vd-success-600);
+    --vd-color-success-text: light-dark(var(--vd-success-700), var(--vd-success-300));
+    --vd-color-success-subtle: light-dark(
+      color-mix(in oklch, var(--vd-success-500) 12%, transparent),
+      color-mix(in oklch, var(--vd-success-400) 15%, transparent)
+    );
+    --vd-color-success-border: color-mix(in oklch, var(--vd-success-500) 40%, transparent);
+
+    /* Warning solids sit lighter on the curve (amber at 600 reads brown), with dark ink. */
+    --vd-color-warning: var(--vd-warning-400);
+    --vd-color-on-warning: var(--vd-warning-950);
+    --vd-color-warning-text: light-dark(var(--vd-warning-700), var(--vd-warning-300));
+    --vd-color-warning-subtle: light-dark(
+      color-mix(in oklch, var(--vd-warning-500) 14%, transparent),
+      color-mix(in oklch, var(--vd-warning-400) 15%, transparent)
+    );
+    --vd-color-warning-border: color-mix(in oklch, var(--vd-warning-500) 45%, transparent);
+
+    --vd-color-danger: var(--vd-danger-600);
+    --vd-color-danger-hover: light-dark(var(--vd-danger-700), var(--vd-danger-500));
+    --vd-color-danger-text: light-dark(var(--vd-danger-700), var(--vd-danger-300));
+    --vd-color-danger-subtle: light-dark(
+      color-mix(in oklch, var(--vd-danger-500) 11%, transparent),
+      color-mix(in oklch, var(--vd-danger-400) 15%, transparent)
+    );
+    --vd-color-danger-border: color-mix(in oklch, var(--vd-danger-500) 45%, transparent);
+
+    --vd-color-info: var(--vd-info-600);
+    --vd-color-info-text: light-dark(var(--vd-info-700), var(--vd-info-300));
+    --vd-color-info-subtle: light-dark(
+      color-mix(in oklch, var(--vd-info-500) 12%, transparent),
+      color-mix(in oklch, var(--vd-info-400) 15%, transparent)
+    );
+    --vd-color-info-border: color-mix(in oklch, var(--vd-info-500) 40%, transparent);
+
+    --vd-color-on-status: var(--vd-neutral-0);
+
+    /* ------------------------------------------------- focus & selection */
+    --vd-color-focus: light-dark(var(--vd-accent-600), var(--vd-accent-400));
+    --vd-focus-ring-width: 2px;
+    --vd-focus-ring-offset: 2px;
+    --vd-color-selection: light-dark(
+      color-mix(in oklch, var(--vd-accent-400) 30%, transparent),
+      color-mix(in oklch, var(--vd-accent-500) 40%, transparent)
+    );
+
+    /* ------------------------------------------------------------- depth */
+    /* Shadow ink: alpha is baked in because light-dark() only accepts colors. */
+    --vd-shadow-ink-1: light-dark(
+      oklch(0.25 0.03 var(--vd-hue-neutral) / 0.05),
+      oklch(0.05 0.01 var(--vd-hue-neutral) / 0.3)
+    );
+    --vd-shadow-ink-2: light-dark(
+      oklch(0.25 0.03 var(--vd-hue-neutral) / 0.08),
+      oklch(0.05 0.01 var(--vd-hue-neutral) / 0.4)
+    );
+    --vd-shadow-ink-3: light-dark(
+      oklch(0.25 0.03 var(--vd-hue-neutral) / 0.12),
+      oklch(0.05 0.01 var(--vd-hue-neutral) / 0.55)
+    );
+    --vd-shadow-sm: 0 1px 1px var(--vd-shadow-ink-1), 0 1px 3px var(--vd-shadow-ink-1);
+    --vd-shadow-md:
+      0 1px 2px var(--vd-shadow-ink-1), 0 4px 8px -2px var(--vd-shadow-ink-2),
+      0 12px 24px -8px var(--vd-shadow-ink-2);
+    --vd-shadow-lg:
+      0 2px 4px var(--vd-shadow-ink-1), 0 12px 24px -6px var(--vd-shadow-ink-2),
+      0 32px 64px -16px var(--vd-shadow-ink-3);
+
+    /* Signature: 1px inner top highlight on raised dark surfaces (invisible in light). */
+    --vd-color-highlight: light-dark(transparent, oklch(1 0 0 / 0.07));
+    --vd-highlight-top: inset 0 1px 0 var(--vd-color-highlight);
+
+    /* Signature: cursor-following glow on interactive cards. */
+    --vd-glow-color: light-dark(
+      color-mix(in oklch, var(--vd-accent-400) 14%, transparent),
+      color-mix(in oklch, var(--vd-accent-500) 18%, transparent)
+    );
+    --vd-glow-size: 22rem;
+    /* Brighter variant that lights up the card border near the cursor. */
+    --vd-glow-border: light-dark(
+      color-mix(in oklch, var(--vd-accent-500) 45%, transparent),
+      color-mix(in oklch, var(--vd-accent-400) 55%, transparent)
+    );
+    --vd-color-shimmer: light-dark(oklch(1 0 0 / 0.6), oklch(1 0 0 / 0.06));
+
+    /* Soft accent glow under solid actions on hover. */
+    --vd-shadow-glow-action: 0 6px 20px -6px
+      color-mix(in oklch, var(--vd-color-action) 55%, transparent);
+    /* Top-lit sheen on solid fills (primary, danger). */
+    --vd-color-sheen: oklch(1 0 0 / 0.12);
+
+    /* Translucent overlay surfaces (popover, sticky header) and the modal backdrop. */
+    --vd-color-surface-glass: light-dark(
+      color-mix(in oklch, var(--vd-neutral-0) 78%, transparent),
+      color-mix(in oklch, var(--vd-neutral-950) 72%, transparent)
+    );
+    --vd-backdrop-glass: blur(16px) saturate(1.4);
+    --vd-color-backdrop: light-dark(
+      oklch(0.25 0.03 var(--vd-hue-neutral) / 0.35),
+      oklch(0.08 0.01 var(--vd-hue-neutral) / 0.6)
+    );
+
+    /* ------------------------------------------------------------- chart */
+    /* Categorical series, assigned in this fixed order and never cycled. Exact values, not
+       ramp-derived: the set and its order were validated together (dataviz six checks, both
+       themes; worst adjacent CVD dE 12.1 light / 11.9 dark, normal-vision 23.2 / 19.7).
+       Independent of --vd-hue-accent so retheming never breaks separation. Slot 4 is 2.3:1 on
+       the light surface: charts always ship a legend and a table view (relief). See D106. */
+    --vd-color-chart-1: light-dark(oklch(0.55 0.17 290), oklch(0.65 0.15 290)); /* violet */
+    --vd-color-chart-2: light-dark(oklch(0.65 0.17 50), oklch(0.62 0.16 50)); /* orange */
+    --vd-color-chart-3: light-dark(oklch(0.61 0.105 190), oklch(0.64 0.11 190)); /* teal */
+    --vd-color-chart-4: light-dark(oklch(0.74 0.15 80), oklch(0.66 0.13 80)); /* amber */
+    --vd-color-chart-5: light-dark(oklch(0.6 0.18 345), oklch(0.64 0.16 345)); /* magenta */
+    --vd-color-chart-6: light-dark(oklch(0.6 0.15 140), oklch(0.62 0.15 140)); /* green */
+    --vd-color-chart-7: light-dark(oklch(0.58 0.14 245), oklch(0.64 0.13 245)); /* blue */
+    --vd-color-chart-8: light-dark(oklch(0.56 0.19 20), oklch(0.62 0.17 20)); /* red */
+
+    /* ------------------------------------------------------------- shape */
+    --vd-radius-control: var(--vd-radius-md);
+    --vd-radius-surface: var(--vd-radius-lg);
+    --vd-radius-overlay: var(--vd-radius-xl);
+    --vd-radius-pill: var(--vd-radius-full);
+
+    /* ------------------------------------------------------------ motion */
+    --vd-transition-colors:
+      color var(--vd-duration-fast) var(--vd-ease-out),
+      background-color var(--vd-duration-fast) var(--vd-ease-out),
+      border-color var(--vd-duration-fast) var(--vd-ease-out),
+      box-shadow var(--vd-duration-fast) var(--vd-ease-out);
+  }
+
+  :root {
+    --vd-press-scale: 0.98;
+    --vd-opacity-disabled: 0.45;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :root {
+      --vd-duration-fast: 0ms;
+      --vd-duration-base: 0ms;
+      --vd-duration-slow: 0ms;
+      --vd-press-scale: 1;
+    }
+  }
+}

package/types/vadem-ui-accordion.d.ts

@@ -0,0 +1,43 @@
+import * as i0 from "@angular/core";
+/**
+ * Group of `details[vdAccordionItem]`. With `exclusive`, the items share a `name`, so the
+ * browser keeps at most one open. Spec: specs/accordion.md
+ */
+export declare class VdAccordion {
+  /** At most one item open at a time (native `<details name>`). */
+  readonly exclusive: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly name: string;
+  static ɵfac: i0.ɵɵFactoryDeclaration<VdAccordion, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<VdAccordion, "[vdAccordion]", never, {
+    "exclusive": {
+      "alias": "exclusive";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
+/**
+ * One disclosure on a native `<details>` with a `<summary>`: keyboard, find-in-page (opens the
+ * matching item) and state stay native. `open` works as a plain attribute (`<details open>`)
+ * and two-way (`[(open)]`).
+ */
+export declare class VdAccordionItem {
+  readonly open: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly openChange: import("@angular/core").OutputEmitterRef<boolean>;
+  /** Follows the input, and the browser's own toggles in between. */
+  protected readonly isOpen: import("@angular/core").WritableSignal<boolean>;
+  private readonly group;
+  protected readonly groupName: import("@angular/core").Signal<string | null>;
+  protected onToggle(event: Event): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<VdAccordionItem, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<VdAccordionItem, "details[vdAccordionItem]", never, {
+    "open": {
+      "alias": "open";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "openChange": "openChange";
+  }, never, never, true, never>;
+}
+export declare const VD_ACCORDION: readonly [typeof VdAccordion, typeof VdAccordionItem];

package/types/vadem-ui-active-filters.d.ts

@@ -0,0 +1,73 @@
+import * as i0 from "@angular/core";
+interface VdActiveFilter {
+  readonly id: string;
+  readonly label: string;
+  readonly value: string;
+}
+export declare class VdActiveFilters {
+  readonly filters: import("@angular/core").InputSignal<readonly VdActiveFilter[]>;
+  readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly label: import("@angular/core").InputSignal<string | undefined>;
+  readonly clearText: import("@angular/core").InputSignal<string | undefined>;
+  readonly emptyText: import("@angular/core").InputSignal<string | undefined>;
+  readonly invalidText: import("@angular/core").InputSignal<string | undefined>;
+  readonly removeLabel: import("@angular/core").InputSignal<((label: string, value: string) => string) | undefined>;
+  readonly filterRemove: import("@angular/core").OutputEmitterRef<string>;
+  readonly clearAll: import("@angular/core").OutputEmitterRef<void>;
+  protected readonly valid: import("@angular/core").Signal<boolean>;
+  protected readonly t: import("@angular/core").Signal<Pick<{
+    label: string;
+    clearText: string;
+    emptyText: string;
+    invalidText: string;
+    removeLabel: (label: string, value: string) => string;
+  }, "label" | "clearText" | "emptyText" | "invalidText" | "removeLabel">>;
+  private readonly host;
+  private focus;
+  constructor();
+  private buttons;
+  protected remove(id: string): void;
+  protected clear(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<VdActiveFilters, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<VdActiveFilters, "vd-active-filters", never, {
+    "filters": {
+      "alias": "filters";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+    "label": {
+      "alias": "label";
+      "required": false;
+      "isSignal": true;
+    };
+    "clearText": {
+      "alias": "clearText";
+      "required": false;
+      "isSignal": true;
+    };
+    "emptyText": {
+      "alias": "emptyText";
+      "required": false;
+      "isSignal": true;
+    };
+    "invalidText": {
+      "alias": "invalidText";
+      "required": false;
+      "isSignal": true;
+    };
+    "removeLabel": {
+      "alias": "removeLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "filterRemove": "filterRemove";
+    "clearAll": "clearAll";
+  }, never, never, true, never>;
+}
+export type { VdActiveFilter };

package/types/vadem-ui-alert-dialog.d.ts

@@ -0,0 +1,87 @@
+import * as i0 from "@angular/core";
+type VdAlertDialogAction = () => void | Promise<void>;
+/** An explicit decision with application-owned work and a safe initial focus. */
+export declare class VdAlertDialog {
+  readonly open: import("@angular/core").ModelSignal<boolean>;
+  readonly title: import("@angular/core").InputSignal<string>;
+  readonly description: import("@angular/core").InputSignal<string>;
+  readonly action: import("@angular/core").InputSignal<VdAlertDialogAction>;
+  readonly variant: import("@angular/core").InputSignal<"primary" | "danger">;
+  readonly confirmLabel: import("@angular/core").InputSignal<string | undefined>;
+  readonly cancelLabel: import("@angular/core").InputSignal<string | undefined>;
+  readonly pendingText: import("@angular/core").InputSignal<string | undefined>;
+  readonly errorText: import("@angular/core").InputSignal<string | undefined>;
+  readonly confirmed: import("@angular/core").OutputEmitterRef<void>;
+  readonly canceled: import("@angular/core").OutputEmitterRef<void>;
+  readonly actionFailed: import("@angular/core").OutputEmitterRef<unknown>;
+  protected readonly t: import("@angular/core").Signal<Pick<{
+    confirmLabel: string;
+    cancelLabel: string;
+    pendingText: string;
+    errorText: string;
+  }, "confirmLabel" | "cancelLabel" | "pendingText" | "errorText">>;
+  protected readonly pending: import("@angular/core").WritableSignal<boolean>;
+  protected readonly failed: import("@angular/core").WritableSignal<boolean>;
+  protected readonly state: import("@angular/core").Signal<"closed" | "pending" | "error" | "idle">;
+  private generation;
+  private destroyed;
+  constructor();
+  protected escape(event: Event): void;
+  protected cancel(): void;
+  protected confirm(): Promise<void>;
+  private current;
+  static ɵfac: i0.ɵɵFactoryDeclaration<VdAlertDialog, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<VdAlertDialog, "vd-alert-dialog", never, {
+    "open": {
+      "alias": "open";
+      "required": false;
+      "isSignal": true;
+    };
+    "title": {
+      "alias": "title";
+      "required": true;
+      "isSignal": true;
+    };
+    "description": {
+      "alias": "description";
+      "required": true;
+      "isSignal": true;
+    };
+    "action": {
+      "alias": "action";
+      "required": true;
+      "isSignal": true;
+    };
+    "variant": {
+      "alias": "variant";
+      "required": false;
+      "isSignal": true;
+    };
+    "confirmLabel": {
+      "alias": "confirmLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "cancelLabel": {
+      "alias": "cancelLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "pendingText": {
+      "alias": "pendingText";
+      "required": false;
+      "isSignal": true;
+    };
+    "errorText": {
+      "alias": "errorText";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "open": "openChange";
+    "confirmed": "confirmed";
+    "canceled": "canceled";
+    "actionFailed": "actionFailed";
+  }, never, never, true, never>;
+}
+export type { VdAlertDialogAction };

package/types/vadem-ui-alert.d.ts

@@ -0,0 +1,64 @@
+import * as i0 from "@angular/core";
+type VdAlertVariant = 'neutral' | 'info' | 'success' | 'warning' | 'danger';
+/** `banner`: full-width strip at the top of a page or region (maintenance, cookies, updates). */
+type VdAlertLayout = 'inline' | 'banner';
+/**
+ * Inline message in the page flow (callout). Static by default; add `role="alert"` (urgent) or
+ * `role="status"` when it appears in response to an action. Spec: specs/alert.md
+ */
+export declare class VdAlert {
+  readonly variant: import("@angular/core").InputSignal<VdAlertVariant>;
+  /** Leading icon; defaults to the variant's icon. `null` hides it. */
+  readonly icon: import("@angular/core").InputSignal<"info" | "menu" | "search" | "activity" | "alert-circle" | "alert-triangle" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "arrow-up-down" | "bell" | "calendar" | "check" | "check-circle" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "copy" | "credit-card" | "download" | "external-link" | "eye" | "eye-off" | "file" | "folder" | "git-branch" | "globe" | "key" | "layout-dashboard" | "loader" | "lock" | "log-out" | "mail" | "minus" | "monitor" | "moon" | "more-horizontal" | "panel-left" | "pencil" | "plus" | "rocket" | "settings" | "shield" | "star" | "sun" | "trash" | "trending-down" | "trending-up" | "upload" | "user" | "users" | "x" | "x-circle" | null | undefined>;
+  readonly layout: import("@angular/core").InputSignal<VdAlertLayout>;
+  /** Adds a close button. The consumer removes the alert (and remembers the choice) on `dismiss`. */
+  readonly dismissible: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly dismissLabel: import("@angular/core").InputSignal<string | undefined>;
+  /** Emitted when the close button is activated; focus has already moved to a neighbour. */
+  readonly dismiss: import("@angular/core").OutputEmitterRef<void>;
+  /** Text inputs resolved against the active VD_LOCALE. */
+  protected readonly t: import("@angular/core").Signal<Pick<{
+    dismissLabel: string;
+  }, "dismissLabel">>;
+  private readonly el;
+  /** Removing a focused element drops focus to <body>; hand it to the next control first. */
+  protected onDismiss(): void;
+  protected readonly iconName: import("@angular/core").Signal<"info" | "menu" | "search" | "activity" | "alert-circle" | "alert-triangle" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "arrow-up-down" | "bell" | "calendar" | "check" | "check-circle" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "copy" | "credit-card" | "download" | "external-link" | "eye" | "eye-off" | "file" | "folder" | "git-branch" | "globe" | "key" | "layout-dashboard" | "loader" | "lock" | "log-out" | "mail" | "minus" | "monitor" | "moon" | "more-horizontal" | "panel-left" | "pencil" | "plus" | "rocket" | "settings" | "shield" | "star" | "sun" | "trash" | "trending-down" | "trending-up" | "upload" | "user" | "users" | "x" | "x-circle" | null>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<VdAlert, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<VdAlert, "[vdAlert]", never, {
+    "variant": {
+      "alias": "variant";
+      "required": false;
+      "isSignal": true;
+    };
+    "icon": {
+      "alias": "icon";
+      "required": false;
+      "isSignal": true;
+    };
+    "layout": {
+      "alias": "layout";
+      "required": false;
+      "isSignal": true;
+    };
+    "dismissible": {
+      "alias": "dismissible";
+      "required": false;
+      "isSignal": true;
+    };
+    "dismissLabel": {
+      "alias": "dismissLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "dismiss": "dismiss";
+  }, never, ["*", "[slot=end]"], true, never>;
+}
+/** Bold first line of an alert. */
+export declare class VdAlertTitle {
+  static ɵfac: i0.ɵɵFactoryDeclaration<VdAlertTitle, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<VdAlertTitle, "[vdAlertTitle]", never, {}, {}, never, never, true, never>;
+}
+export declare const VD_ALERT: readonly [typeof VdAlert, typeof VdAlertTitle];
+export type { VdAlertLayout, VdAlertVariant };

package/types/vadem-ui-autocomplete.d.ts

@@ -0,0 +1,156 @@
+import * as i0 from "@angular/core";
+import { VdInput } from "@vadem/ui/input";
+interface VdAutocompleteOption {
+  readonly id: string;
+  readonly label: string;
+  readonly description?: string;
+  readonly disabled?: boolean;
+}
+/** Active identity is valid only while the current result set permits selection. */
+declare function vdAutocompleteActive(options: readonly VdAutocompleteOption[], id: string | null): VdAutocompleteOption | undefined;
+declare function vdAutocompleteMove(options: readonly VdAutocompleteOption[], id: string | null, key: 'ArrowDown' | 'ArrowUp'): string | null;
+/** Physical viewport measurements in, logical inline offset out; no DOM dependency. */
+declare function vdAutocompletePlacement(anchor: {
+  top: number;
+  bottom: number;
+  left: number;
+  right: number;
+  width: number;
+}, viewport: {
+  width: number;
+  height: number;
+}, height: number, gap: number, rtl: boolean): {
+  width: number;
+  top: number;
+  inline: number;
+  available: number;
+};
+/** Internal connection: the native input keeps its existing forms accessor. */
+interface VdAutocompleteOwner {
+  readonly element: HTMLInputElement;
+  locked(): boolean;
+  accept(option: VdAutocompleteOption): void;
+}
+export declare class VdAutocomplete {
+  readonly options: import("@angular/core").InputSignal<readonly VdAutocompleteOption[]>;
+  /** Optional literal query for visual label matches; filtering remains application-owned. */
+  readonly highlightQuery: import("@angular/core").InputSignal<string>;
+  readonly loading: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly errorText: import("@angular/core").InputSignal<string>;
+  readonly label: import("@angular/core").InputSignal<string | undefined>;
+  readonly loadingText: import("@angular/core").InputSignal<string | undefined>;
+  readonly emptyText: import("@angular/core").InputSignal<string | undefined>;
+  readonly resultsText: import("@angular/core").InputSignal<((count: number) => string) | undefined>;
+  /** Text inputs resolved against the active VD_LOCALE. */
+  protected readonly t: import("@angular/core").Signal<Pick<{
+    label: string;
+    loadingText: string;
+    emptyText: string;
+    resultsText: (count: number) => string;
+  }, "label" | "loadingText" | "emptyText" | "resultsText">>;
+  readonly optionSelected: import("@angular/core").OutputEmitterRef<VdAutocompleteOption>;
+  readonly listboxId: string;
+  readonly expanded: import("@angular/core").WritableSignal<boolean>;
+  protected readonly fallback: import("@angular/core").WritableSignal<boolean>;
+  private readonly popup;
+  private readonly activeKey;
+  private owner;
+  private cleanup;
+  protected readonly availableOptions: import("@angular/core").Signal<readonly VdAutocompleteOption[]>;
+  readonly active: import("@angular/core").Signal<VdAutocompleteOption | undefined>;
+  readonly activeId: import("@angular/core").Signal<string | null>;
+  protected readonly message: import("@angular/core").Signal<string>;
+  constructor();
+  /** Browser-only connection, installed by the input's after-render hook. */
+  connect(owner: VdAutocompleteOwner): () => void;
+  open(): void;
+  close(): void;
+  resetActive(): void;
+  navigate(key: 'ArrowDown' | 'ArrowUp'): void;
+  choose(id: string): void;
+  protected hover(option: VdAutocompleteOption): void;
+  protected optionId(option: VdAutocompleteOption): string;
+  protected syncToggle(): void;
+  private position;
+  static ɵfac: i0.ɵɵFactoryDeclaration<VdAutocomplete, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<VdAutocomplete, "vd-autocomplete", never, {
+    "options": {
+      "alias": "options";
+      "required": false;
+      "isSignal": true;
+    };
+    "highlightQuery": {
+      "alias": "highlightQuery";
+      "required": false;
+      "isSignal": true;
+    };
+    "loading": {
+      "alias": "loading";
+      "required": false;
+      "isSignal": true;
+    };
+    "errorText": {
+      "alias": "errorText";
+      "required": false;
+      "isSignal": true;
+    };
+    "label": {
+      "alias": "label";
+      "required": false;
+      "isSignal": true;
+    };
+    "loadingText": {
+      "alias": "loadingText";
+      "required": false;
+      "isSignal": true;
+    };
+    "emptyText": {
+      "alias": "emptyText";
+      "required": false;
+      "isSignal": true;
+    };
+    "resultsText": {
+      "alias": "resultsText";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "optionSelected": "optionSelected";
+  }, never, never, true, never>;
+}
+/** Native text accessor and Field wiring; the panel only offers optional completions. */
+export declare class VdAutocompleteInput extends VdInput {
+  readonly vdAutocomplete: import("@angular/core").InputSignal<VdAutocomplete>;
+  readonly queryChange: import("@angular/core").OutputEmitterRef<string>;
+  readonly element: HTMLInputElement;
+  private readonly autocompleteNgControl;
+  private readonly autocompleteFormField;
+  private readonly autocompleteDestroyRef;
+  private composing;
+  private accepting;
+  private lastQuery;
+  private snapshot;
+  constructor();
+  ngOnInit(): void;
+  locked(): boolean;
+  accept(option: VdAutocompleteOption): void;
+  protected show(): void;
+  protected onInput(event: Event): void;
+  protected startComposition(): void;
+  protected endComposition(): void;
+  protected onKeydown(event: KeyboardEvent): void;
+  private remember;
+  private publish;
+  static ɵfac: i0.ɵɵFactoryDeclaration<VdAutocompleteInput, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<VdAutocompleteInput, "input[vdAutocomplete]", never, {
+    "vdAutocomplete": {
+      "alias": "vdAutocomplete";
+      "required": true;
+      "isSignal": true;
+    };
+  }, {
+    "queryChange": "queryChange";
+  }, never, never, true, never>;
+}
+export declare const VD_AUTOCOMPLETE: readonly [typeof VdAutocomplete, typeof VdAutocompleteInput];
+export type { VdAutocompleteOption };