refs:
  option*:
    eventListeners:
      click:
        handler: handleOptionClick
      keydown:
        handler: handleOptionKeyDown
      mouseenter:
        handler: handleOptionMouseEnter
      mouseleave:
        handler: handleOptionMouseLeave
  optionAdd:
    eventListeners:
      click:
        handler: handleAddOptionClick
      keydown:
        handler: handleAddOptionKeyDown
      mouseenter:
        handler: handleAddOptionMouseEnter
      mouseleave:
        handler: handleAddOptionMouseLeave
styles:
  '[role="button"]:focus-visible':
    outline: var(--focus-ring-outline, none)
    box-shadow: inset 0 0 0 2px var(--ring)
template:
  - 'rtgl-view d=h ${containerSizeAttrString} bw=xs bc=bo br=md bgc=bg overflow=hidden ${containerAttrString} role="group" aria-label=${ariaLabel} aria-description=${ariaDescription} aria-invalid=${ariaInvalid}':
      - $for option, i in options:
          - 'rtgl-view#option${i} d=h av=c ah=c ${optionSizeAttrString} cur=${option.cursor} bgc=${option.bgc} bwl=${option.borderLeftWidth} bc=bo data-testid=${option.testId} role="button" tabindex=${option.tabIndex} aria-label="${option.accessibleLabel}" aria-pressed=${option.isSelected} aria-disabled=${isDisabled}':
              - $if option.hasSvg:
                  - rtgl-svg svg=${option.svg} wh=${iconSize} c=${option.textColor} aria-hidden=true: null
                $else:
                  - rtgl-text s=${textSize} c=${option.textColor} ta=c: ${option.label}
      - $if showAddOption:
          - 'rtgl-view#optionAdd d=h av=c ah=c ${optionSizeAttrString} cur=pointer bgc=${addOptionBgc} bwl=${addOptionBorderLeftWidth} bc=bo data-testid="segmented-control-add-option" role="button" tabindex=0 aria-label="${addOptionAriaLabel}"':
              - $if isSquare:
                  - rtgl-svg svg=plus wh=${iconSize} c=ac aria-hidden=true: null
                $else:
                  - rtgl-text s=${textSize} c=ac ta=c: ${addOptionLabel}
      - $if hasTooltips:
          - rtgl-tooltip#tooltip ?open=${tooltipState.open} x=${tooltipState.x} y=${tooltipState.y} place=${tooltipState.place} :content=${tooltipState.content}: null