@vectoriox/iox-builder 1.3.0 → 1.4.0

package/package.json

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

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

@@ -118,6 +118,8 @@ interface StylePreset {
     /** Flat CSS property map — same shape as IoxLayoutNode.styleProps. */
     styleProps: Record<string, any>;
 }
+type ElementState = 'hover' | 'active' | 'focus';
+declare const SUPPORTED_STATES: ElementState[];
 interface ComponentNode {
     id?: string;
     /**
@@ -144,6 +146,12 @@ interface ComponentNode {
      * Absent when no preset is applied (full styles stored in styleTraits instead).
      */
     styleOverrides?: Record<string, any>;
+    /**
+     * Per-state style overrides. Only stores properties that differ from the base
+     * style — same sparse pattern as styleOverrides. Each key maps to a flat CSS
+     * property map that is compiled to `.iox-node-{id}:hover { … }` etc.
+     */
+    stateStyles?: Partial<Record<ElementState, Record<string, any>>>;
 }
 /**
  * Build a full StyleTraitGroup[] schema populated with values from a flat
@@ -780,6 +788,12 @@ declare class BuilderComponent implements OnInit, AfterViewInit, OnChanges, OnDe
  * space — it does not push sibling elements. Applying margin to the host element
  * (which IS the flex/block child in the parent container) makes it work correctly.
  *
+ * State styles (hover/active/focus) are stored under key `${nodeId}:${state}`
+ * and compiled to `.iox-node-{id}:hover { … }` selectors.
+ *
+ * Design token variables are stored under the reserved key `__tokens__` and
+ * compiled to a `:root { … }` block prepended to all other rules.
+ *
  * Scoped to PageUiComponent.providers[] — one stylesheet per builder instance.
  */
 declare class StyleRegistryService {
@@ -789,7 +803,23 @@ declare class StyleRegistryService {
     /** Properties that must live on the wrapper element to affect the parent layout. */
     private static readonly OUTER_PROPS;
     init(): void;
-    upsert(nodeId: string, styles: Record<string, any>): void;
+    /**
+     * Write or update the base styles for a node, or a pseudo-class state override.
+     *
+     * @param nodeId  The node's CSS id (used in `.iox-node-{nodeId}`)
+     * @param styles  Flat CSS property map (camelCase keys)
+     * @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.
+     */
+    upsert(nodeId: string, styles: Record<string, any>, state?: 'hover' | 'active' | 'focus'): void;
+    /**
+     * Write the org-level design token variables as a `:root { … }` block.
+     * Token names should be CSS custom property names without the `--` prefix
+     * (e.g., `{ 'iox-primary-color': '#cb9090' }`).
+     * Pass an empty object to clear all tokens.
+     */
+    upsertTokens(tokens: Record<string, string>): void;
     remove(nodeId: string): void;
     destroy(): void;
     private compile;
@@ -1339,5 +1369,5 @@ declare class TextBlockComponentConfig extends ComponentConfig {
     constructor();
 }
 
-export { ACTION_TYPE_OPTIONS, BuilderButtonBlockComponent, BuilderButtonComponentConfig, BuilderComponent, BuilderContainerComponent, BuilderContainerComponentConfig, BuilderDividerComponentConfig, BuilderHeadingComponentConfig, BuilderIconComponentConfig, BuilderImageComponentConfig, BuilderLinkComponentConfig, BuilderLinkedContainerComponent, BuilderLinkedContainerConfig, BuilderMode, BuilderRepeaterComponent, BuilderSpacerComponentConfig, ButtonBlockComponentConfig, CardComponentConfig, ComponentConfig, ComponentRegistryService, DEVICE_OPTIONS, DataSourceRegistryService, DeviceMode, DragEngineService, EASING_OPTIONS, GroupStyleConfig, IOX_CONTENT_SERVICE, IOX_FONT_MANAGER, InteractionEngineService, InteractionsPanelComponent, IoxBuilderModule, IoxDraggableDirective, IoxDropzoneDirective, LayerTreeComponent, NodeAction, OverlayComponent, OverlayService, PanelChildComponent, PanelComponent, PanelEventService, PanelEventTypes, PanelTypes, PresetRegistryService, ROUTE_ANIMATION_OPTIONS, RenderDirective, RepeaterComponentConfig, SCREEN_WIDTH_OPTIONS, SectionComponent, SectionComponentConfig, StyleCategory, StyleRegistryService, TraitConfig as StyleTraitConfig, TRIGGER_OPTIONS, TextBlockComponentConfig, ToolbarAction, ToolbarComponent, TraitConfig, TraitInputType, UNITS_ALL, UNITS_DEG, UNITS_FIXED, UNITS_NO_VW, ViewportService, ZOOM_OPTIONS, buildPresetStyleTraits, defaultPageSettings, generateNodeId, resolveTraitControllerType, resolveTraitOptions };
-export type { ComponentNode, ComponentTrait, DeviceOption, DragPayload, DsFilterByQueryParam, DsFilterByRouteParam, InteractionAction, InteractionActionType, InteractionTrigger, IoxBinding, IoxContentService, IoxDataSource, IoxDropEvent, IoxFontManager, IoxInteraction, NodeRef, OverlayBoxModel, OverlayBoxSpacing, OverlayEntry, PageRouteAnimationSettings, PageScrollSettings, PageSettings, PageStyleSettings, PanelEvent, QuadSizeSegment, RouteAnimationPreset, ScreenWidthOption, StylePreset, StyleTrait, StyleTraitGroup, TraitOptionMap, TraitSelectOption, TraitShowCondition, ViewportState, ZoomOption };
+export { ACTION_TYPE_OPTIONS, BuilderButtonBlockComponent, BuilderButtonComponentConfig, BuilderComponent, BuilderContainerComponent, BuilderContainerComponentConfig, BuilderDividerComponentConfig, BuilderHeadingComponentConfig, BuilderIconComponentConfig, BuilderImageComponentConfig, BuilderLinkComponentConfig, BuilderLinkedContainerComponent, BuilderLinkedContainerConfig, BuilderMode, BuilderRepeaterComponent, BuilderSpacerComponentConfig, ButtonBlockComponentConfig, CardComponentConfig, ComponentConfig, ComponentRegistryService, DEVICE_OPTIONS, DataSourceRegistryService, DeviceMode, DragEngineService, EASING_OPTIONS, GroupStyleConfig, IOX_CONTENT_SERVICE, IOX_FONT_MANAGER, InteractionEngineService, InteractionsPanelComponent, IoxBuilderModule, IoxDraggableDirective, IoxDropzoneDirective, LayerTreeComponent, NodeAction, OverlayComponent, OverlayService, PanelChildComponent, PanelComponent, PanelEventService, PanelEventTypes, PanelTypes, PresetRegistryService, ROUTE_ANIMATION_OPTIONS, RenderDirective, RepeaterComponentConfig, SCREEN_WIDTH_OPTIONS, SUPPORTED_STATES, SectionComponent, SectionComponentConfig, StyleCategory, StyleRegistryService, TraitConfig as StyleTraitConfig, TRIGGER_OPTIONS, TextBlockComponentConfig, ToolbarAction, ToolbarComponent, TraitConfig, TraitInputType, UNITS_ALL, UNITS_DEG, UNITS_FIXED, UNITS_NO_VW, ViewportService, ZOOM_OPTIONS, buildPresetStyleTraits, defaultPageSettings, generateNodeId, resolveTraitControllerType, resolveTraitOptions };
+export type { ComponentNode, ComponentTrait, DeviceOption, DragPayload, DsFilterByQueryParam, DsFilterByRouteParam, ElementState, InteractionAction, InteractionActionType, InteractionTrigger, IoxBinding, IoxContentService, IoxDataSource, IoxDropEvent, IoxFontManager, IoxInteraction, NodeRef, OverlayBoxModel, OverlayBoxSpacing, OverlayEntry, PageRouteAnimationSettings, PageScrollSettings, PageSettings, PageStyleSettings, PanelEvent, QuadSizeSegment, RouteAnimationPreset, ScreenWidthOption, StylePreset, StyleTrait, StyleTraitGroup, TraitOptionMap, TraitSelectOption, TraitShowCondition, ViewportState, ZoomOption };