{
  "_copyright": "Copyright (c) 2026, Salesforce, Inc., All rights reserved. For full license text, see the LICENSE.txt file",
  "$schema": "https://slds.lightningdesignsystem.com/schemas/uif-system.v1.json",
  "apiVersion": "1.0.0",
  "name": "Expression",
  "description": "Builder UI for composing conditional logic. The expression form variant lets users assemble rows of resource/operator/value conditions with optional groups, custom logic, or a freeform formula RTE. The filters variant renders the same logical concept as a compact list of tappable filter chips, optionally split into nested condition groups.",
  "extensions": {
    "com.salesforce-ux": {
      "genReady": false
    }
  },
  "cssSource": "./expression.css",
  "styleApi": {
    "status": "stable",
    "ready": true
  },
  "structure": {
    "name": "expression",
    "restrict": [
      "div"
    ],
    "description": "Root container for the expression builder. Switches between the full expression form layout and the compact filters layout via the rootStyle variant.",
    "attributes": {
      "static": {
        "class": "slds-expression"
      }
    },
    "variants": [
      {
        "name": "rootStyle",
        "description": "Mutually exclusive top-level layout. `expression` renders the full row-based builder with fieldset legends; `filters` renders the compact filter-chip list used in narrow surfaces.",
        "default": "expression",
        "options": [
          {
            "value": "expression",
            "class": "slds-expression",
            "description": "Full expression builder layout with rows, legends, groups, custom logic and optional formula RTE."
          },
          {
            "value": "filters",
            "class": "slds-filters",
            "description": "Compact filter-chip list used in narrow surfaces such as panels."
          }
        ]
      }
    ],
    "children": [
      {
        "name": "title",
        "restrict": [
          "h1",
          "h2",
          "h3"
        ],
        "description": "Optional section title rendered above the form (expression style) or as a small heading (filters style).",
        "attributes": {
          "static": {
            "class": "slds-expression__title"
          }
        }
      },
      {
        "name": "options",
        "restrict": [
          "div"
        ],
        "description": "Container for the top-level `Take Action When` combobox. In the filters style this wrapper is replaced by a plain spacing wrapper (see optionsWrapper).",
        "attributes": {
          "static": {
            "class": "slds-expression__options"
          }
        }
      },
      {
        "name": "optionsWrapper",
        "restrict": [
          "div"
        ],
        "description": "Filters-style spacing wrapper around the top-level combobox. Only rendered when rootStyle is `filters`.",
        "renderWhen": {
          "prop": "rootStyle",
          "eq": "filters"
        },
        "attributes": {
          "static": {
            "class": "slds-m-vertical_small"
          }
        }
      },
      {
        "name": "customLogic",
        "restrict": [
          "div"
        ],
        "description": "Free-text input wrapper that captures custom boolean logic (e.g. `1 OR 2`). Rendered when the user selects the Custom Logic option.",
        "attributes": {
          "static": {
            "class": "slds-expression__custom-logic"
          }
        }
      },
      {
        "name": "rows",
        "restrict": [
          "ul"
        ],
        "description": "Expression-style list of condition rows. Each child is a row or an inline condition group.",
        "renderWhen": {
          "prop": "rootStyle",
          "eq": "expression"
        },
        "children": [
          {
            "name": "row",
            "restrict": [
              "li"
            ],
            "description": "A single condition row containing a fieldset with legend and a grid of comboboxes plus the delete-row button.",
            "repeats": true,
            "attributes": {
              "static": {
                "class": "slds-expression__row"
              }
            },
            "modifiers": [
              {
                "name": "inGroup",
                "attribute": "class",
                "value": "slds-expression__row_group",
                "description": "Indents the row so it visually sits inside a parent expression group."
              }
            ],
            "children": [
              {
                "name": "rowFieldset",
                "restrict": [
                  "fieldset"
                ],
                "description": "Groups the legend and the row controls for assistive tech.",
                "children": [
                  {
                    "name": "legend",
                    "restrict": [
                      "legend"
                    ],
                    "description": "Row legend, typically containing an assistive-text condition number plus optional visible `AND` / index label.",
                    "attributes": {
                      "static": {
                        "class": "slds-expression__legend"
                      }
                    },
                    "modifiers": [
                      {
                        "name": "group",
                        "attribute": "class",
                        "value": "slds-expression__legend_group",
                        "description": "Adjusts legend margin when the row appears inside a condition group."
                      }
                    ],
                    "children": [
                      {
                        "name": "legendAssistiveText",
                        "restrict": [
                          "span"
                        ],
                        "description": "Visually-hidden label naming the condition (e.g. `Condition 1`).",
                        "attributes": {
                          "static": {
                            "class": "slds-assistive-text"
                          }
                        }
                      }
                    ]
                  },
                  {
                    "name": "rowGrid",
                    "restrict": [
                      "div"
                    ],
                    "description": "Grid layout that lays out the resource, operator, value and delete-button form-elements.",
                    "attributes": {
                      "static": {
                        "class": "slds-grid slds-gutters_xx-small"
                      }
                    },
                    "children": [
                      {
                        "name": "rowCol",
                        "restrict": [
                          "div"
                        ],
                        "description": "Grid column hosting a single form-element (resource/operator/value or delete button). The narrow operator/delete columns add `slds-grow-none`.",
                        "repeats": true,
                        "attributes": {
                          "static": {
                            "class": "slds-col"
                          }
                        },
                        "modifiers": [
                          {
                            "name": "growNone",
                            "attribute": "class",
                            "value": "slds-grow-none",
                            "description": "Prevents the column from growing. Applied to the Operator and Delete columns."
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          },
          {
            "name": "group",
            "restrict": [
              "li"
            ],
            "description": "Inline condition group: a styled card containing its own options combobox, nested rows, and an `Add Condition` button row.",
            "repeats": true,
            "attributes": {
              "static": {
                "class": "slds-expression__group"
              }
            }
          }
        ]
      },
      {
        "name": "formulaRte",
        "restrict": [
          "div"
        ],
        "description": "Formula-variant rich-text-editor wrapper. Rendered only for the Formula style of the expression builder.",
        "attributes": {
          "static": {
            "class": "slds-expression_formula__rte"
          }
        }
      },
      {
        "name": "buttons",
        "restrict": [
          "div"
        ],
        "description": "Action-buttons row at the bottom of the expression layout. Hosts `Add Condition` and `Add Group` neutral buttons.",
        "renderWhen": {
          "prop": "rootStyle",
          "eq": "expression"
        },
        "attributes": {
          "static": {
            "class": "slds-expression__buttons"
          }
        },
        "children": [
          {
            "name": "actionButton",
            "restrict": [
              "button"
            ],
            "description": "Neutral action button (e.g. `Add Condition`, `Add Group`, `Check Syntax`).",
            "repeats": true,
            "attributes": {
              "static": {
                "class": "slds-button slds-button_neutral"
              }
            },
            "children": [
              {
                "name": "actionButtonIcon",
                "description": "Leading add-glyph rendered inside the action button.",
                "attributes": {
                  "static": {
                    "class": "slds-button__icon slds-button__icon_left"
                  }
                },
                "component": "PrimitiveIcon"
              }
            ]
          }
        ]
      },
      {
        "name": "filtersList",
        "restrict": [
          "ol",
          "ul"
        ],
        "description": "Filters-style ordered list of filter chips and optional nested filter groups.",
        "renderWhen": {
          "prop": "rootStyle",
          "eq": "filters"
        },
        "attributes": {
          "static": {
            "class": "slds-list_vertical slds-list_vertical-space"
          }
        },
        "children": [
          {
            "name": "filterListItem",
            "restrict": [
              "li"
            ],
            "description": "List wrapper around a single filter chip or filter group.",
            "repeats": true,
            "attributes": {
              "static": {
                "class": "slds-item slds-hint-parent"
              }
            },
            "children": [
              {
                "name": "filterItem",
                "restrict": [
                  "div"
                ],
                "description": "Single filter chip: a tappable button summarising the condition plus a delete-icon button. Carries hover/error/locked/new state classes.",
                "attributes": {
                  "static": {
                    "class": "slds-filters__item slds-grid slds-grid_vertical-align-center"
                  }
                },
                "children": [
                  {
                    "name": "filterEditButton",
                    "restrict": [
                      "button"
                    ],
                    "description": "Reset-styled, full-width button that opens the filter editor when clicked.",
                    "attributes": {
                      "static": {
                        "class": "slds-button_reset slds-grow slds-has-blur-focus"
                      }
                    },
                    "children": [
                      {
                        "name": "filterEditAssistiveText",
                        "restrict": [
                          "span"
                        ],
                        "description": "Visually-hidden prefix announcing the edit action (e.g. `Edit filter:`).",
                        "attributes": {
                          "static": {
                            "class": "slds-assistive-text"
                          }
                        }
                      },
                      {
                        "name": "filterLabel",
                        "restrict": [
                          "span"
                        ],
                        "description": "Visible label for the filter property (e.g. `Amount`).",
                        "attributes": {
                          "static": {
                            "class": "slds-show slds-text-body_small"
                          }
                        }
                      },
                      {
                        "name": "filterValue",
                        "restrict": [
                          "span"
                        ],
                        "description": "Visible operator-plus-value summary (e.g. `greater than \"1000\"`).",
                        "attributes": {
                          "static": {
                            "class": "slds-show"
                          }
                        }
                      }
                    ]
                  },
                  {
                    "name": "filterDeleteButton",
                    "restrict": [
                      "button"
                    ],
                    "description": "Small icon button that removes the filter chip.",
                    "attributes": {
                      "static": {
                        "class": "slds-button slds-button_icon slds-button_icon-small"
                      }
                    },
                    "children": [
                      {
                        "name": "filterDeleteIcon",
                        "description": "Delete glyph inside the filter-chip remove button. Uses the hint treatment so the icon only colours up on hover/focus.",
                        "attributes": {
                          "static": {
                            "class": "slds-button__icon slds-button__icon_hint"
                          }
                        },
                        "component": "PrimitiveIcon"
                      },
                      {
                        "name": "filterDeleteAssistiveText",
                        "restrict": [
                          "span"
                        ],
                        "description": "Visually-hidden full description of the remove action.",
                        "attributes": {
                          "static": {
                            "class": "slds-assistive-text"
                          }
                        }
                      }
                    ]
                  }
                ]
              },
              {
                "name": "filterGroup",
                "restrict": [
                  "div"
                ],
                "description": "Filters-style condition group: a card containing a spread header, its own options combobox, nested filter items and an add-condition button.",
                "attributes": {
                  "static": {
                    "class": "slds-filters__group"
                  }
                }
              }
            ]
          }
        ]
      },
      {
        "name": "filtersHeader",
        "restrict": [
          "div"
        ],
        "description": "Optional padded header band for the filters layout.",
        "attributes": {
          "static": {
            "class": "slds-filters__header"
          }
        }
      },
      {
        "name": "filtersBody",
        "restrict": [
          "div"
        ],
        "description": "Optional padded body band for the filters layout.",
        "attributes": {
          "static": {
            "class": "slds-filters__body"
          }
        }
      },
      {
        "name": "filtersFooter",
        "restrict": [
          "div"
        ],
        "description": "Optional padded footer band for the filters layout.",
        "attributes": {
          "static": {
            "class": "slds-filters__footer"
          }
        }
      },
      {
        "name": "footerActions",
        "restrict": [
          "div"
        ],
        "description": "Filters-style spacing wrapper around the trailing action buttons (e.g. `Add Condition`, `Add Group`, `Check Syntax`).",
        "attributes": {
          "static": {
            "class": "slds-m-top_small"
          }
        }
      }
    ]
  },
  "stateClasses": [
    {
      "state": "new",
      "class": "slds-is-new"
    },
    {
      "state": "error",
      "class": "slds-has-error"
    },
    {
      "state": "locked",
      "class": "slds-is-locked"
    }
  ],
  "componentRefs": {
    "PrimitiveIcon": {
      "description": "Bare SVG icon composed directly inside the component. The host node supplies the SVG class (e.g. slds-button__icon, slds-menu__item-icon) via componentProps; PrimitiveIcon contributes the sprite-href binding.",
      "props": {
        "iconName": {
          "type": "string",
          "required": true,
          "description": "Sprite reference for the icon glyph"
        }
      }
    }
  },
  "states": [
    {
      "name": "new",
      "type": "boolean",
      "description": "Whether the component is in the new state"
    },
    {
      "name": "error",
      "type": "boolean",
      "description": "Whether the component is in the error state"
    },
    {
      "name": "locked",
      "type": "boolean",
      "description": "Whether the component is in the locked state"
    }
  ]
}