@vectoriox/iox-builder 2.8.1 → 2.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectoriox/iox-builder",
-  "version": "2.8.1",
+  "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
@@ -1285,7 +1296,7 @@ declare class BuilderComponent implements OnInit, AfterViewInit, OnChanges, OnDe
     scrollThumbHeight: number;
     isScrollbarVisible: boolean;
     scrollbarTranslate: number;
-    activeSidebar: 'components' | 'tree' | 'tokens';
+    activeSidebar: 'components' | 'tree' | 'tokens' | 'pages';
     showSaveBlockDialog: boolean;
     saveBlockName: string;
     private pendingBlockNode;
@@ -1421,7 +1432,7 @@ declare class BuilderComponent implements OnInit, AfterViewInit, OnChanges, OnDe
     private readNodeDisplay;
     private handlePanelEvents;
     static ɵfac: i0.ɵɵFactoryDeclaration<BuilderComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<BuilderComponent, "app-builder", never, { "layout": { "alias": "layout"; "required": false; }; "dataSources": { "alias": "dataSources"; "required": false; }; "orgId": { "alias": "orgId"; "required": false; }; "routeParams": { "alias": "routeParams"; "required": false; }; "pageName": { "alias": "pageName"; "required": false; }; "isSaving": { "alias": "isSaving"; "required": false; }; "pageStatus": { "alias": "pageStatus"; "required": false; }; "pageSettings": { "alias": "pageSettings"; "required": false; }; "globalElements": { "alias": "globalElements"; "required": false; }; "canUndo": { "alias": "canUndo"; "required": false; }; "canRedo": { "alias": "canRedo"; "required": false; }; "moveableMode": { "alias": "moveableMode"; "required": false; }; }, { "save": "save"; "undo": "undo"; "redo": "redo"; "back": "back"; "preview": "preview"; "publishToggle": "publishToggle"; "pageSettingsChange": "pageSettingsChange"; "applyAnimationToAll": "applyAnimationToAll"; "saveBlock": "saveBlock"; "globalElementsChange": "globalElementsChange"; }, never, ["[builderComponents]", "[builderTokens]", "[builderPanel]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BuilderComponent, "app-builder", never, { "layout": { "alias": "layout"; "required": false; }; "dataSources": { "alias": "dataSources"; "required": false; }; "orgId": { "alias": "orgId"; "required": false; }; "routeParams": { "alias": "routeParams"; "required": false; }; "pageName": { "alias": "pageName"; "required": false; }; "isSaving": { "alias": "isSaving"; "required": false; }; "pageStatus": { "alias": "pageStatus"; "required": false; }; "pageSettings": { "alias": "pageSettings"; "required": false; }; "globalElements": { "alias": "globalElements"; "required": false; }; "canUndo": { "alias": "canUndo"; "required": false; }; "canRedo": { "alias": "canRedo"; "required": false; }; "moveableMode": { "alias": "moveableMode"; "required": false; }; }, { "save": "save"; "undo": "undo"; "redo": "redo"; "back": "back"; "preview": "preview"; "publishToggle": "publishToggle"; "pageSettingsChange": "pageSettingsChange"; "applyAnimationToAll": "applyAnimationToAll"; "saveBlock": "saveBlock"; "globalElementsChange": "globalElementsChange"; }, never, ["[builderPages]", "[builderComponents]", "[builderTokens]", "[builderPanel]"], false, never>;
 }
 
 /**