@vectoriox/iox-ui 5.37.0 → 5.39.0

package/src/design-core/element-styles.ts

@@ -19,10 +19,13 @@ export enum ElementStyleState {
     Focus = 'focus',
     /** The page you're on (CC1 N2): compiles to `[aria-current="page"]`, never a pseudo-class. */
     Current = 'current',
+    /** A composite part that is ON — the active tab (CC4a "Active"): compiles to `[data-iox-on]`, the attribute every
+     *  composite runtime writes. */
+    On = 'on',
 }
 
 export const ELEMENT_STYLE_STATES: ReadonlyArray<ElementStyleState> =
-    [ElementStyleState.Hover, ElementStyleState.Active, ElementStyleState.Focus, ElementStyleState.Current];
+    [ElementStyleState.Hover, ElementStyleState.Active, ElementStyleState.Focus, ElementStyleState.Current, ElementStyleState.On];
 
 export interface ElementStyle {
     readonly id: string;
@@ -34,6 +37,7 @@ export interface ElementStyle {
     readonly active?: Readonly<Record<string, string>>;
     readonly focus?: Readonly<Record<string, string>>;
     readonly current?: Readonly<Record<string, string>>;
+    readonly on?: Readonly<Record<string, string>>;
 }
 
 export const ELEMENT_STYLES: ReadonlyArray<ElementStyle> = SPEC_ELEMENT_STYLES;
@@ -166,7 +170,7 @@ function ownedEntries(style: ElementStyle): Array<OwnedTrait & { value: string }
     return out;
 }
 
-/** Every trait the style owns with the value it writes — base first, then hover/active/focus/current. */
+/** Every trait the style owns with the value it writes — base first, then hover/active/focus/current/on. */
 export function ownedTraitsOf(style: ElementStyle): Array<OwnedTrait & { value: string }> {
     return ownedEntries(style);
 }
@@ -196,7 +200,7 @@ function writeEntries(target: ElementStyleTarget, style: ElementStyle, skip: Own
     return unknown;
 }
 
-/** Write the style's exact base map and its hover/active/focus/current maps into the target. */
+/** Write the style's exact base map and its hover/active/focus/current/on maps into the target. */
 export function applyElementStyle(target: ElementStyleTarget, id: string): ApplyElementStyleResult {
     const style = elementStyleById(id);
     if (!style) return { applied: false, unknownTraits: [] };
@@ -290,6 +294,33 @@ export function switchElementStyle(
     return { applied: true, kept };
 }
 
+/**
+ * Take a node OUT of its element style (a part a recipe wants unstyled — a migrated slider's bare chevrons, CC3):
+ * every owned trait still holding the style's value goes back to `baseline` (a state trait is removed); a trait the
+ * author changed is kept. The node then wears no style (no `iox-es` marker). Returns the kept traits.
+ */
+export function releaseElementStyle(
+    target: ElementStyleTarget,
+    fromId: string | null | undefined,
+    baseline: Readonly<Record<string, unknown>> = {},
+): OwnedTrait[] {
+    const kept: OwnedTrait[] = [];
+    const from = elementStyleById(fromId);
+    if (from) {
+        for (const status of ownedTraitStatus(target, from.id)) {
+            const ref: OwnedTrait = status.state ? { trait: status.trait, state: status.state } : { trait: status.trait };
+            if (status.status === OwnedTraitLink.Changed) {
+                if (status.actual !== undefined) kept.push(ref);
+                continue;
+            }
+            if (ref.state) deleteState(target, ref.state, ref.trait);
+            else writeBase(target, ref.trait, baseline[ref.trait]);
+        }
+    }
+    delete (target as { elementStyle?: string | null }).elementStyle;
+    return kept;
+}
+
 /**
  * The element-style MARKER (design-system §3b-bis, spec `elementStyleMarker`). A node that wears an
  * element style renders `iox-es iox-es-<id>` in BOTH renderers, through the one node-class helper