{
  "_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": "Counter",
  "description": "Numeric input with paired decrement and increment buttons embedded inside an SLDS form-element wrapper, used to step a numeric value up or down by a fixed interval.",
  "extensions": {
    "com.salesforce-ux": {
      "genReady": false
    }
  },
  "cssSource": "./counter.css",
  "styleApi": {
    "status": "stable",
    "ready": true
  },
  "structure": {
    "name": "counter",
    "restrict": [
      "div"
    ],
    "description": "Form-element wrapper that hosts the counter input and its inc/dec controls.",
    "attributes": {
      "static": {
        "class": "slds-form-element"
      }
    },
    "modifiers": [
      {
        "name": "centered",
        "attribute": "class",
        "value": "slds-text-align_center",
        "description": "Centers the label above the counter control."
      }
    ],
    "children": [
      {
        "name": "label",
        "restrict": [
          "label"
        ],
        "description": "Visible label associated with the counter input via for/id.",
        "attributes": {
          "static": {
            "class": "slds-form-element__label slds-m-right_none"
          }
        },
        "children": [
          {
            "name": "requiredIndicator",
            "restrict": [
              "abbr"
            ],
            "description": "Asterisk shown when the counter input is required.",
            "renderWhen": "propFilled",
            "attributes": {
              "static": {
                "class": "slds-required"
              }
            }
          }
        ]
      },
      {
        "name": "control",
        "restrict": [
          "div"
        ],
        "description": "Positioning context for the inc/dec buttons that overlay the input.",
        "attributes": {
          "static": {
            "class": "slds-form-element__control"
          }
        },
        "children": [
          {
            "name": "decrementButton",
            "restrict": [
              "button"
            ],
            "description": "Icon button positioned at the inline-start edge of the input that decrements the value.",
            "attributes": {
              "static": {
                "class": "slds-button slds-button_icon slds-button_icon-small slds-input__button_decrement"
              }
            },
            "children": [
              {
                "name": "decrementIcon",
                "description": "Minus glyph rendered inside the decrement button.",
                "attributes": {
                  "static": {
                    "class": "slds-button__icon"
                  }
                },
                "component": "PrimitiveIcon"
              },
              {
                "name": "decrementAssistiveText",
                "restrict": [
                  "span"
                ],
                "description": "Visually hidden label announcing the decrement action.",
                "attributes": {
                  "static": {
                    "class": "slds-assistive-text"
                  }
                }
              }
            ]
          },
          {
            "name": "input",
            "restrict": [
              "input"
            ],
            "description": "Numeric input element that stores the counter value.",
            "attributes": {
              "static": {
                "class": "slds-input slds-input_counter"
              }
            }
          },
          {
            "name": "incrementButton",
            "restrict": [
              "button"
            ],
            "description": "Icon button positioned at the inline-end edge of the input that increments the value.",
            "attributes": {
              "static": {
                "class": "slds-button slds-button_icon slds-button_icon-small slds-input__button_increment"
              }
            },
            "children": [
              {
                "name": "incrementIcon",
                "description": "Plus glyph rendered inside the increment button.",
                "attributes": {
                  "static": {
                    "class": "slds-button__icon"
                  }
                },
                "component": "PrimitiveIcon"
              },
              {
                "name": "incrementAssistiveText",
                "restrict": [
                  "span"
                ],
                "description": "Visually hidden label announcing the increment action.",
                "attributes": {
                  "static": {
                    "class": "slds-assistive-text"
                  }
                }
              }
            ]
          }
        ]
      },
      {
        "name": "helpText",
        "restrict": [
          "div"
        ],
        "description": "Inline help or error message associated with the input via aria-describedby.",
        "attributes": {
          "static": {
            "class": "slds-form-element__help"
          }
        }
      }
    ]
  },
  "stateClasses": [
    {
      "state": "error",
      "class": "slds-has-error"
    }
  ],
  "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": "error",
      "type": "boolean",
      "description": "Whether the component is in the error state"
    }
  ]
}