@hyalo/angular 0.1.0 → 0.3.1

package/types/hyalo-angular-code-block.d.ts

@@ -0,0 +1,46 @@
+import * as i0 from "@angular/core";
+export interface HyCodeSample {
+  readonly code: string;
+  readonly language: string;
+  readonly label: string;
+}
+export declare class HyCodeBlock {
+  readonly code: import("@angular/core").InputSignal<string>;
+  readonly language: import("@angular/core").InputSignal<string>;
+  readonly label: import("@angular/core").InputSignal<string>;
+  readonly copyable: import("@angular/core").InputSignal<boolean>;
+  readonly samples: import("@angular/core").InputSignal<readonly HyCodeSample[]>;
+  protected readonly selected: import("@angular/core").WritableSignal<number>;
+  protected readonly active: import("@angular/core").Signal<HyCodeSample>;
+  protected readonly highlighted: import("@angular/core").WritableSignal<string | null>;
+  private readonly ready;
+  constructor();
+  static ɵfac: i0.ɵɵFactoryDeclaration<HyCodeBlock, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<HyCodeBlock, "hy-code-block", never, {
+    "code": {
+      "alias": "code";
+      "required": true;
+      "isSignal": true;
+    };
+    "language": {
+      "alias": "language";
+      "required": false;
+      "isSignal": true;
+    };
+    "label": {
+      "alias": "label";
+      "required": false;
+      "isSignal": true;
+    };
+    "copyable": {
+      "alias": "copyable";
+      "required": false;
+      "isSignal": true;
+    };
+    "samples": {
+      "alias": "samples";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}

package/types/hyalo-angular-command.d.ts

@@ -0,0 +1,41 @@
+import { DialogRef } from "@angular/cdk/dialog";
+import * as i0 from "@angular/core";
+export interface HyCommandItem<T = unknown> {
+  readonly id: string;
+  readonly label: string;
+  readonly value: T;
+  readonly description?: string;
+  readonly keywords?: readonly string[];
+  readonly group?: string;
+  readonly shortcut?: string;
+  readonly disabled?: boolean;
+}
+export interface HyCommandConfig<T = unknown> {
+  readonly items: readonly HyCommandItem<T>[];
+  readonly label?: string;
+  readonly placeholder?: string;
+  readonly emptyLabel?: string;
+}
+export declare class HyCommandPanel {
+  protected readonly data: HyCommandConfig;
+  private readonly ref;
+  protected readonly id: string;
+  protected readonly query: import("@angular/core").WritableSignal<string>;
+  private readonly indexed;
+  protected readonly matches: import("@angular/core").Signal<HyCommandItem<unknown>[]>;
+  protected readonly results: import("@angular/core").Signal<HyCommandItem<unknown>[]>;
+  protected readonly selected: import("@angular/core").WritableSignal<HyCommandItem<unknown>[]>;
+  protected pick(values: readonly HyCommandItem[]): void;
+  protected search(event: Event): void;
+  protected choose(item: HyCommandItem): void;
+  protected dismiss(event: Event): void;
+  protected close(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<HyCommandPanel, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<HyCommandPanel, "hy-command-panel", never, {}, {}, never, never, true, never>;
+}
+export declare class HyCommand {
+  private readonly dialog;
+  open<T>(config: HyCommandConfig<T>): DialogRef<HyCommandItem<T>>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<HyCommand, never>;
+  static ɵprov: i0.ɵɵInjectableDeclaration<any>;
+}

package/types/hyalo-angular-copy.d.ts

@@ -0,0 +1,39 @@
+import * as i0 from "@angular/core";
+export declare class HyCopy {
+  readonly text: import("@angular/core").InputSignal<string>;
+  readonly label: import("@angular/core").InputSignal<string>;
+  readonly copiedLabel: import("@angular/core").InputSignal<string>;
+  readonly failedLabel: import("@angular/core").InputSignal<string>;
+  readonly completed: import("@angular/core").OutputEmitterRef<boolean>;
+  protected readonly status: import("@angular/core").WritableSignal<string>;
+  private readonly clipboard;
+  private timer?;
+  protected readonly copied: import("@angular/core").Signal<boolean>;
+  constructor();
+  copy(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<HyCopy, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<HyCopy, "hy-copy", never, {
+    "text": {
+      "alias": "text";
+      "required": true;
+      "isSignal": true;
+    };
+    "label": {
+      "alias": "label";
+      "required": false;
+      "isSignal": true;
+    };
+    "copiedLabel": {
+      "alias": "copiedLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "failedLabel": {
+      "alias": "failedLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "completed": "completed";
+  }, never, ["*"], true, never>;
+}

package/types/hyalo-angular-core.d.ts

@@ -0,0 +1,210 @@
+import * as i0 from "@angular/core";
+import { ElementRef, InjectionToken, Provider, Signal } from "@angular/core";
+/**
+ * How see-through a surface is.
+ *
+ * - `clear`: a light veil, most of the background shows through.
+ * - `frosted`: the default glass, blurred and saturated.
+ * - `tinted`: primary-coloured surface without live backdrop blur.
+ * - `solid`: opaque. Used automatically when the browser cannot blur, when
+ *   the user asks for reduced transparency, and on the low fidelity tier.
+ */
+export type HyMaterial = 'clear' | 'frosted' | 'tinted' | 'solid';
+/**
+ * How heavy a glass surface reads. Bigger surfaces should be thicker: more
+ * blur and a deeper shadow.
+ *
+ * - `thin`: chips and buttons.
+ * - `regular`: the default, for cards, bars, popovers and toasts.
+ * - `thick`: dialogs, drawers and sheets.
+ */
+export type HyThickness = 'thin' | 'regular' | 'thick';
+/** Control size. All sizes keep a touch target of at least 32px. */
+export type HySize = 'sm' | 'md' | 'lg';
+/**
+ * Colour role of a control. `secondary` uses --hy-secondary when the theme sets
+ * it and falls back to the primary colour when it does not.
+ */
+export type HyTone = 'primary' | 'secondary' | 'neutral' | 'success' | 'warning' | 'danger';
+/**
+ * How much visual effort the device can afford.
+ *
+ * - `high`: everything, including cursor physics and (from v0.2) WebGL.
+ * - `medium`: GSAP tilt and reveals, no WebGL.
+ * - `low`: CSS only. Glass turns solid and nothing waits on JavaScript to
+ *   become visible.
+ */
+export type HyFidelityTier = 'high' | 'medium' | 'low';
+/**
+ * The small part of GSAP that Hyalo uses. Declared here so the kit compiles
+ * without GSAP installed. The real `gsap` object satisfies it.
+ */
+export interface HyGsap {
+  to(target: Element | Element[], vars: Record<string, unknown>): unknown;
+  set(target: Element | Element[], vars: Record<string, unknown>): unknown;
+  quickTo(target: Element, property: string, vars?: Record<string, unknown>): (value: number) => unknown;
+  killTweensOf(target: Element | Element[]): void;
+}
+/** Returns GSAP, usually through a dynamic import so it lands in its own chunk. */
+export type HyGsapLoader = () => Promise<HyGsap>;
+/** Global defaults read by every Hyalo component. */
+export interface HyConfig {
+  readonly locale?: string;
+  /** Default material for glass surfaces. */
+  readonly material: HyMaterial;
+  /** Default control size. */
+  readonly size: HySize;
+  /** Default tone for buttons and other coloured controls. */
+  readonly tone: HyTone;
+  /**
+   * Forces a fidelity tier instead of detecting it. Handy for tests,
+   * screenshots and low-end kiosks.
+   */
+  readonly fidelity?: HyFidelityTier;
+  /**
+   * Loads GSAP on demand. Without it, Hyalo falls back to CSS transitions,
+   * so GSAP stays an optional dependency.
+   *
+   * ```ts
+   * provideHyalo({ gsap: () => import('gsap').then((m) => m.gsap) })
+   * ```
+   */
+  readonly gsap?: HyGsapLoader;
+  /**
+   * Maps a palette name to its stylesheet URL for HyPalette. Defaults to
+   * `palette-<name>.css`, which is what a non-injected `bundleName` entry
+   * in angular.json produces.
+   */
+  readonly paletteHref?: (name: string) => string;
+}
+/** Resolved Hyalo configuration. Use {@link provideHyalo} to change it. */
+export declare const HY_CONFIG: InjectionToken<HyConfig>;
+/**
+ * Sets Hyalo defaults. Works in `app.config.ts` and in a component's
+ * `providers`, where it merges with whatever the parent injector provides.
+ * That makes it easy to switch one section of a page to `solid`, for example.
+ */
+export declare function provideHyalo(config?: Partial<HyConfig>): Provider;
+/**
+ * Returns a unique id with the given prefix. The counter is per application,
+ * so the server and the client produce the same ids during hydration.
+ */
+export declare function injectId(prefix: string): string;
+interface NavigatorHints {
+  readonly deviceMemory?: number;
+  readonly hardwareConcurrency?: number;
+  readonly connection?: {
+    readonly saveData?: boolean;
+  };
+}
+export declare function detectFidelity(nav: NavigatorHints): HyFidelityTier;
+export declare class HyFidelity {
+  private readonly config;
+  private readonly document;
+  private readonly detectedTier;
+  private readonly selectedTier;
+  readonly detected: import("@angular/core").Signal<HyFidelityTier>;
+  readonly override: import("@angular/core").Signal<HyFidelityTier | null>;
+  readonly tier: import("@angular/core").Signal<HyFidelityTier>;
+  constructor();
+  setTier(tier: HyFidelityTier | null): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<HyFidelity, never>;
+  static ɵprov: i0.ɵɵInjectableDeclaration<any>;
+}
+/**
+ * Turns any element into a glass surface.
+ *
+ * ```html
+ * <aside hyMaterial="clear">...</aside>
+ * <section hyMaterial thickness="thick">...</section>
+ * ```
+ *
+ * The look lives in CSS (`.hy-glass[data-material]`), so effects stay cheap
+ * and themeable. On the low fidelity tier every material renders as `solid`,
+ * because backdrop blur is the most expensive thing on the page.
+ */
+export declare class HyMaterialDirective {
+  private readonly config;
+  private readonly appearance;
+  private readonly fidelity;
+  /** The material. An empty attribute uses the configured default. */
+  readonly material: import("@angular/core").InputSignal<"" | HyMaterial | undefined>;
+  /** How heavy the glass reads. Use `thick` for large surfaces. */
+  readonly thickness: import("@angular/core").InputSignal<HyThickness>;
+  /** The material that is actually rendered after fidelity is applied. */
+  readonly resolved: import("@angular/core").Signal<HyMaterial>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<HyMaterialDirective, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<HyMaterialDirective, "[hyMaterial]", never, {
+    "material": {
+      "alias": "hyMaterial";
+      "required": false;
+      "isSignal": true;
+    };
+    "thickness": {
+      "alias": "thickness";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
+/**
+ * Mirrors interaction state to data attributes so glass effects can stay in
+ * CSS: `data-hover`, `data-press` and `data-focus-visible`.
+ *
+ * Hover is only reported for mouse and pen, so touch screens never get a
+ * stuck hover state.
+ */
+export declare class HyInteractive {
+  private readonly host;
+  private readonly focusMonitor;
+  protected readonly hovered: import("@angular/core").WritableSignal<boolean>;
+  protected readonly pressed: import("@angular/core").WritableSignal<boolean>;
+  protected readonly focusVisible: import("@angular/core").WritableSignal<boolean>;
+  constructor();
+  protected onEnter(event: PointerEvent): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<HyInteractive, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<HyInteractive, "[hyInteractive]", never, {}, {}, never, never, true, never>;
+}
+/** True in the browser, false during server rendering. Call in an injection context. */
+declare function injectIsBrowser(): boolean;
+/** Reads a media query once. Always false on the server. */
+declare function matchesMedia(query: string): boolean;
+/**
+ * Keeps a sliding indicator under the selected item of a row by writing
+ * `--hy-ind-x` and `--hy-ind-size` on the row. The offset is physical (from
+ * the left edge) and the indicator is placed physically too, so the same
+ * numbers work in both directions.
+ *
+ * Returns a signal that turns true after the first placement, so CSS can
+ * enable the transition only from then on.
+ */
+declare function trackIndicator(container: Signal<ElementRef<HTMLElement> | undefined>, selected: () => HTMLElement | null): Signal<boolean>;
+/** Scoped preview override; null preserves each component's own material choice. */
+export declare class HyAppearance {
+  readonly material: import("@angular/core").WritableSignal<HyMaterial | null>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<HyAppearance, never>;
+  static ɵprov: i0.ɵɵInjectableDeclaration<any>;
+}
+export declare class HyLocale {
+  readonly locale: import("@angular/core").WritableSignal<string>;
+  setLocale(value: string): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<HyLocale, never>;
+  static ɵprov: i0.ɵɵInjectableDeclaration<any>;
+}
+export declare function normalizeDigits(value: string): string;
+/** Keeps identifier strings intact, including leading zeros; it does not parse numbers. */
+export declare class HyDigits {
+  readonly hyDigits: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  private readonly el;
+  protected normalize(event: Event): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<HyDigits, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<HyDigits, "input[hyDigits],textarea[hyDigits]", never, {
+    "hyDigits": {
+      "alias": "hyDigits";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
+export declare function normalizeSearch(value: string, locale?: string): string;
+export { injectIsBrowser as ɵinjectIsBrowser, matchesMedia as ɵmatchesMedia, trackIndicator as ɵtrackIndicator };

package/types/hyalo-angular-description-list.d.ts

@@ -0,0 +1,16 @@
+import * as i0 from "@angular/core";
+export interface HyDescription {
+  readonly term: string;
+  readonly detail: string;
+}
+export declare class HyDescriptionList {
+  readonly items: import("@angular/core").InputSignal<readonly HyDescription[]>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<HyDescriptionList, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<HyDescriptionList, "hy-description-list", never, {
+    "items": {
+      "alias": "items";
+      "required": true;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}

package/types/hyalo-angular-dialog.d.ts

@@ -2,8 +2,9 @@ import { DialogConfig, DialogRef } from "@angular/cdk/dialog";
 import * as i0 from "@angular/core";
 import { InjectionToken, TemplateRef } from "@angular/core";
 import { ComponentType } from "@angular/cdk/portal";
-import { HyMaterial, HyTone } from "@hyalo/angular";
+import { HyMaterial, HyTone } from "@hyalo/angular/core";
 import "@angular/cdk/overlay";
+import "@hyalo/angular/motion";
 /** Data passed to a dialog or drawer through `open(..., { data })`. */
 export declare const HY_DIALOG_DATA: InjectionToken<unknown>;
 /**

package/types/hyalo-angular-divider.d.ts

@@ -0,0 +1,12 @@
+import * as i0 from "@angular/core";
+export declare class HyDivider {
+  readonly orientation: import("@angular/core").InputSignal<"horizontal" | "vertical">;
+  static ɵfac: i0.ɵɵFactoryDeclaration<HyDivider, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<HyDivider, "hy-divider", never, {
+    "orientation": {
+      "alias": "orientation";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}

package/types/hyalo-angular-empty-state.d.ts

@@ -0,0 +1,30 @@
+import * as i0 from "@angular/core";
+export declare class HyEmptyState {
+  readonly heading: import("@angular/core").InputSignal<string>;
+  readonly headingLevel: import("@angular/core").InputSignal<2 | 3 | 4 | 5 | 6>;
+  readonly description: import("@angular/core").InputSignal<string>;
+  readonly icon: import("@angular/core").InputSignal<string | undefined>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<HyEmptyState, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<HyEmptyState, "hy-empty-state", never, {
+    "heading": {
+      "alias": "heading";
+      "required": true;
+      "isSignal": true;
+    };
+    "headingLevel": {
+      "alias": "headingLevel";
+      "required": false;
+      "isSignal": true;
+    };
+    "description": {
+      "alias": "description";
+      "required": false;
+      "isSignal": true;
+    };
+    "icon": {
+      "alias": "icon";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["*"], true, never>;
+}

package/types/hyalo-angular-field.d.ts

@@ -1,6 +1,6 @@
 import * as i0 from "@angular/core";
-import { InjectionToken, Signal } from "@angular/core";
-import { HySize } from "@hyalo/angular";
+import { DoCheck, InjectionToken, Signal } from "@angular/core";
+import { HySize } from "@hyalo/angular/core";
 /**
  * What a control tells the field around it. Implemented by `hyInput` and
  * `hy-select`. Custom controls can implement it too, so `hy-field` can
@@ -43,9 +43,16 @@ export declare const HY_FIELD: InjectionToken<HyFieldContext>;
  * The element stays native, so Signal Forms, `ngModel`, autofill and
  * mobile keyboards all work as usual.
  */
-export declare class HyInput implements HyFieldControl {
+export declare class HyInput implements HyFieldControl, DoCheck {
   protected readonly field: import("@hyalo/angular/field").HyFieldContext | null;
   private readonly formField;
+  private readonly ngControl;
+  private readonly destroy;
+  private readonly revision;
+  private control;
+  private subscription?;
+  constructor();
+  ngDoCheck(): void;
   readonly labelable = true;
   /** The element's own static `id` attribute, or a generated one. */
   readonly id: import("@angular/core").Signal<string>;
@@ -54,7 +61,6 @@ export declare class HyInput implements HyFieldControl {
   protected readonly showsError: import("@angular/core").Signal<boolean>;
   readonly required: import("@angular/core").Signal<boolean>;
   readonly disabled: import("@angular/core").Signal<boolean>;
-  constructor();
   static ɵfac: i0.ɵɵFactoryDeclaration<HyInput, never>;
   static ɵdir: i0.ɵɵDirectiveDeclaration<HyInput, "input[hyInput], textarea[hyInput]", never, {}, {}, never, never, true, never>;
 }

package/types/hyalo-angular-filter.d.ts

@@ -0,0 +1,122 @@
+import * as i0 from "@angular/core";
+import { TemplateRef } from "@angular/core";
+import { HySelectOption } from "@hyalo/angular/select";
+export type HyFilterScalar = string | number | boolean;
+export type HyDatePreset = '24H' | '7D' | '30D' | '1Y';
+export type HyDateRangeValue = {
+  readonly kind: 'preset';
+  readonly preset: HyDatePreset;
+  readonly timeZone: string;
+} | {
+  readonly kind: 'absolute';
+  readonly start: string;
+  readonly end: string;
+  readonly timeZone: string;
+};
+export type HyFilterRule = {
+  readonly operator: 'eq';
+  readonly value: HyFilterScalar;
+} | {
+  readonly operator: 'in';
+  readonly value: readonly HyFilterScalar[];
+} | {
+  readonly operator: 'contains';
+  readonly value: string;
+} | {
+  readonly operator: 'between';
+  readonly value: readonly [number, number] | HyDateRangeValue;
+};
+export type HyFilterClause<S> = { [K in keyof S]: {
+  readonly id: string;
+  readonly field: K;
+} & S[K]; }[keyof S];
+export type HyFilterToken = {
+  readonly id: string;
+  readonly field: string;
+} & HyFilterRule;
+export interface HyFilterCodec<C extends HyFilterToken> {
+  readonly accepts: (value: unknown) => value is C;
+}
+export declare function encodeFilters<C extends HyFilterToken>(clauses: readonly C[]): string;
+export declare function decodeFilters<C extends HyFilterToken>(text: string, codec: HyFilterCodec<C>): readonly C[];
+export declare function isFilterToken(value: unknown): value is HyFilterToken;
+/** Presets are rolling elapsed intervals; both editors use start-inclusive/end-exclusive instants. */
+export declare function resolveDateRange(value: HyDateRangeValue, now: Date): {
+  readonly start: string;
+  readonly end: string;
+};
+export interface HyFilterEditorContext<C> {
+  readonly $implicit: C;
+  readonly update: (clause: C) => void;
+}
+export interface HyFilterField<C extends HyFilterToken> {
+  readonly field: C['field'];
+  readonly label: string;
+  readonly options?: readonly HySelectOption<string>[];
+  readonly create: (id: string, value: string) => C | null;
+  readonly editor?: TemplateRef<HyFilterEditorContext<C>>;
+  readonly format?: (clause: C) => string;
+}
+export declare class HyFilterBar<C extends HyFilterToken> {
+  readonly fields: import("@angular/core").InputSignal<readonly HyFilterField<C>[]>;
+  readonly clauses: import("@angular/core").ModelSignal<readonly C[]>;
+  readonly label: import("@angular/core").InputSignal<string>;
+  readonly clearLabel: import("@angular/core").InputSignal<string>;
+  readonly removeLabel: import("@angular/core").InputSignal<string>;
+  readonly anyLabel: import("@angular/core").InputSignal<string>;
+  readonly activeLabel: import("@angular/core").InputSignal<string>;
+  protected readonly view: import("@angular/core").Signal<{
+    clause: C;
+    label: string;
+    text: string;
+    editor: TemplateRef<HyFilterEditorContext<C>> | undefined;
+    context: {
+      $implicit: C;
+      update: (next: C) => void;
+    };
+  }[]>;
+  protected raw(field: string): string;
+  protected change(field: HyFilterField<C>, raw: string): void;
+  protected remove(id: string): void;
+  private update;
+  static ɵfac: i0.ɵɵFactoryDeclaration<HyFilterBar<any>, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<HyFilterBar<any>, "hy-filter-bar", never, {
+    "fields": {
+      "alias": "fields";
+      "required": true;
+      "isSignal": true;
+    };
+    "clauses": {
+      "alias": "clauses";
+      "required": false;
+      "isSignal": true;
+    };
+    "label": {
+      "alias": "label";
+      "required": false;
+      "isSignal": true;
+    };
+    "clearLabel": {
+      "alias": "clearLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "removeLabel": {
+      "alias": "removeLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "anyLabel": {
+      "alias": "anyLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "activeLabel": {
+      "alias": "activeLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "clauses": "clausesChange";
+  }, never, ["*"], true, never>;
+}

package/types/hyalo-angular-hotspot.d.ts

@@ -0,0 +1,70 @@
+import { HyMotion } from "@hyalo/angular/motion";
+import { HyPlacement } from "@hyalo/angular/overlay";
+import * as i0 from "@angular/core";
+export type HyHotspotMode = 'label' | 'pin';
+export interface HyHotspotPosition {
+  readonly x: number;
+  readonly y: number;
+  readonly visible?: boolean;
+}
+/** Pass screen coordinates from your scene's projection. Position is relative to its frame. */
+export declare class HyHotspot {
+  protected readonly motion: HyMotion;
+  readonly label: import("@angular/core").InputSignal<string>;
+  readonly position: import("@angular/core").InputSignal<HyHotspotPosition>;
+  readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Optional detail panel. Without a description this stays a plain action button. */
+  readonly description: import("@angular/core").InputSignal<string>;
+  readonly mode: import("@angular/core").InputSignal<HyHotspotMode>;
+  readonly open: import("@angular/core").ModelSignal<boolean>;
+  readonly placement: import("@angular/core").InputSignal<HyPlacement>;
+  readonly closeLabel: import("@angular/core").InputSignal<string>;
+  readonly activated: import("@angular/core").OutputEmitterRef<void>;
+  protected readonly visible: import("@angular/core").Signal<boolean>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<HyHotspot, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<HyHotspot, "hy-hotspot", never, {
+    "label": {
+      "alias": "label";
+      "required": true;
+      "isSignal": true;
+    };
+    "position": {
+      "alias": "position";
+      "required": true;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+    "description": {
+      "alias": "description";
+      "required": false;
+      "isSignal": true;
+    };
+    "mode": {
+      "alias": "mode";
+      "required": false;
+      "isSignal": true;
+    };
+    "open": {
+      "alias": "open";
+      "required": false;
+      "isSignal": true;
+    };
+    "placement": {
+      "alias": "placement";
+      "required": false;
+      "isSignal": true;
+    };
+    "closeLabel": {
+      "alias": "closeLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "open": "openChange";
+    "activated": "activated";
+  }, never, never, true, never>;
+}