@vectoriox/iox-builder 2.9.0 → 2.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectoriox/iox-builder",
-  "version": "2.9.0",
+  "version": "2.10.0",
   "peerDependencies": {
     "@angular/common": ">=20.0.0",
     "@angular/core": ">=20.0.0",

package/types/vectoriox-iox-builder.d.ts

@@ -212,7 +212,7 @@ interface InteractionPreset {
     name: string;
     interactions: IoxInteraction[];
 }
-type ElementState = 'hover' | 'active' | 'focus' | 'first-child' | 'last-child' | 'nth-child(odd)' | 'nth-child(even)' | 'parent-hover';
+type ElementState = 'hover' | 'active' | 'focus' | 'first-child' | 'last-child' | 'nth-child(odd)' | 'nth-child(even)' | 'parent-hover' | 'trigger-hover';
 /** Interaction pseudo-classes — compiled to .iox-node-{id}:state */
 declare const INTERACTION_STATES: ElementState[];
 /** Structural pseudo-classes — compiled to .iox-outer-{id}:state */
@@ -258,6 +258,14 @@ interface ComponentNode {
      * property map that is compiled to `.iox-node-{id}:hover { … }` etc.
      */
     stateStyles?: Partial<Record<ElementState, Record<string, any>>>;
+    /**
+     * For TARGETED_STATES (e.g. `trigger-hover`): the node id whose pseudo-class drives
+     * that state. Keyed by state so future targeted states (trigger-active/focus) slot in.
+     * The styled node restyles when this trigger node is hovered; the compiler scopes the
+     * `:has()` selector to the nearest common ancestor of the two. Only nodes with a `label`
+     * appear in the trigger picker.
+     */
+    stateTriggers?: Partial<Record<ElementState, string>>;
     /** User-defined display name for this node. Used in the layer tree and as an
      *  interaction target identifier. Only nodes with a label appear in the
      *  interaction target picker. */
@@ -877,11 +885,14 @@ declare class StyleRegistryService {
      * @param state   Optional pseudo-class state ('hover' | 'active' | 'focus' | …).
      *                When provided, compiles to `.iox-node-{id}:{state} { … }`.
      *                State rules are NOT partitioned into inner/outer.
-     * @param relativeToId  Ancestor css id, required for RELATIONAL states
-     *                (e.g. 'parent-hover'). Compiles to
-     *                `.iox-node-{relativeToId}:{base} .iox-node-{nodeId} { … }`.
+     * @param relativeToId  For RELATIONAL states (e.g. 'parent-hover') this is the ancestor
+     *                css id; compiles to `.iox-node-{relativeToId}:{base} .iox-node-{nodeId} { … }`.
+     *                For TARGETED states (e.g. 'trigger-hover') this is the SCOPE css id
+     *                (nearest common ancestor of the styled node + trigger).
+     * @param triggerId  For TARGETED states only: the css id of the trigger node whose
+     *                pseudo-class drives the state. Compiles a `:has()`-scoped selector.
      */
-    upsert(nodeId: string, styles: Record<string, any>, state?: ElementState, relativeToId?: string): void;
+    upsert(nodeId: string, styles: Record<string, any>, state?: ElementState, relativeToId?: string, triggerId?: string): void;
     /**
      * Write the org-level design token variables as a `:root { … }` block.
      * Token names should be CSS custom property names without the `--` prefix