0?\"84px\":\"auto\"}\"\n >\n ${!this._animationsTabIsOpen&&!this._styleTabIsOpen&&!this._statesTabIsOpen?a$3`\n
\n `:a$3``}\n ${this._hasMultipleThemes&&!this._styleTabIsOpen&&!this._animationsTabIsOpen&&!this._statesTabIsOpen?a$3`
`:\"\"}\n ${this._hasMultipleStates&&!this._styleTabIsOpen&&!this._animationsTabIsOpen&&!this._statesTabIsOpen?a$3`
`:\"\"}\n ${this._animationsTabIsOpen?a$3`
\n
\n
\n
\n ${this.animations().map(s=>a$3`\n - \n \n
\n `)}\n
\n
`:a$3``}\n ${this._styleTabIsOpen?a$3`
\n
\n
\n
\n
\n
\n ${this._themesForCurrentAnimation.map(s=>a$3`\n - \n {this.setTheme(s.id);}}\n @keydown=${c=>{(c.code===\"Space\"||c.code===\"Enter\")&&this.setTheme(s.id);}}\n >\n
\n ${this.getDefaultTheme()===s.id?a$3`\n
\n `:a$3`
`}\n
\n ${s.id}
\n \n \n `)}\n
\n
`:a$3``}\n ${this._statesTabIsOpen?a$3`
\n
{this._statesTabIsOpen=!this._statesTabIsOpen,this.requestUpdate();}}\n >\n \n States
\n {this.exitInteractiveMode(),this.requestUpdate();}}\n >\n Reset\n \n \n
\n
\n
\n
\n ${this._statesForCurrentAnimation.map(s=>a$3`\n - \n {this.enterInteractiveMode(s);}}\n @keydown=${c=>{(c.code===\"Space\"||c.code===\"Enter\")&&this.enterInteractiveMode(s);}}\n >\n
\n ${this.getActiveStateMachine()===s?a$3`\n
\n `:a$3`
`}\n
\n ${s}
\n \n \n `)}\n
\n
`:a$3``}\n
\n `:a$3``}\n `}render(){var i;let t=this.controls?\"main controls\":\"main\",e=this.controls?\"animation controls\":\"animation\";return a$3`\n